/* ================================================ projets
   Pages generees par tools/build_projets.py, chargees en plus de style.css.
   Liste facon store (une grande carte a la une, des cartes, puis une liste a
   icones) et fiches facon magazine (bandeau couleur, nom geant, captures qui
   debordent). La couleur vient de chaque projet, par --pj-bg, --pj-ink et
   --pj-accent poses en style. Prefixes pj- (fiche) et st- (liste). */

@font-face{font-family:'Anton';src:url(/assets/fonts/anton-latin.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
:root{--cond:'Anton','Arial Narrow',Impact,sans-serif}

/* ---- outils communs */

/* Nom geant en capitales etroites, a la largeur de sa colonne : regle au pixel
   par le script, estime sans lui d'apres le nombre de lettres. */
.fit{display:block;margin:0;white-space:nowrap;font-family:var(--cond);font-weight:400;text-transform:uppercase;
     line-height:.86;letter-spacing:-.005em;font-size:min(calc(100cqi / (var(--len) * .5)),220px)}
.fit>span{display:inline-block;transform:skewX(-7deg);transform-origin:0 100%}

/* Apparition douce au defilement, armee seulement si le script tourne */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.is-in{opacity:1;transform:none}

.pj-eyebrow{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.6;opacity:.8}
.pj-rubrique,.st-label{margin:0;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}

.pj-pill,.pj-btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 18px;border-radius:999px;
  border:1.5px solid var(--ink);background:transparent;color:var(--ink);text-decoration:none;white-space:nowrap;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.pj-pill:hover,.pj-btn:hover{background:var(--ink);color:var(--paper)}
.pj-pill svg{width:13px;height:13px;flex:none}
.pj-btn svg{width:11px;height:11px;flex:none}
.pj-pill--plein{background:var(--pj-ink);color:var(--pj-bg);border-color:var(--pj-ink)}
.pj-pill--plein:hover{background:var(--pj-ink);color:var(--pj-bg);opacity:.85}
.pj-badge{display:inline-block;line-height:0;position:relative;z-index:4}
.pj-badge img{height:46px;width:auto}
.rond{display:grid;place-items:center;flex:none;width:clamp(44px,4vw,56px);aspect-ratio:1;border-radius:50%;
      background:var(--pj-ink);color:var(--pj-bg);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.rond svg{width:40%;height:auto}

/* Captures en eventail : la principale au centre et devant. Hauteur fixee par le parent. */
.fan{position:relative;display:block;height:100%}
.fan img{position:absolute;bottom:0;left:50%;height:100%;width:auto;max-width:none;border-radius:clamp(12px,1.4vw,22px);
         box-shadow:0 24px 54px rgba(0,0,0,.3);transform-origin:50% 100%;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.fan img:nth-child(1){z-index:3;transform:translateX(-50%)}
.fan img:nth-child(2){z-index:2;transform:translateX(-104%) rotate(-6deg) scale(.84)}
.fan img:nth-child(3){z-index:1;transform:translateX(4%) rotate(6deg) scale(.84)}
.fan--cover img,.fan--cover img:nth-child(1){position:static;transform:none;width:100%;height:100%;object-fit:cover;
  object-position:right center;border-radius:0;box-shadow:none;mix-blend-mode:multiply}

/* Visuel d'ambiance en fond : sujet a droite et en bas, aplat a gauche sous le texte */
.pj-backdrop{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:right bottom;
  pointer-events:none;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.st-card:hover .pj-backdrop,.pj-next-card:hover .pj-backdrop{transform:scale(1.04)}
.pj-band .pj-backdrop{object-position:right bottom}

/* Couverture sur fond sombre : pas de fusion multiply, qui l'eteindrait */
.is-dark .fan--cover img,.is-dark .pj-idea-cover{mix-blend-mode:normal}
/* Capture sur fond sombre, dans le bandeau : ses bords se fondent dans le fond */
.is-dark.pj-band--cover:not(.pj-band--portrait) .fan--cover img{
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(closest-side,#000 70%,transparent)}
.is-dark .st-card-art .fan--cover:not(.fan--portrait) img,.is-dark .pj-next-art .fan--cover:not(.fan--portrait) img{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 22%);mask-image:linear-gradient(to right,transparent,#000 22%)}
/* Couverture en portrait (un objet photographie) : entiere, posee en bas */
.fan--portrait img,.fan--portrait img:nth-child(1){object-fit:contain;object-position:center bottom}

/* ================================================ liste des projets */
.st-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;
  padding-block:clamp(22px,4vw,52px) clamp(26px,3.4vw,44px)}
.st-title{margin:0;font-family:var(--cond);font-weight:400;text-transform:uppercase;font-size:clamp(92px,15.5vw,236px);
  line-height:.8;letter-spacing:-.005em}
.st-title span{display:block;animation:monte 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes monte{from{transform:translateY(30%);opacity:0}}
.st-kicker{margin:0 0 .8em;max-width:24ch;font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;line-height:1.75}
.st-label{margin-bottom:14px}

.st-une{padding-bottom:clamp(44px,6vw,76px)}
.st-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(14px,1.6vw,22px)}
.st-grid>.st-card:last-child:nth-child(odd){grid-column:1/-1}
.st-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:stretch;
  min-height:clamp(300px,30vw,400px);border-radius:clamp(20px,2.2vw,32px);overflow:hidden;
  background:radial-gradient(80% 90% at 78% 40%,color-mix(in srgb,#fff 16%,transparent),transparent 70%),var(--pj-bg);
  color:var(--pj-ink);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease}
.st-card.is-dark{background:radial-gradient(80% 90% at 78% 40%,color-mix(in srgb,var(--pj-accent) 14%,transparent),transparent 70%),var(--pj-bg)}
.st-card--une{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:clamp(420px,42vw,580px)}
.st-card-link{position:absolute;inset:0;z-index:2;border-radius:inherit}
.st-card-link:focus-visible{outline:3px solid var(--pj-ink);outline-offset:-8px}
.st-card-text{position:relative;z-index:3;pointer-events:none;container-type:inline-size;display:flex;flex-direction:column;
  justify-content:center;padding:clamp(22px,3vw,48px)}
.st-card-text a{pointer-events:auto}
.st-card-name{margin-top:clamp(14px,2vw,26px)}
.st-card-tag{margin:clamp(12px,1.4vw,18px) 0 0;font-size:clamp(17px,1.5vw,22px);font-weight:500;letter-spacing:-.01em}
.st-card-cta{margin:clamp(18px,2.2vw,28px) 0 0}
.st-card-cta:empty{display:none}
.st-card-art{position:relative;z-index:1;min-height:240px}
.st-card-art .fan{position:absolute;inset:10% 8% 10% 0;height:auto}
.st-card--une .st-card-art .fan{inset:8% 6% 8% 0}
.st-card-art .fan--1{inset:10% 14% 0 4%}
.st-card-art .fan--1 img{bottom:auto;top:0;height:100%}
.st-card-art .fan--cover{inset:0}
.st-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(0,0,0,.16)}
.js .st-card.rv:hover{transform:translateY(-6px)}
.st-card:hover .fan img:nth-child(1){transform:translateX(-50%) translateY(-3%)}
.st-card:hover .fan img:nth-child(2){transform:translateX(-112%) rotate(-9deg) scale(.86)}
.st-card:hover .fan img:nth-child(3){transform:translateX(12%) rotate(9deg) scale(.86)}
/* carte a image unique (Colenda, Timebooth) : la carte reste en place, l'image zoome */
.st-card:has(.fan--cover):hover,.js .st-card.rv:has(.fan--cover):hover,
.pj-next-card:has(.fan--cover):hover{transform:none;box-shadow:none}
.fan--cover img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.st-card:hover .fan--cover img:nth-child(1),.pj-next-card:hover .fan--cover img:nth-child(1){transform:scale(1.08)}

.st-all{padding-bottom:clamp(64px,8vw,110px)}
.st-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.st-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:clamp(14px,2vw,28px);
  padding:14px 0;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none;
  transition:padding .35s ease,background .35s ease}
.st-row:hover{padding-inline:14px;background:color-mix(in srgb,var(--pj-bg) 14%,#fff)}
.st-row-icon{width:clamp(56px,5.4vw,76px);height:auto;border-radius:23%;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.st-row-name{display:block;font-family:var(--cond);font-size:clamp(28px,2.8vw,40px);text-transform:uppercase;line-height:1}
.st-row-tag{display:block;margin-top:5px;font-size:15px;color:var(--mute)}
.st-row-meta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.st-row:hover .pj-pill{background:var(--ink);color:var(--paper)}

/* ================================================ fiche projet */

/* ---- bandeau : nom geant, tampon tournant ; les captures debordent sur la
   partie blanche, de --ov */
.pj-band{--ov:clamp(120px,17vw,280px);position:relative;color:var(--pj-ink);overflow-x:clip;
  background:radial-gradient(60% 80% at 75% 60%,color-mix(in srgb,#fff 18%,transparent),transparent 70%),var(--pj-bg)}
.pj-band.is-dark{background:radial-gradient(60% 80% at 75% 60%,color-mix(in srgb,var(--pj-accent) 16%,transparent),transparent 70%),var(--pj-bg)}
.pj-band--cover{--ov:0px}
.pj-band-in{position:relative;container-type:inline-size;display:flex;flex-direction:column;padding-top:clamp(18px,2.4vw,30px)}
.pj-band .crumb{align-self:flex-start;color:inherit;opacity:.7;margin:0 0 clamp(20px,3vw,40px)}
.pj-band .crumb:hover{color:inherit;opacity:1}
.pj-band :focus-visible{outline-color:currentColor}
.pj-name{width:84%;margin-top:clamp(10px,1.4vw,18px)}
.pj-stamp{position:absolute;right:0;top:clamp(54px,6vw,96px);width:clamp(92px,10vw,144px);aspect-ratio:1;display:grid;place-items:center}
.pj-stamp svg{position:absolute;inset:0;width:100%;height:100%;animation:tourne 22s linear infinite}
.pj-stamp text{font-family:var(--mono);font-size:8.6px;letter-spacing:.12em;fill:currentColor}
.pj-stamp-icon{width:44%;height:auto;border-radius:23%;box-shadow:0 6px 18px rgba(0,0,0,.25)}
@keyframes tourne{to{transform:rotate(360deg)}}
.pj-band-art{align-self:flex-end;position:relative;z-index:3;width:min(48%,620px);height:clamp(340px,38vw,560px);
  margin-top:clamp(-60px,-4vw,-20px);margin-bottom:calc(-1 * var(--ov))}
.pj-band-art .fan{animation:flotte 7s ease-in-out infinite}
.pj-band--cover .pj-band-art{width:min(62%,760px);height:auto;margin-top:clamp(10px,2vw,24px)}
.pj-band--cover .fan--cover img{height:auto}
/* objet photographie sur fond sombre : le nom a gauche, l'objet a droite,
   sans halo, bords de l'image fondus dans le bandeau */
.pj-band--portrait{background:var(--pj-bg)}
.pj-band--portrait .pj-name{width:57%}
.pj-band--portrait .pj-band-art{width:min(34%,440px);height:clamp(380px,42vw,600px);
  margin-top:calc(-1 * clamp(170px,17vw,250px));margin-right:clamp(0px,5vw,80px)}
.pj-band--portrait .fan--cover img{height:100%;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),linear-gradient(transparent,#000 14%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),linear-gradient(transparent,#000 14%);
          mask-composite:intersect}
@keyframes flotte{50%{transform:translateY(-10px)}}

/* ---- sous le bandeau : l'accroche et les liens, a cote des captures */
.pj-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,48%);gap:32px;padding-block:clamp(26px,3vw,44px) 0}
.pj-intro::after{content:"";min-height:calc(var(--ov,0px) - 20px)}
.pj-band--cover + .pj-intro::after{display:none}
.pj-band + .pj-intro{--ov:clamp(120px,17vw,280px)}
.pj-band--cover + .pj-intro{--ov:0px}
.pj-tagline{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.pj-accroche{margin:12px 0 0;max-width:24em;font-size:clamp(20px,1.9vw,27px);font-weight:700;letter-spacing:-.025em;line-height:1.22;text-wrap:balance}
.pj-pitch{margin:16px 0 0;max-width:44ch;font-size:16px;line-height:1.6;color:var(--mute);text-wrap:pretty}
.pj-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:24px 0 0}

/* ---- fiche technique, en cases facon store */
.pj-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin:clamp(36px,5vw,64px) 0 0;
  border-block:1px solid var(--rule)}
.pj-facts>div{padding:16px 18px;text-align:center;border-left:1px solid var(--rule)}
.pj-facts>div:first-child{border-left:0}
.pj-facts dt{margin:0 0 6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.pj-facts dd{margin:0;font-size:15px;font-weight:650;line-height:1.3}

/* ---- l'idee : image, texte, citation */
.pj-idea{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,.8fr);gap:clamp(22px,3.4vw,56px);
  align-items:center;padding-block:clamp(56px,8vw,112px)}
.pj-idea-art{position:relative;margin:0;aspect-ratio:4/5;border-radius:clamp(20px,2vw,28px);overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(70% 60% at 50% 40%,color-mix(in srgb,#fff 18%,transparent),transparent 70%),var(--pj-bg)}
.pj-idea-art img{width:56%;height:auto;border-radius:16px;box-shadow:0 24px 50px rgba(0,0,0,.32);transform:rotate(-6deg) translateY(10%)}
.pj-idea-art .pj-idea-photo{width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none;transform:none}
.pj-idea-art .pj-idea-cover{width:100%;height:100%;object-fit:cover;object-position:left center;border-radius:0;box-shadow:none;
  transform:none;mix-blend-mode:multiply}
.pj-h2{margin:10px 0 16px;font-size:clamp(24px,2.4vw,34px);font-weight:750;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
.pj-prose p{margin:0 0 .8em;max-width:46ch;font-size:16px;line-height:1.6;color:var(--mute);text-wrap:pretty}
.pj-prose p:last-child{margin-bottom:0}
.pj-quote{margin:0;align-self:center}
.pj-quote span{display:block;font-family:var(--cond);font-size:clamp(72px,7vw,110px);line-height:.7;height:.42em}
.pj-quote p{margin:0;font-size:clamp(18px,1.6vw,22px);font-weight:650;letter-spacing:-.02em;line-height:1.3;text-wrap:balance}

/* ---- ce qu'on a construit : les captures en grand, la liste en petit */
.pj-built{padding-block:0 clamp(56px,8vw,112px)}
.pj-built-head{margin-bottom:clamp(18px,2.4vw,30px)}
.pj-galerie{position:relative}
.pj-rail{display:flex;gap:clamp(12px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;
  overscroll-behavior-x:contain;scrollbar-width:thin}
.pj-rail img{flex:none;height:clamp(360px,40vw,560px);width:auto;max-width:none;border-radius:clamp(14px,1.6vw,22px);
  scroll-snap-align:start;box-shadow:0 0 0 1px var(--rule)}
.pj-rail:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.pj-arrows{position:absolute;right:0;top:calc(-1 * clamp(58px,5vw,72px));display:flex;gap:8px}
.pj-arrows button{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--rule);background:var(--paper);color:var(--ink);
  display:grid;place-items:center;cursor:pointer}
.pj-arrows button:first-child svg{transform:scaleX(-1)}
.pj-arrows button:hover:not(:disabled){border-color:var(--ink)}
.pj-arrows button:disabled{opacity:.3;cursor:default}
.pj-arrows[hidden]{display:none}
.pj-checks{list-style:none;margin:clamp(26px,3.4vw,44px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px clamp(24px,3vw,44px)}
.pj-checks li{position:relative;padding-left:34px;font-size:14.5px;line-height:1.55;color:var(--mute);text-wrap:pretty}
.pj-checks li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--pj-bg);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.pj-checks li::after{content:"";position:absolute;left:7px;top:6px;width:8px;height:5px;border:2px solid var(--pj-ink);
  border-top:0;border-right:0;transform:rotate(-45deg)}

/* ---- le film, juste apres la fiche technique */
.pj-film{padding-block:clamp(56px,8vw,104px) 0}
.pj-film .pj-video{max-width:none;margin-top:clamp(14px,2vw,24px);box-shadow:0 30px 70px rgba(0,0,0,.18)}
.pj-film .pj-video video{object-fit:cover;background:#000}
.pj-film .pj-video-note{display:none}

/* ---- video, etapes, suite */
.pj-extra{padding-block:0 clamp(56px,8vw,112px)}
.pj-video{position:relative;aspect-ratio:16/9;max-width:960px;background:#000 center/cover no-repeat;border-radius:20px;overflow:hidden}
.pj-video button{position:absolute;inset:0;width:100%;border:0;background:rgba(0,0,0,.3);color:#fff;cursor:pointer;
                 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
                 font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.pj-video iframe,.pj-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.pj-video-note{font-size:13px;color:var(--mute);margin:10px 0 0}
.pj-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.pj-steps li{display:grid;grid-template-columns:minmax(120px,20%) 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--rule)}
.pj-step-date{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:3px 0 0}
.pj-steps h3{margin:0 0 6px;font-size:18px;font-weight:700;letter-spacing:-.02em}
.pj-steps p{margin:0;color:var(--mute)}

/* ---- projet suivant, en carte de la liste */
.pj-next{padding-block:0 clamp(56px,8vw,96px)}
.pj-next-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);min-height:clamp(240px,24vw,320px);
  border-radius:clamp(20px,2.2vw,32px);overflow:hidden;background:var(--pj-bg);color:var(--pj-ink);text-decoration:none;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease}
.pj-next-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(0,0,0,.16)}
.pj-next-card:focus-visible{outline:3px solid var(--pj-ink);outline-offset:-8px}
.pj-next-text{position:relative;z-index:1;container-type:inline-size;display:flex;flex-direction:column;justify-content:center;padding:clamp(22px,3vw,44px)}
.pj-next-name{margin-top:14px}
.pj-next-tag{margin-top:12px;font-size:17px;font-weight:500}
.pj-next-art{position:relative;z-index:1}
.pj-next-art .fan{position:absolute;inset:12% 18% -30% 0;height:auto}
.pj-next-art .fan--cover{inset:0}
.pj-next-card .rond{position:absolute;top:clamp(16px,2vw,24px);right:clamp(16px,2vw,24px);z-index:4}
.pj-next-card:hover .rond,.st-row:hover .rond{transform:rotate(-45deg)}
.pj-all-wrap{display:flex;justify-content:center;margin:clamp(28px,3vw,40px) 0 0}

/* ================================================ petits ecrans */
@media(max-width:820px){
  .st-card,.st-card--une{grid-template-columns:minmax(0,1fr)}
  .st-card-art{min-height:clamp(260px,72vw,400px)}
  .st-card-art .fan,.st-card--une .st-card-art .fan{inset:4% 6% 0 6%}
  .st-card-art .fan--1{inset:4% 22% -14% 22%}
  .st-row{grid-template-columns:auto minmax(0,1fr) auto}
  .st-row-meta{display:none}
  .pj-band{--ov:clamp(90px,26vw,160px)}
  .pj-band + .pj-intro{--ov:clamp(90px,26vw,160px)}
  .pj-band--cover,.pj-band--cover + .pj-intro{--ov:0px}
  .pj-band--portrait .pj-name{width:100%}
  .pj-band--portrait .pj-band-art{width:100%;height:clamp(320px,90vw,460px);margin:16px 0 0}
  .pj-name{width:100%;padding-right:clamp(70px,20vw,110px)}
  .pj-stamp{top:clamp(40px,10vw,64px);width:clamp(70px,18vw,100px)}
  .pj-band-art,.pj-band--cover .pj-band-art{width:100%;height:clamp(300px,80vw,480px);margin-top:clamp(20px,5vw,36px)}
  .pj-band--cover .pj-band-art{height:auto}
  .pj-intro{grid-template-columns:minmax(0,1fr);gap:0;padding-top:calc(var(--ov) + 24px)}
  .pj-band--cover + .pj-intro{padding-top:28px}
  .pj-intro::after{display:none}
  .pj-idea{grid-template-columns:minmax(0,1fr)}
  .pj-idea-art{aspect-ratio:4/3}
  .pj-idea-art img{width:42%}
  .pj-next-card{grid-template-columns:minmax(0,1fr)}
  .pj-next-art{min-height:200px}
}
@media(max-width:560px){
  .st-row-tag{font-size:14px}
  .pj-facts{grid-template-columns:1fr 1fr}
  .pj-facts>div{border-left:0;border-top:1px solid var(--rule)}
  .pj-facts>div:nth-child(-n+2){border-top:0}
  .pj-facts>div:nth-child(even){border-left:1px solid var(--rule)}
  .pj-steps li{grid-template-columns:1fr;gap:4px}
}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .st-title span,.pj-band-art .fan,.pj-stamp svg{animation:none}
  .fan img,.st-card,.st-row,.pj-next-card,.rond{transition:none}
}
@media print{.js .rv{opacity:1;transform:none}}

/* ================================================ accueil : la section « Projets »
   Deux cartes tirees au hasard parmi tous les projets (tools/build_projets.py). */
.home-pj-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;
  margin-bottom:clamp(24px,3vw,40px)}
.home-pj-head h2{margin:0}
.home-pj .st-grid{margin-top:0}
/* pas d'etirement de la derniere carte : sur l'accueil, deux cartes cote a cote */
.home-pj .st-grid>.st-card:nth-child(n){grid-column:auto}
.st-card[hidden]{display:none}
/* l'objet en portrait sur fond sombre : bords de la photo fondus dans la carte */
.is-dark .st-card-art .fan--portrait img{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent)}