/* Gestion by Belentia, DA v3.3 : styles de la page « accueil », repris tels quels de la maquette A.html (24/09/2026). */
/* ==================================================================
     Gestion — accent émeraude #059669.
     v3 affinée : page blanche, émeraude en touches (bouton principal, mot
     du H1, onglet actif, chiffres clés), aucune ombre, sections alternées
     blanc / #F7F8FA. Réglages communs : ../_assets/gestion/affine.css.
     ================================================================== */
  :root {
    --accent: #059669;
    --radius: 16px;
    --accent-6: color-mix(in srgb, var(--accent) 6%, #FFF);
  }
  @supports not (color: color-mix(in srgb, #000 6%, #fff)) {
    :root { --accent-6: #F2FAF6; }
  }

  body { font-size: 18px; }

  /* Typographie v3 : H1 52 px / 34 px, H2 36 px, interligne serré. */
  .h1, h1 {
    font-size: 52px;
    line-height: 1.05;
    letter-spacing: -.028em;
    text-wrap: balance;
  }
  .h2, h2 {
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -.022em;
    text-wrap: balance;
  }
  .lead { font-size: 19px; }

  /* Barre de navigation collante, fond blanc légèrement flouté. */
  .nav {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, .84);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
            backdrop-filter: saturate(180%) blur(12px);
  }

  /* ---------- Emplacements d'images (repris de la v2) ---------------- */
  .slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: var(--space-3);
    text-align: center;
    background: #EEF0F4;
    border: 1px dashed #C9CDD6;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    color: var(--muted);
  }
  .slot--cover {
    margin: -1px -1px 0;
    border-radius: 0;
    aspect-ratio: 1672 / 941;
  }
  .slot--shot { aspect-ratio: 16 / 9; border-radius: 0; margin: 0; }

  .slots { border-top: 1px solid var(--line); padding-top: var(--space-3); }
  .slots > summary {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    color: var(--muted);
    cursor: pointer;
    list-style: none;
  }
  .slots > summary::-webkit-details-marker { display: none; }
  .slots > summary:hover { color: var(--ink); }
  .slots > summary svg { flex: 0 0 16px; transition: transform var(--t) var(--ease); }
  .slots[open] > summary svg { transform: rotate(180deg); }
  .slots__item { border-top: 1px solid var(--line); padding-block: var(--space-3); }
  .slots__item:first-of-type { margin-top: var(--space-2); }
  .slots__id { font-family: var(--font-title); font-weight: 700; font-size: 15px; color: var(--ink); }
  .slots__meta { margin-top: 4px; font-size: 14px; color: var(--muted); }
  .slots__prompt {
    margin-top: var(--space-2);
    padding: var(--space-2);
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
  }

  /* ================================ 2. Hero ========================= */
  .hero { position: relative; padding-block: var(--space-8) var(--space-8); overflow: hidden; }
  .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 566px) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: center;
  }
  .hero__facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    /* 14 px : la ligne de réassurance tient sur une seule ligne à 566 px,
       sinon la puce de séparation reste orpheline en fin de ligne. */
    font-size: 14px;
    color: var(--muted);
  }
  .hero__facts li { display: inline-flex; align-items: center; gap: var(--space-2); }
  .hero__facts li:not(:last-child)::after {
    content: "";
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--line-strong);
  }

  /* Colonne droite : l'ordinateur du kit + la rangée des trois étiquettes
     (réglages dans le bloc « Reprise du 23/09 » plus bas). */
  .shot { position: relative; }
  .figure { margin: 0; }
  .figure figcaption { margin-top: var(--space-2); font-size: 14px; color: var(--muted); }

  .tag {
    display: grid;
    gap: 2px;
    padding: 10px 14px;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
  }
  .tag__label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
  .tag__value { font-family: var(--font-title); font-weight: 700; font-size: 20px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
  .tag__value .accent { color: var(--accent); }

  /* Bande de vocabulaire réel, défilé continu. */
  .band { padding-block: var(--space-3); border-block: 1px solid var(--line); background: var(--canvas); }
  .band .chip { font-size: 14px; padding: 8px 14px; white-space: nowrap; }

  /* ===================== 3. Scénarios en onglets ==================== */
  .scen { padding-top: var(--space-5); }
  .scen__grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: var(--space-6);
    align-items: start;
  }
  .scen__before {
    padding: var(--space-3);
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 16px;
    color: var(--muted);
  }
  .scen__before strong { color: var(--ink); font-weight: 600; }

  /* Tableau « Exemple » — se remplit ligne par ligne. */
  .example {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--canvas);
    overflow: hidden;
  }
  .example__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3);
    border-bottom: 1px solid var(--line);
  }
  .example__title { font-family: var(--font-title); font-weight: 700; font-size: 17px; color: var(--ink); }
  .example table { width: 100%; border-collapse: collapse; }
  .example th,
  .example td {
    padding: 12px var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
  }
  .example thead th {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--soft);
  }
  .example tbody th { font-family: var(--font-body); font-weight: 600; color: var(--ink); }
  .example .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .example tfoot th,
  .example tfoot td { border-bottom: 0; font-weight: 700; color: var(--ink); background: var(--soft); }
  .example__banner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 14px var(--space-3);
    border-top: 1px solid var(--line);
    background: var(--canvas);
    color: var(--ink);
    font-weight: 600;
    font-size: 16px;
  }
  .example__banner svg { flex: 0 0 20px; color: var(--accent); }

  /* ====================== 4. Comment ça marche ======================
     Scène épinglée (scroll.css) : les quatre étapes de la v3 restent en
     place ; la frise se dessine au défilement (--p, transform seul) et
     l'étape courante prend l'émeraude. Sous 900 px, une étape à la fois
     sous une frise à quatre points. Reduced-motion : tout est déplié. */
  #fonctionnement { --scene-top: 64px; }
  #fonctionnement .scene:not(.is-static) .scene__sticky {
    height: calc(100vh - var(--scene-top));
    height: calc(100svh - var(--scene-top));
  }
  .steps { position: relative; }
  .steps__line {
    position: absolute;
    top: 21px;
    left: 22px;
    right: calc((100% - 3 * var(--space-3)) / 4 - 22px);
    height: 2px;
    border-radius: 2px;
    background: var(--line);
    overflow: hidden;
    z-index: 0;
  }
  .steps__fill,
  .steps__rail-fill {
    display: block;
    height: 100%;
    background: var(--accent);
    transform-origin: 0 50%;
    transform: scaleX(clamp(0, calc(var(--p, 1) * 4 / 3), 1));
  }
  .steps__list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
  }
  .steps__list > li { display: grid; gap: var(--space-2); align-content: start; grid-area: auto; }
  .steps__num {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--canvas);
    border: 1px solid #D9DCE3;
    color: var(--muted);
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 17px;
    outline: 6px solid var(--soft);
    transition: background-color .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease);
  }
  .steps__list > li.is-past .steps__num { border-color: var(--accent); color: var(--accent); }
  .steps__list > li.is-active .steps__num { background: var(--accent); border-color: var(--accent); color: #fff; }
  .scene.is-static .steps__list > li .steps__num { background: var(--canvas); border-color: var(--accent); color: var(--accent); }
  .steps__title { font-family: var(--font-title); font-weight: 700; font-size: 19px; color: var(--ink); }
  .steps__list p { font-size: 16px; color: var(--muted); }

  /* Frise mobile : quatre points reliés, remplie par --p. */
  .steps__rail {
    position: relative;
    display: none;
    justify-content: space-between;
    align-items: center;
    height: 12px;
    margin-bottom: var(--space-4);
  }
  .steps__rail-track {
    position: absolute;
    left: 6px; right: 6px; top: 5px;
    height: 2px;
    border-radius: 2px;
    background: var(--line);
    overflow: hidden;
  }
  .steps__rail i {
    position: relative;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--canvas);
    border: 2px solid #D9DCE3;
    transition: background-color .45s var(--ease), border-color .45s var(--ease);
  }
  /* Points passés : contour émeraude sur blanc ; seul le point courant est plein. */
  .scene.is-step-1 .steps__rail i:nth-of-type(-n+1),
  .scene.is-step-2 .steps__rail i:nth-of-type(-n+2),
  .scene.is-step-3 .steps__rail i:nth-of-type(-n+3) { border-color: var(--accent); }
  .scene.is-step-0 .steps__rail i:nth-of-type(1),
  .scene.is-step-1 .steps__rail i:nth-of-type(2),
  .scene.is-step-2 .steps__rail i:nth-of-type(3),
  .scene.is-step-3 .steps__rail i:nth-of-type(4) { background: var(--accent); border-color: var(--accent); }

  @media (min-width: 901px) {
    /* Bureau : les quatre étapes restent visibles et lisibles ; seules la
       pastille et le titre des étapes à venir passent en gris clair. */
    .has-scroll .scene .steps__list > li[data-step-show]:not(.is-active) {
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }
    .has-scroll .scene:not(.is-static) .steps__list > li:not(.is-active):not(.is-past) .steps__title,
    .has-scroll .scene:not(.is-static) .steps__list > li:not(.is-active):not(.is-past) .steps__num { color: #9CA3AF; }
    .steps__title { transition: color .45s var(--ease); }
  }
  @media (max-width: 900px) {
    .steps__line { display: none; }
    .has-scroll .scene:not(.is-static) .steps__rail { display: flex; }
    .has-scroll .scene:not(.is-static) .steps__list { grid-template-columns: minmax(0, 1fr); }
    .has-scroll .scene:not(.is-static) .steps__list > li { grid-area: 1 / 1; }
    /* Une étape à la fois : course longue (data-scene-length-mobile).
       Boucle 3 : le panneau épinglé prend la hauteur de l'écran sous la barre
       et centre l'étape (avant, calé en haut, il laissait 45 % d'aplat gris
       vide en bas de l'écran pendant toute la scène). */
    #fonctionnement .scene:not(.is-static) { height: var(--scene-length-m, 280vh); }
    #fonctionnement .scene:not(.is-static) .scene__sticky {
      justify-content: center;
      padding-block: var(--space-4);
    }
  }

  .field-mock {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--canvas);
    font-size: 15px;
    color: var(--ink);
  }
  #etape-2-detail { opacity: 0; transition: opacity .45s var(--motion-ease, cubic-bezier(.2,.6,.3,1)); }
  #etape-2-detail.is-done { opacity: 1; }

  /* ========== 5. Démonstration animée d'une dépense (cursor tour) ==== */
  .demo-stage { padding: var(--space-5); background: var(--soft); border-radius: var(--radius); }
  .demo-app {
    max-width: 620px;
    margin-inline: auto;
    padding: var(--space-4);
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .demo-app__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line);
  }
  .demo-row {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: var(--space-2);
    align-items: center;
    padding-block: var(--space-2);
    border-bottom: 1px solid var(--line);
  }
  .demo-row__label { font-size: 14px; font-weight: 600; color: var(--muted); }
  .demo-field {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--canvas);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  }
  .demo-file { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
  .demo-file__name { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .demo-mini {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--canvas);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
  }
  .demo-mini svg { width: 16px; height: 16px; color: var(--accent); }
  .demo-mini:hover { border-color: var(--accent); }
  .demo-balance {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: 14px var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--soft);
    color: var(--ink);
    font-weight: 600;
  }
  .demo-balance svg { flex: 0 0 20px; color: var(--accent); }
  .demo-note { margin-top: var(--space-4); padding-right: 160px; }
  #g-valider { margin-top: var(--space-3); }

  /* ======================= 6. Ce que vous voyez ===================== */
  .shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .shot-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
  .shot-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--soft);
    border-bottom: 1px solid var(--line);
  }
  .shot-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
  .shot-card__body { display: grid; gap: var(--space-1); padding: var(--space-3); }
  .shot-card__body .chip { justify-self: start; }
  .shot-card__body .h3 { font-size: 20px; }
  .shot-card__body p { color: var(--muted); font-size: 16px; }
  .shot-card__body .h3, .facts .h3 { color: var(--ink); }

  /* ============================ 7. Pour qui ========================= */
  .use { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
  .use__cover {
    width: 100%;
    aspect-ratio: 1672 / 941;
    object-fit: cover;
    background: var(--soft);
    border-bottom: 1px solid var(--line);
  }
  .use__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); flex: 1; }
  .use__list { display: grid; gap: 6px; font-size: 16px; color: var(--muted); }
  .use__list li { display: flex; align-items: center; gap: var(--space-2); }
  .use__list li::before {
    content: "";
    width: 4px; height: 4px;
    flex: 0 0 4px;
    border-radius: 50%;
    background: var(--line-strong);
  }
  .use .link-arrow { margin-top: auto; padding-top: var(--space-1); }

  /* ============================= 8. Tarifs ========================== */
  .plans { align-items: stretch; }
  .plan { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
  .plan--featured {
    border: 1px solid var(--accent);
    background: var(--accent-5);
  }
  .plan__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
  .plan__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 36px;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--ink);
  }
  .plan--featured .plan__price { font-size: 44px; }
  .plan__unit { font-family: var(--font-body); font-size: 16px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
  .plan .btn { margin-top: auto; }
  .plans-note { margin-top: var(--space-3); font-size: 15px; color: var(--muted); }
  .compare { margin-top: var(--space-6); }

  /* =========================== 9. Vos données ======================= */
  .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .facts .card { gap: var(--space-2); padding: var(--space-4); }
  .facts .h3[data-check] { display: flex; align-items: flex-start; }
  /* Coche de 20 px centrée sur la première ligne du titre. */
  .facts .h3[data-check] > .check {
    flex: 0 0 20px;
    width: 20px; height: 20px;
    margin-top: .2em;
    margin-top: calc((1lh - 20px) / 2);
    margin-right: 10px;
  }
  .facts p { color: var(--muted); font-size: 16px; }

  /* ========================= 12. Bandeau final ====================== */
  .final {
    padding: var(--space-8) var(--space-5);
    border-radius: var(--radius);
    background: var(--accent-4);
    border: 1px solid color-mix(in srgb, var(--accent) 14%, #FFF);
    text-align: center;
  }
  .final .eyebrow { justify-content: center; }
  .final .h2 { max-width: 20ch; margin-inline: auto; }
  .final p { max-width: 56ch; margin-inline: auto; color: var(--muted); }
  .final .actions { justify-content: center; }

  /* ========================= 13. Strip outils ======================= */
  .tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
  .tools a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 56px;
    padding: 10px var(--space-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--canvas);
    color: var(--ink);
    font-weight: 600;
    font-size: 16px;
    transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease), transform var(--t) var(--ease);
  }
  .tools a:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); }
  .tools a[aria-current="page"] { border-color: var(--accent); color: var(--ink); }
  .tools__mark {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    flex: 0 0 32px;
    border-radius: 9px;
    background: #F2F3F5;
    color: var(--accent);
  }
  .tools__mark svg { width: 17px; height: 17px; }

  /* =========================== Réglages mobile ====================== */
  @media (max-width: 900px) {
    .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
    .scen__grid { grid-template-columns: minmax(0, 1fr); }
    .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shots, .facts, .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 720px) {
    body { font-size: 17px; }
    .h1, h1 { font-size: 34px; }
    .h2, h2 { font-size: 27px; }
    .lead { font-size: 17px; }
    .hero { padding-block: var(--space-5) var(--space-5); }
    .hero__facts { flex-direction: column; align-items: flex-start; gap: 4px; }
    .hero__facts li:not(:last-child)::after { display: none; }
    .example th, .example td { padding: 10px var(--space-2); font-size: 15px; }
    .example__head { padding: var(--space-2); }
    .steps__list, .shots, .facts, .tools { grid-template-columns: minmax(0, 1fr); }
    .plan { padding: var(--space-3); }
    .plan--featured .plan__price { font-size: 38px; }
    /* L'étiquette du curseur est posée à droite de sa cible : un bouton aligné
       à droite la ferait sortir de l'écran. En colonne, elle reste dans la zone,
       et l'overflow du plateau sert de garde-fou. */
    .demo-stage { padding: var(--space-2); overflow: hidden; }
    .demo-app { padding: var(--space-3); }
    .demo-app__head { flex-direction: column; align-items: flex-start; }
    .demo-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .demo-note { padding-right: 0; margin-bottom: 48px; }
    .final { padding: var(--space-6) var(--space-3); }

    /* Comparatif en lignes empilées : trois colonnes ne tiennent pas dans 358 px. */
    .compare table, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
    .compare thead { display: none; }
    .compare tbody tr { padding: var(--space-2); border-bottom: 1px solid var(--line); }
    .compare tbody tr:last-child { border-bottom: 0; }
    .compare tbody th { padding: 0 0 6px; border: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
    .compare tbody td {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--space-2);
      padding: 3px 0;
      border: 0;
      text-align: right;
    }
    .compare tbody td::before {
      content: attr(data-label);
      font-size: 14px;
      font-weight: 600;
      color: var(--muted);
      text-align: left;
    }
  }

  /* 24/09 5 h : annotations de maquette (emplacements, prompts) hors page ; le détail reste dans *.meta.json et prompts.json. */
  [data-maquette] { display: none !important; }

  /* 24/09 5 h 35 : parcours du hero. Le kit (motion.css) change désormais
     d'écran en coupe franche : la surcharge de fondu est retirée. Point de
     toucher levé après le toucher (classe posée par le script de la page). */
  .hero-tour.is-lifted .tour__cursor,
  .hero-tour.is-lifted .tour__ripple { opacity: 0 !important; transition: opacity 120ms ease; }
  /* 24/09 (corrections validées) : geste de défilement du téléphone. Pendant le repos
     du tableau de bord, le point est levé (et saute sans glisser vers le départ du geste) ;
     il se pose en fondu, suit le glissé vers le haut, puis se lève. */
  .hero-tour.tour--touch .tour__cursor { transition: transform 600ms var(--motion-ease), opacity 120ms ease; }
  .hero-tour.is-resting .tour__cursor { opacity: 0 !important; transition: opacity 120ms ease; }

  /* 24/09 5 h 50 : bulle du parcours ordinateur à l'échelle de l'écran (486 px) :
     elle tient dans l'intervalle entre les cartes du projet et le tableau. */
  .hero-tour:not(.tour--touch) .tour__label { font-size: 12px; padding: 5px 10px; }