/* Tunnel Claude Secrets, v3 : page de présentation centrée, visuels animés inclinés, page de paiement séparée. Chargé après tunnel.css. */

/* ---------- Hero centré ---------- */
.hero-c { padding: clamp(28px, 6vh, 72px) 0 0; text-align: center; }
.hero-c .pastille { margin: 0 auto 18px; }
.hero-c h1 { margin: 0 auto 18px; max-width: 900px; font-size: clamp(40px, 6.4vw, 78px); line-height: 1; letter-spacing: -.05em; font-weight: 750; }
.hero-c .chapeau { margin: 0 auto 30px; max-width: 640px; font-size: clamp(17px, 1.7vw, 20px); color: var(--doux); }
.hero-c .chapeau b { color: #fff; }
.cta-bloc { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cta-bloc .btn { min-height: 60px; padding: 0 34px; font-size: 18px; }
.rassure { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--doux); }
.rassure li { display: inline-flex; align-items: center; gap: 7px; }
.rassure li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--menthe); box-shadow: 0 0 10px var(--menthe); }

/* Scène inclinée du hero */
.scene { position: relative; margin: clamp(44px, 7vh, 80px) auto 0; max-width: 1020px; perspective: 1800px; }
.scene .fenetre-app { transform: rotateX(14deg) scale(.96); transform-origin: 50% 100%; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.scene:hover .fenetre-app { transform: rotateX(6deg) scale(.98); }
.flotte { position: absolute; z-index: 2; padding: 14px 16px; border-radius: 16px; font-size: 14px; text-align: left; background: rgba(13,15,22,.86); backdrop-filter: blur(12px); box-shadow: 0 24px 60px -20px rgba(0,0,0,.9), inset 0 0 0 1px rgba(159,220,235,.35); animation: flotter 6s ease-in-out infinite; }
.flotte b { display: block; font-size: 13px; color: var(--menthe); margin-bottom: 2px; }
.flotte.f1 { left: -2%; top: 18%; max-width: 250px; }
.flotte.f2 { right: -2%; bottom: 22%; max-width: 240px; animation-delay: -3s; }
@keyframes flotter { 50% { transform: translateY(-10px); } }

/* Fenêtre d'application générique */
.fenetre-app { border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 60px 140px -50px rgba(0,0,0,.95), 0 0 120px -40px rgba(125,255,210,.45), 0 0 0 1px rgba(255,255,255,.14); }
.fenetre-app .barre { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #ECECEF; color: #6b6b78; font-size: 12px; }
.fenetre-app .barre i { width: 11px; height: 11px; border-radius: 50%; background: #d4d4da; } .fenetre-app .barre i:nth-child(1) { background: #FF5F57; } .fenetre-app .barre i:nth-child(2) { background: #FEBC2E; } .fenetre-app .barre i:nth-child(3) { background: #28C840; }
.fenetre-app .barre span { margin-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fenetre-app.sombre { background: #16171c; } .fenetre-app.sombre .barre { background: #222329; color: #9a9aa6; }

/* ---------- Sections ---------- */
.bloc { padding: clamp(80px, 12vh, 130px) 0 0; }
.bloc-tete { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.bloc-tete h2 { margin: 0 0 16px; font-size: clamp(30px, 4.2vw, 50px); line-height: 1.05; letter-spacing: -.04em; font-weight: 720; }
.bloc-tete p { margin: 0 auto; max-width: 640px; color: var(--doux); font-size: 18px; }
.bloc-tete p b { color: #fff; }

/* Émotion : la lettre */
.lettre { max-width: 680px; margin: 0 auto; font-size: 19px; line-height: 1.7; color: var(--doux); }
.lettre p { margin: 0 0 20px; } .lettre b { color: #fff; }
.lettre .fort { font-size: clamp(22px, 2.4vw, 27px); line-height: 1.35; color: #fff; font-weight: 650; letter-spacing: -.02em; }

/* Les 4 vidéos : une ligne par vidéo, visuel incliné */
.module { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 6vw, 90px); align-items: center; margin-bottom: clamp(80px, 12vh, 140px); }
.module.inverse .module-texte { order: 2; }
.module-texte .num { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--menthe); background: rgba(125,255,210,.08); box-shadow: inset 0 0 0 1px rgba(125,255,210,.3); }
.module-texte h3 { margin: 0 0 14px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.05; letter-spacing: -.035em; }
.module-texte p { margin: 0 0 16px; color: var(--doux); } .module-texte p b { color: #fff; }
.module-texte .resultat { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; color: #fff; font-weight: 600; background: linear-gradient(90deg, rgba(125,255,210,.1), rgba(185,198,255,.08)); box-shadow: inset 0 0 0 1px rgba(159,220,235,.28); }
.module-texte .resultat::before { content: 'Résultat'; flex: none; padding: 3px 9px; border-radius: 8px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sur); background: var(--degrade); }
.visuel-incline { perspective: 1600px; }
.visuel-incline > * { transform: rotateY(-13deg) rotateX(5deg); transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.module.inverse .visuel-incline > * { transform: rotateY(13deg) rotateX(5deg); }
.visuel-incline:hover > * { transform: rotateY(0) rotateX(0) !important; }

/* Vidéo 1 : diaporama de vraies captures de Claude */
.diapo { position: relative; aspect-ratio: 16 / 10; background: #FAF9F5; }
.diapo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 0; transform: scale(1.03); transition: opacity .8s ease, transform 3s ease; background: #FAF9F5; }
.diapo img.actif { opacity: 1; transform: none; }
.diapo-etape { position: absolute; left: 50%; bottom: 14px; z-index: 2; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; color: #fff; background: rgba(10,10,14,.86); box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); }
.diapo-etape i { font-style: normal; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--sur); background: var(--degrade); font-size: 11px; }
.points { display: flex; justify-content: center; gap: 6px; margin-top: 14px; } .points i { width: 22px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.15); transition: background .4s; } .points i.actif { background: var(--menthe); }

/* Vidéo 2 : génération d'images */
.generateur { padding: 16px; border-radius: 22px; background: #111218; box-shadow: 0 50px 120px -40px rgba(0,0,0,.95), 0 0 90px -40px rgba(185,198,255,.5), inset 0 0 0 1px rgba(255,255,255,.1); }
.prompt-barre { display: flex; align-items: center; gap: 10px; min-height: 48px; margin-bottom: 12px; padding: 10px 14px; border-radius: 13px; font-size: 14px; color: #e9e9ee; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.prompt-barre svg { flex: none; width: 18px; color: var(--menthe); }
.prompt-barre .curseur { display: inline-block; width: 2px; height: 16px; margin-left: 1px; vertical-align: -3px; background: var(--menthe); animation: clig 1s steps(1) infinite; }
.galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.galerie figure { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 13px; overflow: hidden; background: linear-gradient(110deg, #1b1c24 30%, #2a2c38 50%, #1b1c24 70%); background-size: 300% 100%; animation: chargement 1.6s linear infinite; }
.galerie img { width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: blur(18px) saturate(.6); transform: scale(1.08); transition: opacity 1.2s ease, filter 1.6s ease, transform 1.6s ease; }
.galerie figure.net img { opacity: 1; filter: none; transform: none; }
.galerie figcaption { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: 7px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .6s .6s; }
.galerie figure.net figcaption { opacity: 1; }
@keyframes chargement { to { background-position: -150% 0; } }

/* Vidéo 3 : la veille qui va chercher les sources */
.veille { display: grid; grid-template-columns: 1fr 70px 1.15fr; align-items: center; gap: 0; padding: 22px; border-radius: 22px; background: #0f1016; box-shadow: 0 50px 120px -40px rgba(0,0,0,.95), 0 0 90px -40px rgba(125,255,210,.45), inset 0 0 0 1px rgba(255,255,255,.1); }
.sources { display: grid; gap: 8px; }
.source { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 11px; font-size: 13px; color: #cfd0da; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); transition: background .3s, box-shadow .3s, color .3s; }
.source b { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font-size: 11px; font-weight: 800; color: #fff; }
.source small { margin-left: auto; font-size: 10.5px; color: #7d7e8c; }
.source.lu { color: #fff; background: rgba(125,255,210,.1); box-shadow: inset 0 0 0 1px rgba(125,255,210,.45); }
.source.lu small { color: var(--menthe); }
.flux { position: relative; height: 100%; min-height: 200px; overflow: hidden; }
.flux i { position: absolute; left: -10px; width: 9px; height: 9px; border-radius: 50%; background: var(--menthe); box-shadow: 0 0 12px var(--menthe); animation: filer 1.8s linear infinite; opacity: 0; }
.flux i:nth-child(1) { top: 20%; } .flux i:nth-child(2) { top: 40%; animation-delay: .45s; } .flux i:nth-child(3) { top: 60%; animation-delay: .9s; background: var(--bleu); box-shadow: 0 0 12px var(--bleu); } .flux i:nth-child(4) { top: 80%; animation-delay: 1.35s; }
@keyframes filer { 10% { opacity: 1; } 90% { opacity: 1; } to { transform: translateX(90px); opacity: 0; } }
.brief { padding: 18px; border-radius: 14px; color: #1d1d24; background: #FAF9F5; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.brief-tete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #e6e4dc; }
.brief-tete b { font-size: 15px; } .brief-tete span { font-size: 11.5px; color: #8a8a94; }
.brief-ligne { display: flex; gap: 8px; margin-bottom: 10px; font-size: 12.5px; line-height: 1.45; opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s; }
.brief-ligne.vu { opacity: 1; transform: none; }
.brief-ligne em { flex: none; height: fit-content; padding: 2px 7px; border-radius: 6px; font-style: normal; font-size: 10.5px; font-weight: 700; color: #06121A; background: #c9f7e7; }
.brief-ligne em.b { background: #dfe4ff; }
.brief-pied { margin-top: 12px; font-size: 11px; color: #8a8a94; }

/* Vidéo 4 : un site qui se construit */
.navigateur .url { flex: 1; max-width: 300px; margin-left: 14px; padding: 4px 12px; border-radius: 8px; font-size: 11.5px; color: #6b6b78; background: #fff; }
.site { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: #F6F1EA; color: #2a241d; }
.site > * { opacity: 0; transform: translateY(14px); }
.site.monte > * { animation: monter .7s cubic-bezier(.2,.8,.2,1) forwards; }
.site.monte > :nth-child(2) { animation-delay: .5s; } .site.monte > :nth-child(3) { animation-delay: 1.1s; } .site.monte > :nth-child(4) { animation-delay: 1.7s; } .site.monte > :nth-child(5) { animation-delay: 2.3s; } .site.monte > :nth-child(6) { animation-delay: 2.9s; }
@keyframes monter { to { opacity: 1; transform: none; } }
.s-nav { display: flex; justify-content: space-between; align-items: center; padding: 4% 6%; font-size: clamp(10px, 1.1vw, 13px); }
.s-nav b { font-family: 'Times New Roman', serif; font-style: italic; font-size: 1.5em; font-weight: 400; }
.s-nav span { display: flex; gap: 14px; color: #7a6f62; }
.s-titre { padding: 2% 6% 0; max-width: 62%; font-family: 'Times New Roman', serif; font-size: clamp(18px, 2.6vw, 32px); line-height: 1.05; }
.s-texte { padding: 2% 6%; max-width: 52%; font-size: clamp(9px, 1vw, 12px); color: #7a6f62; }
.s-bouton { margin: 0 6%; display: inline-block; padding: 1.4% 3%; border-radius: 999px; font-size: clamp(9px, 1vw, 12px); color: #fff; background: #2a241d; }
.s-image { position: absolute; right: 5%; top: 22%; width: 34%; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); }
.s-image img { width: 100%; height: 100%; object-fit: cover; }
.s-cartes { position: absolute; left: 6%; bottom: 6%; display: flex; gap: 8px; width: 50%; }
.s-cartes span { flex: 1; padding: 6% 5%; border-radius: 9px; font-size: clamp(8px, .9vw, 11px); background: #fff; box-shadow: 0 8px 20px -12px rgba(0,0,0,.35); }
.etiquette-ligne { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: #1f8f5f; opacity: 0; transition: opacity .5s; }
.etiquette-ligne.vu { opacity: 1; }
.etiquette-ligne::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #9effc9; }

/* ---------- Bonus : 30 jours dans la communauté ---------- */
.bonus-v3 { position: relative; padding: clamp(28px, 4vw, 52px); border-radius: 32px; background: linear-gradient(160deg, rgba(125,255,210,.08), rgba(185,198,255,.05) 60%, rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(159,220,235,.3), 0 0 160px -60px rgba(125,255,210,.5); }
.bonus-v3 .bloc-tete { margin-bottom: 40px; }
.cadeau { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--sur); background: var(--degrade); }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; perspective: 1600px; }
.trio article { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.trio article:nth-child(1) { transform: rotateY(10deg) translateZ(-20px); } .trio article:nth-child(3) { transform: rotateY(-10deg) translateZ(-20px); }
.trio article:hover { transform: none; }
.trio .media { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #111; box-shadow: 0 34px 80px -34px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.1); }
.trio .media video, .trio .media img { width: 100%; height: 100%; object-fit: cover; }
.trio .direct { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 7px; font-size: 11px; font-weight: 800; color: #fff; background: #e5484d; }
.trio .direct::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: clig 1.2s infinite; }
.trio h4 { margin: 16px 0 6px; font-size: 18px; } .trio p { margin: 0; font-size: 15px; color: var(--doux); }
.post-news { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 12px; background: #fff; color: #1d1d24; font-size: 12px; }
.pn-tete { display: flex; align-items: center; gap: 8px; } .pn-tete img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .pn-tete b { display: block; font-size: 12px; } .pn-tete span { font-size: 10.5px; color: #8a8a94; } .pn-tete em { margin-left: auto; padding: 2px 7px; border-radius: 6px; font-style: normal; font-size: 10px; font-weight: 700; color: #0b6b4b; background: #d8f8ec; }
.pn-carte { flex: 1; display: grid; place-items: center; padding: 10px; border-radius: 10px; text-align: center; background: linear-gradient(135deg, #0b1015, #10261f); color: #fff; }
.pn-carte b { font-size: 15px; line-height: 1.15; } .pn-carte i { font-family: 'Times New Roman', serif; color: var(--menthe); }
.bonus-apres { margin: 30px auto 0; max-width: 620px; text-align: center; font-size: 15px; color: var(--discret); }

/* ---------- Logique : ce que tu as à la fin, et l'aveu ---------- */
.duo-v3 { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; max-width: 980px; margin: 0 auto; }
.carte-v3 { padding: 30px; border-radius: 26px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px var(--trait); }
.carte-v3 h3 { margin: 0 0 16px; font-size: 21px; letter-spacing: -.02em; }
.carte-v3 p { margin: 0 0 12px; color: var(--doux); } .carte-v3 p b { color: #fff; }
.aveu { background: rgba(185,198,255,.05); box-shadow: inset 0 0 0 1px rgba(185,198,255,.28); }

/* ---------- Qui suis-je ---------- */
.moi { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 70px); align-items: center; max-width: 1020px; margin: 0 auto; }
.moi-photo { position: relative; perspective: 1400px; }
.moi-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 28px; transform: rotateY(9deg); box-shadow: 0 50px 120px -40px rgba(0,0,0,.95), 0 0 90px -30px rgba(125,255,210,.45), inset 0 0 0 1px rgba(255,255,255,.1); }
.moi-signe { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); white-space: nowrap; padding: 10px 18px; border-radius: 14px; font-size: 14px; text-align: center; background: rgba(13,15,22,.92); box-shadow: inset 0 0 0 1px rgba(159,220,235,.35); }
.moi-signe b { display: block; font-size: 16px; }
.moi-texte h2 { margin: 0 0 18px; font-size: clamp(30px, 4vw, 46px); line-height: 1.05; letter-spacing: -.04em; }
.moi-texte p { margin: 0 0 16px; color: var(--doux); font-size: 17.5px; } .moi-texte p b { color: #fff; }
.preuves { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.preuves span { padding: 8px 13px; border-radius: 11px; font-size: 13.5px; color: #e6e7ee; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--trait); }
.preuves span b { color: var(--menthe); }

/* ---------- Urgence ---------- */
.urgence { max-width: 780px; margin: 0 auto; padding: 30px; border-radius: 26px; text-align: center; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(125,255,210,.35); }
.urgence h3 { margin: 0 0 10px; font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -.03em; }
.urgence p { margin: 0 auto 8px; max-width: 600px; color: var(--doux); } .urgence p b { color: #fff; }
.urgence .a-valider { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 8px; font-size: 12px; color: #ffd27d; background: rgba(255,210,125,.1); }

/* ---------- Garantie et CTA final ---------- */
.garantie-v3 { display: flex; gap: 20px; align-items: center; max-width: 780px; margin: 0 auto; padding: 26px 28px; border-radius: 24px; background: rgba(125,255,210,.06); box-shadow: inset 0 0 0 1px rgba(125,255,210,.35); }
.garantie-v3 svg { flex: none; width: 58px; height: 58px; color: var(--menthe); }
.garantie-v3 b { display: block; margin-bottom: 4px; font-size: 19px; } .garantie-v3 p { margin: 0; color: var(--doux); }
.final { text-align: center; }
.final h2 { margin: 0 auto 16px; max-width: 760px; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.02; letter-spacing: -.045em; }
.final .prix-ligne { justify-content: center; margin-bottom: 22px; }
.ps { max-width: 680px; margin: 48px auto 0; padding-top: 26px; border-top: 1px solid var(--trait); text-align: left; color: var(--doux); }
.ps b { color: #fff; }

/* ---------- Page de paiement ---------- */
.caisse { max-width: 760px; margin: 0 auto; padding: 20px 0 0; text-align: center; }
.caisse h1 { margin: 6px 0 12px; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.04; letter-spacing: -.045em; }
.caisse .sous { margin: 0 auto 30px; max-width: 560px; color: var(--doux); }
.caisse .paiement { text-align: left; }
.caisse .tete { text-align: center; }
.fil-confiance { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 26px auto 0; font-size: 14px; color: var(--doux); }
.fil-confiance img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.form-champs { display: grid; gap: 10px; margin: 0 0 18px; }
.form-champs label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--doux); }
.form-champs input { height: 50px; padding: 0 14px; border: 0; border-radius: 12px; font: 16px Inter, sans-serif; color: #fff; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.form-champs input:focus { outline: 2px solid var(--menthe); }
.zone-systeme { margin: 6px 0 18px; padding: 14px; border-radius: 12px; font-size: 13px; text-align: center; color: var(--discret); background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px dashed rgba(255,255,255,.2); border: 1px dashed rgba(255,255,255,.18); }

/* ---------- Obsidian : une vraie fenêtre de vault ---------- */
.obs { display: grid; grid-template-columns: 190px 1fr 1fr; height: 440px; background: #1e1e1e; color: #dcddde; font-size: 13px; text-align: left; }
.obs-arbo { padding: 12px 10px; overflow: hidden; background: #262626; border-right: 1px solid #333; }
.obs-arbo p { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a8a8a; }
.obs-arbo div { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #bdbdbd; transition: background .4s, color .4s, max-height .5s, opacity .5s; }
.obs-arbo .d { color: #e3e3e3; } .obs-arbo .d::before { content: '▾'; font-size: 10px; color: #8a8a8a; }
.obs-arbo .f { padding-left: 20px; } .obs-arbo .f2 { padding-left: 32px; }
.obs-arbo .nouveau { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
.obs-arbo .nouveau.vu { max-height: 30px; opacity: 1; padding-top: 3px; padding-bottom: 3px; color: #1e1e1e; background: var(--menthe); }
.obs-note { padding: 18px 20px; overflow: hidden; border-right: 1px solid #333; }
.obs-note h5 { margin: 0 0 12px; font-size: 20px; color: #fff; }
.obs-meta { margin: 0 0 12px; padding: 8px 10px; border-radius: 6px; font: 11.5px/1.5 ui-monospace, Menlo, monospace; color: #9a9a9a; background: #262626; }
.obs-corps { font-size: 13.5px; line-height: 1.7; white-space: pre-wrap; min-height: 160px; }
.obs-corps .lien { color: #A88BFA; } .obs-corps .lien::before { content: '[['; opacity: .5; } .obs-corps .lien::after { content: ']]'; opacity: .5; }
.obs-corps .cur { display: inline-block; width: 2px; height: 15px; vertical-align: -2px; background: #A88BFA; animation: clig 1s steps(1) infinite; }
.obs-graphe { position: relative; overflow: hidden; background: #1a1a1a; }
.obs-graphe canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.obs-graphe .vault-date { top: 10px; right: 10px; }
.obs-question { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; padding: 12px 14px; border-radius: 12px; font-size: 13px; background: rgba(250,249,245,.97); color: #1d1d24; box-shadow: 0 20px 40px -14px rgba(0,0,0,.8); opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }
.obs-question.vu { opacity: 1; transform: none; }
.obs-question b { display: block; margin-bottom: 4px; } .obs-question span { color: #4b4b55; }
.obs-question .rep { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid #e6e4dc; color: #1d1d24; opacity: 0; transition: opacity .5s; } .obs-question .rep.vu { opacity: 1; }
.obs-question .rep i { font-style: normal; color: #7b5cf0; }
.obs-etape { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.obs-etape span { padding: 7px 12px; border-radius: 999px; font-size: 13px; color: var(--discret); background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--trait); transition: all .4s; }
.obs-etape span.actif { color: var(--sur); background: var(--degrade); box-shadow: none; font-weight: 700; }

/* ---------- LinkedIn : le vrai post ---------- */
.li-scene { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; text-align: left; }
.li-post { border-radius: 14px; overflow: hidden; background: #fff; color: #1d1d24; box-shadow: 0 40px 100px -40px rgba(0,0,0,.95); }
.li-tete { display: flex; gap: 10px; padding: 12px 14px 6px; } .li-tete img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.li-tete b { font-size: 14px; } .li-tete span { display: block; font-size: 11.5px; line-height: 1.35; color: #666; }
.li-texte { padding: 4px 14px 10px; font-size: 13px; line-height: 1.5; } .li-texte b { font-weight: 700; } .li-texte .plus { color: #666; }
.li-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #000; } .li-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.li-chiffres { display: flex; justify-content: space-between; padding: 8px 14px; font-size: 12px; color: #666; border-bottom: 1px solid #eee; }
.li-chiffres b { color: #1d1d24; font-variant-numeric: tabular-nums; }
.li-coms { position: relative; height: 196px; overflow: hidden; padding: 8px 14px 0; background: #fff; }
.li-coms::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(transparent, #fff); }
.li-com { display: flex; gap: 8px; margin-bottom: 8px; animation: entrer .5s cubic-bezier(.2,.8,.2,1); }
.li-com .av { flex: none; width: 30px; height: 30px; border-radius: 50%; }
.li-com div { padding: 7px 10px; border-radius: 0 10px 10px 10px; font-size: 12.5px; background: #f2f2f2; }
.li-com .nom { display: block; width: 88px; height: 8px; margin: 2px 0 6px; border-radius: 4px; background: #cfcfcf; filter: blur(1.5px); }
@keyframes entrer { from { opacity: 0; transform: translateY(-10px); } }
.li-machine { display: grid; gap: 10px; }
.li-etape { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--trait); transition: background .3s, box-shadow .3s; }
.li-etape i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-style: normal; background: rgba(255,255,255,.06); }
.li-etape b { display: block; font-size: 15px; } .li-etape span { font-size: 13px; color: var(--discret); }
.li-etape.pulse { background: rgba(125,255,210,.1); box-shadow: inset 0 0 0 1px rgba(125,255,210,.5); }
.li-etape.pulse i { background: var(--degrade); }
.li-compteur { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-radius: 14px; background: linear-gradient(90deg, rgba(125,255,210,.14), rgba(185,198,255,.12)); box-shadow: inset 0 0 0 1px rgba(159,220,235,.35); }
.li-compteur span { font-size: 13px; color: #d6fff2; } .li-compteur b { font-size: 26px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.li-source { margin: 12px 0 0; font-size: 12.5px; color: var(--discret); text-align: center; }

/* ---------- Mobile et tablette ---------- */
@media (max-width: 900px) {
  .module, .module.inverse { grid-template-columns: 1fr; text-align: center; }
  .module.inverse .module-texte { order: 0; }
  .module-texte .resultat { text-align: left; }
  .visuel-incline > *, .module.inverse .visuel-incline > * { transform: rotateX(8deg); }
  .trio { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .trio article:nth-child(n) { transform: none; }
  .duo-v3, .moi { grid-template-columns: 1fr; }
  .moi { text-align: center; } .moi-photo { max-width: 340px; margin: 0 auto 30px; } .preuves { justify-content: center; }
  .obs { grid-template-columns: 1fr 1fr; } .obs-arbo { display: none; }
  .li-scene { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .flotte { display: none; }
}
@media (max-width: 600px) {
  .hero-c h1 { font-size: 40px; }
  .scene .fenetre-app { transform: rotateX(10deg); }
  .veille { grid-template-columns: 1fr; padding: 16px; }
  .sources { grid-template-columns: 1fr 1fr; } .source small { display: none; }
  .flux { min-height: 54px; } .flux i { left: auto; top: -10px !important; animation-name: filer-bas; } .flux i:nth-child(1) { left: 20%; } .flux i:nth-child(2) { left: 40%; } .flux i:nth-child(3) { left: 60%; } .flux i:nth-child(4) { left: 80%; }
  .carte-v3, .urgence { padding: 22px 18px; }
  .garantie-v3 { flex-direction: column; text-align: center; }
  .obs { grid-template-columns: 1fr; height: auto; } .obs-note { border-right: 0; border-bottom: 1px solid #333; } .obs-corps { min-height: 150px; } .obs-graphe { height: 300px; }
  .bonus-v3 { padding: 26px 16px; border-radius: 24px; }
}
@keyframes filer-bas { 10% { opacity: 1; } 90% { opacity: 1; } to { transform: translateY(70px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flotte, .flux i { animation: none; } }
/* Correctifs */
.trio .media .post-news img { width: 28px; height: 28px; flex: none; }
.site { aspect-ratio: 16 / 12; }
.s-cartes { bottom: 5%; }
.s-bouton { margin-top: 1%; }
.up .up-visuel { width: min(1000px, calc(100vw - 40px)); max-width: none; position: relative; left: 50%; transform: translateX(-50%); }
.fenetre-app img { height: auto; }
.post-news p { color: #1d1d24; font-size: 12px; }
.prix-ligne b { white-space: nowrap; }
@media (max-width: 600px) {
  .cta-bloc .btn { width: 100%; padding: 0 16px; font-size: 16.5px; white-space: nowrap; }
  .final .prix-ligne { flex-wrap: wrap; justify-content: center; }
  .diapo { aspect-ratio: 4 / 3; }
}

/* ===== v4 : largeur unique, attente animée, Claude lisible, paiement en deux colonnes ===== */
:root { --contenu: 1100px; }
.scene, .module, .bonus-v3, .duo-v3, .moi, .lettre, .faq, .duo-final, .ps, .caisse-v4 { max-width: var(--contenu); margin-left: auto; margin-right: auto; }
.module { margin-bottom: clamp(80px, 12vh, 140px); }

/* Lettre en carte pleine largeur : l'accroche à gauche, le texte à droite */
.lettre { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px, 4vw, 60px); padding: clamp(28px, 4vw, 52px); border-radius: 30px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--trait); }
.lettre .fort { margin: 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.15; }
.lettre-corps p:last-child { margin-bottom: 0; }

/* Urgence et garantie côte à côte */
.duo-final { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.duo-final .urgence, .duo-final .garantie-v3 { max-width: none; margin: 0; height: 100%; }
.urgence .prix-barre { display: flex; justify-content: center; align-items: baseline; gap: 12px; margin: 6px 0 12px; }
.urgence .prix-barre b { font-size: 46px; letter-spacing: -.04em; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.urgence .prix-barre s { font-size: 22px; color: var(--discret); }
.faq { max-width: var(--contenu); }
.ps { padding: 26px 30px; border: 0; border-radius: 22px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--trait); }

/* Vidéo 1 : écran de réglages de Claude, une seule action à la fois */
.reglages { display: grid; grid-template-columns: 170px 1fr; min-height: 340px; background: #FAF9F5; color: #2b2a26; font-size: 13px; text-align: left; }
.reglages-menu { padding: 16px 10px; background: #F3F1EA; border-right: 1px solid #e6e3d9; }
.reglages-menu span { display: block; padding: 6px 10px; border-radius: 8px; color: #6c6a63; }
.reglages-menu span.on { color: #1d1c19; background: #fff; box-shadow: 0 0 0 1.5px #F5C042; font-weight: 600; }
.reglages-zone { padding: 20px 22px; }
.reglages-zone h6 { margin: 0 0 4px; font-size: 15px; } .reglages-zone p { margin: 0 0 12px; font-size: 12px; color: #77756e; }
.champ { min-height: 168px; padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 2px #F5C042; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.champ .cur { display: inline-block; width: 2px; height: 14px; vertical-align: -2px; background: #2b2a26; animation: clig 1s steps(1) infinite; }
.enregistre { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 6px 12px; border-radius: 9px; font-size: 12px; font-weight: 700; color: #fff; background: #2b2a26; opacity: .25; transition: opacity .4s, background .4s; }
.enregistre.vu { opacity: 1; background: #1f8f5f; }
.legende-ecran { margin: 14px auto 0; max-width: 520px; text-align: center; font-size: 14px; color: var(--doux); }
.visuel-calme > * { transform: rotateY(-6deg) rotateX(3deg); }

/* Attente animée sur les upsells */
.up-attente { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; animation: appel 2.4s ease-in-out infinite; }
.up-attente::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-100%); animation: balayage 2.4s ease-in-out infinite; }
.up-attente .sablier { display: inline-block; animation: tourne 2.4s ease-in-out infinite; }
@keyframes appel { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(125,255,210,.5); } 50% { transform: scale(1.015); box-shadow: 0 0 0 10px rgba(125,255,210,0); } }
@keyframes balayage { 60%, 100% { transform: translateX(100%); } }
@keyframes tourne { 0%, 40% { transform: rotate(0); } 60%, 100% { transform: rotate(180deg); } }
.up-progres-barre { height: 12px; }
.up-progres-barre i { position: relative; overflow: hidden; animation: none; transition: width 1.8s cubic-bezier(.2,.8,.2,1); }
.up-progres-barre i::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.28) 0 8px, transparent 8px 16px); background-size: 22px 22px; animation: rayures .8s linear infinite; }
@keyframes rayures { to { background-position: 22px 0; } }
.up-urgence { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -18px auto 30px; font-size: 14px; font-weight: 600; color: #ffd27d; }
.up-urgence i { width: 8px; height: 8px; border-radius: 50%; background: #ffb84d; box-shadow: 0 0 10px #ffb84d; animation: clig 1.2s infinite; }

/* LinkedIn : vraie capture des commentaires et un point qui chemine */
.li-capture { position: relative; height: 300px; overflow: hidden; background: #fff; border-top: 1px solid #eee; }
.li-capture img { width: 100%; animation: defile-com 18s ease-in-out infinite alternate; }
@keyframes defile-com { 0%, 12% { transform: translateY(0); } 88%, 100% { transform: translateY(calc(-100% + 300px)); } }
.li-machine { position: relative; padding-left: 26px; }
.li-machine::before { content: ''; position: absolute; left: 9px; top: 20px; bottom: 150px; width: 2px; background: linear-gradient(var(--menthe), var(--bleu)); opacity: .35; }
.li-point { position: absolute; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--menthe); box-shadow: 0 0 0 5px rgba(125,255,210,.18), 0 0 18px var(--menthe); transition: top 1s cubic-bezier(.45,0,.2,1); }
.li-etape { transition: background .6s, box-shadow .6s; }

/* Paiement en deux colonnes : les bénéfices à gauche, le bon de commande à droite */
.caisse-v4 { padding-top: 10px; }
.caisse-tete { text-align: center; margin-bottom: 34px; }
.caisse-tete h1 { margin: 6px auto 10px; max-width: 760px; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.04; letter-spacing: -.045em; }
.caisse-tete .alerte { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #ffd27d; background: rgba(255,184,77,.08); box-shadow: inset 0 0 0 1px rgba(255,184,77,.35); }
.caisse-tete .alerte i { width: 8px; height: 8px; border-radius: 50%; background: #ffb84d; animation: clig 1.2s infinite; }
.caisse-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.caisse-gauche { display: grid; gap: 18px; }
.produit { display: flex; align-items: center; gap: 14px; }
.produit img { width: 58px; } .produit b { display: block; font-size: 22px; letter-spacing: -.02em; } .produit span { font-size: 14px; color: var(--discret); }
.caisse-gauche .carte-v3 { padding: 26px; }
.caisse-gauche .pile { margin-top: 0; }
.temoins { display: grid; gap: 12px; }
.temoin { padding: 18px 20px; border-radius: 18px; font-size: 14.5px; color: var(--doux); background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--trait); }
.temoin b { display: block; margin-top: 10px; font-size: 13.5px; color: #fff; } .temoin b span { font-weight: 400; color: var(--discret); }
.caisse-droite .paiement { position: sticky; top: 20px; padding: 30px; }
.caisse-droite .paiement h2 { margin: 0 0 18px; font-size: 20px; text-align: center; }
.cgv { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 16px; font-size: 13px; color: var(--doux); } .cgv input { margin-top: 3px; accent-color: #7DFFD2; }

@media (max-width: 900px) {
  .lettre, .duo-final, .caisse-grille { grid-template-columns: 1fr; }
  .caisse-droite { order: -1; } .caisse-droite .paiement { position: static; }
  .reglages { grid-template-columns: 1fr; } .reglages-menu { display: none; }
}
@media (max-width: 600px) { .lettre { padding: 24px 18px; } .caisse-droite .paiement { padding: 22px 16px; } .ps { padding: 22px 18px; } }
.s-titre { max-width: 54%; font-size: clamp(15px, 2vw, 26px); }
.s-texte { max-width: 50%; }
.s-cartes { width: 46%; bottom: 4%; }
.s-cartes span { padding: 4% 5%; }
.site { aspect-ratio: 16 / 13; } .s-cartes { bottom: 3%; }

/* ===== v5 ===== */
.hero-c { padding-bottom: 0; }
.hero-c h1 { max-width: 1100px; font-size: clamp(38px, 4.6vw, 64px); line-height: 1.04; }
.hero-c h1 .accent { white-space: nowrap; }

/* Lettre : la liste du jour qui ne raccourcit pas */
.lettre-gauche { display: flex; flex-direction: column; gap: 26px; }
.liste-jour { padding: 18px; border-radius: 18px; background: #FAF9F5; color: #2b2a26; box-shadow: 0 30px 70px -30px rgba(0,0,0,.9); transform: rotate(-2deg); }
.lj-tete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .lj-tete b { font-size: 15px; } .lj-compte { font-size: 12px; font-weight: 700; color: #c2410c; }
.lj-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.lj-items li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; animation: arrive .6s cubic-bezier(.2,.8,.2,1) both; }
.lj-items li::before { content: ''; flex: none; width: 15px; height: 15px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px #b9b5aa; }
.lj-items li:nth-child(2) { animation-delay: .15s; } .lj-items li:nth-child(3) { animation-delay: .3s; } .lj-items li:nth-child(4) { animation-delay: .45s; } .lj-items li:nth-child(5) { animation-delay: .6s; } .lj-items li:nth-child(6) { animation-delay: .75s; }
@keyframes arrive { from { opacity: 0; transform: translateY(-6px); } }
.lj-pied { margin: 12px 0 0; font-size: 12px; color: #8a877e; }

/* Le produit, présenté comme un objet premium */
.produit-v4 { position: relative; max-width: var(--contenu); margin: 0 auto 90px; padding: clamp(40px, 6vw, 80px) clamp(22px, 5vw, 60px); border-radius: 34px; overflow: hidden; text-align: center; background: radial-gradient(80% 90% at 50% 0%, rgba(125,255,210,.12), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); box-shadow: inset 0 0 0 1px rgba(159,220,235,.3), 0 0 180px -60px rgba(125,255,210,.5); }
.pv-halo { position: absolute; left: 50%; top: -120px; width: 520px; height: 520px; transform: translateX(-50%); border-radius: 50%; background: conic-gradient(from 0deg, rgba(125,255,210,.25), rgba(185,198,255,.25), rgba(125,255,210,.25)); filter: blur(70px); animation: tourne-halo 14s linear infinite; pointer-events: none; }
@keyframes tourne-halo { to { transform: translateX(-50%) rotate(360deg); } }
.pv-gemme { position: relative; width: 110px; margin: 0 auto 18px; filter: drop-shadow(0 20px 40px rgba(125,255,210,.45)); animation: flotter 6s ease-in-out infinite; }
.produit-v4 h2 { position: relative; margin: 0 0 16px; font-size: clamp(38px, 5.6vw, 72px); line-height: 1; letter-spacing: -.05em; }
.produit-v4 > p { position: relative; margin: 0 auto 30px; max-width: 640px; font-size: 18px; color: var(--doux); } .produit-v4 > p b { color: #fff; }
.pv-chiffres { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.pv-chiffres div { min-width: 150px; padding: 16px 20px; border-radius: 18px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.pv-chiffres b { display: block; font-size: 40px; line-height: 1; letter-spacing: -.04em; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pv-chiffres span { font-size: 13.5px; color: var(--doux); }

/* Ordinateur portable */
.portable { position: relative; }
.portable-ecran { padding: 12px 12px 14px; border-radius: 18px 18px 6px 6px; background: #17181d; box-shadow: 0 50px 110px -40px rgba(0,0,0,.95), 0 0 90px -40px rgba(125,255,210,.45), inset 0 0 0 1px rgba(255,255,255,.12); }
.portable-socle { position: relative; height: 16px; margin: 0 -7%; border-radius: 2px 2px 16px 16px; background: linear-gradient(180deg, #d9dce2, #9da1ab); box-shadow: 0 20px 40px -18px rgba(0,0,0,.9); }
.portable-socle::before { content: ''; position: absolute; left: 50%; top: 0; width: 18%; height: 6px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #8b8f99; }
.portable .fenetre-app { box-shadow: none; }

@media (max-width: 600px) { .hero-c h1 .accent { white-space: normal; } .liste-jour { transform: none; } .pv-chiffres div { min-width: 0; flex: 1; padding: 12px 8px; } .pv-chiffres b { font-size: 30px; } }
.lettre .liste-jour b { color: #2b2a26; }
@media (max-width: 900px) { .portable-socle { margin: 0 -2%; } .pv-halo { width: 300px; height: 300px; } }
.portable .s-image { top: 17%; aspect-ratio: 1 / 1; width: 34%; }
.portable .s-cartes { left: auto; right: 5%; width: 34%; bottom: 5%; gap: 6px; }
.portable .s-cartes span { font-size: clamp(7px, .75vw, 10px); }
.portable .etiquette-ligne { right: auto; left: 8%; bottom: 14px; }
/* Portable aux vraies proportions : écran en 16/10 */
.portable .site { aspect-ratio: 16 / 10; }
.portable .s-nav { padding: 3% 6%; }
.portable .s-titre { padding-top: 1%; font-size: clamp(14px, 1.8vw, 24px); max-width: 52%; }
.portable .s-texte { padding: 1.5% 6%; max-width: 50%; }
.portable .s-image { top: 15%; width: 30%; aspect-ratio: 5 / 4; }
.portable .s-cartes { width: 30%; bottom: 6%; }
.portable .s-cartes span { padding: 3% 4%; }
.portable .etiquette-ligne { bottom: 10px; }
.portable .etiquette-ligne { top: 7px; bottom: auto; left: auto; right: 12px; padding: 4px 10px; font-size: 11px; }
@media (max-width: 600px) { .portable .s-texte { display: none; } .portable .s-titre { max-width: 56%; } }
.site { text-align: left; }

/* Cartes du bonus : à plat, sans mouvement au survol */
.trio { perspective: none; }
.trio article, .trio article:nth-child(n), .trio article:hover { transform: none !important; transition: none; }

/* Portable : un écran 16/10 au total (barre comprise), cadre fin, sans inclinaison */
.visuel-incline > .portable, .module.inverse .visuel-incline > .portable, .visuel-incline:hover > .portable { transform: none !important; }
.portable { max-width: 560px; margin: 0 auto; }
.portable-ecran { padding: 8px 8px 10px; border-radius: 14px 14px 4px 4px; }
.portable-ecran .fenetre-app { display: flex; flex-direction: column; aspect-ratio: 16 / 10; border-radius: 4px; }
.portable-ecran .fenetre-app .barre { flex: none; height: 24px; }
.portable-ecran .fenetre-app .url { padding: 2px 10px; font-size: 10.5px; }
.portable .site { flex: 1; aspect-ratio: auto !important; }
.portable-socle { height: 12px; margin: 0 -8%; border-radius: 2px 2px 14px 14px; }
.portable .etiquette-ligne { top: 3px; padding: 3px 9px; font-size: 10.5px; }

/* Vidéo 4 : le site est visible d'emblée, seule la pastille « En ligne » vit */
.site > *, .site.monte > * { opacity: 1 !important; transform: none !important; animation: none !important; }
.etiquette-ligne, .etiquette-ligne.vu { opacity: 1; animation: en-ligne 2.6s ease-in-out infinite; }
.etiquette-ligne::before { animation: point-ligne 1.3s ease-in-out infinite; }
@keyframes en-ligne { 0%, 100% { box-shadow: 0 0 0 0 rgba(31,143,95,.55); } 50% { box-shadow: 0 0 0 7px rgba(31,143,95,0); } }
@keyframes point-ligne { 50% { opacity: .35; transform: scale(.75); } }
@media (prefers-reduced-motion: reduce) { .etiquette-ligne, .etiquette-ligne::before { animation: none; } }
.trio video[src*="masterclass"] { object-position: 8% 50%; }

/* Bonus : captures en 16/9, image entière (on voit Jérémy en bas à droite) */
.trio .media { aspect-ratio: 16 / 9; }
.trio .media video { object-fit: cover; object-position: 50% 50% !important; }
.trio .post-news { gap: 6px; padding: 10px; font-size: 11px; }
.trio .post-news p { font-size: 11px; line-height: 1.4; }
.trio .pn-carte { padding: 6px; } .trio .pn-carte b { font-size: 13px; }