/**
* 2007-2026 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author    PrestaShop SA <contact@prestashop.com>
*  @copyright 2007-2026 PrestaShop SA
*  @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*
* Don't forget to prefix your containers with your own identifier
* to avoid any conflicts with others containers.
*/

/* Titre banner */
.titrebanner {
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    color: #371f13;
    margin-bottom: 15px;
    font-size: 50px;
    line-height: 50px;
}

/* Ligne avec barres */
.ligne-separateur {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 46px;
}

/* Barres design */
.barre {
    width: 150px;
    height: 3px;
    border-radius: 50px;
    background: linear-gradient(
        to right,
        transparent 0%,
        #371f13 20%,
        #d9bf95 50%,
        #371f13 80%,
        transparent 100%
    );
    opacity: 0.9;
}

/* Mise en valeur "en Corse" */
.corse {
    font-size: 66px;
    letter-spacing: 1px;
}

/* Texte secondaire */
.titrebanner p {
	line-height: 2rem;
	margin-top: 29px;
	font-family: "EB Garamond", serif;
	font-optical-sizing: auto;
    font-weight: 600;
    font-style: italic;
    color: #371f13;
	font-size: 30px;
}
/* Bouton Corse */
.btn-corse {
    display: inline-block;
    padding: 18px 53px 20px 53px;
    border-radius: 30px;
    border: 1px solid #d9bf95; 
    box-shadow: 0 0 0 2px #64523e; 
    background: url('https://lileauxtresors.com/img/cms/fondbouton.png') center/cover no-repeat;
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
    font-size: 36px;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-corse:hover {
	color: white;
}


/*-----------------------------------------*/











.banniereacc {
    position: relative;
    width: 100%;
    height: 750px;
    background: url('https://lileauxtresors.com/img/cms/banner1lileauxtresors.png') center/cover no-repeat;
}

.overlay {
    position: relative;
    width: 100%;
    height: 112%;
    display: flex;
    flex-direction: column;
}

/* Logo */
.logo-top {
    position: absolute;
    top: 40px;
    left: 56%;
    transform: translateX(-50%);
    max-width: 539px;
}

/* Container étapes */
.etapes {
    width: 90%;
    display: flex;
    justify-content: space-between;
    gap: 70px;
    margin: auto;
    margin-bottom: 187px;
}


.etape {
    flex: 1;
    background:
linear-gradient( rgba(255,255,255,0.5)), 
       url('https://lileauxtresors.com/img/cms/fondbloc.jpg') center/cover no-repeat;
    padding: 35px 20px;
    text-align: center;
    border-radius: 12px;
    position: relative;
    color: #000;
    overflow: hidden;
    transition: transform 0.3s ease;
}


/* Overlay léger blanc pour lisibilité */
.etape::before {
    content: "";
    position: absolute;
    inset: 0;
    /*background: rgba(255,255,255,0.25);*/

    z-index: 0;
}

.etape > * {
    position: relative;
    z-index: 1;
}

.etape:hover {
    transform: translateY(-6px);
}



/* Titre */
.etape h3 {
	font-family: "EB Garamond", serif;
	font-weight: 900;
	color: #785843;
    margin-bottom: 15px;
    font-size: 25px;
}

/* Lien */
.etape a {
	    font-size: 17px;
    text-decoration: none;
    color: #785843;
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
}

/* Flèche */
.arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}

/* Animation */
.etape a:hover .arrow {
    transform: translateX(6px);
}
.btn-class {
    left: 39%;
    /* top: 10px; */
    bottom: 7%;
    position: absolute;
}

/* Responsive */
@media (max-width: 992px) {
    .etapes {
        bottom: 5%;
    }
}