/* Cachouflix : console de compte (keycloak.v3, PatternFly 5).
 * Mêmes couleurs, polices et logos que le thème de connexion et le site. */

@font-face {
	font-family: Fredoka; font-style: normal; font-weight: 300 700; font-display: swap;
	src: url("../fonts/fredoka.woff2") format("woff2");
}
@font-face {
	font-family: Nunito; font-style: normal; font-weight: 200 1000; font-display: swap;
	src: url("../fonts/nunito.woff2") format("woff2");
}

:root {
	--cf-navy: #18203a;
	--cf-cream: #fdf6ee;
	--cf-ink: #2b2a30;
	--cf-carrot: #f2762e;
	--cf-carrot-deep: #d9601c;
	--cf-teal: #4dbdd0;

	--cf-bg: #fdf6ee;
	--cf-surface: #ffffff;
	--cf-surface-soft: #f7eadb;
	--cf-text: #2b2a30;
	--cf-line: #2b2a30;
	--cf-link: #b4480f;

	--pf-v5-global--FontFamily--text: Nunito, ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
	--pf-v5-global--FontFamily--heading: Fredoka, "Baloo 2", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
	--pf-v5-global--primary-color--100: var(--cf-carrot-deep);
	--pf-v5-global--primary-color--200: var(--cf-carrot-deep);
	--pf-v5-global--active-color--100: var(--cf-carrot-deep);
	--pf-v5-global--link--Color: var(--cf-link);
	--pf-v5-global--link--Color--hover: var(--cf-carrot-deep);
}

:root.pf-v5-theme-dark {
	--cf-bg: #18203a;
	--cf-surface: #222b4a;
	--cf-surface-soft: #1f2744;
	--cf-text: #fdf6ee;
	--cf-line: #0c1124;
	--cf-link: #f7883a;
	--pf-v5-global--link--Color: var(--cf-link);
	--pf-v5-global--link--Color--hover: var(--cf-carrot);
	--pf-v5-global--BackgroundColor--100: var(--cf-surface);
	--pf-v5-global--BackgroundColor--200: var(--cf-bg);
}

body, .pf-v5-c-page { font-family: var(--pf-v5-global--FontFamily--text); }
h1, h2, h3, .pf-v5-c-title { font-family: var(--pf-v5-global--FontFamily--heading); }
::selection { background: var(--cf-carrot); color: var(--cf-ink); }
:focus-visible { outline: 3px solid var(--cf-teal); outline-offset: 2px; }

/* En-tête : crème avec un liseré épais, logo Cachouflix */
.pf-v5-c-masthead {
	--pf-v5-c-masthead--BackgroundColor: var(--cf-bg);
	--pf-v5-c-masthead--Color: var(--cf-text);
	border-bottom: 3px solid var(--cf-line);
}
.pf-v5-c-masthead .pf-v5-c-brand, .pf-v5-c-masthead__brand img { height: 40px; max-height: 40px; width: auto; }
.pf-v5-theme-dark .pf-v5-c-masthead__brand img { content: url("../img/lockup-notag-dark.png"); }

/* Menu latéral et fond des pages */
.pf-v5-c-page {
	--pf-v5-c-page--BackgroundColor: var(--cf-bg);
	--pf-v5-c-page__sidebar--BackgroundColor: var(--cf-surface-soft);
	--pf-v5-c-page__main-section--BackgroundColor: var(--cf-bg);
}
.pf-v5-c-page__sidebar { border-right: 3px solid var(--cf-line); }
.pf-v5-c-nav {
	--pf-v5-c-nav__link--Color: var(--cf-text);
	--pf-v5-c-nav__link--hover--Color: var(--cf-text);
	--pf-v5-c-nav__link--m-current--Color: var(--cf-text);
	--pf-v5-c-nav__link--BackgroundColor: transparent;
	--pf-v5-c-nav__link--hover--BackgroundColor: color-mix(in srgb, var(--cf-carrot) 18%, transparent);
	--pf-v5-c-nav__link--m-current--BackgroundColor: color-mix(in srgb, var(--cf-carrot) 30%, transparent);
	--pf-v5-c-nav__section-title--Color: var(--cf-text);
}
.pf-v5-c-nav__link { border-radius: 999px; font-weight: 600; }
.pf-v5-c-nav__link::after { display: none; }
.pf-v5-c-page__main-section.pf-m-light, .pf-v5-c-page__main-section { background-color: var(--cf-bg); }

/* Cartes et listes : bord épais façon autocollant */
.pf-v5-c-card, .pf-v5-c-data-list, .pf-v5-c-description-list.pf-m-display-lg {
	background: var(--cf-surface);
	border: 3px solid var(--cf-line);
	border-radius: 18px;
	box-shadow: 4px 4px 0 var(--cf-line);
	overflow: hidden;
}
.pf-v5-c-data-list__item { background: transparent; }

/* Champs */
.pf-v5-c-form-control {
	--pf-v5-c-form-control--BorderRadius: 12px;
	border-radius: 12px;
}
.pf-v5-c-form-control::after { border-radius: 12px; }

/* Boutons */
.pf-v5-c-button { font-family: var(--pf-v5-global--FontFamily--heading); font-weight: 600; border-radius: 999px; }
.pf-v5-c-button.pf-m-primary {
	--pf-v5-c-button--m-primary--BackgroundColor: var(--cf-carrot);
	--pf-v5-c-button--m-primary--Color: var(--cf-ink);
	--pf-v5-c-button--m-primary--hover--BackgroundColor: var(--cf-carrot-deep);
	--pf-v5-c-button--m-primary--hover--Color: var(--cf-cream);
	--pf-v5-c-button--m-primary--focus--BackgroundColor: var(--cf-carrot-deep);
	--pf-v5-c-button--m-primary--focus--Color: var(--cf-cream);
	border: 3px solid var(--cf-line);
	box-shadow: 0 3px 0 var(--cf-line);
}
.pf-v5-c-button.pf-m-secondary {
	--pf-v5-c-button--m-secondary--Color: var(--cf-text);
	--pf-v5-c-button--m-secondary--hover--Color: var(--cf-text);
	--pf-v5-c-button--m-secondary--focus--Color: var(--cf-text);
	--pf-v5-c-button--m-secondary--after--BorderColor: var(--cf-line);
	--pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--cf-line);
	--pf-v5-c-button--m-secondary--focus--after--BorderColor: var(--cf-line);
	--pf-v5-c-button--after--BorderWidth: 3px;
	--pf-v5-c-button--hover--after--BorderWidth: 3px;
	--pf-v5-c-button--focus--after--BorderWidth: 3px;
}