/* ==========================================================
   Podo Orth'el — surcharges du thème Smilico + composants propres
   Chargé APRÈS custom.css. Couleurs : variables :root de custom.css.
   ========================================================== */

html{
	scroll-behavior: smooth;
	scroll-padding-top: 110px;
}

.visually-hidden-field{
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Boutons : texte marine sur turquoise (contraste) ---------- */
.btn-default{
	color: var(--primary-color);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 15px;
}

.btn-default::before{
	background-image: url('../images/arrow-primary.svg');
}

.btn-default::after{
	background: var(--primary-color);
}

.btn-default:hover{
	color: var(--white-color);
}

.btn-default:hover::before{
	background-image: url('../images/arrow-white.svg');
}

.btn-default.btn-highlighted{
	background: var(--white-color);
}

.btn-default.btn-highlighted::after{
	background: var(--accent-color);
}

.btn-default.btn-highlighted:hover{
	color: var(--primary-color);
}

.btn-default.btn-highlighted:hover::before{
	background-image: url('../images/arrow-primary.svg');
}

button.btn-default{
	cursor: pointer;
}

/* Sous-titres de section : sans le pictogramme « dent » du thème */
.section-title .section-sub-title{
	padding: 9px 16px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 13px;
}

.section-title .section-sub-title::before{
	display: none;
}

.section-title h1 span,
.section-title h2 span{
	color: var(--accent-color);
}

/* ---------- Préloader ---------- */
#loading-icon img{
	border-radius: 50%;
}

/* ---------- Bandeau du haut (tél. + email) ---------- */
.topbar{
	position: relative;
	background: var(--accent-color);
	color: var(--primary-color);
	font-size: 15px;
	font-weight: 600;
	z-index: 101;
}

.topbar .container{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px 30px;
	padding-top: 9px;
	padding-bottom: 9px;
}

.topbar a{
	color: var(--primary-color);
	transition: opacity 0.3s ease-in-out;
}

.topbar a:hover{
	opacity: 0.7;
}

.topbar i{
	margin-right: 8px;
}

/* ---------- Header : pilule marine, le logo (fond marine) s'y fond ---------- */
header.main-header{
	top: 62px;
}

header.main-header .header-sticky{
	background: var(--primary-color);
	border: 1px solid var(--dark-divider-color);
}

.navbar{
	padding: 8px 0;
}

.navbar .container{
	padding-left: 24px;
	padding-right: 24px;
}

.navbar-brand img{
	display: block;
	height: 72px;
	width: auto;
}

.main-menu ul li a{
	color: var(--white-color);
}

.main-menu ul li a:hover,
.main-menu ul li a:focus{
	color: var(--accent-color);
}

.slicknav_menu{
	background: var(--primary-color);
}

.slicknav_btn{
	background: var(--accent-color);
}

/* ---------- Hero ---------- */
/* Image de fond : dégradé en attendant la photo de coureur.
   Pour la photo : background-image: url('../../medias/hero.jpg'), <dégradé>; */
.hero.hero-podo{
	background-image: linear-gradient(120deg, #103848 0%, #17505a 55%, #5CB8B0 130%);
	min-height: 640px;
	padding: 200px 0 150px;
}

.hero.hero-podo::before{
	background: linear-gradient(180deg, rgba(16, 56, 72, 0.35) 0%, rgba(16, 56, 72, 0) 25%);
}

.hero.hero-podo .section-title h1{
	font-size: 52px;
	line-height: 1.12em;
}

.hero.hero-podo .section-title p{
	font-size: 22px;
	color: var(--white-color);
}

.hero-cta-card{
	position: relative;
	display: inline-block;
	background: var(--white-color);
	border-radius: 20px;
	padding: 30px 40px;
	margin-top: 50px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
	text-align: center;
}

.hero-cta-card h2{
	font-size: 26px;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--primary-color);
	margin-bottom: 18px;
	letter-spacing: 0;
}

/* ---------- Pourquoi choisir ---------- */
.why-podo{
	padding: 100px 0;
}

.why-podo-logo{
	position: sticky;
	top: 120px;
}

.why-podo-logo img{
	width: 100%;
	max-width: 420px;
	height: auto;
	border-radius: 30px;
	box-shadow: 0 25px 50px rgba(16, 56, 72, 0.18);
}

.why-item{
	padding-bottom: 28px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--divider-color);
}

.why-item:last-child{
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.why-item h3{
	font-size: 24px;
	color: var(--primary-color);
	margin-bottom: 10px;
}

.why-item h3::before{
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--accent-color);
	margin-right: 12px;
	vertical-align: middle;
}

.why-item p{
	margin: 0;
}

/* ---------- Bandeau chiffres-clés ---------- */
.key-figures{
	background: var(--accent-color);
	padding: 70px 0;
}

.key-figure{
	text-align: center;
	color: var(--primary-color);
	padding: 10px 8px;
}

.key-figure i{
	display: block;
	font-size: 34px;
	margin-bottom: 14px;
}

.key-figure p{
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25em;
	color: var(--primary-color);
}

.key-figure .counter{
	font-size: 40px;
}

/* ---------- Services : 5 vignettes, une teinte chacune ---------- */
.podo-services{
	padding: 100px 0 90px;
}

.service-tiles{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin-bottom: 50px;
}

.service-tile{
	flex: 0 1 calc(33.333% - 16px);
	min-width: 240px;
	min-height: 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 24px;
	border-radius: 14px;
	text-align: center;
	color: var(--white-color);
	font-size: 19px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: 0 12px 30px rgba(16, 56, 72, 0.15);
	transition: transform 0.3s ease-in-out;
}

.service-tile:hover{
	transform: translateY(-5px);
}

.service-tile i{
	font-size: 30px;
}

.service-tile.svc-bilan{ background: #00456C; }
.service-tile.svc-examen{ background: #39BBAF; color: var(--primary-color); }
.service-tile.svc-analyse{ background: #105073; }
.service-tile.svc-empreinte{ background: #3A4B9B; }
.service-tile.svc-moulage{ background: #2D94A3; }

.services-intro{
	max-width: 900px;
	margin: 0 auto;
	background: var(--white-color);
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba(16, 56, 72, 0.12);
	padding: 30px 40px;
	text-align: center;
}

.services-intro p{
	margin-bottom: 14px;
	color: var(--primary-color);
}

.services-intro p:last-child{
	margin-bottom: 0;
}

/* ---------- Parcours ---------- */
.podo-journey{
	padding: 100px 0;
}

.journey-step{
	display: flex;
	gap: 22px;
	margin-bottom: 40px;
}

.journey-step:last-child{
	margin-bottom: 0;
}

.journey-step .step-icon{
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 800;
}

.journey-step h3{
	font-size: 22px;
	color: var(--primary-color);
	margin-bottom: 8px;
}

.journey-step p{
	margin: 0;
}

/* ---------- Bandeau sombre + valeurs ---------- */
.solutions-band{
	background: var(--dark-band);
	padding: 90px 0;
}

.solutions-card,
.values-card{
	height: 100%;
	padding: 50px 45px;
	border-radius: 6px;
}

.solutions-card{
	background: var(--dark-card);
	color: var(--white-color);
	text-align: center;
}

.solutions-card .eyebrow{
	display: block;
	font-size: 13px;
	letter-spacing: 0.2em;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--accent-color);
	margin-bottom: 14px;
}

.solutions-card h2{
	font-size: 38px;
	font-weight: 700;
	line-height: 1.2em;
	text-transform: uppercase;
	color: var(--white-color);
	margin-bottom: 28px;
	letter-spacing: 0;
}

.values-card{
	background: var(--teal-soft);
	color: var(--primary-color);
}

.values-card h3{
	font-size: 17px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--primary-color);
	margin-bottom: 20px;
}

.values-card ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.values-card li{
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 9px 0 9px 34px;
	position: relative;
}

.values-card li::before{
	content: '\f00c';
	font-family: 'Font Awesome 7 Free';
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 9px;
}

/* ---------- La praticienne ---------- */
.practitioner{
	background: var(--teal-soft);
	padding: 100px 0;
	color: var(--primary-color);
}

.practitioner .section-title h2,
.practitioner .section-title .section-sub-title{
	color: var(--primary-color);
}

.practitioner .section-title .section-sub-title{
	border-color: rgba(16, 56, 72, 0.3);
}

.practitioner-photo img{
	width: 100%;
	max-width: 460px;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 30px;
	box-shadow: 0 25px 50px rgba(16, 56, 72, 0.25);
}

.practitioner p{
	color: var(--primary-color);
	font-size: 18px;
	margin-bottom: 18px;
}

.practitioner p:last-child{
	margin-bottom: 0;
}

/* ---------- Contact ---------- */
.podo-contact{
	padding: 100px 0;
}

.contact-form .form-control{
	font-size: 16px;
	color: var(--primary-color);
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	padding: 15px 20px;
	box-shadow: none;
}

.contact-form .form-control:focus{
	border-color: var(--accent-color);
	box-shadow: 0 0 0 3px rgba(92, 184, 176, 0.3);
}

.contact-form label{
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--primary-color);
	margin-bottom: 6px;
}

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

.form-status{
	margin-top: 18px;
	font-weight: 600;
	color: var(--primary-color);
}

.form-status-error{
	color: #b3261e;
}

/* Carte de visite (HTML/CSS, aux couleurs du logo) */
.business-card{
	max-width: 460px;
	margin: 0 auto;
	background: var(--white-color);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 25px 60px rgba(16, 56, 72, 0.22);
	border: 1px solid var(--divider-color);
}

.business-card-body{
	display: flex;
	align-items: center;
	gap: 26px;
	padding: 34px 30px;
}

.business-card-logo{
	flex: 0 0 120px;
}

.business-card-logo img{
	width: 120px;
	border-radius: 6px;
	display: block;
}

.business-card h3{
	font-size: 22px;
	color: var(--primary-color);
	margin-bottom: 2px;
}

.business-card .role{
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 14px;
}

.business-card .du{
	display: block;
	font-size: 14px;
	color: var(--text-color);
	margin-bottom: 14px;
}

.business-card ul{
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 15px;
}

.business-card ul li{
	margin-bottom: 4px;
}

.business-card ul a{
	color: var(--primary-color);
	font-weight: 600;
}

.business-card ul a:hover{
	color: var(--accent-color);
}

.business-card-address{
	background: var(--accent-color);
	color: var(--primary-color);
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	padding: 14px 20px;
}

/* ---------- Footer ---------- */
.podo-footer{
	background: var(--footer-dark);
	color: rgba(255, 255, 255, 0.75);
	padding: 26px 0;
	text-align: center;
	font-size: 15px;
}

.podo-footer p{
	margin: 0;
}

.podo-footer a{
	color: var(--accent-color);
	font-weight: 600;
	transition: color 0.3s ease-in-out;
}

.podo-footer a:hover{
	color: var(--white-color);
}

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1024px){
	.hero.hero-podo .section-title h1{
		font-size: 44px;
	}
}

@media only screen and (max-width: 991px){
	header.main-header{
		top: 50px;
	}

	.topbar .container{
		justify-content: center;
	}

	.hero.hero-podo{
		padding: 170px 0 90px;
		min-height: 0;
	}

	.why-podo,
	.podo-services,
	.podo-journey,
	.podo-contact,
	.practitioner{
		padding: 70px 0;
	}

	.why-podo-logo{
		position: static;
		margin-bottom: 40px;
		text-align: center;
	}

	.service-tile{
		flex-basis: calc(50% - 12px);
	}

	.key-figure{
		margin-bottom: 20px;
	}

	.solutions-card{
		margin-bottom: 24px;
	}

	.practitioner-photo{
		margin-bottom: 40px;
		text-align: center;
	}
}

@media only screen and (max-width: 767px){
	.topbar{
		font-size: 14px;
	}

	.navbar-brand img{
		height: 56px;
	}

	.hero.hero-podo .section-title h1{
		font-size: 34px;
	}

	.hero.hero-podo .section-title p{
		font-size: 18px;
	}

	.hero-cta-card{
		display: block;
		padding: 24px 20px;
	}

	.service-tile{
		flex-basis: 100%;
	}

	.services-intro{
		padding: 24px 20px;
	}

	.solutions-card,
	.values-card{
		padding: 36px 24px;
	}

	.solutions-card h2{
		font-size: 30px;
	}

	.business-card-body{
		flex-direction: column;
		text-align: center;
	}
}

/* Le curseur personnalisé du thème n'est pas utilisé */
.section-title h1,
.section-title h2{
	cursor: auto;
}

.main-menu ul li a,
.slicknav_nav a{
	text-transform: none;
}