/* ═══════════════════════════════════════════════════════════════════════
STYLE-RESPONSIVE.CSS — Mise à l'échelle proportionnelle du design 1920×1080
═══════════════════════════════════════════════════════════════════════
▸ INSTALLATION (2 étapes) :
1. Enregistrer ce fichier sous style-responsive.css à la racine du
projet (à côté de style-base.css).
2. Ajouter la ligne suivante dans le de index.html, profil.html,
cgu.html et 404.html — EN DERNIER, après tous les autres :
▸ PRINCIPE :
Le site a été conçu avec des tailles en pixels calibrées pour 1920×1080.
Sur un écran 1366, 1440, 1536 ou 1600 px de large, ces pixels ne
rentrent plus : les proportions cassent, les titres passent sur
plusieurs lignes, les cartes n'ont plus la même hauteur, etc.
Plutôt que de re-régler chaque composant à chaque résolution, ce
fichier applique un "zoom" CSS global : l'intégralité de la page est
rendue EXACTEMENT comme en 1920×1080 puis mise à l'échelle pour tenir
dans la largeur réelle de l'écran. Résultat : mêmes proportions, mêmes
retours à la ligne, même rendu qu'en 1920, quelle que soit la
résolution du moniteur.
• La propriété `zoom` est un vrai zoom de mise en page (pas un
transform) : le texte reste net, le scroll et les éléments
sticky/fixed fonctionnent normalement.
• Les media queries du site (bascule mobile ≤900px, etc.) ne sont PAS
affectées : elles restent basées sur la largeur réelle du viewport.
• Navigateurs : Chrome, Edge, Safari, Opera, et Firefox ≥ 126.
Sur un navigateur trop ancien, le bloc @supports est ignoré et le
site s'affiche comme avant (aucune régression).
▸ Le rendu en 1920×1080 exactement n'est JAMAIS modifié (zoom: 1).
═══════════════════════════════════════════════════════════════════════ */
@supports (zoom: 1) {
/* ───────────────────────────────────────────────────────────────────
1. ZOOM PROPORTIONNEL — écrans PC entre 1101px et 1919px
zoom ≈ largeur_écran / 1920, par paliers de 64px.
Couvre : 1152, 1280, 1366, 1440, 1536, 1600, 1680, 1760, 1856…
─────────────────────────────────────────────────────────────────── */
@media (min-width: 1856px) and (max-width: 1919.98px) { html { zoom: 0.983; --rz: 0.983; } }
@media (min-width: 1792px) and (max-width: 1855.98px) { html { zoom: 0.950; --rz: 0.950; } }
@media (min-width: 1728px) and (max-width: 1791.98px) { html { zoom: 0.917; --rz: 0.917; } }
@media (min-width: 1664px) and (max-width: 1727.98px) { html { zoom: 0.883; --rz: 0.883; } }
@media (min-width: 1600px) and (max-width: 1663.98px) { html { zoom: 0.850; --rz: 0.850; } }
@media (min-width: 1536px) and (max-width: 1599.98px) { html { zoom: 0.817; --rz: 0.817; } }
@media (min-width: 1472px) and (max-width: 1535.98px) { html { zoom: 0.783; --rz: 0.783; } }
@media (min-width: 1408px) and (max-width: 1471.98px) { html { zoom: 0.750; --rz: 0.750; } }
@media (min-width: 1344px) and (max-width: 1407.98px) { html { zoom: 0.717; --rz: 0.717; } }
@media (min-width: 1280px) and (max-width: 1343.98px) { html { zoom: 0.683; --rz: 0.683; } }
@media (min-width: 1216px) and (max-width: 1279.98px) { html { zoom: 0.650; --rz: 0.650; } }
@media (min-width: 1152px) and (max-width: 1215.98px) { html { zoom: 0.617; --rz: 0.617; } }
@media (min-width: 1101px) and (max-width: 1151.98px) { html { zoom: 0.587; --rz: 0.587; } }
/* ───────────────────────────────────────────────────────────────────
2. ANNULATION de l'ancien correctif "compact" de style-pages.css
(@media 1101–1919.98px).
Ce correctif réduisait manuellement les cartes Recommandations
et "À Lire". Maintenant que le zoom global gère la mise à
l'échelle, le laisser actif ferait un DOUBLE rétrécissement
(cartes trop petites + proportions différentes du 1920).
On restaure donc ici les valeurs d'origine du design 1920.
Ce fichier étant chargé en dernier, il gagne la cascade.
─────────────────────────────────────────────────────────────────── */
@media (min-width: 1101px) and (max-width: 1919.98px) {
/* Recommandations — valeurs de base restaurées */
.rec-std-card { padding: 14px 12px; min-height: 280px; }
.rec-std-cover { width: 100px; height: 144px; }
.rec-std-body { margin-top: 10px; }
.rec-std-title { font-size: .88rem; min-height: 2.6em; } /* min-height conservé :
garde des cartes de
hauteur uniforme */
.rec-std-vol { font-size: .78rem; }
.rec-std-type { font-size: .72rem; }
.rec-actions { gap: 6px; margin-top: 10px; }
.rec-btn--read { padding: 9px 14px; font-size: inherit; }
.rec-btn--prio { width: 38px; height: 38px; }
/* À Lire — valeurs de base restaurées */
.tr-header { gap: 12px; padding: 14px 14px 10px; }
.tr-cover { width: 56px; height: 82px; }
.tr-title { font-size: .95rem; }
.tr-prio-btn { width: 34px; height: 34px; font-size: inherit; }
.tr-volumes { gap: 8px; padding: 10px 14px 14px; }
.tr-read-btn { font-size: .68rem; padding: 5px 4px; }
.tr-read-btn--primary { font-size: .76rem; padding: 6px 5px; }
}
/* ───────────────────────────────────────────────────────────────────
3. (OPTIONNEL) GRANDS ÉCRANS — 2K/QHD et plus
Sur un 2560×1440 (ou un 4K avec mise à l'échelle Windows basse),
le rendu 1920 paraît petit et "perdu" au centre. Ce bloc agrandit
légèrement l'interface pour retrouver les proportions du 1920.
Le zoom est volontairement plafonné à 1.30 pour ne pas gêner les
écrans ultrawide (3440px), qui servent justement à afficher plus.
→ Si vous préférez laisser les grands écrans afficher plus de
contenu, supprimez simplement ce bloc.
─────────────────────────────────────────────────────────────────── */
@media (min-width: 2200px) and (max-width: 2399.98px) { html { zoom: 1.20; --rz: 1.20; } }
@media (min-width: 2400px) { html { zoom: 1.30; --rz: 1.30; } }
/* ───────────────────────────────────────────────────────────────────
5. CORRECTION DES HAUTEURS 100vh SOUS ZOOM
Les unités vh ne sont PAS remises à l'échelle par `zoom` : un
élément en min-height:100vh rendu à zoom 0.85 n'occupe que 85%
de l'écran → le footer "Made in Lord Isekai" remontait au milieu
de la page sur les pages courtes (Souhaits, etc.).
On compense en divisant par le facteur de zoom courant (--rz),
défini dans chaque palier ci-dessus.
!important nécessaire : Tailwind CDN injecte ses styles après
ce fichier dans le .
─────────────────────────────────────────────────────────────────── */
.min-h-screen {
min-height: calc(100vh / var(--rz, 1)) !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
4. GARDE-FOUS TEXTE — actifs partout, y compris sans support de zoom.
Évite qu'un titre très long (sans espaces) déborde de sa carte et
décale la mise en page ("bugs de texte" signalés par les
utilisateurs).
═══════════════════════════════════════════════════════════════════════ */
.rec-std-title,
.rec-std-vol,
.tr-title,
.series-card h3,
.modal-content h2,
.modal-content h3 {
overflow-wrap: anywhere;
word-break: normal;
}
/* Les enfants directs d'un conteneur flex refusent par défaut de rétrécir
sous leur contenu (min-width:auto), ce qui provoque des débordements
quand un texte est long. On l'autorise pour les zones de texte connues. */
.tr-title-row > *,
.rec-std-body > * {
min-width: 0;
}
/* Liste de souhaits : le libellé "Ajouter à la collection" est trop long
pour tenir à côté de "Retirer" dans une carte de ~200px → le texte se
cassait sur 3 lignes. On force ce bouton sur sa propre ligne, pleine
largeur, et "Retirer" passe en dessous. */
.wish-btn--add {
flex: 1 1 100%;
white-space: nowrap;
}
.wish-btn--remove {
flex: 1 1 auto;
}