/* ============================================================
   oscarviguier.com
   Tout le réglage visuel est ici.
   ============================================================ */

:root{
  --papier:#FCFBF9;
  --encre:#111110;
  --encre-55:rgba(17,17,16,.55);
  --encre-28:rgba(17,17,16,.28);
  --encre-10:rgba(17,17,16,.10);
  --texte:"Helvetica Neue","Helvetica",Arial,sans-serif;
  --rail:186px;
  --marge:40px;
  --gouttiere:5px;
  --lent:.7s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papier:#0C0C0B;--encre:#F2EFE9;
    --encre-55:rgba(242,239,233,.55);--encre-28:rgba(242,239,233,.28);--encre-10:rgba(242,239,233,.10);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--texte);font-size:12.5px;line-height:1.65;letter-spacing:.015em;
  -webkit-font-smoothing:antialiased;
  opacity:0;animation:entree .8s ease forwards;
}
@keyframes entree{to{opacity:1}}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--encre);color:var(--papier)}
:focus-visible{outline:1px solid var(--encre);outline-offset:4px}

/* ---------- colonne de gauche ---------- */
.rail{position:fixed;top:var(--marge);left:var(--marge);width:var(--rail);z-index:40}
.nom{margin:0 0 30px;font-size:12.5px;letter-spacing:.16em}
.nom small{display:block;font-size:10px;letter-spacing:.2em;color:var(--encre-28);margin-top:5px;text-transform:uppercase}
.menu{list-style:none;margin:0;padding:0}
.menu li{margin:0 0 3px}
.menu a{
  display:inline-block;font-size:12px;letter-spacing:.05em;color:var(--encre-55);
  transition:color .3s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}
.menu a:hover{color:var(--encre);transform:translateX(3px)}
.menu a.on{color:var(--encre)}
.menu a.on::before{content:"— ";color:var(--encre-28)}
.social{position:fixed;bottom:var(--marge);left:var(--marge);list-style:none;margin:0;padding:0;width:var(--rail);z-index:40}
.social li{margin:0 0 2px}
.social a{font-size:10.5px;letter-spacing:.14em;color:var(--encre-28);transition:color .3s ease}
.social a:hover{color:var(--encre)}

/* ---------- corps ---------- */
main{margin-left:calc(var(--rail) + var(--marge) * 2);padding:var(--marge) var(--marge) 120px 0;max-width:1320px}
h1{
  font-size:11px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;
  color:var(--encre-28);margin:0 0 44px;
}
.intro{max-width:46ch;margin:-30px 0 46px;color:var(--encre-55)}

.monte{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.monte.vue{opacity:1;transform:none}

/* ---------- accueil ---------- */
body.accueil{overflow:hidden}
body.accueil main{margin:0;padding:0;max-width:none}
.plein{position:fixed;inset:0;z-index:1;background:var(--encre)}
.plein img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.6s ease;
}
.plein img.vue{opacity:1}
.accueil .rail,.accueil .social,.bandedemo{mix-blend-mode:difference}
.accueil .nom,.accueil .nom small,.accueil .menu a,.accueil .social a,.bandedemo{color:#fff}
.accueil .menu a{opacity:.62;transition:opacity .3s ease}
.accueil .menu a:hover{opacity:1}
.accueil .nom small{opacity:.5}
.bandedemo{
  position:fixed;bottom:var(--marge);right:var(--marge);z-index:10;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
}
.bandedemo::after{content:"";display:block;height:1px;background:#fff;margin-top:5px;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.bandedemo:hover::after{transform:scaleX(1)}

/* ---------- grille de projets ---------- */
.grille{display:grid;grid-template-columns:repeat(6,1fr);gap:52px var(--gouttiere)}
.vignette{margin:0;grid-column:span 3}
.vignette.large{grid-column:span 6}
.vignette.tiers{grid-column:span 2}
.vignette a{display:block}
.cadre{position:relative;overflow:hidden;background:var(--encre-10)}
.cadre img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.vignette a:hover .cadre img{transform:scale(1.035)}
.vignette figcaption{
  margin-top:11px;display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  border-top:1px solid var(--encre-10);padding-top:9px;
}
.vignette .titre{letter-spacing:.03em}
.vignette .credit{font-size:11px;color:var(--encre-28);text-align:right;transition:color .3s ease}
.vignette a:hover .credit{color:var(--encre-55)}

/* ---------- page projet ---------- */
.retour{
  display:inline-block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--encre-28);margin-bottom:34px;transition:color .3s ease
}
.retour:hover{color:var(--encre)}
.lecteur{position:relative;width:100%;aspect-ratio:16/9;background:var(--encre-10)}
.lecteur iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.entete{display:grid;grid-template-columns:1fr 1fr;gap:20px 60px;margin:26px 0 60px;align-items:start}
.projet-titre{font-size:22px;font-weight:400;letter-spacing:-.01em;line-height:1.2;margin:0}
.projet-credits{color:var(--encre-55);margin:0}
.projet-credits p{margin:0 0 .35em}
.projet-credits .fiche{margin-top:14px;font-size:11px;letter-spacing:.04em;color:var(--encre-28)}
.suite{display:grid;gap:var(--gouttiere)}
.suite.deux{grid-template-columns:1fr 1fr}

/* ---------- blocs photographie ---------- */
.bloc{margin:0 0 var(--gouttiere)}
.bloc.deux,.bloc.trois,.bloc.galerie{display:grid;gap:var(--gouttiere)}
.bloc.deux{grid-template-columns:1fr 1fr}
.bloc.trois{grid-template-columns:repeat(3,1fr)}
.bloc.galerie{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.bloc.deux img,.bloc.trois img,.bloc.galerie img{width:100%;aspect-ratio:3/2;object-fit:cover}
.bloc.espace{height:96px}
.bloc figcaption{font-size:10.5px;letter-spacing:.1em;color:var(--encre-28);margin-top:9px}
.zoom{cursor:zoom-in;transition:opacity .4s ease}
.zoom:hover{opacity:.86}

/* ---------- visionneuse ---------- */
.visionneuse{
  position:fixed;inset:0;z-index:100;background:rgba(9,9,8,.97);
  opacity:0;pointer-events:none;transition:opacity .45s ease;
  display:flex;align-items:center;justify-content:center;
}
.visionneuse.ouverte{opacity:1;pointer-events:auto}
.visionneuse img{max-width:88vw;max-height:84vh;object-fit:contain}
.visionneuse .compteur{
  position:absolute;bottom:26px;left:0;right:0;text-align:center;
  color:rgba(255,255,255,.5);font-size:10.5px;letter-spacing:.24em;
}
.visionneuse .fermer{position:absolute;top:20px;right:26px;color:rgba(255,255,255,.6);font-size:20px;cursor:pointer;line-height:1;z-index:2}
.visionneuse .fermer:hover{color:#fff}
.visionneuse .fleche{
  position:absolute;top:0;bottom:0;width:24vw;cursor:pointer;border:0;background:none;
  color:rgba(255,255,255,0);font-size:10.5px;letter-spacing:.2em;transition:color .3s ease;
  font-family:var(--texte);
}
.visionneuse .fleche:hover{color:rgba(255,255,255,.65)}
.visionneuse .prec{left:0;text-align:left;padding-left:30px}
.visionneuse .suiv{right:0;text-align:right;padding-right:30px}

/* ---------- about ---------- */
.about{max-width:60ch}
.about p{margin:0 0 1.15em}
.about p.tete{font-size:17px;line-height:1.5;letter-spacing:-.005em;margin-bottom:1.6em}
.about h2{
  font-size:10px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;
  color:var(--encre-28);margin:52px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--encre-10)
}
.about ul{list-style:none;margin:0;padding:0}
.about li{padding:8px 0;border-bottom:1px solid var(--encre-10);display:flex;justify-content:space-between;gap:24px}
.about li span:last-child{color:var(--encre-28);font-size:11px;text-align:right}
.about a{border-bottom:1px solid var(--encre-28);transition:border-color .3s ease}
.about a:hover{border-bottom-color:var(--encre)}

.html-libre{margin:44px 0}

/* ---------- écrans étroits ---------- */
@media (max-width:860px){
  :root{--marge:20px;--gouttiere:4px}
  .rail{position:static;width:auto;margin:var(--marge) var(--marge) 30px}
  .nom{margin-bottom:16px}
  .menu{display:flex;flex-wrap:wrap;gap:0 18px}
  .menu li{margin:0}
  .menu a.on::before{content:none}
  .menu a.on{border-bottom:1px solid var(--encre)}
  .social{position:static;width:auto;display:flex;gap:0 18px;margin:34px var(--marge) 60px}
  main{margin:0;padding:0 var(--marge) 60px;max-width:none}
  h1{margin-bottom:28px}
  .intro{margin:-14px 0 30px}
  .grille{grid-template-columns:1fr;gap:32px 0}
  .vignette,.vignette.large,.vignette.tiers{grid-column:span 1}
  .entete{grid-template-columns:1fr;gap:14px;margin-bottom:36px}
  .bloc.trois,.bloc.deux,.suite.deux{grid-template-columns:1fr}
  .bloc.galerie{grid-template-columns:1fr 1fr}
  body.accueil{overflow:auto}
  .accueil .rail,.accueil .social,.bandedemo{mix-blend-mode:normal}
  .accueil .nom,.accueil .nom small,.accueil .menu a,.accueil .social a,.bandedemo{color:var(--encre)}
  .accueil .nom small{color:var(--encre-28)}
  .accueil .menu a{color:var(--encre-55);opacity:1}
  .plein{position:relative;inset:auto;height:64vh;margin:0 var(--marge)}
  .bandedemo{position:static;display:inline-block;margin:18px var(--marge) 0}
  .bandedemo::after{background:var(--encre)}
  .visionneuse .fleche{width:34vw}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .monte{opacity:1;transform:none}
  .plein img{opacity:1}
  .plein img:first-child{opacity:1}
}