/*
 * Les pages de réservation, à l'habillage de tattoo-on-move.fr (décision de Tof du 27/09/2026) : fond noir, texte
 * blanc, cuivre #b7a680, boutons cerclés de cuivre comme ceux de l'accueil. Tout est rangé sous .rendezvous : rien
 * ne déborde sur le reste du site. Le bloc porte son propre fond, pour rester lisible sous un autre gabarit.
 */
.rendezvous {
	--rdv-cuivre: #b7a680;
	--rdv-fond: #000;
	--rdv-carte: #1a1a1a;
	--rdv-texte: #fff;
	--rdv-doux: #aaa;
	max-width: 760px;
	margin: 0 auto;
	padding: 16px 10px 24px;
	background: var(--rdv-fond);
	color: var(--rdv-texte);
	font-family: Montserrat, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	text-align: center;
	border-radius: 5px;
}
.rendezvous h1,
.rendezvous h2 {
	font-family: "Gentium Plus", Georgia, serif;
	color: var(--rdv-cuivre);
	font-weight: 500;
}
.rendezvous h1 { font-size: 23px; line-height: 1.2; margin: 0 0 12px; }
.rendezvous h2 {
	font-size: 20px;
	margin: 28px 0 12px;
	padding: 6px 0;
	border-top: 3px double var(--rdv-cuivre);
	border-bottom: 3px double var(--rdv-cuivre);
	background: rgba(51, 51, 51, .25);
}
.rendezvous p { margin: 0 0 14px; }
.rendezvous a { color: var(--rdv-cuivre); }
.rendezvous strong { color: var(--rdv-texte); }

/* « à <boutique> » : à la ligne dans le titre, jamais coupé au milieu d'une ligne */
.rendezvous h1 .rdv-lieu { display: block; }

/* L'artiste choisie, rappelée sous le titre */
.rendezvous .rdv-avec { font-size: 14px; color: var(--rdv-doux); }

/* Ce qui est déjà choisi, rappelé en tête des étapes suivantes */
.rendezvous .rdv-resume {
	display: inline-block;
	margin: 0 0 18px;
	padding: 10px 18px;
	border: 1px solid var(--rdv-cuivre);
	border-radius: 5px;
	background: var(--rdv-carte);
}

/* Les boutons de choix : boutique, artiste, créneau */
.rendezvous .rdv-choix {
	display: grid;
	gap: 10px;
	margin: 8px 0 20px;
	padding: 0;
	list-style: none;
}
.rendezvous .rdv-choix a,
.rendezvous .rdv-carte {
	display: block;
	padding: 10px 14px;
	border: 1px solid var(--rdv-cuivre);
	border-radius: 5px;
	color: var(--rdv-texte);
	text-decoration: none;
	transition: background-color .15s, color .15s;
}
.rendezvous .rdv-choix a:hover,
.rendezvous .rdv-choix a:focus-visible,
.rendezvous .rdv-carte:hover,
.rendezvous .rdv-carte:focus-visible {
	background: var(--rdv-cuivre);
	color: #000;
	outline: none;
}

/* Le choix de la date, en haut de l'étape des créneaux : le calendrier du mois, puis les trois jours montrés */
/* La page s'ouvre sur le calendrier, 88 pixels sous le haut de l'écran : le bouton du menu du site, fixe en haut à
   droite jusqu'à 80 pixels, recouvrirait sinon la flèche du mois suivant */
.rendezvous .rdv-dates { max-width: 420px; margin: 0 auto 14px; scroll-margin-top: 88px; }
.rendezvous .rdv-entete { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.rendezvous .rdv-entete strong { flex: 1; font-size: 17px; line-height: 1.2; }
/* Pas de flèche de ce côté : sa place reste, pour que le titre ne bouge pas */
.rendezvous .rdv-entete .rdv-fleche-vide { visibility: hidden; }
.rendezvous .rdv-calendrier {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
	margin: 0 0 14px;
}
.rendezvous .rdv-nom-jour { padding: 2px 0 6px; font-size: 13px; font-weight: bold; color: var(--rdv-cuivre); }
/* Un jour : un bouton quand il a un créneau libre, un chiffre éteint sinon */
.rendezvous .rdv-case {
	display: flex; align-items: center; justify-content: center;
	min-height: 42px; border: 1px solid var(--rdv-cuivre); border-radius: 5px; box-sizing: border-box;
	color: var(--rdv-texte); font-size: 16px; font-weight: bold; line-height: 1; text-decoration: none;
	transition: background-color .15s, color .15s;
}
.rendezvous .rdv-case-vide { border-color: transparent; color: #666; font-weight: normal; }
.rendezvous .rdv-case-voisine { opacity: .55; }
.rendezvous .rdv-case-montree { background: rgba(183, 166, 128, .3); opacity: 1; }
.rendezvous .rdv-case-choisie,
.rendezvous a.rdv-case:hover,
.rendezvous a.rdv-case:focus-visible { background: var(--rdv-cuivre); color: #000; outline: none; }

/* Les créneaux : trois jours côte à côte — la veille, le jour choisi, le lendemain —, une case par heure */
.rendezvous .rdv-jours {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	align-items: start;
	margin: 8px 0 20px;
}
.rendezvous .rdv-jour h2 {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.2;
}
.rendezvous .rdv-jour h2 small { display: block; font-size: 14px; color: var(--rdv-texte); font-family: Montserrat, Arial, sans-serif; }
.rendezvous .rdv-jour-choisi h2 { background: rgba(183, 166, 128, .3); }
.rendezvous .rdv-vide { color: var(--rdv-doux); font-size: 14px; line-height: 1.3; margin: 0 0 8px; }
/* Une heure : fermée, elle dit en petit ses créneaux libres ; un appui la déplie sur leurs boutons */
.rendezvous .rdv-heure {
	margin: 0 0 8px; border: 1px solid var(--rdv-cuivre); border-radius: 5px;
	background: var(--rdv-carte); overflow: hidden;
}
.rendezvous .rdv-heure summary {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-height: 48px; padding: 6px 2px; box-sizing: border-box;
	cursor: pointer; list-style: none; user-select: none;
	transition: background-color .15s, color .15s;
}
.rendezvous .rdv-heure summary::-webkit-details-marker { display: none; }
.rendezvous .rdv-heure summary::marker { content: ""; }
.rendezvous .rdv-heure-nom { font-size: 18px; font-weight: bold; line-height: 1.2; }
.rendezvous .rdv-heure summary small { font-size: 11px; line-height: 1.35; color: var(--rdv-doux); }
.rendezvous .rdv-heure[open] summary,
.rendezvous .rdv-heure summary:hover,
.rendezvous .rdv-heure summary:focus-visible { background: var(--rdv-cuivre); color: #000; outline: none; }
.rendezvous .rdv-heure summary:hover small,
.rendezvous .rdv-heure summary:focus-visible small { color: #000; }
.rendezvous .rdv-heure[open] summary small { display: none; }
/* Un créneau qui n'est pas libre : grisé et barré ; une heure sans créneau libre : sa case entière, qui ne se déplie pas */
.rendezvous .rdv-heure s { color: #666; text-decoration: line-through; }
.rendezvous .rdv-heure summary:hover s,
.rendezvous .rdv-heure summary:focus-visible s { color: #4d4636; }
.rendezvous .rdv-heure-prise {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-height: 48px; padding: 6px 2px; border-color: #3a3a3a; background: transparent; color: #666;
}
.rendezvous .rdv-heure-prise .rdv-heure-nom { text-decoration: line-through; }
.rendezvous .rdv-heure-prise small { font-size: 11px; line-height: 1.35; }
.rendezvous .rdv-heures .rdv-pris {
	display: block; padding: 11px 2px; border: 1px solid #3a3a3a; border-radius: 5px;
	font-size: 16px; line-height: 1.2;
}
.rendezvous .rdv-heures { grid-template-columns: 1fr; gap: 6px; margin: 0; padding: 6px; }
.rendezvous .rdv-heures a { padding: 11px 2px; font-size: 16px; line-height: 1.2; background: var(--rdv-fond); }

/* Les catégories : une tuile par photo */
.rendezvous .rdv-tuiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 16px 0 20px;
	padding: 0;
	list-style: none;
}
.rendezvous .rdv-tuile {
	display: block;
	overflow: hidden;
	border: 1px solid var(--rdv-cuivre);
	border-radius: 5px;
	background: var(--rdv-carte);
	color: var(--rdv-texte);
	text-decoration: none;
}
.rendezvous .rdv-tuile img,
.rendezvous .rdv-tuile .rdv-sans-photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.rendezvous .rdv-tuile-nom {
	display: block; padding: 10px 4px; font-weight: bold; font-size: 14px; line-height: 1.25;
	overflow-wrap: anywhere; hyphens: auto;
}
/* « bijou et soins inclus » : en petit, à la ligne, sous le nom */
.rendezvous .rdv-precision { display: block; margin-top: 3px; font-size: 11px; font-weight: normal; opacity: .8; line-height: 1.3; }
.rendezvous h1 .rdv-precision { font-family: Montserrat, Arial, sans-serif; font-size: 12px; color: var(--rdv-texte); }

/* Le haut de chaque étape : la flèche de retour, puis deux boutons côte à côte */
.rendezvous .rdv-nav { display: flex; align-items: stretch; gap: 8px; margin: 0 0 14px; }
.rendezvous .rdv-fleche {
	flex: none; display: flex; align-items: center; justify-content: center;
	width: 44px; min-height: 44px; border: 1px solid var(--rdv-cuivre); border-radius: 5px;
	color: var(--rdv-cuivre); font-size: 22px; text-decoration: none; box-sizing: border-box;
}
.rendezvous .rdv-boutons { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.rendezvous .rdv-bouton-nav {
	display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 6px;
	border: 1px solid var(--rdv-cuivre); border-radius: 5px; box-sizing: border-box;
	color: var(--rdv-texte); font-size: 13px; line-height: 1.2; text-decoration: none;
}
.rendezvous .rdv-fleche:hover,
.rendezvous .rdv-fleche:focus-visible,
.rendezvous .rdv-bouton-nav:hover,
.rendezvous .rdv-bouton-nav:focus-visible { background: var(--rdv-cuivre); color: #000; outline: none; }
.rendezvous .rdv-tuile:hover,
.rendezvous .rdv-tuile:focus-visible { background: var(--rdv-cuivre); color: #000; outline: none; }
.rendezvous .rdv-sans-photo { background: #262626; }
/* Les boutiques : l'une sous l'autre sur un téléphone, côte à côte au-delà ; la devanture en bandeau, l'adresse sous
   le nom ; toutes les tuiles d'une rangée de même hauteur, même quand un nom tient sur deux lignes */
.rendezvous .rdv-tuiles-boutiques { grid-template-columns: minmax(0, 1fr); }
.rendezvous .rdv-tuiles .rdv-tuile { height: 100%; box-sizing: border-box; }
.rendezvous .rdv-tuiles-boutiques .rdv-tuile img,
.rendezvous .rdv-tuiles-boutiques .rdv-tuile .rdv-sans-photo { aspect-ratio: 16 / 9; }
/* Les piercings intimes : le panneau « interdit aux moins de 18 ans », en coin de la tuile et devant l'avertissement */
.rendezvous .rdv-tuile { position: relative; }
.rendezvous .rdv-interdit {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.6em; height: 2.6em; border: .25em solid #d00; border-radius: 50%;
	background: #fff; color: #000; font-weight: bold; font-size: .9em; line-height: 1; box-sizing: border-box;
}
.rendezvous .rdv-tuile .rdv-interdit { position: absolute; top: 8px; right: 8px; }
.rendezvous .rdv-avertissement { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.35; text-align: left; }
.rendezvous .rdv-avertissement .rdv-interdit { flex: none; }
.rendezvous .rdv-tuile-detail { display: block; padding: 0 6px 10px; font-size: .9em; opacity: .8; }

/* Les prestations d'une catégorie */
.rendezvous .rdv-prestations {
	display: grid;
	gap: 10px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
	text-align: left;
}
.rendezvous .rdv-carte { display: flex; gap: 14px; align-items: center; padding: 8px; background: var(--rdv-carte); }
.rendezvous .rdv-carte img,
.rendezvous .rdv-carte .rdv-sans-photo { flex: 0 0 88px; width: 88px; height: 88px; object-fit: cover; border-radius: 4px; }
.rendezvous .rdv-carte .rdv-texte { flex: 1; min-width: 0; }
.rendezvous .rdv-carte .rdv-nom { display: block; font-size: 17px; }
.rendezvous .rdv-carte .rdv-meta { display: block; color: var(--rdv-cuivre); font-size: 15px; }
.rendezvous .rdv-carte small { display: block; margin-top: 4px; color: var(--rdv-doux); font-size: 13px; }
.rendezvous .rdv-carte:hover strong,
.rendezvous .rdv-carte:hover .rdv-meta,
.rendezvous .rdv-carte:hover small,
.rendezvous .rdv-carte:focus-visible strong,
.rendezvous .rdv-carte:focus-visible .rdv-meta,
.rendezvous .rdv-carte:focus-visible small { color: #000; }

/* Le formulaire des coordonnées */
.rendezvous .rdv-form { max-width: 480px; margin: 0 auto; text-align: left; }
.rendezvous .rdv-form label { display: block; margin: 14px 0 4px; font-weight: bold; }
.rendezvous .rdv-form label small { display: block; font-weight: normal; color: var(--rdv-doux); font-size: 13px; }
.rendezvous .rdv-form input[type=date] { color-scheme: dark; min-height: 44px; }
.rendezvous .rdv-form input[type=text],
.rendezvous .rdv-form input[type=tel],
.rendezvous .rdv-form input[type=email],
.rendezvous .rdv-form input[type=date],
.rendezvous .rdv-form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--rdv-cuivre);
	border-radius: 5px;
	background: var(--rdv-carte);
	color: var(--rdv-texte);
	font: inherit;
}
.rendezvous .rdv-form input:focus,
.rendezvous .rdv-form textarea:focus { outline: 2px solid var(--rdv-cuivre); outline-offset: 1px; }
.rendezvous .rdv-form fieldset { margin: 18px 0 0; padding: 10px 14px; border: 1px solid var(--rdv-cuivre); border-radius: 5px; }
.rendezvous .rdv-form legend { padding: 0 6px; float: none; width: auto; font-size: 16px; margin: 0; }
.rendezvous .rdv-form .rdv-radio { display: inline-block; margin: 6px 24px 0 0; font-weight: normal; }
.rendezvous .rdv-form input[type=radio] { accent-color: var(--rdv-cuivre); margin-right: 6px; }
.rendezvous .rdv-note { font-size: 13px; color: var(--rdv-doux); }
/* Pour un mineur : la date de naissance de l'enfant et le parent ne se montrent qu'après « Oui ». Sans :has(), la page
   revenue d'une erreur les montre quand « Oui » était coché. */
.rendezvous .rdv-form .rdv-pour-mineur { display: none; }
.rendezvous .rdv-form:has(input[name=mineur][value=oui]:checked) .rdv-pour-mineur { display: block; }
@supports not selector(:has(a)) {
	.rendezvous .rdv-form.rdv-mineur-oui .rdv-pour-mineur { display: block; }
}
.rendezvous .rdv-piege { position: absolute; left: -10000px; }

/* Les boutons qui envoient : réserver, déplacer, annuler */
.rendezvous input[type=submit],
.rendezvous .rdv-bouton {
	display: inline-block;
	min-width: 240px;
	margin-top: 18px;
	padding: 12px 22px;
	border: 1px solid var(--rdv-cuivre);
	border-radius: 5px;
	background: var(--rdv-cuivre);
	color: #000;
	font: inherit;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
}
.rendezvous input[type=submit]:hover,
.rendezvous .rdv-bouton:hover { background: #cfc09d; }
.rendezvous .rdv-bouton-discret,
.rendezvous input[type=submit].rdv-bouton-discret { background: transparent; color: var(--rdv-texte); font-weight: normal; }
.rendezvous .rdv-bouton-discret:hover,
.rendezvous input[type=submit].rdv-bouton-discret:hover { background: var(--rdv-carte); }
.rendezvous .rdv-actions form { display: inline; }

@media (min-width: 600px) {
	.rendezvous { padding: 32px 28px 40px; }
	.rendezvous h1 { font-size: 26px; }
	.rendezvous .rdv-tuile-nom { font-size: 16px; }
	.rendezvous .rdv-bouton-nav { font-size: 14px; }
	.rendezvous .rdv-large { grid-template-columns: 1fr 1fr; }
	.rendezvous .rdv-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.rendezvous .rdv-tuiles-boutiques { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rendezvous .rdv-jours { gap: 16px; }
	.rendezvous .rdv-heure summary small,
	.rendezvous .rdv-heure-prise small { font-size: 13px; }
}

/*
 * L'habillage de la maquette du 14/10/2026, posé le 23/10/2026 sur les pages une par étape (demande de Tof) : fond noir
 * neutre, plus aucun brun, doré #b7a680 sur les titres et les boutons, tuiles photo, prestations en lignes, personnes
 * en cartes à portrait. Ce bloc passe après le reste et le remplace là où il le dit.
 */
.rendezvous {
	--rdv-fond: #050505;
	--rdv-carte: #141414;
	--rdv-ligne: #2e2e2e;
	--rdv-rayon: 18px;
	--rdv-vif: #e2d3a6;
	max-width: 520px;
	padding: 14px 16px 40px;
	border-radius: var(--rdv-rayon);
	text-align: left;
}
.rendezvous h1 {
	font-size: 28px; line-height: 1.1; font-weight: 400; color: var(--rdv-texte); margin: 8px 0 6px;
}
.rendezvous h1:has(em) { font-size: 38px; line-height: 1.05; }
.rendezvous h1 em { color: var(--rdv-cuivre); font-style: italic; }
.rendezvous h1 .rdv-lieu { color: var(--rdv-cuivre); font-size: 22px; margin-top: 4px; }
.rendezvous h2 {
	font-size: 24px; font-weight: 400; margin: 22px 0 10px; padding: 0; border: 0; background: none; color: var(--rdv-texte);
}
.rendezvous .rdv-accroche { color: var(--rdv-doux); font-size: 14px; margin: 0 0 6px; }

/* L'avancement en haut : cinq traits, dorés jusqu'à l'étape où l'on est */
.rendezvous .rdv-avancement { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0 0 14px; }
.rendezvous .rdv-avancement i { display: block; height: 3px; border-radius: 3px; background: var(--rdv-ligne); }
.rendezvous .rdv-avancement i.rdv-fait { background: var(--rdv-cuivre); }

/* Le haut de chaque étape : la flèche ronde, deux boutons à vignette */
.rendezvous .rdv-fleche { border-color: var(--rdv-ligne); border-radius: 50%; color: var(--rdv-texte); width: 44px; min-height: 44px; }
.rendezvous .rdv-bouton-nav {
	justify-content: flex-start; gap: 8px; padding: 4px 12px 4px 4px; min-height: 48px;
	border-color: var(--rdv-ligne); border-radius: 99px; background: var(--rdv-carte); font-weight: 600; text-align: left;
}
.rendezvous .rdv-bouton-nav { font-size: 12px; line-height: 1.15; }
.rendezvous .rdv-bouton-nav .rdv-vignette { flex: none; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.rendezvous .rdv-bouton-nav span { min-width: 0; }
.rendezvous .rdv-bouton-nav:not(:has(.rdv-vignette)) { justify-content: center; padding: 4px 12px; }

/* Les tuiles photo : le nom sur l'image, en bas, dans un dégradé noir ; deux par ligne, même sur un téléphone */
.rendezvous .rdv-tuiles,
.rendezvous .rdv-tuiles-boutiques { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 10px 0 18px; }
.rendezvous .rdv-tuile {
	border: 0; border-radius: var(--rdv-rayon); background: var(--rdv-carte); aspect-ratio: 3 / 4; height: auto;
	transition: transform .12s, box-shadow .2s;
}
.rendezvous .rdv-tuiles .rdv-tuile { height: auto; }
.rendezvous .rdv-tuile img,
.rendezvous .rdv-tuile .rdv-sans-photo,
.rendezvous .rdv-tuiles-boutiques .rdv-tuile img,
.rendezvous .rdv-tuiles-boutiques .rdv-tuile .rdv-sans-photo { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.rendezvous .rdv-tuile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .85)); }
.rendezvous .rdv-tuile { display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; box-sizing: border-box; }
.rendezvous .rdv-tuile-nom,
.rendezvous .rdv-tuile-detail { position: relative; z-index: 1; padding: 0; color: var(--rdv-texte); }
.rendezvous .rdv-tuile-nom { font-family: "Gentium Plus", Georgia, serif; font-weight: 400; font-size: 20px; line-height: 1.1; }
.rendezvous .rdv-tuile-detail { margin-top: 4px; font-size: 12px; line-height: 1.3; color: var(--rdv-doux); opacity: 1; }
.rendezvous .rdv-tuile:hover,
.rendezvous .rdv-tuile:focus-visible { background: var(--rdv-carte); color: var(--rdv-texte); box-shadow: 0 0 0 2px var(--rdv-cuivre); }
.rendezvous .rdv-tuile .rdv-interdit { z-index: 2; }
.rendezvous .rdv-precision { color: var(--rdv-doux); }

/* Les prestations : une ligne par prestation, photo carrée arrondie, prix à droite */
.rendezvous .rdv-prestations { gap: 0; }
.rendezvous .rdv-carte {
	display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center;
	padding: 10px 0; border: 0; border-bottom: 1px solid var(--rdv-ligne); border-radius: 0; background: transparent;
}
.rendezvous .rdv-carte img,
.rendezvous .rdv-carte .rdv-sans-photo { flex: none; width: 64px; height: 64px; border-radius: 12px; }
.rendezvous .rdv-carte .rdv-nom { font-size: 15px; font-weight: 600; }
.rendezvous .rdv-carte .rdv-meta { color: var(--rdv-doux); font-size: 13px; }
.rendezvous .rdv-carte .rdv-prix { font-weight: 700; color: var(--rdv-vif); white-space: nowrap; }
.rendezvous .rdv-carte:hover,
.rendezvous .rdv-carte:focus-visible { background: var(--rdv-carte); color: var(--rdv-texte); }
.rendezvous .rdv-carte:hover strong,
.rendezvous .rdv-carte:focus-visible strong { color: var(--rdv-texte); }
.rendezvous .rdv-carte:hover .rdv-meta,
.rendezvous .rdv-carte:focus-visible .rdv-meta,
.rendezvous .rdv-carte:hover small,
.rendezvous .rdv-carte:focus-visible small { color: var(--rdv-doux); }

/* Avec qui : des cartes à portrait, deux par ligne ; la première, « la première personne disponible », en trio de visages */
.rendezvous .rdv-artistes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 8px 0 18px; padding: 0; list-style: none; }
.rendezvous .rdv-artiste {
	position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--rdv-rayon);
	background: var(--rdv-carte); color: var(--rdv-texte); text-decoration: none; transition: transform .12s, box-shadow .2s;
}
.rendezvous .rdv-artiste > img,
.rendezvous .rdv-artiste > .rdv-sans-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.rendezvous .rdv-artiste::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .85)); }
.rendezvous .rdv-artiste-nom {
	position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1;
	font-family: "Gentium Plus", Georgia, serif; font-size: 22px; line-height: 1.1;
}
.rendezvous .rdv-artiste:hover,
.rendezvous .rdv-artiste:focus-visible { background: var(--rdv-carte); box-shadow: 0 0 0 2px var(--rdv-cuivre); outline: none; }
.rendezvous .rdv-premier { background: radial-gradient(circle at 50% 35%, #2a2a2a, var(--rdv-carte) 70%); }
.rendezvous .rdv-premier::after { display: none; }
.rendezvous .rdv-trio { position: absolute; left: 0; right: 0; top: 24%; display: flex; justify-content: center; }
.rendezvous .rdv-trio img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 3px solid var(--rdv-carte); margin-left: -14px; }
.rendezvous .rdv-trio img:first-child { margin-left: 0; }
.rendezvous .rdv-premier .rdv-artiste-nom { font-size: 19px; text-align: center; }

/* Les créneaux et le calendrier : mêmes couleurs, aucun brun */
.rendezvous .rdv-case { border-color: var(--rdv-ligne); border-radius: 10px; background: var(--rdv-carte); }
.rendezvous .rdv-case-vide { background: transparent; border-color: transparent; }
.rendezvous .rdv-case-montree { background: #232323; border-color: var(--rdv-cuivre); }
/* Le jour choisi reste cuivre, texte noir : les deux règles ci-dessus le repeignaient en sombre sous un texte noir */
.rendezvous .rdv-case.rdv-case-choisie { background: var(--rdv-cuivre); border-color: var(--rdv-cuivre); color: #000; }
.rendezvous .rdv-jour-choisi h2 { background: #232323; }
.rendezvous .rdv-heure { border-color: var(--rdv-ligne); border-radius: 12px; }
.rendezvous .rdv-resume,
.rendezvous .rdv-form fieldset { border-color: var(--rdv-ligne); border-radius: 14px; }
.rendezvous .rdv-choix a { border-color: var(--rdv-ligne); border-radius: 12px; background: var(--rdv-carte); }
.rendezvous .rdv-form input[type=text],
.rendezvous .rdv-form input[type=tel],
.rendezvous .rdv-form input[type=email],
.rendezvous .rdv-form input[type=date],
.rendezvous .rdv-form textarea { border-color: var(--rdv-ligne); border-radius: 12px; padding: 14px; font-size: 17px; }
.rendezvous .rdv-form input:focus,
.rendezvous .rdv-form textarea:focus { outline: 0; border-color: var(--rdv-cuivre); }
.rendezvous input[type=submit],
.rendezvous .rdv-bouton { border-radius: 99px; }
.rendezvous .rdv-avertissement { background: var(--rdv-carte); padding: 10px 12px; border-radius: 12px; }

@media (min-width: 600px) {
	.rendezvous { padding: 24px 24px 40px; }
	.rendezvous .rdv-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rendezvous .rdv-large { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.rendezvous .rdv-tuile, .rendezvous .rdv-artiste { transition: none; }
}

/* Les retouches demandées par Tof sur son téléphone, le 23/10/2026 */

/* « Changer d'artiste », « Changer de prestation » et les jours en haut des colonnes : texte centré */
.rendezvous .rdv-bouton-nav:not(:has(.rdv-vignette)) { justify-content: center; text-align: center; }
.rendezvous .rdv-bouton-nav:not(:has(.rdv-vignette)) span { text-align: center; }
.rendezvous .rdv-jour h2,
.rendezvous .rdv-jour h2 small { text-align: center; }

/* Piercing pour un mineur : « (de l'enfant) » ne se montre qu'après « Oui » ; téléphone et courriel de l'enfant
   n'apparaissent qu'une fois sa date de naissance indiquée (le script du formulaire pose rdv-date-ok) */
.rendezvous .rdv-form .rdv-enfant { display: none; font-weight: normal; }
.rendezvous .rdv-form.rdv-mineur-oui .rdv-enfant,
.rendezvous .rdv-form:has(input[name=mineur][value=oui]:checked) .rdv-enfant { display: inline; }
.rdv-js .rendezvous .rdv-form.rdv-mineur-oui:not(.rdv-date-ok) .rdv-contact-enfant { display: none; }
.rendezvous .rdv-loi a { color: var(--rdv-cuivre); text-decoration: underline; }

/* Avec qui : « la première personne disponible » sur une ligne basse, puis toutes les personnes sur une seule ligne,
   chacune de la largeur qui reste, quel que soit leur nombre */
.rendezvous a.rdv-premier {
	display: flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box;
	margin: 8px 0 12px; padding: 10px 14px; border: 1px solid var(--rdv-ligne); border-radius: 99px;
	background: var(--rdv-carte); color: var(--rdv-texte); text-decoration: none; aspect-ratio: auto;
}
.rendezvous a.rdv-premier:hover,
.rendezvous a.rdv-premier:focus-visible { border-color: var(--rdv-cuivre); outline: none; }
.rendezvous a.rdv-premier .rdv-trio { position: static; display: flex; flex: none; }
.rendezvous a.rdv-premier .rdv-trio img { width: 34px; height: 34px; }
.rendezvous a.rdv-premier .rdv-artiste-nom { position: static; font-size: 17px; line-height: 1.1; text-align: left; white-space: nowrap; }
.rendezvous .rdv-artistes { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 8px; margin-top: 0; }
.rendezvous .rdv-artistes .rdv-artiste-nom { left: 8px; right: 8px; bottom: 8px; font-size: clamp(13px, 4.2vw, 20px); overflow-wrap: anywhere; }

/* Les catégories : « Accompagnement » sur toute la largeur, les autres deux par deux */
.rendezvous .rdv-tuiles .rdv-large-tuile { grid-column: 1 / -1; }
.rendezvous .rdv-tuiles .rdv-large-tuile .rdv-tuile { aspect-ratio: 16 / 7; }

/* Une prestation : la photo, puis des lignes alignées en colonnes (nom | durée ; options ; prix de base à droite) */
.rendezvous .rdv-carte { grid-template-columns: 64px minmax(0, 1fr); align-items: start; }
.rendezvous .rdv-lignes { display: grid; gap: 4px; min-width: 0; }
.rendezvous .rdv-l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rendezvous .rdv-l-tete .rdv-nom { flex: 1; min-width: 0; }
.rendezvous .rdv-l-tete .rdv-meta { flex: none; white-space: nowrap; }
.rendezvous .rdv-l-options { justify-content: flex-start; margin-top: 2px; font-size: 12px; color: var(--rdv-doux); }
.rendezvous .rdv-l-option { padding-left: 8px; font-size: 13px; color: var(--rdv-doux); }
.rendezvous .rdv-l-option span:last-child { white-space: nowrap; }
.rendezvous .rdv-l-pied { margin-top: 2px; font-size: 13px; color: var(--rdv-doux); }
.rendezvous .rdv-l-pied .rdv-description { flex: 1; min-width: 0; }
.rendezvous .rdv-l-pied .rdv-prix { flex: none; font-size: 16px; }

/* Le prix de base sur la ligne du nom, au-dessus des options ; les options un peu moins à droite, sous la durée (retouche de Tof du 23/10/2026) */
.rendezvous .rdv-l-tete { gap: 10px; }
.rendezvous .rdv-l-tete .rdv-prix { flex: none; min-width: 3.4em; text-align: right; font-size: 16px; }
.rendezvous .rdv-l-option,
.rendezvous .rdv-l-options { padding-right: calc(3.4em + 10px); }
.rendezvous .rdv-l-option { padding-left: 4px; }

/* Les options : le nom décalé vers la droite, son prix juste à côté (dernière retouche de Tof du 23/10/2026) */
.rendezvous .rdv-l-option { display: grid; grid-template-columns: 6em auto; justify-content: start; gap: 0; padding-left: 3.4em; padding-right: 0; }
.rendezvous .rdv-l-option span:last-child { text-align: left; }
.rendezvous .rdv-l-options { padding-right: 0; }

/*
 * Le reste de la maquette (parcours.html, validée par Tof le 14/10/2026) : le fond d'hexagones de l'accueil du site
 * (accueil-fond.css, recopié tel quel), la vidéo d'accueil, l'écran Quand en haut de page, le tiroir des prestations, la
 * barre du bas et les transitions. Ce bloc passe après le reste et le remplace là où il le dit.
 */
.rendezvous { --rdv-courbe: cubic-bezier(.2, .8, .2, 1); --rdv-case: 34px; background: transparent; }
/* Le fond d'hexagones monte derrière la page : le bloc ne le cache plus, il le teinte (ordinateur) ou le laisse voir (téléphone) */
.rendezvous .accueil-fond-milieu { opacity: .5; }
@media (min-width: 520px) {
	.rendezvous { margin: 24px auto; border: 1px solid var(--rdv-ligne); border-radius: 28px; background: rgba(5, 5, 5, .72); }
}

/* L'emplacement de la vidéo d'accueil, en haut de la première étape : vide tant que Tof n'a pas déposé accueil.mp4 */
.rendezvous .rdv-hero {
	position: relative; display: flex; align-items: flex-end; min-height: 170px; margin: 0 -16px 4px; overflow: hidden;
	border-radius: var(--rdv-rayon); background: radial-gradient(circle at 50% 30%, #1d1d1d, rgba(5, 5, 5, .6) 70%);
}
.rendezvous .rdv-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rendezvous .rdv-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 45%, rgba(5, 5, 5, .9) 99%); }
.rendezvous .rdv-hero-texte { position: relative; z-index: 1; padding: 0 16px 10px; }
.rendezvous .rdv-hero-texte h1 { margin-top: 0; }

/* L'écran Quand : en haut et toujours visible — le mois, deux semaines du calendrier, la bande de dates qui défile */
.rendezvous .rdv-dates {
	position: sticky; top: var(--rdv-haut, 0); z-index: 20; max-width: none; margin: 0 0 14px; padding: 8px 8px 6px;
	max-height: 72vh; max-height: 72dvh; overflow-y: auto; border-radius: 14px;
	background: rgba(5, 5, 5, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.rendezvous .rdv-dates .rdv-entete { gap: 6px; margin-bottom: 6px; }
.rendezvous .rdv-dates .rdv-entete strong { font-family: "Gentium Plus", Georgia, serif; font-weight: 400; font-size: 19px; }
.rendezvous .rdv-dates .rdv-fleche { width: 36px; min-height: 36px; font-size: 16px; }
.rendezvous .rdv-vues { display: flex; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--rdv-ligne); border-radius: 99px; background: var(--rdv-carte); }
.rendezvous .rdv-vues[hidden] { display: none; }
.rendezvous .rdv-vues button {
	border: 0; border-radius: 99px; padding: 7px 12px; background: transparent; color: var(--rdv-doux);
	font: 600 12px Montserrat, Arial, sans-serif; cursor: pointer; transition: background-color .28s, color .28s;
}
.rendezvous .rdv-vues button[aria-pressed="true"] { background: var(--rdv-cuivre); color: #000; }
.rendezvous .rdv-calendrier-noms { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.rendezvous .rdv-calendrier-noms .rdv-nom-jour { padding: 0 0 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; text-align: center; color: var(--rdv-doux); }
.rendezvous .rdv-fenetre { margin: 0 0 8px; }
.rendezvous .rdv-fenetre .rdv-calendrier { margin: 0; }
.rendezvous .rdv-fenetre .rdv-case { height: var(--rdv-case); min-height: var(--rdv-case); font-size: 14px; }
/* Vue Jours (celle du script) : deux semaines seulement, qui montent ou descendent pour suivre la bande */
.rendezvous .rdv-dates[data-vue="jours"] .rdv-fenetre { height: calc(2 * var(--rdv-case) + 4px); overflow: hidden; }
.rendezvous .rdv-dates[data-vue="jours"] .rdv-calendrier { transition: transform 320ms var(--rdv-courbe); }
.rendezvous .rdv-dates[data-vue="jours"] .rdv-case-voisine { opacity: 1; }
.rendezvous .rdv-dates[data-vue="jours"] .rdv-case-vide { color: #4a4a4a; }
/* La bande de dates : sans le script, elle n'est pas montrée (le mois entier suffit) */
.rendezvous .rdv-bande { display: none; }
.rendezvous .rdv-dates[data-vue="jours"] .rdv-bande {
	position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 56px; gap: 6px; margin: 0 -2px 8px; padding: 2px;
	overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 2px; scrollbar-width: none;
}
.rendezvous .rdv-bande::-webkit-scrollbar { display: none; }
.rendezvous .rdv-bande .rdv-bj {
	display: block; box-sizing: border-box; height: auto; min-height: 0; padding: 7px 0 6px; scroll-snap-align: start;
	border: 1px solid var(--rdv-ligne); border-radius: 14px; background: var(--rdv-carte); color: var(--rdv-texte); text-align: center; text-decoration: none;
}
.rendezvous .rdv-bande .rdv-bj small { display: block; font-size: 10px; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; color: var(--rdv-doux); }
.rendezvous .rdv-bande .rdv-bj b { display: block; margin: 1px 0; font-size: 19px; font-weight: 600; line-height: 1.2; }
.rendezvous .rdv-bande .rdv-bj i { display: block; width: 5px; height: 5px; margin: 0 auto; border-radius: 50%; background: var(--rdv-cuivre); }
.rendezvous .rdv-bande .rdv-bj.rdv-case-choisie { background: var(--rdv-cuivre); border-color: var(--rdv-cuivre); color: #000; }
.rendezvous .rdv-bande .rdv-case-choisie small { color: rgba(0, 0, 0, .6); }
.rendezvous .rdv-bande .rdv-case-choisie i,
.rendezvous .rdv-bande a.rdv-bj:hover i { background: #000; }
.rendezvous .rdv-bande .rdv-bj-vide { opacity: .3; }
.rendezvous .rdv-bande .rdv-bj-vide i { visibility: hidden; }

/* Le tiroir des prestations : il monte du bas, avec sa photo, sa durée et son prix pour chacune */
.rendezvous .rdv-voile {
	position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity 280ms;
}
.rendezvous .rdv-voile.rdv-ouvert { opacity: 1; pointer-events: auto; }
.rendezvous .rdv-tiroir {
	position: fixed; left: 50%; bottom: 0; z-index: 41; box-sizing: border-box; width: 100%; max-width: 520px;
	max-height: 82vh; max-height: 82dvh; overflow: auto; overscroll-behavior: contain; padding: 8px 16px 32px;
	background: var(--rdv-fond); border-top: 1px solid var(--rdv-ligne); border-radius: 24px 24px 0 0;
	transform: translate(-50%, 100%); visibility: hidden; transition: transform 340ms var(--rdv-courbe), visibility 0s linear 340ms;
}
.rendezvous .rdv-tiroir.rdv-ouvert { transform: translate(-50%, 0); visibility: visible; transition: transform 340ms var(--rdv-courbe), visibility 0s; }
html.rdv-tiroir-ouvert { overflow: hidden; }
.rendezvous .rdv-tiroir-tete { position: relative; }
.rendezvous .rdv-poignee { display: block; width: 44px; height: 5px; margin: 4px auto 10px; border-radius: 5px; background: var(--rdv-ligne); }
.rendezvous .rdv-tiroir-fermer {
	position: absolute; top: -4px; right: -6px; width: 36px; height: 36px; border: 1px solid var(--rdv-ligne); border-radius: 50%;
	background: transparent; color: var(--rdv-texte); font-size: 20px; line-height: 1; cursor: pointer;
}
.rendezvous .rdv-tiroir h2 { margin: 4px 0 2px; }
.rendezvous .rdv-tiroir .rdv-sous-titre { margin: 0 0 12px; color: var(--rdv-doux); font-size: 14px; }
.rendezvous .rdv-tiroir .rdv-prestations { margin: 0; }
.rendezvous .rdv-interdit-ligne { flex: none; width: 2.2em; height: 2.2em; font-size: .75em; }

/* La barre du bas : ce que le client a choisi ; chaque puce ramène à son étape */
.rendezvous.rdv-avec-barre { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.rendezvous .rdv-recap {
	position: fixed; left: 50%; bottom: 0; z-index: 30; transform: translateX(-50%); box-sizing: border-box; width: 100%; max-width: 520px;
	padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rdv-ligne);
	background: rgba(0, 0, 0, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
/* Le cadenas des cookies du site (en bas à droite de l'écran) monte au-dessus de la barre au lieu de la couvrir */
body:has(.rendezvous.rdv-avec-barre) #tarteaucitronIcon.tarteaucitronIconBottomRight { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
.rendezvous .rdv-puces { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.rendezvous .rdv-puces::-webkit-scrollbar { display: none; }
.rendezvous .rdv-recap .rdv-puce {
	flex: none; display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; min-height: 0; padding: 7px 12px;
	border: 1px solid var(--rdv-ligne); border-radius: 99px; background: var(--rdv-carte); color: var(--rdv-texte);
	font: 500 12px/1.2 Montserrat, Arial, sans-serif; text-align: left; text-decoration: none; white-space: nowrap;
}
.rendezvous .rdv-recap .rdv-puce i { font-style: normal; color: var(--rdv-cuivre); }
.rendezvous .rdv-recap a.rdv-puce:hover,
.rendezvous .rdv-recap a.rdv-puce:focus-visible { background: var(--rdv-cuivre); color: #000; }
.rendezvous .rdv-recap a.rdv-puce:hover i,
.rendezvous .rdv-recap a.rdv-puce:focus-visible i { color: #000; }
.rendezvous .rdv-recap .rdv-puce-fixe { color: var(--rdv-doux); }

/* Les transitions : l'étape qui part glisse à gauche, la nouvelle entre de la droite ; le fond et la barre du bas restent en
   place. Les cartes montent l'une après l'autre. Tout est coupé plus bas quand le téléphone demande moins d'animations. */
@keyframes rdv-monte { from { opacity: 0; transform: translateY(14px); } }
@keyframes rdv-sort { to { opacity: 0; transform: translateX(-40px); } }
@keyframes rdv-entre { from { opacity: 0; transform: translateX(40px); } }
.rendezvous .rdv-tuiles > li,
.rendezvous .rdv-prestations > li,
.rendezvous .rdv-artistes > li,
.rendezvous a.rdv-premier { animation: rdv-monte 420ms var(--rdv-courbe) both; }
.rendezvous .rdv-tuiles > li:nth-child(2), .rendezvous .rdv-prestations > li:nth-child(2), .rendezvous .rdv-artistes > li:nth-child(2) { animation-delay: 60ms; }
.rendezvous .rdv-tuiles > li:nth-child(3), .rendezvous .rdv-prestations > li:nth-child(3), .rendezvous .rdv-artistes > li:nth-child(3) { animation-delay: 120ms; }
.rendezvous .rdv-tuiles > li:nth-child(4), .rendezvous .rdv-prestations > li:nth-child(4), .rendezvous .rdv-artistes > li:nth-child(4) { animation-delay: 180ms; }
.rendezvous .rdv-tuiles > li:nth-child(n+5), .rendezvous .rdv-prestations > li:nth-child(n+5), .rendezvous .rdv-artistes > li:nth-child(n+5) { animation-delay: 240ms; }
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	.rendezvous .accueil-fond { view-transition-name: rdv-fond; }
	.rendezvous .rdv-recap { view-transition-name: rdv-recap; }
	::view-transition-old(root) { animation: 180ms cubic-bezier(.2, .8, .2, 1) both rdv-sort; }
	::view-transition-new(root) { animation: 280ms cubic-bezier(.2, .8, .2, 1) both rdv-entre; }
}
@media (prefers-reduced-motion: reduce) {
	.rendezvous *,
	.rendezvous *::before,
	.rendezvous *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.rendezvous .rdv-hero video { display: none; }
}