/* Polices hébergées sur le site (aucune requête vers Google Fonts) */
@font-face{ font-family:'Archivo'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/archivo-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'Archivo'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/archivo-latin-800-normal.woff2') format('woff2'); }
@font-face{ font-family:'Archivo'; font-style:normal; font-weight:900; font-display:swap; src:url('../fonts/archivo-latin-900-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); }

/* ============================================================
   0. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
/* overflow-x:clip (et non hidden) : coupe le panneau mobile rangé hors écran
   sans créer de conteneur de défilement, ce qui casserait l'en-tête collant. */
html { scroll-behavior: smooth; scroll-padding-top: 108px; overflow-x: clip; }
body {
  font-family: var(--ff-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }
strong, b { font-weight: 600; }
h1, h2, h3, h4 { font-family: var(--ff-display); line-height: 1.08; font-weight: 800; letter-spacing: -0.01em; }

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

:focus-visible { outline: 2.5px solid var(--red); outline-offset: 3px; }

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{
  --ink:#0E0E10;
  --ink-soft:#4A4A50;
  --paper:#FFFFFF;
  --mist:#F5F4F0;
  --mist-deep:#EAE8E2;
  --line:#DFDDD6;
  --line-strong:#C9C7BF;
  --red:#E1251B;
  --red-dark:#B81D15;
  --red-tint:#FCEAE8;
  --steel:#6B6D76;

  --ff-display:'Archivo', 'Arial Narrow', Arial, sans-serif;
  --ff-body:'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ff-mono:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  --fs-h1: clamp(2.35rem, 1.55rem + 3.3vw, 4.5rem);
  --fs-h2: clamp(1.9rem, 1.55rem + 1.5vw, 2.7rem);
  --fs-h3: clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);

  --container: 1180px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 2px;
  --ease: cubic-bezier(.16,.8,.24,1);
}

/* ============================================================
   2. LAYOUT HELPERS
   ============================================================ */
.container{ max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.section{ padding-block: clamp(64px, 9vw, 128px); position: relative; }
.section--mist{ background: var(--mist); }
.section-head{ max-width: 640px; margin-bottom: clamp(36px,5vw,64px); }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red); font-weight: 600; margin-bottom: 16px;
}
.eyebrow::before{ content:""; width:7px; height:7px; background:var(--red); display:inline-block; }
h2.section-title{ font-size: var(--fs-h2); }
.lead{ font-size: var(--fs-lead); color: var(--ink-soft); margin-top: 16px; max-width: 52ch; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link{ position:absolute; left:12px; top:-60px; background:var(--ink); color:#fff; padding:10px 16px; z-index:999; font-family:var(--ff-mono); font-size:.8rem; transition: top .2s var(--ease); }
.skip-link:focus{ top:12px; }

/* square red bullet used across feature lists */
.feature-list li{ position:relative; padding-left:1.35em; margin-bottom:.65em; color: var(--ink-soft); font-size:.97rem; }
.feature-list li::before{ content:""; position:absolute; left:0; top:.52em; width:.44em; height:.44em; background:var(--red); }
.feature-list--tight li{ margin-bottom:.5em; }

/* spec chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.chip{
  font-family: var(--ff-mono); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;
  border:1px solid var(--line-strong); padding:5px 10px; color: var(--ink-soft);
}

/* bracket / technical-frame device — pure CSS corner marks */
.bracket{ position:relative; }
.bracket::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(var(--ink),var(--ink)) top left / 14px 2px no-repeat,
    linear-gradient(var(--ink),var(--ink)) top left / 2px 14px no-repeat,
    linear-gradient(var(--ink),var(--ink)) top right / 14px 2px no-repeat,
    linear-gradient(var(--ink),var(--ink)) top right / 2px 14px no-repeat,
    linear-gradient(var(--ink),var(--ink)) bottom left / 14px 2px no-repeat,
    linear-gradient(var(--ink),var(--ink)) bottom left / 2px 14px no-repeat,
    linear-gradient(var(--ink),var(--ink)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--ink),var(--ink)) bottom right / 2px 14px no-repeat;
  opacity:.35; transition: opacity .25s var(--ease);
}
.bracket:hover::before, .bracket.is-active::before{ opacity:1; }
.bracket.bracket--red::before{
  background:
    linear-gradient(var(--red),var(--red)) top left / 14px 2px no-repeat,
    linear-gradient(var(--red),var(--red)) top left / 2px 14px no-repeat,
    linear-gradient(var(--red),var(--red)) top right / 14px 2px no-repeat,
    linear-gradient(var(--red),var(--red)) top right / 2px 14px no-repeat,
    linear-gradient(var(--red),var(--red)) bottom left / 14px 2px no-repeat,
    linear-gradient(var(--red),var(--red)) bottom left / 2px 14px no-repeat,
    linear-gradient(var(--red),var(--red)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--red),var(--red)) bottom right / 2px 14px no-repeat;
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--ff-display); font-weight:700; font-size:.92rem; letter-spacing:.01em;
  padding: 15px 28px; border:1.5px solid transparent; border-radius: var(--radius);
  cursor:pointer; transition: transform .2s var(--ease), background-color .2s, border-color .2s, color .2s;
  white-space: nowrap;
}
.btn svg{ width:15px; height:15px; }
.btn--primary{ background: var(--red); color:#fff; }
.btn--primary:hover{ background: var(--red-dark); transform: translateY(-2px); }
.btn--ghost{ border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover{ background: var(--ink); color:#fff; transform: translateY(-2px); }
.btn--onDark{ border-color: rgba(255,255,255,.45); color:#fff; }
.btn--onDark:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn--block{ width:100%; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none !important; }


/* ============================================================
   3. HEADER / NAV
   ============================================================ */
.topbar{
  background: var(--ink); color: rgba(255,255,255,.75);
  font-family: var(--ff-mono); font-size:.74rem; letter-spacing:.02em;
}
.topbar .container{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px 18px; padding-block:11px; }
.topbar a{ color: rgba(255,255,255,.9); }
.topbar a:hover{ color:#fff; }
.topbar__right{ display:flex; align-items:center; gap:26px; }
/* Le numéro n'apparaît plus dans la barre de navigation : il est porté ici. */
.topbar__tel{ display:inline-flex; align-items:center; gap:7px; color:#fff !important; font-size:.8rem; letter-spacing:.03em; white-space:nowrap; }
.topbar__tel svg{ width:13px; height:13px; color:var(--red); flex-shrink:0; }
.topbar__loc{ display:none; }

header.site-header{
  position: sticky; top:0; z-index: 200;
  background: rgba(255,255,255,.88); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s var(--ease);
}
header.site-header.is-scrolled{ box-shadow: 0 8px 24px -18px rgba(14,14,16,.35); }
.nav{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap;
  gap: clamp(22px, 3.4vw, 46px);
  height:94px; transition: height .2s var(--ease);
}
header.site-header.is-scrolled .nav{ height:76px; }

.logo{
  display:flex; align-items:center; gap:10px; font-family: var(--ff-display); font-weight:900;
  font-size:1.15rem; letter-spacing:-.01em; white-space:nowrap; flex:0 0 auto;
}
.logo__mark{ width:11px; height:11px; background: var(--red); flex-shrink:0; }
.logo__sub{ font-family: var(--ff-mono); font-weight:400; font-size:.6rem; letter-spacing:.16em; color:var(--steel); display:block; margin-top:3px; }

.nav__links{ display:flex; align-items:center; flex-wrap:nowrap; gap: clamp(22px, 2.6vw, 38px); }
.nav__links a{
  font-family: var(--ff-display); font-weight:700; font-size:.9rem; position:relative;
  padding-block:10px; white-space:nowrap;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--red);
  transition: width .22s var(--ease);
}
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after{ width:100%; }
.nav__right{ display:flex; align-items:center; flex-wrap:nowrap; gap: clamp(18px, 2vw, 28px); flex:0 0 auto; }
.nav__right .btn{ flex:0 0 auto; padding-block:14px; }
.nav__burger{ display:none; padding:8px; flex-shrink:0; margin: -8px -8px -8px 0; }
.nav__burger svg{ width:24px; height:24px; display:block; }

/* mobile nav panel */
.mobile-nav{
  position: fixed; inset:0; background: var(--ink); color:#fff; z-index:300;
  display:flex; flex-direction:column; padding: 24px var(--pad) 40px;
  transform: translateX(100%); visibility: hidden;
  transition: transform .32s var(--ease), visibility 0s linear .32s;
}
.mobile-nav.is-open{ transform: translateX(0); visibility: visible; transition-delay: 0s; }
.mobile-nav__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:48px; }
.mobile-nav__top .logo{ color:#fff; }
.mobile-nav a{ font-family:var(--ff-display); font-weight:800; font-size:1.6rem; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.mobile-nav__foot{ margin-top:auto; padding-top:32px; font-family:var(--ff-mono); font-size:.85rem; color:rgba(255,255,255,.65); display:flex; flex-direction:column; gap:8px; }
.mobile-nav__foot a{ font-family: var(--ff-mono); font-weight:400; font-size:.85rem; padding:0; border:none; color:#fff; }

@media (max-width: 1080px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  .nav{ height:78px; }
  header.site-header.is-scrolled .nav{ height:70px; }
  .topbar__right{ gap:16px; }
}
@media (max-width: 560px){
  .logo__sub{ display:none; }
  .nav__right .btn--primary{ display:none; }
  .topbar__label{ display:none; }
}

/* ============================================================
   4. HERO
   ============================================================ */
.hero{ position:relative; overflow:hidden; padding-block: clamp(56px,8vw,90px) clamp(64px,9vw,104px); }
.hero__mark{
  position:absolute; top:28px; right: var(--pad); font-family:var(--ff-mono); font-size:.68rem; color:var(--steel);
  text-align:right; letter-spacing:.03em; line-height:1.6;
}
.hero .container{ position:relative; }
.hero__layout{ display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px,5vw,72px); align-items:center; }

.hero h1{ font-size: var(--fs-h1); }
.hero h1 .accent{ color: var(--red); }
.hero__lead{ font-size: var(--fs-lead); color: var(--ink-soft); margin-top:22px; max-width:46ch; }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

.stat-strip{ display:grid; grid-template-columns: repeat(4,1fr); border-top:1px solid var(--line); margin-top:48px; }
.stat-strip div{ padding: 16px 18px 0 0; border-left:1px solid var(--line); padding-left:16px; }
.stat-strip div:first-child{ border-left:none; padding-left:0; }
.stat-strip .stat-num{ font-family:var(--ff-display); font-weight:800; font-size:1.35rem; }
.stat-strip .stat-label{ font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--steel); margin-top:4px; display:block; }

/* receipt device */
.receipt-wrap{ display:flex; justify-content:center; }
.receipt-device{ width:100%; max-width:300px; }
.receipt-paper{
  background:#fff; border:1px solid var(--line-strong); box-shadow: 0 24px 48px -24px rgba(14,14,16,.35);
  padding: 26px 22px 0; font-family: var(--ff-mono);
}
.receipt-line{ display:flex; justify-content:space-between; gap:10px; font-size:.76rem; padding:7px 0; letter-spacing:.02em;
  opacity:0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.receipt-paper.is-printing .receipt-line{ opacity:1; transform:none; }
.receipt-head{ font-weight:600; font-size:.85rem; justify-content:center; letter-spacing:.1em; }
.receipt-total{ font-weight:600; }
.receipt-total span:last-child{ color:var(--red); }
.receipt-rule{ border-top:1px dashed var(--line-strong); margin: 2px 0; }
.receipt-barcode{
  height:30px; margin: 14px -22px 0;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 7px, transparent 7px 11px);
  opacity:0; transition: opacity .5s var(--ease) 1.05s;
}
.receipt-paper.is-printing .receipt-barcode{ opacity:.85; }
.receipt-paper::after{
  content:""; display:block; height:12px; margin: 0 -1px 0;
  background: radial-gradient(circle at 7px 0, transparent 7px, var(--paper) 7.5px) 0 -4px / 14px 12px repeat-x;
}
.receipt-caption{ text-align:center; font-family:var(--ff-mono); font-size:.66rem; color:var(--steel); letter-spacing:.05em; margin-top:14px; }

@media (max-width: 900px){
  .hero__layout{ grid-template-columns: 1fr; }
  .hero__mark{ display:none; }
  .stat-strip{ grid-template-columns: repeat(2,1fr); row-gap:20px; }
  .stat-strip div:nth-child(3){ border-left:none; padding-left:0; }
}

/* ============================================================
   5. MARQUEE
   ============================================================ */
/* Bandeau défilant : deux pistes identiques côte à côte, chacune au moins aussi
   large que l'écran. Chaque piste se décale de 100 % de sa propre largeur, donc
   la seconde prend exactement la place de la première : aucun blanc, quelle que
   soit la largeur de la fenêtre ou le niveau de zoom. */
.marquee-band{ background: var(--ink); color:#fff; overflow:hidden; padding-block:16px; display:flex; }
.marquee-track{
  display:flex; flex:0 0 auto; min-width:100%; justify-content:space-around;
  white-space:nowrap; animation: scroll-left 64s linear infinite;
}
.marquee-track span{ font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-right:44px; }
.marquee-track span::after{ content:"—"; color: var(--red); margin-left:44px; }
@keyframes scroll-left{ from{ transform:translateX(0);} to{ transform:translateX(-100%);} }

/* ============================================================
   6. SOLUTIONS
   ============================================================ */
.sol-switch{ display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:0; }
.sol-btn{
  background:#fff; text-align:left; padding: 24px 20px; display:flex; flex-direction:column; gap:14px;
  transition: background .2s var(--ease);
}
.sol-btn:hover{ background: var(--mist); }
.sol-btn.is-active{ background: var(--ink); color:#fff; }
.sol-btn.is-active .sol-btn__icon{ color:#fff; }
.sol-btn.is-active .sol-btn__ref{ color: #ff8f88; }
.sol-btn.is-active .sol-btn__desc{ color: rgba(255,255,255,.7); }
.sol-btn__icon{ width:30px; height:30px; color:var(--red); }
.sol-btn__ref{ font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.1em; color:var(--steel); }
.sol-btn__name{ font-family:var(--ff-display); font-weight:800; font-size:1.05rem; }
.sol-btn__desc{ font-size:.85rem; color:var(--ink-soft); line-height:1.45; }

.sol-panels{ border:1px solid var(--line); border-top:none; padding: clamp(28px,4vw,52px); background:#fff; }
.sol-panel{ display:none; }
.sol-panel.is-active{ display:block; }
.sol-panel__intro{ max-width:60ch; color:var(--ink-soft); margin-bottom:32px; font-size:1rem; }
.sol-panel__intro strong{ color:var(--ink); }

/* model pills (caisses) */
.pillrow{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.pill{
  font-family:var(--ff-display); font-weight:700; font-size:.85rem; padding:9px 18px;
  border:1.5px solid var(--line-strong); color:var(--ink-soft); transition: all .2s var(--ease);
}
.pill:hover{ border-color:var(--ink); color:var(--ink); }
.pill.is-active{ background:var(--red); border-color:var(--red); color:#fff; }

.model-panel{ display:none; }
.model-panel.is-active{ display:grid; grid-template-columns: 1fr 1.15fr; gap:40px; align-items:start; }
.model-visual{ aspect-ratio: 4/3.1; background: var(--mist); display:flex; align-items:center; justify-content:center; padding: 16px; }
.model-visual svg{ width:64%; height:64%; color:var(--ink); }
.model-tag{ font-family:var(--ff-mono); font-size:.72rem; color:var(--red); letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; display:block; }
.model-section h2{ font-size: var(--fs-h3); margin-bottom:6px; }
.model-panel__desc{ color: var(--ink-soft); margin: 14px 0 18px; font-size:.96rem; }
.model-panel .btn--ghost{ margin-top:22px; padding:11px 22px; font-size:.82rem; }

@media (max-width: 760px){
  .sol-switch{ grid-template-columns: repeat(2,1fr); }
  .model-panel.is-active{ grid-template-columns: 1fr; }
}

/* software feature groups */
.feat-groups{ display:grid; grid-template-columns: repeat(3,1fr); gap:32px; margin-top:8px; }
.feat-group h3{ font-family:var(--ff-display); font-weight:800; font-size:.95rem; margin-bottom:14px; padding-bottom:10px; border-bottom:2px solid var(--ink); }
@media (max-width:820px){ .feat-groups{ grid-template-columns:1fr; gap:30px; } }

/* fake dashboard graphic */
.dash-mock{ margin-top:40px; border:1px solid var(--line); background:var(--mist); padding:22px; display:grid; grid-template-columns: 1.3fr 1fr; gap:24px; }
.dash-mock__title{ font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--steel); margin-bottom:16px; }
.dash-bars{ display:flex; align-items:flex-end; gap:8px; height:110px; }
.dash-bars i{ flex:1; background:var(--ink); opacity:.85; }
.dash-bars i:nth-child(4n){ background:var(--red); opacity:1; }
.dash-kpis{ display:flex; flex-direction:column; gap:14px; justify-content:center; }
.dash-kpi{ display:flex; justify-content:space-between; font-family:var(--ff-mono); font-size:.78rem; border-bottom:1px dashed var(--line-strong); padding-bottom:10px; }
.dash-kpi b{ font-family:var(--ff-display); }
@media (max-width:640px){ .dash-mock{ grid-template-columns:1fr; } }

/* payment value blocks */
.pay-blocks{ display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8px; }
.pay-block{ background:#fff; padding:26px 22px; }
.pay-block__icon{ width:30px; height:30px; color:var(--red); margin-bottom:16px; }
.pay-block h3{ font-family:var(--ff-display); font-weight:800; font-size:1rem; margin-bottom:12px; }
@media (max-width:820px){ .pay-blocks{ grid-template-columns:1fr; } }

/* mobility cards */
.mobility-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:8px; }
.mobility-card{ border:1px solid var(--line); padding:26px; }
.mobility-card__visual{ background:var(--mist); aspect-ratio: 16/9; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.mobility-card__visual svg{ width:34%; color:var(--ink); }
@media (max-width:760px){ .mobility-grid{ grid-template-columns:1fr; } }

.panel-footline{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:36px; padding-top:24px; border-top:1px solid var(--line); }
.panel-footline p{ color:var(--ink-soft); font-size:.9rem; }

/* ============================================================
   7. ZONES + PROCESS
   ============================================================ */
.zones-layout{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,80px); }
.canton-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-top:8px; }
.canton{ border:1px solid var(--line); padding:18px 14px; text-align:center; }
.canton__code{ font-family:var(--ff-display); font-weight:900; font-size:1.6rem; color:var(--red); }
.canton__name{ font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; color:var(--steel); margin-top:4px; }
.hq-note{ display:flex; align-items:center; gap:9px; margin-top:18px; font-family:var(--ff-mono); font-size:.82rem; color:var(--ink-soft); }
.hq-note svg{ width:16px; height:16px; color:var(--red); flex-shrink:0; }

.process-list{ counter-reset: step; }
.process-item{ display:flex; gap:20px; padding: 22px 0; border-top:1px solid var(--line); }
.process-item:last-child{ border-bottom:1px solid var(--line); }
.process-num{ font-family:var(--ff-mono); font-size:.85rem; color:var(--red); font-weight:600; flex-shrink:0; padding-top:2px; }
.process-item h3{ font-family:var(--ff-display); font-weight:800; font-size:1.02rem; margin-bottom:6px; }
.process-item p{ color:var(--ink-soft); font-size:.92rem; }

@media (max-width: 820px){ .zones-layout{ grid-template-columns:1fr; } .canton-grid{ grid-template-columns: repeat(3,1fr); } }

/* ============================================================
   8. PHILOSOPHIE
   ============================================================ */
.philo-layout{ display:grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px,6vw,80px); }
.philo-sticky{ position:sticky; top:110px; align-self:start; }
.pillars{ display:flex; flex-direction:column; }
.pillar{ display:grid; grid-template-columns: 22px 1fr; gap:18px; padding: 26px 0; border-top:1px solid var(--line); }
.pillar:last-child{ border-bottom:1px solid var(--line); }
.pillar__mark{ width:11px; height:11px; background:var(--red); margin-top:6px; }
.pillar h3{ font-family:var(--ff-display); font-weight:800; font-size:1rem; letter-spacing:.03em; margin-bottom:8px; text-transform:uppercase; }
.pillar p{ color:var(--ink-soft); font-size:.95rem; max-width:56ch; }

.aures-box{ margin-top:36px; background:var(--ink); color:#fff; padding: clamp(26px,3vw,40px); }
.aures-box .eyebrow{ color:#ff8f88; }
.aures-box h3{ font-family:var(--ff-display); font-weight:800; font-size:1.15rem; margin-bottom:14px; }
.aures-box p{ color:rgba(255,255,255,.78); font-size:.96rem; max-width:64ch; }

@media (max-width: 900px){ .philo-layout{ grid-template-columns:1fr; } .philo-sticky{ position:static; } }

/* ============================================================
   9. CTA BANNER
   ============================================================ */
.cta-banner{ background:var(--ink); color:#fff; padding-block: clamp(56px,8vw,96px); text-align:center; position:relative; overflow:hidden; }
.cta-banner .container{ position:relative; }
.cta-banner h2{ font-size: var(--fs-h2); max-width:18ch; margin-inline:auto; }
.cta-banner p{ color:rgba(255,255,255,.72); margin: 18px auto 34px; max-width:46ch; font-size:1.05rem; }
.cta-banner__ctas{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.cta-banner__tel{ margin-top:22px; font-family:var(--ff-mono); font-size:.85rem; color:rgba(255,255,255,.6); }
.cta-banner__tel a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.4); }

/* ============================================================
   10. CONTACT
   ============================================================ */
.contact-layout{ display:grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px,5vw,64px); align-items:start; }
.contact-card{ border:1px solid var(--line); padding: clamp(24px,3vw,34px); }
.contact-row{ display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--line); }
.contact-row:first-of-type{ border-top:none; padding-top:0; }
.contact-row svg{ width:18px; height:18px; color:var(--red); flex-shrink:0; margin-top:2px; }
.contact-row__label{ font-family:var(--ff-display); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--steel); margin-bottom:4px; }
.contact-row a, .contact-row p{ font-size:.98rem; }
.map-embed{ margin-top:18px; border:1px solid var(--line); filter: grayscale(.25) contrast(1.05); }
.map-embed iframe{ width:100%; height:220px; border:0; display:block; }
.map-link{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-family:var(--ff-mono); font-size:.78rem; color:var(--ink-soft); }
.map-link:hover{ color:var(--red); }
.map-link svg{ width:13px; height:13px; }

.form-card{ border:1px solid var(--line); padding: clamp(24px,3vw,40px); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.field--full{ grid-column: 1 / -1; }
.field label{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--steel); }
.field label .req{ color:var(--red); }
.field input, .field textarea{
  border:1.5px solid var(--line-strong); padding: 13px 14px; background:#fff; font-size:.96rem;
  transition: border-color .2s var(--ease);
}
.field input:focus, .field textarea:focus{ border-color: var(--ink); }
.field textarea{ resize: vertical; min-height:110px; }
.field.has-error input, .field.has-error textarea{ border-color: var(--red); }
.field-error{ font-size:.78rem; color:var(--red); font-family:var(--ff-mono); display:none; }
.field.has-error .field-error{ display:block; }
.form-foot{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:6px; }
.form-note{ font-size:.78rem; color:var(--steel); max-width:32ch; }

.ticket-success{ display:none; text-align:center; padding: 20px 10px; }
.ticket-success.is-visible{ display:block; }
.ticket-success svg{ width:40px; height:40px; color:var(--red); margin-inline:auto 0; margin-bottom:16px; }
.ticket-success h3{ font-family:var(--ff-display); font-size:1.25rem; margin-bottom:10px; }
.ticket-success p{ color:var(--ink-soft); font-size:.92rem; max-width:40ch; margin-inline:auto; }
.ticket-success p + p{ margin-top:10px; }

@media (max-width: 900px){ .contact-layout{ grid-template-columns:1fr; } }
@media (max-width: 560px){ .form-grid{ grid-template-columns:1fr; } }

/* ============================================================
   11. FOOTER
   ============================================================ */
footer.site-footer{ background:var(--ink); color:rgba(255,255,255,.75); padding-block: 64px 28px; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-grid .logo{ color:#fff; margin-bottom:16px; }
.footer-grid p{ font-size:.88rem; color:rgba(255,255,255,.7); max-width:32ch; }
.footer-col__title{ font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:.9rem; color:rgba(255,255,255,.8); }
.footer-col a:hover{ color:var(--red); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:24px; font-family:var(--ff-mono); font-size:.74rem; color:rgba(255,255,255,.62); }
@media (max-width: 820px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer-grid{ grid-template-columns: 1fr; } }
@media (max-width: 480px){ .footer-bottom span:last-child{ display:none; } }

/* back to top */
.to-top{
  position: fixed; right:24px; bottom:24px; width:46px; height:46px; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; z-index:150; opacity:0; pointer-events:none;
  transform: translateY(10px); transition: opacity .25s var(--ease), transform .25s var(--ease), background .2s;
}
.to-top.is-visible{ opacity:1; pointer-events:auto; transform:none; }
.to-top:hover{ background: var(--red); }
.to-top svg{ width:18px; height:18px; }

/* ============================================================
   12. AJOUTS — structure multi-pages
   ============================================================ */

/* H1 d'accueil : mots-clés + slogan dans la même balise */
.hero h1 .h1-kicker{
  display:flex; align-items:center; gap:8px;
  font-family: var(--ff-mono); font-size: .76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color: var(--red); line-height:1.5; margin-bottom:18px;
}
.hero h1 .h1-kicker::before{ content:""; width:7px; height:7px; background:var(--red); flex-shrink:0; }
.hero h1 .h1-slogan{ display:block; }

/* En-tête des pages intérieures */
.page-hero{ position:relative; overflow:hidden; padding-block: clamp(36px,5vw,56px) clamp(48px,7vw,80px); border-bottom:1px solid var(--line); }
.page-hero .container{ position:relative; }
.page-hero h1{ font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); max-width: 20ch; }
.page-hero .lead{ max-width: 60ch; }
.page-hero .hero__ctas{ margin-top:28px; }

.breadcrumb{ margin-bottom:26px; }
.breadcrumb ol{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; font-family:var(--ff-mono); font-size:.74rem; color:var(--steel); }
.breadcrumb li + li::before{ content:"/"; margin-right:6px; color:var(--line-strong); }
.breadcrumb a:hover{ color:var(--red); }
.breadcrumb [aria-current]{ color:var(--ink); }

/* Cartes de solutions (accueil) : liens vers les pages */
.sol-switch--links .sol-btn{ padding:0; gap:0; color:inherit; }
.sol-btn__photo{ position:relative; aspect-ratio: 4/3; background: var(--mist); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.sol-btn__photo svg{ width:42%; height:42%; color:var(--ink); opacity:.55; }
.sol-btn__body{ display:flex; flex-direction:column; gap:10px; padding: 20px 20px 24px; flex:1; }
.sol-btn__more{ margin-top:auto; padding-top:8px; font-family:var(--ff-display); font-weight:700; font-size:.85rem; color:var(--red); }
.sol-switch--links .sol-btn:hover .sol-btn__name{ color: var(--red); }
.sol-switch--links .sol-btn:focus-visible{ outline-offset:-3px; }

/* Photo produit : le pictogramme reste visible tant que la photo n'est pas chargée (ou si le fichier manque) */
.photo-slot{ position:relative; }
.photo-slot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:14px; opacity:0; transition: opacity .3s var(--ease); }
.photo-slot.has-photo img{ opacity:1; }
.photo-slot.has-photo > svg{ visibility:hidden; }

/* Sections produit (pages Caisses / Mobilité) */
.subnav{ display:flex; flex-wrap:wrap; gap:8px; }
.subnav .pill{ display:inline-block; }
.model-section{ display:grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px,4vw,56px); align-items:start; padding-block: clamp(44px,6vw,72px); border-top:1px solid var(--line); scroll-margin-top: 90px; }
.model-section:first-of-type{ border-top:none; }
.model-section .model-visual{ position:sticky; top:100px; }
.model-section h2{ font-size: var(--fs-h2); margin-bottom:4px; }
.model-section .model-panel__desc{ margin:14px 0 0; max-width:62ch; }
.model-section .feature-list{ margin-top:22px; }
.model-section .btn--ghost{ margin-top:24px; padding:11px 22px; font-size:.82rem; }
@media (max-width: 760px){
  .model-section{ grid-template-columns:1fr; }
  .model-section .model-visual{ position:static; }
}

/* Listes sur deux colonnes */
.feature-list--cols{ columns: 2; column-gap: 40px; }
.feature-list--cols li{ break-inside: avoid; }
@media (max-width: 640px){ .feature-list--cols{ columns:1; } }

/* Tableau comparatif */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); }
.spec-table{ width:100%; border-collapse:collapse; min-width:640px; font-size:.93rem; }
.spec-table th, .spec-table td{ text-align:left; padding:16px 18px; border-bottom:1px solid var(--line); vertical-align:top; }
.spec-table thead th{ font-family:var(--ff-mono); font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--steel); background:var(--mist); }
.spec-table tbody th{ font-family:var(--ff-display); font-weight:800; font-size:1rem; white-space:nowrap; }
.spec-table tbody th a:hover{ color:var(--red); }
.spec-table tbody tr:last-child th, .spec-table tbody tr:last-child td{ border-bottom:none; }
.spec-table td{ color:var(--ink-soft); }

/* Secteurs */
.sector-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(24px,3vw,40px); }
.sector{ border-top:2px solid var(--ink); padding-top:20px; }
.sector h3{ font-size: var(--fs-h3); margin-bottom:12px; }
.sector p{ color:var(--ink-soft); font-size:.96rem; }
.sector__links{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:16px; font-family:var(--ff-display); font-weight:700; font-size:.86rem; }
.sector__links a{ color:var(--red); border-bottom:1px solid transparent; }
.sector__links a:hover{ border-bottom-color: var(--red); }
@media (max-width: 860px){ .sector-grid{ grid-template-columns:1fr; } }

/* Offre « analyse des frais » */
.offer{ background: var(--red-tint); padding: clamp(28px,4vw,48px); display:grid; grid-template-columns: 1.4fr auto; gap: 28px; align-items:center; }
.offer h2{ font-size: clamp(1.5rem, 1.25rem + 1vw, 2.1rem); max-width:24ch; }
.offer p{ color: var(--ink-soft); margin-top:12px; max-width:58ch; }
@media (max-width: 760px){ .offer{ grid-template-columns:1fr; } }

/* Schéma Interchange+ */
.fee-compare{ display:grid; grid-template-columns: 1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8px; }
.fee-compare > div{ background:#fff; padding: 26px 24px; }
.fee-compare h3{ font-size:1.05rem; margin-bottom:14px; }
.fee-bar{ display:flex; height:40px; margin: 6px 0 14px; font-family:var(--ff-mono); font-size:.7rem; color:#fff; }
.fee-bar span{ display:flex; align-items:center; justify-content:center; padding-inline:8px; text-align:center; line-height:1.2; }
.fee-bar__flat{ flex:1; background: var(--steel); }
.fee-bar__ic{ flex:3; background: var(--ink); }
.fee-bar__margin{ flex:1; background: var(--red); }
.fee-compare p{ color:var(--ink-soft); font-size:.93rem; }
@media (max-width: 760px){ .fee-compare{ grid-template-columns:1fr; } }

/* Panneau produit unique (terminal) */
.product-split{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px,4vw,56px); align-items:center; }
@media (max-width: 760px){ .product-split{ grid-template-columns:1fr; } }

/* FAQ */
.faq{ max-width: 820px; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:24px; padding: 20px 0; font-family:var(--ff-display); font-weight:800; font-size:1.05rem; line-height:1.3; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--ff-mono); font-weight:400; font-size:1.3rem; color:var(--red); line-height:1; flex-shrink:0; transition: transform .2s var(--ease); }
.faq details[open] summary::after{ transform: rotate(45deg); }
.faq summary:hover{ color: var(--red); }
.faq details > div{ padding: 0 0 22px; color:var(--ink-soft); max-width:68ch; }
.faq details > div p + p{ margin-top:10px; }
.faq details a{ color:var(--red); border-bottom:1px solid currentColor; }

/* Formulaire */
.field select{
  border:1.5px solid var(--line-strong); padding: 13px 40px 13px 14px; background:#fff; font-size:.96rem; appearance:none; -webkit-appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E0E10' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 14px center; background-size: 12px 8px;
}
.field select:focus{ border-color: var(--ink); }
.field-hint{ grid-column: 1 / -1; margin:-8px 0 16px; font-size:.8rem; color:var(--steel); }
.field-hint.has-error{ color:var(--red); }
.form-alert{ display:none; border-left:3px solid var(--red); background:var(--red-tint); padding:14px 16px; margin-bottom:22px; font-size:.92rem; }
.form-alert.is-visible{ display:block; }
.form-alert a{ font-weight:600; border-bottom:1px solid currentColor; }
.form-note a{ color:var(--ink); border-bottom:1px solid var(--line-strong); }
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* Carte Google : chargée seulement au clic */
.map-embed--idle{ filter:none; }
.map-load{ width:100%; height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background: var(--mist);
  background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 36px), repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 36px);
  font-family: var(--ff-display); font-weight:700; font-size:.9rem; }
.map-load svg{ width:22px; height:22px; color:var(--red); }
.map-load small{ font-family:var(--ff-body); font-weight:400; font-size:.76rem; color:var(--steel); max-width:34ch; text-align:center; }
.map-load:hover{ color: var(--red); }

/* Page merci / 404 */
.notice{ max-width: 640px; }
.notice .btn{ margin-top: 30px; }
.link-list{ margin-top:28px; border-top:1px solid var(--line); }
.link-list a{ display:flex; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--line); font-family:var(--ff-display); font-weight:700; }
.link-list a::after{ content:"›"; color:var(--red); }
.link-list a:hover{ color:var(--red); }

/* Pages légales */
.prose{ max-width: 72ch; }
.prose h2{ font-size: 1.45rem; margin: 44px 0 14px; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size: 1.1rem; margin: 26px 0 10px; }
.prose p, .prose li{ color: var(--ink-soft); }
.prose p + p{ margin-top: 12px; }
.prose ul{ list-style: disc; padding-left: 1.3em; margin: 10px 0; }
.prose li{ margin-bottom: 6px; }
.prose a{ color: var(--red); border-bottom: 1px solid currentColor; }
.prose .meta{ font-family: var(--ff-mono); font-size:.78rem; color: var(--steel); margin-top: 40px; }

/* Bandeau CTA : liens accessibles */
.cta-banner h2{ max-width: 22ch; }

/* Barre d'appel fixe sur mobile */
.callbar{ display:none; }
@media (max-width: 900px){
  .callbar{
    display:grid; grid-template-columns: 1fr 1.4fr; position:fixed; left:0; right:0; bottom:0; z-index:250;
    border-top:1px solid var(--line); background:#fff; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    gap:8px;
  }
  .callbar a{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; font-family:var(--ff-display); font-weight:700; font-size:.95rem; }
  .callbar svg{ width:17px; height:17px; }
  .callbar__tel{ border:1.5px solid var(--ink); color:var(--ink); }
  .callbar__cta{ background:var(--red); color:#fff; }
  body{ padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .to-top{ bottom: calc(80px + env(safe-area-inset-bottom)); right:14px; }
}
@media print{ .callbar, .to-top, .site-header, .topbar, .mobile-nav{ display:none !important; } }

/* Corrections de détail */
.contact-row .contact-row__label{ font-family:var(--ff-display); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--steel); margin-bottom:4px; }
.footer-grid .footer-col__title{ font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-bottom:16px; max-width:none; }
.footer-col li{ font-size:.9rem; }
.form-grid{ row-gap:0; }
.product-split .btn{ margin-top:24px; }
.page-hero + .section{ padding-top: clamp(40px,5vw,64px); }
.text-link{ color:var(--red); border-bottom:1px solid currentColor; }
.text-link:hover{ color:var(--red-dark); }
@media (max-width:560px){ .receipt-wrap{ display:none; } .hero__ctas .btn{ flex:1 1 100%; } }

/* Grille des cantons : 7 entrées — 4 + 3 sur grand écran, 3 par ligne sur mobile */
.canton-grid{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 1080px){ .canton-grid{ grid-template-columns: repeat(3,1fr); } }