@media (max-width: 800px) {

  
 html, body {
  width: 100%;
  -webkit-overflow-scrolling: touch;
    }


/* conteneurs */
.planche, .suiteimages {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  align-items: flex-end;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  top:8vh;
}

/* chaque item fixe la hauteur (60vw) — largeur auto selon ratio */
.gallery-item, .image {
  flex: 0 0 auto;
  height: 90vw;       /* hauteur uniforme voulue */
  box-sizing: border-box;
}

/* image : plein affichage, aspect ratio préservé, pas de crop */
.gallery-item img,
.image img {
  display: block;
  width: auto;        /* largeur calculée depuis la hauteur pour garder ratio */
  height: 100%;       /* remplit la hauteur de l'item */
  max-width: none;    /* autorise largeur > 100% si nécessaire */
  object-fit: contain;/* ne recadre pas */
  object-position: center center;
}













	
      .nominfos-row { flex-direction: column; }
      .presentation, .cv { flex: 1 1 auto; width: 100%; }

      .word {
        font-size: 3vw;
      }

      .titre{
        font-size: 3vw;
        left: 3vw;
      }
        .nom {
          font-size: 3vw;
        }

        .lightbox-caption{
          font-size: 3vw;
        }
   
      .nommenu-row {          
        display: flex;
        flex-wrap: nowrap;     
        align-items: center;    
        gap: 0.5rem;           
      }

      .nommenu-row .titre,
      .nommenu-row .word {
        flex: 0 1 auto;        
        min-width: 0;         
      }

      .nominfos {
          flex-direction: column; 
          align-items: flex-start; 
          max-height: 100vh;
          overflow-y: auto;
          box-sizing: border-box;
          overflow-x:hidden;
          font-size: 3vw;
          
          }

      .francais, .anglais {
          box-sizing: border-box !important;
          width: 100%; 
          margin: 0; 
          max-width: 100%;
          }

      .contact {
          position: static; 
          top: 1.6rem; 
          
          z-index: 999;
          max-height: calc(100vh - 2rem); 
          overflow-y: hidden; 
          font-size: 3vw;
          }


      .nominfos {
          overflow: auto; 
          margin-bottom: 2rem;    
      }

      .fade-effect {
          position: fixed; 
          top: 0; 
          left: 0; 
          width: 100%; 
          height: 20rem;
          background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); 
          z-index: 998; 
          pointer-events: none; 
      }

      .nominfos .nom {
          color: transparent;
      }

      .texte, 
      .francais, 
      .anglais, 
      .justif, 
      .cv p, 
      .l1, .l2, .l3, .l4, .l5 
      .contact
      .nom
      .menucontact{ 
          color: #B09090 !important; 
          font-size: 3vw;
          max-width:100% !important
          box-sizing: border-box;
      }

      .menucontact .menu{
        font-size: 3vw;
         position: static;       
      display: inline-block;
      margin: 0;
      }

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

      h3{
      font-family: "EB Garamond", serif;
      color: #E0D3D3;
      font-variant-numeric: oldstyle-nums;
      width: 100%;
      }

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

      h2{
        font-size: 3vw;
        top:0.7rem;
        right: 3vw;
      }

      .nominfos-row{
        margin-top: 10rem;
      }

      .nominfos .presentation {
      width: 100%;
      margin-top: 0;
      }

/*PAGE ABOUT*/

      .page-about,
      .page-about html,
      .page-about body {
        overflow-x: hidden !important;
      }

      .page-about * {
        box-sizing: border-box;
      }


      .page-about img,
      .page-about iframe,
      .page-about video {
        max-width: 100% !important;
        height: auto !important;
        display: block;
      }


      .page-about > * {
        max-width: 100% !important;
        overflow-x: hidden !important;
      }


      .page-about {
        overflow-x: hidden !important;
        word-wrap: break-word;      
        overflow-wrap: break-word;  
        hyphens: auto;             
      }


      .page-about p,
      .page-about h1, .page-about h2, .page-about h3, .page-about h4,
      .page-about li, .page-about span, .page-about a {
        white-space: normal !important; 
        word-break: break-word !important; 
        overflow-wrap: anywhere !important; 
        hyphens: auto !important;
      }

      .page-about img, .page-about iframe, .page-about video {
        max-width: 100% !important;
        height: auto !important;
        display: block;
      }

      .page-about * {
        box-sizing: border-box;
        max-width: 100% !important;
      }


      .page-about .content { text-align: justify; }

      .page-about code, .page-about pre, .page-about .no-break {
        white-space: pre-wrap !important;
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
      }

      .page-about { overflow-x: hidden !important; }
      .page-about * { max-width: 100% !important; box-sizing: border-box; }
      .page-about html, .page-about body { width: 100% !important; overflow-x: hidden !important; }

      .page-about { overflow-x: hidden !important; width: 100% !important; }
      .page-about * { box-sizing: border-box !important; max-width: 100% !important; }

      .page-about h1,
      .page-about .centree,
      .page-about .justif,
      .page-about .l1, .page-about .l2, .page-about .l3, .page-about .l4, .page-about .l5 {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        hyphens: auto !important;
        max-width: 100% !important;
      }

      .page-about .centree, .page-about p {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }