/* ============================================================
   peinture.css · la page Peinture à l'huile
   Une galerie, pas une étude de cas : la mise en page ne suit pas
   celle des autres pages projet, et c'est voulu. Tout est exprimé en
   part de largeur (vw), relevé sur la composition de Marie-Liesse,
   pour que ses proportions tiennent à toutes les tailles d'écran.

   Chaque visuel suit le même patron, pour que le zoom du site s'y
   branche sans casser la mise en page :
       figure.pnt-fig > div.im > img   +   figcaption
   l'image est SEULE dans son .im, donc zoom.js se contente d'y poser
   sa classe au lieu d'insérer un bloc qui casserait les positions.
   ============================================================ */
  body{overflow-x:hidden}

  /* ---- la voix ---- */
  .capmin{font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--on-night-faint);line-height:1.9}
  .lede{font-family:var(--title-font),serif;font-style:italic;font-weight:400;
    font-size:clamp(16px,1.8vw,21px);color:var(--on-night-soft);line-height:1.55}
  .fil{width:56px;height:1px;background:var(--on-night-faint);margin:30px auto 0;opacity:.55}

  .omb img{box-shadow:0 2px 6px rgba(28,28,38,.10),0 24px 60px -20px rgba(28,28,38,.35)}
  .omb-fort img{box-shadow:0 6px 16px rgba(28,28,38,.18),0 44px 90px -24px rgba(28,28,38,.52)}
  img{display:block}
  figure{margin:0}
  .im{display:block}
  .pnt-fig img{width:100%;height:auto}
  figcaption.cap{margin-top:1.4vw}
  .rv2{opacity:0;transition:opacity .8s ease}
  .rv2.in{opacity:1}
  /* les pièces qui glissent au scroll ont leur propre calque : sans ça
     le navigateur repeint l'image entière et sa grande ombre portée à
     chaque image d'animation, ce qui saccade toute la page. */
  [data-plx]{will-change:transform}
  /* le nom du peintre ne se coupe jamais en deux */
  .ap{white-space:nowrap}

  /* ---- le zoom, en pleine page et sans défilement ----
     La fenêtre du site laisse parcourir à la main une capture d'écran
     trop large pour être lisible d'un coup. Une toile n'a pas ce
     problème : on veut la voir entière. On annule donc les deux cadres
     qui défilent, et l'image se contente de remplir la page.
     Portée à body.pnt pour ne rien changer sur les autres pages.
     La marge intérieure du cadre laisse vivre l'ombre portée : sans elle,
     le cadre découpe à la lettre et l'ombre disparaît au ras du bord.
     Et le grand arrondi de 12 px devient un filet de 2 px, comme les
     toiles du reste de la page. */
  body.pnt .zoom-frame{overflow:hidden!important;align-items:center!important;
    justify-content:center!important;padding:clamp(28px,3.5vh,44px)!important}
  /* la portée de l'ombre (6 px de décalage + 20 px de flou = 26) reste
     sous la plus petite marge intérieure, 28 px : elle n'est jamais
     rognée, même sur un écran bas. */
  body.pnt .zoom-img{width:auto!important;height:auto!important;
    max-width:100%!important;max-height:100%!important;flex:0 1 auto!important;
    border-radius:2px!important;box-shadow:0 6px 20px rgba(28,28,38,.22)!important}
  body.pnt .zoom-hint{display:none!important}

  /* ---- 1 · chez toi ----
     un voile sombre en haut : sans lui, le logo blanc de la barre du
     site disparaît dans le mur clair de la photo. */
  /* L'ouverture occupe au moins tout l'écran : la bande jaune de l'étagère ne
     doit jamais dépasser avant qu'on ait fait défiler. C'est la photo qui
     absorbe la hauteur restante, pas le crème, sinon on retombe sur le vide
     qu'on cherchait à supprimer. */
  .s-ouverture{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column}
  /* la photo absorbe la hauteur restante, mais jamais au point de devenir
     plus haute que large : au-delà, `cover` rogne sur les côtés et mange
     le second tableau. Passé ce plafond, c'est le crème qui prend le
     relais, SOUS le cartel, pour que la mention reste collée au titre. */
  .s-hero{position:relative;flex:1 1 auto;min-height:min(56.9vw,78svh);max-height:96vw}
  .s-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .s-hero::before{content:"";position:absolute;inset:0 0 auto;height:26vh;z-index:1;pointer-events:none;
    background:linear-gradient(rgba(24,20,16,.42),rgba(24,20,16,0))}
  /* ---- le cartel ----
     Le titre ne se pose plus sur la photo : elle reste nue comme les autres
     toiles de la page, et le dégradé sombre qui la lestait en bas part avec
     lui. Le texte descend dans la bande crème, qui cesse d'être un vide et
     devient le cartel de la planche : l'œuvre annoncée d'abord, la technique
     dessous, le tout calé sur la marge gauche du site. */
  .s-cartel{padding:clamp(24px,3vw,44px) clamp(20px,6vw,84px) clamp(28px,3.6vw,56px)}
  .s-cartel .st{margin:0;font-family:var(--title-font),serif;font-style:italic;font-weight:400;
    font-size:clamp(24px,3.15vw,46px);line-height:1.12;letter-spacing:-.01em;
    color:var(--ink);text-wrap:balance}
  /* la mention passe SOUS le titre, comme sur le cartel d'un accrochage :
     l'œuvre d'abord, la technique ensuite, en plus petit et en retrait */
  .s-cartel .k{position:relative;margin:clamp(15px,1.6vw,24px) 0 0;
    padding-top:clamp(13px,1.4vw,20px);font-weight:500;
    font-size:clamp(11.5px,.9vw,12.5px);letter-spacing:.24em;text-transform:uppercase;
    color:var(--ink-faint)}
  .s-cartel .k::before{content:"";position:absolute;left:0;top:0;
    width:clamp(26px,3vw,46px);height:2px;background:var(--pc)}
  /* tant que la barre est posée sur la photo, elle passe en blanc :
     le logo sombre du site disparaissait dans le mur clair du salon. */
  /* le temps de mesurer la barre réduite, peinture.js coupe les transitions :
     sinon la hauteur relevée est celle de l'animation, pas celle d'arrivée */
  .topbar.mesure,.topbar.mesure .b{transition:none}
  .topbar.sur-photo{--on-night:#fff}
  .topbar.sur-photo::before{opacity:0}
  .topbar.sur-photo .b{background-image:url(../assets/logo-white.png)}
  .topbar.sur-photo nav a{color:rgba(255,255,255,.82)}
  .topbar.sur-photo nav a.on,.topbar.sur-photo nav a:hover{color:#fff}
  .topbar.sur-photo .lang{border-color:rgba(255,255,255,.35)}


  /* ---- 2 · l'étagère ----
     l'ombre n'est coupée QUE par le bas, au ras de la bande : au-dessus
     et sur les côtés elle vit librement.
     ⚠️ overflow:hidden découpait les quatre côtés et laissait un trait
     net au sommet, et clip-path:inset() refuse les valeurs négatives
     (le navigateur les ramène à zéro, ce qui revient au même). On pose
     donc un cache de la couleur du fond juste sous la bande, au-dessus
     du meuble dans l'ordre d'empilement. Sa hauteur est bornée pour ne
     jamais mordre sur la falaise qui suit.
     ⚠️ Ce cache déborde de 60vw de chaque côté pour couvrir toute la
     portée de l'ombre, ce qui rendait la page défilable latéralement
     (570 px de large au lieu de 375 sur mobile). `overflow-x:clip` le
     coupe au bord de la section SANS toucher à l'axe vertical, là où
     l'ombre doit continuer de vivre : `clip` autorise `visible` sur
     l'autre axe, contrairement à `hidden` qui forcerait les deux. */
  /* ---- l'entrée en matière ----
     La phrase qui dit pourquoi je peins fermait la page : elle était dans
     « Ce que j'en retiens », à quinze mille pixels du haut, donc personne
     ne la lisait avant d'avoir tout traversé. Elle ouvre maintenant, entre
     la photo du salon et l'étagère, à la même mesure que le mot de la fin
     pour que les deux se répondent d'un bout à l'autre. */
  .s-intro{padding:clamp(74px,10vw,152px) 24px clamp(76px,9vw,140px)}
  .s-intro p{max-width:620px;margin-inline:auto;
    font-size:clamp(16px,1.35vw,19px);line-height:1.7;
    color:var(--on-night-soft);text-wrap:pretty}

  .s-eta{margin-top:5.5vw;overflow-x:clip}
  .s-eta .scene{position:relative;width:53.9vw;margin-inline:auto;padding-top:5.2vw}
  .s-eta .scene::after{content:"";position:absolute;left:-60vw;right:-60vw;top:100%;
    height:10vw;background:var(--cream);z-index:3;pointer-events:none}
  .s-eta .bande{height:46.7vw;background:#FBD99E}
  .s-eta .meuble{position:absolute;left:50%;translate:-50% 0;bottom:0;width:26.1vw}
  .s-eta .meuble img{filter:drop-shadow(-.35vw .5vw .9vw rgba(112,74,22,.24))
                            drop-shadow(-1.8vw 1.5vw 3.4vw rgba(112,74,22,.32))}

  /* ---- 3 · la falaise, la lagune posée dessus ----
     la falaise fait toute la largeur, donc sa hauteur vaut 100/1,249.
     Le détail est calé pour n'avoir qu'un tiers au-dessus d'elle. */
  .s-fal{margin-top:24vw;padding-bottom:24vw}
  .s-fal .scene{position:relative}
  .s-fal .fond{position:relative}
  .s-fal .fond figcaption{position:absolute;left:5vw;top:calc(100% + 1.4vw);margin:0}
  .s-fal .pose{position:absolute;right:7.5vw;top:calc(100% - 8.7vw);width:48.3vw}
  .s-fal .pose img{aspect-ratio:1.85;object-fit:cover}

  /* ---- 4 · Saint-Cado ---- */
  .s-mai{margin-top:14vw}
  .s-mai .pnt-fig{margin-left:23.9vw;width:51.9vw}
  .s-mai img{aspect-ratio:1.3;object-fit:cover}

  /* ---- 5 · la lagune ----
     la plus grande toile de la page : sa largeur est plafonnée par la
     hauteur d'écran (via son propre format, 1600/1133) pour qu'elle
     tienne en entier entre le haut et le bas de l'écran. */
  .s-voi{margin-top:16vw}
  .s-voi .pnt-fig{width:min(76.7vw,calc(84svh * 1.4126));margin-inline:auto}
  .s-voi figcaption{text-align:right}

  /* ---- 6 · deux détails de Saint-Cado ---- */
  .s-duo{margin-top:20vw;display:flex;align-items:center}
  .s-duo .a{margin-left:16.4vw;width:25.6vw}
  .s-duo .a img{aspect-ratio:.7;object-fit:cover}
  .s-duo .b{margin-left:4.8vw;width:36.9vw}
  .s-duo .b img{aspect-ratio:1.87;object-fit:cover}

  /* ---- 7 · la chapelle posée sur les herbes ---- */
  .s-pro{position:relative;margin-top:21vw}
  .s-pro .toile{position:relative;z-index:2;margin-left:19.2vw;width:61.6vw}
  /* la légende s'aligne sur le bord droit de la toile, pas sur la page.
     Le décalage mêle vw et px : deux lignes de petites capitales font
     toujours la même hauteur, quelle que soit la largeur d'écran. */
  .s-pro > .cap{position:absolute;right:19.2vw;top:calc(-2vw - 42px);text-align:right;z-index:3;margin:0}
  .s-pro .bande{margin-top:-15.9vw;position:relative}
  .s-pro .bande img{height:27.6vw;object-fit:cover}
  .s-pro .bande figcaption{text-align:right;padding-right:5vw}

  /* ---- 8 · deux détails, un peu plus petits ----
     la roche touchait le bord de la fenêtre et se lisait comme une image
     coupée : elle rentre de 8 vw. La garrigue reste centrée entre le bord
     gauche et la roche, avec 10 vw de blanc de chaque côté. */
  .s-pai{margin-top:16vw;display:flex;align-items:center}
  .s-pai .a{margin-left:10vw;width:36vw}
  .s-pai .a img{aspect-ratio:1.15;object-fit:cover}
  .s-pai .b{margin-left:auto;margin-right:8vw;width:36vw}
  .s-pai .b img{aspect-ratio:.73;object-fit:cover}
  /* la légende se cale sur le bord droit de son image, comme celle de la
     garrigue se cale sur le bord gauche de la sienne */
  .s-pai .b figcaption{text-align:right}

  /* ---- le mot de la fin ----
     Les autres pages projet referment sur une carte blanche à filet corail.
     Ici on garde la voix de la galerie : pas de cadre, le texte posé sur le
     crème, et le même filet corail qu'au cartel d'ouverture pour boucler.
     Le titre est centré, les paragraphes alignés à gauche dans une colonne
     étroite : trois paragraphes centrés seraient illisibles. */
  /* Une seule valeur pour les deux respirations du bloc, pour qu'elles ne
     puissent pas diverger. Deux obstacles à lever avant : .s-fin-bas, un
     vide de 22vw hérité de l'époque où la galerie se terminait sur l'image,
     et la marge haute que le rail apporte de son côté. Les deux passent à
     zéro, --air devient la seule source de l'espacement. */
  .s-mot{--air:clamp(72px,13vw,190px);margin-top:var(--air);padding:0 24px var(--air)}
  .s-fin-bas{height:0}
  .s-mot + .pj-subnav{margin-top:0}
  .s-mot > *{max-width:620px;margin-inline:auto}
  .s-mot h2{position:relative;padding-top:clamp(24px,2.4vw,34px);text-align:center;
    font-family:var(--title-font),serif;font-style:italic;font-weight:400;
    font-size:clamp(23px,2.5vw,34px);line-height:1.2;letter-spacing:-.005em;
    color:var(--on-night)}
  .s-mot h2::before{content:"";position:absolute;left:50%;translate:-50% 0;top:0;
    width:clamp(26px,3vw,46px);height:2px;background:var(--pc)}
  .s-mot p{margin-top:clamp(15px,1.4vw,21px);font-size:clamp(15px,1.15vw,17px);
    line-height:1.75;color:var(--on-night-soft)}

  /* ---- 9 · la serre ---- */
  .s-ser{margin-top:22vw}
  .s-ser .pnt-fig{margin-left:26.1vw;width:47.8vw}
  .s-ser img{aspect-ratio:1.01;object-fit:cover}
  .s-ser figcaption{text-align:center}

  /* ---- 10 · Paris et les cyprès ---- */
  .s-par{margin-top:22vw;display:flex;align-items:center}
  .s-par .a{margin-left:12.8vw;width:35.3vw}
  .s-par .a img{aspect-ratio:.5;object-fit:cover}
  .s-par .b{margin-left:13vw;width:26.1vw}
  .s-par .b img{aspect-ratio:.55;object-fit:cover}

  /* ---- 11 · la salle noire ---- */
  .s-noir{margin-top:26vw;
    background:radial-gradient(ellipse 70% 55% at 50% 42%,#1c1a22,#111015 78%);
    padding:16vw 20px;display:flex;flex-direction:column;align-items:center}
  .s-noir .pnt-fig{width:26vw}
  .s-noir img{box-shadow:0 0 0 1px rgba(255,255,255,.03),0 3vw 8vw -1.5vw rgba(0,0,0,.85)}
  /* la légende peut être plus large que la toile : sinon « d'après
     Johannes Vermeer » se casserait en deux dans une colonne de 26 vw */
  .s-noir figcaption{margin-top:2.4vw;color:rgba(255,255,255,.55);text-align:center;
    width:max-content;max-width:88vw;margin-inline:auto}

  /* ---- 12 · copier pour apprendre ---- */
  .s-mon-tete{margin-top:13vw;text-align:center;padding-inline:24px}
  .s-mon-tete .k{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--on-night);font-weight:500}
  .s-mon-tete .st{margin-top:14px;max-width:600px;margin-inline:auto}
  .s-mon{margin-top:10vw;display:flex;align-items:flex-start}
  .s-mon .e1{margin-left:6.7vw;width:25vw;margin-top:7.5vw}
  .s-mon .e1 img{aspect-ratio:1.27;object-fit:cover}
  .s-mon .atl{margin-left:2.7vw;width:30.9vw}
  .s-mon .atl img{aspect-ratio:.645;object-fit:cover}
  .s-mon .e3{margin-left:2.8vw;width:25.6vw;margin-top:20vw}
  .s-mon .e3 img{aspect-ratio:1.3;object-fit:cover}
  .s-mon figcaption{font-size:13px}
  .s-fin{margin-top:14vw}
  .s-fin .pnt-fig{margin-left:28.9vw;width:42.5vw}
  .s-fin figcaption{text-align:center}

  /* ---- notes ---- */
  .piste-tete{max-width:760px;margin:0 auto;padding:clamp(70px,10vh,120px) clamp(20px,5vw,64px) 0}
  .piste-tete h1{font-family:var(--title-font),serif;font-weight:400;font-size:clamp(24px,3vw,36px);line-height:1.12;color:var(--on-night)}
  .piste-tete p{margin-top:12px;font-size:15px;line-height:1.7;color:var(--on-night-soft)}
  .note{max-width:760px;margin:clamp(24px,3.5vw,36px) auto 0;padding:14px 18px;border-left:3px solid var(--pc);
    background:color-mix(in srgb,var(--pc) 7%,transparent);border-radius:0 10px 10px 0;
    font-size:14px;line-height:1.65;color:var(--on-night-soft)}
  .note b{color:var(--on-night)}
  .note:last-child{margin-bottom:clamp(70px,10vh,120px)}

  /* ============================================================
     TABLETTE · la compo tient, mais les visuels reprennent de la
     place : sur 900 px, 25 vw ne font plus que 225 px.
     ============================================================ */
  @media (max-width:1024px){
    .s-eta .scene{width:66vw;padding-top:6.5vw}
    .s-eta .bande{height:57.2vw}
    .s-eta .meuble{width:32vw}
    .s-fal .pose{width:56vw;right:5vw;top:calc(100% - 10.1vw)}
    .s-fal{padding-bottom:28vw}
    .s-mai .pnt-fig{margin-left:16vw;width:68vw}
    .s-voi .pnt-fig{width:min(86vw,calc(84svh * 1.4126))}
    .s-duo .a{margin-left:10vw;width:31vw}
    .s-duo .b{margin-left:5vw;width:46vw}
    .s-pro .toile{margin-left:12vw;width:76vw}
    .s-pro > .cap{right:12vw}
    .s-pro .bande{margin-top:-19vw}
    .s-pro .bande img{height:33vw}
    .s-pai .a{margin-left:5vw;width:42vw}
    .s-pai .b{width:40vw;margin-right:6vw}
    .s-ser .pnt-fig{margin-left:18vw;width:64vw}
    .s-par .a{margin-left:9vw;width:42vw}
    .s-par .b{margin-left:9vw;width:32vw}
    .s-noir .pnt-fig{width:38vw}
    .s-mon .e1{margin-left:5vw;width:29vw}
    .s-mon .atl{margin-left:2.5vw;width:34vw}
    .s-mon .e3{margin-left:2.5vw;width:29vw}
    .s-fin .pnt-fig{margin-left:22vw;width:56vw}
  }

  /* ============================================================
     MOBILE · la compo se déplie. Les paires s'empilent en gardant
     leur décalage, les grands visuels prennent presque la largeur,
     et les écarts se resserrent : en vw ils seraient énormes.
     ============================================================ */
  @media (max-width:640px){
    /* MOBILE · la photo se resserre sur les deux toiles pour combler l'écran.
       Le cadre devient plus haut que large, `cover` rogne donc sur les côtés :
       on décale le point d’ancrage à 64 % pour garder les deux toiles avec de
       l'air, quitte à perdre le rideau et une partie du fauteuil. */
    .s-hero{flex:0 0 auto;height:min(150vw,70svh);min-height:0;max-height:none}
    .s-hero img{object-position:64% center}
    .s-hero::before{height:18vh}
    /* le cartel se centre dans le crème restant : le vide se répartit au-dessus
       et en dessous au lieu de s'empiler tout en bas */
    .s-cartel{margin-block:auto;padding-block:clamp(18px,4.6vw,26px)}
    .s-cartel .st{font-size:clamp(21px,6.4vw,31px)}

    .s-eta{margin-top:9vw}
    .s-eta .scene{width:84vw;padding-top:8.6vw}
    .s-eta .bande{height:73vw}
    .s-eta .meuble{width:41vw}

    .s-fal{margin-top:22vw;padding-bottom:26vw}
    /* la légende passe AU-DESSUS de la toile : en dessous, l'image
       posée lui roulait dessus. */
    .s-fal .fond figcaption{left:6vw;top:auto;bottom:calc(100% + 2.5vw)}
    .s-fal .pose{width:66vw;right:5vw;top:calc(100% - 11.9vw)}

    .s-mai{margin-top:16vw}
    .s-mai .pnt-fig{margin-left:8vw;width:84vw}
    .s-voi{margin-top:18vw}
    .s-voi .pnt-fig{width:min(90vw,calc(84svh * 1.4126))}

    .s-duo{display:block;margin-top:20vw}
    .s-duo .a{margin-left:8vw;width:52vw}
    .s-duo .b{margin:12vw 5vw 0 auto;width:74vw}

    .s-pro{margin-top:20vw}
    .s-pro .toile{margin-left:7vw;width:86vw}
    .s-pro > .cap{right:7vw}
    .s-pro .bande{margin-top:-22vw}
    .s-pro .bande img{height:44vw}

    .s-pai{display:block;margin-top:18vw}
    .s-pai .a{margin-left:6vw;width:68vw}
    .s-pai .b{margin:12vw 6vw 0 auto;width:58vw}

    .s-ser{margin-top:20vw}
    .s-ser .pnt-fig{margin-left:12vw;width:76vw}

    .s-par{display:block;margin-top:20vw}
    .s-par .a{margin-left:9vw;width:54vw}
    .s-par .b{margin:12vw 8vw 0 auto;width:40vw}

    .s-noir{margin-top:22vw;padding:24vw 20px}
    .s-noir .pnt-fig{width:62vw}

    .s-mon-tete{margin-top:18vw}
    .s-mon{display:block;margin-top:14vw}
    .s-mon .e1{margin-left:6vw;width:60vw;margin-top:0}
    .s-mon .atl{margin:14vw 6vw 0 auto;width:64vw}
    .s-mon .e3{margin:14vw 0 0 6vw;width:60vw}
    .s-mon figcaption{font-size:13px}
    .s-fin{margin-top:16vw}
    .s-fin .pnt-fig{margin-left:12vw;width:76vw}
  }