/* ============================================================
   vallee-esteban.com — base commune aux deux affichages
   (polices, remise à zéro, en-tête, interrupteur d'affichage, pied)
   L'affichage actif est porté par <html class="is-rack | is-classic">.
   ============================================================ */

@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/martian-mono.woff2") format("woff2-variations"), url("../fonts/martian-mono.woff2") format("woff2");
  font-weight: 100 800; font-stretch: 75% 112.5%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans.woff2") format("woff2-variations"), url("../fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-italic.woff2") format("woff2-variations"), url("../fonts/instrument-sans-italic.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Doto";
  src: url("../fonts/doto.woff2") format("woff2-variations"), url("../fonts/doto.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto.woff2") format("woff2-variations"), url("../fonts/roboto.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --label: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:  "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dot:   "Doto", "Martian Mono", ui-monospace, monospace;
  --roboto: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --maxw: 1240px;
  --gutter: clamp(1rem, .4rem + 2vw, 2rem);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  /* couleurs des familles de compétences (palette validée : séparation daltonisme et contraste) */
  --c-infra: #3987e5;
  --c-cyber: #d95926;
  --c-dev:   #199e70;
  --c-sys:   #c98500;
  --c-tools: #9085e9;
  color-scheme: dark;
}

/* ---------- remise à zéro ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }
.ico { width: 1.1em; height: 1.1em; flex: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
:target { scroll-margin-top: 5.5rem; }

/* un seul affichage visible à la fois */
.is-rack .v-classic, .is-classic .v-rack, .is-classic .rack-only, .is-classic .mode-hint { display: none !important; }

.skip { position: absolute; left: -999px; top: .5rem; z-index: 100; padding: .6rem 1rem; font-weight: 700; font-size: .85rem; border-radius: 4px; }
.skip:focus { left: .5rem; }

/* ============================================================
   EN-TÊTE (structure ; les couleurs vivent dans chaque affichage)
   ============================================================ */
.site-header { position: sticky; top: 0; z-index: 60; }
.nav { position: relative; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: .6rem; min-height: 60px; }
.brand { display: flex; align-items: center; gap: .65rem; margin-right: auto; min-width: 0; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-name { white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: .1rem; }
.nav-links a { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.nav-cta { margin-left: .35rem; }

/* interrupteur d'affichage : toujours visible, sur toutes les pages */
.mode { display: inline-flex; align-items: center; flex: none; }
.mode-b { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; border: 0; background: none; white-space: nowrap; }
.no-js .mode { display: none; }

.nav-toggle { display: none; align-items: center; gap: .45rem; cursor: pointer; }

@media (max-width: 1280px) {
  .nav { flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; }
  .nav-links { display: none; order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: .3rem 0 1rem; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: .85rem .75rem; }
  .nav-cta { margin: .5rem 0 0; }
  .nav-cta a { justify-content: center; }
}
@media (max-width: 460px) {
  .mode-b span, .nav-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* ============================================================
   PIED DE PAGE (structure)
   ============================================================ */
.foot { max-width: var(--maxw); margin-inline: auto; padding: 2.5rem var(--gutter) 1.5rem; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
.foot ul { display: flex; flex-direction: column; gap: .4rem; list-style: none; padding: 0; }
.foot a { overflow-wrap: anywhere; }
.foot-id p { margin-top: .9rem; max-width: 36ch; }
.foot-bar { max-width: var(--maxw); margin-inline: auto; padding: 1rem var(--gutter) 1.6rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 760px) {
  .foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-id { grid-column: 1 / -1; }
}

/* ---------- texte long : rythme commun ---------- */
.prose { max-width: 70ch; }
.prose > * + * { margin-top: 1.1rem; }
.prose ul:not([class]) { padding-left: 1.2rem; display: flex; flex-direction: column; gap: .45rem; }
.prose figure { margin-block: 1.8rem; }
.prose figcaption { margin-top: .6rem; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: .8rem; }
.gallery figure { margin: 0; }
.gallery figcaption { margin-top: .5rem; }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.pdf-mobile { display: none; }
.pdf-frame { display: block; width: 100%; height: min(78vh, 1100px); border: 0; background: #fff; }
@media (max-width: 760px) {
  .pdf-desktop { display: none; }
  .pdf-mobile { display: block; }
}

/* ---------- bascule d'affichage : fondu bref (navigateurs compatibles) ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: var(--ease-out); }

/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; transition-delay: 0s !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- repli quand une image du domaine ne charge pas ---------- */
.brand-badge { display: none; }
img.err { visibility: hidden; }
.img-err { position: relative; }
.c-portrait.img-err::after, .portrait.img-err::after {
  content: "EV"; position: absolute; inset: 0; display: grid; place-items: center;
  font: 800 clamp(3rem, 2rem + 4vw, 5.5rem)/1 var(--roboto); letter-spacing: -.02em; color: rgba(255,255,255,.85);
}

/* ============================================================
   AFFICHAGE « BAIE »
   Accueil : baie de 11U, un serveur 1U par section du portfolio.
   Toutes les règles sont préfixées par .is-rack
   ============================================================ */

.is-rack {
  --room:    #08090B;
  --frame:   #0F1114;
  --face:    #202328;
  --face-hi: #2A2E34;
  --face-lo: #17191C;
  --seam:    #050607;
  --well:    #0C0E11;
  --ink:     #EEEBE5;
  --soft:    #C6C9CE;
  --silk:    #A3A9B1;
  --dim:     #7E848D;
  --tape:    #F1EDE2;
  --tape-ink:#15161A;
  --hot:     #FF5B1F;
  --hot-ink: #1E0900;
  --led-g:   #46F08E;
  --led-a:   #FFB21E;
  --led-r:   #FF5252;
  --led-b:   #4AA7FF;
  --led-off: #25282C;
  --vfd:     #6FF6E3;
  --vfd-bg:  #031311;
  --fiber:   #17B2BA;
  --ear:     24px;
  --u:       46px;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .075 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --screw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.38' cy='.32' r='.78'%3E%3Cstop offset='0' stop-color='%23C9CED5'/%3E%3Cstop offset='.5' stop-color='%236C727A'/%3E%3Cstop offset='1' stop-color='%23272A2F'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12.7' r='5.5' fill='%23000' opacity='.55'/%3E%3Ccircle cx='12' cy='12' r='4.9' fill='url(%23g)'/%3E%3Cpath d='M9.7 12h4.6M12 9.7v4.6' stroke='%231C1F23' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.is-rack body {
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.7; color: var(--ink);
  background: radial-gradient(ellipse 70% 40% at 50% -6%, rgba(140,180,220,.085), transparent 70%), var(--room);
}
.is-rack ::selection { background: var(--hot); color: var(--hot-ink); }
.is-rack :focus-visible { outline: 2px solid var(--vfd); outline-offset: 2px; border-radius: 2px; }
.is-rack .skip { background: var(--hot); color: var(--hot-ink); font-family: var(--label); }
.is-rack h1, .is-rack h2, .is-rack h3 { font-family: var(--label); line-height: 1.15; font-weight: 700; letter-spacing: -.015em; }
.is-rack p { max-width: 68ch; }
.is-rack strong { font-weight: 600; color: #fff; }

/* ---------- primitives ---------- */
.is-rack .silk { font-family: var(--label); font-stretch: 87.5%; font-weight: 500; font-size: 9.5px; line-height: 1.35; letter-spacing: .05em; text-transform: uppercase; color: var(--silk); }
.is-rack .tape {
  display: inline-block; font-family: var(--label); font-stretch: 75%; font-weight: 700; font-size: 9.5px; line-height: 1;
  letter-spacing: .09em; text-transform: uppercase; color: var(--tape-ink); white-space: nowrap;
  background: linear-gradient(180deg, #FCF9F1 0%, var(--tape) 45%, #E1DCCE 100%);
  padding: 4px 8px 3px; transform: rotate(-.7deg);
  clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 50%, 100% 100%, 0 100%, 3px 50%);
}

/* voyants */
.is-rack .led {
  display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--led-off);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.45);
  transition: background-color .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.is-rack .is-on .led.g, .no-js .led.g, .is-rack .led.g.lit { background: var(--led-g); box-shadow: 0 0 4px rgba(70,240,142,.9), 0 0 11px rgba(70,240,142,.32); }
.is-rack .is-on .led.a, .no-js .led.a, .is-rack .led.a.lit { background: var(--led-a); box-shadow: 0 0 4px rgba(255,178,30,.9), 0 0 11px rgba(255,178,30,.32); }
.is-rack .is-on .led.a.off { background: #4A3511; box-shadow: none; transition-duration: .04s; }
.is-rack .booting .ru .led { transition-delay: calc(var(--i, 0) * 80ms + 120ms); }

/* boutons */
.is-rack .btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--label); font-stretch: 87.5%; font-size: 11.5px; font-weight: 650; line-height: 1; letter-spacing: .02em;
  padding: 10px 13px; border-radius: 3px; cursor: pointer; white-space: nowrap;
  color: var(--ink); background: linear-gradient(180deg, #393D44, #282B30);
  border: 1px solid var(--seam);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 0 var(--seam);
  transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out), filter .18s ease;
}
.is-rack .btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 var(--seam); }
.is-rack .btn--hot { color: var(--hot-ink); background: linear-gradient(180deg, #FF7B46, #EC4E10); border-color: #6E2004; box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 2px 0 #6E2004; }
.is-rack .btn--hot:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 #6E2004; }
.is-rack .btns { display: flex; flex-wrap: wrap; gap: 8px; }
@media (hover: hover) and (pointer: fine) { .is-rack .btn:hover { filter: brightness(1.14); } }

/* prises et ports */
.is-rack .jack { position: relative; display: block; width: 15px; height: 12px; border-radius: 1.5px; background: #040506; box-shadow: 0 0 0 1px #3B4046, inset 0 2px 3px #000; }
.is-rack .jack::before { content: ""; position: absolute; left: 3px; right: 3px; top: 2px; height: 2px; background: repeating-linear-gradient(90deg, #BC9C4E 0 1px, transparent 1px 2px); opacity: .85; }
.is-rack .jack::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: -2px; height: 3px; background: #040506; border-radius: 0 0 1px 1px; }
.is-rack .upl, .is-rack .sfp { position: relative; display: block; flex: none; width: 15px; height: 11px; border-radius: 1px; background: linear-gradient(180deg, #9198A0, #5A5F66); box-shadow: inset 0 0 0 1px #2A2D32, 0 1px 0 #000; }
.is-rack .upl::before, .is-rack .sfp::before { content: ""; position: absolute; inset: 2.5px 2.5px; background: #060708; }
.is-rack .sfp .led { position: absolute; top: -6px; left: 50%; width: 3px; height: 3px; margin-left: -1.5px; }
.is-rack .lamp { display: inline-flex; align-items: center; gap: 5px; font-family: var(--label); font-stretch: 87.5%; font-size: 8px; font-weight: 600; letter-spacing: .06em; color: var(--dim); }
.is-rack .swp { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.is-rack .swp-leds { display: flex; gap: 4px; }
.is-rack .swp .led { width: 4px; height: 4px; }
.is-rack .swp-n { font-family: var(--label); font-stretch: 75%; font-weight: 600; font-size: 7px; line-height: 1; color: var(--dim); }
.is-rack .is-on .swp.is-link .led.lk { background: var(--led-g); box-shadow: 0 0 3px rgba(70,240,142,.9), 0 0 7px rgba(70,240,142,.3); }
.is-rack .booting .swp .led.lk { transition-delay: calc(var(--i) * 40ms + 380ms); }
.is-rack .swp.tx .led.ac { background: var(--led-a); box-shadow: 0 0 3px rgba(255,178,30,.95), 0 0 8px rgba(255,178,30,.4); transition-duration: .03s; }

/* ============================================================
   EN-TÊTE ET PIED
   ============================================================ */
.is-rack .site-header { background: rgba(11,12,15,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--seam), 0 2px 0 rgba(255,255,255,.03); }
.is-rack .brand { flex: none; }
.is-rack .brand-badge, .is-rack .brand-sub { display: none; }
.is-rack .brand-tag { white-space: nowrap; font-family: var(--label); font-stretch: 75%; font-weight: 700; font-size: 11px; letter-spacing: .09em; color: var(--tape-ink); background: linear-gradient(180deg, #FCF9F1, var(--tape) 45%, #E1DCCE); padding: 5px 9px 4px; transform: rotate(-.7deg); clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 50%, 100% 100%, 0 100%, 4px 50%); }
.is-rack .brand-name { font-family: var(--label); font-stretch: 87.5%; font-weight: 600; font-size: 12px; color: var(--soft); }
.is-rack .nav-links a { font-family: var(--label); font-stretch: 87.5%; font-size: 11.5px; font-weight: 500; color: var(--soft); padding: .5rem .5rem; border-radius: 3px; transition: background-color .18s ease, color .18s ease; }
.is-rack .nav-links .nav-n { color: var(--dim); }
.is-rack .nav-links a[aria-current="page"] { color: #fff; }
.is-rack .nav-links a[aria-current="page"] .led { background: var(--led-g); box-shadow: 0 0 5px rgba(70,240,142,.9), 0 0 12px rgba(70,240,142,.3); }
.is-rack .nav-links a.btn--hot { color: var(--hot-ink); padding: 9px 12px; }
.is-rack .nav-toggle { font-family: var(--label); font-stretch: 87.5%; font-size: 11px; font-weight: 600; padding: 8px 10px; border-radius: 3px; border: 1px solid var(--seam); background: linear-gradient(180deg, #363A41, #26292E); box-shadow: inset 0 1px 0 rgba(255,255,255,.09); }
@media (hover: hover) and (pointer: fine) { .is-rack .nav-links a:not(.btn):hover { background: var(--face); color: #fff; } }
@media (max-width: 1500px) { .is-rack .nav-links .nav-n, .is-rack .mode-l { display: none; } }
@media (max-width: 1500px) and (min-width: 1281px) { .is-rack .brand-name { display: none; } }
@media (max-width: 1280px) { .is-rack .nav-links a:not(.btn) { font-size: 13px; background: var(--face); } }

/* interrupteur d'affichage : commutateur à deux positions */
.is-rack .mode { gap: 3px; padding: 3px; border-radius: 4px; background: var(--well); box-shadow: inset 0 1px 3px rgba(0,0,0,.85), 0 0 0 1px #2A2E33; margin-left: .4rem; }
.is-rack .mode-l { font-family: var(--label); font-stretch: 75%; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding: 0 5px 0 6px; }
.is-rack .mode-b { font-family: var(--label); font-stretch: 87.5%; font-size: 10.5px; font-weight: 600; color: var(--silk); padding: 7px 9px; border-radius: 2px; transition: color .15s ease, background-color .15s ease; }
.is-rack .mode-b .ico { width: 14px; height: 14px; }
.is-rack .mode-b[aria-pressed="true"] { color: #fff; background: linear-gradient(180deg, #3B3F46, #2A2D33); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 #000; }
.is-rack .mode-b[aria-pressed="true"] .ico { color: var(--led-g); filter: drop-shadow(0 0 4px rgba(70,240,142,.6)); }
@media (hover: hover) and (pointer: fine) { .is-rack .mode-b[aria-pressed="false"]:hover { color: #fff; background: rgba(255,255,255,.05); } }

/* message de session : la version classique existe */
.is-rack .mode-hint {
  position: absolute; z-index: 70; top: calc(100% + 10px); right: var(--gutter); width: min(360px, calc(100vw - 2 * var(--gutter)));
  padding: 15px 16px 14px; border-radius: 5px;
  background: linear-gradient(180deg, #EFEBE1, #E0DBCD); color: #1B1C20;
  box-shadow: 0 24px 50px -16px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.7);
  transform-origin: var(--ax, 85%) 0;
}
.is-rack .mode-hint[hidden] { display: none; }
.is-rack .mode-hint.in { animation: hint-in .26s var(--ease-out); }
@keyframes hint-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.is-rack .mode-hint::before { content: ""; position: absolute; top: -6px; left: var(--ax, 85%); width: 12px; height: 12px; margin-left: -6px; background: #EFEBE1; transform: rotate(45deg); box-shadow: -1px -1px 0 rgba(0,0,0,.35); }
.is-rack .mh-k { display: flex; align-items: center; gap: 8px; font-family: var(--label); font-stretch: 87.5%; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #4A4C52; padding-right: 26px; }
.is-rack .mh-k i { width: 7px; height: 7px; border-radius: 50%; background: #0E9F5A; box-shadow: 0 0 0 3px rgba(14,159,90,.18); flex: none; }
.is-rack .mh-t { font-family: var(--label); font-stretch: 87.5%; font-size: 14.5px; line-height: 1.3; color: #15161A; margin: 8px 0 6px; letter-spacing: -.01em; }
.is-rack .mh-d { font-size: 13.5px; line-height: 1.5; color: #2E3036; }
.is-rack .mh-b { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.is-rack .mh-b .btn { padding: 9px 12px; font-size: 11px; }
.is-rack .mh-b .btn:not(.btn--hot) { color: #1B1C20; background: linear-gradient(180deg, #FAF8F2, #E4DFD2); border-color: rgba(0,0,0,.25); box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(0,0,0,.25); }
.is-rack .mh-x { position: absolute; top: 7px; right: 7px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; color: #3A3B40; cursor: pointer; }
.is-rack .mh-x:hover { background: rgba(0,0,0,.07); }
.is-rack .mode-hint :focus-visible { outline-color: #0B6E63; }

.is-rack .site-footer { border-top: 1px solid var(--seam); background: #0D0E11; }
.is-rack .foot p { color: var(--dim); font-size: .9rem; }
.is-rack .foot h2 { font-family: var(--label); font-stretch: 87.5%; font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-bottom: .8rem; }
.is-rack .foot a { color: var(--soft); font-size: .92rem; }
.is-rack .foot-bar span { font-family: var(--label); font-stretch: 87.5%; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
@media (hover: hover) and (pointer: fine) { .is-rack .foot a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--hot); text-underline-offset: 3px; } }

/* ============================================================
   ÉLÉMENTS DE BAIE COMMUNS (oreilles, façades)
   ============================================================ */
.is-rack .ru { position: relative; display: flex; height: calc(var(--h) * var(--u)); border-bottom: 1px solid var(--seam); color: var(--ink); }
.is-rack .ear {
  position: relative; display: block; width: var(--ear); flex: none;
  background:
    var(--screw) center top / 100% var(--u) repeat-y,
    linear-gradient(90deg, #121417, #23262B 35%, #1D2024 72%, #111316);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.is-rack .ear + .face { box-shadow: inset 1px 0 0 rgba(0,0,0,.6), inset 2px 0 0 rgba(255,255,255,.03); }
.is-rack .grip {
  position: absolute; left: 50%; top: 17%; bottom: 17%; width: 9px; margin-left: -4.5px; border-radius: 5px; z-index: 1;
  background: linear-gradient(90deg, #2C3036, #626870 42%, #3A3E45 70%, #202327);
  box-shadow: 0 3px 5px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 1px #08090A;
}
.is-rack .face {
  position: relative; display: block; flex: 1; min-width: 0;
  background: var(--noise), linear-gradient(180deg, var(--face-hi) 0, var(--face) 3px, var(--face) calc(100% - 3px), var(--face-lo) 100%);
}

/* ============================================================
   ACCUEIL : ÉLÉVATION DE BAIE (11U)
   ============================================================ */
.is-rack .elev {
  --notes: 190px; --rail-l: 34px;
  max-width: 1180px; margin-inline: auto;
  padding: 22px var(--gutter) 26px;
  display: grid; grid-template-columns: var(--notes) minmax(0, 900px); justify-content: center;
}
.is-rack .rack, .is-rack .elev-help { grid-column: 2; }
.is-rack .rack {
  --fr: 10px;
  position: relative; isolation: isolate;
  padding: 0 var(--fr);
  background: linear-gradient(90deg, #0A0B0D, var(--frame) 2.5%, var(--frame) 97.5%, #0A0B0D);
  border-radius: 7px 7px 3px 3px;
  box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.06), 0 46px 60px -40px rgba(0,0,0,.95);
}
.is-rack .rack::after { content: ""; position: absolute; z-index: -1; left: 3%; right: 3%; bottom: -22px; height: 30px; background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.75), transparent); }
.is-rack .rack-cap { height: 24px; display: flex; align-items: center; gap: 10px; padding: 0 4px 0 26px; }
.is-rack .cap-plate { font-family: var(--label); font-weight: 800; font-size: 9px; line-height: 1; letter-spacing: .14em; color: #0E0F11; background: linear-gradient(180deg, #C2C7CE, #7D838B); padding: 3px 6px; border-radius: 2px; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.is-rack .cap-txt { font-family: var(--label); font-stretch: 87.5%; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.is-rack .cap-grille { flex: 1; height: 7px; border-radius: 2px; background: repeating-linear-gradient(90deg, #040506 0 12px, transparent 12px 16px); opacity: .9; }
.is-rack .rack-body { display: grid; grid-template-columns: 22px minmax(0, 1fr) 38px; }
.is-rack .uscale { display: grid; grid-auto-rows: var(--u); margin: 0; }
.is-rack .uscale li { display: flex; align-items: center; justify-content: center; font-family: var(--label); font-stretch: 75%; font-weight: 600; font-size: 8.5px; line-height: 1; color: var(--dim); box-shadow: inset 0 1px 0 rgba(255,255,255,.045); }
.is-rack .rack-plinth { position: relative; height: 24px; background: repeating-linear-gradient(90deg, rgba(0,0,0,.65) 0 6px, transparent 6px 10px) center 8px / 56% 7px no-repeat; }
.is-rack .rack-plinth i { position: absolute; bottom: -7px; width: 38px; height: 8px; background: linear-gradient(180deg, #121417, #08090A); border-radius: 0 0 3px 3px; }
.is-rack .rack-plinth i:first-child { left: 22px; } .is-rack .rack-plinth i:last-child { right: 22px; }
.is-rack .units { display: flex; flex-direction: column; min-width: 0; }
.is-rack .srv-nav ul { margin: 0; }
.is-rack .elev-help { margin-top: 20px; text-align: center; }
.is-rack .elev-help .silk { font-size: 9px; color: var(--dim); }

/* notes d'élévation : une ligne par équipement, reliée à la baie */
.is-rack .note {
  position: absolute; top: 0; bottom: 0; right: calc(100% + var(--rail-l)); width: calc(var(--notes) - 12px);
  display: flex; align-items: center; gap: 9px; pointer-events: none;
}
.is-rack .note-u { flex: none; min-width: 3.4em; font-family: var(--label); font-stretch: 75%; font-size: 9px; letter-spacing: .08em; color: var(--dim); }
.is-rack .note-t { flex: none; font-family: var(--label); font-stretch: 87.5%; font-size: 11px; font-weight: 600; color: var(--soft); letter-spacing: .02em; }
.is-rack .note::after { content: ""; flex: 1; height: 1px; min-width: 10px; margin-right: -12px; background: linear-gradient(90deg, #3A3F46, #5C626A); }
.is-rack .note::before { content: ""; position: absolute; right: -14px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #5C626A; }
.is-rack .srv:hover .note-t, .is-rack .srv:focus-visible .note-t { color: #fff; }

/* ---------- U9–11 : serveur d'identité ---------- */
.is-rack .face.ev { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px) 44px; gap: 18px; align-items: center; padding: 9px 14px 9px 20px; }
.is-rack .ev-id { min-width: 0; }
.is-rack .ev-kick { display: flex; align-items: center; gap: 10px; }
.is-rack .ev-name { font-size: clamp(24px, 1rem + 1vw, 31px); font-stretch: 100%; font-weight: 650; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; color: #F5F2EB; margin: 9px 0 6px; white-space: nowrap; }
.is-rack .ev-role { font-size: 14px; line-height: 1.35; color: var(--soft); }
.is-rack .ev-id .btns { margin-top: 11px; flex-wrap: nowrap; gap: 7px; }
.is-rack .ev-id .btn { padding: 9px 11px; font-size: 11px; }
.is-rack .btn--tag {
  position: absolute; z-index: 8; left: 168px; bottom: -9px; height: 24px; padding: 0 10px 0 8px; gap: 7px;
  font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: #1A1B1F;
  background: linear-gradient(180deg, #ECE8DD, #CDC8BA); border: 0; border-radius: 2px 2px 7px 7px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 3px 6px -2px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.5);
  transition: transform .18s var(--ease-out);
}
.is-rack .ev-id .btn--tag { padding: 0 10px 0 8px; font-size: 9.5px; }
.is-rack .tag-hole { width: 6px; height: 6px; border-radius: 50%; background: #2A2C30; box-shadow: inset 0 1px 1px #000; }
.is-rack .btn--tag[aria-expanded="true"] { transform: translateY(5px); }
.is-rack .btn--tag:active { transform: translateY(3px); }

/* terminal VFD */
.is-rack .ev-panel { min-width: 0; }
.is-rack .vfd {
  position: relative; overflow: hidden; border-radius: 5px; padding: 8px 11px 7px;
  background: radial-gradient(120% 140% at 50% 0%, #062320, var(--vfd-bg) 70%);
  box-shadow: inset 0 0 0 1px #0E2A27, inset 0 3px 14px rgba(0,0,0,.85), 0 0 0 4px #0E1012, 0 0 0 5px #30343A, 0 6px 14px -6px #000;
}
.is-rack .vfd::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(165deg, rgba(255,255,255,.075), transparent 38%); }
.is-rack .vfd::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(rgba(0,0,0,.32) .5px, transparent .9px) 0 0 / 3px 3px; }
.is-rack .vfd-screen { font-family: var(--dot); font-weight: 700; font-size: 14px; line-height: 18px; height: 72px; overflow: hidden; color: var(--vfd); text-shadow: 0 0 6px rgba(111,246,227,.55); letter-spacing: .01em; }
.is-rack .vl { display: block; white-space: nowrap; overflow: hidden; }
.is-rack .vl b { display: inline-block; width: 7.4ch; font-weight: 900; color: #D2FFF9; }
.is-rack .vl.p b { width: 12ch; }
.is-rack .vl.h { color: #D2FFF9; font-weight: 900; }
.is-rack .vl.w { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.is-rack .vl.dim { color: #3FB7A8; text-shadow: 0 0 5px rgba(63,183,168,.4); }
.is-rack .vl.amber { color: #FFC867; text-shadow: 0 0 6px rgba(255,178,30,.45); }
.is-rack .vl.amber b { color: #FFE2A8; }
.is-rack .vl.err { color: #FF8A8A; text-shadow: 0 0 6px rgba(255,82,82,.45); }
.is-rack .caret { display: inline-block; width: .55em; height: .95em; margin-left: 1px; background: var(--vfd); vertical-align: -.1em; box-shadow: 0 0 6px rgba(111,246,227,.7); }
.is-rack .vfd-screen.flick { animation: vfd-flick .12s steps(2) 1; }
@keyframes vfd-flick { 50% { opacity: .55; } }
.is-rack .ev-keys { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.is-rack .key {
  width: 26px; height: 23px; display: grid; place-items: center; flex: none; cursor: pointer;
  border-radius: 3px; border: 1px solid var(--seam); color: var(--soft);
  background: linear-gradient(180deg, #373B42, #26292E);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 2px 0 var(--seam);
  transition: transform .1s var(--ease-out), box-shadow .1s var(--ease-out);
}
.is-rack .key .ico { width: 13px; height: 13px; }
.is-rack .key:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 var(--seam); }
.is-rack .vfd-page { flex: 1; min-width: 0; text-align: center; font-family: var(--label); font-stretch: 87.5%; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--silk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-rack .btn--ping { padding: 6px 10px 6px 9px; font-size: 10.5px; gap: 7px; }
.is-rack .btn--ping[aria-busy="true"] { filter: brightness(.78); cursor: progress; }
.is-rack .btn--ping[aria-busy="true"] .led { animation: ping-blink .32s steps(2) infinite; }
@keyframes ping-blink { 50% { background: var(--led-off); box-shadow: none; } }
.is-rack .ev-ctl { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; padding: 2px 0 0 11px; border-left: 1px solid #2E3238; }
.is-rack .pwr { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--dim); background: radial-gradient(circle at 40% 35%, #3A3F46, #1E2125 70%); box-shadow: 0 0 0 1px var(--seam), 0 0 0 3px #17191C, 0 0 0 4px #33373D; margin: 2px 0 2px 2px; transition: color .4s ease .25s, filter .4s ease .25s; }
.is-rack .pwr .ico { width: 13px; height: 13px; }
.is-rack .rack.is-on .pwr { color: var(--led-g); filter: drop-shadow(0 0 4px rgba(70,240,142,.6)); }
.is-rack .ev-ctl .upl { position: absolute; right: 26px; top: calc(2.5 * var(--u) - 6px); }
.is-rack .ru--ev.rx .led[data-uid] { background: var(--led-b); box-shadow: 0 0 5px rgba(74,167,255,.95); transition-duration: .05s; }

/* fiche profil sortie de la façade */
.is-rack .ev-tag { position: absolute; z-index: 9; top: calc(100% + 10px); left: var(--ear); right: var(--ear); }
.is-rack .ev-tag[hidden] { display: none; }
.is-rack .ev-tag-in {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 26px;
  padding: 22px 26px; border-radius: 4px;
  background: linear-gradient(180deg, #EFEBE1, #E2DDD0); color: #1B1C20;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.7);
  transform-origin: 40px 0; animation: tag-out .22s var(--ease-out);
}
@keyframes tag-out { from { opacity: 0; transform: translateY(-8px) scaleY(.96); } }
.is-rack .ev-tag-txt h2 { font-family: var(--label); font-stretch: 87.5%; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #3A3B40; margin-top: 14px; }
.is-rack .ev-tag-txt h2:first-child { margin-top: 0; }
.is-rack .ev-tag-txt p { font-size: 14.5px; line-height: 1.55; color: #24262B; margin-top: 4px; }
.is-rack .ev-tag .spec { background: rgba(0,0,0,.05); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.is-rack .ev-tag .spec-t, .is-rack .ev-tag .spec dt { color: #5B5E66; }
.is-rack .ev-tag .spec dd, .is-rack .ev-tag .spec dd a { color: #1B1C20; }
.is-rack .ev-tag .spec dl > div { border-top-color: rgba(0,0,0,.14); }
.is-rack .tag-close { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; color: #3A3B40; cursor: pointer; }
.is-rack .tag-close:hover { background: rgba(0,0,0,.07); }
.is-rack .ev-tag :focus-visible { outline-color: #0B6E63; }

/* ---------- U8 : commutateur 8 ports ---------- */
.is-rack .face.sw8 { display: flex; align-items: center; gap: 14px; padding: 0 12px; background: var(--noise), linear-gradient(180deg, #25282D 0, #1B1D21 4px, #1B1D21 calc(100% - 3px), #141518); }
.is-rack .sw8-l { display: flex; align-items: center; gap: 10px; flex: none; }
.is-rack .sw8-grille { flex: 1; height: 18px; border-radius: 2px; background: repeating-linear-gradient(90deg, #07080A 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); opacity: .9; }
.is-rack .sw8-sys { display: flex; flex-direction: column; gap: 4px; flex: none; }
.is-rack .sw8-ports { display: grid; grid-template-columns: repeat(8, 22px); flex: none; padding: 4px 6px; border-radius: 2px; background: rgba(0,0,0,.25); box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.is-rack .sw8-sfp { display: flex; gap: 6px; flex: none; margin-right: 18px; }

/* ---------- U2–7 : serveurs 1U (un par section) ---------- */
.is-rack .srv { text-decoration: none; transition: filter .18s ease; }
.is-rack .face.s1 { display: grid; grid-template-columns: 70px 150px minmax(0, 1fr) auto auto 30px; align-items: center; gap: 14px; padding: 0 0 0 12px; }
.is-rack .s-tag { display: flex; }
.is-rack .s-deco { display: flex; align-items: center; height: 30px; padding: 0 7px; border-radius: 2px; background: #0B0C0F; box-shadow: inset 0 1px 3px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.04); overflow: hidden; }
.is-rack .s-txt { display: flex; flex-direction: column; justify-content: center; min-width: 0; gap: 1px; }
.is-rack .s-t { font-family: var(--label); font-stretch: 87.5%; font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-rack .s-m { display: flex; align-items: center; gap: 7px; font-size: 12px; line-height: 1.25; color: var(--silk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-rack .s-leds { display: flex; gap: 5px; }
.is-rack .s-leds .led { width: 5px; height: 5px; }
.is-rack .s-go { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 3px; font-family: var(--label); font-stretch: 87.5%; font-size: 10.5px; font-weight: 650; color: var(--silk); background: linear-gradient(180deg, #2E3237, #24272C); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px var(--seam); transition: background-color .15s ease, color .15s ease; }
.is-rack .s-go .ico { width: 13px; height: 13px; transition: transform .18s var(--ease-out); }
.is-rack .face.s1 > .upl { justify-self: center; }
.is-rack .srv:focus-visible { outline-offset: -2px; }
.is-rack .srv:focus-visible .s-go { color: var(--hot-ink); background: linear-gradient(180deg, #FF7B46, #EC4E10); }
.is-rack .srv:focus-visible .led.b, .is-rack .srv.rx .led.b { background: var(--led-b); box-shadow: 0 0 5px rgba(74,167,255,.95), 0 0 14px rgba(74,167,255,.45); }
.is-rack .srv.rx .face, .is-rack .ru--gw.rx .face { box-shadow: inset 0 0 0 1px rgba(111,246,227,.35), inset 0 0 18px -6px rgba(111,246,227,.35); }
.is-rack .srv.is-err .face, .is-rack .ru--gw.is-err .face, .is-rack .ru--ev.is-err .face { box-shadow: inset 0 0 0 1px rgba(255,82,82,.6); }
@media (hover: hover) and (pointer: fine) {
  .is-rack .srv:hover { filter: brightness(1.08); }
  .is-rack .srv:hover .s-go { color: var(--hot-ink); background: linear-gradient(180deg, #FF7B46, #EC4E10); }
  .is-rack .srv:hover .s-go .ico { transform: translateX(3px); }
  .is-rack .srv:hover .led.b { background: var(--led-b); box-shadow: 0 0 5px rgba(74,167,255,.95), 0 0 14px rgba(74,167,255,.45); }
}

/* décors des serveurs : chacun montre ce qu'il contient */
.is-rack .mini-sleds { display: flex; align-items: center; gap: 2px; height: 100%; }
.is-rack .mini-sleds i { position: relative; width: 9px; height: 22px; border-radius: 1px; background: linear-gradient(180deg, #2F3338, #23262A); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.is-rack .mini-sleds i::before { content: ""; position: absolute; top: 3px; left: 50%; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--led-off); transition: background-color .3s ease; }
.is-rack .is-on .mini-sleds i::before { background: var(--led-g); box-shadow: 0 0 3px rgba(70,240,142,.8); }
.is-rack .mini-sleds i::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 3px; height: 2px; border-radius: 1px; background: #D9470F; }
.is-rack .mini-sleds b { width: 6px; }
.is-rack .mini-sleds--wide i { width: 26px; }
.is-rack .mini-keys { display: grid; grid-template-columns: repeat(12, 7px); grid-auto-rows: 7px; gap: 3px; }
.is-rack .mini-keys i { border-radius: 1px; background: var(--c); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.35); }
.is-rack .mini-keys i.off { background: #2A2D32; }
.is-rack .mini-lcd { font-family: var(--dot); font-weight: 800; font-size: 14px; letter-spacing: .12em; color: var(--vfd); text-shadow: 0 0 6px rgba(111,246,227,.55); padding: 0 4px; }
.is-rack .mini-badges { display: flex; gap: 6px; }
.is-rack .mini-badges i { font-style: normal; font-family: var(--dot); font-weight: 800; font-size: 11px; color: var(--led-g); text-shadow: 0 0 5px rgba(70,240,142,.5); padding: 3px 6px; border-radius: 2px; background: #071209; box-shadow: inset 0 0 0 1px #12301C; }

/* ---------- U1 : routeur de sortie (contact) ---------- */
.is-rack .face.gw { grid-template-columns: 70px minmax(0, 1fr) auto 30px; }
.is-rack .ifs { display: flex; gap: 5px; margin: 0; }
.is-rack .if {
  display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px 0 7px; border-radius: 3px; white-space: nowrap;
  font-family: var(--label); font-stretch: 87.5%; font-size: 11px; font-weight: 600; color: var(--ink);
  background: var(--well); box-shadow: inset 0 1px 2px rgba(0,0,0,.7), 0 0 0 1px #2C3035;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.is-rack .if-jack { position: relative; display: block; }
.is-rack .if-jack .jack { width: 14px; height: 11px; }
.is-rack .if-jack .led { position: absolute; top: -4px; right: -4px; width: 4px; height: 4px; }
.is-rack .gw .if-n { display: none; }
.is-rack .if:focus-visible { box-shadow: inset 0 1px 2px rgba(0,0,0,.7), 0 0 0 1px #000, 0 0 0 2px rgba(74,167,255,.6); }
@media (hover: hover) and (pointer: fine) { .is-rack .if:hover { background: #181B1F; box-shadow: inset 0 1px 2px rgba(0,0,0,.7), 0 0 0 1px #000, 0 0 0 2px rgba(74,167,255,.6); } }

/* ---------- câbles, fibres et paquets ---------- */
.is-rack .wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; overflow: visible; }
.is-rack .wires path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.is-rack .wires .sh { stroke: rgba(0,0,0,.72); stroke-width: 4.6; }
.is-rack .wires .cord { stroke-width: 2.6; transition: stroke-width .15s ease; }
.is-rack .wires .cord--srv { stroke: #3D6FC2; stroke-width: 2.2; }
.is-rack .wires .glow { stroke-width: 8; opacity: 0; transition: opacity .15s ease; }
.is-rack .wires .on .glow { opacity: .35; }
.is-rack .wires .on .cord { stroke-width: 3; }
.is-rack .wires .on .cord--srv { stroke: #7FB2FF; }
.is-rack .wires .dim { opacity: .38; transition: opacity .2s ease; }
.is-rack .wires .fiber { stroke: var(--fiber); stroke-width: 2.2; }
.is-rack .wires .fiber-sh { stroke: rgba(0,0,0,.75); stroke-width: 4.2; }
.is-rack .wires .boot { stroke: rgba(0,0,0,.6); stroke-width: 1; }
.is-rack .vmgr { position: relative; background: linear-gradient(90deg, #070809, #101215 45%, #070809); box-shadow: inset 1px 0 0 #000, inset -1px 0 0 #000; }
.is-rack .vmgr::after { /* doigts de rangement, au-dessus des câbles */
  content: ""; position: absolute; z-index: 6; inset: 0 3px 0 2px; pointer-events: none;
  background: linear-gradient(90deg, #1E2125, #34383E 45%, #24272C 80%, #1A1C20) 0 calc(var(--u) / 2 + 7px) / 100% var(--u) repeat-y;
  -webkit-mask: linear-gradient(180deg, #000 0 calc(var(--u) - 14px), transparent calc(var(--u) - 14px)) 0 calc(var(--u) / 2 + 7px) / 100% var(--u) repeat-y;
  mask: linear-gradient(180deg, #000 0 calc(var(--u) - 14px), transparent calc(var(--u) - 14px)) 0 calc(var(--u) / 2 + 7px) / 100% var(--u) repeat-y;
  filter: drop-shadow(0 1px 0 #000);
}

/* écrans moyens : la colonne de notes disparaît */
@media (max-width: 1180px) {
  .is-rack .elev { grid-template-columns: minmax(0, 900px); }
  .is-rack .rack, .is-rack .elev-help { grid-column: 1; }
  .is-rack .note { display: none; }
}

/* mobile : la baie se replie en modules lisibles */
@media (max-width: 899px) {
  .is-rack .elev { padding: 12px 10px 18px; }
  .is-rack .rack { --fr: 6px; }
  .is-rack .rack-cap { padding-left: 6px; }
  .is-rack .rack-body { grid-template-columns: minmax(0, 1fr); }
  .is-rack .uscale, .is-rack .vmgr, .is-rack .wires, .is-rack .ru--sw8, .is-rack .ev-ctl, .is-rack .s-deco, .is-rack .s-leds, .is-rack .face.s1 > .upl, .is-rack .elev-help { display: none !important; }
  .is-rack .ru { height: auto; }
  .is-rack .ear { --ear: 14px; width: 14px; background: var(--screw) center 50% / 100% 24px no-repeat, linear-gradient(90deg, #121417, #23262B 35%, #1D2024 72%, #111316); }
  .is-rack .ru--ev .ear { background: var(--screw) center 8px / 100% 24px no-repeat, var(--screw) center calc(100% - 8px) / 100% 24px no-repeat, linear-gradient(90deg, #121417, #23262B 35%, #1D2024 72%, #111316); }
  .is-rack .grip { display: none; }
  .is-rack .face.ev { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px 14px 26px; }
  .is-rack .ev-name { white-space: normal; font-size: clamp(26px, 8vw, 34px); }
  .is-rack .ev-id .btns { flex-wrap: wrap; }
  .is-rack .btn--tag { left: 14px; }
  .is-rack .ev-tag { left: 0; right: 0; }
  .is-rack .ev-tag-in { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; gap: 18px; }
  .is-rack .vfd-screen { font-size: 13px; line-height: 17px; height: 68px; }
  .is-rack .face.s1 { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 12px 12px; min-height: 58px; }
  .is-rack .s-go { padding: 0 9px; }
  .is-rack .s-t, .is-rack .s-m { white-space: normal; }
  .is-rack .face.gw { grid-template-columns: auto minmax(0, 1fr); }
  .is-rack .gw .ifs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .is-rack .gw .if { height: 38px; }
  .is-rack .gw .if-n { display: inline; font-size: 9px; color: var(--dim); font-weight: 500; }
  .is-rack .face.gw > .upl { display: none; }
}
@media (max-width: 420px) {
  .is-rack .s-go { font-size: 0; gap: 0; padding: 0 8px; }
  .is-rack .s-go .ico { width: 15px; height: 15px; }
  .is-rack .brand-name { display: none; }
}

/* ============================================================
   PAGES INTÉRIEURES
   ============================================================ */
.is-rack .pg {
  position: relative; max-width: 1150px; margin-inline: auto;
  padding: 1.4rem calc(var(--gutter) + 26px + .5rem) 3.2rem;
  background: linear-gradient(90deg, transparent var(--gutter), var(--frame) var(--gutter), var(--frame) calc(100% - var(--gutter)), transparent calc(100% - var(--gutter)));
}
.is-rack .pg::before, .is-rack .pg::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 26px;
  background:
    repeating-linear-gradient(180deg, transparent 0 6px, #040506 6px 15px, transparent 15px 22px) center / 9px 100% no-repeat,
    linear-gradient(90deg, #2A2E33, #1E2125 30%, #15171A);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5);
}
.is-rack .pg::before { left: var(--gutter); }
.is-rack .pg::after { right: var(--gutter); }

.is-rack .u {
  position: relative; display: block; margin-bottom: 4px;
  padding: clamp(1.1rem, .8rem + 1.2vw, 1.8rem) calc(var(--ear) + clamp(.9rem, .5rem + 1.5vw, 1.9rem));
  background: var(--noise), linear-gradient(180deg, var(--face-hi) 0, var(--face) 4px, var(--face) calc(100% - 4px), var(--face-lo) 100%);
  border-radius: 3px; color: var(--ink);
  box-shadow: 0 0 0 1px var(--seam), inset 0 1px 0 rgba(255,255,255,.06), 0 14px 26px -20px #000;
}
.is-rack .u-ears {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    var(--screw) left 0 top 4px / var(--ear) var(--ear) no-repeat,
    var(--screw) left 0 bottom 4px / var(--ear) var(--ear) no-repeat,
    var(--screw) right 0 top 4px / var(--ear) var(--ear) no-repeat,
    var(--screw) right 0 bottom 4px / var(--ear) var(--ear) no-repeat,
    linear-gradient(90deg, #15171A, #23262B calc(var(--ear) * .4), #1C1F23 calc(var(--ear) - 1px), rgba(0,0,0,.55) calc(var(--ear) - 1px) var(--ear), transparent var(--ear) calc(100% - var(--ear)), rgba(0,0,0,.55) calc(100% - var(--ear)) calc(100% - var(--ear) + 1px), #1C1F23 calc(100% - var(--ear) + 1px), #23262B calc(100% - var(--ear) * .4), #15171A);
}
.is-rack .u-tag { position: absolute; top: 14px; right: calc(var(--ear) + 14px); font-family: var(--label); font-stretch: 75%; font-weight: 700; font-size: 9.5px; letter-spacing: .09em; color: var(--tape-ink); background: linear-gradient(180deg, #FCF9F1, var(--tape) 45%, #E1DCCE); padding: 4px 8px 3px; transform: rotate(-.7deg); clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 50%, 100% 100%, 0 100%, 3px 50%); }
.is-rack .leds { display: flex; gap: 5px; }

/* pile d'équipements dans une page (châssis, brassage) */
.is-rack .ru-stack { --u: 46px; position: relative; isolation: isolate; margin-bottom: 4px; border-radius: 3px; box-shadow: 0 0 0 1px var(--seam), 0 14px 26px -20px #000; }
.is-rack .ru-stack .ru:last-of-type { border-bottom: 0; }

/* en-tête de page */
.is-rack .phead { padding-block: clamp(1.6rem, 1rem + 2.4vw, 3rem); }
.is-rack .phead-in { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.is-rack .phead h1 { font-size: clamp(1.75rem, 1rem + 2.9vw, 3.1rem); font-stretch: 87.5%; line-height: 1.08; max-width: 24ch; color: #F5F2EB; }
.is-rack .phead .lead { font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); color: var(--soft); max-width: 60ch; line-height: 1.6; }
.is-rack .back { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--label); font-stretch: 87.5%; font-size: 11px; color: var(--silk); padding: .4rem .6rem .4rem .45rem; border-radius: 3px; background: var(--well); box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.is-rack .kick { display: flex; flex-wrap: wrap; gap: 6px; }
.is-rack .kick span { font-family: var(--label); font-stretch: 87.5%; font-size: 10.5px; letter-spacing: .03em; color: var(--silk); padding: .28rem .55rem; border-radius: 2px; background: var(--well); box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.is-rack .kick span:first-child { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .is-rack .back:hover { color: #fff; } }

/* tiroir de contenu */
.is-rack .doc {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: clamp(1.5rem, 1rem + 3vw, 3.4rem); align-items: start;
  margin: 4px 0; padding: clamp(1.5rem, 1rem + 2.5vw, 2.9rem) clamp(1.3rem, .6rem + 3vw, 3.3rem);
  background: #18191D; border-radius: 3px; box-shadow: 0 0 0 1px var(--seam), inset 0 1px 0 rgba(255,255,255,.04);
}
.is-rack .doc::before, .is-rack .doc::after { content: ""; position: absolute; top: 10px; bottom: 10px; width: 5px; border-radius: 2px; background: repeating-linear-gradient(180deg, #2C3036 0 18px, #0E0F11 18px 22px); }
.is-rack .doc::before { left: 8px; } .is-rack .doc::after { right: 8px; }
.is-rack .doc .spec { position: sticky; top: 84px; }

/* plaque signalétique */
.is-rack .spec { background: var(--well); border-radius: 3px; box-shadow: inset 0 1px 4px rgba(0,0,0,.7), 0 0 0 1px #2B2F35; padding: .3rem 1rem .4rem; }
.is-rack .spec-t { font-family: var(--label); font-stretch: 87.5%; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--silk); padding: .75rem 0 .25rem; }
.is-rack .spec dl > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .8rem; padding: .65rem 0; border-top: 1px dashed #2F3338; align-items: baseline; }
.is-rack .spec dl > div:first-child { border-top: 0; }
.is-rack .spec dt { font-family: var(--label); font-stretch: 87.5%; font-size: 10.5px; color: var(--dim); }
.is-rack .spec dd { font-size: .95rem; font-weight: 500; line-height: 1.5; color: var(--ink); }
.is-rack .spec dd a { color: #fff; text-decoration: underline; text-decoration-color: var(--hot); text-underline-offset: 3px; }
.is-rack .chips { display: flex; flex-wrap: wrap; gap: 5px; }
.is-rack .chip { font-family: var(--label); font-stretch: 87.5%; font-size: 10px; color: var(--silk); padding: .22rem .5rem; border-radius: 2px; background: var(--well); box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.is-rack .spec .chip { background: #16181B; }

/* texte long */
.is-rack .prose { color: #D7D9DD; }
.is-rack .prose h2 { font-size: clamp(1.12rem, 1rem + .6vw, 1.42rem); font-stretch: 87.5%; margin-top: 2.5rem; padding-top: 1.35rem; border-top: 1px solid #2B2F35; color: var(--ink); }
.is-rack .prose h3 { font-size: clamp(1rem, .95rem + .3vw, 1.13rem); font-stretch: 87.5%; margin-top: 2rem; color: var(--ink); }
.is-rack .prose > h2:first-child, .is-rack .prose > h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.is-rack .prose li::marker { color: var(--hot); }
.is-rack .prose a:not([class]) { color: #fff; text-decoration: underline; text-decoration-color: var(--hot); text-underline-offset: 3px; }
.is-rack .prose code { font-family: var(--label); font-stretch: 87.5%; font-size: .8em; padding: .12em .4em; border-radius: 2px; background: var(--well); color: var(--vfd); box-shadow: inset 0 1px 2px rgba(0,0,0,.6); overflow-wrap: anywhere; }
.is-rack .prose figcaption, .is-rack .fine { font-family: var(--label); font-stretch: 87.5%; font-size: 10.5px; color: var(--silk); }
.is-rack .shot { display: block; background: #0C0D0F; padding: 7px; border-radius: 4px; box-shadow: 0 0 0 1px #33373D, inset 0 0 0 1px #000; }
.is-rack .shot img { border-radius: 2px; width: 100%; }
.is-rack .gallery a { transition: transform .18s var(--ease-out); }
.is-rack .callout { padding: 1rem 1.2rem; border-radius: 3px; background: var(--well); box-shadow: inset 0 1px 3px rgba(0,0,0,.6); border-left: 2px solid var(--led-a); }
.is-rack .callout-t { display: flex; align-items: center; gap: .55rem; font-family: var(--label); font-stretch: 87.5%; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--silk); }
.is-rack .callout p:last-child { color: var(--ink); margin-top: .35rem; }
@media (hover: hover) and (pointer: fine) { .is-rack .gallery a:hover { transform: translateY(-3px); } }

/* tiroirs de documents */
.is-rack .sleds { display: flex; flex-direction: column; gap: 4px; }
.is-rack .sled { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .65rem .7rem; border-radius: 2px; background: linear-gradient(180deg, #282B31, #1F2226); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px var(--seam); transition: transform .18s var(--ease-out); }
.is-rack .sled-ic { font-family: var(--label); font-stretch: 75%; font-weight: 700; font-size: 9px; letter-spacing: .08em; color: var(--tape-ink); background: linear-gradient(180deg, #FCF9F1, var(--tape) 45%, #E1DCCE); padding: 4px 6px 3px; border-radius: 1px; }
.is-rack .sled-tx b { display: block; font-weight: 600; font-size: .97rem; line-height: 1.35; color: var(--ink); }
.is-rack .sled-tx span { display: block; margin-top: .12rem; font-family: var(--label); font-stretch: 87.5%; font-size: 10.5px; color: var(--silk); overflow-wrap: anywhere; }
.is-rack .sled-go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 3px; color: var(--silk); background: linear-gradient(180deg, #2A2E33, #22252A); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px var(--seam); transition: background-color .18s ease, color .18s ease; }
@media (hover: hover) and (pointer: fine) {
  .is-rack .sled:hover { transform: translateX(5px); }
  .is-rack .sled:hover .sled-go { color: var(--hot-ink); background: linear-gradient(180deg, #FF7B46, #EC4E10); }
}

/* listes de serveurs (projets, veilles, certifications) */
.is-rack .grp-list { margin-top: clamp(2.2rem, 1.5rem + 2vw, 3.4rem); }
.is-rack .list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem 2rem; flex-wrap: wrap; padding: 0 .2rem 1rem; }
.is-rack .list-head h2 { font-size: clamp(1.45rem, 1rem + 1.6vw, 2.2rem); font-stretch: 87.5%; }
.is-rack .list-head p { color: var(--dim); font-size: .95rem; max-width: 46ch; }
.is-rack .items { display: flex; flex-direction: column; gap: 4px; }
.is-rack .item { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr) auto; gap: .6rem clamp(1rem, .6rem + 1.5vw, 2rem); align-items: center; transition: transform .2s var(--ease-out); }
.is-rack .item-id { display: flex; flex-direction: column; gap: .45rem; align-self: stretch; justify-content: center; padding-right: 1rem; border-right: 1px solid #33373D; }
.is-rack .item-id b { font-family: var(--label); font-stretch: 75%; font-weight: 750; font-size: 1.15rem; line-height: 1; }
.is-rack .item-id > span:not(.leds), .is-rack .item-id time + span { font-family: var(--label); font-stretch: 87.5%; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--silk); }
.is-rack .item-id time { font-family: var(--dot); font-weight: 800; font-size: 14px; line-height: 1.1; white-space: nowrap; color: var(--vfd); text-shadow: 0 0 6px rgba(111,246,227,.45); }
.is-rack .item--log { grid-template-columns: 8.4rem minmax(0, 1fr) auto; }
.is-rack .item-main { min-width: 0; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.is-rack .item-cat { font-family: var(--label); font-stretch: 87.5%; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--silk); }
.is-rack .item-t { font-size: clamp(.95rem, .88rem + .35vw, 1.13rem); font-stretch: 87.5%; line-height: 1.3; color: var(--ink); }
.is-rack .item-p { color: var(--soft); font-size: .95rem; line-height: 1.6; }
.is-rack .item-go { display: flex; align-items: center; gap: .5rem; align-self: stretch; padding: 0 1rem; border-radius: 3px; font-family: var(--label); font-stretch: 87.5%; font-size: 11px; font-weight: 650; color: var(--silk); background: linear-gradient(90deg, #2A2E33, #22252A); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px var(--seam); transition: background-color .2s ease, color .2s ease; }
.is-rack a.item:focus-visible .item-go { color: var(--hot-ink); background: linear-gradient(180deg, #FF7B46, #EC4E10); }
@media (hover: hover) and (pointer: fine) {
  .is-rack a.item:hover { transform: translateY(-2px); }
  .is-rack a.item:hover .item-go { color: var(--hot-ink); background: linear-gradient(180deg, #FF7B46, #EC4E10); }
}
.is-rack .item--cert { grid-template-columns: auto minmax(0, 1fr); }
.is-rack .cert-img { display: block; width: clamp(92px, 70px + 6vw, 140px); background: #F4F2EC; padding: 7px; border-radius: 4px; box-shadow: 0 0 0 1px #33373D; }
.is-rack .item--cert .item-t { font-size: clamp(1.02rem, .9rem + .6vw, 1.35rem); }
.is-rack .ok { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--label); font-stretch: 87.5%; font-size: 11.5px; color: var(--led-g); }
.is-rack .items--cert { gap: 4px; margin-top: 4px; }

/* bloc d'introduction (veilles) */
.is-rack .intro-in { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 3.4rem); align-items: start; }
.is-rack .intro h2 { font-size: 12px; font-stretch: 87.5%; letter-spacing: .07em; text-transform: uppercase; color: var(--silk); margin-bottom: .8rem; }
.is-rack .intro p { font-size: clamp(1.02rem, 1rem + .2vw, 1.12rem); color: var(--soft); line-height: 1.65; }

/* chiffres clés (afficheur) */
.is-rack .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 1.6rem; padding: .9rem 1.2rem; border-radius: 5px; background: radial-gradient(120% 140% at 50% 0%, #062320, var(--vfd-bg) 70%); box-shadow: inset 0 0 0 1px #0E2A27, inset 0 3px 14px rgba(0,0,0,.85), 0 0 0 4px #0E1012, 0 0 0 5px #30343A; font-family: var(--dot); color: var(--vfd); text-shadow: 0 0 6px rgba(111,246,227,.5); }
.is-rack .stats > div { display: flex; gap: .9rem; align-items: baseline; padding: .3rem 0; }
.is-rack .stats dt { flex: none; width: 8.5ch; font-weight: 900; font-size: 15px; text-transform: uppercase; color: #D2FFF9; }
.is-rack .stats dd { font-weight: 700; font-size: 15px; line-height: 1.3; }

/* écran (CV) */
.is-rack .screen { margin: 4px 0; padding: 10px; border-radius: 6px; background: linear-gradient(180deg, #1B1D21, #121316); box-shadow: 0 0 0 1px var(--seam), inset 0 1px 0 rgba(255,255,255,.05), 0 20px 40px -26px #000; }
.is-rack .screen .pdf-frame { border-radius: 3px; }
.is-rack .pdf-fallback { padding: 1rem; color: #222; }
.is-rack .pdf-mobile { margin: 4px 0; padding: 1rem 1.2rem; border-radius: 3px; background: #18191D; color: var(--soft); font-size: .95rem; }

/* contact */
.is-rack .contact { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 4px 1rem; align-items: start; }
.is-rack .ifaces { display: flex; flex-direction: column; gap: 4px; }
.is-rack .iface { display: grid; grid-template-columns: auto auto 3.4rem minmax(0, 1fr) auto; gap: .9rem; align-items: center; transition: transform .2s var(--ease-out); }
.is-rack .iface .if-jack .jack { width: 20px; height: 16px; }
.is-rack .iface .if-jack .led { position: absolute; top: -7px; left: 50%; right: auto; margin-left: -3px; width: 6px; height: 6px; }
.is-rack .if-ic { color: var(--silk); }
.is-rack .iface .if-n { font-family: var(--label); font-stretch: 75%; font-weight: 700; font-size: 12px; color: var(--dim); }
.is-rack .if-tx b { display: block; font-weight: 600; font-size: 1.02rem; }
.is-rack .if-tx span { display: block; font-family: var(--label); font-stretch: 87.5%; font-size: 11px; color: var(--silk); overflow-wrap: anywhere; }
.is-rack .if-go { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 3px; color: var(--silk); background: linear-gradient(180deg, #2A2E33, #22252A); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px var(--seam); }
.is-rack .portrait { margin: 0; padding: 1.1rem calc(var(--ear) + 1.1rem); }
.is-rack .portrait img { border-radius: 3px; width: 100%; box-shadow: 0 0 0 1px #000; }
.is-rack .portrait.img-err { min-height: 320px; background: #121417; }
@media (hover: hover) and (pointer: fine) {
  .is-rack a.iface:hover { transform: translateY(-2px); }
  .is-rack a.iface:hover .if-go { color: var(--hot-ink); background: linear-gradient(180deg, #FF7B46, #EC4E10); }
}

/* précédent / suivant */
.is-rack .pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; margin-top: 4px; }
.is-rack .pager a { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.2rem; border-radius: 2px; background: linear-gradient(180deg, #24272C, #1C1E22); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px var(--seam); transition: transform .2s var(--ease-out); }
.is-rack .pager a span { font-family: var(--label); font-stretch: 87.5%; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--silk); }
.is-rack .pager a b { font-family: var(--label); font-stretch: 87.5%; font-size: 13px; line-height: 1.35; }
.is-rack .pager a.next { text-align: right; align-items: flex-end; }
@media (hover: hover) and (pointer: fine) { .is-rack .pager a:hover { transform: translateY(-2px); } }

/* appel à l'action */
.is-rack .cta { margin-top: 4px; }
.is-rack .cta-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.4rem 2.4rem; align-items: center; }
.is-rack .cta h2 { font-size: clamp(1.45rem, 1rem + 2vw, 2.4rem); font-stretch: 87.5%; }
.is-rack .avail { display: flex; align-items: center; gap: .6rem; margin-top: .75rem; color: var(--soft); font-size: .95rem; }

/* ============================================================
   PAGE PROJETS : châssis de lames (vue de face)
   ============================================================ */
.is-rack .ru--bl .face { display: flex; gap: 8px; padding: 6px 8px 7px; background: var(--noise), linear-gradient(180deg, #1D2024, #15171A); }
.is-rack .bl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.is-rack .bl-strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 4px; height: 15px; padding-inline: 3px; }
.is-rack .bl-strip span { position: relative; text-align: center; font-family: var(--label); font-stretch: 87.5%; font-weight: 600; font-size: 8.5px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--silk); padding-top: 5px; border-top: 1px solid #454A51; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-rack .bl-strip span::before, .is-rack .bl-strip span::after { content: ""; position: absolute; top: -1px; width: 1px; height: 4px; background: #454A51; }
.is-rack .bl-strip span::before { left: 0; } .is-rack .bl-strip span::after { right: 0; }
.is-rack .blades { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 4px; padding: 3px; border-radius: 2px; background: #060708; box-shadow: inset 0 2px 6px #000; margin: 0; }
.is-rack .blades > li { min-width: 0; display: flex; }
.is-rack .blade {
  position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center;
  padding: 7px 3px 6px; border-radius: 2px; color: var(--ink);
  background: linear-gradient(180deg, #30343A, #24272C 22%, #202328);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 1px 0 0 rgba(255,255,255,.03), 0 0 0 1px #08090A;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.is-rack .bl-leds { display: flex; gap: 4px; }
.is-rack .bl-leds .led { width: 5px; height: 5px; }
.is-rack .bl-id { margin-top: 7px; font-family: var(--label); font-stretch: 75%; font-weight: 750; font-size: 14px; line-height: 1; color: var(--ink); }
.is-rack .bl-sem { margin-top: 3px; font-family: var(--label); font-stretch: 75%; font-weight: 600; font-size: 9px; line-height: 1; color: var(--dim); }
.is-rack .bl-body { flex: 1; min-height: 0; width: 100%; display: flex; justify-content: center; gap: 4px; margin: 8px 0 7px; overflow: hidden; }
.is-rack .bl-vent { width: 7px; border-radius: 1px; background: repeating-linear-gradient(180deg, #08090B 0 2px, transparent 2px 4.5px); opacity: .9; }
.is-rack .bl-name {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--label); font-stretch: 75%; font-weight: 650; font-size: clamp(8.5px, calc(var(--u) * .19), 10px); line-height: 1.18; letter-spacing: .03em; text-transform: uppercase;
  color: var(--soft); white-space: normal; max-height: 100%;
  padding: 4px 3px; border-radius: 2px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.is-rack .bl-latch { width: 72%; height: 7px; flex: none; border-radius: 2px 2px 3px 3px; background: linear-gradient(180deg, #FF7B46, #D9470F); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 0 #000; }
.is-rack .blade--blank { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 10px 3px; border-radius: 2px; background: repeating-linear-gradient(180deg, #1A1C20 0 3px, #15171A 3px 6px); box-shadow: inset 0 0 0 1px #0B0C0E; }
.is-rack .blade--blank .bl-body { margin: 0; }
.is-rack .blade--blank .bl-name { color: #5A5F66; background: none; box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .is-rack .blade:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px #000, 0 0 0 2px rgba(74,167,255,.6), 0 12px 18px -8px #000; }
  .is-rack .blade:hover .led.b { background: var(--led-b); box-shadow: 0 0 5px rgba(74,167,255,.95), 0 0 14px rgba(74,167,255,.45); }
  .is-rack .blade:hover .bl-name { color: #fff; }
}
.is-rack .bl-icm { width: 62px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 2px; background: linear-gradient(180deg, #26292E, #1C1F23); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px #08090A; }
.is-rack .bl-icm .tape { transform: rotate(-90deg); margin-block: 14px; }
@media (max-width: 700px) { .is-rack .ru-stack:not([data-patch]) { display: none; } }

/* ============================================================
   PAGE COMPÉTENCES : panneau de brassage + tableau
   ============================================================ */
.is-rack .row3 { --bl: 146px; --br: 112px; display: grid; grid-template-columns: var(--bl) minmax(0, 1fr) var(--br); align-items: center; }
.is-rack .blk-l { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; padding-left: 12px; min-width: 0; }
.is-rack .blk-r { display: flex; align-items: center; justify-content: center; gap: 8px; padding-right: 8px; }
.is-rack .pgrid { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); align-items: center; justify-items: center; padding-inline: 4px; margin: 0; }
.is-rack .ru--sw .face { background: var(--noise), linear-gradient(180deg, #25282D 0, #1B1D21 4px, #1B1D21 calc(100% - 3px), #141518); }
.is-rack .sfps { display: grid; grid-template-columns: repeat(4, 15px); gap: 5px; }
.is-rack .ru--cm .face { background: linear-gradient(180deg, #17191C, #121416); }
.is-rack .cm { position: relative; height: 100%; }
.is-rack .cm::before { content: ""; position: absolute; left: 3px; right: 3px; top: 9px; bottom: 9px; border-radius: 2px; background: #060708; box-shadow: inset 0 2px 6px #000, 0 1px 0 rgba(255,255,255,.04); }
.is-rack .fg { position: relative; width: 100%; height: 100%; }
.is-rack .fg::before, .is-rack .fg::after { content: ""; position: absolute; left: -3px; width: 6px; height: 15px; border-radius: 3px; background: linear-gradient(90deg, #202327, #3A3E44 50%, #1C1F22); box-shadow: 0 1px 0 #000, 0 0 0 1px rgba(0,0,0,.4); }
.is-rack .fg::before { top: 3px; }
.is-rack .fg::after { bottom: 3px; }
.is-rack .fg:first-child::before, .is-rack .fg:first-child::after { display: none; }
.is-rack .brush { width: 80%; height: 16px; border-radius: 2px; background: repeating-linear-gradient(90deg, #0B0C0E 0 1px, #1E2125 1px 2px); box-shadow: inset 0 0 0 1px #2A2D32; }
.is-rack .ru--pp .face { background: var(--noise), linear-gradient(180deg, #282B31 0, #1F2226 4px, #1F2226 calc(100% - 3px), #17191C); }
.is-rack .pp-wrap { display: flex; flex-direction: column; justify-content: center; gap: 3px; height: 100%; }
.is-rack .kpw { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.is-rack .kp { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 3px 2px 2px; border-radius: 3px; transition: background-color .15s ease; }
.is-rack .kp-key { display: grid; place-items: center; width: 19px; height: 16px; border-radius: 2px; background: var(--c); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.65); }
.is-rack .kp-key .jack { width: 13px; height: 10px; box-shadow: inset 0 2px 3px #000; }
.is-rack .kp-key .jack::after { left: 4px; right: 4px; height: 2px; bottom: -1px; }
.is-rack .kp-n { font-family: var(--label); font-stretch: 75%; font-weight: 600; font-size: 7.5px; line-height: 1; color: var(--silk); }
.is-rack .kpw--blank { gap: 3px; padding-top: 3px; }
.is-rack .kpw--blank .kp-key { background: #2A2D32; }
.is-rack .cap { width: 13px; height: 10px; border-radius: 1px; background: linear-gradient(180deg, #17191C, #101113); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.is-rack .kpw--blank .kp-n { color: #4A4F56; }
.is-rack .kp.is-hot { background: rgba(255,255,255,.08); }
.is-rack .kp.is-hot .kp-n { color: #fff; }
.is-rack .brk { height: 3px; }
.is-rack .brk .br { width: calc(100% - 8px); height: 2px; border-radius: 1px; background: var(--c); }
.is-rack .pp-tip {
  position: absolute; z-index: 12; left: 0; top: 0; pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
  display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 4px; white-space: nowrap;
  background: #0B0D10; border: 1px solid #383D44; color: #fff;
  font-family: var(--label); font-stretch: 87.5%; font-size: 11px; font-weight: 600; line-height: 1.3;
  box-shadow: 0 10px 22px -8px rgba(0,0,0,.9);
  opacity: 0; transition: opacity .12s ease;
}
.is-rack .pp-tip.show { opacity: 1; }
.is-rack .pp-tip.instant { transition: none; }
.is-rack .pp-tip i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); flex: none; }
.is-rack .pp-tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; background: #0B0D10; border-right: 1px solid #383D44; border-bottom: 1px solid #383D44; transform: rotate(45deg); }
@media (max-width: 899px) { .is-rack .ru-stack[data-patch] { display: none; } }

/* tableau des compétences (étiquettes de brassage) */
.is-rack .sk-table { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.is-rack .skc { padding-block: 1.2rem 1.25rem; }
.is-rack .skc-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: .55rem; }
.is-rack .skc-head h2 { display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; font-stretch: 87.5%; }
.is-rack .skc-head h2 i { width: 12px; height: 12px; border-radius: 2px; background: var(--c); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.is-rack .skc-n { font-family: var(--label); font-stretch: 87.5%; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--silk); }
.is-rack .skc-list { display: flex; flex-direction: column; margin: 0; }
.is-rack .skr { display: grid; grid-template-columns: 3.6rem minmax(0, 16rem) minmax(0, 1fr); gap: .3rem 1.2rem; align-items: baseline; padding: .6rem; border-top: 1px dashed #2F3338; border-radius: 3px; transition: background-color .15s ease, box-shadow .15s ease; scroll-margin-top: 6rem; }
.is-rack .skr:first-child { border-top-color: transparent; }
.is-rack .skr-port { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--label); font-stretch: 75%; font-weight: 600; font-size: 11px; color: var(--silk); }
.is-rack .skr-key { width: 12px; height: 10px; border-radius: 2px; background: var(--c); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1px rgba(0,0,0,.6); }
.is-rack .skr-name { font-weight: 600; color: var(--ink); line-height: 1.4; }
.is-rack .skr-refs { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.is-rack .skr-refs a { font-size: .92rem; line-height: 1.45; color: var(--soft); text-decoration: underline; text-decoration-color: rgba(255,91,31,.55); text-underline-offset: 3px; }
.is-rack .skr.is-lit, .is-rack .skr:target { background: rgba(74,167,255,.08); box-shadow: inset 2px 0 0 var(--c); }
@media (hover: hover) and (pointer: fine) { .is-rack .skr-refs a:hover { color: #fff; text-decoration-color: var(--hot); } }

/* ============================================================
   RESPONSIVE (pages intérieures)
   ============================================================ */
@media (max-width: 1020px) {
  .is-rack .doc, .is-rack .intro-in, .is-rack .contact { grid-template-columns: minmax(0, 1fr); }
  .is-rack .doc .spec { position: static; }
  .is-rack .portrait { max-width: 420px; }
}
@media (max-width: 760px) {
  .is-rack { --ear: 14px; }
  .is-rack .pg { padding: 1rem .5rem 2.2rem; background: var(--frame); }
  .is-rack .pg::before, .is-rack .pg::after { display: none; }
  .is-rack .u { padding-inline: calc(var(--ear) + .9rem); }
  .is-rack .u-ears { background: var(--screw) left 0 top 2px / var(--ear) var(--ear) no-repeat, var(--screw) right 0 top 2px / var(--ear) var(--ear) no-repeat, var(--screw) left 0 bottom 2px / var(--ear) var(--ear) no-repeat, var(--screw) right 0 bottom 2px / var(--ear) var(--ear) no-repeat, linear-gradient(90deg, #1C1F23 0 var(--ear), rgba(0,0,0,.55) var(--ear) calc(var(--ear) + 1px), transparent calc(var(--ear) + 1px) calc(100% - var(--ear) - 1px), rgba(0,0,0,.55) calc(100% - var(--ear) - 1px) calc(100% - var(--ear)), #1C1F23 calc(100% - var(--ear))); }
  .is-rack .u-tag { display: none; }
  .is-rack .item, .is-rack .item--log, .is-rack .item--cert { grid-template-columns: minmax(0, 1fr); }
  .is-rack .item-id { flex-direction: row; align-items: center; justify-content: flex-start; gap: .8rem; border-right: 0; padding-right: 0; }
  .is-rack .item-go { justify-content: center; padding: .7rem 1rem; }
  .is-rack .iface { grid-template-columns: auto minmax(0, 1fr) auto; }
  .is-rack .if-ic, .is-rack .iface .if-n { display: none; }
  .is-rack .pager { grid-template-columns: minmax(0, 1fr); }
  .is-rack .pager a.next { text-align: left; align-items: flex-start; }
  .is-rack .cta-in { grid-template-columns: minmax(0, 1fr); }
  .is-rack .doc { padding-inline: 1.3rem; }
  .is-rack .doc::before { left: 5px; } .is-rack .doc::after { right: 5px; }
  .is-rack .spec dl > div { grid-template-columns: 6rem minmax(0, 1fr); }
  .is-rack .stats { grid-template-columns: minmax(0, 1fr); }
  .is-rack .stats dt { width: 8ch; }
  .is-rack .skr { grid-template-columns: 3rem minmax(0, 1fr); }
  .is-rack .skr-refs { grid-column: 2; }
}

/* ---------- ajustements de la baie 11U ---------- */
.is-rack .srv-nav ul { list-style: none; padding: 0; }
.is-rack .ev-kick .tape { font-size: 9px; padding: 3px 7px 2px; }
.is-rack .ev-name { margin: 7px 0 5px; }
.is-rack .ev-id .btns { margin-top: 9px; }
/* la languette « fiche profil » dépasse au-dessus de la façade, côté droit */
.is-rack .btn--tag { left: auto; right: 72px; top: -13px; bottom: auto; border-radius: 7px 7px 2px 2px; }
.is-rack .btn--tag[aria-expanded="true"] { transform: translateY(-4px); }
.is-rack .btn--tag:active { transform: translateY(-2px); }
@media (max-width: 899px) {
  .is-rack .btn--tag { right: 14px; top: auto; bottom: -9px; border-radius: 2px 2px 7px 7px; }
  .is-rack .btn--tag[aria-expanded="true"] { transform: translateY(5px); }
}

/* ---------- page Projets : deux châssis (année 1, année 2) ---------- */
.is-rack .ru--bl + .ru--bl { border-top: 1px solid var(--seam); }
.is-rack .ru--bl-empty .bl-strip span { color: var(--dim); border-top-style: dashed; }
.is-rack .ru--bl-empty .blade--blank { background: repeating-linear-gradient(180deg, #17191C 0 3px, #131517 3px 6px); }
.is-rack .ru--bl-empty .blade--blank .bl-name { color: #4C5158; }
/* emplacements libres de l'année 2 dans la liste */
.is-rack .item--free { grid-template-columns: 6.4rem minmax(0, 1fr) 180px; background: var(--noise), linear-gradient(180deg, #1C1E22, #18191D); }
.is-rack .item--free .item-id b { color: var(--dim); }
.is-rack .item--free .item-cat { color: var(--dim); }
.is-rack .item--free .item-p { color: var(--silk); }
.is-rack .free-vent { align-self: stretch; min-height: 44px; border-radius: 2px; background: radial-gradient(circle, #050607 0 1.35px, transparent 1.8px) 0 0 / 7px 7px, radial-gradient(circle, #050607 0 1.35px, transparent 1.8px) 3.5px 3.5px / 7px 7px, #15171A; box-shadow: inset 0 1px 3px rgba(0,0,0,.7); }
@media (max-width: 760px) { .is-rack .item--free { grid-template-columns: minmax(0, 1fr); } .is-rack .free-vent { display: none; } }

/* ============================================================
   AFFICHAGE « CLASSIQUE » — portfolio épuré, dans l'esprit du site
   actuel : dégradé bleu nuit, titres bleu clair, Roboto, boutons pilule.
   Toutes les règles sont préfixées par .is-classic
   ============================================================ */

.is-classic {
  --bg:      #081428;
  --surface: rgba(18, 38, 72, .62);
  --surface-2: rgba(24, 48, 88, .7);
  --line:    rgba(132, 170, 232, .17);
  --text:    #E8EEF7;
  --muted:   #AAB8CD;
  --faint:   #8797AF;
  --head:    #CFE0FF;
  --accent:  #2F86F6;
  --accent-hi: #4E9BFF;
  --ok:      #4ADE80;
  --radius:  16px;
  --maxw-c:  1160px;
}

.is-classic body {
  font-family: var(--roboto); font-size: 1.0625rem; line-height: 1.7; color: var(--text);
  background-color: #071022;
  background-image:
    radial-gradient(1100px 620px at 50% -12%, rgba(47,134,246,.30), transparent 62%),
    linear-gradient(180deg, #0F2648 0, #0A1832 620px, #071022 1400px);
  background-repeat: no-repeat;
}
.is-classic ::selection { background: var(--accent); color: #fff; }
.is-classic :focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: 6px; }
.is-classic .skip { background: var(--accent); color: #fff; }
.is-classic h1, .is-classic h2, .is-classic h3, .is-classic h4 { font-family: var(--roboto); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--head); }
.is-classic p { max-width: 68ch; }
.is-classic strong { color: #fff; font-weight: 600; }

/* éléments décoratifs de la baie : absents en classique */
.is-classic .u-ears, .is-classic .u-tag, .is-classic .leds, .is-classic .led, .is-classic .if-jack, .is-classic .if-n, .is-classic .sled-ic + .x { display: none !important; }

/* ---------- boutons ---------- */
.is-classic .btn, .is-classic .c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--roboto); font-size: .95rem; font-weight: 600; line-height: 1;
  padding: .85rem 1.35rem; border-radius: 999px; cursor: pointer; white-space: nowrap;
  color: var(--text); background: rgba(255,255,255,.04); border: 1px solid rgba(160,190,240,.35);
  transition: background-color .18s ease, border-color .18s ease, transform .14s var(--ease-out);
}
.is-classic .btn--hot, .is-classic .c-btn--primary { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: 0 8px 22px -10px rgba(47,134,246,.8); }
.is-classic .btn:active, .is-classic .c-btn:active { transform: scale(.97); }
.is-classic .btns, .is-classic .c-btns { display: flex; flex-wrap: wrap; gap: .7rem; }
@media (hover: hover) and (pointer: fine) {
  .is-classic .btn:hover, .is-classic .c-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(180,205,245,.6); }
  .is-classic .btn--hot:hover, .is-classic .c-btn--primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
}

/* ============================================================
   EN-TÊTE ET PIED
   ============================================================ */
.is-classic .site-header { background: rgba(8, 20, 42, .78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.is-classic .nav { min-height: 68px; }
.is-classic .brand-tag { display: none; }
.is-classic .brand-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: #E9EEF5; box-shadow: 0 0 0 1px rgba(255,255,255,.25); flex: none; }
.is-classic .brand-name { font-weight: 700; font-size: 1rem; color: #fff; }
.is-classic .brand-sub { font-size: .78rem; color: var(--muted); letter-spacing: .02em; }
.is-classic .nav-links { gap: .2rem; }
.is-classic .nav-links a { font-size: .93rem; font-weight: 500; color: var(--muted); padding: .5rem .62rem; border-radius: 999px; transition: color .15s ease, background-color .15s ease; }
.is-classic .nav-links .led, .is-classic .nav-links .nav-n { display: none; }
.is-classic .nav-links a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.07); }
.is-classic .nav-links a.btn--hot { color: #fff; padding: .65rem 1.15rem; background: var(--accent); }
.is-classic .nav-toggle { font-size: .9rem; font-weight: 600; padding: .55rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.04); }
@media (hover: hover) and (pointer: fine) {
  .is-classic .nav-links a:not(.btn):hover { color: #fff; background: rgba(255,255,255,.06); }
}
@media (max-width: 1100px) {
  .is-classic .nav-links a:not(.btn) { background: rgba(255,255,255,.04); border-radius: 12px; }
}

/* interrupteur d'affichage */
.is-classic .mode { gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); margin-left: .4rem; }
.is-classic .mode-l { display: none; }
.is-classic .mode-b { font-size: .82rem; font-weight: 600; color: var(--muted); padding: .45rem .8rem; border-radius: 999px; transition: color .15s ease, background-color .15s ease; }
.is-classic .mode-b .ico { width: 15px; height: 15px; }
.is-classic .mode-b[aria-pressed="true"] { color: #fff; background: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .is-classic .mode-b[aria-pressed="false"]:hover { color: #fff; background: rgba(255,255,255,.07); }
}

.is-classic .site-footer { margin-top: 2rem; border-top: 1px solid var(--line); background: rgba(5, 12, 26, .6); }
.is-classic .foot-id .brand { margin-right: 0; }
.is-classic .foot p { color: var(--muted); font-size: .95rem; }
.is-classic .foot h2 { font-size: .85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin-bottom: .8rem; }
.is-classic .foot a { color: var(--muted); font-size: .95rem; }
.is-classic .foot-bar { color: var(--faint); font-size: .85rem; border-top: 1px solid rgba(132,170,232,.08); }
@media (hover: hover) and (pointer: fine) { .is-classic .foot a:hover { color: #fff; } }

/* ============================================================
   ACCUEIL CLASSIQUE
   ============================================================ */
.is-classic .c-wrap { max-width: var(--maxw-c); margin-inline: auto; padding-inline: var(--gutter); }
.is-classic .c-hero { padding: clamp(3rem, 2rem + 4vw, 6rem) 0 clamp(2.5rem, 2rem + 2vw, 4rem); }
.is-classic .c-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.is-classic .c-eyebrow { font-size: .85rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8FB6F5; }
.is-classic .c-hero h1 { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 4.6rem); line-height: 1.02; letter-spacing: -.025em; color: #fff; margin: .7rem 0 1.1rem; }
.is-classic .c-lead { font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); line-height: 1.6; color: var(--muted); max-width: 40ch; }
.is-classic .c-avail { display: inline-flex; align-items: center; gap: .6rem; margin: 1.4rem 0 1.8rem; padding: .45rem .9rem .45rem .75rem; border-radius: 999px; background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.25); color: #CFF5DD; font-size: .92rem; font-weight: 500; }
.is-classic .c-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(74,222,128,.18); flex: none; }
.is-classic .c-portrait { margin: 0; justify-self: center; width: min(100%, 380px); aspect-ratio: 1; border-radius: 50%; padding: 6px; background: linear-gradient(140deg, #4E9BFF, rgba(78,155,255,.05) 55%, #2F86F6); box-shadow: 0 30px 80px -30px rgba(47,134,246,.6); }
.is-classic .c-portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.is-classic .c-sec { padding: clamp(2.5rem, 2rem + 2.5vw, 4.5rem) 0; }
.is-classic .c-h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); }
.is-classic .c-h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: .02em; color: #8FB6F5; margin: 2rem 0 1rem; }
.is-classic .c-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem 2rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.is-classic .c-head .c-h2 { margin: 0; }
.is-classic .c-note { color: var(--muted); }
.is-classic .c-link { display: inline-flex; align-items: center; gap: .45rem; color: #8FC0FF; font-weight: 600; }
.is-classic .c-card { display: block; height: 100%; padding: 1.6rem 1.6rem 1.7rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.is-classic .c-card h3 { font-size: 1.25rem; margin-bottom: .6rem; }
.is-classic .c-card p { color: var(--muted); font-size: 1rem; line-height: 1.65; }
.is-classic .c-about { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1.6rem; }
.is-classic .c-grid, .is-classic .c-path { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1.1rem; }
.is-classic .c-proj { display: flex; flex-direction: column; gap: .7rem; height: 100%; padding: 1.4rem 1.5rem 1.4rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: transform .2s var(--ease-out), border-color .2s ease, background-color .2s ease; }
.is-classic .c-proj-top { display: flex; align-items: center; gap: .7rem; }
.is-classic .c-badge { font-weight: 700; font-size: .85rem; color: #fff; background: rgba(47,134,246,.22); border: 1px solid rgba(78,155,255,.4); padding: .2rem .55rem; border-radius: 8px; }
.is-classic .c-meta { font-size: .82rem; color: var(--faint); letter-spacing: .01em; }
.is-classic .c-proj h4 { font-size: 1.15rem; color: #fff; line-height: 1.3; }
.is-classic .c-proj p { color: var(--muted); font-size: .97rem; line-height: 1.6; }
.is-classic .c-proj .chips { margin-top: auto; }
.is-classic .c-more { display: inline-flex; align-items: center; gap: .4rem; color: #8FC0FF; font-weight: 600; font-size: .92rem; margin-top: .3rem; }
.is-classic .c-more .ico { transition: transform .2s var(--ease-out); }
.is-classic .chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.is-classic .chip { font-size: .8rem; font-weight: 500; color: #CFE0FF; padding: .25rem .65rem; border-radius: 999px; background: rgba(78,155,255,.1); border: 1px solid rgba(78,155,255,.22); }
.is-classic .c-card--link { display: flex; flex-direction: column; gap: .5rem; transition: transform .2s var(--ease-out), border-color .2s ease; }
.is-classic .c-card--link h3 { color: #fff; margin: 0; }
.is-classic .c-card--link .c-more { margin-top: auto; padding-top: .4rem; }
@media (hover: hover) and (pointer: fine) {
  .is-classic .c-proj:hover, .is-classic .c-card--link:hover { transform: translateY(-3px); border-color: rgba(120,170,245,.45); background: var(--surface-2); }
  .is-classic .c-proj:hover .c-more .ico, .is-classic .c-card--link:hover .c-more .ico { transform: translateX(3px); }
  .is-classic .c-link:hover { color: #fff; }
}

.is-classic .c-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1.1rem; }
.is-classic .c-skill { padding: 1.4rem 1.5rem 1.2rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--c); }
.is-classic .c-skill h3 { font-size: 1.1rem; color: #fff; margin-bottom: .7rem; }
.is-classic .c-skill > ul { display: flex; flex-direction: column; }
.is-classic .c-skill > ul > li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .8rem; padding: .55rem 0; border-top: 1px solid rgba(132,170,232,.1); color: var(--text); font-size: .97rem; }
.is-classic .c-skill > ul > li:first-child { border-top: 0; }
.is-classic .c-proofs { display: flex; flex-wrap: wrap; gap: .3rem; }
.is-classic .c-proofs a { font-size: .78rem; font-weight: 600; color: #9CC4FF; padding: .12rem .5rem; border-radius: 999px; border: 1px solid rgba(78,155,255,.3); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .is-classic .c-proofs a:hover { color: #fff; border-color: var(--accent-hi); background: rgba(47,134,246,.18); } }

.is-classic .c-ctabox { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; flex-wrap: wrap; padding: clamp(1.8rem, 1rem + 3vw, 3rem); border-radius: 22px; background: linear-gradient(120deg, rgba(47,134,246,.35), rgba(18,38,72,.6) 60%); border: 1px solid rgba(120,170,245,.35); }
.is-classic .c-ctabox .c-avail { margin: .9rem 0 0; }

@media (max-width: 900px) {
  .is-classic .c-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .is-classic .c-portrait { grid-row: 1; width: min(62vw, 260px); justify-self: start; }
  .is-classic .c-about { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   PAGES INTÉRIEURES (même balisage que la baie, autre habillage)
   ============================================================ */
.is-classic .pg { max-width: var(--maxw-c); margin-inline: auto; padding: clamp(2rem, 1.4rem + 2.5vw, 3.6rem) var(--gutter) 2rem; }
.is-classic .u { position: relative; display: block; }
.is-classic .phead { padding: 0 0 clamp(1.6rem, 1rem + 2vw, 2.6rem); border-bottom: 1px solid var(--line); margin-bottom: clamp(1.6rem, 1rem + 2vw, 2.6rem); }
.is-classic .phead-in { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.is-classic .phead h1 { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.5rem); line-height: 1.08; letter-spacing: -.02em; color: #fff; max-width: 22ch; }
.is-classic .phead .lead { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); color: var(--muted); max-width: 60ch; line-height: 1.6; }
.is-classic .back { display: inline-flex; align-items: center; gap: .45rem; font-size: .92rem; font-weight: 600; color: #8FC0FF; }
.is-classic .kick { display: flex; flex-wrap: wrap; gap: .45rem; }
.is-classic .kick span { font-size: .82rem; font-weight: 600; color: #CFE0FF; padding: .3rem .75rem; border-radius: 999px; background: rgba(78,155,255,.12); border: 1px solid rgba(78,155,255,.25); }
@media (hover: hover) and (pointer: fine) { .is-classic .back:hover { color: #fff; } }

.is-classic .doc { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: clamp(1.8rem, 1rem + 3vw, 3.5rem); align-items: start; }
.is-classic .doc .spec { position: sticky; top: 92px; }
.is-classic .spec { padding: 1.2rem 1.3rem .6rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.is-classic .spec-t { font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8FB6F5; margin-bottom: .4rem; }
.is-classic .spec dl > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .8rem; padding: .7rem 0; border-top: 1px solid rgba(132,170,232,.12); align-items: baseline; }
.is-classic .spec dl > div:first-child { border-top: 0; }
.is-classic .spec dt { font-size: .85rem; color: var(--faint); }
.is-classic .spec dd { font-size: .95rem; font-weight: 500; color: var(--text); line-height: 1.5; }
.is-classic .spec dd a { color: #9CC4FF; text-decoration: underline; text-underline-offset: 3px; }

.is-classic .prose { font-size: 1.06rem; color: #D5DEEB; line-height: 1.78; }
.is-classic .prose h2 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem); margin-top: 2.6rem; color: var(--head); }
.is-classic .prose h3 { font-size: clamp(1.12rem, 1rem + .4vw, 1.3rem); margin-top: 2rem; color: var(--head); }
.is-classic .prose > h2:first-child, .is-classic .prose > h3:first-child { margin-top: 0; }
.is-classic .prose a:not([class]) { color: #9CC4FF; text-decoration: underline; text-underline-offset: 3px; }
.is-classic .prose li::marker { color: var(--accent-hi); }
.is-classic .prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em; padding: .12em .4em; border-radius: 6px; background: rgba(78,155,255,.12); color: #CFE0FF; overflow-wrap: anywhere; }
.is-classic .prose figcaption, .is-classic .fine { font-size: .88rem; color: var(--faint); }
.is-classic .shot { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #0A1730; }
.is-classic .shot img { width: 100%; }
.is-classic .gallery a { transition: transform .2s var(--ease-out); }
.is-classic .callout { padding: 1.1rem 1.3rem; border-radius: 14px; background: rgba(47,134,246,.1); border: 1px solid rgba(78,155,255,.3); }
.is-classic .callout-t { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8FB6F5; }
.is-classic .callout p:last-child { color: var(--text); margin-top: .3rem; }
@media (hover: hover) and (pointer: fine) { .is-classic .gallery a:hover { transform: translateY(-3px); } }

.is-classic .sleds { display: flex; flex-direction: column; gap: .6rem; }
.is-classic .sled { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .85rem 1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); transition: border-color .18s ease, background-color .18s ease; }
.is-classic .sled-ic { font-size: .72rem; font-weight: 800; letter-spacing: .06em; color: #fff; background: var(--accent); padding: .35rem .5rem; border-radius: 8px; }
.is-classic .sled-tx b { display: block; font-weight: 600; color: #fff; line-height: 1.35; }
.is-classic .sled-tx span { display: block; font-size: .82rem; color: var(--faint); overflow-wrap: anywhere; }
.is-classic .sled-go { color: #8FC0FF; display: grid; place-items: center; }
@media (hover: hover) and (pointer: fine) { .is-classic .sled:hover { border-color: rgba(120,170,245,.5); background: var(--surface-2); } }

.is-classic .grp-list { margin-top: clamp(2rem, 1.5rem + 2vw, 3.2rem); }
.is-classic .list-head { margin-bottom: 1.2rem; }
.is-classic .list-head h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.is-classic .list-head p { color: var(--muted); margin-top: .35rem; }
.is-classic .items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1.1rem; }
.is-classic .item { display: flex; flex-direction: column; gap: .8rem; height: 100%; padding: 1.4rem 1.5rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: transform .2s var(--ease-out), border-color .2s ease, background-color .2s ease; }
.is-classic .item-id { display: flex; align-items: center; gap: .6rem; }
.is-classic .item-id b { font-weight: 700; font-size: .85rem; color: #fff; background: rgba(47,134,246,.22); border: 1px solid rgba(78,155,255,.4); padding: .2rem .55rem; border-radius: 8px; }
.is-classic .item-id > span:not(.leds), .is-classic .item-id time { font-size: .84rem; color: var(--faint); }
.is-classic .item-id time { font-weight: 600; color: #8FB6F5; }
.is-classic .item-main { display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; flex: 1; }
.is-classic .item-cat { font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8FB6F5; }
.is-classic .item-t { font-size: 1.16rem; line-height: 1.3; color: #fff; }
.is-classic .item-p { color: var(--muted); font-size: .97rem; line-height: 1.6; }
.is-classic .item-go { display: inline-flex; align-items: center; gap: .4rem; color: #8FC0FF; font-weight: 600; font-size: .92rem; }
.is-classic .item-go .ico { transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .is-classic a.item:hover { transform: translateY(-3px); border-color: rgba(120,170,245,.45); background: var(--surface-2); }
  .is-classic a.item:hover .item-go .ico { transform: translateX(3px); }
}
.is-classic .items--cert { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.is-classic .item--cert { flex-direction: row; align-items: center; gap: 1.3rem; }
.is-classic .cert-img { flex: none; width: 112px; padding: 8px; border-radius: 14px; background: #F4F6FA; }
.is-classic .ok { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 600; color: var(--ok); }
.is-classic .ok::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }

.is-classic .intro { padding: 1.6rem 1.7rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.is-classic .intro-in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.is-classic .intro h2 { font-size: 1.25rem; margin-bottom: .6rem; }
.is-classic .intro p { color: var(--muted); }
.is-classic .intro .spec { background: rgba(8,20,42,.5); }

.is-classic .stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: .8rem; }
.is-classic .stats > div { display: flex; flex-direction: column-reverse; gap: .2rem; padding: 1rem 1.1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.is-classic .stats dt { font-size: .85rem; color: var(--faint); }
.is-classic .stats dd { font-size: 1.25rem; font-weight: 700; color: #fff; line-height: 1.25; }

.is-classic .screen { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #0A1730; }
.is-classic .pdf-fallback { padding: 1rem; color: #222; }
.is-classic .pdf-mobile { padding: 1.1rem 1.3rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }

.is-classic .contact { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.is-classic .ifaces { display: flex; flex-direction: column; gap: .8rem; }
.is-classic .iface { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: transform .2s var(--ease-out), border-color .2s ease, background-color .2s ease; }
.is-classic .if-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #fff; background: rgba(47,134,246,.25); border: 1px solid rgba(78,155,255,.4); }
.is-classic .if-ic .ico { width: 20px; height: 20px; }
.is-classic .if-tx b { display: block; color: #fff; font-weight: 600; font-size: 1.05rem; }
.is-classic .if-tx span { display: block; color: var(--muted); font-size: .92rem; overflow-wrap: anywhere; }
.is-classic .if-go { color: #8FC0FF; display: grid; place-items: center; }
.is-classic .portrait { margin: 0; padding: 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); }
.is-classic .portrait img { width: 100%; }
@media (hover: hover) and (pointer: fine) { .is-classic a.iface:hover { transform: translateY(-2px); border-color: rgba(120,170,245,.45); background: var(--surface-2); } }

.is-classic .pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; margin-top: 2.6rem; }
.is-classic .pager a { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.3rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: border-color .2s ease, background-color .2s ease; }
.is-classic .pager a span { font-size: .82rem; color: var(--faint); }
.is-classic .pager a b { color: #fff; font-weight: 600; line-height: 1.35; }
.is-classic .pager a.next { text-align: right; align-items: flex-end; }
@media (hover: hover) and (pointer: fine) { .is-classic .pager a:hover { border-color: rgba(120,170,245,.45); background: var(--surface-2); } }

.is-classic .cta { margin-top: clamp(2.4rem, 2rem + 2vw, 4rem); padding: clamp(1.8rem, 1rem + 3vw, 3rem); border-radius: 22px; background: linear-gradient(120deg, rgba(47,134,246,.32), rgba(18,38,72,.6) 60%); border: 1px solid rgba(120,170,245,.35); }
.is-classic .cta-in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; flex-wrap: wrap; }
.is-classic .cta h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); color: #fff; }
.is-classic .avail { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; color: #CFF5DD; }
.is-classic .avail::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(74,222,128,.18); flex: none; }

@media (max-width: 1020px) {
  .is-classic .doc, .is-classic .intro-in, .is-classic .contact { grid-template-columns: minmax(0, 1fr); }
  .is-classic .doc .spec { position: static; }
  .is-classic .portrait { max-width: 420px; }
}
@media (max-width: 760px) {
  .is-classic .pager { grid-template-columns: minmax(0, 1fr); }
  .is-classic .pager a.next { text-align: left; align-items: flex-start; }
  .is-classic .item--cert { flex-direction: column; align-items: flex-start; }
  .is-classic .spec dl > div { grid-template-columns: 6rem minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .is-classic .brand-sub { display: none; }
}
/* logo : pastille avec monogramme en repli, recouvert par l'image quand elle charge */
.is-classic .brand-badge { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; background: #E9EEF5; box-shadow: 0 0 0 1px rgba(255,255,255,.25); overflow: hidden; }
.is-classic .brand-badge::before { content: "EV"; font-weight: 800; font-size: 15px; letter-spacing: -.02em; color: #3A4250; }
.is-classic .brand-badge .brand-logo { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.is-classic .c-portrait.img-err { background: linear-gradient(140deg, #4E9BFF, #1C4E9A 55%, #2F86F6); }
.is-rack .portrait.img-err { min-height: 320px; background: #121417; }

/* ============================================================
   PAGE COMPÉTENCES (classique) : une carte par domaine
   ============================================================ */
.is-classic .sk-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); gap: 1.1rem; }
.is-classic .skc { padding: 1.4rem 1.5rem 1.1rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--c); }
.is-classic .skc-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: .3rem; }
.is-classic .skc-head h2 { font-size: 1.22rem; color: #fff; }
.is-classic .skc-head h2 i { display: none; }
.is-classic .skc-n { font-size: .85rem; color: var(--faint); }
.is-classic .skr { display: flex; flex-direction: column; gap: .4rem; padding: .75rem 0; border-top: 1px solid rgba(132,170,232,.1); scroll-margin-top: 6rem; }
.is-classic .skr:first-child { border-top: 0; }
.is-classic .skr-port { display: none; }
.is-classic .skr-name { color: var(--text); font-weight: 600; }
.is-classic .skr-refs { display: flex; flex-wrap: wrap; gap: .35rem; }
.is-classic .skr-refs a { font-size: .8rem; font-weight: 600; color: #9CC4FF; padding: .15rem .6rem; border-radius: 999px; border: 1px solid rgba(78,155,255,.3); }
.is-classic .skr:target { background: rgba(47,134,246,.1); border-radius: 10px; padding-inline: .6rem; }
@media (hover: hover) and (pointer: fine) { .is-classic .skr-refs a:hover { color: #fff; border-color: var(--accent-hi); background: rgba(47,134,246,.18); } }

/* page Projets : emplacements réservés à l'année 2 */
.is-classic .item--free { background: transparent; border: 1px dashed rgba(132,170,232,.35); }
.is-classic .item--free .item-id b { background: transparent; border-style: dashed; color: var(--muted); }
.is-classic .item--free .item-cat { color: var(--faint); }
.is-classic .free-vent { display: none; }