/* Import des variables et styles de base */
@import url("./variable.css");

/* Import des composants */
@import url("./component/separator.css");
@import url("./component/education-buttons.css");
@import url("./component/social-links.css");
@import url("./component/linked-cover.css");

/* Import du header */
@import url("./header/header.css");

/* Import du formulaire de contact */
@import url("./contact-form.css");

/* Import de la page Account */
@import url("./Account.css");

html {
	box-sizing: border-box;
	background-color: rgb(255, 255, 255);
	scroll-behavior: smooth !important;
}

@media screen and (min-width: 992px) {
	html {
		font-size: calc(100% + 0.2vw - 2.4px) !important;
	}
}
body {
	margin: 0;
}
p {
	font-family: "Muli Light", sans-serif;
}

.constrained {
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
	position: relative !important;
}

:root :where(.wp-block-button .wp-block-button__link) {
	line-height: 1 !important;
	letter-spacing: 0.03rem !important;
}
.n2_clear {
	padding: 0px !important;
}
.go-bottom {
	height: calc(100vh - 3.81rem);
	padding: 0 !important;
}

.learn-more .wp-block-column {
	cursor: pointer;
}
.learn-more .wp-block-column p {
	transition: all ease-in-out 0.3s;
}
.learn-more .wp-block-column:hover p {
	transform: scale(1.05);
}

.card {
	overflow: hidden !important;
	box-shadow: 0 0 0.625rem 0.0625rem rgba(0, 0, 0, 0.5);
	min-width: 18rem;
	height: 100% !important;
}
.cards-offer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
}
footer .wp-block-navigation-item:not(:last-child)::after {
    content: "/";
    color: white;
    margin: 0.3rem;
}
@media (max-width: 1040px) and (orientation: portrait) {
	.go-bottom {
		height: calc(50vh);
		width: 100vw;
	}
	.wp-block-cover:has(.text-banner) {
		min-height: calc(60vh - 3.81rem) !important;
	}

	.go-bottom .wp-block-video video {
		width: auto;
		max-height: 100%;
		min-width: 100%;
	}
	.description-container {
		position: absolute;
		z-index: 13;
		width: 100%;
		margin: 0 !important;
		bottom: none;
		top: 5vh;
	}

	.comparative-head
		> .patchwork-offer
		> .wp-block-group.is-vertical
		h4:first-of-type,
	.comparative-head .patchwork-offer figure {
		display: none !important;
	}
}

@media (max-width: 1040px) {
	.section-padding:has(.cards-offer) {
		padding-left: 0 !important;
		padding-right: 0 !important;
		overflow: hidden !important;
	}

	.cards-offer {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding: 3rem 0 !important;
		scroll-snap-type: x mandatory;
		gap: 0rem;
	}

	.cards-offer::-webkit-scrollbar {
		display: none;
	}
	.cards-offer .card-container {
		padding-left: 2rem !important;
	}
	.cards-offer .card-container:last-child {
		padding-right: 2rem !important;
	}

	.cards-offer > * {
		flex: 0 0 auto;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.constrained:has(.cards-offer) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.constrained:has(.cards-offer) .section-padding:last-child {
		margin-block-start: 2rem;
	}
	.constrained:has(.cards-offer) .section-padding:first-child {
		padding-left: 2rem !important;
	}
}

.card .wp-font-awesome-icon,
.tooltip .wp-font-awesome-icon {
	width: auto !important;
	height: auto !important;
	max-width: 24px !important;
}
.comparative-block {
	position: relative;
	overflow: visible !important;
}
.comparative-block figure {
	display: flex;
	align-items: center;
	justify-content: center;
}

.tooltip-container {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
}

.tooltip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	aspect-ratio: 1 / 1 !important;
	width: 1.5rem;
	min-width: 1.5rem;
	max-height: 3rem;
}

.tooltip p {
	display: block;
	width: 11rem;
	background-color: #1b1b1b;
	color: #fff;
	text-align: left;
	border-radius: 8px;
	padding: 10px 12px;
	position: absolute;
	z-index: 9999;
	bottom: 130%;
	left: 50%;
	transform: translateX(-50%);
	line-height: 1.3em;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	pointer-events: none;
}

.tooltip p::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 6px;
	border-style: solid;
	border-color: var(--wp--preset--color--patchwork-dark-gray) transparent
		transparent transparent;
}

.tooltip.active p {
	display: block;
}

/* Tooltip qui s'affiche en dessous quand trop haut */
.tooltip.tooltip-bottom p {
	bottom: auto;
	top: 130%;
}

.tooltip.tooltip-bottom p::after {
	top: auto;
	bottom: 100%;
	border-color: transparent transparent
		var(--wp--preset--color--patchwork-dark-gray) transparent;
}

/* =============================
   ⬇️ FLÈCHE FONT AWESOME
============================= */

.summary-arrow {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 1.2rem;
	transition: transform 0.3s ease;
}

details[open] .summary-arrow {
	transform: rotate(180deg);
}

.section-container .wp-block-group.student-section,
.section-container .wp-block-group.teacher-section,
.section-container .wp-block-group.Member-section {
	overflow: hidden;
	transition: height 0.45s ease-in-out;
}

.wp-block-group:has(.form-container) {
	width: 100%;
}


/* =============================
   📱 RESPONSIVE - MOBILE
============================= */

/* Colonnes inversées sur mobile */
@media (max-width: 781px) {
  .wp-block-columns:has(> .wp-block-column:nth-child(2) > figure):not(:has(> .wp-block-column:nth-child(1) > figure)) {
    display: flex;
    flex-direction: column-reverse !important;
  }
}
.comparative-table-wrapper {
  display: block !important;
}
.mobile-comparative-table-wrapper  {
  display: none !important;
}

@media (max-width: 781px) {
  .comparative-table-wrapper {
    display: none !important;
  }
  .mobile-comparative-table-wrapper  {
    display: block !important;
  }
  .mobile-comparative-table .wp-block-button__link {
    display: flex !important;
    flex-direction: column !important;
  }
  .margin-2rem {
    margin-bottom: -2rem !important;
  }
  .mobile-comparative-table {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
  }
  .mobile-comparative-table .comparative-block {
    min-width: 180px !important;
    max-width: 180px !important;
    width: 180px !important;
    box-sizing: border-box;
    flex-shrink: 0;
  }
  .mobile-comparative-table .patchwork-offer {
    position: sticky;
    left: -2rem;
    z-index: 2;
    width: calc(100% + 4rem) !important;
    min-width: calc(100% - 2rem)  !important;
    max-width: calc(100% + 4rem) !important;
    flex-shrink: 0;
    background: inherit;
  }
}

.w3eden .btn {
	letter-spacing: 0.03rem;
	font-size: 1.125rem;
	font-weight: 600;
	border: none;
	border-radius: var(--wp--custom--border-radius--normal);
	padding-top: var(--wp--custom--spacing--button-top-normal);
	padding-bottom: var(--wp--custom--spacing--button-bottom-normal);
	padding-left: var(--wp--custom--spacing--button-left-normal);
	padding-right: var(--wp--custom--spacing--button-right-normal);
}

.w3eden .btn:focus {
	outline: none;
	box-shadow: none;
}