:root {
    /* Mêmes jetons que l'application (public/style.css) : le visiteur qui crée
       un compte ne doit pas avoir l'impression de changer de produit. */
    --bg:        #ffffff;
    --bg-1:      #f5f7fb;
    --bg-2:      #edf3f8;
    --bg-3:      #e5eef5;
    --border:    #dce4ee;
    --border-2:  #96a8bc;
    --text:      #213150;
    --text-2:    #53657c;
    --dim:       #607187;
    --faint:     #607187;
    --accent:    #147587;
    --accent-2:  #0f5768;
    --accent-soft: rgba(91,141,239,.15);
    --ok:        #18734f;
    --warn:      #995416;

    --c-person-f:#943b76;
    --c-email:   #6b4399;
    --c-phone:   #17695f;
    --c-iban:    #25623c;
    --c-org:     #813b8d;

    --r:   8px;
    --r-l: 12px;
    --r-xl: 16px;
  }

  * { box-sizing: border-box; padding: 0; }
  /* Pas `dialog` : un <dialog> natif se centre par `margin: auto`, et le
     bandeau d'environnement de test en ouvre un. */
  *:not(dialog) { margin: 0; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    background: var(--bg);
    color: var(--text);
    font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--accent-2); text-decoration: none; }
  a:hover { color: var(--accent); }
  ::selection { background: var(--accent-soft); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  img { max-width: 100%; height: auto; display: block; }
  .icon { width: 16px; height: 16px; flex-shrink: 0; }

  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

  /* ---------- En-tête ---------- */
  header.site {
    position: sticky; top: 0; z-index: 40;
    background: rgba(10,12,16,.82);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -.01em; color: var(--text); }
  .brand i {
    width: 28px; height: 28px; border-radius: 8px; font-style: normal;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: var(--bg);
  }
  .brand i .icon { width: 15px; height: 15px; }
  .nav nav { display: flex; gap: 26px; font-size: 14.5px; }
  .nav nav a { color: var(--dim); }
  .nav nav a:hover { color: var(--text); }
  .nav-cta { display: flex; gap: 10px; align-items: center; }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px; border-radius: var(--r); border: 1px solid transparent;
    font-size: 14.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
  }
  .btn-primary { background: var(--accent); color: var(--bg); }
  .btn-primary:hover { background: var(--accent-2); color: var(--bg); }
  .btn-ghost { border-color: var(--border-2); color: var(--text-2); }
  .btn-ghost:hover { border-color: var(--dim); color: var(--text); background: var(--bg-1); }
  .btn-lg { padding: 14px 26px; font-size: 15.5px; border-radius: var(--r-l); }
  .btn-full { width: 100%; }

  /* ---------- Sections ---------- */
  section { padding: 88px 0; border-top: 1px solid var(--border); }
  .hero { border-top: 0; padding: 84px 0 0; }
  .eyebrow {
    font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 14px;
  }
  h2 { font-size: clamp(26px, 3.6vw, 36px); line-height: 1.2; letter-spacing: -.02em; font-weight: 680; }
  h3 { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
  .lead { color: var(--text-2); font-size: 17px; max-width: 62ch; margin-top: 14px; }
  .section-head { margin-bottom: 44px; }

  /* ---------- Héros ---------- */
  .hero-inner { text-align: center; max-width: 820px; margin: 0 auto; }
  .hero h1 {
    font-size: clamp(34px, 5.4vw, 58px); line-height: 1.08;
    letter-spacing: -.033em; font-weight: 700;
  }
  .hero h1 em { font-style: normal; color: var(--accent); }
  .hero p { color: var(--text-2); font-size: 18.5px; max-width: 58ch; margin: 22px auto 0; }
  .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; justify-content: center; }
  .hero-note { margin-top: 18px; font-size: 13.5px; color: var(--dim); }

  /* Fenêtre d'application : un cadre sobre, la capture réelle dedans. */
  .shot {
    position: relative;
    background: var(--bg-1); border: 1px solid var(--border-2); border-radius: var(--r-xl);
    overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(91,141,239,.08);
  }
  .shot-bar {
    display: flex; align-items: center; gap: 6px; padding: 10px 14px;
    background: var(--bg-2); border-bottom: 1px solid var(--border);
  }
  .shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--border-2); }
  .shot-bar span { margin-left: 10px; font-size: 12px; color: var(--dim); font-family: ui-monospace, "SF Mono", Menlo, monospace; }
  .hero-shot { margin-top: 64px; }
  .shot-caption { margin-top: 16px; font-size: 13.5px; color: var(--dim); text-align: center; }

  /* ---------- En action : deux colonnes ---------- */
  .split { display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; align-items: center; }
  .split.reverse { grid-template-columns: 1.25fr 1fr; }
  .split.reverse .split-text { order: 2; }
  .split-text h3 { font-size: 22px; margin-bottom: 12px; }
  .split-text p { color: var(--text-2); font-size: 15.5px; }
  .split-text p + p { margin-top: 12px; }
  .split-text ul { margin: 14px 0 0; padding-left: 20px; color: var(--text-2); font-size: 15px; line-height: 1.8; }
  .ph { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 600; padding: 1px 6px; border-radius: 5px; border: 1px solid currentColor; background: color-mix(in srgb, currentColor 10%, transparent); }
  .t-person-f { color: var(--c-person-f); }
  .t-email  { color: var(--c-email); }
  .t-phone  { color: var(--c-phone); }
  .t-iban   { color: var(--c-iban); }
  .t-org    { color: var(--c-org); }
  .stack { display: grid; gap: 72px; }

  /* ---------- Grilles ---------- */
  .grid { display: grid; gap: 18px; }
  .g2 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(3, 1fr); }
  .card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 26px; }
  .card h3 { margin-bottom: 10px; }
  .card p { color: var(--text-2); font-size: 14.5px; }
  .card p + p { margin-top: 12px; }
  .card .num {
    width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13.5px; font-weight: 700; margin-bottom: 14px;
  }
  .card h3.ok { color: var(--ok); }
  .card h3.warn { color: var(--warn); }
  .card .fine { color: var(--dim); font-size: 13.5px; }
  .card b { color: var(--text); }

  /* ---------- Types ---------- */
  .types { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
  .types-col { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 26px; }
  .types-col.det { border-color: rgba(74,222,128,.28); }
  .types-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .types-count { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
  .det .types-count { color: var(--ok); }
  .prob .types-count { color: var(--warn); }
  .types-col > p { color: var(--text-2); font-size: 14px; margin: 12px 0 18px; }
  .chips { display: flex; flex-wrap: wrap; gap: 7px; }
  .chip {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px; padding: 5px 10px; border-radius: 7px;
    background: var(--bg-3); border: 1px solid var(--border); color: var(--text-2);
  }

  /* ---------- Faits ---------- */
  .facts { display: grid; gap: 1px; border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; background: var(--border); }
  .fact { display: grid; grid-template-columns: 210px 1fr; gap: 24px; padding: 20px 24px; background: var(--bg-1); }
  .fact dt { font-weight: 620; font-size: 14.5px; }
  .fact dd { color: var(--text-2); font-size: 14.5px; }
  .fact dd b { color: var(--text); font-weight: 600; }

  /* ---------- Tarifs ---------- */
  .plans { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); align-items: start; }
  .plan { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 28px; }
  .plan.featured { border-color: var(--accent); }
  .plan-name { font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--dim); }
  .plan.featured .plan-name { color: var(--accent); }
  .plan-price { font-size: 32px; font-weight: 700; letter-spacing: -.02em; margin: 14px 0 4px; }
  .plan-price small { font-size: 15px; font-weight: 400; opacity: .7; }
  .plan-desc { color: var(--text-2); font-size: 14px; min-height: 44px; }
  .plan ul { list-style: none; margin: 18px 0 22px; display: grid; gap: 9px; }
  .plan li { font-size: 14px; color: var(--text-2); padding-left: 22px; position: relative; }
  .plan li::before { content: "—"; position: absolute; left: 0; color: var(--faint); }
  .plan li.yes::before { content: "✓"; color: var(--ok); font-weight: 700; }

  .callout {
    border: 1px solid var(--border); border-left: 3px solid var(--accent);
    background: var(--bg-1); border-radius: var(--r);
    padding: 18px 22px; color: var(--text-2); font-size: 14.5px; margin-top: 20px;
  }
  .callout b { color: var(--text); }

  /* ---------- Pied ---------- */
  /* Quatre blocs — identité, navigation, éditeur, barre basse — imposés à toute
     page publique ILYGO. Trois colonnes en large ; entre 640 et 900 px l'identité
     prend toute la largeur et les deux autres blocs se partagent la ligne
     suivante (sinon la colonne éditeur est trop étroite pour l'IDE) ; sous
     640 px, tout s'empile dans le même ordre. */
  footer.site { border-top: 1px solid var(--border); padding: 56px 0 36px; color: var(--dim); font-size: 14px; }
  .foot { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
  .foot-head { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; }
  .foot-ident p { margin-top: 14px; max-width: 42ch; color: var(--text-2); }
  /* Ligne de confiance : UN SEUL nœud de texte, à l'accent de la marque.
     ⚠ Elle ne doit JAMAIS être découpée en éléments — ni un <li> par segment,
     ni un <span> autour des « · » pour les griser. Sa conformité se vérifie par
     un grep de la chaîne ENTIÈRE sur la page servie, et tout balisage
     intercalaire la rend introuvable : la ligne reste parfaite à l'œil et le
     contrôle passe au vert sur un pied de page fautif. Pour griser les
     séparateurs sans couper, la teinte se joue sur le bloc — pas sur le
     séparateur. Même raison pour l'espace de « 100 % » : une espace ORDINAIRE
     (U+0020), jamais &nbsp; ni U+00A0, qui se ressemblent à l'œil et ne se
     greppent ni l'un ni l'autre. */
  .foot-trust { margin-top: 18px; color: var(--accent); font-size: 13.5px; font-weight: 600; }
  .foot-nav ul { list-style: none; display: grid; gap: 8px; }
  /* <address> pour la sémantique, pas une liste ; en romain, pas en italique. */
  .foot address { font-style: normal; display: grid; gap: 8px; }
  .foot address b { color: var(--text-2); font-weight: 600; }
  .foot a { color: var(--text-2); }
  .foot a:hover { color: var(--text); }
  .foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border); font-size: 13.5px; }
  .foot-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
  .foot-bottom a { color: var(--dim); }
  .foot-bottom a:hover { color: var(--text); }
  @media (max-width: 900px) {
    .foot { grid-template-columns: 1fr 1fr; gap: 32px; }
    .foot-ident { grid-column: 1 / -1; }
  }
  @media (max-width: 640px) {
    .foot { grid-template-columns: 1fr; }
  }
  /* Sous 640 px, deux boutons côte à côte débordaient de la fenêtre : on ne
     garde que l'appel principal — « Se connecter » reste dans le pied de page. */
  @media (max-width: 640px) {
    .nav-cta .btn-ghost { display: none; }
    .nav-cta .btn { padding: 9px 14px; }
  }

  /* ---------- Visionneuse des captures ---------- */
  /* Les captures font 2880 px de large : réduites à la largeur de la page, le
     texte de l'interface n'est plus lisible. Un clic les ouvre en grand. */
  .shot-zoom {
    position: absolute; right: 12px; bottom: 12px; z-index: 2;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-2);
    background: rgba(10,12,16,.78); backdrop-filter: blur(6px);
    color: var(--text-2); font-size: 13px; font-weight: 600; cursor: zoom-in;
    opacity: 0; transition: opacity .15s, color .15s, border-color .15s;
  }
  .shot:hover .shot-zoom, .shot-zoom:focus-visible { opacity: 1; }
  .shot-zoom:hover { color: var(--text); border-color: var(--dim); }
  @media (hover: none) { .shot-zoom { opacity: 1; } }

  .viewer {
    position: fixed; inset: 0; z-index: 100; display: none;
    background: rgba(6,8,11,.94); padding: 24px;
    align-items: center; justify-content: center; flex-direction: column; gap: 14px;
  }
  .viewer[open] { display: flex; }
  .viewer img {
    max-width: 100%; max-height: calc(100vh - 132px);
    border-radius: var(--r-l); border: 1px solid var(--border-2);
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
    cursor: zoom-in; object-fit: contain;
  }
  /* Second niveau : l'image reprend sa taille réelle et la zone défile. */
  .viewer.is-full { align-items: flex-start; overflow: auto; }
  .viewer.is-full img { max-width: none; max-height: none; width: 2880px; cursor: zoom-out; }
  .viewer-caption { color: var(--text-2); font-size: 14px; max-width: 70ch; text-align: center; }
  .viewer-close {
    position: fixed; top: 16px; right: 16px;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--bg-2); border: 1px solid var(--border-2); color: var(--text);
    font-size: 20px; line-height: 1; cursor: pointer;
  }
  .viewer-close:hover { background: var(--bg-3); }
  .viewer-hint { color: var(--dim); font-size: 12.5px; }

  .cta-final { text-align: center; }
  .cta-final h2 { max-width: 20ch; margin: 0 auto; }
  .cta-final .lead { margin: 16px auto 0; }

  /* ---------- Adaptatif ---------- */
  @media (max-width: 900px) {
    .split, .split.reverse { grid-template-columns: 1fr; gap: 24px; }
    .split.reverse .split-text { order: 0; }
    .g2, .g3, .plans, .types { grid-template-columns: 1fr; }
    .fact { grid-template-columns: 1fr; gap: 6px; }
    .nav nav { display: none; }
    section { padding: 62px 0; }
    .hero { padding-top: 56px; }
    .hero-shot { margin-top: 40px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
  }