/* Simulateur CMS pédagogique : styles autonomes (variables de l'atelier si présentes, sinon valeurs par défaut). Aucune marque, aucun logo. */
.sim { --s-surf: var(--surface, #fff); --s-ink: var(--ink, #0F1B3C); --s-n1: var(--n1, #EDF0F5); --s-n2: var(--n2, #DDE3EC); --s-n3: var(--n3, #B9C0CB); --s-n5: var(--n5, #5D6A7E); --s-bleu: var(--bleu, #0B5FFF); --s-soft: var(--bleu-soft, #E8F0FF); --s-line: var(--bleu-line, #BFD3FF); --s-ink2: var(--bleu-ink, #0A3FA8);
  --s-ok: var(--ok, #0F7A55); --s-oksoft: var(--ok-soft, #E3F4EC); --s-ko: var(--ko, #B3261E); --s-kosoft: var(--ko-soft, #FBE9E7); --s-warn: var(--warn, #8D6708); --s-warnsoft: var(--warn-soft, #FBF3DC); --s-or: var(--or, #E0A800);
  display: flex; flex-direction: column; height: 100%; min-height: 0; color: var(--s-ink); background: var(--s-surf); font: 400 14px/1.45 var(--f-ui, system-ui, 'Segoe UI', Roboto, sans-serif); position: relative; }
.sim *, .sim *::before, .sim *::after { box-sizing: border-box; }
.sim .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--s-n3); background: var(--s-surf); color: var(--s-ink); font: 600 .88rem inherit; font-family: inherit; cursor: pointer; text-decoration: none; -webkit-appearance: none; appearance: none; }
.sim .btn:hover { border-color: var(--s-bleu); background: var(--s-soft); }
.sim .btn.prim { background: var(--s-bleu); border-color: var(--s-bleu); color: #fff; } .sim .btn.prim:hover { background: var(--s-ink2); }
.sim .btn.doux { background: var(--s-soft); border-color: var(--s-line); color: var(--s-ink2); }
.sim .btn.mini { min-width: 44px; padding: 0 10px; } .sim .btn[disabled] { opacity: .45; cursor: not-allowed; }
.sim input[type=text], .sim input[type=number], .sim input[type=email], .sim input[type=date], .sim select, .sim textarea { min-height: 44px; width: 100%; max-width: 100%; border: 1px solid var(--s-n3); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 16px; background: var(--s-surf); color: var(--s-ink); min-width: 0; }
.sim textarea { min-height: 64px; resize: vertical; font-family: inherit; } .sim select[multiple] { min-height: 90px; }
.sim input[type=checkbox], .sim input[type=radio] { width: 22px; height: 22px; flex: none; accent-color: var(--s-bleu); margin: 0; }
.sim code { font: 500 .86em ui-monospace, 'Cascadia Mono', Consolas, monospace; background: var(--s-n1); padding: 1px 5px; border-radius: 5px; word-break: break-word; }
.sim h2 { font-size: 1.05rem; margin: 0 0 8px; } .sim h3 { font-size: .95rem; margin: 6px 0; } .sim h4 { font-size: .88rem; margin: 10px 0 4px; }
.sim .petit { font-size: .82rem; color: var(--s-n5); } .sim p { margin: 0 0 .6em; }
.sim .puce { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.sim .puce.ok { background: var(--s-oksoft); color: var(--s-ok); } .sim .puce.cours { background: var(--s-warnsoft); color: var(--s-warn); } .sim .puce.non { background: var(--s-n1); color: var(--s-n5); } .sim .puce.doux { background: var(--s-soft); color: var(--s-ink2); }
.sim-bar { flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-bottom: 1px solid var(--s-n2); background: var(--s-n1); }
.sim-titre { font-size: .9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sim-sp { flex: 1 1 auto; }
.sim-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 168px minmax(0, 1fr); }
.sim[data-prev=on] .sim-body { grid-template-columns: 168px minmax(0, 1fr) minmax(250px, 38%); }
.sim-nav { overflow-y: auto; border-inline-end: 1px solid var(--s-n2); background: var(--s-n1); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.sim-tab { all: unset; box-sizing: border-box; min-height: 44px; display: flex; align-items: center; padding: 0 12px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: .86rem; color: var(--s-ink); }
.sim-tab:hover { background: var(--s-soft); } .sim-tab[aria-selected=true] { background: var(--s-bleu); color: #fff; } .sim-tab:focus-visible, .sim .btn:focus-visible { outline: 3px solid var(--s-bleu); outline-offset: 2px; }
.sim-view { overflow: auto; padding: 12px 14px; min-height: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.sim-prev { display: none; overflow: auto; border-inline-start: 1px solid var(--s-n2); background: var(--s-n1); padding: 8px; min-height: 0; }
.sim[data-prev=on] .sim-prev { display: block; }
.sim-prev-t { margin-bottom: 6px; font-size: .82rem; } .sim-url { display: block; background: var(--s-surf); border: 1px solid var(--s-n3); border-radius: 8px 8px 0 0; padding: 4px 10px; font: 600 .74rem ui-monospace, Consolas, monospace; color: var(--s-n5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-prev-site, .sw-site-plein .fr-site { border: 1px solid var(--s-n3); border-top: 0; border-radius: 0 0 8px 8px; overflow: hidden; }
.sim-msg { padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; font-weight: 600; font-size: .86rem; } .sim-msg.ok { background: var(--s-oksoft); color: var(--s-ok); } .sim-msg.ko { background: var(--s-kosoft); color: var(--s-ko); }
.sim-bulle { position: absolute; inset-inline: 10px; bottom: 10px; background: #0F1B3C; color: #fff; padding: 10px 14px; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.3); z-index: 20; font-weight: 600; } .sim-bulle[hidden] { display: none; }
.sim-aide { outline: 3px solid var(--s-or) !important; outline-offset: 2px; animation: simpulse 1.2s ease-in-out 5; position: relative; z-index: 2; }
@keyframes simpulse { 50% { box-shadow: 0 0 0 8px rgba(224,168,0,.35); } }
@media (prefers-reduced-motion: reduce) { .sim-aide { animation: none; } }
.sw-entete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 8px; } .sw-entete h2, .sw-entete h3 { margin: 0; }
.sw-champ { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; border: 0; padding: 0; min-width: 0; } .sw-champ > span, .sw-champ > legend { font-size: .8rem; font-weight: 650; color: var(--s-n5); }
.sw-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 10px; } .sw-form .sw-champ { flex: 1 1 160px; margin-bottom: 0; } .sw-form.sw-col { flex-direction: column; align-items: stretch; } .sw-form.sw-col .sw-champ { flex: none; }
.sw-ligne { display: flex; gap: 8px; flex-wrap: wrap; } .sw-ligne > * { flex: 1 1 110px; min-width: 0; }
.sw-cases { display: flex; flex-wrap: wrap; gap: 4px 14px; } .sw-case { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.sw-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.sw-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; } .sh-2col { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
.sw-liste { list-style: none; margin: 8px 0; padding: 0; } .sw-liste > li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--s-n1); min-height: 44px; } .sw-menuliste { list-style: decimal inside; }
.sw-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 10px 0; } .sw-carte { border: 1px solid var(--s-n2); border-radius: 10px; padding: 10px; background: var(--s-n1); } .sw-carte b { display: block; font-size: 1.4rem; } .sw-carte span { font-size: .78rem; color: var(--s-n5); }
.sw-bloc { border: 1px solid var(--s-n2); border-radius: 10px; padding: 6px 8px; margin-bottom: 8px; } .sw-bloc-t { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.sw-ajout-bloc { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .sw-ajout-bloc label { flex: 1 1 140px; }
.sw-media { flex-wrap: wrap; } .sw-media input { flex: 1 1 140px; } .sw-vign { width: 40px; height: 40px; border-radius: 8px; background: var(--s-soft); color: var(--s-ink2); display: grid; place-items: center; font-size: .7rem; font-weight: 700; flex: none; } .sw-mnom { font-weight: 600; flex: 1 1 120px; word-break: break-all; }
.sw-themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } .sw-theme { border: 1px solid var(--s-n2); border-radius: 12px; padding: 10px; } .sw-theme.actif { border-color: var(--s-ok); box-shadow: 0 0 0 2px var(--s-oksoft); }
.sw-theme-ap { display: flex; gap: 4px; height: 38px; margin-bottom: 6px; } .sw-theme-ap i { flex: 1; border-radius: 6px; background: var(--t1); } .sw-theme-ap i:nth-child(2) { background: var(--t2); } .sw-theme-ap i:nth-child(3) { background: var(--t3); }
.th-clair { --t1: #fff; --t2: #0B5FFF; --t3: #E8F0FF; } .th-sombre { --t1: #14182B; --t2: #8AB4FF; --t3: #232A45; } .th-magazine { --t1: #FFF8F0; --t2: #B3261E; --t3: #1A1A1A; } .th-nature { --t1: #F2F8F1; --t2: #2E7D32; --t3: #C8E6C9; }
.sim .tableau-cadre { border: 1px solid var(--s-n2); border-radius: 10px; overflow: auto; margin-bottom: 8px; } .sim table.tab { border-collapse: collapse; width: 100%; font-size: .85rem; } .sim .tab th, .sim .tab td { padding: 6px 10px; border-bottom: 1px solid var(--s-n1); text-align: start; } .sim .tab thead th { background: var(--s-n1); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--s-n5); } .sim .tab td .btn { margin-inline-end: 4px; } .sim .tab .c { text-align: center; }
/* site public simulé */
.fr-site { --fb: var(--t1, #fff); --fa: var(--t2, #0B5FFF); --ft: #1b2233; background: var(--fb); color: var(--ft); font: 400 .9rem/1.5 Georgia, 'Times New Roman', serif; min-height: 160px; }
.fr-site.th-sombre { --ft: #E8ECFA; } .fr-site.th-magazine { --ft: #1A1A1A; font-family: Georgia, serif; } .fr-site.th-magazine h1, .fr-site.th-magazine h2 { font-family: Georgia, serif; border-bottom: 2px solid var(--fa); } .fr-site.th-nature { --ft: #173D1B; } .fr-site.th-clair, .fr-site.th-nature { font-family: system-ui, 'Segoe UI', sans-serif; } .fr-site.th-sombre { font-family: system-ui, 'Segoe UI', sans-serif; }
.fr-tete { padding: 10px 14px; background: var(--t3); border-bottom: 3px solid var(--fa); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; } .fr-nom { font-weight: 800; font-size: 1.15rem; color: var(--fa); text-decoration: none; } .fr-slogan { font-size: .78rem; opacity: .8; flex: 1 1 100%; } .fr-site nav { display: flex; gap: 6px 14px; flex-wrap: wrap; } .fr-site nav a { color: var(--ft); font-weight: 650; text-decoration: none; padding: 6px 0; }
.fr-main { padding: 12px 14px; } .fr-main h1 { font-size: 1.25rem; margin: 0 0 6px; } .fr-main h2 { font-size: 1.05rem; } .fr-main a { color: var(--fa); } .fr-meta { font-size: .76rem; opacity: .75; } .fr-carte { border-bottom: 1px solid rgba(128,128,128,.3); padding-bottom: 6px; margin-bottom: 8px; }
.fr-ph { background: repeating-linear-gradient(45deg, rgba(128,128,128,.2), rgba(128,128,128,.2) 8px, rgba(128,128,128,.1) 8px, rgba(128,128,128,.1) 16px); border-radius: 8px; min-height: 60px; display: grid; place-items: center; font-size: .75rem; opacity: .85; } .fr-btn { display: inline-block; background: var(--fa); color: #fff; padding: 6px 14px; border-radius: 8px; font-weight: 700; } blockquote { margin: 8px 0; padding-inline-start: 10px; border-inline-start: 3px solid var(--fa); font-style: italic; }
.fr-contact { margin-top: 12px; border: 1px dashed var(--fa); padding: 8px 10px; border-radius: 8px; display: grid; gap: 6px; } .fr-contact input { min-height: 36px !important; }
.fr-pied { padding: 8px 14px; font-size: .78rem; border-top: 1px solid rgba(128,128,128,.3); } .fr-pied a { color: var(--fa); }
/* headless */
.sh-types li { padding: 0; } .sh-types .btn { width: 100%; justify-content: space-between; }
.sh-chtypes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .sh-chtypes .btn { font-size: .8rem; padding: 0 10px; }
.sh-opt { border: 1px solid var(--s-n2); border-radius: 10px; margin: 0 0 8px; padding: 4px 8px 8px; } .sh-opt legend { font-size: .76rem; font-weight: 700; color: var(--s-n5); padding: 0 4px; }
.sh-api { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
.sh-json { margin: 0; padding: 10px 12px; background: #0F1B3C; color: #E4ECFF; border-radius: 10px; font: 500 .78rem/1.5 ui-monospace, 'Cascadia Mono', Consolas, monospace; overflow: auto; max-height: 52vh; white-space: pre; -webkit-user-select: text; user-select: text; }
.j-k { color: #9DC4FF; } .j-s { color: #A5E8B8; } .j-n { color: #FFD28A; } .j-b { color: #FF9FB0; }
.sh-status { margin: 0 0 6px; padding: 6px 10px; border-radius: 8px; font-size: .84rem; } .sh-status.ok { background: var(--s-oksoft); color: var(--s-ok); } .sh-status.ko { background: var(--s-kosoft); color: var(--s-ko); }
.sh-schema summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 650; }
.sh-perm { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; }
/* thème sombre de l'atelier (le simulateur suit les variables) : le site fictif garde ses couleurs */
@media (max-width: 900px), (max-height: 560px) {
  .sim-body, .sim[data-prev=on] .sim-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .sim-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; border-inline-end: 0; border-bottom: 1px solid var(--s-n2); padding: 4px; scrollbar-width: thin; }
  .sim-tab { flex: none; white-space: nowrap; }
  .sim[data-prev=on] .sim-prev { display: none; } .sim-prevbtn { display: none !important; }
  .sw-2col, .sh-2col, .sh-api { grid-template-columns: minmax(0, 1fr); }
  .sim-lib { display: none; } .sim-titre { font-size: .8rem; }
  .sim-view { padding: 8px 10px; }
}
@media (max-height: 560px) and (min-width: 901px) { .sim-lib { display: inline; } }
/* liens du site fictif : cibles tactiles confortables */
.fr-site nav a, .fr-nom, .fr-pied a, .fr-main a { display: inline-flex; align-items: center; min-height: 44px; }
.fr-pied a { padding: 0 4px; }