/* =====================================================================
   COULEUR D'AZUR — ACCUEIL
   ---------------------------------------------------------------------
   Feuille autonome, chargée sur la seule page d'accueil. Elle ne
   dépend d'aucune règle de site.css et n'en écrase aucune : les deux
   cohabitent par des noms distincts (préfixe .ac-).

   Trois principes tiennent toute la mise en page :

   1. LE TEXTE N'EST JAMAIS PEINT PAR LE GPU. Le canevas est en position
      fixe DERRIÈRE le contenu. Tout ce qui se lit reste du HTML : net à
      toute densité, sélectionnable, traduisible, lisible par un lecteur
      d'écran, et trouvable par un moteur de recherche.

   2. AUCUNE ANIMATION NE TOUCHE À LA MISE EN PAGE. Uniquement transform
      et opacity — les deux seules propriétés que le compositeur sait
      traiter sans repasser par le calcul de la page. C'est la condition
      des soixante images par seconde, pas une préférence de style.

   3. TOUT FONCTIONNE SANS RIEN. Sans JavaScript la page est complète et
      lisible ; sans WebGL les images reprennent leur place et les
      panneaux leur fond opaque ; sans souris les effets de survol ne
      s'installent pas. Chaque couche est un supplément, jamais une
      condition.
   ===================================================================== */

.ac{
  /* --- Palette ---------------------------------------------------- */
  /* NUIT MÉDITERRANÉENNE.
     Le fond n'est pas noir : le noir pur écrase les bleus profonds d'une
     marine et fait ressortir la compression des images. C'est une encre
     bleutée très sombre, qui laisse aux toiles leurs noirs à elles — une
     toile posée dessus paraît éclairée, pas découpée.
     L'azur de la maison ne bouge pas : il est la seule couleur saturée de
     la page, et il n'a plus à lutter contre du papier clair. */
  /* BLANC. L'azur reprend sa valeur de charte — il n'a plus à être
     éclairci pour tenir sur du sombre — et l'encre redevient noire.
     Le texte secondaire est à 4,8:1 de contraste sur blanc, au-dessus du
     seuil AA : sur fond clair, un gris trop pâle est le premier défaut
     d'accessibilité qu'on introduit sans s'en rendre compte. */
  --ac-bleu:#004aad;
  --ac-bleu-profond:#003a87;
  --ac-bleu-clair:#3d7fd6;
  --ac-papier:#ffffff;        /* le fond */
  --ac-brume:255,255,255;     /* la brume du hero, en composantes : elle sert dans un rgba() */
  --ac-encre:#0d1117;         /* le texte */
  --ac-encre-2:#333d48;       /* le texte secondaire */
  --ac-trait:rgba(13,17,23,.14);

  /* --- Rythme ------------------------------------------------------
     Une seule gouttière, déclinée partout : la page respire au même
     pas du haut en bas, ce qui se voit même sans qu'on sache pourquoi. */
  --ac-marge:clamp(20px,5vw,110px);
  --ac-section:clamp(96px,14vh,210px);

  position:relative;
  background:var(--ac-papier);
  color:var(--ac-encre);
  overflow-x:clip;
}

/* Le repère de superposition. Le canevas est au fond, le contenu
   par-dessus : c'est tout l'empilement de la page. */
.ac-gl{
  position:fixed;inset:0;z-index:0;
  width:100%;height:100%;
  pointer-events:none;
  opacity:0;transition:opacity 1.2s ease .2s;
}
.ac-gl-on .ac-gl{opacity:1}
.ac > *:not(.ac-gl){position:relative;z-index:1}

/* Sans WebGL, le fond n'est pas vide pour autant : un dégradé qui
   reprend les mêmes bleus, simplement immobile. */
.ac::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 18% 8%,rgba(61,127,214,.14),transparent 62%),
    radial-gradient(90% 70% at 88% 82%,rgba(0,74,173,.12),transparent 60%),
    var(--ac-papier);
  transition:opacity .9s ease;
}
.ac-gl-on.ac::before{opacity:0}

/* =====================================================================
   IL N'Y A PLUS DE VOILE DE CHARGEMENT
   ---------------------------------------------------------------------
   Un plan opaque couvrait l'écran au chargement, avec le nom de la
   galerie au milieu, et il s'est allégé en trois temps : le compteur en
   chiffres, puis la jauge, puis le voile lui-même. Chaque retrait a
   rendu du temps — le dernier en rend le plus, puisque la page n'a plus
   rien à attendre avant de se montrer.

   Ce qui reste de l'ancien dispositif : la classe `ac-pret`, encore
   posée par le filet de secours de `accueil.js`. Elle ne pilote plus
   aucun style ; on la garde parce qu'elle sert de repère à ce filet, et
   qu'elle ne coûte rien.
   ===================================================================== */

/* La barre de progression du défilement, filet de deux pixels en tête. */
.ac-progression{
  position:fixed;top:0;left:0;z-index:600;
  display:block;width:100%;height:2px;background:var(--ac-bleu);
  transform:scaleX(0);transform-origin:0 50%;
}

/* =====================================================================
   TYPOGRAPHIE CINÉTIQUE
   ---------------------------------------------------------------------
   Le principe : chaque signe est enfermé dans une fenêtre en
   overflow:hidden, et c'est le signe qui monte à l'intérieur. On ne voit
   donc jamais rien dépasser — le texte se dévoile, il n'apparaît pas.

   La rotation autour de X est prise depuis un point situé DERRIÈRE le
   texte (transform-origin en Z négatif) : le signe bascule vers nous au
   lieu de pivoter sur place. C'est ce détail qui fait la différence
   entre un texte qui monte et un texte qui se déplie.
   ===================================================================== */
.ac-mot{display:inline-block;white-space:nowrap}
.ac-fente{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em 0}
/* ═══ RIEN N'EST MASQUÉ PAR DÉFAUT ═══
   Ces règles sont sous `html.ac-anime`, une classe que le moteur ne pose
   qu'au moment PRÉCIS où il s'apprête à observer les éléments — donc une
   fois qu'il est certain de pouvoir les révéler.

   Avant, elles s'appliquaient d'emblée et le contenu attendait une classe
   posée par JavaScript. Le jour où le JavaScript s'est arrêté avant d'y
   arriver, la page est devenue blanche. Une page ne doit jamais dépendre de
   son animation pour être lisible : l'ordre correct est de tout montrer,
   puis de masquer seulement si l'on sait animer. */
html.ac-anime .ac-fente__i{
  display:inline-block;
  transform:translate3d(0,110%,0) rotateX(-72deg);
  transform-origin:50% 100% -.4em;
  opacity:0;
  transition:none;          /* même raison que ci-dessous : on ne fond pas VERS le masque */
}
.is-la .ac-fente__i{transform:translate3d(0,0,0) rotateX(0);opacity:1}

/* Révélations simples, pour tout ce qui n'est pas un titre. */
html.ac-anime [data-ac-revele]:not([data-fendre]):not([data-fendre-signes]){
  /* ═══ LE MASQUAGE NE S'ANIME PAS. LA RÉVÉLATION, SI. ═══
     La transition était déclarée ICI, sur l'état masqué — donc elle
     jouait dans les DEUX sens. Au moment où le moteur pose `ac-anime`,
     la page est déjà peinte et tout est à l'opacité 1 : déclarer
     l'opacité 0 avec une transition lançait un FONDU DE SORTIE sur les
     trente-quatre éléments à la fois.

     Pour une carte proche du cadre, l'observateur pose `is-la` dans la
     foulée — parfois la même image. Le fondu de sortie et le fondu
     d'entrée se rencontrent alors à mi-chemin et s'annulent : la carte
     est simplement là, sans mouvement. C'est exactement « il n'y a
     toujours pas d'effet d'apparition », et aucun réglage de durée ou de
     distance ne pouvait le corriger — je réglais l'amplitude d'un geste
     qui n'avait pas lieu.

     L'état masqué est donc posé SANS transition : instantané, invisible,
     il ne fait que préparer le départ. La transition vit désormais sur
     `.is-la`, c'est-à-dire uniquement sur le trajet d'arrivée. */
  opacity:0;transform:translate3d(0,22px,0);
  transition:none;
}
[data-ac-revele].is-la{opacity:1;transform:none}

/* =====================================================================
   ═══ LES ÉTATS D'ARRIVÉE, ÉCRITS ASSEZ FORT POUR GAGNER ═══
   ---------------------------------------------------------------------
   C'ÉTAIT LE DÉFAUT CENTRAL DE LA PAGE, ET IL ÉTAIT INVISIBLE.

   Les deux règles de masquage ci-dessus sont préfixées `html.ac-anime`.
   Leurs états d'arrivée, eux, ne l'étaient pas :

     masque   html.ac-anime .ac-fente__i                       → (0,2,1)
     arrivée  .is-la .ac-fente__i                              → (0,2,0)

     masque   html.ac-anime [data-ac-revele]:not():not()       → (0,4,1)
     arrivée  [data-ac-revele].is-la                           → (0,2,0)

   Dans les deux cas c'est le MASQUE qui l'emporte. Poser `.is-la` ne
   changeait donc rigoureusement rien : les lettres du titre restaient
   couchées à opacité nulle, et tous les textes de la page avec elles.
   Le titre du site, la ligne « JJG — peintre de la Méditerranée », les
   phrases entre les rangées d'œuvres, le « Défiler » : tout était là,
   dans le DOM, correctement observé, et invisible.

   Pourquoi personne ne l'a vu plus tôt : le filet de secours retirait
   `ac-anime` au bout de six secondes. Les masques tombaient avec la
   classe, et la page redevenait lisible — sans aucune animation, mais
   lisible. Le filet compensait le défaut au lieu de le signaler. En
   réparant le filet, on a rendu le défaut visible : c'est exactement ce
   qu'il fallait, mais il fallait aussi le corriger, ici.

   La correction consiste à reprendre le même préfixe et les mêmes
   `:not()` du côté de l'arrivée, plus la classe `.is-la` : un cran
   au-dessus du masque, dans tous les cas. C'est verbeux, et c'est le
   prix de règles de masquage préfixées — la seule alternative serait
   `!important`, qui interdirait ensuite toute nuance par section.
   ===================================================================== */
html.ac-anime .is-la .ac-fente__i{
  transform:translate3d(0,0,0) rotateX(0);
  opacity:1;
  transition:transform .95s cubic-bezier(.16,1,.3,1),opacity .5s ease;
  transition-delay:calc(var(--n) * 26ms);
}
html.ac-anime [data-ac-revele]:not([data-fendre]):not([data-fendre-signes]).is-la{
  opacity:1;transform:none;
  transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--r,0) * 90ms);
}

/* =====================================================================
   LA GRILLE D'ŒUVRES VA PLUS VITE QUE LE RESTE, ET C'EST VOULU
   ---------------------------------------------------------------------
   Le fondu général — 900 ms, cascade de 90 ms — a été écrit pour du
   texte éditorial : un titre, une phrase, un bouton. Sur ces éléments-là
   la lenteur est une qualité, elle donne le temps de lire.

   Une grille de tableaux ne se lit pas, elle se PARCOURT. Appliquer la
   même courbe à quatre cartes de front revenait à faire attendre près
   d'une seconde et demie, en défilant, avant de voir la première rangée
   d'œuvres — sur une page dont les œuvres sont l'unique raison d'être.
   Le mouvement était devenu un péage.

   On garde donc l'apparition, mais aux mesures d'une vitrine : un fondu
   de 380 ms, une cascade de 40 ms d'une carte à l'autre. À quatre
   colonnes, la rangée entière est posée en 500 ms au lieu de 1170 —
   assez pour qu'on perçoive une arrivée, trop peu pour qu'on l'attende.

   La spécificité reprend celle de la règle générale, `:not()` compris,
   plus la classe `.ac-carte` : un cran au-dessus, comme partout ailleurs
   dans cette feuille.
   ===================================================================== */
html.ac-anime .ac-carte[data-ac-revele]:not([data-fendre]):not([data-fendre-signes]){
  /* ═══ UNE ARRIVÉE, PAS UN FONDU ═══
     Un simple relevé de 22 px avec une opacité, c'est une apparition ;
     ce n'est pas un mouvement. Les œuvres glissent maintenant depuis la
     GAUCHE, en montant légèrement, et prennent leur taille en chemin.

     LES TROIS NOMBRES, ET POURQUOI CEUX-LÀ.

     · −54 px horizontalement. Assez pour que le déplacement se lise comme
       une direction et non comme un tremblement ; assez peu pour tenir
       dans la gouttière de la grille. Toute la rangée part du même bord
       et de la même distance : les cartes conservent donc leur écart
       pendant tout le trajet, et aucune ne peut passer devant sa voisine.
       C'est la faute exacte de l'ancien module « défilé », qui envoyait
       une rangée sur deux à 120 px dans l'autre sens.

     · 0.97 d'échelle au départ. L'œuvre grandit jusqu'à sa taille réelle,
       ce qui donne la lecture « elle s'avance ». L'échelle ne dépasse
       JAMAIS 1 : une carte agrandie mordrait sur sa voisine.

     · 55 ms de cascade. À quatre colonnes, la rangée entière se pose en
       165 ms de décalage — l'œil lit une vague qui traverse de gauche à
       droite. Au-delà, ça devient une file d'attente.

     La courbe est un `ease-out` franc mais sans rebond : un dépassement
     ferait osciller la carte autour de sa position finale, et sur une
     grille dense l'oscillation se lit comme un défaut d'alignement. */
  transform:translate3d(-54px,18px,0) scale(.97);
}
html.ac-anime .ac-carte[data-ac-revele]:not([data-fendre]):not([data-fendre-signes]).is-la{
  transform:none;
  transition:
    opacity   .55s ease,
    transform .8s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--r,0) * 55ms);
}

/* =====================================================================
   L'ENTRÉE
   ===================================================================== */
.ac-hero{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  /* CENTRÉ. Le champ rayonne depuis le milieu du cadre : un titre aligné à
     gauche se retrouvait décentré par rapport au point de fuite, et les
     deux compositions se contrariaient. */
  align-items:center;text-align:center;
  padding:clamp(110px,16vh,180px) var(--ac-marge) clamp(40px,7vh,74px);
}
/* =====================================================================
   LA BRUME DERRIÈRE LE TITRE
   ---------------------------------------------------------------------
   Les œuvres du champ passent maintenant TOUTES derrière le texte : la
   couche « avant » a été retirée il y a longtemps, et c'était juste. Mais
   passer derrière ne suffit pas à rendre lisible. Une marine très
   contrastée qui traverse le centre du cadre met des bleus profonds
   exactement là où se pose « Couleur d'Azur », et la ligne « JJG —
   peintre de la Méditerranée », qui est petite, capitale et espacée,
   disparaissait franchement.

   La réponse n'est pas de déplacer le titre ni de ralentir le champ :
   c'est de poser un peu d'air entre les deux. Une brume radiale, de la
   couleur du papier, dense au centre et nulle avant le tiers extérieur —
   les œuvres ne sont ni cachées ni assombries, elles reculent. C'est ce
   que fait l'atmosphère sur un vrai paysage, et la page en parle assez
   pour que le procédé soit chez lui.

   Elle est en `::after` et non en élément : rien à ajouter au HTML, et
   comme les pseudo-éléments se peignent après les enfants de même plan,
   `z-index:0` la place au-dessus du champ (0) et sous le texte (1), sans
   qu'aucune valeur intermédiaire soit nécessaire.
   ===================================================================== */
.ac-hero::after{
  content:'';
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
  /* ═══ LA BRUME S'ALLÈGE ═══
     Elle était à 78 % au centre et s'étendait sur 58 % de la largeur :
     assez pour effacer les œuvres qui traversent le cadre, ce qui est
     précisément ce qu'elle ne doit pas faire. Elle n'a qu'un seul travail,
     tenir le texte lisible.

     Deux réglages, pas un. L'opacité descend à 46 %, ET l'étendue se
     resserre à 46 % × 30 % — parce que baisser seulement l'opacité aurait
     donné un voile pâle mais toujours aussi large, c'est-à-dire une
     brume sur toute l'image. Resserrée, elle ne couvre plus que la bande
     du titre et de la ligne « JJG » ; les toiles qui passent au-dessus et
     sur les côtés gardent leurs couleurs pleines. */
  background:radial-gradient(46% 30% at 50% 46%,
    rgba(var(--ac-brume,255,255,255),.46) 0%,
    rgba(var(--ac-brume,255,255,255),.34) 38%,
    rgba(var(--ac-brume,255,255,255),.13) 64%,
    rgba(var(--ac-brume,255,255,255),0) 82%);
}

.ac-hero__sous{margin-left:auto;margin-right:auto}
.ac-hero__bas{justify-content:center}
.ac-hero__sur{
  margin:0 0 clamp(22px,3vh,40px);
  font-size:clamp(10px,.78vw,12px);letter-spacing:.34em;text-transform:uppercase;
  color:var(--ac-bleu-texte,var(--ac-bleu));font-weight:600;
}

/* Le titre. Il occupe la largeur parce qu'il EST la page : rien d'autre
   n'a besoin d'être vu en premier. La graisse est condensée pour tenir
   sans réduire le corps — un titre qui rétrécit pour tenir avoue qu'il
   ne tient pas. */
.ac-titre{
  margin:0;
  /* UNE GROTESQUE, PAS UNE CONDENSÉE.
     Oswald est étroite et verticale — une allure d'affiche, mais fine, et
     elle manquait de masse. Archivo en 700 est une grotesque moderne aux
     pleins larges : à cette taille elle fait bloc. L'interlettre est
     resserrée (−0,045 em) parce qu'une graisse forte écarte les signes ;
     sans cette correction, un titre gras paraît lâche. */
  font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:700;
  /* La taille est calculée en fin de fichier, à partir de la largeur réelle du
     cadre. Elle ne peut PAS être écrite ici en unités de fenêtre : la largeur
     d'un texte suit le corps, pas la fenêtre. Voir « LE TITRE TIENT SUR UNE
     SEULE LIGNE » plus bas. */
  line-height:.86;letter-spacing:-.045em;
  text-transform:uppercase;
  /* Les deux mots ne se séparent jamais. La règle est posée ici, à la source,
     et répétée en fin de fichier : c'est la seule propriété de ce thème dont
     la perte change l'identité de la marque. */
  white-space:nowrap !important;
  perspective:900px;                 /* la 3D des signes a besoin d'un point de fuite */
}
/* Le module de typo cinétique remplace le contenu du titre par une cascade de
   `span` — un par mot, un par signe. Chacun devient une boîte en ligne, et une
   boîte en ligne peut passer à la ligne suivante. On étend donc l'interdiction
   à toute la descendance : peu importe la façon dont le titre est découpé, il
   ne peut plus se replier. */
.ac-titre *{white-space:nowrap !important}
.ac-titre .ac-mot:last-child .ac-fente__i{color:var(--ac-bleu-texte,var(--ac-bleu))}
/* Sur blanc, le titre reprend l'encre pleine : c'est le contraste le plus
   fort de la page, et c'est voulu. */
.ac-titre{color:var(--ac-encre)}

.ac-hero__sous{
  max-width:34ch;margin:clamp(26px,4vh,46px) 0 0;
  font-size:clamp(15px,1.15vw,19px);line-height:1.55;color:var(--ac-encre-2);
}
.ac-hero__bas{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,3vw,42px);
  margin-top:clamp(34px,5vh,58px);
}

/* Le bouton. Le fond bleu se déplie depuis le bas au survol : un
   remplissage, pas un changement de couleur — on sent le geste. */
.ac-btn{
  position:relative;display:inline-flex;align-items:center;gap:.7em;
  padding:clamp(14px,1.1vw,19px) clamp(26px,2.2vw,38px);
  border:1px solid var(--ac-encre);border-radius:999px;
  font-size:clamp(11.5px,.86vw,14px);letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ac-encre);text-decoration:none;
  overflow:hidden;isolation:isolate;
  transition:color .45s ease,border-color .45s ease;
}
.ac-btn::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--ac-bleu);
  transform:translateY(101%);
  transition:transform .55s cubic-bezier(.76,0,.24,1);
}
.ac-btn:hover,.ac-btn:focus-visible{color:#fff;border-color:var(--ac-bleu)}
.ac-btn:hover::before,.ac-btn:focus-visible::before{transform:translateY(0)}
.ac-btn--plein{background:var(--ac-bleu);border-color:var(--ac-bleu);color:#fff}
.ac-btn--plein::before{background:var(--ac-encre)}
.ac-btn span{display:inline-block}

.ac-defiler{
  display:inline-flex;align-items:center;gap:12px;
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ac-encre-2);
}
.ac-defiler i{
  display:block;width:44px;height:1px;background:var(--ac-trait);position:relative;overflow:hidden;
}
.ac-defiler i::after{
  content:'';position:absolute;inset:0;background:var(--ac-bleu);
  transform:translateX(-100%);animation:ac-file 2.4s cubic-bezier(.76,0,.24,1) infinite;
}
@keyframes ac-file{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* =====================================================================
   LE MANIFESTE
   ---------------------------------------------------------------------
   Un seul paragraphe, en grand. Le seul endroit de la page où le texte
   a le droit d'être long : après, on regarde.
   ===================================================================== */
.ac-manifeste{
  padding:var(--ac-section) var(--ac-marge);
  max-width:1180px;
}
.ac-manifeste p{
  margin:0;
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(23px,3.4vw,54px);line-height:1.22;letter-spacing:-.015em;
  perspective:900px;
}
.ac-manifeste em{font-style:italic;color:var(--ac-bleu-texte,var(--ac-bleu))}
.ac-manifeste__signe{
  display:block;margin-top:clamp(26px,4vh,44px);
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--ac-encre-2);
}

/* =====================================================================
   LES ŒUVRES
   ===================================================================== */
.ac-oeuvres{padding:0 var(--ac-marge) var(--ac-section)}
.ac-tete{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:24px;padding-bottom:clamp(28px,4vh,52px);
  border-bottom:1px solid var(--ac-trait);
  margin-bottom:clamp(40px,6vh,80px);
}
.ac-tete h2{
  margin:0;
  font-family:var(--cda-display,'Oswald',system-ui,sans-serif);
  font-weight:var(--cda-display-poids,500);
  font-size:clamp(30px,4.6vw,74px);line-height:.94;letter-spacing:-.015em;
  text-transform:uppercase;perspective:800px;
}
.ac-tete p{margin:0;max-width:38ch;font-size:clamp(13.5px,.95vw,16px);line-height:1.6;color:var(--ac-encre-2)}

/* LA PERSPECTIVE EST SUR LA GRILLE, PAS SUR LA CARTE.
   Une transformation 3D n'a de point de fuite que si son PARENT en déclare
   un. La carte porte déjà une perspective pour son propre contenu — c'est
   la grille qui doit fournir celle du défilé. Les deux s'imbriquent sans
   se gêner : le pivot au scroll est vu depuis la grille, l'inclinaison au
   curseur depuis la carte. */
.ac-grille{
  perspective:1500px;perspective-origin:50% 45%;
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(28px,3.4vw,64px) clamp(20px,2.6vw,48px);
  /* QUATRE COLONNES. À trois, les cartes atteignaient 400 px de large sur un
     écran de 1440 : une toile de 60 × 40 cm y paraissait plus grande qu'elle
     ne l'est, et la sélection tenait sur une hauteur qu'il fallait défiler
     longtemps. À quatre, chaque carte fait environ 290 px — la taille d'une
     reproduction de catalogue, et la rangée se compare d'un seul regard. */
  grid-template-columns:repeat(4,1fr);
}
/* Un palier intermédiaire est nécessaire : passer directement de quatre à deux
   colonnes ferait doubler la taille des cartes d'un cran de fenêtre à l'autre,
   et la rangée de respiration se retrouverait à contretemps du rythme visuel. */
@media (max-width:1280px){
  .ac-grille{grid-template-columns:repeat(3,1fr)}
}
/* La deuxième et la cinquième descendent : une grille parfaitement
   alignée se lit comme un tableau de données, décalée elle se parcourt.

   Le décalage est une MARGE, pas une transformation. C'est contre-intuitif
   — on évite les marges dans les mises en page animées — mais celle-ci ne
   bouge jamais, elle est calculée une fois. Alors qu'une transformation
   serait écrasée soixante fois par seconde par le module de profondeur,
   qui écrit sur la même propriété et sur les mêmes cartes. */
/* PLUS DE DÉCALAGE EN QUINCONCE.
   Combiné au glissement latéral, il faisait se recouvrir les cartes
   voisines. Les œuvres arrivent maintenant en profondeur, chacune dans sa
   case : la grille garde ses gouttières, et rien ne peut plus en sortir. */
.ac-carte{margin-top:0}

.ac-carte{
  /* `perspective` reste : c'est elle qui donne sa profondeur à
     l'inclinaison au survol, écrite sur le lien intérieur.
     `will-change:transform` est parti. Il se justifiait quand le
     défilement réécrivait la transformation de la carte à chaque image ;
     ce module n'existe plus. Le laisser promeut seize couches de
     composition en permanence, pour un relevé de 14 px qui ne joue
     qu'une fois — c'est payer le coût d'une animation continue pour une
     animation qui n'a pas lieu. */
  margin:0;perspective:1200px;transform-style:preserve-3d;
}
.ac-carte__lien{
  position:relative;
  display:block;text-decoration:none;color:inherit;
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
/* ═══ LA PASTILLE « VOIR » A ÉTÉ RETIRÉE ═══
   Elle apparaissait au survol, en bas à droite de chaque œuvre. Retirée à
   la demande du client, et l'argument tient : sur une grille où CHAQUE
   carte est un lien, un libellé « Voir » n'apprend rien — il redit ce que
   le curseur, le soulignement du titre et l'agrandissement de l'image
   disent déjà. Il ajoutait un objet d'interface par-dessus une peinture,
   ce qui est exactement ce qu'une page de galerie doit éviter.

   L'attribut `data-cursor-label` reste dans le balisage : il ne coûte
   rien et il redeviendrait le point d'accroche si l'on voulait un jour
   remettre une indication au survol.

   CE QU'ELLE FAISAIT ET QUI NE DOIT PAS DISPARAÎTRE : elle s'affichait
   aussi au focus clavier, où elle marquait la carte atteinte. Ce rôle-là
   est repris ci-dessous par un anneau de focus franc sur le lien — plus
   discret pour la souris, plus net pour le clavier. */
.ac-carte__lien:focus-visible{
  outline:2px solid var(--ac-bleu-texte,#004aad);
  outline-offset:4px;
  border-radius:4px;
}

/* `will-change` seulement quand l'inclinaison peut se produire.
   Il était déclaré en permanence : seize liens promus chacun en couche de
   composition, gardés en mémoire graphique du début à la fin de la page,
   pour un effet qui ne se déclenche qu'au passage du curseur — et sur un
   seul élément à la fois. On l'annonce donc à l'entrée du curseur dans la
   carte : le survol de la carte précède toujours l'inclinaison du lien
   qu'elle contient, la promotion est donc prête à temps. */
.ac-carte:hover .ac-carte__lien,
.ac-carte.is-touche .ac-carte__lien{will-change:transform}
.ac-carte__media{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:var(--ar,4 / 5);
  /* La place réservée avant l'arrivée de l'image, et l'ombre portée qui
     détache la toile du fond. Sur nuit, l'ombre doit être franche : une
     ombre bleutée se noierait. */
  /* ═══ LE CADRE N'EST PLUS TRANSPARENT EN ATTENDANT L'ŒUVRE ═══
     C'était un dégradé à 5 % d'opacité : sur le fond clair de la page, un
     rectangle vide indiscernable d'un chargement raté. `--ac-dominante`
     est la couleur moyenne de la toile, écrite dans le balisage ; le
     cadre la porte tant que le fichier n'est pas arrivé, et elle
     disparaît sous l'image dès qu'elle l'est. Le repli `#e8eef6` sert aux
     rares fiches sans couleur calculée. */
  /* Le fond est OPAQUE — c'est le point — et il est teinté de la couleur
     de l'œuvre, mais à douze pour cent seulement. La raison tient au
     cadrage : avec `object-fit:contain`, la toile ne remplit pas son
     cadre, et ce fond reste visible tout autour d'elle même une fois
     l'image chargée. Une plaque de couleur pleine ferait donc un bandeau
     criard autour de chaque œuvre, différent d'une carte à l'autre. À
     douze pour cent, on obtient l'inverse : un passe-partout dont la
     teinte répond discrètement à la toile — ce que fait un encadreur —
     et qui suffit largement, tant que l'image n'est pas là, à dire
     « une peinture arrive » plutôt que « c'est cassé ». */
  background:
    linear-gradient(0deg,rgba(255,255,255,.88),rgba(255,255,255,.88)),
    var(--ac-dominante,#8ea6c4);
  box-shadow:0 34px 66px -44px rgba(0,42,99,.5);
}
/* L'ŒUVRE ARRIVE EN FONDU, ELLE N'APPARAÎT PAS D'UN COUP.
   `content-visibility` mise à part, un navigateur peint l'image dès le
   premier octet décodé : sur une grande photo, cela donne un balayage
   du haut vers le bas, très visible sur fond coloré. La transition
   d'opacité, déclenchée par le simple fait que l'image devienne
   « complete », lisse ce passage. Pas de JavaScript : l'attribut
   `decoding="async"` suffit à ce que le navigateur ne peigne qu'une fois
   l'image prête. */
.ac-carte__img{opacity:1;transition:opacity .55s ease}
.ac-carte__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1),opacity .5s ease;
}
.ac-carte:hover .ac-carte__media img{transform:scale(1.045)}

/* Quand la couche WebGL a pris la main, l'image du document s'efface —
   mais elle reste dans la page, elle tient la place et porte l'alt. */
/* L'<img> ne s'efface QUE tant que la couche WebGL est effectivement en
   service. `is-gl` dit « cette œuvre a une texture » ; `ac-gl-on` dit
   « la couche dessine ». Sans la seconde condition, une perte de contexte
   graphique — carte reprise par le système, onglet dégradé — laissait un
   rectangle vide à la place d'une peinture. Le repli est maintenant
   automatique : la classe tombe, l'image reparaît. */
.ac-gl-on .ac-carte__media.is-gl img{opacity:0}
.ac-carte__media.is-gl{background:transparent;box-shadow:none}

/* Le reflet spéculaire. Il est peint en CSS et non en WebGL : c'est un
   simple dégradé dont le centre suit l'inclinaison, et il n'a donc
   aucun coût. */
.ac-carte__reflet{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(38% 46% at var(--gx,50%) var(--gy,50%),
             rgba(255,255,255,.62),rgba(255,255,255,.14) 42%,transparent 72%);
  mix-blend-mode:soft-light;
  transition:opacity .4s ease;
}

.ac-carte__pied{
  display:flex;flex-direction:column;
  /* Un espacement franc entre les lignes plutôt que des marges héritées :
     les titres se chevauchaient parce que la hauteur de ligne du serif
     dépassait l'espace qu'on lui laissait. */
  gap:7px;padding-top:16px;
  /* Un titre long ne doit ni déborder, ni forcer la carte à s'élargir. */
  min-width:0;
}
.ac-carte__pied b{overflow-wrap:anywhere;hyphens:auto}
.ac-carte__pied b{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(16px,1.25vw,21px);font-weight:600;line-height:1.2;letter-spacing:-.01em;
}
.ac-carte__pied i{font-style:normal;font-size:12px;letter-spacing:.05em;color:var(--ac-encre-2)}
/* ═══ LE PRIX N'EST PLUS BLEU, ET C'EST UNE QUESTION DE FOND ═══
   Il était écrit dans le bleu de la marque. Tant que la page était
   blanche, c'était l'accent juste. Depuis que le fond est un champ de
   pigment MARINE, c'est du bleu sur du bleu : mesuré sur l'image rendue,
   3,62:1 en jour et 3,18:1 en nuit, très en dessous du minimum de 4,5.
   Et c'est le prix — l'information qu'on cherche des yeux.

   Il passe donc à l'encre forte, qui tient partout. La carte ne perd pas
   sa couleur pour autant : le filet juste au-dessus porte la dominante
   de l'œuvre elle-même, ce qui est un accent plus juste qu'une teinte de
   charte répétée sur les soixante et une cartes. */
.ac-carte__pied em{
  font-style:normal;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--ac-encre);
}
/* Le filet de couleur dominante : la seule chose de la carte qui
   appartienne à l'œuvre et non à la grille. */
/* LA BARRE FAIT TOUTE LA LARGEUR DE L'ŒUVRE.
   Elle mesurait 34 px et s'allongeait au survol : un accent graphique.
   Elle devient une RÉGLETTE — la couleur dominante de la toile, tirée sur
   toute sa largeur, comme un nuancier sous une planche. Elle appartient à
   l'œuvre, elle en prend donc la mesure exacte.

   La largeur vient du parent, pas d'un nombre : quelle que soit la
   colonne, quelle que soit la fenêtre, elle fait exactement la largeur de
   la carte. Le survol l'épaissit au lieu de l'allonger — il n'y a plus
   rien à allonger. */
.ac-carte__filet{
  display:block;width:100%;height:3px;
  background:var(--ac-c,var(--ac-bleu));
  margin-top:12px;
  transition:height .45s cubic-bezier(.16,1,.3,1),opacity .45s ease;
}
.ac-carte:hover .ac-carte__filet{height:6px}

/* =====================================================================
   LES PANNEAUX DE VERRE
   ---------------------------------------------------------------------
   Le verre est peint sur le canevas, DERRIÈRE le panneau. Le panneau
   lui-même n'a donc pas de fond quand WebGL tourne — sinon on
   masquerait la réfraction qu'on vient de calculer.

   Sans WebGL, ou après dégradation automatique, il reprend un fond
   dépoli en CSS : moins beau, mais lisible, et c'est la seule chose qui
   compte.
   ===================================================================== */
.ac-panneau{
  position:relative;
  /* Le rembourrage devient un jeton : le portrait du peintre doit le
     retrancher pour atteindre le bord de l'écran, et deux valeurs écrites
     séparément finiraient par diverger. */
  --ac-panneau-pad:clamp(30px,4.2vw,72px);
  border-radius:26px;
  padding:var(--ac-panneau-pad);
  /* ═══ PAS DE `backdrop-filter` ICI, ET C'EST LA CAUSE DU SACCADÉ ═══
     Ce panneau mesure environ 1245 × 1176, soit un million et demi de
     pixels, et il DÉFILE. `backdrop-filter` demande au compositeur de
     relire puis de flouter tout ce qui se trouve derrière lui — et
     derrière lui, précisément, il y a le canevas WebGL, qui change à
     chaque image. Le flou ne peut donc jamais être mis en cache : il est
     recalculé intégralement soixante fois par seconde, sur deux panneaux.
     C'est de très loin le poste le plus cher de la page, bien plus que le
     shader lui-même, et c'est ce qui la faisait saccader au défilement.

     Une règle en écartait le panneau tant que la couche WebGL peignait le
     verre à sa place. En sortant les panneaux du WebGL, j'ai supprimé
     cette règle — et rétabli sans le voir le coût qu'elle évitait. Le
     défaut vient de là, il date de deux dépôts, et il est à moi.

     Un aplat opaque le remplace. Sur un fond d'aquarelle aussi doux, un
     blanc à 82 % est visuellement presque indiscernable d'un blanc flouté
     — le flou ne servait qu'à adoucir des contrastes que ce fond n'a pas —
     et il ne coûte rien du tout : le compositeur n'a plus rien à relire. */
  /* La recette du verre est écrite une seule fois, dans site.css. */
  background:var(--cda-verre-lumiere),var(--cda-verre);
  border:1px solid var(--cda-verre-bord);
  box-shadow:var(--cda-verre-ombre);
}
/* WebGL actif : on rend la main au canevas. On garde une bordure très
   fine, qui raccorde le bord peint au pixel près du bord du document. */
/* LE PANNEAU NE SE REND PLUS TRANSPARENT.
   Cette règle effaçait le fond, le flou et l'ombre dès que `ac-gl-on`
   était posée, parce que le canevas était censé peindre le verre à la
   place. Il ne le peint plus (voir accueil-gl.js) : le panneau reprend
   donc son propre fond, qui ne peut pas se décaler de lui-même. Seule la
   bordure s'éclaircit encore, pour que le cadre reste discret sur le fond
   animé. */
.ac-gl-on .ac-panneau{
  border-color:rgba(13,17,23,.10);
}
/* Machine lente : le canevas a abandonné le verre, le CSS le reprend. */
/* Machine lente : même verre, à peine plus dense — le canevas peint
   moins souvent, donc le fond derrière bouge moins et supporte d'être
   un peu plus couvert. */
.ac-gl-sobre .ac-panneau{background:var(--cda-verre-lumiere),rgba(255,255,255,.74)}

.ac-peintre{padding:0 var(--ac-marge) var(--ac-section)}
.ac-peintre__grille{
  display:grid;gap:clamp(28px,3.4vw,60px);
  grid-template-columns:1.15fr .85fr;align-items:start;
}
.ac-chap h2{
  margin:0 0 clamp(16px,2vh,26px);
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(24px,2.6vw,40px);line-height:1.14;letter-spacing:-.015em;font-weight:600;
}
.ac-chap h2 em{font-style:italic;color:var(--ac-bleu-texte,var(--ac-bleu))}
.ac-chap p{margin:0 0 1.1em;font-size:clamp(14px,1vw,16.5px);line-height:1.72;color:var(--ac-encre-2)}
.ac-chap p:last-child{margin-bottom:0}

.ac-points{list-style:none;margin:0;padding:0;display:grid;gap:clamp(16px,2vh,24px)}
.ac-points li{display:grid;gap:5px;padding-left:20px;position:relative}
.ac-points li::before{
  content:'';position:absolute;left:0;top:.55em;
  width:6px;height:6px;background:var(--ac-bleu);transform:rotate(45deg);
}
.ac-points em{
  font-style:normal;font-weight:600;font-size:13px;letter-spacing:.03em;color:var(--ac-encre);
}
.ac-points span{font-size:13px;line-height:1.6;color:var(--ac-encre-2)}

/* =====================================================================
   LES PORTES
   ===================================================================== */
.ac-portes{padding:0 var(--ac-marge) clamp(80px,12vh,160px)}
/* ═══ LES DEUX COLONNES POSENT LEURS BOUTONS SUR LA MÊME LIGNE ═══
   Chaque colonne est un titre, un paragraphe, une rangée d'actions. Les
   deux paragraphes n'ont pas la même longueur — celui de droite fait trois
   lignes, celui de gauche une — et les rangées d'actions se retrouvaient
   donc décalées d'une soixantaine de pixels. Deux boutons de même nature à
   deux hauteurs différentes, dans un même panneau, se lisent comme un
   défaut d'alignement, et c'en est un.

   La correction ne dépend d'aucune longueur de texte : les colonnes d'une
   grille s'étirent déjà à la même hauteur, il suffit que chaque colonne
   soit une pile verticale et que sa rangée d'actions absorbe l'espace
   libre au-DESSUS d'elle. Les boutons se posent alors sur la même ligne
   quoi qu'on écrive, dans les deux langues, à toutes les largeurs. */
.ac-portes__grille{display:grid;gap:clamp(26px,3vw,52px);grid-template-columns:1.3fr .7fr}
.ac-portes__grille > div{display:flex;flex-direction:column}
.ac-portes__grille .ac-liens{margin-top:auto}
.ac-portes h2{
  margin:0 0 12px;
  font-family:var(--cda-display,'Oswald',system-ui,sans-serif);
  font-weight:var(--cda-display-poids,500);
  font-size:clamp(26px,3.2vw,50px);line-height:.98;text-transform:uppercase;letter-spacing:-.012em;
}
.ac-portes p{margin:0 0 clamp(20px,2.6vh,30px);font-size:14.5px;line-height:1.62;color:var(--ac-encre-2);max-width:44ch}
.ac-liens{display:flex;flex-wrap:wrap;gap:10px 12px}
.ac-lienf{
  /* 44 px de haut au minimum. À 11 px de rembourrage la pastille faisait
     39 px : sous le seuil où un doigt vise sans se tromper. On ne compte pas
     sur le rembourrage seul, qui suit le corps du texte — on impose la
     hauteur. */
  display:inline-flex;align-items:center;gap:.5em;
  min-height:44px;padding:11px 20px;border:1px solid var(--ac-trait);border-radius:999px;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--ac-encre);text-decoration:none;
  transition:border-color .35s ease,color .35s ease,background .35s ease;
}
.ac-lienf i{font-style:normal;font-size:.76em;opacity:.55;font-variant-numeric:tabular-nums}
.ac-lienf:hover,.ac-lienf:focus-visible{background:var(--ac-bleu);border-color:var(--ac-bleu);color:#fff}
.ac-lienf:hover i{opacity:.8}

/* =====================================================================
   RESPONSIVE
   ---------------------------------------------------------------------
   Pas d'adaptation « en réduisant tout » : les colonnes tombent, les
   décalages de grille disparaissent (ils n'ont de sens qu'à trois
   colonnes) et les effets qui supposent une souris ne s'installent
   simplement pas.
   ===================================================================== */
@media (max-width:1080px){
  .ac-grille{grid-template-columns:repeat(2,1fr)}
  .ac-carte:nth-child(2n){margin-top:0}
  .ac-peintre__grille,.ac-portes__grille{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ac{--ac-section:clamp(72px,11vh,120px)}
  .ac-grille{grid-template-columns:1fr;gap:clamp(26px,7vw,44px)}
  .ac-carte:nth-child(2n),.ac-carte:nth-child(3n+2){margin-top:0}
  .ac-hero{min-height:92svh}
  /* La taille du titre sur petit écran est fixée en fin de fichier, avec
     le même calcul par division que sur grand écran. */
  .ac-titre{letter-spacing:-.015em}
  .ac-hero__bas{gap:16px}
  .ac-btn{width:100%;justify-content:center}
  .ac-defiler{display:none}          /* sur téléphone on sait qu'on défile */
  .ac-panneau{border-radius:18px;padding:clamp(24px,6vw,34px)}
  .ac-manifeste p{font-size:clamp(21px,6.4vw,32px)}
}

/* =====================================================================
   ACCESSIBILITÉ
   ---------------------------------------------------------------------
   « Réduire les animations » n'est pas une préférence esthétique : pour
   certaines personnes, un mouvement de parallaxe déclenche un vertige
   réel. On ne réduit donc pas les durées, on retire le mouvement — le
   contenu, lui, reste entier et apparaît d'emblée.
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  .ac-fente__i,[data-ac-revele]{transform:none!important;opacity:1!important;transition:none!important}
  .ac-carte,.ac-carte__lien{transform:none!important;transition:none!important}
  .ac-defiler i::after{animation:none}
  .ac-gl{display:none}
}

/* Les règles de repli sans JavaScript ont disparu : elles n'ont plus
   d'objet. Plus rien n'est masqué tant que `ac-anime` n'est pas posée, et
   il n'y a plus de voile à décommander. */

/* Le focus clavier doit rester visible partout, y compris sur les
   éléments qu'on a débarrassés de leur contour par défaut. */
.ac a:focus-visible,.ac button:focus-visible{
  outline:2px solid var(--ac-bleu);outline-offset:4px;border-radius:4px;
}

/* =====================================================================
   LA BARRE DE NAVIGATION SUR L'ACCUEIL
   ---------------------------------------------------------------------
   Elle est commune à tout le site et posée par header.php. Sur l'accueil
   seulement, elle doit être transparente au-dessus du titre — qui a
   besoin d'être seul — puis se poser sur un fond dépoli dès qu'on quitte
   le premier écran.

   La règle vit ici et non dans site.css parce que cette feuille n'est
   chargée que sur l'accueil : aucune autre page ne peut en hériter par
   accident.
   ===================================================================== */
#cda-nav{
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .45s ease,border-color .45s ease,backdrop-filter .45s ease;
}
#cda-nav.is-pose{
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(16px) saturate(1.06);
  backdrop-filter:blur(16px) saturate(1.06);
  border-bottom-color:rgba(13,17,23,.10);
}
/* Sans JavaScript, .is-pose n'arrivera jamais : on pose le fond d'emblée
   plutôt que de laisser une barre illisible au défilement. */
html:not(.ac-js) #cda-nav{background:rgba(255,255,255,.94)}

/* =====================================================================
   DEUX CORRECTIONS QUI TIENNENT LA PAGE
   ===================================================================== */

/* 1. LE DÉFILEMENT NATIF NE DOIT PAS ÊTRE LISSÉ ICI.
      style.css pose html{scroll-behavior:smooth} pour tout le site. Sur
      l'accueil, l'inertie est prise en charge par le moteur, qui émet un
      défilement programmé par image : avec le lissage natif par-dessus,
      chacun de ces appels devient une animation, la position réelle reste
      en retard sur la position demandée, et les deux se neutralisent — la
      page ne défile plus du tout. C'est ce qui donnait un titre visible et
      du blanc en dessous.

      La feuille de l'accueil étant chargée après style.css, cette règle
      l'emporte. Le moteur pose la même valeur en ligne, par sécurité. */
html{scroll-behavior:auto}

/* 2. LE LOGO DE L'EN-TÊTE.
      header.php sert deux fichiers sur l'accueil : le logo aux lettres
      BLANCHES visible d'emblée — il était fait pour l'ancien ciel sombre —
      et le noir en réserve, que site.js faisait apparaître au défilement.
      Ce basculement était conditionné à la présence du rideau de l'ancienne
      accueil, qui n'existe plus : le logo blanc restait donc seul, sur du
      papier ivoire. Invisible.

      La nouvelle accueil est claire du haut en bas : c'est le logo noir, et
      lui seul. Les !important sont nécessaires — les opacités sont posées
      en attribut de style dans le gabarit. */
/* Plus rien à forcer : header.php ne sert plus que le logo noir sur
   l'accueil. La correction est passée à la source. */

/* =====================================================================
   LA BANDE — LES TOILES QUI AVANCENT
   ---------------------------------------------------------------------
   Le ruban déborde de la fenêtre des deux côtés : c'est ce débordement
   qui fait croire à une file sans fin. `overflow:hidden` sur la section
   le coupe net, et le module ramène le ruban d'une longueur dès qu'il en
   a parcouru une.

   `width:max-content` est indispensable : sans lui, la file se
   replierait au lieu de s'étendre, et la mesure de sa longueur n'aurait
   plus de sens.
   ===================================================================== */
.ac-bande{
  overflow:hidden;
  padding:clamp(40px,7vh,90px) 0 clamp(56px,9vh,120px);
  /* Les bords s'estompent plutôt que de se couper : une file tranchée au
     rasoir dit « conteneur », une file fondue dit « elle continue ». */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.ac-bande__piste{
  display:flex;align-items:flex-end;
  gap:clamp(14px,1.8vw,32px);
  width:max-content;
  will-change:transform;
}
.ac-bande__item{
  flex:0 0 auto;
  width:clamp(160px,20vw,320px);
  text-decoration:none;color:inherit;
  transition:opacity .4s ease;
}
.ac-bande__item img{
  display:block;width:100%;height:auto;
  aspect-ratio:4 / 5;object-fit:cover;
  background:rgba(0,74,173,.05);
  box-shadow:0 26px 52px -40px rgba(0,42,99,.45);
}
.ac-bande__item b{
  display:block;margin-top:12px;
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(13px,1vw,16px);font-weight:600;line-height:1.25;
}
.ac-bande__item i{
  display:block;height:2px;width:26px;margin-top:8px;
  background:var(--ac-c,var(--ac-bleu));
  transform-origin:0 50%;transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.ac-bande__item:hover i{transform:scaleX(2.4)}
/* Au survol d'une toile, les autres reculent : on ne masque rien, on
   hiérarchise. */
.ac-bande__piste:hover .ac-bande__item{opacity:.45}
.ac-bande__piste:hover .ac-bande__item:hover{opacity:1}

@media (max-width:640px){
  .ac-bande{padding:clamp(30px,5vh,54px) 0 clamp(40px,7vh,70px)}
  .ac-bande__item{width:clamp(140px,44vw,210px)}
}
/* Mouvement refusé : le ruban se fige, et l'on montre le début de la
   file plutôt qu'une position arbitraire. */
@media (prefers-reduced-motion: reduce){
  .ac-bande__piste{transform:none!important}
}

/* =====================================================================
   LE CHAMP — LES ŒUVRES QUI VIENNENT VERS VOUS
   ---------------------------------------------------------------------
   Deux couches encadrent le contenu du hero : l'une derrière, l'autre
   devant. C'est le croisement qui donne le volume — des œuvres qui
   passeraient toutes derrière laisseraient le titre posé sur une image,
   au lieu d'être PARMI elles.

   Les items sont tous ancrés au centre exact ; c'est la transformation
   qui les écarte. Rien ne dépend donc de la mise en page, et le module
   n'a jamais à lire une position.
   ===================================================================== */
.ac-hero{position:relative}
/* Les fils du hero conservent leur mode de positionnement propre. Le folio et
   le décor architectural reçoivent leur plan explicite dans le bloc final. */
.ac-hero > *{z-index:1}

/* =====================================================================
   LA PHRASE ET LA PORTE, DESCENDUES DANS LE MANIFESTE
   ---------------------------------------------------------------------
   Elles étaient au milieu du premier écran — exactement là où les œuvres
   du champ passent. Elles s'y lisaient mal, et surtout elles diluaient
   l'arrivée : un accueil qui commence par UNE chose est plus fort qu'un
   accueil qui en propose trois.

   Ici, dans le manifeste, elles sont alignées à gauche comme le reste du
   bloc et non centrées : le hero est une affiche, le manifeste est un
   texte. Les deux n'obéissent pas à la même règle.
   ===================================================================== */
.ac-manifeste__sous{
  max-width:46ch;
  margin:clamp(22px,3vh,36px) 0 0;
  font-family:'Archivo',system-ui,sans-serif;
  font-size:clamp(14.5px,1.05vw,17.5px);line-height:1.62;
  color:var(--ac-encre-2);
}
.ac-manifeste__acte{margin-top:clamp(26px,3.4vh,44px)}

/* ═══ LE TITRE AU MILIEU EXACT ═══
   Le hero centre son CONTENU, pas son titre : l'invite à défiler faisait
   partie du bloc et sa hauteur poussait le titre vers le haut. Plus elle
   avait de marge, plus le titre remontait — il n'était donc jamais au
   milieu, et l'écart grandissait avec la hauteur de l'écran.

   On la sort du flux : ancrée au bas du cadre, elle ne pèse plus rien
   dans le calcul. Le titre et la sur-ligne se centrent alors sur la
   hauteur réelle de la fenêtre. */
.ac-hero__bas{
  position:absolute;left:0;right:0;
  bottom:clamp(26px,5vh,58px);
  margin:0;display:flex;justify-content:center;
}
/* La compensation ne suffisait pas : tant que la sur-ligne reste dans le
   flux, sa hauteur ET sa marge décalent le titre vers le bas. On la sort
   à son tour. Le hero ne contient alors plus qu'UN seul élément centré —
   le titre — et il tombe au milieu exact, quelle que soit la hauteur de
   l'écran. C'est la seule façon d'y arriver sans réglage à tâtons. */
.ac-hero__sur{
  position:absolute;left:0;right:0;
  top:clamp(96px,15vh,150px);
  margin:0;
}
.ac-hero{padding-top:0;padding-bottom:0}
@media (max-width:640px){
  .ac-manifeste__sous{max-width:none}
  .ac-manifeste__acte .ac-btn{width:100%;justify-content:center}
}

/* =====================================================================
   LE TEXTE PREND DE LA PLACE
   ---------------------------------------------------------------------
   Le corps de la page tournait autour de 14 px : lisible, mais anonyme.
   Sur un site de peinture, un texte petit dit « mention légale » ; un
   texte grand dit « lisez-moi ». On remonte l'ensemble d'un cran et
   demi, et l'on garde le gris pour le secondaire — c'est la couleur, pas
   la taille, qui doit dire la hiérarchie.
   ===================================================================== */
.ac-tete p,
.ac-portes p,
.ac-points span{
  font-size:clamp(16px,1.35vw,21px);
  line-height:1.55;
}
.ac-chap p{
  font-size:clamp(16.5px,1.4vw,22px);
  line-height:1.62;
}
.ac-points em{font-size:clamp(15px,1.15vw,18px)}
.ac-carte__pied b{font-size:clamp(17px,1.45vw,24px)}
.ac-carte__pied i{font-size:clamp(13px,1.02vw,15.5px)}
.ac-carte__pied em{font-size:clamp(14px,1.1vw,17px)}
.ac-bande__item b{font-size:clamp(14.5px,1.15vw,18px)}
.ac-lienf{font-size:clamp(13px,1.02vw,15px)}
.ac-btn{font-size:clamp(13px,1vw,15.5px)}

/* La citation du peintre : sa voix, donc en serif et en grand. C'est le
   seul endroit de la page où quelqu'un parle à la première personne. */
.ac-chap__voix{
  margin-top:clamp(20px,2.6vh,32px);
  font-family:'Playfair Display',Georgia,serif;
  font-style:italic;
  font-size:clamp(19px,1.9vw,30px)!important;
  line-height:1.34;
  color:var(--ac-encre)!important;
}

/* =====================================================================
   LES RESPIRATIONS ENTRE LES RANGÉES
   ---------------------------------------------------------------------
   Une phrase pleine largeur entre deux rangées d'œuvres. Elle occupe une
   case de la grille comme n'importe quelle carte — d'où le <li> — mais
   traverse toutes les colonnes.

   Elle est volontairement large et aérée : c'est une pause, pas un
   paragraphe. Le lecteur doit pouvoir la lire d'un regard avant de
   reprendre les images.
   ===================================================================== */
.ac-grille__mot{
  grid-column:1 / -1;
  margin:clamp(26px,4vh,64px) 0 clamp(14px,2vh,30px);
  display:flex;justify-content:center;
}
.ac-grille__mot p{
  margin:0;max-width:24ch;text-align:center;
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(22px,2.9vw,44px);
  line-height:1.24;letter-spacing:-.012em;
  color:var(--ac-encre);
}
@media (max-width:640px){
  .ac-grille__mot p{max-width:none;font-size:clamp(20px,6vw,28px)}
}


/* =====================================================================
   REPÈRES DU HERO
   ---------------------------------------------------------------------
   La signature reste sous le titre, dans le flux du groupe central. Le bloc
   d’entrée est au contraire ancré au bas du cadre. Ces deux sélecteurs directs
   protègent leur position contre les règles génériques de profondeur du hero.
   ===================================================================== */
.ac-hero > .ac-hero__sur{
  position:static;
  margin:clamp(18px,2.4vh,30px) 0 0;
}
.ac-hero > .ac-hero__bas{
  position:absolute;left:0;right:0;
  bottom:clamp(26px,5vh,58px);
  margin:0;display:flex;justify-content:center;
}

/* 2. LES RESPIRATIONS DE LA SÉLECTION PASSENT D'UN BORD À L'AUTRE.
      ------------------------------------------------------------------
      Elles étaient centrées, donc alignées les unes sous les autres sur
      l'axe de la grille : trois phrases au même endroit se lisent comme
      des titres de section, et le regard s'arrêtait à chacune. En les
      rejetant à gauche puis à droite, elles occupent la marge que la
      rangée de trois cartes laisse libre au-dessus d'elles, et le zigzag
      pousse la lecture vers le bas.

      La mesure descend de 24 à 20 caractères : une phrase ferrée dans un
      angle doit rester compacte, sinon elle repart vers le centre et
      l'alternance ne se voit plus. */
/* LA MESURE, ET POURQUOI ELLE PASSE DE 20 À 30 SIGNES.
   Une phrase de cent signes tenue dans une colonne de vingt tombait sur cinq
   ou six lignes de trois mots. À cette étroitesse, chaque retour à la ligne
   arrive au milieu d'un groupe de sens — « la couleur / d'abord — le / dessin
   suit » — et la lecture se fait par saccades. Ce n'est pas la coupure qui
   gêne, c'est qu'il y en ait une tous les trois mots.

   Trente signes ramènent ces phrases à trois lignes, et le corps redescend de
   44 à 34 px : une phrase de récit n'a pas besoin d'être aussi grande qu'un
   titre, elle a besoin d'être lisible d'un trait. */
/* LE REPLI NE TOMBE QUE SUR LA PONCTUATION.
   ---------------------------------------------------------------------
   Chaque proposition est une boîte en ligne : elle se pose entière sur la
   ligne courante si elle y tient, et passe entière à la suivante sinon. Le
   navigateur n'a donc plus aucun point de coupe À L'INTÉRIEUR d'un groupe de
   mots — seulement entre deux propositions, c'est-à-dire après la virgule,
   le deux-points ou le point. Le découpage est fait côté serveur par
   `cda_souffle()` ; ici on ne fait qu'en tirer les conséquences.

   `max-width:100%` est la soupape : une proposition plus large que la colonne
   se replierait à l'intérieur plutôt que de déborder du cadre. Sur un
   téléphone en portrait, c'est ce qui empêche le texte de sortir de l'écran.

   `vertical-align:baseline` est nécessaire : une boîte en ligne s'aligne par
   défaut sur sa propre ligne de base, ce qui décalerait les propositions les
   unes par rapport aux autres dès qu'une seule contient une lettre à jambage. */
/* La règle vaut pour TOUTE proposition marquée, pas seulement pour celles
   de la grille : le manifeste s'en sert aussi. C'est le même problème et
   donc la même réponse — un texte marqué `.ac-souffle` ne se coupe pas au
   milieu. */
.ac .ac-souffle{
  display:inline-block;
  max-width:100%;
  vertical-align:baseline;
}

.ac-grille__mot p{
  /* Trente-quatre signes, et non trente : c'est la longueur de la plus longue
     proposition des trois phrases (« un atelier face à la Méditerranée. »).
     En dessous, cette proposition-là se replierait — et une seule proposition
     coupée suffit à ramener le défaut qu'on vient de corriger. */
  max-width:34ch;
  font-size:clamp(21px,2.2vw,34px);
  /* `balance` répartit les lignes à longueurs égales au lieu de remplir la
     première puis d'abandonner un mot seul sur la dernière. C'est fait pour
     exactement ce cas : un texte court, en gros corps, sur quelques lignes.
     Les navigateurs qui l'ignorent retombent sur le comportement normal. */
  text-wrap:balance;
  /* Aucune césure : couper un mot en deux dans une phrase de trois lignes
     coûte plus que le gain de justification. */
  hyphens:none;
}
.ac-grille__mot--g{justify-content:flex-start}
.ac-grille__mot--g p{text-align:left}
.ac-grille__mot--d{justify-content:flex-end}
.ac-grille__mot--d p{text-align:right}

/* Un filet court du côté du texte : sans lui, la phrase se lit comme la
   légende de la carte qui la précède dans la même colonne. */
.ac-grille__mot p{position:relative;padding-top:clamp(18px,2vw,28px)}
.ac-grille__mot p::before{
  content:'';position:absolute;top:0;width:52px;height:1px;
  background:currentColor;opacity:.28;
}
.ac-grille__mot--g p::before{left:0}
.ac-grille__mot--d p::before{right:0}

/* Sous 640 px la grille n'a plus qu'une colonne : il n'y a plus de marge
   à occuper, et une phrase ferrée à droite dans une colonne étroite se
   lit comme une erreur d'alignement. Tout revient à gauche. */
@media (max-width:640px){
  .ac-grille__mot--g,
  .ac-grille__mot--d{justify-content:flex-start}
  .ac-grille__mot--g p,
  .ac-grille__mot--d p{text-align:left;max-width:none}
  .ac-grille__mot--d p::before{right:auto;left:0}
}


/* =====================================================================
   LE TITRE TIENT SUR UNE SEULE LIGNE, TOUJOURS
   =====================================================================
   « COULEUR » ne passe jamais au-dessus de « D'AZUR ». Deux mécanismes
   indépendants le garantissent, et c'est volontaire : le premier suffit en
   théorie, le second rattrape tout ce que la théorie ne prévoit pas.

   1. L'INTERDICTION DE REPLI. `white-space:nowrap !important`, posé à la fois
      sur le titre et sur toute sa descendance — le module de typo cinétique
      remplace le texte par un `span` par signe, et chacun est une boîte en
      ligne qui pourrait sinon passer à la ligne. Avec cette règle, le pire
      cas n'est plus une coupure mais un débordement : un débordement se voit
      et se corrige, une coupure passe inaperçue et devient l'identité du site.

   2. LA TAILLE QUI GARANTIT QU'IL N'Y A PAS DE DÉBORDEMENT. C'est là que
      l'ancienne version se trompait : elle donnait `clamp(52px,11.5vw,208px)`,
      or la largeur d'un texte ne suit pas la largeur de la fenêtre, elle suit
      le CORPS. À 1440 px, 11,5vw valait 165 px, le titre réclamait 1 405 px et
      n'en avait que 1 296. Le même calcul repassait juste vers 1 900 px, d'où
      l'impression d'un défaut intermittent — il était arithmétique.

   LA MESURE. « COULEUR D'AZUR » en Archivo 700 capitales occupe 8,509 em à
   −0,045 em d'interlettre, et 8,929 em à −0,015 em (le réglage sous 640 px).
   Une première mesure avait donné 8,370 : c'était la police de SECOURS, relevée
   avant qu'Archivo ne soit chargée. 1,7 % d'écart, et c'était assez pour faire
   déborder. Une largeur de texte ne se mesure qu'après `document.fonts.ready`.

   DEUX FORMULES, DANS CET ORDRE. La première divise la largeur de fenêtre et
   sert de repli. La seconde divise `100cqi` — la largeur intérieure réelle du
   cadre — et l'emporte partout où les requêtes de conteneur existent. La
   différence n'est pas théorique : `100vw` compte la barre de défilement, que
   l'écran n'affiche pas. Quinze pixels de trop, exactement ce qui manquait.

   Les diviseurs gardent environ 4 % de marge sur la mesure, de quoi absorber
   l'arrondi sous-pixel, la graisse substituée pendant le chargement de la
   police, et le réglage d'échelle du système.
   ===================================================================== */

/* Le cadre devient mesurable. Il était déjà `position:relative`, donc rien ne
   change pour ce qu'il positionne : la sur-ligne et l'invite restent ancrées
   à ses bords. */
.ac-hero{container-type:inline-size}

.ac-titre{
  white-space:nowrap !important;
  font-size:min(208px, calc((100vw - 2 * var(--ac-marge)) / 8.85));
  font-size:min(208px, calc(100cqi / 8.75));
}
.ac-titre *{white-space:nowrap !important}

@media (max-width:640px){
  .ac-titre{
    letter-spacing:-.015em;
    font-size:min(90px, calc((100vw - 2 * var(--ac-marge)) / 9.3));
    font-size:min(90px, calc(100cqi / 9.2));
  }
}


/* =====================================================================
   LE PORTRAIT DU PEINTRE, DANS LA SECTION QUI PARLE DE LUI
   =====================================================================
   La section « Un regard, une passion, un héritage » racontait le peintre
   sans jamais le montrer. Sur un site de galerie c'est l'omission la plus
   coûteuse : on n'achète pas une toile à une biographie, on l'achète à
   quelqu'un — et un visage répond en une seconde à la question que tout le
   texte autour essaie de traiter.

   LE PLACEMENT. La grille passe de deux colonnes libres à un plan nommé :
   le récit à gauche, le portrait à droite, et les garanties en dessous sur
   toute la largeur. Les zones sont déclarées plutôt que déduites de l'ordre
   du document — c'est ce qui permet d'écrire le texte AVANT l'image dans le
   balisage, donc de le lire en premier sur téléphone où la colonne est
   unique, tout en affichant l'image à droite sur grand écran.

   LE FORMAT. `aspect-ratio: 4/5` et `object-fit: cover` : la photographie
   fournie est verticale, mais rien ne garantit que la suivante le sera. Un
   cadre au rapport fixe encaisse les deux sans jamais déformer un visage —
   le pire défaut possible sur un portrait.
   ===================================================================== */
.ac-peintre__grille--photo{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  grid-template-areas:
    "recit portrait"
    "points points";
  gap:clamp(26px,3.4vw,64px) clamp(30px,4vw,72px);
  align-items:start;
}
.ac-peintre__grille--photo > .ac-chap:first-of-type{grid-area:recit}
.ac-peintre__grille--photo > .ac-chap:last-of-type{grid-area:points}
/* Le portrait est borné et ferré à droite. Sans borne, il occupait toute sa
   colonne — soit près de cinq cents pixels de large et six cents de haut — et
   dépassait le récit d'une bonne moitié : le vide qui en résultait sous la
   citation se lisait comme une erreur de mise en page, alors que c'était
   simplement une image trop grande. */
.ac-peintre__grille--photo > .ac-portrait{
  grid-area:portrait;justify-self:end;width:100%;max-width:400px;
}

.ac-portrait{margin:0}
.ac-portrait img{
  display:block;width:100%;height:auto;
  /* ═══ LE PORTRAIT PREND LE RAPPORT DE LA PHOTOGRAPHIE ═══
     Le cadre était en 4/5 et la photographie est en 3/4 (1200 × 1600,
     mesuré sur le fichier). `cover` rognait donc 44 px en hauteur, dont
     34 en bas — la coupe tombait sur le bas du buste — et `center 22 %`
     était un réglage choisi à la main pour compenser, c'est-à-dire un
     nombre que rien ne justifie et que le moindre changement de largeur
     déséquilibre.
     Quand le cadre prend le rapport du fichier, `cover` ne rogne plus
     rien du tout : la photographie est montrée telle qu'elle a été
     cadrée, et il n'y a plus de réglage à deviner. */
  aspect-ratio:3 / 4;object-fit:cover;object-position:50% 50%;
  border-radius:18px;
  /* L'ombre porte le portrait au même plan que les cartes d'œuvres : sans
     elle, l'image se lit comme collée sur le panneau dépoli au lieu d'être
     posée dessus. */
  box-shadow:0 40px 80px -44px rgba(13,17,23,.55);
}
.ac-portrait figcaption{
  margin-top:12px;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ac-encre-2);
}

/* Sous 1080 px, la grille du peintre retombe déjà sur une colonne dans la
   feuille d'origine. On aligne le plan nommé sur ce comportement, et on borne
   la largeur du portrait : à pleine largeur de téléphone, une image verticale
   occupe un écran entier et repousse les garanties hors de vue. */
@media (max-width:1080px){
  .ac-peintre__grille--photo{
    grid-template-columns:1fr;
    grid-template-areas:"recit" "portrait" "points";
  }
  .ac-portrait{max-width:420px}
}

/* La porte vers la page du peintre, à la fin de son récit. `.ac-chap` n'avait
   pas d'emplacement pour une action : le bouton en réclame un, avec assez d'air
   au-dessus pour ne pas se coller à la citation — qui est une fin de phrase, pas
   une étiquette de bouton. */
.ac-chap__acte{margin-top:clamp(24px,3vw,38px)}
@media (max-width:640px){
  .ac-chap__acte .ac-btn{width:100%;justify-content:center}
}


/* =====================================================================
   LE CORPS DE TEXTE MONTE D'UN CRAN — SAUF LES TITRES D'ŒUVRES
   ---------------------------------------------------------------------
   Demande explicite : grossir tous les caractères de l'accueil, à
   l'exception des titres de tableaux.

   POURQUOI UN FACTEUR ET NON DE NOUVELLES VALEURS.
   Une trentaine de règles portent une taille sur cette page, et presque
   toutes sont des `clamp()` à trois bornes : les réécrire une à une
   signifierait recalculer quatre-vingt-dix nombres, et perdre au passage le
   rapport qu'ils entretiennent entre eux. On multiplie donc les valeurs
   existantes. `calc(clamp(a,b,c) * f)` est du CSS valide et conserve la
   courbe : le minimum, la pente et le maximum grossissent du même
   pourcentage, la hiérarchie reste exactement celle qui a été dessinée.
   Un seul nombre à changer si le réglage doit bouger.

   DEUX FACTEURS, ET C'EST VOULU.
   Un texte de quatorze pixels supporte +15 % sans conséquence : il occupe
   deux pixels de plus. Un titre de soixante-quatorze en gagne onze, et ce
   qui se jouait au pixel près — le manifeste posé en absolu dans le héros,
   les titres de section en capitales — se met à déborder. Les deux titres
   d'affichage montent donc de 8 % seulement. À l'œil la page entière a
   grossi ; à la mesure, rien n'a sauté.

   CE QUI NE BOUGE PAS, ET POURQUOI.
   · `.ac-carte__pied b` — les titres d'œuvres. C'est la demande.
   · `.ac-titre` — « COULEUR D'AZUR ». Sa taille n'est pas choisie, elle est
     CALCULÉE à partir de la largeur du cadre pour tenir sur une seule
     ligne. La multiplier casserait la seule garantie de cette page.
   ===================================================================== */
.ac{
  --ac-zoom:1.15;        /* textes courants, étiquettes, boutons, légendes */
  --ac-zoom-titre:1.08;  /* les deux grands titres de section */
}

/* --- Le héros ------------------------------------------------------- */
.ac-hero__sur   { font-size:calc(clamp(10px,.78vw,12px)      * var(--ac-zoom, 1.15)) }
.ac-hero__sous  { font-size:calc(clamp(15px,1.15vw,19px)     * var(--ac-zoom, 1.15)) }
.ac-defiler     { font-size:calc(10px                        * var(--ac-zoom, 1.15)) }

/* --- Le manifeste --------------------------------------------------- */
.ac-manifeste p       { font-size:calc(clamp(23px,3.4vw,54px)      * var(--ac-zoom-titre, 1.08)) }
.ac-manifeste__sous   { font-size:calc(clamp(14.5px,1.05vw,17.5px) * var(--ac-zoom, 1.15)) }
.ac-manifeste__signe  { font-size:calc(11px                        * var(--ac-zoom, 1.15)) }
@media (max-width:640px){
  .ac-manifeste p     { font-size:calc(clamp(21px,6.4vw,32px)      * var(--ac-zoom-titre, 1.08)) }
}

/* --- Les têtes de section ------------------------------------------- */
.ac-tete h2 { font-size:calc(clamp(30px,4.6vw,74px) * var(--ac-zoom-titre, 1.08)) }
.ac-tete p,
.ac-portes p,
.ac-points span { font-size:calc(clamp(16px,1.35vw,21px) * var(--ac-zoom, 1.15)) }

/* --- Les cartes d'œuvres --------------------------------------------
   `b` est le titre du tableau : il reste à sa taille. Seules la ligne de
   technique (`i`) et le prix (`em`) suivent le mouvement — sans quoi le
   cartel se déséquilibrerait dans l'autre sens. */
.ac-carte__pied i  { font-size:calc(clamp(13px,1.02vw,15.5px) * var(--ac-zoom, 1.15)) }
.ac-carte__pied em { font-size:calc(clamp(14px,1.1vw,17px)    * var(--ac-zoom, 1.15)) }

/* --- Le chapitre du peintre ----------------------------------------- */
.ac-chap h2      { font-size:calc(clamp(24px,2.6vw,40px)   * var(--ac-zoom-titre, 1.08)) }
.ac-chap p       { font-size:calc(clamp(16.5px,1.4vw,22px) * var(--ac-zoom, 1.15)) }
.ac-chap__voix   { font-size:calc(clamp(19px,1.9vw,30px)   * var(--ac-zoom, 1.15)) !important }
.ac-points em    { font-size:calc(clamp(15px,1.15vw,18px)  * var(--ac-zoom, 1.15)) }

/* --- La bande, les portes, les liens de fin -------------------------- */
.ac-bande__item b { font-size:calc(clamp(14.5px,1.15vw,18px) * var(--ac-zoom, 1.15)) }
.ac-portes h2     { font-size:calc(clamp(26px,3.2vw,50px)    * var(--ac-zoom-titre, 1.08)) }
.ac-lienf         { font-size:calc(clamp(13px,1.02vw,15px)   * var(--ac-zoom, 1.15)) }
.ac-btn           { font-size:calc(clamp(13px,1vw,15.5px)    * var(--ac-zoom, 1.15)) }

/* --- Les respirations et la légende du portrait ---------------------- */
.ac-grille__mot p        { font-size:calc(clamp(21px,2.2vw,34px) * var(--ac-zoom, 1.15)) }
.ac-portrait figcaption  { font-size:calc(11.5px                 * var(--ac-zoom, 1.15)) }
@media (max-width:640px){
  .ac-grille__mot p      { font-size:calc(clamp(20px,6vw,28px)   * var(--ac-zoom, 1.15)) }
}


/* =====================================================================
   LES RESPIRATIONS ARRIVENT PAR LEUR CÔTÉ
   ---------------------------------------------------------------------
   Ces trois phrases alternent : la première est ferrée à gauche, la
   deuxième à droite, la troisième à gauche. Elles montaient pourtant
   toutes verticalement, du même geste que le reste de la page — et ce
   geste-là contredisait leur composition. Une phrase collée au bord droit
   qui monte tout droit paraît simplement décalée ; la même phrase qui
   ENTRE par la droite explique d'elle-même pourquoi elle est là.

   Le mouvement part donc du bord dont le texte est le plus proche, et
   dans l'axe où il est déjà : c'est le déplacement le plus court, celui
   qu'on lit comme une arrivée plutôt que comme un glissement.

   SPÉCIFICITÉ. La règle générale est écrite
   `html.ac-anime [data-ac-revele]:not([data-fendre]):not([data-fendre-signes])`,
   soit trois attributs et une classe. Une écriture plus courte perdrait
   contre elle et le décalage vertical resterait. On reprend donc les mêmes
   `:not()` — c'est verbeux, mais c'est le seul moyen d'être certain de
   passer devant, y compris pour l'état d'arrivée `.is-la` (dont la règle
   d'origine, `[data-ac-revele].is-la`, est elle aussi trop faible ici).
   ===================================================================== */
html.ac-anime .ac-grille__mot--g[data-ac-revele]:not([data-fendre]):not([data-fendre-signes]){
  transform:translate3d(calc(-1 * clamp(28px,6vw,110px)),14px,0);
}
html.ac-anime .ac-grille__mot--d[data-ac-revele]:not([data-fendre]):not([data-fendre-signes]){
  transform:translate3d(clamp(28px,6vw,110px),14px,0);
}
html.ac-anime .ac-grille__mot--g[data-ac-revele]:not([data-fendre]):not([data-fendre-signes]).is-la,
html.ac-anime .ac-grille__mot--d[data-ac-revele]:not([data-fendre]):not([data-fendre-signes]).is-la{
  /* L'opacité manquait ici. Le transform était bien rétabli — la phrase
     revenait à sa place — mais elle y revenait transparente, ce qui
     revient au même que ne pas revenir du tout. */
  transform:none;opacity:1;
}
/* Le mouvement latéral est plus long à lire qu'un simple relevé : on laisse
   à la transition le temps de finir, sinon la phrase paraît arriver en
   sursaut. Même courbe que le reste, seule la durée change. */
html.ac-anime .ac-grille__mot[data-ac-revele]{
  transition:opacity 1.05s ease,transform 1.15s cubic-bezier(.16,1,.3,1);
}


/* =====================================================================
   LES CARTELS DE L'ACCUEIL S'ALIGNENT D'UNE CARTE À L'AUTRE
   ---------------------------------------------------------------------
   Même correction que sur le catalogue, et pour la même raison — la
   sélection de l'accueil est la seule grille du site qui ne l'avait pas
   reçue.

   DEUX CAUSES, ET IL FALLAIT TRAITER LES DEUX.

   1. LE CADRE PRENAIT LE RAPPORT DE CHAQUE ŒUVRE. `aspect-ratio:var(--ar)`
      donnait sa hauteur propre à chaque image : un carton entoilé en 30 × 40
      et une marine en 55 × 46 n'ont ni la même hauteur ni le même rapport, et
      les titres démarraient donc en escalier. C'est juste pour une planche
      contact, faux pour une grille de vente — l'œil y lit un désordre là où
      il n'y a qu'une différence de châssis.

      Le cadre passe donc au 4/5 pour tout le monde, et l'image en
      `object-fit:contain` : l'œuvre entière, jamais rognée, centrée dans un
      cadre commun. C'est exactement la règle du catalogue.

   2. LES DESCRIPTIONS N'ONT PAS TOUTES LA MÊME LONGUEUR. Même à cadres
      égaux, « Huile sur toile — 55 × 46 cm » sur une ligne et sur deux
      décalent le prix d'un cran. Le pied devient donc extensible et le filet
      se pousse vers le bas (`margin-top:auto`) : les prix retombent sur la
      même ligne quelle que soit la longueur du texte au-dessus.

   La couche WebGL n'est pas concernée : elle lit la position du cadre à
   l'écran, quelle qu'elle soit. `--ar` reste écrit dans le balisage — il
   sert au calcul de la couleur dominante — il ne pilote simplement plus la
   hauteur.
   ===================================================================== */
.ac-grille > .ac-carte{display:flex;flex-direction:column;height:100%}
.ac-carte__lien{display:flex;flex-direction:column;flex:1;min-width:0}
/* ═══ TOUTES LES TOILES SE POSENT SUR LA MÊME LIGNE ═══
   Depuis que chaque cadre a le rapport de son œuvre, les hauteurs
   diffèrent — et une marine large se retrouvait accrochée en HAUT de sa
   cellule, une portrait descendant bien plus bas. Le regard n'avait plus
   aucune ligne de repos.
   `margin-top:auto` pousse le cadre vers le bas de la carte : le vide
   passe au-dessus, là où il ne se voit pas (la carte n'a pas de fond), et
   les toiles s'alignent par leur base comme sur une cimaise. Les cartels,
   qui suivent le cadre, s'alignent du même coup. */
.ac-carte__media{margin-top:auto}
/* ═══ PLUS DE BANDE VIDE AU-DESSUS DES ŒUVRES ═══
   Le cadre était en 4/5 pour tout le monde et l'image en `contain` : une
   marine large laissait donc une plage de passe-partout au-dessus
   d'elle, parfois un tiers de la carte. On la voit nettement sur les
   captures — un bandeau clair, et un liseré là où il rencontre la
   peinture.

   Le cadre reprend le rapport RÉEL de l'œuvre, écrit dans `--ar` par le
   gabarit. Cadre et image ayant alors exactement la même forme, il
   n'existe plus aucune zone vide : la carte s'arrête où la peinture
   s'arrête.

   Ce qu'on abandonne : les cartels ne démarrent plus tous à la même
   hauteur, puisque les toiles n'ont plus la même. C'est l'arbitrage
   demandé, et il se défend — une cimaise ne rogne pas les tableaux pour
   aligner ses étiquettes. Les prix, eux, restent alignés en bas de carte
   grâce au `margin-top:auto` du filet. */
.ac-carte__media{aspect-ratio:var(--ar,4 / 5)}
/* ═══ CHAQUE ŒUVRE GARDE SES PROPORTIONS, ET ELLES POSENT TOUTES AU SOL ═══
   `contain` montrait bien l'œuvre entière, mais centrée : une marine très
   large flottait au milieu de son cadre, avec autant de vide au-dessus
   qu'en dessous, et le regard n'avait plus aucune ligne commune pour
   comparer deux formats. D'un tableau à l'autre, tout paraissait ramené à
   la même taille — c'est le reproche qui est remonté, et il était juste :
   à cadres égaux et image centrée, la différence de châssis ne se lit
   plus nulle part.

   `object-position: 50% 100%` change cela d'un mot. Le cadre reste commun
   — c'est lui qui aligne les cartels, et cet acquis-là ne se discute pas —
   mais l'œuvre y descend au ras du bas. Toutes les toiles posent alors sur
   la même ligne, comme sur une cimaise, et c'est la HAUTEUR qui varie
   au-dessus : un format portrait monte, une marine reste basse. La
   différence de châssis redevient visible, la lecture reste ordonnée, et
   pas un centimètre carré de peinture n'est rogné. */
/* `cover` et `contain` donnent désormais le même résultat — le cadre a la
   forme de l'image — mais `cover` garantit qu'un arrondi de calcul ne
   laisse jamais un cheveu de fond visible sur un bord. */
.ac-carte__media img{object-fit:cover;object-position:50% 50%}
/* ═══ LE PIED NE MANGE PLUS L'ESPACE LIBRE ═══
   Il était en `flex:1` : il absorbait toute la hauteur restante de la
   carte, et le `margin-top:auto` du cadre n'avait donc plus rien à
   pousser — c'est pourquoi les toiles restaient accrochées en haut.
   Il redevient de la taille de son contenu ; l'espace libre remonte
   au-dessus du cadre, et les toiles descendent.

   Pour que les cartels et les prix restent alignés malgré cela, le pied
   doit avoir la MÊME hauteur d'une carte à l'autre : on réserve donc deux
   lignes au titre et une à la technique, occupées ou non. C'est ce qui
   remplace le `flex:1` dans son autre rôle. */
.ac-carte__pied{flex:0 0 auto;display:flex;flex-direction:column}
/* La réservation du titre n'est plus écrite ici : elle est MESURÉE
   rangée par rangée par site.js — voir le module d'accrochage. Deux
   lignes réservées pour tout le monde faisaient trente pixels de vide
   sous chaque titre d'une ligne, au bénéfice des seuls titres longs. */
.ac-carte__pied > b{min-height:0}
.ac-carte__pied > i:not(.ac-carte__filet){min-height:1.35em}
/* `margin-top:auto` pousse le filet en bas de la carte — c'est lui qui aligne
   les prix. Mais il écrase du même coup les douze pixels d'air que le filet
   avait au-dessus de lui, et la marge automatique ne se cumule pas avec une
   marge fixe. On les rend sous forme de bordure transparente : la boîte gagne
   douze pixels, `background-clip:padding-box` empêche la couleur de les
   peindre, et la barre reste haute de trois pixels — donc l'animation de survol
   qui la porte à six continue de fonctionner à l'identique. */
.ac-carte__filet{
  margin-top:auto;
  border-top:12px solid transparent;
  background-clip:padding-box;
}

/* =====================================================================
   L'ACCUEIL EN MODE SOMBRE

   POURQUOI IL N'Y ARRIVAIT PAS.
   Le reste du site bascule parce que ses couleurs sont posées sur `.ip`
   et rattrapées par `html.cda-dark`. L'accueil, lui, déclare sa PROPRE
   palette sur `.ac` — `--ac-papier`, `--ac-encre` — et pose
   `background:var(--ac-papier)` sur le conteneur de toute la page. Aucune
   règle sombre ne pouvait passer devant : mesuré en ligne, le fond de
   `main.ac` restait rgb(255,255,255) alors que `html` était déjà noir.
   La page entière se contentait donc de couvrir le mode sombre.

   La réparation ne touche pas une seule règle de dessin : on redéclare la
   palette, et les cent trente règles qui en descendent suivent d'elles-
   mêmes. C'est tout l'intérêt d'avoir écrit la page avec des jetons.

   TROIS DÉCISIONS DE COULEUR, ET LEURS RAISONS.

   · LE FOND N'EST PAS NOIR. Un noir pur écrase les bleus profonds d'une
     marine et fait ressortir la compression des photographies. L'encre
     bleutée #05070b laisse aux toiles leurs propres noirs : posée dessus,
     une œuvre paraît éclairée, pas découpée.

   · LE BLEU DE CHARTE SE DÉDOUBLE. #004aad plafonne à 2,4:1 sur ce fond —
     illisible en texte, parfait en surface, où il porte du blanc. On garde
     donc `--ac-bleu` pour les aplats et on donne `--ac-bleu-texte` aux
     mots. C'est exactement la solution déjà retenue dans site.css avec
     `--bleu-txt` : deux fichiers, une seule doctrine.

   · LE VERRE DES PANNEAUX S'INVERSE. Un voile blanc à 72 % sur fond
     sombre redevient un rectangle clair — c'est-à-dire l'inverse du verre
     dépoli qu'il imite. Il passe donc à une encre translucide.
   ===================================================================== */
html.cda-dark .ac{
  --ac-bleu:#004aad;              /* surfaces : boutons, filets, puces */
  --ac-bleu-texte:#6ba6f2;        /* mots : 5,9:1 sur le fond de nuit */
  --ac-bleu-profond:#00306f;
  --ac-bleu-clair:#8bbcf7;
  --ac-papier:#05070b;
  --ac-brume:5,7,11;
  --ac-encre:#f2f2f2;
  --ac-encre-2:rgba(255,255,255,.62);
  --ac-trait:rgba(255,255,255,.14);
}

/* Le verre des panneaux, dans les trois états que la page connaît :
   sans WebGL, avec WebGL, et en repli sobre sur machine lente. */
html.cda-dark .ac-panneau{
  background:var(--cda-verre-lumiere),var(--cda-verre);
  border-color:var(--cda-verre-bord);
  box-shadow:var(--cda-verre-ombre);
}
html.cda-dark .ac-gl-on .ac-panneau{border-color:rgba(255,255,255,.16)}
html.cda-dark .ac-gl-sobre .ac-panneau{background:var(--cda-verre-lumiere),rgba(16,21,29,.72)}

/* La barre du haut. Ses couleurs sont écrites EN LIGNE dans header.php —
   c'est ce qui lui permet de changer selon la page. Une déclaration en
   ligne l'emporte sur une feuille de style, sauf `!important` : c'est le
   seul endroit du fichier qui en emploie, et c'est pour cette raison. */
html.cda-dark #cda-nav{
  --nav-fg:#f2f2f2 !important;
  --nav-fg-active:#f2f2f2 !important;
  --nav-border:rgba(255,255,255,.28) !important;
}
html.cda-dark #cda-nav.is-pose{
  background:rgba(5,7,11,.88);
  border-bottom-color:rgba(255,255,255,.12);
}
html.cda-dark:not(.ac-js) #cda-nav{background:rgba(5,7,11,.94)}

/* Le reflet qui court sur les cartes au survol : un halo blanc à 62 %
   éclaire une image sur papier, il la voile sur nuit. On l'atténue plutôt
   que de le supprimer — c'est lui qui donne l'impression de relief. */
html.cda-dark .ac-carte__media{
  background:
    linear-gradient(0deg,rgba(10,14,20,.86),rgba(10,14,20,.86)),
    var(--ac-dominante,#2a3a4e);
}
html.cda-dark .ac-carte__reflet{
  background:radial-gradient(38% 46% at var(--gx,50%) var(--gy,50%),
             rgba(255,255,255,.26),rgba(255,255,255,.06) 42%,transparent 72%);
}

/* L'ombre du portrait était calculée pour du papier : sur nuit elle ne
   porte plus rien et grise le bord de l'image. */
html.cda-dark .ac-portrait img{box-shadow:0 40px 80px -44px rgba(0,0,0,.85)}

/* =====================================================================
   LE PORTRAIT PASSE À GAUCHE, ET IL TOUCHE LE BORD

   Il était ferré à droite, dans la marge, en face du récit. Deux choses
   changent, et la seconde est la vraie.

   1. LE CÔTÉ. Photo à gauche, récit à droite. La section qui suit — les
      portes — ouvre elle aussi par la gauche : la page gagne une descente
      régulière au lieu d'alterner sans raison.

   2. LA MARGE DISPARAÎT SOUS L'IMAGE. Une photographie arrêtée à la marge
      est une illustration ; une photographie qui touche le bord de l'écran
      devient un bord de page. C'est le seul endroit du site où l'on sort
      de la grille, et c'est ce qui fait qu'on s'arrête dessus.

      La légende, elle, RESTE dans la marge : elle appartient au texte, pas
      à l'image. C'est ce décalage qui empêche le bloc de ressembler à une
      bannière posée là.
   ===================================================================== */
.ac-peintre__grille--photo{
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  grid-template-areas:
    "portrait recit"
    "points   points";
}
.ac-peintre__grille--photo > .ac-portrait{
  justify-self:start;
  /* ═══ LE PORTRAIT RENTRE DANS LE PANNEAU ═══
     Il en sortait, et c'était voulu au départ : « collée au bord de
     l'écran ». Le calcul était juste — mesuré, l'image partait bien de
     x = 1 px alors que le panneau commence à x = 70 — mais le résultat ne
     tient pas. Une image qui traverse le bord d'un panneau OPAQUE ne se
     lit pas comme une échappée : elle se lit comme un bloc mal placé, avec
     deux coins carrés d'un côté et arrondis de l'autre, et le panneau qui
     paraît troué. Le débordement ne fonctionnait visuellement que tant que
     le panneau était transparent — c'est-à-dire tant que le WebGL peignait
     son verre à sa place, et ce verre dérivait.

     Le portrait revient donc à l'intérieur, aligné sur le texte, ses
     quatre coins arrondis. La largeur redevient une largeur simple : plus
     de jeton d'échappée, plus de marge négative, plus rien à retrancher —
     et donc plus rien qui puisse diverger le jour où le rembourrage du
     panneau change. */
  width:100%;
  max-width:400px;
}
.ac-peintre__grille--photo > .ac-portrait img{border-radius:18px}

@media (max-width:1080px){
  .ac-peintre__grille--photo{
    grid-template-columns:1fr;
    /* La bande des jalons doit être NOMMÉE ici aussi : sans son nom dans
       le plan, la grille la place automatiquement — c'est-à-dire à la
       fin, après les garanties, où elle ne veut rien dire. */
    grid-template-areas:"recit" "portrait" "jalons" "points";
  }
  .ac-peintre__grille--photo > .ac-jalons{grid-area:jalons}
  .ac-peintre__grille--photo > .ac-portrait{max-width:420px}
}

/* =====================================================================
   LE PANNEAU DU PEINTRE — LA COMPOSITION EST REPRISE
   ---------------------------------------------------------------------
   Le panneau tenait en trois blocs : le portrait à gauche, le récit à
   droite, et les trois garanties dessous, en travers des deux colonnes.
   Mesuré à 1440 px, le bloc du bas faisait 1173 px de large et son
   contenu 300 : une liste en pile occupait le quart gauche, et les
   trois quarts restants étaient du vide. On lisait un panneau à moitié
   rempli — et c'est exactement ce que montrait la capture.

   Deux gestes, et rien d'autre.

   1. LE PORTRAIT PREND SA COLONNE. Il était borné à 400 px dans une
      colonne qui en fait 474 : soixante-quatorze pixels perdus à sa
      droite, et une image plus courte que le texte d'en face. À pleine
      colonne, sa hauteur — 474 × 4/3 — tombe à neuf pixels de celle du
      récit. Les deux blocs finissent sur la même ligne sans qu'aucun
      nombre n'ait été choisi pour cela : c'est le rapport de la
      photographie qui le donne.

   2. LES GARANTIES DEVIENNENT UN SOCLE. Trois colonnes séparées par un
      filet, sous un titre centré et un trait qui court sur toute la
      largeur. La pile verticale devient une ligne : le vide disparaît,
      et le panneau se termine sur une assise au lieu d'une chute.
      C'est aussi la lecture juste — trois promesses de même rang se
      lisent côte à côte, pas l'une sous l'autre.
   ===================================================================== */
@media (min-width:1081px){
  .ac-peintre__grille--photo > .ac-chap:last-of-type{
    border-top:1px solid rgba(13,17,23,.12);
    padding-top:clamp(28px,3.2vw,48px);
  }
  .ac-peintre__grille--photo > .ac-chap:last-of-type h2{
    text-align:center;max-width:24ch;margin-inline:auto;
  }
  .ac-peintre__grille--photo .ac-points{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
  }
  /* Le filet sépare, il ne borde pas : il n'est donc que sur les deux
     colonnes de droite, et le losange se recale sur la gouttière. */
  /* Le filet doit respirer des DEUX côtés : sans le rembourrage à
     droite, il tombait à trente-sept pixels du texte suivant et à cent
     sept du précédent — une colonne paraissait poussée contre la ligne. */
  .ac-peintre__grille--photo .ac-points li{
    padding-right:clamp(24px,2.6vw,44px);
    /* Trois colonnes côte à côte n'ont pas la même hauteur de texte. Sans
       cette ligne, la plus haute étirait les rangées des deux autres et
       leur intitulé se décollait de sa phrase — cinq pixels d'écart
       devenaient trente. Le contenu se cale en haut, l'air reste en bas. */
    align-content:start;
  }
  .ac-peintre__grille--photo .ac-points li + li{
    border-left:1px solid rgba(13,17,23,.10);
    padding-left:calc(clamp(24px,2.6vw,44px) + 20px);
  }
  .ac-peintre__grille--photo .ac-points li + li::before{left:clamp(24px,2.6vw,44px)}
}
html.cda-dark .ac-peintre__grille--photo > .ac-chap:last-of-type{border-top-color:rgba(255,255,255,.16)}
html.cda-dark .ac-peintre__grille--photo .ac-points li + li{border-left-color:rgba(255,255,255,.14)}

/* =====================================================================
   L'OUVERTURE — la brume s'allège, les transitions cèdent la place
   ---------------------------------------------------------------------
   Trois classes posées par accueil.js à l'entrée en scène, chacune avec
   un rôle précis :

   · is-ouverte : le premier écran est déclaré ouvert (polices arrivées).
     La brume derrière le titre — posée en ::after — s'allège encore d'un
     cran : elle n'a plus qu'à tenir la lisibilité, les œuvres du champ
     méritent leurs couleurs pleines. Le fondu dure 1,6 s pour que le
     changement ne se voie pas, il se constate.

   · is-libre : les arrivées sont posées. On COUPE les transitions sur les
     éléments du héros que les modules (parallaxe) écrivent désormais à
     chaque image : une transition déclarée relancerait l'animation à
     chaque écriture, et le suivi de la main deviendrait mou. La classe
     porte le préfixe `html.ac-anime` pour l'emporter sur les règles
     d'arrivée, qui sont elles-mêmes préfixées — même raisonnement que
     plus haut dans cette feuille.

   · is-respire : la respiration des lettres écrit sur `.ac-fente__i`
     chaque image ; sa transition d'arrivée est coupée pour la même raison.
   ===================================================================== */
.ac-hero.is-ouverte::after{opacity:.72;transition:opacity 1.6s ease}

/* ═══ SPÉCIFICITÉ ═══
   La règle d'arrivée est `html.ac-anime [data-ac-revele]:not():not().is-la`
   — (0,5,1). La coupure doit l'emporter : on reprend la même forme et on
   y ajoute le héros. `is-libre` n'est posée qu'une fois l'arrivée achevée
   (1,4 s après l'ouverture), donc couper la transition ici ne tronque
   rien en plein vol. */
html.ac-anime .ac-hero.is-libre .ac-hero__sur.is-la,
html.ac-anime .ac-hero.is-libre .ac-hero__bas.is-la,
html.ac-anime .ac-hero.is-libre [data-ac-revele]:not([data-fendre]):not([data-fendre-signes]).is-la{
  transition:none;
}
/* ═══ SPÉCIFICITÉ ═══
   La règle d'arrivée est `html.ac-anime .is-la .ac-fente__i` — (0,3,1).
   La coupure doit l'emporter : on reprend le préfixe et on ajoute le
   héros. `is-respire` n'est posée qu'une fois l'arrivée achevée, donc
   couper la transition ici ne tronque rien. */
html.ac-anime .ac-hero.is-respire .ac-fente__i{transition:none}

/* =====================================================================
   LE RUBAN 3D A ÉTÉ RETIRÉ
   ---------------------------------------------------------------------
   Un canevas Three.js dessinait une traînée de peinture derrière le
   titre ; trop de défauts géométriques au rendu. Le canevas est sorti
   du gabarit, le script n'est plus enfilé, et ses règles CSS ont été
   retirées d'ici le 2026-09-03. Les autres animations de l'accueil
   (ondes de clic, floraison, ouverture, parallaxe, respiration)
   restent — elles ne dépendaient pas du ruban.
   ===================================================================== */


/* =====================================================================
   LA FRISE ET LES MATIÈRES — CE QUI COMBLE LE BAS DU RÉCIT
   ---------------------------------------------------------------------
   Le portrait prend sa colonne et descend, à 3/4, plus bas que le texte
   d'en face : trois cents pixels de vide sous le bouton sur un grand
   écran. La frise reprend le récit en quatre jalons, et la ligne des
   matières le termine.

   Le dessin reprend le vocabulaire déjà en place — le losange bleu des
   garanties, le filet vertical du panneau — plutôt que d'en inventer un
   cinquième. Une page tient à ce qu'elle NE fait pas.
   ===================================================================== */
/* ═══ POURQUOI LA FRISE N'EST PAS DANS LA COLONNE DU RÉCIT ═══
   Elle y avait été mise pour combler le vide sous le bouton. Mesuré, cela
   déplaçait le trou au lieu de le boucher : à 1440 px le récit passait à
   973 px de haut contre 660 au portrait, et les trois cents pixels vides
   changeaient simplement de côté. Deux colonnes de contenus différents ne
   s'équilibrent pas en ajoutant du texte dans la plus courte — elles
   s'équilibrent en cessant de leur demander la même hauteur.
   La frise devient donc une BANDE en travers des deux colonnes, comme le
   socle des garanties plus bas. Chaque colonne finit où son contenu finit,
   et la bande recoud le tout. */
.ac-jalons{margin-top:clamp(30px,3.6vw,52px)}
.ac-frise{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(14px,1.7vw,22px) clamp(20px,2.4vw,40px);
}
.ac-frise li{display:grid;gap:3px;position:relative;padding-left:20px;align-content:start}
.ac-frise li::before{
  content:'';position:absolute;left:0;top:.5em;
  width:7px;height:7px;background:var(--ac-bleu);transform:rotate(45deg);
}
@media (min-width:1081px){
  .ac-frise{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.ac-frise b{
  font-family:'Playfair Display',Georgia,serif;font-weight:600;
  font-size:clamp(15px,1.15vw,18px);line-height:1.2;color:var(--ac-encre);
}
.ac-frise span{font-size:clamp(13px,.95vw,15px);line-height:1.6;color:var(--ac-encre-2)}

/* Les trois matières : des étiquettes, pas des boutons — rien n'y mène. */
.ac-matieres{
  margin:clamp(22px,2.6vw,34px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.ac-matieres span{
  padding:7px 15px;border-radius:999px;
  border:1px solid var(--ac-trait,rgba(13,17,23,.14));
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ac-encre-2);
}
html.cda-dark .ac-matieres span{border-color:rgba(255,255,255,.18)}

/* =====================================================================
   DIRECTION 2026 — LE SEUIL MÉDITERRANÉEN
   ---------------------------------------------------------------------
   Synthèse de plusieurs principes repérés dans les projets publiés par
   Awwwards : typographie monumentale, scène spatiale, repères curatoriaux
   et porte d'entrée immédiate vers l'expérience. Aucun langage de marque
   tiers n'est repris : la matière, les œuvres et l'azur restent ceux du site.
   ===================================================================== */
.ac{
  --ac-papier:#f2efe7;
  --ac-brume:242,239,231;
}

.ac-hero{
  isolation:isolate;
  overflow:hidden;
  min-height:100svh;
  color:#f7f3e9;
  background:
    radial-gradient(70% 60% at 50% 48%,rgba(19,74,132,.54),transparent 70%),
    linear-gradient(145deg,#04101d 0%,#082440 52%,#071728 100%);
  border-radius:0 0 clamp(28px,3.5vw,58px) clamp(28px,3.5vw,58px);
}
.ac-hero::before{
  content:'';
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,transparent calc(50% - .5px),rgba(174,210,244,.16) 50%,transparent calc(50% + .5px)),
    linear-gradient(0deg,transparent calc(50% - .5px),rgba(174,210,244,.13) 50%,transparent calc(50% + .5px)),
    repeating-radial-gradient(circle at 50% 50%,transparent 0 11.8vw,rgba(174,210,244,.08) 11.85vw 11.92vw,transparent 12vw 23.8vw);
  -webkit-mask-image:linear-gradient(transparent 4%,#000 24%,#000 80%,transparent 98%);
  mask-image:linear-gradient(transparent 4%,#000 24%,#000 80%,transparent 98%);
}
.ac-hero::after{
  background:radial-gradient(43% 27% at 50% 49%,
    rgba(5,19,34,.90) 0%,rgba(5,19,34,.74) 42%,rgba(5,19,34,.22) 72%,transparent 100%);
}
.ac-hero.is-ouverte::after{opacity:.78}

.ac-hero .ac-titre{
  color:#f8f4eb;
  font-weight:650;
  letter-spacing:-.06em;
  text-shadow:0 18px 65px rgba(0,0,0,.34);
}
.ac-hero .ac-titre .ac-mot:last-child .ac-fente__i{color:#8fc8ff}
.ac-hero > .ac-hero__sur{
  margin-top:clamp(22px,3vh,38px);
  color:#9ec6ec;
  letter-spacing:.38em;
}

.ac-hero__coord{
  position:absolute!important;
  left:var(--ac-marge);right:var(--ac-marge);top:50%;z-index:3!important;
  display:flex;justify-content:space-between;align-items:center;
  pointer-events:none;
  color:rgba(225,238,249,.56);
  font-size:9px;line-height:1;letter-spacing:.24em;text-transform:uppercase;
  transform:translateY(clamp(112px,13vw,180px));
}
.ac-hero__coord span:last-child{text-align:right}

.ac-hero > .ac-hero__bas{
  left:var(--ac-marge);right:var(--ac-marge);width:auto;
  justify-content:space-between;
  align-items:center;
}
.ac-hero__portal{
  display:inline-flex;align-items:center;gap:15px;
  min-height:48px;padding:0 8px 0 20px;
  border:1px solid rgba(221,237,251,.34);border-radius:999px;
  color:#f7f3e9;text-decoration:none;
  font-size:10px;font-weight:650;letter-spacing:.18em;text-transform:uppercase;
  background:rgba(5,20,36,.34);
  transition:background .3s ease,border-color .3s ease,transform .35s cubic-bezier(.16,1,.3,1);
}
.ac-hero__portal i{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:#f7f3e9;color:#07182a;font-size:15px;font-style:normal;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.ac-hero__portal:hover,.ac-hero__portal:focus-visible{
  color:#fff;background:#004aad;border-color:#65adff;transform:translateY(-2px);
}
.ac-hero__portal:hover i,.ac-hero__portal:focus-visible i{transform:rotate(45deg)}
.ac-hero .ac-defiler{color:rgba(225,238,249,.64)}
.ac-hero .ac-defiler i{background:rgba(225,238,249,.26)}
.ac-hero .ac-defiler i::after{background:#8fc8ff}

/* Le papier du reste de l'accueil reprend une chaleur minérale plutôt qu'un
   blanc d'interface. Les panneaux gardent leur transparence et les œuvres
   conservent leurs couleurs photographiques. */
.ac-manifeste{position:relative;max-width:1320px;padding-top:clamp(130px,18vh,240px)}
.ac-manifeste::before{
  content:attr(data-index-label);display:block;margin-bottom:clamp(30px,5vh,62px);
  color:var(--ac-bleu);font-size:10px;font-weight:700;letter-spacing:.26em;
}
.ac-tete h2{letter-spacing:-.035em}
.ac-panneau{border-radius:clamp(20px,2.2vw,34px)}
.ac-carte__media{box-shadow:0 30px 72px -48px rgba(6,31,58,.72)}

/* Sur le ciel clair du seuil, l’encre doit être présente dès la première
   image. L’ancienne règle imposait du blanc sur une capsule blanche : les
   liens existaient mais semblaient ne se charger qu’au premier scroll. La
   classe `.is-pose` ne change plus leur visibilité ; elle densifie seulement
   la capsule et son ombre, ce qui conserve une transition propre. */
html:not(.cda-dark) body.home #cda-nav:not(.is-pose){
  --nav-fg:#07365d!important;
  --nav-fg-active:#087bb8!important;
  --nav-border:rgba(7,54,93,.24)!important;
  --nav-shadow:none!important;
}
html:not(.cda-dark) body.home #cda-nav:not(.is-pose) .cda-desktop-nav{
  background:rgba(255,255,255,.84);
  border-color:rgba(7,54,93,.12);
}

@media (max-width:760px){
  .ac-hero{min-height:94svh;border-radius:0 0 28px 28px}
  .ac-hero::before{background:
    linear-gradient(90deg,transparent calc(50% - .5px),rgba(174,210,244,.13) 50%,transparent calc(50% + .5px)),
    repeating-radial-gradient(circle at 50% 50%,transparent 0 25vw,rgba(174,210,244,.08) 25.2vw 25.4vw,transparent 25.6vw 50vw)}
  .ac-hero .ac-titre{letter-spacing:-.035em}
  .ac-hero > .ac-hero__sur{margin-top:20px;font-size:8.5px;letter-spacing:.25em}
  .ac-hero__coord{top:25%;transform:none;font-size:7.5px;letter-spacing:.16em}
  .ac-hero__coord span:last-child{display:none}
  .ac-hero > .ac-hero__bas{bottom:24px}
  .ac-hero__portal{font-size:9px;min-height:44px;padding-left:16px}
  .ac-hero__portal i{width:30px;height:30px}
  .ac-manifeste{padding-top:clamp(90px,13vh,140px)}
}

@media (prefers-reduced-motion:reduce){
  .ac-hero__portal,.ac-hero__portal i{transition:none}
}

/* Le portrait ne doit pas courir : au-delà de six cent vingt pixels de
   large il fait plus de huit cents de haut, et aucune colonne de texte
   ne suit. La borne le laisse grand sans le laisser filer. */
@media (min-width:1081px){
  .ac-peintre__grille--photo > .ac-portrait{max-width:min(100%,520px)}
  /* la bande des jalons traverse les deux colonnes */
  .ac-peintre__grille--photo{
    grid-template-areas:
      "portrait recit"
      "jalons   jalons"
      "points   points";
  }
  .ac-peintre__grille--photo > .ac-jalons{grid-area:jalons}
}
/* === ACCUEIL 2026 : MATIÈRE MINÉRALE ET ŒUVRES === */
.ac{--ac-papier:#f5f2e8;--ac-encre:#07365d;--ac-bleu:#004aad;--ac-azur:#37abd1;--ac-sable:#e9d8bd;--ac-corail:#e6764f;background:#f5f2e8;color:var(--ac-encre)}
/* Le quadrillage et les repères illustratifs disparaissent : la matière suffit. */
.ac::before{display:none}
.ac-gl{opacity:.08;mix-blend-mode:multiply;filter:saturate(.68) brightness(1.18)}
.ac-hero{
  isolation:isolate;color:var(--ac-encre);background-color:#eee8dc;
  background-image:url('../media/fond-atelier-mineral-v9.webp');
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.ac-hero::before{content:none}
.ac-hero::after{content:none}
.ac-hero > *:not(.ac-folio){z-index:2}
.ac-hero > .ac-titre,.ac-hero > .ac-hero__sur{position:relative;z-index:4}
.ac-hero > .ac-hero__coord{z-index:4!important}
.ac-hero > .ac-hero__bas{position:absolute;left:var(--ac-marge);right:var(--ac-marge);bottom:clamp(24px,4.5vh,52px);z-index:5}
.ac-hero .ac-titre,.ac-hero .ac-titre *{background:none;color:#06365d;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor}
.ac-hero .ac-titre{font-weight:700;letter-spacing:-.052em;text-shadow:0 2px 0 rgba(255,255,255,.72),0 20px 54px rgba(3,73,111,.13)}
.ac-hero .ac-titre .ac-mot:last-child .ac-fente__i{color:#087bb8;-webkit-text-fill-color:currentColor}
.ac-hero .ac-titre .ac-titre__azur,.ac-hero .ac-titre .ac-titre__azur *{color:#004aad!important;-webkit-text-fill-color:currentColor!important}
.ac-hero__sur{color:#086fa8}.ac-hero__sous{color:#0b5378;text-shadow:0 1px 0 rgba(255,255,255,.66)}.ac-hero__coord{color:rgba(5,53,87,.82)}
.ac-hero__intro{color:#154a66;text-shadow:0 1px 0 rgba(255,255,255,.55)}.ac-hero__intro::before{background:#dd714e;box-shadow:0 0 0 5px rgba(221,113,78,.13)}
.ac-hero__entree{color:#06365d;background:rgba(255,255,255,.7);border-color:rgba(6,76,113,.34);box-shadow:0 16px 45px rgba(4,75,119,.12),inset 0 1px 0 rgba(255,255,255,.8)}
.ac-hero__entree:hover,.ac-hero__entree:focus-visible{color:#fff;background:#0679b6;border-color:#0679b6;box-shadow:0 18px 55px rgba(4,91,145,.26)}
.ac-hero__entree-ico{background:#087bb8;color:#fff;box-shadow:0 0 0 5px rgba(8,123,184,.12)}.ac-hero__entree:hover .ac-hero__entree-ico,.ac-hero__entree:focus-visible .ac-hero__entree-ico{background:#fff;color:#087bb8}
.ac-hero__defile{color:#07365d;text-shadow:0 1px 0 rgba(255,255,255,.65)}.ac-hero__defile::before{background:#07365d}.ac-hero__index{color:rgba(6,54,93,.72)}
.ac-oeuvre{border-color:rgba(255,255,255,.92);box-shadow:0 22px 56px rgba(3,71,111,.18),0 2px 12px rgba(3,71,111,.1)}.ac-oeuvre::after{background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 45%,rgba(4,75,118,.12))}
.ac-repere{color:rgba(7,54,93,.75);background:rgba(255,255,255,.48);border-color:rgba(7,54,93,.2);box-shadow:0 10px 28px rgba(4,72,111,.08)}
.ac-manifeste__chiffre{color:#087bb8}.ac-manifeste__texte{color:#103f5c}.ac-manifeste__note{color:#617780}.ac-manifeste__actions .ac-lien:first-child{background:#087bb8;border-color:#087bb8;color:#fff}.ac-manifeste__actions .ac-lien:first-child:hover,.ac-manifeste__actions .ac-lien:first-child:focus-visible{background:#075f91;border-color:#075f91}
.ac-compteur{color:#087bb8}.ac-temoignage__metier{color:#617780}.ac-ancre{border-color:rgba(7,54,93,.24);color:#07365d;background:rgba(255,255,255,.38)}.ac-ancre:hover,.ac-ancre:focus-visible{background:#087bb8;border-color:#087bb8;color:#fff}
.ac-empreinte{background:linear-gradient(180deg,#f5f2e8 0%,#dceef0 50%,#f5f2e8 100%)}.ac-empreinte__cadre{box-shadow:0 30px 75px rgba(4,75,119,.16)}.ac-empreinte__grain{mix-blend-mode:multiply;opacity:.12}
@media(max-width:900px){.ac-hero{background-color:#eee8dc;background-image:url('../media/fond-atelier-mineral-v9.webp');background-position:58% center}.ac-hero__intro{background:rgba(250,248,239,.56);border:1px solid rgba(255,255,255,.62);box-shadow:0 10px 35px rgba(5,68,105,.08)}}
@media(prefers-reduced-motion:reduce){.ac-gl{opacity:.12}}

/* === FOLIO D’ATELIER 2026 — UNE ŒUVRE, PUIS SON ENTOURAGE ===
   La page n’imite ni une mer ni un musée en 3D. Elle reprend un geste humain :
   ouvrir une pile de tirages sur une table d’atelier. Un seul tableau gouverne
   l’image ; deux voisins de chaque côté donnent la continuité. */
.ac-hero > .ac-folio.ac-folio{
  position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;
  contain:layout paint style;
}
.ac-folio__pile{position:absolute;inset:0;perspective:1400px;transform-style:preserve-3d}
.ac-folio__item{
  position:absolute;left:50%;top:49%;width:min(29vw,405px);height:auto;
  margin:0;padding:10px 10px 34px;background:#f8f4ea;
  border:1px solid rgba(7,54,93,.2);box-shadow:0 30px 68px -32px rgba(4,48,78,.52);
  opacity:0;visibility:hidden;transform-origin:50% 92%;backface-visibility:hidden;
  will-change:transform,opacity;
}
.ac-folio__item img{
  display:block;width:100%;height:auto;max-height:min(57vh,556px);margin:0 auto;
  object-fit:contain;background:#eee7da;filter:saturate(1.04) contrast(1.015);
}
.ac-folio__item[data-folio-place="0"]{
  border-color:rgba(255,255,255,.88);
  box-shadow:0 45px 92px -34px rgba(4,48,78,.62),0 0 0 1px rgba(0,74,173,.12);
}
.ac-folio__numero{
  position:absolute;left:12px;right:12px;bottom:9px;color:rgba(7,54,93,.58);
  font:700 8px/1 'Archivo',system-ui,sans-serif;letter-spacing:.2em;text-align:right;
}
.ac-folio__compteur{
  position:absolute;left:50%;top:calc(49% + min(34vh,345px));display:flex;
  align-items:center;gap:10px;transform:translateX(-50%);color:#07365d;
  font:700 9px/1 'Archivo',system-ui,sans-serif;letter-spacing:.2em;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}
.ac-folio__compteur i{display:block;width:42px;height:1px;background:rgba(0,74,173,.42)}

/* Le titre demeure le premier plan éditorial. Il coupe la pile comme un titre
   de catalogue, mais reste du HTML opaque et intégralement lisible. */
.ac-hero .ac-titre{
  --titre-x:0px;--titre-y:0px;
  transform:translate3d(var(--titre-x),var(--titre-y),0);
  will-change:transform;
}
html.ac-anime .ac-hero.ac-hero--respire .ac-titre .ac-fente__i{
  transition:none;
  animation:ac-titre-respire calc(5.8s + var(--n) * 75ms) ease-in-out infinite;
  animation-delay:calc(var(--n) * -190ms);
}
@keyframes ac-titre-respire{
  0%,100%{transform:translate3d(0,0,0) scaleY(1)}
  36%{transform:translate3d(0,-1.35px,0) scaleY(1.006)}
  68%{transform:translate3d(0,.65px,0) scaleY(.997)}
}
@media(max-width:900px){
  .ac-folio__item{top:48%;width:min(72vw,292px);height:auto;padding:8px 8px 28px}
  .ac-folio__item img{max-height:min(49vh,402px)}
  .ac-folio__compteur{top:calc(48% + min(29vh,250px));font-size:8px}
  .ac-folio__compteur i{width:30px}
}
@media(prefers-reduced-motion:reduce){
  .ac-hero .ac-titre{transform:none!important;will-change:auto}
  .ac-hero--respire .ac-titre .ac-fente__i{animation:none!important}
  .ac-folio__item{opacity:0!important;visibility:hidden!important;will-change:auto}
  .ac-folio__item:first-child{
    opacity:.9!important;visibility:visible!important;
    transform:translate3d(-50%,-50%,0) scale(.9)!important;
  }
  .ac-folio__compteur{display:none}
}

/* =====================================================================
   DIRECTION 2026-09 — LE SEUIL ENCADRÉ
   ---------------------------------------------------------------------
   Le premier écran n'est plus une affiche : c'est un cadre. Il est posé à
   gauche, il contient des toiles, et le défilement l'ouvre jusqu'aux deux
   bords de la page — en poussant le titre devant lui.

   CE QUI EST ÉCRIT ICI, ET CE QUI EST ÉCRIT EN JAVASCRIPT.
   La feuille de style pose les PLACES : la scène, l'écran collant, la
   marie-louise, la grille, la colonne de texte. Elle ne pose aucune des
   TAILLES qui bougent — celles-là viennent de `cadre-heros.js`, qui est
   seul à savoir où en est la course. Deux fichiers qui écriraient la même
   largeur finiraient par ne plus dire la même chose ; ici l'un décrit,
   l'autre mesure.

   LE FOND REDEVIENT CELUI DES AUTRES PAGES.
   Le pigment marin était à huit pour cent d'opacité sur l'accueil, en
   fusion multiplicative : de la buée. Il passe à pleine valeur, comme sur
   le catalogue et la page du peintre — c'est la même onde, le même
   shader, la même réaction au pointeur. Le reste de la page reprend son
   papier par-dessus, dans `.ac-suite` : seul le seuil vit sur l'eau.
   ===================================================================== */

/* --- Le fond de pigment, à pleine valeur ----------------------------- */
.ac{background:transparent}
.ac-gl{opacity:1;mix-blend-mode:normal;filter:none}
.ac-gl-on.ac::before{opacity:0}

/* LE PIGMENT NE S'ARRÊTE PLUS AU SEUIL.
   Il avait repris son papier sous « Une sélection » : la page redevenait
   blanche dès la deuxième section, et l'onde qu'on venait de voir bouger
   disparaissait pour de bon. Elle traverse maintenant toute la page, du
   titre au pied.

   Ce qui la rend lisible n'est PAS un papier opaque, c'est un voile —
   exactement celui des pages intérieures : un blanc à vingt-six pour cent,
   posé sur toute la hauteur de la suite. Il RELÈVE LE PLANCHER de
   luminance des zones les plus denses sans éteindre les zones claires,
   donc l'encre repasse au-dessus du seuil AA sans que le fond cesse
   d'être un fond. Un paragraphe reste lisible ; la mer continue. */
.ac-suite{
  position:relative;z-index:1;
  /* Le voile ARRIVE, il ne commence pas net. Posé d'un coup, son bord
     traçait une ligne horizontale en travers de la page, juste sous le
     seuil : on voyait le début du calque, pas le début d'une section.
     Il monte donc sur les deux cents premiers pixels, pendant que le
     cadre achève sa descente — le raccord ne se voit plus. */
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0,
    rgba(255,255,255,.26) 200px,
    rgba(255,255,255,.26) 100%);
}
.ac-suite > *{position:relative;z-index:1}
html.cda-dark .ac-suite{
  background:linear-gradient(180deg,
    rgba(6,10,16,0) 0,rgba(6,10,16,.34) 200px,rgba(6,10,16,.34) 100%);
}

/* --- La scène : sa hauteur EST la course ----------------------------
   L'écran commence SOUS la barre et mesure d'autant moins haut. Rien ne
   passe donc sous le logo ni sous la capsule du menu — et le module
   n'a rien à savoir de tout cela : il mesure l'écran, pas la fenêtre. */
.ac-seuil{
  /* LA COURSE EST NULLE. Le cadre est ouvert bord à bord dès la première
     image (voir `cadre-heros.js`) : il n'y a plus rien à dérouler, et la
     section ne mesure donc qu'un écran. Rétablir une valeur ici suffit à
     rendre au seuil son ouverture au défilement. */
  --seuil-course:0px;
  position:relative;
  z-index:1;
  /* LA BARRE EST EN `position:fixed` SUR L'ACCUEIL — elle ne réserve donc
     aucune place dans le flux. Tant que le cadre partait d'une boîte en
     retrait, on ne le voyait pas ; ouvert bord à bord, il passait SOUS le
     logo et sous les destinations.
     La hauteur de barre est donc réservée ICI, en retrait haut de la
     section : l'écran collant prend sa place sous la barre, et le cadre
     commence où la partie haute finit. */
  box-sizing:border-box;
  padding-top:var(--nav-h,0px);
  height:calc(100svh + var(--seuil-course));
}
@media (max-width:900px){ .ac-seuil{--seuil-course:0px} }

.ac-seuil__ecran{
  position:sticky;top:var(--nav-h,0px);
  height:calc(100svh - var(--nav-h,0px));
  overflow:hidden;
  isolation:isolate;
}

/* L'ancien héros sombre est neutralisé : mêmes classes — donc la
   chorégraphie d'ouverture du titre, la parallaxe et la respiration
   continuent de fonctionner sans une ligne de JavaScript en plus — mais
   plus aucun de ses décors, qui couvraient le pigment. */
.ac-seuil__ecran.ac-hero{
  min-height:0;
  border-radius:0;
  background:none;
  color:var(--ac-encre);
}
.ac-seuil__ecran.ac-hero::before{content:none;display:none}

/* ═══ LE VOILE EST RETIRÉ ═══
   Il faisait ce qu'on lui demandait — tenir le blanc du titre au-dessus
   des toiles — mais il le faisait en assombrissant TOUT L'ÉCRAN, donc le
   mur de tableaux avec. Sur une page de galerie, c'est payer la
   lisibilité d'un titre avec la couleur des œuvres, et c'est le mauvais
   sens de l'échange : le mur EST le sujet.

   Ce qui reste pour tenir le titre est entièrement local — l'ombre des
   lettres elles-mêmes, plus bas dans ce fichier. Une ombre ne pèse que
   sous les glyphes : elle ne coûte rien à un centimètre de là, là où les
   toiles reprennent leur valeur exacte.

   La règle est gardée, vide, plutôt que supprimée : elle porte la
   transition d'opacité de la sortie de seuil, et c'est le seul endroit
   où l'on saura pourquoi il n'y a plus de voile. */
.ac-seuil__ecran.ac-hero::after,
.ac-seuil__ecran.ac-hero.is-ouverte::after{content:none}


/* --- LE CADRE -------------------------------------------------------
   Trois couches, et l'ordre compte : la marie-louise au fond, les toiles
   dessus, la moulure par-dessus tout. C'est ainsi que la lèvre intérieure
   du cadre recouvre le bord des œuvres, exactement comme une feuillure
   recouvre une toile. */
.ac-cadre{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  will-change:transform;          /* la descente finale, d'un seul bloc */
}

.ac-cadre__vue{
  position:absolute;left:0;top:0;width:0;height:0;
  background:
    radial-gradient(120% 100% at 30% 12%,rgba(255,255,255,.9),transparent 62%),
    linear-gradient(160deg,#fbfaf6 0%,#f2efe6 58%,#eae5d9 100%);
  box-shadow:
    inset 0 0 0 1px rgba(24,38,56,.12),
    inset 0 26px 40px -22px rgba(12,28,50,.55),
    inset 0 -14px 32px -22px rgba(12,28,50,.34),
    inset 18px 0 30px -24px rgba(12,28,50,.34),
    inset -18px 0 30px -24px rgba(12,28,50,.34);
  will-change:left,top,width,height;
}

/* LA FENÊTRE. Elle bouge, elle grandit, elle ne fabrique rien : elle
   découpe le mur. `place-content:center` garde le mur centré sur elle
   quelle que soit sa taille — c'est ce qui fait qu'en s'ouvrant le cadre
   dévoile de part et d'autre au lieu de pousser l'accrochage. */
.ac-cadre__grille{
  position:absolute;left:0;top:0;
  overflow:hidden;
  display:grid;place-content:center;
  will-change:left,top,width,height;
}

/* LE MUR. Des colonnes de largeur égale, et rien d'autre.

   C'EST UN ACCROCHAGE, PAS UN PUZZLE. La version en trame d'unités
   carrées — quatre sur trois pour un paysage, trois sur quatre pour un
   portrait, avec remplissage dense — donnait exactement ce que donne un
   remplissage dense : des trous rebouchés par des bandes d'une unité de
   large, et une composition sans axe. Un mur de galerie n'est pas un
   Tetris : ce sont des lignes verticales régulières, et des toiles
   posées dessus dans leur format.

   Les colonnes ont donc toutes la même largeur, du premier au dernier
   pixel de la course. Une toile paysage y occupe une case 4:3, une toile
   portrait une case 3:4 — aucune n'est étirée, aucune n'est recoupée
   pour entrer chez la voisine. `break-inside` interdit à une case d'être
   coupée en deux entre deux colonnes, et le balisage sert les formats par
   blocs, de sorte que les paysages se retrouvent entre eux.

   Le mur ne change JAMAIS de taille : le JavaScript n'écrit `--cols`,
   `--jeu` et sa largeur qu'au chargement et au redimensionnement. */
.ac-cadre__mur{
  column-count:var(--cols,6);
  column-gap:var(--jeu,14px);
}

/* ═══ LE MUR RESPIRE : UNE COLONNE MONTE, LA SUIVANTE DESCEND ═══
   ---------------------------------------------------------------------
   POURQUOI LES COLONNES DEVIENNENT DE VRAIS ÉLÉMENTS.
   Une colonne de `column-count` n'existe pas dans le document : c'est un
   fragment de mise en page, sans boîte, donc sans transformation
   possible. Pour faire glisser une colonne et pas l'autre, il faut des
   colonnes qu'on puisse saisir. `cadre-heros.js` reconstruit donc le mur
   en `div` réels au chargement et à chaque redimensionnement — le
   balisage PHP, lui, ne change pas : il reste la liste plate des toiles,
   et c'est encore lui qui s'affiche si le script ne tourne pas.

   LA BOUCLE EST SANS COUTURE parce que chaque piste est écrite DEUX
   FOIS : quand la première série a défilé d'exactement sa hauteur, la
   seconde occupe la même place au pixel près, et on ramène la piste à
   zéro sans que rien ne saute.

   Tout le mouvement est porté par `transform` sur la piste — jamais sur
   les images, jamais sur une propriété qui déclenche une mise en page. */
/* LA FENÊTRE CESSE DE CENTRER SON CONTENU quand le mur est en colonnes.
   Centré, le mur n'avait pas de haut : chaque piste démarrait à onze
   cents pixels au-dessus de l'ouverture, et une piste qui glisse d'une
   hauteur de série finissait par montrer son propre vide. Les colonnes
   sont donc ÉTIRÉES à la hauteur de l'ouverture, et chacune découpe sa
   piste elle-même. */
.ac-cadre__grille.is-colonnes{
  display:flex;align-items:stretch;justify-content:center;
}
.ac-cadre__mur.is-colonnes{
  column-count:auto;
  display:flex;align-items:stretch;
  gap:var(--jeu,14px);
  width:100%;
}
.ac-cadre__col{
  flex:1 1 0;
  min-width:0;
  position:relative;
  overflow:hidden;
}
/* La piste est posée EN HAUT de sa colonne, et elle contient assez de
   séries pour que le pire décalage laisse encore de la peinture sous le
   bord inférieur. C'est la condition pour qu'il n'y ait jamais de trou. */
.ac-cadre__colpiste{
  position:absolute;left:0;top:0;width:100%;
  will-change:transform;
  transform:translate3d(0,0,0);
}
.ac-cadre__item{
  margin:0 0 var(--jeu,14px);
  overflow:hidden;
  break-inside:avoid;-webkit-column-break-inside:avoid;
  background:rgba(18,32,50,.06);
  box-shadow:0 10px 22px -16px rgba(12,26,44,.55);
}
.ac-cadre__item--p{aspect-ratio:4/3}     /* paysage */
.ac-cadre__item--v{aspect-ratio:3/4}     /* portrait */
.ac-cadre__item img{
  display:block;width:100%;height:100%;
  object-fit:cover;
}

.ac-cadre__gl{
  position:absolute;inset:0;z-index:3;
  width:100%;height:100%;
  pointer-events:none;
}

/* --- Le repli : pas de WebGL, mais un cadre quand même ---------------
   La moulure devient une bordure d'image découpée en neuf. Elle est
   posée AUTOUR de l'ouverture — d'où la boîte en `content-box` et la
   marge négative : la boîte que le JavaScript a mesurée reste la vue, et
   la bordure pousse vers l'extérieur, comme une vraie moulure. */
.ac-seuil.is-repli .ac-cadre__vue,
.ac-seuil.is-fige  .ac-cadre__vue{
  box-sizing:content-box;
  border:var(--moul,52px) solid transparent;
  border-image:url('../media/cadre-bordure.webp') 50 stretch;
  margin:calc(var(--moul,52px) * -1);
  background-clip:padding-box;
}
.ac-seuil.is-repli .ac-cadre__gl,
.ac-seuil.is-fige  .ac-cadre__gl{display:none}

/* --- LA COLONNE DE TEXTE -------------------------------------------
   Elle n'a pas d'animation propre : elle est poussée. Son bord gauche est
   collé au bord droit du cadre, gouttière comprise, et `--seuil-x0` — que
   le JavaScript écrit — dit où ce bord se trouvait au départ. */
/* LE TITRE EST CENTRÉ DANS CE QUI RESTE, ET LES DEUX ÉCARTS SONT ÉGAUX.
   La colonne est bornée par la MÊME gouttière des deux côtés : à gauche
   entre le bord du cadre et le début du titre, à droite entre la fin du
   titre et le bord de la page. Le titre occupant toute la colonne, il
   suffit que les deux valeurs soient la même — `--seuil-g` — pour que
   l'équilibre soit exact quelle que soit la largeur de l'écran, sans
   qu'aucun calcul n'ait à mesurer le texte. */
.ac-seuil__texte{
  --seuil-g:clamp(26px,3.6vw,84px);
  position:absolute;z-index:4;
  top:0;bottom:0;
  /* Le titre n'est plus à CÔTÉ du cadre, il est DESSUS : le cadre occupe
     l'écran entier, la colonne aussi. `--seuil-x0` ne sert plus à la
     placer — le JavaScript l'écrit encore, sans conséquence. */
  left:var(--seuil-g);
  right:var(--seuil-g);
  display:flex;flex-direction:column;justify-content:center;align-items:stretch;
  text-align:center;
  container-type:inline-size;
  will-change:transform,opacity;
}

/* La direction précédente colorait le titre ET toute sa descendance
   (`.ac-hero .ac-titre *`) : sur un seuil clair, il fallait reprendre les
   deux, sinon les signes découpés gardaient l'encre du fond sombre. */
.ac-seuil .ac-titre,
.ac-seuil .ac-titre *{color:#f7f9fb}
.ac-seuil .ac-titre{
  white-space:normal !important;
  font-weight:700;
  line-height:.84;
  letter-spacing:-.045em;
  font-size:min(210px,calc(100cqi / 7.2));
}
/* ═══ PAS D'OMBRE PORTÉE SUR CE TITRE ═══
   `text-shadow` est une propriété HÉRITÉE. Le module de typo cinétique
   remplace le contenu du titre par un `span` par signe : chacun héritait
   l'ombre et la repeignait pour lui seul. Quinze ombres de soixante
   pixels de flou côte à côte ne font pas une ombre de titre, elles font
   deux rectangles gris derrière les mots — c'est ce qu'on voyait à
   l'écran. La lisibilité est portée par le voile de l'écran, qui est un
   seul dégradé, au bon endroit, et qui ne se cumule avec rien. */
/* ═══ L'OMBRE REVIENT, MAIS SUR LES DEUX LIGNES SEULEMENT ═══
   La règle interdisait toute ombre, et pour une bonne raison : le module
   de typo cinétique découpait le titre en un `span` par signe, et chacun
   héritait l'ombre puis la repeignait — quinze flous de soixante pixels
   côte à côte font deux rectangles gris, pas une ombre.

   Le titre du seuil n'est plus découpé : il porte deux lignes, et deux
   lignes peuvent porter une ombre. C'est ce qui permet de RENDRE LES
   TOILES À LEUR COULEUR : la lisibilité était payée par un voile qui
   lavait tout l'écran ; elle est payée maintenant par l'ombre du titre,
   qui ne coûte rien à ce qu'il y a autour. La descendance reste
   interdite, pour le jour où le découpage reviendrait. */
.ac-seuil .ac-titre *{text-shadow:none}
.ac-seuil .ac-titre .ac-titre__l{
  /* Deux flous, tous deux larges : un flou court et dense fait un biseau,
     pas une ombre — on lisait le titre comme gravé en relief. */
  /* TROIS COUCHES, ET C'EST LE NOMBRE MINIMUM depuis que le voile est
     parti. Le halo serré (8px) donne le contraste immédiat contre une
     toile claire ; les deux flous larges donnent la profondeur, et sans
     eux le halo seul dessinerait un liseré. Aucune n'a de décalage
     vertical fort : une ombre portée ferait du relief gravé. */
  text-shadow:
    0 0 8px rgba(3,18,34,.72),
    0 3px 22px rgba(3,18,34,.58),
    0 20px 62px rgba(3,18,34,.42);
}
.ac-seuil .ac-titre .ac-titre__l{display:block}
.ac-seuil .ac-titre .ac-titre__azur,
.ac-seuil .ac-titre .ac-titre__azur .ac-fente__i{color:#4d9bea}
/* La règle générale colorait le DERNIER mot du titre. Ici les deux lignes
   sont des mots : c'est la ligne, pas le rang, qui porte la couleur. */
.ac-seuil .ac-titre .ac-mot:last-child .ac-fente__i{color:inherit}

/* La sur-ligne était ancrée en absolu sous le titre de l'ancien héros.
   Dans une colonne, elle redevient un paragraphe : elle suit le titre. */
.ac-seuil .ac-hero__sur{
  position:static;
  margin:clamp(30px,5vh,64px) 0 0;
  /* Sans voile, une petite capitale bleu clair pouvait tomber sur une
     toile claire et s'y dissoudre : le halo sombre ne sépare que ce qui
     est franchement plus clair que lui. On monte donc la valeur du
     texte — c'est le contraste avec SON OMBRE qui le tient, pas sa
     couleur propre. */
  color:#cfe4ff;
  font-weight:700;
  font-size:calc(clamp(11px,1.05vw,17px) * var(--ac-zoom,1.15));
  letter-spacing:.10em;
  text-transform:uppercase;
  text-shadow:0 0 6px rgba(3,18,34,.8), 0 2px 16px rgba(3,18,34,.66), 0 10px 34px rgba(3,18,34,.45);
}

.ac-seuil .ac-hero__bas{
  position:static;width:auto;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(18px,2.4vw,34px);
  margin-top:clamp(26px,4.4vh,52px);
}

/* Les deux chevrons de la maquette. Le premier descend d'une course de
   seuil ; le second est un lien vers le catalogue. Ils ont une aire de
   toucher de 48 px, que le dessin ne montre pas. */
.ac-seuil__fleches{display:flex;align-items:center;gap:clamp(8px,1.2vw,18px)}
.ac-seuil__fleche{
  display:grid;place-items:center;
  width:52px;height:52px;
  color:#2f7fd6;background:none;border:0;padding:0;
  cursor:pointer;
  transition:transform .35s cubic-bezier(.16,1,.3,1),color .3s ease;
}
.ac-seuil__fleche svg{width:34px;height:34px;display:block}
.ac-seuil__fleche:hover,.ac-seuil__fleche:focus-visible{color:#7fb6f0}
.ac-seuil__fleche--bas:hover,.ac-seuil__fleche--bas:focus-visible{transform:translateY(4px)}
.ac-seuil__fleche--suite:hover,.ac-seuil__fleche--suite:focus-visible{transform:translateX(4px)}

/* Le portail garde son dessin, sur fond clair cette fois. */
.ac-seuil .ac-hero__portal{
  color:#f4f8fc;
  border-color:rgba(226,240,253,.42);
  background:rgba(6,28,52,.30);
}
.ac-seuil .ac-hero__portal:hover,
.ac-seuil .ac-hero__portal:focus-visible{background:#004aad;border-color:#7fb6f0}

/* --- Téléphones et tablettes ----------------------------------------
   Le cadre passe au centre et le texte descend dessous : à cette largeur,
   deux colonnes donneraient un titre de vingt pixels. La poussée devient
   verticale — le cadre grandit, le texte est chassé vers le bas. */
@media (max-width:900px){
  .ac-seuil__texte{
    left:var(--ac-marge);right:var(--ac-marge);
    top:0;bottom:0;
    justify-content:center;
  }
  /* SEPT SIGNES DANS UNE LARGEUR DE TÉLÉPHONE.
     « COULEUR » mesure un peu plus de quatre cadratins : au-delà d'un
     quatre-virgule-six-ième de la colonne, le mot sort de l'écran. La
     valeur est calculée sur le mot le plus long, pas ajustée à l'œil. */
  .ac-seuil .ac-titre{font-size:min(104px,calc(100cqi / 4.6))}
  .ac-seuil .ac-hero__sur{margin-top:clamp(14px,2.4vh,24px);letter-spacing:.07em}
  .ac-seuil .ac-hero__bas{margin-top:clamp(16px,2.6vh,30px);gap:16px}
  .ac-seuil__fleche{width:46px;height:46px}
  .ac-seuil__fleche svg{width:28px;height:28px}
}

/* Mouvement refusé : la scène perd sa course, l'écran cesse d'être
   collant, et le cadre reste ouvert à sa taille de départ. Une page,
   simplement. */
@media (prefers-reduced-motion:reduce){
  .ac-seuil{height:auto}
  .ac-seuil__ecran{position:relative;height:100svh}
  .ac-seuil__fleche{transition:none}
}

/* =====================================================================
   LA GALERIE ENCADRÉE — « Une sélection »
   ---------------------------------------------------------------------
   Le cadre est au centre, immobile ; les toiles défilent horizontalement
   et viennent s'y loger l'une après l'autre. La feuille de style ne pose
   ici que les PLACES : la scène, l'écran collant, la file, le cartel.
   Les tailles — celle de chaque toile, celle du cadre qui s'y adapte —
   sont écrites par `cadre-heros.js`, seul à savoir où en est la course.

   `--gal-n` est écrit dans le balisage : le nombre de toiles commande la
   longueur de la section, et rien d'autre. Une œuvre de plus dans le
   fonds allonge la course d'un pas, sans toucher à cette feuille.
   ===================================================================== */
.ac-galerie{
  --gal-pas:92vh;
  position:relative;
  height:calc(100svh - var(--nav-h,0px) + (var(--gal-n,8) - 1) * var(--gal-pas));
}
@media (max-width:900px){ .ac-galerie{--gal-pas:76vh} }

.ac-galerie__ecran{
  position:sticky;top:var(--nav-h,0px);
  height:calc(100svh - var(--nav-h,0px));
  overflow:hidden;
}

/* La tête reste en haut pendant toute la traversée : c'est le cartouche
   de la salle, il n'a aucune raison de défiler avec les toiles. */
.ac-galerie__tete{
  position:absolute;z-index:3;
  left:var(--ac-marge);right:var(--ac-marge);
  top:clamp(24px,5vh,66px);
  pointer-events:none;
}
.ac-galerie__tete::before,.ac-galerie__tete::after,
.ac-galerie__tete h2::after,.ac-galerie__tete h2::before{content:none;display:none}
.ac-galerie__tete{border:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px clamp(16px,2.4vw,44px)}
/* Le cartouche de salle ne doit pas concurrencer la toile : il est réduit
   au tiers du corps qu'il a ailleurs sur la page, et il ne prend qu'une
   ligne. Un titre de section en cent pixels au-dessus d'un cadre finit
   toujours par se retrouver dedans. */
.ac-galerie__tete h2{
  margin:0;border:0;font-size:calc(clamp(19px,1.9vw,32px) * var(--ac-zoom-titre,1.08));
  letter-spacing:-.01em;
}
.ac-galerie__tete p{margin:0;max-width:44ch;font-size:calc(clamp(12px,.9vw,14.5px) * var(--ac-zoom,1.15))}

/* LE COMPTEUR DE SALLE.
   ---------------------------------------------------------------------
   Deux nombres et un trait : le rang de la toile encadrée, le total, et
   l'avancement de la course entre les deux. Il tient sur une ligne et il
   se lit sans être regardé — c'est tout ce qu'on demande à un repère.

   La jauge est mise à l'échelle en `transform` depuis le bord gauche :
   animer une largeur soixante fois par seconde recalculerait la ligne à
   chaque image. */
.ac-galerie__compte{
  display:flex;align-items:center;gap:clamp(8px,.9vw,14px);
  margin:clamp(16px,2.4vh,30px) 0 0;
  font-family:'Archivo',system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
  color:var(--ac-encre-2);
}
.ac-galerie__compte b{
  font-weight:700;letter-spacing:.02em;color:var(--ac-encre);
  font-size:calc(clamp(15px,1.15vw,20px) * var(--ac-zoom,1.15));
}
.ac-galerie__compte span{
  font-weight:500;
  font-size:calc(clamp(11px,.82vw,13.5px) * var(--ac-zoom,1.15));
  letter-spacing:.08em;
}
.ac-galerie__compte i{
  display:block;flex:1 1 auto;max-width:clamp(70px,9vw,150px);
  height:1px;background:var(--ac-trait);overflow:hidden;
}
.ac-galerie__compte i s{
  display:block;height:100%;width:100%;
  background:var(--ac-bleu);
  transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
}

@media (max-width:900px){
  /* Le bloc est placé APRÈS les règles de base du cartouche : à
     spécificité égale, c'est l'ordre du fichier qui tranche. */

  /* LE CARTOUCHE EST POUSSÉ PAR LA TOILE.
     ------------------------------------------------------------------
     Sur un grand écran, le titre de salle peut rester cloué en haut :
     il y a de la place entre lui et le cadre, et on lit les deux comme
     deux choses distinctes. Sur un téléphone il n'y a plus de place —
     le cadre monte jusqu'à lui, et selon le format de l'œuvre le titre
     se retrouvait à côté de la toile, voire dessous : on ne savait plus
     ce qu'il annonçait.

     Il est donc accroché au BORD SUPÉRIEUR DU CADRE, avec les mêmes
     variables que celles qui dessinent la moulure. Il monte et descend
     avec elle : quelle que soit l'œuvre encadrée, il est toujours juste
     au-dessus d'elle, et c'est la toile qui le pousse.

     Le `max()` est le garde-fou : sur un portrait très haut, le cadre
     remonte assez pour faire sortir le titre par le haut de l'écran.
     En-deçà de ce seuil, le titre cesse de suivre et laisse le cadre
     s'approcher. */
  .ac-galerie__tete{
    top:max(96px, calc(50% - var(--gal-ch,40vh)/2 - var(--gal-moul,24px) - clamp(14px,2.4vh,26px)));
    transform:translateY(-100%);
    display:block;text-align:center;
  }
  .ac-galerie__tete h2{font-size:calc(clamp(20px,5.4vw,27px) * var(--ac-zoom-titre,1.08))}
  .ac-galerie__tete p{
    margin:6px auto 0;max-width:34ch;
    font-size:calc(clamp(11.5px,3vw,13px) * var(--ac-zoom,1.15));
    line-height:1.35;
  }
  .ac-galerie__compte{justify-content:center;margin-top:clamp(10px,1.6vh,18px)}
  .ac-galerie__compte i{flex:0 0 auto;width:clamp(48px,16vw,90px)}
}

/* LE CARTOUCHE EST UN BANDEAU, PAS UNE COLONNE.
   ---------------------------------------------------------------------
   Il a occupé la colonne de gauche pendant une version, le cadre étant
   calé à droite. C'est retiré : le cadre est revenu au centre (voir
   `cadre-heros.js`), et un titre de section n'a plus à se tenir à côté
   de lui. Il repasse donc en haut, sur toute la largeur — le cartouche
   d'une salle, écrit au-dessus de l'accrochage.

   Le titre, le sous-titre et le compteur tiennent sur une ligne tant
   qu'ils le peuvent, et se replient sans qu'aucune largeur ne soit
   écrite : c'est `flex-wrap` qui décide, pas une valeur devinée. */
@media (min-width:901px){
  .ac-galerie__tete{
    display:flex;flex-wrap:wrap;align-items:baseline;
    gap:10px clamp(20px,3vw,56px);
    text-align:left;
  }
  .ac-galerie__tete h2{
    font-size:calc(clamp(22px,2.5vw,42px) * var(--ac-zoom-titre,1.08));
    letter-spacing:-.02em;
  }
  .ac-galerie__tete p{max-width:40ch}
  /* Le compteur part à l'opposé du titre : les deux bouts du bandeau
     tenus, on lit une ligne de cartel et non un paquet de mots. */
  .ac-galerie__compte{margin:0 0 0 auto}
}

/* LA FILE. Elle est centrée verticalement et son origine est le bord
   gauche de l'écran : le module la translate pour amener au centre la
   toile qu'il encadre. `align-items:center` garde tous les formats sur
   le même axe — c'est la ligne d'accrochage d'une cimaise. */
.ac-galerie__piste{
  list-style:none;margin:0;padding:0;
  position:absolute;left:0;top:50%;
  display:flex;align-items:center;
  gap:var(--gal-jeu,120px);
  transform:translate3d(0,-50%,0);
  will-change:transform;
}
.ac-galerie__toile{
  position:relative;flex:0 0 auto;margin:0;
  transition:none;
}
/* LA FEUILLURE PORTE UNE OMBRE SUR LA TOILE.
   Sur un cadre réel, l'œuvre est en retrait de quelques millimètres : le
   bois lui projette dessus un liseré d'ombre, plus dense en haut. C'est
   ce liseré — pas le rendu de la moulure — qui fait qu'on voit une toile
   DANS un cadre plutôt qu'une image à côté d'un dessin de cadre. */
.ac-galerie__toile::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:
    inset 0 14px 22px -14px rgba(6,20,38,.62),
    inset 0 -8px 16px -12px rgba(6,20,38,.34),
    inset 10px 0 18px -14px rgba(6,20,38,.34),
    inset -10px 0 18px -14px rgba(6,20,38,.34);
  opacity:var(--k,0);
}
.ac-galerie__toile img{
  display:block;width:100%;height:100%;
  object-fit:cover;
  box-shadow:0 26px 60px -34px rgba(8,24,44,.62);
}

/* LE CARTEL VOYAGE AVEC SA TOILE.
   Il est posé sous elle, dans la file : il n'y a donc jamais de doute sur
   l'œuvre qu'il décrit, et rien à synchroniser. Il s'éteint avec elle —
   `--k` vaut 1 au centre du cadre et 0 à une toile de distance. */
.ac-galerie__cartel{
  /* Sous la toile ET sous la moulure : le cartel était à ras de l'œuvre,
     donc à moitié caché par le bas du cadre. Il se pose maintenant après
     le bois, comme une étiquette de cimaise. */
  position:absolute;left:50%;transform:translateX(-50%);
  width:max(240px,100%);
  top:calc(100% + var(--gal-moul,40px) + clamp(12px,2vh,24px));
  text-align:center;
  opacity:var(--k,0);
  transition:opacity .18s linear;
  pointer-events:auto;
}
.ac-galerie__cartel a{text-decoration:none;color:inherit;display:block}
.ac-galerie__cartel b{
  display:block;
  font-family:'Playfair Display',Georgia,serif;font-weight:600;
  font-size:calc(clamp(16px,1.4vw,23px) * var(--ac-zoom,1.15));
  color:var(--ac-encre);letter-spacing:0;
}
.ac-galerie__cartel i{
  display:block;margin-top:3px;font-style:normal;
  font-size:calc(clamp(11px,.85vw,13.5px) * var(--ac-zoom,1.15));
  color:var(--ac-encre-2);
}
/* Le filet, entre ce qu'est l'œuvre et ce qu'elle coûte. Il porte la
   couleur qui domine réellement la toile : c'est ce qui rattache le prix à
   l'image plutôt qu'à une fiche. Même dispositif que les cartes du
   catalogue — un seul vocabulaire pour tout le site. */
.ac-galerie__filet{
  display:block;height:2px;width:min(190px,58%);
  margin:12px auto 0;
  background:linear-gradient(90deg,transparent,var(--ac-c,#004aad),transparent);
  opacity:.9;
}
.ac-galerie__cartel em{
  display:inline-block;margin-top:10px;font-style:normal;font-weight:700;
  font-size:calc(clamp(11px,.85vw,13.5px) * var(--ac-zoom,1.15));
  color:var(--ac-bleu);letter-spacing:.04em;
}
.ac-galerie__cartel a:hover b{color:var(--ac-bleu)}

.ac-galerie__gl{
  position:absolute;inset:0;z-index:2;
  width:100%;height:100%;
  pointer-events:none;
}

/* Repli : pas de WebGL, ou mouvement refusé. Le cadre redevient une
   bordure d'image posée autour de la toile courante ; sans JavaScript du
   tout, les toiles s'alignent au fil du document et se lisent une à une. */
.ac-galerie.is-repli .ac-galerie__ecran::before{
  content:'';position:absolute;z-index:2;pointer-events:none;
  left:calc(var(--gal-axe,50%) - var(--gal-cw,40vw)/2 - var(--gal-moul,40px));
  top:calc(50% - var(--gal-ch,40vh)/2 - var(--gal-moul,40px));
  width:calc(var(--gal-cw,40vw) + var(--gal-moul,40px)*2);
  height:calc(var(--gal-ch,40vh) + var(--gal-moul,40px)*2);
  box-sizing:border-box;
  border:var(--gal-moul,40px) solid transparent;
  border-image:url('../media/cadre-bordure.webp') 50 stretch;
}
.ac-galerie.is-fige{height:auto}
.ac-galerie.is-fige .ac-galerie__ecran{position:relative;height:auto;overflow:visible;padding:clamp(30px,6vh,70px) 0}
.ac-galerie.is-fige .ac-galerie__piste{
  position:relative;top:auto;transform:none;
  flex-wrap:wrap;justify-content:center;gap:clamp(24px,4vw,64px) clamp(20px,3vw,48px);
}
.ac-galerie.is-fige .ac-galerie__toile{width:min(38vw,340px)!important;height:auto!important}
.ac-galerie.is-fige .ac-galerie__toile img{height:auto}
.ac-galerie.is-fige .ac-galerie__cartel{position:relative;top:auto;opacity:1;margin-top:12px}
.ac-galerie.is-fige .ac-galerie__gl{display:none}

@media (prefers-reduced-motion:reduce){
  .ac-galerie{height:auto}
  .ac-galerie__ecran{position:relative;height:auto;overflow:visible;padding:clamp(30px,6vh,70px) 0}
  .ac-galerie__piste{position:relative;top:auto;transform:none;flex-wrap:wrap;justify-content:center;
    gap:clamp(24px,4vw,64px) clamp(20px,3vw,48px)}
  .ac-galerie__toile{width:min(38vw,340px)!important;height:auto!important}
  .ac-galerie__cartel{position:relative;top:auto;opacity:1;margin-top:12px}
  .ac-galerie__gl{display:none}
}

/* =====================================================================
   LE MANIFESTE ARRIVE TOUT DE SUITE
   ---------------------------------------------------------------------
   Il portait un retrait de deux cent quarante pixels, hérité d'une page
   où il ouvrait le corps du document. Derrière un seuil qui vient de
   remonter, ce retrait s'ajoutait au dernier écran vide de la course :
   presque une page de bleu avant la première phrase. Le cadre sort
   maintenant au dernier pixel de sa course, et le manifeste commence
   juste après.
   ===================================================================== */
.ac-suite > .ac-manifeste{padding-top:clamp(28px,5vh,68px)}
.ac-suite > .ac-manifeste::before{margin-bottom:clamp(16px,2.6vh,32px)}

/* =====================================================================
   LE BAS DE LA PAGE DU PEINTRE — remis en ordre
   ---------------------------------------------------------------------
   Trois blocs se suivaient sans hiérarchie : quatre jalons posés à nu,
   trois pastilles de matière orphelines juste dessous, puis un titre
   centré au milieu d'une page ferrée à gauche, suivi de trois colonnes
   séparées par des traits verticaux. Chacun était correct ; ensemble ils
   ne disaient pas dans quel ordre les lire.

   Ce qui change : chaque bloc reçoit son intitulé, et l'intitulé est
   toujours au même endroit — en haut, à gauche, en petites capitales
   bleues, sous un filet. Trois blocs, trois filets, un seul rythme. Le
   titre cesse d'être centré : sur une page ferrée à gauche, un titre
   centré ne se lit pas comme une emphase, il se lit comme une erreur de
   gabarit.
   ===================================================================== */
.ac-jalons{
  display:flex;flex-direction:column;
  gap:clamp(26px,4vh,52px);
  margin-top:clamp(34px,5vh,64px);
}
.ac-jalons__tete{
  display:block;margin:0 0 clamp(14px,2vh,22px);
  padding-top:14px;border-top:1px solid var(--ac-trait);
  font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ac-bleu);
}
.ac-frise{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(18px,2.4vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.ac-frise > li{
  display:flex;flex-direction:column;gap:6px;
  padding-top:12px;border-top:1px solid var(--ac-trait);
}
.ac-frise > li b{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:600;font-size:calc(15px * var(--ac-zoom,1.15));
  color:var(--ac-bleu);letter-spacing:0;
}
.ac-frise > li span{
  font-size:calc(13.5px * var(--ac-zoom,1.15));
  line-height:1.5;color:var(--ac-encre-2);
}
.ac-matieres{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:0;padding:0;
}
.ac-matieres span{
  padding:7px 16px;border:1px solid var(--ac-trait);border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ac-encre-2);background:rgba(255,255,255,.42);
}

/* --- « Rien de ce que vous croisez n'existe en double » -------------- */
.ac-chap{margin-top:clamp(46px,7vh,96px)}
.ac-chap > h2{
  text-align:left;text-wrap:balance;
  max-width:22ch;margin:0 0 clamp(26px,4vh,52px);
  padding-top:16px;border-top:1px solid var(--ac-trait);
}
.ac-points{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(20px,2.6vw,46px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  counter-reset:pt;
}
.ac-points > li{
  display:flex;flex-direction:column;gap:8px;
  padding:0;border:0;border-top:1px solid var(--ac-trait);padding-top:16px;
  position:relative;
}
.ac-points > li::before{
  counter-increment:pt;content:counter(pt,decimal-leading-zero);
  font-family:'Playfair Display',Georgia,serif;
  font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--ac-bleu);
}
.ac-points > li em{
  font-style:normal;font-weight:700;
  font-size:calc(14.5px * var(--ac-zoom,1.15));
  letter-spacing:.01em;color:var(--ac-encre);
}
.ac-points > li span{
  font-size:calc(13.5px * var(--ac-zoom,1.15));
  line-height:1.6;color:var(--ac-encre-2);
}
@media (max-width:640px){
  .ac-chap > h2{max-width:none}
}

/* =====================================================================
   DIRECTION 2026-09 — L'ATELIER (le peintre, réécrit de zéro)
   ---------------------------------------------------------------------
   La section du peintre empilait quatre rectangles de verre dans un
   rectangle de verre. Chaque bloc était juste ; l'ensemble ne racontait
   rien. On repart d'une page de catalogue d'exposition :

       ─── LE PEINTRE ───
       Un regard, une passion, un héritage

       [ portrait accroché ]      le récit, sur une mesure lisible
       cartel : nom / qualité     la citation, tenue par un filet
       filet de couleur           la porte vers sa page
       matières

       ────────•──────────•──────────•──────────•──────── la rampe
       1957        À 25 ans     Gênes, Rome    Aujourd'hui

       01 Peint à la main │ 02 Tout est dit… │ 03 Certificat…

   POURQUOI DE NOUVELLES CLASSES.
   Vingt surcharges se sont accumulées sur `.ac-peintre` au fil des
   versions — tailles, grilles, bordures, media queries qui se répondent
   sur six cents lignes. Les neutraliser une à une aurait produit une
   troisième couche par-dessus les deux autres. Le préfixe `ac-atelier`
   n'est touché par aucune : ce qui est écrit ici est exactement ce qui
   s'affiche.

   POURQUOI PLUS AUCUN PANNEAU.
   La lisibilité venait d'une plaque de verre : un rectangle, avec une
   bordure et un angle arrondi, posé sur le pigment. Elle vient
   maintenant d'un HALO — une clarté large dont les bords se dissolvent
   dans le fond. On voit de la lumière sur un mur, pas un calque. Les
   seules lignes de la section sont des filets d'un pixel.
   ===================================================================== */

.ac-atelier{
  position:relative;
  padding:var(--ac-section) 0;
}

/* LE HALO EST UNE DALLE BLANCHE FLOUTÉE, PAS UN DÉGRADÉ RADIAL.
   Le dégradé radial était l'idée évidente, et il était faux : un
   `radial-gradient(112% 80% …)` a des rayons plus grands que la boîte, si
   bien que la teinte n'atteint jamais zéro à l'intérieur — le halo se
   terminait donc sur les ARÊTES de son propre rectangle, exactement ce
   qu'on cherchait à supprimer. Un masque n'y changeait rien : il souffrait
   de la même géométrie.

   Une surface pleine passée au flou n'a pas ce défaut. Elle épouse la
   forme de ce qu'elle éclaire — un bloc large et bas ici, une colonne
   ailleurs — et ses bords se dissolvent sur une cinquantaine de pixels,
   dans toutes les directions, sans une seule ligne droite. */
.ac-atelier::before{
  content:'';position:absolute;inset:-1vh -2vw;z-index:0;pointer-events:none;
  border-radius:clamp(80px,9vw,200px);
  background:rgba(255,255,255,.84);
  filter:blur(56px);
}
html.cda-dark .ac-atelier::before{background:rgba(8,13,20,.82)}
.ac-atelier__in{
  position:relative;z-index:1;
  max-width:1340px;margin-inline:auto;
  padding-inline:var(--ac-marge);
}

/* ═══ L'OUVERTURE DU CHAPITRE ═══ */
.ac-atelier__tete{
  text-align:center;
  margin-bottom:clamp(42px,6vh,88px);
}
.ac-atelier__oeil{
  display:inline-flex;align-items:center;gap:clamp(12px,1.2vw,20px);
  font-family:'Archivo',system-ui,sans-serif;
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ac-bleu,#004aad);
}
.ac-atelier__oeil::before,
.ac-atelier__oeil::after{
  content:'';width:clamp(26px,4vw,74px);height:1px;background:currentColor;opacity:.55;
}
.ac-atelier__oeil::before{background:linear-gradient(90deg,transparent,currentColor)}
.ac-atelier__oeil::after{background:linear-gradient(90deg,currentColor,transparent)}

.ac-atelier__tete h2{
  margin:clamp(14px,1.6vh,22px) 0 0;
  font-family:'Playfair Display',Georgia,serif;
  font-weight:500;
  font-size:clamp(28px,3.7vw,60px);
  line-height:1.06;letter-spacing:-.012em;
  color:var(--ac-encre,#0d1117);
  text-wrap:balance;
}
.ac-atelier__tete h2 em{font-style:italic;color:var(--ac-bleu,#004aad)}

/* ═══ LE CORPS : L'ACCROCHAGE ET LE RÉCIT ═══
   La colonne du portrait est la plus étroite des deux. Un portrait qui
   fait la moitié de la page devient le sujet ; ici le sujet est ce qu'il
   peint, et le visage n'a qu'à dire à qui l'on a affaire. */
.ac-atelier__corps{
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(0,1.06fr);
  gap:clamp(36px,4.6vw,88px);
  align-items:start;
}

.ac-atelier__mur{margin:0}
.ac-atelier__accroche{display:block;position:relative}

/* Il est ACCROCHÉ, pas incrusté : la lumière passe au-dessus, l'ombre
   tombe en dessous et vers la droite — la même que sous les toiles de
   « Une sélection ». Deux ombres : une courte qui colle l'œuvre au mur,
   une longue et molle qui l'en décolle. */
.ac-atelier__accroche img{
  display:block;width:100%;
  aspect-ratio:1/1.08;object-fit:cover;object-position:50% 30%;
  border-radius:3px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55),
    0 7px 16px -10px rgba(6,26,50,.42),
    0 46px 74px -38px rgba(6,26,50,.66);
}
html.cda-dark .ac-atelier__accroche img{
  box-shadow:0 46px 80px -40px rgba(0,0,0,.9);
}

/* Le cartel. Même langage que celui des œuvres : le nom, la qualité, le
   filet de couleur, la matière. C'est ce qui présente le peintre comme
   une pièce de la galerie sans avoir à l'écrire. */
.ac-atelier__cartel{
  display:grid;gap:5px;
  margin-top:clamp(16px,2vh,26px);
  max-width:36ch;
}
.ac-atelier__cartel b{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:600;
  font-size:clamp(17px,1.35vw,23px);
  line-height:1.2;
  color:var(--ac-encre,#0d1117);
}
.ac-atelier__cartel i{
  font-style:normal;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ac-encre-2,#333d48);
}
.ac-atelier__filet{
  display:block;height:2px;width:min(200px,72%);
  margin:9px 0 3px;
  background:linear-gradient(90deg,var(--ac-bleu,#004aad),rgba(0,74,173,0));
  opacity:.9;
}
.ac-atelier__cartel em{
  font-style:normal;
  font-size:13px;letter-spacing:.05em;
  color:var(--ac-encre-2,#333d48);
}

/* ═══ LE RÉCIT ═══
   Mesure bornée à cinquante-deux signes : au-delà, l'œil perd la ligne
   suivante et le portrait d'à côté n'y peut rien. */
.ac-atelier__dire{max-width:none}
.ac-atelier__dire p{
  margin:0 0 1.15em;
  font-family:'Archivo',system-ui,sans-serif;
  font-size:clamp(15.5px,1.12vw,18.5px);
  line-height:1.76;
  color:var(--ac-encre-2,#333d48);
  max-width:52ch;
}
.ac-atelier__lead{
  font-size:clamp(17.5px,1.5vw,24px) !important;
  line-height:1.55 !important;
  color:var(--ac-encre,#0d1117) !important;
  margin-bottom:1.05em !important;
}

/* Sa voix, tenue par un filet vertical dégradé — le même geste que le
   cartel, tourné d'un quart de tour. */
.ac-atelier__voix{
  position:relative;
  margin:clamp(28px,3.6vh,48px) 0 0;
  padding-left:clamp(20px,2vw,36px);
}
.ac-atelier__voix::before{
  content:'';position:absolute;left:0;top:.22em;bottom:.9em;width:2px;
  background:linear-gradient(180deg,var(--ac-bleu,#004aad),rgba(0,74,173,0));
}
.ac-atelier__voix p{
  margin:0;max-width:32ch;
  font-family:'Playfair Display',Georgia,serif;
  font-style:italic;font-weight:500;
  font-size:clamp(19px,1.85vw,31px);
  line-height:1.4;
  color:var(--ac-encre,#0d1117);
}
.ac-atelier__voix p::before{content:'« '}
.ac-atelier__voix p::after{content:' »'}
.ac-atelier__voix cite{
  display:block;margin-top:12px;
  font-style:normal;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ac-encre-2,#333d48);
}

/* La porte. Un lien souligné, pas un bouton plein : à côté d'un portrait,
   un rectangle bleu est la seule chose qu'on regarde. */
.ac-atelier__porte{
  display:inline-flex;align-items:center;gap:12px;
  margin-top:clamp(28px,3.4vh,46px);
  padding-bottom:9px;
  font-family:'Archivo',system-ui,sans-serif;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ac-bleu,#004aad);text-decoration:none;
  border-bottom:1px solid rgba(0,74,173,.3);
  transition:border-color .3s ease,gap .35s cubic-bezier(.16,1,.3,1);
}
.ac-atelier__porte i{font-style:normal;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.ac-atelier__porte:hover{border-bottom-color:var(--ac-bleu,#004aad)}
.ac-atelier__porte:hover i{transform:translateX(7px)}
.ac-atelier__porte:focus-visible{outline:2px solid var(--ac-bleu,#004aad);outline-offset:6px}
html.cda-dark .ac-atelier__porte{color:#8fc8ff;border-bottom-color:rgba(143,200,255,.32)}

/* ═══ LA RAMPE — quatre repères suspendus à un filet ═══
   La ligne de niveau d'un accrochage, avec ses points. La pastille est
   cerclée de la couleur du halo : le filet passe derrière elle sans la
   traverser, comme un clou sur une cimaise. */
.ac-atelier__frise{
  list-style:none;margin:clamp(48px,6.2vh,92px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.4vw,48px);
  border-top:1px solid var(--ac-trait,rgba(13,17,23,.14));
}
.ac-atelier__frise li{
  position:relative;
  padding-top:clamp(22px,2.8vh,36px);
}
.ac-atelier__frise li::before{
  content:'';position:absolute;left:0;top:-4px;
  width:7px;height:7px;border-radius:50%;
  background:var(--ac-bleu,#004aad);
  box-shadow:0 0 0 5px rgba(255,255,255,.85);
}
html.cda-dark .ac-atelier__frise li::before{box-shadow:0 0 0 5px rgba(10,15,22,.9)}
.ac-atelier__frise b{
  display:block;margin-bottom:7px;
  font-family:'Playfair Display',Georgia,serif;font-weight:600;
  font-size:clamp(18px,1.6vw,27px);line-height:1.1;
  color:var(--ac-encre,#0d1117);
}
.ac-atelier__frise span{
  display:block;max-width:27ch;
  font-family:'Archivo',system-ui,sans-serif;
  font-size:clamp(13px,.98vw,15.5px);line-height:1.6;
  color:var(--ac-encre-2,#333d48);
}

/* ═══ LES TROIS ENGAGEMENTS, EN PIED DE CHAPITRE ═══
   Séparés par des filets qui s'éteignent en haut et en bas : trois
   colonnes de texte, aucune boîte. */
.ac-atelier__gages{
  list-style:none;margin:clamp(48px,6.5vh,92px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  counter-reset:gage;
}
.ac-atelier__gages li{
  counter-increment:gage;position:relative;
  padding:0 clamp(22px,2.6vw,54px);
}
.ac-atelier__gages li:first-child{padding-left:0}
.ac-atelier__gages li:last-child{padding-right:0}
.ac-atelier__gages li + li::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,
    transparent,var(--ac-trait,rgba(13,17,23,.14)) 16%,
    var(--ac-trait,rgba(13,17,23,.14)) 84%,transparent);
}
.ac-atelier__gages em{
  display:block;margin-bottom:9px;font-style:normal;
  font-family:'Archivo',system-ui,sans-serif;font-weight:600;
  font-size:clamp(15px,1.15vw,18.5px);line-height:1.3;
  color:var(--ac-encre,#0d1117);
}
.ac-atelier__gages em::before{
  content:'0' counter(gage);
  display:block;margin-bottom:11px;
  font-weight:400;font-size:11px;letter-spacing:.24em;
  color:var(--ac-bleu,#004aad);opacity:.8;
}
.ac-atelier__gages span{
  display:block;max-width:32ch;
  font-family:'Archivo',system-ui,sans-serif;
  font-size:clamp(13px,.98vw,15.5px);line-height:1.62;
  color:var(--ac-encre-2,#333d48);
}

/* ═══ ÉCRANS ÉTROITS ═══
   Une seule colonne, dans l'ordre de lecture du balisage : le portrait
   d'abord — c'est lui qui donne envie de lire le reste — puis le récit,
   puis la rampe, qui se replie en deux colonnes et garde ses points. */
@media (max-width:1000px){
  .ac-atelier__corps{grid-template-columns:1fr;gap:clamp(30px,5vh,48px)}
  .ac-atelier__mur{max-width:440px}
  .ac-atelier__dire{max-width:none}
  .ac-atelier__frise{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vh,36px) clamp(18px,3vw,40px)}
  .ac-atelier__frise li:nth-child(n+3){
    padding-top:clamp(22px,2.8vh,36px);
    border-top:1px solid var(--ac-trait,rgba(13,17,23,.14));
    margin-top:clamp(4px,1vh,10px);
  }
  .ac-atelier__gages{grid-template-columns:1fr;gap:clamp(24px,3.4vh,40px)}
  .ac-atelier__gages li{padding:0}
  .ac-atelier__gages li + li::before{
    left:0;right:0;top:calc(clamp(24px,3.4vh,40px) / -2);bottom:auto;
    width:auto;height:1px;
    background:linear-gradient(90deg,
      var(--ac-trait,rgba(13,17,23,.14)),transparent 78%);
  }
}
@media (max-width:620px){
  .ac-atelier__frise{grid-template-columns:1fr}
  .ac-atelier__frise li:nth-child(n+2){
    border-top:1px solid var(--ac-trait,rgba(13,17,23,.14));
    margin-top:clamp(4px,1vh,10px);
  }
  .ac-atelier__voix p{font-size:clamp(18px,5vw,24px)}
}

/* Sans `backdrop-filter`, le halo reste un dégradé blanc : moins profond,
   parfaitement lisible — et toujours sans bord. */

/* =====================================================================
   LA LIGNÉE DU CADRE — les sections refaites (préfixe `ac2-`)
   =====================================================================
   POURQUOI UN PRÉFIXE NEUF.
   Les classes de l'ancienne page portaient vingt versions de surcharges
   empilées les unes sur les autres : `.ac-atelier` à lui seul était
   redéfini à six endroits de cette feuille. Repartir de leurs noms, c'est
   hériter de tout ça. Les sections refaites ont donc leur propre espace
   de noms — aucune règle ancienne ne s'y applique, et aucune règle
   nouvelle ne casse ce qui reste.

   LE PRINCIPE : TOUT EST ACCROCHÉ.
   Le site a un objet signature — le cadre du seuil. Le reste de la page
   en descend : chaque bloc de contenu est présenté comme une toile au
   mur, avec sa marie-louise autour et sa feuillure qui porte une ombre
   sur ce qu'elle encadre. Ce n'est pas une décoration ajoutée après
   coup : c'est le seul vocabulaire de la page, et c'est ce qui fait
   qu'elle tient ensemble sans avoir à le dire.

   Aucune bordure grise d'un pixel, aucune ombre noire portée : les
   séparations sont des filets d'encre très diluée, les ombres sont
   larges, basses et bleutées — la lumière d'une salle, pas celle d'un
   projecteur.
   ===================================================================== */

/* ═══════════════════════════════════════════════════════════════════════
   LE RYTHME VERTICAL N'EST PLUS CONSTANT
   ═══════════════════════════════════════════════════════════════════════
   Toutes les sections étaient séparées du MÊME grand blanc. C'est régulier,
   donc c'est plat : rien ne dit si l'on tourne la page ou si l'on continue
   la phrase. Or ces sections n'ont pas toutes le même rapport entre elles.

   Un intervalle raconte quelque chose : serré, il dit « ceci appartient à
   ce qui précède » ; large, il dit « on change de sujet ». Trois paliers
   suffisent, et chaque section déclare le sien.

   L'écart ENTRE deux sections est la somme du bas de l'une et du haut de
   l'autre : c'est pourquoi les valeurs sont posées séparément en haut et
   en bas, et non par une marge unique. Deux voisines qui se répondent
   ferment et ouvrent serré ; le vrai changement de sujet en ouvre une
   large contre une large.
   ═══════════════════════════════════════════════════════════════════════ */
.ac2{
  --ac2-r:clamp(14px,1.3vw,22px);       /* le rayon extérieur, une seule fois */
  --ac2-mat:10px;                        /* l'épaisseur de la marie-louise */
  --ac2-lent:cubic-bezier(.32,.72,0,1);  /* la seule courbe de la page */

  /* Les trois paliers. `serre` sert quand deux blocs se répondent,
     `ample` quand on change de sujet, `large` aux deux bouts de la page. */
  --ac2-serre:clamp(46px,7vh,96px);
  --ac2-ample:clamp(86px,13vh,180px);
  --ac2-large:clamp(110px,18vh,244px);

  position:relative;
  padding-block:var(--ac2-haut,var(--ac2-ample)) var(--ac2-bas,var(--ac2-ample));
}

/* 01 — LA SOURCE. Elle ouvre la page après le seuil : large en haut. En
   bas elle se termine par la rive, qui EST son illustration — l'écart
   avec elle doit donc être court, sinon le ruban se détache de la phrase
   qu'il illustre. */
.ac2-source{--ac2-haut:var(--ac2-large);--ac2-bas:var(--ac2-serre)}

/* 03 — CE QUI EST VENDU. Vraie rupture de sujet des deux côtés. */
.ac2-preuve{--ac2-haut:var(--ac2-large);--ac2-bas:var(--ac2-ample)}

/* 04 — LE PEINTRE. Il enchaîne sur les garanties — c'est la même idée
   continuée : qui signe ce qu'on vient de garantir. On resserre en haut. */
.ac2-peintre{--ac2-haut:var(--ac2-serre);--ac2-bas:var(--ac2-large)}

/* 05 — ENTRER. La fin de la page : on ne la sépare pas de ce qui précède,
   on la pose dessous, et on laisse de l'air avant le pied. */
.ac2-portes{--ac2-haut:var(--ac2-serre);--ac2-bas:var(--ac2-large)}
.ac2__in{
  max-width:1340px;margin-inline:auto;
  padding-inline:var(--ac-marge);
}

/* L'ŒIL DE SECTION. Une pastille, pas un mot posé : elle donne au titre
   un point de départ visuel, et le carré de moulure qui l'ouvre rappelle
   d'où vient le bleu. */
.ac2-oeil{
  display:inline-flex;align-items:center;gap:9px;
  margin:0 0 clamp(18px,2.6vh,34px);
  padding:6px 14px 6px 11px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--ac-bleu) 22%,transparent);
  background:color-mix(in srgb,var(--ac-bleu) 5%,transparent);
  font-family:'Archivo',system-ui,sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ac-bleu);
}
.ac2-oeil::before{
  content:'';width:7px;height:7px;border-radius:2px;
  background:var(--ac-bleu);opacity:.85;
}

.ac2-titre{
  margin:0 0 clamp(16px,2.2vh,28px);
  font-family:'Playfair Display',Georgia,serif;font-weight:600;
  font-size:calc(clamp(28px,3.8vw,62px) * var(--ac-zoom-titre,1.08));
  line-height:1.04;letter-spacing:-.022em;
  color:var(--ac-encre);
}
.ac2-titre em{font-style:italic;color:var(--ac-bleu)}

/* `:where()` ANNULE LA SPÉCIFICITÉ DE CE QU'IL CONTIENT.
   Écrite `.ac2 p`, cette règle pesait une classe DE PLUS que `.ac2-lead`
   et que la grande phrase de la source : le corps de texte gagnait
   contre les deux, et le titre de section s'affichait en dix-sept
   pixels. Avec `:where(p)`, la règle ne pèse que `.ac2` — toute classe
   posée ensuite reprend la main, ce qui est l'ordre attendu entre un
   réglage par défaut et une exception. */
.ac2 :where(p){font-size:calc(clamp(14px,1vw,17px) * var(--ac-zoom,1.15));line-height:1.72;color:var(--ac-encre-2)}

.ac2-lead{
  margin:0 0 clamp(18px,2.4vh,30px);max-width:46ch;
  font-size:calc(clamp(16.5px,1.35vw,23px) * var(--ac-zoom,1.15));
  line-height:1.58;color:var(--ac-encre);
}

/* Le filet de cartel, dans le bleu de la moulure. */
.ac2-filet{
  display:block;height:2px;width:min(170px,60%);margin:12px 0;
  background:linear-gradient(90deg,var(--ac-bleu),transparent);
  opacity:.8;
}

/* ---------------------------------------------------------------------
   01 — LA SOURCE
   Une seule phrase, ferrée à gauche, sur une colonne étroite. La colonne
   est bornée en CARACTÈRES et non en pixels : c'est la longueur de ligne
   qui fait qu'on lit une phrase d'un trait, pas la largeur de l'écran.
   --------------------------------------------------------------------- */
/* LA GRILLE. La phrase tient la colonne large, la ligne de matériaux la
   colonne étroite, et les deux sont ferrées sur LE MÊME BAS (`end`) : ce
   qui alignait mal quand la phrase changeait de nombre de lignes se cale
   tout seul, et le blanc se reporte en haut de la colonne courte — là où
   il fait respirer au lieu de trouer. */
.ac2-source__grille{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(26px,4vw,76px);
  align-items:end;
}
/* LE CORPS A ÉTÉ RAMENÉ DE 104 À 58 PIXELS DE HAUT DE FOURCHETTE.
   À 104, la phrase devenait une affiche : trois mots par ligne, un
   écran entier pour une idée, et le reste de la page paraissait petit
   ensuite. Ce qui lui donne son poids n'est pas sa taille mais le vide
   autour d'elle — donc on garde le vide et on rend la taille. */
.ac2-source__dit{
  margin:0;max-width:22ch;
  font-family:'Playfair Display',Georgia,serif;font-weight:600;
  font-size:calc(clamp(27px,3.5vw,58px) * var(--ac-zoom-titre,1.08));
  line-height:1.08;letter-spacing:-.026em;
  color:var(--ac-encre);
}
.ac2-source__dit em{font-style:italic;color:var(--ac-bleu)}
.ac2-source__sous{
  margin:0;max-width:38ch;
  padding-top:clamp(14px,1.9vh,22px);
  padding-bottom:.3em;                 /* rattrape le jambage sous la ligne de base */
  border-top:1px solid var(--ac-trait);
}

/* ---------------------------------------------------------------------
   LA CARTE ACCROCHÉE — deux enceintes concentriques
   La coque extérieure est la marie-louise ; le cœur est la toile. Le
   rayon intérieur est CALCULÉ à partir de l'extérieur moins l'épaisseur
   du passe-partout : deux rayons choisis à l'œil donnent des courbes qui
   ne sont pas concentriques, et ça se voit même sans savoir pourquoi.
   --------------------------------------------------------------------- */
/* LE LOGEMENT ET LA CARTE SONT DEUX ÉLÉMENTS, ET IL LE FAUT.
   Le module de profondeur écrit `transform` EN LIGNE, soixante fois par
   seconde. L'apparition, elle, est une transition CSS sur `transform`.
   Sur un même élément, le style en ligne gagne toujours : la carte
   n'aurait plus glissé en arrivant, elle aurait seulement fondu. Le
   logement porte donc la dérive, la carte porte l'arrivée — deux
   couches, deux transformations, aucune qui écrase l'autre. */
.ac2-slot{list-style:none;margin:0;padding:0;display:block;will-change:transform}

.ac2-carte{
  margin:0;padding:var(--ac2-mat);
  border-radius:var(--ac2-r);
  background:linear-gradient(160deg,#fbfaf6 0%,#f4f1e9 62%,#ece7dc 100%);
  box-shadow:
    inset 0 0 0 1px rgba(24,38,56,.07),
    0 30px 60px -44px rgba(9,34,62,.5);
  transition:transform .7s var(--ac2-lent), box-shadow .7s var(--ac2-lent);
}
.ac2-carte__in{
  position:relative;height:100%;
  /* Le chiffre reste en haut, le texte descend contre le bas : les trois
     titres tombent alors sur la même ligne quelle que soit la longueur
     des paragraphes, et le blanc qui reste est au même endroit dans les
     trois cartes — un blanc régulier se lit comme une respiration, un
     blanc qui varie se lit comme un oubli. */
  display:flex;flex-direction:column;
  padding:clamp(26px,2.6vw,44px) clamp(22px,2.2vw,38px) clamp(30px,3vw,46px);
  border-radius:calc(var(--ac2-r) - var(--ac2-mat));
  background:var(--ac-papier);
  /* LA FEUILLURE. Sur un cadre réel, l'œuvre est en retrait de quelques
     millimètres et le bois lui porte une ombre dessus, plus dense en
     haut. C'est ce liseré — et lui seul — qui fait qu'on voit un contenu
     DANS un cadre plutôt qu'un rectangle posé sur un autre. */
  box-shadow:
    inset 0 10px 18px -14px rgba(9,28,52,.5),
    inset 0 -5px 12px -12px rgba(9,28,52,.3),
    inset 8px 0 14px -14px rgba(9,28,52,.28),
    inset -8px 0 14px -14px rgba(9,28,52,.28);
}
@media (hover:hover){
  .ac2-carte:hover{
    transform:translateY(-5px);
    box-shadow:
      inset 0 0 0 1px rgba(24,38,56,.09),
      0 44px 74px -44px rgba(9,34,62,.55);
  }
}
/* ═══ LES CHIFFRES ONT ÉTÉ RETIRÉS DU BALISAGE ═══
   « 01 Pièce unique », « 02 Son certificat », « 03 Droit de l'atelier » :
   ce ne sont pas trois étapes, ce sont trois garanties PARALLÈLES. Un
   numéro annonce un ordre, et il n'y a pas d'ordre ici — on ne fait pas
   la deuxième après la première. Le repère promettait donc une lecture
   qu'on ne pouvait pas suivre, et il le faisait en très gros.

   La règle reste, vide et commentée, pour que la raison soit lisible ici
   plutôt que dans l'historique d'un fichier. */

/* Le titre montait le reste de la carte vers le bas par `margin:auto 0`
   sous le chiffre ; sans chiffre au-dessus, il n'a plus rien à pousser et
   c'est lui qui prend le haut. */
.ac2-carte h3:first-child{margin-top:0}
.ac2-carte h3{
  margin:auto 0 .5em;
  font-family:'Playfair Display',Georgia,serif;font-weight:600;
  font-size:calc(clamp(18px,1.5vw,26px) * var(--ac-zoom,1.15));
  line-height:1.15;letter-spacing:-.012em;color:var(--ac-encre);
}
.ac2-carte p{margin:0}

/* ═══ LE MUR N'EST PAS UNE RANGÉE, C'EST UN ESCALIER ═══
   Trois cartes alignées sur la même ligne haute se lisent en un bloc :
   l'œil les prend ensemble, ne les distingue pas, et la page reste ce
   qu'elle était — une pile de bandes horizontales empilées
   verticalement. Décalées d'un cran chacune, elles se lisent en
   diagonale : on entre par la première et on descend. Le décalage est
   une FRACTION DE LA LARGEUR, pas une valeur en dur — il garde la même
   pente à toutes les tailles d'écran.

   `align-items:start` est indispensable : sans lui, la grille étire les
   trois cartes à la hauteur de la plus haute et le décalage ne se voit
   plus, il ne fait qu'allonger la section. */
.ac2-mur{
  list-style:none;margin:clamp(34px,5vh,64px) 0 0;padding:0;
  display:grid;gap:clamp(16px,1.6vw,26px);
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
}
.ac2-mur > :nth-child(2){margin-top:clamp(26px,4.4vw,74px)}
.ac2-mur > :nth-child(3){margin-top:clamp(52px,8.8vw,148px)}

/* ---------------------------------------------------------------------
   04 — LE PEINTRE : la double page
   --------------------------------------------------------------------- */
/* LE PORTRAIT MORD SUR LA COLONNE DE TEXTE.
   Deux colonnes séparées par une gouttière franche, c'est une mise en
   page de journal : lisible, et plate. En faisant passer le portrait
   sous le texte de quelques dizaines de pixels — et en le posant sur la
   couche au-dessous — les deux blocs cessent d'être côte à côte : ils
   sont l'un DEVANT l'autre, et la page prend une épaisseur.

   La gouttière est donc négative, et le texte reçoit un fond papier :
   sans lui, le chevauchement ferait de la bouillie là où les deux se
   croisent. */
.ac2-peintre__in{
  display:grid;align-items:center;
  grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:0;
}
.ac2-peintre__in > .ac2-slot{position:relative;z-index:1}
.ac2-peintre__dit{
  position:relative;z-index:2;
  margin-left:clamp(-130px,-7vw,-40px);
  padding:clamp(26px,3vw,54px) 0 clamp(26px,3vw,54px) clamp(34px,4.4vw,84px);
}

/* LE PORTRAIT EST ACCROCHÉ AVEC LA VRAIE MOULURE.
   `border-image` étire la photographie du profil réel le long des quatre
   côtés — la même image que le repli du seuil utilise quand le WebGL
   n'est pas disponible. Une seule source pour le bois de tout le site. */
.ac2-accroche{margin:0;max-width:min(100%,560px)}
.ac2-accroche__cadre{
  --moul:clamp(13px,1.5vw,26px);
  display:block;position:relative;
  border:var(--moul) solid transparent;
  border-image:url('../media/cadre-bordure.webp') 50 stretch;
  background:#f7f4ec;
  box-shadow:0 46px 80px -52px rgba(8,28,52,.62);
}
.ac2-accroche__vue{
  display:block;position:relative;
  padding:clamp(9px,.9vw,16px);       /* la marie-louise */
  background:linear-gradient(160deg,#fbfaf6,#efebe0);
}
.ac2-accroche__vue::after{
  content:'';position:absolute;inset:clamp(9px,.9vw,16px);pointer-events:none;
  box-shadow:
    inset 0 12px 20px -14px rgba(6,20,38,.6),
    inset 0 -7px 14px -12px rgba(6,20,38,.34);
}
.ac2-accroche__vue img{display:block;width:100%;height:auto}
.ac2-accroche__cartel{
  margin:clamp(16px,2.2vh,26px) 0 0;
  font-family:'Archivo',system-ui,sans-serif;
}
.ac2-accroche__cartel b{
  display:block;
  font-family:'Playfair Display',Georgia,serif;font-weight:600;
  font-size:calc(clamp(17px,1.3vw,23px) * var(--ac-zoom,1.15));
  color:var(--ac-encre);
}
.ac2-accroche__cartel i{
  display:block;font-style:normal;margin-top:3px;
  font-size:calc(clamp(11px,.84vw,13.5px) * var(--ac-zoom,1.15));
  letter-spacing:.05em;color:var(--ac-encre-2);
}
.ac2-accroche__cartel em{
  display:block;font-style:normal;font-weight:700;
  font-size:calc(clamp(10.5px,.8vw,13px) * var(--ac-zoom,1.15));
  letter-spacing:.14em;text-transform:uppercase;color:var(--ac-bleu);
}

/* SA VOIX. Le guillemet ouvrant est TENU DANS LA MARGE : dans le fil du
   texte il pousse la première ligne d'un demi-cadratin et la citation
   cesse d'être alignée sur le reste. */
.ac2-voix{
  position:relative;margin:clamp(26px,3.6vh,44px) 0;
  padding-left:clamp(22px,2.4vw,40px);
  border-left:2px solid color-mix(in srgb,var(--ac-bleu) 30%,transparent);
}
.ac2-voix p{
  margin:0;
  font-family:'Playfair Display',Georgia,serif;font-style:italic;
  font-size:calc(clamp(17px,1.5vw,26px) * var(--ac-zoom,1.15));
  line-height:1.4;color:var(--ac-encre);
}
.ac2-voix cite{
  display:block;margin-top:10px;font-style:normal;
  font-family:'Archivo',system-ui,sans-serif;
  font-size:calc(clamp(10.5px,.8vw,12.5px) * var(--ac-zoom,1.15));
  letter-spacing:.16em;text-transform:uppercase;color:var(--ac-encre-2);
}

/* ---------------------------------------------------------------------
   LE BOUTON — une pastille, et sa flèche dans sa propre pastille
   La flèche n'est jamais nue à côté du mot : elle a son disque, posé au
   ras du bord intérieur. Au survol, le bouton s'enfonce très légèrement
   et la flèche avance dans son disque — la tension est INTERNE, le
   bouton ne bouge pas de sa place dans la page.
   --------------------------------------------------------------------- */
.ac2-btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:11px 11px 11px 24px;
  border-radius:999px;text-decoration:none;
  font-family:'Archivo',system-ui,sans-serif;
  font-size:calc(clamp(12.5px,.92vw,15px) * var(--ac-zoom,1.15));
  font-weight:600;letter-spacing:.02em;
  transition:transform .55s var(--ac2-lent), background-color .55s var(--ac2-lent),
             box-shadow .55s var(--ac2-lent), color .55s var(--ac2-lent);
}
.ac2-btn i{
  display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;
  transition:transform .55s var(--ac2-lent), background-color .55s var(--ac2-lent);
}
.ac2-btn i svg{width:17px;height:17px;display:block}
.ac2-btn:active{transform:scale(.985)}
@media (hover:hover){ .ac2-btn:hover i{transform:translateX(3px)} }

.ac2-btn--plein{
  background:var(--ac-bleu);color:#f6faff;
  box-shadow:0 20px 40px -26px rgba(0,74,173,.75);
}
.ac2-btn--plein i{background:rgba(255,255,255,.16)}
@media (hover:hover){
  .ac2-btn--plein:hover{background:var(--ac-bleu-profond,#003a87);box-shadow:0 28px 52px -26px rgba(0,74,173,.8)}
  .ac2-btn--plein:hover i{background:rgba(255,255,255,.24)}
}
.ac2-btn--nu{
  padding-left:0;color:var(--ac-encre);
}
.ac2-btn--nu i{background:color-mix(in srgb,var(--ac-bleu) 10%,transparent);color:var(--ac-bleu)}
@media (hover:hover){
  .ac2-btn--nu:hover{color:var(--ac-bleu)}
  .ac2-btn--nu:hover i{background:color-mix(in srgb,var(--ac-bleu) 17%,transparent)}
}

/* ---------------------------------------------------------------------
   05 — LES DEUX PORTES. L'une est plus large que l'autre, et c'est tout
   le propos : deux sorties de même taille ne disent pas où aller.
   --------------------------------------------------------------------- */
.ac2-portes__in{
  display:grid;gap:clamp(16px,1.6vw,26px);
  grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);
  align-items:stretch;
}
.ac2-porte{
  padding:var(--ac2-mat);border-radius:var(--ac2-r);
  background:linear-gradient(160deg,#fbfaf6 0%,#f4f1e9 62%,#ece7dc 100%);
  box-shadow:inset 0 0 0 1px rgba(24,38,56,.07), 0 34px 66px -46px rgba(9,34,62,.5);
}

/* ═══ UNE SEULE DES DEUX EST SOULEVÉE ═══
   Elles n'avaient déjà pas la même largeur — 1,42 contre 1 — mais elles
   avaient le même passe-partout, la même ombre portée, le même relief.
   Deux objets traités pareil se lisent comme deux objets de même
   importance, et la différence de largeur seule ne se remarque pas : on
   ne compare pas deux boîtes qu'on ne voit pas côte à côte à la même
   seconde.

   Le relief est une ressource : on le dépense sur celle qui compte. La
   seconde perd son ombre et son fond crème, garde son filet, et se pose à
   plat sur le pigment. Elle reste parfaitement lisible et parfaitement
   cliquable — elle cesse simplement de réclamer autant que sa voisine.
   Aucune couleur nouvelle n'est introduite : la hiérarchie se fait par le
   relief, qui est déjà le vocabulaire de la page. */
.ac2-porte:last-child{
  background:none;
  box-shadow:inset 0 0 0 1px rgba(24,38,56,.13);
}
.ac2-porte:last-child .ac2-porte__in{
  background:color-mix(in srgb,var(--ac-papier) 46%,transparent);
  box-shadow:none;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .ac2-porte:last-child .ac2-porte__in{background:rgba(255,255,255,.46)}
}
.ac2-porte__in{
  height:100%;
  padding:clamp(30px,3.4vw,62px) clamp(26px,3vw,54px);
  border-radius:calc(var(--ac2-r) - var(--ac2-mat));
  background:var(--ac-papier);
  box-shadow:
    inset 0 10px 18px -14px rgba(9,28,52,.5),
    inset 0 -5px 12px -12px rgba(9,28,52,.3),
    inset 8px 0 14px -14px rgba(9,28,52,.28),
    inset -8px 0 14px -14px rgba(9,28,52,.28);
}
.ac2-porte--large .ac2-titre{font-size:calc(clamp(30px,4.4vw,72px) * var(--ac-zoom-titre,1.08))}

/* ---------------------------------------------------------------------
   TÉLÉPHONES ET TABLETTES
   Toute asymétrie retombe en colonne unique. Les survols n'existent pas
   au doigt : ils sont déjà bornés par `@media (hover:hover)` plus haut.
   --------------------------------------------------------------------- */
@media (max-width:900px){
  .ac2{padding-block:clamp(64px,9vh,110px)}
  .ac2-mur{grid-template-columns:minmax(0,1fr)}
  /* En colonne unique, les cartes font leur propre hauteur : la marge
     automatique qui alignait les trois titres n'aligne plus rien, elle ne
     fait qu'écarter le chiffre de son titre, d'une carte à l'autre et
     sans régularité. */
  .ac2-carte h3{margin-top:0}
  .ac2-peintre__in{grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vh,44px)}
  /* En colonne unique, un chevauchement ne chevauche plus rien : il ne
     fait que sortir le texte de la marge gauche de la page. */
  .ac2-peintre__dit{margin-left:0;padding:0}
  .ac2-accroche{max-width:100%}
  .ac2-mur > :nth-child(2),
  .ac2-mur > :nth-child(3){margin-top:0}
  .ac2-portes__in{grid-template-columns:minmax(0,1fr)}
  /* En colonne unique la ligne de base commune n'a plus d'objet : la
     colonne étroite repasse SOUS la phrase et reprend son écart. */
  .ac2-source__grille{grid-template-columns:minmax(0,1fr);gap:clamp(24px,3.6vh,40px);align-items:start}
  .ac2-source__dit{max-width:none;font-size:calc(clamp(27px,7vw,44px) * var(--ac-zoom-titre,1.08))}
  .ac2-source__sous{max-width:none;padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  .ac2-carte,.ac2-btn,.ac2-btn i{transition:none}
}

/* =====================================================================
   LA RIVE — le courant horizontal
   ---------------------------------------------------------------------
   Elle sort des marges de la page : c'est la condition pour qu'elle se
   lise comme un courant et non comme un bloc de plus. Le conteneur est
   donc posé HORS de `.ac2__in`, en pleine largeur, et il coupe ce qui
   dépasse.

   L'INCLINAISON EST LE VRAI SUJET. Un ruban horizontal parfaitement
   droit reste une bande — une ligne du même quadrillage que tout le
   reste. Un degré et demi suffit à le sortir de la trame : on ne sait
   pas dire ce qui a changé, on voit seulement que la page n'est plus
   une pile. La rotation est portée par le CONTENEUR, jamais par la
   piste : celle-ci reçoit déjà un `translate3d` écrit par le module de
   ruban, et deux transformations sur un même élément, c'est la dernière
   qui gagne.

   Les bords s'effacent en masque : un ruban qui bute sur le bord de
   l'écran a une fin, et une fin arrête le regard.
   ===================================================================== */
.ac2-rive{
  position:relative;
  margin-top:clamp(44px,7vh,104px);
  padding-block:clamp(18px,2.4vw,42px);
  overflow:hidden;
  transform:rotate(-1.4deg);
  /* La rotation découvrirait les coins : la piste est plus large que
     l'écran, et le conteneur déborde volontairement des deux côtés. */
  width:108%;margin-inline:-4%;
  /* LE FONDU EXISTAIT DÉJÀ ; IL ÉTAIT TROP COURT POUR SE LIRE.
     Neuf pour cent d'un ruban large de 108 % font environ cent quarante
     pixels sur un écran de bureau — moins que la largeur d'une seule
     vignette. Une toile était donc coupée net avant d'avoir fini de
     s'effacer, et le bord se voyait quand même. À seize pour cent, la
     vignette a le temps de disparaître : le ruban se lit comme un courant
     qui passe, et non comme un bloc qui s'arrête. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
}
.ac2-rive__piste{
  display:flex;align-items:center;
  gap:clamp(14px,1.6vw,30px);
  width:max-content;
  will-change:transform;
}
.ac2-rive__item{flex:0 0 auto;display:block;width:clamp(132px,15vw,242px)}

/* Chaque vignette est accrochée comme les cartes : passe-partout,
   feuillure, ombre basse. Le même geste à toutes les échelles. */
.ac2-rive__cadre{
  display:block;padding:7px;border-radius:6px;
  background:linear-gradient(160deg,#fbfaf6,#efebe0);
  box-shadow:
    inset 0 0 0 1px rgba(24,38,56,.08),
    0 26px 44px -34px rgba(9,34,62,.55);
}
.ac2-rive__vue{display:block;position:relative;overflow:hidden}
.ac2-rive__vue::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:
    inset 0 9px 15px -11px rgba(6,20,38,.6),
    inset 0 -5px 11px -10px rgba(6,20,38,.32);
}
.ac2-rive__vue img{display:block;width:100%;height:auto}

@media (max-width:900px){
  /* Au téléphone, l'inclinaison coûte plus qu'elle ne rapporte : elle
     mange de la hauteur pour un effet qu'on ne voit pas sur 390 pixels
     de large. Le courant, lui, reste. */
  .ac2-rive{transform:none;width:100%;margin-inline:0}
}

/* =====================================================================
   L'ARRIVÉE DES SECTIONS REFAITES — un fondu QUI A UNE MASSE
   ---------------------------------------------------------------------
   La révélation générale du thème monte de vingt-deux pixels en fondu.
   C'est juste pour une ligne de texte ; pour un bloc encadré, c'est un
   objet qui apparaît sans jamais s'être approché. On ajoute donc les
   deux choses qui donnent du poids : une course plus longue, et une
   NETTETÉ qui se fait — l'objet arrive de la profondeur de champ, il ne
   se contente pas de devenir opaque.

   Le flou n'est posé QUE sur l'état masqué et pendant la transition :
   un filtre permanent sur un bloc qui défile ferait repeindre la zone à
   chaque image. Il vaut zéro dès l'arrivée, et le `will-change` tombe
   avec lui.
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){
  html.ac-anime .ac2 [data-ac-revele]:not([data-fendre]):not([data-fendre-signes]){
    opacity:0;transform:translate3d(0,42px,0);filter:blur(9px);
    transition:none;
  }
  html.ac-anime .ac2 [data-ac-revele]:not([data-fendre]):not([data-fendre-signes]).is-la{
    opacity:1;transform:none;filter:blur(0);
    transition:opacity .8s cubic-bezier(.32,.72,0,1),
               transform 1.05s cubic-bezier(.32,.72,0,1),
               filter .8s cubic-bezier(.32,.72,0,1);
    transition-delay:calc(var(--r,0) * 105ms);
  }
}