style(mobile): widen reading in landscape on small screens (css-only)

src/styles/global.css

@@ -27,17 +27,40 @@
   --rf-h3-size: 1.25rem;
   --rf-h3-lh: 1.25;
   --rf-h3-fw: 650;
+
+  /* ===== Polish (non destructif) ===== */
+  --ease-out: cubic-bezier(.2,.9,.2,1);
+  --ease-soft: cubic-bezier(.2,.8,.2,1);
+
+  --focus-ring: 2px solid rgba(140,140,255,0.60);
+  --focus-ring-offset: 2px;
 }
 
 body {
   margin: 0;
   font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
   line-height: 1.6;
+
+  /* polish */
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 a { text-decoration: none; }
 a:hover { text-decoration: underline; }
 
+/* ===== Focus (accessibilité + feel premium) ===== */
+:focus { outline: none; }
+:focus-visible{
+  outline: var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
+}
+
+@media (prefers-reduced-motion: reduce){
+  *{ transition: none !important; animation: none !important; }
+}
+
 /* Header sticky */
 header{
   position: sticky;
@@ -61,15 +84,26 @@ main { padding: 0; }
 .reading {
   max-width: 78ch;
   margin: 0 auto;
+
+  /* polish */
+  font-size: 16px;
+  letter-spacing: 0.005em;
 }
 
 .reading h1 {
   line-height: 1.2;
   margin: 0 0 10px;
+
+  /* polish */
+  letter-spacing: -0.01em;
 }
 
 .reading p { margin: 0 0 12px; }
 
+/* petits ajustements de respiration */
+.reading h2 { margin-top: 18px; }
+.reading h3 { margin-top: 14px; }
+
 .edition-bar {
   display: flex;
   flex-wrap: wrap;
@@ -99,6 +133,11 @@ main { padding: 0; }
   border: 1px solid rgba(127,127,127,0.55);
   border-radius: 999px;
   padding: 5px 12px;
+  transition: transform 120ms var(--ease-out), background 120ms var(--ease-out);
+}
+.resume-btn:hover{
+  background: rgba(127,127,127,0.10);
+  transform: translateY(-1px);
 }
 
 /* Jump by paragraph id */
@@ -114,6 +153,11 @@ main { padding: 0; }
   border-radius: 999px;
   font-size: 13px;
   width: 320px;
+  transition: border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
+}
+.jump-input:focus-visible{
+  border-color: rgba(140,140,255,0.65);
+  box-shadow: 0 0 0 3px rgba(140,140,255,0.18);
 }
 .jump-input.is-error{
   outline: 2px solid rgba(127,127,127,0.55);
@@ -126,6 +170,11 @@ main { padding: 0; }
   border-radius: 999px;
   cursor: pointer;
   font-size: 13px;
+  transition: transform 120ms var(--ease-out), background 120ms var(--ease-out);
+}
+.jump-btn:hover{
+  background: rgba(127,127,127,0.10);
+  transform: translateY(-1px);
 }
 
 /* Toggle niveaux (legacy, non bloquant) */
@@ -137,6 +186,11 @@ main { padding: 0; }
   border-radius: 999px;
   cursor: pointer;
   font-size: 13px;
+  transition: transform 120ms var(--ease-out), background 120ms var(--ease-out), border-color 120ms var(--ease-out);
+}
+.lvl-btn:hover{
+  background: rgba(127,127,127,0.10);
+  transform: translateY(-1px);
 }
 .lvl-btn[aria-pressed="true"] {
   border-color: rgba(127,127,127,0.9);
@@ -211,6 +265,13 @@ body[data-reading-level="4"] .level-3 { display: none; }
   border-radius: 999px;
   padding: 2px 8px;
   background: transparent;
+  transition: transform 120ms var(--ease-out), background 120ms var(--ease-out);
+}
+.para-anchor:hover,
+.para-propose:hover,
+.para-cite:hover{
+  background: rgba(127,127,127,0.10);
+  transform: translateY(-1px);
 }
 .para-cite{ cursor: pointer; }
 
@@ -221,8 +282,13 @@ body[data-reading-level="4"] .level-3 { display: none; }
   padding: 4px 12px;
   background: transparent;
   cursor: pointer;
+  transition: transform 120ms var(--ease-out), background 120ms var(--ease-out);
+}
+.para-bookmark:hover{
+  background: rgba(127,127,127,0.10);
+  transform: translateY(-1px);
+  text-decoration: underline;
 }
-.para-bookmark:hover{ text-decoration: underline; }
 
 /* Highlight (jump / resume / arrivée hash) */
 .para-highlight{
@@ -420,3 +486,57 @@ html{ scroll-behavior: smooth; }
   padding: 0;
   background: transparent;
 }
+
+/* ==========================
+   Landscape boost (mobile/tablet)
+   CSS-only, non destructif
+   - iOS + Android
+   - élargit la lecture en paysage sur petits écrans
+   - ne touche pas au desktop
+   ========================== */
+
+/* 1) Quand on est en paysage sur “petits” devices,
+      on évite une colonne unique trop “étroite” et on retire le max-width 78ch. */
+      @media (orientation: landscape) and (max-width: 1024px){
+        /* La grille (EditionLayout) utilise .page-shell ; on la rend plus “fluide” */
+        .page-shell{
+          max-width: calc(100vw - 16px) !important; /* respire mais exploite la largeur */
+        }
+      
+        /* La lecture ne doit pas rester “bridée” à 78ch en paysage */
+        .reading{
+          max-width: none !important;
+          width: 100% !important;
+        }
+      }
+      
+      /* 2) Cas extrême : petits téléphones en paysage (hauteur faible).
+            On réduit légèrement les paddings pour gagner de la place utile. */
+      @media (orientation: landscape) and (max-width: 820px) and (max-height: 520px){
+        header{
+          padding-top: 10px;
+          padding-bottom: 10px;
+        }
+      
+        /* allège un peu la barre d’édition (sans la casser) */
+        .edition-bar{
+          margin-top: 8px;
+          padding-top: 8px;
+          gap: 8px 12px;
+        }
+      
+        /* champ jump un peu moins large, pour éviter de “manger” la nav */
+        .jump-input{
+          width: min(260px, 48vw);
+        }
+      }
+      
+      /* 3) iOS Safari : le viewport peut être “bizarre” en paysage (barres).
+            Cette règle aide à éviter des layouts coincés quand l’UI Safari bouge. */
+      @supports (height: 100dvh){
+        @media (orientation: landscape) and (max-width: 1024px){
+          .page-shell{
+            min-height: 100dvh;
+          }
+        }
+      }