/* ============================================================================
   landing-proof.css — Système visuel de la refonte « encre & papier »
   Indépendant du Tailwind précompilé (static-tailwind.css). Toutes les
   animations sont sous prefers-reduced-motion: no-preference.
   Voir le plan : refonte landing.html + fonctionnalites.html
   ========================================================================== */

:root {
  --paper:       #FBF8F1;
  --paper-dark:  #F2ECE0;
  --paper-line:  #E7E0D2;
  --ink:         #0F172A;
  --ink-soft:    #1E293B;
  --ink-mute:    #475569;
  --accent:      #2563EB;
  --accent-light:#60A5FA;
  --state-sent:  #3B82F6;
  --state-relance:#F59E0B;
  --state-signe: #22C55E;
  --ease-out-soft: cubic-bezier(.16,.84,.44,1);
}

/* ── Sections de rythme (fonds) ──────────────────────────────────────────── */
.paper-section      { background: var(--paper); }
.paper-dark-section { background: var(--paper-dark); }
.ink-section        { background: var(--ink); color: #E5E7EB; }
.paper-rule         { border-color: var(--paper-line) !important; }

/* ── Meta-row éditoriale (remplace les stat-cards génériques) ─────────────── */
.meta-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem 2.25rem;
}
.meta-label {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-mute);
}
.meta-sep { width: 1px; height: 2.25rem; background: currentColor; opacity: .15; }

/* ── Cadre navigateur (.browser-mock) ────────────────────────────────────── */
.browser-mock {
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow:
    0 1px 2px rgba(15,23,42,.04),
    0 24px 48px -24px rgba(15,23,42,.35);
  overflow: hidden;
}
.browser-mock--floating { transform: perspective(1600px) rotateY(-3deg) rotateX(2deg); }
.browser-mock__bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .8rem;
  background: #F4F4F5;
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.browser-mock__dots { display: flex; gap: .35rem; }
.browser-mock__dots i {
  width: 11px; height: 11px; border-radius: 50%; display: block;
  background: #d4d4d8;
}
.browser-mock__dots i:nth-child(1) { background: #FF5F57; }
.browser-mock__dots i:nth-child(2) { background: #FEBC2E; }
.browser-mock__dots i:nth-child(3) { background: #28C840; }
.browser-mock__url {
  flex: 1; margin-left: .5rem;
  font-size: .72rem; color: #71717A;
  background: #fff; border: 1px solid rgba(15,23,42,.07);
  border-radius: 7px; padding: .3rem .7rem;
  display: flex; align-items: center; gap: .4rem;
  max-width: 320px;
}
.browser-mock__url svg { width: 12px; height: 12px; flex: none; opacity: .6; }
.browser-mock__body { position: relative; background: #fff; }
.browser-mock__body img { display: block; width: 100%; height: auto; }

/* Placeholder de capture (tant que l'image réelle n'est pas fournie) */
.shot-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; min-height: 280px; padding: 2rem; text-align: center;
  background:
    linear-gradient(135deg, #FAFAFA 0%, #F4F4F5 100%);
  color: #A1A1AA; font-size: .8rem;
}
.shot-placeholder svg { width: 34px; height: 34px; opacity: .5; }

/* ── Callouts d'annotation (.callout) ────────────────────────────────────── */
.callout {
  position: absolute; z-index: 3;
  font-size: .74rem; font-weight: 600; line-height: 1.25;
  color: var(--ink); background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 10px; padding: .45rem .65rem;
  box-shadow: 0 10px 26px -12px rgba(15,23,42,.45);
  max-width: 180px;
}
.callout::before {
  content: ""; position: absolute; width: 8px; height: 8px;
  background: #fff; border: 1px solid rgba(15,23,42,.10);
  border-top: none; border-left: none; transform: rotate(45deg);
}
.callout--accent { border-color: rgba(37,99,235,.35); color: var(--accent); }
.callout--bl::before { left: 18px; bottom: -5px; }
.callout--tr::before { right: 18px; top: -5px; transform: rotate(225deg); }
/* badge flottant sans flèche (n'implique pas de pointer un élément précis) */
.callout--plain::before { display: none; }

/* ── Mini-UI réutilisable pour les reconstructions animées ───────────────── */
.ui-card {
  background: #fff; border: 1px solid rgba(15,23,42,.08);
  border-radius: 12px; padding: .9rem 1rem;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.ui-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .55rem 0;
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.ui-row:last-child { border-bottom: none; }
.pill {
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  padding: .18rem .5rem; border-radius: 999px; white-space: nowrap;
}
.pill--sent    { color: #1D4ED8; background: #DBEAFE; }
.pill--relance { color: #B45309; background: #FEF3C7; }
.pill--signe   { color: #15803D; background: #DCFCE7; }

/* Bloc de preuve : mini-aperçu d'écran dans le cadre navigateur */
.proof-visual { position: relative; }
/* cadre principal à plat dans les compositions (lisibilité + netteté des captures) */
.compo .browser-mock--floating { transform: none; }
/* capture principale SANS chrome navigateur : image cadrée simple (rayon + ombre douce) */
.compo__shot {
  display: block; width: 100%; height: auto; position: relative; z-index: 1;
  border-radius: 12px; border: 1px solid rgba(15,23,42,.07);
  box-shadow: 0 24px 50px -24px rgba(15,23,42,.40);
}
.shot-mini { padding: .9rem 1.05rem; background: #fff; }
.shot-mini .ui-row { font-size: .82rem; }
.shot-mini .ui-row span:first-child { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Scroll-reveal ───────────────────────────────────────────────────────── */
.reveal { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0; transform: translateY(22px);
    transition: opacity .7s var(--ease-out-soft), transform .7s var(--ease-out-soft);
    will-change: opacity, transform;
  }
  .reveal.is-visible { opacity: 1; transform: none; }
  .reveal--delay-1 { transition-delay: .08s; }
  .reveal--delay-2 { transition-delay: .16s; }
  .reveal--delay-3 { transition-delay: .24s; }
}

/* ── Keyframes des micro-anims (jouées quand le bloc est visible) ─────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rd-fade-up   { from { opacity:0; transform:translateY(14px);} to { opacity:1; transform:none; } }
  @keyframes rd-slide-in  { from { opacity:0; transform:translateX(26px);} to { opacity:1; transform:none; } }
  @keyframes rd-stamp-in  {
    0%   { opacity:0; transform: rotate(-12deg) scale(1.6); }
    60%  { opacity:1; transform: rotate(-12deg) scale(.92); }
    100% { opacity:1; transform: rotate(-12deg) scale(1); }
  }
  @keyframes rd-ping {
    0%   { transform: scale(.4); opacity:.7; }
    100% { transform: scale(2.4); opacity:0; }
  }
  @keyframes rd-fly {
    0%   { opacity:0; transform: translate(0,8px) scale(.9); }
    20%  { opacity:1; }
    100% { opacity:0; transform: translate(46px,-30px) scale(.7); }
  }
  @keyframes rd-float {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-7px); }
  }
  @keyframes rd-caret { 0%,100% { opacity:1; } 50% { opacity:0; } }

  /* La scène ne s'anime qu'une fois entrée dans le viewport (.is-visible posé par le JS) */
  .scene.is-visible .scene-fade   { animation: rd-fade-up .6s var(--ease-out-soft) both; }
  .scene.is-visible .scene-slide  { animation: rd-slide-in .6s var(--ease-out-soft) both; }
  .scene.is-visible .scene-stamp  { animation: rd-stamp-in .55s var(--ease-out-soft) both; }
  .scene.is-visible .scene-fly    { animation: rd-fly 2.4s ease-in-out infinite; }
  .scene.is-visible .scene-ping   { animation: rd-ping 1.8s ease-out infinite; }
  .browser-mock--float            { animation: rd-float 6s ease-in-out infinite; }
}

/* ── Hero : conteneur de la scène animée (markup .hs-scene, styles dans hero-scene.css) ── */
.hero-anim {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1023px) {
  .hero-anim { margin-top: 1.5rem; }
}

/* ============================================================================
   COMPOSITIONS À VOLUME (.compo) — vraies captures + superpositions
   Blocs de preuve 01/02/03. Un cadre navigateur principal + carte(s) flottante(s)
   + téléphone (bloc C). Les superpositions débordent vers le bas mais restent
   dans la largeur du cadre (au plus la gouttière de ~32px). Voir .proof-section
   qui pose overflow-x: clip pour garantir l'absence de scroll horizontal.
   ========================================================================== */

/* La <section> du bloc empêche tout débordement horizontal de page */
.proof-section { overflow-x: clip; }

/* Conteneur de composition : repère absolu pour les superpositions.
   Padding-bottom pour réserver l'espace où débordent carte/téléphone. */
.compo {
  position: relative;
  width: 100%;
}

/* Le cadre navigateur reste la référence de largeur ; on annule l'overflow
   hidden hérité de .browser-mock seulement si besoin (ici l'image est dedans). */
.compo .browser-mock { position: relative; z-index: 1; }

/* ── Carte flottante générique (capture détourée, ombre marquée) ─────────── */
.compo__card {
  position: absolute;
  z-index: 4;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow:
    0 2px 6px rgba(15,23,42,.10),
    0 30px 60px -28px rgba(15,23,42,.55);
}
.compo__card img { display: block; width: 100%; height: auto; }

/* ── Téléphone (cadre device pur CSS : bezel encre + encoche) ────────────── */
.compo__phone {
  position: absolute;
  z-index: 5;
  border-radius: 26px;
  background: #0F172A;            /* bezel encre */
  padding: 8px;
  box-shadow:
    0 2px 4px rgba(15,23,42,.20),
    0 36px 64px -26px rgba(15,23,42,.6);
}
.compo__phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 19px;
}
.compo__phone-notch {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 34%; height: 13px;
  background: #0F172A;
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
  z-index: 2;
}

/* ── BLOC A : carte « aperçu email de relance » qui déborde en bas-centre ── */
.compo--a { padding-bottom: 4.5rem; }
.compo__card--mail {
  width: 56%;
  right: -2%;                     /* léger débord dans la gouttière */
  bottom: -2.5rem;
  transform: rotate(2deg);
}
.compo__callout-a { left: 2%; top: 14%; }

/* ── BLOC B : composition simple, juste un callout ───────────────────────── */
.compo--b { padding-bottom: 1rem; }
.compo__callout-b { right: 2%; bottom: -0.9rem; }

/* ── BLOC C : carte détail (bas-droite) + téléphone (bas-gauche, devant) ─── */
.compo--c { padding-bottom: 6rem; }
.compo--c .compo__card--invoice {
  width: 58%;
  right: -1%;
  bottom: -3rem;
  transform: rotate(-1.5deg);
  z-index: 3;                     /* sous le téléphone */
}
.compo--c .compo__phone {
  width: 23%;
  left: 1%;
  bottom: -3.5rem;
}
.compo__callout-c { right: 4%; top: 12%; }

/* ── Responsive : le cadre navigateur se met à plat sur mobile ──────────── */
@media (max-width: 768px) {
  .browser-mock--floating { transform: none; }
  .callout { position: static; max-width: none; margin-top: .5rem; box-shadow: none; }
  .callout::before { display: none; }

  /* Compositions : on ne garde que le cadre principal, pleine largeur.
     Superpositions et téléphone masqués pour rester lisibles. */
  .compo { padding-bottom: 0; }
  .compo__card,
  .compo__phone { display: none; }
  /* Le callout repasse en flux (géré ci-dessus) — on annule l'offset absolu. */
  .compo__callout-a,
  .compo__callout-b,
  .compo__callout-c { left: auto; right: auto; top: auto; bottom: auto; }
}

/* Tablette : on réduit le débord pour éviter les chevauchements serrés */
@media (min-width: 769px) and (max-width: 1023px) {
  .compo--c { padding-bottom: 5rem; }
  .compo--c .compo__card--invoice { width: 62%; }
  .compo--c .compo__phone { width: 26%; }
}

/* ============================================================================
   PAGE FONCTIONNALITÉS — compositions des 7 sections (.compo--feat-*)
   Réutilise .compo / .compo__shot / .compo__card / .callout. Seuls les
   placements (offsets, tailles des superpositions, callouts) sont définis ici.
   ========================================================================== */

/* Réserve d'espace pour les débords vers le bas selon la composition */
.compo--feat-devis    { padding-bottom: 1rem; }
.compo--feat-email,
.compo--feat-tracking { padding-bottom: 1rem; }
.compo--feat-relance,
.compo--feat-auto,
.compo--feat-ia       { padding-bottom: 1rem; }
.compo--feat-facture  { padding-bottom: 4.5rem; }

/* ── Section 1 : mini-flux « Catalogue + Contacts → devis » ──────────────── */
.feat-flux {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.3rem, 1vw, .8rem);
}
.feat-sources {
  flex: 0 0 170px; display: flex; flex-direction: column; gap: .8rem;
}
.feat-src-card {
  background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 12px;
  padding: .7rem .8rem; box-shadow: 0 10px 30px -18px rgba(15,23,42,.45);
}
.feat-src-head {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem;
  padding-bottom: .5rem; border-bottom: 1px solid rgba(15,23,42,.06);
}
.feat-src-ico {
  width: 26px; height: 26px; flex: none; border-radius: 7px;
  background: #EFF4FF; color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.feat-src-ico svg { width: 15px; height: 15px; }
.feat-src-title { font-weight: 700; font-size: .85rem; color: var(--ink); }
.feat-src-count { margin-left: auto; font-size: .62rem; }
.feat-src-card .ui-row { font-size: .76rem; padding: .35rem 0; color: var(--ink-soft); }
.feat-src-card .ui-row span:first-child {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: .5rem;
}
.feat-src-price { font-weight: 600; color: var(--ink); white-space: nowrap; }
.feat-src-meta { color: var(--ink-mute); white-space: nowrap; }
.feat-flux-arrow { flex: none; color: var(--accent); }
.feat-flux-arrow svg { width: clamp(18px, 2.2vw, 26px); height: auto; }
.feat-modal { flex: 1 1 auto; min-width: 0; max-width: 1000px; position: relative; }

/* Tarifs — en-tête de catégorie dans la matrice : toujours distinct des lignes
   (teinte plus soutenue que paper-dark + filets nets au-dessus et en dessous) */
.pricing-cat {
  background: #E7DDC8 !important;
  border-top: 1px solid #D4C8AF;
  border-bottom: 1px solid #D4C8AF;
  color: var(--ink) !important;
}
/* Lignes de données neutres, séparées par un filet fin (pas de zebra) :
   la couleur est réservée à la colonne « recommandée » (surbrillance bleue). */
.pricing-row td { border-bottom: 1px solid var(--paper-line); }
.compo__callout-feat-devis { left: 4%; bottom: 6%; }

/* Mobile : la flèche pivote, les sources passent au-dessus du modal */
@media (max-width: 768px) {
  .feat-flux { flex-direction: column; align-items: stretch; }
  .feat-sources { flex-basis: auto; }
  .feat-flux-arrow { transform: rotate(90deg); align-self: center; }
}

/* ── Section 2 : scan email (large & courte) ─────────────────────────────── */
.compo__callout-feat-email { right: 2%; bottom: -0.9rem; }

/* ── Section 3 : aperçu email de relance ─────────────────────────────────── */
.compo__callout-feat-relance { right: 2%; top: 8%; }

/* ── Section 4 : barre de tracking (très large & courte) ─────────────────── */
.compo__callout-feat-tracking { right: 3%; bottom: -0.9rem; }

/* ── Section 5 : configuration d'automatisation ──────────────────────────── */
.compo__callout-feat-auto { left: 3%; bottom: -0.9rem; }

/* ── Section 6 : liste factures (fond) + détail facture (carte superposée) ─ */
.compo--feat-facture .compo__card--feat-invoice {
  width: 52%;
  right: -2%;
  bottom: -2.5rem;
  transform: rotate(-1.5deg);
}
.compo__callout-feat-facture { left: 3%; top: 10%; }

/* ── Section 7 : générateur de relance IA ────────────────────────────────── */
.compo__callout-feat-ia {
  right: 3%; top: 8%;
  border-color: rgba(245,158,11,.4); color: #B45309;
}

/* ── Responsive : superpositions/vignettes masquées sous 768px ──────────── */
@media (max-width: 768px) {
  .compo--feat-devis,
  .compo--feat-facture { padding-bottom: 0; }
  .compo__card--feat-invoice { display: none; }
  .compo__callout-feat-devis,
  .compo__callout-feat-email,
  .compo__callout-feat-relance,
  .compo__callout-feat-tracking,
  .compo__callout-feat-auto,
  .compo__callout-feat-facture,
  .compo__callout-feat-ia { left: auto; right: auto; top: auto; bottom: auto; }
}