/* Styles propres à wordly/index.html (partagés par la version anglaise). */
:root {
  --bg: #f6f1e8; --bg2: #fffdf9; --ink: #1c1814; --muted: #6b6157; --line: rgba(28,24,20,.12);
  --accent: #2f5bff; --accent-ink: #fff;
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --display-weight: 500; --display-stretch: 100%; --display-track: -.025em;
}
.phero .fond { background: radial-gradient(50% 60% at 78% 40%, #dfe7ff, transparent 70%), radial-gradient(40% 40% at 10% 90%, #f1e2c8, transparent 70%); }
.kin { font-size: clamp(3.2rem, 7.2vw, 7rem); line-height: .95; }
.kin em { font-style: italic; }

/* Scène : deux pages, un faisceau qui traduit */
.pages { position: absolute; left: 50%; top: 50%; width: min(78%, 400px); translate: -50% -50%; aspect-ratio: 935 / 1210; }
.pages img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 6px; box-shadow: 0 40px 80px -30px rgba(60,40,10,.45), 0 0 0 1px rgba(0,0,0,.05); }
.pages .fr { clip-path: inset(0 100% 0 0); animation: traduit 6s cubic-bezier(.65,0,.35,1) infinite; }
.pages .rayon { position: absolute; top: -4%; bottom: -4%; width: 3px; left: 0; background: var(--accent); box-shadow: 0 0 24px 6px color-mix(in oklab, var(--accent) 55%, transparent); border-radius: 3px; animation: rayon 6s cubic-bezier(.65,0,.35,1) infinite; }
.pages .lang { position: absolute; top: -18px; padding: 7px 13px; border-radius: 999px; font: 700 .8rem "Roboto Flex", sans-serif; background: #1c1814; color: #fff; z-index: 2; }
.pages .lang.en { left: -14px; } .pages .lang.fr2 { right: -14px; background: var(--accent); }
@keyframes traduit { 0%, 8% { clip-path: inset(0 100% 0 0); } 46%, 62% { clip-path: inset(0 0 0 0); } 96%, 100% { clip-path: inset(0 0 0 100%); } }
@keyframes rayon { 0%, 8% { left: 0; opacity: 1; } 46% { left: 100%; opacity: 1; } 50%, 58% { opacity: 0; left: 100%; } 62% { left: 0; opacity: 0; } 63% { opacity: 1; } 96%, 100% { left: 100%; opacity: 1; } }
.fmt { position: absolute; padding: 9px 14px; border-radius: 12px; background: #fff; font: 800 .82rem "Roboto Flex", sans-serif; letter-spacing: .04em; box-shadow: 0 16px 34px -12px rgba(60,40,10,.35); z-index: 3; }
.fmt i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 8px; vertical-align: 0; }

/* Comparateur */
.compare { position: relative; max-width: 620px; margin: 0 auto; aspect-ratio: 935 / 1210; border-radius: 10px; overflow: hidden; box-shadow: 0 50px 100px -40px rgba(60,40,10,.5), 0 0 0 1px var(--line); touch-action: pan-y; user-select: none; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; }
.compare .haut { clip-path: inset(0 0 0 var(--x, 50%)); }
.compare .poignee { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 3px; margin-left: -1.5px; background: var(--accent); pointer-events: none; }
.compare .poignee::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font: 800 1.1rem "Roboto Flex", sans-serif; box-shadow: 0 10px 30px -6px color-mix(in oklab, var(--accent) 70%, transparent); }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.compare .tag { position: absolute; top: 14px; padding: 6px 12px; border-radius: 999px; font: 700 .8rem "Roboto Flex", sans-serif; background: rgba(28,24,20,.85); color: #fff; pointer-events: none; }
.legende { text-align: center; color: var(--muted); font-size: .95rem; margin-top: 18px; }

.formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.format { border-radius: var(--rayon); padding: 30px 28px; background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line); position: relative; overflow: hidden; }
.format .ext { display: inline-grid; place-items: center; width: 58px; height: 70px; border-radius: 8px; color: #fff; font: 900 .85rem "Roboto Flex", sans-serif; letter-spacing: .04em; clip-path: polygon(0 0, 72% 0, 100% 20%, 100% 100%, 0 100%); }
.format h3 { margin-top: 22px; font-family: var(--display); font-weight: 500; font-size: 1.7rem; letter-spacing: -.02em; line-height: 1.1; }
.format p { margin-top: 10px; color: var(--muted); }
.plus { margin-top: 20px; text-align: center; color: var(--muted); }
.plus b { color: var(--ink); }
@media (max-width: 960px) { .formats { grid-template-columns: 1fr; } }