/*
 * Thème Bestrecrue pour tout le site — design validé par Ali le 2026-09-24.
 *
 * Il reprend le style de l'application mobile (planche « Dating Application Component Design »
 * d'Abron Studio) aux couleurs de bestrecrue.com : fond de page clair, cartes blanches très
 * arrondies détachées par une ombre plutôt que par un filet, boutons en pilule au libellé très
 * gras, menus en pastilles, chiffres clés au bleu du site.
 *
 * Chargé par commun/templateGeneral.xhtml, donc par toutes les pages qui en héritent (connexion
 * et tout l'espace connecté). Tout est préfixé par .themeBestrecrue, classe posée sur le <body>
 * de ce modèle : la retirer rend au site son apparence d'origine, sans toucher à main.css ni
 * style.css.
 *
 * Voisinage avec design-system.css (feature/design-system) : cette feuille-là ne s'applique
 * qu'aux éléments portant une classe br-* (pages « Bis » et planche designSystemBoutons). Les
 * règles de boutons ci-dessous excluent donc .br-bouton, pour que les deux ne se disputent pas le
 * même élément. Les variables d'ici sont en --br-* et restent attachées à .themeBestrecrue : elles
 * ne remplacent pas les jetons de :root de design-system.css.
 *
 * Couleurs en variables : palette « Bestrecrue » (navy du site) par défaut, « Bestrecrue clair »
 * (bleu du mot « l'éducation. ») avec la classe .clair. Les !important ne visent que des styles
 * écrits en attribut dans les pages, qu'aucune feuille ne peut surcharger autrement.
 */

.themeBestrecrue {
	--br-marque: #032E5B;
	--br-marque-foncee: #032E5B;
	--br-marque-claire: #0868E6;
	--br-fond: #F9FAFB;
	--br-fond-teinte: #E6F3FF;
	--br-champ: #F0F4F8;
	--br-bordure: #DCE5EE;
	--br-texte: #032E5B;
	--br-texte-moyen: #4D668A;
	--br-texte-doux: #748A9D;
	--br-ombre: 0 6px 18px rgba(3, 46, 91, 0.08);
	--br-ombre-bouton: 0 6px 12px rgba(3, 46, 91, 0.18);
	--br-rayon: 24px;
	--br-rayon-m: 16px;
	--br-rayon-s: 12px;
}

.themeBestrecrue.clair {
	--br-marque: #6694FD;
	--br-marque-claire: #6694FD;
	--br-fond-teinte: #EBF1FF;
	--br-ombre: 0 6px 18px rgba(102, 148, 253, 0.14);
	--br-ombre-bouton: 0 6px 12px rgba(102, 148, 253, 0.28);
}

/* ---------------------------------------------------------------------------------------------
 * Page
 */

/* !important : plusieurs pages posent background: #FFF en attribut sur le body.
 * Même bleuté que le .wrapper (main.css, #F5F9FF) à la demande d'Ali (2026-09-25) : le fond de la page
 * ne s'arrête plus en bande au bord du contenu. --br-fond reste inchangé pour les autres usages. */
body.themeBestrecrue {
	background-color: #F5F9FF !important;
}

.themeBestrecrue h1,
.themeBestrecrue h2,
.themeBestrecrue h3 {
	color: var(--br-texte);
	font-family: 'Satoshi-Bold', sans-serif;
}

/* ---------------------------------------------------------------------------------------------
 * Blocs de bienvenue (accueil de chaque profil) : transparents, sur le fond de la page, texte
 * navy ; l'action principale en pilule navy. Ali a préféré ce fond clair au navy plein.
 */

.themeBestrecrue #boxBienvenue {
	background-color: transparent;
}

.themeBestrecrue .blocBienvenue > div:first-child span {
	font-family: 'Satoshi-Black', 'Satoshi-Bold', sans-serif !important;
	font-size: 28px;
	line-height: 1.2;
}

.themeBestrecrue .learningCTA {
	background-color: var(--br-marque) !important;
	color: #FFFFFF !important;
	font-family: 'Satoshi-Black', 'Satoshi-Bold', sans-serif;
	font-size: 14px !important;
	padding: 12px 24px !important;
	border-radius: 999px !important;
	box-shadow: var(--br-ombre-bouton);
}

.themeBestrecrue .learningCTA i {
	color: #FFFFFF !important;
}

.themeBestrecrue .learningCTA:hover {
	opacity: 0.9;
}

/* ---------------------------------------------------------------------------------------------
 * Cartes : blanches, très arrondies, détachées du fond par une ombre plutôt que par un filet.
 */

.themeBestrecrue .box,
.themeBestrecrue .boxIndicateurs,
.themeBestrecrue .workflowContainer {
	/*
	  background-color et non background : la forme raccourcie remettait l'image de fond en
	  répétition, et la bannière posée en attribut sur certaines cartes (parcours learning) se
	  répétait en bandes sur toute la hauteur.
	*/
	background-color: #FFFFFF;
	border: none !important;
	border-radius: var(--br-rayon) !important;
	box-shadow: var(--br-ombre);
}

/*
  Une carte dans une carte ne porte pas une seconde ombre. Elle garde son fond d'origine : un
  aplat teinté essayé d'abord grisait le titre blanc posé sur la bannière du parcours learning.
*/
.themeBestrecrue .box .box,
.themeBestrecrue .box .boxIndicateurs {
	box-shadow: none;
	border-radius: var(--br-rayon-m) !important;
}

/* .box.alt est la variante sans cadre du site : elle le reste. */
.themeBestrecrue .box.alt {
	background-color: transparent;
	box-shadow: none;
	border-radius: 0 !important;
}

.themeBestrecrue .box.dashboard {
	margin: 0 12px 12px 0;
}

.themeBestrecrue .box .header,
.themeBestrecrue .titreIndicateur {
	font-family: 'Satoshi-Bold', sans-serif;
	color: var(--br-texte) !important;
}

/*
  Police seulement, pas de couleur : les tuiles colorées des étapes (placement, sourcing) posent
  le blanc sur .lib et comptent sur l'héritage. Une couleur ici rendait « élève(s) » gris-bleu
  sur fond vert, violet ou jaune (signalé par Ali).
*/
.themeBestrecrue .dashboard .lib .libDiv {
	font-family: 'Satoshi-Medium', sans-serif;
}

/* Les chiffres clés : le jaune d'origine se lisait mal sur blanc, ils passent au bleu du site. */
.themeBestrecrue .dashboard .lib .libDiv .libDivNum,
.themeBestrecrue .nbIndicateur {
	color: var(--br-marque-claire);
	font-family: 'Satoshi-Black', 'Satoshi-Bold', sans-serif;
}

.themeBestrecrue .typeIndicateur {
	border-radius: 999px !important;
	padding: 5px 12px !important;
}

/* Fenêtres PrimeFaces : mêmes arrondis que les cartes. */
.themeBestrecrue .ui-dialog {
	border: none;
	border-radius: var(--br-rayon);
	box-shadow: 0 18px 48px rgba(3, 46, 91, 0.18);
	overflow: hidden;
}

/* ---------------------------------------------------------------------------------------------
 * Boutons : pilule, libellé très gras, comme « Réserver un appel » sur bestrecrue.com.
 */

.themeBestrecrue .button:not(.br-bouton),
.themeBestrecrue button.primary:not(.br-bouton),
.themeBestrecrue input[type="submit"]:not(.br-bouton),
.themeBestrecrue input[type="button"]:not(.br-bouton),
.themeBestrecrue input[type="reset"]:not(.br-bouton) {
	border-radius: 999px;
}

.themeBestrecrue .button.primary:not(.br-bouton),
.themeBestrecrue button.primary:not(.br-bouton),
.themeBestrecrue input[type="submit"].primary:not(.br-bouton),
.themeBestrecrue input[type="button"].primary:not(.br-bouton) {
	background-color: var(--br-marque);
	font-family: 'Satoshi-Black', 'Satoshi-Bold', sans-serif;
	box-shadow: var(--br-ombre-bouton);
}

.themeBestrecrue .button.primary:not(.br-bouton):hover,
.themeBestrecrue button.primary:not(.br-bouton):hover,
.themeBestrecrue input[type="submit"].primary:not(.br-bouton):hover,
.themeBestrecrue input[type="button"].primary:not(.br-bouton):hover,
.themeBestrecrue .button.primary:not(.br-bouton):active,
.themeBestrecrue button.primary:not(.br-bouton):active {
	background-color: var(--br-marque);
	opacity: 0.9;
}

/* ---------------------------------------------------------------------------------------------
 * Champs de saisie : fond clair, arrondi, sans cadre marqué, comme l'application mobile.
 */

.themeBestrecrue input[type="text"],
.themeBestrecrue input[type="email"],
.themeBestrecrue input[type="password"],
.themeBestrecrue input[type="search"],
.themeBestrecrue input[type="tel"],
.themeBestrecrue input[type="number"],
.themeBestrecrue select,
.themeBestrecrue textarea,
.themeBestrecrue .input,
.themeBestrecrue .form-control {
	border-radius: var(--br-rayon-s);
	border-color: var(--br-bordure);
}

.themeBestrecrue input[type="text"]:focus,
.themeBestrecrue input[type="email"]:focus,
.themeBestrecrue input[type="password"]:focus,
.themeBestrecrue input[type="search"]:focus,
.themeBestrecrue select:focus,
.themeBestrecrue textarea:focus,
.themeBestrecrue .input:focus,
.themeBestrecrue .form-control:focus {
	border-color: var(--br-marque-claire);
	box-shadow: 0 0 0 3px var(--br-fond-teinte);
}

/* ---------------------------------------------------------------------------------------------
 * Menus de gauche (tous profils) : entrées en pastilles, la survolée sur l'aplat bleu pâle.
 */

.themeBestrecrue .headerMenuPrincipal {
	font-family: 'Satoshi-Bold', sans-serif;
	color: var(--br-texte);
}

/*
  L'icône et le libellé côte à côte : dans une colonne de 190 px, un libellé long (« Fil
  d'actualités », « Mesures du plan ») passait à la ligne sous l'icône, hors de la pastille
  (signalé par Ali). En flex, il se replie dans sa propre colonne, à droite de l'icône. L'arrondi
  est de 16 px et non en pilule, pour rester propre sur deux lignes.
*/
.themeBestrecrue .headerProfil {
	display: flex;
	align-items: center;
	color: var(--br-texte);
	border-radius: 16px;
	padding: 0.35em 0.25em 0.35em 0.2em;
	line-height: 1.25;
}

.themeBestrecrue .headerProfil:hover {
	background-color: var(--br-fond-teinte);
	border-radius: 16px;
}

.themeBestrecrue .headerProfil span {
	flex: 1 1 auto;
	min-width: 0;
}

.themeBestrecrue .sousMenuIcone {
	flex: 0 0 auto;
	width: 36px;
	margin: 3px 8px 3px 2px;
	padding: 8px 0;
	color: var(--br-marque-claire);
	background-color: var(--br-fond-teinte);
	border-radius: 14px;
}

/* Icônes du menu de gauche : décorrélées des palettes du style du site (demande d'Ali, 2026-09-26 : « laisse-les
   comme c'était avant »). Marine du texte, bicolore par transparence (rendu d'origine de Font Awesome duotone),
   sans pastille de fond, quelle que soit la palette choisie. Les !important l'emportent sur les règles
   html[data-br-theme="…"] qui les recoloraient. */
html .themeBestrecrue .sousMenuIcone,
html[data-br-theme] .themeBestrecrue .sousMenuIcone {
	color: #032E5B !important;
	background-color: transparent !important;
	--fa-primary-color: #032E5B !important;
	--fa-secondary-color: #032E5B !important;
	--fa-primary-opacity: 1 !important;
	--fa-secondary-opacity: 0.4 !important;
}

/* ---------------------------------------------------------------------------------------------
 * Tuiles d'étapes (placement et sourcing) : camaïeu de bleus Bestrecrue, choisi par Ali le
 * 2026-09-24 à la place des huit couleurs vives. Du bleu très clair (première étape) au navy
 * (placé en entreprise), la couleur dit où en est l'élève ; « Rupture à replacer » reste à part,
 * en rouge pâle, parce que c'est une alerte.
 *
 * Les pages peignent ces tuiles par une image de fond (commun/images/cardWorkflow<n>.svg) et
 * posent le blanc du texte en attribut : d'où les !important. Chaque tuile reçoit ses quatre
 * couleurs en variables, les règles communes les appliquent.
 */

.themeBestrecrue .dashboard[style*="cardWorkflow"] {
	--br-tuile-fond: #032E5B;
	--br-tuile-texte: #FFFFFF;
	--br-tuile-num-fond: rgba(255, 255, 255, 0.25);
	--br-tuile-num-texte: #FFFFFF;
	background-image: none !important;
	background-color: var(--br-tuile-fond) !important;
	border-radius: var(--br-rayon-m) !important;
	padding: 0.9em 0.4em 0.6em 0.9em !important;
}

/* Tuiles claires (trois premières teintes) : texte navy, numéro bleu sur pastille blanche. */
.themeBestrecrue .dashboard[style*="cardWorkflow1.svg"],
.themeBestrecrue .dashboard[style*="cardWorkflow2.svg"],
.themeBestrecrue .dashboard[style*="cardWorkflow3.svg"],
.themeBestrecrue .ui-grid-col-6:nth-child(1) > .dashboard[style*="cardWorkflowSourcing"],
.themeBestrecrue .ui-grid-col-6:nth-child(2) > .dashboard[style*="cardWorkflowSourcing"],
.themeBestrecrue .ui-grid-col-6:nth-child(3) > .dashboard[style*="cardWorkflowSourcing"] {
	--br-tuile-texte: #032E5B;
	--br-tuile-num-fond: #FFFFFF;
	--br-tuile-num-texte: #0868E6;
}

.themeBestrecrue .dashboard[style*="cardWorkflow1.svg"],
.themeBestrecrue .ui-grid-col-6:nth-child(1) > .dashboard[style*="cardWorkflowSourcing"] { --br-tuile-fond: #E6F3FF; }
.themeBestrecrue .dashboard[style*="cardWorkflow2.svg"],
.themeBestrecrue .ui-grid-col-6:nth-child(2) > .dashboard[style*="cardWorkflowSourcing"] { --br-tuile-fond: #CFE4FB; }
.themeBestrecrue .dashboard[style*="cardWorkflow3.svg"],
.themeBestrecrue .ui-grid-col-6:nth-child(3) > .dashboard[style*="cardWorkflowSourcing"] { --br-tuile-fond: #A9CBF5; }
.themeBestrecrue .dashboard[style*="cardWorkflow4.svg"],
.themeBestrecrue .ui-grid-col-6:nth-child(4) > .dashboard[style*="cardWorkflowSourcing"] { --br-tuile-fond: #6694FD; }
.themeBestrecrue .dashboard[style*="cardWorkflow5.svg"],
.themeBestrecrue .ui-grid-col-6:nth-child(5) > .dashboard[style*="cardWorkflowSourcing"] { --br-tuile-fond: #0868E6; }
.themeBestrecrue .dashboard[style*="cardWorkflow6.svg"],
.themeBestrecrue .ui-grid-col-6:nth-child(6) > .dashboard[style*="cardWorkflowSourcing"] { --br-tuile-fond: #0A4DAA; }
/* Étape 7 et au-delà : le navy, valeur par défaut ci-dessus. */

/* Rupture à replacer : l'alerte du parcours. */
.themeBestrecrue .dashboard[style*="cardWorkflow8.svg"] {
	--br-tuile-fond: #FDEAEA;
	--br-tuile-texte: #B42323;
	--br-tuile-num-fond: #FFFFFF;
	--br-tuile-num-texte: #B42323;
}

.themeBestrecrue .dashboard[style*="cardWorkflow"] .lib,
.themeBestrecrue .dashboard[style*="cardWorkflow"] .lib .libDiv,
.themeBestrecrue .dashboard[style*="cardWorkflow"] .lib .libDivNum,
.themeBestrecrue .dashboard[style*="cardWorkflow"] .etapeTxt .expand {
	color: var(--br-tuile-texte) !important;
}

.themeBestrecrue .dashboard[style*="cardWorkflow"] .lib .libDivNum {
	font-family: 'Satoshi-Black', 'Satoshi-Bold', sans-serif;
}

.themeBestrecrue .dashboard[style*="cardWorkflow"] .etapeTxt > div {
	background-color: var(--br-tuile-num-fond) !important;
	color: var(--br-tuile-num-texte) !important;
	font-family: 'Satoshi-Bold', sans-serif;
}

/* ---------------------------------------------------------------------------------------------
 * Défilement du menu de gauche : vertical seulement (overflow: scroll affichait aussi une barre
 * horizontale), barre fine aux couleurs du site au lieu de la poignée orange.
 *
 * Hauteur : tout ce qui reste jusqu'au bas de la fenêtre, moins une marge de 16 px. Le haut de la
 * liste est mesuré par commun/assets/js/menu-hauteur.js dans --br-menu-haut ; à défaut (script
 * absent), 40vh, soit les 60 % d'origine. Pas sur téléphone, où le menu devient une barre en bas.
 */

@media screen and (min-width: 737px) {
	.themeBestrecrue .sectionMenu .itemsSectionMenu {
		max-height: calc(100vh - var(--br-menu-haut, 40vh) - 16px);
	}
}

.themeBestrecrue .itemsSectionMenu {
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--br-bordure) transparent;
}

.themeBestrecrue .itemsSectionMenu::-webkit-scrollbar {
	width: 6px;
}

.themeBestrecrue .itemsSectionMenu::-webkit-scrollbar-track {
	background: transparent;
}

.themeBestrecrue .itemsSectionMenu::-webkit-scrollbar-thumb,
.themeBestrecrue .itemsSectionMenu::-webkit-scrollbar-thumb:hover {
	background: var(--br-bordure);
	border-radius: 999px;
}

/* ---------------------------------------------------------------------------------------------
 * Barres de défilement fines sur tout le site (demande d'Ali, 2026-09-25 : « plus fines »).
 * Piège : Chrome (≥ 121) ignore ::-webkit-scrollbar dès qu'un élément déclare scrollbar-width ou
 * scrollbar-color — le menu, les notifications et la grille de l'équipe le faisaient, d'où leur barre
 * épaisse. Pour Chrome et Safari on remet ces deux propriétés à « auto » et on dessine la barre en
 * ::-webkit-scrollbar ; Firefox, qui ne connaît que la propriété standard, garde « thin ».
 * ------------------------------------------------------------------------------------------- */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: #C9D3E3;
	border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
	background: #9FB0CC;
}

@supports not (-moz-appearance: none) {
	.itemsSectionMenu,
	.themeBestrecrue .itemsSectionMenu,
	.themeBestrecrue .asideNotif,
	.themeBestrecrue .staffAccueilGrille {
		scrollbar-width: auto;
		scrollbar-color: auto;
	}
}

@supports (-moz-appearance: none) {
	html {
		scrollbar-width: thin;
		scrollbar-color: #C9D3E3 transparent;
	}
}

/* ---------------------------------------------------------------------------------------------
 * Sections repliables du menu école (rangé par tâches, validé par Ali le 2026-09-24). Le titre se
 * clique ; les sections pliées sont listées dans l'attribut data-menu-plie de <html>, posé par
 * commun/assets/js/menu-hauteur.js. Une section dont aucune entrée n'est visible pour le compte
 * (droits) disparaît avec son titre.
 */

.themeBestrecrue .menuSection:not(:has(li)) {
	display: none;
}

/*
  Titres de section : des intercalaires, pas des entrées. Plus petits, espacés, gris-bleu, sans
  filet (retiré à la demande d'Ali) — les entrées restent seules en navy
  (demande d'Ali). La règle .headerMenuPrincipal du thème, plus haut, reste valable ailleurs.
*/
.themeBestrecrue .headerMenuPrincipal.menuSectionTitre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	user-select: none;
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 11px;
	letter-spacing: 0.09em;
	color: var(--br-texte-doux);
	margin: 14px 0 4px 0;
	padding: 10px 6px 4px 8px;
	border-radius: 0;
	transition: color 0.15s;
}

.themeBestrecrue .headerMenuPrincipal.menuSectionTitre:hover {
	color: var(--br-marque-claire);
}

/*
  Menus des modules Sourcing, Learning et Intervenants (2026-09-25, Ali : « tout le module sourcing
  est moche ») : même allure que le menu Placement. Le titre « MENU PRINCIPAL » disparaît (le menu
  Placement n'en a pas) ; les autres titres (« ACTUALITÉS »…) deviennent des intercalaires.
*/
.themeBestrecrue .headerMenuPrincipal.menuPrincipalTitre {
	display: none;
}

.themeBestrecrue .sectionMenu .headerMenuPrincipal:not(.menuSectionTitre) {
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 11px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--br-texte-doux);
	margin: 14px 0 4px 0;
	padding: 10px 6px 4px 8px;
}

.themeBestrecrue .menuSectionTitre:focus-visible {
	outline: 2px solid var(--br-marque-claire);
	outline-offset: 2px;
	border-radius: 6px;
}

/*
  Chevron fin et arrondi (tracé SVG en masque, il prend la couleur du titre) : vers le bas quand
  la section est ouverte, vers la droite quand elle est pliée. Estompé (Ali), net au survol.
*/
.themeBestrecrue .menuSectionTitre::after {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 0.45;
	transition: transform 0.2s ease, opacity 0.15s;
}

.themeBestrecrue .menuSectionTitre:hover::after {
	opacity: 1;
}

html[data-menu-plie~="eleves"] .themeBestrecrue .menuSection[data-section="eleves"] .menuSectionCorps,
html[data-menu-plie~="entreprises"] .themeBestrecrue .menuSection[data-section="entreprises"] .menuSectionCorps,
html[data-menu-plie~="evenements"] .themeBestrecrue .menuSection[data-section="evenements"] .menuSectionCorps,
html[data-menu-plie~="communication"] .themeBestrecrue .menuSection[data-section="communication"] .menuSectionCorps,
html[data-menu-plie~="pilotage"] .themeBestrecrue .menuSection[data-section="pilotage"] .menuSectionCorps,
html[data-menu-plie~="parametres"] .themeBestrecrue .menuSection[data-section="parametres"] .menuSectionCorps {
	display: none;
}

html[data-menu-plie~="eleves"] .themeBestrecrue .menuSection[data-section="eleves"] .menuSectionTitre::after,
html[data-menu-plie~="entreprises"] .themeBestrecrue .menuSection[data-section="entreprises"] .menuSectionTitre::after,
html[data-menu-plie~="evenements"] .themeBestrecrue .menuSection[data-section="evenements"] .menuSectionTitre::after,
html[data-menu-plie~="communication"] .themeBestrecrue .menuSection[data-section="communication"] .menuSectionTitre::after,
html[data-menu-plie~="pilotage"] .themeBestrecrue .menuSection[data-section="pilotage"] .menuSectionTitre::after,
html[data-menu-plie~="parametres"] .themeBestrecrue .menuSection[data-section="parametres"] .menuSectionTitre::after {
	transform: rotate(-90deg);
}

/* Lanceur de modules (icône grille de l'entête) : les deux carrés gris passent au bleu clair
   du site (demande d'Ali, 2026-09-24). Couche secondaire de l'icône duotone. */
.themeBestrecrue .fa-grid-2 {
	--fa-secondary-color: #6694FD;
	--fa-secondary-opacity: 1;
}

/* ---------------------------------------------------------------------------------------------
 * Fiche résumé d'un élève, partout où le site la montre (classe ficheEleve, posée sur 18 cartes
 * dans 10 fichiers : CVThèque, listes par étape via favoris/sectionProfil, sourcing et alumni via
 * favoris/sectionProspect, prospects, listes, participants de session, candidats d'une offre,
 * demandes d'appui, books, accueils) : carte blanche détachée ; nom en avant, étape en pastille,
 * dernière connexion et diplôme en gris discret ; actions en pastilles rondes. Les règles en
 * .ligneEleve ne concernent que la mise en page en colonnes de la CVThèque.
 * Demande d'Ali, 2026-09-24. Les !important battent les styles écrits en attribut dans la page
 * et l'ombre posée au survol par mouveHaut().
 */

.themeBestrecrue .ficheEleve {
	background-color: #FFFFFF !important;
	border-radius: var(--br-rayon-m) !important;
	box-shadow: 0 2px 8px rgba(3, 46, 91, 0.05) !important;
	padding: 16px 20px !important;
	margin: 0 0 12px 0 !important;
	transform: none !important;
	transition: box-shadow 0.15s;
}

.themeBestrecrue .ficheEleve:hover {
	box-shadow: 0 8px 22px rgba(3, 46, 91, 0.10) !important;
}

.themeBestrecrue .ficheEleve > .row,
.themeBestrecrue .ficheEleve.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 0;
}

.themeBestrecrue .ficheEleve > .row > *,
.themeBestrecrue .ficheEleve.row > * {
	padding-top: 0 !important;
}

.themeBestrecrue .ligneEleve .col-1 img {
	width: 52px !important;
	height: 52px !important;
	object-fit: cover;
	margin-top: 0 !important;
}

/* Nom */
.themeBestrecrue .ficheEleve .pseudo {
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 17px !important;
	color: var(--br-texte);
	margin-right: 4px;
}

/* Étape du parcours : pastille arrondie, sans l'encadré de carte que .workflowContainer reçoit
   ailleurs dans le thème. */
.themeBestrecrue .ficheEleve .workflowContainer {
	background: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	margin-left: 10px !important;
}

.themeBestrecrue .ficheEleve .workflowContainer > span {
	border-radius: 999px !important;
	padding: 4px 10px !important;
	font-family: 'Satoshi-Medium', sans-serif;
	white-space: nowrap;
}

/* Dernière connexion : information secondaire. */
.themeBestrecrue .ficheEleve .fa-clock,
.themeBestrecrue .ficheEleve .fa-clock + span {
	color: var(--br-texte-doux) !important;
}

.themeBestrecrue .ficheEleve .fa-clock {
	font-size: 12px;
	margin-left: 14px !important;
}

.themeBestrecrue .ficheEleve .diplome {
	color: var(--br-texte-moyen) !important;
	font-size: 12px !important;
}

/* Actions : pastilles rondes bleu pâle, icône au bleu du site. */
.themeBestrecrue .ligneEleve .col-3 {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

.themeBestrecrue .ficheEleve .tooltip > i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0 !important;
	border-radius: 999px;
	background-color: var(--br-fond-teinte);
	color: var(--br-marque-claire);
	font-size: 15px;
	transition: background-color 0.15s, color 0.15s;
}

.themeBestrecrue .ficheEleve a:hover .tooltip > i {
	background-color: var(--br-marque-claire);
	color: #FFFFFF;
	--fa-secondary-color: #FFFFFF;
}

.themeBestrecrue .ligneEleve .col-1:last-child {
	display: flex;
	justify-content: center;
}

.themeBestrecrue .ligneEleve .col-7 {
	padding-left: 16px !important;
}

/* Un peu d'air entre les pastilles d'action, là où la page les met simplement côte à côte. */
.themeBestrecrue .ficheEleve a > .tooltip {
	display: inline-block;
	margin-left: 6px;
}

/* « Dernière connexion il y a… » ne se coupe plus en deux sous un nom long : le bloc passe entier
   à la ligne si la place manque. */
.themeBestrecrue .ficheEleve span:has(> .fa-clock) {
	display: inline-block;
	white-space: nowrap;
}


/*
  Gabarit « ui-grid » de la fiche résumé (favoris/sectionProfil : listes par étape ; participants
  d'une session) : même disposition compacte que la CVThèque — photo réduite, nom, étape et
  dernière connexion sur une ligne, diplôme dessous, actions alignées à droite. Demande d'Ali.
*/
.themeBestrecrue .ficheEleve > .ui-grid {
	display: flex;
	align-items: center;
	gap: 16px;
}

.themeBestrecrue .ficheEleve > .ui-grid > [class*="ui-grid-col-"] {
	float: none;
	width: auto;
	padding: 0 !important;
}

.themeBestrecrue .ficheEleve > .ui-grid > [class*="ui-grid-col-"]:first-child {
	flex: 0 0 52px;
}

.themeBestrecrue .ficheEleve > .ui-grid > [class*="ui-grid-col-"]:first-child img {
	width: 52px !important;
	height: 52px !important;
	object-fit: cover;
}

.themeBestrecrue .ficheEleve > .ui-grid > .ui-grid-col-9 {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 10px;
	row-gap: 4px;
}

.themeBestrecrue .ficheEleve > .ui-grid > .ui-grid-col-9 > [class*="ui-grid-col-"] {
	float: none;
	width: auto;
	margin: 0 !important;
	padding: 0;
}

/* Ordre : nom, étape + connexion, actions à droite ; diplôme et alertes sur la ligne suivante. */
.themeBestrecrue .ficheEleve > .ui-grid > .ui-grid-col-9 > :nth-child(1) { order: 1; }
.themeBestrecrue .ficheEleve > .ui-grid > .ui-grid-col-9 > :nth-child(3) { order: 2; }
.themeBestrecrue .ficheEleve > .ui-grid > .ui-grid-col-9 > :nth-child(2) { order: 3; margin-left: auto !important; }
.themeBestrecrue .ficheEleve > .ui-grid > .ui-grid-col-9 > :nth-child(n+4) { order: 4; flex-basis: 100%; }

.themeBestrecrue .ficheEleve > .ui-grid > .ui-grid-col-9 .workflowContainer {
	margin-left: 0 !important;
}

/* ---------------------------------------------------------------------------------------------
 * Accueil école : carte de l'école à la place de l'image fixe (demande d'Ali, 2026-09-24), dans
 * le style de la planche Dribbble du thème — bandeau coloré semé d'étoiles, tuile blanche au
 * logo de l'école, carte blanche en surimpression avec les chiffres en pastilles.
 */

.themeBestrecrue .carteEcole {
	max-width: 420px;
	margin: 0 0 0 auto;
	border-radius: 28px;
	background-color: #FFFFFF;
	box-shadow: 0 12px 32px rgba(3, 46, 91, 0.12);
	overflow: hidden;
}

.themeBestrecrue .carteEcoleBandeau {
	position: relative;
	padding: 28px 24px 56px;
	text-align: center;
	color: #FFFFFF;
	background-color: #0868E6;
	background-image:
		radial-gradient(rgba(255, 255, 255, 0.35) 1.2px, transparent 1.6px),
		linear-gradient(135deg, #6694FD 0%, #0868E6 55%, #032E5B 100%);
	background-size: 22px 22px, 100% 100%;
}

.themeBestrecrue .carteEcoleLogo {
	width: 84px;
	height: 84px;
	margin: 0 auto 14px;
	border-radius: 22px;
	background-color: #FFFFFF;
	box-shadow: 0 8px 20px rgba(3, 46, 91, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.themeBestrecrue .carteEcoleLogo img {
	max-width: 70px;
	max-height: 70px;
	object-fit: contain;
}

.themeBestrecrue .carteEcoleLogoRepli {
	display: none;
	font-size: 34px;
	color: var(--br-marque-claire);
	--fa-secondary-color: #6694FD;
	--fa-secondary-opacity: 0.5;
}

.themeBestrecrue .carteEcoleLogo.sansLogo img {
	display: none;
}

.themeBestrecrue .carteEcoleLogo.sansLogo .carteEcoleLogoRepli {
	display: inline-block;
}

.themeBestrecrue .carteEcoleNom {
	font-family: 'Satoshi-Black', 'Satoshi-Bold', sans-serif;
	font-size: 24px;
	line-height: 1.15;
}

.themeBestrecrue .carteEcoleSous {
	margin-top: 6px;
	font-family: 'Satoshi-Medium', sans-serif;
	font-size: 14px;
	opacity: 0.9;
}

.themeBestrecrue .carteEcoleCorps {
	position: relative;
	margin: -34px 12px 12px;
	padding: 18px 18px 8px;
	border-radius: 22px;
	background-color: #FFFFFF;
	box-shadow: 0 6px 18px rgba(3, 46, 91, 0.08);
}

.themeBestrecrue .carteEcoleTitre {
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 16px;
	color: var(--br-texte);
	margin-bottom: 8px;
}

.themeBestrecrue .carteEcoleLigne {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 0;
	font-family: 'Satoshi-Medium', sans-serif;
	font-size: 15px;
	color: var(--br-texte);
}

.themeBestrecrue .carteEcoleLigne i {
	color: var(--br-marque-claire);
	margin-right: 8px;
	font-size: 13px;
}

.themeBestrecrue .carteEcoleChiffre {
	min-width: 36px;
	padding: 4px 12px;
	border-radius: 999px;
	text-align: center;
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 14px;
	color: var(--br-marque-claire);
	background-color: var(--br-fond-teinte);
}

.themeBestrecrue .carteEcoleChiffreFort {
	color: #FFFFFF;
	background-color: var(--br-marque-claire);
}

/*
  Carte de l'école, version compacte (retour d'Ali : trop de vide sous le bloc « Hello », la carte
  était bien plus haute que lui). Bandeau en ligne — logo à gauche, nom et sous-titre à côté — et
  chiffres sur une rangée : grand chiffre, libellé dessous. Environ 230 px au lieu de 490.
*/
.themeBestrecrue .carteEcole {
	max-width: 540px;
}

.themeBestrecrue .carteEcoleBandeau {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 16px;
	align-items: center;
	text-align: left;
	padding: 20px 22px 48px;
}

.themeBestrecrue .carteEcoleLogo {
	grid-row: 1 / span 2;
	width: 64px;
	height: 64px;
	margin: 0;
	border-radius: 18px;
}

.themeBestrecrue .carteEcoleLogo img {
	max-width: 52px;
	max-height: 52px;
}

.themeBestrecrue .carteEcoleLogoRepli {
	font-size: 28px;
}

.themeBestrecrue .carteEcoleNom {
	font-size: 22px;
	align-self: end;
}

.themeBestrecrue .carteEcoleSous {
	margin-top: 2px;
	align-self: start;
}

.themeBestrecrue .carteEcoleCorps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 8px;
	margin-top: -30px;
	padding: 14px 16px 16px;
}

.themeBestrecrue .carteEcoleTitre {
	grid-column: 1 / -1;
	font-size: 14px;
	margin-bottom: 6px;
}

.themeBestrecrue .carteEcoleLigne {
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 6px;
	padding: 0;
	text-align: center;
	font-size: 13px;
	color: var(--br-texte-moyen);
}

.themeBestrecrue .carteEcoleLigne i {
	display: none;
}

.themeBestrecrue .carteEcoleChiffre {
	min-width: 0;
	padding: 6px 14px;
	font-family: 'Satoshi-Black', 'Satoshi-Bold', sans-serif;
	font-size: 20px;
}

/* ---------------------------------------------------------------------------------------------
 * Colonne des notifications (section .asideNotif, accueils école / sourcing / alumni) : carte
 * blanche arrondie, titre avec cloche en pastille, notifications en lignes arrondies, et un état
 * vide sobre — petite cloche en pastille et texte discret, au lieu de la grande illustration et
 * de ses 100 px de marges (retour d'Ali : « moche, surtout quand elle est vide »).
 */

.themeBestrecrue .asideNotif {
	border: none !important;
	border-radius: var(--br-rayon) !important;
	background-color: #FFFFFF;
	box-shadow: var(--br-ombre);
	padding: 18px 14px 12px !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	scrollbar-width: thin;
	scrollbar-color: var(--br-bordure) transparent;
}

.themeBestrecrue .asideNotif h4 {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 4px 10px !important;
	margin: 0;
	font-size: 16px !important;
}

.themeBestrecrue .asideNotif h4 > i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0 !important;
	border-radius: 12px;
	background-color: var(--br-fond-teinte);
	color: var(--br-marque-claire);
	font-size: 15px;
}

.themeBestrecrue .asideNotif h4 a {
	color: var(--br-texte);
	font-family: 'Satoshi-Bold', sans-serif;
	border-bottom: none;
}

/* État vide. */
.themeBestrecrue .asideNotif img[src*="pasDeNotifications"] {
	display: none;
}

.themeBestrecrue .asideNotif img[src*="pasDeNotifications"] + div {
	width: auto !important;
	margin: 6px 4px 8px !important;
	padding: 22px 16px;
	border-radius: var(--br-rayon-m);
	background-color: var(--br-fond);
	text-align: center;
	font-family: 'Satoshi-Medium', sans-serif !important;
	font-size: 14px;
	color: var(--br-texte-doux) !important;
}

.themeBestrecrue .asideNotif img[src*="pasDeNotifications"] + div::before {
	content: "";
	display: block;
	width: 44px;
	height: 44px;
	margin: 0 auto 10px;
	border-radius: 999px;
	background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230868E6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6'/%3E%3Cpath d='M9 17v1a3 3 0 0 0 6 0v-1'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
	box-shadow: 0 4px 12px rgba(3, 46, 91, 0.06);
}

.themeBestrecrue .asideNotif > div > span:has(img[src*="pasDeNotifications"]) {
	display: block;
	margin-bottom: 0 !important;
}

/* Liste des notifications : lignes arrondies, les non lues sur fond bleu pâle. */
.themeBestrecrue .asideNotif .notifications li {
	border-left: none !important;
	border-radius: var(--br-rayon-s);
	margin-bottom: 6px;
	padding: 10px 10px 10px 4px !important;
	transition: background-color 0.15s;
}

.themeBestrecrue .asideNotif .notifications .notification_false {
	background-color: var(--br-fond-teinte);
}

.themeBestrecrue .asideNotif .notifications .notification_true {
	background-color: var(--br-fond);
}

.themeBestrecrue .asideNotif .notifications li:hover {
	background-color: #DCEBFB;
}

.themeBestrecrue .asideNotif .iconeNotifWorkflow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 2px 0 0 6px !important;
	border-radius: 10px;
	background-color: #FFFFFF;
	color: var(--br-marque-claire);
	font-size: 14px;
}

.themeBestrecrue .asideNotif .dateNotification {
	color: var(--br-texte-doux);
	font-size: 11px;
}

/* ---------------------------------------------------------------------------------------------
 * Administration : liste des écoles (ecole/administrationEcoleBlocCentral.xhtml). Plus de logos
 * (demande d'Ali) : cartes compactes — initiale en pastille, nom, flèche — et filtre de saisie.
 */

.themeBestrecrue .adminEcolesEntete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.themeBestrecrue .adminEcolesNombre {
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 14px;
	color: var(--br-texte-moyen);
}

.themeBestrecrue .adminEcolesFiltre {
	max-width: 320px;
	height: 42px;
	padding: 0 16px;
	border: 1px solid var(--br-bordure);
	border-radius: 999px;
	background-color: var(--br-fond);
	font-family: 'Satoshi-Medium', sans-serif;
	font-size: 14px;
	color: var(--br-texte);
}

.themeBestrecrue .adminEcolesGrille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 10px;
}

.themeBestrecrue .adminEcoleCarte {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--br-bordure);
	border-radius: var(--br-rayon-m);
	background-color: #FFFFFF;
	text-decoration: none;
	border-bottom: 1px solid var(--br-bordure);
	transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.themeBestrecrue .adminEcoleCarte:hover {
	background-color: var(--br-fond-teinte);
	border-color: transparent;
	box-shadow: var(--br-ombre);
}

.themeBestrecrue .adminEcoleInitiale {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background-color: var(--br-fond-teinte);
	color: var(--br-marque-claire);
	font-family: 'Satoshi-Black', 'Satoshi-Bold', sans-serif;
	font-size: 16px;
}

.themeBestrecrue .adminEcoleCarte:hover .adminEcoleInitiale {
	background-color: #FFFFFF;
}

.themeBestrecrue .adminEcoleNom {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 15px;
	color: var(--br-texte);
}

.themeBestrecrue .adminEcoleFleche {
	color: var(--br-texte-doux);
	font-size: 12px;
}

/* ---------------------------------------------------------------------------------------------
 * Accueil école, admin seulement : « Tout le staff » (general/blocCentral.xhtml, classe
 * staffAccueil). Cartes compactes comme la liste des écoles : initiale, nom, poste, école, statut
 * du compte en pastille ; filtre de saisie ; la liste défile au-delà de ~4 rangées.
 */

.themeBestrecrue .staffAccueil {
	margin: 10px 0 24px;
	padding: 20px;
	border-radius: var(--br-rayon);
	background-color: #FFFFFF;
	box-shadow: var(--br-ombre);
}

.themeBestrecrue .staffAccueilEntete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.themeBestrecrue .staffAccueilTitre {
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 17px;
	color: var(--br-texte);
}

.themeBestrecrue .staffAccueilNombre {
	margin-left: 6px;
	padding: 2px 10px;
	border-radius: 999px;
	background-color: var(--br-fond-teinte);
	color: var(--br-marque-claire);
	font-size: 13px;
}

.themeBestrecrue .staffAccueilGrille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 10px;
	max-height: 420px;
	overflow-y: auto;
	padding-right: 4px;
	scrollbar-width: thin;
	scrollbar-color: var(--br-bordure) transparent;
}

.themeBestrecrue .staffCarteConteneur {
	display: block;
	min-width: 0;
}

.themeBestrecrue .staffCarte {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	padding: 12px 14px;
	border: 1px solid var(--br-bordure);
	border-radius: var(--br-rayon-m);
	background-color: #FFFFFF;
	text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s;
}

.themeBestrecrue .staffCarte:hover {
	background-color: var(--br-fond-teinte);
	border-color: transparent;
}

.themeBestrecrue .staffCarteTexte {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.themeBestrecrue .staffCarteNom {
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 15px;
	color: var(--br-texte);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.themeBestrecrue .staffCartePoste,
.themeBestrecrue .staffCarteEcole {
	font-family: 'Satoshi-Medium', sans-serif;
	font-size: 12px;
	color: var(--br-texte-moyen);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.themeBestrecrue .staffCarteEcole {
	color: var(--br-texte-doux);
}

.themeBestrecrue .staffStatut {
	flex: 0 0 auto;
	padding: 3px 10px;
	border-radius: 999px;
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 11px;
}

.themeBestrecrue .staffStatut.actif { background-color: #E8F5EC; color: #0F7A55; }
.themeBestrecrue .staffStatut.attente { background-color: #FFF4CC; color: #8A5A00; }
.themeBestrecrue .staffStatut.bloque { background-color: #FDEAEA; color: #B42323; }

/* ---------------------------------------------------------------------------------------------
 * Encart « Créons du lien pour favoriser l'apprentissage… » (5 pages : general/barreDroite,
 * organisme/visualiserUnOrganisme, fiche/fiche, ficheProspect, ficheIntervenant ; repérées par
 * l'illustration commun/images/img-1.jpg suivie de son texte). Retour d'Ali : « moche ». Titre plus
 * lisible, illustration réduite, texte à 13 px au lieu de 11, fin des 90 px de vide sous le texte.
 */

.themeBestrecrue div:has(+ span > img[src*="images/img-1.jpg"]) > h4 {
	padding: 18px 16px 0 !important;
	margin: 0;
}

.themeBestrecrue div:has(+ span > img[src*="images/img-1.jpg"]) > h4 > div {
	font-family: 'Satoshi-Black', 'Satoshi-Bold', sans-serif !important;
	font-size: 17px;
	line-height: 1.3;
	color: var(--br-texte) !important;
}

/* :has(+ div) : seulement l'image de l'encart, suivie de son texte. La même illustration sert seule,
   en décor, dans candidature/candidaturesBlocCentral.xhtml et annonce/candidaturesAnnonceBlocCentral.xhtml,
   et suivie d'une liste d'actions dans commun/barreDroite.xhtml : ces trois usages ne changent pas
   (relevé par la supervision). */
.themeBestrecrue img[src*="images/img-1.jpg"]:has(+ div) {
	display: block;
	width: 96px !important;
	margin: 14px auto 10px !important;
	border-radius: 18px;
}

.themeBestrecrue img[src*="images/img-1.jpg"] + div {
	width: auto !important;
	margin: 0 18px 18px !important;
	padding: 14px 16px;
	border-radius: var(--br-rayon-m);
	background-color: var(--br-fond);
	font-family: 'Satoshi-Medium', sans-serif !important;
	font-size: 13px !important;
	line-height: 1.55;
	color: var(--br-texte-moyen) !important;
}

.themeBestrecrue img[src*="images/img-1.jpg"] + div br {
	display: none;
}

/* ---------------------------------------------------------------------------------------------
 * Accueil école, carte pleine largeur (demande d'Ali, 2026-09-24 soir) : le bonjour et le bouton
 * « Accéder à la CVThèque » quittent la colonne de gauche pour le bandeau de la carte — logo, bonjour
 * et nom de l'école à gauche, bouton blanc à droite ; chiffres en pastilles dans la carte blanche.
 */

.themeBestrecrue .carteEcole.carteEcoleLarge {
	max-width: none;
	margin: 0;
}

.themeBestrecrue .carteEcoleLarge .carteEcoleBandeau {
	grid-template-columns: auto 1fr auto;
	column-gap: 20px;
	padding: 24px 28px 64px;
}

.themeBestrecrue .carteEcoleLarge .carteEcoleLogo {
	width: 72px;
	height: 72px;
	border-radius: 20px;
}

.themeBestrecrue .carteEcoleLarge .carteEcoleLogo img {
	max-width: 58px;
	max-height: 58px;
}

.themeBestrecrue .carteEcoleLarge .carteEcoleNom {
	font-size: 30px;
}

.themeBestrecrue .carteEcoleLarge .carteEcoleSous {
	font-size: 15px;
}

.themeBestrecrue .carteEcoleLarge a.carteEcoleAction {
	grid-column: 3;
	grid-row: 1 / span 2;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	border-radius: 999px;
	background-color: #FFFFFF;
	color: var(--br-marque) !important;
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 15px;
	white-space: nowrap;
	text-decoration: none !important;
	box-shadow: 0 6px 16px rgba(3, 46, 91, 0.18);
	transition: transform .15s ease, box-shadow .15s ease;
}

.themeBestrecrue .carteEcoleLarge a.carteEcoleAction:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(3, 46, 91, 0.24);
}

.themeBestrecrue .carteEcoleLarge a.carteEcoleAction i {
	color: var(--br-marque-claire);
	font-size: 16px;
}

.themeBestrecrue .carteEcoleLarge .carteEcoleCorps {
	margin: -40px 20px 20px;
	padding: 18px 24px 20px;
}

.themeBestrecrue .carteEcoleLarge .carteEcoleTitre {
	font-size: 16px;
}

.themeBestrecrue .carteEcoleLarge .carteEcoleLigne {
	font-size: 14px;
}

.themeBestrecrue .carteEcoleLarge .carteEcoleChiffre {
	padding: 8px 18px;
	font-size: 24px;
}

/* Écran étroit : le bouton passe sous le bonjour, sur toute la largeur du bandeau. */
@media (max-width: 760px) {
	.themeBestrecrue .carteEcoleLarge .carteEcoleBandeau {
		grid-template-columns: auto 1fr;
	}
	.themeBestrecrue .carteEcoleLarge a.carteEcoleAction {
		grid-column: 1 / -1;
		grid-row: 3;
		justify-content: center;
		margin-top: 16px;
	}
	.themeBestrecrue .carteEcoleLarge .carteEcoleNom {
		font-size: 24px;
	}
}

/* ---------------------------------------------------------------------------------------------
 * Messagerie (/mail/mails) au style du thème (demande d'Ali, 2026-09-25 : « les messages sont
 * moches ») : fond clair, conversations en lignes arrondies, bulles douces — reçues en blanc bordé,
 * envoyées au bleu de marque —, dates discrètes, saisie en pilule. Les styles en ligne de la page
 * sont écrasés ici (!important), sans toucher à sa structure.
 */

.themeBestrecrue .messagerie {
	background-color: var(--br-fond) !important;
	font-family: 'Satoshi-Regular', sans-serif;
}

/* Colonne des conversations */
.themeBestrecrue .messagerie .row > .col-3:first-child {
	background-color: #FFFFFF;
	box-shadow: none !important;
	border-right: 1px solid var(--br-bordure);
}

.themeBestrecrue .messagerie .tooltipDroite {
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 18px;
	color: var(--br-texte);
}

.themeBestrecrue .messagerie ul.posts {
	padding: 8px 10px !important;
}

.themeBestrecrue .messagerie ul.posts li {
	height: auto !important;
	min-height: 76px;
	margin: 0 0 4px !important;
	padding: 4px 6px !important;
	border: none !important;
	border-radius: var(--br-rayon-s) !important;
	background: transparent !important;
	transition: background-color .15s ease;
}

.themeBestrecrue .messagerie ul.posts li:hover {
	background-color: var(--br-fond-teinte) !important;
}

.themeBestrecrue .messagerie ul.posts li img {
	width: 44px !important;
	height: 44px !important;
	margin: 14px 12px 0 6px !important;
	object-fit: cover;
	box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px var(--br-bordure);
}

.themeBestrecrue .messagerie .pseudo {
	display: block;
	color: var(--br-texte) !important;
	font-family: 'Satoshi-Bold', sans-serif !important;
	font-size: 15px !important;
	line-height: 1.3;
}

.themeBestrecrue .messagerie .labelMessage {
	display: block;
	margin-top: 2px;
	color: var(--br-texte-doux) !important;
	font-family: 'Satoshi-Regular', sans-serif !important;
	font-size: 13px !important;
	line-height: 1.35;
}

.themeBestrecrue .messagerie ul.posts .row {
	flex-wrap: nowrap;
}

.themeBestrecrue .messagerie ul.posts .row > .col-9 {
	flex: 1 1 auto;
	width: auto !important;
	min-width: 0;
}

.themeBestrecrue .messagerie ul.posts .row > .col-3 {
	flex: 0 0 64px;
	width: 64px !important;
	padding-left: 4px !important;
}

.themeBestrecrue .messagerie ul.posts .col-9 > div + div {
	overflow: hidden;
}

.themeBestrecrue .messagerie .dateNotification {
	display: block;
	padding-right: 4px !important;
	line-height: 1.5;
	margin-top: 18px !important;
	color: var(--br-texte-doux) !important;
	font-family: 'Satoshi-Medium', sans-serif !important;
	font-size: 11px !important;
	text-align: right;
}

/* Discussion */
.themeBestrecrue .messagerie #form\:consultationDiscussion > .row:first-child {
	box-shadow: none !important;
	border-bottom: 1px solid var(--br-bordure);
	background-color: #FFFFFF;
}

/*
  En-tête de la discussion (retour d'Ali, 2026-09-25 : « un rectangle au-dessus du nom ») : la
  colonne descendait de 1vh sous le haut de page, laissant une bande grise au-dessus de l'en-tête
  blanc ; et l'en-tête, haut de 9vh, posait le nom en haut d'un grand cadre vide. Colonnes collées
  en haut, en-tête à hauteur du contenu, nom centré verticalement.
*/
.themeBestrecrue .messagerie #form\:consultationDiscussion,
.themeBestrecrue .messagerie #form\:photoFicheEmail {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* La grille remonte la ligne de 2em (.row.gtr-uniform), que le padding-top des colonnes compensait :
   ce padding étant retiré ci-dessus, la ligne remontait sous l'en-tête et coupait le nom (2026-09-25). */
.themeBestrecrue .messagerie > .row.gtr-uniform {
	margin-top: 0 !important;
}

.themeBestrecrue .messagerie > .row.gtr-uniform > * {
	padding-top: 0 !important;
}

/* Corbeille de la conversation, sous le nom dans la colonne de droite (2026-09-25). */
.themeBestrecrue .messagerie .messagerieSupprimer {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	padding: 8px 14px;
	border: 1px solid var(--br-bordure);
	border-radius: 10px;
	background: #FFFFFF;
	color: var(--br-texte-doux) !important;
	font-size: 13px;
	text-decoration: none;
}

.themeBestrecrue .messagerie .messagerieSupprimer:hover {
	color: #D64545 !important;
	border-color: #F3C4C4;
	background: #FFF5F5;
}

/* Accusés façon Messenger (messagerie-statut.js) : état sous le dernier message envoyé. */
.themeBestrecrue .messagerie .msgStatut {
	display: block;
	clear: both;
	float: right;
	margin: 4px 2px 0 0;
	font-family: 'Satoshi-Medium', sans-serif;
	font-size: 11px;
	color: var(--br-texte-doux);
	white-space: nowrap;
}

.themeBestrecrue .messagerie .msgStatut i {
	margin-right: 4px;
	font-size: 10px;
}

.themeBestrecrue .messagerie .msgStatut-vu {
	color: #2F6BFF;
}

.themeBestrecrue .messagerie .msgStatut-attente {
	color: #A9B4C6;
}

/* Bulle affichée avant la réponse du serveur. */
.themeBestrecrue .messagerie .msgEnAttente {
	overflow: hidden;
	padding: 8px 0;
}

.themeBestrecrue .messagerie .msgEnAttente .bulleEnvoyee {
	float: right;
	max-width: 50vw;
	padding: 10px 14px;
	border-radius: 18px 18px 4px 18px;
	background-color: #2F6BFF;
	color: #FFFFFF;
	opacity: .55;
	white-space: pre-wrap;
}

.themeBestrecrue .messagerie #form\:consultationDiscussion > .row:first-child {
	height: auto !important;
	min-height: 0 !important;
	margin-top: 0 !important;
	padding: 14px 20px !important;
	display: flex;
	align-items: center;
}

.themeBestrecrue .messagerie #form\:consultationDiscussion > .row:first-child .row {
	margin: 0 !important;
	align-items: center;
}

.themeBestrecrue .messagerie #form\:consultationDiscussion > .row:first-child div[style*="margin-top: 16px"],
.themeBestrecrue .messagerie #form\:consultationDiscussion > .row:first-child a[style*="margin: 20px"] {
	margin-top: 0 !important;
}

.themeBestrecrue .messagerie #form\:consultationDiscussion .pseudo {
	font-size: 16px !important;
}

.themeBestrecrue .messagerie .historiqueMailRecu span,
.themeBestrecrue .messagerie .historiqueMailRecu .col-12[style*="text-align: right"] {
	color: var(--br-texte-doux) !important;
	font-family: 'Satoshi-Medium', sans-serif;
	font-size: 11px !important;
}

.themeBestrecrue .messagerie label.bulleMessage {
	max-width: min(560px, 70%) !important;
	margin-top: 4px;
	padding: 12px 16px !important;
	font-family: 'Satoshi-Regular', sans-serif !important;
	font-size: 15px;
	line-height: 1.5;
	white-space: normal;
	word-break: break-word;
}

.themeBestrecrue .messagerie label.bulleRecue {
	background-color: #FFFFFF !important;
	color: var(--br-texte) !important;
	border: 1px solid var(--br-bordure);
	border-radius: 4px 18px 18px 18px !important;
	box-shadow: 0 2px 6px rgba(3, 46, 91, 0.05);
}

.themeBestrecrue .messagerie label.bulleEnvoyee {
	background-color: var(--br-marque-claire) !important;
	color: #FFFFFF !important;
	border-radius: 18px 4px 18px 18px !important;
	box-shadow: 0 4px 10px rgba(8, 104, 230, 0.18);
}

.themeBestrecrue .messagerie label.bulleEnvoyee a {
	color: #FFFFFF !important;
	text-decoration: underline;
}

/* Saisie */
.themeBestrecrue .messagerie textarea.textarea {
	min-height: 52px;
	padding: 14px 20px !important;
	border: 1px solid var(--br-bordure) !important;
	border-radius: 26px !important;
	background-color: #FFFFFF !important;
	color: var(--br-texte);
	font-family: 'Satoshi-Regular', sans-serif;
	font-size: 15px;
	box-shadow: 0 2px 8px rgba(3, 46, 91, 0.05);
	resize: none;
}

.themeBestrecrue .messagerie textarea.textarea:focus {
	border-color: var(--br-marque-claire) !important;
	box-shadow: 0 0 0 3px var(--br-fond-teinte);
}

.themeBestrecrue .messagerie a:has(> img[src*="iconSendMessage"]) {
	display: inline-flex;
	width: 48px !important;
	height: 48px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--br-marque-claire) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 3 16 16'%3E%3Cpath fill='%23fff' d='M15.274,4.528,4.641,9.163a.244.244,0,0,0,.009.443l2.876,1.625a.464.464,0,0,0,.53-.052l5.672-4.89c.038-.032.127-.093.162-.058s-.02.125-.052.162L8.931,11.92a.462.462,0,0,0-.046.553l1.88,3.016a.245.245,0,0,0,.44-.006L15.6,4.849A.244.244,0,0,0,15.274,4.528Z'/%3E%3C/svg%3E") no-repeat 52% 50% / 22px 22px;
	box-shadow: var(--br-ombre-bouton);
}

/* L'icône d'origine (cercle gris) laisse la place au bouton bleu dessiné ci-dessus. */
.themeBestrecrue .messagerie img[src*="iconSendMessage"] {
	visibility: hidden;
}

/* Fiche de l'interlocuteur, à droite */
.themeBestrecrue .messagerie #form\:photoFicheEmail {
	border-left: 1px solid var(--br-bordure) !important;
	background-color: #FFFFFF;
}

.themeBestrecrue .messagerie #form\:photoFicheEmail img {
	width: 120px !important;
	height: 120px !important;
	object-fit: cover;
	box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 5px var(--br-bordure);
}

/*
  Messagerie, saisie collée en bas (demande d'Ali, 2026-09-25) : la colonne de discussion devient une
  pile verticale — en-tête, fil qui prend toute la place restante, saisie tout en bas. Le champ tient
  deux à trois lignes et suit la hauteur de la fenêtre (clamp), comme la zone de rédaction de LinkedIn.
*/
.themeBestrecrue .messagerie #form\:consultationDiscussion {
	display: flex !important;
	flex-direction: column;
}

.themeBestrecrue .messagerie #form\:consultationDiscussion > section.scroller {
	flex: 1 1 auto;
	height: auto !important;
	min-height: 0;
}

.themeBestrecrue .messagerie #form\:consultationDiscussion > .row:has(textarea) {
	flex: 0 0 auto;
	height: auto !important;
	margin: auto 0 0 !important;
	padding: 12px 16px 16px !important;
	display: flex;
	align-items: flex-end;
	gap: 12px;
	border-top: 1px solid var(--br-bordure);
	background-color: #FFFFFF;
}

.themeBestrecrue .messagerie #form\:consultationDiscussion > .row:has(textarea) textarea.textarea {
	flex: 1 1 auto;
	width: auto !important;
	height: clamp(76px, 13vh, 150px) !important;
	max-height: none !important;
	margin: 0 !important;
	border-radius: 18px !important;
	line-height: 1.5;
	resize: vertical;
	overflow-y: auto;
}

.themeBestrecrue .messagerie #form\:consultationDiscussion > .row:has(textarea) a:has(> img[src*="iconSendMessage"]) {
	flex: 0 0 48px;
	margin: 0 0 6px !important;
}

/* ---------------------------------------------------------------------------------------------
 * Fenêtre « Nouveau message » des fiches (demande d'Ali, 2026-09-25, « comme LinkedIn ») : ancrée en
 * bas à droite, en-tête cliquable qui la réduit en bandeau, destinataire en pastille, grand champ,
 * bouton « Envoyer » en pilule. mail/fenetreNouveauMessage.xhtml.
 */

.themeBestrecrue .fenetreMessage {
	position: fixed;
	right: 24px;
	bottom: 0;
	z-index: 9500;
	width: min(420px, calc(100vw - 32px));
	height: min(560px, calc(100vh - 110px));
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
	border: 1px solid var(--br-bordure);
	border-bottom: none;
	border-radius: 14px 14px 0 0;
	box-shadow: 0 -4px 28px rgba(3, 46, 91, 0.18);
	font-family: 'Satoshi-Regular', sans-serif;
	color: var(--br-texte);
	text-align: left;
}

.themeBestrecrue .fenetreMessage[hidden] {
	display: none;
}

.themeBestrecrue .fenetreMessage.fenetreMessageReduite {
	height: auto;
}

.themeBestrecrue .fenetreMessage.fenetreMessageReduite .fenetreMessageDedans {
	display: none;
}

.themeBestrecrue .fenetreMessageEntete {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 10px 10px 10px 16px;
	border-bottom: 1px solid var(--br-bordure);
}

.themeBestrecrue .fenetreMessage button {
	margin: 0;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--br-texte) !important;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.themeBestrecrue .fenetreMessage .fenetreMessageTitre {
	flex: 1 1 auto;
	padding: 0 !important;
	height: auto;
	line-height: 1.4;
	text-align: left;
	font-family: 'Satoshi-Bold', sans-serif !important;
	font-size: 16px !important;
}

.themeBestrecrue .fenetreMessage .fenetreMessageIcone {
	width: 34px;
	height: 34px;
	padding: 0 !important;
	line-height: 34px;
	border-radius: 50% !important;
	font-size: 16px;
}

.themeBestrecrue .fenetreMessage .fenetreMessageIcone:hover {
	background: var(--br-fond-teinte) !important;
}

.themeBestrecrue .fenetreMessageDedans {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.themeBestrecrue .fenetreMessageDestinataire {
	padding: 10px 16px;
	border-bottom: 1px solid var(--br-bordure);
}

.themeBestrecrue .fenetreMessagePuce {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 999px;
	background-color: var(--br-marque-claire);
	color: #FFFFFF;
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 14px;
}

.themeBestrecrue .fenetreMessageProfil {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--br-bordure);
}

.themeBestrecrue .fenetreMessageInitiale {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	line-height: 48px;
	border-radius: 50%;
	text-align: center;
	background-color: var(--br-fond-teinte);
	color: var(--br-marque-claire);
	font-family: 'Satoshi-Black', 'Satoshi-Bold', sans-serif;
	font-size: 20px;
}

.themeBestrecrue .fenetreMessageNom {
	display: flex;
	flex-direction: column;
	font-size: 13px;
	color: var(--br-texte-doux);
}

.themeBestrecrue .fenetreMessageNom strong {
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 15px;
	color: var(--br-texte);
}

.themeBestrecrue .fenetreMessageCorps {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: 12px 16px 14px;
}

.themeBestrecrue .fenetreMessageCorps > span {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.themeBestrecrue .fenetreMessage textarea.fenetreMessageTexte {
	flex: 1 1 auto;
	width: 100% !important;
	min-height: 120px;
	margin: 0;
	padding: 12px 14px !important;
	border: 1px solid transparent !important;
	border-radius: 10px !important;
	background-color: var(--br-champ) !important;
	color: var(--br-texte);
	font-family: 'Satoshi-Regular', sans-serif;
	font-size: 15px;
	line-height: 1.5;
	resize: none;
	box-shadow: none !important;
}

.themeBestrecrue .fenetreMessage textarea.fenetreMessageTexte:focus {
	background-color: #FFFFFF !important;
	border-color: var(--br-marque-claire) !important;
}

.themeBestrecrue .fenetreMessagePied {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 14px;
	padding-top: 12px;
}

.themeBestrecrue .fenetreMessage a.fenetreMessageEnvoyer {
	display: inline-block;
	padding: 8px 20px;
	border-radius: 999px;
	background-color: var(--br-marque-claire);
	color: #FFFFFF !important;
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 14px;
	text-decoration: none !important;
}

.themeBestrecrue .fenetreMessage a.fenetreMessageEnvoyer:hover {
	background-color: var(--br-marque);
}

.themeBestrecrue .fenetreMessage a.fenetreMessageLien {
	color: var(--br-marque-claire) !important;
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 14px;
}

.themeBestrecrue .fenetreMessageEnvoye {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1 1 auto;
	text-align: center;
	color: var(--br-texte-moyen);
	font-size: 14px;
}

.themeBestrecrue .fenetreMessageEnvoye > i {
	font-size: 40px;
	color: #1F9D61;
}

.themeBestrecrue .fenetreMessageEnvoye strong {
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 17px;
	color: var(--br-texte);
}

/*
  Messagerie, ajustements (retour d'Ali, 2026-09-25 après la saisie collée en bas) : la colonne de
  discussion, plus haute que la fenêtre (100vh − 3.5em, alors que l'en-tête du site en fait près de 90
  px), faisait défiler la page et coupait le nom en haut ; et la saisie, décalée par la gouttière de la
  colonne, prenait trop de hauteur. Colonne sans gouttière (le fil et la saisie portent leurs propres
  marges), champ plus bas ; sa hauteur exacte est posée par le script de mailsBlocCentral.xhtml.
*/
.themeBestrecrue .messagerie #form\:consultationDiscussion {
	height: calc(100vh - 3.5em) !important;
	padding: 0 !important;
	overflow: hidden;
}

.themeBestrecrue .messagerie #form\:consultationDiscussion > .row:first-child {
	margin: 0 !important;
}

.themeBestrecrue .messagerie #form\:consultationDiscussion > section.scroller {
	margin: 0 !important;
	padding: 16px 20px 8px !important;
}

.themeBestrecrue .messagerie #form\:consultationDiscussion > .row:has(textarea) {
	margin: auto 0 0 !important;
	padding: 12px 20px 14px !important;
}

.themeBestrecrue .messagerie #form\:consultationDiscussion > .row:has(textarea) textarea.textarea {
	height: clamp(56px, 9vh, 110px) !important;
	min-height: 56px;
	border-radius: 22px !important;
}

.themeBestrecrue .messagerie #form\:consultationDiscussion > .row:has(textarea) a:has(> img[src*="iconSendMessage"]) {
	margin: 0 0 4px !important;
}

/* ---------------------------------------------------------------------------------------------
 * Accueil école, carte « Monitoring offres » avec répartitions (demande d'Ali, 2026-09-25) : la carte
 * s'allonge, l'illustration s'efface, et des onglets Secteur / Contrat / Niveau / Région montrent les
 * cinq premières valeurs en barres. stats-offres.js.
 */
.themeBestrecrue .carteMonitoringOffres.avecStats {
	height: auto !important;
	min-height: 180px;
	background-image: none !important;
	background-color: #FFFFFF;
	border-radius: var(--br-rayon-m) !important;
	box-shadow: var(--br-ombre);
}

.themeBestrecrue .statsOffres {
	clear: both;
	padding-top: 6px;
}

.themeBestrecrue .statsOffresOnglets {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 6px 0 10px;
}

.themeBestrecrue .statsOffresOnglets button {
	margin: 0;
	height: auto;
	padding: 4px 10px;
	border: none !important;
	border-radius: 999px;
	background: var(--br-champ) !important;
	box-shadow: none !important;
	color: var(--br-texte-moyen) !important;
	font-family: 'Satoshi-Medium', sans-serif;
	font-size: 12px;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.themeBestrecrue .statsOffresOnglets button.actif {
	background: var(--br-marque-claire) !important;
	color: #FFFFFF !important;
}

.themeBestrecrue .statsOffresLigne {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 38px;
	align-items: center;
	gap: 8px;
	padding: 3px 0;
	font-size: 12px;
	color: var(--br-texte);
}

.themeBestrecrue .statsOffresLibelle {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.themeBestrecrue .statsOffresBarre {
	height: 6px;
	border-radius: 999px;
	background: var(--br-fond-teinte);
	overflow: hidden;
}

.themeBestrecrue .statsOffresPlein {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--br-marque-claire);
}

.themeBestrecrue .statsOffresPourcent {
	text-align: right;
	font-family: 'Satoshi-Bold', sans-serif;
	color: var(--br-texte);
}

.themeBestrecrue .statsOffresNote {
	margin-top: 6px;
	font-size: 11px;
	color: var(--br-texte-doux);
}

/* Fenêtre « Nouveau message » commune (fenetre-message.js) : case WhatsApp et message d'erreur. */
.themeBestrecrue .fenetreMessage .fenetreMessagePied .fenetreMessageWhatsapp {
	margin: 0 auto 0 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--br-texte-moyen);
	cursor: pointer;
}

.themeBestrecrue .fenetreMessage .fenetreMessageWhatsapp[hidden],
.themeBestrecrue .fenetreMessage [hidden] {
	display: none !important;
}

.themeBestrecrue .fenetreMessage .fenetreMessageWhatsapp input {
	position: static;
	opacity: 1;
	width: 16px;
	height: 16px;
	margin: 0;
	appearance: auto;
	-webkit-appearance: checkbox;
}

.themeBestrecrue .fenetreMessageErreur {
	min-height: 0;
	margin-top: 8px;
	color: #C2410C;
	font-size: 13px;
}

.themeBestrecrue .fenetreMessageErreur:empty {
	display: none;
}

/*
  Accueil école, alignement (demande d'Ali, 2026-09-25) : la barre « Par quoi veux-tu commencer ? », la
  carte de l'école et les trois tuiles partagent les mêmes bords gauche et droit, et le même écart
  vertical entre elles. La carte perdait 10 à 15 px de chaque côté dans le cadre de bienvenue de la
  page ; les écarts allaient de 10 à 30 px selon les blocs.
*/
.themeBestrecrue {
	--br-ecart-accueil: 28px;
}

/*
  Et la même ligne de départ en haut pour les trois colonnes (retour d'Ali, capture de 16:45) : le menu
  commence 43 px sous l'en-tête, le bloc Notifications à 41,5 px (position fixe, marge de −5 px), la barre à
  35 px. La barre et les Notifications descendent sur le menu.
*/
.themeBestrecrue .ceHaut {
	margin-top: 8px !important;
	margin-bottom: var(--br-ecart-accueil) !important;
}

.themeBestrecrue .asideNotif {
	margin-top: -3px !important;
}

.themeBestrecrue #boxBienvenue {
	margin-top: 0 !important;
	margin-bottom: var(--br-ecart-accueil) !important;
}

.themeBestrecrue #boxBienvenue:has(.carteEcoleLarge) > div {
	padding: 0 !important;
	margin: 0 !important;
}

.themeBestrecrue #boxBienvenue:has(.carteEcoleLarge) .ui-grid-col-12 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Les trois tuiles : même hauteur, sans marge basse propre (l'écart est porté par #boxBienvenue). */
.themeBestrecrue #boxBienvenue .box {
	margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------------------------
 * Accueil école, carte « Organismes » avec statistiques par organisme (demande d'Ali, 2026-09-25) :
 * élèves suivis, placés, taux de placement, offres ; six lignes, puis « Voir les N organismes ».
 */
.themeBestrecrue .carteMonitoringOrganismes.avecStats {
	height: auto !important;
	min-height: 180px;
	background-image: none !important;
	background-color: #FFFFFF;
	border-radius: var(--br-rayon-m) !important;
	box-shadow: var(--br-ombre);
}

.themeBestrecrue .statsOrganismes {
	clear: both;
	padding-top: 6px;
	color: var(--br-texte);
}

.themeBestrecrue .statsOrgaTotal {
	margin: 4px 0 10px;
	font-family: 'Satoshi-Medium', sans-serif;
	font-size: 12px;
	color: var(--br-texte-moyen);
}

.themeBestrecrue .statsOrgaLigne {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) 48px 48px minmax(70px, 1fr) 52px;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	border-top: 1px solid var(--br-bordure);
	font-size: 12px;
	text-align: right;
}

.themeBestrecrue .statsOrgaLigne > span:first-child {
	text-align: left;
}

.themeBestrecrue .statsOrgaEntete {
	border-top: none;
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 11px;
	color: var(--br-texte-doux);
}

.themeBestrecrue .statsOrgaNom {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: 'Satoshi-Medium', sans-serif;
}

.themeBestrecrue .statsOrgaTaux {
	display: flex;
	align-items: center;
	gap: 6px;
}

.themeBestrecrue .statsOrgaTaux .statsOffresBarre {
	flex: 1 1 auto;
}

.themeBestrecrue .statsOrgaTaux b {
	flex: 0 0 34px;
	font-family: 'Satoshi-Bold', sans-serif;
	font-weight: normal;
}

.themeBestrecrue .statsOrgaCachee {
	display: none;
}

.themeBestrecrue .statsOrganismes button.statsOrgaPlus {
	margin: 8px 0 0;
	height: auto;
	padding: 0;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--br-marque-claire) !important;
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 12px;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}


/*
  Accueil école, « Accès rapide » (demande d'Ali, 2026-09-25) : à la place des trois tuiles fixes, les six
  actions les plus utilisées par le compte (acces-rapide.js). Une rangée de tuiles compactes égales :
  icône en pastille, libellé sur une ligne ; trois colonnes, deux sur écran étroit.
*/
.themeBestrecrue .accesRapideTitre {
	margin: 0 0 12px;
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 16px;
	color: var(--br-texte);
}

.themeBestrecrue .accesRapideGrille {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.themeBestrecrue .accesRapide button.accesRapideTuile {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 14px 16px !important;
	border: 1px solid var(--br-bordure) !important;
	border-radius: var(--br-rayon-s) !important;
	background: #FFFFFF !important;
	box-shadow: 0 1px 4px rgba(3, 46, 91, 0.04) !important;
	color: var(--br-texte) !important;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.3;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.themeBestrecrue .accesRapide button.accesRapideTuile:hover {
	transform: translateY(-1px);
	border-color: #C9DAF0 !important;
	box-shadow: 0 6px 16px rgba(3, 46, 91, 0.08) !important;
}

.themeBestrecrue .accesRapideIcone {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}

.themeBestrecrue .accesRapideIcone.violet { background: #F1E9FF; color: #7B3FE4; }
.themeBestrecrue .accesRapideIcone.bleu { background: #E6F3FF; color: #0868E6; }
.themeBestrecrue .accesRapideIcone.jaune { background: #FFF4D6; color: #D89B00; }
.themeBestrecrue .accesRapideIcone.vert { background: #E3F7EC; color: #0E9F5A; }
.themeBestrecrue .accesRapideIcone.gris { background: var(--br-champ); color: var(--br-texte-moyen); }

.themeBestrecrue .accesRapideLibelle {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 14px;
}

@media (max-width: 900px) {
	.themeBestrecrue .accesRapideGrille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* Accès rapide : les actions au-delà des six premières, derrière « Afficher plus d'actions ». */
.themeBestrecrue .accesRapide .accesRapideEnPlus {
	display: none !important;
}

.themeBestrecrue .accesRapide.accesRapideOuvert .accesRapideEnPlus {
	display: flex !important;
}

.themeBestrecrue .accesRapide button.accesRapidePlus {
	display: block;
	margin: 12px auto 0;
	height: auto;
	padding: 6px 14px;
	border: none !important;
	border-radius: 999px;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--br-marque-claire) !important;
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 13px;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.themeBestrecrue .accesRapide button.accesRapidePlus:hover {
	background: var(--br-fond-teinte) !important;
}



/* ---------------------------------------------------------------------------------------------
 * Style du site au choix de l'utilisateur (demande d'Ali, 2026-09-25) : A « Navy » = le style actuel (aucune
 * règle), B « Bleu clair », C « Blanc ». html[data-br-theme] est posé par style-du-site.js avant l'affichage.
 * Les pages suivent par les variables --br-* ; les éléments aux couleurs écrites en dur les plus visibles
 * (boutons principaux, en-têtes de rubrique, barre de l'assistant) sont repris ici.
 */
/* Palettes nettement distinctes du style A (bleu Bestrecrue) : B ciel, C graphite. */
html[data-br-theme="B"] .themeBestrecrue {
	--br-marque: #1C84C6;
	--br-marque-claire: #29A3E4;
	--br-fond-teinte: #E2F4FC;
	--br-texte: #0B3B5C;
	--br-ombre: 0 6px 18px rgba(41, 163, 228, 0.14);
	--br-ombre-bouton: 0 6px 12px rgba(41, 163, 228, 0.28);
}

html[data-br-theme="C"] .themeBestrecrue {
	--br-marque: #1F2937;
	--br-marque-claire: #374151;
	--br-fond-teinte: #EEF0F3;
	--br-texte: #1F2937;
	--br-bordure: #E5E7EB;
	--br-ombre: 0 2px 8px rgba(17, 24, 39, 0.06);
	--br-ombre-bouton: none;
}

html[data-br-theme="C"] body.themeBestrecrue {
	background-color: #F7F8FA !important;
}

html[data-br-theme="B"] .themeBestrecrue .button.primary,
html[data-br-theme="C"] .themeBestrecrue .button.primary {
	background-color: var(--br-marque) !important;
	box-shadow: var(--br-ombre-bouton);
}

html[data-br-theme="B"] .themeBestrecrue .button.primary:hover,
html[data-br-theme="C"] .themeBestrecrue .button.primary:hover {
	background-color: var(--br-marque-claire) !important;
}

html[data-br-theme="B"] .themeBestrecrue .header .message,
html[data-br-theme="C"] .themeBestrecrue .header .message {
	color: var(--br-texte) !important;
}

html[data-br-theme="B"] .ceHaut {
	--ceH-marque: #29A3E4;
	--ceH-fond: #EEF8FD;
}

html[data-br-theme="C"] .ceHaut {
	--ceH-marque: #1F2937;
	--ceH-fond: #F3F4F6;
	--ceH-texte: #111827;
}

html[data-br-theme="B"] .themeBestrecrue .chatEcole-bouton {
	background-color: #1C84C6 !important;
}

html[data-br-theme="C"] .themeBestrecrue .chatEcole-bouton {
	background-color: #1F2937 !important;
}

/* Boutons secondaires (contour) et icônes duotone du menu : même couleur que le style choisi. */
html[data-br-theme="B"] .themeBestrecrue .button:not(.primary):not(.br-bouton),
html[data-br-theme="C"] .themeBestrecrue .button:not(.primary):not(.br-bouton) {
	border-color: var(--br-marque) !important;
	color: var(--br-marque) !important;
}

html[data-br-theme="B"] .themeBestrecrue .sousMenuIcone,
html[data-br-theme="C"] .themeBestrecrue .sousMenuIcone {
	--fa-primary-color: var(--br-marque-claire);
	--fa-secondary-color: var(--br-marque-claire);
}

/* ---------------------------------------------------------------------------------------------
 * Style du site, suite (demande d'Ali, 2026-09-25) : quatre palettes de plus (D rose, E vert, F violet,
 * G orange), mêmes règles que B et C ; barres de défilement aux couleurs du style ; bandeau de la carte
 * Hello teinté pour D à G.
 */
html[data-br-theme="D"] .themeBestrecrue {
	--br-marque: #B0265E;
	--br-marque-claire: #E23E7C;
	--br-fond-teinte: #FCE7F0;
	--br-texte: #5C1433;
	--br-ombre: 0 6px 18px rgba(226, 62, 124, 0.14);
	--br-ombre-bouton: 0 6px 12px rgba(226, 62, 124, 0.28);
}

html[data-br-theme="D"] .ceHaut {
	--ceH-marque: #E23E7C;
	--ceH-fond: #FCE7F0;
}

html[data-br-theme="D"] .themeBestrecrue .chatEcole-bouton {
	background-color: #B0265E !important;
}

html[data-br-theme="D"] .themeBestrecrue .carteEcoleLarge .carteEcoleBandeau {
	background: #FCE7F0 !important;
	background-image: none !important;
	color: #5C1433;
}

html[data-br-theme="D"] .themeBestrecrue .carteEcoleLarge .carteEcoleNom {
	color: #5C1433;
}

html[data-br-theme="D"] .themeBestrecrue .carteEcoleLarge .carteEcoleSous {
	color: #B0265E;
}

html[data-br-theme="E"] .themeBestrecrue {
	--br-marque: #15784A;
	--br-marque-claire: #1FA463;
	--br-fond-teinte: #E3F6EC;
	--br-texte: #0D3D27;
	--br-ombre: 0 6px 18px rgba(31, 164, 99, 0.14);
	--br-ombre-bouton: 0 6px 12px rgba(31, 164, 99, 0.28);
}

html[data-br-theme="E"] .ceHaut {
	--ceH-marque: #1FA463;
	--ceH-fond: #E3F6EC;
}

html[data-br-theme="E"] .themeBestrecrue .chatEcole-bouton {
	background-color: #15784A !important;
}

html[data-br-theme="E"] .themeBestrecrue .carteEcoleLarge .carteEcoleBandeau {
	background: #E3F6EC !important;
	background-image: none !important;
	color: #0D3D27;
}

html[data-br-theme="E"] .themeBestrecrue .carteEcoleLarge .carteEcoleNom {
	color: #0D3D27;
}

html[data-br-theme="E"] .themeBestrecrue .carteEcoleLarge .carteEcoleSous {
	color: #15784A;
}

html[data-br-theme="F"] .themeBestrecrue {
	--br-marque: #5B3CC4;
	--br-marque-claire: #7C5CFA;
	--br-fond-teinte: #EFEBFF;
	--br-texte: #2A1C63;
	--br-ombre: 0 6px 18px rgba(124, 92, 250, 0.14);
	--br-ombre-bouton: 0 6px 12px rgba(124, 92, 250, 0.28);
}

html[data-br-theme="F"] .ceHaut {
	--ceH-marque: #7C5CFA;
	--ceH-fond: #EFEBFF;
}

html[data-br-theme="F"] .themeBestrecrue .chatEcole-bouton {
	background-color: #5B3CC4 !important;
}

html[data-br-theme="F"] .themeBestrecrue .carteEcoleLarge .carteEcoleBandeau {
	background: #EFEBFF !important;
	background-image: none !important;
	color: #2A1C63;
}

html[data-br-theme="F"] .themeBestrecrue .carteEcoleLarge .carteEcoleNom {
	color: #2A1C63;
}

html[data-br-theme="F"] .themeBestrecrue .carteEcoleLarge .carteEcoleSous {
	color: #5B3CC4;
}

html[data-br-theme="G"] .themeBestrecrue {
	--br-marque: #B8450B;
	--br-marque-claire: #EA6A1A;
	--br-fond-teinte: #FFEEDF;
	--br-texte: #5A2406;
	--br-ombre: 0 6px 18px rgba(234, 106, 26, 0.14);
	--br-ombre-bouton: 0 6px 12px rgba(234, 106, 26, 0.28);
}

html[data-br-theme="G"] .ceHaut {
	--ceH-marque: #EA6A1A;
	--ceH-fond: #FFEEDF;
}

html[data-br-theme="G"] .themeBestrecrue .chatEcole-bouton {
	background-color: #B8450B !important;
}

html[data-br-theme="G"] .themeBestrecrue .carteEcoleLarge .carteEcoleBandeau {
	background: #FFEEDF !important;
	background-image: none !important;
	color: #5A2406;
}

html[data-br-theme="G"] .themeBestrecrue .carteEcoleLarge .carteEcoleNom {
	color: #5A2406;
}

html[data-br-theme="G"] .themeBestrecrue .carteEcoleLarge .carteEcoleSous {
	color: #B8450B;
}

html[data-br-theme="D"] .themeBestrecrue .button.primary,
html[data-br-theme="E"] .themeBestrecrue .button.primary,
html[data-br-theme="F"] .themeBestrecrue .button.primary,
html[data-br-theme="G"] .themeBestrecrue .button.primary {
	background-color: var(--br-marque) !important;
	box-shadow: var(--br-ombre-bouton);
}

html[data-br-theme="D"] .themeBestrecrue .button.primary:hover,
html[data-br-theme="E"] .themeBestrecrue .button.primary:hover,
html[data-br-theme="F"] .themeBestrecrue .button.primary:hover,
html[data-br-theme="G"] .themeBestrecrue .button.primary:hover {
	background-color: var(--br-marque-claire) !important;
}

html[data-br-theme="D"] .themeBestrecrue .header .message,
html[data-br-theme="E"] .themeBestrecrue .header .message,
html[data-br-theme="F"] .themeBestrecrue .header .message,
html[data-br-theme="G"] .themeBestrecrue .header .message {
	color: var(--br-texte) !important;
}

html[data-br-theme="D"] .themeBestrecrue .button:not(.primary):not(.br-bouton),
html[data-br-theme="E"] .themeBestrecrue .button:not(.primary):not(.br-bouton),
html[data-br-theme="F"] .themeBestrecrue .button:not(.primary):not(.br-bouton),
html[data-br-theme="G"] .themeBestrecrue .button:not(.primary):not(.br-bouton) {
	border-color: var(--br-marque) !important;
	color: var(--br-marque) !important;
}

html[data-br-theme="D"] .themeBestrecrue .sousMenuIcone,
html[data-br-theme="E"] .themeBestrecrue .sousMenuIcone,
html[data-br-theme="F"] .themeBestrecrue .sousMenuIcone,
html[data-br-theme="G"] .themeBestrecrue .sousMenuIcone {
	--fa-primary-color: var(--br-marque-claire);
	--fa-secondary-color: var(--br-marque-claire);
}

/* Barres de défilement (menu de gauche, listes, page) : la couleur du style, pour tous les styles. */
html[data-br-theme] {
	scrollbar-color: var(--br-defil, #9DB7D8) transparent;
}

html[data-br-theme="A"] { --br-defil: #8FB3E8; }
html[data-br-theme="B"] { --br-defil: #7CC6EE; }
html[data-br-theme="C"] { --br-defil: #9CA3AF; }
html[data-br-theme="D"] { --br-defil: #EE8DB2; }
html[data-br-theme="E"] { --br-defil: #7ACCA3; }
html[data-br-theme="F"] { --br-defil: #B2A2FB; }
html[data-br-theme="G"] { --br-defil: #F4A56E; }

html[data-br-theme] .themeBestrecrue .itemsSectionMenu {
	scrollbar-color: var(--br-defil) transparent;
}

html[data-br-theme] .themeBestrecrue .itemsSectionMenu::-webkit-scrollbar-thumb,
html[data-br-theme] .themeBestrecrue .itemsSectionMenu::-webkit-scrollbar-thumb:hover,
html[data-br-theme]::-webkit-scrollbar-thumb {
	background: var(--br-defil);
	border-radius: 999px;
}

html[data-br-theme]::-webkit-scrollbar {
	width: 10px;
}

html[data-br-theme]::-webkit-scrollbar-track {
	background: transparent;
}

/* ---------------------------------------------------------------------------------------------
 * Style du site, tuiles d'étapes (demande d'Ali, 2026-09-25 : « quand on change de couleur, cette partie
 * est trop bleue ») : pour les styles B à G, le camaïeu des tuiles « Zoom sur les étapes » et des barres
 * de répartition se calcule sur la couleur du style (du plus clair à la couleur de texte) ; « Rupture à
 * replacer » garde son rouge d'alerte. Le style A garde le camaïeu bleu d'origine.
 */
html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .dashboard[style*="cardWorkflow"] {
	--br-tuile-fond: var(--br-texte);
}

html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .dashboard[style*="cardWorkflow1.svg"],
html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .ui-grid-col-6:nth-child(1) > .dashboard[style*="cardWorkflowSourcing"],
html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .dashboard[style*="cardWorkflow2.svg"],
html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .ui-grid-col-6:nth-child(2) > .dashboard[style*="cardWorkflowSourcing"],
html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .dashboard[style*="cardWorkflow3.svg"],
html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .ui-grid-col-6:nth-child(3) > .dashboard[style*="cardWorkflowSourcing"] {
	--br-tuile-texte: var(--br-texte);
	--br-tuile-num-texte: var(--br-marque-claire);
}

html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .dashboard[style*="cardWorkflow1.svg"],
html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .ui-grid-col-6:nth-child(1) > .dashboard[style*="cardWorkflowSourcing"] { --br-tuile-fond: color-mix(in srgb, var(--br-marque-claire) 10%, #FFFFFF); }
html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .dashboard[style*="cardWorkflow2.svg"],
html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .ui-grid-col-6:nth-child(2) > .dashboard[style*="cardWorkflowSourcing"] { --br-tuile-fond: color-mix(in srgb, var(--br-marque-claire) 22%, #FFFFFF); }
html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .dashboard[style*="cardWorkflow3.svg"],
html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .ui-grid-col-6:nth-child(3) > .dashboard[style*="cardWorkflowSourcing"] { --br-tuile-fond: color-mix(in srgb, var(--br-marque-claire) 40%, #FFFFFF); }
html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .dashboard[style*="cardWorkflow4.svg"],
html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .ui-grid-col-6:nth-child(4) > .dashboard[style*="cardWorkflowSourcing"] { --br-tuile-fond: color-mix(in srgb, var(--br-marque-claire) 75%, #FFFFFF); }
html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .dashboard[style*="cardWorkflow5.svg"],
html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .ui-grid-col-6:nth-child(5) > .dashboard[style*="cardWorkflowSourcing"] { --br-tuile-fond: var(--br-marque-claire); }
html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .dashboard[style*="cardWorkflow6.svg"],
html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .ui-grid-col-6:nth-child(6) > .dashboard[style*="cardWorkflowSourcing"] { --br-tuile-fond: var(--br-marque); }

html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .dashboard[style*="cardWorkflow8.svg"] {
	--br-tuile-fond: #FDEAEA;
	--br-tuile-texte: #B42323;
	--br-tuile-num-fond: #FFFFFF;
	--br-tuile-num-texte: #B42323;
}

/* Répartition par étape (accueil) et vue d'ensemble : mêmes couleurs que le style. */
html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .graphEtapes-barre {
	background: var(--br-marque-claire) !important;
}

html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .graphEtapes-num {
	background: var(--br-fond-teinte) !important;
	color: var(--br-marque-claire) !important;
}

html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .graphEtapes-kpi {
	background: var(--br-fond-teinte) !important;
}

html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .graphEtapes-kpi:not(.vert):not(.rouge) b,
html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .vueEleves .bleu .vueEleves-nombre {
	color: var(--br-marque-claire) !important;
}

html[data-br-theme]:not([data-br-theme="A"]) .themeBestrecrue .vueEleves .bleu i {
	background: var(--br-fond-teinte) !important;
	color: var(--br-marque-claire) !important;
}

/* ---------------------------------------------------------------------------------------------
 * Agenda (p:schedule, FullCalendar) au style du site (demande d'Ali, 2026-09-25 : « c'est moche ») :
 * carte blanche arrondie, boutons en pilules aux couleurs du style, en-têtes discrets, jour courant
 * teinté, rendez-vous en pastilles. Vaut pour tous les agendas du site.
 */
.themeBestrecrue .fc {
	--fc-border-color: #EEF2F7;
	--fc-today-bg-color: var(--br-fond-teinte);
	--fc-neutral-bg-color: #F7FAFE;
	--fc-page-bg-color: #FFFFFF;
	--fc-event-bg-color: var(--br-marque-claire);
	--fc-event-border-color: var(--br-marque-claire);
	padding: 20px !important;
	border-radius: 20px;
	background: #FFFFFF;
	border: 1px solid #E8EEF4;
	font-family: 'Satoshi-Regular', sans-serif;
	color: var(--br-texte);
}

.themeBestrecrue .fc .fc-toolbar.fc-header-toolbar {
	margin-bottom: 18px;
}

.themeBestrecrue .fc .fc-toolbar-title {
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 22px;
	color: var(--br-texte);
	text-transform: capitalize;
}

.themeBestrecrue .fc .fc-button,
.themeBestrecrue .fc .fc-button-primary {
	height: 38px;
	padding: 0 14px;
	border: 1px solid #DCE5EE !important;
	border-radius: 999px !important;
	background: #FFFFFF !important;
	color: var(--br-texte) !important;
	box-shadow: none !important;
	font-family: 'Satoshi-Medium', sans-serif;
	font-size: 14px;
	text-transform: none;
	opacity: 1;
}

.themeBestrecrue .fc .fc-button:hover {
	background: var(--br-fond-teinte) !important;
}

.themeBestrecrue .fc .fc-button-group {
	gap: 4px;
}

.themeBestrecrue .fc .fc-button-group > .fc-button {
	border-radius: 999px !important;
}

.themeBestrecrue .fc .fc-button-primary:not(:disabled).fc-button-active,
.themeBestrecrue .fc .fc-button-primary:not(:disabled):active {
	background: var(--br-marque) !important;
	border-color: var(--br-marque) !important;
	color: #FFFFFF !important;
}

.themeBestrecrue .fc .fc-button-primary:disabled {
	background: #F3F6FA !important;
	color: #9AAABB !important;
	border-color: #E8EEF4 !important;
}

.themeBestrecrue .fc .fc-scrollgrid {
	border-radius: 14px;
	overflow: hidden;
}

.themeBestrecrue .fc .fc-col-header-cell {
	padding: 10px 0;
	background: #F7FAFE;
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #748A9D;
}

.themeBestrecrue .fc .fc-col-header-cell a,
.themeBestrecrue .fc .fc-daygrid-day-number {
	color: inherit;
	text-decoration: none;
}

.themeBestrecrue .fc .fc-daygrid-day-number {
	padding: 8px 10px;
	font-family: 'Satoshi-Medium', sans-serif;
	font-size: 13px;
	color: #4D668A;
}

.themeBestrecrue .fc .fc-day-other .fc-daygrid-day-number {
	color: #C3CEDB;
}

.themeBestrecrue .fc .fc-day-today .fc-daygrid-day-number {
	margin: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--br-marque-claire);
	color: #FFFFFF;
}

.themeBestrecrue .fc .fc-daygrid-event,
.themeBestrecrue .fc .fc-timegrid-event {
	margin: 2px 6px;
	padding: 2px 6px;
	border: 0 !important;
	border-radius: 8px;
	background: var(--br-fond-teinte) !important;
	color: var(--br-texte) !important;
	font-family: 'Satoshi-Medium', sans-serif;
	font-size: 12px;
}

.themeBestrecrue .fc .fc-daygrid-event .fc-event-title,
.themeBestrecrue .fc .fc-daygrid-event .fc-event-time,
.themeBestrecrue .fc .fc-timegrid-event .fc-event-main {
	color: var(--br-texte) !important;
}

.themeBestrecrue .fc .fc-daygrid-event-dot {
	border-color: var(--br-marque-claire);
}

/* ---------------------------------------------------------------------------------------------
 * Rendez-vous en ligne (rdv.css) au style du site (demande d'Ali, 2026-09-25 : « c'est moche aussi ») :
 * onglets en sélecteur segmenté, boutons en pilules aux couleurs du style, cartes et message d'absence
 * de disponibilités adoucis. Surcharge seulement, rdv.css n'est pas modifié.
 */
.themeBestrecrue .rdv {
	--rdv-accent: var(--br-marque-claire);
	--rdv-texte: var(--br-texte);
	--rdv-doux: #748A9D;
	--rdv-bord: #E8EEF4;
	--rdv-survol: var(--br-fond-teinte);
	padding: 28px 32px !important;
	border-radius: 20px;
	border: 1px solid #E8EEF4;
	font-family: 'Satoshi-Regular', sans-serif;
}

.themeBestrecrue .rdv h1,
.themeBestrecrue .rdv h2,
.themeBestrecrue .rdv h3 {
	font-family: 'Satoshi-Bold', sans-serif;
}

.themeBestrecrue .rdv-onglets {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	margin: 6px 0 20px;
	border: 0;
	border-radius: 999px;
	background: #F3F6FA;
}

.themeBestrecrue .rdv button.rdv-onglet {
	margin: 0;
	padding: 8px 16px;
	border: 0 !important;
	border-radius: 999px;
	background: transparent !important;
	box-shadow: none !important;
	color: #4D668A !important;
	font-family: 'Satoshi-Medium', sans-serif;
	font-size: 14px;
	font-weight: normal;
}

.themeBestrecrue .rdv button.rdv-onglet:hover {
	color: var(--br-texte) !important;
}

.themeBestrecrue .rdv button.rdv-onglet.rdv-actif {
	background: #FFFFFF !important;
	box-shadow: 0 1px 4px rgba(3, 46, 91, 0.12) !important;
	color: var(--br-texte) !important;
	font-family: 'Satoshi-Bold', sans-serif;
}

.themeBestrecrue .rdv .rdv-bouton {
	padding: 8px 16px;
	border-radius: 999px;
	border-color: var(--br-marque);
	background: var(--br-marque);
	font-family: 'Satoshi-Bold', sans-serif;
	font-weight: normal;
}

.themeBestrecrue .rdv .rdv-bouton.rdv-secondaire {
	border-color: transparent;
	background: #F3F6FA;
	color: var(--br-texte) !important;
}

.themeBestrecrue .rdv .rdv-bouton.rdv-secondaire:hover {
	background: var(--br-fond-teinte);
	filter: none;
}

.themeBestrecrue .rdv .rdv-bouton.rdv-danger {
	border-color: transparent;
	background: #FDECEC;
	color: #B42323 !important;
}

.themeBestrecrue .rdv .rdv-bouton.rdv-petit {
	padding: 6px 12px;
	font-size: 13px;
}

.themeBestrecrue .rdv .rdv-carte {
	padding: 6px 20px;
	border-radius: 16px;
	border-color: #E8EEF4;
}

.themeBestrecrue .rdv .rdv-ligne {
	padding: 16px 0;
	align-items: center;
}

.themeBestrecrue .rdv .rdv-erreur {
	margin: 14px 0;
	padding: 12px 16px;
	border-radius: 12px;
	background: #FFF6E5;
	color: #8A5A00;
	font-size: 14px;
}

.themeBestrecrue .rdv .rdv-lien-public {
	display: inline-block;
	margin-top: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #F3F6FA;
	color: #4D668A;
	font-size: 12px;
}

/* Bandeau « Rendez-vous en ligne » au-dessus de l'agenda. */
.themeBestrecrue .agendaBandeau {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 14px;
	padding: 14px 18px;
	border-radius: 16px;
	background: var(--br-fond-teinte);
	color: var(--br-texte);
	font-family: 'Satoshi-Medium', sans-serif;
	font-size: 14px;
}

.themeBestrecrue .agendaBandeau i {
	margin-right: 8px;
	color: var(--br-marque-claire);
}

/* ---------------------------------------------------------------------------------------------
 * Style du site, suite (demande d'Ali, 2026-09-25) :
 * - l'icône du module en haut à gauche (« Placement », « Sourcing »…) suit la couleur du style ;
 * - palette P « charte de l'école » : trois couleurs choisies par l'utilisateur (couleur principale,
 *   accent, fond clair), posées par style-du-site.js dans --brp-marque / --brp-accent / --brp-fond.
 */
html[data-br-theme] .themeBestrecrue i.fa-duotone[style*="--fa-secondary-opacity: 0.4"] {
	color: var(--br-marque-claire) !important;
}

html[data-br-theme] .themeBestrecrue i.fa-duotone[style*="--fa-secondary-opacity: 0.4"] + span > span:first-child {
	color: var(--br-texte) !important;
}

html[data-br-theme="P"] .themeBestrecrue {
	--br-marque: var(--brp-marque, #032E5B);
	--br-marque-claire: var(--brp-accent, #0868E6);
	--br-fond-teinte: var(--brp-fond, #E6F3FF);
	--br-texte: color-mix(in srgb, var(--brp-marque, #032E5B) 75%, #000000);
	--br-ombre: 0 6px 18px color-mix(in srgb, var(--brp-accent, #0868E6) 14%, transparent);
	--br-ombre-bouton: 0 6px 12px color-mix(in srgb, var(--brp-accent, #0868E6) 28%, transparent);
}

html[data-br-theme="P"] { --br-defil: color-mix(in srgb, var(--brp-accent, #0868E6) 55%, #FFFFFF); }

html[data-br-theme="P"] .ceHaut {
	--ceH-marque: var(--brp-accent, #0868E6);
	--ceH-fond: var(--brp-fond, #E6F3FF);
}

html[data-br-theme="P"] .themeBestrecrue .chatEcole-bouton { background-color: var(--br-marque) !important; }
html[data-br-theme="P"] .themeBestrecrue .button.primary { background-color: var(--br-marque) !important; box-shadow: var(--br-ombre-bouton); }
html[data-br-theme="P"] .themeBestrecrue .button.primary:hover { background-color: var(--br-marque-claire) !important; }
html[data-br-theme="P"] .themeBestrecrue .header .message { color: var(--br-texte) !important; }
html[data-br-theme="P"] .themeBestrecrue .button:not(.primary):not(.br-bouton) { border-color: var(--br-marque) !important; color: var(--br-marque) !important; }
html[data-br-theme="P"] .themeBestrecrue .sousMenuIcone { --fa-primary-color: var(--br-marque-claire); --fa-secondary-color: var(--br-marque-claire); }
html[data-br-theme="P"] .themeBestrecrue .carteEcoleLarge .carteEcoleBandeau { background: var(--br-fond-teinte) !important; background-image: none !important; color: var(--br-texte); }
html[data-br-theme="P"] .themeBestrecrue .carteEcoleLarge .carteEcoleNom { color: var(--br-texte); }
html[data-br-theme="P"] .themeBestrecrue .carteEcoleLarge .carteEcoleSous { color: var(--br-marque); }

/* ---------------------------------------------------------------------------------------------
 * Style R « Bestrecrue » (demande d'Ali, 2026-09-25 : « une palette aux couleurs de Bestrecrue, par défaut ») :
 * le marine du logo (#032E53), le jaune de la marque (#FFCF1F, celui de « Ask » et des compteurs) et le bleu pâle
 * du logo (#E3ECF9). Le marine porte la marque, les boutons et le bandeau ; le jaune ne sert qu'aux accents
 * (icônes du menu, puces), jamais à du texte sur blanc, où il serait illisible.
 */
html[data-br-theme="R"] .themeBestrecrue {
	--br-marque: #032E53;
	--br-marque-claire: #1E5A9E;
	--br-fond-teinte: #E3ECF9;
	--br-texte: #021F38;
	--br-ombre: 0 6px 18px rgba(3, 46, 83, 0.12);
	--br-ombre-bouton: 0 6px 12px rgba(3, 46, 83, 0.28);
}

html[data-br-theme="R"] { --br-defil: #9ABBE3; }

html[data-br-theme="R"] .ceHaut {
	--ceH-marque: #032E53;
	--ceH-fond: #E3ECF9;
}

html[data-br-theme="R"] .themeBestrecrue .chatEcole-bouton { background-color: #032E53 !important; }
html[data-br-theme="R"] .themeBestrecrue .chatEcole-bouton-icone { color: #FFCF1F; }
html[data-br-theme="R"] .themeBestrecrue .button.primary { background-color: #032E53 !important; box-shadow: var(--br-ombre-bouton); }
html[data-br-theme="R"] .themeBestrecrue .button.primary:hover { background-color: #0B4275 !important; }
html[data-br-theme="R"] .themeBestrecrue .header .message { color: #021F38 !important; }
html[data-br-theme="R"] .themeBestrecrue .button:not(.primary):not(.br-bouton) { border-color: #032E53 !important; color: #032E53 !important; }
html[data-br-theme="R"] .themeBestrecrue .sousMenuIcone { --fa-primary-color: #032E53; --fa-secondary-color: #FFCF1F; --fa-secondary-opacity: 1; }
html[data-br-theme="R"] .themeBestrecrue .carteEcoleLarge .carteEcoleBandeau { background: #032E53 !important; background-image: none !important; color: #FFFFFF; }
html[data-br-theme="R"] .themeBestrecrue .carteEcoleLarge .carteEcoleNom { color: #FFFFFF; }
html[data-br-theme="R"] .themeBestrecrue .carteEcoleLarge .carteEcoleSous { color: #BAD1ED; }

/* ---------------------------------------------------------------------------------------------
 * Accueil école, cartes « Monitoring offres » et « Organismes » alignées (demande d'Ali, 2026-09-25 :
 * « aligne horizontalement ») : les deux colonnes de la rangée prennent la hauteur de la plus haute,
 * les cartes remplissent leur colonne.
 */
.themeBestrecrue .grilleMonitoring {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

/* Les cartes sont enveloppées dans des h:panelGroup rendus en <span> : sans display: contents, ces
   enveloppes deviennent les éléments flex et chaque carte se réduit à la largeur de son contenu. */
.themeBestrecrue .grilleMonitoring > span {
	display: contents;
}

.themeBestrecrue .grilleMonitoring .ui-grid-col-6 {
	flex: 0 0 50%;
	box-sizing: border-box;
	display: flex;
	float: none !important;
}

.themeBestrecrue .grilleMonitoring .ui-grid-col-6 > a {
	display: flex;
	width: 100%;
}

.themeBestrecrue .grilleMonitoring .carteMonitoringOffres,
.themeBestrecrue .grilleMonitoring .carteMonitoringOrganismes {
	float: none !important;
	flex: 1 1 auto;
	height: auto !important;
}

/* ---------------------------------------------------------------------------------------------
 * Accueil école, « Administration de mes élèves » et indicateurs d'alerte (retour d'Ali, 2026-09-25 :
 * « moche et ça prend trop de place, regroupe et range plus joli »). Mêmes liens, mêmes chiffres :
 * - administration : neuf pastilles fines, icône et libellé à gauche, chiffre à droite, trois par ligne ;
 * - « Ils sont dans le rouge » / « Ils cumulent les indicateurs négatifs » : cartes compactes trois par
 *   ligne, sans illustration ni phrase d'explication — le titre, le badge et le chiffre sur le total.
 */
.themeBestrecrue .suiviAdmin > .ui-grid-col-4 {
	padding: 4px !important;
}

.themeBestrecrue .suiviAdmin .box.dashboard {
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 10px 14px !important;
	border-radius: var(--br-rayon-s) !important;
}

.themeBestrecrue .suiviAdmin .box.dashboard table,
.themeBestrecrue .suiviAdmin .box.dashboard td {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
}

.themeBestrecrue .suiviAdmin .lib {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 !important;
}

.themeBestrecrue .suiviAdmin .lib > div:first-child {
	display: flex !important;
	align-items: center;
	width: auto !important;
	min-width: 0;
}

.themeBestrecrue .suiviAdmin .lib > div:first-child i {
	float: none !important;
	flex: 0 0 28px;
	width: 28px !important;
	line-height: 28px !important;
	margin: 0 10px 0 0 !important;
	font-size: 12px !important;
}

.themeBestrecrue .suiviAdmin .lib > div:first-child span {
	margin: 0 !important;
	font-size: 13px !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--br-texte);
}

.themeBestrecrue .suiviAdmin .libDiv {
	width: auto !important;
	margin: 0 !important;
}

.themeBestrecrue .suiviAdmin .libDivNum {
	font-size: 20px !important;
	font-family: 'Satoshi-Black', 'Satoshi-Bold', sans-serif;
}

.themeBestrecrue .indicateursAlerte .blocIndicateurs {
	width: 33.333% !important;
	padding: 4px !important;
}

.themeBestrecrue .indicateursAlerte .boxIndicateurs {
	display: block;
	min-height: 118px;
	padding: 14px 16px !important;
	border-radius: var(--br-rayon-s) !important;
	border: 1px solid var(--br-bordure) !important;
	box-shadow: 0 1px 4px rgba(3, 46, 91, 0.04);
}

.themeBestrecrue .indicateursAlerte .boxIndicateurs:hover {
	border-color: #C9DAF0 !important;
	box-shadow: 0 6px 16px rgba(3, 46, 91, 0.08);
}

.themeBestrecrue .indicateursAlerte .imageIndicateur {
	display: none !important;
}

.themeBestrecrue .indicateursAlerte .titreIndicateur {
	float: none !important;
	display: block;
	margin: 0 0 8px !important;
	font-size: 13px;
}

.themeBestrecrue .indicateursAlerte .titreIndicateur br {
	display: none;
}

.themeBestrecrue .indicateursAlerte .nbIndicateur {
	margin: 0 0 6px !important;
	line-height: 1;
}

.themeBestrecrue .indicateursAlerte .typeIndicateur {
	display: inline-block;
	margin: 0 4px 4px 0 !important;
	padding: 3px 8px !important;
	border-radius: 999px !important;
	font-size: 11px !important;
	line-height: 1.4 !important;
}

/* La phrase d'explication (texte seul ou div) disparaît ; le chiffre et le total restent. */
.themeBestrecrue .indicateursAlerte .boxIndicateurs > div[style*="font-size: 12px"] {
	font-size: 0 !important;
}

.themeBestrecrue .indicateursAlerte .boxIndicateurs div[style*="font-size: 28px"] {
	margin: 0 !important;
	font-size: 24px !important;
	line-height: 1.2;
}

.themeBestrecrue .indicateursAlerte .header {
	margin-top: 6px;
}

@media (max-width: 900px) {
	.themeBestrecrue .indicateursAlerte .blocIndicateurs {
		width: 50% !important;
	}
}


/* ---------------------------------------------------------------------------------------------
 * Accueil école, demandes d'appui et listes (retour d'Ali, 2026-09-25 : « moche et mal présenté ») :
 * - demandes d'appui : cartes basses, message court, explication en petit ;
 * - listes (d'alerte et personnelles) : une ligne par liste — éclair, nom, « Voir la liste » —, trois
 *   par rangée, sans la phrase répétée sur chaque carte ; « Créer une nouvelle liste » en carte fine ;
 * - pour un compte qui voit « Toutes les listes créées automatiquement », le second bloc « Les listes
 *   créées automatiquement » (les mêmes, déjà affichées) est masqué.
 */
.themeBestrecrue .appuiBloc {
	padding: 16px 20px !important;
	margin-bottom: 12px !important;
	border-radius: var(--br-rayon-s) !important;
}

.themeBestrecrue .appuiBloc > .header {
	min-height: 0 !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
	box-shadow: none !important;
}

.themeBestrecrue .appuiBloc > .header .message {
	font-size: 15px !important;
	line-height: 1.4;
}

.themeBestrecrue .appuiBloc > div[style*="background-color: #F9FCFF"] {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0 !important;
	padding: 8px 12px !important;
	font-size: 12px !important;
	color: var(--br-texte-doux) !important;
}

.themeBestrecrue .appuiBloc > div[style*="background-color: #F9FCFF"] > div {
	float: none !important;
	width: auto !important;
}

.themeBestrecrue .appuiBloc img.lampe {
	width: 16px !important;
	margin: 0 !important;
}

.themeBestrecrue .listesAccueil .ui-grid > .ui-grid-col-6 {
	width: 33.333% !important;
	padding: 4px !important;
}

.themeBestrecrue .listesAccueil .box {
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 12px 14px !important;
	border-radius: var(--br-rayon-s) !important;
}

.themeBestrecrue .listesAccueil .box > span {
	display: flex !important;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.themeBestrecrue .listesAccueil .box > span > a:first-child {
	flex: 1 1 auto;
	min-width: 0;
	float: none !important;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 14px;
}

.themeBestrecrue .listesAccueil .box > span > div[style*="height: 80px"] {
	display: none !important;
}

.themeBestrecrue .listesAccueil .box > span > div[style*="border-top"] {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.themeBestrecrue .listesAccueil .box > span > div[style*="border-top"] > i {
	display: none;
}

.themeBestrecrue .listesAccueil .box > span > div[style*="border-top"] > a {
	float: none !important;
	white-space: nowrap;
	color: var(--br-marque-claire) !important;
}

.themeBestrecrue .listesAccueil .box.listeCreer {
	height: auto !important;
	padding: 12px 14px !important;
	border: 1px dashed var(--br-bordure) !important;
	background: transparent !important;
	box-shadow: none !important;
}

.themeBestrecrue .listesAccueil .box.listeCreer > a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 !important;
}

.themeBestrecrue .listesAccueil .box.listeCreer > a i {
	font-size: 18px !important;
	margin: 0 !important;
}

.themeBestrecrue .listesAccueil .box.listeCreer > a div {
	height: auto !important;
	line-height: 1.3 !important;
	font-size: 13px !important;
}

.themeBestrecrue .listesAutoToutes ~ .listesMes .listesAutoMiennes {
	display: none !important;
}

@media (max-width: 900px) {
	.themeBestrecrue .listesAccueil .ui-grid > .ui-grid-col-6 {
		width: 50% !important;
	}
}


/* ---------------------------------------------------------------------------------------------
 * Portfolio école (retour d'Ali, 2026-09-25 : « moche ») : les envois deviennent un tableau propre —
 * lignes blanches séparées d'un filet, texte lisible (plus de blanc sur bleu pâle), statut en pastille :
 * « N CVs » en bleu (ligne cliquable), « Invitation » en gris ; la carte du recruteur, compacte.
 */
.themeBestrecrue .portfolioEnvois .headerHistorique {
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 12px;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--br-texte-doux);
}

.themeBestrecrue .portfolioEnvois .ligne {
	display: flex;
	align-items: center;
	background: #FFFFFF !important;
	color: var(--br-texte) !important;
	border: none !important;
	border-bottom: 1px solid var(--br-bordure) !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 4px 0 !important;
	box-shadow: none !important;
}

.themeBestrecrue .portfolioEnvois a .ligne:hover {
	background: var(--br-fond-teinte) !important;
}

.themeBestrecrue .portfolioEnvois .ligne > div {
	float: none !important;
}

.themeBestrecrue .portfolioEnvois .ligne > div > div {
	color: var(--br-texte) !important;
	font-size: 13px !important;
}

.themeBestrecrue .portfolioEnvois .ligne > .ui-grid-col-3 > div {
	display: inline-block;
	margin: 0 auto;
	padding: 3px 12px !important;
	border-radius: 999px;
	font-family: 'Satoshi-Bold', sans-serif !important;
	font-size: 12px !important;
}

.themeBestrecrue .portfolioEnvois .ligne > .ui-grid-col-3 {
	text-align: center;
}

.themeBestrecrue .portfolioEnvois a .ligne > .ui-grid-col-3 > div {
	background: var(--br-fond-teinte);
	color: var(--br-marque-claire) !important;
}

.themeBestrecrue .portfolioEnvois span .ligne > .ui-grid-col-3 > div {
	background: var(--br-champ);
	color: var(--br-texte-doux) !important;
}

.themeBestrecrue .portfolioRecruteurs .header span[style*="F9CF4D"] {
	color: var(--br-marque-claire) !important;
	font-size: inherit !important;
}

.themeBestrecrue .portfolioRecruteurs .box {
	padding: 14px 18px !important;
	border: 1px solid var(--br-bordure) !important;
	border-radius: var(--br-rayon-s) !important;
	box-shadow: none !important;
}

.themeBestrecrue .portfolioRecruteurs .box img {
	width: 56px !important;
	height: 56px !important;
	margin-top: 0 !important;
	object-fit: cover;
}

.themeBestrecrue .portfolioRecruteurs .box .pseudo {
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 16px !important;
	color: var(--br-texte);
}

.themeBestrecrue .portfolioRecruteurs .box .diplome {
	color: var(--br-texte-doux) !important;
	font-family: 'Satoshi-Regular', sans-serif;
}


/*
  Barre de défilement du menu et de la page, fine même avec un style de couleur (retour d'Ali,
  2026-09-25 : « je voulais un scroller plus fin »). Les styles de couleur (html[data-br-theme])
  posent scrollbar-color : Chrome abandonne alors ::-webkit-scrollbar et affiche sa barre native,
  épaisse. Pour Chrome et Safari, on retire scrollbar-color et on garde la couleur du style dans
  ::-webkit-scrollbar-thumb (6 px) ; Firefox garde scrollbar-color, qu'il est seul à lire.
*/
@supports not (-moz-appearance: none) {
	html[data-br-theme][data-br-theme],
	html[data-br-theme][data-br-theme] .themeBestrecrue .itemsSectionMenu {
		scrollbar-color: auto !important;
		scrollbar-width: auto !important;
	}
}

html[data-br-theme][data-br-theme]::-webkit-scrollbar,
html[data-br-theme][data-br-theme] .themeBestrecrue .itemsSectionMenu::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

html[data-br-theme][data-br-theme] .themeBestrecrue .itemsSectionMenu::-webkit-scrollbar-thumb,
html[data-br-theme][data-br-theme]::-webkit-scrollbar-thumb {
	background: var(--br-defil, #C9D3E3);
	border-radius: 999px;
}


/* ---------------------------------------------------------------------------------------------
 * Assistant école, animation de l'IA pendant qu'une demande se compose (ia-attente.js, demande d'Ali,
 * 2026-09-25). Au centre de l'écran, sans bloquer la page : un orbe en dégradé qui tourne et
 * respire, deux halos qui s'élargissent, six particules en orbite, une phrase qui change.
 */
.iaAttente {
	position: fixed;
	inset: 0;
	z-index: 9400;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 26px;
	pointer-events: none;
	background: radial-gradient(circle at 50% 46%, rgba(245, 249, 255, 0.78) 0, rgba(245, 249, 255, 0.35) 38%, rgba(245, 249, 255, 0) 62%);
	opacity: 0;
	transition: opacity .25s ease;
}

.iaAttente[hidden] {
	display: none;
}

.iaAttente.iaVisible {
	opacity: 1;
}

.iaAttenteScene {
	position: relative;
	width: 170px;
	height: 170px;
}

.iaOrbe {
	position: absolute;
	inset: 35px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, #6694FD, #0868E6, #032E5B, #0A4DAA, #6694FD); /* charte : bleu clair, bleu, marine (plus de violet ni de cyan) */
	box-shadow: 0 0 40px rgba(8, 104, 230, 0.45), 0 0 90px rgba(3, 46, 91, 0.25);
	animation: iaTourne 3.2s linear infinite, iaRespire 2.4s ease-in-out infinite;
	filter: saturate(1.15);
}

.iaOrbe::after {
	content: '';
	position: absolute;
	inset: 6px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9) 0, rgba(255, 255, 255, 0.25) 28%, rgba(8, 104, 230, 0) 60%),
		radial-gradient(circle at 65% 75%, rgba(102, 148, 253, 0.55) 0, rgba(102, 148, 253, 0) 55%);
	mix-blend-mode: screen;
}

.iaOrbeReflet {
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.55);
	border-top-color: transparent;
	border-left-color: transparent;
	animation: iaTourne 1.6s linear infinite reverse;
}

.iaEtincelle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #FFFFFF;
	font-size: 34px;
	text-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
	animation: iaEtincelle 1.8s ease-in-out infinite, iaContreTourne 3.2s linear infinite;
	z-index: 1;
}

.iaHalo {
	position: absolute;
	inset: 35px;
	border-radius: 50%;
	border: 2px solid rgba(8, 104, 230, 0.35);
	animation: iaHalo 2.4s ease-out infinite;
}

.iaHalo2 {
	animation-delay: 1.2s;
	border-color: rgba(3, 46, 91, 0.3);
}

.iaOrbite {
	position: absolute;
	inset: 0;
	animation: iaTourne 6s linear infinite;
}

.iaParticule {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: #0868E6;
	box-shadow: 0 0 10px rgba(8, 104, 230, 0.8);
	transform: rotate(calc(var(--i) * 60deg)) translateX(80px) scale(calc(0.6 + var(--i) * 0.08));
	opacity: calc(0.45 + var(--i) * 0.09);
}

.iaParticule:nth-child(even) {
	background: #032E5B;
	box-shadow: 0 0 10px rgba(3, 46, 91, 0.6);
}

.iaAttentePhrase {
	padding: 8px 18px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 6px 20px rgba(3, 46, 91, 0.10);
	color: #032E5B;
	font-family: 'Satoshi-Medium', sans-serif;
	font-size: 15px;
}

.iaAttentePhrase.iaPhraseEntre {
	animation: iaPhrase .45s ease-out;
}

@keyframes iaTourne { to { transform: rotate(360deg); } }
@keyframes iaContreTourne { to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes iaRespire { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }
@keyframes iaEtincelle { 0%, 100% { opacity: .85; font-size: 30px; } 50% { opacity: 1; font-size: 38px; } }
@keyframes iaHalo { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes iaPhrase { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.iaOrbe, .iaOrbeReflet, .iaEtincelle, .iaHalo, .iaOrbite, .iaAttentePhrase.iaPhraseEntre {
		animation: none !important;
	}
}


/* ---------------------------------------------------------------------------------------------
 * Cartes de session (general/sectionCours.xhtml, listes de sessions) — retour d'Ali, 2026-09-25 :
 * « l'affichage des sessions est moche, trop d'espace vide ». Chaque information occupait sa ligne,
 * avec 15 px de marge. Les éléments s'enchaînent sur une même ligne quand ils tiennent (places, date,
 * type, présentiel, compte à rebours), les blocs vides sont masqués, les pastilles plus fines.
 */
.themeBestrecrue .box:has(.titreCours) {
	padding: 18px 22px !important;
	display: flow-root;
}

.themeBestrecrue .box:has(.titreCours) .blocCentre {
	display: flow-root;
}

.themeBestrecrue .blocCentre:has(.titreCours) > .ui-grid-col-12:first-child {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 14px;
	row-gap: 8px;
}

.themeBestrecrue .blocCentre:has(.titreCours) .coursSeparateur {
	float: none !important;
	margin: 0 !important;
}

/* Titre à gauche, organisateur et menu à droite. */
.themeBestrecrue .blocCentre:has(.titreCours) .ui-grid-col-7.coursSeparateur {
	flex: 1 1 60%;
	width: auto !important;
	display: flex;
	align-items: center;
	gap: 10px;
}

.themeBestrecrue .blocCentre:has(.titreCours) .ui-grid-col-5.coursSeparateur {
	flex: 1 1 38%;
	width: auto !important;
	margin-left: auto !important;
}

.themeBestrecrue .blocCentre:has(.titreCours) .titreCours {
	font-size: 18px;
}

.themeBestrecrue .blocCentre:has(.titreCours) .statutEnCours {
	margin-left: 0;
	font-size: 13px;
}

/* Blocs vides : coachs absents, adresse absente. */
.themeBestrecrue .blocCentre:has(.titreCours) .ui-grid-col-12.coursSeparateur:not(:has(a)),
.themeBestrecrue .blocCentre:has(.titreCours) .ui-grid-col-8.coursSeparateur:not(:has(.coursAdresse)) {
	display: none !important;
}

.themeBestrecrue .blocCentre:has(.titreCours) .ui-grid-col-12.coursSeparateur,
.themeBestrecrue .blocCentre:has(.titreCours) .ui-grid-col-8.coursSeparateur,
.themeBestrecrue .blocCentre:has(.titreCours) .ui-grid-col-4.coursSeparateur,
.themeBestrecrue .blocCentre:has(.titreCours) .coursLigne {
	width: auto !important;
	flex: 0 0 auto;
}

/* Les lignes longues (lien de visio, description, référence) gardent toute la largeur. */
.themeBestrecrue .blocCentre:has(.titreCours) .coursLigne.lienCours,
.themeBestrecrue .blocCentre:has(.titreCours) .coursLigne:has(.referenceCours),
.themeBestrecrue .blocCentre:has(.titreCours) .ui-grid-col-12.coursSeparateur {
	flex: 1 1 100%;
}

.themeBestrecrue .blocCentre:has(.titreCours) .coursNbPlaces {
	float: none;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.4;
	background: transparent;
}

.themeBestrecrue .blocCentre:has(.titreCours) .coursNbPlaces .occupe {
	font-size: 16px;
	font-family: 'Satoshi-Bold', sans-serif;
}

.themeBestrecrue .blocCentre:has(.titreCours) .coursDate {
	color: var(--br-texte-moyen);
	font-size: 14px;
}

.themeBestrecrue .blocCentre:has(.titreCours) .typeCours,
.themeBestrecrue .blocCentre:has(.titreCours) .presentielCours,
.themeBestrecrue .blocCentre:has(.titreCours) .decompteJourCours {
	float: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0 8px 0 0 !important;
	padding: 4px 12px !important;
	border-radius: 999px !important;
	font-size: 12px;
	line-height: 1.4;
}

.themeBestrecrue .blocCentre:has(.titreCours) .typeCours {
	background-color: var(--br-fond-teinte) !important;
	color: var(--br-marque-claire) !important;
	font-family: 'Satoshi-Bold', sans-serif;
}

.themeBestrecrue .blocCentre:has(.titreCours) .lienCours {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	color: var(--br-texte-moyen);
	font-size: 13px;
	word-break: break-all;
}

.themeBestrecrue .blocCentre:has(.titreCours) .lienCours a.button {
	margin-left: 0 !important;
	height: auto;
	padding: 6px 16px !important;
	font-size: 13px;
	line-height: 1.5;
}

.themeBestrecrue .blocCentre:has(.titreCours) .referenceCours {
	float: none;
	font-size: 11px;
}

/* Pied de carte (documents, suppression) : moins d'espace. */
.themeBestrecrue .blocCentre:has(.titreCours) > .ui-grid-col-12[style*="border-top"] {
	padding-top: 10px !important;
	margin-top: 8px !important;
	font-size: 13px;
}

/* Animation de l'IA aux couleurs de Bestrecrue (demande d'Ali, 2026-09-25) : navy, bleu et bleu
   clair au lieu du violet et du cyan ; l'orbe suit aussi la palette de style choisie. */
.themeBestrecrue .iaOrbe {
	background: conic-gradient(from 0deg, #6694FD, var(--br-marque-claire, #0868E6), var(--br-marque, #032E5B), #0868E6, #6694FD);
	box-shadow: 0 0 40px rgba(8, 104, 230, 0.45), 0 0 90px rgba(3, 46, 91, 0.25);
}

.themeBestrecrue .iaOrbe::after {
	background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9) 0, rgba(255, 255, 255, 0.25) 28%, rgba(8, 104, 230, 0) 60%),
		radial-gradient(circle at 65% 75%, rgba(230, 243, 255, 0.55) 0, rgba(230, 243, 255, 0) 55%);
}

.themeBestrecrue .iaHalo2 {
	border-color: rgba(102, 148, 253, 0.4);
}

.themeBestrecrue .iaParticule:nth-child(even) {
	background: #6694FD;
	box-shadow: 0 0 10px rgba(102, 148, 253, 0.8);
}

/* Animation BestRecrue de l'IA (demande d'Ali, 2026-10-08) : le logo sur un disque blanc qui respire, un anneau
   marine → bleu → bleu clair qui tourne autour, les deux halos qui s'élargissent. Remplace l'orbe et les particules. */
.iaAnneau {
	position: absolute;
	inset: 22px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, rgba(102, 148, 253, 0) 0deg, #6694FD 110deg, #0868E6 230deg, #032E5B 330deg, rgba(3, 46, 91, 0) 360deg);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	animation: iaTourne 1.3s linear infinite;
}

.iaLogo {
	position: absolute;
	inset: 34px;
	border-radius: 50%;
	background: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 30px rgba(3, 46, 91, 0.16), 0 0 0 1px rgba(3, 46, 91, 0.06);
	animation: iaRespire 2.4s ease-in-out infinite;
}

.iaLogo img {
	height: 56px;
	width: auto;
	animation: iaLogoBat 2.4s ease-in-out infinite;
}

@keyframes iaLogoBat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

@media (prefers-reduced-motion: reduce) {
	.iaAnneau, .iaLogo, .iaLogo img { animation: none; }
}
/* ---------------------------------------------------------------------------------------------
 * Tuiles d'étapes compactes (demande d'Ali, 2026-09-25 : « les boîtes sont trop hautes et moches ») :
 * une seule ligne par étape — numéro, libellé, puis le nombre d'élèves à droite. L'icône
 * « agrandir » disparaît (la tuile entière est cliquable). Vaut pour le placement et le sourcing.
 */
.themeBestrecrue .dashboard[style*="cardWorkflow"] {
	margin: 4px !important;
	padding: 12px 16px !important;
	border-radius: 14px !important;
}

.themeBestrecrue .dashboard[style*="cardWorkflow"] table,
.themeBestrecrue .dashboard[style*="cardWorkflow"] tr {
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

.themeBestrecrue .dashboard[style*="cardWorkflow"] td.etape {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

.themeBestrecrue .dashboard[style*="cardWorkflow"] .etapeTxt {
	flex: 0 0 auto;
	margin: 0 !important;
}

.themeBestrecrue .dashboard[style*="cardWorkflow"] .etapeTxt .expand {
	display: none !important;
}

.themeBestrecrue .dashboard[style*="cardWorkflow"] .etapeTxt > div {
	width: 28px !important;
	height: 28px !important;
	line-height: 28px !important;
	font-size: 13px !important;
}

.themeBestrecrue .dashboard[style*="cardWorkflow"] .lib {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 !important;
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 14px !important;
	line-height: 1.3;
}

.themeBestrecrue .dashboard[style*="cardWorkflow"] .lib > div:first-child {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.themeBestrecrue .dashboard[style*="cardWorkflow"] .lib .libDiv {
	flex: 0 0 auto;
	display: flex;
	align-items: baseline;
	gap: 5px;
	margin: 0 !important;
	font-family: 'Satoshi-Medium', sans-serif;
	font-size: 12px !important;
	opacity: .9;
}

.themeBestrecrue .dashboard[style*="cardWorkflow"] .lib .libDivNum {
	margin: 0 !important;
	font-size: 22px !important;
	line-height: 1;
}

/* ---------------------------------------------------------------------------------------------
 * Carte « Hello » moins haute (demande d'Ali, 2026-09-25 : « moins haute ») : bandeau resserré, logo
 * de 56 px de haut, bonjour en 24 px ; « Cette année » et ses trois chiffres sur une seule ligne,
 * chaque chiffre à côté de son libellé. Sur petit écran, les chiffres repassent en colonne.
 */
.themeBestrecrue .carteEcole.carteEcoleLarge .carteEcoleBandeau {
	padding: 16px 22px 40px !important;
	column-gap: 16px;
}

.themeBestrecrue .carteEcole.carteEcoleLarge .carteEcoleLogo {
	height: 56px !important;
	min-width: 56px;
	border-radius: 16px;
}

.themeBestrecrue .carteEcole.carteEcoleLarge .carteEcoleLogo img {
	max-height: 40px !important;
}

.themeBestrecrue .carteEcole.carteEcoleLarge .carteEcoleNom {
	font-size: 24px !important;
	line-height: 1.15;
}

.themeBestrecrue .carteEcole.carteEcoleLarge .carteEcoleSous {
	font-size: 13px !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.themeBestrecrue .carteEcole.carteEcoleLarge .carteEcoleAnnee select {
	height: 40px !important;
	font-size: 14px !important;
}

.themeBestrecrue .carteEcole.carteEcoleLarge .carteEcoleCorps {
	grid-template-columns: auto repeat(3, minmax(0, 1fr));
	align-items: center;
	column-gap: 16px;
	margin: -26px 16px 16px !important;
	padding: 12px 20px !important;
}

.themeBestrecrue .carteEcole.carteEcoleLarge .carteEcoleTitre {
	grid-column: auto !important;
	margin: 0 !important;
	font-size: 14px !important;
	white-space: nowrap;
}

.themeBestrecrue .carteEcole.carteEcoleLarge .carteEcoleLigne {
	flex-direction: row-reverse !important;
	justify-content: center;
	align-items: center;
	gap: 10px !important;
	font-size: 13px !important;
}

.themeBestrecrue .carteEcole.carteEcoleLarge .carteEcoleChiffre {
	padding: 4px 12px !important;
	font-size: 18px !important;
}

@media (max-width: 900px) {
	.themeBestrecrue .carteEcole.carteEcoleLarge .carteEcoleCorps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.themeBestrecrue .carteEcole.carteEcoleLarge .carteEcoleTitre {
		grid-column: 1 / -1 !important;
		margin-bottom: 6px !important;
	}
	.themeBestrecrue .carteEcole.carteEcoleLarge .carteEcoleLigne {
		flex-direction: column-reverse !important;
		gap: 4px !important;
	}
}

/* Accès rapide aux couleurs du style (demande d'Ali, 2026-09-25) : toutes les icônes, quelle que soit
   leur teinte d'origine (violet, bleu, jaune, vert, gris), prennent la couleur de la palette choisie. */
html[data-br-theme] .themeBestrecrue .accesRapideIcone,
html[data-br-theme] .themeBestrecrue .accesRapideIcone.violet,
html[data-br-theme] .themeBestrecrue .accesRapideIcone.bleu,
html[data-br-theme] .themeBestrecrue .accesRapideIcone.jaune,
html[data-br-theme] .themeBestrecrue .accesRapideIcone.vert,
html[data-br-theme] .themeBestrecrue .accesRapideIcone.gris {
	background: var(--br-fond-teinte);
	color: var(--br-marque-claire);
	--fa-primary-color: var(--br-marque-claire);
	--fa-secondary-color: var(--br-marque-claire);
}

html[data-br-theme] .themeBestrecrue .accesRapideTuile:hover .accesRapideIcone {
	background: var(--br-marque-claire);
	color: #FFFFFF;
	--fa-primary-color: #FFFFFF;
	--fa-secondary-color: #FFFFFF;
}


/* ---------------------------------------------------------------------------------------------
 * Page Exports (retour d'Ali, 2026-09-25 : « moche ») : une douzaine de grandes cartes pleine largeur
 * avec 50 px de vide sous chaque titre. Grille de deux colonnes, cartes compactes : titre, description
 * en une ou deux lignes, « Exporter » en pastille, dates en petits champs quand l'export en a.
 */
.themeBestrecrue .exportsPage {
	display: flex !important;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 12px;
}

.themeBestrecrue .exportsPage > .box,
.themeBestrecrue .exportsPage > .header {
	float: none !important;
	width: 100% !important;
	flex: 1 1 100%;
	margin: 0 !important;
}

.themeBestrecrue .exportsPage > .box:first-of-type {
	padding: 16px 20px !important;
}

.themeBestrecrue .exportsPage > .box:first-of-type div[style*="font-size: 16px"] {
	margin-bottom: 4px !important;
}

.themeBestrecrue .exportsPage > .box:first-of-type div[style*="font-size: 14px"] {
	font-size: 13px !important;
}

.themeBestrecrue .exportsPage > .header {
	min-height: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* Les cartes d'export : deux par ligne. */
.themeBestrecrue .exportsPage > .box[style*="float: left"] {
	flex: 1 1 calc(50% - 6px);
	width: auto !important;
	min-width: 280px;
	padding: 16px 18px !important;
	border-radius: var(--br-rayon-s) !important;
	border: 1px solid var(--br-bordure) !important;
	box-shadow: none !important;
}

.themeBestrecrue .exportsPage > .box[style*="float: left"] > .header > * {
	float: none !important;
}

.themeBestrecrue .exportsPage > .box[style*="float: left"] {
	height: auto !important;
}

.themeBestrecrue .exportsPage > .box[style*="float: left"] > .header {
	height: auto !important;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px 12px;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}

.themeBestrecrue .exportsPage > .box[style*="float: left"] > .header > .ui-grid-col-8 {
	flex: 1 1 60%;
	width: auto !important;
	padding: 0 !important;
}

.themeBestrecrue .exportsPage > .box[style*="float: left"] > .header > .ui-grid-col-4 {
	flex: 0 0 auto;
	width: auto !important;
	padding: 0 !important;
}

.themeBestrecrue .exportsPage > .box[style*="float: left"] .message {
	font-size: 15px !important;
	line-height: 1.35;
}

.themeBestrecrue .exportsPage > .box[style*="float: left"] .message > span {
	display: block;
	margin-top: 4px;
	color: var(--br-texte-doux);
	font-size: 12px !important;
	line-height: 1.45;
}

.themeBestrecrue .exportsPage > .box[style*="float: left"] .message br {
	display: none;
}

/* « Exporter » en pastille. */
.themeBestrecrue .exportsPage > .box[style*="float: left"] .ui-grid-col-4 > a {
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--br-fond-teinte);
	color: var(--br-marque-claire) !important;
	text-decoration: none !important;
	transition: background .15s ease;
}

.themeBestrecrue .exportsPage > .box[style*="float: left"] .ui-grid-col-4 > a:hover {
	background: #D6E9FF;
}

.themeBestrecrue .exportsPage > .box[style*="float: left"] .ui-grid-col-4 > a img {
	height: 18px !important;
}

.themeBestrecrue .exportsPage > .box[style*="float: left"] .ui-grid-col-4 > a span {
	height: auto !important;
	line-height: 1.3 !important;
	margin-left: 6px !important;
}

/* Filtres de dates : petits, côte à côte, sous le titre. */
.themeBestrecrue .exportsPage > .box[style*="float: left"] .ui-grid-col-12:has(> br:only-child) {
	display: none !important;
}

.themeBestrecrue .exportsPage > .box[style*="float: left"] > .header > .ui-grid-col-6 {
	flex: 1 1 calc(50% - 6px);
	width: auto !important;
	padding: 0 !important;
}

.themeBestrecrue .exportsPage > .box[style*="float: left"] .label {
	margin: 0 0 4px !important;
	font-size: 11px !important;
	color: var(--br-texte-doux);
}

.themeBestrecrue .exportsPage > .box[style*="float: left"] input {
	height: 36px !important;
	padding: 0 12px !important;
	font-size: 13px !important;
}

@media (max-width: 900px) {
	.themeBestrecrue .exportsPage > .box[style*="float: left"] {
		flex-basis: 100%;
	}
}


/* ---------------------------------------------------------------------------------------------
 * Module Besoins RH et autres modules (retour d'Ali, 2026-09-25 : « tout le module Besoins RH est
 * moche ») :
 * - menu : les titres de section (« MENU PRINCIPAL », « ACTUALITÉS »…) prennent le style discret du
 *   menu école — petites capitales grises au lieu du bleu gras ;
 * - accueil : carte bleue (styles .carteEcole, sans la carte de chiffres) ; tuiles d'action compactes,
 *   icône et libellé sur une ligne, sans les « ? ».
 */
.themeBestrecrue .sectionMenu .headerMenuPrincipal:not(.menuSectionTitre) {
	font-family: 'Satoshi-Bold', sans-serif !important;
	font-size: 11px !important;
	letter-spacing: 0.09em;
	color: var(--br-texte-doux) !important;
	margin: 14px 0 4px !important;
	padding: 10px 6px 4px 8px !important;
	background: transparent !important;
	text-transform: uppercase;
}

.themeBestrecrue .carteIntervenant .carteEcoleBandeau {
	padding-bottom: 24px !important;
	border-radius: 28px;
}

.themeBestrecrue .tuilesIntervenant {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px;
}

/* Le clearfix ::before/::after de .ui-grid (PrimeFaces) devient une cellule dans une grille : la première tuile partait en 2e colonne. */
.themeBestrecrue .tuilesIntervenant::before,
.themeBestrecrue .tuilesIntervenant::after {
	display: none;
}

.themeBestrecrue .tuilesIntervenant > * {
	float: none !important;
	width: auto !important;
	padding: 0 !important;
}

.themeBestrecrue .tuilesIntervenant .box {
	display: flex !important;
	align-items: center;
	gap: 12px;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 14px 16px !important;
	border: 1px solid var(--br-bordure) !important;
	border-radius: var(--br-rayon-s) !important;
	box-shadow: 0 1px 4px rgba(3, 46, 91, 0.04) !important;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.themeBestrecrue .tuilesIntervenant .box:hover {
	transform: translateY(-1px);
	border-color: #C9DAF0 !important;
	box-shadow: 0 6px 16px rgba(3, 46, 91, 0.08) !important;
}

.themeBestrecrue .tuilesIntervenant .box > .ui-grid-col-12 {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.themeBestrecrue .tuilesIntervenant .box > .ui-grid-col-12:first-child {
	flex: 0 0 38px;
	width: 38px !important;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--br-fond-teinte);
}

.themeBestrecrue .tuilesIntervenant .box > .ui-grid-col-12:first-child img {
	height: 18px !important;
}

.themeBestrecrue .tuilesIntervenant .toolDoc {
	display: none !important;
}

.themeBestrecrue .tuilesIntervenant .box > .ui-grid-col-12:last-child span {
	font-size: 14px !important;
}

.themeBestrecrue .tuilesIntervenant .affichageMobile {
	display: none !important;
}

/* ---------------------------------------------------------------------------------------------
 * Module Learning (demande d'Ali, 2026-09-25 : « tout le module learning est moche »).
 * Menu : sections repliables FORMATION et MESURES, comme celles du module Placement.
 * Pages (.learningPage : accueil, modules, vidéos) : plus de boîte dans la boîte, en-tête titre +
 * bouton sur une ligne, cartes blanches en grille qui remplit la largeur, vignette 16/9, titre sur
 * deux lignes, description sur deux lignes, pied avec le nombre de vidéos et la date.
 */
html[data-menu-plie~="formation"] .themeBestrecrue .menuSection[data-section="formation"] .menuSectionCorps,
html[data-menu-plie~="mesures"] .themeBestrecrue .menuSection[data-section="mesures"] .menuSectionCorps {
	display: none;
}

html[data-menu-plie~="formation"] .themeBestrecrue .menuSection[data-section="formation"] .menuSectionTitre::after,
html[data-menu-plie~="mesures"] .themeBestrecrue .menuSection[data-section="mesures"] .menuSectionTitre::after {
	transform: rotate(-90deg);
}

.themeBestrecrue .learningPage .learningSection,
.themeBestrecrue .learningPage .wrapperMenuCours > .box {
	padding: 24px 26px 26px !important;
	border: 1px solid #E6ECF4;
	border-radius: 18px;
	background: #FFFFFF;
	box-shadow: 0 4px 18px rgba(3, 46, 91, 0.05);
}

.themeBestrecrue .learningPage .wrapperMenuCours {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	border: 0 !important;
}

.themeBestrecrue .learningPage .learningTitre,
.themeBestrecrue .learningPage .titreMenuCours {
	float: none;
	display: block;
	margin: 0 0 4px !important;
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 22px;
	line-height: 1.3;
	color: var(--br-texte, #032E5B);
}

.themeBestrecrue .learningPage .learningTitre {
	margin-bottom: 16px !important;
}

.themeBestrecrue .learningPage .wrapperMenuCours > .box > .ui-grid-col-6 {
	display: flex;
	align-items: center;
	min-height: 44px;
}

.themeBestrecrue .learningPage .wrapperMenuCours > .box > .ui-grid-col-6 + .ui-grid-col-6 {
	justify-content: flex-end;
}

.themeBestrecrue .learningPage .boutonAjouterCours {
	float: none;
	margin: 0 !important;
}

.themeBestrecrue .learningPage .wrapperMenuCours > .box > .ui-grid-col-12:has(> br:only-of-type),
.themeBestrecrue .learningPage .wrapperMenuCours > .box > .ui-grid-col-12:not(:has(*:not(br))) {
	display: none;
}

.themeBestrecrue .learningPage .learningGrille {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	width: 100%;
	margin-top: 18px;
}

.themeBestrecrue .learningPage .learningGrille::before,
.themeBestrecrue .learningPage .learningGrille::after {
	display: none;
}

.themeBestrecrue .learningPage .learningGrille > .ui-grid-col-3 {
	float: none;
	width: auto !important;
	padding: 0 !important;
	min-width: 0;
}

.themeBestrecrue .learningPage .boxContainer {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0 0 12px;
	border: 1px solid #E6ECF4;
	border-radius: 14px;
	background: #FFFFFF;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.themeBestrecrue .learningPage .boxContainer:hover {
	transform: translateY(-2px);
	border-color: var(--br-marque-claire, #0868E6);
	box-shadow: 0 10px 24px rgba(3, 46, 91, 0.10);
}

.themeBestrecrue .learningPage .boxContainer .video-container {
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: 0;
	background: var(--br-fond-teinte, #E6F3FF);
}

.themeBestrecrue .learningPage .boxContainer:hover .video-container {
	transform: none;
}

.themeBestrecrue .learningPage .typeVideo {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 12px 14px 0;
	padding: 0;
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 10.5px;
	letter-spacing: 0.08em;
	color: #98A0AE !important;
}

.themeBestrecrue .learningPage .typeVideo a {
	margin-left: auto;
	color: #98A0AE !important;
	font-size: 14px !important;
	order: 2;
}

.themeBestrecrue .learningPage .typeVideo a + a {
	margin-left: 8px;
}

.themeBestrecrue .learningPage .typeVideo a:hover {
	color: var(--br-marque-claire, #0868E6) !important;
}

.themeBestrecrue .learningPage .titreVideo {
	height: auto;
	min-height: 2.6em;
	margin: 6px 14px 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.3;
}

.themeBestrecrue .learningPage .titreVideo a {
	color: var(--br-texte, #032E5B) !important;
}

.themeBestrecrue .learningPage .descriptionVideo {
	flex: 1;
	margin: 6px 14px 0;
	padding: 0;
	max-height: none;
	font-size: 12.5px;
	line-height: 1.45;
	color: #748A9D;
	-webkit-line-clamp: 2;
}

.themeBestrecrue .learningPage .caracteristiques,
.themeBestrecrue .learningPage .dateVideo {
	margin: 0;
	padding: 0 14px;
	font-size: 12px;
	color: #98A0AE;
}

.themeBestrecrue .learningPage .caracteristiques {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid #F0F4F8;
}

.themeBestrecrue .learningPage .caracteristiques i {
	margin-left: 4px;
	color: var(--br-marque-claire, #0868E6) !important;
}

.themeBestrecrue .learningPage .dateVideo span {
	float: none !important;
}

/* Menu de gauche sans barre de défilement visible (demande d'Ali, 2026-09-26 : « cache le scroller à
   gauche, il est moche et trop large »). Le menu défile toujours à la molette et au pavé tactile. */
html[data-br-theme] .themeBestrecrue .itemsSectionMenu,
.themeBestrecrue .itemsSectionMenu {
	scrollbar-width: none !important;
	-ms-overflow-style: none;
}

html[data-br-theme][data-br-theme][data-br-theme] .themeBestrecrue .itemsSectionMenu::-webkit-scrollbar,
.themeBestrecrue .itemsSectionMenu::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

/* Indicateurs de défilement du menu (menu-defilement.js) : une pastille flèche collée en bas quand il
   reste des entrées plus bas, en haut quand on a quitté le haut, sur un léger fondu ; rien quand le
   menu tient à l'écran. Hauteur nulle : elles ne décalent aucune entrée. */
.themeBestrecrue .itemsSectionMenu > li.menuDefil {
	position: sticky;
	z-index: 5;
	display: block;
	height: 0;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	pointer-events: none;
	background: none !important;
}

.themeBestrecrue .itemsSectionMenu > li.menuDefilHaut {
	top: 0;
}

.themeBestrecrue .itemsSectionMenu > li.menuDefilBas {
	bottom: 0;
}

.themeBestrecrue .itemsSectionMenu > li.menuDefil > span {
	position: absolute;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	height: 46px;
	opacity: 0;
	transition: opacity .2s ease;
}

.themeBestrecrue .itemsSectionMenu > li.menuDefilHaut > span {
	top: 0;
	align-items: flex-start;
	background: linear-gradient(to bottom, #F5F9FF 30%, rgba(245, 249, 255, 0));
}

.themeBestrecrue .itemsSectionMenu > li.menuDefilBas > span {
	bottom: 0;
	align-items: flex-end;
	background: linear-gradient(to top, #F5F9FF 30%, rgba(245, 249, 255, 0));
}

.themeBestrecrue .itemsSectionMenu > li.menuDefil > span > i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin: 2px 0;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 2px 8px rgba(3, 46, 91, 0.15);
	color: var(--br-marque-claire, #0868E6);
	font-size: 11px;
	cursor: pointer;
	pointer-events: auto;
	transition: transform .15s ease, box-shadow .15s ease;
}

.themeBestrecrue .itemsSectionMenu > li.menuDefil > span > i:hover {
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(3, 46, 91, 0.22);
}

.themeBestrecrue .itemsSectionMenu.menuPeutMonter > li.menuDefilHaut > span,
.themeBestrecrue .itemsSectionMenu.menuPeutDescendre > li.menuDefilBas > span {
	opacity: 1;
}

.themeBestrecrue .itemsSectionMenu:not(.menuPeutMonter) > li.menuDefilHaut > span > i,
.themeBestrecrue .itemsSectionMenu:not(.menuPeutDescendre) > li.menuDefilBas > span > i {
	pointer-events: none;
}

.themeBestrecrue .itemsSectionMenu.menuPeutDescendre > li.menuDefilBas > span > i {
	animation: menuDefilInvite 1.8s ease-in-out 2;
}

@keyframes menuDefilInvite {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(3px); }
}

/* Sections repliables de tous les menus (menu-sections.js) : l'état plié suit la classe posée
   d'après data-menu-plie, quel que soit le nom de la section. */
.themeBestrecrue .menuSection.menuSectionPliee > .menuSectionCorps {
	display: none;
}

.themeBestrecrue .menuSection.menuSectionPliee > .menuSectionTitre::after {
	transform: rotate(-90deg);
}

/* Recherche de l'en-tête : suggestions compactes (demande d'Ali, 2026-09-25, « c'est moche »).
   Lignes de 52 px sans ombre grise par ligne, photo ronde de 36 px, nom en navy, rôle en pastille ;
   survol et sélection au clavier dans la teinte du style choisi. Balisage d'entete.xhtml inchangé. */
.themeBestrecrue div[id^="enteteLoggedIn:recherche"][id$="_panel"] {
	padding: 6px !important;
	border: 1px solid #E3EAF4 !important;
	border-radius: 14px !important;
	background: #FFFFFF !important;
	box-shadow: 0 12px 32px rgba(3, 46, 91, 0.16) !important;
	max-height: 440px !important;
	overflow-y: auto !important;
}

.themeBestrecrue div[id^="enteteLoggedIn:recherche"][id$="_panel"] table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 2px;
}

.themeBestrecrue div[id^="enteteLoggedIn:recherche"][id$="_panel"] .ui-autocomplete-item,
.themeBestrecrue div[id^="enteteLoggedIn:recherche"][id$="_panel"] .ui-autocomplete-item td {
	border: none !important;
	background: transparent;
	box-shadow: none !important;
}

.themeBestrecrue div[id^="enteteLoggedIn:recherche"][id$="_panel"] .ui-autocomplete-item td {
	padding: 7px 12px !important;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.themeBestrecrue div[id^="enteteLoggedIn:recherche"][id$="_panel"] .ui-autocomplete-item.ui-state-highlight td,
.themeBestrecrue div[id^="enteteLoggedIn:recherche"][id$="_panel"] .ui-autocomplete-item:hover td {
	background: var(--br-fond-teinte, #EEF5FF) !important;
}

.themeBestrecrue div[id^="enteteLoggedIn:recherche"][id$="_panel"] .ui-autocomplete-item td > div {
	width: auto !important;
	min-width: 320px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.themeBestrecrue div[id^="enteteLoggedIn:recherche"][id$="_panel"] .ui-autocomplete-item td > div > img {
	float: none !important;
	flex: 0 0 auto;
	width: 36px !important;
	height: 36px !important;
	margin: 0 !important;
	object-fit: cover;
	box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px #E3EAF4;
}

.themeBestrecrue div[id^="enteteLoggedIn:recherche"][id$="_panel"] .ui-autocomplete-item td > div > div {
	float: none !important;
	margin: 0 !important;
	min-width: 0;
	line-height: 1.25;
}

.themeBestrecrue div[id^="enteteLoggedIn:recherche"][id$="_panel"] .ui-autocomplete-item td > div > div > span:first-child {
	font-size: 14px;
	color: var(--br-texte, #032E5B);
}

/* Le rôle sous le nom : petit et gris, pastille de couleur conservée (le texte peut être rendu
   dans ou à côté du span de h:outputText, d'où des sélecteurs qui valent dans les deux cas). */
.themeBestrecrue div[id^="enteteLoggedIn:recherche"][id$="_panel"] .ui-autocomplete-item td > div > div > span:not(:first-child),
.themeBestrecrue div[id^="enteteLoggedIn:recherche"][id$="_panel"] .ui-autocomplete-item td > div > div span span,
.themeBestrecrue div[id^="enteteLoggedIn:recherche"][id$="_panel"] .ui-autocomplete-item td > div > div > i + span {
	font-size: 11.5px !important;
	color: #7A8699 !important;
}

.themeBestrecrue div[id^="enteteLoggedIn:recherche"][id$="_panel"] .ui-autocomplete-item td > div > div i.fa-circle {
	font-size: 7px !important;
	margin-right: 2px;
	vertical-align: 1px;
}

.themeBestrecrue div[id^="enteteLoggedIn:recherche"][id$="_panel"] .ui-autocomplete-moretext {
	padding: 6px 12px !important;
	border: none !important;
	color: #98A0AE;
	text-align: center;
}

/* ---------------------------------------------------------------------------------------------
 * Accès rapide, deuxième version (retour d'Ali, 2026-09-26 : « une petite description pour savoir ce
 * que fait la tuile », « c'est moche ») : les six premières actions en cartes avec libellé et une ligne
 * de description ; les autres, derrière « Afficher plus d'actions », dans une grille serrée à part
 * (« Autres actions ») : icône et libellé seulement, la description reste au survol.
 */
.themeBestrecrue .accesRapideTexte {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.themeBestrecrue .accesRapideDescription {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-family: 'Satoshi-Medium', 'Satoshi-Regular', sans-serif;
	font-size: 12px;
	line-height: 1.35;
	color: var(--br-texte-doux);
	white-space: normal;
}

.themeBestrecrue .accesRapideGrille button.accesRapideTuile {
	align-items: center;
	min-height: 72px;
	padding: 12px 14px !important;
}

.themeBestrecrue .accesRapide .accesRapideAutres {
	display: none;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--br-bordure);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.themeBestrecrue .accesRapide .accesRapideAutres::before {
	content: "Autres actions";
	grid-column: 1 / -1;
	font-family: 'Satoshi-Bold', sans-serif;
	font-size: 11px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--br-texte-doux);
}

.themeBestrecrue .accesRapide.accesRapideOuvert .accesRapideAutres {
	display: grid;
}

.themeBestrecrue .accesRapideAutres button.accesRapideTuile {
	gap: 10px;
	padding: 8px 10px !important;
	border-color: transparent !important;
	background: transparent !important;
	box-shadow: none !important;
}

.themeBestrecrue .accesRapideAutres button.accesRapideTuile:hover {
	transform: none;
	border-color: var(--br-bordure) !important;
	background: #FFFFFF !important;
}

.themeBestrecrue .accesRapideAutres .accesRapideIcone {
	flex-basis: 30px;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	font-size: 13px;
}

.themeBestrecrue .accesRapideAutres .accesRapideLibelle {
	font-family: 'Satoshi-Medium', 'Satoshi-Bold', sans-serif;
	font-size: 13px;
}

.themeBestrecrue .accesRapideAutres .accesRapideDescription {
	display: none;
}

@media (max-width: 1100px) {
	.themeBestrecrue .accesRapide .accesRapideAutres {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.themeBestrecrue .accesRapide .accesRapideAutres {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Colonne de droite (.asideNotif, déjà une carte blanche) : les .box qu'elle contient ne redessinent plus
   une seconde carte — plus de double bordure ni de double ombre (Ali, 2026-09-26 : « il y a encore des
   problèmes d'affichage » sur l'accueil élève et la fiche). Le bas de la colonne ne garde plus de vide. */
.themeBestrecrue .asideNotif .box {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
	padding-left: 4px !important;
	padding-right: 4px !important;
	margin-bottom: 0 !important;
}
.themeBestrecrue .asideNotif .box + .box {
	border-top: 1px solid #EEF2F7 !important;
	border-radius: 0 !important;
	margin-top: 8px !important;
	padding-top: 16px !important;
}
.themeBestrecrue .asideNotif {
	padding-bottom: 8px !important;
}

/* Pastille de compteur du menu (« Sessions 1 ») : ronde et compacte, pas une barre rouge. */
.themeBestrecrue .nbNotification {
	display: inline-block;
	width: auto !important;
	min-width: 20px;
	height: 20px;
	padding: 0 6px !important;
	margin: 0 0 0 8px !important;
	border-radius: 10px !important;
	line-height: 20px !important;
	font-size: 11px !important;
	text-align: center;
	box-sizing: border-box;
	vertical-align: middle;
}

/* ---------------------------------------------------------------------------------------------
 * Accueil école en fenêtre étroite (capture d'Ali, 2026-09-27, fenêtre en moitié d'écran) :
 * 1. la carte « Notifications » (#sideBar, section en position fixe, 270 px) flottait par-dessus le
 *    menu et le contenu dès que la fenêtre n'avait plus la place de trois colonnes : masquée sous
 *    1 100 px (la cloche de l'en-tête reste) ;
 * 2. dans la barre du bas (≤ 736 px), les liens « Actualités » inclus dans la même liste
 *    (sectionMenuFil.xhtml dans l'<ul> mobile) et les flèches de défilement ajoutées par
 *    menu-defilement.js devenaient des boutons de 40 px au texte écrit lettre par lettre : la barre
 *    ne garde que ses vrais boutons (li.headerProfilMobile) ;
 * 3. la barre est tenue en bas de l'écran, sans la hauteur maximale ni le défilement du menu de bureau.
 * ------------------------------------------------------------------------------------------- */
@media screen and (max-width: 1100px) {
	/* Sous 1 100 px, trois colonnes n'ont plus la place : la carte fixe est masquée, conteneur et carte. */
	.themeBestrecrue #sideBar.desktop,
	.themeBestrecrue .asideNotif {
		display: none !important;
	}
}

@media screen and (max-width: 736px) {
	.themeBestrecrue .sectionMenu .affichageMobile .itemsSectionMenu {
		position: fixed !important;
		top: auto !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		max-height: none !important;
		overflow: visible !important;
		transform: none !important;
		background: #FFFFFF;
		box-shadow: 0 -2px 12px rgba(3, 46, 91, 0.08);
	}

	.themeBestrecrue .sectionMenu .affichageMobile .itemsSectionMenu > .headerMenuPrincipal,
	.themeBestrecrue .sectionMenu .affichageMobile .itemsSectionMenu > li.menuDefil,
	.themeBestrecrue .sectionMenu .affichageMobile .itemsSectionMenu li.headerProfil,
	.themeBestrecrue .sectionMenu .affichageMobile .itemsSectionMenu > a:has(> li.headerProfil),
	.themeBestrecrue .sectionMenu .affichageMobile .itemsSectionMenu > span:has(li.headerProfil):not(:has(li.headerProfilMobile)) {
		display: none !important;
	}

	/* La barre fixe ne doit pas cacher le bas de la page. */
	.themeBestrecrue .wrapper {
		padding-bottom: 72px;
	}
}