/* =========================================================
   /bc1-bc2-bpjeps — BC1 et BC2 : ce que demande vraiment le BPJEPS
   Créé le 08/08/2026.

   Page de RÉFÉRENCE (informative), jumelle de /uc-1-2-bpjeps.
   Conventions reprises de .sbpj-uc-pont (07/08/2026) : mêmes variables,
   même en-tête centré, typo SYSTÈME (aucune police téléchargée),
   H3 à filet violet, encarts arrondis. Styles entièrement scopés
   sous .sbpj-bc : aucune règle globale, aucun sélecteur *.
   ========================================================= */

.sbpj-bc, .sbpj-bc *, .sbpj-bc *::before, .sbpj-bc *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sbpj-bc {
	--accent: #7A2F8F;
	--accent-mid: #4C1D73;
	--accent-deep: #1B0A3D;
	--text: #0f172a;
	--text-soft: rgba(15, 23, 42, 0.62);
	--border: rgba(15, 23, 42, 0.09);
	--font: -apple-system, BlinkMacSystemFont, sans-serif;
	font-family: var(--font);
}

/* Rythme vertical + LARGEUR.
   ⚠️ EXIGENCE DE MARION (08/08) : les sections s'alignent au pixel sur la barre
   de navigation et sur le pied de page. Ce n'est pas qu'une histoire de
   max-width : le padding horizontal doit être LE MÊME que celui du reste du
   site, soit clamp(1rem, 3vw, 2rem), et pas --sbpj-gutter (20 px).
   Mesuré le 08/08 à 1440 px : avec la gouttière de 20 px les sections
   commençaient à 140 alors que le logo de la nav et le pied de page
   commencent à 152. Douze pixels d'écart de chaque côté, visibles. */
.sbpj-bc > section {
	width: 100%;
	max-width: var(--sbpj-content-max);
	margin: 0 auto;
	padding-top: var(--sbpj-section-pad-y);
	padding-bottom: var(--sbpj-section-pad-y);
	padding-left: clamp(1rem, 3vw, 2rem);
	padding-right: clamp(1rem, 3vw, 2rem);
}
.sbpj-bc > .sbpj-bc-intro { padding-top: var(--sbpj-section-pad-y-first); }

/* =========================================================
   HÉROS violet étoilé, full-bleed, comme toutes les pages du site.
   Repris de .sbpj-oral-hero : mêmes dégradé, hauteur, graisses.
   Le décor (bulles + étincelles) est injecté par sbpj-starry.js
   sur toute la page portant la classe .sbpj-starry.
   ========================================================= */
.sbpj-bc > .sbpj-bc-hero {
	width: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	color: #fff !important;
	background: linear-gradient(135deg, #7A2F8F 0%, #4C1D73 45%, #1B0A3D 100%) !important;
	min-height: var(--sbpj-hero-min-h) !important;
	justify-content: center !important;
	padding: 176px 20px 96px !important;
	border-bottom: var(--sbpj-hero-border) !important;
	max-width: none !important;
}
.sbpj-bc-hero__eyebrow {
	display: inline-flex !important; align-items: center !important; gap: 8px !important;
	padding: 6px 18px !important; background: rgba(255,255,255,.12) !important;
	border: 1px solid rgba(255,255,255,.18) !important; border-radius: 99px !important;
	font-size: .78rem !important; font-weight: 700 !important; color: rgba(255,255,255,.88) !important;
	letter-spacing: .14em !important; text-transform: uppercase !important;
}
.sbpj-bc-hero__h1 {
	font-size: 2.6rem !important; font-weight: 900 !important; color: #fff !important;
	line-height: 1.15 !important; letter-spacing: -.02em !important;
	padding-top: 20px !important; max-width: 820px !important;
}
.sbpj-bc-hero__h1 em { font-style: italic !important; color: rgba(255,255,255,.75) !important; background: none !important; -webkit-text-fill-color: currentColor; }
.sbpj-bc-hero__sub {
	font-size: 1.08rem !important; font-weight: 500 !important; color: rgba(255,255,255,.68) !important;
	padding-top: 14px !important; max-width: 660px !important; line-height: 1.65 !important;
}
.sbpj-bc-hero__checks { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 28px !important; padding-top: 28px !important; }
.sbpj-bc-hero__check { display: flex !important; align-items: center !important; gap: 10px !important; font-size: .88rem !important; color: rgba(255,255,255,.85) !important; font-weight: 600 !important; }
.sbpj-bc-hero__check-icon {
	flex-shrink: 0 !important; width: 22px !important; height: 22px !important; border-radius: 50% !important;
	background: rgba(34,197,94,.15) !important; display: flex !important; align-items: center !important; justify-content: center !important;
}
.sbpj-bc-hero__check-icon svg { width: 12px !important; height: 12px !important; fill: none !important; stroke: #16a34a !important; stroke-width: 2.2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
@media ( max-width: 640px ) {
	.sbpj-bc > .sbpj-bc-hero { padding: 112px 20px 64px !important; min-height: 0 !important; }
	.sbpj-bc-hero__h1 { font-size: 1.65rem !important; }
	.sbpj-bc-hero__h1 br { display: none !important; }
	.sbpj-bc-hero__sub { font-size: .95rem !important; }
	.sbpj-bc-hero__checks { flex-direction: column !important; align-items: center !important; gap: 14px !important; }
}

/* ---------- En-tête de section (repris du pont) ---------- */
.sbpj-bc__header { text-align: center; margin-bottom: 40px; }
.sbpj-bc__eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 11px; font-weight: 700; color: var(--accent);
	text-transform: uppercase; letter-spacing: .14em; margin-bottom: 16px;
}
.sbpj-bc__eyebrow::before, .sbpj-bc__eyebrow::after {
	content: ''; width: 20px; height: 2px; background: var(--accent); border-radius: 2px; flex-shrink: 0;
}
.sbpj-bc__h1, .sbpj-bc__h2 {
	font-size: 1.8rem; font-weight: 700; line-height: 1.12; letter-spacing: -.03em; color: var(--text);
}
.sbpj-bc__h1 { font-size: 2.1rem; }
.sbpj-bc__h1 em, .sbpj-bc__h2 em {
	font-style: normal;
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-mid) 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.sbpj-bc__tagline {
	font-size: 1rem; line-height: 1.75; color: var(--text-soft);
	max-width: 640px; margin: 14px auto 0;
}

/* ---------- Corps de texte ----------
   ⚠️ PLEINE LARGEUR (Marion, 08/08, 2e passe). Les blocs doivent tomber sur les
   MÊMES bords que la barre de navigation et le pied de page. Une colonne étroite
   centrée (760 px dans une section de 1200) ne s'aligne sur rien et ça se voit.
   Convention de la maison, vérifiée sur oral et fiches : les blocs prennent
   var(--sbpj-content-max), seules les phrases d'accroche centrées restent étroites. */
.sbpj-bc__corps { max-width: none; margin: 0; }

/* Chapô + introduction : le guide impose la reponse des les premieres lignes. */
.sbpj-bc__intro {
	font-size: 1.12rem; line-height: 1.75; color: var(--text);
	margin-bottom: 40px; padding-left: 18px;
	border-left: 3px solid var(--accent);
}
.sbpj-bc__intro strong { font-weight: 700; }
.sbpj-bc__intro a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* H2 alignes A GAUCHE (guide, §10 : texte aligne a gauche), et non centres :
   les mots de gauche sont ceux qui portent, en lecture comme en referencement. */
.sbpj-bc__h2-plein {
	font-size: 1.62rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em;
	color: var(--text); margin: 0 0 16px; padding-top: 6px;
}
.sbpj-bc__h2-plein em {
	font-style: normal;
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-mid) 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
@media ( max-width: 768px ) {
	.sbpj-bc__intro { font-size: 1rem; padding-left: 14px; margin-bottom: 30px; }
	.sbpj-bc__h2-plein { font-size: 1.32rem; }
}
.sbpj-bc__texte { font-size: 1rem; line-height: 1.8; color: var(--text-soft); margin-bottom: 18px; }
.sbpj-bc__texte strong { color: var(--text); font-weight: 700; }
.sbpj-bc__texte a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.sbpj-bc__texte a:hover { color: var(--accent-mid); }
.sbpj-bc__h3 {
	font-size: 1.12rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--text);
	margin: 32px 0 12px; padding-left: 14px; border-left: 3px solid var(--accent);
}

/* Bloc de legitimite (qui parle, et pourquoi c'est fonde a parler).
   ⚠️ Ce n'est pas un bloc auteur : Marion les a exclus des pages. */
.sbpj-bc__legitimite {
	margin-top: 40px; padding: 26px 28px;
	background: rgba(15, 23, 42, 0.028);
	border: 1px solid var(--border); border-radius: 16px;
}
.sbpj-bc__legitimite .sbpj-bc__h3 { margin-top: 0; }
.sbpj-bc__legitimite .sbpj-bc__texte:last-child { margin-bottom: 0; }
@media ( max-width: 600px ) { .sbpj-bc__legitimite { padding: 20px 18px; } }

/* Date de derniere mise a jour : exigee par le guide des PAGES (§3.1).
   Signal de fraicheur pour le lecteur comme pour les moteurs generatifs. */
.sbpj-bc__maj {
	font-size: .85rem; line-height: 1.6; color: var(--text-soft);
	margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border);
}

/* ---------- Listes ---------- */
.sbpj-bc__liste { list-style: none; margin: 0 0 20px; }
.sbpj-bc__liste li {
	position: relative; padding-left: 26px; margin-bottom: 12px;
	font-size: 1rem; line-height: 1.75; color: var(--text-soft);
}
.sbpj-bc__liste li::before {
	content: ''; position: absolute; left: 4px; top: .62em;
	width: 8px; height: 8px; border-radius: 50%;
	background: linear-gradient(135deg, var(--accent), var(--accent-mid));
}
.sbpj-bc__liste li strong { color: var(--text); font-weight: 700; }

/* ---------- Encarts ---------- */
.sbpj-bc__encart {
	font-size: .95rem; line-height: 1.75; color: var(--text);
	background: rgba(122, 47, 143, 0.05); border: 1px solid var(--border);
	border-radius: 16px; padding: 18px 22px; margin: 28px 0 22px;
}
.sbpj-bc__encart p + p { margin-top: 12px; }
.sbpj-bc__encart strong { font-weight: 700; }

/* Encart d'avertissement : ce qui est faux et qu'il ne faut pas croire. */
.sbpj-bc__alerte {
	font-size: .95rem; line-height: 1.75; color: var(--text);
	background: rgba(15, 23, 42, 0.035); border: 1px solid var(--border);
	border-left: 3px solid var(--accent); border-radius: 12px;
	padding: 18px 22px; margin: 24px 0;
}
.sbpj-bc__alerte strong { font-weight: 700; }

/* Citation d'un texte officiel, recopié à la lettre. */
.sbpj-bc__citation {
	font-size: .95rem; line-height: 1.75; color: var(--text-soft); font-style: italic;
	border-left: 3px solid rgba(122, 47, 143, 0.28); padding: 4px 0 4px 18px; margin: 20px 0;
}
.sbpj-bc__source { display: block; font-style: normal; font-size: .82rem; color: var(--text-soft); margin-top: 8px; }
.sbpj-bc__source a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Tableaux ----------
   ⚠️ BUG CORRIGÉ LE 08/08 (signalé par Marion) : GeneratePress impose
   `table, td, th { border: 1px solid rgba(0,0,0,.1) }` et `border-collapse: separate`.
   Résultat : un filet vertical parasite au milieu du tableau et un rendu nu.
   On neutralise donc explicitement les bordures du parent DANS le composant.
   Le tableau déborde à l'intérieur de son conteneur, jamais la page. */
.sbpj-bc__table-wrap {
	overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 26px 0;
	border: 1px solid var(--border); border-radius: 14px;
}
.sbpj-bc__table {
	width: 100%; min-width: 460px; margin: 0;
	border: 0 !important; border-collapse: collapse !important; border-spacing: 0 !important;
	font-size: .95rem;
}
.sbpj-bc__table th, .sbpj-bc__table td {
	border: 0 !important;
	border-bottom: 1px solid var(--border) !important;
	text-align: left; padding: 15px 20px; line-height: 1.65; vertical-align: top;
}
.sbpj-bc__table thead th {
	background: rgba(122, 47, 143, 0.04);
	font-weight: 700; color: var(--text); font-size: .78rem;
	text-transform: uppercase; letter-spacing: .08em;
}
.sbpj-bc__table td { color: var(--text-soft); }
.sbpj-bc__table td strong { color: var(--text); font-weight: 700; }
.sbpj-bc__table tbody tr:last-child th, .sbpj-bc__table tbody tr:last-child td { border-bottom: 0 !important; }
/* Première colonne étroite et lisible : c'est la clé de lecture, pas du texte courant. */
.sbpj-bc__table th:first-child, .sbpj-bc__table td:first-child { width: 22%; white-space: nowrap; }
@media ( max-width: 600px ) {
	.sbpj-bc__table th, .sbpj-bc__table td { padding: 13px 15px; }
	.sbpj-bc__table th:first-child, .sbpj-bc__table td:first-child { width: auto; }
}

/* ---------- Carrefour (liens internes de fin de page) ---------- */
.sbpj-bc__carrefour { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 28px; }
.sbpj-bc__lien {
	display: block; padding: 20px 22px; border: 1px solid var(--border); border-radius: 16px;
	text-decoration: none; background: #fff; transition: border-color .25s, transform .25s;
}
.sbpj-bc__lien:hover { border-color: rgba(122, 47, 143, 0.35); transform: translateY(-2px); }
.sbpj-bc__lien-titre { display: block; font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.sbpj-bc__lien-texte { display: block; font-size: .9rem; line-height: 1.6; color: var(--text-soft); }

/* ---------- Bloc d'offre, unique, en fin de page ----------
   Bandeau violet étoilé (.sbpj-starry) : même famille que les blocs
   de fin des pages livre, fiches et oral. Le décor est injecté par
   sbpj-starry.js, d'où le fond sombre obligatoire (sinon rien ne se voit). */
.sbpj-bc-offre__box {
	max-width: none; margin: 0; text-align: center;
	background: linear-gradient(135deg, #7A2F8F 0%, #4C1D73 45%, #1B0A3D 100%);
	border-radius: 24px; padding: 46px 32px; overflow: hidden;
}
.sbpj-bc-offre__titre { font-size: 1.5rem; font-weight: 800; line-height: 1.25; color: #fff; margin-bottom: 14px; }
.sbpj-bc-offre__texte { font-size: 1rem; line-height: 1.75; color: rgba(255, 255, 255, 0.72); margin: 0 auto 26px; max-width: 620px; }
.sbpj-bc-offre__cta {
	display: inline-block; padding: 17px 40px; border-radius: 14px;
	background: #fff; color: var(--accent-mid);
	font-size: .95rem; font-weight: 800; text-decoration: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
	transition: transform .22s, box-shadow .22s;
}
.sbpj-bc-offre__cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); color: var(--accent-deep); }

/* ---------- Adaptations mobile ---------- */
@media (max-width: 768px) {
	.sbpj-bc__h1 { font-size: 1.65rem; }
	.sbpj-bc__h2 { font-size: 1.5rem; }
	.sbpj-bc__texte, .sbpj-bc__tagline, .sbpj-bc__liste li { font-size: .92rem; }
	.sbpj-bc__h3 { font-size: 1.02rem; }
	.sbpj-bc__encart, .sbpj-bc__alerte, .sbpj-bc__citation { font-size: .88rem; padding-left: 18px; padding-right: 18px; }
	.sbpj-bc__citation { padding-right: 0; }
	.sbpj-bc-offre__box { padding: 28px 20px; }
	.sbpj-bc-offre__titre { font-size: 1.15rem; }
}
@media (max-width: 480px) {
	.sbpj-bc__h1 { font-size: 1.42rem; }
	.sbpj-bc__h2 { font-size: 1.3rem; }
	.sbpj-bc__header { margin-bottom: 32px; }
	.sbpj-bc__table { font-size: .88rem; }
}