:root {
    --btb-orange: #f08231;
    --btb-red: #c0392b;
    --btb-bg-red: #ffe7e1;
    --btb-green: #205742;
    --btb-bg-green: #eef7f1;
    --btb-navy: #1e3865;
    --btb-bg-orange: #fdf4ec;
    --btb-line: rgba(30, 56, 101, 0.1);
    --btb-muted: #6b7687;
    --btb-soft: #f5faff;
    /* Le survol de ce qui est déjà posé sur `--btb-soft` : une branche fermée
       du catalogue a le fond doux pour tout le monde, et il fallait un cran
       plus bas pour que le curseur dise sur laquelle il se trouve. */
    --btb-soft-hover: #e9f2fb;
    /* Le survol de ce qui est déjà en fond navy plein — sans quoi un bouton
       « Tout décocher » ne réagirait pas au curseur. */
    --btb-navy-hover: #2a4d8c;
}

/**
 * Configurator chrome.
 *
 * Only what the theme does not already provide: the module cards, the carousel
 * and the section layout come from `_applications.scss`, untouched. Everything
 * here is namespaced `btb-proj-*` so a restyle of the apps page cannot collide
 * with it.
 *
 * Colours go through custom properties with fallbacks, so the module picks up
 * the theme's palette where it defines one and stays legible where it does not.
 */

.btb-proj-screen,
.btb-proj-cta,
.btb-proj-bubble {
	--btb-proj-accent: var(--color-primary, #e94e1b);
	--btb-proj-ink: var(--color-text, #1d1d1b);
	--btb-proj-line: rgba(0, 0, 0, .12);
	--btb-proj-surface: #fff;
}

/* Buttons ------------------------------------------------------------------ */

.btb-proj-btn {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	padding: .6em 1.1em;
	border: 1px solid var(--btb-orange);
	border-radius: 5px;
	background: transparent;
	color: var(--btb-orange);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: all .18s ease;
}

.btb-proj-cal__bar .btb-proj-btn {
    border-color: var(--btb-navy);
    color: var(--btb-navy);
    background: white;
}

.btb-proj-cal__bar .btb-proj-btn:hover:not(:disabled) {
    border-color: var(--btb-orange);
}

/* Au bout de la bande : le bouton reste lisible mais ne prétend plus mener
   quelque part. `disabled` et pas seulement une teinte — il sort aussi du
   parcours clavier, où un bouton sans effet est une impasse. */
.btb-proj-cal__bar .btb-proj-btn:disabled {
    opacity: .35;
    cursor: default;
}

.btb-proj-cal__bar .btb-proj-btn:disabled:hover {
    background: white;
    color: var(--btb-navy);
    transform: none;
    box-shadow: none;
}

.btb-proj-cal__bar .btb-proj-btn .btb-proj-icon {
    flex: 0 0 auto;
}

.btb-proj-btn:hover,
.btb-proj-btn:focus-visible {
	background: var(--btb-orange);
	color: #fff;
}

.btb-proj-btn:hover {
	transform: translateY(-2px);
	box-shadow: 4px 4px 0 rgba(30, 56, 101, 0.15);
}

.btb-proj-modal__foot .btb-proj-btn {
    padding: 1.1rem 1.8rem;
}

.btb-proj-modal__foot .btb-proj-btn:last-child {
    color: var(--btb-navy) !important;
    background: #fff;
    border: 1px solid var(--btb-line);
}

.btb-proj-modal__foot .btb-proj-btn:last-child:hover {
    background: var(--btb-navy);
    color: #fff !important;
    border-color: var(--btb-navy);
    transform: translateY(-2px);
    box-shadow: 4px 4px 0 var(--btb-orange);
}

.apps-section__module.btb-proj-tour-target .btb-proj-btn:hover {
	transform: none;
	box-shadow: none;
}

.btb-proj-listhead .btb-proj-btn.btb-proj-btn--primary {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 1.1rem 1.8rem;
	font-size: 1.1rem;
	font-family: inherit;
	font-weight: 600;
	color: white;
	background: var(--btb-navy);
	border: 1px solid var(--btb-navy);
	border-radius: 6px;
	text-decoration: none !important;
	cursor: pointer;
	transition: all 0.15s ease;
}

.btb-proj-listhead .btb-proj-btn.btb-proj-btn--primary:hover {
    background: var(--btb-orange);
    border-color: var(--btb-orange);
    box-shadow: 4px 4px 0 rgba(30, 56, 101, 0.15);
}

.btb-proj-btn--primary {
	background: var(--btb-orange);
	color: #fff;
}

.btb-proj-tour__tip .btb-proj-btn--primary {
	background: var(--btb-navy);
	color: #fff;
	border: var(--btb-navy);
	padding: 1rem 2rem;
	font-size: 1rem;
}

.btb-proj-actions .btb-proj-btn {
    padding: 1.1rem 1.8rem;
}

.btb-proj-btn.is-busy {
	opacity: .55;
	pointer-events: none;
}

/* Il manque quelque chose à « Transmettre » : le bouton est éteint tant que le
   dossier n'est pas transmissible. Posée et retirée par le script, donc
   invisible sans JavaScript — où le bouton reprend son rôle habituel et où le
   serveur refuse l'envoi incomplet. */
.btb-proj-btn.is-idle {
	opacity: .45;
	pointer-events: none;
}

/* The two icons ship together and CSS shows the one matching the state, so the
   script only has to flip `is-selected` and the icon stays right whether the
   toggle came from a page load or a fetch(). */
.btb-proj-btn__icon[data-icon="remove"],
.btb-proj-btn.is-selected .btb-proj-btn__icon[data-icon="add"] {
	display: none;
}

.btb-proj-btn.is-selected .btb-proj-btn__icon[data-icon="remove"] {
	display: inline-flex;
}

.btb-proj-btn.is-selected {
	background: var(--btb-green);
    border-color: var(--btb-green);
	color: #fff;
}

/* Même relais pour les libellés, quand le bouton en porte deux : le texte de
   l'état atteint attend dans la page plutôt que d'être écrit par le script. */
.btb-proj-btn__label[data-label="done"],
.btb-proj-btn.is-selected .btb-proj-btn__label[data-label="add"] {
	display: none;
}

.btb-proj-btn.is-selected .btb-proj-btn__label[data-label="done"] {
	display: inline;
}

/* Module card state -------------------------------------------------------- */

.apps-section__module {
	position: relative;
    transition: all .18s ease;
}

.apps-section__module:hover {
    transform: translateY(-2px);
    box-shadow: 6px 6px 0 rgba(30, 56, 101, 0.15);
}

.apps-section__module.btb-proj-tour-target:hover {
    transform: none;
    box-shadow: none;
}

.apps-section__module.is-selected {
	border-color: var(--btb-green)!important;
    background-color: var(--btb-bg-green)!important;
}

/* L'ombre portée des cartes déborde du wrapper du carrousel, qui la rogne.
 *
 * On ne peut PAS lui donner du padding pour lui faire de la place : les cartes
 * sont dimensionnées en `calc(33.33% - 14px)` du contenu du wrapper, alors que
 * `apps-carousel.js` calcule son décalage à partir de `wrapper.offsetWidth`,
 * qui est la boîte de bordure. Un padding désaccorde les deux et le carrousel
 * se décale un peu plus à chaque cran.
 *
 * On ne peut pas non plus passer en `overflow: visible` + `clip-path` : le
 * clip-path ne découpe qu'à la peinture. La piste, large de ses cinquante-cinq
 * cartes, continue alors d'alimenter la zone de défilement du document — d'où
 * un vide à droite et une barre horizontale sur toute la page.
 *
 * `overflow: clip` fait les deux : il rogne le débordement comme `hidden`, sans
 * créer de conteneur défilant, et `overflow-clip-margin` repousse la zone de
 * découpe AU-DELÀ de la boîte. 12px couvrent les 6px de l'ombre, les 2px que le
 * survol soulève et le liseré de 2px des cartes sélectionnées ; l'écart entre
 * deux cartes étant de 21px, ce débordement ne laisse voir que du vide, jamais
 * la carte voisine.
 *
 * Pas de @supports : un navigateur qui ignore `overflow: clip` jette la
 * déclaration entière et retombe sur le `overflow: hidden` du thème — carrousel
 * intact, ombre rognée. Safari comprend `overflow: clip` mais pas encore
 * `overflow-clip-margin` : il rogne donc à la boîte, comme auparavant. */
.page-apps .apps-section .apps-section__modules.modules-carousel-container .modules-carousel-wrapper {
	overflow: clip;
	overflow-clip-margin: 12px;
}

.apps-section__module .btb-proj-btn {
	margin-top: 2rem;
}

.apps-section__module .btb-proj-btn .btb-proj-btn__icon {
    position: relative;
    top: 1px;
}

/* Compteur par domaine dans la navigation ------------------------------------
   Positionné en absolu dans le coin du lien : le thème le déclare `display:
   block` avec un texte centré, et le passer en flex pour loger la pastille
   décalerait tous les libellés. */

.apps-nav__link { position: relative; }

.apps-nav__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	padding: 0;
	border-radius: 50%;
	background: var(--btb-orange);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1;
}

.apps-nav__count[hidden] { display: none; }

/* Aperçu depuis la liste de sélection ---------------------------------------- */

.btb-proj-item__preview {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding: 0.3rem 0.9rem;
    font-size: 1.05rem;
    font-family: inherit;
    font-weight: 500;
    color: var(--btb-navy);
    background: #fff;
    border: 1px solid var(--btb-line);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btb-proj-item__preview:hover {
	background: var(--btb-navy);
	color: #fff;
	border-color: var(--btb-navy);
}

/* La carte du catalogue reprise dans le modal : elle y est seule, sans
   carrousel ni grille, et n'a donc pas à être bornée en largeur. */
.btb-proj-modal__body .btb-proj-cards .apps-section__modules {
	display: block;
}

.btb-proj-modal__body .apps-section__module {
	width: 100%;
	max-width: none;
	min-width: 0;
}

.btb-proj-modal__body .apps-section__module:hover {
	transform: none;
	box-shadow: none;
}

/* Compatible tools --------------------------------------------------------- */

.btb-proj-tools {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--btb-line);
}

/* Une seule règle pour les deux intitulés de bas de carte : « Compatible avec »
   et « Tarification » se répondent, ils ne doivent pas pouvoir diverger. */
.btb-proj-tools__label,
.btb-proj-prices__label {
	margin: 0 0 .3rem;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .45;
}

/* Tarification, sous les marques compatibles et taillée comme elles. */
.btb-proj-prices {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--btb-line);
}

/* La liste sert aussi la fenêtre de détail, où elle se détache seule ; sous un
   intitulé, sa marge d'aération ferait un trou. */
.btb-proj-prices .btb-proj-detail__prices {
	margin-top: 0;
}

.btb-proj-tools__list {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.btb-proj-tools__item {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem .9rem;
	border: 1px solid var(--btb-line);
	border-radius: 3px;
	font-size: 1rem;
	font-weight: 500;
	background-color: white;
}

.btb-proj-tools__logo {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.btb-proj-tools__vendor {
	margin-left: .35em;
	font-style: normal;
	opacity: .6;
}

/* Call to action ----------------------------------------------------------- */

.btb-proj-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 2.5rem;
	padding: 1.2rem 1.5rem;
	border: 1px solid var(--btb-proj-line);
	border-radius: 12px;
	background: var(--btb-proj-surface);
}

.btb-proj-cta__text {
	margin: 0;
	font-size: .95rem;
}

/* Invitation épinglée --------------------------------------------------------
   Même coin que la pastille « projet en cours », et jamais en même temps
   qu'elle : tant que rien n'est sélectionné on invite, dès qu'il y a une
   sélection la pastille prend la place. */

.btb-proj-invite {
	position: fixed;
	right: 1.55rem;
	bottom: 1.5rem;
	z-index: 9000;
	width: min(320px, calc(100vw - 2.5rem));
	padding: 2rem;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 34px rgba(30, 56, 101, .22);
	text-align: center;
	animation: btb-proj-invite-in .32s ease both;
}

@keyframes btb-proj-invite-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.btb-proj-invite { animation: none; }
}

.btb-proj-invite__close {
	position: absolute;
	top: .45rem;
	right: .6rem;
	padding: .2rem .45rem;
	border: 0;
	background: none;
	color: inherit;
	font-size: 2.2rem;
	line-height: 1;
	opacity: .4;
	cursor: pointer;
	font-weight: 300;
}

.btb-proj-invite__close:hover {
    opacity: 1;
}

/* L'illustration est un bouton, mais seulement une fois le panneau replié :
   dépliée, elle n'est qu'une image, et le script la laisse `disabled`. */
.btb-proj-invite__open {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
}

.btb-proj-invite__open:not([disabled]) { cursor: pointer; }

.btb-proj-invite__illus {
	display: block;
	width: auto;
	max-width: 100%;
	height: 80px;
	margin: 0 auto .8rem;
	transition: height .22s ease, margin .22s ease;
}

/* Replié : collé au bas de la fenêtre, arrondi sur les seuls angles hauts, et
   réduit à sa seule illustration. Un clic dessus le redéploie. */

.btb-proj-invite.is-collapsed {
	bottom: 0;
    right: 3rem;
	width: auto;
	padding: .7rem 1.4rem .5rem;
	border-radius: 14px 14px 0 0;
}

.btb-proj-invite.is-collapsed .btb-proj-invite__close,
.btb-proj-invite.is-collapsed .btb-proj-invite__body {
	display: none;
}

.btb-proj-invite.is-collapsed .btb-proj-invite__illus {
	height: 50px;
	margin: 0;
}

/* Repli restauré au chargement : pas de glissement d'entrée pour un panneau que
   le visiteur avait déjà rangé. */
.btb-proj-invite.is-no-anim { animation: none; }

@media (prefers-reduced-motion: reduce) {
	.btb-proj-invite__illus { transition: none; }
}

.btb-proj-invite__title {
	margin: 0 0 .5rem;
	font-size: 1.2rem;
	font-weight: 600;
}

.btb-proj-invite__text {
	margin: 0 0 1.6rem;
	font-size: 1.1rem;
	line-height: 1.45;
}

.btb-proj-invite__cta {
	justify-content: center;
	width: 100%;
	font-size: 1.1rem;
    padding: 1.1rem 2rem;
}

.btb-proj-invite__link {
	display: inline-block;
	margin-top: .7rem;
	font-size: 1.1rem;
	opacity: .7;
}

/* Visite guidée --------------------------------------------------------------
   Le « projecteur » n'a pas de fond : c'est son ombre portée de 9999px qui
   teinte tout le reste de l'écran. Un voile plein aurait imposé de faire
   remonter la carte au-dessus de lui, ce que le contexte d'empilement créé par
   le rognage du wrapper de carrousel rend impossible. */

/* Ces trois-là portent un `display` explicite, que l'attribut `hidden` ne
   suffirait pas à neutraliser. Ils se relaient sans jamais être reconstruits. */
.btb-proj-tour[hidden],
.btb-proj-tour__tip[hidden],
.btb-proj-bubble[hidden],
.btb-proj-invite[hidden] { display: none; }

.btb-proj-tour__spot {
	position: fixed;
	z-index: 9400;
	border-radius: 10px;
	box-shadow: 0 0 0 9999px rgba(240, 130, 49, .5);
	pointer-events: none;
	transition: top .15s linear, left .15s linear, width .15s linear, height .15s linear;
}

/* La carte reste cliquable : seul le voile est traversé par les clics. */
.apps-section__module.btb-proj-tour-target { position: relative; }

.apps-section__module.btb-proj-tour-target .btb-proj-pick {
	animation: btb-proj-tour-pulse 1.6s ease-in-out infinite;
}

@keyframes btb-proj-tour-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(240, 130, 49, .55); }
	50%      { box-shadow: 0 0 0 10px rgba(240, 130, 49, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.apps-section__module.btb-proj-tour-target .btb-proj-pick { animation: none; }
	.btb-proj-tour__spot { transition: none; }
}

.btb-proj-tour__tip {
	position: fixed;
	z-index: 9500;
	width: min(300px, calc(100vw - 2.5rem));
	padding: 1.4rem 1.6rem 1.6rem;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 10px 34px rgba(30, 56, 101, .28);
}

.btb-proj-tour__title {
	margin: 0 0 .4rem;
	font-size: 1.6rem;
	font-weight: 600;
}

.btb-proj-tour__text {
	margin: 0 0 1.4rem;
	font-size: 1.2rem;
	line-height: 1.45;
}

/* Floating badge ----------------------------------------------------------- */

.btb-proj-bubble {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 9000;
	display: flex;
	align-items: stretch;
	border-radius: 999px;
	background: var(--btb-navy);
	color: #fff;
	box-shadow: 0 8px 24px rgba(30, 56, 101, 0.28);
}

.btb-proj-bubble__main {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.2rem 1.1rem;
	color: inherit;
	text-decoration: none;
}

.btb-proj-bubble__icon {
	display: inline-flex;
	color: var(--btb-orange);
}

.btb-proj-bubble__text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.btb-proj-bubble__label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.65;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.btb-proj-bubble__title {
	max-width: 14ch;
	overflow: hidden;
	font-size: 1.3rem;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.btb-proj-bubble__count {
    flex: 0 0 auto;
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0 0.6rem;
    border-radius: 1.2rem;
    background: var(--btb-orange);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    marin-left: 1rem;
}

.btb-proj-bubble__close {
    display: flex;
    align-items: center;
    padding: 0 1.2rem;
    font-size: 2rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.18s ease;
}

.btb-proj-bubble__close:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08);
}

/* Project screen ----------------------------------------------------------- */

.btb-proj-screen {
	padding: 5rem 0 0;
}

.btb-proj-screen__suptitle {
	margin: 0;
	font-size: .8rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .6;
}

.btb-proj-screen__title {
	margin: .2em 0 1rem;
}

.btb-proj-rename {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-bottom: 2.5rem;
}

.btb-proj-rename input[type="text"] {
	flex: 1;
	min-width: 220px;
	max-width: 420px;
	padding: .55em .9em;
	border: 1px solid var(--btb-proj-line);
	border-radius: 8px;
}

.btb-proj-list {
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.btb-proj-list__item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.2rem;
	border: 1px solid var(--btb-proj-line);
	border-radius: 10px;
	margin-bottom: .6rem;
}

.btb-proj-list__body {
	flex: 1;
	min-width: 0;
}

.btb-proj-list__ref,
.btb-proj-list__domain {
	margin: 0;
	font-size: .78rem;
	opacity: .6;
}

.btb-proj-list__title {
	margin: .15em 0;
	font-size: 1.05rem;
}

.btb-proj-list__remove {
	display: inline-flex;
	padding: .5rem;
	border-radius: 8px;
	color: #b32d2e;
	text-decoration: none;
}

.btb-proj-list__remove:hover {
	background: rgba(179, 45, 46, .08);
}

.btb-proj-screen__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--btb-proj-line);
}

.btb-proj-screen__count {
	margin: 0;
	font-weight: 600;
}

.btb-proj-screen__empty {
	padding: 3rem 0;
	text-align: center;
}

@media (max-width: 640px) {
	.btb-proj-bubble {
		right: .75rem;
		bottom: .75rem;
	}

	.btb-proj-bubble__title {
		max-width: 10ch;
	}
}

/* Selection quantities ----------------------------------------------------- */

.btb-proj-qty {
	display: flex;
	align-items: center;
	gap: .4rem;
	flex-shrink: 0;
}

.btb-proj-qty label {
	font-size: .75rem;
	opacity: .65;
}

.btb-proj-qty input[type="number"] {
	width: 4.5rem;
	padding: .4em .5em;
	border: 1px solid var(--btb-proj-line, rgba(0, 0, 0, .12));
	border-radius: 8px;
}

.btb-proj-screen__profile {
	display: inline-block;
	margin-left: .6em;
	padding: .15em .6em;
	border-radius: 999px;
	background: rgba(0, 0, 0, .07);
	font-size: .7rem;
	letter-spacing: 0;
	text-transform: none;
}

/* Calculation table -------------------------------------------------------- */

.btb-proj-quote__badge {
	display: inline-block;
	margin: 0 0 1rem;
	padding: .35em .9em;
	border-radius: 999px;
	background: var(--btb-proj-accent, #e94e1b);
	color: #fff;
	font-size: .8rem;
	font-weight: 600;
}

/* A wide table must scroll inside its own box, never make the page scroll. */
.btb-proj-quote__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.btb-proj-quote__scroll + .btb-proj-quote__scroll {
    margin-top: 3rem;
}

.btb-proj-quote__table {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: 1.2rem;
}

.btb-proj-quote__table th,
.btb-proj-quote__table td {
	padding: .7rem .8rem;
	border-bottom: 1px solid var(--btb-line);
	text-align: left;
}

.btb-proj-quote__ref-wrapper {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 0.2rem;
}

.btb-proj-quote__table thead th {
	font-size: 1.1rem;
	letter-spacing: .05em;
	opacity: .6;
	
}

.btb-proj-quote__table th {
    font-weight: 600;
}

.btb-proj-quote__table .is-num {
	text-align: right;
	white-space: nowrap;
}

/* Les deux tableaux de montage se lisent de gauche à droite ------------------
   Application, type, compatibilité, jours, quantité : tout part du même bord,
   et l'œil descend une colonne au lieu de la chercher. Seuls les montants
   restent à droite — ce sont eux qu'on additionne du regard, et leurs unités
   doivent tomber les unes sous les autres.

   Les sélecteurs portent `td`/`th` parce qu'ils doivent l'emporter sur le
   `.is-num` ci-dessus, qui tire tout à droite pour les autres tableaux. */
.btb-proj-quote__table--internal th,
.btb-proj-quote__table--internal td,
.btb-proj-quote__table--internal th.is-num,
.btb-proj-quote__table--internal td.is-num,
.btb-proj-quote__table--hardware th,
.btb-proj-quote__table--hardware td,
.btb-proj-quote__table--hardware th.is-num,
.btb-proj-quote__table--hardware td.is-num {
	text-align: left;
}

.btb-proj-quote__table--internal th.is-price,
.btb-proj-quote__table--internal td.is-price,
.btb-proj-quote__table--hardware th.is-price,
.btb-proj-quote__table--hardware td.is-price {
	text-align: right;
}

/* Les champs suivent leur colonne : une case posée à gauche dont le contenu
   fuit vers la droite se lit de travers. */
.btb-proj-quote__table--internal .btb-proj-quote__days,
.btb-proj-quote__table--internal .btb-proj-quote__rebate-input,
.btb-proj-quote__table--hardware .btb-proj-quote__days,
.btb-proj-quote__table--hardware .btb-proj-quote__rebate-input {
	text-align: left;
}

.btb-proj-quote__table tfoot th,
.btb-proj-quote__table tfoot td {
	border-bottom: 0;
	font-weight: 600;
    text-transform: uppercase;
}

.btb-proj-quote__table tbody tr:hover {
    background-color: var(--btb-soft);
}

/* Le tableau de montage de l'offre : dix colonnes, dont trois de durées et deux
   de montants. Il défile dans `__scroll` plutôt que de comprimer les libellés,
   et son en-tête reste visible pendant qu'on descend les lignes. */

.btb-proj-quote__table--internal {
	min-width: 96rem;
	font-size: 1.1rem;
}

.btb-proj-quote__table {
    font-size: 1.1rem;
}

.btb-proj-quote__table--internal .btb-proj-quote__tools {
	max-width: 16rem;
}

.btb-proj-quote__table .btb-proj-quote__days {
	width: 6rem;
	padding: 0.8rem 1.4rem;
	border: 1px solid var(--btb-line);
	border-radius: 6px;
	font: inherit;
	text-align: right;
	background-color: var(--btb-soft);
}

/* La remise d'une ligne : un champ court, le signe collé derrière. Le pour cent
   est écrit une fois dans la page plutôt que tapé par l'agent à chaque ligne —
   et le champ reste un nombre, que le serveur n'a pas à nettoyer d'un « % ». */
.btb-proj-quote__rebate {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
}

.btb-proj-quote__table .btb-proj-quote__rebate-input {
	width: 5rem;
	padding: 0.8rem 1rem;
	border: 1px solid var(--btb-line);
	border-radius: 6px;
	font: inherit;
	text-align: right;
	background-color: var(--btb-soft);
}

.btb-proj-quote__table tbody tr:hover .btb-proj-quote__rebate-input {
	background-color: #fff;
}

.btb-proj-quote__rebate-sign {
	color: var(--btb-muted);
}

/* Ce qu'une remise a coûté, en pied de colonne : un montant retiré, à lire
   comme la marge qu'il a entamée. */
.btb-proj-quote__rebate-sum {
	color: var(--btb-orange);
	font-weight: 600;
}

.btb-proj-quote__table--support tbody td.is-num {
    width: 12rem;
}

.btb-proj-quote__table--support tbody td.is-num .btb-proj-quote__rate {
    width: 6rem;
}

.btb-proj-quote__table tbody tr:hover .btb-proj-quote__days {
	background-color: white;
}

/* La quantité du matériel : le même objet que le taux de TVA — un champ et ses
   deux boutons sous une seule bordure — mais serré d'un cran, une colonne de
   tableau n'ayant pas la place d'un pied de page. Le groupe porte déjà son fond
   blanc : la ligne survolée ne le teinte pas, il n'y a rien à rattraper. */
.btb-proj-quote__table .btb-proj-quote__qty {
	width: 3.6rem;
	padding-right: 0;
	padding-left: 0;
}

.btb-proj-quote__table .btb-proj-stepper__btn {
	width: 2rem;
}

/* Le tarif journalier tient des montants à quatre chiffres, pas des demi-
   journées : il lui faut plus de place que la colonne des jours. La
   personnalisation d'un appareil se compte de la même façon — c'est un montant,
   pas une durée — et prend donc la même case. */
.btb-proj-quote__table .btb-proj-quote__rate,
.btb-proj-quote__table .btb-proj-quote__custom {
	width: 9rem;
	padding: 0.8rem 1.4rem;
	border: 1px solid var(--btb-line);
	border-radius: 6px;
	font: inherit;
	text-align: right;
	background-color: var(--btb-soft);
}

.btb-proj-quote__table tbody tr:hover .btb-proj-quote__rate,
.btb-proj-quote__table tbody tr:hover .btb-proj-quote__custom {
	background-color: white;
}

/* Prix retenu pour l'offre --------------------------------------------------
   Deux options, jamais les deux : un bouton radio et non une case, et la
   colonne correspondante du tableau se souligne pour que le choix se voie là
   où il agit. */

.btb-proj-quote__mode {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	margin: 0 0 2rem;
	justify-content: flex-end;
	border: none;
	padding: 0;
}

.btb-proj-quote__mode legend {
	float: left;
	padding: 0 1.2rem 0 0;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--btb-navy);
}

.btb-proj-quote__mode-choice {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-size: 1.15rem;
	cursor: pointer;
}

.btb-proj-quote__mode-choice input {
    appearance: auto;
    -webkit-appearance: checkbox;
    position: static;
    opacity: 1;
    clip: auto;
    clip-path: none;
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    accent-color: var(--btb-orange);
    cursor: pointer;
}

.btb-proj-quote__mode-choice span {
    position: relative;
    top: 0.5px;
}

/* La colonne que l'offre transmise portera. */
.btb-proj-quote__table td.is-kept {
	font-weight: 600;
	background: var(--btb-soft);
}

.btb-proj-quote__ref {
	display: block;
	font-size: 1rem;
	font-weight: 500;
	opacity: .55;
}

.btb-proj-empty {
    padding: 1.2rem 1.6rem;
    border-radius: 6px;
    background: var(--btb-bg-orange);
    border-left: 4px solid var(--btb-orange);
    color: var(--btb-orange);
    font-size: 1.2rem;
    margin: 0.5rem 0 0;
}

/* Le panneau se rejoue pendant que le serveur recalcule : assez pâle pour
   qu'on voie qu'il travaille, assez lisible pour qu'on continue de lire. */
.btb-proj-panel--quote.is-loading {
	opacity: .5;
	transition: opacity .15s ease;
}

/* Sans ligne à afficher, le panneau reste dans le DOM pour que le script ait
   où verser le tableau, mais il ne doit pas dessiner une boîte blanche vide.
   Une classe et non `:empty` : PHP laisse des blancs entre les balises. */
.btb-proj-panel--quote.is-empty { display: none; }

/* Le socle depuis la barre du catalogue de l'écran d'édition. */
.btb-proj-btn.btb-proj-picker__base { 
    flex-shrink: 0; 
    padding: 1.1rem 1.8rem;
    background-color: var(--btb-navy);
    border: 1px solid var(--btb-navy);
}

/* Licence de base, première étape du parcours --------------------------------
   Elle avait son panneau au milieu de l'écran ; c'est maintenant une bulle de la
   visite, avec le projecteur autour du rayon dont elle parle. Il ne lui reste
   que ce que la bulle générique n'a pas : sa rangée de réponses, et la note qui
   rassure sous elles. */

.btb-proj-tour__tip--base {
	width: min(360px, calc(100vw - 2.5rem));
}

.btb-proj-tour__tip--base .btb-proj-tour__text:last-of-type {
	margin-bottom: 1.6rem;
	font-weight: 600;
	color: var(--btb-navy);
}

.btb-proj-tour__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
}

.btb-proj-tour__actions .btb-proj-btn { padding: 1rem 1.6rem; }

/* Le refus n'est pas une action de second rang qu'on grise : il est neutre. */
.btb-proj-tour__actions .btb-proj-btn:not(.btb-proj-btn--primary) {
	border-color: var(--btb-line);
	color: var(--btb-navy);
}

.btb-proj-tour__actions .btb-proj-btn:not(.btb-proj-btn--primary):hover,
.btb-proj-tour__actions .btb-proj-btn:not(.btb-proj-btn--primary):focus-visible {
	background: var(--btb-bg-orange);
	color: var(--btb-navy);
}

.btb-proj-tour__note {
	margin: 1.2rem 0 0;
	font-size: 1rem;
	color: var(--btb-muted);
}

/* Le projecteur cerne ici un rayon entier du catalogue, pas une carte : il lui
   faut de la place pour respirer, et l'ombre portée fait le reste. */
.apps-section.btb-proj-tour-target { position: relative; }

.btb-proj-quote__was {
	display: block;
	font-size: .78rem;
	opacity: .45;
}

.btb-proj-quote__totals {
	max-width: 40rem;
	margin: 4rem 0 0 auto;
	background-color: var(--btb-soft);
	border-radius: 10px;
	padding: 2rem;
    font-size: 1.25rem;
}

.btb-proj-quote__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0 .9rem;
	border-bottom: 1px solid var(--btb-line);
}

.btb-proj-quote__row dt,
.btb-proj-quote__row dd {
	margin: 0;
}

.btb-proj-quote__row dd {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.btb-proj-quote__row--saving {
	color: var(--btb-orange);
}

/* Le coût d'installation se lit parmi les montants mais n'entre dans aucun
   d'eux : c'est son détail qui le dit. */
.btb-proj-quote__detail {
	display: block;
	font-size: .9rem;
	opacity: .5;
}

/* La TVA et le TTC sont rendus à taux nul, prêts à reparaître. */
.btb-proj-quote__row[hidden] {
	display: none;
}

.btb-proj-quote__row--total {
	border-bottom: 0;
	font-weight: 600;
}

.btb-proj-quote__note {
	margin-top: 2rem;
	font-size: .9rem;
	opacity: .45;
	text-align: right;
}


/* Tasks -------------------------------------------------------------------- */

.btb-proj-tasks__intro {
	margin: 0 0 1.5rem;
	font-size: .92rem;
}

.btb-proj-phase {
	margin-bottom: 1.8rem;
}

.btb-proj-phase__title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 .7rem;
	padding-bottom: .4rem;
	border-bottom: 1px solid var(--btb-proj-line, rgba(0, 0, 0, .12));
	font-size: 1rem;
}

.btb-proj-phase__hours {
	font-size: .8rem;
	font-weight: 400;
	opacity: .6;
	white-space: nowrap;
}

.btb-proj-phase__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.btb-proj-task {
	padding: .8rem 0;
	border-bottom: 1px dashed var(--btb-proj-line, rgba(0, 0, 0, .12));
}

.btb-proj-task:last-child {
	border-bottom: 0;
}

.btb-proj-task__label {
	margin: 0;
	font-weight: 600;
}

.btb-proj-task__desc {
	margin: .25rem 0 0;
	font-size: .88rem;
	opacity: .75;
}

.btb-proj-task__articles {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: .5rem 0 0;
	padding: 0;
	list-style: none;
}

.btb-proj-task__articles a {
	display: inline-block;
	padding: .2em .7em;
	border: 1px solid var(--btb-proj-accent, #e94e1b);
	border-radius: 999px;
	color: var(--btb-proj-accent, #e94e1b);
	font-size: .78rem;
	text-decoration: none;
}

.btb-proj-task__articles a:hover {
	background: var(--btb-proj-accent, #e94e1b);
	color: #fff;
}

@media (max-width: 640px) {
	.btb-proj-list__item {
		flex-wrap: wrap;
	}

	.btb-proj-quote__totals {
		max-width: none;
	}
}

/* Submission form ---------------------------------------------------------- */

.btb-proj-submit {
	margin-top: 2.5rem;
	padding: 1.5rem;
	border: 1px solid var(--btb-proj-line, rgba(0, 0, 0, .12));
	border-radius: 12px;
}

.btb-proj-submit__title {
	margin-top: 0;
}

.btb-proj-submit__intro {
	margin-bottom: 1.2rem;
	font-size: .92rem;
}

.btb-proj-submit__error {
	margin-bottom: 1rem;
	padding: .7rem 1rem;
	border-left: 3px solid #b32d2e;
	background: rgba(179, 45, 46, .07);
	color: #b32d2e;
}

.btb-proj-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
}

.btb-proj-form__field {
	margin: 0 0 1rem;
}

.btb-proj-form__field label {
	display: block;
	margin-bottom: .3rem;
	font-size: .85rem;
	font-weight: 600;
}

.btb-proj-form__field input,
.btb-proj-form__field textarea {
	width: 100%;
	padding: .6em .8em;
	border: 1px solid var(--btb-proj-line, rgba(0, 0, 0, .12));
	border-radius: 8px;
	font: inherit;
}

.btb-proj-form__actions {
	margin: .5rem 0 0;
}

/* Agent panel -------------------------------------------------------------- */

.btb-proj-notice {
    padding: 1.2rem 1.6rem;
    border-radius: 6px;
    font-size: 1.2rem;
    margin-block: 1.6rem 2rem;
    border-left: 4px solid;
}

#btb-proj-s-meeting .btb-proj-panel__title + .btb-proj-notice {
    background: var(--btb-bg-green);
    border-left: 4px solid var(--btb-green);
    color: var(--btb-green);
    margin: 0 0 1.2rem;
}

#btb-proj-s-meeting .btb-proj-panel__title + .btb-proj-notice:last-child,
#btb-proj-s-quote > .btb-proj-panel__title + .btb-proj-notice:last-child {
    margin-bottom: 0;
}

.btb-proj-notice--success {
	background: var(--btb-bg-green);
	border-color: var(--btb-green);
	color: var(--btb-green);
}

/* Ce qu'on attend du lecteur. Pas une alerte — rien n'est cassé — mais la seule
   chose qu'on lui demande de tout l'écran, et elle doit se voir comme telle. */
.btb-proj-notice--warning {
	background: var(--btb-bg-orange);
	border-color: var(--btb-orange);
	color: var(--btb-orange);
}

#btb-proj-s-meeting .btb-proj-notice--success {
    margin-bottom: 0;
}

.btb-proj-agent {
	margin: 2.5rem 0;
	padding: 1.5rem;
	border: 1px dashed var(--btb-proj-line, rgba(0, 0, 0, .2));
	border-radius: 12px;
}

.btb-proj-agent__title {
	margin-top: 0;
	font-size: 1.1rem;
}

.btb-proj-agent__refs {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	font-size: .9rem;
}

.btb-proj-agent__refs li {
	margin-bottom: .3rem;
}

.btb-proj-agent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

.btb-proj-agent__note {
	margin: 1rem 0 0;
	font-size: .8rem;
	opacity: .65;
}

/* Standalone catalogue ------------------------------------------------------ */

/**
 * The shortcode emits `.page-apps` itself when no template provides it, because
 * every rule of the theme's apps stylesheet is scoped under that class. But the
 * class is written for a full page and opens with 120px of top padding, which
 * is wrong halfway down an ordinary page — the marker class neutralises it.
 */
.page-apps.btb-proj-standalone {
	padding-top: 0;
}

.btb-proj-standalone .apps-content__container {
	margin-top: 0;
}

/* =========================================================================
   Écrans liste & édition — calqués sur le builder de dossiers documentaires.
   Les deux modules sont utilisés par les mêmes personnes le même jour : un
   agent ne doit pas avoir à apprendre deux interfaces.
   ========================================================================= */

.btb-proj-wrap {
	--btb-proj-accent: var(--color-primary, #e94e1b);
	--btb-proj-ink: var(--color-text, #1d1d1b);
	--btb-proj-line: rgba(0, 0, 0, .12);
	--btb-proj-surface: #fff;
	--btb-proj-muted: rgba(0, 0, 0, .04);
	padding: 3rem 0 5rem;
}

.btb-proj-modal {
	--btb-proj-accent: var(--color-primary, #e94e1b);
	--btb-proj-line: rgba(0, 0, 0, .12);
	--btb-proj-surface: #fff;
	--btb-proj-muted: rgba(0, 0, 0, .04);
}

/* Boutons complémentaires -------------------------------------------------- */

.btb-proj-btn--ghost {
	border-color: var(--btb-proj-line, rgba(0, 0, 0, .12));
	color: var(--btb-proj-ink, #1d1d1b);
}

.btb-proj-btn--ghost:hover {
	background: var(--btb-proj-ink, #1d1d1b);
	color: #fff;
}

.btb-proj-btn--orange {
	border-color: var(--btb-orange);
	color: var(--btb-orange);
    background-color: white;
}

.btb-proj-btn--orange:hover {
	background: var(--btb-orange);
	color: #fff;
}

/* Le geste attendu du prospect : prendre rendez-vous. Vert, parce qu'il conclut
   — c'est le seul bouton de son écran, et le seul endroit où il agit. */
.btb-proj-btn--green {
	border-color: var(--btb-green);
	background: var(--btb-green);
	color: #fff;
}

.btb-proj-btn--green:hover,
.btb-proj-btn--green:focus-visible {
	border-color: var(--btb-navy);
	background: var(--btb-navy);
	color: #fff;
}

.btb-proj-btn--green[hidden] { display: none; }

.btb-proj-btn--danger {
	border-color: #b32d2e;
	color: #b32d2e;
}

.btb-proj-actions .btb-proj-btn--danger {
    border-color: var(--btb-navy);
    color: var(--btb-navy);
    opacity: 0.45;
}

.btb-proj-actions .btb-proj-btn--danger:hover {
    opacity: 1;
    border-color: var(--btb-red);
}

.btb-proj-btn--danger:hover,
.btb-proj-btn--danger:focus-visible {
	background: #b32d2e;
	color: #fff;
}

/* Entrée invisible : Entrée doit enregistrer, pas déclencher le premier
   bouton venu dans le DOM. */
.btb-proj-defaultsubmit {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
	padding: 0;
}

/* Barre supérieure & titres ------------------------------------------------ */

.btb-proj-topbar {
    align-items: center;
    gap: 1rem;
    margin-bottom: 3rem;
}

.btb-proj-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--btb-navy);
    font-size: 1.1rem;
    font-weight: 500;
}

.btb-proj-back:hover { 
    color: var(--btb-orange);
}

.btb-proj-heading { 
    font-size: 5rem;
    font-weight: 700;
    color: var(--btb-navy);
    text-shadow: 3px 3px 0 #d4e3f4;
}

.btb-proj-heading + .btb-proj-form,
.btb-proj-heading + .btb-proj-layout {
    margin-top: 4rem;
}

/* Sommaire de l'écran projet -------------------------------------------------
   Le dossier a grossi jusqu'à faire sept écrans de défilement. Une colonne le
   tient à portée : les sections à gauche, les panneaux à droite.

   Deux cases seulement, le sommaire et le formulaire, et c'est ce qui fait
   tenir le collage : la case du sommaire est aussi haute que celle du
   formulaire, donc il glisse jusqu'au dernier panneau. Rangé parmi les
   panneaux, il n'aurait eu pour bloc conteneur que la première ligne de la
   grille — `grid-row: 1 / -1` ne compte que les lignes explicites, et il n'y en
   a aucune ici — et se serait décollé dès la deuxième section.

   `align-items: start` sur le sommaire seul : le formulaire, lui, doit remplir
   sa case, sinon la barre d'actions collée en bas n'a plus de course. */

.btb-proj-layout:has(.btb-proj-nav) {
    display: grid;
    grid-template-columns: 23rem minmax(0, 1fr);
    gap: 0 2.6rem;
}

.btb-proj-layout > .btb-proj-nav {
    position: sticky;
    top: 2rem;
    align-self: start;
}

.btb-proj-nav__title {
	margin: 0 0 1rem;
	padding-left: 1.5rem;
	font-size: 1.2rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.btb-proj-nav__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 2px solid var(--btb-line);
}

.btb-proj-nav__item { margin: 0; }

/* Le trait de gauche est celui de la liste, repris en surbrillance sur
   l'entrée en cours : un repère qui glisse le long de la colonne pendant qu'on
   descend, plutôt qu'une pastille de plus. */
.btb-proj-nav__link {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem 1.2rem;
    margin-left: -2px;
    border-left: 2px solid transparent;
    color: var(--btb-navy);
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.45;
    text-decoration: none;
    transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}

.btb-proj-nav__link .btb-proj-icon {
    flex: none;
    opacity: .55;
    transition: opacity .12s ease, color .12s ease;
}

.btb-proj-nav__link:hover {
    color: var(--btb-orange);
}

.btb-proj-nav__link:hover .btb-proj-icon { opacity: 1; }

.btb-proj-nav__link.is-current {
    border-left-color: var(--btb-orange);
    color: var(--btb-navy);
    font-weight: 700;
}

.btb-proj-nav__link.is-current .btb-proj-icon {
    opacity: 1;
    color: var(--btb-orange);
}

/* Une entrée dont le panneau n'est pas affiché — le calcul de l'offre tant
   qu'il n'y a rien à chiffrer — mènerait à une ancre invisible. */
.btb-proj-nav__item[hidden] { display: none; }

/* La cible d'une ancre ne doit pas se coller au bord haut de la fenêtre : le
   titre du panneau y passerait sous l'en-tête du thème. */
.btb-proj-layout .btb-proj-panel { scroll-margin-top: 2rem; }

.btb-proj-listhead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.btb-proj-listhead .btb-proj-heading {
	margin: 0;
	font-size: 3.4rem;
}

.btb-proj-notice--error {
	border-left-color: #b32d2e;
	background: rgba(179, 45, 46, .07);
	color: #8a2424;
}

.btb-proj-hint {
	margin: .5rem 0 0;
	font-size: 1rem;
	opacity: .45;
}

.btb-proj-panel__title + .btb-proj-hint {
	margin: 0 0 0.3rem;
}

/* Tableau de la liste ------------------------------------------------------ */

.btb-proj-table-wrap { 
    overflow-x: auto;
    border-radius: 5px;
    border: 1px solid rgba(30, 56, 101, 0.2);
}

.btb-proj-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.btb-proj-table thead {
	background-color: rgba(231, 241, 250, 0.7);
	border-bottom: 1px solid rgba(30, 56, 101, 0.2);
}

.btb-proj-table td {
    padding: 1.1rem 0.8rem;
    font-size: 1.1rem;
    border-bottom: 1px solid rgba(30, 56, 101, 0.2);
}

.btb-proj-table tbody tr:last-child td {
	border-bottom: 0;
}

.btb-proj-table th {
	text-align: left;
	padding: 1.2rem 0.8rem;
	font-size: 1rem;
	font-weight: 600;
	user-select: none;
	white-space: nowrap;
}

/* Un montant ne se coupe pas en deux : « 8 500,00 » sur une ligne et « € » sur
   la suivante se lit comme deux nombres. Et les comptes, alignés, se comparent
   d'une colonne à l'autre. */
.btb-proj-table .num {
	text-align: center;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.btb-proj-table__project-cell {
    min-width: 24rem;
}

.btb-proj-table__client-cell {
    min-width: 20rem;
}

.btb-proj-table__meet-cell {
    min-width: 15rem;
}

.btb-proj-quote__application-column {
    min-width: 22rem;
}

.btb-proj-quote__material-column {
    min-width: 24rem;
}

/* Texte réservé aux lecteurs d'écran.
   Le thème s'en sert et l'attend, mais ne le définit que dans `style-rtl.css`,
   qui n'est pas chargé ici : sans cette règle, chaque libellé caché s'affiche
   en clair à côté de son pictogramme. Portée aux seuls éléments du module —
   corriger la feuille du thème depuis un plugin changerait des pages qui ne
   nous regardent pas. */
[class*="btb-proj-"] .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	word-wrap: normal !important;
}

/* Actions en pictogrammes : cinq mots à la file faisaient de la colonne une
   phrase, et de la table un tableau trop large. Discrets au repos — c'est une
   marge de manœuvre, pas une rangée de boutons — ils prennent leur couleur au
   survol, sur une pastille qui dit où l'on clique. */
.btb-proj-table td.actions {
	white-space: nowrap;
}

.btb-proj-table .actions a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.2rem;
	height: 3.2rem;
	margin-right: .2rem;
	border-radius: 6px;
	color: var(--btb-muted) !important;
	text-decoration: none !important;
	transition: background-color .12s ease, color .12s ease;
}

.btb-proj-table .actions a:last-child { margin-right: 0; }

.btb-proj-table .actions a:hover,
.btb-proj-table .actions a:focus-visible {
	background: white;
	color: var(--btb-navy) !important;
	text-decoration: none !important;
}

.btb-proj-table .actions a.is-danger:hover,
.btb-proj-table .actions a.is-danger:focus-visible {
	background: var(--btb-bg-red);
	color: var(--btb-red) !important;
}

.btb-proj-table tr:hover { 
    background: var(--btb-soft); 
}

.btb-proj-table__title {
	font-weight: 600;
	color: inherit;
	text-decoration: none;
}

.btb-proj-table__title:hover { color: var(--btb-orange); }

/* Le nom et ce qui le qualifie sur une même ligne : le titre du projet et sa
   pastille, l'auteur et la sienne. Ce qui vient en dessous — la référence, la
   société — est d'un autre ordre et garde sa ligne à soi. */
.btb-proj-table__name {
	display: flex;
	align-items: center;
	gap: .6rem;
}

/* Pas de retour à la ligne : la pastille doit rester à droite du nom, pas
   passer dessous à la première colonne étroite. C'est donc le nom qui se plie
   sur deux lignes s'il le faut, la pastille gardant sa largeur. */
.btb-proj-table__name > a,
.btb-proj-table__name > :first-child { min-width: 0; }

.btb-proj-table__name .btb-proj-tag { flex: none; }

.btb-proj-table__ref {
	display: block;
	font-size: 0.9rem;
	opacity: 0.45;
	font-weight: 500;
}

.btb-proj-tag {
	display: inline-block;
	padding: .3rem .8rem;
	border-radius: 15px;
	background: var(--btb-soft);
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
}

.btb-proj-status {
	display: inline-block;
	padding: .7rem 1.2rem;
	border-radius: 3px;
	background: var(--btb-soft);
	font-size: 1rem;
	font-weight: 600;
	white-space: nowrap;
}

.btb-proj-quote__table tbody tr:hover .btb-proj-tag {
    background-color: white;
}

.btb-proj-btn--white {
    background: white;
}

.btb-proj-meet__slots .btb-proj-tag,
.btb-proj-actions .btb-proj-tag {
    display: inline-block;
    padding: 0.8rem 1.2rem;
    border-radius: 20px;
    background: var(--btb-soft);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--btb-line);
}

/* Ce dossier vient d'ailleurs — ce que disait l'onglet « Projets reçus ». */
.btb-proj-tag--received,
.btb-proj-table__name .btb-proj-tag {
	border: 1px solid var(--btb-line);
}

.btb-proj-status--submitted { background: rgba(26, 127, 69, .12); color: #1a7f45; }
.btb-proj-status--quoted    { background: rgba(0, 90, 200, .12);  color: #005ac8; }
.btb-proj-status--accepted  { 
    background: var(--btb-bg-green); 
    color: var(--btb-green); 
}
.btb-proj-status--invoiced  { background: #1d1d1b;                color: #fff; }

.btb-proj-status.btb-proj-status--validated {
    background: var(--btb-bg-orange);
    color: var(--btb-orange);
}

/* Panneaux & champs -------------------------------------------------------- */

.btb-proj-panel {
    background: #fff;
    border: 1px solid var(--btb-line);
    border-radius: 12px;
    padding: 2.8rem 2.6rem;
    margin-bottom: 2.4rem;
}

.btb-proj-panel__title,
.btb-proj-quote__title,
.btb-proj-teaser__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0 0 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--btb-line);
}

/* L'enseigne de la section, la même qu'au sommaire : c'est elle qui fait le
   lien entre les deux — on cherche un dessin dans la colonne, on le retrouve
   en tête du panneau. Enfermée avec le texte, car le titre écarte ses enfants
   aux deux bords pour y ranger un badge. */
.btb-proj-panel__label {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.btb-proj-panel__label .btb-proj-icon {
    flex: none;
}

.btb-proj-counter {
	padding: .15em .7em;
	border-radius: 999px;
	background: var(--btb-proj-muted, rgba(0, 0, 0, .04));
	font-size: .8rem;
	font-weight: 600;
}

.btb-proj-fields {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem 1rem;
}

.btb-proj-field { margin: 0; }
.btb-proj-field--wide { grid-column: 1 / -1; }

/* Compte client -------------------------------------------------------------
   Les coordonnées du dossier restent des champs libres ; associer un compte est
   un geste à part, pris dans sa fenêtre. Le bouton se tient au bout du titre du
   panneau, qui écarte déjà ses deux bouts. */

.btb-proj-panel__title .btb-proj-btn--primary.btb-proj-client__open {
	flex: 0 0 auto;
	font-size: 1.1rem;
	font-weight: 500;
    background-color: var(--btb-navy);
    border-color: var(--btb-navy);
    padding: .8rem 1.1rem;
}

.btb-associate-modal__title {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1;
}

.btb-proj-panel__title .btb-proj-btn--primary.btb-proj-client__open:hover {
    background-color: var(--btb-orange);
    border-color: var(--btb-orange);
}

.btb-proj-modal--client .btb-proj-modal__dialog {
	max-width: 54rem;
}

/* La fenêtre du socle ne porte que deux phrases : elle n'a pas à tenir la
   largeur d'un annuaire. Au-dessus des bulles de la visite, qu'elle peut
   croiser — une carte du socle se clique aussi pendant le parcours. */
.btb-proj-modal--base {
	z-index: 9600;
}

.btb-proj-modal--base .btb-proj-modal__dialog {
	max-width: 42rem;
}

.btb-proj-client__search {
	width: 100%;
	padding: 1.2rem 1.4rem;
	font: inherit;
	color: var(--btb-navy);
	background: var(--btb-soft);
	border: 1px solid var(--btb-line);
	border-radius: 6px;
}

.btb-proj-client__results {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	max-height: 30rem;
	overflow-y: auto;
}

.btb-proj-client__results:empty { margin: 0; }

.btb-proj-client__hit {
	display: block;
	width: 100%;
	padding: 1rem 1.2rem;
	font: inherit;
	text-align: left;
	background: none;
	border: 1px solid var(--btb-line);
	border-radius: 6px;
	cursor: pointer;
}

.btb-proj-client__results li + li { margin-top: .6rem; }

.btb-proj-client__hit:hover,
.btb-proj-client__hit:focus-visible {
	border-color: var(--btb-navy);
	background: var(--btb-soft-hover);
}

.btb-proj-client__hit-name {
	display: block;
	font-weight: 600;
	color: var(--btb-navy);
}

.btb-proj-client__hit-company {
	display: block;
	font-size: 1.05rem;
	color: var(--btb-muted);
}

.btb-proj-client__none {
	padding: 1rem 1.2rem;
	font-size: 1.1rem;
	color: var(--btb-muted);
}

/* Ce que le dossier reprendra, relu avant d'être décidé. */
.btb-proj-client__lead {
	margin: 0 0 0.9rem;
	font-size: 1.2rem;
	color: var(--btb-orange);
}

.btb-proj-client__recap {
	margin: 0;
	padding: 1rem 2rem;
	border: 1px solid var(--btb-line);
	border-radius: 8px;
	background: var(--btb-soft);
}

.btb-proj-client__row {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding: .9rem 0;
}

.btb-proj-client__row + .btb-proj-client__row {
	border-top: 1px solid var(--btb-line);
}

.btb-proj-client__row dt {
	flex: 0 0 12rem;
	font-size: 1.15rem;
	font-weight: 500;
	opacity: 0.45;
}

.btb-proj-client__row dd {
	flex: 1 1 auto;
	margin: 0;
	font-size: 1.2rem;
}

.btb-proj-field label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--btb-navy);
    margin-bottom: 0.4rem;
    transition: all 0.15s ease;
}

.btb-proj-field input,
.btb-proj-field textarea {
    width: 100%;
    padding: 14px 16px 13px;
    font-size: 1.2rem;
    font-family: inherit;
    color: var(--btb-navy);
    background-color: #f5faff;
    border: 1px solid var(--btb-line);
    border-radius: 5px;
}

.btb-proj-field textarea {
    resize: none;
}

.btb-proj-field input:focus, 
.btb-proj-field textarea:focus {
	outline: none;
	border-color: rgba(30,56,101,.2);
}

.btb-proj-check {
	margin: 0 0 .6rem;
	font-size: .9rem;
}

.btb-proj-check label {
	display: flex;
	align-items: flex-start;
	gap: .5em;
}

/* Liste ordonnée ----------------------------------------------------------- */

.btb-proj-items {
	margin: 0 0 .8rem;
	padding: 0;
	list-style: none;
}

.btb-proj-item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.1rem 1.4rem;
    border: 1px solid var(--btb-line);
    border-radius: 6px;
    margin-bottom: 0.8rem;
    background: #fff;
}

.btb-dossier__section .btb-proj-items.btb-proj-items--static .btb-proj-item {
    gap: 1.6rem;
}

.btb-proj-item.is-dragging { opacity: .45; }
.btb-proj-item.is-over { border-color: var(--btb-proj-accent, #e94e1b); }

/* Sélection rangée par domaine ----------------------------------------------
   Un bloc par domaine, et les lignes dedans. Le cadre dit la limite : on
   réordonne à l'intérieur, on ne fait pas sortir une ligne — c'est sa fiche qui
   la range, pas sa place. Les blocs, eux, se déplacent entre eux. */

.btb-proj-group {
	margin-bottom: 1.2rem;
	border: 1px solid var(--btb-line);
	border-radius: 8px;
	background: var(--btb-soft);
}

.btb-proj-group__head {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: 1rem 1.4rem;
	border-bottom: 1px solid var(--btb-line);
}

.btb-proj-group__handle {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--btb-muted);
	cursor: grab;
}

.btb-proj-group__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--btb-navy);
}

.btb-proj-group__count {
	flex: 0 0 auto;
	padding: .15em .6em;
	border-radius: 10px;
	background: var(--btb-proj-muted);
	color: var(--btb-navy);
	font-size: 1rem;
	font-weight: 600;
}

.btb-proj-group__actions {
	display: inline-flex;
	flex: 0 0 auto;
	gap: .4rem;
}

.btb-proj-group__items {
	margin: 0;
	padding: 1.2rem 1.4rem .4rem;
	list-style: none;
}

/* Le dernier trait du bloc est celui du cadre : la dernière ligne n'a pas à en
   poser un second juste au-dessus. */
.btb-proj-group__items .btb-proj-item:last-child {
	margin-bottom: .8rem;
}

.btb-proj-group.is-dragging { opacity: .45; }
.btb-proj-group.is-over { border-color: var(--btb-proj-accent, #e94e1b); }

.btb-proj-item__handle {
    color: #b7c0cd;
    cursor: grab;
    display: flex;
}

.btb-proj-item__handle:active { cursor: grabbing; }

.btb-proj-item__num {
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--btb-navy);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btb-proj-item__body { flex: 1; min-width: 0; }

.btb-proj-item__title { 
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--btb-navy) !important;
    text-decoration: none !important;
}

.btb-proj-item__path {
    font-size: 1.1rem;
    color: var(--btb-muted);
    display: block;
}

.btb-proj-item__actions {
	display: flex;
	gap: .4rem;
	flex-shrink: 0;
}

.btb-proj-iconbtn {
    width: 2.8rem;
    height: 2.8rem;
    border: 1px solid var(--btb-line);
    border-radius: 5px;
    background: #fff;
    color: var(--btb-navy);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    text-align: center;
}

.btb-proj-iconbtn:hover:not(:disabled) {
    background: var(--btb-navy);
    color: #fff;
}

.btb-proj-iconbtn:disabled { opacity: .3; cursor: default; }

.btb-proj-iconbtn--danger:hover:not(:disabled) {
    background: var(--btb-red);
    border-color: var(--btb-red);
}

/* Quantités ---------------------------------------------------------------- */
@
.btb-proj-qty-list { margin: 0; padding: 0; list-style: none; }

.btb-proj-qty-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .6rem 0;
	border-bottom: 1px solid var(--btb-proj-line, rgba(0, 0, 0, .12));
}

.btb-proj-qty-row:last-child { border-bottom: 0; }
.btb-proj-qty-row__title { display: block; font-weight: 600; }
.btb-proj-qty-row__unit { display: block; font-size: .78rem; opacity: .6; }

.btb-proj-qty-row input {
	width: 5rem;
	padding: .45em .6em;
	border: 1px solid var(--btb-proj-line, rgba(0, 0, 0, .12));
	border-radius: 8px;
	font: inherit;
}

/* Catalogue ---------------------------------------------------------------- */

.btb-proj-picker__bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.6rem;
}

.btb-proj-filter {
    flex: 1 1 24rem;
    padding: 1.35rem 1.2rem;
    font-size: 1.3rem;
    font-family: inherit;
    border: 1px solid var(--btb-line);
    border-radius: 6px;
    max-width: 50rem;
}

.btb-proj-index {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 52rem;
    overflow-y: auto;
    border: 1px solid var(--btb-line);
    border-radius: 6px;
}

.btb-proj-index__row {
    padding: 1rem 1.4rem;
    border-bottom: 1px solid var(--btb-line);
    position: relative;
    transition: all 0.15s ease;
}

.btb-proj-index__row:last-child { border-bottom: 0; }

.btb-proj-index__row:hover { 
    background: var(--btb-soft); 
}

.btb-proj-index__row.is-branch {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* La charnière prend la largeur, le bouton passe dessous plutôt que de
	   déborder : l'intitulé porte désormais son compteur, et deux mots de plus
	   suffisaient à sortir du cadre sur un téléphone. */
	flex-wrap: wrap;
	gap: .8rem;
	background: var(--btb-soft);
    height: 53px;
}

.btb-proj-index__row.is-branch .btb-proj-branchbtn {
	margin: 0;
}

/* Accordéon -----------------------------------------------------------------
   Une branche fermée n'occupe que sa ligne d'intitulé ; ses applications sont
   posées à plat après elle dans le balisage, et c'est la classe que pose le
   script qui les efface. Le trait du bas suit la dernière ligne visible, sans
   quoi il doublerait celui du cadre dès qu'une branche se referme. */

.btb-proj-index__row.is-collapsed { display: none; }

/* Une branche fermée est un bouton pleine largeur : le survol du cadre général
   la laissait sur son propre fond — le même `--btb-soft` —, donc sans rien qui
   dise qu'on la vise. */
.btb-proj-index__row.is-branch:not(.is-open):hover,
.btb-proj-index__row.is-branch.is-open {
	background: var(--btb-soft-hover);
}

.btb-proj-index__row.is-last { border-bottom: 0; }

.btb-proj-index__toggle {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: .8rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
}

/* La charnière est un bouton sans habit : le contour du clavier est donc la
   seule chose qui dise où l'on se trouve dans la liste. */
.btb-proj-index__toggle:focus-visible {
	outline: 2px solid var(--btb-orange);
	outline-offset: 2px;
	border-radius: 3px;
}

.btb-proj-index__chevron {
	display: inline-flex;
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.btb-proj-index__row.is-open .btb-proj-index__chevron {
	transform: rotate(90deg);
}

/* Ce que la branche pèse dans la sélection, lisible sans l'ouvrir. */
.btb-proj-index__count {
	display: inline-block;
	margin-left: .3rem;
	padding: .15em .6em;
	border-radius: 10px;
	background: var(--btb-proj-muted);
	color: var(--btb-navy);
	font-size: 1rem;
	font-weight: 600;
	white-space: nowrap;
	vertical-align: middle;
	position: relative;
	bottom: 1px;
}

.btb-proj-index__count.is-active {
	background: var(--btb-orange);
	color: #fff;
}

.btb-proj-index__row.is-branch .btb-proj-index__title {
	font-size: 1.3rem;
	font-weight: 600;
}

/* Le socle ne se coche pas application par application : son bouton remplace le
   « Tout cocher » du domaine, et les cases de ses lignes suivent. Elles restent
   des cases — sans script, c'est encore par elles qu'on compose — mais leur
   pastille dit qu'elles vont par dix. */
.btb-proj-index__row.is-branch .btb-proj-picker__base {
	flex-shrink: 0;
	margin: 0;
	padding: .8rem 1.6rem;
	font-size: 1.1rem;
}

/* .btb-proj-index__row.is-branch.is-base {
	background: var(--btb-bg-orange);
} */

/* .btb-proj-index__row.depth-1.is-base {
	background: rgba(240, 130, 49, .04);
} */

.btb-proj-index__row.depth-1 { 
    padding-left: 3rem; 
}

.btb-proj-index__label {
	display: flex;
	align-items: flex-start;
	gap: .55em;
	cursor: pointer;
}

.btb-proj-index__title { font-weight: 600; }

.btb-proj-index__badge {
	padding: .2em .55em;
	border-radius: 10px;
	background: var(--btb-proj-muted);
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
}

.btb-proj-index__excerpt {
    margin: 0.4rem 0 0 2.3rem;
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--btb-muted);
}

.btb-proj-branchbtn,
.btb-proj-previewbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.6rem 0 0 2.5rem;
    padding: 0.3rem 0.9rem;
    font-size: 1.05rem;
    font-family: inherit;
    font-weight: 500;
    color: var(--btb-navy);
    background: #fff;
    border: 1px solid var(--btb-line);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btb-proj-previewbtn { 
    margin: .6rem 0 0 2.3rem; 
}

.is-branch  .btb-proj-branchbtn { 
    flex-shrink: 0; 
    padding: 0.7rem 0.9rem;
}

.btb-proj-branchbtn:hover,
.btb-proj-previewbtn:hover {
    background: var(--btb-navy);
    color: #fff;
}

/* Branche entièrement retenue : le bouton bascule sur « Tout décocher », et
   prend le fond plein pour que l'état se voie de loin, sans lire le libellé.
   Les deux textes attendent dans la page, comme sur le bouton du socle — le
   script ne pose qu'une classe. */
.btb-proj-branchbtn.is-selected {
    background: var(--btb-navy);
    border-color: var(--btb-navy);
    color: #fff;
}

.btb-proj-branchbtn.is-selected:hover {
    background: var(--btb-navy-hover);
    border-color: var(--btb-navy-hover);
}

.btb-proj-branchbtn__label[data-label="done"],
.btb-proj-branchbtn.is-selected .btb-proj-branchbtn__label[data-label="add"] {
    display: none;
}

.btb-proj-branchbtn.is-selected .btb-proj-branchbtn__label[data-label="done"] {
    display: inline;
}

/* Lien de consultation ----------------------------------------------------- */

.btb-proj-share {
	display: flex;
	flex-wrap: wrap;
	gap: .9rem;
	margin: 0.6rem 0 0;
}

.btb-proj-share__url {
	flex: 1;
	min-width: 240px;
	padding: 1.3rem 1.2rem;
	border: 1px solid var(--btb-line);
	border-radius: 8px;
	font: inherit;
	font-size: 1.2rem;
}

.btb-proj-share .btb-proj-btn.btb-proj-btn--primary {
    background-color: var(--btb-navy);
    border-color: var(--btb-navy);
    color: white;
}

.btb-proj-share .btb-proj-btn {
    background-color: white;
    border-color: var(--btb-navy);
    color: var(--btb-navy);
}

/* Modal de détail ---------------------------------------------------------- */

body.btb-proj-modal-open { overflow: hidden; }

.btb-proj-modal {
	position: fixed;
	inset: 0;
	z-index: 9500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.btb-proj-modal[hidden] { display: none; }

.btb-proj-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(240,130,49,.5);
}

.btb-proj-modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(50rem, 100%);
    max-height: 100%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 10px 10px 0 #f08231;
    overflow: hidden;
}

.btb-proj-modal__body .page-apps .apps-content__app-list,
.page-apps.btb-proj-cards .apps-content__app-list {
    width: 100%;
}

.btb-proj-modal__body .page-apps .apps-section .apps-section__modules .apps-section__module {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0;
	background-color: transparent;
	border-radius: 0;
	border: none;
}

.page-apps.btb-proj-standalone .apps-section .apps-section__modules .apps-section__module {
    width: 100%;
    max-width: none;
}

.btb-proj-modal__body .page-apps .apps-section .apps-section__modules {
	margin-top: 0;
}

.btb-proj-modal__head,
.btb-proj-modal__foot {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.btb-proj-modal__head {
	justify-content: space-between;
	border-bottom: 1px solid var(--btb-line);
    padding: 2.2rem 3rem 2rem;
}

.btb-proj-modal__foot {
	display: flex;
	gap: 1rem;
	justify-content: flex-end;
	padding: 2rem 3rem;
	border-top: 1px solid var(--btb-line);
	background: var(--btb-soft);
}

.btb-proj-modal__path {
	margin: 0;
	font-size: 1.1rem;
	letter-spacing: .04em;
	opacity: .45;
	font-weight: 500;
    line-height: 1;
}

/* Le titre reste dans le DOM : c'est lui que le dialogue désigne en
   aria-labelledby, et le JS y écrit le nom de l'application. Seul son
   rendu visuel est retiré — display/visibility le sortiraient de l'arbre
   d'accessibilité et le dialogue perdrait son nom. */
.btb-proj-modal__title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* La fenêtre du socle, elle, a un titre à lire : rien derrière elle ne le
   redit — pas de carte, pas de nom d'application, seulement deux phrases
   qui expliquent un geste en bloc. Son en-tête serait vide sans lui. */
.btb-proj-modal--base .btb-proj-modal__title {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.2;
}

.btb-proj-modal__close {
	flex-shrink: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	opacity: .5;
	font-weight: 300;
	position: relative;
	bottom: 1px;
}

.btb-proj-desc {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    opacity: .45;
}

.btb-proj-modal__close:hover { opacity: 1; }

.btb-proj-modal__body {
	flex: 1;
	overflow-y: auto;
	padding: 3rem;
}

.btb-proj-detail__intro { margin-top: 0; font-size: 1rem; }

.btb-proj-detail__heading {
    margin: 0 0 .3rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .45;
    line-height: 1.6;
}

.btb-proj-detail {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--btb-line);
}

.btb-proj-detail__list {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

.btb-proj-detail__list li {
	padding: 0.8rem 1.2rem;
	border: 1px solid var(--btb-line);
	border-radius: 6px;
	font-size: 1.1rem;
	background-color: white;
}

.btb-proj-detail__prices {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 2.2rem 0 0;
	padding: 0;
	list-style: none;
}

.btb-proj-detail__prices li {
	padding: 0.8rem 1.2rem;
	border: 1px solid var(--btb-line);
	border-radius: 6px;
	font-size: 1.1rem;
    background-color: white;
}

.btb-proj-detail__prices strong {
	display: block;
	font-size: 0.8rem;
	letter-spacing: .04rem;
	text-transform: uppercase;
	opacity: .55;
	font-weight: 600;
}

.btb-proj-detail__hours { 
    opacity: .55;
}

/* CTA de lancement --------------------------------------------------------- */

.btb-proj-cta__text { flex: 1; min-width: 240px; }
.btb-proj-cta__text p { margin: 0; font-size: .95rem; }
.btb-proj-cta__title { font-weight: 700; }

@media (max-width: 640px) {
	.btb-proj-item { flex-wrap: wrap; }
	.btb-proj-table td.actions { text-align: left; white-space: normal; }
	.btb-proj-table .actions a { margin: 0 .2rem 0 0; }
}

.btb-proj-warning {
	margin-block: 1.6rem 2rem;
	padding: 1.2rem 1.6rem;
	border-left: 4px solid var(--btb-orange);
	border-radius: 6px;
	background: var(--btb-bg-orange);
	font-size: 1.2rem;
    color: var(--btb-orange);
}

.btb-proj-panel + .btb-proj-warning {
    margin-block: 0 2.4rem;
}

.btb-proj-cal + .btb-proj-warning {
    margin-block: 1rem 0;
}

/* Cases à cocher visibles ---------------------------------------------------
   Reprend la présentation du builder de dossiers : la case est un vrai
   contrôle de 1.5rem, pas un point invisible que l'on cherche du curseur.

   La coche est dessinée ici plutôt que laissée à accent-color : avec un
   contrôle natif, chaque moteur choisit lui-même sa couleur à partir de
   l'accent, et l'orange tombe de part et d'autre des seuils de Chromium et de
   Firefox — coche noire sur Edge, blanche sur Firefox. La dessiner la garde
   blanche partout. */

.btb-proj-index__label input[type="checkbox"],
.btb-proj-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: static;
    opacity: 1;
    clip: auto;
    clip-path: none;
    box-sizing: border-box;
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(30, 56, 101, .35);
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.btb-proj-index__label input[type="checkbox"]:checked,
.btb-proj-check input[type="checkbox"]:checked {
    border-color: var(--btb-orange);
    background-color: var(--btb-orange);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' d='M3.75 8.25l2.75 2.75 5.75-5.75'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.btb-proj-index__label input[type="checkbox"]:focus-visible,
.btb-proj-check input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--btb-orange);
    outline-offset: 2px;
}

.btb-proj-index__label input[type="checkbox"]:disabled,
.btb-proj-check input[type="checkbox"]:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.btb-proj-index__label { align-items: center; }
.btb-proj-check label { align-items: center; }

/* Ce qui reste à renseigner -------------------------------------------------
   L'écriteau de transmission nomme les manques et y mène ; ces marques disent
   lesquels, une fois qu'on a suivi le lien ou pressé un bouton éteint. Le rouge
   n'apparaît donc jamais sur un dossier qu'on vient d'ouvrir. */

/* L'écriteau ne réclame que ce qui manque : le script retire les morceaux
   comblés. Le `display` est posé explicitement, comme partout ailleurs dans
   cette feuille — le thème redonne un affichage aux éléments en ligne, et
   l'attribut seul ne suffirait pas à les effacer. */
.btb-proj-warning [data-btb-proj-hint-part][hidden] {
	display: none;
}

.btb-proj-warning__link {
	color: inherit;
	font-weight: 500;
	text-decoration: underline;
}

.btb-proj-warning__link:hover,
.btb-proj-warning__link:focus-visible {
    color: var(--btb-navy);
}

.btb-proj-field.is-missing label {
    color: var(--btb-red);
}

.btb-proj-field input.is-missing:focus,
.btb-proj-field textarea.is-missing:focus {
    border-color: var(--btb-red);
}

/* Deux manques qui ne se corrigent pas dans un champ : la sélection encore
   vide, et la grille où aucune demi-journée n'est cochée. */
.btb-proj-empty.is-missing {
    padding: 1.2rem 1.6rem;
    border-left: 4px solid var(--btb-red);
    border-radius: 6px;
    background: var(--btb-bg-red);
    color: var(--btb-red);
}

.btb-proj-cal.is-missing {
    padding: 1.2rem;
    border: 1px solid var(--btb-red);
    border-radius: 8px;
    background: var(--btb-bg-red);
}

/* Barre d'actions collante -------------------------------------------------- */

.btb-proj-actions {
    position: sticky;
    bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.6rem 2rem;
    background: #fff;
    border: 1px solid var(--btb-line);
    border-radius: 8px;
    box-shadow: 0 -4px 16px rgba(30, 56, 101, 0.08);
}

/* Validation et transmission filent à droite, comme dans les dossiers
   documentaires. Le reste — reprendre, PDF, supprimer, puis l'état de
   l'enregistrement — se lit de gauche à droite dans cet ordre. */

/* Témoin d'enregistrement -----------------------------------------------------
   À la place du bouton « Enregistrer » : un état, pas une commande. Un seul de
   ses libellés s'affiche, celui que le script désigne. */

.btb-proj-autosave {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin: 0;
	font-size: 1.1rem;
	color: var(--btb-muted, #6b7687);
	font-weight: 500;
}

/* Au repos, rien à dire : le témoin s'efface entièrement plutôt que de laisser
   une place vide dans la barre. */
.btb-proj-autosave[data-state="idle"] { display: none; }

.btb-proj-autosave [data-state-for] { display: none; }
.btb-proj-autosave[data-state="saving"] [data-state-for="saving"],
.btb-proj-autosave[data-state="saved"]  [data-state-for="saved"],
.btb-proj-autosave[data-state="error"]  [data-state-for="error"],
.btb-proj-autosave[data-state="locked"] [data-state-for="locked"] {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

.btb-proj-autosave[data-state="saved"] { color: #1a7f45; }

/* L'échec est la seule chose que ce témoin ait à faire remarquer. */
.btb-proj-autosave[data-state="error"] {
	color: var(--btb-red, #c0392b);
	font-weight: 600;
}

.btb-proj-linkbtn {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* Confier un dossier ----------------------------------------------------------
   Sous le lien de partage, et pour cause : les deux disent qui peut ouvrir ce
   dossier — l'un au prospect, l'autre à la maison. Séparé par un filet, parce
   que ce n'est pas la même porte. */

.btb-proj-assign {
	margin-top: 2.4rem;
	padding-top: 2.3rem;
	border-top: 1px solid var(--btb-line);
}

.btb-proj-assign .btb-proj-field {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
}

.btb-proj-assign__title {
	margin: 0 0 .6rem;
	font-size: 1.25rem;
	font-weight: 600;
}

.btb-proj-assign__submit .btb-proj-btn.btb-proj-btn--primary {
    background-color: var(--btb-navy);
    border-color: var(--btb-navy);
}

/* Une rangée de noms qui s'allument. Éteint, le nom est une proposition ; la
   coche n'apparaît qu'une fois la clé confiée, et c'est elle qui se lit d'un
   coup d'œil sur une liste de dix. */
.btb-proj-assign__list {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 1.2rem 0 0;
	padding: 0;
	list-style: none;
}

.btb-proj-assign__agent {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem 1.3rem;
	border: 1px solid var(--btb-line);
	border-radius: 6px;
	background: #fff;
	font: inherit;
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--btb-navy);
	cursor: pointer;
	transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}

.btb-proj-assign__agent .btb-proj-icon {
	display: none;
}

.btb-proj-assign__agent:hover {
	border-color: var(--btb-green);
	color: white;
	background-color: var(--btb-green);
}

.btb-proj-assign__agent.is-on {
	border-color: var(--btb-green);
	background: var(--btb-green);
	color: #fff;
	font-weight: 600;
}

.btb-proj-assign__agent.is-on .btb-proj-icon { display: block; }

/* Le temps de l'aller-retour : ni deux clics, ni l'illusion que rien ne se
   passe. */
.btb-proj-assign__agent:disabled {
	opacity: .5;
	cursor: progress;
}

/* Lecture seule ---------------------------------------------------------------
   Le même écran, ouvert sans droit d'écriture. Le `<fieldset>` n'est là que pour
   son attribut `disabled`, qui éteint d'un coup tous les champs qu'il contient :
   il ne doit donc rien dessiner. */

.btb-proj-readonly {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

/* Un champ éteint n'est pas un champ en panne : il porte ce qu'on a écrit, et
   c'est tout ce qu'on lui demande. Le gris de deuil des navigateurs le ferait
   passer pour hors service. */
.btb-proj-form--view :disabled {
	opacity: 1;
	cursor: default;
	-webkit-text-fill-color: currentColor;
}

/* Une commande éteinte, elle, doit se voir. La règle ci-dessus parle des champs
   d'un dossier figé — ils portent ce qu'on a écrit, ils ne sont pas en panne —
   et non d'un bouton qu'on refuse : « Valider et facturer » reste gris tant
   qu'aucun compte client n'est associé au dossier. Sans `pointer-events`, qui
   emporterait avec lui l'infobulle disant pourquoi. */
.btb-proj-form--view .btb-proj-btn:disabled,
.btb-proj-btn:disabled {
	opacity: .45;
	cursor: not-allowed;
}

.btb-proj-hint + .btb-proj-cal.btb-proj-cal--pick {
    margin-top: 2rem;
}

/* La ligne d'une sélection qu'on ne réordonne plus : ni poignée ni boutons, et
   le numéro suffit à dire la place. */
.btb-proj-item.is-readonly {
	cursor: default;
}

/* L'état du dossier, contre le bouton qui le fait changer : « Offre transmise »
   puis « Ouvrir à l'édition ». Ce n'est pas une commande — d'où le vert du
   constat plutôt que le contour d'un bouton. */
.btb-proj-state {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: 0 .4rem;
	color: var(--btb-green);
	font-size: 1.05rem;
	font-weight: 600;
	white-space: nowrap;
}

.btb-proj-actions__end {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-left: auto;
}

.btb-proj-submit .btb-proj-actions {
	position: static;
	border: 0;
	padding: 0;
	box-shadow: none;
	background: transparent;
}

/* Calendrier de créneaux ----------------------------------------------------
   Une colonne par jour ouvré, une bulle par demi-heure. Quatre semaines tiennent
   dans une bande qui défile horizontalement : paginer aurait caché la semaine
   suivante derrière un clic, alors que le regard doit pouvoir la balayer. */

.btb-proj-cal__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2rem;
}

.btb-proj-cal__count {
	font-size: .85rem;
	font-weight: 600;
	opacity: .7;
}

/* L'encouragement à ouvrir un second créneau : sous la grille, appuyé sans
   crier — c'est une suggestion, pas une erreur de saisie. */
.btb-proj-cal__nudge {
	margin-top: .8rem;
	padding-left: .8rem;
	border-left: 3px solid var(--btb-orange, #f08231);
	font-weight: 500;
	opacity: .85;
}

.btb-proj-cal__nudge[hidden] { display: none; }

.btb-proj-cal__scroll {
	display: flex;
	gap: .8rem;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: thin;
}

.btb-proj-cal__col {
	min-width: 6rem;
}

/* Chaque semaine civile dans son bloc : sans regroupement, vingt colonnes de
   dates se lisent comme une seule bouillie. La première est souvent amputée —
   la grille commence aujourd'hui — et se voit ainsi pour ce qu'elle est. */
.btb-proj-cal__week {
	display: flex;
	gap: 0.6rem;
	padding: 2rem;
	border-radius: 10px;
	background: var(--btb-soft, #f5faff);
	justify-content: center;
}

/* Le bandeau des jours colle en haut au défilement de la page : il lui faut le
   fond du bloc, sinon les dates se lisent par-dessus les bulles. */
.btb-proj-cal__week .btb-proj-cal__head { background: var(--btb-soft, #f5faff); }

.btb-proj-cal__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 0 .7rem;
	background: #fff;
	line-height: 1.2;
	text-align: center;
}

.btb-proj-cal__weekday {
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	opacity: .45;
	font-weight: 600;
}

.btb-proj-cal__date {
	font-size: 1rem;
	font-weight: 600;
	margin-top: 0.2rem;
}

.btb-proj-cal__slots { display: flex; flex-direction: column; gap: .25rem; }

.btb-proj-cal__slot {
	display: block;
	cursor: pointer;
	text-align: center;
}

.btb-proj-cal__week .btb-proj-cal__slot {
	font-size: 1rem;
    font-weight: 500;
}

/* La case reste dans le flux pour les lecteurs d'écran, mais c'est la bulle
   qui est cliquée — d'où le retrait visuel de l'entrée elle-même. */
.btb-proj-cal__slot input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.btb-proj-cal__slot {
	display: block;
	padding: 0.8rem 1.4rem;
	border: 1px solid var(--btb-line);
	border-radius: 7px;
	font-variant-numeric: tabular-nums;
	transition: background-color .12s ease, border-color .12s ease, color .12s ease;
	background-color: white;
}

.btb-proj-cal__slot:hover { 
	border-color: var(--btb-green);
	background: var(--btb-bg-green);
	color: var(--btb-green);
}

.btb-proj-cal__slot:has(input:checked) {
	border-color: var(--btb-green);
	background: var(--btb-bg-green);
	color: var(--btb-green);
}

.btb-proj-cal__slot input:focus-visible + span {
	outline: 2px solid var(--btb-proj-accent, #e94e1b);
	outline-offset: 2px;
}

.btb-proj-cal__slot.is-past,
.btb-proj-cal__slot input:disabled + span {
	cursor: not-allowed;
	opacity: .7;
}

/* Réglage en masse -----------------------------------------------------------
   Une phrase à trous, posée au-dessus de la grille : « ouvrir les créneaux de
   9h00 à 12h00, du lundi 3 au vendredi 21 ». Elle se lit comme une phrase et
   non comme un formulaire — d'où les mots de liaison entre les menus, et le
   bouton au bout de la ligne plutôt qu'en dessous. */

.btb-proj-cal__bulk {
	margin-bottom: 2rem;
	padding-block: 1rem 1.6rem;
}

.btb-proj-cal__bulk-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
}

.btb-proj-cal__bulk-word {
	font-size: 1.2rem;
}

/* Le chevron dessiné en fond, comme ailleurs sur le site : la flèche native
   d'un système ne ressemble à aucune des deux autres, et six menus alignés
   dans une phrase doivent en former une seule. */
.btb-proj-cal__bulk-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: .8rem 3rem .8rem 1.1rem;
	border: 1px solid var(--btb-line);
	border-radius: 5px;
	background-color: #fff;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2392AACC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1.4rem;
	font: inherit;
	font-size: 1.1rem;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.btb-proj-cal__bulk-select:hover,
.btb-proj-cal__bulk-select:focus {
	border-color: rgba(30, 56, 101, .2);
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3865' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}

.btb-proj-cal__bulk-line .btb-proj-btn {
	height: 35.6px;
	background-color: var(--btb-navy);
	border-color: var(--btb-navy);
}

.btb-proj-cal__bulk-hint {
	margin: .6rem 0 0;
	font-size: 1rem;
	opacity: .45;
}

/* « Tout fermer » n'est pas une action de même rang que « Appliquer » : elle
   se range en fin de phrase, en lien, là où on la cherche après coup. */
.btb-proj-cal__bulk-clear {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.btb-proj-cal__bulk-clear:hover {
	color: var(--btb-orange, #f08231);
}

/* Le calendrier du prospect --------------------------------------------------
   Mêmes colonnes, mêmes semaines, mais on y prend au lieu d'y cocher : seuls
   les créneaux offerts sont imprimés. Un lien quand la maison retient d'un
   clic, un bouton radio quand le prospect choisit avant de confirmer. */

.btb-proj-cal--choose .btb-proj-cal__slot input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.btb-proj-cal--choose .btb-proj-cal__slot:has(input:checked) {
	border-color: var(--btb-green);
	background: var(--btb-green);
	color: #fff;
}

.btb-proj-cal--choose .btb-proj-cal__slot:has(input:focus-visible) {
	outline: 2px solid var(--btb-green);
	outline-offset: 2px;
}

.btb-proj-cal--pick .btb-proj-cal__slot {
	border-color: var(--btb-green);
	color: var(--btb-green);
	font-weight: 600;
	text-decoration: none;
}

.btb-proj-cal--pick .btb-proj-cal__slot:hover,
.btb-proj-cal--pick .btb-proj-cal__slot.btb-proj-cal__slot--free:hover,
.btb-proj-cal--pick .btb-proj-cal__slot:focus-visible {
	background: var(--btb-green);
	color: #fff;
}

.btb-proj-cal--pick .btb-proj-cal__slot.btb-proj-cal__slot--free {
    border-color: var(--btb-line);
    color: var(--btb-navy);
}

/* L'écriteau sous le bouton de transmission éteint : ce qui manque encore. */
.btb-proj-send-hint {
	margin: 0 0 .6rem;
	padding-left: .8rem;
	border-left: 3px solid var(--btb-orange, #f08231);
	font-size: .92rem;
	opacity: .85;
}

.btb-proj-send-hint[hidden] { display: none; }

/* Grille des demi-journées ---------------------------------------------------
   Deux cases par jour au lieu de dix-huit : elles peuvent respirer. Colonnes
   plus larges, bulles hautes, et le tout tient sans défilement sur la plupart
   des écrans — c'est tout l'intérêt de la question posée ainsi. */

/* Ni barre ni défilement ici : dix colonnes de deux cases tiennent dans la
   page. Les boutons de semaine n'auraient plus rien à paginer, et le compteur
   disait ce que les bulles cochées montrent déjà. Les deux vont ensemble —
   retirer le défilement en gardant la barre laisserait deux boutons morts. */
.btb-proj-cal--halfday .btb-proj-cal__bar { display: none; }

/* Les semaines passent à la ligne plutôt que de défiler : plus rien ne se
   cache derrière un bord. */
.btb-proj-cal--halfday .btb-proj-cal__scroll {
	flex-wrap: wrap;
	overflow: visible;
}

.btb-proj-cal--halfday .btb-proj-cal__week {
	min-width: 0;
}

/* Un plancher, sinon « Après-midi » se lit sur quatre lignes de trois lettres.
   Une semaine qui n'y tient plus passe simplement à la ligne suivante. */
.btb-proj-cal--halfday .btb-proj-cal__col {
	min-width: 6rem;
}

.btb-proj-cal--halfday .btb-proj-cal__slots { 
    gap: .6rem; 
}

.btb-proj-cal--halfday .btb-proj-cal__period {
	display: block;
	padding: 0;
	border: 0;
	border-radius: 0;
	font-size: 1rem;
	font-weight: 600;
}

.btb-proj-cal--halfday .btb-proj-cal__hours {
	display: block;
	padding: 0;
	border: 0;
	border-radius: 0;
	font-size: 1rem;
	opacity: .6;
}

.btb-proj-cal--halfday .btb-proj-cal__slot input:checked + span .btb-proj-cal__hours { opacity: .85; }

/* Sur téléphone, une semaine en colonnes ne tient pas : cinq jours de 5rem
   débordent de l'écran, et il n'y a plus de bande défilante pour absorber ça.
   Chaque jour devient donc une ligne — sa date à gauche, ses deux demi-journées
   à droite. */
@media (max-width: 640px) {
	.btb-proj-cal--halfday .btb-proj-cal__week {
		flex-direction: column;
		gap: .5rem;
		padding: 1rem;
	}

	.btb-proj-cal--halfday .btb-proj-cal__col {
		display: flex;
		align-items: center;
		gap: .7rem;
		min-width: 0;
	}

	.btb-proj-cal--halfday .btb-proj-cal__head {
		position: static;
		flex: 0 0 5.5rem;
		flex-direction: row;
		align-items: baseline;
		justify-content: flex-start;
		gap: .35rem;
		padding: 0;
		text-align: left;
	}

	.btb-proj-cal--halfday .btb-proj-cal__slots {
		flex: 1 1 auto;
		flex-direction: row;
	}

	.btb-proj-cal--halfday .btb-proj-cal__slot {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* Relecture des disponibilités du prospect -----------------------------------
   La grille arrive déjà cochée, et par quelqu'un d'autre : elle ne s'ouvre pas,
   elle se tranche. Tout ce que le prospect n'a pas déclaré s'efface — il reste
   deux bulles par jour dans une colonne de dix-huit, et il faut qu'elles se
   voient de loin. */

.btb-proj-cal__review {
	margin-bottom: 2rem;
	padding: 1.2rem 1.6rem;
	border-left: 4px solid var(--btb-orange);
	border-radius: 6px;
	background: var(--btb-bg-orange);
	font-size: 1.2rem;
}

.btb-proj-cal__review[hidden] { display: none; }

.btb-proj-cal__review p { margin: 0 0 .8rem; }

.btb-proj-cal__review-lead {
	display: flex;
	align-items: center;
	gap: .6rem;
	color: var(--btb-orange);
}

.btb-proj-cal__review-lead .btb-proj-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.btb-proj-cal__review-steps {
	margin: 0 0 1.2rem;
}

/* Ce que le prospect avait dit, une fois ses cases abandonnées : l'information
   survit à la sélection qui la portait. */
.btb-proj-cal__review-recall { font-size: 1.05rem; }

.btb-proj-cal__review-recall[hidden] { display: none; }

/* Les demi-heures que le prospect n'a pas déclarées : elles gardent leur place
   — c'est ce qui donne à lire un lundi matin plutôt qu'une bulle isolée — mais
   plus leur cadre, qui les ferait passer pour cliquables. */
.btb-proj-cal--review .btb-proj-cal__slot:not(.is-open),
.btb-proj-cal--review .btb-proj-cal__slot:not(.is-open):hover {
	color: inherit;
	opacity: .45;
	cursor: default;
}

/* La demi-journée dépliée : toute sa bande s'allume, et pas seulement l'heure
   pivot où elle est rangée. Une seule de ces cases est cochée — c'est la classe
   qui éclaire les autres, sans quoi elles partiraient à l'enregistrement comme
   autant de créneaux d'une demi-heure. */
.btb-proj-cal--review .btb-proj-cal__slot.is-open {
	border-color: var(--btb-green);
	background: var(--btb-bg-green);
	color: var(--btb-green);
	cursor: pointer;
	opacity: 1;
}

/* Survolée, elle annonce ce qu'elle deviendra si on la retient. */
.btb-proj-cal--review .btb-proj-cal__slot.is-open:hover {
	background: var(--btb-green);
	color: #fff;
}

/* Le moment retenu, plus appuyé que la disponibilité qui le portait : l'une est
   une proposition, l'autre une décision. */
.btb-proj-cal--review .btb-proj-cal__slot.is-picked,
.btb-proj-cal--review .btb-proj-cal__slot.is-picked:hover {
	border-color: var(--btb-green);
	background: var(--btb-green);
	color: #fff;
}

.btb-proj-cal__kept {
	margin-top: 1.2rem;
	padding: 1.2rem 1.6rem;
	border-radius: 6px;
	background: var(--btb-bg-green);
	border-left: 4px solid var(--btb-green);
	color: var(--btb-green);
	font-size: 1.2rem;
}

.btb-proj-cal__kept[hidden] { display: none; }

.btb-proj-cal__undo {
	margin-left: .4rem;
	text-decoration: underline;
	color: var(--btb-green);
	font-weight: 500;
}

.btb-proj-cal__undo:hover {
	color: var(--btb-orange);
}

.btb-proj-muted { opacity: .4; }

.btb-proj-meet-cell .btb-proj-tag {
	display: block;
	background: none;
	padding: 0;
	color: var(--btb-red);
	border-radius: 0;
}

/* Reprise d'un brouillon composé sans compte -------------------------------- */

.btb-proj-adopt {
	margin-block: 1.6rem 2rem;
	padding: 1.2rem 1.6rem;
	border-left: 4px solid var(--btb-orange);
	border-radius: 6px;
	background: var(--btb-bg-orange);
	font-size: 1.2rem;
	color: var(--btb-orange);
	gap: 1rem;
	display: flex;
	align-items: center;
}

/* Taux de TVA saisissable dans le calcul ------------------------------------- */

.btb-proj-quote__row--vat dd {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35rem;
}

/* Le champ et ses deux boutons ne font qu'un objet : une seule bordure, celle
   du groupe, et le champ nu à l'intérieur. */
.btb-proj-stepper {
	display: inline-flex;
	align-items: stretch;
	overflow: hidden;
	border: 1px solid var(--btb-line);
	border-radius: 6px;
	background: #fff;
}

.btb-proj-stepper:focus-within {
	border-color: var(--btb-orange);
}

/* Le champ nu à l'intérieur : c'est la bordure du groupe qui l'encadre, la
   sienne ferait un cadre dans un cadre. Écrit sur le groupe et non sur le taux
   de TVA, qui fut longtemps le seul à en avoir un : la quantité du matériel s'y
   range désormais, et un troisième stepper n'aura rien à redéclarer. */
.btb-proj-stepper input {
	padding: .8rem .2rem;
	border: 0;
	font: inherit;
	text-align: center;
	background: transparent;
}

.btb-proj-stepper input:focus {
	outline: 0;
}

.btb-proj-quote__row--vat input {
	width: 4.5rem;
	font-size: 1.2rem;
}

/* Les flèches natives sont hors sujet : deux boutons les remplacent. */
.btb-proj-stepper input::-webkit-outer-spin-button,
.btb-proj-stepper input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.btb-proj-stepper input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.btb-proj-stepper__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	padding: 0;
	border: 0;
	background: var(--btb-soft, #f5faff);
	color: var(--btb-navy);
	cursor: pointer;
	transition: background-color .15s, color .15s;
}

.btb-proj-stepper__btn:hover,
.btb-proj-stepper__btn:focus-visible {
	background: var(--btb-orange);
	color: #fff;
}

.btb-proj-stepper__btn .btb-proj-icon {
	width: 12px;
	height: 12px;
}

.btb-proj-quote__row--vat .btb-proj-hint {
	flex-basis: 100%;
	margin: 0;
}

.btb-proj-quote__row--vat dt {
    display: flex;
    align-items: center;
}

/* Cartes d'application dans le dossier ---------------------------------------
   Les règles du thème sont toutes portées par `.page-apps`, que le conteneur
   fournit ; il ne reste qu'à disposer les cartes en grille, le carrousel
   n'ayant pas lieu d'être sur un dossier qui montre tout. */

.btb-proj-cards { padding: 0; }

.btb-proj-cards .apps-section__modules {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1rem;
}

/* En-tête du dossier ---------------------------------------------------------
   `btb-proj-dossier.css` habille le même balisage pour le PDF et les e-mails,
   en unités absolues et sans variables ; ce qui suit ne vaut que pour l'écran,
   où l'on peut enfin donner au titre la taille qu'il mérite. */

.btb-dossier__head {
    margin-bottom: 1.6rem;
}

.btb-dossier__title {
    margin: 0 0 1rem;
    font-size: 3.6rem;
    font-weight: 700;
    color: var(--btb-navy);
    text-shadow: 3px 3px 0 #d4e3f4;
}

.btb-dossier__meta {
    color: var(--btb-muted);
    font-size: 1.1rem;
}

.btb-dossier__ref {
	color: var(--btb-orange);
	font-weight: 500;
}

/* Choix du rendez-vous sur le dossier ---------------------------------------- */

.btb-dossier__section {
    background: #fff;
    border: 1px solid var(--btb-line);
    border-radius: 12px;
    padding: 2.8rem 2.6rem;
    margin-bottom: 2.4rem;
}

.page-apps.btb-proj-cards .apps-section .apps-section__modules {
	margin-top: 0;
}

.btb-dossier__section h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0 0 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--btb-line);
}

.btb-proj-meet__slots {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: .7rem 0 0;
	padding: 0;
	list-style: none;
}

/* Défaire le rendez-vous retenu : un recours, pas une commande. Sous le
   constat, à l'écart, et sans la couleur d'un bouton qu'on invite à presser. */
.btb-proj-meet__undo {
	margin: 1rem 0 0;
}

/* Confirmer l'heure qu'on lui propose : l'inverse exact du recours ci-dessus.
   C'est le seul geste que la page lui demande, et il se presse. */
.btb-proj-meet__confirm {
	margin: 1.2rem 0 .8rem;
}

.btb-proj-meet__counter summary {
	cursor: pointer;
	font-size: .9rem;
	font-weight: 600;
}

.btb-proj-meet__counter[open] summary { margin-bottom: .8rem; }

/* Montant sur la bulle ------------------------------------------------------- */

.btb-proj-bubble__total {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--btb-orange);
    margin-top: 0.4rem;
}

.btb-proj-bubble__total:empty { display: none; }

/* Bouton de sélection sur les cartes d'application --------------------------- */

.btb-proj-pick { margin-top: 1rem; }

.page-apps .apps-section .apps-section__modules .apps-section__module.is-selected .apps-section__module-ref {
    color: var(--btb-green);
}
/* Chantier : les tâches à réaliser -------------------------------------------
   Une liste où l'on coche, pas un tableau qu'on lit : la pastille d'état passe
   avant l'intitulé, et la tâche faite s'efface sans disparaître. */

.btb-proj-worksite__intro {
	margin: 0 0 1rem;
	font-size: 1.2rem;
	font-weight: 500;
}

.btb-proj-worksite__phase {
	margin-bottom: 2rem;
	border: 1px solid var(--btb-line);
	border-radius: 6px;
}

.btb-proj-worksite__phase-title {
	padding: 1.4rem;
	position: relative;
	transition: all 0.15s ease;
	display: flex;
	align-items: center;
	background: var(--btb-soft);
	font-size: 1.3rem;
	font-weight: 600;
	border-radius: 6px 6px 0 0;
	gap: 0.7rem;
}
.btb-proj-worksite__add .btb-proj-worksite__phase-title {
    background-color: transparent;
    padding: 0;
}

.btb-proj-worksite__hours {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--btb-navy);
	background-color: white;
	border: 1px solid var(--btb-navy);
	border-radius: 15px;
	padding: 0.5rem 0.8rem 0.4rem;
	opacity: 0.4;
	min-width: 3rem;
	text-align: center;
}

.btb-proj-worksite__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Une ligne d'en-tête — intitulé, pastille, corbeille — et, sous elle, ce que
   la charnière déplie. Le repli se fait sur une seconde ligne du même flex :
   la case à cocher doit rester voisine de la pastille et du corps pour que les
   sélecteurs `+` et `~` qui les colorent gardent leur cible, ce qu'un corps
   emboîté dans l'intitulé aurait perdu. */
.btb-proj-worksite__task {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.4rem;
	padding: 2rem 2.4rem 2.2rem;
	border-top: 1px solid var(--btb-line);
}

/* La case pilote la pastille et n'est jamais vue elle-même. Déplacée hors
   écran plutôt que masquée : `display: none` la retirerait du clavier. */
.btb-proj-worksite__check {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* La pastille passe à droite par l'ordre visuel, pas dans le balisage : la case
   qui la pilote doit rester avant elle et avant le corps de la tâche, sinon les
   sélecteurs `+` et `~` qui les colorent n'ont plus de cible. */
.btb-proj-worksite__state {
	order: 2;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: 1rem;
	font-weight: 500;
	color: var(--btb-muted);
	cursor: pointer;
	transition: color .15s;
	justify-content: center;
}

.btb-proj-worksite__state:hover { 
    color: var(--btb-green); 
}

.btb-proj-worksite__check:focus-visible + .btb-proj-worksite__state {
	outline: 2px solid var(--btb-orange);
	outline-offset: 2px;
}

/* Chantier d'un dossier transmis : on le lit. Les commandes s'éteignent — la
   pastille d'avancement et la corbeille — mais rien ne disparaît, et surtout
   pas les lectures des tâches : c'est tout ce qu'on vient y faire. Une
   pastille éteinte dit encore où en est le chantier, ce qu'une pastille
   retirée ne dirait plus.

   Sur la case et non sur le panneau : une pastille s'éteint aussi, panneau
   ouvert, quand Zephyr tient l'avancement du dossier — et elle doit alors le
   montrer comme les autres. */
.btb-proj-worksite__check:disabled + .btb-proj-worksite__state,
.btb-proj-worksite__drop:disabled {
	opacity: .45;
	cursor: default;
}

/* Éteinte, elle ne verdit plus au survol : ce vert-là promettait le clic qui
   la ferait passer à « Fait ». Celle qui l'est déjà garde le sien. */
.btb-proj-worksite__check:disabled:not(:checked) + .btb-proj-worksite__state:hover {
	color: var(--btb-muted);
	border-color: var(--btb-orange);
}

.btb-proj-worksite__check:disabled:checked + .btb-proj-worksite__state:hover {
	border-color: var(--btb-green);
}

.btb-proj-worksite__drop:disabled:hover {
	border-color: var(--btb-navy);
	background: transparent;
	color: inherit;
}

.btb-proj-worksite__state-done { display: none; }

.btb-proj-worksite__check:checked + .btb-proj-worksite__state {
	color: var(--btb-green);
}

.btb-proj-worksite__check:checked + .btb-proj-worksite__state .btb-proj-worksite__state-todo { display: none; }

.btb-proj-worksite__check:checked + .btb-proj-worksite__state .btb-proj-worksite__state-done {
	display: inline-flex;
	align-items: center;
	gap: .2rem;
}

/* Ce que la charnière déplie : consigne, origine et lectures, sur toute la
   largeur sous l'en-tête. Le retrait de gauche le pose sous l'intitulé et non
   sous le chevron qui le précède. */
.btb-proj-worksite__body {
	order: 4;
	flex: 0 0 100%;
	min-width: 0;
	padding-left: 2.2rem;
}

.btb-proj-worksite__body.is-collapsed { display: none; }

/* Retirer la tâche : à l'extrémité de la ligne, discret jusqu'à ce qu'on
   s'approche. Un geste destructeur ne se met pas en avant, mais il ne se cache
   pas non plus — il reste visible sans survol, au clavier comme à la souris. */
.btb-proj-worksite__drop {
	order: 3;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--btb-muted);
	cursor: pointer;
	transition: color .15s;
}

.btb-proj-worksite__drop:hover,
.btb-proj-worksite__drop:focus-visible {
	border-color: #c0392b;
	background: #fff;
	color: #c0392b;
}

/* Depuis la case et non depuis une classe posée par PHP : cocher atténue la
   tâche tout de suite, sans attendre le rechargement qui suivra. L'intitulé
   s'atténue avec elle : il a quitté le corps pour tenir l'en-tête, et serait
   resté le seul morceau à pleine encre d'une tâche faite. */
.btb-proj-worksite__check:checked ~ .btb-proj-worksite__body,
.btb-proj-worksite__check:checked ~ .btb-proj-worksite__label { opacity: .55; }

.btb-proj-worksite__label {
	order: 1;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
	font-size: 1.2rem;
	font-weight: 600;
}

/* La charnière d'une tâche : tout l'intitulé, chevron compris, sans habit de
   bouton — c'est une ligne de texte qui s'ouvre, pas une commande de plus dans
   une ligne qui en porte déjà deux. */
.btb-proj-worksite__toggle {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
}

.btb-proj-worksite__toggle:focus-visible {
	outline: 2px solid var(--btb-orange);
	outline-offset: 2px;
	border-radius: 3px;
}

.btb-proj-worksite__toggle:hover,
.btb-proj-worksite__toggle:hover .btb-proj-worksite__chevron {
    color: var(--btb-orange);
}

.btb-proj-worksite__chevron {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--btb-muted);
	transition: transform .15s ease;
}

.btb-proj-worksite__task.is-open .btb-proj-worksite__chevron {
	transform: rotate(90deg);
}

/* Une tâche sans consigne, sans origine ni lecture n'a rien à déplier : le
   chevron s'efface, mais garde sa place — sans quoi son intitulé serait le
   seul de la liste à ne pas commencer au même endroit. */
.btb-proj-worksite__toggle:disabled {
	cursor: default;
}

.btb-proj-worksite__toggle:disabled .btb-proj-worksite__chevron {
	visibility: hidden;
}

.btb-proj-worksite__task-title {
	min-width: 0;
}

/* La même pastille, deux hauteurs de boîte : dans le bandeau d'une phase elle
   respire dans les 1,4 rem de marge du titre, tandis que la ligne d'une tâche
   n'en a aucune et se règle donc sur l'élément le plus haut — la pastille
   elle-même, plus haute que son texte à cause du padding d'un bandeau. Elle se
   resserre ici pour repasser sous la ligne de l'intitulé, qui redevient ce qui
   donne sa hauteur au paragraphe. `align-self` la garde centrée quel que soit
   l'alignement du parent. */
.btb-proj-worksite__label .btb-proj-worksite__hours {
	align-self: center;
	flex: 0 0 auto;
	padding: .25rem .7rem;
	line-height: 1.2;
}

.btb-proj-worksite__desc {
	margin: .3rem 0 0;
	font-size: 1.1rem;
}

.btb-proj-worksite__origin {
	margin: .3rem 0 0;
	font-size: 1.1rem;
	opacity: 0.4;
}

.btb-proj-worksite__articles {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: .6rem 0 0;
	padding: 0;
	list-style: none;
}

.btb-proj-worksite__articles a {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .35rem .8rem;
	border: 1px solid var(--btb-line);
	border-radius: 5px;
	background: var(--btb-soft);
	color: var(--btb-navy);
	font-size: 1rem;
	text-decoration: none;
}

.btb-proj-worksite__articles a:hover {
	border-color: var(--btb-orange);
	color: var(--btb-orange);
}

/* Ajout d'une tâche ---------------------------------------------------------- */

.btb-proj-worksite__add {
	margin-top: 3rem;
}

.btb-proj-worksite__add .btb-proj-worksite__phase-title {
    font-size: 1.6rem;
    margin-bottom: 0.8rem;
}

.btb-proj-worksite__row {
	margin-top: 1rem;
	padding: 2rem;
	border: 1px solid var(--btb-line);
	border-radius: 8px;
	background: var(--btb-soft);
}

.btb-proj-worksite__row-line {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 0 0 .6rem;
}

.btb-proj-worksite__row input, 
.btb-proj-worksite__row select, 
.btb-proj-worksite__row textarea {
	padding: 1.2rem 1.4rem;
	border: 1px solid var(--btb-line);
	border-radius: 5px;
	background: #fff;
	font: inherit;
	font-size: 1.2rem;
	resize: none;
    min-width: 10rem;
}

.btb-proj-worksite__row textarea {
    resize: none;
}

.btb-proj-worksite__row textarea { width: 100%; }

.btb-proj-worksite__submit {
	margin: 1.2rem 0 0;
    display: flex;
    justify-content: flex-end;
}

.btb-proj-worksite__submit .btb-proj-btn.btb-proj-btn--primary {
    background-color: var(--btb-navy);
    padding: 1.1rem 1.8rem;
    border: var(--btb-navy);
}

.btb-proj-worksite__submit .btb-proj-btn.btb-proj-btn--primary:hover {
    background-color: var(--btb-orange);
    border: var(--btb-orange);
}

.btb-proj-worksite__restore {
	margin: 1.2rem 0 0;
	font-size: 1.1rem;
	color: var(--btb-muted);
}

/* Le chevron des menus, celui des formulaires du site : la flèche native de
   chaque système ne ressemble à aucune des deux autres, alors qu'ici deux menus
   voisinent avec des champs texte et doivent former une même ligne. Dessiné en
   fond plutôt qu'en pseudo-élément — un `<select>` n'en accepte pas. */
.btb-proj-worksite__row-line select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2392AACC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 1.4rem center;
	background-size: 1.6rem;
	padding-right: 3.8rem;
	cursor: pointer;
}

.btb-proj-worksite__row-line select:hover,
.btb-proj-worksite__row-line select:focus {
	border-color: rgba(30, 56, 101, .2);
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3865' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}

.btb-proj-worksite__label-input { flex: 1 1 18rem; }
/* Un menu, pas un champ : il lui faut de quoi montrer « Mise en service »
   sans que le chevron ne vienne manger la fin du mot. */
.btb-proj-worksite__phase-input { flex: 0 1 16rem; }
.btb-proj-worksite__hours-input { flex: 0 1 6rem; }

/* Photo du matériel ----------------------------------------------------------
   Troisième onglet des cartes, et seulement là où une image existe : le
   catalogue logiciel n'en a pas. `contain` plutôt que `cover` — ces clichés
   fournisseurs n'ont ni cadrage ni format commun, et les rogner couperait
   justement l'objet qu'on vient regarder. */

.apps-section__module-photo {
	margin: 0;
	padding: 1.2rem;
	border-radius: 8px;
	background: var(--btb-soft);
	text-align: center;
}

.apps-section__module-photo img {
	display: inline-block;
	width: auto;
	max-width: 100%;
	max-height: 28rem;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

@media (max-width: 1800px) {
    .btb-proj-cal.btb-proj-cal--halfday .btb-proj-cal__slot {
        padding: 0.8rem;
    }
}

@media (max-width: 1536px) {
    .btb-proj-cal__week {
        padding: 1rem;
    }

    .btb-proj-panel__title + .btb-proj-hint {
        margin: 0 0 0.6rem;
        max-width: 50rem;
    }

    /* La bulle du socle éclaire un rayon entier, pas une carte : sa cible
       occupe presque toute la largeur, et le placement du script — « le côté
       qui a la place » — n'en trouve plus à droite dès que l'écran se
       resserre. Elle repasse donc à gauche de #applications-socle-fox4work.

       `!important` parce que `place()` réécrit `left` en style inline à chaque
       frame de défilement : rien d'autre ne peut gagner contre lui. Le `top`
       lui reste, qui garde la bulle en face du rayon qu'elle désigne. */
    .btb-proj-tour__tip--base {
        left: 2rem !important;
        right: auto !important;
    }
}

@media (max-width: 1280px) {
    .btb-proj-layout:has(.btb-proj-nav) { display: block; }

    .btb-proj-layout > .btb-proj-nav {
        position: sticky;
        top: 0;
        z-index: 20;
        margin: 0 0 2rem;
        padding: 1.6rem 0;
        background-color: transparent;
        transition: background-color .15s ease;
    }

    /* Le fond n'a de raison d'être qu'une fois la bande accrochée en haut : il
       lui faut alors de quoi cacher ce qui passe dessous. À sa place, en tête
       de page, il découperait un bandeau clair sans rien à masquer. La classe
       est posée par le script, faute d'un sélecteur « collé » en CSS. */
    .btb-proj-layout > .btb-proj-nav.is-stuck {
        background-color: var(--btb-soft);
    }

    .btb-proj-nav__link.is-current { font-weight: 500; }

    .btb-proj-nav__link {
        gap: .5rem;
        font-size: 1.05rem;
    }

    .btb-proj-nav__title { display: none; }

    .btb-proj-heading { font-size: 4rem; }

    .btb-proj-layout .btb-proj-panel { scroll-margin-top: 8rem; }

    .btb-proj-nav__list {
        display: flex;
        gap: .4rem;
        overflow-x: auto;
        scrollbar-width: thin;
        border-left: 0;
    }

    .btb-proj-nav__link {
        margin-left: 0;
        padding: .7rem 1.1rem;
        border: 1px solid var(--btb-line);
        border-radius: 999px;
        white-space: nowrap;
    }

    .btb-proj-nav__link.is-current {
        border-color: var(--btb-orange);
        background: var(--btb-bg-orange);
        color: var(--btb-orange);
    }

    .btb-proj-actions .btb-proj-btn {
        padding: 1.1rem 1.2rem;
        font-size: 1rem;
    }

}


/* Sous cette largeur, il n'y a plus de « à côté » : le rayon prend l'écran, et
   toute bulle posée sur un de ses flancs mord dedans ou en sort. Celle du socle
   reprend alors la place qu'elle avait avant d'être une bulle — au milieu de
   l'écran, où rien ne la pousse dehors. Le projecteur, lui, continue d'entourer
   la section : c'est encore elle dont la question parle. */
@media (max-width: 1024px) {
    .btb-proj-tour__tip--base {
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 768px) {
    .btb-proj-bubble__label {
        font-size: 0.7rem;
    }

    .btb-proj-bubble__title {
        font-size: 1.1rem;
    }

    .btb-proj-bubble__count {
        font-size: 1rem;
        font-weight: 600;
    }

    .btb-proj-heading {
        font-size: 3.4rem;
    }

    .btb-proj-warning {
        font-size: 1.1rem;
    }
}
/* L'écran de refus ---------------------------------------------------------
   Une carte seule au milieu d'une page par ailleurs vide : il n'y a qu'une
   chose à lire et une chose à faire, et rien ne doit disputer l'attention au
   bouton. Le cadenas la coiffe pour que le motif se saisisse avant la phrase. */

.btb-proj-denied {
	max-width: 56rem;
	margin: 9rem auto 0;
	text-align: center;
}

.btb-proj-denied__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.4rem;
	height: 4.4rem;
	margin-bottom: 2rem;
	border-radius: 50%;
	background: white;
	border: 1px solid var(--btb-line);
	overflow: hidden;
}

/* L'icône du thème est un dessin rond et plein, sans dimensions propres : elle
   remplit son emplacement au lieu d'y être posée. Sans cette règle, un SVG qui
   ne demande pas de taille prend celle que le navigateur donne aux images qui
   n'en demandent pas — 300 × 150, hors du cercle. */
.btb-proj-denied__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.btb-proj-denied__title {
	margin: 0 0 2rem;
	font-size: 3rem;
	font-weight: 600;
	text-shadow: 3px 3px 0 #d4e3f4;
}

.btb-proj-denied__text {
    margin: 0 auto 2.8rem;
}

.btb-proj-denied__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
}

.btb-proj-denied__actions .btb-proj-btn {
    padding: 1.1rem 2rem;s
}

/* Le retour à l'accueil n'est pas une action mais une sortie : il se lit après
   les deux boutons, et ne leur ressemble pas. */
.btb-proj-denied__home {
	flex-basis: 100%;
	margin-top: .6rem;
	font-size: 1.2rem;
	text-decoration: underline;
	font-weight: 500;
    opacity: 0.45;
    transition: opacity .15s;
}

.btb-proj-denied__home:hover {
    opacity: 1;
}

@media (max-width: 600px) {
    .btb-proj-denied {
        margin: 2rem auto;
        padding: 3rem 2rem;
    }

    .btb-proj-denied__title {
        font-size: 2rem;
    }
}