/*
  « How it works » — trois cartes 01 · 02 · 03 côte à côte qui s'élargissent (PRODUIT, ÉTAPES, 10/11/2026).
  Réutilisable sur la Home et sur /handoff-v4/.

  Contrat (la page pose ces deux balises et ce balisage ; rien d'autre) :
    <link rel="stylesheet" href="/assets/home-sections-v4/etapes.css">
    <script type="module" src="/assets/home-sections-v4/etapes.mjs"></script>
    <div class="uck-etapes" data-uck-etapes>
      <article data-etape="1"><h3>…</h3><p>…</p><ol><li>…</li><li>…</li><li>…</li></ol><div class="hb" data-uck-carte="etape-ouvrir"></div></article>
      <article data-etape="2"><h3>…</h3><p>…</p><ol><li>…</li><li>…</li><li>…</li></ol><div class="hb" data-uck-carte="etape-choisir"></div></article>
      <article data-etape="3"><h3>…</h3><p>…</p><ol><li>…</li><li>…</li><li>…</li></ol><div class="hb" data-uck-carte="etape-continuer"></div></article>
    </div>
  etapes.mjs charge lui-même boucle.css, outils.css et outils.mjs (/assets/handoff-boucle-v4/) quand la page ne les a pas
  déjà : une page qui les pose déjà ne les reçoit pas deux fois. Les titres et les phrases restent dans le HTML de la page ;
  le numéro 01/02/03 vient de l'ordre des articles (compteur CSS). Option : data-duree="ms" sur un article.
  Les trois points (<ol>, option mais attendue) sont la phrase découpée en trois : la carte ouverte les montre en petite
  frise reliée par un trait ; la phrase, elle, n'est plus montrée (lue par les lecteurs d'écran, qui ne lisent pas les points).
  data-phrase="visible" sur .uck-etapes montre la phrase au-dessus des points. Sans <ol>, la phrase s'affiche seule.
  La section (fond, sur-titre, grand titre) reste à la page : ce fichier ne tient que la rangée des cartes, qui prend toute
  la largeur de son parent.

  Large (rangée ≥ 860 px) : la carte active est ouverte (numéro, titre, trois points, mini-visuel animé ; ≥ 1100 px les points
  en colonne à gauche du visuel, sinon au-dessus) ; les deux autres sont
  repliées, étroites, avec numéro et titre. Toutes les cartes ont la même hauteur fixe, calculée sur la largeur : changer de
  carte ne bouge jamais la mise en page. Le contenu ouvert a sa largeur finale dès le départ (il est découvert, jamais remis
  en page pendant l'élargissement).
  Étroit : les cartes s'empilent ; seule l'active est dépliée, avec son visuel ; la hauteur totale reste la même.
  Mouvement réduit : ni élargissement animé ni barre ; l'active reste ouverte ; le clic change toujours de carte.
  Système V4 seulement. Aucun appel hors du site.
*/

.uck-etapes {
  --uck-ink: #263153;
  --uck-blue: #4458AC;
  --uck-muted: #5C6480;
  --uck-lime: #E4EE99;
  --uck-lavender: #EEF0FC;
  --uck-gap: 16px;
  container: uck-etapes / inline-size;
  display: flex;
  flex-wrap: wrap;
  gap: var(--uck-gap);
  counter-reset: uck-etape;
  inline-size: 100%;
  font: 400 16px/1.55 HBDM, UckHsDM, 'DM Sans', Arial, sans-serif;
  color: var(--uck-ink);
  -webkit-font-smoothing: antialiased;
}
.uck-etapes *, .uck-etapes *::before, .uck-etapes *::after { box-sizing: border-box; }

/* ---------- Une carte (empilée par défaut : téléphone et tablette étroite) ---------- */
.uck-etapes > article {
  position: relative;
  flex: 1 1 100%;
  min-inline-size: 0;
  overflow: hidden;
  isolation: isolate;
  counter-increment: uck-etape;
  border-radius: 22px;
  background: #ffffffb3;
  box-shadow: inset 0 0 0 1px #26315324;
  cursor: pointer;
  transition: background-color .35s ease, box-shadow .35s ease;
}
.uck-etapes > article.is-active {
  cursor: auto;
  background: #fff;
  box-shadow: inset 0 0 0 1px #2631531a, 0 24px 48px -30px #26315373;
}
.uck-etapes > article:not(.is-active):hover { background: #fffffff0; }

.uck-etapes h3 { margin: 0; font: inherit; }
.uck-etape-bouton {
  display: flex; align-items: center; gap: 14px;
  inline-size: 100%;
  margin: 0; padding: 16px 18px;
  border: 0; background: none; cursor: pointer; text-align: start;
  font: 700 18px/1.25 HBJakarta, UckHsJakarta, 'Plus Jakarta Sans', Arial, sans-serif;
  letter-spacing: -.015em;
  color: var(--uck-muted);
  transition: color .3s ease;
}
.uck-etapes > article.is-active .uck-etape-bouton { color: var(--uck-ink); cursor: auto; }
.uck-etape-bouton:focus-visible { outline: 3px solid var(--uck-blue); outline-offset: -3px; border-radius: 22px; }
.uck-etape-bouton::before {
  content: counter(uck-etape, decimal-leading-zero);
  flex: none;
  display: grid; place-items: center;
  inline-size: 34px; block-size: 34px; border-radius: 10px;
  font: 700 13px/1 HBDM, UckHsDM, 'DM Sans', Arial, sans-serif; letter-spacing: .04em;
  color: var(--uck-blue);
  box-shadow: inset 0 0 0 1.5px currentColor;
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.uck-etapes > article.is-active .uck-etape-bouton::before { background: var(--uck-blue); color: #fff; box-shadow: none; }

/* Le corps (phrase + visuel) : une ligne de grille qui passe de 0 à sa hauteur ; replié, il sort de l'arbre d'accessibilité (inert). */
.uck-etape-corps {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.3, .7, .2, 1);
}
.uck-etapes > article.is-active .uck-etape-corps { grid-template-rows: 1fr; }
.uck-etape-in { min-block-size: 0; overflow: hidden; }
.uck-etape-in > .uck-etape-texte { padding: 0 18px 18px 66px; }
.uck-etape-texte > p {
  margin: 0;
  /* Trois lignes réservées : la hauteur ne dépend pas de la phrase de la carte active. */
  min-block-size: calc(3 * 1.5em);
  font-size: 15px; line-height: 1.5;
  color: var(--uck-muted);
}
/* Avec ses trois points, la phrase ne s'affiche qu'une fois : en points (elle reste lue, entière, par les lecteurs d'écran ;
   etapes.mjs masque les points à ces lecteurs). data-phrase="visible" sur .uck-etapes montre aussi la phrase. */
.uck-etape-texte.a-points > p {
  position: absolute; inline-size: 1px; block-size: 1px; min-block-size: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: -1px;
}
.uck-etapes[data-phrase="visible"] .uck-etape-texte.a-points > p { position: static; inline-size: auto; block-size: auto; clip-path: none; white-space: normal; margin: 0 0 12px; min-block-size: 0; }

/* Les trois points reliés : une petite frise verticale, un trait entre les pastilles */
.uck-etape-texte > ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.uck-etape-texte > ol > li {
  position: relative;
  padding-inline-start: 26px;
  font: 500 15px/1.4 HBDM, UckHsDM, 'DM Sans', Arial, sans-serif;
  color: var(--uck-ink);
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.uck-etape-texte > ol > li::before {
  content: ''; position: absolute; left: 0; top: .28em;
  inline-size: 12px; block-size: 12px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 2.5px var(--uck-blue);
}
.uck-etape-texte > ol > li:first-child::before { background: var(--uck-lime); }
.uck-etape-texte > ol > li:not(:last-child)::after {
  content: ''; position: absolute; left: 5px; top: calc(.28em + 14px); bottom: calc(-10px - .28em + 2px);
  inline-size: 2px; border-radius: 2px; background: #4458AC59;
}
.uck-etapes > article.is-active .uck-etape-texte > ol > li { opacity: 1; transform: none; }
.uck-etapes > article.is-active .uck-etape-texte > ol > li:nth-child(2) { transition-delay: .12s; }
.uck-etapes > article.is-active .uck-etape-texte > ol > li:nth-child(3) { transition-delay: .24s; }

/* Le mini-visuel : sa hauteur est posée ici, avant même le chargement des cartes (aucun saut quand elles arrivent). */
.uck-etapes .hb {
  display: block;
  inline-size: 100%;
  /* 4/3 de la largeur, jamais moins de 450 px : à 360, le fil de l'étape 1 garde ses trois messages. */
  block-size: max(calc(100cqi * 4 / 3), 450px);
  overflow: hidden;
}
.uck-etapes .hb.uc .hb-stage { aspect-ratio: auto; block-size: 100%; border-radius: 0 0 22px 22px; }

/* La barre de progression : en haut de la carte active */
.uck-etape-barre { position: absolute; inset: 0 0 auto 0; z-index: 3; block-size: 3px; overflow: hidden; pointer-events: none; }
.uck-etape-barre i { display: block; block-size: 100%; background: var(--uck-blue); transform: scaleX(0); transform-origin: left center; }
.uck-etapes > article.is-active.is-joue .uck-etape-barre i { animation: uck-etape-barre var(--uck-duree, 6000ms) linear forwards; }
.uck-etapes.is-pause > article.is-active.is-joue .uck-etape-barre i { animation-play-state: paused; }
@keyframes uck-etape-barre { to { transform: scaleX(1); } }

@container uck-etapes (min-width: 521px) {
  .uck-etapes .hb { block-size: calc(100cqi * 2 / 3); }
  .uck-etapes .hb.uc .hb-stage { border-radius: 0 0 22px 22px; }
  .uck-etape-texte > p { min-block-size: calc(2 * 1.5em); font-size: 16px; }
  .uck-etape-bouton { font-size: 19px; padding: 18px 22px; }
  .uck-etape-in > .uck-etape-texte { padding-inline: 70px 22px; }
}

/* ---------- Rangée : trois cartes côte à côte, l'active s'élargit ---------- */
@container uck-etapes (min-width: 860px) {
  .uck-etapes > article {
    --uck-pad: 24px;
    /* T3-A (Kevin, 10/11 16:3x, via LEAD), modèle Calendly : les cartes repliées sont environ deux fois plus larges
       (168 → 330 px dans une rangée de 1320 ; 170 → 332 px dans celle de /handoff-v4/, 1328), hautes colonnes qui
       montrent déjà leur titre ; l'ouverte prend le reste. */
    --uck-replie: clamp(150px, 25cqi, 340px);
    /* Largeur du contenu de la carte ouverte : fixe, quelle que soit la carte active. */
    --uck-w: calc(100cqi - 2 * var(--uck-replie) - 2 * var(--uck-gap) - 2 * var(--uck-pad));
    --uck-h-titre: 76px;
    /* Rangée moyenne (1024) : les points au-dessus du visuel, qui prend toute la largeur. */
    --uck-h-texte: calc(3 * 21px + 2 * 10px + 22px);
    --uck-w-visuel: var(--uck-w);
    --uck-h-visuel: clamp(300px, calc(var(--uck-w-visuel) * .66), 400px);
    flex: 0 0 var(--uck-replie);
    block-size: calc(2 * var(--uck-pad) + var(--uck-h-titre) + var(--uck-h-texte) + var(--uck-h-visuel));
    border-radius: 26px;
    transition: flex-grow .6s cubic-bezier(.3, .7, .2, 1), background-color .35s ease, box-shadow .35s ease;
  }
  .uck-etapes > article.is-active { flex-grow: 1; }

  /* Numéro au-dessus du titre ; replié, le titre passe à la ligne dans la carte étroite. */
  .uck-etape-bouton {
    position: absolute; inset: var(--uck-pad) var(--uck-pad) auto var(--uck-pad);
    inline-size: auto;
    flex-direction: column; align-items: flex-start; gap: 12px;
    padding: 0;
    font-size: 21px; line-height: 1.22;
  }
  .uck-etape-bouton:focus-visible { outline-offset: 8px; border-radius: 12px; }
  .uck-etape-bouton::before { inline-size: 38px; block-size: 38px; border-radius: 11px; font-size: 14px; }
  .uck-etapes > article.is-active .uck-etape-bouton { white-space: nowrap; }

  /* Le corps a sa largeur finale, posée sous le titre : l'élargissement le découvre sans le remettre en page. */
  .uck-etape-corps {
    position: absolute;
    top: calc(var(--uck-pad) + var(--uck-h-titre));
    left: var(--uck-pad);
    inline-size: var(--uck-w);
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
  }
  .uck-etapes > article.is-active .uck-etape-corps {
    opacity: 1; visibility: visible;
    transition: opacity .45s ease .22s, visibility 0s;
  }
  .uck-etape-in { overflow: visible; }
  .uck-etape-in > .uck-etape-texte { padding: 0; block-size: var(--uck-h-texte); }
  .uck-etape-texte > p { min-block-size: 0; max-inline-size: 60ch; font-size: 16px; }
  .uck-etape-texte > ol > li { font-size: 16px; line-height: 1.32; }
  .uck-etapes .hb { inline-size: var(--uck-w-visuel); block-size: var(--uck-h-visuel); border-radius: 18px; }
  .uck-etapes .hb.uc .hb-stage { border-radius: 18px; }
}

/* ---------- Rangée large (1440) ----------
   T3-A (10/11) : avec des cartes repliées deux fois plus larges, la carte ouverte n'a plus la place des points en colonne
   à gauche du visuel (le visuel tombait à 356 px de large) : les points restent au-dessus du visuel à toutes les largeurs
   de rangée, comme à 1024. L'ancienne disposition en colonne (≥ 1100 px) est retirée. */

/* ---------- Avant le module : la première carte est déjà ouverte, les autres repliées (aucun saut à son arrivée) ---------- */
.uck-etapes:not(.is-pret) > article:not(:first-child) > :not(h3) { display: none; }
.uck-etapes:not(.is-pret) > article:first-child { flex-grow: 1; }
.uck-etapes:not(.is-anime) > article,
.uck-etapes:not(.is-anime) .uck-etape-corps { transition: none !important; }

/* ---------- Mouvement réduit : ni élargissement animé ni barre ; l'active reste ouverte ---------- */
@media (prefers-reduced-motion: reduce) {
  .uck-etapes > article,
  .uck-etapes > article .uck-etape-corps,
  .uck-etapes > article.is-active .uck-etape-corps,
  .uck-etape-bouton, .uck-etape-bouton::before { transition: none !important; }
  .uck-etape-barre { display: none; }
}

/* Repliée, une carte large garde un fond calme : un voile lavande et lime en bas, rien d'autre. */
@container uck-etapes (min-width: 860px) {
  .uck-etapes > article:not(.is-active) {
    background:
      radial-gradient(120% 45% at 0% 100%, #E4EE9966 0%, #E4EE9900 70%),
      linear-gradient(180deg, #ffffffc7 0%, #F4F6FEcc 100%);
  }
}

/* ---------- Filigranes des cartes repliées (Kevin, priorité 1, via LEAD 10/11 17:4x) ----------
   Une carte repliée de la rangée large montrait son titre puis ~400 px de fond vide. Une grande icône au trait (posée par
   etapes.mjs : 01 un chat ouvert, 02 le choix d'un outil, 03 un nouveau chat) occupe le bas de la carte, très pâle.
   Décorative : aria-hidden, aucun clic (pointer-events: none), sous le titre et le corps (z-index 0, posée avant eux).
   Taille FIXE, celle de la carte repliée moins ses marges : quand la carte s'élargit ou se replie, l'icône ne grandit pas,
   elle reste ancrée en bas à droite. Sa hauteur est bornée pour laisser au titre 210 px (trois lignes en allemand) :
   elle ne passe jamais sous le titre. Ouverte, la carte l'efface (vite) ; repliée à nouveau, l'icône revient après
   l'animation de largeur.
   RETOUCHE Kevin 10/11 20:0x (via LEAD) : « bien plus discret ». L'icône passe à 40 % de sa taille (282 → 113 px de large
   dans une carte repliée de 330 px), son opacité de .15 à .07 (survol .2 → .1), et elle se pose en bas à DROITE au lieu
   d'en bas à gauche : elle habille le fond sans attirer l'œil.
   Étroit (cartes empilées, téléphone) : AUCUN filigrane. Une carte repliée n'y est qu'une barre de 66 px (numéro + titre) :
   il n'y a pas de fond vide à habiller, et une icône dans une barre si basse se lirait comme un bouton de plus. */
.uck-etape-filigrane { display: none; }
@container uck-etapes (min-width: 860px) {
  .uck-etape-filigrane {
    --uck-fil-w: calc((var(--uck-replie) - 2 * var(--uck-pad)) * .4);
    position: absolute; z-index: 0;
    right: var(--uck-pad); bottom: var(--uck-pad);
    display: block;
    inline-size: var(--uck-fil-w);
    block-size: min(var(--uck-fil-w), calc(100% - 2 * var(--uck-pad) - 210px));
    color: var(--uck-blue);
    opacity: .07;
    pointer-events: none;
    transition: opacity .45s ease .4s;
  }
  .uck-etape-filigrane svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
  .uck-etapes > article.is-active > .uck-etape-filigrane { opacity: 0; transition: opacity .2s ease; }
  .uck-etapes > article:not(.is-active):hover > .uck-etape-filigrane { opacity: .1; transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .uck-etape-filigrane { transition: none !important; }
}