/* =========================================================
   PAGES SECONDAIRES
   Le Mobile 83
   À propos + Contact
   ========================================================= */


/* =========================================================
   ANIMATION D'ENTRÉE
   ========================================================= */

.page-enter {
    animation:
        pageEnter 750ms
        cubic-bezier(0.22, 1, 0.36, 1)
        both;
}

.page-enter-delay {
    animation-delay: 120ms;
}

@keyframes pageEnter {

    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   ABOUT HERO
   ========================================================= */

.about-hero {
    overflow: hidden;

    padding: 90px 0;

    background: var(--dark);
}

.about-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 80px;

    align-items: center;
}

.about-hero-copy h1 {
    max-width: 650px;

    margin: 0 0 28px;

    color: #fff;

    font-family: var(--font-heading);

    font-size: clamp(
        3.2rem,
        5.7vw,
        6rem
    );

    font-weight: 600;

    line-height: 0.96;

    letter-spacing: -0.055em;
}

.about-hero-lead {
    max-width: 590px;

    margin: 0;

    color: #aeb6bb;

    font-size: 1rem;

    line-height: 1.75;
}

.about-hero-actions {
    display: flex;

    gap: 28px;

    align-items: center;

    flex-wrap: wrap;

    margin-top: 34px;
}

.about-hero-media {
    position: relative;

    min-width: 0;
}

.about-hero-image {
    height: 610px;

    overflow: hidden;

    background: #202629;
}

.about-hero-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform 1.1s
        cubic-bezier(0.22, 1, 0.36, 1);
}

.about-hero-media:hover img {
    transform: scale(1.025);
}

.about-photo-caption {
    position: absolute;

    right: 0;
    bottom: 0;

    width: min(370px, 88%);

    padding: 22px 24px;

    background: #fff;

    color: #111719;
}

.about-photo-caption span {
    display: block;

    margin-bottom: 5px;

    color: #727b80;

    font-size: 0.65rem;

    font-weight: 700;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}

.about-photo-caption strong {
    font-family: var(--font-heading);

    font-size: 0.92rem;
}


/* =========================================================
   ABOUT INTRO
   ========================================================= */

.about-intro {
    padding: 110px 0;

    background: var(--bg-main);
}

.about-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(350px, 0.7fr);

    gap: 100px;

    align-items: start;
}

.about-intro h2 {
    max-width: 680px;

    margin-bottom: 0;
}

.about-intro-copy {
    max-width: 520px;
}

.about-intro-copy p {
    margin-top: 0;
    margin-bottom: 20px;

    line-height: 1.75;
}

.about-intro-lead {
    color: var(--text);

    font-size: 1.03rem;
}


/* =========================================================
   ABOUT VALUES
   ========================================================= */

.about-values {
    padding: 105px 0;

    background: #fff;
}

.about-values-heading {
    margin-bottom: 55px;
}

.about-values-heading h2 {
    margin-bottom: 0;
}

.about-values-list {
    display: grid;

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

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.about-value {
    min-height: 255px;

    padding: 30px;

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

    transition:
        background-color 220ms ease;
}

.about-value:last-child {
    border-right: 0;
}

.about-value:hover {
    background: #f7f7f4;
}

.about-value > span {
    display: block;

    margin-bottom: 50px;

    color: var(--accent-dark);

    font-size: 0.67rem;

    font-weight: 700;
}

.about-value h3 {
    margin: 0 0 12px;

    font-family: var(--font-heading);

    font-size: 1.15rem;
}

.about-value p {
    max-width: 330px;

    margin: 0;

    line-height: 1.65;
}


/* =========================================================
   ABOUT PRACTICAL
   ========================================================= */

.about-practical {
    padding: 90px 0;

    background: var(--dark-soft);
}

.about-practical-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    border-top: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);
}

.about-address,
.about-hours {
    padding: 48px;
}

.about-address {
    border-right: 1px solid var(--border-dark);
}

.about-practical h2 {
    max-width: 570px;

    color: #fff;
}

.about-address > p:not(.section-kicker) {
    max-width: 520px;

    color: #aeb6bb;

    line-height: 1.7;
}

.about-services-short {
    display: grid;

    gap: 0;

    margin: 35px 0;
}

.about-services-short span {
    padding: 13px 0;

    color: #c8ced1;

    border-bottom: 1px solid var(--border-dark);

    font-size: 0.88rem;
}

.about-services-short span:first-child {
    border-top: 1px solid var(--border-dark);
}

.about-hours-list {
    list-style: none;

    margin: 30px 0 0;

    padding: 0;
}

.about-hours-list li {
    display: flex;

    justify-content: space-between;

    gap: 25px;

    padding: 15px 0;

    border-bottom: 1px solid var(--border-dark);

    color: #aeb6bb;
}

.about-hours-list li strong {
    color: #fff;

    text-align: right;
}


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

.contact-hero {
    padding: 88px 0;

    background: var(--dark);
}

.contact-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(350px, 0.48fr);

    gap: 95px;

    align-items: end;
}

.contact-hero h1 {
    max-width: 720px;

    margin: 0;

    color: #fff;

    font-family: var(--font-heading);

    font-size: clamp(
        3.2rem,
        5.6vw,
        5.8rem
    );

    font-weight: 600;

    line-height: 0.97;

    letter-spacing: -0.055em;
}

.contact-hero-side {
    max-width: 450px;

    justify-self: end;
}

.contact-hero-side > p {
    margin-top: 0;

    color: #aeb6bb;

    line-height: 1.75;
}

.contact-hero-actions {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 13px;

    margin-top: 25px;
}


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

.contact-main {
    padding: 100px 0;

    background: var(--bg-main);

    scroll-margin-top:
        calc(var(--header-height) + 20px);
}

.contact-main-grid {
    display: grid;

    grid-template-columns:
        minmax(280px, 0.65fr)
        minmax(500px, 1.35fr);

    gap: 80px;
}

.contact-info h2,
.contact-form-heading h2 {
    margin-bottom: 22px;
}

.contact-info-list {
    border-top: 1px solid var(--border);
}

.contact-info-line {
    display: grid;

    grid-template-columns:
        135px
        minmax(0, 1fr);

    gap: 20px;

    padding: 20px 0;

    border-bottom: 1px solid var(--border);
}

.contact-info-line > span {
    color: #7d858a;

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.contact-info-line strong,
.contact-info-line a {
    color: var(--text);

    font-weight: 600;

    text-decoration: none;
}

.contact-info-note {
    margin-top: 45px;

    padding-top: 24px;

    border-top: 1px solid var(--border);
}

.contact-info-note span {
    color: var(--accent-dark);

    font-size: 0.69rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.contact-info-note p {
    max-width: 360px;

    margin-bottom: 0;

    line-height: 1.7;
}

.contact-form-heading {
    max-width: 680px;

    margin-bottom: 38px;
}

.contact-form-heading > p:last-child {
    max-width: 590px;

    line-height: 1.7;
}


/* =========================================================
   FORM
   ========================================================= */

.contact-form {
    width: 100%;
}

.form-grid {
    display: grid;

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

    gap: 26px 22px;
}

.form-field {
    position: relative;

    margin-bottom: 26px;
}

.form-field label {
    display: block;

    margin-bottom: 9px;

    color: var(--text);

    font-size: 0.78rem;

    font-weight: 600;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;

    border: 1px solid #cfd2d2;

    border-radius: 0;

    outline: 0;

    background: #fff;

    color: var(--text);

    font: inherit;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}

.form-field input,
.form-field select {
    min-height: 55px;

    padding: 0 16px;
}

.form-field textarea {
    min-height: 170px;

    padding: 15px 16px;

    resize: vertical;

    line-height: 1.6;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--accent-dark);

    box-shadow:
        0 0 0 2px
        rgba(95, 118, 139, 0.1);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #92999d;
}

.form-help {
    display: block;

    margin-top: 8px;

    color: #737c81;

    font-size: 0.72rem;
}

.field-error {
    display: block;

    min-height: 16px;

    margin-top: 6px;

    color: #a03f3f;

    font-size: 0.7rem;
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
    border-color: #a95555;
}


/* =========================================================
   CONSENT
   ========================================================= */

.form-consent {
    margin-top: 4px;
}

.form-consent > label {
    display: grid;

    grid-template-columns:
        20px
        minmax(0, 1fr);

    gap: 14px;

    align-items: start;

    padding: 18px;

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    cursor: pointer;
}

.form-consent input {
    width: 18px;
    height: 18px;

    min-height: 0;

    margin-top: 1px;

    padding: 0;

    accent-color: var(--accent-dark);
}

.form-consent label span {
    font-size: 0.76rem;

    font-weight: 500;

    line-height: 1.55;
}

.form-submit-row {
    display: flex;

    gap: 28px;

    align-items: center;

    flex-wrap: wrap;

    margin-top: 28px;
}

.form-status {
    min-height: 24px;

    margin-top: 20px;

    font-size: 0.78rem;

    font-weight: 600;
}

.form-status.is-success {
    color: #2e755d;
}

.form-status.is-error {
    color: #a33d3d;
}

.form-honeypot {
    position: absolute !important;

    left: -9999px !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;
}


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

.contact-location {
    padding: 95px 0;

    background: #fff;
}

.contact-location-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 50px;

    align-items: end;

    margin-bottom: 42px;
}

.contact-location-heading h2 {
    margin-bottom: 0;
}

.contact-location-heading > p {
    margin: 0;

    color: #697176;

    text-align: right;

    line-height: 1.6;
}

.contact-map {
    height: 430px;

    overflow: hidden;

    background: #e8e8e5;
}

.contact-map iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


/* =========================================================
   IMPORTANT :
   EMPÊCHE LES ANCIENNES ICÔNES GÉANTES
   ========================================================= */

.contact-info svg,
.contact-main svg,
.about-practical svg {
    width: 20px;
    height: 20px;

    max-width: 20px;
    max-height: 20px;
}


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

@media (max-width: 1050px) {

    .about-hero-grid {
        gap: 45px;
    }

    .about-hero-image {
        height: 520px;
    }

    .contact-main-grid {
        gap: 50px;
    }

}


@media (max-width: 900px) {

    .about-hero-grid,
    .about-intro-grid,
    .contact-hero-grid,
    .contact-main-grid {
        grid-template-columns: 1fr;
    }

    .about-hero-grid {
        gap: 45px;
    }

    .about-hero-image {
        height: 500px;
    }

    .about-intro-grid {
        gap: 40px;
    }

    .about-values-list {
        grid-template-columns: 1fr;
    }

    .about-value {
        min-height: auto;

        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .about-value:last-child {
        border-bottom: 0;
    }

    .about-value > span {
        margin-bottom: 22px;
    }

    .about-practical-grid {
        grid-template-columns: 1fr;
    }

    .about-address {
        border-right: 0;
        border-bottom: 1px solid var(--border-dark);
    }

    .contact-hero-side {
        justify-self: start;
    }

}


@media (max-width: 700px) {

    .about-hero,
    .contact-hero {
        padding: 60px 0;
    }

    .about-hero-copy h1,
    .contact-hero h1 {
        font-size: clamp(
            2.8rem,
            13vw,
            4.2rem
        );
    }

    .about-hero-image {
        height: 390px;
    }

    .about-intro,
    .about-values,
    .contact-main,
    .contact-location {
        padding: 70px 0;
    }

    .about-address,
    .about-hours {
        padding: 34px 24px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .contact-main-grid {
        gap: 65px;
    }

    .contact-location-heading {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .contact-location-heading > p {
        text-align: left;
    }

    .contact-map {
        height: 340px;
    }

}


@media (max-width: 480px) {

    .about-hero-image {
        height: 320px;
    }

    .about-photo-caption {
        position: relative;

        width: 100%;
    }

    .contact-info-line {
        grid-template-columns: 1fr;

        gap: 6px;
    }

    .about-hours-list li {
        flex-direction: column;

        gap: 5px;
    }

    .about-hours-list li strong {
        text-align: left;
    }

}


/* =========================================================
   ACCESSIBILITÉ MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .page-enter,
    .page-enter-delay {
        animation: none;
    }

    .about-hero-image img {
        transition: none;
    }

}


/* =========================================================
   CONTACT - LOCALISATION SANS SERVICE TIERS
   ========================================================= */

.contact-map-address {
    min-height: 360px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 60px;

    background:
        #181d20;

    color:
        #ffffff;

    border:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.contact-map-address > div {
    width:
        min(
            100%,
            560px
        );
}


.contact-map-address .section-kicker {
    color:
        #8fa2b4;
}


.contact-map-address h3 {
    margin:
        10px 0 24px;

    color:
        #ffffff;

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

    font-size:
        clamp(
            2rem,
            5vw,
            3.5rem
        );

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        -0.04em;
}


.contact-map-address p {
    margin:
        0 0 16px;

    color:
        #a1aaaf;

    font-size:
        1rem;

    line-height:
        1.8;
}


/* =========================================================
   CONTACT - INFORMATION RGPD
   ========================================================= */

.form-privacy-information {
    margin-top: 18px;

    padding:
        18px 20px;

    border:
        1px solid
        #d2d0ca;

    background:
        rgba(
            255,
            255,
            255,
            0.4
        );
}


.form-privacy-information p {
    margin: 0;

    color:
        #687075;

    font-size:
        0.8rem;

    line-height:
        1.7;
}


.form-privacy-information a {
    color:
        #536c82;

    font-weight:
        600;

    text-decoration:
        underline;

    text-underline-offset:
        3px;
}


.form-consent a {
    color:
        inherit;

    font-weight:
        700;

    text-decoration:
        underline;

    text-underline-offset:
        3px;
}


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

@media (
    max-width: 768px
) {

    .contact-map-address {
        min-height:
            300px;

        padding:
            40px 26px;
    }

}