/********************************************
Réseau Inter-Système — feuille de style
Réécrite lors de la migration Laravel (2026) : remplace l'ancien layout
`float` à largeur fixe (970px, pensé pour 2010) par une mise en page
fluide et responsive, sans dépendre de jQuery.
*********************************************/

:root {
	--color-primary: #1C4574;
	--color-primary-dark: #163A63;
	--color-accent: #DB7D00;
	--color-accent-dark: #B96900;
	--color-ink: #22222C;
	--color-ink-soft: #55545F;
	--color-muted: #6B6B76;
	--color-border: #E4E4EC;
	--color-surface: #F7F7FA;
	--color-surface-alt: #FFFFFF;
	--radius: 10px;
	--shadow: 0 1px 2px rgba(20, 20, 40, .06), 0 8px 24px rgba(20, 20, 40, .06);
	--container-width: 1120px;
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font: 16px/1.6 var(--font-sans);
	color: var(--color-ink);
	background: var(--color-surface-alt);
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--color-primary);
}

a:hover {
	color: var(--color-accent);
}

h1, h2, h3 {
	font-family: var(--font-sans);
	color: var(--color-primary);
	line-height: 1.25;
	margin: 0 0 .5em;
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1em; }

ul, ol { padding-left: 1.3em; }

table { border-collapse: collapse; }

.wrapper_center {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 20px;
}

/********************************************
EN-TÊTE / NAVIGATION
*********************************************/
#wrapper_top {
	background: var(--color-primary);
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 14px 20px;
}

.logo img {
	display: block;
	height: 42px;
	width: auto;
}

.nav-toggle {
	display: none;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .4);
	color: #fff;
	font: 600 14px var(--font-sans);
	padding: 8px 14px;
	border-radius: 6px;
	cursor: pointer;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}

.site-nav ul {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.site-nav li a {
	display: inline-block;
	padding: 8px 12px;
	border-radius: 6px;
	color: #EDEFF7;
	text-decoration: none;
	font-weight: 600;
	font-size: .95rem;
}

.site-nav li a:hover,
.site-nav li.current a {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

.top_right {
	display: flex;
	align-items: center;
	gap: 8px;
}

.top_right a {
	color: #EDEFF7;
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 6px;
}

.top_right a:hover {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

.lang-switch {
	background: var(--color-accent);
	border-color: var(--color-accent) !important;
	color: #fff !important;
	font-weight: 700 !important;
	min-width: 2.6em;
	text-align: center;
}

.lang-switch:hover {
	background: var(--color-accent-dark) !important;
}

/********************************************
CORPS DE PAGE : CONTENU + BARRE LATÉRALE
*********************************************/
#wrapper_body {
	padding: 32px 0 48px;
}

#wrapper_body .wrapper_center {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: 24px;
	align-items: start;
}

#main_content {
	min-width: 0;
}

#sidebar {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.whatwedo,
.content_box {
	background: var(--color-surface-alt);
}

.whatwedo + .whatwedo,
.content_box {
	margin-top: 24px;
}

.horizantal_line {
	margin: 24px 0;
	border-top: 1px solid var(--color-border);
	line-height: 0;
}

.horizantal_line img {
	display: none;
}

.table_planes {
	width: 100%;
}

/********************************************
GRILLES DE PRIX
*********************************************/
.pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
	margin: 20px 0 28px;
}

.pricing-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pricing-card--highlight {
	border-color: var(--color-primary);
	box-shadow: var(--shadow);
}

.pricing-card-name {
	margin: 0;
	font-size: 1.1rem;
}

.pricing-card-tagline {
	margin: -10px 0 0;
	color: var(--color-muted);
	font-size: .9rem;
}

.pricing-card-specs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: .92rem;
}

.pricing-card-specs li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px dashed var(--color-border);
}

.pricing-card-specs li span:first-child {
	color: var(--color-muted);
}

.pricing-card-specs li span:last-child {
	font-weight: 600;
	text-align: right;
}

.pricing-card-price {
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid var(--color-border);
}

.pricing-card-price .amount {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-accent);
}

.pricing-card-price .period {
	color: var(--color-muted);
	font-size: .85rem;
}

.pricing-card-price .alt {
	display: block;
	font-size: .8rem;
	color: var(--color-muted);
	margin-top: 2px;
}

.btn {
	display: inline-block;
	text-align: center;
	background: var(--color-primary);
	color: #fff !important;
	font-weight: 700;
	padding: 10px 16px;
	border-radius: 6px;
	text-decoration: none;
	font-size: .92rem;
}

.btn:hover {
	background: var(--color-primary-dark);
}

.btn-block {
	display: block;
}

/* Ancien affichage $xx.xx<i>, encore utilisé dans le corps de certaines
   pages hors grille de prix : on garde une version discrète plutôt que de
   réécrire tout le contenu tarifaire en texte libre. */
.orange_text {
	color: var(--color-accent);
	font-style: normal;
}

.big_text {
	font-weight: 700;
	color: var(--color-ink-soft);
}

/********************************************
BARRE LATÉRALE
*********************************************/
#sidebar > div {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 18px;
}

#sidebar h1 {
	font-size: 1rem;
	margin-bottom: .6em;
}

.news ul {
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
	font-size: .92rem;
}

.news ul li {
	padding: 6px 0;
	border-bottom: 1px dashed var(--color-border);
}

.news ul li a {
	margin-left: 4px;
}

.search_domain_sidebar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

input.search_domain_sidebar,
select.search_domain_list_sidebar {
	font: inherit;
	padding: 8px 10px;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	flex: 1 1 auto;
	min-width: 0;
}

input.search_domain_go {
	font: 700 .9rem var(--font-sans);
	padding: 8px 14px;
	border: none;
	border-radius: 6px;
	background: var(--color-accent);
	color: #fff;
	cursor: pointer;
}

input.search_domain_go:hover {
	background: var(--color-accent-dark);
}

.address_locations ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .92rem;
	line-height: 1.7;
}

/********************************************
LISTES DE PRODUITS (produits.php)
*********************************************/
.list_01,
.list_02 {
	list-style: none;
	padding: 0;
	margin: 0 0 1em;
}

.list_01 li,
.list_02 li {
	padding: 6px 0;
}

/********************************************
PIED DE PAGE
*********************************************/
#wrapper_footer {
	margin-top: 48px;
	background: var(--color-ink);
	color: #C7C7D4;
}

#wrapper_footer .wrapper_center {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 28px;
	padding-top: 40px;
	padding-bottom: 24px;
}

#wrapper_footer h6 {
	color: #fff;
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 0 0 12px;
}

#wrapper_footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#wrapper_footer li {
	padding: 4px 0;
}

#wrapper_footer a {
	color: #C7C7D4;
	text-decoration: none;
	font-size: .92rem;
}

#wrapper_footer a:hover {
	color: #fff;
}

#copyright {
	grid-column: 1 / -1;
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding: 18px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: .8rem;
	color: #9797A6;
}

/********************************************
RESPONSIVE
*********************************************/
@media (max-width: 700px) {
	#wrapper_body .wrapper_center {
		grid-template-columns: 1fr;
	}

	#sidebar {
		order: 2;
	}

	.nav-toggle {
		display: inline-block;
	}

	.site-nav {
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding-top: 14px;
	}

	.site-nav.is-open {
		display: flex;
	}

	.site-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.site-header-inner {
		flex-wrap: wrap;
	}

	h1 { font-size: 1.5rem; }
	h2 { font-size: 1.2rem; }
}