/* ==========================================================================
   STORYBOARD DU 11/10 — « une section, un message » (validé par Théo)
   Chargée seulement avec le storyboard (html.story ; ?story=0 la retire).
   Ce qui change ici : le lien texte du hero, la phrase du ruban des démos,
   les cartes des démos (nom de la boutique + palier en pastille), la
   garantie en phrase posée, les étapes sans épinglage des textes, la fin
   de page (l'inscription d'une ligne).
   Le mouvement est forcé sur le site (décision du 10/10) : aucune règle
   prefers-reduced-motion ici.
   ========================================================================== */

/* ---- Hero : un bouton plein, les démos en lien texte --------------------- */
.hero-lien {
  display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px;
  font: 500 15px/1 var(--font-body); color: var(--noir); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: .32em;
  text-decoration-color: color-mix(in srgb, var(--noir) 30%, transparent);
  transition: text-decoration-color .3s var(--ease);
}
.hero-lien:hover { text-decoration-color: var(--noir); }
.hero-lien span { transition: translate .3s var(--ease); }
.hero-lien:hover span { translate: 3px 0; }
@media (max-width: 720px) {
  .story .hero-acts { align-items: center; gap: 6px; }
  .story .hero-acts .bt { align-self: stretch; }
}

/* Six cadres au bureau (accueil.php, $CADRES_OFF) ; le téléphone ne change pas. */
@media (min-width: 721px) { .cadre--story-off { display: none; } }

/* ---- Le ruban : une phrase, pas une étiquette --------------------------- */
.marques-label--story {
  text-transform: none; letter-spacing: -.005em; font-size: 15px; font-weight: 500; color: var(--encre);
}

/* ---- Les cartes des démos ------------------------------------------------ */
.demo-lien--story { gap: 8px; }
.demo-lien--story .demo-image { margin-bottom: 8px; background: var(--blanc); }
.demo-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.demo-palier {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--filet); background: var(--blanc);
  font: 600 11px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--gris-f);
  white-space: nowrap;
}
@media (max-width: 699px) {
  html.p6-demos .demo-lien--story .demo-nom { font-size: 24px; }
  .demo-palier { min-height: 22px; padding: 0 8px; font-size: 10px; }
}

/* ---- La garantie : une phrase posée, un lien texte ----------------------- */
.story .p12-garantie { padding: clamp(72px, 11vh, 128px) 0; }
.story .p12-garantie-t { font-family: var(--f-titre); font-size: var(--d2); line-height: var(--d2-lh); letter-spacing: var(--d2-ls); font-weight: 800; }
.story .p12-garantie .p12-p { margin: 16px auto 22px; font-size: 17px; color: var(--gris-f); }
.garantie-lien {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: 15px; font-weight: 500; color: var(--noir); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: .32em;
  text-decoration-color: color-mix(in srgb, var(--noir) 30%, transparent);
}
.garantie-lien:hover { text-decoration-color: var(--noir); }

/* ---- Les étapes : les textes défilent, l'écran reste à côté -------------- */
.pe--story { --pe-etape-h: 54vh; padding-top: clamp(72px, 11vh, 128px); }
.pe--story .pe-etape-in { position: static; }
.pe-sous { margin-top: 18px; max-width: 30em; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.45; color: var(--gris-f); }
@media (max-width: 999px) and (min-height: 600px), (max-width: 639px) {
  .pe--story { --pe-etape-h: calc((100vh - var(--pe-colle-h)) * .62); }
}

/* ---- La fin de page : l'inscription d'une ligne -------------------------- */
.fin { padding: clamp(96px, 15vh, 168px) 0 clamp(96px, 14vh, 160px); background: var(--blanc); border-top: 1px solid var(--filet); }
.fin-col { max-width: calc(640px + 2 * var(--pad)); text-align: center; }
.fin-symbole { display: block; width: 34px; height: auto; margin: 0 auto 28px; fill: var(--noir); }
.fin-t { text-wrap: balance; }
.fin-p { margin: 18px auto 0; max-width: 28em; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5; color: var(--gris-f); text-wrap: balance; }
.fin-form {
  display: flex; gap: 6px; margin: 36px auto 0; max-width: 520px; padding: 6px;
  border: 1px solid var(--filet); border-radius: 999px; background: var(--blanc);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.fin-form:focus-within { border-color: var(--noir); }
.fin-champ {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent;
  font: 400 16px/1 var(--font-body); color: var(--noir);
}
.fin-champ::placeholder { color: var(--gris); }
.fin-champ:focus { outline: none; }
.fin-form:has(.fin-champ:focus-visible) { outline: 2px solid var(--noir); outline-offset: 3px; }
.fin-bt {
  flex: none; min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--noir); color: var(--blanc); font: 500 15px/1 var(--font-body); white-space: nowrap;
  transition: background-color .35s var(--ease);
}
.fin-bt:hover { background: #2B2B2B; }
.fin-info { margin: 16px 0 0; font-size: 13px; color: var(--gris); }
.fin-info a { color: inherit; text-underline-offset: .25em; }
.fin-contact { margin: 28px 0 0; font-size: 15px; }
.fin-contact a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--noir); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em;
  text-decoration-color: color-mix(in srgb, var(--noir) 30%, transparent);
}
.fin-contact a:hover { text-decoration-color: var(--noir); }
@media (max-width: 520px) {
  .fin-form { flex-direction: column; border-radius: 28px; padding: 8px; }
  .fin-champ { text-align: center; }
}
/* Le symbole se construit une fois, à l'entrée de la section. */
@supports (animation-timeline: view()) {
  .fin-symbole {
    animation: fin-symbole linear both; animation-timeline: view();
    animation-range: entry 20% cover 38%;
  }
}
@keyframes fin-symbole {
  from { opacity: 0; scale: .55; rotate: -90deg; filter: blur(6px); }
  to   { opacity: 1; scale: 1; rotate: 0deg; filter: blur(0); }
}