/*--------- TYPOS ---------*/

@font-face {
  font-family: "Caladea";
  /* src: url("asset/font/Caladea/Caladea-Regular.woff2"); */
  src: url("asset/font/Caladea/Caladea-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Caladea";
  /* src: url("asset/font/Caladea/Caladea-Bold.woff2"); */
  src: url("asset/font/Caladea/Caladea-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Caladea";
  /* src: url("asset/font/Caladea/Caladea-Italic.woff2"); */
  src: url("asset/font/Caladea/Caladea-Italic.ttf");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Caladea";
  /* src: url("asset/font/Caladea/Caladea-BoldItalic.woff2"); */
  src: url("asset/font/Caladea/Caladea-BoldItalic.ttf");
  font-weight: 700;
  font-style: italic;
}

  
@font-face {
  font-family: "Wagon";
  /* src: url("asset/font/Wagon/Wagon-Bold.woff2"); */
  src: url("asset/font/Wagon/Wagon-Bold.otf");
  font-weight: 700;
  font-style: normal;
  /* unicode-range: U+0020-007F, U+00E9, U+00E8, U+00EA, U+00EB, 
  U+00E0, U+00E2, U+00E4, U+00F4, U+00F6, 
  U+00F9, U+00FB, U+00FC, U+00E7, U+00EE, U+00EF, 
  U+0153, U+0152, U+00E6, U+00C6; */
}

@font-face {
  font-family: "Wagon";
  /* src: url("asset/font/Wagon/Wagon-ExtraLight.woff2"); */
  src: url("asset/font/Wagon/Wagon-ExtraLight.otf");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "Wagon";
  /* src: url("asset/font/Wagon/Wagon-ExtraLightItalic.woff2"); */
  src: url("asset/font/Wagon/Wagon-ExtraLightItalic.otf");
  font-weight: 200;
  font-style: italic;
}




/*--------- TITRAGES ---------*/

body{
  cursor:default;
}

h1{
    font-family: "Wagon", sans-serif;
    font-weight: 700;
    margin:0;
    /* background-color: #161b27; */
    color: #274e12; /*#004b81*/
    font-size: 4.69vw; /*5em*/
    margin-left:5vw;
  }

#h1-1{
  margin-top:2vh;
}

h1.sous-titre{
  font-family: "Wagon", sans-serif;
  font-weight: 700;
    font-size: 2.34vw; /*2.5em*/
    /* font-weight: lighter; */
    margin-left:5vw;
}

a.sous-titre{
  color: #161b27;
  background-color: #d8b1ed;
  /* cursor: default; */
}

#stt1{
  margin-top:2.25vh;
}

h2{
  font-family: "Wagon", sans-serif;
  font-weight: 700;
    color: #d8b1ed;
    font-size: 1.87vw; /*2em*/
    margin: 5% 0;
    scroll-margin-top: 4.63vh; /*2.6em*/
}

h3{
  font-family: "Wagon", sans-serif;
  font-weight: 200;
    /* font-weight: lighter; */
    color: #274e12;
    font-size: 1.73vw; /*1.85em*/
    margin: 5% 0;
    scroll-margin-top: 4.81vh; /*2.7em*/
}

h4{
  font-family: "Wagon", sans-serif;
  font-weight: 200;
  font-style: italic;
    /* font-weight: lighter; */
    color: #004b81;
    font-size: 1.59vw; /*1.7em*/
    margin: 5% 0;
    scroll-margin-top: 4.81vh; /*2.7em*/  
}

h5{
  font-family: "Caladea", serif;
  font-weight: 700;
    color:#161b27;
    font-size: 1.12vw; /*1.2em*/
}

p{
  font-family: "Caladea", serif;
  font-weight: 400;
    color: #161b27;
    font-size: 1.03vw; /*1.1em*/
    text-align:justify;
    text-align-last: left;
    margin: 5% 0;
    margin-bottom: 10%;
    line-height: 1.3;   /*interlignage : valeur en unités relatives (ex: 1.5 ou 1.6)*/
    /*letter-spacing: 0.1em;  interlettrage */
    word-spacing: 0.05vw;   /*Augmente l'espacement entre les mots*/
    hyphens: auto;   /*Active la césure automatique*/
    hyphenate-character: auto; /*précise quel tiret pour la césure : '~'*/
    hyphenate-limit-chars: 10 4 4;
    /*-ms-hyphens: auto;       Pour les anciens navigateurs IE
    -moz-hyphens: auto;      Pour Firefox
    -webkit-hyphens: auto;   Pour WebKit (Chrome, Safari) */
    /*widows: 2;
    orphans: 2; garantit qu’il y a au moins deux lignes de texte dans un paragraphe qui finit sur une ligne*/
    text-justify: inter-word;
}

.remerciements p{
  text-align: left;
}


/*--------- STYLE LIENS ---------*/

a{
    cursor:pointer;
    overflow-wrap: break-word; /*coupe les liens trop longs */
    word-break: break-word; /*pareil mais plus radical, à utiliser qu'en exception*/
  }

  a:not([href]) { /* a sans liens href renseignés*/
    /* cursor: text; */
    pointer-events: none;
}

I{
  font-family: "Caladea", serif;
  font-weight: 400;
  font-style: italic;
}

  .lien{
    color: #faadde;
    background-color: #161b27;
  }

  .lien:hover{
    color: #f5f5f5;
  }
  
  .titre-oeuvre{
    font-family: "Caladea", serif;
    font-weight: 400;
    font-style: italic;
    color: #274e12;
    background-color: #e9e4d8;
    text-decoration: none;
    /* scroll-margin-top: 2rem; */
  }
  
  .column2 a.titre-oeuvre {
    cursor:pointer;
  }

  /* .column3 a.titre-oeuvre {
    cursor:text;
  } */

  .artiste{
    color: #ffb47e;
    background-color: #161b27;
    text-decoration: none;
    /* scroll-margin-top: 2rem; */
  }

  .artiste:hover{
    color: #f5f5f5;
  }
  
  .auteur{
    color: #e9e4d8;
    background-color: #274e12;
    text-decoration: none;
    /* scroll-margin-top: 2rem; */
  }
  
  .auteur:hover{
    color: #f5f5f5;
  }

  .bibliographie .titre-ouvrage { /*style spécifique à la section bibliographie*/
    font-family: "Caladea", serif;
    font-weight: 400;
    font-style: italic;
    color: #f5f5f5;
    text-decoration: none;
  }

  .notes .titre-ouvrage { /*style spécifique à la section notes*/
    font-family: "Caladea", serif;
    font-weight: 400;
    font-style: italic;
    color: #d8b1ed;
    text-decoration: none;
  }

  .titre-article{ /*apparaît seulement en bibliographie*/
    color: #f5f5f5;
  }

  .column2 .appel-notes {
    color:#161b27;
    text-decoration: underline;
    text-decoration-color: #d8b1ed;
    text-decoration-style: solid;
  }

  .column3 .appel-notes {
    color:#f5f5f5;
    text-decoration: underline;
    text-decoration-color: #d8b1ed;
    text-decoration-style: solid;
  }

  .appel-notes:hover{
    color: #f5f5f5;
    background-color: #d8b1ed;
    text-decoration: underline;
    text-decoration-color: #f5f5f5;
    text-decoration-style: solid;
  }

  .fig{
    color:#d8b1ed;
    background-color: #343332;
    text-decoration: none;
  }

  .fig:hover{
    color: #f5f5f5;
  }

  /* :target { cibles des ancres
    scroll-margin-top: 500px; Décale proprement l’ancre 
}*/

/*--------- GENERAL ---------*/

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* font-family: Arial, Helvetica, sans-serif; */
}

.page-titre{
    /* display: flex;
    flex-direction: column; */
    /* position: absolute; */
    /* text-align:justify;
    align-items: center;
    justify-content: center; */
    height: 100vh;
    width: 100vw;
    background-color: #e9e4d8;
    z-index: 50;
    margin:0;
    padding:0;
}

.grid-container{
  display:grid;
  height:100vh;
  width:100vw;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  /* justify-content: center;
  align-items: center; */
  margin:0;
  padding:0;
  /* grid-template: 
            "bloc1 bloc2"
            "bloc3" */
}

.bloc1{
  grid-column: 1 / 3;
  grid-row: 1 / 5;
  z-index:2;
  margin:0;
  /* padding: 15vh 0 0 10vw; */
  padding: 5vh 0 0 6vh;
  display: block;
  justify-content: center;
}

.bloc2{
  grid-column: 2 / 4;
  grid-row: 1 / 4;
  z-index:1;
  margin:0;
  /* background-color: #004b81; */
  /* background-image: linear-gradient(to bottom, rgba(255,255,255,0), 67%, #e9e4d800), url("asset/images/assortiment_textures.png"); */
  background-size: cover;
  /* background: linear-gradient(blue, pink); */

  position: relative;
  /* display: flex;
  justify-content: center;
  align-items: center; */
  overflow: hidden; /* Empêche le débordement */
}

.img-fond-titre {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute; /* Couvre entièrement le bloc */
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 55%, rgba(0, 0, 0, 0) 95%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 55%, rgba(0, 0, 0, 0) 95%);
}

.bloc3{
  grid-column: 1 / 3;
  grid-row: 3 / 5;
  background-image: linear-gradient(to right, rgba(255,255,255,0) 60%, 75%, #e9e4d8), url("asset/images/assortiment_textures4.png");
  background-position: center;
  background-size: cover;
  margin:0;
}

.bloc4{
  grid-column: 3 / 4;
  grid-row: 4 / 5;
  margin:0;
  /* padding:1vw; */
  text-align: left;
}

.bloc5{
  grid-column: 2 / 3;
  grid-row: 4 / 5;
  margin:0;
  display:grid;
  align-content: center;
}

/* .img-fond-titre{
  width:100%;
  position: relative;
  display: inline-block;
  object-fit: cover;
}*/

/*.img-fond-titre::after {  ajoute un pseudo-element auquel appliquer l'overlay 
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 100%, rgba(0, 0, 0, 0) 0%);
  pointer-events: none; 
} */

#cliquer{
  /* position:absolute;
  bottom:10%; */
  font-family: "Caladea", serif;
  font-weight: 400;
  font-size: 1.12vw; /*1.2em*/
  color:#e9e4d8;
  background-color: #161b27;
  /* justify-self: center; */
  /* margin:0; */
  margin-top:10vh;
  justify-self: center;
align-self: center;
width: max-content;


  animation-duration: 2s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;
}

.titre-nom{
  margin:0;
  /* margin-top:5vh; */
  color:#ffb47e;
  font-family: "Caladea", serif;
  font-weight: 400;
  font-size: 1.87vw; /*2em*/
}

.titre-mention{
  margin:0;
  /* margin-top:2vh; */
  font-family: "Caladea", serif;
  font-weight: 400;
  font-size: 1.12vw; /*1.2em*/
  text-align: left;
  display: block;
}

.tutorat {
  margin: 0;
  margin-top: 1.5vh;
  font-family: "Caladea", serif;
  font-weight: 400;
  font-size: 1.03vw; /*1.1em*/
  text-align: left;
  display: block; /* Transforme les spans en blocs pour que text-align fonctionne */
}

.titre-lien {
  margin: 0;
  /* margin-top: 1.5vh; */
  font-family: "Caladea", serif;
  font-weight: 400;
  text-align: left;
  display: flex;          /* Utilise flexbox pour contrôler l'alignement */
  justify-content: left; /* Aligne le contenu (le <a>) à droite */
}

.titre-lien a {
  display: inline-block; /* Garde le lien à la taille du texte */
  text-align: left;     /* Aligne le texte à droite */
  font-size: 1.03vw; /*1.1em*/
  margin-top: 1.5vh;
  color:#faadde;
  background-color: #161b27;
}


@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
}

.column-layout {
    display: flex;
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden; /* Empêche les colonnes de déborder horizontalement et verticalement */
    /* gap: 1rem; */
    /* padding: 2rem; */
    position: relative;
}

.column {
    flex-grow: 1;
    /*width: 33.33%;  Largeur initiale */
    min-width: 200px;
    min-height:  100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #f5f5f5;
    /* padding: 1.5rem; */
    /* border-radius: 8px; */
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
    scroll-behavior: smooth;
}

.resizer {
    width: 1px;
    background-color: #a4a4a4;
    /* cursor: ew-resize; */
    /* cursor: grab; */
    /* cursor: col-resize; */
    /* cursor: url('asset/images/custom-cursor.png') 32 32, auto; */
    position: relative;
    z-index: 1; /* S'assurer qu'ils sont au-dessus des colonnes */
    height: 100%; /* S'étend sur toute la hauteur de la colonne */
}

/* .resizer::before {
  content: "";
  position: absolute;
  left: -10px;  Agrandit la zone à gauche 
  right: -10px;  Agrandit la zone à droite
  z-index: 0; Place le pseudo-élément derrière le contenu
} */

/* .custom-cursor {
  
}

.custom-cursor:hover {
  transform: scale(1.1);
} */

/* Gestion du scroll des colonnes pour Chrome, Edge, Safari*/

.column::-webkit-scrollbar-track {
    background:#f5f5f5;
    border-radius: 4px;
    border-radius: 0;
}

.column2::-webkit-scrollbar {
    width: 12px;
    height: 8px;
}

.column2::-webkit-scrollbar-thumb {
    background:#004b81;
    border-radius: 4px;
    border-radius: 0;
}

.column2::-webkit-scrollbar-thumb:hover {
    background:#ffb47e;
}

.column2.scroll-active::-webkit-scrollbar-thumb {
  background: #ffb47e;
}

.column3::-webkit-scrollbar {
  width: 11px;
  height: 8px;
}

.column3::-webkit-scrollbar-thumb {
  background:#274e12;
  border-radius: 4px;
  border-radius: 0;
}

.column3::-webkit-scrollbar-thumb:hover {
  background:#d8b1ed;
}

.column3.scroll-active::-webkit-scrollbar-thumb {
  background: #d8b1ed;
}

/* Pour Firefox */

@-moz-document url-prefix() {
  .column2 {
    scrollbar-width:thin; 
     scrollbar-color: #004b81 #f5f5f5;
  }
  
  .column2.scroll-active {
    scrollbar-color: #ffb47e #f5f5f5;
  }

  .column3 {
    scrollbar-width:thin; 
     scrollbar-color: #274e12 #f5f5f5;
  }
  
  .column3.scroll-active {
    scrollbar-color: #d8b1ed #f5f5f5;
  }
  
  }

/*--------- COLONNE GAUCHE ---------*/

.column1 {
    background-color: #161b27;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre horizontalement le contenu */
    justify-content: flex-start; /* Aligne le contenu en haut */
    width:31%; /*31.77%*/
    height: 100vh;
    position: relative; /* Nécessaire pour positionner le contenu avec `absolute` */
}

#schema-icono { /*anciennement #Calque_1*/
    position: absolute; /* positionnement indépendamment */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) perspective(500px) rotateX(-3deg) /*élargit très légèrement le haut*/ translateY(2%) /*rééquilibre le décalage crée par la perspective pour centrer verticalement*/;
    height: 95vh;
    width: auto;
    max-width: 100%; /* Empêche de dépasser la largeur de la colonne */
    max-height: calc(100% - 5% - 2em); /* Assure qu'il reste dans la colonne */
}

.cercles {
    fill: #e9e4d8;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 2.66px;
    /* box-shadow: 8px 8px 5px 10px #faadde; */
}

.cercles:hover {
    fill:#faadde;
    stroke:#f5f5f5;
    stroke-miterlimit: 10;
    stroke-width: 2.66px;
    /* offset-x | offset-y | blur-radius | spread-radius | color */
    box-shadow: 8px 8px 5px 10px #faadde;
}

/* .cercles:active {
    fill:#faadde;
    stroke:#f5f5f5;
} */

.glow-hover {
  transition: filter 0.3s ease;
}

/* Effet au survol */
.glow-hover:hover {
  filter: url(#glow-effect);
}

/* Effet d'activation par le scroll */
.glow-circle {
  transition: filter 0.3s ease-in-out;
  pointer-events: all;
}

/* Priorité au scroll */
.glow-circle.observed {
  filter: url(#glow-effect);
  stroke: #faadde;
  fill:#f5f5f5;
}

/* Effet au clic (priorité la plus haute) */
.glow-circle.active {
  filter: url(#glow-effect);
  stroke:#faadde;
  fill: #faadde ; /* !importantAssure que l'effet reste actif après le clic */
}

/* S'assurer que le hover fonctionne même si observed est actif */
.glow-circle.observed:hover,
.glow-circle.active:hover {
  filter: url(#glow-effect);
  stroke: #f5f5f5 ; /*!important*/
  fill:#faadde;
}


.ancre-icono{
  /* border: solid 1px #ffb47e; */
   scroll-margin-top:15vh; 
}

.ancre-icono.highlight-appear {
  transition: background-color 0.5s ease-in, color 0.5s ease-in, box-shadow 0.5s ease-in;
  background-color: #e9e4d8;
  color: #274e12;
  box-shadow: 1px 1px 3px 5px #e9e4d8;
}

.ancre-icono.highlight-disappear {
  transition: background-color 1s ease-out, color 1s ease-out, box-shadow 1s ease-out;
  background-color: transparent;
  color: inherit;
  box-shadow: inherit;
}


/*--------- COLONNE CENTRALE ---------*/
    
.column2 {
  background-color: #f5f5f5;
  width: 37%; /*36.4% Largeur définie dynamiquement */
  position: relative; /* Nécessaire pour que .zone-menu se réfère à elle */
  /*display: flex;
  flex-direction: column;  S'assure que les enfants s'empilent verticalement */
}

/* MENU DU SOMMAIRE */


.zone-menu {
  position: sticky;
  position: -webkit-sticky; /* Préfixe pour Safari */
  top: 0;
  background-color: #f5f5f5 /*#e9e4d8*/;
  box-shadow: 0px 2px 8px #e9e4d8;
  padding: 4% 5%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  z-index: 10;
  min-height:5.25vh;
  margin:0;
}

.box-menu {
  /* background-color:   #e9e4d8; */
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%; /* Empêche l'élargissement */
  margin-left: 5%;
  cursor: pointer;
  overflow: visible; /* Permet au dropdown d'apparaître sans modifier la taille du conteneur */
}

.box-menu p{
margin:0;
}

#titre-sommaire{
  font-family: "Wagon", sans-serif;
  font-weight: 700;
    color: #274e12 /*#faadde*/;
    font-size: 1.12vw; /*1.2em*/
}

#titre-sommaire:hover{
  cursor:pointer;
}

#titre-actif-menu {
  background-color: #e9e4d8 /*#f5f5f5*/;
  /* box-shadow: inset 0px 5px 10px #faadde, 0px 2px 5px #faadde; */
  font-family: "Caladea", serif;
  font-weight: 400;
  color: #343332 /*#274e12*/;
  font-size: 0.94vw; /*1em*/
  white-space: nowrap; /* Texte sur une seule ligne */
  overflow: hidden; /* Cache le texte qui dépasse */
  text-overflow: ellipsis; /* Affiche "..." si le texte dépasse */
  display: inline-block;
  vertical-align: middle;
  width: 100%; /* Assure que le titre prend toute la largeur possible */
  max-width: 100%; /* Évite que le titre dépasse de la boîte */
  box-sizing: border-box;
  position: absolute; /* Permet au titre de ne pas influencer la taille du conteneur */
  padding: 0 1%;
  border-bottom: solid 3px #f5f5f5;
}

/* Menus déroulants */


.dropdown-menu {
  display: none;
  position: absolute;
  /* width: 132%; */
  box-sizing: border-box;
  top: 100%; /* Peut être ajusté pour mieux aligner le dropdown */
  /* left: 0; */
  right: 0;
  margin-top: 1.07vh; /*0.6em*/
  /* background-color: #e9e4d8; */
  background-image: url("asset/images/assortiment_textures9.png");
  background-attachment: local;  /* Permet au fond de défiler avec le contenu */
  padding: 5px 10px;
  z-index: 10; /* Augmenter z-index pour garantir que le menu est au-dessus d'autres éléments */
  overflow-y: scroll;
  max-height: 92vh;
  box-shadow: 0px 5px 8px #e9e4d8 /*#004b81*/;
}

/* Affichage des menus au survol */
.box-menu:hover .dropdown-menu {
  display: block;
   /*top: 90%; Si besoin, ajuster légèrement */
}

.zone-menu:hover .dropdown-menu {
  display: block;
}

.liste-sommaire{
  padding: 0 5%;
  text-align: left;
  flex-direction: column;
}

.liste-sommaire a {
  display: block;
  text-decoration: none;
  font-size: 0.94vw; /*1em*/
  margin: 3% 3%;
}

.a-h2{
  font-family: "Wagon", sans-serif;
  font-weight: 700;
  color: #343332;
  /* color: #004b81; */
}

.a-h2:hover{
  font-family: "Wagon", sans-serif;
  font-weight: 700;
  /* color: #d8b1ed; */
  /* color: #343332; */
  color:#ffb47e;
  /* font-size: 1.41vw; 1.5em*/
} 

.a-h3{
  /* padding-left: 5%; */
  font-family: "Caladea", serif;
  font-weight: 400;
  /* color: #343332; */
  color: #004b81;
}

.a-h3:hover{
  /* font-family: "Wagon ExtraLight";
  font-weight: lighter; */
  /* color: #274e12; */
  color:#ffb47e;
  /* font-size: 1.41vw; 1.5em*/

} 

.a-h4{
  /* padding-left: 5%; */
  font-family: "Caladea", serif;
  font-weight: 400;
  /* color: #343332; */
  color: #004b81;
}

.a-h4:hover{
  /* font-family: "Wagon ExtraLightItalic";
  font-weight: lighter; */
  /* color: #004b81; */
  color:#ffb47e;
  /* font-size: 1.41vw; 1.5em*/
}

.a-droite{
  text-align: right;
  color: #004b81;
}

.divider{
  border-top: 2px solid #f5f5f5;
  /* border-top: 1.5px solid #e9e4d8; */
}


/* STYLE DE LA JAUGE DE TEXTE */

.bloc-jauge-fontsize {
  
    /* position: sticky;
    position: -webkit-sticky; */
    top: var(--hauteur-menu, 0px); /* Utilise une variable CSS modifiable */

  position: sticky;
  position: -webkit-sticky; /* Préfixe pour Safari */
  display: inline-flex; /* Permet de gérer l'alignement interne */
  /* top: 0vh; */
  background-color: #f5f5f5;
  left: 2%;
  z-index: 9;
  margin: 0; /* Supprime tout décalage dû au margin */
  padding: 0;
  align-items: stretch; /* S'assure que T et jauge-fontsize prennent la même hauteur */
  /*align-items: center;  Centre verticalement l'enfant */
  justify-content: center; /* Centre aussi horizontalement si nécessaire */
  box-shadow: 0px 5px 8px #e9e4d8;
}


#T {
  box-sizing: border-box;
  padding: 1vw;
  font-family: "Caladea", serif;
  font-weight: 400;
  color: #274e12;
  font-size: 0.94vw; /*1em*/
}

#lien-T:hover {
  color:#d8b1ed;
}

#T.highlight-appear-T {
  transition: background-color 0.5s ease-in, color 0.5s ease-in, box-shadow 0.5s ease-in;
  background-color: #e9e4d8;
  color: #d8b1ed;
  box-shadow: 0px 10px 20px #d8b1ed;
}

#T.highlight-disappear-T {
  transition: background-color 1s ease-out, color 1s ease-out, box-shadow 1s ease-out;
  background-color: transparent;
  color: inherit;
  box-shadow: inherit;
}

.bloc-jauge-fontsize:hover #T{
  display:none;
  cursor: pointer;
}

.bloc-jauge-fontsize:hover .jauge-fontsize {
  /* display: block; */
  display: inline-flex;
  cursor: pointer;
}

label {
  font-size: 0.84vw; /*0.9em*/
  font-family: "Caladea", serif;
  font-weight: 400;
  color: #274e12;
}

label:hover{
  cursor: pointer;
}

input {
  margin: 0.4em;
}

.jauge-fontsize {
  box-sizing: border-box;
  padding: 1vw;
  height: 100%;
  /* margin-top:-0.25vh; */
  box-sizing: border-box;
  display:none;
  align-items: center; /* Centre verticalement l'enfant */
  justify-content: center; /* Centre aussi horizontalement si nécessaire */
  /* position:sticky; */
  /* top:5.25vh; */
  background-color: #f5f5f5;
  /* left:10%; */
  /* z-index:9;   */
  /* font-family: "Wagon Bold"; */
  /* color: #274e12; */
  /* font-size: 0.84vw; 0.9em */
}

/* Style de la jauge */
#jauge {
  -webkit-appearance: none; /* Supprime le style natif */
  -moz-appearance: none;
  appearance: none;
  width: 12vw;
  height: 0.5vh;
  margin-left:2vw;
  background: #e9e4d8;
  /* border-radius: 10px; */
  /* outline: 0.1rem solid #e9e4d8; */
  transition: background 0.3s;
  cursor: pointer;
}

/* Changer la couleur au survol */
#jauge:hover {
  background: #e9e4d8;
}

/* Personnalisation du curseur (thumb) sur Webkit (Chrome, Safari, Edge) */
#jauge::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0.5vw; /* Taille du curseur */
  height: 1vh;
  background: #274e12; /* Couleur du curseur */
  /* border-radius: 50%; */
  cursor: pointer;
  /* transition: transform 0.2s; */
}

/* Effet au survol du curseur */
#jauge::-webkit-slider-thumb:hover {
  transform: scale(1.5);
  background: #faadde;
  cursor:grab;
}

/* input[type="range"] {
  cursor: grab;
}

input[type="range"]:focus {
  cursor: grabbing;
} */

/* Personnalisation du curseur sur Firefox */
#jauge::-moz-range-thumb {
  -moz-appearance: none;
  width: 0.5vw;  /* Taille du curseur */
  height: 1vh;
  background: #274e12;  /* Couleur du curseur */
  border-radius: 0%; /* Angles droits */
  border:none;
  cursor: pointer;
  transition: transform 0.2s;
}

/* Effet au survol du curseur (Mozilla Firefox) */
#jauge::-moz-range-thumb:hover {
  transform: scale(1.5);
  background: #faadde;
  cursor: grab;
}



/* Gestion des barres de scroll du menu déroulant */

/* Webkit - Chrome, Safari */

.dropdown-menu::-webkit-scrollbar-track {
  background:#f5f5f5;
  border-radius: 4px;
  border-radius: 0;
}

.dropdown-menu::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dropdown-menu::-webkit-scrollbar-thumb {
  background:#ffb47e;
  border-radius: 4px;
  border-radius: 0;
}

.dropdown-menu::-webkit-scrollbar-thumb:hover {
  background:#faadde;
}

.dropdown-menu.scroll-active::-webkit-scrollbar-thumb {
  background: #faadde;
}

/* Firefox */
@-moz-document url-prefix() {
.dropdown-menu {
  scrollbar-width:thin; 
   scrollbar-color: #ffb47e #f5f5f5;
}

.dropdown-menu.scroll-active {
  scrollbar-color: #faadde #f5f5f5;
}

}


/*tous*/

.box-menu:hover .dropdown-menu,
.dropdown-menu:hover {
    display: block;
} /*assure que le menu reste affiché tant que l'on intéragit avec*/


/* DEFILEMENT DU TEXTE */

.zone-texte{
    padding: 7% 10% 5% 10%;
    margin:0;
    margin-top: -5vh;
    /* scroll-margin-top: 0.2rem; */
    /* scroll-snap-type: none; */

}

#intro-auteur,
#intro-artiste,
#intro-oeuvre,
#intro-notes,
#intro-liens,
#intro-credits{
  color: #161b27;
}

#intro-liens:hover{
  color: #faadde;
  background-color: #161b27;
}

#intro-oeuvre:hover{
  font-family: "Caladea", serif;
  font-weight: 400;
  font-style: italic;
  color: #274e12;
  background-color: #e9e4d8;
  text-decoration: none;
}

#intro-artiste:hover{
  color: #ffb47e;
  background-color: #161b27;
  text-decoration: none;
}

#intro-auteur:hover{
  color: #e9e4d8;
  background-color: #274e12;
  text-decoration: none;
}

#intro-notes:hover{
  color:#161b27;
  text-decoration: underline;
    text-decoration-color: #d8b1ed;
    text-decoration-style: solid;
}


#intro-credits:hover{
  color:#d8b1ed;
  background-color: #343332;
  text-decoration: none;
}



.img-transitions{
  /* width:calc(100% + 20%);; */
 /*margin:0 10% 10vh 10%; ⬆⮕⬇⬅*/
  margin:15% 0 10% 0;
  height:40vh; /*30vh*/
  object-fit: cover;
  /* justify-self: center; */
  display: block;
  width: calc(100% + 25%); /* 100% + le padding de chaque côté */
  position: relative;
  left: 50%;
  transform: translateX(-50%); /* Centre l'image */
}

#resume{
  margin:0;
}

#introduction{
  margin:0;
}

#renvoi-note-69{
  scroll-margin-top:20vh;
}

#citation-scherer{
  margin: -5% 0 5% 0;
  padding: 5% 2vw;
  font-size: 0.89vw; /*0.95em*/
  border: solid 1px #d8b1ed;
}

#citation-scherer:hover{
  background-color: #d8b1ed;
}

#citation-scherer a{
  text-decoration: none;
}

#citation-scherer:hover a{
  color:#f5f5f5;
  text-decoration: none;
}



/*--------- COLONNE DROITE ---------*/
    

.column3 {
  /* height: 100vh; */
  /* margin: auto; */
  width:32%; /*31.77%*/
}

/* .titre-ouvrage.bibliographie:hover {
  cursor:text;
} */

/* Animations des styles pour la mise en évidence d'éléments ciblés */

/*État par défaut*/
.notes, .bibliographie, .descriptions-oeuvres {
  background-color: transparent;
  /* color: inherit; */
  transition: none;
}

/* Apparition rapide */
.highlight-appear {
  transition: background-color 0.75s ease-in, color 0.75s ease-in, box-shadow 0.75s ease-in;
}

.highlight-appear.notes {
  background-color: #faadde;
  color: #f5f5f5;
  box-shadow: 1px 1px 3px 5px #faadde;/* offset-x | offset-y | blur-radius | spread-radius | color */
}

.highlight-appear.bibliographie {
  background-color: #004b81;
  color: #e9e4d8;
  box-shadow: 1px 1px 3px 5px #004b81;
}

.highlight-appear.descriptions-oeuvres {
  background-color: #d8b1ed;
  color: #161b27;
  box-shadow: 1px 1px 3px 5px #d8b1ed;
}

.highlight-appear.descriptions-credits {
  background-color: #ffb47e;
  color: #f5f5f5;
  box-shadow: 1px 1px 3px 5px #ffb47e;
}

/* Disparition lente */
.highlight-disappear {
  /* background-color: transparent;
  color: inherit; */
  transition: background-color 2s ease-out, color 2s ease-out, box-shadow 2s ease-out;
}

.highlight-disappear.notes {
  background-color: transparent;
  color: inherit;
}

.highlight-disappear.bibliographie {
  background-color: transparent;
  color: inherit;
}

.highlight-disappear.descriptions-oeuvres {
  background-color: transparent;
  color: #004b81;
}

.highlight-disappear.descriptions-credits {
  background-color: transparent;
  color: inherit;
}


/* Section Oeuvres */

.section-oeuvres{
    display: flex;
    flex-direction: column;
    align-items: center; /* Aligne verticalement les éléments */
    justify-content: center; /* Centre horizontalement les éléments */
    /*gap: 1vw;  Ajoute de l'espace entre les éléments */
    background-color: #e9e4d8;
    padding: 8% 10% 10% 10%;
  }
  
  #titre-oeuvres{
    color:#faadde;
    align-self: flex-start;
    margin:0;
    scroll-margin-top: 5vh;
  }

  .section-oeuvres img{
  width: 85%;
  height: auto;
  margin:1.5vw 0 1.5vw 0;
  display: block;
  object-fit: contain;
  /* align-self: flex-start; */
  }

  .single-image {
    /* width: 85%;
    height: auto;
    margin-top: 1.5vw;
    display: block; */
    background-color: #e9e4d8;
}

/* Conteneur global qui contient tout, y compris les boutons */
.carousel-wrapper {
  position: relative;
  width: 85%; /* Largeur du carrousel */
  max-width: 600px; /* Limite la taille */
  margin: 0 auto;
}

/* Conteneur du carrousel proprement dit */
.carousel {
  position: relative;
  overflow: hidden; /* Masque l'excédent des images */
}

/* Track du carrousel, avec transition pour le défilement */
.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  margin: 0 -1px;
  align-items: center;
}

.carousel-track img {
  width: 100%; /* Chaque image occupe toute la largeur */
  height: 100%; /*auto safari aime pas*/
  object-fit: contain;
  flex-shrink: 0;
}

/* Style des boutons de navigation */
button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #d8b1ed;
  color: #f5f5f5;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  z-index: 10; /* Les flèches seront au-dessus du carrousel */
  font-size: 1.41vw; /*1.5em*/
  /* border-radius: 5px; */
  font-family: "Caladea", serif;
  font-weight: 400;
}

button:hover{
  background-color: #faadde;
  color: #f5f5f5;
}

button:active{
  background-color: #ffb47e;
}

/* Position des flèches à l'extérieur du carrousel */
.prev {
  left: -3vw;  /* Décale la flèche gauche à l'extérieur */
}

.next {
  right: -3vw;  /* Décale la flèche droite à l'extérieur */
}





  /* .img-container {
    display: flex;
    max-width: 25vw;
    gap: 1vw;
    align-items: center;
    justify-content: center;
  }
  
  .img-container img {
    height: auto;
    max-height: 100%;
    flex: 1;
    object-fit: contain; 
  } */
  
  

  
  
  .descriptions-oeuvres{
    height: auto;
    font-family: "Caladea", serif;
  font-weight: 400;
    color: #004b81;
    font-size: 0.89vw; /*0.95em*/
  }


/* Section Notes */

.section-notes{
    display: flex;
    flex-direction: column;
    /* gap: 1vw; */
    background-color: #004b81;
    color: #e9e4d8;
    font-family: "Caladea", serif;
    font-weight: 400;
    font-size: 0.89vw; /*0.95em*/
    padding: 10%; 
  }
  
  #titre-notes{
    color: #faadde;
    scroll-margin-top: 5vh;
    margin: 1vw 0 0.5vw 0;
  }

  #schema-note-4{
    width:100%;
    margin-bottom: 0.75vh;
  }

  .notes{
    margin:0.5vw 0 0.5vw 0;
  }

  /* .notes{
    scroll-margin-top: 2rem;
  } */

/* Section Bibliographie */

.bibliographie{
  margin:0.5vw 0 0.5vw 0;
}

.section-bibliographie{
    display: flex;
    flex-direction: column;
    /* gap: 1vw; */
    background-color: #ffb47e;
    color: #004b81;
    font-family: "Caladea", serif;
    font-weight: 400;
    font-size: 0.89vw; /*0.95em*/
    padding: 10%; 
    width:100%;
    box-sizing: border-box;
  }

  #titre-bibliographie{
    color:#274e12;
    scroll-margin-top: 5vh;
    margin: 1vw 0 0.5vw 0;
  }

  .sous-titres-biblio{
    /* margin:0; */
    color: #274e12;
    margin:1.5vw 0 1vw 0;
  }

  /* .bibliographie{
    scroll-margin-top: 2rem;
  } */

  .highlight-bibliographie{
    color:white;
    background-color: #004b81;
  }


  /* Section Credits */

  .section-credits{
    display: flex;
    flex-direction: column;
    /* gap: 1vw; */
    background-color:#343332;
    color: #e9e4d8;
    font-family: "Caladea", serif;
    font-weight: 400;
    font-size: 0.89vw; /*0.95em*/
    padding: 10%; 
    width:100%;
    box-sizing: border-box;
  }

  #titre-credits{
    color: #ffb47e;
    scroll-margin-top: 5vh;
  }

  .sous-titres-credits{
    color: #ffb47e;
    /* margin-bottom:0; */
    margin:1.5vw 0 1vw 0;
  }

  .descriptions-credits{
    /* display: flex;
    flex-direction: column; */
    text-align:left;
    gap: 1vw;
    background-color:#343332;
    color: #e9e4d8;
    font-family: "Caladea", serif;
    font-weight: 400;
    font-size: 0.89vw; /*0.95em*/
    /* padding: 10%;  */
    width:100%;
    box-sizing: border-box;
    /* margin: 0; */
    margin:0.5vw 0 0.5vw 0;
  }

  .credits{
    margin:0.5vw 0 0.5vw 0;
  }
/*--------- AVERTISSEMENT POUR PETITE TAILLE D'ECRAN ---------*/

#avertissement {
  display: none;
}


@media screen and (max-width: 1024px) , screen and (max-aspect-ratio: 4/3) and (max-width: 1024px) {
  /* Styles pour les petits écrans (smartphones portrait ou paysage, tablettes portrait), ou les petits écrans au ratio inferieur à 4:3 (tablettes si plus petites ou fenêtre d'ordi trop raccourcies) */
    
    * {
      box-sizing: border-box; /* Empêche les marges ou bordures d'élargir un élément */
    }
    
    /* Désactive complètement le scroll */
    html, body {
      margin: 0;
      padding: 0;
      overflow: hidden; /* Empêche le défilement horizontal et vertical */
      width: 100%; /* Empêche les dépassements horizontaux */
      height: 100%; /* Empêche les dépassements verticaux */
      -webkit-font-smoothing: antialiased; /*pour un traitement de typo plus similaire à celui de chrome sur les autres navigateurs*/
      -moz-osx-font-smoothing: grayscale; /*idem*/
    }
  
    body {
      position: relative; /* S'assure que le positionnement fixe fonctionne correctement */
    }

    /* Bloc couvrant tout l'écran */
    #avertissement {
      /* display: flex;
      flex-direction: column; */
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw; /* Largeur totale de l'écran */
      height: 100vh; /* Hauteur totale de l'écran */
      background-color: #e9e4d8;
      z-index: 50;
      overflow: hidden;
    
      display:grid;
      height:100vh;
      width:100vw;
      grid-template-columns: 1fr;
      grid-template-rows: 42% 58%;
       justify-content: center;
      /*align-items: center; */
      margin:0;
      padding:0;
      /* grid-template: 
                "bloc1 bloc2"
                "bloc3" */
    }
    
    .bloc1-avertissement{
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      margin:0;
      background-image: linear-gradient(to bottom, rgba(255,255,255,0), 90%, #e9e4d8), url("asset/images/assortiment_textures5.png");
      background-size: cover;
      /* display: block; */
    }
    
    .bloc2-avertissement{
      grid-column: 1 / 2;
      grid-row: 2 / 3;
      margin:0;
      /* padding-top:2vh; */
      padding:2vh 12vw 0 12vw;
      /* display: flex;
      flex-direction: column; */
      /* align-content: center; */
      /* background-color: #e9e4d8; */
      /* background: linear-gradient(blue, pink); */
    }


    .bloc-titre-avertissement{
      top:5vh;
      position:absolute;
      left: 8vw;
      margin:0;
      justify-content: space-between;
    }
  
    .titre-avertissement{
      /* display:block; */
      /* left:1.5em; */
      font-family: "Wagon", sans-serif;
      font-weight: 700;
      font-size: clamp(1rem, 1.2vw, 1.5em); /* Anciennement 1.5em */
      color: #004b81;
      /* background-color: #161b27; */
      /* margin: 0 3em; */
      margin: 0;
    }

    /*.t1{
       position: absolute;
      top:5%; 
    }*/

    .t2{
      margin-top: -0.25vh;
    }

    .sous-titre-avertissement{
      /* position:absolute; */
      /* top:10vh; */
      font-family: "Caladea", serif;
      font-weight: 400;
      font-size: clamp(0.85rem, 0.85vw, 1em); /* Anciennement 1em */
      color: #d8b1ed;
      background-color: #161b27;
      margin:0;
      margin-top: 0.5vh;
      display: inline-block; /* Adapte la largeur à celle du texte */
      white-space: nowrap;
      /* left:1.5em; */
      /* left: 8.5vw; */
      /* margin-top: 5vw; */
      /* padding: 2.3em; */
      text-align: left;
    }

    .st2{
      margin:0;
      margin-top: 0.5vh;
    }

    .texte-avertissement {
      display: flex;              /* Utilise Flexbox pour centrer le bloc */
      justify-content: center;    /* Centre le bloc de texte horizontalement */
      align-items: center;        /* Centre le bloc de texte verticalement */
      text-align: left;           /* Aligne le texte à gauche à l'intérieur du bloc */
      width: fit-content;         /* Ajuste la largeur du <p> à son contenu */
      margin: 0 auto;             /* Centre le bloc de texte dans la grid */
      
      font-family: "Caladea", serif;
      font-weight: 400;
      font-size: clamp(0.9rem, 0.9vw, 1.1em); /* Anciennement 1.1em */
      color: #161b27;
      hyphens:none;
      padding: 0;
      /* margin: 0 3em; */
      /* margin: 0 8vw; */
    }

    #footer-avertissement{
      position:absolute;
      font-family: "Caladea", serif;
  font-weight: 400;
      color: #161b27;
      bottom: 5vh;
      left:8vw;
      /* left: 50%; */
      /* transform: translate(-50%, -50%); */
      font-size: clamp(0.85rem, 0.85vw, 1em); /* Anciennement 1em */
      line-height: 1.3;
      /* align-self: center;
      align-content: center; */
      /* margin: 0 3em; */
      text-align: left;
    }

  }