/* =========================================================
   Sherlood — feuille de style commune à tout le site
========================================================= */

/* Polices auto-hébergées (Inter + Poppins), jeux de caractères "latin" et
   "latin-ext" uniquement (suffisant pour le français, y compris les
   caractères accentués et "œ"/"Œ") — fichiers dans assets/fonts/, plus
   aucun appel à Google Fonts : meilleure confidentialité pour vos
   visiteurs (aucune requête vers un serveur tiers) et un chargement qui ne
   dépend plus de la disponibilité d'un service externe. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/inter-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/inter-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/inter-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/inter-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/inter-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/inter-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/inter-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/inter-latin-800-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/inter-latin-ext-800-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/poppins-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/poppins-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/poppins-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/poppins-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/poppins-latin-800-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/poppins-latin-ext-800-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  /* ---------------------------------------------------------------
     Thème sombre (octobre 2026) — demande explicite de remplacer le fond
     blanc par un fond noir sur tout le site, tout en restant moderne,
     cohérent et lisible. Les teintes violet/rose/or/vert ci-dessous
     restent EXACTEMENT les couleurs de marque d'origine (inchangées) :
     elles continuent de servir pour les boutons pleins, dégradés et
     petites puces claires (badges, filtres...), qui fonctionnent déjà très
     bien sur un fond sombre. Ce qui change, ce sont les teintes NEUTRES
     (fond, texte, bordures, ombres) ci-dessous, plus deux nouveaux jetons
     dédiés au TEXTE violet (--heading / --link) : sur un fond clair,
     violet-900/700 servaient à la fois de couleur de fond ET de texte
     foncé-sur-clair ; sur fond sombre, le texte a besoin d'une variante
     CLAIRE à la place — d'où ces deux jetons séparés, utilisés uniquement
     là où le texte repose directement sur le fond sombre (jamais sur les
     petites puces restées claires, où violet-900/700 restent corrects).
     --------------------------------------------------------------- */
  --violet-900: #3B1D70;
  --violet-800: #4A2688;
  --violet-700: #5A2FC2;
  --violet-600: #6C3CE9;
  --violet-500: #8157EE;
  --violet-100: #EEE8FF;
  --violet-50: #F7F4FF;
  /* Texte violet clair, utilisé pour les titres (h1/h2/h3, noms d'auteur...)
     directement posés sur le fond sombre (--white/--off-white ci-dessous). */
  --heading: #ECE4FC;
  /* Texte violet clair plus saturé, utilisé pour les liens et petites
     icônes/labels directement posés sur le fond sombre. */
  --link: #BBA4F7;
  --rose: #E95D9F;
  --rose-light: #FCEAF3;
  --rose-dark: #C94383;
  /* Bordure des éléments "danger" (bouton Supprimer, encarts d'avertissement...) :
     centralisée ici — elle était écrite en dur (#F5C7DC) à 5 endroits différents
     du fichier. Un seul endroit à changer désormais si cette teinte évolue. */
  --rose-border: #F5C7DC;
  --gold: #F4C542;
  --gold-dark: #D9A91F;
  --gold-light: #FFF7D6;
  --green: #2E9E6B;
  --green-light: #E7F7EF;
  /* Surface principale (cartes, en-tête, menus déroulants, tableaux,
     champs de formulaire...) — remplace l'ancien blanc pur (#FFFFFF). */
  --white: #1D1830;
  /* Fond de page / sections en creux (légèrement plus sombre que --white
     ci-dessus, pour un effet de profondeur subtil) — remplace l'ancien
     quasi-blanc (#FAF8FC). */
  --off-white: #140F1F;
  --text: #F1ECFB;
  --text-light: #CBC0DE;
  --muted: #A79BC2;
  --border: #392F4D;
  /* Fond "puce/panneau" translucide : remplace violet-50/100 pour les
     encarts et éléments interactifs qui contiennent eux-mêmes du texte
     utilisant les jetons de texte clairs ci-dessus (--text/--text-light/
     --muted/--heading/--link) — contrairement aux petites puces courtes
     (badges, filtres...) dont le texte reste écrit en dur en violet foncé
     et qui, elles, restent volontairement de teinte pâle (voir plus haut). */
  --chip-bg: rgba(167, 139, 250, 0.14);
  --chip-border: rgba(167, 139, 250, 0.32);
  --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.35);
  --shadow: 0 12px 35px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 25px 60px rgba(0, 0, 0, 0.55);
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --max-width: 1180px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden; /* filet de sécurité anti-débordement horizontal sur mobile */
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }
.container { width: min(92%, var(--max-width)); margin: 0 auto; }

/* HEADER */
header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(20, 15, 31, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(57, 47, 77, 0.85);
  transition: transform 0.3s ease;
}
/* Sur mobile, le header glisse hors de l'écran quand on défile vers le bas
   (voir le script dans includes/footer.php) pour ne jamais cacher le texte. */
header.header-hidden { transform: translateY(-100%); }
.nav { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: flex; align-items: center; gap: 11px; font-family: "Poppins", sans-serif; font-size: 25px; font-weight: 800; color: var(--heading); }
.logo-mark {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px;
  color: #fff; background: linear-gradient(135deg, var(--violet-600), var(--violet-900));
  box-shadow: 0 8px 20px rgba(108, 60, 233, 0.25); font-size: 21px;
}
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; flex-wrap: wrap; }
.nav-links a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-light); font-size: 14px; font-weight: 600;
  padding: 10px 14px; border-radius: 10px; transition: 0.25s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--link); background: var(--chip-bg); }
.badge-count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--rose); color: #fff; font-size: 11px; font-weight: 800;
}
/* Un style d'auteur l'emporte toujours sur la feuille par défaut du
   navigateur pour [hidden], même à spécificité égale : sans cette règle,
   un badge posé avec l'attribut hidden (compteur revenu à zéro, voir
   includes/header.php) resterait visible en inline-grid. Même principe
   déjà appliqué ailleurs dans cette feuille de style (.btn[hidden],
   .lightbox[hidden], .resume-banner[hidden]...). */
.badge-count[hidden] { display: none; }
.nav-user { display: flex; align-items: center; gap: 10px; position: relative; }
/* Bouton "menu burger" (3 traits) : masqué sur ordinateur, affiché uniquement sur mobile/tablette (voir plus bas). */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 42px; height: 42px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 11px;
  background: var(--white); cursor: pointer; padding: 0;
}
.nav-toggle span {
  display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--link);
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease;
}
.nav-toggle:hover { border-color: var(--violet-500); background: var(--chip-bg); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-link-login { font-size: 14px; font-weight: 600; color: var(--text-light); padding: 10px 12px; }
/* Doublon de "Se connecter" glissé dans le menu déroulant mobile : cf.
   includes/header.php et le point d'entrée ".nav-links-login-mobile"
   ci-dessous (max-width: 650px) qui le rend visible uniquement là. */
.nav-links-login-mobile { display: none; }
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center; padding: 11px 18px;
  border-radius: 10px; background: var(--violet-700); color: #fff; font-size: 14px; font-weight: 700;
  transition: 0.25s ease; box-shadow: 0 7px 18px rgba(90, 47, 194, 0.2); border: 0; cursor: pointer;
}
.nav-cta:hover { background: var(--violet-800); transform: translateY(-1px); }
.nav-user-menu { position: relative; }
.nav-user-toggle {
  border: 1px solid var(--border); background: var(--white); color: var(--text);
  padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.nav-user-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 8px; flex-direction: column; gap: 2px; z-index: 50;
}
.nav-user-menu.open .nav-user-dropdown { display: flex; }
.nav-user-dropdown a, .nav-user-dropdown button {
  display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px;
  background: transparent; border: 0; font-size: 14px; color: var(--text-light); cursor: pointer;
}
.nav-user-dropdown a:hover, .nav-user-dropdown button:hover { background: var(--chip-bg); color: var(--link); }
/* Variante compacte du même bouton/menu déroulant (nav-user-toggle /
   nav-user-dropdown, réutilisés tels quels) pour le menu "···" des actions
   secondaires du tableau de bord admin (voir dashboard.php). */
.nav-user-toggle.toggle-dots { padding: 9px 12px; line-height: 1; font-size: 17px; font-weight: 800; letter-spacing: 1px; }

/* Cloche de notification (lecteur connecté) : icône toujours visible,
   panneau déroulant rempli et tenu à jour par un sondage périodique (voir
   includes/footer.php) — jamais de vrai "temps réel", un hébergement
   mutualisé classique ne propose pas de serveur de websockets. */
.notif-bell-wrap { position: relative; }
.notif-bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--white); font-size: 18px; text-decoration: none; flex-shrink: 0;
}
.notif-bell:hover { background: var(--chip-bg); border-color: var(--violet-500); }
.notif-bell .badge-count {
  position: absolute; top: -6px; right: -6px; border: 2px solid var(--white);
}
.notif-bell-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: min(340px, 90vw);
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); z-index: 60; display: flex; flex-direction: column; max-height: 420px;
}
/* Un style d'auteur l'emporte toujours sur la feuille par défaut du
   navigateur pour [hidden], même à spécificité égale (voir la même remarque
   pour .badge-count plus haut) : sans cette règle, le panneau restait
   affiché en permanence (display: flex) quoi que fasse le JavaScript sur
   l'attribut hidden — bug signalé par l'utilisateur (panneau ouvert tout
   seul, un clic sur la cloche ne le refermait jamais). */
.notif-bell-panel[hidden] { display: none; }
.notif-bell-panel-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.notif-bell-panel-header strong { color: var(--heading); font-size: 14px; }
.notif-bell-mark-all {
  background: transparent; border: 0; color: var(--link); font-size: 12px; font-weight: 700;
  cursor: pointer; padding: 4px 6px; border-radius: 6px;
}
.notif-bell-mark-all:hover { background: var(--chip-bg); }
.notif-bell-mark-all:disabled { opacity: 0.5; cursor: default; }
.notif-bell-panel-list { overflow-y: auto; flex: 1; padding: 6px; }
.notif-bell-panel-empty { padding: 18px 10px; text-align: center; color: var(--muted); font-size: 13px; }
.notif-bell-panel-item {
  position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 10px 10px;
  border-radius: 8px; text-decoration: none; color: var(--text);
}
.notif-bell-panel-item:hover { background: var(--chip-bg); }
/* var(--chip-bg) (fond translucide), pas var(--violet-50) : --violet-50 est
   réservé aux petites puces COURTES dont le texte reste écrit en dur en
   violet foncé (voir le commentaire sur --chip-bg dans :root) — ici le
   texte vient de var(--text), clair, pensé pour un fond sombre. Avec
   --violet-50 (presque blanc), le texte clair devenait illisible dessus,
   signalé par l'utilisateur (capture d'écran à l'appui). Même fond que
   .notif-item.unread, qui a exactement le même rôle ailleurs sur le site. */
.notif-bell-panel-item.unread { background: var(--chip-bg); }
.notif-bell-panel-icon { flex-shrink: 0; font-size: 16px; line-height: 1.4; }
.notif-bell-panel-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.4; padding-right: 14px; }
.notif-bell-panel-date { font-size: 11px; color: var(--muted); }
.notif-bell-panel-dot {
  position: absolute; top: 12px; right: 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--rose);
}
.notif-bell-panel-footer {
  display: flex; flex-direction: column; border-top: 1px solid var(--border); padding: 6px;
}
.notif-bell-panel-footer a {
  padding: 8px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--link);
  text-decoration: none;
}
.notif-bell-panel-footer a:hover { background: var(--chip-bg); }
@media (max-width: 650px) {
  .notif-bell { width: 38px; height: 38px; font-size: 16px; }
  .notif-bell-panel { position: fixed; right: 12px; left: 12px; top: 76px; width: auto; max-height: calc(100vh - 100px); }
}
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--rose); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* FLASH MESSAGES */
.flash { margin-top: 18px; padding: 14px 18px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; }
.flash-success { background: var(--green-light); color: var(--green); border: 1px solid #BFE9D4; }
.flash-error { background: var(--rose-light); color: var(--rose-dark); border: 1px solid var(--rose-border); }
.flash-info { background: var(--violet-50); color: var(--violet-700); border: 1px solid var(--violet-100); }

/* HERO */
.hero {
  min-height: 560px; display: flex; align-items: center; position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, rgba(233, 93, 159, 0.35), transparent 42%),
    radial-gradient(circle at 68% 88%, rgba(244, 197, 66, 0.22), transparent 38%),
    radial-gradient(circle at 8% 92%, rgba(129, 87, 238, 0.30), transparent 45%),
    linear-gradient(115deg, var(--violet-900) 0%, var(--violet-800) 55%, #2C1558 100%);
}
.hero::before { content: ""; position: absolute; width: 430px; height: 430px; border-radius: 50%; background: rgba(233, 93, 159, 0.14); right: -130px; top: -150px; }
.hero::after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: rgba(244, 197, 66, 0.10); right: 15%; bottom: -160px; }
.hero-content { position: relative; z-index: 2; max-width: 720px; color: #fff; padding: 80px 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 8px 13px;
  border-radius: 30px; background: rgba(233, 93, 159, 0.16); border: 1px solid rgba(233, 93, 159, 0.30);
  color: #FFD5E8; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 4px rgba(233, 93, 159, 0.13); }
.hero h1 { font-family: "Poppins", sans-serif; font-size: clamp(38px, 6vw, 66px); line-height: 1.08; letter-spacing: -0.04em; margin-bottom: 22px; text-wrap: balance; }
.hero h1 span { color: #F8B4D1; }
.hero p { max-width: 620px; color: rgba(255, 255, 255, 0.86); font-size: 17px; margin-bottom: 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; }

/* Accueil avec une photo personnalisée (Réglages) : le texte n'est plus posé
   PAR-DESSUS la photo (ça manquait de netteté selon les images) — la photo
   devient une bannière à part entière, affichée en entier sans aucun recadrage,
   et le texte s'affiche juste en dessous, sur fond uni. */
.hero-photo-banner { padding: 34px 0 6px; background: var(--off-white); }
/* Le cadre épouse exactement la photo (largeur 100% du cadre, hauteur automatique
   selon les proportions réelles de l'image) : plus d'espace vide tout autour —
   la photo remplit tout le cadre, sans être ni recadrée ni déformée pour autant. */
.hero-photo-frame {
  position: relative; max-width: 820px; margin: 0 auto; border-radius: 24px;
  overflow: hidden; box-shadow: var(--shadow-lg);
}
.hero-photo-frame img { display: block; width: 100%; height: auto; }
.hero-photo-frame .hero-bubble, .hero-photo-frame .hero-panel { z-index: 2; }
.hero-intro { padding: 52px 0 60px; background: var(--off-white); }
.hero-intro-content { max-width: 720px; margin: 0 auto; text-align: center; }
.hero-intro-content .eyebrow {
  background: var(--violet-100); border-color: var(--violet-100); color: var(--violet-700);
}
.hero-intro-content h1 {
  font-family: "Poppins", sans-serif; font-size: clamp(32px, 5vw, 52px); line-height: 1.12;
  letter-spacing: -0.03em; margin-bottom: 18px; text-wrap: balance; color: var(--heading);
}
.hero-intro-content h1 span { color: var(--rose-dark); }
.hero-intro-content p { max-width: 620px; margin: 0 auto 26px; color: var(--text-light); font-size: 17px; }
.hero-intro-content .hero-actions { justify-content: center; }
.hero-bubble {
  position: absolute; z-index: 2; right: 9%; top: 18%; width: 200px;
  background: rgba(255, 255, 255, 0.97); border-radius: 22px; padding: 22px;
  box-shadow: var(--shadow-lg); transform: rotate(5deg); text-align: center;
}
.hero-bubble::after {
  content: ""; position: absolute; bottom: -14px; left: 44px; width: 0; height: 0;
  border: 15px solid transparent; border-top-color: rgba(255, 255, 255, 0.97); border-bottom: 0;
}
.hero-bubble .bubble-emoji { display: block; font-size: 42px; }
.hero-bubble strong { display: block; margin-top: 8px; font-family: "Poppins", sans-serif; color: var(--violet-900); font-size: 12px; }
.hero-panel {
  position: absolute; z-index: 2; right: 20%; bottom: 12%; width: 130px;
  background: rgba(255, 255, 255, 0.95); border: 3px solid var(--violet-900); border-radius: 14px;
  padding: 14px; text-align: center; transform: rotate(-6deg); box-shadow: var(--shadow-lg);
}
.hero-panel span { font-size: 30px; display: block; }
.hero-panel strong { display: block; margin-top: 6px; font-family: "Poppins", sans-serif; font-size: 11px; color: var(--violet-900); }

/* CARROUSEL D'ACCUEIL (géré depuis l'administration — hero_slides.php) */
.hero-carousel { position: relative; background: var(--off-white); padding: 34px 0 52px; }
.hero-carousel-viewport { position: relative; touch-action: pan-y; }
.hero-carousel-slide { display: none; }
.hero-carousel-slide.active { display: block; animation: heroCarouselFade 0.5s ease; }
@keyframes heroCarouselFade { from { opacity: 0; } to { opacity: 1; } }
.hero-carousel-media {
  position: relative; max-width: 820px; margin: 0 auto; border-radius: 24px; overflow: hidden;
  box-shadow: var(--shadow-lg); aspect-ratio: 16 / 8;
  background: linear-gradient(135deg, var(--violet-900), var(--off-white));
  display: flex; align-items: center; justify-content: center;
}
.hero-carousel-media img { width: 100%; height: 100%; object-fit: contain; }
.hero-carousel-text { max-width: 720px; margin: 26px auto 0; text-align: center; }
.hero-carousel-text h1 {
  font-family: "Poppins", sans-serif; font-size: clamp(28px, 4.5vw, 44px); line-height: 1.15;
  letter-spacing: -0.03em; margin-bottom: 12px; color: var(--heading); text-wrap: balance;
}
.hero-carousel-text p { color: var(--text-light); font-size: 16px; margin-bottom: 16px; }
.hero-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; color: var(--violet-900); border: none; cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.hero-carousel-arrow:hover { background: #fff; }
.hero-carousel-arrow.prev { left: 3%; }
.hero-carousel-arrow.next { right: 3%; }
.hero-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.hero-carousel-dots button {
  width: 9px; height: 9px; border-radius: 50%; background: var(--violet-100); border: none;
  padding: 0; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease;
}
.hero-carousel-dots button.active { background: var(--violet-700); transform: scale(1.3); }
@media (max-width: 650px) {
  .hero-carousel { padding: 22px 0 40px; }
  .hero-carousel-media { border-radius: 16px; aspect-ratio: 4 / 5; }
  .hero-carousel-arrow { width: 36px; height: 36px; font-size: 16px; }
}

/* PROFIL / BIO (page À propos) */
.profile-header { max-width: 640px; margin: 0 auto 46px; text-align: center; }
.profile-avatar {
  width: 92px; height: 92px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 36px; color: #fff; background: linear-gradient(135deg, var(--violet-600), var(--rose)); box-shadow: var(--shadow);
}
.profile-avatar-photo { width: 128px; height: 128px; padding: 0; overflow: hidden; background: var(--off-white); }
.profile-avatar-photo img { width: 100%; height: 100%; object-fit: cover; } /* portrait rond : le recadrage centré reste voulu ici */
.profile-intro { max-width: 760px; margin: 0 auto 55px; }
.profile-intro p { color: var(--text-light); margin-bottom: 16px; }
.profile-intro p:last-child { margin-bottom: 0; }
.cta-signature { margin-top: -12px; font-family: "Poppins", sans-serif; font-weight: 700; color: #fff; }

/* SECTION "À PROPOS" — visuel décoratif + texte, deux colonnes qui s'empilent sur petit écran */
.about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
.about-visual {
  min-height: 420px; position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background:
    radial-gradient(circle at 25% 25%, rgba(233, 93, 159, 0.45), transparent 25%),
    radial-gradient(circle at 75% 75%, rgba(244, 197, 66, 0.30), transparent 28%),
    linear-gradient(145deg, var(--violet-800), var(--violet-900));
  box-shadow: var(--shadow-lg);
}
.about-float-card {
  position: absolute; width: 55%; max-width: 230px; background: rgba(255, 255, 255, 0.96);
  border-radius: 18px; padding: 20px; box-shadow: 0 20px 45px rgba(20, 10, 40, 0.20);
}
.about-float-card.card-1 { left: 10%; top: 15%; transform: rotate(-5deg); }
.about-float-card.card-2 { right: 8%; bottom: 12%; transform: rotate(5deg); width: 44%; max-width: 180px; }
.about-float-card .float-icon { border-radius: 13px; display: grid; place-items: center; margin-bottom: 12px; }
.about-float-card.card-1 .float-icon { height: 125px; font-size: 42px; background: linear-gradient(135deg, var(--violet-100), var(--rose-light)); }
.about-float-card.card-2 .float-icon { height: 95px; font-size: 32px; background: linear-gradient(135deg, var(--gold-light), var(--rose-light)); }
.about-float-card strong { display: block; color: var(--violet-900); font-size: 14px; }
.about-float-card span { color: #746D7E; font-size: 12px; }
.about-text p { color: var(--muted); margin-bottom: 16px; }

/* Dégradés de secours pour les couvertures sans image */
.grad-1 { background: linear-gradient(135deg, var(--violet-600), var(--violet-900)); }
.grad-2 { background: linear-gradient(135deg, var(--rose), var(--violet-700)); }
.grad-3 { background: linear-gradient(135deg, var(--gold), var(--rose-dark)); }
.grad-4 { background: linear-gradient(135deg, var(--violet-500), var(--rose-dark)); }

/* PAGE HEADER (pages internes) */
.page-hero { padding: 60px 0 10px; }
.page-hero .section-title { margin-bottom: 10px; }

/* PAGES LÉGALES (mentions légales, confidentialité) */
.legal-content { max-width: 780px; margin: 0 auto 60px; color: var(--text-light); }
.legal-content h2 {
  font-family: "Poppins", sans-serif; color: var(--heading); font-size: 19px;
  margin: 36px 0 12px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { margin-bottom: 14px; line-height: 1.75; }
.legal-content a { color: var(--link); text-decoration: underline; }
.legal-list { margin: 0 0 16px 20px; }
.legal-list li { margin-bottom: 10px; line-height: 1.7; }
.legal-table { width: 100%; border-collapse: collapse; margin: 10px 0 20px; font-size: 13px; }
.legal-table th, .legal-table td {
  text-align: left; padding: 10px 12px; border: 1px solid var(--border); vertical-align: top;
}
.legal-table th { background: var(--violet-900); color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.legal-table code { background: var(--off-white); padding: 2px 6px; border-radius: 5px; font-size: 12px; }
.legal-updated { margin-top: 30px; font-size: 12px; color: var(--muted); font-style: italic; }
@media (max-width: 650px) {
  .legal-table { font-size: 12px; }
  .legal-table th, .legal-table td { padding: 8px; }
}

/* Sommaire cliquable en haut des longues pages légales (CGU, confidentialité,
   mentions légales, données personnelles) : évite un long défilement à
   l'aveugle pour retrouver une section précise. scroll-margin-top compense le
   header collant (position: sticky) pour que le titre visé ne soit jamais
   masqué juste après le saut d'ancre. */
.legal-content h2 { scroll-margin-top: 90px; }
.legal-toc {
  background: var(--violet-50); border: 1px solid var(--violet-100); border-radius: var(--radius-sm);
  padding: 18px 22px; margin-bottom: 10px;
}
.legal-toc-title {
  font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--violet-800); margin: 0 0 10px;
}
.legal-toc ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 7px 20px; }
.legal-toc li { margin: 0; }
.legal-toc a { color: var(--violet-700); font-size: 14px; font-weight: 600; text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
  padding: 12px 20px; border-radius: 11px; font-size: 14px; font-weight: 700; border: 1px solid transparent;
  cursor: pointer; transition: 0.25s ease;
}
/* .btn fixe déjà "display", ce qui neutraliserait sinon l'attribut
   "hidden" (utilisé par exemple pour masquer "Commencer la lecture"
   quand l'encart "Reprendre la lecture" est affiché à la place). */
.btn[hidden] { display: none; }
.btn-primary { color: var(--violet-900); background: var(--gold); box-shadow: 0 10px 25px rgba(244, 197, 66, 0.22); }
.btn-primary:hover { background: #F7D15D; transform: translateY(-2px); }
.btn-secondary { color: #fff; background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.30); }
.btn-secondary:hover { background: rgba(255, 255, 255, 0.17); transform: translateY(-2px); }
/* Fond propre (et non transparent) volontaire : ce bouton apparaît aussi
   bien directement sur le fond sombre de la page que dans de petits
   encarts restés clairs (ex: ".end-of-story", violet très pâle) — avec son
   propre fond sombre, son texte clair (--link) reste toujours lisible,
   quel que soit l'endroit où il est utilisé. */
.btn-outline { color: var(--link); background: var(--off-white); border-color: var(--border); }
.btn-outline:hover { border-color: var(--violet-500); background: rgba(187, 164, 247, 0.12); }
.btn-danger { color: var(--rose-dark); background: var(--rose-light); border-color: var(--rose-border); }
.btn-danger:hover { background: #F9D7E5; }
.btn-favorite { color: var(--violet-700); background: var(--violet-50); border-color: var(--violet-100); }
.btn-favorite.is-active { color: #fff; background: var(--rose); border-color: var(--rose); }
.btn-sm { min-height: 36px; padding: 8px 14px; font-size: 13px; }
.btn-block { width: 100%; }

/* SECTIONS */
section { padding: 70px 0; }
.section-header { max-width: 700px; margin-bottom: 40px; }
.section-header.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-label { display: inline-block; color: var(--rose-dark); font-size: 12px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 10px; }
.section-title { font-family: "Poppins", sans-serif; font-size: clamp(28px, 4vw, 42px); line-height: 1.15; letter-spacing: -0.03em; color: var(--heading); margin-bottom: 14px; text-wrap: balance; }
.section-description { color: var(--muted); font-size: 16px; }
.light-section { background: var(--off-white); }

/* STATS */
.stats { padding: 26px 0; background: var(--white); border-bottom: 1px solid var(--border); }
/* auto-fit plutôt qu'un nombre de colonnes figé : ces blocs sont désormais
   gérables depuis l'administration (home_features.php), leur nombre peut
   donc varier — la grille s'adapte proprement, que vous en ayez 2, 3 ou davantage. */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 25px; }
.stat { display: flex; align-items: center; gap: 15px; padding: 10px; }
.stat-icon { width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; border-radius: 13px; font-size: 20px; background: var(--violet-100); }
.stat:nth-child(2) .stat-icon { background: var(--rose-light); }
.stat:nth-child(3) .stat-icon { background: var(--gold-light); }
.stat strong { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.stat span { display: block; font-size: 13px; color: var(--muted); }

/* WORK GRID / CARDS */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.filter-chip {
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--white);
  color: var(--text-light); font-size: 13px; font-weight: 700; cursor: pointer;
}
.filter-chip.active, .filter-chip:hover { border-color: var(--violet-500); color: var(--link); background: var(--chip-bg); }
.search-form { display: flex; gap: 10px; margin-bottom: 32px; flex-wrap: wrap; }
.search-form input[type="search"] { flex: 1; min-width: 220px; }

.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.work-card {
  display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: 0.25s ease; height: 100%;
}
.work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #D9CCEA; }
.work-cover {
  height: 220px; background: linear-gradient(135deg, var(--violet-900), var(--rose-dark));
  display: grid; place-items: center; font-size: 44px; overflow: hidden; position: relative;
}
/* object-fit: contain (et non "cover") pour que la couverture s'affiche en entier,
   sans être recadrée — important pour les couvertures au format vertical (BD
   numérique / webtoon) : elle garde ses proportions d'origine, quitte à laisser un
   léger espace de part et d'autre plutôt que de couper le haut/le bas de l'image.
   position:absolute + inset:0 (plutôt qu'un simple width/height:100%) : dans un
   conteneur "display:grid; place-items:center", un pourcentage de hauteur sur
   l'image ne se calcule pas correctement et peut la faire déborder puis se faire
   couper par le "overflow:hidden" du conteneur — l'image semble alors "coupée"
   même avec object-fit:contain. Le positionnement absolu évite ce problème. */
.work-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--off-white); }
.work-type-badge {
  position: absolute; top: 12px; left: 12px; background: rgba(59, 29, 112, 0.85); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em; padding: 5px 10px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px; text-transform: uppercase;
}
.work-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.work-body h3 { font-family: "Poppins", sans-serif; color: var(--heading); font-size: 18px; }
.work-body .work-author { font-size: 13px; color: var(--muted); }
.work-body p.work-desc { color: var(--text-light); font-size: 13px; line-height: 1.6; flex: 1; }
.work-meta { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: auto; padding-top: 10px; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state .empty-icon { font-size: 40px; margin-bottom: 14px; }

/* STORIES (grille "Histoires") */
.stories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Quand il y a moins d'œuvres que de colonnes (catalogue encore jeune), la
   grille à 3 colonnes fixes laisse un vide à droite qui donne une impression
   de page inachevée. Cette classe (ajoutée côté PHP uniquement quand le
   nombre de résultats affichés est inférieur à 3) centre les cartes à leur
   taille naturelle plutôt que de laisser ce vide ; avec 3 résultats ou plus,
   la page n'ajoute pas la classe et la grille normale s'applique. */
.stories-grid.is-few { grid-template-columns: repeat(auto-fit, minmax(260px, 377px)); justify-content: center; }
.story-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: 0.28s ease; display: flex; flex-direction: column; height: 100%;
}
.story-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #D9CCEA; }
/* Agrandie (230px, contre 190px avant) : même logique que .story-detail-cover
   ci-dessous, la couverture est le premier argument visuel d'une carte. */
.story-cover { position: relative; height: 230px; display: grid; place-items: center; font-size: 58px; color: #fff; overflow: hidden; }
/* Idem : contain plutôt que cover, pour ne jamais recadrer une couverture verticale
   (format BD numérique / webtoon type Canva) — l'image entière reste visible.
   position:absolute + inset:0 : voir l'explication détaillée sur .work-cover img. */
.story-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--off-white); }
.type-badge {
  position: absolute; top: 12px; left: 12px; padding: 5px 11px; border-radius: 30px;
  background: rgba(255, 255, 255, 0.92); color: var(--violet-800); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.story-card-body { padding: 20px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.story-card-body h3 { font-family: "Poppins", sans-serif; color: var(--heading); font-size: 17px; margin-bottom: 5px; }
.genre-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.genre-tag { padding: 4px 10px; border-radius: 30px; background: var(--violet-100); color: var(--violet-700); font-size: 11px; font-weight: 700; }
.story-teaser {
  color: var(--muted); font-size: 13px; line-height: 1.6; margin-bottom: 14px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.story-meta { display: flex; gap: 16px; color: var(--muted); font-size: 12px; font-weight: 600; margin-top: auto; }

/* ACCUEIL : "Mes dernières publications" (3 colonnes par type d'œuvre) */
.latest-works-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.latest-works-column-header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.latest-works-column-header h3 { font-family: "Poppins", sans-serif; color: var(--heading); font-size: 16px; }
.latest-works-column-header a { color: var(--link); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.latest-works-column-header a:hover { color: var(--link); }
.latest-works-list { display: flex; flex-direction: column; gap: 14px; }
.latest-work-card {
  display: flex; gap: 12px; align-items: flex-start; padding: 8px; border-radius: var(--radius-sm);
  transition: background 0.2s ease;
}
.latest-work-card:hover { background: var(--chip-bg); }
/* Agrandie (84×108px, contre 56×72px avant, même ratio 7:9) : ces vignettes
   étaient trop petites pour un site où le visuel est l'argument principal —
   voir l'audit design/UX d'octobre 2026, section Accueil. */
.latest-work-cover {
  flex-shrink: 0; width: 84px; height: 108px; border-radius: 10px; overflow: hidden; position: relative;
  display: grid; place-items: center; font-size: 30px; color: #fff;
}
.latest-work-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.latest-work-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.latest-work-body strong { font-family: "Poppins", sans-serif; color: var(--heading); font-size: 14px; }
.latest-work-body span {
  color: var(--muted); font-size: 12.5px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ACCUEIL : mot personnel de la propriétaire, juste après le bandeau principal.
   Rendu volontairement chaleureux (dégradé doux, grand guillemet décoratif en
   filigrane, lien transformé en petite pastille) mais sans rien ajouter qui
   nuise à la lisibilité : le dégradé reste très doux, le guillemet est en très
   faible opacité et purement décoratif (::before, jamais lu par un lecteur
   d'écran), et le texte lui-même garde exactement les mêmes couleurs de
   contraste qu'avant. */
.creator-note { padding: 10px 0 36px; }
.creator-note-card {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 28px;
  background: linear-gradient(135deg, var(--chip-bg), rgba(244, 197, 66, 0.07) 60%, var(--chip-bg));
  border: 1px solid var(--chip-border); border-radius: var(--radius-lg); padding: 32px 38px;
  box-shadow: var(--shadow-sm); transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.creator-note-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.creator-note-card::before {
  content: "\201C"; position: absolute; top: -38px; right: 22px; font-family: Georgia, "Times New Roman", serif;
  font-size: 170px; line-height: 1; color: var(--rose); opacity: 0.09; pointer-events: none;
}
.creator-note-avatar {
  flex-shrink: 0; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  font-size: 34px; color: #fff; background: linear-gradient(135deg, var(--violet-600), var(--rose));
  box-shadow: var(--shadow), 0 0 0 5px rgba(244, 197, 66, 0.16);
}
.creator-note-avatar-photo { padding: 0; overflow: hidden; background: var(--off-white); }
.creator-note-avatar-photo img { width: 100%; height: 100%; object-fit: cover; }
.creator-note-body { position: relative; min-width: 0; }
.creator-note-greeting {
  font-family: "Poppins", sans-serif; color: var(--heading); font-weight: 700; font-size: 16px; margin-bottom: 8px;
}
.creator-note-text { color: var(--text-light); font-size: 14.5px; line-height: 1.7; margin-bottom: 16px; }
.creator-note-link {
  display: inline-flex; align-items: center; gap: 6px; color: var(--link); font-weight: 700; font-size: 13.5px;
  white-space: nowrap; background: var(--chip-bg); border: 1px solid var(--chip-border); border-radius: 999px;
  padding: 8px 16px; transition: transform 0.2s ease, background 0.2s ease;
}
.creator-note-link:hover { color: var(--link); background: var(--chip-border); transform: translateX(2px); }

/* ACCUEIL : message "Ravi de vous revoir" (visiteurs connectés uniquement) */
.welcome-back-wrap { margin: -6px 0 28px; }
.welcome-back {
  display: inline-flex; align-items: center; gap: 8px; background: var(--violet-100); color: var(--violet-900);
  font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 999px;
}
.welcome-back strong { font-family: "Poppins", sans-serif; }

/* ACCUEIL : appel à créer un compte gratuit (visiteurs non connectés uniquement) */
.signup-cta-card {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  background: linear-gradient(135deg, var(--violet-50), var(--rose-light) 180%);
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 42px 46px; box-shadow: var(--shadow-sm);
}
.signup-cta-text { max-width: 540px; }
.signup-cta-text h2 {
  font-family: "Poppins", sans-serif; font-size: clamp(22px, 3vw, 28px); color: var(--violet-900);
  margin: 6px 0 12px; line-height: 1.2;
}
/* Carte volontairement claire (voir .end-of-story plus bas) : #4F4859 est
   l'ancienne valeur de --text-light pour fond clair, écrite en dur ici car
   ce jeton désigne désormais le texte clair-sur-fond-sombre. */
.signup-cta-text p { color: #4F4859; font-size: 14.5px; line-height: 1.65; margin-bottom: 20px; }
.signup-cta-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.signup-cta-login { color: var(--violet-700); font-weight: 700; font-size: 13.5px; }
.signup-cta-login:hover { color: var(--violet-900); }
.signup-cta-perks { display: flex; flex-direction: column; gap: 14px; flex-shrink: 0; }
.signup-cta-perk {
  /* Pastille blanche volontairement littérale (et non var(--white), devenu
     sombre) : petite puce claire posée sur la carte, elle-même restée claire. */
  display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px;
  padding: 10px 18px; font-size: 13.5px; font-weight: 600; color: var(--violet-900); box-shadow: var(--shadow-sm); white-space: nowrap;
}
.signup-cta-perk-icon { font-size: 16px; }

.back-link {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent;
  color: var(--link); font-weight: 700; font-size: 14px; margin-bottom: 30px;
}
.back-link:hover { color: var(--link); }

/* FICHE HISTOIRE */
/* Couverture agrandie (300px et 380px de haut, contre 220px/220px avant) :
   sur une fiche dédiée à une seule œuvre, le visuel est l'argument de vente
   numéro un — voir l'audit design/UX d'octobre 2026. */
.story-detail-header { display: grid; grid-template-columns: 300px 1fr; gap: 40px; margin-bottom: 45px; }
.story-detail-cover {
  position: relative; height: 380px; border-radius: var(--radius); display: grid; place-items: center; font-size: 78px;
  color: #fff; box-shadow: var(--shadow-lg); overflow: hidden;
}
/* Idem : contain plutôt que cover, pour ne jamais recadrer une couverture verticale.
   position:absolute + inset:0 : voir l'explication détaillée sur .work-cover img. */
.story-detail-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--off-white); }
.story-detail-info h1 { font-family: "Poppins", sans-serif; color: var(--heading); font-size: clamp(24px, 3vw, 34px); margin: 4px 0 12px; text-wrap: balance; }
.story-detail-synopsis { color: var(--text-light); margin-bottom: 16px; max-width: 65ch; }
.story-detail-stats { display: flex; gap: 20px; color: var(--muted); font-size: 13px; font-weight: 700; }

.episodes-list { display: flex; flex-direction: column; gap: 10px; }
.episode-row {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px 20px; border-radius: var(--radius-sm);
  background: var(--white); border: 1px solid var(--border); transition: 0.22s ease;
}
.episode-row:hover { border-color: var(--violet-500); background: var(--chip-bg); }
.episode-number { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--violet-100); color: var(--violet-700); font-size: 12px; font-weight: 800; }
.episode-title { flex: 1; color: var(--text); font-weight: 600; font-size: 14px; }
.episode-stats { color: var(--muted); font-size: 12px; white-space: nowrap; }
.episode-arrow { color: var(--link); font-weight: 800; }

/* LECTEUR D'ÉPISODE */
.reader-header { margin-bottom: 24px; text-align: center; }
.reader-header span { display: block; color: var(--rose-dark); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.reader-header h1 { font-family: "Poppins", sans-serif; color: var(--heading); font-size: clamp(22px, 3vw, 30px); text-wrap: balance; }
.reader-note { color: var(--muted); font-size: 13px; margin-bottom: 30px; text-align: center; }
.like-button {
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 30px;
  border: 1px solid var(--border); background: var(--white); color: var(--text); font-weight: 700; font-size: 14px;
  cursor: pointer; transition: 0.22s ease; margin: 30px auto 40px; display: flex; width: fit-content;
}
.like-button:hover { border-color: var(--rose); }
.like-button.liked { background: var(--rose-light); border-color: var(--rose); color: var(--rose-dark); }

/* COMMENTAIRES (nouveau format, sans compte requis) */
.comments-section h2 { font-family: "Poppins", sans-serif; color: var(--heading); font-size: 20px; margin-bottom: 20px; }
.comment-form { display: grid; gap: 10px; margin-bottom: 30px; max-width: 520px; }
.comments-list { display: flex; flex-direction: column; gap: 18px; max-width: 640px; }
.comment { display: flex; gap: 14px; }
.comment strong { display: inline-block; color: var(--heading); font-size: 13px; margin-bottom: 3px; }
.comment .comment-date { display: inline-block; color: var(--muted); font-size: 12px; font-weight: 400; margin-left: 8px; margin-bottom: 3px; }
.comment p { color: var(--text-light); font-size: 14px; }
.no-comments { color: var(--muted); font-size: 14px; }
.comment-image { display: block; max-width: 100%; max-height: 320px; width: auto; border-radius: 10px; margin-top: 8px; }

/*
 * Composeur de commentaire compact : la zone de texte et une barre d'outils
 * discrète en bas (petites icônes emoji / image + bouton "Publier"). Rien
 * n'est jamais affiché en permanence au-dessus du champ de texte — c'est le
 * point qui posait problème dans l'ancienne version (sélecteur d'emoji
 * coincé ouvert). Tous les panneaux (popover emoji, aperçu d'image) sont
 * fermés/masqués par défaut et ne s'affichent qu'au clic, sans jamais
 * déplacer ni recouvrir le reste de la page.
 */
.comment-composer {
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--off-white);
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.comment-composer textarea {
  width: 100%; min-height: 70px; border: none; background: transparent; padding: 4px 2px;
  resize: vertical;
}
.comment-composer textarea:focus { background: transparent; }
.comment-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.comment-toolbar-tools { display: flex; align-items: center; gap: 6px; }
.comment-tool-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--white);
  cursor: pointer; font-size: 16px; display: grid; place-items: center; flex-shrink: 0; padding: 0;
  color: var(--text); line-height: 1;
}
.comment-tool-btn:hover { border-color: var(--violet-500); }
.comment-submit { padding: 8px 18px; font-size: 13px; }

/* Bouton image : une icône ronde comme le bouton emoji, avec le vrai
   <input type="file"> masqué visuellement à l'intérieur (association native
   label/input, donc aucun script n'est nécessaire pour ouvrir le sélecteur
   de fichier). */
.comment-image-btn { position: relative; }
.comment-image-btn input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Popover du sélecteur d'emoji : masqué par défaut (attribut HTML "hidden"),
   ancré à sa petite icône, ne s'ouvre qu'au clic et ne déplace jamais le
   reste de la page. Largeur bornée à la largeur de l'écran pour ne jamais
   déborder sur mobile. */
.comment-emoji-wrap { position: relative; }
.comment-emoji-popover {
  position: absolute; bottom: 42px; left: 0; z-index: 5; width: min(300px, calc(100vw - 40px));
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: 10px; max-height: min(220px, 45vh); display: flex; flex-direction: column; gap: 8px;
}
.comment-emoji-popover[hidden] { display: none; }
.comment-emoji-search {
  width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border);
  font-size: 13px; background: var(--off-white);
}
.comment-emoji-list { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.comment-emoji-category[hidden] { display: none; }
.comment-emoji-category-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 4px; }
.comment-emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.comment-emoji-option {
  width: 32px; height: 32px; border: none; background: transparent; font-size: 18px; cursor: pointer; border-radius: 6px;
}
.comment-emoji-option:hover { background: var(--chip-bg); }
.comment-emoji-option[hidden] { display: none; }
.comment-emoji-empty { font-size: 13px; color: var(--muted); text-align: center; padding: 10px 0; }
.comment-emoji-empty[hidden] { display: none; }

/* Aperçu de l'image jointe avant publication, avec un bouton pour la
   retirer sans avoir à recharger le formulaire. Masqué par défaut. */
.comment-image-preview { position: relative; display: inline-block; max-width: 160px; }
.comment-image-preview[hidden] { display: none; }
.comment-image-preview img { display: block; max-width: 100%; max-height: 140px; border-radius: 8px; border: 1px solid var(--border); }
.comment-image-remove {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--white); cursor: pointer; font-size: 12px; line-height: 1;
  display: grid; place-items: center; color: var(--text);
}
.comment-image-remove:hover { border-color: var(--rose); color: var(--rose-dark); }

@media (max-width: 650px) {
  /* Sur petit écran, le popover reste entièrement visible et ne déborde
     jamais du viewport ni ne recouvre les boutons de la barre d'outils. */
  .comment-emoji-popover { max-height: min(200px, 40vh); }
}

/* Variante du popover d'emoji (mêmes classes .comment-emoji-* que dans le
   formulaire de commentaire, réutilisées telles quelles) pour le champ
   "Icône" du formulaire admin "Univers Sherlood" : ce champ est en haut de
   page, donc le popover s'ouvre VERS LE BAS plutôt que vers le haut. */
.comment-emoji-popover.popover-below { bottom: auto; top: calc(100% + 6px); }

/* Champ icône + bouton "choisir un emoji" côte à côte : le bouton rond
   (.comment-tool-btn, réutilisé) affiche l'emoji actuellement choisi et sert
   d'aperçu en plus d'ouvrir le sélecteur.
   Le popover est ancré au conteneur ENTIER (.home-feature-icon-field, pleine
   largeur du champ) plutôt qu'au petit bouton rond situé à sa droite
   (.comment-emoji-wrap, repassé ici en position statique) : ancré au bouton,
   un popover de 300px déborderait hors de l'écran sur mobile puisque ce
   bouton est lui-même près du bord droit du champ. */
.home-feature-icon-field { position: relative; display: flex; align-items: center; gap: 8px; }
.home-feature-icon-field input[type="text"] { flex: 1 1 auto; width: auto; }
.home-feature-icon-field .comment-tool-btn { font-size: 18px; }
.home-feature-icon-field .comment-emoji-wrap { position: static; }
.home-feature-icon-field .comment-emoji-popover.popover-below { left: 0; right: auto; }

/* ILLUSTRATIONS */
.illustrations-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* Même principe que .stories-grid.is-few ci-dessus : évite un vide à droite
   quand il y a moins d'illustrations que de colonnes. */
.illustrations-grid.is-few { grid-template-columns: repeat(auto-fit, minmax(180px, 281px)); justify-content: center; }
.illustration-tile {
  position: relative; aspect-ratio: 1; border-radius: var(--radius); border: 0; display: grid; place-items: center;
  font-size: 40px; cursor: pointer; overflow: hidden; box-shadow: var(--shadow-sm); transition: 0.28s ease; color: #fff;
}
.illustration-tile img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.illustration-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.illustration-overlay {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  padding: 14px; background: linear-gradient(0deg, rgba(20, 10, 40, 0.65), transparent 60%); opacity: 0; transition: 0.25s ease;
  text-align: left; color: #fff;
}
.illustration-tile:hover .illustration-overlay { opacity: 1; }
.illustration-overlay strong { font-size: 13px; }
.illustration-overlay span { font-size: 11px; opacity: 0.85; }
.illustration-note { margin-top: 30px; color: var(--muted); font-size: 13px; }

/* Visionneuse plein écran des illustrations : l'image occupe presque tout
   l'écran (jamais un simple encart), n'est jamais recadrée, et n'est
   jamais recouverte par le titre ou les boutons — la légende et les
   boutons vivent chacun dans leur propre zone, entièrement séparée de la
   zone réservée à l'image (voir .lightbox-stage / .lightbox-caption
   ci-dessous), quelle que soit la taille ou le format de l'image. Un
   zoom (clic/molette/pincement) permet en plus de voir le détail d'une
   image plus grande que l'écran une fois affichée en entier. */
.lightbox {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column;
  background: rgba(10, 5, 22, 0.95);
}
.lightbox[hidden] { display: none; }

/* Zone de l'image : prend tout l'espace restant une fois la légende
   retirée (flex: 1 1 auto), avec juste assez de marge en haut pour ne
   jamais passer sous le bouton de fermeture. */
.lightbox-stage {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 64px 16px 10px;
  overflow: hidden;
  touch-action: none; /* le geste de pincement/glissement est géré nous-mêmes */
}
/* height (et pas seulement max-height) et display:flex (plutôt que
   grid) : nécessaires pour que le pourcentage "max-height: 100%" de
   l'image ci-dessous se calcule par rapport à une hauteur bien définie
   plutôt que d'être ignoré (une boîte centrée sans hauteur explicite —
   ou une "cellule" de grille dimensionnée par son contenu — n'a pas de
   hauteur "définie" au sens CSS), ce qui laissait auparavant l'image
   s'afficher bien plus grande que l'écran (seulement masquée par
   "overflow: hidden", jamais réellement limitée). */
.lightbox-visual { max-width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.lightbox-visual.is-placeholder {
  width: min(90vw, 520px); height: auto; max-height: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--violet-700), var(--violet-900));
  font-size: 90px; color: #fff;
}
.lightbox-visual img {
  max-width: 96vw; max-height: 100%; width: auto; height: auto; object-fit: contain;
  cursor: zoom-in; transform-origin: center center; transition: transform 0.25s ease;
  touch-action: none; user-select: none; -webkit-user-drag: none;
}
.lightbox-visual img.is-zoomed { cursor: grab; }
.lightbox-visual img.is-dragging { cursor: grabbing; transition: none; }

/* Bande dédiée à la légende, sous l'image : sa hauteur est toujours
   retirée de la zone de l'image ci-dessus, donc le texte ne peut
   structurellement jamais chevaucher l'image. */
.lightbox-caption {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 10px 66px 16px; text-align: center;
}
.lightbox-caption-text { min-width: 0; }
.lightbox-caption strong { display: block; color: #fff; font-family: "Poppins", sans-serif; font-size: 15px; margin-bottom: 2px; }
.lightbox-caption span { color: rgba(255, 255, 255, 0.68); font-size: 12px; }

.lightbox-close, .lightbox-zoom-toggle {
  position: fixed; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer;
  display: grid; place-items: center; z-index: 2010;
  transition: background 0.2s ease; flex-shrink: 0;
}
.lightbox-close:hover, .lightbox-close:focus-visible,
.lightbox-zoom-toggle:hover, .lightbox-zoom-toggle:focus-visible { background: rgba(255, 255, 255, 0.3); }
.lightbox-close { top: 16px; right: 16px; font-size: 19px; font-weight: 800; }
.lightbox-zoom-toggle { bottom: 18px; right: 16px; font-size: 18px; }
.lightbox-zoom-toggle[hidden] { display: none; }

@media (max-width: 650px) {
  .lightbox-stage { padding: 58px 6px 6px; }
  .lightbox-caption { padding: 8px 60px 14px; }
}

/* PAGINATION */
.pagination { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }

/* CARDS (features) */
/* auto-fit plutôt que 3 colonnes fixes : ce bloc est alimenté depuis
   Administration > Accueil (L'univers Sherlood), où 2, 3 ou 4+ blocs peuvent
   être ajoutés — la grille s'adapte sans jamais laisser un bloc isolé mal aligné. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); transition: 0.28s ease; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #D9CCEA; }
.card-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; background: var(--violet-100); font-size: 22px; margin-bottom: 18px; transition: transform 0.28s ease; }
.card:nth-child(2) .card-icon { background: var(--rose-light); }
.card:nth-child(3) .card-icon { background: var(--gold-light); }
.card:hover .card-icon { transform: scale(1.08) rotate(-4deg); }
.card h3 { font-family: "Poppins", sans-serif; color: var(--heading); font-size: 19px; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 14px; line-height: 1.7; }

/* ANIMATIONS AU DÉFILEMENT (discrètes) --------------------------------- */
/* Classe optionnelle posée sur un bloc pour qu'il apparaisse en douceur
   (fondu + léger glissement) quand il entre dans l'écran, au lieu d'être
   visible d'un coup au chargement (voir le script dans includes/footer.php).
   Si JavaScript est désactivé, le <noscript> dans includes/header.php
   annule cette règle pour que le contenu reste normalement visible : rien
   ne doit jamais rester caché. */
.reveal-on-scroll { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
}

/* WORK DETAIL PAGE */
.work-detail { display: grid; grid-template-columns: 320px 1fr; gap: 44px; align-items: start; }
.work-detail-cover {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  background: linear-gradient(135deg, var(--violet-800), var(--violet-900)); min-height: 420px;
  display: grid; place-items: center; font-size: 60px; color: rgba(255,255,255,0.7);
}
.work-detail-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.work-detail-info .type-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--violet-100); color: var(--violet-700); font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 14px;
}
.work-detail-info h1 { font-family: "Poppins", sans-serif; font-size: clamp(28px, 4vw, 40px); color: var(--heading); margin-bottom: 8px; text-wrap: balance; }
.work-detail-info .work-author-line { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.work-detail-info .work-description { color: var(--text-light); margin-bottom: 24px; max-width: 65ch; }
.work-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }

.chapter-list { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.chapter-list li { border-bottom: 1px solid var(--border); }
.chapter-list a {
  display: flex; align-items: center; justify-content: space-between; padding: 16px 4px; gap: 16px;
}
.chapter-list a:hover { color: var(--link); }
.chapter-list .chapter-num { font-weight: 800; color: var(--link); min-width: 70px; }
.chapter-list .chapter-title-text { flex: 1; color: var(--text); font-weight: 600; }
.chapter-list .chapter-date { color: var(--muted); font-size: 13px; }

/* CHAPTER READER */
.reader-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); margin-bottom: 30px; flex-wrap: wrap; }
.reader-nav .reader-title { text-align: center; flex: 1; min-width: 200px; }
.reader-nav .reader-title strong { display: block; color: var(--heading); font-family: "Poppins", sans-serif; }
.reader-nav .reader-title span { font-size: 13px; color: var(--muted); }
.reader-text {
  /* 17px ("Normal") : taille par défaut du lecteur paginé (voir
     DEFAULT_FONT_SIZE dans chapter.php) — gardée identique ici pour le
     tout premier affichage avant que le script de pagination ne
     s'exécute, et pour tout contexte sans JavaScript. */
  max-width: 68ch; margin: 0 auto; font-size: 17px; color: var(--text);
  /* Interligne réglable par chapitre (voir chapter_rich_style_vars() et
     l'éditeur de roman) — "1" (Simple) par défaut si le chapitre n'a pas
     encore ce réglage (1,5 avant cette mise à jour, puis 1,85 avant elle :
     signalé comme encore trop aéré entre les lignes d'un même paragraphe).
     Ce repli CSS n'intervient en pratique jamais (chapter_rich_style_vars()
     pose toujours la variable ci-dessus), gardé ici uniquement identique
     à ce repli pour ne jamais afficher deux valeurs par défaut
     différentes. */
  line-height: var(--chapter-line-height, 1);
}
/* Espace avant/après paragraphe réglable par chapitre, comme dans Word —
   4pt par défaut si absent (8pt avant cette mise à jour) : un léger
   espace, volontairement conservé entre deux paragraphes (contrairement à
   l'interligne ci-dessus, désormais réduit à rien à l'intérieur d'un même
   paragraphe) pour continuer à bien les distinguer l'un de l'autre, sans
   pour autant l'espace généreux d'avant, signalé comme trop important.
   Pas d'espace "avant" au tout premier paragraphe (juste sous le titre du
   chapitre), ni "après" au dernier, quel que soit le réglage choisi. */
.reader-text p { margin: var(--chapter-space-before, 0) 0 var(--chapter-space-after, 4pt); }
.reader-text p:first-child { margin-top: 0; }
.reader-text p:last-child { margin-bottom: 0; }
/* Titres/sous-titres insérés dans le texte d'un chapitre (voir les boutons
   "T1"/"T2" de l'éditeur) : une mise en forme dédiée, distincte du corps du
   texte, indépendante du réglage d'espacement des paragraphes ci-dessus. */
.reader-text h2, .reader-text h3 {
  font-family: "Poppins", sans-serif; color: var(--heading); line-height: 1.3;
  margin: 1.4em 0 0.6em;
}
.reader-text h2 { font-size: 1.5em; }
.reader-text h3 { font-size: 1.2em; }
.reader-text h2:first-child, .reader-text h3:first-child { margin-top: 0; }
/* Ancien texte brut (avant l'éditeur de texte enrichi) : pas de balises, la
   mise en page ne tient qu'aux retours à la ligne tapés au clavier — on les
   restitue donc exactement tels quels (un retour = un retour, une ligne
   vide = une ligne vide), sans jamais les doubler. */
.reader-text--plain { white-space: pre-wrap; }
/* Réglage de la taille du texte par le lecteur (voir chapter.php) : une
   petite rangée de boutons discrète, au-dessus du livre, jamais intrusive. */
.reader-font-controls { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 68ch; margin: 0 auto 16px; }
.reader-font-label { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 2px; }
.reader-font-btn {
  width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--white); color: var(--link); font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: 0.2s ease; padding: 0;
}
.reader-font-btn:hover:not(:disabled) { background: var(--chip-bg); border-color: var(--violet-500); }
.reader-font-btn:disabled { opacity: 0.35; cursor: default; }
#readerFontDecrease { font-size: 12px; }
#readerFontIncrease { font-size: 16px; }
#readerFontReset { font-size: 14px; }
/* gap: 0 (et coins non arrondis sur les planches, voir plus bas) pour un défilement
   continu façon webtoon, sans ligne blanche ni coin visible entre deux planches
   consécutives — utile quand les planches sont pensées pour s'enchaîner. */
.reader-panels { display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 720px; margin: 0 auto; width: 100%; }
/* Chaque planche s'affiche entière, à sa hauteur naturelle (pas de recadrage, pas de
   hauteur maximale, pas de déformation) : seule la largeur est limitée pour tenir
   dans la colonne de lecture, quel que soit le nombre de planches du chapitre. */
.reader-panels img { display: block; width: 100%; height: auto; max-width: 100%; }

/* Utilitaire d'accessibilité : garde un contenu lisible par les lecteurs
   d'écran tout en le retirant visuellement (jamais "display:none", qui le
   retirerait aussi de l'arbre d'accessibilité). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------
   LECTEUR DE ROMAN — défilement VERTICAL avec pages séparées visuellement
   ("façon livre"), voir chapter.php.
   #readerSource (.reader-text, déjà stylé ci-dessus) reste la référence
   accessible : une fois le lecteur paginé construit, il devient une copie
   invisible réservée aux lecteurs d'écran (.sr-only) — le texte affiché à
   l'écran, empilé en pages, est un ensemble de COPIES indépendantes de ce
   même contenu (une par page, marquées aria-hidden), chacune cadrée sur sa
   portion grâce à la même technique de colonnes CSS qu'avant (le navigateur
   calcule toujours seul la coupure des pages, sans aucun calcul de texte en
   JavaScript). Si le script échoue ou si JavaScript est désactivé,
   #readerSource reste affiché normalement (défilement classique) : ce bloc
   n'a alors aucun effet visible.
--------------------------------------------------------------- */
.book-reader-room {
  background: linear-gradient(180deg, var(--off-white), var(--white) 65%);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 4vw, 40px) 0 28px;
  margin-bottom: 34px;
}
.book-reader { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.book-crumb { text-align: center; color: var(--muted); font-size: 13px; }
.book-crumb strong { color: var(--heading); }

/* Barre de progression discrète : reflète la position de défilement réelle
   dans l'ensemble du chapitre (pas seulement le numéro de page), donc reste
   fiable même si la pagination change (taille de texte, fenêtre...). */
.book-progress-track {
  width: 100%; max-width: var(--book-w, 480px); height: 4px; border-radius: 4px;
  background: var(--border); overflow: hidden;
}
.book-progress-fill {
  height: 100%; width: 0; border-radius: 4px; transition: width .2s ease;
  background: linear-gradient(90deg, var(--violet-600), var(--rose));
}

/* Empilement vertical des pages : l'utilisateur descend simplement d'une
   page à l'autre en faisant défiler l'écran, jamais de balayage horizontal
   ni de bouton "page suivante" obligatoire. */
.book-pages {
  display: flex; flex-direction: column; align-items: center;
  /* Espace réduit par rapport à l'origine (22-40px) : reste visible et clair
     entre deux pages, sans jamais les coller l'une à l'autre. */
  gap: clamp(14px, 2.4vw, 24px); width: 100%;
}
.book-page {
  position: relative; background: var(--white); border-radius: 6px;
  box-shadow: var(--shadow-lg); border: 1px solid var(--border);
  width: var(--book-w, 480px); height: var(--book-h, 679px);
  flex-shrink: 0; overflow: hidden;
  /* Laisse un peu d'air sous l'en-tête du site (qui peut rester visible en
     haut de l'écran) quand on saute directement à cette page. */
  scroll-margin-top: 84px;
}
.book-page-margins {
  position: absolute; inset: 0; overflow: hidden; box-sizing: border-box;
  /* Marge basse fixe volontairement réduite (30px à l'origine) : signalé
     par un lecteur, le numéro de page semblait "remonté", trop loin du
     bord bas réel de la page. Le numéro (voir .book-page-number
     ci-dessous, avec son "margin-top: auto") reste toujours collé juste
     au-dessus de CETTE marge, quelle que soit sa propre hauteur : la
     réduire le rapproche donc visuellement du bord bas de la page, sans
     toucher au calcul de la hauteur de page (--book-h), entièrement
     piloté par computeSize() dans chapter.php. */
  padding: var(--book-pad-y, 44px) var(--book-pad-x, 40px) 16px;
  display: flex; flex-direction: column;
}
/* flex-grow reste à 1 par défaut ici : computeSize() (chapter.php) s'appuie
   dessus pour mesurer, à un instant précis, la hauteur "naturelle" (espace
   disponible rempli) de cette zone avant de fixer la hauteur définitive en
   pixels. Juste après avoir posé cette hauteur définitive, le même
   JavaScript neutralise ce flex-grow (voir le commentaire détaillé dans
   buildPageShells()) pour que la zone respecte alors exactement cette
   valeur plutôt que de continuer à s'étirer. */
.book-page-viewport { flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative; }
/* La copie du texte propre à cette page (voir mountPage() dans chapter.php)
   est décalée horizontalement pour ne montrer que sa portion — jamais
   animée (ces copies ne bougent pas, c'est la fenêtre qui défile
   verticalement autour d'elles). */
.book-page-clone { height: 100%; }
.book-page-number {
  flex: 0 0 auto; text-align: center; padding-top: 8px;
  font-family: "Poppins", sans-serif; font-size: 13px; color: var(--muted); font-weight: 600;
  /* "margin-top: auto" (astuce flexbox classique) : absorbe tout l'espace
     restant éventuel entre le texte et ce numéro, pour que ce dernier
     reste TOUJOURS collé juste au-dessus de la marge basse fixe (voir
     .book-page-margins), quelle que soit sa position exacte. Sans cette
     ligne, un petit reliquat d'espace (moins d'une ligne de texte : .book-
     page-viewport n'occupe jamais une hauteur plus grande qu'un multiple
     ENTIER de ligne, voir computeSize() dans chapter.php) se serait
     retrouvé flottant SOUS le numéro, entre lui et le bord bas de la page
     — annulant en partie le rapprochement voulu ci-dessous. */
  margin-top: auto;
}
/* column-fill:auto est la clé de toute la pagination : plutôt que
   d'équilibrer le texte entre colonnes (comportement par défaut), le
   navigateur REMPLIT chaque colonne à la hauteur disponible avant de passer
   à la suivante — chaque colonne devient ainsi une vraie "page" de longueur
   fixe, calculée nativement par le moteur de rendu à partir de la mise en
   forme réelle (gras, italique, titres, alignement...), sans le moindre
   calcul JavaScript de mise en page. */
.book-columns {
  height: 100%; column-fill: auto; column-gap: 0;
  column-width: var(--book-col-w, 400px);
  -webkit-column-fill: auto; -webkit-column-gap: 0;
  -webkit-column-width: var(--book-col-w, 400px);
  /* #readerSource porte aussi la classe .reader-text, qui impose
     `max-width: 68ch; margin: 0 auto;` pour l'affichage classique en
     défilement (utile là-bas pour garder une ligne de lecture confortable).
     Une fois basculé en mode paginé, cette limite doit être désactivée :
     la largeur de colonne est déjà calculée pour rester confortable (voir
     computeSize() dans chapter.php) : cette classe n'a donc plus besoin de
     sa propre limite. */
  max-width: none; margin: 0;
}
/* Signalé par un lecteur : un alignement "Justifié" (choisi dans l'éditeur
   de texte enrichi pour un chapitre, ou hérité d'un document Word importé
   tel quel) étire les espaces entre les mots pour que chaque ligne touche
   pile les deux bords — un rendu correct sur une page large avec
   césure automatique, mais qui devient vite inégal et peu soigné dans une
   colonne de texte étroite SANS césure (le cas de ce lecteur "façon livre"
   sur téléphone) : certains espaces entre les mots paraissent alors
   nettement plus grands que d'autres sur une même ligne. On neutralise donc
   ici cet alignement uniquement dans les pages du livre (jamais dans
   l'éditeur ni dans l'affichage classique en défilement, qui gardent le
   choix de l'auteur), en alignement à gauche classique, bien plus net et
   régulier à cette largeur. Seul l'alignement "Justifié" est ciblé
   (sélecteur sur le mot "justify" dans le style en ligne du paragraphe) :
   un paragraphe volontairement centré ou aligné à droite (ex. un
   séparateur de scène "* * *") n'est pas affecté. */
.book-columns p[style*="justify" i] { text-align: left !important; }
/* IMPORTANT (optimisation de l'espace des pages) : un paragraphe peut
   désormais se couper entre deux pages, exactement comme dans un vrai livre
   imprimé — ce n'est pas un retour en arrière sur le bug corrigé plus tôt
   ("la dernière ligne d'une page n'est plus jamais coupée", voir section 23
   du guide) : CETTE coupure-là concernait une ligne de texte tronquée EN
   PLEIN MILIEU, verticalement, par la zone visible de la page. Elle a été
   réglée en calant la hauteur de chaque page sur un multiple ENTIER de la
   hauteur de ligne (voir computeSize() dans chapter.php), ce qui garantit
   qu'une page s'arrête toujours exactement À LA FIN d'une ligne complète,
   jamais au milieu. Une fois cette garantie en place, empêcher en plus un
   paragraphe de se couper entre deux pages n'apportait plus aucune
   protection supplémentaire — seulement un gros espace vide inutile en bas
   de page dès qu'un paragraphe ne tenait pas en entier dans la place
   restante (signalé par un lecteur). Un titre (h2/h3), lui, reste protégé :
   il est toujours gardé entier et jamais laissé seul en bas d'une page sans
   le début de son propre texte juste en dessous. Même protection pour un
   paragraphe "nom de personnage/lieu" en gras+italique (ex. "ANIS",
   "RAYMOND") : ce n'est pas un vrai titre (balise h2/h3), seulement une
   mise en forme gras+italique posée via les boutons G/I de l'éditeur, donc
   non couvert par le sélecteur ci-dessus — la classe .book-heading-like,
   posée par markPseudoHeadings() dans chapter.php juste avant la
   pagination, cible précisément ces paragraphes-là (et seulement eux :
   jamais un paragraphe de texte normal contenant, en plus, une phrase en
   gras+italique). Signalé par un lecteur comme peu professionnel : ce nom
   se retrouvait seul en bas d'une page, son propre texte reporté en entier
   à la page suivante. */
.book-columns h2, .book-columns h3, .book-columns p.book-heading-like { break-inside: avoid-column; break-after: avoid-column; }
/* Support de mesure invisible (jamais affiché ni exposé aux lecteurs
   d'écran) : sert uniquement à calculer la largeur de colonne réelle et le
   nombre de pages — voir computeSize()/measurePages() dans chapter.php. */
.book-probe { position: absolute; left: -9999px; top: 0; visibility: hidden; pointer-events: none; }
.book-hint { text-align: center; color: var(--muted); font-size: 12px; }
/* Barre d'actions discrète sous le chapitre (J'aime / Favori / Partager) :
   toujours visible mais volontairement sobre (boutons de taille "sm"),
   pour ne jamais rivaliser visuellement avec le texte pendant la lecture —
   voir chapter.php, juste après la navigation précédent/suivant. */
.chapter-actions {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; margin-top: 18px;
}
/* .like-button porte normalement ses propres marges verticales (30px/40px)
   pour bien se détacher quand il est seul sur sa ligne ; ici, à l'intérieur
   d'une rangée d'actions avec d'autres boutons, c'est .chapter-actions qui
   gère l'espacement — on neutralise donc ces marges pour un alignement
   propre avec les boutons voisins. */
.chapter-actions .like-button { margin: 0; }
/* Encart de fin d'histoire (quand il n'y a pas encore d'épisode suivant) :
   une conclusion chaleureuse plutôt qu'un arrêt net, pour donner envie de
   revenir — voir chapter.php. */
.end-of-story {
  max-width: 68ch; margin: 28px auto 0; text-align: center;
  background: var(--violet-50); border: 1px solid var(--violet-100);
  border-radius: var(--radius-sm); padding: 20px 24px;
}
.end-of-story-title { font-family: "Poppins", sans-serif; color: var(--violet-900); font-weight: 700; margin-bottom: 6px; }
.end-of-story-text { color: #4F4859; font-size: 14px; margin-bottom: 14px; }
.end-of-story-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .book-edge-zone { width: 26%; }
}
@media (prefers-reduced-motion: reduce) {
  .book-columns-track { transition: none; }
}

/* Bannière "Reprendre la lecture" sur la fiche d'une histoire (work.php). */
.resume-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--violet-50); border: 1px solid var(--violet-100); border-radius: var(--radius-sm);
  padding: 16px 20px; margin: 18px 0;
}
/* CORRECTIF IMPORTANT : sans cette règle, l'attribut HTML "hidden" posé sur
   ce bandeau (voir work.php) n'a AUCUN EFFET VISUEL, parce que la règle
   ci-dessus impose déjà "display: flex" avec la même priorité que la règle
   native du navigateur pour [hidden] — celle du site l'emportant (chargée
   après), le bandeau "Reprendre la lecture" restait affiché en permanence à
   TOUT VISITEUR, même n'ayant jamais commencé la moindre lecture (le champ
   détail restait vide et le bouton pointait vers un lien "#" inactif). Même
   principe déjà appliqué ailleurs dans cette feuille de style (.btn[hidden],
   .lightbox[hidden], .report-form[hidden]...), qui avait été oublié ici. */
.resume-banner[hidden] { display: none;
}
.resume-banner-text strong { display: block; color: var(--violet-900); font-family: "Poppins", sans-serif; font-size: 15px; }
.resume-banner-text span { color: #4F4859; font-size: 13px; }
.resume-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.resume-restart-link { font-size: 13px; color: #746D7E; text-decoration: underline; align-self: center; }

/* Bandeau "compte en attente de suppression" (voir includes/header.php et
   account.php) — mêmes proportions que .resume-banner, teinte d'alerte
   (palette rose déjà utilisée par .btn-danger) plutôt que violette pour
   bien le distinguer visuellement de la reprise de lecture. */
.account-deletion-notice {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--rose-light); border: 1px solid var(--rose-border); border-radius: var(--radius-sm);
  padding: 14px 20px; margin: 14px 0;
}
.account-deletion-notice-text { display: flex; flex-direction: column; gap: 2px; }
.account-deletion-notice-text strong { color: var(--rose-dark); font-family: "Poppins", sans-serif; font-size: 15px; }
.account-deletion-notice-text span { color: #4F4859; font-size: 13px; }

/* Bandeau "email non vérifié" (voir includes/header.php et register.php)
   — même structure que .account-deletion-notice, teinte or/dorée (déjà
   utilisée par .status-pill.brouillon) plutôt que rose : un email non
   vérifié est une simple information à régulariser, pas une alerte grave
   comme une suppression de compte en cours. */
.email-verification-notice {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--gold-light); border: 1px solid #EBD695; border-radius: var(--radius-sm);
  padding: 14px 20px; margin: 14px 0;
}
.email-verification-notice-text { display: flex; flex-direction: column; gap: 2px; }
.email-verification-notice-text strong { color: var(--gold-dark); font-family: "Poppins", sans-serif; font-size: 15px; }
.email-verification-notice-text span { color: #4F4859; font-size: 13px; }

/* COMMENTS */
.comments-section { max-width: 68ch; margin: 60px auto 0; border-top: 1px solid var(--border); padding-top: 40px; }
.comment-list { list-style: none; margin-top: 24px; display: flex; flex-direction: column; gap: 18px; }
.comment-item { display: flex; gap: 12px; }
.comment-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--violet-100); color: var(--violet-700);
  display: grid; place-items: center; font-weight: 800; flex-shrink: 0; font-size: 14px;
}
.comment-body { flex: 1; }
.comment-meta { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.comment-meta strong { color: var(--heading); font-size: 14px; }
.comment-meta span { color: var(--muted); font-size: 12px; }
.comment-text { color: var(--text-light); font-size: 14px; line-height: 1.6; }

/* FORMS */
.form-card {
  max-width: 480px; margin: 0 auto; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 38px;
}
.form-card.wide { max-width: 720px; }
.form-card.extra-wide { max-width: 860px; }
.form-card-danger { border-color: var(--rose-border); margin-top: 24px; }
.settings-section-title {
  font-family: "Poppins", sans-serif; font-size: 17px; color: var(--heading);
  margin: 34px 0 16px; padding-top: 24px; border-top: 1px solid var(--border);
}
.settings-section-title:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
/* Onglets de la page Réglages (settings.php) : un seul <form> est toujours
   envoyé en entier au clic sur "Enregistrer" (rien ne change côté serveur),
   ces classes ne font qu'afficher une section à la fois. Si JavaScript est
   désactivé, .is-hidden n'est jamais ajoutée (voir le script en bas de la
   page) et la page retrouve son ancien comportement : tout est visible et
   on fait défiler, aucune perte de fonctionnalité. */
.settings-tab-panel.is-hidden { display: none; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.form-group .hint { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="number"], input[type="file"], textarea, select {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  font-family: inherit; font-size: 14px; color: var(--text); background: var(--off-white);
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--violet-500); background: var(--white); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-actions { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.form-footer-note { text-align: center; margin-top: 20px; font-size: 13px; color: var(--muted); }
.panel-inputs { display: flex; flex-direction: column; gap: 10px; }

/* Barre de progression affichée pendant l'envoi d'un formulaire contenant un
   fichier (image, document Word/PDF, planches BD...) — voir includes/footer.php
   pour le script qui la crée et la fait avancer. Reprend le même langage visuel
   que la barre de progression du lecteur (.book-progress-*) sans en dépendre,
   ces deux barres n'ayant rien en commun fonctionnellement. */
.upload-progress {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; font-size: 13px; color: var(--muted);
}
.upload-progress-track {
  flex: 1 1 auto; min-width: 100px; height: 8px; border-radius: 4px;
  background: var(--border); overflow: hidden;
}
.upload-progress-fill {
  display: block; height: 100%; width: 0%; border-radius: 4px;
  background: linear-gradient(90deg, var(--violet-600), var(--rose));
  transition: width .15s ease, background-color .2s ease;
}
.upload-progress-label {
  flex: 0 0 auto; font-weight: 700; color: var(--heading); white-space: nowrap;
}

/* Bandeau d'import Word/PDF au-dessus de l'éditeur de texte enrichi. */
.import-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.import-panel input[type="file"] { width: auto; flex: 1 1 260px; padding: 9px 12px; }

/* ÉDITEUR DE TEXTE ENRICHI (chapitres de roman) */
.rich-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px; border: 1px solid var(--border); border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--off-white);
}
.rich-btn {
  min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--white); color: var(--text); font-size: 14px; cursor: pointer; line-height: 1;
}
.rich-btn:hover { border-color: var(--violet-500); color: var(--link); }
.rich-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.rich-select {
  width: auto; padding: 7px 10px; font-size: 13px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--white); color: var(--text);
}
.rich-colors { display: inline-flex; align-items: center; gap: 5px; }
.rich-color-swatch {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); cursor: pointer; padding: 0;
}
.rich-color-swatch:hover { border-color: var(--violet-700); transform: scale(1.1); }
.rich-color-reset { background: var(--white); color: var(--muted); font-size: 11px; display: grid; place-items: center; }
/* Deuxième rangée de la barre d'outils (interligne / espace avant / espace
   après paragraphe) : coincée entre la barre principale et la zone de
   texte, donc sans coins arrondis ni bordure basse propres (empruntées à
   .rich-toolbar, à annuler ici pour ne pas créer de double arrondi). */
.rich-toolbar-spacing { border-radius: 0; row-gap: 10px; column-gap: 18px; }
.rich-spacing-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--text); }
.rich-spacing-field .rich-select { font-weight: 400; }
.rich-editor {
  min-height: 340px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--off-white); font-size: 15px; color: var(--text);
  line-height: var(--chapter-line-height, 1);
}
.rich-editor:focus { outline: none; border-color: var(--violet-500); background: var(--white); }
.rich-editor p { margin: var(--chapter-space-before, 0) 0 var(--chapter-space-after, 4pt); }
.rich-editor p:first-child { margin-top: 0; }
.rich-editor p:last-child { margin-bottom: 0; }
.rich-editor h2, .rich-editor h3 {
  font-family: "Poppins", sans-serif; color: var(--violet-900); line-height: 1.3; margin: 1.4em 0 0.6em;
}
.rich-editor h2 { font-size: 1.4em; }
.rich-editor h3 { font-size: 1.15em; }
.rich-editor h2:first-child, .rich-editor h3:first-child { margin-top: 0; }

/* Règles du mot de passe — coche en direct pendant la saisie (inscription, changement, réinitialisation) */
.password-rules { list-style: none; display: grid; gap: 6px; margin: 10px 0 4px; padding: 12px 14px; background: var(--chip-bg); border-radius: 10px; }
.password-rules li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-light); transition: color 0.2s ease; }
.password-rules li::before { content: "○"; font-size: 11px; color: var(--muted); flex-shrink: 0; width: 14px; text-align: center; }
.password-rules li.ok { color: var(--link); font-weight: 600; }
.password-rules li.ok::before { content: "✓"; color: #1a9c5c; }
.password-rules-note { font-size: 12px; color: var(--muted); margin: 8px 0 0; }

/* DASHBOARD */
.dashboard-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 32px; flex-wrap: wrap; }
.dashboard-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.dashboard-table th, .dashboard-table td { text-align: left; padding: 14px 18px; font-size: 14px; border-bottom: 1px solid var(--border); }
.dashboard-table th { background: var(--off-white); color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.dashboard-table tr:last-child td { border-bottom: none; }
.status-pill { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.status-pill.publie, .status-pill.envoyee { background: var(--green-light); color: var(--green); }
.status-pill.brouillon, .status-pill.annulee { background: var(--gold-light); color: var(--gold-dark); }
/* États propres aux campagnes d'email groupé (communications.php) et
   niveaux de priorité/d'annonce (communications.php, annonces.php) — voir
   migration_v24.sql. Tons tirés directement de la palette existante
   (--chip-bg/--chip-border déjà utilisés pour les puces de filtre),
   jamais de nouvelle couleur introduite. */
.status-pill.programmee, .status-pill.normale, .status-pill.info { background: var(--chip-bg); color: var(--link); border: 1px solid var(--chip-border); }
.status-pill.en_cours, .status-pill.importante, .status-pill.warning { background: rgba(244, 197, 66, 0.14); color: var(--gold); border: 1px solid rgba(244, 197, 66, 0.35); }
.status-pill.urgente, .status-pill.urgent { background: rgba(233, 93, 159, 0.14); color: var(--rose); border: 1px solid rgba(233, 93, 159, 0.35); }
.table-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.table-scroll { overflow-x: auto; }

/* "Chips" de destinataires sélectionnés (communications.php, sélection
   précise d'une campagne d'email groupé) — même palette que les puces de
   filtre existantes (--chip-bg/--chip-border), pour rester cohérent avec
   le reste de l'administration. */
.recipient-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--chip-border); font-size: 13px; font-weight: 600; color: var(--text); }
.recipient-chip input[type="checkbox"] { width: auto; margin: 0; }
.recipient-chip-remove { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 999px; line-height: 1; }
.recipient-chip-remove:hover { background: var(--off-white); color: var(--rose); }

/* Bannières d'annonce du site (includes/header.php, annonces.php) —
   affichées tout en haut de chaque page, avant l'en-tête. Trois niveaux
   visuels distincts (info/warning/urgent), tons tirés de la palette
   existante comme pour les statuts ci-dessus. */
.site-announcements { position: relative; z-index: 60; }
.site-announcement { padding: 10px 0; border-bottom: 1px solid var(--border); }
.site-announcement-inner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.site-announcement-icon { flex-shrink: 0; }
.site-announcement-text { flex: 1; font-size: 14px; color: var(--text); }
.site-announcement-text a { color: inherit; text-decoration: underline; font-weight: 700; margin-left: 4px; }
.site-announcement-close { flex-shrink: 0; background: transparent; border: none; cursor: pointer; font-size: 15px; line-height: 1; padding: 4px 8px; border-radius: 999px; color: inherit; opacity: 0.75; }
.site-announcement-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.site-announcement-info { background: var(--chip-bg); color: var(--link); }
.site-announcement-warning { background: rgba(244, 197, 66, 0.14); color: var(--gold); }
.site-announcement-urgent { background: rgba(233, 93, 159, 0.16); color: var(--rose); }
@media (max-width: 640px) {
  .site-announcement-text { font-size: 13px; }
}

/* Barre de navigation secondaire commune aux pages d'administration */
.admin-subnav { background: var(--chip-bg); border-bottom: 1px solid var(--chip-border); }
.admin-subnav-inner { display: flex; gap: 4px; flex-wrap: wrap; padding: 10px 0; }
.admin-subnav a { padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--link); }
.admin-subnav a:hover { background: var(--chip-border); }
.admin-subnav a.active { background: var(--violet-700); color: #fff; }
/* Regroupement par thème de la barre d'admin (voir render_admin_nav) : un
   petit libellé discret avant chaque paquet de liens, séparé du suivant par
   un filet vertical. Les liens eux-mêmes gardent exactement le même style
   ci-dessus, rien n'est dupliqué. */
.admin-subnav-group { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding-right: 14px; margin-right: 10px; border-right: 1px solid var(--chip-border); }
.admin-subnav-group:last-child { border-right: 0; padding-right: 0; margin-right: 0; }
.admin-subnav-group-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 0 2px; }
.badge-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--rose); color: #fff; font-size: 11px; font-weight: 800; margin-left: 6px; }

/* Badges « en attente » sur les onglets de la sous-navigation admin
   (Signalements, Messages, ...), posés et mis à jour par render_admin_nav()
   dans includes/functions.php puis rafraîchis sans rechargement par le
   sondage admin_events_feed.php (voir includes/footer.php). Même gabarit
   visuel que .badge-pill, avec [hidden] pour disparaître proprement quand
   le compteur revient à zéro plutôt que d'afficher un badge vide. */
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px;
  padding: 0 5px; border-radius: 999px; background: var(--rose); color: #fff; font-size: 11px;
  font-weight: 800; margin-left: 6px; line-height: 1; vertical-align: middle;
}
.nav-badge[hidden] { display: none; }

/* Signalement d'un contenu (chapitre, commentaire) — volontairement très
   discret : un simple lien texte, à peine visible, qui ne doit jamais
   concurrencer visuellement le bouton "J'aime" ou les commentaires. */
.report-widget { display: inline-block; position: relative; }
.report-toggle { font-size: 11px; color: var(--muted); font-weight: 400; opacity: 0.55; text-decoration: none; }
.report-toggle:hover { opacity: 1; text-decoration: underline; }
.report-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; padding: 12px; background: var(--violet-50); border-radius: var(--radius-sm); border: 1px solid var(--violet-100); }
.report-form[hidden] { display: none; }
.report-form select, .report-form input[type="text"] { font-size: 13px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--white); }
.report-form select { flex: 1 1 180px; }
.report-form input[type="text"] { flex: 2 1 220px; }

/* Actions "Modifier" / "Supprimer" sur un commentaire, visibles uniquement
   pour son auteur ou pour l'administratrice (voir render_comment_actions()
   dans includes/functions.php) — même discrétion volontaire que le lien
   "Signaler" ci-dessus, juste à côté duquel ces actions s'affichent. */
.comment-actions { display: inline-flex; gap: 10px; align-items: flex-start; }
.comment-edit-widget { display: inline-block; position: relative; }
.comment-edit-toggle, .comment-delete-btn { font-size: 11px; color: var(--muted); font-weight: 400; opacity: 0.55; text-decoration: none; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; }
.comment-edit-toggle:hover, .comment-delete-btn:hover { opacity: 1; text-decoration: underline; }
.comment-edit-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 12px; background: var(--violet-50); border-radius: var(--radius-sm); border: 1px solid var(--violet-100); }
.comment-edit-form[hidden] { display: none; }
.comment-edit-form textarea { font-size: 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--white); resize: vertical; min-height: 70px; font-family: inherit; }
.comment-edit-form-actions { display: flex; gap: 8px; }

/* Ligne regroupant, sous le texte d'un commentaire : "Signaler", les
   actions de modération (Modifier/Supprimer) et l'engagement (J'aime,
   Répondre) — voir render_comment_item() dans includes/functions.php. */
.comment-footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; }

/* "J'aime" et "Répondre" sous un commentaire (migration_v23.sql) — voir
   render_comment_engagement() dans includes/functions.php. Réservés à un
   compte connecté ; pour un visiteur sans compte, ces mêmes éléments
   mènent simplement à la connexion (.comment-reply-login-link) plutôt que
   d'être masqués, pour ne jamais afficher un bouton qui ne ferait rien. */
.comment-engagement { display: inline-flex; align-items: center; gap: 14px; }
.comment-like-form { display: inline-flex; }
.comment-like-btn {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 600;
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; text-decoration: none;
}
.comment-like-btn .icon { width: 15px; height: 15px; }
.comment-like-btn:hover { color: var(--rose-dark); }
.comment-like-btn.liked { color: var(--rose-dark); }
.comment-reply-widget { display: inline-block; position: relative; }
.comment-reply-toggle, .comment-reply-login-link {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; text-decoration: none;
}
.comment-reply-toggle .icon, .comment-reply-login-link .icon { width: 14px; height: 14px; }
.comment-reply-toggle:hover, .comment-reply-login-link:hover { color: var(--violet-700); text-decoration: underline; }
.comment-reply-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 12px; background: var(--violet-50); border-radius: var(--radius-sm); border: 1px solid var(--violet-100); min-width: 240px; }
.comment-reply-form[hidden] { display: none; }
.comment-reply-form textarea { font-size: 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--white); resize: vertical; min-height: 60px; font-family: inherit; }
.comment-reply-form-actions { display: flex; gap: 8px; }

/* Liste des réponses à un commentaire (un seul niveau, voir
   migration_v23.sql) : légèrement décalée et plus discrète que le
   commentaire d'origine, pour que la hiérarchie reste lisible d'un coup
   d'œil sans pour autant ressembler à un fil de discussion imbriqué à
   l'infini. */
.comment-replies { display: flex; flex-direction: column; gap: 14px; margin: 14px 0 0 30px; padding-left: 16px; border-left: 2px solid var(--violet-100); }
.comment-reply .comment-avatar { width: 30px; height: 30px; font-size: 12px; }

/* STATISTIQUES */
.stats-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 10px; }
.stats-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.stats-card-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; }
.stats-card-value { font-family: 'Poppins', sans-serif; font-size: 28px; color: var(--heading); }
.stats-card-sub { font-size: 12px; color: var(--muted); }
.stats-chart { display: flex; align-items: flex-end; gap: 3px; height: 140px; }
.stats-bar-wrap { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.stats-bar { width: 100%; min-height: 2px; background: var(--violet-700); border-radius: 3px 3px 0 0; transition: background 0.15s ease; }
.stats-bar-wrap:hover .stats-bar { background: var(--rose); }
.stats-chart-legend { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 8px; padding-bottom: 10px; }

/* NOTIFICATIONS */
.notif-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.notif-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--white); }
.notif-item.unread { background: var(--chip-bg); border-color: var(--chip-border); }
.notif-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--violet-100); color: var(--violet-700); display: grid; place-items: center; flex-shrink: 0; }
.notif-text { flex: 1; font-size: 14px; }
.notif-date { font-size: 12px; color: var(--muted); }

/* CTA */
.cta { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--violet-900), var(--violet-700)); color: #fff; border-radius: var(--radius-lg); padding: 50px; }
.cta::before { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(233, 93, 159, 0.18); right: -80px; top: -150px; }
.cta::after { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: rgba(244, 197, 66, 0.13); left: 40%; bottom: -130px; }
.cta-content { position: relative; z-index: 2; max-width: 700px; }
.cta h2 { font-family: "Poppins", sans-serif; font-size: clamp(26px, 4vw, 38px); line-height: 1.15; margin-bottom: 12px; text-wrap: balance; }
.cta p { color: rgba(255, 255, 255, 0.78); margin-bottom: 24px; }

/* CONTACT */
.contact-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 28px; }
.contact-info { padding: 30px; border-radius: var(--radius); background: var(--chip-bg); border: 1px solid var(--border); }
.contact-item { display: flex; gap: 14px; margin-bottom: 24px; }
.contact-item:last-child { margin-bottom: 0; }
.contact-icon { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: var(--white); box-shadow: var(--shadow-sm); }
.contact-item strong { display: block; color: var(--heading); font-size: 14px; margin-bottom: 3px; }
.contact-item span { color: var(--muted); font-size: 13px; }
.contact-card { padding: 36px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.email-box { padding: 16px 18px; border-radius: 12px; background: var(--off-white); border: 1px solid var(--border); color: var(--link); font-weight: 700; margin-bottom: 16px; word-break: break-word; }

/* ABOUT check list */
.check-list { list-style: none; margin-top: 22px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; color: var(--text-light); font-size: 14px; }
.check { width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--rose-light); color: var(--rose-dark); font-size: 12px; font-weight: 800; }

/* FOOTER */
footer { background: var(--violet-900); color: #fff; padding: 50px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.footer-brand .logo { color: #fff; margin-bottom: 14px; }
.footer-brand p { max-width: 380px; color: rgba(255, 255, 255, 0.62); font-size: 13px; white-space: pre-line; }
.footer h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 14px; color: #E9DFFF; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 9px; }
.footer-links a { color: rgba(255, 255, 255, 0.63); font-size: 13px; }
.footer-links a:hover { color: var(--rose); }
.footer-social { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 16px; }
.footer-social a {
  color: rgba(255, 255, 255, 0.85); font-size: 12px; font-weight: 700; padding: 7px 12px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16);
  transition: 0.2s ease;
}
.footer-social a:hover { background: var(--rose); border-color: var(--rose); color: #fff; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 20px; color: rgba(255, 255, 255, 0.45); font-size: 12px; }
.footer-accent { color: var(--gold); }

/* BANDEAU COOKIE */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  background: var(--violet-900); color: #fff; box-shadow: 0 -8px 30px rgba(20, 10, 40, 0.25);
}
.cookie-banner-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 0; flex-wrap: wrap;
}
.cookie-banner p { font-size: 13px; color: rgba(255, 255, 255, 0.85); max-width: 760px; }
.cookie-banner a { color: var(--gold); text-decoration: underline; }
.cookie-banner .btn { flex-shrink: 0; }

/* RESPONSIVE */
@media (max-width: 980px) {
  .work-detail { grid-template-columns: 1fr; }
  .work-detail-cover { min-height: 300px; }
}
@media (max-width: 980px) {
  .story-detail-header { grid-template-columns: 1fr; }
  .story-detail-cover { height: 320px; }
}
@media (max-width: 900px) {
  .nav { height: auto; min-height: 72px; flex-wrap: wrap; padding: 13px 0; }
  .nav-toggle { display: flex; order: 3; }
  .nav-user { order: 2; }
  /* Le menu se replie derrière le bouton "burger" et se déplie avec une petite animation. */
  .main-nav {
    order: 5; width: 100%; max-height: 0; overflow: hidden; opacity: 0;
    transform: translateY(-6px);
    transition: max-height 0.35s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.25s ease, transform 0.3s ease, margin-top 0.35s ease;
  }
  .main-nav.open { max-height: 360px; opacity: 1; transform: translateY(0); margin-top: 12px; }
  .nav-links {
    flex-direction: column; align-items: stretch; width: 100%; gap: 2px;
    padding-top: 10px; border-top: 1px solid var(--border); justify-content: flex-start; padding-bottom: 4px;
  }
  .nav-links li { opacity: 0; transform: translateX(-8px); transition: opacity 0.25s ease, transform 0.25s ease; }
  .main-nav.open .nav-links li { opacity: 1; transform: translateX(0); }
  .main-nav.open .nav-links li:nth-child(1) { transition-delay: 0.05s; }
  .main-nav.open .nav-links li:nth-child(2) { transition-delay: 0.10s; }
  .main-nav.open .nav-links li:nth-child(3) { transition-delay: 0.15s; }
  .main-nav.open .nav-links li:nth-child(4) { transition-delay: 0.20s; }
  .main-nav.open .nav-links li:nth-child(5) { transition-delay: 0.25s; }
  .nav-links a { width: 100%; padding: 13px 14px; }
  .hero-bubble, .hero-panel { display: none; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .cards, .work-grid, .stories-grid { grid-template-columns: repeat(2, 1fr); }
  .illustrations-grid { grid-template-columns: repeat(3, 1fr); }
  /* Directement en une seule colonne (pas de passage par 2) : avec 3
     catégories, 2 colonnes laisserait la 3e toute seule, mal équilibrée. */
  .latest-works-columns { grid-template-columns: 1fr; gap: 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 30px; }
  .about-visual { min-height: 280px; order: -1; }
  .stats-cards { grid-template-columns: 1fr 1fr; }
  /* Mot personnel : un peu moins d'air sur tablette, où la carte occupe
     déjà presque toute la largeur de l'écran. */
  .creator-note-card { gap: 20px; padding: 28px 30px; }
  .creator-note-card::before { font-size: 130px; top: -30px; }
}
@media (max-width: 650px) {
  .container { width: min(91%, var(--max-width)); }
  .logo { font-size: 22px; }
  .logo-mark { width: 38px; height: 38px; }
  /* En-tête resserré sur téléphone : "Se connecter" rejoint le menu déroulant
     (voir .nav-links-login-mobile) pour que logo + bouton principal + menu
     burger tiennent sur une seule ligne, sans perdre l'accès à la connexion. */
  .nav { gap: 8px; }
  .logo { gap: 8px; }
  .nav-link-login { display: none; }
  .nav-user { gap: 8px; }
  .nav-cta { padding: 10px 12px; font-size: 12.5px; }
  .nav-links-login-mobile { display: list-item; }
  .hero { min-height: 520px; }
  .hero-content { padding: 60px 0; }
  .hero-photo-banner { padding: 20px 0 4px; }
  .hero-photo-frame { border-radius: 16px; }
  .hero-intro { padding: 38px 0 46px; }
  section { padding: 55px 0; }
  /* Mot personnel : photo au-dessus du texte plutôt que côte à côte, sans
     quoi la photo écraserait trop de largeur sur un petit écran ; le grand
     guillemet décoratif est réduit et recentré pour ne pas déborder, et le
     lien (devenu une pastille) se centre avec le reste. */
  .creator-note-card { flex-direction: column; text-align: center; padding: 28px 22px; }
  .creator-note-card::before { font-size: 90px; top: -16px; right: 12px; }
  .creator-note-link { margin: 0 auto; }
  .welcome-back { font-size: 13px; padding: 9px 16px; }
  /* Appel à créer un compte : perks sous le texte plutôt qu'à côté, et les
     deux liens d'action l'un sous l'autre pour rester lisibles. */
  .signup-cta-card { flex-direction: column; align-items: stretch; text-align: center; padding: 30px 22px; gap: 26px; }
  .signup-cta-text { max-width: none; }
  .signup-cta-actions { flex-direction: column; align-items: center; gap: 12px; }
  .signup-cta-perks { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .stats-grid { grid-template-columns: 1fr; gap: 5px; }
  .stats-cards { grid-template-columns: 1fr; }
  .cards, .work-grid, .stories-grid { grid-template-columns: 1fr; }
  .illustrations-grid { grid-template-columns: repeat(2, 1fr); }
  .cta { padding: 32px 22px; }
  .contact-card, .contact-info { padding: 22px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .form-card { padding: 26px; }
  .dashboard-header { flex-direction: column; align-items: flex-start; }
  .cookie-banner-inner { flex-direction: column; align-items: stretch; text-align: center; }
  .about-visual { min-height: 230px; }
  .about-float-card { padding: 14px; }
  .about-float-card.card-1 .float-icon { height: 80px; font-size: 30px; margin-bottom: 8px; }
  .about-float-card.card-2 .float-icon { height: 60px; font-size: 24px; margin-bottom: 8px; }
}

/* GRANDS ÉCRANS : un peu plus d'air et de confort de lecture */
@media (min-width: 1440px) {
  :root { --max-width: 1280px; }
  body { font-size: 16.5px; }
  .hero p, .profile-intro p, .about-text p { font-size: 18px; }
}

/* =========================================================
   Page "Mon compte" — mise en page dédiée, volontairement
   distincte de .form-card (qui reste inchangée partout ailleurs :
   connexion, inscription, réglages admin, etc. — 480px centré,
   adapté à UN SEUL formulaire isolé). Cette page affiche plusieurs
   réglages à la fois : elle a donc sa propre grille, plus large,
   pour profiter de l'espace sur grand écran au lieu d'empiler des
   cartes étroites et noyées au milieu d'une page vide.
========================================================= */
.account-shell { max-width: 900px; margin: 0 auto; }

.account-identity {
  display: flex; align-items: center; gap: 18px; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 24px 30px; margin-bottom: 24px;
}
.account-avatar {
  width: 54px; height: 54px; border-radius: 50%; background: var(--violet-700); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-family: "Poppins", sans-serif; font-size: 21px; font-weight: 800;
}
.account-identity-info { min-width: 0; }
.account-identity-info .account-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.account-identity-info h1 { font-family: "Poppins", sans-serif; font-size: 19px; color: var(--heading); margin: 0; }
.account-identity-info p { color: var(--muted); font-size: 13.5px; margin: 4px 0 0; word-break: break-all; }
.role-pill {
  display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.03em; background: var(--violet-100); color: var(--violet-700);
}

.account-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 860px) {
  .account-grid.is-two-col { grid-template-columns: 1fr 1fr; align-items: start; }
  .account-grid.is-two-col .account-card.span-2 { grid-column: 1 / -1; }
}

/* Icônes SVG génériques (fonction icon() dans functions.php) : taille et
   alignement relatifs au texte environnant pour s'insérer dans n'importe
   quelle taille de police (statistiques, boutons...) sans règle dédiée à
   chaque endroit. La couleur suit toujours le texte via currentColor. */
.icon { width: 1em; height: 1em; vertical-align: -0.15em; flex-shrink: 0; }

.account-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 28px 30px;
}
.account-card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.account-card-icon {
  width: 36px; height: 36px; border-radius: 10px; background: var(--violet-50); color: var(--violet-700);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.account-card-icon svg { width: 18px; height: 18px; }
.account-card-headings { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.account-card-headings h2 { font-family: "Poppins", sans-serif; font-size: 16px; color: var(--heading); margin: 0; }
.account-card-desc { color: var(--text-light); font-size: 14px; margin: 0 0 16px; }
.account-card-desc:last-child { margin-bottom: 0; }

.account-card.danger { border-color: var(--rose-border); }
.account-card.danger .account-card-icon { background: var(--rose-light); color: var(--rose-dark); }
.account-card.danger.is-muted { background: var(--off-white); box-shadow: none; }
.account-card.danger.is-muted .account-card-desc { margin-bottom: 0; }

.status-pill.on { background: var(--green-light); color: var(--green); }
.status-pill.inactive { background: var(--off-white); color: var(--muted); border: 1px solid var(--border); }

.account-card-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

@media (max-width: 650px) {
  .account-identity { padding: 20px; gap: 14px; }
  .account-card { padding: 22px; }
}

/* =========================================================
   Pages de connexion / inscription / mot de passe oublié /
   réinitialisation : disposition à deux colonnes sur grand écran
   (panneau d'accueil illustré à gauche, formulaire à droite) pour un
   traitement plus soigné qu'une simple carte étroite isolée au milieu
   de la page. .form-card garde EXACTEMENT son usage partagé partout
   ailleurs (voir commentaire plus haut) : ici on la place simplement
   à l'intérieur de .auth-form-side, qui lui retire son propre cadre
   (bordure / ombre / marge) puisque .auth-shell affiche déjà un cadre
   autour de l'ensemble — le balisage, les champs et la logique PHP de
   chaque formulaire restent inchangés. */
.auth-shell {
  max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1fr;
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.auth-panel {
  background: linear-gradient(145deg, var(--violet-800), var(--violet-900) 70%, #2C1558 100%);
  color: #fff; padding: 48px 38px; display: flex; flex-direction: column; justify-content: center;
}
.auth-panel .logo-mark { margin-bottom: 22px; }
.auth-panel h2 { font-family: "Poppins", sans-serif; font-size: 25px; line-height: 1.25; margin-bottom: 14px; text-wrap: balance; }
.auth-panel-tagline { color: rgba(255, 255, 255, 0.82); font-size: 14px; line-height: 1.65; margin: 0; }
.auth-panel-perks { list-style: none; display: flex; flex-direction: column; gap: 15px; margin: 28px 0 0; padding: 0; }
.auth-panel-perks li { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: rgba(255, 255, 255, 0.92); }
.auth-panel-perks .icon { width: 19px; height: 19px; flex-shrink: 0; color: var(--gold); }
.auth-form-side { padding: 48px 42px; display: flex; flex-direction: column; justify-content: center; }
.auth-form-side .form-card {
  max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; border-radius: 0;
}

@media (max-width: 860px) {
  .auth-shell { grid-template-columns: 1fr; max-width: 480px; border-radius: var(--radius); box-shadow: var(--shadow); }
  .auth-panel { padding: 30px 28px 24px; }
  .auth-panel-perks { margin-top: 20px; }
  .auth-form-side { padding: 30px 28px; }
}

/* =========================================================
   Classification d'âge des œuvres (voir age_badge()/age_rating_notice()
   dans includes/functions.php) : un badge compact ("16+"...) sur les
   vignettes et les fiches, et un bandeau plus visible sur la fiche d'une
   œuvre et en haut de la page de lecture. Rien ne s'affiche pour
   "tout public" (valeur par défaut) : seule une œuvre réellement classée
   affiche quelque chose, même logique que pour "💗 0" plus haut dans
   cette feuille de style — jamais de blocage d'accès, une information.
========================================================= */
.age-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 8px; border-radius: 7px; font-family: "Poppins", sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: 0.02em; color: #fff; line-height: 1;
}
/* Le badge de la légende de l'aperçu plein écran (#lightboxAgeBadge) est le
   seul affiché/masqué en JS via l'attribut HTML "hidden" plutôt que par PHP
   (voir illustrations.php) : sans cette règle, "display: inline-flex"
   ci-dessus prendrait le dessus sur le masquage par défaut de "hidden" et
   laisserait apparaître un badge vide pour une illustration "tout public". */
.age-badge[hidden] { display: none; }
.age-badge.age-12 { background: var(--violet-700); }
.age-badge.age-16 { background: var(--gold-dark); }
.age-badge.age-18 { background: var(--rose-dark); }

/* Sur une vignette de couverture : coin opposé au type-badge (déjà en
   haut à gauche de .story-cover / .illustration-tile). */
.story-cover .age-badge,
.illustration-tile .age-badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
}
.latest-work-cover .age-badge {
  position: absolute; top: 6px; right: 6px; z-index: 2; padding: 3px 6px; font-size: 10px; border-radius: 6px;
}
/* Juste après le libellé de type ou un titre, en ligne dans le texte
   (fiche œuvre, tableau du dashboard) plutôt qu'en position absolue. */
.age-badge-inline { margin-left: 8px; vertical-align: middle; }
/* Dans la légende de l'aperçu plein écran d'une illustration (déjà en
   disposition flex avec un espacement — voir .lightbox-caption) : un
   badge de plus parmi les éléments de la légende, pas de positionnement
   particulier à ajouter. */
.lightbox-caption .age-badge { flex-shrink: 0; }

.age-notice {
  display: flex; align-items: center; gap: 10px; margin: 16px 0;
  padding: 13px 16px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600;
  border: 1px solid transparent; text-align: left;
}
.age-notice .icon { width: 18px; height: 18px; flex-shrink: 0; }
.age-notice-12 { background: var(--violet-50); color: var(--violet-800); border-color: var(--violet-100); }
.age-notice-16 { background: var(--gold-light); color: var(--gold-dark); border-color: #F3E0A6; }
.age-notice-18 { background: var(--rose-light); color: var(--rose-dark); border-color: var(--rose-border); }
/* Page de lecture : .reader-header est centré, donc le bandeau l'est
   aussi (display:inline-flex + margin auto) plutôt que de s'étirer sur
   toute la largeur comme sur la fiche de l'œuvre. */
.reader-header .age-notice { display: inline-flex; margin: 12px auto 0; }