/* Slides animees (avantages, avant/apres, cas d'usage) et illustrations de personnages. */

/* -- carrousel -------------------------------------------------------------------------- */
.slides { position: relative; display: grid; gap: 1.4rem; }
.slides__piste { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 32px; }
.slides__piste::-webkit-scrollbar { display: none; }
.slide {
  scroll-snap-align: start; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(1.4rem, 4vw, 3.5rem); align-items: center;
  padding: clamp(1.2rem, 3.5vw, 2.6rem); border-radius: 32px; min-height: 460px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)); border: 1px solid var(--nuit-trait);
}
.slide__texte { display: grid; gap: 1rem; align-content: center; }
.slide__texte h3 { font-weight: 300; font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--nuit-texte); }
.slide__texte p { margin: 0; color: var(--nuit-doux); }
.duel { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.duel div { padding: 0.8rem 0.9rem; border-radius: 14px; font-size: 0.9rem; display: grid; gap: 0.25rem; }
.duel small { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; }
.duel__avant { background: rgba(255, 101, 53, 0.08); border: 1px solid rgba(255, 101, 53, 0.25); color: #FFC7B2; }
.duel__avant small { color: #FF8A5C; }
.duel__apres { background: rgba(92, 242, 176, 0.07); border: 1px solid rgba(92, 242, 176, 0.3); color: #C9F5E3; }
.duel__apres small { color: #5CF2B0; }
.slides__commandes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.slides__points { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.slides__points button { width: 10px; height: 10px; padding: 0; border-radius: 999px; border: 0; background: rgba(208, 198, 243, 0.3); cursor: pointer; transition: width 0.35s ease, background 0.35s ease; }
.slides__points button[aria-current="true"] { width: 34px; background: var(--aurore-3); }
.slides__fleches { display: flex; gap: 0.5rem; align-items: center; }
.slides__fleches button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--nuit-trait); background: rgba(255, 255, 255, 0.05); color: var(--nuit-texte); font-size: 1.2rem; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; }
.slides__fleches button:hover { background: var(--violet); transform: scale(1.06); }
.slides__jauge { width: 120px; height: 2px; background: rgba(208, 198, 243, 0.2); border-radius: 2px; overflow: hidden; }
.slides__jauge i { display: block; height: 100%; background: var(--aurore); transform-origin: 0 50%; transform: scaleX(0); }
.slides--papier .slide { background: var(--blanc) var(--grain); border-color: rgba(51, 51, 51, 0.07); box-shadow: 0 40px 80px -60px rgba(51, 51, 51, 0.5); }
.slides--papier .slide__texte h3 { color: var(--encre); }
.slides--papier .slide__texte p { color: var(--encre-douce); }
.slides--papier .slides__points button { background: rgba(51, 51, 51, 0.15); }
.slides--papier .slides__points button[aria-current="true"] { background: var(--violet); }
.slides--papier .slides__fleches button { border-color: rgba(51, 51, 51, 0.15); background: var(--blanc); color: var(--encre); }
.slides--papier .slides__fleches button:hover { color: var(--blanc); }
.slides--papier .slides__jauge { background: rgba(51, 51, 51, 0.1); }
@media (max-width: 860px) { .slide { grid-template-columns: 1fr; min-height: 0; } .duel { grid-template-columns: 1fr; } }

/* -- mini-ecran commun des animations ----------------------------------------------------------- */
.mini-ecran {
  position: relative; aspect-ratio: 5 / 4; border-radius: 24px; overflow: hidden; display: grid; place-items: center; padding: 1.4rem;
  background: radial-gradient(110% 90% at 20% 0%, #2C2160, var(--nuit) 60%); border: 1px solid rgba(202, 147, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.mini-ecran::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(208, 198, 243, 0.2) 1px, transparent 1.2px); background-size: 20px 20px; mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%); }
.mini-ecran > * { position: relative; }
.mini-ecran .etiquette-coin { position: absolute; top: 14px; left: 16px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nuit-doux); z-index: 2; }
.carte-ui { width: min(300px, 100%); border-radius: 16px; padding: 1rem; display: grid; gap: 0.55rem; background: linear-gradient(160deg, rgba(52, 40, 120, 0.95), rgba(20, 14, 44, 0.97)); border: 1px solid rgba(202, 147, 255, 0.3); color: var(--nuit-texte); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.7); font-size: 0.82rem; }
.carte-ui .champ span { font-size: 0.82rem; }
.q { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--nuit-trait); overflow: hidden; }

/* 1. questions qui disparaissent */
.interrupteur { width: 38px; height: 22px; border-radius: 22px; background: var(--violet); position: relative; flex: none; animation: fond-inter 6s ease-in-out infinite; }
.interrupteur i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; animation: bouton-inter 6s ease-in-out infinite; }
@keyframes bouton-inter { 0%, 18% { left: 19px; } 26%, 90% { left: 3px; } 100% { left: 19px; } }
@keyframes fond-inter { 0%, 18% { background: var(--violet); } 26%, 90% { background: rgba(255, 255, 255, 0.2); } 100% { background: var(--violet); } }
.q--repli { animation: repli 6s ease-in-out infinite; max-height: 40px; }
.q--repli:nth-of-type(3) { animation-delay: 0.12s; }
@keyframes repli { 0%, 28% { max-height: 40px; opacity: 1; padding-block: 0.55rem; margin: 0; } 40%, 88% { max-height: 0; opacity: 0; padding-block: 0; border-width: 0; margin: -0.28rem 0; } 98%, 100% { max-height: 40px; opacity: 1; } }
.tag-apparait { justify-self: start; padding: 0.25rem 0.7rem; border-radius: 999px; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: #5CF2B0; border: 1px solid rgba(92, 242, 176, 0.4); background: rgba(92, 242, 176, 0.08); animation: apparait 6s ease-in-out infinite; }
@keyframes apparait { 0%, 40% { opacity: 0; transform: translateY(6px); } 48%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

/* 2. signature qui se dessine */
.zone-signe { height: 110px; border-radius: 14px; border: 1.5px dashed rgba(208, 198, 243, 0.35); display: grid; place-items: center; position: relative; }
.zone-signe svg { width: 190px; overflow: visible; }
.zone-signe path { stroke: #F4F0FF; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 520; stroke-dashoffset: 520; animation: signe 6s ease-in-out infinite; }
@keyframes signe { 0%, 10% { stroke-dashoffset: 520; } 50%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 520; } }
.tampon { position: absolute; right: -8px; top: -12px; padding: 0.35rem 0.7rem; border-radius: 8px; transform: rotate(8deg); font: 500 0.7rem var(--mono); letter-spacing: 0.1em; color: var(--nuit); background: #5CF2B0; animation: tampon 6s ease-in-out infinite; }
@keyframes tampon { 0%, 52% { opacity: 0; transform: rotate(8deg) scale(2.2); } 58%, 90% { opacity: 1; transform: rotate(8deg) scale(1); } 98%, 100% { opacity: 0; } }

/* 3. le PDF rejoint le Drive */
.voyage { width: 100%; max-width: 360px; height: 230px; position: relative; }
.pdf-vole { position: absolute; left: 6%; top: 30%; width: 74px; height: 92px; border-radius: 10px; background: var(--papier); color: var(--encre); display: grid; place-items: center; font: 500 0.7rem var(--mono); box-shadow: 0 16px 30px -10px rgba(0, 0, 0, 0.6); animation: vole 6s cubic-bezier(0.55, 0, 0.25, 1) infinite; }
.pdf-vole::before { content: ""; position: absolute; left: 12px; right: 12px; top: 16px; height: 34px; background: repeating-linear-gradient(180deg, rgba(51, 51, 51, 0.25) 0 2px, transparent 2px 8px); }
@keyframes vole { 0%, 15% { transform: translate(0, 0) rotate(-8deg); opacity: 1; } 55% { transform: translate(185px, -30px) rotate(6deg) scale(0.55); opacity: 1; } 62%, 100% { transform: translate(195px, -10px) scale(0.2); opacity: 0; } }
.dossier-cible { position: absolute; right: 4%; top: 18%; width: 120px; height: 96px; }
.dossier-cible svg { width: 100%; height: 100%; color: var(--aurore-3); animation: rebond 6s ease-in-out infinite; }
@keyframes rebond { 0%, 56% { transform: scale(1); } 61% { transform: scale(1.12); } 68%, 100% { transform: scale(1); } }
.ligne-feuille { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1.4fr 1fr 0.7fr; gap: 1px; background: var(--nuit-trait); border-radius: 10px; overflow: hidden; font: 400 0.64rem var(--mono); }
.ligne-feuille span { background: var(--nuit-2); padding: 0.45rem 0.5rem; color: var(--nuit-doux); }
.ligne-feuille .neuve { color: #5CF2B0; animation: apparait 6s ease-in-out infinite; animation-delay: 0.4s; }

/* 4. tablette partagee remise a zero */
.tablette { width: min(320px, 100%); aspect-ratio: 4 / 3; border-radius: 22px; padding: 10px; background: linear-gradient(145deg, #2A2250, #0E0A1E); box-shadow: 0 0 0 1px rgba(208, 198, 243, 0.25); }
.tablette__ecran { position: relative; height: 100%; border-radius: 14px; background: var(--papier); color: var(--encre); padding: 0.9rem; display: grid; gap: 0.45rem; align-content: start; overflow: hidden; font-size: 0.78rem; }
.tablette__ecran .f { display: flex; justify-content: space-between; padding: 0.45rem 0.6rem; border-radius: 8px; background: var(--blanc); border: 1px solid rgba(51, 51, 51, 0.1); }
.tablette__ecran .f b { font: 500 1rem/1 var(--main); color: var(--stylo); animation: efface 6s ease-in-out infinite; }
@keyframes efface { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } }
.essuie { position: absolute; top: 0; bottom: 0; width: 40%; left: -45%; background: linear-gradient(90deg, transparent, rgba(202, 147, 255, 0.55), transparent); animation: essuie 6s ease-in-out infinite; }
@keyframes essuie { 0%, 38% { left: -45%; } 52%, 100% { left: 110%; } }
.pret { justify-self: center; margin-top: 0.3rem; padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--nuit); color: #5CF2B0; font: 500 0.66rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; animation: apparait 6s ease-in-out infinite; animation-delay: 0.5s; }

/* 5. fin de la double saisie */
.double { display: grid; gap: 0.7rem; width: min(320px, 100%); }
.clavier { padding: 0.8rem; border-radius: 14px; background: rgba(255, 101, 53, 0.08); border: 1px solid rgba(255, 101, 53, 0.3); font: 400 0.8rem var(--mono); color: #FFC7B2; position: relative; overflow: hidden; }
.clavier span { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: 0; animation: tape 6s steps(18) infinite; border-right: 2px solid #FF8A5C; }
@keyframes tape { 0% { width: 0; } 30%, 100% { width: 18ch; } }
.clavier::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 2px; background: #FF6535; transform: scaleX(0); transform-origin: 0 50%; animation: barre-rouge 6s ease-in-out infinite; }
@keyframes barre-rouge { 0%, 36% { transform: scaleX(0); } 44%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.auto { padding: 0.8rem; border-radius: 14px; background: rgba(92, 242, 176, 0.07); border: 1px solid rgba(92, 242, 176, 0.35); font: 400 0.8rem var(--mono); color: #C9F5E3; animation: apparait 6s ease-in-out infinite; animation-delay: 0.2s; }

/* 6. les pages ne se perdent plus */
.feuilles { position: relative; width: 280px; height: 220px; }
.feuille-vole { position: absolute; width: 70px; height: 88px; border-radius: 6px; background: var(--papier); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.5); left: var(--x); top: var(--y); transform: rotate(var(--r)); animation: range 6s cubic-bezier(0.55, 0, 0.25, 1) infinite; animation-delay: var(--d, 0s); }
.feuille-vole::before { content: ""; position: absolute; inset: 14px 10px auto; height: 40px; background: repeating-linear-gradient(180deg, rgba(51, 51, 51, 0.22) 0 2px, transparent 2px 8px); }
@keyframes range { 0%, 25% { left: var(--x); top: var(--y); transform: rotate(var(--r)); } 60%, 88% { left: 105px; top: 70px; transform: rotate(0deg); } 100% { left: var(--x); top: var(--y); transform: rotate(var(--r)); } }
.compteur-pages { position: absolute; right: 10px; top: 58px; padding: 0.3rem 0.7rem; border-radius: 999px; background: #5CF2B0; color: var(--nuit); font: 500 0.68rem var(--mono); animation: apparait 6s ease-in-out infinite; animation-delay: 0.3s; }

/* 7. le lien sur le telephone du patient */
.tel { width: 200px; height: 360px; border-radius: 34px; padding: 9px; background: linear-gradient(145deg, #2A2250, #0E0A1E); box-shadow: 0 0 0 1px rgba(208, 198, 243, 0.25), 0 30px 60px -30px rgba(83, 103, 255, 0.6); }
.tel__ecran { position: relative; height: 100%; border-radius: 26px; overflow: hidden; background: #0F0B22; display: grid; align-content: start; gap: 0.5rem; padding: 2.2rem 0.7rem 0.7rem; }
.bulle-sms { justify-self: start; max-width: 88%; padding: 0.6rem 0.75rem; border-radius: 16px 16px 16px 4px; background: #2B2458; color: var(--nuit-texte); font-size: 0.72rem; line-height: 1.35; animation: bulle 7s ease-in-out infinite; }
.bulle-sms u { color: var(--aurore-3); }
@keyframes bulle { 0%, 8% { opacity: 0; transform: translateY(10px) scale(0.95); } 14%, 100% { opacity: 1; transform: none; } }
.toucher { position: absolute; left: 44%; top: 34%; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; opacity: 0; animation: toucher 7s ease-out infinite; }
@keyframes toucher { 0%, 26% { opacity: 0; transform: scale(0.4); } 30% { opacity: 1; transform: scale(0.8); } 38%, 100% { opacity: 0; transform: scale(1.6); } }
.form-glisse { position: absolute; inset: 0; background: var(--papier); color: var(--encre); padding: 2.2rem 0.8rem 0.8rem; display: grid; gap: 0.45rem; align-content: start; font-size: 0.72rem; transform: translateY(100%); animation: glisse 7s cubic-bezier(0.2, 0.7, 0.2, 1) infinite; }
.form-glisse b { font-size: 0.85rem; }
.form-glisse span { padding: 0.45rem 0.55rem; border-radius: 8px; background: var(--blanc); border: 1px solid rgba(51, 51, 51, 0.12); }
@keyframes glisse { 0%, 36% { transform: translateY(100%); } 46%, 90% { transform: translateY(0); } 100% { transform: translateY(100%); } }

/* 8. le trajet HIPAA */
.trajet { width: min(340px, 100%); display: grid; gap: 1.6rem; position: relative; }
.trajet__noeud { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.8rem; border-radius: 14px; background: var(--nuit-2); border: 1px solid var(--nuit-trait); font-size: 0.8rem; color: var(--nuit-texte); position: relative; z-index: 1; }
.trajet__noeud small { margin-left: auto; font: 400 0.6rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--nuit-doux); }
.trajet__noeud--baa { animation: garde 5s ease-in-out infinite; }
@keyframes garde { 0%, 35% { border-color: var(--nuit-trait); box-shadow: none; } 42%, 70% { border-color: rgba(92, 242, 176, 0.7); box-shadow: 0 0 30px -6px rgba(92, 242, 176, 0.6); } 100% { border-color: var(--nuit-trait); } }
.trajet__fil { position: absolute; left: 22px; top: 20px; bottom: 20px; width: 2px; background: linear-gradient(180deg, rgba(202, 147, 255, 0.6), rgba(83, 103, 255, 0.4)); }
.trajet__point { position: absolute; left: 17px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--aurore-3); box-shadow: 0 0 16px var(--aurore-3); animation: descend 5s cubic-bezier(0.45, 0, 0.3, 1) infinite; z-index: 2; }
@keyframes descend { 0% { top: 14px; opacity: 0; } 8% { opacity: 1; } 70% { top: calc(66% - 6px); opacity: 1; } 78%, 100% { top: calc(66% - 6px); opacity: 0; } }

/* 9. hors ligne, rien ne se perd */
.hors-ligne { display: grid; gap: 0.8rem; width: min(300px, 100%); }
.signal { display: flex; align-items: center; gap: 0.6rem; font: 400 0.72rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.signal svg { width: 26px; height: 26px; }
.signaux { display: grid; }
.signaux > * { grid-area: 1 / 1; }
.signal--off { color: #FF8A5C; animation: montre-avant 6s steps(1) infinite; }
.signal--on { color: #5CF2B0; animation: montre-apres 6s steps(1) infinite; }
@keyframes montre-avant { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes montre-apres { 0%, 55% { opacity: 0; } 56%, 100% { opacity: 1; } }
.file-attente { padding: 0.8rem; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--nuit-trait); display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--nuit-texte); }
.file-attente .etats { display: grid; justify-items: end; }
.file-attente .etats > em { grid-area: 1 / 1; font-style: normal; font: 500 0.64rem var(--mono); padding: 0.2rem 0.55rem; border-radius: 999px; }
.file-attente .etat-attente { background: rgba(255, 138, 92, 0.18); color: #FF8A5C; animation: montre-avant 6s steps(1) infinite; }
.file-attente .etat-envoye { background: rgba(92, 242, 176, 0.18); color: #5CF2B0; animation: montre-apres 6s steps(1) infinite; }

/* 10. cas d'usage : puces de formulaires qui tombent */
.cascade { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; max-width: 340px; }
.cascade span { padding: 0.45rem 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--nuit-trait); color: var(--nuit-texte); font-size: 0.82rem; animation: tombe 6s cubic-bezier(0.2, 0.7, 0.2, 1) infinite; animation-delay: calc(var(--i) * 0.18s); }
.cascade span.cle { background: var(--violet); border-color: transparent; }
@keyframes tombe { 0% { opacity: 0; transform: translateY(-24px) rotate(-4deg); } 12%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(10px); } }
.grande-tache { width: 150px; height: 140px; display: grid; place-items: center; border-radius: 58% 42% 55% 45% / 50% 60% 40% 50%; animation: morphe 8s ease-in-out infinite; }
.grande-tache svg { width: 64px; height: 64px; color: var(--encre); }
@keyframes morphe { 50% { border-radius: 42% 58% 40% 60% / 60% 42% 58% 40%; transform: rotate(6deg) scale(1.04); } }
.cas { display: grid; gap: 1.2rem; justify-items: center; }

/* -- avant / apres a faire glisser ------------------------------------------------------------------ */
.comparateur { --pos: 50%; position: relative; border-radius: 32px; overflow: hidden; min-height: 560px; user-select: none; box-shadow: 0 50px 100px -60px rgba(51, 51, 51, 0.6); }
.comparateur__cote { position: absolute; inset: 0; padding: clamp(1.4rem, 4vw, 2.6rem); display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; }
.comparateur__avant { background: #F3E6DE var(--grain); color: var(--encre); }
.comparateur__apres { background: radial-gradient(90% 90% at 80% 10%, #2E2266, var(--nuit) 60%); color: var(--nuit-texte); clip-path: inset(0 0 0 var(--pos)); }
.comparateur__cote h3 { font-weight: 300; font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.05; letter-spacing: -0.03em; }
.comparateur__cote ul { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.comparateur__avant li, .comparateur__apres li { display: grid; grid-template-columns: 26px 1fr; gap: 0.6rem; align-items: start; font-size: 0.98rem; }
.comparateur__avant li::before { content: "✕"; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; background: rgba(255, 101, 53, 0.16); color: #D9481A; }
.comparateur__apres li::before { content: "✓"; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 0.78rem; background: rgba(92, 242, 176, 0.18); color: #5CF2B0; }
.comparateur__apres li { color: var(--nuit-doux); }
.comparateur__marque { position: absolute; top: 20px; z-index: 3; padding: 0.35rem 0.8rem; border-radius: 999px; font: 500 0.7rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.comparateur__marque--avant { left: 20px; background: var(--encre); color: var(--papier); }
.comparateur__marque--apres { right: 20px; background: #5CF2B0; color: var(--nuit); }
.comparateur__ligne { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; z-index: 4; background: var(--aurore); box-shadow: 0 0 18px rgba(202, 147, 255, 0.9); pointer-events: none; }
.comparateur__poignee { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--blanc); color: var(--violet); display: grid; place-items: center; font-size: 1.2rem; box-shadow: 0 10px 30px -6px rgba(105, 86, 249, 0.8), 0 0 0 6px rgba(255, 255, 255, 0.25); }
.comparateur input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 5; }
.comparateur input[type=range]:focus-visible + .comparateur__ligne .comparateur__poignee { outline: 3px solid var(--aurore-3); outline-offset: 4px; }
.illus { width: 100%; max-width: 380px; justify-self: center; }
@media (max-width: 860px) {
  .comparateur { min-height: 760px; }
  .comparateur__cote { grid-template-columns: 1fr; align-content: start; padding-top: 4rem; }
  .illus { max-width: 250px; }
}

/* -- illustrations flanquant la tete --------------------------------------------------------------------- */
.flanc { position: absolute; width: clamp(160px, 17vw, 250px); z-index: 1; pointer-events: none; }
.flanc--gauche { left: max(8px, calc(50% - 720px)); top: 32%; }
.flanc--droite { right: max(8px, calc(50% - 720px)); top: 26%; }
@media (max-width: 1180px) { .flanc { display: none; } }
.personnage { animation: balance 6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes balance { 50% { transform: translateY(-6px) rotate(-1deg); } }
.clignement { animation: cligne 5s infinite; transform-origin: center; transform-box: fill-box; }
@keyframes cligne { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }

@media (prefers-reduced-motion: reduce) {
  .mini-ecran *, .mini-ecran *::before, .mini-ecran *::after, .personnage, .clignement, .grande-tache { animation: none !important; }
  .q--repli { max-height: 0; opacity: 0; padding-block: 0; border-width: 0; }
  .form-glisse { transform: none; }
  .zone-signe path { stroke-dashoffset: 0; }
}

/* -- avant / apres en slides ------------------------------------------------------------------- */
.slides--papier .slide.slide--comparateur, .slide.slide--comparateur { display: block; padding: 0; min-height: 0; border: 0; background: none; box-shadow: none; }
.slide--comparateur .comparateur { box-shadow: none; }
.comparateur .mini-ecran { width: 100%; max-width: 380px; justify-self: center; }
.comparateur__cote ul { gap: 0.5rem; }

/* chaque cote tient dans sa moitie : avant et apres restent visibles, ligne au centre */
@media (min-width: 861px) {
  .comparateur__cote { grid-template-columns: 1fr; justify-items: center; align-content: center; gap: 1.2rem; }
  .comparateur__cote > div:first-child { justify-self: stretch; }
  .comparateur__avant { padding-right: calc(50% + 2rem); }
  .comparateur__apres { padding-left: calc(50% + 2rem); }
  .comparateur__cote > .illus, .comparateur__cote > .mini-ecran { order: -1; }
  .comparateur__cote > .illus { max-width: 230px; }
  .comparateur__cote > .mini-ecran { max-width: 330px; aspect-ratio: auto; min-height: 240px; }
  .slide--comparateur .comparateur { min-height: 640px; }
}
/* telephone : avant puis apres, empiles, sans ligne a faire glisser */
@media (max-width: 860px) {
  .comparateur { min-height: 0; display: grid; }
  .comparateur__cote { position: relative; inset: auto; grid-template-columns: 1fr; align-content: start; gap: 1rem; padding: 3.6rem 1.2rem 1.4rem; }
  .comparateur__apres { clip-path: none; }
  .comparateur input[type=range], .comparateur__ligne, .comparateur__marque--apres { display: none; }
  .comparateur__apres::before { content: "After"; position: absolute; top: 20px; left: 20px; padding: 0.35rem 0.8rem; border-radius: 999px; font: 500 0.7rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; background: #5CF2B0; color: var(--nuit); }
  .comparateur__cote > .illus { max-width: 200px; }
}

/* -- preuves a la signature ----------------------------------------------------------------------- */
.preuves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.preuve { display: grid; gap: 0.9rem; align-content: start; padding: 1.4rem; border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); border: 1px solid var(--nuit-trait); }
.preuve p { margin: 0; }
.preuve .mini-ecran { aspect-ratio: 4 / 3; gap: 0.8rem; align-content: center; }
.carte-id { position: relative; width: 180px; height: 112px; border-radius: 12px; padding: 12px; display: grid; grid-template-columns: 46px 1fr; gap: 10px; background: linear-gradient(135deg, #F9F4F1, #EBDFD8); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.6); }
.carte-id i { border-radius: 8px; background: radial-gradient(circle at 50% 36%, #C68B5E 0 26%, transparent 27%), radial-gradient(ellipse at 50% 100%, #5367FF 0 46%, transparent 47%), #C4D9F4; }
.carte-id span { display: grid; gap: 7px; align-content: start; padding-top: 4px; }
.carte-id span em { display: block; height: 6px; border-radius: 3px; background: rgba(51, 51, 51, 0.28); }
.carte-id span em:nth-child(2) { width: 70%; } .carte-id span em:nth-child(3) { width: 85%; } .carte-id span em:nth-child(4) { width: 50%; }
.coins { position: absolute; inset: -12px; border-radius: 16px; background: linear-gradient(#5CF2B0, #5CF2B0) 0 0 / 18px 2px no-repeat, linear-gradient(#5CF2B0, #5CF2B0) 0 0 / 2px 18px no-repeat, linear-gradient(#5CF2B0, #5CF2B0) 100% 0 / 18px 2px no-repeat, linear-gradient(#5CF2B0, #5CF2B0) 100% 0 / 2px 18px no-repeat, linear-gradient(#5CF2B0, #5CF2B0) 0 100% / 18px 2px no-repeat, linear-gradient(#5CF2B0, #5CF2B0) 0 100% / 2px 18px no-repeat, linear-gradient(#5CF2B0, #5CF2B0) 100% 100% / 18px 2px no-repeat, linear-gradient(#5CF2B0, #5CF2B0) 100% 100% / 2px 18px no-repeat; animation: vise 3s ease-in-out infinite; }
@keyframes vise { 50% { inset: -6px; } }
.balayage-id { position: absolute; left: 6px; right: 6px; height: 2px; background: #5CF2B0; box-shadow: 0 0 12px #5CF2B0; animation: balaie-id 3s ease-in-out infinite; }
@keyframes balaie-id { 0%, 100% { top: 10%; } 50% { top: 86%; } }
.ok-pastille { justify-self: center; padding: 0.25rem 0.7rem; border-radius: 999px; font: 500 0.64rem var(--mono); letter-spacing: 0.06em; color: #5CF2B0; border: 1px solid rgba(92, 242, 176, 0.4); background: rgba(92, 242, 176, 0.08); }
.selfie { position: relative; width: 116px; height: 116px; border-radius: 50%; overflow: hidden; border: 3px solid rgba(202, 147, 255, 0.6); background: radial-gradient(circle at 50% 38%, #F2C6A0 0 21%, transparent 22%), radial-gradient(ellipse at 50% 108%, #6956F9 0 48%, transparent 49%), #2B2458; }
.selfie::before { content: ""; position: absolute; left: 30%; right: 30%; top: 14%; height: 22%; border-radius: 50% 50% 30% 30%; background: #2B1B14; }
.selfie::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; animation: flash 4s ease-out infinite; }
@keyframes flash { 0%, 56% { opacity: 0; } 58% { opacity: 0.95; } 74%, 100% { opacity: 0; } }
.horodatage { font: 400 0.66rem var(--mono); letter-spacing: 0.06em; color: var(--nuit-doux); }
.plan { position: relative; width: 230px; height: 140px; border-radius: 14px; overflow: hidden; border: 1px solid var(--nuit-trait); background: linear-gradient(0deg, rgba(208, 198, 243, 0.08) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(208, 198, 243, 0.08) 1px, transparent 1px) 0 0 / 22px 22px, #1C1540; }
.plan::before { content: ""; position: absolute; left: -10%; right: -10%; top: 58%; height: 12px; background: rgba(202, 147, 255, 0.22); transform: rotate(-12deg); }
.plan::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: 30%; width: 9px; background: rgba(202, 147, 255, 0.14); transform: rotate(18deg); }
.epingle { position: absolute; left: 50%; top: 48%; width: 26px; height: 26px; margin: -30px 0 0 -13px; border-radius: 50% 50% 50% 0; background: var(--aurore-1); box-shadow: 0 0 16px rgba(255, 101, 53, 0.8); z-index: 1; animation: chute 4s cubic-bezier(0.3, 1.5, 0.5, 1) infinite; }
.epingle::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
@keyframes chute { 0%, 10% { transform: translateY(-60px) rotate(-45deg); opacity: 0; } 30%, 86% { transform: translateY(0) rotate(-45deg); opacity: 1; } 100% { transform: translateY(0) rotate(-45deg); opacity: 0; } }
.onde-pin { position: absolute; left: 50%; top: 48%; width: 44px; height: 16px; margin: -8px 0 0 -22px; border-radius: 50%; border: 2px solid rgba(255, 101, 53, 0.7); animation: onde-pin 4s ease-out infinite; }
@keyframes onde-pin { 0%, 30% { transform: scale(0.3); opacity: 0; } 34% { opacity: 1; } 72%, 100% { transform: scale(2.4); opacity: 0; } }
@media (max-width: 900px) { .preuves { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .coins, .balayage-id, .selfie::after, .epingle, .onde-pin { animation: none !important; } }

/* -- slides facon Typeform : vraie photo en carte 3D, interface en verre flottante ---------------------- */
.scene-3d { position: relative; height: clamp(340px, 36vw, 450px); perspective: 1400px; transform-style: preserve-3d; }
.halo { position: absolute; left: 8%; top: 12%; width: 74%; height: 74%; border-radius: 50%; background: radial-gradient(circle, rgba(202, 147, 255, 0.6), rgba(83, 103, 255, 0.28) 45%, transparent 70%); filter: blur(42px); animation: respire-halo 7s ease-in-out infinite; }
@keyframes respire-halo { 50% { transform: scale(1.12) translate(4%, -3%); opacity: 0.8; } }
.slides--papier .halo { background: radial-gradient(circle, rgba(202, 147, 255, 0.55), rgba(255, 101, 53, 0.18) 45%, transparent 70%); }
.photo-carte {
  position: absolute; left: 0; top: 3%; width: 76%; height: 80%; border-radius: 24px; overflow: hidden;
  transform: rotateY(15deg) rotateX(5deg) rotateZ(-2deg); transform-origin: 20% 50%;
  box-shadow: 0 50px 90px -34px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.9s ease;
}
.photo-carte img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 7s ease; }
.photo-carte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 32%, transparent 68%, rgba(18, 13, 38, 0.38)); pointer-events: none; }
.slide.active .photo-carte img { transform: scale(1); }
.slide:not(.active) .photo-carte { transform: rotateY(38deg) rotateX(10deg) rotateZ(-5deg) translateX(-8%); opacity: 0.4; }
.scene-3d .mini-ecran--flottant {
  position: absolute; right: 0; bottom: 0; width: min(64%, 330px); aspect-ratio: auto; min-height: 0; padding: 1rem;
  border-radius: 20px; background: rgba(18, 13, 38, 0.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(202, 147, 255, 0.35); overflow: hidden;
  transform: rotateY(-10deg) translateZ(90px); transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.9s ease;
  box-shadow: 0 34px 70px -22px rgba(0, 0, 0, 0.75), 0 0 46px -12px rgba(202, 147, 255, 0.55);
  animation: flotte-ui 7s ease-in-out infinite;
}
.scene-3d .mini-ecran--flottant::before { display: none; }
.scene-3d .mini-ecran--flottant .etiquette-coin { position: static; display: block; margin-bottom: 0.6rem; }
.slide:not(.active) .mini-ecran--flottant { opacity: 0; transform: rotateY(-10deg) translateZ(90px) translateY(40px); }
@keyframes flotte-ui { 50% { translate: 0 -10px; } }
.scene-3d .mini-ecran--flottant .carte-ui { width: 100%; box-shadow: none; }
.scene-3d .mini-ecran--flottant .voyage { height: 170px; }
.scene-3d .mini-ecran--flottant .dossier-cible { width: 90px; height: 72px; }
.scene-3d .mini-ecran--flottant .tel { transform: scale(0.62); transform-origin: top center; margin-bottom: -136px; }
.scene-3d .mini-ecran--flottant .feuilles { transform: scale(0.78); transform-origin: top center; margin-bottom: -48px; }
.scene-3d .mini-ecran--flottant .tablette { width: 100%; }
.scene-3d .mini-ecran--flottant .grande-tache { display: none; }
.puce-verre {
  position: absolute; left: 4%; bottom: 12%; z-index: 2; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1rem; border-radius: 14px; font: 500 0.88rem var(--sans); color: var(--nuit-texte);
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.6); transform: translateZ(120px) rotate(-3deg);
  animation: flotte-puce 6s ease-in-out infinite; transition: opacity 0.8s ease 0.3s;
}
.slides--papier .puce-verre { color: var(--encre); background: rgba(255, 255, 255, 0.82); border-color: rgba(51, 51, 51, 0.08); }
.slide:not(.active) .puce-verre { opacity: 0; }
@keyframes flotte-puce { 50% { translate: 0 8px; } }
@media (max-width: 860px) {
  .scene-3d { height: 400px; }
  .photo-carte { width: 92%; height: 64%; transform: rotateY(8deg) rotateX(4deg); }
  .scene-3d .mini-ecran--flottant { width: 82%; transform: translateZ(40px); }
  .puce-verre { left: 2%; bottom: auto; top: 50%; font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .halo, .scene-3d .mini-ecran--flottant, .puce-verre { animation: none !important; }
  .photo-carte, .photo-carte img { transition: none; }
}

/* etiquette flottante en haut a droite de la photo, loin du panneau */
.puce-verre { left: auto; right: 16%; bottom: auto; top: 5%; transform: translateZ(120px) rotate(3deg); }
@media (max-width: 860px) { .puce-verre { right: 0; top: 0; } }

/* avant / apres sans geste : cote a cote, fleche au centre, faisceau qui balaie l'apres */
.comparateur { user-select: auto; }
.comparateur__poignee { font-size: 1.4rem; font-weight: 500; }
.comparateur__apres::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 22%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(202, 147, 255, 0.35), rgba(92, 242, 176, 0.18), transparent);
}
.slide.active .comparateur__apres::after { animation: balaie-apres 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both; }
@keyframes balaie-apres { 0% { left: 48%; opacity: 1; } 100% { left: 100%; opacity: 0; } }
.slide.active .comparateur__poignee { animation: pousse 1.8s ease 0.3s both; }
@keyframes pousse { 0% { transform: scale(0.6); } 35% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (max-width: 860px) { .comparateur__apres::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .slide.active .comparateur__apres::after, .slide.active .comparateur__poignee { animation: none; } }