/* =========================================================
   LÉGENDES AU SURVOL DES IMAGES
   ========================================================= */

figure.hover-caption-display {
    position: relative;
    overflow: hidden;
}

figure.hover-caption-display > figcaption {
    position: absolute;
    top: 50%;
    right: 0;
    bottom: auto;
    left: 0;

    margin: 0 !important;
    padding: 12px 15px;
    box-sizing: border-box;

    line-height: 1.35;
    text-align: center;

    color: #000;
    background: rgba(255, 255, 255, 0.85);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-35%);

    transition:
        opacity 300ms ease,
        transform 300ms ease,
        visibility 300ms ease;
}

figure.hover-caption-display:hover > figcaption {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%);
}

/* =========================================================
   LIENS AU SURVOL
   ========================================================= */

a:hover:not(.button):not(.btn):not(.wp-block-button__link) {
    color: #000000 !important;
    text-decoration: underline;
}


/* =========================================================
   VIDÉO PRINCIPALE
   ========================================================= */

.hero-video {
    position: relative !important;
    left: 50%;

    width: 100vw !important;
    height: 300px !important;
    min-height: 300px !important;

    padding: 0 !important;
    overflow: hidden !important;

    transform: translateX(-50%);
}

.hero-video video,
.hero-video .wp-block-cover__video-background {
    width: 100%;
    height: 100%;

    object-fit: cover;
    transform: scale(1.15);
    transform-origin: center;
}


/* =========================================================
   TEXTE
   ========================================================= */

p {
    text-align: justify;
}


/* =========================================================
   EN-TÊTE BIOHAP — ORDINATEUR
   Structure réelle du thème Barnsbury
   ========================================================= */

@media screen and (min-width: 783px) {

    /*
     * Logo et menu sur une seule ligne.
     * Le centrage vertical est assuré par la grille.
     */
    #masthead.site-header {
        display: grid !important;
        grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
        align-items: center !important;
        column-gap: clamp(30px, 4vw, 70px);

        width: 100% !important;
        max-width: none !important;
        min-height: 120px !important;

        margin: 0 !important;
        padding: 15px clamp(30px, 4vw, 75px) !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       LOGO
       ----------------------------------------------------- */

    #masthead .site-logo {
        grid-column: 1 !important;
        grid-row: 1 !important;

        align-self: center !important;
        justify-self: start !important;

        position: static !important;
        float: none !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }

    #masthead .site-logo a {
        display: flex !important;
        align-items: center !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #masthead .site-logo img,
    #masthead img.custom-logo {
        display: block !important;

        width: 300px !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 85px !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain !important;
    }


    /*
     * Le nom et la description existent dans le HTML,
     * mais ils sont déjà intégrés dans l’image du logo.
     */
    #masthead .site-title,
    #masthead .site-description {
        display: none !important;
    }


    /* -----------------------------------------------------
       NAVIGATION
       ----------------------------------------------------- */

    #masthead #site-navigation {
        grid-column: 2 !important;
        grid-row: 1 !important;

        align-self: center !important;
        justify-self: end !important;

        position: static !important;
        float: none !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        width: auto !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        transform: none !important;
    }

    #masthead #site-navigation .main-menu-container {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #masthead #site-navigation ul.main-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;

        gap: clamp(18px, 2vw, 32px) !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    #masthead #site-navigation ul.main-menu > li {
        display: flex !important;
        align-items: center !important;

        float: none !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #masthead #site-navigation ul.main-menu > li > a {
        display: flex !important;
        align-items: center !important;

        height: auto !important;

        margin: 0 !important;
        padding: 10px 0 !important;

        font-size: 21px !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
    }


    /* Menu mobile masqué sur ordinateur */

    #masthead #toggle,
    #masthead label[for="toggle"] {
        display: none !important;
    }
}


/* =========================================================
   ORDINATEURS DE LARGEUR INTERMÉDIAIRE
   ========================================================= */

@media screen and (min-width: 783px) and (max-width: 1250px) {

    #masthead.site-header {
        grid-template-columns: minmax(210px, 260px) minmax(0, 1fr) !important;
        column-gap: 25px;

        min-height: 105px !important;
        padding: 12px 25px !important;
    }

    #masthead .site-logo img,
    #masthead img.custom-logo {
        width: 245px !important;
        max-height: 72px !important;
    }

    #masthead #site-navigation ul.main-menu {
        gap: 16px !important;
    }

    #masthead #site-navigation ul.main-menu > li > a {
        font-size: 18px !important;
    }
}


/* =========================================================
   TABLETTES ET MOBILES
   ========================================================= */

@media screen and (max-width: 782px) {

    #masthead.site-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto !important;
        align-items: center !important;
        gap: 15px;

        min-height: 85px !important;

        margin: 0 !important;
        padding: 10px 16px !important;

        box-sizing: border-box !important;
    }


    /* Logo mobile */

    #masthead .site-logo {
        grid-column: 1 !important;
        grid-row: 1 !important;

        align-self: center !important;
        justify-self: start !important;

        position: static !important;
        float: none !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }

    #masthead .site-logo a {
        display: flex !important;
        align-items: center !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #masthead .site-logo img,
    #masthead img.custom-logo {
        display: block !important;

        width: 210px !important;
        max-width: 65vw !important;
        height: auto !important;
        max-height: 65px !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain !important;
    }

    #masthead .site-title,
    #masthead .site-description {
        display: none !important;
    }


    /* Navigation mobile */

    #masthead #site-navigation {
        grid-column: 2 !important;
        grid-row: 1 !important;

        align-self: center !important;
        justify-self: end !important;

        position: static !important;
        float: none !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }

    #masthead label[for="toggle"] {
        margin: 0 !important;
    }


    /* Vidéo mobile */

    .hero-video {
        height: 240px !important;
        min-height: 240px !important;
    }


    /* Meilleure lisibilité des paragraphes sur mobile */

    p {
        text-align: left;
    }
}


/* =========================================================
   TRÈS PETITS ÉCRANS
   ========================================================= */

@media screen and (max-width: 480px) {

    #masthead.site-header {
        min-height: 76px !important;
        padding: 8px 12px !important;
    }

    #masthead .site-logo img,
    #masthead img.custom-logo {
        width: 175px !important;
        max-width: 62vw !important;
        max-height: 56px !important;
    }

    .hero-video {
        height: 210px !important;
        min-height: 210px !important;
    }
}

@media only screen and (min-width: 560px) {
    .main-navigation .sub-menu li a::before,
    .main-navigation .children li a::before {
        content: none !important;
        display: none !important;
    }
}

/* STYLE GLOBAL DES BOUTONS BIOHAP */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.wp-block-button__link,
.wp-element-button,
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
	background-color: #043F54 !important;
	color: #ffffff !important;
	border: 2px solid #043F54 !important;
	text-decoration: none !important;
	transition: background-color 0.2s ease,
	            color 0.2s ease,
	            border-color 0.2s ease;
}

/* STYLE AU SURVOL */
button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-element-button:hover,
.wp-element-button:focus,
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-next:focus,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-previous:focus {
	background-color: #ffffff !important;
	color: #007B8A !important;
	border-color: #007B8A !important;
}


/* MENU FIXE – ORDINATEUR */
@media screen and (min-width: 783px) {

    #masthead {
        position: sticky !important;
        top: 0;
        z-index: 9999;

        width: 100%;
        min-height: 128px !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;

        box-sizing: border-box;
        align-items: center !important;
        background-color: #ffffff;
    }

    /* Empêche la zone du logo de se rétracter */
    #masthead .site-logo {
        flex: 0 0 300px !important;
        width: 300px !important;
        min-width: 300px !important;
        margin: 0 !important;
    }

    /* Taille constante du logo */
    #masthead .site-logo img,
    #masthead img.custom-logo {
        display: block !important;
        width: 300px !important;
        min-width: 300px !important;
        max-width: none !important;
        height: auto !important;
        max-height: 85px !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
    }

    /* Centre le menu verticalement */
    #masthead #site-navigation {
        align-self: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Décalage lorsque tu es connecté à WordPress */
    body.admin-bar #masthead {
        top: 32px !important;
    }
}
#masthead {
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
/* Réglages pour téléphone et tablette */
@media (max-width: 782px) {

  /* Hauteur spécifique de la barre d’administration mobile */
  body.admin-bar #masthead {
    top: 46px !important;
  }

  /* Bannière de la page d’accueil */
  .home .wp-block-cover.hero-video.alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Toutes les listes du site */
  .entry-content .wp-block-list {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 1.5rem !important;
  }

  .entry-content .wp-block-list li {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
  }

  /* Titres de toutes les pages et de tous les articles */
.entry-content h1,
.site-main .entry-title,
.site-main .page-title {
  font-size: 30px !important;
  line-height: 1.15 !important;
}

.entry-content h2 {
  font-size: 28px !important;
  line-height: 1.2 !important;
}

.entry-content h3 {
  font-size: 24px !important;
  line-height: 1.25 !important;
}
/* Paragraphes d’introduction de la page Poudre */
.page-id-1400 .entry-content .wp-block-paragraph[style*="--wp--preset--spacing--50"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
	text-align: justify ;
}
	/* Boutons de toutes les pages et articles */
.entry-content .wp-block-button__link,
.entry-content .wp-element-button,
.entry-content button,
.entry-content input[type="submit"],
.entry-content input[type="button"],
.entry-content input[type="reset"] {
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-height: 44px;
  padding: 12px 18px !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-align: center;
}
	
	/* Espace au-dessus et en dessous du bloc de présentation */
.home .wp-block-media-text.has-secondary-background-color
.wp-block-media-text__content {
  padding-top: 32px !important;
  padding-bottom: 36px !important;
}
	}
	/* Images des aperçus de blog au format portrait 3:4 */
.wp-block-newspack-blocks-homepage-articles.is-portrait .post-thumbnail {
    position: relative !important;
    aspect-ratio: 3 / 4 !important;
    align-self: flex-start !important;
    overflow: hidden !important;
}

.wp-block-newspack-blocks-homepage-articles.is-portrait .post-thumbnail > a {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
}

.wp-block-newspack-blocks-homepage-articles.is-portrait .post-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
}