/* ---------------------------------------------------------------------------
   Gabriel Lechemin · la feuille de la version publiée le 06/09/2026.

   Elle part de la charte du site d'août (Platypi, beige, cinq couleurs, grain)
   et lui retire ce que Gabriel a nommé au vocal du 06/09 :

     « le tout premier site, en termes d'apparence, c'est celui qui fonctionne
       le mieux, excepté les cadres. Moi je suis hors cadre, je fais beaucoup
       de trucs où tout se rejoint. Donc plutôt des aplats de couleurs, plein
       de taches qui se mélangent, quelque chose de flou, un arrière-plan très
       légèrement texturé mais vraiment en douceur, pour que ça laisse du
       visuel et de la facilité à lire, et que tout soit lié dans la même page.
       Quelque chose de doux et en même temps de coloré, de punchy. »

   D'où trois règles qui tiennent toute la feuille :

   1. Les activités se rejoignent par des nappes translucides aux bords fondus.
      Le papier et son grain restent visibles sous les encres sombres.
   2. Le papier est vivant : `fonds/page.jpg` (les cinq couleurs en taches
      mélangées en OkLab, fabriquées par V6-fonds.py) étiré sur la hauteur de
      la page, plus le grain en pavé à sa taille réelle.
   3. Un aplat de couleur porte du beige, jamais du blanc ni du brun. C'est la
      règle de réserve de la charte, gardée telle quelle.
   --------------------------------------------------------------------------- */

@font-face { font-family: Platypi; src: url(/polices/Platypi-Regular.woff2) format('woff2');
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Platypi; src: url(/polices/Platypi-RegularItalic.woff2) format('woff2');
  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Platypi; src: url(/polices/Platypi-Medium.woff2) format('woff2');
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Platypi; src: url(/polices/Platypi-SemiBold.woff2) format('woff2');
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Platypi; src: url(/polices/Platypi-Bold.woff2) format('woff2');
  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: Platypi; src: url(/polices/Platypi-LightItalic.woff2) format('woff2');
  font-weight: 300; font-style: italic; font-display: swap; }

:root {
  --beige: #FFDECB;
  --beige-clair: #FFF1E7;
  --neutre: #1F1A17;
  --marron: #5C341D;

  --spirale: #12818C;   --spirale-encre: #03484E;
  --vagues:  #5C32BA;   --vagues-encre:  #1D0B46;
  --rayons:  #670686;   --rayons-encre:  #3E0052;
  --flamme:  #F23B01;   --flamme-encre:  #521400;
  --diamant: #1800AC;   --diamant-encre: #0B0052;
  /* le violet très noir de l'intro de l'arbre (demande de Vie du 09/09) */
  --violet-nuit: #1C0628;

  --axe: var(--neutre);
  --axe-encre: var(--neutre);

  --marge: clamp(1.25rem, 4vw, 3.5rem);
  --large: 1320px;
  --texte: 66ch;
  --respire: clamp(4.5rem, 9vw, 9rem);
  --temps: 620ms;
  --courbe: cubic-bezier(.22, .61, .36, 1);
  --souple: cubic-bezier(.16, 1, .3, 1);
  --barre-haut: 5.2rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; overscroll-behavior-x: none;
  scroll-padding-top: calc(var(--barre-haut) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ⚠ Une classe qui pose `display:` écrase l'attribut `hidden`. Les tiroirs de
   l'arbre s'étaient tous ouverts en même temps le 06/09 pour cette raison. */
[hidden] { display: none !important; }

body {
  margin: 0;
  color: var(--neutre);
  font-family: Platypi, Georgia, serif;
  font-size: clamp(1.02rem, .42vw + .92rem, 1.16rem);
  line-height: 1.64;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;

  /* Le papier : le grain à sa taille réelle par-dessus, le champ de couleur
     étiré sur toute la hauteur en dessous, le beige plein tout au fond.
     ⚠ Le grain ne peut pas vivre dans l'image du champ : celle-ci est étirée,
     et un grain étiré devient une strie. */
  background-color: var(--beige);
  background-image: url(/fonds/grain.png), url(/fonds/page.jpg);
  background-size: 220px 220px, 100% 100%;
  background-repeat: repeat, no-repeat;
  background-position: top left, top center;
  background-attachment: scroll, scroll;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.08; letter-spacing: -.018em; }
figure, blockquote, ul, ol { margin: 0; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 3px; }

.dedans { width: min(100% - 2 * var(--marge), var(--large)); margin-inline: auto; }
.hors-vue {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------------- la barre

   Le bandeau de l'ancien site, que Gabriel garde : fond presque noir, sa
   signature à gauche, les quatre univers à droite. Le logo est celui de
   Krishan, version finale du 05/09, jamais un signe redessiné. */

/* La barre est passée en beige le 07/09, sur demande de Vie : elle est le
   papier de la page, jamais un bandeau posé dessus. Une ligne de la couleur
   du texte la sépare du hero, sinon le beige de la barre et celui de la page
   se rejoignent sans qu'on sache où elle finit. */
.barre {
  position: sticky; top: 0; z-index: 60;
  background: var(--beige); color: var(--neutre);
  height: var(--barre-haut);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--neutre) 16%, transparent);
}

.barre .dedans { display: flex; align-items: center; gap: 1.4rem; height: 100%; }
.signature { display: flex; align-items: center; gap: .7rem; text-decoration: none;
  font-weight: 700; font-size: 1.14rem; letter-spacing: -.01em; margin-right: auto; }
/* Le logo de Krishan. Son tracé est fait pour un fond clair : le beige de la
   barre lui rend ses pointillés extérieurs, que le noir mangeait. Il tient
   entier dans la barre, qui monte à 6,4 rem sur ordinateur pour l'accueillir :
   le laisser déborder le collait au bord haut. */
.signature .rond {
  flex: none; display: grid; place-items: center;
  width: 4.4rem; height: 4.4rem; margin-left: -.5rem;
}
.signature img { width: 100%; height: auto; }

@media (min-width: 1081px) {
  :root { --barre-haut: 6.4rem; }
  .signature { gap: 1rem; font-size: 1.24rem; }
  .signature .rond { width: 5.6rem; height: 5.6rem; margin-left: -.7rem; }
}

.menu { display: flex; align-items: center; gap: 1.45rem; }
.menu a {
  position: relative; display: flex; align-items: center; gap: .48rem;
  padding: .45rem 0; text-decoration: none; font-size: .95rem; white-space: nowrap;
  color: var(--marron); transition: color 240ms var(--courbe);
}
.menu a i { width: 7px; height: 7px; border-radius: 50%; background: var(--ton);
  flex: none; transition: transform 240ms var(--courbe); }
/* Le survol tire le trait de la couleur de l'univers sous le mot. Une pastille
   arrondie autour du texte tombait en ovale sur un mot court : refusée par Vie
   le 06/09. */
.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .1rem; height: 2px;
  background: var(--ton); transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--courbe);
}
.menu a:hover, .menu a[aria-current] { color: var(--neutre); }
.menu a:hover::after, .menu a[aria-current]::after { transform: scaleX(1); }
.menu a:hover i { transform: scale(1.5); }
/* Sur le beige, l'appel s'inverse : c'est lui qui porte le sombre. */
.menu .menu-appel {
  padding: .46rem 1.05rem; border-radius: 999px;
  background: var(--neutre); color: var(--beige-clair); font-weight: 600;
}
.menu .menu-appel::after { display: none; }
.menu .menu-appel:hover { background: var(--marron); color: var(--beige-clair); }

.burger { display: none; width: 2.6rem; height: 2.6rem; align-items: center; justify-content: center; }
.burger .traits { display: block; width: 1.4rem; }
.burger i { display: block; height: 2px; background: currentColor; margin: 4px 0;
  transition: transform 260ms var(--courbe), opacity 200ms; }
.barre.ouverte .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.barre.ouverte .burger i:nth-child(2) { opacity: 0; }
.barre.ouverte .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
  .burger { display: flex; }
  .menu {
    position: absolute; top: 100%; left: 0; right: 0; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--beige); padding: .6rem var(--marge) 1.3rem;
    box-shadow: 0 14px 26px color-mix(in srgb, var(--neutre) 14%, transparent);
  }
  .barre.ouverte .menu { display: flex; }
  .menu a { padding: .8rem 0; font-size: 1.06rem; }
  .menu a::after { bottom: .4rem; }
  .menu .menu-appel { margin-top: .7rem; align-self: flex-start; }
}

/* -------------------------------------------------------------------- le hero

   Quatre photos qui défilent, la nappe des cinq couleurs par-dessus, le titre
   et le bouton posés dessus. Plein cadre, bord à bord : le rectangle arrondi
   de l'ancien site est justement ce que Gabriel appelle un cadre. Le bas se
   dissout dans le papier de la page, pour que rien ne se referme. */

.hero {
  position: relative; isolation: isolate;
  min-height: calc(100svh - var(--barre-haut));
  display: grid; align-items: end;
  padding-block: clamp(2rem, 6vh, 4.5rem) clamp(3rem, 9vh, 6rem);
  overflow: clip;
}
.hero-photos { position: absolute; inset: 0; z-index: -2; background: var(--neutre); }
.hero-photos img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--place, 50% 45%);
  opacity: 0; transform: scale(1.05);
  transition: opacity 1500ms var(--courbe), transform 9000ms linear;
}
.hero-photos img.vue { opacity: 1; transform: scale(1); }

/* La nappe des cinq couleurs, une par photo, posée en image opaque et découpée
   par deux masques qui se croisent :

   1. la rampe de lecture, dans le repère du cadre : pleine à gauche où le
      titre se pose, éteinte à droite où la photo respire. C'est la rampe de la
      version d'août, redemandée par Vie le 07/09, un cran plus portante : la
      première photo montre un mur blanc là où celle d'août montrait une salle,
      et le titre y perdait son contraste (mesuré par `verif-hero`) ;
   2. la carte des visages de la photo (`/masques/`), au rapport de son fichier
      et posée avec le même `object-position` qu'elle. Le creux reste donc sur
      le visage quand le cadre change de forme, en 1440 px comme en 390 px.

   ⚠ Le masque de la photo se pose en `cover` : il ne suit son image que parce
   qu'il porte le même rapport qu'elle. Une photo remplacée demande donc son
   masque refait, par `V6-fonds.py`.
   ⚠ `mask-composite` s'écrit `intersect` en standard et `source-in` côté
   WebKit, les deux lignes sont nécessaires.
   ⚠ Tout ce qui touche au masque tient dans UNE seule règle par point de
   rupture. Redéclarer `mask-position` dans une seconde règle `.hero-nappe` a
   suffi, le 07/09, à faire disparaître la nappe entière sur téléphone.
   ⚠ La nappe vit DANS `.hero-photos`, qui porte déjà un `z-index` négatif :
   elle passe ainsi au-dessus des photos sans jamais monter sur le texte. */
.hero-nappe {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url(/fonds/hero.webp) center / cover no-repeat;
  opacity: 0; transition: opacity 1500ms var(--courbe);
  --rampe: linear-gradient(to right, #000 0%, #000 44%,
                           rgba(0,0,0,.84) 62%, rgba(0,0,0,.30) 82%,
                           transparent 95%);
  -webkit-mask-image: var(--rampe), var(--masque);
  mask-image: var(--rampe), var(--masque);
  -webkit-mask-size: 100% 100%, cover; mask-size: 100% 100%, cover;
  -webkit-mask-position: 0 0, var(--place, 50% 45%);
  mask-position: 0 0, var(--place, 50% 45%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.hero-nappe.vue { opacity: 1; }

/* Le côté renversé. La photo du potager tient Gabriel tout à gauche : la rampe
   se retourne, la couleur se pose à droite et le jardin garde sa largeur.
   La rampe vit sur la nappe elle-même, jamais sur une classe de la section :
   pendant le fondu de 1500 ms, les deux nappes gardent ainsi chacune la sienne.
   ⚠ Le renversement ne vaut que sur un cadre large. Le cadre debout pose le
   titre en bas et sa rampe est verticale ; cette règle-ci, plus spécifique,
   gagnait sur elle et laissait le titre sur le bord clair de la photo. */
@media (min-width: 861px) {
  .hero-nappe[data-cote="droite"] {
    --rampe: linear-gradient(to left, #000 0%, #000 44%,
                             rgba(0,0,0,.84) 62%, rgba(0,0,0,.30) 82%,
                             transparent 95%);
  }
}

/* Le cadre debout : le titre n'est plus dans une colonne de gauche mais posé
   en bas sur toute la largeur. La rampe se relève donc d'un quart de tour, et
   la nappe passe à sa version portrait : la même couronne, mais qu'un `cover`
   sur un cadre étroit ne rogne pas jusqu'à n'en montrer qu'une colonne. */
@media (max-width: 860px) {
  .hero-nappe {
    background-image: url(/fonds/hero-haut.webp);
    --rampe: linear-gradient(to top, #000 0%, #000 44%,
                             rgba(0,0,0,.72) 63%, rgba(0,0,0,.24) 79%,
                             transparent 95%);
    -webkit-mask-position: 0 0, var(--place-tel, var(--place, 50% 45%));
    mask-position: 0 0, var(--place-tel, var(--place, 50% 45%));
  }
  /* Le cadre debout ne garde qu'un tiers de la largeur de la photo : celles
     qui le demandent visent un autre point. La photo et sa nappe lisent la
     même variable, elles restent donc dans le même repère. */
  .hero-photos img { object-position: var(--place-tel, var(--place, 50% 45%)); }
}
.hero-texte { position: relative; max-width: min(100%, 760px); color: var(--beige-clair); }

/* Le texte glisse vers la droite pour la photo qui le demande. La marge se
   calcule sur la largeur du bloc, elle s'anime, et le cadre debout n'y touche
   pas : dessous 861 px le titre est déjà posé en bas sur toute la largeur. */
@media (min-width: 861px) {
  .hero-texte {
    margin-inline-start: 0;
    transition: margin-inline-start 1500ms var(--courbe);
  }
  .hero.a-droite .hero-texte { margin-inline-start: max(0px, 100% - 760px); text-align: right; }
  .hero.a-droite .hero-puces { right: auto; left: 0; }
}
.hero .sur {
  font-size: .82rem; letter-spacing: .17em; text-transform: uppercase;
  font-weight: 600; margin: 0 0 1.1rem; opacity: .92;
}
.hero h1 {
  font-size: clamp(2rem, 1rem + 2.6vw + .6vh, 4rem);
  letter-spacing: -.024em; margin-bottom: .7rem;
}
.hero .phrase { font-size: clamp(1.05rem, .5vw + .95rem, 1.3rem); margin-bottom: 1.9rem; }

.bouton {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .82rem 1.5rem; border-radius: 999px;
  background: var(--beige); color: var(--neutre);
  font-weight: 600; text-decoration: none;
  transition: transform 260ms var(--courbe), background 260ms;
}
.bouton:hover { transform: translateY(-2px); background: #fff; }
.bouton svg { width: .8rem; height: .8rem; }

.hero-puces { position: absolute; right: 0; bottom: -1.9rem; display: flex; gap: .5rem; }
.hero-puces button {
  width: 2.1rem; height: 3px; border-radius: 2px;
  background: color-mix(in srgb, var(--beige-clair) 42%, transparent);
  transition: background 260ms;
}
.hero-puces button[aria-current="true"] { background: var(--beige-clair); }

/* ---------------------------------------------------------------- les métiers

   « Quatre taches qui apparaissent, plus que des cadres. Je vois simplement
   des lignes en dessous sur lesquelles les gens peuvent cliquer et que ça
   renvoie ailleurs. » (vocal du 05/09)

   Une ligne par casquette, sa tache de couleur derrière le rang, et une
   racine qui part de la ligne vers la marge : ce sont les racines de son
   dessin, celles qui « peuvent évoluer et s'ouvrir vers d'autres cadres ». */

.metiers { padding-block: var(--respire) 0; }
.metiers-liste { display: grid; }
.metier {
  position: relative; display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: clamp(1rem, 3vw, 2.4rem);
  padding: clamp(1.1rem, 2.4vw, 1.9rem) 0;
  text-decoration: none; color: inherit;
  --ton: var(--neutre);
}
/* La tache d'une casquette. Elle est DESSINÉE, jamais interpolée : plusieurs
   contours fermés aux rayons tirés au sort, de tailles différentes, flous, qui
   se recouvrent, plus une ou deux gouttes détachées plus loin sur la ligne.
   Le tracé sort de V6-taches.py, une graine par casquette.

   ⚠ Un dégradé radial a été essayé le 06/09 et refusé par Vie : trop ovale,
   trop horizontal, trop prévisible. Et un seul SVG large pour toute la ligne
   oblige à choisir entre un contour écrasé en lentille et un cadrage qui
   coupe le flou : chaque masse a donc son carré à elle. */
.metier-nom {
  font-size: clamp(1.45rem, 1rem + 1.9vw, 2.65rem); font-weight: 700;
  letter-spacing: -.022em; line-height: 1.12;
}
.metier-nom small {
  display: block; font-size: .42em; font-weight: 400; letter-spacing: 0;
  color: var(--marron); margin-top: .35rem;
}
.metier-racine { width: clamp(3.5rem, 9vw, 7rem); color: var(--ton); flex: none; }
.metier-racine svg { width: 100%; height: auto; overflow: visible; }
.metier-racine path { fill: none; stroke: currentColor; stroke-linecap: round;
  stroke-dasharray: var(--long); stroke-dashoffset: calc(var(--long) * .58);
  opacity: .55;
  transition: stroke-dashoffset 900ms var(--souple), opacity 500ms var(--courbe); }
.metier:hover .metier-racine path, .metier:focus-visible .metier-racine path {
  stroke-dashoffset: 0; opacity: 1; }
/* La ligne qui sépare deux métiers est un dégradé qui s'éteint aux deux bouts :
   un filet net redessinerait des cases. */
.metier + .metier::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--marron) 30%, transparent) 18%,
              color-mix(in srgb, var(--marron) 30%, transparent) 76%, transparent);
}

/* ------------------------------------------------------------- les dimensions

   « Quatre taches de couleurs pour les quatre dimensions », et sous chacune
   l'arborescence qui s'ouvre. Les pigments translucides laissent apparaître
   le papier et son grain. Les encres sombres portent la lecture. */

/* Le papier chaud atténue les anciennes couleurs du fond global qui
   neutralisaient les pigments, surtout sur les bords des écrans étroits. */
.dimensions { position: relative; isolation: isolate; padding-block: var(--respire); }
.dimensions::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--beige); opacity: .94;
  -webkit-mask-image: linear-gradient(transparent, #000 7rem, #000 calc(100% - 7rem), transparent);
  mask-image: linear-gradient(transparent, #000 7rem, #000 calc(100% - 7rem), transparent);
}
.tete { max-width: var(--texte); margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.tete h2 { font-size: clamp(1.9rem, 1rem + 2.4vw, 3.3rem); letter-spacing: -.024em; }
.tete p { margin-top: .8rem; color: var(--marron); font-size: 1.06em; }

/* Un seul plan de couleur laisse les nappes se rejoindre sous le texte. */
.taches {
  position: relative; isolation: isolate; display: grid;
  gap: 0; margin-block: 3rem 2rem;
}
@media (min-width: 900px) {
  .taches { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.tache {
  position: relative; min-width: 0; color: var(--neutre);
  padding: clamp(3.5rem, 5vw, 5rem) clamp(1.5rem, 4.5vw, 4rem);
}
.tache::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -1.6rem -1.25rem;
  /* La couleur seule reçoit le flou ; le grain est posé sur le plan commun. */
  background: var(--pigment, #d778f4); opacity: .48;
  border-radius: 42% 35% 44% 32% / 32% 43% 36% 41%;
  filter: blur(40px);
}
.tache:nth-child(2) { --pigment: #2bdbc8; }
.tache:nth-child(3) { --pigment: #ff8740; }
.tache:nth-child(4) { --pigment: #ab86fa; }
.tache:nth-child(2)::before {
  border-radius: 38% 44% 32% 46% / 42% 34% 45% 32%;
}
.tache:nth-child(3)::before {
  border-radius: 35% 46% 38% 43% / 44% 31% 42% 34%;
}
.tache:nth-child(4)::before {
  border-radius: 45% 32% 43% 36% / 33% 45% 34% 42%;
}
@media (max-width: 899px) {
  .tache { padding-block: 4rem; }
  .tache::before { inset: -1.25rem -2.75rem; filter: blur(32px); }
}
/* Le grain reste net, posé une fois au-dessus de toutes les couleurs. */
.taches::after {
  content: ""; position: absolute; inset: -3rem calc(-1 * var(--marge));
  z-index: -1; pointer-events: none;
  background: url(/fonds/grain.png) repeat; background-size: 220px 220px;
  -webkit-mask-image: linear-gradient(transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}
.tache h3 { overflow-wrap: break-word; hyphens: auto; color: var(--axe-encre); font-size: clamp(1.5rem, 1rem + 1.5vw, 2.3rem); letter-spacing: -.022em; }
.tache .qui {
  display: inline-block; margin-top: .7rem; font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; opacity: .88;
}
.tache .phrase { margin-top: 1rem; max-width: 46ch; }

/* L'arborescence : la branche de son croquis, un trait qui descend et des
   ramilles qui en partent. */
.arbo { margin-top: 1.4rem; padding-left: 1.1rem; position: relative; }
.arbo::before {
  content: ""; position: absolute; left: 2px; top: .55em; bottom: .55em; width: 1.5px;
  background: color-mix(in srgb, var(--beige-clair) 52%, transparent);
}
.arbo > li { position: relative; list-style: none; padding: .32rem 0 .32rem .95rem; }
.arbo > li::before {
  content: ""; position: absolute; left: -2px; top: 1.02em; width: .8rem; height: 1.5px;
  background: color-mix(in srgb, var(--beige-clair) 52%, transparent);
}
.arbo .ramilles {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .3rem;
  font-size: .88em; opacity: .84;
}
.arbo .ramilles li { list-style: none; }
.arbo .ramilles li::before { content: "· "; }

.tache .attente {
  margin-top: 1.1rem; font-size: .88em; font-style: italic;
  opacity: 1; max-width: 46ch;
}
.tache .vers {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem;
  font-weight: 600; text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--beige-clair) 55%, transparent);
  padding-bottom: .16rem;
  transition: border-color 240ms, gap 240ms var(--courbe);
}
.tache .vers:hover { border-color: currentColor; gap: .85rem; }
.tache .vers { color: var(--axe-encre); border-color: color-mix(in srgb, currentColor 45%, transparent); }
.tache .ouvrir { color: var(--axe-encre); }
.tache .arbo::before, .tache .arbo > li::before {
  background: color-mix(in srgb, var(--axe-encre) 40%, transparent);
}

/* Le bouton qui déplie une arborescence : un mot, une flèche, rien autour. */
.ouvrir {
  display: flex; align-items: center; gap: .5rem; margin-top: 1.2rem;
  font-weight: 600; font-size: .95rem; text-align: left;
}
.tache .vers { display: flex; width: fit-content; }
.ouvrir svg { width: .7rem; height: .7rem; transition: transform 300ms var(--courbe); }
.ouvrir[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ------------------------------------------------------------------- l'arbre

   Le moteur de la version 3, celle que Gabriel a retenue au vocal du 06/09
   (« sur les autres designs, celui qui m'avait marqué, c'était l'arbre »).
   Neuf entrées, celles de son croquis : quatre au bout des branches, cinq au
   bout des racines. Chacune ouvre son tiroir sous le dessin. */

.arbre { position: relative; padding-block: var(--respire) 0; }
/* ⚠ `100svh` est la hauteur « barre d'adresse déployée ». Certains navigateurs
   mobiles la font varier au défilement : le script fige donc la valeur mesurée
   au chargement dans `--haut-arbre`, sur écran étroit seulement. */
.arbre-scene {
  position: relative; overflow: hidden;
  height: var(--haut-arbre, min(88svh, 880px)); min-height: 540px;
}
.arbre-scene canvas, .arbre-scene svg {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.arbre-scene .nappe { z-index: 0; }
.arbre-scene .trait { z-index: 2; }
.arbre-scene .mots  { z-index: 3; overflow: visible; }
.arbre-scene .mots text { font-family: Platypi, Georgia, serif; letter-spacing: -.01em; }
.arbre-scene .mots a { cursor: pointer; }
.arbre-scene .mots a:hover text { text-decoration: underline; text-underline-offset: .3em; }
.arbre-scene .mots .famille { transition: opacity .45s ease; }
.arbre-scene .mots.cible .famille { opacity: .16; }
.arbre-scene .mots.cible .famille.actif { opacity: 1; }
.arbre-scene .mots .tige { stroke-linecap: round; }

/* Le logo de Krishan pris dans les racines, à la place de la photo (demande de
   Vie du 09/09). Il est posé nu sur le papier, les racines le contournent :
   son tracé est fait pour un fond clair, aucun masque, aucun disque. Il
   appartient à l'arbre entier, donc il reste allumé quand une colonne est visée. */
.motte {
  position: absolute; z-index: 1; margin: 0;
  opacity: 0; transform: scale(.94);
  transition: opacity 1.4s ease 1.1s, transform 1.9s cubic-bezier(.25,.7,.35,1) 1.1s;
}
.motte img { width: 100%; height: 100%; object-fit: contain; }
.arbre-scene.vivant .motte { opacity: 1; transform: none; }

/* ⚠ Le titre ne porte aucun lien : laissé actif, il happerait le survol des
   mots qui passent dessous. Son dégagement dans le dessin est creusé par le
   script (`creuser()` dans arbre.js) : le trait s'efface en douceur autour du
   texte et laisse voir le papier, sa couleur et son grain. Depuis le 09/09, plus
   aucun halo de beige posé par-dessus. */
/* L'intro est la sœur de la scène, pas sa fille : sur grand écran elle se pose
   dessus, en haut à gauche ; sur téléphone elle reprend sa place dans le flux,
   au-dessus du dessin, qui garde alors toute sa hauteur (un paragraphe posé sur
   la scène y mangeait un tiers de l'arbre). */
.arbre-cadre { position: relative; }
.arbre .intro {
  position: absolute; left: 2%; top: clamp(1.4rem, 4vh, 3rem);
  width: min(28rem, 34vw); z-index: 4; pointer-events: none;
  color: var(--violet-nuit);
}
.arbre .intro h2 { font-size: clamp(1.9rem, 1rem + 2.4vw, 3.3rem); letter-spacing: -.024em; color: inherit; }
.arbre .intro p { margin-top: .8rem; color: inherit; font-size: .95rem; line-height: 1.5; }
.arbre .intro .mode { font-size: .86rem; opacity: .82; }
@media (max-width: 860px) {
  /* ses dernières lignes descendent dans la bande vide que le houppier laisse
     en haut de la scène, là où le titre seul se posait avant le 09/09 */
  .arbre .intro { position: relative; width: min(40rem, 100%); margin-bottom: -2.5rem; }
  .arbre .intro p { font-size: .9rem; margin-top: .6rem; }
  .arbre .intro .mode { display: none; }
}

/* Les cinq signes de sa charte, posés sur le fût comme sur son croquis du
   05/09 : quatre en carré serré, le cinquième plus petit au centre, devant.
   Placés par le script sur la géométrie réelle du tronc, chacun sur le quart de
   fût dont la couleur lui ressemble. Leur dégagement (l'anneau autour du disque,
   le cartouche du mot) est creusé dans le trait par le script, jamais posé en
   beige par-dessus. */
.signes-tronc { position: absolute; z-index: 2; pointer-events: none; }
.signes-tronc i {
  position: absolute; left: var(--x); top: var(--y); width: var(--d); height: var(--d);
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--ton);
  display: grid; place-items: center;
}
.signes-tronc i img { width: 68%; height: 68%; object-fit: contain; }
.signes-tronc b {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  font-size: clamp(.86rem, .3vw + .78rem, 1.06rem); font-weight: 700;
  letter-spacing: -.01em; color: var(--diamant-encre); white-space: nowrap;
  padding: .2rem .55rem;
}

/* Les neuf entrées sous le dessin (12/09, demande de Vie : « qu'on comprenne
   que ce sont des boutons »). Quatre colonnes qui répondent aux quatre
   colonnes de l'arbre : le mot de la branche en tête, ses racines dessous.
   Chaque mot porte la couleur que le moteur lui donne dans le dessin, se pose
   sur un aplat pâle de sa couleur (une tache, jamais un cadre), avec trois
   feuilles qui dépassent derrière un mot de branche et un filet de racine
   qui pend sous un mot de racine. L'aplat se fonce au survol et reste foncé
   sur l'entrée ouverte. La liste sert aussi de secours quand le script ne
   tourne pas, et de barre de retour une fois un tiroir ouvert. */
.entrees {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem clamp(.6rem, 2vw, 1.6rem); margin-top: 1.8rem; font-size: .93rem;
}
.entrees .colonne { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.entrees a {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .55rem;
  min-height: 44px; max-width: 100%; padding: .4rem 1.1rem .4rem .8rem;
  text-decoration: none; line-height: 1.2; --part: 11%;
  transition: color 260ms;
}
/* l'aplat : le beige clair teinté de la couleur de la colonne en OkLab (un
   turquoise translucide sur le champ rose tournait au gris), le grain du
   papier par-dessus pour qu'il reste du papier. Le champ de la page est violet
   à gauche et orange à droite, chaque colonne se pose sur sa propre teinte :
   au repos l'aplat est plus clair que le champ, il se fonce au survol et sur
   l'entrée ouverte. */
.entrees a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px;
  background: url(/fonds/grain.png) 0 0 / 220px 220px,
    color-mix(in oklab, var(--axe) var(--part), var(--beige-clair));
  transition: background-color 260ms;
}
.entrees .branche { font-weight: 600; color: var(--mot-branche); }
.entrees .racine { color: var(--mot-racine); margin-left: .9rem; }
/* la touffe de feuilles ou le filet de racine, en tête du mot, dans le bouton */
.entrees svg { flex: none; width: 1.55rem; height: 1.25rem; pointer-events: none;
  transition: transform 460ms var(--courbe); }
.entrees .feuilles { fill: var(--axe); transform-origin: 50% 100%; }
.entrees .filet { color: var(--mot-racine); transform-origin: 50% 0; }
.entrees a:hover, .entrees a:focus-visible { --part: 24%; color: var(--axe-encre); }
.entrees a:hover .feuilles { transform: rotate(-8deg) scale(1.08); }
.entrees a:hover .filet { transform: scaleY(1.1); }
.entrees a[aria-current="true"] { --part: 40%; color: var(--axe-encre); }
.entrees a:focus-visible { outline: 2px solid var(--axe); outline-offset: 3px; }
.entrees a span { text-wrap: balance; }
/* Téléphone : deux colonnes, boutons pleine largeur. À 13 px, « Qui
   j'accompagne ? » tient sur une ligne dès 390 px de large ; à 360 px il se
   coupe en deux lignes équilibrées, comme les deux autres mots longs. */
@media (max-width: 720px) {
  .entrees { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem .5rem; font-size: 13px; }
  .entrees a { width: 100%; gap: .4rem; padding: .35rem .5rem; }
  .entrees svg { width: 1.25rem; height: 1rem; }
  .entrees .racine { margin-left: .45rem; width: calc(100% - .45rem); }
}
@media (prefers-reduced-motion: reduce) {
  .entrees a, .entrees svg { transition: none; }
}

.tiroirs { padding-block: clamp(2rem, 4vw, 3.4rem) var(--respire); }
.tiroir { display: grid; gap: clamp(1rem, 2.5vw, 2rem); }
.tiroir > h3 {
  font-size: clamp(1.6rem, 1rem + 1.7vw, 2.5rem); letter-spacing: -.024em;
  color: var(--axe-encre);
}
.duo { display: grid; gap: 1.2rem clamp(1.6rem, 3.4vw, 3.2rem); }
@media (min-width: 800px) { .duo { grid-template-columns: 1fr 1fr; } }
.tiroir-corps { max-width: 62ch; }
.tiroir .attente { font-style: italic; color: var(--marron); max-width: 60ch; }

.vers-sombre { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600;
  text-decoration: none; border-bottom: 2px solid color-mix(in srgb, var(--axe) 55%, transparent);
  padding-bottom: .14rem; transition: border-color 240ms, gap 240ms var(--courbe); }
.vers-sombre:hover { border-color: var(--axe); gap: .85rem; }
.arbo.sombre { color: inherit; }
.arbo.sombre::before, .arbo.sombre > li::before {
  background: color-mix(in srgb, var(--marron) 42%, transparent); }
.arbo.sombre b a { text-decoration: none; border-bottom: 2px solid color-mix(in srgb, var(--axe) 50%, transparent); }
.arbo.sombre b a:hover { border-color: var(--axe); }

.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.4rem; }
.chiffres li { list-style: none; }
.chiffres b { display: block; font-size: clamp(1.4rem, 1vw + 1.1rem, 2rem); color: var(--marron); }
.chiffres span { font-size: .88rem; color: var(--marron); }

.puces { padding-left: 1.1rem; }
.puces li { margin-bottom: .4rem; }

/* Les listes de la maquette : articles, vidéos, toiles. Trois grilles, aucune
   carte : le titre, sa date, et la ligne de couleur qui apparaît au survol. */
.liste-simple { display: grid; gap: 1.4rem 2.4rem; }
@media (min-width: 700px) { .liste-simple { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.liste-simple li { list-style: none; }
.liste-simple a { text-decoration: none; display: block; }
.liste-simple .date { display: block; font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--marron); }
.liste-simple .titre { display: block; font-weight: 700; margin-top: .3rem; line-height: 1.24; }
.liste-simple a:hover .titre { text-decoration: underline; text-underline-offset: .22em; }
.liste-simple .duree { display: block; font-size: .84rem; color: var(--marron); margin-top: .2rem; }

/* Les vidéos portent leur vraie vignette, avec le signe de lecture posé dessus.
   Le rapport 16/9 est tenu par la boîte : les vignettes de YouTube arrivent en
   4/3 quand la vidéo n'a jamais été publiée en HD, et se recadrent ici. */
.liste-simple.avec-vues { gap: 1.8rem 2.4rem; }
.bloc .corps + .liste-simple, .tiroir-corps + .liste-simple { margin-top: 1.4rem; }
.liste-simple .vue-video {
  position: relative; display: block; margin-bottom: .6rem;
  border-radius: 6px; overflow: hidden; background: var(--neutre);
  aspect-ratio: 16 / 9;
}
.liste-simple .vue-video img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 520ms var(--courbe);
}
.liste-simple .jouer {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem;
  border-radius: 50%; background: var(--beige); color: var(--neutre);
  transition: transform 260ms var(--courbe), background 260ms;
}
.liste-simple .jouer svg { width: 1.1rem; height: 1.1rem; }
.liste-simple a:hover .vue-video img { transform: scale(1.04); }
.liste-simple a:hover .jouer { transform: translate(-50%, -50%) scale(1.1); background: #fff; }

.vignettes { display: grid; gap: 1.2rem; }
@media (min-width: 700px) { .vignettes { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }
.vignettes figure { margin: 0; }
.vignettes img { width: 100%; height: auto; border-radius: 4px; }
.vignettes figcaption { margin-top: .45rem; font-size: .88rem; color: var(--marron); }

/* --------------------------------------------------------------- se rencontrer

   La bande de couleur du bas, la nappe retournée. Les champs sont des lignes,
   jamais des boîtes : c'est le dernier endroit où des cadres restaient. */

.rencontre {
  position: relative; isolation: isolate; color: var(--beige-clair);
  padding-block: var(--respire);
}
.rencontre::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url(/fonds/rencontre.webp) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.rencontre h2 { font-size: clamp(1.9rem, 1rem + 2.4vw, 3.3rem); letter-spacing: -.024em; }
.rencontre .chapo { margin-top: .8rem; max-width: 52ch; }
.rencontre-grille { display: grid; gap: clamp(2rem, 5vw, 4rem); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) { .rencontre-grille { grid-template-columns: 1.15fr .85fr; } }

.champs { display: grid; gap: 1.5rem 2rem; }
@media (min-width: 620px) { .champs { grid-template-columns: 1fr 1fr; } }
.champ { display: grid; gap: .3rem; }
.champ.large { grid-column: 1 / -1; }
.champs .bouton { justify-self: start; }
.champ label { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.champ input, .champ select, .champ textarea {
  font: inherit; color: inherit; background: none;
  border: 0; border-bottom: 2px solid color-mix(in srgb, var(--beige-clair) 46%, transparent);
  padding: .5rem 0; border-radius: 0;
  transition: border-color 240ms;
}
.champ textarea { resize: vertical; min-height: 5.5rem; }
.champ select option { color: var(--neutre); }
.champ :is(input, select, textarea):focus { outline: none; border-color: var(--beige-clair); }

.coordonnees { display: grid; gap: 1.1rem; align-content: start; }
.coordonnees a { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.coordonnees a span { border-bottom: 1.5px solid transparent; transition: border-color 240ms; }
.coordonnees a:hover span { border-color: currentColor; }
.coordonnees svg { width: 1.15rem; height: 1.15rem; flex: none; opacity: .9; }

/* --------------------------------------------------------------- le bas de page

   « Mon portrait sur fond blanc, avec mes couleurs en patchwork, comme dans la
   toute première version du site. » (message du 05/09) */

.pied { background: #fff; color: var(--neutre); padding-top: clamp(3rem, 6vw, 5rem); }
.pied-haut { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 820px) { .pied-haut { grid-template-columns: minmax(0, 20rem) 1fr; } }
.pied-portrait {
  width: 100%; max-width: 20rem; height: auto;
  /* la source est coupée à plat sous la taille : le dégradé l'éteint au lieu
     de laisser une arête */
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent);
  mask-image: linear-gradient(to bottom, #000 84%, transparent);
}
.pied-mot { max-width: 40ch; }
.pied-mot p { font-size: clamp(1.1rem, .6vw + 1rem, 1.5rem); line-height: 1.3; font-weight: 700;
  letter-spacing: -.018em; }
.pied-mot .sous { margin-top: .8rem; font-size: 1rem; font-weight: 400; color: var(--marron); }

.patchwork { display: flex; height: clamp(2.4rem, 5vw, 4rem); margin-top: clamp(2rem, 4vw, 3rem); }
.patchwork i { flex: 1; background: var(--ton); }
.patchwork i:nth-child(2) { flex: 1.6; }
.patchwork i:nth-child(4) { flex: .7; }

.pied-bas {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between;
  padding-block: 1.2rem 1.6rem; font-size: .88rem; color: var(--marron);
}
.pied-bas a { text-decoration: none; border-bottom: 1.5px solid transparent; }
.pied-bas a:hover { border-color: currentColor; }

/* ------------------------------------------------------- les pages d'univers */

/* Les nappes suivent la longueur des récits et se fondent entre les sections. */
.page-univers {
  --pigment: 177, 64, 197;
  --nuance: 221, 145, 231;
  --lumiere: 247, 217, 250;
  background-image: url(/fonds/grain.png);
  background-size: 220px 220px;
  background-repeat: repeat;
}
.univers-permaculture {
  --pigment: 16, 163, 164;
  --nuance: 97, 209, 201;
  --lumiere: 202, 242, 231;
}
.univers-clarte {
  --pigment: 242, 103, 37;
  --nuance: 255, 166, 105;
  --lumiere: 255, 226, 195;
}
.univers-coaching {
  --pigment: 119, 81, 221;
  --nuance: 173, 148, 240;
  --lumiere: 226, 217, 255;
}
.page-univers main { position: relative; isolation: isolate; }
.page-univers :is(.univers-hero, .bloc) { position: relative; }
.page-univers :is(.univers-hero, .bloc)::before {
  content: ""; position: absolute; z-index: -2; pointer-events: none;
  inset: -5rem 0;
  -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
  background:
    radial-gradient(ellipse 48% 42% at 93% 48%, rgba(var(--pigment), .58), rgba(var(--pigment), .25) 43%, rgba(var(--pigment), 0) 100%),
    radial-gradient(ellipse 66% 45% at 55% 64%, rgba(var(--nuance), .46), rgba(var(--nuance), 0) 100%),
    radial-gradient(ellipse 44% 40% at 13% 36%, rgba(var(--lumiere), .65), rgba(var(--lumiere), 0) 100%);
}
.page-univers .bloc:nth-of-type(3n)::before {
  background:
    radial-gradient(ellipse 56% 44% at 3% 48%, rgba(var(--pigment), .48), rgba(var(--pigment), .16) 48%, rgba(var(--pigment), 0) 100%),
    radial-gradient(ellipse 68% 43% at 43% 61%, rgba(var(--nuance), .48), rgba(var(--nuance), 0) 100%),
    radial-gradient(ellipse 39% 40% at 92% 35%, rgba(var(--lumiere), .7), rgba(var(--lumiere), 0) 100%);
}
.page-univers .bloc:nth-of-type(3n + 1)::before {
  background:
    radial-gradient(ellipse 65% 42% at 72% 52%, rgba(var(--nuance), .52), rgba(var(--nuance), 0) 100%),
    radial-gradient(ellipse 54% 42% at 20% 42%, rgba(var(--lumiere), .76), rgba(var(--lumiere), 0) 100%);
}
.page-univers .univers-hero::before {
  inset: -3rem 0 -6rem;
  background:
    radial-gradient(ellipse 47% 44% at 3% 33%, rgba(var(--pigment), .48), rgba(var(--pigment), 0) 100%),
    radial-gradient(ellipse 67% 48% at 30% 62%, rgba(var(--nuance), .60), rgba(var(--nuance), 0) 100%),
    radial-gradient(ellipse 45% 44% at 63% 40%, rgba(var(--lumiere), .72), rgba(var(--lumiere), 0) 100%);
}
/* Une nappe reste liée au récit pendant la révélation de son texte. */
.page-univers .bloc { isolation: isolate; }
@media (max-width: 760px) {
  .page-univers :is(.univers-hero, .bloc)::before {
    inset-inline: -35%;
    inset-block: -3rem;
  }
  .page-univers .univers-hero::before { top: 10rem; bottom: -4rem; }
}

.univers-hero {
  position: relative; isolation: isolate; color: var(--axe-encre);
  display: grid; align-items: center; min-height: clamp(30rem, 43vw, 39rem);
  padding-block: 3rem 4rem;
}
.univers-hero img {
  position: absolute; inset: 0 0 0 auto; z-index: -1;
  width: 53%; height: 100%; object-fit: cover; object-position: var(--cadrage);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16%),
    linear-gradient(to bottom, #000 76%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 16%),
    linear-gradient(to bottom, #000 76%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* La photo de groupe conserve toute sa largeur. */
.univers-clarte .univers-hero img {
  top: 50%; height: auto; transform: translateY(-50%);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%),
    linear-gradient(to bottom, transparent, #000 12%, #000 80%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%),
    linear-gradient(to bottom, transparent, #000 12%, #000 80%, transparent);
}
.univers-hero h1 {
  font-size: clamp(2rem, 1rem + 2.8vw, 3.8rem); letter-spacing: -.026em;
  max-width: 46%; text-wrap: balance; overflow-wrap: break-word;
}
.univers-hero .phrase { margin-top: 1.3rem; max-width: 43%; font-size: 1.1em; color: var(--neutre); }
@media (max-width: 760px) {
  .univers-hero { display: block; min-height: 0; padding-block: 0 2rem; }
  .univers-hero img {
    position: relative; width: 100%; height: clamp(16rem, 76vw, 25rem);
    object-position: var(--cadrage-mobile);
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
    mask-image: linear-gradient(to bottom, #000 80%, transparent);
  }
  .univers-clarte .univers-hero img {
    top: auto; height: auto; transform: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
    mask-image: linear-gradient(to bottom, #000 80%, transparent);
  }
  /* Le sur-titre retiré le 09/09 laissait le titre collé au bas de la photo,
     que son masque dissout déjà : le bloc reprend de l'air. */
  .univers-hero .dedans { margin-top: 1.5rem; }
  .univers-hero :is(h1, .phrase) { max-width: 100%; }
  .univers-hero h1 { font-size: clamp(1.85rem, 6.4vw, 2.7rem); text-wrap: balance; }
  .univers-hero .phrase { margin-top: 1rem; }
}

.bloc { padding-block: clamp(2.4rem, 5vw, 4.2rem); }
.bloc h2 { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem); letter-spacing: -.022em;
  color: var(--axe-encre); margin-bottom: 1.1rem; }
.bloc .fort { font-size: clamp(1.15rem, .6vw + 1rem, 1.5rem); font-weight: 700;
  line-height: 1.28; letter-spacing: -.018em; margin-bottom: 1rem; max-width: 34ch; }
.bloc .corps { max-width: var(--texte); }
.bloc .note { margin-top: 1rem; font-size: .88em; font-style: italic; color: var(--marron); }

.trois { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); margin-top: 1.4rem; }
@media (min-width: 780px) { .trois { grid-template-columns: repeat(3, 1fr); } }
.trois .rang { font-size: .8rem; font-weight: 600; letter-spacing: .12em; color: var(--axe-encre); }
.trois h3 { font-size: 1.22rem; margin: .35rem 0 .55rem; }

.galerie { display: grid; gap: 1rem; }
@media (min-width: 700px) { .galerie { grid-template-columns: repeat(3, 1fr); } }
.galerie img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; border-radius: 4px; }

/* Les images suivent leur récit ; les formats gardent leur photo à proximité. */
.bloc-illustre > .dedans { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.photo-recit img { width: 100%; height: auto; border-radius: 4px; }
@media (min-width: 900px) {
  .bloc-illustre > .dedans { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .bloc-illustre .trois { grid-template-columns: 1fr; gap: 1.4rem; }
}
.formes-illustrees { gap: clamp(2.4rem, 4vw, 4rem); }
.formes-illustrees .forme { min-width: 0; }
.formes-illustrees .photo-recit { margin-bottom: 1.4rem; }
.formes-illustrees .photo-recit img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 780px) {
  .formes-illustrees .forme:nth-child(2) { padding-top: 3rem; }
}
@media (min-width: 700px) {
  .galerie-duo { grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); }
  .galerie-duo img { height: auto; }
  .galerie-duo img:nth-child(2) { margin-top: 3rem; }
}
.page-univers .liste-simple { padding-left: 0; }
.video-seule { max-width: 48rem; }
.videos-vedette { grid-template-columns: 1fr; }
.videos-vedette > li + li > a {
  display: grid; grid-template-columns: clamp(6.5rem, 23vw, 10rem) minmax(0, 1fr);
  column-gap: 1rem; align-content: start;
}
.videos-vedette > li + li .vue-video { grid-row: 1 / 4; margin-bottom: 0; }
.videos-vedette > li + li .titre { margin-top: 0; font-size: .96rem; }
.videos-vedette > li + li .date { display: none; }
.videos-vedette > li + li .duree { grid-column: 2; }
.videos-vedette > li + li .jouer { width: 2rem; height: 2rem; }
@media (min-width: 1000px) {
  .videos-vedette { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .videos-vedette > li:first-child { grid-row: 1 / 4; }
}

/* Les voix : des témoignages qui se lisent comme tels, sans cadre. Chaque
   parole s'ouvre sur un grand guillemet dans la couleur de l'univers, se pose
   en italique léger et plus grand que le corps, et se signe : le nom en
   petites capitales espacées, le métier en dessous dans le brun. Plusieurs
   voix se rangent côte à côte sur un écran large, l'une sous l'autre sur un
   téléphone. */
.voix { display: grid; gap: clamp(2.2rem, 4vw, 3.4rem) clamp(2rem, 4vw, 3.6rem); margin-top: 1.4rem; }
.corps + .voix { margin-top: 1.8rem; }
@media (min-width: 860px) {
  .voix-2, .voix-3 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); align-items: start; }
}
.citation { position: relative; margin: 0; max-width: 46ch; padding-top: 2.6rem; }
.voix-1 .citation { max-width: 56ch; }
.citation::before {
  content: "\201C"; position: absolute; left: -.04em; top: -.08em;
  font-size: 5.4rem; line-height: 1; font-weight: 700; color: var(--axe);
  opacity: .82; pointer-events: none;
}
.citation p {
  font-style: italic; font-weight: 300;
  font-size: clamp(1.14rem, 1rem + .55vw, 1.36rem); line-height: 1.42;
  text-wrap: pretty; hanging-punctuation: first;
}
.citation .qui-dit { margin-top: 1.1rem; font-style: normal; padding-left: 1.6rem; position: relative; }
.citation .qui-dit::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 1rem; height: 2px;
  background: var(--axe); opacity: .82;
}
.citation .nom {
  display: block; font-size: .8rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--neutre);
}
.citation .role { display: block; margin-top: .25rem; font-size: .92rem; color: var(--marron); }

/* l'attente : ce que Gabriel doit encore écrire, dit à sa place dans la page */
.bloc.est-attente { color: var(--marron); }
.bloc.est-attente .corps { font-style: italic; }
.bloc.est-attente h2 { color: var(--marron); }

.retour-accueil { padding-block: clamp(2rem, 4vw, 3rem); }
.retour-accueil a { display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none; font-weight: 600; }

/* ------------------------------------------------------------------ les vues

   Rien n'apparaît par saut. Sans script, tout est déjà là. */

.js .parait { opacity: 0; transform: translateY(18px); }
.js .parait.vu { opacity: 1; transform: none;
  transition: opacity 900ms var(--souple), transform 900ms var(--souple); }
@media (prefers-reduced-motion: reduce) {
  .js .parait { opacity: 1; transform: none; }
  .hero-photos img { transition: opacity 200ms; transform: none; }
  .hero-nappe { transition: opacity 200ms; }
}


/* Le grain commun couvre la couleur une seule fois, sous les photos et le texte. */
.page-univers main { background-color: var(--beige); }
.page-univers main::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: url(/fonds/grain.png) repeat 0 0 / 220px 220px;
}
.page-univers :is(.univers-hero, .bloc) { isolation: auto; }
.page-univers .univers-hero img { z-index: 0; }
.page-univers .univers-hero .dedans { position: relative; z-index: 1; }
/* La révélation porte sur le contenu, le papier reste continu. */
.js .page-univers .bloc.parait { opacity: 1; transform: none; transition: none; }
.js .page-univers .bloc.parait > .dedans { opacity: 0; transform: translateY(18px); }
.js .page-univers .bloc.parait.vu > .dedans {
  opacity: 1; transform: none;
  transition: opacity 900ms var(--souple), transform 900ms var(--souple);
}
@media (prefers-reduced-motion: reduce) {
  .js .page-univers .bloc.parait > .dedans { opacity: 1; transform: none; transition: none; }
}


/* Les trois gestes reprennent les traits originaux de Gabriel. */
.trois-manieres { gap: clamp(2.5rem, 4vw, 4rem); margin-top: 2rem; }
.trois-manieres .forme { min-width: 0; }
.signe-maniere {
  display: block; width: 6rem; height: 6rem; margin-bottom: 1.6rem;
  background: var(--axe);
  -webkit-mask: var(--signe) center / contain no-repeat;
  mask: var(--signe) center / contain no-repeat;
}
.trois-manieres h3 { font-size: clamp(1.4rem, 1.6vw, 1.7rem); color: var(--axe-encre); margin: 0 0 .9rem; }
@media (max-width: 779px) {
  .trois-manieres { gap: 2.8rem; }
  .trois-manieres .forme { display: grid; grid-template-columns: 3.8rem minmax(0, 1fr); gap: .9rem 1rem; align-items: center; }
  .trois-manieres .forme > div { display: contents; }
  .signe-maniere { width: 3.8rem; height: 3.8rem; margin: 0; }
  .trois-manieres h3 { margin: 0; }
  .trois-manieres .forme p { grid-column: 1 / -1; }
}

/* La médiation, sous les quatre univers (texte de Gabriel du 12/09/2026) :
   une cinquième tache, large comme les deux colonnes, l'intro visible et le
   reste derrière le même bouton que les arborescences. */
.tache-large { grid-column: 1 / -1; }
.tache-large::before { border-radius: 40% 44% 36% 46% / 46% 34% 44% 38%; }
.tache-large .phrase { max-width: 62ch; }
.mediation-corps { margin-top: 1.4rem; max-width: none; }
.mediation-corps p, .mediation-corps li { break-inside: avoid; }
.mediation-corps .mediation-p p + p, .mediation-corps .mediation-q,
.mediation-corps .mediation-p + .mediation-p { margin-top: .9rem; }
.mediation-corps .puces { margin-top: .5rem; }
.mediation-corps .puces li { margin-bottom: .35rem; }
@media (min-width: 900px) {
  .mediation-corps { columns: 2; column-gap: clamp(2.4rem, 4vw, 4.5rem); }
}

/* Les toiles qui défilent à côté d'un texte (page Portails) : un clic arrête,
   un autre relance. Sans script, la première toile reste posée. */
.defile { margin: 0; }
.defile-cadre {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.defile-toiles { position: relative; display: block; aspect-ratio: 3 / 4; }
.defile-toiles img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center; border-radius: 4px;
  opacity: 0; transition: opacity 900ms var(--courbe);
}
.defile-toiles img.vue { opacity: 1; }
.defile-legende {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-top: .6rem; font-size: .88rem; color: var(--marron);
}
.defile-etat { font-weight: 600; color: var(--axe-encre); }
html:not(.js) .defile-cadre { cursor: default; }
html:not(.js) .defile-etat { display: none; }
@media (prefers-reduced-motion: reduce) {
  .defile-toiles img { transition: none; }
}
/* Sur ordinateur, la toile tient entière dans l'écran, sous la barre, avec sa
   légende : elle se réduit plutôt que de déborder en haut et en bas. */
@media (min-width: 900px) {
  .bloc-defile .defile {
    width: 100%;
    max-width: calc((100svh - var(--barre-haut) - 7rem) * 3 / 4);
    margin-inline: auto;
  }
}