/*

#####################Demande GPT du 12/10/2026 -- https://chatgpt.com/c/6acc7ed4-4f8c-83eb-ae82-445329f35a90

==========================================================
   AfficheTete.css   ===>>> M_AfficheTetes5_GPT_CSS.css

   Présentation des galeries photos et vidéos

   - Responsive avec CSS Grid
   - Sans Bootstrap
   - Cartes avec image, titre et sous-titre
   - Compteurs photos et vidéos
   - Lien vers la galerie
   - Bouton Localisation indépendant
   - Zoom léger sur les images
   - Effets au survol

   IMPORTANT :
   La carte contient deux zones indépendantes :
     .galerie-lien         : ouverture de la galerie
     .galerie-localisation : ouverture de la localisation

   Version utilisant Flexbox dans les cartes
   et CSS Grid pour leur disposition.
   ========================================================== */
                /*
                Les principaux réglages que vous pourrez modifier
                Ce que vous voulez ajuster	Propriété CSS
                Largeur minimale d'une carte	250px dans minmax()
                Espacement entre les cartes	.galeries → gap: 24px
                Proportions des images	aspect-ratio: 4 / 3
                Intensité du zoom	scale(1.05)
                Vitesse du zoom	transition: transform 0.4s
                Taille du titre	.galerie-titre → font-size
                Taille du sous-titre	.galerie-soustitre → font-size
                Couleur du bouton	.galerie-localisation → background
                Arrondi des cartes	.galerie-carte → border-radius
                */

/* ==========================================================
   1. GRILLE PRINCIPALE DES GALERIES
   ========================================================== */

/*
   auto-fit :
     Adapte automatiquement le nombre de colonnes.

   minmax :
     Largeur minimale souhaitée de 250px.
     Chaque colonne peut s'agrandir pour remplir
     l'espace disponible.

   max-width :
     Limite la largeur globale de la grille.

   gap :
     Espacement entre les cartes.
*/

/* ############################################## NOUVEAU avec réduction des CARTES ###########################################
Les 5 réglages qui influencent le plus la taille
    Paramètre	Ancien	Nouveau	Effet
    Largeur minimale	250px	210px	Permet davantage de colonnes
    Proportions des images	4/3	3/2	Réduit leur hauteur
    Espacement des cartes	24px	15px	Resserre la grille
    Padding du contenu	15px	10px	Réduit la hauteur des cartes
    Taille du titre	1.2rem	1.05rem	Texte plus compact
*/


/* ==========================================================
   AfficheTete.css

   VERSION COMPACTE - AVEC REPÉRAGE DES MODIFICATIONS

   MODIFIÉ = valeur différente de la version initiale

   Fonctionnalités conservées :
   - Responsive sans Bootstrap
   - Cartes cliquables vers les galeries
   - Bouton Localisation indépendant
   - Compteurs alignés en bas des cartes
   - Zoom léger sur les images
   - Effets au survol
   - Image de remplacement si photo absente
   ========================================================== */


/* ==========================================================
   1. GRILLE PRINCIPALE DES GALERIES
   ========================================================== */

.galeries {
    display: grid;

    grid-template-columns: repeat(
        auto-fill,                       /* MODIFIÉ : auto-fit -> auto-fill */
        minmax(min(100%, 210px), 1fr)
        /* MODIFIÉ : 250px -> 210px
           Largeur minimale souhaitée des cartes.
           Une valeur plus petite permet davantage
           de colonnes si l'espace est suffisant. */
    );

    gap: 15px;             /* MODIFIÉ : 24px -> 15px */
                           /* Espace entre les cartes */

    max-width: 1500px;     /* MODIFIÉ : largeur globale 1200px -> 1500px*/
    margin: 20px auto;     /* MODIFIÉ : 30px -> 20px */
    padding: 0 10px;       /* MODIFIÉ : 0 15px -> 0 10px */
}


/* ==========================================================
   2. CARTE GALERIE
   ========================================================== */

.galerie-carte {
    display: flex;
    flex-direction: column;

    background: #ffffff;

    border: 1px solid #e5e5e5;
    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 3px 12px rgba(0,0,0,0.12);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

/* Légère élévation de la carte au survol ==>> zomom plus important*/

.galerie-carte:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    transform: scale(1.2);
}


/* ==========================================================
   3. LIEN PRINCIPAL VERS LA GALERIE
   ========================================================== */

/*
   Le lien contient :
   - Image
   - Titre
   - Sous-titre
   - Compteurs

   Le bouton Localisation est en dehors du lien.
*/

.galerie-lien {
    display: flex;
    flex-direction: column;
    flex: 1;

    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Focus clavier */

.galerie-lien:focus-visible {
    outline: 3px solid #1479b8;
    outline-offset: -3px;
}


/* ==========================================================
   4. IMAGE DE PRÉSENTATION
   ========================================================== */

.galerie-carte img {
    display: block;

    width: 100%;

    aspect-ratio: 4/ 3;
    /* MODIFIÉ : 4/3 -> 3/2
       Image moins haute pour une même largeur.
       object-fit: cover peut recadrer l'image. */

    object-fit: cover;

    transition: transform 0.4s ease;
}

/* Zoom de 5 % au survol : INCHANGÉ */
        /*
        .galerie-carte:hover img {
            transform: scale(1.05);
        }
        */


/* ==========================================================
   5. IMAGE DE PRÉSENTATION ABSENTE
   ========================================================== */

/*
   Si l'image 001-AMPtete-XX.jpg n'existe pas,
   affichage du bloc de remplacement.
*/

.galerie-image-absente {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    width: 100%;

    aspect-ratio: 4 / 3;
    /* MODIFIÉ : 4/3 -> 3/2
       Même proportion que les images présentes. */

    gap: 10px;

    background: #edf2f6;
    color: #647c90;

    font-size: 0.95rem;

    transition: background 0.3s ease;
}

.galerie-image-icone {
    font-size: 3rem;
    line-height: 1;
    opacity: 0.65;
}

.galerie-carte:hover .galerie-image-absente {
    background: #dfeaf2;
}


/* ==========================================================
   6. CONTENU DE LA CARTE
   ========================================================== */

/*
   Contient :
   - Titre
   - Sous-titre
   - Compteurs

   Flexbox permet de pousser les compteurs
   vers le bas de la zone.
*/

.galerie-contenu {
    display: flex;
    flex-direction: column;
    flex: 1;

    padding: 10px;       /* MODIFIÉ : 15px -> 10px */
    text-align: center;
}


/* ==========================================================
   7. TITRE DE LA GALERIE
   ========================================================== */

.galerie-titre {
    font-size: 1.00rem;  /* MODIFIÉ : 1.2rem -> 1.05rem */
    font-weight: 600;

    color: #244b70;

    margin: 0 0 4px;     /* MODIFIÉ : 8px -> 6px */
}

/* Couleur au survol */

.galerie-carte:hover .galerie-titre {
    color: #1479b8;
}


/* ==========================================================
   8. SOUS-TITRE DE LA GALERIE
   ========================================================== */

.galerie-soustitre {
    font-size: 0.80rem;  /* MODIFIÉ : 0.95rem -> 0.85rem */
    font-style: italic;

    color: #666666;

    margin: 0 0 6px;     /* MODIFIÉ : 12px -> 8px */
}


/* ==========================================================
   9. COMPTEURS PHOTOS ET VIDÉOS
   ========================================================== */

/*
   Les compteurs restent alignés en bas
   de la zone texte, même si les titres
   ou sous-titres sont de longueurs différentes.
*/

.galerie-compteurs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 10px;           /* MODIFIÉ : 15px -> 10px */

    margin-top: auto;    /* INCHANGÉ : alignement en bas */
    padding-top: 6px;   /* MODIFIÉ : 12px -> 10px */

    font-size: 0.8rem;   /* MODIFIÉ : 0.85rem -> 0.8rem */
    color: #777777;
}


/* ==========================================================
   10. ZONE DU BOUTON LOCALISATION
   ========================================================== */

/*
   Cette zone est indépendante du lien principal.

   Les boutons restent alignés en bas
   de toutes les cartes.
*/

.galerie-actions {
    padding: 0 10px 6px;
    /* MODIFIÉ : 0 15px 15px -> 0 10px 10px */

    text-align: center;
}


/* ==========================================================
   11. BOUTON LOCALISATION
   ========================================================== */

.galerie-localisation {
    display: inline-block;

    padding: 6px 12px;
    /* MODIFIÉ : 7px 14px -> 6px 12px */

    background: #e8f2fa;
    color: #244b70;

    border: 1px solid #b7d4e8;
    border-radius: 6px;

    font-size: 0.8rem;
    /* MODIFIÉ : 0.85rem -> 0.8rem */

    font-weight: 500;
    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

/* Survol du bouton */
.galerie-localisation:hover {
    background: #cce4f5;
    color: #123e60;
}

/* Focus clavier */
.galerie-localisation:focus-visible {
    outline: 3px solid #1479b8;
    outline-offset: 3px;
}


/* ==========================================================
   12. TOTAUX DU THÈME
   ========================================================== */

/*
   Totaux généraux affichés sous la grille.
   Valeurs conservées de la version initiale.
*/

.galeries-totaux {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 30px;

    max-width: 1200px;
    margin: 30px auto;
    padding: 20px 15px;

    border-top: 1px solid #dddddd;

    font-size: 1.0rem;
    font-weight: 400;

    color: #244b70;
}


/* ==========================================================
   13. ADAPTATION AUX PETITS ÉCRANS
   ========================================================== */

/*
   Sur smartphone, les cartes restent
   adaptées automatiquement à la largeur.

   Les valeurs ont été harmonisées avec
   les nouveaux réglages compacts.
*/

@media (max-width: 600px) {

    .galeries {
        gap: 12px;          /* MODIFIÉ : 16px -> 12px */
        margin: 15px auto;  /* MODIFIÉ : 20px -> 15px */
    }

    .galerie-contenu {
        padding: 10px;      /* MODIFIÉ : 12px -> 10px */
    }

    .galerie-titre {
        font-size: 1.05rem; /* MODIFIÉ : 1.1rem -> 1.05rem */
    }

    .galerie-soustitre {
        font-size: 0.85rem; /* MODIFIÉ : 0.9rem -> 0.85rem */
    }

    .galerie-compteurs {
        font-size: 0.8rem;  /* INCHANGÉ */
        gap: 10px;          /* INCHANGÉ */
    }

    .galeries-totaux {
        gap: 15px;
        font-size: 1rem;
    }

    .galerie-localisation {
        padding: 10px 16px;
        /* INCHANGÉ : bouton plus facile
           à utiliser sur écran tactile */
    }
}


/* ==========================================================
   14. ACCESSIBILITÉ
   ========================================================== */

/*
   Respect des préférences utilisateur
   concernant la réduction des animations.
*/

@media (prefers-reduced-motion: reduce) {

    .galerie-carte,
    .galerie-carte img,
    .galerie-localisation,
    .galerie-image-absente {
        transition: none;
    }

    .galerie-carte:hover {
        transform: none;
    }

    .galerie-carte:hover img {
        transform: none;
    }
}

/* ###################### ajout pour gestion des vidéos ################################################ 17/10/26

/* ==========================================================
   CARTES VIDÉO
   ========================================================== */

/* Bouton occupant toute la largeur de la carte */

.video-carte-bouton {
    position: relative;
    display: block;

    width: 100%;
    padding: 0;

    border: 0;
    background: transparent;

    cursor: pointer;
    overflow: hidden;
}

/* Miniature vidéo */

.video-carte-bouton img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;  /* MODIFIÉ : 3/2 -> 16/9 */
    object-fit: contain;   /* MODIFIÉ : cover -> contain */
    background: #e8edf2;
}

/* Icône de lecture au centre */
                /*
                .play-icon1 {
                    position: absolute;
                    top: 50%;
                    left: 50%;

                    transform: translate(-50%, -50%);

                    display: flex;
                    align-items: center;
                    justify-content: center;

                    width: 54px;
                    height: 54px;

                    border-radius: 50%;

                    background: rgba(0, 0, 0, 0.60);
                    color: #ffffff;

                    font-size: 1.5rem;

                    pointer-events: none;

                    transition: background 0.2s ease;
                }

                .video-carte-bouton:hover .play-icon {
                    background: rgba(20, 121, 184, 0.90);
                }
                */


/* ==========================================================
   ICÔNE DE LECTURE - EN HAUT À DROITE
   ========================================================== */


/* ==================================================
   ICÔNE PLAY DES CARTES VIDÉO
   Protection contre les styles Bootstrap
   ================================================== */

.video-carte-bouton > .play-icon {
    position: absolute;

    top: 8px;
    right: 8px;
    bottom: auto;
    left: auto;

    transform: none;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background-color: rgba(0, 0, 0, 0.60);
    color: #ffffff;

    font-size: 0.9rem;
    font-weight: normal;
    line-height: 1;
    font-family: Arial, sans-serif;/* Uniformise le symbole ▶, même avec Bootstrap */

    opacity: 1;
    pointer-events: none;

    transition: background-color 0.2s ease;
}

/* Effet au survol */

.video-carte-bouton:hover > .play-icon {
    background-color: rgba(20, 121, 184, 0.90);
}




/* ==========================================================
   OVERLAY VIDÉO
   ========================================================== */

.video-overlay {
    position: fixed;
    inset: 0;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.88);

    z-index: 9999;
}

.video-overlay.show {
    display: flex;
}

.video-overlay video {
    display: block;

    max-width: 95vw;
    max-height: 90vh;

    width: auto;
    height: auto;

    background: #000000;
    border-radius: 8px;
}


/*  ajout pour lecture metadonnées des -MIN */

/* ==========================================================
   CONTENU SOUS LA MINIATURE VIDÉO
   ========================================================== */

.video-contenu {
    display: flex;
    flex-direction: column;
    flex: 1;

    padding: 10px;
    text-align: center;
}


/* Légende issue de ImageDescription */

.video-legende {
    margin: 0 0 8px;

    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;

    color: #244b70;
}


/* Lien extérieur facultatif */

.video-lien-exterieur {
    display: inline-block;
    align-self: center;

    margin-top: auto;
    padding: 6px 10px;

    border: 1px solid #b7d4e8;
    border-radius: 6px;

    background: #e8f2fa;
    color: #244b70;

    font-size: 0.8rem;
    text-decoration: none;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.video-lien-exterieur:hover {
    background: #cce4f5;
    color: #123e60;
}

.video-lien-exterieur:focus-visible {
    outline: 3px solid #1479b8;
    outline-offset: 3px;
}

/*+++++++++++++++++++++++++++++++++ ajout pour CARROUSEL GPT sans bootstrap ++++++++++++++++++++++++++++

/* ==========================================================
   CARROUSEL SIMPLE - SANS BOOTSTRAP
   ========================================================== */

.carrousel-simple {
    position: relative;

    width: 75%;             /* Équivalent de Bootstrap w-75 */
    max-width: 1200px;

    height: 50vh;           /* Hauteur de l'ancien carrousel */

    margin: 20px auto;

    overflow: hidden;

    background: transparent;
}


/* Images superposées */

.carrousel-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;    /* Image entière, sans recadrage */

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}


/* Image visible */

.carrousel-image.active {
    opacity: 1;
    visibility: visible;
}


/* Adaptation aux petits écrans */

@media (max-width: 600px) {

    .carrousel-simple {
        width: 100%;
        height: 30vh;
        margin: 15px auto;
    }
}


/* Respect des préférences d'accessibilité */

@media (prefers-reduced-motion: reduce) {

    .carrousel-image {
        transition: none;
    }
}

/* ##################complément, créer sans <table> deux paragraphes côte à côte  #####################
    GPT 18/10/26
*/

/* Deux paragraphes côte à côte */

.deux-colonnes {
    display: grid;
    grid-template-columns: 20% 1fr;
    gap: 5px;
    align-items: start;
}

/* Suppression des marges par défaut des paragraphes */
.deux-colonnes p {
    margin: 0;
}

/* Sur petit écran : paragraphes superposés */
@media (max-width: 600px) {
    .deux-colonnes {
        grid-template-columns: 1fr;
    }
}