#portfolio,
#overlayRoot #portfolio {
  --pf-noir:    #050506;   
  --pf-mur:     #141416;
  --pf-cimaise: #F2EFE9;
  --pf-cartel:  #8E8B85;
  --pf-cyan:    #31c7d2;
  --pf-ambre:   #ff9a3c;
  --pf-ligne:   #26262A;

  display: block;
  background: var(--pf-noir);
  color: var(--pf-cimaise);
  font-family: Archivo, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#portfolio *, #overlayRoot #portfolio * { box-sizing: border-box; }

#pf-expo {
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y proximity;
}
#overlayRoot #portfolio { height: 100vh; overflow: hidden; }
#overlayRoot #pf-expo { height: 100vh; }

#pf-expo::-webkit-scrollbar { width: 10px; }
#pf-expo::-webkit-scrollbar-track { background: transparent; }
#pf-expo::-webkit-scrollbar-thumb { background: rgba(242,239,233,.16); }
#pf-expo::-webkit-scrollbar-thumb:hover { background: rgba(242,239,233,.3); }

.pf-room {
  position: relative;
  min-height: 100dvh;
  scroll-snap-align: start;
  padding: 64px 20px 40px;
}
.pf-inner {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 104px);
}

.pf-floor { height: 1px; background: var(--pf-ligne); margin: 40px 0 24px; }

#portfolio .pf-h1, #overlayRoot #portfolio .pf-h1 {
  margin: 0;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: .98;
  letter-spacing: -.015em;
  color: var(--pf-cimaise);
  text-wrap: pretty;
}
#portfolio .pf-h2, #overlayRoot #portfolio .pf-h2 {
  margin: 0;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  color: var(--pf-cimaise);
  text-wrap: pretty;
}
#portfolio .pf-h3, #overlayRoot #portfolio .pf-h3 {
  margin: 0 0 16px;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  color: var(--pf-cimaise);
}
#portfolio .pf-lead, #overlayRoot #portfolio .pf-lead {
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.55;
  max-width: 60ch;
  color: var(--pf-cimaise);
}
#portfolio .pf-num, #overlayRoot #portfolio .pf-num {
  display: none;                       
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--pf-ambre);
  margin-bottom: 12px;
}

#portfolio .pf-cartel, #overlayRoot #portfolio .pf-cartel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 16px 0 0;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--pf-cartel);
}
#portfolio .pf-scroll, #overlayRoot #portfolio .pf-scroll {
  margin: auto 0 0;
  padding-top: 32px;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 14px;
  color: var(--pf-cartel);
}

.pf-ph { color: var(--pf-cartel); border-bottom: 1px dotted var(--pf-cartel); }

#portfolio .pf-link, #overlayRoot #portfolio .pf-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  color: var(--pf-cyan);
  text-decoration: none;
}
#portfolio .pf-link:hover, #overlayRoot #portfolio .pf-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
#portfolio .pf-muted, #overlayRoot #portfolio .pf-muted {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  color: var(--pf-cartel);
}
#portfolio .pf-url, #overlayRoot #portfolio .pf-url {
  margin-left: 8px;
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--pf-cartel);
}
#portfolio .pf-btn, #overlayRoot #portfolio .pf-btn {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 22px;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  border: 1px solid var(--pf-cimaise);
  background: transparent;
  color: var(--pf-cimaise);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}
#portfolio .pf-btn:hover, #overlayRoot #portfolio .pf-btn:hover { background: var(--pf-mur); }
#portfolio .pf-btn--fill, #overlayRoot #portfolio .pf-btn--fill {
  background: var(--pf-ambre);
  border-color: var(--pf-ambre);
  color: var(--pf-noir);
}
#portfolio .pf-btn--fill:hover, #overlayRoot #portfolio .pf-btn--fill:hover {
  background: #ffa955; border-color: #ffa955;
}
#portfolio .pf-back, #overlayRoot #portfolio .pf-back {
  color: var(--pf-cimaise);
  text-decoration: underline;
  text-decoration-color: var(--pf-cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.pf-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 24px;
}

#portfolio :focus-visible, #overlayRoot #portfolio :focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-color: var(--pf-cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
#portfolio .pf-btn:focus-visible,
#overlayRoot #portfolio .pf-btn:focus-visible {
  text-decoration: none;
  box-shadow: 0 2px 0 0 var(--pf-cyan);
}

.pf-pieces {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--pf-ligne);
  max-width: 560px;
}
.pf-pieces li { border-bottom: 1px solid var(--pf-ligne); }
#portfolio .pf-pieces a, #overlayRoot #portfolio .pf-pieces a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  min-height: 48px;
  padding: 12px 0;
  color: var(--pf-cimaise);
  text-decoration: none;
}
#portfolio .pf-pieces a:hover, #overlayRoot #portfolio .pf-pieces a:hover {
  text-decoration: underline;
  text-decoration-color: var(--pf-cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.pf-pieces a span:first-child { font-family: 'Chakra Petch', sans-serif; font-size: 18px; }
.pf-pieces a span:last-child {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 14px;
  color: var(--pf-cartel);
  text-align: right;
}

.pf-piece { position: relative; margin-bottom: 64px; }

.pf-browser {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--pf-mur);
  border: 1px solid var(--pf-ligne);
  box-shadow: 0 24px 0 rgba(0,0,0,.6);   
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pf-phone {
  position: absolute;
  right: 0;
  bottom: -28px;
  width: 30%;
  aspect-ratio: 9 / 19.5;
  background: var(--pf-mur);
  border: 1px solid var(--pf-ligne);
  box-shadow: 0 24px 0 rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pf-bar {
  height: 9%;
  min-height: 22px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 3%;
  border-bottom: 1px solid var(--pf-ligne);
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 0.75rem;
  color: var(--pf-cartel);
  white-space: nowrap;
  overflow: hidden;
}
.pf-bar i { display: block; width: 6px; height: 6px; background: var(--pf-ligne); flex: none; }
.pf-bar span { overflow: hidden; text-overflow: ellipsis; }
.pf-phone .pf-bar { height: 6%; font-size: 0.75rem; }

.pf-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 5%; padding: 5% 6%; }
.pf-phone .pf-screen { gap: 6%; padding: 8%; }

.pf-blk { background: var(--pf-ligne); }
.pf-ln  { height: 3px; background: var(--pf-ligne); }
.pf-ln--s { width: 40%; }
.pf-ln--m { width: 65%; }
.pf-hd { display: flex; align-items: center; gap: 4%; }
.pf-hd .pf-logo { width: 12%; height: 8px; background: var(--pf-cimaise); opacity: .5; }
.pf-hd .pf-nav { display: flex; gap: 3%; flex: 1; }
.pf-hd .pf-nav .pf-ln { width: 8%; }
.pf-grid6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5%; flex: 1; }
.pf-grid6 > div { display: flex; flex-direction: column; gap: 6%; }
.pf-grid6 .pf-blk { flex: 1; }
.pf-visual { flex: 1; background: #1C1C1F; }
.pf-form { display: flex; gap: 3%; }
.pf-form .pf-field { flex: 1; height: 12px; border: 1px solid var(--pf-ligne); }
.pf-phone .pf-field { height: 9px; }
.pf-agenda { display: flex; flex-direction: column; gap: 8%; }
.pf-agenda > div { display: flex; align-items: center; gap: 4%; }
.pf-agenda > div .pf-ln:first-child { width: 14%; }
.pf-list { flex: 1; display: flex; flex-direction: column; gap: 9%; }
.pf-list .pf-ln { height: 2px; }
.pf-grid1 .pf-blk { width: 100%; aspect-ratio: 1; }

.pf-acc { flex: none; width: 22%; height: 10px; background: var(--pf-accent); }
.pf-form .pf-acc { width: 18%; height: 12px; }
.pf-phone .pf-acc { width: 100%; height: 9px; }


.pf-shot-wrap {
  position: relative;   
  flex: 1;
  min-height: 0;
  display: block;
  overflow: hidden;
  background: var(--pf-mur);
}
.pf-shot {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.pf-perf {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0 8px;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 13px;
}
.pf-perf caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 10px;
  color: var(--pf-cartel);
  font-size: 12px;
}
.pf-perf th,
.pf-perf td {
  padding: 8px 6px;
  text-align: center;
  border-bottom: 1px solid var(--pf-ligne);
  font-weight: 400;
}
.pf-perf thead th {
  color: var(--pf-cartel);
  font-size: 0.75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.25;
  overflow-wrap: anywhere;   
}
.pf-perf tbody th {
  text-align: left;
  white-space: nowrap;
  color: var(--pf-cartel);
}
.pf-perf tbody td {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 20px;
  color: var(--pf-accent);
}
.pf-perf-note {
  color: var(--pf-cartel);
  font-size: 13px;
  margin: 0 0 4px;
}

@media (max-width: 520px) {
  .pf-perf { font-size: 12px; }
  .pf-perf thead th { font-size: 0.75rem; }
  .pf-perf tbody td { font-size: 17px; }
  .pf-perf th, .pf-perf td { padding: 7px 3px; }
}

.pf-fiche > summary { list-style: none; }
.pf-fiche > summary::-webkit-details-marker { display: none; }

.pf-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(5,5,6,.6);
  cursor: default;
}
.pf-panel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 80dvh;
  z-index: 60;
  overflow-y: auto;
  padding: 64px 20px 40px;
  background: var(--pf-mur);
  border-top: 1px solid var(--pf-ligne);
  animation: pf-up .3s ease-out both;
}
@keyframes pf-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes pf-side { from { transform: translateX(100%); } to { transform: translateX(0); } }

#portfolio .pf-panel p, #overlayRoot #portfolio .pf-panel p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  max-width: 60ch;
  color: var(--pf-cimaise);
}
.pf-panel ul {
  list-style: none;
  margin: 20px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.55;
}
.pf-panel li { position: relative; padding-left: 18px; }
.pf-panel li::before {
  content: "";
  position: absolute;
  left: 0; top: .65em;
  width: 4px; height: 4px;
  background: var(--pf-cartel);
}
#portfolio .pf-result, #overlayRoot #portfolio .pf-result {
  margin: 24px 0;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--pf-cimaise);
  text-wrap: pretty;
}
#portfolio .pf-credit, #overlayRoot #portfolio .pf-credit {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--pf-ligne);
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--pf-cartel);
}
.pf-panel .pf-link { margin-top: 16px; }

.pf-x {
  position: fixed;
  top: 8px; right: 8px;
  z-index: 70;
  width: 44px; height: 44px;   
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pf-cimaise);
  cursor: pointer;
}
.pf-x span { position: absolute; width: 20px; height: 1px; background: currentColor; }
.pf-x span:first-child { transform: rotate(45deg); }
.pf-x span:last-child  { transform: rotate(-45deg); }
.pf-panel .pf-x { position: absolute; top: 8px; right: 8px; z-index: 1; }

/* :not(#a):not(#b) : même poids que la règle commune de .kf-retour (fonts.css), qui sinon l'emporte et laissait
   « Retourner à l'accueil » par-dessus la fiche ; la croix de la fiche (.pf-x) le remplace. */
#portfolio:has(details.pf-fiche[open]) > .kf-retour:not(#a):not(#b),
#overlayRoot #portfolio:has(details.pf-fiche[open]) > .kf-retour:not(#a):not(#b),
#portfolio.pf-has-fiche > .kf-retour:not(#a):not(#b),
#overlayRoot #portfolio.pf-has-fiche > .kf-retour:not(#a):not(#b),
#portfolio:has(details.pf-fiche[open]) > .pf-idx,
#portfolio.pf-has-fiche > .pf-idx { display: none; }

.pf-idx { display: none; }
.pf-prog {
  position: fixed;
  top: 0; left: 0;
  z-index: 65;
  height: 2px;
  background: var(--pf-ambre);
  transition: width .3s ease-out;
}
.pf-mnum {
  position: fixed;
  top: 14px; left: 20px;
  z-index: 65;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--pf-ambre);
}

.pf-rideau {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 66dvh;
  z-index: 80;
  background: linear-gradient(to top,
    rgba(49,199,210,.30) 0%,
    rgba(49,199,210,.16) 45%,
    rgba(49,199,210,0)   100%);
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}
.pf-rideau.is-cover {
  transform: translateY(0);
  opacity: 1;
  transition: transform .32s ease-out, opacity .16s linear;
}
.pf-rideau.is-lift {
  transform: translateY(-100dvh);
  opacity: 0;
  transition: transform .42s ease-in, opacity .42s ease-in;
}
body.pf-curtain #scrollTopBtn { opacity: 0; transition: none; }

.pf-room--enter .pf-h1 { animation: pf-h1in .4s ease-out both; }
@keyframes pf-h1in { from { opacity: 0; } to { opacity: 1; } }

@media (min-width: 1024px) {
  #pf-expo { scroll-snap-type: y mandatory; }
  .pf-room { height: 100%; min-height: 0; scroll-snap-stop: always; padding: 0 80px 0 0; }

  .pf-inner {
    max-width: 1280px;
    margin: 0 auto;
    height: 100%;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr) 1px calc(33dvh - 1px);
    column-gap: 32px;
  }
  .pf-piece {
    grid-column: 1 / 9;
    grid-row: 1;
    align-self: stretch;
    min-height: 0;
    min-width: 0;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 90px 0 64px;
  }
  .pf-piece .pf-browser { height: 100%; width: auto; max-width: 100%; }
  .pf-phone { bottom: 36px; }

  .pf-head   { grid-column: 9 / 13; grid-row: 1; align-self: end; min-height: 0; padding-bottom: 28px; }
  .pf-text   { grid-column: 1 / 10; grid-row: 1; align-self: end; min-height: 0; padding: clamp(24px, 6dvh, 120px) 0 40px; }
  .pf-floor  { grid-column: 1 / 13; grid-row: 2; margin: 0; }
  .pf-actions{ grid-column: 9 / 13; grid-row: 3; margin-top: 28px; }
  .pf-scroll { grid-column: 1 / 13; grid-row: 3; margin: 0; padding-top: 28px; }

  #portfolio .pf-h1, #overlayRoot #portfolio .pf-h1 { font-size: min(88px, 7.4dvh); }
  #portfolio .pf-h2, #overlayRoot #portfolio .pf-h2 { font-size: min(72px, 6.2dvh); }
  #portfolio .pf-num, #overlayRoot #portfolio .pf-num { display: block; font-size: 16px; }
  #portfolio .pf-lead, #overlayRoot #portfolio .pf-lead { font-size: 17px; }
  #portfolio .pf-cartel, #overlayRoot #portfolio .pf-cartel { font-size: 15px; }
  #portfolio .pf-link, #overlayRoot #portfolio .pf-link { font-size: 16px; }
  #portfolio .pf-muted, #overlayRoot #portfolio .pf-muted { font-size: 16px; }

  .pf-room--sortie .pf-actions {
    grid-column: 1 / 13;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }
  .pf-room--sortie .pf-actions .pf-back { width: 100%; }

  .pf-panel {
    left: auto; top: 0; bottom: 0;
    width: 420px;
    height: 100dvh;
    padding: 72px 32px 40px;
    border-top: 0;
    border-left: 1px solid var(--pf-ligne);
    animation: pf-side .3s ease-out both;
  }
  .pf-backdrop { display: none; }

  .pf-idx {
    position: fixed;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 65;
    display: flex;
    flex-direction: column;
    gap: 22px;
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 700;
    font-size: 16px;
  }
  #portfolio .pf-idx a, #overlayRoot #portfolio .pf-idx a {
    min-height: 24px;
    color: var(--pf-cartel);
    text-decoration: none;
  }
  #portfolio .pf-idx a.is-current, #overlayRoot #portfolio .pf-idx a.is-current { color: var(--pf-ambre); }
  .pf-prog, .pf-mnum { display: none; }
}

@media (min-width: 1024px) and (max-height: 620px) {
  #pf-expo { scroll-snap-type: none; }
  .pf-room  { height: auto; min-height: 100dvh; }
  .pf-inner { height: auto; min-height: 100dvh; grid-template-rows: minmax(0, 1fr) 1px auto; }
  .pf-piece { padding: 56px 0 40px; }
  .pf-actions { padding-bottom: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  #pf-expo { scroll-snap-type: none; }
  .pf-rideau, .pf-rideau.is-cover, .pf-rideau.is-lift { display: none; }
  .pf-room--enter .pf-h1 { animation: none; }
  .pf-panel { animation: none; }
  .pf-prog { transition: none; }
}



.pf-room::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.pf-room[data-num]::before {
  content: attr(data-num);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: clamp(150px, 34vw, 380px);
  line-height: .8;
  letter-spacing: -.04em;
  color: color-mix(in srgb, var(--pf-accent, #31c7d2) 16%, var(--pf-noir));
}
/* Pas de z-index sur .pf-inner : il en faisait un contexte d'empilement par salle, où la fiche (fixe, z 60)
   restait enfermée sous la .pf-inner de la salle suivante, peinte après elle. Sans z-index, le contenu passe
   devant le grand numéro (::before, z 0) par l'ordre du document, et la fiche se range dans la pile de la page. */
.pf-inner { position: relative; }
/* Rien d'une salle (grand numéro à -.18em, maquettes) ne peint sur la salle voisine. clip, pas hidden : pas de
   conteneur de défilement (l'aimantation reste celle de #pf-expo), et la fiche fixe n'est pas rognée. */
.pf-room { overflow: clip; }

@media (min-width: 1024px) {
  .pf-room[data-num]::before { left: 20px; font-size: min(300px, 40dvh); }
}

.pf-floor { position: relative; background: var(--pf-accent, var(--pf-ligne)); }
.pf-floor::after {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: clamp(120px, 22%, 280px);
  height: 8px;
  background: var(--pf-accent, var(--pf-ligne));
}
.pf-room--enter .pf-floor,
.pf-room--sortie .pf-floor { background: var(--pf-ligne); }
.pf-room--enter .pf-floor::after,
.pf-room--sortie .pf-floor::after { background: var(--pf-ligne); }

#portfolio .pf-cartel, #overlayRoot #portfolio .pf-cartel {
  padding-left: 14px;
  border-left: 2px solid var(--pf-accent, var(--pf-ligne));
}

#portfolio .pf-num, #overlayRoot #portfolio .pf-num { color: var(--pf-accent, var(--pf-cimaise)); }

.pf-browser, .pf-shot-wrap {
  background: color-mix(in srgb, var(--pf-accent, #31c7d2) 7%, var(--pf-mur));
}

.pf-pieces {
  border-top: 0;
  background-image: linear-gradient(90deg,
    #26262A 0 25%, #C8375A 25% 43%, #1FA34A 43% 61%,
    #1B7FA8 61% 79%, #ff9a3c 79% 100%);
  background-repeat: no-repeat;
  background-size: 100% 6px;
  padding-top: 6px;
}

@media (min-width: 1024px) {
  #portfolio .pf-idx a.is-current,
  #overlayRoot #portfolio .pf-idx a.is-current { color: var(--pf-cimaise); }
  #portfolio .pf-idx a.is-current::after,
  #overlayRoot #portfolio .pf-idx a.is-current::after {
    content: '';
    display: block;
    height: 2px;
    margin-top: 4px;
    background: var(--pf-cyan);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pf-room::after { opacity: .04; }
}



#portfolio{--kf-retour-top:8px;--kf-retour-right:8px;--kf-retour-z:70}

#portfolio .pf-scroll, #overlayRoot #portfolio .pf-scroll {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 32px 0 0;
  padding-top: 0;
  color: var(--pf-cartel);
}
.pf-scroll-a {
  display: block;
  animation: pf-bob 2.4s ease-in-out infinite;
}
@keyframes pf-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
@media (min-width: 1024px) {
  #portfolio .pf-scroll, #overlayRoot #portfolio .pf-scroll { grid-column: auto; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-scroll-a { animation: none; }
}

body:has(.page-main #portfolio) #scrollTopBtn,
#overlayRoot.ov-page:has(#portfolio) ~ #scrollTopBtn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 45;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  background: var(--pf-noir, #050506);
  border: 1px solid #26262A;
  border-radius: 0;
  color: #F2EFE9;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body:has(.page-main #portfolio) #scrollTopBtn.is-visible,
#overlayRoot.ov-page:has(#portfolio) ~ #scrollTopBtn.is-visible {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease;
}
body:has(.page-main #portfolio) #scrollTopBtn:hover,
body:has(.page-main #portfolio) #scrollTopBtn:focus-visible,
#overlayRoot.ov-page:has(#portfolio) ~ #scrollTopBtn:hover,
#overlayRoot.ov-page:has(#portfolio) ~ #scrollTopBtn:focus-visible {
  border-color: #31c7d2;
  box-shadow: none;
}
@media (max-width: 640px) {
  body:has(.page-main #portfolio) #scrollTopBtn,
  #overlayRoot.ov-page:has(#portfolio) ~ #scrollTopBtn { right: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  body:has(.page-main #portfolio) #scrollTopBtn,
  #overlayRoot.ov-page:has(#portfolio) ~ #scrollTopBtn { transition: opacity .01s linear, visibility 0s; }
}