/* Repris du thème « flt » du site Quilium 2 (themes/flt/css/main.css et index.css). */

@font-face {
    font-family: "roboto_condensedlight";
    src: url("/fonts/robotocondensed-light-webfont.woff2") format("woff2"),
         url("/fonts/robotocondensed-light-webfont.woff") format("woff");
    font-display: swap;
}
@font-face {
    font-family: "roboto_condensedregular";
    src: url("/fonts/robotocondensed-regular-webfont.woff2") format("woff2"),
         url("/fonts/robotocondensed-regular-webfont.woff") format("woff");
    font-display: swap;
}
@font-face {
    font-family: "roboto_condensedbold";
    src: url("/fonts/robotocondensed-bold-webfont.woff2") format("woff2"),
         url("/fonts/robotocondensed-bold-webfont.woff") format("woff");
    font-display: swap;
}

:root {
    --flt-dark: #1c1c1c;
    --flt-blue: #0f8cbb;
    --flt-blue-light: #78daff;
    --flt-text: #333333;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #ffffff;
    color: var(--flt-text);
    font-family: "roboto_condensedregular", sans-serif;
    font-size: 16px;
    line-height: 1.42857;
}

/* En-tête : barre noire de 50 px + bande blanche de 80 px, logo en débord */
.flt-header { position: relative; flex: none; }

.flt-topbar {
    display: flex;
    justify-content: flex-end;
    height: 50px;
    background-color: var(--flt-dark);
}

.flt-topbar__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 40px 0 20px;
    color: #ffffff;
    font-size: .75em;
    line-height: 50px;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .5s ease-in-out;
}

.flt-topbar__link:hover,
.flt-topbar__link:focus { color: #a9a9a9; }

.flt-navbar { height: 80px; background: #ffffff; }

.flt-brand {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    padding: 0 0 0 40px;
}

.flt-brand img { display: block; width: 190px; height: auto; }

/* Bandeau photo (textimgHighlight de l'accueil) */
.flt-hero {
    position: relative;
    flex: 1 0 auto;
    min-height: 590px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 20px 60px;
    background: var(--flt-dark) url("/images/tenniscourt.jpg") no-repeat center / cover;
    color: #ffffff;
    text-align: center;
}

/* fond sombre derrière le texte : lisibilité sur la balle et la ligne blanche du court */
.flt-hero__desc {
    max-width: 660px;
    padding: 40px 50px 45px;
    background-color: rgba(28, 28, 28, .88);
    border-top: 4px solid var(--flt-blue);
}

.flt-hero__title {
    margin: 0 0 25px;
    font-family: "roboto_condensedbold", sans-serif;
    font-weight: normal;
    font-size: 2.813em;
    line-height: 50px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.flt-hero__text { font-size: .938em; line-height: 24px; }
.flt-hero__text p { margin: 0 0 20px; }
.flt-hero__text a { color: #ffffff; }

/* Bouton à liseré blanc qui se referme au survol (.btnWhite du thème) */
.btnWhite {
    position: relative;
    display: inline-block;
    margin-top: 25px;
    padding: 10px 30px;
    border: 1px solid #ffffff;
    color: #ffffff;
    font-size: .938em;
    line-height: 24px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .3s ease-in-out;
}

.btnWhite:before,
.btnWhite:after {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    transition: all .3s ease-in-out;
}

.btnWhite:before { top: -1px; left: -1px; border-left: 1px solid #ffffff; border-top: 1px solid #ffffff; }
.btnWhite:after { bottom: -1px; right: -1px; border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff; }

.btnWhite:hover:before,
.btnWhite:focus:before { top: 0; left: 0; width: 100%; height: 100%; }
.btnWhite:hover:after,
.btnWhite:focus:after { bottom: 0; right: 0; width: 100%; height: 100%; }

.btnWhite:focus-visible,
.flt-topbar__link:focus-visible {
    outline: 2px solid var(--flt-blue-light);
    outline-offset: 4px;
}

/* Pied de page bleu (wrapperBottom) */
.flt-footer {
    flex: none;
    background-color: var(--flt-blue);
    color: #ffffff;
    text-align: center;
}

.flt-footer p { margin: 0; font-size: .75em; line-height: 50px; }

@media (max-width: 991px) {
    .flt-brand img { width: 135px; }
}

@media (max-width: 767px) {
    .flt-topbar__link { margin-right: 20px; }
    .flt-brand { padding-left: 20px; }
    .flt-hero { min-height: 480px; padding-top: 100px; }
    .flt-hero__desc { padding: 30px 20px 35px; }
    .flt-hero__title { font-size: 2em; line-height: 1.2; }
}