html, body {height: 100%; margin: 0; padding: 0; }
#mapcontainer{height:550px;display:none;}
#map {height: 100%; }
/* http://en.marnoto.com/2014/09/5-formas-de-personalizar-infowindow.html */
.gm-style .gm-style-iw{font-size: 11px; }
.gm-style-iw {
width: 400px !important;
top: 0 !important;
left: 0 !important;
border-radius: 2px 2px 0 0;padding:0
}
#iw-container {width:100%}
#iw-container .iw-title {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 14px;
font-weight: 400;
padding: 10px 0 0 10px;
background-color: #fff;color:#4098D8;
margin: 1px;
border-radius: 2px 2px 0 0; /* In accordance with the rounding of the default infowindow corners. */
}
.iw-content{padding:10px 0 0 10px}
#initmap{cursor: pointer}
#advancedsearch label{height:40px;width:120px; float:left;line-height:40px;display: block}
#advancedsearch label.date{width:40px;}
#advancedsearch select{width:200px; float:left;height:40px;margin:0 10px 10px 0}
#advancedsearch input[type="text"]{width:120px; float:left;height:40px;margin:0 10px 10px 0}
@media only screen and (max-width :999px) {
#mapcontainer{height:450px;}
}
@media only screen and (max-width :643px) {
#mapcontainer{height:350px;}
}
@media only screen and (max-width :568px) {#mapcontainer{height:250px;}
}
#loader{font-size:3em;color:#007bcc; width:2em;}
.ui-menu .ui-menu-item .ui-menu-item-icon, #log div{
padding-left: 30px;
}
.ui-menu .ui-menu-item .ui-menu-item-icon:before{
content: " ";
position: absolute;
background-size:18px 18px;margin-left: -25px;margin-top:4px;
width:18px; height:18px; background-repeat:no-repeat;}
.ui-menu .ui-menu-item .ui-menu-item-icon:not(.all):after{
content: "+";
position: relative;float:right;
margin-top:4px;color:#fff;font-size:1em; line-height:1; font-weight:bold; padding:2px 4px;
background-color:#4caf50; border:2px solid #fff;border-radius:10px;}
#log div:not(.close_cross_indiv):before{
content: " ";
position: absolute;
background-size:16px 16px;margin-left: -22px;margin-top:7px;
width:16px; height:16px; background-repeat:no-repeat;}
#log .all:before,#log .undefined:before,.ui-menu .ui-menu-item .all:before{background-image: url("/ft/wp-content/themes/twentythirteen2-child/css/images/globe.svg");opacity: 1;}
.ui-menu .ui-menu-item .tid:before,#log div.tid:before{background-image: url("/ft/wp-content/themes/twentythirteen2-child/css/images/team.svg");opacity: 1;}
.ui-menu .ui-menu-item .cid:before,#log div.cid:before{background-image: url("/ft/wp-content/themes/twentythirteen2-child/css/images/trophy.svg");}
.ui-menu .ui-menu-item .cid:before{opacity: 0.7;}#log div.cid:before{opacity: 1;}
.ui-menu .ui-menu-item .coid:before,#log div.coid:before{background-image: url("/ft/wp-content/themes/twentythirteen2-child/css/images/country.svg");opacity:1;}
.ui-menu .ui-menu-item .ciid:before,#log div.ciid:before{background-image: url("/ft/wp-content/themes/twentythirteen2-child/css/images/city.svg");opacity: 1;}
.ui-menu .ui-menu-item .vid:before,#log div.vid:before{background-image: url("/ft/wp-content/themes/twentythirteen2-child/css/images/venue.svg");opacity: 1;}
#log div.cid:before, #log div.coid:before {fill:#fff;}
/* ── Search card (supersearch redesign phase 3, 2026-08-11) ───────────────
White card on the grey canvas, sitting BELOW the navy hero rather than
overlapping it. That placement is deliberate and is what keeps this a re-skin:
the artifact pulls the card up into the hero with margin:-14px + position:
relative + z-index:3, which would make the card a stacking context and change
what the suggestion dropdown's z-index:1000 means, and would change the
containing block for its position:fixed. Sitting in normal flow, the dropdown's
environment is untouched. Do NOT add overflow:hidden here for the same reason:
it would clip the dropdown at the card's bottom edge.
The box itself is unchanged: #main_filters was already max-width 1080px,
margin 0 auto, border-radius. Only the colours and the row layout changed.
Side padding is 25px, not 30px, so the card's content lines up with the hero
H1 and the summary strip below, which both sit in a 1080px column with 25px. */
#main_filters{
color:#13274d;
background:#fff;
border:1px solid #e4e8ef;
box-shadow:0 10px 26px rgba(19,39,77,.13);
border-radius:14px;
/* Overlap the hero by pulling the card up. No position/z-index needed: the
card is LATER in the DOM than #pres-calendar, and non-positioned block
backgrounds paint in tree order, so it lands on top on its own. Keeping it
unpositioned is the point: no stacking context, so the suggestion
dropdown's z-index:1000 still means what it means page-wide.
NOTE the net overlap is 12px, not 20: .sr-form-header still has
padding-top:8px above the card. */
/* 25px below: when you reopen the form to edit, the previous search's results
are still on screen underneath it, so the card needs to read as separate
from them rather than sitting flush against a list it no longer describes. */
padding:16px 25px;max-width:1080px; width:100%; margin: -20px auto 25px;
display:flex;
flex-wrap:wrap;
/* flex-start, not flex-end: when the custom-date row opens it makes the date
column taller, and bottom-alignment would drag the keyword field and the
button down with it. Top-aligned, every column starts with a .big_label of
equal height, so the fields line up by construction. */
align-items:flex-start;
gap:12px;
}
#main_filters .ph3{margin:0px 0 5px;}
/* float -> flex. The keyword field takes the slack, the date select is fixed,
the button sizes to its text. */
#main_filters .block{ padding:0; float:none; margin:0; }
#main_filters .firstblock{flex:1 1 260px; min-width:0;}
#main_filters .secondblock{flex:0 1 230px;}
#main_filters .thirdblock{flex:0 0 auto;}
/* The clearfix divs are float scaffolding and become stray flex items. */
#main_filters .clear{display:none;}
/* The spacer label is KEPT on purpose: with top alignment it is what puts
the button on the same baseline as the two fields, since every column then
starts with a label of the same height. */
#main_filters .btn_block{width:auto; margin: 0 0;}
#main_filters .fifty{width:50%; float:left;margin: 0 0;}
#main_filters .fourty{width:40%; float:left;margin: 0 0;}
#main_filters .thirty{width:93px; float:left;margin: 0 2px 0 0;}
/* The custom-date row is a child of .secondblock, NOT of the card, so it cannot
span the full width: it opens inside the date column. Its display is toggled
inline by the JS, so the container's own display must not be set here. The two
halves stack instead of sitting side by side, because 50% of a 230px column
leaves ~104px of content box and "dd/mm/aaaa" does not fit. */
#main_filters #datepicker_container{margin-top:8px;}
#main_filters #datepicker_container .fifty{width:100%; float:none;}
#main_filters #datepicker_container .fifty + .fifty{margin-top:8px;}
/* 16px is a FLOOR here, not a taste choice: iOS Safari auto-zooms the page when
you focus a form control whose computed font-size is under 16px, and it does
not zoom back out afterwards. At 15px, tapping the keyword field on an iPhone
left the page zoomed in. This one rule covers every control in the card
(#recherchelibrexx, #date_from, #date_to and #date_select), which is the point:
it is (1,1,1) for the inputs and (1,0,1) for the select, so it outranks each of
their own ID rules below and in ft_supersearch_results.css. Setting 16px on
#recherchelibrexx alone would have changed nothing. */
#main_filters input[type="search"],
#main_filters input[type="text"],
#main_filters select{
font-size:16px;
width:100%;
padding:12px 13px;
border:1px solid #e4e8ef;
background:#f7f9fc;
border-radius:10px;
color:#13274d;
}
#main_filters input[type="search"]:focus,
#main_filters input[type="text"]:focus,
#main_filters select:focus{
outline:2px solid #0a8368;
outline-offset:1px;
background:#fff;
}
/* height + zero vertical padding, NOT padding alone. ft_supersearch_results.css
still carries `#date_select { height: 38px }` from the old compact form, and an
ID beats a bare selector, so the 12px vertical padding above was being squeezed
into a 38px border-box: a 14px content box for 15px text, clipping the glyph
bottoms. Chrome desktop, Chrome iOS and Safari iOS honour the fixed height and
clip; Safari desktop and Firefox grow the box instead, which is why it looked
fine on half the browsers. 46px matches the text input beside it, and letting
the browser vertically centre the select's own text is more reliable across
engines than trying to line it up with padding. */
#main_filters select{
cursor:pointer;
font-weight:600;
height:46px;
padding-top:0;
padding-bottom:0;
margin-bottom:0;
line-height:normal;
}
/* These two font-sizes are inert (the block above wins on specificity) but are
kept in step with it so the file does not state a size it is not applying. */
#date_from, #date_to{font-size: 16px;width:100%}
#recherchelibrexx{font-size:16px;width:100%;}
#price_to{font-size: 16px;width:calc(100% - 30px);margin-bottom:5px;float:left}
#slider_price_block{width:100%;}
.sub_label{font-size:0.9em; line-height:1.6; font-style: italic; color: #777;display: block}
.big_label{font-size:1em; line-height:1; font-weight: bold;float:none;clear:both;display: block;margin-bottom: 3px;}
/* Field captions inside the card: the same uppercase mono as the summary strip's
label, so a caption reads as a field name rather than as body copy. */
#main_filters .big_label{
font:700 10px/1 ui-monospace, Menlo, monospace;
letter-spacing:.12em;
text-transform:uppercase;
color:#5f6f82;
margin-bottom:7px;
}
#main_filters .sub_label{
font-size:11px; font-style:normal; font-weight:700; color:#5f6f82; margin-bottom:4px;
}
.page-id-21987 #search_events{font-size: 15px;
border: none;
padding: 13px 22px;
font-weight: 800;
opacity: 1;
background:#0a8368;
color:#fff;
border-radius:10px;
cursor:pointer;
margin: 0 0 0 0;text-align:center;width:auto;max-width:none;white-space:nowrap;}
.page-id-21987 #search_events:hover{background:#076f58;}
.page-id-21987 #search_events.btn_disabled{background:#e7ebf1;color:#9aa6b6;cursor:not-allowed;opacity: 1}
#children, #adults{
font-size: 16px;
padding: 7px 5px 6px;
border: 1px solid #ccc;width:63px;}
@media only screen and (max-width :999px) {
#main_filters{padding:14px 20px;}
#main_filters .block{width:auto;}
#main_filters .secondblock{padding: 0;}
#main_filters .thirdblock{padding: 0; width: auto;}
/*
#main_filters .middle{padding: 0 0 15px 20px;}
#main_filters .last{padding: 0 0 15px 0;width:100%}
*/
}
@media only screen and (max-width :643px) {
#main_filters .block,#main_filters .one_third{flex:1 1 100%; width:100%; float:none;margin-bottom:0px;padding:0}
#main_filters .secondblock, #main_filters .middle{padding: 0 0 0 0;}
#main_filters .thirdblock .thirty{width:48%; margin-right: 2%;}
#children, #adults{width:calc(100% - 30px);}
#main_filters .btn_block{width:100%; float:none;}
#main_filters .thirdblock #search_events{width:100%; max-width: none;}
#main_filters .thirdblock{flex:1 1 100%;}
}
/* #bbb on the card's #f7f9fc field is about 1.9:1 contrast, which is why the
placeholder was barely legible. The artifact sets no ::placeholder rule at all
and just takes the browser default (~#757575); #5f6f82 is its own --muted
token, the same grey the field labels use, and lands near 5.9:1. This file is
enqueued only inside is_page(21987), so the bare selector is page-scoped. */
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #5f6f82;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #5f6f82;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #5f6f82;
}
input.input_alert{border-color:#E54040}
input.input_alert::placeholder{ color:#E54040 }
input.input_alert:-ms-input-placeholder{ color:#E54040 }
input.input_alert::-ms-input-placeholder{ color:#E54040 }
.symb {
white-space: nowrap;
font-size: 16px;width:30px;
font-weight: 700;
padding: 3px 0 2px;
background-color: #fafafa;
text-align: center;
vertical-align: middle;
border-bottom: 1px solid #ccc;
border-top:1px solid #ccc;
color:#555;
display: block;
float: left;}
.symb.adult{font-size:18px;padding:1px 0 0}
.symb.children{font-size:14px;padding:5px 0 4px}
input,input:focus{
border-width:1px;
padding:8px 5px 7px;
}
#slider_price{margin-top:-5px;
padding:0;
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
width:100%;
height: 4px; /* Specified height */
background: #ffffff; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.9; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}
/* Mouse-over effects */
#slider_price:hover {
opacity: 1; /* Fully shown on mouse-over */
}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
#slider_price::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 15px;
height: 20px;
background: #0075ff ;
cursor: pointer;
border-radius:20px;
}
#slider_price::-moz-range-thumb {
width: 15px;
height: 20px;
background: #0075ff ;
cursor: pointer;
border-radius:20px;
}
.blockfullwidth{margin-left:0;width:100%}
.blockfullwidth .wp-block-cover__inner-container{width:80%; margin:0 auto;}
@media screen and (max-width:999px){
.blockfullwidth .wp-block-cover__inner-container{width:90%; margin:0 auto;}
}
.page-id-21987 .wp-block-gallery.has-nested-images figure.wp-block-image{align-items: center;}
.page-id-21987 .wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image){margin-bottom:30px;}
/* .page-id-21987 p removed 2026-08-11. It centred and capped EVERY on the
page at 700px, from the days when this page was mostly prose. Nothing left
needs it: the how-to block, the invite line and the results all carry their own
layout, and the only thing it still reached was the hero meta line, which it
was capping at 700px against the hero's own 28ch measure. */
.blockfullwidth p.has-large-font-size{line-height:1.2;}
/* REMOVED 2026-09-01: .page-id-21987 .entry-content{overflow:hidden}
It was a float clearfix from before .entry-content-results became a grid, and
a grid container already establishes its own block formatting context, so it
had nothing left to clear. What it DID still do was make the results area a
clip container, which silently disables position:sticky for everything inside
it: the filter rail could not pin at any offset while this line existed.
Checked before removing, on the live page, list view + map view, at 1280 and
375: scrollWidth equals clientWidth on the document, the grid, the price
histogram and the sheet either way, so nothing was relying on it to hide
horizontal overflow. Do not restore it; cap a specific overflowing child
instead. See the sticky block at the end of ft_supersearch_results.css. */
.page-id-21987 .entry-title{text-align: center; color:#fff;margin:15px auto 10px;text-shadow: 1px 1px black; font-size: 3.5em;text-transform: uppercase;letter-spacing: -0.05em;max-width:800px;line-height: 1;}
@media screen and (max-width:643px){.page-id-21987 .entry-title{font-size: 2em;}}
@media screen and (max-width:568px){.page-id-21987 .entry-title{font-size: 1.8em;}}
@media screen and (max-width:430px){.page-id-21987 .entry-title{font-size: 1.5em;}}
/* This block holds the search form, not the page header: the navy hero above it
(ft_listing_hero, page-21987.php) took that job on 2026-08-11. The grass photo
that used to sit here was the old header treatment and now reads as a second
one stacked under the first, so it is gone. The navy stays, so the form still
continues the band visually until the search card lands. The image file itself
is still live and must NOT be deleted: mystyle2.css uses all four
uploads/slider/terrain-de-foot*.jpg for .ft-cover-container.ft-cover-pitch. */
/* The band is now just a gutter: the card is the surface, the grey canvas shows
through. 8px above so the card clears the hero without touching it. */
.page-id-21987 .sr-form-header{
padding:8px 10px 0;max-width: none;
background: transparent;
margin-bottom: 0;
}
.page-id-21987 .content-area{max-width: 100%;}
.page-id-21987 .wp-block-gallery{max-width: 80%;margin:0 auto;}
.page-id-21987 .entry-content{ padding:0 ;max-width:100%;}
/* .page-id-21987 .content-area{max-width:1400px;} */
.small{font-size:0.9em;}
.smaller{font-size:0.8em;}
label.smaller{margin-top:3px;}
input:disabled {cursor: not-allowed;}
.ui-state-default, .ui-widget-content .ui-state-default {border-radius:20px;border-color:#fff; background: #fff;}
.ui-state-default:hover, .ui-widget-content .ui-state-default:hover{border-color:#007fff}
.ui-state-highlight:not(.ui-state-active), .ui-widget-content .ui-state-highlight:not(.ui-state-active){
color: #007bcc;font-weight:bold;
}
.ui-state-active, .ui-widget-content .ui-state-active{
border: 1px solid #003eff;
background: #007fff;
font-weight: normal;
color: #ffffff;
}
.ui-state-error a.ui-state-active, .ui-widget-content .ui-state-error a.ui-state-active{
border: 1px solid #003eff;
background: #007fff;
font-weight: normal;
color: #ffffff;
}
#hlog, #log{width: 100%; overflow: auto;}
#hlog div, #nbItems{font-size:16px; }
#log div {
font-size: 14px;
padding: 0px 0px 0px 30px;
line-height: 2.3;
display: inline-block;
background: #f5f2f2;
margin-right: 5px;
margin: 3px 4px 0 0;
color: #333;
border-radius: 11px;}
.ui-menu .ui-menu-item-wrapper.all{background:#0075ff; color:#fff;padding-top: 10px;
padding-bottom: 10px;border:4px solid #fff;}
.ui-menu .ui-menu-item-wrapper.all:hover{background:#004799;}
.ui-menu .ui-menu-item-wrapper {padding: 5px 5px 5px .4em;font-size:14px;}
.close_cross{font-size:0.85em;padding:5px 10px 0 0;display:none;line-height:1.6}
.close_cross:hover{text-decoration: underline;cursor:pointer;}
#log .close_cross_indiv{padding: 4px 0 0 6px;
line-height: 1.6;
color: #f00;}
#log .close_cross_indiv:hover{text-decoration: none;cursor:pointer;color:#000;}
#everything{display:none;width:100%;position:absolute; background:#0075ff;color:#fff;padding:3px 10px 8px;text-align: center; margin-top: 2px;border:2px solid #fff;}
#everything:hover{background:#004799;cursor:pointer;}
#everything span{font-size:0.8em;line-height:1; display:block}
#datepicker_container{display:none;}
.listing-loading {
display:none;
position: fixed;
width: 100%;
height: 100%;
z-index: 999999;top:0;
background: rgba(255,255,255,0.9);
max-width:100%; margin: 0 auto;
}
.listing-loading .listing-loading-content {
font-weight: bold;
width: 100%;
width: 84px;
height: 84px;
position: absolute;
top: 50%;
margin-top: -42px;
left: 50%;
margin-left: -42px;
}
.listing-loading .listing-loading-content .listing-loading-image {
width: 84px;
}
#pagination{display: block;
margin: 4px auto ;
float: right;
width: 100%;
text-align: right;
padding-top: 0px;}
#pagination button{padding: 8px 0px;color: #141412;cursor:pointer;
width: 36px;background:#fff; border-width:1px;
display: inline-block;
text-align: center;margin-right: 2px;}
#pagination button.active{
border: 1px solid #ccc; background: #ccc;color: #141412;
}
#pagination button:hover{border: 1px solid #ccc; background: #333;color:#fff; text-decoration: none}
#pagination button.active:hover{border: 1px solid #ccc; background: #ccc;color: #141412; cursor:default}
#pagination button.disabled,#pagination button.disabled:hover{background: #fff;color: #141412;opacity:0.4;cursor:default;}
#pagination button i{line-height:1em; font-size:1em;}
@media screen and (max-width:568px){
#pagination button{padding: 5px 0px;width:30px;font-size:0.85em;}
}
.hidden_team, .hidden_comp {
display: none;
}
#mapcontainer {
display:none;
}
/* #response_part{float:left; width:calc(100% - 280px);margin-left:10px;} */
#response_part{margin-top:0;}
#response-container,#mapcontainer{width:100%}
#additional_filters{padding:10px; background: #fff;border-radius:10px;border:1px solid #ccc;
margin-top:0;background: #fcfcfc;
}
#filterBy{font-size:16px; width:100%; float:none;padding: 7px 5px 6px;border: 1px solid #ccc;margin-bottom:0px;}
#additional_filters .big_label{font-size:1em; line-height:1; font-weight: bold;float:none;clear:both;display: block;border-bottom:1px solid #bbb;padding-bottom:5px; margin:15px 0 15px;}
@media only screen and (max-width :643px) {
#response_part{margin-top:20px;}
}
/* The list/map pair is a .vt segmented control now, styled in
ft_supersearch_results.css. The old #showList{display:none} lived here and
would have won on ID specificity, so the Lista button could never show. */