@font-face {
  font-family: "System";
  src: local("Arial");
}

:root {
  --page-bg: #fff;
  --text: #111;
  --pad-x: 18px;
  --pad-y: 16px;
  --header-h: 54px;
  --footer-h: 60px;
  --image-max-width: 88vw;
  --image-max-height: calc(100dvh - var(--header-h) - var(--footer-h) - 24px);
  --transition: 180ms;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

html {
  background: var(--page-bg);
}

body {
  overflow: hidden;
  background: var(--page-bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button,
a {
  font: inherit;
  color: inherit;
}

a {
  text-decoration: none;
}

.slideshow {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--page-bg);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: 100%;
  min-height: var(--header-h);
  padding: var(--pad-y) var(--pad-x) 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}

.site-title,
.info-button {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.site-title:hover {
  opacity: .55;
}

.info-button {
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.info-button:hover {
  opacity: .55;
}

.stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding:
    calc(var(--header-h) + 4px)
    var(--pad-x)
    calc(var(--footer-h) + 4px);
}

.slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--transition) ease,
    visibility 0s linear var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--transition) ease,
    visibility 0s linear 0s;
}

.slide img {
  display: block;
  width: auto;
  height: auto;
  max-width: var(--image-max-width);
  max-height: var(--image-max-height);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.nav-zone {
  position: absolute;
  top: var(--header-h);
  bottom: var(--footer-h);
  z-index: 20;
  width: 50%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: none;
  -webkit-tap-highlight-color: transparent;
}

.nav-prev {
  left: 0;
}

.nav-next {
  right: 0;
}

.slide-meta {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 40;
  width: 100%;
  min-height: var(--footer-h);
  padding: 0 var(--pad-x) var(--pad-y);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 16px;
  pointer-events: none;
}

.caption {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
}

.caption-title {
  font-weight: 600;
}

.caption-text {
  font-weight: 400;
}

.counter {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.counter-separator {
  padding: 0 3px;
}

.cursor-label {
  position: fixed;
  z-index: 60;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  font-size: 18px;
  line-height: 1;
  transition: opacity 80ms linear;
  mix-blend-mode: difference;
  color: white;
}

.cursor-label.is-visible {
  opacity: 1;
}

.info-panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  padding:
    calc(var(--header-h) + 18px)
    var(--pad-x)
    calc(var(--footer-h) + var(--pad-y));
  background: rgba(255,255,255,.97);
}

.info-panel[hidden] {
  display: none;
}

.info-content {
  max-width: 520px;
  font-size: clamp(20px, 2.4vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.info-content p {
  margin: 0 0 1em;
}

.info-content a {
  text-decoration: underline;
  text-underline-offset: .12em;
}

@media (max-width: 720px), (hover: none) {
  :root {
    --pad-x: 12px;
    --pad-y: 12px;
    --header-h: 48px;
    --footer-h: 74px;
    --image-max-width: calc(100vw - 24px);
    --image-max-height: calc(100dvh - var(--header-h) - var(--footer-h) - 12px);
  }

  body {
    font-size: 11px;
  }

  .nav-zone {
    cursor: pointer;
  }

  .cursor-label {
    display: none;
  }

  .caption {
    display: block;
  }

  .caption-title,
  .caption-text {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slide {
    transition: none;
  }
}

.info-close {
  position: absolute;
  top: var(--pad-y);
  right: var(--pad-x);
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.info-close:hover {
  opacity: .55;
}


/* =========================================================
   HEADER CENTRÉ VERTICALEMENT — comme la capture de référence
   ========================================================= */

.site-header {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 40;

  width: 100%;
  min-height: 0;
  height: auto;

  padding: 0 8vw;

  display: flex;
  justify-content: space-between;
  align-items: center;

  pointer-events: none;
}

.site-title,
.site-nav {
  position: relative;
  z-index: 2;
  pointer-events: auto;

  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(22px, 2.05vw, 42px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  color: #aaa;
  white-space: nowrap;
}

.site-title:hover,
.site-nav a:hover,
.site-nav button:hover {
  color: #111;
  opacity: 1;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: .22em;
}

.site-nav a,
.site-nav button {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* L'image reste centrée indépendamment du header */
.stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 8px;
}

.slide img {
  max-width: min(34vw, 720px);
  max-height: calc(100dvh - 16px);
}

/* Le header traverse visuellement la zone de l'image,
   comme sur la capture. */
.nav-zone {
  top: 0;
  bottom: 0;
}

/* Mobile : on garde le principe mais on évite le débordement */
@media (max-width: 760px) {
  .site-header {
    top: 50%;
    padding: 0 12px;
    align-items: center;
  }

  .site-title,
  .site-nav {
    font-size: clamp(14px, 4vw, 22px);
  }

  .site-title {
    max-width: 48%;
    white-space: normal;
  }

  .site-nav {
    max-width: 48%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .slide img {
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }
}


/* Copyright en bas à droite */
.slide-meta {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.copyright {
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}

/* Masque l'ancien compteur pour ne garder que la phrase */
.counter {
  display: none;
}

@media (max-width: 700px) {
  .copyright {
    white-space: normal;
    max-width: 80vw;
  }
}


/* Footer final : copyright à gauche, compteur à droite */
.slide-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  width: 100%;
}

.copyright {
  margin: 0;
  justify-self: start;
  text-align: left;
  white-space: nowrap;
}

.counter {
  display: block;
  justify-self: end;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  .copyright {
    max-width: 70vw;
    white-space: normal;
  }
}


/* =========================================================
   ABOUT OVERLAY — mise en page inspirée de la capture fournie
   ========================================================= */

.info-panel {
  position: fixed;
  inset: 0;
  z-index: 200;

  /* Fond blanc translucide : la page reste légèrement visible */
  background: rgba(255, 255, 255, 0.93);

  padding: 0;
  color: #111;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.info-panel[hidden] {
  display: none;
}

.info-top {
  position: sticky;
  top: 0;
  z-index: 3;

  width: 100%;
  min-height: 38px;

  padding: 9px 7px 0;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  pointer-events: none;
}

.info-label,
.info-close {
  pointer-events: auto;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
}

.info-close {
  position: static;

  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;
  color: inherit;

  cursor: pointer;
}

.info-close:hover {
  opacity: .5;
}

/* Deux colonnes alignées en haut à gauche */
.info-layout {
  display: grid;
  grid-template-columns: minmax(300px, 390px) minmax(180px, 250px);
  column-gap: 34px;

  align-items: start;

  width: min(760px, calc(100vw - 14px));

  padding: 5px 7px 36px;
}

.info-about,
.info-contact {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.info-about p,
.info-contact p {
  margin: 0 0 17px;
}

.info-contact a {
  color: inherit;
  text-decoration: none;
}

.info-contact a:hover {
  text-decoration: underline;
  text-underline-offset: .12em;
}

/* La page derrière est volontairement perceptible,
   comme sur la capture. */
body.info-is-open .site-header,
body.info-is-open .stage,
body.info-is-open .slide-meta {
  opacity: .08;
}

body.info-is-open .nav-zone {
  pointer-events: none;
}

/* Responsive */
@media (max-width: 760px) {
  .info-panel {
    background: rgba(255, 255, 255, 0.96);
  }

  .info-top {
    padding: 9px 10px 0;
  }

  .info-layout {
    width: 100%;
    grid-template-columns: 1fr;
    row-gap: 10px;
    padding: 12px 10px 34px;
  }

  .info-about,
  .info-contact {
    font-size: 13px;
    line-height: 1.08;
  }

  .info-contact {
    margin-top: 2px;
  }
}


/* =========================================================
   INDEX OVERLAY — inspiré de la capture fournie
   ========================================================= */

.index-button {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.index-panel {
  position: fixed;
  inset: 0;
  z-index: 210;
  padding: 0;

  background: rgba(255,255,255,.93);
  color: #111;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.index-panel[hidden] {
  display: none;
}

.index-top {
  position: sticky;
  top: 0;
  z-index: 5;

  min-height: 39px;
  padding: 10px 9px 0;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  background: rgba(255,255,255,.93);
}

.index-label,
.index-close {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.index-close {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.index-close:hover {
  opacity: .5;
}

/* Grille type Cargo : 5 colonnes, alignée en haut */
.index-grid {
  width: 100%;
  padding: 0 9px 16px;

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 18px;

  align-items: start;
}

.index-card {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.index-card img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.index-caption {
  display: block;
  padding-top: 7px;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.index-card:hover .index-caption {
  opacity: .5;
}

/* Le site principal reste très légèrement visible */
body.index-is-open .site-header,
body.index-is-open .stage,
body.index-is-open .slide-meta {
  opacity: .07;
}

body.index-is-open .nav-zone {
  pointer-events: none;
}

/* Responsive */
@media (max-width: 1100px) {
  .index-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .index-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 14px;
  }
}

@media (max-width: 600px) {
  .index-panel {
    background: rgba(255,255,255,.97);
  }

  .index-top {
    padding: 9px 7px 0;
  }

  .index-grid {
    padding: 0 7px 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 7px;
    row-gap: 12px;
  }

  .index-caption {
    font-size: 10px;
    padding-top: 5px;
  }
}


/* =========================================================
   PROJECT PANEL — fiche projet sur la moitié droite
   ========================================================= */

.project-panel {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-columns: 50% 50%;
  pointer-events: none;
}

.project-panel[hidden] {
  display: none;
}

/* Partie gauche : l'Index reste visible, très éclairci */
.project-backdrop {
  grid-column: 1;
  grid-row: 1;
  background: rgba(255,255,255,.10);
  pointer-events: auto;
}

/* Fiche projet */
.project-sheet {
  grid-column: 2;
  grid-row: 1;

  min-width: 0;
  height: 100dvh;

  background: rgba(255,255,255,.94);
  color: #111;

  display: flex;
  flex-direction: column;

  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  pointer-events: auto;
}

.project-head {
  position: sticky;
  top: 0;
  z-index: 5;

  min-height: 40px;
  padding: 10px 8px 7px;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  background: rgba(255,255,255,.94);

  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1;
  font-weight: 400;
}

.project-heading {
  display: flex;
  gap: 14px;
}

.project-close,
.project-return {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.project-close:hover,
.project-return:hover {
  opacity: .5;
}

.project-media {
  width: 100%;
  padding: 0 8px;
}

.project-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: top center;
}

/* Texte sous l'image : deux colonnes comme sur la capture */
.project-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;

  padding: 16px 8px 44px;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  line-height: 1.12;
}

.project-info-grid h2 {
  margin: 0 0 14px;
  font: inherit;
  font-weight: 400;
}

.project-info-grid p {
  margin: 0;
}

.project-foot {
  margin-top: auto;

  padding: 0 8px 10px;

  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  line-height: 1;
}

/* Pendant l'ouverture du projet, le contenu de l'Index derrière
   reste présent mais très peu contrasté. */
body.project-is-open .index-panel {
  opacity: .13;
  pointer-events: none;
}

body.project-is-open .site-header,
body.project-is-open .stage,
body.project-is-open .slide-meta {
  opacity: .03;
}

@media (max-width: 900px) {
  .project-panel {
    grid-template-columns: 35% 65%;
  }

  .project-sheet {
    grid-column: 2;
  }

  .project-info-grid {
    column-gap: 24px;
  }
}

@media (max-width: 650px) {
  .project-panel {
    display: block;
  }

  .project-backdrop {
    display: none;
  }

  .project-sheet {
    width: 100%;
    height: 100dvh;
  }

  .project-info-grid {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
}


/* =========================================================
   CV OVERLAY
   ========================================================= */

.cv-open {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.cv-open:hover {
  text-decoration: underline;
  text-underline-offset: .12em;
}

.cv-panel {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(255,255,255,.94);
  color: #111;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.cv-panel[hidden] {
  display: none;
}

.cv-top {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 38px;
  padding: 9px 10px 0;
  display: grid;
  grid-template-columns: 25% 25% 1fr;
  align-items: start;
  background: rgba(255,255,255,.94);
}

.cv-ghost {
  opacity: .08;
}

.cv-title,
.cv-ghost,
.cv-close,
.cv-footer {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.cv-close {
  justify-self: end;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.cv-close:hover {
  opacity: .5;
}

.cv-layout {
  display: grid;
  grid-template-columns: 25% 25% 1fr;
  min-height: calc(100dvh - 70px);
  padding: 4px 10px 54px;
}

.cv-labels {
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.cv-labels h2 {
  margin: 0;
  font: inherit;
  font-weight: 400;
}

.employment-label {
  margin-top: 104px !important;
}

.practice-label {
  position: absolute;
  left: 0;
  bottom: 12px;
}

.cv-content {
  grid-column: 2;
}

.cv-list {
  max-width: 310px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.02;
  letter-spacing: -0.015em;
}

.cv-list p {
  margin: 0 0 16px;
}

.cv-list em {
  font-style: italic;
}

.practice-block {
  margin-top: 18px !important;
}

.cv-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 0 10px 9px;
  min-height: 34px;
  display: grid;
  grid-template-columns: 25% 25% 1fr;
  align-items: end;
  background: rgba(255,255,255,.96);
}

.cv-close-bottom {
  justify-self: end;
}

/* Le About reste très légèrement perceptible derrière */
body.cv-is-open .info-panel {
  opacity: .1;
  pointer-events: none;
}

body.cv-is-open .site-header,
body.cv-is-open .stage,
body.cv-is-open .slide-meta {
  opacity: .02;
}

@media (max-width: 760px) {
  .cv-panel {
    background: rgba(255,255,255,.98);
  }

  .cv-top {
    grid-template-columns: 1fr auto;
  }

  .cv-ghost {
    display: none;
  }

  .cv-title {
    grid-column: 1;
  }

  .cv-layout {
    grid-template-columns: 1fr;
    padding: 14px 10px 64px;
  }

  .cv-labels {
    display: none;
  }

  .cv-content {
    grid-column: 1;
  }

  .cv-list {
    max-width: 100%;
    font-size: 13px;
    line-height: 1.08;
  }

  .cv-list::before {
    content: "Education / Employment / Areas of Practice";
    display: block;
    margin-bottom: 18px;
  }

  .cv-footer {
    grid-template-columns: 1fr auto auto;
    gap: 16px;
  }
}


/* =========================================================
   MOBILE HEADER — comportement comme la capture fournie
   ========================================================= */

@media (max-width: 700px) {
  :root {
    --mobile-top-pad: 10px;
    --mobile-side-pad: 14px;
  }

  body {
    overflow: hidden;
  }

  .site-header {
    position: fixed;
    top: var(--mobile-top-pad);
    left: 0;
    right: 0;
    transform: none;

    width: 100%;
    height: auto;
    min-height: 0;

    padding: 0 var(--mobile-side-pad);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    gap: 2px;

    pointer-events: none;
  }

  .site-title,
  .site-nav {
    width: 100%;
    max-width: none;

    text-align: center;
    white-space: nowrap;

    pointer-events: auto;
  }

  .site-title {
    font-size: clamp(25px, 7.4vw, 34px);
    font-weight: 600;
    line-height: .98;
    letter-spacing: -0.045em;
  }

  .site-nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;

    gap: .24em;

    font-size: clamp(25px, 7.4vw, 34px);
    font-weight: 600;
    line-height: .98;
    letter-spacing: -0.045em;
  }

  .site-nav a,
  .site-nav button {
    flex: 0 0 auto;
  }

  /* Image plus basse, comme dans la capture */
  .stage {
    inset: 0;
    padding:
      150px
      var(--mobile-side-pad)
      88px;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .slide {
    width: 100%;
    height: 100%;
  }

  .slide img {
    display: block;

    max-width: 100%;
    max-height: 48dvh;

    width: auto;
    height: auto;

    object-fit: contain;
  }

  /* Navigation tactile invisible sur les deux moitiés */
  .nav-zone {
    top: 115px;
    bottom: 72px;
    width: 50%;
  }

  /* Footer comme sur la capture */
  .slide-meta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    min-height: 54px;

    padding:
      0
      var(--mobile-side-pad)
      14px;

    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;

    font-size: 12px;
    line-height: 1.05;
  }

  .copyright {
    max-width: none;
    white-space: nowrap;
    text-align: left;
  }

  .counter {
    display: block;
    text-align: right;
  }
}

/* Très petits écrans : conserve 2 lignes nettes */
@media (max-width: 420px) {
  .site-title,
  .site-nav {
    font-size: clamp(20px, 7vw, 29px);
  }

  .site-nav {
    gap: .18em;
  }

  .stage {
    padding-top: 135px;
  }

  .copyright {
    font-size: 10px;
  }

  .counter {
    font-size: 10px;
  }
}


/* =========================================================
   CORRECTION MOBILE — MENU + SLIDER
   ========================================================= */

@media (max-width: 700px) {

  /* Le bandeau reste entièrement visible, même sur petit écran */
  .site-header {
    top: 9px;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    overflow: visible;
  }

  .site-title {
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;

    /* Plus petit que la version précédente afin que
       "AKA (Alexandra Karaolanov Atelier)" tienne à l'écran */
    font-size: clamp(17px, 5.15vw, 29px);
    line-height: 1;
    letter-spacing: -0.04em;

    white-space: nowrap;
    text-align: center;
  }

  .site-nav {
    width: 100%;
    padding: 0;
    margin: 1px 0 0;
    box-sizing: border-box;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;

    gap: .28em;

    /* Taille indépendante du titre, tout en restant
       suffisamment compacte pour ne jamais sortir du viewport */
    font-size: clamp(20px, 6vw, 31px);
    line-height: 1;
    letter-spacing: -0.045em;

    white-space: nowrap;
  }

  .site-nav a,
  .site-nav button {
    min-width: 0;
    flex: 0 0 auto;
  }

  /* Zone du slideshow : véritable centrage dans l'espace
     disponible entre le menu et le footer */
  .stage {
    position: fixed;
    top: 78px;
    right: 0;
    bottom: 58px;
    left: 0;

    width: 100%;
    height: auto;

    padding: 8px 12px;
    box-sizing: border-box;

    display: grid;
    place-items: center;
  }

  .slide {
    grid-area: 1 / 1;

    width: 100%;
    height: 100%;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Image nettement plus grande tout en conservant son ratio */
  .slide img {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 72dvh;

    object-fit: contain;
    object-position: center center;

    margin: auto;
  }

  /* Les zones tactiles suivent la nouvelle zone d'image */
  .nav-zone {
    top: 78px;
    bottom: 58px;
  }
}

@media (max-width: 420px) {
  .site-header {
    top: 8px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .site-title {
    font-size: clamp(16px, 4.85vw, 21px);
  }

  .site-nav {
    font-size: clamp(19px, 5.55vw, 24px);
    gap: .22em;
  }

  .stage {
    top: 68px;
    bottom: 54px;
    padding: 6px 10px;
  }

  .slide img {
    max-width: 100%;
    max-height: 74dvh;
  }

  .nav-zone {
    top: 68px;
    bottom: 54px;
  }
}


/* =========================================================
   HOMEPAGE SLIDER — proportions proches de la référence
   Image grande, verticale et centrée dans le viewport
   ========================================================= */

@media (min-width: 701px) {
  .stage {
    position: fixed;
    inset: 0;
    padding: 14px 0 18px;
    display: grid;
    place-items: center;
  }

  .slide {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .slide img {
    display: block;
    width: auto;
    height: auto;
    max-width: 48vw;
    max-height: calc(100dvh - 32px);
    object-fit: contain;
    object-position: center;
    margin: auto;
  }
}

/* Mobile : image également plus présente, mais sans toucher au menu */
@media (max-width: 700px) {
  .stage {
    padding-left: 6px;
    padding-right: 6px;
  }

  .slide img {
    max-width: calc(100vw - 12px);
    max-height: 78dvh;
    object-fit: contain;
    object-position: center;
  }
}


/* =========================================================
   SLIDER — HAUTEUR IDENTIQUE POUR TOUTES LES IMAGES
   Les marges haut/bas restent fixes quelle que soit l'image.
   ========================================================= */

@media (min-width: 701px) {
  .stage {
    --slider-margin-y: 14px;
    padding: var(--slider-margin-y) 0;
  }

  .slide img {
    /* Toutes les images ont exactement la même hauteur visuelle.
       La largeur varie automatiquement selon leur ratio. */
    height: calc(100dvh - (var(--slider-margin-y) * 2));
    width: auto;

    max-height: none;
    max-width: 92vw;

    object-fit: contain;
    object-position: center;
    margin: 0 auto;
  }
}

@media (max-width: 700px) {
  .stage {
    --slider-mobile-top: 78px;
    --slider-mobile-bottom: 58px;

    top: var(--slider-mobile-top);
    bottom: var(--slider-mobile-bottom);
    padding: 6px;
  }

  .slide img {
    /* Même hauteur pour chaque slide sur mobile aussi */
    height: 100%;
    width: auto;

    max-height: 100%;
    max-width: calc(100vw - 12px);

    object-fit: contain;
    object-position: center;
    margin: auto;
  }
}

@media (max-width: 420px) {
  .stage {
    --slider-mobile-top: 68px;
    --slider-mobile-bottom: 54px;
    padding: 5px;
  }

  .slide img {
    height: 100%;
    width: auto;
    max-height: 100%;
    max-width: calc(100vw - 10px);
  }
}


/* =========================================================
   SYSTÈME TYPOGRAPHIQUE UNIFIÉ
   3 corps seulement :
   1. Bandeau / menu
   2. Textes de contenu
   3. Copyrights / infos secondaires
   ========================================================= */

:root {
  --type-menu: 32px;
  --type-text: 14px;
  --type-small: 10px;
}

/* 1 — BANDEAU / MENU */
.site-title,
.site-nav,
.site-nav a,
.site-nav button,
.index-button,
.info-button {
  font-size: var(--type-menu) !important;
  line-height: 1;
}

/* 2 — TOUS LES TEXTES DE CONTENU */
.info-label,
.info-close,
.info-about,
.info-contact,
.index-label,
.index-close,
.index-caption,
.project-head,
.project-info-grid,
.project-foot,
.project-close,
.project-return,
.cv-title,
.cv-ghost,
.cv-close,
.cv-footer,
.cv-labels,
.cv-list,
.cv-open,
.project-panel,
.index-panel,
.info-panel,
.cv-panel {
  font-size: var(--type-text) !important;
  line-height: 1.15;
}

/* 3 — COPYRIGHT / COMPTEUR / PETITES INFOS */
.copyright,
.counter,
.slide-meta {
  font-size: var(--type-small) !important;
  line-height: 1.1;
}

/* Responsive : les 3 familles restent cohérentes */
@media (max-width: 700px) {
  :root {
    --type-menu: clamp(20px, 5.8vw, 29px);
    --type-text: 13px;
    --type-small: 9px;
  }

  .site-title {
    font-size: clamp(17px, 5vw, 24px) !important;
  }

  .site-nav,
  .site-nav a,
  .site-nav button,
  .index-button,
  .info-button {
    font-size: var(--type-menu) !important;
  }
}

@media (max-width: 420px) {
  :root {
    --type-menu: clamp(18px, 5.5vw, 23px);
    --type-text: 12px;
    --type-small: 8px;
  }

  .site-title {
    font-size: clamp(16px, 4.8vw, 20px) !important;
  }
}


/* =========================================================
   HEADER MOBILE — taille unifiée sur le modèle de AKA
   ========================================================= */

@media (max-width: 700px) {
  .site-title,
  .site-nav,
  .site-nav a,
  .site-nav button,
  .index-button,
  .info-button {
    font-size: clamp(16px, 5vw, 24px) !important;
    line-height: 1;
  }
}

@media (max-width: 420px) {
  .site-title,
  .site-nav,
  .site-nav a,
  .site-nav button,
  .index-button,
  .info-button {
    font-size: clamp(16px, 5vw, 24px) !important;
  }
}


/* Header mobile — interlignage plus serré */
@media (max-width: 700px) {
  .site-header {
    gap: 0 !important;
  }

  .site-title,
  .site-nav,
  .site-nav a,
  .site-nav button {
    line-height: 0.88 !important;
  }

  .site-nav {
    margin-top: 0 !important;
  }
}


/* Mobile — marges latérales légèrement augmentées */
@media (max-width: 700px) {
  .site-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .stage {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .slide img {
    max-width: calc(100vw - 24px) !important;
  }

  .slide-meta {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 420px) {
  .site-header {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .stage {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .slide img {
    max-width: calc(100vw - 20px) !important;
  }

  .slide-meta {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}


/* =========================================================
   MOBILE — IMAGE CENTRÉE SUR LE VIEWPORT COMPLET
   L'image ignore la hauteur du header/footer et peut passer
   derrière eux, comme sur la référence.
   ========================================================= */

@media (max-width: 700px) {
  .stage {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    padding: 16px !important;
    box-sizing: border-box;

    display: grid !important;
    place-items: center !important;

    z-index: 1;
  }

  .slide {
    grid-area: 1 / 1;

    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .slide img {
    display: block;

    /* Hauteur commune + centrage par rapport à l'écran entier */
    height: calc(100dvh - 32px) !important;
    width: auto !important;

    max-height: calc(100dvh - 32px) !important;
    max-width: calc(100vw - 32px) !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: auto !important;
  }

  /* Header et footer restent au-dessus de l'image */
  .site-header {
    z-index: 20 !important;
  }

  .slide-meta {
    z-index: 20 !important;
  }

  /* Zones de navigation sur toute la hauteur */
  .nav-zone {
    top: 0 !important;
    bottom: 0 !important;
    z-index: 10;
  }
}

@media (max-width: 420px) {
  .stage {
    padding: 14px !important;
  }

  .slide img {
    height: calc(100dvh - 28px) !important;
    max-height: calc(100dvh - 28px) !important;
    max-width: calc(100vw - 28px) !important;
  }
}


/* AKA — aucun effet au survol */
.site-title,
.site-title:hover,
.site-title:focus,
.site-title:active {
  opacity: 1 !important;
  color: inherit !important;
  background: transparent !important;
  text-decoration: none !important;
  filter: none !important;
  transform: none !important;
}


/* AKA — gris permanent, sans aucun changement au hover */
.site-title,
.site-title:hover,
.site-title:focus,
.site-title:active,
.site-title:visited {
  color: #a6a6a6 !important;
  opacity: 1 !important;
  background: transparent !important;
  text-decoration: none !important;
  filter: none !important;
  transform: none !important;
}


/* Popups : transparence légère */
.info-panel,
.index-panel,
.cv-panel,
.project-panel,
.project-sheet {
  background-color: rgba(255, 255, 255, 0.88) !important;
}


/* Popups : blanc à 88 % d'opacité */
.info-panel,
.index-panel,
.cv-panel,
.project-panel,
.project-sheet {
  background-color: rgba(255, 255, 255, 0.88) !important;
}


/* =========================================================
   INDEX — POPUP INDÉPENDANTE POUR CHAQUE PROJET
   ========================================================= */
.independent-project-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: transparent;
  pointer-events: none;
}

.independent-project-modal[hidden] {
  display: none;
}

.independent-project-sheet {
  position: absolute;
  top: 0;
  right: 0;
  width: 50vw;
  height: 100dvh;
  overflow-y: auto;
  box-sizing: border-box;
  background: rgba(255,255,255,.80);
  pointer-events: auto;
}

.independent-project-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 10px;
  background: rgba(255,255,255,.80);
}

.independent-project-close,
.independent-project-return {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.independent-project-body {
  padding: 0 10px 54px;
}

.independent-project-media {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.independent-project-media img {
  display: block;
  width: 100%;
  height: auto;
}

.independent-project-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding-top: 14px;
}

.independent-project-label {
  margin-bottom: 12px;
}

.independent-project-foot {
  display: flex;
  justify-content: space-between;
  padding: 18px 10px 10px;
}

body.independent-project-open .index-panel {
  opacity: .22 !important;
}

body.independent-project-open .index-panel .index-card {
  pointer-events: none;
}

@media (max-width: 700px) {
  .independent-project-sheet {
    width: 100vw;
  }

  .independent-project-info {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   BOUTONS CLOSE — TYPOGRAPHIE HOMOGÈNE ET STABLE
   ========================================================= */

.info-close,
.index-close,
.cv-close,
.project-close,
.independent-project-close,
.cv-close-bottom {
  appearance: none !important;
  -webkit-appearance: none !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  background: transparent !important;
  color: inherit !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: var(--type-text) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;

  text-decoration: none !important;
  white-space: nowrap !important;

  width: auto !important;
  min-width: 0 !important;
  height: auto !important;

  cursor: pointer;
}

/* Aucun changement de métrique au hover/focus :
   le bouton ne "bouge" plus. */
.info-close:hover,
.index-close:hover,
.cv-close:hover,
.project-close:hover,
.independent-project-close:hover,
.info-close:focus,
.index-close:focus,
.cv-close:focus,
.project-close:focus,
.independent-project-close:focus {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: var(--type-text) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  transform: none !important;
}


/* =========================================================
   HOMEPAGE — STORY SLIDER
   Défilement horizontal + progression automatique.
   ========================================================= */

.stage {
  overflow: hidden;
}

/* Les slides se déplacent horizontalement au lieu de simplement fondre. */
.slide {
  opacity: 0 !important;
  visibility: hidden;
  transform: translate3d(100%, 0, 0);
  transition:
    transform 520ms cubic-bezier(.77, 0, .18, 1),
    opacity 260ms ease,
    visibility 0s linear 520ms !important;
  will-change: transform;
}

.slide.is-active {
  opacity: 1 !important;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition:
    transform 520ms cubic-bezier(.77, 0, .18, 1),
    opacity 260ms ease,
    visibility 0s linear 0s !important;
}

.slide.is-entering-next {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(100%, 0, 0) !important;
  transition: none !important;
}

.slide.is-entering-prev {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(-100%, 0, 0) !important;
  transition: none !important;
}

.slide.is-leaving-next {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(-100%, 0, 0) !important;
}

.slide.is-leaving-prev {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(100%, 0, 0) !important;
}

/* Progression très discrète, dans l'esprit des stories. */
.story-progress {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 19;

  width: min(360px, calc(100vw - 32px));
  display: flex;
  gap: 3px;

  pointer-events: none;
}

.story-progress-item {
  flex: 1 1 0;
  height: 1px;
  overflow: hidden;
  background: rgba(0, 0, 0, .15);
}

.story-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
}

/* Sur desktop, le bandeau central reste prioritaire visuellement. */
@media (min-width: 701px) {
  .story-progress {
    opacity: .42;
  }
}

/* Sur mobile, la progression reste sous la ligne de menu et ne gêne pas AKA. */
@media (max-width: 700px) {
  .story-progress {
    top: 52px;
    width: calc(100vw - 32px);
    opacity: .5;
  }
}

@media (max-width: 420px) {
  .story-progress {
    top: 48px;
    width: calc(100vw - 28px);
  }
}

/* Accessibilité : aucune animation continue si l'utilisateur réduit les mouvements. */
@media (prefers-reduced-motion: reduce) {
  .slide,
  .slide.is-active,
  .slide.is-leaving-next,
  .slide.is-leaving-prev {
    transition-duration: 0.01ms !important;
  }

  .story-progress-fill {
    transition: none !important;
  }
}


/* Story progress — pleine largeur du viewport */
.story-progress {
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  transform: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  .story-progress {
    width: 100vw !important;
  }
}

@media (max-width: 420px) {
  .story-progress {
    width: 100vw !important;
  }
}


/* Story progress — pleine largeur utile, alignée sur les marges du site */
.story-progress {
  left: 8vw !important;
  right: 8vw !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
  padding: 0 !important;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  .story-progress {
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
  }
}

@media (max-width: 420px) {
  .story-progress {
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
  }
}


/* Story progress — alignement horizontal exact sur les crédits */
.story-progress {
  left: 14px !important !important;
  right: 14px !important !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 700px) {
  .story-progress {
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
  }
}

@media (max-width: 420px) {
  .story-progress {
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
  }
}


/* Story progress — marge latérale fine d'environ 2 mm */
.story-progress {
  left: 2mm !important;
  right: 2mm !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 700px) {
  .story-progress {
    left: 2mm !important;
    right: 2mm !important;
    width: auto !important;
  }
}

@media (max-width: 420px) {
  .story-progress {
    left: 2mm !important;
    right: 2mm !important;
    width: auto !important;
  }
}


/* =========================================================
   DONNÉES PROJET ÉDITABLES DIRECTEMENT DANS INDEX.HTML
   ========================================================= */
.index-card .project-content {
  display: none !important;
}


/* =========================================================
   POPUPS PROJET — HTML + CSS UNIQUEMENT
   ========================================================= */

.html-project-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 600;
}

.html-project-modal:target {
  display: block;
}

.html-project-backdrop {
  position: absolute;
  inset: 0;
  display: block;
  background: rgba(255,255,255,.80);
}

.html-project-sheet {
  position: absolute;
  top: 0;
  right: 0;
  width: 50vw;
  height: 100dvh;
  overflow-y: auto;
  box-sizing: border-box;
  background: rgba(255,255,255,.80);
  z-index: 2;
  -webkit-overflow-scrolling: touch;
}

.html-project-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 10px;
  background: rgba(255,255,255,.80);
}

.html-project-close,
.html-project-return {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  font: inherit;
}

.html-project-body {
  padding: 0 10px 54px;
}

.html-project-media {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 14px 0 20px;
}

.html-project-media img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
}

.html-project-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding-top: 14px;
}

.html-project-label {
  margin-bottom: 1em;
}

.html-project-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 18px 10px 10px;
}

.project-content {
  display: none !important;
}

@media (max-width: 700px) {
  .html-project-sheet {
    width: 100vw;
  }

  .html-project-media {
    gap: 14px;
  }

  .html-project-info {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   AJUSTEMENT — BARRE DE TEXTE CENTRÉE + CURSEUR PREV / NEXT
   ========================================================= */

/* La barre AKA / Index / About / Email / IG reste centrée
   verticalement sur la page, desktop comme mobile. */
.site-header {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

@media (max-width: 700px) {
  .site-header {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

/* PREV / NEXT suivent le curseur à la place des flèches. */
.cursor-label {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}


/* =========================================================
   MOBILE — RESTAURATION DE LA POSITION D'ORIGINE DU MENU
   Desktop reste centré verticalement.
   ========================================================= */
@media (max-width: 700px) {
  .site-header {
    top: 9px !important;
    transform: none !important;
  }
}


/* =========================================================
   HEADER — SOUS LA BARRE STORY
   Desktop : en haut, juste sous la progression.
   Mobile  : même principe, et le slider/image passe au-dessus
             de la barre de texte.
   ========================================================= */

/* DESKTOP */
.site-header {
  top: 14px !important;
  transform: none !important;
  z-index: 20 !important;
}

/* La barre story reste tout en haut, au-dessus du header. */
.story-progress {
  z-index: 40 !important;
}

/* MOBILE */
@media (max-width: 700px) {
  .site-header {
    top: 60px !important;
    transform: none !important;
    z-index: 20 !important;
  }

  /* L'image / zone du slideshow passe au-dessus du texte. */
  .stage {
    z-index: 30 !important;
  }

  .nav-zone {
    z-index: 35 !important;
  }

  .story-progress {
    z-index: 50 !important;
  }

  /* Les popups restent prioritaires sur le slideshow. */
  .info-panel,
  .index-panel,
  .cv-panel,
  .project-panel,
  .html-project-modal,
  .independent-project-modal {
    z-index: 600 !important;
  }
}

@media (max-width: 420px) {
  .site-header {
    top: 56px !important;
  }
}


/* =========================================================
   TEXTE ADAPTATIF SUR LES IMAGES
   Effet de contraste dynamique via mix-blend-mode.
   ========================================================= */

/* Le header doit être au-dessus des images pour que le mélange
   avec les pixels de l'image soit visible. */
.site-header {
  z-index: 80 !important;
  color: #fff !important;
  mix-blend-mode: difference;
  isolation: auto;
}

.site-header a,
.site-header button,
.site-title,
.site-nav,
.site-nav a {
  color: #fff !important;
}

/* La barre Story reste au-dessus du header. */
.story-progress {
  z-index: 100 !important;
}

/* MOBILE :
   l'image remonte derrière la barre de texte ; le texte reste
   visuellement au-dessus et change automatiquement de contraste
   selon l'image qui se trouve derrière. */
@media (max-width: 700px) {
  .site-header {
    top: 60px !important;
    transform: none !important;
    z-index: 80 !important;
    color: #fff !important;
    mix-blend-mode: difference;
  }

  .stage {
    z-index: 30 !important;
  }

  .nav-zone {
    z-index: 35 !important;
  }

  .story-progress {
    z-index: 100 !important;
  }
}

@media (max-width: 420px) {
  .site-header {
    top: 56px !important;
  }
}

/* Les overlays ne doivent pas hériter de l'effet de mélange. */
.info-panel,
.index-panel,
.cv-panel,
.project-panel,
.html-project-modal,
.independent-project-modal {
  mix-blend-mode: normal !important;
  z-index: 600 !important;
}


/* =========================================================
   HEADER — CENTRÉ VERTICALEMENT + MIX-BLEND-MODE DIFFERENCE
   ========================================================= */

.site-header {
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 80 !important;
  color: #fff !important;
  mix-blend-mode: difference !important;
}

.site-header a,
.site-header button,
.site-title,
.site-nav,
.site-nav a {
  color: #fff !important;
}

/* Même position centrée sur mobile. */
@media (max-width: 700px) {
  .site-header {
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 80 !important;
    color: #fff !important;
    mix-blend-mode: difference !important;
  }

  /* L'image reste derrière le texte pour permettre l'effet difference. */
  .stage {
    z-index: 30 !important;
  }

  .nav-zone {
    z-index: 35 !important;
  }

  .story-progress {
    z-index: 100 !important;
  }
}

@media (max-width: 420px) {
  .site-header {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

/* =========================================================
   AJUSTEMENTS STRUCTURE — 18/09/2026
   ========================================================= */

/* HOME — images plein écran, sans marge autour */
.stage {
  inset: 0 !important;
  padding: 0 !important;
  display: block !important;
}
.slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  margin: 0 !important;
}
.slide img {
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
}

/* HOME — tous les éléments textuels réagissent aux images */
.site-header,
.slide-meta,
.cursor-label {
  color: #fff !important;
  mix-blend-mode: difference !important;
}
.site-header a,
.site-header button,
.site-title,
.site-nav,
.site-nav a,
.site-nav button,
.copyright,
.counter,
.caption,
.caption-title,
.caption-text {
  color: #fff !important;
}

/* Navigation légèrement plus petite */
:root {
  --type-menu: 28px;
  --type-text: 12px;
  --type-small: 9px;
}

/* POPUPS PROJET — le titre et Close font partie du scroll */
.html-project-head {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

/* Corps de texte plus petits, y compris les popups HTML */
.html-project-head,
.html-project-info,
.html-project-foot,
.html-project-label,
.html-project-details,
.html-project-description,
.html-project-close,
.html-project-return {
  font-size: var(--type-text) !important;
  line-height: 1.15 !important;
}

@media (max-width: 700px) {
  :root {
    --type-menu: clamp(18px, 5.2vw, 25px);
    --type-text: 11px;
    --type-small: 8px;
  }

  .stage,
  .slide,
  .slide img {
    width: 100vw !important;
    height: 100dvh !important;
  }
}

/* =========================================================
   CORRECTION HOME — hauteur plein écran, ratio conservé
   L'image garde son ratio naturel : 100dvh de haut, largeur auto.
   Elle est centrée horizontalement et n'est jamais recadrée.
   ========================================================= */
.slide {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.slide img {
  display: block !important;
  width: auto !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
}
@media (max-width: 700px) {
  .slide img {
    width: auto !important;
    height: 100dvh !important;
    max-width: none !important;
    object-fit: contain !important;
  }
}

/* Navigation — survol gris pour les éléments cliquables */
.site-nav a,
.site-nav button {
  transition: color 140ms ease !important;
}
.site-nav a:hover,
.site-nav button:hover {
  color: #8f8f8f !important;
  opacity: 1 !important;
}


/* =========================================================
   AJUSTEMENT — CREDITS ABOUT + COMPTEUR CENTRE
   ========================================================= */
.slide-meta {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 8px !important;
  width: auto !important;
  transform: translateX(-50%) !important;
  padding: 0 !important;
  display: block !important;
  z-index: 90 !important;
}
.counter {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: .15em !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: var(--type-menu) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}
.info-panel {
  min-height: 100dvh !important;
  display: flex;
  flex-direction: column;
}
.info-panel[hidden] { display: none !important; }
.info-layout { flex: 0 0 auto; }
.info-credits {
  margin-top: auto;
  padding: 18px 7px 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--type-text);
  font-weight: 400;
  line-height: 1.15;
}
@media (max-width: 700px) {
  .slide-meta { bottom: 8px !important; }
  .counter { font-size: var(--type-menu) !important; }
  .info-credits { padding: 18px 10px 8px; }
}

/* =========================================================
   TYPOGRAPHIE — proportions inspirées de claradousson.com
   Plus petite, régulière et légère, sans copier sa police.
   ========================================================= */
:root {
  --type-menu: 17px;
  --type-text: 13px;
  --type-small: 10px;
}

body,
button,
input,
textarea,
select {
  font-weight: 400 !important;
}

.site-header,
.site-header a,
.site-header button,
.site-title,
.site-nav,
.site-nav a,
.site-nav button,
.counter {
  font-size: var(--type-menu) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
}

.info-panel,
.index-panel,
.cv-panel,
.html-project-modal,
.html-project-head,
.html-project-info,
.html-project-foot,
.html-project-label,
.html-project-details,
.html-project-description,
.html-project-close,
.html-project-return,
.info-credits {
  font-size: var(--type-text) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
}

.index-caption,
.caption,
.caption-title,
.caption-text {
  font-size: var(--type-small) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
}

@media (max-width: 700px) {
  :root {
    --type-menu: 15px;
    --type-text: 12px;
    --type-small: 9px;
  }
}

/* TYPOGRAPHIE — réglage demandé */
:root {
  --type-menu: 24px;
  --type-text: 18px;
  --type-small: 10px;
}
.site-header,
.site-header a,
.site-header button,
.site-title,
.site-nav,
.site-nav a,
.site-nav button,
.counter {
  font-size: var(--type-menu) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
}
.info-panel,
.index-panel,
.cv-panel,
.html-project-modal,
.html-project-head,
.html-project-info,
.html-project-foot,
.html-project-label,
.html-project-details,
.html-project-description,
.html-project-close,
.html-project-return,
.info-credits {
  font-size: var(--type-text) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
}
.index-caption,
.caption,
.caption-title,
.caption-text {
  font-size: var(--type-small) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
}
@media (max-width: 700px) {
  :root {
    --type-menu: 20px;
    --type-text: 15px;
    --type-small: 9px;
  }
}

/* AKA — grotesque proche de Neue Haas Grotesk Display 65 Medium */
:root {
  --type-menu: 24px !important;
  --type-text: 12px !important;
  --type-small: 10px !important;
}
html, body, button, input, textarea, select,
.site-header, .site-header a, .site-header button,
.info-panel, .index-panel, .cv-panel,
.html-project-modal, .project-panel,
.story-counter, .index-caption, .info-credits {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
.site-header, .site-header a, .site-header button, .story-counter {
  font-size: 24px !important;
  font-weight: 500 !important;
}
.info-panel, .index-panel, .cv-panel,
.html-project-modal, .project-panel,
.html-project-details, .html-project-description {
  font-size: 12px !important;
  font-weight: 400 !important;
}
.index-caption, .html-project-label, .info-credits {
  font-size: 10px !important;
  font-weight: 400 !important;
}
@media (max-width: 700px) {
  :root {
    --type-menu: 20px !important;
    --type-text: 10px !important;
    --type-small: 9px !important;
  }
  .site-header, .site-header a, .site-header button, .story-counter {
    font-size: 20px !important;
  }
  .info-panel, .index-panel, .cv-panel,
  .html-project-modal, .project-panel,
  .html-project-details, .html-project-description {
    font-size: 10px !important;
  }
  .index-caption, .html-project-label, .info-credits {
    font-size: 9px !important;
  }
}

/* TYPOGRAPHIE — réglage final demandé */
.site-header,
.site-header a,
.site-header button,
.site-title,
.site-nav,
.site-nav a,
.site-nav button {
  font-size: 24px !important;
  font-weight: 700 !important;
}
.story-counter,
.counter {
  font-size: 20px !important;
  font-weight: 500 !important;
}
.info-panel,
.index-panel,
.cv-panel,
.html-project-modal,
.project-panel,
.html-project-head,
.html-project-details,
.html-project-description,
.info-credits,
.index-caption,
.caption,
.caption-title,
.caption-text {
  font-size: 11px !important;
  font-weight: 400 !important;
}
.html-project-label {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #777 !important;
}
.html-project-close,
.html-project-return,
.info-close,
.index-close,
.cv-close,
.project-close,
.project-return {
  font-size: 10px !important;
  font-weight: 400 !important;
}
.html-project-date { display: none !important; }

@media (max-width: 700px) {
  .site-header,
  .site-header a,
  .site-header button,
  .site-title,
  .site-nav,
  .site-nav a,
  .site-nav button { font-size: 20px !important; }
  .story-counter,
  .counter { font-size: 17px !important; }
  .info-panel,
  .index-panel,
  .cv-panel,
  .html-project-modal,
  .project-panel,
  .html-project-head,
  .html-project-details,
  .html-project-description,
  .html-project-label,
  .info-credits,
  .index-caption,
  .caption,
  .caption-title,
  .caption-text { font-size: 9px !important; }
  .html-project-close,
  .html-project-return,
  .info-close,
  .index-close,
  .cv-close,
  .project-close,
  .project-return { font-size: 8px !important; }
}

/* === AKA — ajustement Close + flou global au hover === */
.html-project-close,
.project-close,
.independent-project-close,
.info-close,
.index-close,
.cv-close {
  font-size: 12px !important;
}

/* Flou sur tous les éléments interactifs au survol (desktop) */
@media (hover: hover) and (pointer: fine) {
  a, button, [role="button"], .index-card {
    transition: filter 160ms ease, color 160ms ease, opacity 160ms ease;
  }
  a:hover, button:hover, [role="button"]:hover, .index-card:hover {
    filter: blur(1.5px) !important;
  }
}

/* === AKA — hover flou uniquement sur le texte, jamais sur les images === */
@media (hover: hover) and (pointer: fine) {
  /* Les cartes/projets contenant une image ne sont jamais floutés comme bloc. */
  .index-card:hover,
  a:has(img):hover,
  button:has(img):hover,
  [role="button"]:has(img):hover {
    filter: none !important;
  }

  /* Si une image hérite d'un filtre d'un ancien style, on le neutralise. */
  a:hover img,
  button:hover img,
  [role="button"]:hover img,
  .index-card:hover img,
  img:hover {
    filter: none !important;
  }

  /* Sur une carte projet, seule la légende texte peut se flouter. */
  .index-card:hover .index-caption {
    filter: blur(1.5px) !important;
  }
}

/* === AKA — compteur 20px Bold, sans zéro initial === */
.story-counter,
.counter {
  font-size: 20px !important;
  font-weight: 700 !important;
}
@media (max-width: 700px) {
  .story-counter,
  .counter {
    font-size: 17px !important;
    font-weight: 700 !important;
  }
}

/* === AKA — compteur bas 20px + slash compact === */
.slide-meta {
  bottom: 20px !important;
}
.counter {
  gap: 0 !important;
  column-gap: 0 !important;
  letter-spacing: 0 !important;
}
.counter span {
  margin: 0 !important;
  padding: 0 !important;
}
.counter-separator {
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 700px) {
  .slide-meta { bottom: 20px !important; }
}


/* === AKA — compteur encore plus bas === */
.slide-meta { bottom: 6px !important; }
@media (max-width: 700px) { .slide-meta { bottom: 6px !important; } }

/* === AKA — compteur réellement collé en bas : neutralise les anciens espacements === */
.slide-meta {
  bottom: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.counter {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
@media (max-width: 700px) {
  .slide-meta {
    bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* === AKA — compteur à 20px du bord inférieur === */
.slide-meta {
  bottom: 20px !important;
}
@media (max-width: 700px) {
  .slide-meta {
    bottom: 20px !important;
  }
}

/* === AKA — petits textes en Medium === */
/* Conserve navigation/compteur selon leurs graisses dédiées ; passe les petits textes à 500. */
.info-panel,
.index-panel,
.cv-panel,
.html-project-modal,
.project-panel,
.index-caption,
.html-project-label,
.html-project-details,
.html-project-description,
.html-project-close,
.html-project-return,
.info-close,
.index-close,
.cv-close,
.project-close,
.project-return,
.caption,
.caption-title,
.caption-text,
.about-credits,
.credits {
  font-weight: 500 !important;
}

/* === AKA — petits textes unifiés à 12px === */
/* Navigation et compteur gardent leurs tailles dédiées. */
.info-panel,
.index-panel,
.cv-panel,
.html-project-modal,
.project-panel,
.index-caption,
.html-project-label,
.html-project-details,
.html-project-description,
.html-project-close,
.html-project-return,
.info-close,
.index-close,
.cv-close,
.project-close,
.project-return,
.caption,
.caption-title,
.caption-text,
.about-credits,
.credits {
  font-size: 12px !important;
  font-weight: 500 !important;
}
@media (max-width: 700px) {
  .info-panel,
  .index-panel,
  .cv-panel,
  .html-project-modal,
  .project-panel,
  .index-caption,
  .html-project-label,
  .html-project-details,
  .html-project-description,
  .html-project-close,
  .html-project-return,
  .info-close,
  .index-close,
  .cv-close,
  .project-close,
  .project-return,
  .caption,
  .caption-title,
  .caption-text,
  .about-credits,
  .credits {
    font-size: 12px !important;
  }
}

/* =========================================================
   INFOS — composition éditoriale inspirée de la référence
   ========================================================= */
.info-panel {
  box-sizing: border-box !important;
  min-height: 100dvh !important;
  height: 100dvh !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  background: rgba(255,255,255,.93) !important;
}
.info-panel[hidden] { display: none !important; }
.info-top {
  position: relative !important;
  top: auto !important;
  flex: 0 0 auto !important;
  padding: 8px 10px 0 !important;
  min-height: 28px !important;
}
.info-intro {
  flex: 0 0 auto;
  width: calc(100% - 40px);
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
}
.info-intro p { margin: 0; max-width: 1500px; }
.info-center {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 50px 20px;
  box-sizing: border-box;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
}
.info-section { margin: 0 0 22px; }
.info-section-title { margin-bottom: 2px; }
.info-center a { color: inherit; text-decoration: none; }
.info-center a:hover,
.info-center button:hover { filter: blur(1.5px); }
.info-cv-link { margin-bottom: 0; }
.info-cv-link .cv-open {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.info-bottom {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  padding: 0 20px 18px;
  box-sizing: border-box;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
}
.info-bottom-right { text-align: right; }
.info-credits { display: none !important; }

@media (max-width: 700px) {
  .info-top { padding: 8px 10px 0 !important; }
  .info-intro { width: 100%; padding: 8px 10px 0; }
  .info-center { padding: 42px 10px; }
  .info-bottom { padding: 0 10px 10px; }
}

/* === AKA — Infos au même corps que le compteur === */
.info-panel,
.info-panel .info-intro,
.info-panel .info-center,
.info-panel .info-bottom,
.info-panel .info-section,
.info-panel .info-section-title,
.info-panel a,
.info-panel button,
.info-panel p {
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
}

@media (max-width: 700px) {
  .info-panel,
  .info-panel .info-intro,
  .info-panel .info-center,
  .info-panel .info-bottom,
  .info-panel .info-section,
  .info-panel .info-section-title,
  .info-panel a,
  .info-panel button,
  .info-panel p {
    font-size: 17px !important;
  }
}

/* === AKA — restauration marges historiques + Close Infos === */
/* Les autres pages retrouvent leurs marges d'origine. La Home reste bord-a-bord. */
.info-top {
  position: relative !important;
  padding: 8px 10px 0 !important;
  min-height: 28px !important;
}
.info-panel .info-close {
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  left: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
}
.info-panel .info-bottom,
.info-panel .info-bottom * {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
}
@media (max-width:700px){
  .info-panel .info-close { top:8px !important; right:10px !important; }
}

/* === AKA — images au hover des services / page Infos === */
.info-panel { isolation: isolate; }
.info-hover-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 120ms ease;
}
.info-hover-background.is-visible { opacity: 1; }
.info-hover-background img {
  display: block;
  width: auto;
  height: auto;
  max-width: 42vw;
  max-height: 58vh;
  object-fit: contain;
}
.info-panel > *:not(.info-hover-background) { position: relative; z-index: 1; }
.service-hover { cursor: default; }
.service-hover:hover { filter: blur(1.5px); }
@media (max-width:700px) {
  .info-hover-background img { max-width: 70vw; max-height: 48vh; }
}

/* === AKA — CV : mêmes marges que la page Infos === */
.cv-top {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.cv-layout {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.cv-footer {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
@media (max-width: 700px) {
  .cv-top {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .cv-layout {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .cv-footer {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* === AKA — CV simplifié : Close seul + corps Medium === */
.cv-top {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
}
.cv-top .cv-close {
  margin-left: auto !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.cv-panel .cv-layout,
.cv-panel .cv-labels,
.cv-panel .cv-labels h2,
.cv-panel .cv-content,
.cv-panel .cv-list,
.cv-panel .cv-list p,
.cv-panel .cv-footer,
.cv-panel .cv-footer span {
  font-weight: 500 !important;
}

/* === AKA — CV aligné exactement sur Infos (marges haut/bas + Close) === */
/* Neutralise les anciennes règles sticky/grid qui décalaient le header du CV. */
.cv-panel .cv-top {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 4 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 8px 10px 0 !important;
  margin: 0 !important;
  display: block !important;
  background: rgba(255,255,255,.94) !important;
}
.cv-panel .cv-top .cv-close {
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
}
/* Même axe horizontal historique que Infos et aucun ancien décalage supérieur. */
.cv-panel .cv-layout {
  padding: 0 10px 54px !important;
  margin: 0 !important;
}
/* Même marge basse que le bloc inférieur d'Infos. */
.cv-panel .cv-footer {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  box-sizing: border-box !important;
  padding: 0 10px 18px !important;
  margin: 0 !important;
}
@media (max-width:700px) {
  .cv-panel .cv-top {
    min-height: 28px !important;
    height: 28px !important;
    padding: 8px 10px 0 !important;
  }
  .cv-panel .cv-top .cv-close {
    top: 8px !important;
    right: 10px !important;
  }
  .cv-panel .cv-layout { padding: 0 10px 46px !important; }
  .cv-panel .cv-footer { padding: 0 10px 10px !important; }
}


/* === AKA — CV final : fermeture indépendante + alignement première ligne Infos === */
/* Le CV est une couche au-dessus d'Infos : fermer CV révèle Infos, sans la fermer. */
.cv-panel { z-index: 500 !important; }
.info-panel { z-index: 300 !important; }

/* Même départ vertical que la première ligne de .info-intro : 28px depuis le haut. */
.cv-panel .cv-top {
  min-height: 28px !important;
  height: 28px !important;
  padding: 8px 10px 0 !important;
}
.cv-panel .cv-layout {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.cv-panel .cv-labels,
.cv-panel .cv-labels h2,
.cv-panel .cv-content,
.cv-panel .cv-list,
.cv-panel .cv-list p {
  line-height: 1.08 !important;
}
.cv-panel .cv-labels h2:first-child,
.cv-panel .cv-list p:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Last Updated supprimé : aucun footer CV ne doit réserver de place. */
.cv-panel .cv-footer { display: none !important; }

@media (max-width:700px) {
  .cv-panel .cv-top {
    min-height: 28px !important;
    height: 28px !important;
    padding: 8px 10px 0 !important;
  }
  .cv-panel .cv-layout { padding-top: 0 !important; }
}

/* === AKA — titres des popups projets unifiés avec le corps === */
.html-project-head [id$="-title"],
.html-project-head > span:not(.html-project-close),
.project-panel .project-title {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: inherit !important;
}

/* === AKA — Home : marges latérales navigation identiques à Infos === */
.site-header {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
@media (max-width: 700px) {
  .site-header {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* === AKA — popups projet : haut des images aligné sur la 1re ligne de l’Index === */
/* Index : .index-top fait 39px de haut. Le header projet fait 29.8px
   (12px × 1.15 + 8px + 8px) ; 9.2px complètent donc exactement 39px. */
.html-project-media {
  padding-top: 9.2px !important;
}
@media (max-width: 700px) {
  .html-project-media {
    padding-top: 9.2px !important;
  }
}

/* === AKA — VERSION MOBILE : story / navigation / typo / Infos === */
@media (max-width: 700px) {
  /* Story Instagram : tout en haut, avec la même mini marge que desktop. */
  .story-progress {
    top: 8px !important;
    left: 2mm !important;
    right: 2mm !important;
    width: auto !important;
    z-index: 60 !important;
    opacity: .5 !important;
  }

  /* Navigation immédiatement sous la barre de story. */
  .site-header {
    top: 16px !important;
    padding-top: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    min-height: 0 !important;
    align-items: flex-start !important;
  }

  /* Corps typographique mobile unifié à 16 px. */
  :root {
    --type-menu: 16px !important;
    --type-text: 16px !important;
    --type-small: 16px !important;
  }
  body,
  button,
  a,
  .site-title,
  .site-nav,
  .site-nav a,
  .site-nav button,
  .index-button,
  .info-button,
  .counter,
  .slide-meta,
  .info-panel,
  .info-panel .info-intro,
  .info-panel .info-center,
  .info-panel .info-section,
  .info-panel .info-section-title,
  .info-panel a,
  .info-panel p,
  .index-panel,
  .html-project-modal,
  .html-project-sheet,
  .html-project-head,
  .html-project-info,
  .html-project-description,
  .cv-panel,
  .cv-panel .cv-layout,
  .cv-panel .cv-labels,
  .cv-panel .cv-content,
  .cv-panel .cv-list,
  .cv-panel .cv-list p {
    font-size: 16px !important;
  }

  /* Les Close restent dans le même corps mobile. */
  .info-panel .info-close,
  .cv-panel .cv-top .cv-close,
  .html-project-close,
  .index-close {
    font-size: 16px !important;
  }

  /* Infos mobile : aucun visuel de service au hover/focus/touch. */
  .info-hover-background,
  .info-hover-background.is-visible {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  .service-hover:hover,
  .service-hover:focus {
    filter: none !important;
  }
}

@media (max-width: 420px) {
  .story-progress { top: 8px !important; }
  .site-header { top: 16px !important; }
  :root {
    --type-menu: 16px !important;
    --type-text: 16px !important;
    --type-small: 16px !important;
  }
}

/* === AKA — MOBILE : hiérarchie typo 24 Bold / 16 Medium === */
@media (max-width: 700px) {
  /* Navigation : 24 px Bold. */
  .site-header,
  .site-header .site-title,
  .site-header .site-nav,
  .site-header .site-nav a,
  .site-header .site-nav button,
  .site-header .index-button,
  .site-header .info-button {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
  }

  /* Texte principal de la page Infos : 24 px Bold. */
  .info-panel .info-intro,
  .info-panel .info-intro p,
  .info-panel .info-center,
  .info-panel .info-center .info-section,
  .info-panel .info-center .info-section-title,
  .info-panel .info-center .service-hover-list,
  .info-panel .info-center .service-hover,
  .info-panel .info-center a,
  .info-panel .info-center button.cv-open {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
  }

  /* Tous les autres textes : 16 px Medium. */
  body,
  button,
  a,
  .counter,
  .slide-meta,
  .index-panel,
  .index-panel *,
  .html-project-modal,
  .html-project-sheet,
  .html-project-sheet *,
  .cv-panel,
  .cv-panel *,
  .info-panel .info-close,
  .info-panel .info-bottom,
  .info-panel .info-bottom * {
    font-size: 16px !important;
    font-weight: 500 !important;
  }

  /* Réaffirme la hiérarchie après les sélecteurs génériques ci-dessus. */
  .site-header .site-title,
  .site-header .site-nav,
  .site-header .site-nav a,
  .site-header .site-nav button,
  .site-header .index-button,
  .site-header .info-button,
  .info-panel .info-intro,
  .info-panel .info-intro p,
  .info-panel .info-center,
  .info-panel .info-center .info-section,
  .info-panel .info-center .info-section-title,
  .info-panel .info-center .service-hover-list,
  .info-panel .info-center .service-hover,
  .info-panel .info-center a,
  .info-panel .info-center button.cv-open {
    font-size: 24px !important;
    font-weight: 700 !important;
  }
}

/* === AKA — MOBILE : ajustements Home / titres projets === */
@media (max-width: 700px) {
  /* La navigation descend sous la barre de story avec un peu d'air. */
  .site-header {
    top: 28px !important;
  }

  /* Home : sur mobile la largeur devient la dimension de référence.
     L'image occupe toute la largeur et conserve son ratio naturel. */
  .stage {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .slide,
  .slide.is-active {
    width: 100vw !important;
  }
  .slide img {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  /* Titres des projets : même corps que les autres textes secondaires. */
  .html-project-head > span[id$="-title"],
  .html-project-head [id^="project-"][id$="-title"] {
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
  }
}

@media (max-width: 420px) {
  .site-header {
    top: 28px !important;
  }
}

/* === AKA — MOBILE : navigation +10px vers le bas === */
@media (max-width: 700px) {
  .site-header { top: 38px !important; }
}
@media (max-width: 420px) {
  .site-header { top: 38px !important; }
}

/* === AKA — Infos sans Close / crédits sur une ligne === */
.info-panel .info-top,
.info-panel .info-close,
.info-panel .info-bottom-right { display: none !important; }
.info-panel .info-bottom { display: block !important; }
.info-panel .info-bottom > div { white-space: nowrap; }

/* === AKA — compteur Bold === */
.story-counter,
.counter,
.counter * {
  font-weight: 700 !important;
}

/* === AKA — transition slideshow POP (desktop + mobile) ===
   Remplace le déplacement horizontal par une apparition nette en léger zoom. */
.slide,
.slide.is-entering-next,
.slide.is-entering-prev {
  transform: scale(.94) !important;
  opacity: 0 !important;
  visibility: hidden;
  transition:
    transform 220ms cubic-bezier(.2,.8,.2,1),
    opacity 160ms ease,
    visibility 0s linear 220ms !important;
  will-change: transform, opacity;
}
.slide.is-active {
  transform: scale(1) !important;
  opacity: 1 !important;
  visibility: visible;
  transition:
    transform 220ms cubic-bezier(.2,.8,.2,1),
    opacity 120ms ease,
    visibility 0s linear 0s !important;
}
.slide.is-leaving-next,
.slide.is-leaving-prev {
  transform: scale(1.035) !important;
  opacity: 0 !important;
  visibility: visible;
  transition:
    transform 180ms cubic-bezier(.4,0,1,1),
    opacity 140ms ease !important;
}
@media (prefers-reduced-motion: reduce) {
  .slide,
  .slide.is-active,
  .slide.is-entering-next,
  .slide.is-entering-prev,
  .slide.is-leaving-next,
  .slide.is-leaving-prev {
    transform: none !important;
    transition: none !important;
  }
}

/* === AKA — POP franc : cut + snap, desktop et mobile ===
   Apparition plus sèche : départ nettement réduit puis snap à 100%,
   sans fondu progressif ni déplacement horizontal. */
.slide,
.slide.is-entering-next,
.slide.is-entering-prev {
  transform: scale(.82) !important;
  opacity: 0 !important;
  visibility: hidden;
  transition: none !important;
  will-change: transform, opacity;
}
.slide.is-active {
  transform: scale(1) !important;
  opacity: 1 !important;
  visibility: visible;
  transition:
    transform 105ms cubic-bezier(.05,.95,.2,1.15),
    opacity 18ms linear !important;
}
.slide.is-leaving-next,
.slide.is-leaving-prev {
  transform: scale(1) !important;
  opacity: 0 !important;
  visibility: visible;
  transition: opacity 18ms linear !important;
}

/* === AKA — transition finale : CUT / HARD CUT === */
.slide,
.slide.is-entering-next,
.slide.is-entering-prev,
.slide.is-leaving-next,
.slide.is-leaving-prev {
  transform: none !important;
  opacity: 0 !important;
  visibility: hidden;
  transition: none !important;
}
.slide.is-active {
  transform: none !important;
  opacity: 1 !important;
  visibility: visible;
  transition: none !important;
}

/* === AKA — MOBILE : compteur centré / navigation à la place du compteur === */
@media (max-width: 700px) {
  /* Le compteur quitte le bas de page et vient au centre du viewport,
     au-dessus des images. */
  .slide-meta {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 45 !important;
  }
  .counter {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    z-index: 1 !important;
  }

  /* La navigation prend la position basse occupée auparavant par le compteur. */
  .site-nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 20px !important;
    transform: translateX(-50%) !important;
    z-index: 70 !important;
    width: max-content !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    pointer-events: auto !important;
  }
}

/* === AKA — MOBILE FINAL : compteur centre exact + nav au bas du viewport === */
@media (max-width: 700px) {
  /* IMPORTANT : l'ancien translateY(-50%) du header créait un containing block
     et empêchait la nav en position:fixed de se caler sur le viewport. */
  .site-header {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    pointer-events: none !important;
  }

  /* Compteur exactement au centre : 50% horizontal + 50% vertical. */
  .slide-meta {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    transform: translate(-50%, -50%) !important;
    z-index: 60 !important;
    pointer-events: none !important;
  }
  .counter {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Navigation réellement au bas de l'écran, centrée horizontalement. */
  .site-nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 10px !important;
    width: max-content !important;
    max-width: calc(100vw - 20px) !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    z-index: 80 !important;
    pointer-events: auto !important;
  }
}

/* === AKA — MOBILE : TOUTE la navigation en bas === */
@media (max-width: 700px) {
  .site-header {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    top: auto !important;
    bottom: 10px !important;
    inset: auto 10px 10px 10px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    z-index: 80 !important;
    pointer-events: none !important;
  }

  .site-header .site-title {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .site-header .site-nav {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    text-align: left !important;
    pointer-events: auto !important;
  }

  .slide-meta {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* === AKA — MOBILE CORRECTION ROBUSTE : compteur fixé directement au viewport === */
@media (max-width: 700px) {
  /* Le footer n'intervient plus dans le placement du compteur. */
  .slide-meta {
    position: static !important;
    inset: auto !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    display: block !important;
    pointer-events: none !important;
  }

  /* Le compteur lui-même est ancré au viewport, indépendamment du footer/header. */
  .slide-meta .counter {
    position: fixed !important;
    left: 50vw !important;
    top: 50dvh !important;
    right: auto !important;
    bottom: auto !important;
    width: max-content !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    z-index: 120 !important;
    pointer-events: none !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Toute la navigation reste groupée au bas du viewport. */
  .site-header {
    position: fixed !important;
    inset: auto 10px 10px 10px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    z-index: 100 !important;
  }
}

/* === AKA — MOBILE : compteur HOME visible + centre absolu (final override) === */
@media (max-width: 700px) {
  body:not(.info-is-open):not(.index-is-open):not(.project-is-open):not(.cv-is-open) .slide-meta {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    z-index: 150 !important;
    pointer-events: none !important;
  }

  body:not(.info-is-open):not(.index-is-open):not(.project-is-open):not(.cv-is-open) .slide-meta .counter {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: max-content !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #000 !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    z-index: 151 !important;
  }

  body:not(.info-is-open):not(.index-is-open):not(.project-is-open):not(.cv-is-open) .slide-meta .counter * {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #000 !important;
    mix-blend-mode: normal !important;
  }
}


/* === AKA — MOBILE HOME : compteur body-level, centre exact === */
.home-counter-portal {
  display: none;
}

@media (max-width: 700px) {
  .home-counter-portal {
    display: flex !important;
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2147483647 !important;
    pointer-events: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #000 !important;
    background: transparent !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .home-counter-portal span {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #000 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
  }

  body.info-is-open .home-counter-portal,
  body.index-is-open .home-counter-portal,
  body.project-is-open .home-counter-portal,
  body.cv-is-open .home-counter-portal {
    display: none !important;
  }
}

/* === AKA — COMPTEUR HOME FINAL : desktop + mobile ===
   Source unique hors slideshow. Évite les anciennes règles .slide-meta/.counter. */
.home-counter-portal {
  display: flex !important;
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 20px !important;
  transform: translateX(-50%) !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2147483647 !important;
  pointer-events: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #000 !important;
  background: transparent !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.home-counter-portal span {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
}
body.info-is-open .home-counter-portal,
body.index-is-open .home-counter-portal,
body.project-is-open .home-counter-portal,
body.cv-is-open .home-counter-portal {
  display: none !important;
}
@media (max-width: 700px) {
  .home-counter-portal {
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    font-size: 16px !important;
  }
}

/* === AKA — compteur mobile en mode Difference === */
@media (max-width: 700px) {
  .home-counter-portal {
    color: #fff !important;
    mix-blend-mode: difference !important;
    isolation: auto !important;
  }
}

/* === AKA — HOME : DIFFERENCE GLOBAL FINAL (desktop + mobile) ===
   Override final pour éviter que d'anciennes règles `normal` reprennent la main. */
body:not(.info-is-open):not(.index-is-open):not(.project-is-open):not(.cv-is-open) .site-header,
body:not(.info-is-open):not(.index-is-open):not(.project-is-open):not(.cv-is-open) .home-counter-portal,
body:not(.info-is-open):not(.index-is-open):not(.project-is-open):not(.cv-is-open) .slide-meta,
body:not(.info-is-open):not(.index-is-open):not(.project-is-open):not(.cv-is-open) .cursor-label {
  color: #fff !important;
  mix-blend-mode: difference !important;
  isolation: auto !important;
}
body:not(.info-is-open):not(.index-is-open):not(.project-is-open):not(.cv-is-open) .site-header *,
body:not(.info-is-open):not(.index-is-open):not(.project-is-open):not(.cv-is-open) .home-counter-portal * {
  color: inherit !important;
}


/* === AKA — MOBILE FINAL : navigation centrée sur 3 lignes === */
.site-title-aka,
.site-title-name { display: inline; }

@media (max-width: 700px) {
  .site-header {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 10px !important;
    inset: auto 0 10px 0 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    text-align: center !important;
    z-index: 100 !important;
    pointer-events: none !important;
  }

  .site-header .site-title {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 1.08 !important;
    pointer-events: auto !important;
  }

  .site-header .site-title-aka,
  .site-header .site-title-name {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  .site-header .site-nav {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 0.32em !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    text-align: center !important;
    line-height: 1.08 !important;
    pointer-events: auto !important;
  }

  .site-header .site-nav br { display: none !important; }
  .site-header .site-nav a,
  .site-header .site-nav button {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }
}

/* === AKA — MOBILE : page Infos 22px === */
@media (max-width: 700px) {
  .info-panel .info-intro,
  .info-panel .info-intro p,
  .info-panel .info-center,
  .info-panel .info-center .info-section,
  .info-panel .info-center .info-section-title,
  .info-panel .info-center .service-hover-list,
  .info-panel .info-center .service-hover,
  .info-panel .info-center a,
  .info-panel .info-center button.cv-open {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
  }
}

/* === AKA — crédits Infos : version mobile courte === */
.credits-mobile { display: none; }
@media (max-width: 700px) {
  .credits-desktop { display: none !important; }
  .credits-mobile { display: inline !important; }
}

/* === AKA — MOBILE : CV sans Close, clic partout, texte Medium === */
@media (max-width: 700px) {
  .cv-panel .cv-close,
  .cv-panel .cv-close-bottom { display: none !important; }
  .cv-panel,
  .cv-panel *,
  .cv-panel p,
  .cv-panel h2,
  .cv-panel em {
    font-weight: 500 !important;
  }
}

/* === AKA — FIX FINAL hover services : desktop ON / mobile OFF === */
@media (min-width: 701px) {
  .info-panel .info-hover-background {
    display: flex !important;
    visibility: visible !important;
    opacity: 0 !important;
  }
  .info-panel .info-hover-background.is-visible {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .info-panel .service-hover:hover,
  .info-panel .service-hover:focus {
    filter: blur(1.5px) !important;
  }
}
@media (max-width: 700px) {
  .info-panel .info-hover-background,
  .info-panel .info-hover-background.is-visible {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  .info-panel .service-hover:hover,
  .info-panel .service-hover:focus {
    filter: none !important;
  }
}

/* === AKA — Infos : un peu plus de marge au-dessus du texte === */
.info-intro {
  padding-top: 10px !important;
}
@media (max-width: 700px) {
  .info-intro {
    padding-top: 14px !important;
  }
}

/* === AKA — RESPONSIVE BREAKPOINTS FINAUX ===
   Mobile: <=700px (existant)
   iPad/tablette: 701–1180px, basé sur la composition mobile
   Desktop: 1181–1919px (existant)
   Grand écran: >=1920px, basé sur desktop
*/

/* iPad / tablette : reprend la logique mobile sans modifier le breakpoint téléphone */
@media (min-width: 701px) and (max-width: 1180px) {
  /* Home : images pilotées par la largeur */
  .slide img,
  .story-slide img,
  .home-slide img {
    width: 100vw !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  /* Navigation mobile en 3 lignes, centrée en bas */
  .site-header {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 10px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    text-align: center !important;
    z-index: 100 !important;
    pointer-events: none !important;
  }
  .site-header .site-title {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 1.08 !important;
    pointer-events: auto !important;
  }
  .site-header .site-title-aka,
  .site-header .site-title-name { display:block !important; width:100% !important; text-align:center !important; }
  .site-header .site-nav {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: .32em !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    text-align: center !important;
    line-height: 1.08 !important;
    pointer-events: auto !important;
  }
  .site-header .site-nav br { display:none !important; }
  .site-header .site-nav a,
  .site-header .site-nav button { display:inline !important; width:auto !important; margin:0 !important; padding:0 !important; }

  /* Même hiérarchie typo que mobile */
  .site-header,
  .site-header a,
  .site-header button,
  .site-header .site-title { font-size:24px !important; font-weight:700 !important; }
  .info-panel .info-intro,
  .info-panel .info-intro p,
  .info-panel .info-center,
  .info-panel .info-center .info-section,
  .info-panel .info-center .info-section-title,
  .info-panel .info-center .service-hover-list,
  .info-panel .info-center .service-hover,
  .info-panel .info-center a,
  .info-panel .info-center button.cv-open { font-size:22px !important; font-weight:700 !important; line-height:1.08 !important; }

  /* Compteur Home au centre comme mobile */
  .home-counter,
  .mobile-home-counter,
  #home-counter {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    z-index: 2147483647 !important;
    mix-blend-mode: difference !important;
  }

  /* Infos : pas d'image au hover sur tablette, comme mobile */
  .info-panel .info-hover-background,
  .info-panel .info-hover-background.is-visible { display:none !important; visibility:hidden !important; opacity:0 !important; }
  .info-panel .service-hover:hover,
  .info-panel .service-hover:focus { filter:none !important; }
  .info-intro { padding-top:14px !important; }

  /* CV : comportement mobile */
  .cv-panel .cv-close,
  .cv-panel .cv-close-bottom { display:none !important; }
  .cv-panel, .cv-panel *, .cv-panel p, .cv-panel h2, .cv-panel em { font-weight:500 !important; }
}

/* Grands écrans : même composition desktop, simplement plus respirante */
@media (min-width: 1920px) {
  .site-header { padding-left: 28px !important; padding-right: 28px !important; }
  .info-panel .info-top,
  .info-panel .info-intro,
  .info-panel .info-center,
  .info-panel .info-bottom,
  .cv-panel .cv-head,
  .cv-panel .cv-body,
  .cv-panel .cv-foot { padding-left: 28px !important; padding-right: 28px !important; }
  .info-hover-background img { max-width: 42vw !important; max-height: 58vh !important; }
}

/* === AKA — FIX FINAL COMPTEUR CENTRÉ MOBILE + IPAD ===
   Le compteur réel est .home-counter-portal. Cette règle remplace les anciens
   sélecteurs .home-counter / #home-counter qui ne correspondent pas au HTML. */
@media (max-width: 1180px) {
  body:not(.info-is-open):not(.index-is-open):not(.project-is-open):not(.cv-is-open) .home-counter-portal {
    display: flex !important;
    position: fixed !important;
    left: 50vw !important;
    top: 50dvh !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: max-content !important;
    height: max-content !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2147483647 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #fff !important;
    mix-blend-mode: difference !important;
  }
  body:not(.info-is-open):not(.index-is-open):not(.project-is-open):not(.cv-is-open) .home-counter-portal > * {
    display: inline !important;
    position: static !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
    font: inherit !important;
  }
}

/* === AKA — NAV RESPONSIVE : 2 lignes dès que la largeur le permet ===
   Petit mobile : 3 lignes
     AKA
     (Alexandra Karaolanov Atelier)
     Index Infos Email IG
   Mobile large + iPad : 2 lignes
     AKA (Alexandra Karaolanov Atelier)
     Index Infos Email IG
*/
@media (min-width: 430px) and (max-width: 1180px) {
  .site-header .site-title {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    white-space: nowrap !important;
  }
  .site-header .site-title-aka,
  .site-header .site-title-name {
    display: inline !important;
    width: auto !important;
    text-align: center !important;
  }
  .site-header .site-title-aka::after {
    content: "\00a0";
  }
}

/* === AKA — Infos : présentation centrée sur desktop === */
@media (min-width: 1181px) {
  .info-panel .info-intro,
  .info-panel .info-intro p {
    text-align: center !important;
  }
}

/* === AKA — Infos : bloc de présentation centré dans la page (desktop) === */
@media (min-width: 1181px) {
  .info-panel .info-intro {
    width: min(760px, 62vw) !important;
    max-width: min(760px, 62vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* === AKA — Infos desktop : bloc intro sur la même largeur utile que la nav Home === */
@media (min-width: 1181px) and (max-width: 1919px) {
  .info-panel .info-intro {
    width: calc(100% - 40px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
}
@media (min-width: 1920px) {
  .info-panel .info-intro {
    width: calc(100% - 56px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* === AKA — Infos desktop : intro étendue jusqu'aux bords de page === */
@media (min-width: 1181px) {
  .info-panel .info-intro {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
  .info-panel .info-intro p {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
@media (min-width: 1920px) {
  .info-panel .info-intro {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}

/* === AKA BACK OFFICE — global colors === */
html, body, .slideshow, .index-panel, .info-panel, .cv-panel, .project-panel, .html-project-sheet {
  background-color: var(--aka-bg-color, #fff);
}
body, button, a, input, textarea, .index-panel, .info-panel, .cv-panel, .html-project-sheet {
  color: var(--aka-text-color, #000);
}
/* Home keeps Difference: white is the effective source color for inversion. */
body:not(.info-is-open):not(.index-is-open):not(.cv-is-open):not(.project-is-open) .site-header,
body:not(.info-is-open):not(.index-is-open):not(.cv-is-open):not(.project-is-open) .site-header *,
.home-counter-portal {
  color: var(--aka-text-color, #000);
}

/* === AKA BACK OFFICE — GLOBAL COLORS FIX (final authority) ===
   Settings must affect every visible surface and every text layer.
   Keep Home's Difference blend while using the selected text color as source. */
html,
body,
main,
.slideshow,
.slides,
.slide,
.index-panel,
.info-panel,
.cv-panel,
.project-panel,
.html-project-modal,
.html-project-sheet {
  background-color: var(--aka-bg-color, #fff) !important;
}

/* Panels previously using translucent white must follow the global background setting. */
.index-panel,
.info-panel,
.cv-panel,
.project-panel,
.html-project-sheet {
  background: var(--aka-bg-color, #fff) !important;
}

body,
body button,
body a,
body p,
body span,
body div,
body li,
body dt,
body dd,
body h1,
body h2,
body h3,
body input,
body textarea,
body select {
  color: var(--aka-text-color, #000) !important;
}

/* Preserve intentionally grey editorial labels. */
.project-label,
.project-details-label,
.project-description-label,
.html-project-label,
.html-project-details-label,
.html-project-description-label {
  color: #8a8a8a !important;
}

/* HOME — selected text color + Difference, desktop/tablet/mobile. */
.site-header,
.site-header *,
.home-counter-portal,
.home-counter-portal * {
  color: var(--aka-text-color, #000) !important;
  mix-blend-mode: difference !important;
}

/* === AKA COLORS — REBUILD 2026-09-18 ===
   One source of truth from Back Office settings.
   This block intentionally comes last and overrides legacy colors. */
:root {
  --text: var(--aka-text-color, #000000) !important;
  --page-bg: var(--aka-bg-color, #ffffff) !important;
}
html, body {
  background: var(--aka-bg-color, #ffffff) !important;
  color: var(--aka-text-color, #000000) !important;
}
/* Every full-screen/site surface uses the exact same opaque background. */
body > main,
.slideshow,
.stage,
.index-panel,
.info-panel,
.cv-panel,
.project-panel,
.project-sheet,
.html-project-modal,
.html-project-sheet {
  background-color: var(--aka-bg-color, #ffffff) !important;
}
/* Backdrops must not reintroduce white. */
.project-backdrop,
.html-project-backdrop {
  background: transparent !important;
}
/* All editorial text inherits the single global text setting. */
body :where(a, button, p, span, div, li, dt, dd, h1, h2, h3, h4, label) {
  color: var(--aka-text-color, #000000) !important;
}
/* Intentional editorial exception. */
body :where(.html-project-label, .project-label, .project-details h2, .project-description h2) {
  color: #8a8a8a !important;
}
/* HOME: same selected source color, with Difference retained. */
.site-header,
.site-header *,
.home-counter-portal,
.home-counter-portal * {
  color: var(--aka-text-color, #000000) !important;
  mix-blend-mode: difference !important;
}

/* === AKA — Infos desktop : texte principal 25px, calé sur la typo de navigation === */
@media (min-width: 1181px) {
  /* On dimensionne les éléments qui portent réellement du texte,
     sans redimensionner tous les conteneurs de la page Infos. */
  .info-panel .info-intro > p,
  .info-panel .info-center .info-section-title,
  .info-panel .info-center .service-hover-list,
  .info-panel .info-center a,
  .info-panel .info-center button.cv-open {
    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
  }

  .info-panel .info-center .service-hover {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
  }
}

/* === AKA — TRANSPARENCE DES PAGES / OVERLAYS (final authority) ===
   Home remains fully opaque. Pages opened above it use the selected
   Back Office background color at 92% so the previous layer subtly shows through. */
html,
body,
body > main,
.slideshow,
.stage {
  background-color: var(--aka-bg-color, #ffffff) !important;
}

.index-panel,
.info-panel,
.cv-panel,
.project-panel,
.project-sheet,
.html-project-sheet {
  background-color: transparent !important;
  background: color-mix(in srgb, var(--aka-bg-color, #ffffff) 92%, transparent) !important;
}

/* Modal containers/backdrops themselves stay transparent: only the page/sheet is translucent. */
.html-project-modal,
.project-backdrop,
.html-project-backdrop {
  background: transparent !important;
}
\n\n/* === AKA — TRANSPARENCE REBUILD ROBUSTE (final authority) ===\n   No color-mix(): RGB is computed by PHP from the Back Office background color.\n   The panel itself is transparent; a dedicated ::before layer carries the alpha. */\n.index-panel,\n.info-panel,\n.cv-panel,\n.project-panel,\n.project-sheet,\n.html-project-sheet {\n  background: transparent !important;\n  background-color: transparent !important;\n}\n\n.index-panel::before,\n.info-panel::before,\n.cv-panel::before,\n.project-sheet::before,\n.html-project-sheet::before {\n  content: "";\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  pointer-events: none;\n  background: rgba(var(--aka-bg-rgb, 255,255,255), .88) !important;\n}\n\n/* Fixed/scrolling panels need their own stacking context so ::before stays behind content,\n   but above the page underneath. */\n.index-panel,\n.info-panel,\n.cv-panel,\n.project-sheet,\n.html-project-sheet {\n  isolation: isolate;\n}\n\n/* Project modal/backdrops never paint an opaque color. */\n.project-panel,\n.html-project-modal,\n.project-backdrop,\n.html-project-backdrop {\n  background: transparent !important;\n}\n