/* Reset et Base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@font-face {
font-family: "WTGaramono";
src: url('../fonts/WTGaramono-Regular.woff') format('woff'),
      url('../fonts/WTGaramono-Regular.woff2') format('woff2'),
      url('../fonts/WTGaramono-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "WTGaramono";
src: url('../fonts/WTGaramono-Italic.woff') format('woff'),
    url('../fonts/WTGaramono-Italic.woff2') format('woff2'),
    url('../fonts/WTGaramono-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}

body {
    font-family: "WTGaramono", Monospace;
    font-size: 10.5pt;
    color: #000;
    background-color: #fff;
    overflow-x: hidden; /* Évite le scroll horizontal global */
}

hr {
  border: none;
  height: 1px;
  color: #ccc;
  background-color: #ccc;  /* Modern Browsers */
  margin-bottom: 16px;
}

p{
  padding-bottom: 12pt;
}

p:last-child{
  padding-block-end: inherit;
}

a {
    text-decoration: none;
    color: #000;
}
a:hover {
    text-decoration: underline;
}
a:visited{
  text-decoration:none;
}

.imghome{
  position: absolute;
  top: 50%;
  left: 41%;
  transform: translate(-50%, -50%);
  max-height: 70%;
  filter: grayscale(100%);
  opacity: 0.3;
}

/* --- MENU LATÉRAL (Fixe) --- */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    height: 100vh;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligne les items depuis le haut */
    margin: 20px 20px 20px 10px;
}

.menu-item {
    width: 100%;
    text-align: center;
    /*justify-content: center;*/
    /*text-align-last: center;*/
    color: #ccc; /* Gris clair pour inactif */
    display: block;
}

.menu-item.active {
    color: #000;
    /*padding-left:26px;*/
}

.home {
  text-align: center;
  padding-bottom: 16px;
}

/* --- CONTENU PRINCIPAL --- */

.main-wrapper {
    margin-left: 260px; /* 200px menu + 40px marge */
    width: calc(100% - 260px);
    position: relative;
    min-height: 100vh;
}

.content-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    /* Important : permet au scroll global de fonctionner */
    min-height: 97vh;
    position: relative;
}

/* --- COLONNE GAUCHE (TEXTE) : DÉFILANTE --- */
.col-text {
    width: 30%;
    /* C'est ici que la magie opère pour le scroll indépendant */
    position: relative;
    margin: 20px 0;
    /* La hauteur doit être celle de la fenêtre pour que le scroll interne fonctionne
       SI le contenu est plus long.
       Mais comme vous voulez scroller "n'importe où dans la page",
       on laisse le scroll global (body) agir, et on rend la galerie fixe.

       CORRECTION DE STRATÉGIE :
       Pour que le texte défile "peu importe où l'on scroll" et que la galerie reste fixe :
       1. Le BODY gère le scroll global (hauteur du texte).
       2. La Galerie est en FIXED ou STICKY pour rester visible.
       3. Le texte suit le flux normal.
    */
    position: relative;
    z-index: 2; /* Le texte passe AU-DESSUS de la galerie si besoin, ou l'inverse selon goût */
}

/* --- COLONNE DROITE (GALERIE) : FIXE --- */
.col-gallery {
    width: 54%;
    margin: 0;
    position: fixed; /* FIXE : reste toujours à l'écran */
    top: 0;
    right: 0;
    height: 100vh; /* Prend toute la hauteur de l'écran */
    z-index: 1; /* Derrière le texte si chevauchement, ou devant selon désir */

    /* Centrage du contenu dans la zone fixe */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Cache les images qui dépassent du cadre fixe */
}

/* --- GALERIE SUPERPOSÉE & CENTRÉE --- */
.gallery-stack {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.gallery-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    opacity: 0;
    padding-left:20px;

    transition: opacity 0.7s ease;

    pointer-events: none;
}

.gallery-image.active {
    opacity: 1;
}

.gallery-image.is-visible {
    opacity: 1;
}

.gallery-image.is-current {
    pointer-events: auto;
    cursor: pointer;
}

/* Galerie Nav */

.gallery-nav {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    z-index: 10;
}

.gallery-prev {
    left: 0;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text x='50%' y='50%' font-size='18' dominant-baseline='middle' text-anchor='middle' fill='black'>&lt;</text></svg>") 16 16, e-resize;
}

.gallery-next {
    right: 0;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text x='50%' y='50%' font-size='18' dominant-baseline='middle' text-anchor='middle' fill='black'>&gt;</text></svg>") 16 16, e-resize;
}

/* Galerie legendes */

.gallery-caption {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translate(-50%, -50%);
    writing-mode: sideways-lr;
    z-index: 20;
}

/* Bloc de contenu injecté dans le menu */
.mobile-only-content-wrapper {
    display: none; /* Caché par défaut (Desktop) */
    width: 100%;
    flex-direction: column;
}

/* Colonnes dans le contexte mobile (dans le menu) */
.mobile-only-content-wrapper .mobile-col {
    width: 100%;
    margin-left: 0 !important; /* Annule la marge de 150px sur mobile */
}

/* --- STYLES SPÉCIFIQUES POUR LA PAGE INFO --- */

/* 1. Masquer la galerie fixe uniquement sur la page info */
body .info-wrapper .col-gallery {
    display: none !important;
}

/* 2. Ajuster le conteneur principal pour prendre toute la largeur disponible */
.info-wrapper {
    width: calc(100% + 240px);
    margin-left: 0px;
    padding-top: 20px;
    min-height: 100vh;
    background-color: #fff;
}

/* 3. Layout en deux colonnes égales */
.info-page-layout {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 100px; /* Espace entre les deux colonnes */
}

.info-col {
    width: 50%; /* 50% chacun */
}

.info-text p {
    margin-bottom: 15px;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 20px 0;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-weight: bold;
    font-size: 10.5pt;
}

.form-group input {
    font-family: "WTGaramono", Monospace;
    font-size: 10.5pt;
    color: #000;
    padding: 0;
    border: 0px solid #ccc;
    background-color: #fff;
    outline: none;
}

.form-group input:focus {
    background-color: #f9f9f9;
    border-width: 2px;
}

.submit-btn {
    font-family: "WTGaramono", Monospace;
    font-size: 10.5pt;
    color: #000;
    background-color: #fff;
    text-decoration: underline;
    border: none;
    cursor: pointer;
    align-self: flex-start;
    transition: background-color 0.3s;
}

.submit-btn:hover {
    background-color: #fff;
}


.letter {
    position: fixed;
    font-family: "WTGaramono", Monospace;
    font-size: 10.5pt;
    color: #000;
    pointer-events: none;
    user-select: none;
    white-space: pre;
    z-index: 9999;

    left: 0;
    top: 0;

    /* NETTETÉ MAXIMALE */
    filter: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
    will-change: transform, opacity;

    /* L'animation gère le déplacement vers la cible ET la disparition */
    /* Durée : 0.8s pour un regroupement rapide et dynamique */
    animation: flyToCursor 0.8s forwards ease-out;

    opacity: 0; /* Commence invisible, apparaît vite */
}

@keyframes flyToCursor {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: var(--start-opacity, 1); /* Utilise l'opacité calculée par JS */
    }
    20% {
        opacity: 1; /* Devient pleinement noir/net en chemin */
        transform: translate(calc(-50% + (var(--tx) * 0.2)), calc(-50% + (var(--ty) * 0.2))) scale(0.8);
    }
    100% {
        transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1);
        opacity: 0; /* Disparaît à l'arrivée */
    }
}

/* --- RESPONSIVE (Mobile) --- */
@media (max-width: 768px) {
  .letter{
    display: none;
  }

  .sidebar {
        position: relative;
        width: 100%;
        height: auto;
        border-right: none;
        margin: 20px 0 0 0;
    }

    .menu-item {
      width:220px;
    }

    .main-wrapper {
        display: none; /* Caché sur mobile, le contenu est dans le menu */
        margin-left: 0;
        width: 100%;
    }

    .content-container {
        flex-direction: column;
    }

    .col-text, .col-gallery {
        width: 100%;
        margin-left: 0;
        margin:0;
        position: relative;
    }

    .col-gallery{
      height: 60vh; /* Hauteur fixe raisonnable pour la galerie mobile */
      margin-bottom: 0;
      margin-top: 20px;
    }

    .gallery-stack {
        height: 100%;
    }

    .gallery-image{
      /*padding-left: 0;
      max-width: 100%;  Pleine largeur */
      max-height: 100%; /* Pleine hauteur du conteneur */
    /*  width: auto;
      height: auto;*/
      object-fit: contain; /* S'assure que l'image ne est pas déformée */
    }
    .gallery-caption {
      left: 10px;
    }

    /* Logique d'intercalage :
       Le texte et la galerie doivent être entre le menu-item actif et le suivant.
       Cela nécessite une structure HTML spécifique où le contenu est INSÉRÉ
       dans la liste du menu ou juste après l'item actif.

       Cependant, avec la structure demandée (fichiers séparés includes),
       le plus simple est de modifier l'ordre d'affichage visuel ou la structure HTML.

       Pour respecter strictement "intercalés entre le menu-item actif et le suivant" :
       Il faut que le contenu (texte + gallery) soit physiquement dans le DOM
       entre ces deux éléments <a> du menu.

       Nous allons adapter le PHP pour inclure le contenu au bon endroit.
       Le CSS ci-dessous assure juste que sur mobile, ça prend toute la largeur.
    */
    /* Read More Logic */
    .title-content {
        overflow: hidden;
        position: relative;
        margin-top: 20px;
        padding: 0px 76px;
    }
    .text-content {
        overflow: hidden;
        position: relative;
        padding: 0px 76px;
    }

    .text-content.expanded {
        max-height: none;
        overflow: visible;
    }

    .read-more-btn {
        display: inline-block;
        background: none;
        border: none;
        color: #000;
        font-family: "WTGaramono", Monospace;
        font-size: 10.5pt;
        text-decoration: underline;
        cursor: pointer;
        padding: 10px 75px 20px 75px;
    }

    .read-more-btn:hover {
        text-decoration: underline;
    }

    /* Cacher le bouton si le contenu est court (optionnel, géré par JS souvent) */

    .mobile-only-content-wrapper {
        display: flex; /* Visible sur mobile */
        width: 100%;
    }

    .mobile-only-content-wrapper .mobile-col {
        width: 100%;
    }


    /* --- CORRECTION SPÉCIALE POUR LA PAGE INFO --- */

        /* 1. On réaffiche le .main-wrapper uniquement pour la page info */
        body.info-page .main-wrapper {
            display: block !important;
            margin-left: 0;
            width: 100%;
            padding-top: 0;
        }

        /* 2. On s'assure que le menu redevient normal (pas d'injection de contenu vide) */
        body.info-page .mobile-only-content-wrapper {
            display: none !important;
        }

        /* 3. On remet le menu en relatif pour qu'il pousse le contenu vers le bas */
        body.info-page .sidebar {
            position: relative;
            width: 100%;
            height: auto;
        }

        /* 4. On s'assure que la galerie (qui est cachée en desktop pour info) reste cachée */
        body.info-page .col-gallery {
            display: none;
        }

        /* 5. Adaptation de la grille info pour mobile */
        body.info-page .info-page-layout {
            flex-direction: column;
            gap: 12px;
            padding: 20px;
        }

        body.info-page .info-col {
            width: 100%;
        }
        body.info-page .info-text{
          border-bottom: 1px solid #ccc;
        }
}

@media (min-width: 769px) {
    .main-wrapper {
        display: block;
    }
}