/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* ===== SERVICE : TITLE, CONTENT AND SINGLE IMAGE ===== */

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

.service-main-content {
	display: block !important;
	flex-direction: column;
	gap: 1rem;
	;
}

.service {
	max-width: 900px;
	margin: 0 auto;
}

.service-header {
	text-align: center;
	margin-bottom: 2rem;
}

.service-title {
	margin: 0;
}

/* 1. Float the image container */
.service-image {
	float: left !important;
	margin-right: 25px;
	margin-bottom: 10px;
	max-width: 40%;
}

/* 2. Style the image */
.service-image img {
	width: 100%;
	height: auto;
	display: block;
}

.image-legend {
	display: block;
	/* Forces the legend to start on a new line below the image */
	font-style: italic;
	/* Sets text to italic */
	font-size: 0.9rem;
	/* Slightly smaller for a professional look */
	color: #666;
	/* Subtle grey color */
	margin-top: 20px;
	/* Space between the image and the legend */
	line-height: 1.4;
	/* Comfortable line spacing */
	text-align: center;
	/* Aligns text with the image */
}

/* 3. The description MUST be block or inline */
.service-content {
	display: block;
	/* DO NOT add overflow: hidden; here */
	/* DO NOT add display: flex; here */
}

/* 4. Clear the float at the end */
.service-content::after {
	content: "";
	display: table;
	clear: both;
}

/* ===== SERVICE : SERVICES SIDEBAR ===== */
.services-sidebar {
	background-color: #DCEAFA;
	padding: 15px;
	/* Reduced padding slightly to allow more room for the hover effect */
	border-radius: 20px;
	width: 250px;
	box-sizing: border-box;
	/* Standard box model for predictable width */
}

/* Styling the sidebar title */
.services-sidebar-title {
	text-align: center;
	/* Centers the text horizontally */
	margin-top: 0;
	/* Removes default browser top margin */
	margin-bottom: 20px;
	/* Adds space between the title and the list below */
	color: var(--color-text);
	/* Uses your brand dark blue for consistency */
	font-size: 1.2rem;
	/* Adjust size as needed */
	text-transform: uppercase;
	/* Keeps the professional look */
}

/* The actual list inside the sidebar */
.services-sidebar-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Individual list item style */
.service-link {
	margin-bottom: 2px;
	padding: 5px 15px;
	/* Padding inside the link to make the hover box look good */
	border-radius: 12px;
	transition: all 0.3s ease;
	/* Smooth transition for background AND colors */
	display: flex;
	align-items: center;
}

/* Hover effect on the list item container */
.service-link:hover {
	background-color: var(--altech-primary);
	/* Dark blue background on hover */
	cursor: pointer;
}

/* Change text color AND bullet color on hover */
.service-link:hover a,
.service-link:hover::before {
	color: #DCEAFA !important;
	/* Forces text and dot to turn white on hover */
}

/* Bullet point style */
.service-link::before {
	content: "•";
	font-size: 14px;
	margin-right: 10px;
	color: #333;
	/* Default dot color */
	transition: color 0.3s ease;
}

/* Link style */
.service-link a {
	text-decoration: none;
	color: #333;
	/* Default text color */
	display: block;
	width: 100%;
	transition: color 0.3s ease;
}

/* Active state */
.service-link.is-active {
	background-color: rgba(10, 62, 95, 0.1);
	/* Light tint for active item */
}

.service-link.is-active a {
	font-weight: bold;
}

/* ===== SERVICE : QUOTE SIDEBAR ===== */

.quote-sidebar-container {
	margin-top: 30px;
	/* Rule the spacing between rhe two sidebar elements */
	padding: 20px;
	background-color: var(--altech-background);
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	box-sizing: border-box;
}

.quote-sidebar-title {
	font-size: 1.2rem;
	font-weight: bold;
	margin-bottom: 5px;
	color: #333;
}

.full-form-link {
	display: inline-block;
	color: #ff6600;
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 20px;
}

.full-form-link:hover {
	text-decoration: underline;
}

/* Field styling */
.quote-sidebar-form input,
.quote-sidebar-form textarea {
	width: 100%;
	padding: 12px;
	margin-bottom: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	display: block;
}

.quote-sidebar-form textarea {
	height: 100px;
	resize: none;
}

.btn-quote-send {
	width: 100%;
	padding: 12px;
	background: var(--button-gradient);
	color: var(--color-menu);
	border: none;
	border-radius: 50px;
	font-weight: bold;
	cursor: pointer;
	transition: opacity 0.3s;
}

.btn-quote-send:hover {
	background: var(--button-hover-gradient);
	/*opacity: 0.8;*/
}

/* ===== SERVICE : SPECIFICATION TABLE  ===== */

/* Main table container */
.spec-table {
	width: 100%;
	/* Ensures the table takes the full width of its container */
	border-collapse: collapse;
	/* Merges adjacent borders into a single line */
	margin-bottom: 25px;
	/* Adds spacing below the table before the next element */
	font-family: sans-serif;
	/* Standard clean font for data readability */
	font-size: 14px;
	/* Sets a professional size for technical data */
}

/* Header section styles (The <thead> part) */
.spec-table thead th {
	background-color: #f8f9fa;
	/* Light grey background to distinguish from body */
	color: #333;
	/* Dark text for high contrast */
	font-weight: 700;
	/* Bold text for headers */
	text-transform: uppercase;
	/* Makes headers stand out in all caps */
	letter-spacing: 0.5px;
	/* Slight spacing for better readability of caps */
	text-align: left;
	/* Aligns text to the left for a clean grid look */
}

/* Common styles for both Header and Body cells */
.spec-table th,
.spec-table td {
	padding: 12px 15px;
	/* Internal spacing for a "breathable" design */
	border: 1px solid #e0e0e0;
	/* Subtle light borders for each cell */
}

/* Table body styles (The <tbody> part) */
.spec-table tbody td {
	color: #555;
	/* Slightly softer color than the headers */
	vertical-align: middle;
	/* Keeps content centered vertically in rows */
}

/* Alternate row coloring (Zebra stripping) */
.spec-table tbody tr:nth-child(even) {
	background-color: #D9D9D9;
	/* Very faint grey on even rows to help the eye follow data */
}

/* Hover effect on rows */
.spec-table tbody tr:hover {
	background-color: #f1f1f1;
	/* Highlights the current row when the user points at it */
	transition: background-color 0.2s ease;
	/* Smooth transition for the hover effect */
}

/* Responsive adjustment for small screens */
@media (max-width: 600px) {
	.spec-table {
		display: block;
		/* Allows horizontal scrolling on small mobile devices */
		overflow-x: auto;
		white-space: nowrap;
		/* Prevents text from wrapping too aggressively */
	}
}

/* ===== SERVICE : GALLERY SWIPER (CAROUSEL) ===== */

.service-swiper {
	width: 100%;
	margin: 3rem 0;
}

.service-swiper .swiper-slide {
	text-align: center;
}

.service-swiper img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}

/* 1. Change the color of the navigation arrows */
.service-swiper .swiper-button-next,
.service-swiper .swiper-button-prev {
	color: #000000;
	/* Use your gradient orange or any color */
}

/* 2. Change the color of the pagination dots */
.service-swiper .swiper-pagination-bullet {
	background: #ccc;
	/* Color of inactive dots */
	border-color: #000000;
	opacity: 1;
}

/* 3. Change the color of the active dot */
.service-swiper .swiper-pagination-bullet-active {
	background: #000000;
	/* Your dark blue for the active slide */
}

/* ===== CAREER ===== */

/* ===== Global ===== */
.career {
	max-width: 900px;
	margin: 60px auto;
	padding: 0 20px;
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
}


.career-title {
	font-size: 2.2rem;
	font-weight: 700;
	margin-bottom: 10px;
}

/* ===== Meta information ===== */

.career-meta {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* 2 colonnes */
	gap: 8px 420px;
	margin: 24px 0;

	/* Encadré */
	background-color: #f5f5f5;
	border-radius: 6px;
	padding: 16px 20px;
}

.career-meta-item {
	font-size: 0.95rem;
	color: #333;
	font-weight: 600;
	/* label */
}

.career-meta-item span {
	font-weight: 400;
	/* valeur */
	color: #555;
}

/* ===== Content ===== */
.career-content {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* ===== Sections ===== */
.career-section {
	padding-bottom: 50px;
	border-bottom: 1px solid #e0e0e0;
}

.career-section:last-child {
	border-bottom: none;
}

/* ===== Section titles ===== */
.career-section h2 {
	margin-top: 0;
	font-size: 1.4rem;
	margin-bottom: 12px;
	color: #111;
}

/* ===== Section text ===== */
.career-section p {
	line-height: 1.7;
	font-size: 1rem;
	color: #444;
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
	.career-title {
		font-size: 1.8rem;
	}
}

@media (max-width: 600px) {
	.career-meta {
		grid-template-columns: 1fr;
	}
}

/* ===== Header CSS ===== */
.site-header{
	background-image:linear-gradient(var(--altech-primary) 45%, var(--altech-secondary) 70%, var(--altech-background));
	color:var(--color-menu);
}
.header-top {
  display: flex;
  font-size: 1.2rem;
  gap: 5rem;
  background-color: var(--altech-primary);
  border-bottom: 2.5px solid var(--altech-tertiary);
  
}

.header-top .header-contact {
  margin-right: auto;
}

.header-main{
	max-width: 1200px;
    margin: 0 auto;
    padding: 70px 20px;

    display: flex;
	align-items: center;   
}

.site-logo{
	max-width: 360px;
	width:100%;
	height: auto;
  	display: block;
	flex-shrink: 0;
}

.main-navigation .main-menu {
	list-style: none;
    gap: 30px;
	padding: 0;
	margin: 0;
}

.main-navigation .main-menu > li {
    position: relative;
}

.quote-button {
	display: inline-block;
	background-image: var(--button-gradient);

	width: 200px;
    padding: 20px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
}
a.quote-button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	color: var(--color-menu)
}

.quote-button:hover {
    background-image: var(--button-hover-gradient);
}