:root {
  --ink: #151515;
  --ink-soft: #232323;
  --paper: #f7f6f2;
  --white: #ffffff;
  --orange: #f36a21;
  --orange-dark: #b84710;
  --silver: #c8c9c7;
  --silver-light: #e4e4e1;
  --muted: #686966;
  --line: rgba(21, 21, 21, 0.14);
  --shell: min(1180px, calc(100% - 40px));
  --radius: 2px;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

body.nav-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

button,
input,
textarea {
  font: inherit;
}

img,
svg {
  max-width: 100%;
}

::selection {
  color: var(--ink);
  background: var(--orange);
}

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  color: var(--ink);
  background: var(--white);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.section {
  padding: 120px 0;
}

.section-dark {
  color: var(--white);
  background: var(--ink);
}

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--white);
  background: rgba(21, 21, 21, 0.82);
  backdrop-filter: blur(16px);
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.site-header.is-scrolled {
  background: rgba(21, 21, 21, 0.96);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

.header-inner {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-logo {
  display: block;
  width: clamp(140px, 14vw, 165px);
  height: auto;
  border-radius: 2px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.main-nav a {
  color: #dededb;
  font-size: 0.83rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.main-nav a:not(.nav-contact):not(.nav-portal)::after {
  display: block;
  width: 0;
  height: 2px;
  margin-top: 3px;
  content: "";
  background: var(--orange);
  transition: width 180ms ease;
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  width: 100%;
}

.main-nav .nav-contact {
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  transition: border-color 180ms ease, background-color 180ms ease;
}

.main-nav .nav-contact:hover {
  border-color: var(--orange);
  background: rgba(243, 106, 33, 0.1);
}

.main-nav .nav-portal {
  display: inline-flex;
  padding: 9px 12px;
  align-items: center;
  gap: 7px;
  color: #171717;
  background: var(--orange);
}

.main-nav .nav-portal small {
  padding: 2px 5px;
  color: #ffe4d3;
  background: #92380d;
  font-size: 0.43rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.main-nav .nav-portal:hover,
.main-nav .nav-portal:focus-visible {
  color: #fff;
  background: var(--orange-dark);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

.hero {
  position: relative;
  min-height: 780px;
  padding: 172px 0 0;
  overflow: hidden;
}

.hero::before {
  position: absolute;
  top: 0;
  right: 4%;
  width: 430px;
  height: 430px;
  border: 88px solid rgba(243, 106, 33, 0.07);
  border-radius: 50%;
  content: "";
  transform: translate(30%, -34%);
}

.hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to right, transparent, black 48%, black);
}

.hero-layout {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(48px, 8vw, 112px);
  align-items: center;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  color: var(--silver);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow span {
  width: 28px;
  height: 3px;
  background: var(--orange);
}

.eyebrow-dark {
  color: var(--muted);
}

.hero h1,
.section h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.hero h1 {
  max-width: 720px;
  font-size: clamp(4rem, 7.1vw, 7rem);
}

.hero h1 em {
  color: var(--orange);
  font-weight: 500;
}

.hero-lead {
  margin: 34px 0 18px;
  color: var(--white);
  font-size: clamp(1.18rem, 2vw, 1.55rem);
  font-weight: 650;
  line-height: 1.4;
}

.hero-intro {
  max-width: 600px;
  margin: 0;
  color: #bdbdb9;
  font-size: 1rem;
}

.hero-actions {
  display: flex;
  margin-top: 36px;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.button {
  display: inline-flex;
  min-height: 52px;
  padding: 13px 20px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  color: var(--ink);
  background: var(--orange);
}

.button-primary:hover {
  background: #ff7b32;
}

.button-light {
  color: var(--ink);
  background: var(--white);
}

.button-outline-light {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
  background: transparent;
}

.button-outline-light:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.09);
}

.text-link {
  color: var(--white);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration-color: rgba(255, 255, 255, 0.36);
}

.workbench {
  position: relative;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(31, 31, 31, 0.92);
  box-shadow: var(--shadow);
  transform: rotate(1deg);
}

.workbench::before {
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.11);
  content: "";
  pointer-events: none;
}

.workbench-top {
  display: flex;
  padding: 2px 4px 15px;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--silver);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.blueprint {
  position: relative;
  margin: 16px 0;
  padding: 18px;
  border-left: 3px solid var(--orange);
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 18px 18px;
}

.build-list {
  position: relative;
  z-index: 1;
  display: grid;
  margin: 0;
  padding: 0;
  gap: 8px;
  list-style: none;
}

.build-list li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: center;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(21, 21, 21, 0.76);
}

.build-number {
  color: var(--orange);
  font-family: Georgia, serif;
  font-size: 1.12rem;
}

.build-list strong,
.build-list small {
  display: block;
}

.build-list strong {
  font-size: 0.86rem;
}

.build-list small {
  margin-top: 2px;
  color: #a9aaa6;
  font-size: 0.7rem;
}

.workbench-stamp {
  display: flex;
  padding: 0 4px;
  align-items: flex-end;
  justify-content: space-between;
  color: var(--silver);
}

.workbench-stamp span {
  color: var(--orange);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.workbench-stamp small {
  font-size: 0.62rem;
}

.confidence-bar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 88px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.confidence-bar span {
  position: relative;
  padding: 22px 20px 26px 28px;
  color: #c9c9c6;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.confidence-bar span::before {
  position: absolute;
  top: 28px;
  left: 4px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--orange);
  content: "";
  transform: rotate(45deg);
}

.section-heading {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 60px;
}

.section-heading h2,
.approach-intro h2,
.fit-copy h2,
.nextcloud h2,
.contact h2 {
  font-size: clamp(2.65rem, 5vw, 4.8rem);
}

.section-heading > p {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 1.04rem;
}

.section-heading-compact {
  grid-template-columns: 1fr;
  max-width: 850px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.service-card {
  position: relative;
  min-height: 370px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.service-card:hover {
  z-index: 2;
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.11);
  transform: translateY(-4px);
}

.service-card-featured {
  color: var(--white);
  background: var(--ink);
}

.service-card-light {
  background: #ededeb;
}

.card-index {
  position: absolute;
  top: 26px;
  right: 26px;
  color: #9a9b97;
  font-family: Georgia, serif;
  font-size: 0.82rem;
}

.service-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 38px;
  place-items: center;
  border: 1px solid var(--silver);
  color: var(--orange-dark);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.1rem;
  font-weight: 800;
  transform: rotate(-2deg);
}

.service-card-featured .service-icon {
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--orange);
}

.service-card h3 {
  max-width: 280px;
  margin: 0 0 16px;
  font-family: Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.14;
}

.service-card p {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 0.9rem;
}

.service-card-featured p {
  color: #b9b9b5;
}

.tag-list {
  display: flex;
  margin: auto 0 0;
  padding: 0;
  gap: 7px;
  flex-wrap: wrap;
  list-style: none;
}

.card-link {
  display: flex;
  margin-top: 24px;
  padding-top: 16px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  color: var(--orange-dark);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.045em;
  text-decoration: none;
  text-transform: uppercase;
}

.card-link span {
  font-size: 1.15rem;
  transition: transform 180ms ease;
}

.card-link:hover span {
  transform: translateX(5px);
}

.service-card-featured .card-link {
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--orange);
}

.tag-list li {
  padding: 4px 8px;
  border: 1px solid var(--silver-light);
  color: #646560;
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.service-card-featured .tag-list li {
  border-color: rgba(255, 255, 255, 0.18);
  color: #d0d0cc;
}

.fit-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(60px, 10vw, 140px);
  align-items: center;
}

.fit-visual {
  position: relative;
  display: grid;
  min-height: 420px;
  place-content: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
}

.ruler {
  position: absolute;
  display: flex;
  top: 18px;
  right: 24px;
  left: 24px;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  color: #81817e;
  font-size: 0.6rem;
}

.ruler span::before {
  display: block;
  width: 1px;
  height: 8px;
  margin-bottom: 3px;
  content: "";
  background: rgba(255, 255, 255, 0.3);
}

.fit-piece,
.fit-result {
  width: min(290px, calc(100vw - 100px));
  padding: 14px 18px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.fit-piece-a {
  margin-left: -54px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--silver);
  transform: rotate(-3deg);
}

.fit-piece-b {
  margin: 12px 0 0 54px;
  border: 1px solid var(--orange);
  color: var(--orange);
  transform: rotate(2deg);
}

.fit-joint {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--orange);
  font-weight: 900;
  transform: translate(-50%, -50%);
}

.fit-result {
  margin: 46px auto 0;
  color: var(--ink);
  background: var(--silver-light);
}

.measure-line {
  display: flex;
  margin-top: 20px;
  align-items: center;
  gap: 10px;
  color: #898985;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.measure-line span {
  height: 1px;
  flex: 1;
  background: rgba(255, 255, 255, 0.2);
}

.fit-copy p:not(.eyebrow) {
  max-width: 620px;
  margin: 30px 0;
  color: #bdbdb9;
  font-size: 1.02rem;
}

.fit-copy blockquote {
  margin: 38px 0 0;
  padding: 18px 0 18px 24px;
  border-left: 4px solid var(--orange);
  font-family: Georgia, serif;
  font-size: 1.4rem;
  font-style: italic;
}

.experience {
  background: #eeede8;
}

.experience-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 90px;
  align-items: start;
}

.timeline {
  position: relative;
  padding-left: 40px;
}

.timeline::before {
  position: absolute;
  top: 10px;
  bottom: 20px;
  left: 6px;
  width: 1px;
  content: "";
  background: #b5b5b0;
}

.timeline-item {
  position: relative;
  padding: 0 0 58px 25px;
}

.timeline-marker {
  position: absolute;
  top: 8px;
  left: -40px;
  width: 14px;
  height: 14px;
  border: 3px solid #eeede8;
  outline: 2px solid var(--orange-dark);
  background: var(--orange);
  transform: rotate(45deg);
}

.timeline-context {
  margin: 0 0 7px;
  color: var(--orange-dark);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.timeline h3 {
  margin: 0 0 12px;
  font-family: Georgia, serif;
  font-size: 1.6rem;
  line-height: 1.2;
}

.timeline-item > p:last-child {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
}

.experience-note {
  position: sticky;
  top: 110px;
  padding: 40px 34px 32px;
  border-top: 5px solid var(--orange);
  background: var(--white);
  box-shadow: 12px 16px 0 #d9d8d3;
  transform: rotate(1.3deg);
}

.note-pin {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--silver);
  box-shadow: inset 0 0 0 3px #9d9e9b;
}

.note-title {
  margin: 0 0 12px;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.experience-note p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.87rem;
}

.approach {
  background: var(--white);
}

.approach-intro {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 70px;
  align-items: start;
  margin-bottom: 64px;
}

.approach-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.approach-steps li {
  min-height: 280px;
  padding: 30px 26px;
  border-right: 1px solid var(--line);
}

.approach-steps li:first-child {
  border-left: 1px solid var(--line);
}

.step-number {
  display: block;
  margin-bottom: 58px;
  color: var(--orange-dark);
  font-family: Georgia, serif;
  font-size: 1rem;
}

.approach-steps h3 {
  margin: 0 0 14px;
  font-family: Georgia, serif;
  font-size: 1.3rem;
  line-height: 1.18;
}

.approach-steps p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.approach-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 34px;
  gap: 24px;
}

.approach-values p {
  display: flex;
  margin: 0;
  align-items: baseline;
  gap: 10px;
}

.approach-values strong {
  color: var(--orange-dark);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.approach-values span {
  color: var(--muted);
  font-size: 0.8rem;
}

.nextcloud {
  color: var(--white);
  background: var(--orange-dark);
}

.nextcloud-layout {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 100px;
  align-items: center;
}

.nextcloud .eyebrow {
  color: #fff0e8;
}

.nextcloud .eyebrow span {
  background: var(--ink);
}

.nextcloud p:not(.eyebrow) {
  max-width: 620px;
  margin: 28px 0 34px;
  color: #ffded0;
}

.nextcloud-board {
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: var(--paper);
  box-shadow: 16px 18px 0 rgba(21, 21, 21, 0.24);
  transform: rotate(-1deg);
}

.board-header {
  display: flex;
  padding: 12px 16px;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid #d5d5d1;
  color: var(--ink);
  font-size: 0.72rem;
}

.board-header span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b4b5b2;
}

.board-header span:first-child {
  background: var(--orange);
}

.board-header strong {
  margin-left: auto;
}

.board-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 18px;
  gap: 10px;
}

.board-grid > div {
  display: flex;
  min-height: 135px;
  padding: 18px;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid #d5d5d1;
  color: var(--ink);
  background: var(--white);
}

.board-icon {
  margin-bottom: auto;
  color: var(--orange-dark);
  font-size: 1.25rem;
}

.board-grid strong {
  font-size: 0.9rem;
}

.board-grid small {
  color: var(--muted);
  font-size: 0.68rem;
}

.contact-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(60px, 10vw, 130px);
  align-items: start;
}

.contact-copy > p:not(.eyebrow) {
  max-width: 540px;
  margin: 28px 0 40px;
  color: #bdbdb9;
}

.contact-details {
  display: grid;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.contact-details p {
  display: grid;
  grid-template-columns: 150px 1fr;
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.78rem;
}

.contact-details span {
  color: #8f908c;
  text-transform: uppercase;
}

.contact-details strong {
  color: #d6d6d2;
  font-weight: 650;
}

.contact-details a {
  color: inherit;
  text-decoration-color: rgba(214, 214, 210, 0.5);
  text-underline-offset: 0.2em;
}

.contact-details a:hover,
.contact-details a:focus-visible {
  color: #fff;
  text-decoration-color: var(--orange);
}

.contact-form {
  padding: clamp(28px, 5vw, 48px);
  color: var(--ink);
  background: var(--paper);
}

.form-row {
  margin-bottom: 22px;
}

.form-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-row label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.form-row label span {
  color: var(--orange-dark);
}

.form-row input,
.form-row textarea {
  width: 100%;
  border: 0;
  border-bottom: 2px solid #b8b9b6;
  border-radius: 0;
  outline: none;
  color: var(--ink);
  background: transparent;
  transition: border-color 180ms ease;
}

.form-row input {
  height: 42px;
}

.form-row textarea {
  padding: 9px 0;
  resize: vertical;
}

.form-row input:focus,
.form-row textarea:focus {
  border-color: var(--orange-dark);
}

.form-row input[aria-invalid="true"],
.form-row textarea[aria-invalid="true"] {
  border-color: #a51e1e;
}

.consent-row {
  display: flex;
  margin: 4px 0 24px;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
  font-size: 0.74rem;
}

.consent-row input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--orange-dark);
}

.button-submit {
  width: 100%;
  border: 0;
}

.form-hint,
.form-status {
  margin: 13px 0 0;
  color: var(--muted);
  font-size: 0.7rem;
}

.form-status:not(:empty) {
  padding: 10px 12px;
  border-left: 3px solid var(--orange-dark);
  background: #e6e5e0;
}

.site-footer {
  color: var(--silver);
  background: #0d0d0d;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 120px;
  align-items: center;
  gap: 30px;
}

.brand-footer .brand-logo { width: 170px; }

.footer-inner > p {
  margin: 0;
  color: #858682;
  font-size: 0.72rem;
}

.footer-links {
  display: flex;
  justify-content: flex-end;
  gap: 22px;
  font-size: 0.72rem;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 650ms ease, transform 650ms ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 980px) {
  .section {
    padding: 92px 0;
  }

  .hero {
    padding-top: 148px;
  }

  .hero-layout,
  .fit-layout,
  .nextcloud-layout,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .hero-layout {
    gap: 64px;
  }

  .workbench {
    max-width: 650px;
  }

  .confidence-bar {
    grid-template-columns: repeat(2, 1fr);
  }

  .section-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fit-visual {
    order: 2;
  }

  .experience-layout {
    grid-template-columns: 1fr 300px;
    gap: 50px;
  }

  .approach-intro {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .approach-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .approach-steps li:nth-child(2) {
    border-right: 1px solid var(--line);
  }

  .approach-values {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  :root {
    --shell: min(100% - 28px, 640px);
  }

  html {
    scroll-padding-top: 76px;
  }

  .header-inner {
    min-height: 70px;
  }

  .brand-logo,
  .brand-footer .brand-logo {
    width: 132px;
  }

  .nav-toggle {
    display: block;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .main-nav {
    position: fixed;
    top: 70px;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    padding: 44px 24px;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    background: rgba(21, 21, 21, 0.99);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 220ms ease, visibility 220ms ease;
  }

  .main-nav.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .main-nav a {
    padding: 18px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    font-family: Georgia, serif;
    font-size: 1.45rem;
  }

  .main-nav .nav-contact {
    margin-top: 10px;
    padding: 15px 16px;
    text-align: center;
  }

  .main-nav .nav-portal {
    margin-top: 24px;
    padding: 15px 16px;
    justify-content: center;
    font-family: inherit;
    font-size: 0.9rem;
  }

  .section {
    padding: 76px 0;
  }

  .hero {
    min-height: auto;
    padding-top: 132px;
  }

  .hero h1 {
    font-size: clamp(3.3rem, 16vw, 5.2rem);
  }

  .hero-lead {
    margin-top: 26px;
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .workbench {
    padding: 14px;
    transform: none;
  }

  .blueprint {
    padding: 10px;
  }

  .confidence-bar {
    grid-template-columns: 1fr;
    margin-top: 60px;
  }

  .confidence-bar span {
    padding-block: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .confidence-bar span::before {
    top: 20px;
  }

  .section-heading h2,
  .approach-intro h2,
  .fit-copy h2,
  .nextcloud h2,
  .contact h2 {
    font-size: clamp(2.4rem, 12vw, 3.7rem);
  }

  .service-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    min-height: 330px;
  }

  .fit-visual {
    min-height: 360px;
  }

  .experience-layout {
    grid-template-columns: 1fr;
  }

  .experience-note {
    position: relative;
    top: auto;
    margin-top: -16px;
  }

  .timeline {
    padding-left: 26px;
  }

  .timeline-item {
    padding-left: 18px;
  }

  .timeline-marker {
    left: -27px;
  }

  .approach-steps {
    grid-template-columns: 1fr;
  }

  .approach-steps li {
    min-height: auto;
    border-left: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .approach-steps li:last-child {
    border-bottom: 0;
  }

  .step-number {
    margin-bottom: 28px;
  }

  .board-grid {
    padding: 10px;
  }

  .board-grid > div {
    min-height: 120px;
    padding: 14px;
  }

  .contact-details p {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    padding: 34px 0;
    justify-items: start;
    gap: 20px;
  }

  .footer-links {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .site-header,
  .nav-toggle,
  .hero-actions,
  .contact-form {
    display: none;
  }

  .hero,
  .section {
    padding: 32px 0;
  }

  .section-dark,
  .nextcloud {
    color: #000;
    background: #fff;
  }
}

/* Pages de savoir-faire */
.detail-hero {
  position: relative;
  padding: 158px 0 96px;
  overflow: hidden;
}

.detail-hero::after {
  position: absolute;
  right: -110px;
  bottom: -180px;
  width: 440px;
  height: 440px;
  border: 80px solid rgba(243, 106, 33, 0.08);
  border-radius: 50%;
  content: "";
}

.breadcrumb {
  position: relative;
  z-index: 2;
  display: flex;
  margin: 0 0 50px;
  padding: 0;
  gap: 9px;
  color: #92938f;
  font-size: 0.72rem;
  list-style: none;
}

.breadcrumb a {
  color: #d0d0cc;
}

.detail-hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(54px, 9vw, 120px);
  align-items: center;
}

.detail-hero h1 {
  max-width: 780px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.4rem, 6.8vw, 6.6rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.94;
}

.detail-hero h1 em {
  color: var(--orange);
  font-weight: 500;
}

.detail-lead {
  max-width: 680px;
  margin: 30px 0 0;
  color: #c5c5c1;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.55;
}

.detail-tags {
  display: flex;
  margin: 30px 0 0;
  padding: 0;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
}

.detail-tags li {
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #d7d7d3;
  font-size: 0.67rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nc-demo-actions {
  display: flex;
  margin-top: 28px;
  gap: 12px;
  flex-wrap: wrap;
}

.nc-demo-note {
  max-width: 650px;
  margin: 14px 0 0;
  color: #aaa9a5;
  font-size: 0.78rem;
  line-height: 1.55;
}

.detail-sketch {
  position: relative;
  min-height: 390px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  box-shadow: var(--shadow);
  transform: rotate(1deg);
}

.sketch-label {
  display: block;
  margin-bottom: 44px;
  color: #8e8f8b;
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.sketch-stack {
  display: grid;
  gap: 12px;
}

.sketch-stack span {
  display: flex;
  min-height: 54px;
  padding: 12px 16px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #d7d7d3;
  background: rgba(21, 21, 21, 0.75);
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.sketch-stack span::after {
  color: var(--orange);
  content: attr(data-mark);
  font-family: ui-monospace, monospace;
  font-size: 0.9rem;
}

.sketch-result {
  margin-top: 18px;
  padding: 15px;
  color: var(--ink);
  background: var(--orange);
  font-family: Georgia, serif;
  font-size: 1.05rem;
  text-align: center;
}

.detail-section {
  padding: 105px 0;
}

.detail-section-alt {
  background: #ebeae5;
}

.detail-heading {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  margin-bottom: 54px;
  gap: 70px;
  align-items: start;
}

.detail-heading h2,
.scope-copy h2,
.detail-cta h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.45rem, 4.6vw, 4.35rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.detail-heading > p,
.scope-copy > p {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
}

.use-case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.use-case {
  min-height: 265px;
  padding: 30px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.use-case-index {
  display: block;
  margin-bottom: 40px;
  color: var(--orange-dark);
  font-family: Georgia, serif;
}

.use-case h3 {
  margin: 0 0 12px;
  font-family: Georgia, serif;
  font-size: 1.35rem;
  line-height: 1.15;
}

.use-case p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

/* Exemples anonymisés de la page Applications web */
.web-project-list {
  display: grid;
  gap: 28px;
}

.web-project {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(440px, 1.1fr);
  min-height: 500px;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 22px 60px rgba(21, 21, 21, 0.08);
  overflow: hidden;
}

.web-project:nth-child(even) {
  grid-template-columns: minmax(440px, 1.1fr) minmax(0, 0.9fr);
}

.web-project:nth-child(even) .web-project-copy {
  order: 2;
}

.web-project-copy {
  display: flex;
  padding: clamp(32px, 5vw, 58px);
  justify-content: center;
  flex-direction: column;
}

.web-project-index {
  margin-bottom: 22px;
  color: var(--orange-dark);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.web-project h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.web-project-copy > p {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 0.96rem;
}

.web-feature-list {
  display: flex;
  margin: 28px 0 0;
  padding: 0;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
}

.web-feature-list li {
  padding: 7px 10px;
  border: 1px solid var(--line);
  color: #464743;
  background: var(--paper);
  font-size: 0.7rem;
  font-weight: 750;
}

.web-project-link {
  align-self: flex-start;
  margin-top: 26px;
  color: var(--orange-dark);
  font-size: 0.82rem;
  font-weight: 850;
  text-decoration-color: rgba(184, 71, 16, 0.35);
}

.web-app-window {
  min-width: 0;
  margin: clamp(24px, 4vw, 48px);
  align-self: center;
  border: 1px solid rgba(21, 21, 21, 0.15);
  border-radius: 13px;
  box-shadow: 0 22px 60px rgba(21, 21, 21, 0.17);
  overflow: hidden;
}

.web-window-bar {
  display: flex;
  min-height: 45px;
  padding: 0 16px;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid rgba(21, 21, 21, 0.1);
  background: #eeefec;
}

.web-window-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c1c2be;
}

.web-window-bar i:first-child {
  background: var(--orange);
}

.web-window-bar span {
  margin-left: 7px;
  color: #5f605d;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.web-sales-window {
  color: var(--white);
  background: #1a1b1b;
}

.web-sales-window .web-window-bar {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.09);
  background: #101111;
}

.web-sales-window .web-window-bar span {
  color: #d4d4d1;
}

.web-sales-metrics,
.web-ledger-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 20px;
}

.web-sales-metrics div {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
}

.web-sales-metrics small,
.web-ledger-summary small {
  display: block;
  margin-bottom: 7px;
  color: #a9aaa6;
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.web-sales-metrics strong {
  color: var(--orange);
  font-family: Georgia, serif;
  font-size: 1.25rem;
  font-weight: 500;
}

.web-sales-content {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 18px;
  padding: 2px 20px 24px;
}

.web-sales-chart {
  display: flex;
  min-height: 190px;
  padding: 18px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.web-sales-chart span {
  width: 16%;
  height: var(--bar);
  background: linear-gradient(var(--orange), var(--orange-dark));
}

.web-sales-list {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.web-sales-list b {
  display: block;
  margin-bottom: 12px;
  font-size: 0.78rem;
}

.web-sales-list p {
  display: flex;
  margin: 0;
  padding: 12px 0;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #d1d1ce;
  font-size: 0.68rem;
}

.web-sales-list em {
  color: #86d2a0;
  font-style: normal;
}

.web-ledger-window {
  background: #f5f2e9;
}

.web-ledger-summary div {
  padding: 15px;
  border: 1px solid rgba(21, 21, 21, 0.1);
  background: rgba(255, 255, 255, 0.72);
}

.web-ledger-summary .is-total {
  color: var(--white);
  border-color: var(--orange-dark);
  background: var(--orange-dark);
}

.web-ledger-summary strong {
  display: block;
  font-family: Georgia, serif;
  font-size: 1.1rem;
}

.web-ledger-summary .is-total small {
  color: #ffe2d5;
}

.web-ledger-list {
  margin: 0 20px 24px;
  border: 1px solid rgba(21, 21, 21, 0.1);
  background: rgba(255, 255, 255, 0.8);
}

.web-ledger-list div {
  display: grid;
  grid-template-columns: 1fr 0.9fr auto;
  padding: 14px 16px;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid rgba(21, 21, 21, 0.08);
  font-size: 0.74rem;
}

.web-ledger-list div:last-child {
  border-bottom: 0;
}

.web-ledger-list small {
  color: var(--muted);
}

.web-ledger-list b {
  color: #a24a32;
  font-size: 0.72rem;
}

.web-ledger-list .is-positive {
  color: #2e7b4c;
}

.web-planning-window {
  padding-bottom: 18px;
  background: #f2f4f5;
}

.web-planning-head,
.web-planning-row {
  display: grid;
  grid-template-columns: 74px repeat(5, minmax(54px, 1fr));
  margin: 0 16px;
}

.web-planning-head {
  padding-top: 18px;
}

.web-planning-head b {
  padding: 9px 4px;
  color: var(--muted);
  font-size: 0.63rem;
  text-align: center;
}

.web-planning-row strong,
.web-planning-row span {
  display: flex;
  min-height: 48px;
  padding: 6px;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(21, 21, 21, 0.09);
  border-right: 1px solid rgba(21, 21, 21, 0.09);
  font-size: 0.59rem;
  text-align: center;
}

.web-planning-row strong {
  justify-content: flex-start;
  color: #4d4f4d;
}

.web-planning-row .shift-a {
  color: #075d77;
  background: #d8f0f7;
}

.web-planning-row .shift-b {
  color: #70420e;
  background: #fae7c7;
}

.web-planning-row .shift-c {
  color: #723222;
  background: #f7d5cc;
}

.web-planning-status {
  display: flex;
  margin: 16px 16px 0;
  gap: 8px;
  flex-wrap: wrap;
}

.web-planning-status span {
  padding: 7px 9px;
  color: #2c6c46;
  border: 1px solid rgba(44, 108, 70, 0.22);
  background: #e4f3e9;
  font-size: 0.63rem;
  font-weight: 750;
}

.facturx-commitment {
  display: grid;
  grid-template-columns: auto 1fr;
  margin-top: 28px;
  padding: clamp(28px, 5vw, 52px);
  gap: clamp(24px, 4vw, 44px);
  align-items: center;
  color: var(--white);
  background: linear-gradient(135deg, var(--orange-dark), #d65316);
}

.facturx-mark {
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 2rem;
}

.facturx-commitment small {
  color: #ffe1d2;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.facturx-commitment h3 {
  margin: 8px 0 12px;
  font-family: Georgia, serif;
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  font-weight: 500;
  line-height: 1.08;
}

.facturx-commitment p {
  max-width: 800px;
  margin: 0;
  color: #ffe6da;
  font-size: 0.9rem;
}

.facturx-commitment .facturx-regulation,
.fr-facturx-box .facturx-regulation {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.facturx-official-link {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin-top: 16px;
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.55);
  text-underline-offset: 4px;
}

.facturx-official-link:hover,
.facturx-official-link:focus-visible {
  color: var(--white);
  text-decoration-color: var(--white);
}

/* Page FactureReader */
.fr-hero {
  background: radial-gradient(circle at 82% 20%, rgba(243, 106, 33, 0.2), transparent 28%), #151515;
}

.fr-hero-panel {
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  color: var(--white);
  background: #202121;
  box-shadow: var(--shadow);
  transform: rotate(1deg);
}

.fr-panel-top {
  display: flex;
  padding-bottom: 16px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.fr-panel-top strong {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.fr-panel-top span {
  color: #8dd3a6;
  font-size: 0.65rem;
  font-weight: 750;
}

.fr-upload-list {
  display: grid;
  margin-top: 16px;
  gap: 8px;
}

.fr-upload-list div {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  padding: 11px 12px;
  gap: 10px;
  align-items: center;
  background: rgba(255, 255, 255, 0.055);
}

.fr-upload-list b {
  display: grid;
  width: 30px;
  height: 34px;
  place-items: center;
  color: var(--orange);
  border: 1px solid rgba(243, 106, 33, 0.45);
  font-size: 0.58rem;
}

.fr-upload-list span {
  min-width: 0;
  color: #dededb;
  font-size: 0.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fr-upload-list em {
  color: #8dd3a6;
  font-size: 0.62rem;
  font-style: normal;
}

.fr-extracted-card {
  margin-top: 14px;
  padding: 17px;
  color: var(--ink);
  background: var(--paper);
}

.fr-extracted-card > small {
  display: block;
  margin-bottom: 12px;
  color: var(--orange-dark);
  font-size: 0.63rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fr-extracted-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.fr-extracted-grid span {
  padding: 9px;
  border: 1px solid var(--line);
  font-size: 0.65rem;
}

.fr-extracted-grid b {
  display: block;
  font-size: 0.73rem;
}

.fr-flow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.fr-flow-grid article {
  min-height: 230px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.fr-flow-grid span {
  display: grid;
  width: 44px;
  height: 44px;
  margin-bottom: 32px;
  place-items: center;
  color: var(--white);
  background: var(--orange-dark);
  font-family: Georgia, serif;
}

.fr-flow-grid h3 {
  margin: 0 0 10px;
  font-family: Georgia, serif;
  font-size: 1.25rem;
}

.fr-flow-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.fr-review-layout {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.fr-review-copy h2,
.fr-billing-copy h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(2.5rem, 4.8vw, 4.6rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.fr-review-copy > p,
.fr-billing-copy > p {
  margin: 26px 0 0;
  color: var(--muted);
}

.fr-check-list {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.fr-check-list li {
  position: relative;
  padding: 12px 0 12px 28px;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
}

.fr-check-list li::before {
  position: absolute;
  left: 0;
  color: var(--orange-dark);
  content: "✓";
  font-weight: 900;
}

.fr-review-screen {
  padding: 18px;
  border: 1px solid var(--line);
  background: #eceeea;
  box-shadow: 0 24px 65px rgba(0, 0, 0, 0.12);
}

.fr-review-screen header {
  display: flex;
  padding: 12px 14px;
  justify-content: space-between;
  gap: 12px;
  color: var(--white);
  background: var(--ink);
  font-size: 0.68rem;
}

.fr-review-body {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 12px;
  margin-top: 12px;
}

.fr-pdf-preview {
  display: grid;
  min-height: 340px;
  padding: 28px;
  place-items: center;
  color: #8b8c89;
  border: 1px solid var(--line);
  background: var(--white);
  font-family: Georgia, serif;
  font-size: 1.5rem;
}

.fr-form-preview {
  display: grid;
  align-content: start;
  gap: 9px;
}

.fr-form-preview label {
  padding: 10px;
  color: var(--muted);
  border: 1px solid var(--line);
  background: var(--white);
  font-size: 0.6rem;
}

.fr-form-preview b {
  display: block;
  color: var(--ink);
  font-size: 0.72rem;
}

.fr-form-preview .fr-fake-button {
  display: block;
  padding: 11px;
  color: var(--white);
  background: var(--orange-dark);
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
}

.fr-core-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.fr-core-grid article {
  min-height: 360px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.045);
}

.fr-core-grid > article > span {
  color: var(--orange);
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fr-core-grid h3 {
  margin: 24px 0 12px;
  font-family: Georgia, serif;
  font-size: 1.65rem;
  font-weight: 500;
}

.fr-core-grid p {
  margin: 0;
  color: #bfc0bc;
  font-size: 0.84rem;
}

.fr-mini-ledger,
.fr-mini-bank,
.fr-mini-fec {
  margin-top: 28px;
  padding: 14px;
  color: var(--ink);
  background: var(--paper);
  font-size: 0.66rem;
}

.fr-mini-ledger div,
.fr-mini-bank div {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.fr-mini-ledger div:last-child,
.fr-mini-bank div:last-child {
  border-bottom: 0;
}

.fr-mini-ledger b,
.fr-mini-bank b {
  color: var(--orange-dark);
}

.fr-mini-fec {
  display: grid;
  min-height: 142px;
  place-items: center;
  text-align: center;
}

.fr-mini-fec strong {
  display: block;
  color: var(--orange-dark);
  font-family: Georgia, serif;
  font-size: 2.4rem;
}

.fr-billing-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 8vw, 100px);
  align-items: center;
}

.fr-billing-board {
  padding: 22px;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 22px 60px rgba(21, 21, 21, 0.1);
}

.fr-family {
  display: flex;
  padding: 16px;
  align-items: center;
  gap: 13px;
  border-bottom: 1px solid var(--line);
}

.fr-family > span {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--white);
  border-radius: 50%;
  background: var(--orange-dark);
  font-size: 0.72rem;
  font-weight: 850;
}

.fr-family strong,
.fr-family small {
  display: block;
}

.fr-family small {
  color: var(--muted);
  font-size: 0.68rem;
}

.fr-service-list {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.fr-service-list div {
  display: flex;
  padding: 11px 12px;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  font-size: 0.7rem;
}

.fr-service-list b {
  color: var(--orange-dark);
}

.fr-facturx-box {
  margin-top: 28px;
  padding: 26px;
  color: var(--white);
  background: var(--orange-dark);
}

.fr-facturx-box small {
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.fr-facturx-box h3 {
  margin: 8px 0 10px;
  font-family: Georgia, serif;
  font-size: 1.8rem;
  font-weight: 500;
}

.fr-facturx-box p {
  margin: 0;
  color: #ffe4d7;
  font-size: 0.82rem;
}

.fr-benefit-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.fr-benefit-grid article {
  min-height: 220px;
  padding: 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.fr-benefit-grid span {
  display: block;
  margin-bottom: 30px;
  color: var(--orange-dark);
  font-family: Georgia, serif;
  font-size: 1.3rem;
}

.fr-benefit-grid h3 {
  margin: 0 0 10px;
  font-family: Georgia, serif;
  font-size: 1.08rem;
}

.fr-benefit-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.scope-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(60px, 9vw, 120px);
  align-items: start;
}

.scope-copy > p {
  margin-top: 28px;
}

.scope-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.scope-list li {
  display: grid;
  grid-template-columns: 38px 1fr;
  padding: 20px 0;
  gap: 14px;
  border-bottom: 1px solid var(--line);
}

.scope-list li::before {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--orange-dark);
  color: var(--orange-dark);
  content: "✓";
  font-size: 0.72rem;
  font-weight: 900;
  transform: rotate(-2deg);
}

.scope-list strong,
.scope-list small {
  display: block;
}

.scope-list strong {
  font-family: Georgia, serif;
  font-size: 1.08rem;
}

.scope-list small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.8rem;
}

.detail-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 54px 0 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  list-style: none;
}

.detail-process li {
  min-height: 220px;
  padding: 28px 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.detail-process li:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.detail-process span {
  display: block;
  margin-bottom: 38px;
  color: var(--orange);
  font-family: Georgia, serif;
}

.detail-process h3 {
  margin: 0 0 10px;
  font-family: Georgia, serif;
  font-size: 1.2rem;
}

.detail-process p {
  margin: 0;
  color: #aeb0ab;
  font-size: 0.8rem;
}

.detail-note {
  margin-top: 34px;
  padding: 18px 22px;
  border-left: 4px solid var(--orange);
  color: #c7c7c3;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.82rem;
}

.detail-cta {
  padding: 94px 0;
  color: var(--white);
  background: var(--orange-dark);
}

.detail-cta-layout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 50px;
  align-items: center;
}

.detail-cta p {
  max-width: 650px;
  margin: 22px 0 0;
  color: #ffded0;
}

.detail-cta-actions {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-direction: column;
}

.detail-cta-actions .button {
  min-width: 245px;
}

.detail-footer-nav {
  padding: 30px 0;
  background: #0d0d0d;
}

.detail-footer-nav .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.detail-footer-nav a {
  color: var(--silver);
  font-size: 0.76rem;
}

@media (max-width: 980px) {
  .detail-hero-layout,
  .scope-layout {
    grid-template-columns: 1fr;
  }

  .detail-sketch {
    max-width: 650px;
  }

  .detail-heading {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .use-case-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .web-project,
  .web-project:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .web-project:nth-child(even) .web-project-copy {
    order: initial;
  }

  .fr-review-layout,
  .fr-billing-layout {
    grid-template-columns: 1fr;
  }

  .fr-flow-grid,
  .fr-core-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fr-benefit-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .web-app-window {
    width: calc(100% - 48px);
    max-width: 680px;
    margin-top: 0;
  }

  .detail-process {
    grid-template-columns: repeat(2, 1fr);
  }

  .detail-cta-layout {
    grid-template-columns: 1fr;
  }

  .detail-cta-actions {
    max-width: 340px;
  }
}

@media (max-width: 760px) {
  .nc-demo-actions,
  .detail-cta-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .nc-demo-actions .button,
  .detail-cta-actions .button {
    width: 100%;
  }

  .detail-hero {
    padding: 126px 0 72px;
  }

  .breadcrumb {
    margin-bottom: 34px;
  }

  .detail-hero h1 {
    font-size: clamp(3rem, 15vw, 4.6rem);
  }

  .detail-section {
    padding: 76px 0;
  }

  .detail-sketch {
    min-height: 340px;
    padding: 20px;
    transform: none;
  }

  .use-case-grid,
  .detail-process {
    grid-template-columns: 1fr;
  }

  .use-case {
    min-height: auto;
  }

  .web-project {
    min-height: 0;
  }

  .web-project-copy {
    padding: 30px 24px;
  }

  .facturx-commitment {
    grid-template-columns: 1fr;
  }

  .facturx-mark {
    width: 68px;
    height: 68px;
    font-size: 1.4rem;
  }

  .web-app-window {
    width: calc(100% - 32px);
    margin: 0 16px 22px;
  }

  .web-sales-metrics,
  .web-ledger-summary {
    grid-template-columns: 1fr;
  }

  .web-sales-content {
    grid-template-columns: 1fr;
  }

  .web-sales-chart {
    min-height: 130px;
  }

  .web-ledger-list div {
    grid-template-columns: 1fr auto;
  }

  .web-ledger-list small {
    display: none;
  }

  .web-planning-head,
  .web-planning-row {
    grid-template-columns: 58px repeat(5, minmax(46px, 1fr));
    margin-inline: 8px;
  }

  .web-planning-row strong,
  .web-planning-row span {
    min-height: 44px;
    padding: 4px 2px;
    font-size: 0.52rem;
  }

  .fr-hero-panel {
    transform: none;
  }

  .fr-flow-grid,
  .fr-core-grid,
  .fr-benefit-grid {
    grid-template-columns: 1fr;
  }

  .fr-flow-grid article,
  .fr-core-grid article,
  .fr-benefit-grid article {
    min-height: auto;
  }

  .fr-review-body {
    grid-template-columns: 1fr;
  }

  .fr-pdf-preview {
    min-height: 190px;
  }

  .detail-process li {
    min-height: auto;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }

  .detail-process span {
    margin-bottom: 20px;
  }

  .detail-footer-nav .shell {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Démonstrations visuelles de la page Nextcloud */
.nc-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.nc-tool {
  --tool-color: #177ac2;
  --tool-tint: #eef7fc;
  display: flex;
  min-height: 430px;
  padding: 26px;
  flex-direction: column;
  border: 1px solid rgba(21, 21, 21, 0.1);
  border-radius: 16px;
  background: linear-gradient(145deg, var(--tool-tint), #fff 72%);
  box-shadow: 0 16px 44px rgba(30, 42, 54, 0.07);
}

.nc-tool-green { --tool-color: #258757; --tool-tint: #eef8f2; }
.nc-tool-orange { --tool-color: #ef642b; --tool-tint: #fff3ed; }
.nc-tool-violet { --tool-color: #7b4bd2; --tool-tint: #f5f0fe; }
.nc-tool-pink { --tool-color: #de3b70; --tool-tint: #fff0f5; }
.nc-tool-gold { --tool-color: #e59a06; --tool-tint: #fff8e8; }
.nc-tool-teal { --tool-color: #07838c; --tool-tint: #ebf8f8; }
.nc-tool-purple { --tool-color: #7655d6; --tool-tint: #f4f0fe; }

.nc-tool-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nc-tool-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: var(--tool-color);
  font-size: 1.35rem;
  font-weight: 900;
  box-shadow: 0 7px 17px rgba(28, 38, 48, 0.14);
}

.nc-tool h3 {
  margin: 0;
  color: var(--tool-color);
  font-family: Georgia, serif;
  font-size: 1.35rem;
  line-height: 1.1;
}

.nc-tool > p {
  margin: 16px 0 20px;
  color: #505653;
  font-size: 0.88rem;
  line-height: 1.5;
}

.mini-window {
  position: relative;
  min-height: 190px;
  margin-top: auto;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgba(21, 21, 21, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 9px 24px rgba(28, 38, 48, 0.08);
}

.mini-bar {
  display: flex;
  padding-bottom: 11px;
  gap: 5px;
  border-bottom: 1px solid #e8e9e5;
}

.mini-bar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c7c9c6;
}

.file-row {
  display: grid;
  grid-template-columns: 12px 19px 1fr;
  padding: 8px 4px;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #ecece9;
  color: #435363;
  font-size: 0.7rem;
}

.file-row b {
  color: #9aa1a5;
}

.file-row span,
.mini-knowledge i {
  width: 17px;
  height: 12px;
  border-radius: 2px;
  background: var(--tool-color);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.25);
}

.calendar-head {
  margin-bottom: 12px;
  color: #65706d;
  font-size: 0.68rem;
  text-align: center;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  height: 132px;
  border-top: 1px solid #e7e8e4;
  border-left: 1px solid #e7e8e4;
}

.calendar-grid i {
  border-right: 1px solid #e7e8e4;
  border-bottom: 1px solid #e7e8e4;
}

.calendar-event {
  position: absolute;
  padding: 4px 7px;
  border-radius: 3px;
  color: #20543c;
  background: #bfeacc;
  font-size: 0.58rem;
}

.event-a { top: 91px; left: 22%; }
.event-b { right: 13%; bottom: 31px; color: #254874; background: #cfe2fb; }

.mini-talk {
  display: grid;
  grid-template-columns: 1.55fr 0.7fr;
  padding: 6px;
  gap: 5px;
  background: #15242e;
}

.talk-main,
.talk-side span {
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #fff;
  background: radial-gradient(circle at 50% 33%, #ffd3b0 0 12%, transparent 13%), linear-gradient(145deg, #2e6b80, #172c38);
  font-size: 0.67rem;
  font-weight: 900;
}

.talk-side {
  display: grid;
  gap: 5px;
}

.talk-side span:first-child { background: radial-gradient(circle at 50% 33%, #f2c7a1 0 13%, transparent 14%), linear-gradient(145deg, #74658f, #302d47); }
.talk-side span:last-child { background: radial-gradient(circle at 50% 33%, #e5b28f 0 13%, transparent 14%), linear-gradient(145deg, #4e775e, #253a2d); }

.talk-controls {
  position: absolute;
  right: 16%;
  bottom: 12px;
  left: 16%;
  display: flex;
  padding: 6px 10px;
  justify-content: center;
  gap: 8px;
  border-radius: 20px;
  background: rgba(5, 10, 14, 0.75);
}

.talk-controls i {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #e2e9ec;
}

.talk-controls .hangup { background: #e54242; }

.mini-tasks > div {
  display: grid;
  grid-template-columns: 20px 1fr 24px;
  padding: 10px 2px;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid #ecece9;
  color: #4b5254;
  font-size: 0.66rem;
}

.mini-tasks i {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 1px solid #aeb3b5;
  border-radius: 50%;
  font-style: normal;
}

.mini-tasks i.done { border-color: #2e9661; color: #fff; background: #2e9661; }
.mini-tasks b { height: 4px; border-radius: 4px; background: var(--tool-color); }

.mini-form strong {
  display: block;
  margin-bottom: 9px;
  color: #3a464a;
  font-size: 0.7rem;
}

.mini-form label {
  display: block;
  margin-top: 8px;
  color: #69706f;
  font-size: 0.57rem;
}

.mini-form label span {
  display: block;
  height: 20px;
  margin-top: 3px;
  border: 1px solid #dcdedb;
  border-radius: 3px;
}

.mini-form .mini-button {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 3px;
  color: #fff;
  background: var(--tool-color);
  font-size: 0.57rem;
}

.mini-table > div {
  display: grid;
  grid-template-columns: 0.65fr 1.2fr 0.8fr;
  padding: 9px 4px;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #ecece9;
  color: #4f5657;
  font-size: 0.58rem;
}

.mini-table .table-head { color: #293537; font-weight: 800; }
.mini-table em { padding: 3px; border-radius: 3px; color: #fff; background: #e59a06; font-style: normal; text-align: center; }
.mini-table em.ok { background: #2c9760; }

.mini-knowledge > div {
  display: grid;
  grid-template-columns: 12px 18px 1fr;
  padding: 9px 3px;
  align-items: center;
  gap: 7px;
  color: #455052;
  font-size: 0.63rem;
}

.mini-knowledge b { color: #9b9f9f; }

.mini-photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 7px;
  gap: 7px;
}

.mini-photos i {
  position: relative;
  min-height: 78px;
  overflow: hidden;
  border-radius: 5px;
  background: linear-gradient(165deg, #93c8ec 0 45%, #e9dfbf 46% 66%, #4b9456 67%);
}

.mini-photos i:nth-child(2) { background: linear-gradient(165deg, #9bd1ef 0 42%, #70767b 43% 62%, #e99a39 63% 68%, #6b8e43 69%); }
.mini-photos i:nth-child(3) { background: linear-gradient(165deg, #9dcdec 0 44%, #dcd0ad 45% 65%, #739d54 66%); }
.mini-photos i:nth-child(4) { background: linear-gradient(165deg, #b2d7ec 0 48%, #d4c79e 49% 66%, #638e49 67%); }

.sovereignty {
  color: #fff;
  background: #073b68;
}

.sovereignty .eyebrow,
.sovereignty-heading > p {
  color: #c9dced;
}

.sovereignty-layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: stretch;
}

.sovereignty-diagram {
  display: flex;
  padding: 26px;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 22px 22px;
}

.sovereignty-boundary {
  position: relative;
  padding: 40px 22px 24px;
  border: 2px dashed rgba(255, 255, 255, 0.35);
}

.boundary-label {
  position: absolute;
  top: -11px;
  left: 18px;
  padding: 2px 9px;
  color: #ffdbc7;
  background: #073b68;
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sovereignty-flow {
  display: grid;
  grid-template-columns: 1fr auto 1.08fr auto 1fr;
  gap: 9px;
  align-items: center;
}

.sovereignty-flow > b { color: var(--orange); font-size: 1.3rem; }

.flow-node {
  display: flex;
  min-height: 140px;
  padding: 14px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(2, 28, 52, 0.72);
  text-align: center;
}

.flow-node > span {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 13px;
  place-items: center;
  border: 1px solid var(--orange);
  border-radius: 50%;
  color: var(--orange);
  font-family: Georgia, serif;
  font-size: 1.1rem;
}

.flow-node strong { font-size: 0.76rem; }
.flow-node small { margin-top: 5px; color: #a9c1d6; font-size: 0.61rem; }
.flow-node-main { border-color: var(--orange); background: rgba(243, 106, 33, 0.12); }

.security-gates {
  display: flex;
  margin-top: 20px;
  gap: 7px;
  flex-wrap: wrap;
}

.security-gates span {
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #d2e1ed;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.6rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sovereignty-points {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.sovereignty-points article {
  display: grid;
  grid-template-columns: 40px 1fr;
  padding: 18px 0;
  gap: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.sovereignty-points article > span {
  color: var(--orange);
  font-family: Georgia, serif;
}

.sovereignty-points h3 {
  margin: 0 0 5px;
  font-family: Georgia, serif;
  font-size: 1.12rem;
}

.sovereignty-points p {
  margin: 0;
  color: #bed0df;
  font-size: 0.78rem;
}

.sovereignty-note {
  margin: 42px 0 0;
  padding: 18px 22px;
  border-left: 4px solid var(--orange);
  color: #ccdeeb;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.8rem;
}

.sovereignty-note strong { color: #fff; }

@media (max-width: 980px) {
  .sovereignty-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nc-tool-grid { grid-template-columns: 1fr; }
  .nc-tool { min-height: 405px; padding: 20px; }
  .sovereignty-diagram { padding: 18px; }
  .sovereignty-flow { grid-template-columns: 1fr; }
  .sovereignty-flow > b { transform: rotate(90deg); text-align: center; }
  .flow-node { min-height: 120px; }
}

/* Page Domotique & acquisition */
.ha-example-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.ha-example {
  --ha-color: #177ac2;
  --ha-tint: #eef7fc;
  display: flex;
  min-height: 420px;
  padding: 26px;
  flex-direction: column;
  border: 1px solid rgba(21, 21, 21, 0.1);
  border-radius: 16px;
  background: linear-gradient(145deg, var(--ha-tint), #fff 72%);
  box-shadow: 0 16px 44px rgba(30, 42, 54, 0.07);
}

.ha-example-teal { --ha-color: #07838c; --ha-tint: #ebf8f8; }
.ha-example-orange { --ha-color: #ef642b; --ha-tint: #fff3ed; }
.ha-example-violet { --ha-color: #7655d6; --ha-tint: #f4f0fe; }
.ha-example-title { display: flex; align-items: center; gap: 12px; }

.ha-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: var(--ha-color);
  font-size: 1.25rem;
  font-weight: 900;
  box-shadow: 0 7px 17px rgba(28, 38, 48, 0.14);
}

.ha-example h3 { margin: 0; color: var(--ha-color); font-family: Georgia, serif; font-size: 1.35rem; line-height: 1.1; }
.ha-example > p { margin: 16px 0 20px; color: #505653; font-size: 0.88rem; line-height: 1.5; }

.ha-screen {
  position: relative;
  min-height: 200px;
  margin-top: auto;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(21, 21, 21, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 9px 24px rgba(28, 38, 48, 0.08);
}

.ha-screen-bar { display: flex; padding-bottom: 11px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e6e8e5; color: #3e4b50; font-size: 0.68rem; }
.ha-screen-bar b { color: #2a9460; font-size: 0.55rem; text-transform: uppercase; }
.ha-gauge { display: flex; padding: 22px 7px 13px; align-items: center; justify-content: space-between; }
.ha-gauge strong { color: #26363e; font-family: Georgia, serif; font-size: 2.2rem; font-weight: 500; }
.ha-gauge small { font-size: 0.8rem; }
.ha-gauge i { width: 64px; height: 64px; border: 10px solid #dde9ef; border-top-color: var(--ha-color); border-right-color: var(--ha-color); border-radius: 50%; transform: rotate(-28deg); }
.ha-chart { display: flex; height: 44px; padding-top: 6px; align-items: flex-end; gap: 5px; border-bottom: 1px solid #cfd6d6; }
.ha-chart i { width: 100%; height: 30%; border-radius: 2px 2px 0 0; background: var(--ha-color); opacity: 0.72; }
.ha-chart i:nth-child(2), .ha-chart i:nth-child(8) { height: 44%; }
.ha-chart i:nth-child(3), .ha-chart i:nth-child(7) { height: 61%; }
.ha-chart i:nth-child(4), .ha-chart i:nth-child(6) { height: 76%; }
.ha-chart i:nth-child(5) { height: 90%; }

.ha-frost-screen {
  display: grid;
  grid-template-columns: 1fr auto 0.82fr;
  gap: 12px;
  align-items: center;
}

.frost-probes {
  display: grid;
  gap: 7px;
}

.frost-probes span {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 9px 10px;
  align-items: center;
  gap: 8px;
  border: 1px solid #dce4e7;
  border-radius: 7px;
  color: #32464f;
  background: #f7fafb;
}

.frost-probes i {
  color: var(--ha-color);
  font-family: Georgia, serif;
  font-size: 1rem;
  font-style: normal;
}

.frost-probes small {
  color: #748084;
  font-size: 0.55rem;
  text-align: right;
}

.frost-radio {
  color: var(--ha-color);
  font-size: 0.55rem;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}

.frost-radio i {
  display: block;
  margin-top: 5px;
  font-size: 1rem;
  font-style: normal;
}

.frost-gateway {
  display: flex;
  min-height: 145px;
  padding: 12px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid var(--ha-color);
  border-radius: 10px;
  color: #2e4149;
  background: #eef7fc;
  text-align: center;
}

.frost-gateway > span {
  display: grid;
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--ha-color);
  font-size: 0.62rem;
  font-weight: 900;
}

.frost-gateway strong { font-size: 0.68rem; }
.frost-gateway small { margin-top: 4px; color: #738087; font-size: 0.52rem; }
.frost-gateway em { margin-top: 12px; padding: 4px 9px; border-radius: 12px; color: #fff; background: #c94f34; font-size: 0.56rem; font-style: normal; font-weight: 850; }

.ha-level-screen { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: 24px; align-items: center; }
.ha-tank { position: relative; height: 155px; overflow: hidden; border: 3px solid #789297; border-top: 0; border-radius: 0 0 24px 24px; background: #eef2f2; }
.ha-tank::before { position: absolute; top: 0; right: -3px; left: -3px; height: 8px; border: 3px solid #789297; border-radius: 50%; background: #fff; content: ""; }
.ha-tank i { position: absolute; right: 3px; bottom: 3px; left: 3px; height: 68%; border-radius: 0 0 18px 18px; background: linear-gradient(#74d0d7, var(--ha-color)); }
.ha-tank span { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: #16464c; font-family: Georgia, serif; font-size: 1.35rem; }
.ha-level-copy small, .ha-level-copy strong, .ha-level-copy span { display: block; }
.ha-level-copy small { color: #778080; font-size: 0.62rem; text-transform: uppercase; }
.ha-level-copy strong { margin-top: 8px; color: #284448; font-family: Georgia, serif; font-size: 1.2rem; }
.ha-level-copy span { margin-top: 18px; color: #3d7060; font-size: 0.68rem; }
.ha-level-copy span i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #2c9760; }

.ha-link-screen { display: grid; grid-template-columns: 1fr auto 0.9fr auto 0.72fr; gap: 8px; align-items: center; }
.ha-link-screen > b { color: var(--ha-color); letter-spacing: 0.08em; }
.ha-device, .ha-chip, .ha-jeedom { display: flex; min-height: 105px; padding: 12px; align-items: center; justify-content: center; flex-direction: column; border: 1px solid #d8dcda; border-radius: 8px; color: #354247; background: #f6f7f5; text-align: center; }
.ha-link-screen span { font-weight: 850; font-size: 0.72rem; }
.ha-link-screen small { margin-top: 6px; color: #758082; font-size: 0.55rem; }
.ha-chip { border-color: var(--ha-color); color: var(--ha-color); background: #fff6f1; }
.ha-jeedom { color: #fff; background: #2d3540; }
.ha-jeedom span { display: grid; width: 30px; height: 30px; place-items: center; border: 2px solid var(--ha-color); border-radius: 50%; color: var(--ha-color); font-family: Georgia, serif; font-size: 1rem; }
.ha-jeedom small { color: #d0d4d5; }

.ha-scenario { display: grid; grid-template-columns: 1fr; gap: 6px; align-content: center; }
.ha-scenario div { display: grid; grid-template-columns: 54px 1fr; min-height: 44px; padding: 8px 12px; align-items: center; gap: 12px; border: 1px solid #e4e2e7; border-radius: 7px; color: #42444c; background: #f8f7fa; font-size: 0.66rem; }
.ha-scenario div span { color: var(--ha-color); font-weight: 900; font-size: 0.58rem; }
.ha-scenario > b { color: var(--ha-color); font-size: 0.72rem; line-height: 1; text-align: center; }

.protocol-section { background: #f2f1ed; }
.protocol-map { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.protocol-center { position: absolute; z-index: 2; top: 50%; left: 50%; display: flex; width: 150px; height: 150px; align-items: center; justify-content: center; flex-direction: column; border: 9px solid #f2f1ed; border-radius: 50%; color: #fff; background: var(--ink); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18); transform: translate(-50%, -50%); }
.protocol-center > span { display: grid; width: 38px; height: 38px; margin-bottom: 5px; place-items: center; border: 2px solid var(--orange); border-radius: 50%; color: var(--orange); font-family: Georgia, serif; }
.protocol-center strong { font-family: Georgia, serif; }
.protocol-center small { margin-top: 4px; color: #aeb0ad; font-size: 0.54rem; }
.protocol-card { --protocol-color: #2778b6; display: grid; grid-template-columns: 50px 1fr; min-height: 180px; padding: 26px; gap: 14px; border: 1px solid rgba(21, 21, 21, 0.1); border-radius: 14px; background: #fff; box-shadow: 0 12px 34px rgba(30, 42, 54, 0.06); }
.protocol-card:nth-of-type(odd) { padding-right: 105px; }
.protocol-card:nth-of-type(even) { padding-left: 105px; }
.protocol-card > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 12px; color: #fff; background: var(--protocol-color); font-size: 0.8rem; font-weight: 900; }
.protocol-card h3 { margin: 3px 0 7px; color: var(--protocol-color); font-family: Georgia, serif; font-size: 1.22rem; }
.protocol-card p { margin: 0; color: #565b59; font-size: 0.76rem; line-height: 1.45; }
.protocol-card > small { grid-column: 2; align-self: end; color: #888e8b; font-size: 0.57rem; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; }
.protocol-zwave { --protocol-color: #5c5eae; }
.protocol-lora { --protocol-color: #087a83; }
.protocol-mqtt { --protocol-color: #8b3a94; }
.protocol-local { --protocol-color: #df7622; }
.protocol-ble { --protocol-color: #177ac2; }
.protocol-cellular { --protocol-color: #c94f34; }
.protocol-wired { --protocol-color: #647069; }
.protocol-note { margin: 30px 0 0; padding: 18px 22px; border-left: 4px solid var(--orange); color: #5b605d; background: #fff; font-size: 0.8rem; }
.protocol-note strong { color: var(--ink); }

.ha-architecture { color: #fff; background: #083a43; }
.ha-heading .eyebrow, .ha-heading > p { color: #c4dcdf; }
.ha-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; padding: 28px; gap: 10px; align-items: center; border: 1px solid rgba(255, 255, 255, 0.2); background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 22px 22px; }
.ha-flow article { display: flex; min-height: 170px; padding: 18px; align-items: center; justify-content: center; flex-direction: column; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(2, 30, 35, 0.75); text-align: center; }
.ha-flow > b { color: var(--orange); font-size: 1.3rem; }
.ha-flow article > span { display: grid; width: 46px; height: 46px; margin-bottom: 14px; place-items: center; border: 1px solid var(--orange); border-radius: 50%; color: var(--orange); font-family: Georgia, serif; font-size: 0.9rem; }
.ha-flow article strong { font-size: 0.78rem; }
.ha-flow article small { margin-top: 6px; color: #adc8cb; font-size: 0.6rem; }
.ha-flow .ha-flow-main { border-color: var(--orange); background: rgba(243, 106, 33, 0.12); }
.ha-flow .ha-flow-radio { border-color: #78b6d1; background: rgba(120, 182, 209, 0.08); }
.ha-flow .ha-flow-radio > span { border-color: #78b6d1; color: #78b6d1; }
.ha-flow .ha-flow-cellular { border-color: #ec8068; background: rgba(236, 128, 104, 0.09); }
.ha-flow .ha-flow-cellular > span { border-color: #ec8068; color: #ec8068; }
.ha-flow .ha-flow-jeedom { border-color: #5ec3cf; background: rgba(94, 195, 207, 0.1); }
.ha-flow .ha-flow-jeedom > span { border-color: #5ec3cf; color: #5ec3cf; }
.ha-architecture-note { margin: 32px 0 0; padding: 18px 22px; border-left: 4px solid var(--orange); color: #c7dadd; background: rgba(255, 255, 255, 0.06); font-size: 0.82rem; }
.ha-architecture-note strong { color: #fff; }

@media (max-width: 980px) {
  .ha-flow { grid-template-columns: 1fr; }
  .ha-flow > b { transform: rotate(90deg); text-align: center; }
  .ha-flow article { min-height: 135px; }
  .protocol-center { display: none; }
  .protocol-card:nth-of-type(odd), .protocol-card:nth-of-type(even) { padding: 24px; }
}

@media (max-width: 760px) {
  .ha-example-grid, .protocol-map { grid-template-columns: 1fr; }
  .ha-example { min-height: 405px; padding: 20px; }
  .ha-link-screen { grid-template-columns: 1fr; }
  .ha-link-screen > b { transform: rotate(90deg); text-align: center; }
  .ha-device, .ha-chip, .ha-jeedom { min-height: 72px; }
  .ha-flow { padding: 18px; }
  .protocol-card { min-height: auto; }
}

/* Réalisation AMNET RTS Gateway */
.rts-spotlight {
  color: #fff;
  background: #101615;
}

.rts-spotlight-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
}

.rts-spotlight .eyebrow-dark,
.rts-spotlight-copy p { color: #bac5c1; }
.rts-spotlight .eyebrow-dark span { background: var(--orange); }
.rts-spotlight h2 { margin: 18px 0 20px; max-width: 690px; color: #fff; }
.rts-spotlight-copy > p { max-width: 610px; line-height: 1.7; }
.rts-spotlight-copy > p strong { color: #fff; }

.project-status {
  display: inline-block;
  margin-top: 12px;
  padding: 7px 11px;
  border: 1px solid rgba(243, 106, 33, 0.48);
  color: #ffc19f;
  background: rgba(243, 106, 33, 0.1);
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rts-spotlight .text-link {
  display: inline-flex;
  margin-top: 16px;
  gap: 8px;
  color: #fff;
  font-weight: 800;
}

.rts-mini-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1.15fr auto 1fr;
  min-height: 330px;
  padding: 28px;
  gap: 13px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 22px 22px;
}

.rts-mini-diagram > i { color: var(--orange); font-size: 1.3rem; font-style: normal; }
.rts-mini-inputs, .rts-mini-outputs { display: grid; gap: 12px; }
.rts-mini-inputs span, .rts-mini-outputs span {
  display: flex;
  min-height: 68px;
  padding: 12px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #e3eae7;
  background: rgba(255, 255, 255, 0.045);
  font-size: 0.64rem;
  font-weight: 750;
}

.rts-mini-inputs b, .rts-mini-outputs b {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #5cb6c1;
  border-radius: 50%;
  color: #65c4cf;
}

.rts-mini-outputs b { border-color: #ef8a51; color: #ef8a51; }
.rts-mini-gateway {
  display: flex;
  min-height: 190px;
  padding: 22px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid var(--orange);
  border-radius: 5px;
  background: linear-gradient(150deg, rgba(243, 106, 33, 0.2), rgba(255, 255, 255, 0.04));
  text-align: center;
}

.rts-mini-gateway small { color: #d6a386; font-size: 0.56rem; letter-spacing: 0.08em; }
.rts-mini-gateway strong { margin-top: 13px; font-family: Georgia, serif; font-size: 1.15rem; line-height: 1.2; }
.rts-mini-gateway em { margin-top: 15px; color: #bfc9c5; font-size: 0.56rem; font-style: normal; }

.rts-product-card {
  position: relative;
  display: flex;
  min-height: 390px;
  padding: 32px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 24px 24px;
}

.rts-product-state {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 7px 10px;
  color: #ffd3bb;
  background: rgba(243, 106, 33, 0.17);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.rts-product-device {
  position: relative;
  display: flex;
  width: min(310px, 88%);
  min-height: 170px;
  padding: 28px;
  justify-content: center;
  flex-direction: column;
  border: 1px solid #59615e;
  border-radius: 9px;
  background: linear-gradient(145deg, #2a302e, #111514);
  box-shadow: 0 28px 50px rgba(0, 0, 0, 0.35);
}

.rts-product-device::before {
  position: absolute;
  top: 35px;
  right: -38px;
  width: 38px;
  height: 7px;
  border-radius: 0 5px 5px 0;
  background: #aeb4b1;
  content: "";
}

.rts-product-device i {
  position: absolute;
  top: 28px;
  right: 26px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4dc389;
  box-shadow: 0 0 14px rgba(77, 195, 137, 0.8);
}

.rts-product-device small { color: #9ba5a1; font-size: 0.55rem; letter-spacing: 0.12em; }
.rts-product-device strong { margin-top: 17px; color: #fff; font-size: 1.7rem; letter-spacing: 0.05em; }
.rts-product-device b { color: var(--orange); font-family: Georgia, serif; font-size: 1rem; }
.rts-product-device > span { position: absolute; right: 25px; bottom: 22px; color: var(--orange); font-size: 0.65rem; }
.rts-product-card > p { margin: 24px 0 0; color: #c2cbc7; font-family: Georgia, serif; font-style: italic; }

.rts-use-grid, .rts-build-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.rts-use-grid article, .rts-build-grid article {
  padding: 28px;
  border: 1px solid rgba(21, 21, 21, 0.1);
  background: #fff;
  box-shadow: 0 13px 35px rgba(30, 42, 54, 0.06);
}

.rts-use-grid article > span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: var(--orange);
  font-weight: 900;
}

.rts-use-grid h3, .rts-build-grid h3 { margin: 20px 0 10px; font-family: Georgia, serif; font-size: 1.2rem; }
.rts-use-grid p, .rts-build-grid p { margin: 0; color: #5d625f; font-size: 0.8rem; line-height: 1.6; }

.rts-architecture { color: #fff; background: #083a43; }
.rts-heading .eyebrow, .rts-heading > p { color: #c4dcdf; }
.rts-flow {
  display: grid;
  grid-template-columns: 1.2fr auto 0.8fr auto 1fr auto 1.2fr;
  padding: 28px;
  gap: 11px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 22px 22px;
}

.rts-flow-input, .rts-flow-output { display: grid; gap: 10px; }
.rts-flow article {
  display: flex;
  min-height: 118px;
  padding: 15px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(2, 30, 35, 0.75);
  text-align: center;
}

.rts-flow > article { min-height: 246px; }
.rts-flow > b { color: var(--orange); font-size: 1.25rem; }
.rts-flow article > span { display: grid; width: 42px; height: 42px; margin-bottom: 11px; place-items: center; border: 1px solid #75c7d0; border-radius: 50%; color: #75c7d0; font-family: Georgia, serif; }
.rts-flow article strong { font-size: 0.73rem; }
.rts-flow article small { margin-top: 5px; color: #adc8cb; font-size: 0.56rem; }
.rts-flow .rts-flow-gateway { border-color: var(--orange); background: rgba(243, 106, 33, 0.13); }
.rts-flow .rts-flow-gateway > span { border-color: var(--orange); color: var(--orange); }
.rts-flow-output article > span { border-color: #ef9360; color: #ef9360; }

.rts-build-grid { grid-template-columns: repeat(4, 1fr); }
.rts-build-grid article > span { color: var(--orange); font-family: Georgia, serif; font-size: 1.25rem; }
.rts-build-grid h3 { margin-top: 13px; }

@media (max-width: 1040px) {
  .rts-spotlight-layout { grid-template-columns: 1fr; }
  .rts-flow { grid-template-columns: 1fr; }
  .rts-flow > b { transform: rotate(90deg); text-align: center; }
  .rts-flow > article { min-height: 150px; }
  .rts-build-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .rts-mini-diagram { grid-template-columns: 1fr; padding: 18px; }
  .rts-mini-diagram > i { transform: rotate(90deg); text-align: center; }
  .rts-mini-gateway { min-height: 150px; }
  .rts-product-card { min-height: 330px; padding: 22px; }
  .rts-product-state { position: static; margin-bottom: 34px; }
  .rts-product-device::before { display: none; }
  .rts-use-grid, .rts-build-grid { grid-template-columns: 1fr; }
  .rts-flow { padding: 18px; }
}

/* Tableau de bord 205 Raid */
.raid-spotlight { background: #eeede8; }
.raid-spotlight-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
}

.raid-spotlight-copy > p { max-width: 620px; color: #555b58; line-height: 1.7; }
.raid-spotlight h2 { margin: 18px 0 20px; max-width: 680px; }
.project-status-raid { border-color: rgba(5, 105, 93, 0.42); color: #075f56; background: rgba(5, 105, 93, 0.08); }
.raid-spotlight .text-link { display: inline-flex; margin-top: 16px; gap: 8px; color: var(--ink); font-weight: 800; }

.raid-mini-screen, .raid-hero-screen {
  overflow: hidden;
  border: 9px solid #242a28;
  border-radius: 18px;
  color: #f4f7f5;
  background: #090d0c;
  box-shadow: 0 24px 55px rgba(20, 29, 27, 0.22);
}

.raid-mini-screen { padding: 18px; }
.raid-screen-top { display: flex; padding: 5px 7px 14px; align-items: center; gap: 16px; border-bottom: 1px solid #29312e; }
.raid-screen-top strong { margin-right: auto; color: #f27532; font-size: 0.76rem; letter-spacing: 0.08em; }
.raid-screen-top span { color: #a8b3af; font-size: 0.55rem; font-weight: 800; }
.raid-screen-top i { display: inline-block; width: 6px; height: 6px; margin-left: 3px; border-radius: 50%; background: #51cb83; box-shadow: 0 0 8px rgba(81, 203, 131, 0.7); }

.raid-screen-main {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  min-height: 205px;
  gap: 8px;
  align-items: stretch;
}

.raid-screen-main article { display: flex; padding: 18px 9px; align-items: center; justify-content: center; flex-direction: column; border-right: 1px solid #242c29; text-align: center; }
.raid-screen-main article:last-child { border-right: 0; }
.raid-screen-main small, .raid-screen-bottom small { color: #8f9a96; font-size: 0.52rem; letter-spacing: 0.08em; }
.raid-screen-main b { margin-top: 16px; color: #65d58e; font-family: Georgia, serif; font-size: clamp(1.35rem, 3vw, 2.4rem); font-weight: 500; }
.raid-screen-main em { margin-top: 4px; color: #b6c0bc; font-size: 0.58rem; font-style: normal; }
.raid-screen-bottom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.raid-screen-bottom span { display: flex; min-height: 69px; padding: 10px; align-items: center; justify-content: center; flex-direction: column; border: 1px solid #29312e; text-align: center; }
.raid-screen-bottom b { margin-top: 5px; color: #65d58e; font-size: 0.75rem; }
.raid-screen-bottom .raid-screen-planned { border-style: dashed; }
.raid-screen-bottom .raid-screen-planned b { color: #d39976; font-size: 0.6rem; }
.raid-mini-screen > p, .raid-hero-screen > p { margin: 14px 0 0; color: #6f7a76; font-size: 0.52rem; text-align: right; }

.raid-hero-screen { padding: 22px; }
.raid-hero-rpm { display: grid; min-height: 168px; place-items: center; align-content: center; }
.raid-hero-rpm small { color: #8e9a95; font-size: 0.58rem; letter-spacing: 0.1em; }
.raid-hero-rpm strong { margin-top: 8px; color: #67d88f; font-family: Georgia, serif; font-size: clamp(3.5rem, 7vw, 6rem); font-weight: 500; line-height: 1; }
.raid-hero-rpm span { color: #aeb8b4; font-size: 0.65rem; }
.raid-hero-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.raid-hero-metrics article { display: flex; min-height: 70px; padding: 10px; align-items: center; justify-content: center; flex-direction: column; border: 1px solid #29312e; }
.raid-hero-metrics small { color: #8e9a95; font-size: 0.52rem; }
.raid-hero-metrics b { margin-top: 5px; color: #f0f4f2; font-size: 0.78rem; }

.raid-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.raid-proof-grid article { padding: 28px; border: 1px solid rgba(21, 21, 21, 0.1); background: #fff; box-shadow: 0 13px 35px rgba(30, 42, 54, 0.06); }
.raid-proof-grid article > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; color: #fff; background: #087c70; font-size: 0.65rem; font-weight: 900; }
.raid-proof-grid h3 { margin: 20px 0 10px; font-family: Georgia, serif; font-size: 1.2rem; }
.raid-proof-grid p { margin: 0; color: #5d625f; font-size: 0.8rem; line-height: 1.6; }

.raid-test-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 22px; border: 1px solid rgba(21, 21, 21, 0.12); }
.raid-test-strip > div { display: flex; min-height: 105px; padding: 18px; align-items: center; justify-content: center; flex-direction: column; border-right: 1px solid rgba(21, 21, 21, 0.12); text-align: center; }
.raid-test-strip > div:last-child { border-right: 0; }
.raid-test-strip strong { color: #075f56; font-family: Georgia, serif; font-size: 1.15rem; }
.raid-test-strip small { margin-top: 7px; color: #707673; font-size: 0.62rem; }
.raid-test-strip .raid-test-result { color: #fff; background: #075f56; }
.raid-test-strip .raid-test-result strong, .raid-test-strip .raid-test-result small { color: #fff; }

.raid-right-size { background: #f4f1eb; }
.raid-compare { display: grid; grid-template-columns: 1fr 110px 1fr; gap: 20px; align-items: stretch; }
.raid-compare article { padding: 30px; border: 1px solid rgba(21, 21, 21, 0.12); background: #fff; }
.raid-compare article > span { color: #767c78; font-size: 0.62rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.raid-compare h3 { margin: 12px 0 22px; font-family: Georgia, serif; font-size: 1.35rem; }
.raid-compare ul { margin: 0; padding: 0; list-style: none; }
.raid-compare li { position: relative; padding: 10px 0 10px 19px; border-top: 1px solid #e5e4df; color: #575d59; font-size: 0.76rem; }
.raid-compare li::before { position: absolute; top: 15px; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: #707875; content: ""; }
.raid-compare article > strong { display: block; margin-top: 24px; padding: 12px 14px; color: #555d59; background: #f2f2ef; font-size: 0.68rem; line-height: 1.45; }
.raid-compare .raid-compare-focus { border: 2px solid #087c70; }
.raid-compare .raid-compare-focus h3 { color: #075f56; }
.raid-compare .raid-compare-focus li::before { background: #087c70; }
.raid-compare .raid-compare-focus > strong { color: #fff; background: #075f56; }
.raid-compare-separator { display: flex; align-items: center; justify-content: center; flex-direction: column; color: #7a7f7c; text-align: center; }
.raid-compare-separator b { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid #aaa9a4; border-radius: 50%; font-family: Georgia, serif; font-size: 1.5rem; }
.raid-compare-separator small { margin-top: 10px; font-size: 0.56rem; font-weight: 800; text-transform: uppercase; }

.raid-architecture { color: #fff; background: #122a29; }
.raid-heading .eyebrow, .raid-heading > p { color: #c3d4d0; }
.raid-data-flow { display: grid; grid-template-columns: 1fr auto 1.15fr auto 1.2fr; padding: 28px; gap: 13px; align-items: center; border: 1px solid rgba(255, 255, 255, 0.18); background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 22px 22px; }
.raid-data-flow > b { color: #ee7a3a; font-size: 0.7rem; letter-spacing: 0.05em; }
.raid-data-flow article { display: flex; min-height: 190px; padding: 18px; align-items: center; justify-content: center; flex-direction: column; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(5, 24, 23, 0.75); text-align: center; }
.raid-data-flow article > span { display: grid; width: 46px; height: 46px; margin-bottom: 14px; place-items: center; border: 1px solid #5ec4a3; border-radius: 50%; color: #5ec4a3; font-family: Georgia, serif; font-size: 0.7rem; }
.raid-data-flow article strong { font-size: 0.76rem; }
.raid-data-flow article small { margin-top: 6px; color: #abc5be; font-size: 0.57rem; line-height: 1.5; }
.raid-data-flow .raid-flow-main { border-color: #ee7a3a; background: rgba(238, 122, 58, 0.11); }
.raid-data-flow .raid-flow-main > span { border-color: #ee7a3a; color: #ee7a3a; }
.raid-flow-outputs { display: grid; gap: 10px; }
.raid-flow-outputs article { min-height: 90px; }
.raid-flow-outputs article > span { width: 34px; height: 34px; margin-bottom: 8px; }

.raid-planned-flow { margin-top: 22px; padding: 20px 24px; border: 1px dashed rgba(255, 255, 255, 0.34); color: #c5d3cf; background: rgba(255, 255, 255, 0.035); }
.raid-planned-flow > span { color: #f0a177; font-size: 0.65rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.raid-planned-flow > div { display: flex; margin: 15px 0; gap: 8px; flex-wrap: wrap; }
.raid-planned-flow i { padding: 7px 10px; border: 1px dashed rgba(255, 255, 255, 0.25); font-size: 0.62rem; font-style: normal; }
.raid-planned-flow > b { font-size: 0.62rem; font-weight: 600; }

.raid-fan-feedback {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  margin-top: 22px;
  padding: 26px;
  gap: 28px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.055);
}

.raid-fan-copy > span { color: #f0a177; font-size: 0.62rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.raid-fan-copy h3 { margin: 12px 0; font-family: Georgia, serif; font-size: 1.25rem; line-height: 1.22; }
.raid-fan-copy p { margin: 0; color: #b8cbc6; font-size: 0.72rem; line-height: 1.6; }
.raid-fan-loop { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1.15fr; gap: 8px; align-items: center; }
.raid-fan-loop article { display: flex; min-height: 128px; padding: 13px; align-items: center; justify-content: center; flex-direction: column; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(3, 22, 21, 0.68); text-align: center; }
.raid-fan-loop article > span { display: grid; width: 34px; height: 34px; margin-bottom: 10px; place-items: center; border: 1px solid #f0a177; border-radius: 50%; color: #f0a177; font-family: Georgia, serif; font-size: 0.7rem; }
.raid-fan-loop article > .fan-symbol { font-size: 1.25rem; }
.raid-fan-loop article strong { font-size: 0.65rem; }
.raid-fan-loop article small { margin-top: 5px; color: #9eb5af; font-size: 0.52rem; }
.raid-fan-loop > b { color: #ee7a3a; font-size: 1rem; }
.raid-fan-loop .fan-return-arrow { color: #67d39f; }
.raid-fan-loop .fan-return { border-color: #55bd8c; background: rgba(65, 174, 125, 0.11); }
.raid-fan-loop .fan-return > span { border-color: #67d39f; color: #67d39f; }
.raid-fan-alert { grid-column: 1 / -1; margin: 0; padding: 13px 16px; border-left: 4px solid #e35e46; color: #d7e2df; background: rgba(227, 94, 70, 0.1); font-size: 0.7rem; }
.raid-fan-alert strong { color: #fff; }

.raid-state-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.raid-state-grid article { padding: 30px; border: 1px solid rgba(21, 21, 21, 0.1); background: #fff; }
.raid-state-grid header { display: flex; align-items: center; gap: 13px; }
.raid-state-grid header span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #fff; background: #087c70; font-weight: 900; }
.raid-state-grid h3 { margin: 0; font-family: Georgia, serif; font-size: 1.25rem; }
.raid-state-grid ul { margin: 24px 0 0; padding: 0; list-style: none; }
.raid-state-grid li { position: relative; padding: 10px 0 10px 20px; border-top: 1px solid #e4e5e1; color: #555c58; font-size: 0.78rem; }
.raid-state-grid li::before { position: absolute; top: 15px; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: #087c70; content: ""; }
.raid-state-grid .raid-state-planned { border-style: dashed; background: #f7f5f0; }
.raid-state-grid .raid-state-planned header span { color: #9a512d; background: #f1d4c4; }
.raid-state-grid .raid-state-planned li::before { background: #d4713e; }

.raid-safety { color: #fff; background: #171b1a; }
.raid-safety .eyebrow, .raid-safety .scope-copy p { color: #bfc9c5; }
.raid-safety .scope-list { border-color: rgba(255, 255, 255, 0.18); }
.raid-safety .scope-list li { border-color: rgba(255, 255, 255, 0.18); }
.raid-safety .scope-list small { color: #aebbb6; }

@media (max-width: 1040px) {
  .raid-spotlight-layout { grid-template-columns: 1fr; }
  .raid-data-flow { grid-template-columns: 1fr; }
  .raid-data-flow > b { transform: rotate(90deg); text-align: center; }
  .raid-data-flow article { min-height: 135px; }
  .raid-test-strip { grid-template-columns: repeat(2, 1fr); }
  .raid-test-strip > div:nth-child(2) { border-right: 0; }
  .raid-test-strip > div:nth-child(-n+2) { border-bottom: 1px solid rgba(21, 21, 21, 0.12); }
  .raid-compare { grid-template-columns: 1fr; }
  .raid-compare-separator { min-height: 75px; }
  .raid-fan-feedback { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .raid-screen-main { grid-template-columns: 1fr; }
  .raid-screen-main article { min-height: 90px; border-right: 0; border-bottom: 1px solid #242c29; }
  .raid-screen-bottom, .raid-hero-metrics { grid-template-columns: 1fr; }
  .raid-hero-screen { padding: 16px; }
  .raid-proof-grid, .raid-state-grid { grid-template-columns: 1fr; }
  .raid-test-strip { grid-template-columns: 1fr; }
  .raid-test-strip > div { border-right: 0; border-bottom: 1px solid rgba(21, 21, 21, 0.12); }
  .raid-test-strip > div:last-child { border-bottom: 0; }
  .raid-data-flow { padding: 18px; }
  .raid-fan-feedback { padding: 18px; }
  .raid-fan-loop { grid-template-columns: 1fr; }
  .raid-fan-loop > b { transform: rotate(90deg); text-align: center; }
  .raid-fan-loop article { min-height: 95px; }
}

/* Régulation chauffage et CO2 d'une garderie */
.heat-spotlight { background: #edf2ee; }
.heat-spotlight-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.heat-spotlight-copy > p { max-width: 620px; color: #545d58; line-height: 1.7; }
.heat-spotlight-copy > p strong { color: #386b53; }
.heat-spotlight h2 { margin: 18px 0 20px; max-width: 690px; }
.project-status-heat { border-color: rgba(51, 111, 80, 0.42); color: #275f44; background: rgba(51, 111, 80, 0.08); }
.heat-spotlight .text-link { display: inline-flex; margin-top: 16px; gap: 8px; color: var(--ink); font-weight: 800; }

.heat-mini-board, .heat-hero-visual { padding: 22px; overflow: hidden; border: 1px solid #bbc9c0; border-radius: 16px; color: #24332c; background: #f8fbf8; box-shadow: 0 24px 55px rgba(24, 52, 39, 0.12); }
.heat-board-top { display: flex; padding: 4px 3px 15px; align-items: center; justify-content: space-between; border-bottom: 1px solid #d7dfda; }
.heat-board-top strong { color: #2d6145; font-size: 0.68rem; letter-spacing: 0.07em; }
.heat-board-top span { color: #76827b; font-size: 0.55rem; font-weight: 850; }
.heat-board-top i { display: inline-block; width: 6px; height: 6px; margin-left: 4px; border-radius: 50%; background: #49a56f; }
.heat-room-grid { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 16px; gap: 12px; }
.heat-room-grid article { padding: 16px; border: 1px solid #d6dfd9; border-radius: 10px; background: #fff; }
.heat-room-grid header, .heat-room-grid footer { display: flex; align-items: center; justify-content: space-between; }
.heat-room-grid header span { font-size: 0.7rem; font-weight: 850; }
.heat-room-grid header b { padding: 4px 7px; border-radius: 10px; color: #fff; background: #4d9b6e; font-size: 0.5rem; }
.heat-room-grid article:nth-child(2) header b { color: #52635a; background: #dde6e0; }
.heat-room-grid article > div { display: flex; min-height: 120px; align-items: center; justify-content: center; flex-direction: column; }
.heat-room-grid article > div strong { color: #306b4c; font-family: Georgia, serif; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 500; }
.heat-room-grid article > div small { margin-top: 5px; color: #7d8881; font-size: 0.55rem; }
.heat-room-grid footer { padding-top: 12px; border-top: 1px solid #e3e8e4; color: #68746d; font-size: 0.58rem; }
.heat-room-grid footer b { color: #327a58; }
.heat-board-calendar { display: grid; grid-template-columns: repeat(15, 1fr); height: 54px; margin-top: 14px; align-items: end; gap: 4px; }
.heat-board-calendar span { color: #7d8982; font-size: 0.48rem; transform: rotate(-45deg); }
.heat-board-calendar i { height: 65%; border-radius: 3px 3px 0 0; background: #61ad7e; }
.heat-board-calendar i:nth-of-type(2n) { height: 35%; background: #cddbd2; }
.heat-phone-alert { display: flex; margin-top: 12px; padding: 10px 13px; align-items: center; gap: 11px; border-left: 4px solid #d15b3d; color: #6f3020; background: #f9e4dc; }
.heat-phone-alert > span { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border: 1px solid #d15b3d; border-radius: 7px; }
.heat-phone-alert small, .heat-phone-alert strong { display: block; }
.heat-phone-alert small { font-size: 0.48rem; font-weight: 850; letter-spacing: 0.08em; }
.heat-phone-alert strong { margin-top: 2px; font-size: 0.65rem; }
.heat-mini-board > p, .heat-hero-visual > p { margin: 13px 0 0; color: #89938d; font-size: 0.52rem; text-align: right; }

.heat-hero-visual { border-color: rgba(255, 255, 255, 0.17); color: #fff; background: #10261d; box-shadow: 0 28px 60px rgba(0, 0, 0, 0.25); }
.heat-building { position: relative; margin-top: 52px; padding: 35px 22px 22px; border: 1px solid #70897b; background: rgba(255, 255, 255, 0.04); }
.heat-roof { position: absolute; top: -42px; left: 50%; width: 72%; height: 72px; border-top: 1px solid #70897b; border-left: 1px solid #70897b; transform: translateX(-50%) rotate(45deg) skew(-10deg, -10deg); }
.heat-building > strong { position: relative; display: block; color: #f39a64; font-size: 0.65rem; letter-spacing: 0.08em; text-align: center; }
.heat-building > div { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 20px; gap: 12px; }
.heat-building article { display: flex; min-height: 145px; padding: 16px; align-items: center; justify-content: center; flex-direction: column; border: 1px solid rgba(255, 255, 255, 0.16); background: #173629; }
.heat-building article small { color: #b9ccc1; font-size: 0.58rem; }
.heat-building article b { margin-top: 14px; color: #6bd69a; font-family: Georgia, serif; font-size: 1.8rem; font-weight: 500; }
.heat-building article span { margin-top: 10px; color: #edf6f0; font-size: 0.6rem; }
.heat-hero-status { display: flex; margin-top: 16px; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; }
.heat-hero-status span { color: #bed0c5; font-size: 0.55rem; text-transform: uppercase; }
.heat-hero-status i { width: 5px; height: 5px; border-radius: 50%; background: #58bd82; }

.heat-context-grid, .heat-function-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.heat-context-grid article, .heat-function-grid article { padding: 28px; border: 1px solid rgba(21, 21, 21, 0.1); background: #fff; box-shadow: 0 13px 35px rgba(30, 42, 54, 0.06); }
.heat-context-grid article > span { color: #3a7957; font-family: Georgia, serif; font-size: 1.25rem; }
.heat-context-grid h3, .heat-function-grid h3 { margin: 16px 0 10px; font-family: Georgia, serif; font-size: 1.2rem; }
.heat-context-grid p, .heat-function-grid p { margin: 0; color: #5b625e; font-size: 0.8rem; line-height: 1.6; }

.heat-architecture { color: #fff; background: #17412f; }
.heat-heading .eyebrow, .heat-heading > p { color: #c5d9ce; }
.heat-flow { display: grid; grid-template-columns: 0.7fr auto 0.9fr auto 1.15fr auto 0.72fr; padding: 28px; gap: 12px; align-items: center; border: 1px solid rgba(255, 255, 255, 0.2); background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 22px 22px; }
.heat-flow > b { color: #f29a63; font-size: 0.7rem; }
.heat-flow article { display: flex; min-height: 185px; padding: 18px; align-items: center; justify-content: center; flex-direction: column; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(5, 33, 22, 0.72); text-align: center; }
.heat-flow article > span { display: grid; width: 44px; height: 44px; margin-bottom: 13px; place-items: center; border: 1px solid #6dd198; border-radius: 50%; color: #6dd198; font-family: Georgia, serif; font-size: 0.65rem; }
.heat-flow article strong { font-size: 0.75rem; }
.heat-flow article small { margin-top: 6px; color: #afc9ba; font-size: 0.56rem; line-height: 1.5; }
.heat-flow .heat-flow-jeedom { border-color: #f08b51; background: rgba(240, 139, 81, 0.1); }
.heat-flow .heat-flow-jeedom > span { border-color: #f08b51; color: #f08b51; }
.heat-flow .heat-flow-phone { border-color: #70b8d6; background: rgba(74, 159, 195, 0.1); }
.heat-flow .heat-flow-phone > span { border-color: #70b8d6; color: #70b8d6; }
.heat-flow-rooms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.heat-flow-rooms article { min-height: 185px; }
.heat-architecture-note { margin: 30px 0 0; padding: 18px 22px; border-left: 4px solid #f08b51; color: #c7d9cf; background: rgba(255, 255, 255, 0.06); font-size: 0.8rem; }
.heat-architecture-note strong { color: #fff; }

.heat-function-grid { grid-template-columns: repeat(2, 1fr); }
.heat-function-grid article { min-height: 300px; }
.heat-function-grid article > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; color: #fff; background: #3b835e; font-size: 0.75rem; font-weight: 900; }
.heat-function-calendar { display: flex; height: 58px; margin-top: 25px; align-items: flex-end; gap: 6px; border-bottom: 1px solid #aebbb3; }
.heat-function-calendar i { width: 100%; height: 70%; border-radius: 3px 3px 0 0; background: #56a777; }
.heat-function-calendar i:nth-child(3), .heat-function-calendar i:nth-child(6) { height: 30%; background: #c6d5cb; }
.heat-function-temp { display: flex; margin-top: 25px; align-items: center; justify-content: center; flex-direction: column; }
.heat-function-temp b { color: #32734f; font-family: Georgia, serif; font-size: 3rem; font-weight: 500; }
.heat-function-temp small { color: #77827b; font-size: 0.6rem; }
.heat-function-co2 { display: grid; grid-template-columns: auto 1fr; margin-top: 27px; gap: 5px 14px; align-items: center; }
.heat-function-co2 i { grid-row: 1 / 3; width: 48px; height: 48px; border: 10px solid #dbe6df; border-top-color: #4e9e6d; border-right-color: #4e9e6d; border-radius: 50%; transform: rotate(-25deg); }
.heat-function-co2 strong { color: #34694c; font-size: 0.78rem; }
.heat-function-co2 small { color: #758078; font-size: 0.56rem; }
.heat-function-chart { display: flex; height: 70px; margin-top: 25px; padding-top: 8px; align-items: flex-end; gap: 5px; border-bottom: 1px solid #abb9b0; }
.heat-function-chart i { width: 100%; height: 35%; background: #62aa7e; }
.heat-function-chart i:nth-child(2), .heat-function-chart i:nth-child(7) { height: 58%; }
.heat-function-chart i:nth-child(3), .heat-function-chart i:nth-child(6) { height: 78%; }
.heat-function-chart i:nth-child(4), .heat-function-chart i:nth-child(5) { height: 92%; }
.heat-function-grid .heat-function-phone { display: grid; grid-column: 1 / -1; grid-template-columns: auto 1fr minmax(220px, 0.8fr); min-height: auto; align-items: center; gap: 20px; }
.heat-function-phone > span { margin: 0; }
.heat-function-phone h3 { margin-top: 0; }
.heat-mobile-notification { padding: 16px; border: 1px solid #e0d8d2; border-radius: 12px; color: #3e4541; background: #fffaf7; box-shadow: 0 9px 24px rgba(55, 43, 36, 0.08); }
.heat-mobile-notification small, .heat-mobile-notification strong { display: block; }
.heat-mobile-notification small { color: #8d7568; font-size: 0.48rem; font-weight: 850; }
.heat-mobile-notification strong { margin-top: 7px; color: #b84d32; font-size: 0.78rem; }
.heat-mobile-notification p { margin-top: 5px; font-size: 0.62rem; }

.heat-result { color: #fff; background: #c45624; }
.heat-result-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(45px, 8vw, 120px); align-items: center; }
.heat-result .eyebrow { color: #ffe5d7; }
.heat-result-number { display: block; margin-top: 20px; font-family: Georgia, serif; font-size: clamp(4rem, 10vw, 8rem); font-weight: 500; line-height: 0.9; }
.heat-result h2 { margin: 15px 0; font-size: clamp(1.8rem, 3.5vw, 3rem); }
.heat-result-layout > div:first-child > p:last-child { max-width: 520px; color: #ffe4d5; }
.heat-result-context { padding: 30px; border: 1px solid rgba(255, 255, 255, 0.26); background: rgba(115, 32, 7, 0.18); }
.heat-result-context h3 { margin: 0 0 20px; font-family: Georgia, serif; font-size: 1.35rem; }
.heat-result-context ul { margin: 0; padding: 0; list-style: none; }
.heat-result-context li { position: relative; padding: 12px 0 12px 22px; border-top: 1px solid rgba(255, 255, 255, 0.19); color: #fff0e8; font-size: 0.76rem; }
.heat-result-context li::before { position: absolute; top: 17px; left: 3px; width: 7px; height: 7px; border-radius: 50%; background: #ffd0b6; content: ""; }

.heat-qai-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px, 7vw, 90px); align-items: center; }
.heat-qai-meter { padding: 28px; border: 1px solid #d7ddd8; background: #f5f7f4; }
.heat-qai-meter > div { display: flex; justify-content: space-between; color: #747c77; font-size: 0.56rem; }
.heat-qai-meter > i { position: relative; display: block; height: 24px; margin: 10px 0 24px; border-radius: 12px; background: linear-gradient(90deg, #54a876 0 42%, #e2aa42 42% 72%, #cd5e49 72%); }
.heat-qai-meter > i::after { position: absolute; top: -7px; left: 48%; width: 4px; height: 38px; border-radius: 2px; background: #202725; content: ""; }
.heat-qai-meter strong, .heat-qai-meter small { display: block; }
.heat-qai-meter strong { font-family: Georgia, serif; font-size: 1.2rem; }
.heat-qai-meter small { margin-top: 8px; color: #747b77; font-size: 0.6rem; line-height: 1.5; }
.heat-qai-copy h3 { margin: 0 0 14px; font-family: Georgia, serif; font-size: 1.4rem; }
.heat-qai-copy p { color: #555d58; line-height: 1.65; }
.heat-qai-copy .text-link { display: inline-flex; margin-top: 10px; gap: 8px; color: #2b6b49; font-size: 0.73rem; font-weight: 850; }

.heat-history { color: #fff; background: #183528; }
.heat-history .eyebrow, .heat-history .scope-copy p { color: #c3d6ca; }
.heat-history .scope-list, .heat-history .scope-list li { border-color: rgba(255, 255, 255, 0.18); }
.heat-history .scope-list small { color: #acc2b5; }

@media (max-width: 1040px) {
  .heat-spotlight-layout, .heat-result-layout, .heat-qai-layout { grid-template-columns: 1fr; }
  .heat-flow { grid-template-columns: 1fr; }
  .heat-flow > b { transform: rotate(90deg); text-align: center; }
  .heat-flow article { min-height: 130px; }
}

@media (max-width: 760px) {
  .heat-room-grid, .heat-building > div, .heat-context-grid, .heat-function-grid, .heat-flow-rooms { grid-template-columns: 1fr; }
  .heat-mini-board, .heat-hero-visual { padding: 16px; }
  .heat-board-calendar { display: none; }
  .heat-flow { padding: 18px; }
  .heat-function-grid article { min-height: auto; }
  .heat-result-number { font-size: 4rem; }
  .heat-function-grid .heat-function-phone { grid-column: auto; grid-template-columns: 1fr; }
}

/* Surveillance vidéo Jeedom et Frigate */
.alarm-spotlight { color: #eef7f8; background: #10252a; }
.alarm-spotlight-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.alarm-spotlight-copy > p { max-width: 620px; color: #bed0d2; line-height: 1.7; }
.alarm-spotlight h2 { margin: 18px 0 20px; max-width: 690px; color: #fff; }
.project-status-alarm { border-color: rgba(97, 201, 196, 0.42); color: #83dbd4; background: rgba(97, 201, 196, 0.09); }
.alarm-spotlight .text-link { display: inline-flex; margin-top: 16px; gap: 8px; color: #fff; font-weight: 800; }

.alarm-mini-console, .alarm-hero-console { padding: 22px; overflow: hidden; border: 1px solid #38545a; border-radius: 16px; color: #eaf5f5; background: #09191d; box-shadow: 0 26px 58px rgba(0, 0, 0, 0.28); }
.alarm-console-top { display: flex; padding: 4px 3px 15px; align-items: center; justify-content: space-between; border-bottom: 1px solid #263b40; }
.alarm-console-top strong { color: #fff; font-size: 0.66rem; letter-spacing: 0.08em; }
.alarm-console-top span { color: #9bb0b4; font-size: 0.52rem; font-weight: 850; }
.alarm-console-top i { display: inline-block; width: 6px; height: 6px; margin-left: 4px; border-radius: 50%; background: #54d09e; }
.alarm-camera-grid, .alarm-hero-cameras { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; gap: 9px; }
.alarm-camera-grid article { position: relative; min-height: 135px; padding: 12px; overflow: hidden; border: 1px solid #31484d; background: linear-gradient(150deg, #274048, #111f23 65%); }
.alarm-camera-grid article::before, .alarm-hero-cameras article > div::before { position: absolute; inset: 0; opacity: 0.42; background-image: linear-gradient(25deg, transparent 48%, rgba(142, 174, 170, 0.24) 49% 51%, transparent 52%), linear-gradient(155deg, transparent 52%, rgba(142, 174, 170, 0.16) 53% 55%, transparent 56%); content: ""; }
.alarm-camera-grid article > strong, .alarm-camera-grid article > small { position: absolute; z-index: 2; left: 11px; }
.alarm-camera-grid article > strong { bottom: 26px; font-size: 0.66rem; }
.alarm-camera-grid article > small { bottom: 10px; color: #adc0c2; font-size: 0.48rem; }
.alarm-person { position: absolute; z-index: 3; top: 29px; left: 49%; width: 18px; height: 38px; border: 2px solid #ff8a4f; border-radius: 9px 9px 3px 3px; transform: translateX(-50%); }
.alarm-person::before { position: absolute; top: -13px; left: 3px; width: 8px; height: 8px; border: 2px solid #ff8a4f; border-radius: 50%; content: ""; }
.alarm-console-bottom { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 11px; gap: 9px; }
.alarm-console-bottom > span { padding: 11px; border: 1px solid #2f464b; background: #10252a; }
.alarm-console-bottom small, .alarm-console-bottom b { display: block; }
.alarm-console-bottom small { color: #81989d; font-size: 0.45rem; letter-spacing: 0.08em; }
.alarm-console-bottom b { margin-top: 4px; color: #68d7c7; font-size: 0.58rem; }
.alarm-phone-message { display: flex; margin-top: 11px; padding: 12px; align-items: center; gap: 11px; border-left: 4px solid #ff7845; color: #542615; background: #ffe6d9; }
.alarm-phone-message > b { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border: 1px solid #c85a31; border-radius: 7px; }
.alarm-phone-message small, .alarm-phone-message strong, .alarm-phone-message span { display: block; }
.alarm-phone-message small { font-size: 0.45rem; font-weight: 850; letter-spacing: 0.08em; }
.alarm-phone-message strong { margin-top: 3px; font-size: 0.62rem; }
.alarm-phone-message span { margin-top: 2px; color: #83503c; font-size: 0.5rem; }
.alarm-mini-console > p, .alarm-hero-console > p { margin: 12px 0 0; color: #7f9498; font-size: 0.5rem; text-align: right; }

.alarm-hero { background: #101d21; }
.alarm-hero-console { border-color: rgba(255, 255, 255, 0.18); }
.alarm-hero-cameras article { position: relative; min-width: 0; }
.alarm-hero-cameras article > div { position: relative; height: 160px; overflow: hidden; border: 1px solid #30474c; background: linear-gradient(145deg, #2b4349, #0d1c20 70%); }
.alarm-hero-cameras article.is-detected > div { border-color: #e87945; }
.alarm-hero-cameras article > div b { position: absolute; z-index: 3; top: 10px; right: 8px; padding: 4px 6px; color: #fff; background: #d86538; font-size: 0.45rem; letter-spacing: 0.07em; }
.alarm-hero-cameras article > strong, .alarm-hero-cameras article > small { display: block; }
.alarm-hero-cameras article > strong { margin-top: 8px; font-size: 0.66rem; }
.alarm-hero-cameras article > small { margin-top: 3px; overflow: hidden; color: #91a7ab; font-size: 0.48rem; text-overflow: ellipsis; white-space: nowrap; }
.alarm-hero-cameras .alarm-person { top: 57px; }
.alarm-hero-state { display: flex; margin-top: 16px; justify-content: space-between; gap: 12px; color: #b8cacc; font-size: 0.55rem; }
.alarm-hero-state span:first-child { color: #72d6b2; }
.alarm-hero-state i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #58d19e; }

.alarm-need-grid, .alarm-function-grid, .alarm-control-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.alarm-need-grid article, .alarm-function-grid article, .alarm-control-grid article { padding: 28px; border: 1px solid rgba(21, 21, 21, 0.1); background: #fff; box-shadow: 0 13px 35px rgba(30, 42, 54, 0.06); }
.alarm-need-grid article > span { color: #0a7878; font-family: Georgia, serif; font-size: 1.25rem; }
.alarm-need-grid h3, .alarm-function-grid h3, .alarm-control-grid h3 { margin: 16px 0 10px; font-family: Georgia, serif; font-size: 1.2rem; }
.alarm-need-grid p, .alarm-function-grid p, .alarm-control-grid p { margin: 0; color: #596161; font-size: 0.8rem; line-height: 1.62; }

.alarm-architecture { color: #fff; background: #12343a; }
.alarm-heading .eyebrow, .alarm-heading > p { color: #bed2d4; }
.alarm-flow { display: grid; grid-template-columns: 1.18fr auto 0.82fr auto 0.9fr auto 0.75fr; padding: 28px; gap: 12px; align-items: center; border: 1px solid rgba(255, 255, 255, 0.2); background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 22px 22px; }
.alarm-flow > b { color: #f39667; font-size: 0.64rem; text-align: center; }
.alarm-flow article { display: flex; min-height: 175px; padding: 17px; align-items: center; justify-content: center; flex-direction: column; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(5, 30, 34, 0.76); text-align: center; }
.alarm-flow article > span { display: grid; width: 43px; height: 43px; margin-bottom: 13px; place-items: center; border: 1px solid #66d3cc; border-radius: 50%; color: #66d3cc; font-family: Georgia, serif; font-size: 0.68rem; }
.alarm-flow article strong { font-size: 0.72rem; }
.alarm-flow article small { margin-top: 6px; color: #abc2c4; font-size: 0.54rem; line-height: 1.5; }
.alarm-flow-cameras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.alarm-flow-cameras article { min-height: 175px; padding: 10px; }
.alarm-flow-cameras article > span { width: 32px; height: 32px; }
.alarm-flow-cameras article strong { font-size: 0.57rem; }
.alarm-flow .alarm-flow-jeedom { border-color: #f08a55; background: rgba(240, 138, 85, 0.1); }
.alarm-flow .alarm-flow-jeedom > span { border-color: #f08a55; color: #f08a55; }
.alarm-flow .alarm-flow-phone { border-color: #71b9d3; background: rgba(64, 153, 185, 0.1); }
.alarm-flow .alarm-flow-phone > span { border-color: #71b9d3; color: #71b9d3; }
.alarm-architecture-note { margin: 28px 0 0; padding: 18px 22px; border-left: 4px solid #f08a55; color: #c6d8da; background: rgba(255, 255, 255, 0.06); font-size: 0.8rem; }
.alarm-architecture-note strong { color: #fff; }

.alarm-function-grid { grid-template-columns: repeat(2, 1fr); }
.alarm-function-grid article { min-height: 310px; }
.alarm-function-grid article > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; color: #fff; background: #147d7b; font-size: 0.72rem; font-weight: 900; }
.alarm-function-cameras { display: grid; grid-template-columns: repeat(3, 1fr); height: 82px; margin-top: 25px; gap: 7px; }
.alarm-function-cameras i { border: 1px solid #9eb8ba; background: linear-gradient(145deg, #8dafb2, #304e54); }
.alarm-function-detection { position: relative; width: 82px; height: 94px; margin: 24px auto 0; border: 2px solid #e47843; }
.alarm-function-detection i { position: absolute; top: 29px; left: 50%; width: 16px; height: 38px; border: 2px solid #263f44; border-radius: 8px 8px 3px 3px; transform: translateX(-50%); }
.alarm-function-detection i::before { position: absolute; top: -15px; left: 2px; width: 8px; height: 8px; border: 2px solid #263f44; border-radius: 50%; content: ""; }
.alarm-function-detection b { position: absolute; top: -9px; right: -13px; padding: 4px 6px; color: #fff; background: #d76536; font-size: 0.42rem; }
.alarm-mobile-notification { margin-top: 24px; padding: 17px; border: 1px solid #e3d6cf; border-radius: 12px; color: #344045; background: #fffaf7; box-shadow: 0 9px 24px rgba(55, 43, 36, 0.08); }
.alarm-mobile-notification small, .alarm-mobile-notification strong, .alarm-mobile-notification span { display: block; }
.alarm-mobile-notification small { color: #967365; font-size: 0.48rem; font-weight: 850; }
.alarm-mobile-notification strong { margin-top: 7px; color: #ba4f30; font-size: 0.76rem; }
.alarm-mobile-notification span { margin-top: 5px; color: #697171; font-size: 0.58rem; }
.alarm-siren-controls { display: flex; margin-top: 25px; gap: 8px; }
.alarm-siren-controls button { min-height: 46px; width: 100%; border: 1px solid #b64a3d; border-radius: 8px; color: #fff; background: #b64a3d; font: inherit; font-size: 0.62rem; font-weight: 800; opacity: 1; }
.alarm-siren-controls button:last-child { color: #4d595a; border-color: #cbd3d3; background: #fff; }

.alarm-evidence { color: #fff; background: #b94e27; }
.alarm-evidence-layout { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: clamp(40px, 7vw, 90px); align-items: center; }
.alarm-evidence .eyebrow { color: #ffe0d1; }
.alarm-evidence-layout > div:first-child p { color: #ffe1d3; }
.alarm-timeline { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; padding: 25px; gap: 10px; align-items: center; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(93, 27, 7, 0.16); }
.alarm-timeline article { min-height: 150px; padding: 18px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(117, 34, 8, 0.2); }
.alarm-timeline article span, .alarm-timeline article strong, .alarm-timeline article small { display: block; }
.alarm-timeline article span { color: #ffd3bf; font-size: 0.53rem; font-weight: 850; letter-spacing: 0.06em; }
.alarm-timeline article strong { margin-top: 24px; font-family: Georgia, serif; font-size: 0.92rem; }
.alarm-timeline article small { margin-top: 7px; color: #ffe1d4; font-size: 0.56rem; }
.alarm-timeline > b { color: #ffd4bf; }

.alarm-control-grid article > span { display: inline-block; padding: 5px 8px; color: #0b6f70; border: 1px solid #74b9b8; font-size: 0.5rem; font-weight: 900; letter-spacing: 0.08em; }
.alarm-sovereignty { background: #eef5f3; }
.alarm-origin-note { display: flex; margin-bottom: 22px; padding: 20px 23px; align-items: center; gap: 18px; border-left: 4px solid #0c7b78; color: #314846; background: #dcebe7; }
.alarm-origin-note > span { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border: 1px solid #188984; border-radius: 50%; color: #0b736f; font-size: 1.1rem; }
.alarm-origin-note strong { color: #0d4e4c; font-family: Georgia, serif; font-size: 1rem; }
.alarm-origin-note p { margin: 5px 0 0; color: #4b605e; font-size: 0.7rem; line-height: 1.6; }
.alarm-subscription-note { display: grid; grid-template-columns: auto 1fr; margin-bottom: 22px; padding: 18px 22px; gap: 5px 18px; align-items: center; border: 1px solid #9cc9b3; color: #244d3b; background: #e5f4eb; }
.alarm-subscription-note > span { grid-row: 1 / 3; padding: 8px 10px; border: 1px solid #58a77d; color: #25704e; font-size: 0.5rem; font-weight: 900; letter-spacing: 0.08em; }
.alarm-subscription-note strong { font-family: Georgia, serif; font-size: 1rem; }
.alarm-subscription-note small { color: #587064; font-size: 0.6rem; line-height: 1.5; }
.alarm-sovereignty-map { display: grid; grid-template-columns: 1fr 0.33fr; margin-bottom: 22px; gap: 18px; }
.alarm-sovereignty-private { padding: 26px; color: #fff; background: #12343a; }
.alarm-sovereignty-label { display: inline-block; margin-bottom: 18px; padding: 5px 8px; border: 1px solid #65c8c1; color: #7bddd5; font-size: 0.5rem; font-weight: 900; letter-spacing: 0.09em; }
.alarm-sovereignty-private > div { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: center; }
.alarm-sovereignty-private article { display: flex; min-height: 142px; padding: 16px; align-items: center; justify-content: center; flex-direction: column; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(3, 24, 28, 0.62); text-align: center; }
.alarm-sovereignty-private article b { display: grid; width: 38px; height: 38px; margin-bottom: 10px; place-items: center; border: 1px solid #68d2ca; border-radius: 50%; color: #68d2ca; font-family: Georgia, serif; font-size: 0.62rem; }
.alarm-sovereignty-private article strong { font-size: 0.7rem; }
.alarm-sovereignty-private article small { margin-top: 5px; color: #aac2c4; font-size: 0.52rem; }
.alarm-sovereignty-private > div > i { color: #f19565; font-style: normal; }
.alarm-sovereignty-private > p { margin: 18px 0 0; color: #bcd0d2; font-size: 0.65rem; line-height: 1.55; }
.alarm-sovereignty-blocked { display: flex; min-height: 250px; padding: 25px; align-items: center; justify-content: center; flex-direction: column; border: 2px dashed #cc7960; color: #86452f; background: #fff4ef; text-align: center; }
.alarm-sovereignty-blocked > span { display: grid; width: 62px; height: 62px; margin-bottom: 17px; place-items: center; border: 3px solid #d36d4d; border-radius: 50%; color: #d35f3e; font-family: Georgia, serif; font-size: 2rem; line-height: 1; }
.alarm-sovereignty-blocked strong { font-family: Georgia, serif; font-size: 1rem; }
.alarm-sovereignty-blocked small { margin-top: 8px; color: #9c6857; font-size: 0.56rem; }
.alarm-third-party-note { margin-top: 22px; padding: 19px 22px; border-left: 4px solid #dd6d45; color: #60483f; background: #fff2ec; font-size: 0.76rem; line-height: 1.65; }
.alarm-third-party-note strong { color: #9e3f22; }
.alarm-cnil-note { margin: 16px 0 0; color: #5a6967; font-size: 0.67rem; line-height: 1.6; }
.alarm-cnil-note a { color: #0b706d; font-weight: 850; }
.alarm-safety-note { margin-top: 28px; }
.alarm-method { color: #fff; background: #172f34; }
.alarm-method .eyebrow, .alarm-method .scope-copy p { color: #bed0d2; }
.alarm-method .scope-list, .alarm-method .scope-list li { border-color: rgba(255, 255, 255, 0.18); }
.alarm-method .scope-list small { color: #aac0c3; }

@media (max-width: 1040px) {
  .alarm-spotlight-layout, .alarm-evidence-layout { grid-template-columns: 1fr; }
  .alarm-flow { grid-template-columns: 1fr; }
  .alarm-flow > b { transform: rotate(90deg); }
  .alarm-flow article, .alarm-flow-cameras article { min-height: 120px; }
  .alarm-sovereignty-map { grid-template-columns: 1fr; }
  .alarm-sovereignty-blocked { min-height: 190px; }
}

@media (max-width: 760px) {
  .alarm-camera-grid, .alarm-hero-cameras, .alarm-need-grid, .alarm-function-grid, .alarm-control-grid, .alarm-flow-cameras { grid-template-columns: 1fr; }
  .alarm-mini-console, .alarm-hero-console { padding: 15px; }
  .alarm-camera-grid article { min-height: 115px; }
  .alarm-hero-cameras article > div { height: 125px; }
  .alarm-console-bottom { grid-template-columns: 1fr; }
  .alarm-flow { padding: 18px; }
  .alarm-function-grid article { min-height: auto; }
  .alarm-timeline { grid-template-columns: 1fr; }
  .alarm-timeline > b { transform: rotate(90deg); text-align: center; }
  .alarm-timeline article { min-height: 120px; }
  .alarm-hero-state { align-items: flex-start; flex-direction: column; }
  .alarm-sovereignty-private > div { grid-template-columns: 1fr; }
  .alarm-sovereignty-private > div > i { transform: rotate(90deg); text-align: center; }
  .alarm-sovereignty-private article { min-height: 105px; }
}

/* Réseau de sondes antigel */
.ha-example-link { display: inline-flex; margin-top: 18px; gap: 8px; align-items: center; color: #154f6d; font-size: 0.68rem; font-weight: 850; }
.ha-example-link:hover span { transform: translateX(3px); }
.ha-example-link span { transition: transform 180ms ease; }

.frost-hero { color: #eef8fb; background: radial-gradient(circle at 78% 18%, rgba(62, 151, 184, 0.25), transparent 30%), linear-gradient(135deg, #0a2533, #143f53 62%, #1f5d70); }
.frost-hero .breadcrumb, .frost-hero .breadcrumb a { color: #b9dce8; }
.frost-hero .detail-lead { color: #c7e0e8; }
.frost-hero .detail-tags li { border-color: rgba(183, 225, 236, 0.35); color: #d8eff5; background: rgba(255, 255, 255, 0.06); }
.project-status-frost { border-color: rgba(112, 209, 224, 0.45); color: #a7e6ef; background: rgba(62, 164, 185, 0.14); }

.frost-hero-panel { padding: 23px; border: 1px solid rgba(201, 235, 242, 0.25); border-radius: 18px; color: #e8f6f8; background: rgba(4, 27, 38, 0.78); box-shadow: 0 28px 65px rgba(0, 0, 0, 0.3); }
.frost-hero-weather { display: grid; grid-template-columns: 1fr auto; padding: 4px 4px 17px; align-items: end; border-bottom: 1px solid rgba(194, 229, 237, 0.18); }
.frost-hero-weather span { color: #88cad8; font-size: 0.54rem; font-weight: 900; letter-spacing: 0.1em; }
.frost-hero-weather strong { grid-row: 1 / 3; grid-column: 2; color: #fff; font-family: Georgia, serif; font-size: clamp(2.3rem, 5vw, 4.3rem); line-height: 0.9; }
.frost-hero-weather small { margin-top: 5px; color: #99bac3; font-size: 0.5rem; }
.frost-hero-probes { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; gap: 9px; }
.frost-hero-probes article { padding: 12px; border: 1px solid #315b6a; background: #102f3d; }
.frost-hero-probes span, .frost-hero-probes b, .frost-hero-probes small { display: block; }
.frost-hero-probes span { color: #79c5d4; font-size: 0.48rem; font-weight: 900; }
.frost-hero-probes b { margin-top: 10px; color: #fff; font-family: Georgia, serif; font-size: 1.2rem; }
.frost-hero-probes small { margin-top: 4px; color: #9bb7bf; font-size: 0.48rem; }
.frost-hero-link { display: grid; grid-template-columns: 1fr auto 54px auto 1fr; margin: 13px 0; align-items: center; gap: 8px; color: #9bcbd6; font-size: 0.49rem; font-weight: 850; text-align: center; }
.frost-hero-link i { height: 1px; background: #568c9a; }
.frost-hero-link strong { display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid #ef8b54; border-radius: 50%; color: #ffb389; background: #193847; font-size: 0.67rem; }
.frost-hero-alert { display: flex; padding: 12px; align-items: center; gap: 11px; border-left: 4px solid #f07d42; color: #542613; background: #ffe8db; }
.frost-hero-alert > span { font-size: 1.1rem; }
.frost-hero-alert small, .frost-hero-alert strong { display: block; }
.frost-hero-alert small { font-size: 0.44rem; font-weight: 900; letter-spacing: 0.08em; }
.frost-hero-alert strong { margin-top: 3px; font-size: 0.61rem; }
.frost-hero-panel > p { margin: 12px 0 0; color: #789ca6; font-size: 0.48rem; text-align: right; }

.frost-need-grid, .frost-function-grid, .frost-control-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.frost-need-grid article, .frost-function-grid article, .frost-control-grid article { padding: 28px; border: 1px solid rgba(20, 47, 59, 0.12); background: #fff; box-shadow: 0 13px 35px rgba(19, 51, 63, 0.06); }
.frost-need-grid article > span { color: #287992; font-family: Georgia, serif; font-size: 1.25rem; }
.frost-need-grid h3, .frost-function-grid h3, .frost-control-grid h3 { margin: 16px 0 10px; font-family: Georgia, serif; font-size: 1.2rem; }
.frost-need-grid p, .frost-function-grid p, .frost-control-grid p { margin: 0; color: #56666b; font-size: 0.78rem; line-height: 1.65; }

.frost-architecture { color: #eff8fa; background: #123541; }
.frost-heading .eyebrow, .frost-heading > p { color: #b9d4da; }
.frost-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 0.82fr; padding: 28px; gap: 12px; align-items: center; border: 1px solid rgba(255, 255, 255, 0.2); background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 22px 22px; }
.frost-flow > b { color: #ef9b6e; font-size: 0.52rem; text-align: center; }
.frost-flow article { display: flex; min-height: 175px; padding: 17px; align-items: center; justify-content: center; flex-direction: column; border: 1px solid rgba(255, 255, 255, 0.21); background: rgba(4, 26, 34, 0.74); text-align: center; }
.frost-flow article > span { display: grid; width: 45px; height: 45px; margin-bottom: 13px; place-items: center; border: 1px solid #6bc5d7; border-radius: 50%; color: #7bd6e6; font-family: Georgia, serif; font-size: 0.7rem; }
.frost-flow article strong { font-size: 0.72rem; }
.frost-flow article small { margin-top: 7px; color: #a9c4ca; font-size: 0.52rem; line-height: 1.5; }
.frost-architecture-note { display: grid; grid-template-columns: 0.42fr 1.58fr; margin-top: 24px; padding: 21px 24px; gap: 22px; align-items: center; border-left: 4px solid #ef8a55; color: #bdd3d8; background: rgba(255, 255, 255, 0.06); }
.frost-architecture-note strong { color: #fff; font-family: Georgia, serif; font-size: 1.05rem; }
.frost-architecture-note p { margin: 0; font-size: 0.72rem; line-height: 1.65; }

.frost-function-grid { grid-template-columns: repeat(2, 1fr); }
.frost-function-grid article { min-height: 280px; }
.frost-function-grid article > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; color: #fff; background: #26778c; font-size: 0.75rem; font-weight: 900; }
.frost-function-values { display: flex; margin-top: 28px; gap: 8px; }
.frost-function-values b { flex: 1; padding: 15px 8px; color: #174c5b; border: 1px solid #b8d5dc; background: #eef7f9; font-family: Georgia, serif; font-size: 1rem; text-align: center; }
.frost-chart { display: flex; height: 82px; margin-top: 28px; align-items: end; gap: 7px; border-bottom: 1px solid #96b9c2; }
.frost-chart i { width: 100%; background: linear-gradient(#61aabd, #2b7184); }
.frost-chart i:nth-child(1) { height: 32%; }
.frost-chart i:nth-child(2) { height: 47%; }
.frost-chart i:nth-child(3) { height: 63%; }
.frost-chart i:nth-child(4) { height: 86%; background: #ec8755; }
.frost-chart i:nth-child(5) { height: 68%; }
.frost-chart i:nth-child(6) { height: 42%; }
.frost-phone { margin-top: 25px; padding: 17px; border: 1px solid #ecd1c2; border-left: 4px solid #e8753d; border-radius: 9px; background: #fff8f4; }
.frost-phone small, .frost-phone strong, .frost-phone em { display: block; }
.frost-phone small { color: #997161; font-size: 0.47rem; font-weight: 900; letter-spacing: 0.08em; }
.frost-phone strong { margin-top: 7px; color: #a84725; font-size: 0.76rem; }
.frost-phone em { margin-top: 5px; color: #74655f; font-size: 0.57rem; font-style: normal; }
.frost-buffer { display: grid; grid-template-columns: auto 1fr auto 1fr auto; margin-top: 34px; align-items: center; gap: 8px; color: #37606a; font-size: 0.48rem; text-align: center; }
.frost-buffer i { height: 1px; background: #8db6bf; }
.frost-buffer span { padding: 12px; border: 1px solid #8fb9c3; color: #fff; background: #317b8d; font-weight: 850; }

.frost-sizing { background: #f4f7f5; }
.frost-sizing-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(35px, 7vw, 90px); align-items: start; }
.frost-sizing-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #cfd8d5; }
.frost-sizing-list li { display: grid; grid-template-columns: 48px 1fr; padding: 18px 0; gap: 10px; border-bottom: 1px solid #cfd8d5; }
.frost-sizing-list li > span { color: #2a7589; font-family: Georgia, serif; }
.frost-sizing-list strong, .frost-sizing-list small { display: block; }
.frost-sizing-list strong { font-size: 0.76rem; }
.frost-sizing-list small { margin-top: 6px; color: #63706d; font-size: 0.63rem; line-height: 1.55; }
.frost-map { position: relative; min-height: 465px; padding: 27px; overflow: hidden; border: 1px solid #b7c8c4; background: linear-gradient(145deg, #dce9df, #f5eee0 62%, #d3e4d9); }
.frost-map::after { position: absolute; inset: 0; opacity: 0.28; background-image: linear-gradient(27deg, transparent 49%, #759782 50% 51%, transparent 52%), linear-gradient(153deg, transparent 54%, #8dac98 55% 56%, transparent 57%); background-size: 95px 80px; content: ""; }
.frost-map-label { position: relative; z-index: 2; color: #517064; font-size: 0.52rem; font-weight: 900; letter-spacing: 0.09em; }
.frost-field-lines { position: absolute; z-index: 1; inset: 65px 40px 85px; transform: rotate(-8deg); }
.frost-field-lines i { display: block; height: 1px; margin: 34px 0; background: rgba(76, 112, 87, 0.38); }
.frost-map-probe, .frost-map-gateway { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; }
.frost-map-probe b, .frost-map-gateway b { display: grid; width: 38px; height: 38px; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #24778c; box-shadow: 0 7px 18px rgba(24, 67, 67, 0.25); font-size: 0.58rem; }
.frost-map-probe small, .frost-map-gateway small { padding: 4px 6px; color: #284d43; background: rgba(255, 255, 255, 0.82); font-size: 0.49rem; }
.frost-map-probe-a { top: 31%; left: 12%; }
.frost-map-probe-b { top: 52%; left: 58%; }
.frost-map-probe-c { top: 72%; left: 25%; }
.frost-map-gateway { top: 21%; right: 8%; flex-direction: column; }
.frost-map-gateway b { width: 56px; height: 56px; border-radius: 9px; background: #d76f3d; }
.frost-map > p { position: absolute; z-index: 3; right: 24px; bottom: 20px; left: 24px; margin: 0; padding: 12px; color: #36564e; background: rgba(255, 255, 255, 0.78); font-size: 0.56rem; line-height: 1.5; }

.frost-control { color: #fff; background: #194959; }
.frost-control-layout { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: clamp(40px, 7vw, 90px); align-items: center; }
.frost-control-layout > div:first-child p { color: #bed5da; line-height: 1.7; }
.frost-control-grid { grid-template-columns: repeat(2, 1fr); }
.frost-control-grid article { min-height: 190px; border-color: rgba(255, 255, 255, 0.18); background: rgba(6, 35, 45, 0.52); box-shadow: none; }
.frost-control-grid article > span { display: inline-block; padding: 5px 8px; border: 1px solid #72c1d0; color: #93dce8; font-size: 0.48rem; font-weight: 900; letter-spacing: 0.08em; }
.frost-control-grid h3 { color: #fff; }
.frost-control-grid p { color: #bdd3d8; }

.frost-method { color: #fff; background: #142e37; }
.frost-method .eyebrow, .frost-method .scope-copy p { color: #bad0d5; }
.frost-method .scope-list, .frost-method .scope-list li { border-color: rgba(255, 255, 255, 0.18); }
.frost-method .scope-list small { color: #a9c1c7; }
.frost-cta { background: #d95f2b; }

@media (max-width: 1040px) {
  .frost-flow { grid-template-columns: 1fr; }
  .frost-flow > b { transform: rotate(90deg); }
  .frost-flow article { min-height: 120px; }
  .frost-sizing-layout, .frost-control-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .frost-hero-probes, .frost-need-grid, .frost-function-grid, .frost-control-grid { grid-template-columns: 1fr; }
  .frost-hero-panel { padding: 15px; }
  .frost-hero-weather { grid-template-columns: 1fr; }
  .frost-hero-weather strong { grid-row: auto; grid-column: auto; margin: 13px 0 4px; }
  .frost-hero-link { grid-template-columns: 1fr; }
  .frost-hero-link i { width: 1px; height: 12px; margin: auto; }
  .frost-hero-link strong { margin: auto; }
  .frost-architecture-note { grid-template-columns: 1fr; }
  .frost-function-grid article, .frost-control-grid article { min-height: auto; }
  .frost-buffer { grid-template-columns: 1fr; }
  .frost-buffer i { width: 1px; height: 12px; margin: auto; }
  .frost-map { min-height: 420px; padding: 18px; }
  .frost-map-probe small, .frost-map-gateway small { display: none; }
}

/* Portail de maintenance */
.ticket-service { color: #eef6f7; background: radial-gradient(circle at 85% 18%, rgba(243, 106, 33, 0.16), transparent 28%), #102a35; }
.ticket-service-layout { display: grid; grid-template-columns: 0.88fr 1.12fr; gap: clamp(45px, 8vw, 110px); align-items: center; }
.ticket-service .eyebrow { color: #b9d0d5; }
.ticket-service h2 { margin: 17px 0 22px; color: #fff; font-family: Georgia, serif; font-size: clamp(2.7rem, 5vw, 5rem); font-weight: 400; line-height: 0.98; letter-spacing: -0.04em; }
.ticket-service-copy > p:not(.eyebrow) { max-width: 650px; color: #bfd0d4; line-height: 1.75; }
.ticket-status { display: inline-flex; padding: 6px 9px; border: 1px solid rgba(243, 143, 86, 0.5); color: #ffb68d; background: rgba(243, 106, 33, 0.1); font-size: 0.54rem; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; }
.ticket-service-points { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.ticket-service-points li { display: grid; grid-template-columns: 92px 1fr; padding: 15px 0; gap: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.ticket-service-points strong { color: #fff; font-size: 0.7rem; }
.ticket-service-points span { color: #aec2c7; font-size: 0.66rem; line-height: 1.55; }
.ticket-service-actions { display: flex; margin-top: 28px; align-items: flex-start; flex-direction: column; gap: 10px; }
.ticket-service-actions small { color: #94adb3; font-size: 0.56rem; }

.ticket-board { padding: 23px; border: 1px solid #385966; border-radius: 17px; color: #172d35; background: #f3f6f5; box-shadow: 0 30px 66px rgba(0, 0, 0, 0.28); }
.ticket-board-top { display: flex; padding: 4px 3px 15px; align-items: center; justify-content: space-between; border-bottom: 1px solid #ccd7d8; }
.ticket-board-top strong { color: #173b49; font-size: 0.65rem; letter-spacing: 0.08em; }
.ticket-board-top span { padding: 4px 6px; color: #fff; background: #26768a; font-size: 0.45rem; font-weight: 900; letter-spacing: 0.07em; }
.ticket-board-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px 0; gap: 9px; }
.ticket-board-summary article { padding: 13px; border: 1px solid #d5dede; background: #fff; }
.ticket-board-summary small, .ticket-board-summary b { display: block; }
.ticket-board-summary small { color: #7b898c; font-size: 0.43rem; font-weight: 900; letter-spacing: 0.08em; }
.ticket-board-summary b { margin-top: 8px; color: #18596c; font-family: Georgia, serif; font-size: 1.4rem; }
.ticket-board-list { display: grid; gap: 8px; }
.ticket-board-list article { display: grid; grid-template-columns: 58px 1fr auto; padding: 13px; align-items: center; gap: 11px; border: 1px solid #d1dcdd; background: #fff; }
.ticket-priority { padding: 5px; color: #276579; background: #e4f1f4; font-size: 0.42rem; font-weight: 900; text-align: center; }
.ticket-priority-high { color: #a5441e; background: #ffebe0; }
.ticket-priority-done { color: #347054; background: #e5f3eb; }
.ticket-board-list strong, .ticket-board-list small { display: block; }
.ticket-board-list strong { color: #26393f; font-size: 0.62rem; }
.ticket-board-list small { margin-top: 4px; color: #7b898c; font-size: 0.5rem; }
.ticket-board-list article > b { color: #d66028; }
.ticket-board > button { width: 100%; margin-top: 12px; padding: 12px; border: 0; color: #fff; background: #d86129; font: inherit; font-size: 0.6rem; font-weight: 850; opacity: 1; }
.ticket-board > p { margin: 10px 0 0; color: #849194; font-size: 0.47rem; text-align: right; }

@media (max-width: 1040px) {
  .ticket-service-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .ticket-service h2 { font-size: clamp(2.5rem, 12vw, 3.7rem); }
  .ticket-board { padding: 15px; }
  .ticket-board-summary { grid-template-columns: 1fr; }
  .ticket-board-list article { grid-template-columns: 52px 1fr; }
  .ticket-board-list article > b { display: none; }
  .ticket-service-points li { grid-template-columns: 1fr; gap: 5px; }
}

/* Page Planning d’équipe */
.plan-hero {
  background: radial-gradient(circle at 80% 18%, rgba(243, 106, 33, 0.19), transparent 28%), #151515;
}

.plan-hero-panel,
.plan-rules-board,
.plan-adjust-board,
.plan-auth-card {
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 28px 62px rgba(0, 0, 0, 0.28);
}

.plan-hero-panel {
  padding: 22px;
  color: #233036;
  background: #f4f6f4;
  transform: rotate(1deg);
}

.plan-panel-top,
.plan-adjust-top,
.plan-rules-board header {
  display: flex;
  padding-bottom: 14px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #d7dddb;
}

.plan-panel-top strong,
.plan-adjust-top strong,
.plan-rules-board header strong {
  color: #214d59;
  font-size: 0.62rem;
  letter-spacing: 0.09em;
}

.plan-panel-top span,
.plan-adjust-top span,
.plan-rules-board header span {
  padding: 5px 7px;
  color: #fff;
  background: var(--orange-dark);
  font-size: 0.48rem;
  font-weight: 850;
}

.plan-week-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 16px 0;
  border: 1px solid #d8dedd;
}

.plan-week-tabs b {
  padding: 9px 5px;
  border-right: 1px solid #d8dedd;
  color: #758083;
  background: #fff;
  font-size: 0.48rem;
  text-align: center;
}

.plan-week-tabs b:last-child { border-right: 0; }
.plan-week-tabs .is-active { color: #fff; background: #245f6d; }

.plan-mini-grid {
  display: grid;
  grid-template-columns: 70px repeat(6, minmax(44px, 1fr));
  overflow: hidden;
  border-top: 1px solid #d5dcda;
  border-left: 1px solid #d5dcda;
  background: #fff;
}

.plan-mini-grid > * {
  display: grid;
  min-height: 48px;
  padding: 5px;
  place-items: center;
  border-right: 1px solid #d5dcda;
  border-bottom: 1px solid #d5dcda;
  font-size: 0.48rem;
  text-align: center;
}

.plan-mini-grid > b { min-height: 30px; color: #657174; background: #eef1ef; }
.plan-mini-grid > strong { color: #425459; background: #f7f8f7; }
.plan-mini-grid > i { margin: 4px; min-height: 38px; border-radius: 4px; color: #244853; background: #dcecf0; font-style: normal; }
.plan-mini-grid .is-late { color: #844319; background: #ffeadc; }
.plan-mini-grid .is-rest { color: #6f7779; background: #eceeed; }
.plan-mini-grid .is-task { color: #5f4383; background: #eee7f7; }

.plan-panel-status {
  display: flex;
  margin-top: 15px;
  flex-wrap: wrap;
  gap: 7px;
}

.plan-panel-status span {
  padding: 6px 8px;
  color: #386654;
  background: #e4f2e9;
  font-size: 0.48rem;
  font-weight: 800;
}

.plan-panel-status span:last-child { color: #8a4a22; background: #ffeadc; }

.plan-rules-layout,
.plan-adjust-layout,
.plan-security-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(45px, 8vw, 105px);
  align-items: center;
}

.plan-rules-copy h2,
.plan-adjust-copy h2,
.plan-security-copy h2 {
  margin: 17px 0 22px;
  font-family: Georgia, serif;
  font-size: clamp(2.5rem, 4.6vw, 4.6rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.plan-rules-copy > p:not(.eyebrow),
.plan-adjust-copy > p:not(.eyebrow),
.plan-security-copy > p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.7;
}

.plan-rules-board,
.plan-adjust-board {
  padding: 24px;
  border-color: #d0d9d7;
  background: #fff;
  box-shadow: 0 24px 58px rgba(25, 42, 43, 0.12);
}

.plan-rule-list { display: grid; gap: 8px; margin-top: 17px; }
.plan-rule-list div {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  padding: 13px;
  align-items: center;
  gap: 12px;
  border: 1px solid #dde3e1;
  background: #f8faf9;
}
.plan-rule-list b { color: #275e6b; font-size: 0.55rem; }
.plan-rule-list span { color: #5d696c; font-size: 0.58rem; }
.plan-rule-list em { padding: 4px 6px; color: #357055; background: #e6f3eb; font-size: 0.44rem; font-style: normal; font-weight: 850; }
.plan-rules-foot { display: grid; grid-template-columns: 1fr auto 1fr auto; margin-top: 16px; padding: 14px; align-items: center; gap: 8px; color: #5e6d70; background: #eaf0ef; font-size: 0.49rem; }
.plan-rules-foot strong { color: #d05b24; font-family: Georgia, serif; font-size: 1.05rem; }
.plan-rules-board > small { display: block; margin-top: 9px; color: #7c898b; font-size: 0.46rem; text-align: right; }

.plan-engine { background: radial-gradient(circle at 16% 22%, rgba(41, 112, 128, 0.25), transparent 30%), #13252c; }
.plan-engine-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 50px; gap: 18px; }
.plan-engine-grid article { min-height: 330px; padding: 28px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(8, 31, 39, 0.66); }
.plan-engine-grid article > span { color: #f49765; font-size: 0.54rem; font-weight: 900; letter-spacing: 0.1em; }
.plan-engine-grid h3 { margin: 25px 0 12px; font-family: Georgia, serif; font-size: 1.45rem; font-weight: 500; }
.plan-engine-grid p { min-height: 76px; margin: 0; color: #b7c9cd; font-size: 0.76rem; line-height: 1.65; }
.plan-meter { position: relative; margin-top: 28px; padding-top: 15px; border-top: 5px solid #304a53; }
.plan-meter i { position: absolute; top: -5px; left: 0; width: var(--fill); height: 5px; background: var(--orange); }
.plan-meter small, .plan-meter b { display: block; }
.plan-meter small { color: #94adb3; font-size: 0.48rem; }
.plan-meter b { margin-top: 7px; font-size: 0.75rem; }
.plan-cover { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 28px; gap: 7px; }
.plan-cover b { padding: 10px 4px; color: #a7dfba; background: rgba(71, 145, 98, 0.16); font-size: 0.48rem; text-align: center; }
.plan-alert { margin-top: 28px; padding: 16px; border-left: 4px solid #60b77d; background: rgba(71, 145, 98, 0.14); }
.plan-alert strong, .plan-alert small { display: block; }
.plan-alert strong { color: #b8e5c7; font-size: 0.66rem; }
.plan-alert small { margin-top: 6px; color: #87a89a; font-size: 0.46rem; }

.plan-change { display: grid; grid-template-columns: 82px 1fr auto; margin-top: 20px; padding: 16px; align-items: center; gap: 10px; border: 1px solid #e2d9d4; background: #fff8f4; }
.plan-change b { color: #9a5738; font-size: 0.53rem; }
.plan-change span { color: #4e5c60; font-size: 0.65rem; }
.plan-change em { color: #a34e29; font-size: 0.48rem; font-style: normal; font-weight: 850; }
.plan-change.is-new { margin-top: 0; border-color: #cbded3; background: #eef7f1; }
.plan-change.is-new b, .plan-change.is-new em { color: #397356; }
.plan-arrow { color: #d66028; font-size: 1.2rem; text-align: center; }
.plan-locks { display: flex; margin-top: 18px; flex-wrap: wrap; gap: 7px; }
.plan-locks span { padding: 7px 8px; color: #526367; background: #edf1f0; font-size: 0.48rem; }
.plan-adjust-board button { width: 100%; margin-top: 15px; padding: 13px; border: 0; color: #fff; background: #265f6d; font: inherit; font-size: 0.58rem; font-weight: 850; opacity: 1; }

.plan-auth-card { max-width: 430px; padding: 42px 34px; justify-self: center; border: 1px solid #d3dbd9; border-radius: 24px; color: #26383d; background: #fff; box-shadow: 0 28px 60px rgba(25, 42, 43, 0.13); text-align: center; }
.plan-auth-shield { display: grid; width: 76px; height: 76px; margin: 0 auto 23px; place-items: center; border-radius: 24px 24px 32px 32px; color: #fff; background: linear-gradient(145deg, #245f6d, #183f49); font-family: Georgia, serif; font-size: 1.35rem; box-shadow: 0 14px 26px rgba(36, 95, 109, 0.22); }
.plan-auth-card > small { display: block; color: #7c8a8d; font-size: 0.52rem; font-weight: 900; letter-spacing: 0.11em; }
.plan-auth-card > strong { display: block; margin-top: 18px; font-family: Georgia, serif; font-size: 1.45rem; }
.plan-auth-code { display: grid; grid-template-columns: repeat(6, 1fr); margin: 22px 0 14px; gap: 6px; }
.plan-auth-code b { padding: 12px 6px; border: 1px solid #d4dcda; border-radius: 5px; color: #d05b24; background: #f7f9f8; font-size: 1.05rem; }
.plan-auth-card > span { color: #7b898c; font-size: 0.52rem; }
.plan-security-note { margin-top: 22px; padding: 15px 18px; border-left: 4px solid var(--orange); color: #72533f !important; background: #fff2e9; font-size: 0.72rem; }

@media (max-width: 1040px) {
  .plan-rules-layout,
  .plan-adjust-layout,
  .plan-security-layout { grid-template-columns: 1fr; }
  .plan-engine-grid { grid-template-columns: 1fr; }
  .plan-engine-grid article { min-height: auto; }
  .plan-engine-grid p { min-height: 0; }
}

@media (max-width: 760px) {
  .plan-hero-panel { padding: 14px; transform: none; }
  .plan-mini-grid { grid-template-columns: 55px repeat(6, minmax(39px, 1fr)); overflow-x: auto; }
  .plan-mini-grid > * { min-height: 42px; font-size: 0.42rem; }
  .plan-week-tabs b { font-size: 0.42rem; }
  .plan-panel-top,
  .plan-adjust-top,
  .plan-rules-board header { align-items: flex-start; flex-direction: column; }
  .plan-rule-list div { grid-template-columns: 65px 1fr; }
  .plan-rule-list em { grid-column: 2; justify-self: start; }
  .plan-rules-foot { grid-template-columns: 1fr auto; }
  .plan-change { grid-template-columns: 1fr; }
  .plan-auth-card { padding: 32px 20px; }
  .plan-auth-code b { padding: 10px 4px; }
}

/* Page CaveFacture */
.cave-hero {
  background: radial-gradient(circle at 82% 18%, rgba(131, 38, 61, 0.34), transparent 31%), radial-gradient(circle at 70% 72%, rgba(243, 106, 33, 0.1), transparent 28%), #171516;
}

.cave-hero-panel {
  position: relative;
  min-height: 480px;
}

.cave-browser {
  width: 92%;
  padding: 19px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 13px;
  color: #263237;
  background: #f4f3f0;
  box-shadow: 0 30px 64px rgba(0, 0, 0, 0.34);
  transform: rotate(-1deg);
}

.cave-browser-bar {
  display: flex;
  padding-bottom: 12px;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #d9d9d4;
}

.cave-browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: #c9c8c2; }
.cave-browser-bar i:first-child { background: #d96a38; }
.cave-browser-bar span { margin-left: 6px; color: #7a7b76; font-size: 0.46rem; }

.cave-dashboard-head {
  display: flex;
  margin: 17px 0;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.cave-dashboard-head small,
.cave-dashboard-head strong { display: block; }
.cave-dashboard-head small { color: #8e7c72; font-size: 0.43rem; font-weight: 900; letter-spacing: 0.1em; }
.cave-dashboard-head strong { margin-top: 5px; color: #5d1f32; font-family: Georgia, serif; font-size: 1.15rem; }
.cave-dashboard-head > b { padding: 6px 8px; color: #fff; background: #802a43; font-size: 0.45rem; }

.cave-dashboard-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.cave-dashboard-cards article { padding: 12px; border: 1px solid #dedbd5; background: #fff; }
.cave-dashboard-cards small,
.cave-dashboard-cards b { display: block; }
.cave-dashboard-cards small { color: #8b8982; font-size: 0.42rem; }
.cave-dashboard-cards b { margin-top: 8px; color: #b95325; font-size: 0.65rem; }

.cave-dashboard-list { margin-top: 14px; padding: 14px; border: 1px solid #ddd9d3; background: #fff; }
.cave-dashboard-list > span { display: block; margin-bottom: 7px; color: #756f69; font-size: 0.46rem; font-weight: 850; text-transform: uppercase; }
.cave-dashboard-list p { display: flex; margin: 0; padding: 9px 0; align-items: center; justify-content: space-between; border-bottom: 1px solid #ece9e4; font-size: 0.51rem; }
.cave-dashboard-list p:last-child { border-bottom: 0; }
.cave-dashboard-list b { color: #3b494c; }
.cave-dashboard-list em { color: #357156; font-style: normal; }

.cave-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 178px;
  min-height: 335px;
  padding: 34px 15px 18px;
  border: 7px solid #202020;
  border-radius: 28px;
  color: #29373a;
  background: #fbfaf8;
  box-shadow: 0 28px 58px rgba(0, 0, 0, 0.42);
  transform: rotate(3deg);
}
.cave-phone-notch { position: absolute; top: 7px; left: 50%; width: 54px; height: 8px; border-radius: 9px; background: #202020; transform: translateX(-50%); }
.cave-phone > small { display: block; color: #9a704f; font-size: 0.42rem; font-weight: 900; letter-spacing: 0.12em; }
.cave-phone > strong { display: block; margin: 8px 0 18px; color: #6b2038; font-family: Georgia, serif; font-size: 1.05rem; }
.cave-phone > span { display: block; margin: 8px 0; padding: 10px; border: 1px solid #e3dfd9; color: #687174; background: #fff; font-size: 0.5rem; }
.cave-phone > b { display: block; margin-top: 18px; padding: 11px; color: #fff; background: #c55328; font-size: 0.52rem; text-align: center; }

.cave-double-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 52px;
  gap: 22px;
}
.cave-double-grid > article { padding: 32px; border: 1px solid var(--line); background: #fff; }
.cave-double-grid > article > span { color: var(--orange-dark); font-size: 0.58rem; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; }
.cave-double-grid h3 { margin: 21px 0 12px; font-family: Georgia, serif; font-size: 1.75rem; font-weight: 500; }
.cave-double-grid > article > p { color: var(--muted); font-size: 0.8rem; line-height: 1.65; }

.cave-showcase,
.cave-private { min-height: 235px; margin-top: 28px; border: 1px solid #ddd9d2; }
.cave-showcase-photo { display: flex; min-height: 176px; padding: 22px; justify-content: flex-end; flex-direction: column; color: #fff; background: linear-gradient(180deg, rgba(30, 19, 20, 0.12), rgba(42, 17, 24, 0.82)), linear-gradient(135deg, #899b6b, #b88655 60%, #6b283b); }
.cave-showcase-photo b { font-family: Georgia, serif; font-size: 1.6rem; }
.cave-showcase-photo em { margin-top: 7px; font-size: 0.55rem; font-style: normal; }
.cave-showcase-nav { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; }
.cave-showcase-nav span { padding: 14px 6px; border-right: 1px solid #e7e3dc; color: #716865; font-size: 0.47rem; text-align: center; }
.cave-private { display: grid; grid-template-columns: repeat(2, 1fr); padding: 20px; gap: 9px; background: #f3f4f2; }
.cave-private > b { display: grid; min-height: 68px; place-items: center; border: 1px solid #dbdfdc; color: #5f2638; background: #fff; font-size: 0.62rem; }
.cave-private p { display: flex; grid-column: 1 / -1; margin: 0; padding: 13px; align-items: center; justify-content: space-between; color: #5f6e71; background: #e1eeea; font-size: 0.5rem; }
.cave-private em { color: #347355; font-style: normal; font-weight: 850; }

.cave-seo-note {
  display: grid;
  grid-template-columns: auto 1fr;
  margin-top: 24px;
  padding: clamp(28px, 5vw, 48px);
  align-items: center;
  gap: clamp(24px, 4vw, 42px);
  border: 1px solid #d8dedb;
  background: linear-gradient(135deg, #f4f7f5, #fff 58%, #fff0e7);
}
.cave-seo-mark { display: grid; width: 86px; height: 86px; place-items: center; border: 2px solid #c65328; border-radius: 50%; color: #c65328; font-family: Georgia, serif; font-size: 2rem; }
.cave-seo-note small { color: #7a253f; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.cave-seo-note h3 { margin: 8px 0 15px; font-family: Georgia, serif; font-size: clamp(1.65rem, 3vw, 2.6rem); font-weight: 500; line-height: 1.08; }
.cave-seo-note p { max-width: 900px; margin: 0; color: #65706f; font-size: 0.78rem; line-height: 1.65; }
.cave-seo-note p + p { margin-top: 11px; padding-top: 11px; border-top: 1px solid #d9ddda; }
.cave-seo-note strong { color: #6e2a3d; }

.cave-invoice-layout,
.cave-mobile-layout,
.cave-electronic-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(45px, 8vw, 105px);
  align-items: center;
}
.cave-invoice-copy h2,
.cave-mobile-copy h2,
.cave-electronic-copy h2 {
  margin: 17px 0 22px;
  font-family: Georgia, serif;
  font-size: clamp(2.5rem, 4.6vw, 4.6rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.cave-invoice-copy > p:not(.eyebrow),
.cave-mobile-copy > p:not(.eyebrow),
.cave-electronic-copy > p:not(.eyebrow) { color: var(--muted); line-height: 1.7; }

.cave-invoice-board { padding: 24px; border: 1px solid #d5dbd8; color: #2e393c; background: #fff; box-shadow: 0 26px 58px rgba(31, 42, 40, 0.12); }
.cave-invoice-board header { display: flex; padding-bottom: 14px; align-items: center; justify-content: space-between; border-bottom: 1px solid #dedfdc; }
.cave-invoice-board header strong { color: #662239; font-size: 0.62rem; letter-spacing: 0.09em; }
.cave-invoice-board header span { padding: 5px 7px; color: #9a522e; background: #ffeadf; font-size: 0.46rem; font-weight: 850; }
.cave-invoice-client { display: grid; grid-template-columns: 70px 1fr auto; margin: 16px 0; padding: 13px; align-items: center; gap: 10px; background: #f2f4f2; }
.cave-invoice-client small { color: #7e8786; font-size: 0.44rem; font-weight: 850; }
.cave-invoice-client b { font-size: 0.62rem; }
.cave-invoice-client em { color: #397356; font-size: 0.45rem; font-style: normal; }
.cave-invoice-table { border-top: 1px solid #dfe2df; border-left: 1px solid #dfe2df; }
.cave-invoice-table > div { display: grid; grid-template-columns: 1.5fr 0.5fr 0.8fr 0.5fr; }
.cave-invoice-table b,
.cave-invoice-table span { padding: 10px 7px; border-right: 1px solid #dfe2df; border-bottom: 1px solid #dfe2df; font-size: 0.48rem; }
.cave-invoice-table .is-head { color: #f2e8e5; background: #64243a; }
.cave-invoice-total { display: grid; grid-template-columns: 1fr auto; margin: 17px 0 0 auto; max-width: 210px; gap: 7px 16px; color: #6c7677; font-size: 0.49rem; }
.cave-invoice-total b { color: #455356; }
.cave-invoice-total strong { color: #bf4f24; font-size: 0.68rem; }
.cave-invoice-actions { display: flex; margin-top: 18px; justify-content: flex-end; gap: 8px; }
.cave-invoice-actions span,
.cave-invoice-actions b { padding: 10px 13px; font-size: 0.49rem; }
.cave-invoice-actions span { color: #5e6d70; background: #e9edeb; }
.cave-invoice-actions b { color: #fff; background: #c65328; }

.cave-stock { background: radial-gradient(circle at 12% 28%, rgba(128, 42, 67, 0.26), transparent 32%), #1c1719; }
.cave-stock-layout { display: grid; grid-template-columns: 1.18fr 0.82fr; margin-top: 54px; gap: clamp(40px, 7vw, 90px); align-items: center; }
.cave-vintage-card { padding: 24px; color: #2b3739; background: #f5f4f1; box-shadow: 0 30px 64px rgba(0, 0, 0, 0.28); }
.cave-vintage-head { display: flex; padding-bottom: 15px; align-items: center; justify-content: space-between; border-bottom: 1px solid #d9d9d4; }
.cave-vintage-head small,
.cave-vintage-head strong { display: block; }
.cave-vintage-head small { color: #927a6e; font-size: 0.43rem; font-weight: 900; }
.cave-vintage-head strong { margin-top: 5px; color: #63233a; font-family: Georgia, serif; font-size: 1.15rem; }
.cave-vintage-head span { padding: 5px 7px; color: #fff; background: #357255; font-size: 0.45rem; }
.cave-stock-metrics { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 15px; gap: 9px; }
.cave-stock-metrics article { padding: 14px; border: 1px solid #dfddd7; background: #fff; }
.cave-stock-metrics small,
.cave-stock-metrics b,
.cave-stock-metrics em { display: block; }
.cave-stock-metrics small { color: #8a8781; font-size: 0.43rem; text-transform: uppercase; }
.cave-stock-metrics b { margin-top: 8px; color: #bd5127; font-size: 0.72rem; }
.cave-stock-metrics em { margin-top: 5px; color: #7b817f; font-size: 0.45rem; font-style: normal; }
.cave-stock-history { margin-top: 14px; padding: 5px 14px; border: 1px solid #dedbd5; background: #fff; }
.cave-stock-history p { display: flex; margin: 0; padding: 10px 0; justify-content: space-between; border-bottom: 1px solid #ece9e3; color: #4e5b5e; font-size: 0.51rem; }
.cave-stock-history p:last-child { border-bottom: 0; }
.cave-stock-history em { color: #397256; font-style: normal; }
.cave-stock-copy h3 { margin: 0 0 20px; font-family: Georgia, serif; font-size: clamp(2.2rem, 4vw, 3.8rem); font-weight: 400; line-height: 1; }
.cave-stock-copy > p { color: #bdafb4; line-height: 1.7; }
.cave-stock-points { margin: 28px 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); list-style: none; }
.cave-stock-points li { display: grid; grid-template-columns: 95px 1fr; padding: 15px 0; gap: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.cave-stock-points strong { color: #f58b58; font-size: 0.65rem; }
.cave-stock-points span { color: #b9adb1; font-size: 0.68rem; line-height: 1.55; }

.cave-share-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 12px; }
.cave-share-flow article { min-height: 180px; padding: 22px; border: 1px solid #d9dedb; background: #fff; box-shadow: 0 18px 38px rgba(28, 42, 40, 0.08); }
.cave-share-flow span { color: #c65328; font-family: Georgia, serif; font-size: 1.2rem; }
.cave-share-flow b,
.cave-share-flow small { display: block; }
.cave-share-flow b { margin-top: 30px; color: #63233a; font-size: 0.75rem; }
.cave-share-flow small { margin-top: 7px; color: #7a8382; font-size: 0.52rem; line-height: 1.5; }
.cave-share-flow > i { color: #c65328; font-style: normal; }

.cave-fx-card { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; }
.cave-fx-document,
.cave-fx-platform { display: flex; min-height: 260px; padding: 28px; align-items: center; justify-content: center; flex-direction: column; border: 1px solid #d8dcd9; background: #fff; box-shadow: 0 24px 50px rgba(28, 42, 40, 0.1); text-align: center; }
.cave-fx-document > span,
.cave-fx-platform > span { display: grid; width: 62px; height: 62px; place-items: center; border-radius: 50%; color: #fff; background: #7a253f; font-family: Georgia, serif; font-size: 1.15rem; }
.cave-fx-platform > span { background: #c65328; }
.cave-fx-document strong,
.cave-fx-platform strong { margin-top: 20px; font-family: Georgia, serif; font-size: 1.15rem; }
.cave-fx-document small,
.cave-fx-platform small { margin-top: 8px; color: #788180; font-size: 0.53rem; line-height: 1.5; }
.cave-fx-document b { margin-top: 18px; padding: 6px 9px; color: #9b4a29; background: #ffeadf; font-size: 0.52rem; }
.cave-fx-card > i { color: #c65328; font-size: 1.5rem; font-style: normal; }
.cave-official-link { display: inline-flex; margin-top: 18px; align-items: center; gap: 7px; color: #9f4220; font-size: 0.72rem; font-weight: 850; text-decoration: underline; text-underline-offset: 4px; }

.cave-operation { background: #1b2529; }
.cave-operation-grid article { background: rgba(17, 35, 41, 0.72); }
.cave-operation-mark { margin-top: 27px; padding: 13px; border-left: 3px solid #f0834f; color: #d9b09c; background: rgba(243, 106, 33, 0.09); font-size: 0.53rem; }

@media (max-width: 1040px) {
  .cave-double-grid,
  .cave-invoice-layout,
  .cave-mobile-layout,
  .cave-electronic-layout,
  .cave-stock-layout { grid-template-columns: 1fr; }
  .cave-hero-panel { max-width: 720px; }
}

@media (max-width: 760px) {
  .cave-hero-panel { min-height: 650px; }
  .cave-browser { width: 100%; padding: 14px; transform: none; }
  .cave-dashboard-cards { grid-template-columns: 1fr; }
  .cave-phone { right: 10px; bottom: 0; }
  .cave-double-grid { gap: 15px; }
  .cave-double-grid > article { padding: 24px; }
  .cave-invoice-board,
  .cave-vintage-card { padding: 15px; }
  .cave-invoice-client { grid-template-columns: 1fr; }
  .cave-invoice-table b,
  .cave-invoice-table span { padding: 8px 3px; font-size: 0.42rem; }
  .cave-stock-metrics { grid-template-columns: 1fr; }
  .cave-share-flow { grid-template-columns: 1fr; }
  .cave-share-flow > i { transform: rotate(90deg); text-align: center; }
  .cave-share-flow article { min-height: auto; }
  .cave-share-flow b { margin-top: 18px; }
  .cave-fx-card { grid-template-columns: 1fr; }
  .cave-fx-card > i { transform: rotate(90deg); text-align: center; }
  .cave-fx-document,
  .cave-fx-platform { min-height: 220px; }
  .cave-seo-note { grid-template-columns: 1fr; }
  .cave-seo-mark { width: 66px; height: 66px; font-size: 1.5rem; }
}

/* Centre de tickets AMNET */
.ticket-service-detail {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ffd0b6;
  font-size: 0.66rem;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ticket-product-showcase {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  margin-top: clamp(64px, 9vw, 120px);
  padding: clamp(28px, 5vw, 58px);
  gap: clamp(34px, 6vw, 78px);
  align-items: center;
  border: 1px solid #ccd7d8;
  color: #23363d;
  background: linear-gradient(135deg, #eef5f5, #fff 55%, #fff0e7);
  box-shadow: 0 28px 65px rgba(25, 49, 57, 0.12);
}

.ticket-product-copy h2 {
  margin: 17px 0 21px;
  font-family: Georgia, serif;
  font-size: clamp(2.2rem, 4vw, 4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}

.ticket-product-copy > p:not(.eyebrow) { color: #5d7075; line-height: 1.72; }
.ticket-product-copy .web-feature-list { margin-top: 24px; }

.ticket-product-screen,
.ticket-page-screen {
  margin: 0;
  overflow: hidden;
  border: 1px solid #cbd6d7;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 24px 55px rgba(20, 45, 54, 0.17);
}

.ticket-product-screen { transform: rotate(0.8deg); }
.ticket-product-screen img,
.ticket-page-screen img { display: block; width: 100%; height: auto; }
.ticket-product-screen figcaption,
.ticket-page-screen figcaption { padding: 11px 15px; color: #6f7f83; background: #f7f9f8; font-size: 0.53rem; line-height: 1.4; }

.ticket-page-hero { background: radial-gradient(circle at 84% 20%, rgba(243, 106, 33, 0.2), transparent 29%), #102a35; }
.ticket-page-hero .detail-lead { color: #c4d5d8; }
.ticket-page-hero-layout { grid-template-columns: 0.82fr 1.18fr; }
.ticket-page-screen-hero { transform: rotate(0.7deg); }
.ticket-built-by { margin: 20px 0 0; padding-left: 15px; border-left: 3px solid #f36a21; color: #ffd4bc; font-size: 0.72rem; font-weight: 800; }

.ticket-space-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 52px;
  gap: 20px;
}

.ticket-space-grid article { position: relative; min-height: 360px; padding: clamp(27px, 4vw, 44px); border: 1px solid #d8dfde; background: #fff; box-shadow: 0 18px 42px rgba(27, 47, 52, 0.08); }
.ticket-space-grid article > span { position: absolute; top: 28px; right: 30px; color: #cf5820; font-family: Georgia, serif; font-size: 2rem; }
.ticket-space-grid small { color: #b74d1d; font-size: 0.58rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.ticket-space-grid h3 { max-width: 520px; margin: 34px 0 16px; font-family: Georgia, serif; font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 400; line-height: 1.05; }
.ticket-space-grid p { color: #657376; line-height: 1.65; }
.ticket-space-grid ul { display: grid; margin: 24px 0 0; padding: 0; gap: 10px; list-style: none; }
.ticket-space-grid li { padding-left: 18px; color: #30474e; font-size: 0.68rem; font-weight: 780; }
.ticket-space-grid li::before { margin-left: -18px; margin-right: 9px; color: #d65e26; content: "✓"; }
.ticket-stage-note { margin: 22px 0 0; padding: 16px 19px; border-left: 3px solid #d86028; color: #617075; background: #f4f7f6; font-size: 0.64rem; line-height: 1.6; }
.ticket-stage-note strong { color: #253b42; }

.ticket-feature-layout,
.ticket-security-layout,
.ticket-audit-layout,
.ticket-sla-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(42px, 7vw, 94px);
  align-items: center;
}

.ticket-feature-copy h2 { margin: 17px 0 22px; font-family: Georgia, serif; font-size: clamp(2.5rem, 4.5vw, 4.5rem); font-weight: 400; line-height: 0.99; letter-spacing: -0.04em; }
.ticket-feature-copy > p:not(.eyebrow) { color: #637175; line-height: 1.72; }
.ticket-check-list { display: grid; margin: 28px 0 0; padding: 0; gap: 11px; list-style: none; }
.ticket-check-list li { position: relative; padding: 13px 16px 13px 44px; border: 1px solid #d8dedc; color: #2e454c; background: #fff; font-size: 0.66rem; font-weight: 780; }
.ticket-check-list li::before { position: absolute; top: 13px; left: 17px; color: #d45b22; content: "✓"; }

.ticket-page-screen-dark { border-color: #44616a; box-shadow: 0 28px 62px rgba(0, 0, 0, 0.3); }
.ticket-priority-list { display: grid; margin: 0; padding: 0; gap: 11px; list-style: none; counter-reset: ticket-priority; }
.ticket-priority-list li { display: grid; grid-template-columns: 86px 1fr; padding: 17px; gap: 16px; align-items: center; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.05); }
.ticket-priority-list span { color: #ffaf82; font-size: 0.66rem; font-weight: 900; text-transform: uppercase; }
.ticket-priority-list p { margin: 0; color: #bfd0d4; font-size: 0.66rem; line-height: 1.55; }
.ticket-data-note { margin-top: 24px; padding: 14px 17px; border-left: 3px solid #d75e26; background: #f1f5f4; font-size: 0.62rem; }

@media (max-width: 1040px) {
  .ticket-product-showcase,
  .ticket-page-hero-layout,
  .ticket-feature-layout,
  .ticket-security-layout,
  .ticket-audit-layout,
  .ticket-sla-layout { grid-template-columns: 1fr; }
  .ticket-product-screen,
  .ticket-page-screen { max-width: 850px; transform: none; }
  .ticket-security-layout .ticket-page-screen { order: 2; }
}

@media (max-width: 760px) {
  .ticket-product-showcase { padding: 24px 18px; }
  .ticket-space-grid { grid-template-columns: 1fr; }
  .ticket-space-grid article { min-height: auto; }
  .ticket-priority-list li { grid-template-columns: 1fr; gap: 7px; }
  .ticket-product-screen figcaption,
  .ticket-page-screen figcaption { font-size: 0.49rem; }
}

/* Logiciels Windows & services */
.win-hero { background: radial-gradient(circle at 83% 18%, rgba(243, 106, 33, 0.18), transparent 30%), #182326; }
.win-hero-layout { grid-template-columns: 0.88fr 1.12fr; }
.win-hero .detail-lead { color: #c5d1d2; }

.win-hero-window {
  padding: 20px;
  overflow: hidden;
  border: 1px solid #45575b;
  border-radius: 15px;
  color: #29383c;
  background: #f3f5f4;
  box-shadow: 0 32px 68px rgba(0, 0, 0, 0.3);
  transform: rotate(0.7deg);
}
.win-window-bar { display: flex; padding: 3px 3px 15px; align-items: center; gap: 6px; border-bottom: 1px solid #d2d9d7; }
.win-window-bar > span { width: 7px; height: 7px; border-radius: 50%; background: #c5cecb; }
.win-window-bar > span:first-child { background: #ed8351; }
.win-window-bar strong { margin-left: 7px; color: #53656a; font-size: 0.52rem; letter-spacing: 0.08em; text-transform: uppercase; }
.win-document-head { display: grid; grid-template-columns: 54px 1fr auto; margin-top: 14px; padding: 15px; align-items: center; gap: 12px; background: #fff; }
.win-document-head > span { display: grid; width: 46px; height: 46px; place-items: center; color: #fff; background: #d55d27; font-size: 0.46rem; font-weight: 900; }
.win-document-head b, .win-document-head small { display: block; }
.win-document-head b { color: #213a43; font-size: 0.68rem; }
.win-document-head small { margin-top: 4px; color: #849093; font-size: 0.47rem; }
.win-document-head em { color: #3f785b; font-size: 0.48rem; font-style: normal; font-weight: 850; }
.win-module-grid { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 11px; gap: 9px; }
.win-module-grid article { min-height: 100px; padding: 15px; border: 1px solid #d8dedc; background: #fff; }
.win-module-grid span, .win-module-grid b, .win-module-grid small { display: block; }
.win-module-grid span { color: #d45d26; font-family: Georgia, serif; font-size: 0.9rem; }
.win-module-grid b { margin-top: 15px; color: #27444d; font-size: 0.63rem; }
.win-module-grid small { margin-top: 4px; color: #879294; font-size: 0.46rem; }
.win-offline { display: grid; grid-template-columns: auto 1fr auto; margin-top: 11px; padding: 13px 15px; align-items: center; gap: 10px; color: #e8f1ee; background: #1f4a55; }
.win-offline i { width: 8px; height: 8px; border-radius: 50%; background: #6ed09a; box-shadow: 0 0 9px rgba(110, 208, 154, 0.7); }
.win-offline span { font-size: 0.52rem; font-weight: 850; }
.win-offline b { color: #aac4c9; font-size: 0.46rem; }
.win-hero-window > p { margin: 11px 0 0; color: #849093; font-size: 0.46rem; text-align: right; }

.win-major-case { display: grid; grid-template-columns: 0.9fr 1.1fr; margin-top: clamp(50px, 7vw, 86px); padding: clamp(28px, 5vw, 58px); gap: clamp(40px, 7vw, 90px); align-items: center; border: 1px solid #d5dcda; background: linear-gradient(135deg, #f5f7f6, #fff 56%, #fff0e7); box-shadow: 0 24px 58px rgba(29, 47, 50, 0.1); }
.project-status-win { margin: 0 0 24px; border-color: rgba(38, 107, 119, 0.32); color: #245c67; background: rgba(38, 107, 119, 0.08); }
.win-major-copy h2, .win-architecture-copy h2 { margin: 17px 0 22px; font-family: Georgia, serif; font-size: clamp(2.5rem, 4.7vw, 4.8rem); font-weight: 400; line-height: 0.98; letter-spacing: -0.04em; }
.win-major-copy > p:not(.eyebrow) { color: #627174; line-height: 1.7; }
.win-major-copy > p + p { margin-top: 12px; }
.win-key-points { margin: 28px 0 0; padding: 0; border-top: 1px solid #d5dddb; list-style: none; }
.win-key-points li { display: grid; grid-template-columns: 135px 1fr; padding: 15px 0; gap: 15px; border-bottom: 1px solid #d5dddb; }
.win-key-points strong { color: #b84e1e; font-size: 0.63rem; }
.win-key-points span { color: #647477; font-size: 0.62rem; line-height: 1.55; }

.win-cost-flow { padding: 22px; border: 1px solid #bcc9ca; color: #2a3b40; background: #fff; box-shadow: 0 24px 50px rgba(30, 55, 62, 0.13); }
.win-flow-title { display: flex; padding: 4px 2px 15px; justify-content: space-between; gap: 16px; border-bottom: 1px solid #d5dcda; }
.win-flow-title strong { color: #235663; font-size: 0.58rem; letter-spacing: 0.09em; }
.win-flow-title span { color: #899497; font-size: 0.47rem; }
.win-cost-flow ol { display: grid; margin: 16px 0 0; padding: 0; gap: 8px; list-style: none; }
.win-cost-flow li { display: grid; grid-template-columns: 42px 1fr auto; padding: 11px 13px; align-items: center; gap: 10px; border: 1px solid #dbe1df; background: #f7f9f8; }
.win-cost-flow li::after { color: #d35d26; content: "→"; }
.win-cost-flow li:last-child::after { color: #43806a; content: "✓"; }
.win-cost-flow li > span { color: #ce5a24; font-family: Georgia, serif; font-size: 0.8rem; }
.win-cost-flow b, .win-cost-flow small { display: block; }
.win-cost-flow b { color: #2a4249; font-size: 0.6rem; }
.win-cost-flow small { margin-top: 3px; color: #839093; font-size: 0.45rem; }
.win-flow-output { display: grid; grid-template-columns: auto auto auto 1fr; margin-top: 12px; align-items: center; gap: 7px; }
.win-flow-output span { padding: 7px; color: #fff; background: #2b6875; font-size: 0.42rem; font-weight: 900; }
.win-flow-output b { justify-self: end; color: #3b795f; font-size: 0.49rem; }
.win-cost-flow > p { margin: 12px 0 0; color: #879295; font-size: 0.45rem; text-align: right; }

.win-case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 55px; gap: 18px; }
.win-case-grid article { position: relative; min-height: 345px; padding: clamp(26px, 4vw, 42px); border: 1px solid #d8dedc; background: #fff; box-shadow: 0 18px 42px rgba(32, 48, 50, 0.07); }
.win-case-number { position: absolute; top: 25px; right: 28px; color: #cf5820; font-family: Georgia, serif; font-size: 1.8rem; }
.win-case-icon { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid #d4602a; border-radius: 50%; color: #cb5520; font-family: Georgia, serif; font-size: 1.2rem; }
.win-case-grid h3 { margin: 30px 0 16px; font-family: Georgia, serif; font-size: clamp(1.7rem, 3vw, 2.55rem); font-weight: 400; line-height: 1.06; }
.win-case-grid p { color: #647174; font-size: 0.72rem; line-height: 1.68; }
.win-case-grid small { display: block; margin-top: 24px; padding-top: 14px; border-top: 1px solid #e0e4e2; color: #326a73; font-size: 0.52rem; font-weight: 850; letter-spacing: 0.04em; text-transform: uppercase; }

.win-lifecycle { background: radial-gradient(circle at 12% 28%, rgba(42, 111, 123, 0.2), transparent 31%), #172226; }
.win-lifecycle-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 58px 0 0; padding: 0; gap: 1px; background: rgba(255, 255, 255, 0.13); list-style: none; }
.win-lifecycle-grid li { min-height: 250px; padding: 30px; background: #1b292d; }
.win-lifecycle-grid span { color: #ef7c45; font-family: Georgia, serif; font-size: 1.2rem; }
.win-lifecycle-grid h3 { margin: 46px 0 12px; color: #fff; font-family: Georgia, serif; font-size: 1.5rem; font-weight: 400; }
.win-lifecycle-grid p { color: #aec1c4; font-size: 0.65rem; line-height: 1.6; }

.win-architecture-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(45px, 8vw, 105px); align-items: center; }
.win-architecture-copy > p:not(.eyebrow) { color: #647174; line-height: 1.7; }
.win-architecture-copy > p + p { margin-top: 14px; }
.win-release-pipeline { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; padding: 28px; align-items: center; gap: 10px; border: 1px solid #d2dad8; background: linear-gradient(140deg, #f3f7f6, #fff); box-shadow: 0 24px 54px rgba(30, 50, 54, 0.1); }
.win-release-pipeline > div { display: flex; min-height: 150px; padding: 18px 10px; align-items: center; justify-content: center; flex-direction: column; border: 1px solid #d7dfdd; background: #fff; text-align: center; }
.win-release-pipeline span { color: #ce5823; font-size: 0.46rem; font-weight: 900; letter-spacing: 0.09em; }
.win-release-pipeline b { margin-top: 25px; color: #29464f; font-size: 0.6rem; }
.win-release-pipeline small { margin-top: 6px; color: #849194; font-size: 0.44rem; line-height: 1.4; }
.win-release-pipeline > i { color: #d25a24; font-style: normal; }
.win-release-pipeline > p { grid-column: 1 / -1; margin: 14px 0 0; color: #718084; font-size: 0.53rem; text-align: center; }

@media (max-width: 1100px) {
  .win-hero-layout,
  .win-major-case,
  .win-architecture-layout { grid-template-columns: 1fr; }
  .win-hero-window { max-width: 760px; transform: none; }
  .win-release-pipeline { grid-template-columns: 1fr auto 1fr; }
  .win-release-pipeline > p { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .win-hero-window { padding: 14px; }
  .win-document-head { grid-template-columns: 45px 1fr; }
  .win-document-head em { grid-column: 1 / -1; }
  .win-module-grid,
  .win-case-grid,
  .win-lifecycle-grid { grid-template-columns: 1fr; }
  .win-major-case { padding: 25px 18px; }
  .win-key-points li { grid-template-columns: 1fr; gap: 6px; }
  .win-flow-output { grid-template-columns: repeat(3, auto); }
  .win-flow-output b { grid-column: 1 / -1; justify-self: start; }
  .win-case-grid article { min-height: auto; }
  .win-lifecycle-grid li { min-height: 215px; }
  .win-release-pipeline { grid-template-columns: 1fr; padding: 18px; }
  .win-release-pipeline > i { transform: rotate(90deg); text-align: center; }
  .win-release-pipeline > p { grid-column: 1; }
}

/* Modernisation de logiciels */
.modernization-hero { background: radial-gradient(circle at 82% 20%, rgba(215, 91, 34, 0.2), transparent 30%), #211d1b; }
.modernization-hero-layout { grid-template-columns: 0.9fr 1.1fr; }
.modernization-hero .detail-lead { color: #d2c9c4; }

.modernization-hero-bridge { display: grid; grid-template-columns: 1fr auto 1fr; padding: 25px; align-items: center; gap: 13px; border: 1px solid #534944; border-radius: 15px; background: #f4f3ef; box-shadow: 0 30px 65px rgba(0, 0, 0, 0.3); transform: rotate(0.6deg); }
.modernization-old,
.modernization-new { display: flex; min-height: 205px; padding: 22px; align-items: center; justify-content: center; flex-direction: column; border: 1px solid #d9d5cf; background: #fff; text-align: center; }
.modernization-old > span,
.modernization-new > span { color: #a06f59; font-size: 0.48rem; font-weight: 900; letter-spacing: 0.1em; }
.modernization-old b,
.modernization-new b { margin-top: 36px; color: #483731; font-family: Georgia, serif; font-size: 1.15rem; font-weight: 500; }
.modernization-old small,
.modernization-new small { margin-top: 9px; color: #8a817d; font-size: 0.49rem; line-height: 1.5; }
.modernization-new { border-color: #b9cfca; background: #f4faf8; }
.modernization-new > span { color: #2f7568; }
.modernization-new b { color: #254f48; }
.modernization-preserve { display: grid; justify-items: center; gap: 11px; color: #d45b23; }
.modernization-preserve i { font-style: normal; }
.modernization-preserve span { writing-mode: vertical-rl; color: #9c6a53; font-size: 0.43rem; font-weight: 900; letter-spacing: 0.09em; }
.modernization-hero-bridge > p { grid-column: 1 / -1; margin: 4px 0 0; color: #8a817d; font-size: 0.46rem; text-align: right; }

.modernization-case-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; margin-top: 55px; gap: clamp(42px, 7vw, 94px); align-items: center; }
.modernization-before-after { display: grid; grid-template-columns: 1fr auto 1fr; padding: 25px; align-items: stretch; gap: 12px; border: 1px solid #d7dcda; background: #f3f5f4; box-shadow: 0 25px 56px rgba(31, 47, 48, 0.12); }
.modernization-before-after > article { display: flex; min-height: 300px; padding: 18px; align-items: center; flex-direction: column; border: 1px solid #dadfdd; background: #fff; }
.modernization-before-after > article > span { align-self: flex-start; color: #a66c52; font-size: 0.48rem; font-weight: 900; letter-spacing: 0.1em; }
.modernization-before-after > article > strong { margin-top: auto; padding: 8px 11px; color: #fff; background: #84695d; font-size: 0.53rem; }
.modernization-before-after > .is-after { border-color: #bcd2cc; background: #f8fbfa; }
.modernization-before-after > .is-after > span { color: #347664; }
.modernization-before-after > .is-after > strong { background: #347664; }
.modernization-desktop,
.modernization-browser { width: 100%; margin-top: 36px; padding: 18px 12px; border: 5px solid #4c4c4c; color: #37454a; background: #f1f1f1; text-align: center; }
.modernization-desktop > i { display: inline-block; width: 5px; height: 5px; margin: 0 2px 18px; border-radius: 50%; background: #b0b0b0; }
.modernization-desktop b,
.modernization-desktop small,
.modernization-browser b,
.modernization-browser small { display: block; }
.modernization-desktop b,
.modernization-browser b { font-size: 0.6rem; }
.modernization-desktop small,
.modernization-browser small { margin-top: 7px; color: #808a8d; font-size: 0.45rem; }
.modernization-browser { padding-top: 0; border-color: #315d63; background: #fff; }
.modernization-browser header { height: 20px; margin: 0 -12px 18px; background: #dfe9e6; }
.modernization-transfer { display: flex; min-width: 70px; align-items: center; justify-content: center; flex-direction: column; gap: 9px; color: #d25a22; }
.modernization-transfer span { color: #8b7770; font-size: 0.4rem; font-weight: 900; letter-spacing: 0.07em; }
.modernization-transfer b { color: #4c686c; }
.modernization-transfer i { margin-top: 14px; font-size: 1.4rem; font-style: normal; }
.modernization-before-after > p { grid-column: 1 / -1; margin: 2px 0 0; color: #879092; font-size: 0.46rem; text-align: right; }
.project-status-modern { margin: 0 0 22px; border-color: rgba(48, 117, 98, 0.36); color: #2d705e; background: rgba(48, 117, 98, 0.08); }
.modernization-case-copy h3 { margin: 0 0 20px; font-family: Georgia, serif; font-size: clamp(2.2rem, 4vw, 3.8rem); font-weight: 400; line-height: 1; }
.modernization-case-copy > p { color: #647275; line-height: 1.7; }
.modernization-check-list { margin: 27px 0 0; padding: 0; border-top: 1px solid #d9dfdd; list-style: none; }
.modernization-check-list li { display: grid; grid-template-columns: 90px 1fr; padding: 14px 0; gap: 12px; border-bottom: 1px solid #d9dfdd; }
.modernization-check-list strong { color: #be501f; font-size: 0.63rem; }
.modernization-check-list span { color: #687679; font-size: 0.61rem; line-height: 1.5; }
.modernization-case-copy .web-project-link { margin-top: 25px; }

.modernization-path-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 55px; gap: 17px; }
.modernization-path-grid article { min-height: 330px; padding: 31px; border: 1px solid #d8dddb; background: #fff; box-shadow: 0 18px 40px rgba(36, 49, 49, 0.07); }
.modernization-path-grid article > span { color: #d15a23; font-family: Georgia, serif; font-size: 1.35rem; }
.modernization-path-grid h3 { margin: 55px 0 16px; font-family: Georgia, serif; font-size: clamp(1.6rem, 2.5vw, 2.35rem); font-weight: 400; line-height: 1.05; }
.modernization-path-grid p { color: #667477; font-size: 0.68rem; line-height: 1.65; }
.modernization-path-grid small { display: block; margin-top: 22px; padding-top: 14px; border-top: 1px solid #e0e4e2; color: #3b7075; font-size: 0.49rem; font-weight: 800; line-height: 1.5; }

.modernization-data { background: radial-gradient(circle at 12% 30%, rgba(46, 114, 103, 0.2), transparent 31%), #192426; }
.modernization-data-layout { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(45px, 8vw, 105px); align-items: center; }
.modernization-data-copy h2, .modernization-preserve-copy h2 { margin: 17px 0 22px; font-family: Georgia, serif; font-size: clamp(2.5rem, 4.6vw, 4.7rem); font-weight: 400; line-height: 0.98; letter-spacing: -0.04em; }
.modernization-data-copy h2 { color: #fff; }
.modernization-data-copy > p:not(.eyebrow) { color: #b8c8c9; line-height: 1.7; }
.modernization-data-copy > p + p { margin-top: 14px; }
.modernization-data-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; padding: 25px; align-items: center; gap: 10px; border: 1px solid #43585a; background: #f1f5f3; box-shadow: 0 28px 60px rgba(0, 0, 0, 0.28); }
.modernization-data-flow > div { display: flex; min-height: 190px; padding: 18px 10px; align-items: center; justify-content: center; flex-direction: column; border: 1px solid #d4deda; background: #fff; text-align: center; }
.modernization-data-flow span { color: #b94e1e; font-size: 0.44rem; font-weight: 900; letter-spacing: 0.09em; }
.modernization-data-flow b { margin-top: 33px; color: #29454b; font-size: 0.62rem; }
.modernization-data-flow small { margin-top: 8px; color: #7f8d8f; font-size: 0.45rem; }
.modernization-data-flow > .modernization-map { border-color: #aacbc1; background: #eef7f4; }
.modernization-data-flow > i { color: #e27745; font-style: normal; }
.modernization-data-flow > p { grid-column: 1 / -1; margin: 8px 0 0; color: #768588; font-size: 0.47rem; text-align: center; }

.modernization-preserve-layout { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(45px, 8vw, 100px); align-items: center; }
.modernization-preserve-copy > p:not(.eyebrow) { color: #667477; line-height: 1.7; }
.modernization-decision-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.modernization-decision-board article { min-height: 290px; padding: 24px 20px; border: 1px solid #d6ddda; background: #f7f9f8; }
.modernization-decision-board span { color: #be501f; font-size: 0.48rem; font-weight: 900; letter-spacing: 0.09em; }
.modernization-decision-board h3 { margin: 44px 0 18px; font-family: Georgia, serif; font-size: 1.35rem; font-weight: 400; line-height: 1.05; }
.modernization-decision-board ul { margin: 0; padding-left: 17px; color: #687578; font-size: 0.58rem; line-height: 1.8; }

.modernization-method { display: grid; grid-template-columns: repeat(5, 1fr); margin: 55px 0 0; padding: 0; gap: 1px; background: #d3dad8; list-style: none; }
.modernization-method li { min-height: 270px; padding: 27px 22px; background: #fff; }
.modernization-method span { color: #d45a22; font-family: Georgia, serif; font-size: 1.1rem; }
.modernization-method h3 { margin: 55px 0 13px; font-family: Georgia, serif; font-size: 1.35rem; font-weight: 400; }
.modernization-method p { color: #6c797b; font-size: 0.59rem; line-height: 1.6; }

@media (max-width: 1100px) {
  .modernization-hero-layout,
  .modernization-case-layout,
  .modernization-data-layout,
  .modernization-preserve-layout { grid-template-columns: 1fr; }
  .modernization-hero-bridge { max-width: 760px; transform: none; }
  .modernization-method { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .modernization-hero-bridge,
  .modernization-before-after,
  .modernization-path-grid,
  .modernization-data-flow,
  .modernization-decision-board,
  .modernization-method { grid-template-columns: 1fr; }
  .modernization-preserve { grid-template-columns: 1fr auto 1fr; }
  .modernization-preserve span { writing-mode: initial; }
  .modernization-hero-bridge > p,
  .modernization-before-after > p,
  .modernization-data-flow > p { grid-column: 1; }
  .modernization-transfer { min-height: 90px; }
  .modernization-transfer i { transform: rotate(90deg); }
  .modernization-data-flow > i { transform: rotate(90deg); text-align: center; }
  .modernization-path-grid article,
  .modernization-method li { min-height: auto; }
  .modernization-check-list li { grid-template-columns: 1fr; gap: 5px; }
}