/* Billy_Marketing — Prise de rendez-vous
   S'appuie sur les jetons du thème (couleurs, espacements, champs .champ). */

.bm-rdv { display: flex; flex-direction: column; gap: var(--e-6, 48px); }
.bm-rdv [hidden] { display: none !important; }
/* L'en-tête du site reste fixé en haut : on garde le titre de chaque étape visible au défilement. */
.bm-rdv__etape, .bm-rdv__succes, .bm-rdv__annulation { scroll-margin-top: 130px; }
.article-contenu .bm-rdv p,
.article-contenu .bm-rdv li { font-size: var(--t-sm, .875rem); line-height: 1.6; }
.bm-rdv h2 {
	display: flex; align-items: center; gap: 12px;
	margin: 0 0 var(--e-4, 24px); font-size: var(--t-lg, 1.5625rem);
}
.bm-rdv__num {
	flex: none; width: 34px; height: 34px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--degrade-orange, #F27405); color: var(--blanc, #fff);
	font-size: var(--t-sm, .875rem); font-weight: 800;
}

/* Promesses */
.article-contenu .bm-rdv__promesses,
.bm-rdv__promesses {
	list-style: none; padding: var(--e-4, 24px); margin: 0;
	display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px 28px;
	background: var(--blanc-perle, #F7F7F7); border-radius: var(--r-md, 12px);
}
.article-contenu .bm-rdv__promesses li { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.bm-rdv__promesses svg { flex: none; color: var(--vert, #00A651); }

/* Grilles de choix */
.bm-rdv__grille { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.bm-rdv__grille--heures { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.bm-rdv__choix {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	min-height: 52px; padding: 10px 6px;
	background: var(--blanc, #fff); color: var(--noir, #0A0A0A);
	border: 1.5px solid var(--blanc-ligne, rgba(10,10,10,.1)); border-radius: var(--r-md, 12px);
	font-size: var(--t-sm, .875rem); line-height: 1.2; text-align: center;
	transition: border-color var(--transition, .2s), transform var(--transition, .2s), background var(--transition, .2s);
}
.bm-rdv__choix:hover:not(:disabled) { border-color: var(--orange, #F27405); transform: translateY(-2px); }
.bm-rdv__choix:focus-visible { outline: 3px solid var(--orange-clair, #FFA62B); outline-offset: 2px; }
.bm-rdv__choix[aria-pressed="true"] { background: var(--degrade-orange, #F27405); border-color: transparent; color: var(--blanc, #fff); }
.bm-rdv__choix:disabled { cursor: not-allowed; opacity: .45; }
.bm-rdv__choix--heure { font-family: var(--font-titre, inherit); font-size: var(--t-base, 1rem); font-weight: 700; }
.bm-rdv__choix--heure:disabled { text-decoration: line-through; }
.bm-rdv__choix strong { font-family: var(--font-titre, inherit); font-size: var(--t-lg, 1.5rem); font-weight: 800; line-height: 1; }
.bm-rdv__choix small { font-size: var(--t-xs, .75rem); }
.bm-rdv__choix em { font-style: normal; font-size: 11px; color: var(--vert-fonce, #00703C); font-weight: 600; margin-top: 3px; }
.bm-rdv__choix[aria-pressed="true"] em { color: var(--blanc, #fff); }
.bm-rdv__choix:disabled em { color: var(--gris, #6B6B6B); }

.bm-rdv__plus, .bm-rdv__modifier {
	margin-top: var(--e-3, 16px); padding: 0;
	color: var(--orange-fonce, #F2600C); font-weight: 700; font-size: var(--t-sm, .875rem);
	text-decoration: underline; text-underline-offset: 3px;
}
.bm-rdv__modifier { margin-top: 0; }
.bm-rdv__aide { color: var(--gris, #6B6B6B); margin: calc(-1 * var(--e-2, 8px)) 0 var(--e-4, 24px); }
.bm-rdv__info { grid-column: 1 / -1; color: var(--gris, #6B6B6B); }

/* Formulaire */
.bm-rdv__form { max-width: none; }
.bm-rdv__recap {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
	padding: 14px 18px; border-radius: var(--r-md, 12px);
	background: var(--blanc-perle, #F7F7F7); border-left: 4px solid var(--orange, #F27405);
	font-weight: 700;
}
.bm-rdv .champ textarea {
	font-family: var(--font-corps, inherit); font-size: var(--t-base, 1rem); font-weight: 400; line-height: 1.5;
	padding: 14px 16px; border: 1.5px solid var(--blanc-ligne, rgba(10,10,10,.1)); border-radius: var(--r-sm, 4px);
	background: var(--blanc, #fff); color: var(--noir, #0A0A0A); resize: vertical; min-height: 110px;
	transition: border-color var(--transition, .2s);
}
.bm-rdv .champ textarea:focus { outline: none; border-color: var(--orange, #F27405); }
.bm-rdv .champ [aria-invalid="true"] { border-color: #C23B22; }
.bm-rdv__accord { display: flex; align-items: flex-start; gap: 10px; font-size: var(--t-sm, .875rem); line-height: 1.5; cursor: pointer; }
.bm-rdv__accord input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--orange, #F27405); }
.bm-rdv__piege { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.bm-rdv__mention { text-align: center; font-size: var(--t-xs, .75rem) !important; color: var(--gris, #6B6B6B); margin: 0; }

/* Messages */
.bm-rdv__msg { padding: 12px 16px; border-radius: var(--r-sm, 4px); font-size: var(--t-sm, .875rem); font-weight: 600; }
.bm-rdv__msg--erreur { background: #FDECEA; color: #9B2C1F; }
.bm-rdv__msg--info { background: var(--blanc-perle, #F7F7F7); }
.bm-rdv__alerte-heure { margin-bottom: var(--e-4, 24px); }

/* Confirmation et annulation */
.bm-rdv__succes, .bm-rdv__annulation {
	text-align: center; padding: var(--e-6, 48px) var(--e-5, 32px);
	border: 2px solid var(--vert, #00A651); border-radius: var(--r-md, 12px);
}
.bm-rdv__annulation { border-color: var(--blanc-ligne, rgba(10,10,10,.1)); }
.bm-rdv__succes:focus { outline: none; }
.bm-rdv__succes h2, .bm-rdv__annulation h2 { justify-content: center; }
.bm-rdv__succes-icone {
	width: 56px; height: 56px; margin: 0 auto var(--e-4, 24px); border-radius: 50%;
	display: grid; place-items: center; background: var(--vert, #00A651); color: var(--blanc, #fff);
}
.article-contenu .bm-rdv .bm-rdv__succes-date { font-family: var(--font-titre, inherit); font-size: var(--t-md, 1.25rem); font-weight: 800; }
.bm-rdv__succes .groupe-btn, .bm-rdv__annulation .groupe-btn { justify-content: center; margin-top: var(--e-5, 32px); }
.article-contenu .bm-rdv .btn { text-decoration: none; }
.article-contenu .bm-rdv .btn--principal { color: var(--blanc, #fff); }
.article-contenu .bm-rdv .btn--contour { color: var(--noir, #0A0A0A); }

@media (max-width: 480px) {
	.bm-rdv__grille { grid-template-columns: repeat(3, 1fr); }
	.bm-rdv__grille--heures { grid-template-columns: repeat(3, 1fr); }
	.bm-rdv__succes, .bm-rdv__annulation { padding: var(--e-5, 32px) var(--e-4, 24px); }
}