/*
Theme Name: USF
Author: USF
Version: 1.0.0
Text Domain: usf
*/

:root {
    --usf-primary-color: #000000;
    --usf-secondary-color: #c6a02e;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: "Open Sans", sans-serif;
}

/*
 * Fonts
 */
@font-face {
    font-family: 'Open Sans';
    src: url('/wp-content/themes/usf/assets/font/OpenSans-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Open Sans Condensed';
    src: url('/wp-content/themes/usf/assets/font/OpenSansCondensed-Bold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Open Sans Condensed';
    src: url('/wp-content/themes/usf/assets/font/OpenSansCondensed-Light.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

a{
	color:#000;
}

/*
 * Top bar
 */
.top-bar{
	font-size:12px;
	.contact-links svg {
		height:16px;
	}
	.social-links svg {
		height:20px;
	}
}

/*
 * Header
 */
header {
	background-color: #fff;
	.logo {
		width:90px;
		height:90px;
	}
	&.scrolled {
		border-bottom:1px solid #eee;
	}
}

/* --- RESET ET MISE EN PAGE DE BASE --- */
#main-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}


/* --- DESKTOP (Annulation Offcanvas et Menu Horizontal) --- */
@media (min-width: 992px) {
    /* 1. On s'assure que le conteneur flex parent prend toute la hauteur */
    .d-flex.justify-content-between {
        align-items: stretch; /* Les enfants directs prendront 100% de la hauteur */
    }

    /* 2. Le menu (ul) doit aussi s'étirer */
    #main-nav-list {
        display: flex;
        flex-direction: row;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* 3. Les li s'étirent et on prépare la bordure */
    #main-nav-list > li {
        display: flex;
        align-items: stretch;
        position: relative;
        border-bottom: 5px solid transparent; /* Bordure invisible par défaut */
        transition: border-color 0.2s ease;
    }

	 #main-nav-list > li  a {
		font-weight: 700;
		font-family: 'Open Sans Condensed', sans-serif;
		color: #000;
		font-size: 18px;
		text-transform:uppercase;
	 }

    /* 4. Le lien (a) prend tout l'espace pour que le clic soit large */
    #main-nav-list > li > a {
        display: flex;
        align-items: center; /* Centre le texte verticalement */
        padding: 0 15px;
        text-decoration: none;
        color: #333;
        height: 100%;
    }

    /* 5. Effet au survol : la grosse bordure noire */
    #main-nav-list > li:hover,
	#main-nav-list > li.current-menu-item {
        border-bottom-color: #000;
    }

    /* 6. Gestion du sous-menu pour qu'il reste bien placé */
    #main-nav-list .sub-menu {
        position: absolute;
        top: 107px; /* Se place juste sous la bordure de 5px */
        left: 0;
        background: #eee;
        min-width: 200px;
        display: none;
        padding: 0;
        margin:0;
        z-index: 100;
        border-bottom: none; /* On ne veut pas de bordure ici */
        list-style-type:none;

        li {
            padding: 0;
            margin:0;
            a {
                display:block;
                padding:10px;
                text-decoration:none;
                &:hover{
                    background-color:#ddd;
                }
            }
        }
    }

    #main-nav-list li:hover > .sub-menu {
        display: block;
    }
}

/*
 * Important alert
 */
.importantAlert {
    text-align: center;
    background-color: #b70808;
    color: #fff;
    padding: 10px 20px;
    margin: 10px 0
}

/*
 * Slider
 */
.Slider .Slide{
    display:block;
    text-align:center;
    color:#fff;
    position:relative;
    background-size:cover;
	background-position:center;
    padding:20px 0;
    font-family:'Open Sans Condensed';
	text-decoration:none;
	
	&:hover{
		text-decoration:none;
	}
	&:before{
	    content:'';
	    position:absolute;
	    background-color:rgba(0,0,0,0.4);
	    top:0;
	    bottom:0;
	    left:0;
	    right:0;
	}
	.Slide-Content{
	    position:relative;
	    min-height:550px;
	    display:flex;
	    align-items:center;
	    justify-content:center;
	    flex-direction:column;
	    z-index:100;
	}
	.Slide-Title{
	    color:#fff;
	    text-transform:uppercase;
		font-weight:bold;
	    z-index:1000;
	    font-size:50px;
	    line-height:50px;
	    margin-bottom:20px;
	}
	.Slide-Title:after{
		display:none;
	}
	.Slide-Text{
	    color:#fff;
	    font-size:30px;
	    line-height:30px;
	    margin-bottom:40px;
	}
	.Slide-Button{
	    color:#fff;
	    background-color:#000;
	    border-radius:0;
	    text-transform:uppercase;
	    font-weight:bold;
	    font-size:18px;
	    line-height:18px;
		border:none;
		padding: 5px 10px;
		font-family: 'Open Sans Condensed';
	}
	.Slide--salon .Slide-Title,
	.Slide--salon .Slide-Text{
	    color:#000;
	}
	.Slide--salon:before{
		background-color:transparent;
	}
}

/*
 * WP Blocks
 */
h1.wp-block-heading{
	display:block;
	font-family:"Open Sans Condensed";
	text-transform: uppercase;
    font-weight: bold;
    position: relative;
    padding-bottom: 20px;
    margin: 30px 0 20px;
	font-size: 30px;
	margin-block-start:30px !important;
	&:after{
		content: '';
	    position: absolute;
	    border-bottom: 3px solid #000;
	    bottom: 0;
	    width: 50px;
	    left: 0;
	}
}
h2.wp-block-heading{
	text-transform: uppercase;
    font-weight: bold;
    position: relative;
    padding-bottom: 20px;
    margin: 30px 0 20px;
    color: #000;
	font-size:26px;
    font-family: Open Sans Condensed;
	&:after{
		content: '';
	    position: absolute;
	    border-bottom: 3px solid #000;
	    bottom: 0;
	    width: 50px;
	    left: 0;
	}
}
.wp-block-cover {
    position: relative;
}
.wp-block-buttons {
	.wp-block-button__link {
		background-color: #000;
	    border: 3px solid #000;
	    text-transform: uppercase;
	    border-radius: 0;
	    padding: 2px 10px;
	    font-weight: bold;
	    font-family: 'Open Sans Condensed';
	    font-size: 18px;
		&:hover{
			background-color: #fff;
		    color:#000;
		}
	}
	&.white-buttons .wp-block-button__link {
		border-color:#fff;
	}
}


.cover-with-link {
  position: relative;
  overflow: hidden;

  img {
    transition: transform 0.4s ease;
	will-change: transform;
  }

  p {
    position: static;

    a {
      position: absolute;
      inset: 0;
      z-index: 2;

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

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

  &:hover img {
    transform: scale(1.03);
  }
}

/*
 * Programme
 */
.ProgramContainer.is-loading{
	position:relative;
}
.ProgramContainer.is-loading:after{
	content:'';
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background-color:rgba(255,255,255,0.6);
	background-image:url(assets/image/loader.gif);
	background-repeat:no-repeat;
	background-position:center
}
.Program{
    background-color:#e6e4e3;
    padding-top:70px;
    font-family:'Open Sans Condensed';
}
.Program-downloadButton{
	display:none;
}
.Program-downloadContent{
    margin-left:90px;
}
.Program-downloadIconContainer{
    background-color:#d1cfcd;
    padding:10px;
    margin-bottom:10px;
    display:block;
	text-align:center;
}
.Program-downloadIconContainer img{
    margin:30px;
    width:70%;
    display:inline-block;
}
.Program-downloadMonth{
    text-transform:uppercase;
    margin-bottom:4px;
    font-size:24px;
}
.Program-downloadText{
    text-transform:uppercase;
    font-weight:bold;
	display:block;
	color:#000;
	line-height:20px;
}
.Program-content{
    margin-right:50px;
    margin-left:20px;
}
.Program-surTitle{
    text-transform:uppercase;
    font-size:40px;
    line-height:40px;
    margin-top:-8px;
    margin-bottom:8px;
}
.Program-title{
    text-transform:uppercase;
    font-weight:bold;
    font-size:28px;
    line-height:26px;
    padding-bottom:28px;
    margin-bottom:28px;
    position:relative;
}
.Program-title:after{
    content:'';
    border-bottom:3px solid #000;
    position:absolute;
    bottom:0;
    left:0;
    width:50px;
}
.Program-subtitle{
	font-size: 18px;
    line-height: 20px;
    margin-bottom: 28px;
    font-family: 'Open Sans Condensed';
    font-weight: bold;
    text-align: center;
}
.Program-text{
	font-family:'Open Sans';
	margin-bottom:30px;
	font-size:16px;
}
.ConferenceDay{
    display:flex;
    flex-direction:row;
    margin-bottom:30px;
}
.ConferenceDay-dateContainer{
    margin-right:14px;
}
.ConferenceDay-date{
    background-color:#fff;
    padding:4px 10px 2px;
    width:120px;
    text-transform:uppercase;
    font-weight:bold;
    font-size:18px;
    line-height:18px;
}
.ConferenceDay-content{
    font-size:20px;
    line-height:26px;
	flex:1;
}
.ConferenceDay-content .Conference{
	border-bottom:1px solid #fff;
	margin-bottom:8px;
	padding-bottom:8px;
}
.ConferenceDay-content .Conference:last-child{
	border-bottom:none;
	margin-bottom:0;
	padding-bottom:0;
}
.Conference-importantText{
	font-family:'Open Sans';
	font-size:16px;
	font-weight:bold;
	text-decoration:underline;
}
.Conference-hours{
    font-weight:bold;
}
.Conference-type--atelier{
    font-weight:bold;
}
.Conference-speakerName{
    font-weight:bold;
	text-transform:uppercase;
}
.Coonference-speakerName:before{
    content: '•';
    margin-right:8px;
}
.Conference-title{
	display:block;
}
.Conference-title:before{
    content:'«';
    margin-right:2px;
}
.Conference-title:after{
    content:'»';
    margin-left:2px;
}
.Conference-description{
    display:block;
    color:#605f5e;
    font-family:'Open Sans';
    font-size:16px;
}
.ProgramPagination{
    text-align:center;
    margin-top:40px;
    margin-bottom:20px;
    line-height:30px;
    font-family:'Open Sans Condensed';
}
.ProgramPagination-link{
    text-transform:uppercase;
    font-size:22px;
    margin:0 10px;
    cursor:pointer;
}
.ProgramPagination-linkIcon{
    color:#fff;
    background-color:#000;
	display:flex;
	align-content:center;
	justify-content:center;
    height:40px;
    width:40px;
    border-radius:20px;
    text-align:center;
    display:inline-block;
}
.ProgramPagination-linkIcon svg{
	height:18px;
	margin-right:3px;
	margin-bottom:6px;
}
.ProgramPagination-linkIcon svg,
.ProgramPagination-linkIcon svg path{
	fill:#fff;
}



/*
 * Bibliothèque
 */
.Library{
    background-color:#e6e4e3;
    padding:60px;
    font-family:'Open Sans Condensed';
	position:relative;
}
.Library:before{
    content:'';
    position:absolute;
    bottom:60px;
    right:70px;
    background-image:url(assets/image/usf-logo-only-white.svg);
    background-repeat:no-repeat;
    background-size:contain;
    opacity:0.3;
	width:400px;
	height:400px;
}
.Library-title{
    text-align:center;
    text-transform:uppercase;
    font-size:36px;
    line-height:36px;
}
.Library-subTitle{
    text-align:center;
    text-transform:uppercase;
    font-size:32px;
    font-weight:bold;
    position:relative;
    padding-bottom:30px;
    margin-bottom:30px;
}
.Library-subTitle:after{
    content:' ';
    border-bottom:3px solid #000;
    position:absolute;
    bottom:0;
    left:50%;
    width:50px;
    margin-left:-25px;
}
.Library .dt-search{
    margin-bottom:40px;
	 display:flex;
    line-height:40px;
    height:40px;
	> label{
	    background-color:#000;
	    height:40px;
	    color:#fff;
	    padding:0 40px;
	    text-transform:uppercase;
	    font-weight:bold;
	    font-size:20px;
	}
	> input{
	    width:100%;
	    background-color:#fff;
	    height:40px;
		padding:0 10px;
	    font-family:'Open Sans';
		border:none;
	}
}
.Library .sorting_disabled{
    display:none;
}
.Library-table{
	width:100% !important;
}
.Library-table,
.Library-table td{
    border:none;
    padding:10px 0;
}
.Library-tableContainer{
	position:relative;
	min-height:500px;
}
.BookItem-reference{
    background-color:#fff;
    font-weight:bold;
    display:inline-block;
    width:60px;
    text-align:center;
    margin-right:20px;
}
.BookItem-title{
    font-weight:bold;
    font-size:18px;
}
.BookItem-author{
    text-transform:uppercase;
    font-size:18px;
}
.Library .dt-info{
	text-align:center;
	font-size:20px;
}
.Library .dt-paging{
	text-align:center;
	margin-top:10px;
}
.Library .dt-paging-button{
	font-size:20px;
	margin:0 10px;
	background-color:#000;
	color:#fff;
	padding:0 10px;
	font-weight:bold;
	cursor:pointer;
	border:2px solid #000;
}
.Library .dt-paging-button.current,
.Library .dt-paging-button:hover{
	background-color:#fff;
	color:#000;
	text-decoration:none;
}

/*
 * Image couv
 */
.rotated-cover {
	display:flex;
	justify-content:end;
	margin-right:15px;
	img{
		width: 70%;
		transform: rotate(4deg);
	}
}

/*
 * Post
 */
.article-date{
	color:#757575;
}

/*
 * nav-links
 */
.nav-links{
	margin:30px 0;
	display:flex;
	justify-content:space-between;

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

	p{
		margin:0;
	}

	.nav-previous,
	.nav-next{
		border:1px solid #000;
		padding:10px;
		width:300px;
	}
	.meta-nav {
		font-size:14px;
	}
	.nav-next{
		text-align:right;
	}
	.post-title{
		font-weight:bold;
	}
}

 /*
 * Footer
 */
footer {
	background-color:var(--usf-primary-color);
	margin-top:50px;
	padding: 80px 0;
	font-family:"Open Sans Condensed";
	color:#8f8f8f;
	ul {
		list-style-type:none;
		display:flex;
		gap:20px;
		padding:0;
		margin:0;
	}
	a {
		color:#8f8f8f;
		text-transform:uppercase;
		font-weight:200;
		&:hover{
            color:#fff;
        }
	}
}


/* --- MOBILE --- */
@media (max-width: 991px)
{
	:root{
		--wp--style--side-padding: 15px;
	}

	/*
	 * Header
	 */
	header {
		.navbar-toggler{
			display:block;
			width:30px;
			display:flex;
		}
		#menuPrincipalCanvas{
			background-color:var(--usf-primary-color);
			color:#fff;
			ul > .menu-item {
				margin-bottom:6px;	
			}
			a {
				display:block;
				color:#fff;
				text-decoration:none;
				padding:5px 1px;
			}
			.btn-close{
				--bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
			}
		}
		.logo {
			transition: transform 0.4s ease-in-out, width 0.4s ease-in-out, height 0.4s ease-in-out;
			transform-origin: center;
		}
		&.scrolled {
			.logo{
				width:60px;
				height:60px;
			}
		}
	}
	
    #main-nav-list .sub-menu {
        padding-left: 1rem;
        list-style: none;
        display: block; /* Toujours visible dans l'offcanvas ou géré au clic */
    }

	/*
	 * General
	 */
	.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
		margin-left: var(--wp--style--side-padding) !important;
		margin-right: var(--wp--style--side-padding) !important;
	}
	/*
	.wp-block-group.alignfull:not(.wp-block-group .wp-block-group) {
		padding-left: var(--wp--style--side-padding) !important;
		padding-right: var(--wp--style--side-padding) !important;
	}
	*/
	:where(.wp-block-group.has-background) {
		padding: 1.25em var(--wp--style--side-padding);
	}

	/*
	 * WP Block
	 */
	.wp-block-image{
		margin:0 0 20px;
		&.alignleft,
		&.alignright{
			margin-inline-start:0 !important;
		}
		img {
			width:100% !important;
		}
	}

	/*
	 * Programme
	 */
	.Program-downloadContent {
        display:none
    }
    .Program-downloadButton {
        display: block;
        margin-bottom: 30px;
        text-align: center;
		background-color: #000;
		text-transform: uppercase;
		border-radius: 0;
		border: 3px solid #000;
		padding: 2px 10px;
		font-weight: 700;
		font-family: 'Open Sans Condensed';
		color:#fff;
		text-decoration:none;
    }
	
	.ProgramPagination-linkText {
        display: none;
    }
	.Program-content{
		margin-left:var(--wp--style--side-padding);
		margin-right:var(--wp--style--side-padding);
		.ConferenceDay{
			display:block;
			.ConferenceDay-date {
				width: auto;
				text-align: center;
				padding: 10px;
				margin-bottom: 20px;
			}
		}
		.Conference{
			display:block;
			margin-bottom:20px;
		}
		.Conference-dateContainer{
			margin-right:0;
			margin-bottom:10px;
		}
		.Conference-date{
			width:auto;
		}
	}

	/*
	 * Cover with link
	 */
	.cover-with-link {
	  p {
	    strong{
		  font-size:24px;
		}
	    a {
			font-size:20px;
	    }
	  }
	}

	/*
	 * Rotated cover
	 */
	.rotated-cover {
	    justify-content: center;
		padding-top: 20px;
		img {
			width:60% !important;
		}
	}

	/*
	 * Bibliothèque
	 */
	.Library{
		padding:60px var(--wp--style--side-padding);
	}
	.Library-searchLabel{
		display:block;
		position:relative;
		overflow:hidden;
		width:50px;
		padding:0;
	}
	.Library .dt-search > label {
		padding:0;
	}
	.Library-searchLabel:after{
		content:'';
		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' stroke='%23ffffff'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M14.9536 14.9458L21 21M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
		background-size:20px;
		background-repeat:no-repeat;
		background-position:center;
		text-align:center;
		color:#fff;
		background-color:#000;
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
	}

	/*
	 * Footer
	 */
	footer {
		ul {
			flex-direction:column;
			gap:20px;
			margin:0;
		}
	}

	
}