/* ============================================================
   PatronIA — Design System v2 "Cabinet moderne"
   Papier + encre + vert profond (accent unique).
   Theme lock : light. Les surfaces vertes sont systématiques
   (autorité, preuve, CTA), jamais décoratives.
   ============================================================ */

:root {
  /* Papier */
  --paper:       #FAF9F6;
  --paper-alt:   #FFFFFF;
  --paper-sunk:  #F2F1EC;

  /* Encre */
  --ink:         #0F1211;
  --ink-soft:    #4A514E;
  --ink-mute:    #7C8481;
  --line:        #E2E0D9;
  --line-soft:   #EDEBE4;

  /* Accent unique : vert profond (famille chromatique complète) */
  --forest:      #0E2E25;
  --forest-deep: #0A2019;
  --forest-up:   #163C31;
  --forest-line: #2A4F43;
  --forest-lift: #5FB596;
  --forest-wash: rgba(14, 46, 37, 0.07);

  /* Formes — échelle documentée : boutons 6, cartes 8, inputs 6 */
  --r-btn:   6px;
  --r-card:  8px;
  --r-input: 6px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

/* ---------- Base ---------- */

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--forest); color: var(--paper); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
  border-radius: 3px;
}

.tabular { font-variant-numeric: tabular-nums; }
.balance { text-wrap: balance; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------- Typographie ---------- */

.display {
  letter-spacing: -0.038em;
  line-height: 1.015;
  font-weight: 600;
}
.display-sm {
  letter-spacing: -0.03em;
  line-height: 1.07;
  font-weight: 600;
}
.label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
}
.num {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  font-weight: 500;
}
.prose-lead { font-size: 1.125rem; line-height: 1.65; color: var(--ink-soft); max-width: 62ch; }
.prose-body { font-size: 1rem; line-height: 1.7; color: var(--ink-soft); max-width: 68ch; }

/* ---------- Logo ----------
   Monogramme sur grille stricte : contreforme rectangulaire (système,
   pas décoration) et hampe descendante pour casser le carré. */

.logo { display: inline-flex; align-items: center; gap: 9px; }
.logo-badge {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 6px;
  background: var(--forest);
  color: var(--paper);
  flex: none;
}
.logo-badge svg { width: 19px; height: 19px; }
.logo-badge.on-dark { background: var(--paper); color: var(--forest); }

.logo-word {
  font-size: 16px;
  letter-spacing: -0.028em;
  font-weight: 500;
  white-space: nowrap;
}
.logo-word b { font-weight: 700; }

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: var(--r-btn);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  padding: 15px 26px;
  white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .26s var(--ease),
              background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn svg { transition: transform .22s var(--ease); flex: none; }
.btn:hover svg.arr { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(0.993); }

.btn-primary {
  background: var(--forest);
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(15,18,17,.14), 0 10px 26px -14px rgba(14,46,37,.72);
}
.btn-primary:hover {
  background: var(--forest-deep);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(15,18,17,.16), 0 16px 34px -14px rgba(14,46,37,.8);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-outline:hover { border-color: var(--ink); transform: translateY(-1px); }

.btn-paper {
  background: var(--paper);
  color: var(--forest);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.btn-paper:hover { background: #FFFFFF; transform: translateY(-1px); }

.btn-on-dark {
  background: rgba(255,255,255,.07);
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,.2);
}
.btn-on-dark:hover { background: rgba(255,255,255,.13); transform: translateY(-1px); }

.btn-lg { padding: 18px 32px; font-size: 16px; }
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-block { width: 100%; }

/* ---------- Surfaces ---------- */

.card {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.card-sunk {
  background: var(--paper-sunk);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
}
.card-forest {
  background: var(--forest);
  color: #FFFFFF;
  border-radius: var(--r-card);
}
.card-forest-up {
  background: var(--forest-up);
  border: 1px solid var(--forest-line);
  border-radius: var(--r-card);
}
.card-lift { transition: transform .24s var(--ease), box-shadow .3s var(--ease), border-color .24s ease; }
.card-lift:hover {
  transform: translateY(-2px);
  border-color: #D3D0C6;
  box-shadow: 0 20px 44px -26px rgba(15,18,17,.3);
}

/* Système de hairlines — la structure des documents sérieux */
.hair    { border-top: 1px solid var(--line); }
.hair-b  { border-bottom: 1px solid var(--line); }
.hair-y  { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hair-dk { border-top: 1px solid var(--forest-line); }
.divide-hair > * + * { border-top: 1px solid var(--line); }
.divide-hair-dk > * + * { border-top: 1px solid var(--forest-line); }

/* ---------- Badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 6px 13px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.badge-forest { background: var(--forest-wash); color: var(--forest); }
.badge-solid  { background: var(--forest); color: #fff; }
.badge-mute   { background: rgba(15,18,17,.05); color: var(--ink-soft); }
.badge-on-dark{ background: rgba(95,181,150,.14); color: var(--forest-lift); }

/* ---------- Grilles : autoriser les cellules à rétrécir ----------
   Une cellule de grille vaut `min-width: auto` par défaut : elle refuse de
   descendre sous la largeur de son contenu, même quand la grille, elle, est
   plus étroite. Un bloc un peu large suffit alors à faire déborder la page
   entière. Mesuré sur l'accueil à 375 px : 417 px de large, donc un
   défilement horizontal sur tous les téléphones. */

.grid > * { min-width: 0; }

/* ---------- Bloc prompt (preuve produit) ---------- */

.prompt {
  background: var(--forest-deep);
  border-radius: var(--r-card);
  border: 1px solid var(--forest-line);
  overflow: hidden;
}
.prompt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Sans ce retour à la ligne, le libellé et le bouton « Copier » exigent
     390 px côte à côte. L'en-tête impose alors sa largeur au bloc, puis à
     la cellule de grille, et toute la page déborde de 42 px sur un écran
     de 375 px. Le bouton passe dessous plutôt que d'élargir la page. */
  flex-wrap: wrap;
  gap: 10px;
  padding: 11px 15px;
  background: rgba(255,255,255,.035);
  border-bottom: 1px solid var(--forest-line);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--forest-lift);
}
.prompt-body {
  padding: 18px 16px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.75;
  color: #BFCFC8;
  white-space: pre-wrap;
  overflow-x: auto;
}
.prompt-body .v { color: var(--forest-lift); }
.prompt-body .h { color: #E8E4D8; font-weight: 500; }
.prompt-body .c { color: #6E8279; }

/* ---------- Mockup du manuel ---------- */

.manual {
  position: relative;
  background:
    radial-gradient(120% 90% at 18% 6%, #1B4A3C 0%, transparent 55%),
    linear-gradient(165deg, #123328 0%, #0C241C 58%, #081A14 100%);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow:
    0 2px 6px rgba(15,18,17,.16),
    0 36px 80px -34px rgba(10,32,25,.7);
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 11% 10%;
  isolation: isolate;
  container-type: inline-size;
}
.manual::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -40deg, rgba(255,255,255,.028) 0 1px, transparent 1px 26px);
  pointer-events: none;
  z-index: -1;
}
.manual-mark {
  width: 46px; height: 46px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 3px;
  display: grid; place-items: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 15px;
  color: #fff;
}
.manual-tilt {
  transform: perspective(1600px) rotateY(-11deg) rotateX(3deg) rotateZ(-0.8deg);
  transition: transform .7s var(--ease);
}
.manual-tilt:hover {
  transform: perspective(1600px) rotateY(-5deg) rotateX(1.5deg) rotateZ(-0.3deg);
}
@media (prefers-reduced-motion: reduce) {
  .manual-tilt, .manual-tilt:hover { transform: none; transition: none; }
}

/* Aperçu de page intérieure */
.page-preview {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 22px 50px -30px rgba(15,18,17,.38);
}
.page-preview-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- Rail (modules) ---------- */

.rail-item { position: relative; padding-left: 60px; }
.rail-item::before {
  content: "";
  position: absolute;
  left: 17px; top: 40px; bottom: -44px;
  width: 1px;
  background: var(--line);
}
.rail-item:last-child::before { display: none; }
.rail-num {
  position: absolute;
  left: 0; top: 0;
  width: 35px; height: 35px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 500;
}
.rail-num.is-key { background: var(--forest); border-color: var(--forest); color: #fff; }

.rail-dark .rail-item::before { background: var(--forest-line); }
.rail-dark .rail-num {
  background: rgba(255,255,255,.06);
  border-color: var(--forest-line);
  color: #fff;
}
.rail-dark .rail-num.is-key { background: var(--forest-lift); border-color: var(--forest-lift); color: var(--forest-deep); }

/* ---------- FAQ ---------- */

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.faq-sign { transition: transform .32s var(--ease), background-color .2s ease, color .2s ease; }
details[open] .faq-sign {
  transform: rotate(45deg);
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
}

/* ---------- Calculateur ROI ---------- */

input[type="range"].roi {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: var(--line);
  outline: none;
}
input[type="range"].roi::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--forest);
  border: 3px solid var(--paper-alt);
  box-shadow: 0 2px 10px rgba(14,46,37,.4);
  cursor: pointer;
}
input[type="range"].roi::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--forest);
  border: 3px solid var(--paper-alt);
  box-shadow: 0 2px 10px rgba(14,46,37,.4);
  cursor: pointer;
}

/* ---------- Motion ---------- */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Sticky CTA mobile ---------- */

.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  background: var(--forest);
  border-top: 1px solid var(--forest-line);
  transform: translateY(115%);
  transition: transform .35s var(--ease);
}
.sticky-bar.on { transform: translateY(0); }
@media (min-width: 768px) { .sticky-bar { display: none; } }

/* ---------- Divers ---------- */

.link-u {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color .18s ease;
}
.link-u:hover { color: var(--forest); }

.nav-link { color: var(--ink-soft); transition: color .18s ease; }
.nav-link:hover { color: var(--ink); }

.pulse-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--forest-lift);
}
@media (prefers-reduced-motion: no-preference) {
  .pulse-dot { animation: pd 2.6s ease-out infinite; }
  @keyframes pd {
    0%   { box-shadow: 0 0 0 0 rgba(95,181,150,.5); }
    70%  { box-shadow: 0 0 0 9px rgba(95,181,150,0); }
    100% { box-shadow: 0 0 0 0 rgba(95,181,150,0); }
  }
}


/* ---------- Panier (tiroir) ----------
   Même matière que le reste : papier, encre, un seul vert. Le tiroir glisse
   depuis la droite, 260 ms, et rien d'autre ne bouge. Sur un écran étroit il
   occupe toute la largeur, sinon il reste une colonne de 400 px. */

.cart-fond {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(15, 18, 17, .34);
  opacity: 0;
  /* Le voile reste dans le DOM le temps de la transition de sortie. Sans
     cette ligne, il continue d'avaler les clics pendant un quart de seconde
     après la fermeture, et la page paraît gelée. */
  pointer-events: none;
  transition: opacity .26s var(--ease);
}
body.cart-ouvert .cart-fond { opacity: 1; pointer-events: auto; }

.cart {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 61;
  display: flex;
  flex-direction: column;
  width: min(400px, 100vw);
  height: 100dvh;
  background: var(--paper-alt);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform .26s var(--ease);
}
body.cart-ouvert .cart { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .cart, .cart-fond { transition: none; }
}

.cart-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line-soft);
}
.cart-fermer {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  color: var(--ink-soft);
  background: var(--paper-alt);
  transition: border-color .18s ease, color .18s ease;
}
.cart-fermer:hover { border-color: var(--ink-mute); color: var(--ink); }
.cart-fermer:active { transform: translateY(1px); }

.cart-corps {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
}
.cart-pied:not(:empty) {
  padding: 20px 22px 24px;
  border-top: 1px solid var(--line-soft);
  background: var(--paper);
}

.cart-liste { display: flex; flex-direction: column; gap: 18px; }
.cart-ligne {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.cart-liste .cart-ligne:last-child { border-bottom: 0; padding-bottom: 0; }

.cart-titre { font-size: 15.5px; font-weight: 500; letter-spacing: -0.01em; }
.cart-detail { margin-top: 3px; font-size: 13px; color: var(--ink-mute); }
.cart-droite { text-align: right; flex: none; }
.cart-prix {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 14.5px;
}
.cart-retirer {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-mute);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .18s ease;
}
.cart-retirer:hover { color: var(--ink); }

.cart-vide { font-size: 15.5px; color: var(--ink-soft); }
.cart-erreur {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper-sunk);
  font-size: 13.5px;
  color: var(--ink-soft);
}

.cart-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 15.5px;
}
.cart-somme {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.cart-mention { margin-top: 6px; font-size: 12.5px; color: var(--ink-mute); }
.cart-cgv {
  margin-top: 12px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-mute);
}

/* Attente : des blocs à la forme du contenu à venir, pas un rond qui tourne. */
.cart-squelette {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.cart-squelette span {
  display: block;
  height: 14px;
  border-radius: 3px;
  background: var(--paper-sunk);
}
.cart-squelette span:first-child { width: 58%; }
.cart-squelette span:last-child  { width: 22%; }
@media (prefers-reduced-motion: no-preference) {
  .cart-squelette span { animation: cartPouls 1.5s ease-in-out infinite; }
  @keyframes cartPouls { 50% { opacity: .5; } }
}

.cart-compte {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  margin-left: 7px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--forest);
  color: var(--paper);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11.5px;
  line-height: 1;
}

/* Bouton « Copier » posé sur le bloc sombre de démonstration. Il vivait en
   attribut style= : la CSP devait alors autoriser 'unsafe-inline' pour tout
   le site, ce qui revient à ouvrir la porte qu'elle est censée fermer. */
.btn-copie {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  padding: 5px 12px;
  font-size: 11.5px;
  letter-spacing: .06em;
}

/* Carte cernée de vert : l'engagement de livraison de l'offre Exécutif. */
.card-cerne {
  border-color: var(--forest);
  border-width: 2px;
}