/*  -----------------
    COMMON PROPERTIES
    ----------------- */

.contact__container,
.default__container,
.privacy__container,
.unsubscribe__container {
    width: 100vw;
    max-width: 1200px;
    margin: auto;
}

/*  ----
    HERO
    ---- */

.hero {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    min-height: 55vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1.5rem;
    background-color: var(--heroBackground);
    color: var(--heroText);
    opacity: 0;
    transition: 350ms ease-in-out;
}

.hero.appear {
    opacity: 1;
}

.hero--orange {
    background-color: var(--logoOrange);
}

.hero--blue {
    background-color: var(--logoBlue);
}

.hero--photo {
    background-image: linear-gradient(rgba(10, 10, 12, 0.55), rgba(10, 10, 12, 0.55)), url('../images/site/hero-home.jpg');
    background-size: cover;
    background-position: center;
}

.hero__eyebrow {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.hero__title {
    font-family: 'Calistoga', cursive;
    font-weight: 400;
    font-size: var(--mainTitleSize);
    line-height: 1.15;
    margin: 0 0 1.5rem 0;
    max-width: 42rem;
}

.hero__text {
    display: block;
    font-size: var(--textSize);
    max-width: 34rem;
    margin: 0 0 1.5rem 0;
}

.hero__cta {
    display: inline-block;
    color: var(--menuText);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.9rem 2rem;
    cursor: pointer;
    /* same gradient treatment as .button (e.g. contact.aspx's ENVOYER) so hero CTAs
       read as clearly clickable instead of a flat, easy-to-miss pill */
    background-image: linear-gradient(135deg, var(--logoOrange) 0%, var(--logoBlue) 100%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: transform 150ms ease, box-shadow 250ms ease, filter 250ms ease;
}

.hero__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
    filter: brightness(1.08) saturate(1.1);
}

/*  -------------
    SECTION LABEL
    ------------- */

.section-label {
    display: block;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--textBlack);
    margin: 3rem 0 1.5rem 0;
}

/*  ------------
    PILLAR CARDS
    ------------ */

.pillar-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto 3rem auto;
    padding: 0 1.5rem;
}

@media screen and (min-width: 740px) {
    .pillar-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.pillar-card {
    display: block;
    text-decoration: none;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--heroText);
    background-color: var(--heroBackground);
    background-image: linear-gradient(135deg, #2c2c2f 0%, #0f0f10 100%);
    transition: 250ms ease-in-out;
}

.pillar-card:hover {
    opacity: 0.85;
}

.pillar-card--orange {
    background-color: var(--logoOrange);
    background-image: linear-gradient(135deg, var(--logoOrange) 0%, var(--logoOrangeHov) 100%);
}

.pillar-card--blue {
    background-color: var(--logoBlue);
    background-image: linear-gradient(135deg, var(--logoBlue) 0%, var(--logoBlueHov) 100%);
}

.pillar-card__title {
    display: block;
    font-family: 'Calistoga', cursive;
    font-size: 1.4rem;
    margin: 0 0 0.75rem 0;
}

.pillar-card__text {
    display: block;
    font-size: 0.95rem;
    opacity: 0.85;
}

/*  ---------------
    CONTENT SECTION
    --------------- */

.content-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.content-section__text {
    display: block;
    font-size: var(--textSize);
    color: var(--logoBlue);
    text-align: justify;
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
}

.content-section .button {
    display: inline-block;
    width: auto;
    text-decoration: none;
}

/*  ------------
    FEATURE GRID
    ------------ */

.feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto 3rem auto;
    padding: 0 1.5rem;
}

@media screen and (min-width: 700px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1000px) {
    .feature-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.feature-card {
    padding: 1.5rem 0 0 0;
    border-top: 2px solid var(--logoOrange);
}

.feature-card__title {
    display: block;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--logoOrange);
    margin-bottom: 0.5rem;
}

.feature-card__text {
    display: block;
    font-size: 0.95rem;
    color: var(--logoBlue);
}

.feature-card--blue {
    border-top-color: var(--logoBlue);
}

.feature-card--blue .feature-card__title {
    color: var(--logoBlue);
}

/*  --------------------------------
    CHECKLIST GRID (numbered items —
    visually distinct from feature
    cards so "what to prepare" reads
    apart from "what's offered")
    -------------------------------- */

.checklist-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    max-width: 1000px;
    margin: 0 auto 3rem auto;
    padding: 0 1.5rem;
}

@media screen and (min-width: 700px) {
    .checklist-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1000px) {
    .checklist-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.checklist-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.checklist-card__number {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-image: linear-gradient(135deg, var(--logoOrange) 0%, var(--logoBlue) 100%);
    color: var(--menuText);
    font-family: 'Calistoga', cursive;
    font-size: 1rem;
}

.checklist-card__title {
    display: block;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--logoOrange);
    margin-bottom: 0.35rem;
}

.checklist-card__text {
    display: block;
    font-size: 0.95rem;
    color: var(--logoBlue);
}

/*  -------
    CONTACT
    ------- */

.contact__container {
    display: flex;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.contact__container .card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 46rem;
    padding: 2.5rem;
    background-color: var(--menuText);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

.contact__container .contact__label {
    text-align: left;
    margin: 2rem 0 1rem 0;
}

.contact__container .contact__label:first-child {
    margin-top: 0;
}

.contact__container .contact__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem 1.5rem;
}

@media screen and (min-width: 600px) {
    .contact__container .contact__grid {
        grid-template-columns: 1fr 1fr;
    }

    .contact__container .contact__grid--project {
        grid-template-columns: repeat(3, 1fr);
    }
}

.contact__container .contact__full {
    grid-column: 1 / -1;
}

.contact__container .card__lastName,
.contact__container .card__firstName,
.contact__container .card__mail,
.contact__container .card__phone,
.contact__container .card__company,
.contact__container .card__description {
    display: grid;
    position: relative;
    min-height: 2.5rem;
}

.contact__container .card__dropdown {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.contact__container .lbl__dropdown {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--logoOrange);
}

.contact__container .card__description {
    margin-top: 0.5rem;
}

.contact__container .tb__description {
    height: 8rem;
}

.contact__container .lbl__lastName,
.contact__container .lbl__firstName,
.contact__container .lbl__mail,
.contact__container .lbl__phone,
.contact__container .lbl__company,
.contact__container .lbl__description {
    position: absolute;
    pointer-events: none;
    font-size: 1.1rem;
    font-weight: 300;
    top: 0.35rem;
    left: 0.15rem;
    color: var(--logoBlue);
    transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.contact__container .tb__lastName:focus ~ .lbl__lastName,
.contact__container .tb__lastName:valid ~ .lbl__lastName,
.contact__container .tb__firstName:focus ~ .lbl__firstName,
.contact__container .tb__firstName:valid ~ .lbl__firstName,
.contact__container .tb__mail:focus ~ .lbl__mail,
.contact__container .tb__mail:valid ~ .lbl__mail,
.contact__container .tb__phone:focus ~ .lbl__phone,
.contact__container .tb__phone:valid ~ .lbl__phone,
.contact__container .tb__company:focus ~ .lbl__company,
.contact__container .tb__company:valid ~ .lbl__company,
.contact__container .tb__description:focus ~ .lbl__description,
.contact__container .tb__description:valid ~ .lbl__description {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--logoOrange);
    top: -0.7rem;
    left: 0.15rem;
}

.contact__container .card__verify {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--logoSilver);
}

.contact__container .card__verify-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--logoBlue);
    margin-bottom: 0.75rem;
}

.contact__container .card__question {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.contact__container .image__question {
    max-width: 14rem;
    width: 100%;
    height: auto;
}

.contact__container .textbox__question {
    width: 4rem;
    flex-shrink: 0;
    text-align: center;
}

.contact__container .button {
    margin-top: 2rem;
}

/*  -------
    DEFAULT
    ------- */

.default__container {
    position: relative;
}

.default__container .card__img {
    width: 100%;
}

.default__container .card__main-title {
    position: absolute;
    top: 1rem;
    left: 0;
    right: 0;
    text-align: center;
    font-size: var(--mainTitleSize);
    font-family: 'Calistoga', cursive;
    color: var(--logoOrange);
    opacity: 0;
    transform: translateY(1rem);
    transition: 350ms ease-in-out;
}

.default__container .card__main-title.appear {
    opacity: 1;
    transform: translateY(0);
}

.default__container .card__title {
    position: relative;
    display: block;
    text-align: center;
    margin: 2rem;
    font-size: var(--titleSize);
    font-weight: 600;
    color: var(--logoOrange);
    opacity: 0;
    transform: translateY(1rem);
    transition: 300ms ease-in-out;
}

.default__container .card__title.appear {
    transform: translateY(0);
    opacity: 1;
}

.default__container .card__paragraphe-ctn {
    display: grid;
    grid-template-columns: 2.5rem 15fr;
    grid-template-areas: "number paragraphe";
    opacity: 0;
    transform: translateY(1rem);
    transition: 300ms ease-in-out;
    /* .default__container has no side padding of its own (it's 100vw up to the 1200px
       cap), so on mobile the "01"-"04" numbers and their text sit flush against the
       screen edges; give this row its own gutter below the desktop breakpoint. */
    padding: 0 1.25rem;
}

.default__container .card__number {
    grid-area: number;
    font-family: 'Calistoga', cursive;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--logoOrange);
    margin: 0;
}

.default__container .card__paragraphe {
    grid-area: paragraphe;
    position: relative;
    display: block;
    text-align: justify;
    margin: 0 2rem 2rem 0;
    padding-left: 1rem;
    border-left: 2px solid var(--logoOrange);
    font-size: var(--textSize);
    color: var(--logoBlue);
}

.default__container .card__paragraphe-ctn.appear {
    opacity: 1;
    transform: translateY(0);
}

.default__container .card__facebook {
    margin: 0 2rem;
    display: grid;
    grid-template-columns: 3fr 6fr 2fr;
    align-items: center;
}

.default__container .card__icon-large {
    position: absolute;
    margin-left: 2rem;
    width: 80%;
    opacity: 0.07;
}

.default__container .card__icon-popup {
    display: block;
    margin: 0 0 2rem 2rem;
    width: 0;
    transition: all 300ms ease-in-out;
}

.default__container .card__icon-popup.appear {
    width: 20%;
}

.default__container .card__icon-popup_fb {
    display: block;
    width: 0;
    transition: all 300ms ease-in-out;
}

.default__container .card__icon-popup_fb.appear {
    width: 90%;
}

.default__container .card__facebook-text {
    display: block;
    text-align: right;
    color: var(--logoBlue);
    font-size: var(--textSize);
    font-weight: 600;
}

.default__container .facebook__logo {
    width: calc(100vw / 11);
    transform: translateX(100%);
    transition: all 300ms ease-in-out;
    display: block;
    margin: auto;
}

.default__container .facebook__logo.appear {
    transform: translateX(0);
}

.default__container .card__Signature {
    position: relative;
    display: block;
    font-style: italic;
    font-size: var(--titleSize);
    font-family: 'Calistoga', cursive;
    color: var(--logoOrange);
    margin: 1rem 0 1rem 2rem;
    opacity: 0;
    transform: translateY(1rem);
    transition: 300ms ease-in-out;
}

.default__container .card__Signature.appear {
    transform: translateY(0);
    opacity: 1;
}

@media screen and (min-width: 740px) {
    .default__container .card__paragraphe-ctn {
        grid-template-columns: 2.5rem auto;
        padding: 0;
    }

    .default__container .bottom__container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
        grid-template-areas: "sec5 sec6" "sec7 sec8";
    }

    .default__container .section5 {
        grid-area: sec5;
    }

    .default__container .section6 {
        grid-area: sec6;
    }

    .default__container .section7 {
        grid-area: sec7;
    }

    .default__container .section8 {
        grid-area: sec8;
    }

    .default__container .card__icon-large {
        left: 30%;
        width: 40%;
    }
}

/*  --------- 
    SLIDESHOW
    --------- */

.default__container .slideshow__container {
    max-width: 1000px;
    min-height: 14rem;
    position: relative;
    margin: 1rem auto;
    background-color: var(--logoBlue);
    background-image: linear-gradient(135deg, var(--logoBlue) 0%, var(--logoBlueHov) 100%);
}

.default__container .slide {
    position: absolute;
    inset: 0;
    padding: 2rem 4rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 500ms ease-in-out, visibility 0s 500ms;
}

.default__container .slide.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 500ms ease-in-out;
}

.default__container .prev,
.default__container .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    padding: 1rem;
    background-color: transparent;
    border: none;
    outline: none;
    font: inherit;
    color: var(--menuText);
    font-size: 1.75rem;
    transition: 300ms ease;
    z-index: 1;
}

.default__container .slide__title {
    display: block;
    font-size: var(--titleSize);
    font-weight: bold;
    margin-bottom: 1.25rem;
    color: var(--menuText);
}

.default__container .slide__text {
    display: block;
    font-size: 1rem;
    text-align: justify;
    color: var(--menuText);
}

@media screen and (max-width: 1000px) {
    .default__container .slide {
        padding: 1.5rem 2.75rem;
    }

    .default__container .prev,
    .default__container .next {
        font-size: 1.25rem;
        padding: 0.5rem;
    }
}

.default__container .next {
    right: 0;
}

.default__container .prev {
    left: 0;
}

.default__container .prev:hover,
.default__container .next:hover {
    color: var(--logoOrange);
}
    
.default__container .dot__container {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.default__container .dot {
    cursor: pointer;
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    background-color: var(--logoBlue);
    border: none;
    outline: none;
    padding: 0;
    transition: background-color .6s ease;
    margin: 0.5rem;
}

.default__container .dot.active,
.default__container .dot:hover {
    background-color: var(--logoOrange);
}

@media (prefers-reduced-motion: reduce) {
    .default__container .slide {
        transition: none;
    }
}

/*  --------
    CAROUSEL
    -------- */

.carousel__container {
    width: 100vw;
    max-width: 1000px;
    overflow: hidden;
    position: relative;
    margin: 2rem auto;
}

.carousel__slide {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    outline: none;
}

.carousel__slide::-webkit-scrollbar {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .carousel__slide {
        scroll-behavior: auto;
    }
}

.carousel__image {
    width: 100%;
    flex-shrink: 0;
    scroll-snap-align: start;
}

#prev__btn,
#next__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    font-size: 1.75rem;
    color: var(--logoBlue);
    border: transparent;
    opacity: 1;
    outline: none;
    background-color: transparent;
    transition: 300ms ease-in-out;
    cursor: pointer;
}

#prev__btn:hover,
#next__btn:hover {
    color: var(--logoOrange);
}

#prev__btn {
    left: 0;
}

#next__btn {
    right: 0;
}

.carousel__navigation {
    position: relative;
    display: flex;
    justify-content: center;
}

.nav__btn {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    margin: 0.5rem;
    border: none;
    background-color: var(--logoBlue);
    transition: all 300ms ease-in-out;
    outline: none;
    cursor: pointer;
}

.nav__btn.active {
    background-color: var(--logoOrange);
}

/*  ------------
    CONFIRMATION
    (reuses .contact__container .card — same shell as the contact form,
    only the content inside changes)
    ------------ */

.contact__container .card.confirmation__card {
    align-items: center;
    text-align: center;
}

.confirmation__icon {
    font-size: 3rem;
    color: var(--logoGreen);
    margin-bottom: 1.5rem;
}

.confirmation__title {
    margin: 0 0 1rem 0;
    font-family: 'Calistoga', cursive;
    font-weight: 400;
    font-size: var(--titleSize);
    color: var(--textBlack);
}

.confirmation__text {
    display: block;
    margin-bottom: 2rem;
    color: var(--textBlack);
    font-size: var(--textSize);
}

.contact__container .card.confirmation__card .button {
    width: auto;
    text-decoration: none;
    padding: 0.85rem 2.5rem;
}

/*  -----
    LOGIN
    (reuses .contact__container .card — same shell as the contact form,
    narrowed down for a two-field login form)
    ----- */

.contact__container .card.login__card {
    max-width: 24rem;
}

.contact__container .card.login__card .card__user,
.contact__container .card.login__card .card__password {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    position: relative;
    min-height: 2.5rem;
    margin-bottom: 0.5rem;
}

.contact__container .card.login__card .card__icon {
    width: 1rem;
    flex-shrink: 0;
    opacity: 0.6;
}

.contact__container .card.login__card .tb__user,
.contact__container .card.login__card .tb__pass {
    flex: 1;
}

.contact__container .card.login__card .lbl__user,
.contact__container .card.login__card .lbl__pass {
    position: absolute;
    pointer-events: none;
    font-size: 1.1rem;
    font-weight: 300;
    top: 0.35rem;
    left: 1.6rem;
    color: var(--logoBlue);
    transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.contact__container .card.login__card .tb__user:focus ~ .lbl__user,
.contact__container .card.login__card .tb__user:valid ~ .lbl__user,
.contact__container .card.login__card .tb__pass:focus ~ .lbl__pass,
.contact__container .card.login__card .tb__pass:valid ~ .lbl__pass {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--logoOrange);
    top: -0.7rem;
    left: 1.6rem;
}

.contact__container .card.login__card .button {
    margin-top: 1.5rem;
}

/*  -------
    PRIVACY
    ------- */

.privacy__container {
    position: relative;
    padding: 2rem;
}

.privacy__container .card__subTitle {
    display: block;
    text-align: center;
    font-family: 'Calistoga', cursive;
    font-size: calc(16px + 100vw / 70);
    font-weight: 400;
    color: var(--logoOrange);
}

.privacy__container .card__paragraphe {
    display: block;
    text-align: justify;
    font-size: calc(10px + 100vw / 70);
    color: var(--logoBlue);
    margin: 1rem 0;
}

.privacy__container .card__ctn {
    display: grid;
    grid-template-columns: 1fr 10fr;
}

.privacy__container .card__bullet,
.privacy__container .card__bullet-hov {
    font-size: calc(10px + 100vw / 70);
    color: var(--logoBlue);
}

.privacy__container .card__bullet-hov {
    text-decoration: none;
    transition: 300ms ease-in-out;
}

.privacy__container .card__bullet-hov:hover {
    color: var(--logoOrange);
    text-decoration: underline;
}

.privacy__container .fa-square {
    text-align:center;
    margin-top: 0.25rem;
    color: var(--logoBlue);
    font-size: calc(3px + 100vw / 70);
}

/*  -----------
    UNSUBSCRIBE
    ----------- */

.unsubscribe__container {
    padding: 2rem;
}

.unsubscribe__container .label__unsubscribe {
    color: var(--logoOrange);
    font-size: 0.9rem;
}

/*  ------------------
    RETURN TO TOP PAGE
    ------------------ */

.chevron__up {
    display: inline-block;
    color: var(--menuText);
    padding: 1rem;
    background-image: linear-gradient(135deg, var(--logoOrange) 0%, var(--logoBlue) 100%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: transform 150ms ease, box-shadow 250ms ease, filter 250ms ease;
}

.chevron__up:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
    filter: brightness(1.08) saturate(1.1);
}

.button__top {
    position: fixed;
    right: 1rem;
    /* was bottom:25%, which floats it mid-screen on tall pages — a "back to top" button
       reads correctly anchored near the bottom-right corner instead */
    bottom: 1.5rem;
    transition: 500ms ease;
    transform: translateX(100%);
    opacity: 0;
}

.button__top-show {
    opacity: 0.65;
    transform: translateX(0);
}