/* =========================================================
   YAKHCHAL — DIRECTION ARTISTIQUE
   Architecture / Recherche / Patrimoine contemporain
   ========================================================= */

:root{
  --nuit-haut:#11100D;
  --nuit:#171612;
  --nuit-clair:#24221C;

  --terre:#211A14;
  --terre-clair:#2C231B;

  --lapis:#315C78;
  --lapis-pale:#8FAABD;

  --turquoise:#B9A36A;

  --glace:#F2EFE7;

  --or:#C8A96A;
  --or-pale:#E0C88D;

  --brique:#A98261;

  --platre:#F0ECE2;
  --platre-2:#D9D1C2;

  --encre:#171614;
  --encre-doux:#716B61;

  --glow:none;

  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-texte:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --mesure:68ch;
  --marge:clamp(1.25rem,5vw,6rem);
  --rythme:clamp(4rem,9vw,8rem);

  --ligne:rgba(240,236,226,.13);
  --ligne-claire:rgba(240,236,226,.22);
}

/* =========================================================
   BASE
   ========================================================= */

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

html{
  scroll-behavior:smooth;
  background:#11100D;
}

body{
  margin:0;
  background:#11100D;
  color:var(--glace);
  font-family:var(--f-texte);
  font-weight:400;
  font-size:clamp(1rem,.35vw + .92rem,1.08rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

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


/* =========================================================
   LOGO
   ========================================================= */

.barre__marque{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(1.2rem,3vw,1.5rem);
  letter-spacing:.015em;
  text-transform:none;
  white-space:nowrap;
  line-height:1;
  text-shadow:none;
}

.barre__marque .logo-yakh{
  color:var(--or);
  font-family:var(--f-display);
}

.barre__marque .logo-chal{
  color:var(--platre);
  font-weight:400;
  font-family:var(--f-display);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.barre{
  position:sticky;
  top:0;
  z-index:60;

  display:flex;
  align-items:center;
  gap:2rem;

  padding:.95rem var(--marge);

  background:rgba(17,16,13,.92);
  backdrop-filter:blur(14px);

  border-bottom:1px solid var(--ligne);

  font-family:var(--f-texte);
  font-size:.68rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.barre__liens{
  display:flex;
  gap:1.8rem;
  margin-left:auto;
  overflow-x:auto;
  scrollbar-width:none;
}

.barre__liens::-webkit-scrollbar{
  display:none;
}

.barre__liens a{
  opacity:.58;
  white-space:nowrap;
  transition:
    opacity .25s ease,
    color .25s ease;
}

.barre__liens a:hover{
  opacity:1;
  color:var(--or);
  text-shadow:none;
}

.barre__liens a.active{
  opacity:1;
  color:var(--or);
  text-shadow:none;
}


/* =========================================================
   STRUCTURE
   ========================================================= */

.bloc{
  padding:var(--rythme) var(--marge);
  position:relative;
  max-width:1560px;
  margin-inline:auto;
}

.page-content{
  padding-top:clamp(2.5rem,5vw,4.5rem) !important;
  padding-bottom:var(--rythme);
  padding-left:var(--marge);
  padding-right:var(--marge);
  max-width:1560px;
  margin-inline:auto;
  position:relative;
}

.page-content,
.fiche{
  scroll-margin-top:5rem;
}


/* =========================================================
   TITRES
   ========================================================= */

.eyebrow{
  font-family:var(--f-texte);
  font-size:.65rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--or);
  margin:0 0 1.4rem;
  display:flex;
  align-items:center;
  gap:.8rem;
}

.eyebrow::before{
  content:"";
  width:2.5rem;
  height:1px;
  background:currentColor;
  opacity:.7;
  flex:none;
}

h2{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(2.3rem,4.7vw,4.3rem);
  line-height:1.02;
  letter-spacing:-.035em;
  margin:0 0 1.5rem;
  max-width:16ch;
  color:var(--platre);
}

h3{
  font-family:var(--f-display);
  font-weight:500;
  font-size:1.35rem;
  line-height:1.2;
  margin:0 0 .6rem;
  color:var(--or-pale);
}

p{
  max-width:var(--mesure);
  margin:0 0 1.15rem;
}

.chapeau{
  font-size:1.15rem;
  line-height:1.7;
  color:rgba(240,236,226,.72);
}

strong{
  font-weight:600;
  color:var(--or-pale);
}


/* =========================================================
   REVEAL
   ========================================================= */

.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.2,.7,.3,1);
}

.reveal.vu{
  opacity:1;
  transform:none;
}

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }

  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
  }
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
  position:relative;
  min-height:calc(100svh - 58px);

  display:grid;
  grid-template-columns:1fr;

  align-items:end;

  padding:
    0
    var(--marge)
    clamp(3rem,7vw,6rem);

  overflow:hidden;

  background:
    linear-gradient(
      90deg,
      rgba(17,16,13,.98) 0%,
      rgba(17,16,13,.88) 34%,
      rgba(17,16,13,.42) 65%,
      rgba(17,16,13,.18) 100%
    ),
    #11100D;
}

.hero__grid{
  display:none;
}

.hero__image-wrap{
  position:absolute;
  z-index:1;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.hero__image{
  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center right;

  opacity:.72;

  filter:
    saturate(.72)
    contrast(1.05)
    brightness(.82);

  mix-blend-mode:normal;

  transform:scale(1.015);
}

.hero__voile{
  display:none !important;
}

.hero__contenu{
  position:relative;
  z-index:3;

  max-width:min(100%,64rem);
  padding-bottom:.5rem;
}

.hero__persan{
  font-size:clamp(1.4rem,3vw,2.1rem);
  line-height:1;
  color:var(--or-pale);
  margin:0 0 1rem;
  font-weight:300;
  opacity:.8;
  letter-spacing:.03em;
}

.hero h1{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(4.5rem,9vw,9rem);
  line-height:.9;
  letter-spacing:-.045em;

  margin:0 0 1.7rem;

  color:var(--platre);

  white-space:nowrap;

  text-shadow:none;
}

.hero h1 em{
  font-style:normal;
  font-weight:500;
  color:var(--or);
  text-shadow:none;
}

.hero__sous{
  font-family:var(--f-texte);
  font-size:clamp(1rem,1.4vw,1.18rem);
  font-weight:400;

  color:rgba(240,236,226,.75);

  max-width:54ch;
  margin:0 0 2.3rem;

  line-height:1.75;
}

.hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 2rem;

  font-family:var(--f-mono);
  font-size:.62rem;
  letter-spacing:.12em;
  text-transform:uppercase;

  color:rgba(240,236,226,.43);

  border-top:1px solid var(--ligne-claire);
  padding-top:1.15rem;
}

.hero__meta b{
  font-weight:500;
  color:var(--or);
}


/* =========================================================
   FICHE
   ========================================================= */

.fiche{
  background:#171612;

  padding:
    clamp(2.5rem,5vw,4rem)
    var(--marge);

  border-block:1px solid var(--ligne);
}

.fiche__grille{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));

  gap:0;

  background:transparent;

  border-top:1px solid var(--ligne);
  border-left:1px solid var(--ligne);
}

.fiche__item{
  background:#171612;

  padding:1.7rem 1.4rem;

  border-right:1px solid var(--ligne);
  border-bottom:1px solid var(--ligne);

  transition:
    background .25s ease;
}

.fiche__item:hover{
  background:#201E18;
}

.fiche__val{
  font-family:var(--f-display);
  font-size:clamp(1.6rem,2.8vw,2.25rem);
  line-height:1;

  color:var(--platre);

  display:block;
  margin-bottom:.5rem;

  font-weight:400;
}

.fiche__val span{
  font-size:.52em;
  color:var(--or);
  font-family:var(--f-texte);
}

.fiche__lab{
  font-family:var(--f-mono);
  font-size:.6rem;
  letter-spacing:.11em;
  text-transform:uppercase;

  color:rgba(240,236,226,.43);

  line-height:1.5;

  display:block;
}


/* =========================================================
   COUPE ARCHITECTURALE
   ========================================================= */

.coupe{
  background:
    linear-gradient(
      180deg,
      #171612 0%,
      #1D1914 48%,
      #211A14 100%
    );
}

.coupe__cadre{
  margin-top:3rem;

  border:1px solid var(--ligne-claire);

  background:#191714;

  position:relative;
  overflow:hidden;

  box-shadow:none;
}

.coupe__svg{
  display:block;
  width:100%;
  height:auto;
}

.point{
  cursor:pointer;
}

.point circle.halo{
  fill:var(--or);
  opacity:.08;
  transition:opacity .25s,r .25s;
}

.point circle.noyau{
  fill:var(--or);
  transition:fill .25s;
}

.point text{
  font-family:var(--f-mono);
  font-size:11px;
  fill:#171612;
  font-weight:500;
  pointer-events:none;
}

.point:hover circle.halo,
.point.actif circle.halo{
  opacity:.28;
  r:17;
}

.point.actif circle.noyau{
  fill:var(--platre);
}

.piece{
  transition:opacity .3s ease;
}

.coupe__cadre.focalise .piece{
  opacity:.25;
}

.coupe__cadre.focalise .piece.eclaire{
  opacity:1;
}

.axe{
  stroke:rgba(240,236,226,.22);
  stroke-width:1;
  stroke-dasharray:2 6;
}

.axe-txt{
  font-family:var(--f-mono);
  font-size:11px;
  fill:rgba(240,236,226,.48);
  letter-spacing:.08em;
}


/* =========================================================
   LEGENDE
   ========================================================= */

.legende{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

  background:#211A14;

  border-top:1px solid var(--ligne);
}

.legende__btn{
  background:#211A14;

  text-align:left;

  padding:1.35rem 1.3rem;

  color:inherit;

  border:0;
  border-right:1px solid var(--ligne);
  border-bottom:1px solid var(--ligne);

  font-family:inherit;
  font-size:.9rem;

  cursor:pointer;

  transition:
    background .25s ease,
    box-shadow .25s ease;

  display:block;
  width:100%;
}

.legende__btn:hover,
.legende__btn.actif{
  background:#2A2119;
}

.legende__btn.actif{
  box-shadow:inset 3px 0 0 var(--or);
}

.legende__num{
  font-family:var(--f-mono);
  font-size:.62rem;
  color:var(--or);
  letter-spacing:.1em;

  display:block;
  margin-bottom:.4rem;
}

.legende__titre{
  display:block;
  font-weight:500;
  color:var(--platre);
  margin-bottom:.3rem;
}

.legende__txt{
  display:block;
  font-size:.83rem;
  line-height:1.6;
  color:rgba(240,236,226,.55);
  font-weight:400;
}


/* =========================================================
   SECTION NUIT
   ========================================================= */

.nuit-sect{
  background:
    linear-gradient(
      180deg,
      #211A14 0%,
      #17191A 55%,
      #111416 100%
    );
}


/* =========================================================
   DUO
   ========================================================= */

.duo{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2.5rem,5vw,5rem);
  align-items:start;
}

@media(min-width:940px){

  .duo{
    grid-template-columns:1.05fr .95fr;
  }
}


/* =========================================================
   SCENE
   ========================================================= */

.scene{
  border:1px solid var(--ligne-claire);

  background:#151718;

  overflow:hidden;
  position:relative;

  box-shadow:none;
}

.scene svg{
  display:block;
  width:100%;
  height:auto;
}

.scene__bascule{
  display:flex;

  border-top:1px solid var(--ligne);
}

.scene__bascule button{
  flex:1;

  background:transparent;
  border:0;

  padding:1rem;

  color:rgba(240,236,226,.45);

  cursor:pointer;

  font-family:var(--f-mono);
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;

  transition:
    background .25s ease,
    color .25s ease;
}

.scene__bascule button+button{
  border-left:1px solid var(--ligne);
}

.scene__bascule button[aria-pressed="true"]{
  background:var(--or);
  color:#171612;
  font-weight:600;
  box-shadow:none;
}

.soleil,
.lune,
.rayon-jour,
.rayon-nuit,
.ombre-jour,
.givre,
.eau-liquide{
  transition:opacity .7s ease;
}

.scene[data-moment="jour"] .lune,
.scene[data-moment="jour"] .rayon-nuit,
.scene[data-moment="jour"] .givre,
.scene[data-moment="jour"] .etoile-s{
  opacity:0;
}

.scene[data-moment="nuit"] .soleil,
.scene[data-moment="nuit"] .rayon-jour,
.scene[data-moment="nuit"] .ombre-jour,
.scene[data-moment="nuit"] .eau-liquide{
  opacity:0;
}

.ciel-fond{
  transition:fill 1.1s ease;
}

.temp-lecture{
  font-family:var(--f-mono);
  font-size:15px;
  fill:var(--or);
  letter-spacing:.06em;
}

.scene-lab{
  font-family:var(--f-mono);
  font-size:10.5px;
  fill:rgba(240,236,226,.52);
  letter-spacing:.08em;
}

.fleche-froid{
  stroke:var(--platre);
  stroke-width:1.4;
  fill:none;
}

.fleche-chaud{
  stroke:var(--or);
  stroke-width:1.4;
  fill:none;
}

@keyframes monte{

  0%{
    transform:translateY(0);
    opacity:0;
  }

  25%{
    opacity:.7;
  }

  100%{
    transform:translateY(-26px);
    opacity:0;
  }
}

.scene[data-moment="nuit"] .rayon-nuit g{
  animation:monte 3.2s linear infinite;
}

.scene[data-moment="nuit"] .rayon-nuit g:nth-child(2){
  animation-delay:1.05s;
}

.scene[data-moment="nuit"] .rayon-nuit g:nth-child(3){
  animation-delay:2.1s;
}


/* =========================================================
   MECANISMES
   ========================================================= */

.mecanismes{
  list-style:none;
  margin:0;
  padding:0;
}

.mecanismes li{
  border-top:1px solid var(--ligne);

  padding:1.45rem 0;

  display:grid;

  grid-template-columns:auto 1fr;

  gap:1.2rem;
}

.mecanismes li:last-child{
  border-bottom:1px solid var(--ligne);
}

.mecanismes .sym{
  font-family:var(--f-mono);
  font-size:.65rem;
  color:var(--or);

  letter-spacing:.1em;

  padding-top:.3rem;

  min-width:3.5rem;
}

.mecanismes p{
  margin:0;

  font-size:.95rem;

  color:rgba(240,236,226,.62);
}


/* =========================================================
   AILLEURS
   ========================================================= */

.ailleurs{
  background:
    linear-gradient(
      180deg,
      #211A14 0%,
      #191511 100%
    );
}

.cartes{
  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(255px,1fr));

  gap:0;

  background:transparent;

  margin-top:3rem;

  border-top:1px solid rgba(224,200,141,.2);
  border-left:1px solid rgba(224,200,141,.2);
}

.carte{
  background:#211A14;

  padding:1.8rem 1.5rem;

  border-right:1px solid rgba(224,200,141,.2);
  border-bottom:1px solid rgba(224,200,141,.2);

  transition:
    background .3s ease;
}

.carte:hover{
  background:#2A2119;
  box-shadow:none;
}

.carte__lieu{
  font-family:var(--f-mono);

  font-size:.6rem;

  letter-spacing:.17em;

  text-transform:uppercase;

  color:var(--or);

  display:block;

  margin-bottom:.7rem;
}

.carte__nom{
  font-family:var(--f-display);

  font-size:1.45rem;

  color:var(--platre);

  margin:0 0 .6rem;

  font-weight:500;
}

.carte__nom i{
  font-style:normal;

  font-size:.68em;

  color:rgba(240,236,226,.4);

  display:block;

  font-family:var(--f-mono);

  letter-spacing:.05em;

  margin-top:.25rem;
}

.carte p{
  font-size:.88rem;

  line-height:1.65;

  color:rgba(240,236,226,.6);

  margin:0;
}


/* =========================================================
   PIED DE PAGE
   ========================================================= */

.pied{
  background:#11100D;

  color:rgba(240,236,226,.45);

  padding:
    clamp(3rem,7vw,5rem)
    var(--marge);

  border-top:1px solid var(--ligne);
}

.pied__meta{
  display:flex;

  flex-wrap:wrap;

  gap:.5rem 2.5rem;

  font-family:var(--f-mono);

  font-size:.62rem;

  letter-spacing:.11em;

  text-transform:uppercase;

  border-top:1px solid var(--ligne);

  padding-top:1.4rem;
}

.pied__meta span b{
  color:var(--or);
  font-weight:500;
}


/* =========================================================
   HAMBURGER
   ========================================================= */

.nav-toggle{
  display:none;

  margin-left:auto;

  background:none;

  border:none;

  cursor:pointer;

  padding:.4rem;

  width:2.4rem;
  height:2.4rem;

  position:relative;

  z-index:70;
}

.nav-toggle span{
  display:block;

  width:100%;
  height:1px;

  background:var(--or);

  position:absolute;

  left:0;

  transition:
    transform .25s,
    opacity .2s,
    top .25s;
}

.nav-toggle span:nth-child(1){
  top:.55rem;
}

.nav-toggle span:nth-child(2){
  top:1.1rem;
}

.nav-toggle span:nth-child(3){
  top:1.65rem;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1){
  top:1.1rem;
  transform:rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3){
  top:1.1rem;
  transform:rotate(-45deg);
}


/* =========================================================
   FORMULAIRE CONTACT
   ========================================================= */

.contact-form{
  max-width:520px;

  margin-top:2.5rem;

  display:flex;
  flex-direction:column;

  gap:1.5rem;
}

.form-group{
  display:flex;
  flex-direction:column;

  gap:.5rem;
}

.form-group label{
  font-family:var(--f-mono);

  font-size:.62rem;

  letter-spacing:.12em;

  text-transform:uppercase;

  color:rgba(240,236,226,.45);
}

.form-group input,
.form-group textarea{
  background:#171612;

  border:1px solid var(--ligne-claire);

  border-radius:0;

  padding:1rem;

  color:var(--glace);

  font-family:var(--f-texte);

  font-size:1rem;

  transition:
    border-color .2s,
    background .2s;
}

.form-group input:focus,
.form-group textarea:focus{
  outline:none;

  border-color:var(--or);

  background:#1D1B17;

  box-shadow:none;
}

.form-group textarea{
  resize:vertical;
  min-height:150px;
}

.btn{
  align-self:flex-start;

  background:var(--or);

  color:#171612;

  border:none;

  border-radius:0;

  padding:.9rem 2rem;

  font-family:var(--f-mono);

  font-size:.68rem;

  letter-spacing:.12em;

  text-transform:uppercase;

  font-weight:600;

  cursor:pointer;

  transition:
    background .2s,
    transform .15s;
}

.btn:hover{
  background:var(--or-pale);
  transform:translateY(-1px);
}

.alert{
  padding:1rem 1.2rem;

  border-radius:0;

  margin:1.5rem 0;

  font-size:.95rem;

  max-width:520px;
}

.alert-success{
  background:rgba(200,169,106,.1);

  border:1px solid rgba(200,169,106,.35);

  color:var(--or-pale);
}

.alert-error{
  background:rgba(180,80,60,.1);

  border:1px solid rgba(180,80,60,.3);

  color:#E5A092;
}


/* =========================================================
   GALERIE
   ========================================================= */

.galerie{
  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:2px;

  background:#11100D;

  border:1px solid var(--ligne);

  margin-top:3rem;
}

@media(min-width:720px){

  .galerie{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(min-width:1100px){

  .galerie{
    grid-template-columns:repeat(4,1fr);
  }
}

.galerie__item{
  margin:0;

  background:#171612;

  position:relative;

  overflow:hidden;

  aspect-ratio:4/3;
}

.galerie__item--large{
  grid-column:span 2;
  grid-row:span 2;

  aspect-ratio:auto;

  min-height:280px;
}

.galerie__item--wide{
  grid-column:span 2;

  aspect-ratio:21/9;
}

.galerie__item img{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  transition:
    transform .7s cubic-bezier(.2,.7,.3,1),
    filter .5s ease;

  filter:saturate(.78);
}

.galerie__item:hover img{
  transform:scale(1.035);
  filter:saturate(.95);
}

.galerie__item figcaption{
  position:absolute;

  left:0;
  right:0;
  bottom:0;

  padding:2rem 1rem .9rem;

  font-family:var(--f-mono);

  font-size:.58rem;

  letter-spacing:.1em;

  text-transform:uppercase;

  color:rgba(240,236,226,.9);

  background:
    linear-gradient(
      transparent,
      rgba(17,16,13,.88)
    );

  opacity:0;

  transition:opacity .3s;
}

.galerie__item:hover figcaption{
  opacity:1;
}


/* =========================================================
   LIGHTBOX
   ========================================================= */

.lightbox{
  position:fixed;

  inset:0;

  z-index:500;

  background:rgba(12,11,9,.96);

  display:flex;

  align-items:center;
  justify-content:center;

  padding:1.5rem;

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transition:
    opacity .25s,
    visibility .25s;
}

.lightbox.open{
  opacity:1;

  visibility:visible;

  pointer-events:auto;
}

.lightbox__img{
  max-width:min(96vw,1400px);

  max-height:85vh;

  object-fit:contain;

  border-radius:0;

  box-shadow:
    0 20px 70px rgba(0,0,0,.55);
}

.lightbox__caption{
  position:absolute;

  bottom:1.2rem;

  left:50%;

  transform:translateX(-50%);

  font-family:var(--f-mono);

  font-size:.65rem;

  letter-spacing:.11em;

  text-transform:uppercase;

  color:rgba(240,236,226,.65);

  text-align:center;

  max-width:90vw;
}

.lightbox__close{
  position:absolute;

  top:1rem;
  right:1rem;

  width:2.7rem;
  height:2.7rem;

  border:1px solid var(--ligne-claire);

  background:#171612;

  color:var(--or);

  font-size:1.4rem;

  line-height:1;

  cursor:pointer;

  border-radius:0;

  z-index:510;

  display:flex;

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

.lightbox__close:hover{
  background:#24221C;
}

.lightbox__prev,
.lightbox__next{
  position:absolute;

  top:50%;

  transform:translateY(-50%);

  width:3rem;
  height:3rem;

  border:1px solid var(--ligne-claire);

  background:#171612;

  color:var(--or);

  font-size:1.3rem;

  cursor:pointer;

  border-radius:0;

  z-index:510;
}

.lightbox__prev{
  left:1rem;
}

.lightbox__next{
  right:1rem;
}

.lightbox__prev:hover,
.lightbox__next:hover{
  background:#24221C;
}

.galerie__item{
  cursor:zoom-in;
}

body.lightbox-open{
  overflow:hidden;
}


/* =========================================================
   MOBILE — polices FORTEMENT agrandies
   ========================================================= */

@media(max-width:800px){

  body{
    font-size:1.18rem !important;
    line-height:1.75 !important;
  }

  .barre{
    z-index:300;
    padding:1rem var(--marge);
    font-size:.85rem !important;
  }

  .barre__marque{
    font-size:1.5rem !important;
  }

  .nav-toggle{
    display:flex !important;
    align-items:center;
    justify-content:flex-start;
    margin-left:auto;
    z-index:320;
    position:relative;
  }

  .barre__liens{
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    position:fixed !important;
    top:0; left:0; right:0; bottom:0;
    width:100vw;
    height:100vh;
    height:100dvh;
    margin:0 !important;
    padding:5.5rem 1.5rem 2rem;
    gap:0 !important;
    background:#11100D !important;
    overflow-x:hidden !important;
    overflow-y:auto;
    z-index:310;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition: opacity .2s ease, visibility .2s ease;
  }

  .barre__liens.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .barre__liens a{
    display:block !important;
    width:100%;
    text-align:left;
    padding:1.5rem .6rem !important;
    font-size:1.25rem !important;
    letter-spacing:.08em;
    text-transform:uppercase;
    opacity:1 !important;
    color:#F0ECE2 !important;
    border-bottom:1px solid var(--ligne);
    white-space:normal;
  }

  .barre__liens a:hover,
  .barre__liens a.active{
    color:var(--or) !important;
    background:transparent;
  }

  /* IMAGE MOBILE */
  .hero__image-wrap{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:100% !important;
    aspect-ratio:16/10;
    max-height:48vh;
    margin:0 auto 2rem;
    overflow:hidden;
    order:0;
  }

  .hero__image{
    opacity:1 !important;
    mix-blend-mode:normal !important;
    filter: saturate(.78) brightness(.88) !important;
    object-position:center;
  }

  .hero{
    display:flex;
    flex-direction:column;
    min-height:auto;
    padding: 1.2rem var(--marge) 3rem;
  }

  .hero__contenu{
    max-width:100%;
    position:relative;
    z-index:3;
    order:1;
  }

  .hero__grid{
    display:none;
  }

  .hero__persan{
    font-size:1.75rem !important;
  }

  .hero h1{
    white-space:normal;
    font-size:clamp(4.2rem,18vw,7rem) !important;
    line-height:.9;
    letter-spacing:-.045em;
  }

  .hero__sous{
    font-size:1.28rem !important;
    line-height:1.7;
    margin-bottom:1.8rem;
  }

  .hero__meta{
    gap:.6rem 1.4rem;
    font-size:.85rem !important;
    padding-top:1.1rem;
    letter-spacing:.1em;
  }

  .eyebrow{
    font-size:.9rem !important;
    letter-spacing:.12em;
    margin-bottom:1.3rem;
  }

  h2{
    font-size:clamp(2.6rem,11vw,4rem) !important;
    max-width:18ch;
  }

  h3{
    font-size:1.6rem !important;
  }

  .chapeau{
    font-size:1.28rem !important;
  }

  p{
    font-size:1.15rem !important;
  }

  .fiche__val{
    font-size:clamp(1.9rem,6vw,2.4rem) !important;
  }

  .fiche__lab{
    font-size:.85rem !important;
  }

  .legende__btn{
    font-size:1.1rem !important;
    padding:1.5rem 1.3rem;
  }

  .legende__num{
    font-size:.85rem !important;
  }

  .legende__txt{
    font-size:1.05rem !important;
  }

  .mecanismes .sym{
    font-size:.9rem !important;
  }

  .mecanismes p{
    font-size:1.15rem !important;
  }

  .carte__lieu{
    font-size:.85rem !important;
  }

  .carte__nom{
    font-size:1.7rem !important;
  }

  .carte p{
    font-size:1.1rem !important;
  }

  .scene__bascule button{
    font-size:.85rem !important;
    padding:1.2rem;
  }

  .btn{
    font-size:.9rem !important;
    padding:1.1rem 2.2rem;
  }

  .form-group label{
    font-size:.85rem !important;
  }

  .form-group input,
  .form-group textarea{
    font-size:1.15rem !important;
    padding:1.15rem;
  }

  .pied__meta{
    font-size:.85rem !important;
  }

  .duo{
    grid-template-columns:1fr !important;
    gap:2rem;
  }

  .page-content{
    padding-top:2rem !important;
    padding-left:var(--marge);
    padding-right:var(--marge);
  }

  .mecanismes li{
    grid-template-columns:1fr;
    gap:.4rem;
  }

  .legende{
    grid-template-columns:1fr;
  }

  .fiche{
    padding-top:2rem;
  }

  .galerie__item--large,
  .galerie__item--wide{
    grid-column:span 2;
    grid-row:span 1;
    aspect-ratio:16/10;
    min-height:0;
  }

  .galerie__item figcaption{
    opacity:1;
    font-size:.8rem !important;
    padding:1rem;
  }
}


/* =========================================================
   TRES PETITS ECRANS
   ========================================================= */

@media(max-width:520px){

  body{
    font-size:1.2rem !important;
  }

  .barre{
    gap:1rem;
    font-size:.9rem !important;
  }

  .barre__marque{
    font-size:1.45rem !important;
  }

  .barre__liens a{
    font-size:1.3rem !important;
    padding:1.55rem .6rem !important;
  }

  .bloc{
    padding-top:4rem;
    padding-bottom:4rem;
  }

  h2{
    font-size:clamp(2.5rem,12vw,3.6rem) !important;
  }

  .hero{
    padding-bottom:2.5rem;
  }

  .hero__persan{
    font-size:1.65rem !important;
  }

  .hero h1{
    font-size:clamp(3.8rem,19vw,6rem) !important;
  }

  .hero__sous{
    font-size:1.22rem !important;
  }

  .hero__meta{
    font-size:.82rem !important;
  }

  .eyebrow{
    font-size:.88rem !important;
  }

  .fiche__grille{
    grid-template-columns:1fr 1fr;
  }

  .fiche__item{
    padding:1.3rem 1rem;
  }

  .fiche__val{
    font-size:1.7rem !important;
  }

  .fiche__lab{
    font-size:.82rem !important;
  }

  .cartes{
    grid-template-columns:1fr;
  }

  .carte__nom{
    font-size:1.65rem !important;
  }

  .carte p{
    font-size:1.12rem !important;
  }

  .galerie{
    grid-template-columns:1fr 1fr;
  }

  .lightbox{
    padding:.5rem;
  }

  .lightbox__prev{
    left:.35rem;
  }

  .lightbox__next{
    right:.35rem;
  }
}


/* =========================================================
   PRINT
   ========================================================= */

@media print{

  body{
    background:#fff;
    color:#000;
  }

  .barre,
  .scene__bascule,
  .hero__voile,
  .hero__grid{
    display:none;
  }

  .hero{
    min-height:auto;
    padding:2rem;
    background:#fff;
  }

  .hero h1,
  .hero__persan{
    color:#000;
  }

  .hero__sous,
  .hero__meta{
    color:#333;
  }

  .bloc,
  .fiche,
  .coupe,
  .nuit-sect,
  .ailleurs{
    background:#fff !important;
    color:#000;
  }

  h2,
  h3,
  p,
  .chapeau,
  .legende__txt,
  .carte p{
    color:#000 !important;
  }

  .reveal{
    opacity:1 !important;
    transform:none !important;
  }
}


/* =========================================================
   BODY NAV OPEN
   ========================================================= */

body.nav-open{
  overflow:hidden;
}