/* ============================================================
   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: 1120px) {
  .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 ---------- */
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);
}

/* ---------- logo (SVG en ligne, couleur héritée) ---------- */
.brand-logo { display: block; flex: none; width: 36px; height: 36px; }

/* ---------- carte de visite (page Contact) ---------- */
.vcard { margin: 0; }
.vcard-img { position: relative; display: block; }
.vcard-img img { display: block; width: 100%; height: auto; }
.vcard-fb { display: none; }
.vcard.img-err .vcard-img img { display: none; }
.vcard.img-err .vcard-fb {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem;
  aspect-ratio: 1.75; padding: 1.2rem; text-align: center;
}
.vcard-fb .vcard-logo { width: 64px; height: 64px; }
.vcard-fb b { font-size: 1.15rem; }
.vcard figcaption { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; margin-top: .9rem; }
.vcard figcaption a { display: inline-flex; align-items: center; gap: .45rem; }

/* ============================================================
   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:     #878D96;
  --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; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0;
  min-height: 38px; padding: 0 16px; border-radius: 4px; cursor: pointer; white-space: nowrap; text-decoration: none;
  color: var(--ink); background: #2A2E34;
  border: 1px solid #383D44;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 #000;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s var(--ease-out);
}
.is-rack .btn .ico { width: 16px; height: 16px; }
.is-rack .btn:active { transform: translateY(1px); }
.is-rack .btn--hot { color: var(--hot-ink); background: var(--hot); border-color: var(--hot); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 1px 0 #000; }
.is-rack .btn--ghost { color: var(--soft); background: transparent; border-color: transparent; box-shadow: none; padding-inline: 10px; text-decoration: underline; text-decoration-color: #4B515A; text-underline-offset: 4px; }
.is-rack .btns { display: flex; flex-wrap: wrap; gap: 8px; }
@media (hover: hover) and (pointer: fine) {
  .is-rack .btn:hover { background: #33383F; border-color: #454B53; }
  .is-rack .btn--hot:hover { background: #FF7440; border-color: #FF7440; }
  .is-rack .btn--ghost:hover { background: transparent; border-color: transparent; color: #fff; text-decoration-color: var(--hot); }
}

/* 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,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 #1C1F23; }
.is-rack .brand { flex: none; }
.is-rack .brand-sub { display: none; }
.is-rack .brand-logo { width: 34px; height: 34px; color: var(--ink); }
.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(--sans); font-weight: 600; font-size: 15px; color: var(--ink); }
.is-rack .nav-links a { font-family: var(--sans); font-size: 14.5px; font-weight: 500; color: var(--soft); padding: .5rem .7rem; border-radius: 4px; transition: background-color .15s ease, color .15s ease; }
.is-rack .nav-links .nav-n, .is-rack .nav-links .led { display: none; }
.is-rack .nav-links a[aria-current="page"] { color: #fff; }
.is-rack .nav-links a[aria-current="page"] .led { display: inline-block; width: 6px; height: 6px; background: var(--led-g); box-shadow: 0 0 6px rgba(70,240,142,.8); }
.is-rack .nav-links a.btn--hot { color: var(--hot-ink); min-height: 36px; padding: 0 14px; }
.is-rack .nav-toggle { font-family: var(--sans); font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: 4px; border: 1px solid #383D44; background: #2A2E34; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .is-rack .nav-links a:not(.btn):hover { background: #1F2226; color: #fff; } }
@media (max-width: 1279px) and (min-width: 1121px) { .is-rack .brand-name { display: none; } }
@media (max-width: 1120px) { .is-rack .nav-links a:not(.btn) { font-size: 15px; background: #17191C; } }

/* interrupteur d'affichage */
.is-rack .mode { gap: 2px; padding: 3px; border-radius: 6px; background: #0E0F12; box-shadow: inset 0 1px 2px rgba(0,0,0,.8), 0 0 0 1px #2A2E33; margin-left: .5rem; }
.is-rack .mode-l { display: none; }
.is-rack .mode-b { font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--silk); padding: 7px 11px; border-radius: 4px; transition: color .15s ease, background-color .15s ease; }
.is-rack .mode-b .ico { width: 15px; height: 15px; }
.is-rack .mode-b[aria-pressed="true"] { color: #fff; background: #2A2E34; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 0 #000; }
.is-rack .mode-b[aria-pressed="true"] .ico { color: var(--led-g); }
@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-size: 13px; font-weight: 600; 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(--sans); font-size: 16.5px; font-weight: 700; line-height: 1.3; color: #15161A; margin: 6px 0 6px; letter-spacing: -.005em; }
.is-rack .mh-d { font-size: 14.5px; line-height: 1.55; color: #2E3036; }
.is-rack .mh-b { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.is-rack .mh-b .btn { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.is-rack .mh-b .btn:not(.btn--hot) { color: #1B1C20; background: #FAF8F2; border-color: rgba(0,0,0,.22); box-shadow: 0 1px 0 rgba(0,0,0,.15); }
.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(--silk); font-size: .95rem; }
.is-rack .foot h2 { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--soft); margin-bottom: .8rem; }
.is-rack .foot a { color: var(--soft); font-size: .92rem; }
.is-rack .foot-bar span { font-size: 13px; 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 : BAIE 11U, version épurée
   rail gauche (numéros U) · façades · goulotte à câbles à droite
   Une ligne par serveur : repère, titre, description, chevron, voyant.
   ============================================================ */
.is-rack .elev { max-width: 1010px; margin-inline: auto; padding: 32px var(--gutter) 36px; }
.is-rack .rack {
  --u: 52px;
  position: relative; isolation: isolate;
  padding: 0 7px;
  background: #121417;
  border-radius: 6px 6px 3px 3px;
  box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.05), 0 40px 60px -42px rgba(0,0,0,.95);
}
.is-rack .rack-cap, .is-rack .rack-plinth { height: 14px; }
.is-rack .rack-body { display: grid; grid-template-columns: 30px minmax(0, 1fr) 32px; }
.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-size: 10.5px; font-weight: 500; line-height: 1; color: #6C737C; }
.is-rack .units { display: flex; flex-direction: column; min-width: 0; box-shadow: 0 0 0 1px #000; }
.is-rack .srv-nav ul { margin: 0; padding: 0; list-style: none; }
.is-rack .rack .ru { border-bottom: 1px solid #0A0B0D; }
.is-rack .rack .face { background: linear-gradient(180deg, #202328, #1B1E22 32%); }
.is-rack .asset { font-family: var(--label); font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .03em; color: var(--dim); white-space: nowrap; transition: color .15s ease; }
.is-rack .rack .upl { width: 12px; height: 9px; border-radius: 1.5px; background: #050607; box-shadow: 0 0 0 1px #3A3F46; }
.is-rack .rack .upl::before { content: none; }
.is-rack .elev-help { margin: 18px auto 0; max-width: 64ch; text-align: center; font-size: 14px; line-height: 1.55; color: var(--silk); }

/* ---------- U9–11 : serveur d'identité ---------- */
.is-rack .face.ev { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px) 12px; column-gap: 24px; align-items: center; padding: 0 10px 0 18px; }
.is-rack .ev-id { min-width: 0; }
.is-rack .ev-kick { display: flex; align-items: baseline; gap: 12px; font-size: 13.5px; line-height: 1.2; color: var(--silk); }
.is-rack .ev-name { font-family: var(--label); font-size: 33px; font-weight: 650; line-height: 1; letter-spacing: -.012em; text-transform: uppercase; color: #F5F2EB; margin: 10px 0 7px; white-space: nowrap; }
.is-rack .ev-role { font-size: 15.5px; line-height: 1.35; color: var(--soft); }
.is-rack .ev-id .btns { margin-top: 13px; gap: 8px; flex-wrap: nowrap; }
.is-rack .ev-id .btn { min-height: 36px; }
.is-rack .face.ev > .upl, .is-rack .face.s1 > .upl { justify-self: end; }

/* terminal */
.is-rack .ev-panel { min-width: 0; }
.is-rack .vfd { position: relative; overflow: hidden; border-radius: 4px; padding: 8px 12px; background: #04100E; box-shadow: inset 0 0 0 1px #15332F, inset 0 2px 12px rgba(0,0,0,.85); }
.is-rack .vfd-screen { font-family: var(--label); font-stretch: 87.5%; font-size: 12.5px; font-weight: 500; line-height: 20px; height: 80px; overflow: hidden; color: var(--vfd); text-shadow: 0 0 6px rgba(111,246,227,.28); }
.is-rack .vl { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-rack .vl b { display: inline-block; width: 7.6ch; font-weight: 700; color: #E2FFFB; }
.is-rack .vl.p b { width: 12.5ch; font-weight: 600; }
.is-rack .vl.h { color: #E2FFFB; font-weight: 700; }
.is-rack .vl.dim { color: #4FB5A8; text-shadow: none; }
.is-rack .vl.err { color: #FF8A8A; text-shadow: none; }
.is-rack .caret { display: inline-block; width: .55em; height: .95em; margin-left: 1px; background: var(--vfd); vertical-align: -.1em; }
.is-rack .vfd-screen.flick { animation: vfd-flick .12s steps(2) 1; }
@keyframes vfd-flick { 50% { opacity: .6; } }
.is-rack .ev-keys { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.is-rack .key {
  width: 30px; height: 28px; display: grid; place-items: center; flex: none; cursor: pointer;
  border-radius: 4px; border: 1px solid #383D44; color: var(--soft); background: #2A2E34;
  transition: background-color .15s ease, color .15s ease, transform .1s var(--ease-out);
}
.is-rack .key .ico { width: 15px; height: 15px; }
.is-rack .key:active { transform: translateY(1px); }
.is-rack .vfd-page { flex: 1; min-width: 0; text-align: left; padding-left: 2px; font-size: 13px; line-height: 1; color: var(--silk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-rack .vfd-page b { font-weight: 600; color: var(--ink); margin-right: 3px; }
.is-rack .btn--ping { min-height: 28px; padding: 0 12px 0 10px; font-size: 13px; gap: 7px; }
.is-rack .btn--ping[aria-busy="true"] { cursor: progress; color: var(--silk); }
.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; } }
@media (hover: hover) and (pointer: fine) { .is-rack .key:hover { background: #33383F; color: #fff; } }

/* fiche « Qui suis-je ? » : s'ouvre sous le serveur d'identité */
.is-rack .ev-tag { position: absolute; z-index: 9; top: calc(100% + 8px); left: 0; right: 0; }
.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: 24px 26px; border-radius: 5px;
  background: #EFEBE1; color: #1B1C20;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.6);
  transform-origin: 40px 0; animation: tag-out .22s var(--ease-out);
}
@keyframes tag-out { from { opacity: 0; transform: translateY(-6px); } }
.is-rack .ev-tag-txt h2 { font-family: var(--sans); font-size: 16px; font-weight: 700; letter-spacing: 0; color: #1B1C20; margin-top: 16px; }
.is-rack .ev-tag-txt h2:first-child { margin-top: 0; }
.is-rack .ev-tag-txt p { font-size: 15px; line-height: 1.6; color: #2A2C31; 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: #55585F; }
.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: 32px; height: 32px; 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 ---------- */
.is-rack .rack .face.sw8 { display: flex; align-items: center; gap: 16px; padding: 0 10px 0 18px; background: #16181C; }
.is-rack .sw8 .asset { width: 4.4rem; flex: none; }
.is-rack .sw8-name { margin-right: auto; font-size: 14px; color: var(--dim); }
.is-rack .sw8-ports { display: flex; gap: 7px; padding: 5px 8px; border-radius: 3px; background: #0D0E11; box-shadow: inset 0 1px 2px rgba(0,0,0,.7); }
.is-rack .sw8 .swp { gap: 4px; }
.is-rack .sw8 .jack { width: 14px; height: 10px; }
.is-rack .sw8 .sfp { margin: 0 4px 0 6px; }

/* ---------- U1–7 : un serveur par section ---------- */
.is-rack .srv { text-decoration: none; }
.is-rack .face.s1 {
  display: grid; grid-template-columns: 4.4rem minmax(0, 13.5rem) minmax(0, 1fr) 18px 7px 12px;
  column-gap: 16px; align-items: center; padding: 0 10px 0 18px;
  transition: background-color .15s ease;
}
.is-rack .s-t { font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s ease; }
.is-rack .s-m { font-size: 14.5px; line-height: 1.3; color: var(--silk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-rack .s-go { display: grid; place-items: center; color: #5F656E; transition: transform .2s var(--ease-out), color .15s ease; }
.is-rack .s-go .ico { width: 16px; height: 16px; }
.is-rack .s-led { width: 7px; height: 7px; }
.is-rack .srv:focus-visible { outline: 2px solid var(--hot); outline-offset: -2px; border-radius: 0; }
.is-rack .srv:focus-visible .s-go { color: var(--hot); }
.is-rack .rack .srv.rx .face { background: #23272C; }
.is-rack .srv.is-err .s-led { background: var(--led-r); box-shadow: 0 0 6px rgba(255,82,82,.8); }
.is-rack .ru--ev.is-err .vfd { box-shadow: inset 0 0 0 1px rgba(255,82,82,.6); }
@media (hover: hover) and (pointer: fine) {
  .is-rack .rack .srv:hover .face { background: #25292F; }
  .is-rack .srv:hover .s-t { color: #fff; }
  .is-rack .srv:hover .asset { color: var(--soft); }
  .is-rack .srv:hover .s-go { color: var(--hot); transform: translateX(3px); }
}

/* ---------- câbles : neutres au repos, allumés à l'usage ---------- */
.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 .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 .dim { opacity: .38; transition: opacity .2s ease; }
.is-rack .wires .boot { stroke: rgba(0,0,0,.6); stroke-width: 1; }
.is-rack .rack .wires .sh { stroke: rgba(0,0,0,.6); stroke-width: 3.6; }
.is-rack .rack .wires .cord { stroke: #4A505A; stroke-width: 1.6; transition: stroke .15s ease; }
.is-rack .rack .wires .glow { stroke: var(--hot); stroke-width: 7; }
.is-rack .rack .wires .on .glow { opacity: .2; }
.is-rack .rack .wires .on .cord { stroke: #FF7A3D; stroke-width: 1.9; }
.is-rack .rack .wires .boot { fill: #3E444C; stroke: rgba(0,0,0,.6); }
.is-rack .rack .wires .on .boot { fill: #FF7A3D; }
.is-rack .vmgr { background: #0B0C0E; box-shadow: inset 1px 0 0 #000, inset -1px 0 0 #000; }

/* écrans moyens : la baie garde sa forme, le terminal se resserre */
@media (max-width: 1060px) {
  .is-rack .face.ev { grid-template-columns: minmax(0, 1fr) minmax(0, 280px) 12px; column-gap: 18px; }
  .is-rack .ev-name { font-size: 29px; }
  .is-rack .face.s1 { grid-template-columns: 4rem minmax(0, 12rem) minmax(0, 1fr) 18px 7px 12px; column-gap: 14px; }
}

/* mobile : la baie se replie en une liste lisible */
@media (max-width: 899px) {
  .is-rack .elev { padding: 14px 10px 24px; }
  .is-rack .rack { padding: 0 5px; }
  .is-rack .rack-cap, .is-rack .rack-plinth { height: 8px; }
  .is-rack .rack-body { grid-template-columns: minmax(0, 1fr); }
  .is-rack .uscale, .is-rack .vmgr, .is-rack .rack .wires, .is-rack .ru--sw8, .is-rack .rack .upl, .is-rack .elev-help { display: none !important; }
  .is-rack .rack .ru { height: auto; }
  .is-rack .face.ev { grid-template-columns: minmax(0, 1fr); row-gap: 20px; padding: 22px 16px 20px; }
  .is-rack .ev-name { white-space: normal; font-size: clamp(28px, 8.4vw, 36px); }
  .is-rack .ev-id .btns { flex-wrap: wrap; }
  .is-rack .ev-id .btn--ghost { padding-left: 2px; }
  .is-rack .ev-tag-in { grid-template-columns: minmax(0, 1fr); padding: 20px 16px; gap: 18px; }
  .is-rack .face.s1 { grid-template-columns: 3.7rem minmax(0, 1fr) 18px; grid-template-areas: "a t go" "a m go"; column-gap: 12px; row-gap: 4px; padding: 14px 12px 14px 16px; }
  .is-rack .face.s1 .asset { grid-area: a; align-self: start; padding-top: 4px; }
  .is-rack .s-t { grid-area: t; white-space: normal; }
  .is-rack .s-m { grid-area: m; white-space: normal; }
  .is-rack .s-go { grid-area: go; }
  .is-rack .s-led { 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; }
}

/* ---------- 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; } }

/* ============================================================
   ÉPURATION DES PAGES INTÉRIEURES
   Principe : le mono pour l'équipement (repères, numéros, terminal),
   le sans-serif pour tout ce qui se lit. Plus de vis, de grilles ni
   d'étiquettes en majuscules minuscules.
   ============================================================ */
.is-rack h1, .is-rack h2, .is-rack h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -.012em; line-height: 1.15; }
.is-rack .ev-name { font-family: var(--label); }

/* cadre de page : rails pleins, sans perforations */
.is-rack .pg { padding-inline: calc(var(--gutter) + 18px + .6rem); }
.is-rack .pg::before, .is-rack .pg::after { width: 18px; background: #15171A; box-shadow: inset 0 0 0 1px rgba(0,0,0,.55); }

/* blocs : plus d'oreilles vissées ni de texture */
.is-rack .u-ears { display: none; }
.is-rack .u { padding-inline: clamp(1.2rem, .8rem + 1.6vw, 2.2rem); background: #1B1E22; box-shadow: 0 0 0 1px var(--seam), inset 0 1px 0 rgba(255,255,255,.05); }
.is-rack .u-tag { top: 18px; right: clamp(1.2rem, .8rem + 1.6vw, 2.2rem); padding: 0; background: none; clip-path: none; transform: none; font-family: var(--label); font-stretch: 100%; font-weight: 500; font-size: 11px; letter-spacing: .03em; color: var(--dim); }

/* en-tête de page */
.is-rack .phead h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.1rem); font-stretch: 100%; line-height: 1.08; letter-spacing: -.02em; max-width: 26ch; }
.is-rack .kick { gap: 8px; }
.is-rack .kick span { font-family: var(--sans); font-stretch: 100%; font-size: 13px; letter-spacing: 0; color: var(--silk); padding: .3rem .65rem; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px #33383F; }
.is-rack .kick span:first-child { color: var(--ink); box-shadow: inset 0 0 0 1px #4A5059; }
.is-rack .back { font-family: var(--sans); font-stretch: 100%; font-size: 14px; color: var(--soft); padding: .2rem 0; background: none; box-shadow: none; }
.is-rack .back:hover { color: #fff; }

/* listes (projets, veilles, certifications) */
.is-rack .list-head h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); font-stretch: 100%; }
.is-rack .list-head p { color: var(--silk); }
.is-rack .item { grid-template-columns: 7rem minmax(0, 1fr) 28px; }
.is-rack .item--log { grid-template-columns: 8.4rem minmax(0, 1fr) 28px; }
.is-rack .item-id { gap: .4rem; border-right-color: #2C3036; }
.is-rack .item-id b { font-size: 1.1rem; }
.is-rack .item-id > span:not(.leds), .is-rack .item-id time + span { font-family: var(--sans); font-stretch: 100%; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--silk); }
.is-rack .item-id time { font-family: var(--label); font-weight: 600; font-size: 13px; color: var(--vfd); text-shadow: none; }
.is-rack .item-cat { font-family: var(--sans); font-stretch: 100%; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--silk); }
.is-rack .item-t { font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); font-stretch: 100%; font-weight: 650; }
.is-rack .item-go { align-self: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: none; box-shadow: none; color: #5F656E; transition: transform .2s var(--ease-out), color .15s ease; }
.is-rack .item-go .ico { width: 18px; height: 18px; }
.is-rack a.item:focus-visible .item-go { color: var(--hot); background: none; }
@media (hover: hover) and (pointer: fine) {
  .is-rack a.item:hover { transform: none; background: #212429; }
  .is-rack a.item:hover .item-go { color: var(--hot); background: none; transform: translateX(3px); }
  .is-rack a.item:hover .item-t { color: #fff; }
}
.is-rack .chip { font-family: var(--sans); font-stretch: 100%; font-size: 12.5px; color: var(--soft); padding: .2rem .55rem; border-radius: 3px; background: none; box-shadow: inset 0 0 0 1px #33383F; }
.is-rack .spec .chip { background: none; }
.is-rack .item--free { grid-template-columns: 7rem minmax(0, 1fr); background: #18191D; }
.is-rack .free-vent { display: none; }

/* prises de la page Contact */
.is-rack .if-jack { position: relative; display: block; }

/* fiches, prose et documents */
.is-rack .doc { background: #1B1E22; }
.is-rack .doc::before, .is-rack .doc::after { display: none; }
.is-rack .spec-t { font-family: var(--sans); font-stretch: 100%; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--soft); }
.is-rack .spec dt { font-family: var(--sans); font-stretch: 100%; font-size: 13px; color: var(--silk); }
.is-rack .spec dl > div { border-top-style: solid; border-top-color: #2A2E34; }
.is-rack .prose h2 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); font-stretch: 100%; }
.is-rack .prose h3 { font-size: clamp(1.05rem, 1rem + .3vw, 1.18rem); font-stretch: 100%; }
.is-rack .prose figcaption, .is-rack .fine { font-family: var(--sans); font-stretch: 100%; font-size: 13px; color: var(--silk); }
.is-rack .callout-t { font-family: var(--sans); font-stretch: 100%; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.is-rack .sled { background: #202328; box-shadow: 0 0 0 1px var(--seam); }
.is-rack .sled-ic { font-family: var(--label); font-stretch: 100%; font-weight: 600; font-size: 10.5px; letter-spacing: .04em; color: var(--soft); background: none; padding: 4px 6px; border-radius: 3px; box-shadow: inset 0 0 0 1px #3A3F46; }
.is-rack .sled-tx span { font-family: var(--sans); font-stretch: 100%; font-size: 13px; color: var(--silk); }
.is-rack .sled-go { background: none; box-shadow: none; }
.is-rack .stats { font-family: var(--label); text-shadow: none; }
.is-rack .stats dt { font-size: 13px; font-weight: 700; }
.is-rack .stats dd { font-size: 14px; font-weight: 500; }
.is-rack .intro h2 { font-size: 15px; font-stretch: 100%; letter-spacing: 0; text-transform: none; color: var(--soft); }
.is-rack .pager a { background: #1B1E22; box-shadow: 0 0 0 1px var(--seam); }
.is-rack .pager a span { font-family: var(--sans); font-stretch: 100%; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--silk); }
.is-rack .pager a b { font-family: var(--sans); font-stretch: 100%; font-size: 15.5px; font-weight: 600; }
.is-rack .cta h2 { font-stretch: 100%; }
.is-rack .if-tx span, .is-rack .iface .if-n { font-family: var(--sans); font-stretch: 100%; font-size: 13.5px; }
.is-rack .if-go { background: none; box-shadow: none; }
.is-rack .ok { font-family: var(--sans); font-stretch: 100%; font-size: 14px; font-weight: 600; }

/* compétences : tableau lisible */
.is-rack .skc-head h2 { font-size: 1.2rem; font-stretch: 100%; }
.is-rack .skc-n { font-family: var(--sans); font-stretch: 100%; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--silk); }
.is-rack .skr { border-top-style: solid; border-top-color: #262A30; }
.is-rack .skr-port { font-size: 12px; }

/* équipements dans les pages : façades sobres */
.is-rack .ru-stack .ear { background: linear-gradient(90deg, #121417, #1C1F23 50%, #121417); }
.is-rack .ru-stack .face { background: #1B1E22; }
.is-rack .silk { font-size: 10.5px; letter-spacing: .04em; }
.is-rack .ru-stack .tape { font-family: var(--label); font-stretch: 100%; font-weight: 500; font-size: 11px; letter-spacing: .03em; color: var(--dim); background: none; clip-path: none; transform: none; padding: 0; }
/* châssis de la page Projets */
.is-rack .bl-strip { height: 18px; }
.is-rack .bl-strip span { font-family: var(--sans); font-stretch: 100%; font-weight: 500; font-size: 12px; letter-spacing: 0; text-transform: none; padding-top: 4px; border-top-color: #3A3F46; }
.is-rack .blade { background: #23262B; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px #08090A; padding: 8px 3px 7px; }
.is-rack .bl-id { margin-top: 2px; font-size: 14px; }
.is-rack .bl-sem { font-size: 10px; color: var(--silk); }
.is-rack .bl-name { font-family: var(--sans); font-stretch: 100%; font-weight: 600; font-size: 11.5px; letter-spacing: 0; text-transform: none; line-height: 1.2; color: var(--soft); background: none; box-shadow: none; }
.is-rack .bl-latch { height: 3px; width: 46%; background: #3E444C; box-shadow: none; }
.is-rack .blade--blank, .is-rack .ru--bl-empty .blade--blank { background: #15171A; box-shadow: inset 0 0 0 1px #0B0C0E; }
.is-rack .bl-icm { width: 54px; background: #1F2226; }
.is-rack .bl-icm .asset { transform: rotate(-90deg); }
@media (hover: hover) and (pointer: fine) {
  .is-rack .blade:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px #000, 0 0 0 2px var(--hot), 0 12px 18px -8px #000; }
  .is-rack .blade:hover .bl-latch { background: var(--hot); }
}
/* panneau de brassage : sans passe-câbles décoratif ni légendes serrées */
.is-rack .blk-l .silk { display: none; }
.is-rack .row3 { --bl: 96px; }
.is-rack .ru--cm .fg, .is-rack .brush, .is-rack .swp-n { display: none; }
.is-rack .cm::before { top: 14px; bottom: 14px; background: #0B0C0E; box-shadow: none; }
.is-rack .pp-tip { font-family: var(--sans); font-stretch: 100%; font-size: 13px; }

@media (max-width: 760px) {
  .is-rack .pg { padding-inline: .5rem; }
  .is-rack .u { padding-inline: 1.1rem; }
  .is-rack .item, .is-rack .item--log, .is-rack .item--cert, .is-rack .item--free { grid-template-columns: minmax(0, 1fr); }
  .is-rack .item-go { display: none; }
}

/* ---------- carte de visite (Contact) ---------- */
.is-rack .vcard { padding-block: clamp(1rem, .8rem + 1vw, 1.5rem); }
.is-rack .vcard-img img { border-radius: 6px; box-shadow: 0 0 0 1px #000, 0 18px 36px -18px #000; }
.is-rack .vcard-fb { border-radius: 6px; background: #EFEBE1; color: #2E3439; box-shadow: 0 0 0 1px #000; }
.is-rack .vcard-fb span { font-size: 13px; color: #55585F; }
.is-rack .vcard figcaption { font-size: 14px; color: var(--silk); }
.is-rack .vcard figcaption a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hot); text-underline-offset: 3px; }
.is-rack .vcard figcaption .ico { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .is-rack .vcard figcaption a:hover { color: #fff; } }

/* châssis : emplacements encore libres */
.is-rack .bl-strip .bl-free { color: var(--dim); border-top-style: dashed; }

/* certifications sans visuel : vignette sobre (icône générique + nom court) */
.is-rack .cert-img--txt { display: grid; place-items: center; align-content: center; gap: 6px; aspect-ratio: 1; color: #2E3439; }
.is-rack .cert-img--txt .ico { width: 30px; height: 30px; }
.is-rack .cert-img--txt b { font-size: 15px; font-weight: 700; }
.is-rack .item--cert .item-main { gap: .35rem; }
.is-rack .item--cert { grid-template-columns: auto minmax(0, 1fr); }
@media (max-width: 760px) { .is-rack .item--cert { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   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; color: #fff; 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; }

/* ---------- carte de visite (Contact) ---------- */
.is-classic .vcard { padding: 0; }
.is-classic .vcard-img img { border-radius: 14px; box-shadow: 0 24px 60px -28px rgba(0,0,0,.8); }
.is-classic .vcard-fb { border-radius: 14px; background: #fff; color: #2E3439; }
.is-classic .vcard-fb span { font-size: .9rem; color: #5A6270; }
.is-classic .vcard figcaption { color: var(--muted); font-size: .95rem; }
.is-classic .vcard figcaption a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent, #2F86F6); text-underline-offset: 3px; }
.is-classic .vcard figcaption .ico { width: 16px; height: 16px; }

/* accueil : sans la pastille de disponibilité, les boutons gardent leur respiration */
.is-classic .c-hero-txt .c-btns { margin-top: 1.9rem; }

/* certifications sans visuel : vignette sobre (icône générique + nom court) */
.is-classic .cert-img--txt { display: grid; place-items: center; align-content: center; gap: 6px; aspect-ratio: 1; color: #2E3439; }
.is-classic .cert-img--txt .ico { width: 30px; height: 30px; }
.is-classic .cert-img--txt b { font-size: 15px; font-weight: 700; }