/* LES JETONS. Une seule source pour les 449 pages, celle-ci.

   Les couleurs sont RELEVEES sur les pieces d'archive que le site sert deja, pas
   choisies. Le papier clair est celui de la planche 106 de Kohler, mesure #F0EEEF sur
   14 126 pixels de marge non imprimee, retenu a #F3F2ED apres un leger rechauffement
   pour sortir du gris neutre. Le vert est le feuillage reellement photographie :
   #505A39 sur 24 801 pixels de kohler_1897, #3E5525 sur liberica, #355A29 sur
   canephora_baies, soit une teinte de 78 a 105 degres, retenue a #4C5A2E. Le rouge
   vient du photochrome de Mysore de 1909, #85281E sur 14 569 pixels.

   Ce qui disparait, et pourquoi. L'ancien accent #35B074 etait de teinte 151 : cette
   teinte n'existe sur AUCUNE photographie de cafeier du site. C'etait un vert
   d'interface, et c'est lui qui donnait a la page son air de gabarit. Il etait pose
   ici, dans la coquille, et non dans la surcouche de direction artistique : voila
   pourquoi le remplacer ailleurs ne changeait rien a la page d'accueil, qui est
   pourtant la premiere chose qu'on voit.

   Le fond sombre cesse d'etre une absence. #0C110E est a 0,51 % de luminance et a la
   teinte 144 : c'est le noir de l'accent d'interface. Il devient #191D13, a 1,13 % de
   luminance et a la teinte 84, c'est-a-dire le feuillage pousse au noir. Une couleur
   qu'on peut nommer.

   Et une regle donne au site sa signature : toute image, quelle qu'elle soit, est
   montee sur le carton creme #E9E7DD dans LES DEUX THEMES, comme un tirage sur son
   support. Sur la page sombre, la planche devient alors la source de lumiere au lieu
   d'un rectangle gris de plus. C'est la seule couleur qui ne change pas avec le theme,
   et c'est voulu.

   Les selecteurs, enfin, parce que c'est la que la passe precedente s'est perdue. Les
   trois blocs pesent 0,2,0 en specificite, sauf le premier qui ne porte que des
   valeurs communes aux deux themes. Un bloc clair pose sur `:root` nu pese 0,1,0 et ne
   peut pas gagner contre un bloc sombre pose sur `:root:not([data-theme="light"])`,
   ou qu'il soit dans la feuille : la specificite passe avant l'ordre, et une requete
   media n'y change rien puisqu'elle ne compte pas dans la specificite. */
:root{
  --display:"Fraunces","Spectral",Georgia,serif;
  --text:"Spectral",Georgia,"Times New Roman",serif;
  --sc:"Spectral SC","Spectral",Georgia,serif;
  --ui:"Spectral","Spectral SC",Georgia,serif;
  --sans:"Spectral",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;
  /* Echelle de caractere, raison 1,26. Huit valeurs la ou quinze etaient mesurees,
     dont huit tenaient entre 11 et 14 px, un mouchoir ou l'oeil ne distingue rien. */
  --t0:13px; --t1:15px; --t2:17px; --t3:21px; --t4:26px; --t5:33px; --t6:42px;
  --t7:clamp(42px,5.4vw,64px);
  /* Echelle d'espacement, pas de 6 px. Six valeurs la ou vingt-cinq etaient mesurees
     sur la seule page d'accueil. */
  --e1:6px; --e2:12px; --e3:24px; --e4:48px; --e5:96px; --e6:144px;
  --page:1240px;
  /* Le carton de montage ne depend pas du theme. C'est tout le propos. */
  --carton:#E9E7DD;
}
/* 1. Le clair, qui est le defaut. */
:root:not([data-theme="dark"]){
  color-scheme:light;
  --papier:#F3F2ED; --papier-haut:#FBFAF6; --papier-creux:#E9E7DD;
  --encre:#1C1F15; --encre-mi:#4B5140; --encre-pale:#676D5C;
  --filet:#B4B0A0; --filet-pale:#DAD7CB;
  --e-rubrique:#9A2A20; --e-laurier:#4C5A2E; --e-ocre:#7A6218;
  --e-outremer:#1F4E8C; --e-prune:#6B2F63;
  --lavis:#E6EADC;
}
/* 2. Le sombre du systeme, sauf si le visiteur a explicitement choisi le clair. */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  color-scheme:dark;
  --papier:#191D13; --papier-haut:#20241A; --papier-creux:#272C1F;
  --encre:#EDEAE0; --encre-mi:#ADB39B; --encre-pale:#8D937C;
  --filet:#4B5340; --filet-pale:#2E3524;
  --e-rubrique:#E07A6F; --e-laurier:#9FB566; --e-ocre:#C9A247;
  --e-outremer:#8FB2E0; --e-prune:#CC93C4;
  --lavis:#232A1A;
}}
/* 3. Le sombre choisi, qui doit gagner contre un systeme regle en clair. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --papier:#191D13; --papier-haut:#20241A; --papier-creux:#272C1F;
  --encre:#EDEAE0; --encre-mi:#ADB39B; --encre-pale:#8D937C;
  --filet:#4B5340; --filet-pale:#2E3524;
  --e-rubrique:#E07A6F; --e-laurier:#9FB566; --e-ocre:#C9A247;
  --e-outremer:#8FB2E0; --e-prune:#CC93C4;
  --lavis:#232A1A;
}
/* Le pont vers les anciens noms. Quinze mille declarations les emploient : les
   renommer d'un coup casserait le site, les aliaser ne coute rien et ne ment pas,
   chaque ancien nom pointant sur le role neuf qui lui correspond vraiment. */
:root{
  --surface-page:var(--papier); --surface-raised:var(--papier-haut);
  --surface-sunken:var(--papier-creux);
  --paper:var(--papier); --paper2:var(--papier-haut); --paper3:var(--papier-creux);
  --line:var(--filet-pale); --line-strong:var(--filet);
  --rule:var(--filet); --rule2:var(--filet-pale);
  --ink:var(--encre); --ink2:var(--encre-mi); --ink-muted:var(--encre-mi);
  --ink-faint:var(--encre-pale); --mute:var(--encre-pale);
  --leaf:var(--e-laurier); --leaf-wash:var(--lavis);
  --cherry:var(--e-rubrique); --ember:var(--e-ocre); --gold:var(--e-ocre);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--ink);
     font-family:var(--text);font-size:17px;line-height:1.7;
     -webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--leaf);outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
[hidden]{display:none!important}

/* ── le menu ─────────────────────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:60;background:var(--surface-page);
     border-bottom:1px solid var(--line)}
.bar .in{max-width:var(--page);margin:0 auto;padding:0 24px;display:flex;
         align-items:center;gap:8px;min-height:60px}
/* A 320 points, la barre demandait 333 pixels pour 305 disponibles, et toutes les
   pages du site defilaient horizontalement de 42 pixels. Trois retraits rendent
   43 pixels sans rien coûter : le detail du calcul est dans _patch_barre320.py. */
@media (max-width:400px){
  .bar .in{padding:0 14px}
  .bar .mark{font-size:17px;margin-right:6px}
  .bar #jour-nuit{padding-left:0;padding-right:0}
}
.mark{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:-.012em;
      text-decoration:none;margin-right:12px;white-space:nowrap;
      display:inline-flex;align-items:center;min-height:44px}
.mark i{color:var(--leaf);font-style:italic}
.bar menu{display:flex;gap:2px;margin:0;padding:0;list-style:none;flex:1}
.bar menu button, .bar menu a.rub{
  font-family:var(--ui);font-size:14px;font-weight:500;color:var(--ink-muted);
  background:none;border:0;cursor:pointer;padding:0 13px;min-height:44px;
  display:inline-flex;align-items:center;gap:6px;border-radius:2px;
  text-decoration:none;transition:color .14s,background .14s}
.bar menu button:hover,.bar menu a.rub:hover{color:var(--ink);background:var(--surface-sunken)}
.bar menu button[aria-expanded="true"]{color:var(--leaf);background:var(--leaf-wash)}
.bar menu button .fl{width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .16s}
.bar menu button[aria-expanded="true"] .fl{transform:rotate(-135deg) translateY(-2px)}
.bar .cherche{display:flex;align-items:center;gap:8px;border:1px solid var(--line-strong);
  border-radius:2px;padding:0 10px;height:38px;background:var(--surface-page)}
.bar .cherche:focus-within{border-color:var(--leaf)}
.bar .cherche form{display:flex;align-items:center;gap:8px;margin:0}
.bar .cherche input{border:0;background:none;color:var(--ink);font-family:var(--ui);
  font-size:14px;width:150px;outline:none}
.bar .cherche svg{flex:none;opacity:.6}
#burger{display:none}

/* le panneau */
/* `top:100%` est ecrit et non deduit. Sans lui, le panneau prenait sa position
   statique ; la barre est devenue `display:flex; align-items:center` entre-temps, et
   cette position statique est alors CENTREE sur la barre : (81 - 443) / 2 = -181 px,
   soit un menu dont les premieres entrees sont au-dessus de l'ecran. Une position
   absolue qui compte sur sa position statique compte sur la mise en page de son
   parent, et celle d'un parent change. */
.pan{position:absolute;top:100%;left:0;right:0;background:var(--surface-raised);
     border-bottom:1px solid var(--line-strong);box-shadow:0 18px 40px rgba(0,0,0,.18);
     z-index:55}
/* `display:block` n'est pas une precaution, c'est la correction d'une collision. La
   classe `.in` designe aussi la rangee souple de la barre du haut, et le panneau est un
   enfant de cette barre : les deux selecteurs pesent 0,2,0, et `.bar .in` gagne par
   l'ordre. Sans cette ligne, la grille de colonnes du panneau se rétracte sur son
   contenu minimal et les quatre colonnes s'empilent en une seule, haute de deux ecrans.
   Mesure avant correction, a 1 920 px : conteneur 1 240 px, grille 317 px de large pour
   1 636 px de haut. */
.pan .in{display:block;max-width:var(--page);margin:0 auto;padding:30px 24px 34px;
         max-height:calc(100vh - 80px);overflow-y:auto}
.pan .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px 32px}
.pan h3{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.09em;
        text-transform:uppercase;color:var(--ink-faint);margin:0 0 6px;
        padding-bottom:8px;border-bottom:1px solid var(--line)}
.pan ul{list-style:none;margin:0;padding:0}
.pan li a{display:block;padding:9px 10px 9px 0;text-decoration:none;min-height:44px}
.pan li a:hover .t{color:var(--leaf)}
.pan .t{font-family:var(--display);font-size:17px;font-weight:400;display:flex;
        align-items:baseline;gap:9px}
.pan .no{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);
         flex:none;min-width:2.2em}
.pan .d{display:block;font-family:var(--ui);font-size:13.5px;line-height:1.45;
        color:var(--ink-muted);margin-top:1px;padding-left:calc(2.2em + 9px)}
.pan .cols.plat .d{padding-left:0}
#voile{position:fixed;inset:0;background:rgba(0,0,0,.34);z-index:50}

/* telephone */
@media (max-width:900px){
  #burger{display:inline-flex;align-items:center;gap:8px;margin-left:auto;
    font-family:var(--ui);font-size:14px;font-weight:600;color:var(--ink);
    background:none;border:1px solid var(--line-strong);border-radius:2px;
    padding:0 14px;min-height:44px;cursor:pointer}
  .bar menu, .bar .cherche{display:none}
  .bar.ouvert menu{display:block;position:fixed;inset:60px 0 0;background:var(--surface-page);
    overflow-y:auto;padding:0 20px 60px;z-index:58}
  .bar.ouvert menu li{display:block}
  .bar.ouvert menu button,.bar.ouvert menu a.rub{width:100%;justify-content:space-between;
    font-size:17px;padding:0;min-height:56px;border-bottom:1px solid var(--line);
    border-radius:0;color:var(--ink)}
  .bar.ouvert .cherche{display:flex;margin:18px 0 6px;width:100%;height:46px}
  .bar.ouvert .cherche input{width:100%}
  .pan{position:static;box-shadow:none;border:0;background:none}
  .pan .in{padding:6px 0 18px}
  .pan .cols{grid-template-columns:1fr;gap:18px}
  #voile{display:none}
}

/* ── pied ────────────────────────────────────────────────────────────── */
.pied{border-top:1px solid var(--line);margin-top:96px}
.pied .in{max-width:var(--page);margin:0 auto;padding:40px 24px 70px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px}
.pied h4{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 10px}
.pied a{display:block;font-family:var(--ui);font-size:14px;color:var(--ink-muted);
  text-decoration:none;padding:6px 0;min-height:32px}
.pied a:hover{color:var(--leaf)}
.pied .note{font-family:var(--ui);font-size:13px;color:var(--ink-faint);line-height:1.6}

/* L'ACCUEIL, REFAIT SELON LE DOSSIER DE DIRECTION ARTISTIQUE.

   Marco, 19/09/2026 : « c'est toujours plat et sans ame », puis « ca doit etre
   moderne, tu as fait un benchmark des sites et c'est tout ce que tu me proposes ».

   Il avait raison, et le defaut se nomme. La page precedente etait une page
   d'atterrissage generique : cartes a coins arrondis de 4 a 6 px, filet d'1 px autour
   de chaque bloc, libelles en capitales espacees de 12 px, chiffres en monospace,
   pastilles arrondies, et un seul vert d'accent pose sur absolument tous les survols.
   C'est le gabarit que produit n'importe quel outil, et c'est precisement ce que le
   dossier demandait d'enlever.

   Le parti retenu est celui du dossier : le site possede des planches, des gravures et
   des photographies d'archive qu'on ne peut pas fabriquer, et c'est de la qu'il tire
   son allure. Un recueil de planches commentees, avec les conventions de l'appareil
   critique imprime. Concretement :

     · la planche remplit sa boite et se pose sur le carton creme, identique dans les
       deux themes : sur la page sombre, c'est elle qui eclaire, au lieu d'etre un
       rectangle gris de plus ;
     · plus une seule carte. Les blocs sont separes par des filets maigres et par de
       l'espace, comme les divisions d'une page imprimee. Zero border-radius ;
     · plus de capitales fabriquees. Les libelles sont en Spectral SC, de vraies
       petites capitales, au corps du texte ;
     · quatre encres au lieu d'un accent unique, une par famille de planches. Le vert
       d'interface #35B074, de teinte 151, n'existe sur aucune photographie de cafeier
       du site : il a disparu ;
     · l'ecart de corps fait la hierarchie. Le titre est a --t7, les libelles a --t1 :
       un rapport de quatre, la ou la page precedente tenait tout entre 12 et 30 px. */

.wrap{max-width:var(--page);margin:0 auto;padding:0 var(--e3)}
.essai-note{display:none}

/* L'ENTREE. Un titre, une phrase, un champ. Rien d'autre, et tres grand. */
.hero{padding:var(--e5) 0 0;position:relative}
.hero .rub{font-family:var(--sc);font-size:var(--t1);letter-spacing:.02em;
  color:var(--e-rubrique);display:block;margin:0 0 var(--e2)}
.hero h1{font-family:var(--display);font-size:var(--t7);font-weight:300;
  font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 1;
  line-height:1.02;letter-spacing:-.024em;margin:0;max-width:15ch;text-wrap:balance}
.hero h1 em{font-style:italic;color:var(--e-laurier)}
.hero .sous{font-size:var(--t3);line-height:1.5;font-weight:300;color:var(--encre-mi);
  max-width:54ch;margin:var(--e3) 0 0}

/* Le champ de recherche : un filet sous le texte, comme une ligne a remplir sur un
   formulaire imprime, et non une boite arrondie posee sur la page. */
.grandchamp{display:flex;align-items:center;gap:var(--e2);margin:var(--e4) 0 0;
  max-width:600px;border:0;border-bottom:2px solid var(--filet);background:none;
  padding:0;height:60px;border-radius:0}
.grandchamp:focus-within{border-bottom-color:var(--e-laurier)}
/* `min-width:0` n'est pas une precaution, c'est la correction d'un debordement
   mesure : un champ de saisie a une largeur intrinseque, et la valeur par defaut
   `min-width:auto` d'un element de flex l'empeche de retrecir en dessous. A 360 px,
   la page entiere defilait horizontalement de 54 px a cause de ce seul champ. */
.grandchamp input{flex:1;min-width:0;border:0;background:none;outline:none;
  color:var(--encre);font-family:var(--text);font-size:var(--t3)}
.grandchamp input::placeholder{color:var(--encre-pale)}
.grandchamp button{flex:none;border:0;border-radius:0;background:var(--e-laurier);
  color:var(--papier);font-family:var(--sc);font-size:var(--t1);letter-spacing:.02em;
  font-weight:400;padding:0 var(--e3);height:42px;cursor:pointer}
.grandchamp button:hover{background:var(--e-rubrique)}
.suggest{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e2);
  margin:var(--e2) 0 0;font-family:var(--text);font-size:var(--t1)}
.suggest span{font-family:var(--sc);color:var(--encre-pale);padding:0}
.suggest a{color:var(--encre-mi);text-decoration:none;border:0;border-radius:0;
  border-bottom:1px solid var(--e-outremer);padding:2px 0;display:inline;min-height:0}
.suggest a:hover{color:var(--e-outremer);border-color:var(--e-outremer)}

/* LES DIVISIONS. Un filet anglais, un libelle en petites capitales, un titre. */
.sect{padding:var(--e5) 0 0}
.sect > .tete{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--e3);border-bottom:0;border-top:1px solid var(--filet);
  padding:var(--e2) 0 0;margin-bottom:var(--e4)}
/* Mesure a 375 px : le lien de division, en `nowrap`, sortait de 108 px. Le `nowrap`
   est juste, c'est la ligne unique qui ne l'est pas : « Toute la chronique » coupe
   apres « Toute » serait pire. En dessous de 620 px, titre et lien s'empilent. */
@media (max-width:620px){
  .sect > .tete{flex-direction:column;align-items:flex-start;gap:var(--e1)}
  .sect .tete a{align-self:flex-start}
}
.sect h2{font-family:var(--display);font-size:var(--t6);font-weight:400;
  font-variation-settings:"opsz" 72,"SOFT" 22,"WONK" 1;
  letter-spacing:-.016em;line-height:1.08;margin:0}
.sect .tete a{font-family:var(--sc);font-size:var(--t1);letter-spacing:.02em;
  color:var(--encre-mi);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid var(--e-outremer);padding-bottom:2px}
.sect .tete a:hover{color:var(--e-outremer)}

/* LES PLANCHES. Quatre familles, quatre encres. Le filet en tete de famille porte la
   couleur ; elle n'est repetee nulle part ailleurs, ce qui lui garde sa valeur. */
.fam{margin:0 0 var(--e5)}
.fam:last-child{margin-bottom:0}
.fam h3{font-family:var(--sc);font-size:var(--t1);font-weight:400;letter-spacing:.02em;
  text-transform:none;color:var(--encre);margin:0 0 var(--e3);
  border-bottom:3px solid var(--fc,var(--e-laurier));padding-bottom:var(--e1);
  display:inline-block}
.fam[data-fam="1"]{--fc:var(--e-laurier)}
.fam[data-fam="2"]{--fc:var(--e-rubrique)}
.fam[data-fam="3"]{--fc:var(--e-ocre)}
.fam[data-fam="4"]{--fc:var(--e-outremer)}
.fam ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:var(--e4) var(--e3);background:none;border:0;border-radius:0;overflow:visible}
.fam li{background:none}
.fam a{display:block;padding:0;text-decoration:none;min-height:44px;background:none}
.fam a:hover{background:none}
.fam a:hover .t{color:var(--fc,var(--e-laurier))}
.fam .no{font-family:var(--display);font-size:var(--t1);font-weight:400;
  font-variation-settings:"opsz" 40,"SOFT" 20;color:var(--e-rubrique);
  letter-spacing:0;text-transform:none;display:block;margin:var(--e2) 0 var(--e1)}
.fam .t{font-family:var(--display);font-size:var(--t4);font-weight:400;
  font-variation-settings:"opsz" 36,"SOFT" 12,"WONK" 0;
  letter-spacing:-.008em;line-height:1.16;display:block}
.fam .d{font-family:var(--text);font-size:var(--t1);line-height:1.45;
  color:var(--encre-mi);display:block;margin-top:var(--e1)}

/* QUATRE PORTES, sans chiffre. Le grand nombre au-dessus du titre a ete retire :
   il ne disait rien au lecteur et servait a celui qui l'affichait. Les nombres sont
   rentres dans la phrase de description, ou ils informent au lieu de se compter.
   Le filet de tete, transparent au repos et rubrique au survol, suffit a dire que la
   porte est cliquable sans lui donner l'air d'une tuile. */
.portes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--e3);border-top:1px solid var(--filet-pale)}
.porte{display:block;text-decoration:none;border:0;border-radius:0;
  padding:var(--e3) 0 0;background:none;border-top:3px solid transparent}
.porte:hover{border-top-color:var(--e-rubrique);background:none}
.porte .t{font-family:var(--display);font-size:var(--t3);font-weight:400;display:block}
.porte .d{font-family:var(--text);font-size:var(--t1);line-height:1.5;
  color:var(--encre-mi);display:block;margin-top:var(--e1)}

/* LE REPERE DU JOUR. Une note de marge : le millesime a gauche, le fait a droite. */
.jour{border:0;border-radius:0;background:none;padding:0;
  display:grid;grid-template-columns:minmax(0,7rem) 1fr;gap:var(--e4);
  border-top:1px solid var(--filet)}
@media (max-width:700px){.jour{grid-template-columns:1fr;gap:var(--e2);padding:0}}
.jour .an{font-family:var(--display);font-size:var(--t6);font-weight:300;
  font-variation-settings:"opsz" 100,"SOFT" 30,"WONK" 1;
  color:var(--e-rubrique);line-height:1;padding-top:var(--e3);
  /* Pas de `nowrap` : un millesime negatif a cinq chiffres doit pouvoir se
     replier plutot que passer par-dessus la colonne de droite. */
  overflow-wrap:break-word;
  font-variant-numeric:normal}
.jour > div:last-child{padding-top:var(--e3)}
.jour .quoi{font-family:var(--sc);font-size:var(--t1);font-weight:400;
  letter-spacing:.02em;text-transform:none;color:var(--encre-pale);display:block;
  margin-bottom:var(--e2)}
.jour p{margin:0;font-size:var(--t3);line-height:1.5;max-width:60ch;font-weight:300}
.jour .src{display:block;font-family:var(--text);font-size:var(--t1);
  color:var(--encre-mi);margin-top:var(--e3);border:0;padding:0 0 0 1.15em;
  text-indent:-1.15em}
.jour .src::before{content:"";display:inline-block;width:.46em;height:.46em;
  margin-right:.6em;vertical-align:.04em;background:var(--e-rubrique)}

/* LES OUTILS. */
.outils{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--e3);border-top:1px solid var(--filet-pale)}
.outil{display:block;text-decoration:none;border:0;border-radius:0;
  padding:var(--e3) 0 0;border-top:3px solid transparent;background:none}
.outil:hover{border-top-color:var(--e-outremer);background:none}
.outil .t{font-family:var(--display);font-size:var(--t3);display:block}
.outil .d{font-family:var(--text);font-size:var(--t1);line-height:1.45;
  color:var(--encre-mi);display:block;margin-top:var(--e1)}

/* LES TRIBUNES. La seule voix du site qui parle en son nom, donc la seule section qui
   precede la navigation. Elle est composee en bande et non en bloc : trois colonnes,
   un filet en tete de chacune, rien qui ressemble a une carte. Elle prend peu de
   hauteur, la roue reste visible au premier ecran.
   Le filet de tete est rubrique : c'est la couleur du correcteur et de la cerise mure,
   et c'est aussi la seule fois ou elle sert a designer une personne plutot qu'un
   reperage. */
.sect--tb{padding-top:var(--e4)}
.tb-chapeau{font-family:var(--text);font-size:var(--t2);line-height:1.6;
  color:var(--encre-mi);max-width:64ch;margin:calc(var(--e4) * -1 + var(--e2)) 0 var(--e4)}
.tbg{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--e4) var(--e3)}
.tb{display:block;text-decoration:none;border-top:3px solid var(--e-rubrique);
  padding:var(--e2) 0 0}
.tb:hover b{color:var(--e-rubrique)}
.tb-m{font-family:var(--sc);font-size:var(--t1);letter-spacing:.02em;
  color:var(--encre-pale);display:block;margin-bottom:var(--e1)}
.tb b{font-family:var(--display);font-weight:400;font-size:var(--t4);
  font-variation-settings:"opsz" 36,"SOFT" 12,"WONK" 0;
  letter-spacing:-.008em;line-height:1.16;display:block}
.tb p{font-family:var(--text);font-size:var(--t1);line-height:1.5;
  color:var(--encre-mi);margin:var(--e1) 0 0}

/* COMMENT C'EST FAIT. Trois colonnes, un filet, pas de cartes. */
.methode{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:var(--e4);border-top:1px solid var(--filet-pale);padding-top:var(--e3)}
.methode p{margin:0;font-size:var(--t2);line-height:1.6;color:var(--encre-mi)}
.methode b{font-family:var(--sc);font-size:var(--t2);font-weight:400;
  letter-spacing:.02em;text-transform:none;color:var(--encre);display:block;
  margin-bottom:var(--e1)}
.roue{position:relative;width:100%;max-width:720px;margin:0 auto;padding:4px 0 8px}
/* width:100% et non min(720px,94vw) : le vw ignore le retrait du conteneur, et la
   roue depassait de 9 px a droite sur telephone, ce qui faisait defiler toute la
   page lateralement. */
.roue svg{display:block;width:100%;height:auto;overflow:visible}
.roue{--f1:#9FB566;--f2:#E07A6F;--f3:#C9A247;--f4:#8FB2E0}
:root:not([data-theme="dark"]) .roue{--f1:#4C5A2E;--f2:#9A2A20;--f3:#7A6218;--f4:#1F4E8C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .roue{--f1:#9FB566;--f2:#E07A6F;--f3:#C9A247;--f4:#8FB2E0}}
.roue [data-f="1"]{--t:var(--f1)}.roue [data-f="2"]{--t:var(--f2)}
.roue [data-f="3"]{--t:var(--f3)}.roue [data-f="4"]{--t:var(--f4)}
.roue path.ap,.roue path.af{fill:var(--t);fill-opacity:.17;stroke:var(--t);
  stroke-opacity:.5;stroke-width:1}
/* L'anneau du contenu est volontairement plus pale que celui des planches : il est
   la pour repondre a « ou est-ce que je trouve ca », pas pour attirer l'oeil en
   premier. La hierarchie se lit donc du centre vers le bord, en s'attenuant. */
.roue path.ac{fill:var(--t);fill-opacity:.07;stroke:var(--t);stroke-opacity:.28;
  stroke-width:1}
.roue a:hover path.ac,.roue a.on path.ac{fill-opacity:.3;stroke-opacity:.9}
.roue .nc{font-family:var(--ui);font-size:9.5px;fill:var(--ink-muted);
  letter-spacing:.04em}
.roue a:hover + .nc{fill:var(--ink)}
.roue a{cursor:pointer}
.roue a:hover path.ap,.roue a:hover path.af,.roue a.on path.ap,.roue a.on path.af{
  fill-opacity:.42;stroke-opacity:1;stroke-width:1.5}
.roue a:focus-visible{outline:none}
.roue a:focus-visible path{fill-opacity:.42;stroke:var(--ink);stroke-width:2.5}
.roue text{pointer-events:none}
.roue .np{font-family:var(--mono);font-size:12.5px;fill:var(--ink);
  text-anchor:middle;letter-spacing:.02em}
.roue .mp{font-family:var(--ui);font-size:12.5px;fill:var(--ink-muted);
  dominant-baseline:middle}
.roue .mp.on{fill:var(--ink)}
.roue .nf{font-family:var(--ui);font-size:11px;fill:var(--t);font-weight:600;
  letter-spacing:.11em;text-transform:uppercase}
.roue .moyeu{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:26%;text-align:center;pointer-events:none}
.roue .moyeu b{display:block;font-family:var(--display);font-size:clamp(14px,1.6vw,19px);
  line-height:1.2;color:var(--ink);font-weight:500}
.roue .moyeu span{display:block;margin-top:5px;font-family:var(--ui);
  font-size:clamp(11px,1.05vw,12px);line-height:1.35;color:var(--ink-faint)}
@media (prefers-reduced-motion:no-preference){
  .roue path.ap,.roue path.af{transition:fill-opacity .16s,stroke-opacity .16s}
  .roue .moyeu b,.roue .moyeu span{transition:color .16s}}
/* Sous 640 px les noms en périphérie deviennent illisibles : on les retire et le
   moyeu prend le relais au toucher. La liste des familles, juste dessous, garde
   tous les noms en clair. */
@media (max-width:640px){
  .roue{max-width:520px}
  .roue .mp{display:none}
  .roue .moyeu{width:36%}
  .roue .nf{font-size:12.5px;letter-spacing:.06em}}
.fam{--f1:#9FB566}
.sect .fam ul{gap:14px;background:none;border:0}
.sect .fam li{background:none}
/* La carte n'est plus un cadre. L'etude est nette la-dessus : sur un fond a #0C110E,
   un contour clair, une ombre portee ou des coins arrondis alourdissent immediatement.
   Ce qui separe les cartes, c'est l'espace et la couleur de la plaque, rien d'autre. */
.sect .fam a{padding:0;display:flex;flex-direction:column;gap:0;background:none}
.sect .fam a:hover{background:none}
.sect .fam .plq{position:relative;padding-top:56%;background:var(--t);overflow:hidden;
  border-radius:3px}
.sect .fam .plq img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Le numero occupe la plaque au lieu de la decorer : c'est lui qui donne a la carte
   sa masse quand il n'y a pas d'image. */
.sect .fam .plq b{position:absolute;right:.12em;bottom:-.24em;font-family:var(--display);
  font-size:clamp(58px,8.5vw,124px);line-height:.8;font-weight:400;color:var(--ink);
  opacity:.34;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sect .fam .txtc{padding:11px 2px 0}
.sect .fam a:hover .plq{filter:brightness(1.22)}
.sect .fam .no{margin-bottom:3px}
/* Une planche par famille passe pleine largeur : la regularite des autres devient un
   fond, et celle-ci devient un evenement. Une seule declaration. */
.sect .fam li.tete{grid-column:1/-1}
.sect .fam li.tete .plq{padding-top:0;height:clamp(200px,26vh,300px)}
.sect .fam li.tete .plq b{font-size:clamp(96px,14vw,210px)}
.sect .fam li.tete .t{font-size:26px}
@media (max-width:620px){
  .sect .fam li.tete .plq{height:clamp(150px,22vh,200px)}
  .sect .fam li.tete .t{font-size:21px}}
@media (prefers-reduced-motion:no-preference){
  .sect .fam .plq{transition:filter .16s}}
.fam[data-fam="1"]{--fc:#9FB566}.fam[data-fam="2"]{--fc:#E07A6F}.fam[data-fam="3"]{--fc:#C9A247}.fam[data-fam="4"]{--fc:#8FB2E0}
:root:not([data-theme="dark"]) .fam[data-fam="1"]{--fc:#4C5A2E}:root:not([data-theme="dark"]) .fam[data-fam="2"]{--fc:#9A2A20}:root:not([data-theme="dark"]) .fam[data-fam="3"]{--fc:#7A6218}:root:not([data-theme="dark"]) .fam[data-fam="4"]{--fc:#1F4E8C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fam[data-fam="1"]{--fc:#9FB566}:root:not([data-theme="light"]) .fam[data-fam="2"]{--fc:#E07A6F}:root:not([data-theme="light"]) .fam[data-fam="3"]{--fc:#C9A247}:root:not([data-theme="light"]) .fam[data-fam="4"]{--fc:#8FB2E0}}
.fam[data-fam="1"] li[data-r="0"] a{--t:color-mix(in srgb,var(--fc) 30%, transparent)}
.fam[data-fam="1"] li[data-r="1"] a{--t:color-mix(in srgb,var(--fc) 24%, transparent)}
.fam[data-fam="1"] li[data-r="2"] a{--t:color-mix(in srgb,var(--fc) 19%, transparent)}
.fam[data-fam="1"] li[data-r="3"] a{--t:color-mix(in srgb,var(--fc) 14%, transparent)}
.fam[data-fam="1"] li[data-r="4"] a{--t:color-mix(in srgb,var(--fc) 11%, transparent)}
.fam[data-fam="2"] li[data-r="0"] a{--t:color-mix(in srgb,var(--fc) 30%, transparent)}
.fam[data-fam="2"] li[data-r="1"] a{--t:color-mix(in srgb,var(--fc) 24%, transparent)}
.fam[data-fam="2"] li[data-r="2"] a{--t:color-mix(in srgb,var(--fc) 19%, transparent)}
.fam[data-fam="2"] li[data-r="3"] a{--t:color-mix(in srgb,var(--fc) 14%, transparent)}
.fam[data-fam="2"] li[data-r="4"] a{--t:color-mix(in srgb,var(--fc) 11%, transparent)}
.fam[data-fam="3"] li[data-r="0"] a{--t:color-mix(in srgb,var(--fc) 30%, transparent)}
.fam[data-fam="3"] li[data-r="1"] a{--t:color-mix(in srgb,var(--fc) 24%, transparent)}
.fam[data-fam="3"] li[data-r="2"] a{--t:color-mix(in srgb,var(--fc) 19%, transparent)}
.fam[data-fam="3"] li[data-r="3"] a{--t:color-mix(in srgb,var(--fc) 14%, transparent)}
.fam[data-fam="3"] li[data-r="4"] a{--t:color-mix(in srgb,var(--fc) 11%, transparent)}
.fam[data-fam="4"] li[data-r="0"] a{--t:color-mix(in srgb,var(--fc) 30%, transparent)}
.fam[data-fam="4"] li[data-r="1"] a{--t:color-mix(in srgb,var(--fc) 24%, transparent)}
.fam[data-fam="4"] li[data-r="2"] a{--t:color-mix(in srgb,var(--fc) 19%, transparent)}
.fam[data-fam="4"] li[data-r="3"] a{--t:color-mix(in srgb,var(--fc) 14%, transparent)}
.fam[data-fam="4"] li[data-r="4"] a{--t:color-mix(in srgb,var(--fc) 11%, transparent)}
/* L'image de tete est servie ENTIERE : hauteur bornee, largeur libre. C'est la regle
   d'un fonds d'archive, ou une planche verticale, un panorama et une gravure au trait
   n'ont rien a faire dans une meme boite. La largeur qui danse d'une planche a
   l'autre fait a elle seule le rythme des pages. */
.tetiere{margin:0 0 30px}
.tetiere img{display:block;max-height:min(58vh,520px);width:auto;max-width:100%;
  height:auto;margin:0 auto;background:var(--carton,#E9E7DD);border-radius:2px}
.tetiere figcaption{font-family:var(--sc);font-size:12.5px;line-height:1.5;
  color:var(--ink-faint);margin:9px auto 0;max-width:68ch;text-align:center}
.tetiere figcaption b{font-weight:400;color:var(--ink-muted);display:block}
@media (max-width:640px){.tetiere img{max-height:42vh}}
/* Sur l'accueil la vignette remplit la plaque, parce qu'une grille demande des boites
   egales. C'est le seul endroit ou l'on recadre, et c'est assume. */
/* La boite de vignette etait proportionnee pour des photographies en paysage. Or le
   fonds est fait de planches, de feuilles d'herbier et de dessins de brevets : DIX-HUIT
   des vingt images de l'accueil sont verticales. Mesure sur la planche 1303 de Curtis,
   1600 sur 2830 : recadree dans une boite de 303 sur 170, il n'en restait que 32 % de
   la hauteur, une tranche de tige prise au milieu.
   Ce n'etaient donc pas les images qu'il fallait corriger, c'etait la boite. Elle passe
   en portrait, et chaque piece y est posee ENTIERE sur le carton, ce support de montage
   ivoire identique dans les deux themes. La marge autour n'est pas du vide, c'est le
   montage : un index de planches se compose comme un cabinet, pas comme un carrousel. */
/* La plaque REMPLIT sa boite. La version precedente posait la piece entiere, petite,
   au milieu d'un carton ivoire de 342 sur 309 : vingt et un timbres sur une planche
   d'album. Marco : « les images donnent pas envie. »
   Deux choses ont change en meme temps, et il fallait les deux. `vitrine.py` choisit
   desormais la piece sur ce qu'elle fait a l'oeil, mesure sur les 449 du fonds, et non
   sur son rang dans une table ecrite a la main : les deux plaques qui etaient des
   dessins de brevet, c'est-a-dire du papier blanc, sont parties. Et la boite recadre
   au lieu de contenir, ce qui n'est acceptable que parce que les pieces retenues sont
   maintenant des photographies et des planches en couleur, qui survivent au recadrage
   la ou une feuille d'herbier n'y survit pas.
   Le carton reste dessous : il se voit sur les pieces a fond clair, et c'est lui qui
   fait que la planche eclaire la page sombre au lieu d'y creuser un trou. */
.sect .fam .plq{position:relative;overflow:hidden;border-radius:0;padding-top:0;
  height:clamp(190px,21vw,260px);background:var(--carton,#E9E7DD)}
.sect .fam .plq img{position:absolute;inset:0;width:100%;height:100%;opacity:1;
  object-fit:cover;object-position:50% 42%;padding:0;filter:none}
.sect .fam li.tete .plq{height:clamp(260px,32vw,400px)}
.sect .fam a:hover .plq img{opacity:.88}
.sect .fam .plq.a-image b{display:none}
@media (prefers-reduced-motion:no-preference){
  .sect .fam .plq img{transition:opacity .16s}}
/* Les sections ne sont pas filles du `<main>` : elles vivent dans le conteneur
   centre `.wrap`. Le selecteur `>` direct ne touchait rien, et le module a
   annonce six sections sans en habiller une seule. Verifier sur le DOM produit,
   pas sur le balisage suppose.
   LE RYTHME DE BANDES, releve sur la page de reference : clair, blanc chaud, sombre,
   clair. Les bandes sont a fond perdu, ce qui suppose de sortir du conteneur centre :
   `margin-inline` negatif de 50vw compense par un `padding` egal. `100vw` est evite,
   il inclut la barre de defilement et fait deborder la page de dix-sept pixels. */
.moderne{--m-clair:var(--papier,#F3F2ED); --m-chaud:#FAF6EE; --m-sombre:#241D18;
  --m-sur-sombre:#EDE6D8; --m-sombre-pale:#A99C86; --m-accent:var(--e-rubrique,#9A2A20)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .moderne{
  --m-clair:var(--papier,#191D13); --m-chaud:#1E2117; --m-sombre:#0E100B;
  --m-sur-sombre:#E4E0D2; --m-sombre-pale:#9AA089}}
:root[data-theme="dark"] .moderne{
  --m-clair:var(--papier,#191D13); --m-chaud:#1E2117; --m-sombre:#0E100B;
  --m-sur-sombre:#E4E0D2; --m-sombre-pale:#9AA089}

.moderne .wrap > .sect,.moderne .wrap > .hero{
  margin-inline:calc(50% - 50vw + var(--barre,0px)/2);
  padding-inline:calc(50vw - 50% - var(--barre,0px)/2);
  padding-block:var(--e5,44px)}
.moderne .wrap > .sect:nth-of-type(2n){background:var(--m-chaud)}
/* Deux bandes sombres, en deuxieme et avant-derniere position : la page respire deux
   fois au lieu de se derouler d'un trait. */
.moderne .wrap > .sect:nth-of-type(2),.moderne .wrap > .sect:nth-last-of-type(2){
  background:var(--m-sombre);color:var(--m-sur-sombre)}
.moderne .wrap > .sect:nth-of-type(2) h2,.moderne .wrap > .sect:nth-last-of-type(2) h2,
.moderne .wrap > .sect:nth-of-type(2) .t,.moderne .wrap > .sect:nth-last-of-type(2) .t{
  color:var(--m-sur-sombre)}
.moderne .wrap > .sect:nth-of-type(2) .d,.moderne .wrap > .sect:nth-last-of-type(2) .d,
.moderne .wrap > .sect:nth-of-type(2) p,.moderne .wrap > .sect:nth-last-of-type(2) p{
  color:var(--m-sombre-pale)}
.moderne .wrap > .sect:nth-of-type(2) .tete,.moderne .wrap > .sect:nth-last-of-type(2) .tete{
  border-top-color:rgba(255,255,255,.18)}
.moderne .wrap > .sect:nth-of-type(2) a,.moderne .wrap > .sect:nth-last-of-type(2) a{
  color:var(--m-sur-sombre)}
/* LA BANDE RETEINT CE QU'ELLE CONTIENT. La roue de navigation l'a montre : ses
   couleurs sont choisies par calcul contre le fond de la page, et la page est
   claire ; posee telle quelle sur la bande sombre, elle devenait illisible. On
   redefinit donc ici le jeu de variables du theme sombre, rechauffe vers le brun de
   la bande, et tout ce qui s'y trouve suit sans une regle de plus. */
.moderne .wrap > .sect:nth-of-type(2),.moderne .wrap > .sect:nth-last-of-type(2){
  --paper:#241D18;--paper2:#2C231D;--paper3:#352A22;--carton:#2C231D;
  --ink:#EDE6D8;--ink2:#B9AE9C;--mute:#8A8071;
  --ink-muted:#B9AE9C;--ink-faint:#8A8071;
  --encre:#EDE6D8;--encre-mi:#B9AE9C;--encre-pale:#8A8071;
  --rule:#453931;--rule2:#342A24;--filet:#453931;
  --cherry:#E0705F;--leaf:#9FB566;--gold:#C9A247}
/* Les quatre familles de la roue reprennent leurs teintes de fond sombre, celles qui
   ont ete verifiees au contraste et au daltonisme contre un fond de cette valeur. */
.moderne .wrap > .sect:nth-of-type(2) .roue,
.moderne .wrap > .sect:nth-last-of-type(2) .roue{
  --f1:#9FB566;--f2:#E07A6F;--f3:#C9A247;--f4:#8FB2E0}

/* L'ACCENT UNIQUE. Le laurier, l'ocre et l'outremer cedent la place a la rubrique sur
   cette page. Les quatre teintes de la roue ne sont pas touchees : elles portent
   l'appartenance d'une planche a une famille, et une couleur qui informe n'est pas un
   ornement. C'est pour cela que la regle vise des elements nommes et non `*`. */
.moderne .sect .tete a,.moderne .porte:hover,.moderne .outil:hover,
.moderne .suggest a,.moderne .tcarte .lire a{color:var(--m-accent)}
.moderne .porte{border-top-color:transparent}
.moderne .porte:hover{border-top-color:var(--m-accent)}
.moderne .grandchamp button{background:var(--m-accent)}
.moderne .grandchamp button:hover{background:var(--m-sombre)}
.moderne .grandchamp:focus-within{border-bottom-color:var(--m-accent)}

/* Sur telephone les bandes gardent leur fond mais perdent le debordement lateral :
   `50vw - 50%` y vaut presque zero et ne coute rien, mais la marge interieure doit
   rester praticable. */
@media (max-width:640px){.moderne .wrap > .sect,.moderne .wrap > .hero{
  padding-block:var(--e4,30px)}}
/* La vue prend toute la largeur du cadre centre, pas celle du texte : le titre se lit
   sur une mesure de lecture, l'image se regarde sur la largeur de la page. Le rapport
   est impose parce que le fichier fait 1800 par 525 : sans hauteur ecrite, la bande
   grandit avec l'ecran jusqu'a chasser tout le reste sous la ligne de flottaison. */
.moderne .hero .vue-titre{margin:var(--e5,40px) 0 0}
.moderne .hero .vue-titre img{display:block;width:100%;
  height:clamp(180px,26vw,360px);object-fit:cover;object-position:center}
.moderne .hero .vue-titre figcaption{display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-top:8px;
  font-family:var(--ui);font-size:.72rem;letter-spacing:.06em;
  color:var(--mute)}
@media (max-width:640px){.moderne .hero .vue-titre{margin-top:var(--e4,26px)}}
/* Un document se montre entier. Mesure : la carte reclame Oura Java, 1600x2579, dans
   une vignette de 288x260 ; `cover` en gardait 56 % de la hauteur, le cadre imprime
   etait tranche. `contain` sur le carton montre la piece entiere, et ce qui manque
   pour remplir la boite est du papier. La grande vignette d'ouverture garde son
   plein cadre : une piece en hauteur n'y serait qu'un timbre au milieu du vide. */
.fam .plq.entier{background:var(--carton,#E9E7DD)}
.fam .plq.entier img{object-fit:contain;padding:10px}
/* Dans le bandeau, la piece prend toute la hauteur de la bande, 400 px, ce qui est
   plus grand que n'importe quelle vignette de la page. Elle se cale a gauche, la ou
   l'oeil commence, et le grand chiffre romain occupe la droite : une piece centree
   dans une bande trois fois plus large qu'elle flotterait. */
.fam li.tete .plq.entier img{padding:16px 0;object-position:left center}
@media (max-width:760px){.fam li.tete .plq.entier img{object-position:center}}
figure img{cursor:zoom-in}
#loupe{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.93);display:none;
  flex-direction:column;align-items:center;justify-content:center;padding:26px 20px 18px}
#loupe.on{display:flex}
#loupe img{max-width:min(100%,1500px);max-height:calc(100vh - 170px);object-fit:contain;
  filter:none;background:#fff}
#loupe .leg{max-width:760px;margin-top:16px;color:#ded7c8;font-family:var(--text);
  font-size:.86rem;line-height:1.5;text-align:center}
#loupe .leg .tag{display:inline-block;font-family:var(--ui);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;color:#9a9182;margin-right:8px}
#loupe .pos{position:absolute;top:18px;left:24px;font-family:var(--mono);font-size:.72rem;
  color:#9a9182}
#loupe .x{position:absolute;top:12px;right:16px;background:transparent;border:0;
  color:#ded7c8;font-size:1.9rem;line-height:1;cursor:pointer;padding:6px 10px}
#loupe .pas{position:absolute;top:50%;transform:translateY(-50%);background:transparent;
  border:0;color:#ded7c8;font-size:2.4rem;line-height:1;cursor:pointer;padding:14px 18px;
  opacity:.55}
#loupe .pas:hover{opacity:1}
#loupe .av{left:4px}#loupe .ap{right:4px}
@media (max-width:620px){#loupe .pas{font-size:1.9rem;padding:10px 8px}
  #loupe .leg{font-size:.78rem}}
:where(img[width]){height:auto}