/* =========================================================
   BTP RÉNOVATION
   PAGE SALLE DE BAIN — FORMULAIRE / LANDING
   ---------------------------------------------------------
   Ce fichier est chargé APRÈS style.css.

   Objectif :
   - conserver le même design que style.css
   - utiliser les mêmes couleurs
   - utiliser la même typographie
   - conserver les mêmes bordures / ombres / rayons
   - optimiser le formulaire pour la conversion
   - responsive tablette + mobile
   ========================================================= */


/* =========================================================
   VARIABLES LOCALES
   ---------------------------------------------------------
   On reprend volontairement les variables de style.css.
   Les valeurs de secours permettent au formulaire de rester
   correct même si une variable globale venait à manquer.
   ========================================================= */

body.sdb-landing {
    --sdb-navy: var(--navy, #465b52);
    --sdb-navy-dark: var(--navy-dark, #35473f);
    --sdb-navy-deep: var(--navy-deep, #283830);

    --sdb-cyan: var(--cyan, #647e70);
    --sdb-cyan-light: var(--cyan-light, #c8d5cc);
    --sdb-cyan-pale: var(--cyan-pale, #f0f4ef);

    --sdb-white: var(--white, #ffffff);
    --sdb-ink: var(--ink, #29362f);
    --sdb-text: var(--text, #46534c);
    --sdb-muted: var(--muted, #68736c);

    --sdb-line: var(--line, #dce2db);
    --sdb-soft: var(--soft, #f7f8f4);
    --sdb-accent: var(--accent, #526b5d);
    --sdb-success: var(--success, #427358);

    --sdb-shadow:
        var(--shadow, 0 12px 34px rgba(40, 56, 48, .08));

    color: var(--sdb-ink);
}


/* =========================================================
   HERO / STRUCTURE PRINCIPALE
   ========================================================= */

.sdb-landing .service-detail-hero {
    padding:
        clamp(44px, 5vw, 68px)
        0
        clamp(52px, 6vw, 82px);

    background:
        linear-gradient(
            180deg,
            var(--sdb-cyan-pale) 0%,
            #f7f9f6 100%
        );

    border-bottom: 1px solid var(--sdb-line);
}


/* =========================================================
   GRILLE HERO + FORMULAIRE
   ========================================================= */

.sdb-landing .service-detail-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, 470px);

    gap: clamp(36px, 5vw, 70px);

    align-items: start;
}


/* Empêche tout débordement dans une grid */
.sdb-landing .service-detail-grid > * {
    min-width: 0;
}


/* =========================================================
   TITRE PRINCIPAL
   ========================================================= */

.sdb-landing .service-detail-hero h1 {
    max-width: 720px;

    margin: 0;

    color: var(--sdb-ink);

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif;

    font-size: clamp(36px, 4vw, 53px);
    font-weight: 700;

    line-height: 1.06;

    letter-spacing: -.035em;
}


/* =========================================================
   TEXTE D'INTRODUCTION
   ========================================================= */

.sdb-landing .service-detail-hero .lead {
    max-width: 680px;

    margin-top: 20px;
    margin-bottom: 0;

    color: var(--sdb-text);

    font-size: clamp(16px, 1.5vw, 18px);

    line-height: 1.65;
}


/* =========================================================
   EYEBROW / PETIT TITRE
   ========================================================= */

.sdb-landing .eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    color: var(--sdb-cyan);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .09em;

    text-transform: uppercase;
}


/* =========================================================
   BLOC SPÉCIALISTE
   ========================================================= */

.sdb-landing .specialist-box {
    display: flex;

    gap: 12px;

    align-items: flex-start;

    margin: 26px 0;

    padding: 15px 17px;

    border: 1px solid var(--sdb-line);
    border-left: 4px solid var(--sdb-cyan);

    border-radius: 4px;

    background: var(--sdb-white);
}


.sdb-landing .specialist-box > span {
    flex: 0 0 auto;

    color: var(--sdb-success);

    font-weight: 800;
}


.sdb-landing .specialist-box strong {
    display: block;

    margin-bottom: 3px;

    color: var(--sdb-ink);

    font-size: 13px;
}


.sdb-landing .specialist-box p {
    margin: 0;

    color: var(--sdb-muted);

    font-size: 12px;

    line-height: 1.55;
}


/* =========================================================
   CTA DU HERO
   ========================================================= */

.sdb-landing .hero-cta {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    align-items: center;

    margin-top: 26px;
}


/* =========================================================
   CARTE FORMULAIRE
   ========================================================= */

.sdb-landing .sdb-card {
    position: relative;

    min-width: 0;

    padding: clamp(23px, 2.6vw, 32px);

    overflow: hidden;

    color: var(--sdb-ink);

    background: var(--sdb-white);

    border: 1px solid var(--sdb-line);

    border-radius: 7px;

    box-shadow: var(--sdb-shadow);

    scroll-margin-top: 165px;
}


/*
   Petite ligne supérieure discrète permettant de rattacher
   visuellement le formulaire à la charte BTP Rénovation.
*/
.sdb-landing .sdb-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background: var(--sdb-cyan);
}


/* =========================================================
   TITRE FORMULAIRE
   ========================================================= */

.sdb-landing .sdb-card h2 {
    margin: 7px 0 11px;

    color: var(--sdb-ink);

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif;

    font-size: clamp(25px, 2.5vw, 32px);

    font-weight: 700;

    line-height: 1.1;

    letter-spacing: -.025em;
}


/* =========================================================
   INTRO FORMULAIRE
   ========================================================= */

.sdb-landing .sdb-card-intro {
    max-width: 520px;

    margin: 0 0 23px;

    color: var(--sdb-muted);

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   FORMULAIRE
   ========================================================= */

.sdb-landing .sdb-card form {
    display: grid;

    gap: 16px;

    margin: 0;
}


/* =========================================================
   GRILLE DES CHAMPS
   ========================================================= */

.sdb-landing .sdb-fields {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;
}


/* =========================================================
   LABEL
   ========================================================= */

.sdb-landing .sdb-card label {
    display: grid;

    gap: 7px;

    min-width: 0;

    margin: 0;

    color: var(--sdb-ink);

    font-size: 12px;

    font-weight: 700;

    line-height: 1.4;
}


/* =========================================================
   INPUT / SELECT / TEXTAREA
   ========================================================= */

.sdb-landing .sdb-card input:not([type="checkbox"]):not([type="hidden"]),
.sdb-landing .sdb-card select,
.sdb-landing .sdb-card textarea {
    box-sizing: border-box;

    display: block;

    width: 100%;

    min-width: 0;

    min-height: 48px;

    margin: 0;

    padding: 12px 14px;

    border: 1px solid #cbd5cf;

    border-radius: 4px;

    outline: none;

    background: var(--sdb-white);

    color: var(--sdb-ink);

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.4;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}


/* =========================================================
   PLACEHOLDER
   ========================================================= */

.sdb-landing .sdb-card input::placeholder,
.sdb-landing .sdb-card textarea::placeholder {
    color: #89958e;

    opacity: 1;
}


/* =========================================================
   SURVOL DES CHAMPS
   ========================================================= */

.sdb-landing .sdb-card input:not([type="checkbox"]):not([type="hidden"]):hover,
.sdb-landing .sdb-card select:hover,
.sdb-landing .sdb-card textarea:hover {
    border-color: var(--sdb-cyan-light);
}


/* =========================================================
   FOCUS DES CHAMPS
   ========================================================= */

.sdb-landing .sdb-card input:not([type="checkbox"]):not([type="hidden"]):focus,
.sdb-landing .sdb-card select:focus,
.sdb-landing .sdb-card textarea:focus {
    border-color: var(--sdb-cyan);

    box-shadow:
        0 0 0 3px rgba(100, 126, 112, .12);

    background: #fff;
}


/* Focus clavier accessible */
.sdb-landing .sdb-card
:is(
    input,
    select,
    textarea,
    button,
    summary,
    a
):focus-visible {
    outline: 2px solid var(--sdb-cyan);

    outline-offset: 2px;
}


/* =========================================================
   SELECT
   ========================================================= */

.sdb-landing .sdb-card select {
    cursor: pointer;
}


/* =========================================================
   TEXTAREA
   ========================================================= */

.sdb-landing .sdb-card textarea {
    min-height: 112px;

    resize: vertical;
}


/* =========================================================
   CONSENTEMENT RGPD
   ========================================================= */

.sdb-landing .sdb-card .sdb-consent {
    display: grid;

    grid-template-columns: 18px minmax(0, 1fr);

    gap: 10px;

    align-items: flex-start;

    margin: 1px 0 0;

    color: var(--sdb-muted);

    font-size: 11px;

    font-weight: 400;

    line-height: 1.55;
}


.sdb-landing .sdb-consent input {
    width: 17px;

    height: 17px;

    margin: 2px 0 0;

    accent-color: var(--sdb-navy);

    cursor: pointer;
}


.sdb-landing .sdb-consent a {
    color: var(--sdb-navy);

    font-weight: 700;

    text-decoration: underline;

    text-underline-offset: 2px;
}


.sdb-landing .sdb-consent a:hover {
    color: var(--sdb-cyan);
}


/* =========================================================
   BOUTON ENVOI
   ========================================================= */

.sdb-landing .sdb-submit {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    width: 100%;

    min-height: 52px;

    padding: 0 22px;

    border: 1px solid var(--sdb-navy);

    border-radius: 4px;

    background: var(--sdb-navy);

    color: #fff;

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.2;

    text-align: center;

    white-space: normal;

    cursor: pointer;

    box-shadow: none;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}


.sdb-landing .sdb-submit:hover {
    border-color: var(--sdb-navy-dark);

    background: var(--sdb-navy-dark);

    transform: translateY(-1px);
}


.sdb-landing .sdb-submit:active {
    transform: translateY(0);
}


.sdb-landing .sdb-submit:disabled {
    opacity: .65;

    cursor: wait;

    transform: none;
}


/* =========================================================
   TEXTE SOUS LE BOUTON
   ========================================================= */

.sdb-landing .sdb-form-note {
    margin: -2px 0 0;

    color: var(--sdb-muted);

    font-size: 10px;

    line-height: 1.5;

    text-align: center;
}


/* =========================================================
   DÉTAILS OPTIONNELS
   ========================================================= */

.sdb-landing .sdb-details {
    padding-top: 2px;
}


.sdb-landing .sdb-details summary {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--sdb-navy);

    font-size: 12px;

    font-weight: 700;

    line-height: 1.5;

    cursor: pointer;
}


.sdb-landing .sdb-details summary:hover {
    color: var(--sdb-cyan);
}


.sdb-landing .sdb-details summary span {
    color: var(--sdb-muted);

    font-weight: 400;
}


/* =========================================================
   CHAMP MESSAGE
   ========================================================= */

.sdb-landing .sdb-message-label {
    margin-top: 13px;
}


/* =========================================================
   ALERTE ERREUR
   ========================================================= */

.sdb-landing .sdb-alert {
    margin: 0 0 17px;

    padding: 12px 14px;

    border: 1px solid #e2aaa3;

    border-radius: 4px;

    background: #fff3f1;

    color: #85352d;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.5;
}


/* =========================================================
   STATUT ENVOI
   ========================================================= */

.sdb-landing .sdb-submit-status {
    margin: 0;

    color: var(--sdb-muted);

    font-size: 11px;

    line-height: 1.5;

    text-align: center;
}


.sdb-landing .sdb-submit-status:empty {
    display: none;
}


/* =========================================================
   HONEYPOT ANTI-SPAM
   ========================================================= */

.sdb-landing .sdb-honeypot {
    position: absolute !important;

    width: 1px !important;

    height: 1px !important;

    padding: 0 !important;

    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* =========================================================
   PHOTO DU PROJET
   ========================================================= */

.sdb-landing .sdb-project-image {
    margin: 30px 0 0;
}


.sdb-landing .sdb-project-image img {
    display: block;

    width: 100%;

    max-height: 360px;

    object-fit: cover;

    border-radius: 5px;

    border: 1px solid var(--sdb-line);

    box-shadow:
        0 8px 26px rgba(40, 56, 48, .07);
}


.sdb-landing .sdb-project-image figcaption {
    margin-top: 8px;

    color: var(--sdb-muted);

    font-size: 10px;

    line-height: 1.45;
}


/* =========================================================
   LIEN RÉALISATIONS / PREUVES
   ========================================================= */

.sdb-landing .sdb-proof-link {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-top: 14px;

    color: var(--sdb-navy);

    font-size: 12px;

    font-weight: 700;

    text-decoration: underline;

    text-underline-offset: 3px;
}


.sdb-landing .sdb-proof-link:hover {
    color: var(--sdb-cyan);
}


/* =========================================================
   ÉTAT VALIDE — SI UTILISÉ PAR LE JAVASCRIPT
   ========================================================= */

.sdb-landing .sdb-card
:is(input, select, textarea).is-valid {
    border-color: var(--sdb-success);
}


/* =========================================================
   ÉTAT ERREUR — SI UTILISÉ PAR LE JAVASCRIPT
   ========================================================= */

.sdb-landing .sdb-card
:is(input, select, textarea).is-error {
    border-color: #b9554b;

    box-shadow:
        0 0 0 3px rgba(185, 85, 75, .08);
}


/* =========================================================
   MESSAGE D'ERREUR SOUS UN CHAMP
   ========================================================= */

.sdb-landing .sdb-field-error {
    display: block;

    margin-top: -2px;

    color: #8a3026;

    font-size: 10px;

    font-weight: 700;

    line-height: 1.4;
}


/* =========================================================
   PETIT BLOC DE RÉASSURANCE
   ========================================================= */

.sdb-landing .sdb-reassurance {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 1px;

    margin-top: 18px;

    overflow: hidden;

    border: 1px solid var(--sdb-line);

    border-radius: 5px;

    background: var(--sdb-line);
}


.sdb-landing .sdb-reassurance > div {
    padding: 11px 9px;

    background: var(--sdb-soft);

    text-align: center;
}


.sdb-landing .sdb-reassurance strong {
    display: block;

    margin-bottom: 2px;

    color: var(--sdb-ink);

    font-size: 10px;
}


.sdb-landing .sdb-reassurance span {
    display: block;

    color: var(--sdb-muted);

    font-size: 9px;

    line-height: 1.35;
}


/* =========================================================
   TABLETTE / PETITS DESKTOPS
   ========================================================= */

@media (max-width: 1120px) {

    .sdb-landing .service-detail-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(340px, 420px);

        gap: 40px;
    }

}


/* =========================================================
   TABLETTE
   Même breakpoint principal que style.css
   ========================================================= */

@media (max-width: 980px) {

    .sdb-landing .service-detail-hero {
        padding:
            44px
            0
            60px;
    }


    .sdb-landing .service-detail-grid {
        grid-template-columns: 1fr;

        gap: 32px;
    }


    /*
       Le formulaire repasse sous l'argumentaire mais garde
       une largeur confortable pour ne pas devenir trop large.
    */
    .sdb-landing .sdb-card {
        width: 100%;

        max-width: 720px;

        scroll-margin-top: 110px;
    }


    .sdb-landing .sdb-project-image {
        max-width: 720px;
    }


    .sdb-landing .specialist-box {
        margin-block: 20px;
    }


    .sdb-landing .hero-cta {
        display: flex;

        flex-wrap: wrap;

        gap: 12px;
    }

}


/* =========================================================
   MOBILE
   Même logique que style.css
   ========================================================= */

@media (max-width: 640px) {

    .sdb-landing .service-detail-hero {
        padding:
            36px
            0
            46px;
    }


    .sdb-landing .service-detail-grid {
        gap: 25px;
    }


    .sdb-landing .service-detail-hero h1 {
        font-size: clamp(32px, 9vw, 40px);

        line-height: 1.08;
    }


    .sdb-landing .service-detail-hero .lead {
        margin-top: 16px;

        font-size: 15px;

        line-height: 1.6;
    }


    .sdb-landing .specialist-box {
        margin: 19px 0;

        padding: 13px 14px;
    }


    /*
       Sur mobile on supprime l'image secondaire :
       le formulaire devient visible plus rapidement.
    */
    .sdb-landing .sdb-project-image {
        display: none;
    }


    .sdb-landing .sdb-card {
        padding: 22px 18px 21px;

        border-radius: 6px;

        scroll-margin-top: 90px;
    }


    .sdb-landing .sdb-card h2 {
        font-size: 25px;
    }


    .sdb-landing .sdb-card-intro {
        margin-bottom: 19px;

        font-size: 12px;
    }


    /*
       Tous les champs passent sur une colonne :
       meilleur confort au doigt.
    */
    .sdb-landing .sdb-fields {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .sdb-landing .sdb-card form {
        gap: 14px;
    }


    .sdb-landing .sdb-card
    input:not([type="checkbox"]):not([type="hidden"]),
    .sdb-landing .sdb-card select,
    .sdb-landing .sdb-card textarea {
        min-height: 50px;

        font-size: 16px;
    }


    /*
       16px évite notamment le zoom automatique
       de certains navigateurs mobiles.
    */
    .sdb-landing .sdb-card textarea {
        min-height: 110px;
    }


    .sdb-landing .sdb-submit {
        min-height: 54px;

        padding-inline: 16px;

        font-size: 14px;
    }


    .sdb-landing .hero-cta {
        display: grid;

        grid-template-columns: 1fr;

        gap: 10px;

        width: 100%;
    }


    .sdb-landing .hero-cta .btn {
        width: 100%;
    }


    .sdb-landing .sdb-reassurance {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   PETITS MOBILES
   ========================================================= */

@media (max-width: 420px) {

    .sdb-landing .service-detail-hero {
        padding-top: 30px;
    }


    .sdb-landing .service-detail-hero h1 {
        font-size: 31px;
    }


    .sdb-landing .sdb-card {
        padding:
            21px
            15px
            20px;
    }


    .sdb-landing .sdb-card h2 {
        font-size: 23px;
    }


    .sdb-landing .sdb-fields {
        grid-template-columns: 1fr;
    }


    .sdb-landing .sdb-card
    input:not([type="checkbox"]):not([type="hidden"]),
    .sdb-landing .sdb-card select,
    .sdb-landing .sdb-card textarea {
        padding-inline: 12px;
    }


    .sdb-landing .sdb-consent {
        font-size: 10.5px;
    }

}


/* =========================================================
   ACCESSIBILITÉ — MOUVEMENTS RÉDUITS
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sdb-landing {
        scroll-behavior: auto;
    }


    .sdb-landing *,
    .sdb-landing *::before,
    .sdb-landing *::after {
        transition-duration: .01ms !important;

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;
    }


    .sdb-landing .sdb-submit:hover {
        transform: none;
    }

}