/* Fiches cold call — la DA de sales-on.fr : page navy, cartes blanches plates, un accent orange.
   Une fiche tient sur un écran, sans scroll : la grille se cale sur 100vh et les corps de texte
   se mesurent en vw/vh pour suivre la taille du second écran. */

:root {
  --navy: #050D18;
  --card-dark: #0A1728;
  --paper: #F8F8F6;
  --ink: #0F1B29;
  --slate: #42526C;
  --ash: #57626F;
  --cloud: #C7D1DB;
  --blue-300: #7FA5C9;
  --orange: #FF8A00;
  --orange-600: #D96E00;
  --orange-700: #9E5000;
  --hair: rgba(15, 27, 41, .1);
  --f-display: "Geist", ui-sans-serif, system-ui, sans-serif;
  --f-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --fs: clamp(12px, 0.42vw + 0.42vh, 17px);   /* corps : 12,6 px en 1080p, 16,8 px en 1440p */
  --gap: clamp(10px, 0.9vw, 22px);
  --pad: clamp(12px, 0.9vw, 24px);
  --r: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--navy);
  color: var(--paper);
  font: 400 var(--fs)/1.42 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
b, strong { font-weight: 600; }
q, .q { quotes: "« " " »"; }

/* ---- étiquettes mono : un tiret orange, des capitales ---- */
.lab {
  display: flex; align-items: center; gap: .6em;
  font: 500 .72em/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-300);
}
.lab::before { content: ""; width: 1.6em; height: 2px; border-radius: 1px; background: var(--orange); flex: none; }
.lab small { color: var(--cloud); opacity: .6; letter-spacing: .08em; margin-left: auto; text-transform: none; }

/* ---- cartes ---- */
.card {
  background: #fff; color: var(--ink);
  border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(15, 27, 41, .04), inset 0 0 0 1px rgba(15, 27, 41, .08);
  padding: var(--pad);
  min-height: 0; min-width: 0; overflow: hidden;
}
.card.dark {
  background: var(--card-dark); color: var(--paper);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.card.featured { box-shadow: 0 1px 2px rgba(15, 27, 41, .04), inset 0 0 0 1.5px rgba(255, 138, 0, .75); }
.card h2, .card h3 { font-family: var(--f-display); letter-spacing: -.02em; line-height: 1.15; margin: 0; }
.card p { margin: 0; color: var(--slate); }
.card.dark p { color: rgba(199, 209, 219, .9); }
.card p + p { margin-top: .45em; }
.card b { color: var(--ink); }
.card.dark b { color: var(--paper); }

/* ======================================================================
   INDEX — la liste des fiches
   ====================================================================== */
.index { min-height: 100%; padding: clamp(28px, 4vh, 64px) clamp(20px, 5vw, 96px); max-width: 1320px; margin: 0 auto; }
.index .brand { display: flex; align-items: center; gap: .6em; font: 800 1.15em var(--f-display); letter-spacing: -.03em; }
.index .brand i { width: .9em; height: .9em; border-radius: 3px; background: var(--orange); display: inline-block; }
.index h1 { font: 800 clamp(28px, 3.2vw, 44px)/1.05 var(--f-display); letter-spacing: -.035em; margin: .8em 0 .3em; }
.index h1 small { display: block; font-size: .42em; font-weight: 600; letter-spacing: -.01em; color: var(--orange); margin-top: .5em; }
.index .sub { color: rgba(199, 209, 219, .85); max-width: 60ch; margin: 0 0 2.2em; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--gap); }
.tile {
  display: flex; flex-direction: column; gap: .7em;
  transition: transform .25s ease, box-shadow .25s ease;
}
.tile:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(15, 27, 41, .05), 0 14px 28px -22px rgba(15, 27, 41, .5), inset 0 0 0 1px rgba(15, 27, 41, .14); }
.tile .idx { font: 600 .72em var(--f-mono); letter-spacing: .12em; color: var(--orange-600); }
.tile h2 { font-size: 1.35em; }
.tile h2 small { display: block; font-size: .7em; font-weight: 600; color: var(--orange-600); letter-spacing: -.01em; margin-top: .25em; }
/* une fiche = une offre × une cible (entreprise + persona), interne (SalesOn) ou externe (un client) */
.tile .meta { display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.tile .pour { font: 600 .68em/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; padding: .5em .75em; border-radius: 999px; background: #F2F5F8; color: var(--slate); }
.tile .pour.interne { background: #FFE4C4; color: var(--orange-700); }
.tile .pour.externe { background: #E3EDF7; color: #2F5A86; }
.tile dl { display: grid; grid-template-columns: auto 1fr; gap: .4em 1em; align-items: baseline; margin: auto 0 0; padding-top: .75em; border-top: 1px solid var(--hair); }
.tile dt { font: 500 .72em/1.5 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ash); }
.tile dd { margin: 0; font-weight: 500; color: var(--ink); }

/* ======================================================================
   FICHE — deux écrans, dans l'ordre de l'appel.
   1. Le pitch, seul, en grand.   espace / → : l'écran d'appel.
   2. Objections (accès rapide) · qualification, rendez-vous, preuves, sortie.   ⌫ / ← : le pitch.
   La page ne défile jamais ; chaque colonne défile pour elle-même.
   ====================================================================== */
.ecran { height: 100vh; height: 100dvh; overflow: hidden; display: grid; }
.ecran[hidden] { display: none; }
.colonne {
  position: relative; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(24px, 2.6vh, 44px) clamp(10px, .8vw, 20px) clamp(60px, 9vh, 120px) 0;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
.colonne::-webkit-scrollbar { width: 6px; }
.colonne::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 3px; }
.colonne > h2, .entete h2 {
  font: 500 clamp(11px, .7vw, 15px)/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue-300); margin: 0 0 1.6em;
}
.colonne h2.suite { margin-top: clamp(36px, 5vh, 80px); }

/* les deux boutons de passage : discrets, toujours au même endroit */
.nav {
  position: fixed; z-index: 5; bottom: clamp(16px, 2.2vh, 32px); right: clamp(24px, 2.4vw, 64px);
  display: flex; align-items: baseline; gap: .7em;
  font: 500 clamp(13px, .85vw + .15vh, 20px)/1 var(--f-body); color: var(--cloud);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .13); border-radius: 999px;
  padding: .7em 1.1em; cursor: pointer; transition: background .15s, color .15s;
}
.nav:hover { background: rgba(255, 255, 255, .12); color: var(--paper); }
.nav small { font: 500 .72em var(--f-mono); letter-spacing: .1em; color: var(--blue-300); }
.nav.retour { position: static; padding: .45em .85em; }
.entete .ligne { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 1.1em; }
.entete .ligne h2 { margin: 0; }

/* ---- écran 1 : le pitch ---- */
.ecran-pitch { grid-template-columns: minmax(0, 1fr); padding: 0 clamp(40px, 7vw, 180px); justify-items: start; align-items: center; }
.ecran-pitch .colonne { width: 100%; max-width: 1260px; max-height: 100%; padding-top: clamp(70px, 9vh, 120px); }
.pitch[hidden] { display: none; }
.variantes { position: fixed; z-index: 5; top: clamp(14px, 2vh, 28px); right: clamp(24px, 2.4vw, 64px); display: flex; gap: .4em; }
.variantes button {
  font: 500 clamp(12px, .78vw + .15vh, 18px)/1 var(--f-body); color: var(--cloud);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .13); border-radius: 999px;
  padding: .55em .9em; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.variantes button:hover { background: rgba(255, 255, 255, .11); color: var(--paper); }
.variantes button[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--navy); }
.pitch p { font: 500 clamp(20px, 1.35vw + .4vh, 40px)/1.4 var(--f-body); color: var(--paper); margin: 0 0 .8em; text-wrap: pretty; }
.pitch p.aparte { color: var(--cloud); opacity: .72; font-weight: 400; font-size: clamp(16px, 1vw + .3vh, 29px); }
.pitch p.question { color: var(--orange); }
.ecran-pitch .dire p { font: 400 clamp(17px, 1.15vw + .3vh, 30px)/1.42 var(--f-body); }

/* ---- écran 2 : l'appel ---- */
.ecran-appel { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: clamp(28px, 2.8vw, 72px); padding: 0 clamp(28px, 2.4vw, 64px); }
.dire p { font: 400 clamp(16px, 1.08vw + .25vh, 27px)/1.42 var(--f-body); color: rgba(248, 248, 246, .9); margin: 0 0 .9em; }
.dire p b { color: var(--paper); font-weight: 600; }

/* objections : le titre et la barre d'accès rapide restent collés en haut de leur colonne */
.colonne.avec-entete { padding-top: 0; }
.bloc { margin-bottom: clamp(36px, 5vh, 80px); }
.bloc > h2 { font: 500 clamp(11px, .7vw, 15px)/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--blue-300); margin: 0 0 1.6em; }
.entete { position: sticky; top: 0; z-index: 2; background: var(--navy); padding: clamp(24px, 2.6vh, 44px) 0 .7em; margin-bottom: 1.1em; }
.entete:not(:has(.ligne)) { padding-bottom: .9em; }
.entete::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; background: linear-gradient(var(--navy), transparent); pointer-events: none; }
.acces { display: flex; flex-wrap: wrap; gap: .45em .5em; }
.acces button {
  font: 500 clamp(12px, .78vw + .15vh, 18px)/1 var(--f-body); color: var(--cloud);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .13); border-radius: 999px;
  padding: .5em .85em; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.acces button:hover { background: rgba(255, 255, 255, .11); color: var(--paper); }
.acces button[aria-current="true"] { background: var(--orange); border-color: var(--orange); color: var(--navy); }
.obj { padding-top: .75em; border-top: 1px solid rgba(255, 255, 255, .13); margin-bottom: clamp(16px, 2.4vh, 40px); transition: none; border-radius: 6px; }
.obj.vise { background: rgba(255, 138, 0, .12); box-shadow: 0 0 0 10px rgba(255, 138, 0, .12); }
.obj h3 { font: 700 clamp(17px, 1.18vw + .25vh, 30px)/1.25 var(--f-display); letter-spacing: -.02em; color: var(--paper); margin: 0 0 .4em; }
.obj p { font: 400 clamp(16px, 1.08vw + .25vh, 27px)/1.42 var(--f-body); color: rgba(248, 248, 246, .9); margin: 0 0 .45em; }
.obj p .k { display: inline-block; min-width: 2.3em; font: 500 .66em/1 var(--f-mono); letter-spacing: .12em; color: var(--blue-300); vertical-align: .18em; }
.obj p.c { color: var(--paper); }
.obj p.c .k { color: var(--orange); }

/* rendez-vous */
.date .q { font: 800 clamp(24px, 1.95vw + .4vh, 52px)/1.15 var(--f-display); letter-spacing: -.03em; color: var(--orange); margin: 0 0 .5em; text-wrap: balance; }

/* ---- écrans étroits (tablette, téléphone) : la page défile, les colonnes se suivent, chaque barre
   d'accès rapide reste collée en haut de l'écran tant que sa colonne est visible ---- */
@media (max-width: 1200px) {
  .ecran { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; grid-template-columns: minmax(0, 1fr); }
  .colonne { overflow: visible; overscroll-behavior: auto; min-width: 0; }
}
@media (max-width: 900px) {
  .ecran-pitch { padding: 0 16px; align-items: start; grid-template-rows: auto 1fr; }
  .ecran-pitch .colonne { max-height: none; padding: 8px 0 clamp(80px, 14vh, 120px); }
  .variantes { position: static; flex-wrap: wrap; padding: 14px 0 0; }
  .variantes button, .acces button { padding: .65em .95em; font-size: 13px; }
  .nav { bottom: max(14px, env(safe-area-inset-bottom)); right: 14px; padding: .8em 1.15em; }
  .nav small { display: none; }
  .nav.retour { padding: .55em .9em; }
  .ecran-appel { padding: 0 16px; gap: 0; }
  .colonne { padding-right: 0; }
  .entete { padding-top: 12px; }
  /* vingt puces en colonne, ça mangerait l'écran : deux rangées qui défilent de côté */
  .objections .acces { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; justify-content: start; max-width: 100%; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .objections .acces::-webkit-scrollbar { display: none; }
  .objections .acces button { white-space: nowrap; }
  .obj.vise { box-shadow: 0 0 0 8px rgba(255, 138, 0, .12); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }