@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

:root {
    --color-text: #e0e0e0;
    --color-link-hover: #FCA311;
    --color-primary: #FCA311;
    --font-family-sans-serif: "Inter", -apple-system, sans-serif;
    --navbar-height: 80px;
    --navbar-color: #14213D;
    --transition-speed: 0.6s;
    /* Spacing between the icons at the end of the navbar (LinkedIn, ProZ,
       language). Shared so the language icon cannot drift out of step. */
    --logo-gap: 10px;
    /* Gap .nav-list puts between every top-level nav item. */
    --nav-gap: 1rem;
    /* Floor for the three service cards on the home page. They stretch to a
       common height automatically; this stops them looking squat when the
       descriptions are short. Raise it if a translation needs more room. */
    --card-min-height: 380px;
    /* Horizontal padding on the language button, part of its click target. */
    /* --lang-toggle-pad-x: 0.5rem; */
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Anti-spam honeypot field on the contact form: pulled off-screen rather than
   display:none, since some bots skip fields that are display:none. Real users
   never see or tab to it; anything submitted in it flags the request as a bot. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', var(--font-family-sans-serif);
    background-color: #FAFAFA;
}

ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar {
    position: fixed;
    z-index: 1000;
    height: var(--navbar-height);
    display: flex;
    align-items: center;
    background: var(--navbar-color);
    top: 0;
    left: 0;
    right: 0;
}

/* ============================================================
   SECTION SYSTEM
   Every nav target uses the same container structure:
     <section class="page-section"><div class="section-inner">...
   Each one fills the viewport below the fixed navbar, so an
   anchor jump lands on that section alone.
   ============================================================ */

.page-section {
    /* keeps the fixed navbar from covering the top of the section */
    scroll-margin-top: var(--navbar-height);
    min-height: calc(100vh - var(--navbar-height));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 48px 0;
}

/* svh = stable viewport height: avoids the mobile toolbar overflow that vh causes */
@supports (min-height: 100svh) {
    .page-section {
        min-height: calc(100svh - var(--navbar-height));
    }
}

/* The first section sits underneath the fixed navbar rather than being
   scrolled to, so it carries the offset as padding instead. */
#accueil,
.page-section--first {
    min-height: 100vh;
    padding-top: calc(var(--navbar-height) + 48px);
}

@supports (min-height: 100svh) {
    #accueil,
    .page-section--first {
        min-height: 100svh;
    }
}

/* Shared inner wrapper - the single source of width and gutters.
   Column flex so the title can sit at the top and the body fill below it. */
.section-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Shared section heading - pinned to the top of every section, so it lands
   at the same height on screen no matter how tall the section content is. */
.section-title {
    flex: 0 0 auto;
    text-align: center;
    margin: 0 auto 40px;
}

/* "Back to services" link on the individual service pages.
   Needs an explicit colour: the global `a` rule sets #e0e0e0, which is
   invisible against the light page background. */
.back-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--navbar-color);
    transition: color 0.25s ease;
}

.back-link svg {
    transition: transform 0.25s ease;
}

.back-link:hover,
.back-link:focus-visible {
    color: var(--color-primary);
}

.back-link:hover svg,
.back-link:focus-visible svg {
    transform: translateX(-3px);
}

@media (prefers-reduced-motion: reduce) {
    .back-link,
    .back-link svg {
        transition: none;
    }
}

/* Everything below the heading - takes the leftover height and centres
   its content within it. */
.section-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-title h1 {
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 700;
    margin: 0;
    color: #000;
    letter-spacing: -0.5px;
}

.section-title h1::after {
    content: "";
    display: block;
    width: 120px;
    height: 2px;
    background-color: var(--color-primary);
    margin: 12px auto 0;
}

/* Two-column row used by the Accueil section (text + portrait) */
.hero-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
}

@media (max-width: 768px) {
    .hero-row {
        flex-direction: column-reverse;
        gap: 30px;
    }
}

/* Optional: uncomment to tint alternate sections so boundaries read clearly
.page-section:nth-of-type(even) {
    background-color: #F2F2F2;
}
*/

.navbar__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Right-hand group: nav links, language switcher, burger. Grouping them keeps
   .navbar__container's space-between layout to just brand-vs-everything-else,
   and lets the language switcher live outside the nav (so it stays visible on
   mobile, where .navbar__nav is display:none). */
.navbar__actions {
    display: flex;
    align-items: center;
    /* Visible spacing should match the gap between the LinkedIn and ProZ
       logos; the language button's own padding makes up the difference. */
    gap: calc(var(--logo-gap, 10px) - var(--lang-toggle-pad-x, 0.5rem));
}

.navbar__nav {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar__nav li {
    list-style: none;
}

.navbar__mobile-toggle {
    display: block;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text);
}

.navbar__logo {
    height: 65px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.logos {
    display: flex;
    align-items: center;
    gap: var(--logo-gap, 10px);
    margin-left: 1rem;
}

.logo {
    display: block;
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

a {
    text-decoration: none;
    color: var(--color-text);
}

.logo-linkedin {
    background-image: url('../images/linkedin.png');
}

.logo-linkedin:hover {
    background-image: url('../images/linkedin-hover.png');
}

.logo-proz {
    background-image: url('../images/proz.png');
}

.logo-proz:hover {
    background-image: url('../images/proz-hover.png');
}

/* ============================================================
   LANGUAGE SWITCHER
   A translation icon that reveals the three languages on hover. It lives in
   .nav-list, so it is also cloned into the mobile pane; hover is meaningless
   on touch, so the pane rules further down flatten it back into a plain list.
   ============================================================ */

/* Spacing comes from .navbar__actions' gap now that this sits outside the
   nav list, so no margin correction is needed here. */
.lang-switch {
    position: relative;
    display: flex;
    align-items: center;
}

.lang-toggle {
    display: flex;
    align-items: center;
    /* Vertical padding bridges the gap to the dropdown so the menu does not
       vanish while the pointer travels from the icon down to it. */
    padding: 1rem var(--lang-toggle-pad-x, 0.5rem);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    transition: color var(--transition-speed) ease;
}

.lang-toggle:hover, .lang-toggle:focus-visible {
    color: var(--color-link-hover);
}

/* images/translate.svg is drawn with fill="currentColor", which only resolves
   when the SVG is inline. Referenced as an <img> it would render black and be
   invisible on the dark navbar, so it is used as a mask and painted with
   currentColor instead - that also lets it pick up the hover colour. */
.lang-icon {
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: url('../images/translate.svg') center / contain no-repeat;
    mask: url('../images/translate.svg') center / contain no-repeat;
}

.lang-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 9rem;
    /* The `a` rule sets a colour on links only. Without this the active
       language - a <span> - inherited the document default and rendered black
       against the dark dropdown. */
    color: var(--color-text);
    padding: 0.35rem 0;
    background: var(--navbar-color);
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    /* Above the navbar's own stacking context (z-index: 1000). */
    z-index: 1002;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Three ways in, because no single one covers every input:
   .is-open  - set by app.js on tap, the only thing that works on touch
   :focus-within - keyboard, where :hover never fires
   :hover    - pointer devices only, so a touch tap cannot leave it stuck open */
.lang-switch.is-open .lang-menu,
.lang-switch:focus-within .lang-menu {
    opacity: 1;
    visibility: visible;
}

@media (hover: hover) and (pointer: fine) {
    .lang-switch:hover .lang-menu {
        opacity: 1;
        visibility: visible;
    }
}

.lang-link {
    display: block;
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--transition-speed) ease,
                background-color var(--transition-speed) ease;
}

a.lang-link:hover, a.lang-link:focus-visible {
    color: var(--color-link-hover);
    background-color: rgba(255, 255, 255, 0.06);
}

/* The active language is a <span>, not a link to itself. Accent colour is what
   marks it as current, so it needs no tick alongside. */
.lang-link--active {
    color: var(--color-primary);
    font-weight: 700;
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .lang-menu, .lang-link, .lang-toggle {
        transition: none;
    }
}

/* Below the desktop breakpoint the switcher is a primary control sitting next
   to the burger, so the button gets a proper touch target and the menu a
   little more room. */
@media (max-width: 992px) {
    .lang-toggle {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }

    .lang-link {
        padding: 0.8rem 1rem;
        font-size: 1rem;
    }
}

.mobile-menu-pane {
    position: fixed;
    top: 0;
    left: 0;
    width: 80%;
    max-width: 300px;
    height: 100%;
    background-color: #141414;
    padding: 1.5rem;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1001;
}

.mobile-menu-pane.is-open {
    transform: translateX(0);
}

.mobile-menu-pane ul {
    list-style: none;
    margin: 4rem 0 0;
    padding: 0;
}

.mobile-menu-pane li {
    list-style: none;
}

.mobile-menu-pane .nav-link {
    display: block;
    font-size: 1.2rem;
    padding: 1rem 0;
}

/* ============================================================
   ACTIVE SECTION
   app.js adds .is-active to the nav link for whichever section is currently
   under the viewport midpoint. Declared outside the desktop media query so the
   cloned links in the mobile pane pick it up too.
   ============================================================ */

.nav-link.is-active {
    color: var(--color-primary);
}

/* Underline bar, desktop only - the pane links are stacked, where a bar
   under each would read as clutter. */
@media (min-width: 992px) {
    .nav-link.is-active::after {
        content: "";
        position: absolute;
        left: 1.5rem;
        right: 1.5rem;
        bottom: 0.65rem;
        height: 2px;
        background-color: var(--color-primary);
    }
}

.mobile-menu-pane .nav-link.is-active {
    font-weight: 700;
}

.animated-border-svg {
    display: none;
}

@media (min-width: 992px) {
    .navbar__mobile-toggle, .mobile-menu-pane {
        display: none;
    }

    .navbar__nav {
        display: block;
    }

    .nav-list {
        display: flex;
        gap: var(--nav-gap, 1rem);
    }

    .nav-link {
        display: flex;
        align-items: center;
        position: relative;
        padding: 1rem 1.5rem;
        font-weight: 500;
        transition: color var(--transition-speed) ease;
    }

    .nav-link:hover, .nav-link:focus-visible {
        color: var(--color-link-hover);
    }

    @media (prefers-reduced-motion: reduce) {
        .animated-border-svg rect {
            transition: none;
        }
    }
}

@media (max-width: 480px) {
  .navbar__logo {
    height: 65px;
  }
}

.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(70px, 8vw, 1px) 20px;
}

.hero-text {
    flex: 2;
    max-width: 600px;
}

.hero-text h1 {
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 700;
    margin: 0 0 20px;
    color: #000;
    letter-spacing: -0.5px;
}

.hero-text h1::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);
    margin-top: 10px;
}

.hero-text p {
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.7;
    color: #333;
    max-width: 55ch;
}

/* Accueil hero: title and button centred, body copy justified.
   Scoped to #accueil so nothing else that uses .hero-text is affected.
   The ID also outranks the max-width:768px rule below, so the paragraph
   stays justified on mobile too. */
#accueil .hero-text {
    text-align: center;
}

#accueil .hero-text p {
    text-align: justify;
    /* The 55ch cap makes this box narrower than its container; without auto
       side margins it sits flush left and falls short of the orange rule,
       which spans the full container width. */
    margin-left: auto;
    margin-right: auto;
}

.btn {
    display: inline-block;
    padding: 14px 28px;
    background-color: var(--color-primary);
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.25s ease;
}

.btn:hover {
    background-color: #d98c00;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}

.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.hero-image img {
    width: 100%;
    max-width: 300px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
}

.services-section {
    padding: clamp(12px, 8vw, 60px);
}

.services-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

@media (max-width: 992px) {
    .hero-image img {
        max-width: 250px;
        max-height: 250px;
    }

    .logos {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        margin: 1rem 0;
    }

    .services-container {
        flex-direction: column;
        gap: 40px;
        align-items: center;
    }

    .card-link {
        width: 100%;
        max-width: 360px;
    }

    .service-card {
        width: 100%;
        max-width: 500px;
        padding: 25px 20px;
    }

    .card-header {
        flex-direction: column;
        text-align: center;
    }

    .card-header h3 {
        margin-top: 15px;
        font-size: 22px;
    }

    .service-card p {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .hero {
        flex-direction: column-reverse;
        gap: 30px;
    }

    .hero-text {
        max-width: 100%;
    }

    .hero-text p {
        text-align: center;
    }

    .hero-image img {
        max-width: 150px;
        max-height: 150px;
    }

    .service-card {
        padding: 20px 15px;
    }

    .card-header h3 {
        font-size: 20px;
    }

    .card-icon {
        width: 70px;
    }

    .service-card p {
        font-size: 15px;
    }
}

/* Service cards.
   .services-container is a flex row, so these links already stretch to a
   common height - but the .card inside was auto-height, so each white box
   only grew to fit its own description and the three ended up uneven.
   Making the link a flex container lets the card stretch to the full row
   height, so all three boxes match whatever the text length. --card-min-height
   is the floor that keeps them from looking squat when the copy is short. */
.card-link {
    display: flex;
    max-width: 360px;
    min-height: var(--card-min-height, 380px);
    text-decoration: none;
}

/* Only while the cards sit in a row. Below this the container is a column, and
   `flex: 1 1 0` there would have them divide the container's height between
   them rather than size to their content. */
@media (min-width: 993px) {
    .card-link {
        /* equal widths, so the three also wrap their text identically */
        flex: 1 1 0;
    }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  width: 100%;
  /* .card-link caps the width now */
  max-width: none;
  height: 100%;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0px 0px 14px 0px rgba(192, 192, 192, 0.2);
  transition: 1s all;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  bottom: -160%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background-color: var(--color-primary);
  filter: blur(70px);
  border-radius: 50%;
  transition: width 1s, height 1s;
}

/* Pointer devices only. On a touch screen a tap - including the incidental one
   that starts a scroll - leaves :hover latched on until you tap elsewhere, so
   the amber sweep would fire while scrolling past the cards. Gating on the
   input's capability rather than a width also covers touch screens wider than
   any breakpoint we could pick. */
@media (hover: hover) and (pointer: fine) {
    .card:hover::before {
      bottom: -230%;
      width: 1000px;
      height: 1000px;
      filter: blur(1px);
    }
}

.containers {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

@media (max-width: 768px) {
  .card {
    max-width: 100%;
    padding: 15px;
  }
  .services-container {
    flex-direction: column;
    align-items: center;
  }
  .card-link {
    width: 100%;
    max-width: 300px;
  }
}

.title {
  color: #171d29;
  font-size: 26px;
  font-style: normal;
  font-weight: 500;
  /* Needed once the title wraps: a flex item under align-items:center is
     only visually centred while it stays narrower than the card. On a short
     title the box hugs the text; on a wrapping one it fills the card and the
     lines inside fall back to left alignment. */
  text-align: center;
  transition: 1s all;
  margin: 1rem 0;
}

.subtitle {
  color: #7e8882;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  text-align: justify;
  transition: 1s all;
}

.linkMore {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 0.8rem;
  color: #072713;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
  text-decoration: none;
  transition: 1s all;
  margin-top: 1rem;
}

/* Text goes white only against the amber sweep, so it is gated identically -
   otherwise a latched :hover on touch would turn the text white on white. */
@media (hover: hover) and (pointer: fine) {
    .card:hover .title,
    .card:hover .subtitle,
    .card:hover .linkMore {
      color: #fff;
      transition: 1s all;
    }
}

.about-text {
    flex: 2;
    display:flex;
    flex-direction: column;
    height: 100%;
}

.about-text p {
    font-size: 14px;
    line-height: 1.6;
    text-align: justify;
}

.timeline-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

.timeline-item {
  display: flex;
  margin-bottom: 20px;
  margin-top: 20px;
}

.timeline-year {
  font-weight: bold;
  min-width: 100px;
  color: var(--color-primary);
}

.timeline-content {
  flex: 1;
}

.timeline-content h4 {
  margin: 0 0 5px 0;
  font-size: 1.1em;
}

.timeline-content p {
  margin: 0;
  color: #666;
}

.timeline-divider {
  height: 1px;
  background: #ddd;
  margin: 20px 0;
}

.about-wrapper {
  display: flex;
  gap: 20px;
  align-items: stretch;
}

.about-text, .timeline-container {
  flex: 1;
  min-width: 0;
}

/* Highlight cards used on the service pages (traduction, relecture,
   services-complementaires). These classes previously had no rules. */
.about-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 10px;
}

.highlight {
    flex: 1 1 240px;
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    border-top: 3px solid var(--color-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
}

.highlight h3 {
    margin: 0 0 10px;
    font-size: 18px;
    color: var(--navbar-color);
}

.highlight p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    text-align: left;
}

@media (max-width: 768px) {
    .about-highlights {
        flex-direction: column;
        gap: 14px;
    }

    /* Same cards as desktop, just scaled down to fit a phone screen
       comfortably instead of carrying full desktop padding/font-size. */
    .highlight {
        flex-basis: auto;
        padding: 16px;
        border-radius: 12px;
    }

    .highlight h3 {
        font-size: 16px;
        margin-bottom: 6px;
    }

    .highlight p {
        font-size: 13px;
        line-height: 1.5;
    }
}

@media (max-width: 768px) {
  .about-wrapper {
    flex-direction: column;
  }
  .timeline-container {
    order: -1;
    width: auto;
    margin-bottom: 20px;
    height: auto;
  }
  .about-text {
    height: auto;
  }
}

.testimonials-section .hero-text {
    margin: auto;
    text-align: center;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: auto;
}

.testimonial-card {
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    padding: 35px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .06);
    transition: .35s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .12);
}

.testimonial-card::before {
    content: "“";
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 70px;
    color: rgba(252, 163, 17, .18);
    font-family: serif;
}

.stars {
    color: var(--color-primary);
    font-size: 24px;
    letter-spacing: 3px;
    margin-bottom: 20px;
    text-align: left;
    align-self: flex-start;
}

.testimonial-text {
    flex: 1;
    color: #444;
    line-height: 1.8;
    font-style: italic;
    margin-bottom: 30px;
    font-size: 14px;
    text-align: justify;
}

.testimonial-author {
    border-top: 1px solid #ececec;
    padding-top: 20px;
    font-size: 14px;
    text-align: left;
}

.testimonial-author strong {
    display: block;
    color: #14213D;
    font-size: 15px;
}

.testimonial-author span {
    display: block;
    color: #888;
    font-size: 14px;
}

@media (max-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .testimonial-card {
        padding: 28px;
    }

    .stars {
        font-size: 22px;
    }
}

.form-message {
  display: none;
  margin-top: 20px;
  padding: 15px;
  border-radius: 4px;
  text-align: center;
}

.form-message.loading {
  display: block;
  color: #333;
  background-color: #f0f0f0;
}

.form-message.success {
  display: block;
  color: #155724;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
}

.form-message.error {
  display: block;
  color: #721c24;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
}

.formbold-main-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.formbold-form-wrapper {
  margin: 0 auto;
  max-width: 550px;
  width: 100%;
  background: rgb(240, 239, 239);
  padding: 24px;
  border-radius: 8px;
}

.formbold-form-group {
  margin-bottom: 20px;
}

.formbold-form-label {
  color: #07074D;
  font-size: 14px;
  line-height: 24px;
  display: block;
  margin-bottom: 8px;
}

.formbold-form-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid #DDE3EC;
  background: #FFFFFF;
  font-weight: 500;
  font-size: 15px;
  color: #07074D;
  outline: none;
  resize: none;
}

.formbold-form-input:focus {
  border-color: #6A64F1;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
}

.formbold-form-select {
  width: 100%;
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid #DDE3EC;
  background: #FFFFFF;
  font-weight: 500;
  font-size: 15px;
  color: #07074D;
  outline: none;
  cursor: pointer;
}

.formbold-checkbox-group {
  display: flex;
  gap: 15px;
  align-items: center;
}

.formbold-checkbox-label {
  font-size: 14px;
  line-height: 24px;
  color: #07074D;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  user-select: none;
}

.formbold-input-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.formbold-checkbox-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #FFFFFF;
  border: 1px solid #DDE3EC;
  border-radius: 4px;
}

.formbold-checkbox-label .formbold-input-checkbox:checked ~ .formbold-checkbox-checkmark {
  background-color: var(--color-primary);
  border-color: #FCA311;
}

.formbold-checkbox-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.formbold-checkbox-label .formbold-input-checkbox:checked ~ .formbold-checkbox-checkmark:after {
  display: block;
}

.formbold-checkbox-label .formbold-checkbox-checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Radio buttons for the Délai field - round variant of the checkbox styling */
.formbold-radio-label {
  font-size: 14px;
  line-height: 24px;
  color: #07074D;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  user-select: none;
}

.formbold-input-radio {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.formbold-radio-checkmark {
  position: absolute;
  top: 3px;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #FFFFFF;
  border: 1px solid #DDE3EC;
  border-radius: 50%;
}

.formbold-radio-label .formbold-input-radio:checked ~ .formbold-radio-checkmark {
  border-color: var(--color-primary);
}

.formbold-radio-checkmark::after {
  content: "";
  position: absolute;
  display: none;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-primary);
}

.formbold-radio-label .formbold-input-radio:checked ~ .formbold-radio-checkmark::after {
  display: block;
}

.formbold-btn {
  width: 100%;
  padding: 12px 20px;
  border-radius: 6px;
  border: none;
  font-weight: 600;
  font-size: 15px;
  background-color: var(--color-primary);
  color: white;
  cursor: pointer;
  margin-top: 10px;
  margin-bottom: 20px;
}

.formbold-btn:hover {
  opacity: 0.9;
}

@media (max-width: 768px) {
  .formbold-form-wrapper {
    padding: 0 16px;
  }
}

.contact-hero {
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 60px 20px;
    box-sizing: border-box;
}

.contact-hero .hero-text {
    max-width: 100%;
    width: 100%;
    text-align: center;
    margin: 0 auto 40px;
}

.contact-hero .hero-text h1 {
    text-align: center;
    position: relative;
}

.contact-hero .hero-text h1::after {
    content: "";
    display: block;
    width: 30%;
    height: 2px;
    background-color: var(--color-primary);
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

.contact-form {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.footer {
    background-color: #14213D;
    color: var(--color-text);
    text-align: center;
    padding: 1px;
    font-size: 12px;
}

.footer a {
    color: var(--color-primary);
    margin: 0 10px;
}

.footer a:hover {
    text-decoration: underline;
}