/* ==========================================================================
   nCryptone — feuille de style principale
   --------------------------------------------------------------------------
   Direction : « dossier technique ». Grille réglée à la ligne fine, sections
   indexées, titrage large (axe de chasse d'Archivo), papier chaud plutôt que
   gris bleuté, rouge de marque utilisé comme tampon (le trait du logo).
   Pas d'ombres portées sur fond clair, pas d'arrondis : le contraste et les
   filets font la hiérarchie.

   Couleurs issues du logo : bleu nuit (#1d2a48) + rouge (#d3232a)
   ========================================================================== */

:root {
  /* --- Marque ---------------------------------------------------------- */
  --navy-950: #070d1a;
  --navy-900: #0b1426;
  --navy-800: #121e37;
  --navy-700: #1d2a48; /* bleu du logo */
  --navy-600: #2c3d63;
  --blue-400: #3e7bc4; /* bleu clair du kakémono, usage rare */
  --red-500: #d3232a;  /* rouge du logo */
  --red-600: #b41c22;
  --red-700: #8f1319;

  /* --- Neutres : papier chaud, acier froid ----------------------------- */
  --paper: #f2f0ec;
  --paper-2: #e8e5df;
  --surface: #ffffff;
  --ink: #101a30;
  --muted: #58627a;
  --rule: #d8d5cf;       /* filet sur papier */
  --rule-strong: #b9b5ad;
  --on-dark: #e9ecf3;
  --on-dark-muted: #9aa5bd;
  --rule-dark: rgb(255 255 255 / 13%);
  --rule-dark-2: rgb(255 255 255 / 7%);
  --ok-500: #1f8a5f;
  --warn-500: #c77a05;

  /* --- Typographie ----------------------------------------------------- */
  --font-display: "Archivo", "Archivo Expanded", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* --- Mise en page ---------------------------------------------------- */
  --container: 1280px;
  --gutter: 32px;
  --header-h: 72px;
  --r: 2px;              /* arrondi maximal du site */

  /* --- Motifs ---------------------------------------------------------- */
  /* Trait du logo, réutilisé en soulignement de marque */
  --swoosh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M0 9C50 1 150 1 200 9 150 4.2 50 4.2 0 9Z' fill='%23d3232a'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgb(211 35 42 / 14%);
}

a, button, input, select, textarea, label { touch-action: manipulation; }
img, svg { max-width: 100%; display: block; }
a { color: var(--red-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red-500); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0 0 .5em;
  color: var(--navy-700);
  line-height: 1.06;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 5.4vw, 4.1rem); font-weight: 800; font-stretch: 118%; letter-spacing: -.032em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); font-weight: 700; font-stretch: 112%; letter-spacing: -.026em; }
h3 { font-size: 1.15rem; font-weight: 650; font-stretch: 105%; line-height: 1.25; letter-spacing: -.012em; }
h4 { font-size: 1rem; font-weight: 650; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul { padding-left: 1.15em; }
strong, b { font-weight: 600; }

::selection { background: var(--red-500); color: #fff; }
:focus-visible { outline: 2px solid var(--red-500); outline-offset: 3px; }
.section--dark :focus-visible, .hero :focus-visible, .site-footer :focus-visible { outline-color: #fff; }

.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 860px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.skip-link {
  position: absolute; left: 16px; top: -64px; z-index: 200;
  background: var(--navy-700); color: #fff; padding: 12px 18px;
  font: 500 .85rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { top: 12px; color: #fff; }

/* Contenu à remplacer avant mise en ligne */
.ph { background: rgb(199 122 5 / 14%); color: #7a4c00; padding: .05em .35em; font-style: normal; box-decoration-break: clone; }
.section--dark .ph, .panel .ph { background: rgb(255 199 88 / 16%); color: #ffca62; }

/* ==========================================================================
   Motifs de fond
   ========================================================================== */
/* Colonnes de filets — plan technique */
.tex-cols { position: relative; overflow: hidden; }
.tex-cols::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(90deg, var(--rule-dark-2) 1px, transparent 1px);
  background-size: 12.5% 100%;
}
/* Hachures diagonales fines */
.tex-hatch { position: relative; overflow: hidden; }
.tex-hatch::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / 3.5%) 0 1px, transparent 1px 8px);
}
/* Grain */
.tex-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: .035; mix-blend-mode: overlay;
}
.tex-cols > *, .tex-hatch > *, .tex-grain > * { position: relative; z-index: 1; }

/* ==========================================================================
   Typographie utilitaire
   ========================================================================== */
.display { font-family: var(--font-display); }
/* Soulignement « trait du logo » sur un fragment de titre */
.display em, h1 em, h2 em {
  font-style: normal;
  background-image: var(--swoosh);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .2em;
  padding-bottom: .1em;
  box-decoration-break: clone;
  /* stylelint-disable-next-line property-no-vendor-prefix -- WebKit */
  -webkit-box-decoration-break: clone;
}

.lead { font-size: clamp(1.02rem, 1.35vw, 1.16rem); line-height: 1.6; color: var(--muted); max-width: 58ch; }
.section--dark .lead, .hero .lead, .panel .lead { color: var(--on-dark-muted); }

/* Étiquette indexée : —— 01 / NOS SERVICES */
.idx {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  font: 500 .74rem/1 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 22px;
}
.idx::before { content: ""; width: 28px; height: 2px; background: var(--red-500); flex: none; }
.idx b { font-weight: 500; color: var(--navy-700); }
.section--dark .idx, .hero .idx, .panel .idx, .cta .idx { color: var(--on-dark-muted); }
.section--dark .idx b, .hero .idx b, .panel .idx b, .cta .idx b { color: #fff; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Boutons & liens
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font: 600 .95rem/1 var(--font-body); letter-spacing: -.005em;
  padding: 1.05em 1.7em; border: 1px solid transparent; border-radius: 0;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }

.btn--red { background: var(--red-500); color: #fff; }
.btn--red:hover { background: var(--red-700); color: #fff; }
.btn--navy { background: var(--navy-700); color: #fff; }
.btn--navy:hover { background: var(--navy-900); color: #fff; }
.btn--outline { border-color: var(--navy-700); color: var(--navy-700); background: transparent; }
.btn--outline:hover { background: var(--navy-700); color: #fff; }
.btn--ghost { border-color: rgb(255 255 255 / 30%); color: #fff; background: transparent; }
.btn--ghost:hover { border-color: #fff; background: #fff; color: var(--navy-900); }
.btn--sm { padding: .78em 1.25em; font-size: .88rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Lien fléché */
.arrow {
  display: inline-flex; align-items: center; gap: .55em;
  font: 600 .9rem/1 var(--font-body); text-decoration: none; color: var(--red-600);
}
.arrow svg { width: 15px; height: 15px; transition: transform .22s ease; }
.arrow:hover svg { transform: translateX(4px); }
.section--dark .arrow, .panel .arrow { color: #fff; }

/* ==========================================================================
   Logo
   --------------------------------------------------------------------------
   Reproduction HTML/CSS du logo. Pour le logo officiel, remplacer le contenu
   du lien .logo par <img src="assets/img/logo.svg" alt="nCryptone">.
   ========================================================================== */
.logo { display: inline-flex; flex-direction: column; gap: 4px; text-decoration: none; line-height: 1; }
.logo-mark {
  font-family: var(--font-display); font-weight: 750; font-stretch: 100%;
  font-size: 1.62rem; letter-spacing: -.045em; color: var(--navy-700);
  display: inline-block; white-space: nowrap;
}
.logo-n {
  color: var(--red-500);
  background-image: var(--swoosh);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 205% .19em;
  padding-bottom: .1em;
  padding-right: .02em;
}
.logo-tag {
  font: 500 .5rem/1 var(--font-mono);
  letter-spacing: .17em; text-transform: uppercase; color: var(--navy-600);
  white-space: nowrap;
}
.logo--light .logo-mark { color: #fff; }
.logo--light .logo-tag { color: var(--on-dark-muted); }
.logo img { height: 46px; width: auto; }

/* ==========================================================================
   En-tête
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgb(242 240 236 / 88%);
  backdrop-filter: saturate(140%) blur(12px);
  /* stylelint-disable-next-line property-no-vendor-prefix -- Safari < 18 */
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background-color .25s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--rule); background: rgb(242 240 236 / 96%); }
.nav-wrap { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav ul a {
  display: block; position: relative; padding: .55em .85em;
  font-size: .93rem; font-weight: 500; color: var(--ink); text-decoration: none;
  transition: color .18s ease;
}
.nav ul a:hover { color: var(--red-600); }
.nav ul a::after {
  content: ""; position: absolute; left: .85em; right: .85em; bottom: 0; height: 2px;
  background: var(--red-500); transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.nav ul a:hover::after { transform: scaleX(1); }
.nav ul a[aria-current="page"] { color: var(--navy-700); font-weight: 600; }
.nav ul a[aria-current="page"]::after { transform: scaleX(1); }

.nav-side { display: flex; align-items: center; gap: 18px; }
.nav-tel {
  font: 500 .88rem/1 var(--font-mono); color: var(--navy-700); text-decoration: none;
  letter-spacing: .01em; white-space: nowrap; display: flex; align-items: center; gap: .55em;
}
.nav-tel svg { width: 15px; height: 15px; color: var(--red-500); }
.nav-tel:hover { color: var(--red-600); }

.nav-toggle { display: none; background: none; border: 0; padding: 12px 0 12px 12px; cursor: pointer; margin-left: auto; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--navy-700); margin: 6px 0; transition: transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 1040px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); padding: 8px var(--gutter) 28px;
    border-bottom: 1px solid var(--rule);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav ul { flex-direction: column; align-items: stretch; }
  .nav ul a { padding: 1em 0; border-bottom: 1px solid var(--rule); font-size: 1.05rem; }
  .nav ul a::after { display: none; }
  .nav ul a[aria-current="page"] { color: var(--red-600); }
  .nav-side { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 22px; }
  .nav-side .btn { width: 100%; }
  .nav-tel { justify-content: center; font-size: 1rem; }
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding: clamp(68px, 8.5vw, 124px) 0; }
.section--tight { padding: clamp(44px, 5vw, 68px) 0; }
.section--white { background: var(--surface); }
.section--paper2 { background: var(--paper-2); }
.section--dark { background: var(--navy-900); color: var(--on-dark); position: relative; overflow: hidden; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p { color: var(--on-dark-muted); }
.section--dark a:not(.btn):not(.arrow) { color: #fff; }
.divider { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* Titre de section : index à gauche, titre + chapô à droite */
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 32px 64px; margin-bottom: 56px; align-items: start; }
.sec-head > :last-child > :last-child { margin-bottom: 0; }
.sec-head h2 { margin-bottom: 0; }
.sec-head .lead { margin: 18px 0 0; }
.sec-head--stack { display: block; max-width: 760px; }
.sec-head--stack .idx { margin-bottom: 18px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  background: var(--navy-900); color: var(--on-dark);
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--rule-dark);
}
.hero h1 { color: #fff; }
/* Photo de fond (optionnelle) : insérer en premier enfant de .hero
   <img class="hero__bg" src="assets/img/hero.jpg" alt="" width="1920" height="1080"> */
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  opacity: .16; filter: grayscale(1) contrast(1.1); pointer-events: none;
}
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 64px; align-items: end;
  padding-top: clamp(64px, 8vw, 104px);
  padding-bottom: clamp(56px, 6vw, 88px);
}
.hero__main > :last-child { margin-bottom: 0; }
.hero .lead { margin: 26px 0 0; font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: #c2cadb; max-width: 54ch; }
.hero .actions { margin-top: 38px; }

/* Encadré « fiche » — reprend le bloc NOS EXPERTISES du kakémono */
.spec { border: 1px solid var(--rule-dark); background: rgb(255 255 255 / 2.5%); }
.spec__title {
  margin: 0; padding: 16px 22px;
  font: 500 .72rem/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
  color: #fff; border-bottom: 1px solid var(--rule-dark); background: rgb(255 255 255 / 3%);
}
.spec__list { list-style: none; margin: 0; padding: 0; counter-reset: spec; }
.spec__list li + li { border-top: 1px solid var(--rule-dark-2); }
.spec__list a {
  display: flex; align-items: baseline; gap: 16px; padding: 15px 22px;
  color: var(--on-dark) !important; text-decoration: none; font-size: .96rem; font-weight: 500;
  transition: background-color .2s ease, padding-left .2s ease;
}
.spec__list a::before {
  counter-increment: spec; content: "0" counter(spec);
  font: 500 .74rem/1 var(--font-mono); color: var(--red-500); flex: none;
}
.spec__list a::after {
  content: ""; margin-left: auto; width: 14px; height: 9px; flex: none; align-self: center;
  background: currentcolor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M0 4.2h11.6L8.4.9 9.3 0 14 4.5 9.3 9l-.9-.9 3.2-3.2H0z'/%3E%3C/svg%3E") center/contain no-repeat;
  /* stylelint-disable-next-line property-no-vendor-prefix -- WebKit */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M0 4.2h11.6L8.4.9 9.3 0 14 4.5 9.3 9l-.9-.9 3.2-3.2H0z'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0; transition: opacity .2s ease, transform .2s ease; transform: translateX(-4px);
}
.spec__list a:hover { background: rgb(255 255 255 / 5%); padding-left: 26px; }
.spec__list a:hover::after { opacity: 1; transform: none; }

/* Bandeau d'exploitation en pied de hero */
.ticker {
  border-top: 1px solid var(--rule-dark);
  background: rgb(0 0 0 / 22%);
}
.ticker ul {
  display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0;
  font: 500 .76rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-dark-muted);
}
.ticker li { display: flex; align-items: center; gap: 10px; padding: 15px 0; }
.ticker li + li { margin-left: 34px; }
.ticker li::before { content: ""; width: 6px; height: 6px; background: var(--red-500); flex: none; }
.ticker li:first-child::before { background: var(--ok-500); box-shadow: 0 0 0 3px rgb(31 138 95 / 22%); animation: pulse 2.8s ease-in-out infinite; }
.ticker a { color: #fff !important; text-decoration: none; }
.ticker a:hover { text-decoration: underline; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px rgb(31 138 95 / 22%); } 50% { box-shadow: 0 0 0 5px rgb(31 138 95 / 6%); } }

/* Hero de page intérieure */
.page-hero .hero__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; padding-top: clamp(48px, 6vw, 78px); padding-bottom: clamp(48px, 5.5vw, 76px); }
.hero__grid--solo { grid-template-columns: minmax(0, 900px) !important; }
.page-hero h1 { font-size: clamp(2.05rem, 4.2vw, 3.3rem); }
.breadcrumb {
  font: 500 .74rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-dark-muted); margin-bottom: 26px;
}
.breadcrumb a { color: var(--on-dark-muted) !important; text-decoration: none; }
.breadcrumb a:hover { color: #fff !important; }
.breadcrumb span { color: rgb(255 255 255 / 30%); margin: 0 .6em; }

/* ==========================================================================
   Bandeau de réassurance
   ========================================================================== */
.trust { background: var(--surface); border-bottom: 1px solid var(--rule); }
.trust ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.trust li { padding: 30px 32px 30px 0; display: flex; gap: 16px; align-items: flex-start; }
.trust li + li { border-left: 1px solid var(--rule); padding-left: 32px; }
.trust svg { width: 21px; height: 21px; color: var(--red-500); flex: none; margin-top: 3px; }
.trust b { display: block; font-family: var(--font-display); font-weight: 650; font-stretch: 105%; font-size: .96rem; color: var(--navy-700); line-height: 1.3; text-wrap: balance; }
.trust span { display: block; font-size: .85rem; color: var(--muted); line-height: 1.45; margin-top: 4px; }

/* ==========================================================================
   Matrice de capacités — grille réglée sans gouttière
   ========================================================================== */
.matrix {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.matrix--2 { grid-template-columns: repeat(2, 1fr); }
.matrix__cell {
  background: var(--surface); padding: 34px 32px 32px; position: relative;
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  transition: background-color .2s ease;
}
.matrix__cell::before {
  content: ""; position: absolute; inset: -1px auto auto -1px; width: calc(100% + 2px); height: 3px;
  background: var(--red-500); transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
a.matrix__cell:hover { background: #fdfcfa; color: inherit; }
a.matrix__cell:hover::before { transform: scaleX(1); }
.matrix__num { font: 500 .74rem/1 var(--font-mono); color: var(--rule-strong); letter-spacing: .08em; }
.matrix__cell svg.ico { width: 24px; height: 24px; color: var(--red-500); margin: 24px 0 20px; }
.matrix__cell h3 { margin: 0 0 8px; }
.matrix__cell p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.55; }
.matrix__cell .tags { margin-top: auto; padding-top: 22px; }
.matrix__go {
  margin-top: auto; padding-top: 26px;
  font: 500 .74rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--navy-600);
  display: flex; align-items: center; gap: 8px;
  opacity: 0; transform: translateY(4px); transition: opacity .22s ease, transform .22s ease;
}
.matrix__go svg { width: 14px; height: 14px; }
a.matrix__cell:hover .matrix__go { opacity: 1; transform: none; }
/* Variante fond sombre */
.section--dark .matrix { background: var(--rule-dark); border-color: var(--rule-dark); }
.section--dark .matrix__cell { background: var(--navy-900); }
.section--dark .matrix__cell p { color: var(--on-dark-muted); }
.section--dark .matrix__num { color: rgb(255 255 255 / 25%); }

/* ==========================================================================
   Blocs texte + panneau
   ========================================================================== */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.split--top { align-items: start; }
.split--wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.split > div > :last-child { margin-bottom: 0; }

.panel {
  background: var(--navy-900); color: var(--on-dark);
  padding: clamp(30px, 3.4vw, 46px); position: relative; overflow: hidden;
  border-top: 3px solid var(--red-500);
}
.panel h2, .panel h3, .panel h4 { color: #fff; }
.panel p { color: var(--on-dark-muted); }
.panel > * { position: relative; z-index: 1; }
.panel--paper { background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-top: 3px solid var(--red-500); }
.panel--paper h2, .panel--paper h3 { color: var(--navy-700); }
.panel--paper p { color: var(--muted); }

/* Citation / accroche éditoriale */
.statement {
  font-family: var(--font-display); font-weight: 700; font-stretch: 110%;
  font-size: clamp(1.5rem, 2.9vw, 2.35rem); line-height: 1.15; letter-spacing: -.024em;
  color: var(--navy-700); margin: 0 0 28px; text-wrap: balance;
}
.section--dark .statement, .panel .statement { color: #fff; }

/* ==========================================================================
   Listes cochées & étiquettes
   ========================================================================== */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.checks li {
  position: relative; padding: 13px 0 13px 32px; border-bottom: 1px solid var(--rule);
  font-size: .96rem;
}
.checks li::before {
  content: ""; position: absolute; left: 0; top: 1.15em; width: 13px; height: 9px;
  background: var(--red-500);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 9'%3E%3Cpath d='M0 4.6 1.3 3.3 4.7 6.7 11.7 0 13 1.3 4.7 9.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  /* stylelint-disable-next-line property-no-vendor-prefix -- WebKit */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 9'%3E%3Cpath d='M0 4.6 1.3 3.3 4.7 6.7 11.7 0 13 1.3 4.7 9.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.section--dark .checks, .panel .checks { border-color: var(--rule-dark); }
.section--dark .checks li, .panel .checks li { border-color: var(--rule-dark); color: var(--on-dark); }
.checks li b { color: var(--navy-700); font-weight: 600; }
.section--dark .checks li b, .panel .checks li b { color: #fff; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.tags li {
  font: 500 .72rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  padding: 7px 10px; border: 1px solid var(--rule); color: var(--muted); background: var(--paper);
}
.section--dark .tags li, .panel .tags li { border-color: var(--rule-dark); background: transparent; color: var(--on-dark-muted); }

/* Fonctionnalité en ligne */
.feature { display: flex; gap: 16px; align-items: flex-start; padding: 22px 0; border-top: 1px solid var(--rule); }
.feature svg { width: 21px; height: 21px; color: var(--red-500); flex: none; margin-top: 3px; }
.feature h3 { margin: 0 0 4px; font-size: 1.02rem; }
.feature p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.5; }
.section--dark .feature, .panel .feature { border-color: var(--rule-dark); }
.section--dark .feature p, .panel .feature p { color: var(--on-dark-muted); }

/* ==========================================================================
   Rail d'étapes
   ========================================================================== */
.rail {
  list-style: none; margin: 0; padding: 0; counter-reset: rail;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
}
.rail li { position: relative; padding: 34px 32px 0 0; }
.rail li::before {
  counter-increment: rail; content: "0" counter(rail);
  display: block; font: 500 .78rem/1 var(--font-mono); letter-spacing: .1em; color: var(--red-500); margin-bottom: 20px;
}
.rail li::after { content: ""; position: absolute; top: -1px; left: 0; width: 34px; height: 3px; background: var(--red-500); }
.rail h3 { margin: 0 0 8px; }
.rail p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.5; }
.section--dark .rail { border-color: var(--rule-dark); }
.section--dark .rail p { color: var(--on-dark-muted); }

/* ==========================================================================
   Chiffres
   ========================================================================== */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule-dark); border-block: 1px solid var(--rule-dark); }
.figures > div { background: var(--navy-900); padding: 34px 28px; }
.figures b {
  display: block; font-family: var(--font-display); font-weight: 750; font-stretch: 112%;
  font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1; letter-spacing: -.035em;
  color: #fff; font-variant-numeric: tabular-nums;
}
.figures span { display: block; margin-top: 12px; font: 500 .74rem/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted); }

/* ==========================================================================
   Tableau SLA
   ========================================================================== */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--surface); }
.sla-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.sla-table caption { text-align: left; font: .82rem/1.5 var(--font-mono); color: var(--muted); caption-side: bottom; padding: 14px 24px; border-top: 1px solid var(--rule); }
.sla-table th, .sla-table td { padding: 18px 24px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; }
.sla-table thead th { background: var(--navy-700); color: #fff; font: 500 .74rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.sla-table tbody th { font-family: var(--font-display); font-weight: 650; color: var(--navy-700); }
.sla-table td strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.05rem; color: var(--navy-700); }
.sla-table tbody tr:last-child th, .sla-table tbody tr:last-child td { border-bottom: 0; }
.prio { display: inline-flex; align-items: center; gap: 9px; }
.prio::before { content: ""; width: 8px; height: 8px; flex: none; }
.prio--p1::before { background: var(--red-500); }
.prio--p2::before { background: var(--warn-500); }
.prio--p3::before { background: var(--ok-500); }
.sla-table th small { display: block; font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: .85rem; margin-top: 4px; }

/* ==========================================================================
   Bandeau d'appel à l'action
   ========================================================================== */
.cta {
  background: var(--navy-900); color: var(--on-dark); position: relative; overflow: hidden;
  border-top: 3px solid var(--red-500);
}
.cta__grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: center;
  padding-block: clamp(48px, 6vw, 84px);
}
.cta h2 { color: #fff; margin-bottom: 14px; }
.cta p { color: var(--on-dark-muted); margin: 0; max-width: 52ch; }
.cta .actions { justify-content: flex-end; }

/* ==========================================================================
   Formulaire
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .8fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); align-items: stretch; }
.contact-grid > * { background: var(--surface); padding: clamp(28px, 3.2vw, 44px); }
.contact-grid > .panel { background: var(--navy-900); border-top: 0; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0; }
.form .full { grid-column: 1 / -1; }
.field label, .consent-field > label:first-child { display: block; font: 500 .74rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 9px; color: var(--navy-700); }
.field .req { color: var(--red-500); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: .97rem; color: var(--ink);
  padding: 13px 14px; border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--surface);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { min-height: 148px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy-700); box-shadow: inset 0 0 0 1px var(--navy-700);
}
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--red-500); }
.field-error { display: none; color: var(--red-600); font-size: .84rem; margin: 7px 0 0; }
.field.has-error .field-error, .consent-field.has-error .field-error { display: block; }
.consent { display: flex; gap: 11px; align-items: flex-start; font-size: .88rem; color: var(--muted); }
.consent input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--red-500); flex: none; }
.form-status { grid-column: 1 / -1; padding: 14px 16px; font-size: .92rem; display: none; border-left: 3px solid; margin: 0; }
.form-status.is-success { display: block; background: rgb(31 138 95 / 9%); border-color: var(--ok-500); color: #0f5c3e; }
.form-status.is-error { display: block; background: rgb(211 35 42 / 8%); border-color: var(--red-500); color: var(--red-700); }
.hp { position: absolute; left: -9999px; }

.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { padding: 20px 0; border-bottom: 1px solid var(--rule-dark); }
.contact-list li:first-child { padding-top: 0; }
.contact-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-list b { display: block; font: 500 .72rem/1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 9px; font-weight: 500; }
.contact-list span, .contact-list a { color: #fff; font-size: .98rem; font-style: normal; }
.contact-list a { text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

/* ==========================================================================
   Pages légales
   ========================================================================== */
.prose { max-width: 720px; }
.prose h2 { font-size: 1.4rem; margin: 2.2em 0 .6em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: #3a4358; }
.prose li { margin-bottom: .4em; }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.site-footer { background: var(--navy-950); color: var(--on-dark-muted); font-size: .93rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 48px; padding-block: 76px 60px; }
.site-footer h2 { font: 500 .72rem/1 var(--font-mono); letter-spacing: .15em; text-transform: uppercase; color: #fff; margin-bottom: 22px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.site-footer a { color: var(--on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-about p { margin: 22px 0 0; max-width: 34ch; line-height: 1.6; }
.footer-bottom {
  border-top: 1px solid var(--rule-dark-2); padding-block: 22px; display: flex; justify-content: space-between;
  gap: 16px 28px; flex-wrap: wrap; font: 500 .74rem/1.6 var(--font-mono); letter-spacing: .06em;
}
.footer-bottom ul { display: flex; gap: 24px; flex-wrap: wrap; }

/* ==========================================================================
   Apparitions au défilement
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .07s; }
.reveal[data-delay="2"] { transition-delay: .14s; }
.reveal[data-delay="3"] { transition-delay: .21s; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Adaptatif
   ========================================================================== */
@media (max-width: 1100px) {
  .hero__grid, .page-hero .hero__grid { grid-template-columns: 1fr; gap: 48px; align-items: start; }
  .split, .split--wide-left { gap: 48px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .sec-head { grid-template-columns: 1fr; gap: 20px; }
  .sec-head .lead { max-width: 62ch; }
}

@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .matrix { grid-template-columns: repeat(2, 1fr); }
  .split, .split--wide-left, .contact-grid, .cta__grid { grid-template-columns: 1fr; }
  .contact-grid { gap: 1px; }
  .cta .actions { justify-content: flex-start; }
  .trust ul { grid-template-columns: repeat(2, 1fr); }
  .trust li { padding-right: 24px; }
  .trust li:nth-child(3) { border-left: 0; padding-left: 0; }
  .trust li:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .rail { grid-template-columns: repeat(2, 1fr); }
  .rail li { padding-bottom: 30px; }
  .rail li:nth-child(n+3)::after { display: none; }
  .figures { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .matrix, .matrix--2, .trust ul, .form, .footer-grid, .figures { grid-template-columns: 1fr; }
  .trust li { border-left: 0 !important; padding-left: 0 !important; }
  .trust li + li { border-top: 1px solid var(--rule); }
  .rail { grid-template-columns: 1fr; }
  .rail li { padding-right: 0; }
  .rail li::after { display: block !important; }
  .rail li + li { border-top: 1px solid var(--rule); }
  .section--dark .rail li + li { border-color: var(--rule-dark); }
  .actions .btn { width: 100%; }
  .ticker li + li { margin-left: 0; }
  .ticker li { width: 100%; padding: 11px 0; }
  .ticker li + li { border-top: 1px solid var(--rule-dark-2); }
  .footer-bottom { flex-direction: column; }
}