/* ===== Vitrine : extraits à lire ===== */
        .extraits { position: relative; margin: 40px clamp(0px, 3vw, 44px) 60px; padding: 150px 24px 150px; scroll-margin-top: 0;
            color: #2A2830; border-radius: 50% 50% 48px 48px / 90px 90px 48px 48px;
            background:
              radial-gradient(ellipse 70% 40% at 50% 10%, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%),
              radial-gradient(ellipse 60% 35% at 15% 85%, rgba(226,114,91,0.07), rgba(226,114,91,0) 70%),
              linear-gradient(180deg, #FFFCF4, #FBF4E3);
            box-shadow: 0 40px 100px -50px rgba(22,33,62,0.45), 0 0 0 1px rgba(22,33,62,0.06); }
        .extraits::after { content: ''; position: absolute; inset: 16px; border: 1px solid rgba(185,75,53,0.4); border-radius: 50% 50% 34px 34px / 76px 76px 34px 34px; pointer-events: none; }
        .extraits-in { max-width: 1040px; margin: 0 auto; }
        .extraits .ex-eyebrow { text-align: center; font-size: 0.82rem; letter-spacing: 0.28em; text-transform: uppercase; color: #A8563F; margin: 0 0 14px; }
        .extraits h2 { text-align: center; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.1; color: #16213E; margin: 0 0 16px; letter-spacing: 0.01em; }
        .extraits .ex-filet { width: 64px; height: 1px; background: linear-gradient(90deg, transparent, #B08D4A, transparent); margin: 22px auto; }
        .extraits .ex-sous { text-align: center; max-width: 520px; margin: 0 auto 90px; font-size: 1.15rem; line-height: 1.7; font-style: italic; color: #4F4D58; }
        .ex-sous .tactile { display: none; }
        @media (hover: none) { .ex-sous .souris { display: none; } .ex-sous .tactile { display: inline; } }

        .vit-liste { display: flex; flex-direction: column; gap: clamp(60px, 9vw, 110px); }
        .vit { position: relative; display: block; max-width: 780px; padding: 1.5rem 2.2rem; cursor: pointer; color: inherit; outline: none;
            transition: opacity .6s ease; -webkit-tap-highlight-color: transparent; }
        .vit:nth-child(2) { margin-left: auto; text-align: right; }
        .vit:nth-child(3) { margin-left: 8%; }
        /* zone grisée : un lavis doux, sans angles */
        .vit::before { content: ''; position: absolute; inset: -0.6rem -1.4rem; z-index: 0; border-radius: 5rem; filter: blur(14px);
            background: linear-gradient(105deg, rgba(104,96,86,0.20) 0%, rgba(104,96,86,0.10) 60%, rgba(104,96,86,0) 100%);
            transform: scaleX(0.82); transform-origin: left center; opacity: 0;
            transition: transform 1.1s cubic-bezier(.19,1,.22,1), opacity 1s ease, background .6s ease; }
        .vit:nth-child(2)::before { transform-origin: right center;
            background: linear-gradient(255deg, rgba(104,96,86,0.16) 0%, rgba(104,96,86,0.07) 60%, rgba(104,96,86,0) 100%); }
        .vit.seen::before { transform: scaleX(1); opacity: 1; }
        .vit > * { position: relative; z-index: 1; }
        .vit-src { display: block; font-size: 0.82rem; letter-spacing: 0.24em; text-transform: uppercase; color: #9A5A43; font-weight: 600; margin-bottom: 1.1rem; }
        .vit-text { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-style: italic; font-size: clamp(1.7rem, 3.9vw, 2.65rem); line-height: 1.38; color: #1F1E26;
            transform-origin: left center; transition: transform .8s cubic-bezier(.19,1,.22,1); }
        .vit:nth-child(2) .vit-text { transform-origin: right center; }
        /* surlignage au marqueur */
        .vit-text mark, .page mark { background-color: transparent; color: inherit; padding: 0 .12em; margin: 0 -.12em; border-radius: .35em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
            background-image: linear-gradient(100deg, rgba(226,114,91,0.34), rgba(214,170,92,0.42));
            background-repeat: no-repeat; background-position: 0 85%; background-size: 0% 62%;
            transition: background-size 1.4s cubic-bezier(.19,1,.22,1) .5s, background-image .5s; }
        .vit.seen .vit-text mark { background-size: 100% 62%; }
        .vit-cta { display: inline-flex; align-items: center; gap: .8rem; margin-top: 1.4rem; font-size: 0.86rem; letter-spacing: 0.22em; text-transform: uppercase; color: #B94B35; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; }
        .vit-cta i { display: block; width: 34px; height: 1px; background: currentColor; transition: width .6s cubic-bezier(.19,1,.22,1); }
        .vit:nth-child(2) .vit-cta { flex-direction: row-reverse; }
        @media (hover: none) { .vit-cta { opacity: 1; transform: none; } }
        .vit:focus-visible .vit-cta, .vit:hover .vit-cta { opacity: 1; transform: none; }
        .vit:hover .vit-cta i, .vit:focus-visible .vit-cta i { width: 64px; }
        @media (hover: hover) {
          .vit:hover .vit-text, .vit:focus-visible .vit-text { transform: scale(1.045); }
          .vit:hover::before, .vit:focus-visible::before { background-color: transparent; transform: scaleX(1.05) scaleY(1.1); opacity: 1;
              background-image: linear-gradient(105deg, rgba(104,96,86,0.27) 0%, rgba(104,96,86,0.12) 62%, rgba(104,96,86,0) 100%); }
          .vit:nth-child(2):hover::before { background-image: linear-gradient(255deg, rgba(104,96,86,0.27) 0%, rgba(104,96,86,0.12) 62%, rgba(104,96,86,0) 100%); }
          .vit:hover mark, .vit:focus-visible mark { background-image: linear-gradient(100deg, rgba(226,114,91,0.5), rgba(214,170,92,0.6)); }
          .vit-liste:hover .vit:not(:hover) { opacity: .38; }
        }
        .extraits .ex-note { text-align: center; margin: 100px auto 0; max-width: 560px; font-size: 1.05rem; line-height: 1.7; font-style: italic; color: #55535E; }
        .extraits .ex-note a { color: #B94B35; text-decoration: underline; text-underline-offset: 3px; }
        @media (max-width: 720px) {
          .extraits { padding: 110px 18px 110px; margin: 30px 8px 40px; border-radius: 50% / 46px; }
          .extraits::after { inset: 10px; border-radius: 50% / 38px; }
          .vit, .vit:nth-child(2), .vit:nth-child(3) { margin-left: 0; text-align: left; padding: 1.2rem 1.4rem; }
          .vit:nth-child(2)::before { transform-origin: left center; background: linear-gradient(105deg, rgba(104,96,86,0.16) 0%, rgba(104,96,86,0.07) 60%, rgba(104,96,86,0) 100%); }
          .vit:nth-child(2) .vit-text { transform-origin: left center; }
          .vit:nth-child(2) .vit-cta { flex-direction: row; }
        }

        /* ===== Liseuse (plein écran) ===== */
        body.lecture-ouverte { overflow: hidden; }
        .reader { --fs: 22px; position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s;
            font-family: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif; }
        .reader.open { opacity: 1; visibility: visible; transition: opacity .6s ease; }
        .reader.t-papier { --bg: #F5EEDC; --ink: #25232B; --sub: #7B6A45; --acc: #B5573F; --veil: rgba(245,238,220,0); --line: rgba(37,35,43,0.14); }
        .reader.t-sepia  { --bg: #E9D9B6; --ink: #3A2E1D; --sub: #7A5E2E; --acc: #9C4A2F; --veil: rgba(233,217,182,0); --line: rgba(58,46,29,0.18); }
        .reader.t-nuit   { --bg: #0F1830; --ink: #E8D9B5; --sub: #C9A86A; --acc: #E2725B; --veil: rgba(15,24,48,0); --line: rgba(232,217,181,0.16); }
        .reader { background: var(--bg); color: var(--ink); transition: opacity .6s ease, background .5s ease, color .5s ease; }
        .reader-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px clamp(16px, 4vw, 40px); }
        .r-titre { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sub); line-height: 1.5; }
        .r-outils { display: flex; align-items: center; gap: 4px; }
        .r-outils button { appearance: none; border: 0; background: transparent; color: var(--ink); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.25rem; min-width: 44px; height: 44px; border-radius: 22px; cursor: pointer; transition: background .3s; }
        .r-outils button:hover, .r-outils button:focus-visible { background: var(--line); outline: none; }
        .r-outils .sep { width: 1px; height: 22px; background: var(--line); margin: 0 6px; }
        .r-outils .petit { font-size: 0.95rem; } .r-outils .grand { font-size: 1.5rem; }
        .reader-scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; padding: 6vh clamp(20px, 6vw, 60px) 18vh; }
        .page { font-size: var(--fs); line-height: 1.75; max-width: 31em; margin: 0 auto; transition: font-size .35s cubic-bezier(.19,1,.22,1); }
        .page .p-livre { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 0.5em; letter-spacing: 0.3em; text-transform: uppercase; color: var(--sub); text-align: center; margin-bottom: 1.6em; }
        .page h3 { font-weight: 500; font-style: italic; font-size: 2.1em; line-height: 1.15; text-align: center; margin: 0 0 .5em; }
        .page .orn { text-align: center; color: var(--sub); letter-spacing: .6em; margin: 1.6em 0 2em; font-size: 1.1em; }
        .page .orn.vide { margin: 0 0 2.4em; }
        .page p { margin: 0 0 1.05em; font-weight: 500; text-wrap: pretty; hyphens: auto; }
        .page p.dial { padding-left: .1em; }
        .page .w { display: inline-block; opacity: 0; transform: translateY(.3em); filter: blur(3px);
            transition: opacity .7s ease, transform .7s ease, filter .7s ease; transition-delay: var(--d, 0ms); }
        .page p.on .w { opacity: 1; transform: none; filter: none; }
        .page p.on mark { background-size: 100% 62%; transition-delay: 1s; }
        .page mark { background-image: linear-gradient(100deg, rgba(226,114,91,0.38), rgba(214,170,92,0.5)); }
        .reader.t-nuit .page mark { background-image: linear-gradient(100deg, rgba(226,114,91,0.35), rgba(201,168,106,0.32)); }
        .page .fin { text-align: center; margin: 3.2em 0 0; padding-top: 2em; border-top: 1px solid var(--line); font-size: .85em; }
        .page .fin p { font-style: italic; font-weight: 500; margin-bottom: 1.1em; }
        .page .fin a { display: inline-block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: .8rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--acc); border-bottom: 1px solid var(--acc); padding-bottom: 4px; }
        .reader-pied { flex: 0 0 auto; position: relative; display: flex; justify-content: space-between; align-items: center; padding: 8px clamp(12px, 4vw, 40px) 14px; font-family: 'Cormorant Garamond', Georgia, serif; }
        .reader-pied::before { content: ''; position: absolute; left: 0; right: 0; top: -60px; height: 60px; background: linear-gradient(180deg, var(--veil), var(--bg)); pointer-events: none; }
        .reader-pied button { appearance: none; border: 0; background: transparent; color: var(--ink); font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: .86rem; letter-spacing: .18em; text-transform: uppercase; padding: 12px 10px; cursor: pointer; opacity: .75; min-height: 44px; transition: opacity .3s; }
        .reader-pied button:hover, .reader-pied button:focus-visible { opacity: 1; outline: none; }
        .r-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--acc); transition: width .2s linear; }
        @media (max-width: 600px) { .reader { --fs: 19px; } .r-outils button { min-width: 40px; } .reader-pied button { letter-spacing: .12em; font-size: .62rem; } }
        @media (prefers-reduced-motion: reduce) {
          .page .w { opacity: 1; transform: none; filter: none; transition: none; }
          .vit-text, .vit::before, .reader, .reader-scroll { transition: none; scroll-behavior: auto; }
          .vit::before { opacity: 1; transform: none; } .vit-text mark { background-size: 100% 62%; }
        }

/* ===== Typographie : moins numérique ===== */
html { -webkit-text-size-adjust: 100%; }
.hero-hl { background-color: transparent; color: inherit; padding: 0 .14em; margin: 0 -.14em; border-radius: .35em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
    background-image: linear-gradient(100deg, rgba(226,114,91,0.34), rgba(214,170,92,0.45)); background-repeat: no-repeat; background-position: 0 90%; background-size: 100% 60%; }

/* ===== Accueil épuré ===== */
body.accueil .topbar { padding-top: 34px; }
body.accueil .hero { min-height: 72vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 24px 90px; text-align: center; }
body.accueil .hero .kicker { font-size: 1.45rem; font-style: italic; margin-bottom: 22px; }
body.accueil .hero h1.typewriter-zone { font-size: clamp(2.3rem, 6.4vw, 4rem); line-height: 1.22; min-height: 2.6em; font-weight: 500; }
body.accueil .hero-cta { margin-top: 18px; }
.hero-lire { display: inline-block; margin-top: 26px; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 1.3rem; color: #B94B35; cursor: pointer;
    border-bottom: 1px solid rgba(185,75,53,0.45); padding-bottom: 3px; transition: letter-spacing .5s ease, border-color .4s; }
.hero-lire:hover { letter-spacing: .02em; border-color: #B94B35; }

/* ===== Bandeau « lire quelques pages » (pages intérieures) ===== */
.lire-bandeau { text-align: center; margin: 34px auto 44px; padding: 0 20px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.2rem, 2.6vw, 1.5rem); font-style: italic; color: var(--bleu); line-height: 2.1; }
.lire-bandeau a { display: inline-block; margin: 0 .3em; padding: .02em .32em .06em; line-height: 1.25; font-style: normal; font-weight: 600; color: var(--bleu); cursor: pointer; border-radius: .35em;
    background-image: linear-gradient(100deg, rgba(226,114,91,0.34), rgba(214,170,92,0.45)); background-repeat: no-repeat; background-position: 0 92%; background-size: 100% 62%;
    transition: transform .5s cubic-bezier(.19,1,.22,1), background-size .5s ease; }
.lire-bandeau a:hover, .lire-bandeau a:focus-visible { transform: scale(1.12); background-size: 100% 100%; outline: none; }

/* ===== La roulotte : bouton de menu ===== */
.rl-btn { position: fixed; right: 20px; bottom: 20px; z-index: 2400; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rl-btn .rl-etiquette { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 1.15rem; color: var(--bleu); background: rgba(255,252,244,0.92); padding: 6px 14px; border-radius: 30px; box-shadow: 0 6px 20px -10px rgba(22,33,62,0.45);
    opacity: 0; transform: translateX(8px); transition: opacity .4s ease, transform .5s cubic-bezier(.19,1,.22,1); pointer-events: none; }
.rl-btn:hover .rl-etiquette, .rl-btn:focus-visible .rl-etiquette { opacity: 1; transform: none; }
.rl-icone { width: 78px; height: 66px; border-radius: 40px; background: rgba(255,252,244,0.96); box-shadow: 0 10px 30px -10px rgba(22,33,62,0.5), 0 0 0 1px rgba(22,33,62,0.1);
    display: flex; align-items: center; justify-content: center; transition: transform .5s cubic-bezier(.19,1,.22,1), box-shadow .4s; }
.rl-btn:hover .rl-icone, .rl-btn:focus-visible .rl-icone { transform: translateY(-3px) scale(1.06); box-shadow: 0 16px 36px -12px rgba(22,33,62,0.55), 0 0 0 1px rgba(185,75,53,0.5); }
.rl-icone svg { width: 58px; height: 52px; overflow: visible; }
.rl-btn:focus-visible { outline: none; }
.rl-roues { transform-box: fill-box; transform-origin: center; transition: transform 1.2s cubic-bezier(.19,1,.22,1); }
.rl-btn:hover .rl-roues { transform: rotate(180deg); }
.rl-btn.arrive { animation: rl-arrive 1.6s cubic-bezier(.19,1,.22,1) both; }
.rl-btn.arrive .rl-roues { animation: rl-tourne 1.6s cubic-bezier(.19,1,.22,1) both; }
@keyframes rl-arrive { from { transform: translateX(140px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rl-tourne { from { transform: rotate(-540deg); } to { transform: none; } }
.rl-fumee { animation: rl-fumee 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
@keyframes rl-fumee { 0%,100% { opacity: .25; transform: translateY(0) scaleY(.8); } 50% { opacity: .75; transform: translateY(-2px) scaleY(1); } }

.rl-fond { position: fixed; inset: 0; z-index: 2500; background: rgba(22,33,62,0.28); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.rl-fond.ouvert { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.rl-panneau { position: fixed; right: 20px; bottom: 20px; z-index: 2600; width: min(430px, calc(100vw - 24px)); max-height: calc(100vh - 40px); overflow-y: auto;
    background: #FBF6EA; color: var(--bleu); border-radius: 34px 34px 34px 34px; padding: 34px 34px 26px; box-shadow: 0 40px 100px -30px rgba(22,33,62,0.65), 0 0 0 1px rgba(22,33,62,0.08);
    font-family: 'Cormorant Garamond', Georgia, serif; transform: translateY(26px) scale(.97); transform-origin: bottom right; opacity: 0; visibility: hidden;
    transition: transform .6s cubic-bezier(.19,1,.22,1), opacity .4s ease, visibility 0s linear .6s; }
.rl-panneau.ouvert { transform: none; opacity: 1; visibility: visible; transition: transform .6s cubic-bezier(.19,1,.22,1), opacity .4s ease; }
.rl-panneau .rl-titre { font-style: italic; font-size: 1.5rem; margin: 0 0 18px; color: var(--bleu); padding-right: 40px; line-height: 1.25; }
.rl-fermer { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--bleu); font-size: 1.3rem; cursor: pointer; transition: background .3s; }
.rl-fermer:hover, .rl-fermer:focus-visible { background: rgba(22,33,62,0.08); outline: none; }
.rl-liste { list-style: none; margin: 0; padding: 0; }
.rl-liste li { opacity: 0; transform: translateY(8px); }
.rl-panneau.ouvert .rl-liste li { opacity: 1; transform: none; transition: opacity .5s ease, transform .6s cubic-bezier(.19,1,.22,1); transition-delay: calc(var(--i) * 28ms + 150ms); }
.rl-liste a { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 4px; font-size: 1.5rem; font-weight: 500; color: var(--bleu); border-bottom: 1px solid rgba(22,33,62,0.1); transition: padding .4s cubic-bezier(.19,1,.22,1), color .3s; }
.rl-liste a:hover, .rl-liste a:focus-visible { padding-left: 14px; color: #B94B35; outline: none; }
.rl-liste a[aria-current="page"] { color: #B94B35; font-style: italic; }
.rl-liste a small { font-size: .95rem; font-style: italic; color: rgba(22,33,62,0.55); }
.rl-liste li.rl-mis a { font-style: italic; }
.rl-cta { display: block; text-align: center; margin: 22px 0 16px; padding: 14px 24px; border-radius: 50px; background: #E2725B; color: #fff; font-size: 1.2rem; font-weight: 600; letter-spacing: .02em; transition: background .3s, transform .4s cubic-bezier(.19,1,.22,1); }
.rl-cta:hover, .rl-cta:focus-visible { background: #16213E; transform: translateY(-2px); outline: none; }
.rl-reseaux { text-align: center; font-size: 1rem; font-style: italic; color: rgba(22,33,62,0.65); }
.rl-reseaux a { color: inherit; margin: 0 6px; border-bottom: 1px solid rgba(22,33,62,0.25); }
body.rl-ouvert { overflow: hidden; }
@media (max-width: 600px) {
  .rl-btn { right: 12px; bottom: 12px; }
  .rl-icone { width: 68px; height: 58px; } .rl-icone svg { width: 50px; height: 46px; }
  .rl-panneau { right: 8px; left: 8px; width: auto; bottom: 8px; border-radius: 28px; padding: 28px 24px 22px; }
  .rl-liste a { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) { .rl-btn.arrive, .rl-btn.arrive .rl-roues, .rl-fumee { animation: none; } .rl-liste li { opacity: 1; transform: none; } }

/* ===== Ajustements : curseur de la question, menu en deux colonnes, quiz ===== */
body.accueil .hero .cursor { display: none; }
body.accueil #typewriter::after { content: ''; display: inline-block; width: 2px; height: .9em; margin-left: 6px; background: #B94B35; vertical-align: -0.08em; animation: blink 1.1s infinite; }
body.accueil #typewriter { text-wrap: balance; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.quiz-optionnel .vit-text, #interactive-part .q-text { font-size: clamp(1.45rem, 3.2vw, 1.9rem) !important; line-height: 1.45 !important; max-width: 640px !important; margin-left: auto !important; margin-right: auto !important; }
@media (min-width: 700px) {
  .rl-panneau { width: min(620px, calc(100vw - 40px)); }
  .rl-liste { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; }
  .rl-liste a { font-size: 1.35rem; padding: 8px 4px; }
}
@media (max-width: 699px) {
  .rl-panneau .rl-titre { font-size: 1.35rem; margin-bottom: 10px; }
  .rl-liste a { font-size: 1.2rem; padding: 6px 4px; }
  .rl-cta { margin: 14px 0 10px; padding: 11px 20px; font-size: 1.1rem; }
}