@font-face {
  font-family: 'Baskervville';
  src: url('fonts/Baskervville-regular.otf') format('opentype');
}
@font-face {
  font-family: 'Roberte';
  src: url('fonts/roberte-regular.otf') format('opentype');
}
@font-face {
  font-family: 'Manifont';
  src: url('fonts/BBBManifontGrotesk-Book.otf') format('opentype');
}
@font-face {
  font-family: 'ManifontItalic';
  src: url('fonts/BBBManifontGrotesk-BookItalic.otf') format('opentype');
}

* {
  box-sizing: border-box;
}


:root{ --ink:#111111; 
  --gray:#767676; 
  --line:#111111; 
  --bg:#ffffff; 
  --accent-color:#1739d1;
  --max:1500px;
  --font-ui: clamp(0.9rem, 0.82rem + 0.22vw, 1.05rem);
  --font-title: clamp(1.8rem, 1.35rem + 1.35vw, 2.4rem);
  --font-subtitle: clamp(1rem, 0.9rem + 0.28vw, 1.2rem);
  --font-meta: clamp(0.72rem, 0.68rem + 0.12vw, 0.85rem);
  --font-body: clamp(0.9rem, 0.82rem + 0.25vw, 1rem);
  --font-long: clamp(0.95rem, 0.85rem + 0.35vw, 1.1rem);
  --font-small: clamp(0.7rem, 0.66rem + 0.12vw, 0.8rem);
}


body{margin-right:3vw; margin-left:3vw; margin-bottom:3vw; margin-top: 0.5vw; overflow-x:clip;}

body{ background:var(--bg); 
  color:var(--ink); 
  font-family:'Baskervville'; 
  font-size:var(--font-body);
}

.wrap{ max-width:var(--max); 
  margin:0 0; 
  padding:0px 0px 0px; 
}

.header{
  font-family:'Manifont'; 
  display:flex; 
  justify-content:flex-start;
  align-items:center;
  gap:3vw;
  position:sticky;
  top: 0;
  margin-top: -0.5vw;
  padding-top: 0.5vw;
  Padding-bottom: 0.5vw;
  margin-bottom:50px;
  z-index: 10;
  background:var(--bg);
}

.header::before{
  content:'';
  position:absolute;
  z-index:-1;
  top:-20vw;
  bottom:0;
  width: auto;
  left: -3vw;
  background:var(--bg);
}

.header::after{
  content:'';
  position:absolute;
  top:100%;
  left:-3vw;
  right:-3vw;
  height:1.5px;
  background:var(--line);
  transition: left,right 0.5s ease-out;
}

.kicker{ font-size:var(--font-ui); }

.author{ font-size:var(--font-ui); }

.header-logo{
  margin-left: -2.5vw;
  width: 48px;
  height:48px;
  margin-right:auto;
  cursor:pointer;
}


.header.is-scrolled::before {
  background: linear-gradient(to bottom, var(--accent-color) 0, var(--bg) 34px);
}

.header.is-scrolled::after{
  top: 100%;
  left: -3vw;
  right: -3vw;
  bottom:6vh;
  height: 6vh;
  background:linear-gradient(
    to bottom,
    var(--line) 0 1.5px,
    var(--accent-color) 1.5px,
    transparent 100%
  );
  
}

@media (max-width: 560px){
  .header{
    gap:16px;
  }

  .header-logo{
    width:38px;
    height:38px;
    flex-basis:38px;
  }
}


h1.item-title, h2.item-title{font-family:'Manifont'; font-weight:600; font-size:var(--font-title); line-height:1.05; margin:0 0 6px; letter-spacing:-0.01em; }
h2.item-title a, h1.item-title a{ color:inherit; text-decoration:none; }
h2.item-title a:hover{ opacity:0.6; }

.subtitle{ font-family:'Manifont'; font-style:italic; font-size:var(--font-subtitle); margin:0 0 10px; font-weight:400; }
.meta{ 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 20px;
  font-family:'Manifont'; font-size:var(--font-meta); color:var(--gray); line-height:1.7; margin:0 0 18px; }
.meta-context{
  width:fit-content;
  padding:5px 8px;
  border:1.5px solid var(--line);
  color:var(--ink);
  font-family:inherit;
  font-size:var(--font-small);
  font-weight:600;
  letter-spacing:0.04em;
  line-height:1.2;
  text-transform:uppercase;
}
.meta-context--research{ background:#e7f0e7; }
.meta-context--professional{ background:#f4e5d7; }
.meta-context--hybrid{ background:#e8e5f0; }
.desc-short{ font-size:var(--font-body); line-height:1.6; margin:0 0 20px; }
.desc-short p{ margin:0; }

.thumbs{ display:flex; gap:8px; margin:14px 0 26px; overflow:hidden; }
.thumbs img{border:1px solid var(--line); display:block; }
.thumbs.is-multiline{ flex-wrap:wrap; row-gap:8px; }

.media{ width:100%; border:1.5px solid var(--line); overflow:hidden; margin:18px 0 26px; background:var(--bg); }
.media iframe{ width:100%; display:block; border:none; }
.media:not(.media--audio){ aspect-ratio:16/9; }
.media:not(.media--audio) iframe{ height:100%; }
.media--video{ aspect-ratio:16/9; }
.media--video iframe{ height:100%; }
.media--audio iframe{padding: 1vw; height: 130px }

/*
  Bloc principal du lecteur audio.
  C'est le conteneur du bouton play, du waveform (l'onde sonore),
  et du temps affiché. On laisse un peu d'espace autour pour que
  le lecteur ne colle pas au texte ou aux images.
*/
.audio-player {
  margin: 18px 0 26px;
  padding: 14px 16px;
  border: 1px solid var(--ink);
}

/*
  Organisation interne du lecteur :
  1) bouton de lecture en bas à gauche,
  2) zone centrale avec l'onde sonore,
  3) durée à droite.
  "grid" permet de placer ces 3 éléments sur une seule ligne.
*/
.audio-track {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 14ch;
  align-items: center;
  gap: 14px;
}

/*
  La zone qui contient le waveform.
  "position: relative" est utile pour positionner la barre de chargement
  au centre de cette zone.
*/
.audio-waveform-shell {
  position: relative;
  min-width: 0;
  height: 56px;
}

/*
  L'onde sonore elle-même.
  Au début, on la cache avec "visibility: hidden" car elle n'est visible
  qu'une fois que WaveSurfer a fini de se charger et de préparer le son.
*/
.audio-waveform {
  min-width: 0;
  height: 56px;
  visibility: hidden;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

/*
  Quand le lecteur est prêt, on montre enfin le waveform.
  "is-ready" est ajouté dans le JS quand le son est chargé.
*/
.audio-track.is-ready .audio-waveform {
  visibility: visible;
}

/*
  Barre de chargement qui apparaît pendant le chargement du fichier audio.
  Elle est placée en absolu pour se mettre au milieu de la zone waveform.
*/
.audio-loading {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  transform: translateY(-50%);
  background: var(--gray);
}

/*
  L'élément span qui remplit la barre de chargement.
  Sa largeur part à 0 puis augmente selon le chargement du fichier.
*/
.audio-loading span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--gray);
}

/*
  Quand le son est prêt, on cache la barre de chargement.
*/
.audio-track.is-ready .audio-loading {
  display: none;
}

.audio-waveform wave {
  cursor: pointer;
}

/*
  Bloc des contrôles optionnels (pas vraiment utilisé ici,
  mais on le garde pour un éventuel futur style de texte/contrôles).
*/
.audio-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  color: #f4f4f2;
  font-family: 'Manifont';
  font-size: var(--font-small);
}

/*
  Bouton rond de lecture.
  C'est le petit bouton avec l'icône play/pause.
  "display: grid; place-items: center;" sert à centrer parfaitement
  le triangle à l'intérieur du cercle.
*/
.audio-play {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.audio-play:hover,
.audio-play:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 5px 9px 34px -4px var(--accent-color),
    9px 15px 46px -12px var(--accent-color);
  transform: translateY(-1px);
}

.audio-play:hover .audio-play-icon,
.audio-play:focus-visible .audio-play-icon {
  border-left-color: var(--bg);
}

.audio-play:hover.is-playing .audio-play-icon,
.audio-play:focus-visible.is-playing .audio-play-icon {
  background: linear-gradient(
    to right,
    var(--bg) 0 3px,
    transparent 3px 7px,
    var(--bg) 7px 10px
  );
}

/*
  Icône Play.
  On crée un triangle avec des bordures :
  - haut et bas transparent,
  - gauche noir pour faire la pointe.
  Cela donne l'illusion d'un bouton play.
*/
.audio-play-icon {
  display: block;
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid var(--ink);
}

/*
  Quand le son est en train de jouer, on remplace le triangle
  par deux petits blocs pour représenter la pause.
*/
.audio-play.is-playing .audio-play-icon {
  width: 10px;
  height: 14px;
  margin-left: 0;
  border: 0;
  background: linear-gradient(
    to right,
    var(--ink) 0 3px,
    transparent 3px 7px,
    var(--ink) 7px 10px
  );
}

/*
  Temps affiché sous la forme : 0:12 / 2:45
  "font-variant-numeric: tabular-nums" aide à aligner les chiffres
  comme dans un tableau, ce qui évite les sauts de largeur.
*/
.audio-time {
  font-family: 'Manifont';
  min-width: 14ch;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}

/*
  Le lecteur audio natif HTML5 est là en arrière-plan.
  On le garde pour la compatibilité, mais on le masque visuellement
  car le waveform personnalisé est celui qu'on affiche.
*/
.audio-player audio {
  display: block;
  width: 100%;
  height: 42px;
  accent-color: var(--ink);
}

.audio-player audio[hidden] {
  display: none;
}

/*
  Personnalisation du bandeau de contrôles du navigateur.
  On change juste la couleur du fond et du texte.
*/
.audio-player audio::-webkit-media-controls-panel {
  background-color: #1f1f1f;
}

.audio-player audio::-webkit-media-controls-current-time-display,
.audio-player audio::-webkit-media-controls-time-remaining-display {
  color: #f4f4f2;
}

/* Texte long — natif HTML, sans JS */
.desc-long {
  max-width: 68ch;
  margin: 42px auto 60px;
  padding: 3vw;
  font-size: var(--font-long);
  line-height: 1.75;
  text-wrap: pretty;
  border: 1px solid var(--line);
}

.desc-long--extrait {
  position: relative;
  overflow: hidden;
}

.desc-long--extrait::before {
  content: 'Pour lire le texte en entier, contactez-moi!';
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 3%;
  left: 0;
  width: max-content;
  padding: 8px 14px;
  box-shadow:0 0 8px var(--accent-color), 0 0 24px var(--accent-color);
  background: var(--accent-color);
  color: var(--bg);
  font-family: 'Manifont';
  font-size: var(--font-small);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  animation: excerpt-banner-marquee 12s linear infinite;
}

.desc-long--extrait::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40rem;
  background: linear-gradient(to bottom, transparent, var(--bg) 100%);
}

@keyframes excerpt-banner-marquee {
  from {
    transform: translateX(100vw);
  }
  to {
    transform: translateX(-100%);
  }
}

.desc-long p {
  margin: 0 0 1.4em;
}

.desc-long p:last-child {
  margin-bottom: 0;
}

.portfolio-button {
  border:1.5px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  cursor:pointer;
  box-shadow:none;
  transition:box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.expand-btn {
  display:inline-block;
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:9px 20px;
  margin-top:4px;
  background:var(--bg);
  color:var(--ink);
  font-family: 'Manifont';
  font-size:var(--font-small);
  text-decoration:none;
  cursor:pointer;
  box-shadow:none;
  transition:box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.portfolio-button:hover,
.portfolio-button:focus-visible {
  background:var(--ink);
  color:var(--bg);
  box-shadow:5px 9px 36px -4px var(--accent-color),
    9px 15px 48px -12px var(--accent-color);
}

.expand-btn:hover,
.expand-btn:focus-visible {
  background:var(--ink);
  color:var(--bg);
  box-shadow:5px 9px 36px -4px var(--accent-color),
    9px 15px 48px -12px var(--accent-color);
}

.portfolio-button--expand{
  display:inline-block;
  border-radius:999px;
  padding:9px 20px;
  font-size:var(--font-small);
  text-decoration:none;
  margin-top:4px;
}

.portfolio-button--audio {
  border-radius:50%;
  color:var(--ink);
}

.portfolio-button--audio:hover,
.portfolio-button--audio:focus-visible {
  background:var(--ink);
  color:var(--bg);
}

.divider{ border:none; border-top:1.5px solid var(--line); margin:44px 0; }

.site-footer {
  display: none;
  position: relative;
  color:var(--bg);
  font-size:var(--font-small);
  min-height: 100px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 160px -3vw -3vw;
  padding: 32px 3vw;
  background: var(--accent-color);
  font-family: 'Manifont';
}

.is-loaded .site-footer {
  display: flex;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: -80px;
  right: 0;
  left: 0;
  height: 80px;
  background: linear-gradient(to bottom, var(--bg), var(--accent-color));
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: #fff;
  font-size: var(--font-small);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.site-footer__instagram {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.site-footer__instagram circle:last-child {
  fill: currentColor;
  stroke: none;
}

@media (max-width: 600px) {
  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

.site-footer a:hover,
.site-footer a:focus-visible {
  opacity: 0.7;
}

.piece-preview{ 
  margin-bottom:30px;
 }
.piece-preview h3.item-title{ font-family:'Manifont'; font-size:clamp(1.35rem, 1.1rem + 0.7vw, 1.8rem); margin:0 0 2px; }
.piece-preview h3.item-title a{ color:inherit; text-decoration:none; }
.piece-preview h3.item-title a:hover{ opacity:0.6; }
.piece-preview .subtitle{ font-size:var(--font-body); margin-bottom:6px; }
.piece-preview .meta{ margin-bottom:10px; font-size:var(--font-meta); }

.project-group {
  margin: 44px 0;
}

.project-group__header {
  margin-bottom: 24px;
}

.project-group__children {
  position: relative;
  margin-left: 1.5rem;
  padding-left: 2rem;
  border-left: 1.5px solid var(--line);
}

.project-group__children .piece-preview {
  position: relative;
}

.project-group__children .piece-preview::before {
  content: '';
  position: absolute;
  top: 0.8em;
  left: -2rem;
  width: 2rem;
  border-top: 1.5px solid var(--line);
}

.project-group__children .piece-preview:last-child {
  margin-bottom: 0;
}

.piece-preview--standalone {
  margin-top: 44px;
}

.back-link{ display:inline-block; font-size:var(--font-small); color:var(--gray); text-decoration:none; margin-bottom:26px; }
.back-link:hover{ color:var(--ink); }
.parent-tag{ font-size:var(--font-small); color:var(--gray); margin-bottom:22px; }
.parent-tag a{ color:var(--gray); }

.loading-note{ color:var(--gray); font-style:italic; font-size:var(--font-small); }

/* Style du lightbox(fenêtre des images en plein écran) */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:linear-gradient(to bottom, var(--accent-color), var(--bg) 58%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Assure que le lightbox est au-dessus de tout le reste */
  cursor: pointer; /* Change le curseur pour indiquer que c'est cliquable */
  overflow: hidden; /* Empêche le défilement de la page en arrière-plan */
}

.lightbox-frame {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  line-height: 0;
}

.lightbox-content {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain; /* Garde les proportions de l'image */
  transform: scale(1.04); /* Agrandit l'image à l'intérieur du cadre */
  transform-origin: center; /* Centre la mise à l'échelle */
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transition: clip-path 1.5s cubic-bezier(.22, .75, .25, 1), opacity 180ms ease;
}

.lightbox-content.is-ready {
  clip-path: inset(0);
  opacity: 1;
}

.lightbox-loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  transition: opacity 180ms ease;
}

.lightbox-loader img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  animation: lightbox-loader-pulse 1.5s ease-in-out infinite alternate;
}

.lightbox:not(.is-loading) .lightbox-loader {
  opacity: 0;
  pointer-events: none;
}

@keyframes lightbox-loader-pulse {
  from { transform: scale(1) rotate(0deg); opacity: 1; }
  to { transform: scale(1) rotate(360deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox-content,
  .lightbox-loader,
  .lightbox-loader img {
    animation: none;
    transition: none;
  }
}

.lightbox.is-loading .lightbox-content {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transition: none;
}