/* ==========================================================================
   BRL Digital : page d'accueil
   Les sections propres à l'accueil : hero vivant, manifeste, services
   empilés, galerie horizontale, bande défilante, méthode en scène, appel.

   Même règle que style.css : chaque bloc a un état final lisible sans JS
   et sans animation. Le mouvement est regroupé en bas de fichier.
   ========================================================================== */

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { overflow-x: clip; }

/* La phrase dont la fin change */
.hero-rotation {
  margin-top: var(--e-5);
  color: var(--titre);
  font-size: clamp(1.375rem, 1.05rem + 1.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.hero-rotation-fixe { display: block; color: var(--texte); font-weight: 500; }

.rotation {
  display: inline-grid;
  justify-items: start;
  overflow: hidden;
  padding-bottom: .1em;
  vertical-align: bottom;
  text-align: left;
  transition: width .6s var(--sortie);
}

.rotation > span {
  grid-area: 1 / 1;
  color: var(--violet);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(110%);
  transition: transform .7s var(--sortie), opacity .5s;
}

.rotation > span.actif { opacity: 1; transform: none; }
.rotation > span.sort { opacity: 0; transform: translateY(-110%); }

.hero .hero-sous-titre { margin-top: var(--e-4); font-size: var(--t-texte); color: var(--discret); }

@media (min-width: 40em) {
  .hero-rotation-fixe { display: inline; }
}

/* L'éventail suit un peu la souris */
.vitrine { perspective: 2400px; }

.vitrine-scene {
  transform: rotateY(calc(var(--px, 0) * 2.5deg)) rotateX(calc(var(--py, 0) * -2deg));
  transition: transform .8s var(--sortie);
}

/* Cartes d'interface posées sur les sites */
.flottant {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

.flottant-in {
  padding: .875rem;
  border: 1px solid #34343A;
  border-radius: 1rem;
  background: rgba(28, 28, 32, .9);
  box-shadow: 0 26px 50px -18px rgba(0, 0, 0, .9);
  color: var(--gris-texte);
  font-size: .8125rem;
  line-height: 1.35;
  text-align: left;
  transform: translate3d(calc(var(--px, 0) * var(--prof)), calc(var(--py, 0) * var(--prof)), 0);
  transition: transform .6s var(--sortie);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.flottant-google { top: 0; left: 0; display: none; width: 19.5rem; --prof: 22px; }
.flottant-demande { right: 2%; bottom: 14%; width: 19rem; --prof: -16px; }

/* Le résultat Google reprend le thème sombre de Google */
.flottant-google .flottant-in {
  padding: .75rem;
  border-color: #3C4043;
  background: rgba(32, 33, 36, .95);
  color: #BDC1C6;
}

.fl-champ {
  padding: .5rem .875rem .5rem 2.125rem;
  border-radius: var(--pilule);
  background: #303134 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6' fill='none' stroke='%239AA0A6' stroke-width='2'/%3E%3Cpath d='M20 20l-4.5-4.5' stroke='%239AA0A6' stroke-width='2'/%3E%3C/svg%3E") .875rem center / .875rem no-repeat;
  color: #E8EAED;
}

.fl-frappe { display: inline-block; white-space: nowrap; }

.fl-resultat {
  display: grid;
  gap: .1875rem;
  margin-top: .625rem;
  padding: .75rem .75rem .6875rem;
  border: 1px solid #3C4043;
  border-radius: .75rem;
}

.fl-resultat > b { color: #E8EAED; font-size: .9375rem; font-weight: var(--gras-bouton); }

/* Notification de téléphone */
.flottant-demande .flottant-in {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem .875rem;
  border-color: rgba(255, 255, 255, .08);
  border-radius: 1.375rem;
  background: rgba(46, 46, 52, .82);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
}

.fl-icone {
  flex: none;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: .625rem;
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2' fill='none' stroke='%230B0B0C' stroke-width='1.8'/%3E%3Cpath d='M4 7l8 6 8-6' fill='none' stroke='%230B0B0C' stroke-width='1.8'/%3E%3C/svg%3E") center / 55% no-repeat;
}

.fl-notif { flex: 1; min-width: 0; }

.fl-app {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .125rem;
  color: #A1A1A8;
  font-size: .6875rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.fl-app time { text-transform: none; letter-spacing: 0; }
.fl-notif b { display: block; color: var(--blanc); font-weight: var(--gras-bouton); }
.fl-notif > span:last-child { display: block; color: #D4D4D8; font-size: .78rem; }

/* Petits éléments de Google, communs au héros et à la carte 01 */
.g-note { display: flex; align-items: center; gap: .25rem; color: #9AA0A6; white-space: nowrap; }
.g-note span:first-child { color: #E8EAED; }

.g-etoiles {
  width: 3.75rem;
  height: .75rem;
  background: linear-gradient(90deg, #FBBC04 calc(var(--n, 5) * 20%), #5F6368 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") 0 0 / .75rem .75rem repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") 0 0 / .75rem .75rem repeat-x;
}

.g-ouvert,
.g-ferme { font-style: normal; }
.g-ouvert { color: #81C995; }
.g-ferme { color: #F28B82; }

.g-boutons { display: flex; gap: .375rem; margin-top: .5rem; }

.g-boutons span {
  padding: .3125rem .75rem;
  border: 1px solid #5F6368;
  border-radius: var(--pilule);
  color: #8AB4F8;
  font-size: .75rem;
  font-weight: 500;
  white-space: nowrap;
}

.g-boutons .g-appel { border-color: #8AB4F8; background: #8AB4F8; color: #202124; }

@media (min-width: 48em) {
  .flottant-google { display: block; top: -2%; left: -3%; }
  .flottant-demande { right: -2%; bottom: 20%; }
}

/* ==========================================================================
   Manifeste
   ========================================================================== */
.manifeste { padding-block: var(--e-section); }

.manifeste h2.sur-titre { margin-bottom: var(--e-6); font-size: var(--t-petit); letter-spacing: .01em; }

.manifeste-texte {
  max-width: 64rem;
  color: var(--titre);
  font-size: clamp(1.75rem, 1.05rem + 3vw, 3.75rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.028em;
}

.manifeste-texte em { color: var(--violet); font-style: normal; }

/* Chaque mot s'allume quand la lecture l'atteint (--p de 0 à 1, posé en JS).
   Le plancher garde la phrase lisible avant le défilement : 5,6:1 en blanc, plus de 3:1 en violet. */
.manifeste-texte .m { opacity: clamp(.55, calc(var(--p, 1) * var(--n, 1) - var(--k, 0)), 1); }
.manifeste-texte em .m { opacity: clamp(.8, calc(var(--p, 1) * var(--n, 1) - var(--k, 0)), 1); }

.manifeste-signature {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  margin-top: var(--e-7);
}

.manifeste-photo {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 2px solid var(--violet);
  object-fit: cover;
  object-position: 50% 22%;
}

.manifeste-signature b { display: block; color: var(--titre); font-weight: var(--gras-bouton); }
.manifeste-signature span { color: var(--discret); font-size: var(--t-petit); }

/* ==========================================================================
   Services : quatre cartes qui s'empilent
   ========================================================================== */
.services { padding-top: 0; }
.services .tete-ligne .chapo { max-width: 30rem; margin: 0; }

.pile { display: grid; gap: var(--e-5); }

.pc {
  position: relative;
  display: grid;
  gap: var(--e-5);
  overflow: hidden;
  padding: var(--e-3);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background: var(--carte);
  transform: scale(calc(1 - var(--k, 0) * .06));
  transform-origin: 50% 0;
}

/* Voile : la carte recouverte s'assombrit */
.pc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  background: var(--encre);
  opacity: calc(var(--k, 0) * .65);
  pointer-events: none;
}

.pc-texte {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: var(--e-4) var(--e-3) var(--e-3);
}

.pc-num {
  display: flex;
  align-items: baseline;
  gap: .875rem;
  color: var(--accent-texte);
  font-size: var(--t-petit);
  font-weight: var(--gras-bouton);
}

.pc-num b {
  color: transparent;
  font-size: 3rem;
  font-weight: var(--gras-titre);
  line-height: 1;
  letter-spacing: -.04em;
  -webkit-text-stroke: 1px var(--violet);
}

.pc h3 {
  margin-top: var(--e-4);
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.375rem);
  line-height: 1.08;
  letter-spacing: -.025em;
}

.pc-texte > p:not(.pc-num) { max-width: 34rem; margin-top: var(--e-3); font-size: 1.0625rem; }

.pc-liste { display: grid; gap: .625rem; margin-top: var(--e-5); }

.pc-liste li {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  color: var(--titre);
}

.pc-liste li::before,
.ui-verifs span::before {
  content: "";
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .1875rem;
  border-radius: 50%;
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%230B0B0C' stroke-width='1.6'/%3E%3C/svg%3E") center / 70% no-repeat;
}

.pc-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3) var(--e-5);
  margin-top: auto;
  padding-top: var(--e-6);
}

.pc-prix { color: var(--discret); font-size: var(--t-petit); }

/* Le cadre des grandes interfaces */
.pc-visuel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .75rem;
  min-height: 21rem;
  padding: var(--e-5) var(--e-4);
  overflow: hidden;
  border: 1px solid var(--trait-sombre);
  border-radius: calc(var(--rayon-l) - .5rem);
  background-color: var(--carte-2);
  background-image: radial-gradient(#2E2E34 1px, transparent 1px);
  background-size: 18px 18px;
  font-size: .875rem;
  line-height: 1.4;
}

@media (min-width: 62em) {
  .pile { gap: 0; }

  .pile-carte {
    position: sticky;
    top: calc(6rem + var(--i) * 1.25rem);
    padding-bottom: var(--e-7);
  }

  .pile-carte:last-child { padding-bottom: 0; }

  .pc {
    grid-template-columns: 1fr 1.1fr;
    min-height: min(36rem, calc(100vh - 9rem));
    padding: var(--e-4);
  }

  .pc-texte { padding: var(--e-5) var(--e-4) var(--e-4) var(--e-5); }
  .pc-visuel { padding: var(--e-6); }
}

/* Sur téléphone et tablette, chaque carte se résume à trois bénéfices, une action
   et une miniature de son interface : la démonstration complète vit sur la page du service. */
@media (max-width: 61.99em) {
  .pc-texte > p:not(.pc-num) { display: none; }
  .pc-liste { margin-top: var(--e-4); }
  .pc-bas { padding-top: var(--e-5); }
  /* L'interface entière, réduite : le cadre garde sa taille, le contenu passe à 60 % */
  .pc .pc-visuel {
    order: -1;
    height: auto;
    min-height: 0;
    max-height: 18rem;
    padding: var(--e-4) var(--e-3);
  }
  .pc .pc-visuel > * { zoom: .6; }
  .pc .pc-visuel.ui-recherche { height: 18rem; padding: 0; }
}

/* ---------- 01 : la recherche sur téléphone, thème sombre de Google ---------- */
.ui-recherche { height: 31rem; padding: 0; }

.tel {
  position: absolute;
  top: var(--e-6);
  left: 50%;
  width: min(19.5rem, calc(100% - 2rem));
  padding: .4375rem;
  border-radius: 2.75rem;
  background: #050506;
  box-shadow: 0 0 0 1px #3A3A40, 0 40px 80px -30px rgba(0, 0, 0, .9);
  translate: -50% 0;
}

.tel-ecran {
  position: relative;
  overflow: hidden;
  padding-bottom: 1.25rem;
  border-radius: 2.3125rem;
  background: #202124;
  color: #BDC1C6;
  font-size: .75rem;
  line-height: 1.35;
}

/* L'îlot de l'écran */
.tel-ecran::before {
  content: "";
  position: absolute;
  top: .5rem;
  left: 50%;
  width: 5.25rem;
  height: 1.375rem;
  margin-left: -2.625rem;
  border-radius: var(--pilule);
  background: #000;
}

.tel-statut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1.375rem .375rem 1.75rem;
  color: var(--blanc);
  font-size: .8125rem;
}

.tel-statut b { font-weight: var(--gras-bouton); }

.g { padding: 0 .75rem; }

.g-logo {
  margin: .375rem 0 .625rem;
  font-size: 1.5rem;
  font-weight: var(--gras-bouton);
  letter-spacing: -.03em;
  line-height: 1;
  text-align: center;
}

.g-logo b { font-weight: inherit; }
.g-logo b:nth-child(1),
.g-logo b:nth-child(4) { color: #4285F4; }
.g-logo b:nth-child(2),
.g-logo b:nth-child(6) { color: #EA4335; }
.g-logo b:nth-child(3) { color: #FBBC05; }
.g-logo b:nth-child(5) { color: #34A853; }

.g-champ {
  padding: .625rem 1rem .625rem 2.375rem;
  border-radius: var(--pilule);
  background: #303134 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6' fill='none' stroke='%239AA0A6' stroke-width='2'/%3E%3Cpath d='M20 20l-4.5-4.5' stroke='%239AA0A6' stroke-width='2'/%3E%3C/svg%3E") 1rem center / .9375rem no-repeat;
  color: #E8EAED;
  font-size: .8125rem;
}

.g-frappe { display: inline-block; white-space: nowrap; }

.g-onglets {
  display: flex;
  gap: 1.125rem;
  overflow: hidden;
  margin: .375rem -.75rem 0;
  padding: 0 .875rem;
  border-bottom: 1px solid #3C4043;
  color: #9AA0A6;
  white-space: nowrap;
}

.g-onglets > * { padding: .5rem 0 .4375rem; }
.g-onglets b { color: #8AB4F8; font-weight: 500; box-shadow: inset 0 -3px 0 #8AB4F8; }

.g-local {
  margin-top: .75rem;
  overflow: hidden;
  border: 1px solid #3C4043;
  border-radius: 1rem;
}

.g-plan { position: relative; height: 7rem; background: #242F3E; }
.g-plan svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.g-epingle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: .875rem;
  height: .875rem;
  margin: -.875rem 0 0 -.4375rem;
  border-radius: 50% 50% 50% 0;
  background: #EA4335;
  transform: rotate(-45deg);
}

.g-epingle::after {
  content: "";
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background: #8A1C14;
}

.g-moi { width: 1.375rem; height: 1.375rem; margin: -1.375rem 0 0 -.6875rem; }

.g-etiquette {
  position: absolute;
  left: var(--x);
  top: var(--y);
  margin: -1.125rem 0 0 .875rem;
  color: #F28B82;
  font-size: .6875rem;
  font-weight: var(--gras-bouton);
  text-shadow: 0 0 3px #242F3E, 0 0 3px #242F3E;
  white-space: nowrap;
}

.g-fiche { display: grid; gap: .1875rem; padding: .75rem .875rem; border-top: 1px solid #3C4043; }
.g-fiche > b { color: #E8EAED; font-size: .875rem; font-weight: var(--gras-bouton); }

.g-site { margin-top: 1rem; }
.g-source { display: flex; align-items: center; gap: .5rem; }

.g-source i {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border: 1px solid #3C4043;
  border-radius: 50%;
  background: var(--violet);
  color: var(--encre);
  font-size: .6875rem;
  font-style: normal;
  font-weight: var(--gras-titre);
}

.g-source span { color: #DADCE0; font-size: .75rem; }
.g-source small { display: block; color: #9AA0A6; font-size: .6875rem; }
.g-site b { display: block; margin: .4375rem 0 .25rem; color: #8AB4F8; font-size: .9375rem; font-weight: 400; line-height: 1.3; }

@media (min-width: 62em) {
  .ui-recherche { height: auto; }
  .tel { top: var(--e-7); }
}

/* ---------- 02 : le CRM, une demande avance jusqu'à « Signés » ---------- */
.crm { display: grid; }

.crm-nav { display: none; }

.crm-nav b {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: .25rem;
  border-radius: .5rem;
  background: var(--violet);
  color: var(--encre);
  font-size: .625rem;
  font-weight: var(--gras-titre);
}

.crm-nav i {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: .5rem;
  background: var(--ic) center / 1rem no-repeat;
  opacity: .6;
}

.crm-nav .ic-actif { background-color: #24223F; opacity: 1; }
.ic-tableau { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ABA6FF' stroke-width='1.8'%3E%3Crect x='3.5' y='4' width='4.5' height='16' rx='1'/%3E%3Crect x='10' y='4' width='4.5' height='10' rx='1'/%3E%3Crect x='16.5' y='4' width='4' height='13' rx='1'/%3E%3C/svg%3E"); }
.ic-contacts { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BDBEC0' stroke-width='1.8'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c1-4 4-6 7-6s6 2 7 6'/%3E%3C/svg%3E"); }
.ic-devis { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BDBEC0' stroke-width='1.8'%3E%3Cpath d='M6.5 3h8l4 4v14h-12z'/%3E%3Cpath d='M14 3v4.5h4.5M9.5 12h6M9.5 16h6'/%3E%3C/svg%3E"); }
.ic-agenda { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BDBEC0' stroke-width='1.8'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4'/%3E%3C/svg%3E"); }

.crm-corps { display: grid; gap: .625rem; min-width: 0; padding: .75rem; }

.crm-tete { display: flex; align-items: center; gap: .5rem; }
.crm-tete b { margin-right: auto; color: var(--blanc); font-size: .875rem; font-weight: var(--gras-titre); }

.crm-chercher {
  display: none;
  padding: .25rem 1.5rem .25rem 1.625rem;
  border: 1px solid var(--trait-sombre);
  border-radius: .5rem;
  background: var(--encre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6' fill='none' stroke='%238E8F93' stroke-width='2'/%3E%3Cpath d='M20 20l-4.5-4.5' stroke='%238E8F93' stroke-width='2'/%3E%3C/svg%3E") .5rem center / .75rem no-repeat;
  color: var(--gris-discret);
}

.crm-nouveau {
  padding: .25rem .625rem;
  border-radius: .5rem;
  background: var(--violet);
  color: var(--encre);
  font-weight: var(--gras-bouton);
}

.uc-colonnes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}

.uc-col {
  display: grid;
  align-content: start;
  gap: .375rem;
  min-height: 18.5rem;
  padding: .5rem;
  border-radius: .625rem;
  background: #18181B;
}

.uc-col > p {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .125rem .125rem .25rem;
  overflow: hidden;
  color: var(--blanc);
  font-size: .6875rem;
  font-weight: var(--gras-bouton);
  white-space: nowrap;
}

.uc-col > p::before { content: ""; flex: none; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--c); }
.uc-col > p span { margin-left: auto; color: var(--gris-discret); font-weight: 500; }

/* Le compteur des signés passe de 2 à 3 quand la carte arrive */
.uc-compte { position: relative; }
.uc-compte::before { content: attr(data-avant); opacity: 0; }
.uc-compte::after { content: attr(data-apres); position: absolute; right: 0; }

.uc-carte {
  display: grid;
  gap: .0625rem;
  min-width: 0;
  padding: .4375rem .5rem .5rem;
  border: 1px solid #2A2A2E;
  border-radius: .5rem;
  background: #202024;
}

.uc-carte b,
.uc-carte > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-carte b { color: var(--blanc); font-weight: var(--gras-bouton); }
.uc-carte > span { color: var(--gris-discret); font-size: .6875rem; }

.uc-carte small {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .25rem;
  margin-top: .3125rem;
  color: #D4D4D8;
  font-size: .6875rem;
  font-weight: var(--gras-bouton);
}

.uc-carte em {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--c);
  color: var(--encre);
  font-size: .5625rem;
  font-style: normal;
  font-weight: var(--gras-titre);
}

/* Le jeton finit dans la troisième colonne : un pas = une colonne + l'écart */
.uc-jeton {
  position: absolute;
  bottom: .5rem;
  left: .5rem;
  width: calc((100% - 1rem) / 3 - 1rem);
  border-color: var(--violet);
  background: #24223F;
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .8);
  transform: translateX(calc(200% + 3rem));
}

.uc-jeton i {
  justify-self: start;
  margin-bottom: .1875rem;
  padding: .0625rem .375rem;
  border-radius: var(--pilule);
  background: var(--violet);
  color: var(--encre);
  font-size: .5625rem;
  font-style: normal;
  font-weight: var(--gras-bouton);
  white-space: nowrap;
}

.uc-relance {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .625rem;
  border-radius: .5rem;
  background: #18181B;
  color: var(--blanc);
  font-weight: 500;
}

.uc-relance::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238079F7' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* La notification qui annonce la nouvelle demande */
.crm-toast {
  position: absolute;
  top: 2.75rem;
  right: .75rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .875rem .5rem .5rem;
  border: 1px solid #3A3A40;
  border-radius: .625rem;
  background: #222226;
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .9);
  opacity: 0;
}

.crm-toast i {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: .4375rem;
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2' fill='none' stroke='%230B0B0C' stroke-width='1.8'/%3E%3Cpath d='M4 7l8 6 8-6' fill='none' stroke='%230B0B0C' stroke-width='1.8'/%3E%3C/svg%3E") center / 60% no-repeat;
}

.crm-toast b { display: block; color: var(--blanc); font-weight: var(--gras-bouton); }

/* Sur téléphone, les colonnes sont étroites : on garde le nom et le montant */
@media (max-width: 35.99em) {
  .ui-crm { padding-inline: var(--e-3); }
  .uc-col > p span,
  .uc-carte em { display: none; }
  .uc-carte small { white-space: nowrap; }
}

@media (min-width: 36em) {
  .crm { grid-template-columns: 2.75rem minmax(0, 1fr); }

  .crm-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: .75rem 0;
    border-right: 1px solid var(--trait-sombre);
    background: #0F0F11;
  }

  .crm-chercher { display: block; }
}

/* ---------- 03 : un scénario d'automatisation qui s'exécute ---------- */
.flux {
  display: grid;
  gap: .875rem;
  padding: .875rem 1rem 1rem;
  background-image: radial-gradient(#26262B 1px, transparent 1px);
  background-size: 14px 14px;
}

.uf-titre { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.uf-titre b { color: var(--blanc); font-size: .875rem; font-weight: var(--gras-titre); }

.uf-etat {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--violet);
  font-weight: var(--gras-bouton);
}

.uf-etat::before {
  content: "";
  width: 1.75rem;
  height: 1rem;
  border-radius: var(--pilule);
  background: var(--violet) radial-gradient(circle at calc(100% - .5rem) 50%, var(--encre) .3125rem, transparent .34rem);
}

.uf-etapes {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Le fil entre les étapes, puis le fil violet qui le parcourt */
.uf-etapes::before,
.uf-etapes::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 2px;
  margin-left: -1px;
  background: #34343A;
}

.uf-etapes::after { background: var(--violet); transform-origin: top; }

.uf-n {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .75rem;
  width: min(100%, 21rem);
  padding: .625rem 2.5rem .625rem .625rem;
  border: 1px solid #2E2E33;
  border-radius: .75rem;
  background: #1A1A1E;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .9);
}

.uf-n > i {
  flex: none;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: .5rem;
  background: var(--fond-ic) var(--ic) center / 1.125rem no-repeat;
}

.uf-n > span { min-width: 0; }
.uf-n small { display: block; color: var(--gris-discret); font-size: .625rem; font-weight: var(--gras-bouton); letter-spacing: .06em; text-transform: uppercase; }
.uf-n b { display: block; color: var(--blanc); font-size: .8125rem; font-weight: var(--gras-bouton); }
.uf-n em { display: block; overflow: hidden; color: #A8A9AD; font-size: .6875rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }

/* La coche de l'étape réussie */
.uf-n::after,
.uf-journal i {
  content: "";
  flex: none;
  border-radius: 50%;
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%230B0B0C' stroke-width='1.6'/%3E%3C/svg%3E") center / 70% no-repeat;
}

.uf-n::after { position: absolute; right: .75rem; top: 50%; width: 1.125rem; height: 1.125rem; margin-top: -.5625rem; }

.uf-declic { --fond-ic: #2A2747; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ABA6FF' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M13 3L5 13.5h6L10 21l8-10.5h-6z'/%3E%3C/svg%3E"); }
.uf-recherche { --fond-ic: #26262B; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BDBEC0' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.6-4.6'/%3E%3C/svg%3E"); }
.uf-condition { --fond-ic: #3A2F1C; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8B04B' stroke-width='1.8'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Ccircle cx='6' cy='19' r='2'/%3E%3Ccircle cx='18' cy='19' r='2'/%3E%3Cpath d='M12 7v3c0 3-6 3-6 7M12 10c0 3 6 3 6 7'/%3E%3C/svg%3E"); }
.uf-crm { --fond-ic: #1C2C3A; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236CB4EE' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.5'/%3E%3Cpath d='M5 19.5c1-3.6 3.7-5.5 7-5.5s6 1.9 7 5.5'/%3E%3C/svg%3E"); }

.uf-journal {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .625rem .75rem;
  border: 1px solid var(--violet);
  border-radius: .75rem;
  background: #1A1930;
  color: #ABA6FF;
}

.uf-journal i { width: 1.5rem; height: 1.5rem; }
.uf-journal b { display: block; color: var(--blanc); font-weight: var(--gras-bouton); }

/* ---------- 04 : une conversation avec l'IA, vérifiée ---------- */
.ia { display: flex; flex-direction: column; gap: .875rem; padding: 1rem; }

.ui-msg { max-width: 88%; }

.ui-msg-moi {
  align-self: flex-end;
  padding: .5rem .5rem .625rem;
  border-radius: 1rem 1rem .25rem 1rem;
  background: #2A2A30;
  color: var(--blanc);
}

.ui-msg-moi > p:last-child { padding: 0 .375rem; }

.ia-pj {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  padding: .375rem .75rem .375rem .375rem;
  border: 1px solid #3A3A40;
  border-radius: .625rem;
  background: #1C1C20;
  color: var(--gris-discret);
  font-size: .6875rem;
}

.ia-pj i {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: .4375rem;
  background: #1C2C3A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236CB4EE' stroke-width='1.8'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2'/%3E%3Cpath d='M4 7l8 6 8-6'/%3E%3C/svg%3E") center / 60% no-repeat;
}

.ia-pj b { display: block; color: var(--blanc); font-size: .75rem; font-weight: var(--gras-bouton); }

.ui-msg-ia {
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: .625rem;
  max-width: none;
}

.ia-avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c.6 4.6 3.4 7.4 8 8-4.6.6-7.4 3.4-8 8-.6-4.6-3.4-7.4-8-8 4.6-.6 7.4-3.4 8-8z' fill='%230B0B0C'/%3E%3C/svg%3E") center / 62% no-repeat;
}

.ui-points {
  position: absolute;
  left: 2.25rem;
  top: .5rem;
  display: flex;
  gap: .3125rem;
  opacity: 0;
}

.ui-points i { width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--gris-discret); }

.ia-texte { display: grid; gap: .5rem; color: #D4D4D8; font-size: .78rem; line-height: 1.5; }
.ia-texte b { color: var(--blanc); }

.ia-brouillon {
  padding: .625rem .75rem;
  border-left: 2px solid var(--violet);
  border-radius: 0 .5rem .5rem 0;
  background: #1A1A1E;
  color: #E6E6E9;
}

.ia-actions { display: flex; flex-wrap: wrap; gap: .375rem; }

.ia-actions span {
  padding: .1875rem .5rem;
  border: 1px solid #34343A;
  border-radius: .375rem;
  color: #A8A9AD;
  font-size: .6875rem;
}

.ui-verifs { display: flex; flex-wrap: wrap; gap: .5rem; }

.ui-verifs span {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .25rem .75rem .25rem .375rem;
  border: 1px solid var(--violet);
  border-radius: var(--pilule);
  color: var(--violet);
  font-size: .6875rem;
  font-weight: var(--gras-bouton);
}

.ui-verifs span::before { width: 1rem; height: 1rem; margin-top: 0; }

.ui-saisie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .375rem .375rem .375rem 1rem;
  border: 1px solid #34343A;
  border-radius: var(--pilule);
  background: var(--encre);
  color: var(--gris-discret);
}

.ui-saisie i {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E") center / 55% no-repeat;
}

/* ==========================================================================
   Galerie des réalisations
   ========================================================================== */
.galerie { position: relative; }

.galerie-pin { padding-block: var(--e-section); }

.galerie-tete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-5);
  margin-bottom: var(--e-6);
}

.galerie-compteur {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  color: var(--discret);
  font-variant-numeric: tabular-nums;
}

.galerie-compteur b {
  color: var(--titre);
  font-size: clamp(2.5rem, 1.8rem + 2.4vw, 4.5rem);
  font-weight: var(--gras-titre);
  line-height: 1;
  letter-spacing: -.04em;
}

.galerie-piste {
  position: relative;
  display: flex;
  gap: var(--e-5);
  padding: 0 max(var(--gouttiere), calc((100vw - var(--largeur)) / 2)) var(--e-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gouttiere), calc((100vw - var(--largeur)) / 2));
  scrollbar-width: none;
}

.galerie-piste::-webkit-scrollbar { display: none; }

.pj {
  flex: none;
  width: min(84vw, 46rem);
  scroll-snap-align: start;
}

.pj-lien { display: block; text-decoration: none; }
.pj .ecran { box-shadow: var(--ombre-fenetre); }
.pj .ecran-image img { transition: transform 1.2s var(--sortie); }
.pj-lien:hover .ecran { border-color: #3A3A40; }
.pj-lien:hover .ecran-image img { transform: scale(1.04); }

.pj-texte { display: grid; gap: var(--e-3) var(--e-5); padding-top: var(--e-5); }
.pj-lieu { color: var(--accent-texte); font-size: var(--t-petit); font-weight: var(--gras-bouton); }

.pj h3 {
  margin-top: .25rem;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  letter-spacing: -.025em;
  transition: color .25s;
}

.pj-lien:hover h3 { color: var(--violet); }
.pj-texte p:not(.pj-lieu) { font-size: 1rem; }
.pj .projet-fonctions { margin-top: var(--e-3); }

.pj-fin {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--e-5);
  width: min(80vw, 24rem);
  padding: var(--e-6);
  border: 1px dashed var(--bordure);
  border-radius: var(--rayon-l);
  scroll-snap-align: start;
}

.pj-fin-titre {
  color: var(--titre);
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem);
  font-weight: var(--gras-titre);
  line-height: 1.12;
  letter-spacing: -.025em;
}

.galerie-barre {
  height: 2px;
  margin-top: var(--e-5);
  overflow: hidden;
  border-radius: 2px;
  background: var(--bordure);
}

.galerie-barre i {
  display: block;
  height: 100%;
  background: var(--violet);
  transform: scaleX(var(--g, 0));
  transform-origin: left;
}

@media (min-width: 62em) {
  .pj { width: min(56vw, 50rem, calc((100vh - 21rem) * 1.6)); }
  .pj-texte { grid-template-columns: 1fr 1.35fr; }
}

/* Épinglée (posé en JS sur ordinateur) : la piste glisse au lieu de défiler */
.galerie.epingle .galerie-pin {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  padding-block: var(--e-5) 0;
  overflow: hidden;
}

.galerie.epingle .galerie-piste {
  overflow: visible;
  scroll-snap-type: none;
  transform: translate3d(var(--gx, 0), 0, 0);
  will-change: transform;
}

/* ==========================================================================
   Bande défilante
   ========================================================================== */
.bande {
  display: grid;
  gap: .25rem;
  padding-block: var(--e-6);
  overflow: hidden;
  border-block: 1px solid var(--bordure);
}

.bande-ligne { display: flex; white-space: nowrap; }

.bande-piste {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(1.25rem, .8rem + 2vw, 3rem);
  padding-right: clamp(1.25rem, .8rem + 2vw, 3rem);
  color: var(--titre);
  font-size: clamp(2.5rem, 1.4rem + 5vw, 6.5rem);
  font-weight: var(--gras-titre);
  line-height: 1.1;
  letter-spacing: -.035em;
  will-change: transform;
}

.bande-piste i,
.appel-piste i {
  flex: none;
  width: .16em;
  height: .62em;
  background: var(--violet);
  transform: skewX(-30deg);
}

.bande-contour .bande-piste { color: transparent; -webkit-text-stroke: 1px #3E3E46; }
.bande-contour .bande-piste i { background: transparent; border: 1px solid #3E3E46; }

/* ==========================================================================
   Méthode : une scène à gauche, la frise à droite
   ========================================================================== */
.recit { display: grid; gap: var(--e-7); margin-bottom: var(--e-6); }
.recit-scene { display: none; }

@media (min-width: 62em) {
  .recit { grid-template-columns: 1fr 1fr; gap: var(--e-9); align-items: start; }

  .recit-scene {
    position: sticky;
    top: calc(50vh - 15.5rem);
    display: block;
    height: 31rem;
    overflow: hidden;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-l);
    background-color: var(--carte);
    background-image: radial-gradient(#26262B 1px, transparent 1px);
    background-size: 18px 18px;
  }

  .recit .etapes { gap: 0; }
  .recit .etapes li { min-height: 42vh; }
  .recit .etapes li:last-child { min-height: 0; }
}

.rs-num {
  position: absolute;
  top: 1.25rem;
  left: 1.75rem;
  color: transparent;
  font-size: 4.5rem;
  font-weight: var(--gras-titre);
  line-height: 1;
  letter-spacing: -.05em;
  -webkit-text-stroke: 1px #3A3A42;
}

.rs-num b { color: var(--violet); -webkit-text-stroke: 0; }

.rs-vue {
  position: absolute;
  inset: 6.5rem 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .75rem;
  font-size: .875rem;
  line-height: 1.4;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(28px) scale(.97);
  transition: opacity .6s var(--sortie), transform .7s var(--sortie), filter .6s;
  pointer-events: none;
}

.recit-scene[data-etape="1"] .rs-appel,
.recit-scene[data-etape="2"] .rs-devis,
.recit-scene[data-etape="3"] .rs-chantier,
.recit-scene[data-etape="4"] .rs-suivi { opacity: 1; filter: none; transform: none; }

/* 1 · l'appel */
.rs-appel { align-items: center; text-align: center; }

.rs-avatar {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 0 10px rgba(128, 121, 247, .14), 0 0 0 22px rgba(128, 121, 247, .06);
  color: var(--encre);
  font-size: 1.375rem;
  font-weight: var(--gras-titre);
}

.rs-appel-nom { margin-top: var(--e-4); }
.rs-appel-nom b { display: block; color: var(--blanc); font-size: 1.125rem; font-weight: var(--gras-titre); }
.rs-appel-nom span { color: var(--gris-discret); }

.rs-onde { display: flex; align-items: center; gap: 4px; height: 2.5rem; }
.rs-onde i { width: 4px; height: 100%; border-radius: 2px; background: var(--violet); transform: scaleY(.3); }

.rs-puces { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }

.rs-puces span {
  padding: .3125rem .75rem;
  border: 1px solid var(--trait-sombre);
  border-radius: var(--pilule);
  background: var(--carte-2);
  color: var(--gris-texte);
  font-size: .75rem;
}

/* 2 · le devis, sur papier */
.rs-devis {
  inset: 6.5rem 4.5rem 2rem;
  justify-content: flex-start;
  gap: 0;
  padding: 1.5rem 1.5rem 1.25rem;
  border-radius: .75rem;
  background: var(--papier);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8);
  color: var(--ardoise);
  rotate: -2deg;
}

.rs-doc-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: .75rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--encre);
}

.rs-doc-tete b { color: var(--encre); font-size: 1.25rem; font-weight: var(--gras-titre); }
.rs-doc-tete span { color: var(--ardoise-discret); font-size: .75rem; }

.rs-ligne,
.rs-total {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px dashed var(--trait-clair);
}

.rs-ligne b { color: var(--encre); font-weight: var(--gras-bouton); }
.rs-barre span { text-decoration: line-through; }
.rs-barre b { color: var(--violet-fonce); font-size: .75rem; }
.rs-total { border-bottom: 0; color: var(--encre); font-weight: var(--gras-titre); }

.rs-tampon {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  padding: .3125rem .75rem;
  border: 2px solid var(--violet-fonce);
  border-radius: .375rem;
  color: var(--violet-fonce);
  font-weight: var(--gras-titre);
  rotate: -10deg;
}

/* 3 · le site se construit */
.rs-chantier {
  inset: 6.5rem 3.5rem 2rem;
  justify-content: flex-start;
  gap: .75rem;
  padding: 1rem;
  border: 1px solid var(--trait-sombre);
  border-radius: .875rem;
  background: var(--carte-1);
}

.rs-nav { display: flex; gap: .5rem; justify-content: flex-end; }
.rs-nav i { width: 2.5rem; height: .5rem; border-radius: 4px; background: #34343A; }
.rs-nav i:first-child { width: 4rem; margin-right: auto; background: var(--violet); }

.rs-bloc-hero {
  display: grid;
  align-content: center;
  gap: .5rem;
  height: 8rem;
  padding: 1rem;
  border-radius: .625rem;
  background: #24223F;
}

.rs-bloc-hero i { height: .75rem; border-radius: 4px; background: #5A55B0; }
.rs-bloc-hero i:nth-child(1) { width: 70%; height: 1.125rem; background: var(--violet); }
.rs-bloc-hero i:nth-child(2) { width: 52%; }
.rs-bloc-hero i:nth-child(3) { width: 6rem; height: 1.5rem; margin-top: .25rem; border-radius: var(--pilule); background: var(--violet); }

.rs-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.rs-cartes i { height: 4.5rem; border: 1px solid var(--trait-sombre); border-radius: .5rem; background: var(--carte-2); }

.rs-test {
  align-self: flex-start;
  margin-top: auto;
  padding: .3125rem .75rem;
  border-radius: var(--pilule);
  background: var(--violet);
  color: var(--encre);
  font-size: .75rem;
  font-weight: var(--gras-bouton);
}

/* 4 · le suivi */
.rs-suivi { justify-content: center; gap: .625rem; }

.rs-suivi-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: .25rem; }
.rs-suivi-tete b { color: var(--blanc); font-size: 1.125rem; font-weight: var(--gras-titre); }

.rs-en-ligne {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .25rem .75rem;
  border: 1px solid var(--violet);
  border-radius: var(--pilule);
  color: var(--violet);
  font-size: .75rem;
  font-weight: var(--gras-bouton);
}

.rs-en-ligne::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--violet); }

.rs-tache {
  position: relative;
  padding: .75rem 1rem .75rem 2.75rem;
  border: 1px solid var(--trait-sombre);
  border-radius: .75rem;
  background: var(--carte-1);
  color: var(--blanc);
}

.rs-tache::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: -.5625rem;
  border-radius: 50%;
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%230B0B0C' stroke-width='1.6'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* ==========================================================================
   Appel final : le panneau sur une phrase géante
   ========================================================================== */
.appel { position: relative; overflow: hidden; }

.appel-defile {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  pointer-events: none;
}

.appel-piste {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
  color: transparent;
  font-size: clamp(5rem, 2.5rem + 11vw, 14rem);
  font-weight: var(--gras-titre);
  line-height: 1;
  letter-spacing: -.045em;
  white-space: nowrap;
  -webkit-text-stroke: 1px #3A3A42;
}

.appel-piste i { background: transparent; border: 1px solid #3A3A42; }

.appel .wrap { position: relative; z-index: 1; }

.appel-panneau {
  background: rgba(20, 20, 22, .84);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.appel-panneau > * { position: relative; }

/* ==========================================================================
   Tâches : le bureau d'aujourd'hui se range dans un seul outil,
   puis la vitrine des trois outils, chacun joué comme une vraie interface
   ========================================================================== */
.aa {
  display: grid;
  gap: var(--e-7);
  align-items: center;
}

.aa-texte .chapo { margin-bottom: var(--e-6); }

.aa-bascule {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: .3125rem;
  border: 1px solid var(--bordure);
  border-radius: var(--pilule);
  background: var(--carte);
}

.aa-bascule button {
  position: relative;
  z-index: 1;
  min-height: 2.75rem;
  padding: .5rem 1.125rem;
  border: 0;
  border-radius: var(--pilule);
  background: none;
  color: var(--texte);
  font: inherit;
  font-size: .9375rem;
  font-weight: var(--gras-bouton);
  white-space: nowrap;
  cursor: pointer;
  transition: color .3s;
}

.aa-bascule button[aria-pressed="true"] { color: var(--encre); }

.aa-bascule > i {
  position: absolute;
  top: .3125rem;
  bottom: .3125rem;
  left: .3125rem;
  width: calc(50% - .3125rem);
  border-radius: var(--pilule);
  background: var(--violet);
  transition: transform .5s var(--sortie);
}

.aa-bascule[data-actif="apres"] > i { transform: translateX(100%); }

/* La liste change de ton avec la scène : le problème, puis la solution */
.aa-liste {
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-6);
}

.aa-liste li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  align-items: center;
  gap: var(--e-3);
  color: var(--titre);
}

.aa-liste li::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid #3A3A40;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.2 4.2l3.6 3.6M7.8 4.2L4.2 7.8' stroke='%238E8F93' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 80% no-repeat;
  transition: background-color .4s, border-color .4s;
}

.aa-liste .av,
.aa-liste .ap {
  grid-area: 1 / 2;
  transition: opacity .4s, transform .5s var(--sortie), visibility .4s;
  transition-delay: calc(var(--i) * 90ms);
}

.aa-liste .av { color: var(--texte); }
.aa-liste .ap { opacity: 0; visibility: hidden; transform: translateY(8px); }

.taches[data-etat="apres"] .aa-liste .av { opacity: 0; visibility: hidden; transform: translateY(-8px); }
.taches[data-etat="apres"] .aa-liste .ap { opacity: 1; visibility: visible; transform: none; }

.taches[data-etat="apres"] .aa-liste li::before {
  border-color: var(--violet);
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%230B0B0C' stroke-width='1.6'/%3E%3C/svg%3E") center / 70% no-repeat;
  transition-delay: calc(var(--i) * 90ms);
}

/* ---------- La scène : un bureau, puis une fenêtre de CRM ---------- */
.aa-scene {
  position: relative;
  height: 31rem;
  overflow: hidden;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background: var(--carte);
  font-size: .6875rem;
  line-height: 1.35;
}

.aa-app {
  position: absolute;
  inset: .75rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #34343A;
  border-radius: .875rem;
  background: #121214;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .5s, transform .8s var(--sortie);
}

.aa-app .app-barre { height: 2.25rem; flex: none; }

.aa-app-tete {
  display: flex;
  align-items: center;
  gap: .625rem;
  height: 3.25rem;
  flex: none;
  padding: 0 1rem;
  border-bottom: 1px solid var(--trait-sombre);
  color: var(--gris-discret);
}

.aa-app-tete b { color: var(--blanc); font-size: .9375rem; font-weight: var(--gras-titre); }

.aa-app-tete em {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-left: auto;
  padding: .1875rem .625rem;
  border-radius: var(--pilule);
  background: rgba(111, 207, 151, .12);
  color: #6FCF97;
  font-style: normal;
  font-weight: var(--gras-bouton);
  white-space: nowrap;
}

.aa-app-tete em::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.aa-app-pied {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding: .75rem 1rem;
  border-top: 1px solid var(--trait-sombre);
  color: var(--gris-texte);
}

.aa-app-pied::before {
  content: "";
  flex: none;
  width: .875rem;
  height: .875rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M7 1L2.5 7H6l-1 4 4.5-6H6z' fill='%238079F7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.aa-scene[data-etat="apres"] .aa-app { opacity: 1; transform: none; }

/* Chaque objet du bureau. « Avec les bons outils », il devient une ligne. */
.aa-objet {
  --t: calc(var(--i) * 70ms);
  position: absolute;
  z-index: 1;
  left: var(--x);
  top: var(--y);
  width: var(--l);
  height: var(--h);
  overflow: hidden;
  border: 1px solid #34343A;
  border-radius: 10px;
  background: #1C1C20;
  box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .85);
  color: var(--gris-texte);
  rotate: var(--r);
  transition:
    left .9s var(--sortie) var(--t),
    top .9s var(--sortie) var(--t),
    width .9s var(--sortie) var(--t),
    height .9s var(--sortie) var(--t),
    rotate .9s var(--sortie) var(--t),
    border-radius .6s var(--t),
    background-color .5s var(--t),
    border-color .5s var(--t),
    box-shadow .5s var(--t);
}

.aa-objet .av { transition: opacity .3s; }

.aa-objet .ap {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .625rem;
  padding: 0 .75rem;
  opacity: 0;
  transition: opacity .3s;
}

.aa-av {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--c);
  color: var(--encre);
  font-size: .625rem;
  font-style: normal;
  font-weight: var(--gras-titre);
}

.aa-objet .ap b {
  overflow: hidden;
  color: var(--blanc);
  font-size: .8125rem;
  font-weight: var(--gras-bouton);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aa-objet .ap small { display: block; color: var(--gris-discret); font-size: .6875rem; font-weight: 400; }

.aa-statut {
  display: none;
  align-items: center;
  gap: .375rem;
  justify-self: start;
  padding: .1875rem .5625rem;
  border-radius: var(--pilule);
  background: color-mix(in srgb, var(--c) 15%, transparent);
  color: var(--c);
  font-weight: var(--gras-bouton);
  white-space: nowrap;
}

.aa-statut::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.aa-objet .ap em {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  color: var(--violet);
  font-style: normal;
  font-weight: var(--gras-bouton);
  white-space: nowrap;
}

.aa-objet .ap em::before {
  content: "";
  width: .75rem;
  height: .75rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M7 1L2.5 7H6l-1 4 4.5-6H6z' fill='%238079F7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Le tableur */
.aa-tableur { --x: 4%; --y: 5%; --l: 60%; --h: 8.75rem; --r: -3deg; }

.xl-barre {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4375rem .625rem;
  border-bottom: 1px solid var(--trait-sombre);
  background: #232327;
  color: var(--gris-texte);
  white-space: nowrap;
}

.xl-barre b {
  display: grid;
  flex: none;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border-radius: 3px;
  background: #1F7A4D;
  color: var(--blanc);
  font-size: .5625rem;
}

.xl-barre span { overflow: hidden; text-overflow: ellipsis; }

.xl-grille {
  display: grid;
  grid-template-columns: 1.375rem repeat(3, minmax(0, 1fr));
  font-size: .6875rem;
}

.xl-grille > * {
  overflow: hidden;
  padding: .25rem .4375rem;
  border-right: 1px solid #2A2A2E;
  border-bottom: 1px solid #2A2A2E;
  white-space: nowrap;
}

.xl-grille i { background: #202024; color: var(--gris-discret); font-style: normal; text-align: center; }
.xl-grille span { color: var(--gris-texte); }
.xl-jaune { background: rgba(242, 201, 76, .2); color: #F2C94C !important; }
.xl-actif { outline: 2px solid #3FAE6A; outline-offset: -2px; }
.xl-erreur { color: #F28B82 !important; }

/* La boîte mail */
.aa-mail { --x: 40%; --y: 21%; --l: 56%; --h: 8.25rem; --r: 2.5deg; }

.ml-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--trait-sombre);
  background: #232327;
}

.ml-tete b { color: var(--blanc); font-weight: var(--gras-bouton); }

.ml-tete span {
  padding: .0625rem .4375rem;
  border-radius: var(--pilule);
  background: #E5484D;
  color: var(--blanc);
  font-size: .625rem;
  font-weight: var(--gras-titre);
}

.ml-ligne {
  position: relative;
  display: grid;
  padding: .3125rem .75rem .3125rem 1.375rem;
  border-bottom: 1px solid #26262A;
}

.ml-ligne b { color: var(--gris-texte); font-weight: var(--gras-bouton); }
.ml-ligne span { overflow: hidden; color: var(--gris-discret); text-overflow: ellipsis; white-space: nowrap; }
.ml-nonlu b { color: var(--blanc); }

.ml-nonlu::before {
  content: "";
  position: absolute;
  left: .5625rem;
  top: .6875rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--violet);
}

/* Le post-it */
.aa-postit {
  --x: 7%;
  --y: 43%;
  --l: 33%;
  --h: 7rem;
  --r: -6deg;
  border-color: transparent;
  border-radius: 3px;
  background: #F1DD8A;
  color: #3A3320;
}

.aa-postit .av { position: relative; display: grid; gap: .25rem; padding: 1.125rem .875rem .75rem; }

.aa-postit .av::before {
  content: "";
  position: absolute;
  top: -.25rem;
  left: 50%;
  width: 3.5rem;
  height: .875rem;
  margin-left: -1.75rem;
  background: rgba(255, 255, 255, .45);
  rotate: 3deg;
}

.aa-postit .av b { font-size: .9375rem; font-weight: var(--gras-titre); line-height: 1.2; }
.aa-postit span { font-style: italic; }
.aa-postit svg { width: 70%; height: .5rem; fill: none; stroke: #D9534F; stroke-width: 2.2; stroke-linecap: round; }

/* La fiche papier, avec une trace de café */
.aa-papier {
  --x: 51%;
  --y: 52%;
  --l: 42%;
  --h: 8.25rem;
  --r: 5deg;
  border-color: transparent;
  border-radius: 4px;
  background: #FAFAF7;
  color: #2A2A2E;
}

.aa-papier .av { position: relative; display: grid; gap: .5rem; height: 100%; padding: .875rem 1rem; }

.aa-papier .av::after {
  content: "";
  position: absolute;
  right: -1.25rem;
  bottom: -1.5rem;
  width: 4rem;
  height: 4rem;
  border: 4px solid rgba(140, 98, 57, .18);
  border-radius: 50%;
}

.aa-papier .av b { font-size: .625rem; font-weight: var(--gras-titre); letter-spacing: .08em; text-transform: uppercase; }
.pa-champ { display: flex; align-items: center; gap: .375rem; color: #6B6A66; }
.pa-champ svg { width: 5.5rem; height: .75rem; fill: none; stroke: #2B3A8F; stroke-width: 1.6; stroke-linecap: round; }
.pa-cases { display: flex; gap: .375rem; }
.pa-cases i { width: .75rem; height: .75rem; border: 1px solid #9A9890; }

.pa-cases .pa-x {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2L2 10' stroke='%232B3A8F' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* La notification d'appels manqués */
.aa-appels {
  --x: 17%;
  --y: 76%;
  --l: 52%;
  --h: 4.875rem;
  --r: -2deg;
  border-color: #3A3A40;
  border-radius: 14px;
  background: #2A2A2E;
}

.aa-appels .av { display: grid; gap: .0625rem; padding: .5625rem .75rem; }

.nt-tete {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin-bottom: .1875rem;
  color: var(--gris-discret);
  font-size: .625rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.nt-tete i {
  width: .875rem;
  height: .875rem;
  border-radius: 4px;
  background: #34C759 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.6 2.2l1.2 2-.8 1a5 5 0 0 0 2.8 2.8l1-.8 2 1.2-.6 1.6C5.6 10 2 6.4 2 2.8z' fill='%23fff'/%3E%3C/svg%3E") center / 80% no-repeat;
}

.nt-tete span { margin-left: auto; text-transform: none; letter-spacing: 0; }
.aa-appels .av b { color: var(--blanc); font-size: .8125rem; font-weight: var(--gras-bouton); }
.aa-appels .av > span { color: var(--gris-texte); }

/* Avec les bons outils : tout se range dans le CRM */
.aa-scene[data-etat="apres"] .aa-objet {
  top: calc(6.75rem + var(--i) * 3.875rem);
  left: 1.375rem;
  width: calc(100% - 2.75rem);
  height: 3.375rem;
  border-color: var(--trait-sombre);
  border-radius: .625rem;
  background: #18181B;
  box-shadow: none;
  color: var(--gris-texte);
  rotate: 0deg;
}

.aa-scene[data-etat="apres"] .av { opacity: 0; }
.aa-scene[data-etat="apres"] .ap { opacity: 1; transition: opacity .4s calc(.45s + var(--i) * 70ms); }

@media (min-width: 40em) {
  .aa-scene { font-size: .75rem; }
  .aa-objet .ap { grid-template-columns: auto minmax(0, 1fr) 7.75rem 9.75rem; }
  .aa-statut { display: inline-flex; }
}

@media (min-width: 62em) {
  .aa { grid-template-columns: 1fr 1.15fr; gap: var(--e-9); }
  .aa-scene { height: 32rem; }
  .aa-scene[data-etat="apres"] .aa-objet { top: calc(7rem + var(--i) * 4rem); height: 3.5rem; }
}

.aa-liens { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-6); margin-top: var(--e-6); }


/* ==========================================================================
   Mouvement : uniquement avec JS et sans demande de réduction
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  .hero-badge span { animation: pouls 2.4s ease-out infinite; }

  /* Cartes flottantes : elles arrivent, puis respirent */
  .js .flottant {
    opacity: 0;
    animation: flottant-entree .9s var(--sortie) forwards, flotte 7s ease-in-out 2.6s infinite;
  }

  .js.charge .flottant-google { animation-delay: 1.6s, 2.6s; }
  .js.charge .flottant-demande { animation-delay: 2.4s, 3.4s; }
  .js:not(.charge) .flottant { animation-play-state: paused; }
  .js .fl-frappe { animation: frappe 1.2s steps(20) 2.1s both; }
  .js .flottant-demande .fl-icone { animation: sonne .9s ease-in-out 3.1s 2; }

  .appel-piste { animation: defile 60s linear infinite; }

  /* 01 · recherche sur téléphone */
  .js .tel { animation: monte .7s var(--sortie) .1s both; }
  .js .g-frappe { animation: frappe 1.2s steps(17) .5s both; }
  .js .g-onglets { animation: monte .4s var(--sortie) 1.7s both; }
  .js .g-local { animation: monte .5s var(--sortie) 1.9s both; }
  .js .g-epingle { animation: epingle .5s var(--sortie) both; }
  .js .g-epingle:nth-of-type(1) { animation-delay: 2.2s; }
  .js .g-epingle:nth-of-type(2) { animation-delay: 2.35s; }
  .js .g-epingle.g-moi { animation: epingle .5s var(--sortie) 2.55s both, halo 2s ease-out 3.1s infinite; }
  .js .g-etiquette { animation: monte .4s var(--sortie) 2.8s both; }
  .js .g-fiche { animation: monte .5s var(--sortie) both; }
  .js .g-fiche:nth-of-type(2) { animation-delay: 2.5s; }
  .js .g-fiche:nth-of-type(3) { animation-delay: 2.7s; }
  .js .g-site { animation: monte .6s var(--sortie) 3s both; }

  /* 02 · CRM : la notification, puis la carte qui avance */
  .js .crm-toast { animation: toast 3.2s var(--sortie) .3s both; }
  .js .uc-jeton { animation: crm 4.2s var(--sortie) .8s both; }
  .js .uc-compte::before { animation: efface .2s 4.35s both; }
  .js .uc-compte::after { animation: visible .2s 4.35s both; }
  .js .uc-relance { animation: glisse .6s var(--sortie) 4.6s both; }

  /* 03 · automatisation : chaque étape s'allume puis se coche */
  .js .uf-etapes::after { animation: descend 2.2s var(--sortie) .5s both; }
  .js .uf-n { animation: monte .45s var(--sortie) both, actif 1s ease-out both; }
  .js .uf-n::after { animation: apparait-pop .35s var(--sortie) both; }
  .js .uf-n:nth-child(1) { animation-delay: .3s, .5s; }
  .js .uf-n:nth-child(2) { animation-delay: .9s, 1.1s; }
  .js .uf-n:nth-child(3) { animation-delay: 1.5s, 1.7s; }
  .js .uf-n:nth-child(4) { animation-delay: 2.1s, 2.3s; }
  .js .uf-n:nth-child(1)::after { animation-delay: .8s; }
  .js .uf-n:nth-child(2)::after { animation-delay: 1.4s; }
  .js .uf-n:nth-child(3)::after { animation-delay: 2s; }
  .js .uf-n:nth-child(4)::after { animation-delay: 2.6s; }
  .js .uf-journal { animation: monte .5s var(--sortie) 3.1s both; }

  /* 04 · IA : la réponse s'écrit ligne à ligne */
  .js .ui-msg-moi { animation: monte .5s var(--sortie) .3s both; }
  .js .ia-avatar { animation: apparait-pop .4s var(--sortie) 1s both; }
  .js .ui-points { animation: pense 1.2s 1.1s forwards; }
  .js .ui-points i { animation: rebond .6s ease-in-out infinite; }
  .js .ui-points i:nth-child(2) { animation-delay: .1s; }
  .js .ui-points i:nth-child(3) { animation-delay: .2s; }
  .js .ia-resume { animation: deroule .5s steps(2) 2.3s both; }
  .js .ia-brouillon { animation: deroule 1.1s steps(4) 2.8s both; }
  .js .ia-actions { animation: monte .4s var(--sortie) 4s both; }
  .js .ui-verifs span { animation: apparait-pop .45s var(--sortie) both; }
  .js .ui-verifs span:nth-child(1) { animation-delay: 4.3s; }
  .js .ui-verifs span:nth-child(2) { animation-delay: 4.5s; }

  /* Méthode : chaque vue joue en arrivant */
  .rs-onde i { animation: onde 1.1s ease-in-out infinite; }
  .rs-onde i:nth-child(3n) { animation-delay: -.3s; }
  .rs-onde i:nth-child(3n + 1) { animation-delay: -.65s; }
  .rs-onde i:nth-child(4n) { animation-duration: .9s; }

  .recit-scene[data-etape="1"] .rs-avatar { animation: apparait-pop .6s var(--sortie) .1s both; }
  .recit-scene[data-etape="2"] .rs-ligne,
  .recit-scene[data-etape="2"] .rs-total { animation: monte .45s var(--sortie) both; }
  .recit-scene[data-etape="2"] .rs-ligne:nth-of-type(2) { animation-delay: .2s; }
  .recit-scene[data-etape="2"] .rs-ligne:nth-of-type(3) { animation-delay: .35s; }
  .recit-scene[data-etape="2"] .rs-ligne:nth-of-type(4) { animation-delay: .5s; }
  .recit-scene[data-etape="2"] .rs-total { animation-delay: .65s; }
  .recit-scene[data-etape="2"] .rs-tampon { animation: tampon .5s cubic-bezier(.3, 1.6, .5, 1) 1s both; }
  .recit-scene[data-etape="3"] .rs-nav,
  .recit-scene[data-etape="3"] .rs-bloc,
  .recit-scene[data-etape="3"] .rs-cartes i { animation: monte .55s var(--sortie) both; }
  .recit-scene[data-etape="3"] .rs-bloc { animation-delay: .25s; }
  .recit-scene[data-etape="3"] .rs-cartes i:nth-child(1) { animation-delay: .45s; }
  .recit-scene[data-etape="3"] .rs-cartes i:nth-child(2) { animation-delay: .55s; }
  .recit-scene[data-etape="3"] .rs-cartes i:nth-child(3) { animation-delay: .65s; }
  .recit-scene[data-etape="3"] .rs-test { animation: apparait-pop .45s var(--sortie) .9s both; }
  .recit-scene[data-etape="4"] .rs-tache { animation: glisse .45s var(--sortie) both; }
  .recit-scene[data-etape="4"] .rs-tache:nth-of-type(2) { animation-delay: .15s; }
  .recit-scene[data-etape="4"] .rs-tache:nth-of-type(3) { animation-delay: .3s; }
  .recit-scene[data-etape="4"] .rs-tache:nth-of-type(4) { animation-delay: .45s; }
  .recit-scene[data-etape="4"] .rs-tache:nth-of-type(5) { animation-delay: .6s; }
  .rs-en-ligne::before { animation: pouls 2.4s ease-out infinite; }
  .rs-num b { display: inline-block; animation: chiffre .5s var(--sortie); }

  /* Tâches : le désordre respire, puis tout se range */
  .js .aa-scene[data-etat="avant"] .aa-objet { animation: flotte 6s ease-in-out calc(var(--i) * -1.3s) infinite; }
  .js .aa-scene[data-etat="apres"] .ap em { animation: glisse .5s var(--sortie) calc(.8s + var(--i) * .1s) both; }
  .js .aa-scene[data-etat="apres"] .aa-app-pied { animation: monte .5s var(--sortie) 1.5s both; }

  /* Vitrine : la barre de l'onglet actif mesure le temps */
  .vo.auto [aria-selected="true"] .vo-temps { animation: temps-v var(--auto, 8s) linear both; }
  .vo.pause .vo-temps,
  .vo:hover .vo-temps,
  .vo:focus-within .vo-temps { animation-play-state: paused; }

  /* 01 · la recherche se tape, les entreprises arrivent, la liste part dans le CRM */
  .js .pr { animation: monte .6s var(--sortie) .1s both; }
  .js .pr-frappe { animation: frappe 1.1s steps(12) .5s both; }
  .js .pr-sources { animation: apparait-pop .4s var(--sortie) 1.7s both; }
  .js .pr-liste li { animation: glisse .45s var(--sortie) calc(2s + var(--i) * .35s) both; }
  .js .pr-pied { animation: monte .45s var(--sortie) 3.5s both; }

  /* 02 · la liste se coche, le client signe, le PDF part */
  .js .mobile { animation: monte .7s var(--sortie) .1s both; }
  .js .ri-liste li::before { animation: coche .3s var(--sortie) both; }
  .js .ri-liste li:nth-child(1)::before { animation-delay: .8s; }
  .js .ri-liste li:nth-child(2)::before { animation-delay: 1.2s; }
  .js .ri-liste li:nth-child(3)::before { animation-delay: 1.6s; }
  .js .ri-photos i:not(.ri-ajout) { animation: photo .4s var(--sortie) both; }
  .js .ri-photos i:nth-child(1) { animation-delay: 2s; }
  .js .ri-photos i:nth-child(2) { animation-delay: 2.3s; }
  .js .ri-signature path { animation: signe 1.3s ease-in-out 2.8s both; }
  .js .ri-bouton span:first-child { animation: bascule-sortie .3s 4.4s both; }
  .js .ri-bouton span:last-child { animation: bascule-entree .3s 4.5s both; }
  .js .ri-pdf { animation: arrive .7s var(--sortie) 4.9s both; }

  /* 03 · on clique, on tape, la demande arrive dans le CRM */
  .js .dv { animation: monte .6s var(--sortie) .1s both; }
  .js .dv-barre i { animation: remplit .8s var(--sortie) .4s both; }
  .js .dv-choix-1 .dv-curseur { animation: curseur 1s var(--sortie) .6s both; }
  .js .dv-choix-1 { animation: choisit .3s 1s both; }
  .js .dv-choix-2 .dv-curseur { animation: curseur 1s var(--sortie) 1.6s both; }
  .js .dv-choix-2 { animation: choisit .3s 2s both; }
  .js .dv-frappe { animation: frappe .7s steps(5) 2.6s both; }
  .js .dv-envoyer .dv-curseur { animation: curseur 1s var(--sortie) 3.4s both; }
  .js .dv-envoyer span:first-child { animation: bascule-sortie .3s 3.8s both; }
  .js .dv-envoyer span:last-child { animation: bascule-entree .3s 3.9s both; }
  .js .dv-crm { animation: arrive .7s var(--sortie) 4.4s both; }
  .js .dv-crm-tete i { animation: halo 2s ease-out 5s infinite; }
}

@keyframes pouls {
  0% { box-shadow: 0 0 0 0 rgba(128, 121, 247, .55); }
  100% { box-shadow: 0 0 0 10px rgba(128, 121, 247, 0); }
}

@keyframes flottant-entree {
  from { opacity: 0; transform: translateY(18px) scale(.94); }
  to { opacity: 1; transform: none; }
}

@keyframes flotte {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

@keyframes sonne {
  0%, 100% { rotate: 0deg; }
  20% { rotate: -14deg; }
  40% { rotate: 12deg; }
  60% { rotate: -8deg; }
  80% { rotate: 4deg; }
}

@keyframes epingle {
  from { opacity: 0; translate: 0 -14px; }
}

@keyframes halo {
  0% { box-shadow: 0 0 0 0 rgba(128, 121, 247, .5); }
  100% { box-shadow: 0 0 0 16px rgba(128, 121, 247, 0); }
}

@keyframes apparait-pop {
  from { opacity: 0; transform: scale(.8); }
}

@keyframes crm {
  0% { opacity: 0; transform: translate(0, -12px); }
  10%, 32% { opacity: 1; transform: translate(0, 0); }
  50%, 64% { opacity: 1; transform: translate(calc(100% + 1.5rem), 0); }
  84%, 100% { opacity: 1; transform: translate(calc(200% + 3rem), 0); }
}

@keyframes toast {
  0% { opacity: 0; transform: translateY(-8px); }
  12%, 78% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}

@keyframes efface {
  from { opacity: 1; }
}

@keyframes visible {
  from { opacity: 0; }
}

@keyframes actif {
  0% { border-color: #2E2E33; }
  25% { border-color: var(--violet); }
  100% { border-color: #2E2E33; }
}

@keyframes deroule {
  from { clip-path: inset(0 0 100% 0); }
}

@keyframes pense {
  0%, 99% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes rebond {
  0%, 100% { transform: none; }
  50% { transform: translateY(-4px); }
}

@keyframes onde {
  0%, 100% { transform: scaleY(.25); }
  50% { transform: scaleY(1); }
}

@keyframes tampon {
  from { opacity: 0; scale: 1.8; }
}

@keyframes chiffre {
  from { opacity: 0; transform: translateY(40%); }
}

@keyframes temps-v {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes signe {
  from { stroke-dashoffset: 1; }
}

@keyframes remplit {
  from { transform: scaleX(.5); }
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
}

@keyframes curseur {
  0% { opacity: 0; transform: translate(14px, 16px); }
  35% { opacity: 1; transform: none; }
  45% { transform: scale(.8); }
  58% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}

/* ---------- Galerie : la plateforme clients, dessinée en HTML ---------- */
.pj-ui {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1rem;
  background-color: #121214;
  background-image: radial-gradient(#222227 1px, transparent 1px);
  background-size: 16px 16px;
  color: var(--gris-texte);
  font-size: .75rem;
  line-height: 1.35;
}

.pju-nav { display: flex; align-items: center; gap: .375rem; }
.pju-nav b { margin-right: auto; color: var(--blanc); font-size: .9375rem; }
.pju-nav span { padding: .1875rem .625rem; border-radius: var(--pilule); color: var(--gris-discret); font-size: .6875rem; }
.pju-nav .actif { background: var(--violet); color: var(--encre); font-weight: 700; }

.pju-grille { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; flex: 1; min-height: 0; }
.pju-carte { display: grid; align-content: start; gap: .5rem; padding: .75rem; border: 1px solid #26262C; border-radius: .75rem; background: #18181B; overflow: hidden; }
.pju-titre { color: var(--gris-discret); font-size: .625rem; font-weight: 700; }

.pju-msg { display: flex; align-items: flex-end; gap: .375rem; }
.pju-msg i { display: grid; place-items: center; flex: none; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: #1F2D3A; color: #6CB4EE; font-size: .5rem; font-style: normal; font-weight: 700; }
.pju-msg span { padding: .4375rem .5625rem; border-radius: .625rem .625rem .625rem .1875rem; background: #26262C; color: var(--blanc); }
.pju-moi { justify-content: flex-end; }
.pju-moi i { background: #2B2950; color: var(--violet); }
.pju-moi span { border-radius: .625rem .625rem .1875rem .625rem; background: var(--violet); color: var(--encre); }

.pju-fichier { display: flex; align-items: center; gap: .5rem; padding: .375rem 0; border-top: 1px solid #222226; color: var(--blanc); white-space: nowrap; }
.pju-fichier b { padding: .125rem .3125rem; border-radius: .25rem; background: #26262C; color: var(--gris-texte); font-size: .5rem; }
.pju-fichier em { margin-left: auto; color: #6FCF97; font-size: .625rem; font-style: normal; font-weight: 700; }
.pju-fichier .pju-attente { color: #E8B04B; }

@media (max-width: 35.99em) {
  .pju-grille { grid-template-columns: 1fr; }
  .pju-carte:last-child { display: none; }
  .pju-nav span:not(.actif) { display: none; }
}