/*
 Theme Name:   Twenty Twenty-Four
 Description:  Twenty Twenty-Four Child Theme
 Author:       Sam Cobham
 Author URI:   https://scxd.site
 Description: Twenty Twenty-Four is designed to be flexible,
 versatile and applicable to any website. Its collection of templates and patterns tailor to different needs,
 such as presenting a business,
 blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process,
 is fully compatible with the site editor,
 and takes advantage of new design tools introduced in WordPress 6.4.
 Template:     twentytwentyfour
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0 License: GNU General Public License v2 or later
License URI: http: //www.gnu.org/licenses/gpl-2.0.html
Tags:         Tags: one-column,
custom-colors,
custom-menu,
custom-logo,
editor-style,
featured-images,
full-site-editing,
block-patterns,
rtl-language-support,
sticky-post,
threaded-comments,
translation-ready,
wide-blocks,
block-styles,
style-variations,
accessibility-ready,
blog,
portfolio,
news
 Text Domain:  twentytwentyfourchild
*/

@import url('https://fonts.googleapis.com/css2?family=Karantina:wght@300;400;700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {
	background-color: #0d0d0d; 
	color: #ECECEC; 
	font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}

/** SITE LAYOUT **/


.home .entry-content.has-global-padding {
    margin: 0; 
    padding: 0;
}


header {
    position: absolute; 
    width: 100%; 
    z-index: 1000;
} 

header > div.has-global-padding {
    padding: 1rem !important;
}

.wp-block-site-logo img {
    width: 8rem;
}

body.home main > div:first-child {
    display: none;
}

.is-layout-constrained > .alignwide {
    max-width: 100%;
}

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 100%;
}

.sec-desc, .post-content {

}

main {
    margin-block-start: 0;
}

main.has-global-padding {
    padding: 0;
}

body.home section {
    margin-bottom: 4rem; 
    padding: 0;
} 

body.home article, 
body.home .sec-desc {
    margin-bottom: 2rem;
}

.has-global-padding {
    padding: 0 1rem;
}

img {
    max-width: 100%;
}

/** RESPONSIVE TYPOGRAPHY **/

p {
    font-size: clamp(0.875rem, 0.20vw + 0.825rem, 1.125rem);
}

:root :where(.wp-block-quote) {
    font-size: clamp(0.875rem, 0.20vw + 0.825rem, 1.125rem); 
    font-family: 'poppins', sans-serif; 
    line-height: 1.55;
}

h1, h2 {
	color: #EB2315 !important; 
	font-family: "Karantina", system-ui !important;
	font-weight: 400;
	font-style: normal; 
	text-transform: uppercase; 
    padding: 0rem;
}

h1, 
h1.has-x-large-font-size {
	font-size: clamp(4rem, 2.5vw + 3.5rem, 7.5rem) !important; 
    line-height: 90%; 
    padding: 0 1rem;
}

h2, h2.has-large-font-size {
    color: #ECECEC; 
    font-size: clamp(3rem, 0.781vw + 2.594rem, 4.375rem) !important;
    font-family: "Karantina", system-ui !important;
    font-weight: 400;
    font-style: normal; 
    text-transform: uppercase; 
    line-height: 90%; 
    margin: 0;
}

.home h1, 
.home h1.has-x-large-font-size {
    font-size: clamp(2.5rem, 6.711vw - 0.804rem, 7.5rem) !important; 
    line-height: 90%; 
    margin: 0; 
    padding: 0; 
    color: #FFF !important;
}

body.home h2 {
    font-size: clamp(5rem, 2.5vw + 4.5rem, 7.5rem) !important; 
    margin-block-start: 1.5rem; 
    margin-block-end: 1.5rem; 
    line-height: 90%;
}

body.home .sec-partenariat h2 {
    color: #FFC300 !important;
}

body.home h3, body.home h3.post-title {
    color: #ECECEC; 
    font-size: clamp(3rem, 0.781vw + 2.594rem, 4.375rem) !important;
    font-family: "Karantina", system-ui !important;
    font-weight: 400;
    font-style: normal; 
    text-transform: uppercase; 
    line-height: 90%; 
    margin: 0;
}

h3 > a, h3 > a:where(:not(.wp-element-button)) {
	color: #ECECEC; 
	text-decoration: none;
}

a, a:where(:not(.wp-element-button)) {
	color: #FFC300;
}

h1 a, 
h2 a, 
h3 a, 
h4 a, 
h5 a, 
h6 a, 
h1 a:hover, 
h2 a:hover, 
h3 a:hover, 
h4 a:hover, 
h5 a:hover, 
h6 a:hover {
    color: #ECECEC; 
    text-decoration: none;
}

em.surtitre-hp {
	font-size: 0.7rem; 
	font-style: italic; 
	font-weight: 600; 
	text-transform: uppercase; 
	color: #ECECEC; 
    position: relative; 
    padding-left: 3rem;
}

em.surtitre-hp:before {
    content: ""; 
    display: block; 
    width: 2rem; 
    height: 1px; 
    background-color: #ECECEC; 
    position: absolute; 
    top: 50%;
}

a.cta-btn {
	border: 1px solid #FFC300;
    color: #FFC300;
    text-decoration: none;
    border-radius: 10rem;
    padding: .8rem 1.6rem; 
    text-transform: uppercase; 
    font-size: 0.7rem; 
    font-weight: 600; 
    display: inline-block; 
    margin-top: 2rem;
}

.event-meta-wrap, 
.event-meta-wrapper, 
.ensavoirplus, 
.wp-block-query-pagination-next, 
.wp-block-query-pagination-previous, 
nav.wp-container-core-group-is-layout-c08a3ef2 {
    font-family: "Space Mono", monospace; 
    font-weight: 400; 
    font-style: normal; 
    font-size: .85rem;
}

.ensavoirplus {
    text-align: right;
}

.has-base-background-color {
	background-color: transparent !important;
}

.has-contrast-2-color, 
.has-contrast-2-color p {
    color: #ececec;
}

footer h2.has-medium-font-size, 
footer .has-small-font-size {
    font-size: clamp(0.875rem, 0.20vw + 0.825rem, 1.125rem) !important;
}





/** MENU - BURGER **/ 

.wp-block-navigation__responsive-container.is-menu-open {
    padding: 1rem;
}

.has-modal-open .wp-block-navigation__responsive-close {
    max-width: 100%;
}

/** SEARCH BAR **/

/* Container for search */
.animated-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Button styling */
.search-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
}

.search-toggle svg {
  width: 24px;
  height: 24px;
  stroke: #ececec;
}

.search-form {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.4s ease, opacity 0.3s ease;
  white-space: nowrap;
  pointer-events: none; /* prevents interaction when hidden */
}

/* When active, reveal the form */
.animated-search.active .search-form {
  max-width: 240px;
  opacity: 1;
  pointer-events: auto; 
  padding-right: 1rem;
}

/* Input styling */
.search-input {
  width: 100%;
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  border-radius: 30px;
  font-size: 1rem;
  box-sizing: border-box;
  outline: none;
  border-color: #333;
}

/* Optional: input focus style */
.search-input:focus {
  border-color: #0073aa;
  box-shadow: 0 0 5px rgba(0, 115, 170, 0.5);
}

.hdleftwrap {
    display: flex;
}


/** HOME - TOP **/

.home section {
	padding: 0;
}

.sec-top .sec-inner {
	display: flex; 
	align-items: flex-end; 
	justify-content: center; 
    height: 100vh;
}

video.bg-video {
	position: absolute; 
	right: 0; 
	bottom: 0; 
	z-index: -1;
}

body.home section.sec-top {
	height: 100vh; 
    margin-top: -1rem; 
    padding: 0;
}

.st-txt {
    padding: 1rem; 
}

.st-txt p:first-child {
    position: relative; 
    padding-left: 3rem; 
    font-weight: 600; 
    font-size: .8rem;
    display: none;
}

.st-txt p:first-child:before {
    content: "";
    display: block;
    width: 2rem;
    height: 1px;
    background-color: #ECECEC;
    position: absolute;
    top: 50%; 
    left: 0;
}

body.home h1.wp-block-post-title {
	display: none;
}

.st-arrow {
    margin: 1rem; 
    display: flex; 
    justify-content: center;
}

.arrow-down {
    width: 1rem; 
    height: 1rem; 
    border-bottom: 1px solid #FFC300; 
    border-right: 1px solid #FFC300; 
    transform: rotate(45deg);
}

.sec-desc {
    display: flex; 
    justify-content: left; 
    align-items: center; 
    padding: 1rem;
}

/** Generated css - VIDEOS CHRONIQUES **/

.latest-category-posts {
    display: grid;
    grid-template-columns: auto;
    gap: 1rem;
}

.post-preview {
    position: relative;
}

.post-thumbnail {
    position: relative;
    margin-bottom: 0;
}

.post-thumbnail img {
    width: 100%;
    height: auto;
}

.post-subcategory {
    position: absolute;
    top: .6rem;
    right: .6rem;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: .4rem .8rem;
    font-size: 0.7em;
    border-radius: 5rem; 
    text-transform: uppercase; 
    font-weight: 600;
}

.post-content {
    padding: 1rem;
}

.post-title {
    font-size: 1.2em;
    margin: 10px 0;
}

.post-date {
    margin-top: 15px; 
}

.post-date p, 
.wp-block-post-date {
    font-size: 0.8rem;
    color: #b0b0b0;
    position: relative; 
    padding-left: 1.65rem; 
    font-style: italic;
}

.post-date p:before, 
.wp-block-post-date:before {
    content: ""; 
    display: block; 
    width: 1rem; 
    height: 1px; 
    background-color: #b0b0b0; 
    position: absolute; 
    top: 50%; 
    left: 0;
}

.latest-category-posts .post-thumbnail .image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.latest-category-posts .post-thumbnail .image-container img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}

/* Soutenir Primitivi */

.sec-soutenir {
	background-color: #FFC300; 
	background-size: cover; 
	background-position: center;
}

.sec-soutenir p {
	color: #0d0d0d;
}

.soutenir-wrap {
	text-align: center;
    width: 70%;
    margin: auto;
    padding: 10vw 0;
}

.sec-soutenir a.cta-btn {
	border: 2px solid #0d0d0d; 
	color: #0d0d0d;
}

/* Newsletter */

.sec-soutenir.sec-news {
    background-color: #e1e1e1; 
    margin-block-start: 0;
}

/* Partenariat */ 

body.home section.sec-partenariat {
    /*border: .5rem solid #FFC300; */
    background-image: url(https://wp.primitivi.org/wp-content/uploads/2026/01/prise-de-vue-et-captation-sonore-primitvi.jpeg); 
    background-image: url(https://wp.primitivi.org/wp-content/uploads/2026/01/captation-reunion-CHO3-belle-de-mai-LGT.jpg);
    background-size: cover; 
    background-position: center; 
    margin-bottom: 0;
}




/* Films Long - Gallery */

.sec-films-longs {
	position: relative;
}

.scroll-gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 1rem;
  padding: 1rem;
  cursor: grab;
  scroll-behavior: smooth; 
  scrollbar-width: none; /* Firefox */ 
  position: relative;
}

.scroll-gallery::-webkit-scrollbar {
	display: none; /* Chrome, Safari */
}

.scroll-gallery a {
  flex-shrink: 0;
  scroll-snap-align: start;
  display: contents;
}

.scroll-gallery img {
  width: calc((100vw - 3rem) / 2);
  border-radius: 6px;
  object-fit: cover;
  /* pointer-events: none; */
  user-select: none;
}

.scroll-gallery a:first-of-type > img {
  padding-left: calc((100vw - 2rem) / 4);
}

.scroll-gallery.dragging {
  cursor: grabbing;
  user-select: none;
}

.scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 6rem;
  padding: 1rem;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.scroll-arrow span {
  user-select: none;
  pointer-events: none;
  font-size: 2rem;
  color: white;
}

.scroll-arrow.show {
  opacity: 1;
  pointer-events: auto;
}

.left-arrow {
  left: 20px;
}

.right-arrow {
  right: 20px;
}

/** HOMEPAGE EVENTS SECTION **/

.hp-events .sec-desc {
    grid-column: 1 / -1;
}



/** PAGE ARTICLE **/

body.single figure.wp-block-post-featured-image img, 
body.category figure.custom-featured-img img, 
body.page figure.wp-block-post-featured-image img {
    aspect-ratio: 4 / 3 !important; 
    border-radius: 0; 
    height: 100%; 
    width: 100%;
}

body.single main > div:nth-child(1), 
body.page main > div:nth-child(1) {
    margin-bottom: 0 !important; 
    padding: 0 !important;
}

body.single iframe {
    max-width: inherit !important; 
    width: 100%;
}

body.single .entry-content img {
    width: 100%; 
    max-width: 100%;
}

body.single .entry-content {
    padding: 0 1rem;
}

body.single main > div:nth-child(3) > div:nth-child(2) {
    padding: 0;
}


/** Categorie page layout **/ 

figure.custom-featured-img {
    margin-block-start: 0;
}

.attachment-post-thumbnail.size-post-thumbnail.wp-post-image {
    border-radius: 0;
}

body.single .attachment-post-thumbnail.size-post-thumbnail.wp-post-image {
    border-radius: 0;
}

.category .wp-container-core-group-is-layout-97ba36a5 {
    padding: 1rem !important; 
    margin-top: 0 !important;
}

.wp-block-term-description {
    padding: 1rem; 
    margin-top: 0;
}

.category figure {
    padding-bottom: 0 !important;
}

nav.wp-block-query-pagination {
    padding: 1rem;
}

.archive .is-layout-grid > :is(*, div) {
    margin-bottom: 2rem;
}



/** TOP BANNER --- All Pages **/

body.category-archives-du-present .custom-featured-img img {
    content: url('/wp-content/uploads/2025/11/banniere-archives-du-present.jpg');
}

body.category-evenements  .custom-featured-img img {
    content: url('/wp-content/uploads/2025/11/banniere-page-evenements.jpg');
}

body.category-films-longs  .custom-featured-img img {
    content: url('/wp-content/uploads/2025/11/banniere-films-longs-primitvi.jpg');
}


/* Educ Pop */

body.category-recits  .custom-featured-img img {
    content: url('/wp-content/uploads/2025/11/workshop-recits-zintv-a-bruxelles.jpg');
}

body.category-ancrages  .custom-featured-img img {
    content: url('/wp-content/uploads/2025/11/banniere-ancrages-air-bel-2.jpg');
}

body.category-doctorat-sauvage  .custom-featured-img img {
    content: url('/wp-content/uploads/2025/11/banniere-doctorat-sauvage.jpg');
}

/* Ancrages */

body.category-la-tele-des-champs .custom-featured-img img {
    content: url('/wp-content/uploads/2023/04/arton1113-56f.jpg');
}

body.category-la-plaine .custom-featured-img img {
    content: url('/wp-content/uploads/2025/05/Khalifa-rodeo-sur-les-barrieres-de-la-plaine.jpg');
}

body.category-la-belle-de-mai .custom-featured-img img {
    content: url('/wp-content/uploads/2025/11/banniere-ancrages-la-belle-de-mai-marseille.jpg');
}

body.category-air-bel .custom-featured-img img {
    content: url('/wp-content/uploads/2025/11/banniere-ancrages-air-bel.jpg');
}

/* Doctorat Sauvage */

body.traces .custom-featured-img img {
    content: url('/wp-content/uploads/2025/10/traces.jpg');
}

body.etre-dans-la-rue .custom-featured-img img {
    content: url('/wp-content/uploads/2025/10/etre-dans-la-rue.jpg');
}

body.corpus .custom-featured-img img {
    content: url('/wp-content/uploads/2025/10/Corpus.jpg');
}

body.rencontres-pratiques .custom-featured-img img {
    content: url('/wp-content/uploads/2025/10/rencontres-pratiques.jpg');
}



/** Events Customisation - HP, Category, Post **/

.event-meta-wrap, 
.event-meta-wrapper {
    background-color: #d9d9d9; 
    color: #0d0d0d; 
    display: flex; 
}

.category .event-meta-wrap, 
.category .event-meta-wrapper {
    width: calc(100% + 2rem);
    margin-left: -1rem !important;
}

.event-date, 
.event-type {
    padding: .5rem 1rem;
}

.event-date {
    border-right: 1px solid #0d0d0d;
}

.hp-events .post-content {
    padding: 0;
} 

.hp-events .post-title, 
.event-info, 
.hp-events .ensavoirplus {
    padding: 1rem 1rem 0;
}

.single-event .event-info {
    padding: 0 1rem;
}

.event-time:before {
    content: '';
    background-image: url(http://wp.primitivi.org/wp-content/uploads/2025/09/schedule_50dp_ECECEC_FILL0_wght400_GRAD0_opsz48.png);
    background-size: 1rem 1rem;
    width: 1rem;
    display: inline-block;
    height: 1rem;
    margin-right: .5rem;
    margin-bottom: -0.125rem;
}

.event-location:before {
    content: '';
    background-image: url(http://wp.primitivi.org/wp-content/uploads/2025/09/location_on_50dp_ECECEC_FILL0_wght400_GRAD0_opsz48.png);
    background-size: 1rem 1rem;
    width: 1rem;
    display: inline-block;
    height: 1rem;
    margin-right: .5rem;
    margin-bottom: -0.125rem;
}

.single-event .event-meta-wrapper {
    margin-top: 0;
}

.category.category-evenements .wp-container-core-group-is-layout-97ba36a5 {
    padding: 0 1rem 1rem !important;
}

.category.category-evenements .event-info {
    padding: 0;
}

body.single.single-event figure.wp-block-post-featured-image img {
    aspect-ratio: 3/2 !important; 
    max-width: 720px;
}

body.single.single-event figure.wp-block-post-featured-image {
    text-align: center;
}

body.single.single-event figure.custom-featured-img > img {
    opacity: .35; 
    position: absolute; 
    z-index: -1;
}


/** Single Post - Article **/

.taxonomy-post_tag:before {
    content: 'Mots clés :'; 
    display: block; 
    margin: 1rem 0; 
    font-weight: 500;
}

.is-style-pill a, .is-style-pill span:not([class], [data-rich-text-placeholder]) {
    border-radius: 6rem; 
    color: #0d0d0d; 
    margin-bottom: .5rem;
}

hr.wp-block-separator {
    display: none;
}

blockquote {
    border-radius: 0 !important; 
    background-color: transparent !important; 
    padding: 0 !important; 
    border-left: 2px solid #ECECEC; 
    padding-left: 1rem !important; 
    margin-left: 2rem 0 !important;
}



/** MEDIA QUERRIES **/

@media (min-aspect-ratio:16/8) {
	.bg-video {
		width: 100%; 
		height: auto;
	}
}

@media (max-aspect-ratio:16/8) {
	.bg-video {
		width: auto; 
		height: 100%;
	}
}


@media (min-width: 720px) {

    .wp-block-site-logo img {
        width: 14rem;
    }

    .latest-category-posts {
        grid-template-columns: repeat(2, 1fr); 
        padding: 2rem; 
        gap: 2rem;
    }

    .post-content {
        padding-left: 0;
    }

    .sec-desc {
    	padding-right: 20%; 
        padding-left: 0;
    }

    .scroll-gallery img {
    width: calc((100vw - 3rem) / 3);
    }

    .scroll-gallery a:first-of-type > img {
      padding-left: calc((100% - 1rem) / 6);
    }

    .sec-films-longs .sec-desc {
        padding-left: 1rem;
    }

    .st-txt p:first-child {
        display: block;
    }

    body.single main > div > div:nth-child(2), 
    body.single .taxonomy-post_tag, 
    body.single-event main h1, 
    body.single-event main .event-info, 
    body.single main p, 
    body.single hr, 
    body.single .legacy-content, 
    body.page:not(.home) main h1, 
    body.page:not(.home) main h2, 
    body.page:not(.home) main h3, 
    body.page:not(.home) main h4, 
    body.page:not(.home) main h5, 
    body.page:not(.home) main h6, 
    body.page:not(.home) main p, 
    body.page:not(.home) .page-bloc-txt {
        max-width: 720px; 
        margin-left: auto; 
        margin-right: auto;
    }

    body.single main figure:not(.wp-block-post-featured-image), 
    body.page:not(.home) main figure:not(.wp-block-post-featured-image) {
        max-width: 1080px; 
        margin-left: auto; 
        margin-right: auto;
    }

    body.category main {
        padding: 0 3rem !important;
    }

    body.category h1 {
        padding: 3rem 3rem 0 3rem;
    }

    body.category .wp-block-term-description {
        padding: 0 3rem;
    }

    body.category .wp-block-term-description p {
        width: 70%;
    }

    body.single.single-event figure.wp-block-post-featured-image img {
        margin-top: 14vw;
    } 

}

@media (min-width: 1024px) {

    .sec-desc {
        padding-left: 6vw;
    }

    .st-txt {
        padding: 1rem 6vw;
    }

    .sec-films-longs .sec-desc {
        padding: 1rem 6vw;
    }

    body.single figure.wp-block-post-featured-image img, 
    body.category figure.custom-featured-img img, 
    body.page figure.wp-block-post-featured-image img {
    aspect-ratio: 3 / 1 !important;
}

}

@media (max-width: 720px) {
  .wp-site-blocks .wp-block-post-template.is-layout-grid {
    grid-template-columns: 1fr;
  }
}