/* ═══════════════════════════════════════════════════════════════════
   KOSIOS — système de design
   ═══════════════════════════════════════════════════════════════════

   Parti-pris : le site appartient au monde du restaurant, pas à celui
   du SaaS. Matière (bois, ardoise, papier, laiton), lumière tungstène,
   et le ticket de cuisine comme objet signature.

   Interdits, décidés après audit de Slang.ai, Owner.com et Loman.ai :
     · dégradé violet ou cyan sur fond noir      (Slang)
     · maquette de téléphone flottante            (Owner)
     · mur de témoignages vidéo                   (Loman)
     · CTA flottant en bas d'écran, hover lift, tout-en-capitales
   Sert index.html et les landings /for/{catégorie}.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Palette de marque KOSIOS, reprise à l'identique de css/index.css.
     Ce sont les couleurs de la charte : ne pas les remplacer. La nouvelle
     direction artistique change la composition et la typographie, pas
     l'identité colorée. ── */
  --t:          #C1440E;   /* terracotta : accent principal de la marque */
  --td:         #8b3010;   /* terracotta sombre : survols, insistance */
  --tl:         #d4673a;   /* terracotta clair : accents sur fond sombre */

  --ink:        #1C0E06;   /* brun presque noir */
  --ink-mid:    #3D2B1F;
  --ink-soft:   #6B5545;   /* texte secondaire */

  --paper:      #FAF6EF;   /* crème : fond principal */
  --paper-warm: #F2EBE0;   /* sable : second fond */
  --rule:       #E8DDD0;   /* argile : filets et séparateurs */

  /* Fond sombre du bloc tarifs. Volontairement le brun de la charte et
     non un gris d'ardoise : la photo de slate vient s'y fondre en
     surimpression pour donner la matière sans refroidir la palette. */
  --dark:       #241509;
  --dark-deep:  #1C0E06;
  --chalk:      #FAF6EF;   /* craie = le crème de la charte */
  --chalk-soft: #A89684;

  --ff-menu:  'Bebas Neue', Impact, sans-serif;
  --ff-body:  'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-tick:  'DM Mono', 'Courier New', monospace;

  --shell:  1180px;
  --gut:    clamp(20px, 5vw, 48px);
}

/* ── Réinitialisation ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* Accessibilité : la cible du focus doit rester visible partout. */
:focus-visible { outline: 2px solid var(--t); outline-offset: 3px; }

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

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); }

/* ── Typographie ──────────────────────────────────────────────────── */

/* Titres en serif de menu, casse mixte, interlettrage resserré.
   Jamais de tout-en-capitales : c'est une signature de site généré. */
.h1, .h2, .h3 { font-family: var(--ff-menu); font-weight: 400; margin: 0; }
.h1 { font-size: clamp(46px, 8.6vw, 100px); line-height: .93; letter-spacing: .012em; }
.h2 { font-size: clamp(34px, 5.6vw, 62px);  line-height: .97; letter-spacing: .014em; }
.h3 { font-size: clamp(23px, 2.7vw, 31px);  line-height: 1.06; letter-spacing: .018em; }

/* Sur-titre à la craie ou à l'encre, façon étiquette de menu. */
.eyebrow {
  font-family: var(--ff-tick);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 18px;
}
.eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--t); flex: none; }
.eyebrow.on-dark { color: var(--chalk-soft); }

.lead { font-size: clamp(17px, 2vw, 20px); line-height: 1.62; color: var(--ink-soft); margin: 0; }
.lead strong { color: var(--ink); font-weight: 600; }

.sect { padding: clamp(64px, 9vw, 120px) 0; }
.sect--warm { background: var(--paper-warm); }
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ── Boutons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--ff-tick); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  padding: 15px 26px; border: 1px solid transparent; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--td); }
.btn--accent { background: var(--t); color: var(--ink); }
.btn--accent:hover { background: var(--tl); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--chalk { background: transparent; color: var(--chalk); border-color: rgba(250,246,239,.42); }
.btn--chalk:hover { background: var(--chalk); color: var(--dark); border-color: var(--chalk); }

/* ── Barre de navigation ──────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250,246,239,.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav-in { display: flex; align-items: center; gap: 28px; height: 66px; }
.nav-logo { display: flex; align-items: baseline; gap: 9px; text-decoration: none; margin-right: auto; }
.nav-logo b { font-family: var(--ff-menu); font-size: 25px; letter-spacing: -.01em; }
.nav-logo span {
  font-family: var(--ff-tick); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--t);
}
.nav-links { display: flex; gap: 26px; }
.nav-links a {
  font-family: var(--ff-tick); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-soft);
  padding: 4px 0; border-bottom: 1px solid transparent;
}
.nav-links a:hover { color: var(--ink); border-bottom-color: var(--t); }
.nav-burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-burger i { display: block; width: 22px; height: 1.5px; background: var(--ink); margin: 5px 0; }

@media (max-width: 900px) {
  .nav-links, .nav .btn { display: none; }
  .nav-burger { display: block; }
}

.drawer {
  display: none; border-bottom: 1px solid var(--rule);
  background: var(--paper); padding: 8px var(--gut) 22px;
}
.drawer.open { display: block; }
.drawer a {
  display: block; padding: 13px 0; text-decoration: none;
  border-bottom: 1px solid var(--rule);
  font-family: var(--ff-tick); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.drawer .btn { width: 100%; margin-top: 16px; }

/* ── Sélecteur de marché (langue et devise) ───────────────────────── */
.market { position: relative; }
.market-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 1px solid var(--rule); cursor: pointer;
  padding: 8px 11px; font-family: var(--ff-tick); font-size: 11px; letter-spacing: .06em;
}
.market-btn:hover { border-color: var(--t); }
.market-menu {
  position: absolute; right: 0; top: calc(100% + 7px); min-width: 216px;
  background: var(--paper); border: 1px solid var(--rule);
  box-shadow: 0 14px 34px rgba(28,14,6,.14);
  display: none; z-index: 70; padding: 5px;
}
.market-menu.open { display: block; }
.market-opt {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 9px 11px; font-family: var(--ff-tick); font-size: 12px;
}
.market-opt:hover { background: var(--paper-warm); }
.market-opt[aria-current="true"] { color: var(--t); }
.market-opt em { margin-left: auto; font-style: normal; color: var(--ink-soft); }

/* ── Hero : photo pleine largeur, texte à la craie ────────────────── */
.hero { position: relative; background: var(--dark-deep); color: var(--chalk); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
/* Voile lisible sans écraser la photo : la salle doit rester visible. */
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(28,14,6,.93) 0%, rgba(28,14,6,.8) 46%, rgba(28,14,6,.35) 100%),
    linear-gradient(to top, rgba(28,14,6,.82) 0%, rgba(28,14,6,0) 55%);
}
.hero-in {
  position: relative;
  /* Marges verticales seulement : la gouttière horizontale vient de
     .shell, et un padding raccourci la remettait à zéro, collant le
     texte au bord de l'écran. */
  padding-top: clamp(56px, 8vw, 104px);
  padding-bottom: clamp(48px, 6vw, 84px);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 68px); align-items: start; }
.hero h1 { color: var(--chalk); max-width: 15em; }
.hero h1 em { font-style: normal; color: var(--tl); }
.hero .lead { color: #D9CDBE; margin-top: 22px; max-width: 34em; }
.hero-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-note {
  font-family: var(--ff-tick); font-size: 12px; color: var(--chalk-soft);
  margin-top: 20px; display: flex; flex-wrap: wrap; gap: 6px 18px;
}

@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* ── Sélecteur de catégorie : plaques d'ardoise ───────────────────── */
.cats { margin-top: 26px; }
.cats-lbl {
  font-family: var(--ff-tick); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--chalk-soft); margin-bottom: 11px;
}
.cats-row { display: flex; flex-wrap: wrap; gap: 7px; }
.cat {
  background: rgba(250,246,239,.07); color: #E4DACD;
  border: 1px solid rgba(250,246,239,.2); cursor: pointer;
  padding: 8px 13px; font-family: var(--ff-tick); font-size: 12px;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.cat:hover { border-color: var(--t); color: var(--chalk); }
.cat[aria-pressed="true"] { background: var(--t); border-color: var(--t); color: var(--ink); }

/* ── Le ticket : objet signature ──────────────────────────────────
   Un vrai ticket de cuisine. La démo s'y imprime ligne à ligne, et
   le résumé d'appel que vend le produit apparaît exactement là où le
   patron le lit dans la vraie vie. */
.ticket {
  background: #FDFAF4; color: var(--ink);
  font-family: var(--ff-tick); font-size: 13.5px; line-height: 1.55;
  padding: 22px 20px 26px;
  box-shadow: 0 22px 44px rgba(0,0,0,.42);
  position: relative;
  /* Bord déchiré haut et bas, comme sorti de l'imprimante. */
  clip-path: polygon(
    0 6px, 4% 0, 8% 6px, 12% 0, 16% 6px, 20% 0, 24% 6px, 28% 0, 32% 6px, 36% 0,
    40% 6px, 44% 0, 48% 6px, 52% 0, 56% 6px, 60% 0, 64% 6px, 68% 0, 72% 6px,
    76% 0, 80% 6px, 84% 0, 88% 6px, 92% 0, 96% 6px, 100% 0,
    100% calc(100% - 6px), 96% 100%, 92% calc(100% - 6px), 88% 100%,
    84% calc(100% - 6px), 80% 100%, 76% calc(100% - 6px), 72% 100%,
    68% calc(100% - 6px), 64% 100%, 60% calc(100% - 6px), 56% 100%,
    52% calc(100% - 6px), 48% 100%, 44% calc(100% - 6px), 40% 100%,
    36% calc(100% - 6px), 32% 100%, 28% calc(100% - 6px), 24% 100%,
    20% calc(100% - 6px), 16% 100%, 12% calc(100% - 6px), 8% 100%,
    4% calc(100% - 6px), 0 100%
  );
}
.ticket-head { text-align: center; padding-bottom: 12px; border-bottom: 1px dashed #DCCFC0; }
.ticket-head b { display: block; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.ticket-head span { font-size: 11px; color: var(--ink-soft); letter-spacing: .06em; }
.ticket-body { padding: 14px 0; min-height: 232px; }
.ticket-line { display: flex; gap: 9px; margin-bottom: 11px; }
.ticket-who { flex: none; width: 42px; color: var(--t); font-size: 11px; padding-top: 2px; }
.ticket-line.agent .ticket-who { color: var(--td); }
.ticket-what { flex: 1; }
.ticket-foot {
  border-top: 1px dashed #DCCFC0; padding-top: 12px;
  font-size: 11.5px; color: var(--ink-soft);
  display: flex; justify-content: space-between; gap: 12px;
}
/* Curseur d'impression. */
.ticket-caret {
  display: inline-block; width: 8px; height: 15px; background: var(--ink);
  vertical-align: -2px; animation: caret 1s steps(2) infinite;
}
@keyframes caret { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: 0 } }

.ticket-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ── Grille de modules ────────────────────────────────────────────── */
.mods { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 1px; background: var(--rule); margin-top: 48px; }
.mod { background: var(--paper); padding: 30px 26px 34px; }
.mod-n { font-family: var(--ff-tick); font-size: 11px; letter-spacing: .14em; color: var(--t); margin-bottom: 16px; }
.mod h3 { margin-bottom: 10px; }
.mod p { margin: 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; }

/* ── Comparatif de pile logicielle ────────────────────────────────── */
.stack { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(16px, 3vw, 40px); align-items: center; margin-top: 44px; }
.stack-col { border: 1px solid var(--rule); padding: 26px 24px; background: var(--paper); }
.stack-col.ours { border-color: var(--ink); border-width: 2px; }
.stack-lbl { font-family: var(--ff-tick); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 16px; }
.stack-item { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px dotted var(--rule); font-size: 15px; }
.stack-item span { font-family: var(--ff-tick); color: var(--ink-soft); font-size: 13.5px; white-space: nowrap; }
.stack-sum { display: flex; justify-content: space-between; gap: 14px; padding-top: 15px; margin-top: 9px; border-top: 1px solid var(--ink); font-family: var(--ff-tick); font-size: 15px; }
.stack-vs { font-family: var(--ff-menu); font-size: 26px; color: var(--ink-soft); }

@media (max-width: 860px) {
  .stack { grid-template-columns: 1fr; }
  .stack-vs { text-align: center; }
}

/* ── Vidéo Wistia ─────────────────────────────────────────────────── */
.vid { max-width: 900px; margin: 44px auto 0; }
.vid-frame { position: relative; background: var(--dark-deep); border: 1px solid var(--rule); }
.vid-frame::before { content: ''; display: block; padding-top: 56.25%; }
.vid-frame > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.vid-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; color: var(--chalk-soft); font-family: var(--ff-tick); font-size: 12.5px;
  text-align: center; padding: 24px;
}
.vid-ph b { color: var(--chalk); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.vid-cap { font-family: var(--ff-tick); font-size: 12px; color: var(--ink-soft); margin-top: 13px; text-align: center; }

/* ── Tarifs sur ardoise ───────────────────────────────────────────── */
/* ── Section tarifs ────────────────────────────────────────────────
   L'ardoise n'est PLUS le fond de section : une photo texturée derrière
   un paragraphe le rend illisible, les traînées de craie passaient
   exactement sous le texte. Elle devient un objet encadré qui ne porte
   que des chiffres courts, posé sur un aplat de la charte. */
.slate {
  background: var(--dark-deep);
  background-image: linear-gradient(to bottom, rgba(193,68,14,.07), rgba(28,14,6,0) 46%);
  color: var(--chalk);
}
.slate .eyebrow { color: var(--chalk-soft); }
.slate h2 { color: var(--chalk); }
.slate .lead { color: #CDBFAE; }

/* Le tableau : cadre bois, ardoise à l'intérieur, et un voile qui aplanit
   la texture pour que les prix restent nets par-dessus. */
.board {
  margin-top: 46px;
  border: 11px solid #2E1B0E;
  border-radius: 2px;
  background:
    linear-gradient(rgba(20,18,16,.62), rgba(20,18,16,.62)),
    var(--dark) url('/img/slate') center/cover no-repeat;
  box-shadow:
    0 26px 54px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(250,246,239,.14),
    inset 0 14px 40px rgba(0,0,0,.35);
}
.board-head {
  display: grid; grid-template-columns: 1.15fr .8fr 1fr .95fr .95fr .9fr;
  font-family: var(--ff-tick); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--chalk-soft);
  padding: 14px 20px; border-bottom: 1px solid rgba(250,246,239,.22);
}
.board-row {
  display: grid; grid-template-columns: 1.15fr .8fr 1fr .95fr .95fr .9fr; align-items: center;
  padding: 20px; border-bottom: 1px solid rgba(250,246,239,.12);
  transition: background .16s ease;
}
.board-row:last-child { border-bottom: 0; }
.board-row:hover, .board-row.pick { background: rgba(250,246,239,.06); }
.board-row.pick { box-shadow: inset 3px 0 0 var(--t); }
.board-name { font-family: var(--ff-menu); font-size: 23px; }
.board-name small { display: block; font-family: var(--ff-tick); font-size: 11.5px; color: var(--chalk-soft); letter-spacing: .06em; margin-top: 3px; }
.board-val { font-family: var(--ff-tick); font-size: 15px; }
.board-val small { display: block; font-size: 10.5px; color: var(--chalk-soft); letter-spacing: .05em; margin-top: 3px; }
.board-head i { font-style: normal; opacity: .62; }
.board-price { font-family: var(--ff-tick); font-size: 22px; color: var(--tl); }
.board-price small { display: block; font-size: 11px; color: var(--chalk-soft); letter-spacing: .06em; }

@media (max-width: 780px) {
  .board-head { display: none; }
  .board-row { grid-template-columns: 1fr auto; gap: 8px 14px; }
  .board-name { grid-column: 1 / -1; }
  /* Étiquette du chiffre, sinon les colonnes perdent leur sens. */
  .board-val::before, .board-price::before {
    content: attr(data-lbl) '  ';
    font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--chalk-soft);
  }
}

.setup-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px; background: rgba(250,246,239,.18); margin-top: 26px;
  border: 1px solid rgba(250,246,239,.18);
}
.setup-cell { background: rgba(250,246,239,.04); padding: 22px 20px; }
.setup-cell b { display: block; font-family: var(--ff-tick); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--chalk-soft); margin-bottom: 7px; }
.setup-cell strong { font-family: var(--ff-tick); font-size: 20px; color: var(--chalk); font-weight: 400; }
.setup-cell span { display: block; font-size: 13.5px; color: var(--chalk-soft); margin-top: 5px; line-height: 1.5; }

.slate-note {
  font-family: var(--ff-tick); font-size: 12.5px; color: #C8B9A8;
  margin-top: 26px; line-height: 1.8; max-width: 62em;
  padding-left: 18px; border-left: 1px solid rgba(193,68,14,.55);
}

/* ── Bandeau de catégories (maillage vers les landings) ───────────── */
.grid-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 1px; background: var(--rule); margin-top: 44px; }
.grid-cat {
  background: var(--paper); padding: 20px 22px; text-decoration: none;
  display: flex; flex-direction: column; gap: 7px; min-height: 108px;
}
.grid-cat:hover { background: var(--paper-warm); }
.grid-cat b { font-family: var(--ff-menu); font-size: 20px; font-weight: 400; }
.grid-cat span { font-family: var(--ff-tick); font-size: 11.5px; color: var(--t); letter-spacing: .06em; margin-top: auto; }

/* ── Questions ────────────────────────────────────────────────────── */
.qa { margin-top: 40px; border-top: 1px solid var(--rule); }
.qa-item { border-bottom: 1px solid var(--rule); }
.qa-q {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  padding: 22px 44px 22px 0; position: relative;
  font-family: var(--ff-menu); font-size: clamp(19px, 2.1vw, 23px); line-height: 1.3;
}
.qa-q::after {
  content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--ff-tick); font-size: 20px; color: var(--t);
}
.qa-item.open .qa-q::after { content: '–'; }
.qa-a { display: none; padding: 0 44px 24px 0; color: var(--ink-soft); }
.qa-item.open .qa-a { display: block; }

/* ── Appel final ──────────────────────────────────────────────────── */
.end { background: var(--ink); color: var(--paper); text-align: center; }
.end h2 { color: var(--paper); max-width: 22em; margin: 0 auto; }
.end .lead { color: #C2B2A0; max-width: 40em; margin: 20px auto 0; }
.end-acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }
.end-note { font-family: var(--ff-tick); font-size: 12px; color: #8A7A68; margin-top: 22px; }

/* ── Pied de page ─────────────────────────────────────────────────── */
.foot { background: var(--dark-deep); color: var(--chalk-soft); padding: 52px 0 34px; font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 34px; }
.foot h4 { font-family: var(--ff-tick); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--chalk); margin: 0 0 14px; font-weight: 400; }
.foot a { display: block; text-decoration: none; padding: 5px 0; }
.foot a:hover { color: var(--chalk); }
.foot-brand b { font-family: var(--ff-menu); font-size: 24px; color: var(--chalk); display: block; margin-bottom: 10px; }
.foot-bot { display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(250,246,239,.14); font-family: var(--ff-tick); font-size: 11.5px; }

@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; gap: 26px; } }

/* ── Apparition au défilement, discrète ───────────────────────────── */
.rise { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.rise.seen { opacity: 1; transform: none; }

/* ── Logo de marque ───────────────────────────────────────────────
   Le fichier vit dans assets/logo.{png|svg|webp} et est servi par
   /img/logo via api/img.php, qui résout n'importe quelle extension.
   S'il est absent, le onerror du HTML retire l'image et le mot-clé
   « KOSIOS » tient seul : la page n'affiche jamais d'icône cassée. */
.nav-mark { width: 30px; height: 30px; object-fit: contain; align-self: center; }
.foot-mark { width: 40px; height: 40px; object-fit: contain; margin-bottom: 12px; }

/* ── Corrections de contraste sur fonds sombres ───────────────────
   .lead strong passe à l'encre foncée par défaut, ce qui le rend
   invisible sur le hero et sur le bloc final. Sur fond sombre, le mot
   mis en avant doit passer en crème, pas disparaître. */
.hero .lead strong,
.end .lead strong,
.slate .lead strong { color: var(--chalk); font-weight: 600; }

/* Les liens de navigation ne doivent pas se couper en deux lignes :
   « How it works » sur deux lignes casse la hauteur de la barre. */
.nav-links a { white-space: nowrap; }
.nav-links { gap: 22px; }
.nav-logo span { white-space: nowrap; }
.nav-in { gap: 20px; }

/* Le ticket distingue mieux qui parle : l'agent en terracotta, le
   client en encre douce. Deux nuances de terracotta ne se lisaient pas. */
.ticket-who { color: var(--ink-soft); }
.ticket-line.agent .ticket-who { color: var(--t); font-weight: 700; }

/* ── Ajustements après intégration du logo ────────────────────────
   La marque, sa mention, quatre liens, le sélecteur de marché et le
   bouton ne tiennent pas ensemble sous 1160 px : la mention passe à la
   trappe en premier, c'est l'élément le moins utile des six. */
@media (max-width: 1160px) {
  .nav-logo span { display: none; }
}
.nav-mark { width: 34px; height: 34px; }
.nav-logo { gap: 11px; align-items: center; }
.nav-logo b { line-height: 1; }

/* ═══════════════════════════════════════════════════════════════════
   HERO À DEUX PLANS · 1975 et aujourd'hui
   ═══════════════════════════════════════════════════════════════════
   Deux scènes simultanées, même cadrage, même hauteur de comptoir.
   C'est la constance du cadre qui fait lire l'écart de cinquante ans.
   Le prospect comprend où va son métier avant d'avoir lu le titre. */

.hero2 { background: var(--dark-deep); color: var(--chalk); }

.hero2-stage {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: rgba(250,246,239,.14);
}
.hero2-half { position: relative; margin: 0; overflow: hidden; background: #000; }
.hero2-media { position: relative; aspect-ratio: 16 / 10; }
.hero2-media > img,
.hero2-media > video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Mouvement lent quand la source est une image fixe. Les vidéos ont leur
   propre mouvement : la règle ne s'applique pas à elles. */
.hero2-media > img { animation: driftIn 26s ease-in-out infinite alternate; }
@keyframes driftIn { from { transform: scale(1.02) } to { transform: scale(1.11) } }

/* La moitié « aujourd'hui » est légèrement plus lumineuse : le regard doit
   finir à droite, du côté où va l'industrie. */
.hero2-half::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(28,14,6,.94) 0%, rgba(28,14,6,.25) 46%, rgba(28,14,6,.1) 100%);
}
.hero2-half--now .hero2-media { filter: saturate(1.05) brightness(1.04); }
.hero2-half:not(.hero2-half--now) .hero2-media { filter: sepia(.16) saturate(.92); }

.hero2-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(16px, 2.4vw, 30px);
  display: flex; flex-direction: column; gap: 5px;
}
.hero2-year {
  font-family: var(--ff-tick); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tl);
}
.hero2-line {
  font-family: var(--ff-menu); font-size: clamp(17px, 2.1vw, 26px);
  line-height: 1.22; color: var(--chalk); max-width: 17em;
}

.hero2-say { padding: clamp(40px, 5.5vw, 72px) 0 clamp(48px, 6vw, 84px); }
.hero2-say .eyebrow { color: var(--chalk-soft); }
.hero2-say h1 { color: var(--chalk); max-width: 16em; }
.hero2-say h1 em { font-style: normal; color: var(--tl); }
.hero2-say .lead { color: #CDBFAE; margin-top: 20px; max-width: 46em; }
.hero2-say .lead strong { color: var(--chalk); font-weight: 600; }
.hero2-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero2-say .btn--ghost { color: var(--chalk); border-color: rgba(250,246,239,.45); }
.hero2-say .btn--ghost:hover { background: var(--chalk); color: var(--dark); }
.hero2-note {
  font-family: var(--ff-tick); font-size: 12px; color: var(--chalk-soft);
  margin-top: 22px; display: flex; flex-wrap: wrap; gap: 7px 22px;
}
.hero2-note span::before { content: '· '; color: var(--t); }

@media (max-width: 720px) {
  .hero2-stage { grid-template-columns: 1fr; }
  .hero2-media { aspect-ratio: 16 / 11; }
}

/* ═══ BANDEAU DÉROULANT DES SITES DÉMO ═══════════════════════════
   Simple : on montre ce qu'on fabrique, on ne le raconte pas. */

.strip { background: var(--paper-warm); border-bottom: 1px solid var(--rule); overflow: hidden; }
.strip-lbl {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  max-width: var(--shell); margin: 0 auto; padding: 20px var(--gut) 14px;
  font-family: var(--ff-tick); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.strip-lbl a { color: var(--t); text-decoration: none; }
.strip-lbl a:hover { text-decoration: underline; }

.strip-rail { display: flex; gap: 14px; width: max-content; padding: 0 0 24px; }
.strip-rail.run { animation: rail 46s linear infinite; }
.strip:hover .strip-rail.run { animation-play-state: paused; }
@keyframes rail { from { transform: translateX(0) } to { transform: translateX(-50%) } }

.card {
  width: 232px; flex: none; text-decoration: none;
  border: 1px solid var(--rule); background: var(--paper);
}
.card-shot { aspect-ratio: 16 / 10; position: relative; overflow: hidden; }
.card-chrome {
  height: 16px; display: flex; align-items: center; gap: 4px; padding: 0 7px;
  background: rgba(28,14,6,.22);
}
.card-chrome i { width: 5px; height: 5px; border-radius: 50%; background: rgba(250,246,239,.5); }
.card-hero { position: absolute; inset: 16px 0 0; display: flex; align-items: center; justify-content: center; }
.card-hero b {
  font-family: var(--ff-menu); font-size: 21px; color: rgba(250,246,239,.94);
  font-weight: 400; text-align: center; padding: 0 12px; line-height: 1.1;
}
.card-foot { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; }
.card-foot b { font-family: var(--ff-body); font-size: 14px; font-weight: 500; }
.card-foot span { font-family: var(--ff-tick); font-size: 10.5px; color: var(--ink-soft); letter-spacing: .05em; }

/* ═══ FONCTIONNALITÉS · texte à gauche, preuve visuelle à droite ═══ */

.feats { margin-top: 52px; display: flex; flex-direction: column; gap: clamp(48px, 6vw, 84px); }
.feat {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.feat--flip .feat-say { order: 2; }
.feat-n {
  font-family: var(--ff-tick); font-size: 11px; letter-spacing: .16em;
  color: var(--t); margin-bottom: 14px;
}
.feat-say h3 { margin-bottom: 12px; }
.feat-say > p { margin: 0; color: var(--ink-soft); font-size: 16.5px; line-height: 1.65; }
.feat-pts { list-style: none; margin: 18px 0 0; padding: 0; }
.feat-pts li {
  position: relative; padding-left: 22px; margin-bottom: 9px;
  font-size: 15.5px; color: var(--ink);
}
.feat-pts li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 9px; height: 1px; background: var(--t);
}
.feat-show { display: flex; justify-content: center; }

@media (max-width: 860px) {
  .feat { grid-template-columns: 1fr; }
  .feat--flip .feat-say { order: 0; }
}

/* ═══ MAQUETTES · construites en HTML, jamais en image ═════════════
   Elles restent nettes à toute taille, se traduisent avec le reste du
   site, et se corrigent en une ligne quand le produit change. */

.mock {
  width: 100%; max-width: 340px; background: var(--paper);
  border: 1px solid var(--rule); box-shadow: 0 16px 40px rgba(28,14,6,.1);
  font-size: 14px;
}
.mock-bar { height: 26px; background: var(--paper-warm); display: flex; align-items: center; justify-content: center; }
.mock-bar i { width: 54px; height: 4px; border-radius: 2px; background: var(--rule); }
.mock-body { padding: 14px; }

.mock-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.mock-thumb { width: 34px; height: 34px; flex: none; background: var(--paper-warm); border: 1px solid var(--rule); }
.mock-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.mock-txt b { font-size: 13.5px; font-weight: 600; }
.mock-txt i { font-style: normal; font-size: 11.5px; color: var(--ink-soft); }
.mock-row em { font-style: normal; font-family: var(--ff-tick); font-size: 13px; }
.mock-total { display: flex; justify-content: space-between; padding: 12px 0 14px; font-family: var(--ff-tick); }
.mock-total em { font-style: normal; font-weight: 700; }
.mock-cta {
  background: var(--t); color: var(--paper); text-align: center; padding: 11px;
  font-family: var(--ff-tick); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}

.mock--book { padding: 16px; }
.mock-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.mock-head b { font-family: var(--ff-menu); font-size: 20px; font-weight: 400; }
.mock-head span { font-family: var(--ff-tick); font-size: 11px; color: var(--ink-soft); }
.mock-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 14px; }
.mock-slots span {
  text-align: center; padding: 9px 0; border: 1px solid var(--rule);
  font-family: var(--ff-tick); font-size: 12.5px;
}
.mock-slots .taken { color: var(--rule); text-decoration: line-through; }
.mock-slots .pick, .mock-party .pick { background: var(--t); border-color: var(--t); color: var(--paper); }
.mock-party { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.mock-party span { font-family: var(--ff-tick); font-size: 11px; color: var(--ink-soft); margin-right: 4px; }
.mock-party b {
  width: 30px; text-align: center; padding: 6px 0; border: 1px solid var(--rule);
  font-family: var(--ff-tick); font-size: 12.5px; font-weight: 400;
}

.mock--day { padding: 16px; }
.mock-line { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.mock-line i { font-style: normal; font-family: var(--ff-tick); font-size: 12px; color: var(--ink-soft); width: 42px; flex: none; }
.mock-line span { flex: 1; font-size: 14px; }
.mock-line em { font-style: normal; font-family: var(--ff-tick); font-size: 12.5px; }
.mock-line.hi { background: rgba(193,68,14,.07); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.mock-line.hi span { font-weight: 600; }

.mock--qr { padding: 16px; display: flex; gap: 14px; }
.mock-qr {
  width: 78px; height: 78px; flex: none; background:
    repeating-conic-gradient(var(--ink) 0% 25%, var(--paper) 0% 50%) 0 0 / 13px 13px;
  border: 5px solid var(--paper); outline: 1px solid var(--rule);
}
.mock-menu { flex: 1; }
.mock-mline { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13px; }
.mock-mline b { font-family: var(--ff-tick); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.mock-mline em { font-style: normal; font-family: var(--ff-tick); font-size: 12px; }
.mock-mline.out span, .mock-mline.out em { color: var(--rule); text-decoration: line-through; }
.mock-mline.out em { text-decoration: none; color: var(--t); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; }

.mock--links { padding: 20px 16px; text-align: center; }
.mock-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--paper-warm); border: 1px solid var(--rule); margin: 0 auto 8px; }
.mock-name { font-family: var(--ff-tick); font-size: 12.5px; color: var(--ink-soft); margin-bottom: 14px; }
.mock-link { border: 1px solid var(--ink); padding: 10px; margin-bottom: 8px; font-size: 13.5px; }
.mock-link:first-of-type { background: var(--ink); color: var(--paper); }

.mock--chat { padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.mock-msg { max-width: 84%; padding: 9px 12px; font-size: 13.5px; line-height: 1.45; }
.mock-msg.them { background: var(--paper-warm); border: 1px solid var(--rule); align-self: flex-start; }
.mock-msg.us { background: var(--ink); color: var(--paper); align-self: flex-end; }

/* ═══ L'OPTION TÉLÉPHONE ══════════════════════════════════════════ */

.opt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 60px); align-items: center; }
.opt-note { font-family: var(--ff-tick); font-size: 12px; color: var(--ink-soft); margin-top: 18px; }
.opt-show { display: flex; justify-content: center; }
.opt-show .ticket { max-width: 380px; width: 100%; }

@media (max-width: 860px) { .opt { grid-template-columns: 1fr; } }

/* ═══ PAGE /demos · grille des sites construits ════════════════════ */

.grid-sites {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 22px; margin-top: 44px;
}
.site { text-decoration: none; border: 1px solid var(--rule); background: var(--paper); display: block; }
.site:hover { border-color: var(--ink); }
.site--soon { opacity: .78; }
.site-shot { aspect-ratio: 16 / 10; position: relative; overflow: hidden; }
.site-foot { padding: 13px 15px; display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; }
.site-foot b { font-size: 15px; font-weight: 600; }
.site-foot span { grid-column: 1; font-family: var(--ff-tick); font-size: 11px; color: var(--ink-soft); letter-spacing: .05em; }
.site-foot em {
  grid-row: 1 / 3; grid-column: 2; align-self: center;
  font-style: normal; font-family: var(--ff-tick); font-size: 11px;
  letter-spacing: .06em; color: var(--t);
}
.site--soon .site-foot em { color: var(--ink-soft); }

.d-note {
  font-family: var(--ff-tick); font-size: 12.5px; color: var(--ink-soft);
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule);
}

/* Hero de landing : une seule colonne, le texte porte seul le message. */
.hero-solo { max-width: 40em; }

/* ═══════════════════════════════════════════════════════════════════
   MARKETING · ACQUISITION
   ═══════════════════════════════════════════════════════════════════
   Le cœur de l'argument : les plateformes tierces louent au restaurateur
   ses propres clients. On oppose visuellement les deux modèles, puis on
   montre l'annonce et le résultat. */

.mkt { background: var(--paper); }

/* ── Louer ses clients contre les posséder ── */
.own {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: clamp(14px, 2.5vw, 32px); align-items: stretch; margin-top: 48px;
}
.own-col { border: 1px solid var(--rule); padding: 26px 24px 28px; }
.own-col--them { background: var(--paper-warm); }
/* Le modèle qu'on défend est le seul à porter la couleur de la marque. */
.own-col--us { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.own-col--us h3 { color: var(--paper); }

.own-lbl {
  font-family: var(--ff-tick); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 12px; color: var(--ink-soft);
}
.own-col--us .own-lbl { color: var(--tl); }
.own-col h3 { margin-bottom: 18px; }

.own-list { list-style: none; margin: 0; padding: 0; }
.own-list li {
  position: relative; padding-left: 24px; margin-bottom: 11px;
  font-size: 15.5px; line-height: 1.5;
}
.own-col--them .own-list li { color: var(--ink-soft); }
.own-col--us .own-list li { color: #E4D8C9; }
/* Croix côté plateformes, trait côté maison : la différence se lit sans
   avoir à comparer les phrases. */
.own-col--them .own-list li::before {
  content: '×'; position: absolute; left: 0; top: -1px;
  font-family: var(--ff-tick); font-size: 16px; color: var(--ink-soft);
}
.own-col--us .own-list li::before {
  content: ''; position: absolute; left: 2px; top: 11px;
  width: 11px; height: 1px; background: var(--tl);
}
.own-vs {
  align-self: center; font-family: var(--ff-menu); font-size: 24px;
  color: var(--ink-soft);
}

@media (max-width: 880px) {
  .own { grid-template-columns: 1fr; }
  .own-vs { text-align: center; padding: 4px 0; }
}

/* ── Campagnes et résultat ── */
.mkt-run {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 60px); align-items: center;
  margin-top: clamp(48px, 6vw, 84px);
}
.mkt-run--flip .mkt-say { order: 2; }
.mkt-say > p { margin: 0; color: var(--ink-soft); font-size: 16.5px; line-height: 1.65; }
.mkt-say h3 { margin-bottom: 14px; }

.chan { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chan-i {
  border: 1px solid var(--rule); padding: 8px 13px;
  font-family: var(--ff-tick); font-size: 12px; letter-spacing: .04em;
}

.mkt-budget {
  margin-top: 22px !important; padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 14.5px !important; line-height: 1.6;
}

.mkt-shot { margin: 0; }
.mkt-shot img { width: 100%; border: 1px solid var(--rule); }
.mkt-shot figcaption {
  font-family: var(--ff-tick); font-size: 12px; color: var(--ink-soft);
  margin-top: 11px; line-height: 1.5;
}

@media (max-width: 860px) {
  .mkt-run { grid-template-columns: 1fr; }
  .mkt-run--flip .mkt-say { order: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   LANDING MARKETING · /marketing
   ═══════════════════════════════════════════════════════════════════
   Cible : le patron américain qui compte ce qui reste. Le calcul de
   marge est le cœur de la page, tout le reste y mène. */

.mk-hero .hero-bg::after {
  background:
    linear-gradient(to right, rgba(28,14,6,.94) 0%, rgba(28,14,6,.82) 52%, rgba(28,14,6,.45) 100%),
    linear-gradient(to top, rgba(28,14,6,.85) 0%, rgba(28,14,6,0) 60%);
}
.mk-hero .hero-in {
  padding-top: clamp(56px, 8vw, 110px);
  padding-bottom: clamp(56px, 8vw, 110px);
}
.mk-hero h1 { color: var(--chalk); }
.mk-hero h1 em { font-style: normal; color: var(--tl); }
.mk-hero .lead { color: #CDBFAE; }
.mk-hero .lead strong { color: var(--chalk); font-weight: 600; }

/* ── Ce que le client veut vraiment ── */
.want {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 1px; background: var(--rule); margin-top: 46px;
}
.want-i { background: var(--paper); padding: 24px 22px 26px; }
.want-i b { display: block; font-family: var(--ff-menu); font-size: 22px; font-weight: 400; margin-bottom: 8px; }
.want-i span { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
/* Le seul point négatif de la liste porte l'accent : c'est l'erreur la
   plus fréquente et la plus coûteuse. */
.want-i--warn { background: var(--ink); }
.want-i--warn b { color: var(--tl); }
.want-i--warn span { color: #D8CCBD; }

.want-note {
  margin-top: 30px; padding-left: 20px; border-left: 2px solid var(--t);
  font-family: var(--ff-menu); font-size: clamp(19px, 2.3vw, 25px);
  line-height: 1.35; max-width: 30em;
}

/* ── Comparateur de marge ── */
.calc {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 4vw, 48px); margin-top: 46px; align-items: start;
}
.calc-in { border: 1px solid var(--rule); background: var(--paper); padding: 26px 24px; }
.calc-f { display: block; margin-bottom: 20px; }
.calc-f > span {
  display: block; font-family: var(--ff-tick); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 8px;
}
.calc-w { display: flex; align-items: center; border: 1px solid var(--ink); background: var(--paper); }
.calc-w i {
  font-style: normal; font-family: var(--ff-tick); font-size: 15px;
  padding: 0 12px; color: var(--ink-soft);
}
.calc-w input {
  flex: 1; width: 100%; border: 0; background: none; outline: none;
  font-family: var(--ff-tick); font-size: 21px; padding: 12px 12px 12px 0;
  color: var(--ink); -moz-appearance: textfield;
}
.calc-w i + input { padding-left: 0; }
.calc-w input::-webkit-outer-spin-button,
.calc-w input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-hint { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; }

.calc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); }
.calc-c { padding: 24px 22px 26px; background: var(--paper); }
.calc-c--us { background: var(--ink); }
.calc-l {
  font-family: var(--ff-tick); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px;
}
.calc-c--us .calc-l { color: var(--tl); }
.calc-v { font-family: var(--ff-tick); font-size: clamp(30px, 4.4vw, 44px); line-height: 1; }
.calc-c--us .calc-v { color: var(--paper); }
.calc-s { font-size: 13.5px; color: var(--ink-soft); margin-top: 9px; }
.calc-c--us .calc-s { color: #C2B2A0; }

.calc-gap { border: 1px solid var(--rule); border-top: 0; }
.calc-gap-r {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 13px 22px; border-bottom: 1px solid var(--rule);
}
.calc-gap-r:last-child { border-bottom: 0; }
.calc-gap-r span { font-size: 14.5px; color: var(--ink-soft); }
.calc-gap-r b { font-family: var(--ff-tick); font-size: 17px; }
.calc-gap-r--big { background: var(--paper-warm); }
.calc-gap-r--big b { font-size: clamp(22px, 3vw, 30px); color: var(--t); }

.calc-be {
  margin: 18px 0 0; padding: 16px 20px; background: var(--paper);
  border: 1px solid var(--t); font-size: 15px; line-height: 1.55;
}
.calc-foot {
  font-family: var(--ff-tick); font-size: 12.5px; color: var(--ink-soft);
  margin-top: 24px; line-height: 1.7; max-width: 56em;
}

@media (max-width: 900px) {
  .calc { grid-template-columns: 1fr; }
  .calc-cards { grid-template-columns: 1fr; }
  .calc-v { font-size: 34px; }
}

/* ── Ce qu'ils font / ce qu'on fait ── */
.swap { margin-top: 46px; border: 1px solid var(--rule); }
.swap-h, .swap-r { display: grid; grid-template-columns: 1fr 1fr; }
.swap-h {
  background: var(--ink);
  font-family: var(--ff-tick); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.swap-h span { padding: 14px 20px; color: #B9A895; }
.swap-h span:last-child { color: var(--tl); }
.swap-r { border-top: 1px solid var(--rule); }
.swap-r > div { padding: 17px 20px; font-size: 15.5px; line-height: 1.5; }
.swap-r > div:first-child { color: var(--ink-soft); background: var(--paper-warm); }
.swap-r > div:last-child { border-left: 1px solid var(--rule); }

@media (max-width: 760px) {
  .swap-h { display: none; }
  .swap-r { grid-template-columns: 1fr; }
  .swap-r > div:last-child { border-left: 0; border-top: 1px solid var(--rule); }
  /* Sans en-tête, chaque cellule doit dire de quel côté elle parle. */
  .swap-r > div:first-child::before { content: 'Marketplace · '; font-family: var(--ff-tick); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--t); }
  .swap-r > div:last-child::before  { content: 'KOSIOS · ';      font-family: var(--ff-tick); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--t); }
}

/* ═══════════════════════════════════════════════════════════════════
   MULTI-ÉTABLISSEMENTS · /multi-location
   ═══════════════════════════════════════════════════════════════════
   Audience méfiante : elle a déjà vu des vendeurs annoncer le
   multi-sites et livrer trois comptes. Le protocole de test est donc
   l'élément le plus mis en avant de la page. */

.test { list-style: none; margin: 46px 0 0; padding: 0; counter-reset: none; }
.test-i {
  display: grid; grid-template-columns: auto 1fr; gap: 20px;
  padding: 22px 0; border-bottom: 1px solid var(--rule); align-items: start;
}
.test-i:first-child { border-top: 1px solid var(--rule); }
.test-n {
  font-family: var(--ff-tick); font-size: 12px; letter-spacing: .1em;
  color: var(--t); padding-top: 5px; min-width: 26px;
}
.test-i b {
  display: block; font-family: var(--ff-menu); font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 400; line-height: 1.25; margin-bottom: 6px;
}
.test-i span { font-size: 15.5px; color: var(--ink-soft); line-height: 1.6; }

.test-note {
  margin-top: 30px; padding: 20px 22px; background: var(--ink); color: #DACEBF;
  font-size: 16px; line-height: 1.6; max-width: 46em;
}

/* ── Maquette : bascule de succursale ── */
.mock--multi, .mock--menu2 { padding: 16px; }
.mock-branch {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border: 1px solid var(--rule); margin-bottom: 7px;
}
.mock-branch i { width: 7px; height: 7px; border-radius: 50%; background: #16A34A; flex: none; }
.mock-branch span { flex: 1; font-size: 14.5px; }
.mock-branch em {
  font-style: normal; font-family: var(--ff-tick); font-size: 11px; color: var(--ink-soft);
}
.mock-branch.pick { border-color: var(--t); background: rgba(193,68,14,.06); }
.mock-branch:last-of-type i { background: var(--rule); }

.mock-sub { border: 1px solid var(--rule); border-top: 0; margin-top: 8px; }
.mock-sub-r {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-bottom: 1px solid var(--rule); font-size: 13.5px;
}
.mock-sub-r:last-child { border-bottom: 0; }
.mock-sub-r span { color: var(--ink-soft); }
.mock-sub-r b { font-family: var(--ff-tick); font-weight: 400; }
/* La mention de portée : c'est elle qui prouve qu'on n'édite qu'une adresse. */
.mock-scope {
  margin-top: 10px; background: var(--t); color: var(--paper);
  font-family: var(--ff-tick); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; padding: 9px 12px; text-align: center;
}

/* ── Maquette : un plat, trois vérités locales ── */
.mock-ov {
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px; border: 1px solid var(--rule); margin-bottom: 7px;
}
.mock-ov span { flex: 1; font-size: 14.5px; }
.mock-ov b { font-family: var(--ff-tick); font-size: 16px; font-weight: 400; }
.mock-ov em {
  font-style: normal; font-family: var(--ff-tick); font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--t);
  min-width: 92px; text-align: right;
}
.mock-ov.out span, .mock-ov.out b { color: var(--rule); text-decoration: line-through; }
.mock-ov.out em { color: var(--ink-soft); }
.mock-note {
  font-family: var(--ff-tick); font-size: 11.5px; color: var(--ink-soft);
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--rule);
  line-height: 1.5;
}

/* ── Tarif groupe ── */
.grp {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px; background: rgba(250,246,239,.22); margin-top: 42px;
  border: 1px solid rgba(250,246,239,.22);
}
.grp-i { background: var(--dark); padding: 24px 22px; }
.grp-i b {
  display: block; font-family: var(--ff-menu); font-size: 21px; font-weight: 400;
  color: var(--chalk); margin-bottom: 9px;
}
.grp-i span { font-size: 15px; line-height: 1.6; color: #C2B2A0; }

/* ── Bloc multi-établissements sur la home ── */
.multi { background: var(--paper-warm); }
.multi-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(28px, 5vw, 60px); align-items: center;
}
.multi-in h2 em { font-style: normal; color: var(--t); }
.multi-pts { list-style: none; margin: 0; padding: 0; }
.multi-pts li {
  position: relative; padding: 12px 0 12px 26px;
  border-bottom: 1px solid var(--rule); font-size: 15.5px;
}
.multi-pts li:first-child { border-top: 1px solid var(--rule); }
.multi-pts li::before {
  content: ''; position: absolute; left: 0; top: 21px;
  width: 11px; height: 1px; background: var(--t);
}
@media (max-width: 860px) { .multi-in { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════
   PAGE RÉCEPTIONNISTE · l'orbe
   ═══════════════════════════════════════════════════════════════════
   Toute la page tient sur un geste : appuyer et entendre. L'orbe est
   donc au centre du hero, pas illustré en marge. */

.orb-page {
  background: var(--dark-deep); color: var(--chalk);
  padding: clamp(50px, 7vw, 90px) 0 clamp(56px, 7vw, 96px);
  text-align: center;
  /* Halo tiède derrière l'orbe, dans la terracotta de la charte. */
  background-image: radial-gradient(circle at 50% 62%, rgba(193,68,14,.22) 0%, rgba(28,14,6,0) 58%);
}
.orb-in { max-width: 720px; }
.orb-page .eyebrow { justify-content: center; color: var(--chalk-soft); }
.orb-page h1 { color: var(--chalk); }
.orb-page h1 em { font-style: normal; color: var(--tl); }
.orb-page .lead { color: #CDBFAE; margin: 20px auto 0; max-width: 34em; }

.orb-stage { margin: clamp(38px, 5vw, 58px) 0 0; }
.orb-wrap { position: relative; width: 190px; height: 190px; margin: 0 auto; }

.orb-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(212,103,58,.4); opacity: 0;
}
.orb-wrap[data-state="listening"] .orb-ring,
.orb-wrap[data-state="speaking"] .orb-ring { animation: ripple 2.6s ease-out infinite; }
.orb-ring:nth-child(2) { animation-delay: .85s !important; }
.orb-ring:nth-child(3) { animation-delay: 1.7s !important; }
@keyframes ripple {
  0%   { transform: scale(1);    opacity: .55; }
  100% { transform: scale(1.85); opacity: 0; }
}

.orb-btn {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(circle at 36% 32%, #D4673A, #8b3010 70%);
  color: var(--paper);
  font-family: var(--ff-tick); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; line-height: 1.5;
  box-shadow: 0 18px 46px rgba(0,0,0,.5), inset 0 -8px 22px rgba(0,0,0,.25);
  transition: transform .2s ease, background .3s ease;
}
.orb-btn:hover { transform: scale(1.03); }
.orb-wrap[data-state="connecting"] .orb-btn { background: radial-gradient(circle at 36% 32%, #8a6a55, #4a382c 70%); }
.orb-wrap[data-state="speaking"] .orb-btn { background: radial-gradient(circle at 36% 32%, #E8834F, #A8341F 70%); }

.orb-status {
  font-family: var(--ff-tick); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--chalk-soft);
  margin: 26px 0 0; min-height: 2.6em; line-height: 1.5;
  padding: 0 16px;
}

.orb-wave {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  height: 34px; margin-top: 6px; opacity: 0; transition: opacity .3s ease;
}
.orb-wave.on { opacity: 1; }
.orb-wave span {
  width: 3px; height: 5px; background: var(--tl);
  animation: bar 1s ease-in-out infinite;
}
@keyframes bar { 0%, 100% { height: 5px } 50% { height: 26px } }

.orb-note {
  font-family: var(--ff-tick); font-size: 12px; color: var(--chalk-soft);
  margin: 30px auto 0; max-width: 34em; line-height: 1.65;
}

/* ═══ PAGE TARIFS ══════════════════════════════════════════════════ */

.incl { border: 1px solid var(--rule); margin-top: 44px; }
.incl-h { padding: 24px; border-bottom: 1px solid var(--rule); background: var(--paper-warm); }
.incl-h b { display: block; font-family: var(--ff-menu); font-size: 24px; font-weight: 400; margin-bottom: 6px; }
.incl-h span { font-size: 15px; color: var(--ink-soft); }
.incl-l {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.incl-l li {
  position: relative; padding: 15px 20px 15px 44px;
  border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule);
  font-size: 15.5px;
}
.incl-l li::before {
  content: ''; position: absolute; left: 20px; top: 22px;
  width: 12px; height: 1px; background: var(--t);
}

.never { display: grid; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); gap: 1px; background: var(--rule); margin-top: 44px; }
.never-i { background: var(--paper); padding: 24px 22px 26px; }
.never-i b { display: block; font-family: var(--ff-menu); font-size: 21px; font-weight: 400; margin-bottom: 8px; }
.never-i span { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.never-i a { color: var(--t); }

/* ═══ NAVIGATION À SEPT ENTRÉES ════════════════════════════════════
   Le menu devient long : on resserre, puis on bascule sur le tiroir
   plus tôt qu'avant plutôt que de laisser les liens se chevaucher. */
@media (max-width: 1240px) { .nav-links { gap: 16px; } .nav-links a { font-size: 11px; } }
@media (max-width: 1120px) { .nav .nav-cta { display: none; } }
@media (max-width: 1020px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }
}

/* ═══ BLOG ═════════════════════════════════════════════════════════ */

.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1px; background: var(--rule); margin-top: 44px; }
.post-c {
  background: var(--paper); padding: 26px 24px 24px; text-decoration: none;
  display: flex; flex-direction: column; gap: 10px; min-height: 230px;
}
.post-c:hover { background: var(--paper-warm); }
.post-c-k { font-family: var(--ff-tick); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--t); }
.post-c b { font-family: var(--ff-menu); font-size: 25px; font-weight: 400; line-height: 1.18; }
.post-c-x { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.post-c-d { margin-top: auto; font-family: var(--ff-tick); font-size: 11px; color: var(--ink-soft); }

.post { max-width: 46em; }
.post-x { margin-top: 20px; padding-bottom: 26px; border-bottom: 1px solid var(--rule); }
.post-b { margin-top: 30px; }
.post-b p { font-size: 17.5px; line-height: 1.75; margin: 0 0 22px; }
.post-b h2 { margin: 38px 0 14px; }
.post-l { margin: 0 0 24px; padding: 0; list-style: none; }
.post-l li {
  position: relative; padding-left: 24px; margin-bottom: 11px;
  font-size: 17px; line-height: 1.65;
}
.post-l li::before { content: ''; position: absolute; left: 0; top: 14px; width: 12px; height: 1px; background: var(--t); }

.post-cta { margin-top: 44px; padding: 26px 24px; background: var(--paper-warm); border: 1px solid var(--rule); }
.post-cta p { margin: 0 0 20px; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }

/* ── Barre de navigation : corrections de tenue ────────────────────
   Sept entrées, un sélecteur de marché et un bouton : plus aucune
   marge d'erreur. Le libellé du bouton ne doit jamais se casser, et
   la marque ne doit jamais pousser les liens hors de leur place. */
.btn { white-space: nowrap; }
.nav-logo { flex: none; }
.nav-links { flex: 1 1 auto; justify-content: center; min-width: 0; }
.nav .market { flex: none; }

/* Le sur-titre de marque n'apparaît que là où il reste vraiment de la
   place, c'est-à-dire nulle part dans la nav actuelle : il est servi
   par le pied de page. Règle conservée si la nav raccourcit un jour. */
.nav-logo span { display: none; }

/* Titre de hero long : cinq lignes au lieu de trois, donc un corps un
   cran plus bas et un interlignage resserré, sinon le premier écran ne
   contient plus que le titre. */
.h1--long { font-size: clamp(36px, 5.6vw, 70px); line-height: .96; }

/* ── Trois adresses, trois réalités ─────────────────────────────── */
.branches {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 22px; margin-top: 46px;
}
.branch { margin: 0; }
.branch img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--rule); }
.branch figcaption { padding-top: 13px; }
.branch b {
  display: block; font-family: var(--ff-tick); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--t);
  margin-bottom: 6px;
}
.branch span { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

.localgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
  gap: 1px; background: var(--rule); margin-top: 46px;
}
.localgrid-i { background: var(--paper); padding: 22px 20px 24px; }
.localgrid-i b { display: block; font-family: var(--ff-menu); font-size: 22px; font-weight: 400; margin-bottom: 7px; }
.localgrid-i span { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }

/* ── Bebas Neue : où elle s'arrête ────────────────────────────────
   Bebas n'existe qu'en capitales. Elle porte bien les titres et les
   étiquettes courtes, mais une phrase entière en capitales devient
   illisible. Tout ce qui se lit comme une phrase repasse donc en
   Inter Tight, en casse mixte. */
.qa-q,               /* questions de la FAQ */
.post-c b,           /* titres d'articles dans les cartes */
.hero2-line,         /* légendes des deux plans du hero */
.want-note,          /* la phrase encadrée de la page marketing */
.test-i b,           /* les cinq requêtes du protocole multi-sites */
.mock-head b,        /* intitulés dans les maquettes */
.localgrid-i b,      /* réglages locaux */
.never-i b,          /* ce qui n'est jamais facturé */
.want-i b,           /* ce que veut le client */
.grp-i b {           /* forfait groupe */
  font-family: var(--ff-body);
  font-weight: 600;
  letter-spacing: -.01em;
}
.qa-q { font-size: clamp(17px, 1.9vw, 20px); line-height: 1.4; }
.post-c b { font-size: 19px; line-height: 1.3; }
.hero2-line { font-size: clamp(16px, 1.9vw, 21px); line-height: 1.35; }
.want-note { font-size: clamp(18px, 2.1vw, 23px); line-height: 1.45; }
.test-i b { font-size: clamp(18px, 2vw, 21px); line-height: 1.35; }
.want-i b, .never-i b, .localgrid-i b, .grp-i b, .mock-head b { font-size: 17px; }

/* La marque dans la nav : Bebas serrée, à la bonne hauteur optique. */
.nav-logo b { font-size: 29px; letter-spacing: .02em; line-height: 1; }

/* ── Le prix du produit, au-dessus de l'option ────────────────────
   Le socle plateforme doit se lire avant le tableau des minutes :
   c'est ce que le client achète, le téléphone n'est qu'un ajout. */
.plat {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 4vw, 48px); align-items: center;
  margin-top: 46px; padding: 30px 28px;
  border: 1px solid rgba(250,246,239,.2);
  background: rgba(250,246,239,.045);
}
.plat-k {
  font-family: var(--ff-tick); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--chalk-soft); margin-bottom: 12px;
}
.plat-p { font-family: var(--ff-tick); font-size: clamp(38px, 5.4vw, 58px); line-height: 1; color: var(--tl); }
.plat-p em { font-style: normal; font-size: 17px; color: var(--chalk-soft); margin-left: 4px; }
.plat-t { font-family: var(--ff-tick); font-size: 11.5px; color: var(--chalk-soft); margin-top: 10px; }
.plat-r p { margin: 0; font-size: 16.5px; line-height: 1.65; color: #D5C7B6; }
.plat-n {
  margin-top: 14px !important; padding-top: 14px;
  border-top: 1px solid rgba(250,246,239,.16);
  font-size: 14.5px !important; color: var(--chalk-soft) !important;
}
@media (max-width: 780px) { .plat { grid-template-columns: 1fr; } }

/* ── L'agent vocal vendu seul ─────────────────────────────────────
   Présenté en dernier et sans emphase : c'est le cas qu'on ne cherche
   pas à vendre, et le prix le dit tout seul. */
.alone {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: clamp(22px, 4vw, 44px); align-items: center;
  margin-top: 26px; padding: 26px 24px;
  border: 1px dashed rgba(250,246,239,.26);
}
.alone-k {
  font-family: var(--ff-tick); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--chalk-soft); margin-bottom: 12px;
}
.alone-l p { margin: 0; font-size: 15.5px; line-height: 1.65; color: #C8B9A8; }
.alone-n { margin-top: 12px !important; font-size: 13.5px !important; color: var(--chalk-soft) !important; }
.alone-r { text-align: right; }
.alone-p { font-family: var(--ff-tick); font-size: clamp(30px, 4vw, 42px); line-height: 1; color: var(--chalk); }
.alone-p em { font-style: normal; font-size: 15px; color: var(--chalk-soft); margin-left: 3px; }
.alone-t { font-family: var(--ff-tick); font-size: 11.5px; color: var(--chalk-soft); margin-top: 8px; }
@media (max-width: 780px) { .alone { grid-template-columns: 1fr; } .alone-r { text-align: left; } }

/* ── Les trois façons d'acheter, sur la home ──────────────────────
   Le produit d'abord, l'option ensuite, le cas marginal en dernier et
   visiblement en retrait. La hiérarchie visuelle porte l'argument. */
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 1px; background: rgba(250,246,239,.2); margin-top: 40px; }
.way { background: var(--dark-deep); padding: 26px 22px 28px; }
.way--muted { opacity: .62; }
.way-k { font-family: var(--ff-tick); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--chalk-soft); margin-bottom: 14px; }
.way-p { font-family: var(--ff-tick); font-size: clamp(30px, 3.6vw, 40px); line-height: 1; color: var(--tl); }
.way--muted .way-p { color: var(--chalk); }
.way-p em { font-style: normal; font-size: 14px; color: var(--chalk-soft); margin-left: 3px; }
.way-d { font-size: 14.5px; line-height: 1.6; color: #C8B9A8; margin-top: 13px; }