/* ==========================================================================
   Page "Votre future maison à Cœuve en Ajoie" — widgets Elementor
   ========================================================================== */

.javc {
    --javc-creme: #FBF9F5;
    --javc-creme-fonce: #F3F0E7;
    --javc-encre: #1B2A22;
    --javc-brun: #2B2320;
    --javc-brun-fonce: #1C1614;
    --javc-rouge: #AE1917;
    --javc-rouge-hover: #8F1412;
    --javc-rouge-sombre: #7A100F;
    --javc-or: #C19B76;
    --javc-or-fonce: #8C6242;
    --javc-texte-doux: #5E5749;
    --javc-bordure: #DCD5C6;
}

/* Les familles de caractères viennent du thème (Roboto) : aucune police n'est
   déclarée ni chargée ici. Seules les tailles, graisses et interlignes du
   design sont reprises. */

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

.javc h1,
.javc h2,
.javc h3,
.javc p,
.javc ul {
    margin: 0;
}

.javc ul {
    padding: 0;
    list-style: none;
}

.javc img {
    max-width: 100%;
}

/* --- Éléments partagés ---------------------------------------------------- */

.javc .javc-surtitre {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--javc-or-fonce);
}

.javc .javc-surtitre--or {
    color: var(--javc-or);
}

.javc .javc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 99px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    padding: 16px 26px;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* Icône de bouton : <i class="fas …"> ou SVG en ligne selon le mode
   d'Elementor. currentColor la fait suivre la couleur du texte, survol compris. */
.javc .javc-btn__icone {
    display: inline-flex;
    align-items: center;
    flex: none;
    font-size: 1.05em;
    line-height: 1;
}

.javc .javc-btn__icone svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.javc .javc-btn--clair {
    background: #fff;
    color: var(--javc-brun);
}

.javc .javc-btn--clair:hover,
.javc .javc-btn--clair:focus {
    background: var(--javc-rouge);
    color: #fff;
}

.javc .javc-btn--fantome {
    background: transparent;
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
    font-weight: 600;
}

.javc .javc-btn--fantome:hover,
.javc .javc-btn--fantome:focus {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

.javc .javc-btn--rouge {
    background: var(--javc-rouge);
    color: #fff;
    padding: 15px 24px;
}

.javc .javc-btn--rouge:hover,
.javc .javc-btn--rouge:focus {
    background: #fff;
    color: var(--javc-rouge-sombre);
}

/* --- Entête du thème sur les pages "Cœuve" -------------------------------
   La bannière de titre est retirée (doublon avec le héro) et l'entête passe
   en mode "overlay-header" du thème : transparente, posée sur le héro, qui
   remonte alors tout en haut. Le logo (or + blanc) reste lisible sur le
   dégradé sombre ajouté en haut du héro.
   ------------------------------------------------------------------------- */

body.javc-page #site-header {
    overflow: visible;
}

/* Le bouton menu est en position fixed : ses trois barres sont blanches tant
   qu'il survole le héro, puis reprennent la couleur du thème sur les sections
   claires (classe posée par jav-coeuve-galerie.js). */
body.javc-sur-hero #sidebarCollapse .nav-toggle span {
    background: #fff;
}

/* ==========================================================================
   1. Héro
   ========================================================================== */

.javc-hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: min(80vh, 740px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Dégradé sombre en haut du héro : l'entête transparente (logo, bouton menu)
   s'y détache. */
.javc-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 260px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .45) 38%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

.javc-hero__inner {
    position: relative;
    display: grid;
    gap: 22px;
    max-width: 1180px;
    padding: 70px 5vw 46px;
}

.javc-hero__badge {
    display: inline-flex;
    justify-self: start;
    align-items: center;
    gap: 16px;
    padding: 12px 22px 12px 16px;
    border-radius: 16px;
    background: var(--javc-rouge);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(174, 25, 23, .35);
    transition: background-color .18s ease;
}

.javc-hero__badge:hover,
.javc-hero__badge:focus {
    background: var(--javc-rouge-hover);
    color: #fff;
}

.javc-hero__badge-num {
    display: flex;
    align-items: baseline;
    gap: 3px;
    font-weight: 700;
    line-height: .9;
}

.javc-hero__badge-chiffre {
    font-size: 40px;
}

.javc-hero__badge-unite {
    font-size: 22px;
}

.javc-hero__badge-txt {
    display: grid;
    gap: 3px;
    text-align: left;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, .35);
}

.javc-hero__badge-surtitre {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #F0C9C8;
}

.javc-hero__badge-label {
    font-size: 15.5px;
    font-weight: 700;
    color: #fff;
}

.javc-hero__titre {
    font-weight: 700;
    font-size: clamp(38px, 6.2vw, 74px);
    line-height: 1.02;
    letter-spacing: -.02em;
    color: #fff;
    max-width: 19ch;
    text-wrap: balance;
}

.javc-hero__texte {
    font-size: clamp(16px, 1.9vw, 20px);
    line-height: 1.5;
    color: #EBE5D8;
    max-width: 50ch;
}

.javc-hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.javc-hero__points {
    display: flex;
    gap: 8px 22px;
    flex-wrap: wrap;
    padding-top: 6px;
    font-size: 14px;
    color: #C9C1AE;
}

/* ==========================================================================
   2. Aide au financement
   ========================================================================== */

.javc-fin {
    padding: clamp(56px, 7vw, 104px) 5vw;
    background: var(--javc-brun);
    color: #F3F0E8;
    scroll-margin-top: 90px;
}

.javc-fin__inner {
    display: grid;
    gap: clamp(30px, 4vw, 60px);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    align-items: start;
    max-width: 1180px;
    margin: 0 auto;
}

.javc-fin__col {
    display: grid;
    gap: 20px;
    min-width: 0;
    align-content: start;
}

.javc-fin__col--cartes {
    gap: 14px;
}

.javc-fin__titre {
    font-weight: 700;
    font-size: clamp(32px, 4.5vw, 56px);
    line-height: 1.05;
    letter-spacing: -.02em;
    color: #fff;
    max-width: 20ch;
    text-wrap: balance;
}

.javc-fin__texte {
    font-size: 17.5px;
    line-height: 1.6;
    color: #D5D0C2;
    max-width: 50ch;
}

.javc-fin__cta {
    justify-self: start;
    margin-top: 4px;
}

.javc-fin__lien {
    justify-self: start;
    font-size: 15px;
    font-weight: 600;
    color: var(--javc-or);
    text-decoration: none;
    border-bottom: 1px solid rgba(193, 155, 118, .5);
    padding-bottom: 2px;
    transition: color .18s ease, border-color .18s ease;
}

.javc-fin__lien:hover,
.javc-fin__lien:focus {
    color: #fff;
    border-color: #fff;
}

/* Jauge comparative 20% / 5% */

.javc-jauge {
    display: grid;
    gap: 10px;
    margin-top: 6px;
    padding: 22px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
}

.javc-jauge__ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.javc-jauge__ligne--offre {
    margin-top: 12px;
}

.javc-jauge__label {
    font-size: 14px;
    font-weight: 600;
    color: #B9B3A4;
}

.javc-jauge__label--offre {
    font-weight: 700;
    color: #fff;
}

.javc-jauge__valeur {
    font-size: 15px;
    color: #B9B3A4;
}

.javc-jauge__valeur--offre {
    color: var(--javc-or);
}

.javc-jauge__barre {
    height: 12px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .14);
    overflow: hidden;
}

.javc-jauge__remplissage {
    height: 100%;
}

.javc-jauge__remplissage--ref {
    background: rgba(255, 255, 255, .28);
}

.javc-jauge__remplissage--offre {
    background: var(--javc-rouge);
}

.javc-jauge__note {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #A9A292;
}

/* Cartes des étapes */

.javc-carte {
    display: grid;
    gap: 8px;
    padding: 24px;
    border-radius: 18px;
    background: var(--javc-creme);
    color: var(--javc-encre);
}

.javc-carte__surtitre {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--javc-or-fonce);
}

.javc-carte__titre {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.javc-carte__texte {
    font-size: 15px;
    line-height: 1.6;
    color: var(--javc-texte-doux);
}

/* ==========================================================================
   3. Les chiffres
   ========================================================================== */

.javc-chiffres {
    padding: clamp(50px, 6vw, 84px) 5vw;
    background: var(--javc-creme-fonce);
    border-bottom: 1px solid #E4DED1;
    color: var(--javc-encre);
}

.javc-chiffres__inner {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    max-width: 1180px;
    margin: 0 auto;
}

.javc-chiffres__item {
    display: grid;
    gap: 6px;
    align-content: start;
}

.javc-chiffres__valeur {
    font-weight: 700;
    font-size: clamp(34px, 4vw, 46px);
    line-height: 1;
}

.javc-chiffres__label {
    font-size: 14.5px;
    line-height: 1.45;
    color: #6E6656;
}

/* ==========================================================================
   Bloc texte + images (village / personnalisation)
   ========================================================================== */

.javc-duo {
    padding: clamp(56px, 7vw, 100px) 5vw;
    background: var(--javc-creme);
    color: var(--javc-encre);
}

.javc-duo__inner {
    display: grid;
    gap: clamp(26px, 3.5vw, 48px);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
}

.javc-duo__texte {
    display: grid;
    gap: 16px;
    min-width: 0;
    align-content: center;
}

.javc-duo__titre {
    font-weight: 700;
    font-size: clamp(30px, 3.8vw, 46px);
    line-height: 1.08;
    letter-spacing: -.02em;
    max-width: 24ch;
    text-wrap: balance;
}

.javc-duo__paragraphe {
    font-size: 17px;
    line-height: 1.65;
    color: var(--javc-texte-doux);
    max-width: 52ch;
}

.javc-duo__note {
    font-size: 14px;
    font-style: italic;
    color: #8C8474;
    max-width: 52ch;
}

.javc-duo__etiquettes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 6px;
}

.javc-etiquette {
    padding: 9px 15px;
    border: 1px solid var(--javc-bordure);
    border-radius: 99px;
    font-size: 14px;
    color: #3E3733;
}

.javc-duo__cta {
    justify-self: start;
    margin-top: 4px;
}

.javc .javc-btn--sombre {
    background: var(--javc-brun);
    color: #fff;
    padding: 14px 24px;
    font-size: 15.5px;
}

.javc .javc-btn--sombre:hover,
.javc .javc-btn--sombre:focus {
    background: #171110;
    color: #fff;
}

.javc-duo__images {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
    min-width: 0;
}

.javc-duo--inverse .javc-duo__images {
    order: -1;
}

/* Emplacement large en carrousel : widget natif "Carrousel d'images"
   d'Elementor, contraint au même gabarit que l'image fixe qu'il remplace. */

.javc-duo__carrousel {
    grid-column: span 2;
    min-width: 0;
}

/* Le thème envoie les flèches à 65px SOUS le cadre, où l'overflow:hidden de
   Swiper les rogne : on les ramène dans l'image, au-dessus de la bande des
   points. Forme, taille et couleurs restent celles du thème.
   Spécificité alignée sur la sienne (.elementor-element… .swiper …). */
.javc-duo__carrousel .elementor-pagination-position-outside .swiper .elementor-swiper-button {
    top: auto !important;
    bottom: 46px !important;
}

/* Le thème impose une hauteur fixe aux figures sous 768px : la hauteur vient
   ici du ratio de l'image, d'où la spécificité alignée sur la sienne. */
.javc-duo__carrousel .elementor-widget-image-carousel .swiper .swiper-slide figure,
.javc-duo__carrousel .swiper-slide-inner {
    height: auto;
    margin: 0;
}

.javc-duo__carrousel .swiper-slide-image {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    min-height: 180px;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}

.javc-duo__carrousel--lightbox .swiper-slide-image {
    cursor: zoom-in;
}

.javc-duo__lien {
    display: block;
    position: relative;
    min-height: 150px;
    border-radius: 16px;
    overflow: hidden;
    cursor: zoom-in;
}

.javc-duo__lien--large {
    grid-column: span 2;
    min-height: 180px;
}

/* Elementor ≥ 3.30 déclare `.elementor img { height: auto }` (0,1,1), plus
   spécifique que nos classes : les vignettes retombaient à 0 de haut. Et comme
   elles sont en loading="lazy", une hauteur nulle les gardait hors du viewport
   — elles ne se chargeaient donc jamais. D'où le !important, assumé.
   Les images du carrousel ne sont pas concernées : leur hauteur vient de leur
   ratio, et leur règle est déjà plus spécifique que celle d'Elementor. */
.javc .javc-duo__image {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.javc-duo__lien:hover .javc-duo__image,
.javc-duo__lien:focus-visible .javc-duo__image {
    transform: scale(1.04);
}

/* Petite loupe au survol pour signaler l'agrandissement */
.javc-duo__lien::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(28, 22, 20, 0);
    transition: background-color .3s ease;
    pointer-events: none;
}

.javc-duo__lien:hover::after,
.javc-duo__lien:focus-visible::after {
    background: rgba(28, 22, 20, .12);
}

/* ==========================================================================
   4. Contact
   ========================================================================== */

.javc-contact {
    padding: clamp(56px, 7vw, 104px) 5vw;
    background: var(--javc-brun-fonce);
    color: #F3F0E8;
    scroll-margin-top: 90px;
}

.javc-contact__inner {
    display: grid;
    gap: clamp(30px, 4vw, 60px);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    align-items: start;
    max-width: 1180px;
    margin: 0 auto;
}

.javc-contact__col {
    display: grid;
    gap: 18px;
    min-width: 0;
    align-content: start;
}

.javc-contact__titre {
    font-weight: 700;
    font-size: clamp(32px, 4.3vw, 52px);
    line-height: 1.05;
    letter-spacing: -.02em;
    color: #fff;
    max-width: 20ch;
    text-wrap: balance;
}

.javc-contact__texte {
    font-size: 17px;
    line-height: 1.6;
    color: #CFC9BA;
    max-width: 48ch;
}

.javc-contact__args {
    display: grid;
    gap: 12px;
    padding-top: 4px;
}

.javc-contact__args li {
    display: flex;
    gap: 12px;
    align-items: baseline;
    font-size: 15.5px;
    line-height: 1.55;
    color: #CFC9BA;
}

.javc-contact__fleche {
    color: var(--javc-or);
    font-weight: 700;
}

.javc-contact__coordonnees {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    align-items: baseline;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.javc-contact__tel {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

.javc-contact__mail {
    font-size: 16px;
    color: #CFC9BA;
    text-decoration: none;
}

.javc-contact__tel:hover,
.javc-contact__tel:focus,
.javc-contact__mail:hover,
.javc-contact__mail:focus {
    color: var(--javc-or);
}

/* Carte du formulaire */

.javc-contact__carte {
    background: var(--javc-creme);
    color: var(--javc-encre);
    border-radius: 22px;
    padding: clamp(22px, 3vw, 34px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .3);
    min-width: 0;
}

.javc-contact__carte-titre {
    margin-bottom: 6px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.javc-contact__carte-soustitre {
    margin-bottom: 22px;
    font-size: 14.5px;
    line-height: 1.5;
    color: #6F6656;
}

.javc-contact__placeholder {
    padding: 34px 18px;
    border: 1px dashed var(--javc-bordure);
    border-radius: 12px;
    text-align: center;
    font-size: 14px;
    color: #8C8474;
}

.javc-contact__mention {
    margin-top: 16px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #8C8474;
}

/* Habillage du formulaire injecté par shortcode (Ninja Forms) */

.javc-contact__formulaire .nf-form-fields-required {
    display: none;
}

.javc-contact__formulaire .nf-field-label label {
    font-size: 13.5px;
    font-weight: 600;
    color: #3E3733;
    margin-bottom: 7px;
}

.javc-contact__formulaire input[type="text"],
.javc-contact__formulaire input[type="email"],
.javc-contact__formulaire input[type="tel"],
.javc-contact__formulaire input[type="url"],
.javc-contact__formulaire input[type="number"],
.javc-contact__formulaire select,
.javc-contact__formulaire textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--javc-bordure);
    border-radius: 12px;
    background: #fff;
    font-size: 16px;
    color: var(--javc-encre);
}

.javc-contact__formulaire input:focus,
.javc-contact__formulaire select:focus,
.javc-contact__formulaire textarea:focus {
    outline: 2px solid rgba(174, 25, 23, .35);
    outline-offset: 1px;
    border-color: var(--javc-rouge);
}

.javc-contact__formulaire input[type="button"],
.javc-contact__formulaire input[type="submit"],
.javc-contact__formulaire button[type="submit"] {
    width: 100%;
    margin-top: 6px;
    padding: 17px 24px;
    border: none;
    border-radius: 99px;
    background: var(--javc-rouge);
    color: #fff;
    font-size: 16.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .18s ease;
}

.javc-contact__formulaire input[type="button"]:hover,
.javc-contact__formulaire input[type="submit"]:hover,
.javc-contact__formulaire button[type="submit"]:hover {
    background: var(--javc-brun);
}

/* ==========================================================================
   Barre d'action collante
   ========================================================================== */

.javc-barre {
    position: sticky;
    bottom: 0;
    z-index: 40;
    display: flex;
    gap: 10px;
    padding: 12px 5vw;
    background: rgba(18, 33, 27, .96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.javc-barre__tel,
.javc-barre__cta {
    text-align: center;
    padding: 14px 16px;
    border-radius: 99px;
    font-size: 15.5px;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}

.javc-barre__tel {
    flex: 1;
    border: 1px solid rgba(255, 255, 255, .4);
    color: #fff;
    font-weight: 600;
}

.javc-barre__tel:hover,
.javc-barre__tel:focus {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.javc-barre__cta {
    flex: 1.4;
    background: var(--javc-rouge);
    color: #fff;
    font-weight: 700;
}

.javc-barre__cta:hover,
.javc-barre__cta:focus {
    background: #fff;
    color: var(--javc-rouge-sombre);
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (min-width: 768px) {

    .javc-barre--mobile {
        display: none;
    }
}

@media (max-width: 767px) {

    .javc-duo__images {
        grid-template-columns: 1fr 1fr;
    }

    /* Sous 768px le thème sort les points du cadre (bottom: -30px) : il faut
       de la place dessous pour qu'ils ne recouvrent pas les deux vignettes. */
    .javc-duo__carrousel {
        margin-bottom: 56px;
    }

    .javc-duo--inverse .javc-duo__images {
        order: 0;
    }

    .javc-hero__badge {
        gap: 12px;
        padding: 10px 16px 10px 12px;
    }

    .javc-hero__badge-chiffre {
        font-size: 34px;
    }

    .javc-hero__actions .javc-btn {
        flex: 1 1 100%;
    }

    .javc-fin__inner,
    .javc-contact__inner {
        grid-template-columns: 1fr;
    }
}