/* =============================================================================
   Studio RDV — affichage public
   -----------------------------------------------------------------------------
   Palette rose poudré, noir et crème, serif éditorial et capitales espacées :
   la même direction que les maquettes validées.

   Tout est préfixé `studio-` et les variables sont posées sur `.studio` et non
   sur `:root` — un thème WordPress a déjà ses propres styles, on ne va pas
   déborder sur les siens.
   ========================================================================== */

.studio {
	--studio-encre: #1c1a19;
	--studio-fond: #faf7f4;
	--studio-douceur: #f0e7e2;
	--studio-rose: #d6988f;
	--studio-rose-fonce: #965852;
	--studio-trait: #e2dad4;
	--studio-gris: #6b6360;

	--studio-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;

	box-sizing: border-box;
	max-width: 1100px;
	margin-inline: auto;
	padding: 3.5rem 1.25rem;
	color: var(--studio-encre);
	font-size: 1rem;
	line-height: 1.6;
}

.studio *,
.studio *::before,
.studio *::after {
	box-sizing: inherit;
}

/* ---- Titres --------------------------------------------------------------- */

.studio-entete {
	max-width: 38rem;
	margin: 0 auto 2.5rem;
	text-align: center;
}

.studio-titre {
	margin: 0;
	font-family: var(--studio-serif);
	font-size: clamp(1.7rem, 4vw, 2.4rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--studio-encre);
	text-wrap: balance;
}

.studio-chapeau {
	margin: 0.9rem 0 0;
	color: var(--studio-gris);
}

.studio-note,
.studio-precision {
	margin-top: 1.5rem;
	color: var(--studio-gris);
	font-size: 0.9rem;
	text-align: center;
}

.studio-vide {
	padding: 2rem 0;
	color: var(--studio-gris);
	text-align: center;
}

/* ---- Boutons -------------------------------------------------------------- */

.studio-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 2rem;
	border: 1px solid var(--studio-encre);
	background: var(--studio-encre);
	color: #fff;
	font: inherit;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.studio-bouton:hover,
.studio-bouton:focus-visible {
	background: transparent;
	color: var(--studio-encre);
}

.studio-bouton--fin {
	padding: 0.6rem 1.3rem;
	border-color: var(--studio-trait);
	background: transparent;
	color: var(--studio-encre);
	white-space: nowrap;
}

.studio-bouton--fin:hover,
.studio-bouton--fin:focus-visible {
	border-color: var(--studio-encre);
	background: var(--studio-encre);
	color: #fff;
}

.studio-lien {
	padding: 0;
	border: 0;
	background: none;
	color: var(--studio-rose-fonce);
	font: inherit;
	font-size: 0.9rem;
	text-decoration: underline;
	cursor: pointer;
}

.studio :focus-visible {
	outline: 2px solid var(--studio-rose-fonce);
	outline-offset: 3px;
}

/* ---- Tarifs et galerie ---------------------------------------------------- */

.studio-grille {
	display: grid;
	gap: 1.5rem;
}

.studio-grille--tarifs {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.studio-grille--galerie {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}

.studio-carte {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--studio-trait);
	background: #fff;
	transition: border-color 0.25s ease, transform 0.25s ease;
}

.studio-carte:hover {
	border-color: var(--studio-rose);
	transform: translateY(-3px);
}

.studio-carte-photo {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--studio-douceur);
}

.studio-carte-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.studio-carte-corps {
	padding: 1.25rem;
}

.studio-carte-ligne {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.studio-carte-titre {
	margin: 0;
	font-family: var(--studio-serif);
	font-size: 1.15rem;
	font-weight: 400;
	color: var(--studio-rose-fonce);
}

.studio-carte-prix {
	font-weight: 600;
	white-space: nowrap;
}

.studio-carte-duree {
	margin: 0.3rem 0 0;
	color: var(--studio-gris);
	font-size: 0.85rem;
	letter-spacing: 0.06em;
}

.studio-carte-texte {
	margin-top: 0.75rem;
	color: var(--studio-gris);
	font-size: 0.94rem;
}

.studio-carte-texte p {
	margin: 0 0 0.6rem;
}

.studio-photo {
	margin: 0;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--studio-douceur);
}

.studio-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.studio-photo:hover img {
	transform: scale(1.04);
}

/* ---- Mouvement, discret --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.studio *,
	.studio *::before,
	.studio *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ---- Téléphone ------------------------------------------------------------ */

@media (max-width: 40rem) {
	.studio {
		padding: 2.5rem 1rem;
	}

	/* Un horaire par ligne : c'est la cible qu'on vise avec le pouce, elle a
	   droit à toute la largeur. */
	.studio-heures {
		grid-template-columns: 1fr;
	}

	.studio-jour-titre {
		padding: 0.9rem 1rem;
	}

	.studio-jour-nom {
		font-size: 1.05rem;
	}

	/* Les cases de l'agenda se répartissent la largeur au lieu de laisser un
	   vide à droite : plus grandes, donc plus faciles à viser. */
	.studio-creneau-bouton {
		flex: 1 1 4.6rem;
	}
}

/* ---- Sections : un fond sur deux ------------------------------------------
   Sans cela, toutes les sections se suivent sur le même crème et la page
   paraît plate. Le motif est en dégradés CSS : aucune image à charger.
   -------------------------------------------------------------------------- */

.studio {
	position: relative;

	/* L'en-tête du thème est collant : sans cette marge, une ancre du menu
	   amène la section pile sous l'en-tête, qui en mange le titre. */
	scroll-margin-top: 6rem;
}

.studio--teinte {
	background: var(--studio-douceur);

	/* Le fond va jusqu'aux bords de l'écran alors que le contenu reste centré.
	   L'ombre portée d'une taille démesurée peint tout l'espace latéral, et le
	   rognage l'empêche de déborder en haut et en bas. Sans ça, la teinte
	   s'arrêterait à la largeur du contenu et formerait un rectangle qui a
	   l'air d'une erreur. */
	box-shadow: 0 0 0 100vmax var(--studio-douceur);
	clip-path: inset(0 -100vmax);
}

/* Fin filet décoratif sous le titre de section : un détail, mais c'est ce
   genre de détail qui sépare « correct » de « soigné ». */
.studio-entete::after {
	content: "";
	display: block;
	width: 3rem;
	height: 1px;
	margin: 1.25rem auto 0;
	background: var(--studio-rose);
}

/* ---- Infos pratiques (accordéon) -------------------------------------------
   Replié par défaut : ces règles sont nécessaires mais peu engageantes, elles
   ne doivent pas être la première chose qu'on lit. Le marqueur natif est
   remplacé par un signe + / − pour rester dans le ton du reste.
   -------------------------------------------------------------------------- */

.studio-infos {
	max-width: 44rem;
	margin-inline: auto;
}

.studio-info {
	border-bottom: 1px solid var(--studio-trait);
	background: transparent;
}

.studio-info:first-of-type {
	border-top: 1px solid var(--studio-trait);
}

.studio-info-titre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.1rem 0.25rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	transition: color 0.2s ease;
}

/* Le triangle par défaut de Safari et de Chrome doit être retiré des deux
   façons : chacun utilise son propre sélecteur. */
.studio-info-titre::-webkit-details-marker {
	display: none;
}

.studio-info-titre::marker {
	content: "";
}

.studio-info-titre::after {
	content: "+";
	flex-shrink: 0;
	color: var(--studio-rose-fonce);
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1;
	transition: transform 0.2s ease;
}

.studio-info[open] .studio-info-titre::after {
	content: "−";
}

.studio-info-titre:hover,
.studio-info[open] .studio-info-titre {
	color: var(--studio-rose-fonce);
}

.studio-info-corps {
	padding: 0 0.25rem 1.3rem;
	color: var(--studio-gris);
}

.studio-info-corps p {
	margin: 0 0 0.8rem;
}

.studio-info-corps p:last-child {
	margin-bottom: 0;
}

.studio-info-corps ul {
	margin: 0 0 0.8rem;
	padding-left: 1.2rem;
}

.studio-info-corps li {
	margin-bottom: 0.35rem;
}

/* ---- Date de mise à jour ---------------------------------------------------
   La phrase qui a déclenché tout ce travail : « on ne sait jamais si c'est
   bien à jour ». Une photo Instagram ne peut pas répondre à ça. Cette ligne,
   si — elle mérite d'être visible, pas reléguée en petits caractères.
   -------------------------------------------------------------------------- */

.studio-maj {
	display: inline-block;
	margin: 1.1rem 0 0;
	padding: 0.3rem 0.9rem;
	border-radius: 999px;
	background: #fff;
	color: var(--studio-rose-fonce);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
}

/* ---- Les jours, dépliables -------------------------------------------------
   Un jour se déplie, ses horaires apparaissent. Construit avec <details> :
   l'ouverture est gérée par le navigateur, sans une ligne de JavaScript, et
   les lecteurs d'écran le comprennent nativement.
   -------------------------------------------------------------------------- */

.studio-jours {
	display: grid;
	gap: 0.65rem;
	max-width: 42rem;
	margin-inline: auto;
}

.studio-jour {
	border: 1px solid var(--studio-trait);
	background: #fff;
}

.studio-jour-titre {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	cursor: pointer;
	list-style: none;
}

.studio-jour-titre::-webkit-details-marker {
	display: none;
}

.studio-jour-nom {
	font-family: var(--studio-serif);
	font-size: 1.15rem;
	/* La première lettre d'un nom de jour arrive en minuscule de PHP. */
	text-transform: capitalize;
}

.studio-jour-compte {
	color: var(--studio-gris);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.studio-jour[open] .studio-jour-titre {
	border-bottom: 1px solid var(--studio-trait);
}

/* ---- Les horaires ----------------------------------------------------------
   De vraies cibles de doigt : 56 px de haut, pleine largeur sur téléphone.
   C'est le seul bouton qui compte de toute la page.
   -------------------------------------------------------------------------- */

.studio-heures {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 1rem 1.25rem 1.25rem;
	list-style: none;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}

.studio-heure {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 56px;
	padding: 0.7rem 1rem;
	border: 1px solid var(--studio-trait);
	text-decoration: none;
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.studio-heure--libre {
	background: #fff;
	color: var(--studio-encre);
	/* Un liseré dans la couleur de l'application qui va s'ouvrir. C'est le
	   seul endroit de la page où l'on part ailleurs : ça se signale. */
	border-left: 3px solid var(--studio-rose);
}

.studio-heure--libre:hover,
.studio-heure--libre:focus-visible {
	border-color: var(--studio-encre);
	transform: translateY(-1px);
}

.studio-heure--libre:hover::before {
	border-color: var(--studio-encre);
}

.studio-heure-valeur {
	font-size: 1.15rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.studio-heure-note {
	color: inherit;
	font-size: 0.85rem;
	opacity: 0.7;
}

/* Le nom de l'application qui va s'ouvrir, dans sa couleur. On doit savoir où
   l'on va avant d'appuyer — c'est la moindre des politesses quand on quitte le
   site, et ça fait lire le créneau comme un bouton plutôt qu'une étiquette. */
.studio-heure-canal {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-left: auto;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--studio-rose-fonce);
}

.studio-heure-canal::after {
	content: "→";
	font-weight: 400;
	letter-spacing: 0;
}

/* Au survol, la carte devient le bouton qu'elle était déjà : le liseré et le
   nom de l'application doivent rester lisibles sur le fond sombre. */
.studio-heure--libre:hover .studio-heure-canal,
.studio-heure--libre:focus-visible .studio-heure-canal {
	color: #fff;
}

/* Un créneau pris reste affiché. C'est ce que ses photos Instagram disaient
   sans le vouloir : elle travaille, c'est demandé. */
.studio-heure--pris {
	background: transparent;
	border-style: dashed;
	color: var(--studio-gris);
}

.studio-heure--pris .studio-heure-valeur {
	font-weight: 500;
	text-decoration: line-through;
}

.studio-heure-etat {
	margin-left: auto;
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ---- Les autres moyens de la joindre --------------------------------------- */

.studio-autres {
	margin: 1.75rem 0 0;
	color: var(--studio-gris);
	font-size: 0.92rem;
	text-align: center;
}

.studio-autres .studio-lien {
	margin-left: 0.5rem;
}

.studio-replis-bouton {
	margin-top: 1.25rem;
	text-align: center;
}

/* =============================================================================
   « Mon agenda » — l'écran privé de la professionnelle
   -----------------------------------------------------------------------------
   Une page normale du site, à poser sur l'écran d'accueil du téléphone. Elle
   la consulte debout, entre deux clientes : tout doit se faire d'un pouce, et
   chaque appui doit se voir tout de suite.
   ========================================================================== */

.studio-agenda .studio-entete {
	margin-bottom: 1.5rem;
}

/* Le séparateur de semaine : un mois d'affilée est un mur, et « je travaille
   quand » se pense par semaine. */
.studio-agenda-semaine {
	margin: 1.75rem 0 0.2rem;
	color: var(--studio-gris);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.studio-agenda-semaine:first-child {
	margin-top: 0;
}

.studio-agenda-jours {
	display: grid;
	gap: 0.6rem;
	max-width: 42rem;
	margin-inline: auto;
}

.studio-agenda-jour {
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--studio-trait);
	background: #fff;
}

/*
 * Le samedi ne se distingue plus du reste de la semaine.
 *
 * Un fond différent disait « ce jour-là n'est pas comme les autres » — or
 * pour elle c'est un jour de travail ordinaire, et souvent le plus chargé.
 * La seule distinction qui reste est celle qui sert : ouvert ou fermé.
 */

.studio-agenda-date {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 0.7rem;
}

/* Le bouton de journée entière : discret mais toujours au même endroit, sous
   la date. Trois appuis deviennent un. */
.studio-agenda-journee {
	margin: -0.35rem 0 0.7rem;
}

.studio-journee-bouton {
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--studio-trait);
	border-radius: 999px;
	background: transparent;
	color: var(--studio-rose-fonce);
	font: inherit;
	font-size: 0.78rem;
	cursor: pointer;
}

.studio-journee-bouton:hover,
.studio-journee-bouton:focus-visible {
	border-color: var(--studio-rose-fonce);
}

/* Un jour de fermeture : présent, mais visiblement en retrait. Le masquer
   empêcherait d'y ouvrir un horaire exceptionnel. */
.studio-agenda-jour--ferme {
	background: transparent;
	border-style: dashed;
}

.studio-agenda-jour--ferme .studio-agenda-nom {
	color: var(--studio-gris);
	font-weight: 500;
}

.studio-agenda-ferme {
	margin: 0;
	color: var(--studio-gris);
	font-size: 0.85rem;
}

.studio-agenda-nom {
	font-weight: 600;
	text-transform: capitalize;
}

.studio-agenda-compte {
	color: var(--studio-gris);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.studio-agenda-cases {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

/* Le bouton unique. Trois apparences pour trois états, assez différentes pour
   être lues d'un coup d'œil sans lire le mot. */
.studio-creneau-bouton {
	min-width: 4.6rem;
	min-height: 48px;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--studio-trait);
	background: #fff;
	color: var(--studio-gris);
	font: inherit;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.studio-creneau-bouton--libre {
	border-color: var(--studio-encre);
	background: var(--studio-encre);
	color: #fff;
	font-weight: 600;
}

.studio-creneau-bouton--reserve {
	border-color: var(--studio-rose);
	background: var(--studio-douceur);
	color: var(--studio-rose-fonce);
	text-decoration: line-through;
}

.studio-creneau-bouton:disabled {
	opacity: 0.55;
	cursor: progress;
}

.studio-agenda-autre {
	margin-top: 0.7rem;
	color: var(--studio-gris);
	font-size: 0.85rem;
}

.studio-agenda-autre summary {
	display: inline-block;
	padding: 0.3rem 0.75rem;
	border: 1px dashed var(--studio-trait);
	border-radius: 999px;
	cursor: pointer;
	font-size: 0.78rem;
	list-style: none;
}

.studio-agenda-autre summary::-webkit-details-marker {
	display: none;
}

.studio-agenda-autre summary:hover {
	border-color: var(--studio-rose);
	border-style: solid;
}

.studio-agenda-autre form {
	display: flex;
	gap: 0.5rem;
	margin: 0.6rem 0 0;
}

.studio-agenda-autre input {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	padding: 0.5rem 0.8rem;
	border: 1px solid var(--studio-trait);
	background: #fff;
	color: var(--studio-encre);
	font: inherit;
}

.studio-agenda-autre .studio-precision {
	margin-top: 0.6rem;
	text-align: left;
}

/* Quand l'enregistrement échoue — réseau coupé dans le métro, par exemple —
   on le dit plutôt que de laisser croire que c'est passé. */
.studio-agenda-panne::after {
	content: "Enregistrement impossible : vérifiez votre connexion.";
	display: block;
	width: 100%;
	margin-top: 0.5rem;
	color: #8d312a;
	font-size: 0.82rem;
}

/* ---- Le formulaire de demande ---------------------------------------------
   La liste des créneaux EST le formulaire : chaque horaire est un bouton
   radio déguisé. Le vrai bouton reste dans le flux pour les lecteurs
   d'écran et la navigation au clavier — il est seulement rendu invisible.
   -------------------------------------------------------------------------- */

.studio-heure input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Un repère de sélection, à gauche de l'heure. Sans lui, les créneaux
   ressemblent à des cartes décoratives et rien ne dit qu'il faut en choisir
   un — la visiteuse remplit le formulaire et l'envoi est refusé. */
.studio-heure--libre::before {
	content: "";
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	border: 1px solid var(--studio-rose);
	border-radius: 50%;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.studio-heure--libre:has( input:checked ) {
	border-color: var(--studio-encre);
	background: var(--studio-encre);
	color: #fff;
}

.studio-heure--libre:has( input:checked )::before {
	border-color: #fff;
	box-shadow: inset 0 0 0 3px var(--studio-encre), inset 0 0 0 1rem #fff;
}

.studio-heure--libre:has( input:focus-visible ) {
	outline: 2px solid var(--studio-rose-fonce);
	outline-offset: 3px;
}

.studio-champs {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.studio-champs,
.studio-demande-formulaire .studio-champ {
	max-width: 42rem;
	margin-inline: auto;
}

.studio-champs {
	margin-top: 1.75rem;
}

.studio-champ {
	margin: 1rem auto 0;
}

.studio-champ label {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--studio-gris);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.studio-facultatif {
	text-transform: none;
	letter-spacing: 0;
}

.studio-champ input,
.studio-champ textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--studio-trait);
	background: #fff;
	color: var(--studio-encre);
	font: inherit;
}

.studio-champ textarea {
	min-height: 5rem;
	resize: vertical;
}

/* Champ piège : invisible pour une visiteuse, rempli par les robots. Il reste
   dans le flux — display:none le ferait ignorer par certains d'entre eux. */
.studio-piege {
	position: absolute;
	left: -9999px;
}

.studio-consentement {
	max-width: 42rem;
	margin: 1.25rem auto 0;
	color: var(--studio-gris);
	font-size: 0.9rem;
}

.studio-consentement label {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	cursor: pointer;
}

.studio-consentement input {
	margin-top: 0.25rem;
	width: 1.1rem;
	height: 1.1rem;
	flex: none;
}

.studio-envoi {
	margin-top: 1.5rem;
	text-align: center;
}

/* ---- Le bandeau de retour -------------------------------------------------- */

.studio-bandeau {
	max-width: 42rem;
	margin: 0 auto 2rem;
	padding: 1.1rem 1.4rem;
	border-left: 3px solid var(--studio-rose-fonce);
	background: #fff;
	text-align: center;
}

.studio-bandeau--erreur {
	border-left-color: #b3453c;
	color: #8d312a;
}

.studio-bandeau-texte {
	margin: 0;
	font-weight: 500;
}

.studio-bandeau-plus {
	margin: 1rem 0 0;
}

.studio-bandeau-plus .studio-precision {
	display: block;
	margin-top: 0.5rem;
}

/* ---- Les blocs de l'agenda -------------------------------------------------
   Un bloc par métier : ce qu'on doit décider, ce qui est prévu, ce qu'on
   propose. Les mélanger était l'erreur d'avant.
   -------------------------------------------------------------------------- */

/* ---- Les trois blocs --------------------------------------------------------
   Trois choses différentes : ce qui attend une réponse, ce qui est prévu, ce
   qui se règle. Elles se suivaient sans qu'on voie où l'une finissait — « fait
   des vrais espaces bien distincts ». Chacune est donc maintenant posée sur
   sa propre surface, avec son titre en bandeau et de l'air autour.
   -------------------------------------------------------------------------- */

.studio-bloc {
	max-width: 42rem;
	margin: 0 auto 3.5rem;
	border: 1px solid var(--studio-trait);
	background: #fff;
}

/* Le dernier bloc n'a pas besoin de pousser le pied de page. */
.studio-bloc:last-of-type {
	margin-bottom: 1.5rem;
}

.studio-bloc-titre {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--studio-trait);
	background: var(--studio-douceur);
	font-family: var(--studio-serif);
	font-size: 1.3rem;
	font-weight: 400;
}

/* Le contenu du bloc, à l'intérieur de sa surface. */
.studio-bloc > :not(.studio-bloc-titre) {
	margin-left: 1.25rem;
	margin-right: 1.25rem;
}

.studio-bloc > :not(.studio-bloc-titre):first-of-type {
	margin-top: 1.25rem;
}

.studio-bloc > :last-child {
	margin-bottom: 1.25rem;
}

/*
 * Le bloc des demandes porte la seule chose qui appelle une décision : son
 * bandeau le dit d'un ton plus ferme que les deux autres.
 */
#studio-demandes .studio-bloc-titre {
	background: var(--studio-rose-fonce);
	color: #fff;
}

#studio-demandes .studio-pastille-compte {
	background: #fff;
	color: var(--studio-rose-fonce);
}

.studio-pastille-compte {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6rem;
	height: 1.6rem;
	padding: 0 0.4rem;
	border-radius: 999px;
	background: var(--studio-rose-fonce);
	color: #fff;
	font-family: system-ui, sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
}

.studio-bloc-vide {
	margin: 0;
	padding: 1.1rem 1.25rem;
	border: 1px dashed var(--studio-trait);
	color: var(--studio-gris);
}

/* ---- Le sommaire ------------------------------------------------------------
   Où elle en est, en une ligne, avant tout le reste : deux chiffres et l'heure
   du prochain rendez-vous. C'est ce qu'on veut savoir en ouvrant l'écran, et
   ce qui manquait — il fallait faire défiler trois blocs pour le reconstituer.
   -------------------------------------------------------------------------- */

.studio-sommaire {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem;
	margin: 0 0 1.75rem;
}

.studio-sommaire-case {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--studio-trait);
	background: #fff;
	color: inherit;
	text-decoration: none;
}

.studio-sommaire-case:hover,
.studio-sommaire-case:focus-visible {
	border-color: var(--studio-rose-fonce);
}

/* Tant qu'il reste une demande sans réponse, elle se voit d'un coup d'œil. */
.studio-sommaire-case--urgent {
	border-color: var(--studio-rose-fonce);
	background: var(--studio-douceur);
}

.studio-sommaire-nombre {
	font-family: var(--studio-serif);
	font-size: 1.7rem;
	line-height: 1;
	color: var(--studio-rose-fonce);
}

.studio-sommaire-mot {
	font-size: 0.82rem;
	line-height: 1.3;
	color: var(--studio-gris);
}

.studio-sommaire-prochain {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0;
	padding: 0.7rem 1rem;
	border: 1px solid var(--studio-trait);
	background: #fff;
	font-size: 0.95rem;
}

.studio-sommaire-etiquette {
	font-family: system-ui, sans-serif;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--studio-rose-fonce);
}

/* ---- Les rendez-vous, groupés par journée -----------------------------------
   Une suite de fiches à la file ne se lit pas comme un emploi du temps : on ne
   voit pas qu'il y a deux personnes le même jour, ni où s'arrête une journée.
   -------------------------------------------------------------------------- */

.studio-rdv-journee + .studio-rdv-journee {
	margin-top: 1.4rem;
}

.studio-rdv-journee-titre {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0 0 0.6rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--studio-trait);
}

.studio-rdv-journee-nom {
	font-family: system-ui, sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--studio-encre);
}

.studio-rdv-journee--aujourdhui .studio-rdv-journee-nom {
	color: var(--studio-rose-fonce);
}

.studio-rdv-journee-compte {
	font-size: 0.8rem;
	color: var(--studio-gris);
}

.studio-bloc-aide {
	margin: -0.4rem 0 0.9rem;
	color: var(--studio-gris);
	font-size: 0.9rem;
}

.studio-demandes,
.studio-rdv-liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Les fiches ne portent plus de cadre à elles.
 *
 * Le bloc leur en donne déjà un ; en remettre un par fiche faisait un double
 * encadrement, et sur un téléphone les deux marges mangeaient la place du
 * texte — les boutons passaient à la ligne un par un. Un filet entre deux
 * fiches suffit à dire où l'une s'arrête.
 */
.studio-demande,
.studio-rdv-ligne {
	padding: 1.2rem 0;
}

.studio-demande + .studio-demande,
.studio-rdv-ligne + .studio-rdv-ligne {
	border-top: 1px solid var(--studio-trait);
}

/* Une demande à traiter doit se distinguer d'un rendez-vous déjà pris. */
.studio-demande {
	padding-left: 0.9rem;
	border-left: 3px solid var(--studio-rose-fonce);
}

.studio-demande-qui {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.8rem;
	margin: 0;
}

.studio-demande-nom {
	font-size: 1.1rem;
	font-weight: 600;
}

.studio-demande-quand {
	color: var(--studio-gris);
	font-size: 0.9rem;
}

.studio-demande-message {
	margin: 0.6rem 0 0;
	color: var(--studio-gris);
	font-size: 0.94rem;
}

/* Les moyens de répondre : de vraies pastilles, dans la couleur de chaque
   application. C'est le geste attendu, il doit sauter aux yeux. */
.studio-demande-canaux {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin: 0.9rem 0 0;
}

.studio-demande-mot {
	color: var(--studio-gris);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.studio-puce {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--studio-trait);
	border-radius: 999px;
	color: var(--studio-encre);
	font-size: 0.85rem;
	text-decoration: none;
}

.studio-puce:hover,
.studio-puce:focus-visible {
	border-color: currentcolor;
}

.studio-puce--email,
.studio-puce--sms,
.studio-puce--tel {
	color: var(--studio-rose-fonce);
}

.studio-demande-decisions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--studio-trait);
}

/* ---- L'horaire qui porte un rendez-vous ------------------------------------
   Ce n'est plus un bouton : c'est une information. On y lit le prénom, et on
   ne peut pas le changer d'un appui distrait.
   -------------------------------------------------------------------------- */

.studio-creneau-heure {
	display: block;
	font-variant-numeric: tabular-nums;
}

.studio-creneau-qui {
	display: block;
	margin-top: 0.1rem;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

span.studio-creneau-bouton {
	cursor: default;
}

/* ---- La fiche d'une personne ----------------------------------------------
   Tout ce qu'il faut savoir sans chercher ailleurs : quand, qui, comment la
   joindre, ce qu'elle demande, et ce qu'on a noté soi-même. C'est la fiche
   qu'on rouvre trois semaines plus tard.
   -------------------------------------------------------------------------- */

.studio-fiche-quand {
	margin: 0;
	color: var(--studio-rose-fonce);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.studio-fiche-nom {
	margin: 0.25rem 0 0;
	font-family: var(--studio-serif);
	font-size: 1.4rem;
	line-height: 1.2;
}

/* Le numéro est cliquable : on appelle sans le recopier, et c'est le geste le
   plus courant quand une cliente est en retard. */
.studio-fiche-contacts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 1rem;
	margin: 0.45rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.95rem;
}

.studio-fiche-contacts a {
	color: var(--studio-encre);
	text-decoration: underline;
	text-decoration-color: var(--studio-rose);
	text-underline-offset: 3px;
}

.studio-fiche-message {
	margin: 0.8rem 0 0;
	padding: 0.65rem 0.9rem;
	border-left: 2px solid var(--studio-trait);
	color: var(--studio-gris);
	font-size: 0.95rem;
}

.studio-fiche-note {
	margin: 0.6rem 0 0;
	padding: 0.65rem 0.9rem;
	background: var(--studio-douceur);
	font-size: 0.95rem;
}

.studio-fiche-etiquette {
	display: block;
	color: var(--studio-rose-fonce);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.studio-fiche-ajout {
	margin-top: 0.8rem;
	font-size: 0.88rem;
}

.studio-fiche-ajout summary {
	color: var(--studio-rose-fonce);
	cursor: pointer;
}

.studio-fiche-ajout textarea {
	width: 100%;
	min-height: 4rem;
	margin: 0.6rem 0;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--studio-trait);
	background: #fff;
	color: inherit;
	font: inherit;
	font-size: 0.95rem;
	resize: vertical;
}

.studio-fiche-ajout .studio-precision {
	margin-top: 0.6rem;
	text-align: left;
}

/* Une demande restée sans réponse alors que son créneau est passé. Elle ne
   disparaît jamais toute seule : une cliente qu'on n'a jamais rappelée, c'est
   un rendez-vous perdu et quelqu'un de vexé. */
.studio-demande--retard {
	border-left-color: #b3453c;
}

.studio-demande-retard {
	margin: 0 0 0.6rem;
	color: #8d312a;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Le rendez-vous du jour : c'est celui qu'on cherche en ouvrant l'écran. */
.studio-rdv-ligne--aujourdhui {
	padding-left: 0.9rem;
	border-left: 3px solid var(--studio-encre);
}

.studio-rdv-aujourdhui {
	margin: 0 0 0.5rem;
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--studio-encre);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.studio-pastille-compte--calme {
	background: var(--studio-trait);
	color: var(--studio-encre);
}

/* ---- Ouvrir un jour de fermeture ------------------------------------------- */

.studio-agenda-exception {
	margin-top: 1.5rem;
	padding: 0.9rem 1.1rem;
	border: 1px dashed var(--studio-trait);
	font-size: 0.9rem;
}

.studio-agenda-exception summary {
	color: var(--studio-rose-fonce);
	cursor: pointer;
}

.studio-exception-champs {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem;
	margin-top: 0.9rem;
}

.studio-exception-champs .studio-champ {
	margin: 0;
	max-width: none;
}

.studio-exception-champs input {
	min-height: 44px;
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--studio-trait);
	background: #fff;
	color: inherit;
	font: inherit;
}

.studio-exception-champs p {
	margin: 0;
}

.studio-exception-champs .studio-precision {
	text-align: left;
}

/* Le champ d'horaire du « + autre horaire » : un vrai sélecteur d'heure. */
.studio-agenda-autre input[type="time"] {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	padding: 0.5rem 0.8rem;
	border: 1px solid var(--studio-trait);
	background: #fff;
	color: var(--studio-encre);
	font: inherit;
}

/* =============================================================================
   L'annonce — congés, déménagement, promotion du mois
   -----------------------------------------------------------------------------
   Trois états, et le premier est celui qui compte : **sans JavaScript**, c'est
   une carte ordinaire dans la page. L'information passe, rien ne bloque la
   lecture, et aucun bouton ne promet une action impossible.

   Avec JavaScript : une fenêtre centrée à la première visite, puis une pastille
   en bas de l'écran qu'un appui rouvre.

   Le texte est centré et la carte reste étroite — une annonce, ce sont deux
   phrases qu'on lit d'un coup d'œil, pas un paragraphe qu'on parcourt. C'est la
   même mise en page que les en-têtes de section du site, filet rose compris :
   la fenêtre doit avoir l'air de venir du site, pas d'un module ajouté dessus.
   ========================================================================== */

.studio-annonce {
	/*
	 * Les variables sont posées sur `.studio`, et l'annonce est en pied de
	 * page — donc hors de toute section `.studio`. Sans cette redéclaration
	 * elle hériterait de rien : texte sans couleur sur fond sans couleur.
	 * C'est exactement le défaut qui avait rendu invisibles les cases cochées
	 * de l'administration.
	 */
	--studio-encre: #1c1a19;
	--studio-fond: #faf7f4;
	--studio-douceur: #f0e7e2;
	--studio-rose: #d6988f;
	--studio-rose-fonce: #965852;
	--studio-trait: #e2dad4;
	--studio-gris: #6b6360;

	--studio-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;

	box-sizing: border-box;
	max-width: 42rem;
	margin: 2rem auto;
	padding: 0 1.25rem;
	color: var(--studio-encre);
	font-size: 1rem;
	line-height: 1.6;
}

.studio-annonce *,
.studio-annonce *::before,
.studio-annonce *::after {
	box-sizing: inherit;
}

.studio-annonce :focus-visible {
	outline: 2px solid var(--studio-rose-fonce);
	outline-offset: 3px;
}

/* La boîte reçoit le focus à l'ouverture pour que le clavier y entre : ce
   n'est pas un contrôle, elle n'a donc pas à porter un cadre de mise au
   point. Les boutons qu'elle contient gardent le leur. */
.studio-annonce-boite:focus {
	outline: none;
}

.studio-annonce-boite {
	position: relative;
	padding: 2.25rem 2rem;
	border: 1px solid var(--studio-trait);
	background: var(--studio-fond);
	text-align: center;
}

/* Un liseré rose en haut de la carte : c'est la seule couleur franche de la
   palette, et elle suffit à signer l'ensemble sans le charger. */
.studio-annonce-boite::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: linear-gradient(90deg, var(--studio-rose), var(--studio-rose-fonce));

	/* Le liseré suit les coins de la carte. Sans cela il dépasse en pointes
	   carrées de part et d'autre du sommet arrondi — deux pixels qui suffisent
	   à faire négligé. `overflow: hidden` sur la carte les rognerait aussi,
	   mais rognerait du même coup le cadre de mise au point des boutons. */
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
}

.studio-annonce-titre {
	margin: 0;
	font-family: var(--studio-serif);
	font-size: clamp(1.3rem, 4vw, 1.6rem);
	font-weight: 400;
	line-height: 1.25;
	text-wrap: balance;
}

/* Le même filet que sous les titres de section : c'est ce détail-là qui fait
   que la fenêtre appartient au site. */
.studio-annonce-titre::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 1px;
	margin: 1rem auto 0;
	background: var(--studio-rose);
}

.studio-annonce-texte {
	max-width: 26rem;
	margin: 1rem auto 0;
	color: var(--studio-gris);
	text-wrap: pretty;
}

.studio-annonce-gestes {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	margin: 1.75rem 0 0;
}

.studio-annonce-gestes:empty,
.studio-annonce-gestes:not(:has(> :not([hidden]))) {
	display: none;
}

/* ---- Ouverte : la fenêtre ------------------------------------------------ */

.studio-annonce--ouverte {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: none;
	margin: 0;
	padding: 1.5rem;
	background: rgba(28, 26, 25, 0.5);
	overflow-y: auto;

	/* Le voile se pose, il n'apparaît pas d'un coup : une fenêtre qui surgit
	   fait sursauter et se ferme par réflexe, avant d'avoir été lue. */
	animation: studio-annonce-voile 0.25s ease both;
}

.studio-annonce--ouverte .studio-annonce-boite {
	max-width: 27rem;
	width: 100%;
	padding: 2.5rem 2rem 2.25rem;
	border-color: transparent;
	box-shadow: 0 1.5rem 3.5rem rgba(28, 26, 25, 0.28);
	animation: studio-annonce-entree 0.35s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

@keyframes studio-annonce-voile {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes studio-annonce-entree {
	from { opacity: 0; transform: translateY(0.9rem) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

/* ---- Repliée : le rappel discret ----------------------------------------
   L'annonce est posée en pied de page : repliée en place, elle se retrouverait
   tout en bas du document, là où personne ne va. Elle est donc épinglée au bas
   de l'écran — une pastille d'une ligne, qui ne couvre presque rien et qu'on
   rouvre d'un appui. L'information reste disponible sans barrer le passage.
   -------------------------------------------------------------------------- */

.studio-annonce--repliee {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 9998;
	width: auto;
	max-width: min(100%, 26rem);
	margin: 0;
	padding: 0 0 env(safe-area-inset-bottom) 0;
	cursor: pointer;
}

.studio-annonce--repliee .studio-annonce-boite {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 0.15rem 0.6rem;
	padding: 0.55rem 1.1rem;
	border-left: 0;
	border-bottom: 0;
	border-top-right-radius: 0.4rem;
	box-shadow: 0 -0.25rem 1rem rgba(28, 26, 25, 0.12);
	font-size: 0.9rem;
	text-align: left;
}

.studio-annonce--repliee .studio-annonce-boite::before {
	inset: 0 0 auto;
	height: 2px;
}

.studio-annonce--repliee .studio-annonce-titre {
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Repliée, on ne garde que le titre : le reste se rouvre d'un appui. Un
   paragraphe tronqué au milieu d'un mot ne renseigne personne. */
.studio-annonce--repliee .studio-annonce-titre::after,
.studio-annonce--repliee .studio-annonce-texte,
.studio-annonce--repliee .studio-annonce-gestes {
	display: none;
}

.studio-annonce--repliee .studio-annonce-boite::after {
	content: "lire";
	flex: 0 0 auto;
	color: var(--studio-rose-fonce);
	font-size: 0.8rem;
	text-decoration: underline;
}

/* ---- Téléphone ------------------------------------------------------------
   La fenêtre remonte du bas comme une feuille : c'est le geste attendu sur un
   téléphone, et le pouce tombe sur les boutons sans traverser l'écran.
   -------------------------------------------------------------------------- */

@media (max-width: 40rem) {
	.studio-annonce--ouverte {
		align-items: flex-end;
		padding: 0;
	}

	.studio-annonce--ouverte .studio-annonce-boite {
		max-width: none;
		padding: 2.25rem 1.5rem calc(2rem + env(safe-area-inset-bottom));
		border-top-left-radius: 0.75rem;
		border-top-right-radius: 0.75rem;
		animation-name: studio-annonce-feuille;
	}

	/* Les gestes prennent toute la largeur : une cible pleine largeur se vise
	   sans regarder. */
	.studio-annonce--ouverte .studio-bouton {
		width: 100%;
	}
}

@keyframes studio-annonce-feuille {
	from { transform: translateY(100%); }
	to   { transform: none; }
}

/* Une animation d'entrée est un agrément, jamais une condition : si elle est
   refusée, la fenêtre est simplement là. */
@media (prefers-reduced-motion: reduce) {
	.studio-annonce--ouverte,
	.studio-annonce--ouverte .studio-annonce-boite {
		animation-duration: 0.01ms;
	}
}

/* =============================================================================
   Le bandeau de démonstration
   -----------------------------------------------------------------------------
   Un site de démonstration est un vrai site : il est en ligne, et son
   formulaire recueille de vrais prénoms et de vrais numéros. Ce bandeau est là
   pour que personne n'attende un rendez-vous qui ne viendra pas.

   Discret et fixe en bas : lisible sans couvrir le travail qu'on est venu
   juger. Il ne se ferme pas — une démonstration qu'on peut faire taire cesse
   d'en être une.
   ========================================================================== */

/*
 * `sticky` et non `fixed`.
 *
 * Fixé, le ruban flottait au-dessus de la page et masquait en permanence la
 * dernière ligne du pied de page — mentions légales comprises, ce qui est
 * exactement ce qu'il ne faut pas cacher. Collant, il reste visible pendant
 * qu'on fait défiler **et** reprend sa place à la fin du document : il réserve
 * sa propre hauteur, sans qu'on ait à la deviner quelque part en marge
 * intérieure.
 */
.studio-demo-ruban {
	position: sticky;
	bottom: 0;
	z-index: 9997;
	margin: 0;
	padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom));
	background: #1c1a19;
	color: #f0e7e2;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 0.8rem;
	line-height: 1.4;
	text-align: center;
}

.studio-demo-mot {
	display: inline-block;
	margin-right: 0.5rem;
	padding: 0.1rem 0.5rem;
	background: #d6988f;
	color: #1c1a19;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/*
 * La pastille d'annonce repliée vit au même bord de l'écran.
 *
 * On ne la décale pas d'une hauteur devinée : sur un téléphone étroit le
 * ruban passe à deux lignes, et la valeur choisie est fausse. Elle change donc
 * de bord — deux messages sur deux bords opposés ne peuvent pas se recouvrir,
 * quelle que soit la largeur.
 */
body:has(.studio-demo-ruban) .studio-annonce--repliee {
	top: 0;
	bottom: auto;
	padding: 0;
}

body:has(.studio-demo-ruban) .studio-annonce--repliee .studio-annonce-boite {
	border-top: 0;
	border-bottom: 1px solid var(--studio-trait);
	border-top-right-radius: 0;
	border-bottom-right-radius: 0.4rem;
	box-shadow: 0 0.25rem 1rem rgba(28, 26, 25, 0.12);
}

.studio-demo-avertissement {
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.1rem;
	border-left: 4px solid #d6988f;
	background: #f0e7e2;
	color: #1c1a19;
}

.studio-demo-avertissement p {
	margin: 0;
}