/*!
Theme Name: FCJP26
Theme URI: http://underscores.me/
Author: Niels Wehrspann
Author URI: https://www.niels-wehrspann.com
Description: Custom theme for FCJP
Version: 1.0.01
Text Domain: fcjp26


/* COULEURS PRINCIPALES DU SITE */
.home, .page, .callpage, #boutons-appel { --couleur-positive: rgb(245,245,245); --plyr-color-main: rgb(245,245,245); --couleur-negative: rgb(105,126,216); --couleur-fond: rgb(10,10,10); --couleur-contraste: rgb(239,143,110); --couleur-full: rgb(109,93,213);} 

.archive2025 { --couleur-positive: rgb(245,245,245); --plyr-color-main: rgb(245,245,245); --couleur-negative: rgb(105,126,216); --couleur-fond: rgb(10,10,10); --couleur-contraste: rgb(239,143,110); --couleur-full: rgb(109,93,213);} 
.archive2024 { --couleur-positive: rgb(255,255,255); --plyr-color-main: rgb(255,255,255); --couleur-negative: rgb(255,160,160); --couleur-fond: rgb(0,0,0); --couleur-contraste: rgb(109,93,213); --couleur-full: rgb(109,93,213);} 
.archive2023 { --couleur-positive: rgb(110,90,255); --plyr-color-main: rgb(110,90,255); --couleur-negative: rgb(255,160,160); --couleur-fond: rgb(0,0,0); --couleur-contraste: rgb(255,160,160); --couleur-full: rgb(109,93,213);} 
.archive2022 { --couleur-positive: rgb(95,191,191); --couleur-negative: rgb(255, 0, 98); --couleur-fond: rgb(0,0,0); --couleur-contraste: rgb(255,128,128); --couleur-full: rgb(128,255,255);} 
.archive2021 { --couleur-positive: rgb(82,73,153); --couleur-negative: rgb(255,0,0); --couleur-fond: rgb(0,0,0); --couleur-contraste: rgb(255,0,0); --couleur-full: rgb(255,0,0);}
.archive2020 { --couleur-positive: rgb(255,108,108); --couleur-negative: rgb(0,164,215); --couleur-fond: rgb(0,0,0); --couleur-contraste: rgb(0,164,215); --couleur-full: rgb(255,108,108);} 
.archive2019 { --couleur-positive: rgb(255,64,180); --couleur-negative: rgb(0,180,164); --couleur-fond: rgb(0,0,0); --couleur-contraste: rgb(20,180,164);} 
.archive2018 { --couleur-positive: rgb(255,128,128); --couleur-negative: rgb(0,15,164); --couleur-fond: rgb(0,0,0); --couleur-contraste: rgb(0,15,164); } 
.archive2017 { --couleur-positive: rgb(232, 216, 0); --couleur-negative: rgb(0,158,227); --couleur-fond: rgb(0,0,0); --couleur-contraste: rgb(0,158,227); } 
.archive2016 { --couleur-positive: rgb(255,16,154); --couleur-negative: rgb(0,158,227); --couleur-fond: rgb(0,0,0); --couleur-contraste: rgb(0,158,227); } 
.archive2015 { --couleur-positive: rgb(255,50,50); --couleur-negative: rgb(92,191,69); --couleur-fond: rgb(0,0,0); --couleur-contraste: rgb(92,191,69); --couleur-full: rgb(92,191,69); } 
.page-template-page-archive { --couleur-positive: rgb(164,164,164); --couleur-negative: rgb(0,0,0); } 
.films-libre-acces { --couleur-positive: rgb(255,255,255); --couleur-negative: rgb(0,0,0); } 
.archive2024 #primary p, .archive2024 #primary h1, .archive2024 #primary h2, .archive2024 #primary h3, .archive2024 #primary h4, .archive2024 #primary h5, .archive2024 #primary h6, .archive2024 #primary td {filter: drop-shadow(0 0 4px white);}


@font-face { font-family: 'Gravostyle'; src: url('fonts/GravostyleBasic-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; } 
@font-face { font-family: 'Gravostyle'; src: url('fonts/GravostyleBasic-Slanted.woff2') format('woff2'); font-weight: 400; font-style: italic; } 
@font-face { font-family: 'Gravostyle'; src: url('fonts/GravostyleBasic-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; } 
@font-face { font-family: 'Gravostyle'; src: url('fonts/GravostyleBasic-BoldSlanted.woff2') format('woff2'); font-weight: 700; font-style: italic; } 
@font-face { font-family: 'Gravostyle'; src: url('fonts/GravostyleBasic-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; } 
@font-face { font-family: 'Gravostyle'; src: url('fonts/GravostyleBasic-BlackSlanted.woff2') format('woff2'); font-weight: 900; font-style: italic; } 
@font-face { font-family: 'Swash'; src: url('fonts/GravostyleSwash-Italic.woff2') format('woff2'); font-weight: 400; font-style: normal; } 
@font-face { font-family: 'Swash'; src: url('fonts/GravostyleSwash-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; } 


html { font-size:calc(0.5vw + 0.5vh); line-height: 120%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; box-sizing: border-box;} 
*, *:before, *:after { box-sizing: inherit;}
body { margin:0; font-family: 'Gravostyle', Gravostyle, sans-serif; background-color: var(--couleur-fond); overflow-x:hidden; scrollbar-width: thin;
    font-feature-settings: "zero"; font-variant-numeric: proportional-nums; -moz-font-feature-settings: "pnum"; -webkit-font-feature-settings: "pnum"; font-feature-settings: "pnum"; } 
main { display: block; } 
::-webkit-scrollbar {width: .5rem;}
::-webkit-scrollbar-thumb {background-color: var(--couleur-positive); border-right: .15rem solid var(--couleur-fond); border-left: .15rem solid var(--couleur-fond);}

/* Text-level semantics */

* { box-sizing: border-box; } 
a { background-color: transparent; text-decoration: none; color:inherit; } 
p a::after, .credits-atelier a::after { content: '\00a0\2197'; } 
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } 
b, strong { font-weight: bold; } 
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } 
small { font-size: 80%; } 
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } 
sub { bottom: -0.25em; } 
sup { top: -0.5em; } 

/* Typography */

h1,h2,h3,h4,h5,h6 { clear: both; margin:0; } 
dfn,cite,em,i { font-style: italic; } 
blockquote { margin: 0 1.5em; } 
address { margin: 0 0 1.5em; } 
abbr,acronym { border-bottom: 1px dotted #666; cursor: help; } 
big { font-size: 125%; } 
embed,iframe,object { max-width: 100%; } 
table { margin: 0 0 1.5em; width: 100%; border-collapse: collapse; } 
td, .wp-block-table td { vertical-align: text-top; padding-bottom:1rem; border:none;} 
h1 { font-size: 4rem; line-height:3.6rem; } 
h2 { font-size: 2.5rem; line-height: 2.4rem; } 
h3 { font-size: 2rem; line-height:2rem; } 
h4 { font-size: 1.25rem; line-height:1.6rem; } 
p, li { font-size:1.25rem; line-height:1.6rem; margin:0; letter-spacing:.1rem;} 


/* Links
--------------------------------------------- */
.sous-page-container a:hover, .sous-page-container a:focus, .sous-page-container a:active { color:var(--couleur-positive); } 
.atelier a:hover, .atelier a:focus, .atelier a:active { color:var(--couleur-positive); } 
.projection a:hover, .projection a:focus, .projection a:active { color:var(--couleur-negative); } 
a:hover,a:active { cursor:pointer; color:var(--couleur-contraste); transition:all 1s;} 



/* Header */
.home .site-branding { width:100%; position: relative; margin-top:0; background-color:var(--couleur-fond); display: block; border:none; height:90vh; overflow:hidden; } 
/* 2024 */
.fond-header {z-index:1; display: block; width:100%; height:100%;}
.fond-header figure {width:100%; height:100%;}
.fond-header video, .fond-header img {width:inherit; height: inherit; object-fit: cover; object-position: 50% 50%;}

figure.header-horiz {display: block;}
figure.header-vert {display:none;}

@media all and (orientation:portrait) {
  figure.header-vert {display:block;}
  figure.header-horiz {display:none;}
}

.header-svg {display:block; width:100%; height:100%; z-index:60; position:absolute; top:0; left:0;} 
.header-svg svg {margin:0; fill:var(--couleur-positive); height:100%; position: absolute; left:50%; transform: translateX(-50%);}
.header-svg figure {height:100%; width:100%;}
.header-svg img {height:inherit; width:inherit; object-fit: contain;}
#bouche, .oeil {fill:var(--couleur-fond);}

.custom-logo-link { width: 100vw; display: block; position: relative; z-index: 100; overflow: hidden; padding-top: 4rem; height: calc(100vh - 4rem); } 
.custom-logo-link img { object-fit: cover; width:inherit; height: inherit; } 

.site-title, .site-description { position:absolute; z-index:1; width:100%; padding:2rem; text-align:center; color:var(--couleur-positive); opacity:0; } 
.page .site-title {opacity:1;}
.site-title { top:5rem; font-family: Swash, 'Swash'; } 
.site-description { top:15rem; font-weight: 700; } 
.site-title a { text-decoration: none; padding:1rem; } 


/* Navigation
--------------------------------------------- */

#menu-toggle {position:fixed; top:0; right:0; z-index:200; display:block; height:auto; width:auto; transition: all .5s ease-in-out; background:none; border:none;}
#menu-toggle:hover {cursor:pointer;}
#menu-toggle svg {width:7vw; height:9vw; padding:2rem; pointer-events: none; display: block; overflow: visible !important; transition:all 1s;}
.home #menu-toggle.visibleheader svg {width:8vw; height:10vw; transition:all 1s;}
#menu-toggle.burger #close {fill:var(--couleur-positive); opacity:0; transition:all .2s ease-in-out;}
#menu-toggle.burger #menu {fill:var(--couleur-positive); opacity:1; transition:all .2s ease-in-out;}
#menu-toggle.close #menu {fill:var(--couleur-fond); opacity:0; transition:all .2s ease-in-out;}
#menu-toggle.close #close {fill:var(--couleur-fond); opacity:1; transition:all .2s ease-in-out; }
#menu-toggle.burger:hover #menu, #menu-toggle.close:hover #close {fill:var(--couleur-contraste); filter: drop-shadow(0px 0px .5vw var(--couleur-contraste) ); transition:all .2s ease-in-out;}

#menu-box {text-align:center; background:var(--couleur-contraste); position:fixed; z-index:180; padding:2rem 0 0 0; left:0; width:100%; text-transform: uppercase; font-weight: 900;}
#menu-box h4 {color: var(--couleur-positive); padding:3rem 0 .75rem 0; pointer-events: none;}
#menu-box h4, #menu-box li {display: block; margin:0;}
#menu-box.visible h4, #menu-box.visible li {font-size:1.8rem; transition:all .7s;}
#menu-box.invisible h4, #menu-box.invisible li {font-size:.1rem; transition:all .7s;}
#menu-box ul {padding:0; margin:0;}
#menu-box li {background:var(--couleur-positive); width:100%; padding:1rem 0 .5rem 0;}
#menu-box a {width:100%; display:block;}
#menu-mediation li:last-of-type, #menu-lien-libre-acces li {background:var(--couleur-fond); color:white;}
#menu-le-festival li:last-of-type {filter:saturate(0%);} 
#menu-box.invisible {top:-100%; opacity:0; transition:all .5s ease-in-out;}
#menu-box.visible {top:0; opacity:1; transition:all .5s ease-in-out;}
#menu-box li:hover {background:var(--couleur-contraste); filter:saturate(100%);}
#menu-box li:hover a {color:inherit !important;}
.inactive-item .poignee:after {content:'►';}
.current-item .poignee:after {content:'▼';}
.poignee {pointer-events: none;}
.page-template-page-archive #menu-box li.current-menu-item {background:var(--couleur-contraste); filter:saturate(100%)}

#backnav {font-size: 4rem; line-height: 4rem; font-weight:900; color:var(--couleur-positive); height:auto; position:absolute; top:0; padding:2rem; z-index:200;}
#backnav:hover {color:var(--couleur-contraste);}


/* Embedded content */
img { border-style: none; } 

/* Call */
#boutons-appel {width:100%; display:grid; grid-template-columns:1fr 1fr; grid-gap:2vw; padding:0 2vw; margin:4rem 0;}
#boutons-appel button {font-size: 2rem; text-align:center; text-transform: uppercase; font-weight: 900; padding:1.5rem 0 1.25rem 0; border-radius: 3rem; width:100%; transition:all .1s; position:relative;}
#boutons-appel button {background:var(--couleur-fond); color:var(--couleur-positive); border: .25rem solid var(--couleur-positive);}
#boutons-appel .current-item {background:var(--couleur-positive); color:var(--couleur-fond); border: .25rem solid var(--couleur-fond); cursor:auto; pointer-events: none;}
#boutons-appel button:hover {background:var(--couleur-contraste); color:var(--couleur-fond); border: .25rem solid var(--couleur-contraste); transition: all .3s; cursor:pointer;}
#boutons-appel button .poignee:after{content:'►';}
#boutons-appel button:hover .poignee:after, #boutons-appel .current-item .poignee:after {content:'▼';}

.intropage { padding:0 5% 0 0; position:relative; display:grid; grid-template-columns: 1fr 2fr; margin:4rem 0; color:var(--couleur-positive); height:auto; transition:all .3s; width:80%; scrollbar-color:var(--couleur-positive) var(--couleur-fond); scrollbar-gutter: stable;} 
.callpage {left:-100%; position:absolute;}
.callpage.visible {transition:all .3s; position: relative; left:0;}
.intropage p, .intropage ul, .intropage h6, .intropage .wp-block-image, .intropage .wp-block-group  {grid-column:2 / span 1; padding:0; margin:0 0 2rem 0;}
.intropage h2, .intropage h3, .intropage h5 {grid-column: 1 / span 1; padding:0 2vw;}
.intropage h3 {padding-top:.1rem;}
.intropage ul {list-style-type:"→   ";}

.intertitre { text-align:center; text-transform: uppercase; margin:8rem 0 2rem 0; display: block; position: relative; padding:1rem 0 .75rem 0; font-weight: 900; background:var(--couleur-positive); color:var(--couleur-fond);} 
#intertitre-edition {background:var(--couleur-fond); color:var(--couleur-positive); margin-bottom:0;}
#intertitre-edito {margin:0;}
#primary .intertitre:first-of-type {margin:0;}
#intertitre-teaser {margin-bottom:0;}

/* Archive single */
#edito {transition: all 4s ease-in-out;}
.isopen:hover, .isclosed:hover {cursor:pointer;}
.intertitre.isclosed:after {content:"►"; position:absolute; right:2vw;}
#edito.isclosed {height:0rem; max-height:0rem; margin-bottom:0; overflow:hidden;}
#edito.isclosed + #intertitre-teaser {margin:0;}

.intertitre.isopen:after {content:"▼"; position:absolute; right:2vw;}
#edito.isopen {height:inherit; max-height:200vh; margin-bottom:inherit;}
#edito.isopen + #intertitre-teaser {margin:inherit;}

#teaser, #teaser .wp-block-vimeo-create { width:100%; height:auto; margin:0; padding:0; position:relative; } 
#teaser.invisible-credits .wp-block-table {height:0; overflow:hidden;}
#teaser .wp-block-table {display:block; position:absolute; width:100%; height:56.25vw; z-index:150; background:var(--couleur-positive); mix-blend-mode:hard-light; opacity:0.8; font-size:2rem; line-height:2rem; font-weight:bold;}
#teaser .wp-block-table table {width:auto; margin:10% auto; transition:all 1s; color:var(--couleur-fond);}
#teaser .wp-block-table table td {padding:.5rem 2rem;}
#credit-button {position:absolute; right:2vw; top:.5rem; color:var(--couleur-positive); background:var(--couleur-fond); width:3rem; height:3rem; padding:.6rem 1rem 0 1rem; border-radius: 50%;}
#credit-button:hover {background:var(--couleur-contraste); transition: all .2s; cursor:pointer;}
.teaser figcaption { position: absolute; top:0; width:100%; height:100%; background-color: var(--couleur-positive); color:white; line-height: 1.6rem; opacity:1; pointer-events: none; margin:0; transition: all 1s; transition-delay: 0.5s; mix-blend-mode: multiply; padding: 24.5% 2vw 0 50%; } 

#prix {display:grid; grid-template-columns:1fr 1fr; padding:0 5vw; grid-gap:0rem 5vw; width:100%;}
.prix {margin:4rem 0; position:relative; }
.prix svg {position:absolute; left:50%; transform:translateX(-50%) translateY(-50%); top:50%; overflow:visible; width:35%; height:auto; }
.svg-wrapper {position:absolute; top:0; width:100%; height:100%; animation: rotateprix 5s linear 0s infinite;}
.prix #curve {fill:none;}
.prix figure {width:100%; height: 24vw; border-radius:2rem;}
.prix figure img {object-fit: cover; width:100%; height:100%; opacity:0;}
.prix svg text {fill:var(--couleur-positive); width:100%; font-size:3rem; font-family:Swash; font-weight:700; letter-spacing:-.1rem; overflow:visible;}
.prix p, .prix h3, .prix h4 {margin-top:1rem; opacity:0;}
.prix h3, .prix h4, .prix h5 {text-align:center;}
.prix figcaption {text-align:center; display: none;}

/* Animation Keyframes*/
@keyframes rotateprix {
    0% { transform: rotateZ(0deg); }
    50% { transform: rotateZ(180deg); }
    100% { transform: rotateZ(360deg); }
}

.prix:hover figure img {opacity:1; transition: all 2s;}
.prix:hover svg {opacity:0; transition:all 1s;}
.prix:hover p, .prix:hover h3, .prix:hover h4, .prix:hover h5, .prix:hover figcaption {color:var(--couleur-positive); opacity:1; transition:all 1s;}

#programme {margin:4rem 0;}
/* Négatif - positif */
#programme.negatif {background:var(--couleur-fond); color:var(--couleur-positive); transition:all .2s;}
#programme.positif {background:var(--couleur-positive); color:var(--couleur-fond); transition:all .2s;}
#primary #titre-programme.intertitre {margin:4rem 0;}
.negatif #titre-programme {background:var(--couleur-positive); color:var(--couleur-fond);}
.positif #titre-programme {background:var(--couleur-fond); color:var(--couleur-positive);}
#programme-dl { position:absolute; top:0.3rem; right:2vw; font-size:1.3rem; text-decoration:none; letter-spacing:0.05rem; } 
#programme-dl:hover, #grille-dl:hover {color:var(--couleur-contraste); } 

/* Grille */
#header-grille { position:relative; text-transform:uppercase; letter-spacing: 0.05rem; padding:0.75rem 0 0.4rem 0; text-align: center; border-top:0.2rem solid; border-bottom:0.2rem solid; } 
.negatif #header-grille {color:var(--couleur-positive);}
.positif #header-grille {color:var(--couleur-fond);}
#header-grille h4 { font-size:1.6rem; position:relative;} 
#grille-dl { position:absolute; font-size:1.3rem; right:2vw; top:0.8rem; font-weight: 700; text-decoration:none; } 
#open-grille-button {padding:0 2rem; position:absolute; left:calc(50%); width:10rem; }
#open-grille-button:hover { cursor:pointer; } 
#grille { font-size:1rem; padding:0; margin:0 2vw 4rem 2vw; z-index:150; display:block; } 
#grille li {display:grid; grid-template-columns: 1fr 1fr 2fr 12fr 3fr 6fr 4fr 9fr 1fr;}
#grille ul { list-style-type: none; margin:0; padding:0; } 
.atelier-grille { background-color: var(--couleur-positive); color:var(--couleur-fond); } 
.projection-grille { background-color: var(--couleur-fond); color: var(--couleur-positive); }
.evenement-grille { background-color: var(--couleur-positive); color: var(--couleur-fond); }
.newdayli {margin-top:2rem;}
#grille.closed { max-height: 0; opacity:0.75; overflow:hidden; transition: all 0.25s; } 
#grille.open { max-height:200vh; opacity:1; transition: all 0.5s; overflow:hidden; } 
#grille.closed li { max-height:0; transition: all 0.5s ease-out; transition-delay:0s; } 
#grille.open li { max-height:50em; transition: all 0.25s ease-in; transition-delay:0s; } 
.mois-grille { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 400;} 
.negatif .mois-grille {color: var(--couleur-positive);}
.positif .mois-grille {color:var(--couleur-fond);}
.mois-grille-span {font-weight: 700; grid-column: 1 / span 3;}
.nom-jour-grille {text-transform: uppercase; border-top:.1rem solid; padding:.2rem 1rem 0 .1rem;}
.titre-grille {font-family: Swash, 'Swash';}
.duree-grille, .chiffre-jour-grille, .heure-grille {text-align: right; padding:.2rem 1rem 0 0; border-top:.1rem solid;}
.titre-grille, .age-grille, .categorie-grille, .lieu-grille {padding:.2rem 1rem 0 0; border-top:.1rem solid;}
.lien-grille, .showCM { text-align: center; border-top:.1rem solid; padding:.2rem 0 0 0;}
.passe { opacity:0.75; } 
.court-l2.open {border:inherit; height:auto; max-height:5rem; padding:inherit; margin:inherit; opacity:1; font-size:1.25rem; transition:all .1s;}
.court-l2.closed {border-bottom:none; height:0rem; max-height:0rem; padding:0rem; margin:0rem; overflow:hidden; opacity:0.1; font-size: .25rem;}
.showCM::after {content:'►';}
.showCM.open::after {content:'▼';}
.mois-grille span, .sameday, .court-l2 .chiffre-jour-grille, .court-l2 .heure-grille, .court-l2 .nom-jour-grille  {border:none;}
.evenement-grille + .atelier-grille .sameday, .projection-grille + .atelier-grille .sameday, .atelier-grille + .projection-grille .sameday, .atelier-grille + .evenement-grille .sameday {border-top:.1rem solid;}
#allevents li:hover {background:var(--couleur-contraste); cursor:pointer; transition: all .2s;}


/* Attente */
#programme-attente {height:25vh; position:relative;}
#bulle-attente {background:var(--couleur-positive); width:12rem; height:12rem; position:absolute; top:3rem; right:25%; border-radius:50%; transform:rotateZ(10deg)}
#bulle-attente p { width:100%; height:auto; text-align: center; position:absolute; top:45%; transform:translateY(-50%); padding:1rem; font-weight: 700;}
#preview-spacer {width:100%; display: block; height:10rem;}

/* Select 2024
#programme-select {list-style: none; display:grid; grid-template-columns: 1fr 1fr 1fr; grid-gap:2vw; padding:0 1.8vw;}
#programme-select li {font-size: 2rem; text-align:center; text-transform: uppercase; font-weight: 900; padding:1.5rem 0 1.25rem 0; border-radius: 3rem; width:100%; transition:all .1s; position:relative;}
.negatif li.current-item {background:var(--couleur-positive); color:var(--couleur-fond);}
.positif li.current-item {background:var(--couleur-fond); color:var(--couleur-positive);}
.negatif #programme-select li {border: .25rem solid var(--couleur-positive);}
.positif #programme-select li {border: .25rem solid var(--couleur-fond);}
.poignee {position:absolute; right:2rem;}
#programme-select li:hover {cursor:pointer;}
*/

#programme-select {list-style: none; display:grid; grid-template-columns: 1fr 1fr 1fr; grid-gap:1rem; padding:0 1.8vw; transition:all .2s ease-in-out; margin:10rem 0 0 0; z-index:1;}
#programme-select li {font-size: 1.75rem; text-align:center; text-transform: uppercase; font-weight: 400; padding:1.5rem 0 1.25rem 0; border-radius: 1rem 1rem 0 0; width:100%; transition:all .1s; position:relative; transform: translateY(.25rem);}
#programme-select li.current-item {font-weight: 900; font-size: 2rem;}
.negatif li.current-item {background:var(--couleur-fond); color:var(--couleur-positive);}
.positif li.current-item {background:var(--couleur-positive); color:var(--couleur-fond);}
.negatif #programme-select li {border: .25rem solid var(--couleur-positive); border-bottom:none;}
.positif #programme-select li {border: .25rem solid var(--couleur-fond); border-bottom:none;}
.poignee {position:absolute; right:2rem;}
#programme-select li:hover {cursor:pointer;}

#programme-select.onglets211 {grid-template-columns: 2fr 1fr 1fr;}
#programme-select.onglets121 {grid-template-columns: 1fr 2fr 1fr;}
#programme-select.onglets112 {grid-template-columns: 1fr 1fr 2fr;}

/* Search and filter
#sf-search-films { color:var(--couleur-positive); margin:5rem 0; display:grid !important; grid-template-columns:10rem 1fr;} 
#sf-search-films .sf-meta-range label:first-of-type, #sf-search-films .sf-range-prefix:first-of-type, #sf-search-films .sf-field-post-meta-age-minimum-films .sf-meta-range .sf-range-postfix, #sf-search-films span.sf-range-values-seperator {display: none;}
#sf-search-films .sf-meta-range .sf-range-postfix:last-of-type {display:inline !important; position: relative;}
.sf-level-0 {border:.2rem solid var(--couleur-positive); width:3.3rem; height:3.4rem; position: relative; font-weight: 700;}
.sf-level-0.sf-option-active {background:var(--couleur-positive);}
.sf-level-0.sf-option-active label {color:var(--couleur-fond);}
.sf-level-0 label {font-size:1.25rem; width:100%; height:100%; position: absolute; top:0; display: block; text-align: center; padding-top:.6rem; padding-left:0 !important; margin:0; } 
.sf-level-0 input[type=checkbox] {display:none;}
*/
#sf-search-films { color:var(--couleur-positive); margin:0; display:grid !important; grid-template-columns:10rem 1fr; padding:5rem 0;} 
#sf-search-films .sf-meta-range label:first-of-type, #sf-search-films .sf-range-prefix:first-of-type, #sf-search-films .sf-field-post-meta-age-minimum-films .sf-meta-range .sf-range-postfix, #sf-search-films span.sf-range-values-seperator {display: none;}
#sf-search-films .sf-meta-range .sf-range-postfix:last-of-type {display:inline !important; position: relative;}
.sf-level-0 {border:.2rem solid var(--couleur-positive); width:3.3rem; height:3.4rem; position: relative; font-weight: 700;}
.sf-level-0.sf-option-active {background:var(--couleur-positive);}
.sf-level-0.sf-option-active label {color:var(--couleur-fond);}
.sf-level-0 label {font-size:1.25rem; width:100%; height:100%; position: absolute; top:0; display: block; text-align: center; padding-top:.6rem; padding-left:0 !important; margin:0; } 
.sf-level-0 input[type=checkbox] {display:none;}


.searchandfilter ul, .searchandfilter ul li { display:flex; margin:0; padding:0 !important;} 
.searchandfilter > ul > li {margin:0 2vw;}
.searchandfilter > ul { flex-wrap: nowrap; justify-content: center; padding-right:4vw; padding-left:10rem; } 
.searchandfilter > ul > li > ul { margin:0 !important;}
.searchandfilter > ul > li > ul > li {margin:0 1vw 0 0;}

#sf-search-films h3 {font-size:1.25rem; line-height: 1.5rem; padding:.5rem 0  0 2rem;}
.sf-meta-range {display:grid; grid-template-columns:1fr 10rem;}
.sf-field-post-meta-age-minimum-films .sf-meta-range-select label {width:3.5rem; height:3.4rem; display: inline-block; overflow: visible; padding:none; position:relative;}
select {font-size:1.25rem !important; line-height: 1.5 !important; font-weight:bold; text-align:center; border-radius:50%; box-shadow: none !important; background:none !important;}
.sf-field-taxonomy-programme_courts select {border-radius:.5rem;}
#sf-search-films select { -webkit-appearance: auto !important; -moz-appearance: none !important; background-image:none !important; background:none !important; color:var(--couleur-positive); width:auto; height:100%; min-width:100%; max-width:100% !important; border:0.25rem solid !important;} 
#sf-search-films select:focus {border:0.25rem solid var(--couleur-positive) !important; }
.searchandfilter h4, .sf-range-prefix, .sf-range-postfix { font-size:1.25rem; padding:0.6em 0.5em 0 0; margin:0 1em 0 0; font-weight: 700;} 
#ateliers .searchandfilter li h4 {letter-spacing: .1rem; text-transform: uppercase; place-self:center;}
span.sf-range-postfix {padding-left:1rem;}
.search-filter-reset, .search-filter-reset:active { color:white; background-color: var(--couleur-negative); border:none; font-weight: 700; border-radius: 2rem; padding:1rem 1.3rem 0.9rem 1.3rem; margin-left:2vw; } 
.search-filter-reset:hover { background-color: var(--couleur-positive); cursor:pointer; } 
.sf-input-select option { font-family: 'Gravostyle', Gravostyle, sans-serif;} 
.searchandfilter label:hover .sf-input-select, .searchandfilter label:active .sf-input-select { background-color: var(--couleur-positive); color:white; border:0.25rem solid var(--couleur-positive); } 
.searchandfilter label:active, .searchandfilter label:visited, .searchandfilter label:focus, .searchandfilter label:focus-within { border:none; } 

/* Programmes */
#programmes {transition: all .2s;}
.negatif #programmes {background: var(--couleur-fond);}
.positif #programmes {background: var(--couleur-positive);}
#programmes {border-top:0.25rem solid;}

.visible-wrapper {height:auto; overflow:visible;}
.invisible-wrapper {height:0; overflow:hidden;}
#programmes h2 {font-family:Swash; margin-bottom:1rem;}
#programmes .long-metrage h2 {font-size:4rem; line-height:4rem;}
.preview-real {margin-bottom:1rem; letter-spacing: 1px;}

/* Programme (results) */
#texte-evenement li {list-style-type: "→ ";}
#programmes ul {margin:0 .5rem; padding:.2rem 0;}


/* Films */
#sf-results-films {width:96%; position:relative; margin:2rem auto; padding:0; display:block; height:auto; overflow:visible;}
#sf-results-films:after {content:''; display: block; clear: both;}
.bloc-films {margin:0.5rem; height:auto; float:left; transition:all .5s; border-radius:1rem;}
#gutter-sizer-films {width:1vw;}

.film-preview {overflow:hidden; display:grid; grid-template-columns: 3fr 1fr; height:auto; padding:0rem; position:relative; align-items: start; align-content: start; overflow:visible;}
.court-metrage .film-preview, #grid-sizer-films {width:31vw;}
.long-metrage .film-preview {width:63vw; grid-template-rows:auto auto; height: auto; padding-bottom:1rem;}
.court-metrage .film-preview { grid-template-rows:auto auto; height: auto; margin-bottom:1rem;}
.preview-programme {font-size:1.25rem; text-align: center; text-transform: uppercase; letter-spacing: .1rem; margin-top:.25rem;}
.preview-nom-programme {font-style: italic; font-weight: bold; text-transform:none; letter-spacing: 0; font-size:1.25rem;}
.preview-seances {display:grid; grid-template-columns:1fr 1fr; text-transform: uppercase; letter-spacing: .1rem;}
.preview-seances p:nth-child(even) {text-align:right;}
.preview-date-chiffre {font-weight: 900;}
.court-metrage .preview-image {grid-row:1; grid-column: 1 / span 2; width:100%; height: 18vw; overflow: visible;}
.court-metrage .preview-image img {width:inherit; height: inherit; object-fit: cover; border-radius:1rem;}
.preview-info-col1 {grid-row:2; grid-column:1; padding:1rem 1rem 0 0;}
.preview-info-col2 {grid-row:2; grid-column: 2; padding-top:1rem;}
.preview-info-col1 {display:grid; grid-template-columns: auto 2rem; grid-template-rows:auto auto auto; grid-gap:.5rem 1rem; align-items: start; padding-right:2rem;}
.preview-titre-film {grid-column:1 / span 2; padding-left:.25rem;}
.preview-real {grid-column:1; margin-block-start:0; margin-block-end:1rem; }
.preview-duree {grid-column:2; margin-block-start:0; margin-block-end:0; }
.preview-description {grid-column:1 / span 2; margin-block-start:0; margin-block-end:0;}
.long-metrage .preview-image {grid-row:1; grid-column: 1 / span 2; width:100%; height: 35vw; overflow: visible;}
.long-metrage .preview-image img {width:inherit; height: inherit; object-fit: cover; border-radius:1rem;}
.long-metrage .preview-info-col2 {justify-self: end; width:9rem;}
.preview-age-comprehensible {text-align:center; position:relative; font-weight: 900; height:8rem;}
.preview-age-comprehensible p {display:inline-block; width:7rem; height:7rem; padding-top:2rem; color:var(--couleur-fond); background-color:var(--couleur-positive); border-radius:50%; line-height: 1.25rem;}
.preview-duree {text-align: center; padding-left:.5rem;}
button.film-voir-tout {background: var(--couleur-fond); color:var(--couleur-positive); font-size:2rem; line-height: 3rem; width:3.25rem; height:3.2rem; font-weight:700; display: block; margin:5rem auto 0 auto; border:.25rem solid var(--couleur-positive); border-radius: 50%;}
.film-voir-rien {background: var(--couleur-fond); color:var(--couleur-positive); font-size:3.5rem; width:4rem; height:4rem; display: block; margin:1rem auto 0 auto; border:.25rem solid var(--couleur-positive); border-radius: 50%;}
button.film-voir-rien:hover, button.film-voir-rien:active {cursor: pointer; background:var(--couleur-positive); color:var(--couleur-fond); border:.25rem solid var(--couleur-positive); transition:all .3s; border-radius: 0%;}

.film-preview > * {pointer-events:none;}
.bloc-films:hover {cursor:sw-resize; background:var(--couleur-contraste); color:var(--couleur-fond); transition:all .3s ease-in-out;}
.bloc-films:hover .film-complet {color:var(--couleur-positive);}
.film-complet:hover {cursor:default;}
.bloc-films:hover .preview-info-col1 {padding-left: .5rem; transition:all .3s ease-in-out;}
.bloc-films:hover .preview-info-col2 {padding-right: .5rem; transition:all .3s ease-in-out;}
.bloc-films:hover button.film-voir-tout, button.film-voir-tout:hover, button.film-voir-tout:active {background:none; color:var(--couleur-fond); border:.25rem solid var(--couleur-contaste); transition:all .3s; font-size:5rem;}

@keyframes showfilm {
    from { display: none; opacity:0; top:100%; left:0; padding:0; grid-gap:10rem 9vw;}
    to { opacity: 1; }
  }

.bloc-films .film-complet {display:none; position:fixed; grid-template-columns: 2fr 2fr 2fr 1fr 2fr 2fr; grid-template-rows: 41vw auto;  width:100%; height:100vh; z-index:1999; background:var(--couleur-fond); overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none;}
.bloc-films .film-complet.visible {animation: showfilm 1s; display:grid; top:0; left:0; padding:5vh 10vw; grid-gap:2rem 4vw;}
.film-complet::-webkit-scrollbar {display: none;}

.trailer-film, .image-film  {width:100%; height:100%; grid-column: 1 / span 5; grid-row: 1; border-radius: 2rem;}
.image-film img {width:100%; height:100%; object-fit: cover; border-radius:2rem;}
.html5_video_players {width:100%; border-radius:2rem;}

.col1-film {grid-row: 2; grid-column: 1 / span 3; height:auto; display: block;}
.col2-film {grid-row: 2; grid-column: 4; height:auto; display: block;}
.col3-film {grid-row: 2; grid-column: 5; height:auto; display: block;}
.col4-film {grid-row:1 / span 2; grid-column:6;}
.col4-film h2 {hyphens: auto;}
.film-voir-rien {position:fixed; top:4vh; right:2vw; z-index:2000;}

.long-metrage .titre-film, .titre-atelier {font-size:3.4rem; line-height: 3rem;}
.rond-age {text-align:center; font-weight: 900; height:auto;}
.film-preview .rond-age {position:absolute; top:1rem; right:1rem; top:random(1rem, 2.5rem); right:random(1rem, 3rem);}
.film-complet .rond-age {position:relative; margin: 0 auto;}
.film-complet .age-officiel {position:relative; margin-top:1.5rem;}
.rond-age p {font-size: 1rem; line-height: 1rem;}
.age-comprehensible {color:var(--couleur-fond); width:fit-content; margin:0 auto;}
.age-comprehensible p {background:var(--couleur-positive); border-radius:50%; width:5rem; padding:1.25rem 0 .75rem 0; pointer-events: none;}
.age-officiel p {text-align:center;}

.categories-film li, .infos-duree-langue p, .infos-film p, .l1-date, .heure, .col3-film h6, .col3-film h3, .col3-evenement h6, .age-officiel p {font-size: 0.9rem; line-height:1rem; margin-bottom:1rem;}
.categories-film li, .l1-date, .heure, .col3-film h6, .col3-film h3 {font-weight: 900;}
.col4-film p, .col3-atelier p, .col3-evenement p {font-size:.85rem; line-height:1rem;}
.categories-film {list-style: none; margin:0; padding:0; color:var(--couleur-fond); text-transform: uppercase;}
.categories-film li {background:var(--couleur-positive); text-align: center; border-radius: 1rem; padding:0.3rem .5rem .1rem .5rem; margin:1rem 0 1rem 0;}
.infos-duree-langue {text-align: center; margin:0;}
.infos-film p {padding:.4rem 0 0.2rem 0; line-height: 1rem; text-align:center;}
.pays span {margin-right:1rem;}

.seance {margin-bottom:4rem; display: block; position: relative; padding:0 .4rem 1rem .4rem;}
.col4-film p.surtitre-seance {text-align:center; display: block; text-transform: uppercase; letter-spacing: 1px; font-size:.9rem; margin:0; padding:.2rem 0 .4rem 0;}
.titre-seance {font-style: italic; margin:0; padding:0; line-height:1rem; margin:0 0 4rem 0; padding:0; text-align: center;}
.col4-film h3 {font-size:1.5rem; font-family: Swash, 'Swash', script; line-height:1.25rem; text-align:center; padding:1.5rem 0.5rem 1rem 0.5rem; margin-bottom: 1rem; border-radius: 1rem 1rem 0 0; background: var(--couleur-fond); color:var(--couleur-positive); pointer-events: none; position:relative;}

.l1-date {text-transform: uppercase; display: flex; justify-content: space-between; font-weight: 900; pointer-events: none; font-size:1rem;}
.date-chiffre {text-align: center; font-size:5rem; line-height: 3rem; font-weight: 400; pointer-events: none;}
.col4-film p {line-height: 1rem; padding:1rem 0; font-size:1rem;}
p.heure {display: flex; justify-content: center; text-transform: uppercase; text-align: center; padding:0.5rem 0 0 0; pointer-events: none;}
.heure.encontinu {justify-content: space-between; pointer-events: none;}
.col4-film h6, .lieu, .col3-evenement h6 {text-align: center; text-transform: uppercase; letter-spacing: .05rem; pointer-events: none; font-size:1rem;}

.avec-reservation .lien-resa {display:block; position:relative; width:100%; height:auto; margin:0 0 3rem 0; padding:0;}
.avec-reservation a {position:absolute; width:100%; text-align: center; transform: rotateZ(-15deg); transform-origin: center center; padding:.5rem; font-weight: 700; text-transform: uppercase;}

.caption, .credit  {font-size:.6rem; font-weight:700; position:absolute; bottom:0;}
.credit {transform: rotateZ(-90deg) translateY(-100%); transform-origin: top left;}
.caption {color:var(--couleur-positive); padding:0 0 .75rem 1rem;}


/* Evenements */
#evenements {width:100%; padding:0 2vw;}
.bloc-evenement {color:var(--couleur-positive); margin:5rem 0; display:grid; grid-template-columns: 8fr 1fr; grid-template-rows:auto auto auto; grid-column-gap: 4vw; position:relative;}
.bloc-evenement .rond-age { position:absolute; top:2rem; right:5vw; top:random(2rem, 8rem); right:random(5vw, 15vw); z-index:2000;}
.age-evenement {color:var(--couleur-positive); position:absolute; top:0; left:calc(50% - 3.5rem);}
.age-evenement p { font-size:1.5rem; line-height:1.5rem; background:var(--couleur-fond); border:.2rem solid var(--couleur-positive); border-radius:50%; width:8rem; padding:1.5rem 0; pointer-events: none;}

#programmes .bloc-evenement>h2 {grid-column:1 / span 3; height:auto; padding:1.5rem 0 1rem 0; border-radius: 2rem 2rem 0 0; color:var(--couleur-fond); background:var(--couleur-positive); text-align: center; font-size:3.4rem; line-height: 3rem; margin-bottom:0;}
.image-evenement {grid-column:1 / span 3; max-height:60vh; position:relative;}
.image-evenement img {width:100%; height: 100%; object-fit: cover; object-position: center;}
.texte-evenement {padding-top:2rem; columns:2; column-gap:2vw;}
.texte-evenement p, .texte-evenement li {font-size:2rem; line-height:2.4rem;}
.col3-evenement {padding-top:1rem;}
.infos-supp {margin-top:1rem; display: block;}
.bloc-date {position: relative;}

/* Ateliers */
#sf-search-ateliers {margin:5rem 0;}
#sf-search-ateliers select {appearance:none; border-radius:4rem; color:var(--couleur-fond); background:var(--couleur-positive); border:.25rem solid var(--couleur-fond); padding:1rem 2rem .5rem 2rem; height:5rem; width:auto; min-width:auto; display: block;}
#sf-results-ateliers {background:var(--couleur-positive); width:100%; position:relative; margin:0 0 2rem 0; padding:4rem 2vw 0 2vw; 
    display:grid; grid-gap:1rem 2vw; grid-template-columns: 1fr 1fr; grid-auto-rows: 0; height:auto;}
.atelier-brick {display:block; width:100%; transition: all .2s; margin:1rem 0;}
.lazyblock-atelier-2022 {width:100%; display:grid; grid-template-columns: 3fr 1fr 1fr; grid-template-rows: auto auto; grid-gap:1rem 1vw;}
.image-atelier {grid-row: 1 / span 1; grid-column: 1 / span 3; position: relative;}
.image-atelier img {width:100%; height:100%; max-height:30vw; object-fit: cover; border-radius:1rem;}
.col1-atelier {grid-row: 2 / span 1; grid-column: 1 / span 1; }
.col2-atelier {grid-row: 2 / span 1; grid-column: 2 / span 1; position: relative;}
.col2-atelier .rond-age {position:relative; display:block; padding:4rem 0;}
.col3-atelier {grid-row: 2 / span 1; grid-column: 3 / span 1; }
.credits-atelier {margin:2rem 0 0 0;} 
.credits-atelier div, .credits-atelier a {display: grid;}
.credits-atelier div {display: grid; grid-template-columns: 1fr 1fr;}
.credits-atelier a {display: grid; grid-template-columns: 1fr 1fr 1rem;}
.credits-atelier h6 {grid-column: 1 / span 2; font-size: 0.9rem; font-weight:400; border-top:.1rem solid; letter-spacing: .1rem;}
.credits-atelier p, .credits-atelier a::after {font-size:.9rem; border-top:.1rem solid;}
.age-atelier p {background:var(--couleur-fond); color:var(--couleur-positive); border-radius:50%; width:7rem; padding:2.4rem 0; pointer-events: none; position:absolute; top:0; left:calc(50% - 3.5rem);}
.prix-atelier {text-align: center;}
.complet {margin:1rem 0 0 0; text-align:center; text-transform: uppercase; position: relative; height:2rem;}
.complet span {position: absolute; width:100%; left:0; transform: rotateZ(-10deg); border:1px solid; border-radius:1rem; padding:.2rem 0 0 0;}
.lieu {font-weight: 900; line-height:1rem; margin-bottom:1rem; pointer-events: none;}
.date-groupe, p.date-plus {font-size:1.6rem; font-weight:700; padding:0; margin:0; line-height: 1rem; transform: translateY(0); pointer-events: none;}
.date-plus {margin:0; text-align: center; pointer-events: none;}
.bloc-date-groupe-atelier, .bloc-date-indiv-atelier {position:relative; }
.lien-inscription {position:relative; width:100%; text-transform: uppercase; font-weight: 900; display:block; height:3rem; margin-bottom:1rem;}
.lien-inscription a {width:100%; height:100%; text-align:center; display: block; z-index:400; position: relative; padding:0.5rem 0; }
.lien-inscription a span {position:absolute; width:100%; height:100%; transform:rotateZ(-10deg); transform-origin: center top; left:0;}
#evenements .lien-inscription {margin-top:1rem;}
p.lien-inscription a::after {content:'';}
p.lien-inscription a span::after {content:' ↗︎';}


/* Vidéos */ 
.plyr__video-wrapper, .plyr__poster {  } 
.plyr_wrapper {border-radius:2rem;}
.plyr {border-radius:2rem;}
.plyr__poster-enabled.plyr--paused video { opacity:0; } 
video { transition: all 0.5s; } 
.plyr--paused .plyr__poster { opacity: 1;} 
.plyr--playing .plyr__poster { opacity: 0; transition:all 1s;} 
.plyr--video .plyr__controls {background:linear-gradient(rgba(0,0,0,0), var(--couleur-fond)) !important; } 
.plyr__video-wrapper.plyr__video-embed {aspect-ratio: 16 / 9 !important;}


/* Sous-pages */
#sous-page { padding:0 0 0 2vw; margin:25vh 0 5rem 0; color: var(--couleur-positive); display:grid; grid-template-columns: 25vw 50vw; grid-gap: 2vw;} 
#sous-page h1 {font-size: 1.6rem; line-height:1.6rem; grid-column: 1 / span 2; text-transform: uppercase; letter-spacing:.1rem; text-align: center;}
#sous-page h2, .sous-page-container h1, .sous-page-container h2 { font-size: 1.6rem; line-height:1.6rem; grid-column: 1;} 
#sous-page h3, .sous-page-container h3, .sous-page figure { font-size: 1.25rem; line-height: 1.6rem; grid-column: 2;} 
#sous-page h1, #sous-page h2, #sous-page h3, .sous-page-container h2, .sous-page-container h3 { text-transform: uppercase; font-weight: 900; color: var(--couleur-positive); letter-spacing: 0.1rem; padding-top:0.3rem; } 

.sous-page .wp-block-buttons { width:100%; margin:1rem 0; } 
.sous-page .wp-block-button__link { background-color:var(--couleur-negative); } 
.sous-page-container h3, .sous-page-container h4 { text-transform: uppercase; letter-spacing: 0.05em; color:var(--couleur-positive); } 
.sous-page-container h4 { margin-top:4rem; } 
.sous-page-close-button { width:100%; font-size:3rem; text-align: center; margin-top:4rem; color:var(--couleur-positive); transition:all 0.5s; } 
.sous-page-close-button:hover { color:var(--couleur-negative); cursor: pointer; } 
#sous-page p, #sous-page ul, #sous-page .wp-block-table, #sous-page .frm_forms, #sous-page .wp-block-buttons { grid-column: 2;} 
#sous-page .wp-block-button a {background: var(--couleur-positive); font-weight: bold; text-transform: uppercase; letter-spacing: .1rem; color: var(--couleur-fond);}
#sous-page .wp-block-table { font-size: 1.25rem; line-height: 1.6rem; } 
#sous-page .wp-block-columns { grid-column: 2;} 
#sous-page .wp-block-columns p { margin: 0; } 
#sous-page ul, .sous-page-container ul { font-size: 1.25rem; line-height: 1.6rem; list-style:none; padding-left:0; } 
#sous-page li, .sous-page-container li { padding-left:2.4rem; text-indent: -2.4rem; } 
#sous-page li:before, .sous-page-container li:before { content:"\2192\00a0\00a0"; } 
#sous-page .wp-block-table tr td { padding-bottom:1rem; } 
#sous-page .wp-block-table tr td:first-child { padding-right:1rem; } 
#sous-page form, #sous-page .wp-block-image { grid-column: 2; } 
#sous-page .wp-block-image figure { margin:1rem 0; } 
#sous-page .wp-block-image img {  height: auto; } 
#primary .p5Canvas {display:none;}
#sous-page .fcjp-rapports .is-layout-grid {grid-gap:2vw; grid-template-columns:repeat(4, 1fr); grid-template-rows: auto;}
#sous-page .fcjp-rapports .is-layout-grid p {grid-column: auto; text-align:center; width:100%; height:15vw; position:relative; border-left:.4rem solid; border-bottom:.35rem solid; border-right:.4rem solid; border-top:.35rem solid;}
#sous-page .fcjp-rapports .is-layout-grid p a {display:block; width:100%; height:15vw; padding:50% 2rem; text-transform: uppercase;}
  #sous-page .fcjp-rapports .is-layout-grid p:before {
    content: "";
    display:inline-block;
    width: 3rem;
    height: 2rem;
    position: absolute;
    top: 0;
    right: 0;
    background:var(--couleur-fond);
    border-bottom: .4rem solid;
    transform:translateY(-.5rem) translateX(1.9rem) rotateZ(45deg);
    transform-origin: top center;
  }
  #sous-page .fcjp-rapports .is-layout-grid p:after {
    content: "";
    display:inline-block;
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 0;
    right: 0;
    background:none;
    border-bottom: .4rem solid;
    border-left: .35rem solid;
  }
  #sous-page .fcjp-rapports .is-layout-grid p:hover, #sous-page .fcjp-rapports .is-layout-grid p:hover:before, #sous-page .fcjp-rapports .is-layout-grid p:hover:after {border-color:var(--couleur-contraste);}

.bloc-logos { display:grid; grid-template-columns: repeat(4, 1fr); grid-gap:2rem;} 
.logo-soutien { width:100%; height: 7rem; position: relative;} 
.bloc-logos svg { fill:var(--couleur-positive); width:100%; max-height: 7rem; margin:0; position: absolute; top:40%; left:50%; transform: translateY(-40%) translateX(-50%); } 
.logo-soutien.haslink:hover svg { fill:var(--couleur-contraste); cursor: pointer;} 

/* Lieux */
.lieux {margin:0 4vw; color:var(--couleur-positive);}
#lieux {margin:15rem 0 10rem 0; }
#lieux-container {display:grid; grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));}
.lieu-div {padding:1rem 2rem 1rem 1rem; margin:2rem 1vw; position:relative;}
.lieu-div h4 {text-transform: uppercase; letter-spacing: .1rem;}
.lieu-div.haslink:hover {cursor:pointer; color:var(--couleur-fond); background:var(--couleur-contraste); border-radius:1rem;}
.lieu-div.haslink:before {content:'↗︎'; position:absolute; right:1rem;}

/* Page && Actualités */
.inf-input input { width:100%; background-color:inherit; margin-bottom:1rem; color: var(--couleur-negative); font-size:1.25rem; padding:0.5rem 0.75rem; border:0.15rem solid var(--couleur-negative); border-radius: 0.5rem; } 
.inf-rgpd { font-size:0.75rem; letter-spacing: 0.1rem; } 
.inf-submit input { width:100%; margin-top:1rem; font-size:1.25rem; text-transform: uppercase; font-weight: 700; letter-spacing: 0.1rem; padding:0.75rem 0 .4rem 0; border-radius: 2rem; background-color: var(--couleur-negative); border:none; color:white; } 
.inf-submit:hover { cursor:pointer; } 
.inf-submit:hover input { background-color: var(--couleur-positive); } 

.wp-block-separator { border:none; } 


.archive .site-title {opacity:1; top:0;}
.page-template-page-archive { background-color: rgb(128,128,128); } 
.page-template-page-archive .site-branding { display: none; } 
.archive-links { width:100vw; overflow:hidden; margin:0; position: fixed; top:10vh; height: auto; } 
#archive-links { width:auto; overflow-x:scroll; overflow-y:hidden; display: flex; flex-wrap: nowrap; box-sizing: content-box; max-height: 80vh; scrollbar-width:none; height: 100%; -ms-overflow-style: none; scroll-behavior: smooth; } 
#archive-links figure { margin:0 0 0 2vw; padding:0; width:auto !important; max-width: 60vh; display: block; box-sizing: border-box; } 
#archive-links figure:first-child { margin-left:25vw; } 
#archive-links figure a { position: relative; display: block; width:40vw; height:80vh; background-repeat: no-repeat; opacity: 0.7; transition: all 0.5s; } 
#archive-links figure a img { filter:saturate(0%); transition: all 0.5s; } 
#archive-links figure a:hover, #archive-links figure a:active { opacity: 1; } 
#archive-links figure a:hover img, #archive-links figure a:active img { filter: saturate(140%); } 
#archive-links figure a img { width:100%; height:100%; object-fit: contain; object-position: center center; display: block; position: absolute; color: var(--couleur-negative); } 
#archive-links-nav { font-family: 'Gravostyle', Gravostyle, sans-serif; font-size: 1.6rem; display: flex; position:fixed; bottom:0; margin:0; padding:0 2vw; justify-content: space-between; width:100%; } 
#archive-links-nav-left { text-align: left; padding:1rem 2rem 1rem 0; opacity: 0; transition: all 0.5s; } 
#archive-links-nav-right { text-align: right; padding:1rem 0 1rem 2rem; transition: all 0.5s; } 
#archive-links-nav-left:hover, #archive-links-nav-right:hover { color: var(--couleur-positive); cursor:pointer; } 

#archive-links::-webkit-scrollbar { display: none; } 


/* Tous les films */
#archive-links figure.affiche-tous-les-films {display:block;}
.archive-films {margin-top:40vh; color:white;}
.archive-films p.has-large-font-size {padding:2rem;}
.archive-films .search-filter-results {display: block; width:100%; padding:2rem 2rem 5vh 2rem; font-size:1rem; line-height: 1.25rem;}
.film-archive {width:100%; display:grid; grid-template-columns:repeat(13, 1fr); grid-gap:1rem; margin:2rem 0;}
.tlf-image {grid-column: 1 / span 3; grid-row:1 / span 2; overflow: hidden; min-height:15rem; max-height:15.25vw;}
.tlf-image img {width:100%; height:100%; object-fit: cover;}
.tlf-titre {font-size:4rem; line-height: 4.25rem; grid-column: 4 / span 5; }
.tlf-descriptif {grid-column: 9 / span 4;}
.tlf-realisateurices {grid-column: 4 / span 2; grid-row:2;}
.tlf-pays {grid-column: 6; grid-row:2;}
.tlf-annee {grid-column: 7; grid-row:2;}
.tlf-duree {grid-column: 8; grid-row:2;}
.tfl-langue {grid-column: 9 / span 2; grid-row:2;}
.tlf-prod {grid-column: 11 / span 2; grid-row:2;}
.tlf-bloc-edition {grid-column:13; grid-row:1 / span 2; text-align:center; position: relative;}
.tlf-bloc-edition .rond-age {background:var(--couleur-positive); border-radius:50%; width:6rem; height:6rem; color:black; position:absolute; top:0; left:calc(50% - 3rem);}
.tlf-bloc-edition .rond-age p {padding-top:2rem; font-size:1.1rem;}
.tlf-edition {color:var(--couleur-positive); position:absolute; top:8rem; width:5vw; line-break: anywhere; left:calc(50% - 1.9rem); padding:1rem; border:.2rem solid; line-height:1.2rem;}
.film-archive button, .film-archive .wp-block-buttons, .film-archive ul, .film-archive hr {display:none;}

.archive-films .sf-field-post-meta-age-minimum-films .sf-meta-range-select label:last-of-type, .sf-field-post-meta-age-minimum-films .sf-range-postfix:last-of-type {display:none;}
.archive-films .wp-block-heading {width:100%; padding:1rem 2rem; color:black; background:white; text-transform: uppercase; letter-spacing: 1px; position: sticky; height:3rem; top:0;  z-index:199;}
.archive-films .sf-field-search {position: absolute; right:0; top:-2rem;}
.archive-films form {height:auto; width:100%; position: -webkit-sticky; position: sticky; top:3rem; background:white; color:black; z-index:199; padding:1rem 0rem 4rem 2rem; }
.archive-films form > ul {display:grid; grid-template-columns: repeat(7, auto); justify-content:space-between;}
.archive-films form li h4, .archive-films form label, .archive-films form .sf-range-postfix, .archive-films .search-filter-reset, .archive-films .sf-meta-range span, .archive-films form select {font-size: .75vw !important; line-height:.75vw !important; text-transform: uppercase; font-weight:bold; letter-spacing: 1px;}
.archive-films .sf-meta-range-select select {text-transform: uppercase; text-align: left;}
.archive-films .sf-meta-range-select select:hover {border:none; background:black; opacity:0.8; cursor:pointer;}
.archive-films form li {position: relative; margin:0 1rem 0 0; height:1.5rem; flex-wrap: wrap;}
.archive-films .sf-field-search input {text-transform: uppercase; font-weight: 700; min-width:20rem;}
.archive-films form .sf-input-range-select {border:none; background:black !important; color:white; padding:.5rem;}
.archive-films form select {border-radius:.5rem; width:auto !important;}
.archive-films form .sf-range-postfix {top:-.75vw; left:-1rem;}
.archive-films .sf-meta-range-slider {width:10vw; display:grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1rem 1rem; font-weight: bold;}
.archive-films .sf-meta-range-slider span {padding-top:.4vw;}
.archive-films .sf-range-values-seperator {text-align:center;}
.archive-films .sf-range-max {text-align: right;}
.archive-films .meta-slider {grid-row:2; grid-column: 1 / span 3; width:90%;}
.archive-films .noUi-connect {background:black;}
.archive-films .sf-item-0 {display: none;}
.archive-films .sf-level-0 {width:auto !important; border:none; background:none;}
.archive-films .sf-level-0 label {width:auto; display: block; position: inherit; padding:.25vw .75vw .5vw .75vw !important; border-radius:1vw; border:.2rem solid black;}
.archive-films .sf-option-active label {background:black; color:white; transition: all 1s;}
.sf-field-sort_order > ul > li label {display: block;}
.archive-films .sf-field-taxonomy-annee .sf-input-select {background:white; border:.2rem solid; border-radius: 1rem;}
.archive-films .sf-field-taxonomy-annee .sf-input-select:hover {background-color:black; border:.2rem solid black; color:white; transition:all .2s; cursor: pointer;}
.archive-films form ul li:not(.sf-field-taxonomy-annee) label:hover {color:white; background:black; cursor: pointer; transition:all .2s;}
.searchandfilter .noUi-handle {border:.2rem solid black;}
.archive-films form {box-shadow: none !important;}
.archive-films input[type="radio"] {display: none;}
.archive-films .search-filter-reset {background:black; color:white; padding:.5vw 1vw .25vw 1vw; margin-right:0;}
.archive-films select.sf-input-select {min-width: 2rem;}
.archive-films .sf-field-taxonomy-annee label select {display:block; padding-top:.25vw; height:1.6vw;}

/* Evenements */
.archive .bloc-evenement {grid-template-columns: 100%;}
.archive #programmes .bloc-evenement>h2 {grid-column:1;}
.archive .image-evenement {grid-column:1 / span 1;}

/* Ateliers */

.archive .lazyblock-atelier-2022 {grid-template-columns: 3fr 1fr;}
.archive .image-atelier {grid-column: 1 / span 2; }
.archive .complet {display:none;}
.complet span {position: absolute; width:100%; left:0; transform: rotateZ(-10deg); border:1px solid; border-radius:1rem; padding:.2rem 0 0 0;}



/* Libre-accès */
#intro-fla { color:white; padding:10rem 2vw 4rem 2vw; columns:3; } 
.films-libre-acces h3 { width:100%; text-align: center; color:var(--couleur-negative); background-color: var(--couleur-positive); font-size:1.6rem; line-height: 2rem; padding:1rem 0 0.75rem 0; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1rem; position: relative; margin:5rem 0 3rem 0; } 
#films-libre-acces { margin-top: 5rem; color:white; } 
.films-libre-acces .age-programme { color:var(--couleur-negative); } 
.slider-fla { margin:0 0 5rem 0; width:100%; display: flex; flex-wrap: wrap; padding:0 2vw; } 
.film-libre-acces { width:31%; margin:0 1% 3rem 1%; } 
.bloc-inner-fla { width:100%; display:flex; justify-content: space-between; } 
.film-libre-acces>.wp-block-embed { width:100%; margin:0; padding:0; } 
.film-libre-acces .wp-block-embed__wrapper { height:17vw; position: relative; margin-bottom:2rem; } 
.film-libre-acces iframe { width:100%; height:100%; position: absolute; top:0; left:0; } 
.titre-desc-fla { width:60%; } 
.bloc-infos-fla { width:30%; } 
.titre-desc-fla h2 { font-family: Swash, 'Swash', cursive; font-size:2.5rem; line-height: 2.5rem; margin-bottom: 1rem; } 
.bloc-infos-fla .paysindiv { color:var(--couleur-negative); } 

/* Forms */

.intro.frm_forms { height: 1px; overflow: hidden; max-height: 1px; position: absolute; bottom: 0; left: 0; width: 100%; transform: translateY(100%); background-color: white; transition: all 1s ease-out; padding: 0 2vw; } 
.with_frm_style label, #field_sthzw_label, .frm_opt_container, .frm_submit, .frm_primary_label, .frm_form_field, .frm_description { font-family: Gravostyle, 'Gravostyle' !important; font: var(--font); font-size:1.25rem !important; color:var(--couleur-positive) !important; } 
.frm_button_submit { background-color:var(--couleur-negative) !important; background:var(--couleur-negative) !important; border-color:var(--couleur-negative) !important; font-family: Gravostyle, 'Gravostyle' !important; text-transform: uppercase; letter-spacing:0.1rem; padding:1rem 2rem 0.75rem 2rem !important; font-weight: 900 !important; border-radius:2rem !important; } 
.frm_button_submit:hover { color:white !important; background-color:var(--couleur-positive) !important; border-color:var(--couleur-positive) !important; margin:0 !important; } 
.frm_submit button { margin:0 !important; } 
.frm_checkbox input::before, .frm_checkbox input::after, .frm_checkbox input:checked { background-color:var(--couleur-contraste) !important; color:var(--couleur-fond) !important; } 
.frm_error { color: var(--couleur-positive) !important; } 
[type="checkbox"]:active, [type="checkbox"]:checked { background-color: var(--couleur-contraste) !important; } 
.frm_submit { grid-column: 1 / span 12 !important; clear:none; } 
.frm_button_submit {width:100% !important; border:none !important; box-shadow:none !important; }
.vertical_radio, .frm_none_container { grid-column: span 5 / span 5 !important; clear:none; } 
button,input,optgroup,select,textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } 

button,input { overflow: visible; } 
button,select { text-transform: none; } 

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: none; } 
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } 
fieldset { padding: 0.35em 0.75em 0.625em; } 

legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } 
progress { vertical-align: baseline; } 
textarea { overflow: auto; } 
[type="checkbox"],[type="radio"] { box-sizing: border-box; padding: 0; } 
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button { height: auto; } 
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } 
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } 
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } 


/* Interactive */

details { display: block; } 
summary { display: list-item; } 
template { display: none; } 
[hidden] { display: none; } 




/* Captions
--------------------------------------------- */
.wp-caption { margin-bottom: 1.5em; max-width: 100%; } 
.wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; } 
.wp-caption .wp-caption-text { margin: 0.8075em 0; } 
.wp-caption-text { text-align: center; } 

/* Galleries
--------------------------------------------- */
.gallery { margin-bottom: 1.5em; display: grid; grid-gap: 1.5em; } 
.gallery-item { display: inline-block; text-align: center; width: 100%; } 
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); } 
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); } 
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); } 
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); } 
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); } 
.gallery-columns-7 { grid-template-columns: repeat(7, 1fr); } 
.gallery-columns-8 { grid-template-columns: repeat(8, 1fr); } 
.gallery-columns-9 { grid-template-columns: repeat(9, 1fr); } 
.gallery-caption { display: block; } 

/* Plugins */

/* Jetpack infinite scroll */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer { display: none; } 
.infinity-end.neverending .site-footer { display: block; } 


/* Text meant only for screen readers. */
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } 
.screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } 

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus { outline: 0; } 



.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; } 

/* Footer */
.site-info { display: grid; grid-template-columns: 4rem 4rem 4rem 4rem auto 4rem; height:2rem; padding:0 2vw; margin:2rem 0 1rem 0;} 
.site-info svg { fill:#fff; height:100%; max-width:2rem; margin:0;} 
.site-info a { width:100%; height:2rem; margin:0;} 
.site-info p { text-align:center; margin:0.25rem 1rem;} 
.site-info p a { padding:0.5rem 1rem 0.3rem 1rem; border-radius:2rem; color:var(--couleur-fond); background-color:white; transition:all 0.5s; } 
.site-info p a:hover { background-color:var(--couleur-contraste);}
.site-info svg:hover {fill:var(--couleur-contraste); } 

.site-info #up-button { font-weight: 900; font-size:2.75rem; color:white; padding:0.7rem 0 2rem 2rem; text-align: right;} 
.site-info #up-button:hover, .site-info #up-button:active { color: var(--couleur-contraste); cursor:pointer; } 
.page-template-page-archive footer { display:none; } 


@media all and (orientation:portrait) {
    
#archive-links figure:first-child { margin-left:2vw; } 
#archive-links figure a { width:80vw; max-width:80vh; } 
 }

@media all and (max-width:1024px) { 
    html { font-size:calc(0.75vw + 0.75vh);}
    body { padding:0; } 
    /* nav */
    #menu-toggle svg {width:12vw; height:14vw;}
    .home #menu-toggle.visibleheader svg {width:14vw; height:16vw;}
    
    .site-title, #backnav {font-size:2rem;}

    #boutons-appel {grid-template-columns:100%;}

    #prix {padding:0 2vw 2rem 2vw; grid-gap:4rem 3rem;}
    .prix {margin:0; position:relative; color:var(--couleur-positive); opacity:1;}
    .prix svg {left:0; transform:translateX(16vw) translateY(0%); top:0; overflow:visible; width:14vw; height:14vw;}
    .svg-wrapper {position:relative; top:0; width:100%; height:14vw; margin:2rem 0;}
    .prix figure {height: 26vw;}
    .prix figure img, .prix:hover svg {opacity:1;}
    .prix p {opacity:1;}


    /* Pages */
    .intropage {width:100%; grid-template-columns: 1fr; padding-bottom:2rem;} 
    .intropage p, .intropage ul, .intropage h6, .intropage .wp-block-image  {grid-column:1; padding:0 2vw; margin:1rem 0;}
    .intropage h2, .intropage h3, .intropage h5 {grid-column: 1; padding:2rem 2vw;}

    #sous-page { padding:0 2vw; grid-template-columns: 1fr 2fr; grid-gap: 2vw;} 
    .wp-block-lazyblock-slider-sous-page {grid-column: 1 / span 2;}

    #sous-page .fcjp-rapports .is-layout-grid {grid-template-columns:repeat(3, 1fr); grid-template-rows: auto; width:100%;}
    #sous-page .fcjp-rapports .is-layout-grid p {height:27vw;}

    /* Grille */
    #grille li {grid-template-columns: 1fr 1fr 2fr 8fr 2fr 3fr 6fr 1fr;}
    .categorie-grille {display: none;}
    .atelier-grille { background-color: var(--couleur-positive); color:var(--couleur-fond); } 
    .projection-grille, .evenement-grille { background-color: var(--couleur-fond); color: var(--couleur-positive); border-top:.1rem solid;}
    .duree-grille, .chiffre-jour-grille, .heure-grille {text-align: right; padding-right:.5rem;}
    .lien-grille, .projection-grille button {width:2rem; text-align: center;}
    .ans-grille {display: none;}

    #programme-select li {font-size: 1.25rem; padding:1rem 0 .75rem 0; border-radius: 2rem;}
    .poignee {right:1rem;}

    /* Programme (results) */
    #sf-search-films { color:var(--couleur-positive); margin:5rem 0; display:grid; grid-template-columns:12rem 1fr;} 
    .searchandfilter > ul {display:grid; grid-template-columns: 1fr; grid-template-rows:auto; grid-gap: 2rem;}
    /* Films */
    #sf-results-films {width:100%; margin:2rem 0; display:block; height:auto; overflow:visible;}
    #gutter-sizer-films {width:2vw;}
    .court-metrage, #grid-sizer-films {width:48vw; overflow:hidden;}
    .long-metrage {width:100%;}
    .court-metrage {display: block;}
    .long-metrage {height:auto; display:block;}

    .long-metrage .film-preview {width:100%; grid-template-columns:5fr 1fr;}
    .court-metrage .film-preview {width:100%; grid-template-columns:3fr 1fr;}
    .long-metrage .preview-image {height:54vw;}
    .court-metrage .preview-image {height: 25vw;}

    .court-metrage .trailer-film, .court-metrage .image-film  {grid-column: 1 / span 2; grid-row: 1;}
    .long-metrage .trailer-film, .long-metrage .image-film {grid-column: 1 / span 3;}

    .bloc-films .film-complet {display:none; position:fixed; grid-template-columns: 5fr 1fr 2fr 2fr; grid-template-rows: 55vw auto; align-items: start; align-content: start; }
    .bloc-films .film-complet.visible {display:grid; top:0; left:0; padding:3rem 5vw; grid-gap:2rem 2vw;}
    .film-complet.visible .image-film, .film-complet.visible .trailer-film  {grid-column: 1 / span 4;}
    .col1-film {grid-row: 2 / span 2; grid-column: 1; height:auto; display: block;}
    .col2-film {grid-row: 2; grid-column: 2; height:fit-content; height:fit-content;}
    .col3-film {grid-row: 2; grid-column: 3; height:fit-content; align-self: start; }
    .col4-film {grid-row:2; grid-column:4;}
    .film-voir-rien {top:1rem; right:3vw;}

    
    .credit {transform: rotateZ(-90deg) translateY(-70%); }

    /* Evenements */
    .bloc-evenement {grid-template-columns: 7fr 1fr;}
    .image-evenement {max-height:50vh; position:relative;}
    .texte-evenement {padding-top:2rem; columns:1; column-gap:0;}

    /* Ateliers */
    #sf-search-ateliers {margin:2rem 0 0 0;}
    #sf-results-ateliers {margin:0 0 2rem 0; padding:2rem 2vw 4rem 2vw; display:block; }
    .atelier-brick {margin:4rem 0;}
    .lazyblock-atelier-2022 {grid-template-columns: 4fr 1fr 1fr; grid-gap:2rem 2vw;}
    .image-atelier img {max-height:70vw;}


    /* Archive */
    #archive-links figure.affiche-tous-les-films {display:none; }


/* Libre-accès */
#intro-fla { columns:1; } 
.slider-fla { justify-content: space-between; } 
.films-libre-acces h3 { font-size:1rem; } 
.film-libre-acces { width:45%; } 
.titre-desc-fla { width:60%; } 
.bloc-infos-fla { width:30%; margin-top:0.5rem; } 
.film-libre-acces .wp-block-embed__wrapper { height:25vw; } 
.bloc-infos-fla .tag-list { margin-bottom:1rem; } 
.bloc-infos-fla .tag-list li { font-size:0.5rem; letter-spacing: 0.05rem; border:0.1rem solid; } 
.bloc-infos-fla .infos-film { border-top:0.1rem solid; } 
.bloc-infos-fla .infos-duree-langue p { font-size:0.5rem; line-height: 0.75rem; border:0.1rem solid; padding:0.2rem 0.4rem; } 
.bloc-infos-fla .infos-film p { font-size:0.65rem; line-height: 0.75rem; border-bottom:0.1rem solid; } 
.titre-desc-fla h2 { font-size:2rem; line-height: 2.25rem; margin-bottom:2rem; } 
#archives-menu { width:59%; } 
#archive-current-year { width:44%; padding:1rem 2vw; font-size:1rem; text-align: right; } 

 }

@media all and (max-width:700px) and (orientation : portrait) { 
    html { font-size:calc(.9vw + .9vh);}
    body { padding:0; } 
    #menu-toggle svg {width:20vw; height:24vw;}
    .home #menu-toggle.visibleheader svg {width:20vw; height:26vw;}

    .site-title, #backnav {font-size:2rem; line-height:2rem;}
    .site-title {padding:1rem 10rem;}

    #programme-select {margin-bottom:5rem;}
    #programme-select.onglets112, #programme-select.onglets121, #programme-select.onglets211 {grid-template-columns:1fr; grid-template-rows:auto auto auto; grid-gap:2rem;}
    #programme-select li {font-size: 2rem; padding:.8rem 0 .6rem 0; border-radius: 2rem; height:auto;}
    .negatif #programme-select li {border-bottom:.25rem solid;}
    .positif #programme-select li {border-bottom:.25rem solid;}
    #programme-select li.current-item {font-size:3rem; line-height:4rem; padding:0.8rem 0 .2rem 0;}
    .poignee {right:.5rem;}

  #programmes {border:none;}

    #prix {grid-template-columns:100%; padding:0 4vw 2rem 4vw; grid-gap:5rem 3rem;}
    .prix {margin:0; position:relative; color:var(--couleur-positive); opacity:1;}
    .prix svg {left:0; transform:translateX(34vw) translateY(0%); top:0; overflow:visible; width:24vw; height:24vw; }
    .svg-wrapper {position:relative; top:0; width:100%; height:24vw; margin:2rem 0; }
    .prix figure {height: 54vw;}


     /* Grille */
     #grille li {grid-template-columns: 1fr 1fr 2fr 7fr 2fr 3fr 1fr;}
     .categorie-grille, .ans-grille, .lieu-grille {display: none;}


    /* Search and filter */
    .sf-level-0 {width:2.2rem; height:2rem; position: relative;}
    .sf-level-0 label {font-size:1rem; top:0; display: block; text-align: center; padding-top:0rem; } 
    .searchandfilter > ul > li {margin:0 4vw;}
    .searchandfilter > ul { padding-right:2vw; } 
    .searchandfilter > ul > li > ul > li {margin:0 2vw 0 0;}
    select {padding-top:0.2rem; font-size:1rem !important; width:2.2rem; height:2rem;} 
    .searchandfilter h4 { font-size:1rem;} 
    .sf-field-taxonomy-jour_classement ul { display: flex; justify-content: space-between; width:100%;}
    .searchandfilter h4, .sf-range-prefix, .sf-range-postfix { font-size:1rem;} 
    span.sf-range-postfix {top:0;}

    /* Programme (results) */
    #sf-search-films { color:var(--couleur-positive); margin:5rem 0; grid-template-columns:auto 1fr; grid-gap:2rem;} 
    .searchandfilter > ul {display:grid; grid-template-columns: 1fr; grid-template-rows:auto; grid-gap: 1rem;}

    /* Films */
    #sf-results-films {width:96% !important; position:relative; margin:0 0 2rem 0; }
    .bloc-films {float:none; display: block; position: relative;}


    .court-metrage #h5vp_player, .court-metrage .h5vp_player {height: 100% !important; width:100% !important;}
    .court-metrage .plyr.plyr--video {height:100% !important;}
    .court-metrage, #grid-sizer-films, .long-metrage {width:100%; display: block;}
    .court-metrage {display:block;}
    .court-metrage .film-preview { grid-template-rows:4rem auto auto; height: auto; grid-template-columns: 4fr 1fr; grid-gap:1rem 2rem;}
    .court-metrage .preview-programme {grid-column: 2 / span 1; color:var(--couleur-positive); background:var(--couleur-fond); padding-top:.3rem;}
    .court-metrage .preview-image {grid-row:1 / span 2; grid-column: 1 / span 1; width:100%; height: 40vw;}
    .court-metrage .preview-image img {border-radius:1rem;}
    .court-metrage .preview-info-col1 {grid-row:3; grid-column:1; padding:0 0 0 0; align-self:start; min-height: auto;}
    .court-metrage .preview-info-col2 {grid-row:2 / span 2; grid-column: 2; padding-top:1rem; align-self:start;}


    .long-metrage {height:auto; display:block;}
    .long-metrage .film-preview {width:100%; grid-template-columns:4fr 1fr; padding-bottom:2rem; grid-gap:1rem 0; margin-bottom:2rem;}
    .long-metrage .preview-info-col1 {}
    .long-metrage .preview-info-col2 {width:auto; justify-self: auto;}
    .court-metrage .image-film, .court-metrage .trailer-film {height:40vw; display:block; grid-column: 1; grid-row:1; width:100%; overflow:hidden;}
    .long-metrage .image-film, .long-metrage .trailer-film {height:54vw; display:block; grid-column: 1 / span 2; grid-row:1; overflow:hidden;}
    #gutter-sizer-films {width:0;}

    .rond-age {margin:0; padding:0;}
    #programmes ul.categories-film {padding:0; margin:0;}
    .categories-film li {margin:0 0 .5rem 0;}

    .bloc-films .film-complet {grid-template-columns: 5fr 4fr 1fr; grid-template-rows: 55vw auto auto; align-items: start; align-content: start; height:100%; }
    .bloc-films .film-complet.visible {display:grid; top:0; left:0; padding:3rem 3vw; grid-gap:2rem 4vw; max-width:100%; width:100vw;}
    .film-complet.visible .image-film, .film-complet.visible .trailer-film  {grid-column: 1 / span 3; grid-row:1; height:100%;}
    .col1-film {grid-row: 2; grid-column: 1 / span 2;}
    .col2-film {grid-row: 2; grid-column: 3; height:fit-content; height:fit-content;}
    .col3-film {grid-row: 3; grid-column: 1; height:fit-content; align-self: start; padding-right:2rem;  }
    .col4-film {grid-row:3; grid-column:2 / span 2; padding-left:2rem; }

    .film-voir-rien {top:1rem; right:5vw;}

    /* Evenements */
    .bloc-evenement {grid-template-columns: 6fr 1fr; grid-template-rows:auto auto auto; grid-column-gap: 4vw;}
    .bloc-evenement .rond-age { position:absolute; top:6rem; right:12vw; top:random(6rem, 12rem); right:random(12vw, 20vw); z-index:2000;}


    /* Ateliers */
    #sf-search-ateliers select {border-radius:2rem; height:3.5rem; padding-bottom:.25rem;}
    #sf-results-ateliers {margin:0 0 2rem 0; grid-gap:1rem 2vw; grid-template-columns: 1fr;}
    .atelier-brick {display:block; width:100%; transition: all .2s; margin:4rem 0;}
    .lazyblock-atelier-2022 {grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; grid-gap:2rem 30vw;}
    .image-atelier {grid-row: 1; grid-column: 1 / span 2;}
    .image-atelier img {width:100%; height:100%; max-height:50vw; object-fit: cover; border-radius:1rem;}
    .col1-atelier {grid-row: 2; grid-column: 1 / span 2; }
    .col2-atelier {grid-row: 3; grid-column: 1; }
    .col3-atelier {grid-row: 3; grid-column: 2; }


    /* Pages */
    #sous-page { padding:0 2vw; grid-template-columns: 100%; margin-top:40vh;} 
    #sous-page h1 {text-align: center;}
    #sous-page h2, .sous-page-container h1, .sous-page-container h2 { text-align: center; margin:2rem 0;} 
    #sous-page p, #sous-page ul, #sous-page .wp-block-table, #sous-page .frm_forms, #sous-page .wp-block-buttons { grid-column: 1; margin:1rem 0;} 
    #sous-page .wp-block-columns { grid-column: 1;} 
    #sous-page form, #sous-page .wp-block-image { grid-column: 1; } 
    #lieux {margin-top:40vh;}

    #sous-page .fcjp-rapports .is-layout-grid {grid-template-columns:repeat(2, 1fr); grid-gap:10vw; width:100%; padding:0 2rem;}
    #sous-page .fcjp-rapports .is-layout-grid p {height:47vw;}

    /* Footer */
.site-info { grid-template-columns: repeat( auto-fit, minmax(6rem, 1fr) ); grid-template-rows: 2rem 2rem; grid-gap:2rem 2vw; width:100%; height:auto; padding:0 2vw; margin:2rem 0 1rem 0; } 
.site-info svg { height:3rem; max-width:4rem; margin:0;} 
.site-info a { grid-row: 2; width:auto; height: 4rem;} 
.site-info p { text-align:center; margin:0; padding:0; grid-row:1; grid-column: 1/-1; width:100%;} 
.site-info p a { padding:0r.25em 0 20rem 0; border-radius:2rem; display: block; height:auto;} 
.site-info p a:hover { background-color:var(--couleur-contraste);}
.site-info svg:hover {fill:var(--couleur-contraste); } 
.site-info #up-button { grid-row:2; text-align: right; width:auto; font-size:3rem; padding:1.25rem 0; height:4rem;} 

/* Libre-accès */
.film-libre-acces { width:100%; margin-bottom:4rem; } 
.film-libre-acces .wp-block-embed__wrapper { height:56vw; } 
#archives-menu { width:59%; } 
#archive-current-year { width:44%; padding:1rem 2vw; font-size:1rem; text-align: right; } 
.logo-soutien { width:27vw; height:4rem; } 
 }