/*@font-face {
    font-family: "Space Grotesk";
    src: url(SpaceGrotesk-Regular.woff2) format("woff2");
}*/

body{
    font-family: "helvetica-neue-lt-pro", sans-serif;
    }

body{
    background: white;
    font-family: sans-serif;
    line-height: 1.2;
    font-family: "helvetica-neue-lt-pro", sans-serif;
    font-weight: 400;
    font-optical-sizing: auto;
}

h1{
    margin: 0;
}

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

.nav{
    padding-top: 40px;
}

.nav a img {
    transition: 0.2s ease; 
}

.nav a:hover img {
    filter: brightness(0.1);
    /*filter: hue-rotate(45deg);*/
}

p{
    max-width: 600px;
}

a{
    text-decoration: underline;
    color: currentColor;
}

.nav .label {
    display: none;
}

.cursor {
    position: fixed;
    pointer-events: none;
    padding: 6px 10px;
    background: black;
    color: white;
    font-size: 14px;
    font-weight: 200;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 999;
}

.footer{
    font-size: 8px;
    font-weight: 200;
    text-align: center;
    justify-items: center;
    padding-top: 20px;
}

/*.nav a {
    position: relative;
    display: inline-block;
}

.nav a .label {
    position: absolute;
    bottom: 100px; 
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    color: white;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease;
}

.nav a:hover .label {
    opacity: 1;
}*/

/* header */

.header{
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000; 
    background: rgb(190, 189, 189); 
    padding: 3px;


}

.header a:not(.no-block){
    text-decoration: none;
    color: currentColor;
    background: white;
    padding-bottom: 1px;
    display: inline-block;
    padding: 8px 12px;   
    background: white;   
    border-radius: 20px;
}

.logo-rotate {
    transition: transform 2s ease;
    display: inline-block; /* important pour éviter les bugs */
}

.logo-rotate:hover {
    transform: rotate(380deg);
}


.nav{
    display: grid;
    grid-template-columns: repeat(auto-fill, 400px);
    justify-content: center;
    gap: 20px;
}

.nav a{
    text-decoration: none;
    color: currentColor;
    background: white;
}

.nav a span{
    display: block;
    padding: 1px;
    font-weight: 200;
}



/* projet */

.project{
    background:rgb(255, 255, 255);
}


.project p{
    font-size: 18px;
}

.header a:not(.no-block){
    text-decoration: none;
    color: currentColor;
    background: white;
    padding-bottom: 1px;
    display: inline-block;
    padding: 8px 12px;   
    background: white;   
    border-radius: 20px;
}

/*apocalyspe*/

.apocalypse-project{
    background: #000;
}

.project-container {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    max-width: 1490px;
    margin: 20px auto 60px auto; 
    padding-left: 20px;
}

.teexte {
    position: sticky;
    top: 20px;
    align-self: start;
    margin-left: 0px;
    padding-left: 0px;
    text-decoration: none;
    color: whitesmoke;
}

.teexte h2{
    font-weight: 400;
}


.navB {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.navB .item span {
    display: block;
    padding: 1px;
    font-weight: 200;
    color: whitesmoke;
}

.navB img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.navB .big {
    grid-column: 1;
    grid-row: span 2;
}

.navB .small {
    grid-column: 2;
}

.navB .small2{
    grid-column: 2;
}

@media (max-width: 1000px) {
    .project-container {
        grid-template-columns: 1fr; /* une seule colonne */
        gap: 20px;
        padding-left: 10px;
    }

    .teexte {
        position: static; /* plus de sticky en mobile */
        margin: 0;
        padding: 0;
    }

    .navB {
        grid-template-columns: 1fr; /* les images passent sous forme de liste */
        gap: 15px;
    }

    .navB .big,
    .navB .small,
    .navB .small2 {
        grid-column: auto;
        grid-row: auto;
    }

    .navB img{
        width: 100%;
        height: auto;
    }
}


/*water*/

.water-project{
    background: black;
}

.project-containeer {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    max-width: 1490px;
    margin: 20px auto 60px auto; 
    padding-left: 20px;
}

.teeexte {
    position: sticky;
    top: 20px;
    align-self: start;
    margin-left: 0px;
    padding-left: 0px;
    text-decoration: none;
    color: whitesmoke;
}

.teeexte h2{
    font-weight: 400;
}

.teeexte a{
    font-weight: 200;
}

.navD {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.navD .item span {
    display: block;
    padding: 1px;
    font-weight: 200;
    color: whitesmoke;
}

.navD img,
.navD video {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.navD .big {
    grid-column: 1;
    grid-row: span 2;
}

.navD .small {
    grid-column: 2;
}

.navD .small2{
    grid-column: 2;
}

@media (max-width: 1000px) {
    .project-containeer {
        grid-template-columns: 1fr; /* une seule colonne */
        gap: 20px;
        padding-left: 10px;
    }

    .teeexte {
        position: static; /* plus de sticky en mobile */
        margin: 0;
        padding: 0;
    }

    .navD {
        grid-template-columns: 1fr; /* les images passent sous forme de liste */
        gap: 15px;
    }

    .navD .big,
    .navD .small,
    .navD .small2 {
        grid-column: auto;
        grid-row: auto;
    }

    .navD img,
    .navD video {
        width: 100%;
        height: auto;
    }
}

/*la derniere chance*/

.project-contaiiner {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    max-width: 1490px;
    margin: 20px auto 60px auto; 
    padding-left: 20px;
}

.teextee {
    position: sticky;
    top: 20px;
    align-self: start;
    margin-left: 0px;
    padding-left: 0px;
    text-decoration: none;
}

.teextee h2{
    font-weight: 400;
}


.navC {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.navC .item span {
    display: block;
    padding: 1px;
    font-weight: 200;
}

.navC img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.navC .small3{
    grid-column: span 2;
    grid-row: span 2;
}

.navC .big {
    grid-column: 1;
}

.navC .small {
    grid-column: 2;
}

.navC .small2{
    grid-column: 1;
}


@media (max-width: 1000px) {
    .project-contaiiner {
        grid-template-columns: 1fr; /* une seule colonne */
        gap: 20px;
        padding-left: 10px;
    }

    .teextee {
        position: static; /* plus de sticky en mobile */
        margin: 0;
        padding: 0;
    }

    .navB {
        grid-template-columns: 1fr; /* les images passent sous forme de liste */
        gap: 15px;
    }

    .navB .big,
    .navB .small,
    .navB .small2 {
        grid-column: auto;
        grid-row: auto;
    }

    .navB img{
        width: 100%;
        height: auto;
    }
}




/**banlieues*/

.navE {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    grid-auto-flow: row dense;
}

.navE .item span {
    display: block;
    padding: 1px;
    font-weight: 200;
}

.navE img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.navE .small3{
    grid-column: 1;
    grid-row: span 2;
}

.navE .big {
    grid-column: 2;
}

.navE .small {
    grid-column: 2;
}

.navE .small2{
    grid-column: 1;
    grid-row: span 2;
}

.navE .small5{
    grid-column: 2;
}


@media (max-width: 1000px) {
    .project-contaiiner {
        grid-template-columns: 1fr; /* une seule colonne */
        gap: 20px;
        padding-left: 10px;
    }

    .teextee {
        position: static; /* plus de sticky en mobile */
        margin: 0;
        padding: 0;
    }

    .navE {
        grid-template-columns: 1fr; /* les images passent sous forme de liste */
        gap: 15px;
    }

    .navE .big,
    .navE .small,
    .navE .small2 {
        grid-column: auto;
        grid-row: auto;
    }

    .navE img{
        width: 100%;
        height: auto;
    }
}


/*no more reality*/

.teextee h3{
    font-size: 12px;
    font-weight: 200;
}

.navV{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 20px;
    align-items: stretch;
}

.navV .big{
  grid-column: 1 / span 4;
  grid-row: 1 / span 4;
  align-self: stretch;
}

.navV .small{
  grid-column: 5;
}

.navV .small:nth-of-type(1){ grid-row: 1; }
.navV .small:nth-of-type(2){ grid-row: 2; }
.navV .small:nth-of-type(3){ grid-row: 3; }
.navV .small:nth-of-type(4){ grid-row: 4; }

/* images : qu'elles remplissent leur case */
.navV img{ width:100%; height:100%; object-fit:cover; display:block; }




























/*.navB {
    display: grid;
    grid-template-columns: repeat(auto-fill, 500px);
    justify-content: center;
    gap: 20px;
}

.navB b span{
    display: block;
    padding: 1px;
    font-weight: 200;
}*/

/*.navB {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    justify-content: center;
    max-width: 1100px;
    margin: auto;
}

.navB .item span {
    display: block;
    padding: 1px;
    font-weight: 200;
}

.navB img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.navB .big {
    grid-column: 1;
    grid-row: span 2;
}

.navB .small {
    grid-column: 2;
}
.navB .small2 {
    grid-column: 2;
}*/

/*contact*/
/*.assiette{
    background: rgb(255, 255, 255);
    min-height: 95vh;
}

.assiette p{
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}

.assiette a{
    text-decoration: none;
    color: currentColor;  
}

.grid-center{
    display: grid;
    place-items: center;
    height:calc(100vh - 150px);
}*/



.contact-panel {
    position: fixed;
    top: 90px;
    right: 10px;
    background: yellow;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    width: 220px;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: 0.25s ease;
    z-index: 10000;
}

.contact-panel.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.contact-title {
    font-weight: 400;
    margin-bottom: 10px;
    font-size: 18px;
}

.contact-panel a {
    color: black;
}




/*a propos*/
.apropos-panel {
    position: fixed;
    top: 230px;
    right: 10px;
    width: 320px;
    background: rgb(231, 231, 231);
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: 0.25s ease;
    z-index: 10000;
}

.apropos-panel.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.apropos-content h2 {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 400;
}

.apropos-content p {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 15px;
}

.apropos-img {
    width: 100%;
    border-radius: 0px;
    margin-bottom: 15px;
    display: block;
}

.apropos-footer {
    display: flex;
    justify-content: space-between;
    padding-top: 2px;
    border-top: 1px solid #ddd;
}

.footer-link {
    font-size: 14px;
    text-decoration: underline;
    color: black;
    font-weight: 500;
}


.apropos-img-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* évite débordements si l'image change de taille */
  border-radius: 0; /* adapte si tu veux des coins ronds */
}

.apropos-img-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity .25s ease, transform .35s ease;
  backface-visibility: hidden;
}

.img-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1); /* léger zoom pour l'effet */
  pointer-events: none; /* laisse la souris au wrapper */
}

.apropos-img-wrapper:hover .img-hover {
  opacity: 1;
  transform: scale(1);
}

.apropos-img-wrapper:hover .img-normal {
  opacity: 0;
  transform: scale(0.98);
}



/*.assiette header a:not(.no-block){
    text-decoration: none;
    color: currentColor;
    background: white;
    padding-bottom: 1px;
    display: inline-block;
    padding: 8px 12px;   
    background: yellow;   
    border-radius: 20px;
}*/






















@property --scroll {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@property --scroll-delayed {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@property --scroll-direction {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}


@keyframes setScrollProps {
	to {
		--scroll: 1000;
		--scroll-delayed: 1000;
	}
}

:root {
	animation: setScrollProps linear both;
	animation-timeline: scroll(root);
   --header-effect-duration: .5s;
}

body {
   transition: --scroll-delayed calc(var(--header-effect-duration) + .1s);
   /* the transition of the header should last a 
    * bit less than this transition otherwise, for 
    * extremely small scroll movements, the header 
    * won't be fully revealed or hidden (that's 
    * the reason for a + .1 sec. here)
    */
   
   --scroll-velocity: calc(var(--scroll) - var(--scroll-delayed));
   --scroll-speed: max(var(--scroll-velocity), -1 * var(--scroll-velocity));
   --scroll-direction: calc(var(--scroll-velocity) / var(--scroll-speed));
}

header {
   position: fixed;
   z-index: 1;
   inset: 0 0 auto;
   will-change: transform;
   transition: transform var(--header-effect-duration) 0s;
   transform: translateY(var(--translate));
   
   @container style(--scroll-direction: 0) {
      /* Scroll is idle, so we keep the current header 
       * position by setting an extremely high 
       * transition delay. ~2 billion seconds should 
       * be enough even for the most patient user ;) 
       */
      transition-delay: calc(infinity * 1s);  
   }

   
   /*
   * Note: you could avoid the subsequent style 
   * queries if you set the --translate property 
   * like so:
   * 
   *   @container style(not (--scroll-direction: 0)) {
   *     --translate: calc((var(--scroll-direction) + 1) * -50%);
   *   }
   *
   * but it would only work for this specific use 
   * case and values, so I keep them for clarity.
   */

   @container style(--scroll-direction: -1) {
      /* Scrolling up, so we must reveal the header */
      --translate: 0;
   }

   @container style(--scroll-direction: 1) { 
      /* Scrolling down, so we must hide the header 
       *
       * Assign a lower value if you want to also hide
       * the box-shadow below the header
       * (e.g. --translate: calc(-100% - 15px))
       */
      --translate: -100%;
   }   
}

/* end of relevant code */














/* general aesthetics */


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

/*body {
   font: 1.25rem/1.6 "system-ui", arial;
   color: #36394c;
   
   counter-reset:
		scroll calc(var(--scroll))
		scroll-delayed calc(var(--scroll-delayed))
		scroll-direction calc(var(--scroll-direction));
   
   &::after {
      position: fixed;
      inset: auto auto .5rem .5rem;
      padding: 1rem;
      background: #fff8;
      border-radius: .5rem;
      font: 1rem/1.3 monospace;
      color: #888;
      white-space: pre;   
      content: "--scroll: " counter(scroll) 
               "\A--scroll-delayed: " counter(scroll-delayed) 
               "\A--scroll-direction: " counter(scroll-direction) 
   }   
}*/

/*header {
   background: #fffc;
   /*box-shadow: 0 2px 15px -2px #778;*/
      
   /*div {
      block-size: 6rem;
      display: flex;
      align-items: center;
      inline-size: 90%;
      margin: 0 auto;
   }
}

main {
   min-block-size: 500dvb;
   padding-top: calc(5rem + 10vw);
   background: linear-gradient(135deg, 
      rgb(198 221 227), 
      rgb(248 222 209)
   ) fixed;
   
   p {
      position: fixed;
      inset: auto 0;
      padding-inline: 5%;
   }
   
   code {
      font: 86% monospace;
   }
   
   :any-link, code { color: #616f80; }
   
}*/