/* =====================================================
   SPORT AUTO 67
   PAGE RENDEZ-VOUS
   ===================================================== */


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background: #1d1d1d;

    color: #d8d8d8;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-weight: 300;

}


/* =====================================================
   COULEURS
   ===================================================== */

:root {

    --background: #1d1d1d;

    --background-dark: #151515;

    --background-card: #222222;

    --blue: #0798d0;

    --blue-light: #16a9df;

    --text: #d5d5d5;

    --text-dark: #929292;

    --border: #444444;

}


/* =====================================================
   HEADER
   ===================================================== */

.header {

    height: 105px;

    background: #151515;

    border-top: 1px solid #292929;

    border-bottom: 1px solid #292929;

}


.header-inner {

    max-width: 1400px;

    height: 100%;

    margin: auto;

    padding: 0 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* LOGO */

.logo {

    text-decoration: none;

    color: white;

    display: flex;

    flex-direction: column;

    align-items: center;

}


.logo-main {

    font-size: 27px;

    letter-spacing: 10px;

    font-weight: 300;

    line-height: 1;

}


.logo-line {

    width: 260px;

    height: 2px;

    background: #ddd;

    margin: 9px 0 5px;

}


.logo-sub {

    font-size: 12px;

    letter-spacing: 5px;

    color: #ddd;

}


/* MENU */

.navigation {

    display: flex;

    gap: 38px;

}


.navigation a {

    color: #eee;

    text-decoration: none;

    font-size: 11px;

    text-transform: uppercase;

    transition: color .2s;

}


.navigation a:hover {

    color: var(--blue);

}


/* =====================================================
   PAGE
   ===================================================== */

.page {

    max-width: 1100px;

    margin: auto;

    padding: 55px 30px 70px;

}


/* =====================================================
   TITRE
   ===================================================== */

.intro-section {

    margin-bottom: 45px;

}


.section-title {

    display: flex;

    align-items: center;

    gap: 18px;

}


.title-line {

    width: 4px;

    height: 48px;

    background: var(--blue);

}


h1 {

    margin: 0;

    font-size: 38px;

    font-weight: 300;

    color: var(--blue);

}


.intro-text {

    max-width: 760px;

    margin: 22px 0 0 22px;

    line-height: 1.8;

    color: #aaa;

    font-size: 15px;

}


.intro-text strong {

    color: #ddd;

    font-weight: 400;

}


/* =====================================================
   ÉTAPES
   ===================================================== */

.steps {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

    margin-top: 40px;

}


.step {

    display: flex;

    gap: 15px;

    padding: 20px;

    background: #202020;

    border: 1px solid #303030;

}


.step-icon {

    min-width: 55px;

    height: 55px;

    border: 1px solid var(--blue);

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    color: var(--blue);

}


.step-icon span {

    position: absolute;

    top: 4px;

    left: 6px;

    font-size: 8px;

    opacity: .7;

}


.icon-calendar,
.icon-clock,
.icon-car {

    font-size: 25px;

}


.step h3 {

    margin: 2px 0 7px;

    font-size: 16px;

    font-weight: 400;

    color: #eee;

}


.step p {

    margin: 0;

    color: #888;

    font-size: 12px;

    line-height: 1.5;

}


/* =====================================================
   CARDS
   ===================================================== */

.booking-card {

    background: #202020;

    border: 1px solid #353535;

    padding: 30px;

    margin-bottom: 25px;
    
    border-radius: 7px;

}


.card-header {

    display: flex;

    gap: 18px;

    align-items: center;

    padding-bottom: 25px;

    margin-bottom: 25px;

    border-bottom: 1px solid #353535;

}


.card-number {

    color: var(--blue);

    border: 1px solid var(--blue);

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

}


.card-header h2 {

    margin: 0 0 5px;

    color: #eee;

    font-size: 21px;

    font-weight: 300;

}


.card-header p {

    margin: 0;

    color: #888;

    font-size: 12px;

}


/* =====================================================
   DATE
   ===================================================== */

.date-wrapper {

    display: flex;

    align-items: center;

    gap: 20px;

    max-width: 500px;

}


.date-icon {

    font-size: 27px;

    color: var(--blue);

}


.date-field {

    flex: 1;

}


.date-field label {

    display: block;

    margin-bottom: 7px;

    font-size: 10px;

    letter-spacing: 2px;

    color: #888;

}


input,
textarea {

    font-family: inherit;

}


.date-field input {

    width: 100%;

    padding: 14px 15px;

    background: #171717;

    border: 1px solid #484848;

    color: #eee;

    font-size: 16px;

}


.date-field input:focus {

    outline: none;

    border-color: var(--blue);

}


/* =====================================================
   CRÉNEAUX
   ===================================================== */

.availability-label {

    margin-bottom: 15px;

    color: #aaa;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.available-dot {

    display: inline-block;

    width: 7px;

    height: 7px;

    background: var(--blue);

    border-radius: 50%;

    margin-right: 7px;

}


.slots {

    display: grid;

    grid-template-columns:
        repeat(6, 1fr);

    gap: 10px;

}


.slot {

    min-height: 50px;

    border: 1px solid #484848;

    background: #181818;

    color: #ddd;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    font-size: 14px;

    transition: .2s;

}


.slot:hover {

    border-color: var(--blue);

    color: white;

}


.slot-clock {

    color: var(--blue);

    font-size: 15px;

}


.slot.selected {

    background: var(--blue);

    border-color: var(--blue);

    color: white;

}


.slot.selected .slot-clock {

    color: white;

}


.slot.disabled {

    background: #171717;

    color: #555;

    border-color: #292929;

    cursor: not-allowed;

    text-decoration: line-through;

}


.slot.disabled .slot-clock {

    color: #444;

}


/* =====================================================
   LÉGENDE
   ===================================================== */

.legend {

    display: flex;

    gap: 25px;

    margin-top: 17px;

    color: #777;

    font-size: 11px;

}


.legend i {

    display: inline-block;

    width: 7px;

    height: 7px;

    margin-right: 6px;

    border-radius: 50%;

}


.legend-available {

    background: var(--blue);

}


.legend-unavailable {

    background: #444;

}


/* =====================================================
   FERMÉ
   ===================================================== */

.closed {

    border: 1px solid #383838;

    background: #191919;

    padding: 25px;

    display: flex;

    align-items: center;

    gap: 15px;

}


.closed-icon {

    width: 40px;

    height: 40px;

    border: 1px solid #666;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #999;

    font-size: 20px;

}


.closed strong {

    display: block;

    color: #ccc;

    font-weight: 400;

}


.closed span {

    display: block;

    margin-top: 5px;

    color: #777;

    font-size: 12px;

}


/* =====================================================
   FORMULAIRE
   ===================================================== */

.form-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 20px;

}


.form-group {

    display: flex;

    flex-direction: column;

}


.form-group.full {

    grid-column: 1 / -1;

}


.form-group label {

    margin-bottom: 8px;

    font-size: 10px;

    letter-spacing: 1.5px;

    color: #888;

}


.form-group input,
.form-group textarea {

    width: 100%;

    background: #171717;

    border: 1px solid #454545;

    color: #eee;

    padding: 13px 14px;

    font-size: 14px;

}


.form-group textarea {

    resize: vertical;

    min-height: 100px;

}


.form-group input::placeholder,
.form-group textarea::placeholder {

    color: #555;

}


.form-group input:focus,
.form-group textarea:focus {

    outline: none;

    border-color: var(--blue);

}


/* =====================================================
   CRÉNEAU SÉLECTIONNÉ
   ===================================================== */

.selected-slot {

    margin-top: 25px;

    padding: 17px;

    border: 1px solid #353535;

    background: #191919;

    display: flex;

    align-items: center;

    gap: 13px;

}


.selected-icon {

    width: 35px;

    height: 35px;

    background: var(--blue);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

}


.selected-slot span {

    display: block;

    color: #777;

    font-size: 9px;

    letter-spacing: 1.5px;

    margin-bottom: 3px;

}


.selected-slot strong {

    color: #eee;

    font-size: 15px;

    font-weight: 400;

}


/* =====================================================
   BOUTON
   ===================================================== */

.submit-btn {

    width: 100%;

    margin-top: 18px;

    padding: 17px;

    background: var(--blue);

    border: none;

    color: white;

    font-size: 12px;

    letter-spacing: 1.5px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    transition: .2s;

}


.submit-btn b {

    font-size: 20px;

    font-weight: 300;

}


.submit-btn:hover {

    background: var(--blue-light);

}


.submit-btn:disabled {

    background: #353535;

    color: #777;

    cursor: not-allowed;

}


.form-note {

    color: #666;

    font-size: 10px;

    line-height: 1.7;

    margin-bottom: 0;

}


/* =====================================================
   MESSAGES
   ===================================================== */

.message {

    padding: 18px 22px;

    margin-bottom: 25px;

    display: flex;

    align-items: center;

    gap: 15px;

}


.message-icon {

    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}


.message strong {

    display: block;

    font-size: 14px;

    font-weight: 400;

}


.message span {

    display: block;

    margin-top: 4px;

    font-size: 11px;

}


.message.success {

    border: 1px solid #276a48;

    background: #17251e;

}


.message.success .message-icon {

    background: #276a48;

    color: white;

}


.message.success strong {

    color: #79d2a4;

}


.message.success span {

    color: #73927f;

}


.message.error {

    border: 1px solid #704040;

    background: #261a1a;

}


.message.error .message-icon {

    background: #704040;

    color: white;

}


.message.error strong {

    color: #e09a9a;

}


.message.error span {

    color: #997474;

}


/* =====================================================
   CONTACT
   ===================================================== */

.contact-strip {

    border-top: 1px solid #414141;

    border-bottom: 1px solid #414141;

    margin-top: 45px;

    padding: 28px 0;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 30px;

}


.contact-item {

    display: flex;

    gap: 14px;

}


.contact-icon {

    font-size: 21px;

    color: var(--blue);

}


.contact-item strong {

    display: block;

    color: #ddd;

    font-size: 12px;

    font-weight: 400;

    margin-bottom: 7px;

}


.contact-item span {

    color: #777;

    font-size: 11px;

    line-height: 1.6;

}


/* =====================================================
   FOOTER
   ===================================================== */

.footer {

    background: #151515;

    border-top: 1px solid #292929;

    padding: 25px 30px;

    display: flex;

    justify-content: space-between;

    color: #666;

    font-size: 9px;

    letter-spacing: 1px;

}


/* =====================================================
   RESPONSIVE TABLETTE
   ===================================================== */

@media (max-width: 900px) {


    .navigation {

        gap: 20px;

    }


    .navigation a {

        font-size: 9px;

    }


    .slots {

        grid-template-columns:
            repeat(4, 1fr);

    }


    .steps {

        grid-template-columns:
            1fr;

    }


    .contact-strip {

        grid-template-columns:
            1fr;

    }

}


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

@media (max-width: 650px) {


    .header {

        height: auto;

    }


    .header-inner {

        padding: 20px 15px;

        flex-direction: column;

        gap: 20px;

    }


    .logo-main {

        font-size: 21px;

        letter-spacing: 7px;

    }


    .logo-line {

        width: 210px;

    }


    .navigation {

        width: 100%;

        justify-content: center;

        gap: 13px;

        flex-wrap: wrap;

    }


    .navigation a {

        font-size: 8px;

    }


    .page {

        padding: 35px 15px 50px;

    }


    h1 {

        font-size: 29px;

    }


    .intro-text {

        margin-left: 15px;

        font-size: 13px;

    }


    .booking-card {

        padding: 20px 16px;

    }


    .card-header {

        align-items: flex-start;

    }


    .card-header h2 {

        font-size: 18px;

    }


    .card-header p {

        line-height: 1.5;

    }


    .slots {

        grid-template-columns:
            repeat(3, 1fr);

        gap: 7px;

    }


    .slot {

        min-height: 47px;

        font-size: 13px;

    }


    .slot-clock {

        display: none;

    }


    .form-grid {

        grid-template-columns:
            1fr;

    }


    .form-group.full {

        grid-column: auto;

    }


    .contact-strip {

        gap: 22px;

    }


    .footer {

        flex-direction: column;

        gap: 10px;

        text-align: center;

    }

}


/* =====================================================
   TRÈS PETITS ÉCRANS
   ===================================================== */

@media (max-width: 400px) {


    .slots {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .section-title {

        gap: 12px;

    }


    .title-line {

        width: 3px;

        height: 38px;

    }


    h1 {

        font-size: 25px;

    }


    .date-wrapper {

        gap: 10px;

    }


    .date-icon {

        display: none;

    }

}


/* =====================================================
   CALENDRIER
   ===================================================== */

.calendar-container {

    max-width: 620px;

    background: #181818;

    border: 1px solid #3c3c3c;

    padding: 25px;

}


/* =====================================================
   ENTÊTE CALENDRIER
   ===================================================== */

.calendar-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 20px;

    border-bottom: 1px solid #333;

}


.calendar-month {

    text-align: center;

    display: flex;

    flex-direction: column;

}


.calendar-month span:first-child {

    color: #eee;

    font-size: 21px;

    font-weight: 300;

    text-transform: uppercase;

}


.calendar-month span:last-child {

    color: var(--blue);

    font-size: 11px;

    letter-spacing: 2px;

    margin-top: 4px;

}


.calendar-nav {

    width: 42px;

    height: 42px;

    background: transparent;

    border: 1px solid #444;

    color: #aaa;

    font-size: 30px;

    font-weight: 200;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: .2s;

}


.calendar-nav:hover {

    border-color: var(--blue);

    color: var(--blue);

}


.calendar-nav:disabled {

    opacity: .25;

    cursor: not-allowed;

}


/* =====================================================
   JOURS DE LA SEMAINE
   ===================================================== */

.calendar-weekdays {

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    margin-top: 20px;

    margin-bottom: 8px;

}


.calendar-weekdays div {

    text-align: center;

    color: #666;

    font-size: 9px;

    letter-spacing: 1px;

}


/* =====================================================
   JOURS
   ===================================================== */

.calendar-days {

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    gap: 5px;

}


.calendar-day {

    height: 48px;

    background: transparent;

    border: 1px solid transparent;

    color: #ccc;

    cursor: pointer;

    font-size: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    transition: .15s;

}


.calendar-day:hover {

    border-color: var(--blue);

    color: white;

}


.calendar-day.empty {

    cursor: default;

}


.calendar-day.past {

    color: #414141;

    cursor: not-allowed;

}


.calendar-day.closed {

    color: #444;

    cursor: not-allowed;

}


.calendar-day.today {

    border-color: #555;

}


.calendar-day.selected {

    background: var(--blue);

    border-color: var(--blue);

    color: white;

}


.calendar-day.today:not(.selected)::after {

    content: "";

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: var(--blue);

    position: absolute;

    bottom: 5px;

}


/* =====================================================
   DATE SÉLECTIONNÉE
   ===================================================== */

.calendar-selected {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 20px;

    padding-top: 18px;

    border-top: 1px solid #333;

}


.calendar-selected-icon {

    width: 34px;

    height: 34px;

    background: var(--blue);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

}


.calendar-selected span {

    display: block;

    color: #666;

    font-size: 9px;

    letter-spacing: 1.5px;

    margin-bottom: 3px;

}


.calendar-selected strong {

    color: #ddd;

    font-size: 14px;

    font-weight: 300;

}


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

@media (max-width: 600px) {

    .calendar-container {

        padding: 18px 12px;

    }


    .calendar-day {

        height: 43px;

        font-size: 12px;

    }


    .calendar-weekdays div {

        font-size: 8px;

    }


    .calendar-nav {

        width: 38px;

        height: 38px;

    }


    .calendar-month span:first-child {

        font-size: 18px;

    }

}


@media (max-width: 380px) {

    .calendar-day {

        height: 40px;

    }

}


/* =====================================================
   DATE BLOQUÉE - CONGÉS / FERMETURE EXCEPTIONNELLE
===================================================== */

.calendar-day.blocked {
    background: #241818;
    color: #555;
    cursor: not-allowed;
}