/* L'ATELIER DES CODEURS (Lionel, 08/10/2026 -- maquette v2 validée). Même ambiance que le desk : nuit bleue,
   or, verre dépoli. Sa page « Mon atelier » d'abord, les codeurs EN BAS (la barre du desk, .dk-gens).
   Tout est préfixé par #page-codeurs : rien ne déborde sur les autres pages. */

#page-codeurs #postes-codeurs,
#page-codeurs .equipe-bandeau,
#page-codeurs .equipe-panneau { display: none !important; }

#page-codeurs .cd-panneau { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#page-codeurs .cd-panneau[hidden] { display: none; }
#page-codeurs .cd-pad { padding: 0 26px 16px 26px; display: flex; flex-direction: column; gap: 14px; }
#page-codeurs .bureau-carte { height: auto; min-width: 0; }
#page-codeurs .bureau-carte__corps { max-height: none; }

/* la barre du bas : la même que le desk */
#page-codeurs .dk-gens { flex: 0 0 auto; display: flex; gap: 8px; padding: 10px 26px 14px 26px; overflow-x: auto;
  border-top: 1px solid rgba(225, 185, 110, 0.14); background: rgba(3, 10, 28, 0.85); }
#page-codeurs .desk-onglet { cursor: pointer; border-radius: 12px; background: rgba(255, 255, 255, 0.035);
  color: rgba(200, 214, 245, 0.7); border: 1px solid rgba(200, 214, 245, 0.14); transition: all 0.15s; }
#page-codeurs .desk-onglet:hover { color: #dfe8ff; border-color: rgba(225, 185, 110, 0.35); }
#page-codeurs .desk-onglet--actif { background: rgba(225, 185, 110, 0.14); color: #e1b96e; border-color: rgba(225, 185, 110, 0.6); }
#page-codeurs .cd-gen { display: inline-flex; align-items: center; gap: 9px; flex: 1 1 0; min-width: 120px; text-align: left; font: inherit; padding: 8px 12px; }
#page-codeurs .cd-gen i { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
  font-size: 12px; font-weight: 700; background: rgba(225, 185, 110, 0.16); color: #e1b96e; }
#page-codeurs .cd-gen span { display: flex; flex-direction: column; min-width: 0; }
#page-codeurs .cd-gen b { font-size: 13px; color: #dfe8ff; }
#page-codeurs .cd-gen small { font-size: 10.5px; color: rgba(200, 214, 245, 0.5); }

/* l'en-tête d'un codeur */
#page-codeurs .cd-tete { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
#page-codeurs .cd-tete strong { font-family: Georgia, serif; font-style: italic; color: #e1b96e; font-size: 22px; letter-spacing: 1px; }
#page-codeurs .cd-tete span { color: rgba(200, 214, 245, 0.6); font-size: 13px; }

/* la barre qui se charge, étape par étape */
#page-codeurs .cd-chg { border-radius: 14px; border: 1px solid rgba(225, 185, 110, 0.18); background: rgba(8, 12, 26, 0.6); padding: 12px 14px; }
#page-codeurs .cd-chg__tete { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: #dfe8ff; }
#page-codeurs .cd-chg__tete b { color: #f3d79b; }
#page-codeurs .cd-chg__reste { color: rgba(200, 214, 245, 0.6); }
#page-codeurs .cd-chg__pas { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
#page-codeurs .cd-pas { font-size: 11.5px; color: rgba(200, 214, 245, 0.55); min-width: 0; }
#page-codeurs .cd-pas b { display: block; color: #dfe8ff; font-size: 12.5px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-codeurs .cd-pas__barre { height: 8px; border-radius: 5px; background: rgba(160, 170, 220, 0.14); overflow: hidden; }
#page-codeurs .cd-pas__barre i { display: block; height: 100%; background: linear-gradient(90deg, #6fb7ff, #e1b96e); }
#page-codeurs .cd-pas--fait b { color: #4fd08a; }
#page-codeurs .cd-pas--fait .cd-pas__barre i { background: #4fd08a; }
#page-codeurs .cd-pas--en_cours b { color: #f3d79b; }
#page-codeurs .cd-pas--en_cours .cd-pas__barre i { animation: cdAvance 1.8s ease-in-out infinite alternate; }
#page-codeurs .cd-pas--rate b, #page-codeurs .cd-pas--bloque b { color: #ff8a8a; }
#page-codeurs .cd-pas--rate .cd-pas__barre i, #page-codeurs .cd-pas--bloque .cd-pas__barre i { background: #ff7b8a; }
#page-codeurs .cd-pas--attend_lionel b { color: #c9b6ff; }
@keyframes cdAvance { from { width: 25%; } to { width: 75%; } }

/* Mon atelier */
#page-codeurs .cd-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
#page-codeurs .cd-trois { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
#page-codeurs .cd-note { color: rgba(200, 214, 245, 0.5); font-size: 12px; margin: 0; }
#page-codeurs .cd-fini__titre { font-family: Georgia, serif; color: #f3d79b; font-size: 17px; line-height: 1.35; }
#page-codeurs .cd-fini__quand { color: rgba(200, 214, 245, 0.55); font-size: 12px; margin: 4px 0 8px; }
#page-codeurs .cd-fini__pourquoi { font-size: 13.5px; line-height: 1.55; color: rgba(223, 232, 255, 0.9); margin: 0 0 8px; }
#page-codeurs .cd-fini__pied { font-size: 12.5px; color: #4fd08a; }
#page-codeurs #cd-cours { max-height: 340px !important; overflow-y: auto; }
#page-codeurs .cd-item { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.06); color: #dfe8ff; }
#page-codeurs .cd-item:first-child { border-top: 0; }
#page-codeurs .cd-item i { color: rgba(200, 214, 245, 0.6); font-style: normal; font-size: 12px; text-align: right; flex: 0 0 auto; max-width: 55%; }
#page-codeurs .cd-item span { min-width: 0; overflow-wrap: anywhere; }
#page-codeurs .cd-ok { color: #4fd08a !important; }
#page-codeurs .cd-non { color: #ff8a8a !important; }

/* le cours de code */
#page-codeurs .cd-lecon { border-bottom: 1px solid rgba(200, 214, 245, 0.08); padding: 7px 2px; }
#page-codeurs .cd-lecon summary { cursor: pointer; font-size: 14px; color: #dfe8ff; list-style: none; }
#page-codeurs .cd-lecon summary::before { content: "▸ "; color: #e1b96e; }
#page-codeurs .cd-lecon[open] summary::before { content: "▾ "; }
#page-codeurs .cd-lecon__corps p { font-size: 14px; line-height: 1.55; color: rgba(223, 232, 255, 0.92); margin: 8px 0; }
#page-codeurs .cd-lecon__code { background: #060816; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px; padding: 8px 10px;
  font: 12.5px/1.55 Consolas, Menlo, monospace; color: #c3e88d; white-space: pre-wrap; margin: 6px 0; }
#page-codeurs .cd-lecon__exemple { color: #ffe3a8 !important; }
#page-codeurs .cd-cours__note { font-size: 11.5px; font-style: italic; color: rgba(200, 214, 245, 0.5); margin-top: 10px; }

/* Morpheus et Death */
#page-codeurs .cd-deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
#page-codeurs .cd-scene { position: relative; }
#page-codeurs .cd-badge { position: absolute; top: 8px; right: 8px; font-size: 11px; color: #f3d79b; border: 1px solid rgba(225, 185, 110, 0.3);
  border-radius: 8px; padding: 2px 7px; background: rgba(6, 8, 22, 0.8); }
#page-codeurs .cd-cadre { width: 100%; height: 360px; border: 0; border-radius: 10px; background: #060816; display: block; }
#page-codeurs .cd-editeur { background: #060816; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; overflow: hidden; }
#page-codeurs .cd-onglets { display: flex; gap: 2px; background: #0b0e1f; border-bottom: 1px solid rgba(255, 255, 255, 0.06); overflow-x: auto; }
#page-codeurs .cd-onglet { font: 11.5px Consolas, Menlo, monospace; color: rgba(200, 214, 245, 0.6); background: none; border: 0; padding: 7px 12px; cursor: pointer; white-space: nowrap; }
#page-codeurs .cd-onglet--on { color: #dfe8ff; background: #060816; }
#page-codeurs .cd-lignes { font: 12.5px/1.6 Consolas, Menlo, monospace; max-height: 380px; overflow: auto; padding: 4px 0; }
#page-codeurs .cd-l { display: flex; cursor: pointer; padding: 0 10px; white-space: pre; color: #dfe8ff; }
#page-codeurs .cd-l:hover { background: rgba(225, 185, 110, 0.07); }
#page-codeurs .cd-l--on { background: rgba(225, 185, 110, 0.18); }
#page-codeurs .cd-l em { width: 30px; color: #4a4f72; font-style: normal; flex: 0 0 auto; text-align: right; margin-right: 12px; user-select: none; }
#page-codeurs .cd-l .cod-k { color: #c792ea; }
#page-codeurs .cd-l .cod-s { color: #c3e88d; }
#page-codeurs .cd-l .cod-n { color: #f78c6c; }
#page-codeurs .cd-l .cod-c { color: #5c6390; }
#page-codeurs .cd-pied { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: rgba(200, 214, 245, 0.55);
  padding: 6px 10px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
#page-codeurs .cd-pourquoi { padding: 6px 10px 8px; font-size: 12.5px; color: rgba(223, 232, 255, 0.85); border-top: 1px solid rgba(255, 255, 255, 0.06); }
#page-codeurs .cd-pourquoi summary { cursor: pointer; color: #e1b96e; }
#page-codeurs .cd-expl { margin-top: 12px; border: 1px solid #e1b96e; border-radius: 12px; padding: 12px 14px; background: #151027; min-height: 70px; }
#page-codeurs .cd-expl b { color: #f3d79b; }
#page-codeurs .cd-expl p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: #dfe8ff; }
#page-codeurs .cd-expl small { display: block; margin-top: 6px; color: rgba(200, 214, 245, 0.5); font-size: 11.5px; }
#page-codeurs .cd-produit .cd-item i { max-width: 30%; }

/* Neo */
#page-codeurs .cd-mur { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
#page-codeurs .cd-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
#page-codeurs .cd-trouv { border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 9px 0; font-size: 13px; color: #dfe8ff; }
#page-codeurs .cd-trouv:first-child { border-top: 0; }
#page-codeurs .cd-trouv small { display: block; color: rgba(200, 214, 245, 0.6); font-size: 11.5px; margin-top: 2px; }
#page-codeurs .cd-tag { font-size: 10.5px; border-radius: 8px; padding: 1px 7px; margin-left: 6px; background: #231a46; color: #f3d79b; white-space: nowrap; flex: 0 0 auto; }
#page-codeurs .cd-tag--vert { background: #14321f; color: #7ee2a6; }

@media (max-width: 1080px) {
  #page-codeurs .cd-trois { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 860px) {
  html #page-codeurs .cd-cols, html #page-codeurs .cd-trois, html #page-codeurs .cd-deux, html #page-codeurs .cd-mur { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* Sur le téléphone, comme le desk : la barre passe EN HAUT, sous le titre, et la page défile d'un seul geste. */
  html #page-codeurs.page--active { box-sizing: border-box; padding-bottom: 96px; }
  html #page-codeurs .cd-panneau { order: 1; overflow: visible; }
  html #page-codeurs .cd-pad { padding: 0 12px 16px; }
  html #page-codeurs .dk-gens { order: 0; padding: 0 12px 10px; gap: 6px; border-top: 0; background: none; }
  html #page-codeurs .cd-gen { flex: 0 0 auto; min-width: 74px; padding: 6px 10px; flex-direction: column; align-items: flex-start; gap: 0; }
  html #page-codeurs .cd-gen i, html #page-codeurs .cd-gen small { display: none; }
  html #page-codeurs .cd-chg__pas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html #page-codeurs .cd-cadre { height: 46vh; }
  html #page-codeurs .cd-lignes { max-height: 50vh; }
}