h1 { color : var(--lsa-1);}
h2, .assur-h2 { font-size: 1.3rem; color : var(--lsa-2); font-weight: bold}
h3, .assur-h3 { font-weight: bold}
h2, .assur-h2, h3, .assur-h3 {  margin-bottom: 1.2rem;}


.assurfidacolor {color : var(--lsa-2); font-weight: bold}

.menu-lsa { padding: 0 var(--ec-3); display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); grid-gap: 1rem;  }
.menu-lsa a { font-size: 1.1em;outline: 2px solid var(--rev-white); display: block;  background-color: var(--rev-white); padding: .8rem; border-radius: var(--radius); color: var(--rev-black); transition: outline  .2s ease-in-out }
.menu-lsa a:hover { outline: 2px solid var(--lsa-2)}
.menu-lsa a.lsactif { outline: 2px solid var(--lsa-2); background-color: var(--lsa-5);}

.lsa-btn { 
    display: block;
    width: 280px;
    background-color: var(--lsa-2);
    padding: .5rem 2rem;
    color: var(--rev-white) !important;
    font-weight: 600;
    font-size: 1.2em;
    text-align: center;
    border-radius: 1rem;
    margin: auto; 
    transition: .3s ease-in-out;
}
.lsa-btn:hover { background-color: var(--lsa-2-h); }
.lsa-cadre     { 
    position: relative;
    flex-grow: 1;
    padding         : 2vw 4vw 100px ;
    border-radius   : var(--radius) 0 0 var(--radius) ;
    border          : 4px solid var(--lsa-3);
    color           : var(--lsa-1);
    /*
    background-image: url(/media/assurance/bandeau_home_fond.svg), url(/media/assurance/bandeau_home_top.svg);
    background-size : 20%, 15%;
    */
    background-position: bottom left, top right;
    background-repeat: no-repeat, no-repeat;
} 
/*.dark .lsa-cadre { background-image: url(/media/assurance/bandeau_home_fond_dark.svg), url(/media/assurance/bandeau_home_top_dark.svg); } */
.various-lsa {
    position: relative;
    background-color: var(--lsa-3);
     width: 300px; 
    flex-shrink: 0;
    border-radius: 0 var(--radius) var(--radius) 0;
}

.lsa-cadre-d { margin-left: var(--ec-0) }

.lsa-pourquoi { font-size: 1.4rem; font-weight: bold; margin-bottom: 2rem }

.lsa-cadre p {
    margin-bottom : var(--ec-3);
}

.lsa-box, .lsa-box-gen {
    position: relative; 
    padding: var(--ec-1);
    border-radius: .5rem;
    font-weight: bold;
    font-size: 1.1em;
    line-height: 1.2em; 
    max-width: 1000px;
}

.lsa-box-margin-1 { margin: 2vw auto; }

.lsa-bgcolor-4 { border : 1px dashed var(--lsa-1); background-color: transparent !important; }
.lsa-bgcolor-5 { border : 1px dashed var(--lsa-1); flex-shrink: 0; width: 240px; }
 

.lsa-box .decal {
    margin-left: 25%
}

.lsa-box a {
    color: var(--lsa-2);
}

.lsa-flex {
    display: flex;
    gap: 2rem;
    align-items: flex-start
}

.lsa-logo {
    margin-bottom:var(--ec-0);
    background: url(/media/assurance/logo.svg) 50% 50%  no-repeat;
    background-size: contain; 
    height: 80px; 
}

.dark .lsa-logo {
    background: url(/media/assurance/logo-w.svg) 50% 50%  no-repeat;
}

.lsa-img-accroche {
    position: absolute;
    left: 0rem;
    bottom: -25px;
    background: url(/media/assurance/assurance_chien_accroche.svg) 50% 50%  no-repeat;
    background-size: contain; 
    height: 150px; 
    width: 25%;
}

.lsa-img-accroche-2 {
    background: url(/media/assurance/assurance_rc_accroche_2.svg) 50% 50%  no-repeat;
    background-size: contain; 
    height: 150px; 
    width:300px;
}

.lsa-img-accroche-3 {
    background: url(/media/assurance/en-bref-visuel.svg) 50% 50% no-repeat;
    background-size: contain;
    height: 200px;
    width: 300px;
    margin: 1em auto; 
}

.lsa-img-accroche-5 {
    background: url(/media/assurance/fidanimo-assurance-chien-5.svg) 50% 50% no-repeat;
    background-size: contain;
    height: 150px;
    width: 200px;
    margin: 1.5em auto; 
}

.lsa-img-accroche-6 {
    background: url(/media/assurance/fidanimo-assurance-chien-6.svg) 50% 50% no-repeat;
    background-size: contain;
    height: 150px;
    width: 200px;
    margin: 1.5em auto; 
}

.lsa-img-accroche-7 {
    background: url(/media/assurance/assurance_chien_accroche.svg) 50% 50% no-repeat;
    background-size: contain;
    height: 200px;
    width: 90%;
    margin: 1.5em auto; 
}

.lsa-img-accroche-8 {
    background: url(/media/assurance/rc-chien.svg) 50% 50% no-repeat;
    background-size: contain;
    height: 150px;
    width: 150px;
    margin: 1.5em auto; 
}


.lsa-img-fleurs {
    display: none;
    position: absolute; 
    background: url(/media/assurance/assurance_fleurs.png) 50% 50%  no-repeat;
    background-size: contain; 
    height: 90px; 
    width: 50px;
    bottom: -10px;
    right: -10px; 
}

.lsa-img-rc-chien {
    position: absolute;
    background: url(/media/assurance/rc-chien.svg) 50% 50% no-repeat;
    background-size: contain;
    height: 70px;
    width: 90px;
    top: -40px; 
    left: calc(50% - 45px);
}

.lsa-mob {display: none;}
 


@media only screen and (max-width:1400px) {
    .lsa-logo { height: 70px; }
    .lsa-cadre { border-radius : var(--radius) var(--radius) 0 0; }
    .various-lsa {     width: 100%;
        padding: 1rem 0; 
        border-radius: 0 0 var(--radius) var(--radius);} 
    .lsa-img-accroche-3 { display: none;}
}
@media only screen and (max-width:700px) {
    h2 {    font-size: 1.2rem;}
    .lsa-logo { height: 50px; }
    .lsa-pourquoi {  margin-bottom: 1rem; font-size: 1.3rem;}
    .lsa-box .decal {    margin:0 0 .75rem 0; }
    .lsa-img-accroche {     position: relative;    margin: auto;    height: 137px;    width: auto; bottom: 0}
    .lsa-flex { flex-direction: column; margin-bottom: 2rem }
    .lsa-img-rc-chien {    height: 59px; }
    .lsa-img-accroche-2 {height: 60px;  width: auto; margin-bottom: 1rem}
    .lsa-cadre { padding: 1rem 1rem 60px;    background-size: 30%, 25%; }
    .lsa-mob {display: block;}
}