/* =========================================================
   F-18 DE LA BAIE
   STYLE GLOBAL DU SITE
   ========================================================= */

/* --- Couleurs F-18 --- */
:root {
    --f18-red: #d71920;
    --f18-dark: #171717;
    --f18-grey: #5f6368;
    --f18-light: #f5f6f7;
    --f18-white: #ffffff;
    --f18-border: #e4e6e8;
}


/* =========================================================
   TYPOGRAPHIE GÉNÉRALE
   ========================================================= */

body {
    color: var(--f18-dark);
    line-height: 1.65;
}


/* TITRE PRINCIPAL DES PAGES */

.entry-title,
.page-title,
h1 {
    font-size: clamp(30px, 4vw, 42px) !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px;
    margin-bottom: 24px !important;
}


/* TITRES DE SECTIONS */

h2 {
    font-size: clamp(24px, 3vw, 31px) !important;
    line-height: 1.25 !important;
    font-weight: 750 !important;
    margin-top: 32px;
    margin-bottom: 16px;
}


/* SOUS-TITRES */

h3 {
    font-size: clamp(20px, 2.5vw, 24px) !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    margin-top: 24px;
    margin-bottom: 12px;
}


/* =========================================================
   PARAGRAPHES ET LISTES
   ========================================================= */

p {
    line-height: 1.7;
}

ul,
ol {
    line-height: 1.7;
}

li {
    margin-bottom: 5px;
}


/* =========================================================
   LIENS
   ========================================================= */

.entry-content a:not(.wp-block-button__link),
.page-content a:not(.wp-block-button__link) {
    color: var(--f18-red);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.entry-content a:hover,
.page-content a:hover {
    text-decoration-thickness: 2px;
}


/* =========================================================
   BOUTONS WORDPRESS
   ========================================================= */

.wp-block-button__link,
button,
input[type="submit"],
input[type="button"] {
    border-radius: 8px !important;
    font-weight: 700 !important;
    transition: all 0.2s ease;
}

.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    transform: translateY(-1px);
}


/* =========================================================
   IMAGES
   ========================================================= */

.entry-content img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   SÉPARATEURS
   ========================================================= */

hr,
.wp-block-separator {
    border: 0;
    border-top: 1px solid var(--f18-border);
    margin: 35px 0;
}


/* =========================================================
   TABLEAUX
   ========================================================= */

table {
    width: 100%;
    border-collapse: collapse;
}

table th {
    background: var(--f18-dark);
    color: var(--f18-white);
    font-weight: 700;
}

table th,
table td {
    padding: 12px 15px;
    border: 1px solid var(--f18-border);
}

table tr:nth-child(even) td {
    background: var(--f18-light);
}


/* =========================================================
   FORMULAIRES
   ========================================================= */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
    border: 1px solid #d8dadd;
    border-radius: 7px;
    padding: 11px 13px;
    font-size: 16px;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--f18-red);
    outline: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .entry-title,
    .page-title,
    h1 {
        font-size: 30px !important;
    }

    h2 {
        font-size: 24px !important;
    }

    h3 {
        font-size: 20px !important;
    }

    table {
        font-size: 14px;
    }
}