@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif&display=swap');

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

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

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

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html, body {
    overflow-x: hidden;
    font-family: 'Instrument Serif', serif;
    margin-top: 60px;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 30%, rgba(228, 240, 211, 1) 62%, rgba(226, 219, 253, 1) 100%);
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Instrument Serif', serif;
}

/* END RESET */
/*---------------------------------------*/
/* SECTION */

section {
    margin-left: 10%;
    margin-right: 10%;
    max-width: 1600px;
    margin-bottom: 120px;
}

/* END SECTION */
/*---------------------------------------*/
/* GALLERY */

.f-gallery {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: left;
    justify-content: left;
}

.f-gallery-line {
    display: flex;
    flex-direction: row;
    object-fit: cover;
    gap: 8px;
    height: 22vh;
}

.f-gallery-line img {
    height: 100%;
    object-fit: cover;
    transition: 
    transform 0.3s cubic-bezier(0.861, -0.003, 0.043, 1.003), 
    filter 0.3s cubic-bezier(0.861, -0.003, 0.043, 1.003);
}

.f-gallery-line img:hover {
    filter: brightness(1.2);
    cursor: pointer;
}

/* END GALLERY */
/*---------------------------------------*/
/* HEADER */

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(240, 240, 240, 0.2);
    color: #414141;
    height: 48px;
    display: flex;
    margin-bottom: 45px;
    border-bottom: 1px solid rgba(40, 40, 40, 0.1);
    text-decoration: none;
    font-family: 'Instrument Serif', serif;
    font-size: 15px;
}

.header-menu-reponsive {
  display: none;
}



/*logo*/

.logo {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 64px;  
  height: 24px;
  border: 1px solid #f3f3f386;
  border-radius: 100%;
  cursor: pointer;
}

.logo a {
  text-decoration: none;
  color: #414141;
  font-family: 'Instrument Serif', serif;
  font-size: 18px;
  transform:matrix(1.00,0.00,-0.10,0.80,0,0);
  -ms-transform:matrix(1.00,0.00,-0.10,0.80,0,0);
  -webkit-transform:matrix(1.00,0.00,-0.10,0.80,0,0);
}

.logo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #ffffffaf;
  background-color: #ffffffaf;
  border-radius: 100%;
  filter: blur(4px);
  z-index: -1;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.logo:hover::before {
  opacity: 1;
  transform: scale(1);
}

.header-menu {
    display: flex;
    gap: 8px;
    align-items: center;
}

.header-card a {
  font-size: 16px;
  display: flex;
  align-items: bottom;
  gap: 2px;
  text-decoration: none;
  color: #414141;
  z-index: 2;
}

.disable {
    pointer-events: none; /* Bloque le clic, le hover, et les effets au survol */
    cursor: default;       /* Remet le curseur normal au lieu de la main */
    opacity: 0.5;          /* Optionnel : pour l'effet visuel "indisponible" */
    filter: grayscale(100%); /* Optionnel : si tu veux enlever la couleur */
}

.header-card {
  position: relative;
  cursor: pointer;
  padding: 8px 20px;
  border-radius: 100%;
}

.header-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #f3f3f386;
  background-color: #ffffffaf;
  border-radius: 100%;
  filter: blur(4px);
  z-index: 1;

  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.header-card:hover::before{
  opacity: 1;
  transform: scale(1);
}

.header-content {
  position: inherit;
  z-index: 2;
}

.header-content img {
  width: 16px;
  height: 16px;
  opacity: 0.8;
}

/* END HEADER */
/*---------------------------------------*/
/* MODALE */

.hidenfocus {
  width: 0px;
  height: 0px;
  border: #414141;
}

.hidenfocus:focus-visible {
  outline: 0px solid #fff;
}

dialog:not([open]) {
  display: none !important;
}

/* Style fleche */

.btn-nav img {
  position: relative;
  z-index: 2;
  display: block;
  opacity: 0.6;
}

.btn-nav-img-left {
  padding-right: 4px;
}

.btn-nav-img-right {
  padding-left: 4px;
}

.btn-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  border: none;
  padding: 45px 24px 45px 24px;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
}

.btn-nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%; 
  background: #ffffff; 
  z-index: -1; 
  filter: blur(10px);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.btn-nav:hover::before {
  opacity: 1;
  transform: scale(1);
}

.btn-gauche { 
  left: 24px; 
}
.btn-droite { 
  right: 24px; 
}

dialog:not([open]) .btn-nav {
  display: none;
}

dialog:not([open]) #closeModal {
  display: none;
}

.modal {
  border: none;
  padding: 0;
  width: 100dvw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100vh;
  
  background: linear-gradient(180deg, rgb(233, 233, 233) 30%, rgba(228, 240, 211, 1) 70%, rgba(226, 219, 253, 1) 100%);
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  overflow: hidden; 
}

/* clignotement */
.modal::backdrop {
  background: #ffffff;
}

.img-grande {
  max-width: 90dvw;
  max-height: 80dvh; 
  object-fit: contain;
  display: block;
}

/* La légende */
.legende {
  color: #414141;
  text-align: center;
  margin-top: 16px;
  font-family: 'Instrument Serif', serif;
  font-size: 20px;
}

/* Le bouton de fermeture en haut à droite de l'écran */
.btn-fermer {
  position: fixed;
  top: 34px;
  right: 30px;
  width: 64px;
  height: 42px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 10;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-fermer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff; 
  border-radius: 100%;        
  filter: blur(10px);          
  z-index: -1;                

  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.4s ease, transform 0.4s ease; 
}

.btn-fermer:hover::before {
  opacity: 1;
  transform: scale(1);
}

.btn-fermer img {
  height: auto;
  position: relative;
  z-index: 2;
  display: block;
  opacity: 0.6;
}

.btn-fermer:focus {
    outline: none;
}

/* navigation au clavier */
.btn-fermer:focus-visible {
    outline: 2px solid #de8bf3; 
}


/* END MODAL */



/*---- END DESKTOP ----*/



/*---------------------------------------------------------------------------------------------------------*/



/*---- RESPONSIVE ----*/

/* 1. Ecrans Mobiles : max-width 768px (De 0px à 768px) */
@media screen and (max-width: 768px) {

/* Logo */

.logo {
  position: relative;
  display: inline-flex; 
  justify-content: center;
  align-items: center;
  width: 64px;  
  height: 32px;
  border: 1px solid #f3f3f386;
  border-radius: 100%;        
  cursor: pointer;
  z-index: 1000;

}

.logo a {
  text-decoration: none;
  color: #414141;
  font-family: 'Instrument Serif', serif;
  font-size: 17px;
}

.logo::before {
  opacity: 1;
  transform: scale(1);
}

.header-menu-reponsive {
  width: 64px;
  height: 34px;
  border: 1px solid #f3f3f300;
  background-color: #f3f3f300; 
  border-radius: 100%;
  display: flex;
  z-index: 1000; 
  position: relative; 
  align-items: center;
  justify-content: right;
}

.header-menu-reponsive img {
  opacity: 0.6;
  width: 32px;
  height: auto;
}

.header-menu-reponsive .close-icon {
  width: 32px;
  height: auto;
}

.header-menu-reponsive .close-icon {
    display: none;
}

/* Modal Mobile Responsive */

.btn-fermer {
  border: solid 0px;
  border-radius: 100%;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
}

.img-grande {
  max-width: 90dvw;
  max-height: 78dvh; 
  object-fit: contain;
  display: block;
}

.btn-fermer img {
  width: 32px;
  opacity: 0.6;
}

.btn-fermer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: solid 1px #fff;
  background-color: #ffffff; 
  border-radius: 100%;       
  filter: blur(10px);          
  z-index: -1;                
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s ease, transform 0.4s ease;
}


.btn-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  top: 94dvh;
  border: solid 1px #ffffff;
  width: 64px;
  height: 42px;
  padding: 0px 0px
}

.btn-nav img {
  width: 24px;
  height: auto;
  opacity: 0.8;
}

.btn-nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: solid 1px #ffffff;
  border-radius: 50%; 
  background: #ffffff; 
  z-index: -1; 
  filter: blur(10px);
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.btn-gauche { 
  left: 16px; 
}

.btn-droite { 
  right: 16px; 
}

/* --- OPEN MENU HEADER MOBILE --- */

.header-menu-reponsive.active .burger-icon {
    display: none;
}

.header-menu-reponsive.active .close-icon {
    display: block;
}

/* Menu Full screen */
  .header-menu {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90dvh;
    background: linear-gradient(180deg, rgba(227, 227, 227, 1) 0%, rgba(242, 242, 242, 1) 59%, rgba(228, 240, 211, 0.9) 92%, rgba(226, 219, 253, 0.9) 100%);
    z-index: 999;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    border: 1px solid rgba(40, 40, 40, 0.1);
    border-radius: 0px 0px 34px 34px;
  }

  .header-card  {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .header-card::before {
    opacity: 1;
    border: 1px solid #f3f3f300;
    background-color: #ffffff00;
  }

   .header-content a {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .header-content a {
    font-size: 32px;
  }

   .header-content a img {
    width: 45px;
    height: auto;
  }

  .header-menu.active {
    display: flex;
  }
  
  header {
    margin-bottom: 24px;
    height: 56px;
  }

  .header-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 12px;
    margin-right: 12px;
  }

  .header-menu{
    display: none;
  }

  body {
    margin-top: 0px;
  }

  section {
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 4px;
    margin-bottom: 120px;
  }

  .f-gallery-line {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    height: 100%;
  }

  .f-gallery-line img {
    aspect-ratio: 2/3; 
    width: 100%;
    object-fit: cover;
  }
}

/* 2. Écrans Tablettes : min-width 768px (À partir de 768px) */
@media screen and (min-width: 768px) {
  header {
    margin-bottom: 24px;
  }

  .header-wrap {
    margin-left: 5%;
    margin-right: 5%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
/*
  .header-menu {
    display: none;
  }
*/
  .header-menu-reponsive {
    display: none;
  }

  body {
    margin-top: 0px;
  }

  section {
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 120px;
  }

  .f-gallery-line {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    height: 100%;
  }

  .f-gallery-line img {
    aspect-ratio: 3/2;
    width: 100%;
    height: 38dvh;
    object-fit: cover;
  }

  .img-grande {
    max-width: 70dvw;
  }
}

/* 3. Grands Écrans / Ordinateurs : min-width 1024px (À partir de 1024px) */
/* Placé en dernier pour écraser le GRID des tablettes */
@media screen and (min-width: 1024px) {

  body {
    margin-top: 34px;
  }

  .header-menu{
    display: flex;
  }

  .header-wrap {
  margin-left: 10%;
  margin-right: 10%;
  max-width: 1600px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

  .header-menu-reponsive {
    display: none;
  }

    section {
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 120px;
  }

  .f-gallery {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: flex-start; /* 'left' n'est pas une valeur flex standard, flex-start ou normal est mieux */
    justify-content: flex-start;
  }

  .f-gallery-line {
    display: flex;
    flex-direction: row;
    object-fit: cover;
    gap: 8px;
    height: 22vh;
  }

  .f-gallery-line img {
    aspect-ratio: initial;
    height: 100%;
    width: auto; /* Permet à l'image de prendre sa largeur naturelle basée sur les 22vh de hauteur */
    object-fit: cover;
    transition: 
      transform 0.3s cubic-bezier(0.861, -0.003, 0.043, 1.003), 
      filter 0.3s cubic-bezier(0.861, -0.003, 0.043, 1.003);
  }

  .f-gallery-line img:hover {
    filter: brightness(1.2);
    cursor: pointer;
  }
}