/* ==========================================================================
   LUXE SHIELD FURNITURE DETAILING — surcouche de marque
   Charge APRES custom.css. Contient la typographie, les variables de marque
   et les quelques composants ajoutes pour ce site (bandeau promo, selecteur
   de langue, carte de prestation, encart « sur devis »).
   Ne pas modifier custom.css directement : la substitution de palette y est
   rejouable depuis custom.css.orig.
   ========================================================================== */

:root {
    --lsf-teal: #0f6b63;
    --lsf-teal-dark: #0b4f49;
    --lsf-charcoal: #14232a;
    --lsf-gold: #c9a227;
    --lsf-sand: #f6f2ec;
    --lsf-mint: #7ec8be;
    --lsf-text: #5b6a70;
}

/* --- Typographie : Poppins pour les titres, Inter pour le texte courant.
       Volontairement differente du site Auto (Roboto / Cormorant Garamond)
       et du hub Groupe (Plus Jakarta Sans / Lora). --- */
body,
input,
textarea,
select {
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    color: var(--lsf-text);
}

/* Les boutons heritent de la police, mais surtout PAS de la couleur de texte
   courant : sur le fond teal plein, un gris moyen devient illisible. Le
   template prevoit du blanc, on le retablit explicitement (cette surcouche est
   chargee apres custom.css et gagnerait sinon la cascade). */
.btn,
.btn:link,
.btn:visited,
.btn:focus,
.btn:active,
button.btn,
a.btn {
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    color: #ffffff;
    font-weight: 600;
}

.btn [class*='icon'] { color: inherit; }

/* Variantes a fond clair : texte sombre pour rester lisible. */
.btn-white,
.btn-white:link,
.btn-white:visited,
.btn-white:focus {
    color: var(--lsf-charcoal);
}

/* Variante contour : texte sombre sur fond transparent (fond de page clair). */
.btn-border,
.btn-border:link,
.btn-border:visited,
.btn-border:focus {
    color: var(--lsf-charcoal);
}

.btn-border:hover {
    background-color: var(--lsf-teal);
    color: #ffffff;
}

/* Sur fond sombre (bandeau de titre, sections foncees), la variante contour
   doit passer en clair. */
.page-title-block .btn-border,
.dark-section .btn-border {
    color: #ffffff;
    border-color: #ffffff;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    color: var(--lsf-charcoal);
    letter-spacing: -0.01em;
}

h1, .h1 { font-weight: 700; }
h2, .h2 { font-weight: 600; }

/* --- Bandeau promotionnel (repris du site Auto, restyle) --- */
.promo-ribbon {
    background: var(--lsf-charcoal);
    color: #fff;
    text-align: center;
    padding: 9px 16px;
    font-size: 13px;
    letter-spacing: .04em;
}

.promo-ribbon strong { color: var(--lsf-gold); }
.promo-ribbon a { color: #fff; text-decoration: underline; }

/* --- Selecteur de langue (liste deroulante) ---
   Deux contraintes du template a lever :
   1. la barre du haut a un fond quasi blanc (#f9f9fa) : le texte doit etre
      sombre, pas blanc, sinon le code de langue est illisible ;
   2. cette meme barre porte `overflow: hidden`, qui coupait le menu ouvert et
      rendait donc les autres langues inselectionnables. --- */
.page-header.page-header--style2 .page-header-topline,
.page-header .page-header-topline,
.page-header-mobile-info,
.page-header-mobile-info-content {
    overflow: visible;
}

.ls-lang { position: relative; display: inline-block; }

.ls-lang > summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    list-style: none;
    cursor: pointer;
    padding: 5px 11px;
    border: 1px solid #dfe4e6;
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    color: var(--lsf-charcoal);
    user-select: none;
    transition: border-color .25s, background-color .25s, color .25s;
}

.ls-lang > summary::-webkit-details-marker { display: none; }

.ls-lang > summary:hover,
.ls-lang > summary:focus-visible {
    border-color: var(--lsf-teal);
    color: var(--lsf-teal);
}

.ls-lang-code { letter-spacing: .08em; font-weight: 600; }

.ls-lang-caret {
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--lsf-teal);
    transition: transform .25s;
}

.ls-lang[open] > summary {
    border-color: var(--lsf-teal);
    color: var(--lsf-teal);
}

.ls-lang[open] .ls-lang-caret { transform: rotate(180deg); }

.ls-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1060;
    min-width: 190px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid #e6e9ec;
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(20, 35, 42, .18);
}

.ls-lang-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--lsf-charcoal);
    text-decoration: none;
    transition: background-color .2s, color .2s;
}

.ls-lang-menu a:hover { background: var(--lsf-sand); color: var(--lsf-teal); }
.ls-lang-menu a.is-active { color: var(--lsf-teal); font-weight: 600; }
.ls-lang-flag { font-size: 15px; line-height: 1; }

/* Dans le panneau mobile, le menu s'ouvre vers la gauche pour ne pas sortir
   de l'ecran. */
.page-header-mobile-info-content .ls-lang-menu { right: auto; left: 0; }

/* --- Carte de prestation --- */
.lsf-service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #e6e9ec;
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}

.lsf-service-card:hover {
    box-shadow: 0 18px 40px rgba(20, 35, 42, .12);
    transform: translateY(-4px);
}

.lsf-service-card-media {
    height: 210px;
    background-size: cover;
    background-position: center;
    background-color: var(--lsf-sand);
}

.lsf-service-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 24px 26px 26px;
}

.lsf-service-card-tag {
    align-self: flex-start;
    background: var(--lsf-sand);
    color: var(--lsf-teal-dark);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 2px;
    margin-bottom: 12px;
}

.lsf-service-card-body h3 {
    font-size: 20px;
    margin: 0 0 10px;
}

.lsf-service-card-body h3 a { color: inherit; text-decoration: none; }
.lsf-service-card-body h3 a:hover { color: var(--lsf-teal); }

.lsf-service-card-desc { flex: 1 1 auto; margin-bottom: 18px; }

/* Le prix et le bouton partagent la largeur de la carte : sans retour a la
   ligne, le libelle du bouton depassait et se faisait couper. */
.lsf-service-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    border-top: 1px solid #eef1f2;
    padding-top: 16px;
}

.lsf-service-card-footer .btn {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 18px;
    padding-right: 18px;
    font-size: 13px;
    white-space: nowrap;
    text-align: center;
}

.lsf-service-card-footer .lsf-price {
    flex: 0 1 auto;
    white-space: nowrap;
}

@media (max-width: 1199px) {
    /* En colonnes etroites, le bouton passe sous le prix plutot que d'etre
       comprime. */
    .lsf-service-card-footer .btn { flex-basis: 100%; }
}

.lsf-price {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--lsf-teal-dark);
}

/* Un tarif absent s'affiche « sur devis » : jamais un prix invente. */
.lsf-price--quote {
    color: var(--lsf-text);
    font-weight: 500;
}

/* --- Encarts d'information --- */
.lsf-note {
    background: var(--lsf-sand);
    border-left: 3px solid var(--lsf-gold);
    padding: 16px 20px;
    border-radius: 2px;
}

/* --- Pied de page : rappel du groupe --- */
.lsf-group-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--lsf-gold);
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
}

.lsf-group-link:hover { color: #fff; }

/* --- Contenu editorial (descriptions riches, pages legales) --- */
.lsf-rich-text h3 { margin-top: 32px; }
.lsf-rich-text ul { padding-left: 20px; }
.lsf-rich-text li { margin-bottom: 6px; }

/* --- Formulaire de demande de devis --- */
.lsf-quote-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #eef1f2;
}

.lsf-quote-line-main {
    flex: 1 1 240px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-weight: 500;
    color: var(--lsf-charcoal);
    cursor: pointer;
}

.lsf-quote-line-fields {
    display: flex;
    gap: 10px;
    flex: 1 1 260px;
}

.lsf-quote-line-fields .form-control { margin-bottom: 0; }

/* --- Mot-symbole de secours tant que le logo n'est pas fourni --- */
.lsf-wordmark {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
    font-family: 'Poppins', sans-serif;
}

.lsf-wordmark strong {
    font-size: 22px;
    letter-spacing: .04em;
    color: var(--lsf-charcoal);
    text-transform: uppercase;
}

.lsf-wordmark em {
    font-style: normal;
    font-size: 10px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--lsf-gold);
}

/* --- Bandeau de titre de page ---
   Le header du template est sticky : sans ce degagement, le titre passe
   dessous au chargement de la page. --- */
.page-title-block {
    position: relative;
    padding: 150px 0 40px;
    background-size: cover;
    background-position: center;
}

.page-title-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 35, 42, .78), rgba(20, 35, 42, .55));
}

.page-title-block .container { position: relative; }

.page-title-block .page-title {
    color: #fff;
    margin: 0 0 10px;
    font-size: 40px;
}

.page-title-block .breadcrumb {
    background: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
}

.page-title-block .breadcrumb > li,
.page-title-block .breadcrumb > li > a { color: rgba(255, 255, 255, .82); }
.page-title-block .breadcrumb > li.active { color: var(--lsf-gold); }
.page-title-block .breadcrumb > li + li::before { color: rgba(255, 255, 255, .45); }

@media (max-width: 767px) {
    .page-title-block { padding: 110px 0 30px; }
    .page-title-block .page-title { font-size: 28px; }
}

/* Le gabarit remonte les titres decores de -0.55em (`h2.h-decor`) pour les
   caler optiquement sous le bloc qui les precede. Quand un tel titre OUVRE la
   page, il n'a rien au-dessus de lui : il remontait donc dans le bandeau
   photo, qui lui passait par-dessus. On redonne au premier bloc de la page le
   degagement que le gabarit suppose acquis — le padding stoppe au passage la
   fusion des marges, qui laissait la marge negative s'echapper du bloc. */
.page-main > .block:first-child { padding-top: 72px; }

@media (max-width: 767px) {
    .page-main > .block:first-child { padding-top: 48px; }
}

/* --- Avis clients --- */
.ls-stars {
    display: inline-flex;
    gap: 3px;
    font-size: 16px;
    line-height: 1;
    margin-bottom: 14px;
}

/* Vert : code couleur que le public associe aux avis (Google, Trustpilot). */
.ls-stars span { color: #d6dbdc; }
.ls-stars span.is-on { color: #2FBF71; }

.lsf-review {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #e6e9ec;
    border-radius: 6px;
    padding: 24px 24px 22px;
    transition: box-shadow .25s ease, transform .25s ease;
}

.lsf-review:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(20, 35, 42, .12);
}

.lsf-review-quote {
    flex: 1 1 auto;
    color: var(--lsf-text);
    margin-bottom: 18px;
}

.lsf-review-author {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid #eef1f2;
    padding-top: 16px;
}

.lsf-review-author img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.lsf-review-author strong {
    display: block;
    color: var(--lsf-charcoal);
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
}

.lsf-review-author span {
    display: block;
    font-size: 12px;
    color: var(--lsf-text);
}

/* --- Logo ---
   Le logo du client est un blason quasi carre, la ou le template attend un
   mot-symbole large : il fixe une largeur de conteneur (208 px) et laisse la
   hauteur libre, ce qui donnait un logo de 208 px de haut. On raisonne donc en
   hauteur, avec la specificite necessaire pour passer devant
   `body.is-loaded .page-header .logo img { height: auto }`. --- */
.page-header .logo,
.page-header.page-header--style2 .logo {
    width: auto;
    min-width: 0;
    padding-right: 20px;
}

body.is-loaded .page-header .logo img,
.page-header.page-header--style2 .logo img,
.page-header .logo img {
    height: 58px;
    width: auto;
    min-width: 0;
    max-width: none;
}

@media (max-width: 991px) {
    body.is-loaded .page-header .logo img,
    .page-header.page-header--style2 .logo img,
    .page-header .logo img { height: 44px; }
}

/* Le menu de langues est une <ul> : on neutralise les puces et marqueurs que
   le template applique globalement aux listes. */
.ls-lang-menu,
.ls-lang-menu li {
    list-style: none !important;
    margin: 0;
    padding-left: 0;
}

.ls-lang-menu li::before,
.ls-lang-menu li::marker {
    content: none !important;
    display: none !important;
}

/* --- Bandeau d'appel a l'action (accueil) ---
   La nouvelle photo est claire : sans voile, le texte blanc devient illisible
   sur les zones lumineuses. Voile teal degrade, plus dense a gauche ou vit le
   texte. --- */
.lsf-cta-band {
    position: relative;
    background-position: center;
    background-size: cover;
}

.lsf-cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(11, 45, 42, .93) 0%,
        rgba(15, 107, 99, .82) 42%,
        rgba(15, 107, 99, .45) 78%,
        rgba(15, 107, 99, .25) 100%);
}

.lsf-cta-band > .container { position: relative; z-index: 1; }

/* --- En-tete des pages interieures : meme logique de voile --- */
.page-title-block { background-position: center 35%; }

/* ==========================================================================
   FORMULAIRE DE DEVIS
   Deux etapes numerotees : les pieces a nettoyer a gauche, les coordonnees
   dans un panneau colle a droite. Chaque piece est une carte cliquable dont
   les champs (quantite, precision) n'apparaissent qu'une fois cochee.
   Sans JavaScript, tous les champs restent visibles : la regle de repli est
   conditionnee a `.is-enhanced`, que le script ajoute lui-meme.
   ========================================================================== */
.lsf-quote { margin-top: 46px; }

.lsf-quote-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

/* --- En-tete d'etape --- */
.lsf-step-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 26px;
}

.lsf-step-num {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lsf-teal);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 16px;
}

.lsf-step-head h2 { margin: 0 0 4px; font-size: 24px; }
.lsf-step-head p { margin: 0; font-size: 14px; color: var(--lsf-text); }

/* --- Cartes de selection --- */
.lsf-picks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    /* Chaque carte garde sa hauteur propre : sans cela, cocher une piece
       etirait aussi sa voisine de rangee, qui se retrouvait a moitie vide. */
    align-items: start;
}

.lsf-pick {
    background: #fff;
    border: 1px solid #e3e7e9;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.lsf-pick:hover { border-color: var(--lsf-mint); }

.lsf-pick.is-selected {
    border-color: var(--lsf-teal);
    box-shadow: 0 10px 26px rgba(15, 107, 99, .14);
}

.lsf-pick-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 12px 14px;
    cursor: pointer;
    position: relative;
}

/* La case reste focalisable au clavier, mais c'est la carte qui se voit. */
.lsf-pick-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.lsf-pick-input:focus-visible ~ .lsf-pick-check {
    outline: 2px solid var(--lsf-teal);
    outline-offset: 3px;
}

.lsf-pick-media {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border-radius: 8px;
    background: var(--lsf-sand) center / cover no-repeat;
}

.lsf-pick-text { flex: 1 1 auto; min-width: 0; }

.lsf-pick-cat {
    display: block;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lsf-teal);
    margin-bottom: 3px;
}

.lsf-pick-name {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.3;
    color: var(--lsf-charcoal);
}

.lsf-pick-check {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #cfd6d8;
    position: relative;
    transition: background-color .2s ease, border-color .2s ease;
}

.lsf-pick-check::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .2s ease;
}

.lsf-pick.is-selected .lsf-pick-check {
    background: var(--lsf-teal);
    border-color: var(--lsf-teal);
}

.lsf-pick.is-selected .lsf-pick-check::after { transform: rotate(45deg) scale(1); }

/* --- Champs de la carte --- */
.lsf-pick-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 14px 14px;
    border-top: 1px solid #eef1f2;
    padding-top: 14px;
}

.lsf-quote.is-enhanced .lsf-pick-details { display: none; }
.lsf-quote.is-enhanced .lsf-pick.is-selected .lsf-pick-details { display: flex; }

.lsf-field-label {
    display: block;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lsf-text);
    margin-bottom: 5px;
}

.lsf-qty { flex: 0 0 auto; }
.lsf-detail { flex: 1 1 180px; min-width: 0; }

.lsf-detail input {
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #dfe4e6;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    color: var(--lsf-charcoal);
}

/* --- Compteur de quantite --- */
.lsf-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #dfe4e6;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    height: 42px;
}

.lsf-stepper-btn {
    width: 34px;
    border: 0;
    background: #f4f7f7;
    color: var(--lsf-teal);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease;
}

.lsf-stepper-btn:hover { background: var(--lsf-teal); color: #fff; }

.lsf-stepper input {
    width: 46px;
    border: 0;
    text-align: center;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--lsf-charcoal);
    background: #fff;
    -moz-appearance: textfield;
}

.lsf-stepper input::-webkit-outer-spin-button,
.lsf-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Panneau des coordonnees --- */
.lsf-quote-aside { position: sticky; top: 110px; }

.lsf-panel {
    background: #fff;
    border: 1px solid #e3e7e9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(20, 35, 42, .1);
}

.lsf-panel-top {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 26px;
    background-size: cover;
    background-position: center;
}

.lsf-panel-top::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11, 45, 42, .93), rgba(15, 107, 99, .84));
}

.lsf-panel-top > * { position: relative; z-index: 1; }
.lsf-panel-top .lsf-step-num { background: rgba(255, 255, 255, .16); }
.lsf-panel-top h2 { margin: 0; color: #fff; font-size: 21px; }

.lsf-panel-body { padding: 24px 26px 26px; }

/* --- Recapitulatif --- */
.lsf-recap {
    background: var(--lsf-sand);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.lsf-recap-count {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--lsf-teal-dark);
    margin-bottom: 8px;
}

.lsf-recap-list { list-style: none; margin: 0; padding: 0; }

.lsf-recap-list li {
    font-size: 13px;
    color: var(--lsf-text);
    padding: 3px 0;
}

/* --- Champs du panneau --- */
.lsf-field { margin-bottom: 16px; }
.lsf-field-row { display: flex; flex-wrap: wrap; gap: 14px; }
.lsf-field-row .lsf-field { flex: 1 1 150px; min-width: 0; }
.lsf-field--grow { flex: 2 1 220px; }

.lsf-field label {
    display: block;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lsf-text);
    margin-bottom: 6px;
}

.lsf-field label em { color: var(--lsf-teal); font-style: normal; }

.lsf-field input,
.lsf-field textarea {
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #dfe4e6;
    border-radius: 8px;
    background: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--lsf-charcoal);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.lsf-field input:focus,
.lsf-field textarea:focus,
.lsf-detail input:focus {
    outline: none;
    border-color: var(--lsf-teal);
    box-shadow: 0 0 0 3px rgba(15, 107, 99, .14);
}

.lsf-field textarea { resize: vertical; min-height: 96px; }

.lsf-field-error {
    margin: 6px 0 0;
    font-size: 13px;
    color: #b3261e;
}

.lsf-panel-note {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--lsf-text);
    background: #f4f7f7;
    border-left: 2px solid var(--lsf-gold);
    border-radius: 4px;
    padding: 12px 14px;
    margin: 4px 0 18px;
}

.lsf-submit { width: 100%; text-align: center; }

.lsf-reassurance {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

.lsf-reassurance li {
    position: relative;
    padding-left: 22px;
    font-size: 13px;
    color: var(--lsf-text);
    margin-bottom: 6px;
}

.lsf-reassurance li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 5px;
    height: 9px;
    border: solid var(--lsf-teal);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

@media (max-width: 1199px) {
    .lsf-quote-grid { grid-template-columns: 1fr; gap: 32px; }
    .lsf-quote-aside { position: static; }
}

@media (max-width: 640px) {
    .lsf-picks { grid-template-columns: 1fr; }
    .lsf-panel-body { padding: 20px; }
    .lsf-pick-media { width: 52px; height: 52px; }
}

/* --- Galerie avant / apres ---
   Comparateur glissant (twentytwenty, fourni avec le template). Le bloc est
   volontairement large : le curseur est inutilisable dans une vignette. --- */
.lsf-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin-top: 34px;
}

.lsf-compare { margin: 0; }

.lsf-compare-frame {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e3e7e9;
    background: var(--lsf-sand);
}

.lsf-compare-frame img { display: block; width: 100%; }

.lsf-compare figcaption {
    margin-top: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: var(--lsf-charcoal);
}

.lsf-compare-hint {
    display: block;
    margin-top: 3px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--lsf-text);
}

/* Etiquettes et poignee du plugin, aux couleurs du site. */
.twentytwenty-before-label::before,
.twentytwenty-after-label::before {
    background: rgba(20, 35, 42, .82);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.twentytwenty-handle {
    border-color: #fff;
    background: rgba(15, 107, 99, .85);
    box-shadow: 0 0 14px rgba(0, 0, 0, .35);
}

.twentytwenty-handle::before,
.twentytwenty-handle::after { background: #fff; box-shadow: none; }
.twentytwenty-left-arrow { border-right-color: #fff; }
.twentytwenty-right-arrow { border-left-color: #fff; }

@media (max-width: 991px) {
    .lsf-compare-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* --- Rangees de cartes de prestation ---
   Le template est en Bootstrap 3 : les colonnes flottent et prennent chacune
   la hauteur de leur contenu, d'ou des cartes de hauteurs differentes sur une
   meme ligne. On passe la rangee en flex pour qu'elles s'etirent, et la carte
   pousse son pied de page vers le bas. --- */
.lsf-cards-row {
    display: flex;
    flex-wrap: wrap;
}

.lsf-cards-row > [class*="col-"] {
    display: flex;
    float: none;
}

.lsf-cards-row > [class*="col-"] > .lsf-service-card { width: 100%; }

/* Le pied (prix + bouton) reste colle en bas quel que soit le texte au-dessus. */
.lsf-service-card-footer { margin-top: auto; }

/* --- Avertissement « comparatifs de demonstration » --- */
.lsf-demo-notice {
    max-width: 760px;
    margin: 28px auto 0;
    background: var(--lsf-sand);
    border-left: 3px solid var(--lsf-gold);
    border-radius: 4px;
    padding: 14px 18px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--lsf-text);
    text-align: left;
}

/* --- Signature Rezolu Soft (bas de page) ---
   Ici la barre du bas est BLANCHE (contrairement aux deux autres sites) : la
   marque garde donc son bleu marine d'origine, sans eclaircissement. */
/* La signature vit dans le bloc de droite de la barre du bas, avec les
   reseaux sociaux : ce bloc est pousse a droite par `margin-left: auto`. */
.page-footer-bottomline-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
}

@media (max-width: 767px) {
    /* Empile et recentre avec le reste de la barre sur petit ecran. */
    .page-footer-bottomline-right { justify-content: center; }
}

.ls-credit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    color: var(--lsf-charcoal);
}

.ls-credit-by { opacity: .6; }

.ls-credit-mark {
    display: inline-block;
    width: 30px;
    color: #0E3A55;
}

.ls-credit-mark svg { display: block; width: 100%; height: auto; }

.ls-credit-name { font-weight: 600; letter-spacing: .2px; }
.ls-credit-name-1 { color: #E1930A; }
.ls-credit-name-2 { color: #0E3A55; }
.ls-credit-dot { color: #E1930A; }

/* ==========================================================================
   PAGE CONTACT — formulaire et canaux directs
   Meme langage visuel que la page Devis (cartes blanches, teal, coins 10px) :
   les deux formulaires du site doivent se ressembler.
   ========================================================================== */

.lsf-contact-intro { max-width: 62ch; margin-bottom: 38px; }
.lsf-contact-intro h2 { margin-bottom: 12px; }
.lsf-contact-intro p { margin-bottom: 0; }

.lsf-contact {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}

/* --- Le formulaire --- */
.lsf-form {
    background: #fff;
    border: 1px solid #e3e7e9;
    border-radius: 12px;
    padding: 30px 32px 26px;
}

.lsf-fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 26px;
}

.lsf-fieldset:last-of-type { margin-bottom: 22px; }

/* Le titre de groupe porte le filet : il separe les deux blocs sans ajouter
   un trait decoratif de plus. */
.lsf-legend {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lsf-teal);
}

.lsf-legend::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: #e7ebec;
}

.lsf-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}

.lsf-field { display: flex; flex-direction: column; }

/* `.lsf-field label` est deja defini plus haut pour la page Devis : les deux
   formulaires partagent volontairement le meme style d'etiquette. Ne pas le
   redefinir ici — deux regles concurrentes sur la meme classe finiraient par
   se contredire au premier changement. */
.lsf-req { color: var(--lsf-teal); }

.lsf-form .form-control {
    width: 100%;
    height: auto;
    padding: 12px 14px;
    border: 1px solid #dde3e5;
    border-radius: 8px;
    background: #fbfcfc;
    font-size: 15px;
    color: var(--lsf-charcoal);
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.lsf-form textarea.form-control { min-height: 150px; resize: vertical; }

.lsf-form .form-control::placeholder { color: #9aa7ab; }

.lsf-form .form-control:hover { border-color: #c3d0d3; }

.lsf-form .form-control:focus {
    background: #fff;
    border-color: var(--lsf-teal);
    box-shadow: 0 0 0 3px rgba(15, 107, 99, .14);
    outline: none;
}

/* Etat d'erreur : la couleur seule ne suffit pas, le message est affiche
   sous le champ et lie par aria-describedby. */
.lsf-form .form-control.is-invalid {
    border-color: #b3261e;
    background: #fdf6f5;
}

.lsf-error {
    margin: 6px 0 0;
    font-size: 13px;
    color: #b3261e;
}

.lsf-form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
}

.lsf-form-foot .btn { margin: 0; }

.lsf-form-note,
.lsf-privacy {
    margin: 0;
    font-size: 13px;
    color: var(--lsf-text);
}

.lsf-privacy {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #eef1f2;
}

.lsf-privacy a { color: var(--lsf-teal); text-decoration: underline; text-underline-offset: 2px; }

/* --- Canaux directs --- */
.lsf-reach {
    position: sticky;
    top: 110px;
    background: linear-gradient(160deg, var(--lsf-teal) 0%, var(--lsf-teal-dark) 100%);
    border-radius: 12px;
    padding: 26px 24px;
    color: #fff;
}

.lsf-reach-title {
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lsf-gold);
}

.lsf-reach-list { list-style: none; margin: 0; padding: 0; }

.lsf-reach-list li { margin: 0; }
.lsf-reach-list li::before { content: none; }

/* Toute la ligne est cliquable, pas seulement le texte du lien. */
.lsf-reach-list a,
.lsf-reach-list li.is-static {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 13px 12px;
    margin: 0 -12px;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    transition: background .18s ease;
}

.lsf-reach-list a:hover,
.lsf-reach-list a:focus-visible { background: rgba(255, 255, 255, .1); color: #fff; }

.lsf-reach-list a:focus-visible { outline: 2px solid var(--lsf-gold); outline-offset: 1px; }

.lsf-reach-list li + li { border-top: 1px solid rgba(255, 255, 255, .12); }

.lsf-reach-list .icon {
    flex: 0 0 auto;
    font-size: 17px;
    line-height: 1.5;
    color: var(--lsf-gold);
}

.lsf-reach-text { display: flex; flex-direction: column; min-width: 0; }

.lsf-reach-value {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.lsf-reach-hint {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .68);
    margin-top: 2px;
}

/* --- Carte --- */
.lsf-map {
    margin-top: 34px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e3e7e9;
    line-height: 0;
}

.lsf-map iframe { display: block; width: 100%; height: 380px; border: 0; }

@media (max-width: 991px) {
    .lsf-contact { grid-template-columns: 1fr; gap: 26px; }
    .lsf-reach { position: static; }
}

@media (max-width: 575px) {
    .lsf-form { padding: 24px 20px 20px; }
    .lsf-field-grid { grid-template-columns: 1fr; }
    .lsf-map iframe { height: 280px; }
}

/* ==========================================================================
   PAGE 404
   Le metier consiste a faire disparaitre une tache : les chiffres sont poses
   sur un tissu, une tache s'efface au passage d'un coup de nettoyage. Tout
   est en CSS — une page d'erreur doit s'afficher meme quand le reste du site
   va mal, elle ne telecharge donc aucune image.
   ========================================================================== */

.lsf-404 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 40px 56px;
    padding: 20px 0 40px;
}

/* --- Le tissu et les chiffres --- */
.lsf-404-fabric {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    /* Tissage : deux trames croisees a tres faible contraste sur le sable. */
    background:
        repeating-linear-gradient(90deg, rgba(20, 35, 42, .05) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(0deg, rgba(20, 35, 42, .05) 0 1px, transparent 1px 4px),
        var(--lsf-sand);
    border: 1px solid #e3ded6;
}

.lsf-404-figure {
    position: relative;
    z-index: 2;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(72px, 11vw, 132px);
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--lsf-teal);
}

/* La tache : elle s'estompe une fois, au passage du coup de nettoyage. */
.lsf-404-stain {
    position: absolute;
    z-index: 1;
    top: 26%;
    left: 24%;
    width: 42%;
    height: 46%;
    border-radius: 48% 52% 44% 56% / 52% 44% 56% 48%;
    background: radial-gradient(circle at 40% 38%, rgba(139, 94, 60, .38), rgba(139, 94, 60, .12) 62%, transparent 72%);
    animation: lsf-404-clean 2.6s ease-in-out .5s both;
}

/* Le coup de nettoyage : une bande claire qui balaie le tissu. */
.lsf-404-sweep {
    position: absolute;
    z-index: 3;
    top: -10%;
    left: -35%;
    width: 26%;
    height: 120%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
    transform: skewX(-14deg);
    animation: lsf-404-sweep 2.6s ease-in-out .5s both;
    pointer-events: none;
}

@keyframes lsf-404-clean {
    0%, 30% { opacity: 1; }
    72%, 100% { opacity: 0; }
}

@keyframes lsf-404-sweep {
    from { left: -35%; }
    to { left: 130%; }
}

/* --- Le texte --- */
.lsf-404-eyebrow {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lsf-teal);
    margin-bottom: 12px;
}

.lsf-404-title {
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.18;
    margin: 0 0 16px;
    text-wrap: balance;
}

.lsf-404-lead {
    font-size: 17px;
    color: var(--lsf-text);
    max-width: 52ch;
    margin: 0 0 28px;
}

.lsf-404-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
    margin-bottom: 32px;
}

.lsf-404-actions .btn { margin: 0; }

/* Le bouton « page precedente » reste discret : c'est l'accueil qu'on met en
   avant, la page precedente n'est qu'un secours. */
.lsf-404-back {
    background: none;
    border: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--lsf-charcoal);
    cursor: pointer;
    border-bottom: 1px solid var(--lsf-teal);
    line-height: 1.6;
    transition: color .25s ease;
}

.lsf-404-back:hover,
.lsf-404-back:focus-visible { color: var(--lsf-teal); }

.lsf-404-links {
    border-top: 1px solid #e7ebec;
    padding-top: 22px;
}

.lsf-404-links-label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lsf-teal);
    margin-bottom: 12px;
}

.lsf-404-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 0;
    padding: 0;
}

/* Le gabarit pose une puce sur chaque `li` : la neutraliser sur le `ul` ne
   suffit pas. */
.lsf-404-links li { list-style: none; margin: 0; }
.lsf-404-links li::before { content: none; }

.lsf-404-links a {
    color: var(--lsf-text);
    transition: color .25s ease;
}

.lsf-404-links a:hover,
.lsf-404-links a:focus-visible { color: var(--lsf-teal); }

.lsf-404-report {
    margin: 0;
    padding-top: 22px;
    font-size: 14px;
    color: var(--lsf-text);
}

.lsf-404-report a {
    color: var(--lsf-teal);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 991px) {
    .lsf-404 {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* L'illustration passe sous le texte : sur un ecran etroit, c'est le
       message et les boutons qu'il faut voir en premier. */
    .lsf-404-art { order: 2; }
}

/* Une page d'erreur ne doit surtout pas provoquer de gene : le tissu apparait
   deja propre, sans balayage, des que le systeme demande a limiter les
   animations. */
@media (prefers-reduced-motion: reduce) {
    .lsf-404-stain { animation: none; opacity: 0; }
    .lsf-404-sweep { animation: none; opacity: 0; }
}