/**
 * Espace artisan front-end — styles.
 * Redesign « sobre & élégant » : sidebar sombre + contenu clair, accent ambre, Inter.
 */
@import url('https://fonts.bunny.net/css?family=archivo:500,600,700,800|libre-franklin:400,500,600,700|courier-prime:400,700|caveat:500,600&display=swap');

:root {
	/* Monde carnet (espace pro). Palette fixe MT Horizon ; l'accent reste
	   surchargeable par le theme via le contrat --mth-* (lu en repli). */
	--as-bg:            #E7EBDF;
	--as-surface:       #F2F5EB;
	--as-sidebar:       #123A47;
	--as-sidebar-2:     #1D5866;
	--as-on-dark:       #D3DCD9;
	--as-on-dark-faint: #8FA0A0;
	--as-line-2:        #DED8CB;
	--as-ease:       cubic-bezier(.2, .9, .25, 1);
	/* Silhouette de la punaise : definie UNE fois, reprise par tous les marqueurs
	   d'etat (badges, pastilles de colonne, cartes de rendez-vous). Corps seul,
	   l'aiguille est un element a part car elle est metallique. */
	--as-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M12 1.1c-1.9 0-3.2 1.1-3.2 2.4v2.1c0 .5.3 1 .9 1.3-3 1.2-5.1 3.4-5.1 5.8 0 3 3.6 5 7.4 5s7.4-2 7.4-5c0-2.4-2.1-4.6-5.1-5.8.6-.3.9-.8.9-1.3V3.5c0-1.3-1.3-2.4-3.2-2.4z'/%3E%3C/svg%3E");
	--as-shadow:     0 1px 0 rgba(20,30,29,.08), 0 10px 20px -12px rgba(5,13,16,.45);
	/* Variables historiques re-mappees vers la palette carnet (les composants suivent) */
	--sp-navy:    #123A47;
	--sp-navy2:   #1D5866;
	--sp-amber:   #5A2D8A;
	--sp-amber2:  #7B4FB0;
	--sp-amber-soft: #EDE4F6;
	--sp-amber-deep: #4A2470;
	--sp-amber-ring: rgba(90,45,138,.16);
	--sp-on-accent:  #FAF7FD;
	--sp-white:   #F2F5EB;
	--sp-off:     #E7EBDF;
	--sp-gray1:   #F2F5EB;
	--sp-gray2:   #DED8CB;
	--sp-gray3:   #C6CEB9;
	--sp-gray4:   #7C8479;
	--sp-gray5:   #57655F;
	--sp-gray6:   #4B5A55;
	--sp-gray7:   #141E1D;
	--sp-dark:    #0A2731;
	--sp-radius:  4px;
	/* Registre : filet, papier creux, gommettes d'etat */
	--sp-reglure: #79ACC0;
	--sp-page-creuse: #DAE0D0;
	--sp-g-jaune: #EFBB25;
	--sp-g-verte: #2C8A57;
	--sp-g-bleue: #2A6AD2;
	--sp-g-rouge: #DE382D;
}

/* Isolation typographique : les titres de l'espace pro heritent de l'alignement
   de leur conteneur et ignorent un text-align impose par le theme hote
   (sinon les etats vides centres debordent a gauche). */
.as-app :is(h1, h2, h3, h4) { text-align: inherit; font-family: 'Archivo', system-ui, sans-serif; letter-spacing: -.02em; }
/* Registre chiffre : heures, prix, numeros, dates en machine a ecrire tabulaire */
.as-app .chiffre, .as-app .as-fiche__time, .as-app .as-status,
.as-app .as-space-card__value, .as-app .as-space-upcoming__when { font-family: 'Courier Prime', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.as-app :focus-visible { outline: 2px solid var(--sp-amber); outline-offset: 2px; }


/* ── Icônes « line » (SVG inline, héritent de la couleur du texte) ── */
.as-ico {
	width: 1.05em; height: 1.05em;
	display: inline-block; vertical-align: -0.16em;
	flex: 0 0 auto; stroke-width: 2;
}
.as-ico--lg { width: 1.35em; height: 1.35em; vertical-align: -0.28em; }
.as-ico--sm { width: 0.95em; height: 0.95em; }
/* Dans un titre/élément flex, garder l'icône alignée et non étirée. */
h1 .as-ico, h2 .as-ico, h3 .as-ico, .as-eyebrow .as-ico { vertical-align: -0.12em; }

/* ── Conteneur global ── */
.as-space {
	min-height: 60vh;
	font-family: 'Libre Franklin', system-ui, sans-serif;
	color: var(--sp-gray7);
	background: var(--sp-off);
}

/* ── Nav ── */
.as-space-nav {
	background: var(--sp-navy);
	display: flex;
	align-items: center;
	gap: 6px 16px;
	padding: 8px 20px;
	flex-wrap: wrap;
	border-radius: var(--sp-radius) var(--sp-radius) 0 0;
	min-height: 58px;
}
.as-space-nav__logo {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--sp-white);
	font-weight: 700;
	font-size: 1rem;
	margin-right: 8px;
}
.as-space-nav__hammer { font-size: 1.2rem; }
.as-space-nav__tabs {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
	/* Les onglets occupent leur PROPRE rangée, centrée (évite l'enroulement chaotique). */
	flex: 1 1 100%;
	order: 3;
	justify-content: center;
	flex-wrap: wrap;
}
.as-space-nav__tab {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 8px 10px;
	border-radius: 8px;
	text-decoration: none;
	color: rgba(255,255,255,0.6);
	font-size: 0.83rem;
	font-weight: 500;
	transition: color 0.15s, background 0.15s;
	white-space: nowrap;
}
.as-space-nav__tab:hover { color: var(--sp-white); background: rgba(255,255,255,0.07); }
.as-space-nav__tab.is-active { color: var(--sp-amber); background: var(--sp-amber-ring); }
.as-space-nav__tab-icon { font-size: 1rem; }
.as-space-nav__user {
	display: flex;
	align-items: center;
	gap: 10px;
	color: rgba(255,255,255,0.7);
	font-size: 0.82rem;
	margin-left: auto;
}
.as-space-nav__avatar {
	width: 30px; height: 30px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 0.72rem; font-weight: 800;
	color: var(--sp-on-accent);
	flex: 0 0 auto;
}
.as-space-nav__ident { display: flex; flex-direction: column; line-height: 1.15; }
.as-space-nav__username { color: var(--sp-white); font-weight: 700; font-size: 0.85rem; }
.as-space-nav__role { font-size: 0.72rem; font-weight: 600; }

/* Bandeau d'identité sous la nav */
.as-space-identity {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 20px;
	background: var(--sp-white);
	border-bottom: 1px solid var(--sp-gray2);
}
.as-space-identity__avatar {
	width: 44px; height: 44px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 1rem; font-weight: 800;
	color: var(--sp-on-accent);
	flex: 0 0 auto;
}
.as-space-identity__text { display: flex; flex-direction: column; gap: 2px; }
.as-space-identity__hello { font-size: 0.78rem; color: var(--sp-gray5); }
.as-space-identity__name {
	font-size: 1.15rem; font-weight: 800; color: var(--sp-dark);
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.as-space-identity__badge {
	font-size: 0.72rem;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 100px;
	border: 1px solid;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.as-space-nav__logout {
	color: rgba(255,255,255,0.35);
	text-decoration: none;
	font-size: 0.78rem;
	border: 1px solid rgba(255,255,255,0.12);
	padding: 3px 8px;
	border-radius: 6px;
	transition: color 0.15s, border-color 0.15s;
}
.as-space-nav__logout:hover { color: var(--sp-white); border-color: rgba(255,255,255,0.3); }

/* ── Contenu principal ── */
.as-space-main { padding: 24px 20px 40px; }

/* ── Page (wrapper générique) ── */
.as-space-page { max-width: 900px; }

/* ── Header ── */
.as-space-header { margin-bottom: 20px; }
/* En-tête en deux colonnes (titre / bouton) uniquement quand un CTA est présent (onglet RDV). */
.as-space-header:has(.as-space-header__cta){ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.as-space-header__titles { flex:1 1 auto; min-width:0; }
.as-space-header__cta { flex:0 0 auto; white-space:nowrap; }
.as-space-header h1 { font-size: clamp(1.5rem,3vw,2rem); font-weight: 800; color: var(--sp-gray7); margin: 0 0 3px; letter-spacing:-.03em; }
.as-space-subtitle { font-family:'Courier Prime',monospace; font-size: 0.76rem; letter-spacing:.06em; text-transform:uppercase; color: var(--sp-gray5); margin: 0; }

/* ── Alerte ── */
.as-space-alert {
	position: relative;
	display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
	padding: .8rem 1rem;
	background: var(--sp-white);
	border: 1px solid var(--sp-gray3);
	border-radius: var(--sp-radius);
	box-shadow: var(--as-shadow);
	font-size: 0.92rem; font-weight: 500; color: var(--sp-gray7);
	margin: 8px 0 22px;
}
/* Agrafe (maquette) : petit arc metal pose sur le bord haut de la note. */
.as-space-alert::before { content:""; position:absolute; left:16px; top:-9px; width:26px; height:15px; border:2.5px solid var(--as-sidebar-2); border-bottom:0; border-radius:9px 9px 0 0; background:none; box-shadow:none; }
.as-space-alert svg { color: var(--sp-g-jaune); }
.as-space-alert b, .as-space-alert strong { font-family:'Archivo',sans-serif; font-weight:700; }
.as-space-alert a { color: var(--sp-amber); margin-left: auto; font-family:'Archivo',sans-serif; font-weight:700; white-space:nowrap; }

/* ── Cartes stats ── */
/* Compteurs = etiquettes suspendues au rail (cordon + oeillet). */
.as-space-cards {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin-bottom: 26px;
	padding-top: 18px;
}
.as-space-cards::before { content:""; position:absolute; top:0; left:6px; right:6px; height:4px; border-radius:2px; background:linear-gradient(180deg,var(--sp-navy2),var(--sp-navy)); box-shadow:0 1px 2px -1px rgba(0,0,0,.4); }
.as-space-card {
	position: relative;
	background: var(--sp-white);
	border: 1px solid var(--sp-gray3);
	border-radius: var(--sp-radius);
	padding: .85rem .9rem .8rem;
	display: flex; flex-direction: column; gap: 0;
	box-shadow: var(--as-shadow);
}
.as-space-card::before { content:""; position:absolute; top:-16px; left:50%; transform:translateX(-50%); width:1.5px; height:16px; background:var(--sp-navy2); }
.as-space-card::after { content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:9px; height:9px; border-radius:50%; background:var(--sp-dark); box-shadow:inset 0 1px 1px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.4); }
.as-space-card.is-highlight, .as-space-card.is-warn { border-color: var(--sp-gray3); background: var(--sp-white); }
.as-space-card__chip { display: none; }
.as-space-card__value { font-family:'Courier Prime',monospace; font-size: 1.75rem; font-weight: 700; color: var(--sp-gray7); line-height: 1; margin-top: 8px; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.as-space-card__value--sm { font-size: 1.4rem; }
.as-space-card.is-warn .as-space-card__value { color: var(--sp-g-rouge); }
.as-space-card__unit  { font-size: 1rem; font-weight: 700; color: var(--sp-gray5); margin-left: 1px; }
.as-space-card__label { font-family:'Courier Prime',monospace; font-size: 0.62rem; letter-spacing:.06em; text-transform:uppercase; color: var(--sp-gray5); font-weight: 400; margin-top: 5px; }

/* ── Onglet Statistiques (contacts générés) ── */
.as-stats-panel { margin: 0 0 26px; }
.as-stats .as-space-card__chip { background: var(--sp-amber-soft); color: var(--sp-amber); }
.as-stats-hero { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin: 0 0 20px; }
.as-stats-hero__total { display: flex; align-items: baseline; gap: 8px; }
.as-stats-hero__num { font-size: 2.8rem; font-weight: 800; line-height: 1; color: var(--sp-dark); letter-spacing: -0.02em; }
.as-stats-hero__unit { color: var(--sp-gray5); font-weight: 600; }
.as-stats-delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 0.82rem; padding: 5px 11px; border-radius: 999px; }
.as-stats-delta.is-up { color: #16a34a; background: #dcfce7; }
.as-stats-delta.is-down { color: #dc2626; background: #fee2e2; }
.as-stats-chart { background: var(--sp-white); border: 1px solid var(--sp-gray2); border-radius: 14px; padding: 18px 18px 14px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 22px -14px rgba(16,24,40,.16); }
.as-stats-chart__title { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--sp-gray5); margin-bottom: 4px; }
.as-stats-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.as-stats-grid-line { stroke: var(--sp-gray2); stroke-width: 1; }
.as-stats-area { fill: var(--sp-amber); fill-opacity: 0.10; }
.as-stats-line { fill: none; stroke: var(--sp-amber); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.as-stats-dot { fill: var(--sp-white); stroke: var(--sp-amber); stroke-width: 2; }
.as-stats-val { fill: var(--sp-dark); font-weight: 700; font-size: 13px; }
.as-stats-mon { fill: var(--sp-gray5); font-size: 12px; }
.as-stats-note { margin: 14px 0 0; color: var(--sp-gray5); font-size: 0.78rem; line-height: 1.6; }

/* ── Prochaine tournée (dashboard) ── */
.as-space-tour { list-style: none; margin: 0; padding: .5rem 1.1rem 1rem 1.5rem; display: flex; flex-direction: column; position: relative; }
.as-space-tour__stop {
	display: grid; grid-template-columns:auto 1fr; align-items:flex-start; gap:.8rem; padding: .55rem 0 .55rem 1.2rem;
	border-bottom: 0; position: relative;
}
/* Puce (rond) + connecteur pointille par arret : meme axe, connecteur masque sous la puce suivante. */
.as-space-tour__stop::before { content:""; position:absolute; left:0; top:.62rem; width:13px; height:13px; border-radius:50%; background:var(--sp-white); border:2.5px solid var(--sp-amber); z-index:1; }
.as-space-tour__stop:not(:last-child)::after { content:""; position:absolute; left:5.5px; top:calc(.62rem + 6.5px); width:2px; height:100%; background:repeating-linear-gradient(180deg,var(--sp-amber) 0 5px,transparent 5px 11px); }
.as-space-tour__time {
	flex: none; min-width: 42px; font-family:'Courier Prime',monospace; font-weight: 700; font-size: 0.88rem; color: var(--sp-gray7); font-variant-numeric:tabular-nums;
}
.as-space-tour__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.as-space-tour__info strong { font-family:'Archivo',sans-serif; font-weight:700; font-size: 0.9rem; color: var(--sp-gray7); }
.as-space-tour__info span { font-size: 0.8rem; color: var(--sp-gray5); }

/* ── Panneau ── */
.as-space-panel {
	background: var(--sp-white);
	border: 1px solid var(--sp-gray3);
	border-radius: var(--sp-radius);
	padding: 0;
	margin-bottom: 14px;
	box-shadow: 0 2px 0 rgba(20,30,29,.06), 0 18px 34px -22px rgba(5,13,16,.5);
	overflow: hidden;
}
.as-space-panel h2 { font-family:'Archivo',sans-serif; font-size: 1.02rem; font-weight: 800; color: var(--sp-gray7); margin: 0; display: flex; align-items: center; gap: 8px; letter-spacing:-.01em; }
.as-space-panel__head { display: flex; align-items: center; justify-content: space-between; gap:1rem; margin-bottom: 0; padding: .85rem 1.1rem; border-bottom: 2px solid var(--sp-gray7); }
.as-space-panel__head h2 { margin: 0; }
/* Corps du panneau (liste directe apres l'en-tete) : on rembourre. */
.as-space-panel > .as-space-upcoming, .as-space-panel > .as-space-tour { padding: .5rem 1.1rem 1rem; }
.as-space-panel > .as-space-empty { padding: 1rem 1.1rem; }
.as-space-link { font-family:'Archivo',sans-serif; font-size: 0.84rem; color: var(--sp-amber); text-decoration: none; font-weight: 700; white-space:nowrap; }
.as-space-link:hover { text-decoration: underline; }
/* Folio « page N » : numero de page en pied de feuille (registre carnet). */
.as-space-folio { font-family:'Courier Prime',monospace; font-size:.68rem; letter-spacing:.16em; color:var(--sp-gray5); text-align:right; padding:.2rem 1.1rem .7rem; }

/* ── Liste upcoming (cartes type fichette) ── */
/* RDV poses sur la reglure (registre), pas des cartes. */
.as-space-upcoming { list-style: none; margin: 0; padding: .5rem 1.1rem 1rem; display: flex; flex-direction: column; gap: 0; }
.as-space-upcoming__item {
	position: relative;
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding: .7rem .2rem;
	background: transparent;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--sp-reglure) 52%, transparent);
	border-radius: 0;
	box-shadow: none;
	transition: background .15s var(--as-ease);
}
.as-space-upcoming__item:last-child { border-bottom: 0; }
.as-space-upcoming__item:hover { box-shadow: none; transform: none; background: color-mix(in srgb, var(--sp-gray7) 3%, transparent); }
.as-up--pending, .as-up--confirmed, .as-up--done, .as-up--cancelled, .as-up--noshow { border-left: 0; }
/* Le RDV du jour : la ligne écrit déjà « AUJOURD'HUI » sous l'heure. Le dégradé
   qui doublait cette information n'apportait rien et salissait la ligne. */
.as-space-upcoming__item.is-today { border-radius:3px; }
.as-space-upcoming__main { display: flex; align-items: center; gap: 14px; min-width: 0; }
a.as-space-upcoming__main { text-decoration: none; color: inherit; cursor: pointer; }
a.as-space-upcoming__main:hover .as-space-upcoming__info strong { color: var(--sp-amber); }
a.as-space-upcoming__main::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.as-space-upcoming__nav { position: relative; z-index: 1; }
.as-space-upcoming__when { font-family:'Courier Prime',monospace; font-size: 0.9rem; font-weight: 700; color: var(--sp-gray7); white-space: nowrap; flex: none; font-variant-numeric:tabular-nums; }
.as-space-upcoming__when.is-today { color: var(--sp-amber); }
.as-space-upcoming__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.as-space-upcoming__info strong { font-family:'Archivo',sans-serif; font-weight:700; font-size: 0.95rem; color: var(--sp-gray7); }
.as-space-upcoming__info span   { font-size: 0.82rem; color: var(--sp-gray5); }
.as-space-upcoming__side { display: flex; align-items: center; gap: 10px; flex: none; }
.as-space-upcoming__nav svg { width: 15px; height: 15px; }
/* Numero estampe + heure/jour separes + marqueur "en ligne" (registre carnet). */
.as-space-upcoming__stamp { font-family:'Courier Prime',monospace; font-weight:700; font-size:.7rem; color:var(--sp-gray5); border:1.5px solid var(--sp-gray3); border-radius:2px; padding:.15rem .35rem; letter-spacing:.03em; white-space:nowrap; flex:none; align-self:center; }
.as-space-upcoming__when { display:flex; flex-direction:column; gap:0; min-width:54px; flex:none; }
.as-space-upcoming__time { font-family:'Courier Prime',monospace; font-weight:700; font-size:1.02rem; line-height:1.1; color:var(--sp-gray7); font-variant-numeric:tabular-nums; }
.as-space-upcoming__when.is-today .as-space-upcoming__time { color:var(--sp-amber); }
.as-space-upcoming__day { font-family:'Courier Prime',monospace; font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--sp-gray5); }
.as-online-note { font-family:'Courier Prime',monospace; font-size:.66rem; letter-spacing:.03em; color:var(--sp-amber); display:inline-flex; align-items:center; gap:.3rem; margin-left:.5rem; font-weight:400; text-transform:none; }
.as-online-note svg { width:12px; height:12px; }
.as-online-tag { display:inline-flex; align-items:center; gap:.28em; font-family:'Courier Prime',monospace; font-weight:700; font-size:.58rem; letter-spacing:.04em; text-transform:uppercase; color:var(--sp-amber); background:var(--sp-amber-soft); border-radius:2px; padding:.12em .38em; vertical-align:middle; margin-left:.15rem; }
.as-online-tag svg { width:11px; height:11px; }
.as-attn { position:absolute; top:14px; right:8px; font-family:'Courier Prime',monospace; font-weight:700; font-size:.5rem; letter-spacing:.05em; text-transform:uppercase; color:var(--sp-g-rouge); border:1.5px solid var(--sp-g-rouge); border-radius:2px; padding:.05em .25em; transform:rotate(-7deg); opacity:.85; mix-blend-mode:multiply; }
@media (max-width: 560px) {
	.as-space-upcoming__item { flex-wrap: wrap; }
	.as-space-upcoming__main { flex: 1 1 100%; }
}

/* ── État vide ── */
.as-space-empty { color: var(--sp-gray5); font-size: 0.92rem; }
.as-space-empty-state { text-align: center; padding: 48px 20px; color: var(--sp-gray5); }
.as-space-empty-state p:first-child { font-size: 2.5rem; margin-bottom: 8px; }

/* ── Feedback ── */
.as-space-feedback {
	padding: 10px 16px;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 14px;
}
.as-space-feedback.is-success { background: #dcfce7; color: #166534; }
.as-space-feedback.is-error   { background: #fee2e2; color: #991b1b; }

/* ── Cartes planning ── */
.as-space-rdv-list { display: flex; flex-direction: column; gap: 12px; }

.as-space-card-rdv {
	background: var(--sp-white);
	border: 1px solid var(--sp-gray2);
	border-left: 4px solid var(--sp-amber);
	border-radius: var(--sp-radius);
	padding: 14px 16px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	transition: opacity 0.3s;
}
.as-space-card-rdv.is-pending   { border-left-color: var(--sp-amber); }
.as-space-card-rdv.is-done      { border-left-color: #10b981; opacity: 0.8; } /* Réalisé : vert */
.as-space-card-rdv.is-cancelled { border-left-color: var(--sp-gray3); opacity: 0.65; } /* Annulé : gris estompé */

.as-space-card-rdv__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}
.as-space-card-rdv__date { font-size: 0.88rem; font-weight: 700; color: var(--sp-dark); }

.as-space-card-rdv__body { margin-bottom: 10px; }
.as-space-card-rdv__client { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; }
.as-space-card-rdv__client strong { font-size: 0.96rem; color: var(--sp-dark); }
.as-space-card-rdv__phone { font-size: 0.85rem; color: var(--sp-amber); font-weight: 600; text-decoration: none; }
.as-space-card-rdv__phone:hover { text-decoration: underline; }
/* Bouton « S'y rendre » : itinéraire vers le client. Centré pour éviter les missclics. */
.as-space-card-rdv__nav {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 5px;
	margin: 8px auto 0;
	padding: 6px 12px;
	border-radius: 8px;
	background: #1d4ed8;
	color: var(--sp-white);
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.12s;
}
.as-space-card-rdv__nav:hover { background: #1e40af; color: var(--sp-white); }
/* Variante compacte du bouton itinéraire (liste du tableau de bord). */
/* « S'y rendre » du dashboard : bouton ghost unifié (.as-btn--ghost) — voir sizing svg plus haut. */
.as-space-card-rdv__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.as-space-card-rdv__meta span { font-size: 0.82rem; color: var(--sp-gray5); overflow-wrap: anywhere; word-break: break-word; }

.as-space-card-rdv__footer {
	border-top: 1px solid var(--sp-gray1);
	padding-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
/* Actions rapides : étalées aux bords (Réalisé d'un côté, Annuler de l'autre) pour éviter les missclics. */
.as-space-card-rdv__quick { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.as-space-card-rdv__reschedule {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	background: var(--sp-off);
	border: 1px solid var(--sp-gray2);
	border-radius: 8px;
	padding: 8px 12px;
}
/* Ligne « Nouvelle date » (label + champ) ; le bouton Reporter est centré dessous. */
.as-space-card-rdv__reschedule-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.as-space-card-rdv__reschedule > .js-rdv-action { align-self: center; }
.as-space-card-rdv__reschedule label { font-size: 0.8rem; font-weight: 600; color: var(--sp-gray5); white-space: nowrap; }
.as-space-card-rdv__reschedule input[type="datetime-local"] {
	flex: 1 1 150px;
	font-size: 0.82rem;
	padding: 4px 8px;
	height: 32px;
	border: 1px solid var(--sp-gray3);
	border-radius: 6px;
	background: var(--sp-white);
	-webkit-appearance: none;
	appearance: none;
}
.as-space-card-rdv__danger { display: flex; justify-content: flex-end; padding-top: 4px; }
/* Boutons isolés (Rouvrir/Supprimer historique, Enregistrer commentaire) : compacts, pas pleine largeur. */
.as-space-card-rdv__footer > .as-space-btn { align-self: flex-start; }
/* Footer en ligne (Historique) : Rouvrir à gauche, Supprimer à droite. */
.as-space-card-rdv__footer--row { flex-direction: row; align-items: center; justify-content: space-between; }
.as-space-card-rdv__footer--row > .as-space-btn { align-self: auto; }
.as-space-card-rdv__note > .as-space-btn { align-self: flex-start; }
/* Bloc « Commentaire » replié derrière le bouton « 💬 Commentaire ». */
.js-rdv-more { align-self: flex-start; }
.as-space-more-dot { color: var(--sp-amber); font-size: 10px; vertical-align: middle; }
.as-space-card-rdv__more { display: none; }
.as-space-card-rdv__more.is-open { display: block; animation: asPageIn 0.2s var(--as-ease) both; }

/* ── a11y : focus clavier visible et cohérent (n'apparaît qu'au clavier) ── */
.as-space a:focus-visible,
.as-space button:focus-visible,
.as-space input:focus-visible,
.as-space select:focus-visible,
.as-space textarea:focus-visible,
.as-space [tabindex]:focus-visible,
.as-space [role="button"]:focus-visible {
	outline: 2px solid var(--sp-amber);
	outline-offset: 2px;
	border-radius: 5px;
}

/* ── Boutons ── */
.as-space-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border: none;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s, transform 0.1s, opacity 0.15s;
}
.as-space-btn--sm { padding: 6px 12px; font-size: 0.82rem; }
.as-space-btn--primary { background: var(--sp-amber); color: var(--sp-on-accent); }
.as-space-btn--primary:hover { background: var(--sp-amber2); }
.as-space-btn--warn    { background: var(--sp-amber-soft); color: var(--sp-amber-deep); border: 1px solid #fcd34d; }
.as-space-btn--warn:hover { background: #fde68a; }
.as-space-btn--danger  { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.as-space-btn--danger:hover { background: #fecaca; }
.as-space-btn--ghost   { background: none; color: var(--sp-gray5); border: 1px solid var(--sp-gray2); }
.as-space-btn--ghost:hover { border-color: var(--sp-gray5); color: var(--sp-dark); }
.as-space-btn:active { transform: translateY(1px); }
.as-space-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Réglages ── */
.as-space-settings-form { display: flex; flex-direction: column; }
.as-space-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.as-space-field span { font-size: 0.82rem; font-weight: 600; color: var(--sp-gray7); }
.as-space-field input,
.as-space-field textarea {
	padding: 8px 10px;
	border: 1px solid var(--sp-gray3);
	border-radius: 8px;
	font-size: 0.92rem;
	font-family: inherit;
	background: var(--sp-white);
	color: var(--sp-dark);
	max-width: 400px;
	box-sizing: border-box;
}
.as-space-field textarea { resize: vertical; max-width: 100%; }
.as-space-field input:focus,
.as-space-field textarea:focus {
	outline: none;
	border-color: var(--sp-amber);
	box-shadow: 0 0 0 3px var(--sp-amber-ring);
}
.as-space-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.as-space-days { display: flex; flex-wrap: wrap; gap: 8px; }
.as-space-day {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 1.5px solid var(--sp-gray2);
	border-radius: 100px;
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--sp-gray7);
	transition: border-color 0.12s, background 0.12s;
}
.as-space-day input { position: absolute; opacity: 0; width: 0; height: 0; }
.as-space-day:hover { border-color: var(--sp-amber); }
.as-space-day.is-active { border-color: var(--sp-amber); background: #fff7ed; color: var(--sp-amber-deep); }
.as-space-toggle { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.as-space-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.as-space-toggle__sw {
	flex: 0 0 auto;
	width: 42px; height: 24px;
	border-radius: 100px;
	background: var(--sp-gray3);
	margin-top: 2px;
	position: relative;
	transition: background 0.18s;
}
.as-space-toggle__sw::after {
	content: '';
	position: absolute;
	top: 3px; left: 3px;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--sp-white);
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
	transition: transform 0.18s;
}
.as-space-toggle input:checked + .as-space-toggle__sw { background: var(--sp-amber); }

/* Réglage secondaire compact, sur une seule ligne, indenté sous son toggle (ex. délai d'envoi). */
.as-space-subfield { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:8px 0 0 54px; font-size:14px; color:var(--sp-gray7); }
.as-space-subfield input { width:64px; padding:8px 10px; text-align:center; font:inherit; font-size:15px; border:1px solid var(--as-line-2); border-radius:9px; background:var(--as-surface); color:var(--sp-dark); }
.as-space-subfield input:focus { outline:none; border-color:var(--sp-amber); box-shadow:0 0 0 3px var(--sp-amber-ring); }
.as-space-subfield__hint { flex:1 1 100%; font-size:12px; color:var(--sp-gray5); }
@media (max-width:560px){ .as-space-subfield { margin-left:0; } }
.as-space-toggle input:checked + .as-space-toggle__sw::after { transform: translateX(18px); }
.as-space-toggle__text { display: flex; flex-direction: column; gap: 2px; }
.as-space-toggle__text strong { font-size: 0.92rem; color: var(--sp-dark); }
.as-space-toggle__text span   { font-size: 0.8rem; color: var(--sp-gray5); }

/* Section « Suite Employé » : en-tête (titre + interrupteur maître) + corps repliable. */
.as-space-suite__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.as-space-suite__title h2 { margin: 0; }
.as-space-suite__sub { margin: 4px 0 0; font-size: 0.82rem; color: var(--sp-gray5); line-height: 1.45; }
.as-space-toggle--solo { flex: 0 0 auto; align-items: center; margin-top: 2px; }
.as-space-suite__body { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--sp-gray2); }
.as-space-suite__body[hidden] { display: none; }
.as-space-suite__hint { margin: 0 0 14px; font-size: 0.82rem; color: var(--sp-gray5); }
/* Repère visuel discret quand l'équipe est active. */
.as-space-suite.is-on { border-color: var(--sp-amber); }
.as-space-settings-footer { padding-top: 4px; text-align: center; }

/* ============================================================
   RÉGLAGES (reskin carnet) : toggle-row + mini-labels Courier + save-bar.
   Scopé aux panneaux réglages (ne touche pas les toggles inline note/avis).
   ============================================================ */
.as-space-panel .as-space-toggle:not(.as-space-toggle--inline):not(.as-space-toggle--solo){ justify-content:space-between; align-items:center; gap:1rem; padding:.75rem 0; border-bottom:1px solid var(--sp-gray2); }
.as-space-panel .as-space-toggle:not(.as-space-toggle--inline):not(.as-space-toggle--solo):last-of-type{ border-bottom:0; }
.as-space-panel .as-space-toggle:not(.as-space-toggle--inline):not(.as-space-toggle--solo) .as-space-toggle__text{ order:1; }
.as-space-panel .as-space-toggle:not(.as-space-toggle--inline):not(.as-space-toggle--solo) .as-space-toggle__sw{ order:2; margin-top:0; flex:none; }
.as-space-panel .as-space-toggle__text strong{ font-family:'Archivo',sans-serif; color:var(--sp-gray7); }
.as-space-field span{ font-family:'Courier Prime',monospace; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--sp-gray5); }
.as-space-field input, .as-space-field textarea, .as-space-field select{ border-radius:var(--sp-radius); }
.as-space-settings-footer{ text-align:right; padding-top:14px; }
/* Panneaux de catégorie : fond papier (retire les teintes), on garde le filet de gauche. */
.as-space-panel--team, .as-space-panel--avail, .as-space-panel--booking, .as-space-panel--notif, .as-space-panel--privacy{ background:var(--sp-white); border-radius:var(--sp-radius); }

/* Disposition 2 colonnes façon maquette : panneaux côte à côte, Équipe/Notifications/pied pleine largeur. */
/* Panneaux Réglages neutres comme la maquette : ni teinte de fond, ni liseré coloré. */
.as-space-settings-form .as-space-panel, #as-my-options{ background:var(--sp-white)!important; }
.as-space-settings-form .as-space-panel{ border-left-width:1px!important; border-left-color:var(--sp-gray3)!important; }
.as-space-settings-form .as-space-panel h2 svg{ color:inherit; }
/* ── Dimensions reprises telles quelles de la maquette (#view-reglages) ──
   Panneau = bandeau de titre (filet franc bord à bord) + corps à 1.1rem.
   Le plugin n'a pas de conteneur « body », le retrait est donc porté par les
   enfants directs du panneau. */
.as-space-settings-form .as-space-panel > h2,
#as-my-options > h2{
	padding:.8rem 1.1rem;
	margin:0;
	border-bottom:2px solid var(--sp-dark);
}
.as-space-settings-form .as-space-panel > *:not(h2),
#as-my-options > *:not(h2){ margin-left:1.1rem; margin-right:1.1rem; }
.as-space-settings-form .as-space-panel > h2 + *,
#as-my-options > h2 + *{ margin-top:.4rem; }
.as-space-settings-form .as-space-panel > *:last-child,
#as-my-options > *:last-child{ margin-bottom:1rem; }
/* Champs creusés (fond plus sourd que le papier du panneau), comme la maquette. */
.as-space-settings-form .as-space-field input,
.as-space-settings-form .as-space-field select,
.as-space-settings-form .as-space-field textarea{
	background:var(--sp-off);
	border:1.5px solid color-mix(in srgb, var(--sp-dark) 20%, transparent);
	border-radius:3px;
	padding:.5rem .6rem;
	font-size:.9rem;
}
.as-space-settings-form .as-space-field{ gap:.32rem; }
/* Panneau « Suite Employé » : son en-tête porte un interrupteur, on lui donne le
   même bandeau que les autres panneaux (filet franc bord à bord, une seule ligne). */
.as-space-settings-form .as-space-suite__head{
	display:flex; align-items:center; justify-content:space-between; gap:1rem;
	padding:.8rem 1.1rem; margin:0;
	border-bottom:2px solid var(--sp-dark);
}
.as-space-settings-form .as-space-suite__head h2{ padding:0; margin:0; border:0; }
.as-space-settings-form .as-space-suite__title{ margin:0; }
/* Le corps n'a plus besoin de son propre filet : le bandeau le fournit. */
.as-space-settings-form .as-space-suite__body{ margin-top:0; padding-top:0; border-top:0; }
.as-space-settings-form .as-space-suite__hint{ margin:0 0 12px; font-size:.82rem; color:var(--sp-gray5); }

/* Note explicative en tête de corps de panneau. */
.as-panel-note{ color:var(--sp-gray5); font-size:.84rem; line-height:1.5; margin-bottom:14px; }
/* Lignes secondaires (« Envoyer [24] h avant le RDV ») : retrait et champs de la maquette.
   Le retrait de 54px du plugin creusait un décalage que la maquette n'a pas. */
.as-space-settings-form .as-space-subfield{
	margin-left:0;
	padding:.55rem 0 .55rem 1.2rem;
	gap:.5rem;
	font-size:.86rem;
	color:var(--sp-gray5);
}
.as-space-settings-form .as-space-subfield input{
	width:84px;
	padding:.35rem .4rem;
	font-size:.85rem;
	font-family:'Courier Prime',monospace;
	border:1.5px solid color-mix(in srgb, var(--sp-dark) 18%, transparent);
	border-radius:3px;
	background:var(--sp-white);
}
/* Un champ texte dans une ligne secondaire occupe sa colonne (clé API, expéditeur). */
.as-space-settings-form .as-space-subfield .as-space-field input{
	width:100%;
	text-align:left;
	font-family:inherit;
	background:var(--sp-off);
}
.as-space-settings-form .as-space-subfield .as-space-field input[name="sms_key"]{ font-family:'Courier Prime',monospace; }
.as-space-settings-form .as-space-field > span{ font-size:.62rem; letter-spacing:.08em; }
/* Dans une grille de champs, un libellé qui passe sur deux lignes ferait descendre
   son champ seul : on réserve la hauteur de deux lignes pour que les champs d'une
   même rangée s'alignent, quel que soit le libellé. */
.as-space-settings-form .as-space-grid-2 > .as-space-field > span{
	display:flex; align-items:flex-end;
	min-height:2.4em; line-height:1.2;
}
/* Rythme des rangées à interrupteur et des grilles de champs. */
.as-space-settings-form .as-space-panel .as-space-toggle:not(.as-space-toggle--inline):not(.as-space-toggle--solo){ padding:.7rem 0; }
.as-space-settings-form .as-space-grid-2{ gap:14px; }
/* Pastilles de jours : bord et coin de la maquette. */
.as-space-days{ gap:6px; margin-bottom:14px; }
.as-space-day{ border-width:1.5px; border-radius:2px; font-size:.82rem; }
/* Petit écran : les sept jours tiennent sur une ligne en se partageant la largeur. */
@media (max-width:520px){
	.as-space-days{ flex-wrap:nowrap; }
	.as-space-day{ flex:1 1 0; width:auto; min-width:0; max-width:38px; }
}
/* Micro-libellé de sous-section (Courier majuscule), même famille que les labels de champs. */
.as-space-microlabel{
	display:block;
	font-family:'Courier Prime',monospace;
	font-size:.6rem;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--sp-gray5);
	margin:0 0 8px;
}
/* Sous-titre en phrase (pas en Courier majuscule) comme la maquette. */
.as-space-subtitle--plain{
	font-family:'Libre Franklin',sans-serif;
	font-size:.95rem;
	letter-spacing:0;
	text-transform:none;
	color:var(--sp-gray5);
}
/* Horaires : toujours deux colonnes (jamais de champ orphelin sur une 3e). */
.as-hours-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
/* Une colonne : mêmes regroupements et même ordre qu'en deux colonnes. */
.as-space-settings-form{ display:flex; flex-direction:column; }
.as-space-settings-form > .as-space-panel{ order:20; }
@media (min-width:900px){
	.as-space-settings-form{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
	/* Panneaux sans ordre explicite (réglages injectés par un module) : après les nôtres,
	   pleine largeur, mais toujours AVANT le pied de formulaire et son bouton Enregistrer. */
	.as-space-settings-form > .as-space-panel:not([style*="order:"]){ grid-column:1/-1; }
	.as-space-settings-form > .as-space-panel--team,
	.as-space-settings-form > .as-space-panel--notif,
	.as-space-settings-form > .as-panel-full,
	.as-space-settings-form > .as-space-settings-footer{ grid-column:1/-1; }
	.as-space-settings-form > .as-space-settings-footer{ order:30; }
	.as-space-settings-form > .as-settings-sticky{ order:31; }
}
/* Jours travaillés : pastilles carrées à une lettre (comme la maquette). */
.as-space-day{ width:38px; height:38px; padding:0; justify-content:center; border-radius:var(--sp-radius); border-color:var(--sp-gray3); font-family:'Archivo',sans-serif; font-weight:700; }
.as-space-day.is-active{ background:var(--sp-amber); border-color:var(--sp-amber); color:var(--sp-on-accent); }
.as-space-day__full{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
/* Grille horaires / créneaux : mini-labels Courier + champs carnet. */
.as-space-grid-2{ gap:12px; }
.as-space-grid-2 .as-space-field span, .as-space-panel .as-space-field > span{ font-family:'Courier Prime',monospace; font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--sp-gray5); }

/* RGPD : case « conservation illimitée » + champ mois conditionnel. */
.as-retention-illim { display:flex; align-items:center; gap:9px; cursor:pointer; font-size:14px; color:var(--sp-dark); margin:2px 0 4px; font-weight:500; }
.as-retention-illim input { width:17px; height:17px; accent-color:var(--sp-amber); cursor:pointer; flex:none; }
.as-retention-months { margin:2px 0 6px; }
.as-retention-months.is-hidden { display:none; }
.as-retention-months__row { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--sp-gray7); }
.as-retention-months__row input { width:76px; font:inherit; font-size:15px; padding:9px 10px; text-align:center; border:1px solid var(--as-line-2); border-radius:9px; background:var(--as-surface); color:var(--sp-dark); }
.as-retention-months__row input:focus { outline:none; border-color:var(--sp-amber); box-shadow:0 0 0 3px var(--sp-amber-ring); }

/* ── Calendrier ── */
.as-space-cal-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.as-space-mode-btn {
	padding: 6px 14px;
	border: 1.5px solid var(--sp-gray2);
	border-radius: 100px;
	background: var(--sp-white);
	font-size: 0.85rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	color: var(--sp-gray7);
	transition: border-color 0.12s, background 0.12s;
}
.as-space-mode-btn.is-active[data-mode="block"]   { background: #fee2e2; border-color: #f87171; color: #991b1b; }
.as-space-mode-btn.is-active[data-mode="unblock"] { background: #dcfce7; border-color: #4ade80; color: #166534; }
.as-space-cal-hint { font-size: 0.8rem; color: var(--sp-gray5); font-style: italic; }

/* ── Création rapide d'un RDV (bouton + RDV → prestation → tap sur un créneau) ── */
/* Sous-navigation interne d'un onglet regroupé (Rendez-vous = à venir/passés, Réglages = réglages/équipe/réaffectation). */
.as-subnav { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 20px; border-bottom: 1px solid var(--as-line-2); }
.as-subnav__item { font-family:'Archivo',sans-serif; padding: .6rem .9rem .65rem; font-size: 0.92rem; font-weight: 600; color: var(--sp-gray5); text-decoration: none; border-bottom: 2.5px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.as-subnav__item:hover { color: var(--sp-gray7); }
.as-subnav__item.is-active { color: var(--sp-amber); border-bottom-color: var(--sp-amber); }

.as-quick-add { position: relative; }
/* Dans la barre d'actions : poussé à droite, en face du verrou d'édition. */
.as-quick-add--right { margin-left: auto; }
/* Indice de placement : ligne sous la barre, affichée seulement à l'armement. */
.as-quick-add__hint { margin: -2px 0 12px; font-size: 0.84rem; color: var(--sp-amber-deep); font-weight: 600; }
.as-quick-add__hint[hidden] { display: none; }
.as-quick-add__btn.is-active { box-shadow: 0 0 0 3px rgba(224,137,29,.35); }
.as-quick-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; width: 270px; max-width: 84vw; background: var(--sp-white); border: 1px solid var(--as-line-2); border-radius: 12px; box-shadow: 0 10px 30px rgba(20,28,45,.16); padding: 6px; }
/* Bouton à droite → menu aligné à droite pour ne pas déborder. */
.as-quick-add--right .as-quick-menu { left: auto; right: 0; }
.as-quick-menu__hd { font-size: 12px; color: var(--sp-gray5); padding: 6px 8px 8px; line-height: 1.4; }
.as-quick-menu__item { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: none; border-radius: 8px; padding: 9px 10px; cursor: pointer; font: inherit; text-align: left; }
.as-quick-menu__item:hover { background: var(--sp-off); }
.as-quick-menu__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.as-quick-menu__name { flex: 1; font-size: 14px; font-weight: 600; color: var(--sp-dark); }
.as-quick-menu__dur { font-size: 12px; color: var(--sp-gray5); white-space: nowrap; }
.as-quick-menu__search { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 8px 10px; margin: 2px 0 6px; border: 1px solid var(--as-line-2); border-radius: 8px; background: var(--as-surface); color: var(--sp-dark); }
.as-quick-menu__search:focus { outline: none; border-color: var(--sp-amber); box-shadow: 0 0 0 3px var(--sp-amber-ring); }
.as-quick-menu__list { max-height: 300px; overflow-y: auto; }
.as-quick-menu__empty { font-size: 13px; color: var(--sp-gray5); padding: 10px 8px; text-align: center; margin: 0; }
/* Prestation personnalisée (one-shot) : entrée en tête + champs nom/durée. */
.as-quick-menu__item--custom { border-bottom: 1px solid var(--as-line-2); margin-bottom: 4px; }
.as-quick-menu__dot--custom { display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--sp-off); color: var(--sp-amber-deep); font-size: 13px; font-weight: 700; line-height: 1; }
.as-quick-custom { padding: 2px 8px 8px; }
.as-quick-custom[hidden] { display: none; }
.as-quick-custom__in { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--as-line-2); border-radius: 8px; background: var(--as-surface); color: var(--sp-dark); margin-bottom: 6px; }
.as-quick-custom__row { display: flex; align-items: center; gap: 6px; }
.as-quick-custom__dur { width: 72px; font: inherit; font-size: 13px; padding: 8px; border: 1px solid var(--as-line-2); border-radius: 8px; background: var(--as-surface); color: var(--sp-dark); }
.as-quick-custom__unit { font-size: 12px; color: var(--sp-gray5); }
.as-quick-custom__arm { margin-left: auto; padding: 7px 14px; font-size: 13px; }
.as-quick-custom__in:focus, .as-quick-custom__dur:focus { outline: none; border-color: var(--sp-amber); box-shadow: 0 0 0 3px var(--sp-amber-ring); }
.as-quick-custom__err { font-size: 0.76rem; color: #dc2626; margin: 6px 0 0; }
.as-quick-custom__err[hidden] { display: none; }
/* Mode placement actif : feedback visuel sur les créneaux libres. */
#as-space-calendar.is-placing { cursor: crosshair; }
#as-space-calendar.is-placing .as-space-cal-cell.is-interactive { cursor: pointer; }
#as-space-calendar.is-placing .as-space-cal-cell.is-interactive:hover { background: #fff3e0; box-shadow: inset 0 0 0 2px var(--sp-amber); }
/* Mini-popup de création. */
.as-quick-pop { position: fixed; z-index: 9999; width: 250px; max-width: 92vw; background: var(--sp-white); border: 1px solid var(--as-line-2); border-radius: 14px; box-shadow: 0 16px 40px rgba(15,23,42,.22); padding: 14px; }
.as-quick-pop__close { position: absolute; top: 8px; right: 10px; background: none; border: none; font-size: 1.2rem; line-height: 1; color: var(--sp-gray5); cursor: pointer; padding: 0; }
.as-quick-pop__hd { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 0.9rem; color: var(--sp-dark); margin: 0 22px 4px 0; }
.as-quick-pop__dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.as-quick-pop__when { font-size: 0.82rem; color: var(--sp-gray5); margin: 0 0 11px; }
.as-quick-pop__in { width: 100%; font: inherit; font-size: 0.9rem; padding: 9px 11px; border: 1px solid var(--as-line-2); border-radius: 9px; background: var(--as-surface); color: var(--sp-dark); margin-bottom: 8px; }
.as-quick-pop__in:focus { outline: none; border-color: var(--sp-amber); box-shadow: 0 0 0 3px var(--sp-amber-ring); }
.as-quick-pop__err { font-size: 0.78rem; color: #dc2626; margin: 2px 0 8px; }
.as-quick-pop__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

/* Bouton bascule « verrou d'édition » (interrupteur, OFF par défaut). */
.as-space-edit-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px 6px 8px;
	border: 1.5px solid var(--sp-gray2);
	border-radius: 100px;
	background: var(--sp-white);
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--sp-gray5);
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.as-space-edit-toggle__dot {
	width: 34px;
	height: 18px;
	border-radius: 100px;
	background: var(--sp-gray3);
	position: relative;
	flex: none;
	transition: background 0.15s;
}
.as-space-edit-toggle__dot::after {
	content: "";
	position: absolute;
	top: 2px; left: 2px;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: var(--sp-white);
	box-shadow: 0 1px 2px rgba(0,0,0,0.25);
	transition: transform 0.15s;
}
.as-space-edit-toggle.is-on {
	background: #dcfce7;
	border-color: #4ade80;
	color: #166534;
}
.as-space-edit-toggle.is-on .as-space-edit-toggle__dot { background: #22c55e; }
.as-space-edit-toggle.is-on .as-space-edit-toggle__dot::after { transform: translateX(16px); }
.as-space-cal-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 12px;
	background: var(--sp-white);
	border: 1px solid var(--sp-gray2);
	border-radius: var(--sp-radius);
	padding: 6px 10px;
	color: var(--sp-gray7);
	font-family: 'Courier Prime', monospace;
	font-size: 0.82rem;
	font-weight: 700;
}
.as-space-cal-nav span { flex: 1; text-align: center; font-size: 0.82rem; letter-spacing: .02em; }
.as-space-cal-nav__today {
	color: var(--sp-amber);
	text-decoration: none;
	font-weight: 700;
	font-family: 'Archivo', sans-serif;
}
.as-space-cal-nav__today:hover { text-decoration: underline; }
.as-space-cal-nav .as-space-btn--ghost {
	background: transparent;
	border: 1px solid var(--sp-gray2);
	color: var(--sp-gray7);
	padding: 5px 12px;
	min-width: 36px;
	justify-content: center;
	border-radius: var(--sp-radius);
}
.as-space-cal-nav .as-space-btn--ghost:hover {
	background: var(--sp-page-creuse);
	border-color: var(--sp-amber);
	color: var(--sp-amber);
}

.as-space-cal-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; font-size: 0.78rem; }
.as-space-cal-legend__item { display: inline-flex; align-items: center; gap: 5px; }
.as-space-cal-legend__item::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--sp-gray2); }
.as-space-cal-legend--free::before    { background: var(--sp-white); }
.as-space-cal-legend--booked::before  { background: #bfdbfe; border-color: #3b82f6; }
.as-space-cal-legend--blocked::before { background: var(--sp-gray2); border-color: var(--sp-gray3); }
.as-space-cal-legend--off::before     { background: var(--sp-gray1); }

.as-space-cal-wrap { overflow-x: auto; border: 1px solid var(--sp-gray3); border-radius: 16px; background: var(--sp-white); box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 24px 48px -24px rgba(15,23,42,.32); }
.as-space-cal-grid { min-width: 500px; --cal-row: 50px; }
.as-space-cal-header,
.as-space-cal-row {
	display: grid;
	grid-template-columns: 48px repeat(7, 1fr);
	border-bottom: 1px solid var(--sp-gray1);
}
.as-space-cal-header { background: linear-gradient(180deg, var(--sp-off), var(--sp-gray1)); position: sticky; top: 0; z-index: 3; box-shadow: 0 1px 0 rgba(15,23,42,.04); }
/* Ligne intermédiaire (demi-heure, etc.) : trait plus discret que les heures pleines. */
/* Distinction des plages horaires : trait NET à chaque heure pleine, sous-lignes
   (demi-heures…) discrètes. La règle :has cible la rangée juste avant une heure
   pleine → robuste quel que soit le pas de la grille (15/30/60 min). */
.as-space-cal-row { border-bottom-color: var(--sp-gray1); }
.as-space-cal-row:has(+ .as-space-cal-row:not(.is-half)) { border-bottom-color: var(--sp-gray3); }
/* Demi-heure (:30) : trait intermédiaire (entre l'heure nette et les quarts discrets)
   + libellé « 08:30 » plus léger que l'heure pleine, pour se repérer sans surcharger. */
.as-space-cal-row:has(+ .as-space-cal-row.is-halfhour) { border-bottom-color: var(--sp-gray2); }
.as-space-cal-row.is-halfhour .as-space-cal-time span { font-weight: 500; font-size: 0.72rem; color: var(--sp-gray5); }
.as-space-cal-row.is-lunch .as-space-cal-time { color: var(--sp-gray5); }
.as-space-cal-time-col {}
/* ── Mobile : vue resserrée ~3 jours (J-1 / J / J+1), défilement horizontal jour par jour ── */
@media (max-width: 600px) {
	.as-space-cal-grid { min-width: 0; }
	.as-space-cal-header,
	.as-space-cal-row { grid-template-columns: 42px repeat(7, minmax(104px, 1fr)); }
	/* Colonne des heures figée à gauche pendant le défilement horizontal.
	   Fond opaque + z-index élevé. L'ombre -12px à gauche prolonge le fond opaque
	   pour combler l'interstice au bord du cadre (sinon un RDV y transparaît) ;
	   l'ombre droite sépare proprement des colonnes de jours. */
	.as-space-cal-time,
	.as-space-cal-time-col { position: sticky; left: 0; z-index: 6; background: var(--sp-off);
		/* fond opaque CONTINU : on déborde à gauche (joint du cadre) ET haut/bas
		   (micro-joints entre cellules en haute densité) → aucun RDV ne perce. */
		box-shadow: -14px 0 0 0 var(--sp-off), 0 2px 0 0 var(--sp-off), 0 -2px 0 0 var(--sp-off), 3px 0 6px -3px rgba(15,23,42,.18); }
	.as-space-cal-time-col { z-index: 7; background: var(--sp-gray1); box-shadow: -14px 0 0 0 var(--sp-gray1), 0 2px 0 0 var(--sp-gray1), 3px 0 6px -3px rgba(15,23,42,.18); }
	/* Sur mobile, pas d'ombre colorée sous les RDV (évite tout débordement sous la gouttière). */
	.as-space-cal-cell__rdv { box-shadow: none !important; }
	/* Glissement jour par jour (doux), en tenant compte de la gouttière. */
	.as-space-cal-wrap { scroll-snap-type: x proximity; scroll-padding-left: 42px; }
	.as-space-cal-col-head { scroll-snap-align: start; }
}
.as-space-cal-col-head {
	padding: 8px 4px;
	text-align: center;
	border-left: 1px solid var(--sp-gray1);
}
.as-space-cal-col-head { position: relative; }
.as-space-cal-col-head.is-today { background: linear-gradient(180deg, #fff3e0, #ffe7c4); }
.as-space-cal-col-head.is-today::after { content: ''; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); width: 62%; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--sp-amber), #f4a52e); }
.as-space-cal-col-head.is-today .as-space-cal-col-head__day { color: var(--sp-amber-deep); }
.as-space-cal-col-head.is-off   { opacity: 0.45; }
.as-space-cal-col-head.is-past  { opacity: 0.4; }
.as-space-cal-col-head__day  { font-size: 0.75rem; font-weight: 700; color: var(--sp-dark); }
.as-space-cal-col-head__date { font-size: 0.7rem; color: var(--sp-gray5); }
.as-space-lock-btn {
	background: none;
	border: 1px solid var(--sp-gray2);
	border-radius: 6px;
	padding: 2px 6px;
	cursor: pointer;
	font-size: 0.85rem;
	margin-top: 4px;
	transition: background 0.12s;
}
.as-space-lock-btn:hover, .as-space-lock-btn.is-locked { background: var(--sp-amber-soft); border-color: var(--sp-amber); }
.as-space-lock-btn.is-loading { opacity: 0.5; cursor: wait; }
.as-space-cal-time {
	font-size: 0.72rem;
	color: var(--sp-gray5);
	text-align: right;
	padding: 3px 7px 0;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	background: var(--sp-off);
	border-right: 1px solid var(--sp-gray1);
}
/* Libellé calé en haut de sa ligne (juste sous le trait de l'heure), comme un agenda.
   Pas de remontée négative → la 1re heure n'est jamais coupée par l'en-tête. */
.as-space-cal-time span {
	font-weight: 600;
	color: var(--sp-gray7);
}
.as-space-cal-cell {
	height: var(--cal-row, 50px);
	border-left: 1px solid var(--sp-gray1);
	transition: background 0.1s;
}
/* Colonne du jour : fond légèrement ambré. On INCLUT les cellules réservées pour
   qu'elles gardent la teinte de la colonne derrière le chip (pas de cadre blanc). */
.as-space-cal-cell.is-today:not(.is-lunch):not(.is-off):not(.is-past):not(.is-blocked):not(.is-absence) {
	background: linear-gradient(180deg, rgba(255,243,224,.5), rgba(255,243,224,.18));
}
.as-space-cal-cell.is-interactive { background: var(--sp-white); }
.as-space-cal-cell.is-blocked { background: var(--sp-gray2); border-color: var(--sp-gray3); }
/* Curseur main + survol seulement quand l'édition est activée (sinon : consultation). */
#as-space-calendar.is-editable .as-space-cal-cell.is-interactive { cursor: pointer; }
#as-space-calendar.is-editable .as-space-cal-cell.is-interactive:hover { background: var(--sp-amber-soft); }
#as-space-calendar.is-editable .as-space-cal-cell.is-blocked { cursor: pointer; }
#as-space-calendar.is-editable .as-space-cal-cell.is-blocked:hover { background: var(--sp-gray3); }
.as-space-cal-cell__blocked {
	display: block;
	font-size: 0.6rem;
	font-weight: 600;
	color: var(--sp-gray6);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 3px;
	line-height: 30px;
}
/* Cellule d'absence (congé, maladie…) : couleurs posées en inline selon le motif. */
.as-space-cal-cell.is-absence { cursor: default; }
.as-space-cal-cell__absence {
	display: block;
	font-size: 0.6rem;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 3px;
	line-height: 30px;
}
/* Badge motif dans l'en-tête de colonne (remplace le cadenas pour un jour d'absence). */
.as-space-cal-absence-badge {
	display: inline-block;
	margin-top: 4px;
	padding: 1px 7px;
	font-size: 0.62rem;
	font-weight: 700;
	border: 1px solid;
	border-radius: 100px;
	white-space: nowrap;
}

/* ── Panneau « Absences » (formulaire + liste) ─────────────────────── */
.as-space-absences {
	background: var(--sp-white);
	border: 1px solid var(--sp-gray2);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 16px;
}
.as-space-absences__title { font-size: 1rem; font-weight: 700; color: var(--sp-dark); margin: 0 0 12px; }
.as-space-absence-form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}
.as-space-absence-motif,
.as-space-absence-dates input {
	padding: 7px 10px;
	border: 1.5px solid var(--sp-gray2);
	border-radius: 8px;
	font: inherit;
	font-size: 0.85rem;
	background: var(--sp-white);
}
.as-space-absence-dates { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--sp-gray5); }
.as-space-absence-msg { font-size: 0.82rem; font-weight: 600; }
.as-space-absence-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.as-space-absence-empty { font-size: 0.85rem; color: var(--sp-gray5); font-style: italic; }
.as-space-absence-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid var(--sp-gray2);
	border-radius: 8px;
	background: var(--sp-gray1);
}
.as-space-absence-chip { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.as-space-absence-text { flex: 1; font-size: 0.85rem; color: var(--sp-gray7); }
.as-space-absence-text strong { color: var(--sp-dark); }
.as-space-absence-del {
	border: none;
	background: none;
	cursor: pointer;
	color: var(--sp-gray5);
	font-size: 0.95rem;
	line-height: 1;
	padding: 4px 6px;
	border-radius: 6px;
	transition: background 0.12s, color 0.12s;
}
.as-space-absence-del:hover { background: #fee2e2; color: #dc2626; }

/* ============================================================
   PLANNING (reskin carnet) : retinte de l'agenda + panneau congés.
   Le modele d'edition (cellules cliquables) est conserve tel quel ;
   seule l'apparence passe dans le monde carnet (papier + violet).
   ============================================================ */
.as-space-cal-wrap{ border:1px solid var(--sp-gray2); border-radius:var(--sp-radius); box-shadow:var(--as-shadow); overflow:auto; }
/* La page Planning remplit la hauteur : le calendrier (vue Semaine) prend l'espace
   restant et défile en interne → la page elle-même ne déborde plus. */
.as-content > .as-plan-page{ display:flex; flex-direction:column; height:100%; }
.as-plan-page > *{ flex:none; }
.as-plan-page > #as-plan-semaine:not([hidden]){ flex:1; min-height:0; display:flex; flex-direction:column; }
/* Le cadre du calendrier épouse la grille : étiré à la hauteur restante, son fond
   dépassait sous la dernière heure (bande claire en bas). Sa hauteur exacte est
   posée par le script ; les valeurs ci-dessous ne servent que de repli sans JS. */
#as-plan-semaine > .as-space-cal-wrap{ flex:0 0 auto; min-height:180px; max-height:72vh; }
/* En-tête Planning : le titre est déjà dans la barre du haut → on le masque (gagne de la hauteur). */
.as-plan-page > .as-space-header{ display:none; }
.as-plan-page > .as-space-staff-filter{ margin-bottom:10px; }
.as-plan-page > .as-space-cal-toolbar{ margin-bottom:10px; }
.as-plan-page .as-plan-seg{ margin-bottom:10px; }
#as-plan-semaine .as-space-cal-nav{ margin-bottom:8px; }
#as-plan-semaine .as-space-cal-legend{ margin-bottom:8px; }
/* Outils d'édition (pause déjeuner + congés) masqués en consultation, visibles en édition. */
.as-plan-page .as-space-lunch-editor{ display:none; }
.as-plan-page:has(#as-space-calendar.is-editable) .as-space-lunch-editor{ display:flex; }
#as-plan-semaine .as-space-absences{ display:none; }
#as-space-calendar.is-editable ~ .as-space-absences{ display:block; }
.as-space-cal-header{ background:var(--sp-page-creuse); box-shadow:0 1px 0 var(--sp-gray2); }
.as-space-cal-col-head__day{ font-family:'Archivo',sans-serif; color:var(--sp-gray7); }
.as-space-cal-col-head__date{ font-family:'Courier Prime',monospace; color:var(--sp-gray5); }
.as-space-cal-col-head.is-today{ background:var(--sp-amber-soft); }
.as-space-cal-col-head.is-today::after{ background:var(--sp-amber); }
.as-space-cal-col-head.is-today .as-space-cal-col-head__day{ color:var(--sp-amber-deep); }
.as-space-cal-time span{ font-family:'Courier Prime',monospace; color:var(--sp-gray6); }
/* Colonne des heures : seulement les heures pleines (on masque les XX:30). */
.as-space-cal-row.is-halfhour .as-space-cal-time span{ display:none; }
.as-space-cal-cell.is-today:not(.is-lunch):not(.is-off):not(.is-past):not(.is-blocked):not(.is-absence){ background:color-mix(in srgb, var(--sp-amber) 7%, var(--sp-white)); }
#as-space-calendar.is-editable .as-space-cal-cell.is-interactive:hover{ background:var(--sp-amber-soft); }
#as-space-calendar.is-placing .as-space-cal-cell.is-interactive:hover{ background:var(--sp-amber-soft); box-shadow:inset 0 0 0 2px var(--sp-amber); }
.as-space-cal-legend{ font-family:'Courier Prime',monospace; }

/* Créneaux LIBRES = teintés violet (dispo d'un coup d'œil, comme l'agenda validé). */
.as-space-cal-cell.is-interactive{ background:color-mix(in srgb, var(--sp-amber) 15%, var(--sp-white)); }
.as-space-cal-cell.is-today:not(.is-lunch):not(.is-off):not(.is-past):not(.is-blocked):not(.is-absence){ background:color-mix(in srgb, var(--sp-amber) 22%, var(--sp-white)); }
/* Créneau RÉSERVÉ : même fond que la plage libre, pour que la carte du rendez-vous
   flotte sur la plage comme dans la maquette. En transparent, on voyait le papier
   de la grille apparaître autour de la carte : un cadre clair disgracieux. */
.as-space-cal-cell.is-booked:not(.is-past):not(.is-lunch):not(.is-off),
.as-space-cal-cell.is-booked-cont:not(.is-past):not(.is-lunch):not(.is-off){
	background:color-mix(in srgb, var(--sp-amber) 15%, var(--sp-white));
}
.as-space-cal-cell.is-booked.is-today:not(.is-past):not(.is-lunch):not(.is-off),
.as-space-cal-cell.is-booked-cont.is-today:not(.is-past):not(.is-lunch):not(.is-off){
	background:color-mix(in srgb, var(--sp-amber) 22%, var(--sp-white));
}
/* Idem au survol : la teinte de la plage ne doit pas sauter au passage de souris. */
.as-space-cal-cell.is-booked:not(.is-past):not(.is-lunch):not(.is-off):hover{
	background:color-mix(in srgb, var(--sp-amber) 15%, var(--sp-white));
}

/* Créneaux BLOQUÉS manuellement = hachure diagonale rose (raccord fermé/pause). */
.as-space-cal-cell.is-blocked{ background:repeating-linear-gradient(45deg, var(--sp-page-creuse) 0 8px, color-mix(in srgb, #C22F2A 24%, var(--sp-page-creuse)) 8px 16px)!important; border-color:var(--sp-page-ombre); }
#as-space-calendar.is-editable .as-space-cal-cell.is-blocked:hover{ background:repeating-linear-gradient(45deg, var(--sp-page-creuse) 0 8px, color-mix(in srgb, #C22F2A 34%, var(--sp-page-creuse)) 8px 16px)!important; }
.as-space-cal-cell__blocked{ color:#8a2f2b; }

/* Mode « Placer sur un créneau » : tooltip d'heure ciblée au survol. */
#as-space-calendar.is-placing .as-space-cal-cell.is-interactive{ position:relative; }
#as-space-calendar.is-placing .as-space-cal-cell.is-interactive:hover::after{
	content:attr(data-start); position:absolute; left:50%; top:-4px; transform:translate(-50%,-100%);
	background:var(--sp-gray7); color:var(--sp-white); font-family:'Courier Prime',monospace; font-weight:700; font-size:.7rem;
	letter-spacing:.02em; padding:3px 8px; border-radius:3px; white-space:nowrap; z-index:60; pointer-events:none;
	box-shadow:0 6px 14px -4px rgba(5,13,16,.55); }
#as-space-calendar.is-placing .as-space-cal-cell.is-interactive:hover::before{
	content:""; position:absolute; left:50%; top:-4px; transform:translateX(-50%);
	border:4px solid transparent; border-top-color:var(--sp-gray7); z-index:60; pointer-events:none; }
/* Gommette d'état sur le chip RDV. */
/* Meme tete de punaise, en 8px, mais SANS aiguille : a cette taille une
   aiguille de 2px de large sur une tete de 8px n'est plus qu'une bavure. La
   tete garde son jonc et son ombre portee, la famille reste lisible. */
.as-cal-gom{
	width:8px; height:8px; border-radius:50%; flex:none;
	--gom:var(--sp-gray4);
	background-color:var(--gom);
	background-image:
		radial-gradient(circle at 38% 27%, rgba(255,255,255,.72) 0 15%, transparent 42%),
		linear-gradient(160deg, rgba(255,255,255,.28), rgba(0,0,0,.32));
	box-shadow:inset 0 0 0 .5px rgba(20,30,29,.28), .5px 1px 1.5px rgba(20,30,29,.36);
}
.as-cal-gom--pending{ --gom:var(--sp-g-jaune); }
.as-cal-gom--confirmed{ --gom:var(--sp-g-verte); }
.as-cal-gom--done{ --gom:var(--sp-g-verte); }
.as-cal-gom--cancelled,.as-cal-gom--noshow{ --gom:var(--sp-g-rouge); }
/* Cadenas de jour : seulement en mode édition (sinon en-têtes épurés). */
.as-space-lock-btn{ display:none; }
#as-space-calendar.is-editable .as-space-lock-btn{ display:inline-flex; }

/* ── Barre Planning : navigation semaine + sélecteur de vue ── */
.as-plan-bar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.as-plan-wknav{ display:inline-flex; align-items:center; gap:.5rem; }
.as-plan-wknav__arw{ width:34px; height:32px; display:grid; place-items:center; border:1.5px solid var(--sp-gray3); border-radius:var(--sp-radius); color:var(--sp-gray7); text-decoration:none; font-size:1.25rem; line-height:1; }
.as-plan-wknav__arw:hover{ border-color:var(--sp-gray5); background:var(--sp-page-creuse); }
.as-plan-wknav__lbl{ font-family:'Archivo',sans-serif; font-weight:700; font-size:1rem; color:var(--sp-gray7); min-width:148px; text-align:center; font-variant-numeric:tabular-nums; }
.as-plan-wknav__today{ font-family:'Archivo',sans-serif; font-weight:700; font-size:.82rem; color:var(--sp-amber); text-decoration:none; margin-left:.2rem; }
.as-plan-wknav__today:hover{ text-decoration:underline; }
.as-plan-wknav[hidden]{ display:none; }
/* Sélecteur segmenté (groupe bordé, actif violet, texte seul). */
.as-plan-seg{ display:inline-flex; border:1.5px solid var(--sp-gray3); border-radius:var(--sp-radius); overflow:hidden; background:var(--sp-white); }
.as-plan-seg button{ border:0; background:transparent; font-family:'Archivo',sans-serif; font-weight:700; font-size:.9rem; color:var(--sp-gray6); padding:.5rem 1.05rem; cursor:pointer; }
.as-plan-seg button + button{ border-left:1px solid var(--sp-gray2); }
.as-plan-seg button:hover{ color:var(--sp-gray7); }
.as-plan-seg button.is-on{ background:var(--sp-amber); color:var(--sp-on-accent); border-left-color:var(--sp-amber); }
.as-plan-view[hidden]{ display:none; }
/* Pool de fiches RDV du planning : présent dans le DOM (les panneaux sont en position fixe),
   mais sans face visible ni encombrement (0×0) — seul le panneau glissant s'affiche à l'ouverture. */
.as-plan-fiches{ position:absolute; width:0; height:0; overflow:visible; }
.as-plan-fiches .as-cardtag{ display:none; }

/* ── Vue Jour : timeline verticale ── */
/* Meme mesure que le ruban et la timeline : sans plafond, « Aujourd'hui »
   partait se coller au bord droit de l'ecran, a 900 px du contenu. */
.as-plan-dayhead{ display:flex; align-items:baseline; gap:.7rem; margin-bottom:14px; flex-wrap:wrap; max-width:640px; }
.as-plan-dayhead h2{ font-family:'Archivo',sans-serif; font-size:1.3rem; font-weight:800; color:var(--sp-gray7); }
.as-plan-dayhead .sub{ font-family:'Courier Prime',monospace; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--sp-gray5); }
.as-plan-dayhead{ align-items:center; }
.as-plan-dayhead__txt{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; min-width:0; }
/* Fleches de jour : memes reperes visuels que la navigation par semaine, pour
   qu'on ne reapprenne pas un bouton en passant d'une vue a l'autre. */
.as-plan-dayhead__arw{ flex:none; width:34px; height:32px; display:grid; place-items:center; border:1.5px solid var(--sp-gray3); border-radius:var(--sp-radius); color:var(--sp-gray7); text-decoration:none; font-size:1.25rem; line-height:1; }
.as-plan-dayhead__arw:hover{ border-color:var(--sp-gray5); background:var(--sp-page-creuse); }
.as-plan-dayhead__today{ font-family:'Archivo',sans-serif; font-weight:700; font-size:.82rem; color:var(--sp-amber); text-decoration:none; margin-left:auto; }
.as-plan-dayhead__today:hover{ text-decoration:underline; }
.as-tl__vide{ font-family:'Courier Prime',monospace; font-size:.75rem; color:var(--sp-gray5); padding:1.4rem .2rem; }
.as-plan-dayhead__tag{ margin-left:auto; font-family:'Courier Prime',monospace; font-size:.68rem; color:var(--sp-amber); background:var(--sp-amber-soft); border-radius:2px; padding:.2rem .5rem; font-weight:700; }
/* Geometrie de la timeline tenue par TROIS variables, pas par des decalages
   ecrits a la main : le filet, les pastilles et les heures se calaient chacun
   sur son propre nombre, et finissaient a trois pixels les uns des autres.
   --tl-pad  : retrait du contenu ; --tl-rail : axe du filet (et des pastilles) ;
   --tl-y    : hauteur de l'axe horizontal, sur la premiere ligne de la carte. */
.as-tl{ position:relative; max-width:640px;
	--tl-pad:64px; --tl-rail:53px; --tl-y:23px;
	padding-left:var(--tl-pad); }
.as-tl::before{ content:""; position:absolute; left:var(--tl-rail); transform:translateX(-50%);
	top:8px; bottom:8px; width:2px;
	background:repeating-linear-gradient(180deg,var(--sp-reglure) 0 6px,transparent 6px 12px); }
.as-tl__row{ position:relative; margin-bottom:10px; }
/* left/top designent le CENTRE : la pastille tombe pile sur le filet, quel que
   soit son diametre, et l'heure se centre sur la meme ligne qu'elle. */
.as-tl__time{ position:absolute; left:calc(-1 * var(--tl-pad)); top:var(--tl-y);
	transform:translateY(-50%); width:calc(var(--tl-rail) - 12px); text-align:right;
	line-height:1; font-family:'Courier Prime',monospace; font-weight:700;
	font-size:.82rem; color:var(--sp-gray7); }
.as-tl__row::before{ content:""; position:absolute;
	left:calc(var(--tl-rail) - var(--tl-pad)); top:var(--tl-y);
	transform:translate(-50%,-50%);
	width:12px; height:12px; border-radius:50%; background:var(--sp-white);
	border:2.5px solid var(--evc,var(--sp-g-bleue)); z-index:1; }
.as-tl__row.is-free::before{ border-color:var(--sp-amber); border-style:dashed; background:var(--sp-amber-soft); }
.as-tl__card{ background:var(--sp-white); border:1px solid var(--sp-gray2); border-radius:var(--sp-radius); box-shadow:var(--as-shadow); padding:11px 13px; }
.as-tl__top{ display:flex; align-items:center; gap:.6rem; }
.as-tl__who{ font-family:'Archivo',sans-serif; font-weight:800; font-size:1rem; color:var(--sp-gray7); }
.as-tl__st{ margin-left:auto; display:inline-flex; align-items:center; gap:.4rem; font-family:'Courier Prime',monospace; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--sp-gray6); white-space:nowrap; }
.as-tl__svc{ color:var(--sp-gray6); font-size:.86rem; margin-top:1px; }
.as-tl__dur{ font-family:'Courier Prime',monospace; font-size:.66rem; color:var(--sp-gray5); margin-left:.3rem; }
.as-tl__adr{ display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--sp-gray5); margin-top:.5rem; }
.as-tl__adr svg{ width:14px; height:14px; color:var(--sp-gray5); flex:none; }
.as-tl__free{ border:1.5px dashed color-mix(in srgb,var(--sp-amber) 34%,transparent); background:var(--sp-amber-soft); border-radius:var(--sp-radius); padding:9px 13px; display:flex; align-items:center; gap:.6rem; color:var(--sp-amber); font-family:'Archivo',sans-serif; font-weight:700; font-size:.85rem; }
.as-tl__rng{ font-family:'Courier Prime',monospace; font-weight:700; color:var(--sp-gray6); font-size:.78rem; }
.as-tl__free{ text-decoration:none; }
.as-tl__plus{ margin-left:auto; font-size:1.15rem; line-height:1; color:var(--sp-amber); }
/* Actions de terrain : appeler et se guider, sur la carte, pas dans la fiche. */
.as-tl__card{ cursor:pointer; }
.as-tl__act{ display:flex; gap:.4rem; margin-top:.6rem; }
.as-tl__b{ flex:1; text-align:center; text-decoration:none; cursor:pointer;
	font-family:'Courier Prime',monospace; font-size:.68rem; letter-spacing:.07em;
	text-transform:uppercase; color:var(--sp-gray6);
	border:1px solid var(--sp-gray3); border-radius:var(--sp-radius);
	padding:.5rem .2rem; background:var(--sp-white); }
.as-tl__b:hover{ border-color:var(--sp-gray5); background:var(--sp-page-creuse); }
.as-tl__b--pr{ color:var(--sp-amber-deep); border-color:var(--sp-amber); background:var(--sp-amber-soft); }

/* ── Ruban de semaine (vue Jour) ────────────────────────────────────────
   Sept jours et leur charge en une bande. C'est ce qui remplace, sur un
   ecran de poche, une grille a sept colonnes qui n'y tient pas. */
.as-plan-sem{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px;
	max-width:640px; margin:0 0 14px; }
.as-plan-sem__j{ text-align:center; padding:.3rem .1rem .35rem; text-decoration:none;
	border-radius:var(--sp-radius); border:1px solid transparent; }
.as-plan-sem__j:hover{ background:var(--sp-page-creuse); }
.as-plan-sem__j.is-on{ background:var(--sp-amber-soft); border-color:var(--sp-amber); }
.as-plan-sem__j.is-off{ opacity:.45; }
.as-plan-sem__l{ display:block; font-family:'Courier Prime',monospace; font-size:.62rem;
	letter-spacing:.06em; text-transform:uppercase; color:var(--sp-gray5); }
.as-plan-sem__n{ display:block; font-family:'Archivo',sans-serif; font-weight:700;
	font-size:.86rem; line-height:1.2; color:var(--sp-gray7); }
.as-plan-sem__j.is-on .as-plan-sem__n{ color:var(--sp-amber-deep); }
.as-plan-sem__ch{ display:block; height:3px; margin-top:3px; border-radius:2px;
	background:var(--sp-gray2); }
.as-plan-sem__ch i{ display:block; height:100%; border-radius:2px; background:var(--sp-amber2); }
.as-plan-sem__j.is-on .as-plan-sem__ch i{ background:var(--sp-amber); }

/* « Placer sur un creneau » arme une prestation puis attend un clic sur une CASE
   de la grille. Hors de la vue Semaine, la grille est masquee : le menu s'ouvrait
   sur 96 cases dont aucune n'etait cliquable, et le bouton restait echoue a
   l'autre bout de la barre. On ne le montre que la ou il fait quelque chose. */
.as-plan-page:not([data-planview="semaine"]) #as-quick-add{ display:none; }

/* Bouton ••• et bouton d'ajout : telephone uniquement (voir la media query). */
.as-plan-outils{ display:none; }
.as-plan-fab{ display:none; }

/* ── Telephone : direction « ruban du jour » ────────────────────────────
   Le planning commençait a 620 points du haut sur un ecran de 844 : le
   filtre, le verrou, la legende et le placement sur creneau occupaient
   l'ecran en permanence alors que ce sont des reglages. Ils passent
   derriere •••, et la journee remonte. */
@media (max-width:760px){
	/* La barre du haut de l'application affiche deja « Planning » : le titre de
	   page le repetait, en 50 points de hauteur pris sur le planning. */
	.as-plan-page > .as-space-header{ display:none; }
	.as-plan-outils{ display:grid; place-items:center; flex:none; margin-left:auto;
		width:38px; height:38px; padding:0; cursor:pointer;
		border:1px solid var(--sp-gray3); border-radius:var(--sp-radius);
		background:var(--sp-white); color:var(--sp-gray6); font-size:.95rem;
		letter-spacing:1px; line-height:1; }
	.as-plan-outils[aria-expanded="true"]{ background:var(--sp-amber-soft);
		border-color:var(--sp-amber); color:var(--sp-amber-deep); }

	/* Replies par defaut, revelees par ••• . */
	.as-plan-page .as-space-staff-filter,
	.as-plan-page .as-plan-bar > .as-space-cal-toolbar,
	.as-plan-page .as-space-cal-legend,
	.as-plan-page #as-plan-legend,
	.as-plan-page #as-quick-add{ display:none; }
	.as-plan-page.is-outils .as-space-staff-filter,
	.as-plan-page.is-outils .as-plan-bar > .as-space-cal-toolbar,
	.as-plan-page.is-outils #as-quick-add{ display:flex; }
	/* La legende decrit les couleurs de la GRILLE : elle suit la vue Semaine et
	   n'a rien a dire dans la vue Jour. On ne la revele donc pas ici. */
	/* Revelees, elles s'empilent : sur 390 points, une seule ligne d'outils
	   deborderait, et le planning repartirait vers le bas. */
	.as-plan-page.is-outils .as-plan-bar > .as-space-cal-toolbar{ flex-wrap:wrap; }

	/* Bandeau du jour et ruban : POSES dans le flux, pas collants. Superposes,
	   ils laissaient transparaitre les cartes qui defilaient dessous, et un
	   bandeau qu'on voit au travers ne se lit plus. */
	.as-plan-page .as-plan-dayhead{ margin:0 -14px 0; padding:.5rem 14px .45rem;
		background:var(--sp-white); border-bottom:1px solid var(--sp-gray2); }
	.as-plan-page .as-plan-dayhead h2{ font-size:1.02rem; }
	.as-plan-page .as-plan-dayhead__today,
	.as-plan-page .as-plan-dayhead__tag{ display:none; }
	.as-plan-sem{ margin:0 -14px 12px; padding:.4rem 12px .5rem;
		background:var(--sp-white); border-bottom:1px solid var(--sp-gray2); }

	/* La vue Semaine n'a pas sa place sur un telephone : sept colonnes ne s'y
	   lisent pas, quoi qu'on fasse de la mise en page. Restent Jour et Agenda. */
	.as-plan-page #as-plan-seg button[data-planview="semaine"]{ display:none; }
	.as-plan-page #as-plan-wknav{ display:none; }

	/* La colonne des heures repasse dans le flux : hors de l'ecran, elle ne
	   servait a rien, et c'est elle qui dit a quelle heure on en est.
	   Trois variables suffisent, l'alignement suit tout seul. */
	/* Assez large pour « 08:00 » en Courier : trop juste, l'heure debordait de
	   sa boite et venait toucher la pastille. */
	.as-tl{ --tl-pad:60px; --tl-rail:50px; --tl-y:21px; }
	.as-tl__time{ font-size:.76rem; }
	.as-tl__row::before{ width:10px; height:10px; border-width:2px; }
	.as-tl__card{ padding:10px 11px; }
	.as-tl__who{ font-size:.94rem; }
	/* L'etat passe sous le nom : sur une ligne, il ecrasait le nom du client. */
	.as-tl__top{ flex-wrap:wrap; gap:.3rem .5rem; }
	.as-tl__st{ margin-left:auto; }

	.as-plan-fab{ display:inline-flex; align-items:center; gap:.4rem;
		position:fixed; right:14px; bottom:16px; z-index:40;
		padding:.75rem 1.05rem; border-radius:999px; text-decoration:none;
		background:var(--sp-amber); color:var(--sp-on-accent);
		font-family:'Archivo',sans-serif; font-weight:700; font-size:.88rem;
		box-shadow:0 8px 22px -6px rgba(90,45,138,.7); }
	.as-plan-fab span{ font-size:1.15rem; line-height:1; }
	/* Le bouton ne doit jamais recouvrir le dernier rendez-vous. */
	.as-plan-page .as-tl, .as-plan-page .as-agenda{ padding-bottom:76px; }
}

/* ── Vue Agenda : liste condensée par jour ── */
.as-agenda{ max-width:640px; }
.as-agenda__h{ display:flex; align-items:baseline; gap:.6rem; padding:14px 2px 7px; border-bottom:2px solid var(--sp-gray7); margin-bottom:2px; }
.as-agenda__h b{ font-family:'Archivo',sans-serif; font-weight:800; font-size:.98rem; color:var(--sp-gray7); }
.as-agenda__h.is-today b{ color:var(--sp-amber); }
.as-agenda__h .d{ font-family:'Courier Prime',monospace; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--sp-gray5); }
.as-agenda__row{ display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:.5rem .9rem; padding:11px 6px; border-bottom:1px solid var(--sp-gray2); }
.as-agenda__t{ font-family:'Courier Prime',monospace; font-weight:700; font-size:.9rem; color:var(--sp-gray7); min-width:44px; }
.as-agenda__who{ min-width:0; }
.as-agenda__who b{ font-family:'Archivo',sans-serif; font-weight:700; font-size:.92rem; display:block; line-height:1.15; color:var(--sp-gray7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.as-agenda__who span{ display:block; font-size:.8rem; color:var(--sp-gray6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.as-agenda__st{ font-family:'Courier Prime',monospace; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--sp-gray6); justify-self:end; white-space:nowrap; }
.as-agenda__empty{ color:var(--sp-gray5); font-style:italic; padding:1rem .3rem; }
@media (max-width:560px){ .as-agenda__row{ grid-template-columns:auto 1fr auto; } .as-agenda__t{ grid-column:1; } .as-agenda .as-cal-gom{ display:none; } }

/* Panneau « Absences » (congés) en carnet. */
.as-space-absences{ border-radius:var(--sp-radius); border-color:var(--sp-gray2); }
.as-space-absences__title{ font-family:'Archivo',sans-serif; color:var(--sp-gray7); }
.as-space-absence-motif, .as-space-absence-dates input{ border-radius:var(--sp-radius); }
.as-space-absence-item{ border-radius:var(--sp-radius); background:var(--sp-white); border-color:var(--sp-gray2); }

/* Cellule réservée : transparente (seul le chip flottant porte la couleur). */
.as-space-cal-cell.is-booked  { background: transparent; border-color: var(--sp-gray1); cursor: pointer; position: relative; }
.as-space-cal-cell.is-booked:hover { background: transparent; }
.as-space-cal-cell.is-booked-cont { border-top-color: transparent; }
.as-space-cal-cell.is-booked-cont:hover { background: transparent; }
/* Bloc RDV fusionné : déborde en absolu sur toutes les cellules du RDV,
   nom (+ durée) centré au milieu du bloc. pointer-events:none → le clic
   atteint la cellule (ouverture du popup). */
/* RDV en relief : « chip » flottant, dégradé issu de la couleur de la prestation. */
.as-space-cal-cell__rdv {
	position: absolute; left: 3px; right: 3px;
	top: calc(var(--cal-row, 50px) * var(--rdv-off, 0) + 3px);
	height: calc(var(--cal-row, 50px) * var(--rdv-span, 1) - 6px);
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
	gap: 2px; padding: 4px 9px; z-index: 2; pointer-events: none; overflow: hidden; text-align: left;
	border-radius: 10px;
	background: linear-gradient(160deg, color-mix(in srgb, var(--rdv-color, #2f6bff) 76%, var(--sp-white)), var(--rdv-color, #2f6bff));
	box-shadow:
		0 8px 16px -7px color-mix(in srgb, var(--rdv-color, #2f6bff) 65%, transparent),
		0 2px 5px rgba(15,23,42,.16),
		inset 0 1px 0 rgba(255,255,255,.4);
	transition: transform .16s var(--as-ease), box-shadow .16s var(--as-ease);
}
.as-space-cal-cell__rdv-name {
	font-size: 0.72rem; font-weight: 750; color: var(--sp-white); line-height: 1.15; text-shadow: 0 1px 1px rgba(0,0,0,.22);
	max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.as-space-cal-cell__rdv-dur { font-size: 0.62rem; font-weight: 600; color: var(--sp-white); opacity: 0.92; }
/* Les trois lignes ne s'ECRASENT PAS. La carte est un conteneur flex en colonne :
   quand son contenu depasse, flex comprime les elements au lieu de deborder, et
   c'est la ligne du milieu (le nom) qui encaisse. Elle passait de 13px a 6px et
   le nom se retrouvait tranche en deux, avec la duree intacte en dessous, ce qui
   rendait le defaut incomprehensible. On interdit la compression : si ca ne tient
   pas, la carte coupe proprement par le bas, et le mode serre prend le relais. */
.as-space-cal-cell__rdv > * { flex: none; }
/* Survol (sur la cellule de tête du RDV) : léger soulèvement. */
.as-space-cal-cell.is-booked:hover .as-space-cal-cell__rdv {
	transform: translateY(-1px);
	box-shadow:
		0 12px 22px -8px color-mix(in srgb, var(--rdv-color, #2f6bff) 70%, transparent),
		0 4px 8px rgba(15,23,42,.2),
		inset 0 1px 0 rgba(255,255,255,.45);
}
/* RDV réalisé (intervention validée) : chip vert. */
.as-space-cal-cell.is-booked.is-done { background: transparent; border-color: var(--sp-gray1); }
.as-space-cal-cell.is-booked.is-done .as-space-cal-cell__rdv {
	background: linear-gradient(160deg, #86efac, #22c55e);
	box-shadow: 0 8px 16px -7px rgba(34,197,94,.55), 0 2px 5px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.45);
}
.as-space-cal-cell.is-booked.is-done:hover .as-space-cal-cell__rdv {
	box-shadow: 0 12px 22px -8px rgba(34,197,94,.6), 0 4px 8px rgba(15,23,42,.2), inset 0 1px 0 rgba(255,255,255,.5);
}
.as-space-cal-cell.is-booked.is-done .as-space-cal-cell__rdv-name,
.as-space-cal-cell.is-booked.is-done .as-space-cal-cell__rdv-dur { color: var(--sp-white); }

/* === RDV = CARTE BLANCHE carnet (override APRÈS les règles couleur d'origine) === */
.as-space-cal-cell__rdv{ background:var(--sp-white)!important; border:1px solid var(--sp-gray3); border-radius:var(--sp-radius); box-shadow:var(--as-shadow); color:var(--sp-gray7); padding:3px 6px; gap:1px; text-shadow:none; align-items:stretch; }
.as-space-cal-cell__rdv-time{ font-family:'Courier Prime',monospace; font-weight:700; font-size:.62rem; color:var(--sp-gray6); display:flex; align-items:center; gap:.28rem; text-shadow:none; }
.as-space-cal-cell__rdv-name{ font-family:'Archivo',sans-serif; font-weight:700; font-size:.72rem; color:var(--sp-gray7)!important; text-shadow:none; }
.as-space-cal-cell__rdv-dur{ font-family:'Courier Prime',monospace; font-size:.6rem; color:var(--sp-gray5)!important; opacity:1; }
/* Board Rendez-vous : barres du haut resserrées pour laisser la place aux fiches
   (le board doit tenir dans la page sans la faire défiler). */
.as-space-page > .as-space-header{ margin-bottom:12px; }
.as-space-page > .as-space-staff-filter{ margin-bottom:10px; }
.as-rdv-toolbar{ margin-bottom:10px; }
.as-rdv-chips{ margin-bottom:10px; }

/* Board Rendez-vous : pagination de la colonne « Confirmés ». */
.as-col__pager{
	display:flex; align-items:center; justify-content:center; gap:.6rem;
	margin:8px 0 0; padding-top:8px;
	border-top:1px solid var(--sp-gray2);
}
.as-col__pager[hidden]{ display:none; }
.as-col__pager-btn{
	width:30px; height:30px; line-height:1; font-size:1rem;
	display:inline-flex; align-items:center; justify-content:center;
	background:var(--sp-white); color:var(--sp-gray7);
	border:1px solid var(--sp-gray3); border-radius:var(--sp-radius);
	cursor:pointer;
}
.as-col__pager-btn:hover:not(:disabled){ border-color:var(--sp-amber); color:var(--sp-amber); }
.as-col__pager-btn:disabled{ opacity:.35; cursor:default; }
.as-col__pager-lbl{
	font-family:'Courier Prime',monospace; font-size:.68rem;
	letter-spacing:.04em; color:var(--sp-gray5); white-space:nowrap;
}

/* ── Planning semaine : rendu « zones continues » de la maquette ───────────────
   La grille reste découpée en créneaux (c'est elle qui reçoit les clics : bloquer,
   libérer, poser un RDV), mais elle se DESSINE comme la maquette : un filet à
   l'heure pleine seulement, et des plages de même nature qui se rejoignent sans
   couture. 46px par heure au lieu de 76 : la semaine tient dans la page. */
/* Aucune bordure entre les quarts d'heure : une bordure « transparente » occupe
   quand même 1px et laisse voir le fond de la grille, ce qui redessine un liseré.
   On la retire donc vraiment, et on ne la remet qu'avant une heure pleine. */
.as-space-cal-row{ border-bottom-width:0; }
.as-space-cal-row:has(+ .as-space-cal-row:not(.is-half)){
	border-bottom-width:1px;
	border-bottom-color:var(--sp-gray2);
}
.as-space-cal-row:has(+ .as-space-cal-row.is-halfhour){ border-bottom-width:0; }
/* La barre d'actions (verrou, « Placer sur un créneau ») vit dans la barre du
   planning : une seule ligne d'outils au-dessus du calendrier, comme la maquette. */
.as-plan-bar > .as-space-cal-toolbar{
	display:flex; align-items:center; gap:10px;
	margin:0 0 0 auto; flex:1 1 auto; justify-content:flex-end;
}
.as-plan-bar > .as-space-cal-toolbar .as-space-cal-hint{ display:none; }
@media (max-width:900px){
	.as-plan-bar > .as-space-cal-toolbar{ margin-left:0; width:100%; justify-content:flex-start; }
}

/* La hauteur est portée par la LIGNE, la cellule s'étire dedans : si c'est la
   cellule qui la porte, tout écart d'arrondi laisse voir le fond de la grille
   sous forme de fine séparation claire au milieu des plages. */
.as-space-cal-row{ height:var(--cal-row, 12px); }
.as-space-cal-row > .as-space-cal-cell{ height:auto; align-self:stretch; }

/* Le libellé d'heure ne doit pas imposer sa hauteur à la ligne : dans la maquette
   il vit dans une colonne à part. On le sort du flux et on le pose sur le trait. */
.as-space-cal-row{ min-height:0; }
.as-space-cal-row > *{ min-height:0; }
.as-space-cal-time{ position:relative; overflow:visible; }
.as-space-cal-time span{
	position:absolute; right:6px; top:0;
	transform:translateY(-50%);
	font-family:'Courier Prime',monospace; font-size:.58rem; font-weight:400;
	color:var(--sp-gray5); line-height:1;
}
.as-space-cal-cell{ min-height:0; }
/* À l'échelle de lecture (12px par quart d'heure), un nom ne tient pas dans un
   créneau bloqué : la hachure suffit, le nom est en infobulle. Il ne s'écrit
   qu'en mode édition, où la grille est agrandie. */
.as-space-cal-cell__blocked{ display:none; }
#as-space-calendar.is-editable .as-space-cal-cell__blocked{ display:flex; }
/* La première heure n'est pas remontée : elle passerait sous l'en-tête collant.
   Cibler la ligne qui SUIT l'en-tête (`:first-of-type` visait l'en-tête lui-même,
   les deux étant des div frères). */
.as-space-cal-header + .as-space-cal-row .as-space-cal-time span{ transform:none; top:1px; }
/* Légende sous le calendrier, dans le cadre, comme la maquette. */
#as-plan-semaine > .as-space-cal-legend{
	display:flex; align-items:center; flex-wrap:wrap; gap:.9rem;
	margin:10px 0 0; padding:0;
	background:none; border:0;
}
#as-plan-semaine > .as-space-cal-legend[hidden]{ display:none; }
/* Édition : on rend la grille plus confortable à viser, la compacité ne sert
   qu'à la lecture. */
/* !important : la hauteur de ligne est posée en style inline par la vue (calculée
   selon le pas de la grille), et un style inline l'emporte sur une règle simple. */
#as-space-calendar.is-editable .as-space-cal-grid{ --cal-row:19px !important; }
/* Jour fermé : l'état « fermé » prime sur la pause (sinon les deux hachures se
   superposent sur le samedi et le dimanche). */
.as-space-cal-cell.is-off.is-lunch{
	background:var(--sp-off) !important;
	background-image:none !important;
}

/* Ligne de clôture : marque l'heure de fermeture au bas de la grille. Hauteur
   nulle, le libellé se pose sur le trait de fin (comme les autres heures). */
/* Ligne de clôture : le trait de fin est le bord bas du cadre lui-même, on n'en
   rajoute pas un second juste au-dessus. L'heure de fermeture se pose AU-DESSUS
   du trait plutôt qu'à cheval, sinon elle chevauche la bordure du cadre. */
.as-space-cal-row--end{ height:0; border-bottom-width:0; border-top:0; }
.as-space-cal-row--end .as-space-cal-cell--end{
	height:0; padding:0; background:none; border-bottom:0; border-left-color:transparent;
}
.as-space-cal-row--end .as-space-cal-time span{
	transform:translateY(-100%);
	top:-2px;
}

/* Libellé d'une plage (pause, fermé, congé) : une seule fois, en tête de plage. */
.as-space-cal-cell__band{
	display:block; text-align:center;
	font-family:'Courier Prime',monospace; font-size:.6rem;
	letter-spacing:.06em; text-transform:uppercase;
	line-height:1.1; padding-top:4px; white-space:nowrap;
	pointer-events:none;
}
.as-space-cal-cell.is-lunch .as-space-cal-cell__band{ color:#B4302B; opacity:.75; }
.as-space-cal-cell.is-off .as-space-cal-cell__band{ color:var(--sp-gray5); letter-spacing:.12em; }

/* Planning : barres du haut compactées pour rendre la hauteur au calendrier.
   La légende est passée dans la barre d'outils, à droite du sélecteur de vue. */
.as-plan-page > .as-space-staff-filter{ margin-bottom:8px; }
.as-plan-page > .as-space-cal-toolbar{ margin:0 0 8px; }
.as-plan-bar{ flex-wrap:wrap; margin-bottom:8px; }
#as-plan-semaine > .as-space-cal-wrap{ margin-top:0; }

/* Carte de RDV courte : heure et nom sur une seule ligne, durée retirée.
   Sans ça, trois lignes de texte se retrouvent rognées dans 22px de haut. */
.as-space-cal-cell__rdv.is-tight{ flex-direction:row; align-items:baseline; gap:.32rem; padding:2px 5px; }
.as-space-cal-cell__rdv.is-tight .as-space-cal-cell__rdv-dur{ display:none; }
.as-space-cal-cell__rdv.is-tight .as-space-cal-cell__rdv-name{
	font-size:.68rem; min-width:0;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.as-space-cal-cell__rdv.is-tight .as-space-cal-cell__rdv-time{ flex:none; }
/* Créneau bloqué : le libellé n'est porté que par la tête de série. Les cellules
   de continuation n'affichent que la hachure, sans filet de séparation. */
.as-space-cal-cell.is-blocked-cont{ border-top-color:transparent; }
.as-space-cal-cell__blocked{
	align-items:center; gap:.22rem;
	font-size:.62rem; line-height:1.1; white-space:nowrap;
	overflow:hidden; text-overflow:ellipsis;
}
.as-space-cal-cell.is-booked:hover .as-space-cal-cell__rdv{ box-shadow:0 3px 0 rgba(20,30,29,.08), 0 16px 26px -14px rgba(5,13,16,.45); transform:translateY(-1px); }
.as-space-cal-cell.is-booked.is-done .as-space-cal-cell__rdv{ opacity:.82; }

.as-space-cal-cell.is-off,
.as-space-cal-cell.is-past { background: var(--sp-gray1); }
/* Un RDV reste visible même sur un jour passé : le chip flottant porte la couleur. */
/* Réservé sur un jour passé : on garde le gris de la colonne derrière le chip (pas de cadre blanc). */
.as-space-cal-cell.is-past.is-booked { background: var(--sp-gray1); border-color: var(--sp-gray1); }
.as-space-cal-cell.is-past.is-booked.is-done { background: var(--sp-gray1); border-color: var(--sp-gray1); }
/* Pause déjeuner : hachures diagonales (la plage reste visible mais clairement neutralisée). */
.as-space-cal-cell.is-lunch {
	background-color: var(--sp-gray1);
	background-image: repeating-linear-gradient(
		45deg,
		transparent, transparent 5px,
		rgba(148, 163, 184, 0.35) 5px, rgba(148, 163, 184, 0.35) 7px
	);
}
.as-space-cal-cell__client {
	font-size: 0.62rem;
	font-weight: 600;
	color: #1d4ed8;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 3px;
	line-height: 30px;
	display: block;
}

/* Popup RDV */
.as-space-rdv-popup {
	display: none;
	position: fixed;
	z-index: 9999;
	background: var(--sp-white);
	border: 1px solid #bfdbfe;
	border-radius: 10px;
	padding: 12px 14px;
	min-width: 200px;
	max-width: 280px;
	box-shadow: 0 8px 24px rgba(15,23,42,0.12);
}
.as-space-rdv-popup.is-open { display: block; }
.as-space-rdv-popup__close { float: right; background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--sp-gray5); padding: 0; }
.as-space-rdv-popup__status {
	font-weight: 700; font-size: 0.8rem; margin: 0 0 8px; color: var(--sp-gray5);
	text-align: center; padding-bottom: 6px; border-bottom: 1px solid var(--sp-gray2);
}
.as-space-rdv-popup__service { font-weight: 700; color: var(--sp-dark); margin: 0 0 4px; font-size: 0.88rem; }
.as-space-rdv-popup__name,
.as-space-rdv-popup__address { font-size: 0.84rem; color: #1e3a8a; margin: 0 0 3px; }
.as-space-rdv-popup__message { font-size: 0.84rem; color: var(--sp-gray5); margin: 4px 0 0; font-style: italic; }
.as-space-rdv-popup__manage { display: inline-block; margin-top: 10px; font-size: 0.83rem; font-weight: 700; color: var(--sp-amber-deep); text-decoration: underline; }

/* Focus visible des popups déplacés en enfant de <body> (hors portée .as-app). */
.as-space-rdv-popup :focus-visible,
.as-quick-pop :focus-visible { outline: 2px solid var(--sp-amber); outline-offset: 2px; }
.as-space-rdv-popup__manage:hover { text-decoration: underline; }

/* ── Filtre technicien (planning admin) ── */
.as-space-staff-filter {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 16px;
	font-size: 0.85rem;
}
.as-space-staff-filter > span { font-weight: 600; color: var(--sp-gray5); }
.as-space-filter-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border: 1.5px solid var(--sp-gray2);
	border-radius: 100px;
	text-decoration: none;
	color: var(--sp-gray7);
	font-weight: 600;
	transition: border-color 0.12s, background 0.12s;
}
.as-space-filter-pill:hover { border-color: var(--sp-amber); color: var(--sp-gray7); }
.as-space-filter-pill.is-active { background: var(--sp-navy); color: var(--sp-white); border-color: var(--sp-navy); }
.as-space-filter-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* Filtre par personne : même vocabulaire que le sélecteur de vue placé juste en
   dessous (Semaine / Jour / Agenda). Les pilules très arrondies au fond pétrole
   plein juraient avec le carnet, où le coin est à 2-3px et l'état actif porte le
   violet tampon. La pastille de couleur reste : elle identifie l'intervenant. */
.as-space-filter-pill{
	padding:.42rem .8rem;
	border:1.5px solid color-mix(in srgb, var(--sp-dark) 22%, transparent);
	border-radius:var(--sp-radius);
	font-family:'Archivo',sans-serif;
	font-weight:600;
	font-size:.82rem;
	color:var(--sp-gray6);
	background:transparent;
}
.as-space-filter-pill:hover{
	border-color:var(--sp-dark);
	color:var(--sp-gray7);
	background:transparent;
}
.as-space-filter-pill.is-active{
	background:var(--sp-amber);
	border-color:var(--sp-amber);
	color:var(--sp-on-accent);
}
/* Sur fond violet, la pastille garde son contour pour rester lisible. */
.as-space-filter-pill.is-active .as-space-filter-dot{
	box-shadow:0 0 0 1.5px color-mix(in srgb, var(--sp-on-accent) 70%, transparent);
}
/* Intitulé « Planning de : » dans le même registre que les micro-libellés. */
.as-space-staff-filter > span{
	font-family:'Courier Prime',monospace;
	font-size:.62rem;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--sp-gray5);
	font-weight:400;
}

/* ── Badge technicien sur carte RDV ── */
.as-space-card-rdv__tech {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--sp-gray7);
	margin-bottom: 8px;
}
.as-space-tech-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ── Réassignation (placée en entête de carte, centrée) ── */
.as-space-card-rdv__assign {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 10px;
}
.as-space-card-rdv__assign label { font-size: 0.8rem; font-weight: 600; color: var(--sp-gray5); }
.as-space-card-rdv__assign select {
	padding: 5px 8px;
	border: 1px solid var(--sp-gray3);
	border-radius: 6px;
	font-size: 0.85rem;
	font-family: inherit;
	background: var(--sp-white);
}

/* ── Accréditation ── */
.as-accred-list { display: flex; flex-direction: column; gap: 8px; }
.as-accred-item {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--sp-gray2);
	border-radius: 10px;
	background: var(--sp-white);
	transition: opacity 0.3s;
}
.as-accred-dot { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; }
/* Avatar photo du membre (gamme Esthetics) : photo en fond, sinon couleur planning. */
.as-accred-avatar-wrap { position: relative; flex: 0 0 auto; width: 40px; height: 40px; }
.as-accred-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--sp-gray2, #e2e8f0); background: var(--av-color, #f59e0b) center/cover no-repeat; cursor: pointer; padding: 0; display: block; transition: border-color .15s, box-shadow .15s; }
.as-accred-avatar:hover { border-color: var(--sp-amber); box-shadow: 0 0 0 3px var(--sp-amber-ring); }
.as-accred-avatar.has-photo { border-color: var(--av-color, #f59e0b); }
.as-accred-avatar-x { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: var(--sp-dark, #0f172a); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.as-accred-avatar-x:hover { background: #b91c1c; }
/* Interdictions de prestations (denylist) par personne. */
.as-accred-services { flex: 1 1 100%; margin-top: 8px; font-size: 13px; }
.as-accred-services > summary { cursor: pointer; color: var(--sp-gray6, #475569); font-weight: 600; list-style: none; }
.as-accred-services > summary::-webkit-details-marker { display: none; }
.as-accred-services > summary::before { content: '\25B8\00a0'; }
.as-accred-services[open] > summary::before { content: '\25BE\00a0'; }
.as-accred-services__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 5px 14px; margin: 9px 0; }
.as-accred-services__opt { display: flex; align-items: center; gap: 7px; font-weight: 400; }
.as-accred-services__opt input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--sp-gray3, #cbd5e1); border-radius: 5px; background: #fff; cursor: pointer; }
.as-accred-services__opt input[type="checkbox"]:checked { background-color: #b91c1c; border-color: #b91c1c; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); background-size: 13px; background-position: center; background-repeat: no-repeat; }
.as-accred-services__opt input[type="checkbox"]:focus-visible { outline: 2px solid var(--sp-amber); outline-offset: 2px; }
.as-accred-services__opt:has(input:checked) span { color: #b91c1c; text-decoration: line-through; }
.as-accred-services__hint { color: var(--sp-gray5, #64748b); font-size: 12px; margin: 2px 0 0; }
.as-accred-info { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.as-accred-info strong { font-size: 0.92rem; color: var(--sp-dark); }
.as-accred-info span   { font-size: 0.8rem; color: var(--sp-gray5); }

.as-accred-form { display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
.as-accred-palette { display: flex; gap: 8px; flex-wrap: wrap; }
.as-accred-swatch {
	width: 30px; height: 30px;
	border-radius: 8px;
	border: 2px solid transparent;
	cursor: pointer;
	padding: 0;
	transition: transform 0.12s;
}
.as-accred-swatch:hover { transform: scale(1.1); }
.as-accred-swatch.is-selected { border-color: var(--sp-dark); box-shadow: 0 0 0 2px var(--sp-white) inset; }

/* ── Login ── */
.as-space-login {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	padding: 40px 20px;
}
.as-space-login__card {
	text-align: center;
	background: var(--sp-white);
	border: 1px solid var(--sp-gray2);
	border-radius: var(--sp-radius);
	padding: 40px 32px;
	max-width: 340px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.as-space-login__icon { font-size: 2.5rem; margin-bottom: 12px; }
.as-space-login__card h2 { font-size: 1.2rem; color: var(--sp-dark); margin: 0 0 8px; }
.as-space-login__card p  { font-size: 0.9rem; color: var(--sp-gray5); margin: 0 0 20px; }

/* ── Status badges (réutilisation du style admin) ── */
/* Etat = gommette + mot (registre). Semantique plugin conservee. */
.as-status {
	display: inline-flex; align-items: center; gap: .42rem;
	padding: 0; border-radius: 0; background: transparent;
	font-family:'Archivo',sans-serif; font-size: 0.78rem; font-weight: 600; color: var(--sp-gray6);
	white-space: nowrap;
}
/* PUNAISE, pas pastille. Vue de dessus : tete bombee, reflet en haut a gauche,
   creux en bas a droite, et une ombre portee sur le papier. C'est l'ombre qui
   fait la difference : sans elle, un degrade circulaire reste une gommette.
   La couleur passe par --gom et non par `background`, sinon la regle courte des
   variantes effacerait les degrades du relief. */
.as-status{ --gom: var(--sp-gray4); }
.as-status--pending   { --gom: var(--sp-g-jaune); }
.as-status--confirmed { --gom: var(--sp-g-verte); }
.as-status--cancelled { --gom: var(--sp-g-rouge); }
.as-status--done      { --gom: var(--sp-g-verte); }
.as-status--noshow    { --gom: var(--sp-g-rouge); }
/* Deux morceaux : la tete (::before) et l'AIGUILLE (::after). C'est l'aiguille
   qui fait la punaise ; sans elle, un degrade circulaire donne une bille, quel
   que soit le soin mis au reflet. Testee a taille reelle et agrandie. */
.as-status{ position: relative; }
/* --pw : taille du corps. --pique : inclinaison de la punaise, tete en haut a
   droite et aiguille en bas a gauche, comme une punaise vraiment plantee. Le
   corps et l'aiguille sont deux elements distincts : ils tournent autour du
   MEME centre (celui du corps), sinon l'aiguille se decroche du corps. */
.as-status{ --pw: 13px; --pique: 24deg; }
/* Le corps : silhouette en masque, donc UNE seule forme pour toutes les
   couleurs (la teinte reste portee par --gom). Le capuchon plat est en RETRAIT
   sur le corps bombe : c'est cet epaulement qui fait lire la punaise. Sans lui,
   la silhouette devient un vase, essaye et verifie. */
.as-status::before {
	content: ''; flex: none; width: var(--pw); height: var(--pw);
	background-color: var(--gom);
	/* Angles compenses par l'inclinaison : les degrades tournent avec l'element,
	   donc sans cette soustraction la lumiere changerait de cote des qu'on
	   incline la punaise. La source reste en haut a gauche, comme le reste. */
	background-image:
		linear-gradient(calc(100deg - var(--pique)), rgba(255,255,255,.8) 0 12%, rgba(255,255,255,.22) 26%, transparent 44%),
		linear-gradient(calc(287deg - var(--pique)), rgba(0,0,0,.38) 0 18%, transparent 48%);
	/* Capuchon BOMBE : un dessus plat se lit comme une punaise coupee. Le trace
	   est borne au corps seul (viewBox 24x18) et le masque est ancre en HAUT sur
	   74 % de la hauteur : la base du corps tombe donc a un endroit connu, et
	   l'aiguille peut s'y raccorder au lieu de traverser le corps. */
	-webkit-mask: var(--as-pin) top center / 100% 74% no-repeat;
	        mask: var(--as-pin) top center / 100% 74% no-repeat;
	transform: rotate(var(--pique));
}
/* L'aiguille : metallique, donc a part du corps colore. */
.as-status::after {
	content: ''; position: absolute; pointer-events: none;
	/* Ancrage au MILIEU du badge, pas a son sommet : le corps fait 13px dans une
	   ligne de 19px et s'y centre, donc un `top` compte depuis le haut du badge
	   plantait l'aiguille en plein milieu du corps. On repart du centre, auquel
	   on ajoute la demi-hauteur du corps. */
	left: calc(var(--pw) * .455); top: calc(50% + var(--pw) * .235);
	width: max(1px, calc(var(--pw) * .09)); height: calc(var(--pw) * .3);
	/* Origine ramenee au centre du CORPS (et non au sommet de l'aiguille) :
	   c'est la seule facon que les deux morceaux tournent ensemble. */
	transform-origin: calc(var(--pw) * .045) calc(var(--pw) * -.235);
	transform: rotate(var(--pique));
	background: linear-gradient(90deg, #8d9599, #eef2f4 45%, #798286);
}

/* ── Responsive mobile ── */
@media (max-width: 600px) {
	.as-space-nav { padding: 0 12px; gap: 6px; }
	/* On masque le nom du site : il grignotait la place des onglets sur petit écran (l'icône 🔨 suffit). */
	.as-space-nav__name { display: none; }
	.as-space-nav__tab-label { display: none; }
	.as-space-nav__tab { padding: 8px 10px; }
	/* En mobile on garde l'avatar dans la nav, on masque texte + déconnexion (dispo dans le bandeau). */
	.as-space-nav__ident,
	.as-space-nav__logout { display: none; }
	.as-space-main { padding: 14px 12px 32px; }
	.as-space-identity { padding: 12px 14px; }
	.as-space-identity__name { font-size: 1.05rem; }
	.as-space-cards { grid-template-columns: repeat(2, 1fr); }
	/* Actions rapides en pleine largeur sur mobile (chaque bouton bien séparé). */
	.as-space-card-rdv__quick > .as-space-btn { flex: 1 1 calc(50% - 10px); justify-content: center; }
}

/* ── Très petits écrans (≤ 380 px) : on resserre encore, sans rien tasser ── */
@media (max-width: 380px) {
	.as-space-main { padding: 12px 10px 28px; }
	.as-space-cards { gap: 8px; }
	.as-space-identity__avatar { width: 38px; height: 38px; font-size: 0.9rem; }
	.as-space-identity__name { font-size: 1rem; }
	.as-space-header h1 { font-size: 1.25rem; }
	/* Les pastilles de filtre par personne : on autorise le retour à la ligne sans débordement. */
	.as-space-filter-pill { padding: 5px 10px; font-size: 0.8rem; }
}

/* ── Éditeur de repas + consultation seule ── */
.as-space-lunch-editor {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px;
	padding: 10px 14px; margin-bottom: 14px; font-size: 0.88rem; font-weight: 600;
	color: #9a3412;
}
.as-space-lunch-editor input[type="time"] {
	border: 1px solid var(--sp-gray3); border-radius: 6px; padding: 4px 8px;
	font-size: 0.85rem; height: 32px;
}
.as-space-lunch-editor__msg { font-size: 0.82rem; }

/* Horaires spécifiques par employé (Réglages → Suite Employé) */
.as-staff-hours {
	margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--sp-gray2);
}
.as-staff-hours__title { margin: 0 0 4px; font-size: 0.98rem; }
.as-staff-hours__sub { margin: 0 0 12px; font-size: 0.82rem; color: var(--sp-gray5); line-height: 1.5; }
.as-staff-hours__empty { margin: 0; font-size: 0.85rem; color: var(--sp-gray5); }
.as-staff-hours__row {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	background: var(--sp-gray1); border: 1px solid var(--sp-gray2); border-radius: 10px;
	padding: 12px 14px;
}
.as-staff-hours__select {
	border: 1px solid var(--sp-gray3); border-radius: 6px; padding: 5px 10px;
	font-size: 0.85rem; height: 34px; background: var(--sp-white); min-width: 160px;
}
.as-staff-hours__time {
	border: 1px solid var(--sp-gray3); border-radius: 6px; padding: 4px 8px;
	font-size: 0.85rem; height: 34px; background: var(--sp-white);
}
.as-staff-hours__time:disabled { background: var(--sp-gray1); color: var(--sp-gray4); }
.as-staff-hours__arrow { color: var(--sp-gray5); font-weight: 700; }
.as-staff-hours__msg { font-size: 0.82rem; font-weight: 600; }
.as-staff-hours__state { margin: 8px 2px 0; font-size: 0.8rem; color: var(--sp-gray5); }
.as-space-cal-readonly {
	background: var(--sp-gray1); border-radius: 8px; padding: 10px 14px;
	font-size: 0.88rem; color: var(--sp-gray5); margin-bottom: 14px;
}

/* ── Commentaire d'intervention (note pro) ── */
.as-space-card-rdv__note {
	display: flex; flex-direction: column; gap: 6px;
	padding-top: 10px; margin-top: 6px;
	border-top: 1px dashed var(--sp-gray2);
}
.as-space-card-rdv__note > label { font-size: 0.8rem; font-weight: 600; color: var(--sp-gray5); }
.as-space-card-rdv__note textarea {
	width: 100%; box-sizing: border-box; resize: vertical; min-height: 44px;
	padding: 8px 10px; border: 1px solid var(--sp-gray2); border-radius: 8px;
	font: inherit; font-size: 0.85rem;
}
/* Interrupteur compact en ligne (réutilise le switch standard, sur une seule ligne). */
.as-space-toggle--inline { align-items: center; gap: 10px; }
.as-space-toggle--inline .as-space-toggle__sw { margin-top: 0; }
.as-space-toggle__inline { font-size: 0.82rem; color: var(--sp-gray5); font-weight: 500; }
/* Commentaire modifié mais pas encore enregistré : repère visuel + rappel. */
.as-space-card-rdv__note.is-dirty textarea { border-color: var(--sp-amber); background: var(--sp-amber-soft); }
.as-space-card-rdv__note.is-dirty > label::after {
	content: " ● non enregistré";
	color: var(--sp-amber); font-weight: 700; font-size: 0.78rem;
}

/* ── Historique des reports (résumé discret, dépliable) ── */
.as-space-reschedule-log { margin-top: 8px; font-size: 0.8rem; }
.as-space-reschedule-log > summary {
	cursor: pointer; color: var(--sp-gray5); font-weight: 600;
	padding: 4px 0; list-style: none; user-select: none;
}
.as-space-reschedule-log > summary::-webkit-details-marker { display: none; }
.as-space-reschedule-log > summary:hover { color: var(--sp-dark); }
.as-reschedule-log__origin { font-weight: 400; color: var(--sp-gray5); }
.as-reschedule-log__list { margin: 4px 0 0; padding-left: 18px; color: var(--sp-gray5); }
.as-reschedule-log__list li { margin: 2px 0; }
.as-reschedule-log__num { color: var(--sp-gray5); }
.as-reschedule-log__at { color: var(--sp-gray5); font-style: italic; }

/* ====================================================================
   REDESIGN « APP » — sidebar sombre + topbar + contenu plein écran
   ==================================================================== */
.as-app{
	position:fixed; inset:0; z-index:9990; display:flex; overflow:hidden;
	background:var(--sp-dark); color:var(--sp-gray7);
	font-family:'Libre Franklin',system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased;
	font-size:15px; line-height:1.55;
}
body.admin-bar .as-app{ top:32px; }
@media (max-width:782px){ body.admin-bar .as-app{ top:46px; } }

/* ── Sidebar ── */
.as-side{
	width:220px; flex:0 0 220px; color:var(--as-on-dark);
	display:flex; flex-direction:column; padding:0; overflow-y:auto; border-right:1px solid #000;
	background-color:var(--sp-navy);
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"),
		repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
		repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px);
}
.as-side__brand{ display:flex; align-items:center; gap:.6rem; padding:15px 14px 13px; border-bottom:1px solid rgba(0,0,0,.4); }
.as-side__mark{
	width:34px; height:34px; border-radius:2px; flex:none; color:var(--sp-amber);
	background:var(--sp-white); box-shadow:0 1px 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.12);
	display:flex; align-items:center; justify-content:center;
}
.as-side__mark svg{ width:18px; height:18px; }
.as-side__logo{ display:flex; align-items:center; flex:none; }
.as-side__logo-img{ max-height:38px; max-width:158px; width:auto; height:auto; display:block; }
.as-side__brandtext{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.as-side__brandtext b{ color:#fff; font-family:'Archivo',sans-serif; font-weight:800; font-size:.96rem; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.as-side__brandtext small{ color:var(--sp-g-jaune); font-family:'Courier Prime',monospace; font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; margin-top:2px; }
.as-side__nav{ display:flex; flex-direction:column; gap:2px; padding:12px 10px 6px; margin-top:0; }
/* Intitulé de groupe d'onglets. */
.as-side__group{ margin:14px 10px 4px 10px; font-family:'Courier Prime',monospace; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--as-on-dark-faint); opacity:1; }
.as-side__item{
	display:flex; align-items:center; gap:.6rem; padding:.5rem .6rem; border-radius:2px;
	color:var(--as-on-dark); font-weight:500; font-size:.9rem; text-decoration:none; position:relative;
	transition:background .18s var(--as-ease), color .18s var(--as-ease);
}
.as-side__item svg{ width:18px; height:18px; flex:none; opacity:.75; stroke-width:1.9; }
.as-side__item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.as-side__item.is-active{ background:rgba(255,255,255,.07); color:#fff; }
.as-side__item.is-active::before{
	content:""; position:absolute; left:-10px; top:.5rem; bottom:.5rem;
	width:3px; border-radius:0 2px 2px 0; background:var(--sp-g-jaune);
}
.as-side__item.is-active svg{ opacity:1; color:var(--sp-g-jaune); }
.as-side__user{
	margin-top:auto; border-top:1px solid rgba(255,255,255,.07); padding-top:14px;
	display:flex; align-items:center; gap:8px;
}
.as-side__me{
	display:flex; align-items:center; gap:11px; flex:1; min-width:0;
	text-decoration:none; border-radius:10px; padding:5px 6px; margin-left:-6px;
	transition:background .15s;
}
.as-side__me:hover, .as-side__me.is-active{ background:rgba(255,255,255,.07); }
.as-side__avatar{ width:34px; height:34px; border-radius:2px; flex:none; color:#FAF7FD; font-family:'Archivo',sans-serif; font-weight:800; font-size:.84rem;
	display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
.as-side__who{ display:flex; flex-direction:column; line-height:1.2; min-width:0; flex:1; }
.as-side__who b{ color:#fff; font-weight:600; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.as-side__who small{ font-family:'Courier Prime',monospace; font-size:.66rem; letter-spacing:.06em; }
.as-side__logout{ color:var(--as-on-dark-faint); flex:none; padding:6px; border-radius:8px; display:flex; transition:background .15s,color .15s; }
.as-side__logout svg{ width:18px; height:18px; }
.as-side__logout:hover{ background:rgba(255,255,255,.06); color:var(--sp-white); }
.as-side-scrim{ display:none; }

/* ── Zone principale ── */
.as-main{ flex:1; min-width:0; display:flex; flex-direction:column; min-height:0;
	background-color:var(--sp-off);
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)' opacity='.05'/%3E%3C/svg%3E");
}
.as-top{
	height:58px; flex:none; display:flex; align-items:center; gap:12px;
	padding:0 clamp(16px,3vw,30px); background:color-mix(in srgb,var(--sp-white) 90%,transparent); backdrop-filter:saturate(1.05) blur(8px);
	border-bottom:1px solid var(--sp-gray3);
}
.as-top__title{ font-family:'Archivo',sans-serif; font-size:1.1rem; font-weight:800; letter-spacing:-.02em; color:var(--sp-gray7); }
.as-top__cta{ margin-left:auto; flex:none; }
.as-burger{ display:none; align-items:center; justify-content:center; width:38px; height:38px; border-radius:2px;
	border:1.5px solid var(--as-line-2); background:transparent; cursor:pointer; color:var(--sp-gray7); }
.as-burger svg{ width:20px; height:20px; }
.as-content{ flex:1; overflow-y:auto; padding:clamp(18px,3vw,32px); }
.as-content > .as-space-page{ max-width:1120px; margin-inline:auto; }
.as-content > .as-space-page.as-dash{ max-width:1120px; margin-inline:auto; }
/* Le planning n'est pas une page de lecture : c'est une grille. Chaque pixel de
   largeur gagne est une colonne de jour plus lisible, alors que 1120px de large
   laissaient un tiers de l'ecran vide sur un grand moniteur. On lui rend la
   largeur disponible, avec une borne haute au-dela de laquelle les colonnes ne
   gagnent plus rien. Les autres pages (reglages, listes) gardent leur mesure de
   lecture : les etirer les rendrait moins lisibles, pas plus. */
.as-content > .as-space-page.as-plan-page{ max-width:1600px; }
.as-dash-grid{ display:grid; grid-template-columns:1.55fr 1fr; gap:18px; align-items:start; }
@media (max-width:940px){ .as-dash-grid{ grid-template-columns:1fr; } }
.as-space-panel__titles{ display:flex; flex-direction:column; gap:3px; min-width:0; }
/* Eyebrow banni dans le monde carnet : le titre porte seul. */
.as-eyebrow{ display:none; }
/* Animation d'entrée de page (à chaque chargement d'onglet). */
.as-content > .as-space-page{ animation:asPageIn .28s var(--as-ease) both; }
/* Entrée de page : opacité SEULE (pas de transform → n'établit pas de référentiel
   qui capturerait les panneaux position:fixed / le voile de la fiche RDV). */
@keyframes asPageIn{ from{opacity:0} to{opacity:1} }

/* ── Mobile : sidebar coulissante ── */
@media (max-width:820px){
	.as-side{ position:fixed; left:0; top:0; bottom:0; z-index:30; transform:translateX(-100%);
		transition:transform .25s var(--as-ease); box-shadow:0 10px 40px -10px rgba(0,0,0,.5); }
	body.admin-bar .as-side{ top:46px; }
	.as-side.is-open{ transform:none; }
	.as-side-scrim.is-open{ display:block; position:fixed; inset:0; background:rgba(16,24,40,.45); z-index:25; }
	.as-burger{ display:inline-flex; }
	.as-content{ padding:18px; }
	.as-top{ display:flex; padding:0 16px; }
}
@media (prefers-reduced-motion:reduce){ .as-app *{ animation:none !important; } }

/* ── Badge "demandes de rappel" sur l'onglet ── */
.as-side__badge{
	margin-left:auto; flex:none; min-width:19px; height:19px; padding:0 5px;
	border-radius:10px; background:var(--sp-g-rouge); color:#fff;
	font-family:'Courier Prime',monospace; font-size:.7rem; font-weight:700; line-height:19px; text-align:center;
}

/* ── Onglet « Demandes de rappel » ── */
.as-rappels-empty{ text-align:center; padding:48px 24px; }
.as-rappels-empty__icon{ font-size:40px; line-height:1; margin-bottom:10px; }
.as-rappels-empty h2{ font-size:17px; font-weight:700; color:var(--sp-dark); margin-bottom:6px; }
.as-rappels-empty p{ color:var(--sp-gray5); font-size:14px; max-width:420px; margin:0 auto; }
/* Demandes de rappel : rangees « registre » (nom, tel, provenance + actions). */
.as-rap-list{ list-style:none; margin:0; padding:.3rem 1.1rem 1rem; display:flex; flex-direction:column; }
.as-rap{ display:flex; align-items:center; gap:1rem; padding:.8rem 0; border-bottom:1px dashed var(--sp-gray2); }
.as-rap:last-child{ border-bottom:0; }
.as-rap__who{ flex:1; min-width:0; }
.as-rap__who b{ font-family:'Archivo',sans-serif; font-weight:700; font-size:.95rem; color:var(--sp-gray7); }
.as-rap__tel{ font-family:'Courier Prime',monospace; font-size:.82rem; color:var(--sp-gray6); margin-left:.5rem; }
.as-rap__meta{ font-size:.8rem; color:var(--sp-gray5); margin-top:2px; }
.as-rap__state{ flex:none; }
.as-rap__act{ display:flex; align-items:center; gap:7px; flex:none; }
@media (max-width:600px){ .as-rap{ flex-wrap:wrap; } .as-rap__who{ flex:1 1 100%; } .as-rap__act{ width:100%; } .as-rap__act .as-btn--primary{ flex:1; justify-content:center; } }

.as-rappels-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.as-rappels-item{
	display:flex; align-items:center; gap:16px 12px; padding:16px 6px; flex-wrap:wrap;
	border-bottom:1px solid var(--sp-gray2);
}
.as-rappels-item:last-child{ border-bottom:0; }
.as-rappels-item.is-done{ opacity:.62; }
.as-rappels-main{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.as-rappels-phone{
	font-weight:700; font-size:15px; color:var(--sp-dark); text-decoration:none;
	letter-spacing:.01em;
}
.as-rappels-phone:hover{ color:var(--sp-amber); }
.as-rappels-date{ font-size:12.5px; color:var(--sp-gray5); }
.as-rappels-status{ flex:none; }
.as-rappels-badge{
	display:inline-block; padding:4px 11px; border-radius:100px;
	font-size:11.5px; font-weight:700; white-space:nowrap;
}
.as-rappels-badge--new{ background:rgba(224,137,29,.14); color:#9a5a08; }
.as-rappels-badge--done{ background:rgba(34,197,94,.13); color:#15803d; }
/* Actions sur leur propre ligne, centrées (« Marquer rappelé » au centre, croix à côté). */
.as-rappels-actions{ flex:1 1 100%; display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; }
.as-rappels-actions form{ margin:0; }
.as-rappels-del{
	width:32px; height:32px; border-radius:8px; border:1px solid var(--sp-gray2);
	background:none; color:var(--sp-gray5); cursor:pointer; font-size:14px; line-height:1;
	transition:background .15s, color .15s, border-color .15s;
}
.as-rappels-del:hover{ background:#fef2f2; color:#dc2626; border-color:#fecaca; }

@media (max-width:560px){
	.as-rappels-item{ flex-wrap:wrap; gap:10px; }
	.as-rappels-main{ flex:1 1 100%; }
	.as-rappels-status{ order:2; }
	/* Les actions passent en pleine largeur et leurs boutons s'étirent → plus de débordement. */
	.as-rappels-actions{ order:3; flex:1 1 100%; justify-content:stretch; }
	.as-rappels-actions form{ flex:1 1 auto; }
	.as-rappels-actions .as-space-btn{ width:100%; justify-content:center; }
	.as-rappels-actions .as-rappels-del{ width:44px; flex:0 0 auto; }
}

/* ── Onglet Prestations ── */
.as-space-feedback--success{
	display:block; background:rgba(34,197,94,.12); color:#15803d;
	border:1px solid rgba(34,197,94,.28); border-radius:10px;
	padding:11px 16px; font-weight:600; font-size:14px; margin-bottom:16px;
}
.as-prest-head{
	display:flex; gap:12px; padding:0 4px 8px; font-size:12px; font-weight:700;
	text-transform:uppercase; letter-spacing:.06em; color:var(--sp-gray5);
}
.as-prest-head__name{ flex:1; }
.as-prest-head__col{ width:104px; text-align:center; }
.as-prest-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:12px; align-items:start; }
@media (max-width:520px){ .as-prest-list{ grid-template-columns:1fr; } }
.as-prest-row{ display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
/* Pastille de couleur de la prestation + description (passe en pleine largeur, 2e ligne). */
.as-prest-color{ flex:none; width:38px; height:38px; padding:2px; border:1px solid var(--as-line-2); border-radius:9px; background:var(--sp-white); cursor:pointer; }
.as-prest-desc{
	flex:1 1 100%; font:inherit; font-size:13.5px; padding:9px 12px;
	border:1px solid var(--as-line-2); border-radius:9px; background:var(--as-surface); color:var(--sp-dark);
}
.as-prest-desc:focus{ outline:none; border-color:var(--sp-amber); box-shadow:0 0 0 3px var(--sp-amber-ring); }
.as-prest-cat{
	flex:1 1 100%; margin-top:8px; font:inherit; font-size:13px; padding:8px 12px;
	border:1px solid var(--as-line-2); border-radius:9px; background:var(--as-surface); color:var(--sp-dark);
}
.as-prest-cat:focus{ outline:none; border-color:var(--sp-amber); box-shadow:0 0 0 3px var(--sp-amber-ring); }
.as-prest-name{
	flex:1; min-width:0; font:inherit; font-size:15px; padding:11px 14px;
	border:1px solid var(--as-line-2); border-radius:10px; background:var(--as-surface); color:var(--sp-dark);
}
.as-prest-field{ flex:none; display:flex; flex-direction:column; gap:4px; width:104px; cursor:default; }
.as-prest-field__lab{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--sp-gray5); padding-left:2px; }
.as-prest-field__box{ display:flex; align-items:center; gap:4px; }
.as-prest-num{
	width:62px; font:inherit; font-size:15px; padding:11px 8px; text-align:center;
	border:1px solid var(--as-line-2); border-radius:10px; background:var(--as-surface); color:var(--sp-dark);
}
.as-prest-name:focus, .as-prest-num:focus{ outline:none; border-color:var(--sp-amber); box-shadow:0 0 0 3px var(--sp-amber-ring); }
.as-prest-unit{ color:var(--sp-gray5); font-size:13px; }
.as-prest-del{
	flex:none; width:36px; height:36px; border-radius:9px; border:1px solid var(--as-line-2);
	background:none; color:var(--sp-gray5); cursor:pointer; font-size:14px; line-height:1;
	transition:background .15s,color .15s,border-color .15s;
}
.as-prest-del:hover{ background:#fef2f2; color:#dc2626; border-color:#fecaca; }
.as-prest-note{ margin:16px 2px 0; padding:12px 16px; list-style:none; background:var(--sp-off); border:1px solid var(--sp-gray2); border-radius:10px; color:var(--sp-gray5); font-size:13px; line-height:1.6; }
.as-prest-note li{ position:relative; padding-left:16px; }
.as-prest-note li::before{ content:"•"; position:absolute; left:2px; color:var(--sp-amber); }
.as-prest-note strong{ color:var(--sp-gray7); font-weight:700; }
/* Sélecteur de modèle métier (preset). */
.as-prest-preset{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; padding:12px 14px; background:var(--sp-off); border:1px solid var(--sp-gray2); border-radius:10px; }
.as-prest-preset label{ font-size:13.5px; font-weight:600; color:var(--sp-gray7); }
.as-prest-preset select{ font:inherit; font-size:14px; padding:7px 10px; border:1px solid var(--as-line-2); border-radius:8px; background:var(--sp-white); color:var(--sp-dark); }
.as-prest-preset__hint{ flex:1 1 100%; color:var(--sp-gray5); font-size:12.5px; }
.as-prest-add{ margin-top:16px; }
.as-prest-step{ margin-top:24px; max-width:280px; padding-top:20px; border-top:1px solid var(--sp-gray2); }
@media (max-width:560px){
	.as-prest-head{ display:none; }
	.as-prest-row{ flex-wrap:wrap; gap:8px; position:relative; padding-right:44px; }
	.as-prest-name{ flex:1 1 100%; }
	.as-prest-field{ width:auto; }
	.as-prest-num{ width:58px; }
	.as-prest-del{ position:absolute; top:0; right:0; }
}

/* ── Création manuelle de RDV (onglet Rendez-vous) ── */
.as-rdv-new{ margin-bottom:18px; }
.as-rdv-new-form{ text-align:left; } /* le formulaire reste aligné à gauche, seul le bouton est centré */
.as-rdv-new-form{
	display:none; margin-top:14px; padding:18px 20px;
	background:var(--as-surface); border:1px solid var(--sp-gray2); border-radius:var(--sp-radius);
}
.as-rdv-new-form.is-open{ display:block; animation:asPageIn .2s var(--as-ease) both; }
.as-rdv-new-grid{
	display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px 16px; margin-bottom:12px;
}
.as-rdv-new-form input, .as-rdv-new-form select, .as-rdv-new-form textarea{
	font:inherit; font-size:14px; padding:10px 12px; border:1px solid var(--as-line-2);
	border-radius:10px; background:var(--as-surface); color:var(--sp-dark); width:100%;
}
.as-rdv-new-form input:focus, .as-rdv-new-form select:focus, .as-rdv-new-form textarea:focus{
	outline:none; border-color:var(--sp-amber); box-shadow:0 0 0 3px var(--sp-amber-ring);
}
.as-rdv-new-actions{ margin-top:14px; }
.as-rdv-new-error{
	background:rgba(239,68,68,.1); color:#b91c1c; border:1px solid rgba(239,68,68,.25);
	border-radius:10px; padding:11px 16px; font-weight:600; font-size:14px; margin-bottom:16px;
}

/* ── Recherche live + groupement par jour (Rendez-vous / Historique) ── */
.as-rdv-toolbar{
	display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px;
}
.as-rdv-search{
	position:relative; flex:1 1 260px; min-width:220px;
}
.as-rdv-search__icon{
	position:absolute; left:12px; top:50%; transform:translateY(-50%);
	font-size:14px; opacity:.6; pointer-events:none;
}
.as-rdv-search input[type="search"]{
	font:inherit; font-size:14px; width:100%; padding:10px 12px 10px 36px;
	border:1px solid var(--as-line-2); border-radius:10px; background:var(--as-surface); color:var(--sp-dark);
}
.as-rdv-search input[type="search"]:focus{
	outline:none; border-color:var(--sp-amber); box-shadow:0 0 0 3px var(--sp-amber-ring);
}
.as-rdv-search__empty{
	flex:1 1 100%; margin:2px 0 0; color:var(--sp-gray5); font-size:13.5px; font-style:italic;
}
.as-rdv-day-sep{
	display:flex; align-items:center; gap:10px;
	margin:22px 0 10px; padding:0 2px;
	font-size:13px; font-weight:700; letter-spacing:.02em; text-transform:capitalize;
	color:var(--sp-gray5);
}
.as-rdv-day-sep::after{
	content:""; flex:1; height:1px; background:var(--as-line-2);
}
.as-rdv-day-sep:first-child{ margin-top:4px; }
.as-rdv-day-sep.is-today{ color:var(--sp-amber); }
.as-rdv-day-sep__today{
	flex:none; text-transform:uppercase; font-size:10.5px; font-weight:800; letter-spacing:.06em;
	color:var(--sp-white); background:var(--sp-amber); border-radius:999px; padding:2px 8px;
}
.as-rdv-day-sep.is-today::after{ background:rgba(224,137,29,.35); }
.as-rdv-day-sep.as-flash{
	animation:asDayFlash 1.2s var(--as-ease);
}
@keyframes asDayFlash{
	0%,100%{ background:transparent; }
	25%{ background:rgba(224,137,29,.14); }
}

/* ═══════════════════════════════════════════════════════════
   COMPOSANT FICHETTE (rework espace pro) — ligne desktop / card mobile
   ═══════════════════════════════════════════════════════════ */
.as-space-rdv-list{ gap:9px; }
.as-fiche{ background:var(--as-surface); border:1px solid var(--as-line-2); border-left:4px solid var(--sp-gray3); border-radius:13px; box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 22px -12px rgba(16,24,40,.18); position:relative; transition:box-shadow .15s var(--as-ease), transform .15s var(--as-ease); scroll-margin:16px 0; }
/* Accès rapide depuis le tableau de bord : la fiche ciblée par #as-rdv-<id> clignote brièvement. */
.as-fiche:target{ animation:asFicheTarget 1.8s ease-out 1; }
@keyframes asFicheTarget{
	0%,60%{ box-shadow:0 0 0 3px var(--sp-amber),0 10px 22px -12px rgba(16,24,40,.18); }
	100%{ box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 22px -12px rgba(16,24,40,.18); }
}
.as-fiche--pending{ border-left-color:var(--sp-amber); }
.as-fiche--confirmed{ border-left-color:#2563eb; }
.as-fiche--done{ border-left-color:#10b981; }
.as-fiche--cancelled,.as-fiche--noshow{ border-left-color:var(--sp-gray4); }
.as-fiche:hover{ box-shadow:0 2px 4px rgba(16,24,40,.06),0 16px 30px -14px rgba(16,24,40,.28); transform:translateY(-2px); }
.as-fiche.is-open{ box-shadow:0 2px 4px rgba(20,28,45,.05),0 12px 30px -10px rgba(20,28,45,.16); }
/* Mise en valeur d'une fiche atteinte via « Gérer ce RDV » (flash ambre bref). */
@keyframes asFicheFlash { 0%,100% { box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 22px -12px rgba(16,24,40,.18); } 30% { box-shadow:0 0 0 3px rgba(224,137,29,.55),0 12px 30px -10px rgba(224,137,29,.25); } }
.as-fiche.is-flash{ animation: asFicheFlash .9s var(--as-ease) 2; }

.as-fiche__row{ display:grid; grid-template-columns:52px 1fr auto auto; grid-template-areas:"time who pill act"; align-items:center; gap:0 12px; padding:12px 14px 12px 18px; }
.as-fiche__time{ grid-area:time; font-weight:800; font-size:.98rem; color:var(--sp-dark); }
.as-fiche__who{ grid-area:who; min-width:0; cursor:pointer; background:none; border:none; text-align:left; font:inherit; padding:0; }
.as-fiche__who b{ display:block; font-size:.95rem; font-weight:650; color:var(--sp-dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.as-fiche__who span{ font-size:.8rem; color:var(--sp-gray5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.as-fiche__pill{ grid-area:pill; justify-self:end; }
.as-fiche__act{ grid-area:act; display:flex; align-items:center; gap:7px; justify-self:end; }
/* Largeur uniforme pour l'action principale (Confirmer / Réalisé / Rouvrir…) */
.as-fiche__act .as-btn--primary,
.as-fiche__act .as-btn--ghost{ min-width:120px; justify-content:center; }

/* Système de boutons unifié */
.as-btn{ text-decoration:none; display:inline-flex; align-items:center; gap:6px; border-radius:8px; padding:7px 12px; font:inherit; font-size:.81rem; font-weight:600; cursor:pointer; border:1px solid transparent; white-space:nowrap; transition:background .12s, border-color .12s; }
.as-btn--primary{ background:var(--sp-amber); color:var(--sp-white); }
.as-btn--primary:hover{ background:#c77716; }
.as-btn--ghost{ background:var(--sp-white); border-color:var(--as-line-2); color:var(--sp-dark); }
.as-btn--ghost:hover{ border-color:var(--sp-gray3); background:var(--sp-off); }
.as-btn--more{ width:34px; justify-content:center; padding:7px; background:var(--sp-white); border-color:var(--as-line-2); color:var(--sp-gray5); }
.as-btn--more:hover{ border-color:var(--sp-gray3); }
.as-btn--nav{ background:var(--sp-white); border-color:var(--as-line-2); color:#1d4ed8; }
.as-btn--nav:hover{ border-color:#1d4ed8; }

/* Détail déplié */
.as-fiche__detail{ display:none; border-top:1px solid var(--sp-gray1); margin:0 14px; padding:13px 0 14px; }
.as-fiche.is-open .as-fiche__detail{ display:block; animation:asPageIn .2s var(--as-ease) both; }
.as-fiche__contact{ display:flex; flex-direction:column; gap:5px; margin-bottom:13px; }
.as-fiche__ln{ display:flex; align-items:center; gap:10px; font-size:.86rem; color:var(--sp-gray5); overflow-wrap:anywhere; }
.as-fiche__ico{ flex:none; width:16px; text-align:center; }
.as-fiche__ln a{ color:var(--sp-amber); text-decoration:none; font-weight:700; }
.as-fiche__tech{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 0; border-top:1px solid var(--sp-gray1); }
.as-fiche__tech label{ font-size:.82rem; color:var(--sp-gray5); font-weight:600; }
.as-fiche__select{ font:inherit; font-size:.85rem; padding:6px 10px; border:1px solid var(--as-line-2); border-radius:8px; background:var(--sp-white); color:var(--sp-dark); cursor:pointer; }
.as-fiche__nav{ margin-left:auto; }
.as-fiche__plan{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-top:13px; border-top:1px solid var(--sp-gray1); }
.as-fiche__dot{ color:var(--sp-amber); font-size:10px; }

.as-subpanel{ display:none; margin-top:10px; background:var(--sp-off); border:1px solid var(--as-line-2); border-radius:10px; padding:11px 12px; }
.as-subpanel.is-open{ display:block; }
.as-subpanel__label{ display:block; font-size:.78rem; color:var(--sp-gray5); font-weight:600; margin-bottom:6px; }
.as-subpanel input[type="datetime-local"], .as-subpanel textarea{ width:100%; font:inherit; font-size:.85rem; padding:8px 10px; border:1px solid var(--as-line-2); border-radius:8px; background:var(--sp-white); color:var(--sp-dark); margin-bottom:9px; }

/* Menu ⋯ */
.as-menu{ position:relative; display:inline-flex; }
.as-menu__pop{ display:none; position:absolute; right:0; top:calc(100% + 6px); background:var(--sp-white); border:1px solid var(--as-line-2); border-radius:10px; box-shadow:0 8px 30px rgba(20,28,45,.14); padding:5px; min-width:190px; z-index:20; }
.as-menu.is-open .as-menu__pop{ display:block; }
/* Fichette dont le menu ⋯ est ouvert : élevée au-dessus des suivantes (sinon le menu passe dessous). */
.as-fiche.is-menuopen{ z-index:30; }
.as-fiche:has(.as-menu.is-open){ z-index:30; }
.as-menu__item{ display:flex; align-items:center; gap:9px; width:100%; background:none; border:none; border-radius:7px; padding:8px 10px; font:inherit; font-size:.83rem; color:var(--sp-dark); cursor:pointer; text-align:left; white-space:nowrap; }
.as-menu__item:hover{ background:var(--sp-off); }
.as-menu__item--danger{ color:#dc2626; }
.as-menu__sep{ height:1px; background:var(--sp-gray1); margin:4px 2px; }

/* Mobile : la ligne devient une card */
@media (max-width:600px){
	.as-fiche__row{ grid-template-columns:1fr auto; grid-template-areas:"time pill" "who who" "act act"; gap:8px 10px; padding:14px 19px 14px 19px; }
	.as-fiche__time{ font-size:1.1rem; }
	.as-fiche__pill{ align-self:start; }
	.as-fiche__act{ justify-self:stretch; width:100%; }
	/* Mobile : on lève la largeur mini (sinon 2 boutons à 120px débordent et collent le ⋯ au bord). */
	.as-fiche__act .as-btn--primary, .as-fiche__act .as-btn--ghost{ min-width:0; }
	.as-fiche__act .as-btn--primary{ flex:1; justify-content:center; }
	.as-fiche__act .as-menu{ margin-left:auto; }
	.as-fiche__detail{ margin:0 15px; }
	.as-fiche__nav{ margin-left:0; flex:1 1 100%; justify-content:center; }
	.as-fiche__plan .as-btn{ flex:1; justify-content:center; }
}

/* Commentaire d'intervention affiché (historique, lecture seule). */
.as-fiche__pronote{ padding:11px 0 2px; border-top:1px solid var(--sp-gray1); }
.as-fiche__pronote-label{ display:block; font-size:.72rem; font-weight:700; color:var(--sp-gray5); text-transform:uppercase; letter-spacing:.03em; margin-bottom:4px; }
.as-fiche__pronote-label em{ font-style:normal; color:#0a7d50; text-transform:none; font-weight:700; }
.as-fiche__pronote p{ margin:0; font-size:.86rem; color:var(--sp-gray7); }
/* Fichette rappel : le menu peut contenir des formulaires (actions POST). */
.as-menu__pop form{ margin:0; }
.as-menu__pop form .as-menu__item{ width:100%; }

/* Note RDV : un peu d'air entre le toggle « Visible par le client » et « Enregistrer ». */
.as-subpanel[data-sub="note"] .as-space-toggle--inline { margin: 4px 0 12px; }

/* ============================================================
   RENDEZ-VOUS : board par etat (cartes-etiquettes) + fiche en panneau glissant
   ============================================================ */
.as-rdv-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.as-chip{ font-family:'Archivo',sans-serif; font-weight:600; font-size:.82rem; padding:.38rem .72rem; border-radius:var(--sp-radius); cursor:pointer; border:1.5px solid color-mix(in srgb,var(--sp-gray7) 22%,transparent); color:var(--sp-gray6); background:transparent; display:inline-flex; align-items:center; gap:.4rem; transition:all .16s var(--as-ease); }
.as-chip svg{ width:12px; height:12px; }
.as-chip:hover{ border-color:var(--sp-gray7); color:var(--sp-gray7); }
.as-chip.is-on{ background:var(--sp-amber); color:var(--sp-on-accent); border-color:var(--sp-amber); }

/* Punaises des en-tetes de colonne et des filtres d'etat. Ici le marqueur EST
   l'element (pas un ::before), donc le corps se pose dessus et l'aiguille sur
   son ::after, ancree simplement au bas du corps : pas besoin du calcul par
   rapport a la ligne comme pour .as-status, la boite du corps est l'element. */
/* Le masque NE VA PAS sur l'element : il rognerait aussi son ::after, donc
   l'aiguille disparaitrait. Le corps va sur ::before, l'aiguille sur ::after,
   et l'element ne sert que de boite. */
.as-dot{
	position:relative; flex:none; display:inline-block;
	--pw:12px; width:var(--pw); height:var(--pw);
	--gom:var(--sp-gray4); --pique:24deg;
}
.as-dot::before{
	content:''; position:absolute; inset:0;
	background-color:var(--gom);
	background-image:
		linear-gradient(calc(100deg - var(--pique)), rgba(255,255,255,.8) 0 12%, rgba(255,255,255,.22) 26%, transparent 44%),
		linear-gradient(calc(287deg - var(--pique)), rgba(0,0,0,.38) 0 18%, transparent 48%);
	-webkit-mask:var(--as-pin) top center / 100% 74% no-repeat;
	        mask:var(--as-pin) top center / 100% 74% no-repeat;
	transform:rotate(var(--pique));
}
.as-dot::after{
	content:''; position:absolute; pointer-events:none;
	left:calc(var(--pw) * .455); top:calc(var(--pw) * .74);
	width:calc(var(--pw) * .09); height:calc(var(--pw) * .26);
	/* Origine en LONGUEURS, pas en pourcentages : un pourcentage se calcule sur
	   la boite de l'aiguille, pas sur celle du corps, et l'aiguille se detachait. */
	transform-origin:calc(var(--pw) * .045) calc(var(--pw) * -.37);
	transform:rotate(var(--pique));
	background:linear-gradient(90deg,#8d9599,#eef2f4 45%,#798286);
}
.as-dot--jaune{ --gom:var(--sp-g-jaune); }
.as-dot--verte{ --gom:var(--sp-g-verte); }
.as-dot--bleue{ --gom:var(--sp-g-bleue); }
.as-dot--rouge{ --gom:var(--sp-g-rouge); }

.as-board{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; align-items:start; }
@media (max-width:760px){ .as-board{ grid-template-columns:1fr; } }
.as-col{ background:var(--sp-white); border:1px solid var(--sp-gray2); border-radius:var(--sp-radius); box-shadow:var(--as-shadow); }
.as-col__head{ display:flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-bottom:2px solid var(--sp-gray7); }
.as-col__head h3{ font-family:'Archivo',sans-serif; font-size:.92rem; font-weight:800; flex:1; color:var(--sp-gray7); margin:0; }
.as-col__n{ font-family:'Courier Prime',monospace; font-weight:700; color:var(--sp-gray5); font-variant-numeric:tabular-nums; }
.as-col__body{ padding:10px; display:flex; flex-direction:column; gap:10px; }
.as-col__empty{ color:var(--sp-gray4); font-size:.85rem; font-style:italic; padding:.6rem .3rem; margin:0; }

/* La fiche redevient un simple conteneur : la carte/ligne visible est .as-cardtag / .as-lg. */
.as-sheeted .as-fiche{ background:none; border:0; border-radius:0; box-shadow:none; padding:0; transform:none; margin:0; scroll-margin:0; }
.as-sheeted .as-fiche:hover{ box-shadow:none; transform:none; }

.as-cardtag{ position:relative; display:block; width:100%; text-align:left; background:var(--sp-white); border:1px solid var(--sp-gray2); border-radius:var(--sp-radius); padding:.7rem .8rem .7rem 1.7rem; cursor:pointer; font:inherit; transition:transform .16s var(--as-ease), box-shadow .16s var(--as-ease); }
/* La carte de rendez-vous est punaisee. L'aiguille passe par ::after, libre ici
   (verifie : aucune autre regle ne s'en sert sur .as-cardtag). */
.as-cardtag{ --gom:var(--sp-gray4); --pique:24deg; --pw:12px; }
.as-fiche--pending .as-cardtag{ --gom:var(--sp-g-jaune); }
.as-fiche--confirmed .as-cardtag{ --gom:var(--sp-g-verte); }
.as-cardtag::before{
	content:""; position:absolute; left:.62rem; top:.85rem;
	width:var(--pw); height:var(--pw);
	background-color:var(--gom);
	background-image:
		linear-gradient(calc(100deg - var(--pique)), rgba(255,255,255,.8) 0 12%, rgba(255,255,255,.22) 26%, transparent 44%),
		linear-gradient(calc(287deg - var(--pique)), rgba(0,0,0,.38) 0 18%, transparent 48%);
	-webkit-mask:var(--as-pin) top center / 100% 74% no-repeat;
	        mask:var(--as-pin) top center / 100% 74% no-repeat;
	transform:rotate(var(--pique));
}
.as-cardtag::after{
	content:""; position:absolute; pointer-events:none;
	left:calc(.62rem + var(--pw) * .455); top:calc(.85rem + var(--pw) * .74);
	width:calc(var(--pw) * .09); height:calc(var(--pw) * .26);
	transform-origin:calc(var(--pw) * .045) calc(var(--pw) * -.37);
	transform:rotate(var(--pique));
	background:linear-gradient(90deg,#8d9599,#eef2f4 45%,#798286);
}
.as-cardtag:hover{ transform:translateY(-2px) rotate(-.5deg); box-shadow:var(--as-shadow); }
.as-cardtag__top{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }
.as-cardtag__t{ font-family:'Courier Prime',monospace; font-weight:700; font-size:.9rem; color:var(--sp-gray7); font-variant-numeric:tabular-nums; }
.as-cardtag__stamp{ font-family:'Courier Prime',monospace; font-weight:700; font-size:.66rem; color:var(--sp-gray5); letter-spacing:.03em; white-space:nowrap; }
.as-cardtag__who{ font-family:'Archivo',sans-serif; font-weight:700; font-size:.92rem; color:var(--sp-gray7); margin-top:.25rem; }
.as-cardtag__svc{ font-size:.82rem; color:var(--sp-gray6); }

.as-cachet{ display:inline-flex; align-items:center; gap:.32em; font-family:'Courier Prime',monospace; font-weight:700; font-size:.58rem; letter-spacing:.03em; text-transform:uppercase; color:var(--sp-amber); background:var(--sp-amber-soft); border:1px solid color-mix(in srgb,var(--sp-amber) 30%,transparent); border-radius:2px; padding:.16em .4em; }
.as-cardtag .as-cachet{ margin-top:.5rem; }
.as-cachet svg{ width:12px; height:12px; stroke-width:2.2; flex:none; }

/* Panneau glissant (le detail de la fiche devient un « sheet » venu de droite). */
.as-sheet-scrim{ position:fixed; inset:0; background:rgba(5,13,16,.5); z-index:1000; opacity:0; transition:opacity .25s var(--as-ease); }
.as-sheet-scrim.is-open{ opacity:1; }
.as-sheeted .as-fiche__detail{ position:fixed; top:0; right:0; bottom:0; width:min(460px,100%); z-index:1001; background:var(--sp-white); border-top:0; border-left:1px solid var(--sp-gray2); box-shadow:none; margin:0; padding:0; display:flex; flex-direction:column; transform:translateX(100%); visibility:hidden; transition:transform .3s var(--as-ease), visibility .3s; }
/* Contenu défilant : le panneau scrolle si le contenu dépasse l'écran ; la barre du
   haut (état + fermer) reste collée. Les fiches qui ont déjà un .as-sheet__body gardent
   leur propre défilement (ce bloc reste alors inerte pour elles). */
.as-sheeted .as-fiche__detail{ overflow-y:auto; overscroll-behavior:contain; }
.as-sheeted .as-fiche__detail > .as-sheet__top{ position:sticky; top:0; z-index:3; flex:none; }
.as-sheeted .as-fiche__detail > .as-sheet__hero,
.as-sheeted .as-fiche__detail > .as-sheet-sec,
.as-sheeted .as-fiche__detail > .as-subpanel,
.as-sheeted .as-fiche__detail > .as-reschedule-log{ flex:none; }
/* Le board/planning n'a pas de .as-sheet__body : padding horizontal directement sur le contenu. */
.as-sheeted .as-fiche__detail > .as-sheet__hero,
.as-sheeted .as-fiche__detail > .as-sheet-sec,
.as-sheeted .as-fiche__detail > .as-subpanel,
.as-sheeted .as-fiche__detail > .as-reschedule-log{ padding-left:16px; padding-right:16px; }
.as-sheeted .as-fiche.is-open .as-fiche__detail{ transform:none; visibility:visible; animation:none; }
/* Compte avec barre d'admin WP : le panneau démarre sous la barre (bouton fermer visible). */
body.admin-bar .as-sheeted .as-fiche__detail{ top:32px; }
@media screen and (max-width:782px){ body.admin-bar .as-sheeted .as-fiche__detail{ top:46px; } }
body.as-sheet-lock{ overflow:hidden; }

.as-sheet__top{ display:flex; align-items:center; gap:.7rem; padding:13px 16px; border-bottom:2px solid var(--sp-gray7); background:var(--sp-page-creuse); flex:none; }
.as-sheet__top .as-status{ margin:0; }
.as-sheet__num{ font-family:'Courier Prime',monospace; font-weight:700; font-size:.72rem; color:var(--sp-gray5); letter-spacing:.05em; }
.as-sheet__close{ margin-left:auto; background:none; border:0; cursor:pointer; color:var(--sp-gray6); padding:.3rem; border-radius:2px; line-height:0; }
.as-sheet__close:hover{ background:rgba(20,30,29,.06); color:var(--sp-gray7); }
.as-sheet__close svg{ width:20px; height:20px; }
.as-sheet__body{ flex:1; overflow-y:auto; padding:0 16px 20px; }
.as-sheet__hero{ display:flex; align-items:flex-start; gap:.85rem; padding:16px 0 14px; }
.as-sheet__time{ font-family:'Courier Prime',monospace; font-weight:700; font-size:1.32rem; line-height:1; color:var(--sp-amber); font-variant-numeric:tabular-nums; flex:none; }
.as-sheet__time small{ display:block; font-family:'Courier Prime',monospace; font-size:.62rem; color:var(--sp-gray5); letter-spacing:.06em; margin-top:4px; text-transform:uppercase; }
.as-sheet__cli b{ font-family:'Archivo',sans-serif; font-weight:800; font-size:1.14rem; display:block; letter-spacing:-.01em; line-height:1.1; color:var(--sp-gray7); }
.as-sheet__cli span{ font-size:.86rem; color:var(--sp-gray6); }
.as-sheet__cli .as-cachet{ margin-top:.45rem; }
.as-sheet-sec{ padding:14px 0; border-top:1px solid var(--sp-gray2); }
.as-sheet-sec__t{ font-family:'Courier Prime',monospace; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sp-gray5); margin-bottom:.6rem; }
.as-sheet-acts{ display:flex; flex-wrap:wrap; gap:.5rem; }
.as-sheet-acts--minor{ margin-top:.6rem; }
.as-sheet-danger{ color:var(--sp-g-rouge); border-color:color-mix(in srgb,var(--sp-g-rouge) 34%,transparent); }
.as-sheet-danger:hover{ background:color-mix(in srgb,var(--sp-g-rouge) 8%,transparent); border-color:var(--sp-g-rouge); }
.as-sheet-row{ display:flex; gap:.5rem; align-items:flex-end; }
.as-sheet-row .js-reschedule-input{ flex:1; min-width:0; font:inherit; font-size:.85rem; padding:8px 10px; border:1px solid var(--sp-gray2); border-radius:var(--sp-radius); background:var(--sp-white); color:var(--sp-gray7); }
/* Dans le sheet, le resume d'intervention est toujours deplie (pas un sous-panneau). */
.as-sheeted .as-fiche__detail .as-subpanel[data-sub="note"]{ display:block; margin-top:0; background:none; border:0; padding:0; }
.as-sheeted .as-fiche__detail .as-fiche__select{ width:100%; }

/* Historique : liste « registre » de lignes cliquables ouvrant le panneau. */
.as-log{ background:var(--sp-white); border:1px solid var(--sp-gray2); border-radius:var(--sp-radius); box-shadow:var(--as-shadow); overflow:hidden; }
.as-lg{ position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.15rem 1rem; width:100%; text-align:left; background:none; border:0; border-top:1px solid var(--sp-gray2); padding:.7rem 1.1rem; font:inherit; cursor:pointer; transition:background .14s var(--as-ease); }
.as-fiche:first-child .as-lg{ border-top:0; }
.as-lg:hover{ background:var(--sp-page-creuse); }
.as-lg__date{ grid-column:1; grid-row:1 / span 2; align-self:center; font-family:'Courier Prime',monospace; font-weight:700; font-size:.8rem; color:var(--sp-gray6); font-variant-numeric:tabular-nums; min-width:118px; }
.as-lg__name{ grid-column:2; grid-row:1; font-family:'Archivo',sans-serif; font-weight:700; font-size:.9rem; color:var(--sp-gray7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.as-lg__sub{ grid-column:2; grid-row:2; font-size:.8rem; color:var(--sp-gray5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.as-lg .as-status{ grid-column:3; grid-row:1 / span 2; align-self:center; justify-self:end; }
@media (max-width:600px){ .as-lg{ grid-template-columns:1fr auto; } .as-lg__date{ grid-column:1; grid-row:1; } .as-lg__name{ grid-row:2; } .as-lg__sub{ grid-column:1; grid-row:3; } .as-lg .as-status{ grid-column:2; grid-row:1; } }

/* ── Réglages : repérage visuel par catégorie (filet à gauche + teinte légère) ── */
.as-space-panel--team,
.as-space-panel--avail,
.as-space-panel--booking,
.as-space-panel--notif,
.as-space-panel--privacy { border-left-width: 3px; }
.as-space-panel--team    { border-left-color:var(--sp-amber); background:#fff9f0; }
.as-space-panel--avail   { border-left-color:#10b981; background:#f1fbf7; }
.as-space-panel--booking { border-left-color:#3b82f6; background:#f4f7fe; }
.as-space-panel--notif   { border-left-color:#8b5cf6; background:#f8f6fe; }
.as-space-panel--privacy { border-left-color:var(--sp-gray5); background:var(--sp-off); }
/* Icône de titre teintée selon la catégorie (là où il y en a une). */
.as-space-panel--team h2 svg  { color:var(--sp-amber); }
.as-space-panel--notif h2 svg { color:#8b5cf6; }

/* Accents génériques des panneaux (Accréditation / Réaffectation). */
.as-space-panel--accent-violet,
.as-space-panel--accent-blue,
.as-space-panel--accent-green,
.as-space-panel--accent-amber { border-left-width: 3px; }
.as-space-panel--accent-violet { border-left-color:#8b5cf6; background:#f8f6fe; }
.as-space-panel--accent-blue   { border-left-color:#3b82f6; background:#f4f7fe; }
.as-space-panel--accent-green  { border-left-color:#10b981; background:#f1fbf7; }
.as-space-panel--accent-amber  { border-left-color:var(--sp-amber); background:#fff9f0; }
.as-space-panel--accent-violet h2 svg { color:#8b5cf6; }
.as-space-panel--accent-blue h2 svg   { color:#3b82f6; }
.as-space-panel--accent-green h2 svg  { color:#10b981; }
.as-space-panel--accent-amber h2 svg  { color:var(--sp-amber); }
.as-space-panel h2 svg { width:17px; height:17px; flex:0 0 auto; }

/* ── Panneaux de reglages et d'administration : retour au monde carnet ──
   Reglages, Accreditation et Reaffectation portaient un arc-en-ciel herite
   d'avant le skin carnet : bleu #3b82f6, vert #10b981, violet #8b5cf6, ambre,
   chacun avec sa teinte de fond. Quatre couleurs qui n'existent nulle part
   ailleurs dans l'espace pro, sur des pages voisines de la page Emails qui,
   elle, est en papier creme. Tout passe au carnet, et c'est l'icone du titre
   qui porte l'accent violet. On perd le reperage par couleur ; il ne servait
   guere (personne ne retrouve un reglage en se rappelant « le bleu ») et il
   coutait la coherence de l'ensemble. */
.as-space-panel--team,
.as-space-panel--avail,
.as-space-panel--booking,
.as-space-panel--notif,
.as-space-panel--privacy,
.as-space-panel--accent-violet,
.as-space-panel--accent-blue,
.as-space-panel--accent-green,
.as-space-panel--accent-amber{
	background:var(--sp-white);
	border-left-width:1px;
	border-left-color:var(--sp-gray3);
}
.as-space-panel--team h2 svg,
.as-space-panel--avail h2 svg,
.as-space-panel--booking h2 svg,
.as-space-panel--notif h2 svg,
.as-space-panel--privacy h2 svg,
.as-space-panel--accent-violet h2 svg,
.as-space-panel--accent-blue h2 svg,
.as-space-panel--accent-green h2 svg,
.as-space-panel--accent-amber h2 svg{ color:var(--sp-amber); }
/* Seule exception : le panneau de resultats de la reaffectation. Il APPARAIT
   apres l'analyse pour dire « regardez ici », un accent y fait son travail. */
#as-reassign-results{ border-left-width:3px; border-left-color:var(--sp-amber); }

/* Rembourrage et separations de ces memes panneaux.
   Ils heritaient de `.as-space-panel{padding:0}` sans que rien ne reprenne le
   relais : titre, champs et boutons venaient coller le cadre. Et chaque membre
   de l'equipe etait enferme dans une boite (bord + coin arrondi a 10px) posee
   dans la boite du panneau : deux cadres l'un dans l'autre, ce que le carnet ne
   fait nulle part. La ligne remplace la boite, comme sur la page Emails. */
.as-space-panel:is(.as-space-panel--accent-violet,.as-space-panel--accent-blue,.as-space-panel--accent-green,.as-space-panel--accent-amber) > h2{
	padding:.85rem 1.1rem;
	border-bottom:1px solid var(--sp-gray2);
}
.as-space-panel:is(.as-space-panel--accent-violet,.as-space-panel--accent-blue,.as-space-panel--accent-green,.as-space-panel--accent-amber) > *:not(h2):not(.as-accred-list){
	padding-left:1.1rem;
	padding-right:1.1rem;
}
.as-space-panel:is(.as-space-panel--accent-violet,.as-space-panel--accent-blue,.as-space-panel--accent-green,.as-space-panel--accent-amber) > *:not(h2):first-of-type{
	padding-top:.95rem;
}
.as-space-panel:is(.as-space-panel--accent-violet,.as-space-panel--accent-blue,.as-space-panel--accent-green,.as-space-panel--accent-amber) > *:last-child{
	padding-bottom:1.1rem;
}

/* Une personne = une LIGNE, pas une boite. */
.as-accred-list{ gap:0; }
.as-accred-item{
	border:0; border-radius:0; background:transparent;
	padding:.85rem 1.1rem;
	border-bottom:1px solid var(--sp-gray2);
}
/* Le filet ne tombe que sur la derniere ligne du DERNIER groupe : la vue
   accreditation empile deux listes (le patron, puis l'equipe), et un
   `:last-child` par liste effacait la separation entre les deux. */
.as-accred-list:last-of-type .as-accred-item:last-child{ border-bottom:0; }

/* Champs <select> stylés comme les inputs, avec chevron. */
.as-space-field select {
	padding: 8px 32px 8px 10px;
	border: 1px solid var(--sp-gray3);
	border-radius: 8px;
	font-size: 0.92rem;
	font-family: inherit;
	color: var(--sp-dark);
	max-width: 400px;
	box-sizing: border-box;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: var(--sp-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
}
.as-space-field select:focus {
	outline: none;
	border-color: var(--sp-amber);
	box-shadow: 0 0 0 3px var(--sp-amber-ring);
}

/* Lignes de formulaire en 2 colonnes (responsive). */
.as-accred-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.as-accred-form__row .as-space-field { margin-bottom: 0; }
.as-accred-form__row .as-space-field input { max-width: 100%; }
@media (max-width: 560px) { .as-accred-form__row { grid-template-columns: 1fr; } }

/* ── Réaffectation de masse (onglet) ── */
.as-reassign-summary { font-size:.95rem; color:var(--sp-dark); margin:0 0 12px; }
.as-reassign-conf-title { font-weight:700; font-size:.82rem; color:var(--sp-amber-deep); margin:4px 0 6px; }
.as-reassign-conf { margin:0 0 14px; padding-left:18px; font-size:.84rem; color:var(--sp-gray5); max-height:230px; overflow:auto; }
.as-reassign-conf li { margin-bottom:4px; }
.as-reassign-when { font-weight:600; color:var(--sp-dark); }
.as-reassign-radio { display:flex; align-items:center; gap:8px; font-size:.86rem; color:var(--sp-dark); margin:6px 0; cursor:pointer; }

/* ── Réglages : barre sticky « modifications non enregistrées » ── */
.as-settings-sticky {
	position: sticky; bottom: 12px; z-index: 30;
	display: none; align-items: center; justify-content: space-between; gap: 14px;
	margin: 18px 0 4px; padding: 11px 14px 11px 18px;
	background: var(--sp-white); border: 1px solid var(--sp-gray2); border-radius: 12px;
	box-shadow: 0 10px 34px -10px rgba(15,23,42,.30);
}
.as-settings-sticky.is-visible { display: flex; }
.as-settings-sticky__msg { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: .9rem; color: var(--sp-dark); }
.as-settings-sticky__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sp-amber); box-shadow: 0 0 0 4px var(--sp-amber-ring); flex: none; }

/* ── Prestations : cartes + sélecteur d'icône ── */

.as-prest-card { background:var(--sp-white); border:1px solid var(--sp-gray2); border-radius:14px; padding:16px 18px; box-shadow:0 1px 2px rgba(16,24,40,.04), 0 10px 22px -14px rgba(16,24,40,.16); transition:box-shadow .2s, border-color .2s; }
.as-prest-card:hover { border-color:var(--sp-gray3); box-shadow:0 2px 4px rgba(16,24,40,.05), 0 16px 30px -16px rgba(16,24,40,.22); }
.as-prest-card__top { display:flex; align-items:center; gap:10px; }
.as-prest-card__top .as-prest-name { flex:1; min-width:120px; font-weight:600; }
.as-prest-card__row { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:12px; }
.as-prest-card__row .as-prest-field { width:auto; min-width:0; }
.as-prest-card__row .as-prest-num { width:auto; flex:1 1 auto; min-width:0; }
.as-prest-card > .as-prest-desc { margin-top:10px; width:100%; }
/* Image de prestation : aperçu carré + boutons (médiathèque WordPress). */
.as-prest-image { display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.as-prest-image-thumb { width:46px; height:46px; flex:0 0 auto; border-radius:10px; border:1px dashed var(--sp-gray3,#cbd5e1); background:var(--sp-gray1,#f1f5f9) center/cover no-repeat; }
.as-prest-image-thumb.has-img { border-style:solid; border-color:var(--sp-gray2,#e2e8f0); }
.as-prest-image-pick { background:none; border:1px solid var(--sp-gray2,#e2e8f0); border-radius:8px; padding:7px 12px; font-size:.82rem; font-weight:600; color:var(--sp-gray6,#475569); cursor:pointer; transition:border-color .15s, color .15s; }
.as-prest-image-pick:hover { border-color:var(--sp-amber); color:var(--sp-amber); }
.as-prest-image-clear { background:none; border:none; color:var(--sp-gray5,#64748b); font-size:.8rem; cursor:pointer; text-decoration:underline; }
.as-prest-image-clear:hover { color:#b91c1c; }
.as-prest-del svg { width:17px; height:17px; }

.as-prest-iconwrap { position:relative; flex:none; }
.as-prest-iconbtn { width:44px; height:44px; border-radius:11px; border:1px solid var(--sp-gray2); background:var(--sp-off); display:grid; place-items:center; cursor:pointer; padding:0; transition:border-color .15s, box-shadow .15s; }
.as-prest-iconbtn svg { width:22px; height:22px; }
.as-prest-iconbtn:hover { border-color:currentColor; box-shadow:0 0 0 3px rgba(0,0,0,.05); }
.as-prest-iconpicker { position:absolute; top:50px; left:0; z-index:40; width:236px; padding:8px; background:var(--sp-white); border:1px solid var(--sp-gray2); border-radius:12px; box-shadow:0 16px 40px -12px rgba(15,23,42,.28); display:grid; grid-template-columns:repeat(5,1fr); gap:4px; }
.as-prest-iconpicker[hidden] { display:none; }
.as-prest-iconpick { width:100%; height:40px; border-radius:9px; border:1px solid transparent; background:transparent; color:var(--sp-gray5); display:grid; place-items:center; cursor:pointer; padding:0; transition:background .12s, color .12s; }
.as-prest-iconpick svg { width:20px; height:20px; }
.as-prest-iconpick:hover { background:var(--sp-off); color:var(--sp-dark); }

/* Numéro d'ordre d'affichage de la prestation (= ordre sur le site). */
.as-prest-card__num { display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--sp-amber-deep); background:var(--sp-amber-soft); padding:3px 9px; border-radius:999px; margin-bottom:12px; }

/* ============================================================
   PRESTATIONS (rework carnet) : grille de cartes facon maquette
   ============================================================ */
.as-prest-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:14px; align-items:start; }
.as-prest{ border-radius:var(--sp-radius); padding:1rem; box-shadow:var(--as-shadow); }
.as-prest:hover{ box-shadow:var(--as-shadow); border-color:var(--sp-gray2); }
.as-prest .as-prest-card__num{ display:block; background:none; color:var(--sp-gray5); font-family:'Courier Prime',monospace; letter-spacing:.08em; padding:0; margin-bottom:.6rem; text-transform:uppercase; font-size:.6rem; }
.as-prest__top{ display:flex; align-items:center; gap:.7rem; margin-bottom:.9rem; }
.as-prest-iconwrap{ position:relative; flex:none; }
.as-prest__icon{ width:40px; height:40px; flex:none; border-radius:3px; border:0; display:grid; place-items:center; color:#fff; background:var(--sp-amber); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); cursor:pointer; padding:0; }
.as-prest__icon svg{ width:22px; height:22px; stroke-width:1.9; color:#fff; }
.as-prest__icon:hover{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 3px var(--sp-amber-ring); }
.as-prest__name{ flex:1; min-width:0; }
.as-prest__name input{ font-family:'Archivo',sans-serif; font-weight:700; font-size:.98rem; width:100%; background:none; border:0; border-bottom:1.5px solid transparent; padding:.2rem 0; color:var(--sp-gray7); }
.as-prest__name input:focus{ outline:none; border-bottom-color:var(--sp-amber); box-shadow:none; }
.as-prest__grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.as-prest-f{ display:flex; flex-direction:column; gap:.3rem; min-width:0; margin:0; }
.as-prest-f--full{ grid-column:1/-1; margin-top:10px; }
.as-prest-f > span{ font-family:'Courier Prime',monospace; font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--sp-gray5); }
.as-prest-f input:not([type=color]){ width:100%; min-width:0; background:var(--sp-white); border:1.5px solid var(--sp-gray2); border-radius:var(--sp-radius); padding:.5rem .55rem; font:inherit; font-size:.88rem; color:var(--sp-gray7); }
.as-prest-f input:focus{ outline:none; border-color:var(--sp-amber); box-shadow:0 0 0 3px var(--sp-amber-ring); }
.as-prest__color{ width:100%; height:38px; border:1.5px solid var(--sp-gray2); border-radius:var(--sp-radius); padding:2px; cursor:pointer; background:var(--sp-white); }
.as-prest .as-prest-image{ margin-top:10px; }
.as-prest .as-prest-image-thumb{ border-radius:var(--sp-radius); }
/* Bloc reglages sous la grille + barre d'enregistrement. */
.as-prest-settings{ margin-top:16px; }
.as-prest-settings .as-prest-note{ margin:0 0 14px; border-radius:var(--sp-radius); }
.as-prest-settings .as-prest-step{ max-width:280px; margin:0; padding:0; border-top:0; }
.as-prest-settings .as-prest-step input{ width:100%; background:var(--sp-white); border:1.5px solid var(--sp-gray2); border-radius:var(--sp-radius); padding:.5rem .55rem; font:inherit; font-size:.88rem; color:var(--sp-gray7); }
.as-prest-settings .as-prest-step > span{ font-family:'Courier Prime',monospace; font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--sp-gray5); display:block; margin-bottom:.3rem; }
.as-save-bar{ display:flex; justify-content:flex-end; gap:.6rem; margin-top:18px; }

/* ── Avis clients (onglet espace pro) ── */
.as-reviews-page .as-reviews-list { display:flex; flex-direction:column; gap:14px; margin-bottom:14px; }
.as-review-item { background:var(--sp-white); border:1px solid var(--sp-gray2); border-radius:14px; padding:18px; box-shadow:0 1px 2px rgba(16,24,40,.04), 0 10px 22px -14px rgba(16,24,40,.16); transition:box-shadow .2s, border-color .2s; }
.as-review-item:hover { border-color:var(--sp-gray3); box-shadow:0 2px 4px rgba(16,24,40,.05), 0 16px 30px -16px rgba(16,24,40,.22); }
.as-review-item__grid { display:grid; grid-template-columns:1fr 130px 160px 40px; gap:12px; align-items:end; margin-bottom:12px; }
.as-review-f { display:flex; flex-direction:column; gap:6px; }
.as-review-f > span { font-size:12px; font-weight:600; color:var(--sp-gray5); }
.as-review-f input, .as-review-f select, .as-review-f textarea { width:100%; padding:9px 11px; border:1px solid var(--sp-gray2); border-radius:9px; font:inherit; color:var(--sp-dark); background:var(--sp-white); }
.as-review-f input:focus, .as-review-f select:focus, .as-review-f textarea:focus { outline:none; border-color:var(--sp-amber); box-shadow:0 0 0 3px var(--sp-amber-ring); }
.as-review-f textarea { resize:vertical; min-height:64px; }
.as-rv-del { width:38px; height:38px; border:1px solid var(--sp-gray2); background:var(--sp-white); border-radius:9px; cursor:pointer; font-size:22px; line-height:1; color:var(--sp-gray5); transition:all .15s; }
.as-rv-del:hover { border-color:#fecaca; background:#fef2f2; color:#dc2626; }
.as-rv-add { display:inline-flex; align-items:center; gap:6px; background:var(--sp-white); border:1px dashed var(--sp-gray2); color:var(--sp-gray7); border-radius:10px; padding:10px 16px; font:inherit; font-weight:600; cursor:pointer; transition:all .15s; }
.as-rv-add:hover { border-color:var(--sp-amber); color:var(--sp-amber); }
.as-reviews-link { margin:16px 0; max-width:520px; }
.as-reviews-mgr { margin:6px 0 0; }
.as-reviews-actions { margin-top:18px; }
.as-rv-save { background:var(--sp-amber); color:var(--sp-on-accent); border:0; border-radius:10px; padding:12px 22px; font:inherit; font-weight:700; cursor:pointer; transition:filter .15s, transform .15s; }
.as-rv-save:hover { filter:brightness(1.05); transform:translateY(-1px); }
.as-rv-save:disabled { opacity:.6; cursor:default; transform:none; }
.as-reviews-page .as-space-feedback.is-ok { background:#ecfdf5; border:1px solid #a7f3d0; color:#047857; padding:10px 14px; border-radius:10px; }
.as-reviews-page .as-space-feedback.is-error { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; padding:10px 14px; border-radius:10px; }
@media (max-width:680px){
	.as-review-item__grid { grid-template-columns:1fr 1fr; }
	.as-review-f--author { grid-column:1 / -1; }
	.as-rv-del { grid-column:2; justify-self:end; }
}

/* Avis (rework carnet) : panneau + rangee compacte facon maquette. */
.as-space-panel__pad{ padding:16px 18px 18px; }
.as-reviews-link{ display:flex; flex-direction:column; gap:6px; max-width:none; margin:0 0 4px; }
.as-reviews-link > span{ font-size:12px; font-weight:600; color:var(--sp-gray5); }
.as-reviews-link input{ width:100%; max-width:520px; padding:9px 11px; border:1px solid var(--sp-gray2); border-radius:var(--sp-radius); font:inherit; color:var(--sp-gray7); background:var(--sp-white); }
.as-reviews-link input:focus{ outline:none; border-color:var(--sp-amber); box-shadow:0 0 0 3px var(--sp-amber-ring); }
.as-reviews-demo-row{ margin:14px 0; }
.as-reviews-subhead{ margin-top:18px; margin-bottom:.7rem; }
.as-reviews-page .as-reviews-list{ gap:10px; margin-bottom:0; }
.as-reviews-page .as-review-item{ display:flex; gap:.6rem; align-items:flex-start; border-radius:var(--sp-radius); padding:12px; box-shadow:none; }
.as-avis__main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.5rem; }
.as-avis__meta{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.as-avis__meta .as-rv-author{ flex:1 1 150px; min-width:0; }
.as-avis__meta .as-rv-date{ flex:1 1 140px; min-width:0; }
.as-avis__meta .as-rv-stars{ flex:0 0 auto; width:auto; font-family:'Courier Prime',monospace; }
.as-avis__meta input, .as-avis__meta select, .as-avis .as-rv-text{ padding:8px 10px; border:1px solid var(--sp-gray2); border-radius:var(--sp-radius); font:inherit; color:var(--sp-gray7); background:var(--sp-white); }
.as-avis__meta input:focus, .as-avis__meta select:focus, .as-avis .as-rv-text:focus{ outline:none; border-color:var(--sp-amber); box-shadow:0 0 0 3px var(--sp-amber-ring); }
.as-avis .as-rv-text{ width:100%; resize:vertical; min-height:52px; }
.as-iconbtn{ flex:none; width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--sp-gray2); background:var(--sp-white); border-radius:var(--sp-radius); cursor:pointer; color:var(--sp-gray5); transition:all .15s; }
.as-iconbtn svg{ width:16px; height:16px; }
.as-iconbtn:hover{ border-color:var(--sp-g-rouge); background:color-mix(in srgb,var(--sp-g-rouge) 8%,transparent); color:var(--sp-g-rouge); }
.as-reviews-page .as-rv-add{ border-radius:var(--sp-radius); margin-top:12px; }
.as-reviews-page .as-rv-save{ border-radius:var(--sp-radius); }

.js-toggle-rdv.is-off{opacity:.55;}

/* Badge de gamme (SOLO / ÉQUIPE) dans le titre des Réglages — patron. */
/* Offre en cours : tampon encré (pas de dégradé), posé de travers comme sur un carnet. */
.as-tier-badge{
	display:inline-block; margin-left:14px; padding:.3em .62em;
	font-family:'Archivo',sans-serif; font-size:.44em; font-weight:800;
	letter-spacing:.16em; text-transform:uppercase; line-height:1.5;
	vertical-align:middle; white-space:nowrap;
	background:none; border-radius:3px;
	transform:rotate(-4deg);
	mix-blend-mode:multiply;
}
.as-tier-badge--equipe{
	color:#B4302B; border:2px solid #B4302B;
	box-shadow:inset 0 0 0 1px rgba(180,48,43,.28);
	opacity:.92;
}
.as-tier-badge--solo{
	color:var(--sp-gray5); border:2px solid var(--sp-gray3);
	opacity:.85;
}
@media (prefers-reduced-motion:reduce){ .as-tier-badge{ transform:none; } }

/* Upsell discret « ? » sur le badge Offre Solo (patron). */
.as-tier-up{position:relative;display:inline-flex;margin-left:7px;vertical-align:middle;cursor:help;}
.as-tier-up__q{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--sp-gray2,#e2e8f0);color:var(--sp-gray5,#64748b);font-size:.62rem;font-weight:800;line-height:1;}
.as-tier-up:hover .as-tier-up__q,.as-tier-up:focus-within .as-tier-up__q{background:var(--sp-navy,#0a1628);color:#fff;}
.as-tier-up__tip{position:absolute;left:50%;top:150%;z-index:30;width:248px;margin-left:-20px;padding:11px 13px;border-radius:11px;background:var(--sp-navy,#0a1628);color:#fff;font-size:.74rem;font-weight:500;line-height:1.55;letter-spacing:0;text-transform:none;text-align:left;box-shadow:0 14px 34px -12px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(-5px);transition:opacity .16s,transform .16s;pointer-events:none;}
.as-tier-up:hover .as-tier-up__tip,.as-tier-up:focus-within .as-tier-up__tip{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.as-tier-up__tip strong{font-weight:800;}
.as-tier-up__tip a{display:inline-block;margin-top:4px;color:var(--sp-amber-l,#fbbf24);font-weight:700;text-decoration:underline;}

/* ── Statistiques : histogramme et palmarès (repris de la maquette carnet) ──── */
.as-stats-duo{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; align-items:start; }
@media (max-width:900px){ .as-stats-duo{ grid-template-columns:1fr; } }
.as-stats-duo > .as-space-panel{ background:var(--sp-white); border-radius:var(--sp-radius); }
.as-stats-duo > .as-space-panel > h2{
	padding:.8rem 1.1rem; margin:0;
	border-bottom:2px solid var(--sp-dark);
	font-family:'Archivo',sans-serif; font-size:1.02rem; font-weight:800; letter-spacing:-.01em;
}
.as-stats-bars{
	display:flex; align-items:flex-end; gap:12px;
	height:180px; padding:1rem 1.1rem 0;
}
.as-stats-bar{
	flex:1; height:100%;
	display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:.4rem;
}
.as-stats-bar__stack{
	width:100%; max-width:44px;
	display:flex; flex-direction:column; justify-content:flex-end;
	border-radius:2px 2px 0 0; overflow:hidden;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.as-stats-bar__manual{ background:linear-gradient(180deg, var(--sp-amber2), var(--sp-amber)); }
.as-stats-bar__online{ background:linear-gradient(180deg, #f0c94a, var(--sp-g-jaune)); }
.as-stats-bar__v{ font-family:'Courier Prime',monospace; font-weight:700; font-size:.72rem; color:var(--sp-gray7); }
.as-stats-bar__l{
	font-family:'Courier Prime',monospace; font-size:.62rem;
	letter-spacing:.05em; text-transform:uppercase; color:var(--sp-gray5);
}
.as-stats-legend{
	display:flex; flex-wrap:wrap; gap:1.3rem;
	margin:1rem 0 0; padding:0 1.1rem;
	font-size:.82rem; color:var(--sp-gray6);
}
.as-stats-legend span{ display:inline-flex; align-items:center; gap:.4rem; }
.as-stats-legend i{ width:12px; height:12px; border-radius:2px; display:inline-block; }
.as-stats-legend__manual{ background:var(--sp-amber); }
.as-stats-legend__online{ background:var(--sp-g-jaune); }
.as-stats-ledger{ padding:0 1.1rem; }
.as-stats-lg-row{
	display:grid; grid-template-columns:1fr auto; align-items:center; gap:1rem;
	padding:.72rem 0;
	border-bottom:1px solid var(--sp-gray2);
}
.as-stats-lg-row:last-child{ border-bottom:0; }
.as-stats-lg-name{ font-family:'Archivo',sans-serif; font-weight:700; font-size:.93rem; color:var(--sp-gray7); }
.as-stats-lg-amt{
	font-family:'Courier Prime',monospace; font-weight:700;
	font-variant-numeric:tabular-nums; text-align:right; color:var(--sp-gray7);
}
.as-stats-illus{
	font-family:'Courier Prime',monospace; font-size:.64rem; font-style:italic;
	letter-spacing:.04em; color:var(--sp-gray5);
	margin:.9rem 0 0; padding:0 1.1rem 1rem;
}

/* ── Création rapide : bandeau latéral plutôt que bulle flottante ────────────
   La bulle se posait sur la case cliquée et masquait justement le planning qu'on
   est en train de lire. Le bandeau se range à droite : le créneau visé reste
   visible, et on n'assombrit pas la page (pas de voile) pour garder la vue. */
.as-quick-pop{
	position:fixed;
	top:0; right:0; left:auto; bottom:0;
	width:min(360px, 92vw); height:100%;
	max-width:none;
	display:flex; flex-direction:column; gap:0;
	padding:1.1rem 1.1rem 1.3rem;
	border:0; border-left:1px solid var(--sp-gray3); border-radius:0;
	background:var(--sp-white);
	box-shadow:-18px 0 40px -24px rgba(5,13,16,.5);
	overflow-y:auto; overscroll-behavior:contain;
	animation:asSheetIn .22s var(--as-ease) both;
}
/* INDISPENSABLE : `display:flex` ci-dessus l'emporte sur le `display:none` que le
   navigateur applique à [hidden]. Sans cette règle, le bandeau reste affiché en
   permanence — visible dès le chargement, et impossible à refermer alors même que
   le script pose bien l'attribut. */
.as-quick-pop[hidden]{ display:none; }
@keyframes asSheetIn{ from{ transform:translateX(14px); opacity:0 } to{ transform:none; opacity:1 } }
@media (prefers-reduced-motion:reduce){ .as-quick-pop{ animation:none } }
body.admin-bar .as-quick-pop{ top:32px; height:calc(100% - 32px); }
@media screen and (max-width:782px){ body.admin-bar .as-quick-pop{ top:46px; height:calc(100% - 46px); } }
/* En-tête du bandeau : prestation visée, puis le créneau. */
.as-quick-pop__hd{
	font-family:'Archivo',sans-serif; font-size:1.02rem; font-weight:800;
	margin:0 26px .2rem 0; padding-bottom:.7rem;
	border-bottom:2px solid var(--sp-dark);
}
.as-quick-pop__when{
	font-family:'Courier Prime',monospace; font-size:.72rem;
	letter-spacing:.04em; color:var(--sp-gray5);
	margin:.7rem 0 1rem;
}
.as-quick-pop__in{
	background:var(--sp-off);
	border:1.5px solid color-mix(in srgb, var(--sp-dark) 20%, transparent);
	border-radius:3px;
	padding:.55rem .65rem;
	margin-bottom:10px;
}
.as-quick-pop__close{ top:12px; right:12px; font-size:1.4rem; }
/* Les actions se posent en bas du bandeau, toujours atteignables. */
.as-quick-pop__actions{ margin-top:auto; padding-top:1rem; }

/* Créneau visé pendant la saisie : repère net, puisque le bandeau ne se pose plus
   dessus et qu'on doit savoir où le rendez-vous va atterrir. */
.as-space-cal-cell.is-target{
	background:var(--sp-amber)!important;
	box-shadow:inset 0 0 0 2px var(--sp-dark);
	position:relative; z-index:2;
}
/* Bandeau de création ouvert : on resserre le contenu de la largeur du bandeau,
   pour qu'aucune colonne du planning ne passe dessous. Sur petit écran le bandeau
   occupe toute la largeur, il n'y a donc rien à resserrer. */
@media (min-width:900px){
	/* Retrait par une MARGE sur <main> : le padding de ce conteneur, comme la marge
	   de la zone de contenu, se fait neutraliser dans certains contextes ; la marge
	   sur <main> passe et resserre toute la colonne d'un coup (barre du haut incluse). */
	body.as-quickpop-open .as-main{
		margin-right:360px;
		transition:margin-right .22s var(--as-ease);
	}
}

/* ── Tableau de bord : les fiches se posent (repris de la maquette) ───────────
   Transform seule (pas de layout recalculé), en cascade légère. Neutralisé pour
   qui a demandé moins d'animation. */
@media (prefers-reduced-motion:no-preference){
	/* Pas de fill-mode : `both` fige l'état de DÉPART quand l'animation ne démarre
	   pas (onglet ouvert en arrière-plan, où les animations sont gelées). Les
	   cartes restaient alors penchées et décalées de 12px, durablement. */
	.as-dash .as-space-card{ animation:asSettle .5s var(--as-ease); }
	.as-dash .as-space-card:nth-child(2){ animation-delay:.06s; }
	.as-dash .as-space-card:nth-child(3){ animation-delay:.12s; }
	.as-dash .as-space-card:nth-child(4){ animation-delay:.18s; }
	.as-dash .as-space-card:nth-child(5){ animation-delay:.24s; }
	@keyframes asSettle{ from{ transform:translateY(-12px) rotate(-3deg) } to{ transform:none } }
	/* Le cachet « réservé en ligne » se pose comme un tampon. */
	.as-dash .as-cachet, .as-dash .as-online-tag{
		animation:asCachetDrop .6s cubic-bezier(.16,1,.3,1) .45s;
	}
	@keyframes asCachetDrop{
		from{ transform:rotate(-18deg) scale(1.45) }
		62%{ transform:rotate(-2deg) scale(1) }
		to{ transform:none }
	}
}

/* ── Menu « Placer sur un créneau » : habillage carnet ────────────────────────
   Il reste ancré à son bouton (c'est un menu, pas un formulaire), mais il parle
   la même langue que le reste : coin franc, filet encré, intitulé en Courier,
   noms en Archivo et durées en Courier. La prestation sur mesure est sortie de
   la liste et posée en pied, séparée : dépliée, elle ne coupe plus le choix. */
.as-quick-menu{
	width:290px;
	padding:0;
	background:var(--sp-white);
	border:1px solid var(--sp-gray3);
	border-radius:var(--sp-radius);
	box-shadow:var(--as-shadow);
}
.as-quick-menu__hd{
	font-family:'Courier Prime',monospace;
	font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
	color:var(--sp-gray5);
	padding:.7rem .8rem;
	margin:0;
	border-bottom:2px solid var(--sp-dark);
	line-height:1.45;
}
.as-quick-menu__search{
	margin:.6rem .8rem;
	width:calc(100% - 1.6rem);
	background:var(--sp-off);
	border:1.5px solid color-mix(in srgb, var(--sp-dark) 20%, transparent);
	border-radius:3px;
	padding:.45rem .6rem;
}
.as-quick-menu__list{ padding:.35rem; max-height:300px; }
.as-quick-menu__item{
	border-radius:3px;
	padding:.5rem .55rem;
	gap:.55rem;
}
.as-quick-menu__item:hover{ background:var(--sp-off); }
.as-quick-menu__name{ font-family:'Archivo',sans-serif; font-weight:700; font-size:.88rem; color:var(--sp-gray7); }
.as-quick-menu__dur{ font-family:'Courier Prime',monospace; font-size:.68rem; color:var(--sp-gray5); }
.as-quick-menu__dot{ width:9px; height:9px; }
/* Pied du menu : la prestation sur mesure, hors du flux de choix. */
.as-quick-menu__sur{ border-top:1px solid var(--sp-gray2); padding:.35rem; }
.as-quick-menu__item--custom{ border-bottom:0; margin-bottom:0; }
.as-quick-menu__dot--custom{
	width:16px; height:16px; border-radius:3px;
	background:var(--sp-off); color:var(--sp-amber); font-size:.8rem;
}
.as-quick-custom{ padding:.15rem .55rem .55rem; }
.as-quick-custom__in, .as-quick-custom__dur{
	background:var(--sp-off);
	border:1.5px solid color-mix(in srgb, var(--sp-dark) 20%, transparent);
	border-radius:3px;
	padding:.45rem .55rem;
}
.as-quick-custom__unit{ font-family:'Courier Prime',monospace; font-size:.68rem; color:var(--sp-gray5); }
.as-quick-custom__err{
	font-family:'Courier Prime',monospace; font-size:.66rem;
	color:#B4302B; margin:.5rem 0 0;
}

/* Avertissement de débordement dans le bandeau de création rapide : la
   prestation choisie mordrait sur la pause, un créneau bloqué ou la fermeture.
   On le dit, on ne l'interdit pas : c'est l'artisan qui décide. */
.as-quick-pop__warn{
	display:flex;gap:.4rem;align-items:flex-start;
	margin:.1rem 0 .6rem;padding:.45rem .55rem;
	font-family:'Courier Prime',monospace;font-size:.68rem;line-height:1.35;
	color:#B4302B;
	background:color-mix(in srgb, #B4302B 8%, transparent);
	border:1px solid color-mix(in srgb, #B4302B 30%, transparent);
	border-radius:var(--sp-radius,4px);
}
.as-quick-pop__warn[hidden]{display:none}

/* Trait des heures pleines : encre translucide plutôt qu'un beige opaque.
   Le beige se confondait avec les colonnes claires et ressortait sur la colonne
   du jour et sur les jours fermés : le même trait paraissait absent ici et
   marqué là, d'où des colonnes « unies » et d'autres « saccadées ». Une encre
   à 10 % assombrit chaque fond dans la même proportion, le trait a donc la
   même présence partout. */
.as-space-cal-row:has(+ .as-space-cal-row:not(.is-half)){
	border-bottom-color:rgba(20,30,29,.10);
}

/* Tampon « Réouvert » : un RDV revenu de l'annulation ou de l'historique. Encre
   brique du carnet, comme les autres marques d'alerte, pour qu'on le repère sans
   le confondre avec une réservation en ligne (violet). */
/* Double classe : dans la fiche, « .as-sheet__cli span » l'emportait sur une
   classe simple et repeignait le tampon en gris. */
.as-cachet.as-cachet--reouvert{
	color:#B4302B;
	background:color-mix(in srgb, #B4302B 9%, transparent);
	border-color:color-mix(in srgb, #B4302B 32%, transparent);
}

/* Panneau de fiche en attente de son contenu : une seule ligne discrète sous
   l'en-tête, qui est déjà rempli (heure, nom, prestation, état). */
.as-sheet__chargement{
	margin:1.1rem 1rem;
	font-family:'Courier Prime',monospace;font-size:.68rem;
	letter-spacing:.06em;text-transform:uppercase;color:var(--sp-gray5);
}

/* Agenda : barre de pages, au même dessin que celle des colonnes de RDV. */
.as-agenda__pager{
	display:flex;align-items:center;justify-content:center;gap:.5rem;
	padding:.7rem 0 .2rem;
}
.as-agenda__pager[hidden]{display:none}

/* Adresse vérifiée dans le bandeau de création rapide. */
.as-quick-pop__adr{display:flex;gap:.4rem;align-items:stretch}
.as-quick-pop__adr .as-quick-pop__in{flex:1;min-width:0;margin:0}
.as-quick-pop__geo{flex:none;white-space:nowrap;font-size:.78rem;padding:.4rem .6rem}
.as-quick-pop__adr-etat{
	margin:.3rem 0 .5rem;
	font-family:'Courier Prime',monospace;font-size:.66rem;line-height:1.35;
	color:var(--sp-gray5);
}
.as-quick-pop__adr-etat.is-ok{color:#0d6b4a}
.as-quick-pop__adr-etat.is-error{color:#B4302B}
/* Etiquette reservee aux lecteurs d'ecran : sans cette regle dans la feuille de
   l'espace pro, le texte s'affichait en clair a cote de chaque interrupteur. */
.as-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.as-quick-pop__adr-etat[hidden]{display:none}
/* Ce que l'email declenche, dit sous le champ plutot que devine. */
.as-quick-pop__aide{
	margin:-.2rem 0 .55rem;
	font-family:'Courier Prime',monospace;font-size:.66rem;line-height:1.35;
	color:var(--sp-gray5);
}

/* Mini-carte de confirmation d'adresse dans le bandeau de création rapide. */
.as-quick-pop__map{
	height:150px;margin:0 0 .7rem;
	border:1px solid var(--sp-gray3);border-radius:var(--sp-radius);
	overflow:hidden;background:var(--sp-off);
}
.as-quick-pop__map[hidden]{display:none}
.as-quick-pop__map .leaflet-control-attribution{font-size:9px}

/* ============================================================
   EMAILS AUTOMATIQUES (Réglages → Emails)
   Même vocabulaire que le reste du carnet : bandeau de tête encré,
   étiquettes d'état en Courier, violet pour agir, brique pour coupé.
   ============================================================ */
.as-mails-compte{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.as-mails-compte__item{display:flex;align-items:baseline;gap:.5rem;background:var(--sp-white);
	border:1px solid var(--sp-gray2);border-radius:var(--sp-radius);box-shadow:var(--as-shadow);padding:.5rem .8rem}
.as-mails-compte__item b{font-family:'Courier Prime',monospace;font-weight:700;font-size:1.15rem}
.as-mails-compte__item small{font-family:'Courier Prime',monospace;font-size:.62rem;letter-spacing:.1em;
	text-transform:uppercase;color:var(--sp-gray5)}
.as-mails-compte__item.is-off b{color:#B4302B}

.as-mails-note{display:flex;gap:.55rem;align-items:flex-start;background:var(--sp-white);
	border:1px solid var(--sp-gray2);border-left:3px solid var(--sp-g-jaune);border-radius:var(--sp-radius);
	padding:.7rem .85rem;font-size:.86rem;color:var(--sp-gray6);margin:0 0 16px;box-shadow:var(--as-shadow)}
.as-mails-note svg{width:16px;height:16px;flex:none;margin-top:2px;stroke-width:1.9;color:var(--sp-gray5)}

.as-mails-panel{padding:0;overflow:hidden}
.as-mails-panel + .as-mails-panel{margin-top:16px}
.as-mails-panel__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
	padding:.7rem 1rem;border-bottom:2px solid var(--sp-dark)}
.as-mails-panel__head h2{font-family:'Archivo',sans-serif;font-size:1rem;font-weight:800;letter-spacing:-.01em;margin:0}
.as-mails-panel__n{font-family:'Courier Prime',monospace;font-size:.62rem;letter-spacing:.05em;
	text-transform:uppercase;color:var(--sp-gray5)}

/* une ligne = un message */
.as-mail{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:start;gap:.6rem;
	padding:.7rem 1rem;border-bottom:1px solid var(--sp-gray2)}
.as-mail:last-child{border-bottom:0}
.as-mail.is-off{opacity:.62}
.as-mail__tete{grid-column:1;display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;
	width:100%;background:none;border:0;padding:0;text-align:left;cursor:pointer;color:inherit}
.as-mail__corps{min-width:0}
.as-mail__nom{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:.95rem;letter-spacing:-.01em}
.as-mail__objet{display:block;font-size:.84rem;color:var(--sp-gray6);margin-top:1px;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.as-mail__quand{display:block;font-family:'Courier Prime',monospace;font-size:.63rem;letter-spacing:.05em;
	text-transform:uppercase;color:var(--sp-gray5);margin-top:5px}
.as-mail__etat{flex:none;font-family:'Courier Prime',monospace;font-weight:700;font-size:.58rem;letter-spacing:.05em;
	text-transform:uppercase;border:1px solid transparent;border-radius:2px;padding:.2em .45em;white-space:nowrap;margin-top:3px}
.as-mail__etat--on{color:#0d6b4a;background:color-mix(in srgb,var(--sp-g-verte) 13%,transparent);
	border-color:color-mix(in srgb,var(--sp-g-verte) 38%,transparent)}
.as-mail__etat--off{color:#B4302B;background:color-mix(in srgb,#B4302B 9%,transparent);
	border-color:color-mix(in srgb,#B4302B 32%,transparent)}
.as-mail__etat--fixe{color:var(--sp-gray5);background:var(--sp-off);border-color:var(--sp-gray3)}
/* Bouton d'essai : sur la LIGNE, pas dans le repli. Enfoui sous le pli, il ne
   se voyait pas, et un bouton qu'il faut deplier pour trouver n'existe pas. */
.as-mail__test{grid-column:2;flex:none;margin-top:1px;gap:.3rem;
	font-size:.72rem;padding:.34rem .55rem;white-space:nowrap}
.as-mail__test svg{width:14px;height:14px;stroke-width:1.9}
.as-mail__sw{grid-column:3;margin-top:4px}
.as-mail__verrou{grid-column:3;margin-top:6px;color:var(--sp-gray5)}
.as-mail__verrou svg{width:16px;height:16px;stroke-width:1.9}

/* le détail déplié */
.as-mail__detail{grid-column:1 / -1;margin-top:.8rem;padding-top:.8rem;border-top:1px dashed var(--sp-gray3)}
.as-mail__detail[hidden]{display:none}
.as-mail__champs{display:grid;gap:.7rem;margin-bottom:.7rem}
.as-mail__champ{display:block;position:relative}
.as-mail__lbl{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-bottom:.25rem;
	font-family:'Courier Prime',monospace;font-size:.63rem;font-weight:700;letter-spacing:.07em;
	text-transform:uppercase;color:var(--sp-gray5)}
.as-mail__reset{background:none;border:0;padding:0;cursor:pointer;font-family:'Courier Prime',monospace;
	font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;color:var(--sp-amber);text-decoration:underline}
.as-mail__reset:hover{color:var(--sp-amber-deep)}
.as-mail__champ input{width:100%;box-sizing:border-box;border:1.5px solid var(--sp-gray3);border-radius:var(--sp-radius);
	background:var(--sp-white);padding:.45rem .55rem;font-size:.88rem;color:var(--sp-gray7)}
.as-mail__champ input:focus{outline:none;border-color:var(--sp-amber);box-shadow:0 0 0 3px var(--sp-amber-ring)}
.as-mail__prefixe{position:absolute;right:.55rem;top:1.55rem;font-family:'Courier Prime',monospace;
	font-size:.66rem;color:var(--sp-gray4);pointer-events:none}
.as-mail__vars{font-family:'Courier Prime',monospace;font-size:.64rem;color:var(--sp-gray5);margin:0 0 .8rem}
.as-mail__vars code{background:var(--sp-off);border:1px solid var(--sp-gray2);border-radius:2px;padding:.1em .3em}
.as-mail__interne{font-size:.84rem;color:var(--sp-gray6);margin:0 0 .8rem}

/* Resultat de l'essai : sous la ligne qui l'a demande, invisible tant qu'il n'y
   a rien a dire. */
.as-mail__essai-etat{
	grid-column:1 / -1;margin-top:.35rem;
	font-family:'Courier Prime',monospace;font-size:.68rem;line-height:1.4;
	color:var(--sp-gray5);overflow-wrap:anywhere;
}
.as-mail__essai-etat:empty{display:none}
@media (max-width:640px){
	.as-mail__test span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
	/* Reduit a son icone, le bouton devient trop petit pour un pouce : on elargit
	   la zone touchee sans elargir le dessin, en restant a l'ecart de l'interrupteur. */
	.as-mail__test{padding:.34rem .45rem;position:relative}
	.as-mail__test::after{content:'';position:absolute;left:50%;top:50%;
		transform:translate(-50%,-50%);width:40px;height:40px}
}
.as-mail__essai-etat.is-ok{color:#0d6b4a}
.as-mail__essai-etat.is-error{color:#B4302B}
.as-mail__apercu{margin-top:.2rem}
.as-mail__rendu{border:1px solid var(--sp-gray3);border-radius:var(--sp-radius);overflow:hidden;
	background:#fff;margin-top:.35rem;min-height:80px}
.as-mail__frame{width:100%;border:0;display:block;min-height:80px}
.as-mail__auto{display:flex;gap:.5rem;align-items:flex-start;margin-top:.6rem;padding:.55rem .65rem;
	border:1px dashed var(--sp-gray3);border-radius:var(--sp-radius);font-size:.79rem;color:var(--sp-gray6);background:var(--sp-off)}
.as-mail__auto svg{width:15px;height:15px;flex:none;margin-top:2px;stroke-width:1.9;color:var(--sp-gray5)}

@media (max-width:640px){
	.as-mail__objet{white-space:normal}
}