/**
 * BestPermis — feuille de style principale.
 *
 * Direction : signalétique routière. Marquage au sol, plaques de
 * signalisation, cadrans de tableau de bord.
 *
 * Deux accents : le vert de la marque porte l'identité, l'ambre du
 * clignotant porte tout ce qui touche à l'argent et à l'action.
 *
 * Les noms de classes `bp-` d'origine sont conservés : les gabarits
 * existants continuent de fonctionner sans modification.
 *
 * @package BestPermis
 */

/* ============================================================
   1. Jetons
   ============================================================ */

:root {
	/* Charte BestPermis 2025 : bleu #1A597E (60 %), vert #3DD897 (30 %),
	   dégradé bleu → vert (10 %), fond blanc. Le texte est bleu, jamais noir. */

	/* Les couleurs de la charte sous leur vrai nom (--bp-vert, plus bas,
	   est le vert de la charte). Les anciens jetons restent valides. */
	--bp-bleu:         #1A597E;
	--bp-blanc:        #FFFFFF;

	/* Fonds */
	--bp-asphalte:     #1A597E;
	--bp-asphalte-2:   #154A69;
	--bp-fond:         #F3F7FA;
	--bp-surface:      #FFFFFF;

	/* Texte */
	--bp-encre:        #1A597E;
	--bp-texte:        #35607D;
	--bp-texte-faible: #527289;
	--bp-sur-sombre:   #FFFFFF;
	--bp-sur-sombre-2: #CFE6F0;

	/* Accents. L'ancien « ambre » (action) devient le vert de la charte :
	   les anciens noms de jetons restent valides pour tout le CSS existant. */
	--bp-vert:         #3DD897;
	--bp-vert-fonce:   #1A597E;
	--bp-vert-vif:     #3DD897;
	--bp-vert-clair:   #E4F9F0;
	--bp-ambre:        #3DD897;
	--bp-ambre-texte:  #1A597E;
	--bp-ambre-clair:  #E4F9F0;
	--bp-degrade:      linear-gradient(118deg, #1A597E 0%, #24858F 48%, #3DD897 100%);
	--bp-degrade-vertical: linear-gradient(180deg, #1A597E 0%, #24858F 55%, #3DD897 100%);
	/* Le dégradé en filet fin ou en texte (jamais sur le logo). */
	--bp-degrade-trait: linear-gradient(90deg, #1A597E 0%, #3DD897 100%);

	/* États */
	--bp-erreur:       #C0392B;
	--bp-erreur-clair: #FDECEA;
	--bp-succes:       #0F6E5D;
	--bp-succes-clair: #E2F1EC;

	/* Structure */
	--bp-ligne:        #D5E3EC;
	--bp-ligne-sombre: #2F7096;

	/* La charte n'arrondit rien : coins nets ou biseautés, jamais ronds.
	   (Le tunnel de commande garde ses anciens rayons, voir § 37.) */
	--bp-rayon-sm: 0;
	--bp-rayon:    0;
	--bp-rayon-lg: 0;

	/* Biseau à 60° : l'angle de la jambe du « P » du logo. La coupe descend
	   de --bp-biseau et recule de --bp-biseau × tan 30° (--bp-pente), ce qui
	   donne un pan incliné à 60° sur l'horizontale, parallèle au logo. */
	--bp-pente:        .5774;
	--bp-biseau:       14px;
	--bp-biseau-sm:    9px;
	--bp-biseau-lg:    22px;

	--bp-ombre:        0 1px 2px rgba(12, 26, 23, .05), 0 4px 12px rgba(12, 26, 23, .05);
	--bp-ombre-forte:  0 2px 4px rgba(12, 26, 23, .05), 0 12px 32px rgba(12, 26, 23, .09);
	--bp-ombre-haute:  0 4px 8px rgba(12, 26, 23, .06), 0 28px 60px rgba(12, 26, 23, .16);
	--bp-ombre-xl:     0 8px 16px rgba(12, 26, 23, .12), 0 40px 80px rgba(12, 26, 23, .34);
	/* Ombres teintées du bleu de la charte, pour les nouveaux blocs. Une forme
	   découpée (clip-path) perd son box-shadow : on passe alors par
	   filter: var(--bp-ombre-biseau) sur un parent. */
	--bp-ombre-douce:  0 2px 6px rgba(26, 89, 126, .06), 0 14px 36px rgba(26, 89, 126, .10);
	--bp-ombre-biseau: drop-shadow(0 14px 28px rgba(26, 89, 126, .16));
	--bp-ombre-biseau-basse: drop-shadow(0 4px 10px rgba(26, 89, 126, .08));
	--bp-ombre-biseau-haute: drop-shadow(0 22px 34px rgba(26, 89, 126, .22));

	--bp-titre:    "Saira", "Segoe UI", Arial, sans-serif;
	--bp-corps:    "Saira", "Segoe UI", Arial, sans-serif;
	--bp-condense: "Saira Condensed", "Saira", "Arial Narrow", sans-serif;

	/* Le site occupe l'écran : 1680 px au plus, gouttière qui grandit avec la fenêtre. */
	--bp-largeur: 1680px;
	--bp-gouttiere: clamp(24px, 4vw, 72px);

	--bp-transition: .22s cubic-bezier(.22, .8, .3, 1);

	/* Apparitions au défilement : sobres, entre 0,6 et 0,8 s. */
	--bp-apparition-duree:    .7s;
	--bp-apparition-decalage: 24px;
	--bp-apparition-courbe:   cubic-bezier(.22, .8, .3, 1);
}

/* ============================================================
   2. Base
   ============================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--bp-fond);
	color: var(--bp-texte);
	font-family: var(--bp-corps);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 112;
	color: var(--bp-encre);
	line-height: 1.06;
	text-wrap: balance;
	margin: 0 0 .5em;
	font-weight: 700;
	letter-spacing: -.02em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

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

a {
	color: var(--bp-vert-fonce);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--bp-transition);
}
a:hover { color: var(--bp-vert); }

:focus-visible {
	outline: 3px solid var(--bp-ambre);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Masqué visuellement, lu par les lecteurs d'écran. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.bp-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--bp-encre);
	color: #fff;
	padding: 14px 22px;
	border-radius: 0 0 var(--bp-rayon-sm) 0;
	font-weight: 600;
	text-decoration: none;
}
.bp-skip:focus {
	left: 0;
	color: #fff;
}

.bp-container {
	width: 100%;
	max-width: var(--bp-largeur);
	margin-inline: auto;
	padding-inline: var(--bp-gouttiere);
}

.bp-main { display: block; }

/* ============================================================
   3. Éléments récurrents
   ============================================================ */

/* Étiquette en capitales — reprend le lettrage des panneaux. */
.bp-eyebrow {
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 100;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bp-vert-fonce);
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.bp-eyebrow::before {
	content: "";
	width: 26px;
	height: 3px;
	background: var(--bp-vert);
	border-radius: 2px;
	flex: none;
}
.bp-eyebrow--sombre { color: var(--bp-vert-vif); }
.bp-eyebrow--sombre::before { background: var(--bp-vert-vif); }

/* Pastille de coche réutilisée dans toutes les listes d'avantages. */
.bp-coche {
	width: 19px;
	height: 19px;
	flex: none;
	border-radius: 50%;
	background: var(--bp-vert-clair);
	color: var(--bp-vert-fonce);
	display: grid;
	place-items: center;
	font-size: 11px;
	font-weight: 700;
	font-style: normal;
	line-height: 1;
}
.bp-coche--sombre {
	background: rgba(46, 214, 175, .16);
	color: var(--bp-vert-vif);
}

/* ============================================================
   4. Boutons
   ============================================================ */

.bp-btn {
	--btn-bg: var(--bp-vert);
	--btn-fg: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 105;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
	padding: 15px 26px;
	border-radius: 999px;
	border: 1.5px solid transparent;
	background: var(--btn-bg);
	color: var(--btn-fg);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: transform var(--bp-transition), box-shadow var(--bp-transition), background-color var(--bp-transition), border-color var(--bp-transition);
}
.bp-btn:hover {
	color: var(--btn-fg);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(26, 89, 126, .22);
}
.bp-btn:active { transform: translateY(0); }

.bp-btn--primary { --btn-bg: var(--bp-vert); --btn-fg: #fff; }

.bp-btn--ambre { --btn-bg: var(--bp-ambre); --btn-fg: var(--bp-encre); }
.bp-btn--ambre:hover { box-shadow: 0 10px 24px rgba(61, 216, 151, .36); }

.bp-btn--light { --btn-bg: #fff; --btn-fg: var(--bp-encre); }
.bp-btn--light:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .2); }

.bp-btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--bp-encre);
	border-color: var(--bp-ligne);
}
.bp-btn--ghost:hover {
	--btn-bg: #fff;
	border-color: var(--bp-vert);
	box-shadow: var(--bp-ombre);
}

.bp-btn--ghost-light {
	--btn-bg: rgba(231, 241, 237, .06);
	--btn-fg: var(--bp-sur-sombre);
	border-color: rgba(231, 241, 237, .32);
}
.bp-btn--ghost-light:hover {
	--btn-bg: rgba(231, 241, 237, .16);
	box-shadow: none;
}

.bp-btn--bloc { width: 100%; padding: 16px 22px; }

/* ============================================================
   5. En-tête
   ============================================================ */

.bp-header {
	position: sticky;
	top: 0;
	z-index: 60;
}

.bp-header__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 74px;
	transition: min-height var(--bp-transition);
}
.is-stuck .bp-header__inner { min-height: 62px; }

/* Compaction au défilement sans décalage de mise en page : la boîte de
   l'en-tête garde sa hauteur (74 px) ; seul son contenu, posé en absolu,
   et le fond se réduisent. */
.bp-header { height: 74px; }
.bp-header__inner { position: absolute; top: 0; left: 0; right: 0; margin-inline: auto; }
.bp-header::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 74px;
	z-index: -1;
	/* Repli opaque quand le flou n'est pas pris en charge. */
	background: #fff;
	border-bottom: 1px solid transparent;
	transition: height var(--bp-transition), border-color var(--bp-transition), background-color var(--bp-transition);
}
.bp-header.is-stuck::before { height: 62px; border-bottom-color: var(--bp-ligne); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.bp-header::before {
		background: rgba(255, 255, 255, .78);
		backdrop-filter: saturate(160%) blur(14px);
		-webkit-backdrop-filter: saturate(160%) blur(14px);
	}
	.bp-header.is-stuck::before { background: rgba(255, 255, 255, .88); }
}

.bp-header__brand { margin-right: auto; }

.bp-brand {
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 118;
	font-weight: 800;
	font-size: 21px;
	letter-spacing: -.015em;
	color: var(--bp-encre);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 9px;
}
.bp-brand:hover { color: var(--bp-encre); }
.bp-brand::before {
	content: "";
	width: 11px;
	height: 11px;
	border-radius: 3px;
	background: var(--bp-vert);
	box-shadow: 0 0 0 4px var(--bp-vert-clair);
	flex: none;
}
.bp-brand__name { display: block; }
.bp-brand__tagline {
	display: block;
	font-family: var(--bp-corps);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--bp-texte-faible);
}

/* Le logo envoyé depuis l'admin remplace le texte. */
.custom-logo-link { display: inline-flex; align-items: center; }
.custom-logo { max-height: 48px; width: auto; }

.bp-nav {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bp-menu {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bp-menu li { position: relative; }
.bp-menu a {
	display: block;
	font-size: 15px;
	font-weight: 500;
	color: var(--bp-texte);
	text-decoration: none;
	padding: 9px 14px;
	border-radius: 999px;
	white-space: nowrap;
	transition: color var(--bp-transition), background-color var(--bp-transition);
}
.bp-menu a:hover,
.bp-menu .current-menu-item > a,
.bp-menu .current_page_item > a {
	color: var(--bp-encre);
	background: rgba(12, 26, 23, .05);
}

/* Sous-menus */
.bp-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 210px;
	background: var(--bp-surface);
	border: 1px solid var(--bp-ligne);
	border-radius: var(--bp-rayon-sm);
	box-shadow: var(--bp-ombre-forte);
	list-style: none;
	margin: 6px 0 0;
	padding: 6px;
	display: none;
	z-index: 10;
}
.bp-menu li:hover > .sub-menu,
.bp-menu li:focus-within > .sub-menu { display: block; }
.bp-menu .sub-menu a { border-radius: 6px; }

.bp-menu-notice {
	display: block;
	font-size: 12px;
	color: var(--bp-ambre-texte);
	background: var(--bp-ambre-clair);
	padding: 6px 10px;
	border-radius: 6px;
	text-decoration: none;
}

.bp-social {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bp-social__link {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(12, 26, 23, .05);
	color: var(--bp-encre);
	font-family: var(--bp-titre);
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	transition: background-color var(--bp-transition), color var(--bp-transition);
}
.bp-social__link:hover { background: var(--bp-vert); color: #fff; }

.bp-header__tel {
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 105;
	font-weight: 700;
	font-size: 15px;
	color: var(--bp-encre);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}
.bp-header__tel:hover { color: var(--bp-vert-fonce); }

.bp-header__cta { margin-left: 4px; }

/* Bouton hamburger */
.bp-burger {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1.5px solid var(--bp-ligne);
	border-radius: 12px;
	background: var(--bp-surface);
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
.bp-burger__box {
	position: relative;
	display: block;
	width: 18px;
	height: 12px;
}
.bp-burger__bar,
.bp-burger__bar::before,
.bp-burger__bar::after {
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: var(--bp-encre);
	border-radius: 2px;
	transition: transform var(--bp-transition), opacity var(--bp-transition);
}
.bp-burger__bar { top: 5px; }
.bp-burger__bar::before { content: ""; top: -5px; }
.bp-burger__bar::after { content: ""; top: 5px; }

.bp-burger[aria-expanded="true"] .bp-burger__bar { background: transparent; }
.bp-burger[aria-expanded="true"] .bp-burger__bar::before { transform: translateY(5px) rotate(45deg); }
.bp-burger[aria-expanded="true"] .bp-burger__bar::after { transform: translateY(-5px) rotate(-45deg); }

/* ============================================================
   6. Hero
   ============================================================ */

/* Photo en plein cadre (posée en ligne par le gabarit), sous un voile
   sombre dégradé : opaque côté texte, plus léger côté configurateur. */
.bp-hero {
	position: relative;
	background-color: var(--bp-asphalte);
	background-size: cover;
	background-position: 62% center;
	background-repeat: no-repeat;
	color: var(--bp-sur-sombre);
	overflow: hidden;
	border-radius: 0 0 var(--bp-rayon-lg) var(--bp-rayon-lg);
}
.bp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(90% 80% at 85% 10%, rgba(46, 214, 175, .18), transparent 60%),
		linear-gradient(100deg, rgba(12, 26, 23, .96) 0%, rgba(12, 26, 23, .86) 42%, rgba(12, 26, 23, .55) 72%, rgba(12, 26, 23, .35) 100%);
	pointer-events: none;
}
/* Marquage au sol qui traverse le hero. */
.bp-hero::after {
	content: "";
	position: absolute;
	left: -10%;
	right: -10%;
	bottom: 86px;
	height: 6px;
	background: repeating-linear-gradient(
		90deg,
		rgba(231, 241, 237, .14) 0 46px,
		transparent 46px 92px
	);
	transform: rotate(-1.6deg);
	pointer-events: none;
}

.bp-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 64px;
	align-items: center;
	padding-block: 96px 128px;
}

.bp-hero__title {
	font-variation-settings: "wdth" 120;
	font-weight: 800;
	font-size: clamp(38px, 6.6vw, 92px);
	letter-spacing: -.032em;
	color: #fff;
	margin-bottom: 22px;
}
.bp-hero__title .bp-accent {
	color: var(--bp-vert-vif);
	white-space: nowrap;
}

.bp-hero__lede {
	font-size: clamp(17px, 1.5vw, 20px);
	color: var(--bp-sur-sombre-2);
	max-width: 46ch;
	margin-bottom: 34px;
}

.bp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	margin-bottom: 40px;
}

.bp-hero__proofs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 14.5px;
	color: var(--bp-sur-sombre-2);
}
.bp-hero__proofs li {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ---------- Configurateur : auto ou moto, puis la formule ---------- */
.bp-config {
	background: var(--bp-surface);
	border-radius: var(--bp-rayon-lg);
	box-shadow: var(--bp-ombre-xl);
	color: var(--bp-texte);
	padding: 22px 22px 20px;
	position: relative;
}
.bp-config__titre {
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 112;
	font-weight: 800;
	font-size: 18px;
	color: var(--bp-encre);
	margin: 0 0 4px;
}
.bp-config__sous {
	font-size: 13.5px;
	color: var(--bp-texte-faible);
	margin: 0 0 16px;
}
.bp-config__actions { margin: 14px 0 0; }
.bp-config [data-bp-panel][hidden] { display: none !important; }

.bp-seg {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	background: var(--bp-fond);
	border: 1px solid var(--bp-ligne);
	border-radius: 999px;
	padding: 4px;
	margin-bottom: 14px;
}
.bp-seg button {
	border: none;
	background: transparent;
	border-radius: 999px;
	padding: 11px 10px;
	cursor: pointer;
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 105;
	font-weight: 700;
	font-size: 14.5px;
	color: var(--bp-texte);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: background-color var(--bp-transition), color var(--bp-transition), box-shadow var(--bp-transition);
}
.bp-seg button[aria-pressed="true"] {
	background: var(--bp-encre);
	color: #fff;
	box-shadow: var(--bp-ombre);
}
.bp-seg svg { width: 18px; height: 18px; }

/* Zones explicites : sans elles, l'algorithme de grille place le prix
   (ligne fixée, colonne libre) avant le nom. */
.bp-offre {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"nom prix"
		"detail prix";
	gap: 6px 14px;
	align-items: center;
	padding: 14px;
	border: 1.5px solid var(--bp-ligne);
	border-radius: var(--bp-rayon);
	background: var(--bp-surface);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--bp-transition), box-shadow var(--bp-transition), transform var(--bp-transition);
}
.bp-offre + .bp-offre { margin-top: 10px; }
.bp-offre:hover {
	border-color: var(--bp-vert);
	box-shadow: var(--bp-ombre);
	transform: translateY(-1px);
	color: inherit;
}
.bp-offre--vedette {
	border-color: var(--bp-vert);
	background: linear-gradient(180deg, #fff, var(--bp-vert-clair));
}
.bp-offre__nom {
	grid-area: nom;
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 110;
	font-weight: 700;
	font-size: 16px;
	color: var(--bp-encre);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.bp-offre__tag {
	font-family: var(--bp-titre);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: var(--bp-ambre);
	color: var(--bp-encre);
	padding: 3px 8px;
	border-radius: 999px;
}
.bp-offre__detail {
	grid-area: detail;
	font-size: 13.5px;
	color: var(--bp-texte);
}
.bp-offre__prix {
	grid-area: prix;
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 118;
	font-weight: 800;
	font-size: 30px;
	letter-spacing: -.03em;
	color: var(--bp-encre);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: right;
}
.bp-offre__prix small {
	display: block;
	font-size: 13px;
	font-weight: 700;
	font-variation-settings: "wdth" 100;
	letter-spacing: 0;
	color: var(--bp-texte-faible);
	margin-bottom: 2px;
}
.bp-offre__eur { font-size: 17px; }

/* ============================================================
   7. Carte de commande
   ============================================================ */

.bp-order-card {
	background: var(--bp-surface);
	border-radius: var(--bp-rayon-lg);
	padding: 24px 26px 26px;
	box-shadow: var(--bp-ombre-xl);
	color: var(--bp-texte);
	position: relative;
}
.bp-hero__media .bp-order-card {
	position: absolute;
	left: -52px;
	right: 34px;
	bottom: -46px;
}

.bp-order-card__ribbon {
	position: absolute;
	top: -13px;
	left: 26px;
	background: var(--bp-ambre);
	color: var(--bp-encre);
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 100;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
}

.bp-order-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px dashed var(--bp-ligne);
}
.bp-order-card__name {
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 112;
	font-weight: 700;
	font-size: 19px;
	color: var(--bp-encre);
	line-height: 1.2;
}
.bp-order-card__meta {
	font-size: 13.5px;
	color: var(--bp-texte-faible);
	margin: 2px 0 0;
}

.bp-price {
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 118;
	font-weight: 800;
	font-size: 42px;
	letter-spacing: -.03em;
	color: var(--bp-encre);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.bp-price small { font-size: 21px; font-weight: 700; }

.bp-instalments {
	background: var(--bp-ambre-clair);
	color: var(--bp-ambre-texte);
	border-radius: var(--bp-rayon-sm);
	padding: 10px 13px;
	font-size: 13.5px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 16px;
}
.bp-instalments strong { font-weight: 700; }

.bp-secure-note {
	margin: 13px 0 0;
	font-size: 12px;
	color: var(--bp-texte-faible);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
}

/* ============================================================
   8. Sections
   ============================================================ */

.bp-section { padding-block: 96px; }
.bp-section--tight { padding-block: 76px; }

.bp-section--dark {
	background: var(--bp-asphalte);
	color: var(--bp-sur-sombre);
	position: relative;
	overflow: hidden;
}
/* Texture de route très atténuée : la section sombre n'est plus un aplat.
   Le chemin est relatif à cette feuille de style. */
.bp-section--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url( "../img/pages/formations.jpg" );
	background-size: cover;
	background-position: center;
	opacity: .09;
	pointer-events: none;
}
/* Le contenu repasse au-dessus de la texture. */
.bp-section--dark > * {
	position: relative;
	z-index: 1;
}
.bp-section--dark .bp-section__title,
.bp-section--dark h2,
.bp-section--dark h3 { color: #fff; }
.bp-section--dark .bp-section__lede,
.bp-section--dark p { color: var(--bp-sur-sombre-2); }

.bp-section--light { background: var(--bp-surface); }

.bp-section__narrow {
	max-width: 780px;
}

.bp-section__head {
	max-width: 62ch;
	margin-bottom: 44px;
}

.bp-section__title {
	font-size: clamp(30px, 3.9vw, 46px);
	letter-spacing: -.025em;
	margin-bottom: 14px;
}

.bp-section__lede {
	font-size: 17.5px;
	margin: 0;
}

.bp-section__note {
	margin-top: 26px;
	font-size: 13.5px;
	color: var(--bp-texte-faible);
	max-width: 78ch;
}
.bp-section--dark .bp-section__note { color: var(--bp-sur-sombre-2); }

/* ============================================================
   9. Chiffres clés — cadrans de tableau de bord
   ============================================================ */

.bp-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bp-stats__item {
	background: var(--bp-surface);
	border: 1px solid var(--bp-ligne);
	border-radius: var(--bp-rayon);
	padding: 26px 22px;
	text-align: center;
	transition: transform var(--bp-transition), box-shadow var(--bp-transition), border-color var(--bp-transition);
}
.bp-stats__item:hover {
	transform: translateY(-3px);
	box-shadow: var(--bp-ombre-forte);
	border-color: transparent;
}

/* Le balisage utilise un <span> : sans `display: block`, largeur, hauteur
   et marges automatiques sont ignorées, le SVG s'étire sur toute la
   largeur et le nombre part hors du cadran. */
.bp-gauge {
	display: block;
	position: relative;
	/* 150 px : à cette taille, l'intérieur du demi-cercle offre 104 px de
	   large à la hauteur du nombre, contre 90 px pour « 25 000+ ». */
	width: 164px;
	margin: 0 auto 12px;
}
/* `height: auto` laisse le ratio du viewBox fixer la hauteur : plus d'écart
   entre la boîte et le dessin, donc plus de décalage à rattraper. */
.bp-gauge svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.bp-stats__value {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	/* La ligne de base de l'arc est à y=60 sur les 68 du viewBox, soit
	   11,8 % de la hauteur. On pose le nombre juste au-dessus. */
	bottom: 21%;
	white-space: nowrap;
	text-align: center;
	/* Sans hauteur de ligne fixe, celle du corps de page (1,65) décale
	   le nombre de plus de dix pixels vers le bas. */
	line-height: 1;
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 108;
	font-weight: 800;
	font-size: 21px;
	letter-spacing: -.03em;
	color: var(--bp-encre);
	font-variant-numeric: tabular-nums;
}

.bp-stats__label {
	display: block;
	font-size: 13.5px;
	color: var(--bp-texte-faible);
	font-weight: 500;
}

/* ============================================================
   10. Grilles et cartes
   ============================================================ */

.bp-grid {
	display: grid;
	gap: 22px;
}
.bp-grid--formations { grid-template-columns: repeat(3, 1fr); }
.bp-grid--formules   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bp-grid--atouts     { grid-template-columns: repeat(3, 1fr); }
.bp-grid--temoignages { grid-template-columns: repeat(3, 1fr); }

.bp-card {
	position: relative;
	background: var(--bp-surface);
	border: 1px solid var(--bp-ligne);
	border-radius: var(--bp-rayon);
	transition: transform var(--bp-transition), box-shadow var(--bp-transition), border-color var(--bp-transition);
}

/* --- Plaque de formation --- */
.bp-card--formation {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}
.bp-card--formation::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 100%;
	height: 4px;
	background: var(--bp-vert);
	z-index: 2;
	transition: right .32s cubic-bezier(.22, .8, .3, 1);
}
.bp-card--formation:hover {
	transform: translateY(-4px);
	box-shadow: var(--bp-ombre-forte);
	border-color: transparent;
}
.bp-card--formation:hover::before { right: 0; }

.bp-card__photo {
	display: block;
	height: 158px;
	background-color: var(--bp-asphalte-2);
	background-size: cover;
	background-position: center;
	position: relative;
	overflow: hidden;
}
.bp-card__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 26, 23, .10) 0%, rgba(12, 26, 23, .42) 100%);
	transition: opacity .3s ease;
}
.bp-card--formation:hover .bp-card__photo::after { opacity: .65; }

.bp-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 0 24px 24px;
}

.bp-card__icon {
	width: 50px;
	height: 50px;
	border-radius: 14px;
	background: var(--bp-surface);
	color: var(--bp-vert-fonce);
	display: grid;
	place-items: center;
	margin: -25px 0 15px;
	position: relative;
	z-index: 2;
	box-shadow: var(--bp-ombre);
	transition: background-color var(--bp-transition), color var(--bp-transition);
}
.bp-card--formation:hover .bp-card__icon {
	background: var(--bp-vert);
	color: #fff;
}
.bp-card__icon svg { width: 24px; height: 24px; }

.bp-card__title {
	font-size: 19px;
	font-variation-settings: "wdth" 110;
	margin: 0 0 7px;
}
.bp-card__title a { text-decoration: none; color: inherit; }

.bp-card__text {
	font-size: 15px;
	color: var(--bp-texte);
	margin: 0;
}

.bp-card__foot {
	margin-top: auto;
	padding-top: 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.bp-card__from {
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 112;
	font-weight: 700;
	font-size: 15px;
	color: var(--bp-encre);
	font-variant-numeric: tabular-nums;
}
.bp-card__from span {
	color: var(--bp-texte-faible);
	font-weight: 400;
	font-size: 13px;
}
.bp-card__arrow {
	font-family: var(--bp-titre);
	font-weight: 700;
	font-size: 14px;
	color: var(--bp-vert-fonce);
	display: flex;
	align-items: center;
	gap: 6px;
	transition: gap var(--bp-transition);
}
.bp-card--formation:hover .bp-card__arrow { gap: 10px; }

/* --- Carte atout --- */
.bp-card--atout {
	padding: 28px 26px;
}
.bp-card--atout .bp-card__icon {
	margin: 0 0 16px;
	background: var(--bp-vert-clair);
	box-shadow: none;
}
.bp-card--atout:hover {
	transform: translateY(-3px);
	box-shadow: var(--bp-ombre-forte);
	border-color: transparent;
}

/* --- Carte formule --- */
.bp-card--formule {
	display: flex;
	flex-direction: column;
	border-radius: var(--bp-rayon-lg);
	padding: 30px;
}
.bp-card--formule:hover {
	transform: translateY(-3px);
	box-shadow: var(--bp-ombre-forte);
}
.bp-card--formule.is-featured {
	border-color: transparent;
	box-shadow: var(--bp-ombre-haute);
	outline: 2px solid var(--bp-vert);
	outline-offset: -2px;
}
.bp-card--formule .bp-card__title {
	font-size: 23px;
	font-variation-settings: "wdth" 112;
	margin-bottom: 6px;
}

.bp-card__badge {
	position: absolute;
	top: 22px;
	right: 24px;
	background: var(--bp-vert-clair);
	color: var(--bp-vert-fonce);
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 100;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
}

.bp-card__desc {
	font-size: 14.5px;
	color: var(--bp-texte-faible);
	margin: 0 0 22px;
	max-width: 34ch;
}

.bp-card__price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding-bottom: 20px;
	margin: 0 0 20px;
	border-bottom: 1px dashed var(--bp-ligne);
}
.bp-card__price strong {
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 118;
	font-weight: 800;
	font-size: 42px;
	letter-spacing: -.03em;
	color: var(--bp-encre);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.bp-card__price-note {
	font-size: 13.5px;
	color: var(--bp-texte-faible);
	order: 2;
}

.bp-card__list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	gap: 10px;
}
.bp-card__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
}
.bp-card__list .bp-coche { margin-top: 2px; }

.bp-card__cta {
	margin: auto 0 0;
	display: grid;
	gap: 9px;
}

/* --- Témoignage --- */
.bp-card--temoignage {
	background: var(--bp-fond);
	border-color: transparent;
	padding: 28px 26px;
	display: flex;
	flex-direction: column;
}
.bp-section--light .bp-card--temoignage { background: var(--bp-fond); }

.bp-stars {
	color: var(--bp-ambre);
	font-size: 15px;
	letter-spacing: 2px;
	margin: 0 0 14px;
}
.bp-card--temoignage blockquote {
	margin: 0 0 20px;
	font-size: 16.5px;
	color: var(--bp-encre);
	line-height: 1.6;
}
.bp-author {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 12px;
}
.bp-author__badge {
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 50%;
	background: var(--bp-vert);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--bp-titre);
	font-weight: 800;
	font-size: 15px;
	overflow: hidden;
}
.bp-author__badge img { width: 100%; height: 100%; object-fit: cover; }
.bp-author__name {
	font-weight: 700;
	color: var(--bp-encre);
	font-size: 15px;
	line-height: 1.3;
	display: block;
}
.bp-author__meta {
	font-size: 13px;
	color: var(--bp-texte-faible);
	display: block;
}

/* ============================================================
   11. Parcours en quatre étapes
   ============================================================ */

.bp-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* La route qui relie les étapes. */
.bp-steps::before {
	content: "";
	position: absolute;
	top: 27px;
	left: 8%;
	right: 8%;
	height: 3px;
	background: repeating-linear-gradient(
		90deg,
		rgba(231, 241, 237, .22) 0 16px,
		transparent 16px 32px
	);
}

.bp-step {
	position: relative;
	padding: 0 18px;
}
.bp-step__num {
	position: relative;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--bp-asphalte-2);
	border: 2px solid var(--bp-ligne-sombre);
	color: var(--bp-vert-vif);
	display: grid;
	place-items: center;
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 115;
	font-weight: 800;
	font-size: 18px;
	margin-bottom: 20px;
	font-variant-numeric: tabular-nums;
}
.bp-step:first-child .bp-step__num {
	background: var(--bp-vert);
	border-color: var(--bp-vert);
	color: var(--bp-encre);
}
.bp-step h3 {
	font-size: 18px;
	margin: 0 0 8px;
	font-variation-settings: "wdth" 110;
}
.bp-step p {
	font-size: 15px;
	margin: 0;
}

/* Parcours collant (accueil) : l'image reste fixe, le texte des quatre
   étapes défile à côté, l'image change à chaque étape. Sous 861 px, ou sans
   script, c'est une simple pile de quatre étapes sans image. */
/* overflow: clip (et non hidden) pour que position: sticky fonctionne. */
.bp-section--collant { overflow: clip; }
.bp-parcours__visuel { display: none; }
.bp-parcours__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; }
.bp-parcours__etape { position: relative; padding-left: 78px; }
.bp-parcours__num {
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--bp-condense);
	font-weight: 600;
	font-size: 48px;
	line-height: 1;
	color: var(--bp-vert);
	font-variant-numeric: tabular-nums;
}
.bp-parcours__etape h3 { margin: 0 0 8px; font-size: clamp(22px, 2.4vw, 30px); }
.bp-parcours__etape p { margin: 0; font-size: 16px; max-width: 46ch; }

@media (min-width: 861px) {
	.bp-parcours { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
	.bp-parcours__visuel {
		display: block;
		position: sticky;
		top: calc(50vh - 190px);
		aspect-ratio: 5 / 4;
		max-height: 380px;
		width: 100%;
		background: var(--bp-asphalte-2);
	}
	.bp-parcours__img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		transition: opacity .45s ease;
	}
	.bp-parcours__img.is-actif { opacity: 1; }
	.bp-parcours__liste { gap: 0; }
	.bp-parcours__etape {
		min-height: 62vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		opacity: .45;
		transition: opacity .35s ease;
	}
	.bp-parcours__etape.is-actif { opacity: 1; }
	.bp-parcours__etape:last-child { min-height: 50vh; }
}
/* Sans script : tout le texte reste lisible. */
html:not(.bp-js) .bp-parcours__etape { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.bp-parcours__img,
	.bp-parcours__etape { transition: none; }
}

/* ============================================================
   12. Onglets de tarifs
   ============================================================ */

.bp-tabs-bar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 34px;
}
.bp-tabs-bar .bp-section__head { margin-bottom: 0; }

.bp-tabs {
	display: inline-flex;
	background: var(--bp-surface);
	border: 1px solid var(--bp-ligne);
	border-radius: 999px;
	padding: 5px;
	gap: 4px;
}
.bp-tab {
	border: none;
	background: transparent;
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 105;
	font-weight: 700;
	font-size: 14.5px;
	color: var(--bp-texte);
	padding: 10px 22px;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color var(--bp-transition), color var(--bp-transition);
}
.bp-tab[aria-selected="true"] { background: var(--bp-encre); color: #fff; }
.bp-tab:not([aria-selected="true"]):hover {
	background: rgba(12, 26, 23, .05);
	color: var(--bp-encre);
}

/* ============================================================
   13. Bandeau d'appel à l'action
   ============================================================ */

.bp-cta { padding-block: 0 96px; }

.bp-cta__inner {
	position: relative;
	border-radius: var(--bp-rayon-lg);
	padding: 64px 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
	overflow: hidden;
	background-color: var(--bp-vert-fonce);
	background-size: cover;
	background-position: 62% center;
	color: #fff;
}
.bp-cta__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(10, 60, 51, .94) 0%, rgba(15, 110, 93, .86) 46%, rgba(10, 40, 35, .62) 100%);
}
.bp-cta__text,
.bp-cta__actions { position: relative; z-index: 1; }

.bp-cta__title {
	color: #fff;
	font-size: clamp(28px, 3.4vw, 40px);
	letter-spacing: -.025em;
	margin: 0 0 10px;
}
.bp-cta__lede {
	color: rgba(255, 255, 255, .86);
	font-size: 17px;
	margin: 0;
}
.bp-cta__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0;
}

/* ============================================================
   14. Pages courantes
   ============================================================ */

.bp-page__header {
	background-color: var(--bp-asphalte);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--bp-sur-sombre);
	padding-block: 92px;
	margin-bottom: 64px;
	border-radius: 0 0 var(--bp-rayon-lg) var(--bp-rayon-lg);
	position: relative;
	overflow: hidden;
}
/* Voile de lisibilité : le titre doit rester lisible quelle que soit la
   photo posée derrière, y compris une photo claire. */
.bp-page__header::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 100% at 80% 0%, rgba(46, 214, 175, .16), transparent 62%),
		linear-gradient(100deg, rgba(12, 26, 23, .95) 0%, rgba(12, 26, 23, .82) 50%, rgba(12, 26, 23, .60) 100%);
	pointer-events: none;
}
.bp-page__header > * { position: relative; z-index: 1; }

/* Par défaut sur fond clair : la 404 place ces éléments hors de l'en-tête. */
.bp-page__title {
	color: var(--bp-encre);
	font-variation-settings: "wdth" 116;
	font-size: clamp(32px, 4.6vw, 56px);
	letter-spacing: -.028em;
	margin: 0 0 12px;
}
.bp-page__lede {
	color: var(--bp-texte);
	font-size: clamp(16px, 1.4vw, 19px);
	max-width: 56ch;
	margin: 0;
}

/* Dans l'en-tête sombre, on inverse. */
.bp-page__header .bp-page__title { color: #fff; }
.bp-page__header .bp-page__lede { color: var(--bp-sur-sombre-2); }

.bp-page__eyebrow {
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 100;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bp-ambre-texte);
	margin: 0 0 14px;
}


.bp-404__links {
	list-style: none;
	margin: 28px 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.bp-404__links a {
	display: inline-flex;
	align-items: center;
	font-family: var(--bp-titre);
	font-weight: 700;
	font-size: 14.5px;
	color: var(--bp-encre);
	text-decoration: none;
	background: var(--bp-surface);
	border: 1.5px solid var(--bp-ligne);
	border-radius: 999px;
	padding: 11px 20px;
	transition: border-color var(--bp-transition), box-shadow var(--bp-transition);
}
.bp-404__links a:hover {
	border-color: var(--bp-vert);
	box-shadow: var(--bp-ombre);
}

/* Visuel mis à la une d'une page ou d'une formation. */
.bp-page__media {
	margin: 0 0 56px;
}
.bp-page__media img {
	width: 100%;
	border-radius: var(--bp-rayon-lg);
	box-shadow: var(--bp-ombre-forte);
	display: block;
}

.bp-page__terms {
	margin-top: 28px;
	font-size: 14px;
	color: var(--bp-texte-faible);
}

/* Fin de page : sans bandeau d'appel, il faut un peu d'air. */
.bp-page { padding-bottom: 8px; }

.bp-empty {
	background: var(--bp-surface);
	border: 1px dashed var(--bp-ligne);
	border-radius: var(--bp-rayon);
	padding: 40px 28px;
	text-align: center;
	color: var(--bp-texte-faible);
	margin-bottom: 28px;
}

/* Listes d'articles */
.bp-grid--posts { grid-template-columns: repeat(3, 1fr); }

.bp-card--post {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}
.bp-card--post:hover {
	transform: translateY(-3px);
	box-shadow: var(--bp-ombre-forte);
	border-color: transparent;
}
.bp-card__media { display: block; }
.bp-card__media img {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: cover;
}
.bp-card--post .bp-card__title { padding: 22px 24px 0; }
.bp-card--post .bp-card__text { padding: 0 24px 24px; }

/* Pagination */
.bp-pagination {
	margin: 44px 0 0;
}
.bp-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.bp-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1.5px solid var(--bp-ligne);
	background: var(--bp-surface);
	font-family: var(--bp-titre);
	font-weight: 700;
	font-size: 14.5px;
	color: var(--bp-encre);
	text-decoration: none;
	transition: border-color var(--bp-transition), background-color var(--bp-transition), color var(--bp-transition);
}
.bp-pagination .page-numbers:hover { border-color: var(--bp-vert); }
.bp-pagination .page-numbers.current {
	background: var(--bp-encre);
	border-color: var(--bp-encre);
	color: #fff;
}
.bp-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* Pied de page : compléments */
.bp-footer__hours {
	margin-top: 16px;
	font-size: 14px;
	color: var(--bp-sur-sombre-2);
}
.bp-footer__widgets { margin-top: 20px; }

/* Bloc « dossier élève » dans l'écran de commande en admin. */
.bp-order-extra { margin-top: 16px; }
.bp-order-extra h4 { margin: 0 0 8px; }

.bp-prose {
	font-size: 17px;
}
.bp-prose > * + * { margin-top: 1.1em; }
.bp-prose h2 { font-size: clamp(24px, 2.6vw, 32px); margin-top: 1.6em; }
.bp-prose h3 { font-size: 21px; margin-top: 1.4em; }
.bp-prose ul,
.bp-prose ol { padding-left: 1.3em; }
.bp-prose li + li { margin-top: .4em; }
.bp-prose img { border-radius: var(--bp-rayon); }
.bp-prose blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--bp-vert);
	color: var(--bp-encre);
	font-size: 19px;
}

.bp-prose--columns { columns: 2; column-gap: 48px; }
.bp-prose--columns > * { break-inside: avoid; }
.bp-prose--columns > *:first-child { margin-top: 0; }

/* ============================================================
   15. Formulaires
   ============================================================ */

.bp-form { display: grid; gap: 18px; max-width: 640px; }

.bp-form__row {
	display: grid;
	gap: 6px;
	margin: 0;
}
.bp-form__row label,
.bp-form label {
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 105;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--bp-encre);
}
/* L'astérisque des champs obligatoires. */
.bp-form__row label span[aria-hidden] { color: var(--bp-ambre-texte); }

/* Deux champs côte à côte, empilés en mobile. */
.bp-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

/* Piège à robots : invisible, mais pas via `display:none`,
   que certains automates savent contourner. */
.bp-form__trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bp-form__legal {
	font-size: 13px;
	color: var(--bp-texte-faible);
	margin: 0;
}

.bp-form__submit { margin: 4px 0 0; }

.bp-form__notice {
	border-radius: var(--bp-rayon-sm);
	padding: 14px 16px;
	font-size: 15px;
	margin: 0 0 4px;
}
.bp-form__notice--ok    { background: var(--bp-succes-clair); color: var(--bp-succes); }
.bp-form__notice--error { background: var(--bp-erreur-clair); color: var(--bp-erreur); }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="number"],
select,
textarea {
	width: 100%;
	font-family: var(--bp-corps);
	font-size: 16px;
	color: var(--bp-encre);
	background: var(--bp-surface);
	border: 1.5px solid var(--bp-ligne);
	border-radius: var(--bp-rayon-sm);
	padding: 13px 15px;
	transition: border-color var(--bp-transition), box-shadow var(--bp-transition);
}
input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--bp-vert);
	box-shadow: 0 0 0 3px rgba(61, 216, 151, .22);
}
textarea { min-height: 150px; resize: vertical; }

/* Coordonnées */

.bp-coords { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bp-coords__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
}
.bp-coords__item a { text-decoration: none; font-weight: 500; }
.bp-coords__item::before {
	content: "";
	width: 8px;
	height: 8px;
	flex: none;
	border-radius: 2px;
	background: var(--bp-vert);
}

/* Page contact : le texte à gauche, le formulaire à droite. */
.bp-contact {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: 56px;
	align-items: start;
}
.bp-contact__form {
	background: var(--bp-surface);
	border: 1px solid var(--bp-ligne);
	border-radius: var(--bp-rayon-lg);
	padding: 32px;
	box-shadow: var(--bp-ombre);
}
.bp-contact__form .bp-form { max-width: none; }
.bp-contact__subtitle {
	font-size: 20px;
	margin: 28px 0 12px;
}
.bp-contact__intro .bp-prose + .bp-contact__subtitle,
.bp-contact__form > .bp-contact__subtitle:first-child { margin-top: 0; }

/* ============================================================
   16. WooCommerce
   ============================================================ */

.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	list-style: none;
	border-radius: var(--bp-rayon-sm);
	padding: 15px 18px;
	margin: 0 0 24px;
	font-size: 15px;
	border-left: 4px solid var(--bp-vert);
	background: var(--bp-vert-clair);
	color: var(--bp-vert-fonce);
}
.woocommerce-error {
	border-left-color: var(--bp-erreur);
	background: var(--bp-erreur-clair);
	color: var(--bp-erreur);
}
.woocommerce-message .button,
.woocommerce-info .button { float: right; }

/* Boutons WooCommerce alignés sur ceux du thème. */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 105;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	padding: 15px 26px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	background: var(--bp-vert);
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--bp-transition), box-shadow var(--bp-transition), background-color var(--bp-transition);
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--bp-vert-fonce);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(27, 156, 133, .3);
}

.woocommerce #payment #place_order,
.woocommerce-checkout #place_order {
	background: var(--bp-ambre);
	color: #2B1400;
	width: 100%;
	font-size: 16px;
	padding: 17px 26px;
}
.woocommerce #payment #place_order:hover,
.woocommerce-checkout #place_order:hover {
	background: #F07F14;
	color: #2B1400;
	box-shadow: 0 10px 24px rgba(255, 138, 31, .36);
}

/* Panier et commande */
.woocommerce table.shop_table {
	width: 100%;
	border: 1px solid var(--bp-ligne);
	border-radius: var(--bp-rayon);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--bp-surface);
	margin-bottom: 28px;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 16px 18px;
	text-align: left;
	border-bottom: 1px solid var(--bp-ligne);
	font-size: 15px;
}
.woocommerce table.shop_table th {
	font-family: var(--bp-titre);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bp-texte-faible);
	background: var(--bp-fond);
}
.woocommerce table.shop_table tr:last-child td { border-bottom: none; }
.woocommerce table.shop_table .amount {
	font-family: var(--bp-titre);
	font-weight: 700;
	color: var(--bp-encre);
	font-variant-numeric: tabular-nums;
}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
	font-family: var(--bp-titre);
	font-size: 21px;
	margin: 0 0 18px;
}

.woocommerce-checkout .col2-set {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }

.woocommerce form .form-row {
	display: grid;
	gap: 6px;
	margin: 0 0 16px;
	padding: 0;
}
.woocommerce form .form-row label {
	font-family: var(--bp-titre);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--bp-encre);
}
.woocommerce form .form-row .required { color: var(--bp-ambre-texte); text-decoration: none; }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 100%; float: none; }

.woocommerce-checkout #payment {
	background: var(--bp-fond);
	border: 1px solid var(--bp-ligne);
	border-radius: var(--bp-rayon);
	padding: 24px;
}
.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 20px;
	padding: 0 0 20px;
	border-bottom: 1px dashed var(--bp-ligne);
	display: grid;
	gap: 12px;
}
.woocommerce-checkout #payment ul.payment_methods li {
	background: var(--bp-surface);
	border: 1.5px solid var(--bp-ligne);
	border-radius: var(--bp-rayon-sm);
	padding: 14px 16px;
}
.woocommerce-checkout #payment div.payment_box {
	background: transparent;
	padding: 10px 0 0;
	font-size: 14px;
	color: var(--bp-texte);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* Boutique */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce ul.products li.product {
	background: var(--bp-surface);
	border: 1px solid var(--bp-ligne);
	border-radius: var(--bp-rayon);
	padding: 24px;
	margin: 0;
	width: auto;
	float: none;
	text-align: left;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--bp-titre);
	font-size: 19px;
	padding: 0;
	margin: 0 0 8px;
}
.woocommerce ul.products li.product .price {
	font-family: var(--bp-titre);
	font-weight: 800;
	font-size: 24px;
	color: var(--bp-encre);
}

.woocommerce div.product .product_title {
	font-family: var(--bp-titre);
	font-size: clamp(28px, 3.4vw, 40px);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--bp-titre);
	font-weight: 800;
	font-size: 34px;
	color: var(--bp-encre);
}

.woocommerce .quantity input.qty { width: 84px; text-align: center; }

/* Le mode « service » cache les éléments sans objet pour une formation. */
body.bp-service-checkout .woocommerce-shipping-fields,
body.bp-service-checkout .shipping,
body.bp-service-checkout .woocommerce-shipping-totals { display: none !important; }

/* ============================================================
   17. Pied de page
   ============================================================ */

.bp-footer {
	background: var(--bp-asphalte);
	color: var(--bp-sur-sombre-2);
	padding-block: 62px 34px;
	margin-top: 96px;
}
.bp-footer a { color: var(--bp-sur-sombre-2); text-decoration: none; }
.bp-footer a:hover { color: var(--bp-vert-vif); }

.bp-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 38px;
	border-bottom: 1px solid var(--bp-ligne-sombre);
}
.bp-footer .bp-brand { color: #fff; margin-bottom: 14px; }
.bp-footer .bp-brand:hover { color: #fff; }
.bp-footer__grid p { font-size: 14.5px; max-width: 34ch; }

.bp-footer__title,
.bp-widget__title {
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 105;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 16px;
}

.bp-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.bp-footer__links a { font-size: 14.5px; }

.bp-footer__bottom {
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	font-size: 13.5px;
}
.bp-footer .bp-social__link {
	background: rgba(231, 241, 237, .08);
	color: var(--bp-sur-sombre);
}
.bp-footer .bp-social__link:hover { background: var(--bp-vert); color: #fff; }

.bp-widget { margin-bottom: 26px; }

/* ============================================================
   18. Barre de commande collante
   ============================================================ */

/* Cachée en haut de page, elle apparaît une fois le hero dépassé.
   En mobile, la feuille de style la garde toujours visible. */
.bp-barre {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 70;
	background: #fff;
	border-top: 1px solid var(--bp-ligne);
	transform: translateY(110%);
	transition: transform .32s cubic-bezier(.22, .8, .3, 1);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.bp-barre {
		background: rgba(255, 255, 255, .92);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
	}
}
.bp-barre.is-visible { transform: none; }
.bp-barre__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 68px;
	padding-bottom: env(safe-area-inset-bottom);
}
.bp-barre__offre {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-right: auto;
	min-width: 0;
}
.bp-barre__offre[hidden] { display: none; }
.bp-barre__texte {
	font-size: 14.5px;
	color: var(--bp-texte);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bp-barre__texte b {
	font-family: var(--bp-titre);
	font-weight: 700;
	color: var(--bp-encre);
}
.bp-barre__prix {
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 115;
	font-weight: 800;
	font-size: 22px;
	color: var(--bp-encre);
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.bp-barre .bp-btn { padding: 11px 18px; font-size: 14px; }

/* ============================================================
   19. Apparitions au défilement
   ============================================================ */

/* Fondu + léger décalage vertical. Rien n'est masqué sans la classe
   bp-js (posée en tête de page par un script de deux lignes) : sans
   JavaScript, tout le contenu reste visible. Le script (main.js) pose
   aussi bp-reveal sur le contenu de toutes les sections. */
.bp-js .bp-reveal {
	opacity: 0;
	transform: translateY(var(--bp-apparition-decalage));
	transition: opacity var(--bp-apparition-duree) var(--bp-apparition-courbe), transform var(--bp-apparition-duree) var(--bp-apparition-courbe);
}
.bp-js .bp-reveal.is-visible {
	opacity: 1;
	transform: none;
}
/* Le hero est au-dessus de la ligne de flottaison : il n'attend pas le
   script (c'est souvent le plus grand élément mesuré par PageSpeed). */
.bp-js .bp-hero .bp-reveal { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: no-preference) {
	.bp-hero .bp-reveal { animation: bp-entree-haut var(--bp-apparition-duree) var(--bp-apparition-courbe) .2s both; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.bp-reveal,
	.bp-js .bp-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   22. Bandeau de confiance
   ============================================================ */

.bp-confiance {
	margin-top: -34px;
	position: relative;
	z-index: 2;
}
.bp-confiance__inner {
	background: var(--bp-surface);
	border: 1px solid var(--bp-ligne);
	border-radius: var(--bp-rayon);
	box-shadow: var(--bp-ombre-forte);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.bp-confiance__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 22px;
	font-size: 14.5px;
	color: var(--bp-texte);
}
.bp-confiance__item + .bp-confiance__item { border-left: 1px solid var(--bp-ligne); }
.bp-confiance__item strong {
	display: block;
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 108;
	font-weight: 700;
	font-size: 15px;
	color: var(--bp-encre);
}
.bp-confiance__ico {
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 11px;
	background: var(--bp-vert-clair);
	color: var(--bp-vert-fonce);
	display: grid;
	place-items: center;
}
.bp-confiance__ico svg { width: 19px; height: 19px; }

/* ============================================================
   23. Comparateur de formules et conseil
   ============================================================ */

.bp-compare .bp-card--formule { padding: 34px 32px 30px; }
.bp-compare .bp-card__badge {
	top: -13px;
	left: 28px;
	right: auto;
	background: var(--bp-ambre);
	color: var(--bp-encre);
	font-size: 11.5px;
	letter-spacing: .12em;
	padding: 6px 14px;
}
/* Le prix en très grand : c'est l'information numéro un de la carte. */
.bp-grand-prix strong {
	font-variation-settings: "wdth" 120;
	font-size: 62px;
	letter-spacing: -.04em;
}
.bp-grand-prix strong small { font-size: 26px; font-weight: 700; }
.bp-compare .bp-card__list li { align-items: flex-start; }
.bp-card__list small {
	display: block;
	font-size: 13px;
	color: var(--bp-texte-faible);
	margin-top: 1px;
}

/* Le repère que tout le monde a en tête : le minimum réglementaire. */
.bp-conseil {
	margin-top: 22px;
	background: var(--bp-fond);
	border: 1px solid var(--bp-ligne);
	border-radius: var(--bp-rayon-lg);
	padding: 28px 30px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px 40px;
}
.bp-section--light .bp-conseil { background: var(--bp-fond); }
.bp-conseil__titre {
	grid-column: 1 / -1;
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 112;
	font-weight: 800;
	font-size: 20px;
	color: var(--bp-encre);
	margin: 0;
}
.bp-conseil__col { font-size: 15px; }
.bp-conseil__col b {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 108;
	font-weight: 700;
	font-size: 15.5px;
	color: var(--bp-encre);
	margin-bottom: 6px;
}
.bp-conseil__puce {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: var(--bp-vert);
	flex: none;
}
.bp-conseil__puce--ambre { background: var(--bp-ambre); }
.bp-conseil__verdict {
	grid-column: 1 / -1;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: var(--bp-ambre-clair);
	border-radius: var(--bp-rayon);
	padding: 16px 18px;
	color: var(--bp-ambre-texte);
	font-size: 15px;
	margin: 0;
}
.bp-conseil__verdict strong {
	font-family: var(--bp-titre);
	font-weight: 800;
	color: var(--bp-ambre-texte);
	white-space: nowrap;
}

/* ============================================================
   24. Témoignage en grand
   ============================================================ */

.bp-temoin {
	position: relative;
	border-radius: var(--bp-rayon-lg);
	overflow: hidden;
	color: #fff;
	background-color: var(--bp-vert-fonce);
	background-size: cover;
	background-position: center;
	padding: 72px 56px;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
	gap: 48px;
	align-items: end;
}
.bp-temoin::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(10, 60, 51, .95) 0%, rgba(12, 26, 23, .86) 55%, rgba(12, 26, 23, .55) 100%);
}
.bp-temoin > * { position: relative; z-index: 1; }
.bp-temoin__guillemet {
	display: block;
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 125;
	font-weight: 800;
	font-size: 110px;
	line-height: .6;
	color: var(--bp-vert-vif);
	margin-bottom: 18px;
}
.bp-temoin blockquote {
	margin: 0 0 22px;
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 108;
	font-weight: 600;
	font-size: clamp(24px, 2.8vw, 36px);
	line-height: 1.22;
	letter-spacing: -.02em;
	color: #fff;
	text-wrap: balance;
}
.bp-temoin__auteur {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--bp-sur-sombre-2);
	font-size: 15px;
}
.bp-temoin__auteur b { color: #fff; font-family: var(--bp-titre); font-weight: 700; }
.bp-temoin__pastille {
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: 50%;
	background: var(--bp-vert);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--bp-titre);
	font-weight: 800;
}
.bp-temoin__google {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--bp-rayon);
	padding: 24px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.bp-temoin__label {
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 105;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bp-vert-vif);
	margin: 0 0 8px;
}
.bp-temoin__google p { color: var(--bp-sur-sombre-2); font-size: 14.5px; margin: 0 0 14px; }
.bp-temoin__google p:last-child { margin-bottom: 0; }
.bp-btn--sm { padding: 11px 18px; font-size: 14px; }

/* ============================================================
   25. Questions fréquentes
   ============================================================ */

.bp-faq { max-width: 820px; }
.bp-faq details {
	background: var(--bp-surface);
	border: 1px solid var(--bp-ligne);
	border-radius: var(--bp-rayon);
	margin-bottom: 10px;
	overflow: hidden;
}
.bp-faq summary {
	list-style: none;
	cursor: pointer;
	padding: 20px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-family: var(--bp-titre);
	font-variation-settings: "wdth" 108;
	font-weight: 700;
	font-size: 17px;
	color: var(--bp-encre);
}
.bp-faq summary::-webkit-details-marker { display: none; }
.bp-faq summary::after {
	content: "+";
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--bp-vert-clair);
	color: var(--bp-vert-fonce);
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 19px;
	transition: transform var(--bp-transition), background-color var(--bp-transition), color var(--bp-transition);
}
.bp-faq details[open] summary::after {
	transform: rotate(45deg);
	background: var(--bp-vert);
	color: #fff;
}
.bp-faq__reponse {
	padding: 0 24px 22px;
	font-size: 15.5px;
	max-width: 68ch;
}
.bp-faq__reponse p { margin: 0 0 .8em; }
.bp-faq__reponse p:last-child { margin-bottom: 0; }

/* ============================================================
   26. Rendus alternatifs des shortcodes
   Liste de formations, parcours en prose, citation seule, questions
   à plat. Disponibles pour les pages intérieures ou un autre thème.
   ============================================================ */

.bp-liste { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--bp-ligne); }
.bp-liste li { border-bottom: 1px solid var(--bp-ligne); }
.bp-liste a {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	text-decoration: none;
	color: var(--bp-encre);
	font-family: var(--bp-titre);
	font-weight: 700;
	font-size: 19px;
}
.bp-liste a span { font-family: var(--bp-corps); font-weight: 400; font-size: 15px; color: var(--bp-texte-faible); text-align: right; flex: none; align-self: center; }
.bp-liste a:hover { color: var(--bp-vert-fonce); }

.bp-prose-etapes p { font-size: 17px; margin: 0 0 .9em; }
.bp-prose-etapes strong { font-family: var(--bp-titre); font-weight: 700; color: inherit; }

.bp-citation blockquote {
	margin: 0;
	padding-left: 22px;
	border-left: 3px solid var(--bp-vert);
	font-family: var(--bp-titre);
	font-size: 24px;
	line-height: 1.35;
	color: var(--bp-encre);
}
.bp-citation__signature { margin: 12px 0 0; font-size: 15px; color: var(--bp-texte-faible); }

.bp-questions { margin-top: 4px; }
.bp-question { margin-top: 26px; }
.bp-question h3 { font-size: 20px; margin-bottom: 6px; }
.bp-question p { font-size: 16px; }

/* ============================================================
   28. Charte graphique BestPermis 2025
   Saira (titres bold italic, sous-titres bold, chiffres condensés),
   le parallélogramme incliné comme trait identitaire, le dégradé
   bleu → vert, le logo. Placée avant l'adaptatif pour que le mobile
   garde le dernier mot.
   ============================================================ */

/* --- Typographie --- */
h1, h2, h3, h4, h5, h6,
.bp-section__title, .bp-page__title, .bp-hero__title, .bp-cta__title,
.bp-config__titre, .bp-conseil__titre, .bp-order-card__name {
	font-family: var(--bp-titre);
	font-style: italic;
	font-weight: 700;
	font-variation-settings: normal;
	letter-spacing: -.01em;
	line-height: 1.1;
}
/* Sous-titres : Saira Bold, droit. */
.bp-card__title, .bp-footer__title, .bp-step h3, .bp-question h3, .bp-faq summary,
.bp-temoin__auteur b, .bp-author__name, .bp-confiance__item strong, .bp-offre__nom, .bp-barre__texte b {
	font-family: var(--bp-titre);
	font-style: normal;
	font-weight: 700;
	font-variation-settings: normal;
	letter-spacing: 0;
}
/* Accroches en italique, texte courant droit. */
.bp-section__lede, .bp-hero__lede, .bp-page__lede, .bp-card__desc, .bp-cta__lede { font-style: italic; }
/* Chiffres : Saira Condensed SemiBold. */
.bp-price, .bp-grand-prix strong, .bp-card__price strong, .bp-offre__prix,
.bp-stats__value, .bp-barre__prix, .bp-step__num, .bp-card__from {
	font-family: var(--bp-condense);
	font-style: normal;
	font-weight: 600;
	font-variation-settings: normal;
	letter-spacing: 0;
}
.bp-offre__prix small, .bp-card__price-note { font-family: var(--bp-corps); font-weight: 400; }
.bp-btn, .bp-tab, .bp-seg button, .bp-eyebrow, .bp-card__badge, .bp-offre__tag, .bp-order-card__ribbon {
	font-family: var(--bp-titre);
	font-variation-settings: normal;
}

/* --- Le parallélogramme : étiquettes de section --- */
.bp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0;
	margin: 0 0 16px;
	padding: 6px 22px 6px 16px;
	background: var(--bp-encre);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	font-style: normal;
	letter-spacing: .12em;
	text-transform: uppercase;
	border-radius: 0;
	clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.bp-eyebrow::before { display: none; }
.bp-eyebrow--sombre { background: var(--bp-vert); color: var(--bp-encre); }
.bp-hero .bp-eyebrow--sombre { background: rgba(255, 255, 255, .92); }

/* --- Boutons : coins biseautés à 60° (haut gauche, bas droite) ---
   Le fond (::before) et le contour (::after) sont deux calques découpés :
   le bouton lui-même n'est pas rogné, son anneau de focus reste visible. */
.bp-btn {
	--b: 12px;
	--e: 1.5px;
	position: relative;
	isolation: isolate;
	background: transparent;
	border-color: transparent;
	border-radius: 0;
	padding: 14px 30px;
	font-style: italic;
	font-weight: 700;
	letter-spacing: .01em;
}
.bp-btn::before,
.bp-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	transition: filter var(--bp-transition), background-color var(--bp-transition);
}
.bp-btn::before {
	background: var(--btn-bg);
	clip-path: polygon(calc(var(--b) * var(--bp-pente)) 0, 100% 0, 100% calc(100% - var(--b)), calc(100% - var(--b) * var(--bp-pente)) 100%, 0 100%, 0 var(--b));
}
.bp-btn::after {
	background: var(--btn-bd, transparent);
	clip-path: polygon(evenodd,
		calc(var(--b) * var(--bp-pente)) 0, 100% 0, 100% calc(100% - var(--b)), calc(100% - var(--b) * var(--bp-pente)) 100%, 0 100%, 0 var(--b), calc(var(--b) * var(--bp-pente)) 0,
		calc((var(--b) + var(--e)) * var(--bp-pente)) var(--e), calc(100% - var(--e)) var(--e), calc(100% - var(--e)) calc(100% - var(--b) - var(--e) * .268), calc(100% - (var(--b) + var(--e)) * var(--bp-pente)) calc(100% - var(--e)), var(--e) calc(100% - var(--e)), var(--e) calc(var(--b) + var(--e) * .268), calc((var(--b) + var(--e)) * var(--bp-pente)) var(--e));
}
.bp-btn:focus-visible { border-radius: 0; }
.bp-btn:hover { transform: none; box-shadow: none; }
.bp-btn:hover::before { filter: brightness(1.07); }
.bp-btn--primary { --btn-bg: var(--bp-encre); --btn-fg: #fff; }
.bp-btn--vert, .bp-btn--ambre { --btn-bg: var(--bp-vert); --btn-fg: var(--bp-encre); }
.bp-btn--vert:hover, .bp-btn--ambre:hover { box-shadow: none; }
.bp-btn--light { --btn-bg: #fff; --btn-fg: var(--bp-encre); }
.bp-btn--ghost { --btn-bg: transparent; --btn-fg: var(--bp-encre); --btn-bd: var(--bp-encre); border-color: transparent; }
.bp-btn--ghost:hover { --btn-bg: rgba(26, 89, 126, .06); border-color: transparent; box-shadow: none; }
.bp-btn--ghost-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .75); border-color: transparent; backdrop-filter: none; }
.bp-btn--ghost-light:hover { --btn-bg: rgba(255, 255, 255, .12); }
.bp-btn--bloc { padding-inline: 22px; }

/* --- Étiquettes --- */
.bp-card__badge, .bp-offre__tag, .bp-order-card__ribbon, .bp-formule__badge {
	border-radius: 0;
	background: var(--bp-vert);
	color: var(--bp-encre);
	font-style: italic;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	font-size: 12.5px;
	padding: 4px 16px 4px 12px;
	clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.bp-compare .bp-card__badge { background: var(--bp-vert); color: var(--bp-encre); }

/* --- Onglets et sélecteur --- */
.bp-tabs { background: none; border: none; border-radius: 0; padding: 0; gap: 6px; }
.bp-tab {
	border-radius: 0;
	clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
	padding: 10px 26px;
	background: var(--bp-fond);
	color: var(--bp-encre);
	font-style: italic;
}
.bp-tab[aria-selected="true"] { background: var(--bp-encre); color: #fff; }
.bp-tab:not([aria-selected="true"]):hover { background: var(--bp-vert-clair); color: var(--bp-encre); }
.bp-seg { border-radius: 0; padding: 0; gap: 6px; background: none; border: none; }
.bp-seg button {
	border-radius: 0;
	clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
	background: var(--bp-fond);
	font-style: italic;
}
.bp-seg button[aria-pressed="true"] { background: var(--bp-encre); color: #fff; box-shadow: none; }

/* --- Hero : dégradé de la charte, filet du monogramme --- */
.bp-hero {
	background-color: #1A597E;
	background-image: var(--bp-degrade);
	background-size: cover;
	background-position: center;
	border-radius: 0;
}
/* L'image en ligne (le filet) se pose PAR-DESSUS le dégradé. */
.bp-hero[style] { background-image: var(--bp-hero-lignes, none), var(--bp-degrade); }
.bp-hero::before { display: none; }
.bp-hero::after { display: none; }
.bp-hero__inner { padding-block: 84px 112px; }
.bp-hero__lede { color: #fff; opacity: .92; }
.bp-hero__proofs { color: #fff; }
.bp-coche--sombre { background: rgba(255, 255, 255, .18); color: #fff; }

/* --- Configurateur --- */
.bp-config { border-radius: var(--bp-rayon-lg); box-shadow: 0 30px 70px rgba(12, 45, 66, .32); }
.bp-hero__media .bp-order-card, .bp-order-card { border-radius: var(--bp-rayon-lg); }
.bp-offre { border-radius: var(--bp-rayon); }
.bp-offre--vedette { background: var(--bp-vert-clair); border-color: var(--bp-vert); }

/* --- Cadrans --- */
.bp-stats__item { border-radius: var(--bp-rayon); }

/* --- Cartes --- */
.bp-card, .bp-card--formation, .bp-card--formule, .bp-card--atout, .bp-card--temoignage { border-radius: var(--bp-rayon-lg); }
.bp-card--formation::before { height: 5px; }
.bp-card__icon { border-radius: var(--bp-rayon); }
.bp-compare .bp-card--formule.is-featured { outline-color: var(--bp-vert); }
.bp-conseil { border-radius: var(--bp-rayon-lg); }
.bp-conseil__verdict { border-radius: var(--bp-rayon); }

/* --- Section sombre : bleu de la charte, motif étoiles (conseils) --- */
.bp-section--dark::before {
	background-image: url( "../img/charte/etoiles.svg" );
	background-size: 240px 240px;
	background-repeat: repeat;
	opacity: 1;
}
.bp-step__num { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); color: var(--bp-vert); }
.bp-step:first-child .bp-step__num { background: var(--bp-vert); border-color: var(--bp-vert); color: var(--bp-encre); }

/* --- Témoignage, bandeau final : voiles bleus --- */
.bp-temoin { border-radius: var(--bp-rayon-lg); }
.bp-temoin::before { background: linear-gradient(100deg, rgba(26, 89, 126, .96) 0%, rgba(26, 89, 126, .86) 55%, rgba(26, 89, 126, .55) 100%); }
.bp-temoin__guillemet { font-variation-settings: normal; }
.bp-cta__inner { border-radius: var(--bp-rayon-lg); }
.bp-cta__inner::before { background: linear-gradient(118deg, rgba(26, 89, 126, .96) 0%, rgba(36, 133, 143, .92) 55%, rgba(61, 216, 151, .82) 100%); }

/* --- En-tête : le logo --- */
.bp-brand::before { display: none; }
.bp-brand--logo { display: flex; align-items: center; gap: 10px; }
.bp-brand__mono { height: 40px; width: auto; display: block; transition: height var(--bp-transition); }
.bp-brand__mot { height: 20px; width: auto; display: block; transition: height var(--bp-transition); }
.is-stuck .bp-brand__mono { height: 32px; }
.is-stuck .bp-brand__mot { height: 16px; }
.bp-menu a { border-radius: 0; font-weight: 500; }
.bp-menu a:hover, .bp-menu .current-menu-item > a, .bp-menu .current_page_item > a {
	background: none;
	color: var(--bp-encre);
	box-shadow: inset 0 -2px 0 var(--bp-vert);
}
.bp-header__tel { font-variation-settings: normal; }
.bp-burger { border-radius: 0; }

/* --- Pied de page --- */
.bp-footer__lockup { display: block; height: 118px; width: auto; margin-bottom: 14px; }
.bp-footer__slogan { font-style: italic; color: #fff; font-size: 15px; margin: 0 0 12px; }
.bp-footer .bp-social__link { border-radius: 4px; }

/* --- Divers --- */
.bp-faq details, .bp-faq summary::after, .bp-instalments, .bp-secure-note, .bp-page__header, .bp-bande__photo { border-radius: var(--bp-rayon); }
.bp-faq summary::after { border-radius: 50%; }
.bp-page__header { border-radius: 0; }
.bp-page__header::before { background: linear-gradient(100deg, rgba(26, 89, 126, .96) 0%, rgba(26, 89, 126, .84) 50%, rgba(36, 133, 143, .62) 100%); }
.bp-confiance__inner { border-radius: var(--bp-rayon-lg); }
.bp-confiance__ico { border-radius: var(--bp-rayon); }
.woocommerce .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #payment #place_order, .woocommerce-checkout #place_order {
	border-radius: 0;
	font-family: var(--bp-titre);
	font-style: italic;
	font-variation-settings: normal;
	clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.woocommerce #payment #place_order, .woocommerce-checkout #place_order { background: var(--bp-vert); color: var(--bp-encre); }
.woocommerce #payment #place_order:hover, .woocommerce-checkout #place_order:hover { background: #33C889; color: var(--bp-encre); }

/* ============================================================
   29. Toutes les formules par groupe (packs), hors forfait,
       documents à fournir, dépôt du dossier après paiement
   ============================================================ */
.bp-section--formules { padding-top: 56px; }
.bp-tabs-bar { align-items: center; }
.bp-tabs--grand .bp-tab { padding: 14px 34px; font-size: 17px; }
.bp-tabs--grand .bp-tab[aria-selected="true"] { background: var(--bp-vert); color: var(--bp-encre); }

.bp-groupes { display: grid; gap: 44px; }
.bp-groupe__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 18px;
	margin: 0 0 22px;
	padding-left: 16px;
	border-left: 4px solid var(--bp-vert);
}
.bp-groupe__titre { margin: 0; font-size: 24px; font-style: normal; }
.bp-groupe__note { margin: 0; color: var(--bp-texte); font-size: 15px; font-style: italic; }

.bp-packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.bp-packs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bp-packs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.bp-packs--1 { grid-template-columns: minmax(0, 1fr); max-width: 380px; }
.bp-pack {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 26px 22px 20px;
	background: var(--bp-surface);
	border: 1.5px solid var(--bp-ligne);
	border-radius: var(--bp-rayon-lg);
	transition: transform var(--bp-transition), box-shadow var(--bp-transition), border-color var(--bp-transition);
}
.bp-pack:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(26, 89, 126, .14); border-color: var(--bp-encre); }
.bp-pack.is-featured { border-color: var(--bp-vert); box-shadow: 0 0 0 3px rgba(61, 216, 151, .25); }
.bp-pack__badge {
	position: absolute;
	top: -13px;
	left: 18px;
	background: var(--bp-vert);
	color: var(--bp-encre);
	font-family: var(--bp-titre);
	font-style: italic;
	font-weight: 700;
	font-size: 12.5px;
	line-height: 1.4;
	padding: 4px 16px 4px 12px;
	clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
	white-space: nowrap;
}
.bp-pack__nom { margin: 2px 0 0; font-size: 20px; font-style: normal; line-height: 1.2; }
.bp-pack__heures { margin: 0; line-height: 1.05; color: var(--bp-encre); }
.bp-pack__heures strong { font-family: var(--bp-condense); font-weight: 600; font-size: 40px; letter-spacing: 0; }
.bp-pack__heures span { display: block; font-size: 13.5px; color: var(--bp-texte); margin-top: 2px; }
.bp-pack__resume { margin: 0 0 10px; font-size: 14.5px; font-style: italic; color: var(--bp-texte); }
/* Le bloc prix + 4× + détail + bouton est poussé en bas : toute la rangée s'aligne. */
.bp-pack__prix { margin: auto 0 0; padding-top: 12px; border-top: 1px dashed var(--bp-ligne); display: flex; align-items: baseline; gap: 6px; }
.bp-pack__prix strong { font-family: var(--bp-condense); font-weight: 600; font-size: 34px; color: var(--bp-encre); line-height: 1; }
.bp-pack__prix small { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--bp-texte-faible); }
.bp-pack__prix--devis strong { font-size: 20px; font-family: var(--bp-titre); font-style: italic; }
.bp-pack__4x { margin: -4px 0 0; font-size: 13.5px; font-weight: 600; color: var(--bp-encre); }
.bp-pack__detail { margin: 2px 0 0; font-size: 14px; }
.bp-pack__detail summary { cursor: pointer; color: var(--bp-encre); font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
.bp-pack__detail summary::-webkit-details-marker { display: none; }
.bp-pack__detail summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bp-fond); font-weight: 700; flex: none; }
.bp-pack__detail[open] summary::before { content: "−"; }
.bp-pack__detail ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; color: var(--bp-texte); }
.bp-pack__detail li { display: flex; gap: 8px; align-items: flex-start; }
.bp-pack__detail li .bp-coche { margin-top: 1px; }
.bp-pack__detail li small { display: block; color: var(--bp-texte-faible); font-size: 12.5px; }
.bp-pack__cta { margin: 0; padding-top: 12px; }
.bp-confiance--suite { margin-top: 0; padding-top: 40px; }

/* Tableaux hors forfait */
.bp-tarifs-tables { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.bp-tarifs-table { background: var(--bp-surface); border: 1.5px solid var(--bp-ligne); border-radius: var(--bp-rayon-lg); padding: 20px 22px; }
.bp-tarifs-table__titre { margin: 0 0 12px; font-size: 18px; font-style: normal; }
.bp-tarifs-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.bp-tarifs-table th { text-align: left; font-weight: 500; color: var(--bp-texte); padding: 9px 12px 9px 0; border-bottom: 1px solid var(--bp-ligne); }
.bp-tarifs-table td { text-align: right; white-space: nowrap; font-family: var(--bp-condense); font-weight: 600; font-size: 17px; color: var(--bp-encre); padding: 9px 0; border-bottom: 1px solid var(--bp-ligne); }
.bp-tarifs-table tr:last-child th, .bp-tarifs-table tr:last-child td { border-bottom: none; }

/* Documents à fournir */
.bp-documents { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bp-documents li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 14px 16px; background: var(--bp-surface); border: 1.5px solid var(--bp-ligne); border-radius: var(--bp-rayon); }
.bp-documents__num { font-family: var(--bp-condense); font-weight: 600; color: var(--bp-vert); font-size: 20px; line-height: 1.1; }
.bp-documents li strong { display: block; color: var(--bp-encre); }
.bp-documents li span span { color: var(--bp-texte); font-size: 14.5px; }
.bp-documents__tag { display: inline-block; margin-left: 8px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--bp-texte-faible); }

/* Dépôt des documents après paiement */
.bp-dossier { margin: 32px 0; padding: 28px; background: var(--bp-surface); border: 2px solid var(--bp-vert); border-radius: var(--bp-rayon-lg); }
.bp-dossier__head h2 { margin: 0 0 8px; font-size: 26px; }
.bp-dossier__head p { margin: 0 0 18px; color: var(--bp-texte); }
.bp-dossier__notice { padding: 12px 16px; border-radius: var(--bp-rayon); margin: 0 0 16px; font-weight: 600; }
.bp-dossier__notice--ok { background: var(--bp-vert-clair); color: #146B4A; }
.bp-dossier__notice--erreur { background: #FDECEC; color: #9B2C2C; }
.bp-dossier__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bp-dossier__item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 8px 20px; align-items: center; padding: 14px 16px; border: 1.5px solid var(--bp-ligne); border-radius: var(--bp-rayon); }
.bp-dossier__item.is-recu { border-color: var(--bp-vert); background: var(--bp-vert-clair); }
.bp-dossier__item strong { display: block; color: var(--bp-encre); }
.bp-dossier__aide { margin: 2px 0 0; font-size: 13.5px; color: var(--bp-texte); }
.bp-dossier__etat { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 700; color: #146B4A; }
.bp-dossier__requis { display: inline-block; margin-left: 8px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--bp-texte-faible); }
.bp-dossier input[type="file"] { width: 100%; font-size: 13.5px; }
.bp-dossier__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 18px 0 0; }
.bp-dossier__note { font-size: 13px; color: var(--bp-texte-faible); }

/* ============================================================
   30. Tunnel de commande
   ============================================================ */
/* WooCommerce impose img { height: auto } sur ses pages : le logo s'étalait. */
.woocommerce-page .bp-brand__mono, .woocommerce .bp-brand__mono { height: 40px; width: auto; }
.woocommerce-page .bp-brand__mot, .woocommerce .bp-brand__mot { height: 20px; width: auto; }
.woocommerce-page .is-stuck .bp-brand__mono, .woocommerce .is-stuck .bp-brand__mono { height: 32px; }
.woocommerce-page .is-stuck .bp-brand__mot, .woocommerce .is-stuck .bp-brand__mot { height: 16px; }
.woocommerce-page .bp-footer__lockup, .woocommerce .bp-footer__lockup { height: 118px; width: auto; }

/* Messages : l'icône ne chevauche plus le texte. */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	padding-left: 48px;
	border-radius: var(--bp-rayon);
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: inherit;
}
.woocommerce-message .button, .woocommerce-info .button { float: none; margin-left: auto; }
.woocommerce-error li { list-style: none; }
/* « … a été ajouté à votre panier » n'apporte rien sur la page de paiement. */
body.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message { display: none; }
.woocommerce-form-coupon-toggle .woocommerce-info { background: var(--bp-surface); border-left-color: var(--bp-ligne); color: var(--bp-texte); margin-bottom: 28px; }

/* Deux colonnes : le formulaire à gauche, le récapitulatif collant à droite. */
.bp-commerce { padding-block: 44px 72px; }
form.woocommerce-checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
	grid-template-rows: auto 1fr;
	gap: 20px 56px;
	align-items: start;
}
form.woocommerce-checkout .col2-set { grid-column: 1; grid-row: 1 / span 2; }
form.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0; }
form.woocommerce-checkout #order_review {
	grid-column: 2;
	grid-row: 2;
	position: sticky;
	top: 90px;
	background: var(--bp-surface);
	border: 1.5px solid var(--bp-ligne);
	border-radius: var(--bp-rayon-lg);
	padding: 22px;
}
form.woocommerce-checkout .woocommerce-NoticeGroup { grid-column: 1 / -1; }
.woocommerce-checkout .col2-set .col-2 { margin-top: 12px; }
.woocommerce-checkout .col2-set h3 { padding-top: 6px; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce form .form-row .select2-container .select2-selection {
	border: 1.5px solid var(--bp-ligne);
	border-radius: var(--bp-rayon-sm);
	padding: 12px 14px;
	font: inherit;
	color: var(--bp-encre);
	background: var(--bp-surface);
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { outline: 2px solid var(--bp-vert); outline-offset: 1px; border-color: var(--bp-vert); }
.woocommerce form .form-row textarea { min-height: 96px; }
.woocommerce-checkout #payment { background: var(--bp-fond); margin-top: 16px; }
.woocommerce-checkout #payment .place-order { padding: 0; }
.woocommerce-checkout #payment .place-order #place_order { float: none; display: block; width: 100%; padding: 16px 20px; font-size: 16px; }
/* WooCommerce donne le focus au message au chargement : pas de halo vert autour. */
.woocommerce-error:focus, .woocommerce-message:focus, .woocommerce-info:focus { outline: none; }
.woocommerce-checkout #payment ul.payment_methods li > .woocommerce-info { margin: 0; }
.woocommerce-checkout .woocommerce-privacy-policy-text { font-size: 12.5px; color: var(--bp-texte-faible); }
.woocommerce-checkout table.shop_table td.product-name { font-weight: 600; color: var(--bp-encre); }
.woocommerce-checkout .bp-retirer { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 500; color: var(--bp-texte-faible); text-decoration: underline; }
.woocommerce-checkout .bp-retirer:hover { color: #9B2C2C; }
/* Une formule se commande à l'unité : la quantité n'apporte rien, et le montant reste sur une ligne. */
.woocommerce-checkout table.shop_table .product-quantity { display: none; }
.woocommerce-checkout table.shop_table td.product-total, .woocommerce-checkout table.shop_table .amount { white-space: nowrap; }
.woocommerce-checkout table.shop_table td.product-name { padding-right: 12px; }
.woocommerce-order { display: grid; gap: 28px; }
.woocommerce-order .woocommerce-thankyou-order-received { font-family: var(--bp-titre); font-style: italic; font-weight: 700; font-size: 24px; color: var(--bp-encre); }
.woocommerce-order ul.order_details { display: flex; flex-wrap: wrap; gap: 10px 28px; list-style: none; margin: 0; padding: 16px 20px; background: var(--bp-fond); border-radius: var(--bp-rayon); }
.woocommerce-order ul.order_details li { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--bp-texte-faible); }
.woocommerce-order ul.order_details li strong { display: block; font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--bp-encre); }

/* ============================================================
   31. Mouvement : bouton WhatsApp
   (Le titre du hero n'a plus d'animation d'entrée : c'est le LCP,
   il doit s'afficher d'emblée. Voir § 38.)
   ============================================================ */
@keyframes bp-entree-gauche { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes bp-entree-haut { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes bp-pop { from { opacity: 0; transform: rotate(-8deg) scale(.3); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }

.bp-whatsapp {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px 12px 14px;
	background: #25D366;
	color: #fff;
	font-family: var(--bp-titre);
	font-style: italic;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	border-radius: 999px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
	transition: transform var(--bp-transition), box-shadow var(--bp-transition), bottom .3s ease;
}
.bp-whatsapp:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0, 0, 0, .24); }
.bp-whatsapp svg { flex: none; }
body.bp-barre-visible .bp-whatsapp { bottom: 94px; }

/* ============================================================
   32. Pages documentaires : règlement intérieur, matrice GDE
   ============================================================ */
.bp-prose .bp-lead { font-size: 19px; font-style: italic; color: var(--bp-encre); }
.bp-prose h2 { font-size: 22px; margin-top: 36px; }
.bp-mentions { margin: 48px 0 0; padding: 22px 24px; background: var(--bp-fond); border: 1.5px solid var(--bp-ligne); border-radius: var(--bp-rayon-lg); font-size: 14px; }
.bp-mentions__titre { margin: 0 0 12px; font-family: var(--bp-titre); font-weight: 700; color: var(--bp-encre); }
.bp-mentions dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 24px; }
.bp-mentions dl div { display: grid; grid-template-columns: 150px 1fr; gap: 8px; }
.bp-mentions dt { color: var(--bp-texte-faible); }
.bp-mentions dd { margin: 0; color: var(--bp-encre); font-weight: 600; }
.bp-mentions__ref { margin: 14px 0 0; color: var(--bp-texte-faible); font-size: 12.5px; }

/* La matrice sort de la colonne de lecture : cinq niveaux sur trois colonnes ont besoin de place. */
.bp-gde { display: grid; gap: 14px; margin: 32px 0; --gde: var(--bp-encre); }
.bp-prose .bp-gde { width: min(1240px, calc(100vw - 2 * var(--bp-gouttiere) - 16px)); position: relative; left: 50%; transform: translateX(-50%); }
.bp-gde__entete { display: grid; grid-template-columns: 220px repeat(3, 1fr); gap: 14px; padding: 0 18px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bp-texte-faible); }
.bp-gde__niveau { display: grid; grid-template-columns: 220px 1fr; gap: 0; background: var(--bp-surface); border: 1.5px solid var(--bp-ligne); border-left: 6px solid var(--gde); border-radius: var(--bp-rayon-lg); overflow: hidden; }
.bp-gde__niveau--5 { --gde: #1A597E; }
.bp-gde__niveau--4 { --gde: #F0A03A; }
.bp-gde__niveau--3 { --gde: #7DC24B; }
.bp-gde__niveau--2 { --gde: #E2477A; }
.bp-gde__niveau--1 { --gde: #3DD897; }
.bp-gde__tete { display: flex; flex-direction: column; gap: 6px; padding: 22px 18px; background: color-mix(in srgb, var(--gde) 10%, #fff); }
.bp-gde__num { font-family: var(--bp-condense); font-weight: 600; font-size: 64px; line-height: .9; color: var(--gde); }
.bp-gde__tete h2 { margin: 0; font-size: 18px; line-height: 1.25; }
.bp-gde__cols { display: grid; grid-template-columns: repeat(3, 1fr); }
.bp-gde__cols > div { padding: 18px; font-size: 14px; border-left: 1px solid var(--bp-ligne); }
.bp-gde__cols h3 { margin: 0 0 8px; font-size: 14px; font-style: normal; color: var(--gde); }
.bp-gde__cols p { margin: 0 0 8px; color: var(--bp-texte); }
.bp-gde__cols ul { margin: 0; padding-left: 18px; color: var(--bp-texte); display: grid; gap: 3px; }
.bp-prose .bp-gde ul li { margin: 0; }

/* ============================================================
   33. Aides au financement, règlement partiel
   ============================================================ */
.bp-financements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.bp-financement {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 22px;
	align-items: center;
	padding: 24px;
	background: var(--bp-surface);
	border: 1.5px solid var(--bp-ligne);
	border-radius: var(--bp-rayon-lg);
	text-decoration: none;
	color: inherit;
	transition: transform var(--bp-transition), box-shadow var(--bp-transition), border-color var(--bp-transition);
}
.bp-financement:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(26, 89, 126, .14); border-color: var(--bp-encre); }
.bp-financement__logo { display: grid; place-items: center; min-height: 96px; padding: 12px; background: var(--bp-fond); border-radius: var(--bp-rayon); }
.bp-financement__logo img { max-width: 126px; max-height: 80px; width: auto; height: auto; }
.bp-financement__badge { font-family: var(--bp-titre); font-weight: 700; font-size: 15px; line-height: 1.2; text-align: center; color: var(--bp-encre); padding: 10px 12px; border: 2px solid var(--bp-encre); border-radius: 0; }
.bp-financement--cpf .bp-financement__badge { border-color: #000091; color: #000091; }
.bp-financement--labaz .bp-financement__badge { border-color: #E1000F; color: #E1000F; }
.bp-financement__titre { display: block; font-family: var(--bp-titre); font-weight: 700; font-size: 19px; color: var(--bp-encre); margin-bottom: 6px; }
.bp-financement__texte { display: block; font-size: 14.5px; color: var(--bp-texte); margin-bottom: 10px; }
.bp-financement__lien { display: inline-block; font-family: var(--bp-titre); font-style: italic; font-weight: 700; font-size: 14px; color: var(--bp-encre); box-shadow: inset 0 -2px 0 var(--bp-vert); }

/* Choix du montant réglé au paiement */
.woocommerce form .form-row.bp-reglement { padding: 18px 18px 8px; background: var(--bp-vert-clair); border: 1.5px solid var(--bp-vert); border-radius: var(--bp-rayon); }
.woocommerce form .form-row.bp-reglement > label:first-child { font-size: 16px; margin-bottom: 8px; }
.woocommerce form .form-row.bp-reglement .woocommerce-input-wrapper { display: grid; gap: 8px; }
.woocommerce form .form-row.bp-reglement label.radio { display: flex; align-items: center; gap: 10px; font-family: var(--bp-corps); font-weight: 500; font-size: 15px; color: var(--bp-encre); cursor: pointer; }
.woocommerce form .form-row.bp-reglement input.input-radio { width: 18px; height: 18px; accent-color: var(--bp-encre); margin: 0; }
.woocommerce form .form-row.bp-montant { margin-top: -6px; padding: 0 18px 18px; background: var(--bp-vert-clair); border: 1.5px solid var(--bp-vert); border-top: none; border-radius: 0 0 var(--bp-rayon) var(--bp-rayon); }
.bp-reste-note { margin: 18px 0 0; padding: 14px 16px; background: var(--bp-vert-clair); border-left: 4px solid var(--bp-vert); border-radius: var(--bp-rayon-sm); color: var(--bp-encre); font-weight: 600; }

/* ============================================================
   34. Document officiel (PDF) en tête de page
   ============================================================ */
.bp-document {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 18px 22px;
	align-items: center;
	margin: 40px 0 0;
	padding: 20px 24px;
	background: var(--bp-surface);
	border: 1.5px solid var(--bp-ligne);
	border-left: 6px solid var(--bp-vert);
	border-radius: var(--bp-rayon-lg);
	box-shadow: 0 10px 30px rgba(26, 89, 126, .08);
}
.bp-document__icone {
	display: grid;
	place-items: center;
	width: 56px;
	height: 68px;
	background: var(--bp-encre);
	color: #fff;
	font-family: var(--bp-condense);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: .06em;
	clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.bp-document__titre { margin: 0 0 4px; font-family: var(--bp-titre); font-weight: 700; font-size: 18px; line-height: 1.25; color: var(--bp-encre); }
.bp-document__meta { margin: 0; font-size: 13.5px; color: var(--bp-texte-faible); }
.bp-document__actions { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.bp-document__actions .bp-btn { padding: 12px 24px; font-size: 14.5px; }

.bp-document-apercu { margin: 14px 0 0; }
.bp-document-apercu summary {
	cursor: pointer;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	font-family: var(--bp-titre);
	font-weight: 700;
	font-size: 14px;
	color: var(--bp-encre);
}
.bp-document-apercu summary::-webkit-details-marker { display: none; }
.bp-document-apercu summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bp-vert-clair); font-weight: 700; }
.bp-document-apercu[open] summary::before { content: "−"; }
.bp-document-apercu iframe { display: block; width: 100%; height: min(80vh, 900px); margin-top: 10px; border: 1.5px solid var(--bp-ligne); border-radius: var(--bp-rayon); background: var(--bp-fond); }
.bp-document-apercu__repli { margin: 8px 0 0; font-size: 13px; color: var(--bp-texte-faible); }

/* ============================================================
   35. Nom commercial officiel, à côté de la marque
   ============================================================ */
.bp-header__brand { flex: none; margin-right: 22px; }
.bp-brand__textes { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.bp-brand__commercial {
	font-family: var(--bp-titre);
	font-style: normal;
	font-weight: 600;
	font-size: 10.5px;
	line-height: 1.15;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--bp-encre);
	white-space: nowrap;
}
.bp-footer__commercial { margin: 0 0 6px; font-family: var(--bp-titre); font-weight: 700; font-size: 16px; color: #fff; }
.bp-coords__item--nom strong { font-family: var(--bp-titre); font-size: 18px; color: var(--bp-encre); }

/* ============================================================
   36. Pictogrammes auto / moto, panneaux, parcours, équipement,
       label, réseaux, animation d'entrée
   ============================================================ */
.bp-picto { display: inline-block; width: 44px; height: auto; flex: none; vertical-align: middle; }
.bp-tab .bp-picto, .bp-seg button .bp-picto { width: 38px; margin-right: 10px; }
.bp-tabs--grand .bp-tab { display: inline-flex; align-items: center; }
.bp-seg button { display: inline-flex; align-items: center; justify-content: center; }

/* Le panneau affiché : on sait toujours si l'on regarde l'auto ou la moto. */
.bp-panneau__titre {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 28px;
	padding: 12px 18px;
	font-size: 20px;
	font-style: italic;
	color: var(--bp-encre);
	background: var(--bp-surface);
	border: 1.5px solid var(--bp-ligne);
	border-left: 6px solid var(--bp-encre);
	border-radius: var(--bp-rayon);
}
.bp-panneau__titre--moto { border-left-color: var(--bp-vert); }
.bp-panneau__picto { display: grid; place-items: center; width: 74px; height: 46px; border-radius: var(--bp-rayon); background: var(--bp-encre); color: #fff; }
.bp-panneau__titre--moto .bp-panneau__picto { background: var(--bp-vert); color: var(--bp-encre); }
.bp-panneau__picto .bp-picto { width: 50px; }

@media (prefers-reduced-motion: no-preference) {
	[data-bp-panel]:not([hidden]) { animation: bp-panneau .45s cubic-bezier(.22, .8, .3, 1) both; }
}
@keyframes bp-panneau { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Aides : trois cartes, logo au-dessus. */
.bp-financements { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bp-financement { grid-template-columns: 1fr; align-items: start; align-content: start; }
.bp-financement__logo { min-height: 104px; }
.bp-financement__logo img { max-width: 170px; max-height: 76px; }
.bp-financement--francetravail .bp-financement__badge { border-color: #000091; color: #000091; }

/* Choix auto / moto */
.bp-permis__choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 0 0 36px; }
.bp-permis__carte {
	display: grid;
	justify-items: center;
	gap: 8px;
	padding: 34px 24px 28px;
	background: var(--bp-surface);
	border: 2px solid var(--bp-ligne);
	border-radius: var(--bp-rayon-lg);
	color: var(--bp-encre);
	font: inherit;
	cursor: pointer;
	transition: transform var(--bp-transition), box-shadow var(--bp-transition), border-color var(--bp-transition), background-color var(--bp-transition);
}
.bp-permis__carte .bp-picto { width: 128px; margin-bottom: 6px; transition: transform .5s cubic-bezier(.22, .8, .3, 1); }
.bp-permis__carte:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(26, 89, 126, .14); border-color: var(--bp-encre); }
.bp-permis__carte:hover .bp-picto { transform: translateX(10px); }
.bp-permis__carte[aria-pressed="true"] { background: var(--bp-encre); border-color: var(--bp-encre); color: #fff; box-shadow: 0 18px 40px rgba(26, 89, 126, .22); }
.bp-permis__carte--moto[aria-pressed="true"] { background: var(--bp-vert); border-color: var(--bp-vert); color: var(--bp-encre); }
.bp-permis__nom { font-family: var(--bp-titre); font-style: italic; font-weight: 700; font-size: 26px; }
.bp-permis__detail { font-size: 14px; opacity: .85; text-align: center; }

.bp-permis__tete { display: flex; align-items: center; gap: 18px; margin: 0 0 26px; }
.bp-permis__badge { display: grid; place-items: center; width: 96px; height: 60px; flex: none; border-radius: var(--bp-rayon); background: var(--bp-encre); color: #fff; }
[data-bp-panel="moto"] .bp-permis__badge { background: var(--bp-vert); color: var(--bp-encre); }
.bp-permis__badge .bp-picto { width: 64px; }
.bp-permis__titre { margin: 0 0 4px; font-size: clamp(22px, 2.4vw, 30px); }
.bp-permis__accroche { margin: 0; color: var(--bp-texte); font-style: italic; }
.bp-permis__formules { margin: 44px 0 22px; font-size: 24px; }

/* Étapes avant l'examen */
.bp-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: etape; }
.bp-etape { position: relative; padding: 22px 20px 20px; background: var(--bp-surface); border: 1.5px solid var(--bp-ligne); border-top: 5px solid var(--bp-encre); border-radius: var(--bp-rayon-lg); }
[data-bp-panel="moto"] .bp-etape { border-top-color: var(--bp-vert); }
.bp-etape__num { display: block; font-family: var(--bp-condense); font-weight: 600; font-size: 38px; line-height: 1; color: var(--bp-vert); margin-bottom: 8px; }
.bp-etape h3 { margin: 0 0 6px; font-size: 18px; font-style: normal; }
.bp-etape p { margin: 0; font-size: 14.5px; color: var(--bp-texte); }

/* Plateau et équipement moto */
.bp-plateau { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; margin: 30px 0 0; padding: 26px; background: var(--bp-encre); color: #fff; border-radius: var(--bp-rayon-lg); }
.bp-plateau:not(:has(video)) { grid-template-columns: 1fr; }
.bp-plateau h3 { margin: 0 0 8px; color: #fff; font-size: 22px; }
.bp-plateau p { margin: 0 0 14px; color: var(--bp-sur-sombre-2); }
.bp-plateau p:last-child { margin-bottom: 0; }
.bp-plateau .bp-btn--ghost { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .75); }
.bp-plateau__video { width: 100%; border-radius: var(--bp-rayon); background: #000; }
.bp-equipement { margin: 30px 0 0; }
.bp-equipement h3 { margin: 0 0 16px; font-size: 22px; }
.bp-equipement__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.bp-equipement__liste li { display: grid; justify-items: center; gap: 6px; padding: 20px 14px; text-align: center; background: var(--bp-surface); border: 1.5px solid var(--bp-ligne); border-radius: var(--bp-rayon-lg); }
.bp-equipement__picto { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--bp-vert-clair); color: var(--bp-encre); margin-bottom: 4px; }
.bp-equipement__liste strong { color: var(--bp-encre); font-family: var(--bp-titre); font-size: 15.5px; line-height: 1.25; }
.bp-equipement__liste span:last-child { font-size: 13.5px; color: var(--bp-texte); }
.bp-equipement__note { margin: 14px 0 0; font-size: 14px; font-style: italic; color: var(--bp-texte); }

/* Label qualité */
.bp-label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; padding: 30px; background: var(--bp-surface); border: 1.5px solid var(--bp-ligne); border-left: 6px solid var(--bp-vert); border-radius: var(--bp-rayon-lg); }
.bp-label__marque img { width: 140px; height: auto; }
.bp-label__sceau { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--bp-vert-clair); color: var(--bp-encre); }
.bp-label__titre { margin: 0 0 10px; font-size: clamp(20px, 2.2vw, 28px); }
.bp-label__corps p { margin: 0 0 12px; color: var(--bp-texte); }
.bp-label__points { margin: 0 0 14px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.bp-label__points li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--bp-encre); }
.bp-label__points li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--bp-encre); }
.bp-label__lien { font-family: var(--bp-titre); font-style: italic; font-weight: 700; color: var(--bp-encre); text-decoration: none; box-shadow: inset 0 -2px 0 var(--bp-vert); }

/* Réseaux sociaux */
.bp-reseaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.bp-reseau { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; align-items: center; padding: 22px; background: var(--bp-surface); border: 1.5px solid var(--bp-ligne); border-radius: var(--bp-rayon-lg); color: inherit; text-decoration: none; transition: transform var(--bp-transition), box-shadow var(--bp-transition), border-color var(--bp-transition); }
.bp-reseau:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(26, 89, 126, .14); border-color: var(--bp-encre); }
.bp-reseau__logo { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; color: #fff; background: var(--bp-encre); }
.bp-reseau--instagram .bp-reseau__logo { background: linear-gradient(45deg, #F9A03F 0%, #E1306C 50%, #833AB4 100%); }
.bp-reseau--tiktok .bp-reseau__logo { background: #111; }
.bp-reseau--snapchat .bp-reseau__logo { background: #FFFC00; color: #111; }
.bp-reseau--facebook .bp-reseau__logo { background: #1877F2; }
.bp-reseau__corps { display: grid; gap: 1px; }
.bp-reseau__nom { font-family: var(--bp-titre); font-weight: 700; font-size: 18px; color: var(--bp-encre); }
.bp-reseau__id { font-size: 14px; font-weight: 600; color: var(--bp-texte); }
.bp-reseau__texte { font-size: 13.5px; color: var(--bp-texte-faible); }
.bp-reseau__suivre { grid-column: 1 / -1; margin-top: 8px; font-family: var(--bp-titre); font-style: italic; font-weight: 700; font-size: 14px; color: var(--bp-encre); }

/* Animation d'entrée : le logo sur le dégradé, puis le rideau se lève. */
.bp-intro { display: none; }
.bp-intro-on .bp-intro {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	background: var(--bp-degrade);
	animation: bp-intro-sortie .6s cubic-bezier(.7, 0, .3, 1) 1.15s forwards;
}
.bp-intro__bloc { display: grid; justify-items: center; gap: 18px; }
.bp-intro__logo { width: 120px; height: auto; animation: bp-intro-logo .7s cubic-bezier(.34, 1.4, .64, 1) both; }
.bp-intro__mot { width: 240px; height: auto; animation: bp-entree-haut .5s ease-out .3s both; }
.bp-intro__trait { display: block; width: 240px; height: 3px; background: rgba(255, 255, 255, .85); transform-origin: left center; animation: bp-intro-trait .8s cubic-bezier(.22, .8, .3, 1) .35s both; }
@keyframes bp-intro-logo { from { opacity: 0; transform: translateX(-60px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes bp-intro-trait { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bp-intro-sortie { from { transform: none; visibility: visible; } to { transform: translateY(-100%); visibility: hidden; } }

/* ============================================================
   37. Socle de la charte 2025 : typographie, coins biseautés,
       bandeaux, étiquettes, « A » en accent, motifs, lignes du « P »
   Classes réutilisables par toutes les pages de la refonte.
   ============================================================ */

/* --- Typographie : les quatre rôles de la charte ---
   Titres : Saira Bold Italic · Sous-titres : Saira Bold ·
   Chiffres et sous-titres secondaires : Saira Condensed SemiBold ·
   Texte : Saira Italic. Le tunnel de commande (pages WooCommerce) garde
   un texte droit : on n'y change rien. */
body:not(.woocommerce-page) { font-style: italic; }
code, kbd, pre, samp { font-style: normal; }
/* Saira Condensed n'est chargée qu'en droit : sans cette règle, les chiffres
   hériteraient de l'italique du texte et le navigateur le simulerait. */
.bp-pack__heures strong,
.bp-pack__prix:not(.bp-pack__prix--devis) strong,
.bp-tarifs-table td,
.bp-documents__num,
.bp-gde__num,
.bp-document__icone,
.bp-etape__num { font-style: normal; }

.bp-titre {
	font-family: var(--bp-titre);
	font-style: italic;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.015em;
	color: var(--bp-encre);
}
.bp-sous-titre {
	font-family: var(--bp-titre);
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0;
}
.bp-sous-titre-2,
.bp-chiffre {
	font-family: var(--bp-condense);
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}
.bp-texte {
	font-family: var(--bp-corps);
	font-style: italic;
	font-weight: 400;
}

/* --- Plus aucun coin arrondi (les disques restent des disques) --- */
:focus-visible,
.bp-skip,
.bp-menu .sub-menu a,
.bp-menu-notice,
.bp-burger,
.bp-404__links a,
.bp-pagination .page-numbers,
.bp-reseau__logo,
.bp-footer .bp-social__link { border-radius: 0; }

/* Le tunnel de commande garde ses rayons d'origine : on n'y touche pas. */
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account {
	--bp-rayon-sm: 3px;
	--bp-rayon:    4px;
	--bp-rayon-lg: 6px;
}

/* Bouton WhatsApp : même biseau que les boutons du site. Une forme
   découpée perd son ombre portée et son anneau de focus extérieur : le
   focus passe à l'intérieur. */
.bp-whatsapp {
	--b: 12px;
	border-radius: 0;
	box-shadow: none;
	clip-path: polygon(calc(var(--b) * var(--bp-pente)) 0, 100% 0, 100% calc(100% - var(--b)), calc(100% - var(--b) * var(--bp-pente)) 100%, 0 100%, 0 var(--b));
}
.bp-whatsapp:hover { box-shadow: none; }
.bp-whatsapp:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

/* --- Coins biseautés à 60° ---
   .bp-biseau découpe n'importe quel bloc (haut gauche et bas droite).
   Attention : tout ce qui dépasse du bloc est rogné (pastille posée
   à cheval sur le bord, ombre portée). Pour une ombre, envelopper le
   bloc dans .bp-ombre-biseau. */
.bp-biseau,
.bp-carte {
	--b: var(--bp-biseau);
	clip-path: polygon(calc(var(--b) * var(--bp-pente)) 0, 100% 0, 100% calc(100% - var(--b)), calc(100% - var(--b) * var(--bp-pente)) 100%, 0 100%, 0 var(--b));
}
.bp-biseau--sm { --b: var(--bp-biseau-sm); }
.bp-biseau--lg { --b: var(--bp-biseau-lg); }
.bp-ombre-biseau { filter: var(--bp-ombre-biseau); }

/* Carte biseautée : fond blanc, filet fin qui suit aussi les pans coupés
   (calque ::after évidé, règle evenodd). */
.bp-carte {
	--b: var(--bp-biseau-lg);
	--e: 1.5px;
	--bp-carte-bord: var(--bp-ligne);
	position: relative;
	display: block;
	padding: clamp(22px, 3vw, 36px);
	background: var(--bp-blanc);
	color: var(--bp-texte);
}
.bp-carte::after,
.bp-contour::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--bp-carte-bord);
	clip-path: polygon(evenodd,
		calc(var(--b) * var(--bp-pente)) 0, 100% 0, 100% calc(100% - var(--b)), calc(100% - var(--b) * var(--bp-pente)) 100%, 0 100%, 0 var(--b), calc(var(--b) * var(--bp-pente)) 0,
		calc((var(--b) + var(--e)) * var(--bp-pente)) var(--e), calc(100% - var(--e)) var(--e), calc(100% - var(--e)) calc(100% - var(--b) - var(--e) * .268), calc(100% - (var(--b) + var(--e)) * var(--bp-pente)) calc(100% - var(--e)), var(--e) calc(100% - var(--e)), var(--e) calc(var(--b) + var(--e) * .268), calc((var(--b) + var(--e)) * var(--bp-pente)) var(--e));
	transition: background-color var(--bp-transition);
}
a.bp-carte { text-decoration: none; }
a.bp-carte:hover,
.bp-carte--active { --bp-carte-bord: var(--bp-vert); }
.bp-carte--bleu { --bp-carte-bord: transparent; background: var(--bp-bleu); color: #fff; }
.bp-carte--vert { --bp-carte-bord: transparent; background: var(--bp-vert); color: var(--bp-bleu); }
.bp-carte--degrade { --bp-carte-bord: transparent; background: var(--bp-degrade); color: #fff; }
.bp-carte--bleu :is(h2, h3, h4),
.bp-carte--degrade :is(h2, h3, h4) { color: #fff; }
.bp-carte--vert :is(h2, h3, h4) { color: var(--bp-bleu); }
.bp-carte--accent { --bp-carte-bord: var(--bp-vert); --e: 2px; }

/* Contour seul, sur n'importe quel bloc déjà biseauté (.bp-biseau). */
.bp-contour { --e: 1.5px; --bp-carte-bord: var(--bp-bleu); position: relative; }

/* --- Bandeaux inclinés : « Informations principales / Infos secondaires » ---
   <p class="bp-bandeau">
     <span class="bp-bandeau__principal">Permis B</span>
     <span class="bp-bandeau__secondaire">20 h de conduite</span>
   </p>
   Le bloc plein est un parallélogramme aux flancs à 60°, le bloc contour
   reprend le biseau des boutons. Sur téléphone, le second passe dessous. */
.bp-bandeau {
	--h: 2.5em;
	--o: calc(var(--h) * var(--bp-pente));
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 6px 0;
	margin: 0 0 18px;
	font-size: clamp(15px, 1.5vw, 18px);
	line-height: 1.15;
}
.bp-bandeau__principal,
.bp-bandeau__secondaire {
	display: inline-flex;
	align-items: center;
	min-height: var(--h);
	padding: .3em calc(var(--o) + .35em);
}
.bp-bandeau__principal {
	background: var(--bp-bleu);
	color: #fff;
	font-family: var(--bp-titre);
	font-style: italic;
	font-weight: 700;
	clip-path: polygon(var(--o) 0, 100% 0, calc(100% - var(--o)) 100%, 0 100%);
}
.bp-bandeau__secondaire {
	--b: calc(var(--h) * .42);
	--e: 1.5px;
	--bp-carte-bord: var(--bp-bleu);
	position: relative;
	margin-left: calc(var(--o) * -.55);
	padding-inline: 1.1em 1em;
	color: var(--bp-bleu);
	font-family: var(--bp-condense);
	font-style: normal;
	font-weight: 600;
	clip-path: polygon(calc(var(--b) * var(--bp-pente)) 0, 100% 0, 100% calc(100% - var(--b)), calc(100% - var(--b) * var(--bp-pente)) 100%, 0 100%, 0 var(--b));
}
.bp-bandeau__secondaire::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--bp-carte-bord);
	clip-path: polygon(evenodd,
		calc(var(--b) * var(--bp-pente)) 0, 100% 0, 100% calc(100% - var(--b)), calc(100% - var(--b) * var(--bp-pente)) 100%, 0 100%, 0 var(--b), calc(var(--b) * var(--bp-pente)) 0,
		calc((var(--b) + var(--e)) * var(--bp-pente)) var(--e), calc(100% - var(--e)) var(--e), calc(100% - var(--e)) calc(100% - var(--b) - var(--e) * .268), calc(100% - (var(--b) + var(--e)) * var(--bp-pente)) calc(100% - var(--e)), var(--e) calc(100% - var(--e)), var(--e) calc(var(--b) + var(--e) * .268), calc((var(--b) + var(--e)) * var(--bp-pente)) var(--e));
}
/* Sur fond bleu ou dégradé. */
.bp-bandeau--clair .bp-bandeau__principal { background: var(--bp-vert); color: var(--bp-bleu); }
.bp-bandeau--clair .bp-bandeau__secondaire { --bp-carte-bord: #fff; color: #fff; }

/* --- Étiquettes slogan sur deux niveaux ---
   <p class="bp-etiquettes">
     <span class="bp-etiquettes__haut">Les</span>
     <span class="bp-etiquettes__bas">#BestConducteurs<span class="bp-accent-a bp-accent-a--sommet" aria-hidden="true">A</span></span>
   </p>
   Le niveau du bas, plus grand, est décalé vers la droite et chevauche
   légèrement celui du haut. La taille se règle par font-size sur le bloc. */
.bp-etiquettes {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0 0 24px;
	font-family: var(--bp-titre);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(30px, 5.2vw, 60px);
	line-height: 1;
	letter-spacing: -.015em;
}
.bp-etiquettes__haut,
.bp-etiquettes__bas {
	position: relative;
	display: inline-block;
	padding: .16em .6em .2em .5em;
	max-width: 100%;
}
/* Le fond incliné est porté par ::before : le « A » peut dépasser. */
.bp-etiquettes__haut::before,
.bp-etiquettes__bas::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--fond);
	clip-path: polygon(.38em 0, 100% 0, calc(100% - .38em) 100%, 0 100%);
}
.bp-etiquettes { isolation: isolate; }
.bp-etiquettes__haut {
	--fond: #fff;
	color: var(--bp-bleu);
	font-size: .52em;
	z-index: 2;
}
.bp-etiquettes__bas {
	--fond: var(--bp-bleu);
	color: #fff;
	margin: -.08em 0 0 .7em;
	z-index: 1;
}
/* Sur fond blanc : le haut passe en vert. */
.bp-etiquettes--sur-blanc .bp-etiquettes__haut { --fond: var(--bp-vert); }
/* Variante verte (fond bleu). */
.bp-etiquettes--vert .bp-etiquettes__bas { --fond: var(--bp-vert); color: var(--bp-bleu); }

/* --- Le « A » en accent : disque blanc, A vert --- */
.bp-accent-a {
	display: inline-grid;
	place-items: center;
	width: 1.15em;
	height: 1.15em;
	border-radius: 50%;
	background: #fff;
	color: var(--bp-vert);
	font-family: var(--bp-titre);
	font-style: italic;
	font-weight: 700;
	font-size: .8em;
	line-height: 1;
	vertical-align: middle;
}
/* Posé sur le coin d'une étiquette ou d'un bloc (parent en position relative). */
.bp-accent-a--sommet {
	position: absolute;
	top: -.72em;
	right: -.1em;
	transform: rotate(-8deg);
}
/* Sur fond blanc, un filet vert rend le disque visible. */
.bp-accent-a--sur-blanc { box-shadow: inset 0 0 0 2px var(--bp-vert); }

/* --- Motifs et lignes en fond ---
   Un calque décoratif vide, placé dans un bloc .bp-decor-zone :
   <section class="bp-section bp-decor-zone">
     <span class="bp-decor bp-decor--p" aria-hidden="true"></span> …
   (ou <?php echo bp_decor( 'p' ); ?> dans un gabarit).
   Les fichiers servent de masque : la couleur vient d'ici (bleu sur fond
   clair, blanc avec --clair sur fond bleu ou dégradé). */
.bp-decor-zone { position: relative; isolation: isolate; }
.bp-decor {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-color: var(--bp-decor-couleur, var(--bp-bleu));
	opacity: var(--bp-decor-opacite, 1);
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
}
.bp-decor--clair { --bp-decor-couleur: #fff; }

/* Motif n° 1 : le picto « P » répété, en quinconce. */
.bp-decor--p {
	--bp-decor-opacite: .06;
	-webkit-mask-image: url( "../img/charte/motif-p.svg" );
	mask-image: url( "../img/charte/motif-p.svg" );
	-webkit-mask-size: 120px 120px;
	mask-size: 120px 120px;
}
.bp-decor--p.bp-decor--clair { --bp-decor-opacite: .1; }

/* Motif n° 2 : les étoiles (déjà très légères dans le fichier). */
.bp-decor--etoiles {
	-webkit-mask-image: url( "../img/charte/etoiles.svg" );
	mask-image: url( "../img/charte/etoiles.svg" );
	-webkit-mask-size: 240px 240px;
	mask-size: 240px 240px;
}

/* Les grandes lignes courbes du « P », en traits fins. */
.bp-decor--lignes {
	--bp-decor-opacite: .45;
	-webkit-mask-image: url( "../img/charte/lignes.svg" );
	mask-image: url( "../img/charte/lignes.svg" );
	-webkit-mask-size: cover;
	mask-size: cover;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
.bp-decor--lignes.bp-decor--clair { --bp-decor-opacite: 1; }

/* Fonds pleins de la charte, à combiner avec les motifs. */
.bp-fond-bleu { background: var(--bp-bleu); color: #fff; }
.bp-fond-degrade { background: var(--bp-degrade); color: #fff; }
.bp-fond-blanc { background: var(--bp-blanc); }
:is(.bp-fond-bleu, .bp-fond-degrade) :is(h1, h2, h3, h4, .bp-titre) { color: #fff; }

/* ============================================================
   38. Accueil : hero plein écran « Les #BestConducteurs de demain ! »
   Dégradé de la charte, lignes du « P » en traits fins, titre géant,
   deux boutons biseautés. Le titre est le LCP : aucune animation
   d'entrée, police préchargée (functions.php), lignes sans retour à la
   ligne et hauteur fixée en em, donc rien ne bouge quand la police
   arrive. La réduction au défilement passe par transform, pilotée par
   --bp-hero-p (0 → 1, main.js) : pas de décalage de mise en page.
   ============================================================ */
.bp-hero--plein {
	display: flex;
	align-items: center;
	/* L'écran moins l'en-tête (74 px, hauteur fixe). */
	min-height: calc(100vh - 74px);
	min-height: calc(100svh - 74px);
	background-color: var(--bp-bleu);
	background-image: var(--bp-degrade);
}
.bp-hero--plein .bp-hero__inner {
	display: block;
	padding-block: clamp(56px, 10vh, 120px);
}
/* Les lignes glissent plus lentement que la page. */
.bp-hero--plein .bp-decor {
	transform: translate3d(0, calc(var(--bp-hero-p, 0) * 30%), 0);
}

.bp-hero__titre {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0 0 clamp(32px, 6vh, 64px);
	color: #fff;
	font-family: var(--bp-titre);
	font-style: italic;
	font-weight: 700;
	/* Taille de la grande ligne : « #BestConducteurs » tient sur un
	   téléphone de 360 px comme sur un écran de 1920 px. */
	font-size: clamp(30px, 10vw, 176px);
	line-height: 1;
	letter-spacing: -.02em;
	transform-origin: 0 100%;
	transform: scale(calc(1 - var(--bp-hero-p, 0) * .3));
}
.bp-hero__ligne {
	display: block;
	white-space: nowrap;
}
.bp-hero__ligne--haut { font-size: .42em; margin-bottom: .08em; }
.bp-hero__ligne--grande { position: relative; }
.bp-hero__ligne--bas { font-size: .56em; margin-top: .06em; }
/* Le « A » de la charte, posé au-dessus de la fin du mot. */
.bp-hero__titre .bp-accent-a { font-size: .38em; }

.bp-hero__boutons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0;
}
.bp-btn--grand {
	--b: 14px;
	padding: 18px 38px;
	font-size: 17px;
}

@media (prefers-reduced-motion: reduce) {
	.bp-hero--plein .bp-decor,
	.bp-hero__titre { transform: none; }
}

/* Sur téléphone, la barre « Je m'inscris » est toujours affichée en bas :
   le hero s'arrête au-dessus d'elle. */
@media (max-width: 860px) {
	body:not(.bp-sans-barre) .bp-hero--plein {
		min-height: calc(100vh - 74px - 78px - env(safe-area-inset-bottom));
		min-height: calc(100svh - 74px - 78px - env(safe-area-inset-bottom));
	}
}
@media (max-width: 520px) {
	.bp-hero__boutons { flex-direction: column; align-items: stretch; }
	.bp-btn--grand { padding: 16px 22px; font-size: 16px; }
}

/* ============================================================
   20. Adaptatif
   ============================================================ */

@media (max-width: 1080px) {
	.bp-hero__inner {
		grid-template-columns: 1fr;
		gap: 40px;
		padding-block: 72px 96px;
	}
	.bp-hero::after { display: none; }
	.bp-confiance__inner { grid-template-columns: 1fr 1fr; }
	.bp-confiance__item:nth-child(3) { border-left: none; }
	.bp-confiance__item:nth-child(n+3) { border-top: 1px solid var(--bp-ligne); }
	.bp-temoin { grid-template-columns: 1fr; padding: 48px 32px; }

	.bp-stats { grid-template-columns: repeat(2, 1fr); }
	.bp-grid--formations,
	.bp-grid--atouts,
	.bp-grid--temoignages { grid-template-columns: repeat(2, 1fr); }
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }

	.bp-steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
	.bp-steps::before { display: none; }

	.bp-footer__grid { grid-template-columns: 1fr 1fr; }
	.bp-prose--columns { columns: 1; }
	.bp-grid--posts { grid-template-columns: repeat(2, 1fr); }
	.bp-contact { grid-template-columns: 1fr; gap: 40px; }
	.bp-packs, .bp-packs--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bp-tarifs-tables { grid-template-columns: 1fr; }
	.bp-financements { grid-template-columns: 1fr; }
	.bp-financement { grid-template-columns: 150px minmax(0, 1fr); align-items: center; }
	.bp-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bp-equipement__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bp-plateau { grid-template-columns: 1fr; }
	.bp-label__points { grid-template-columns: 1fr; }
	.bp-document { grid-template-columns: auto minmax(0, 1fr); }
	.bp-document__actions { grid-column: 1 / -1; }
	.bp-gde__entete { display: none; }
	.bp-gde__niveau { grid-template-columns: 1fr; }
	.bp-gde__tete { flex-direction: row; align-items: center; gap: 16px; }
	.bp-gde__num { font-size: 44px; }
	.bp-gde__cols { grid-template-columns: 1fr; }
	.bp-gde__cols > div { border-left: none; border-top: 1px solid var(--bp-ligne); }
	.bp-mentions dl div { grid-template-columns: 1fr; gap: 2px; }
}

/* Six entrées de menu, le téléphone et le bouton ne tiennent plus sous 1 260 px :
   le menu passe en burger avant que le logo ne soit écrasé. */
@media (max-width: 1480px) {
	.bp-menu a { padding-inline: 10px; font-size: 14.5px; }
	.bp-header__tel { font-size: 14px; }
}

@media (max-width: 1260px) {
	.bp-burger {
		display: inline-flex;
		order: 3;
	}

	/* Menu déroulant plein écran. */
	.bp-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		background: var(--bp-surface);
		border-top: 1px solid var(--bp-ligne);
		border-bottom: 1px solid var(--bp-ligne);
		box-shadow: var(--bp-ombre-forte);
		padding: 18px var(--bp-gouttiere) 22px;
		max-height: calc(100vh - 74px);
		overflow-y: auto;
	}
	.bp-nav.is-open { display: flex; }
	.bp-header { position: sticky; }

	.bp-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}
	.bp-menu a {
		padding: 13px 14px;
		font-size: 16.5px;
	}
	.bp-menu .sub-menu {
		position: static;
		display: block;
		box-shadow: none;
		border: none;
		margin: 0 0 0 14px;
		padding: 0;
	}
	.bp-header__tel {
		justify-content: center;
		padding: 12px;
		font-size: 16px;
		border-top: 1px solid var(--bp-ligne);
		margin-top: 6px;
	}
	.bp-header__cta { margin: 6px 0 0; justify-content: center; }
}

@media (max-width: 860px) {
	body { font-size: 16px; padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
	body.bp-sans-barre { padding-bottom: 0; }

	.bp-social { justify-content: center; margin-top: 6px; }

	.bp-section { padding-block: 68px; }
	.bp-cta { padding-block: 0 68px; }
	.bp-cta__inner { padding: 40px 28px; }

	.bp-grid--formations,
	.bp-grid--formules,
	.bp-grid--atouts,
	.bp-grid--temoignages { grid-template-columns: 1fr; }
	.woocommerce ul.products { grid-template-columns: 1fr; }

	.bp-steps { grid-template-columns: 1fr; }
	.bp-step { padding: 0; }

	.bp-footer__grid { grid-template-columns: 1fr; gap: 30px; }
	.bp-footer { margin-top: 68px; }
	.bp-liste a { flex-direction: column; gap: 2px; }
	.bp-liste a span { flex: 0 1 auto; text-align: left; }
	.bp-grid--posts { grid-template-columns: 1fr; }
	.bp-form__grid { grid-template-columns: 1fr; gap: 18px; }
	.bp-contact__form { padding: 24px 20px; }

	.bp-page__header { padding-block: 62px; margin-bottom: 48px; }

	.bp-barre { transform: none; }
	form.woocommerce-checkout { grid-template-columns: 1fr; }
	form.woocommerce-checkout .col2-set, form.woocommerce-checkout #order_review_heading, form.woocommerce-checkout #order_review { grid-column: 1; grid-row: auto; position: static; }
	/* Au-dessus de la barre « Je m'inscris » (64 px + zone de sécurité de l'iPhone) ; en bas quand la barre est absente. */
	.bp-whatsapp { right: 14px; bottom: calc(80px + env(safe-area-inset-bottom)); padding: 13px; }
	body.bp-barre-visible .bp-whatsapp { bottom: calc(80px + env(safe-area-inset-bottom)); }
	body.bp-sans-barre .bp-whatsapp { bottom: 14px; }
	.bp-whatsapp span { display: none; }
	.bp-barre__texte { display: none; }
	.bp-barre__offre { flex: 0 0 auto; }
	.bp-barre__prix { white-space: nowrap; }
	.bp-hero .bp-eyebrow--sombre { font-size: 11px; letter-spacing: .08em; padding: 5px 16px 5px 12px; }
	.bp-barre__inner { gap: 10px; min-height: 64px; }
	.bp-barre .bp-btn { flex: 1; padding: 13px 14px; }
	.bp-conseil { grid-template-columns: 1fr; padding: 22px 20px; }
	.bp-grand-prix strong { font-size: 52px; }
	.bp-hero__title { font-size: clamp(38px, 11vw, 56px); }

	/* Les tableaux WooCommerce défilent dans leur propre conteneur. */
	.woocommerce-cart-form,
	.woocommerce table.shop_table_responsive { overflow-x: auto; }
}

@media (max-width: 520px) {
	.bp-hero__inner { padding-block: 52px 68px; }
	.bp-config { padding: 18px 16px 16px; }
	.bp-offre { grid-template-columns: 1fr; grid-template-areas: "nom" "detail" "prix"; }
	.bp-offre__prix { text-align: left; }
	.bp-confiance__inner { grid-template-columns: 1fr; }
	.bp-confiance__item { border-left: none !important; }
	.bp-confiance__item + .bp-confiance__item { border-top: 1px solid var(--bp-ligne); }
	.bp-card__price strong { font-size: 36px; }
	.bp-grand-prix strong { font-size: 44px; }
	.bp-stats { grid-template-columns: 1fr; }
	.bp-packs, .bp-packs--3, .bp-packs--2 { grid-template-columns: 1fr; max-width: none; }
	.bp-tabs--grand { width: 100%; }
	.bp-tabs--grand .bp-tab { flex: 1; padding: 12px 10px; font-size: 15px; text-align: center; }
	.bp-dossier { padding: 20px 16px; }
	.bp-dossier__item { grid-template-columns: 1fr; }
	.bp-brand__commercial { white-space: normal; max-width: 150px; font-size: 9.5px; }
	.bp-financement { grid-template-columns: 1fr; }
	.bp-permis__choix { gap: 12px; }
	.bp-permis__carte { padding: 22px 12px 18px; }
	.bp-permis__carte .bp-picto { width: 84px; }
	.bp-permis__nom { font-size: 19px; }
	.bp-permis__detail { display: none; }
	.bp-permis__tete { align-items: flex-start; }
	.bp-permis__badge { width: 64px; height: 44px; }
	.bp-permis__badge .bp-picto { width: 44px; }
	.bp-etapes { grid-template-columns: 1fr; }
	.bp-equipement__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bp-label { grid-template-columns: 1fr; padding: 22px 18px; }
	.bp-panneau__titre { font-size: 17px; padding: 10px 12px; }
	.bp-tab .bp-picto, .bp-seg button .bp-picto { width: 30px; margin-right: 6px; }
	.bp-document { padding: 18px 16px; }
	.bp-document__actions .bp-btn { flex: 1; text-align: center; }
	.bp-document-apercu iframe { height: 70vh; }
	.bp-financement__logo { min-height: 72px; }
}

/* ============================================================
   21. Impression
   ============================================================ */

@media print {
	.bp-whatsapp,
	.bp-header,
	.bp-barre,
	.bp-cta,
	.bp-footer,
	.bp-skip { display: none !important; }
	body { background: #fff; font-size: 12pt; }
	.bp-reveal,
	.bp-js .bp-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   39. Photos des véhicules (à la place des pictogrammes),
       « Quel permis tu passes ? », slogan hybride
   ============================================================ */
/* Photos détourées : on les pose sur un fond clair, jamais déformées. */
.bp-vehicule { display: block; max-width: 100%; height: auto; object-fit: contain; }

/* Pendant le défilement, la photo grandit et se redresse jusqu'au milieu de
   l'écran (main.js, initScrollPhotos, écrit --bp-scroll-p de 0 à 1).
   Uniquement par transform : aucun décalage de mise en page. */
[data-bp-scroll] { --bp-scroll-p: 1; }
@media (prefers-reduced-motion: no-preference) {
	.bp-js [data-bp-scroll] {
		transform: scale(calc(.9 + .1 * var(--bp-scroll-p))) rotate(calc((1 - var(--bp-scroll-p)) * -4deg));
		transform-origin: 50% 80%;
		will-change: transform;
	}
}

/* Onglets, configurateur, titre de panneau : petite photo du véhicule. */
.bp-picto--photo { width: 60px; height: 34px; }
.bp-tab .bp-picto--photo,
.bp-seg button .bp-picto--photo { width: 58px; height: 32px; margin-right: 10px; }
.bp-panneau__picto:has(.bp-picto--photo) { background: var(--bp-fond); }
.bp-panneau__titre--moto .bp-panneau__picto:has(.bp-picto--photo) { background: var(--bp-vert-clair); }
.bp-panneau__picto .bp-picto--photo { width: 66px; height: 42px; }

/* Nos permis : les deux grandes cartes et la tête de chaque parcours. */
.bp-permis__photo { display: block; width: min(100%, 260px); aspect-ratio: 16 / 10; }
.bp-permis__photo .bp-picto--photo { width: 100%; height: 100%; margin: 0; transition: transform .6s cubic-bezier(.22, .8, .3, 1); }
.bp-permis__carte:hover .bp-picto--photo { transform: scale(1.06); }
.bp-permis__badge:has(.bp-picto--photo) { width: 220px; height: 130px; padding: 8px; background: radial-gradient(ellipse at 50% 75%, #fff 0%, var(--bp-fond) 70%); }
[data-bp-panel="moto"] .bp-permis__badge:has(.bp-picto--photo) { background: radial-gradient(ellipse at 50% 75%, #fff 0%, var(--bp-vert-clair) 70%); }
.bp-permis__badge .bp-picto--photo { width: 100%; height: 100%; }

/* Nos permis : « Tu apprends sur… » */
.bp-flotte__titre { margin: 36px 0 16px; font-size: 22px; }
.bp-flotte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.bp-flotte__item {
	--b: var(--bp-biseau);
	display: grid;
	align-content: start;
	gap: 4px;
	padding: 16px 18px 18px;
	background: linear-gradient(180deg, var(--bp-fond) 0%, var(--bp-surface) 100%);
	clip-path: polygon(calc(var(--b) * var(--bp-pente)) 0, 100% 0, 100% calc(100% - var(--b)), calc(100% - var(--b) * var(--bp-pente)) 100%, 0 100%, 0 var(--b));
}
[data-bp-panel="moto"] .bp-flotte__item { background: linear-gradient(180deg, var(--bp-vert-clair) 0%, var(--bp-surface) 100%); }
.bp-flotte__photo { display: block; aspect-ratio: 16 / 10; margin-bottom: 8px; }
.bp-flotte__photo .bp-vehicule { width: 100%; height: 100%; }
.bp-flotte__item strong { font-family: var(--bp-titre); font-size: 17px; color: var(--bp-encre); }
.bp-flotte__item > span:not(.bp-flotte__photo) { font-size: 14px; color: var(--bp-texte); }

/* Groupes de formules : la photo du véhicule devant le titre. */
.bp-groupe--photo .bp-groupe__head { align-items: center; gap: 12px 22px; }
.bp-groupe__photo { display: block; flex: none; width: 160px; aspect-ratio: 16 / 10; }
.bp-groupe__photo .bp-vehicule { width: 100%; height: 100%; }
.bp-groupe__textes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; flex: 1 1 260px; }

/* Slogan hybride : petite fleur verte. */
.bp-eco {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 6px 0 0;
	padding: 5px 12px 5px 8px;
	background: var(--bp-vert-clair);
	color: var(--bp-encre);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.bp-groupe__eco { flex-basis: 100%; }
.bp-fleur { flex: none; width: 18px; height: 18px; }

/* Accueil, section 2 : « Quel permis tu passes ? » */
.bp-section--choix { padding-block: 72px 56px; }
.bp-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 32px); }
.bp-choix__carte {
	--b: var(--bp-biseau-lg);
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr;
	overflow: hidden;
	text-decoration: none;
	color: var(--bp-encre);
	background: radial-gradient(ellipse at 50% 62%, #fff 0%, var(--bp-fond) 62%, #DCE8F0 100%);
	clip-path: polygon(calc(var(--b) * var(--bp-pente)) 0, 100% 0, 100% calc(100% - var(--b)), calc(100% - var(--b) * var(--bp-pente)) 100%, 0 100%, 0 var(--b));
	transition: background-color var(--bp-transition);
}
.bp-choix__carte--moto { background: radial-gradient(ellipse at 50% 62%, #fff 0%, var(--bp-vert-clair) 62%, #C9F3E0 100%); }
.bp-choix__carte::before {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 5px;
	background: var(--bp-bleu);
}
.bp-choix__carte--moto::before { background: var(--bp-vert); }
.bp-choix__photo { display: block; padding: clamp(18px, 3vw, 40px) clamp(14px, 3vw, 44px) 0; aspect-ratio: 16 / 10; }
.bp-choix__photo .bp-vehicule { width: 100%; height: 100%; transition: transform .7s cubic-bezier(.22, .8, .3, 1); }
.bp-choix__carte:hover .bp-vehicule,
.bp-choix__carte:focus-visible .bp-vehicule { transform: scale(1.06); }
.bp-choix__carte:focus-visible { outline: 3px solid var(--bp-vert); outline-offset: -6px; }
.bp-choix__textes { display: grid; align-content: end; gap: 6px; padding: 14px clamp(16px, 3vw, 36px) clamp(20px, 3vw, 34px); }
.bp-choix__nom { font-family: var(--bp-titre); font-style: italic; font-weight: 700; font-size: clamp(22px, 3vw, 36px); line-height: 1.1; }
.bp-choix__detail { font-size: 15px; color: var(--bp-texte); }
.bp-choix__lien { margin-top: 4px; font-weight: 700; font-size: 15px; }
.bp-choix__carte:hover .bp-choix__lien { text-decoration: underline; text-underline-offset: 4px; }

/* Pied de page : crédits des photos libres. */
.bp-credits-photos { margin: 14px 0 0; font-size: 12px; line-height: 1.5; opacity: .75; }
.bp-credits-photos a { color: inherit; }

@media (max-width: 520px) {
	.bp-section--choix { padding-block: 44px 36px; }
	.bp-choix__photo { padding: 14px 8px 0; }
	.bp-choix__textes { padding: 10px 12px 16px; }
	.bp-choix__detail { display: none; }
	.bp-choix__lien { font-size: 14px; }
	.bp-tab .bp-picto--photo,
	.bp-seg button .bp-picto--photo { width: 44px; height: 26px; margin-right: 6px; }
	.bp-permis__photo { width: 100%; }
	.bp-permis__badge:has(.bp-picto--photo) { width: 120px; height: 76px; padding: 4px; }
	.bp-flotte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.bp-flotte__item { padding: 12px; }
	.bp-flotte__item strong { font-size: 15px; }
	.bp-groupe--photo .bp-groupe__head { flex-wrap: nowrap; }
	.bp-groupe__photo { width: 96px; }
	.bp-groupe__textes { flex-basis: 0; min-width: 0; }
	.bp-eco { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
	.bp-choix__carte:hover .bp-vehicule,
	.bp-choix__carte:focus-visible .bp-vehicule,
	.bp-permis__carte:hover .bp-picto--photo { transform: none; }
}

/* ============================================================
   Formules en carrousel (accueil, Tarifs)
   Une piste horizontale par groupe, accrochage carte par carte. Sans
   JavaScript, elle défile au doigt ou à la barre de défilement ; le
   script ajoute flèches et pagination. Les cartes sont biseautées :
   l'ombre passe par un filtre sur l'enveloppe (.bp-carrousel__item).
   ============================================================ */
.bp-carrousel {
	--bp-par-vue: 1.18;
	--bp-ecart: 16px;
	position: relative;
}
.bp-carrousel__piste {
	display: flex;
	gap: var(--bp-ecart);
	/* Pleine largeur sur téléphone : la carte suivante dépasse du bord. */
	margin-inline: calc(var(--bp-gouttiere) * -1);
	padding: 16px var(--bp-gouttiere) 30px;
	scroll-padding-inline: var(--bp-gouttiere);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}
.bp-js .bp-carrousel__piste { scrollbar-width: none; }
.bp-js .bp-carrousel__piste::-webkit-scrollbar { display: none; }
.bp-carrousel__piste:focus-visible { outline: 3px solid var(--bp-vert); outline-offset: -3px; }
.bp-carrousel__item {
	flex: 0 0 calc((100% - (var(--bp-par-vue) - 1) * var(--bp-ecart)) / var(--bp-par-vue));
	display: flex;
	scroll-snap-align: start;
	filter: var(--bp-ombre-biseau-basse);
	transition: transform var(--bp-transition), filter var(--bp-transition);
}

/* La carte : biseau, filet fin, et un second filet en dégradé qui
   s'allume au survol ou au toucher. */
.bp-carrousel .bp-pack {
	--b: var(--bp-biseau-lg);
	--e: 2px;
	flex: 1;
	min-width: 0;
	padding: 44px 22px 22px;
	border: 0;
	box-shadow: none;
	clip-path: polygon(calc(var(--b) * var(--bp-pente)) 0, 100% 0, 100% calc(100% - var(--b)), calc(100% - var(--b) * var(--bp-pente)) 100%, 0 100%, 0 var(--b));
	transition: none;
}
.bp-carrousel .bp-pack:hover { transform: none; box-shadow: none; }
.bp-carrousel .bp-pack::before,
.bp-carrousel .bp-pack::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	clip-path: polygon(evenodd,
		calc(var(--b) * var(--bp-pente)) 0, 100% 0, 100% calc(100% - var(--b)), calc(100% - var(--b) * var(--bp-pente)) 100%, 0 100%, 0 var(--b), calc(var(--b) * var(--bp-pente)) 0,
		calc((var(--b) + var(--e)) * var(--bp-pente)) var(--e), calc(100% - var(--e)) var(--e), calc(100% - var(--e)) calc(100% - var(--b) - var(--e) * .268), calc(100% - (var(--b) + var(--e)) * var(--bp-pente)) calc(100% - var(--e)), var(--e) calc(100% - var(--e)), var(--e) calc(var(--b) + var(--e) * .268), calc((var(--b) + var(--e)) * var(--bp-pente)) var(--e));
}
.bp-carrousel .bp-pack::after { background: var(--bp-ligne); }
.bp-carrousel .bp-pack.is-featured::after { background: var(--bp-vert); }
.bp-carrousel .bp-pack::before {
	z-index: 2;
	background: var(--bp-degrade);
	opacity: 0;
	transition: opacity var(--bp-transition);
}

/* Étiquettes : dans l'angle droit, le seul qui n'est pas biseauté. */
.bp-carrousel .bp-pack__badges {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 4px;
	margin: 0;
	max-width: calc(100% - 30px);
}
.bp-carrousel .bp-pack__badge {
	position: static;
	padding: 5px 14px 5px 18px;
	clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%);
}
.bp-carrousel .bp-pack__badge--choisi { background: var(--bp-degrade); color: var(--bp-blanc); }

/* Prix et paiement en 4× : ce qu'on doit lire en premier. */
.bp-carrousel .bp-pack__prix strong { font-size: 42px; }
.bp-carrousel .bp-pack__4x {
	align-self: flex-start;
	margin: 0;
	padding: 6px 16px 6px 12px;
	background: var(--bp-vert-clair);
	color: var(--bp-encre);
	font-size: 15px;
	font-weight: 600;
	clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.bp-carrousel .bp-pack__4x strong {
	font-family: var(--bp-condense);
	font-style: normal;
	font-weight: 600;
	font-size: 19px;
	letter-spacing: 0;
}

/* Le bouton : contour au repos, il se remplit du dégradé quand la carte
   est survolée, touchée ou choisie. La formule mise en avant part en vert. */
.bp-carrousel .bp-pack__cta .bp-btn {
	transition: color var(--bp-transition);
}
.bp-carrousel .bp-pack__cta .bp-btn--primary { --btn-bg: transparent; --btn-fg: var(--bp-encre); --btn-bd: var(--bp-encre); }
.bp-carrousel .bp-pack__cta .bp-btn::before {
	background: var(--bp-degrade) left center / 0% 100% no-repeat, var(--btn-bg);
	transition: background-size .38s cubic-bezier(.22, .8, .3, 1), filter var(--bp-transition);
}
.bp-carrousel .bp-pack__cta .bp-btn::after { transition: opacity var(--bp-transition); }

@media (hover: hover) {
	.bp-carrousel__item:hover { transform: translateY(-8px); filter: var(--bp-ombre-biseau-haute); }
	.bp-carrousel__item:hover .bp-pack::before { opacity: 1; }
	.bp-carrousel__item:hover .bp-pack__cta .bp-btn { --btn-fg: var(--bp-blanc); }
	.bp-carrousel__item:hover .bp-pack__cta .bp-btn::before { background-size: 100% 100%; }
	.bp-carrousel__item:hover .bp-pack__cta .bp-btn::after { opacity: 0; }
}
.bp-carrousel__item:focus-within,
.bp-carrousel__item.is-actif { transform: translateY(-8px); filter: var(--bp-ombre-biseau-haute); }
.bp-carrousel__item:focus-within .bp-pack::before,
.bp-carrousel__item.is-actif .bp-pack::before { opacity: 1; }
.bp-carrousel__item:focus-within .bp-pack__cta .bp-btn,
.bp-carrousel__item.is-actif .bp-pack__cta .bp-btn,
.bp-pack.is-choisi .bp-pack__cta .bp-btn { --btn-fg: var(--bp-blanc); }
.bp-carrousel__item:focus-within .bp-pack__cta .bp-btn::before,
.bp-carrousel__item.is-actif .bp-pack__cta .bp-btn::before,
.bp-pack.is-choisi .bp-pack__cta .bp-btn::before { background-size: 100% 100%; }
.bp-carrousel__item:focus-within .bp-pack__cta .bp-btn::after,
.bp-carrousel__item.is-actif .bp-pack__cta .bp-btn::after,
.bp-pack.is-choisi .bp-pack__cta .bp-btn::after { opacity: 0; }

/* Validation au clic sur le bouton : petite pression et coche, juste
   avant de partir vers l'inscription (moins de 300 ms). */
.bp-pack.is-choisi .bp-pack__cta .bp-btn { animation: bp-choisi .26s cubic-bezier(.22, .8, .3, 1); }
.bp-pack__ok {
	display: inline-grid;
	place-items: center;
	width: 1.3em;
	height: 1.3em;
	margin-left: 2px;
	background: var(--bp-blanc);
	color: var(--bp-bleu);
	font-style: normal;
	font-size: .9em;
	line-height: 1;
	clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
	animation: bp-coche .22s cubic-bezier(.22, .8, .3, 1) both;
}
@keyframes bp-choisi {
	0% { transform: scale(1); }
	45% { transform: scale(.95); }
	100% { transform: scale(1); }
}
@keyframes bp-coche {
	from { opacity: 0; transform: scale(.4); }
	to { opacity: 1; transform: none; }
}

/* Navigation ajoutée par le script : flèches (ordinateur) et pagination. */
.bp-carrousel__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: -6px;
}
.bp-carrousel__nav[hidden] { display: none; }
.bp-carrousel__fleche {
	--b: 10px;
	display: none;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	background: var(--bp-bleu);
	color: var(--bp-blanc);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	clip-path: polygon(calc(var(--b) * var(--bp-pente)) 0, 100% 0, 100% calc(100% - var(--b)), calc(100% - var(--b) * var(--bp-pente)) 100%, 0 100%, 0 var(--b));
	transition: background-color var(--bp-transition), opacity var(--bp-transition);
}
.bp-carrousel__fleche:hover { background: var(--bp-vert); color: var(--bp-bleu); }
.bp-carrousel__fleche:focus-visible { outline: 3px solid var(--bp-vert); outline-offset: -6px; }
.bp-carrousel__fleche:disabled { opacity: .3; cursor: default; background: var(--bp-bleu); color: var(--bp-blanc); }
.bp-carrousel__points { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bp-carrousel__point {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.bp-carrousel__point::before {
	content: "";
	width: 18px;
	height: 6px;
	background: var(--bp-ligne);
	clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
	transition: width var(--bp-transition), background-color var(--bp-transition);
}
.bp-carrousel__point[aria-current="true"]::before { width: 30px; background: var(--bp-degrade); }
.bp-carrousel__point:focus-visible { outline: 3px solid var(--bp-vert); outline-offset: -2px; }

@media (min-width: 640px) {
	.bp-carrousel { --bp-par-vue: 2.15; --bp-ecart: 18px; }
}
@media (min-width: 1024px) {
	.bp-carrousel { --bp-par-vue: 3; --bp-ecart: 22px; }
	/* Sur ordinateur, la piste reste dans la colonne du site. */
	.bp-carrousel__piste { margin-inline: -12px; padding-inline: 12px; scroll-padding-inline: 12px; }
	.bp-carrousel__fleche { display: grid; }
}
@media (min-width: 1400px) {
	.bp-carrousel { --bp-par-vue: 4; }
}

@media (prefers-reduced-motion: reduce) {
	.bp-carrousel__item,
	.bp-carrousel__item:hover,
	.bp-carrousel__item:focus-within,
	.bp-carrousel__item.is-actif { transform: none; }
	.bp-pack.is-choisi .bp-pack__cta .bp-btn,
	.bp-pack__ok { animation: none; }
}

/* ============================================================
   38. Accueil : offres #BestPrice / #BestFriend, liens Sarool et Kopilote
   ============================================================ */
.bp-offres { display: grid; grid-template-columns: 1fr; gap: 24px; }
.bp-offre__carte { height: 100%; display: grid; align-content: start; justify-items: start; gap: 12px; }
.bp-offre__etiquettes { margin: 0 0 8px; font-size: clamp(26px, 4.4vw, 40px); }
.bp-offre__remise {
	margin: 0;
	font-family: var(--bp-titre);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(44px, 9vw, 72px);
	line-height: 1;
	color: #fff;
}
.bp-offre__remise--bleu { color: var(--bp-bleu); }
.bp-offre__texte { margin: 0; font-style: italic; }
.bp-offre__code { margin: 0; font-style: italic; }
.bp-offre__code strong { font-family: var(--bp-titre); font-weight: 700; letter-spacing: .04em; padding: 2px 10px; background: #fff; color: var(--bp-bleu); }
.bp-offre__carte .bp-btn { margin-top: 8px; }

.bp-outils { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 24px; }
.bp-outils__lien { font-style: italic; color: var(--bp-bleu); text-decoration: none; box-shadow: inset 0 -2px 0 var(--bp-vert); }
.bp-outils__lien strong { font-family: var(--bp-titre); font-weight: 700; }

@media (min-width: 768px) {
	.bp-offres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bp-offres > .bp-offre:only-child { grid-column: 1 / -1; }
}

/* ============================================================
   Vidéo d'ambiance (page Nos permis)
   ============================================================ */

.bp-ambiance__cadre {
	margin: 0;
	background: var(--bp-asphalte);
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.bp-ambiance__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 767px) {
	.bp-ambiance__cadre { aspect-ratio: 4 / 5; }
}

/* ============================================================
   Contrôle final : sans JavaScript
   Le script ajoute .bp-js sur <html>. Sans lui, le bouton de menu ne ferait
   rien : en dessous de 1 260 px, le menu et le numéro de téléphone restent
   donc visibles, à la suite de l'en-tête.
   ============================================================ */
@media (max-width: 1260px) {
	html:not(.bp-js) .bp-burger { display: none; }
	html:not(.bp-js) .bp-header { height: auto; }
	html:not(.bp-js) .bp-header__inner { position: static; flex-wrap: wrap; padding-block: 8px; }
	html:not(.bp-js) .bp-nav {
		display: flex;
		position: static;
		flex-basis: 100%;
		max-height: none;
		box-shadow: none;
		border: 0;
		padding: 8px 0 14px;
	}
}