/* ==========================================================================
   Concepteur MSP : écran d'accueil et rendu selon le mode
   Dépend de concepteur.css (variables, .btn). Mode porté par .app[data-mode] : accueil, evaluation, conception (app.js).
   Aplats de couleur, sans liseré.
   ========================================================================== */

/* ---------- Affichage selon le mode ---------- */
.app[data-mode="accueil"] .sheet-sizer { display: none; }
/* Conception : seule la barre d'outils de mise en forme reste dans le header (boutons d'action .tb-act masqués) */
.app[data-mode="conception"] .tb-act { display: none; }
.app:not([data-mode="accueil"]) .accueil { display: none; }
/* Évaluation : liste des MSP figée (ajout et suppression retirés ; verrouillés aussi dans app.js) */
.app[data-mode="evaluation"] .sb-add,
.app[data-mode="evaluation"] .thumb-tools { display: none; }

/* Vignettes : seul le bouton de suppression subsiste (réordonnancement retiré), aligné à droite ;
   conception : masqué sur les fiches du modèle et la fiche vierge, qui ne se suppriment pas */
.thumb-tools { justify-content: flex-end; }
.app[data-mode="conception"] .thumb .ico:disabled { display: none; }

/* ---------- Écriture des fiches dans le dossier de l'application (colonne MSP, conception uniquement) ---------- */
.app:not([data-mode="conception"]) .sb-sync { display: none; }
.sb-sync {
  flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
  padding: 8px 16px; background: var(--panel-2); font-size: 0.72rem; line-height: 1.35; color: var(--muted);
}
.sb-sync-pt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #98a2b3; }
.sb-sync[data-etat="synchro"] .sb-sync-pt { background: #2e7d32; }
.sb-sync[data-etat="autorisation"] .sb-sync-pt,
.sb-sync[data-etat="erreur"] .sb-sync-pt { background: #c0141f; }
.sb-sync[data-etat="non-lie"] .sb-sync-pt,
.sb-sync[data-etat="telechargement"] .sb-sync-pt { background: var(--yellow); }
.sb-sync-txt { flex: 1 1 140px; min-width: 0; }
.sb-sync-btn { flex: none; height: 28px; padding: 0 10px; font-size: 0.72rem; }
.sb-sync-btn[hidden] { display: none; }

/* ---------- Fiche du modèle ouverte en conception : lecture seule (affichage écran, hors PDF et impression) ---------- */
.msp-page.lecture-seule::after {
  content: "Modèle en lecture seule";
  position: absolute; top: 0.7mm; left: 50%; transform: translateX(-50%); z-index: 5;
  padding: 0 3mm; border-radius: 1.5mm;
  background: var(--yellow); color: var(--ink);
  font: 700 6.5pt/3mm Arial, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; pointer-events: none;
}

/* ---------- Fond de l'accueil : logotype à 15 % d'opacité (calque sous l'espace de défilement, sans effet sur le contenu) ---------- */
.app[data-mode="accueil"] .stage-wrap { background: var(--bg); }
.app[data-mode="accueil"] .stage-wrap::before {
  content: ""; position: absolute; inset: 16px; pointer-events: none;
  background: url("../images/logotype.png") center / contain no-repeat;
  opacity: 0.15;
  transform: scale(0.65);   /* logotype réduit de 35 %, centré */
}
.app[data-mode="accueil"] .stage { position: relative; background: transparent; }

/* ---------- Carte d'accueil : « Évaluer un officier » (largeur doublée, verre dépoli glossy et translucide) ---------- */
.accueil {
  flex: 1 1 auto; min-width: 0; margin: auto 0;
  display: flex; align-items: stretch; justify-content: center;
}
.ac-carte {
  position: relative; overflow: hidden; isolation: isolate;
  flex: 0 1 768px; min-width: 0; display: flex; flex-direction: column;
  padding: 28px 24px 22px; border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.28) 55%, rgba(255, 255, 255, 0.4) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 12px 36px rgba(15, 36, 53, 0.18);
}
/* Reflet glossy : voile lumineux en biais sur la moitié haute de la carte */
.ac-carte::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 42%, rgba(255, 255, 255, 0) 43%);
}
.ac-carte[hidden] { display: none; }
/* Bouton fermer : croix en haut à droite de la carte */
.ac-fermer { position: absolute; top: 12px; right: 12px; color: var(--muted); }
.ac-titre { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 700 1.2rem/1.3 var(--font-ui); color: var(--ink); }
/* Carte « Évaluer un officier » : espaces entre le titre, les blocs de champ et la note (la fenêtre « +/- Liste stagiaires » garde ses espacements) */
.ac-carte .ac-titre { margin-bottom: 26px; }
.ac-carte .ac-champ { margin-bottom: 28px; }
.ac-carte .ac-aide { margin-top: 0; }
.ac-ico { flex: none; display: block; color: var(--navy); }
.ac-intro { margin: 0 0 22px; font-size: 0.82rem; line-height: 1.55; color: var(--muted); }

.ac-champ { margin: 0 0 16px; }
.ac-lbl { display: block; margin: 0 0 6px; font: 600 0.7rem var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); }
.ac-sel {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 42px; padding: 0 40px 0 14px;
  border: 0; border-radius: var(--r);
  background: var(--panel-2) url("../images/chevron-bas.svg") no-repeat right 14px center / 16px 16px;
  color: var(--text); font: 500 0.88rem var(--font-ui);
  text-overflow: ellipsis; cursor: pointer;
  transition: background-color 0.15s ease;
}
.ac-sel:hover:not(:disabled) { background-color: #e6eaf2; }
/* Menus translucides sur la carte glossy (le chevron de fond est conservé) */
.ac-carte .ac-sel { background-color: rgba(255, 255, 255, 0.6); }
.ac-carte .ac-sel:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.85); }
.ac-sel:disabled { opacity: 0.45; cursor: default; }
.ac-sel option:disabled { color: #98a2b3; }
.ac-sel:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; box-shadow: 0 0 0 5px var(--navy); }
.ac-aide { margin: 4px 0 0; font-size: 0.74rem; line-height: 1.5; color: var(--muted); }

/* ---------- Fenêtre « +/- Liste stagiaires » : même largeur (768 px) que la carte « Évaluer un officier », fond blanc transparent à 50 %, flou faible, sans reflet glossy ---------- */
.dlg-listes {
  overflow: auto; isolation: isolate;
  width: min(768px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  padding: 28px 24px 22px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(4px) brightness(1.05); backdrop-filter: blur(4px) brightness(1.05);
  box-shadow: 0 12px 36px rgba(15, 36, 53, 0.14);
}
/* Voile derrière la fenêtre : plus léger que celui des autres fenêtres (.app-dlg::backdrop) pour un rendu lumineux */
.dlg-listes::backdrop { background: rgba(15, 36, 53, 0.32); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.dlg-listes .dlg-titre { font: 700 1.2rem/1.3 var(--font-ui); }
.dlg-listes .dlg-ico { filter: brightness(0) saturate(100%) invert(9%) sepia(60%) saturate(4300%) hue-rotate(236deg) brightness(.82); }
/* Aide de la fenêtre : texte explicatif (petit, italique) à gauche, exemple de fichier présenté comme dans Excel à droite.
   Le quadrillage est obtenu par l'écart entre les cellules (fond de tableau visible), sans liseré. */
.dl-aide { display: flex; align-items: flex-start; gap: 18px; margin: 0 0 14px; }
.dl-aide .ac-intro { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 0.74rem; font-style: italic; line-height: 1.5; }
.dl-xl-fig { flex: none; margin: 0; }
.dl-xl { border-collapse: separate; border-spacing: 1px; background: #cdd2da; font: 400 0.72rem/1.2 Calibri, "Segoe UI", Arial, sans-serif; color: #1b2433; }
.dl-xl th { padding: 3px 8px; background: #e9ecf1; color: #5b6472; font-weight: 500; text-align: center; }
.dl-xl tbody th { min-width: 22px; padding: 3px 6px; }
.dl-xl td { padding: 3px 10px; background: #fff; text-align: left; white-space: nowrap; }
.dl-xl-fig figcaption { margin: 6px 0 0; max-width: 250px; font-size: 0.68rem; font-style: italic; line-height: 1.4; color: var(--muted); }
.dl-sec { margin: 0 0 22px; }
.dl-st { margin: 0 0 6px; font: 700 0.95rem/1.3 var(--font-ui); color: var(--ink); }
.dl-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1.3fr); gap: 0 12px; }
/* Bouton d'action et message d'état à sa droite (sous le bouton quand la largeur manque) */
.dl-action { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 4px; }
.dl-btn { flex: none; }
/* Champs de saisie : même gabarit que les menus .ac-sel, sans chevron */
.ac-in {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 42px; padding: 0 14px;
  border: 0; border-radius: var(--r);
  background: rgba(255, 255, 255, 0.6);
  color: var(--text); font: 500 0.88rem var(--font-ui);
  transition: background-color 0.15s ease;
}
.ac-in:hover:not(:read-only) { background-color: rgba(255, 255, 255, 0.85); }
.ac-in:read-only { opacity: 0.6; }
.ac-in::placeholder { color: #98a2b3; }
.ac-in:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; box-shadow: 0 0 0 5px var(--navy); }
.dl-maj { text-transform: uppercase; }
.dl-maj::placeholder { text-transform: none; }
.dlg-listes .ac-sel, .dlg-listes .ac-in { background-color: rgba(255, 255, 255, 0.88); border: 1px solid #b4bcc9; }
.dlg-listes .ac-sel:hover:not(:disabled), .dlg-listes .ac-in:hover:not(:read-only) { background-color: #fff; }
/* Message d'état (import, suppression) : lu par les lecteurs d'écran (role="status") */
.dl-statut { flex: 1 1 260px; min-width: 0; margin: 0; padding: 6px 10px; border-radius: var(--r); font-size: 0.82rem; line-height: 1.5; font-weight: 500; color: var(--navy); }
.dl-statut:empty { display: none; }
/* Surlignage jaune bref à l'apparition du message (rouvert à chaque nouveau message par modale-listes.js) */
.dl-flash { animation: dl-flash 1.6s ease-out; }
@keyframes dl-flash { from { background: rgba(251, 214, 0, 0.6); } to { background: rgba(251, 214, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .dl-flash { animation: none; } }
@media (max-width: 768px) {
  .dl-grille { grid-template-columns: minmax(0, 1fr); }
  .dl-aide { flex-direction: column; gap: 10px; }
  .dlg-listes { padding: 22px 16px 18px; }
}

@media (max-width: 768px) {
  /* colonne : justify-content au début (centré, le haut de la première carte serait coupé quand le contenu dépasse) */
  .accueil { flex-direction: column; align-items: stretch; justify-content: flex-start; width: 100%; max-width: 520px; margin: 0 auto; gap: 16px; }
  .ac-carte { flex: none; padding: 22px 16px 18px; }
}

/* ---------- Menu « Stagiaire à évaluer » : tableau déroulant depuis le champ (js/combo-stagiaire.js, le select #acStagiaire reste la source masquée) ---------- */
.cs-champ { position: relative; }
.cs-in {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 42px; padding: 0 44px 0 14px; border: 0; border-radius: var(--r);
  background: rgba(255, 255, 255, 0.6); color: var(--text); font: 500 0.88rem var(--font-ui); text-overflow: ellipsis;
  transition: background-color 0.15s ease;
}
.cs-in::placeholder { color: var(--text); opacity: 1; }   /* même aspect que les menus voisins */
.cs-in:hover:not(:disabled) { background: rgba(255, 255, 255, 0.85); }
.cs-in:disabled { opacity: 0.45; cursor: default; }
.cs-in:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; box-shadow: 0 0 0 5px var(--navy); }
.cs-tg { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 44px; height: 42px; border-radius: 0 var(--r) var(--r) 0; }
.cs-tg:disabled { opacity: 0.45; }
.cs-chev { width: 16px; height: 16px; fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s ease; }
/* Ouvert : champ blanc, coins du côté du panneau carrés, contour unique autour du champ et du panneau */
.cs-champ[data-ouvert] .cs-in, .cs-champ[data-ouvert] .cs-in:hover, .cs-champ[data-ouvert] .cs-in:focus-visible { background: #fff; outline: none; box-shadow: 0 0 0 2px var(--navy); }
.cs-champ[data-ouvert="bas"] .cs-in { border-radius: var(--r) var(--r) 0 0; }
.cs-champ[data-ouvert="haut"] .cs-in { border-radius: 0 0 var(--r) var(--r); }
.cs-champ[data-ouvert] .cs-chev { transform: rotate(180deg); }

/* Panneau (ajouté à body, position fixe placée par le script) : le contour et l'ombre sont rognés côté champ, aucune ligne à la jonction */
.cs-panel { position: fixed; z-index: 100; display: flex; flex-direction: column; background: #fff; color: var(--text); font-family: var(--font-ui); overflow: hidden; }
.cs-panel[data-sens="bas"] { border-radius: 0 0 12px 12px; box-shadow: 0 0 0 2px var(--navy), 0 18px 36px rgba(15, 36, 53, 0.3); clip-path: inset(0 -60px -80px -60px); }
.cs-panel[data-sens="haut"] { border-radius: 12px 12px 0 0; box-shadow: 0 0 0 2px var(--navy), 0 -18px 36px rgba(15, 36, 53, 0.3); clip-path: inset(-80px -60px 0 -60px); }
.cs-defil { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-padding-top: 40px; padding: 0 6px; }
.cs-tb { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.86rem; }
.cs-tb thead th { position: sticky; top: 0; z-index: 1; width: 50%; height: 38px; padding: 0 12px; background: #fff; text-align: left; font: 600 0.68rem var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); }
.cs-tri { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; margin: 0 -8px; border-radius: 6px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.cs-tri:hover { background: #eef1f7; }
.cs-fl { width: 8px; height: 8px; opacity: 0; border: solid var(--navy); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.cs-tb th[aria-sort="ascending"] .cs-fl { opacity: 1; }
.cs-tb th[aria-sort="descending"] .cs-fl { opacity: 1; transform: translateY(2px) rotate(-135deg); }
.cs-tb td { height: 38px; padding: 0 12px; }
.cs-tb tbody tr { cursor: pointer; }
.cs-tb tbody tr td:first-child { border-radius: var(--r) 0 0 var(--r); }
.cs-tb tbody tr td:last-child { border-radius: 0 var(--r) var(--r) 0; }
.cs-tb tbody tr:hover:not(.off):not(.sel) td { background: #eef1f7; }
.cs-tb tbody tr.is-actif:not(.off):not(.sel) td { background: #e2e7f1; }
.cs-nom { font-weight: 600; }
.cs-tb tr.off { color: #98a2b3; cursor: not-allowed; }
.cs-tb tr.sel td { background: var(--navy); color: #fff; }
.cs-panel mark { padding: 0; border-radius: 2px; background: rgba(251, 214, 0, 0.55); color: inherit; }
.cs-tb tr.sel mark { color: var(--ink); }
.cs-vide { padding: 22px 12px; text-align: center; color: var(--muted); cursor: default; }
.cs-pied { flex: none; margin: 0; padding: 8px 18px 10px; font-size: 0.72rem; line-height: 1.5; color: var(--muted); }