/* Watercolor Horizon : la feuille du site, ecrite pour lui (aucune regle reprise d'un autre site).
   Depuis le 10/10/2026 (Raphael) : un rendu moderne et tres visuel. Fond blanc, encre presque noire, un seul bleu
   (celui du pigment de la banniere), une seule police sans empattement, de tres grands titres serres, de grandes
   peintures, des coins arrondis (jamais de forme entierement ronde), des mouvements lents. Trois surfaces
   sombres, du meme noir : la banniere de l'accueil, le pied de page et la visionneuse.
   Pensee pour quatre-vingts membres et plus : rien, dans cette feuille, ne depend de leur nombre. Une seule rangee
   se fait defiler, la frise des peintures d'un membre ; les peintures des pages generales sont sur « le mur ».
   Le telephone d'abord : les regles sans @media sont celles du telephone, les ecrans plus larges ajoutent les leurs.
   Police : Geist (SIL Open Font License), servie depuis assets/fonts/. */

@font-face { font-family: "Geist"; src: url("fonts/geist-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: "Geist"; src: url("fonts/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- la palette et les mesures ----------
   Contrastes mesures (WCAG) : encre sur blanc 19.4:1, sur brume 17.5 ; gris sur blanc 6.7, sur brume 6.1, sur brume
   appuyee 5.5 ; bleu sur blanc 6.4. Sur le fond sombre (banniere, pied de page, visionneuse) : blanc 20.4, blanc a
   84 % 14.2, a 70 % 9.8. Aucun texte ne descend sous 4.5:1. */
:root {
  --blanc: #FFFFFF;
  /* les surfaces douces : boutons secondaires, encarts ; et leur version appuyee (survol) */
  --brume: #F2F3F5;
  --brume-2: #E6E8EC;
  /* le fond des surfaces sombres (banniere de l'accueil, pied de page, visionneuse) : le noir de la photo du
     pigment, mesure sur ses bords. Les images assets/img/pigment-*.webp se fondent vers cette couleur exacte : la
     changer, c'est les refaire. */
  --nuit: #01050B;
  --encre: #0B0D12;
  --encre-2: #272B36;
  --gris: #565C68;
  /* le bleu du pigment de la banniere, releve sur la photo */
  --bleu: #1359C8;
  --trait: rgba(11, 13, 18, 0.12);
  --ombre: 0 1px 2px rgba(11, 13, 18, 0.08), 0 18px 36px -18px rgba(11, 13, 18, 0.3);
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* le retrait des grandes boites arrondies (banniere, pied) par rapport au bord de l'ecran, et celui du texte */
  --marge: clamp(10px, 1.4vw, 20px);
  --bord: clamp(20px, 5vw, 64px);
  --max: 1360px;
  /* les arrondis : petits elements, cartes et encarts, grandes boites */
  --r1: 8px;
  --r2: 14px;
  --r3: clamp(18px, 2.4vw, 28px);
  --doux: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* le site est clair (la banniere, le pied de page et la visionneuse sont sombres par leurs propres regles) : le
     navigateur n'assombrit ni les champs ni la page */
  color-scheme: light;
  color-scheme: only light;
}

/* ---------- la base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 76px; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: -0.006em;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; }
/* un element cache le reste, quel que soit son affichage */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }

.wh-cadre {
  width: 100%;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bord);
  padding-right: var(--bord);
}
.wh-section { padding-top: clamp(64px, 10vw, 144px); }
.wh-section-titre { margin-bottom: clamp(32px, 6vw, 80px); }
/* lu par les lecteurs d'ecran, absent de l'ecran */
.wh-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- les textes ----------
   Une seule police, en trois tailles de titres : tres grands, serres, sur peu de lignes. */
.wh-t1, .wh-t2, .wh-t3 { font-weight: 500; text-wrap: balance; }
.wh-t1 { font-size: clamp(2.75rem, calc(1.15rem + 7vw), 7rem); line-height: 0.98; letter-spacing: -0.045em; }
.wh-t2 { font-size: clamp(2rem, calc(1.2rem + 3.6vw), 4.25rem); line-height: 1.02; letter-spacing: -0.04em; }
.wh-t3 { font-size: clamp(1.5rem, calc(1.2rem + 1.3vw), 2.25rem); line-height: 1.1; letter-spacing: -0.03em; }
.wh-chapo { max-width: 34em; font-size: clamp(1.0625rem, calc(1rem + 0.4vw), 1.3125rem); line-height: 1.45; letter-spacing: -0.012em; }
.wh-texte { max-width: 34em; color: var(--gris); }
.wh-note { font-size: 0.875rem; line-height: 1.5; color: var(--gris); }
.wh-etiquette { font-size: 0.875rem; font-weight: 500; line-height: 1.3; color: var(--gris); }

/* ---------- boutons et liens ----------
   Le bouton est plein, a coins arrondis ; sa fleche (un chevron dessine par deux bords) avance au survol. */
.wh-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid var(--encre);
  border-radius: 10px;
  background: var(--encre);
  color: var(--blanc);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms var(--doux);
}
.wh-bouton::after, .wh-lien::after {
  content: "";
  flex: none;
  width: 0.44em;
  height: 0.44em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 260ms var(--doux);
}
.wh-bouton:active { transform: scale(0.98); }
/* sur le fond sombre de la banniere */
.wh-bouton-clair { border-color: var(--blanc); background: var(--blanc); color: var(--encre); }
.wh-lien {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color 200ms ease;
}
.wh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
@media (hover: hover) {
  .wh-bouton:hover { border-color: var(--encre-2); background: var(--encre-2); }
  .wh-bouton-clair:hover { border-color: var(--brume-2); background: var(--brume-2); }
  .wh-lien:hover { color: var(--bleu); }
  .wh-bouton:hover::after, .wh-lien:hover::after { transform: translateX(3px) rotate(45deg); }
}

/* ---------- en-tete ----------
   Le nom du site, les rubriques Members et About et l'acces a la recherche (« Find a painter »), toujours visibles,
   sans menu a ouvrir et sans script. Pas de lien Events tant que la page n'annonce aucune date.
   L'en-tete reste en haut de l'ecran pendant le defilement. Au telephone il tient sur deux rangs, le nom puis les
   liens (mesures en Geist : 270 px de liens pour 320 px disponibles sur un ecran de 360 px) ; seul le rang des
   liens reste colle, le nom repart avec la page (top negatif, de la hauteur du premier rang). A partir de 520 px
   tout tient sur un rang (439 px en Geist pour 480 disponibles ; si une police de repli plus large ne tenait pas,
   les liens repasseraient simplement dessous). */
.wh-entete {
  position: sticky;
  top: -48px;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  transition: box-shadow 240ms ease;
}
/* un filet sous l'en-tete des que la page a defile (classe posee par le script) */
.wh-entete { box-shadow: 0 1px 0 var(--trait); }
.wh-entete-rang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 16px;
  max-width: 1920px;
  margin: 0 auto;
  padding: 4px var(--bord);
}
.wh-logo {
  display: inline-flex;
  align-items: center;
  height: 44px;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
  white-space: nowrap;
  text-decoration: none;
}
.wh-nav { display: flex; flex: 1 0 100%; flex-wrap: wrap; align-items: center; margin-left: -10px; }
.wh-nav-lien {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  transition: color 200ms ease;
}
.wh-nav-lien[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--bleu);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
/* « Find a painter » : une pastille douce derriere le lien, la cible gardant ses 44 px de haut */
.wh-nav-cherche { margin-left: 6px; padding: 0 12px; }
.wh-nav-cherche::before {
  content: "";
  position: absolute;
  top: 5px;
  right: 0;
  bottom: 5px;
  left: 0;
  z-index: -1;
  border-radius: var(--r1);
  background: var(--brume);
  transition: background-color 200ms ease;
}
/* le bouton, qui double le lien Members : seulement quand la largeur le permet */
.wh-nav-large { display: none; }
.wh-nav .wh-bouton::after { content: none; }
@media (hover: hover) {
  .wh-nav-lien:hover { color: var(--bleu); }
  .wh-nav-cherche:hover { color: var(--encre); }
  .wh-nav-cherche:hover::before { background: var(--brume-2); }
}
@media (min-width: 520px) {
  .wh-entete { top: 0; }
  .wh-entete-rang { padding-top: 8px; padding-bottom: 8px; }
  .wh-nav { flex: 0 1 auto; margin-left: 0; }
}
@media (min-width: 1000px) {
  .wh-nav-large { display: inline-flex; min-height: 40px; margin-left: 10px; padding: 8px 14px; }
  .wh-nav-cherche::before { top: 2px; bottom: 2px; }
}

/* ---------- pied de page ----------
   Une boite sombre a coins arrondis, en retrait du bord de l'ecran comme la banniere et du meme noir qu'elle : la
   page se referme comme l'accueil s'ouvre. Le texte est blanc, les libelles et la mention en blanc a 70 %. Le nom
   du site en tres grand, d'un bord a l'autre de la boite (8,06 fois le corps du texte en Geist, d'ou le
   diviseur). */
.wh-pied { padding: clamp(64px, 10vw, 144px) var(--marge) var(--marge); }
.wh-pied-boite {
  --pb: clamp(20px, 4vw, 56px);
  max-width: 1880px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) var(--pb) clamp(20px, 2.4vw, 30px);
  overflow: hidden;
  border-radius: var(--r3);
  background: var(--nuit);
  color: var(--blanc);
}
.wh-pied-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
.wh-pied-titre { margin-bottom: 4px; }
.wh-pied-titre, .wh-pied-bas .wh-note { color: rgba(255, 255, 255, 0.7); }
.wh-pied-lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-decoration: none;
}
.wh-pied :focus-visible { outline-color: var(--blanc); }
.wh-pied-bas { display: flex; flex-direction: column; gap: 12px; margin-top: clamp(48px, 9vw, 128px); }
.wh-pied-nom {
  display: block;
  font-size: min(calc((100vw - 2 * var(--marge) - 2 * var(--pb)) / 8.3), 12rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.05em;
  white-space: nowrap;
}
/* sur le fond sombre, le bleu du site serait trop terne : au survol le lien se souligne, comme les noms du mur */
@media (hover: hover) {
  .wh-pied-lien:hover { text-decoration: underline; text-underline-offset: 4px; }
}
@media (min-width: 720px) {
  .wh-pied-colonnes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- l'ouverture de l'accueil ----------
   Une grande boite sombre a coins arrondis, en retrait du bord de l'ecran, avec le pigment bleu dans l'eau sur
   fond noir, le titre, et le mur des peintures des membres (plus bas : « le mur »).
   L'image du pigment est une vraie image, ecrite dans la page et chargee en premier (c'est la correction du bug du
   09/10 : ni fond CSS, ni masque, ni pseudo-element, ni script). Sa place est reservee par les regles ci-dessous
   avant meme qu'elle arrive, et elle s'affiche a toutes les largeurs. Dans la photo (1376 sur 768, soit 1,7917), le
   nuage occupe 24 a 71 % de la largeur et 12 a 85 % de la hauteur, son centre a 48 % ; le tour est noir, fondu vers
   --nuit dans le fichier lui-meme. On la montre donc plus grande que sa bande (136 %, remontee de 18 %), centree
   sur le nuage : il remplit la bande du haut en bas, ce qui depasse est noir, et coupe par la boite.
   Le texte est clair, pose sur le fond uni, sous le nuage. */
.wh-ouverture { padding: 0 var(--marge); }
.wh-ouverture-boite {
  --pad: clamp(20px, 4vw, 56px);
  /* hauteur de la bande du pigment au telephone : 56 % de la largeur de l'ecran, sans depasser 31 % de sa hauteur
     (sur un telephone courant, le titre, le texte et le bouton tiennent sur le premier ecran) ni 360 px */
  --hb: min(56vw, max(31vh, 150px), 360px);
  /* hauteur de la boite sur grand ecran (a partir de 900 px) : celle de l'ecran qui reste sous l'en-tete, sans
     depasser ce que sa largeur permet (32 % de la largeur de l'ecran pour le nuage, plus le texte). Le mur de
     peintures s'en sert aussi pour tenir dans la boite. */
  --hbox: clamp(560px, min(calc(100vh - 84px), calc(32vw + 400px)), 900px);
  max-width: 1880px;
  margin: 0 auto;
  /* ce qui depasse de l'image est coupe ; clip, quand le navigateur le connait, empeche en plus tout defilement
     de la boite sur le cote : rien, dans la banniere, ne se fait defiler. La boite forme son propre plan
     (isolation) : sans cela Safari laisse parfois depasser de ses coins arrondis un element anime, comme l'image
     du pigment. */
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  border-radius: var(--r3);
  background: var(--nuit);
  color: var(--blanc);
}
.wh-ouverture-fond { height: var(--hb); }
/* l'image est decalee sans marge (une marge negative remonterait la bande elle-meme) : sa bande garde sa hauteur */
.wh-ouverture-fond img {
  position: relative;
  top: calc(var(--hb) * -0.18);
  /* le centre du nuage (48 % de la largeur de l'image) au milieu de la boite */
  left: calc(50% - var(--hb) * 1.1696);
  width: calc(var(--hb) * 2.4367);
  max-width: none;
  height: calc(var(--hb) * 1.36);
  /* le point fixe du souffle (plus bas) : le bas du nuage, pour qu'il ne descende jamais sur le titre */
  transform-origin: 48% 85%;
}
/* le pigment respire : le nuage grandit de 6 % en 26 secondes, puis revient, sans fin. La propriete scale s'ajoute
   a la position de l'image sans la remplacer ; un navigateur qui ne la connait pas laisse l'image immobile. */
@keyframes wh-souffle {
  to { scale: 1.06; }
}
@media (prefers-reduced-motion: no-preference) {
  .wh-ouverture-fond img { animation: wh-souffle 26s ease-in-out infinite alternate; }
}
/* le texte passe devant le bas de l'image, qui depasse un peu de sa bande et n'y est plus que du noir */
.wh-ouverture-texte {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 6px var(--pad) 0;
}
/* le titre de la banniere : aussi grand que la boite le permet, sur deux lignes (« Many painters. » fait 6,21 fois
   le corps en Geist ; la largeur disponible est celle de l'ecran moins 60 px, et l'on garde 6 % de marge) */
.wh-ouverture-texte .wh-t1 { font-size: clamp(2.25rem, calc((100vw - 60px) / 6.6), 4.5rem); }
.wh-ouverture-texte .wh-chapo { color: rgba(255, 255, 255, 0.84); }
.wh-ouverture :focus-visible { outline-color: var(--blanc); }
/* la hauteur de l'ecran, c'est ce qu'on en voit : au telephone, la barre d'adresse en prend une part */
@supports (height: 1svh) {
  .wh-ouverture-boite {
    --hb: min(56vw, max(31svh, 150px), 360px);
    --hbox: clamp(560px, min(calc(100svh - 84px), calc(32vw + 400px)), 900px);
  }
}
@media (min-width: 900px) {
  /* a gauche le pigment puis le texte, cale en bas ; a droite le mur des peintures, sur deux rangs. La boite
     prend la hauteur --hbox : sur un ecran haut et etroit, le nuage remplit encore sa bande et le haut de la
     photo reste coupe par la boite. */
  .wh-ouverture-boite {
    display: grid;
    grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
    min-height: var(--hbox);
  }
  .wh-ouverture-gauche { display: flex; flex-direction: column; min-width: 0; padding-bottom: var(--pad); }
  /* la bande du pigment prend toute la hauteur que le texte laisse ; l'image s'y regle en pourcentage */
  .wh-ouverture-fond { position: relative; flex: 1 1 auto; height: auto; min-height: 150px; }
  /* l'image est calee sur le bas de sa bande, puis descendue de 13 % de sa propre hauteur : le bas du nuage (85 %
     de l'image) arrive juste au-dessus du titre, quelle que soit la taille de l'image. Elle ne depasse jamais 46 %
     de la largeur de l'ecran en hauteur : sur un ecran haut et etroit, le nuage ne deborde pas de sa colonne. */
  .wh-ouverture-fond img {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 50%;
    width: auto;
    height: 136%;
    max-height: 46vw;
    transform: translate(-48%, 13%);
    /* le point fixe du souffle : le bas du nuage, qui se trouve, une fois l'image decalee, au bord gauche de sa
       boite d'origine et a 98 % de sa hauteur */
    transform-origin: 0 98%;
  }
  .wh-ouverture-texte { gap: 22px; padding: 0 24px 0 var(--pad); }
  /* meme calcul dans la colonne de gauche : 37,8 % de l'ecran moins 24 px */
  .wh-ouverture-texte .wh-t1 { font-size: clamp(2.75rem, calc((37.8vw - 24px) / 6.6), 5.5rem); }
  .wh-ouverture-texte .wh-chapo { max-width: 27.5rem; }
}

/* ---------- la vitrine de l'accueil (23/10) ----------
   Une seule grande peinture a la fois, dans la boite sombre, qui se fond dans la suivante toutes les cinq secondes
   (script : wh-scene.js). La scene a une taille fixe, quelle que soit la peinture : la page ne bouge jamais. La
   peinture y tient entiere (aussi large ou aussi haute que la scene le permet, jamais rognee), centree, a angles
   droits ; sa legende, le peintre puis le titre, est dessous, sur une ligne chacun. Pendant le fondu, l'ancienne
   peinture s'efface pendant que la nouvelle parait ; la legende qui arrive attend que l'autre soit partie. */
.wh-vitrine {
  --leg-v: calc(14px + 2.9rem);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  margin-top: clamp(22px, 5vw, 40px);
  padding: 0 var(--pad) 10px;
}
.wh-vitrine-scene {
  position: relative;
  height: calc(min(86vw, 62vh, 560px) + var(--leg-v));
}
@supports (height: 1svh) {
  .wh-vitrine-scene { height: calc(min(86vw, 62svh, 560px) + var(--leg-v)); }
}
/* la peinture et sa legende forment un bloc, centre dans la scene ; la peinture prend toute la place que la
   legende lui laisse, en largeur ou en hauteur, sans jamais etre rognee */
.wh-vitrine-vue {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
}
.wh-vitrine-oeuvre { display: contents; }
.wh-vitrine-oeuvre img {
  flex: none;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100% - var(--leg-v));
  border-radius: 0;
}
.wh-vitrine-cartel { display: block; flex: none; width: 100%; height: var(--leg-v); padding-top: 14px; overflow: hidden; text-align: center; }
.wh-vitrine-nom, .wh-vitrine-titre { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-vitrine-nom { font-size: 1rem; font-weight: 500; line-height: 1.5; letter-spacing: -0.012em; }
.wh-vitrine-titre { font-size: 0.875rem; line-height: 1.5; color: rgba(255, 255, 255, 0.7); }
.wh-vitrine-entre { animation: wh-mur-entre 1400ms ease backwards; }
.wh-vitrine-sort { animation: wh-mur-sort 1400ms ease both; pointer-events: none; }
.wh-vitrine-sort .wh-vitrine-cartel { animation: wh-mur-sort 450ms ease both; }
.wh-vitrine-entre .wh-vitrine-cartel { animation: wh-mur-entre 900ms ease 450ms backwards; }
.wh-vitrine-pause span { background: rgba(255, 255, 255, 0.14); }
@media (hover: hover) {
  .wh-vitrine-vue:hover .wh-vitrine-nom { text-decoration: underline; text-underline-offset: 3px; }
  .wh-vitrine-pause:hover span { background: rgba(255, 255, 255, 0.26); }
}
/* la place de la vitrine avant que le script l'ecrive : la scene et le bouton ; la page ne saute pas */
.wh-js .wh-vitrine:empty::before { content: ""; display: block; height: calc(min(86vw, 62vh, 560px) + var(--leg-v) + 46px); }
@media (min-width: 900px) {
  /* a droite du texte, toute la hauteur de la boite, moins un retrait en haut et en bas */
  .wh-vitrine { margin: 0; padding: calc(0.6 * var(--pad)) var(--pad) calc(0.6 * var(--pad)) 8px; }
  .wh-vitrine-scene { flex: 1 1 auto; height: auto; min-height: 360px; }
  .wh-js .wh-vitrine:empty::before { display: none; }
}
/* un telephone tenu couche : la scene tient dans la hauteur de l'ecran */
@media (max-width: 899px) and (max-height: 520px) {
  .wh-vitrine-scene { height: calc(78vh + var(--leg-v)); }
}

/* ---------- une peinture nue ----------
   Partout la peinture est entiere, a sa vraie proportion, jamais rognee, sans passe-partout (Naotag, 09/10). Sa
   proportion (--r, largeur sur hauteur) est ecrite sur l'element qui la porte : la taille se calcule sans attendre
   le fichier, rien ne saute a son arrivee. */
.wh-nue { flex: none; max-width: none; border-radius: 0; }

/* ---------- le mur ----------
   Quelques cases egales, sur un ou deux rangs : dans chacune la premiere peinture d'un membre (entiere, calee en
   bas de la case), son nom, le titre. Rien ne defile et rien ne se fait defiler, il n'y a donc aucune barre de
   defilement : de temps en temps une case se fond dans la peinture d'un autre membre, une seule a la fois.
   L'equite : chaque case passe par tous les membres, dans l'ordre alphabetique, le meme temps chacun ; les cases
   sont reparties autour de l'alphabet et ne montrent jamais deux fois le meme membre. Le point de depart se lit
   sur l'horloge : il est le meme pour tous les visiteurs au meme instant, et personne n'est premier. Avec huit
   membres comme avec deux cents, le mur ne charge que ses cases, puis une vignette par changement.
   C'est le script qui l'ecrit, a partir de la liste des membres (assets/wh-membres.js) ; sans lui il n'y a pas de
   mur, et aucune peinture n'a de place fixe. Sa place est reservee : la page ne saute pas a son arrivee.
   Si le visiteur a demande moins de mouvement, le fondu reste un fondu, sans le leger recul de la peinture qui
   arrive ; le bouton pose sous le mur l'arrete. */
.wh-mur {
  /* colonnes, rangs, et le nombre de cases qui en decoule, lu par le script ; l'espace entre deux cases ; la
     hauteur de la legende (12 px, puis le nom, sur deux lignes au plus, et le titre sur une) */
  --col: 2;
  --rg: 2;
  --tuiles: 4;
  --g: clamp(14px, 2vw, 26px);
  --leg: calc(12px + 3.5344rem);
  /* une colonne : les cases, puis le bouton (qui vient avant elles dans la page, voir plus bas) */
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bord);
  padding-right: var(--bord);
}
/* la place du mur avant que le script l'ecrive : ses rangs de cases carrees, leurs legendes et le bouton, le tout
   calcule sur sa largeur (un pourcentage, dans une marge interieure, se compte sur la largeur) */
.wh-js .wh-mur:empty::before {
  content: "";
  display: block;
  padding-top: calc(100% * var(--rg) / var(--col) - var(--g) * var(--rg) * (var(--col) - 1) / var(--col) + var(--rg) * var(--leg) + (var(--rg) - 1) * var(--g) + 46px);
}
.wh-mur-grille { display: grid; grid-template-columns: repeat(var(--col), minmax(0, 1fr)); gap: var(--g); }
/* une case : toujours un carre et sa legende, qu'une peinture y soit ou non. Les peintures s'y posent l'une sur
   l'autre : pendant un fondu, la case en porte deux. */
.wh-mur-case { position: relative; min-width: 0; }
.wh-mur-case::before { content: ""; display: block; padding-top: calc(100% + var(--leg)); }
.wh-mur-vue { position: absolute; top: 0; right: 0; left: 0; display: block; text-decoration: none; }
.wh-mur-oeuvre { position: relative; display: block; height: 0; padding-top: 100%; }
/* la peinture, entiere et a sa vraie proportion : toute la largeur de la case si elle est en largeur, toute sa
   hauteur sinon (sa largeur, en pourcentage de la case, est ecrite par le script) ; calee en bas, centree */
.wh-mur-oeuvre img {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: auto;
  margin: 0 auto;
  box-shadow: var(--ombre);
  transform-origin: 50% 100%;
  transition: transform 500ms var(--doux);
}
.wh-mur-nom, .wh-mur-titre { overflow: hidden; text-align: center; }
/* le nom n'est pas coupe : il tient sur deux lignes au besoin (un nom double, une case etroite au telephone) ;
   le titre tient sur une ligne, et se termine par des points de suspension s'il est tres long */
.wh-mur-nom {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-top: 12px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.wh-mur-titre { display: block; font-size: 0.8125rem; line-height: 1.35; color: var(--gris); text-overflow: ellipsis; white-space: nowrap; }
/* le fondu enchaine : la peinture qui arrive parait pendant que l'autre s'efface. L'animation d'arrivee ne garde
   rien apres sa fin (backwards) : le survol retrouve aussitot sa transition. */
.wh-mur-entre { animation: wh-mur-entre 1600ms ease backwards; }
.wh-mur-sort { animation: wh-mur-sort 1200ms ease both; }
/* les deux legendes ne se lisent jamais l'une sur l'autre : celle qui s'en va s'efface vite, celle qui arrive
   attend qu'elle ait disparu */
.wh-mur-sort .wh-mur-nom, .wh-mur-sort .wh-mur-titre { animation: wh-mur-sort 450ms ease both; }
.wh-mur-entre .wh-mur-nom, .wh-mur-entre .wh-mur-titre { animation: wh-mur-entre 900ms ease 450ms backwards; }
@keyframes wh-mur-entre {
  from { opacity: 0; }
}
@keyframes wh-mur-sort {
  to { opacity: 0; }
}
/* en arrivant, la peinture se pose : elle part de 4 % plus grande et revient a sa taille, lentement */
@keyframes wh-mur-pose {
  from { transform: scale(1.04); }
}
@media (prefers-reduced-motion: no-preference) {
  .wh-mur-entre img { animation: wh-mur-pose 2600ms var(--doux) backwards; }
}
/* le bouton qui arrete et relance le mur. Le script l'ecrit avant les cases, pour qu'un lecteur d'ecran le trouve
   avant les peintures qui changent ; il s'affiche sous elles, a droite (order). */
.wh-mur-pause {
  display: flex;
  order: 1;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 2px -6px 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
}
.wh-mur-pause span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--brume);
  transition: background-color 200ms ease;
}
/* le mur de la banniere : sur le fond sombre, sous le texte */
.wh-mur-nuit { max-width: none; margin-top: clamp(22px, 5vw, 40px); padding: 0 var(--pad) 10px; }
.wh-mur-nuit .wh-mur-oeuvre img { box-shadow: none; }
.wh-mur-nuit .wh-mur-titre { color: rgba(255, 255, 255, 0.7); }
.wh-mur-nuit .wh-mur-pause span { background: rgba(255, 255, 255, 0.14); }
@media (hover: hover) {
  .wh-mur-vue:hover img { transform: translateY(-6px); }
  .wh-mur-vue:hover .wh-mur-nom { text-decoration: underline; text-underline-offset: 3px; }
  .wh-mur-pause:hover span { background: var(--brume-2); }
  .wh-mur-nuit .wh-mur-pause:hover span { background: rgba(255, 255, 255, 0.26); }
}
@media (min-width: 600px) {
  /* quatre cases sur un rang ; dans la banniere, six cases sur deux rangs */
  .wh-mur { --col: 4; --rg: 1; }
  .wh-mur-nuit { --col: 3; --rg: 2; --tuiles: 6; }
}
@media (min-width: 900px) {
  /* la banniere sur grand ecran : le mur a droite du texte, centre dans la boite. Sa largeur est limitee pour que
     ses deux rangs (cases, legendes, espace et bouton) tiennent dans la hauteur de la boite, moins un retrait en
     haut et en bas (six dixiemes de celui du texte, chacun). Sur un ecran tres bas les cases ne descendent pas
     sous 170 px : c'est alors la boite qui grandit un peu. Quatre cases jusqu'a 1200 px de large, six au-dela. */
  .wh-mur-nuit {
    --col: 2;
    --tuiles: 4;
    position: relative;
    z-index: 1;
    align-self: center;
    justify-self: center;
    max-width: max(calc(var(--col) * (var(--hbox) - 1.2 * var(--pad) - var(--rg) * var(--leg) - (var(--rg) - 1) * var(--g) - 46px) / var(--rg) + (var(--col) - 1) * var(--g) + var(--pad) + 8px), calc(var(--col) * 170px + (var(--col) - 1) * var(--g) + var(--pad) + 8px));
    margin-top: calc(0.6 * var(--pad));
    margin-bottom: calc(0.6 * var(--pad));
    padding: 0 var(--pad) 0 8px;
  }
}
@media (min-width: 1200px) {
  .wh-mur-nuit { --col: 3; --tuiles: 6; }
}
/* un ecran large mais tres bas (un telephone tenu couche) : un seul rang de quatre cases, pour que le mur ne
   depasse pas la hauteur de l'ecran */
@media (min-width: 480px) and (max-height: 520px) {
  .wh-mur { --col: 4; --rg: 1; }
  .wh-mur-nuit { --col: 4; --rg: 1; --tuiles: 4; }
}

/* ---------- une peinture seule, en grand ----------
   Sur les pages generales, chaque emplacement recoit la deuxieme peinture du membre dont c'est le tour (le
   premier emplacement de la page prend le membre du moment, le suivant le membre d'apres, et ainsi de suite ; le
   tour avance d'un membre toutes les huit secondes, pour tous les visiteurs a la fois) : sur la duree, chaque
   membre occupe chaque emplacement aussi longtemps que les autres. C'est le script qui l'ecrit ; sans lui
   l'emplacement reste cache. La peinture mene a la page du membre. */
.wh-tour { --bh: 96vw; }
.wh-tour-lien { display: block; width: min(100%, calc(var(--bh) * var(--r))); }
.wh-tour-lien img { width: 100%; border-radius: 0; box-shadow: var(--ombre); transition: transform 600ms var(--doux); }
.wh-tour-cartel { display: flex; flex-wrap: wrap; gap: 0 10px; margin-top: 14px; font-size: 0.875rem; line-height: 1.5; }
.wh-tour-nom { font-weight: 500; }
.wh-tour-titre { color: var(--gris); }
@media (hover: hover) {
  .wh-tour-lien:hover img { transform: translateY(-6px); }
}

/* ---------- les blocs de l'accueil et des pages generales ---------- */
.wh-bloc { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.wh-bloc .wh-actions { margin-top: 6px; }
.wh-bloc-lien { text-decoration: none; transition: color 200ms ease; }
/* un titre qui est aussi un lien : la cible fait 44 px de haut meme quand le titre tient sur une ligne */
.wh-t3 > .wh-bloc-lien { display: inline-block; padding: 6px 0; }
@media (hover: hover) {
  .wh-bloc-lien:hover { color: var(--bleu); }
}
/* « Three ways into the group » : trois rangs, une grande peinture et son texte, un cote puis l'autre */
.wh-voies { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(56px, 9vw, 128px); }
.wh-voie { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: center; }
.wh-voie .wh-t3 { font-size: clamp(1.75rem, calc(1.15rem + 2.3vw), 3rem); line-height: 1.04; letter-spacing: -0.035em; }
@media (min-width: 900px) {
  .wh-voie { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); column-gap: clamp(40px, 6vw, 104px); }
  .wh-voie .wh-tour { --bh: min(70vh, 46vw); }
  .wh-voie:nth-child(even) .wh-tour { order: 2; }
  .wh-voie:nth-child(even) .wh-tour-lien { margin-left: auto; }
  .wh-voie:nth-child(even) .wh-tour-cartel { justify-content: flex-end; }
}
/* « The paper, the water, the pigment » : trois phrases en grand, un filet entre chacune */
.wh-dits { border-top: 1px solid var(--trait); }
.wh-dit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: clamp(24px, 4vw, 52px) 0;
  border-bottom: 1px solid var(--trait);
}
.wh-dit .wh-t2 { max-width: 19em; font-size: clamp(1.75rem, calc(1.1rem + 2.8vw), 3.5rem); }
@media (min-width: 900px) {
  .wh-dit { grid-template-columns: minmax(0, 1fr) minmax(0, 4fr); align-items: baseline; }
}
/* un encart doux a coins arrondis, en retrait du bord de l'ecran comme la banniere */
.wh-encart { padding-left: var(--marge); padding-right: var(--marge); }
.wh-encart-boite {
  max-width: 1880px;
  margin: 0 auto;
  padding: clamp(36px, 7vw, 104px) 0;
  border-radius: var(--r3);
  background: var(--brume);
}
.wh-deux { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px clamp(24px, 5vw, 80px); }
/* les etapes : une liste de liens numerotes (le numero vient de la liste elle-meme), un filet entre chacune */
.wh-etapes { border-top: 1px solid var(--trait); counter-reset: etape; }
.wh-etape {
  position: relative;
  display: block;
  padding: 20px 28px 20px 46px;
  border-bottom: 1px solid var(--trait);
  text-decoration: none;
  counter-increment: etape;
}
.wh-etape::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  top: 24px;
  left: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--gris);
}
.wh-etape::after {
  content: "";
  position: absolute;
  top: 30px;
  right: 4px;
  width: 9px;
  height: 9px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 260ms var(--doux);
}
.wh-etape-titre { display: block; font-size: 1.375rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.025em; transition: color 200ms ease; }
.wh-etape-texte { display: block; margin-top: 6px; color: var(--gris); }
@media (hover: hover) {
  .wh-etape:hover .wh-etape-titre { color: var(--bleu); }
  .wh-etape:hover::after { transform: translateX(4px) rotate(45deg); }
}
/* « More about the members » : deux cartes, une peinture au-dessus de chacune */
.wh-cartes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px clamp(24px, 4vw, 64px); }
.wh-carte-lien { display: flex; flex-direction: column; gap: 22px; }
@media (min-width: 720px) {
  .wh-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* cote a cote, les deux peintures sont calees en bas d'un cadre de la meme hauteur : les deux textes s'alignent */
  .wh-cartes .wh-tour { --bh: min(34vw, 420px); }
  .wh-cartes .wh-tour-cadre { display: flex; align-items: flex-end; height: var(--bh); }
}
@media (min-width: 900px) {
  .wh-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* tete des pages Members, About et Events : le titre en tres grand, sur le blanc */
.wh-tete-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-top: clamp(28px, 7vw, 104px);
  padding-bottom: clamp(36px, 6vw, 80px);
}
.wh-tete-page .wh-bouton { margin-top: 6px; }
/* fil d'Ariane */
.wh-fil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 2px;
  margin-left: -8px;
  font-size: 0.875rem;
  color: var(--gris);
}
.wh-fil a, .wh-fil-ici { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.wh-fil a { text-decoration: none; transition: color 200ms ease; }
@media (hover: hover) {
  .wh-fil a:hover { color: var(--encre); }
}
/* texte long de la page About, en grand */
.wh-long { max-width: 31em; font-size: clamp(1.25rem, calc(1rem + 1.2vw), 1.875rem); line-height: 1.36; letter-spacing: -0.022em; }
.wh-long + .wh-actions { margin-top: 32px; }
.wh-phrase { max-width: 17em; }
.wh-phrase span { display: block; }
.wh-phrase span + span { margin-top: 0.3em; color: var(--gris); }
/* tableaux en lignes : « How a page goes up », « What the group holds » */
.wh-lignes { border-top: 1px solid var(--trait); }
.wh-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px 32px;
  padding: clamp(20px, 3vw, 34px) 0;
  border-bottom: 1px solid var(--trait);
}
.wh-ligne-titre { font-size: clamp(1.5rem, calc(1.2rem + 1.3vw), 2.25rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; }
.wh-ligne-rang { font-size: 0.875rem; color: var(--gris); }
.wh-lignes + .wh-actions { margin-top: clamp(28px, 4vw, 48px); }
@media (min-width: 800px) {
  .wh-ligne { grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 4fr); align-items: baseline; }
  .wh-ligne-deux { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

/* ---------- la liste des membres ----------
   Pensee pour quatre-vingts membres et plus, au telephone d'abord : la recherche, les initiales, puis la grille,
   sur deux colonnes au telephone et trois au-dela. Toutes les cartes sont dans la page, par ordre alphabetique ;
   le script n'en affiche d'abord que douze, la suite parait quand on approche du bas de la liste (sans script, la
   liste est entiere). */
.wh-outils {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: clamp(28px, 5vw, 56px);
}
/* les initiales : une grille de cases egales, d'au moins 44 px sur 44, qui se remplit rang apres rang. Sept cases
   tiennent sur un rang a partir de 348 px d'ecran (« All » et six initiales aujourd'hui) ; avec vingt initiales
   elles font trois ou quatre rangs au telephone, un seul sur grand ecran. Sous 380 px les cases se touchent, pour
   garder sept cases par rang. Aucune rangee ne se fait defiler. */
.wh-initiales { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px 0; }
.wh-initiale {
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--gris);
  font-size: 1rem;
  font-weight: 500;
  transition: background-color 200ms ease, color 200ms ease;
}
.wh-initiale[aria-pressed="true"] { background: var(--encre); color: var(--blanc); }
.wh-recherche { position: relative; display: block; }
.wh-recherche svg {
  position: absolute;
  top: 50%;
  left: 16px;
  margin-top: -8px;
  color: var(--gris);
  pointer-events: none;
}
.wh-recherche input {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 14px 0 44px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--brume);
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.wh-recherche input::placeholder { color: var(--gris); opacity: 1; }
.wh-recherche input:focus { border-color: var(--encre); background: var(--blanc); outline: 2px solid var(--bleu); outline-offset: 1px; }
/* la grille : sur un rang, les peintures sont calees en bas d'un cadre de la meme hauteur (--bh), chacune a sa
   vraie proportion (--r, ecrit sur la carte) ; les noms s'alignent */
.wh-membres {
  --bh: 40vw;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 6vw, 88px) clamp(16px, 3vw, 44px);
}
.wh-carte { display: block; min-width: 0; text-decoration: none; }
/* le bouton qui affiche la suite de la liste (23/10) */
.wh-membres-plus { margin-top: clamp(32px, 5vw, 56px); }
.wh-membres-plus[hidden] { display: none; }
.wh-carte-oeuvre { display: flex; align-items: flex-end; height: var(--bh); margin-bottom: 14px; }
.wh-carte-oeuvre img {
  flex: none;
  width: min(100%, calc(var(--bh) * var(--r)));
  border-radius: 0;
  box-shadow: var(--ombre);
  transition: transform 600ms var(--doux);
}
.wh-carte-meta { display: block; margin-bottom: 4px; font-size: 0.8125rem; line-height: 1.45; color: var(--gris); }
.wh-carte-nom { font-size: clamp(1.1875rem, calc(0.6rem + 2.6vw), 2.125rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; transition: color 200ms ease; }
.wh-vide { color: var(--gris); }
@media (hover: hover) {
  .wh-initiale:not([aria-pressed="true"]):hover { background: var(--brume); color: var(--encre); }
  .wh-carte:hover .wh-carte-oeuvre img { transform: translateY(-8px); }
  .wh-carte:hover .wh-carte-nom { color: var(--bleu); }
}
@media (min-width: 380px) {
  .wh-initiales { gap: 4px; }
}
@media (min-width: 640px) {
  .wh-recherche { max-width: 420px; }
  .wh-membres { --bh: min(21vw, 290px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wh-carte-oeuvre { margin-bottom: 18px; }
  .wh-carte-meta { margin-bottom: 6px; font-size: 0.875rem; line-height: 1.5; }
}
@media (min-width: 1000px) {
  /* sur grand ecran les cases se touchent de nouveau : « All » et les vingt-six lettres tiennent sur un rang */
  .wh-initiales { gap: 4px 0; }
}

/* ---------- la page d'un membre ---------- */
.wh-artiste-tete { padding-top: clamp(16px, 4vw, 56px); }
.wh-artiste-tete .wh-t1 { margin-top: 6px; }

/* les chevrons de la frise */
.wh-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--brume);
  color: var(--encre);
  transition: background-color 200ms ease, color 200ms ease, opacity 200ms ease;
}
/* arrive au bout, le chevron est eteint (aria-disabled, pose par le script) mais reste atteignable au clavier */
.wh-chevron[aria-disabled="true"] { opacity: 0.35; cursor: default; }
@media (hover: hover) {
  .wh-chevron:not([aria-disabled="true"]):hover { background: var(--encre); color: var(--blanc); }
}

/* ---------- la frise ----------
   Une rangee qui defile de gauche a droite sous le nom du membre : les peintures a la meme hauteur (la moitie de
   l'ecran au telephone, 60 % au-dela), chacune a sa vraie proportion (--r, largeur sur hauteur, ecrit sur la
   figure), posee a meme la page avec une ombre, sa legende dessous. Pas de passe-partout : Naotag (09/10) a
   demande de retirer « les parties blanches autour des peintures ». Une seule exception a la hauteur commune : une
   peinture n'est jamais plus large que l'ecran. Au telephone, un paysage a la moitie de la hauteur de l'ecran
   deborderait (quatre a huit peintures par membre, calcule le 09/10) ; il prend alors la largeur disponible et on
   le voit entier. Les peintures sont alignees par le haut.
   La frise defile au doigt ou au pave tactile sans script (a la souris : Maj + molette, ou la barre) ; le script
   ajoute les chevrons, les fleches du clavier et le glisser a la souris. Un clic sur une peinture ouvre la
   visionneuse. */
.wh-frise { margin-top: clamp(14px, 2.5vw, 30px); }
.wh-frise-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.wh-frise-compte { font-size: 0.9375rem; line-height: 1.45; color: var(--gris); }
.wh-frise-compte strong { font-weight: 600; color: var(--encre); }
.wh-frise-commandes { display: flex; flex: none; gap: 8px; }
.wh-frise-piste {
  --h: clamp(220px, 50vh, 480px);
  --ecart: clamp(18px, 4vw, 44px);
  /* la premiere peinture s'aligne sur le texte de la page, meme sur un ecran plus large que le cadre */
  --retrait: max(var(--bord), calc((100% - var(--max)) / 2 + var(--bord)));
  /* largeur maximale d'une peinture : l'ecran moins le retrait de depart, la marge de fin et 24 px pour que la
     suivante depasse et qu'on sache qu'il y a une suite */
  --lmax: calc(100vw - max(var(--bord), calc((100vw - var(--max)) / 2 + var(--bord))) - var(--bord) - 24px);
  display: flex;
  align-items: flex-start;
  margin-top: 6px;
  padding: 14px 0 34px var(--retrait);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--retrait);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gris) transparent;
}
.wh-frise-piste:focus-visible { outline-offset: -2px; }
/* la marge de fin : un element de la rangee, compte dans le defilement par tous les navigateurs */
.wh-frise-piste::after { content: ""; flex: 0 0 var(--bord); height: 1px; }
.wh-frise-oeuvre {
  /* largeur de la peinture : celle que donne la hauteur commune, sans depasser la largeur de l'ecran */
  --l: min(calc(var(--h) * var(--r)), var(--lmax));
  flex: 0 0 auto;
  width: var(--l);
  scroll-snap-align: start;
}
.wh-frise-oeuvre + .wh-frise-oeuvre { margin-left: var(--ecart); }
/* le lien qui porte la peinture : il a exactement sa taille, l'ombre part du bord de la peinture */
.wh-frise-cadre {
  display: block;
  border-radius: 0;
  box-shadow: var(--ombre);
  cursor: zoom-in;
  transition: transform 500ms var(--doux);
}
.wh-frise-cadre img {
  width: var(--l);
  max-width: none;
  height: calc(var(--l) / var(--r));
  border-radius: 0;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
.wh-frise-legende { padding-top: 16px; }
.wh-frise-titre { display: block; font-size: 1.0625rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.018em; }
.wh-frise-technique { display: block; margin-top: 3px; font-size: 0.875rem; line-height: 1.45; color: var(--gris); }
/* pendant qu'on tire la frise a la souris : pas de selection de texte, et pas d'aimant (il revient un instant
   apres le lacher, une fois la frise posee, pour qu'elle ne saute pas) */
.wh-frise-tiree { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.wh-frise-tiree .wh-frise-cadre { cursor: grabbing; }
.wh-frise-sans-aimant { scroll-snap-type: none; }
@media (hover: hover) {
  .wh-frise-piste:not(.wh-frise-tiree) .wh-frise-cadre:hover { transform: translateY(-6px); }
}
/* la moitie de l'ecran, c'est la moitie de ce qu'on en voit : au telephone, la barre d'adresse du navigateur en
   prend une part (svh la deduit, vh non) */
@supports (height: 1svh) {
  .wh-frise-piste { --h: clamp(220px, 50svh, 480px); }
}
@media (min-width: 768px) {
  .wh-frise-piste { --h: clamp(220px, 60vh, 640px); }
}
@supports (height: 1svh) {
  @media (min-width: 768px) {
    .wh-frise-piste { --h: clamp(220px, 60svh, 640px); }
  }
}

/* ---------- sous la frise : le mot du membre, puis sa fiche (Overview) ---------- */
.wh-apropos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 6vw, 56px);
  margin-top: clamp(32px, 5vw, 72px);
}
/* le mot du membre peut etre long : un corps de lecture, pas le grand corps de la page About */
.wh-apropos .wh-long { max-width: 40em; font-size: clamp(1.0625rem, calc(1rem + 0.35vw), 1.25rem); line-height: 1.6; letter-spacing: -0.01em; }
/* la fiche : un encart doux ; une adresse longue passe a la ligne, elle n'elargit pas la colonne */
.wh-fiche { min-width: 0; padding: clamp(20px, 3vw, 30px); border-radius: var(--r2); background: var(--brume); }
.wh-fiche-liste { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 14px; border-top: 1px solid var(--trait); }
.wh-fiche-rang { padding: 18px 0; border-bottom: 1px solid var(--trait); }
.wh-fiche-rang:last-child { padding-bottom: 0; border-bottom: 0; }
.wh-fiche-rang dt { margin-bottom: 8px; font-size: 0.875rem; color: var(--gris); }
.wh-fiche-membre { display: flex; align-items: center; gap: 14px; }
.wh-fiche-nom { font-size: 1.375rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.025em; }
.wh-fiche-sujet { margin-top: 8px; font-size: 0.9375rem; color: var(--gris); }
.wh-portrait { flex: none; width: 76px; height: 76px; border-radius: var(--r2); object-fit: cover; }
.wh-fiche-liens { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
/* les liens du membre : des pastilles blanches ; leur fleche pointe vers l'exterieur du site */
.wh-fiche-liens .wh-lien { padding: 0 14px; border-radius: var(--r1); background: var(--blanc); transition: background-color 200ms ease, color 200ms ease; }
.wh-fiche-liens .wh-lien::after { transform: none; }
.wh-fiche-liens .wh-lien:hover::after { transform: translate(2px, -2px); }
/* les coordonnees : affichees en clair, en texte qu'on peut selectionner, avec un bouton Copy (c'est voulu) */
.wh-cx { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 8px; }
.wh-cx-val {
  min-width: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}
.wh-cx-copie {
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r1);
  background: var(--blanc);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 200ms ease, color 200ms ease;
}
/* « There are other painters to see. » : la phrase en grand, le bouton, puis le mur des autres membres */
.wh-autres { padding-top: clamp(64px, 10vw, 144px); }
.wh-autres-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; margin-bottom: clamp(28px, 4vw, 48px); }
/* « Discover more » : trois encarts doux, le libelle en haut, la phrase en bas */
.wh-trois { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.wh-trois > li { display: flex; }
.wh-decouvrir .wh-bloc-lien {
  position: relative;
  flex: 1 1 auto;
  justify-content: space-between;
  gap: clamp(28px, 6vw, 72px);
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: var(--r2);
  background: var(--brume);
  transition: background-color 240ms ease;
}
.wh-decouvrir .wh-bloc-lien::after {
  content: "";
  position: absolute;
  top: clamp(24px, 2.9vw, 34px);
  right: clamp(22px, 2.8vw, 32px);
  width: 9px;
  height: 9px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 260ms var(--doux);
}
@media (hover: hover) {
  .wh-cx-copie:hover, .wh-fiche-liens .wh-lien:hover { background: var(--encre); color: var(--blanc); }
  .wh-decouvrir .wh-bloc-lien:hover { background: var(--brume-2); color: inherit; }
  .wh-decouvrir .wh-bloc-lien:hover::after { transform: translateX(4px) rotate(45deg); }
}
@media (min-width: 900px) {
  .wh-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* le mot du membre a gauche, sa fiche a droite */
  .wh-apropos-deux {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(40px, 6vw, 96px);
    align-items: start;
  }
  /* sans mot du membre, les rubriques de la fiche se rangent cote a cote, a parts egales */
  .wh-fiche-large { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 40px; }
  .wh-fiche-large .wh-fiche-rang { padding-bottom: 0; border-bottom: 0; }
}

/* ---------- la visionneuse ----------
   Un clic sur une peinture l'agrandit : Echap ou clic hors de l'image pour fermer, fleches pour la suivante ;
   au doigt, on balaie. Fond sombre, du meme noir que la banniere : l'interface s'efface, le blanc du papier
   ressort. Le texte est blanc (la technique et le rang a 70 %), les boutons sont des pastilles translucides ;
   elle parait en fondu. */
.wh-agrandir { cursor: zoom-in; }
/* au telephone la peinture prend toute la largeur ; les boutons se posent dans les coins */
.wh-visionneuse {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 0 minmax(0, 1fr) 0;
  grid-template-rows: 64px minmax(0, 1fr) auto;
  background: var(--nuit);
  color: var(--blanc);
  animation: wh-paraitre-vue 260ms ease both;
}
.wh-visionneuse :focus-visible { outline-color: var(--blanc); }
@keyframes wh-paraitre-vue {
  from { opacity: 0; }
}
.wh-v-image {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 12px;
  /* le balayage de gauche a droite change de peinture (script) ; pincer pour zoomer reste permis */
  touch-action: pan-y pinch-zoom;
}
.wh-v-image img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.wh-v-legende { grid-column: 2; grid-row: 3; padding: 14px 64px 22px; text-align: center; }
.wh-v-titre { font-size: 1.25rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
.wh-v-technique { margin-top: 4px; font-size: 0.875rem; line-height: 1.45; color: rgba(255, 255, 255, 0.7); }
.wh-v-rang { margin-top: 6px; font-size: 0.875rem; color: rgba(255, 255, 255, 0.7); }
.wh-v-bouton {
  position: fixed;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--blanc);
  transition: background-color 200ms ease, color 200ms ease, opacity 200ms ease;
}
.wh-v-bouton[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.wh-v-fermer { top: 10px; right: 12px; }
.wh-v-prec, .wh-v-suiv { bottom: 18px; }
.wh-v-prec { left: 12px; }
.wh-v-suiv { right: 12px; }
@media (hover: hover) {
  .wh-v-bouton:not([aria-disabled="true"]):hover { background: var(--blanc); color: var(--encre); }
}
@media (min-width: 640px) {
  /* ecran large : une colonne de chaque cote pour les fleches, la croix en haut a droite */
  .wh-visionneuse { grid-template-columns: 76px minmax(0, 1fr) 76px; grid-template-rows: 72px minmax(0, 1fr) auto; }
  .wh-v-image { padding: 0; }
  .wh-v-legende { padding: 16px 8px 24px; }
  .wh-v-bouton { position: static; align-self: center; justify-self: center; }
  .wh-v-fermer { grid-column: 3; grid-row: 1; }
  .wh-v-prec { grid-column: 1; grid-row: 2; }
  .wh-v-suiv { grid-column: 3; grid-row: 2; }
}
@media (min-width: 640px) and (max-height: 480px) {
  /* telephone couche : la hauteur est comptee. La croix se range au-dessus de la fleche de droite et la legende
     se reduit au titre, pour que la peinture garde presque tout l'ecran. */
  .wh-visionneuse { grid-template-rows: 8px minmax(0, 1fr) auto; }
  .wh-v-fermer { grid-row: 2; align-self: start; }
  .wh-v-legende { padding: 8px 8px 10px; }
  .wh-v-technique, .wh-v-rang { display: none; }
}

/* ---------- le mouvement ----------
   (23/10) Rien ne depend du defilement : les blocs ne montent plus a leur entree dans l'ecran. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* d'une page a l'autre, un fondu au lieu d'un saut, la ou le navigateur le propose */
  @view-transition { navigation: auto; }
}
/* le visiteur a demande moins de mouvement : plus rien ne se deplace ni ne grandit. Les peintures du mur continuent
   de se fondre l'une dans l'autre : un fondu n'est pas un deplacement, et le bouton du mur permet de l'arreter. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .wh-mur-entre { animation-duration: 1600ms !important; }
  .wh-mur-sort { animation-duration: 1200ms !important; }
}

/* a l'impression les fonds ne sont pas imprimes : le texte de la banniere repasse a l'encre, l'image du pigment,
   faite pour un fond sombre, reste a l'ecran, et rien n'attend le defilement pour paraitre. Le pied de page et la
   visionneuse reprennent sur le papier leurs couleurs claires : encre et gris, sur brume et blanc si le visiteur
   fait imprimer les fonds. */
@media print {
  .wh-entete { position: static; }
  .wh-ouverture-boite { display: block; min-height: 0; background: none; color: inherit; }
  .wh-pied-boite, .wh-v-bouton { background: var(--brume); color: inherit; }
  .wh-visionneuse { background: var(--blanc); color: inherit; }
  .wh-pied-titre, .wh-pied-bas .wh-note, .wh-v-technique, .wh-v-rang { color: var(--gris); }
  .wh-ouverture-fond, .wh-mur-pause, .wh-mur-sort { display: none; }
  .wh-ouverture-texte .wh-chapo, .wh-mur-nuit .wh-mur-titre { color: inherit; }
  .wh-bouton-clair { border-color: currentColor; }
  .wh-mur-nuit { max-width: none; }
}