/* ==========================================================================
   SIMPLE — composants communs à toute la famille (fournis par SIMPLE Core)

   Tout est encapsulé sous .sphf. Le conteneur fixe lui-même sa taille de
   texte (réglage « Taille du texte ») ; tout ce qu'il contient est en em,
   pour rester juste quel que soit le thème (petite taille racine, capitales
   ou centrage imposés…). Les couleurs arrivent en variables --sphf-* posées
   sur l'enveloppe ; les valeurs ci-dessous ne servent que de repli.
   ========================================================================== */

.sphf {
	--sphf-accent: #0b6ec7;
	--sphf-accent-dark: #09569b;
	--sphf-accent-soft: #e2eef9;
	--sphf-accent-ring: #aacdee;
	--sphf-on-accent: #ffffff;
	--sphf-head: #0b6ec7;
	--sphf-head-dark: #074780;
	--sphf-head-light: #549ad8;
	--sphf-on-head: #ffffff;
	--sphf-page: #f4f8fb;
	--sphf-card: #ffffff;
	--sphf-zone: #f3f8fc;
	--sphf-text: #12212e;
	--sphf-muted: #5d6f7f;
	--sphf-line: #dde3e8;
	--sphf-danger: #d6394a;
	--sphf-ok: #16a56b;

	--sphf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--sphf-t1: clamp(1.6em, 1.1em + 1.6vw, 2.3em);
	--sphf-t2: 1.32em;
	--sphf-t3: 1.05em;
	--sphf-small: .94em;
	--sphf-mini: .86em;
	--sphf-bold: 800;
	--sphf-radius: 14px;
	--sphf-radius-s: 9px;
	--sphf-pill: 999px;
	--sphf-pad-x: 1.75em;
	--sphf-shadow: 0 1px 2px rgba(10, 30, 50, .06), 0 8px 24px rgba(10, 30, 50, .08);
	--sphf-shadow-strong: 0 2px 4px rgba(10, 30, 50, .08), 0 18px 44px rgba(10, 30, 50, .16);

	box-sizing: border-box;
	max-width: 74em;
	margin-left: auto;
	margin-right: auto;
	padding: .5em 1em 3.5em;
	color: var(--sphf-text);
	font-weight: 400;
	line-height: 1.55;
	font-family: var(--sphf-font);
	-webkit-font-smoothing: antialiased;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	word-spacing: normal;
}

.sphf *,
.sphf *::before,
.sphf *::after { box-sizing: border-box; }

/* Aucune puce : certains thèmes en ajoutent à toutes les listes du contenu. */
.sphf ul,
.sphf ol,
.sphf li { list-style: none !important; margin-left: 0; padding-left: 0; }
.sphf li::marker { content: none; }

/* Neutralise capitales, centrage, interlettrage et polices imposés par le thème. */
.sphf h1, .sphf h2, .sphf h3, .sphf h4, .sphf p, .sphf span, .sphf a, .sphf label, .sphf input, .sphf button,
.sphf select, .sphf textarea, .sphf legend, .sphf li, .sphf th, .sphf td, .sphf summary, .sphf time, .sphf small, .sphf strong {
	/* !important : certains thèmes imposent capitales et centrage avec !important. */
	text-transform: none !important;
	font-variant: normal;
	letter-spacing: normal !important;
	font-family: var(--sphf-font);
}
.sphf h1, .sphf h2, .sphf h3, .sphf h4, .sphf p, .sphf label, .sphf legend, .sphf li, .sphf th, .sphf td, .sphf input, .sphf textarea, .sphf select { text-align: left !important; }
.sphf h1, .sphf h2, .sphf h3, .sphf h4 { line-height: 1.2; color: inherit; }
.sphf p { line-height: 1.55; }
.sphf img, .sphf svg { max-width: 100%; }
.sphf input, .sphf select, .sphf textarea, .sphf button { font-size: 1em; line-height: 1.4; }

.sphf .sphf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.sphf .sphf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------------ En-tête */

.sphf .sphf-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.1em;
	padding: 1.6em var(--sphf-pad-x);
	margin: 0 0 1.25em;
	border-radius: var(--sphf-radius);
	background: var(--sphf-head);
	color: var(--sphf-on-head);
	box-shadow: var(--sphf-shadow);
}
.sphf--gradient .sphf-header { background: linear-gradient(135deg, var(--sphf-head-dark), var(--sphf-head) 55%, var(--sphf-head-light)); }
.sphf .sphf-title { margin: 0; font-size: var(--sphf-t1); font-weight: var(--sphf-bold); line-height: 1.15; letter-spacing: -.02em !important; color: var(--sphf-on-head); }
.sphf .sphf-subtitle { margin: .4em 0 0; font-size: var(--sphf-t3); font-weight: 500; color: var(--sphf-on-head); opacity: .9; }
.sphf .sphf-header__text { flex: 1 1 auto; min-width: 0; }
.sphf .sphf-header__actions { display: flex; flex-wrap: wrap; gap: .6em; }
.sphf .sphf-header--logo { align-items: center; }
.sphf .sphf-logo {
	flex: 0 0 auto;
	width: 3.9em;
	height: 3.9em;
	display: grid;
	place-items: center;
	font-size: 1.9em;
	border-radius: var(--sphf-radius);
	background: rgba(255, 255, 255, .18);
	border: 1px solid rgba(255, 255, 255, .32);
}

/* Barre sans bandeau. */
.sphf .sphf-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6em 1.1em; margin: 0 0 1em; padding: 0 0 .75em; border-bottom: 1px solid var(--sphf-line); }
.sphf .sphf-bar__count { margin: 0; color: var(--sphf-muted); }
.sphf .sphf-bar__actions { display: flex; flex-wrap: wrap; gap: .5em; }

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

.sphf .sphf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	margin: 0;
	padding: .65em 1.15em;
	border: 1px solid var(--sphf-line);
	border-radius: var(--sphf-pill);
	background: var(--sphf-card);
	color: var(--sphf-text);
	font-size: var(--sphf-small);
	font-weight: 650;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(10, 30, 50, .08);
	transition: transform .14s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.sphf .sphf-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(10, 30, 50, .16); }
.sphf .sphf-btn:focus-visible,
.sphf a:focus-visible,
.sphf summary:focus-visible { outline: 3px solid var(--sphf-accent-ring); outline-offset: 2px; }
.sphf .sphf-btn--primary { border-color: transparent; background: var(--sphf-accent) !important; color: var(--sphf-on-accent) !important; }
.sphf .sphf-btn--primary:hover { background: var(--sphf-accent-dark) !important; }
/* Dans le bandeau, le bouton principal passe en inverse : il reste visible
   même quand le bandeau et l'accent ont la même couleur. */
.sphf .sphf-header .sphf-btn--primary { background: var(--sphf-on-head) !important; color: var(--sphf-head) !important; }
.sphf .sphf-header .sphf-btn--primary:hover { opacity: .92; }
.sphf a.sphf-btn,
.sphf a.sphf-btn:hover,
.sphf a.sphf-btn:focus,
.sphf a.sphf-btn:visited { text-decoration: none !important; }
.sphf .sphf-btn--soft { background: var(--sphf-accent-soft); border-color: transparent; color: var(--sphf-accent-dark) !important; box-shadow: none; }
.sphf .sphf-btn--ghost { background: transparent; border-color: currentColor; color: inherit; box-shadow: none; opacity: .85; }
.sphf .sphf-header .sphf-btn--ghost { color: var(--sphf-on-head); }
.sphf .sphf-panel .sphf-btn--ghost,
.sphf .sphf-bar .sphf-btn--ghost { color: var(--sphf-muted); border-color: var(--sphf-line); }
.sphf .sphf-btn--danger { color: var(--sphf-danger); border-color: color-mix(in srgb, var(--sphf-danger) 35%, transparent); box-shadow: none; }
.sphf .sphf-btn--danger:hover { background: var(--sphf-danger); border-color: var(--sphf-danger); color: #fff; }
.sphf .sphf-btn--block { width: 100%; }
.sphf .sphf-btn--big { padding: .8em 1.75em; font-size: 1em; }
.sphf .sphf-btn--compact { padding: .5em .9em; font-size: var(--sphf-mini); }
.sphf .sphf-btn[disabled] { opacity: .6; cursor: wait; transform: none; }
.sphf .sphf-btn svg { flex: 0 0 auto; max-width: none; }

/* ------------------------------------------------------------------ Messages */

.sphf .sphf-notice {
	display: flex;
	gap: .75em;
	align-items: flex-start;
	padding: .9em 1.1em;
	margin: 0 0 1.1em;
	border-radius: var(--sphf-radius-s);
	border: 1px solid var(--sphf-line);
	background: var(--sphf-card);
	box-shadow: var(--sphf-shadow);
	font-size: .96em;
}
.sphf .sphf-notice p { margin: 0; }
.sphf .sphf-notice__ico { position: relative; flex: 0 0 1.4em; width: 1.4em; height: 1.4em; margin-top: .05em; border-radius: 50%; background: var(--sphf-accent); }
.sphf .sphf-notice__ico::after { content: "i"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .8em; }
.sphf .sphf-notice--ok { border-color: #b9e6d1; background: #f2fbf7; color: #12212e; }
.sphf .sphf-notice--ok .sphf-notice__ico { background: var(--sphf-ok); }
.sphf .sphf-notice--ok .sphf-notice__ico::after { content: "✓"; }
.sphf .sphf-notice--error { border-color: #f5cad0; background: #fef5f6; color: #12212e; }
.sphf .sphf-notice--error .sphf-notice__ico { background: var(--sphf-danger); }
.sphf .sphf-notice--error .sphf-notice__ico::after { content: "!"; }
.sphf .sphf-notice--info { border-color: var(--sphf-accent-ring); background: var(--sphf-accent-soft); color: #12212e; }
.sphf .sphf-notice__btn { display: inline-block; margin-top: .6em; padding: .5em 1em; border-radius: var(--sphf-pill); background: var(--sphf-accent); color: var(--sphf-on-accent) !important; font-weight: 650; text-decoration: none !important; }

/* ------------------------------------------------------------------ État vide */

.sphf .sphf-empty { padding: 3.75em 1.5em; background: var(--sphf-card); border: 1px dashed var(--sphf-line); border-radius: var(--sphf-radius); text-align: center; }
.sphf .sphf-empty * { text-align: center !important; }
.sphf .sphf-empty__icon { margin-bottom: .25em; font-size: 3em; line-height: 1; }
.sphf .sphf-empty h3 { margin: 0 0 .35em; font-size: var(--sphf-t2); font-weight: var(--sphf-bold); }
.sphf .sphf-empty p { margin: 0 0 1.25em; color: var(--sphf-muted); font-size: var(--sphf-small); }

/* ------------------------------------------------------------------ Panneaux et onglets */

.sphf .sphf-panel {
	max-width: 30em;
	margin: 0 auto;
	padding: 1.9em 1.9em 1.6em;
	background: var(--sphf-card);
	border: 1px solid var(--sphf-line);
	border-radius: var(--sphf-radius);
	box-shadow: var(--sphf-shadow-strong);
}
.sphf .sphf-panel--form { max-width: 45em; }
.sphf .sphf-panel__title { margin: 0 0 1.1em; font-size: var(--sphf-t2); font-weight: var(--sphf-bold); }
.sphf .sphf-panel__title--center { text-align: center !important; }
.sphf .sphf-panel__help { margin: 0 0 1.25em; color: var(--sphf-muted); font-size: var(--sphf-small); }

.sphf .sphf-tabs { display: flex; gap: .25em; padding: .25em; margin: 0 0 1.4em; background: var(--sphf-zone); border: 1px solid var(--sphf-line); border-radius: var(--sphf-pill); }
.sphf .sphf-tab { flex: 1; padding: .65em .75em; border-radius: var(--sphf-pill); color: var(--sphf-muted); font-size: var(--sphf-small); font-weight: 700; text-align: center; text-decoration: none; }
.sphf .sphf-tab:hover { color: var(--sphf-accent); }
.sphf .sphf-tab.is-active { background: var(--sphf-card); color: var(--sphf-accent-dark); box-shadow: 0 2px 8px rgba(10, 30, 50, .12); }

/* ------------------------------------------------------------------ Formulaires */

.sphf .sphf-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); gap: 0 1.25em; }
.sphf .sphf-field { margin: 0 0 1.1em; }
.sphf .sphf-field label { display: block; margin: 0 0 .4em; color: var(--sphf-text); font-size: var(--sphf-mini); font-weight: 700; }
.sphf .sphf-field input[type="text"],
.sphf .sphf-field input[type="email"],
.sphf .sphf-field input[type="password"],
.sphf .sphf-field input[type="date"],
.sphf .sphf-field input[type="time"],
.sphf .sphf-field input[type="tel"],
.sphf .sphf-field input[type="url"],
.sphf .sphf-field input[type="number"],
.sphf .sphf-field select,
.sphf .sphf-field textarea {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: .7em .9em;
	border: 1px solid var(--sphf-line);
	border-radius: var(--sphf-radius-s);
	background-color: var(--sphf-card);
	color: var(--sphf-text);
	font-size: 1em;
	line-height: 1.4;
	box-shadow: none;
	min-height: 2.9em;
}
.sphf .sphf-field input:focus,
.sphf .sphf-field select:focus,
.sphf .sphf-field textarea:focus { outline: 0; border-color: var(--sphf-accent); box-shadow: 0 0 0 4px var(--sphf-accent-soft); }
.sphf .sphf-field input::placeholder,
.sphf .sphf-field textarea::placeholder { color: var(--sphf-muted); opacity: .7; }
.sphf .sphf-field small { display: block; margin-top: .4em; color: var(--sphf-muted); font-size: var(--sphf-mini); }
.sphf .sphf-field small.is-error { color: var(--sphf-danger); font-weight: 650; }
.sphf .sphf-check { display: flex; align-items: center; gap: .55em; margin: -.25em 0 1.25em; color: var(--sphf-muted); font-size: .94em; cursor: pointer; }
.sphf .sphf-check input { width: 1.1em; height: 1.1em; margin: 0; accent-color: var(--sphf-accent); }
.sphf .sphf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75em; margin: .4em 0 0; }
.sphf .sphf-links { margin: 1.1em 0 0; color: var(--sphf-muted); font-size: var(--sphf-mini); text-align: center !important; }
.sphf .sphf-links a { color: var(--sphf-accent); text-decoration: none; }
.sphf .sphf-links a:hover { text-decoration: underline; }
.sphf .sphf-links span { margin: 0 .4em; opacity: .5; }
.sphf .sphf-links--2fa { margin-top: .75em; }
.sphf .sphf-tag { display: inline-block; margin-left: .4em; padding: .05em .45em; border-radius: var(--sphf-pill); background: var(--sphf-zone); color: var(--sphf-muted); font-size: .9em; font-weight: 600; }

/* ==================================================================
   Mode « Hériter du thème » : police, texte et fond viennent du thème ;
   l'extension ne garde que la mise en page, l'accent et le bandeau.
   ================================================================= */

.sphf--theme {
	--sphf-font: inherit;
	--sphf-card: transparent;
	--sphf-zone: rgba(128, 128, 128, .07);
	--sphf-line: rgba(128, 128, 128, .28);
	--sphf-text: inherit;
	--sphf-muted: inherit;
	--sphf-shadow: none;
	--sphf-shadow-strong: none;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}
.sphf--theme .sphf-field small,
.sphf--theme .sphf-panel__help,
.sphf--theme .sphf-empty p,
.sphf--theme .sphf-links { opacity: .72; }
.sphf--theme .sphf-field input,
.sphf--theme .sphf-field select,
.sphf--theme .sphf-field textarea { background-color: transparent; color: inherit; }
.sphf--theme .sphf-tab.is-active { background: rgba(128, 128, 128, .16); color: inherit; }
.sphf--theme .sphf-btn { color: inherit; background: transparent; }
.sphf--theme .sphf-btn--soft { background: var(--sphf-accent-soft) !important; color: var(--sphf-accent-dark) !important; }

/* Aperçu de l'administration. */
.sphf--preview { margin: 0; padding: 0; max-width: none; pointer-events: none; }
.sphf--preview .sphf-header { padding: 1.1em 1.25em; margin-bottom: .75em; }
.sphf--preview [hidden] { display: none !important; }
.sphf--preview .sphf-panel { max-width: none; box-shadow: var(--sphf-shadow); }

/* ------------------------------------------------------------------ Mobile */

@media (max-width: 760px) {
	.sphf { padding: .25em .75em 2.5em; --sphf-pad-x: 1.25em; }
	.sphf .sphf-header { padding: 1.25em var(--sphf-pad-x); }
	.sphf .sphf-header__actions { width: 100%; }
	.sphf .sphf-header__actions .sphf-btn { flex: 1; }
	.sphf .sphf-panel { padding: 1.5em 1.25em; }
	.sphf .sphf-logo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sphf *, .sphf *::before, .sphf *::after { transition: none !important; animation: none !important; }
}