/* Visuels du site public (src/Visuals.php) : icônes, mini-démos, comparateur, étapes, graphiques.
   Règle de mise en page : chaque scène centre son contenu en grille (place-items) et garde une marge
   intérieure d'au moins 8 % ; rien ne touche les bords. */

/* ---------------------------------------------------------------- A1 : icônes */
.ico { width: 1em; height: 1em; fill: none; stroke: var(--ivory); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico .a { stroke: var(--peach); }
.ico .f { fill: var(--peach); stroke: none; }
.ico-badge { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--night-3); font-size: 30px; flex: none; }
.light .ico-badge { background: var(--night); }

/* ---------------------------------------------------------------- scènes des mini-démos */
.demo { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #0d0c0e; isolation: isolate; }
.demo img { display: block; }
.feature-card .demo { margin: -4px 0 14px; }

/* B1 : les 5 styles de sous-titres de l'éditeur, l'un après l'autre (tailles en largeur du cadre) */
.demo-captions { container-type: inline-size; }
.demo-captions img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.demo-captions .lbl { color: var(--ivory); }
.demo-captions .cap { position: absolute; left: 6%; right: 6%; text-align: center; color: #fff; opacity: 0;
  transform: translateY(6px); transition: opacity .3s, transform .3s; line-height: 1.12; }
.demo-captions .cap.on { opacity: 1; transform: none; }
.demo-captions .cap span { display: inline-block; transition: transform .15s, color .15s, background-color .15s; }
.demo-captions .cap span.hl { transform: scale(1.12); }
/* Contour noir épais : ombres dans huit directions */
.demo-captions .s-pop, .demo-captions .s-dynamic, .demo-captions .s-impact, .demo-captions .s-minimal {
  --o: .5cqw; text-shadow: var(--o) 0 #111, calc(-1 * var(--o)) 0 #111, 0 var(--o) #111, 0 calc(-1 * var(--o)) #111,
    var(--o) var(--o) #111, calc(-1 * var(--o)) var(--o) #111, var(--o) calc(-1 * var(--o)) #111, calc(-1 * var(--o)) calc(-1 * var(--o)) #111,
    0 .9cqw 1.2cqw rgb(0 0 0 / .55); }
.demo-captions .s-pop { bottom: 14%; font: 400 7.2cqw 'Archivo Black', var(--display); text-transform: uppercase; --o: .55cqw; }
.demo-captions .s-pop span { padding: .02em .16em; border-radius: .14em; }
.demo-captions .s-pop span.hl { background: var(--peach); color: #111; text-shadow: none; transform: scale(1.1) rotate(-3deg); }
.demo-captions .s-dynamic { bottom: 16%; font: 800 6.4cqw 'Montserrat', var(--body); text-transform: uppercase; }
.demo-captions .s-dynamic span.hl { color: var(--peach); }
.demo-captions .s-impact { bottom: 18%; font: 900 9.4cqw 'Montserrat', var(--body); text-transform: uppercase; --o: .6cqw; }
.demo-captions .s-impact span.hl { color: #2bea6b; transform: scale(1.18); }
.demo-captions .s-classic { bottom: 7%; left: 50%; right: auto; transform: translate(-50%, 6px); white-space: nowrap;
  font: 700 4.4cqw 'Lato', var(--body); padding: .3em .7em; border-radius: .35em; background: rgb(0 0 0 / .65); }
.demo-captions .s-classic.on { transform: translate(-50%, 0); }
.demo-captions .s-classic span.hl { transform: none; }
.demo-captions .s-minimal { bottom: 10%; font: 600 5cqw 'Montserrat', var(--body); --o: .28cqw; }
.demo-captions .s-minimal span.hl { color: #7cc8ff; transform: none; }

/* B2 : onde avant / après */
.demo-wave canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.demo .lbl { position: absolute; top: 12px; left: 12px; padding: 4px 9px; border-radius: 6px; background: rgb(0 0 0 / .55);
  font: 700 11px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.demo .lbl.after { color: var(--peach); }

/* B3 : zoom sur une photo nette. Le calque fait 180 % du cadre : le gros plan s'affiche à la résolution
   native de l'image et le plan large (« avant ») est un dézoom, donc rien n'est jamais agrandi. */
.demo-zoom .shot { position: absolute; left: 0; top: 0; width: 180%; height: 180%; transform-origin: 0 0;
  transform: scale(.5556); animation: v-push 3.6s ease-in-out infinite; will-change: transform; }
.demo-zoom img { width: 100%; height: 100%; object-fit: cover; }
.demo-zoom .crop { position: absolute; left: 16%; top: 10%; width: 55.6%; height: 55.6%; border: 2px dashed var(--peach); border-radius: 8px; animation: v-crop 3.6s ease-in-out infinite; }
@keyframes v-push { 0%, 20% { transform: translate(0, 0) scale(.5556); } 45%, 75% { transform: translate(-16%, -10%) scale(1); } 100% { transform: translate(0, 0) scale(.5556); } }
@keyframes v-crop { 0%, 18% { opacity: 1; } 40%, 80% { opacity: 0; } 100% { opacity: 1; } }

/* B4 : coupe des silences */
.demo-cuts { display: grid; align-content: center; gap: 14px; padding: 8% 9%; }
.demo-cuts .tl { font: 700 11px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.demo-cuts .track { display: flex; gap: 4px; height: 36px; }
.demo-cuts .seg { background: var(--peach); border-radius: 6px; }
.demo-cuts .gap { flex: 0 0 var(--w); border-radius: 6px; background: repeating-linear-gradient(45deg, #3a3532 0 6px, #2a2624 6px 12px); animation: v-shrink 3.4s ease-in-out infinite; }
@keyframes v-shrink { 0%, 30% { flex-basis: var(--w); opacity: 1; } 60%, 85% { flex-basis: 0; opacity: 0; margin-inline: -2px; } 100% { flex-basis: var(--w); opacity: 1; } }

/* B5 : recadrage 9:16 qui suit la personne */
.demo-reframe .wide { position: absolute; inset: 0; background: var(--img) center / cover; }
.demo-reframe .wide::before { content: ""; position: absolute; inset: 0; background: inherit; filter: blur(14px) brightness(.55); transform: scale(1.15); }
.demo-reframe .wide img { position: absolute; top: 0; height: 100%; width: auto; animation: v-walk 5s ease-in-out infinite; }
.demo-reframe .win { position: absolute; top: 6%; bottom: 6%; aspect-ratio: 9 / 16; border: 2px solid var(--peach); border-radius: 8px;
  box-shadow: 0 0 0 999px rgb(13 12 14 / .58); animation: v-follow 5s ease-in-out infinite; }
@keyframes v-walk { 0%, 15% { left: 4%; } 50%, 65% { left: 54%; } 100% { left: 4%; } }
@keyframes v-follow { 0%, 25% { left: 8%; } 60%, 75% { left: 58%; } 100% { left: 8%; } }

/* B6 : musique qui baisse sous la voix */
.demo-music { display: grid; align-content: center; gap: 16px; padding: 8% 9%; }
.demo-music .row { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 12px;
  font: 700 11px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.demo-music .bars { display: flex; align-items: flex-end; gap: 3px; height: 48px; }
.demo-music .bars i { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--muted-2); }
.demo-music .voice i { background: var(--peach); }

/* F1 : émojis flottants sur une vraie photo */
.demo-emojis img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: brightness(.75); }
.demo-emojis .sticker { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 14px; background: rgb(18 17 19 / .82); font-size: 25px; box-shadow: 0 8px 20px rgb(0 0 0 / .35);
  animation: v-float 5s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes v-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-9px) rotate(4deg); } }

/* Cadre de progression et titre sur une photo de téléphone */
.demo-frame { display: grid; place-items: center; background: radial-gradient(60% 80% at 50% 40%, #2a2522, #0d0c0e); }
.demo-frame .phone-shot { position: relative; height: 84%; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; container-type: inline-size; }
.demo-frame .phone-shot img { width: 100%; height: 100%; object-fit: cover; }
.demo-frame .title-fx { position: absolute; left: 12%; right: 12%; top: 12%; text-align: center; font: 400 11cqw/1 var(--display); text-wrap: balance;
  color: #fff; text-shadow: 0 2px 0 #000; }
.prog { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.prog rect { fill: none; stroke-width: 4; }
.prog .track { stroke: rgb(255 138 61 / .22); }
.prog .bar { stroke: var(--peach); stroke-dasharray: 100; stroke-dashoffset: 100; animation: v-around 5s linear infinite; filter: drop-shadow(0 0 5px rgb(255 138 61 / .7)); }
@keyframes v-around { to { stroke-dashoffset: 0; } }

/* ---------------------------------------------------------------- C3 : bouton entouré du cadre de progression */
.frame-btn { position: relative; display: inline-block; padding: 7px; border-radius: calc(var(--radius) + 7px); }
.frame-btn > .btn { position: relative; z-index: 1; }
.frame-btn > .prog .track { stroke: rgb(255 138 61 / .25); }
.frame-btn > .prog rect { stroke-width: 3; }

/* ---------------------------------------------------------------- C1 : comparateur avant / après */
.compare-ba { position: relative; width: min(100%, 360px); aspect-ratio: 9 / 16; margin-inline: auto; border-radius: 22px; overflow: hidden;
  background: #0d0c0e; box-shadow: 0 30px 60px rgb(0 0 0 / .45); user-select: none; touch-action: pan-y; container-type: inline-size; }
.ba-pane { position: absolute; inset: 0; overflow: hidden; }
.ba-pane img:not(.ba-logo):not(.ba-emoji) { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Avant : terne, plat, un peu flou et granuleux, comme sorti du téléphone dans une pièce sombre. */
/* Mal cadré : décentré vers la gauche et le bas, légèrement penché (le zoom évite les coins vides). */
.ba-before img { filter: saturate(.4) contrast(.82) brightness(.82) sepia(.18) blur(1.8px);
  transform: scale(1.3) translate(-11%, 5%) rotate(-3deg); transform-origin: 50% 40%; }
.ba-grain { position: absolute; inset: 0; opacity: .32; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Après : couleurs vives, contraste, léger zoom, vignettage. */
.ba-after { clip-path: inset(0 0 0 var(--x)); }
.ba-zoom { position: absolute; inset: 0; transform: scale(1.1); transform-origin: 50% 28%; }
.ba-zoom img { filter: saturate(1.28) contrast(1.12) brightness(1.06); }
.ba-vignette { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 38%, transparent 55%, rgb(0 0 0 / .45)); }
.ba-logo { position: absolute; top: 6.5%; right: 7.5%; width: 30%; height: auto; opacity: .92; font-family: var(--body);
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / .45)); }
.ba-prog { position: absolute; inset: 0; width: 100%; height: 100%; }
.ba-prog rect { fill: none; stroke-width: 1.6; }
.ba-prog .track { stroke: rgb(255 255 255 / .22); }
.ba-prog .bar { stroke: var(--peach); stroke-dasharray: 100; stroke-dashoffset: 36; stroke-linecap: round; filter: drop-shadow(0 0 1.5px rgb(255 138 61 / .9)); }
/* Émoji accroché au coin du mot surligné, quelle que soit la langue */
.ba-emoji { position: absolute; right: -.62em; top: -.78em; width: .95em; height: auto; transform: rotate(15deg);
  filter: drop-shadow(0 4px 8px rgb(0 0 0 / .45)); }
[dir="rtl"] .ba-emoji { right: auto; left: -.62em; transform: rotate(-15deg); }
.ba-emoji.low { top: auto; bottom: -.55em; }
.ba-sub { position: absolute; left: 7%; right: 7%; bottom: 15%; text-align: center; font: 400 13cqw/1.02 var(--display); letter-spacing: .01em;
  color: #fff; text-shadow: 0 3px 0 #000, 0 0 14px rgb(0 0 0 / .6); }
.ba-sub b { position: relative; display: inline-block; margin: 0 .04em; padding: .02em .16em 0; border-radius: .12em; background: var(--peach); color: #121113;
  font-weight: 400; text-shadow: none; transform: rotate(-3deg) scale(1.08); box-shadow: 0 .08em 0 #000, 0 .2em .5em rgb(0 0 0 / .35); }
.ba-tag { position: absolute; bottom: 4%; padding: 5px 10px; border-radius: 7px; background: rgb(18 17 19 / .78); z-index: 2;
  font: 700 11px var(--body); letter-spacing: .14em; text-transform: uppercase; }
.ba-tag.left { left: 4.5%; color: var(--muted); }
.ba-tag.right { right: 4.5%; color: var(--peach); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; background: var(--peach); z-index: 2; pointer-events: none;
  box-shadow: 0 0 10px rgb(0 0 0 / .35); }
.ba-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%;
  background: var(--peach) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121113' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-5 6 5 6M15 6l5 6-5 6'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 4px 14px rgb(0 0 0 / .4); }
.compare-ba input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.compare-ba:focus-within .ba-handle::after { outline: 2px solid var(--ivory); outline-offset: 3px; }

/* ---------------------------------------------------------------- C2 : étapes animées */
.steps-anim { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; position: relative; }
.steps-anim::before { content: ""; position: absolute; top: 34px; left: 16.7%; right: 16.7%; height: 3px; border-radius: 3px; background: rgb(18 17 19 / .12); }
.steps-anim::after { content: ""; position: absolute; top: 34px; left: 16.7%; right: 16.7%; height: 3px; border-radius: 3px; background: var(--peach);
  transform-origin: left; animation: v-fill 6s linear infinite; }
.steps-anim li { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: 6px; padding: 0 8px; }
.steps-anim .disc { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: var(--night); font-size: 32px;
  animation: v-lit 6s infinite; animation-delay: calc(var(--i) * 2s); }
.steps-anim .disc .ico { stroke: var(--ivory); }
.steps-anim h3 { margin: 10px 0 0; font-size: 28px; }
.steps-anim p { margin: 0; max-width: 24em; }
@keyframes v-lit { 0%, 30% { background: var(--peach); box-shadow: 0 0 26px rgb(255 138 61 / .5); } 33%, 100% { background: var(--night); box-shadow: none; } }
@keyframes v-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------------------------------------------------------------- E2 : anneau */
.ring-fig { margin: 0; display: grid; justify-items: center; gap: 14px; text-align: center; }
.ring { position: relative; width: 168px; aspect-ratio: 1; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 11; }
.ring .ring-track { stroke: rgb(18 17 19 / .1); }
.ring .ring-val { stroke: var(--peach); stroke-linecap: round; }
.ring-num { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; }
.ring-num b { font: 400 46px/.9 var(--display); }
.ring-num span { font-size: 13px; color: #5d5751; }
.ring-fig figcaption { max-width: 22em; font-size: 14px; color: #5d5751; }

/* ---------------------------------------------------------------- E1 : prix comparés */
.price-chart { margin: 0; background: var(--night-2); border-radius: 16px; padding: 22px 24px; }
.price-chart figcaption { font: 700 12px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 14px; }
.pc-rows { display: grid; gap: 10px; }
.pc-row { display: grid; grid-template-columns: 108px minmax(0, 1fr) 76px; align-items: center; gap: 12px; font-size: 14px; }
.pc-name { color: var(--muted); }
.pc-track { height: 14px; }
.pc-bar { display: block; height: 100%; min-width: 4px; border-radius: 0 5px 5px 0; background: #4a4650; }
.pc-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.pc-row.me .pc-name, .pc-row.me .pc-val { color: var(--ivory); font-weight: 800; }
.pc-row.me .pc-bar { background: var(--peach); }
.pc-row.hl .pc-name, .pc-row.hl .pc-val { color: var(--ivory); }
.pc-row.hl .pc-bar { background: var(--muted); }
.pc-note { margin: 14px 0 0; font-size: 12.5px; color: var(--muted-2); }
.light .price-chart { background: var(--night); }

/* ---------------------------------------------------------------- D : illustrations génératives */
.gen-cover { position: relative; width: 100%; aspect-ratio: 1200 / 760; border-radius: 16px; overflow: hidden; background: var(--night-2); }
.gen-cover canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------------------------------------------------------------- en-tête de page avec visuel */
/* Même colonne que l'article : le texte de l'en-tête reste aligné sur le corps de la page. */
.article-head.has-visual .head-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px; align-items: center; }
.article-head.has-visual h1 { font-size: clamp(44px, 5.4vw, 68px); }
.article-head .head-visual { min-width: 0; }
.article-head .head-visual .demo, .article-head .head-visual .gen-cover { box-shadow: 0 24px 50px rgb(0 0 0 / .35); }

/* ---------------------------------------------------------------- cartes de fonctions et rangée d'icônes */
.feature-card { display: flex; flex-direction: column; }
.feature-card h3 { display: flex; align-items: center; gap: 10px; }
.feature-card h3 .ico { font-size: 26px; }
.feature-card .badge { align-self: flex-start; }
.icon-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.icon-row a { display: grid; justify-items: center; gap: 10px; padding: 18px 10px; border-radius: 14px; background: var(--night-2);
  text-align: center; text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 600; transition: background .15s, color .15s; }
.icon-row a:hover { background: #232126; color: var(--ivory); }
.link-card .ico-badge { margin-bottom: 4px; }

/* ---------------------------------------------------------------- accueil */
.how-grid { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.light .steps-anim p { color: #5d5751; }
.ba-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.ba-grid .section-lead { margin-bottom: 30px; }
.ba-grid h2 { margin-top: 12px; }
.chart-wrap { margin: 0 0 28px; }

/* ---------------------------------------------------------------- F2 : encadrés illustrés */
.callout { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 20px; }
.callout::before { content: ""; width: 40px; height: 40px; border-radius: 10px; background: rgb(255 138 61 / .16)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8a3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-4 10c1 1 1 2 1 3h6c0-1 0-2 1-3a6 6 0 0 0-4-10z'/%3E%3C/svg%3E") center / 22px no-repeat; }
.callout > * { grid-column: 2; margin: 0; }
.callout > * + * { margin-top: 8px; }

/* ---------------------------------------------------------------- petits écrans */
@media (max-width: 900px) {
  .how-grid, .ba-grid { grid-template-columns: 1fr; gap: 36px; }
  .article-head.has-visual .head-grid { grid-template-columns: 1fr; gap: 26px; }
  .icon-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps-anim { grid-template-columns: 1fr; gap: 26px; }
  .steps-anim::before, .steps-anim::after { display: none; }
}
@media (max-width: 480px) {
  .pc-row { grid-template-columns: 88px minmax(0, 1fr) 64px; gap: 8px; font-size: 13px; }
  .price-chart { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo *, .demo, .steps-anim *, .steps-anim::after, .prog .bar { animation: none !important; }
  .prog .bar { stroke-dashoffset: 35; }
}

/* Graphique des prix dans une colonne étroite (en-tête de comparatif) : colonnes resserrées. */
.price-chart { container-type: inline-size; }
@container (max-width: 380px) {
  .pc-row { grid-template-columns: 90px minmax(0, 1fr) 58px; gap: 10px; font-size: 12.5px; }
}

/* Comparateur hors latin : polices de repli plus hautes (interligne plus large) ; logo toujours de gauche à droite. */
:lang(ru) .ba-sub, :lang(zh-Hans) .ba-sub, :lang(ar) .ba-sub { line-height: 1.28; }
.ba-logo { direction: ltr; }