/* Fiche voilier 2027 : variables du design system Elementor 4, avec une valeur de secours. */

/*
 * Le thème met overflow-x: hidden sur #page, ce qui empêche tout élément « collant » (position: sticky)
 * de suivre le défilement, comme la carte contact. clip coupe pareil sans créer de zone de défilement.
 * Limité aux pages de la nouvelle fiche (galerie présente).
 */
#page:has(.lva-galerie) {
    overflow-x: clip;
}

/* Filet gris sous le menu principal : la fiche en pleine largeur flottait sous l'en-tête. */
body:has(.lva-galerie) .elementor-location-header {
    border-bottom: 1px solid var(--couleur-bordure, #DBDFE4);
}

.lva-equip {
    font-family: var(--police-principale, "Spline Sans"), sans-serif;
    color: var(--couleur-marine, #112543);
}

.lva-equip__colonnes,
.lva-equip__categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--espace-m, 1.5rem) var(--espace-l, 2.5rem);
}

.lva-equip__titre {
    margin: 0 0 var(--espace-s, 1rem);
    font-size: var(--taille-legende, 0.75rem);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--couleur-texte-clair, #888F99);
}

.lva-equip__liste {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lva-equip__liste--compacte {
    gap: 0.625rem;
}

.lva-equip__item {
    display: flex;
    align-items: center;
    gap: var(--espace-s, 1rem);
    margin: 0;
    font-size: var(--taille-texte, 1rem);
    line-height: 1.4;
}

.lva-equip__liste--compacte .lva-equip__item {
    font-size: var(--taille-texte-petit, 0.875rem);
}

.lva-equip__picto {
    display: inline-flex;
    flex: none;
    width: 24px;
    height: 24px;
    color: var(--couleur-marine, #112543);
}

.lva-equip__picto svg {
    width: 100%;
    height: 100%;
}

.lva-equip__tout {
    margin-top: var(--espace-m, 1.5rem);
}

.lva-equip__bouton {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    font-size: var(--taille-texte-petit, 0.875rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--couleur-marine, #112543);
    border: 1px solid var(--couleur-bordure, #DBDFE4);
    border-radius: var(--rayon-petit, 6px);
    cursor: pointer;
    list-style: none;
    transition: border-color 0.15s ease;
}

.lva-equip__bouton::-webkit-details-marker {
    display: none;
}

.lva-equip__bouton:hover,
.lva-equip__bouton:focus-visible {
    border-color: var(--couleur-marine, #112543);
}

.lva-equip__masquer,
.lva-equip__tout[open] .lva-equip__voir {
    display: none;
}

.lva-equip__tout[open] .lva-equip__masquer {
    display: inline;
}

.lva-equip__tout[open] .lva-equip__categories {
    margin-top: var(--espace-l, 2.5rem);
}

/* Liste complète ouverte : elle remplace les listes courtes au lieu de les répéter. */
.lva-equip:has(.lva-equip__tout[open]) .lva-equip__colonnes {
    display: none;
}

.lva-equip:has(.lva-equip__tout[open]) .lva-equip__tout {
    margin-top: 0;
}

/* FAQ : cartes réparties sur deux colonnes, première question ouverte. */

.lva-faq {
    columns: 2 340px;
    column-gap: var(--espace-m, 1.5rem);
    font-family: var(--police-principale, "Spline Sans"), sans-serif;
}

.lva-faq__item {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    break-inside: avoid;
    margin: 0 0 var(--espace-m, 1.5rem);
    background-color: var(--couleur-blanc, #FFFFFF);
    border: 1px solid var(--couleur-bordure, #DBDFE4);
    border-radius: var(--rayon-moyen, 12px);
}

.lva-faq__question {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espace-s, 1rem);
    padding: var(--espace-m, 1.5rem);
    font-size: var(--taille-texte, 1rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--couleur-primaire-survol, #007CA2);
    cursor: pointer;
    list-style: none;
}

.lva-faq__question::-webkit-details-marker {
    display: none;
}

.lva-faq__question:focus-visible {
    outline: 2px solid var(--couleur-primaire, #00BBD2);
    outline-offset: -2px;
    border-radius: var(--rayon-moyen, 12px);
}

.lva-faq__signe {
    position: relative;
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 0.2em;
}

.lva-faq__signe::before,
.lva-faq__signe::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 14px;
    height: 2px;
    background-color: var(--couleur-marine, #112543);
}

.lva-faq__signe::after {
    transform: rotate(90deg);
}

.lva-faq__item[open] .lva-faq__signe::after {
    display: none;
}

.lva-faq__reponse {
    padding: 0 var(--espace-m, 1.5rem) var(--espace-m, 1.5rem);
    font-size: var(--taille-texte-petit, 0.875rem);
    line-height: 1.6;
    color: var(--couleur-texte, #505A6A);
}

.lva-faq__reponse p,
.lva-faq__reponse ul {
    margin: 0 0 0.75em;
}

.lva-faq__reponse > :last-child {
    margin-bottom: 0;
}

.lva-faq__reponse ul {
    padding-left: 1.25em;
}

/* Tableau technique : libellé à gauche, valeur à droite, filets entre les lignes. */

.lva-tech {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    font-family: var(--police-principale, "Spline Sans"), sans-serif;
    font-size: var(--taille-texte-petit, 0.875rem);
    line-height: 1.4;
}

.lva-tech th,
.lva-tech td {
    padding: 0.625rem 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--couleur-bordure, #DBDFE4);
    vertical-align: top;
}

.lva-tech th {
    padding-right: var(--espace-s, 1rem);
    font-weight: 400;
    text-align: left;
    color: var(--couleur-texte, #505A6A);
}

.lva-tech td {
    font-weight: 600;
    text-align: right;
    color: var(--couleur-marine, #112543);
}

.lva-tech tr:last-child th,
.lva-tech tr:last-child td {
    border-bottom: 0;
}

/* Pourquoi choisir : notes en étoiles (demi-étoiles comprises), puis arguments cochés. */

.lva-pourquoi {
    display: flex;
    flex-direction: column;
    gap: var(--espace-l, 2.5rem);
    font-family: var(--police-principale, "Spline Sans"), sans-serif;
    color: var(--couleur-marine, #112543);
}

.lva-pourquoi__notes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-s, 1rem) var(--espace-l, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.lva-pourquoi__note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: var(--taille-texte-petit, 0.875rem);
    font-weight: 600;
}

/* 5 étoiles de 18 px : fond gris, puis la part de la note en orange par-dessus. */
.lva-etoiles {
    position: relative;
    display: inline-block;
    flex: none;
    width: 90px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23DBDFE4' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E") 0 0 / 18px 18px repeat-x;
}

.lva-etoiles::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--note, 0) / 5 * 100%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F59C00' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E") 0 0 / 18px 18px repeat-x;
}

.lva-pourquoi__arguments {
    display: flex;
    flex-direction: column;
    gap: var(--espace-m, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.lva-pourquoi__argument {
    display: flex;
    gap: var(--espace-s, 1rem);
    margin: 0;
}

.lva-pourquoi__coche {
    display: inline-flex;
    flex: none;
    width: 24px;
    height: 24px;
    color: var(--couleur-primaire, #00BBD2);
}

.lva-pourquoi__coche svg {
    width: 100%;
    height: 100%;
}

.lva-pourquoi__titre {
    margin: 0 0 0.25rem;
    font-size: var(--taille-texte, 1rem);
    font-weight: 700;
    line-height: 1.4;
}

.lva-pourquoi__texte {
    margin: 0;
    font-size: var(--taille-texte-petit, 0.875rem);
    line-height: 1.6;
    color: var(--couleur-texte, #505A6A);
}

/* Options : « Ce qui est inclus » et « Les options possibles » côte à côte, sur une colonne en mobile. */

.lva-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--espace-m, 1.5rem) var(--espace-l, 2.5rem);
    font-family: var(--police-principale, "Spline Sans"), sans-serif;
    color: var(--couleur-marine, #112543);
}

.lva-options .lva-equip__item {
    align-items: flex-start;
}

.lva-options__prix {
    font-weight: 600;
    white-space: nowrap;
}

/* Galerie : mosaïque de 5 photos, chacune ouvre le diaporama ; bouton « Toutes les photos » en bas à droite. */

.lva-galerie {
    position: relative;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, 200px);
    gap: var(--espace-xs, 0.5rem);
    font-family: var(--police-principale, "Spline Sans"), sans-serif;
}

.lva-galerie__case {
    display: block;
    overflow: hidden;
    border-radius: var(--rayon-moyen, 12px);
    background-color: var(--couleur-fond-clair, #F2F5FA);
}

.lva-galerie__case:first-child {
    grid-row: span 2;
}

.lva-galerie__case img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.lva-galerie__case:hover img {
    transform: scale(1.03);
}

/* Sélecteurs doublés : le thème stylise button:not(.slick-arrow) (casse, marges, couleurs). */
.lva-galerie .lva-galerie__bouton {
    position: absolute;
    right: var(--espace-s, 1rem);
    bottom: var(--espace-s, 1rem);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font: 600 var(--taille-texte-petit, 0.875rem) / 1.2 var(--police-principale, "Spline Sans"), sans-serif;
    color: var(--couleur-blanc, #FFFFFF);
    background-color: var(--couleur-primaire, #00BBD2);
    border: 0;
    border-radius: var(--rayon-petit, 6px);
    box-shadow: 0 4px 12px rgb(17 37 67 / 0.2);
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.lva-galerie .lva-galerie__bouton:hover,
.lva-galerie .lva-galerie__bouton:focus-visible {
    background-color: var(--couleur-primaire-survol, #007CA2);
}

.lva-galerie__bouton svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 767px) {
    .lva-galerie {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 240px repeat(2, 120px);
    }

    .lva-galerie__case:first-child {
        grid-column: span 2;
        grid-row: span 1;
    }
}

/* Plan d'aménagement : image cliquable (visionneuse Elementor) et loupe dans l'angle. */

.lva-plan__lien {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--rayon-moyen, 12px);
    background-color: var(--couleur-blanc, #FFFFFF);
    cursor: zoom-in;
}

.lva-plan__lien img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.lva-plan__lien:hover img {
    transform: scale(1.02);
}

.lva-plan__loupe {
    position: absolute;
    right: var(--espace-xs, 0.5rem);
    bottom: var(--espace-xs, 0.5rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--couleur-marine, #112543);
    background-color: var(--couleur-blanc, #FFFFFF);
    border-radius: var(--rayon-petit, 6px);
    box-shadow: 0 2px 8px rgb(17 37 67 / 0.2);
    transition: color 0.15s ease;
}

.lva-plan__lien:hover .lva-plan__loupe,
.lva-plan__lien:focus-visible .lva-plan__loupe {
    color: var(--couleur-primaire-survol, #007CA2);
}

.lva-plan__loupe svg {
    width: 20px;
    height: 20px;
}