/* Styles propres à memento/index.html (partagés par la version anglaise). */
:root {
  --bg: #f8f3ec; --bg2: #fffcf7; --ink: #1f1b18; --muted: #6e6259; --line: rgba(31,27,24,.12);
  --accent: #b4532f; --accent-ink: #fff; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --display-weight: 820; --display-stretch: 100%; --display-track: -.04em;
}
.kin em, .h2 em { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -.02em; }
.phero .fond { background: radial-gradient(45% 55% at 75% 45%, #f6dcc7, transparent 70%), radial-gradient(35% 35% at 15% 85%, #efe3cf, transparent 70%); }
.kin { font-size: clamp(3.4rem, 7.6vw, 7.4rem); }

/* Démo Memory Echo */
.editeur { position: absolute; left: 0; top: 12%; width: 74%; background: #fff; border-radius: 18px; padding: 26px 26px 30px; box-shadow: 0 40px 80px -30px rgba(90,50,20,.4), 0 0 0 1px var(--line); z-index: 2; }
.editeur .carnet { font: 600 .78rem "Roboto Flex", sans-serif; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.editeur .carnet i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, #7aa37a); }
.editeur h3 { margin-top: 14px; font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 600; line-height: 1.15; min-height: 2.3em; }
.editeur h3::after { content: ""; display: inline-block; width: 2px; height: 1em; background: var(--accent); margin-left: 3px; vertical-align: -.12em; animation: cligne 1s steps(1) infinite; }
.editeur .lignes { margin-top: 16px; display: grid; gap: 10px; }
.editeur .lignes i { height: 9px; border-radius: 5px; background: #efe8de; }
@keyframes cligne { 50% { opacity: 0; } }
.souvenir { position: absolute; right: 0; top: 40%; width: 58%; background: #fffaf2; border-radius: 18px; padding: 20px 22px; z-index: 3;
            box-shadow: 0 40px 80px -24px rgba(180,83,47,.45), 0 0 0 1.5px color-mix(in oklab, var(--accent) 40%, transparent); }
.souvenir .t { font: 700 .82rem "Roboto Flex", sans-serif; color: var(--accent); display: flex; align-items: center; gap: 8px; }
.souvenir blockquote { margin-top: 12px; font-family: var(--serif); font-size: 1.15rem; line-height: 1.35; background: linear-gradient(transparent 58%, #fbe3b0 58%); display: inline; }
.souvenir small { display: block; margin-top: 14px; font: 500 .8rem "Roboto Flex", sans-serif; color: var(--muted); }
.lien { position: absolute; z-index: 1; left: 30%; top: 30%; width: 45%; height: 30%; pointer-events: none; }
.lien path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 7; }
.photo { position: absolute; width: 34%; right: 4%; top: 0; border-radius: 14px; rotate: 6deg; box-shadow: 0 30px 60px -24px rgba(90,50,20,.45); }

.gros-texte { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.25; max-width: 30ch; letter-spacing: -.01em; }
.gros-texte span { color: var(--muted); }
.capture { border-radius: 16px; overflow: hidden; box-shadow: 0 50px 100px -40px rgba(90,50,20,.5), 0 0 0 1px var(--line); }
.exemples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ex { border-radius: var(--rayon); padding: 26px; background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line); }
.ex .ecrit { font: 600 .8rem "Roboto Flex", sans-serif; color: var(--muted); }
.ex .ecrit b { display: block; margin-top: 6px; font-family: var(--serif); font-size: 1.25rem; color: var(--ink); font-weight: 600; }
.ex .rappel { margin-top: 18px; padding: 16px; border-radius: 14px; background: #fff4e8; box-shadow: inset 3px 0 0 var(--accent); }
.ex .rappel span { font: 700 .76rem "Roboto Flex", sans-serif; color: var(--accent); }
.ex .rappel q { display: block; margin-top: 6px; font-family: var(--serif); font-size: 1.05rem; }
.ex .rappel small { display: block; margin-top: 8px; color: var(--muted); font-size: .8rem; }
@media (max-width: 960px) { .exemples { grid-template-columns: 1fr; } .editeur { width: 86%; } .souvenir { width: 72%; } }