/*
Theme Name: Dao Van Hoang
Theme URI: https://daovanhoang.com
Author: Alexandre Alleaume
Description: Theme sur mesure pour daovanhoang.com, peintre animalier. Systeme derive de
             33 sites d'art mesures au navigateur, dont le MoMA pour l'ossature et cinq
             peintres animaliers pour la facon de montrer et de vendre.
Version: 2.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: Proprietaire
Text Domain: dvh
*/

/* ==========================================================================
   LE SYSTEME, ET D'OU IL VIENT

   Chaque valeur ci-dessous a ete relevee au navigateur, jamais choisie au gout.

   Six tailles, deux graisses      MoMA : 60/40/30/22/18/16, presque tout en 900
   Chasse -0.02em                  MoMA, appliquee proportionnellement partout
   Espacements multiples de 8      MoMA : 17 valeurs sur 17
   Rangee a hauteur figee 576px    Principe du MoMA, hauteur de Bacon (voir --rangee)
   Aucun zoom au survol            MoMA, Guggenheim, Whitney et SFMOMA le refusent
   Liens non soulignes             MoMA : 65 sur 65
   Transitions par propriete       MoMA : couleur 200ms, opacite 600ms, transform 600ms

   Six ecarts assumes, et leur raison :

   0. Encre chaude et non #000, accent bleu et non gris. Les 12 galeries et
      musees releves n ont aucun accent chromatique. Ici le site EST celui du
      peintre, pas un mur neutre qui expose les oeuvres des autres : l encre et
      l accent sont tires de ses propres toiles, echantillonnees. Le FOND, lui,
      est revenu au blanc le 31 aout 2026, a la demande du client.
   0 bis. Deux familles et non une. Ses 43 histoires de terrain sont de la
      lecture, pas des libelles : elles ont un serif. Voir les jetons.

   1. Interligne de titre a 1.06 et non 1.00. Le vietnamien empile ses tons sur des
      voyelles deja accentuees. Mesure au canvas : Playfair demande 1.02 pour le seul
      nom de Hoang et 1.21 au pire cas. A 1.00 il n'y a aucune marge.
   2. Gris secondaire a 60% et non 54%. Le 54% de MoMA donne 4.6:1, au ras du seuil.
   3. prefers-reduced-motion respecte. MoMA l'ignore : 24 elements restent animes.
   4. Anneau de focus en CSS natif. MoMA le conditionne a une classe posee en
      JavaScript : si le script tombe, le site devient inutilisable au clavier.
   ========================================================================== */

:root{
  /* --- encres et fonds --------------------------------------------------
     Demande du client le 30 aout 2026 : « un univers plus naturel ».

     Le reflexe aurait ete un fond creme avec un accent terracotta. C est
     precisement le cliche du visuel genere par IA, et la regle 6 du brief
     l interdit. On n a donc rien choisi au gout : les 69 oeuvres ont ete
     echantillonnees, 223 200 pixels.

     Ce qu elles disent. Saturation moyenne 0,204 : sa peinture est sourde,
     jamais vive. Clarte moyenne 0,427. Et deux poles de teinte, l orange et
     l ambre pour 49 % des pixels colores, le bleu pour 29 %. La fourrure et
     la terre contre le ciel et l eau.

     Couleur moyenne des 69 toiles : #727065, teinte 50 degres. Le fond en
     est tire, eclairci a l extreme ; l encre aussi, assombrie. Ce ne sont
     donc pas un blanc et un noir d institution, ce sont SES gris.

     L accent est le BLEU, pas l orange. L orange domine deja dans les
     tableaux : en faire la couleur de l interface la mettrait en
     concurrence avec l oeuvre. Le bleu de ses ciels recule au lieu de
     rivaliser, et il evite la terracotta du cliche.

     CORRECTION du 31 aout 2026 : le fond revient au blanc. Le papier tire de
     la teinte moyenne de ses toiles, #F7F6F3, lisait « jaune » pour le client.
     Il avait raison, et la mesure ne le contredit pas : elle renseignait le
     monde interieur des toiles, pas le mur qui les porte. Les 12 galeries et
     musees releves sont blancs, tous.

     Ce que la mesure garde quand meme : l encre est un noir CHAUD et non #000,
     et l accent est le bleu de ses ciels et non une terracotta. Ce sont ses
     valeurs a lui, posees sur un mur neutre.

     Contrastes reverifies sur blanc, seuil WCAG 4,5 pour le texte courant. */
  --bg:#FFFFFF;               /* le mur, blanc comme celui d une galerie */
  --bg2:#F4F4F2;              /* pour une vignette absente */
  --ink:#1C1A14;              /* 17,40:1. Un noir chaud, jamais #000 */
  --ink2:#49473C;             /*  9,33:1. Texte courant secondaire */
  --ink3:#646154;             /*  6,21:1. Cartels, dates, mentions */
  --acc:#274768;              /*  9,60:1. Le bleu de ses ciels et de ses eaux */
  --line:#E6E6E4;
  --line2:#22211C;            /* le filet fort, celui qui ouvre une section */
  --sold:#8A8677;

  /* --- typographie ------------------------------------------------------
     Deux familles, chacune avec un role, aucune pour decorer.

     Archivo porte l interface : navigation, cartels, prix, libelles. Meme
     registre de grotesque que MoMA Sans, qui est proprietaire, avec une
     couverture vietnamienne reelle.

     Source Serif 4 porte SES mots : les 43 histoires de terrain, sa
     biographie, ses citations. Ce ne sont pas des libelles, c est de la
     lecture, et une note de terrain a une police pour se lire. Le choix
     n est pas esthetique : la mesure au canvas notee dans CLAUDE.md donne
     Source Serif 4 comme la seule du corpus qui tienne les tons vietnamiens
     empiles a un interligne de 1,00, la ou Playfair demande 1,21. */
  --f:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* La police des titres.

     Vaut --f tant qu'aucune police n'est déposée dans assets/polices/. Dès
     qu'un fichier titres.woff2 s'y trouve, functions.php redéfinit ce jeton
     seul, et tous les titres du site suivent : rien d'autre à changer.

     Archivo reste EN SECOND dans la pile, et ce n'est pas de la prudence.
     Une police d'affichage achetée sur une place de marché couvre le latin
     occidental et s'arrête là. Le vietnamien empile ses tons, ế ộ ữ ằ, et
     ajoute Đ, Ơ, Ư : environ 134 caractères de plus. Sans ce second rang, le
     navigateur irait chercher ces lettres dans une police qu'il choisit seul,
     et « Đào Văn Hoàng » s'afficherait en deux typographies au milieu du mot.
     Avec Archivo derrière, la substitution reste au moins choisie.

     docs/police-vietnamien.py dit en une commande si une police donnée sait
     écrire le site. */
  --f-titre:var(--f);
  --fs:"Source Serif 4","Iowan Old Style",Georgia,"Times New Roman",serif;
  --t1:60px; --t2:40px; --t3:30px; --t4:22px; --t5:18px; --t6:16px; --t7:13px;
  --lh-titre:1.06;            /* jamais 1.00 : voir ecart 1 */
  --lh-corps:1.45;
  --ls:-0.02em;               /* MoMA, exactement */

  /* --- espacement, multiples de 8 -------------------------------------- */
  --e1:8px; --e2:16px; --e3:24px; --e4:32px; --e5:48px; --e6:64px; --e7:96px; --e8:128px;

  /* --- structure -------------------------------------------------------- */
  --page:1280px;              /* MoMA : 128rem a racine 10px */
  --gout:48px;                /* gouttiere laterale */
  --mesure:800px;             /* 45 a 55 signes */
  /* Hauteur figee des oeuvres.
     428px venait du MoMA, dont les rangees sont editoriales et melent oeuvres
     et articles. Le client prefere chrisbacon.com, remesure le 30 aout 2026 :
     largeur mediane identique a la notre, 571px, mais hauteur mediane 578px et
     seulement 101px de blanc entre deux oeuvres, contre 149 chez nous. Son
     rapport image sur vide est de 5,7 pour 1, le notre etait de 2,9. Le
     probleme n etait donc pas la largeur, c etait la hauteur et l air.
     576px est sa valeur, arrondie au multiple de 8.
     Consequence assumee : sur les 69 sources tirees du PDF, 51 restent nettes
     et 18 sont agrandies. Ces 18 sont deja celles qu il faut rephotographier,
     on ne rapetisse pas toute la galerie pour cacher un defaut de source. */
  --rangee:576px;

  /* --mur : la hauteur d une rangee de LA GALERIE, et elle differe.

     L erreur, mesuree le 31 aout 2026. Le releve ci-dessus constate que notre
     largeur mediane egalait deja celle de Bacon, 571px, puis regle la hauteur
     sur la sienne, 576px. Or ses oeuvres sont presque carrees, rapport 0,99,
     et les notres sont en paysage, rapport median 1,34. Fixer la hauteur a
     576 porte donc notre largeur a 769px, un tiers de plus que la reference
     qu on venait de verifier, et une seule oeuvre tient par rang : la galerie
     faisait 15 351px de haut pour vingt-quatre toiles, et c est la page ou
     l on vend.

     408px a ete choisi en essayant 432, 408 et 384 sur la vraie galerie :
     largeur mediane 543px, a cinq pour cent de la valeur de Bacon, deux
     oeuvres par rang dans la plupart des cas, trois quand elles sont
     etroites, une seule pour les panoramas, qui la meritent. La page tombe
     de 15 351 a 8 809px. 384 descendait a 7 460 mais ramenait les toiles a
     511px : on ne rapetisse pas une toile a 3 680 dollars pour gagner du
     defilement.

     --rangee garde 576 la ou une seule image porte la page : la rangee
     editoriale de l accueil et le defilement horizontal, ou la hauteur ne
     coute aucune longueur de page. */
  --mur:408px;

  /* --- mouvement, par propriete comme MoMA ------------------------------ */
  --d-coul:200ms; --c-coul:ease-in;
  --d-opac:600ms; --c-opac:linear;
  --d-forme:600ms; --c-forme:ease-in-out;
}

@media(max-width:900px){
  :root{
    --t1:32px; --t2:28px; --t3:24px; --t4:20px; --t5:17px; --t6:16px;
    /* MoMA divise ses espacements par 0.75 sur mobile, avec un plancher a 8px */
    --e3:18px; --e4:24px; --e5:36px; --e6:48px; --e7:72px; --e8:96px;
    --gout:24px; --rangee:272px; --mur:272px;
  }
}

:lang(vi){ --lh-titre:1.12 }   /* les tons empiles demandent jusqu'a 1.21 */

/* ==========================================================================
   BASE
   ========================================================================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f); font-size:var(--t5); font-weight:400; line-height:var(--lh-corps);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-synthesis-weight:none;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}   /* MoMA : 65 liens sur 65 */
button{font:inherit; color:inherit}

::selection{background:var(--ink); color:var(--bg)}

/* Anneau natif, jamais conditionne a un script. */
:focus-visible{outline:2px solid var(--ink); outline-offset:3px}

/* Quatre lignes que la majorite des sites primes oublient. */
@media (prefers-reduced-motion:reduce){
  *,::before,::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
  .rv{opacity:1!important; transform:none!important}
}

.wrap{max-width:var(--page); margin:0 auto; padding-left:var(--gout); padding-right:var(--gout)}
.pad{padding-top:var(--e6); padding-bottom:var(--e8)}
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.screen-reader-text:focus{
  position:static!important; width:auto; height:auto; clip-path:none;
  padding:var(--e2); background:var(--ink); color:var(--bg);
}

/* ==========================================================================
   TYPOGRAPHIE
   Six tailles, deux graisses. La graisse 800 porte presque tout, comme le 900
   de MoMA. La 400 ne sert qu'au texte courant.
   ========================================================================== */
h1,h2,h3,h4,.pg,.t,.logo{
  font-family:var(--f-titre);
  font-weight:800; line-height:var(--lh-titre); letter-spacing:var(--ls);
  margin:0; text-wrap:balance;
}
.pg{font-size:var(--t2); max-width:22ch; margin-bottom:var(--e3)}
h2{font-size:var(--t3)}
h3{font-size:var(--t4)}

p{margin:0 0 var(--e2); max-width:var(--mesure)}
p:last-child{margin-bottom:0}
.lead{font-size:var(--t4); line-height:1.35; font-weight:400; color:var(--ink2); max-width:52ch}
.k,.crumb,.sp,.size,.meta,.d,.cap{
  font-size:var(--t7); font-weight:400; line-height:1.4; letter-spacing:.01em; color:var(--ink3);
}
.k,.crumb{text-transform:uppercase; letter-spacing:.08em}
.crumb{margin:0 0 var(--e4)}
.crumb a{color:var(--ink3); transition:color var(--d-coul) var(--c-coul)}
.crumb a:hover{color:var(--ink)}
.crumb b{color:var(--ink); font-weight:400}

/* ==========================================================================
   EN-TETE
   ========================================================================== */
header.site{
  /* Aucun filet. Le fond est opaque : rien ne transparait quand le contenu
     defile dessous, le trait ne servait donc a rien. */
  position:sticky; top:0; z-index:20; background:var(--bg);
}
header.site .bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--e1) var(--e4);
  min-height:64px; padding-top:var(--e2); padding-bottom:var(--e2);
}
header.site .bar>*{min-width:0}
.logo{font-size:var(--t4); font-weight:800; letter-spacing:var(--ls); line-height:var(--lh-titre); white-space:nowrap}
nav.main{display:flex; flex-wrap:wrap; gap:var(--e1) var(--e3); margin-left:auto}
nav.main a{
  font-size:var(--t7); font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  padding:10px 0; min-height:44px; display:inline-flex; align-items:center;
  transition:opacity var(--d-coul) var(--c-coul);
}
nav.main a:hover{opacity:.55}
nav.main a.on{box-shadow:inset 0 -2px 0 var(--ink)}
.tools{display:flex; align-items:center; gap:var(--e2); margin-left:auto}
.lang{display:flex; gap:2px}
.lang a{
  font-size:var(--t7); color:var(--ink3); min-width:44px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:color var(--d-coul) var(--c-coul);
}
.lang a:hover{color:var(--ink)}
.lang a.on{color:var(--ink); font-weight:800}
.cartbtn{
  font-size:var(--t7); font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  background:var(--ink); color:var(--bg); border:0; padding:13px 20px; min-height:44px;
  display:inline-flex; align-items:center; gap:6px;
  transition:background var(--d-coul) var(--c-coul), color var(--d-coul) var(--c-coul);
}
.cartbtn:hover{background:var(--ink); color:var(--bg)}
.mnav{display:none; margin-left:auto; flex:1 1 100%}
.mnav select{
  font:inherit; font-size:var(--t6); width:100%; min-height:44px;
  padding:11px 14px; background:var(--ink); color:var(--bg); border:0;
}
@media(max-width:900px){
  nav.main{display:none}
  .mnav{display:block; order:3}
  .tools{order:2}
}

/* ==========================================================================
   HERO
   MoMA pose une image en bandeau plein cadre de 1440 x 810 juste sous l'en-tete,
   puis le titre en dessous. Bateman fait de meme en 2880 x 813. On garde le
   principe : l'oeuvre d'abord, le nom ensuite, et l'oeuvre n'est jamais recadree.
   ========================================================================== */
.hero{padding-top:var(--e5)}
.hero .art{margin:0 0 var(--e5)}
.hero .art img{width:100%; height:auto}      /* jamais de cover sur une toile */
.hero .cap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--e1) var(--e3); margin-top:var(--e2)}
.hero h1{font-size:var(--t1); max-width:14ch; margin:0 0 var(--e3)}
.hero .sub{font-size:var(--t4); line-height:1.35; color:var(--ink2); max-width:46ch; margin:0 0 var(--e3)}
.hero .hmeta{font-size:var(--t7); color:var(--ink3); max-width:44ch; margin:0}
.heroGrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--e5) var(--e6); align-items:end}
@media(max-width:900px){ .heroGrid{grid-template-columns:1fr; gap:var(--e4)} }

/* ==========================================================================
   LES TROIS PORTES
   ========================================================================== */
.doors{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--e5);
  margin-top:var(--e8);
}
.doors a{display:flex; flex-direction:column; gap:var(--e2)}
.doors .im{overflow:hidden}
.doors .im img{width:100%; height:auto}
.doors .no{font-size:var(--t7); color:var(--ink3); letter-spacing:.08em}
.doors .t{font-size:var(--t4); font-weight:800; letter-spacing:var(--ls); line-height:var(--lh-titre)}
.doors .s{font-size:var(--t6); color:var(--ink2); line-height:1.4}
.doors .cta{
  font-size:var(--t7); font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  transition:opacity var(--d-coul) var(--c-coul);
}
.doors a:hover .cta{opacity:.55}
@media(max-width:900px){ .doors{grid-template-columns:1fr; gap:var(--e5)} }

/* ==========================================================================
   EN-TETE DE SECTION
   ========================================================================== */
.shead{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--e2) var(--e4);
  margin-top:var(--e8);
}
.shead h2{font-size:var(--t3)}
.shead .more{
  margin-left:auto; font-size:var(--t7); font-weight:800;
  text-transform:uppercase; letter-spacing:.08em;
  transition:opacity var(--d-coul) var(--c-coul);
}
.shead .more:hover{opacity:.55}

/* ==========================================================================
   LES OEUVRES

   Le motif central, et le plus important du systeme.

   Chris Bacon empile ses toiles dans une colonne unique de 571px : 46 images
   font 27 631px de page. A 69 oeuvres cela ferait 48 000px, injouable en 4G.
   MoMA resout exactement ce probleme : hauteur figee, largeur libre. Aucune
   oeuvre n'est recadree, et l'alignement se fait par le bas.
   ========================================================================== */
.works{margin-top:var(--e2)}

/* Rangee dense : la galerie, les series, les suggestions. */
.rangee{
  display:flex; gap:var(--e3); align-items:flex-end;
  padding:var(--e4) 0 var(--e2);
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:thin;                 /* on la garde : elle dit la longueur */
}
.rangee>*{flex:0 0 auto}
.rangee img{height:var(--rangee); width:auto}

/* Rangee editoriale : l'accueil, une oeuvre qui a le temps de respirer. */
.work{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:var(--e5) var(--e6); align-items:center;
  padding:var(--e6) 0;
}

.work .im img{width:100%; height:auto}    /* jamais de recadrage */
.work h3{font-size:var(--t3); margin:0 0 var(--e1)}
.work h3 a{transition:opacity var(--d-coul) var(--c-coul)}
.work h3 a:hover{opacity:.55}
.work .fr{font-size:.5em; vertical-align:super; color:var(--ink3)}
.work .sp{margin:0 0 var(--e3)}
.work .story{font-size:var(--t6); line-height:var(--lh-corps); color:var(--ink2); max-width:46ch; margin:0 0 var(--e3)}
.work .buy{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2) var(--e3)}
.work .price{font-size:var(--t4); font-weight:800; letter-spacing:var(--ls); font-variant-numeric:tabular-nums}
.sold{font-size:var(--t7); text-transform:uppercase; letter-spacing:.08em; color:var(--sold)}
@media(max-width:900px){
  .work{grid-template-columns:1fr; gap:var(--e3); padding:var(--e5) 0}
}

/* ==========================================================================
   BOUTONS
   ========================================================================== */
.ln{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--t7); font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  background:var(--ink); color:var(--bg); border:0; padding:14px 26px; min-height:44px;
  cursor:pointer;
  transition:background var(--d-coul) var(--c-coul), color var(--d-coul) var(--c-coul);
}
.ln:hover{background:var(--ink); color:var(--bg)}
.ln.q{border:none; padding:13px 0; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}
.ln.q:hover{background:none; color:var(--ink); opacity:.55}

.filters{
  display:flex; flex-wrap:wrap; gap:var(--e3); margin-top:var(--e3);
}
.filters button{
  background:none; border:none; cursor:pointer; padding:14px 0; margin-bottom:-1px;
  font-size:var(--t7); font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink3); min-width:44px; min-height:44px;
  transition:color var(--d-coul) var(--c-coul);
}
.filters button:hover{color:var(--ink)}
.filters button.on{color:var(--ink); box-shadow:inset 0 -2px 0 var(--ink)}

/* ==========================================================================
   LISTES A FILETS : presse, journal, contact, metiers
   ========================================================================== */
.metiers{margin-top:var(--e5)}
.metier{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--e3) var(--e6); padding:var(--e5) 0;
}

.metier h3{font-size:var(--t4); margin:0 0 var(--e2)}
.metier .who{font-size:var(--t7); text-transform:uppercase; letter-spacing:.08em; color:var(--ink3); margin:0 0 var(--e1)}
.metier p{font-size:var(--t6); color:var(--ink2)}
.metier ul{margin:0 0 var(--e3); padding:0; list-style:none; font-size:var(--t6); color:var(--ink2)}
.metier li{padding:6px 0}
.metier .ref{display:block; font-size:var(--t7); color:var(--ink3); margin:0 0 var(--e3)}
@media(max-width:900px){ .metier{grid-template-columns:1fr} }

.plist,.jlist,.clist{margin-top:var(--e4)}
.plist>div,.jlist>div,.clist>div{
  display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr);
  gap:var(--e2) var(--e4); padding:var(--e2) 0;
}
.plist b,.clist b{font-weight:800; letter-spacing:var(--ls)}
.plist span{color:var(--ink2)}
.jlist h3{font-size:var(--t4); margin:0 0 var(--e1)}
.jlist p{font-size:var(--t6); color:var(--ink2); max-width:60ch}
.clist{max-width:var(--mesure)}
@media(max-width:900px){
  .plist>div,.jlist>div,.clist>div{grid-template-columns:1fr; gap:6px}
}

/* --- biographie ------------------------------------------------------- */
.about{display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:var(--e6); align-items:start; margin-top:var(--e5)}
.about .txt p{font-size:var(--t5); color:var(--ink2); max-width:var(--mesure)}
.about blockquote{
  font-size:var(--t3); font-weight:800; line-height:var(--lh-titre); letter-spacing:var(--ls);
  color:var(--ink); margin:var(--e5) 0; padding:0; max-width:26ch;
}
.tl{list-style:none; margin:var(--e4) 0 0; padding:0; max-width:var(--mesure)}
.tl li{display:grid; grid-template-columns:96px minmax(0,1fr); gap:var(--e3); padding:8px 0; font-size:var(--t6)}
.tl .y{color:var(--ink3); font-variant-numeric:tabular-nums}
@media(max-width:900px){ .about{grid-template-columns:1fr; gap:var(--e4)} }

/* --- objets GAEA ------------------------------------------------------- */
.ggrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--e5) var(--e4); margin:var(--e5) 0}
.g{display:flex; flex-direction:column; gap:var(--e1)}
.g .ph{aspect-ratio:1; overflow:hidden}
.g .ph img{width:100%; height:100%; object-fit:cover}  /* photo de produit, pas une toile */
.g h3{font-size:var(--t6); font-weight:800}
.g p{font-size:var(--t7); color:var(--ink2); margin:0}
.g .pr{font-size:var(--t6); font-weight:800; font-variant-numeric:tabular-nums}

/* --- la lettre --------------------------------------------------------- */
.news{margin-top:var(--e8)}
.news h3{font-size:var(--t3); max-width:24ch; margin:0 0 var(--e2)}
.news p{font-size:var(--t6); color:var(--ink2); margin:0 0 var(--e3)}
/* Le seul trait qui reste du site, et il porte une information : il montre
   ou l on ecrit. Un champ de saisie sans limite visible n est pas un champ. */
.news form{display:flex; max-width:460px; border-bottom:1px solid var(--ink3)}
.news input{flex:1; min-height:48px; padding:12px 2px; border:none; background:none; font:inherit; font-size:var(--t5); color:var(--ink)}
.news input::placeholder{color:var(--ink3)}
.news input:focus{outline:none}
.news form:focus-within{border-bottom-width:2px}
.news button{
  background:none; border:none; cursor:pointer; padding:0 4px;
  font-size:var(--t7); font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  transition:opacity var(--d-coul) var(--c-coul);
}
.news button:hover{opacity:.55}

.notice{font-size:var(--t6); line-height:var(--lh-corps); color:var(--ink2); max-width:var(--mesure); margin-top:var(--e6)}
.notice b{color:var(--ink); font-weight:800}

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
footer.site{margin-top:var(--e8); padding:var(--e5) 0 var(--e7); font-size:var(--t7); color:var(--ink3)}
footer .row{display:flex; flex-wrap:wrap; gap:var(--e2) var(--e5)}
footer .row+.row{margin-top:var(--e3)}
footer .flink{
  font-size:var(--t7); font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink); min-width:44px; min-height:44px; display:inline-flex; align-items:center;
  transition:opacity var(--d-coul) var(--c-coul);
}
footer .flink:hover{opacity:.55}
footer b{color:var(--ink); font-weight:800}

/* ==========================================================================
   APPARITION AU DEFILEMENT
   Un seul geste, sur l'opacite uniquement, a la duree de MoMA.
   Aucun zoom sur une oeuvre : quatre references sur dix le refusent, et un
   scale recadre la toile pendant le survol.
   ========================================================================== */
.rv{opacity:0; transition:opacity var(--d-opac) var(--c-opac)}
.rv.in{opacity:1}

/* ==========================================================================
   LA VISIONNEUSE

   Modelee sur celle de chrisbacon.com, mesuree au navigateur :
   voile rgba(246,246,246,.98) et non noir, image en `contain`, corps verrouille.
   Un mur de galerie est blanc. Une toile lue sur du noir change de valeurs :
   ses blancs deviennent gris, ses ombres se ferment.
   ========================================================================== */
[data-voir]{cursor:zoom-in}

.voile{
  position:fixed; inset:0; z-index:1000;
  background:rgba(255,255,255,.98);   /* le mur du site, pas le gris de Bacon */
  display:grid;
  grid-template-columns:var(--e7) minmax(0,1fr) var(--e7);
  grid-template-rows:var(--e6) minmax(0,1fr) var(--e6);
  align-items:center; justify-items:center;
  padding:var(--e3);
}
.voile[hidden]{display:none}

.voile-f{
  grid-column:2; grid-row:2; margin:0;
  display:flex; flex-direction:column; align-items:center; gap:var(--e2);
  max-width:100%; max-height:100%;
}
.voile-f img{
  max-width:100%; max-height:calc(100vh - var(--e8));
  width:auto; height:auto;
  object-fit:contain;                 /* une toile ne se recadre jamais */
}
.voile-f figcaption{
  font-size:var(--t7); color:var(--ink3); text-align:center; max-width:70ch;
}

.voile button{
  background:none; border:none; cursor:pointer;
  font-size:var(--t7); font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  min-width:44px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:opacity var(--d-coul) var(--c-coul);
}
.voile button:hover{opacity:.55}
.voile button[hidden]{display:none}
.voile-x{grid-column:3; grid-row:1; justify-self:end; align-self:start}
.voile-p{grid-column:1; grid-row:2; font-size:var(--t3)}
.voile-s{grid-column:3; grid-row:2; font-size:var(--t3)}
.voile-n{
  grid-column:2; grid-row:3; margin:0; align-self:end;
  font-size:var(--t7); color:var(--ink3); font-variant-numeric:tabular-nums;
}

@media(max-width:900px){
  .voile{grid-template-columns:44px minmax(0,1fr) 44px; grid-template-rows:44px minmax(0,1fr) 44px; padding:var(--e2)}
  .voile-f img{max-height:calc(100vh - 200px)}
}

/* ==========================================================================
   LE MUR : la galerie des 69 oeuvres

   Motif MoMA. Hauteur figee, largeur libre, alignement par le bas comme un
   accrochage. Aucune toile recadree, et beaucoup d'oeuvres par ecran : Bacon
   fait 27 631px pour 46 images, ce mur en montre 24 en trois ecrans.
   ========================================================================== */
.mur{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  /* Bacon laisse 101px entre deux oeuvres, cartel compris. Le notre en faisait
     149 : 64px de gouttiere plus 85px de cartel. On descend la gouttiere a 48. */
  gap:var(--e5) var(--e4); margin-top:var(--e5);
}
/* Le cartel est serre a dessein. Bacon n affiche aucun prix, son cartel tient
   sur une ligne et il laisse 101px entre deux oeuvres. Nous en affichons trois,
   titre, espece et prix, decision du 30 aout. Pour tenir malgre tout le meme
   rapport image sur vide, le cartel est compacte plutot que la rangee collee :
   un bloc de legende serre se lit comme un cartel de musee, deux oeuvres
   collees se lisent comme une erreur. */
.mur-i{
  flex:0 0 auto; display:flex; flex-direction:column; gap:2px;
  max-width:100%; line-height:1.25;
}
.mur-i img{
  height:var(--mur); width:auto; max-width:100%;
  transition:opacity var(--d-coul) var(--c-coul);
}
.mur-i:hover img{opacity:.82}   /* pas de zoom : un scale recadre la toile */
.mur-t{font-size:var(--t6); font-weight:800; letter-spacing:var(--ls); margin-top:var(--e2); line-height:1.2}
.mur-m{font-size:var(--t7); color:var(--ink3); line-height:1.3}
.mur-p{font-size:var(--t7); font-weight:800; font-variant-numeric:tabular-nums}

/* --- filtres ----------------------------------------------------------- */
.filtres{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--e3) var(--e5); margin-top:var(--e5);
  padding:var(--e3) 0;
}
.filtre{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e1) var(--e2)}
.filtre .k{flex:1 1 100%; margin-bottom:2px}
.filtre a{
  font-size:var(--t7); color:var(--ink3); min-height:44px;
  display:inline-flex; align-items:center;
  transition:color var(--d-coul) var(--c-coul);
}
.filtre a:hover{color:var(--ink)}
.filtre a.on{color:var(--ink); font-weight:800; box-shadow:inset 0 -2px 0 var(--ink)}
.filtre .n{color:var(--ink3); font-variant-numeric:tabular-nums; font-weight:400}
.compte{font-size:var(--t7); color:var(--ink3); margin:var(--e3) 0 0; font-variant-numeric:tabular-nums}

/* --- etat vide : il dit quoi faire, il ne constate pas ------------------ */
.vide{padding:var(--e7) 0; max-width:var(--mesure)}
.vide h2{font-size:var(--t3); margin:0 0 var(--e2)}
.vide p{color:var(--ink2); margin-bottom:var(--e3)}

/* --- pagination -------------------------------------------------------- */
.navigation.pagination{margin-top:var(--e8)}
.nav-links{display:flex; flex-wrap:wrap; gap:var(--e1)}
.page-numbers{
  font-size:var(--t7); font-weight:800; min-width:44px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 10px; font-variant-numeric:tabular-nums; color:var(--ink3);
  transition:background var(--d-coul) var(--c-coul), color var(--d-coul) var(--c-coul);
}
.page-numbers:hover{background:var(--bg2)}
.page-numbers.current{background:var(--ink); color:var(--bg); border-color:var(--ink)}

/* ==========================================================================
   LA FICHE D'UNE OEUVRE
   Une colonne, la toile en grand, rien qui la concurrence. Modele Bacon.
   ========================================================================== */
.oeuvre-im{margin:0 0 var(--e5)}
.oeuvre-im img{width:100%; height:auto}
.oeuvre-im figcaption{margin-top:var(--e1); text-align:right}
.oeuvre-txt{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:var(--e5) var(--e6); align-items:start;
}
.oeuvre-txt>h1{grid-column:1/-1}
.oeuvre .cartel{display:grid; grid-template-columns:auto 1fr; gap:8px var(--e3); margin:0; font-size:var(--t6)}
.oeuvre .cartel dt{font-size:var(--t7); color:var(--ink3); text-transform:uppercase; letter-spacing:.08em; padding-top:3px}
.oeuvre .cartel dd{margin:0}
.oeuvre .cartel dd.lat{font-style:italic}
.oeuvre .histoire{grid-column:1; font-size:var(--t5); color:var(--ink2); max-width:46ch}
.oeuvre .histoire p{margin:0 0 var(--e2)}
.oeuvre .achat{
  grid-column:2; grid-row:2/span 2; display:flex; flex-direction:column; gap:var(--e2);

}
.oeuvre .achat .price{font-size:var(--t2); font-weight:800; letter-spacing:var(--ls); font-variant-numeric:tabular-nums; margin:0}
.oeuvre .achat .ln{align-self:start}
.rassure{list-style:none; margin:var(--e2) 0 0; padding:0; font-size:var(--t7); color:var(--ink3)}
.rassure li{padding:5px 0}
@media(max-width:900px){
  .oeuvre-txt{grid-template-columns:1fr}
  .oeuvre .histoire,.oeuvre .achat{grid-column:1; grid-row:auto}
}

/* Une oeuvre sans photographie occupe la meme place, et dit ce qui manque.
   La cacher ferait mentir le compteur et laisserait le travail invisible. */
.mur-vide{
  display:flex; align-items:center; justify-content:center; text-align:center;
  width:calc(var(--mur) * .78); height:var(--mur);
  background:none;
  font-size:var(--t7); color:var(--ink3); padding:var(--e2);
}
.mur-sans .mur-t{color:var(--ink2)}

/* ==========================================================================
   QUI IL EST

   Ajoute le 30 aout 2026. Le client : « il faut qu'on decouvre son histoire ».
   L'accueil n'en disait rien, on passait du hero aux oeuvres sans jamais
   rencontrer l'homme.

   Colonne asymetrique du MoMA, mesuree : 773px de texte principal contre 362
   de cote. Le texte tient la mesure, le lien vit dans la marge et non sous le
   paragraphe, ce qui evite le bouton centre qui fait page generee.
   ========================================================================== */
.qui{margin-top:var(--e8)}
.qui .k{display:block; margin-bottom:var(--e3)}
.qui-g{display:grid; grid-template-columns:minmax(0,773fr) minmax(0,362fr); gap:var(--e5)}
.qui-t{
  max-width:var(--mesure); margin:0;
  font-size:var(--t4); line-height:var(--lh-corps); color:var(--ink2);
}
.qui-l{margin:0}
.qui-l .more{
  font-size:var(--t7); font-weight:800;
  text-transform:uppercase; letter-spacing:.08em;
  transition:opacity var(--d-coul) var(--c-coul);
}
.qui-l .more:hover{opacity:.55}

/* ==========================================================================
   UNE NOTE DE TERRAIN

   Le bloc qui porte sa voix. Le texte vient de la base, ce sont ses mots :
   43 oeuvres portent une histoire, 68 phrases a la premiere personne.

   L'image garde la hauteur figee des rangees, donc aucun recadrage et un
   alignement par le bas comme un accrochage. La citation est en --t4 et non
   en gros : une note de terrain n'est pas un slogan, elle se lit.
   ========================================================================== */
.note{margin-top:var(--e8)}
.note .k{display:block; margin-bottom:var(--e4)}
.note-g{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:var(--e5); align-items:end; margin:0;
}
.note-im{display:block}
.note-im img{
  display:block; height:var(--rangee); width:auto; max-width:100%;
  transition:opacity var(--d-opac) var(--c-opac);
}
.note-im:hover img{opacity:.86}
.note-t{max-width:var(--mesure)}
.note-t blockquote{
  margin:0; font-size:var(--t4); line-height:var(--lh-corps); color:var(--ink);
}
.note-s{
  display:flex; flex-wrap:wrap; gap:var(--e1) var(--e2);
  margin:var(--e3) 0 0; font-size:var(--t7); color:var(--ink3);
}
.note-s cite{font-style:normal; font-weight:800; color:var(--ink)}
.note-s a{transition:opacity var(--d-coul) var(--c-coul)}
.note-s a:hover{opacity:.55}

/* Sous 900px les deux blocs passent en une colonne. L'image reprend une
   hauteur libre : a 390px, 428px de haut mangerait tout l'ecran. */
@media (max-width:900px){
  .qui-g{grid-template-columns:1fr; gap:var(--e3)}
  .note-g{grid-template-columns:1fr; gap:var(--e3); align-items:start}
  .note-im img{height:auto; width:100%}
}

/* ==========================================================================
   LA PAGE DE L ARTISTE

   « Il faut qu on decouvre son histoire », 30 aout 2026. La page etait vide.

   Elle ne raconte pas sa vie a sa place : elle montre ses notes de terrain,
   qui sont ses mots, et les especes qu il a peintes, qui sont sa preuve.
   ========================================================================== */

/* Le texte qu il ecrira lui-meme dans l editeur. Colonne de lecture, pas de
   pleine largeur : une biographie se lit, elle ne se balaie pas. */
.bio{margin-top:var(--e6)}
.bio-t{max-width:var(--mesure); font-size:var(--t5); line-height:var(--lh-corps); color:var(--ink2)}
.bio-t p{margin:0 0 var(--e3)}
.bio-t p:last-child{margin-bottom:0}

.lead{
  max-width:var(--mesure); margin:var(--e3) 0 0;
  font-size:var(--t5); line-height:var(--lh-corps); color:var(--ink3);
}

/* Trois notes cote a cote. Le filet superieur les separe sans cadre : une
   carte a coins arrondis et liseré de couleur est exactement ce que le brief
   interdit a la regle 6. */
.mots{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--e5); margin-top:var(--e5);
}
.mot{margin:0}
.mot-im{display:block; margin-bottom:var(--e3)}
.mot-im img{display:block; width:100%; height:auto; transition:opacity var(--d-opac) var(--c-opac)}
.mot-im:hover img{opacity:.86}
.mot blockquote{margin:0; font-size:var(--t6); line-height:var(--lh-corps); color:var(--ink)}
.mot figcaption{
  display:flex; flex-wrap:wrap; gap:var(--e1) var(--e2);
  margin-top:var(--e2); font-size:var(--t7); color:var(--ink3);
}
.mot cite{font-style:normal; font-weight:800; color:var(--ink)}

/* Les 61 especes. Une liste dense, pas une grille de cartes : l objet est de
   montrer l etendue d un coup d oeil, et de mener au filtre correspondant. */
.especes{
  display:flex; flex-wrap:wrap; gap:var(--e1) var(--e2);
  margin:var(--e4) 0 0; padding:0; list-style:none;
}
.especes li{margin:0}
.especes a{
  display:inline-flex; align-items:baseline; gap:6px;
  padding:6px 0; font-size:var(--t6); color:var(--ink2);
  border-bottom:1px solid transparent;
  transition:color var(--d-coul) var(--c-coul), border-color var(--d-coul) var(--c-coul);
}
.especes a:hover{color:var(--ink); border-bottom-color:var(--ink)}
.especes b{font-size:var(--t7); font-weight:400; color:var(--ink3)}

/* La citation de la biographie. C est la meilleure phrase du projet, et elle
   n etait nulle part sur le site. Elle respire entre deux paragraphes, sans
   guillemet decoratif ni barre de couleur : le filet et la taille suffisent. */
.bio-q{
  margin:var(--e5) 0; padding:var(--e4) 0;

  max-width:var(--mesure);
}
.bio-q p{
  margin:0; font-size:var(--t3); line-height:var(--lh-titre);
  letter-spacing:var(--ls); color:var(--ink);
}

/* La frise. Une annee, un fait. Pas de ligne verticale ni de pastille : la
   colonne d annees aligne l oeil toute seule. */
.frise{margin:var(--e5) 0 0; padding:0; list-style:none; max-width:var(--mesure)}
.frise li{
  display:grid; grid-template-columns:96px 1fr; gap:var(--e3);
  padding:var(--e2) 0;
  font-size:var(--t6); line-height:var(--lh-corps);
}

.frise .y{font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums}
.frise li span:last-child{color:var(--ink2)}
@media (max-width:600px){
  .frise li{grid-template-columns:1fr; gap:4px}
}

/* ==========================================================================
   LES COMMANDES

   Un decideur de parc ou d hotel ne lit pas, il verifie. Le chiffre passe
   donc avant la prose : surface, nombre d especes, duree, en tete de bloc.
   Filet simple, aucune carte a coins arrondis, regle 6 du brief.
   ========================================================================== */
.projets{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:var(--e5) var(--e6); margin-top:var(--e5);
}
.projet{}
.projet-im{display:block; margin-bottom:var(--e3)}
.projet-im img{display:block; width:100%; height:auto; transition:opacity var(--d-opac) var(--c-opac)}
.projet-im:hover img{opacity:.86}
.projet h3{font-size:var(--t4); margin:0}
.projet-l{margin:6px 0 0; font-size:var(--t7); color:var(--ink3)}
.projet-t p{font-size:var(--t6); line-height:var(--lh-corps); color:var(--ink2); margin:var(--e2) 0 0}

/* Les chiffres du projet. Enumeration horizontale, separee par des points
   medians en CSS : le meme separateur que les cartels d oeuvre. */
.projet-c{
  display:flex; flex-wrap:wrap; gap:4px var(--e2);
  margin:var(--e2) 0 0; padding:0; list-style:none;
  font-size:var(--t7); font-weight:800; letter-spacing:.02em; color:var(--ink);
}
.projet-c li{display:flex; align-items:baseline; gap:var(--e2)}
.projet-c li + li::before{content:"·"; color:var(--ink3); font-weight:400}

/* ==========================================================================
   L EN-TETE DE LA GALERIE, COMPACTE

   Mesure du 30 aout 2026 : la premiere toile commencait a 572px, sous 240px de
   vide pur pour 253px de contenu reel. Chez Bacon on est devant une peinture
   des le premier ecran, et c est ce que le client prefere.

   On ne supprime ni le titre ni les filtres, 69 oeuvres en ont besoin. On
   supprime le vide. Le fil d Ariane part aussi : la galerie est une page de
   premier niveau, la navigation la marque deja comme active, et « Accueil / »
   n apprend rien a personne.
   ========================================================================== */
.galerie-tete{padding-top:var(--e4)}
.galerie-tete .pg{margin-bottom:var(--e2)}
.galerie-tete .lead{margin-top:var(--e2)}
.galerie-tete .filtres{margin-top:var(--e4); padding:var(--e2) 0}
.galerie-tete .compte{margin-top:var(--e2)}
.galerie-tete .mur{margin-top:var(--e4)}

/* Sur mobile la hauteur figee ne tient plus, et c est une erreur de la garder.
   Mesure du 30 aout 2026 : a 390px de large il reste 342px utiles, or une toile
   en largeur a 272px de haut en demande 408. La largeur etait bridee par
   max-width pendant que la hauteur restait imposee, et six toiles etaient
   ECRASEES, proportions fausses. Pour un peintre c est le pire defaut possible.

   Une colonne, pleine largeur, hauteur libre. C est aussi ce que fait Bacon sur
   telephone, et l alignement par le bas d une rangee n a de toute facon aucun
   sens quand il n y a qu une oeuvre par ligne. */
@media(max-width:900px){
  .mur{gap:var(--e5) var(--e3)}
  .mur-i{width:100%}
  .mur-i img{height:auto; width:100%}
  .mur-vide{width:100%; height:auto; min-height:220px}
}

/* ==========================================================================
   SES MOTS

   Ajoute le 30 aout 2026, avec la palette tiree de ses toiles.

   Tout ce qui suit est de Hoang : les 43 histoires de terrain, sa biographie,
   ses citations relevees dans la presse. Ce ne sont pas des libelles
   d interface, c est de la lecture, et une note de terrain merite une police
   pour se lire.

   Source Serif 4 n est pas un choix de gout. La mesure au canvas notee dans
   CLAUDE.md la donne comme la seule du corpus qui tienne les tons vietnamiens
   empiles a un interligne de 1,00, la ou Playfair demande 1,21. Le site sera
   traduit en vietnamien : la contrainte est reelle, pas theorique.

   Archivo garde l interface. Deux familles, deux roles, aucune pour decorer.
   ========================================================================== */
.histoire,
.note-t blockquote,
.mot blockquote,
.bio-t,
.bio-q p,
.qui-t,
.lead{
  font-family:var(--fs);
  font-weight:400;
  letter-spacing:0;              /* la chasse serree d Archivo ne vaut pas ici */
}

/* Le serif porte plus bas que le grotesque a taille egale : on compense d un
   demi-point pour que les deux familles paraissent de la meme force. */
.histoire{font-size:19px; line-height:1.6; color:var(--ink)}
.histoire p{margin:0 0 var(--e2)}
.histoire p:last-child{margin-bottom:0}
.note-t blockquote{font-size:21px; line-height:1.55}
.mot blockquote{font-size:17px; line-height:1.6}
.bio-t{font-size:19px; line-height:1.65}
.qui-t{font-size:21px; line-height:1.55}
.lead{font-size:21px; line-height:1.5}

/* La citation. Elle est la seule chose du site en italique : c est une parole
   rapportee, l italique le dit sans guillemet decoratif ni barre de couleur. */
.bio-q p{font-size:26px; line-height:1.4; font-style:italic; color:var(--ink)}

/* L accent, le bleu de ses ciels. Il ne sert qu aux liens de texte et a rien
   d autre : ni titre bicolore, regle 3 du brief, ni surface pleine. */
.histoire a, .bio-t a, .mot figcaption a:hover, .note-s a:hover{color:var(--acc)}
a:focus-visible{outline-color:var(--acc)}

/* ==========================================================================
   LES OFFRES

   « Il faut que les offres corporate parlent », 30 aout 2026. La page prouvait
   sans jamais proposer.

   Chaque offre dit trois choses dans le meme ordre : pour qui, ce qu on
   recoit, combien de temps. Le « pour qui » est en tete et en petites
   capitales : un directeur de parc doit se reconnaitre en une seconde, sans
   lire le paragraphe.
   ========================================================================== */
.offres{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--e5) var(--e6); margin-top:var(--e5);
}
.offre{}
.offre h2,
.offre h3{font-size:var(--t4); margin:0}   /* le niveau depend de la page */
.offre-pour{
  margin:var(--e1) 0 0; font-size:var(--t7);
  text-transform:uppercase; letter-spacing:.08em; color:var(--acc);
}
.offre-quoi{
  font-family:var(--fs); font-size:var(--t6); line-height:1.55;
  letter-spacing:0; color:var(--ink2); margin:var(--e2) 0 0;
}
.offre-duree{
  margin:var(--e2) 0 0; font-size:var(--t7); font-weight:800;
  color:var(--ink); font-variant-numeric:tabular-nums;
}

/* Les commanditaires. Une liste dense et nue : onze noms alignes disent la
   meme chose que onze logos, sans quemander la permission de personne et sans
   la grille de cartes que la regle 6 du brief interdit. */
/* ==========================================================================
   LES COMMANDITAIRES

   Onze noms qui etaient en toutes lettres, separes par des points medians.
   En logos, la ligne se lit en une seconde.

   L ECHELLE, et c est tout le sujet. Onze signes de familles incompatibles :
   des logotypes horizontaux occidentaux, jusqu a 6,1 de rapport pour Cat Tien,
   et des sceaux vietnamiens circulaires, rapport 1. Les mettre a la meme
   HAUTEUR ne les met pas au meme poids : un disque de 62px pese trois fois
   moins qu un logotype de 142 sur 76, et le premier essai rendait le WWF et
   Bidoup minuscules a cote de Free The Bears.

   La regle retenue : le sceau prend TOUTE la hauteur de la case, le logotype
   horizontal est retenu par sa largeur bien avant. C est l inverse du reflexe,
   et c est ce qui egalise les surfaces.

   Trois par rang, pour que neuf logos fassent trois rangs pleins.

   Pas de gris, pas d encre unique : ce sont des marques deposees, et la bande
   grise est le tic des pages de logiciel que la regle 6 ecarte.
   ========================================================================== */
.cmd{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:var(--e6) var(--e5); margin:var(--e5) 0 0; padding:0; list-style:none;
}
.cmd li{display:flex; flex-direction:column; align-items:center; gap:var(--e3); text-align:center}
.cmd-l{
  height:104px; width:100%;
  display:flex; align-items:center; justify-content:center;
}
.cmd-l img{
  /* height:100% et non max-height : sans cela une image plus petite que la
     case reste a sa taille naturelle, et le logo de Wildlife At Risk, qui ne
     fait que 140 sur 52, paraissait deux fois plus petit que ses voisins. */
  height:100%; width:auto; max-width:82%; object-fit:contain;
}
/* Le sceau va chercher la hauteur entiere : sa largeur ne le retiendra pas. */
.cmd-r img{max-width:100%}
/* Basse definition assumee : le seul fichier que l organisation publie fait
   140 sur 52. On l agrandit d un tiers, pas du double, sinon il bavoche. */
.cmd-bas img{max-height:72px}
.cmd-n{
  font-size:var(--t7); line-height:1.35; color:var(--ink3); max-width:22ch;
}

@media(max-width:900px){
  .cmd{grid-template-columns:repeat(2, 1fr); gap:var(--e5) var(--e4)}
  .cmd-l{height:84px}
}
@media(max-width:420px){
  .cmd-l{height:68px}
}

/* ==========================================================================
   UN CHANTIER

   « Ca rendrait le site plus vivant », 30 aout 2026. La page Commissions
   decrivait des fresques sans en montrer une seule, pendant que le dossier de
   Hoang contenait quinze photographies a 5184 px de large.

   Le projet ouvre sur son image en pleine largeur : une fresque de 7,40 m se
   regarde en long, pas dans une vignette. Puis le texte en colonne de lecture,
   puis les details dans la meme rangee a hauteur figee que la galerie.
   ========================================================================== */
.chantier{margin-top:var(--e8)}
.chantier-une{margin:0 0 var(--e5)}
.chantier-une img{width:100%; height:auto}   /* jamais de cover sur une fresque */

.chantier-t{
  display:grid; grid-template-columns:minmax(0,360fr) minmax(0,773fr);
  gap:var(--e4) var(--e6); align-items:start;
}
.chantier-t h3{font-size:var(--t3); grid-column:1; margin:0}
.chantier-l{grid-column:1; margin:var(--e2) 0 0; font-size:var(--t7); color:var(--ink3)}
.chantier-d{
  grid-column:1; margin:4px 0 0; font-size:var(--t7); font-weight:800;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.chantier-x{grid-column:2; grid-row:1 / span 3; max-width:var(--mesure)}
.chantier-x p{
  font-family:var(--fs); font-size:var(--t6); line-height:1.6;
  letter-spacing:0; color:var(--ink2); margin:0 0 var(--e2);
}
.chantier-x p:last-child{margin-bottom:0}

/* Les details. Meme rangee que la galerie, mais a demi-hauteur : ce sont des
   fragments d un mur, pas des oeuvres autonomes, et les montrer aussi grands
   que les toiles ferait mentir la hierarchie. */
.chantier-m{margin-top:var(--e5)}
.chantier-m .mur-i{
  background:none; border:0; padding:0; margin:0;
  cursor:zoom-in; text-align:left; font:inherit; color:inherit;
}
.chantier-m .mur-i img{height:calc(var(--rangee) * .5); width:auto}
.chantier-m .mur-m{display:block; margin-top:var(--e1)}

@media(max-width:900px){
  .chantier-t{grid-template-columns:1fr}
  .chantier-x{grid-column:1; grid-row:auto}
  .chantier-m .mur-i img{height:auto; width:100%}
}

/* ==========================================================================
   LE FILM

   Quatre-vingts secondes du Mekong. L affiche porte tout le poids visuel, la
   video ne descend qu au clic : 14 Mo qui se telechargent seuls sur un
   forfait vietnamien seraient une impolitesse, pas une animation.

   Pleine largeur de la colonne, comme une fresque : un fleuve se regarde en
   long. Aucun cadre, aucune ombre portee, aucun bouton de lecture dessine par
   dessus : les commandes natives du navigateur sont deja accessibles au
   clavier et traduites dans la langue du visiteur.
   ========================================================================== */
.film{margin-top:var(--e8)}
.film .k{display:block; margin-bottom:var(--e3)}
.film-g{margin:0}
.film-v{
  display:block; width:100%; height:auto; background:var(--ink);
  aspect-ratio:16 / 9;
}
.film-c{
  margin:var(--e2) 0 0; font-size:var(--t7); color:var(--ink3);
  max-width:var(--mesure);
}

/* La facade d une video YouTube : une image et un bouton, rien d autre tant
   que personne ne clique. Le rond de lecture est dessine en SVG plutot que
   pris chez YouTube, pour ne pas dependre d une requete exterieure. */
.film-f{
  position:relative; display:block; width:100%; padding:0; border:0;
  background:var(--ink); cursor:pointer; overflow:hidden; line-height:0;
}
.film-f img{width:100%; height:auto; transition:opacity var(--d-opac) var(--c-opac)}
.film-f:hover img{opacity:.88}
.film-p{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--bg); pointer-events:none;
}
.film-p svg{
  background:rgba(28,26,20,.62); border-radius:50%;
  padding:22px; box-sizing:content-box;
  transition:background var(--d-coul) var(--c-coul);
}
.film-f:hover .film-p svg{background:rgba(28,26,20,.82)}
.film-f:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.film-i{display:block; width:100%; aspect-ratio:16 / 9; height:auto; border:0}
.film-c span{display:block; margin-top:4px}

/* Le bouton qui rend le son. Une video qui demarre seule est forcement muette,
   le navigateur l exige : sans ce bouton le visiteur ignore qu il manque
   quelque chose. Pose sur le lecteur, discret, et il disparait une fois
   presse. */
.film-g{position:relative}
.film-s{
  position:absolute; left:var(--e2); bottom:var(--e2); z-index:2;
  padding:8px 14px; min-height:44px;
  background:rgba(28,26,20,.78); color:#FFF; border:0; cursor:pointer;
  font-size:var(--t7); font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  transition:background var(--d-coul) var(--c-coul);
}
.film-s:hover{background:rgba(28,26,20,.92)}
.film-s:focus-visible{outline:2px solid #FFF; outline-offset:2px}

/* ==========================================================================
   LE HERO PLEIN CADRE

   « Je le veux vraiment comme une section hero », 31 aout 2026. Le film
   occupait une colonne sur deux, a cote du texte : une vignette laterale.

   La reference est mesuree : Bateman ouvre son accueil sur un bandeau plein
   cadre de 2880 x 813, releve dans docs/systeme.md. C est le seul des cinq
   peintres animaliers a le faire, et c est celui dont l accueil tient.

   Le texte passe PAR-DESSUS, sur un voile qui monte du bas. Sans voile, un
   titre blanc devient illisible des que l image s eclaircit, et celle-ci a un
   mur ocre en fond.
   ========================================================================== */
.grand{position:relative; margin:0 0 var(--e7); background:var(--bg)}

/* La video, hebergee chez nous. « object-fit: cover » est le seul endroit du
   site ou l on recadre : c est un bandeau de fond, pas une oeuvre. Le point
   d ancrage est a 42 % de haut, la ou se tient l elephant. */
.grand-v{position:relative; width:100%; height:min(78vh, 760px); min-height:420px; overflow:hidden}
.grand-m,
.grand-r{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 42%;
}
.grand-r{z-index:0}          /* l affiche, dessous, si la video ne part pas */
.grand-m{z-index:1}

/* Un visiteur qui a demande moins de mouvement recoit l affiche, pas la
   boucle. Regle en CSS et non en script : si le script tombe, le reglage
   tient quand meme. C est l ecart 3 du systeme. */
@media (prefers-reduced-motion:reduce){
  .grand-m{display:none}
}

.grand .film-c{
  position:absolute; right:var(--gout); bottom:var(--e2); z-index:3;
  margin:0; max-width:34ch; text-align:right; color:var(--ink3);
}
.grand .film-c span{display:block; color:var(--ink3); opacity:.78}

/* Le texte PAR-DESSUS la video, sur un voile clair.

   Le client l a prefere ainsi, et il a raison : le nom pose sur l image tient
   le premier ecran d un seul bloc, la ou le texte dessous coupait la page en
   deux. Ce qui n allait pas n etait pas le principe mais le reglage.

   Le passage retenu est le generique du film, des peintures sur du blanc. Le
   voile est donc CLAIR et l encre sombre : un voile noir y aurait fait une
   barre grise. Et il monte plus haut et plus fort qu avant, 0,97 au bas contre
   0,88, parce que l image y est presque blanche : sans cela le surtitre
   mesurait 100,97,84 sur du blanc, illisible.

   Le surtitre passe en --ink2 et non --ink3, pour la meme raison. */
.grand-t{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:var(--e8) 0 var(--e5);
  background:linear-gradient(to top,
    rgba(255,255,255,.97) 0%, rgba(255,255,255,.90) 30%,
    rgba(255,255,255,.55) 62%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.grand-t .wrap{pointer-events:auto}
.grand-t .k{display:block; color:var(--ink2); margin-bottom:var(--e2)}
.grand-t h1{
  font-size:clamp(40px, 7vw, 84px); color:var(--ink); margin:0 0 var(--e3);
  max-width:16ch;
}
.grand-t .sub{
  font-family:var(--fs); letter-spacing:0;
  font-size:var(--t4); line-height:1.5; color:var(--ink2);
  max-width:52ch; margin:0;
}

/* La legende du film revient dans le coin, sur le voile. */
.grand .film-c{
  position:absolute; right:var(--gout); bottom:var(--e3); z-index:3;
  margin:0; max-width:32ch; text-align:right; color:var(--ink3);
}
.grand .film-c span{display:block; opacity:.8}

@media(max-width:900px){
  .grand-v{height:min(66vh, 540px); min-height:340px}
  .grand-t{padding:var(--e7) 0 var(--e4)}
  .grand-t{padding:var(--e7) 0 var(--e4)}
  .grand .film-c{position:static; text-align:left; max-width:none; padding:var(--e2) var(--gout) 0}
  .grand{background:none; margin-bottom:var(--e6)}
}

/* ==========================================================================
   L OUVERTURE DES AUTRES FILMS

   « Ils sont des miniatures laterales et ils s ouvrent joliment en s agrandissant
   quand on arrive sur la section. »

   On agrandit par transform et non par largeur : une transition de largeur
   force un recalcul de mise en page a chaque image, une transformation est
   composee par la carte graphique. L echelle est uniforme, donc l image ne se
   deforme jamais, ce qui est la regle du site.

   L origine est a droite : le film part de sa position de miniature laterale
   et vient occuper la colonne, plutot que de gonfler depuis son centre.
   ========================================================================== */
.film-ouvrant{
  transform:scale(.62) translateX(24%);
  transform-origin:right center;
  opacity:0;
  transition:transform 1100ms cubic-bezier(.16,1,.3,1),
             opacity 700ms ease-out;
  will-change:transform;
}
.film-ouvert{transform:none; opacity:1}

/* Un visiteur qui a demande moins de mouvement voit le film en place, tout de
   suite, sans transition. C est l ecart 3 du systeme. */
@media (prefers-reduced-motion:reduce){
  .film-ouvrant{transform:none; opacity:1; transition:none}
}

/* L identite du vendeur, en pied de page.
   Exigee visible par la loi vietnamienne sur le commerce electronique, et
   verifiee par le ministere avant d autoriser la vente. Discrete mais lisible :
   un code fiscal illisible ne remplit pas l obligation. Le gris est celui des
   cartels, 6,21:1 sur blanc, bien au-dessus du seuil. */
.legal{
  margin-top:var(--e5);
  font-size:var(--t7); line-height:1.6; color:var(--ink3);
}
.legal p{margin:0 0 4px; max-width:none}
.legal b{color:var(--ink2); font-weight:800}
.legal .num{font-variant-numeric:tabular-nums; letter-spacing:.02em}
.legal a{color:var(--ink3);
         transition:color var(--d-coul) var(--c-coul)}
.legal a:hover{color:var(--acc); border-bottom-color:var(--acc)}

/* L identite du vendeur sur la page Contact.

   La grille est reecrite ici et non heritee : le cartel d oeuvre est scope a
   .oeuvre, et s appuyer dessus aurait donne une liste de definitions nue le
   jour ou ce scope change. Meme dessin, meme lecture, aucune dependance.

   Le code fiscal en chiffres tabulaires : il se recopie dans un formulaire
   administratif, un chiffre mal lu coute un rejet de dossier. */
.vendeur{
  display:grid; grid-template-columns:auto 1fr; gap:10px var(--e4);
  margin:var(--e4) 0 0; max-width:var(--mesure); font-size:var(--t6);
}
.vendeur dt{
  font-size:var(--t7); color:var(--ink3);
  text-transform:uppercase; letter-spacing:.08em; padding-top:3px;
}
.vendeur dd{margin:0; color:var(--ink)}
.vendeur .num{font-variant-numeric:tabular-nums; letter-spacing:.03em; font-weight:800}
.vendeur a{color:var(--acc)}
.vendeur a:hover{opacity:.72}

@media(max-width:600px){
  .vendeur{grid-template-columns:1fr; gap:2px var(--e2)}
  .vendeur dd{margin-bottom:var(--e2)}
}

/* La raison sociale vietnamienne sous l anglaise. Marquee lang="vi", donc
   l interligne des tons empiles s applique, et un lecteur d ecran change de
   voix au lieu de lire du vietnamien a l anglaise. */
.vendeur .vi{display:block; color:var(--ink3); margin-top:2px; line-height:1.35}

/* La gamme GAEA. Une liste de definitions, pas une grille de cartes a coins
   arrondis : regle 6 du brief. Le prix est aligne a droite du nom, sur la
   meme ligne, parce que c est la paire que l oeil cherche. */
.gamme{margin:var(--e4) 0 0; max-width:var(--mesure)}
.gamme dt{
  display:flex; align-items:baseline; gap:var(--e3);
  padding-top:var(--e3);
  font-size:var(--t4); font-weight:800; letter-spacing:var(--ls);
}
.gamme dt b{
  margin-left:auto; font-size:var(--t5);
  font-variant-numeric:tabular-nums; color:var(--ink2);
}
.gamme dd{
  margin:6px 0 var(--e3); font-family:var(--fs); letter-spacing:0;
  font-size:var(--t6); line-height:1.55; color:var(--ink2);
}

/* ==========================================================================
   LA GRILLE DES OBJETS GAEA

   Une grille, pas la rangee a hauteur figee de la galerie.

   La rangee sert a montrer des oeuvres de formats incompatibles sans en
   recadrer aucune. Un catalogue d objets n a pas ce probleme, et lui emprunter
   son dispositif ferait mentir la hierarchie du site : un mug n est pas une
   toile.

   Elle rendait surtout la page illisible : la bande de mugs a un rapport de
   6,46 et occupait une rangee entiere pendant que les t-shirts se tassaient a
   quatre. Ici les cellules sont egales, l image est CONTENUE, jamais recadree,
   et un visuel tres large prend deux colonnes.
   ========================================================================== */
.objets{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:var(--e5) var(--e4); margin-top:var(--e5);
}
.objet{
  display:flex; flex-direction:column; gap:var(--e2);
  padding:0; border:0; background:none; cursor:zoom-in;
  font:inherit; color:inherit; text-align:left;
}
.objet-im{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:1 / 1; overflow:hidden;
}
/* Aucun fond derriere un objet.
   Le gris posait une bande de chaque cote des visuels detoures, et sur un
   t-shirt photographie sur blanc la cellule se voyait plus que le vetement.
   Les objets sont deja sur blanc : le mur du site suffit. */
.objet-im img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain;                 /* jamais de recadrage, meme sur un objet */
  transition:opacity var(--d-opac) var(--c-opac);
}
.objet:hover .objet-im img{opacity:.86}
.objet-l{font-size:var(--t7); color:var(--ink3); line-height:1.4}
.objet:focus-visible{outline:2px solid var(--ink); outline-offset:3px}

/* Un visuel deux fois plus large que haut : deux colonnes, et la cellule
   s aplatit pour ne pas laisser deux tiers de vide au-dessus et au-dessous. */
.objet-large{grid-column:span 2}
.objet-large .objet-im{aspect-ratio:2 / 1}

@media(max-width:600px){
  .objets{grid-template-columns:repeat(2,1fr); gap:var(--e4) var(--e3)}
  .objet-large{grid-column:span 2}
}


/* La variante « q » n est pas un bouton mais un lien de texte : la lettre
   d information et « poser une question » ne sont pas des actions d achat, et
   les peindre en noir plein leur donnait un poids qu elles n ont pas. */
.ln.q{
  background:none; color:var(--ink); padding:0; min-height:0;
  font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  font-size:var(--t7);
  transition:opacity var(--d-coul) var(--c-coul);
}
.ln.q:hover{opacity:.55; background:none; color:var(--ink)}

/* ==========================================================================
   LE TIRAGE, SUR LA FICHE D UNE OEUVRE

   Il vient APRES l original, jamais a cote. Un tirage a 70 dollars pose pres
   d une toile a 3 680 tire le regard vers le bas et fait hesiter : l acheteur
   se demande pourquoi payer cinquante fois plus.

   Il est donc discret, et il compte surtout dans deux cas : une petite oeuvre
   que le port international rend invendable, et une toile deja vendue qui
   continue ainsi de rapporter.
   ========================================================================== */
.tirage{margin-top:var(--e8)}
.tirage .k{display:block; margin-bottom:var(--e3)}
.tirage-g{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:var(--e4) var(--e6); align-items:start; max-width:var(--page);
}
.tirage-x{
  font-family:var(--fs); letter-spacing:0;
  font-size:var(--t6); line-height:1.6; color:var(--ink2); margin:0;
}
.tirage-f{margin:var(--e3) 0 0; padding:0; list-style:none; max-width:36ch}
.tirage-f li{
  display:flex; align-items:baseline; gap:var(--e3);
  padding:6px 0; font-size:var(--t7); color:var(--ink3);
}
.tirage-f b{margin-left:auto; color:var(--ink); font-variant-numeric:tabular-nums}
.tirage-a{margin:0}

@media(max-width:900px){
  .tirage-g{grid-template-columns:1fr}
}

/* ==========================================================================
   LA PRESSE

   Ses citations passent avant la liste des liens : un logo de journal prouve
   qu on a parle de lui, ses mots prouvent ce qu il est.

   La citation vietnamienne est sous l anglaise et non l inverse : le site est
   anglais d abord. Mais elle est marquee lang="vi", donc l interligne des tons
   empiles s applique et un lecteur d ecran change de voix.
   ========================================================================== */
.citations{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--e5) var(--e6); margin-top:var(--e5);
}
.citation{margin:0}
.citation-en{
  font-family:var(--fs); letter-spacing:0; font-style:italic;
  font-size:var(--t4); line-height:1.45; color:var(--ink); margin:0;
}
.citation-vi{
  font-family:var(--fs); letter-spacing:0;
  font-size:var(--t6); line-height:1.55; color:var(--ink3);
  margin:var(--e2) 0 0;
}

/* La liste des articles. Le nom du media d abord et en capitales : c est ce
   que l oeil cherche, avant le titre vietnamien qu il ne lira peut-etre pas. */
.presse{margin:var(--e4) 0 0; padding:0; list-style:none; max-width:var(--mesure)}
.presse li{margin:0}
.presse a{
  display:grid; gap:2px; padding:var(--e3) 0;
  transition:opacity var(--d-coul) var(--c-coul);
}
.presse a:hover{opacity:.6}
.presse-m{
  font-size:var(--t7); font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--acc);
}
.presse-t{
  font-family:var(--fs); letter-spacing:0;
  font-size:var(--t5); line-height:1.4; color:var(--ink);
}
.presse-n{font-size:var(--t7); color:var(--ink3); line-height:1.45}

/* ==========================================================================
   LA RECHERCHE

   Une seule ligne, le champ et le bouton, sans cadre autour du groupe : le
   site n a plus un seul filet, et une boite de recherche encadree en
   ramenerait un. Le champ porte son propre soulignement, qui epaissit au
   focus : c est la seule ligne du site, et elle dit ou l on tape.
   ========================================================================== */
.cherche{
  display:flex; gap:var(--e3); align-items:baseline; flex-wrap:wrap;
  max-width:var(--mesure); margin-top:var(--e4);
}
.cherche input[type=search]{
  flex:1 1 260px; min-width:0;
  font:inherit; font-size:var(--t4); color:var(--ink);
  background:transparent; border:0; border-bottom:2px solid var(--line);
  padding:var(--e2) 0; border-radius:0; appearance:none;
  transition:border-color var(--d-coul) var(--c-coul);
}
.cherche input[type=search]::placeholder{color:var(--ink3); opacity:1}
.cherche input[type=search]:focus{outline:0; border-bottom-color:var(--ink)}
.cherche button{
  flex:0 0 auto; font:inherit; font-size:var(--t7); font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  color:var(--bg); background:var(--ink); border:0;
  padding:14px 22px; min-height:44px;      /* cible tactile */
  transition:opacity var(--d-coul) var(--c-coul);
}
.cherche button:hover{opacity:.82}

/* Visible pour un lecteur d ecran, invisible a l oeil. Le champ a besoin d un
   label : « placeholder » n en est pas un, il disparait des qu on tape. */
.sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}