/* This is Yan — prototype. Une scène noire, une seule couleur vive, des photographies qui font le reste. */

@font-face {
  font-family: 'Syne';
  src: url('../fonts/syne-latin-var.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Syne';
  src: url('../fonts/syne-latin-ext-var.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-latin-wght-normal.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-latin-ext-wght-normal.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --noir: #0a0a0b;
  --nuit: #141416;
  --os: #f1ece4;
  --cendre: #9b968f;
  --rose: #ff2e7e;
  --rose-profond: #c8135a;
  --blanc: #ffffff;
  --pourpre-nuit: #1a0b14;
  --ambre: #ffd9a8;
  --papier: #f4efe7;
  --sillon: #1b1b1d;
  /* Les trois mondes du multivers : l'artiste (rose), la voix publique (ambre), le stratège (électrique).
     Les variantes « profond » sont pour le texte sur le papier clair du cartel. */
  --or-vif: #ffb23f;
  --electrique: #4de1ff;
  --or-profond: #9a5800;
  --electrique-profond: #006e86;
  --rvb-artiste: 255, 46, 126;
  --rvb-voix: 255, 178, 63;
  --rvb-stratege: 77, 225, 255;
  --f-titre: 'Syne', 'Arial Black', sans-serif;
  --f-voix: 'Instrument Serif', Georgia, serif;
  --f-texte: 'Figtree', system-ui, sans-serif;
  --marge: clamp(1rem, 4vw, 3.5rem);
  --lent: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Lu par les lecteurs d'écran et par Google, invisible à l'œil. */
.visuellement-cache { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

html { background: var(--noir); }
body {
  margin: 0;
  background: var(--noir);
  color: var(--os);
  font-family: var(--f-texte);
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }

:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; }

/* Le grain : une pellicule sur tout le site, pour que le noir ne soit jamais un aplat d'écran. */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  z-index: 50;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

.evitement {
  position: absolute;
  left: var(--marge);
  top: -4rem;
  z-index: 60;
  padding: .6rem 1rem;
  background: var(--rose);
  color: var(--noir);
  font-weight: 600;
  text-decoration: none;
}
.evitement:focus { top: 1rem; }

/* ——— En-tête : en différence, il reste lisible sur le noir comme sur les photographies. */
.entete {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem var(--marge);
  color: var(--blanc);
  mix-blend-mode: difference;
  /* La bande de l'en-tête est transparente : elle ne doit pas prendre les clics destinés à ce qu'elle survole
     (le bouton « Fermer » du cartel s'y trouvait caché). Seuls le logo et les liens restent cliquables. */
  pointer-events: none;
}
/* Connecté, la barre d'administration de WordPress est fixée en haut : l'en-tête se pose dessous au lieu d'être caché. */
body.admin-bar .entete { top: var(--wp-admin--admin-bar--height, 32px); }
/* La barre d'administration décale la page : la scène du multivers s'arrête sous elle, sinon le pupitre sort de l'écran. */
body.admin-bar .multivers__scene { top: var(--wp-admin--admin-bar--height, 32px); height: calc(100svh - var(--wp-admin--admin-bar--height, 32px)); }
/* Hors du multivers, l'en-tête devient une vraie bande : fond sombre et flou, plus de fusion, et il prend
   les clics qu'il couvre, puisqu'on le voit. */
.entete { transition: background .5s, backdrop-filter .5s, padding .5s; }
.entete.a-un-fond {
  mix-blend-mode: normal;
  pointer-events: auto;
  padding-block: .7rem;
  background: rgb(10 10 11 / .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgb(241 236 228 / .08);
}
.entete.a-un-fond .entete__signature img, .entete.a-un-fond .entete__signature .custom-logo { width: clamp(5rem, 7vw, 6.5rem); }
/* Défilé, l'en-tête se réduit (Yan, 01.11.2026 : « assez grand, sauf quand on scrolle ; il doit shrinker »). */
.entete .entete__signature :is(img, .custom-logo) { transition: width .45s var(--lent); }
.entete.est-reduit { padding-block: .55rem; }
.entete.est-reduit .entete__signature .custom-logo { width: clamp(3.6rem, 5vw, 4.6rem); }
/* Réduit, l'en-tête montre le « YH » manuscrit à la place de la signature entière (Yan, 01.11.2026). */
.entete__signature .custom-logo-link { position: relative; }
.entete .entete__signature img.entete__yh { position: absolute; left: 0; top: 50%; width: auto; height: 2.4rem; translate: 0 -50%; opacity: 0; pointer-events: none; transition: opacity .45s var(--lent); }
.entete__signature .custom-logo { transition: width .45s var(--lent), opacity .45s var(--lent); }
.entete.est-reduit .entete__signature .custom-logo { opacity: 0; }
.entete.est-reduit .entete__signature img.entete__yh { opacity: 1; }
/* Sur ordinateur, trois groupes (Yan, 01.11.2026) : le logo à gauche ; les trois mondes et le 1 440 au milieu ;
   à droite les langues, puis la boutique et le panier. La navigation s'efface (display: contents) pour que
   chaque lien se place dans la grille de l'en-tête. */
@media (min-width: 48.01rem) {
  .entete.entete { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, auto) minmax(0, 1fr); column-gap: clamp(1.4rem, 2.6vw, 2.6rem); }
  /* À l'état large, autant d'air au-dessus du logo qu'en dessous : les liens tombent au milieu de la bande (Yan,
     02.11.2026 : « un tout petit peu plus bas »). */
  .entete:not(.est-reduit):not(.a-un-fond) { padding-block: .6rem; }
  /* Et les liens au milieu de la bande que voit l'œil, du haut de l'écran au bas du logo, plutôt qu'au milieu de la
     boîte : le logo descend plus bas qu'il ne monte (Yan, 02.11.2026, deuxième demande). */
  .entete:not(.est-reduit):not(.a-un-fond) :is(.lien-monde, .entete__droite) { position: relative; top: -.35rem; }
  .entete :is(nav.entete__nav, ul.wp-block-navigation__container) { display: contents; }
  .entete > * , .entete li { grid-row: 1; }
  .entete .entete__signature { grid-column: 1; justify-self: start; }
  .entete .lien-monde--voix { grid-column: 2; }
  .entete .lien-monde--artiste { grid-column: 3; }
  .entete .lien-monde--stratege { grid-column: 4; }
  /* À droite, d'un seul bloc et à intervalles réguliers : les langues, le 1 440, la boutique, le panier. */
  .entete .entete__droite { grid-column: 5; justify-self: end; display: flex; align-items: center; gap: clamp(.6rem, 1.4vw, 1.2rem); }
  .entete .entete__droite li { margin: 0; }
  /* La boutique et le panier vont ensemble : plus proches l'un de l'autre, mais pas collés. */
  .entete .entete__droite .entete__icone + .entete__icone { margin-left: calc(-1 * clamp(.6rem, 1.4vw, 1.2rem) + .55rem); }
}
/* Les mondes dans le menu : une pastille de leur couleur, pour qu'on les voie dès l'arrivée. */
.lien-monde a, a.lien-monde { display: inline-flex; align-items: center; gap: .45rem; }
.lien-monde a::before, a.lien-monde::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: var(--pastille, var(--os)); box-shadow: 0 0 .6rem var(--pastille, transparent); }
.lien-monde--artiste { --pastille: var(--rose); }
.lien-monde--voix { --pastille: var(--or-vif); }
.lien-monde--stratege { --pastille: var(--electrique); }
/* Le monde où l'on est : son lien du menu prend sa couleur (posé par `multivers.js` sur <html>). */
:root[data-monde="artiste"] :is(.lien-monde--artiste a, a.lien-monde--artiste),
:root[data-monde="voix"] :is(.lien-monde--voix a, a.lien-monde--voix),
:root[data-monde="stratege"] :is(.lien-monde--stratege a, a.lien-monde--stratege) { color: var(--pastille); }
/* Contact, à part : l'action que cherchent la presse et les organisateurs, en pastille après les trois mondes
   (Yan, 30.10.2026 : le menu dit les mondes, le sommaire de droite dit les sections). */
a.entete__contact, .entete__contact a {
  margin-left: clamp(.4rem, 1.5vw, 1.4rem);
  /* L'espacement des lettres s'ajoute aussi après la dernière : la marge de droite le reprend, sinon le mot
     paraît décalé à gauche dans sa pastille (Yan, 31.10.2026). */
  padding: .45rem calc(1rem - .14em) .45rem 1rem;
  border: 1px solid currentColor;
  border-radius: 999px;
}
/* Les 1 440 minutes, tout à droite du menu, dans l'or de minuit offert (Yan, 31.10.2026). L'en-tête est en
   différence de couleur sur le multivers : sur le noir, l'or reste l'or. */
.entete__nav :is(a.entete__1440, .entete__1440 .wp-block-navigation-item__content.wp-block-navigation-item__content) {
  /* Moins haut que les 44 px d'origine, au ras des autres liens du menu ; il reste la chose la plus voyante de
     l'en-tête (Yan, 02.11.2026 : « un petit peu trop haut »). */
  min-height: 2rem;
  padding: .25rem calc(1rem - .08em) .25rem 1rem;
  border-radius: 999px;
  background: var(--or-vif);
  color: var(--noir);
  font-family: var(--f-titre);
  font-weight: 800;
  letter-spacing: .08em;
}
.entete__nav :is(a.entete__1440, .entete__1440 .wp-block-navigation-item__content.wp-block-navigation-item__content):is(:hover, :focus-visible) { background: var(--os); }
/* Le logo et le menu reprennent les clics que la bande laisse passer. */
.entete__signature, .entete__nav { pointer-events: auto; }
.entete__signature {
  white-space: nowrap;
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
}
/* Le logo manuscrit : ses traits sont fins, il lui faut de la taille pour se lire. */
.entete__signature img, .entete__signature .custom-logo { display: block; width: clamp(6.5rem, 10vw, 9.5rem); height: auto; }
.entete__nav { display: flex; gap: clamp(1rem, 3vw, 2.5rem); }
.entete__nav a {
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .5s var(--lent);
}
.entete__nav a:hover { background-size: 100% 1px; }

/* ——— Le multivers : un nuage qu'on voit de loin, puis dans lequel on entre. */
.multivers { position: relative; height: 420vh; }
html.est-en-galerie { overflow: hidden; }
.multivers__scene {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  /* `clip` et non `hidden` : une boîte `hidden` reste défilable par le navigateur. Au focus d'un élément
     en partie hors cadre, il faisait glisser toute la scène vers le haut (372 px mesurés le 30.10.2026) et
     laissait le bas de l'écran noir — c'est là que Yan se retrouvait « coincé ». */
  overflow: hidden;
  overflow: clip;
  background: radial-gradient(ellipse at 50% 50%, var(--pourpre-nuit) 0%, var(--noir) 62%);
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}
/* Un voile très léger sous l'en-tête : les fils et la poussière s'y éteignent, le menu reste lisible. */
.multivers__scene::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: 140000;
  height: 9rem;
  background: linear-gradient(var(--noir), color-mix(in srgb, var(--noir) 55%, transparent) 45%, transparent);
  pointer-events: none;
}
.multivers__scene:active { cursor: grabbing; }
.multivers__fils { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Le visage de chaque monde : un grand portrait en filigrane, derrière le lobe, quand on choisit le monde. */
.multivers__visages { position: absolute; inset: 0; pointer-events: none; }
.multivers__visages img {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 96%;
  width: auto;
  max-width: none;
  translate: -50% 0;
  opacity: 0;
  filter: grayscale(.35) contrast(1.05);
  -webkit-mask-image: radial-gradient(ellipse 48% 58% at 50% 45%, var(--noir) 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 48% 58% at 50% 45%, var(--noir) 30%, transparent 75%);
  transition: opacity 1.6s var(--lent);
}
.multivers[data-monde="artiste"] .multivers__visages img[data-monde="artiste"],
.multivers[data-monde="voix"] .multivers__visages img[data-monde="voix"],
.multivers[data-monde="stratege"] .multivers__visages img[data-monde="stratege"] { opacity: .2; }
.est-en-voyage .multivers__visages img { opacity: 0; }
.multivers__noeuds { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.mv-noeud {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  will-change: transform, opacity;
}
.mv-noeud__bouton {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.mv-noeud--photo .mv-noeud__bouton, .mv-noeud--centre .mv-noeud__bouton { width: 12.5rem; }
.mv-noeud--photo img, .mv-noeud--centre img {
  width: 100%;
  height: auto;
  transition: filter .5s, box-shadow .5s, outline-color .5s;
  outline: 1px solid transparent;
  outline-offset: 6px;
}
.mv-noeud--photo img { filter: saturate(.85) brightness(.9); }
.mv-noeud--centre img { outline: 1px solid rgb(255 46 126 / .6); }
.mv-noeud.est-actif img, .mv-noeud__bouton:hover img, .mv-noeud__bouton:focus-visible img {
  filter: none;
  outline-color: var(--rose);
  box-shadow: 0 0 4rem rgb(255 46 126 / .35);
}
.mv-noeud__legende { display: none; }
.mv-noeud--role .mv-noeud__bouton, .mv-noeud--theme .mv-noeud__bouton, .mv-noeud--etoile .mv-noeud__bouton, .mv-noeud--equipe .mv-noeud__bouton,
.mv-noeud--vie .mv-noeud__bouton, .mv-noeud--regard .mv-noeud__bouton {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 3rem;
  min-height: 3rem;
}
.mv-noeud--role .mv-noeud__bouton::before, .mv-noeud--theme .mv-noeud__bouton::before, .mv-noeud--etoile .mv-noeud__bouton::before, .mv-noeud--equipe .mv-noeud__bouton::before,
.mv-noeud--vie .mv-noeud__bouton::before, .mv-noeud--regard .mv-noeud__bouton::before {
  content: '';
  width: var(--signe, .7rem);
  height: var(--signe, .7rem);
  border-radius: 50%;
  background: var(--couleur-signe, var(--rose));
  box-shadow: 0 0 1.2rem .3rem var(--halo-signe, rgb(255 46 126 / .55));
  transition: transform .5s var(--lent);
}
.mv-noeud--role { --signe: 1.3rem; }
.mv-noeud--role .mv-noeud__bouton::before { background: none; border: 2px solid var(--rose); }
.mv-noeud--theme { --signe: 1rem; --couleur-signe: var(--os); --halo-signe: rgb(255 46 126 / .7); }
.mv-noeud--vie { --signe: .75rem; }
.mv-noeud--regard { --signe: .55rem; --couleur-signe: var(--os); --halo-signe: rgb(241 236 228 / .4); }
.mv-noeud--etoile { --signe: .8rem; --couleur-signe: var(--ambre); --halo-signe: rgb(255 210 150 / .6); }
.mv-noeud--etoile .mv-noeud__bouton::before { border-radius: 2px; transform: rotate(45deg); }
.mv-noeud--etoile .mv-noeud__bouton:hover::before, .mv-noeud--etoile.est-actif .mv-noeud__bouton::before { transform: rotate(45deg) scale(1.6); }
.mv-noeud--equipe { --signe: 1rem; --couleur-signe: transparent; --halo-signe: rgb(255 46 126 / .4); }
.mv-noeud--equipe .mv-noeud__bouton::before { border: 2px dotted var(--rose); }
.mv-noeud--etoile .mv-noeud__nom, .mv-noeud--equipe .mv-noeud__nom {
  font-family: var(--f-voix);
  font-size: 1.8rem;
  color: var(--os);
}
.mv-noeud--marque img {
  display: block;
  width: 10.5rem;
  height: 6rem;
  padding: .9rem 1.2rem;
  object-fit: contain;
  border-radius: .8rem;
  background: var(--os);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--electrique) 35%, transparent), 0 1.2rem 3rem rgb(0 0 0 / .55);
  transition: box-shadow .5s, transform .5s var(--lent);
}
.mv-noeud--marque.est-actif img, .mv-noeud--marque .mv-noeud__bouton:hover img, .mv-noeud--marque .mv-noeud__bouton:focus-visible img {
  box-shadow: 0 0 0 2px var(--electrique), 0 0 3rem color-mix(in srgb, var(--electrique) 45%, transparent);
}
.mv-noeud--spectacle img { outline: 0; filter: drop-shadow(0 0 1.5rem rgb(255 46 126 / .45)); }
.mv-noeud--spectacle.est-focus img { box-shadow: none; filter: drop-shadow(0 0 3rem rgb(255 46 126 / .6)); }
.mv-noeud__bouton:hover::before, .mv-noeud.est-actif .mv-noeud__bouton::before { transform: scale(1.6); }
.mv-noeud--role .mv-noeud__nom, .mv-noeud--theme .mv-noeud__nom, .mv-noeud--etoile .mv-noeud__nom, .mv-noeud--equipe .mv-noeud__nom,
.mv-noeud--vie .mv-noeud__nom, .mv-noeud--regard .mv-noeud__nom {
  position: absolute;
  top: calc(100% + .2rem);
  left: 50%;
  translate: -50% 0;
  opacity: 0;
  transform: translateY(-.4rem);
  transition: opacity .4s, transform .5s var(--lent);
  pointer-events: none;
}
.mv-noeud__bouton:hover .mv-noeud__nom, .mv-noeud__bouton:focus-visible .mv-noeud__nom,
.mv-noeud.est-actif .mv-noeud__nom, .mv-noeud.est-proche .mv-noeud__nom { opacity: 1; transform: none; }
.mv-noeud__nom {
  display: block;
  white-space: nowrap;
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 1.5rem var(--noir);
  transition: color .4s;
}
.mv-noeud--role .mv-noeud__nom {
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: 2.2rem;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.mv-noeud--vie .mv-noeud__nom {
  font-family: var(--f-voix);
  font-style: italic;
  font-size: 3rem;
  color: var(--rose);
}
.mv-noeud--regard .mv-noeud__nom {
  font-size: 1.05rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cendre);
}
.mv-noeud--regard .mv-noeud__nom::before { content: '◎ '; color: var(--rose); }
.mv-noeud.est-actif .mv-noeud__nom, .mv-noeud__bouton:hover .mv-noeud__nom { color: var(--rose); }
.mv-noeud--vie.est-actif .mv-noeud__nom, .mv-noeud--vie .mv-noeud__bouton:hover .mv-noeud__nom { color: var(--os); }

.multivers__titres {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  pointer-events: none;
}
/* L'intro en deux temps (Yan, 31.10.2026 : « les gens ne me voient pas », puis « ça s'écrit normal, l'écriture
   avant ; on ne voit pas la photo à ce moment ; une fois fini d'écrire, la première carte apparaît »). La plume
   écrit seule au centre ; puis `est-en-duo` compose la scène : l'écriture glisse à gauche (multivers.js anime le
   trajet), la devise se pose sous elle, et le portrait doré entre à droite comme une carte. En portrait,
   l'écriture monte et la carte vient dessous. Le nuage éclot autour ; on défile, tout s'éteint. */
.multivers__titres { z-index: 120000; }
.multivers__portrait {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  width: auto;
  max-width: none;
  /* Détouré : il se tient dans le nuage, sans cadre, et le bas (la photo s'arrête aux cuisses) se fond dans la scène.
     La lueur rose n'est plus un drop-shadow : le masque du fondu le coupait aux bords de l'image, et un rectangle se
     dessinait autour de la photo (Yan, 02.11.2026). Elle est peinte derrière, par la grille (::before, ci-dessous). */
  -webkit-mask-image: linear-gradient(to top, transparent, var(--noir) 22%);
  mask-image: linear-gradient(to top, transparent, var(--noir) 22%);
}
.multivers__devise { transition: opacity 1s var(--lent) .4s; }
.multivers__titres:not(.est-en-duo) .multivers__devise { opacity: 0; }
.est-en-duo {
  grid-template-columns: auto auto;
  grid-template-areas: "ecr por" "dev por";
  column-gap: clamp(2rem, 6vw, 6rem);
  row-gap: 1.2rem;
  place-content: center;
  align-items: center;
}
.est-en-duo :is(.multivers__plume, .multivers__ecriture) { grid-area: ecr; width: min(36vw, 30rem); align-self: end; }
.est-en-duo .multivers__devise { grid-area: dev; align-self: start; }
.est-en-duo .multivers__portrait {
  grid-area: por;
  position: static;
  visibility: visible;
  height: min(calc(100svh - 12rem), 48rem);
  align-self: end;
  transform-origin: 50% 40%;
  transform: scale(calc(1 - var(--entree, 0) * .35));
  opacity: calc(1 - var(--entree, 0) * 1.8);
  animation: carte-entrer .9s cubic-bezier(.2, .7, .2, 1) backwards; /* plus vif (Yan, 02.11.2026) */
}
@keyframes carte-entrer { from { opacity: 0; translate: 4rem 0; scale: .94; } }
/* La lueur derrière le portrait : dans la même case de la grille, elle entre et sort avec lui. */
.multivers__titres::before { content: ''; grid-area: por; visibility: hidden; opacity: 0; pointer-events: none; }
.multivers__titres.est-en-duo::before {
  visibility: visible;
  place-self: stretch;
  background: radial-gradient(ellipse 44% 40% at 50% 44%, color-mix(in srgb, var(--rose) 26%, transparent), transparent); /* elle s'éteint avant les bords de sa case */
  opacity: calc(1 - var(--entree, 0) * 1.8);
  animation: carte-entrer .9s cubic-bezier(.2, .7, .2, 1) backwards;
}
.multivers__titres.est-en-duo.yan-sort::before { opacity: 0; transition: opacity 1.2s var(--lent); }
.multivers__titres:is(.est-libre, .sans-intro)::before { display: none; }
.sans-intro .multivers__portrait { display: none; }
/* Yan s'efface pendant que la signature s'envole, sans bouger (Yan, 31.10.2026). La devise s'efface avec lui. */
.est-en-duo.yan-sort .multivers__portrait { opacity: 0; transition: opacity 1.2s var(--lent); }
.yan-sort:not(.est-libre) .multivers__devise { opacity: 0; transition: opacity .8s; }
/* Puis Yan s'efface avec la signature : la place est au multivers (Yan, 31.10.2026). La devise revient au centre. */
.est-libre .multivers__portrait { opacity: 0; transform: scale(.9); transition: opacity 1.1s var(--lent), transform 1.1s var(--lent); animation: none; pointer-events: none; }
.est-libre { grid-template-columns: auto; grid-template-areas: "dev"; place-content: center; padding-top: 0; }
.est-libre .multivers__portrait { position: absolute; }
/* La signature posée ne tient plus de place : sinon la devise restait décalée en haut à gauche. */
.est-libre :is(.multivers__plume, .multivers__ecriture) { display: none; }
.est-libre .multivers__devise { grid-area: dev; }
/* « Bienvenue » · « dans mon » · « multivers » : chaque mot paraît, puis cède la place au suivant. */
.multivers__bienvenue { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.multivers__bienvenue span { grid-area: 1 / 1; font-family: var(--f-voix); font-style: italic; font-size: clamp(2.6rem, 8vw, 6rem); color: var(--os); text-shadow: 0 0 2rem color-mix(in srgb, var(--rose) 45%, transparent); opacity: 0; animation: bienvenue 1.5s var(--lent) calc(var(--rang) * 1.3s + .5s) both; }
/* La phrase d'accueil sur une ligne, au milieu, en bas (Yan, 02.11.2026). Chaque mot monte et s'allume, l'un après
   l'autre ; seuls l'opacité et le déplacement s'animent : le flou et l'interlettrage faisaient saccader le texte. */
.multivers__bienvenue--duo { position: absolute; inset: auto 1rem clamp(4.5rem, 13svh, 9rem); display: flex; flex-wrap: wrap; justify-content: center; place-items: baseline; gap: 0 .3em; margin: 0; }
.multivers__bienvenue--duo span { grid-area: auto; opacity: 0; font-size: clamp(2rem, 4.4vw, 4.2rem); line-height: 1.1; white-space: nowrap; will-change: opacity, transform; animation: bienvenue-entre 1.6s cubic-bezier(.2, .7, .1, 1) calc(var(--rang) * .5s) forwards; }
.multivers__bienvenue--duo span:last-child { color: var(--rose); }
.multivers__bienvenue--duo.part { animation: bienvenue-part 1.2s var(--lent) forwards; } /* au pas du portrait qui s'efface */
@keyframes bienvenue-entre { from { opacity: 0; transform: translateY(.35em); } to { opacity: 1; transform: none; } }
@keyframes bienvenue-part { to { opacity: 0; transform: translateY(-.25em); } }
@media (max-width: 48rem) { .multivers__bienvenue--duo span { font-size: clamp(1.8rem, 9vw, 2.6rem); } }
@keyframes bienvenue { 0% { opacity: 0; filter: blur(12px); translate: 0 .4em; } 35%, 65% { opacity: 1; filter: none; translate: 0 0; } 100% { opacity: 0; filter: blur(10px); translate: 0 -.3em; } }
.est-libre .multivers__devise { opacity: 0; animation: devise-revenir 1.2s var(--lent) 4.4s forwards; }
@keyframes devise-revenir { to { opacity: 1; } }
/* Tant que l'écriture tient la scène, le logo de l'en-tête attend (sinon le nom se lirait deux fois). */
html.nom-en-scene body .entete__signature :is(img:not(.entete__yh), .custom-logo) { opacity: 0; }
@media (orientation: portrait), (max-width: 48rem) {
  .est-en-duo { grid-template-columns: auto; grid-template-areas: "ecr" "dev" "por"; place-content: start center; justify-items: center; padding-top: 11svh; row-gap: .8rem; }
  .est-en-duo :is(.multivers__plume, .multivers__ecriture) { width: min(56vw, 20rem); }
  /* Assez court pour laisser lisible la consigne « Défilez pour entrer », en bas. */
  .est-en-duo .multivers__portrait { height: min(41svh, 34rem); }
  .multivers__ecriture, .multivers__plume { width: min(78vw, 30rem); }
}
/* Le nom se disperse en poussière : chaque lettre part dans sa direction. */
.mv-mot { display: inline-block; white-space: nowrap; animation: apparaitre 2.4s var(--lent) both; }
.mv-lettre {
  display: inline-block;
  transform: translate(calc(var(--dx) * var(--entree, 0) * 1px), calc(var(--dy) * var(--entree, 0) * 1px)) rotate(calc(var(--tour) * var(--entree, 0) * 1deg));
  opacity: calc(1 - var(--entree, 0) * 1.3);
  filter: blur(calc(var(--entree, 0) * 9px));
}
@keyframes apparaitre { from { opacity: 0; filter: blur(14px); letter-spacing: .3em; } }
/* L'intro : l'écriture de Yan se trace sous la plume, trait après trait (`multivers.js` pose le tracé), puis
   s'envole se poser en haut à gauche : le logo de l'en-tête n'apparaît qu'à ce moment-là. Sans le script, ou si
   le logo n'est pas celui dont on connaît les traits, elle se dévoile simplement de gauche à droite. */
.multivers__ecriture, .multivers__plume {
  display: block;
  width: min(62vw, 34rem);
  height: auto;
  filter: drop-shadow(0 0 1.6rem rgba(var(--rvb-artiste), .35));
  transform: scale(calc(1 + var(--entree, 0) * .5));
  opacity: calc(1 - var(--entree, 0) * 1.4);
}
.multivers__ecriture { clip-path: inset(0 100% 0 0); animation: ecrire 2.6s cubic-bezier(.55, .1, .35, 1) 1.4s forwards; }
.multivers__ecriture.se-devoile { animation-delay: .2s; }
@keyframes ecrire { to { clip-path: inset(0 0 0 0); } }
.multivers__plume { position: relative; }
.multivers__plume .multivers__ecriture { width: 100%; filter: none; transform: none; opacity: 1; visibility: hidden; animation: none; }
.multivers__plume svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.multivers__pointe { fill: var(--blanc); filter: drop-shadow(0 0 4px rgb(var(--rvb-artiste))) drop-shadow(0 0 10px rgba(var(--rvb-artiste), .8)); transition: opacity .3s; }
.multivers__plume.est-posee, .multivers__ecriture.est-posee, .sans-intro .multivers__ecriture { visibility: hidden; }
/* Le logo de l'en-tête attend l'écriture (repli : il paraît de lui-même au bout de dix secondes). La classe
   `home` de l'accueil, et non `:has(.multivers__ecriture)` : l'en-tête est peint avant que l'écriture ne soit
   lue, et le logo apparaissait une demi-seconde avant de s'effacer. */
body.home .entete__signature :is(img:not(.entete__yh), .custom-logo) { opacity: 0; transition: opacity .4s; animation: arriver .5s 10s forwards; }
.ecriture-finie body .entete__signature :is(img:not(.entete__yh), .custom-logo) { opacity: 1; animation: none; }
/* Ces règles de l'intro visaient « toute image de la signature », donc aussi le YH de l'en-tête réduit : en fin d'intro,
   la signature et le YH s'affichaient l'un sur l'autre (Yan, 01.11.2026). Le YH ne suit que est-reduit. */
@keyframes arriver { to { opacity: 1; } }
.multivers__titre {
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: min(9.4vw, 20vh);
  line-height: .86;
  letter-spacing: -.045em;
  text-transform: uppercase;
  mix-blend-mode: difference;
}
.multivers__devise {
  margin-top: 1.2rem;
  font-family: var(--f-voix);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 2.4rem);
  color: var(--rose);
}
.multivers__consigne {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  translate: -50% 0;
  font-size: .7rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--cendre);
  pointer-events: none;
}
.est-en-voyage .multivers__consigne { opacity: 0; }
/* En galerie, le nom s'efface : il ne doit ni passer devant l'œuvre ni teinter les fils par sa fusion. */
.multivers__titres { transition: opacity .6s; }
.est-en-voyage .multivers__titres { opacity: 0; }

/* Le cartel : comme au musée, une plaquette claire à côté de l'œuvre. */
.multivers__scene::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 140000;
  pointer-events: none;
  background: radial-gradient(ellipse 34% 52% at 34% 50%, transparent 0%, rgb(5 5 6 / .55) 70%, rgb(5 5 6 / .82) 100%);
  opacity: 0;
  transition: opacity 1.2s var(--lent);
}
.est-en-voyage .multivers__scene::after { opacity: 1; }
.multivers__scene::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 145000;
  pointer-events: none;
  background: conic-gradient(from 168deg at 34% -8%, transparent 0deg, rgb(255 244 228 / .09) 10deg, rgb(255 244 228 / .12) 12deg, rgb(255 244 228 / .09) 14deg, transparent 24deg);
  opacity: 0;
  transition: opacity 1.4s var(--lent);
}
.est-en-voyage .multivers__scene::before { opacity: 1; }
.mv-noeud--photo.est-focus img, .mv-noeud--centre.est-focus img {
  padding: 7%;
  background: var(--papier);
  outline: 1px solid rgb(0 0 0 / .5);
  outline-offset: 0;
  filter: none;
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / .65), 0 0 0 .35rem var(--sillon);
}
.mv-noeud--oeuvre.est-focus img { outline-color: transparent; box-shadow: 0 2rem 5rem rgb(0 0 0 / .7), 0 0 4rem rgb(255 46 126 / .35); }
.mv-cartel__parcours { display: flex; align-items: center; gap: .6rem; }
.mv-cartel__parcours[hidden] { display: none; }
.mv-cartel__precedente, .mv-cartel__suivante {
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid rgb(10 10 11 / .25);
  border-radius: 50%;
  background: none;
  color: var(--noir);
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.mv-cartel__precedente:hover, .mv-cartel__suivante:hover { background: var(--noir); color: var(--os); border-color: var(--noir); }
.mv-cartel__compteur { flex: 1; text-align: center; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgb(10 10 11 / .6); }
.mv-panneau {
  position: absolute;
  top: calc(50% + 2.5rem);
  right: var(--marge);
  z-index: 200000;
  width: min(25rem, calc(100% - 2 * var(--marge)));
  max-height: calc(100% - 12rem);
  translate: 0 -50%;
  display: grid;
  align-content: start;
  gap: .9rem;
  padding: 1.6rem 1.6rem 1.4rem;
  overflow: auto;
  background: var(--os);
  color: var(--noir);
  box-shadow: 0 2.5rem 5rem -1.5rem rgb(0 0 0 / .8), 0 0 0 1px rgb(0 0 0 / .08);
  cursor: auto;
  user-select: text;
}
.mv-panneau.est-neuf { animation: cartel .9s var(--lent) both; }
@keyframes cartel { from { opacity: 0; transform: translateY(1.2rem); } }
.mv-panneau__fermer {
  justify-self: end;
  margin: -.6rem -.6rem 0 0;
  padding: .45rem .9rem;
  border: 1px solid rgb(10 10 11 / .25);
  border-radius: 999px;
  background: none;
  color: var(--noir);
  font: inherit;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
.mv-panneau__fermer:hover { border-color: var(--rose-profond); color: var(--rose-profond); }
.mv-cartel__numero {
  font-family: var(--f-titre);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rose-profond);
}
.mv-cartel__titre {
  font-family: var(--f-voix);
  font-size: clamp(1.8rem, 2.6vw, 2.5rem);
  line-height: 1.02;
}
.mv-cartel__corps { display: grid; gap: .8rem; }
.mv-cartel__corps .mv-noeud__accroche, .mv-cartel__corps .mv-noeud__sous-titre {
  font-family: var(--f-voix);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--rose-profond);
}
.mv-cartel__corps .mv-noeud__texte { font-size: .92rem; line-height: 1.6; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.mv-cartel__corps .mv-noeud__equipe { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; font-size: .8rem; line-height: 1.35; }
.mv-cartel__corps .mv-noeud__equipe strong { display: block; font-weight: 600; }
.mv-cartel__corps .mv-noeud__citation {
  font-family: var(--f-voix);
  font-size: 1.45rem;
  line-height: 1.2;
}
.mv-cartel__corps .mv-noeud__citation::before { content: '« '; }
.mv-cartel__corps .mv-noeud__citation::after { content: ' »'; }
/* Les thèmes du stratège sont des énoncés de la maison, pas des paroles rapportées : pas de guillemets. */
.mv-panneau[data-monde="stratege"] .mv-noeud__citation::before, .mv-panneau[data-monde="stratege"] .mv-noeud__citation::after { content: none; }
.mv-cartel__corps .mv-noeud__source, .mv-cartel__legende {
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgb(10 10 11 / .6);
}
.mv-cartel__legende { padding-top: .8rem; border-top: 1px solid rgb(10 10 11 / .15); }
.mv-cartel__corps .mv-noeud__ecouter {
  justify-self: start;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  background: var(--noir);
  color: var(--os);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
}
.mv-cartel__corps .mv-noeud__ecouter:hover { background: var(--rose-profond); }
.mv-panneau__relie {
  margin-top: .3rem;
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgb(10 10 11 / .55);
}
.mv-panneau__liens { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.mv-lien {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: .4rem .9rem;
  border: 1px solid rgb(10 10 11 / .2);
  border-radius: 999px;
  background: none;
  color: var(--noir);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
  transition: border-color .3s, color .3s, background .3s;
}
.mv-lien:hover { border-color: var(--rose-profond); color: var(--rose-profond); }
.mv-lien--vie, .mv-lien--theme { font-family: var(--f-voix); font-style: italic; font-size: 1.1rem; }
.mv-lien--vie { color: var(--rose-profond); }
.mv-lien--role { font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; }
.mv-lien--photo, .mv-lien--centre, .mv-lien--oeuvre { padding: 0; border-radius: 0; overflow: hidden; }
.mv-lien--photo img, .mv-lien--centre img, .mv-lien--oeuvre img { width: 3.5rem; height: 3.5rem; object-fit: cover; transition: transform .4s var(--lent); }
.mv-lien--photo:hover img, .mv-lien--oeuvre:hover img { transform: scale(1.08); }
.mv-lien--marque { padding: 0; border-radius: .5rem; overflow: hidden; }
.mv-lien--marque img { width: 4.2rem; height: 2.6rem; padding: .3rem; object-fit: contain; background: var(--os); }
/* Dans le chercheur, sur fond sombre, les liens prennent la couleur claire. */
.chercheur .mv-lien { color: var(--os); border-color: color-mix(in srgb, var(--os) 25%, transparent); }
.chercheur .mv-lien:hover { color: var(--rose); border-color: var(--rose); }

/* Les grosses flèches de la galerie, de part et d'autre de l'œuvre. */
.mv-fleche {
  position: absolute;
  top: 50%;
  z-index: 190000;
  display: grid;
  place-items: center;
  width: 4.6rem;
  height: 4.6rem;
  translate: 0 -50%;
  border: 1px solid rgb(241 236 228 / .35);
  border-radius: 50%;
  background: rgb(10 10 11 / .45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--os);
  font-family: var(--f-titre);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  transition: background .3s, border-color .3s, color .3s, transform .4s var(--lent);
}
.mv-fleche[hidden] { display: none; }
.mv-fleche:hover { background: var(--rose); border-color: var(--rose); color: var(--noir); }
.mv-fleche--precedente { left: var(--marge); }
.mv-fleche--precedente:hover { transform: translateX(-.3rem); }
.mv-fleche--suivante { right: calc(min(25rem, 100% - 2 * var(--marge)) + 2 * var(--marge)); }
.mv-fleche--suivante:hover { transform: translateX(.3rem); }

/* Les mondes : trois portes, au bas de la scène. */
/* Variante « trois sphères » : le nom de chaque monde, au-dessus de sa bulle, et cliquable comme elle. */
/* Au-dessus des images (z-index jusqu'à 100 000) : « L'artiste » passait sous ses photos (Yan, 02.11.2026). */
.mv-bulles { position: absolute; inset: 0; pointer-events: none; z-index: 110000; }
.mv-bulle { position: absolute; left: 0; top: 0; min-height: 2.75rem; padding: .5rem .9rem; border: 0; background: none; font-family: var(--f-titre); font-size: clamp(.95rem, 1.7vw, 1.4rem); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--teinte-bulle)); text-shadow: 0 0 .6rem rgba(var(--teinte-bulle), .9), 0 0 1.8rem rgba(var(--teinte-bulle), .6), 0 0 .2rem rgba(0, 0, 0, .9); cursor: pointer; pointer-events: auto; white-space: nowrap; transition: opacity .4s; }
.mv-bulle:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: .35em; }
.mv-bulle.est-eteint { opacity: .45; }
/* Avec les bulles, la devise quitte le multivers : au milieu, elle cachait les trois mondes. Elle reste à l'ouverture de
   la biographie et au générique (Yan, 01.11.2026). */
[data-forme="spheres"] .multivers__devise { display: none; }
.mv-bulle--voix { --teinte-bulle: var(--rvb-voix); }
.mv-bulle--artiste { --teinte-bulle: var(--rvb-artiste); }
.mv-bulle--stratege { --teinte-bulle: var(--rvb-stratege); }
.multivers__mondes {
  position: absolute;
  left: 50%;
  bottom: 3.4rem;
  z-index: 160000;
  display: flex;
  gap: .4rem;
  translate: -50% 0;
  padding: .35rem;
  border: 1px solid rgb(241 236 228 / .16);
  border-radius: 999px;
  background: rgb(10 10 11 / .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.multivers__mondes button {
  padding: .6rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--os);
  font-family: var(--f-titre);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background .4s, color .4s, box-shadow .4s;
}
.multivers__mondes button:hover { background: rgb(241 236 228 / .1); }
.multivers__mondes [data-monde-cible="artiste"][aria-pressed="true"] { background: var(--rose); color: var(--noir); box-shadow: 0 0 2rem rgba(var(--rvb-artiste), .6); }
.multivers__mondes [data-monde-cible="voix"][aria-pressed="true"] { background: var(--or-vif); color: var(--noir); box-shadow: 0 0 2rem rgba(var(--rvb-voix), .6); }
.multivers__mondes [data-monde-cible="stratege"][aria-pressed="true"] { background: var(--electrique); color: var(--noir); box-shadow: 0 0 2rem rgba(var(--rvb-stratege), .6); }
.multivers__mondes [data-monde-cible="tout"][aria-pressed="true"] { background: var(--os); color: var(--noir); }
.est-en-voyage .multivers__mondes { opacity: 0; pointer-events: none; }
/* Tant que le bandeau de cookies est affiché, il couvre le bas de l'écran : le sélecteur des mondes, la
   consigne et le son passent au-dessus de lui, sinon on ne pouvait pas changer de monde avant d'avoir répondu. */
/* (Le bandeau de cookies occupait tout le bas de l'écran : les commandes du multivers montaient au-dessus.
   Devenu une phrase dans un coin, « La plume demande », il ne cache plus rien.) */
/* Dans un monde, ses éléments disent leur nom : sans lui, le monde du stratège n'était que des points. */
.multivers[data-monde="artiste"] .mv-noeud[data-monde="artiste"] .mv-noeud__nom,
.multivers[data-monde="voix"] .mv-noeud[data-monde="voix"] .mv-noeud__nom,
.multivers[data-monde="stratege"] .mv-noeud[data-monde="stratege"] .mv-noeud__nom,
.multivers[data-monde]:not([data-monde=""]) .mv-noeud[data-monde="pont"] .mv-noeud__nom { opacity: 1; transform: none; }
.multivers[data-monde]:not([data-monde=""]) .mv-noeud--role .mv-noeud__nom { font-size: 1.45rem; }
/* Lisibles même sur une photo : les noms posés sur un voile sombre. */
.mv-noeud--role .mv-noeud__nom, .mv-noeud--etoile .mv-noeud__nom, .mv-noeud--vie .mv-noeud__nom, .mv-noeud--regard .mv-noeud__nom {
  padding: .12em .45em;
  border-radius: .35em;
  background: rgb(10 10 11 / .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* Dans un monde, les photographes ne disent leur nom qu'au survol : ils étaient trop nombreux à l'écran. */
.multivers[data-monde]:not([data-monde=""]) .mv-noeud--regard:not(.est-actif):not(.est-proche) .mv-noeud__bouton:not(:hover):not(:focus-visible) .mv-noeud__nom { opacity: 0; }
.multivers__mondes { transition: opacity .5s; }
/* Yan, 30.10.2026 : le menu du haut choisit déjà le monde. En bas ne reste que le retour au nuage entier,
   et seulement quand on est dans un monde. */
.multivers__mondes [data-monde-cible]:not([data-monde-cible="tout"]) { display: none; }
.multivers__mondes [data-monde-cible="tout"]::before { content: '← '; }
.multivers:not([data-monde="artiste"], [data-monde="voix"], [data-monde="stratege"], [data-filtre]) .multivers__mondes { opacity: 0; pointer-events: none; }

/* Chaque monde a sa lumière : les signes, les cadres, l'accent du cartel. */
.mv-noeud[data-monde="voix"] { --couleur-signe: var(--or-vif); --halo-signe: rgba(var(--rvb-voix), .6); }
.mv-noeud[data-monde="stratege"] { --couleur-signe: var(--electrique); --halo-signe: rgba(var(--rvb-stratege), .6); }
.mv-noeud--role[data-monde="voix"] .mv-noeud__bouton::before { border-color: var(--or-vif); }
.mv-noeud--role[data-monde="stratege"] .mv-noeud__bouton::before { border-color: var(--electrique); }
.mv-noeud--theme[data-monde="stratege"].est-actif .mv-noeud__nom, .mv-noeud--theme[data-monde="stratege"] .mv-noeud__bouton:hover .mv-noeud__nom { background: rgba(var(--rvb-stratege), .18); color: var(--os); }
.mv-noeud--theme[data-monde="stratege"] .mv-noeud__nom { border-color: rgba(var(--rvb-stratege), .6); box-shadow: 0 0 2.5rem rgba(var(--rvb-stratege), .25), inset 0 0 1.5rem rgba(var(--rvb-stratege), .15); }
.mv-noeud[data-monde="voix"].est-actif .mv-noeud__nom, .mv-noeud[data-monde="voix"] .mv-noeud__bouton:hover .mv-noeud__nom { color: var(--or-vif); }
.mv-noeud[data-monde="stratege"].est-actif .mv-noeud__nom, .mv-noeud[data-monde="stratege"] .mv-noeud__bouton:hover .mv-noeud__nom { color: var(--electrique); }
.mv-noeud--oeuvre[data-monde="voix"].est-actif img { box-shadow: 0 2rem 6rem rgb(0 0 0 / .7), 0 0 5rem rgba(var(--rvb-voix), .45); }
.mv-panneau[data-monde="voix"] .mv-cartel__numero, .mv-panneau[data-monde="voix"] .mv-cartel__corps .mv-noeud__accroche, .mv-panneau[data-monde="voix"] .mv-cartel__corps .mv-noeud__sous-titre { color: var(--or-profond); }
.mv-panneau[data-monde="stratege"] .mv-cartel__numero, .mv-panneau[data-monde="stratege"] .mv-cartel__corps .mv-noeud__accroche, .mv-panneau[data-monde="stratege"] .mv-cartel__corps .mv-noeud__sous-titre { color: var(--electrique-profond); }
.mv-panneau[data-monde="voix"] { box-shadow: 0 2.5rem 5rem -1.5rem rgb(0 0 0 / .8), 0 0 0 1px rgb(0 0 0 / .08), inset .3rem 0 0 var(--or-vif); }
.mv-panneau[data-monde="stratege"] { box-shadow: 0 2.5rem 5rem -1.5rem rgb(0 0 0 / .8), 0 0 0 1px rgb(0 0 0 / .08), inset .3rem 0 0 var(--electrique); }
.mv-panneau[data-monde="artiste"] { box-shadow: 0 2.5rem 5rem -1.5rem rgb(0 0 0 / .8), 0 0 0 1px rgb(0 0 0 / .08), inset .3rem 0 0 var(--rose); }

/* Le son : un interrupteur discret, éteint par défaut. */
.multivers__son {
  position: absolute;
  right: var(--marge);
  bottom: 1.2rem;
  z-index: 160000;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .9rem;
  border: 1px solid rgb(241 236 228 / .25);
  border-radius: 999px;
  background: rgb(10 10 11 / .5);
  color: var(--cendre);
  font: inherit;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}
.multivers__porter {
  position: absolute;
  right: calc(var(--marge) + 6.2rem);
  bottom: 1.2rem;
  z-index: 160000;
  padding: .45rem .95rem;
  border: 1px solid color-mix(in srgb, var(--os) 25%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--noir) 50%, transparent);
  color: var(--cendre);
  font: inherit;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
.multivers__porter::before { content: '▶  '; color: var(--rose); }
/* Les trois départs du voyage : « Voyager », puis chaque monde avec sa pastille (Yan, 01.11.2026). */
.multivers__voyages { display: inline-flex; align-items: center; gap: .15rem; }
.multivers__voyages-titre { padding-inline: .5rem .2rem; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cendre); }
.multivers__voyages-titre::before { content: '▶  '; color: var(--rose); }
.multivers__voyages .multivers__porter { display: inline-flex; align-items: center; gap: .45rem; }
.multivers__voyages .multivers__porter::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: var(--pastille); box-shadow: 0 0 .6rem var(--pastille); }
.multivers__voyages .multivers__porter[data-voyage="voix"] { --pastille: var(--or-vif); }
.multivers__voyages .multivers__porter[data-voyage="artiste"] { --pastille: var(--rose); }
.multivers__voyages .multivers__porter[data-voyage="stratege"] { --pastille: var(--electrique); }
.multivers__voyages .multivers__porter[aria-pressed="true"] { border-color: var(--pastille); color: var(--os); }
.multivers__voyages .multivers__porter[aria-pressed="true"]::before { content: ''; animation: pastille-bat 1.2s ease-in-out infinite; }
@keyframes pastille-bat { 50% { transform: scale(1.6); } }
.multivers__voyages-titre { white-space: nowrap; border: 1px solid transparent; border-radius: 999px; background: none; font: inherit; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cendre); cursor: default; }
.multivers__voyages-titre.est-arret { cursor: pointer; border-color: color-mix(in srgb, var(--os) 40%, transparent); color: var(--os); padding: .45rem .9rem; }
.multivers__voyages-titre.est-arret::before { content: '■  '; color: var(--rose); }
.multivers__voyages-titre.est-arret:is(:hover, :focus-visible) { border-color: var(--rose); }
/* Sur téléphone, les trois départs tiennent dans la barre : « Voyager » se réduit à son ▶, le reste se resserre. */
@media (max-width: 48rem) {
  .multivers__voyages-titre { font-size: 0; padding-inline: .3rem 0; }
  .multivers__voyages-titre::before { font-size: .7rem; }
  .multivers__pupitre .multivers__voyages .multivers__porter { padding-inline: .45rem; font-size: .6rem; letter-spacing: .06em; gap: .3rem; }
}
.multivers__porter[aria-pressed="true"] { border-color: var(--rose); color: var(--os); }
.multivers__porter[aria-pressed="true"]::before { content: '❚❚  '; }
.a-cadran :is(.chercheur, .multivers__porter, .multivers__mondes, .multivers__consigne) { opacity: 0; pointer-events: none; }
.a-cadran .multivers__noeuds { opacity: .18; filter: blur(3px); transition: opacity .8s, filter .8s; }
.a-cadran :is(.mv-cartel, .mv-panneau) { visibility: hidden; }

/* Le chercheur : un onglet à gauche du multivers, qui s'ouvre en panneau. */
.chercheur { position: absolute; left: var(--marge); top: 50%; z-index: 160000; translate: 0 -50%; display: grid; justify-items: start; gap: .7rem; max-width: min(22rem, calc(100vw - 2 * var(--marge))); }
.chercheur__ouvrir {
  padding: .45rem .95rem;
  border: 1px solid color-mix(in srgb, var(--os) 25%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--noir) 55%, transparent);
  color: var(--os);
  font: inherit;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.chercheur__ouvrir::before { content: '⌕  '; color: var(--rose); }
.chercheur__ouvrir[aria-expanded="true"] { border-color: var(--rose); }
.chercheur__panneau {
  display: grid;
  gap: .6rem;
  width: 100%;
  max-height: 64vh;
  overflow: auto;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--os) 14%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--noir) 78%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.chercheur__panneau[hidden] { display: none; }
.chercheur__champ {
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid color-mix(in srgb, var(--os) 25%, transparent);
  border-radius: .6rem;
  background: transparent;
  color: var(--os);
  font: inherit;
  font-size: 1rem;
}
.chercheur__champ:focus { outline: 1px solid var(--rose); border-color: var(--rose); }
.chercheur__resultats { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.chercheur__resultats:empty { display: none; }
.chercheur__vide { color: var(--cendre); }
.chercheur__titre { margin-top: .3rem; font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--rose); }
.chercheur__etiquettes { display: flex; flex-wrap: wrap; gap: .35rem; }
.chercheur__etiquette {
  padding: .3rem .7rem;
  border: 1px solid color-mix(in srgb, var(--os) 22%, transparent);
  border-radius: 999px;
  background: none;
  color: var(--os);
  font: inherit;
  font-size: .75rem;
  cursor: pointer;
}
.chercheur__etiquette:is(:hover, :focus-visible) { border-color: var(--rose); color: var(--rose); }
/* Le bouton « Se laisser porter » reste visible dans une œuvre : on doit pouvoir arrêter la dérive, ou la
   relancer depuis l'œuvre où l'on est. */
.est-en-voyage .chercheur { opacity: 0; pointer-events: none; }
@media (max-width: 48rem) {
  .chercheur { top: auto; bottom: 4.2rem; translate: none; }
  .multivers__porter { right: auto; left: var(--marge); bottom: 1.2rem; }
  .chercheur { bottom: 3.6rem; }
}
.multivers__son::before {
  content: '';
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  border: 1px solid currentColor;
}
.multivers__son[aria-pressed="true"] { color: var(--rose); border-color: var(--rose); }
.multivers__son[aria-pressed="true"]::before { background: var(--rose); animation: battre 1.2s ease-in-out infinite; }
@keyframes battre { 50% { transform: scale(1.6); opacity: .5; } }

/* Les thèmes et les œuvres. */
.mv-noeud--theme .mv-noeud__nom {
  padding: .5em 1.1em;
  border: 1px solid rgb(255 46 126 / .55);
  border-radius: 999px;
  font-family: var(--f-voix);
  font-size: 2.4rem;
  color: var(--os);
  box-shadow: 0 0 2.5rem rgb(255 46 126 / .25), inset 0 0 1.5rem rgb(255 46 126 / .15);
}
.mv-noeud--theme.est-actif .mv-noeud__nom, .mv-noeud--theme .mv-noeud__bouton:hover .mv-noeud__nom { background: rgb(255 46 126 / .18); color: var(--os); }
.mv-noeud--oeuvre .mv-noeud__bouton { width: 13.5rem; }
.mv-noeud--oeuvre img {
  width: 100%;
  height: auto;
  outline: 2px solid rgb(241 236 228 / .7);
  outline-offset: 8px;
  transition: outline-color .5s, box-shadow .5s;
}
.mv-noeud.est-actif img { box-shadow: 0 2rem 6rem rgb(0 0 0 / .7), 0 0 5rem rgb(255 46 126 / .3); }

@media (max-width: 48rem) {
  .mv-panneau { top: auto; bottom: 0; right: 0; left: 0; translate: none; width: auto; max-height: 52vh; }
  .multivers__scene::after { background: radial-gradient(ellipse 60% 30% at 50% 26%, transparent 0%, rgb(5 5 6 / .7) 80%); }
  .multivers__scene::before { background: conic-gradient(from 165deg at 50% -6%, transparent 0deg, rgb(255 244 228 / .1) 13deg, rgb(255 244 228 / .13) 15deg, rgb(255 244 228 / .1) 17deg, transparent 30deg); }
  .multivers__son { top: 4rem; bottom: auto; }
  .mv-fleche { top: 26%; width: 3.6rem; height: 3.6rem; font-size: 1.5rem; }
  .multivers__mondes { left: var(--marge); right: var(--marge); bottom: 4.6rem; translate: none; overflow-x: auto; justify-content: flex-start; }
  .multivers__mondes button { padding: .55rem .8rem; font-size: .64rem; }
  .mv-fleche--suivante { right: var(--marge); }
  .mv-noeud--theme .mv-noeud__nom { font-size: 1.7rem; }
  .multivers__consigne { width: calc(100% - 2 * var(--marge)); white-space: normal; line-height: 1.8; }
  .mv-noeud--photo .mv-noeud__bouton, .mv-noeud--centre .mv-noeud__bouton, .mv-noeud--oeuvre .mv-noeud__bouton { width: 8.5rem; }
  .mv-noeud--role .mv-noeud__nom { font-size: 1.5rem; }
  .mv-noeud--vie .mv-noeud__nom { font-size: 2rem; }
}

/* ——— Présentation */
.presentation {
  display: grid;
  gap: 2.5rem;
  justify-items: start;
  padding: clamp(6rem, 18vh, 12rem) var(--marge);
  max-width: 86rem;
  margin-inline: auto;
}
.presentation__texte {
  font-family: var(--f-voix);
  font-size: clamp(2.1rem, 5.2vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -.01em;
}
/* L'entrée du texte de présentation, ligne par ligne comme le carton d'un film : chaque ligne monte hors d'un
   cache, l'une après l'autre (`site.js` découpe les lignes). Différent du manifeste, qui s'allume mot à mot. */
.presentation__ligne { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.presentation__ligne > span { display: block; transform: translateY(105%); opacity: 0; filter: blur(6px); transition: transform 1.1s var(--lent), opacity 1.1s var(--lent), filter 1.1s var(--lent); transition-delay: calc(var(--rang) * 110ms); }
.presentation.est-levee .presentation__ligne > span { transform: none; opacity: 1; filter: none; }
.presentation.est-decoupee .lien-fleche { opacity: 0; transform: translateY(1rem); transition: opacity .8s var(--lent), transform .8s var(--lent); transition-delay: calc(var(--lignes, 5) * 110ms + .3s); }
.presentation.est-levee .lien-fleche { opacity: 1; transform: none; }
/* Le lien mène plus bas, à la biographie : la flèche pointe vers elle. */
.presentation .lien-fleche::after { content: '↓'; animation: descendre 1.8s var(--lent) infinite; }
@keyframes descendre { 50% { transform: translateY(.3em); } }
.chapitres.sans-transition .chapitres__numero { transition: none; }
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-size: .85rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--rose);
}
.lien-fleche::after {
  content: '→';
  font-size: 1.4em;
  transition: transform .5s var(--lent);
}
.lien-fleche:hover::after { transform: translateX(.5rem); }
/* Renaissances : le lien vers la fiche du livre, en prévente, sous l'exergue (Yan, 01.11.2026). */
/* Un vrai bouton, plein, plus grand que les liens fléchés (Yan, 02.11.2026 : « pas assez grand »). */
.livre__achat { justify-self: start; margin-top: 1.6rem; min-height: 3.4rem; padding: .9rem 1.9rem; border-radius: 999px; background: var(--rose); color: var(--nuit); font-size: 1rem; font-weight: 600; transition: background-color .3s var(--lent); }
.livre__achat:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--rose) 82%, var(--nuit)); }

/* ——— Les vies : une piste horizontale que le défilement vertical fait avancer. */
.vies { position: relative; height: 520vh; }
.vies__scene {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  padding: 5.5rem 0 1.5rem;
}
.vies__entete {
  display: grid;
  gap: .6rem;
  padding: 0 var(--marge);
  container-type: inline-size;
}
.vies__titre {
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: min(4.6cqi, 4.4rem);
  line-height: .92;
  letter-spacing: -.03em;
  text-transform: uppercase;
  max-width: 16em;
}
.vies__chapo {
  max-width: 44rem;
  font-family: var(--f-voix);
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  line-height: 1.25;
  color: var(--cendre);
}
.vies__piste {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
  padding: 0 var(--marge);
  width: max-content;
  transform: translateX(var(--piste, 0px));
  will-change: transform;
}
.vie {
  position: relative;
  margin: 0;
  height: min(64vh, 46rem);
}
.vie img {
  height: 100%;
  width: auto;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter 1.2s var(--lent);
}
.vie.est-visible img { filter: none; }
.vie figcaption {
  position: absolute;
  left: -.08em;
  bottom: -.32em;
  pointer-events: none;
}
.vie__nom {
  font-family: var(--f-voix);
  font-style: italic;
  font-size: clamp(3rem, 9vw, 9rem);
  line-height: 1;
  color: var(--rose);
  white-space: nowrap;
}
.vies__credit { padding: 0 var(--marge); }

/* ——— Manifeste : la citation s'allume mot à mot. */
.manifeste { position: relative; height: 260vh; }
.manifeste__scene {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  padding: 0 var(--marge);
}
.manifeste__citation { margin: 0; max-width: 64rem; }
.manifeste__citation p {
  font-family: var(--f-voix);
  font-size: clamp(1.7rem, 3.9vw, 4.1rem);
  line-height: 1.12;
  text-wrap: pretty;
}
.manifeste .mot { opacity: .14; transition: opacity .35s linear, color .35s linear; }
.manifeste .mot.est-allume { opacity: 1; }
.manifeste .mot.est-vif { color: var(--rose); }
.manifeste__source {
  margin-top: 2rem;
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cendre);
}

/* ——— Multifacettes : cinq volets, celui qu'on regarde s'ouvre. */
.facettes { padding: clamp(5rem, 12vh, 9rem) var(--marge); container-type: inline-size; }
/* Multifacettes se parcourt : la section se fixe, et chaque facette s'ouvre à son tour au défilement
   avant qu'on passe à la suite (Yan, 30.10.2026). Sur petit écran, les facettes restent empilées. */
.facettes.est-pilotee { height: calc(var(--etapes, 6) * 80vh); padding: 0; }
.facettes.est-pilotee .facettes__scene {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  align-content: center;
  padding: 6.5rem var(--marge) 2rem;
  container-type: inline-size;
}
.facettes.est-pilotee .facettes__rangee { height: min(70vh, 46rem); }
.facettes__titre {
  margin-bottom: 2.5rem;
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: min(7cqi, 6.5rem);
  line-height: .9;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.facettes__rangee {
  display: flex;
  gap: .5rem;
  height: min(82vh, 52rem);
}
.facette {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  background: var(--nuit);
  transition: flex-grow .9s var(--lent);
}
.facette:hover, .facette:focus, .facette:focus-within,
.facettes:not(.est-pilotee) .facettes__rangee:not(:hover):not(:focus-within) .facette:first-child ,
.facettes.est-pilotee .facettes__rangee:not(:hover) .facette.est-ouverte { flex-grow: 8; }
.facette__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(.45);
  transform: scale(1.08);
  transition: filter 1s var(--lent), transform 1.4s var(--lent);
}
.facette:hover .facette__photo, .facette:focus .facette__photo, .facette:focus-within .facette__photo,
.facettes:not(.est-pilotee) .facettes__rangee:not(:hover):not(:focus-within) .facette:first-child .facette__photo ,
.facettes.est-pilotee .facettes__rangee:not(:hover) .facette.est-ouverte .facette__photo {
  filter: grayscale(0) brightness(.62);
  transform: scale(1);
}
.facette__corps {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: .6rem;
  padding: clamp(1rem, 2.4vw, 2.2rem);
  /* Le texte garde sa largeur pendant l'ouverture (sans quoi il se recompose à chaque image), mais jamais plus
     que la facette ouverte (8 parts sur 13) : sur tablette, il débordait et se coupait (Yan, 31.10.2026). */
  min-width: min(34rem, 52vw);
}
.facette__numero {
  font-family: var(--f-titre);
  font-size: .8rem;
  color: var(--rose);
}
.facette__monde {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  justify-self: start;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--couleur-monde, var(--rose));
}
.facette__monde::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 .6rem currentColor; }
.facette[data-monde="voix"] { --couleur-monde: var(--or-vif); }
.facette[data-monde="stratege"] { --couleur-monde: var(--electrique); }
/* Fermée, la facette est trop étroite pour le nom du monde : seul le point de couleur reste. */
.facette__monde { font-size: 0; gap: 0; }
.facette:is(:hover, :focus, :focus-within) .facette__monde,
.facettes:not(.est-pilotee) .facettes__rangee:not(:hover):not(:focus-within) .facette:first-child .facette__monde,
.facettes.est-pilotee .facettes__rangee:not(:hover) .facette.est-ouverte .facette__monde { font-size: .66rem; gap: .45rem; }
.facette__nom {
  font-family: var(--f-titre);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  line-height: 1.05;
  text-transform: uppercase;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  justify-self: start;
}
.facette:hover .facette__nom, .facette:focus .facette__nom, .facette:focus-within .facette__nom,
.facettes:not(.est-pilotee) .facettes__rangee:not(:hover):not(:focus-within) .facette:first-child .facette__nom ,
.facettes.est-pilotee .facettes__rangee:not(:hover) .facette.est-ouverte .facette__nom {
  white-space: normal;
  writing-mode: horizontal-tb;
  transform: none;
}
.facette__accroche {
  font-family: var(--f-voix);
  font-style: italic;
  font-size: clamp(1.8rem, 3.2vw, 3.2rem);
  line-height: 1;
  color: var(--rose);
}
.facette__lien {
  justify-self: start;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--os);
  text-decoration-color: var(--rose);
  text-underline-offset: .3em;
}
.facette__lien::after { content: ' ↗'; color: var(--rose); }
.facette__texte {
  max-width: 34rem;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--os);
}
.facette__accroche, .facette__texte, .facette__lien {
  /* Fermée, la facette replie aussi la HAUTEUR de ces textes : transparents mais présents, ils s'empilaient
     sur la largeur du texte ouvert et poussaient le nom hors de la facette, par le haut. */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .5s ease, transform .8s var(--lent);
}
.facette:hover :is(.facette__accroche, .facette__texte, .facette__lien),
.facette:focus :is(.facette__accroche, .facette__texte, .facette__lien),
.facette:focus-within :is(.facette__accroche, .facette__texte, .facette__lien),
.facettes:not(.est-pilotee) .facettes__rangee:not(:hover):not(:focus-within) .facette:first-child :is(.facette__accroche, .facette__texte, .facette__lien),
.facettes.est-pilotee .facettes__rangee:not(:hover) .facette.est-ouverte :is(.facette__accroche, .facette__texte, .facette__lien) {
  max-height: 40rem;
  opacity: 1;
  transform: none;
  transition-delay: .25s;
}

/* ——— Révélateur : la couleur n'apparaît que là où passe la lumière. */
.revelateur {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 1.5rem;
  padding: clamp(4rem, 10vh, 8rem) var(--marge);
}
.revelateur__cadre {
  position: relative;
  width: min(100%, 86rem);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  cursor: crosshair;
  touch-action: pan-y;
}
.revelateur__cadre img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
.revelateur__couleur {
  -webkit-mask-image: radial-gradient(circle var(--rayon, 9rem) at var(--x, 50%) var(--y, 40%), var(--noir) 0 55%, transparent 100%);
  mask-image: radial-gradient(circle var(--rayon, 9rem) at var(--x, 50%) var(--y, 40%), var(--noir) 0 55%, transparent 100%);
}
.revelateur__texte { display: grid; gap: .5rem; justify-items: center; text-align: center; }
.revelateur__consigne {
  font-family: var(--f-voix);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
}

/* ——— Musique : la pochette laisse glisser son disque. */
.musique { padding: clamp(5rem, 12vh, 9rem) var(--marge); }
.musique__titre {
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
  font-family: var(--f-voix);
  font-style: italic;
  font-size: clamp(2.6rem, 7vw, 7rem);
  line-height: .95;
}
.musique__titres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(3rem, 6vw, 6rem);
}
.morceau { display: grid; gap: 1.1rem; align-content: start; }
.morceau__pochette {
  position: relative;
  z-index: 1;
  width: min(100%, 26rem);
  aspect-ratio: 1;
  object-fit: cover;
  box-shadow: 0 2rem 4rem -1.5rem rgb(0 0 0 / .8);
  transition: transform .9s var(--lent);
}
.morceau::before {
  content: '';
  grid-area: 1 / 1;
  justify-self: start;
  width: min(92%, 24rem);
  aspect-ratio: 1;
  margin: 4% 0 0 4%;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--rose) 0 15%, var(--noir) 15.5% 17%, transparent 17.5%),
    repeating-radial-gradient(circle, var(--sillon) 0 1px, var(--noir) 1px 3px);
  transition: transform 1.1s var(--lent);
}
.morceau > .morceau__pochette { grid-area: 1 / 1; }
.morceau:hover::before { transform: translateX(42%) rotate(160deg); }
.morceau:hover .morceau__pochette { transform: rotate(-2deg); }
.morceau__nom {
  font-family: var(--f-titre);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1.05;
  text-transform: uppercase;
}
.morceau__texte { max-width: 36rem; color: var(--cendre); }
.musique__ecouter { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 3rem; }
.pastille {
  padding: .8rem 1.5rem;
  border: 1px solid var(--os);
  border-radius: 999px;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .4s, color .4s, border-color .4s;
}
.pastille:hover { background: var(--rose); border-color: var(--rose); color: var(--noir); }

/* ——— Livre */
.livre {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: start;
  padding: clamp(5rem, 12vh, 9rem) var(--marge);
  background: var(--os);
  color: var(--noir);
}
.livre__visuel { margin: 0; position: sticky; top: 6rem; display: grid; gap: .8rem; }
.livre__visuel figcaption { color: var(--noir); }
/* Yan, 01.11.2026 : la photo à peu près de la hauteur du texte. En deux colonnes, c'est le texte qui donne la hauteur
   de la rangée ; la photo s'y loge entière (sortie du flux, elle ne l'impose plus), collée au texte. */
@media (min-width: 56rem) {
  /* À droite, la place du sommaire des chapitres : il chevauchait la fin des lignes. */
  .livre { align-items: stretch; padding-right: calc(var(--marge) + 2.6rem); }
  .livre__texte { align-content: start; }
  .livre__visuel { position: relative; top: auto; display: block; min-height: 22rem; }
  .livre__visuel img { position: absolute; top: 0; right: 0; width: 100%; height: calc(100% - 2.4rem); object-fit: contain; object-position: right top; }
  .livre__visuel figcaption { position: absolute; right: 0; bottom: 0; }
}
.livre__texte { display: grid; gap: 1.4rem; max-width: 40rem; min-width: 0; container-type: inline-size; }
/* Yan, 30.10.2026 : les paragraphes du livre se justifient, comme la biographie ; la césure évite les grands blancs. */
.livre__texte > p:not(.livre__question, .livre__exergue) { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.livre__titre {
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: 7.4cqi;
  line-height: .85;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.livre__question {
  margin-top: 1rem;
  font-family: var(--f-voix);
  font-style: italic;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
}
.livre__exergue {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid currentColor;
  font-family: var(--f-voix);
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  line-height: 1.1;
  color: var(--rose-profond);
}

@keyframes apparaitre-doux { from { opacity: 0; } }
@keyframes monter {
  from { opacity: 0; transform: translateY(3rem); }
  to { opacity: 1; transform: none; }
}

/* ——— Témoignages : un défilé continu, qui s'arrête quand on le lit. */
/* Sur un écran entier, le titre en haut (Yan, 02.11.2026 : « là, on voit Suivre ») ; le défilé est revenu le même soir. */
.temoignages { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100svh; padding: clamp(5.5rem, 11vh, 7.5rem) 0 clamp(2rem, 5vh, 4rem); overflow: hidden; container-type: inline-size; }
.temoignages__titre {
  margin: 0 var(--marge) 3rem;
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: min(7.6cqi, 6.5rem);
  line-height: .9;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.temoignages__defile { display: flex; width: max-content; }
.temoignages__defile.est-anime { animation: defiler 60s linear infinite; }
.temoignages__defile:hover, .temoignages__defile:focus-within { animation-play-state: paused; }
.temoignages__bande { display: flex; gap: 2rem; padding-right: 2rem; }
.temoignage {
  margin: 0;
  width: min(80vw, 30rem);
  padding: 2rem;
  border: 1px solid rgb(241 236 228 / .2);
  display: grid;
  gap: 1.5rem;
  align-content: space-between;
}
.temoignage p { font-family: var(--f-voix); font-size: 1.35rem; line-height: 1.3; }
.temoignage footer { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rose); }
@keyframes defiler { to { transform: translateX(-50%); } }

/* ——— La vitrine : la boutique sous le livre (posée par inc/boutique.php). Les articles sont accrochés comme en
   galerie : centrés, en quinconce, dans une lueur rose, chacun avec son cartel (Yan, 03.11.2026 : « tout est aligné à
   gauche… un tout petit peu plus sexy »). Quand ils débordent (téléphone, ou plus d'articles), c'est un carrousel. */
/* Comme les témoignages : un écran entier, le contenu au milieu (Yan, 02.11.2026). */
.vitrine { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100svh; padding: clamp(5.5rem, 11vh, 7.5rem) 0 clamp(2rem, 5vh, 4rem); container-type: inline-size; }
.vitrine::before { content: ''; position: absolute; inset: 15% -10% 0; z-index: -1; background: radial-gradient(ellipse 45% 50% at 50% 58%, color-mix(in srgb, var(--rose) 16%, transparent), color-mix(in srgb, var(--pourpre-nuit) 60%, transparent) 55%, transparent 80%); pointer-events: none; }
.vitrine__tete { margin: 0 var(--marge) clamp(1.5rem, 4vh, 2.5rem); text-align: center; }
.vitrine__titre { margin: 0; font-family: var(--f-titre); font-weight: 800; font-size: min(7.6cqi, 6.5rem); line-height: .9; letter-spacing: -.03em; text-transform: uppercase; }
.vitrine__piste { position: relative; }
.vitrine__liste {
  display: grid;
  grid-auto-flow: column;
  /* La largeur suit aussi la hauteur de l'écran : la rangée entière, cartels compris, tient dans un écran. */
  grid-auto-columns: clamp(11rem, min(22cqi, 28svh), 19rem);
  column-gap: clamp(1.25rem, 2.5cqi, 2.5rem);
  margin: 0;
  padding: 2rem var(--marge) 2.5rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--marge);
  scrollbar-width: none;
}
.vitrine__liste::-webkit-scrollbar { display: none; }
/* Tout tient à l'écran : la rangée se centre, et un article sur deux monte, comme accroché plus haut. */
.vitrine__piste.est-pleine .vitrine__liste { justify-content: center; }
.vitrine__piste.est-pleine .vitrine__article:nth-child(odd) { translate: 0 1.2rem; }
.vitrine__piste.est-pleine .vitrine__article:nth-child(even) { translate: 0 -1.2rem; }
.vitrine__article { scroll-snap-align: start; }
.vitrine__article a { display: grid; height: 100%; overflow: hidden; border: 1px solid rgb(241 236 228 / .12); border-radius: 1rem; background: color-mix(in srgb, var(--noir) 70%, transparent); color: var(--os); text-decoration: none; transition: transform .5s var(--lent), border-color .5s var(--lent), box-shadow .5s var(--lent); }
.vitrine__article a:is(:hover, :focus-visible) { transform: translateY(-.6rem); border-color: color-mix(in srgb, var(--rose) 70%, transparent); box-shadow: 0 2.2rem 4rem -1.5rem color-mix(in srgb, var(--rose) 45%, transparent); }
.vitrine__image { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: rgb(241 236 228 / .04); }
.vitrine__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--lent); }
.vitrine__article a:is(:hover, :focus-visible) img { transform: scale(1.06); }
.vitrine__cartel { display: grid; gap: .4rem; justify-items: start; padding: .9rem 1.1rem 1.1rem; }
.vitrine__numero { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--or-vif); }
.vitrine__nom { font-family: var(--f-voix); font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.15; }
.vitrine__prix { margin-top: .25rem; padding: .3rem .8rem; border: 1px solid color-mix(in srgb, var(--rose) 55%, transparent); border-radius: 999px; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rose); }
.vitrine__prix del { opacity: .5; }
.vitrine__article a:is(:hover, :focus-visible) .vitrine__prix { background: var(--rose); color: var(--nuit); }
.vitrine__pied { margin: clamp(1rem, 3vh, 2rem) var(--marge) 0; text-align: center; }
.vitrine__tout { display: inline-flex; align-items: center; gap: .8rem; min-height: 3rem; padding: .7rem 1.6rem; border: 1px solid color-mix(in srgb, var(--os) 35%, transparent); border-radius: 999px; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--os); transition: border-color .3s, color .3s; }
.vitrine__tout::after { content: '→'; font-size: 1.3em; transition: transform .5s var(--lent); }
.vitrine__tout:is(:hover, :focus-visible) { border-color: var(--rose); color: var(--rose); }
.vitrine__tout:is(:hover, :focus-visible)::after { transform: translateX(.4rem); }
/* Les articles montent l'un après l'autre en entrant à l'écran, là où le navigateur sait lier l'animation au défilement. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .vitrine__article { animation: vitrine-entrer linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    .vitrine__article:nth-child(2) { animation-range: entry 10% entry 100%; }
    .vitrine__article:nth-child(3) { animation-range: entry 20% cover 30%; }
  }
}
@keyframes vitrine-entrer { from { opacity: 0; transform: translateY(3rem) scale(.96); } }
.vitrine__fleche {
  position: absolute;
  top: 45%;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  translate: 0 -50%;
  border: 1px solid color-mix(in srgb, var(--os) 40%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--noir) 75%, transparent);
  color: var(--os);
  cursor: pointer;
}
.vitrine__fleche svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vitrine__fleche:is(:hover, :focus-visible) { border-color: var(--rose); color: var(--rose); }
.vitrine__piste.est-pleine .vitrine__fleche { display: none; }
.vitrine__fleche--precedent { left: calc(var(--marge) / 2); }
.vitrine__fleche--suivant { right: calc(var(--marge) / 2 + 2.6rem); }
@media (max-width: 48rem) { .vitrine__fleche--suivant { right: calc(var(--marge) / 2); } .vitrine__liste { grid-auto-columns: min(72%, 44svh); } }

/* ——— Suivre : un écran entier, les réseaux en icônes (Yan, 02.11.2026). */
.suivre { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100svh; padding: clamp(5.5rem, 11vh, 7.5rem) var(--marge) clamp(2rem, 5vh, 4rem); container-type: inline-size; }
.suivre__surtitre { font-family: var(--f-voix); font-style: italic; font-size: clamp(1.3rem, 2vw, 1.8rem); color: var(--cendre); }
.suivre__titre {
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: 15cqi;
  line-height: .85;
  letter-spacing: -.05em;
  text-transform: uppercase;
}
/* 15cqi est calé sur « SUIVRE » ; « FOLGEN » et « FOLLOW » sont plus larges et sortaient de la page. */
.suivre__titre:lang(de) { font-size: 14.4cqi; }
.suivre__titre:lang(en) { font-size: 13.8cqi; }
.suivre__reseaux {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 1rem;
  margin: clamp(2rem, 5vh, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.suivre__reseaux a {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-height: 4.5rem;
  padding: .9rem 1.2rem;
  border: 1px solid rgb(241 236 228 / .16);
  border-radius: .4rem;
  font-family: var(--f-voix);
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  text-decoration: none;
  transition: color .3s, border-color .3s, background .3s;
}
.suivre__icone { flex: none; width: 2rem; height: 2rem; }
.suivre__reseaux a:is(:hover, :focus-visible) { color: var(--rose); border-color: var(--rose); background: rgb(241 236 228 / .03); }
@media (max-width: 48rem) {
  .suivre__reseaux { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .suivre__reseaux a { min-height: 3.4rem; padding: .6rem .8rem; gap: .6rem; font-size: 1.15rem; }
  .suivre__icone { width: 1.5rem; height: 1.5rem; }
}

@media (min-width: 56rem) {
  /* Quatre par rangée, et la place du sommaire des chapitres à droite : Facebook passait dessous. */
  .suivre__reseaux { grid-template-columns: repeat(4, 1fr); padding-right: 2.6rem; }
}

/* ——— Écrire : son écran à lui, après Suivre (posé par recit.js autour du formulaire de inc/contact.php). */
.ecrire-ecran { display: grid; align-content: center; min-height: 100vh; min-height: 100svh; padding: clamp(5.5rem, 11vh, 7.5rem) var(--marge) clamp(2rem, 5vh, 4rem); }
.ecrire-ecran .ecrire { margin-top: 0; }

/* ——— Pied */
.pied {
  border-top: 1px solid color-mix(in srgb, var(--os) 15%, transparent);
  font-size: .8rem;
  color: var(--cendre);
}
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 2rem var(--marge) 2.5rem;
}
.pied a { text-decoration: none; }
.pied a:hover { color: var(--os); }
.pied__liens { display: flex; flex-wrap: wrap; gap: 1.5rem; }

/* ——— Le générique de fin. Comme à la fin d'un film : les noms montent, puis la signature de Yan se retrace
   à la plume en dernière image (`site.js`). Le survol arrête le défilement, pour qu'on puisse cliquer un nom.
   Sans le script, ou en mouvement réduit, le générique est simplement posé. */
.generique { padding: clamp(3rem, 8vh, 6rem) var(--marge) 0; box-sizing: content-box; }
.generique__ecran {
  position: relative;
  height: min(78vh, 46rem);
  /* Pendant que le générique déroule, son écran reste au milieu de la fenêtre. */
  .generique.est-pret & { position: sticky; top: calc((100vh - min(78vh, 46rem)) / 2); }
  overflow: hidden;
  -webkit-mask: linear-gradient(transparent, var(--noir) 18%, var(--noir) 82%, transparent);
  mask: linear-gradient(transparent, var(--noir) 18%, var(--noir) 82%, transparent);
}
.generique__defile { display: grid; justify-items: center; gap: clamp(2rem, 5vh, 3.2rem); padding-block: 2rem; }
.generique.est-pret .generique__defile { will-change: transform; }
.generique__roles { display: grid; gap: clamp(2rem, 5vh, 3.2rem); margin: 0; text-align: center; }
.generique__roles > div { display: grid; gap: .45rem; }
.generique__roles dt {
  margin-bottom: .4rem;
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--rose);
}
.generique__roles dd { margin: 0; font-family: var(--f-voix); font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1.15; color: var(--os); }
.generique__roles dd a { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2em; transition: text-decoration-color .3s, color .3s; }
.generique__roles dd a:hover, .generique__roles dd a:focus-visible { color: var(--rose); text-decoration-color: currentColor; }
.generique__signature, .generique__plume { display: block; width: min(70vw, 30rem); height: auto; filter: drop-shadow(0 0 1.4rem rgba(var(--rvb-artiste), .4)); }
.generique.est-pret .generique__signature { visibility: hidden; }
.generique__plume { position: relative; }
.generique__plume .generique__signature { width: 100%; filter: none; visibility: hidden; }
.generique__plume svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.generique__devise { font-family: var(--f-voix); font-style: italic; font-size: clamp(1.4rem, 3vw, 2.4rem); color: var(--rose); opacity: 0; transition: opacity 1.2s; }
.generique.est-signe .generique__devise, .generique:not(.est-pret) .generique__devise { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .generique__ecran { height: auto; -webkit-mask: none; mask: none; }
}

/* ——— Le sommaire des chapitres (posé par `site.js`). Discret : des points ; le nom au survol ou au focus
   seulement (écrit en permanence, il recouvrait le texte de la biographie), le chapitre courant en rose. Caché pendant l'intro, en galerie, et sur petit écran. */
.chapitres {
  position: fixed;
  right: clamp(.6rem, 1.6vw, 1.4rem);
  top: 50%;
  z-index: 170000;
  translate: 0 -50%;
  transition: opacity .6s;
}
.chapitres ol { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.chapitres a {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: .6rem;
  color: var(--os);
  text-decoration: none;
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.chapitres__numero {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid color-mix(in srgb, var(--os) 55%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--noir) 70%, transparent);
  font-family: var(--f-titre);
  font-size: .68rem;
  letter-spacing: 0;
  transition: border-color .3s, background .3s, color .3s;
}
.chapitres__nom {
  padding: .25rem .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--noir) 80%, transparent);
  white-space: nowrap;
  opacity: 0;
  translate: .4rem 0;
  transition: opacity .3s, translate .3s var(--lent);
  pointer-events: none;
}
.chapitres a:is(:hover, :focus-visible) .chapitres__nom { opacity: 1; translate: 0 0; }
.chapitres__numero svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.chapitres a[aria-current] .chapitres__numero { border-color: var(--rose); background: var(--rose); color: var(--noir); }
.chapitres a:is(:hover, :focus-visible) .chapitres__numero { border-color: var(--rose); }
html:not(.ecriture-finie) .chapitres, .est-en-galerie .chapitres { opacity: 0; pointer-events: none; }
/* Sur petit écran, le sommaire reste (Biographie n'est plus dans le menu) : des points plus petits, sans noms. */
@media (max-width: 48rem) {
  .chapitres { right: .35rem; opacity: .6; }
  /* Au repos, ils s'effacent presque pour ne pas gêner la lecture ; ils reviennent quand on défile ou qu'on les touche. */
  .chapitres.se-montre, .chapitres:focus-within { opacity: 1; }
  .chapitres ol { gap: .4rem; }
  .chapitres__numero { width: 1.6rem; height: 1.6rem; font-size: .54rem; }
  .chapitres__nom { display: none; }
}

/* ——— Biographie */
/* Le titre en haut, sous le menu, et le texte juste dessous (Yan, 02.11.2026 : « remonter BIOGRAPHIE ») : l'ouverture
   prenait 62 % de l'écran, titre calé en bas, et le texte partait encore 30 % d'écran plus bas. */
.bio-ouverture {
  display: grid;
  align-content: start;
  padding: clamp(6rem, 13vh, 8rem) var(--marge) clamp(1.5rem, 3vh, 2.5rem);
  container-type: inline-size;
}
/* Sur téléphone, le menu tient sur deux rangs : le titre descend d'autant. */
@media (max-width: 48rem) { .bio-ouverture { padding-top: 8.5rem; } }
.bio-ouverture__titre {
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: 9.4cqi;
  line-height: .82;
  letter-spacing: -.05em;
  text-transform: uppercase;
}
.bio-ouverture__devise {
  margin-top: 1.5rem;
  font-family: var(--f-voix);
  font-style: italic;
  font-size: clamp(1.8rem, 4vw, 3.6rem);
  line-height: 1;
  color: var(--rose);
}

/* ——— La chambre noire. Les portraits de Yan se développent l'un après l'autre pendant qu'on lit : chaque
   passage appelle son tirage, qui monte du négatif au papier sous la lumière inactiniste. À côté, la pellicule
   défile, image par image. Le script (`site.js`) attribue les passages aux tirages et pose la pellicule. */
.bio-texte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40rem);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  /* Sur un très grand écran, la chambre noire et le texte restent ensemble au centre (Yan, 30.10.2026 : le texte
     partait contre le bord droit) ; à droite, la place du sommaire des chapitres. */
  max-width: 100rem;
  margin-inline: auto;
  padding: 0 max(var(--marge), 4rem) clamp(5rem, 12vh, 9rem) var(--marge);
}
.chambre-noire {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  padding: 6.5rem 0 2.5rem 6rem;
  background: radial-gradient(60% 55% at 55% 50%, rgba(var(--rvb-artiste), .13), transparent 70%);
}
.tirage {
  grid-area: 1 / 1;
  margin: 0;
  width: min(100%, 34rem);
  height: 100%;
  max-height: 52rem;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: .7rem;
  visibility: hidden;
}
.tirage img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 2.5rem 5rem rgb(0 0 0 / .65); }
.tirage figcaption { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cendre); }
.tirage:first-child, .tirage.est-revele, .tirage.est-passe { visibility: visible; }
.chambre-noire.est-montee .tirage:first-child:not(.est-revele, .est-passe) { visibility: hidden; }
.tirage.est-revele { z-index: 1; animation: developper 2.6s var(--lent) both; }
.tirage.est-passe { animation: secher 1.1s cubic-bezier(.6, 0, .3, 1) both; }
@keyframes developper {
  0% { opacity: 0; filter: invert(1) grayscale(1) contrast(1.7) brightness(1.3) blur(10px); transform: scale(1.05); }
  25% { opacity: 1; filter: invert(1) grayscale(1) contrast(1.3) blur(3px); }
  55% { filter: grayscale(1) sepia(.6) contrast(1.15) brightness(.75); }
  100% { opacity: 1; filter: none; transform: none; }
}
@keyframes secher { to { opacity: 0; transform: translateX(-38%) scale(.4) rotate(-4deg); filter: brightness(.4); } }
/* La pellicule : les tirages en vignettes sur une bande perforée, qui glisse pour mettre l'image en cours
   dans la fenêtre. */
.pellicule {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4.4rem;
  overflow: hidden;
  -webkit-mask: linear-gradient(transparent, var(--noir) 25%, var(--noir) 75%, transparent);
  mask: linear-gradient(transparent, var(--noir) 25%, var(--noir) 75%, transparent);
}
.pellicule__bande {
  display: grid;
  gap: .5rem;
  padding: .5rem .9rem;
  background:
    repeating-linear-gradient(to bottom, var(--noir) 0 .45rem, transparent .45rem .9rem) left .25rem top 0 / .4rem 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--noir) 0 .45rem, transparent .45rem .9rem) right .25rem top 0 / .4rem 100% no-repeat,
    color-mix(in srgb, var(--os) 16%, transparent);
  transform: translateY(calc(50vh - 3.4rem - var(--image, 0) * 6.1rem));
  transition: transform 1.1s var(--lent);
}
.pellicule__bande img { display: block; width: 100%; height: 5.6rem; object-fit: cover; filter: grayscale(1) brightness(.55); transition: filter .6s; }
.pellicule__bande img { cursor: pointer; }
.pellicule__bande img:hover { filter: grayscale(.3) brightness(.85); }
.pellicule__bande img.est-courante { filter: none; outline: 2px solid var(--rose); outline-offset: 2px; }
.chambre-noire__compteur {
  position: absolute;
  right: 0;
  bottom: 2.2rem;
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 1;
  color: var(--cendre);
}
.chambre-noire__compteur span { color: var(--rose); -webkit-text-stroke: 0; }
.bio-texte__corps { display: grid; gap: 1.6rem; padding-top: clamp(1rem, 4vh, 3rem); padding-bottom: 30vh; }
.bio-texte p { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); line-height: 1.7; transition: opacity .6s; }
/* Le passage qu'on lit reste en pleine lumière ; les autres reculent un peu dans l'ombre. */
.bio-texte.est-montee .bio-texte__corps > p:not(.est-lu) { opacity: .38; }
/* Yan, 30.10.2026 : la biographie se justifie à gauche et à droite. La césure évite les grands blancs. */
.bio-texte p:not(.bio-texte__citation):not(.bio-texte__signature) { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.bio-texte__corps > p:first-child::first-letter {
  float: left;
  margin: .08em .12em 0 0;
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: 4.6em;
  line-height: .8;
  color: var(--rose);
}
.bio-texte__citation {
  margin: 1.5rem 0;
  font-family: var(--f-voix);
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  line-height: 1.15;
}
.bio-texte__signature { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cendre); }
/* Petit écran : la chambre noire se tient en haut, le texte défile dessous. */
@media (max-width: 52rem) {
  .bio-texte { grid-template-columns: 1fr; gap: 0; }
  .chambre-noire { height: 58vh; padding: 5.4rem 0 .8rem; z-index: 2; overflow: hidden; background: var(--noir); }
  .tirage { width: auto; max-width: 100%; }
  .pellicule { display: none; }
  .chambre-noire__compteur { bottom: .7rem; font-size: 2rem; }
  .tirage figcaption { padding-right: 5.5rem; }
  .bio-texte__corps { padding-top: 2rem; padding-bottom: 20vh; }
}

/* ——— Pages légales : le texte de la maison, mot pour mot ; seule la mise en page est d'ici. */
:is(.sb-s-legal, .sb-s-cgu, .sb-s-donnees-personnelles) {
  display: grid;
  gap: 1.1rem;
  max-width: 44rem;
  margin: 0 auto;
  padding: 8rem var(--marge) 6rem;
}
:is(.sb-s-legal, .sb-s-cgu, .sb-s-donnees-personnelles) .sb-c-surtitre { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--rose); }
:is(.sb-s-legal, .sb-s-cgu, .sb-s-donnees-personnelles) .sb-c-titre {
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
:is(.sb-s-legal, .sb-s-cgu, .sb-s-donnees-personnelles) .sb-c-chapo { font-family: var(--f-voix); font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.2; color: var(--cendre); }
:is(.sb-s-legal, .sb-s-cgu, .sb-s-donnees-personnelles) .sb-c-titre-article { margin-top: 1.4rem; font-family: var(--f-voix); font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
:is(.sb-s-legal, .sb-s-cgu, .sb-s-donnees-personnelles) :is(.sb-c-texte, .sb-c-maj) { line-height: 1.7; }
/* Yan, 30.10.2026 : les paragraphes des pages légales sont justifiés, comme la biographie. */
/* Les conditions d'utilisation, de vente et les données personnelles portent leur propre classe (sb-s-cgu,
   sb-s-donnees-personnelles) : elles n'avaient aucune mise en page, ni marge sous l'en-tête, ni justification (Yan,
   01.11.2026). Les listes sont justifiées comme les paragraphes. */
:is(.sb-s-legal, .sb-s-cgu, .sb-s-donnees-personnelles) :is(.sb-c-texte, li) { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
:is(.sb-s-legal, .sb-s-cgu, .sb-s-donnees-personnelles) .sb-c-maj { font-size: .8rem; color: var(--cendre); }
/* Les titres longs (« Conditions générales d'utilisation ») dépassaient de la colonne de texte. */
:is(.sb-s-legal, .sb-s-cgu, .sb-s-donnees-personnelles) .sb-c-titre { font-size: clamp(1.8rem, 5vw, 3.3rem); overflow-wrap: break-word; hyphens: auto; }
:is(.sb-s-legal, .sb-s-cgu, .sb-s-donnees-personnelles) a { color: var(--rose); }
/* Le contenu repris porte des centrages de son site d'origine : ici, tout s'aligne à gauche. */
:is(.sb-s-legal, .sb-s-cgu, .sb-s-donnees-personnelles) :is(.has-text-align-center, .wp-block-heading) { text-align: start; }

/* ——— Petits écrans : pas de piste épinglée, on fait défiler du doigt. */
@media (max-width: 48rem) {
  .entete { padding: 1rem var(--marge); }
  .entete__nav { gap: .9rem; }
  .entete__nav a { font-size: .66rem; letter-spacing: .08em; }
  .entete__signature { font-size: .85rem; }
}
@media (max-width: 26rem) {
  /* Sur un très petit écran, le menu passe sur deux lignes plutôt que de cacher un monde. */
  .entete__nav, .entete__nav .wp-block-navigation__container { flex-wrap: wrap; justify-content: flex-end; row-gap: .35rem; }
  .entete__signature { font-size: .7rem; letter-spacing: 0; }
  .entete__nav { gap: .7rem; }
  .facette .facette__nom { white-space: normal; writing-mode: horizontal-tb; transform: none; }
  .facette .facette__monde { font-size: .66rem; gap: .45rem; }
  .revelateur__cadre { aspect-ratio: 1300 / 1004; }
  .vies { height: auto; }
  .vies__scene { position: static; height: auto; padding: 4rem 0 2rem; gap: 1.5rem; }
  .vies__piste {
    width: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    transform: none;
    padding-bottom: 2rem;
  }
  .vie { flex: 0 0 auto; height: 62vh; scroll-snap-align: center; }
  .vie img { filter: none; }
  .facettes__rangee { flex-direction: column; height: auto; }
  .facette { min-height: 75vh; flex: none; }
  .facette .facette__photo { filter: grayscale(0) brightness(.55); transform: none; }
  .facette :is(.facette__accroche, .facette__texte, .facette__lien) { max-height: none; opacity: 1; transform: none; }
  .facette__corps { min-width: 0; }
  .livre__visuel { position: static; }
}

/* ——— Mouvement réduit : tout est là, rien ne bouge. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none; transition: none; scroll-behavior: auto; }
  body::after { display: none; }
  .multivers { height: 100vh; }
  .multivers__ecriture { clip-path: none; }
  body.home .entete__signature :is(img:not(.entete__yh), .custom-logo) { opacity: 1; }
  .vies { height: auto; }
  .vies__scene { position: static; height: auto; }
  .vies__piste { width: auto; overflow-x: auto; transform: none; }
  .vie img { filter: none; }
  .manifeste { height: auto; }
  .manifeste__scene { position: static; height: auto; padding: 8rem var(--marge); }
  .manifeste .mot { opacity: 1; }
  .revelateur__couleur { -webkit-mask-image: none; mask-image: none; }
  .temoignages__defile { width: auto; }
  .temoignages__bande { flex-wrap: wrap; padding: 0 var(--marge); }
}

/* ——— Le bandeau de cookies : « La plume demande » (Yan, 31.10.2026). Plus de bandeau : une phrase s'écrit à
   la plume dans le coin bas gauche, puis deux réponses de même poids, oui et non, et « détails ». Le module de
   la maison reste dessous (il enregistre la réponse, coupe Matomo au refus) ; seule l'allure change ici. */
html body .sbwp-cnst.plume-demande {
  inset: auto auto clamp(1rem, 3vh, 1.8rem) var(--marge);
  width: min(28rem, calc(100vw - 2 * var(--marge)));
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--os);
}
.sbwp-cnst.plume-demande .sbwp-cnst-boite { max-width: none; max-height: none; padding: 0; overflow: visible; }
/* Le conteneur reçoit le focus à l'ouverture (le module le veut, pour les lecteurs d'écran) : sans cadre ici,
   les réponses gardent le leur. Un halo sombre derrière la phrase la rend lisible par-dessus les photos. */
html body .sbwp-cnst.plume-demande:focus { outline: none; }
.sbwp-cnst.plume-demande::before { content: ''; position: absolute; inset: -2.5rem -3rem -2rem -3rem; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--noir) 82%, transparent), transparent); pointer-events: none; }
.sbwp-cnst.plume-demande .sbwp-cnst-actions { flex-direction: row; flex-wrap: wrap; width: auto; }
.sbwp-cnst.plume-demande :is(.sbwp-cnst-btn, .sbwp-cnst-detail) { width: auto; flex: none; }
.sbwp-cnst.plume-demande .sbwp-cnst-barre { display: grid; gap: .9rem; justify-items: start; }
.sbwp-cnst.plume-demande .sbwp-cnst-titre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sbwp-cnst.plume-demande .sbwp-cnst-texte {
  font-family: var(--f-voix);
  font-style: italic;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.1;
  color: var(--os);
  text-shadow: 0 0 1.4rem rgba(var(--rvb-artiste), .45), 0 0 .2rem var(--noir);
  clip-path: inset(0 100% 0 0);
}
.sbwp-cnst.plume-demande--ecrite .sbwp-cnst-texte { animation: ecrire 2.4s cubic-bezier(.55, .1, .35, 1) forwards; }
/* Le lien vers la politique de données vit dans la fenêtre « détails », comme les finalités. */
.sbwp-cnst.plume-demande .sbwp-cnst-lien-externe { display: none; }
.sbwp-cnst.plume-demande .sbwp-cnst-actions { gap: .5rem; opacity: 0; translate: 0 .5rem; transition: opacity .8s var(--lent) 2.3s, translate .8s var(--lent) 2.3s; }
.sbwp-cnst.plume-demande--ecrite .sbwp-cnst-actions { opacity: 1; translate: none; }
.sbwp-cnst.plume-demande .sbwp-cnst-btn {
  min-width: 4.6rem;
  padding: .45rem 1.2rem;
  border: 1px solid color-mix(in srgb, var(--os) 60%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--noir) 55%, transparent);
  color: var(--os);
  font-family: var(--f-texte);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .12em;
}
.sbwp-cnst.plume-demande .sbwp-cnst-btn:is(:hover, :focus-visible) { border-color: var(--rose); color: var(--rose); }
.sbwp-cnst.plume-demande .sbwp-cnst-detail { order: 3; }
/* Sur téléphone, tant que la question est posée, les commandes du bas du multivers s'écartent. */
@media (max-width: 48rem) {
  body:has(.sbwp-cnst.plume-demande:not([hidden])) :is(.chercheur, .multivers__porter, .multivers__consigne) { opacity: 0; pointer-events: none; }
}
.sbwp-cnst.plume-demande .sbwp-cnst-plus { min-width: 0; border: 0; background: none; padding: .45rem .3rem; text-decoration: underline; text-underline-offset: .25em; letter-spacing: .06em; color: var(--cendre); }
@media (prefers-reduced-motion: reduce) {
  .sbwp-cnst.plume-demande .sbwp-cnst-texte { clip-path: none; }
  .sbwp-cnst.plume-demande .sbwp-cnst-actions { opacity: 1; translate: none; }
}

/* Cibles tactiles (audit du 31.10.2026, plancher de 44 px) : les liens du menu et les boutons du multivers
   gardent leur dessin, mais leur zone de toucher atteint 44 px de haut. */
/* WordPress pose `display: block` sur les liens de sa navigation (sélecteur plus fort) : le texte restait collé en
   haut de sa zone de 44 px, plus haut que « Contact », et la pastille de couleur des mondes ne s'affichait pas. */
.entete__nav a, .entete__nav.wp-block-navigation .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: 2.75rem; }
:is(.multivers__mondes button, .multivers__porter, .multivers__son, .chercheur__ouvrir) { min-height: 2.75rem; }
/* Les noms longs des facettes fermées (« Auteur-compositeur-interprète ») passent sur deux colonnes plutôt que
   d'être coupés. */
/* La longueur d'une colonne : la hauteur de la rangée (min(82vh, 52rem)) moins le numéro, le monde et les marges. */
.facette__nom { white-space: normal; max-inline-size: calc(min(82vh, 52rem) - 10rem); }
/* La rangée des facettes laisse à droite la place du sommaire des chapitres (sur tablette, il la recouvrait). */
@media (min-width: 48.01rem) { .facettes__rangee { margin-right: max(0px, 3.4rem - var(--marge)); } }

/* ——— Le pupitre : chercher · voyager · vitesse · son, en une barre centrée au bas du multivers (Yan,
   31.10.2026). Les anciennes places de ces commandes (à gauche, à droite) sont reprises ici. */
.multivers__pupitre {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  z-index: 160000;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem;
  translate: -50% 0;
  border: 1px solid color-mix(in srgb, var(--os) 16%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--noir) 60%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.multivers__pupitre :is(.chercheur, .multivers__porter, .multivers__son) { position: static; inset: auto; translate: none; margin: 0; }
.multivers__pupitre .chercheur { display: block; max-width: none; }
.multivers__pupitre :is(.chercheur__ouvrir, .multivers__porter, .multivers__son) { border-color: transparent; background: none; white-space: nowrap; }
.multivers__pupitre :is(.chercheur__ouvrir, .multivers__porter, .multivers__son):is(:hover, :focus-visible) { border-color: var(--rose); }
/* Le panneau du chercheur s'ouvre au-dessus du pupitre. */
.multivers__pupitre .chercheur__panneau { position: absolute; left: 50%; bottom: calc(100% + .6rem); width: min(24rem, calc(100vw - 2 * var(--marge))); translate: -50% 0; }
.multivers__vitesse { display: flex; align-items: center; gap: .5rem; padding: 0 .6rem; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cendre); }
.multivers__vitesse[hidden] { display: none; }
.multivers__vitesse input { width: 6.5rem; accent-color: var(--rose); }
/* La consigne et le retour « ← Tout » montent au-dessus du pupitre. */
.multivers__consigne { bottom: 4.6rem; }
/* La consigne « Défilez pour entrer. Touchez une image pour voyager. » est retirée (Yan, 01.11.2026 : « on n'a pas
   besoin de mettre ça ») ; le texte reste dans le gabarit, éditable, mais ne s'affiche plus. */
.multivers .multivers__consigne { display: none; }
/* Le multivers quitte l'écran : la barre du bas s'efface au lieu d'être coupée par la section suivante. */
.multivers__pupitre { transition: opacity .35s; }
.multivers.est-quitte .multivers__pupitre { opacity: 0; pointer-events: none; }
.multivers__mondes { bottom: 4.4rem; }
.multivers:is([data-monde="artiste"], [data-monde="voix"], [data-monde="stratege"], [data-filtre]) .multivers__consigne { opacity: 0; }
.est-en-voyage .multivers__pupitre .chercheur { display: none; }
.a-cadran .multivers__pupitre { opacity: 0; pointer-events: none; }
@media (max-width: 48rem) {
  .multivers__pupitre { bottom: .8rem; gap: .1rem; }
  .multivers__pupitre :is(.chercheur__ouvrir, .multivers__porter, .multivers__son) { padding-inline: .7rem; letter-spacing: .1em; }
  .multivers__vitesse span { display: none; }
  .multivers__vitesse input { width: 4.5rem; }
  body:has(.sbwp-cnst.plume-demande:not([hidden])) .multivers__pupitre { opacity: 0; pointer-events: none; }
}

/* Le chercheur, allégé (Yan, 31.10.2026 : « ce panneau au milieu, ça ne joue pas ») : plus de grande boîte, un
   champ et des étiquettes qui flottent au-dessus du pupitre. */
.multivers__pupitre .chercheur__panneau {
  display: grid;
  justify-items: center;
  gap: .55rem;
  padding: 0;
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  max-height: none;
  overflow: visible;
}
.multivers__pupitre .chercheur__panneau[hidden] { display: none; }
.multivers__pupitre .chercheur__champ { border-radius: 999px; background: color-mix(in srgb, var(--noir) 78%, transparent); text-align: center; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.multivers__pupitre .chercheur__titre { display: none; }
.multivers__pupitre .chercheur__etiquettes { justify-content: center; }
.multivers__pupitre .chercheur__etiquette { background: color-mix(in srgb, var(--noir) 72%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.chercheur__etiquette.est-choisie { border-color: var(--rose); color: var(--rose); }
.multivers__pupitre .chercheur__resultats { justify-content: center; }
.multivers:has(.chercheur__panneau:not([hidden])) .multivers__mondes { opacity: 0; pointer-events: none; }
/* Un élément retenu par un fil ou une recherche : une lueur, pour qu'on le trouve d'un coup d'œil. */
.mv-noeud.est-retenu img { box-shadow: 0 0 0 2px var(--rose), 0 0 2.5rem rgba(var(--rvb-artiste), .55); }
.mv-noeud.est-retenu .mv-noeud__nom { color: var(--os); text-shadow: 0 0 1rem rgba(var(--rvb-artiste), .9); }

/* Le cartel : la navigation avant le long texte (Yan, 31.10.2026, sur tablette : il fallait faire défiler tout le
   texte pour atteindre les flèches et les liens). Le corps du cartel se fond dans la grille du panneau, et chaque
   bloc prend sa place : en-tête, accroche, lien du site, flèches, « Relié à », « Même fil », puis le texte. */
.mv-cartel__corps { display: contents; }
.mv-cartel__numero { order: 1; }
.mv-cartel__titre { order: 2; }
.mv-cartel__corps :is(.mv-noeud__accroche, .mv-noeud__sous-titre) { order: 3; }
.mv-cartel__legende { order: 4; }
.mv-cartel__corps .mv-noeud__ecouter { order: 5; justify-self: start; }
.mv-cartel__parcours { order: 6; }
.mv-panneau__relie, .mv-panneau__liens { order: 7; }
.mv-cartel__corps :is(.mv-noeud__texte, .mv-noeud__citation, .mv-noeud__source, .mv-noeud__equipe) { order: 8; }

/* Pendant un fil : seule la rangée des fils reste au-dessus du pupitre, « Tout » en tête, le fil choisi en rose. */
.chercheur.en-fil :is(.chercheur__champ, .chercheur__resultats) { display: none; }
.chercheur:not(.en-fil) .chercheur__etiquette--tout { display: none; }
.chercheur__etiquette--tout::before { content: '← '; }

/* Le sommaire ne réagit qu'au chiffre (Yan, 31.10.2026 : un clic un peu à gauche activait le lien). Le nom,
   affiché au survol, sort de la zone cliquable : il est posé à côté du rond, sans prendre de place. */
.chapitres a { position: relative; display: block; width: max-content; margin-left: auto; }
.chapitres__nom { position: absolute; right: calc(100% + .6rem); top: 50%; translate: .4rem -50%; }
.chapitres a:is(:hover, :focus-visible) .chapitres__nom { translate: 0 -50%; }

/* Le bouton « 1 440 » du pupitre : l'entrée du cadran, dans la couleur de minuit offert. */
.multivers__1440 { min-height: 2.75rem; padding: .45rem .95rem; border: 1px solid var(--or-vif); border-radius: 999px; background: none; color: var(--or-vif); font-family: var(--f-titre); font-weight: 800; font-size: .72rem; letter-spacing: .08em; white-space: nowrap; cursor: pointer; }
.multivers__1440:is(:hover, :focus-visible) { background: var(--or-vif); color: var(--noir); }

/* Les 1 440 minutes : un écran entier, au-dessus de l'en-tête (le logo et « Contact » le chevauchaient sur
   iPad, Yan, 31.10.2026). À gauche le parcours — le principe, la vidéo de Yan au format portrait, puis le
   choix ou la réservation ; à droite le cadran, qui reste en place pendant qu'on fait défiler. Sur petit
   écran, tout se suit : le principe, le cadran, le choix. Une barre en bas tient la sélection et son prix. */
html.est-en-cadran { overflow: hidden; }
html.est-en-cadran .chapitres { opacity: 0; pointer-events: none; }
/* Le menu reste au-dessus du cadran, en vraie bande ; le cadran commence dessous (Yan, 01.11.2026). */
html.est-en-cadran .entete { z-index: 1001; background: var(--noir); mix-blend-mode: normal; pointer-events: auto; }
html.est-en-cadran .cadran { top: var(--haut-entete, 0px); }
.cadran {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
  grid-template-areas: "tete colonne" "etapes colonne";
  align-content: start;
  column-gap: clamp(1.5rem, 4vw, 4rem);
  row-gap: 1.6rem;
  padding: clamp(1.25rem, 3vw, 2.5rem) var(--marge) 3rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: radial-gradient(ellipse at 70% 50%, color-mix(in srgb, var(--pourpre-nuit) 70%, var(--noir)) 0%, var(--noir) 65%);
  color: var(--os);
  animation: apparaitre-doux .6s var(--lent);
}
/* Tant que le bandeau des cookies est là, le cadran garde de quoi défiler au-dessus de lui : à 390 px, le bandeau recouvrait
   « Continuer » (audit du 02.11.2026). */
body:has(.sbwp-cnst.plume-demande:not([hidden])) .cadran { padding-bottom: 16rem; }
/* Et la barre « Continuer », fixée en bas, monte au-dessus du bandeau au lieu de passer dessous. */
body:has(.sbwp-cnst.plume-demande:not([hidden])) .cadran__barre { bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 8.5rem); }
.cadran[hidden] { display: none; }
/* Le haut du défilement s'efface sous le menu au lieu d'être tranché net (Yan, 01.11.2026 : « le titre est
   tronqué »). Un voile collé en haut, qui ne prend aucune place dans la grille. */
.cadran::before { content: ""; position: sticky; top: calc(-1 * clamp(1.25rem, 3vw, 2.5rem)); z-index: 3; grid-row: 1; grid-column: 1 / -1; align-self: start; height: 2.2rem; margin-bottom: -2.2rem; background: linear-gradient(var(--noir), transparent); pointer-events: none; opacity: 0; transition: opacity .3s; }
/* Le voile seulement quand on a défilé : au repos, il délavait le titre « Les 1 440 minutes » (Yan, 01.11.2026). */
.cadran.a-defile::before { opacity: 1; }
.cadran:focus { outline: none; }
/* La barre du bas ne doit rien cacher : le défilement lui réserve sa hauteur. */
.cadran.a-une-barre { padding-bottom: 7rem; }

.cadran__tete { grid-area: tete; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.1rem; align-items: start; }
.cadran__tete-texte { display: grid; gap: .8rem; }
.cadran__explication-titre { font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: .95; text-transform: uppercase; }
.cadran__chapo { font-family: var(--f-voix); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.3; }
/* La vignette de la vidéo de Yan, tournée en portrait : elle ouvre le lecteur au centre de l'écran. */
.cadran__video { position: relative; display: grid; place-items: center; align-content: center; gap: .6rem; width: clamp(6.5rem, 9vw, 8.5rem); aspect-ratio: 9 / 16; padding: .6rem; border: 1px solid color-mix(in srgb, var(--or-vif) 50%, transparent); border-radius: .8rem; background: color-mix(in srgb, var(--os) 6%, transparent); color: var(--cendre); font: inherit; font-size: .68rem; line-height: 1.35; text-align: center; cursor: pointer; transition: border-color .2s, transform .2s; }
.cadran__video:is(:hover, :focus-visible) { border-color: var(--or-vif); transform: scale(1.03); }
.cadran__video-lire { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--or-vif); clip-path: circle(50%); position: relative; }
.cadran__video-lire::after { content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0; translate: 2px 0; border-style: solid; border-width: .45rem 0 .45rem .75rem; border-color: transparent transparent transparent var(--noir); }
.cadran__lecteur { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; padding: 4rem var(--marge) 2rem; background: color-mix(in srgb, var(--noir) 92%, transparent); }
.cadran__lecteur[hidden] { display: none; }
.cadran__lecteur-cadre { display: grid; place-items: center; height: min(82svh, 46rem); aspect-ratio: 9 / 16; max-width: 100%; border: 1px solid color-mix(in srgb, var(--or-vif) 50%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--os) 5%, var(--noir)); color: var(--cendre); padding: 1.2rem; text-align: center; overflow: hidden; }
.cadran__lecteur-cadre:has(video) { padding: 0; }
.cadran__lecteur-cadre video { width: 100%; height: 100%; object-fit: cover; }
.cadran__lecteur-fermer { position: fixed; top: clamp(1rem, 2.5vw, 1.6rem); right: var(--marge); width: 2.9rem; height: 2.9rem; border: 1px solid color-mix(in srgb, var(--os) 40%, transparent); border-radius: 50%; background: var(--noir); color: var(--os); font-size: 1.5rem; line-height: 1; cursor: pointer; }

/* La roue a exactement la taille du cadran : le centre et ses textes se mesurent sur lui (unités cqi). */
.cadran__colonne { grid-area: colonne; position: sticky; top: 3.6rem; align-self: start; display: grid; gap: 1.2rem; justify-items: center; }
.cadran__roue { position: relative; width: min(100%, calc(100svh - 16rem), 40rem); display: grid; place-items: center; container-type: inline-size; }
/* Le panneau de la sélection, sous le cadran : les séries, le total, « Continuer ». */
.cadran__droite { width: min(100%, 30rem); }
.cadran__recap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem 1rem; padding: .8rem 1rem; border: 1px solid color-mix(in srgb, var(--electrique) 35%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--noir) 70%, transparent); max-height: calc(100svh - 4rem - min(calc(100svh - 16rem), 40rem) - 2rem); overflow-y: auto; }
/* Le panneau de la série, compact : titre et séries sur la largeur, le total à gauche et « Continuer » à droite. */
.cadran__recap > :is(.cadran__bloc-titre, .cadran__jetons, .cadran__recap-vide, .cadran__recap-note) { grid-column: 1 / -1; }
.cadran__recap .cadran__total { margin: 0; }
.cadran__recap-vide { font-size: .85rem; color: var(--cendre); }
.cadran__recap-note { font-size: .8rem; color: var(--or-vif); }
.cadran__recap-note[hidden] { display: none; }
.cadran__continuer--droite { justify-self: end; }
.cadran__svg { grid-area: 1 / 1; width: 100%; height: auto; cursor: crosshair; touch-action: manipulation; }
.cadran__trait { stroke: color-mix(in srgb, var(--os) 22%, transparent); stroke-width: 1.4; transition: stroke .2s; }
.cadran__trait--prise { stroke: var(--rose); filter: drop-shadow(0 0 3px var(--rose)); }
.cadran__trait--offerte { stroke: var(--or-vif); stroke-width: 4; filter: drop-shadow(0 0 6px var(--or-vif)); }
.cadran__trait.est-survolee { stroke: var(--blanc); stroke-width: 3; }
.cadran__trait.est-choisie { stroke: var(--electrique); stroke-width: 4; filter: drop-shadow(0 0 5px var(--electrique)); }
.cadran__trait.est-montree { stroke: var(--blanc); stroke-width: 5; }
.cadran__heure { fill: var(--cendre); font-family: var(--f-titre); font-size: 15px; text-anchor: middle; dominant-baseline: middle; }
.cadran__centre { grid-area: 1 / 1; display: grid; justify-items: center; gap: .45rem; max-width: min(52cqi, 24rem); text-align: center; pointer-events: none; }
/* Le centre se lit d'un coup d'œil (Yan, 31.10.2026 : « le 1er décembre, trop petit ») : tout se mesure sur le cadran. */
.cadran__surtitre { font-size: clamp(.8rem, 3.2cqi, 1.15rem); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rose); }
.cadran__texte { font-family: var(--f-voix); font-size: clamp(1rem, 4cqi, 1.4rem); line-height: 1.2; }
.cadran__compte { font-size: clamp(.8rem, 2.8cqi, 1rem); letter-spacing: .06em; color: var(--cendre); }
.cadran__compte span { color: var(--rose); font-weight: 600; }
.cadran__centre.a-une-minute :is(.cadran__texte, .cadran__compte) { display: none; }
.cadran__minute { display: grid; justify-items: center; gap: .35rem; }
.cadran__minute[hidden] { display: none; }
.cadran__heure-choisie { font-family: var(--f-titre); font-weight: 800; font-size: clamp(2.2rem, 13cqi, 5rem); line-height: 1; color: var(--electrique); }
.cadran__heure-choisie[hidden] { display: none; }
/* La date : « 1er » en très grand, puis « décembre 2026 » étiré exactement sur la largeur des chiffres de l'heure
   (Yan, 31.10.2026). L'horloge prend la largeur de son plus large élément. */
.cadran__horloge { display: grid; justify-items: stretch; gap: .2rem; width: max-content; min-width: 30cqi; }
.cadran__jour { justify-self: center; font-family: var(--f-titre); font-weight: 800; font-size: clamp(2.6rem, 15cqi, 6rem); line-height: .9; color: var(--rose); }
.cadran__jour sup { font-size: .38em; vertical-align: .95em; margin-left: .04em; }
.cadran__mois { display: flex; justify-content: space-between; font-family: var(--f-titre); font-weight: 800; font-size: clamp(.7rem, 2.8cqi, 1.05rem); text-transform: uppercase; color: var(--rose); }
/* « 1er » et « décembre 2026 » en rose, l'un et l'autre (Yan, 01.11.2026). */
.cadran__surtitre:empty { display: none; }
.cadran__etat { font-size: clamp(.8rem, 3cqi, 1.05rem); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cadran__sens { font-family: var(--f-voix); font-style: italic; font-size: clamp(1.05rem, 4.2cqi, 1.5rem); line-height: 1.2; }
.cadran__survol { position: absolute; left: 50%; bottom: -.4rem; translate: -50% 0; font-family: var(--f-titre); font-size: .8rem; letter-spacing: .12em; }

/* Le choix. L'heure et les minutes sont deux blocs distincts (Yan, 31.10.2026 : « trop proches ») : l'heure
   en pastilles pleines sur un fond teinté, les minutes en cases ouvertes, chacune avec son intitulé. */
.cadran__etapes { grid-area: etapes; display: grid; gap: 1.2rem; align-content: start; }
.cadran__choisir, .cadran__reserver-etape { display: grid; gap: 1.1rem; }
.cadran__choisir[hidden], .cadran__reserver-etape[hidden] { display: none; }
.cadran__etape-titre { font-size: .9rem; font-weight: 400; line-height: 1.45; color: var(--cendre); }
.cadran__etape-titre strong { color: var(--os); font-weight: 600; }
.cadran__num { color: var(--or-vif); font-family: var(--f-titre); font-weight: 800; }
.cadran__bloc { display: grid; gap: .55rem; }
.cadran__bloc-titre { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--cendre); }
.cadran__bloc--heures { padding: .8rem; border-radius: .9rem; background: color-mix(in srgb, var(--os) 7%, transparent); }
.cadran__heures { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .3rem; }
.cadran__minutes { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .3rem; }
.cadran__h, .cadran__m { min-height: 2.4rem; padding: 0; border-radius: .45rem; font-family: var(--f-titre); font-size: .74rem; font-variant-numeric: tabular-nums; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
/* L'heure : une pastille pleine ; une jauge rose en bas dit la part de ses minutes déjà prises, un point
   électrique celles où l'on a pris des minutes. */
.cadran__h { position: relative; border: 0; color: var(--os); background: linear-gradient(to top, color-mix(in srgb, var(--rose) 55%, transparent) 0 calc(var(--plein, 0%) * .25), color-mix(in srgb, var(--os) 10%, transparent) 0); }
.cadran__h:is(:hover, :focus-visible) { background-color: color-mix(in srgb, var(--os) 18%, transparent); }
.cadran__h.est-montree { background: var(--os); color: var(--noir); font-weight: 800; }
.cadran__h.a-des-minutes:not(.est-montree) { box-shadow: inset 0 0 0 1px var(--electrique); }
.cadran__h.a-des-minutes::after { content: ''; position: absolute; top: .25rem; right: .25rem; width: .35rem; height: .35rem; border-radius: 50%; background: var(--electrique); }
.cadran__m { border: 1px solid color-mix(in srgb, var(--os) 22%, transparent); background: none; color: var(--os); }
.cadran__m:is(:hover, :focus-visible):not(:disabled) { border-color: var(--os); }
.cadran__m.est-prise { border-color: transparent; background: color-mix(in srgb, var(--rose) 16%, transparent); color: var(--cendre); text-decoration: line-through; cursor: not-allowed; }
.cadran__m.est-offerte { border-color: var(--or-vif); color: var(--or-vif); }
.cadran__m.est-choisie { border-color: var(--electrique); background: var(--electrique); color: var(--noir); font-weight: 800; }
.cadran__m.est-montree:not(.est-choisie) { border-color: var(--os); box-shadow: inset 0 0 0 1px var(--os); }
.cadran__durees { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: .4rem; }
.cadran__durees button small { white-space: nowrap; }
/* Le compteur sous les quatre choix : pour un autre nombre que 1, 4, 16 ou 44. */
.cadran__durees .cadran__compteur { grid-column: 1 / -1; order: 2; justify-self: start; }
.cadran__durees button { display: grid; justify-items: center; align-content: center; gap: .05rem; min-height: 2.75rem; padding: .35rem .3rem; border: 1px solid color-mix(in srgb, var(--electrique) 55%, transparent); border-radius: 999px; background: none; color: var(--electrique); font-family: var(--f-titre); font-size: .74rem; cursor: pointer; }
.cadran__durees button:is(:hover, :focus-visible) { border-color: var(--electrique); }
.cadran__compteur { display: inline-flex; align-items: center; border: 1px solid var(--electrique); border-radius: 999px; overflow: hidden; }
.cadran__durees .cadran__compteur button { display: flex; align-items: center; justify-content: center; min-width: 2.75rem; padding: 0; border: 0; border-radius: 0; font-size: 1.1rem; }
/* Le chiffre du compteur dans la police du texte : en Syne très large, « 1 » était rogné sur iPad (Yan, 31.10.2026). */
.cadran__nombre { width: 4.2rem; min-height: 2.75rem; padding: 0 .3rem; border: 0; border-inline: 1px solid color-mix(in srgb, var(--electrique) 45%, transparent); background: none; color: var(--os); font-family: var(--f-texte); font-weight: 700; font-size: 1.15rem; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.cadran__nombre::-webkit-inner-spin-button, .cadran__nombre::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Glisser d'une minute à l'autre : la grille ne fait pas défiler la page sous le doigt. */
.cadran__minutes, .cadran__heures { touch-action: none; user-select: none; -webkit-user-select: none; }
.cadran__durees button b { font-weight: 600; }
.cadran__durees button small { font-family: var(--f-texte); font-size: .66rem; letter-spacing: .02em; opacity: .8; }
/* Le choix courant se remplit, sans changer de taille (Yan, 31.10.2026 : « le 4 est très gros, bizarre »). */
.cadran__durees button[aria-pressed="true"] { background: var(--electrique); color: var(--noir); }
.cadran__durees button[aria-pressed="true"] small { opacity: 1; }
.cadran__serie { font-family: var(--f-titre); font-weight: 800; font-size: 1.2rem; color: var(--electrique); }
.cadran__bloc--suite { padding: .8rem; border: 1px solid color-mix(in srgb, var(--electrique) 30%, transparent); border-radius: .9rem; }
.cadran__recap[hidden] { display: none; }
/* L'intitulé d'une série sur plusieurs heures : une pastille lisible sous le titre de la grille (Yan, 31.10.2026). */
.cadran__suite-heure { display: block; margin: .5rem 0 0; padding: .45rem .8rem; border: 1px solid var(--electrique); border-radius: 999px; background: color-mix(in srgb, var(--electrique) 10%, transparent); color: var(--os); font-family: var(--f-texte); font-size: .85rem; letter-spacing: 0; text-transform: none; text-align: left; cursor: pointer; }
.cadran__suite-heure:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--electrique) 22%, transparent); }
/* Les heures que la série couvre, teintées. */
.cadran__h.a-des-minutes:not(.est-montree) { background: color-mix(in srgb, var(--electrique) 22%, transparent); }
.cadran__suite-heure[hidden] { display: none; }
.cadran__raccourcis { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; }
.cadran__hasard { min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid var(--or-vif); border-radius: 999px; background: none; color: var(--or-vif); font: inherit; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.cadran__hasard:is(:hover, :focus-visible) { background: var(--or-vif); color: var(--noir); }

/* La barre du bas : combien de minutes, lesquelles, le prix, et « Continuer ». */
.cadran__barre { position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 3; translate: -50% 0; display: flex; align-items: center; gap: .8rem; width: min(calc(100% - 2 * var(--marge)), 40rem); padding: .55rem .55rem .55rem 1.2rem; border: 1px solid color-mix(in srgb, var(--electrique) 45%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--noir) 92%, transparent); box-shadow: 0 1rem 3rem var(--noir); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: apparaitre-doux .3s var(--lent); }
.cadran__barre[hidden] { display: none; }
@media (min-width: 60.01rem) { .cadran__barre { display: none; } .cadran.a-une-barre { padding-bottom: 3rem; } }
.cadran__barre-texte { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; font-size: .8rem; }
.cadran__barre-texte strong { font-family: var(--f-titre); font-weight: 800; color: var(--electrique); }
.cadran__barre-texte span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cendre); }
.cadran__barre-texte em { font-style: normal; font-weight: 600; }
.cadran__vider { min-height: 2.75rem; padding: 0 .6rem; border: 0; background: none; color: var(--cendre); font: inherit; font-size: .72rem; text-decoration: underline; cursor: pointer; }
.cadran__continuer, .cadran__reserver, .cadran__partager { min-height: 2.9rem; padding: .6rem 1.3rem; border: 0; border-radius: 999px; background: var(--rose); color: var(--noir); font: inherit; font-weight: 600; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
:is(.cadran__continuer, .cadran__reserver):disabled { opacity: .55; cursor: not-allowed; }

/* La réservation. */
.cadran__retour { justify-self: start; min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--cendre); font: inherit; font-size: .8rem; cursor: pointer; }
.cadran__retour[hidden] { display: none; }
.cadran__retour:is(:hover, :focus-visible) { color: var(--os); }
.cadran__panier { display: grid; gap: .6rem; }
.cadran__jetons { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.cadran__jetons button { min-height: 2.4rem; padding: .3rem .7rem; border: 1px solid var(--electrique); border-radius: 999px; background: color-mix(in srgb, var(--electrique) 14%, transparent); color: var(--os); font-family: var(--f-titre); font-size: .74rem; cursor: pointer; }
.cadran__jetons button span { color: var(--electrique); margin-left: .2rem; }
.cadran__jetons button:disabled { cursor: default; }
.cadran__jetons button:disabled span { display: none; }
.cadran__total { font-size: .95rem; }
.cadran__total strong { font-family: var(--f-titre); font-weight: 800; color: var(--electrique); }
.cadran__formulaire { display: grid; gap: .5rem; max-width: 28rem; }
.cadran__formulaire[hidden] { display: none; }
.cadran__formulaire input[type="text"], .cadran__formulaire input[type="email"] { min-height: 2.75rem; padding: .5rem .8rem; border: 1px solid color-mix(in srgb, var(--os) 30%, transparent); border-radius: .5rem; background: transparent; color: var(--os); font: inherit; font-size: 16px; }
.cadran__formulaire input:focus-visible { outline: 2px solid var(--electrique); outline-offset: 1px; }
.cadran__accord { display: flex; gap: .6rem; align-items: center; min-height: 2.75rem; font-size: .8rem; color: var(--cendre); }
.cadran__accord input { flex: none; width: 1.2rem; height: 1.2rem; accent-color: var(--electrique); }
.cadran__accord a { color: var(--os); }
.cadran__piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cadran__note { font-size: .8rem; color: var(--cendre); }
.cadran__note[hidden], .cadran__merci[hidden] { display: none; }
.cadran__merci { display: grid; gap: .6rem; justify-items: start; padding: 1rem 1.1rem; border: 1px solid var(--electrique); border-radius: .8rem; }
.cadran__merci-titre { font-family: var(--f-voix); font-size: 1.35rem; line-height: 1.2; }
.cadran__merci-texte { font-size: .85rem; color: var(--cendre); }
.cadran__etape-titre--fin { margin-top: .4rem; }

@media (max-width: 60rem) {
  .cadran { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tete" "colonne" "etapes"; padding-top: 4.6rem; }
  .cadran__colonne { position: relative; top: 0; }
  .cadran__roue { width: min(100%, 28rem); }
  /* Sur petit écran, la barre du bas dit déjà la sélection ; le panneau, posé au-dessus de la grille, la faisait
     glisser sous le doigt en grandissant pendant qu'on tirait des minutes. */
  .cadran__droite { display: none; }
  /* À l'étape de la réservation, le cadran s'efface : le formulaire vient tout de suite sous le principe. */
  .cadran.est-a-reserver .cadran__roue { display: none; }
}
@media (max-width: 30rem) {
  .cadran__heures { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .cadran__m { min-height: 2.6rem; font-size: .7rem; }
  .cadran__video { width: 5.8rem; }
  .cadran__barre { border-radius: 1.2rem; }
  .cadran__vider { display: none; }
}
/* « Chercher » a quitté le pupitre, et le son n'apparaît que pendant le voyage (Yan, 31.10.2026). */
.chercheur[hidden], .multivers__son[hidden] { display: none; }

/* La boîte à cookies : la fenêtre « détails » du consentement (Yan, 31.10.2026). Une boîte sombre au bord rose,
   la question écrite en grand, et chaque finalité en biscuit : allumée, le cookie est entier ; refusée, il est
   croqué. Le texte légal, le lien vers la politique et les interrupteurs du module restent tels quels. */
html body .sbwp-cnst-modale.boite-a-cookies .sbwp-cnst-modale-boite { max-width: 34rem; padding: clamp(1.4rem, 4vw, 2.2rem); border: 1px solid color-mix(in srgb, var(--rose) 55%, transparent); border-radius: 1.8rem; background: radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--rose) 14%, var(--noir)), var(--noir) 60%); box-shadow: 0 0 0 .5rem color-mix(in srgb, var(--rose) 6%, transparent), 0 2rem 6rem var(--noir); rotate: -1deg; }
html body .boite-a-cookies .sbwp-cnst-modale-titre { margin: 0 0 .6rem; font-family: var(--f-voix); font-style: italic; font-weight: 400; font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.05; color: var(--os); }
html body .boite-a-cookies .sbwp-cnst-modale-texte { font-size: .85rem; line-height: 1.5; color: var(--cendre); }
html body .boite-a-cookies .sbwp-cnst-modale-texte a { color: var(--os); }
html body .boite-a-cookies .sbwp-cnst-choix { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 1rem; padding: .9rem 1rem; border-color: color-mix(in srgb, var(--os) 16%, transparent); border-radius: 1.2rem; background: color-mix(in srgb, var(--os) 4%, transparent); }
html body .boite-a-cookies .sbwp-cnst-choix-titre { grid-column: 2; font-family: var(--f-titre); font-weight: 800; letter-spacing: .02em; }
html body .boite-a-cookies .sbwp-cnst-choix-texte { grid-column: 2; font-size: .85rem; color: var(--cendre); }
html body .boite-a-cookies :is(.sbwp-cnst-bascule, .sbwp-cnst-choix-etat) { grid-column: 3; }
.boite-a-cookies__biscuit {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 34%, var(--noir) 0 8%, transparent 9%),
    radial-gradient(circle at 66% 28%, var(--noir) 0 7%, transparent 8%),
    radial-gradient(circle at 58% 66%, var(--noir) 0 9%, transparent 10%),
    radial-gradient(circle at 27% 70%, var(--noir) 0 6%, transparent 7%),
    radial-gradient(circle at 78% 55%, var(--noir) 0 5%, transparent 6%),
    radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--or-vif) 85%, var(--os)), color-mix(in srgb, var(--or-vif) 60%, var(--noir)));
  box-shadow: 0 0 1.2rem color-mix(in srgb, var(--or-vif) 25%, transparent);
  transition: -webkit-mask-size .35s var(--lent), mask-size .35s var(--lent), rotate .35s var(--lent);
  -webkit-mask: radial-gradient(circle at 92% 12%, transparent 0 0, var(--noir) 1%) center / 100% 100%;
  mask: radial-gradient(circle at 92% 12%, transparent 0 0, var(--noir) 1%) center / 100% 100%;
}
/* Refusé : une bouchée en haut à droite. */
.boite-a-cookies .sbwp-cnst-choix:has(input[type="checkbox"]:not(:checked)) .boite-a-cookies__biscuit {
  -webkit-mask: radial-gradient(circle at 92% 12%, transparent 0 32%, var(--noir) 33%), radial-gradient(circle at 70% 2%, transparent 0 18%, var(--noir) 19%);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle at 92% 12%, transparent 0 32%, var(--noir) 33%), radial-gradient(circle at 70% 2%, transparent 0 18%, var(--noir) 19%);
  mask-composite: intersect;
  rotate: -12deg;
}
html body .boite-a-cookies .sbwp-cnst-modale-actions { gap: .8rem; }
html body .boite-a-cookies .sbwp-cnst-btn--discret { border-color: color-mix(in srgb, var(--os) 30%, transparent); }
/* Le bandeau pose la même question : un petit cookie l'annonce. */
.sbwp-cnst.plume-demande .sbwp-cnst-texte::before { content: ''; display: inline-block; width: .9em; height: .9em; margin-right: .35em; vertical-align: -.05em; border-radius: 50%; background: radial-gradient(circle at 32% 36%, var(--noir) 0 10%, transparent 11%), radial-gradient(circle at 66% 62%, var(--noir) 0 11%, transparent 12%), var(--or-vif); }
/* Avec la boutique, la caisse demande le nom, l'e-mail et les conditions : l'étape 2 n'a plus qu'un bouton. */
.cadran__formulaire.est-boutique :is(input[type="text"], input[type="email"], .cadran__accord) { display: none; }
/* Le choix de ce que Yan offrira, et le mot pour lui. */
.cadran__souhait { display: grid; gap: .4rem; margin: 0 0 .4rem; padding: 0; border: 0; }
.cadran__souhait legend { margin-bottom: .5rem; font-family: var(--f-voix); font-size: 1.15rem; color: var(--os); }
.cadran__souhait label { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .4rem .8rem; border: 1px solid color-mix(in srgb, var(--os) 20%, transparent); border-radius: .7rem; cursor: pointer; }
.cadran__souhait label:has(input:checked) { border-color: var(--electrique); background: color-mix(in srgb, var(--electrique) 10%, transparent); }
.cadran__souhait input { accent-color: var(--electrique); }
.cadran__souhait span { font-size: .85rem; color: var(--cendre); }
.cadran__souhait b { margin-right: .4rem; color: var(--os); font-weight: 600; }
.cadran__mot { display: grid; gap: .3rem; font-size: .8rem; color: var(--cendre); }
.cadran__mot textarea { padding: .6rem .8rem; border: 1px solid color-mix(in srgb, var(--os) 30%, transparent); border-radius: .55rem; background: transparent; color: var(--os); font: inherit; font-size: 16px; resize: vertical; }
.cadran__mot textarea:focus-visible { outline: 2px solid var(--electrique); outline-offset: 1px; }


/* ——— La boutique : panier et caisse (WooCommerce, version classique), dans la nuit du site. */
.boutique { width: min(100% - 2 * var(--marge), 68rem); margin: 0 auto; padding: clamp(8rem, 16vh, 10rem) 0 5rem; color: var(--os); }
.boutique__titre { margin-bottom: 2rem; font-family: var(--f-titre); font-weight: 800; font-size: clamp(2rem, 5vw, 3.4rem); text-transform: uppercase; line-height: .95; }
.boutique :is(h2, h3) { font-family: var(--f-titre); font-weight: 800; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; margin: 1.6rem 0 .8rem; }
.boutique a { color: var(--os); }
.boutique label { display: block; margin-bottom: .3rem; font-size: .8rem; color: var(--cendre); }
/* « #contenu » : WooCommerce peint ses champs en blanc avec des sélecteurs plus forts (.woocommerce form .form-row …). */
#contenu.boutique :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], textarea, select),
#contenu.boutique .select2-container .select2-selection { width: 100%; min-height: 2.9rem; padding: .55rem .8rem; border: 1px solid color-mix(in srgb, var(--os) 28%, transparent); border-radius: .55rem; background: color-mix(in srgb, var(--os) 4%, transparent); color: var(--os); font: inherit; font-size: 16px; }
.boutique .select2-container .select2-selection__rendered { color: var(--os); line-height: 1.7; }
.boutique :is(input, textarea, select):focus-visible { outline: 2px solid var(--electrique); outline-offset: 1px; }
.boutique ::placeholder { color: color-mix(in srgb, var(--os) 45%, transparent); }
.boutique .form-row { margin: 0 0 .9rem; }
.boutique .col2-set { display: grid; gap: 0 2rem; }
.boutique .col2-set :is(.col-1, .col-2) { float: none; width: 100%; max-width: none; }
.boutique .form-row-first, .boutique .form-row-last { width: 48%; }
.boutique .form-row-wide { clear: both; }
.boutique .woocommerce-order { display: grid; gap: 1rem; }
.boutique .woocommerce-order > :is(h2, p, section) { margin: 0; }
.boutique #customer_details { margin-bottom: 1.5rem; }
.boutique .woocommerce-checkout { display: grid; gap: 2rem; }
@media (min-width: 60rem) {
  .boutique form.woocommerce-checkout { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; }
  .boutique form.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / 3; }
  .boutique form.woocommerce-checkout :is(#order_review_heading, #order_review) { grid-column: 2; }
  .boutique .col2-set { grid-template-columns: 1fr; }
}
.boutique table.shop_table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.boutique table.shop_table :is(th, td) { padding: .7rem .4rem; border-bottom: 1px solid color-mix(in srgb, var(--os) 14%, transparent); text-align: left; vertical-align: top; }
.boutique table.shop_table .order-total :is(th, td) { font-family: var(--f-titre); font-weight: 800; font-size: 1.1rem; color: var(--electrique); border-bottom: 0; }
.boutique .wc-item-meta, .boutique .variation { margin: .3rem 0 0; padding: 0; list-style: none; font-size: .8rem; color: var(--cendre); }
.boutique .wc-item-meta p, .boutique .variation dd p { display: inline; margin: 0; }
.boutique #payment { margin-top: 1.2rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--electrique) 35%, transparent); border-radius: 1rem; }
.boutique #payment ul.payment_methods { margin: 0 0 1rem; padding: 0; list-style: none; display: grid; gap: .5rem; }
.boutique #payment ul.payment_methods li label { display: inline; color: var(--os); font-size: .95rem; }
.boutique #payment .payment_box { margin: .4rem 0 0; padding: .6rem .8rem; border-radius: .5rem; background: color-mix(in srgb, var(--os) 6%, transparent); font-size: .85rem; color: var(--cendre); }
.boutique :is(button.button, a.button, input.button, #place_order, .checkout-button) { display: inline-flex; justify-content: center; align-items: center; min-height: 3rem; padding: .7rem 1.6rem; border: 0; border-radius: 999px; background: var(--rose); color: var(--noir); font: inherit; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.boutique #place_order { width: 100%; margin-top: .8rem; }
.boutique .woocommerce-privacy-policy-text, .boutique .woocommerce-terms-and-conditions-wrapper { font-size: .78rem; color: var(--cendre); }
.boutique .thya-nouvelles label { display: flex; gap: .6rem; align-items: center; color: var(--os); font-size: .85rem; }
.boutique :is(.woocommerce-error, .woocommerce-info, .woocommerce-message) { margin: 0 0 1.2rem; padding: .8rem 1rem; border-radius: .7rem; list-style: none; background: color-mix(in srgb, var(--rose) 14%, transparent); border: 1px solid color-mix(in srgb, var(--rose) 45%, transparent); }
.boutique .woocommerce-order-overview { display: flex; flex-wrap: wrap; gap: .5rem 2rem; padding: 0; list-style: none; font-size: .85rem; color: var(--cendre); }
.boutique .woocommerce-order-overview strong { display: block; color: var(--os); }
.thya-merci { margin: 0 0 2rem; padding: 1.2rem 1.4rem; border: 1px solid var(--electrique); border-radius: 1rem; }
.thya-merci__titre { font-family: var(--f-voix); font-size: clamp(1.3rem, 3vw, 1.8rem); line-height: 1.2; margin-bottom: .6rem; }
.thya-merci__lien { color: var(--electrique); }
.boutique .product-thumbnail img { width: 3.5rem; height: auto; border-radius: .4rem; }
/* Le panier, dans le menu : son nombre d'articles dans une pastille rose. */
.entete__icone .wp-block-navigation-item__label { position: relative; display: inline-flex; align-items: center; }
.entete__icone svg { display: block; }
.entete__compte { position: absolute; top: -.55em; right: -.75em; display: inline-grid; place-items: center; min-width: 1.35em; height: 1.35em; padding: 0 .3em; border-radius: 999px; background: var(--rose); color: var(--noir); font-size: .68rem; font-weight: 700; letter-spacing: 0; }
.entete__nav .entete__icone a { min-width: 2.75rem; justify-content: center; }

/* La boutique : la grille des articles et la page d'un article. */
.boutique .woocommerce-products-header__title { margin: 0 0 1.4rem; font-family: var(--f-titre); font-weight: 800; font-size: clamp(2rem, 5vw, 3.4rem); line-height: .95; text-transform: uppercase; }
/* La taille suit la colonne : « Renaissances », insécable avec ses guillemets, doit y tenir entier (Yan, 02.11.2026). */
.boutique .summary { container-type: inline-size; }
.boutique .product_title { margin: 0 0 1rem; font-family: var(--f-titre); font-weight: 800; font-size: min(2.3rem, 5.8cqi); line-height: 1.05; text-transform: uppercase; }
.boutique .woocommerce-result-count { margin: 0 0 1rem; font-size: .8rem; color: var(--cendre); }
.boutique .woocommerce-ordering { margin: 0 0 1.4rem; }
#contenu.boutique .woocommerce-ordering select { width: auto; min-height: 2.6rem; }
.boutique ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 2rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.boutique ul.products::before, .boutique ul.products::after { content: none; }
#contenu.boutique ul.products li.product { float: none; width: auto; margin: 0; display: grid; gap: .5rem; align-content: start; }
.boutique ul.products li.product a img { width: 100%; aspect-ratio: 1; object-fit: cover; margin: 0 0 .6rem; border-radius: .8rem; background: var(--os); transition: transform .5s var(--lent); }
.boutique ul.products li.product a:hover img { transform: scale(1.02); }
.boutique ul.products .woocommerce-loop-product__title { margin: 0; font-family: var(--f-texte); font-weight: 600; font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--os); }
.boutique ul.products .price, .boutique .summary .price { color: var(--electrique); font-family: var(--f-titre); font-weight: 800; }
.boutique ul.products .button { justify-self: start; min-height: 2.6rem; padding: .5rem 1.1rem; font-size: .7rem; letter-spacing: .08em; white-space: nowrap; }
/* Dans la grille, le bouton se tait (Yan, 01.11.2026 : « ils crient ») ; ancré sur #contenu, car la règle générale porte #place_order dans un :is() et pèse un identifiant : un trait fin, la couleur du texte, le
   rose seulement au survol. Le rose plein reste à l'étape qui engage, le paiement. */
#contenu.boutique ul.products li.product a.button { min-height: 2.3rem; padding: .35rem 1rem; border: 1px solid color-mix(in srgb, var(--os) 32%, transparent); background: transparent; color: var(--os); font-size: .66rem; font-weight: 500; letter-spacing: .16em; box-shadow: none; transition: border-color .25s, color .25s, background .25s; }
#contenu.boutique ul.products li.product a.button:is(:hover, :focus-visible) { border-color: var(--rose); color: var(--rose); background: color-mix(in srgb, var(--rose) 8%, transparent); }
.boutique div.product { display: grid; gap: 2rem 3rem; }
@media (min-width: 60rem) { .boutique div.product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .boutique div.product > :is(.woocommerce-tabs, .related, .upsells) { grid-column: 1 / -1; } }
#contenu.boutique div.product :is(.woocommerce-product-gallery, .summary) { float: none; width: auto; margin: 0; }
.boutique .woocommerce-product-gallery img { border-radius: .8rem; background: var(--os); }
.boutique .woocommerce-product-gallery .flex-control-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.boutique .woocommerce-product-gallery .flex-control-thumbs li { width: auto; float: none; }
.boutique .woocommerce-product-gallery .flex-control-thumbs img { width: 100%; border-radius: .4rem; cursor: pointer; opacity: .6; }
.boutique .woocommerce-product-gallery .flex-control-thumbs img.flex-active { opacity: 1; }
.boutique .woocommerce-product-gallery__trigger { display: none; }
.boutique .summary .price { display: block; margin: 0 0 1rem; font-size: 1.6rem; }
.boutique .summary .woocommerce-product-details__short-description { margin-bottom: 1.2rem; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cendre); }
.boutique table.variations { margin: 0 0 1rem; border-collapse: collapse; }
.boutique table.variations :is(th, td) { padding: .3rem .8rem .3rem 0; text-align: left; vertical-align: middle; }
.boutique table.variations label { margin: 0; color: var(--os); font-size: .85rem; }
.boutique .reset_variations { font-size: .75rem; color: var(--cendre); }
.boutique form.cart { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.boutique form.cart .quantity input { width: 4.5rem; text-align: center; }
.boutique .single_add_to_cart_button.disabled { opacity: .5; }
.boutique .woocommerce-variation-price { margin-bottom: .6rem; }
.boutique .woocommerce-tabs ul.tabs { display: flex; gap: 1.4rem; margin: 0 0 1rem; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid color-mix(in srgb, var(--os) 14%, transparent); }
.boutique .woocommerce-tabs ul.tabs li a { white-space: nowrap; }
/* Les coins dessinés des onglets de WooCommerce laissaient de petits traits blancs. */
#contenu.boutique .woocommerce-tabs ul.tabs::before, #contenu.boutique .woocommerce-tabs ul.tabs li::before, #contenu.boutique .woocommerce-tabs ul.tabs li::after { content: none; display: none; border: 0; box-shadow: none; }
#contenu.boutique .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.boutique .woocommerce-tabs ul.tabs li a { display: block; padding: .6rem 0; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: color-mix(in srgb, var(--os) 72%, transparent); }
.boutique .woocommerce-tabs ul.tabs li a:is(:hover, :focus-visible) { color: var(--os); }
.boutique .woocommerce-tabs ul.tabs li.active a { color: var(--os); box-shadow: inset 0 -2px 0 var(--rose); }
.boutique .woocommerce-tabs .panel { max-width: 46rem; line-height: 1.6; }
/* Le texte des articles, justifié (Yan, 31.10.2026), avec des coupures de mots pour éviter les trous. */
.boutique .woocommerce-Tabs-panel--description p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.boutique .woocommerce-tabs .panel > h2:first-child { display: none; }
.boutique .woocommerce-Tabs-panel p { margin: 0 0 1em; }
/* Le guide des tailles et le fil de retour. */
.thya-guide { width: 100%; max-width: 40rem; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.thya-guide :is(th, td) { padding: .55rem .6rem; border-bottom: 1px solid color-mix(in srgb, var(--os) 14%, transparent); text-align: center; }
.thya-guide thead th { font-size: .72rem; font-weight: 600; letter-spacing: .06em; color: var(--cendre); }
.thya-guide tbody th { font-family: var(--f-titre); font-weight: 800; }
.thya-guide__note { margin-top: .8rem; font-size: .8rem; color: var(--cendre); }
.thya-retour { margin: 0 0 1.2rem; font-size: .85rem; }
.thya-retour a { color: var(--electrique); text-decoration: none; letter-spacing: .04em; }
.thya-retour a:is(:hover, :focus-visible) { color: var(--os); text-decoration: underline; }
/* Les messages de WooCommerce (« … a été ajouté à votre panier ») : dans la nuit du site, pas en vert clair. */
#contenu.boutique :is(.wc-block-components-notice-banner, .woocommerce-message, .woocommerce-info, .woocommerce-error) { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.4rem; padding: .8rem 1rem; border: 1px solid color-mix(in srgb, var(--electrique) 45%, transparent); border-radius: .8rem; background: color-mix(in srgb, var(--electrique) 8%, var(--noir)); color: var(--os); font-size: .9rem; }
#contenu.boutique .wc-block-components-notice-banner.is-error, #contenu.boutique .woocommerce-error { border-color: color-mix(in srgb, var(--rose) 55%, transparent); background: color-mix(in srgb, var(--rose) 10%, var(--noir)); }
#contenu.boutique .wc-block-components-notice-banner > svg { flex: none; fill: var(--noir); background: var(--electrique); border-radius: 50%; }
#contenu.boutique .wc-block-components-notice-banner__content { flex: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; align-items: center; }
#contenu.boutique :is(.wc-block-components-notice-banner, .woocommerce-message) .wc-forward { order: 2; min-height: 0; padding: 0; background: none; color: var(--electrique); font-size: .75rem; letter-spacing: .12em; opacity: 1; }
/* Le sac et le panier, serrés l'un contre l'autre à droite du menu. */
.entete__nav .entete__icone + .entete__icone { margin-left: calc(-1 * clamp(1rem, 3vw, 2.5rem) + .2rem); }
.entete__nav .entete__boutique { margin-left: calc(-1 * clamp(1rem, 3vw, 2.5rem) + 1rem); }
/* Le panier : la colonne du produit prend la place, les chiffres restent étroits (Yan, 31.10.2026). */
.boutique table.shop_table.cart { table-layout: auto; }
/* Les largeurs de colonnes, seulement quand le panier est un tableau : sous 768 px, WooCommerce empile les cellules,
   et ces largeurs les coupaient à mi-écran. */
@media (min-width: 769px) {
  .boutique table.shop_table.cart :is(th, td):is(.product-remove, .product-thumbnail, .product-price, .product-quantity, .product-subtotal) { width: 1%; white-space: nowrap; }
}
.boutique table.shop_table.cart .product-quantity .quantity input { width: 4.2rem; min-height: 2.6rem; padding: .3rem; text-align: center; }
/* La miniature à sa vraie taille : sans largeur minimale, la colonne à 1 % l'écrasait à 33 px (Yan, 01.11.2026). */
.boutique table.shop_table.cart .product-thumbnail img { display: block; width: 4rem; min-width: 4rem; aspect-ratio: 1; object-fit: cover; }
/* La ligne du code promo reste une cellule de tableau : en flex, elle perdait son colspan et s'entassait dans la
   première colonne, qu'elle élargissait à 219 px. Le code promo à gauche, « Mettre à jour » à droite. */
.boutique table.shop_table.cart td.actions { text-align: right; }
.boutique table.shop_table.cart td.actions .coupon { float: left; display: inline-flex; gap: .5rem; align-items: center; }
#contenu.boutique table.shop_table.cart td.actions .coupon input { width: 12rem; min-height: 2.6rem; }
.boutique .woocommerce-shipping-methods { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
/* Le code postal, étroit, et la ville, sur la même ligne. */
#contenu.boutique :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) { display: flex; flex-wrap: wrap; column-gap: 4%; }
#contenu.boutique :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) > .form-row { float: none; width: 100%; }
#contenu.boutique :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) > :is(.form-row-first, .form-row-last) { width: 48%; }
#contenu.boutique :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) > .form-row.thya-npa { width: 30%; }
#contenu.boutique :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) > .form-row.thya-ville { width: 66%; }
/* Une minute au panier de quelqu'un, pas encore payée : hachurée, elle peut encore se libérer. */
.cadran__m.est-tenue { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--rose) 22%, transparent) 0 4px, transparent 4px 8px); text-decoration: none; }

/* « (dont CHF … TVA) » sur sa propre ligne, en petit, sous le total. */
.boutique small.includes_tax, .boutique .includes_tax { display: block; margin-top: .2rem; font-family: var(--f-texte); font-weight: 400; font-size: .72rem; letter-spacing: 0; color: var(--cendre); }
/* Les vignettes des autres photos, plus grandes ; les onglets, lisibles (WooCommerce les peignait en gris foncé
   avec des sélecteurs plus forts). Yan, 31.10.2026. */
#contenu.boutique .woocommerce-product-gallery .flex-control-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-top: .8rem; }
#contenu.boutique .woocommerce-product-gallery .flex-control-thumbs li { width: auto; margin: 0; }
#contenu.boutique .woocommerce-product-gallery .flex-control-thumbs img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
#contenu.boutique div.product .woocommerce-tabs ul.tabs li a { color: color-mix(in srgb, var(--os) 85%, transparent); font-weight: 600; }
#contenu.boutique div.product .woocommerce-tabs ul.tabs li.active a { color: var(--os); }

/* ——— Écrire à Yan : le formulaire sous « Suivre » (Fluent Forms, dans la nuit du site). */
.ecrire { display: grid; gap: 1rem; max-width: 46rem; margin-top: clamp(3rem, 8vh, 5rem); }
.ecrire__titre { font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: .95; text-transform: uppercase; }
.ecrire__chapo { font-family: var(--f-voix); font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--os); }
.ecrire .ff-el-group { margin-bottom: 1rem; }
.ecrire .ff-el-input--label label { font-size: .8rem; color: var(--cendre); }
.ecrire :is(.ff-el-form-control) { width: 100%; min-height: 2.9rem; padding: .6rem .8rem; border: 1px solid color-mix(in srgb, var(--os) 28%, transparent); border-radius: .55rem; background: color-mix(in srgb, var(--os) 4%, transparent); color: var(--os); font: inherit; font-size: 16px; }
.ecrire textarea.ff-el-form-control { min-height: 8rem; resize: vertical; }
.ecrire .ff-el-form-control:focus { outline: 2px solid var(--electrique); outline-offset: 1px; border-color: transparent; }
.ecrire .ff-el-form-check label { display: flex; gap: .6rem; align-items: center; color: var(--os); font-size: .85rem; }
.ecrire .ff-btn-submit { min-height: 3rem; padding: .7rem 1.8rem; border: 0; border-radius: 999px; background: var(--rose); color: var(--noir); font: inherit; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.ecrire .ff-message-success { padding: 1rem 1.2rem; border: 1px solid var(--electrique); border-radius: .8rem; background: none; color: var(--os); font-family: var(--f-voix); font-size: 1.2rem; box-shadow: none; }
.ecrire .error.text-danger { color: var(--rose); font-size: .8rem; }
/* La lettre (Yan, 01.11.2026 : « plus original… le centrer »). Une feuille claire au milieu de la nuit ; la phrase se
   complète, les champs sont des lignes à remplir. Les étiquettes restent pour les lecteurs d'écran. */
.ecrire { margin-inline: auto; justify-items: center; text-align: center; }
.ecrire .frm-fluent-form { width: min(100%, 44rem); padding: clamp(1.6rem, 5vw, 3.2rem); border-radius: .3rem; background: var(--os); color: var(--noir); text-align: left; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .45); font-family: var(--f-voix); font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.5; }
.ecrire .frm-fluent-form fieldset { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .45em; row-gap: .2rem; margin: 0; padding: 0; border: 0; }
.ecrire .frm-fluent-form .ff-el-group { margin: 0; }
.ecrire .frm-fluent-form .lettre-texte p, .ecrire .frm-fluent-form .lettre-bloc p { margin: 0; }
.ecrire .frm-fluent-form .lettre-bloc { flex: 1 0 100%; }
.ecrire .frm-fluent-form .lettre-salut { margin-bottom: .6rem; }
.ecrire .frm-fluent-form .lettre-champ { flex: 1 1 8rem; min-width: 7rem; }
.ecrire .frm-fluent-form .lettre-champ--large { flex-basis: 15rem; }
.ecrire .frm-fluent-form :is(.lettre-champ, .lettre-message) .ff-el-input--label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ecrire .frm-fluent-form .ff-el-form-control { min-height: 2.75rem; padding: .2rem .1rem; border: 0; border-bottom: 1.5px dashed color-mix(in srgb, var(--noir) 45%, transparent); border-radius: 0; background: none; color: var(--noir); font-family: var(--f-voix); font-size: inherit; }
.ecrire .frm-fluent-form .ff-el-form-control::placeholder { color: color-mix(in srgb, var(--noir) 62%, transparent); font-style: italic; }
.ecrire .frm-fluent-form .ff-el-form-control:focus { outline: none; border-bottom: 2px solid var(--rose); }
.ecrire .frm-fluent-form .lettre-message { margin-top: .4rem; }
.ecrire .frm-fluent-form textarea.ff-el-form-control { min-height: 9rem; padding: .3rem 0; border: 0; resize: vertical; background-image: repeating-linear-gradient(to bottom, transparent 0 calc(1.5em - 1px), color-mix(in srgb, var(--noir) 22%, transparent) calc(1.5em - 1px) 1.5em); background-attachment: local; line-height: 1.5em; }
.ecrire .frm-fluent-form textarea.ff-el-form-control:focus { box-shadow: inset 0 -2px 0 var(--rose); }
.ecrire .frm-fluent-form .error.text-danger { font-family: var(--f-texte); font-size: .75rem; color: color-mix(in srgb, var(--rose) 70%, var(--noir)); }
.ecrire .frm-fluent-form .ff_submit_btn_wrapper { flex: 1 0 100%; margin-top: 1.2rem; text-align: right; }
.ecrire .frm-fluent-form .ff-btn-submit { font-family: var(--f-texte); font-size: .85rem; }
.ecrire .ff-message-success { width: min(100%, 44rem); margin-inline: auto; text-align: center; }
/* Cibles tactiles (audit du 31.10.2026, soir) : les liens des facettes, « Lire la biographie », les liens du pied
   de page, le logo et la case de la newsletter gardent leur dessin, mais leur zone de toucher atteint 44 px. */
.facette__lien, .lien-fleche, .pied__liens a { display: inline-flex; align-items: center; min-height: 2.75rem; }
/* Facette fermée : les textes cachés sortent du flux de la grille. Présents, ils créaient chacun une rangée, donc un
   intervalle (le gap ne s'annule pas par une marge négative), et le lien gardait ses 2,75 rem : les noms verticaux
   s'arrêtaient à des hauteurs différentes selon qu'une facette avait un lien ou un second paragraphe (Yan,
   01.11.2026 : « alignés en bas, ce serait plus joli »). */
.facette :is(.facette__accroche, .facette__texte, .facette__lien) { position: absolute; min-height: 0; }
.facette:is(:hover, :focus, :focus-within) :is(.facette__accroche, .facette__texte, .facette__lien),
.facettes:not(.est-pilotee) .facettes__rangee:not(:hover):not(:focus-within) .facette:first-child :is(.facette__accroche, .facette__texte, .facette__lien),
.facettes.est-pilotee .facettes__rangee:not(:hover) .facette.est-ouverte :is(.facette__accroche, .facette__texte, .facette__lien) { position: static; }
.facette:is(:hover, :focus, :focus-within) .facette__lien,
.facettes:not(.est-pilotee) .facettes__rangee:not(:hover):not(:focus-within) .facette:first-child .facette__lien,
.facettes.est-pilotee .facettes__rangee:not(:hover) .facette.est-ouverte .facette__lien { min-height: 2.75rem; }
.entete__signature .custom-logo-link { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; }
.ecrire .ff-el-form-check-input { width: 1.25rem; height: 1.25rem; accent-color: var(--electrique); }
.ecrire .ff-el-form-check label { min-height: 2.75rem; cursor: pointer; }
/* Les boutons du consentement et les points du sommaire : 44 px de zone de toucher, sans changer leur dessin
   (le point garde sa taille ; c'est sa marge qui s'agrandit). */
html body .sbwp-cnst-btn { min-height: 2.75rem; }
.chapitres a { padding: .5rem; margin: -.5rem; }
/* La promesse, en deux pastilles sous le texte de Yan (31.10.2026 : « il faut qu'on comprenne que ce sera en live et
   que votre extrait en vidéo sera envoyé ») : le direct, avec un point rouge qui bat, et l'extrait. */
.cadran__promesse { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 0; padding: 0; list-style: none; }
.cadran__promesse li { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border: 1px solid color-mix(in srgb, var(--os) 25%, transparent); border-radius: 999px; font-size: .78rem; letter-spacing: .04em; color: var(--os); }
.cadran__direct { width: .55rem; height: .55rem; border-radius: 50%; background: var(--rose); box-shadow: 0 0 .5rem var(--rose); animation: direct-bat 1.6s ease-in-out infinite; }
@keyframes direct-bat { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .cadran__direct { animation: none; } }
.cadran__moyens { font-size: .9rem; line-height: 1.5; color: var(--cendre); }

/* Sur téléphone, la page d'un article débordait (701 px pour un écran de 390) : la galerie de WooCommerce pose
   ses photos côte à côte dans une piste très large, et une case de grille s'élargit à son contenu. Les cases
   de l'article ne dépassent plus la colonne, et la galerie coupe sa piste. (Yan, 31.10.2026 : « coupé ».) */
#contenu.boutique div.product > * { min-width: 0; max-width: 100%; }
#contenu.boutique .woocommerce-product-gallery { overflow: hidden; }
#contenu.boutique .woocommerce-product-gallery .flex-viewport { max-width: 100%; }
/* Le tri de la boutique est retiré (Yan, 31.10.2026) ; sans lui, le nombre de résultats n'a pas lieu d'être. */
.boutique :is(.woocommerce-ordering, .woocommerce-result-count) { display: none; }
/* « ← Tout », en bas du multivers, ne sert à rien : le menu du haut porte les mondes, et toucher le vide ou
   Échap revient à tout le multivers (Yan, 31.10.2026). */
.multivers__mondes { display: none; }
/* Le multivers sur téléphone (Yan, 31.10.2026 : « répartis mieux le multivers en responsive »). Le nuage est
   projeté sur un écran étroit, mais ses étiquettes gardaient leur taille d'ordinateur : FONDATEUR ou
   ACCOMPAGNATEUR débordaient de l'écran et se chevauchaient. Sur petit écran, les noms et les images
   rapetissent, les longs noms peuvent passer à la ligne, et le sommaire des chapitres se réduit à des points
   fins pour ne plus couvrir le nuage. */
@media (max-width: 48rem) {
  .mv-noeud--role .mv-noeud__nom, .multivers[data-monde]:not([data-monde=""]) .mv-noeud--role .mv-noeud__nom { font-size: 1.05rem; letter-spacing: 0; }
  .mv-noeud--theme .mv-noeud__nom { font-size: 1.05rem; }
  .mv-noeud--etoile .mv-noeud__nom, .mv-noeud--equipe .mv-noeud__nom, .mv-noeud--vie .mv-noeud__nom, .mv-noeud--regard .mv-noeud__nom { font-size: .85rem; }
  .mv-noeud__nom { max-width: 11rem; white-space: normal; }
  .mv-noeud--photo .mv-noeud__bouton, .mv-noeud--centre .mv-noeud__bouton, .mv-noeud--oeuvre .mv-noeud__bouton { width: 6.5rem; }
  .mv-noeud--marque img { width: 3.6rem; height: auto; }
  .chapitres .chapitres__numero { width: .7rem; height: .7rem; min-width: 0; padding: 0; font-size: 0; }
  .chapitres ol { gap: .4rem; }
}
/* Les pastilles de couleur d'un article : la liste reste pour le formulaire, mais se cache. */
/* Le menu de couleur, caché sous les pastilles. « #contenu.boutique » : la règle des champs (width: 100%) était plus
   forte, et ce menu invisible de 1 088 px débordait la fiche à droite en grand écran (recette du 01.11.2026). */
#contenu.boutique select[data-sous-pastilles] { position: absolute; width: 1px; min-width: 0; height: 1px; min-height: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.thya-pastilles { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.thya-pastille { width: 2.75rem; height: 2.75rem; padding: 0; border: 2px solid color-mix(in srgb, var(--os) 25%, transparent); border-radius: 50%; background: radial-gradient(circle, var(--teinte) 0 58%, transparent 60%); cursor: pointer; transition: border-color .2s, transform .2s; }
.thya-pastille:is(:hover, :focus-visible) { border-color: var(--os); }
.thya-pastille[aria-pressed="true"] { border-color: var(--electrique); transform: scale(1.06); }
.thya-pastille:disabled { opacity: .3; cursor: not-allowed; }
.thya-pastilles__nom { margin-left: .3rem; font-size: .85rem; color: var(--os); }
/* Sur téléphone, le libellé au-dessus du choix : la rangée de pastilles ne pousse plus la page hors de l'écran. */
@media (max-width: 48rem) {
  .boutique table.variations, .boutique table.variations :is(tbody, tr, th, td) { display: block; width: 100%; }
  .boutique table.variations th { padding: .6rem 0 .3rem; }
  .boutique table.variations td { padding: 0 0 .4rem; }
}
/* La galerie sur téléphone, moitié-moitié (Yan, 31.10.2026 : « image trop petite, panneau trop grand ») :
   l'œuvre remplit la moitié haute ; le cartel tient dans la moitié basse, compact ; le menu s'efface pendant
   qu'on regarde (le logo reste) ; les grosses flèches cèdent la place à celles du cartel. */
@media (max-width: 48rem) {
  .mv-panneau { height: auto; max-height: 50svh; gap: .6rem; padding: 1rem var(--marge) 1.2rem; }
  .mv-panneau__fermer { position: absolute; top: .7rem; right: var(--marge); margin: 0; padding: .35rem .8rem; font-size: .66rem; }
  .mv-panneau .mv-cartel__numero { font-size: .8rem; }
  .mv-panneau .mv-cartel__titre { padding-right: 5.5rem; font-size: 1.35rem; }
  .mv-panneau .mv-cartel__parcours button { width: 2.6rem; height: 2.6rem; }
  .mv-panneau .mv-lien { min-height: 2.6rem; padding: .35rem .9rem; font-size: .8rem; }
  .est-en-galerie .mv-fleche { display: none; }
  html.est-en-galerie .entete__nav { opacity: 0; pointer-events: none; transition: opacity .4s; }
}

/* Le cartel, compact (Yan, 31.10.2026 : « optimise le layout afin de tout pouvoir afficher »). « Fermer » passe
   dans le coin ; le lien du site et les flèches partagent une ligne ; « Relié à » et « Même fil » se resserrent,
   et « Même fil » devient une rangée qui défile de côté au lieu d'empiler ses vignettes. */
.mv-panneau { grid-template-columns: minmax(0, 1fr) auto; column-gap: .6rem; row-gap: .55rem; padding-top: 1.1rem; }
.mv-panneau > *, .mv-cartel__corps > * { grid-column: 1 / -1; }
.mv-panneau__fermer { position: absolute; top: .8rem; right: .9rem; margin: 0; padding: .35rem .8rem; font-size: .66rem; z-index: 1; }
.mv-panneau .mv-cartel__numero { padding-right: 5.5rem; }
.mv-panneau .mv-cartel__corps .mv-noeud__ecouter { grid-column: 1; align-self: center; }
.mv-panneau .mv-cartel__parcours { grid-column: 2; justify-self: end; gap: .4rem; }
.mv-panneau .mv-cartel__parcours:has(.mv-cartel__compteur:empty) .mv-cartel__compteur { display: none; }
.mv-panneau .mv-cartel__corps :is(.mv-noeud__accroche, .mv-noeud__sous-titre) { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.2; }
.mv-panneau .mv-cartel__titre { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.mv-panneau__relie { margin-top: .3rem; }
.mv-panneau .mv-lien { min-height: 2.3rem; padding: .3rem .75rem; font-size: .76rem; }
.mv-panneau .mv-lien--vie, .mv-panneau .mv-lien--theme { font-size: .95rem; }
.mv-panneau .mv-lien--photo img, .mv-panneau .mv-lien--centre img, .mv-panneau .mv-lien--oeuvre img { width: 3rem; height: 3rem; }
.mv-panneau .mv-lien--marque img { width: 3.6rem; height: 2.3rem; }
.mv-panneau__relie ~ .mv-panneau__relie + .mv-panneau__liens { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: thin; }
.mv-panneau__relie ~ .mv-panneau__relie + .mv-panneau__liens > * { flex: none; }
/* Le lien du site tient sur une ligne ; c'est le nom du fil, entre les flèches, qui cède (Yan, 31.10.2026). */
.mv-panneau .mv-cartel__corps .mv-noeud__ecouter { white-space: nowrap; }
.mv-panneau .mv-cartel__parcours { min-width: 0; }
.mv-panneau .mv-cartel__compteur { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .62rem; }
/* Le menu sur téléphone, équilibré (Yan, 31.10.2026) : en haut, la signature à gauche et les actions à droite
   (Contact, 1 440, boutique, panier) ; en dessous, les trois mondes sur toute la largeur, à parts égales. La
   navigation et sa liste se fondent dans l'en-tête (display: contents) pour que leurs liens s'y rangent. */
@media (max-width: 48rem) {
  .entete { flex-wrap: wrap; align-items: center; column-gap: .5rem; row-gap: .35rem; padding-block: .7rem .5rem; }
  .entete .entete__signature { margin-right: auto; }
  .entete :is(.entete__nav, .entete__nav .wp-block-navigation__container) { display: contents; }
  .entete .entete__nav li { order: 1; }
  .entete::after { content: ''; order: 2; flex-basis: 100%; height: 0; }
  .entete .entete__nav li.lien-monde { order: 3; flex: 1 1 0; display: flex; justify-content: center; }
  .entete .entete__nav li.lien-monde:first-of-type { justify-content: flex-start; }
  .entete .entete__nav li.lien-monde--stratege { justify-content: flex-end; }
  .entete .entete__nav :is(a.entete__contact, .entete__contact a), .entete__nav :is(a.entete__1440, .entete__1440 .wp-block-navigation-item__content.wp-block-navigation-item__content) { margin-left: 0; padding-block: .3rem; min-height: 2.2rem; }
  .entete__signature img, .entete__signature .custom-logo { width: 5.5rem; }
}
@media (max-width: 23rem) {
  .entete__signature img, .entete__signature .custom-logo { width: 4.4rem; }
  .entete .entete__nav :is(a.entete__contact, .entete__contact a), .entete__nav :is(a.entete__1440, .entete__1440 .wp-block-navigation-item__content.wp-block-navigation-item__content) { padding-inline: .7rem; font-size: .6rem; }
  .entete .entete__nav li.lien-monde a { font-size: .58rem; letter-spacing: .04em; white-space: nowrap; }
}
/* Le choix de la langue, discret, au bout de l'en-tête. */
.entete__langues { display: flex; gap: .15rem; pointer-events: auto; font-size: .62rem; letter-spacing: .12em; }
.entete__langues a { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 2.75rem; color: color-mix(in srgb, currentColor 55%, transparent); text-decoration: none; }
.entete__langues a[aria-current] { color: currentColor; font-weight: 700; }
/* Sur téléphone, une grille : en haut la signature, les langues, Contact, 1 440, la boutique et le panier ; en
   dessous, les trois mondes sur toute la largeur. */
@media (max-width: 48rem) {
  /* « .entete.entete » : la classe de mise en page de WordPress (is-layout-flex) imposait display: flex. */
  .entete.entete { display: grid; grid-template-columns: auto minmax(max-content, 1fr) repeat(3, auto); column-gap: .3rem; align-items: center; }
  .entete::after { display: none; }
  .entete .entete__droite { display: contents; }
  .entete > * , .entete .entete__nav li { grid-row: 1; }
  .entete .entete__signature { grid-column: 1; margin: 0; }
  .entete .entete__langues { grid-column: 2; justify-self: start; gap: 0; }
  .entete .entete__langues a { min-width: 1.6rem; font-size: .56rem; letter-spacing: .04em; }
  /* Plus de « Contact » dans l'en-tête (Yan, 01.11.2026) : l'enveloppe du sommaire y mène. */
  .entete .entete__nav li.entete__1440 { grid-column: 3; }
  .entete .entete__nav li.entete__boutique { grid-column: 4; }
  .entete .entete__nav li.entete__panier { grid-column: 5; }
  .entete .entete__nav li.lien-monde { grid-row: 2; }
  /* Les trois mondes couvrent toute la ligne, et ne dimensionnent donc aucune colonne de la première :
     « The Voice », plus large que la signature, poussait l'en-tête hors de l'écran. */
  .entete .entete__nav li.lien-monde { grid-column: 1 / -1; }
  .entete .entete__nav li.lien-monde--voix { justify-self: start; }
  .entete .entete__nav li.lien-monde--artiste { justify-self: center; }
  .entete .entete__nav li.lien-monde--stratege { justify-self: end; }
  .entete .entete__nav li.lien-monde a { letter-spacing: .04em; white-space: nowrap; }
}
@media (max-width: 23rem) {
  .entete .entete__langues a { min-width: 1.3rem; }
  .entete .entete__nav li.lien-monde a { font-size: .54rem; }
}
@media (max-width: 48rem) {
  .entete .entete__signature img, .entete .entete__signature .custom-logo { width: 4.6rem; }
  .entete .entete__nav :is(a.entete__contact, .entete__contact a), .entete .entete__nav :is(a.entete__1440, .entete__1440 .wp-block-navigation-item__content.wp-block-navigation-item__content) { padding-inline: .75rem; font-size: .6rem; }
  .entete .entete__nav .entete__icone a { min-width: 2.2rem; }
}
@media (max-width: 48rem) {
  .entete .entete__nav li.entete__icone.entete__boutique { grid-area: 1 / 4 / 2 / 5; }
  .entete .entete__nav li.entete__icone.entete__panier { grid-area: 1 / 5 / 2 / 6; }
  .entete .entete__nav li.lien-monde.lien-monde { grid-area: 2 / 1 / 3 / -1; }
}
/* À 320 px, après les réglages mobiles qui précèdent : signature et boutons resserrés, « 1440 » sur une ligne. */
@media (max-width: 23rem) {
  .entete .entete__signature img, .entete .entete__signature .custom-logo { width: 3.6rem; }
  .entete.entete { column-gap: .15rem; }
  .entete .entete__nav :is(a.entete__contact, .entete__contact a), .entete .entete__nav :is(a.entete__1440, .entete__1440 .wp-block-navigation-item__content.wp-block-navigation-item__content) { padding-inline: .5rem; white-space: nowrap; letter-spacing: .08em; }
  .entete .entete__nav .entete__icone a { min-width: 1.9rem; }
  .entete .entete__nav li.lien-monde a { letter-spacing: 0; }
}