/* Tips RDV — personnalisable via les variables (ex. .trdv { --trdv-accent: #e30613; }) */
.trdv {
	--trdv-accent: #5591cd; /* bleu du logo Tips */
	--trdv-accent-ink: #fff;
	--trdv-ink: #585858;
	--trdv-title: #5591cd;
	--trdv-muted: #6b7280;
	--trdv-line: #e5e7eb;
	--trdv-bg: #fff;
	--trdv-soft: color-mix(in srgb, var(--trdv-accent) 10%, #fff);
	--trdv-radius: 12px;
	--trdv-error: #b91c1c;
	box-sizing: border-box;
	container-type: inline-size; /* mise en page selon la largeur du module, pas de l'écran */
	max-width: 820px;
	margin: 0 auto;
	padding: 24px;
	background: var(--trdv-bg);
	border: 1px solid var(--trdv-line);
	border-radius: var(--trdv-radius);
	color: var(--trdv-ink);
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
}
.trdv *, .trdv *::before, .trdv *::after { box-sizing: inherit; }
.trdv button { font: inherit; cursor: pointer; }
.trdv button:disabled { cursor: default; }
.trdv :focus-visible { outline: 2px solid var(--trdv-accent); outline-offset: 2px; }
.trdv-loading, .trdv-muted { color: var(--trdv-muted); }
.trdv-loading::before { content: "Chargement des disponibilités…"; }
.trdv-type .trdv-title { align-self: stretch; }
.trdv .trdv-title { margin: 0 0 4px; padding: 0; font-size: 1.25em; line-height: 1.3; color: var(--trdv-title); outline: none; }
.trdv-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.trdv-head > div { flex: 1 1 auto; min-width: 0; }
.trdv-back { flex: none; background: none; border: 1px solid var(--trdv-line); border-radius: 8px; padding: 4px 10px; color: var(--trdv-muted); font-size: .875em !important; }
.trdv-back:hover { color: var(--trdv-ink); border-color: var(--trdv-muted); }
/* Conteneur du badge : sa position (gauche, centre, droite) se règle dans Divi (« Position du badge »). */
.trdv-badge-wrap { display: block; align-self: stretch; text-align: var(--trdv-badge-align, left); }
.trdv-badge { display: inline-block; vertical-align: middle; padding: 1px 8px; border: 0 solid #333; border-radius: 50px; background: var(--trdv-soft); color: var(--trdv-accent); font-size: .8em; font-weight: 600; }

/* Types */
.trdv-types { display: grid; gap: 12px; margin-top: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.trdv-type { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; background: var(--trdv-choice-bg, var(--trdv-bg)); border: 1px solid var(--trdv-line); border-radius: var(--trdv-radius); text-align: left; color: inherit; transition: box-shadow .15s; }
/* Survol : ombre seule ; la couleur de bordure se règle dans Divi (Bordures). */
.trdv-type:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.trdv-type-name { align-self: stretch; font-weight: 600; font-size: 1.05em; }
.trdv-type-desc { align-self: stretch; color: var(--trdv-muted); font-size: .9em; }
.trdv-head + .trdv-badge-wrap { margin: -12px 0 12px; }
.trdv-head-desc { margin: -4px 0 16px !important; padding: 0 !important; color: var(--trdv-muted); font-size: .92em; line-height: 1.45; }

/* Calendrier */
.trdv-picker { display: grid; grid-template-columns: minmax(0, 480px) minmax(220px, 1fr); gap: 28px; }
.trdv-cal.is-loading { opacity: .5; }
.trdv-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.trdv-month { font-weight: 600; }
.trdv-nav { width: 36px; height: 36px; border: 1px solid var(--trdv-line); border-radius: 50%; background: var(--trdv-bg); color: var(--trdv-ink); font-size: 1.2em !important; line-height: 1; padding: 0; }
.trdv-nav:disabled { opacity: .3; }
.trdv-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.trdv-wd { text-align: center; font-size: .75em; font-weight: 600; color: var(--trdv-muted); padding: 4px 0; }
.trdv-day { aspect-ratio: 1; width: 100%; min-width: 0; min-height: 0; line-height: 1 !important; border: 0; border-radius: 8px; background: transparent; color: #c0c4cc; font-size: .95em !important; padding: 0; position: relative; }
.trdv-day.is-avail { background: var(--trdv-soft); color: var(--trdv-accent); font-weight: 600; }
.trdv-day.is-avail:hover { outline: 2px solid var(--trdv-accent); outline-offset: -2px; }
.trdv-day.is-selected { background: var(--trdv-accent); color: var(--trdv-accent-ink); }
.trdv-day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.trdv-tz { margin: 10px 0 0; font-size: .8em; color: var(--trdv-muted); }

/* Créneaux */
/* La colonne des créneaux prend la hauteur du calendrier (elle ne l'agrandit pas) et défile au besoin. */
.trdv-slots { display: flex; flex-direction: column; contain: size; }
.trdv-slots-day { margin: 0 0 10px; font-weight: 600; flex: none; }
.trdv-times { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); align-content: start; gap: 8px; overflow-y: auto; padding-right: 4px; }
.trdv-time { padding: 10px; border: 1px solid var(--trdv-accent); border-radius: 8px; background: var(--trdv-bg); color: var(--trdv-accent); font-weight: 600; transition: background .15s, color .15s; }
.trdv-time:hover { background: var(--trdv-accent); color: var(--trdv-accent-ink); }
.trdv-time.is-taken { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-color: #e3e5ea; background: #f4f5f7; color: #a3a8b3; cursor: not-allowed; }
.trdv-time.is-taken:hover { background: #f4f5f7; color: #a3a8b3; }
.trdv-time.is-taken small { font-size: .72em; font-weight: 500; text-decoration: none; letter-spacing: .02em; text-transform: uppercase; }
.trdv-day.is-full { color: #a3a8b3; text-decoration: line-through; cursor: pointer; }
.trdv-day.is-full:hover { outline: 2px solid #d5d8de; outline-offset: -2px; }
.trdv-day.is-full.is-selected { background: #e9ebef; color: #6b7280; }
.trdv-complet { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 50px; background: #f1f2f4; color: #6b7280; font-size: .8em; font-weight: 600; vertical-align: middle; }

/* Formulaire */
.trdv-summary { padding: 12px 14px; margin-bottom: 18px; border-left: 3px solid var(--trdv-accent); background: var(--trdv-soft); border-radius: 0 8px 8px 0; }
.trdv-form { display: grid; gap: 14px; }
.trdv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.trdv-field { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.trdv-field span { font-size: .9em; font-weight: 600; }
.trdv-field em { color: var(--trdv-error); font-style: normal; }
.trdv .trdv-field input, .trdv .trdv-field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--trdv-line); border-radius: 8px; background: var(--trdv-bg); color: var(--trdv-ink); font: inherit; margin: 0; }
.trdv .trdv-field input:focus, .trdv .trdv-field textarea:focus { border-color: var(--trdv-accent); outline: none; box-shadow: 0 0 0 3px var(--trdv-soft); }
.trdv-field.has-error input { border-color: var(--trdv-error); }
.trdv-field small, .trdv-error-inline { color: var(--trdv-error); font-size: .85em; }
.trdv-check { display: flex; gap: 10px; align-items: flex-start; font-size: .9em; color: var(--trdv-muted); margin: 0; }
.trdv-check input { margin-top: 4px; flex: none; }
.trdv-check.has-error { color: var(--trdv-error); }
.trdv-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* Conteneur du bouton du formulaire : porte l'alignement réglé dans Divi. */
.trdv-btn-wrap { justify-self: stretch; text-align: left; }
.trdv-btn-wrap .trdv-btn { display: inline-block; }
.trdv-btn { justify-self: start; padding: 12px 22px; border: 0 solid #333; border-radius: 8px; background: var(--trdv-accent); color: var(--trdv-accent-ink); font-weight: 600; }
.trdv-btn:hover { filter: brightness(1.08); }
.trdv-btn:disabled { opacity: .6; }
.trdv-btn-light { background: var(--trdv-soft); color: var(--trdv-accent); }
.trdv-error { color: var(--trdv-error); margin: 0 0 12px; }

/* Confirmation */
.trdv-done { text-align: center; }
.trdv-done .trdv-summary { display: inline-block; text-align: left; margin: 12px 0 16px; }
.trdv-done .trdv-btn { justify-self: center; }
.trdv-check-icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: var(--trdv-accent); color: var(--trdv-accent-ink); font-size: 28px; line-height: 56px; }

/* Visual Builders Divi : les éléments cliquables de l'aperçu passent au-dessus du calque de sélection de Divi
   (le reste du module reste à Divi : survol, sélection, barre d'outils). */
.tips_rdvm_apercu :is(button, input, textarea, label, a) { position: relative; z-index: 12; }

/* Dans un module Divi : la largeur, le fond et la bordure viennent des réglages du module. */
.trdv.trdv--module { max-width: none; }
/* Cadre par défaut du module Divi (4 et 5) : Divi n'imprime pas toujours les valeurs par défaut ; spécificité minimale (celle du reset « div ») pour que les réglages l'emportent. */
div:where(.tips_rdvm_d4.et_pb_module, .tips_rdvm_module.et_pb_module) { padding: 12px; border: 1px solid #e3e3e3; border-radius: 12px; }
.trdv.trdv--sans-cadre { padding: 0; border: 0; border-radius: 0; background: transparent; }

/* Module étroit (colonne, mobile) : calendrier et créneaux l'un sous l'autre. */
@media (max-width: 640px) {
	.trdv:not(.trdv--sans-cadre) { padding: 16px; }
}
@container (max-width: 600px) {
	.trdv-picker { grid-template-columns: 1fr; gap: 20px; }
	.trdv-slots { contain: none; }
	.trdv-times { flex: none; overflow: visible; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
	.trdv-row { grid-template-columns: 1fr; }
	.trdv-btn { width: 100%; }
}
/* Navigateurs sans requêtes de conteneur. */
@supports not (container-type: inline-size) {
	@media (max-width: 640px) {
		.trdv:not(.trdv--sans-cadre) { padding: 16px; }
		.trdv-picker { grid-template-columns: 1fr; gap: 20px; }
		.trdv-slots { contain: none; }
		.trdv-times { flex: none; overflow: visible; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
		.trdv-row { grid-template-columns: 1fr; }
		.trdv-btn { width: 100%; }
	}
}


/* Divi 5 : un module aligné (marges auto) se réduit à son contenu ; on garde toute la largeur disponible (limitée par la largeur max du module). */
:where(.tips_rdvm_module.et_pb_module) { width: 100%; }
.trdv { width: 100%; min-width: 0; }