/*TYPO GENERALE*/
  .eb-garamond-<uniquifier> {
        font-family: "EB Garamond", serif;
        font-optical-sizing: auto;
        font-weight: <weight>;
        font-variant-numeric: oldstyle-nums;
  }

  .elz-numbers {
    font-family: 'EB Garamond', serif;
    font-variant-numeric: oldstyle-nums;
  }

  i{
    font-style: italic;
  }
  .local-caption em,
  .local-caption i { font-style: italic; }

  .lightbox-caption i,
  .lightbox-caption em { font-style: italic !important;}

/*GALERIE*/

  /*CADRE (contient la planche)*/
    .cadre {
    width: 100%;
    height: 100vh;
    overflow: scroll;
    }

  /*PLANCHE*/
    .planche {
      width: 100suiteimages;
      height: 85vh;
      overflow-y: scroll;
      display:flex;
      /*gap: 16px;*/
      direction: row;
      align-items: flex-start;
      min-width: max-content; 
      gap:0; 
      -ms-overflow-style: none; 
      scrollbar-width: none;
      margin-left: 0px;
      padding-left: 1vw;
      padding-right: 1vw;
      padding-top: 2rem;
  }

  .plancheinstal{
      width: 100suiteimages;
      height: 85vh;
      overflow-y: scroll;
      display:flex;
      /*gap: 16px;*/
      direction: row;
      align-items: flex-start;
      min-width: max-content; 
      gap:0; 
      -ms-overflow-style: none; 
      scrollbar-width: none;
      margin-left: 0px;
      padding-left: 1vw;
      padding-right: 1vw;
      padding-top: 1.2rem;
    }

  .plancheetape{
          width: 100suiteimages;
      height: 85vh;
      overflow-y: scroll;
      display:flex;
      /*gap: 16px;*/
      direction: row;
      align-items: flex-start;
      min-width: max-content; 
      gap:0; 
      -ms-overflow-style: none; 
      scrollbar-width: none;
      margin-left: 0px;
      padding-left: 1vw;
      padding-right: 1vw;
      padding-top: 1.2rem;

  }

  /*IMAGES*/
    .suiteimages{
    display:flex;
    gap:1vw;
    overflow-x:auto;
    padding:0;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    align-items:center;
    padding-top:0rem;
    top:0rem;
    }

    .suiteimagesinstal{
    display:flex;
    gap:1vw;
    overflow-x:auto;
    padding:0;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    align-items:center;
    }

    .suiteimages .image{
    flex:0 0 var(--card-w-mobile);
    scroll-snap-align:center;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    direction: row;
    flex-wrap: nowrap;
    flex-direction:column;
    gap: 8px;
    position:relative;
    }


    .image{
    flex:0 0 var(--card-w-mobile);
    scroll-snap-align:center;
    height:85vh;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    direction: row;
    flex-wrap: nowrap;
    flex-direction:column;
    position:relative;
    }



    .image img{
    width:100%;
    height:100%;
    object-fit:contain;     
    object-position:center;
    }

    .image > img{
    width:100%;
    height:auto;
    max-height:80vh;
    object-fit:contain;
    display:block;
    }

  /*SCROLL*/
  .cadre, .planche {
    -ms-overflow-style: none;
    scrollbar-width: none;
    }

    .cadre::-webkit-scrollbar,
    .planche::-webkit-scrollbar {display: none;}

  /*LEGENDES*/
    .caption { display: none !important; }

    .local-caption{
    width:100%;
    text-align:right;
    font-family:"EB Garamond", serif;
    font-variant-numeric: oldstyle-nums;
    font-size:1rem;
    color:#E0D3D3;
    box-sizing:border-box;
    opacity:0;
    transform: translateY(6px);
    transition: opacity 180ms ease, transform 180ms ease;
    pointer-events:none;
    user-select:none;
    position:static; 
    }

    .image:hover .local-caption,
    .image:focus-within .local-caption,
    .image:focus .local-caption{
    opacity:1;
    transform: translateY(0);
    }

  /*VUE UNIQUE*/

    
    .lightbox{
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    z-index: 2000;
    padding: 4vh 4vw;
    }

    .lightbox[aria-hidden="false"]{ display: flex; }

    .lightbox-inner{
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    display:flex;
    align-items:center;
    justify-content:center;
    outline: none;
    }

    .lightbox-figure{
    margin:0;
    width:85%;            
    max-width: 1000px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    }

    .lightbox-img{
    width:100%;
    height:auto;
    max-height:90vh;
    object-fit:contain;
    display:block;
    cursor: crosshair;
    transition: transform 220ms ease, opacity 180ms ease;
    }

    .lightbox-caption{
    margin-top:12px;
    color:#E0D3D3;
    font-family:"EB Garamond", serif;
    font-size: 1rem;
    text-align:center;
    font-variant-numeric: oldstyle-nums;
    }










  

/*TEXTES*/

  /*MENU*/

    /*STYLES TEXTE*/

    h1 a{
    font-family: "EB Garamond", serif;
    position:fixed;
    font-size:1rem;
    top:0.7rem;
    left: 1.1vw;
    color: #852B1E;
    font-variant-numeric: oldstyle-nums;
    z-index: 999;
    }

    a {
    color: inherit;            
    text-decoration: none;     
    background: none;          
    border: none;              
    outline: none;             
    cursor: crosshair;           
    z-index: 999;
    }

    h1 :hover { color: #E0D3D3; cursor: crosshair; transition: color 150ms ease;}


    h2{
    font-family: "EB Garamond", serif;
    font-size: 1rem;
    right: 1vw;
    color: #852B1E;
    white-space: nowrap;
    font-variant-numeric: oldstyle-nums;
    position: fixed;
    z-index: 999;
    top: 0.7rem;
    }

    h2 .word { 
    display: inline-block; 
    margin-left: 0.3vw; 
    z-index: 999;
    }


    h2 .word:hover { color: #E0D3D3; cursor: crosshair; }

    .pageactive{
      color:#E0D3D3 !important;
    }



    /*MENU ET CONTACT*/

    .contact {
    font-family: "EB Garamond", serif;
    font-size:1rem;
    color: #852B1E;
    font-variant-numeric: oldstyle-nums;
    text-align: center;
    }
    .contact {
    
    top: 1rem; 
    right: 1rem; 
    z-index: 999; 
}

    .menucontact {
    position: fixed;         
    top: 0.7rem;             
    right: 1vw;
    display: flex;
    flex-direction: column;
    align-items: center;   
    
    }
  
    .menucontact .menu {
    position: static;        
    display: inline-block;
    margin: 0;
    z-index: 999;
    }


    .menucontact .contact {
    max-width: 280px;     
    width: 100%;
    text-align: center;      
    margin-top: 1rem;
    }

    /*NOM ET INFOS*/

    .nominfos{
    position: fixed;         
    top: 0.7rem;             
    left: 0.7rem;
    right:0.7rem;
    display: grid;
    flex-direction:row;
    
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 2rem;
    }



    .nominfos .nom {
    position: static;        
    display: inline-block;
    margin: 0;
    color:transparent;
    }

    .nominfos .presentation {
    width: 29.1rem;
    margin-top: 0;
    }

    h3{
    font-family: "EB Garamond", serif;
    font-size:1rem;
    color: #E0D3D3;
    font-variant-numeric: oldstyle-nums;
    }

    .francais:hover{ 
  color: #852B1E; 
  cursor: text; 
  transition: color 150ms ease;}

      .anglais:hover{ 
  color: #852B1E; 
  cursor: text; 
  transition: color 150ms ease;}



    /*TEXTES DE PRESENTATION*/
      .centree{
      text-align: center;
      }

      .texte{
      hyphens: auto;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      word-wrap: break-word;
      overflow-wrap: break-word;
      justify-content: flex-start;
      }


      .justif{
      text-align: justify;
      display: inline-block;
      hyphens: auto;
      white-space: normal;
      word-spacing: clamp(-0.2rem, -0.05rem, 0.1rem);
      }


      .justifi::after{
      content: "";
      display: inline-block;
      width: 100%;
      height: 0;
      vertical-align: 0;
      font-size: 0;     
      line-height: 0;
      overflow: hidden;
      }

    /*CV*/

      .nominfos-row {
      display: flex;
      gap: 2rem;            
      align-items: flex-start;
      justify-content: flex-start;
      flex-wrap: nowrap;    
      flex-direction: row;}

/* colonne droite (cv) */
      .cv {
      width: 30rem;
      box-sizing: border-box;
      text-align: left;      
      margin: 0;
      }

      
      


      .l1 { 
        display: block; 
        margin-left: 0em; 
        color: #E0D3D3;
        text-decoration: underline;}
      .l2 { display: block; margin-left: 3em; color:#E0D3D3}
      .l3 { display: block; margin-left: 0em; color: #E0D3D3}
      .l4 { display: block; margin-left: 1em; color: #E0D3D3}
      .l5 { display: block; margin-left: 2em; font-style: italic; color:#E0D3D3}


.group:hover p { 
  color: #852B1E; 
  cursor: text; 
  transition: color 150ms ease;}

::-moz-selection {
  background:rgba(199, 185, 185,0.6) !important;
  color:#fff !important;
}
::selection {
  background:rgba(199, 185, 185,0.6) !important;
  color:#fff !important;
}

.contact a[href^="http"]:hover {
color: #E0D3D3; 
transition: color 150ms ease;
}

p {
word-spacing: clamp(-0.5rem, 0rem, 0rem);
}









/*TESTS*/