.os-role-map {
  display: grid;
  grid-template-columns: 1fr auto 1.2fr auto 1fr;
  gap: 8px;
  align-items: stretch;
  margin: 30px 0 12px;
  padding: 12px;
  border-radius: 18px;
  background: var(--ink);
  color: #fff;
}

.os-role-map article {
  min-width: 0;
  padding: 20px;
  border: 1px solid #ffffff18;
  border-radius: 11px;
  background: #252b38;
}

.os-role-map .os-core {
  border-color: #8be8bd66;
  background: #24463a;
}

.os-role-map small,
.os-role-map strong,
.os-role-map span {
  display: block;
}

.os-role-map small {
  color: var(--mint);
  font: 8px 'DM Mono';
  letter-spacing: .08em;
}

.os-role-map strong {
  margin: 9px 0 6px;
  font-size: 18px;
}

.os-role-map span {
  color: #b9c2cf;
  font-size: 11px;
  line-height: 1.5;
}

.os-role-map > i {
  align-self: center;
  color: var(--orange);
  font-style: normal;
  font-size: 21px;
}

.os-jobs,
.os-landmarks {
  display: grid;
  gap: 9px;
}

.os-jobs {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 12px;
}

.os-jobs article,
.os-landmarks article {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}

.os-jobs small,
.os-landmarks small {
  color: var(--blue);
  font: 8px 'DM Mono';
  letter-spacing: .08em;
}

.os-jobs h3,
.os-landmarks h3 {
  margin: 9px 0 6px;
  font-size: 18px;
}

.os-jobs p,
.os-landmarks p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.os-landmarks {
  grid-template-columns: 1fr 1fr;
  margin-top: 9px;
}

.os-landmarks article:first-child {
  border-top: 5px solid var(--blue);
}

.os-landmarks article:last-child {
  border-top: 5px solid var(--purple);
}

.os-mao-note {
  margin-top: 12px;
  padding: 20px 22px;
  border-left: 5px solid var(--orange);
  background: #fff0e9;
}

.os-mao-note b {
  display: block;
  margin-bottom: 5px;
}

.os-mao-note p {
  margin: 0;
  color: #5c5f69;
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 1000px) {
  .os-role-map,
  .os-jobs {
    grid-template-columns: 1fr;
  }

  .os-role-map > i {
    justify-self: center;
    transform: rotate(90deg);
  }
}

@media (max-width: 700px) {
  .os-landmarks {
    grid-template-columns: 1fr;
  }
}

/* Clavier AZERTY : taille des touches proportionnelle à la place disponible,
   pour que le clavier entier reste visible sans défilement horizontal. */
.azerty-keyboard-scroll{container:kbd/inline-size}
.azerty-keyboard-scroll .azerty-keyboard{min-width:0;padding:clamp(12px,2.2cqw,22px)}
.azerty-keyboard-scroll .keyboard-lower{grid-template-columns:minmax(0,6.3fr) minmax(0,1.45fr) minmax(0,1.8fr);gap:clamp(6px,1cqw,10px)}
.azerty-keyboard-scroll .keyboard-zone{min-width:0;padding:18px clamp(5px,.8cqw,8px) clamp(5px,.8cqw,8px)}
.azerty-keyboard-scroll .azerty-keyboard kbd{min-width:0!important;height:clamp(30px,3.7cqw,42px)!important;padding:2px;font-size:clamp(8px,1cqw,12px)!important;line-height:1.05;text-align:center;overflow:hidden;overflow-wrap:normal}
.azerty-keyboard-scroll .azerty-keyboard kbd small{font-size:clamp(7px,.9cqw,10px)!important}
.azerty-keyboard-scroll .key-row,.azerty-keyboard-scroll .function-zone,.azerty-keyboard-scroll .navigation-zone,.azerty-keyboard-scroll .numpad-zone{gap:clamp(3px,.5cqw,5px)}
.azerty-keyboard-scroll .key-row{margin-bottom:clamp(3px,.5cqw,5px)}
/* Place réduite : navigation et pavé numérique passent sous la zone de frappe. */
@container kbd (max-width:880px){
  .azerty-keyboard-scroll .azerty-keyboard{min-width:540px}
  .azerty-keyboard-scroll .keyboard-lower{grid-template-columns:minmax(0,3fr) minmax(0,4fr)}
  .azerty-keyboard-scroll .typing-zone{grid-column:1/-1}
  .azerty-keyboard-scroll .navigation-zone,.azerty-keyboard-scroll .numpad-zone{margin-top:8px}
  .azerty-keyboard-scroll .azerty-keyboard kbd{height:clamp(30px,5.6cqw,42px)!important;font-size:clamp(8px,1.65cqw,12px)!important}
  .azerty-keyboard-scroll .azerty-keyboard kbd small{font-size:clamp(7px,1.35cqw,10px)!important}
}

/* Souris : illustrations et cartes interactives */
.mouse-try{margin:0 0 12px;font-size:14px!important;color:var(--muted)}
.mouse-buttons-guide article{position:relative;user-select:none;-webkit-user-select:none;transition:border-color .15s,box-shadow .15s}
.mouse-buttons-guide article.pressed{border-color:var(--blue);box-shadow:0 0 0 3px #1762ff26}
.mouse-illu{display:block;width:120px;height:96px;overflow:visible}
.mouse-illu .body{fill:#fff}
.mouse-illu .btn{fill:#fff}
.mouse-illu .hl{fill:var(--blue);transition:fill .12s}
.mouse-illu .wheel{fill:#fff;stroke:var(--ink);stroke-width:2}
.mouse-illu .wheel-hl{fill:var(--orange);stroke:var(--ink);stroke-width:2}
.mouse-illu .seam{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.mouse-illu .outline{fill:none;stroke:var(--ink);stroke-width:3}
.mouse-illu .mouse-ridges path{stroke:#15192599;stroke-width:1.2;stroke-linecap:round}
.mouse-illu .acc-arrow{fill:var(--ink);stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.mouse-illu .mouse-ripple{fill:none;stroke:var(--blue);stroke-width:2;opacity:0}
.mouse-illu .acc-page,.mouse-illu .acc-menu{fill:#fff;stroke:#15192533;stroke-width:1.5}
.mouse-illu .acc-menu{filter:drop-shadow(0 4px 6px #15192526)}
.mouse-illu .acc-lines{stroke:#15192540;stroke-width:3;stroke-linecap:round}
.mouse-illu .acc-track{fill:#eef1f7}
.mouse-illu .acc-thumb{fill:var(--orange);transition:transform .25s ease}
.mouse-illu .acc-sel{fill:#1762ff33}
.mouse-live{display:block;min-height:1.4em;margin-top:6px;font:600 11px 'DM Mono';color:var(--blue)}
.pressed .mouse-illu .hl{fill:#0b3fd1}
.pressed[data-mouse=wheel] .mouse-illu .wheel-hl{fill:#e0411b}
.pressed[data-mouse=left] .mouse-ripple{animation:mouseRipple .45s ease-out}
.pressed[data-mouse=left] .mouse-ripple.r2{animation-delay:.12s}
@keyframes mouseRipple{from{opacity:.9;r:3}to{opacity:0;r:14}}
.mouse-illu .mouse-ridges{transition:transform .2s ease}
.pressed[data-mouse=right] .acc-menu,.pressed[data-mouse=right] .acc-sel,.pressed[data-mouse=right] .acc-lines{animation:mouseMenu .3s ease-out}
@keyframes mouseMenu{from{opacity:0;transform:translate(-4px,-4px)}}
@media(prefers-reduced-motion:reduce){.pressed .mouse-ripple,.pressed .acc-menu,.pressed .acc-sel,.pressed .acc-lines{animation:none}}
.mouse-buttons-guide{position:relative}
.mouse-buttons-guide.wheel-captured{outline:2px dashed var(--blue);outline-offset:6px;border-radius:16px}