/* ============================================================
   global.css — Styles partagés MangaHub
   Variables, reset, header, footer, composants réutilisables
   ============================================================ */

/* Typographie §13 — 3 rôles, aucun par défaut générique :
   Display = grotesque condensée anguleuse ; Lecture = serif à faible contraste
   pensée écran ; Utilitaire = sans-serif neutre à chasse resserrée.

   Audit PERF-07 : cette ligne était un @import vers fonts.googleapis.com.
   Trois défauts cumulés — un appel à Google sur CHAQUE page alors que le projet
   annonce « local d'abord » et pose <meta referrer="no-referrer"> ; une
   typographie perdue hors-ligne (le service worker précache global.css, mais
   l'@import allait chercher la feuille chez Google à l'exécution) ; et des
   requêtes SÉRIALISÉES sur le chemin critique (global.css → css2 → woff2).
   Les polices sont désormais dans assets/font/ et déclarées dans fonts.css,
   importé ici — un @import local ne sort pas sur le réseau.
   Régénérer avec : npm run fetch-fonts */
@import url('./fonts.css');

/* ── Variables — Refonte §13 (édition « Washi », claire, comme référence) ──── */
:root {
  /* Palette nommée §13 */
  --washi:       #eeece6;   /* fond de référence (édition claire) */
  --sumi:        #111113;   /* fond de la seconde édition (sombre) */
  --kakishibu:   #c1531b;   /* code couleur MANGA */
  --ai:          #3d5170;   /* code couleur ROMAN */
  --hanko:       #a83232;   /* signal fort (non-lu, action destructive, nouveau chapitre) */

  /* Surfaces — édition claire (Washi) */
  --bg:          #eeece6;
  --bg2:         #e7e4da;
  --bg3:         #ddd9cd;
  --bg4:         #d1ccbe;
  --border:      rgba(28,27,25,0.13);
  --border2:     rgba(28,27,25,0.22);
  --text:        #1c1b19;   /* Encre sur Washi */
  --text2:       #4c4940;
  /* Audit A11Y-02 : #6d685b sur --bg2 donnait 4.37:1 — juste sous le seuil AA
     de 4.5:1, et c'était la cause la plus répandue (34 occurrences : années des
     cartes, sous-titres, pied de page). Assombri jusqu'à passer. */
  --text3:       #5b5649;
  --green:       #3f7d4e;
  --blue:        #3d5170;
  --red:         #a83232;
  --amber:       #b5761b;

  /* Audit A11Y-02 — variantes pour TEXTE de petite taille.
     --accent (#c1531b) et --green sont calibrés pour des aplats et des bordures.
     Posés en texte de 10-13px sur fond clair, ils tombaient entre 3.29:1 et
     3.93:1. Ces variantes ne servent QUE au texte ; les aplats gardent les
     couleurs de marque. */
  --accent-text: #9d3f11;
  --green-text:  #2c6339;
  --blue-text:   #2c4360;
  --amber-text:  #7a4f0c;
  --red-text:    #8f2626;
  --badge-grey:  #4f545c;

  /* Accent FONCTIONNEL, jamais un seul accent de marque dominant (§13.2) :
     défaut = Kakishibu (manga) ; un contexte roman le bascule sur Ai. Tout le
     legacy `var(--orange)` est aliasé sur --accent → pas de refonte composant
     par composant, et aucun glow (§13.2). */
  --accent:      var(--kakishibu);
  --orange:      var(--accent);
  --orange2:     var(--accent);
  --orange-glow: transparent;

  --radius:      12px;
  --radius2:     8px;
  --radius3:     18px;   /* pills / grands blocs */
  --header-h:    58px;
  --font-head:   'Archivo Narrow', system-ui, sans-serif;   /* Display */
  --font-body:   'IBM Plex Sans', system-ui, sans-serif;    /* Utilitaire */
  --font-read:   'Bitter', Georgia, serif;                  /* Lecture longue */
  --transition:  0.16s ease;

  /* ── Système de mouvement (courbes soignées, jamais linéaire) ── */
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);   /* décélération élégante */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ── Élévation « papier » : profondeur douce teintée d'encre, aucun glow ── */
  --shadow-1: 0 1px 2px rgba(28,27,25,.05), 0 1px 3px rgba(28,27,25,.05);
  --shadow-2: 0 4px 14px rgba(28,27,25,.08), 0 2px 6px rgba(28,27,25,.05);
  --shadow-3: 0 16px 40px rgba(28,27,25,.12), 0 6px 16px rgba(28,27,25,.07);
  /* Anneau de focus accessible et élégant */
  --ring: 0 0 0 3px rgba(193, 83, 27, .28);

  /* ── Liquid glass — valeurs de REPLI, opaques ────────────────
     Ces trois-là sont écrites SANS `color-mix`, et ce n'est pas un
     appauvrissement : c'est ce que verront les navigateurs qui ne savent pas
     la lire — au premier rang desquels le WebView d'Android 8 (Chrome 61),
     cible de l'APK. `color-mix` est du Chrome 111.

     Le piège mérite d'être expliqué, parce qu'il ne se contourne pas comme les
     autres. Doubler la déclaration ne marche PAS à travers une variable :
     `background: var(--glass-bg)` est une syntaxe VALIDE, elle est donc
     acceptée puis devient invalide au moment du CALCUL — et une valeur
     invalide à ce stade ne retombe pas sur la déclaration précédente, elle
     prend la valeur initiale. Pour un fond, c'est `transparent`.

     Mesuré : une valeur non comprise laisse `rgba(0, 0, 0, 0)`. Les 53
     surfaces en verre du projet n'auraient donc AUCUN fond sur Android 8 — du
     texte flottant au-dessus du contenu.

     D'où `@supports`, juste en dessous : compris depuis Chrome 28, il répond
     honnêtement non sur les anciens moteurs. Un seul endroit à corriger, et
     toutes les surfaces suivent. */
  --glass-bg:     var(--bg2);
  --glass-border: var(--border2);
  --glass-inner:  inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(0,0,0,.07);
  --glass-blur:   blur(24px) saturate(1.9);
}

/* Le vrai verre, là où le navigateur sait le rendre. */
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  :root {
    --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
    --glass-bg:     color-mix(in srgb, var(--bg2) 46%, transparent);
    --glass-border: color-mix(in srgb, #ffffff 30%, transparent);
  }
}

/* En édition sombre, les ombres repassent sur du noir profond. */
html[data-theme="dark"], html[data-theme="amoled"] {
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 6px 18px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
  --shadow-3: 0 20px 48px rgba(0,0,0,.6), 0 8px 20px rgba(0,0,0,.4);
}

/* Contenu ROMAN → l'accent bascule sur Ai (indigo). Via [data-content="novel"]
   (posé sur <body> des pages roman) ou .is-novel (sur une carte/section roman). */
[data-content="novel"], .is-novel { --accent: var(--ai); }

/* ── Seconde édition « Sumi » (sombre), déclinée à partir de la claire ────── */
html[data-theme="dark"] {
  --bg:          #111113;
  --bg2:         #17171b;
  --bg3:         #1e1e23;
  --bg4:         #26262c;
  --border:      rgba(233,231,224,0.09);
  --border2:     rgba(233,231,224,0.17);
  --text:        #e9e7e0;   /* Encre sur Sumi */
  --text2:       #b2afa5;
  /* Audit QUAL-05 : #8b877c ne tenait 4,5:1 que sur le fond le plus sombre —
     4,19 sur --bg4, où il sert justement de fond de pastille (versions,
     langues, compteurs). Mesuré par axe-core, pas à l'œil : c'est cette
     dépendance au fond qui rendait le défaut invisible en relecture.
     #9d9990 passe partout (5,30 sur --bg4, 5,84 sur --bg3). */
  --text3:       #9d9990;
  /* Sur fond sombre le contraste se gagne en éclaircissant (audit A11Y-02). */
  --accent-text: #f08a4b;
  --green-text:  #7ee2a0;
  --blue-text:   #93bdff;
  --amber-text:  #ffc766;
  --red-text:    #ff9d9d;
  --badge-grey:  #c3c8d0;
}
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }

/* ── AMOLED (noir pur, économie OLED) — variante de l'édition sombre ──────── */
html[data-theme="amoled"] {
  --bg:      #000000;
  --bg2:     #070708;
  --bg3:     #0e0e11;
  --bg4:     #17171b;
  --border:  rgba(233,231,224,0.07);
  --border2: rgba(233,231,224,0.13);
  --text:    #e9e7e0;
  --text2:   #b2afa5;
  --text3:   #8b877c;
  --accent-text: #f08a4b;
  --green-text:  #7ee2a0;
  --blue-text:   #93bdff;
  --amber-text:  #ffc766;
  --red-text:    #ff9d9d;
  --badge-grey:  #c3c8d0;
}
html[data-theme="amoled"] body { background: #000; }

/* Thème clair explicite = édition Washi (identique à :root). */
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c7c2b4; }

/* ── Thème à contraste renforcé (audit AMEL-83) ──────────────
   A11Y-02 avait ramené le thème clair au-dessus du seuil AA (4.5:1). AA reste
   un PLANCHER : il suffit pour lire confortablement, pas pour une basse vision,
   un écran en plein soleil ou une dalle mal calibrée. Ce thème vise AAA (7:1)
   sur tout le texte, et supprime les nuances qui reposent sur une difference
   de luminosite faible.

   Il ne se contente pas de « foncer le texte » : les bordures deviennent
   opaques et les surfaces se distinguent franchement, sinon les cartes se
   confondent avec le fond et la mise en page disparait — un contraste de
   texte parfait sur une structure invisible ne rend pas la page lisible. */
html[data-theme="contrast"] {
  --bg:          #ffffff;
  --bg2:         #f2f2f2;
  --bg3:         #e4e4e4;
  --bg4:         #d2d2d2;
  --border:      rgba(0,0,0,0.45);
  --border2:     rgba(0,0,0,0.65);
  --text:        #000000;   /* 21:1 sur --bg */
  --text2:       #1f1f1f;   /* 16.1:1 */
  --text3:       #3d3d3d;   /* 9.7:1 — le plus clair reste au-dessus de AAA */

  /* Couleurs fonctionnelles assombries jusqu'a AAA sur fond blanc. Les
     variantes `-text` ET les couleurs d'aplat sont alignees ici : sur ce
     theme, un aplat sert aussi de fond a du texte blanc. */
  --kakishibu:   #8a3a11;
  --ai:          #23324a;
  --hanko:       #8a1f1f;
  --accent-text: #7a3310;   /* 7.6:1 */
  --green-text:  #1b4a26;
  --blue-text:   #1c2c44;
  --amber-text:  #5c3a06;
  --red-text:    #7a1c1c;
  --green:       #1b4a26;
  --blue:        #1c2c44;
  --red:         #8a1f1f;
  --amber:       #5c3a06;
  --badge-grey:  #333840;
}
/* Le focus doit rester visible meme sur un aplat sombre : anneau double,
   clair a l'interieur, sombre a l'exterieur. */
html[data-theme="contrast"] :focus-visible {
  outline: 3px solid #000 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px #fff !important;
}
/* Aucun texte sous 12 px : la taille EST un facteur de lisibilite, au meme
   titre que le contraste. */
html[data-theme="contrast"] body { font-size: 15px; }
/* MOB-02 : `html[data-theme="contrast"] * { min-height: 0 }` a été retiré.
   Son intention supposée — empêcher qu'une hauteur figée ne rogne un texte
   agrandi — ne pouvait pas être remplie : un `min-height` ne rogne JAMAIS,
   le contenu peut toujours le dépasser. Seul un `height` fixe ou un
   `max-height` coupe.
   En revanche, avec sa spécificité (0,1,1), il écrasait toute règle de classe
   simple et supprimait donc TOUTES les hauteurs minimales de l'application
   dès que le thème contrasté était actif — c'est-à-dire précisément les
   cibles tactiles, dans le thème conçu pour l'accessibilité.
   Constaté en posant `min-height: 44px` sur les onglets de la bibliothèque :
   la règle s'écrivait, se parsait, correspondait, et ne s'appliquait pas. */
html[data-theme="contrast"] [style*="font-size:9"],
html[data-theme="contrast"] [style*="font-size:10"],
html[data-theme="contrast"] [style*="font-size:11"] { font-size: 12px !important; }

/* Deux aplats posent leur couleur EN DUR, hors variables : la pastille de
   notifications (#b91c1c, ~5,9:1 avec du blanc) et le bouton AniList
   (#0369a1, ~6,4:1). Tous deux passent AA et echouent AAA — c'est
   precisement ce que le test de ce theme a releve. On les assombrit ici
   plutot que partout : sur les autres themes, AA reste la cible. */
html[data-theme="contrast"] #notifBadge { background: #7a1010 !important; color: #fff !important; }
html[data-theme="contrast"] .conn-btn-anilist { background: #024a6e; color: #fff; }
html[data-theme="contrast"] .conn-btn-anilist:hover { background: #013852; }

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select, textarea { font-family: inherit; }
ul, ol { list-style: none; }

/* ── Finitions globales (grade produit) ────────────────────────
   Rendu de police lissé, focus clavier élégant, sélection à l'accent,
   respect de prefers-reduced-motion. */
/* ── A11Y-01 : un titre lu, pas vu ─────────────────────────────
   Cinq pages n'avaient AUCUN `h1`. Sur un lecteur d'ecran, la commande
   « aller au titre principal » ne menait nulle part, et l'annonce de la page
   se reduisait a l'onglet du navigateur.

   Certaines de ces pages n'ont pas la place d'un titre visible — le lecteur
   affiche la planche plein cadre, la recherche commence par son champ. D'ou
   cette classe : hors de l'ecran, mais DANS l'arbre d'accessibilite.

   `clip-path` seul suffirait sur les navigateurs recents ; `clip` reste pour
   le WebView d'Android 8. Ni `display:none` ni `visibility:hidden` : tous
   deux retirent l'element de l'arbre, donc du lecteur d'ecran aussi. */
.a11y-invisible {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); }
:focus { outline: none; }
/* Le focus clavier : UNE seule règle, ici.
   Il y en avait deux dans ce fichier — celle-ci (anneau `box-shadow`, sans
   contour) et une autre 890 lignes plus bas (contour orange), de même
   spécificité. La seconde l'emportait ; l'anneau, lui, s'ajoutait quand même,
   puisque `box-shadow` n'était surchargé nulle part. On voyait donc les deux,
   sans que personne l'ait décidé.

   Et toutes deux posaient un `border-radius` : mettre un rayon dans une règle
   de focus change la FORME de l'élément au moment où on le focalise — une
   pastille ronde voyait ses coins passer à 4 px. Le contour suit tout seul le
   rayon réel de l'élément ; on n'a rien à lui imposer. */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  box-shadow: var(--ring);
}
/* Même raison qu'au-dessus : un lien ou un bouton ne doit pas changer de forme
   parce qu'on l'atteint au clavier. Le contour épouse déjà le rayon réel. */
/* Les titres Display (grotesque condensée) gagnent une chasse resserrée. */
h1, h2, h3, .section-title, .lib2-head h1 { font-family: var(--font-head); letter-spacing: -0.01em; }
/* « Mouvement reduit » est declare une seule fois, plus bas dans ce fichier
   (section « Reduced motion »). Il l'etait ici AUSSI, avec les memes durees
   ecrites autrement (`.01ms` contre `0.01ms`) : deux blocs concurrents pour un
   meme selecteur universel, dont l'un ne servait a rien. `scroll-behavior`,
   qui n'existait que dans celui-ci, a ete repris dans l'autre. */

/* ── Liquid glass : surface flottante translucide (hero, overlays, rails) ──
   Verre liquide : fond translucide + réfraction (blur+saturate) + arête
   spéculaire en haut. À réserver aux éléments FLOTTANTS (pas les grilles
   entières : backdrop-filter en masse coûte cher). */
.liquid-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-inner), var(--shadow-2);
}

/* ── Signature §13.6 : la corne de page pliée ──────────────────
   Un pli triangulaire sur le coin sup. droit de toute couverture qui a un
   signet ou une progression de lecture. La texture screentone (points nets,
   jamais de flou) apparaît DANS le pli — nulle part ailleurs. Placer sur un
   conteneur en position:relative. Couleur = accent fonctionnel du contexte. */
.dog-ear {
  position: absolute; top: 0; right: 0; width: 34px; height: 34px; z-index: 3;
  pointer-events: none;
  clip-path: polygon(100% 0, 0 0, 100% 100%);   /* triangle du coin */
  background-color: var(--accent);
  /* screentone net + léger dégradé de pli (plus foncé vers la pliure) */
  background-image:
    radial-gradient(rgba(255,255,255,0.38) 1px, transparent 1.4px),
    linear-gradient(225deg, color-mix(in srgb, var(--accent) 72%, #000) 0%, var(--accent) 58%);
  background-size: 5px 5px, 100% 100%;
  filter: drop-shadow(-2px 2px 2px rgba(28,27,25,.28));
}
/* Variante roman : le pli prend l'indigo Ai même hors contexte [data-content] */
.dog-ear.novel { background-color: var(--ai); }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* ╔══════════════════════════════════════════════════════════╗
   ║  HEADER                                                   ║
   ╚══════════════════════════════════════════════════════════╝ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: color-mix(in srgb, var(--bg2) 62%, transparent);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);   /* liquid glass prononcé */
  border-bottom: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), var(--shadow-1);
  z-index: 1000;
  display: flex; align-items: center;
  padding: 0 24px; gap: 28px;
}

.header-logo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-head);
  font-size: 15px; font-weight: 800;
  flex-shrink: 0;
  transition: opacity var(--transition);
}
.header-logo:hover { opacity: 0.85; }
.logo-icon {
  width: 28px; height: 28px;
  background: var(--orange);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}

.header-nav {
  display: flex; align-items: center; gap: 4px;
}
.header-nav a {
  padding: 6px 12px;
  border-radius: var(--radius2);
  font-size: 13.5px; font-weight: 500; color: var(--text2);
  transition: all var(--transition);
}
.header-nav a:hover { color: var(--text); background: var(--bg3); }
.header-nav a.active {
  color: var(--text);
  background: rgba(255,107,26,0.12);
  border: 1px solid rgba(255,107,26,0.2);
}
.nav-mes-listes {
  color: var(--orange) !important;
  border: 1px solid rgba(255,107,26,0.3) !important;
}

.header-search {
  flex: 1; max-width: 340px;
  position: relative;
}
.header-search input {
  width: 100%; height: 34px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 20px; color: var(--text);
  padding: 0 14px 0 36px; font-size: 13px;
  transition: border-color var(--transition);
}
.header-search input:focus { outline: none; border-color: var(--orange); }
.header-search input::placeholder { color: var(--text3); }
.header-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text3); font-size: 13px; pointer-events: none;
}
.search-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: var(--radius); overflow: hidden;
  display: none; z-index: 200;
  box-shadow: 0 12px 40px rgba(0,0,0,0.65);
  max-height: 420px; overflow-y: auto;
}
.search-dropdown.open { display: block; }
.search-result-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; transition: background var(--transition);
  cursor: pointer;
}
.search-result-item:hover { background: var(--bg3); }
.search-result-item img {
  width: 34px; height: 48px; object-fit: cover;
  border-radius: 5px; flex-shrink: 0;
  background: var(--bg4);
}
.search-result-info { flex: 1; min-width: 0; }
.search-result-info .title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-info .meta { font-size: 11px; color: var(--text2); margin-top: 2px; }

.header-actions {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto; flex-shrink: 0;
}
.header-icon-btn {
  width: 34px; height: 34px;
  background: var(--bg3); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text2); font-size: 14px;
  transition: all var(--transition);
  border: 1px solid var(--border);
}
.header-icon-btn:hover { color: var(--text); border-color: var(--border2); }
.header-icon-btn:disabled { opacity: .6; cursor: default; }
.header-icon-btn.on { background: var(--orange); color: #fff; border-color: var(--orange); }
/* Mode incognito : liseré discret en haut de page pour le rappeler */
body.incognito-on::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: repeating-linear-gradient(90deg, var(--orange) 0 14px, transparent 14px 28px);
  z-index: 9999; pointer-events: none; opacity: .85;
}
/* Bandeau de lecture privée (audit AMEL-106).
   En bas et non en haut : le haut de page porte déjà l'en-tête, et un bandeau
   qui pousse le contenu à chaque activation ferait sauter la mise en page.
   Au-dessus du dock musique (z-index 9000) mais sous les modales. */
#incognitoBar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 96px; z-index: 9600;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  max-width: min(680px, calc(100vw - 24px));
  padding: 9px 14px;
  background: var(--bg2); border: 1px solid var(--orange);
  border-radius: 999px; box-shadow: 0 6px 24px rgba(0,0,0,.4);
  font-size: 12.5px; color: var(--text2);
}
#incognitoBar .inco-pastille {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange); flex: 0 0 auto;
}
#incognitoBar .inco-texte { font-weight: 600; color: var(--text); }
#incognitoBar .inco-detail { color: var(--text3); font-size: 11.5px; }
#incognitoBar .inco-off {
  background: var(--bg3); border: 1px solid var(--border2); color: var(--text);
  border-radius: 999px; padding: 4px 11px; font-size: 11.5px; font-family: inherit; cursor: pointer;
}
#incognitoBar .inco-off:hover { border-color: var(--orange); }
#incognitoBar .inco-off:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Sous 560 px le détail passe à la ligne plutôt que d'écraser le bouton. */
@media (max-width: 560px) {
  #incognitoBar { bottom: 84px; border-radius: 14px; }
  #incognitoBar .inco-detail { flex-basis: 100%; }
}

#btnRefresh.spinning svg { animation: inko-spin .8s linear infinite; }
@keyframes inko-spin { to { transform: rotate(360deg); } }
.header-user {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 6px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 20px; font-size: 13px; font-weight: 500;
  transition: border-color var(--transition);
}
.header-user:hover { border-color: var(--border2); }
.header-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--orange); display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 700;
  flex-shrink: 0; overflow: hidden;
}
.header-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-label { line-height: 1; }
.user-sublabel { font-size: 10px; color: var(--accent-text); display: block; }   /* audit A11Y-02 : 3.29:1 avant */
.btn-connect {
  height: 34px; padding: 0 16px;
  background: var(--orange); color: #fff;
  border-radius: 20px; font-size: 13px; font-weight: 600;
  transition: background var(--transition);
  flex-shrink: 0;
}
.btn-connect:hover { background: var(--orange2); }

/* ── Page padding for fixed header ─────────────────────────── */
.page-body { padding-top: var(--header-h); }

/* ── Barre de titre custom (app desktop premium, fenêtre sans bordure OS) ── */
:root { --titlebar-h: 34px; }
#inko-titlebar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--titlebar-h);
  z-index: 10000;                       /* au-dessus du header et de tout le reste */
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg2); border-bottom: 1px solid var(--border);
  user-select: none; -webkit-user-select: none;
}
#inko-titlebar .tb-brand { display: flex; align-items: center; gap: 8px; padding-left: 12px; height: 100%; flex: 1; }
#inko-titlebar .tb-logo { width: 16px; height: 16px; border-radius: 4px; pointer-events: none; }
#inko-titlebar .tb-title { font-family: var(--font-head, inherit); font-size: 12.5px; font-weight: 600; color: var(--text2); letter-spacing: .2px; }
#inko-titlebar .tb-controls { display: flex; height: 100%; }
#inko-titlebar .tb-btn {
  width: 46px; height: 100%; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--text2); cursor: pointer;
  transition: background .12s, color .12s;
}
#inko-titlebar .tb-btn:hover { background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); }
#inko-titlebar .tb-close:hover { background: #e81123; color: #fff; }

/* Quand la barre est présente : on descend le header fixe et le contenu de sa hauteur. */
.tauri-app .site-header { top: var(--titlebar-h); }
.tauri-app .page-body   { padding-top: calc(var(--header-h) + var(--titlebar-h)); }
.tauri-app .mobile-nav  { /* la nav mobile reste en bas, rien à décaler */ }

/* ╔══════════════════════════════════════════════════════════╗
   ║  FOOTER                                                   ║
   ╚══════════════════════════════════════════════════════════╝ */
.site-footer {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 48px 0 24px;
  margin-top: 80px;
}
.footer-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 280px repeat(3,1fr); gap: 40px;
}
.footer-brand { display: flex; flex-direction: column; gap: 12px; }
.footer-logo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-size: 16px; font-weight: 800;
}
.footer-logo .logo-icon { width: 26px; height: 26px; font-size: 12px; }
.footer-desc { font-size: 12.5px; color: var(--text2); line-height: 1.6; }
.footer-stay { margin-top: 8px; }
.footer-stay h4 { font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.footer-email-form { display: flex; gap: 6px; }
.footer-email-form input {
  flex: 1; height: 34px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: var(--radius2);
  color: var(--text); padding: 0 10px; font-size: 12px;
}
.footer-email-form input:focus { outline: none; border-color: var(--orange); }
.footer-email-form input::placeholder { color: var(--text3); }
.footer-email-form button {
  height: 34px; padding: 0 14px;
  background: var(--bg4); border: 1px solid var(--border);
  border-radius: var(--radius2); color: var(--text);
  font-size: 12px; font-weight: 500;
  transition: background var(--transition);
}
.footer-email-form button:hover { background: var(--orange); border-color: var(--orange); }
.footer-col h4 {
  font-family: var(--font-head); font-size: 12px;
  font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text2);
  margin-bottom: 14px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col a { font-size: 13px; color: var(--text2); transition: color var(--transition); }
.footer-col a:hover { color: var(--orange); }

/* ── Les liens de pied de page, au doigt ─────────────────────
   Ils font 17 px de haut : la hauteur d'une ligne de texte de 13 px, sans
   rembourrage. Au doigt, viser « Top » (21x17) ou « Licence » (44x17) rate
   plus souvent qu'il ne touche, et le lien voisin est a 8 px.

   L'audit mobile le comptait 197 fois — dix liens sur vingt-trois pages. Ce
   n'est pas 197 defauts, c'est CELUI-CI, et il se corrige une fois.

   Seulement au pointeur grossier : sur un ecran a la souris, la cible de 17 px
   se vise tres bien, et etirer chaque lien a 44 px etirerait le pied de page
   sans rien apporter. La zone cliquable grandit, pas le texte. */
@media (pointer: coarse) {
  .footer-col ul { gap: 0; }
  .footer-col a {
    display: flex; align-items: center;
    min-height: 44px;   /* recommandation tactile iOS/Material */
  }
}
.footer-bottom {
  max-width: 1200px; margin: 32px auto 0;
  padding: 20px 24px 0; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.footer-bottom p { font-size: 12px; color: var(--text3); }
.footer-socials { display: flex; gap: 12px; }
.footer-socials a { font-size: 16px; color: var(--text3); transition: color var(--transition); }
.footer-socials a:hover { color: var(--orange); }

/* ╔══════════════════════════════════════════════════════════╗
   ║  COMPOSANTS PARTAGÉS                                      ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Badge statut */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; line-height: 1.6;
}
.badge-hot    { background: rgba(239,68,68,.15); color: var(--red-text); }
.badge-new    { background: rgba(34,197,94,.15); color: var(--green); }
.badge-exclu  { background: rgba(59,130,246,.15); color: var(--blue); }
.badge-top    { background: rgba(255,107,26,.15); color: var(--orange); }
.badge-orange { background: var(--orange); color: #fff; }
.badge-termine { background: rgba(107,114,128,.2); color: var(--badge-grey); }   /* audit A11Y-02 : #9ca3af donnait 1.60:1 */
.badge-cours  { background: rgba(34,197,94,.1); color: var(--green); }
.badge-pause  { background: rgba(245,158,11,.1); color: var(--amber); }

/* Rating stars */
.stars { display: inline-flex; gap: 1px; color: var(--amber); font-size: 12px; }
.stars-score { font-size: 12px; font-weight: 600; color: var(--text); }
.stars-count { font-size: 11px; color: var(--text2); }

/* Section header */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.section-title {
  font-family: var(--font-head); font-size: 17px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  /* Ces intertitres sont passes de <div> a <h2> pour exister dans la
     navigation par titres. Un h2 apporte ses marges par defaut : sans ce
     zero, chaque section se decalerait. */
  margin: 0;
}
.section-title-icon { color: var(--orange); font-size: 16px; }
.section-subtitle { font-size: 12px; color: var(--text2); margin-top: 2px; }
.section-link {
  /* audit A11Y-02 : l'accent de marque en texte 12.5px donnait 3.93:1 */
  font-size: 12.5px; color: var(--accent-text); font-weight: 500;
  display: flex; align-items: center; gap: 4px;
  transition: opacity var(--transition);
}
.section-link:hover { opacity: 0.8; }

/* Manga card */
.manga-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color var(--transition);
  position: relative;
}
.manga-card:hover {
  border-color: var(--border2);
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
}
/* Audit C3 : lien « étendu » — la carte est un <div>, le lien un calque
   au-dessus du contenu, et le cœur favori (frère, plus enfant du lien)
   reste cliquable au-dessus. */
.manga-card-link {
  position: absolute; inset: 0; z-index: 2;
  border-radius: inherit;
}
.manga-card-link:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.manga-card .card-fav-btn { z-index: 3; }
.manga-card-cover {
  position: relative; overflow: hidden;
  aspect-ratio: 3/4;
}
.manga-card-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-out);
}
.manga-card:hover .manga-card-cover img { transform: scale(1.07); }
.manga-card-badges {
  position: absolute; top: 8px; left: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.manga-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, transparent 52%);
  opacity: 0; transition: opacity .22s var(--ease-out);
  display: flex; align-items: flex-end; padding: 12px;
  gap: 8px;
}
.manga-card:hover .manga-card-overlay { opacity: 1; }
.btn-read-overlay, .btn-add-overlay {
  flex: 1; height: 34px;
  border-radius: var(--radius3); font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: background var(--transition), transform .15s var(--ease-out);
}
.btn-read-overlay {
  background: var(--accent); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 12px rgba(0,0,0,.3);
}
.btn-read-overlay:hover { background: color-mix(in srgb, var(--accent) 88%, #000); transform: translateY(-1px); }
.btn-add-overlay {
  /* liquid glass sur la couverture */
  background: rgba(255,255,255,.12); color: #fff;
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30);
}
.btn-add-overlay:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }
.manga-card-info { padding: 10px 12px 12px; }
.manga-card-title {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 3px;
}
.manga-card-author { font-size: 11.5px; color: var(--text2); margin-bottom: 5px; }
.manga-card-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--text3);
}
.manga-card-rating { display: flex; align-items: center; gap: 3px; color: var(--text2); }
.manga-card-rating svg { color: var(--amber); }
.manga-card-chapter { font-size: 11px; color: var(--text3); }

/* Progress bar */
.progress-bar {
  height: 3px; background: var(--bg4); border-radius: 2px;
  overflow: hidden; margin-top: 6px;
}
.progress-fill {
  height: 100%; background: var(--orange); border-radius: 2px;
  transition: width 0.3s ease;
}

/* Buttons */
.btn {
  /* Audit QUAL-05 : `.btn` ne déclarait AUCUNE couleur de texte. Les boutons
     portant une variante (btn-primary, btn-secondary, btn-ghost) en héritaient
     une ; les autres — `class="btn btn-sm"` seul, comme les trois actions de
     notifications.html — retombaient sur le noir par défaut des boutons du
     navigateur. Sur l'édition sombre : noir sur #111113, soit 1,11:1. Un
     bouton littéralement illisible, et invisible en relecture puisque le
     défaut ne vient pas d'une règle écrite mais d'une règle ABSENTE. */
  color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 17px; height: 38px;
  border-radius: var(--radius3); font-size: 13.5px; font-weight: 600;
  letter-spacing: .005em; white-space: nowrap;
  transition: background var(--transition), border-color var(--transition),
              transform .12s var(--ease-out), box-shadow var(--transition), color var(--transition);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 1px 2px rgba(28,27,25,.12), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.btn-primary:active { box-shadow: var(--shadow-1); }
.btn-secondary {
  background: var(--bg2); color: var(--text);
  border: 1px solid var(--border2);
}
.btn-secondary:hover { background: var(--bg3); border-color: var(--text3); transform: translateY(-1px); }
.btn-ghost { color: var(--text2); border: 1px solid var(--border); }
.btn-ghost:hover { color: var(--text); border-color: var(--border2); background: var(--bg2); }
.btn-sm { height: 32px; padding: 0 13px; font-size: 12px; border-radius: 16px; }
.btn-xs { height: 27px; padding: 0 11px; font-size: 11px; border-radius: 14px; }

/* Tag / genre pill */
.tag {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  background: var(--bg4); border: 1px solid var(--border);
  border-radius: 30px; font-size: 11.5px; color: var(--text2);
  transition: all var(--transition);
}
.tag:hover, .tag.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  /* Audit QUAL-05 : `color: var(--accent)` donnait 3,67:1 — l'accent est une
     couleur de REMPLISSAGE (elle porte du texte blanc), pas une couleur de
     texte sur fond sombre. On l'éclaircit pour cet usage précis. */
  color: color-mix(in srgb, var(--accent) 62%, var(--text));
}
.tag-orange {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* ── Champs de saisie : focus élégant à l'accent (aucun glow) ── */
input, select, textarea { transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); }
input:focus, select:focus, textarea:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: var(--ring);
}

/* Card generic */
.card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

/* Divider */
.divider { height: 1px; background: var(--border); margin: 20px 0; }

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size: 400% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius2);
}
@keyframes shimmer { 0%{background-position:200%} 100%{background-position:-200%} }
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes fadeIn  { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ── Card favorite button (used on catalogue + reco grids) ── */
.card-fav-btn {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px;
  border-radius: 50%; border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  backdrop-filter: blur(6px);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.card-fav-btn:hover  { background: rgba(0,0,0,0.75); transform: scale(1.08); }
.card-fav-btn.is-fav { color: var(--red); background: rgba(0,0,0,0.7); }

/* ── Spinner inline ── */
.spinner-inline {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Toast — verre dépoli, liseré d'accent, apparition ressort */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: color-mix(in srgb, var(--bg2) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border: 1px solid var(--border2);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 12px 20px 12px 17px;
  font-size: 13px; font-weight: 500; color: var(--text); z-index: 9999;
  box-shadow: var(--shadow-3);
  animation: toastIn .34s var(--ease-spring);
  pointer-events: none;
}
@keyframes toastIn { from{opacity:0;transform:translateX(-50%) translateY(14px) scale(.96)} to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} }

/* Responsive container */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-wide { max-width: 1440px; margin: 0 auto; padding: 0 24px; }

/* Grid layouts */
.manga-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.manga-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.manga-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* Horizontal scroll */
.h-scroll {
  display: flex; gap: 12px;
  overflow-x: auto; padding-bottom: 8px;
  scrollbar-width: none;
}
.h-scroll::-webkit-scrollbar { display: none; }

/* Arrow nav */
.arrow-nav { display: flex; gap: 6px; }
.arrow-btn {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg3); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text2); font-size: 12px;
  transition: all var(--transition);
}
.arrow-btn:hover { background: var(--bg4); color: var(--text); border-color: var(--border2); }
.arrow-btn:disabled { opacity: 0.3; pointer-events: none; }

/* ── Contenu adulte flouté (audit N20) ───────────────────── */
a[data-nsfw] .manga-card-cover,
.se-card[data-nsfw] .se-cover { position: relative; }
a[data-nsfw] .manga-card-cover img,
.se-card[data-nsfw] .se-cover img { filter: blur(16px) saturate(.6); }
a[data-nsfw] .manga-card-cover::after,
.se-card[data-nsfw] .se-cover::after {
  content: '+18';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; letter-spacing: .5px;
  color: #fff; background: rgba(0,0,0,.35);
  border-radius: inherit; pointer-events: none;
}

/* ── Méta des cartes (statut / année / démographie) ──────── */
.manga-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.manga-card-meta .mc-year { font-size: 11px; color: var(--text3); }
.manga-card-meta .mc-demo {
  font-size: 10px; color: var(--text2); background: var(--bg4);
  padding: 1px 6px; border-radius: 4px; text-transform: capitalize;
}
.manga-card-meta .mc-status {
  font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 20px;
  display: inline-flex; align-items: center; gap: 4px;
}
.manga-card-meta .mc-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.mc-status.mc-ongoing   { color: var(--green-text); background: rgba(34,197,94,.12); }   /* audit A11Y-02 : 3.58:1 avant */
/* audit A11Y-02 : ces trois-là restaient sous le seuil en édition sombre —
   du bleu/rouge/ambre calibrés pour du texte sur fond clair, posés en 10px
   sur fond sombre (« Terminé » mesurait 1.93:1). */
.mc-status.mc-completed  { color: var(--blue-text); background: rgba(59,130,246,.12); }
.mc-status.mc-hiatus     { color: var(--amber-text); background: rgba(245,158,11,.12); }
.mc-status.mc-cancelled  { color: var(--red-text); background: rgba(239,68,68,.12); }

/* ── Comptes connectés (AniList) ───────────────── */
.conn-list { display: flex; flex-direction: column; gap: 10px; }
.conn-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 12px;
}
.conn-logo {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg3); border: 1px solid var(--border);
}
.conn-body { flex: 1; min-width: 0; }
.conn-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.conn-desc { font-size: 12px; color: var(--text2); margin-top: 3px; line-height: 1.4; }
.conn-desc code { background: var(--bg4); padding: 1px 5px; border-radius: 4px; font-size: 11px; }
.conn-pill {
  font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 20px; color: var(--text2);
  background: var(--bg4); border: 1px solid var(--border);
}
.conn-pill.ok { color: var(--green); background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); }
.conn-pill.muted { color: var(--text3); }
.conn-action { flex-shrink: 0; }
.conn-btn-anilist { background: #0369a1; color: #fff; }  /* audit QUAL-05 : #02a9ff donnait 2,59:1 avec du blanc */
.conn-btn-anilist:hover { background: #2bb8ff; }
.conn-btn-danger { color: var(--red-text); border: 1px solid rgba(239,68,68,.3); }
.conn-btn-danger:hover { background: rgba(239,68,68,.1); }
@media (max-width: 560px) {
  .conn-card { flex-wrap: wrap; }
  .conn-action { width: 100%; }
  .conn-action .btn { width: 100%; }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  RESPONSIVE — global.css                                 ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ── Navigation mobile (bottom bar) ─────────────────────── */
.mobile-nav { display: none; }

/* MOB-02 : le bouton flottant « Retour en haut » est posé en `bottom: 22px`
   par un style EN LIGNE (`global.js`). Là où la barre de navigation mobile
   s'affiche, il tombe donc PAR-DESSUS elle et intercepte l'onglet « Plus » —
   mesuré : la cible n'était pas atteignable en son centre.
   `!important` est nécessaire ici, et seulement ici : un style en ligne ne se
   surcharge pas autrement. Le décalage suit la hauteur réelle de la barre,
   encoche comprise. */
@media (max-width: 1024px) {
  /* Deux déclarations : `env()` est du Chrome 69. Le WebView d'Android 8 jette
     la seconde, et sans la première il retomberait sur le `bottom: 22px` en
     ligne — c'est-à-dire exactement la régression MOB-02, rendue invisible aux
     contrôles parce que la règle EXISTE. */
  #btnBackTop { bottom: 78px !important; bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 14px) !important; }

  /* La barre d'onglets annonce sa hauteur : le bandeau (IX.6) s'ancre
     au-dessus d'elle sans avoir à savoir si elle existe sur cette page. */
  :root { --mh-barre-onglets: 64px; }
}

@media (max-width: 1024px) {
  .mobile-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 95;
    display: flex;
    background: var(--glass-bg);      /* liquid glass */
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
    /* Doublée : env() est du Chrome 69, et le WebView d'Android 8 jette la
       déclaration entière plutôt que de retomber sur la valeur par défaut. */
    padding-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mnav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 0 7px; text-decoration: none;
    color: var(--text3); font-size: 10px; font-weight: 600;
    transition: color var(--transition);
  }
  .mnav-item.active { color: var(--orange); }
  .mnav-icon { position: relative; display: flex; }
  .mnav-icon svg { width: 21px; height: 21px; }
  .mnav-icon .nav-badge { top: -5px; right: -10px; }
  /* Laisse la place à la barre (contenu + dock musique) */
  body.page-body { padding-bottom: 62px; }
  #inko-music { bottom: 58px !important; }
  .im-pill { bottom: 76px !important; }
}

/* ── Tablet (≤ 1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {
  .site-header { padding: 0 16px; gap: 16px; }
  .header-nav { display: none; }
  .header-search { max-width: 240px; }
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .manga-grid-5 { grid-template-columns: repeat(4, 1fr); }
  .manga-grid-4 { grid-template-columns: repeat(3, 1fr); }
}

/* ── Mobile landscape (≤ 768px) ─────────────────────────── */
@media (max-width: 768px) {
  .site-header { padding: 0 12px; gap: 10px; }
  .header-search { max-width: 180px; }
  .header-user .user-label { display: none; }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .manga-grid-5 { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .manga-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .manga-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .section-header { flex-wrap: wrap; gap: 8px; }
}

/* ── Mobile portrait (≤ 480px) ──────────────────────────── */
@media (max-width: 480px) {
  :root { --header-h: 52px; }
  .site-header { padding: 0 12px; gap: 8px; }
  .header-search { display: none; }
  .header-icon-btn { width: 30px; height: 30px; }
  .container, .container-wide { padding: 0 14px; }
  .manga-grid-5,
  .manga-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .manga-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .btn { height: 34px; font-size: 13px; }
  .footer-email-form { flex-direction: column; }
  .footer-inner { padding: 0 14px; }
}
/* ══════════════════════════════════════════════════════════
   LISTES — modale partagée + sélecteur (toutes pages)
══════════════════════════════════════════════════════════ */
.list-icon-btn {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
  cursor: pointer;
  transition: all .15s ease;
}
.list-icon-btn:hover { background: rgba(255,107,26,.12); border-color: rgba(255,107,26,.3); color: var(--orange); }

.list-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 20px;
  backdrop-filter: blur(2px);
}
.list-modal {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%; max-width: 440px;
  padding: 22px;
}
.list-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 17px; font-weight: 700;
  margin-bottom: 16px;
}
.list-modal-close { background: none; border: none; color: var(--text3); font-size: 18px; cursor: pointer; line-height: 1; }
.list-modal-close:hover { color: var(--text); }
.list-modal-label { display: block; font-size: 12.5px; color: var(--text2); margin: 12px 0 6px; }
.list-modal-input {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: 10px 12px;
  color: var(--text);
  font-family: inherit; font-size: 14px;
  outline: none; resize: vertical;
}
.list-modal-input:focus { border-color: var(--orange); }
.list-modal-check { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; color: var(--text2); cursor: pointer; }
.list-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* Sélecteur "Ajouter à une liste" */
.lp-lists { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.lp-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius2);
  cursor: pointer;
  transition: background .12s ease;
}
.lp-row:hover { background: var(--bg3); }
.lp-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--orange); cursor: pointer; }
.lp-name { flex: 1; font-size: 14px; }
.lp-count { font-size: 12px; color: var(--text3); background: var(--bg3); padding: 1px 8px; border-radius: 999px; }
.lp-empty { font-size: 13px; color: var(--text3); padding: 16px 4px; text-align: center; }
.lp-new { display: flex; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.lp-new .list-modal-input { flex: 1; }
.lp-new .btn { white-space: nowrap; }

/* Badge de nouveautés sur la navigation (Bibliothèque) */
.nav-badge {
  position: absolute;
  top: -6px;
  right: -12px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}

/* ── Fluidité : rendu des cartes ─────────────────────────── */
/* Fond de remplacement pendant le chargement des covers (zéro flash blanc) */
.manga-card-cover img, .trending-cover img, .se-cover img, .resume-cover img { background: var(--bg3); }
/* Les cartes hors écran ne sont ni mises en page ni peintes */
.manga-card { content-visibility: auto; contain-intrinsic-size: auto 300px; }


/* -- Reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    /* Repris du bloc jumeau retire plus haut : sans lui, un defilement anime
       subsistait pour qui demande justement moins de mouvement. */
    scroll-behavior: auto !important;
  }
}

/* -- Accessibilité (audit A1/A3) ------------------------------ */
/* Le focus clavier est défini une seule fois, avec le reset, en haut de ce
   fichier. Cette seconde règle le redéfinissait à l'identique — d'où deux
   déclarations concurrentes pour un même sélecteur, relevées par
   `scripts-ci/audit-css.js`. */
/* Lien d'évitement « Aller au contenu » : invisible jusqu'au focus clavier */
.skip-link {
  position: fixed; top: -48px; left: 12px; z-index: 10000;
  background: var(--orange); color: #fff; font-size: 13px; font-weight: 600;
  padding: 9px 16px; border-radius: 8px; text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

/* ── Menu « reprendre » multi-séries (audit AMEL-30) ──
   Le bouton d'en-tête n'ouvrait que la dernière lecture ; on lit souvent
   plusieurs séries en parallèle. */
.mh-continue-menu {
  position: fixed; z-index: 9500;
  width: min(310px, calc(100vw - 16px));
  padding: 6px;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: var(--radius); box-shadow: var(--shadow-3);
}
.mh-cm-item {
  display: flex; gap: 10px; align-items: center;
  padding: 7px 8px; border-radius: var(--radius2);
  color: inherit; text-decoration: none;
}
.mh-cm-item:hover, .mh-cm-item:focus-visible { background: var(--bg3); }
.mh-cm-item img {
  width: 34px; height: 46px; flex: 0 0 auto;
  object-fit: cover; border-radius: 5px; background: var(--bg4);
}
.mh-cm-txt { min-width: 0; }
.mh-cm-title {
  display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mh-cm-sub { display: block; font-size: 11px; color: var(--text3); margin-top: 2px; }

/* ── Ajout à une liste depuis une carte (audit AMEL-39) ──
   Placé sous le cœur, même gabarit : deux actions de carte de même nature
   doivent se ressembler et s'aligner. */
.card-list-btn {
  position: absolute; top: 44px; right: 8px;
  width: 30px; height: 30px;
  border-radius: 50%; border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  backdrop-filter: blur(6px);
  transition: background .18s ease, transform .18s ease;
}
.card-list-btn:hover { background: rgba(0,0,0,0.75); transform: scale(1.08); }
.manga-card .card-list-btn { z-index: 3; }

/* ── Barre d'annulation (audit AMEL-40) ──
   Persistante et non un toast de trois secondes : le temps de réaliser qu'on
   s'est trompé dépasse largement la durée d'un message qui s'efface. */
.undo-bar {
  /* Le dock musical est fixe en bas de TOUTES les pages (#inko-music, bas de
     page, z-index 9000) : une barre a 24px du bord se retrouvait dessous et
     son bouton devenait incliquable. On passe au-dessus, et plus haut. */
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: 9600; display: flex; align-items: center; gap: 12px;
  max-width: min(560px, calc(100vw - 24px));
  padding: 11px 14px;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: var(--radius); box-shadow: var(--shadow-3);
  font-size: 13px; color: var(--text);
}
.undo-bar-action {
  flex: 0 0 auto;
  background: var(--accent); color: #fff;
  border-radius: 16px; padding: 5px 14px;
  font-size: 12.5px; font-weight: 700;
}
.undo-bar-action:disabled { opacity: .6; cursor: default; }
.undo-bar-close { flex: 0 0 auto; color: var(--text3); font-size: 15px; padding: 2px 4px; }
.undo-bar-close:hover { color: var(--text); }


/* ═══════════════════════════════════════════════════════════
   MOB-02 — cibles tactiles (audit AMEL-84, jamais traité)
   ───────────────────────────────────────────────────────────
   Relevé de l'audit à 375 px : 770 cibles sous 32 px sur la bibliothèque,
   132 sur le catalogue, 61 sur l'accueil, et entre 19 et 39 sur les sept
   autres pages. Sous 32 px, une cible se rate au doigt — on vise à côté, on
   revient, on réessaie.

   Deux principes tenus ici :

   1. AGRANDIR LA ZONE, PAS LE DESSIN. Beaucoup de ces cibles sont des icônes
      de 16 à 24 px dont l'agrandissement casserait la mise en page. Un
      pseudo-élément « ::after » étend la zone SENSIBLE autour du bouton sans
      rien déplacer : le dessin garde sa taille, le doigt gagne sa marge.

   2. SEULEMENT SUR POINTEUR GROSSIER. « pointer: coarse » vise le doigt, pas
      la souris. Une souris n'a pas besoin de 44 px, et étendre les zones sur
      un écran de bureau ferait se chevaucher des contrôles voisins.

   44 px est le seuil des référentiels d'accessibilité (WCAG 2.5.5 demande
   44x44 px CSS). On ne l'impose pas en hauteur — ce qui casserait les barres
   denses — mais en zone atteignable.

   À noter : cette règle ne pouvait PAS fonctionner avant que
   « html[data-theme=contrast] * { min-height: 0 } » ne soit retiré (P1.3).
   Sa spécificité (0,1,1) écrasait toute règle de classe, et donc toute
   hauteur minimale, dans le thème conçu pour l'accessibilité.
   ═══════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  /* La zone étendue est CENTRÉE sur le contrôle et ne descend jamais sous
     44 px. « position: relative » est posé sur le contrôle lui-même pour
     ancrer le pseudo-élément. */
  button, a[href], [role='button'], input[type='checkbox'], input[type='radio'], summary {
    position: relative;
  }
  button::after, a[href]::after, [role='button']::after,
  input[type='checkbox']::after, input[type='radio']::after, summary::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    min-width: 44px; min-height: 44px;
    background: transparent;   /* la zone s'atteint, elle ne se voit pas */
    pointer-events: auto;
    z-index: 0;
  }
  /* Le contenu du bouton reste AU-DESSUS de la zone étendue : sans ça, une
     icône ou un dégradé passerait derrière et disparaîtrait. */
  button > *, a[href] > *, [role='button'] > * { position: relative; z-index: 1; }

  /* Exceptions — là où l'extension nuirait plus qu'elle n'aiderait :
     · un lien DANS un paragraphe : la zone déborderait sur les lignes
       voisines et leur volerait leurs clics ;
     · les cartes et vignettes, déjà bien plus grandes que 44 px, dont
       plusieurs utilisent déjà leur propre « ::after » décoratif. */
  p a[href]::after, li a[href]::after,
  .manga-card::after, .lib2-card::after, .source-card::after,
  .trending-card::after, .fav-item::after, .history-entry::after,
  .nt-item::after, .migr-cand::after {
    content: none;
  }
}


/* ── P1.6 : états vides (voir MH.etatVide) ─────────────────── */
.mh-etat-vide {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 48px 24px; gap: 4px; min-height: 220px;
}
.mh-vide-ico { font-size: 34px; line-height: 1; margin-bottom: 10px; opacity: .75; }
.mh-vide-titre { font-family: var(--font-head, inherit); font-size: 17px; font-weight: 700; color: var(--text); }
.mh-vide-texte { font-size: 13.5px; line-height: 1.6; color: var(--text2); max-width: 42ch; margin-top: 4px; }
.mh-vide-actions { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
@media (max-width: 640px) {
    .mh-etat-vide { padding: 36px 18px; }
    .mh-vide-actions .btn { min-height: 44px; }
}

/* ── P1.6 : squelettes AUX DIMENSIONS FINALES ────────
   La carte de squelette reprend la geometrie de la vraie carte — couverture
   2:3 et deux lignes de titre — sinon le saut de mise en page qu'elle est
   censee eviter revient a l'arrivee des donnees. */
/* Le squelette de carte EST une `.manga-card` : il herite du rapport de
   couverture, du rembourrage et de la hauteur figee du titre. Recopier ces
   valeurs les aurait laissees deriver au premier changement de la carte. */
.mh-sq {
  /* Inerte : sans cela, `closest('.manga-card')` du module de gestes
     l'attraperait, et un appui long ouvrirait un menu sur une carte sans
     identifiant. */
  pointer-events: none;
}
.mh-sq:hover { transform: none; box-shadow: none; border-color: var(--border); }
.mh-sq .manga-card-title span { display: block; height: 11px; border-radius: 4px; }
.mh-sq .manga-card-title span + span { margin-top: 8px; width: 58%; }
/* Deux pastilles qui DEBORDENT la ligne (62 % + 45 %) : elles passent donc
   sur deux rangs, comme les badges reels d'annee, de demographie et de statut.
   Ajuste au millimetre sur la carte tactile — c'est elle que P1.6 vise. */
.mh-sq .manga-card-meta span { display: block; height: 16px; border-radius: 4px; }
.mh-sq .manga-card-meta span:first-child { width: 62%; }
.mh-sq .manga-card-meta span:last-child { width: 45%; }
.mh-sq-t1 { height: 11px; width: 92%; border-radius: 4px; }
.mh-sq-t2 { height: 11px; width: 58%; border-radius: 4px; }
.mh-sq-ligne { display: flex; gap: 12px; align-items: center; padding: 10px 0; }
.mh-sq-vignette { width: 52px; height: 70px; border-radius: 6px; flex: 0 0 auto; }
.mh-sq-lignes { flex: 1 1 auto; display: flex; flex-direction: column; gap: 7px; }
@media (hover: none) {
  .mh-sq-t1, .mh-sq-t2 { height: 10px; }
}
/* Le scintillement est une ANIMATION : sous « mouvement reduit », il devient
   un aplat. Le squelette garde alors son role — tenir la place — sans
   agiter douze blocs a l'ecran. */
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--bg3); }
}

/* ════════════════════════════════════════════════════════
   P1.4 — la carte au doigt (audit IX.5, IX.6)

   Tout ce bloc est sous `hover: none` : il ne s'applique qu'à un appareil
   sans survol. La carte de bureau n'est pas touchée.

   La carte de bibliothèque (`.lib2-card`) respectait déjà la spécification —
   pastille `--hanko` en haut à gauche, titre sur deux lignes. C'est la carte
   PARTAGÉE (catalogue, accueil, séries similaires) qui ne la respectait pas.
   ════════════════════════════════════════════════════════ */
@media (hover: none) {
  /* « Aucun bouton dans la carte » (IX.6). Sur bureau, le cœur et le « + »
     n'apparaissent qu'AU SURVOL — un geste qui n'existe pas au doigt. Ils
     étaient donc, sur téléphone, affichés en permanence : deux cibles de 28 px
     posées sur une couverture de 109 px, qu'on touche en voulant ouvrir la
     série. Les actions passent par l'appui long, où elles ont de la place et
     un libellé. */
  .manga-card .card-fav-btn,
  .manga-card .card-list-btn,
  .manga-card .manga-card-overlay { display: none; }

  /* Le rapport d'une couverture est 2:3, pas 3:4 (IX.5). En 3:4 la
     couverture est rognée en haut et en bas par `object-fit: cover` — or
     c'est précisément là que se trouvent le titre et le numéro de tome. */
  .manga-card-cover { aspect-ratio: 2/3; }

  /* Statut en haut à DROITE (IX.6) : le coin gauche est réservé au signal
     « non lu », qui doit rester au même endroit sur toutes les cartes de
     l'application pour être lisible d'un balayage du regard. */
  .manga-card-badges {
    left: auto; right: 5px; top: 5px;
    align-items: flex-end;
  }
  .manga-card-badges .badge { font-size: 8.5px; padding: 2px 5px; }

  /* Titre sur DEUX lignes. Sur 109 px de large, une seule ligne coupée à
     l'ellipse ne montre souvent que le premier mot : deux tomes d'une même
     collection deviennent indiscernables.
     `min-height` fige la hauteur à deux lignes — sans elle, un titre court
     remonte le numéro de chapitre et les bas de cartes cessent de s'aligner,
     ce qui hache visuellement la grille. */
  .manga-card-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 12px; line-height: 1.25;
    min-height: 2.5em;
    margin-bottom: 2px;
  }
  /* L'auteur ne tient pas sur 109 px et repousse le numéro de chapitre hors
     de la carte. Il reste sur la fiche série, où on va le chercher. */
  .manga-card-author { display: none; }
  .manga-card-info { padding: 6px 7px 8px; }
  .manga-card-meta { font-size: 10.5px; gap: 4px; }

  /* `:hover` est COLLANT au doigt : sur plusieurs WebView, un appui laisse la
     carte soulevée jusqu'au prochain appui ailleurs. Une carte qui reste en
     l'air après qu'on l'a quittée paraît sélectionnée. */
  .manga-card:hover { transform: none; box-shadow: none; }
  .manga-card:hover .manga-card-cover img { transform: none; }
}

/* Signal « non lu » (IX.6), sur TOUS les écrans — c'est une information, pas
   une commande dépendant du survol. La carte le porte quand la page connaît
   le compte ; le catalogue, lui, ne peut pas le savoir (on n'a rien lu d'une
   série qu'on découvre) et n'en met donc jamais. */
.manga-card[data-non-lu] .manga-card-cover::before {
  content: '';
  position: absolute; top: 6px; left: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--hanko);
  box-shadow: 0 0 0 2px rgba(0,0,0,.35);
  z-index: 2;
}

/* ══ REPLI aspect-ratio — GÉNÉRÉ par scripts-ci/gen-repli-aspect-ratio.js ══ */
/* Ne pas modifier à la main : `npm run gen-repli-ar` régénère ce bloc.
   16 déclaration(s) répliquée(s) pour les navigateurs sans aspect-ratio
   (WebView Android 8 = Chrome 61). Sur un navigateur récent, ce bloc
   entier est ignoré. */
@supports not (aspect-ratio: 1 / 1) {
    .hero-poster-link { height: 300px; }
    .trending-cover { height: 0; padding-top: 133.3333%; }
    .trending-cover > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .lib2-cover { height: 0; padding-top: 133.3333%; }
    .lib2-cover > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .focus-cover { height: 0; padding-top: 56.25%; }
    .focus-cover > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .results-grid.list-view .manga-card-cover { padding-top: 0; }
    .cd-serie-cover { height: 0; padding-top: 133.3333%; }
    .cd-serie-cover > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .cd-serie-card-cover { height: 0; padding-top: 133.3333%; }
    .cd-serie-card-cover > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .list-card-cover { height: 0; padding-top: 62.5%; }
    .list-card-cover > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .manga-card-cover { height: 0; padding-top: 133.3333%; }
    .manga-card-cover > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .heatmap-cell { height: 0; padding-top: 100%; }
    .heatmap-cell > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .list-manga-cover { height: 0; padding-top: 133.3333%; }
    .list-manga-cover > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .se-cover { height: 0; padding-top: 133.3333%; }
    .se-cover > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .similar-cover { height: 0; padding-top: 133.3333%; }
    .similar-cover > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .manga-card-cover { height: 0; padding-top: 133.3333%; }
    .manga-card-cover > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  @media (max-width: 480px) {
      .cd-serie-cover { height: 0; padding-top: 133.3333%; }
      .cd-serie-cover > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  }
  @media (hover: none) {
      .manga-card-cover { height: 0; padding-top: 150%; }
      .manga-card-cover > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  }
}
/* ══ fin du repli aspect-ratio ══ */