/*
 Theme Name:   Divi Enfant PSM
 Description:  Thème enfant de Divi pour le site PSM (La Pétanque Sportive Mondiale) : charte « tableau de score », styles des sections et du démonstrateur.
 Author:       Eric / PSP REA
 Template:     Divi
 Version:      1.0.0
 Text Domain:  divi-enfant-psm
*/

/* Charte PSM : vert ardoise des tableaux de score, buis du cochonnet, sable clair du terrain. */
:root {
	--psm-bg: #F2F4F1;
	--psm-surface: #FFFFFF;
	--psm-ink: #15291F;
	--psm-muted: #56665D;
	--psm-line: #D5DCD6;
	--psm-board: #15291F;
	--psm-board-ink: #EAF0EB;
	--psm-board-muted: #A9B8AE;
	--psm-accent: #C98A06;
	--psm-accent-strong: #9A6800;
	--psm-accent-ink: #1A1300;
	--psm-ok: #1D7A46; --psm-ok-bg: #E2F3E8;
	--psm-ko: #B3261E; --psm-ko-bg: #FBE7E5;
	--psm-warn: #8A5A00; --psm-warn-bg: #FFF2D6;
	--psm-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
	--psm-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
	--psm-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
}

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body, #page-container { background: var(--psm-bg); }
body, #page-container .et_pb_text, #page-container p, #page-container li { font-family: var(--psm-body); color: var(--psm-ink); font-size: 17px; line-height: 1.55; }
#page-container h1, #page-container h2, #page-container h3 { font-family: var(--psm-display); color: var(--psm-ink); line-height: 1.02; text-wrap: balance; padding-bottom: 0; letter-spacing: 0.01em; }
#page-container h2 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; text-transform: uppercase; }
#page-container h3 { font-size: 1.45rem; font-weight: 600; }
#page-container .et_pb_text p { padding-bottom: 0; }
#page-container .et_pb_text p + p { margin-top: 0.6em; }
:focus-visible { outline: 3px solid var(--psm-accent); outline-offset: 2px; }

/* En-tête et pied de page Divi aux couleurs du tableau de score */
#main-header, #main-header.et-fixed-header { background: var(--psm-board) !important; box-shadow: none; }
#top-menu a, #main-header .nav li a, .et-fixed-header #top-menu a { color: var(--psm-board-muted) !important; font-family: var(--psm-body); font-weight: 600; }
#top-menu a:hover, #top-menu li.current-menu-item > a { color: var(--psm-board-ink) !important; opacity: 1; }
.mobile_menu_bar:before { color: var(--psm-accent) !important; }
#main-header .et_mobile_menu { background: var(--psm-board); border-top-color: var(--psm-accent); }
#main-header .et_mobile_menu a { color: var(--psm-board-ink) !important; }
#main-footer, #footer-bottom { background: var(--psm-board) !important; }
#footer-info, #footer-info a { color: var(--psm-board-muted) !important; font-family: var(--psm-body); }
#main-content .container:before { display: none; }

/* Petits textes partagés */
.psm-eyebrow { font-family: var(--psm-mono); font-size: 0.75rem !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--psm-muted) !important; }
.psm-lead, .psm-head p.psm-lead { font-size: 1.15rem !important; max-width: 62ch; color: var(--psm-muted) !important; }
.psm-head h2 { margin: 10px 0 12px; }
.psm-note { color: var(--psm-muted) !important; font-size: 0.9rem !important; }

/* Ouverture sur fond sombre */
.psm-hero { background: var(--psm-board) !important; }
.psm-hero h1 { font-size: clamp(3rem, 8vw, 6.2rem) !important; font-weight: 800 !important; text-transform: uppercase; color: var(--psm-board-ink) !important; }
.psm-hero h1 span { color: var(--psm-accent); }
.psm-hero p, .psm-hero .psm-lead { color: var(--psm-board-muted) !important; }
.psm-hero .psm-eyebrow { color: var(--psm-board-muted) !important; margin-bottom: 14px; }
.psm-notice { display: inline-block; margin-top: 22px !important; padding: 6px 12px; border: 1px dashed #ffffff40; border-radius: 4px; font-size: 0.85rem !important; }
.psm-scoreboard { border: 1px solid #ffffff22; border-radius: 6px; overflow: hidden; font-family: var(--psm-mono); }
.psm-scoreboard div { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #ffffff1a; align-items: baseline; }
.psm-scoreboard div:last-child { border-bottom: 0; }
.psm-scoreboard span { color: var(--psm-board-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }
.psm-scoreboard strong { font-family: var(--psm-display); font-size: 2rem; color: var(--psm-accent); line-height: 1; }

/* Bandes */
.psm-band + .psm-band { border-top: 1px solid var(--psm-line); }

/* Constat, feuille de route : colonnes séparées par des filets, sous un trait fort */
.psm-ruled { border-top: 2px solid var(--psm-ink); padding-top: 18px; }
.psm-ruled .et_pb_column + .et_pb_column { border-left: 1px solid var(--psm-line); padding-left: 18px; }
.psm-ruled b, .psm-ruled strong { font-family: var(--psm-display); font-size: 1.3rem; display: block; margin-bottom: 6px; }
.psm-ruled p, .psm-ruled li { color: var(--psm-muted) !important; font-size: 0.95rem !important; }
.psm-when { font-family: var(--psm-mono); font-size: 0.75rem !important; text-transform: uppercase; letter-spacing: 0.08em; color: var(--psm-accent-strong) !important; }

/* Cartes (piliers, intégration) */
.psm-card { background: var(--psm-surface); border: 1px solid var(--psm-line); border-radius: 6px; padding: 22px !important; }
.psm-card ul { padding-left: 18px; color: var(--psm-muted); }
.psm-card li { color: var(--psm-muted) !important; }
.psm-phase { display: inline-block; font-family: var(--psm-mono); font-size: 0.72rem !important; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 8px; border-radius: 3px; margin-bottom: 10px !important; }
.psm-phase.p1 { background: var(--psm-accent); color: var(--psm-accent-ink) !important; }
.psm-phase.p2 { background: var(--psm-warn-bg); color: var(--psm-warn) !important; }
.psm-phase.p3 { border: 1px solid var(--psm-line); color: var(--psm-muted) !important; }
.psm-principles b { display: block; font-size: 1.05rem; margin-bottom: 6px; }
.psm-principles p { color: var(--psm-muted) !important; font-size: 0.95rem !important; }
#page-container code { font-family: var(--psm-mono); font-size: 0.85em; background: var(--psm-bg); border: 1px solid var(--psm-line); border-radius: 3px; padding: 1px 5px; }

/* Démonstrateur, calendrier, classement (modules Code animés par psm-demo.js) */
.psm-app, .psm-app p, .psm-app li, .psm-app td, .psm-app th { font-family: var(--psm-body); color: var(--psm-ink); }
.psm-app .num { font-variant-numeric: tabular-nums; }
.psm-app .mono { font-family: var(--psm-mono); font-size: 0.85em; }
.psm-app .eyebrow { font-family: var(--psm-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--psm-muted); }
.psm-app h3 { font-family: var(--psm-display); font-size: 1.3rem; font-weight: 600; margin: 0; padding: 0; }
.psm-app .demo { background: var(--psm-surface); border: 1px solid var(--psm-line); border-radius: 8px; overflow: hidden; }
.psm-app .demo-bar { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding: 14px 18px; background: var(--psm-board); color: var(--psm-board-ink); }
.psm-app .demo-bar label { font-size: 0.85rem; color: var(--psm-board-muted); display: flex; gap: 8px; align-items: center; }
.psm-app select, .psm-app input[type="search"], .psm-app input[type="text"] { font: inherit; font-size: 0.95rem; color: var(--psm-ink); background: var(--psm-surface); border: 1px solid var(--psm-line); border-radius: 4px; padding: 6px 10px; }
.psm-app .demo-bar select { background: #ffffff12; color: var(--psm-board-ink); border-color: #ffffff30; }
.psm-app .demo-bar select option { color: #15291F; }
.psm-app .role { margin-left: auto; font-family: var(--psm-mono); font-size: 0.75rem; color: var(--psm-board-muted); }
.psm-app .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--psm-line); }
.psm-app .kpis div { padding: 14px 18px; display: grid; gap: 2px; }
.psm-app .kpis div + div { border-left: 1px solid var(--psm-line); }
.psm-app .kpis strong { font-family: var(--psm-display); font-size: 2rem; line-height: 1; }
.psm-app .kpis span { font-size: 0.8rem; color: var(--psm-muted); }
.psm-app .tabs { display: flex; border-bottom: 1px solid var(--psm-line); overflow-x: auto; }
.psm-app .tabs button { font: inherit; font-weight: 600; font-size: 0.95rem; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--psm-muted); padding: 12px 18px; cursor: pointer; white-space: nowrap; }
.psm-app .tabs button[aria-selected="true"] { color: var(--psm-ink); border-bottom-color: var(--psm-accent); }
.psm-app .panel { padding: 18px; display: grid; gap: 16px; }
.psm-app .toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.psm-app .hint { color: var(--psm-muted); font-size: 0.85rem; }
.psm-app .table-wrap { overflow-x: auto; border: 1px solid var(--psm-line); border-radius: 6px; }
.psm-app table { width: 100%; border-collapse: collapse; font-size: 0.92rem; border: 0; margin: 0; }
.psm-app th { text-align: left; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--psm-muted); padding: 10px 12px; border: 0; border-bottom: 1px solid var(--psm-line); white-space: nowrap; background: var(--psm-bg); }
.psm-app td { padding: 9px 12px; border: 0; border-bottom: 1px solid var(--psm-line); vertical-align: top; }
.psm-app tr:last-child td { border-bottom: 0; }
.psm-app td.r, .psm-app th.r { text-align: right; }
.psm-app td.mono { white-space: nowrap; }
/* Listes longues (licenciés, mutations) : zone défilante, en-tête toujours visible. */
.psm-app #p-lic .table-wrap, .psm-app #p-mut .table-wrap { max-height: 480px; overflow: auto; }
.psm-app #p-lic th, .psm-app #p-mut th { position: sticky; top: 0; z-index: 1; }
.psm-app tbody tr.clickable { cursor: pointer; }
.psm-app tbody tr.clickable:hover td { background: var(--psm-bg); }
.psm-app tbody tr.sel td { background: var(--psm-warn-bg); }
.psm-app .pill { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.psm-app .pill.ok { background: var(--psm-ok-bg); color: var(--psm-ok); }
.psm-app .pill.ko { background: var(--psm-ko-bg); color: var(--psm-ko); }
.psm-app .pill.warn { background: var(--psm-warn-bg); color: var(--psm-warn); }
.psm-app .pill.neutral { background: var(--psm-bg); color: var(--psm-muted); border: 1px solid var(--psm-line); }
.psm-app .split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.psm-app .two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.psm-app .card { border: 1px solid var(--psm-line); border-radius: 6px; padding: 16px; display: grid; gap: 10px; background: var(--psm-surface); }
.psm-app .kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 0.92rem; margin: 0; }
.psm-app .kv dt { color: var(--psm-muted); }
.psm-app .kv dd { margin: 0; }
.psm-app .timeline, .psm-app .checks, .psm-app .rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.9rem; }
.psm-app .timeline li { display: grid; grid-template-columns: 82px 1fr; gap: 10px; }
.psm-app .timeline .when { font-family: var(--psm-mono); font-size: 0.8rem; color: var(--psm-muted); }
.psm-app .checks li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; }
.psm-app .checks .y { color: var(--psm-ok); font-weight: 700; }
.psm-app .checks .n { color: var(--psm-ko); font-weight: 700; }
.psm-app .rules li { padding-left: 14px; border-left: 3px solid var(--psm-accent); }
.psm-app .empty { color: var(--psm-muted); font-style: italic; }
.psm-app .verify { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.psm-app .verdict { padding: 12px 14px; border-radius: 6px; font-size: 0.95rem; }
.psm-app .verdict.ok { background: var(--psm-ok-bg); color: var(--psm-ok); }
.psm-app .verdict.ko { background: var(--psm-ko-bg); color: var(--psm-ko); }
.psm-app button.btn { font: inherit; font-weight: 600; font-size: 0.92rem; background: var(--psm-accent); color: var(--psm-accent-ink); border: 0; border-radius: 4px; padding: 7px 14px; cursor: pointer; }
.psm-app button.btn:hover { background: var(--psm-accent-strong); }
.psm-app button.link { font: inherit; background: none; border: 0; color: var(--psm-accent-strong); text-decoration: underline; cursor: pointer; padding: 0; font-size: 0.88rem; }
.psm-app .filters { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 16px; align-items: center; }
.psm-app .filters label { font-size: 0.85rem; color: var(--psm-muted); display: flex; gap: 8px; align-items: center; }
.psm-app .cal { border-top: 2px solid var(--psm-ink); }
.psm-app .cal-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--psm-line); align-items: baseline; }
.psm-app .cal-date { font-family: var(--psm-display); font-size: 1.35rem; line-height: 1.1; }
.psm-app .cal-date small { display: block; font-family: var(--psm-mono); font-size: 0.72rem; color: var(--psm-muted); letter-spacing: 0.06em; }
.psm-app .cal-main b { font-size: 1.05rem; }
.psm-app .cal-main p { color: var(--psm-muted); font-size: 0.9rem; padding: 0; }
.psm-app .cal-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.psm-app .flows { display: grid; gap: 10px; }
.psm-app .flow { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 4px 10px; font-size: 0.9rem; align-items: center; }
.psm-app .flow .bar { grid-column: 1 / -1; height: 8px; background: var(--psm-bg); border-radius: 4px; overflow: hidden; border: 1px solid var(--psm-line); }
.psm-app .flow .bar i { display: block; height: 100%; background: var(--psm-accent); }
.psm-app .flow b { text-align: right; font-variant-numeric: tabular-nums; }
.psm-app .rank-pos { font-family: var(--psm-display); font-size: 1.25rem; font-weight: 800; }
.psm-app .flag { font-family: var(--psm-mono); font-size: 0.75rem; padding: 1px 6px; border: 1px solid var(--psm-line); border-radius: 3px; color: var(--psm-muted); }

@media (max-width: 980px) {
	.psm-ruled .et_pb_column + .et_pb_column { border-left: 0; padding-left: 0; border-top: 1px solid var(--psm-line); padding-top: 14px; }
	.psm-app .split, .psm-app .two { grid-template-columns: minmax(0, 1fr); }
	.psm-app .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.psm-app .kpis div:nth-child(3) { border-left: 0; }
	.psm-app .kpis div:nth-child(n+3) { border-top: 1px solid var(--psm-line); }
}
@media (max-width: 620px) {
	.psm-app .cal-row { grid-template-columns: 1fr; gap: 4px; }
	.psm-app .cal-tags { justify-content: flex-start; }
	.psm-app .role { margin-left: 0; }
}

/* Menu : 5 ancres, bouton d'essai et bascule de langue FR / EN */
@media (min-width: 981px) {
	#top-menu li { padding-right: 20px; }
	#top-menu li.psm-cta, #top-menu li.psm-lang { padding-right: 10px; }
	#top-menu li.psm-cta a { background: var(--psm-accent); color: var(--psm-accent-ink) !important; border-radius: 999px; padding: 6px 14px !important; margin-top: -6px; }
	#top-menu li.psm-cta a:hover { background: var(--psm-board-ink); opacity: 1; }
	#top-menu li.psm-lang a { border: 1px solid var(--psm-board-muted); border-radius: 999px; padding: 5px 10px !important; margin-top: -5px; font-family: var(--psm-mono); font-size: 13px; letter-spacing: 0.04em; }
	#top-menu li.psm-lang a:hover { border-color: var(--psm-accent); }
}
.et_mobile_menu li.psm-cta a { color: var(--psm-accent) !important; font-weight: 700; }
.et_mobile_menu li.psm-lang a { font-weight: 700; }

/* Entre 981 et 1199 px, le menu complet chevauche le logo : on garde le menu repliable de Divi */
@media (min-width: 981px) and (max-width: 1199px) {
	#top-menu-nav { display: none; }
	#et_mobile_nav_menu { display: block; }
	#et-top-navigation { padding-left: 0 !important; padding-top: 24px; padding-bottom: 24px; }
	#main-header .et_mobile_menu { top: 100%; }
}

/* Style sombre (05/11/2026), inspiré de la maquette d'Eric : on change les couleurs de la charte, tout le site suit. */
:root {
	--psm-bg: #050a14; --psm-surface: #0e1728; --psm-ink: #f1f5f9; --psm-muted: #a8b5c7; --psm-line: #1f2c42;
	--psm-board: #0b1322; --psm-board-ink: #f8fafc; --psm-board-muted: #94a3b8;
	--psm-accent: #f59e0b; --psm-accent-strong: #fbbf24; --psm-accent-ink: #1a1300;
	--psm-ok: #34d399; --psm-ok-bg: #0d3327; --psm-ko: #f87171; --psm-ko-bg: #3b1414; --psm-warn: #fbbf24; --psm-warn-bg: #3a2a08;
}
#main-content, #main-content .container, .et_pb_section:not([class*="psm-"]) { background-color: var(--psm-bg); }
#main-content .container:before { display: none; }
#top-header { display: none; }
.psm-app .demo-bar select option, select option { color: #f1f5f9; background: #0e1728; }

/* Le fond blanc par défaut de Divi disparaît partout, sauf les bandeaux qui ont leur propre fond. */
#page-container .et_pb_section:not(.psm-hero) { background-color: var(--psm-bg) !important; }
#page-container .et_pb_row { background-color: transparent; }

/* Pied de page de la plateforme, présent sur toutes les pages. */
#page-container .pf-pied-site { background: #040811; border-top: 1px solid #1f2c42; padding: 40px clamp(16px, 4vw, 48px) 20px; font-family: "Source Sans 3", system-ui, sans-serif; color: #a8b5c7; font-size: 0.93rem; }
#page-container .pf-pied-grille { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 24px; }
#page-container .pf-pied-grille h4 { color: #f8fafc; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 10px; padding: 0; }
#page-container .pf-pied-grille a { display: block; color: #a8b5c7; padding: 3px 0; text-decoration: none; }
#page-container .pf-pied-grille a:hover { color: #fbbf24; }
#page-container .pf-marque { font: 800 1.7rem "Big Shoulders Display", sans-serif; color: #f8fafc; letter-spacing: 0.06em; }
#page-container .pf-marque i { font-style: normal; color: #f59e0b; }
#page-container .pf-pied-bas { max-width: 1240px; margin: 24px auto 0; padding-top: 14px; border-top: 1px solid #1f2c42; display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; font-size: 0.82rem; }
#footer-widgets, #footer-bottom { display: none; }
#main-footer { background: transparent !important; }
#page-container .pf-pied-grille h4 { color: #f8fafc; }
#page-container .pf-pied-site p { color: #a8b5c7 !important; font-size: 0.93rem; }
#page-container .pf-pied-grille a { color: #a8b5c7; }
#page-container .pf-pied-grille a:hover { color: #fbbf24; }
@media (max-width: 900px) { #page-container .pf-pied-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { #page-container .pf-pied-grille { grid-template-columns: minmax(0, 1fr); } }

/* Retouches du style sombre : filets des tableaux, barres de défilement, espace avant le pied de page. */
:root { color-scheme: dark; }
#page-container table, #page-container th, #page-container td { border-color: var(--psm-line) !important; }
#page-container .pf-pied-site { margin-top: 48px; }