/*
  Ajustements demandés par Sérilo le 19/09/2026.
  Fichier À NOUS, chargé après les feuilles livrées : aucune d'elles n'est modifiée.

  1. le logo officiel de la Fédération remplace le monogramme, en haut à gauche ;
  2. la ligne « FÉDÉRATION FRANÇAISE DE GOSPEL » disparaît de la barre du haut
     (le logo la porte déjà) ;
  3. le titre de scène tient sur deux lignes ;
  4. l'indicateur de préparation et l'encadré CAP 2035 sont réduits : ils se
     chevauchaient sur la lettre « C » ;
  5. les cartes « Décisions prioritaires » sont resserrées ;
  6. plus aucun débordement en largeur sur téléphone.
*/

/* 1 — logo officiel, posé sur une tuile claire : son bleu marine disparaîtrait sur le fond nuit. */
.sidebar .brand { display: block; }
.sidebar .brandmark {
  width: 100%; height: 66px; font-size: 0; border-radius: 12px; padding: 8px 10px;
  background: #fff url('images/logo-ffg.png') center / contain no-repeat;
  border: 1px solid rgba(214, 174, 87, .55); box-shadow: 0 0 26px rgba(32, 121, 237, .14);
}
.sidebar .brand > div { margin-top: 10px; }
.sidebar .brand strong { display: none; }
.sidebar .brand span { display: block; font: 700 10px/1.3 Manrope, sans-serif; letter-spacing: .16em; text-transform: uppercase; }

/* 2 — la barre du haut ne répète plus le nom de la fédération. */
.topbar .top-left .eyebrow { display: none; }

/* 3 — deux lignes, pas quatre. */
.stage-copy h2 { font-size: clamp(24px, 2.1vw, 34px); line-height: 1.08; max-width: 24ch; }
.stage-copy p { max-width: 46ch; }

/* 4 — l'indicateur et l'encadré CAP 2035 ne se chevauchent plus. */
.readiness-orbit { width: 150px; height: 150px; padding: 12px; top: 430px; }
.readiness-orbit > div strong { font-size: 30px; }
.readiness-orbit > div small, .readiness-orbit > div em { font-size: 9px; }
.cap-card { left: 224px; top: 444px; width: 232px; padding-left: 20px; }
.cap-card p { font-size: 13px; }
.cap-card ul { font-size: 12px; }

/* 5 — décisions prioritaires resserrées : même contenu, moins de hauteur. */
.decision-deck { padding: 20px 16px; }
.decision { min-height: 0; margin-bottom: 9px; padding: 11px 12px; }
.decision b, .decision strong { font-size: 13px; line-height: 1.25; }
.decision small, .decision span { font-size: 11px; }
.decision > i { width: 26px; height: 26px; flex: none; }

/* 7 — le titre de la barre tient sur deux lignes. */
.topbar .top-left h1 { white-space: normal; max-width: 17ch; line-height: 1.04; font-size: clamp(20px, 1.7vw, 28px); }

/* 8 — le bandeau « base connectée » ne s'affiche plus (demande du 20/09). */
.topbar .mode-badge { display: none !important; }

/* 9 — la personne connectée dans un encadré, avec son menu à deux entrées. */
.topbar .profile { border: 1px solid rgba(116, 164, 224, .34); border-radius: 12px; padding: 7px 12px; background: rgba(12, 32, 58, .55); }
.topbar .profile:hover { border-color: rgba(214, 174, 87, .6); }
.profile-popover { min-width: 210px; }
.profile-popover [data-ffg-cache] { display: none; }

/* 10 — colonne de droite réduite de moitié : la carte de France se voit en entier. */
.command-grid { grid-template-columns: minmax(0, 1fr) 176px; }
.decision-deck { padding: 14px 10px; }
.decision-deck .section-kicker, .decision-deck .kicker { font-size: 9px; letter-spacing: .12em; }
.decision-deck h2 { font-size: 15px; line-height: 1.15; }
.decision { padding: 9px 9px; border-left-width: 3px; }
.decision b, .decision strong { font-size: 11.5px; line-height: 1.2; }
.decision small, .decision span, .decision em { font-size: 9.5px; }
.decision > i { width: 20px; height: 20px; font-size: 11px; }
.decision-deck .badge, .decision-deck .status { font-size: 9px; padding: 2px 6px; }
.decision-deck time, .decision-deck p, .decision-deck li { font-size: 11px; }
.decision-deck .btn, .decision-deck button.cta, .decision-deck .stage-cta { font-size: 11.5px; padding: 8px 10px; }

/* 11 — la carte de scène perd 20 % : elle tient dans la hauteur, sans rognage. */
.command-stage { background-size: 80% auto; background-position: 78% 56px; }

/* 6 — téléphone : rien ne dépasse de l'écran. */
@media (max-width: 1180px) { .command-grid { grid-template-columns: 1fr; } .command-stage { background-size: cover; background-position: center top; } }

@media (max-width: 760px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .app, .main, .command-home, .command-grid, .command-stage, .workspace { max-width: 100%; min-width: 0; }
  .stage-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stage-metrics > * { min-width: 0; }
  .cap-card { left: 16px; right: 16px; width: auto; }
  .topbar .search { min-width: 0; }
  table { display: block; overflow-x: auto; }
}


/* ------------------------------------------------------------------ 12 — thème clair
   Demande du 20/09 : un fond blanc nacré à la place du bleu nuit, réglable par
   chacun dans Paramètres. Les teintes reprennent la palette livrée (pearl-50
   #F6F8FA, navy-900 #062A4D, or #D9B257) : aucune couleur nouvelle.
   La scène d'accueil garde sa photographie dans les deux thèmes. */
html[data-theme="clair"] body,
html[data-theme="clair"] .app,
html[data-theme="clair"] .workspace,
html[data-theme="clair"] .main { background: #F6F8FA; color: #16233a; }
html[data-theme="clair"] .sidebar { background: #fff; border-right: 1px solid #dbe4ee; }
html[data-theme="clair"] .sidebar .nav-item,
html[data-theme="clair"] .sidebar .nav-section,
html[data-theme="clair"] .sidebar small,
html[data-theme="clair"] .sidebar .brand span { color: #16233a; }
html[data-theme="clair"] .sidebar .nav-item.active { background: #eaf0f7; color: #062A4D; }
html[data-theme="clair"] .topbar { background: rgba(255,255,255,.96); border-bottom: 1px solid #dbe4ee; }
html[data-theme="clair"] .topbar h1,
html[data-theme="clair"] .topbar .profile b,
html[data-theme="clair"] .topbar .profile span { color: #0A1C34; }
html[data-theme="clair"] .topbar .profile { background: #fff; border-color: #d5dfea; }
html[data-theme="clair"] .topbar .search,
html[data-theme="clair"] .topbar input { background: #eef2f7; color: #16233a; }
html[data-theme="clair"] .card,
html[data-theme="clair"] .panel,
html[data-theme="clair"] .kpi,
html[data-theme="clair"] .data-panel,
html[data-theme="clair"] .top-popover { background: #fff; border-color: #dbe4ee; color: #16233a; box-shadow: 0 10px 26px rgba(10,28,52,.08); }
html[data-theme="clair"] .card h2,
html[data-theme="clair"] .card h3,
html[data-theme="clair"] .card p,
html[data-theme="clair"] .card td,
html[data-theme="clair"] .card th,
html[data-theme="clair"] .top-popover button,
html[data-theme="clair"] .top-popover a { color: #16233a; }
html[data-theme="clair"] .decision-deck { background: #eef2f7; border-left-color: #dbe4ee; }
html[data-theme="clair"] .decision { background: #fff; color: #16233a; border-color: #dbe4ee; }
html[data-theme="clair"] .decision b,
html[data-theme="clair"] .decision strong,
html[data-theme="clair"] .decision small,
html[data-theme="clair"] .decision span { color: #16233a; }
html[data-theme="clair"] .decision > i { color: #0A1C34; border-color: #cfdcea; }
html[data-theme="clair"] table th { background: #eaf0f7; color: #0A1C34; }
html[data-theme="clair"] .data-table td,
html[data-theme="clair"] .data-table th { border-color: #e3e9f1; }

/* 13 — animations réduites, au choix, sans toucher au réglage du système. */
html[data-animations="reduites"] *, html[data-animations="reduites"] *::before, html[data-animations="reduites"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}

/* 12b — mode clair : la colonne de droite et les panneaux héritent de l'encre,
   sinon leur texte reste blanc sur blanc. */
html[data-theme="clair"] .decision-deck,
html[data-theme="clair"] .decision-deck * { color: #16233a; }
html[data-theme="clair"] .decision-deck .kicker,
html[data-theme="clair"] .decision-deck .section-kicker,
html[data-theme="clair"] .sidebar .nav-group > .nav-section { color: #5b6b85; }
html[data-theme="clair"] .decision-deck .btn,
html[data-theme="clair"] .decision-deck button.gold,
html[data-theme="clair"] .btn.gold { color: #0A1C34; }
html[data-theme="clair"] .decision-deck [class*="date"],
html[data-theme="clair"] .decision-deck b { color: #0A1C34; }
html[data-theme="clair"] .toast { background: #0A1C34; color: #fff; }

/* 14 — les champs de saisie de nos panneaux restent lisibles dans les deux thèmes. */
.workspace input[type="password"], .workspace input[type="text"], .workspace input[type="number"] {
  padding: 11px 12px; border-radius: 9px; border: 1px solid rgba(116,164,224,.34);
  background: rgba(7,22,43,.6); color: #eaf2ff;
}
html[data-theme="clair"] .workspace input[type="password"],
html[data-theme="clair"] .workspace input[type="text"],
html[data-theme="clair"] .workspace input[type="number"] { background: #fff; color: #16233a; border-color: #cfdcea; }
.workspace .btn, .workspace button.btn { border-radius: 9px; }

/* 12c — mode clair : la pastille de date reste un bloc foncé, son texte reste blanc. */
html[data-theme="clair"] .decision-deck time,
html[data-theme="clair"] .decision-deck time * { color: #fff; }
/* Le bouton de la colonne reste foncé : son texte reste blanc. */
html[data-theme="clair"] .decision-deck .stage-cta,
html[data-theme="clair"] .decision-deck .stage-cta * { color: #fff; }

/* 8 — accueil sans ascenseur sur écran d'ordinateur (20/09/2026).
   Les blocs de l'entête étaient posés en absolu à 430, 444, 650 et 825 px du
   haut, dans une scène de 900 px : sur un portable de 900 px de haut, la moitié
   tombait sous la ligne de flottaison et l'image portait deux bandes vides.
   Ils remontent au niveau de ces bandes, et la scène perd 200 px.
   Cadré aux écrans larges : en dessous de 1181 px, les règles précédentes
   reprennent la main et empilent — c'est le bon comportement, on n'y touche pas. */
@media (min-width: 1181px) {
  .command-stage { min-height: 730px; padding-top: 44px; padding-bottom: 16px; }
  .stage-copy h2 { font-size: clamp(30px, 3vw, 46px); }
  .stage-copy p { margin: 12px 0 14px; font-size: 14px; }
  /* L'orbite commence SOUS le bouton « Ouvrir le plan national » : au-dessus,
     elle passait par-dessus et le rendait illisible. */
  .readiness-orbit { top: 290px; }
  .cap-card { top: 300px; }
  .cap-card p { margin: 9px 0; }
  .cap-card li { margin: 6px 0; }
  .stage-metrics { top: 486px; height: 120px; }
  .stage-metrics strong { font: 700 30px Manrope; }
  .national-timeline { top: 638px; }
  .timeline-status { top: 698px; }
  .decision-deck { padding-top: 18px; }
}

/* 16/10/2026 — « Se déconnecter » sous le nom du profil : reel.js masque les entrées
   livrées au-delà de la deuxième (data-ffg-cache) ; la déconnexion, elle, reste visible. */
.profile-popover .ffg-deconnexion { margin: 0; }
.profile-popover .ffg-deconnexion button[data-ffg-cache] { display: flex; }
.profile-popover .ffg-deconnexion button > i { color: var(--ffg-gold-300, #f0cd78); }

/* 16/10/2026 — Anneau de l indice et encadré « CAP 2035 » se recouvraient sous 820 px :
   les positions globales posées plus haut (anneau 430 px, encadré 444 px à gauche) écrasaient
   celles de l écran livré. Tablette : on rend les positions livrées (encadré à droite de
   l anneau). Téléphone : l anneau passe à droite, l encadré lui laisse la place. */
@media (max-width: 820px) {
  .readiness-orbit { left: 20px; top: 355px; width: 160px; height: 160px; padding: 12px; transform: none; }
  .cap-card { left: 205px; right: 18px; top: 376px; width: auto; }
}
@media (max-width: 540px) {
  .readiness-orbit { left: auto; right: 14px; top: 430px; width: 124px; height: 124px; padding: 10px; }
  .readiness-orbit > div strong { font-size: 24px; }
  .readiness-orbit > div small, .readiness-orbit > div em { font-size: 7.5px; letter-spacing: .04em; }
  .cap-card { left: 16px; right: 150px; top: 444px; }
  /* 481-540 px : les blocs du dessous suivent la hauteur prévue par l écran livré pour le téléphone. */
  .command-stage { min-height: 1040px; }
  .stage-metrics { top: 730px; }
  .national-timeline { top: 975px; }
}