/**
* CBR Planning — feuille de styles complète (Livrables 3 + 4)
* Mode sombre : classe .cbr-dark sur .cbr-app (ou .cbr-modal-root)
*/
/* ============================================================================
* Propagation de la couleur de fond aux conteneurs WP / Divi
* ----------------------------------------------------------------------------
* Quand le JS détecte une page CBR, il ajoute :
* - .cbr-planning-page sur (toujours, indépendamment du mode sombre)
* - .cbr-dark-page sur (uniquement en mode sombre)
* - .cbr-planning-ancestor sur tous les ancêtres du .cbr-app
* Ces règles colorent alors la surface autour du planning (body, page Divi,
* sections, lignes, colonnes…) pour éviter le « blanc résiduel » du thème.
*
* Mode CLAIR : fond papier #EFEDE5 (palette design 2026-05-24).
* Mode SOMBRE : fond encre #14130F.
* ============================================================================ */
html.cbr-planning-page,
html.cbr-planning-page body {
background-color: #EFEDE5 !important;
font-family: "Geist", system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
letter-spacing: -0.005em;
}
html.cbr-planning-page .cbr-planning-ancestor {
background-color: #EFEDE5 !important;
}
/* Les conteneurs Divi connus : on neutralise leur background-image éventuel
(gradients, images de fond) qui resterait visible par-dessus la couleur. */
html.cbr-planning-page .cbr-planning-ancestor.et_pb_section,
html.cbr-planning-page .cbr-planning-ancestor.et_pb_row,
html.cbr-planning-page .cbr-planning-ancestor.et_pb_column,
html.cbr-planning-page .cbr-planning-ancestor.et_pb_module {
background-image: none !important;
}
/* Mode sombre : reprend le dessus sur le fond clair grâce à la spécificité
de la double classe sur . */
html.cbr-dark-page.cbr-planning-page,
html.cbr-dark-page.cbr-planning-page body,
html.cbr-dark-page .cbr-planning-ancestor {
background-color: #14130F !important;
color: #F2F0E6;
}
/* ============================================================================
* Variables et reset
* ============================================================================ */
.cbr-app, .cbr-modal-root {
/* Palette papier (design 2026-05-24) */
--cbr-bg: #FBFAF6; /* surface */
--cbr-bg-soft: #F4F2EA; /* surface-2 */
--cbr-bg-hover: rgba(20, 19, 14, 0.04);
--cbr-border: #DED9C9;
--cbr-border-soft: #E8E4D6;
--cbr-border-strong: #C9C3B0;
--cbr-text: #15140F; /* ink */
--cbr-text-soft: #5C5A52; /* ink-2 */
--cbr-text-muted: #8E8C82; /* ink-3 */
--cbr-text-faint: #B7B4A8; /* ink-4 */
--cbr-accent: #1F4D3F; /* deep forest */
--cbr-accent-soft: #DCE6E0;
--cbr-accent-fg: #FBFAF6;
--cbr-success: #1d7a32;
--cbr-warn: #b88300;
--cbr-error: #b3261e;
--cbr-radius: 8px;
--cbr-radius-sm: 6px;
--cbr-shadow: 0 1px 0 rgba(20,19,14,0.04);
--cbr-shadow-md: 0 1px 2px rgba(20,19,14,0.04), 0 6px 24px -8px rgba(20,19,14,0.08);
--cbr-shadow-lg: 0 4px 12px rgba(20,19,14,0.10), 0 16px 32px rgba(20,19,14,0.10);
--cbr-transition: 120ms ease;
font-family: "Geist", system-ui, -apple-system, sans-serif;
font-size: 13.5px;
line-height: 1.45;
letter-spacing: -0.005em;
-webkit-font-smoothing: antialiased;
color: var(--cbr-text);
}
.cbr-app.cbr-dark, .cbr-modal-root.cbr-dark {
--cbr-bg: #1F1E18;
--cbr-bg-soft: #26241E;
--cbr-bg-hover: rgba(255,255,255,0.04);
--cbr-border: #2E2C25;
--cbr-border-soft: #28261F;
--cbr-border-strong: #3A382F;
--cbr-text: #F2F0E6;
--cbr-text-soft: #B9B6A9;
--cbr-text-muted: #807E72;
--cbr-text-faint: #4E4C44;
--cbr-accent: #8FC4A8;
--cbr-accent-soft: #1F352B;
--cbr-accent-fg: #14130F;
--cbr-shadow: 0 1px 0 rgba(0,0,0,0.3);
--cbr-shadow-md: 0 1px 2px rgba(0,0,0,0.4), 0 6px 24px -8px rgba(0,0,0,0.5);
--cbr-shadow-lg: 0 4px 12px rgba(0,0,0,.7), 0 16px 32px rgba(0,0,0,.6);
}
.cbr-app {
width: 100%;
max-width: 100%;
box-sizing: border-box;
background: var(--cbr-bg);
border-radius: var(--cbr-radius);
padding: 16px;
position: relative;
}
/* Planning : padding réduit — le JS unlockFullWidth() gère l'élargissement.
* Fond transparent : le cadre du planning laisse voir le fond de la fenêtre
* (#EFEDE5 en clair, #14130F en sombre) injecté sur / via la
* classe .cbr-planning-page. */
.cbr-app.cbr-app-planning {
padding: 5px;
background: transparent;
}
.cbr-app.is-loading::after {
content: '';
position: absolute; left: 0; right: 0; top: 0; height: 3px;
background: linear-gradient(90deg, transparent, var(--cbr-accent), transparent);
animation: cbr-loading 1.2s linear infinite;
}
@keyframes cbr-loading {
0% { transform: translateX(-30%); }
100% { transform: translateX(130%); }
}
/* ============================================================================
* Toolbar
* ============================================================================ */
.cbr-toolbar {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
padding: 10px 4px 12px;
border-bottom: 1px solid var(--cbr-border);
}
.cbr-toolbar-left, .cbr-toolbar-center, .cbr-toolbar-right {
display: flex;
align-items: center;
gap: 6px;
}
.cbr-toolbar-center { flex: 1; justify-content: center; flex-wrap: wrap; }
.cbr-toolbar-right { justify-content: flex-end; }
.cbr-period {
margin: 0 4px 0 8px;
font-family: "Instrument Serif", "Georgia", serif;
font-weight: 400;
font-size: 26px;
line-height: 1;
letter-spacing: -0.01em;
color: var(--cbr-text);
text-transform: capitalize;
}
/* ---- Boutons ---- */
.cbr-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--cbr-bg);
color: var(--cbr-text);
border: 1px solid var(--cbr-border);
border-radius: var(--cbr-radius);
height: 34px;
padding: 0 14px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background var(--cbr-transition), border-color var(--cbr-transition);
text-decoration: none;
font-family: inherit;
letter-spacing: -0.005em;
white-space: nowrap;
}
.cbr-btn:hover { background: var(--cbr-bg-soft); border-color: var(--cbr-border-strong); }
.cbr-btn:active { transform: translateY(1px); }
.cbr-btn-primary { background: var(--cbr-text); color: var(--cbr-bg); border-color: var(--cbr-text); }
.cbr-btn-primary:hover { background: #000; border-color: #000; }
.cbr-app.cbr-dark .cbr-btn-primary { background: var(--cbr-text); color: var(--cbr-bg); }
.cbr-app.cbr-dark .cbr-btn-primary:hover { background: #fff; color: #000; border-color: #fff; }
.cbr-btn-ghost { background: transparent; border-color: transparent; }
.cbr-btn-ghost:hover { background: var(--cbr-bg-hover); border-color: transparent; }
.cbr-btn-danger { background: var(--cbr-bg); color: var(--cbr-error); border-color: var(--cbr-error); }
.cbr-btn-danger:hover { background: #fde6e3; }
.cbr-app.cbr-dark .cbr-btn-danger:hover { background: #3a2222; }
.cbr-btn:disabled { opacity: .45; cursor: not-allowed; }
/* Bouton icône (sans texte) : carré compact */
.cbr-btn.cbr-btn-icon {
padding: 0;
width: 34px;
min-width: 34px;
justify-content: center;
}
/* Filtre Épinglés actif : fond accent pour signaler l'état « pressé ». */
.cbr-pin-toggle[aria-pressed="true"],
.cbr-pin-toggle.is-active {
background: var(--cbr-accent) !important;
color: var(--cbr-accent-fg);
border-color: var(--cbr-accent);
}
/* ---- Sélecteur de vue Jour/Semaine/Mois/Liste (group buttons) ---- */
.cbr-view-toggle {
display: inline-flex;
background: var(--cbr-bg);
border: 1px solid var(--cbr-border);
border-radius: var(--cbr-radius);
padding: 3px;
gap: 2px;
}
.cbr-view-toggle-btn {
appearance: none;
border: none;
background: transparent;
color: var(--cbr-text-soft);
font: inherit;
font-size: 12.5px;
font-weight: 500;
height: 26px;
padding: 0 12px;
border-radius: 6px;
cursor: pointer;
letter-spacing: -0.005em;
transition: background var(--cbr-transition), color var(--cbr-transition);
white-space: nowrap;
}
.cbr-view-toggle-btn:hover {
background: var(--cbr-bg-hover);
color: var(--cbr-text);
}
.cbr-view-toggle-btn.is-active {
background: var(--cbr-text);
color: var(--cbr-bg);
}
.cbr-app.cbr-dark .cbr-view-toggle-btn.is-active {
background: var(--cbr-text);
color: var(--cbr-bg);
}
.is-pulsing {
animation: cbr-pulse 600ms ease-in-out;
}
@keyframes cbr-pulse {
0%, 100% { transform: scale(1); }
35% { transform: scale(1.06); background-color: var(--cbr-accent); color: var(--cbr-accent-fg); border-color: var(--cbr-accent); }
}
.cbr-search, .cbr-filter {
background: var(--cbr-bg);
border: 1px solid var(--cbr-border);
border-radius: var(--cbr-radius);
height: 34px;
padding: 0 28px 0 12px;
font-size: 13px;
font-weight: 500;
color: var(--cbr-text);
min-width: 160px;
font-family: inherit;
letter-spacing: -0.005em;
/* flèche personnalisée pour les select */
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
}
.cbr-search {
min-width: 260px;
padding: 0 12px 0 34px;
background-image: url("data:image/svg+xml;utf8,");
background-position: left 10px center;
}
.cbr-search:focus, .cbr-filter:focus {
outline: 2px solid var(--cbr-accent);
outline-offset: 1px;
border-color: var(--cbr-border-strong);
background-color: var(--cbr-bg-soft);
}
.cbr-search::placeholder { color: var(--cbr-text-muted); }
/* ============================================================================
* Filtre Catégories — widget multi-select (cases à cocher)
* ----------------------------------------------------------------------------
* Imite l'apparence d'un