@font-face {
  font-family: "Bodoni Moda";
  src: url("assets/fonts/BodoniModa-Variable.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("assets/fonts/BodoniModa-Italic-Variable.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/Archivo-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


:root {
  --serif: "Bodoni Moda", Didot, "Times New Roman", serif;
  --sans: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --marge: 6vw;
  --corps: 1.0625rem;
  --chrome: 0.8125rem;

  --t-fondu: 280ms;
  --t-legende: 200ms;
  --t-registre: 320ms;
}

html[data-registre="papier"] {
  --fond: #EDEEEA;
  --encre: #181A19;
  --accent: #7A6B19;   
  --filet: #C9CBC4;
}

html[data-registre="nuit"] {
  --fond: #000000;
  --encre: #EDEEEA;
  --accent: #D4BC4A;
  --filet: #2A2A28;
}

[data-registre="nuit"] {
  --fond: #000000;
  --encre: #EDEEEA;
  --accent: #D4BC4A;
  --filet: #2A2A28;
}
[data-registre="papier"] {
  --fond: #EDEEEA;
  --encre: #181A19;
  --accent: #7A6B19;   
  --filet: #C9CBC4;
}


*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--fond);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--sans);
  font-size: var(--corps);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
[data-registre] {
  transition: background-color var(--t-registre) ease-in-out,
              color var(--t-registre) ease-in-out;
}

img { color: transparent; }        

a {
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease-out, opacity var(--t-fondu) ease-out;
}
a:hover { color: var(--accent); }
.index-lien:hover,
.index-lien:hover .index-titre { color: inherit; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}

button.index-lien,
button.titre--secondaire {
  cursor: pointer;
  text-align: left;
  transition: color 160ms ease-out, opacity var(--t-fondu) ease-out;
}
button.index-lien { width: 100%; }
button.titre--secondaire:hover { color: var(--accent); }

.cible {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}


.titre {                            
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(3rem, 7.5vw, 8rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 72;
  margin: 0;
}

.titre--ouverture {                 
  font-size: clamp(2.5rem, 6vw, 6rem);
}

.titre--secondaire {                
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  line-height: 1.1;
  font-variation-settings: "opsz" 40;
}

.sous-ligne {                       
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  line-height: 1.45;
  font-variation-settings: "opsz" 9;
  color: var(--accent);
  text-wrap: pretty;
  transition: color var(--t-registre) ease-in-out;
}

.mot-titre {                        
  font-family: var(--serif);
  font-size: var(--corps);
  letter-spacing: 0.01em;
  font-variation-settings: "opsz" 11;
}

.chrome {                           
  font-size: var(--chrome);
  opacity: 0.64;   
}

.texte {                            
  max-width: 68ch;
  text-wrap: pretty;
  margin: 0;
}


.page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--marge);
  padding: var(--marge);
}

.entete,
.pied {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
}

.entete nav {
  display: flex;
  gap: 1.75rem;
  font-size: var(--chrome);
  opacity: 0.64;   
}

.pied {
  font-size: var(--chrome);
  opacity: 0.64;   
  border-top: 1px solid var(--filet);
  padding-top: 1.25rem;
}

.principal { flex: 1; }


@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  body,
  a,
  [data-registre],
  .sous-ligne {
    transition-duration: 120ms !important;
  }
}


@media (max-width: 768px) {
  :root { --marge: 7vw; }
}


body[data-page="index"] {
  position: relative;
  overflow-x: hidden;
  gap: 3vw;
  padding: 5vw 6vw;
}

.entete,
.index-liste,
.pied {
  position: relative;
  z-index: 1;
}

body[data-page="index"] .entete,
body[data-page="index"] .pied { padding-right: 40vw; }

.index-principal {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.index-liste {
  margin: 2vw 0 0;
  padding: 0;
  list-style: none;
  max-width: 52vw;
}

.index-entree {
  border-top: 1px solid var(--filet);
  transition: opacity var(--t-fondu) ease-out,
              border-color var(--t-registre) ease-in-out;
}

.index-liste:hover .index-entree:not(.est-actif),
.index-liste:focus-within .index-entree:not(.est-actif) { opacity: 0.3; }

.index-lien {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding: clamp(0.7rem, 1.3vw, 1.2rem) 0;
  min-height: 44px;
}

.index-titre { flex: 0 0 auto; white-space: nowrap; }
.index-sous-ligne { flex: 0 1 auto; min-width: 0; }

.index-lien:hover,
.index-lien:hover .index-titre { color: inherit; }

.index-titre { font-size: clamp(1.9rem, 2.95vw, 3.3rem); }
.est-actif .index-titre { font-style: italic; }

.index-sous-ligne {
  max-width: 34ch;
  text-align: right;
  text-wrap: pretty;
}


.index-zone {
  position: absolute;
  inset: 0 0 0 auto;
  width: 38vw;
  z-index: 0;
}

.index-slot {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--t-registre) ease-out;
  pointer-events: none;
}

.index-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
}

body.est-survole .index-slot { opacity: 1; }

@media (min-width: 769px) and (max-width: 1000px) {
  .index-lien { display: block; }
  .index-titre { white-space: normal; }

  .index-sous-ligne {
    display: block;
    margin-top: 0.6rem;
    max-width: 40ch;
    text-align: left;
  }
}


.index-photo-mobile { display: none; }

@media (max-width: 768px) {
  .index-zone { display: none; }

  body[data-page="index"] .entete,
  body[data-page="index"] .pied { padding-right: 0; }

  .index-liste { max-width: none; }
  .index-lien { display: block; }
  .index-titre { white-space: normal; }

  .index-sous-ligne {
    display: block;
    margin-top: 0.9rem;
    max-width: none;
    text-align: left;
  }

  .index-photo-mobile {
    display: block;
    margin-top: 1.25rem;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background-size: cover;
    background-position: center;
  }

  .index-entree { opacity: 1 !important; }
}



.chrome-fixe {
  position: fixed;
  inset: 0;
  z-index: 3;
  padding: 2.5dvh var(--marge);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  font-size: var(--chrome);
  opacity: 0.64;   
  transition: opacity 300ms ease-out;
}

body.defile .chrome-fixe { opacity: 0.25; }

.chrome-haut {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
}

.chrome-fixe a { pointer-events: auto; }

.legende {
  margin: 0;
  max-width: 46ch;
  text-wrap: pretty;
  transition: opacity var(--t-legende) ease-out;
}

body.legende-change .legende { opacity: 0; }

body.ouverture .legende { opacity: 0; }

body.sans-photo .legende,
body.sans-photo .compteur { opacity: 0; transition: opacity var(--t-legende) ease-out; }


.vue {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  padding: 7dvh 0 9dvh;
  background: var(--fond);
}

.vue:not(.vue--ouverture) {
  content-visibility: auto;
  contain-intrinsic-size: auto 100dvh;
}

.vue-masque,
.vue-bouton {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.vue-bouton { cursor: zoom-in; background: var(--fond); }

.vue picture { display: block; width: 100%; height: 100%; }

.vue-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
}

.vue--ouverture .vue-photo { view-transition-name: photo-ouverture; }

.vue-ouverture-texte {
  position: absolute;
  inset: auto var(--marge) 3dvh var(--marge);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.vue-ouverture-texte .titre { view-transition-name: titre-serie; }
.vue-ouverture-texte .chrome { margin: 0; }


@keyframes mn-revele {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes mn-derive {
  from { transform: translateY(-3%) scale(1.06); }
  to   { transform: translateY(3%) scale(1.06); }
}

@supports (animation-timeline: view()) {
  .vue-masque {
    animation: mn-revele linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
  }

  .vue:not(.vue--ouverture) .vue-photo {
    animation: mn-derive linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}


.fin {
  min-height: 100dvh;
  padding: var(--marge);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4rem;
}

.fin-note { max-width: 62ch; }

.fin-liens {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}


.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 9;
  background: var(--fond);
  display: flex;
  flex-direction: column;
}

.visionneuse[hidden] { display: none; }

.visionneuse-titre {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.visionneuse-cadre {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vw;
  overflow: hidden;
}

.visionneuse-photo {
  display: flex;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
}

.visionneuse-photo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background-size: cover;
}

.visionneuse-pied {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding: 0 var(--marge) var(--marge);
}

.visionneuse-legende { max-width: 46ch; text-wrap: pretty; }
.visionneuse-fermer { cursor: pointer; }


@view-transition { navigation: auto; }

::view-transition-old(photo-ouverture),
::view-transition-new(photo-ouverture) { animation-duration: 520ms; }

::view-transition-group(titre-serie) { animation-duration: 520ms; }


@media (max-width: 768px) {
  body.defile .chrome-fixe { opacity: 0.6; }

  .vue-bouton { cursor: default; }

  @keyframes mn-derive {
    from { transform: translateY(-1.5%) scale(1.03); }
    to   { transform: translateY(1.5%) scale(1.03); }
  }
}


@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }

  .vue-masque,
  .vue-photo {
    animation: none !important;
    clip-path: none !important;
    transform: none !important;
  }

  body.defile .chrome-fixe { opacity: 0.6; }
}


.atelier { display: flex; }

.atelier-colonne {
  width: 100%;
  max-width: 62ch;
  margin-left: min(33%, 30vw);
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

.atelier-courriel { word-break: break-word; }

@media (max-width: 768px) {
  .atelier-colonne {
    margin-left: 0;
    max-width: none;
    gap: 2.5rem;
  }
}


.hors-ecran {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}