/*
Theme Name: Maison de la chimie — Inscriptions
Author: Alexandre Chevallier
Author URI: https://www.pipelab.fr
Version: 2026
Text Domain: maisonchimie
*/

/* -----------------------------------------------
   Palette de couleurs
----------------------------------------------- */

:root {
	--color-primary:      #113865;
	--color-primary-dark: #0b2340;
	--color-secondary:    #325ca3;
	--color-accent:       #ecab3c;
	--color-white:        #FFFFFF;
	--color-black:        #111111;
	--header-height: 160px;
}

@media (min-width: 992px) {
	:root {
		--header-height: 138px;
	}
}

body {
	background: #fff;
	font:
		400 16px/1.5 'HelveticaNeue-Medium',
		'Helvetica Neue Medium',
		'Helvetica Neue LT Std',
		'Helvetica Neue',
		'Segoe UI',
		Roboto,
		Arial,
		sans-serif;
	color: #454b57;
	overflow-x: hidden;
}

/* -----------------------------------------------
   Header
----------------------------------------------- */

.header {
	color: #fff;
	z-index: 100;
	height: var(--header-height);
	position: relative;
}

.header-inner {
	display: flex;
	align-items: flex-end;
	position: relative;
	height: 100%;
	background: url(images/tetiere/fondation.png) center top / 1200px auto no-repeat;
}

.header-logo {
	flex-shrink: 0;
	padding-top: 23px;
	margin: 20px;
}

.header-logo img {
	display: block;
	width: 280px;
	height: auto;
}

.header-mention {
	color: #fff;
	font-weight: 300;
	margin: 0 0 20px auto;
	padding-right: 2em;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	.header-logo {
		padding-top: 0;
		margin: 12px 0 0 15px;
	}

	.header-mention {
		font-size: 1em;
		padding-right: 1em;
	}
}

/* -----------------------------------------------
   Section — base
----------------------------------------------- */

.section {
	margin: 1em 0;
}

@media (max-width: 767px) {
	.section {
		margin: 0;
	}

	.post-content {
		margin: 1em;
	}
}

.section .container {
	padding: 0;
}

.section .titre::before {
	content: '';
	display: block;
	width: 1.5em;
	height: 1em;
	background-color: var(--color-primary);
	flex-shrink: 0;
	align-self: center;
}

.section .titre {
	color: var(--color-primary);
	font-weight: 300;
	display: flex;
	align-items: center;
	gap: 12px;
	line-height: 1.2;
	font-size: 1.5em;
}

@media (max-width: 767px) {
	.section .titre {
		display: block;
		padding-left: 48px;
		text-indent: -54px;
	}

	.section .titre::before {
		display: inline-block;
		width: 48px;
		vertical-align: top;
		padding-bottom: 20px;
		margin-right: 6px;
	}
}

.section.page-content h2 {
	color: var(--color-primary);
	font-weight: 600;
	line-height: 1.2;
}

.section.page-content h3,
.section.page-content h4,
.section.page-content h5,
.section.page-content h6 {
	color: var(--color-primary);
	font-weight: 400;
	line-height: 1.2;
}

/* ── Grid — helpers ─────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.row > .col-sm-12 + .col-sm-12 {
		margin-top: 1em;
	}
}

@media (max-width: 991px) {
	.order-2 {
		order: 1;
	}
}

/* ── Sidebar ─────────────────────────────────────────────────────────────────── */

.layout-sidebar > main {
	padding-right: 4em;
}

@media (max-width: 767px) {
	.layout-sidebar > main {
		padding-right: 0;
	}
}

.layout-sidebar > aside {
	align-self: flex-start;
}

.sidebar {
	margin-top: 2em;
}

.sidebar-menu {
	background-color: var(--color-primary);
	margin-bottom: 1em;
	padding-bottom: 0.5em;
}

@media (max-width: 991px) {
	.sidebar:has(.sidebar-menu ~ .sidebar-menu) {
		display: flex;
		flex-direction: column;
	}

	.sidebar:has(.sidebar-menu ~ .sidebar-menu) > .sidebar-menu:first-of-type {
		order: 1;
	}
}

.sidebar-titre {
	text-transform: uppercase;
	color: #fff;
	padding: 1em 1em 0.5em;
	margin-bottom: 0;
	background-color: var(--color-primary-dark);
}

.sidebar-serie {
	font-size: 0.9rem;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
	border-bottom: 1px solid #fff;
}

.sidebar-serie.active:not(:has(+ .sidebar-list.active)) {
	border-bottom: 1px solid #fff;
	background-color: var(--color-secondary);
}

.sidebar-serie.active {
	border-bottom: 0;
}

.sidebar-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sidebar-list li {
	padding: 0;
	margin: 0;
}

.sidebar-list li a {
	line-height: 1.3;
}

.sidebar-list .sidebar-link {
	padding: 0.5em 3em 0.3em;
}

.sidebar-list:has(.sidebar-list) {
	border-bottom: 0;
	padding-bottom: 0;
}

.sidebar-serie.active:has(+ .sidebar-list.active .sidebar-list) .sidebar-link {
	background-color: var(--color-primary);
}

.sidebar-list li:has(> a.sidebar-link.active + .sidebar-list) > a.sidebar-link.active {
	background-color: var(--color-secondary);
}

.sidebar-list .sidebar-list .sidebar-link {
	padding-left: 4.5em;
}

.sidebar-list.active + .sidebar-serie {
	margin-top: 0.5em;
	border-top: 1px solid #fff;
}

.sidebar-link {
	display: block;
	font-size: 0.8rem;
	line-height: 1.2;
	padding: 1em 1.5em;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
}

.sidebar-link:hover,
.sidebar-link.active {
	background-color: var(--color-secondary);
}

/* -----------------------------------------------
   Liste événements
----------------------------------------------- */

.colloques-une-meta {
	display: flex;
	align-items: stretch;
	gap: 1.5em;
	margin-left: 2.2em;
}

.colloques-une-texte {
	flex: 1;
}

.colloques-une-titre {
	font-size: 1em;
	margin-top: 0;
	margin-bottom: 0.4em;
}

.colloques-une-titre a {
	color: var(--color-black);
	text-decoration: none;
	text-transform: uppercase;
}

.colloques-une-excerpt {
	font-size: 0.85em;
	margin-top: 0;
}

.colloques-une-img {
	margin-top: 1em;
	padding-bottom: 1em;
	margin-left: 2.1em;
}

.colloques-une-img img {
	width: 100%;
	height: auto;
	display: block;
	box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.5);
}

section hr.separateur {
	border: none;
	border-top: 1px solid #ccc;
	margin-top: 2em;
	width: 100%;
}

@media (max-width: 767px) {
	.colloques-une-meta {
		margin-left: 0;
		margin-right: 1em;
	}

	.colloques-une-img {
		margin-left: 0;
	}
}

/* -----------------------------------------------
   Bloc date événement
----------------------------------------------- */

.colloques-une-date {
	background-color: var(--color-primary);
	color: #fff;
	padding: 20px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 120px;
	max-height: 120px;
	flex-shrink: 0;
}

.colloques-une-date .date-jour-semaine {
	font-size: 0.5em;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.colloques-une-date .date-jour {
	font-size: 1.5em;
	line-height: 1;
	font-weight: 500;
}

.colloques-une-date .date-mois {
	font-size: 2em;
	line-height: 1;
	font-weight: 600;
}

.colloques-une-date .date-annee {
	font-size: 0.75em;
	line-height: 1;
}

.colloque-meta {
	display: flex;
	align-items: flex-start;
	gap: 2em;
	margin-bottom: 1.5em;
}

.colloque-meta-infos {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}

/* -----------------------------------------------
   Contact — sidebar transport
----------------------------------------------- */

.sidebar-contact {
	background-color: var(--color-primary);
	color: #fff;
	padding: 20px;
	margin-bottom: 1em;
}

.sidebar-contact .sidebar-titre {
	background-color: var(--color-primary-dark);
	margin: -20px -20px 1em;
	padding: 1em;
	font-weight: 700;
	text-transform: uppercase;
}

.sidebar-location-widget {
	margin-top: 1em;
}

.sidebar-location-widget .h3 {
	font-size: 0.85em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 0.4em;
}

.sidebar-location-lines {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.ligne-metro {
	border-radius: 50%;
	width: 25px;
	height: 25px;
	text-align: center;
	line-height: 30px;
	display: inline-block;
	font-size: 0.75em;
	font-weight: 700;
}

.ligne-rer {
	width: 25px;
	height: 25px;
	border: 2px solid transparent;
	background: 0 0;
	border-radius: 50%;
	text-align: center;
	line-height: 27px;
	display: inline-block;
	font-size: 0.75em;
	font-weight: 700;
}

.ligne-bus {
	padding: 4px 6px 2px;
	line-height: 1;
	display: inline-block;
	font-size: 0.75em;
	font-weight: 700;
}

.ligne-aeroport {
	background: #00427e;
	border-radius: 5px;
	color: #fff;
	display: inline-block;
	line-height: 1;
	padding: 5px 10px 3px 8px;
	font-size: 0.8em;
}

/* -----------------------------------------------
   Contact — formulaire & réservation EM
----------------------------------------------- */

.contact-block {
	margin-top: 30px;
}

.contact-title {
	color: var(--color-primary);
	font-weight: 600;
}

.contact-title i {
	margin-right: 10px;
	color: var(--color-primary);
}

.contact-form,
#em-booking {
	background: #e7f4f9;
	padding: 30px 15px;
	margin-top: 20px;
}

.contact-form {
	padding: 50px 15px;
}

.wpcf7-form label,
.em-booking-form label {
	display: block;
	font-size: 0.9rem;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 4px;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select,
.em-booking-form input.input,
.em-booking-form textarea {
	width: 100%;
	border: 0;
	border-bottom: 2px solid #8ba1ab;
	background: transparent;
	font-size: 0.875rem;
	color: #454b57;
	padding: 4px 0;
	outline: 0;
	box-shadow: none;
	margin-bottom: 20px;
}

.wpcf7-form textarea,
.em-booking-form textarea {
	resize: none;
	max-height: 10em;
}

.wpcf7-form select,
.em-ticket-select,
.civilite,
.secteur_d_activite,
.enseignement_recherche {
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid var(--color-accent);
	border-radius: 5px;
	padding: 5px 20px;
	background: #fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBmaWxsPSIjZjZhODAwIiBkPSJNMjA3LjAyOSAzODEuNDc2TDEyLjY4NiAxODcuMTMyYy05LjM3My05LjM3My05LjM3My0yNC41NjkgMC0zMy45NDFsMjIuNjY3LTIyLjY2N2M5LjM1Ny05LjM1NyAyNC41MjItOS4zNzUgMzMuOTAxLS4wNEwyMjQgMjg0LjUwNWwxNTQuNzQ1LTE1NC4wMjFjOS4zNzktOS4zMzUgMjQuNTQ0LTkuMzE3IDMzLjkwMS4wNGwyMi42NjcgMjIuNjY3YzkuMzczIDkuMzczIDkuMzczIDI0LjU2OSAwIDMzLjk0MUwyNDAuOTcxIDM4MS40NzZjLTkuMzczIDkuMzcyLTI0LjU2OSA5LjM3Mi0zMy45NDIgMHoiLz48L3N2Zz4=") no-repeat 92% 50% / 12px 10px;
}

.wpcf7-form input[type="submit"],
.em-booking-submit {
	margin-top: 15px;
	width: 100%;
	text-transform: uppercase;
	font-size: 0.875rem;
	border-radius: 5px;
	font-weight: 700;
	padding: 8px 40px;
	border: 1px solid var(--color-accent);
	background: var(--color-accent);
	color: #fff;
	cursor: pointer;
	transition: 0.25s ease-in-out;
}

.wpcf7-form input[type="submit"]:hover,
.em-booking-submit:hover {
	background: #fff;
	color: var(--color-accent);
}

.wpcf7-form br {
	display: none !important;
}

.em-warning-errors,
.em-booking-message-error {
	background: #ffebe8;
	border: 1px solid #c00;
	color: #c00;
	padding: 0.75em 1em;
	margin-bottom: 1em;
	font-size: 0.875rem;
}

.em-booking-message-success {
	background: #ecfdf5;
	border: 1px solid #16a34a;
	color: #16a34a;
	padding: 0.75em 1em;
	margin-bottom: 1em;
	font-size: 0.875rem;
}

.em-field-error {
	border-bottom-color: #c00 !important;
}
select.em-field-error {
	border-color: #c00 !important;
}
p:has(input[type="checkbox"].em-field-error) label {
	color: #c00;
}

/* -----------------------------------------------
   Footer
----------------------------------------------- */

.footer {
	font-size: 0.8em;
	margin-top: 3em;
}

@media (max-width: 767px) {
	.footer {
		margin-top: 0;
	}
}

.footer .container {
	background: var(--color-primary);
	color: var(--color-white);
	padding: 0 40px 30px;
}

.footer-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
	justify-content: flex-end;
}

.footer-col {
	position: relative;
	padding-right: 40px;
}

.footer-col:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
	height: 100px;
	background-color: var(--color-white);
}

@media (max-width: 767px) {
	.footer-col:not(:last-child)::after {
		display: none;
	}
}

.footer-col-titre {
	font-weight: 700;
	text-transform: uppercase;
	margin: 3em 0 0.75em;
}

.footer-col-titre a {
	color: var(--color-white);
	text-decoration: none;
}

.footer-col-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-col-liste li {
	margin-bottom: 0.4em;
}

.footer-col-liste a,
.footer-col-titre a:hover,
.footer-col-liste a:hover {
	color: var(--color-white);
	text-decoration: none;
}


/** Surcharge CF7  */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border: 0;
	background: var(--color-accent);
	color: var(--color-white);
	margin: 0;
}