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

/* CSS Reset (simple) */
/* Reset margins, paddings, box-sizing and basic elements */
*, *::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;
}

/* Make images responsive */
img, svg, video {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Improve default font rendering */
html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


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

/* Fallbacks for headings and other elements if needed */
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;
}

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

/*logo*/

.logo {
  position: relative;
  display: inline-flex; /* Permet au bloc de s'adapter à la taille des lettres */
  justify-content: center;
  align-items: center;
  /* Ajuste ces dimensions selon la taille que tu veux donner au rond de fond */
  width: 64px;  
  height: 24px;
  border: 1px solid #f3f3f386;
  border-radius: 100%;        /* Même arrondi parfait */
  cursor: pointer;
  
  /* Le style de ton texte (à modifier selon tes envies) */
}

.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; /* Même blanc semi-transparent */
  border-radius: 100%;        /* Même arrondi parfait */
  filter: blur(4px);          /* Même intensité de flou */
  z-index: -1;                /* Reste bien derrière les lettres */

  /* États initiaux (caché et légèrement plus petit) */
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.4s ease, transform 0.4s ease; /* Même transition */
}

.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 */


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

/* Style commun pour les flèches */

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

.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; /* <--- On met le bouton invisible par défaut */
  cursor: pointer;
  border-radius: 50%;
}

.btn-nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%; /* Pour garder la forme ronde */
  background: #ffffff; /* Ta couleur initiale blanche semi-transparente */
  z-index: -1; /* Se place DERRIÈRE l'icône de la flèche */
  filter: blur(10px);
  
  /* États initiaux (caché / net / normal) */
  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);
}

/* Positionnement individuel */
.btn-gauche { left: 24px; }
.btn-droite { right: 24px; }

/* Sécurité : On cache les flèches si la modale est fermée */
dialog:not([open]) .btn-nav {
  display: none;
}

/* Cache le bouton de fermeture si la modale n'est pas ouverte */
dialog:not([open]) #closeModal {
  display: none;
}

.modal {
  border: none;
  padding: 0;
  
  /* Force la modale à prendre TOUT l'écran */
  width: 100vw;
  height: 100vh;
  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%);
  
  /* Flexbox pour centrer parfaitement l'image et la légende verticalement et horizontalement */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  /* Cache tout scroll potentiel dans la modale */
  overflow: hidden; 
}

/* Gère l'arrière-plan natif du <dialog> pour qu'il soit aussi blanc (évite les bugs de clignotement) */
.modal::backdrop {
  background: #ffffff;
}

/* L'image en grand */
.img-grande {
  /* L'image s'adapte à l'écran sans JAMAIS dépasser ou créer de scroll */
  max-width: 90vw;
  max-height: 80vh; 
  object-fit: contain; /* Garde les proportions de l'image intactes */
  display: block;
}

/* La légende sous l'image */
.legende {
  color: #414141; /* Changé en sombre pour être lisible sur le fond blanc */
  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;
  
  /* Flexbox pour centrer l'image de la croix */
  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; /* Même couleur blanche semi-transparente */
  border-radius: 100%;        /* Même arrondi parfait */
  filter: blur(10px);          /* Le flou est appliqué ici en permanence */
  z-index: -1;                /* Reste derrière la croix */

  /* États initiaux (caché et légèrement plus petit) */
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.4s ease, transform 0.4s ease; /* Même transition */
}

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

.btn-fermer img {
  width: 20px;
  height: auto;
  position: relative;
  z-index: 2;
  display: block;
}

/* On retire l'outline par défaut uniquement pour le focus "souris/script" */
.btn-fermer:focus {
    outline: none;
}

/* On réactive l'outline proprement uniquement pour la navigation au clavier */
.btn-fermer:focus-visible {
    outline: 2px solid #de8bf3; /* Tu peux mettre la couleur que tu veux */
}

/* END MODAL */



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



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



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

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

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

/* Logo */

.logo {
  position: relative;
  display: inline-flex; /* Permet au bloc de s'adapter à la taille des lettres */
  justify-content: center;
  align-items: center;
  /* Ajuste ces dimensions selon la taille que tu veux donner au rond de fond */
  width: 64px;  
  height: 24px;
  border: 1px solid #f3f3f386;
  border-radius: 100%;        /* Même arrondi parfait */
  cursor: pointer;
  
  /* Le style de ton texte (à modifier selon tes envies) */
}

.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: 24px;
  border: 1px solid #f3f3f300;
  background-color: #f3f3f300; /* Même blanc semi-transparent */
  border-radius: 100%;        /* Même arrondi parfait */
  display: flex;
  z-index: 1000; /* Reste bien au-dessus du menu plein écran */
  position: relative; /* Pour gérer le positionnement si besoin */
  align-items: center;
  justify-content: center;
}

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

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

/* Par défaut, on cache la croix */
.header-menu-reponsive .close-icon {
    display: none;
}

/* Modal Mobile Responsive */

.btn-fermer {
  border: solid 1px #fff;
  border-radius: 100%;
  top: 24px;
  right: 20px;
}

.btn-fermer img {
  width: 16px;
}

.btn-fermer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: solid 1px #fff;
  background-color: #ffffff; /* Même couleur blanche semi-transparente */
  border-radius: 100%;        /* Même arrondi parfait */
  filter: blur(10px);          /* Le flou est appliqué ici en permanence */
  z-index: -1;                /* Reste derrière la croix */

  /* États initiaux (caché et légèrement plus petit) */
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s ease, transform 0.4s ease; /* Même transition */
}


.btn-nav {
 top: 90vh;
 border: solid 1px #ffffff;
 padding: 34px 18px 34px 18px;
}

.btn-nav  img {
  width: 20px;
  height: auto;
}

.btn-nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: solid 1px #ffffff;
  border-radius: 50%; /* Pour garder la forme ronde */
  background: #ffffff; /* Ta couleur initiale blanche semi-transparente */
  z-index: -1; /* Se place DERRIÈRE l'icône de la flèche */
  filter: blur(10px);
  
  /* États initiaux (caché / net / normal) */
  filter: blur(10px);
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.btn-gauche { 
  left: 24px; 
}

.btn-droite { 
  right: 24px; 
}

/* --- QUAND LE MENU EST OUVERT --- */

/* 1. On cache l'icône burger */
.header-menu-reponsive.active .burger-icon {
    display: none;
}

/* 2. On affiche la croix */
.header-menu-reponsive.active .close-icon {
    display: block;
}

/* Ton menu plein écran */
  .header-menu {
      display: none; 
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: linear-gradient(180deg,rgba(247, 247, 247, 1) 80%, rgba(228, 240, 211, 1) 92%, rgba(226, 219, 253, 1) 100%);
      z-index: 999;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 30px;
  }

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

  .header-card::before {
    opacity: 1;
  }

   .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;
  }

  .header-wrap {
    margin-left: 3%;
    margin-right: 3%;
  }

  .header-menu{
    display: none;
  }

  body {
    margin-top: 0px;
  }

  section {
    margin-left: 3%;
    margin-right: 3%;
    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; /* Correction ici: '3/2 auto' n'est pas une syntaxe valide */
    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-menu {
    display: none;
  }

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

  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: 45vh;
    object-fit: cover;
  }
}

/* 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-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;
  }
}