/* --- Base --- */
html {
    scroll-behavior: smooth;
}

.texte-justifie {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* --- Formulaire de devis --- */
.ks-formulaire .ks-lignes {
    display: grid;
    gap: 24px;
}

@media (min-width: 768px) {
    .ks-formulaire .ks-lignes {
        grid-template-columns: 1fr 1fr;
    }
}

.ks-formulaire .ks-champ {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-weight: 500;
    color: #022A85;
}

.ks-formulaire .wpcf7-form-control-wrap {
    display: block;
}

.ks-formulaire .ks-champ--large {
    margin-top: 24px;
}

.ks-formulaire input[type="text"],
.ks-formulaire input[type="tel"],
.ks-formulaire input[type="email"],
.ks-formulaire textarea {
    width: 100%;
    border: 1px solid #DDE2EA;
    border-radius: 8px;
    background: #fff;
    padding: 12px 16px;
    font: 400 16px/24px Inter, sans-serif;
    color: #3D3E41;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ks-formulaire textarea {
    height: 144px;
    resize: vertical;
}

.ks-formulaire input::placeholder,
.ks-formulaire textarea::placeholder {
    color: #6B6E75;
}

.ks-formulaire input:focus,
.ks-formulaire textarea:focus {
    outline: none;
    border-color: #0454FC;
    box-shadow: 0 0 0 3px #EEF3FF;
}

.ks-formulaire .wpcf7-submit {
    margin-top: 24px;
    border: 0;
    border-radius: 8px;
    background: #022A85 url("../images/icons/fleche-blanche.svg") no-repeat right 24px center / 24px 24px;
    padding: 12px 56px 12px 24px;
    font: 600 16px/24px Inter, sans-serif;
    color: #fff;
    cursor: pointer;
    transition: background-color .15s ease;
}

.ks-formulaire .wpcf7-submit:hover {
    background-color: #011D5E;
}

.ks-formulaire .wpcf7-not-valid-tip {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 400;
}

.ks-formulaire .wpcf7-response-output {
    margin: 24px 0 0 !important;
    border-radius: 8px;
    padding: 12px 16px !important;
}

.ks-formulaire .wpcf7-spinner {
    vertical-align: middle;
}

/* --- Pages légales --- */
.ks-contenu-legal h1 {
    margin-bottom: 32px;
    font: 600 34px/42px Outfit, sans-serif;
    letter-spacing: -0.01em;
    color: #022A85;
}

.ks-contenu-legal h2 {
    margin: 40px 0 16px;
    font: 600 24px/32px Outfit, sans-serif;
    color: #022A85;
}

.ks-contenu-legal h3 {
    margin: 24px 0 12px;
    font: 600 20px/28px Outfit, sans-serif;
    color: #022A85;
}

.ks-contenu-legal p,
.ks-contenu-legal ul {
    margin-bottom: 16px;
}

.ks-contenu-legal ul {
    list-style: disc;
    padding-left: 24px;
}

.ks-contenu-legal li {
    margin-bottom: 8px;
}

.ks-contenu-legal strong {
    font-weight: 600;
    color: #022A85;
}

.ks-contenu-legal a {
    color: #0454FC;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (min-width: 1024px) {
    .ks-contenu-legal h1 {
        font-size: 48px;
        line-height: 56px;
    }
}

/* --- Pagination --- */
.ks-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid #DDE2EA;
    border-radius: 8px;
    background: #fff;
    font-weight: 600;
    color: #022A85;
    transition: background-color .15s ease;
}

.ks-pagination a.page-numbers:hover {
    background: #EEF3FF;
}

.ks-pagination .page-numbers.current {
    border-color: #022A85;
    background: #022A85;
    color: #fff;
}

.ks-pagination .page-numbers.dots {
    border: 0;
}

/* --- Galerie produit --- */
.ks-miniature[aria-current="true"] {
    border: 2px solid #0454FC;
}

/* --- Menu mobile --- */
.menu-toggle__barres {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 24px;
}

.menu-toggle__barres i {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
}

.menu-ouvert .menu-toggle__barres i:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-ouvert .menu-toggle__barres i:nth-child(2) {
    opacity: 0;
}

.menu-ouvert .menu-toggle__barres i:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.menu-ouvert .menu-mobile {
    display: flex;
}

.menu-ouvert {
    overflow: hidden;
}

@media (min-width: 1024px) {
    .menu-ouvert {
        overflow: visible;
    }
}