:root {
    scroll-behavior: smooth;
    --blue: #073b71;
    --blue-ink: #17324f;
    --yellow: #f1b900;
    --yellow-600: #e0aa00;
    --ink: #0b1220;
    --muted: #5a6b85;
    --bg: #ffffff;
    --bg-soft: #f6f8fb;
    --border: #e6eaf0;
    --shadow: 0 6px 18px rgba(7, 59, 113, .12);
    --radius: 14px;
}

* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.55
}

a {
    color: inherit;
    text-decoration: none
}

/* ===== HEADER ===== */
header {
    position: sticky;
    top: 0;
    z-index: 90;
    background: #fff;
    box-shadow: 0 1px 0 var(--border)
}

#nav-toggle {
    display: none
}

.top-line {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

.brand img {
    height: 48px;
    width: auto;
    display: block
}

.burger {
    display: none;
    cursor: pointer;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    transition: .2s
}

.burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #17324f;
    margin: 5px 0;
    border-radius: 2px;
    transition: .2s
}

#nav-toggle:checked~.top-line .burger {
    border-color: #c5cfda
}

#nav-toggle:checked~.top-line .burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg)
}

#nav-toggle:checked~.top-line .burger span:nth-child(2) {
    opacity: 0
}

#nav-toggle:checked~.top-line .burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg)
}

/* CTA line */
.cta-line {
    background: #fff;
    border-top: 1px solid var(--border)
}

.cta-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 800;
    transition: .2s ease;
    white-space: normal;
    text-align: center
}

.btn-outline {
    border: 1px solid var(--border);
    color: #0b2038;
    background: #fff
}

.btn-outline:hover {
    border-color: #c5cfda
}

.btn-primary {
    background: var(--yellow);
    color: #1b1600
}

.btn-primary:hover {
    background: var(--yellow-600)
}

.inline-only {
    display: inline
}

.stack-only {
    display: none
}

/* Menu line */
.menu-line {
    background: #fff;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border)
}

.menu-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px
}

.menu {
    display: flex;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap
}

.menu a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 14px 16px;
    color: var(--blue-ink);
    font-weight: 400;
    letter-spacing: .2px;
    transition: background .2s ease
}

.menu a::after {
    content: "";
    width: 1px;
    height: 20px;
    background: var(--border);
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%)
}

.menu a:last-child::after {
    display: none
}

.menu a::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 6px;
    height: 2px;
    background: var(--yellow);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .18s ease;
    border-radius: 2px
}

.menu a:hover {
    background: var(--bg-soft)
}

.menu a:hover::before {
    transform: scaleX(1)
}

.menu a.active {
    color: var(--blue)
}

.menu a.active::before {
    transform: scaleX(1)
}

.anchor {
    scroll-margin-top: 84px
}

/* Menu as list + submenu */
.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0;
    flex-wrap: wrap
}

.menu-list>li {
    position: relative
}

.menu-list>li>a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 14px 16px;
    color: var(--blue-ink);
    font-weight: 400;
    letter-spacing: .2px;
    transition: background .2s ease, color .2s ease;
    text-decoration: none;
}

.menu-list>li>a::after {
    content: "";
    width: 1px;
    height: 20px;
    background: var(--border);
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%)
}

.menu-list>li:last-child>a::after {
    display: none
}

.menu-list>li>a::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 6px;
    height: 2px;
    background: var(--yellow);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .18s ease;
    border-radius: 2px
}

.menu-list>li>a:hover {
    background: var(--bg-soft)
}

.menu-list>li>a:hover::before {
    transform: scaleX(1)
}

.menu-list>li>a.active {
    color: var(--blue)
}

.menu-list>li>a.active::before {
    transform: scaleX(1)
}

/* Submenu */
.has-sub .submenu {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    position: absolute;
    left: 0;
    top: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
    display: none;
    min-width: 260px;
    z-index: 50;
}

.has-sub:hover .submenu {
    display: block
}

.submenu li a {
    display: block;
    padding: 10px 14px;
    color: var(--blue-ink)
}

.submenu li+li a {
    border-top: 1px solid var(--border)
}

.submenu li a:hover {
    background: var(--bg-soft)
}

/* Mobile: show submenu expanded inside the drawer */
@media (max-width: 920px) {

    /* Hide the horizontal menu bar on mobile to remove the blank space */
    .menu-line {
        display: none;
        border-top: 0;
        border-bottom: 0;
        min-height: 0;
    }

    /* When burger is opened, show the menu block */
    #nav-toggle:checked~.menu-line {
        display: block;
    }

    .btn-primary .stack-only strong {
        font-size: 22px;
        /* URGENCE 24/7 */
        font-weight: 900;
    }

    .btn-primary .stack-only .num {
        font-size: 18px;
        /* Numéro de téléphone */
        font-weight: 700;
    }

    .menu {
        width: 100%
    }

    .menu-list {
        flex-direction: column
    }

    .menu-list>li>a::after {
        display: none
    }

    .menu-list>li+li>a {
        border-top: 1px solid var(--border)
    }

    .has-sub .submenu {
        position: static;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        display: grid;
        grid-template-columns: 1fr
    }

    .submenu li a {
        padding: 12px 16px
    }
}

/* Desktop: CTAs on the same row as logo */
.top-cta {
    display: none;
    gap: 12px;
    align-items: center
}

@media (min-width: 921px) {
    .top-line {
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .top-cta {
        display: flex
    }

    .cta-line {
        display: none
    }
}

/* Mobile: keep CTAs on their own line */
@media (max-width: 920px) {

    /* Hide the horizontal menu bar on mobile to remove the blank space */
    .menu-line {
        display: none;
        border-top: 0;
        border-bottom: 0;
        min-height: 0;
    }

    /* When burger is opened, show the menu block */
    #nav-toggle:checked~.menu-line {
        display: block;
    }

    .btn-primary .stack-only strong {
        font-size: 22px;
        /* URGENCE 24/7 */
        font-weight: 900;
    }

    .btn-primary .stack-only .num {
        font-size: 18px;
        /* Numéro de téléphone */
        font-weight: 700;
    }

    .top-cta {
        display: none
    }

    .cta-line {
        display: block
    }
}

/* Larger offset for service anchors so menu clicks stop higher */
.anchor--service {
    scroll-margin-top: 240px
}

@media (max-width: 920px) {

    /* Hide the horizontal menu bar on mobile to remove the blank space */
    .menu-line {
        display: none;
        border-top: 0;
        border-bottom: 0;
        min-height: 0;
    }

    /* When burger is opened, show the menu block */
    #nav-toggle:checked~.menu-line {
        display: block;
    }

    .btn-primary .stack-only strong {
        font-size: 22px;
        /* URGENCE 24/7 */
        font-weight: 900;
    }

    .btn-primary .stack-only .num {
        font-size: 18px;
        /* Numéro de téléphone */
        font-weight: 700;
    }

    .anchor--service {
        scroll-margin-top: 180px
    }
}

/* Prevent horizontal scrolling */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* ===== HERO ===== */
.hero {
    color: #fff
}

.hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 16px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 26px
}

.kicker {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .6px;
    opacity: .9;
    margin: 0 0 6px
}

h1 {
    margin: 0 0 10px;
    font-size: 38px;
    line-height: 1.15
}

.sub {
    font-size: 16px;
    opacity: .95;
    margin: 0 0 14px
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 14px
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .35);
    backdrop-filter: blur(2px);
    color: #fff;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 400
}

/* ===== IFRAME FORM ===== */
.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0;
    overflow: hidden
}

.iframe-wrap {
    position: relative;
    width: 100%;
    min-height: 100px;
    background: #fff;
    padding: 15px;
    color: var(--blue-ink);
}

.iframe-wrap iframe {
    position: absolute;
    left: 0;
    top: 0;
    border: 0;
    display: block;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    margin: 0 0 -20px 0;
}

/* ===== WHY SECTION ===== */
.why {
    background: var(--bg-soft);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border)
}

.why-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 16px;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 28px
}

.why-kicker {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #8a98ad;
    margin: 0 0 6px
}

.why h2 {
    margin: 0 0 10px;
    font-size: 34px;
    line-height: 1.15;
    color: var(--blue-ink)
}

.why-lead {
    margin: 0 0 16px;
    color: #54637a
}

.why-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.why-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px
}

.why-card .t {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px
}

.why-ico {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    color: var(--blue-ink)
}

.why-card h4 {
    margin: 0;
    font-size: 18px;
    color: var(--blue-ink)
}

.why-card p {
    margin: 6px 0 0;
    color: #5b6a82;
    font-size: 14px
}

.why-figure {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border)
}

.why-figure img {
    display: block;
    width: 100%;
    height: auto;
    padding: 12px;
    border-radius: 10px
}

.why-figure::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 14px;
    left: auto;
    height: 12px;
    width: 65%;
    background: var(--yellow);
    border-radius: 8px
}

/* ===== SATISFACTION BANNER ===== */
.satisfaction {
    position: relative;
    background: #0b1220;
    color: #fff;
    isolation: isolate
}

.satisfaction::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('https://www.unitead.fr/2026/assainissement/background.png?q=80&w=2000&auto=format&fit=crop') center/cover no-repeat;
    opacity: .35;
    z-index: -2
}

.satisfaction::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(7, 59, 113, .55), rgba(7, 59, 113, .55));
    z-index: -1
}

.satisfaction-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 16px;
    text-align: center
}

.satisfaction h2 {
    margin: 0 0 12px;
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: .2px
}

.satisfaction p.lead {
    margin: 0 0 20px;
    font-size: 16px;
    opacity: .95
}

.satisfaction .cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--yellow);
    color: #1b1600;
    font-weight: 800;
    border-radius: 12px;
    padding: 14px 20px;
    text-decoration: none;
    transition: .2s;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12)
}

.satisfaction .cta:hover {
    background: var(--yellow-600)
}

/* ===== SERVICES GRID (below banner) ===== */
.services {
    background: #fff
}

.services-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 16px
}

.services-kicker {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #b38d00;
    margin: 0 0 6px
}

.services-head {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 20px;
    align-items: end;
    margin-bottom: 16px
}

.services h2 {
    margin: 0;
    font-size: 34px;
    line-height: 1.15;
    color: var(--blue-ink)
}

.services .intro {
    color: #56657d
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 18px
}

.service {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    transition: .2s;
    box-shadow: 0 1px 0 var(--border)
}

.service:hover {
    box-shadow: 0 8px 20px rgba(7, 59, 113, .08);
    transform: translateY(-1px)
}

.service .ico {
    font-size: 28px;
    color: var(--blue);
    margin-bottom: 10px
}

.service h3 {
    margin: 0 0 6px;
    font-size: 16px;
    color: var(--blue-ink);
    text-transform: uppercase;
    letter-spacing: .2px
}

.service p {
    margin: 0;
    color: #5b6a82;
    font-size: 14px;
    line-height: 1.45
}

/* ===== FOOTER ===== */
footer {
    background: #0b1220;
    color: #e8eef7;
    margin-top: 28px
}

.footer-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 16px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
    justify-items: start
}

.footer-wrap>* {
    min-width: 0
}

.foot-logo-head {
    display: flex;
    align-items: center;
    margin: 0 0 10px 0
}

.foot-logo-head img {
    height: 46px;
    width: auto;
    display: block
}

.footer-wrap>div {
    padding: 0
}

.foot-title {
    font-weight: 800;
    margin: 0 0 8px
}

.foot-p {
    margin: 0 0 8px;
    color: #b7c4d6;
    font-size: 14px
}

.foot-links {
    display: grid;
    gap: 8px
}

.foot-links a {
    color: #e8eef7;
    text-decoration: none;
    font-size: 14px;
    opacity: .9
}

.foot-links a:hover {
    opacity: 1;
    text-decoration: underline
}

.foot-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px
}

.foot-chip {
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    font-size: 12px;
    opacity: .9
}

.foot-bottom {
    border-top: 1px solid #1f2a44
}

.foot-bottom-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 16px;
    /*display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;*/
    color: #9fb0c7;
    font-size: 12px;
    text-align: center;
}

.foot-bottom-inner a {
    color: #cfe1ff;
    text-decoration: none
}

.foot-bottom-inner a:hover {
    text-decoration: underline
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1120px) {
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 18px
    }

    h1 {
        font-size: 34px
    }

    .services-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (max-width: 920px) {

    /* Hide the horizontal menu bar on mobile to remove the blank space */
    .menu-line {
        display: none;
        border-top: 0;
        border-bottom: 0;
        min-height: 0;
    }

    /* When burger is opened, show the menu block */
    #nav-toggle:checked~.menu-line {
        display: block;
    }

    .btn-primary .stack-only strong {
        font-size: 22px;
        /* URGENCE 24/7 */
        font-weight: 900;
    }

    .btn-primary .stack-only .num {
        font-size: 18px;
        /* Numéro de téléphone */
        font-weight: 700;
    }

    /* Anchor offset mobile */
    .anchor {
        scroll-margin-top: 140px
    }

    .burger {
        display: inline-block
    }

    .menu-wrap {
        justify-content: flex-start
    }

    .menu {
        display: none;
        flex-direction: column;
        width: 100%;
        background: #fff;
        border-top: 1px solid var(--border);
        padding: 8px 0 12px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .06)
    }

    #nav-toggle:checked~.menu-line .menu {
        display: flex
    }

    .menu a {
        padding: 14px 12px
    }

    .menu a::after {
        display: none
    }

    .menu a+a {
        border-top: 1px solid var(--border)
    }

    .menu a::before {
        left: 12px;
        right: 12px;
        bottom: 6px
    }

    .cta-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: 10px
    }

    .cta-wrap .btn {
        width: 100%;
        font-size: 15px
    }

    .btn-primary .inline-only {
        display: none
    }

    .btn-primary .stack-only {
        display: flex;
        flex-direction: column;
        line-height: 1.2
    }

    .btn-primary .stack-only .num {
        font-weight: 900;
        letter-spacing: .2px
    }

    .services-head {
        grid-template-columns: 1fr
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width: 560px) {
    h1 {
        font-size: 28px
    }

    .brand img {
        height: 42px
    }

    /*.iframe-wrap {
        height: 380px
    }*/

    .cta-wrap .btn {
        font-size: 14px;
        padding: 12px 10px
    }

    .services h2 {
        font-size: 28px
    }

    .services-grid {
        grid-template-columns: 1fr
    }

    .footer-wrap {
        max-width: 1200px;
        margin: 0 auto;
        padding: 28px 16px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        align-items: start;
        justify-items: start
    }
}

@media (max-width: 560px) {
    .badges {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        margin: 10px 0 14px
    }
}

/* Badges layout: 4-column grid on desktop to avoid 3+1 wrap; 2 columns on tablet; 1 on mobile (already below) */
.badges {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    gap: 8px 10px;
    align-items: center
}

@media (max-width: 1024px) {
    .badges {
        grid-template-columns: repeat(2, max-content)
    }
}

/* Typing / chat-like effect */
/* Staggered delays */
.badges .chip:nth-child(2) .tw {
    animation-delay: .2s, 0s
}

.badges .chip:nth-child(3) .tw {
    animation-delay: .4s, 0s
}

.badges .chip:nth-child(4) .tw {
    animation-delay: .6s, 0s
}
}
}

/* Typing effect: slower, with end fade‑blink, then restart from zero */
60% {
    width: var(--chars)ch;
}

80% {
    width: var(--chars)ch;
}

81% {
    width: 0ch;
}

100% {
    width: 0ch;
}
}

/* Caret blinks only at the end, with soft fades */
60% {
    opacity: 1;
}

67% {
    opacity: 0;
}

74% {
    opacity: 1;
}

80% {
    opacity: 0;
}

100% {
    opacity: 0;
}
}

/* Stagger badges so they don't all type at once */
.badges .chip:nth-child(1) .tw,
.badges .chip:nth-child(1) .tw::after {
    animation-delay: 0s
}

.badges .chip:nth-child(2) .tw,
.badges .chip:nth-child(2) .tw::after {
    animation-delay: .6s
}

.badges .chip:nth-child(3) .tw,
.badges .chip:nth-child(3) .tw::after {
    animation-delay: 1.2s
}

.badges .chip:nth-child(4) .tw,
.badges .chip:nth-child(4) .tw::after {
    animation-delay: 1.8s
}

/* All badges start together: zero delay */
.badges @media (min-width: 640px) {
    .footer-wrap {
        max-width: 1200px;
        margin: 0 auto;
        padding: 28px 16px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        align-items: start;
        justify-items: start
    }
}

/* Center the 3rd footer column between its neighbors on desktop (without centering text) */
@media (min-width: 1024px) {}

/* Fix: align column 3 to start to avoid extra space between columns 2 and 3 */
@media (min-width: 1024px) {}

/* Footer responsive grid: 1 → 2 → 4 columns */
@media (min-width: 640px) {
    .footer-wrap {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
        padding: 28px 24px
    }
}

@media (min-width: 1024px) {
    .footer-wrap {
        grid-template-columns: repeat(4, 1fr);
        gap: 40px;
        padding: 28px 32px;
        justify-items: start;
        align-items: start
    }
}

.logo-idf {
    height: 42px;
    width: auto;
    display: block
}

@media (max-width: 560px) {
    .logo-idf {
        height: 28px
    }
}

/* Align both logos on one line and size them generously */
.brand {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap
}

.brand .logo-main {
    height: 56px;
    width: auto;
    display: block
}

.brand .logo-idf {
    height: 72px;
    width: auto;
    display: block
}

/* plus grand que le logo principal */
@media (max-width: 920px) {
    .brand .logo-main {
        height: 44px
    }

    .brand .logo-idf {
        height: 56px
    }

    /* reste plus grand aussi en mobile */
}


/* SELECT */


/*** custom checkboxes ***/

input[type=checkbox] {
	display: none;
}


/* to hide the checkbox itself */

input[type=checkbox]+label:before {
	font-family: FontAwesome;
	display: inline-block;
}

input[type=checkbox]+label:before {
	content: "\f096";
}


/* unchecked icon */

input[type=checkbox]+label:before {
	font-size: 29px;
}


/* space between checkbox and label */

input[type=checkbox]:checked+label:before {
	content: "\f046";
}


/* checked icon */

.select-form {
	background-color: #F3F3F3;
	border-radius: 0;
	border: none;
	box-shadow: none;
	margin-bottom: 6px;
	font-size: 18px;
	padding: 0 15px;
	height: 54px;
	/*-webkit-appearance: none;*/
	/*background: url(https://www.aides-en-ligne.com/images/arrow.png) no-repeat right;
    background-size: auto;
background-size: 30px 59px;*/
}

.select-form option {
	color: #000000;
	font-size: 16px;
	font-weight: 400;
}


/* Checkbox style */

.container_check {
	display: block;
	position: relative;
	font-size: 14px;
	/*font-size: 0.875rem;*/
	padding-left: 30px;
	line-height: 1.3;
	margin-bottom: 10px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.container_check input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

.container_check input:checked~.checkmark {
	background-color: #059ce7;
	border: 1px solid transparent;
}

.container_check .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	border: 1px solid #d2d8dd;
	background-color: #fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	border-radius: 3px;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.container_check .checkmark:after {
	content: "";
	position: absolute;
	display: none;
	left: 7px;
	top: 3px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.container_check.version_2 {
	padding: 6px 0 0 45px;
	min-height: 30px;
}

.container_check.version_2 .checkmark {
	height: 30px;
	width: 30px;
}

.container_check.version_2 .checkmark:after {
	left: 12px;
	top: 8px;
	width: 5px;
	height: 10px;
}

.container_check input:checked~.checkmark:after {
	display: block;
}

.modal-lg {
  max-width: 900px;
}

@media (min-width: 620px) {
  .modal-lg {
    margin-right: 10px;
    margin-left: 10px;
  }
}
@media (min-width: 920px) {
  .modal-lg {
    margin-right: auto;
    margin-left: auto;
  }
}

/**********************************************/

.zone_img_btn 
{
    margin: auto;
    text-align: center;
}

.img_btn 
{
    display: inline-block;
    width: 210px;
    height: 230px;
    margin: 10px;
    cursor: pointer;
}

.img_btn > img
{
    width: 210px;
    height: 230px;
    border: 3px solid #ffffff;
    border-radius: 8px;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.img_btn > img:hover
{
    border: 3px solid #e9ecef;
    -webkit-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.flouter_page {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

.deflouter_page {
    -webkit-filter: inherit !important;
    -moz-filter: inherit !important;
    -o-filter: inherit !important;
    -ms-filter: inherit !important;
    filter: inherit !important;
}

.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content-reset {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
    overflow: hidden;
}
.modal-reset {
    overflow: hidden;
}

/********************************************************/

.section_register .plan {
	/*background-color: #F3F3F3;
	border: 1px solid #F3F3F3;*/
    color: #34495e;
}

.section_register .plan:hover {
	/*background-color: #2DB42B !important;
	border: 1px solid #2DB42B !important;
    color: #ffffff !important;*/
}

.section_register .plan:hover font {
    /*color: #ffffff !important;*/
}

.section_register .plan:hover h4 {
    /*color: #ffffff !important;*/
}

.section_register .plan.active {
	/*border: 1px solid #2DB42B;*/
}

.section_register .plan .offer h4 .label {
	/*background-color: #2DB42B;*/
    cursor: pointer !important;
}

/********************************************************/

.register-form .plan {
    color: #34495e;
}

.register-form .plan .offer  {
    cursor: pointer !important;
}

/********************************************************/

.btn:hover, .btn:focus {
    color: #ffffff;
}

.skiptranslate {
    display: none !important;
}

@media (max-width: 767px) {
    html, body {
        overflow-x: hidden !important;
    }
}

.grecaptcha-badge {
    visibility: hidden !important;
}

/********************************************************/

.form-control {
    margin-bottom: 6px;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* SELECT */
select.form-control {
	background-color: #F3F3F3 !important;
	border-radius: 0 !important;
	border: none !important;
	box-shadow: none !important;
	font-size: 18px !important;
	padding: 0 15px !important;
	height: 54px !important;
}

select.form-control:hover {
	background-color: #eaeaea !important;
}

select.form-control option {
	color: #000000 !important;
	font-size: 16px !important;
	font-weight: 400 !important;
}

/* INPUT */
input.form-control {
	background-color: #F3F3F3 !important;
	border-radius: 0 !important;
	border: none !important;
	box-shadow: none !important;
	font-size: 18px !important;
	padding: 0 15px !important;
	height: 54px !important;
}

input.form-control:hover {
	background-color: #eaeaea !important;
}

input.form-control:focus {
	background-color: #ffffff !important;
	border: 1px solid #c5cfda !important;
	outline: none !important;
}

/* TEXTAREA */
textarea.form-control {
	background-color: #F3F3F3 !important;
	border-radius: 0 !important;
	border: none !important;
	box-shadow: none !important;
	font-size: 16px !important;
	padding: 10px 15px !important;
	min-height: 120px !important;
	resize: vertical !important;
}

textarea.form-control:hover {
	background-color: #eaeaea !important;
}

textarea.form-control:focus {
	background-color: #ffffff !important;
	border: 1px solid #c5cfda !important;
	outline: none !important;
}

/* CHECKBOX & RADIO */
input[type="checkbox"], 
input[type="radio"] {
	accent-color: #073b71 !important;
	transform: scale(1.2);
	cursor: pointer;
	margin-right: 6px;
}

input[type="checkbox"]:hover, 
input[type="radio"]:hover {
	filter: brightness(1.2);
}

/* BUTTON */
button.btn.btn-block.btn-default,
input[type="submit"].btn.btn-block.btn-default,
input[type="button"].btn.btn-block.btn-default {
	background-color: #DEF7CD !important;
	color: #2f3e2d !important;
	border-radius: 6px !important;
	border: 1px solid #c3e6b1 !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .08) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	padding: 0 15px !important;
	height: 54px !important;
	transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .15s ease;
}

button.btn.btn-block.btn-default:hover,
input[type="submit"].btn.btn-block.btn-default:hover,
input[type="button"].btn.btn-block.btn-default:hover {
	background-color: #c7efad !important;
	color: #1f2a1e !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .12) !important;
	transform: translateY(-2px);
}

button.btn.btn-block.btn-default:active,
input[type="submit"].btn.btn-block.btn-default:active,
input[type="button"].btn.btn-block.btn-default:active {
	background-color: #b2e79c !important;
	color: #1b231b !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .15) inset !important;
	transform: translateY(0);
}


/* FILE INPUT */
input[type="file"].form-control {
	padding: 10px !important;
	background-color: #F3F3F3 !important;
}

input[type="file"].form-control:hover {
	background-color: #eaeaea !important;
}