/* Custom Stylesheet */
/**
 * Use this file to override Materialize files so you can update
 * the core Materialize files in the future
 *
 * Made By MaterializeCSS.com
 */

.icon-block {
  padding: 0 15px;
}
.icon-block .material-icons {
	font-size: inherit;
}

body{
	margin:auto;
	max-width:1980px;
}

nav{
background-color:#FC987F;
}

.page-footer{
	background-color:#FC987F;
}

#index-banner{
	background-image: url("../img/banner-beaute.jpg");
	min-height:300px;
	width:100%;
	background-color:#efefef;
	background-size:contain;
	background-repeat:no-repeat;
}

#index-banner h5{
	color:#ffffff;
	font-weight:600;
	margin:auto;
}
#index-banner p{
	color:#ffffff;
	max-width:70%;
	border:1px solid red;
	margin:auto;
}

.card{
	border-radius:30px;
}
.card .card-image img{
	border-radius:30px;
		padding:10px;
}



/* ------------------  ACCUEIL   ---------------  */

.hero{
	border-bottom:2px solid #dcdcdc;
}

.hero p{
	font-weight:300;
	color:#999999;
	letter-spacing:0.8px;
	font-size:1.25em;
	line-height:1.6em;
	xxxpadding:10px;
}


#logo-container img{
	height:60px;
	margin-top:5px;
}



.webiLogo{
background:#fff;
text-align:center;
}

.webiLogo img{
background:#fff;
padding:10px 40px;
position:relative;
top:-20px;
border-radius:50%;
transform:scale(0.85);
transition:all, 0.3s;
}
.webiLogo img:hover{
transform:scale(0.88);
}

.page-footer p{
padding:0 10% 0 0;
}

@media (min-width: 993px) {
	.page-footer .col {
    border-right: 1px solid rgba(255,255,255,0.2);
	padding-right:3%;
	padding-left:3%;
  }
}


.linkLire{
	color:#ef6445;
	font-weight:600;
	transition: all, 0.3s;
	display:inline-block;
	padding-top:5px;
	padding-bottom:5px;
	width:100%;
}
.linkLire:hover{
	color:#F44336;
	font-weight:700;
}


.icon-reassur-footer{
	max-width:100px;
	margin:auto;
}

#somFaq ol li a{
	color:#aaa;
	transition: all, 0.3s;
}
#somFaq ol li a:hover{
	color:#ef6445;
	transition: all, 0.3s;
}

.linkArticle{
	color:rgba(244,67,54,0.7);
	transition:all,0.3s;
	font-weight:500;
	padding:10px;
	display:inline-block;
}
.linkArticle:hover{
	color:rgba(244,67,54,1);
}
.linkArticle span{
	display:inline-block;
	margin-top:10px;
}


.idKdo h3{
	background-color:#FAF6F2;
	color:#222222;
	border-radius:20px;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
	padding:15px;
	font-size:2.7em;
	border-left:5px solid #FC987F;
}

.idKdo .intro{
	font-size:1.3em;
	line-height:1.5em;
	letter-spacing:0.5px;
}
.idKdo .card-content{
	padding:20px;
}
.idKdo .row{
	margin-bottom: 5px;
}


.idKdo .card-content p{
	xmargin-top:4px;
	margin-bottom:5px;
	color:#444444;
	letter-spacing:0.5px;
}
.idKdo .card-content p span{
	color:#000000;
	xxxfont-size:1.em;
	font-weight:600;
}
.idKdo .card-action{
	text-align:center;
	border:none;
	margin-top:20px;
	margin-bottom:10px;
}
.idKdo .card-action a{
	border:2px solid #F38C72;
	text-align:center;
	border-radius:20px;
	padding:20px;
	color:#F38C72 !important;
	font-weight:600;
	background-color: #FAF6F2;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
}
.idKdo .card-action a:hover{
	border:2px solid #e25e3d;
	xxxcolor:#e25e3d !important;
	background-color: rgba(238,133, 107,0.75) !important;
	color:#ffffff !important;
}


.idKdo .card-content .row {
  display: flex;
  flex-wrap: wrap;
}

.idKdo .card-content .col.m4 {
  display: flex;
  justify-content: flex-end; 
  align-items: flex-end;      
}

.idKdo h4 {
margin-top:0;  
margin-left:10px;
font-weight:700;
}
.idKdo h4 em{
font-size:0.8em;
	padding-left:7px;
	font-style:normal;
	color:#444444;
	font-weight:500;
}

.idKdo .card-image{
padding:10px;
}

.idKdo .card-image img{
padding:0;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
}


/* Animation du cœur qui bat */
@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  10%, 30% {
    transform: scale(1.4);
  }
  20%, 40% {
    transform: scale(1);
  }
}

.batCoeur {
  display: inline-block;
  animation: heartbeat 2s ease-in-out infinite;
}




#sommaire-holi .card-content ul li a{
	color:#aaaaaa;
}
#sommaire-holi .card-content ul li a:hover{
	color:#e25e3d;
}












        :root {
            --primary-color: #FC987F;
            --secondary-color: #e97e64;
            --accent-color: #cf6348;
            --accent-color: #c62828;
            --text-dark: #1f2937;
            --text-light: #6b7280;
        }
		
		.icon-color{
		color:#FC987F;
		}
        
        body {
            font-family: 'Lato', sans-serif;
            color: var(--text-dark);
        }
        
        h1, h2, h3, h4, h5 {
            font-family: 'Playfair Display', serif;
            color: var(--secondary-color);
        }
        
        /* Hero Section */
        .hero {
            background: linear-gradient(135deg, #fee9e4 0%, #fef1ee 100%);
            padding: 10px 0;
            margin-bottom: 40px;
        }
        
        .hero h1 {
            font-size: 3rem;
            margin-bottom: 20px;
            font-weight: 700;
        }
        
        .hero-meta {
            color: var(--text-light);
            margin-bottom: 20px;
        }
        
        .hero-meta i {
            vertical-align: middle;
            margin-right: 5px;
        }
        
        /* Breadcrumb personnalisé */
        .breadcrumb-custom {
			background:none;
            border-bottom:1px solid #FC987F;
            
        }
		
		.breadcrumb::before{
            color:#bdbdbd;
            
        }
		
		nav{
		box-shadow:none;
		}
        
        .breadcrumb-custom a {
            color: var(--primary-color);
        }
        
        /* Cards personnalisées */
        .card-custom {
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
        }
        
        .card-custom:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(253, 79, 36, 0.15);
        }
        
        .card-panel-red {
            background: linear-gradient(135deg, #fef1ee 0%, #ffece7 100%);
            border-left: 4px solid var(--primary-color);
        }
		
		.card .card-image img, .card-panel{
		border-radius:20px;
		}
		

        
        /* Badges */
        .badge-custom {
            background: var(--primary-color);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
        }
        
        /* Section titles */
        .section-title {
            position: relative;
            padding-bottom: 15px;
            margin-bottom: 30px;
        }
        
        .section-title:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 80px;
            height: 3px;
            background: linear-gradient(to right, var(--primary-color), var(--accent-color));
        }
        
        /* Timeline */
        .timeline {
            position: relative;
            padding-left: 27px;
            border-left: 3px solid var(--accent-color);
        }
        
        .timeline-item {
            position: relative;
            margin-bottom: 30px;
            padding-left: 30px;
        }
        
        .timeline-item:before {
            content: '';
            position: absolute;
            left: -36px;
            top: 5px;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: var(--primary-color);
            border: 3px solid white;
            box-shadow: 0 0 0 2px var(--primary-color);
        }
        
        /* Pricing cards */
        .pricing-card {
            text-align: center;
            padding: 30px;
            border-radius: 15px;
            transition: all 0.3s ease;
        }
        
        .pricing-card:hover {
            transform: scale(1.05);
        }
        
        .pricing-card.featured {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
        }
        
        .pricing-card.featured h4,
        .pricing-card.featured .price {
            color: white;
        }
        
        .price {
            font-size: 3rem;
            font-weight: 700;
            color: var(--primary-color);
            margin: 20px 0;
        }
        
        /* Testimonials */
        .testimonial-card {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.08);
            margin-bottom: 20px;
        }
        
        .testimonial-rating {
            color: #fbbf24;
            margin-bottom: 10px;
        }
        
        /* FAQ Collapsible */
        .collapsible {
            border: none;
            box-shadow: none;
        }
        
        .collapsible-header {
            background: #faf6f2;
            border-radius: 10px;
            margin-bottom: 10px;
            border-left: 4px solid var(--primary-color);
            font-weight: 600;
        }
        
        .collapsible-header i {
            color: var(--primary-color);
        }
        
        .collapsible-body {
            background: white;
            border-radius: 0 0 10px 10px;
            border: 1px solid #efefef;
        }
        
        /* CTA Buttons */
        .btn-cta {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 15px 40px;
            border-radius: 50px;
            font-weight: 600;
            text-transform: none;
            box-shadow: 0 5px 20px rgba(236, 172, 153, 0.3);
            transition: all 0.3s ease;
        }
		
		.callApp .btn-cta {
		margin-top:20px;
            padding: 0px 40px 0px 40px !important;
        }
		
        
        .btn-cta:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(236, 172, 153, 0.4);
            background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
        }
        
        /* Comparison Table */
        .comparison-table {
            overflow-x: auto;
        }
        
        .comparison-table table {
            background: white;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .comparison-table th {
            background: var(--primary-color);
            color: white;
            font-weight: 600;
        }
        
        .comparison-table tr:hover {
            background: #fdf2f8;
        }
        
        /* Icons list */
        .icon-list {
            list-style: none;
            padding: 0;
        }
        
        .icon-list li {
            padding: 10px 0;
            display: flex;
            align-items: center;
        }
        
        .icon-list i {
            color: var(--primary-color);
            margin-right: 15px;
        }
        
        /* Sticky sidebar */
        .sticky-sidebar {
            position: sticky;
            top: 20px;
        }
        
        /* Footer CTA */
        .footer-cta {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 60px 0;
            text-align: center;
            margin-top: 60px;
        }
        
        .footer-cta h3 {
            color: white;
            font-size: 2.5rem;
            margin-bottom: 20px;
        }
        
        /* Responsive */
        @media only screen and (max-width: 600px) {
            .hero h1 {
                font-size: 2rem;
            }
            
            .price {
                font-size: 2rem;
            }
        }
        
        /* Chips personnalisés */
        .chip-custom {
            background: #faf6f2;
            color: var(--secondary-color);
            font-weight: 600;
        }
        
        /* Image placeholder */
        .img-placeholder {
            background: linear-gradient(135deg, #dcdcdc 0%, red 100%);
            min-height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-color);
            font-size: 3rem;
            border-radius: 10px;
        }