/* Ambroise IT : composants propres à la page /parcours/ (complète site.css) */

/* ---------- En-tête ---------- */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.role { margin-top: 0.75rem; font: 600 1rem/1.5 var(--sans); color: var(--accent-text); }
.intro .btns { margin-top: 1.75rem; }
.facts { border-top: 2px solid var(--ink); }
.facts > div { padding: 0.85rem 0; border-bottom: 1px solid var(--sep); }
.facts dt { font: 600 0.9375rem/1.6 var(--sans); color: var(--label); }
.facts dd { margin-top: 0.2rem; font-size: 0.9375rem; }
.toc { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.toc ul { display: flex; flex-wrap: wrap; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.toc a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.1rem; font-weight: 600; text-decoration: none; color: var(--text-2); }
.toc li:first-child a { padding-left: 0; }
.toc a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Parcours ---------- */
.timelines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); }
.timelines h3 { font: 600 0.9375rem/1.5 var(--sans); color: var(--label); padding-bottom: 0.9rem; border-bottom: 2px solid var(--ink); margin-bottom: 0.5rem; }
.timeline li { position: relative; padding: 1.25rem 0 1.25rem 1.75rem; border-bottom: 1px solid var(--sep); }
.timeline li::before { content: ""; position: absolute; left: 0; top: 1.6rem; width: 13px; height: 13px; border-radius: 50%; border: 3px solid var(--green); background: var(--paper); }
.timeline li.current::before { background: var(--green); border-color: var(--ink); }
.tl-date { font: 600 0.9375rem/1.5 var(--sans); color: var(--accent-text); }
.timeline h4 { margin-top: 0.3rem; font-size: 1.25rem; font-weight: 700; }
.tl-org { margin-top: 0.2rem; color: var(--text-2); }
.tl-meta { margin-top: 0.2rem; font-size: 0.9375rem; color: var(--label); }

/* ---------- Technologies : 14 onglets groupés par thème ---------- */
/* HIG (tab views : pas plus de six onglets) : au-delà, barre latérale groupée et panneau de contenu (split view).
   Sous 860 px : groupes en liste verticale (HIG : préférer le défilement vertical), panneau dessous. */
.tech-split { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.tech-nav { display: grid; gap: 1.5rem; }
.tech-panels { position: sticky; top: calc(4.25rem + 1.5rem); min-width: 0; }
.tech-group { min-width: 0; }
.tech-group-label { margin-bottom: 0.35rem; font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.tech-tabs { display: flex; flex-direction: column; }
.tech-tab {
  position: relative; display: flex; align-items: center; min-height: 44px; padding: 0.5rem 0.85rem 0.5rem 1.6rem; border: 0; border-radius: 8px;
  background: var(--paper); color: var(--text-2); font: 600 0.9375rem/1.3 var(--sans); text-align: left; cursor: pointer;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
/* Chaque onglet est une station de la ligne de son groupe */
.tech-tab::before { content: ""; position: absolute; left: 0.45rem; top: 0; bottom: 0; width: 3px; background: var(--sep); }
.tech-tab::after { content: ""; position: absolute; left: calc(0.45rem - 4px); top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: var(--paper); border: 3px solid var(--grey); }
.tech-tab:first-child::before { top: 50%; }
.tech-tab:last-child::before { bottom: 50%; }
.tech-tab:hover { color: var(--ink); background: rgb(0 0 0 / 0.04); }
.tech-tab:focus-visible { outline-offset: -2px; }
.tech-tab[aria-selected="true"] { background: var(--yellow); color: var(--ink); font-weight: 750; }
.tech-tab[aria-selected="true"]::after { border-color: var(--ink); background: var(--green); }
.tech-panel { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 2px solid var(--ink); }
.tech-panel[hidden] { display: none; }
/* Avant que parcours.js ait pris la main : seul le premier panneau est affiché (pas de saut de mise en page).
   Sans JS, ou si le script ne s'est pas chargé au bout de 3 s (.tabs-fail) : tous les panneaux, sans onglets. */
html.js:not(.tabs-ready):not(.tabs-fail) .tech-panel ~ .tech-panel { display: none; }
.no-js .tech-split, .tabs-fail .tech-split { grid-template-columns: minmax(0, 1fr); }
.no-js .tech-nav, .tabs-fail .tech-nav { display: none !important; }
.no-js .tech-panel, .tabs-fail .tech-panel { display: grid; }
.no-js .tech-panel + .tech-panel, .tabs-fail .tech-panel + .tech-panel { margin-top: 2.5rem; }
.tech-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.75rem; font-weight: 600; color: var(--ink); text-underline-offset: 0.24em; text-decoration-color: var(--green); }
.tech-link:hover { text-decoration-color: var(--ink); }
.tech-intro { padding: 1.75rem 0 1.25rem; }
.tech-intro h3 { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); font-weight: 700; letter-spacing: -0.015em; }
.tech-intro p { margin-top: 1rem; color: var(--text-2); }
.tech-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0 2rem; border-top: 1px solid var(--sep); }
.tech-features li { display: grid; gap: 0.15rem; align-content: start; padding: 1rem 0; border-bottom: 1px solid var(--sep); }
.tech-panel > *, .tech-features li { min-width: 0; }
.tf-title, .tf-desc { overflow-wrap: anywhere; }
.tf-title { font-weight: 600; }
.tf-desc { color: var(--text-2); font-size: 0.9375rem; }
.motion .tech-panel:not([hidden]) { animation: panel-in 260ms var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Étiquettes ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.tags li { max-width: 100%; overflow-wrap: anywhere; font: 600 0.8125rem/1.4 var(--sans); padding: 0.2rem 0.65rem; border: 1px solid var(--sep); border-radius: 999px; color: var(--text-2); }

/* ---------- Compétences ---------- */
.skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--sep); border-left: 1px solid var(--sep); }
.skills > li { padding: 1.5rem; border-right: 1px solid var(--sep); border-bottom: 1px solid var(--sep); }
.skills h3 { font-size: 1.1875rem; font-weight: 700; }
.certs { margin-top: 1.5rem; color: var(--text-2); }
.certs .label { margin-right: 0.75rem; }

/* ---------- Schémas ---------- */
.schemas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.schema-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--sep); border-radius: 14px; padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.schema-card h3 { font-size: 1.375rem; font-weight: 700; }
.schema-sub { margin-top: 0.3rem; font: 600 0.9375rem/1.5 var(--sans); color: var(--accent-text); }
.schema-text { margin-top: 0.9rem; color: var(--text-2); font-size: 0.9375rem; }
.js .schema-card:not(.schema-wide) .schema-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.js .schema-card:not(.schema-wide) .schema-text.expanded { display: block; -webkit-line-clamp: unset; line-clamp: none; }
.read-more {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 0.5rem 0 0;
  border: 0; background: none; color: var(--ink); font: 600 0.9375rem var(--sans); text-decoration: underline; cursor: pointer;
}
.schema-figure { margin: 1rem 0 1.25rem; padding: 0.75rem; border: 1px solid var(--sep); background: var(--paper); }
.schema-card:not(.schema-wide) .schema-figure { height: 220px; display: flex; align-items: center; justify-content: center; }
.schema-card:not(.schema-wide) .schema-figure svg { height: 100%; width: auto; }
.schema-card:not(.schema-wide) .schema-figure .proto-stack { display: inline-block; height: 100%; line-height: 0; }
.diagram-body .proto-stack svg.diagram { max-height: none; }
.diagram-body .proto-stack, .schema-wide .proto-stack { width: 100%; }
.schema-wide { grid-column: 1 / -1; }
.diagram { font-family: var(--sans); }
.diagram [stroke] { vector-effect: non-scaling-stroke; }
.diagram g:has(> title):hover rect { stroke: var(--accent); }
.diagram-btn { align-self: flex-start; margin-top: auto; }
.packet { display: none; }
.motion .packet { display: inline; }

/* ---------- Projets ---------- */
.category + .category { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.category-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; padding-bottom: 0.9rem; border-bottom: 2px solid var(--ink); }
.category-head h3 { font-size: 1.625rem; font-weight: 700; }
.projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 1px solid var(--sep); }
.projects > li { display: flex; flex-direction: column; padding: 1.5rem; border-right: 1px solid var(--sep); border-bottom: 1px solid var(--sep); }
.projects h4 { margin-top: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.projects p { margin-top: 0.6rem; color: var(--text-2); font-size: 0.9375rem; flex: 1; }
.projects .diagram-btn { margin-top: 1.25rem; }

/* ---------- Modale ---------- */
.diagram-modal { margin: auto; width: min(1100px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); border: 1px solid var(--sep); border-radius: 14px; background: var(--paper); color: var(--ink); padding: 0; }
.diagram-modal::backdrop { background: rgb(0 0 0 / 0.7); }
.diagram-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem 0.75rem 0.75rem 1.25rem; border-bottom: 2px solid var(--ink); }
.diagram-head h2 { font-size: 1.5rem; font-weight: 700; }
.diagram-close { min-width: 44px; padding: 0; }
.diagram-head .anim-toggle { margin-left: auto; }
.anim-bar { margin: calc(-1 * clamp(1.25rem, 3vw, 2rem)) 0 clamp(1.25rem, 3vw, 2rem); }
.diagram-body { padding: 1rem; }
.diagram-body svg { width: 100%; height: auto; max-height: calc(100vh - 12rem); }
.diagram-hint { padding: 0 1.25rem 1rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .intro { grid-template-columns: minmax(0, 1fr); }
  .skills, .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .timelines, .schemas { grid-template-columns: minmax(0, 1fr); }
  .tech-split { grid-template-columns: minmax(0, 1fr); }
  .tech-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
  .tech-panels { position: static; }
}
@media (max-width: 680px) {
  .skills, .projects { grid-template-columns: minmax(0, 1fr); }
  .toc ul { border-bottom: 0; }
  .toc li { flex: 1 1 50%; border-bottom: 1px solid var(--sep); }
  .toc li:first-child a, .toc a { padding-left: 0; }
  .schema-card:not(.schema-wide) .schema-figure { height: auto; }
  .schema-card:not(.schema-wide) .schema-figure svg { width: 100%; height: auto; }
  .schema-card:not(.schema-wide) .schema-figure .proto-stack { display: block; width: 100%; height: auto; }
  .schema-wide .schema-figure { overflow-x: auto; }
  .schema-wide .schema-figure svg { min-width: 640px; }
}

/* PROTOS:DEBUT (généré par /root/portfolio-tools/refonte/protos.py, ne pas éditer à la main) */
.proto-stack { position: relative; }
.proto-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
.motion .proto-host .proto-layer { display: block; will-change: transform; }
.motion .proto-host .pa-mpls-m1 { animation: pa-mpls-m1 8s linear infinite paused; }
.motion .proto-host .pa-mpls-a1 { animation: pa-mpls-a1 8s linear infinite paused; }
.motion .proto-host .pa-mpls-b1 { animation: pa-mpls-b1 8s linear infinite paused; }
.motion .proto-host .pa-mpls-s1a { animation: pa-mpls-s1a 8s linear infinite paused; }
.motion .proto-host .pa-mpls-s1b { animation: pa-mpls-s1b 8s linear infinite paused; }
.motion .proto-host .pa-mpls-s1c { animation: pa-mpls-s1c 8s linear infinite paused; }
.motion .proto-host .pa-mpls-m2 { animation: pa-mpls-m2 8s linear infinite paused; }
.motion .proto-host .pa-mpls-a2 { animation: pa-mpls-a2 8s linear infinite paused; }
.motion .proto-host .pa-mpls-b2 { animation: pa-mpls-b2 8s linear infinite paused; }
.motion .proto-host .pa-mpls-s2a { animation: pa-mpls-s2a 8s linear infinite paused; }
.motion .proto-host .pa-mpls-s2b { animation: pa-mpls-s2b 8s linear infinite paused; }
.motion .proto-host .pa-mpls-s2c { animation: pa-mpls-s2c 8s linear infinite paused; }
.motion .proto-host .pa-ipsec-m { animation: pa-ipsec-m 7s linear infinite paused; }
.motion .proto-host .pa-ipsec-clear1 { animation: pa-ipsec-clear1 7s linear infinite paused; }
.motion .proto-host .pa-ipsec-esp { animation: pa-ipsec-esp 7s linear infinite paused; }
.motion .proto-host .pa-ipsec-clear2 { animation: pa-ipsec-clear2 7s linear infinite paused; }
.motion .proto-host .pa-ipsec-s1 { animation: pa-ipsec-s1 7s linear infinite paused; }
.motion .proto-host .pa-ipsec-s2 { animation: pa-ipsec-s2 7s linear infinite paused; }
.motion .proto-host .pa-ipsec-s3 { animation: pa-ipsec-s3 7s linear infinite paused; }
.motion .proto-host .pa-vlan-m10 { animation: pa-vlan-m10 9s linear infinite paused; }
.motion .proto-host .pa-vlan-t10 { animation: pa-vlan-t10 9s linear infinite paused; }
.motion .proto-host .pa-vlan-s10a { animation: pa-vlan-s10a 9s linear infinite paused; }
.motion .proto-host .pa-vlan-s10b { animation: pa-vlan-s10b 9s linear infinite paused; }
.motion .proto-host .pa-vlan-s10c { animation: pa-vlan-s10c 9s linear infinite paused; }
.motion .proto-host .pa-vlan-m20 { animation: pa-vlan-m20 9s linear infinite paused; }
.motion .proto-host .pa-vlan-t20 { animation: pa-vlan-t20 9s linear infinite paused; }
.motion .proto-host .pa-vlan-s20a { animation: pa-vlan-s20a 9s linear infinite paused; }
.motion .proto-host .pa-vlan-s20b { animation: pa-vlan-s20b 9s linear infinite paused; }
.motion .proto-host .pa-vlan-s20c { animation: pa-vlan-s20c 9s linear infinite paused; }
.motion .proto-host .pa-vlan-m30 { animation: pa-vlan-m30 9s linear infinite paused; }
.motion .proto-host .pa-vlan-t30 { animation: pa-vlan-t30 9s linear infinite paused; }
.motion .proto-host .pa-vlan-s30a { animation: pa-vlan-s30a 9s linear infinite paused; }
.motion .proto-host .pa-vlan-s30b { animation: pa-vlan-s30b 9s linear infinite paused; }
.motion .proto-host .pa-vlan-s30c { animation: pa-vlan-s30c 9s linear infinite paused; }
.motion .proto-host .pa-vlan-field { animation: pa-vlan-field 9s linear infinite paused; }
.motion .proto-host.is-live .proto * { animation-play-state: running; }
.anim-paused .proto * { animation-play-state: paused !important; }
.proto [style*="offset-path"] { offset-rotate: 0deg; }
@keyframes pa-mpls-m1 { 0%, 0.00% { offset-distance: 0%; opacity: 0; } 0.40% { opacity: 1; }  45.00% { offset-distance: 100%; opacity: 1; } 46.50%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes pa-mpls-a1 { 0%, 10.88% { opacity: 0; } 11.18%, 26.25% { opacity: 1; } 26.55%, 100% { opacity: 0; } }
@keyframes pa-mpls-b1 { 0%, 26.25% { opacity: 0; } 26.55%, 41.25% { opacity: 1; } 41.55%, 100% { opacity: 0; } }
@keyframes pa-mpls-s1a { 0%, 10.88% { opacity: 0; } 11.18%, 26.25% { opacity: 1; } 26.55%, 100% { opacity: 0; } }
@keyframes pa-mpls-s1b { 0%, 26.25% { opacity: 0; } 26.55%, 41.25% { opacity: 1; } 41.55%, 100% { opacity: 0; } }
@keyframes pa-mpls-s1c { 0%, 41.25% { opacity: 0; } 41.55%, 48.00% { opacity: 1; } 48.30%, 100% { opacity: 0; } }
@keyframes pa-mpls-m2 { 0%, 50.00% { offset-distance: 0%; opacity: 0; } 50.40% { opacity: 1; }  95.00% { offset-distance: 100%; opacity: 1; } 96.50%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes pa-mpls-a2 { 0%, 60.88% { opacity: 0; } 61.17%, 76.25% { opacity: 1; } 76.55%, 100% { opacity: 0; } }
@keyframes pa-mpls-b2 { 0%, 76.25% { opacity: 0; } 76.55%, 91.25% { opacity: 1; } 91.55%, 100% { opacity: 0; } }
@keyframes pa-mpls-s2a { 0%, 60.88% { opacity: 0; } 61.17%, 76.25% { opacity: 1; } 76.55%, 100% { opacity: 0; } }
@keyframes pa-mpls-s2b { 0%, 76.25% { opacity: 0; } 76.55%, 91.25% { opacity: 1; } 91.55%, 100% { opacity: 0; } }
@keyframes pa-mpls-s2c { 0%, 91.25% { opacity: 0; } 91.55%, 98.00% { opacity: 1; } 98.30%, 100% { opacity: 0; } }
@keyframes pa-ipsec-m { 0%, 0.00% { offset-distance: 0%; opacity: 0; } 0.40% { opacity: 1; }  80.00% { offset-distance: 100%; opacity: 1; } 81.50%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes pa-ipsec-clear1 { 0%, 0.00% { opacity: 0; } 0.30%, 19.84% { opacity: 1; } 20.14%, 100% { opacity: 0; } }
@keyframes pa-ipsec-esp { 0%, 19.84% { opacity: 0; } 20.14%, 60.16% { opacity: 1; } 60.46%, 100% { opacity: 0; } }
@keyframes pa-ipsec-clear2 { 0%, 60.16% { opacity: 0; } 60.46%, 81.50% { opacity: 1; } 81.80%, 100% { opacity: 0; } }
@keyframes pa-ipsec-s1 { 0%, 0.50% { opacity: 0; } 0.80%, 19.84% { opacity: 1; } 20.14%, 100% { opacity: 0; } }
@keyframes pa-ipsec-s2 { 0%, 19.84% { opacity: 0; } 20.14%, 60.16% { opacity: 1; } 60.46%, 100% { opacity: 0; } }
@keyframes pa-ipsec-s3 { 0%, 60.16% { opacity: 0; } 60.46%, 86.00% { opacity: 1; } 86.30%, 100% { opacity: 0; } }
@keyframes pa-vlan-m10 { 0%, 0.00% { offset-distance: 0%; opacity: 0; } 0.40% { opacity: 1; } 5.87% { offset-distance: 17.69%; } 8.00% { offset-distance: 38.67%; } 18.67% { offset-distance: 61.33%; } 20.80% { offset-distance: 82.31%; } 26.67% { offset-distance: 100%; opacity: 1; } 28.17%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes pa-vlan-t10 { 0%, 8.00% { opacity: 0; } 8.30%, 18.67% { opacity: 1; } 18.97%, 100% { opacity: 0; } }
@keyframes pa-vlan-s10a { 0%, 0.50% { opacity: 0; } 0.80%, 8.00% { opacity: 1; } 8.30%, 100% { opacity: 0; } }
@keyframes pa-vlan-s10b { 0%, 8.00% { opacity: 0; } 8.30%, 18.67% { opacity: 1; } 18.97%, 100% { opacity: 0; } }
@keyframes pa-vlan-s10c { 0%, 18.67% { opacity: 0; } 18.97%, 29.67% { opacity: 1; } 29.97%, 100% { opacity: 0; } }
@keyframes pa-vlan-m20 { 0%, 33.33% { offset-distance: 0%; opacity: 0; } 33.73% { opacity: 1; } 39.20% { offset-distance: 13.09%; } 41.33% { offset-distance: 36.97%; } 52.00% { offset-distance: 63.03%; } 54.13% { offset-distance: 86.91%; } 60.00% { offset-distance: 100%; opacity: 1; } 61.50%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes pa-vlan-t20 { 0%, 41.33% { opacity: 0; } 41.63%, 52.00% { opacity: 1; } 52.30%, 100% { opacity: 0; } }
@keyframes pa-vlan-s20a { 0%, 33.83% { opacity: 0; } 34.13%, 41.33% { opacity: 1; } 41.63%, 100% { opacity: 0; } }
@keyframes pa-vlan-s20b { 0%, 41.33% { opacity: 0; } 41.63%, 52.00% { opacity: 1; } 52.30%, 100% { opacity: 0; } }
@keyframes pa-vlan-s20c { 0%, 52.00% { opacity: 0; } 52.30%, 63.00% { opacity: 1; } 63.30%, 100% { opacity: 0; } }
@keyframes pa-vlan-m30 { 0%, 66.66% { offset-distance: 0%; opacity: 0; } 67.06% { opacity: 1; } 72.53% { offset-distance: 16.58%; } 74.66% { offset-distance: 38.29%; } 85.33% { offset-distance: 61.71%; } 87.46% { offset-distance: 83.42%; } 93.33% { offset-distance: 100%; opacity: 1; } 94.83%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes pa-vlan-t30 { 0%, 74.66% { opacity: 0; } 74.96%, 85.33% { opacity: 1; } 85.63%, 100% { opacity: 0; } }
@keyframes pa-vlan-s30a { 0%, 67.16% { opacity: 0; } 67.46%, 74.66% { opacity: 1; } 74.96%, 100% { opacity: 0; } }
@keyframes pa-vlan-s30b { 0%, 74.66% { opacity: 0; } 74.96%, 85.33% { opacity: 1; } 85.63%, 100% { opacity: 0; } }
@keyframes pa-vlan-s30c { 0%, 85.33% { opacity: 0; } 85.63%, 96.33% { opacity: 1; } 96.63%, 100% { opacity: 0; } }
@keyframes pa-vlan-field { 0% { opacity: 0; } 8.00% { opacity: 0; } 8.30%, 18.67% { opacity: 1; } 18.97% { opacity: 0; } 41.33% { opacity: 0; } 41.63%, 52.00% { opacity: 1; } 52.30% { opacity: 0; } 74.66% { opacity: 0; } 74.96%, 85.33% { opacity: 1; } 85.63% { opacity: 0; } 100% { opacity: 0; } }
/* PROTOS:FIN */
.tech-panel { scroll-margin-top: calc(4.25rem + 1rem); }
@media (max-width: 30em) { .tech-nav { grid-template-columns: minmax(0, 1fr); } }