/*
Theme Name:  Business One Page Pro – World Experience
Theme URI:   https://www.world-experience.fr
Description: Thème enfant du site World Experience. Tous les modèles de page,
             types de contenu et styles propres au projet sont définis ici, afin
             qu'une mise à jour du thème parent n'efface pas le travail.
Author:      World Experience
Template:    business-one-page-pro
Version:     1.0.0
Text Domain: business-one-page-pro-child
*/

/* Parent theme accent colour. The theme has no colour setting in the
   Customizer — its palette is written into its own style.css — so the value is
   named once here instead of being repeated inside rules. */
:root {
	--we-accent: #ffbc00;
}

/* ── A4 · Formation page ──────────────────────────────────────────────── */

/* The flyer is a poster, not a landscape image: uncropped, aspect ratio kept.
   The height is capped so a tall poster does not fill the whole column. */
.formation-flyer {
	margin: 0 0 30px;
	text-align: center;
}

.formation-flyer img {
	height: auto;
	max-height: 70vh;
	max-width: 100%;
	width: auto;
}

.formation-inscription {
	margin: 30px 0 0;
}

.formation-inscription__lien {
	background: var(--we-accent);
	border-radius: 5px;
	color: #fff;
	display: inline-block;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 25px;
	padding: 15px 20px;
	text-align: center;
	text-transform: uppercase;
	transition: all 0.2s;
}

.formation-inscription__lien:hover,
.formation-inscription__lien:focus {
	color: #fff;
	opacity: 0.8;
	text-decoration: none;
}

/* Shown to administrators only, when no form page is selected in the
   Customizer. */
.formation-inscription__avertissement {
	background: #fcf3d4;
	border-left: 4px solid var(--we-accent);
	font-size: 15px;
	margin: 30px 0 0;
	padding: 12px 15px;
}

/* ── A5 · Listing views and homepage sections ─────────────────────────── */

/* The parent theme scopes its section styling to its own IDs (#services
   .heading, #portfolio .btn-holder a), so the new sections repeat the same
   look here rather than borrowing markup that no rule matches. */

.we-section {
	padding: 70px 0;
}

.we-section--gris {
	background: #f0f2f7;
}

.we-section .heading {
	margin: 0 auto 40px;
	max-width: 855px;
	text-align: center;
}

.we-section .heading .section-title {
	color: #252626;
	font: 42px/46px 'Oxygen', sans-serif;
	letter-spacing: 1px;
	margin: 0 0 21px;
	padding: 0 0 21px;
	position: relative;
}

.we-section .heading .section-title:after {
	background: #838a95;
	content: '';
	height: 2px;
	left: 50%;
	position: absolute;
	top: 100%;
	transform: translateX(-50%);
	width: 45px;
}

.we-section .btn-holder {
	margin-top: 40px;
	text-align: center;
}

.we-section .btn-holder a {
	background: var(--we-accent);
	border-radius: 5px;
	color: #fff;
	display: inline-block;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 25px;
	padding: 15px 20px;
	text-align: center;
	text-transform: uppercase;
	transition: all 0.2s;
}

.we-section .btn-holder a:hover,
.we-section .btn-holder a:focus {
	color: #fff;
	opacity: 0.8;
	text-decoration: none;
}

/* Card grid.

   auto-fill with a 300px minimum gives three columns inside the parent theme's
   1170px and 970px containers, two at 750px and one on a phone, without a
   media query of its own — the parent's four container widths would otherwise
   have to be tracked here. min() keeps a narrow phone from overflowing. */
.we-cartes {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.we-cartes--page {
	margin: 40px 0 0;
}

.we-carte {
	margin: 0;
}

.we-carte__lien {
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	transition: all 0.2s;
}

.we-carte__lien:hover,
.we-carte__lien:focus {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
	text-decoration: none;
	transform: translateY(-3px);
}

.we-carte__visuel {
	display: block;
	position: relative;
}

/* A flyer is a poster. The full, uncropped version is on the programme's own
   page (A4); in a card it is a thumbnail, cropped from the top because that is
   where a flyer carries its title and logo. */
.we-carte__visuel img {
	aspect-ratio: 4 / 3;
	display: block;
	height: auto;
	object-fit: cover;
	object-position: top;
	width: 100%;
}

/* Shown until the flyers are attached, so a card without an image keeps the
   same height as its neighbours. */
.we-carte__visuel-vide {
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, #f0f2f7 0%, #e2e6ef 100%);
	border-bottom: 3px solid var(--we-accent);
	display: block;
	width: 100%;
}

.we-carte__corps {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 22px 25px 25px;
}

.we-carte__titre {
	color: #252626;
	display: block;
	font: 600 20px/26px 'Oxygen', sans-serif;
	margin: 0 0 12px;
}

.we-carte__extrait {
	color: #5a6068;
	display: block;
	flex: 1 1 auto;
	font-size: 15px;
	line-height: 24px;
	margin: 0 0 18px;
}

.we-carte__plus {
	color: #252626;
	display: block;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
}

.we-carte__lien:hover .we-carte__plus,
.we-carte__lien:focus .we-carte__plus {
	color: var(--we-accent);
}

.we-cartes-vide {
	background: #f0f2f7;
	margin: 40px 0 0;
	padding: 20px 25px;
}

@media only screen and (max-width: 767px) {
	.we-section {
		padding: 40px 0;
	}

	.we-section .heading .section-title {
		font-size: 30px;
		line-height: 36px;
	}
}

/* ── B3 · WE ONLINE ───────────────────────────────────────────────────── */

/* The three steps on the WE ONLINE page. The number is the point of the list,
   so it is given weight instead of being the small grey default. */
.we-etapes {
	counter-reset: we-etape;
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
}

.we-etapes > li {
	counter-increment: we-etape;
	margin: 0 0 18px;
	padding: 0 0 0 52px;
	position: relative;
}

.we-etapes > li:before {
	background: var(--we-accent);
	border-radius: 50%;
	color: #fff;
	content: counter(we-etape);
	font-size: 18px;
	font-weight: 700;
	height: 36px;
	left: 0;
	line-height: 36px;
	position: absolute;
	text-align: center;
	top: 0;
	width: 36px;
}

.we-etapes > li strong {
	display: block;
	font-size: 18px;
	line-height: 28px;
}

/* The offer, rendered by [we_online_cours] from the same lists that fill the
   form's select fields. */
.we-offre {
	margin: 0 0 30px;
}

.we-offre__titre {
	color: #252626;
	font-size: 17px;
	font-weight: 700;
	margin: 0;
}

.we-offre__valeurs {
	margin: 0 0 15px;
}

/* ── A6 · Main navigation ─────────────────────────────────────────────── */

/* The parent theme makes the mobile header sticky only under body.section-menu,
   and A6 turned the section menu off — the class is gone, and with it the
   sticky header on phones. The rule is repeated here instead of faking the
   class, which would claim a section menu that no longer exists. */
@media only screen and (max-width: 1024px) {
	.mobile-site-header {
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
		position: sticky;
		top: 0;
		z-index: 3;
	}
}

/* The menu mixes homepage anchors with links to real pages, and a label does
   not tell you which is which. The three page links — Cambridge English,
   Examen civique, WE ONLINE — carry more weight and a darker colour than the
   anchors around them.

   Separator rules were tried first and dropped [15.9.2026]. On the desktop the
   menu wraps to a second row at narrower widths, and a rule positioned in the
   gap between two items ends up outside the nav when the group starts a new
   line. Weight and colour have no geometry to go wrong, cost no width in a
   header that is already wrapping, and read the same on both breakpoints.

   The theme's own hover and current-item rules are more specific than these, so
   they still win. */
.main-navigation .we-menu--page > a,
.mobile-main-navigation .we-menu--page > a,
.secondary-mobile-menu .we-menu--page > a {
	color: #252626;
	font-weight: 600;
}

/* In the desktop header the page links start a row of their own. The
 * container is a fixed 1170px, so the seven items never fit on one row and the
 * menu wraps anyway; without this, the wrap would fall wherever the widths
 * happen to put it and split the page links across both rows. The items float
 * left, so clearing the first page link is enough. */
.main-navigation .we-menu--ancre + .we-menu--page {
	clear: left;
}

/* ── A7 · Key figures ─────────────────────────────────────────────────── */

.we-stats__liste {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.we-stats__item {
	background: #fff;
	border-radius: 5px;
	border-top: 4px solid var(--we-accent);
	margin: 0;
	padding: 30px 25px;
	text-align: center;
}

.we-stats__valeur {
	color: #252626;
	display: block;
	font: 700 52px/1 'Oxygen', sans-serif;
	letter-spacing: -1px;
	margin: 0 0 14px;
}

.we-stats__libelle {
	color: #252626;
	display: block;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.we-stats__note {
	color: #5a6068;
	display: block;
	font-size: 14px;
	line-height: 21px;
	margin-top: 6px;
}

@media only screen and (max-width: 767px) {
	.we-stats__valeur {
		font-size: 42px;
	}
}

/* ── A8 · WhatsApp number ─────────────────────────────────────────────── */

/* The contact block has no slot for a second phone number, so the WhatsApp
   line uses the fax row — the only one the parent theme prints as plain text
   rather than wrapping in a link (see inc/whatsapp.php). That row carries a fax
   icon, which would be wrong; the phone icon replaces it.

   The path reaches into the parent theme on purpose. The child theme declares
   `Template: business-one-page-pro`, so that directory name is fixed for as
   long as this child theme exists. */
.contact-info-lists .fax {
	background-image: url(../business-one-page-pro/images/icon-phone.png);
}

/* The logo follows the number on the same row, with a little air between. */
.contact-info-lists .we-whatsapp-ligne {
	margin-left: 8px;
}

/* The logo replaces the words "Discuter sur WhatsApp" [15.9.2026]: the label
   beside a phone number wrapped badly, worst of all in the narrow sidebar.
   The colour lives here rather than in the SVG's fill attribute, so hover and
   focus can change it. */
.we-whatsapp-lien {
	color: #25d366;
	display: inline-block;
	text-decoration: none;
	/* Centres the glyph on the text it sits beside; without it an inline-block
	   sits on the baseline and the upper half rides above the line. */
	vertical-align: middle;
}

.we-whatsapp-lien:hover,
.we-whatsapp-lien:focus {
	color: #1da851;
	text-decoration: none;
}

.we-whatsapp-logo {
	display: block;
	height: 20px;
	width: 20px;
}

/* ── A9 · Footer legal information ────────────────────────────────────── */

.we-footer-legal {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin: 0 0 25px;
	padding: 25px 0 0;
}

.we-footer-legal__liens {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.we-footer-legal__liens li {
	margin: 0;
}

.we-footer-legal__liens a {
	font-size: 15px;
	font-weight: 600;
}

.we-footer-legal__mentions {
	font-size: 14px;
	line-height: 22px;
	margin: 0;
	opacity: 0.85;
}

/* Administrators only, while a footer link has no page yet. */
.we-footer-legal__avertissement {
	background: #fcf3d4;
	border-left: 4px solid var(--we-accent);
	color: #252626;
	font-size: 14px;
	margin: 18px 0 0;
	padding: 10px 14px;
}

/* ── A2 / A3 · Cambridge forms ────────────────────────────────────────── */

/* The client's document asks for required fields to be "clearly marked". The
 * asterisk is aria-hidden: CF7 already puts aria-required on the input, so a
 * screen reader would otherwise announce the requirement twice. */
.we-requis {
	color: #b3261e;
	font-weight: 700;
}

.we-requis-legende {
	font-size: 14px;
}

/* On the full-width Cambridge page a form stretched across the whole 1140 px
 * column, which made every field needlessly long [user, 17.9.2026]. Half the
 * column on a desktop; from tablet width down the form uses the full width as
 * before. Applies to both forms on that page (A2 and A3). */
@media screen and (min-width: 992px) {

	.we-cambridge .wpcf7 {
		max-width: 50%;
	}
}

/* The exam / preparation choice: one option per line, so the two long labels
 * never run together on a narrow screen. */
.we-champ-choix {
	margin: 0 0 1em;
}

.we-champ-choix .wpcf7-list-item {
	display: block;
	margin: 0.3em 0 0;
}

/* ── B2 · Cambridge English page ──────────────────────────────────────── */

/* The turquoise is sampled from the rule in the official Authorised Exam Centre
 * logo (#00bdb6), so headings match the logo exactly. It is too light for body
 * text or white-on-colour text (2.3:1 on white), so it is used only for large
 * headings and accents; --we-cambridge-fonce is the same hue darkened to pass
 * WCAG AA with white text (4.6:1). Body text stays black, as the client asks. */
.we-cambridge {
	--we-cambridge: #00bdb6;
	--we-cambridge-fonce: #007f7a;
}

.we-cambridge .entry-content {
	color: #000;
}

.we-cambridge .entry-content h2,
.we-cambridge .entry-content h3,
.we-cambridge .entry-content h4 {
	color: var(--we-cambridge-fonce);
}

/* Text links take the page's green instead of the theme's red. The darker
 * shade, because the logo turquoise is too light for text. Buttons and cards
 * carry their own colours. */
.we-cambridge .entry-content a:not(.wp-block-button__link):not(.we-cambridge-carte) {
	color: var(--we-cambridge-fonce);
}

.we-cambridge-entete {
	margin: 0 auto 30px;
	max-width: 760px;
	text-align: center;
}

/* Room between the logo and the heading under it. */
.we-cambridge-entete .wp-block-image {
	margin-bottom: 40px;
}

/* The logo must not be stretched or altered: width only, height follows. */
.we-cambridge-entete .wp-block-image img {
	height: auto;
	max-width: 360px;
	width: 100%;
}

.we-cambridge .entry-content .we-cambridge-entete h2 {
	color: var(--we-cambridge);
	font-size: 34px;
	line-height: 1.25;
}

.we-cambridge-invite {
	font-weight: 700;
}

/* The mock-up's chevron under the invitation. */
.we-cambridge-invite::after {
	border-bottom: 3px solid var(--we-cambridge);
	border-right: 3px solid var(--we-cambridge);
	content: "";
	display: block;
	height: 12px;
	margin: 10px auto 0;
	transform: rotate(45deg);
	width: 12px;
}

.we-cambridge-cartes ul {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(4, 1fr);
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.we-cambridge-cartes li {
	margin: 0;
}

.we-cambridge-carte {
	align-items: center;
	/* The card images are made 2:1 (1774 × 887). The same shape here shows each
	 * picture whole; 4:3 cut the subject off cards 01 and 09. */
	aspect-ratio: 2 / 1;
	background: var(--we-cambridge-fonce);
	border-radius: 6px;
	display: flex;
	justify-content: center;
	overflow: hidden;
	padding: 12px;
	position: relative;
	text-align: center;
	text-decoration: none;
}

.we-cambridge-carte__image {
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	transition: transform 0.3s ease;
	width: 100%;
}

/* Darkens the photo evenly so white text stays readable on any picture. */
.we-cambridge-carte::after {
	background: rgba(0, 0, 0, 0.45);
	content: "";
	inset: 0;
	position: absolute;
}

.we-cambridge-carte__titre {
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	position: relative;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	z-index: 1;
}

.we-cambridge-carte:hover .we-cambridge-carte__image,
.we-cambridge-carte:focus .we-cambridge-carte__image {
	transform: scale(1.05);
}

.we-cambridge-carte:focus-visible {
	outline: 3px solid var(--we-cambridge);
	outline-offset: 2px;
}

/* "Display this notice" in the client's document: availability and similar
 * notices that must stand out from the running text. */
.we-cambridge-avis {
	background: #e6f7f6;
	border-left: 5px solid var(--we-cambridge);
	margin: 20px 0;
	padding: 14px 20px;
}

/* "Add this note" in the client's document: a caveat under a section,
 * quieter than a notice. */
/* A notice made of several paragraphs is a group block with this class. */
.we-cambridge-avis > p:first-child {
	margin-top: 0;
}

.we-cambridge-avis > p:last-child {
	margin-bottom: 0;
}

.we-cambridge-note {
	border-left: 3px solid #cfcfcf;
	font-size: 15px;
	padding-left: 14px;
}

.we-cambridge .wp-block-button__link {
	background: var(--we-cambridge-fonce);
	color: #fff;
}

.we-cambridge .wp-block-button__link:hover,
.we-cambridge .wp-block-button__link:focus {
	background: #005f5b;
	color: #fff;
}

.we-cambridge-tableau {
	margin: 20px 0;
	overflow-x: auto;
}

.we-cambridge-tableau table {
	border-collapse: collapse;
	min-width: 560px;
	width: 100%;
}

.we-cambridge-tableau th,
.we-cambridge-tableau td {
	border: 1px solid #d9d9d9;
	padding: 8px 12px;
	text-align: left;
	vertical-align: top;
}

.we-cambridge-tableau thead th {
	background: var(--we-cambridge-fonce);
	color: #fff;
}

.we-cambridge-tableau tbody th {
	font-weight: 600;
}

.we-cambridge-tableau tbody tr:nth-child(even) {
	background: #f4fbfb;
}

.we-cambridge-tableau .we-cambridge-tarif {
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

.we-cambridge-tableau:focus-visible {
	outline: 3px solid var(--we-cambridge);
}

/* FAQ: core Details blocks. One open panel does not close the others — a
 * visitor comparing two answers keeps both in view. */
.we-cambridge-faq {
	border: 1px solid #d9d9d9;
	border-radius: 6px;
	margin: 0 0 10px;
	padding: 0 18px;
}

.we-cambridge-faq summary {
	color: #000;
	cursor: pointer;
	font-weight: 600;
	list-style-position: outside;
	margin-left: 14px;
	padding: 14px 0;
}

.we-cambridge-faq summary::marker {
	color: var(--we-cambridge-fonce);
}

.we-cambridge-faq summary:focus-visible {
	outline: 3px solid var(--we-cambridge);
	outline-offset: 2px;
}

.we-cambridge-faq[open] {
	border-color: var(--we-cambridge);
	padding-bottom: 6px;
}

.we-cambridge-faq[open] summary {
	color: var(--we-cambridge-fonce);
}

.we-cambridge-coordonnees .we-whatsapp-lien {
	margin-left: 4px;
}

.we-cambridge-avertissement {
	background: #fcf3d4;
	border-left: 4px solid var(--we-accent);
	color: #252626;
	font-size: 14px;
	padding: 10px 14px;
}

/* Sections: an anchor jump should not hide the heading under the sticky
 * header. Each section opens with its card's picture (added by
 * we_cambridge_section_visuel()), which is what separates it from the one
 * before — so no rule line. */
.we-cambridge-section {
	margin-top: 60px;
	scroll-margin-top: 100px;
}

.we-cambridge-section__visuel {
	margin: 0 0 24px;
}

/* A 3:1 band cut from the 2:1 picture. Anchored at 35 % from the top, not the
 * centre: every picture has its faces in the upper half, and a centred band
 * cut the tops of the heads. Checked on all twelve. */
.we-cambridge-section__visuel img {
	aspect-ratio: 3 / 1;
	border-radius: 6px;
	display: block;
	height: auto;
	object-fit: cover;
	object-position: 50% 35%;
	width: 100%;
}

@media screen and (max-width: 991px) {

	.we-cambridge-cartes ul {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 767px) {

	.we-cambridge .entry-content .we-cambridge-entete h2 {
		font-size: 26px;
	}

	.we-cambridge-cartes ul {
		gap: 8px;
		grid-template-columns: repeat(2, 1fr);
	}

	/* On a phone the band would be barely 115 px tall; the whole 2:1 picture
	 * reads better. */
	.we-cambridge-section__visuel img {
		aspect-ratio: 2 / 1;
	}

	/* Two columns leave a card about 170 px wide: at 2:1 a two-line label
	 * would fill it edge to edge, so the card is taller here and the picture
	 * is cropped at the sides instead. */
	.we-cambridge-carte {
		aspect-ratio: 4 / 3;
	}

	.we-cambridge-carte__titre {
		font-size: 15px;
	}
}

/* ── B4 / M2 · Homepage carousel ─────────────────────────────────────── */

/* The one line the parent's slide caption has no style for. White on the
 * photo, like the heading above it; the shadow keeps it readable where the
 * picture is light. */
.banner-text .text .we-diapo__texte {
	color: #fff;
	font-size: 18px;
	line-height: 1.45;
	margin: 0 0 20px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* The parent's caption box is 480px wide, made for a heading alone. With a
 * sentence under the heading it runs to five or six lines and the caption
 * grows taller than the photo, whose top the carousel then clips. At 720px
 * every sentence fits in three lines. Lowered from the parent's 126px, it still
 * clears the dots under it. */
.banner .we-diapo .banner-text {
	bottom: 90px;
}

.banner .we-diapo .banner-text .text {
	max-width: 720px;
}

/* Below 1200px the photo is too short for any caption laid over it, so the
 * caption moves under the photo, as the parent theme already does on phones,
 * and nothing can be clipped. The dots, which the parent hides under 992px,
 * follow under the caption in dark colours: with a mouse, dragging is off and
 * the dots are the only way to change slide. */
@media screen and (max-width: 1199px) {

	/* Slides share the height of the tallest, so a short caption's navy block
	 * still reaches down to the dots instead of ending above a white gap. */
	.banner #banner-slider .owl-stage {
		display: flex;
	}

	.banner #banner-slider .owl-item {
		display: flex;
	}

	.banner .we-diapo {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.banner .we-diapo .banner-text {
		background: #0b2845;
		bottom: 0;
		flex: 1 1 auto;
		padding: 25px 0 30px;
		position: relative;
	}

	.banner .we-diapo .banner-text .text {
		float: none;
		max-width: 100%;
		text-align: left;
		width: 100%;
	}

	.banner .we-diapo .banner-text .text .btn-more {
		display: inline-block;
		float: none;
	}

	.banner .owl-theme .owl-dots {
		display: block;
		margin: 0;
		padding: 14px 0;
		position: static;
	}

	.banner .owl-theme .owl-dots .owl-dot span {
		border-color: #838a95;
	}
}

@media screen and (max-width: 767px) {

	.banner-text .text .we-diapo__texte {
		font-size: 15px;
		text-shadow: none;
	}
}

/* ── B4 / M1 · Header logo ────────────────────────────────────────────── */

/* The logo file is 2112 × 745; the height matches the text title and tagline
 * it replaces, so the fixed header keeps its height. */
.site-branding .custom-logo-link img {
	display: block;
	height: 60px;
	width: auto;
}

.mobile-site-branding .custom-logo-link img {
	height: 44px;
	width: auto;
}

/* The text title stays for screen readers (and as the front page's h1) but is
 * no longer shown once the logo is there. Same rule as WordPress's own
 * .screen-reader-text. */
.custom-logo-link + .text-logo {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

/* ── B4 / M10 · The London Adventure brochure ─────────────────────────── */

/* Homepage section. A colour no other homepage block uses (those are grey
 * #f0f2f7, navy #0b2845 and a pale yellow), taken from the sky in the
 * section's photo. */
.home #clients {
	--we-sejour: #e3eef9;
	background: var(--we-sejour);
}

/* The section title stays centred like every other section title; the text
 * under it is read left-aligned, in a column as wide as the photo. */
#clients .heading {
	text-align: left;
}

#clients .heading .section-title {
	text-align: center;
}

#clients .heading > :not(.section-title) {
	margin-left: auto;
	margin-right: auto;
	max-width: 1024px;
}

#clients .heading .wp-block-buttons {
	justify-content: center;
}


/* The brochure's eight pages are images one after another; a gap and a hairline
 * keep them reading as separate pages rather than one tall poster. */
.we-brochure-page {
	margin: 0 0 20px;
}

.we-brochure-page img {
	border: 1px solid #e5e5e5;
	display: block;
	height: auto;
}

.we-brochure-pdf {
	margin: 0 0 30px;
}

.we-appel-formulaire {
	font-size: 18px;
	font-weight: 600;
}

/* ── B4 / M9 · Homepage offer carousels ───────────────────────────────── */

/* Owl Carousel hides .owl-carousel until its script has run. Without the
 * script the cards would vanish, so until then they stay the usual grid. */
.we-carrousel.owl-carousel:not(.owl-loaded) {
	display: grid;
}

/* Room for the arrows on both sides of the row. */
.we-carrousel.owl-loaded {
	padding: 0 60px;
	position: relative;
}

/* Cards in a row share one height, as they do in the grid. */
.we-carrousel .owl-stage {
	display: flex;
}

.we-carrousel .owl-item {
	display: flex;
}

.we-carrousel .we-carte {
	width: 100%;
}

/* The stage clips its content; the padding keeps the card shadow and the
 * hover lift inside it. */
.we-carrousel .owl-stage-outer {
	margin: -10px 0 -20px;
	padding: 10px 0 20px;
}

.we-carrousel .owl-nav button.owl-prev,
.we-carrousel .owl-nav button.owl-next {
	align-items: center;
	background: #fff;
	border: 1px solid #d9dce3;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	color: #252626;
	cursor: pointer;
	display: flex;
	height: 44px;
	justify-content: center;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.2s;
	width: 44px;
}

.we-carrousel .owl-nav button.owl-prev {
	left: 0;
}

.we-carrousel .owl-nav button.owl-next {
	right: 0;
}

.we-carrousel .owl-nav button.owl-prev:hover,
.we-carrousel .owl-nav button.owl-next:hover,
.we-carrousel .owl-nav button.owl-prev:focus-visible,
.we-carrousel .owl-nav button.owl-next:focus-visible {
	background: var(--we-accent);
	border-color: var(--we-accent);
}

.we-carrousel .owl-nav button.disabled {
	cursor: default;
	opacity: 0.35;
}

.we-carrousel .owl-nav button.disabled:hover {
	background: #fff;
	border-color: #d9dce3;
}

/* Every card already fits, as in Formations professionnelles on a desktop:
 * no arrows at all rather than two that do nothing. */
.we-carrousel .owl-nav.disabled {
	display: none;
}

@media only screen and (max-width: 767px) {

	.we-carrousel.owl-loaded {
		padding: 0 48px;
	}

	.we-carrousel .owl-nav button.owl-prev,
	.we-carrousel .owl-nav button.owl-next {
		height: 38px;
		width: 38px;
	}
}

/* ── B5 / Q2 · Result indicators ──────────────────────────────────────── */

/* The indicators are core table blocks, so the client edits them in the
 * editor like any table. The parent theme styles every table in page content
 * with 25px × 30px cells and 17px type (.page .entry-content table th/td),
 * which does not fit eight columns beside the sidebar; the selectors below
 * outrank it. Figures are centred under their heading, the training name reads
 * left-aligned. */
.we-indicateurs {
	display: flex;
	flex-direction: column;
	margin: 0 0 35px;
}

.page .entry-content figure.we-indicateurs table {
	border-collapse: collapse;
	width: 100%;
}

.page .entry-content figure.we-indicateurs thead,
.page .entry-content figure.we-indicateurs tfoot {
	border: 0;
}

.page .entry-content figure.we-indicateurs th,
.page .entry-content figure.we-indicateurs td {
	background: #fff;
	border: 1px solid #d9dce3;
	color: #252626;
	font: 14px/1.35 'Source Sans Pro', sans-serif;
	padding: 7px 8px;
	text-align: center;
	vertical-align: middle;
}

.page .entry-content figure.we-indicateurs thead th {
	background: #f0f2f7;
	font-weight: 600;
}

.page .entry-content figure.we-indicateurs tbody th,
.page .entry-content figure.we-indicateurs tfoot th {
	font-weight: 400;
	min-width: 170px;
	text-align: left;
}

.page .entry-content figure.we-indicateurs tfoot th,
.page .entry-content figure.we-indicateurs tfoot td {
	background: #f0f2f7;
	font-weight: 600;
}

.we-indicateurs__note {
	color: #5a6068;
}

/* Core prints the caption after the table; as the table's title it reads
 * above it. */
.we-indicateurs .wp-element-caption {
	color: #252626;
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 8px;
	order: -1;
	text-align: left;
}