@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,700;1,400&display=swap');

/* --- GRILLE & MISE EN PAGE --- */
.residence-content {
    max-width: 1000px; /* Légèrement élargi pour le confort */
    margin: 0 auto;
    padding: 20px;
}




/* Force la zone à disparaître quand l'audio joue */
.zone-audio.joue {
    opacity: 0 !important;
    pointer-events: none !important; /* Permet de cliquer à travers */
    visibility: hidden !important;
}

.zone-interactive {
    cursor: url('images-seigneurie/icones/loupe.png'), help; /* Si vous avez une icône de loupe */
}
.bloc-residence {
    background: #f4e1c1;
    border: 1px solid #d2b48c;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0; /* Nettoyage du padding */
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}

.media-wrapper {
    position: relative;
    width: 100%;
    overflow: visible !important; /* Autorise les lignes à dépasser de l'image ! */
}
.ma-phrase-centree {
    display: block;      /* Force le paragraphe à prendre toute la largeur */
    text-align: center;  /* Centre le texte à l'intérieur */
    width: 100%;         /* S'assure qu'il occupe tout l'espace */
    margin: 10px 0;      /* Ajoute un petit espace au-dessus et en dessous */
}

/* Ajustement des images pour ne pas les écraser */
.img-residence, .video-residence {
    width: 100%;
    height: 300px; /* Hauteur fixe pour l'alignement */
    object-fit: cover;
    display: block;
}



.texte-accompagnement {
    padding: 15px;
    font-size: 1.0em;
    text-align: justify;
    font-family: avenir, 'EB Garamond', serif; /* Plus cohérent avec votre thème */
    line-height: 1.4;
    color: #3e2723;
}

/* --- ZONES INTERACTIVES (OPTIMISÉES IPAD) --- */
.zone-interactive {
    position: absolute;
    cursor: help;
    background-color: transparent;
    z-index: 20;
    transition: background-color 0.3s;
}

/* On ajoute l'état .actif pour le clic iPad */
.zone-interactive:hover, 
.zone-interactive.actif {
    background-color: hsl(60, 100%, 90%, 0.3);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

/* --- OBJETS PARLANTS & ANIMATIONS --- */
.objet-parlant {
    position: absolute;
    background: rgba(141, 110, 99, 0.9);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 30;
    animation: battement 2s infinite;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

@keyframes battement {
    0% { transform: scale(1); box-shadow: 0 0 0px rgba(141, 110, 99, 0.4); }
    50% { transform: scale(1.1); box-shadow: 0 0 15px rgba(141, 110, 99, 0.8); }
    100% { transform: scale(1); box-shadow: 0 0 0px rgba(141, 110, 99, 0.4); }
}

/* --- POP-UPS GÉNÉRIQUES (UN SEUL STYLE POUR TOUT) --- */
.pop-up-secret {
    display: none; 
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent; /* Fond assombri pour focus */
    justify-content: center;
    align-items: center;
}

.pop-up-contenu {
    background-color: #f4e1c1;
    padding: 10px;
    border: 3px solid #5d4037;
    width: 50%;
    max-width: 600px; /* Taille idéale pour lecture */
    border-radius: 8px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    animation: apparitionCoffre 0.4s ease-out;
    overflow: hidden;
    max-height: 90vh; /* Empêche la boîte de sortir de l'écran */
    display: flex; 
    flex-direction: column;
}

.pop-up-contenu h3 {
    margin-top: 0;          /* Supprime l'espace au-dessus du titre */
    margin-bottom: 10px;    /* Réduit l'espace entre le titre et le texte */
    line-height: 1.1;       /* Resserre les lignes si le titre est long */
    padding-top: 0;         /* S'assure qu'aucun espace interne ne pousse le texte */
}

/* Style spécial pour les pop-ups VIDÉO (plus étroits) */
.pop-up-video-style .pop-up-contenu {
    max-width: 450px;
    padding: 10px;
}
/* La grille de base (toujours 2 colonnes sur PC) */
.grille-residence {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 20px;
}

/* LA CLASSE MAGIQUE : à ajouter manuellement au besoin */
.bloc-residence.large {
    grid-column: span 2; /* Force l'élément à occuper les 2 colonnes */
}

/* Ajustement pour l'image quand elle est seule sur sa ligne */
.bloc-residence.large .img-residence {
    height: auto;
    max-height: 600px; /* On lui donne plus de place en hauteur */
}

.texte-scrollable {
    
    overflow-y: auto;
    padding: 15px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    font-size: 1.15em;
    line-height: 1.5;
    flex-grow: 1; /* Dit au texte de prendre tout l'espace restant */
    min-height: 0; /* Autorise la boîte à rétrécir pour forcer le scroll ! */
    padding-right: 15px;
    
    min-height: 0;

}

.texte-scrollable p:first-child {
    margin-top: 0; /* Élimine l'espace entre le h3 et le premier paragraphe */
}

/* --- ENCADRÉ HISTORIQUE --- */
.encadre-historique {
    background: rgba(141, 110, 99, 0.1);
    padding: 15px;
    border-left: 4px solid #8d6e63;
    margin: 20px 0;
}

.encadre-historique ul {
    list-style-type: none;
    padding: 0;
    columns: 2;
    column-gap: 20px;
}

.encadre-historique li {
    font-size: 0.9em;
    margin-bottom: 5px;
    break-inside: avoid; /* Évite de couper un mot en deux colonnes */
}

.video-container {
    width: 70%;           /* Réduit la largeur à 70% du pop-up */
    margin: 2px auto;    /* Le "auto" centre la vidéo horizontalement */
    background: #000;     /* Garde un fond noir propre derrière */
    border-radius: 1px;
    line-height: 0;       /* Évite un petit espace blanc sous la vidéo */
}

video {
    width: 100%;          /* La vidéo remplit son conteneur de 70% */
    display: block;
}


/* --- STYLE SPÉCIFIQUE POUR LE POP-UP VIDÉO --- */

/* On réduit la largeur du cadre blanc (le contenu) */

/* On rend le texte sous la vidéo tout petit, mince et compact */
.pop-up-format-video .texte-scrollable p,
.pop-up-format-video p {
    font-size: 0.9em !important;    /* Police beaucoup plus petite */
    font-weight: 400 !important;    /* Police mince/normale (non grasse) */
    line-height: 1.2 !important;    /* Rapproche les lignes entre elles */
    margin: 10px 15px 10px 15px !important;
    text-align: justify !important;  /* Centre le texte sous la vidéo pour faire "légende" */
}



.pop-up-format-video .pop-up-contenu {
    max-width: 350px;  /* Réduit la largeur totale du cadre */
    width: 85%;        /* Pour l'iPad en mode portrait */
    padding: 3px;     /* Espace entre la vidéo et le bord du cadre */
}

/* On s'assure que la vidéo prend toute la place dans ce petit cadre */
.pop-up-format-video .video-container {
    width: 100%;
    margin: 3px;         /* Colle la vidéo aux bords intérieurs si désiré */
}

/* On réduit l'espace sous le titre pour que ce soit plus compact */
.pop-up-format-video h3 {
    font-size: 1.0em;
    margin-bottom: 3px;
}

/* --- STYLE POUR L'APPARITION D'IMAGE + TEXTE À 80% --- */
/* --- NOUVEAU STYLE : IMAGE SIMPLE SUPERPOSÉE --- */

/* L'image qui va apparaître */
.overlay-simple {
    position: absolute;
    z-index: 50; /* Passe devant tout */
    
    /* Centrage parfait au milieu de la zone */
    top: 50%;
    left: 50%;
    /* On la prépare légèrement plus petite pour l'effet "pop" */
    transform: translate(-50%, -50%) scale(0.9); 
    
    /* TAILLE : Elle prendra 85% de la largeur disponible */
    width: 85%; 
    height: auto; /* Sa hauteur s'ajustera toute seule pour ne pas la déformer */
    
    /* ESTHÉTIQUE : Juste une belle ombre, pas de cadre brun */
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
    border-radius: 4px; /* Coins légèrement adoucis */
    
    /* ETAT INVISIBLE PAR DÉFAUT */
    opacity: 0;
    pointer-events: none; /* Permet de cliquer à travers quand elle n'est pas là */
    
    /* Animation fluide */
    transition: all 0.4s ease-out;
}

/* LE MÉCANISME : Quand on survole le déclencheur, l'image apparaît */
/* Le '+' veut dire : "L'image .overlay-simple qui est JUSTE APRÈS le trigger" */
.trigger-80:hover + .overlay-simple,
.trigger-80.actif + .overlay-simple {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1); /* Apparaît à sa taille normale */
}


/* --- ADAPTATION MOBILE / IPAD --- */
@media (max-width: 768px) {
    .grille-residence {
        grid-template-columns: 1fr; /* 1 seule colonne sur petit écran */
    }
    
    /* LA CORRECTION EST ICI : 
       On force TOUTES les sections (et pas juste la première) à rester sagement dans 1 seule colonne */
    .grille-residence .bloc-residence,
    .bloc-residence.large {
        grid-column: span 1 !important; 
    }
    
    .img-residence, .video-residence {
        height: auto;
    }
    .pop-up-contenu {
        width: 95%;
        padding: 15px;
    }
}

/* --- ANIMATION BATTEMENT SEULEMENT --- */

@keyframes battement-doux {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); } /* Grossit légèrement (20%) */
    100% { transform: scale(1); }
}

.icone-video {
    /* Ton animation actuelle (on la garde !) */
    animation: battement-doux 2s infinite ease-in-out;
    
    /* --- NOUVEAUTÉS : POSITION ET TAILLE --- */
    position: absolute; /* Sort l'icône du texte pour la placer sur l'image */
    bottom: 15px;       /* La pousse dans le coin inférieur (en bas) */
    left: 15px;         /* La pousse dans le coin gauche */
    z-index: 50;        /* S'assure qu'elle est bien par-dessus l'image */
    
    font-size: 3.5em;   /* La rend beaucoup plus grosse (ajuste le chiffre au besoin) */
    cursor: pointer;    /* Affiche la petite main au survol */
    
    /* Une petite ombre noire derrière le clapet pour qu'il reste visible 
       même si l'image en dessous est très claire (comme le ciel ou la neige) */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); 
}

/* --- STYLE POUR LE BOUTON DE TÉLÉCHARGEMENT PDF --- */

.bouton-pdf {
    display: inline-block;
    background-color: #5d4037; /* Le beau brun foncé de ton thème */
    color: #fdfbf7 !important; /* Texte clair (le !important force la couleur sur les liens) */
    padding: 10px 20px;
    text-decoration: none; /* Enlève la ligne sous le lien */
    border-radius: 5px;
    font-family: 'EB Garamond', serif;
    font-size: 1.1em;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: background-color 0.3s, transform 0.2s; /* Animation douce */
}

/* L'effet quand on passe la souris dessus */
.bouton-pdf:hover {
    background-color: #8d6e63; /* Devient un peu plus clair */
    transform: scale(1.05);    /* Grossit très légèrement */
}


/* ==========================================================================
   AGRANDISSEMENT DU TEXTE (Pour tous les écrans : PC, iPad, Mobile)
   ========================================================================== */



/* Augmente le texte à l'intérieur de tes fenêtres pop-ups */
.texte-scrollable p,
.texte-scrollable li {
    font-size: 1.15em;
    line-height: 1.5;
}

/* Augmente le texte des légendes sous les vidéos */
.legende-video, #legende-video {
    font-size: 1.15em;
    line-height: 1.5;
}