/* ===== Variables de theme ===== */
:root {
  --fond: #121214;
  --fond-carte: #1c1c1f;
  --fond-carte-hover: #232326;
  --texte: #eaeaea;
  --texte-attenue: #9a9a9a;
  --accent: #e2b33d;
  --accent-rgb: 226, 179, 61; /* meme couleur, pour les transparences ; remplacee selon la preference du membre */
  --accent-hover: color-mix(in srgb, var(--accent) 82%, #ffffff);
  --erreur: #e2543d;
  --bordure: #2c2c30;
  --rayon: 8px;
  --texte-corps: #c8c8c8;
  --texte-chaud: #a39b8e;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--fond);
  color: var(--texte);
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  line-height: 1.5;
}

h1,
h2,
h3 {
  font-family: "Bebas Neue", "Inter", sans-serif;
  letter-spacing: 0.03em;
  font-weight: 400;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  color: var(--accent);
}

/* ===== Navigation : voir "NAVIGATION DU SITE (17/10)" en fin de fichier ===== */

/* ===== Contenu principal ===== */
main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem;
}

/* ===== Formulaire de recherche ===== */
form.recherche {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

input[type="text"] {
  flex: 1;
  padding: 0.75rem 1rem;
  background-color: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  color: var(--texte);
  font-size: 1rem;
}

input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}

button {
  padding: 0.75rem 1.5rem;
  background-color: var(--accent);
  color: #121214;
  border: none;
  border-radius: var(--rayon);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

button:hover {
  background-color: var(--accent-hover);
}

button.discret {
  background-color: transparent;
  color: var(--texte-attenue);
  border: 1px solid var(--bordure);
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

button.discret:hover {
  color: var(--erreur);
  border-color: var(--erreur);
  background-color: transparent;
}

/* ===== Grille de films (base commune) ===== */
.grille-films {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.5rem;
}

.carte-film {
  background-color: var(--fond-carte);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: background-color 0.5s ease;
  display: flex;
  flex-direction: column;
  animation: apparition 0.7s cubic-bezier(0.25, 0.1, 0.25, 1) backwards;
}

.carte-film:hover {
  background-color: var(--fond-carte-hover);
}

@keyframes apparition {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Delai progressif pour l'effet cascade, jusqu'a 12 cartes */
.carte-film:nth-child(1) {
  animation-delay: 0.05s;
}
.carte-film:nth-child(2) {
  animation-delay: 0.1s;
}
.carte-film:nth-child(3) {
  animation-delay: 0.15s;
}
.carte-film:nth-child(4) {
  animation-delay: 0.2s;
}
.carte-film:nth-child(5) {
  animation-delay: 0.25s;
}
.carte-film:nth-child(6) {
  animation-delay: 0.3s;
}
.carte-film:nth-child(7) {
  animation-delay: 0.35s;
}
.carte-film:nth-child(8) {
  animation-delay: 0.4s;
}
.carte-film:nth-child(9) {
  animation-delay: 0.45s;
}
.carte-film:nth-child(10) {
  animation-delay: 0.5s;
}
.carte-film:nth-child(11) {
  animation-delay: 0.55s;
}
.carte-film:nth-child(12) {
  animation-delay: 0.6s;
}

/* ===== Structure "carte plate" : recherche + films similaires =====
   Cible uniquement les enfants DIRECTS de .carte-film, pour ne jamais
   affecter la structure imbriquee (poster-conteneur/corps-carte) de la bibliotheque */
.carte-film > img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--rayon) var(--rayon) 0 0;
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.carte-film:hover > img {
  transform: scale(1.04);
}

.carte-film > form {
  padding: 0.75rem;
  margin-top: auto;
}

.carte-film > form button {
  width: 100%;
  font-size: 0.85rem;
  padding: 0.5rem;
}

.carte-film-lien {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* ===== Structure "carte enrichie" : bibliotheque ===== */
.poster-conteneur {
  position: relative;
  overflow: hidden;
  border-radius: var(--rayon) var(--rayon) 0 0;
}

.poster-conteneur img,
.poster-conteneur .pas-affiche {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.poster-conteneur:hover img {
  transform: scale(1.04);
}

.form-retirer-icone {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
}

.form-retirer-icone button {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(18, 18, 20, 0.75);
  color: var(--texte);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  backdrop-filter: blur(4px);
}

/* Retirer d'une liste = geste leger : pas de rouge, la croix pivote.
   Le rouge reste reserve aux suppressions definitives. */
.form-retirer-icone button:hover,
.form-retirer-icone button:focus {
  background-color: rgba(18, 18, 20, 0.92);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  outline: none;
}

/* Pastille note, bas droite de l'affiche */
.pastille-note {
  position: absolute;
  bottom: 0.5rem;
  right: 3rem;
  background-color: rgba(18, 18, 20, 0.75) !important;
  backdrop-filter: blur(3px);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.8rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.corps-carte {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.75rem;
  gap: 0.15rem;
}

.corps-carte h3 {
  font-size: 1rem;
  color: var(--texte);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.separateur-carte {
  height: 1px;
  background-color: var(--bordure);
  margin: 0.6rem 0;
}

.annee-film {
  color: var(--texte-attenue);
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.meta-film {
  font-size: 0.78rem;
  color: var(--texte-attenue);
  line-height: 1.3;
}

.meta-genres {
  color: var(--texte-chaud);
}

.bloc-visionnage {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.resume-visionnage {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}

.badge {
  background-color: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  color: var(--texte-attenue);
}

.badge-note {
  color: var(--accent);
  border-color: var(--accent);
}

.commentaire-apercu {
  font-size: 0.82rem;
  color: var(--texte-attenue);
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.actions-carte {
  display: flex;
  gap: 1.75rem;
  margin-top: auto;
  padding: 0 0.75rem 0.75rem 2rem;
}

.actions-carte-seule {
  justify-content: flex-end;
  padding-right: 1rem;
}

@media (max-width: 768px) {
  .actions-carte {
    justify-content: flex-end;
    padding-left: 0.75rem;
  }
}

.bouton-etat-film {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 400;
  font-family: "Inter", sans-serif;
  background: none;
  border: none;
  padding: 0;
  color: var(--texte-attenue);
  cursor: pointer;
  transition: color 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.bouton-etat-film svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.bouton-etat-film:hover {
  color: var(--accent);
  background-color: transparent;
}

.bouton-etat-film:focus {
  outline: none;
}

.bouton-etat-film:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

a.bouton-etat-lien {
  text-decoration: none !important;
}

.etat-actif {
  color: var(--accent);
  font-weight: 500;
}

/* ===== Lien "Plus d'infos" avec info-bulle ===== */
.lien-fiche {
  position: relative;
  color: var(--accent);
  text-decoration: none;
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.03em;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.lien-fiche:hover {
  color: var(--accent-hover);
}

.lien-fiche::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--fond-carte-hover);
  color: var(--texte);
  padding: 0.35rem 0.7rem;
  border-radius: var(--rayon);
  border: 1px solid var(--bordure);
  font-size: 0.75rem;
  font-family: "Inter", sans-serif;
  letter-spacing: normal;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 5;
}

.lien-fiche:hover::after {
  opacity: 1;
}

/* ===== Modale de notes — conteneur principal ===== */
.modal-visionnage {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  background-color: var(--fond-carte);
  color: var(--texte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 0;
  width: min(420px, 90vw);
  max-height: 85vh;
  overflow: hidden;
}

/* dialog[open] par defaut, sinon display:flex s'applique meme fermee */
.modal-visionnage[open] {
  display: flex;
  flex-direction: column;
}

.modal-visionnage::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

/* ===== En-tete fixe (titre + croix fermer) ===== */
.modal-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem 0.75rem;
  flex-shrink: 0;
}

.modal-entete h3 {
  color: var(--accent);
  margin: 0;
}

.modal-fermer {
  background: none;
  border: none;
  color: var(--texte-attenue);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.25rem;
  cursor: pointer;
}

/* Poignee de glissement (mobile uniquement, voir media query plus bas) */
.modal-poignee {
  display: none;
}

/* ===== Formulaire principal (Note + Details) uniquement =====
   Cible par classe dediee, pas par selecteur generique "form" —
   sinon flex:1 s'applique aussi au formulaire "Publier un avis" et
   aux mini-formulaires de l'historique, ce qui casse le calcul de
   hauteur JS des panneaux <details> et provoque un chevauchement
   visuel a l'ouverture. Ajoute class="modal-form-principal" sur ce
   <form> dans _macros.html si ce n'est pas deja fait. */
.modal-form-principal {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Zone scrollable contenant tout le contenu (formulaire principal,
   panneau "Publier", panneau "Mes publications") */
.modal-corps {
  overflow-y: auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
}

/* Regroupement simple (ex: bloc Note), pas de repli/ouverture */
.modal-groupe {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem 0;
}

.modal-groupe + .modal-groupe {
  border-top: 1px solid var(--bordure);
}

/* ===== Panneaux repliables (Details, Publier un avis, Mes publications) ===== */
.modal-panneau {
  border-top: 1px solid var(--bordure);
  padding: 0.75rem 0;
}

.modal-panneau summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--texte);
  font-weight: 500;
  list-style: none;
}

.modal-panneau summary::-webkit-details-marker {
  display: none;
}

.modal-panneau summary::before {
  content: "›";
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 0.15s ease;
}

.modal-panneau[open] summary::before {
  transform: rotate(90deg);
}

.modal-panneau summary:focus {
  outline: none;
}

.modal-panneau summary:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

/* Contenu anime en JS via max-height (voir app.js) — ne JAMAIS
   remettre flex:1 ou display:flex ici, ca fausse le scrollHeight
   utilise pour calculer la hauteur d'ouverture */
.modal-panneau-contenu {
  overflow: hidden;
  transition: max-height 0.25s ease;
}

/* Panneau a contenu variable (liste de publications) : pas d'animation JS,
   hauteur plafonnee avec son propre scroll interne plutot que de pousser
   le reste de la modale */
.modal-panneau-limite .modal-panneau-contenu {
  max-height: 260px;
  overflow-y: auto;
  transition: none;
}

.modal-ligne {
  display: flex;
  gap: 0.75rem;
}

.modal-ligne label {
  flex: 1;
}

/* ===== Champs de formulaire, communs a tous les formulaires de la modale ===== */
.modal-visionnage label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--texte-attenue);
}

.modal-visionnage input,
.modal-visionnage select,
.modal-visionnage textarea {
  padding: 0.5rem;
  background-color: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  color: var(--texte);
  font-size: 0.9rem;
}

.modal-visionnage textarea {
  resize: vertical;
  font-family: inherit;
}

.note-precise {
  width: 70px;
}

/* ===== Pied fixe (Enregistrer / Annuler) ===== */
.modal-actions {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem 1.5rem;
  flex-shrink: 0;
}

.modal-actions button {
  flex: 1;
}

/* ===== Mobile : bottom sheet au lieu de boite centree ===== */
@media (max-width: 768px) {
  .modal-visionnage {
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
  }

  .modal-poignee {
    display: block;
    width: 36px;
    height: 4px;
    background-color: var(--bordure);
    border-radius: 999px;
    margin: 0.75rem auto 0;
    flex-shrink: 0;
  }

  .modal-actions {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
}

/* Type de visionnage : pastilles cliquables (checkbox caches) */
.choix-puces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.puce-choix {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background-color: var(--fond);
  border: 1px solid var(--bordure);
  color: var(--texte-attenue);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

input[type="checkbox"]:checked + .puce-choix {
  border-color: var(--accent);
  background-color: var(--accent);
  color: #121214;
}

/* Widget etoiles + note precise */
.note-widget {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.etoiles {
  display: flex;
  gap: 0.15rem;
}

.etoile {
  font-size: 1.5rem;
  color: var(--bordure);
  cursor: pointer;
  transition: color 0.15s ease;
}

.etoile-active {
  color: var(--accent);
}

.note-precise {
  width: 70px;
}

input[type="date"],
input[type="time"] {
  color-scheme: dark;
}

/* ===== Affiche manquante ===== */
.pas-affiche {
  width: 100%;
  aspect-ratio: 2 / 3;
  background-color: var(--fond);
  border: 1px dashed var(--bordure);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
}

.pas-affiche span {
  color: var(--texte-attenue);
  font-size: 0.85rem;
  font-style: italic;
}

/* ===== Hero backdrop (fiche film) ===== */
.hero-backdrop {
  position: relative;
  height: 340px;
  margin: -2rem -2rem 2rem;
  background-size: cover;
  background-position: center 20%;
}

.hero-voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(18, 18, 20, 0.3),
    var(--fond) 95%
  );
}

/* ===== Fiche film detail ===== */
.fiche-film {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  position: relative;
  margin-top: -140px;
}

.fiche-vu-le {
  font-size: 0.8rem;
  color: var(--texte-attenue);
  margin: 0;
}

.fiche-poster {
  width: 220px;
  height: auto; /* width/height du <img> reservent la place (CLS), la largeur CSS decide */
  border-radius: var(--rayon);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.fiche-poster-bloc {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-shrink: 0;
}

.fiche-poster-bloc .actions-fiche-film {
  flex-direction: column;
  align-items: stretch;
}

.fiche-poster-bloc .actions-fiche-film .bouton-etat-film,
.fiche-poster-bloc .actions-fiche-film form {
  width: 100%;
}

.tagline {
  color: var(--texte-attenue);
  font-style: italic;
  margin-bottom: 0.5rem;
}

.fiche-meta {
  color: var(--texte-attenue);
  margin-bottom: 0.75rem;
}

.score-tmdb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.score-label {
  font-size: 0.8rem;
  color: var(--texte-attenue);
}

.fiche-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.fiche-synopsis {
  margin-bottom: 1.5rem;
  line-height: 1.6;
  max-width: 700px;
  color: var(--texte-corps);
}

.fiche-finances {
  display: flex;
  gap: 1.5rem;
  margin-top: 1rem;
  font-size: 0.85rem;
}

.fiche-finances span {
  color: var(--texte-attenue);
  display: block;
  font-size: 0.75rem;
}

.fiche-productions {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--texte-attenue);
}

.deja-vu {
  color: var(--accent);
  margin-top: 0.5rem;
}

/* ===== Bande-annonce ===== */
.video-conteneur {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  margin: 1rem 0 2rem;
  border-radius: var(--rayon);
  overflow: hidden;
}

.video-conteneur iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ===== Casting ===== */
.grille-casting {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.carte-acteur img,
.pas-photo {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--rayon);
  background-color: var(--fond-carte);
}

.acteur-nom {
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 0.4rem;
}

.acteur-role {
  font-size: 0.75rem;
  color: var(--texte-attenue);
}

/* ===== Messages d'etat ===== */
.erreur {
  color: var(--erreur);
  background-color: rgba(226, 84, 61, 0.1);
  border: 1px solid var(--erreur);
  border-radius: var(--rayon);
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}

main > p {
  color: var(--texte-attenue);
}

main > p a {
  color: var(--accent);
}

.mdp-indicateur {
  font-size: 0.85rem;
  margin: -0.5rem 0 1rem;
}

.mdp-indicateur.mdp-ok {
  color: #6fbf73;
}

.mdp-indicateur.mdp-insuffisant {
  color: var(--erreur);
}

@media (max-width: 600px) {
  .hero-backdrop {
    height: 200px;
    margin: -1rem -1rem 1rem;
  }

  .fiche-film {
    flex-direction: column;
    margin-top: -80px;
  }

  .fiche-poster {
    width: 160px;
  }
}

/* ===== Score/note reduits ===== */
.pastille-score {
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.separateur-note {
  border-left: 1px solid var(--bordure);
  padding-left: 0.6rem;
}

.separateur-note strong {
  color: var(--accent);
}

/* ===== Credits (realisateur/scenario/musique) cliquables ===== */
.fiche-credits {
  font-size: 0.85rem;
  color: var(--texte-attenue);
  margin-bottom: 1rem;
}

.fiche-credits a {
  color: var(--texte);
  text-decoration: none;
  font-weight: 600;
}

.fiche-credits a:hover {
  color: var(--accent);
}

.role-credit {
  color: var(--texte-attenue);
  font-size: 0.8rem;
}

/* ===== Cartes equipe/casting cliquables ===== */
.carte-acteur-lien {
  text-decoration: none;
  color: inherit;
  display: block;
}

.carte-acteur-lien:hover .acteur-nom {
  color: var(--accent);
}

/* ===== Titre de section avec lien a droite ===== */
.titre-avec-lien {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

/* ===== Fiche personne ===== */
.fiche-personne {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.personne-photo {
  width: 200px;
  border-radius: var(--rayon);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .hero-backdrop {
    height: 200px;
    margin: -1rem -1rem 1rem;
  }

  .fiche-film {
    flex-direction: column;
    margin-top: -80px;
  }

  .fiche-poster {
    width: 160px;
  }

  .fiche-poster-bloc {
    flex-direction: row;
    align-items: flex-end;
    gap: 1rem;
  }

  .fiche-poster-bloc .actions-fiche-film {
    flex: 1;
    justify-content: center;
  }
}

.lien-simple {
  color: var(--accent);
  text-decoration: none;
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.03em;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.lien-simple:hover {
  color: var(--accent-hover);
}

.bouton-lien {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.bouton-lien:hover {
  background: none;
}

.form-connexion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 320px;
}

.form-connexion label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--texte-attenue);
}

.form-connexion input {
  padding: 0.6rem;
  background-color: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  color: var(--texte);
}

.nav-droite {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-droite form {
  display: inline-block;
}

.form-favori-icone {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  opacity: 1;
}

.poster-conteneur:hover .form-favori-icone {
  opacity: 1;
}

.bouton-coeur-carte {
  background-color: rgba(18, 18, 20, 0.75) !important;
  backdrop-filter: blur(3px);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

.bouton-coeur-carte svg {
  width: 16px;
  height: 16px;
}

.bouton-coeur-carte svg path {
  fill: none;
  stroke: #ffffff;
  transition:
    fill 0.2s ease,
    stroke 0.2s ease;
}

.bouton-coeur-carte,
.bouton-coeur-carte:hover {
  background-color: rgba(18, 18, 20, 0.75) !important;
}

.bouton-coeur-mini,
.bouton-coeur-mini:hover {
  background-color: rgba(18, 18, 20, 0.6) !important;
}

.bouton-coeur-carte.coeur-actif svg path {
  fill: var(--accent);
  stroke: var(--accent);
}

.bouton-coeur-mini svg path {
  fill: none;
  stroke: #ffffff;
  transition:
    fill 0.2s ease,
    stroke 0.2s ease;
}

.bouton-coeur-mini.coeur-actif svg path {
  fill: var(--accent);
  stroke: var(--accent);
}

.personne-photo-conteneur {
  position: relative;
  flex-shrink: 0;
}

.fiche-poster-conteneur {
  position: relative;
  flex-shrink: 0;
}

.photo-acteur-conteneur {
  position: relative;
}

.form-favori-icone-mini {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.photo-acteur-conteneur:hover .form-favori-icone-mini {
  opacity: 1;
}

.bouton-coeur-mini {
  background-color: rgba(18, 18, 20, 0.75);
  backdrop-filter: blur(3px);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

/* ===== Bouton filtres flottant ===== */
.bouton-filtres-flottant {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background-color: var(--accent);
  color: #121214;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  font-weight: 600;
  font-size: 0.85rem;
}

.badge-actif {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--erreur);
}

/* ===== Panneau lateral (dialog natif, ancre a droite) ===== */
.panel-lateral {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  margin: 0;
  height: 100vh;
  /* dvh = hauteur reellement visible sur mobile : avec 100vh, le bas du panneau
     (pied Effacer / Appliquer) passait sous la barre du navigateur (17/10) */
  height: 100dvh;
  width: min(360px, 90vw);
  max-height: 100vh;
  max-height: 100dvh;
  background-color: var(--fond-carte);
  border: none;
  border-left: 1px solid var(--bordure);
  border-radius: 0;
  padding: 1.5rem;
  overflow-y: auto;
  animation: glisser-depuis-droite 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.panel-lateral::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

@keyframes glisser-depuis-droite {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.panel-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.panel-entete h3 {
  color: var(--accent);
  margin: 0;
}

.form-filtres {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-filtres label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--texte-attenue);
}

.form-filtres input,
.form-filtres select {
  padding: 0.5rem;
  background-color: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  color: var(--texte);
  font-size: 0.85rem;
}

.label-checkbox {
  flex-direction: row !important;
  align-items: center;
  gap: 0.5rem !important;
}

.filtres-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 0.5rem;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.pagination-info {
  color: var(--texte-attenue);
  font-size: 0.85rem;
  line-height: 1;
}

.pagination a.lien-simple {
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.carte-film-conteneur {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.carte-film-conteneur .carte-film-lien {
  display: flex;
  flex: 1;
}

.carte-film-conteneur .carte-film {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.actions-fiche-film {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.form-favori-inline {
  display: inline-block;
}

.bouton-coeur-inline {
  background: transparent;
  padding: 0;
  width: 24px;
  height: 24px;
  color: var(--texte-attenue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.15s ease,
    color 0.2s ease;
}

.coeur-actif {
  color: var(--accent);
}

@media (hover: hover) and (pointer: fine) {
  .bouton-coeur-carte:hover {
    transform: scale(1.1);
  }

  .bouton-coeur-mini:hover {
    transform: scale(1.15);
  }

  .bouton-note-carte:hover,
  .bouton-vu-carte:hover {
    transform: scale(1.1);
    background-color: rgba(18, 18, 20, 0.75);
  }

  /* Survol harmonise (10/10) : sur les 4 icones d'affiche, le survol
     dore uniquement le trait de l'icone (+ leger zoom). Plus de fond dore
     reserve au seul coeur, ni d'inversion en blanc sur le coeur actif. */
  .bouton-coeur-carte:not(.coeur-actif):hover svg path,
  .bouton-vu-carte:hover svg path,
  .bouton-vu-carte:hover svg circle,
  .bouton-note-carte:hover svg {
    stroke: var(--accent);
  }

  .bouton-watchlist-carte:hover {
    color: var(--accent);
  }
}

.bouton-vu-carte:focus,
.bouton-note-carte:focus {
  outline: none;
  background-color: rgba(18, 18, 20, 0.75);
}

.bouton-vu-carte:focus-visible,
.bouton-note-carte:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.pagination-haute {
  margin-top: 0;
  margin-bottom: 2rem;
}

.badge-attenue {
  font-style: italic;
  opacity: 0.7;
}

.badge-revus {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding-right: 0.3rem;
}

.form-revu-inline {
  display: inline-flex;
}

.form-revu-inline button {
  width: 16px;
  height: 16px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--fond);
  color: var(--texte-attenue);
  border: 1px solid var(--bordure);
  border-radius: 50%;
  font-size: 0.7rem;
  line-height: 1;
  font-weight: 700;
}

.form-revu-inline button:hover {
  background-color: var(--accent);
  color: #121214;
  border-color: var(--accent);
}

.champ-avec-bouton {
  display: flex;
  gap: 0.5rem;
}

.champ-avec-bouton input {
  flex: 1;
}

.films-communs {
  font-size: 0.7rem;
  color: var(--texte-attenue);
  font-style: italic;
  margin-top: 0.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.onglets-conteneur {
  margin-top: 2rem;
}

.onglets-barre {
  display: flex;
  gap: 2rem;
  margin-bottom: 1.5rem;
  align-items: baseline;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--bordure) transparent;
  white-space: nowrap;
}

.onglets-barre button {
  background: transparent;
  border: none;
  padding: 0;
  font-family: "Bebas Neue", "Inter", sans-serif;
  letter-spacing: 0.03em;
  font-weight: 400;
  color: var(--texte-attenue);
  font-size: 2.5rem;
  transition: color 0.2s ease;
  flex-shrink: 0;
}

.onglets-barre button:hover {
  background: transparent;
  color: var(--texte);
}

.onglets-barre button.onglet-actif {
  color: var(--texte);
}

.onglets-barre::-webkit-scrollbar {
  height: 6px;
}

.onglets-barre::-webkit-scrollbar-track {
  background: transparent;
}

.onglets-barre::-webkit-scrollbar-thumb {
  background-color: var(--bordure);
  border-radius: 999px;
}

/* Fondu d'apparition d'un panneau d'onglets : seulement quand on CHANGE
   d'onglet (classe posee par app.js), pas a chaque chargement de page
   (sinon le Top 10 "rejoue" son entree a chaque page de la pagination) */
[data-tab-panneau].panneau-anime {
  animation: apparition 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.autres-roles {
  margin-top: 2.5rem;
}

.autres-roles h3 {
  color: var(--texte-attenue);
  font-size: 1rem;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.accordeon-role {
  border-top: 1px solid var(--bordure);
}

.accordeon-role:last-child {
  border-bottom: 1px solid var(--bordure);
}

.accordeon-role summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  font-family: "Bebas Neue", "Inter", sans-serif;
  letter-spacing: 0.03em;
  font-weight: 400;
  color: var(--texte-attenue);
  font-size: 1.6rem;
  transition: color 0.2s ease;
}

.accordeon-role summary::-webkit-details-marker {
  display: none;
}

.accordeon-role summary::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition:
    transform 0.2s ease,
    color 0.2s ease;
}

.accordeon-role[open] summary::after {
  transform: rotate(45deg);
}

.accordeon-role summary:hover {
  color: var(--texte);
}

.accordeon-role[open] summary {
  color: var(--texte);
}

.accordeon-role .grille-films {
  margin-top: 0.5rem;
  padding-bottom: 1.5rem;
}

h3 + .grille-films,
.grille-films + h3,
.grille-films + .grille-casting {
  margin-top: 2rem;
}

.section-favoris {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.toggle-type-recherche {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.toggle-type-recherche a {
  color: var(--texte-attenue);
  text-decoration: none;
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.03em;
  font-size: 1.2rem;
  transition: color 0.2s ease;
}

.toggle-type-recherche a:hover {
  color: var(--texte);
}

.toggle-type-recherche a.onglet-actif {
  color: var(--accent);
}

.lien-carte-info {
  text-decoration: none;
  color: inherit;
  display: block;
}

@media (max-width: 768px) {
  .pagination:not(.pagination-haute) {
    margin-bottom: 5.5rem;
  }
}

@media (max-width: 768px) {
  /* ===== Formulaire de recherche ===== */
  form.recherche {
    flex-wrap: wrap;
  }

  form.recherche input[type="text"] {
    flex-basis: 100%;
  }

  form.recherche button {
    flex: 1;
  }

  /* ===== Contenu principal ===== */
  main {
    padding: 1rem;
  }

  h1 {
    font-size: 2rem;
  }

  /* ===== Grille : une seule colonne, cartes plus grandes ===== */
  .grille-films {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .grille-casting {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.75rem;
  }

  /* ===== Bouton filtres : plus discret, position inchangee ===== */
  .bouton-filtres-flottant {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }

  /* ===== Panneau de filtres plein ecran ===== */
  .panel-lateral {
    width: 100vw;
  }

  .form-filtres label {
    font-size: 0.85rem;
  }

  .form-filtres input,
  .form-filtres select {
    padding: 0.65rem;
    font-size: 0.95rem;
  }

  /* ===== Onglets fiche personne ===== */
  .onglets-barre {
    gap: 1rem;
  }

  .onglets-barre button {
    font-size: 1.8rem;
  }
}

input[type="radio"]:checked + .puce-choix {
  border-color: var(--accent);
  background-color: var(--accent);
  color: #121214;
}

.champ-intervalle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.champ-intervalle input {
  flex: 1;
  padding: 0.5rem;
  background-color: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  color: var(--texte);
  font-size: 0.85rem;
}

.champ-intervalle span {
  color: var(--texte-attenue);
}

.slider-intervalle {
  margin-bottom: 1rem;
}

.slider-valeurs {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.slider-track-conteneur {
  position: relative;
  height: 32px;
}

.slider-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background-color: var(--bordure);
  border-radius: 999px;
  transform: translateY(-50%);
}

.slider-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  background-color: var(--accent);
  border-radius: 999px;
  transform: translateY(-50%);
}

.slider-track-conteneur input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 32px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}

.slider-track-conteneur input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--accent);
  border: 2px solid var(--fond-carte);
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.slider-track-conteneur input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--accent);
  border: 2px solid var(--fond-carte);
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.slider-track-conteneur input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
}

.slider-track-conteneur input[type="range"]::-moz-range-track {
  background: transparent;
}

.slider-valeurs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.slider-valeurs span {
  color: var(--texte-attenue);
}

.valeur-editable {
  width: 65px;
  padding: 0.3rem 0.5rem;
  background-color: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.85rem;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.valeur-editable::-webkit-outer-spin-button,
.valeur-editable::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.valeur-editable:focus {
  outline: none;
  border-color: var(--accent);
}

.valeur-precise {
  width: 90px;
  padding: 0.3rem 0.5rem;
  background-color: var(--fond);
  border: 1px dashed var(--bordure);
  border-radius: var(--rayon);
  color: var(--texte-attenue);
  font-size: 0.75rem;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.valeur-precise::-webkit-outer-spin-button,
.valeur-precise::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.valeur-precise:focus {
  outline: none;
  border-color: var(--accent);
  border-style: solid;
}

.membre-depuis {
  color: #999;
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

.compte-section {
  max-width: 480px;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.compte-section:last-child {
  border-bottom: none;
}

.compte-section h2 {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.05em;
  font-size: 1.3rem;
  color: var(--accent);
  margin-bottom: 1rem;
}

.form-compte {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-compte label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: #ccc;
}

.form-compte input {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 1rem;
}

.form-compte input:focus {
  outline: none;
  border-color: var(--accent);
}

.form-compte button {
  align-self: flex-start;
  background: var(--accent);
  color: #111;
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1.4rem;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.form-compte button:hover {
  opacity: 0.85;
}

.compte-section-danger h2 {
  color: #e05c5c;
}

.compte-section-danger p {
  color: #999;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.bouton-danger {
  background: transparent !important;
  color: #e05c5c !important;
  border: 1px solid #e05c5c !important;
}

.bouton-danger:hover {
  background: #e05c5c !important;
  color: #111 !important;
  opacity: 1 !important;
}

.succes {
  color: #6fbf73;
  background: rgba(111, 191, 115, 0.1);
  border: 1px solid rgba(111, 191, 115, 0.3);
  border-radius: 6px;
  padding: 0.6rem 1rem;
  margin-bottom: 1.5rem;
  max-width: 480px;
}

/* page profil */
.profil-resume {
  max-width: 640px;
  background: linear-gradient(
    135deg,
    rgba(var(--accent-rgb), 0.08),
    rgba(var(--accent-rgb), 0.02)
  );
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 10px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 2.5rem;
}

.profil-resume-texte {
  line-height: 1.6;
  color: #eee;
  margin-bottom: 0.8rem;
}

.profil-resume-pied {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bouton-discret {
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.bouton-discret:hover {
  opacity: 0.8;
}

.profil-resume form button[type="submit"]:not(.bouton-discret) {
  background: var(--accent);
  color: #111;
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  cursor: pointer;
}

.stats-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  max-width: 720px;
  margin-bottom: 2.5rem;
}

.stats-grille-secondaire {
  max-width: 540px;
  margin-top: -1.5rem;
}

.stats-grille-secondaire .stat-carte {
  padding: 0.9rem 1.2rem;
}

.stats-grille-secondaire .stat-valeur {
  font-size: 1.6rem;
}

.stat-carte {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.stat-valeur {
  font-family: "Bebas Neue", sans-serif;
  font-size: 2.2rem;
  letter-spacing: 0.03em;
  color: var(--accent);
  line-height: 1;
}

.stat-libelle {
  font-size: 0.85rem;
  color: #999;
}

.stat-sous-libelle {
  font-size: 0.8rem;
  color: #777;
}

.profil-sous-titre {
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #ccc;
  margin: 1.5rem 0 0.8rem;
}

.profil-sous-titre:first-of-type {
  margin-top: 0;
}

.profil-section {
  max-width: 720px;
  margin-bottom: 2.5rem;
}

.profil-section h2 {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.05em;
  font-size: 1.3rem;
  color: var(--accent);
  margin-bottom: 1rem;
}

.barres-genres {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.barre-genre-ligne {
  display: grid;
  grid-template-columns: 110px 1fr 30px;
  align-items: center;
  gap: 0.8rem;
}

.barre-genre-nom {
  font-size: 0.9rem;
  color: #ccc;
}

.barre-genre-fond {
  background: #1a1a1a;
  border-radius: 4px;
  height: 10px;
  overflow: hidden;
}

.barre-genre-remplissage {
  background: var(--accent);
  height: 100%;
  border-radius: 4px;
}

.barre-genre-nb {
  font-size: 0.85rem;
  color: #999;
  text-align: right;
}

.stat-carte-lien {
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}

.stat-carte-lien:hover {
  border-color: var(--accent);
}

.stat-carte-lien:hover .stat-valeur {
  color: var(--accent-hover);
}

.barre-genre-lien {
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.barre-genre-lien:hover {
  background: rgba(var(--accent-rgb), 0.08);
}

.barre-genre-lien:hover .barre-genre-nom {
  color: var(--accent);
}

@media (max-width: 768px) {
  .barre-genre-ligne {
    grid-template-columns: 90px 1fr 26px;
    gap: 0.5rem;
  }
}

.grappe-actions-carte {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 3;
}

.grappe-actions-carte .form-favori-icone {
  position: static;
}

/* Option B (10/10) : sur les cartes, la grappe passe en colonne dans le
   coin haut-droit pour liberer le tiers bas de l'affiche, ou se trouve
   generalement le titre. Scope a .poster-conteneur : la fiche film
   (.fiche-poster-conteneur) garde sa disposition actuelle. */
.poster-conteneur .grappe-actions-carte {
  top: 0.5rem;
  bottom: auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

/* Pages avec croix de retrait (bibliotheque, favoris, watchlist) :
   la colonne demarre sous la croix */
.poster-conteneur:has(.form-retirer-icone) .grappe-actions-carte {
  top: 2.75rem;
}

/* Marque-page "A voir" sur l'affiche (pages de decouverte uniquement) */
.bouton-watchlist-carte {
  background-color: rgba(18, 18, 20, 0.75);
  backdrop-filter: blur(3px);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  color: #ffffff;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    color 0.2s ease;
}

/* background-color explicite sur :hover/:focus, sinon la regle generique
   button:hover reprend la main (piege deja rencontre en §15/§17) */
.bouton-watchlist-carte:hover,
.bouton-watchlist-carte:focus {
  background-color: rgba(18, 18, 20, 0.75);
  outline: none;
}

.bouton-watchlist-carte:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.bouton-watchlist-carte.watchlist-actif {
  color: var(--accent);
}

.bouton-watchlist-carte.watchlist-actif svg {
  fill: var(--accent);
}

@media (hover: hover) and (pointer: fine) {
  .bouton-watchlist-carte:hover {
    transform: scale(1.1);
  }
}

.bouton-vu-carte,
.bouton-note-carte {
  background-color: rgba(18, 18, 20, 0.75);
  backdrop-filter: blur(3px);
  border-radius: 16px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    padding 0.15s ease;
  flex-shrink: 0;
}

.bouton-vu-carte.vu-actif,
.bouton-note-carte.note-actif {
  padding: 0 10px 0 8px;
}

.bouton-vu-carte svg path,
.bouton-vu-carte svg circle {
  stroke: #ffffff;
  fill: none;
  transition:
    fill 0.2s ease,
    stroke 0.2s ease;
}

.bouton-note-carte svg {
  stroke: #ffffff;
  fill: none;
  transition:
    fill 0.2s ease,
    stroke 0.2s ease;
}

.bouton-note-carte.note-actif svg {
  fill: var(--accent);
  stroke: var(--accent);
}

.bouton-vu-carte.note-confirmee,
.bouton-note-carte.note-confirmee {
  animation: pulseNote 0.4s ease;
}

@keyframes pulseNote {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

.valeur-vu-badge,
.valeur-note-badge {
  display: none;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.8rem;
}

.bouton-vu-carte.vu-actif .valeur-vu-badge,
.bouton-note-carte.note-actif .valeur-note-badge {
  display: block;
}

.slider-note-popover {
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  background: rgba(18, 18, 20, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 14px;
  padding: 0.7rem 0.9rem;
  z-index: 20;
}

.cadran-note {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 45%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.18s ease;
  touch-action: none;
  z-index: 4;
}

.cadran-note.ouvert {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.cadran-note-svg {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
}

.cadran-note-fond {
  fill: rgba(18, 18, 20, 0.88);
  stroke: none;
}

.cadran-note-anneau {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 6;
}

.cadran-note-arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.05s linear;
}

.cadran-note-centre {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cadran-note-icone polygon {
  fill: rgba(255, 255, 255, 0.35);
}

.cadran-note-valeur {
  display: none;
  position: absolute;
  top: -6.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--accent);
  background-color: rgba(18, 18, 20, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 10px;
  padding: 0.3rem 0.65rem;
  white-space: nowrap;
  pointer-events: none;
}

.cadran-note-icone-actif polygon {
  fill: var(--accent);
}

.bouton-note-carte.note-actif:hover .valeur-note-badge,
.bouton-vu-carte.vu-actif:hover .valeur-vu-badge {
  color: var(--accent);
}

.bouton-note-carte.note-actif:hover svg {
  fill: var(--accent);
  stroke: var(--accent);
}

/* ===== Coeur qui pop au clic sur favori, centre sur l'affiche ===== */
.halo-coeur {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
}

.halo-coeur svg {
  width: 45%;
  height: 45%;
  filter: drop-shadow(0 4px 14px rgba(var(--accent-rgb), 0.45));
}

.halo-coeur svg path {
  fill: var(--accent);
}

/* ===== Contour de l'oeil qui pop au centre de l'affiche, avec "+1" ===== */
.halo-vu {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
}

.halo-vu svg {
  width: 45%;
  height: 45%;
  filter: drop-shadow(0 4px 14px rgba(var(--accent-rgb), 0.45));
}

.halo-vu svg path,
.halo-vu svg circle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
}

.filtre-section {
  border-top: 1px solid var(--bordure);
  padding-top: 0.75rem;
}

.filtre-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--texte-attenue);
  list-style: none;
}

.filtre-section summary::-webkit-details-marker {
  display: none;
}

.filtre-section summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--texte-attenue);
  border-bottom: 2px solid var(--texte-attenue);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.filtre-section[open] summary::after {
  transform: rotate(-135deg);
}

.filtre-section > .choix-puces,
.filtre-section > .slider-intervalle,
.filtre-section > .mode-plage-exacte {
  margin-top: 0.75rem;
}

.mode-plage-exacte {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.puce-mode {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background-color: var(--fond);
  border: 1px solid var(--bordure);
  color: var(--texte-attenue);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.puce-mode-active {
  border-color: var(--accent);
  background-color: var(--accent);
  color: #121214;
}

.valeur-exacte input {
  width: 100%;
}

/* --- Top 10 --- */

.top10-section {
  margin-bottom: 2.5rem;
}

.top10-section h2 {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.05em;
  font-size: 1.3rem;
  color: var(--accent);
  margin-bottom: 1rem;
}

.top10-section .profil-sous-titre {
  margin-top: 2rem;
}

.top10-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
  min-height: 3.5rem;
}

.top10-item:not(.top10-settled) {
  opacity: 0;
  transform: translateY(-60px) scale(0.97);
}

.top10-item.top10-cascade {
  animation: top10Tomber 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes top10Tomber {
  from {
    opacity: 0;
    transform: translateY(-60px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.top10-image-conteneur {
  position: relative;
  overflow: hidden;
  border-radius: var(--rayon);
}

.top10-image-conteneur img,
.top10-sans-image {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--rayon);
  background-color: var(--fond-carte);
  display: block;
}

.top10-item img,
.top10-sans-image {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--rayon);
  background-color: var(--fond-carte);
  display: block;
}

.top10-item img,
.top10-sans-image {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--rayon);
  background-color: var(--fond-carte);
  display: block;
}

@media (max-width: 768px) {
  .top10-liste {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
  }

  .top10-item {
    flex: 0 0 100px;
    width: 100px;
    max-width: 100px;
    scroll-snap-align: start;
  }

  .top10-liste.top10-drag-en-cours {
    scroll-snap-type: none;
  }
}

.top10-nom {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 0.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top10-position {
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: 2;
  width: 3.25rem;
  height: 3.25rem;
  box-sizing: border-box;
  background-color: var(--accent);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.4));
  color: var(--fond);
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0.45rem 0 0 0.45rem;
}

.top10-position::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background: linear-gradient(
    135deg,
    transparent 55%,
    rgba(0, 0, 0, 0.28) 100%
  );
  pointer-events: none;
}

.top10-retirer {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.55);
  border: none;
  border-radius: 50%;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  opacity: 0;
  transition:
    opacity 0.15s ease,
    background-color 0.15s ease;
}

.top10-retirer:hover,
.top10-retirer:focus {
  background-color: rgba(0, 0, 0, 0.85);
  outline: none;
}

.top10-item:hover .top10-retirer {
  opacity: 1;
}

.top10-vide {
  opacity: 0.6;
  font-style: italic;
}

.top10-bandeau {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  padding: 1.25rem 1.25rem 1.75rem;
  background: linear-gradient(
    135deg,
    rgba(var(--accent-rgb), 0.42),
    rgba(var(--accent-rgb), 0.06) 65%
  );
  border: 1px solid rgba(var(--accent-rgb), 0.45);
}

.top10-bandeau::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 12% 15%,
      rgba(var(--accent-rgb), 0.35),
      transparent 50%
    ),
    radial-gradient(
      circle at 90% 90%,
      rgba(var(--accent-rgb), 0.18),
      transparent 45%
    );
  pointer-events: none;
}

.top10-bandeau h2 {
  position: relative;
  text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.4);
}

.top10-bandeau .onglets-barre {
  position: relative;
}

.top10-bandeau .onglets-barre button {
  color: rgba(var(--accent-rgb), 0.6);
}

.top10-bandeau .onglets-barre button:hover,
.top10-bandeau .onglets-barre button.onglet-actif {
  color: #f5f5f5;
}

.top10-pool-titre {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.05em;
  font-size: 1.3rem;
  color: var(--accent);
  margin: 2rem 0 1rem;
}

/* Poignee de glisser : sur les items du Top comme sur les cartes du pool en dessous */
.poignee-top10 {
  position: absolute;
  bottom: -2px;
  right: -2px;
  z-index: 2;
  width: 4.25rem;
  height: 4.25rem;
  box-sizing: border-box;
  background-color: rgba(18, 18, 20, 0.85);
  clip-path: polygon(100% 100%, 0 100%, 100% 0);
  filter: drop-shadow(-2px -3px 3px rgba(0, 0, 0, 0.35));
  color: #ffffff;
  cursor: grab;
  opacity: 0;
  touch-action: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 0.6rem 0.6rem 0;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.poignee-top10 svg {
  display: block;
  width: 22px;
  height: 22px;
}

/* Sur les cartes du pool, le bas-droite est deja pris par les icones d'action
   existantes (grappe-actions-carte / coeur mini) : la poignee passe a gauche */

.top10-ajouter {
  position: absolute;
  bottom: 0.4rem;
  left: 0.4rem;
  z-index: 2;
  appearance: none;
  -moz-appearance: none;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.75);
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.03em;
  font-size: 0.6rem;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}

.top10-ajouter:hover {
  transform: scale(1.05);
  background-color: rgba(255, 255, 255, 0.12);
}

.top10-ajouter.top10-ajouter-actif {
  background-color: rgba(0, 0, 0, 0.6);
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--accent);
  opacity: 1;
}

.photo-acteur-conteneur .top10-ajouter {
  left: auto;
  right: 0.4rem;
}

@media (hover: hover) and (pointer: fine) {
  .poster-conteneur:hover .top10-ajouter,
  .photo-acteur-conteneur:hover .top10-ajouter {
    opacity: 1;
  }
}

@media (hover: none) {
  .top10-ajouter {
    opacity: 1; /* toujours visible au tactile, c'est justement le point cle sur mobile */
  }
}

@media (hover: hover) and (pointer: fine) {
  .top10-item:hover .poignee-top10,
  .poster-conteneur:hover .poignee-top10,
  .photo-acteur-conteneur:hover .poignee-top10 {
    opacity: 1;
  }
  .poignee-top10:hover {
    transform: scale(1.15);
  }
}

@media (hover: none) {
  .poignee-top10,
  .top10-retirer {
    opacity: 1;
  }
}

.champ-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Avis et critique */
.liste-avis-membres {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.carte-avis-membre {
  background-color: var(--fond-carte);
  border-radius: var(--rayon);
  padding: 1rem 1.25rem;
}

.carte-avis-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.carte-avis-auteur {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--texte);
}

.carte-avis-note {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent);
  flex-shrink: 0;
}

.carte-avis-texte {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--texte-corps);
  line-height: 1.5;
  margin: 0 0 0.4rem;
}

.avatar-initiale {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--accent);
  color: #121214;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
}

.carte-avis-entete-texte {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.form-supprimer-publication button {
  background: none;
  border: none;
  color: var(--texte-attenue);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 0.25rem;
}

.form-supprimer-publication button:hover {
  color: var(--erreur);
}

.carte-avis-critique {
  font-style: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.carte-avis-critique.etendu {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.bouton-lire-plus {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0;
  margin-top: 0.25rem;
}

.bouton-like {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  color: var(--texte-attenue);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0;
  margin-top: 0.5rem;
}

.bouton-like:hover,
.bouton-like:focus {
  color: var(--accent);
  background-color: transparent;
  outline: none;
}

.bouton-like.aime-actif {
  color: var(--accent);
}

.bouton-like.aime-actif svg {
  fill: var(--accent);
  stroke: var(--accent);
}

.carte-avis-date {
  font-size: 0.75rem;
  color: var(--texte-attenue);
  margin: 0;
}

.case-visibilite {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--texte-attenue);
  margin-top: 0.5rem;
}

.case-visibilite input {
  width: auto;
}

.bouton-discret-plein {
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: var(--accent);
  color: #121214;
  border: none;
  border-radius: var(--rayon);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
}

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  color: #fff;
  font-size: 0.7rem;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 10;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
}

.carte-avis-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.badge-mini {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  color: var(--texte-attenue);
}

.carte-avis-membre.type-avis {
  background-color: var(--fond-carte);
  border-left: 3px solid var(--accent);
  position: relative;
}

.carte-avis-membre.type-critique {
  background-color: var(--fond-carte);
  border-left: 3px solid var(--texte-attenue);
  position: relative;
}

.section-membres {
  position: relative;
  margin: 2rem 0;
  border-radius: 12px;
  overflow: hidden;
  padding: 1.25rem 1.25rem 1.75rem;
  background: linear-gradient(
    135deg,
    rgba(var(--accent-rgb), 0.42),
    rgba(var(--accent-rgb), 0.06) 65%
  );
  border: 1px solid rgba(var(--accent-rgb), 0.45);
}

.section-membres::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 12% 15%,
      rgba(var(--accent-rgb), 0.35),
      transparent 50%
    ),
    radial-gradient(
      circle at 90% 90%,
      rgba(var(--accent-rgb), 0.18),
      transparent 45%
    );
  pointer-events: none;
}

.section-membres .onglets-barre {
  position: relative;
}

.section-membres .onglets-barre button {
  color: rgba(var(--accent-rgb), 0.6);
}

.section-membres .onglets-barre button:hover,
.section-membres .onglets-barre button.onglet-actif {
  color: #f5f5f5;
}

.mini-publication {
  background-color: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}

.mini-publication:last-child {
  margin-bottom: 0;
}

.mini-publication-entete {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.mini-publication-type {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background-color: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 600;
}

.mini-publication-date {
  font-size: 0.7rem;
  color: var(--texte-attenue);
}

.mini-publication-form textarea {
  width: 100%;
  margin-bottom: 0.5rem;
}

.mini-publication-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mini-publication-supprimer {
  margin-top: 0.4rem;
  text-align: right;
}

.mini-publication-supprimer button {
  background: none;
  border: none;
  color: var(--texte-attenue);
  font-size: 0.75rem;
  padding: 0;
  cursor: pointer;
}

.mini-publication-supprimer button:hover {
  color: var(--erreur);
}

.bouton-supprimer-texte {
  background: none;
  border: none;
  color: var(--erreur);
  font-size: 0.75rem;
  padding: 0;
  margin-top: 0.4rem;
  cursor: pointer;
}

.modal-panneau summary:focus {
  outline: none;
}

.modal-panneau summary:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.modal-panneau-limite .modal-panneau-contenu {
  scrollbar-width: thin;
  scrollbar-color: var(--bordure) transparent;
}

.modal-panneau-limite .modal-panneau-contenu::-webkit-scrollbar {
  width: 6px;
}

.modal-panneau-limite .modal-panneau-contenu::-webkit-scrollbar-track {
  background: transparent;
}

.modal-panneau-limite .modal-panneau-contenu::-webkit-scrollbar-thumb {
  background-color: var(--bordure);
  border-radius: 999px;
}

.badge-top10 {
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* Formulaire de confirmation */
.modal-confirmation {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--fond-carte);
  color: var(--texte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1.5rem;
  width: min(320px, 90vw);
}

.modal-confirmation[open] {
  display: block;
}

.modal-confirmation::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.modal-confirmation p {
  margin: 0 0 1.25rem;
}

.modal-confirmation .modal-actions {
  padding: 0;
}

.bouton-danger {
  background-color: var(--erreur);
  color: #fff;
}

/* ===== Talon de ticket (Mes films vus) ===== */
.talon-ticket {
  position: relative;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem 0.85rem;
  border-top: 2px dashed #3a3a3e;
  background-color: rgba(255, 255, 255, 0.025);
}

/* Encoches de perforation : deux disques couleur de page, a moitie
   rognes par l'overflow:hidden de .carte-film */
.talon-ticket::before,
.talon-ticket::after {
  content: "";
  position: absolute;
  top: -8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--fond);
}

.talon-ticket::before {
  left: -7px;
}

.talon-ticket::after {
  right: -7px;
}

.talon-infos {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.talon-type {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

.talon-date {
  font-size: 0.9rem;
  color: var(--texte);
  white-space: nowrap;
}

/* Heure sur sa propre ligne, plus discrete : la date reste d'un seul tenant */
.talon-heure {
  font-size: 0.75rem;
  color: var(--texte-attenue);
  margin-top: -0.1rem;
}

.talon-date-vide {
  color: var(--texte-attenue);
  font-style: italic;
  font-size: 0.8rem;
}


.talon-tampon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Bebas Neue", "Inter", sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  transform: rotate(-12deg);
  opacity: 0.9;
}

.talon-tampon-vide {
  border-style: dashed;
  border-color: var(--bordure);
  color: var(--texte-attenue);
}


.talon-remarque {
  margin-top: 0.2rem;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--texte-corps);
  line-height: 1.35;
}

/* ----- Ticket autonome (fiche film) : une piece par seance ----- */
.tickets-fiche {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.talon-complet {
  margin-top: 0;
  overflow: hidden;
  border-top: none;
  border-radius: var(--rayon);
  background-color: var(--fond-carte);
  padding: 0.75rem 0.85rem;
}

/* Encoches a mi-hauteur sur les deux bords */
.talon-complet::before,
.talon-complet::after {
  top: 50%;
  transform: translateY(-50%);
}

/* Perforation verticale entre les infos et le tampon */
.talon-complet:has(.talon-tampon) .talon-infos {
  flex: 1;
  padding-right: 0.75rem;
  border-right: 2px dashed #3a3a3e;
}


/* ===== Talon cliquable : porte d'entree du carnet ===== */
.talon-ticket[data-open-modal] {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.talon-chevron {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  color: #5c5c62;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.talon-tampon {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (hover: hover) and (pointer: fine) {
  .talon-ticket[data-open-modal]:hover {
    background-color: rgba(255, 255, 255, 0.06);
  }

  .talon-ticket[data-open-modal]:hover .talon-chevron {
    color: var(--accent);
    transform: translateX(2px);
  }

  .talon-ticket[data-open-modal]:hover .talon-tampon {
    transform: rotate(0deg) scale(1.05);
  }
}

.talon-ticket[data-open-modal]:focus {
  outline: none;
}

.talon-ticket[data-open-modal]:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -2px;
}

/* Indicateurs : un par contenu du carnet, avec compteur */
.talon-indicateurs {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.35rem;
}

.talon-indicateur {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  color: var(--texte-attenue);
}

/* ===== Carnet du film (modale) — refonte 10/10 =====
   Prefixe .carnet partout : l'emporte sur les regles generiques
   .modal-visionnage (labels en colonne, inputs, etc.) sans !important. */
/* Hauteur FIXE (et non max-height) : le carnet ne change plus de taille
   quand on passe d'un onglet a l'autre, seul le contenu de la page defile.
   dvh = hauteur reelle visible sur mobile (barres du navigateur deduites). */
.modal-visionnage.carnet {
  width: min(440px, 92vw);
  height: min(680px, 88vh);
  height: min(680px, 88dvh);
  max-height: none;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background-color: var(--fond-carte);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* --- En-tete : affiche en fondu --- */
.carnet-entete {
  position: relative;
  flex-shrink: 0;
  overflow: hidden; /* rogne le flou de l'affiche : pas de bord net en bas */
  min-height: 150px;
  display: flex;
  align-items: center; /* affiche + titre centres verticalement dans le bandeau */
  padding: 1.25rem 3.25rem 1.25rem 1.25rem;
}

.carnet-fond {
  position: absolute;
  /* deborde un peu pour que le flou ne laisse pas de bords clairs ;
     rogne par overflow:hidden de .carnet-entete (pas de transform) */
  inset: -24px;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), transparent 60%),
    var(--fond-carte-hover);
  background-size: cover;
  background-position: center 25%;
  filter: blur(14px) saturate(1.2);
  opacity: 0.55;
}

.carnet-entete::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(28, 28, 31, 0.05) 0%, rgba(28, 28, 31, 0.45) 60%, var(--fond-carte) 100%);
  pointer-events: none;
}

/* Pas d'anneau de focus sur le carnet lui-meme a l'ouverture */
.modal-visionnage.carnet:focus,
.modal-visionnage.carnet:focus-visible {
  outline: none;
}

.carnet .carnet-fermer {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  z-index: 2;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  background-color: rgba(18, 18, 20, 0.55);
  color: var(--texte);
  display: flex;
  align-items: center;
  justify-content: center;
}

.carnet .carnet-fermer:hover,
.carnet .carnet-fermer:focus {
  background-color: rgba(18, 18, 20, 0.85);
  outline: none;
}

.carnet-identite {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.carnet-identite > div {
  min-width: 0;
}

.carnet-affiche {
  width: 64px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.carnet-surtitre {
  margin: 0;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

.carnet .carnet-titre {
  margin: 0.1rem 0 0;
  font-family: "Inter", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  color: var(--texte);
}

/* --- Barre : compteur de visionnages + tampon d'evaluation --- */
.carnet-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.25rem 0.4rem;
  flex-shrink: 0;
}

.carnet-vus {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--texte-attenue);
}

.carnet-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--bordure);
  border-radius: 999px;
}

.carnet .carnet-stepper button {
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  color: var(--texte-attenue);
  font-size: 1rem;
  font-weight: 400;
  border-radius: 50%;
}

.carnet .carnet-stepper button:hover,
.carnet .carnet-stepper button:focus {
  background: transparent;
  color: var(--accent);
  outline: none;
}

.carnet-stepper [data-vus-valeur] {
  min-width: 1.5rem;
  text-align: center;
  color: var(--texte);
  font-weight: 600;
}

.carnet .carnet-tampon {
  width: 70px;
  height: 70px;
  padding: 0;
  border-radius: 50%;
  border: 2px dashed var(--bordure);
  background: transparent;
  color: var(--texte-attenue);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(-10deg);
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.2s ease,
    color 0.2s ease;
}

.carnet .carnet-tampon.note-actif {
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent);
}

/* au survol, le tampon se redresse : chiffre bien horizontal */
.carnet .carnet-tampon:hover,
.carnet .carnet-tampon:focus {
  background: transparent;
  transform: rotate(0deg) scale(1.05);
  outline: none;
}

.carnet .carnet-tampon.note-confirmee {
  animation: pulseNote 0.4s ease;
}

.carnet-tampon-valeur {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
}

.carnet-tampon-valeur:empty::before {
  content: "–";
}

.carnet-tampon small {
  font-size: 0.5rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 0.15rem;
  opacity: 0.8;
}

/* Cadran : centre sur le carnet, au-dessus du contenu */
.carnet > .cadran-note {
  width: 170px;
  z-index: 6;
}

.carnet > .cadran-note .cadran-note-valeur {
  top: -3.5rem;
}

/* --- Onglets : petites capitales, soulignement dore --- */
.carnet-onglets {
  display: flex;
  gap: 1.4rem;
  padding: 0.6rem 1.25rem 0;
  border-bottom: 1px solid var(--bordure);
  flex-shrink: 0;
}

.carnet .carnet-onglet {
  padding: 0.6rem 0 0.65rem;
  margin-bottom: -1px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: #8a8a90; /* contraste AA (4,9:1 sur les cartes), 18/10 */
  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.carnet .carnet-onglet:hover,
.carnet .carnet-onglet:focus {
  background: transparent;
  color: var(--texte);
  outline: none;
}

.carnet .carnet-onglet.onglet-actif {
  color: var(--texte);
  border-bottom-color: var(--accent);
}

.carnet-onglet em {
  font-style: normal;
  color: var(--accent);
  margin-left: 0.35rem;
}

/* --- Page : seule zone qui defile --- */
.carnet .carnet-page {
  flex: 1;
  min-height: 0;
  padding: 1rem 1.25rem 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--bordure) transparent;
}

.carnet .carnet-page::-webkit-scrollbar {
  width: 6px;
}

.carnet .carnet-page::-webkit-scrollbar-thumb {
  background-color: var(--bordure);
  border-radius: 999px;
}

.carnet-section {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.carnet-section[hidden] {
  display: none;
}

.carnet-etiquette {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

/* --- Seances : tickets lisibles, depliables --- */
.carnet .carnet-ticket {
  position: relative;
  width: 100%;
  display: flex;
  padding: 0;
  border-radius: var(--rayon);
  background-color: #232327;
  color: var(--texte);
  font-weight: 400;
  text-align: left;
  transition: background-color 0.2s ease;
}

.carnet .carnet-ticket:hover,
.carnet .carnet-ticket:focus {
  background-color: #29292d;
  outline: none;
}

/* encoches de part et d'autre de la perforation */
.carnet .carnet-ticket::before,
.carnet .carnet-ticket::after {
  content: "";
  position: absolute;
  right: 52px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--fond-carte);
}

.carnet .carnet-ticket::before {
  top: -7px;
}

.carnet .carnet-ticket::after {
  bottom: -7px;
}

.carnet-ticket-infos {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.7rem 0.85rem;
  min-width: 0;
}

.carnet-ticket-date {
  font-size: 0.95rem;
}

.carnet-ticket-date i {
  font-style: normal;
  font-size: 0.8rem;
  color: var(--texte-attenue);
  margin-left: 0.4rem;
}

.carnet-ticket-remarque {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--texte-corps);
}

.carnet-ticket-talon {
  width: 59px;
  flex-shrink: 0;
  border-left: 2px dashed #3a3a3e;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5c5c62;
  font-size: 1.2rem;
  transition: color 0.2s ease;
}

.carnet .carnet-ticket:hover .carnet-ticket-talon {
  color: var(--accent);
}

.carnet .carnet-ticket-vierge {
  width: 100%;
  padding: 0.85rem;
  border: 1.5px dashed #3a3a3e;
  border-radius: var(--rayon);
  background: transparent;
  color: var(--texte-attenue);
  font-weight: 400;
  font-size: 0.85rem;
}

.carnet .carnet-ticket-vierge:hover,
.carnet .carnet-ticket-vierge:focus {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

/* --- Edition (seance ou publication depliee) --- */
.carnet-edition {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.85rem;
  border-radius: var(--rayon);
  background-color: #232327;
}

.carnet-edition[hidden] {
  display: none;
}

.carnet-edition form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.carnet-ligne {
  display: flex;
  gap: 0.6rem;
}

.carnet .carnet-champ {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

.carnet-champ-heure {
  flex: 0 0 7rem;
}

.carnet input[type="date"],
.carnet input[type="time"],
.carnet input[type="text"],
.carnet textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  background-color: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 6px;
  color: var(--texte);
  font-family: "Inter", sans-serif;
  font-size: 0.88rem;
  letter-spacing: normal;
  text-transform: none;
}

.carnet input:focus,
.carnet textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.carnet textarea {
  resize: vertical;
  min-height: 5.5rem;
}

/* Choix par mots soulignes (type de seance, avis/critique) */
.choix-mots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}

.carnet .mot-choix {
  display: inline;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  font-size: 0.85rem;
  color: #7a7a80;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.carnet .mot-choix:hover {
  color: var(--texte);
}

.choix-mots input:checked + .mot-choix {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.carnet-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.carnet-actions:not(:has(.carnet-visibilite)) {
  justify-content: flex-end;
}

/* Action principale du carnet : texte dore espace, pas de bouton plein */
.carnet .carnet-valider {
  padding: 0.45rem 0.2rem;
  background: transparent;
  border-radius: 0;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.carnet .carnet-valider:hover,
.carnet .carnet-valider:focus {
  background: transparent;
  color: var(--accent-hover);
  border-bottom-color: var(--accent-hover);
  outline: none;
}

.carnet .carnet-valider span {
  display: inline-block;
  transition: transform 0.2s ease;
}

.carnet .carnet-valider:hover span {
  transform: translateX(3px);
}

/* Visibilite d'une publication : bascule Prive / Public (case cachee) */
.carnet .carnet-visibilite label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--texte-attenue);
  cursor: pointer;
  transition: color 0.2s ease;
}

.carnet .carnet-visibilite label:hover {
  color: var(--texte);
}

.carnet-visibilite .visibilite-public {
  display: none;
}

.carnet-visibilite input:checked + label {
  color: var(--accent);
}

.carnet-visibilite input:checked + label .visibilite-prive {
  display: none;
}

.carnet-visibilite input:checked + label .visibilite-public {
  display: inline;
}

.carnet .carnet-lien {
  padding: 0.45rem 0.4rem;
  background: transparent;
  color: var(--texte-attenue);
  font-size: 0.82rem;
  font-weight: 400;
}

.carnet .carnet-lien:hover,
.carnet .carnet-lien:focus {
  background: transparent;
  color: var(--texte);
  outline: none;
}

.carnet .carnet-lien-danger:hover,
.carnet .carnet-lien-danger:focus {
  color: var(--erreur);
}

.carnet-supprimer {
  text-align: right;
  margin-top: -0.35rem;
}

.carnet .carnet-case {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--texte-attenue);
}

.carnet .carnet-case input {
  width: auto;
  padding: 0;
}

/* --- Seance depliee : le ticket reste en tete, l'edition se detache dessous --- */
.carnet .carnet-bloc.deplie .carnet-ticket {
  border-radius: var(--rayon) var(--rayon) 0 0;
}

.carnet .carnet-bloc.deplie .carnet-ticket::after {
  display: none; /* l'encoche basse disparait : le ticket se prolonge */
}

.carnet .carnet-bloc.deplie .carnet-ticket-talon {
  color: var(--accent);
}

.carnet-ticket-talon {
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.carnet .carnet-bloc.deplie .carnet-ticket-talon {
  transform: rotate(90deg);
}

.carnet .carnet-bloc.deplie .carnet-ticket + .carnet-edition {
  border-radius: 0 0 var(--rayon) var(--rayon);
  border-top: 2px dashed #3a3a3e; /* perforation entre ticket et edition */
}

.carnet .carnet-bloc.deplie .carnet-ticket-vierge {
  border-color: var(--accent);
  color: var(--accent);
  margin-bottom: 0.5rem;
}

/* --- Rubriques d'une seance : Quand / Ou / Souvenir --- */
.seance-rubrique {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.8rem 0;
  border-top: 1px solid #2f2f34;
}

.seance-rubrique:first-child {
  border-top: none;
  padding-top: 0.1rem;
}

.seance-rubrique-titre {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a8a90; /* contraste AA (4,9:1 sur les cartes), 18/10 */
}

.seance-phrase {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.9rem;
  color: var(--texte-attenue);
}

/* Champs "texte" : pas de boite, un simple souligne pointille */
.carnet .seance-rubrique input.champ-texte {
  width: auto;
  padding: 0.1rem 0.1rem 0.2rem;
  background: transparent;
  border: none;
  border-bottom: 1px dashed #4a4a50;
  border-radius: 0;
  color: var(--texte);
  font-size: 1rem;
  color-scheme: dark;
  transition: border-color 0.2s ease;
}

.carnet .seance-rubrique input.champ-texte:hover {
  border-bottom-color: #7a7a80;
}

.carnet .seance-rubrique input.champ-texte:focus {
  outline: none;
  border-bottom: 1px solid var(--accent);
}

.carnet .seance-rubrique input.champ-date {
  width: 9.5rem;
}

.carnet .seance-rubrique input.champ-heure {
  width: 6.5rem;
}

.carnet .seance-rubrique input.champ-remarque {
  width: 100%;
  font-size: 0.9rem;
  font-style: italic;
}

.carnet .seance-rubrique input::-webkit-calendar-picker-indicator {
  opacity: 0.45;
  cursor: pointer;
}

.carnet .seance-rubrique input::-webkit-calendar-picker-indicator:hover {
  opacity: 0.9;
}

.carnet-edition .carnet-actions {
  padding-top: 0.6rem;
  border-top: 1px solid #2f2f34;
}

.carnet-actions-droite {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

/* --- Avis et critiques --- */
.carnet-publier {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.carnet-sous-titre {
  margin: 0.75rem 0 0;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.carnet .carnet-citation {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--rayon);
  background-color: #232327;
  color: var(--texte);
  font-weight: 400;
  text-align: left;
}

.carnet .carnet-citation:hover,
.carnet .carnet-citation:focus {
  background-color: #29292d;
  outline: none;
}

.carnet-citation-texte {
  font-size: 0.88rem;
  font-style: italic;
  color: var(--texte-corps);
  line-height: 1.45;
}

/* --- Mobile : panneau du bas --- */
@media (max-width: 768px) {
  .modal-visionnage.carnet {
    width: 100%;
    height: 90vh;
    height: 90dvh;
    max-height: none;
    border-radius: 16px 16px 0 0;
  }

  .carnet-entete {
    min-height: 124px;
    padding: 1.5rem 3rem 1rem 1rem;
  }

  .carnet-affiche {
    width: 50px;
  }

  .carnet .carnet-titre {
    font-size: 1.05rem;
    /* titres longs : 2 lignes max */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .carnet-barre {
    padding: 0.75rem 1rem 0.3rem;
  }

  .carnet-onglets {
    padding: 0.5rem 1rem 0;
    gap: 1.1rem;
  }

  .carnet .carnet-page {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .carnet .carnet-tampon {
    width: 62px;
    height: 62px;
  }

  /* date + heure empilees sur petit ecran */
  .carnet-ligne {
    flex-wrap: wrap;
  }

  .carnet-champ-heure {
    flex: 1 1 7rem;
  }

  .carnet .modal-poignee {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
  }

  .carnet .carnet-page {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

/* La note se lit desormais sur le tampon : l'etoile de l'affiche reste
   un bouton de notation rapide, sans chiffre */
.carte-film:has(.talon-ticket) .valeur-note-badge {
  display: none !important;
}

.carte-film:has(.talon-ticket) .bouton-note-carte.note-actif {
  padding: 0;
}

/* ===== Accessibilite ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== Croix de fermeture / retrait (tout le site) =====
   Trait fin en SVG a la place du caractere "×" (trop gras). */
.icone-croix {
  display: block;
  flex-shrink: 0;
}

.carnet-fermer .icone-croix {
  width: 16px;
  height: 16px;
}

.bouton-croix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
}

.form-retirer-icone button .icone-croix,
.top10-retirer .icone-croix {
  width: 12px;
  height: 12px;
}

/* Croix de retrait : quart de tour au survol */
.form-retirer-icone .icone-croix,
.top10-retirer .icone-croix {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (hover: hover) and (pointer: fine) {
  .form-retirer-icone button:hover .icone-croix,
  .top10-retirer:hover .icone-croix {
    transform: rotate(90deg);
  }
}

/* ===== Boite de confirmation — meme langage que le carnet ===== */
.modal-confirmation {
  width: min(380px, 90vw);
  padding: 1.6rem 1.6rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  background-color: var(--fond-carte);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.modal-confirmation:focus,
.modal-confirmation:focus-visible {
  outline: none;
}

.modal-confirmation .confirmation-question {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--texte);
}

.modal-confirmation .confirmation-details {
  margin: 0.6rem 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--texte-corps);
}

.confirmation-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--bordure);
}

.modal-confirmation .confirmation-bouton {
  padding: 0.4rem 0.1rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  color: var(--texte-attenue);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.modal-confirmation .confirmation-bouton:hover,
.modal-confirmation .confirmation-bouton:focus {
  background: transparent;
  color: var(--texte);
  outline: none;
}

.modal-confirmation .confirmation-bouton:focus-visible {
  border-bottom-color: currentColor;
}

.modal-confirmation .confirmation-valider {
  color: var(--accent);
}

.modal-confirmation .confirmation-valider:hover,
.modal-confirmation .confirmation-valider:focus {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-hover);
}

/* Suppression definitive : rouge attenue, jamais un aplat */
.modal-confirmation .confirmation-valider.confirmation-danger {
  color: #e07a6a;
}

.modal-confirmation .confirmation-valider.confirmation-danger:hover,
.modal-confirmation .confirmation-valider.confirmation-danger:focus {
  color: #f0907f;
  border-bottom-color: #f0907f;
}

/* =====================================================================
   FICHE FILM — refonte 10/10 (prefixe ff-)
   ===================================================================== */
.ff-hero {
  height: 340px;
  margin: -2rem -2rem 0;
  background-color: var(--fond-carte);
  background-size: cover;
  background-position: center 20%;
  position: relative;
}

.ff-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(18, 18, 20, 0.15) 0%, rgba(18, 18, 20, 0.55) 55%, var(--fond) 100%);
}

/* --- En-tete : affiche + identite --- */
.ff-entete {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 1.75rem;
  margin-top: -170px;
}

.ff-affiche {
  width: 200px;
  flex-shrink: 0;
}

.ff-affiche .fiche-poster {
  width: 100%;
  display: block;
}

/* Icones de l'affiche : meme colonne haut-droite que sur les cartes */
.ff-affiche .grappe-actions-carte {
  top: 0.5rem;
  bottom: auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.ff-identite {
  min-width: 0;
  padding-bottom: 0.4rem;
  /* lisible meme quand le texte passe sur l'image de fond (mobile) */
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}

.ff-surtitre {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

/* Annee et genres cliquables : meme couleur que le texte, soulignement fin au survol */
.ff-surtitre-lien {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.ff-surtitre-lien:hover,
.ff-surtitre-lien:focus-visible {
  color: var(--texte);
  border-bottom-color: var(--accent);
  outline: none;
}

.ff-titre {
  margin: 0.35rem 0 0;
  font-family: "Inter", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--texte);
}

.ff-titre-original {
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
  color: var(--texte-attenue);
}

.ff-accroche {
  margin: 0.6rem 0 0;
  font-size: 1rem;
  font-style: italic;
  color: var(--texte-corps);
}

.ff-signatures {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  color: var(--texte-attenue);
}

.ff-signatures a {
  color: var(--texte);
  text-decoration: none;
  border-bottom: 1px dashed #4a4a50;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.ff-signatures a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.ff-sep {
  margin: 0 0.4rem;
}

/* --- Trois evaluations --- */
.ff-evaluations {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.ff-evaluation {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  background-color: var(--fond-carte);
  min-width: 0;
}

.ff-evaluation-moi {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ff-evaluation-moi:hover {
  background-color: var(--fond-carte-hover);
}

.ff-evaluation-moi:hover .ff-tampon {
  transform: rotate(0deg) scale(1.05);
}

.ff-evaluation-moi:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.ff-pastille {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
}

.ff-pastille-tmdb {
  border: 2px solid #4a4a50;
  color: #c8c8c8;
}

.ff-pastille-membres {
  border: 2px solid #9a7a2a;
  color: var(--accent);
}

.ff-pastille-vide {
  border: 2px dashed var(--bordure);
  color: var(--texte-attenue);
}

.ff-tampon {
  flex-shrink: 0;
}

.ff-evaluation-titre {
  margin: 0;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

.ff-evaluation-detail {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  color: #8a8a90; /* contraste AA (4,9:1 sur les cartes), 18/10 */
}

/* --- Sections --- */
.ff-section {
  margin-top: 2.5rem;
}

.ff-section-titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.ff-section-titre h2 {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

.ff-lien,
a.ff-lien {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.ff-lien:hover,
.ff-lien:focus {
  background: transparent;
  color: var(--accent-hover);
  outline: none;
}

.ff-lien-discret {
  color: var(--texte-attenue);
}

.ff-lien-discret:hover,
.ff-lien-discret:focus {
  color: var(--texte);
}

.ff-synopsis {
  margin: 0;
  max-width: 760px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--texte-corps);
}

.texte-replie {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ff-lire-suite {
  margin-top: 0.5rem;
}

.ff-vide {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--texte-attenue);
}

/* --- Publications des membres --- */
.ff-avis-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.ff-avis-autres {
  margin-top: 0.85rem;
}

.ff-avis-grille[hidden] {
  display: none;
}

.carte-avis-membre.ff-avis {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 1.1rem;
  border-left: none;
  border-radius: 12px;
  background-color: var(--fond-carte);
}

.ff-avis-entete {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.ff-avis-auteur {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ff-avis-nom {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--texte);
}

.ff-avis-meta {
  font-size: 0.72rem;
  color: var(--texte-attenue);
}

.ff-avis-badges {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.ff-avis-note {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  /* droit : seuls les tampons cliquables (les siens) sont inclines */
}

.ff-avis-texte {
  margin: 0;
  font-size: 0.92rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--texte-corps);
}

.ff-avis-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.ff-avis-pied .bouton-like {
  margin-top: 0;
}

/* Appel a donner son avis : ticket vierge */
.ff-appel {
  width: 100%;
  margin-top: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.1rem;
  border: 1.5px dashed #3a3a3e;
  border-radius: 12px;
  background: transparent;
  color: var(--texte-attenue);
  font-size: 0.9rem;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.ff-appel b {
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ff-appel:hover,
.ff-appel:focus {
  background: transparent;
  border-color: var(--accent);
  color: var(--texte);
  outline: none;
}

/* --- Mon carnet --- */
.ff-tickets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}

.ff-ticket-vierge {
  min-height: 64px;
  border: 1.5px dashed #3a3a3e;
  border-radius: var(--rayon);
  background: transparent;
  color: var(--texte-attenue);
  font-size: 0.88rem;
  font-weight: 400;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.ff-ticket-vierge:hover,
.ff-ticket-vierge:focus {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.ff-retirer {
  margin-top: 0.85rem;
  text-align: right;
}

/* --- Bandeaux defilants (equipe, distribution, recommandations) --- */
.ff-bandeau {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  /* overflow-x: auto rogne aussi en vertical : on laisse 6px d'air autour
     (liseré du film courant, zoom au survol) et on compense par une marge
     negative pour garder l'alignement avec le reste de la page */
  padding: 6px 6px 0.6rem;
  margin: -6px -6px 0;
  scroll-padding-left: 6px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--bordure) transparent;
}

.ff-bandeau::-webkit-scrollbar {
  height: 6px;
}

.ff-bandeau::-webkit-scrollbar-thumb {
  background-color: var(--bordure);
  border-radius: 999px;
}

.ff-bandeau > .carte-acteur-lien,
.ff-bandeau > .ff-reco {
  flex: 0 0 110px;
  scroll-snap-align: start;
}

.ff-reco {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-decoration: none;
  color: var(--texte);
}

.ff-reco img,
.ff-reco .pas-affiche {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--rayon);
  margin-bottom: 0.35rem;
  transition: transform 0.3s ease;
}

.ff-reco:hover img {
  transform: scale(1.03);
}

.ff-reco-titre {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ff-reco:hover .ff-reco-titre {
  color: var(--accent);
}

.ff-reco-annee {
  font-size: 0.75rem;
  color: var(--texte-attenue);
}

.ff-video {
  margin: 0;
  max-width: 820px;
  border-radius: 12px;
}

/* --- Fiche technique --- */
.ff-technique {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem 1.5rem;
  margin: 0;
  padding: 1.1rem 1.25rem;
  border-radius: 12px;
  background-color: var(--fond-carte);
}

.ff-technique > div {
  min-width: 0;
}

.ff-technique-large {
  grid-column: 1 / -1;
}

.ff-technique dt {
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a8a90; /* contraste AA (4,9:1 sur les cartes), 18/10 */
}

.ff-technique dd {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  color: var(--texte-corps);
}

/* --- Mobile --- */
@media (max-width: 768px) {
  .ff-hero {
    height: 220px;
    margin: -1rem -1rem 0;
  }

  .ff-entete {
    gap: 1rem;
    margin-top: -110px;
  }

  .ff-affiche {
    width: 120px;
  }

  .ff-titre {
    font-size: 1.5rem;
  }

  .ff-accroche {
    font-size: 0.9rem;
  }

  .ff-evaluations {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .ff-evaluation {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.45rem;
    padding: 0.75rem 0.4rem;
  }

  .ff-evaluation-titre {
    font-size: 0.58rem;
    letter-spacing: 0.1em;
  }

  .ff-evaluation-detail {
    font-size: 0.7rem;
  }

  .ff-avis-grille {
    grid-template-columns: 1fr;
  }

  .ff-section {
    margin-top: 2rem;
  }

  .ff-bandeau > .carte-acteur-lien,
  .ff-bandeau > .ff-reco {
    flex-basis: 96px;
  }
}

/* ===== Generique complet (distribution + equipe technique) ===== */
.ff-retour {
  display: inline-block;
  margin-bottom: 1.25rem;
}

.generique-titre {
  margin-bottom: 1.25rem;
}

.generique-onglets {
  display: flex;
  gap: 1.6rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--bordure);
}

/* reprend le style des onglets du carnet hors de la modale */
.generique-onglets .carnet-onglet {
  padding: 0.6rem 0 0.65rem;
  margin-bottom: -1px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: #8a8a90; /* contraste AA (4,9:1 sur les cartes), 18/10 */
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.generique-onglets .carnet-onglet:hover,
.generique-onglets .carnet-onglet:focus {
  background: transparent;
  color: var(--texte);
  outline: none;
}

.generique-onglets .carnet-onglet.onglet-actif {
  color: var(--texte);
  border-bottom-color: var(--accent);
}

.generique-onglets .carnet-onglet em {
  font-style: normal;
  color: var(--accent);
  margin-left: 0.35rem;
}

.generique-departement {
  margin-top: 2rem;
}

section[data-tab-panneau] > .generique-departement:first-child {
  margin-top: 0;
}

/* ===== Photo manquante (tout le site) =====
   Silhouette generique au trait fin dore sur fond sombre degrade. */
.pas-photo {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: inline-size;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='20 22 60 60' fill='none' stroke='%23c9a55a' stroke-opacity='.5' stroke-width='.75' stroke-linecap='round'%3E%3Ccircle cx='50' cy='38' r='13'/%3E%3Cpath d='M24 80c2-15 13-24 26-24s24 9 26 24'/%3E%3C/svg%3E") center 75% / 88% auto no-repeat,
    linear-gradient(180deg, #1d1d21 0%, #131315 100%);
  border: none;
}

/* Initiales conservees dans le HTML mais masquees : la silhouette suffit
   (lettres jugees trop lourdes le 10/10) */
.pas-photo-initiales {
  display: none;
}

/* fiche personne sans photo : meme format que l'image */
.personne-photo.pas-photo {
  aspect-ratio: 2 / 3;
}

/* ===== Generique : sommaire des departements + retour en haut ===== */
.generique-sommaire {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-bottom: 2rem;
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  background-color: var(--fond-carte);
}

.generique-sommaire a {
  font-size: 0.85rem;
  color: var(--texte-attenue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.generique-sommaire a:hover {
  color: var(--texte);
  border-bottom-color: var(--accent);
}

.generique-sommaire em {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--accent);
  margin-left: 0.3rem;
}

/* la barre de navigation est collante : on decale l'arrivee des ancres */
.generique-departement,
#haut {
  scroll-margin-top: 90px;
}

.retour-haut {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 15;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background-color: rgba(28, 28, 31, 0.85);
  backdrop-filter: blur(6px);
  color: var(--texte);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.retour-haut.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.retour-haut:hover,
.retour-haut:focus {
  background-color: rgba(28, 28, 31, 0.95);
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

/* Photo de personne : bloc, pour que la carte ait exactement la meme
   hauteur avec ou sans photo (sinon espace de ligne de base sous l'img
   et coeur decale de quelques pixels) */
.photo-acteur-conteneur img,
.photo-acteur-conteneur .pas-photo {
  display: block;
}

/* ===== Fiche film : infos techniques supplementaires ===== */
.ff-etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.55rem 0 0;
}

.ff-etiquette {
  padding: 0.15rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--texte);
  text-shadow: none;
}

.ff-etiquette-statut {
  border-color: var(--accent);
  color: var(--accent);
}

/* Film courant dans le bandeau de la saga */
.ff-reco-courant img,
.ff-reco-courant .pas-affiche {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ff-reco-courant .ff-reco-annee {
  color: var(--accent);
}

.ff-mots-cles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem !important;
}

.ff-mots-cles span {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.05);
  font-size: 0.78rem;
  color: var(--texte-attenue);
}

.ff-liens-externes {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.ff-liens-externes a {
  color: var(--texte);
  text-decoration: none;
  border-bottom: 1px dashed #4a4a50;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.ff-liens-externes a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ===== Favoris : onglets hors du cadre Top 10 (10/10) ===== */
.favoris-onglets {
  margin-bottom: 1.25rem;
}

.top10-bandeau h2 {
  position: relative;
  margin: 0 0 1rem;
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f0d68a;
  text-shadow: none;
}

.top10-pool-titre {
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texte-attenue);
  margin: 2.25rem 0 1rem;
}

/* =====================================================================
   FILTRES — refonte 10/10 : meme langage que le carnet
   (prefixe .panel-lateral : l'emporte sur les anciennes regles)
   ===================================================================== */

/* --- Bouton flottant : pastille sombre + compteur --- */
.bouton-filtres-flottant {
  background-color: rgba(28, 28, 31, 0.92);
  color: var(--texte);
  border: 1px solid #3a3a3e;
  backdrop-filter: blur(6px);
  font-weight: 500;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.bouton-filtres-flottant:hover,
.bouton-filtres-flottant:focus {
  background-color: rgba(28, 28, 31, 0.98);
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.filtres-compteur {
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background-color: var(--accent);
  color: var(--fond);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* --- Filtres actifs sur la page --- */
.filtres-actifs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: -0.5rem 0 0.9rem;
}

.filtre-etiquette {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.6rem 0.3rem 0.75rem;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background-color: var(--fond-carte);
  color: var(--texte-corps);
  font-size: 0.82rem;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.filtre-etiquette b {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a7a80;
}

.filtre-etiquette .icone-croix {
  color: var(--texte-attenue);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.filtre-etiquette:hover {
  border-color: #4a4a50;
  color: var(--texte);
}

.filtre-etiquette:hover .icone-croix {
  transform: rotate(90deg);
  color: var(--texte);
}

.filtres-tout-effacer {
  margin-left: 0.35rem;
}

.filtres-resume {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
  color: var(--texte-attenue);
}

/* --- Panneau --- */
.panel-lateral {
  width: min(380px, 92vw);
  padding: 0;
  display: none;
  flex-direction: column;
  background-color: var(--fond-carte);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.5);
}

.panel-lateral[open] {
  display: flex;
}

.panel-lateral:focus,
.panel-lateral:focus-visible {
  outline: none;
}

.panel-lateral .panel-entete {
  margin: 0;
  padding: 1.1rem 1.25rem 0.6rem;
  flex-shrink: 0;
}

.panel-lateral .panel-entete h3 {
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

.panel-lateral .panel-entete h3 em {
  font-style: normal;
  color: var(--accent);
  margin-left: 0.5rem;
  letter-spacing: 0.1em;
}

.panel-lateral .panel-entete .bouton-croix {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  color: var(--texte-attenue);
}

.panel-lateral .panel-entete .bouton-croix:hover,
.panel-lateral .panel-entete .bouton-croix:focus {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--texte);
  outline: none;
}

/* le formulaire defile, le pied reste en bas */
.panel-lateral .form-filtres {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  gap: 0;
  padding: 0 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--bordure) transparent;
}

/* Titres de rubrique (labels "Trier par", "Ordre"...) et summary */
.panel-lateral .form-filtres > label,
.panel-lateral .filtre-section summary {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a8a90; /* contraste AA (4,9:1 sur les cartes), 18/10 */
}

.panel-lateral .form-filtres > label {
  padding-top: 1rem;
  margin-top: 0.15rem;
  border-top: 1px solid #2a2a2e;
}

.panel-lateral .form-filtres > label:first-child {
  border-top: none;
  padding-top: 0.25rem;
}

.panel-lateral .form-filtres > .choix-puces {
  margin: 0.6rem 0 1rem;
}

.panel-lateral .filtre-section {
  padding: 1rem 0;
  border-top: 1px solid #2a2a2e;
}

.panel-lateral .filtre-section summary::after {
  width: 6px;
  height: 6px;
  border-width: 0 1.5px 1.5px 0;
  border-color: #6c6c72;
}

/* Champs texte / nombre / select : souligne, sans boite */
.panel-lateral .form-filtres input[type="text"],
.panel-lateral .form-filtres input[type="number"]:not(.valeur-editable),
.panel-lateral .form-filtres select {
  margin-top: 0.4rem;
  padding: 0.45rem 0.1rem;
  background: transparent;
  border: none;
  border-bottom: 1px dashed #4a4a50;
  border-radius: 0;
  color: var(--texte);
  font-family: "Inter", sans-serif;
  font-size: 0.92rem;
  letter-spacing: normal;
  text-transform: none;
}

.panel-lateral .form-filtres select option {
  background-color: var(--fond-carte);
}

.panel-lateral .form-filtres input:focus,
.panel-lateral .form-filtres select:focus {
  outline: none;
  border-bottom: 1px solid var(--accent);
}

/* Choix : mots soulignes au lieu des pastilles */
.panel-lateral .choix-puces {
  gap: 0.35rem 1rem;
}

.panel-lateral .puce-choix,
.panel-lateral .puce-mode {
  padding: 0 0 2px;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #7a7a80;
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.panel-lateral .puce-choix:hover,
.panel-lateral .puce-mode:hover {
  color: var(--texte);
}

.panel-lateral input[type="checkbox"]:checked + .puce-choix,
.panel-lateral input[type="radio"]:checked + .puce-choix,
.panel-lateral .puce-mode-active {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

.panel-lateral .mode-plage-exacte {
  gap: 1rem;
  margin: 0.75rem 0 0.5rem;
}

/* Listes longues repliees */
[data-mots-repliables]:not(.mots-deplies) .mot-supplementaire {
  display: none;
}

.panel-lateral .mots-autres {
  padding: 0;
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.panel-lateral .mots-autres:hover,
.panel-lateral .mots-autres:focus {
  background: transparent;
  color: var(--accent-hover);
  outline: none;
}

/* Curseurs : piste fine, poignees cerclees */
.panel-lateral .slider-track,
.panel-lateral .slider-fill {
  height: 2px;
}

.panel-lateral .slider-track-conteneur input[type="range"]::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  background-color: var(--fond-carte);
  border: 2px solid var(--accent);
  box-shadow: none;
}

.panel-lateral .slider-track-conteneur input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background-color: var(--fond-carte);
  border: 2px solid var(--accent);
  box-shadow: none;
}

.panel-lateral .valeur-editable,
.panel-lateral .valeur-precise {
  width: 4.5rem;
  padding: 0.15rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px dashed transparent;
  border-radius: 0;
  color: var(--texte-corps);
  font-weight: 500;
}

.panel-lateral .valeur-editable:last-child {
  text-align: right;
}

.panel-lateral .valeur-editable:hover {
  border-bottom-color: #4a4a50;
}

.panel-lateral .valeur-editable:focus {
  border-bottom: 1px solid var(--accent);
  color: var(--texte);
}

/* Interrupteur "Seulement mes favoris" */
.filtre-interrupteur {
  padding: 1rem 0;
  border-top: 1px solid #2a2a2e;
}

.panel-lateral .filtre-interrupteur label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--texte-corps);
  cursor: pointer;
}

.interrupteur {
  position: relative;
  width: 34px;
  height: 19px;
  border-radius: 999px;
  background-color: #2c2c30;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.interrupteur::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: #8a8a90;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}

.filtre-interrupteur input:checked + label .interrupteur {
  background-color: var(--accent);
}

.filtre-interrupteur input:checked + label .interrupteur::after {
  transform: translateX(15px);
  background-color: var(--fond);
}

/* Pied fixe : Effacer / Appliquer */
.panel-lateral .filtres-pied {
  position: sticky;
  bottom: 0;
  justify-content: space-between;
  margin: 0.5rem -1.25rem 0;
  padding: 0.9rem 1.25rem max(0.9rem, env(safe-area-inset-bottom));
  border-top: 1px solid #2a2a2e;
  background-color: var(--fond-carte);
}

.panel-lateral .filtres-effacer {
  color: var(--texte-attenue);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}

.panel-lateral .filtres-effacer:hover {
  color: var(--texte);
}

.panel-lateral .filtres-appliquer {
  padding: 0.4rem 0.1rem;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid transparent;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.panel-lateral .filtres-appliquer:hover,
.panel-lateral .filtres-appliquer:focus {
  background: transparent;
  color: var(--accent-hover);
  border-bottom-color: var(--accent-hover);
  outline: none;
}

/* =====================================================================
   CRITIQUE EN ARTICLE (11/10) : page de lecture (cr-) et editeur (ed-)
   Newsreader (serif) reservee au texte des critiques, charge par leurs pages.
   ===================================================================== */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Lecture --- */
.cr-hero {
  position: relative;
  margin: -2rem -2rem 0;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  background-color: var(--fond-carte);
  background-size: cover;
  background-position: center 30%;
}

.cr-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--fond) 2%, rgba(18, 18, 20, 0.6) 45%, rgba(18, 18, 20, 0.15));
}

.cr-hero-sans-image {
  min-height: 0;
  padding-top: 3rem;
  background: var(--fond);
}

.cr-hero-contenu {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
  padding: 2rem 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

.cr-film {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  align-self: flex-start;
  font-size: 0.82rem;
  color: var(--texte-corps);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.cr-film img {
  width: 26px;
  border-radius: 3px;
}

.cr-film:hover {
  color: var(--texte);
  border-bottom-color: var(--accent);
}

.cr-etat {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.cr-titre {
  margin: 0;
  color: var(--texte);
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.08;
  text-wrap: balance;
}

.cr-chapo {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.45;
  color: var(--texte-corps);
}

.cr-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  font-size: 0.82rem;
  color: var(--texte-attenue);
  text-shadow: none;
}

.cr-meta b {
  color: var(--texte);
  font-weight: 600;
}

.cr-corps {
  max-width: 760px;
  margin: 2.2rem auto 0;
  padding: 0 2rem;
}

/* Texte rendu depuis le Markdown (partage avec l'apercu de l'editeur) */
.cr-texte {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--texte-corps);
  overflow-wrap: break-word;
}

.cr-texte > * + * {
  margin-top: 1.3rem;
}

.cr-texte h2,
.cr-texte h3 {
  font-family: "Inter", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte);
  font-weight: 600;
  margin-top: 2.2rem;
}

.cr-texte h2 { font-size: 0.9rem; }
.cr-texte h3 { font-size: 0.78rem; color: var(--texte-attenue); }

.cr-texte strong { color: var(--texte); }

.cr-texte a {
  color: var(--texte);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

.cr-texte ul,
.cr-texte ol {
  padding-left: 1.4rem;
}

.cr-texte hr {
  border: 0;
  border-top: 1px solid var(--bordure);
  margin: 2.2rem auto;
  width: 30%;
}

.cr-texte .critique-exergue {
  margin: 2rem 0;
  padding: 0.3rem 0 0.3rem 1.4rem;
  border-left: 2px solid var(--accent);
  font-size: 1.65rem;
  line-height: 1.3;
  font-style: italic;
  color: var(--texte);
}

.cr-texte .critique-exergue p { margin: 0; }

.cr-texte .critique-spoiler {
  font-family: "Inter", sans-serif;
  border: 1px dashed #4a4a50;
  border-radius: var(--rayon);
  padding: 0.9rem 1rem;
  font-size: 0.9rem;
}

.cr-texte .critique-spoiler summary {
  cursor: pointer;
  color: var(--texte);
  font-weight: 600;
  list-style: none;
}

.cr-texte .critique-spoiler summary::-webkit-details-marker { display: none; }
.cr-texte .critique-spoiler summary::after {
  content: "contient des révélations";
  font-weight: 400;
  color: var(--texte-attenue);
  margin-left: 0.8rem;
}

.cr-texte .critique-spoiler[open] summary::after { content: ""; }

.cr-texte .critique-spoiler[open] > :not(summary) {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.12rem;
  color: var(--texte-corps);
  margin-top: 0.7rem;
}

.cr-texte .critique-figure {
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cr-texte .critique-figure img {
  display: block;
  width: 100%;
  border-radius: 10px;
}

.cr-texte .critique-figure-encadree {
  width: 72%;
  margin-left: auto;
  margin-right: auto;
}

.cr-texte figcaption {
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  color: var(--texte-attenue);
}

.cr-texte .critique-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 10px;
  background: #000;
}

.cr-fin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
  margin-top: 2.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--bordure);
  font-size: 0.82rem;
  color: var(--texte-attenue);
}

.cr-likes { color: var(--texte-corps); }

.cr-action,
.ed-action,
.ed-publier,
.ed-secondaire,
.ed-supprimer button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: 0.35rem 0.1rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.cr-action { margin-left: auto; }

.cr-action:hover,
.ed-action:hover,
.ed-publier:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-hover);
}

/* --- Editeur ---
   Haut : couverture, titre, chapo sur toute la largeur.
   Zone d'ecriture : editeur a gauche, panneau d'outils (images, memo) colle a
   droite, toujours a portee pendant qu'on ecrit. Barre de publication collee
   en bas de l'ecran. Sous 900px, le panneau devient un tiroir (bouton Images). */
.ed-page {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.ed-retour {
  align-self: flex-start;
  font-size: 0.82rem;
  color: var(--texte-attenue);
  text-decoration: none;
}

.ed-retour:hover { color: var(--texte); }

.ed-formulaire {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.ed-tete {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.ed-couverture {
  height: 200px;
  border-radius: 12px;
  background-color: var(--fond-carte);
  background-size: cover;
  background-position: center 30%;
  display: flex;
  align-items: flex-end;
  padding: 0.8rem 1rem;
  position: relative;
}

.ed-couverture::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(18, 18, 20, 0.8), transparent 60%);
}

.ed-couverture span {
  position: relative;
  font-size: 0.75rem;
  color: var(--texte-corps);
}

.ed-etiquette {
  margin: 0.4rem 0 0;
  font-family: "Inter", sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

.ed-titre,
.ed-chapo {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--bordure);
  border-radius: 0;
  padding: 0.2rem 0 0.5rem;
  color: var(--texte);
  font-family: "Newsreader", Georgia, serif;
  outline: none;
  transition: border-color 0.2s ease;
}

.ed-titre { font-size: 2rem; font-weight: 600; }
.ed-chapo { font-size: 1.15rem; line-height: 1.5; color: var(--texte-corps); resize: vertical; }

.ed-titre:focus,
.ed-chapo:focus { border-bottom-color: var(--accent); }

.ed-zone {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 1.75rem;
  align-items: start;
}

.ed-editeur {
  border: 1px solid var(--bordure);
  border-radius: 10px;
  background: var(--fond-carte);
  min-width: 0;
  transition: border-color 0.2s ease;
}

/* Barre d'outils collee en haut pendant qu'on ecrit un long texte */
.ed-barre {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--bordure);
  background: var(--fond-carte);
  border-radius: 10px 10px 0 0;
}

.ed-barre button {
  min-width: 32px;
  height: 32px;
  padding: 0 0.55rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--texte-corps);
  font-size: 0.82rem;
  cursor: pointer;
}

.ed-barre button:hover:not(:disabled) {
  background: var(--fond-carte-hover);
  color: var(--texte);
}

.ed-barre button:disabled { opacity: 0.3; cursor: default; }

.ed-sep {
  width: 1px;
  height: 18px;
  background: var(--bordure);
  margin: 0 6px;
}

.ed-bascule {
  margin-left: auto;
  display: flex;
  gap: 1rem;
  padding-right: 0.3rem;
}

.ed-barre .ed-bascule button {
  min-width: 0;
  padding: 0 0 2px;
  border-radius: 0;
  height: auto;
  color: var(--texte-attenue);
  border-bottom: 1.5px solid transparent;
}

.ed-barre .ed-bascule button:hover { background: transparent; color: var(--texte); }

.ed-barre .ed-bascule button[aria-pressed="true"] {
  color: var(--texte);
  border-bottom-color: var(--accent);
}

.ed-seulement-mobile { display: none; }

.ed-texte {
  display: block;
  width: 100%;
  min-height: 62vh;
  resize: vertical;
  background: transparent;
  border: 0;
  padding: 1.1rem 1.2rem;
  color: var(--texte-corps);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.88rem;
  line-height: 1.75;
  outline: none;
}

/* Apercu : fond de page et texte de lecture, pour le distinguer de l'ecriture */
.ed-editeur.en-apercu {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: var(--fond);
}

.ed-editeur.en-apercu .ed-barre { background: var(--fond); }

.ed-apercu-bandeau {
  margin: 0;
  padding: 0.55rem 1.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px dashed rgba(var(--accent-rgb), 0.3);
}

.ed-apercu {
  padding: 1.4rem 1.6rem 2rem;
  font-size: 1.12rem;
  min-height: 62vh;
}

/* Un passage de l'apercu se clique pour revenir l'ecrire */
.ed-apercu [data-ligne] {
  cursor: text;
  border-radius: 4px;
  transition: box-shadow 0.15s ease;
}

.ed-apercu [data-ligne]:hover {
  box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.08);
}

/* Panneau d'outils */
.ed-panneau {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 6.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--bordure) transparent;
  font-size: 0.85rem;
}

.ed-panneau-tete { display: none; }

.ed-panneau section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ed-galerie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ed-galerie button {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 7px;
  background: var(--fond-carte);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.ed-galerie button:hover { border-color: #4a4a50; }

.ed-galerie button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ed-galerie button[aria-pressed="true"] { border-color: var(--accent); }

/* Actions sur l'image choisie : au-dessus de la galerie, restent visibles en haut du panneau */
.ed-galerie-actions {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.1rem;
  padding: 0.2rem 0 0.5rem;
  background: var(--fond);
  border-bottom: 1px solid var(--bordure);
}

.ed-galerie-actions[aria-disabled="true"] .ed-action {
  color: var(--texte-attenue);
  opacity: 0.5;
  pointer-events: none;
}

.ed-note {
  margin: 0;
  font-size: 0.76rem;
  color: var(--texte-attenue);
}

.ed-memo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.8rem;
  margin: 0;
  font-size: 0.78rem;
  color: var(--texte-attenue);
}

.ed-memo dd { margin: 0; }
.ed-memo code { color: var(--texte-corps); font-size: 0.76rem; }

/* Loupe : l'image survolee en grand, a gauche du panneau */
.ed-loupe {
  position: fixed;
  z-index: 60;
  width: min(620px, 46vw);
  margin: 0;
  pointer-events: none;
  border-radius: 12px;
  overflow: hidden;
  background: var(--fond-carte);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65);
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.ed-loupe.visible { opacity: 1; transform: none; }

.ed-loupe img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Barre de publication, collee en bas de l'ecran */
.ed-publication {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.8rem;
  margin: 0 -2rem;
  padding: 0.8rem 2rem;
  background: rgba(18, 18, 20, 0.94);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--bordure);
  font-size: 0.82rem;
}

.ed-publication-groupe {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--texte-attenue);
}

.ed-publication .ff-avis-note {
  width: 30px;
  height: 30px;
  font-size: 0.75rem;
}

.ed-visibilite {
  display: flex;
  gap: 1rem;
}

.ed-visibilite button {
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid transparent;
  padding: 0 0 2px;
  color: var(--texte-attenue);
  font: inherit;
  cursor: pointer;
}

.ed-visibilite button[aria-pressed="true"] {
  color: var(--texte);
  border-bottom-color: var(--accent);
}

.ed-etat {
  margin: 0;
  font-size: 0.76rem;
  color: var(--texte-attenue);
}

.ed-publication-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.ed-secondaire { color: var(--texte-attenue); }
.ed-secondaire:hover { color: var(--texte); border-bottom-color: var(--texte-attenue); }

.ed-supprimer { align-self: flex-start; margin-top: 1.5rem; }
.ed-supprimer button { color: var(--texte-attenue); }
.ed-supprimer button:hover { color: var(--erreur); border-bottom-color: var(--erreur); }

/* --- Ecran moyen et telephone : le panneau devient un tiroir --- */
@media (max-width: 900px) {
  .ed-zone { grid-template-columns: minmax(0, 1fr); }
  .ed-seulement-mobile { display: inline-flex; align-items: center; }

  .ed-panneau {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 70;
    max-height: 78vh;
    padding: 0 1rem 1rem;
    background: var(--fond);
    border-top: 1px solid var(--bordure);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.6);
    transform: translateY(105%);
    transition: transform 0.25s ease;
  }

  .ed-panneau.ouvert { transform: none; }

  .ed-panneau-tete {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 0 0.6rem;
    background: var(--fond);
  }

  .ed-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ed-galerie-actions { top: 3rem; }
  .ed-loupe { display: none; }
}

@media (max-width: 768px) {
  .cr-hero { margin: -1rem -1rem 0; min-height: 300px; }
  .cr-hero-contenu { padding: 1.5rem 1rem 1.2rem; }
  .cr-corps { padding: 0; }
  .cr-texte { font-size: 1.1rem; }
  .cr-texte .critique-exergue { font-size: 1.35rem; }
  .cr-texte .critique-figure-encadree { width: 100%; }
  .ed-titre { font-size: 1.6rem; }
  .ed-couverture { height: 150px; }
  .ed-publication { margin: 0 -1rem; padding: 0.7rem 1rem; gap: 0.5rem 1.2rem; }
  .ed-publication-actions { margin-left: 0; width: 100%; justify-content: space-between; }
  .ed-texte, .ed-apercu { min-height: 50vh; }
}

@media (prefers-reduced-motion: reduce) {
  .ed-panneau, .ed-loupe { transition: none; }
}

/* =====================================================================
   CRITIQUE EN ARTICLE, etape 3 : points d'entree (fiche film, carnet)
   ===================================================================== */

/* Carte de critique dans "Ce qu'en disent les membres" */
.ff-critique {
  display: flex;
  flex-direction: column;
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.ff-critique:hover { border-color: #3a3a40; }

.ff-critique-couverture {
  display: block;
  height: 130px;
  background-size: cover;
  background-position: center 30%;
  position: relative;
}

.ff-critique-couverture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 35%, var(--fond-carte));
}

.ff-critique-corps {
  position: relative;
  margin-top: -1.4rem;
  padding: 0 1.1rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.ff-critique-corps.sans-couverture { margin-top: 0; padding-top: 1rem; }

.ff-critique-surtitre {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

.ff-critique-titre {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-wrap: balance;
}

.ff-critique-titre a {
  color: var(--texte);
  text-decoration: none;
  transition: color 0.2s ease;
}

.ff-critique-titre a:hover { color: var(--accent); }

.ff-critique-chapo {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--texte-corps);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ff-critique-auteur {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--texte-attenue);
  margin-top: 0.2rem;
}

.ff-critique-auteur b { color: var(--texte); font-weight: 600; }
.ff-critique-auteur .ff-avis-note { margin-left: auto; }

.ff-critique-pied {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.1rem 0.7rem;
  border-top: 1px solid var(--bordure);
}

.ff-critique-pied .bouton-like { margin-top: 0; }

.ff-critique-lire {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 0.2rem 0;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.ff-critique-lire:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-hover);
}

/* Mon carnet : rangees Seances / Mes ecrits */
.ff-carnet-rangee {
  margin: 0.4rem 0 0.55rem;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

.ff-tickets + .ff-carnet-rangee { margin-top: 1.3rem; }

.ff-ecrit {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
  transition: background-color 0.2s ease;
}

.ff-ecrit:hover,
.ff-ecrit:focus-visible { background-color: var(--fond-carte-hover); outline: none; }

.ff-ecrit .talon-type {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ff-ecrit-etat {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  padding: 0 0.35rem;
  border: 1px solid var(--bordure);
  border-radius: 3px;
  color: var(--texte-attenue);
}

.ff-ecrit-etat.public {
  border-color: rgba(var(--accent-rgb), 0.6);
  color: var(--accent);
}

.ff-ecrit-citation {
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--texte-corps);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ff-ecrit-titre {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--texte);
}

.ff-ecrit-bas {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--texte-attenue);
}

a.ff-ticket-lien {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Carnet : onglet Critique (porte d'entree vers l'editeur) */
.carnet-critique {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.carnet-critique-titre {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--texte);
}

.carnet-critique-texte {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--texte-attenue);
}

.carnet-critique-liens {
  display: flex;
  gap: 1.4rem;
  margin-top: 0.3rem;
}

.carnet .carnet-critique-liens .carnet-valider,
.carnet .carnet-critique-lien {
  display: inline-block;
  text-decoration: none;
}

.carnet .carnet-critique-lien { margin-top: 0.8rem; }

@media (max-width: 768px) {
  .ff-critique-titre { font-size: 1.2rem; }
}

/* =====================================================================
   ECHANGES (11/10) : fil de reponses, discussion d'une critique,
   notifications
   ===================================================================== */
.fil {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fil-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fil-reponse {
  display: flex;
  gap: 0.65rem;
  scroll-margin-top: 5rem;
}

.fil-reponse:target .fil-texte {
  color: var(--texte);
}

.fil-reponse .avatar-initiale {
  flex: none;
  width: 26px;
  height: 26px;
  font-size: 0.7rem;
}

.fil-corps {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.fil-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.55rem;
  font-size: 0.76rem;
  color: var(--texte-attenue);
}

.fil-tete b {
  color: var(--texte);
  font-weight: 600;
}

.fil-badge {
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.6);
  border-radius: 3px;
  padding: 0 0.3rem;
}

.fil-texte {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--texte-corps);
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.mention {
  color: var(--accent);
  font-weight: 600;
}

.fil-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.fil-actions form { margin: 0; }

.fil-actions button {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.72rem;
  color: var(--texte-attenue);
  cursor: pointer;
  transition: color 0.2s ease;
}

.fil-actions button:hover { color: var(--texte); }
.fil-actions form button:hover { color: var(--erreur); }

.fil-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--bordure);
}

.fil-form textarea {
  width: 100%;
  min-height: 3.2rem;
  resize: vertical;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--bordure);
  border-radius: 0;
  padding: 0.3rem 0;
  color: var(--texte);
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.2s ease;
}

.fil-form textarea:focus { border-bottom-color: var(--accent); }

.fil-form-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.fil-prevenu {
  font-size: 0.72rem;
  color: var(--texte-attenue);
}

.fil-publier {
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: 0.3rem 0.1rem;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.fil-publier:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-hover);
}

.fil-connexion {
  margin: 0;
  font-size: 0.8rem;
  color: var(--texte-attenue);
}

.fil-connexion a { color: var(--accent); }

/* Bouton "N reponses" / "Repondre" sur les cartes de la fiche film */
.ff-reponses-bouton {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.78rem;
  color: var(--texte-attenue);
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.ff-reponses-bouton:hover,
.ff-reponses-bouton[aria-expanded="true"] {
  color: var(--texte);
  border-bottom-color: var(--accent);
}

.ff-avis-pied { gap: 1rem; }
.ff-avis-pied .ff-reponses-bouton { margin-right: auto; }

.ff-avis-fil {
  padding-top: 0.9rem;
  border-top: 1px dashed var(--bordure);
}

/* Critique : apercu des deux dernieres reponses */
.ff-critique-echanges {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.65rem 1.1rem 0.2rem;
  border-top: 1px solid var(--bordure);
  background: rgba(255, 255, 255, 0.015);
}

.ff-critique-echange {
  margin: 0;
  display: flex;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.8rem;
  color: var(--texte-corps);
}

.ff-critique-echange b {
  flex: none;
  color: var(--texte);
  font-weight: 600;
}

.ff-critique-echange span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ff-critique-pied { gap: 1rem; }
.ff-critique-pied .ff-reponses-bouton { margin-left: auto; }

/* Page critique : article + discussion collante a droite */
.cr-corps.avec-discussion {
  max-width: 1100px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 3rem;
  align-items: start;
}

.cr-corps.avec-discussion .cr-article {
  max-width: 700px;
  min-width: 0;
}

.cr-saut-discussion {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.cr-saut-discussion:hover { text-decoration: underline; text-underline-offset: 3px; }

.cr-discussion {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-right: 4px;
  scroll-margin-top: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--bordure) transparent;
}

.cr-discussion-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--bordure);
}

.cr-discussion-tete h2 {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte);
}

.cr-discussion-tete span {
  font-size: 0.76rem;
  color: var(--texte-attenue);
}

@media (max-width: 960px) {
  .cr-corps.avec-discussion { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .cr-corps.avec-discussion .cr-article { max-width: none; }
  .cr-discussion { position: static; max-height: none; overflow: visible; }
}


/* Page notifications */
.notif-page {
  max-width: 720px;
  margin: 0 auto;
}

.notif-titre {
  font-family: "Newsreader", Georgia, serif;
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--texte);
}

.notif-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.notif {
  position: relative;
  display: flex;
  gap: 0.8rem;
  padding: 0.95rem 0.6rem 0.95rem 1.1rem;
  border-bottom: 1px solid var(--bordure);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.notif:hover { background: var(--fond-carte); }

.notif.non-lue::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 1.45rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.notif .avatar-initiale { flex: none; }

.notif-corps {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.notif-phrase {
  font-size: 0.9rem;
  color: var(--texte-corps);
}

.notif-phrase b { color: var(--texte); }

.notif-phrase em {
  font-style: normal;
  color: var(--texte);
  font-family: "Newsreader", Georgia, serif;
  font-size: 1rem;
}

.notif.non-lue .notif-phrase { color: var(--texte); }

.notif-extrait {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--texte-attenue);
  overflow-wrap: anywhere;
}

.notif-date {
  font-size: 0.72rem;
  color: var(--texte-attenue);
}

.notif-vide {
  color: var(--texte-attenue);
  max-width: 50ch;
}

/* Ce qu'en disent les membres : un bloc Critiques, un bloc Avis */
.ff-membres-bloc {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ff-membres-bloc + .ff-membres-bloc {
  margin-top: 2rem;
}

.ff-membres-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.ff-membres-tete h3 {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

.ff-membres-tete h3 em {
  font-style: normal;
  margin-left: 0.5rem;
  color: var(--texte-corps);
  letter-spacing: 0;
}

.ff-membres-bloc .ff-avis-autres { margin-top: 0; }

/* "Repondre" / "N reponses" : meme rendu en bouton (avis) et en lien (critique),
   et pas de fond dore au survol (regle globale button:hover) */
.ff-avis-pied .ff-reponses-bouton,
.ff-critique-pied .ff-reponses-bouton {
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: 0.15rem 0;
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--texte-attenue);
  text-decoration: none;
}

.ff-avis-pied .ff-reponses-bouton:hover,
.ff-critique-pied .ff-reponses-bouton:hover,
.ff-avis-pied .ff-reponses-bouton[aria-expanded="true"] {
  background: transparent;
  color: var(--texte);
  border-bottom-color: var(--accent);
}

/* Boutons texte des critiques et echanges : neutraliser le fond dore global au survol */
.fil-actions button:hover,
.fil-publier:hover,
.ed-action:hover,
.ed-publier:hover,
.ed-secondaire:hover,
.ed-supprimer button:hover,
.ed-visibilite button:hover,
.ed-galerie button:hover,
.ed-barre .ed-bascule button:hover {
  background: transparent;
}

.ed-visibilite button:hover { color: var(--texte); }

/* =====================================================================
   PAGE CRITIQUES (/critiques) : liste, tris, periode, filtre film
   ===================================================================== */
.crl-page {
  display: flex;
  flex-direction: column;
}

.crl-entete h1 {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--texte);
}

.crl-entete p {
  margin: 0.3rem 0 0;
  color: var(--texte-attenue);
  font-size: 0.92rem;
}

.crl-entete p a { color: var(--texte); text-decoration-color: var(--accent); text-underline-offset: 3px; }

.crl-commandes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 2rem;
  margin: 1.2rem 0 1.8rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--bordure);
}

.crl-mots {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1.2rem;
  font-size: 0.88rem;
}

.crl-mots a {
  color: var(--texte-attenue);
  text-decoration: none;
  padding: 0.15rem 0;
  border-bottom: 1.5px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.crl-mots a:hover { color: var(--texte); }

.crl-mots a[aria-current="true"] {
  color: var(--texte);
  border-bottom-color: var(--accent);
}

.crl-periode { font-size: 0.8rem; }

.crl-mots-titre {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

.crl-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.8rem 2rem;
}

.crl-item {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 1rem;
  color: inherit;
  text-decoration: none;
}

.crl-vignette {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background-color: var(--fond-carte);
  background-size: cover;
  background-position: center;
}

.crl-vignette.sans-image {
  overflow: hidden;
  background-position: center 25%;
}

.crl-vignette.sans-image::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: inherit;
  filter: blur(16px) brightness(0.5) saturate(1.1);
}

/* Sans couverture : l'affiche nette, centree sur son propre flou */
.crl-vignette.sans-image img,
.crl-item.une .crl-vignette.sans-image img {
  left: 50%;
  top: 50%;
  bottom: auto;
  width: auto;
  height: 80%;
  transform: translate(-50%, -50%);
  border-radius: 4px;
}

.crl-vignette img {
  position: absolute;
  left: 8px;
  bottom: -8px;
  width: 32px;
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
}

.crl-texte {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.crl-raison {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.crl-film {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

.crl-titre {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--texte);
  text-wrap: balance;
  transition: color 0.2s ease;
}

.crl-item:hover .crl-titre { color: var(--accent); }

.crl-chapo {
  font-family: "Newsreader", Georgia, serif;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--texte-corps);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.crl-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.9rem;
  margin-top: 0.2rem;
  font-size: 0.76rem;
  color: var(--texte-attenue);
}

.crl-bas b { color: var(--texte); font-weight: 600; }
.crl-bas .fort { color: var(--accent); }

.crl-bas .ff-avis-note {
  width: 26px;
  height: 26px;
  font-size: 0.68rem;
}

/* Premiere critique mise en avant */
.crl-item.une {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1.8rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--bordure);
}

.crl-item.une .crl-vignette {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
}

.crl-item.une .crl-vignette img {
  width: 48px;
  left: 14px;
  bottom: -12px;
}

.crl-item.une .crl-texte {
  justify-content: center;
  gap: 0.5rem;
}

.crl-item.une .crl-titre { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.crl-item.une .crl-chapo { font-size: 1.1rem; -webkit-line-clamp: 3; line-clamp: 3; }

.crl-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bordure);
  font-size: 0.82rem;
  color: var(--texte-attenue);
}

.crl-pagination a {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.crl-vide {
  color: var(--texte-attenue);
}

.crl-vide a { color: var(--accent); }

@media (max-width: 760px) {
  .crl-liste { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .crl-item,
  .crl-item.une { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  .crl-item .crl-vignette { aspect-ratio: 16 / 7; }
}

/* Appel "Et toi, qu'en as-tu pense ?" : deux actions, avis et critique */
.ff-appel-double {
  cursor: default;
}

.ff-appel-double:hover {
  border-color: #3a3a3e;
  color: var(--texte-attenue);
}

.ff-appel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem 1.6rem;
}

.ff-appel-actions button,
.ff-appel-actions a {
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: 0.2rem 0;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.ff-appel-actions button:hover,
.ff-appel-actions a:hover {
  background: transparent;
  border-bottom-color: var(--accent);
}

/* Synopsis : resume original anglais quand le francais est absent */
.ff-synopsis-langue {
  margin: 0 0 0.4rem;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

/* =====================================================================
   PROFIL MEMBRE (/membre/{id}), pseudo, confidentialite (11/10)
   ===================================================================== */
.lien-membre {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.lien-membre:hover { color: var(--texte); border-bottom-color: var(--accent); }

.form-aide {
  margin: -0.2rem 0 0.4rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--texte-attenue);
}

.form-visibilite { gap: 0.9rem; }

.choix-visibilite {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  cursor: pointer;
  font-size: 0.86rem;
  color: var(--texte-attenue);
}

.choix-visibilite input { margin-top: 0.25rem; accent-color: var(--accent); }
.choix-visibilite b { display: block; color: var(--texte); font-weight: 600; }

.mb-page { display: flex; flex-direction: column; }

.mb-tete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.4rem;
  align-items: center;
  padding-bottom: 1.6rem;
}

.mb-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--fond);
  font-family: "Inter", sans-serif;
  font-size: 2.1rem;
  line-height: 1;
  font-weight: 600;
}

.mb-nom {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1;
  color: var(--texte);
}

.mb-depuis {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: var(--texte-attenue);
}

.mb-etat {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--bordure);
  border-radius: 3px;
}

.mb-etat.ouvert { border-color: rgba(var(--accent-rgb), 0.6); color: var(--accent); }

.mb-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--texte-attenue);
}

.mb-chiffres b {
  margin-right: 0.3rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}

.mb-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.mb-action {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.mb-action:hover { border-bottom-color: var(--accent); }

.mb-discret {
  font-size: 0.8rem;
  color: var(--texte-attenue);
  text-decoration: none;
}

.mb-discret:hover { color: var(--texte); }

.mb-note {
  margin: 0 0 0.6rem;
  padding: 0.7rem 0.9rem;
  border-left: 2px solid var(--bordure);
  font-size: 0.82rem;
  color: var(--texte-attenue);
  max-width: 75ch;
}

.mb-note a { color: var(--accent); }

.mb-onglets { margin-top: 0.8rem; }

.mb-prive,
.mb-vide {
  color: var(--texte-attenue);
  max-width: 60ch;
}

.mb-avis-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.mb-avis {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: var(--fond-carte);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.mb-avis:hover { background: var(--fond-carte-hover); }

.mb-avis-tete {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: var(--texte-attenue);
}

.mb-avis-tete b { color: var(--texte); font-weight: 600; }
.mb-avis-tete .ff-avis-note { margin-left: auto; width: 28px; height: 28px; font-size: 0.7rem; }

.mb-avis-texte {
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--texte-corps);
}

.mb-top + .mb-top { margin-top: 2rem; }

.mb-top-titre {
  margin: 0 0 0.9rem;
  font-family: "Inter", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

.mb-top-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 1.2rem 0.9rem;
}

.mb-top-liste li { position: relative; }

/* numero : meme coin dore que la page Favoris (.top10-position) */

.mb-top-liste a {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  color: var(--texte);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
}

.mb-top-liste img,
.mb-top-vide {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 6px;
  background-color: var(--fond-carte);
}

.mb-top-liste a:hover span { color: var(--accent); }

@media (max-width: 760px) {
  .mb-avis-liste { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .mb-tete { grid-template-columns: auto minmax(0, 1fr); }
  .mb-actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .mb-avatar { width: 64px; height: 64px; font-size: 1.6rem; }
}

/* =====================================================================
   MON PROFIL (/profil), refonte 11/10 : en-tete partage avec /membre,
   bilan de seances en tickets (prive), puis "Mes gouts"
   ===================================================================== */
.pf-page { display: flex; flex-direction: column; }

.mb-chiffres a {
  color: inherit;
  text-decoration: none;
}

.mb-chiffres a:hover b { color: var(--accent); }

.pf-bilan {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin: 1.6rem 0 2.6rem;
}

.pf-bilan-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
}

.pf-bilan-tete h2,
.pf-section-titre {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--texte);
}

.pf-section-titre { margin-bottom: 1.2rem; }

.pf-annees {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  font-size: 0.85rem;
}

.pf-annees a {
  color: var(--texte-attenue);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.pf-annees a:hover { color: var(--texte); }
.pf-annees a[aria-current="true"] { color: var(--texte); border-bottom-color: var(--accent); }

.pf-tickets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.pf-ticket { min-height: 104px; }

.pf-valeur {
  font-family: "Newsreader", Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}

.pf-valeur-texte { font-size: 1.6rem; }

.pf-valeur-titre {
  font-size: 1.15rem;
  line-height: 1.25;
  padding: 0.25rem 0;
}

.pf-sous {
  font-size: 0.75rem;
  color: var(--texte-attenue);
}

.pf-histo {
  display: flex;
  align-items: stretch;
  gap: 6px;
  height: 140px;
  padding-top: 0.4rem;
}

.pf-histo-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
}

.pf-histo-col i {
  display: block;
  width: 100%;
  max-width: 34px;
  min-height: 2px;
  border-radius: 4px 4px 2px 2px;
  background: #3a3a40;
  transition: background-color 0.2s ease;
}

.pf-histo-col:hover i { background: #55555c; }
.pf-histo-col.pic i { background: var(--accent); }

.pf-histo-n {
  font-size: 0.68rem;
  color: var(--texte-attenue);
  font-variant-numeric: tabular-nums;
}

.pf-histo-lib {
  font-size: 0.68rem;
  color: var(--texte-attenue);
}

.pf-lieux {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  gap: 2px;
}

.pf-lieux i { display: block; min-width: 4px; }

.pf-lieux-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.3rem;
  font-size: 0.8rem;
  color: var(--texte-attenue);
}

.pf-lieux-legende span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--c);
}

.pf-lieux-legende b {
  margin-left: 0.2rem;
  font-weight: 600;
  color: var(--texte);
}

.pf-vide {
  color: var(--texte-attenue);
  max-width: 60ch;
}

/* Sections existantes (genres, decennies, personnes, notes) : titres discrets */
.pf-page .profil-section { max-width: none; }

.pf-page .profil-section h2 {
  margin: 0 0 0.9rem;
  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

@media (max-width: 860px) {
  .pf-tickets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .pf-histo { gap: 3px; }
  .pf-histo-n { display: none; }
}

.mb-top-liste .top10-image-conteneur { display: block; }
.mb-top-liste .top10-image-conteneur img { display: block; }

/* =====================================================================
   MON COMPTE (refonte 11/10) : carte de membre + rubriques facon carnet
   ===================================================================== */
.cp {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.cp-menu {
  position: sticky;
  top: 5rem; /* sous la navigation collee en haut */
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 0.5rem;
}

.cp-menu a {
  padding: 0.4rem 0 0.4rem 0.8rem;
  border-left: 2px solid var(--bordure);
  font-size: 0.86rem;
  color: var(--texte-attenue);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.cp-menu a:hover { color: var(--texte); border-left-color: var(--accent); }

.cp-contenu { max-width: 640px; min-width: 0; }

.carte-membre {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.2rem;
  margin-bottom: 2rem;
  padding: 1.5rem 1.8rem;
  border: 1px solid #34343a;
  border-radius: 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(var(--accent-rgb), 0.16), transparent 55%),
    linear-gradient(135deg, #1f1f23, #17171a);
  overflow: hidden;
}

.carte-membre::before,
.carte-membre::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--fond);
  border: 1px solid #34343a;
}

.carte-membre::before { left: -12px; }
.carte-membre::after { right: -12px; }

.cm-perfo {
  position: absolute;
  top: 1.1rem;
  bottom: 1.1rem;
  right: 8.2rem;
  border-left: 2px dashed #3a3a40;
}

.cm-marque {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

.cm-nom {
  margin: 0.6rem 0 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--texte);
}

.cm-infos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.3rem;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--texte-attenue);
}

.cm-infos b { color: var(--texte); font-weight: 600; }

.cm-numero {
  align-self: end;
  min-width: 5.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cm-numero small {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

.cm-numero b {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--texte);
}

.cp-message {
  margin: 0 0 1.4rem;
  padding: 0.6rem 0.9rem;
  border-left: 2px solid var(--accent);
  font-size: 0.86rem;
  color: var(--texte);
}

.cp-message.cp-erreur { border-left-color: var(--erreur); }

.cp-rubrique {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.7rem 0;
  border-top: 1px solid var(--bordure);
  scroll-margin-top: 5rem;
}

.cp-rubrique > h2 {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--texte);
}

.cp-rubrique > p,
.cp-explication,
.cp-suppression p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--texte-attenue);
}

.cp-explication b { color: var(--texte-corps); font-weight: 600; }

.cp-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cp-form-separe {
  margin-top: 0.8rem;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--bordure);
}

.cp-champ {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cp-champ label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

.cp-champ input {
  width: 100%;
  padding: 0.3rem 0 0.5rem;
  border: 0;
  border-bottom: 1px solid var(--bordure);
  border-radius: 0;
  background: transparent;
  color: var(--texte);
  font: inherit;
  font-size: 1.02rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.cp-champ input:focus { border-bottom-color: var(--accent); }

.cp-champ small {
  font-size: 0.78rem;
  color: var(--texte-attenue);
}

.cp-champ .mdp-indicateur { margin: 0.3rem 0 0; }

.cp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.6rem;
}

.cp-action {
  padding: 0.3rem 0.1rem;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.cp-action:hover {
  background: transparent;
  color: var(--accent-hover);
  border-bottom-color: var(--accent-hover);
}

.cp-secondaire { color: var(--texte-attenue); }
.cp-secondaire:hover { color: var(--texte); border-bottom-color: var(--texte-attenue); }
.cp-danger:hover { color: var(--erreur); border-bottom-color: var(--erreur); }

.cp-choix {
  display: flex;
  gap: 1.6rem;
}

.cp-choix label {
  padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
  font-size: 1rem;
  color: var(--texte-attenue);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.cp-choix label:hover { color: var(--texte); }
.cp-choix input:checked + label { color: var(--texte); border-bottom-color: var(--accent); }
.cp-choix input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 3px; }

.cp-suppression {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--bordure);
}

.cp-suppression summary {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-attenue);
  border-bottom: 1px solid transparent;
}

.cp-suppression summary::-webkit-details-marker { display: none; }
.cp-suppression summary:hover,
.cp-suppression[open] summary { color: var(--erreur); border-bottom-color: var(--erreur); }

.cp-suppression[open] > p,
.cp-suppression[open] > form { margin-top: 1rem; }

@media (max-width: 800px) {
  .cp { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .cp-menu {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.3rem 1.2rem;
    padding-top: 0;
  }
  .cp-menu a { padding: 0.2rem 0; border-left: 0; border-bottom: 1.5px solid transparent; }
  .cp-menu a:hover { border-bottom-color: var(--accent); }
}

@media (max-width: 520px) {
  .carte-membre { grid-template-columns: minmax(0, 1fr); padding: 1.3rem 1.4rem; }
  .cm-perfo { display: none; }
  .cm-numero { text-align: left; }
  .cm-nom { font-size: 1.8rem; }
}

/* /profil : ce que voient les autres / ce que toi seul vois */
.pf-visibilite {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  font-size: 0.85rem;
  color: var(--texte-attenue);
}

.pf-visibilite p { margin: 0; line-height: 1.55; }
.pf-visibilite > p:only-child { grid-column: 1 / -1; }
.pf-visibilite b { color: var(--texte); }
.pf-visibilite a { color: var(--accent); }

.pf-visibilite-titre {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte);
}

.pf-visibilite-pied {
  grid-column: 1 / -1;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--bordure);
  font-size: 0.8rem;
}

@media (max-width: 640px) {
  .pf-visibilite { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   MES GOUTS (/profil) : statistiques enrichies (11/10)
   ===================================================================== */
.sg-bloc {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.8rem 0;
  border-top: 1px solid var(--bordure);
}

.sg-surtitre,
.sg-sous-titre {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

.sg-phrase {
  margin: 0;
  max-width: 62ch;
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--texte-corps);
}

.sg-phrase b { color: var(--accent); font-weight: 600; }

.sg-deux {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2.5rem;
  align-items: start;
}

.sg-distrib {
  display: flex;
  align-items: stretch;
  gap: 5px;
  height: 130px;
}

.sg-distrib div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.sg-distrib i {
  display: block;
  width: 100%;
  min-height: 2px;
  border-radius: 3px 3px 1px 1px;
  background: #3a3a40;
}

.sg-distrib div.pic i { background: var(--accent); }

.sg-distrib span {
  font-size: 0.68rem;
  color: var(--texte-attenue);
  font-variant-numeric: tabular-nums;
}

.sg-comparaison {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.sg-cmp { min-height: 0; }

.sg-valeur {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}

.sg-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.74rem;
  color: var(--texte-attenue);
}

.sg-ecarts {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.sg-ecart {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.sg-ecart img,
.sg-ecart .sg-sans-affiche {
  display: block;
  width: 38px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 4px;
  background: var(--fond-carte);
}

.sg-ecart-titre { min-width: 0; }
.sg-ecart-titre b { display: block; font-size: 0.88rem; font-weight: 600; color: var(--texte); transition: color 0.2s ease; }
.sg-ecart-titre small { font-size: 0.75rem; color: var(--texte-attenue); }
.sg-ecart:hover .sg-ecart-titre b { color: var(--accent); }

.sg-ecart-notes {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  color: var(--texte-attenue);
}

.sg-ecart-notes .ff-avis-note { width: 30px; height: 30px; font-size: 0.72rem; }
.sg-ecart-notes .sg-note-tmdb { border-color: #4a4a50; color: var(--texte-attenue); }

.sg-semaine {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.sg-semaine div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.sg-semaine i {
  display: block;
  width: 100%;
  max-width: 54px;
  aspect-ratio: 1;
  border-radius: 6px;
  background: var(--accent);
}

.sg-semaine span { font-size: 0.7rem; color: var(--texte-attenue); }

.sg-lignes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sg-ligne {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) 2.5rem;
  gap: 0.7rem;
  align-items: center;
  font-size: 0.84rem;
  color: var(--texte-corps);
}

.sg-ligne i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--accent);
  opacity: 0.8;
}

.sg-ligne b {
  text-align: right;
  font-weight: 500;
  color: var(--texte-attenue);
  font-variant-numeric: tabular-nums;
}

.sg-pays {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 2.5rem;
}

.sg-records {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.sg-record {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  color: inherit;
  text-decoration: none;
}

.sg-record img,
.sg-record .sg-sans-affiche {
  display: block;
  width: 100%;
  max-width: 180px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 6px;
  background: var(--fond-carte);
}

.sg-record b { font-size: 0.85rem; font-weight: 600; color: var(--texte); }
.sg-record small { font-size: 0.78rem; color: var(--texte-attenue); }
.sg-record:hover b { color: var(--accent); }

@media (max-width: 800px) {
  .sg-deux { grid-template-columns: minmax(0, 1fr); }
  .sg-records { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-pays { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .sg-ligne { grid-template-columns: 7rem minmax(0, 1fr) 2.2rem; }
  .sg-comparaison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Photo de profil (11/10) */
img.avatar-photo {
  display: block;
  object-fit: cover;
  background: var(--fond-carte);
  padding: 0;
}

.cp-photo {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.cp-photo .mb-avatar { flex: none; width: 72px; height: 72px; font-size: 1.8rem; }

.cp-photo-texte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 1.4rem;
}

.cp-photo-texte form { margin: 0; }

.cp-photo-texte small {
  flex-basis: 100%;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--texte-attenue);
}

.cp-fichier { position: relative; display: inline-block; }

.cp-fichier input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.cp-fichier:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Genres en etagere d'affiches, decennies en pellicule (11/10) */
.gd-etagere {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.8rem;
}

.gd-genre {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  max-width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: var(--fond-carte);
  color: var(--texte);
  text-decoration: none;
}

.gd-genre img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gd-genre::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18, 18, 20, 0.95) 8%, rgba(18, 18, 20, 0.35) 55%, transparent);
}

.gd-genre:hover img { transform: scale(1.04); }

.gd-genre-texte {
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.65rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.gd-genre-nom {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.15;
}

.gd-genre-nb {
  font-size: 0.72rem;
  color: var(--texte-corps);
  font-variant-numeric: tabular-nums;
}

.gd-genre:hover .gd-genre-nom { color: var(--accent); }

/* Pellicule : bande sombre perforee, une image par decennie */
.gd-pellicule {
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--bordure) transparent;
}

.gd-pellicule-bande {
  --perfo: radial-gradient(circle, var(--fond) 0 3px, transparent 3.5px);
  display: grid;
  grid-template-columns: repeat(var(--n, 10), minmax(64px, 1fr));
  gap: 6px;
  min-width: calc(var(--n, 10) * 70px + 20px); /* au-dela, la pellicule defile */
  padding: 18px 10px;
  border-radius: 6px;
  background:
    var(--perfo) 0 5px / 16px 12px repeat-x,
    var(--perfo) 0 calc(100% - 5px) / 16px 12px repeat-x,
    #0a0a0b;
}

.gd-image {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--texte);
  text-decoration: none;
}

.gd-image-cadre {
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 3px;
  overflow: hidden;
  background: #1a1a1d;
}

.gd-image-cadre img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.gd-image:hover .gd-image-cadre img { opacity: 1 !important; }

.gd-image-legende {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.72rem;
  color: var(--texte-attenue);
  font-variant-numeric: tabular-nums;
}

.gd-image-legende b {
  font-family: "Newsreader", Georgia, serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--texte);
}

.gd-jauge {
  display: block;
  height: 3px;
  min-width: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.gd-image.vide { opacity: 0.45; }

@media (max-width: 900px) {
  .gd-etagere { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .gd-etagere { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   TICKETS DE SEANCE PAR LIEU (11/10) : meme carte pour toutes les
   seances, pictogramme et lieu precis ; seul le cinema est un billet
   perfore (encoches, ligne de dechirure en petits trous, souche).
   ===================================================================== */
.picto-lieu {
  flex: none;
  margin-right: 0.35rem;
  vertical-align: -2px;
}

.talon-type {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.talon-lieu {
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--texte-corps);
  white-space: pre;
}

.talon-cinema .talon-type { color: var(--accent); }

/* --- Seances hors cinema : pas de perforation --- */
/* Sur les cartes (bibliotheque, favoris...), le talon garde sa perforation
   d'origine quel que soit le type (demande du 13/10) : la difference
   cinema / autres ne joue que sur les tickets complets de la fiche film. */
.talon-complet.talon-sans-perfo::before,
.talon-complet.talon-sans-perfo::after { display: none; }

.talon-complet.talon-sans-perfo:has(.talon-tampon) .talon-infos { border-right: 1px solid var(--bordure); }

/* --- Cinema, billet complet (fiche film) : encoches en haut et en bas
       a l'endroit de la dechirure, trous verticaux, souche a droite --- */
.talon-complet.talon-cinema {
  padding-right: 0;
}

.talon-complet.talon-cinema::before,
.talon-complet.talon-cinema::after {
  left: auto;
  right: calc(4.2rem - 8px);
  width: 16px;
  height: 16px;
  transform: none;
}

.talon-complet.talon-cinema::before { top: -8px; }
.talon-complet.talon-cinema::after { top: auto; bottom: -8px; }

.talon-complet.talon-cinema .talon-infos {
  flex: 1;
  align-self: stretch;
  justify-content: center;
  padding-right: 0.75rem;
  border-right: none;
  background: radial-gradient(circle, var(--fond) 1.4px, transparent 1.7px) right top / 4px 7px repeat-y;
}

.talon-souche,
.talon-complet.talon-cinema .talon-tampon {
  margin: 0 auto;
}

.talon-souche {
  flex: none;
  width: 4.2rem;
  text-align: center;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texte-attenue);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.talon-complet.talon-cinema:has(.talon-tampon) .talon-tampon {
  width: 3rem;
  height: 3rem;
  margin: 0 0.6rem;
}

.talon-complet.talon-cinema:has(.talon-tampon)::before,
.talon-complet.talon-cinema:has(.talon-tampon)::after { right: calc(4.2rem - 8px); }

/* Carnet : etiquette des seances avec pictogramme */
.carnet-etiquette .picto-lieu { margin-right: 0.3rem; vertical-align: -2px; }

/* Champ "Ou exactement" */
.carnet .seance-rubrique input.champ-lieu-precis {
  width: 100%;
  margin-top: 0.6rem;
  font-size: 0.88rem;
}

/* =====================================================================
   RECHERCHE ET ACCUEIL DECOUVERTE (12/10)
   rs- : champ de recherche + suggestions + page de resultats
   ac- : page d'accueil (hero, rangees a fleches, tuiles imagees)
   ===================================================================== */

/* ----- Champ de recherche ----- */
.rs-form {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 0 1.5rem;
}

.rs-champ {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.95rem;
  background-color: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-bottom-color: #4a4a50;
  border-radius: var(--rayon);
  cursor: text;
  transition: border-color 0.2s ease;
}

.rs-champ:focus-within { border-bottom-color: var(--accent); }
.rs-form:has(.rs-suggestions:not([hidden])) .rs-champ { border-radius: var(--rayon) var(--rayon) 0 0; border-bottom-color: var(--accent); }

.rs-champ svg { flex: none; color: var(--texte-attenue); }
.rs-champ:focus-within svg { color: var(--accent); }

.rs-champ input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--texte);
  font: inherit;
  font-size: 1rem;
}

.rs-champ input[type="search"]::placeholder { color: #6a6a70; }
.rs-champ input[type="search"]::-webkit-search-cancel-button { filter: grayscale(1) opacity(0.5); }

.rs-form-grand .rs-champ { padding: 0.95rem 1.15rem; background-color: rgba(28, 28, 31, 0.9); backdrop-filter: blur(6px); }
.rs-form-grand .rs-champ input[type="search"] { font-size: 1.08rem; }

/* ----- Suggestions ----- */
.rs-suggestions {
  position: absolute;
  z-index: 30;
  top: 100%;
  left: 0;
  right: 0;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: 0.35rem 0 0.55rem;
  background-color: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-top: 0;
  border-radius: 0 0 var(--rayon) var(--rayon);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  scrollbar-width: thin;
  scrollbar-color: var(--bordure) transparent;
}

.rs-sugg-correction {
  margin: 0;
  padding: 0.45rem 1rem 0.55rem;
  border-bottom: 1px solid var(--bordure);
  font-size: 0.8rem;
  color: var(--texte-attenue);
}

.rs-sugg-correction em { font-family: "Newsreader", Georgia, serif; font-size: 1rem; color: var(--texte); }

.rs-sugg-groupe {
  margin: 0;
  padding: 0.6rem 1rem 0.25rem;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

.rs-sugg {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.4rem 1rem;
  color: var(--texte);
  text-decoration: none;
}

.rs-sugg:hover,
.rs-sugg-actif { background-color: var(--fond-carte-hover); }
.rs-sugg-actif { box-shadow: inset 2px 0 0 var(--accent); }

.rs-sugg-affiche { flex: none; width: 32px; height: 48px; border-radius: 3px; object-fit: cover; }
.rs-sugg-portrait { flex: none; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.rs-sugg-vide { background-color: #2a2a2e; }

.rs-sugg-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rs-sugg-titre { font-size: 0.93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-sugg-meta { font-size: 0.74rem; color: var(--texte-attenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-sugg-etat { flex: none; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }

.rs-sugg-rien { margin: 0; padding: 0.7rem 1rem; font-size: 0.85rem; color: var(--texte-attenue); }

.rs-sugg-tout {
  display: block;
  margin-top: 0.35rem;
  padding: 0.6rem 1rem 0.1rem;
  border-top: 1px solid var(--bordure);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}

.rs-sugg-tout:hover,
.rs-sugg-tout.rs-sugg-actif { text-decoration: underline; text-underline-offset: 4px; background: none; box-shadow: none; }

/* ----- Page de resultats ----- */
.rs-entete { margin-bottom: 1.6rem; }
.rs-titre { margin: 0 0 0.2rem; }
.rs-correction { margin: 0; font-size: 0.88rem; color: var(--texte-attenue); }
.rs-sommaire { margin: 0.4rem 0 0; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; }
.rs-sommaire a { color: var(--accent); text-decoration: none; }
.rs-sommaire a:hover { text-decoration: underline; text-underline-offset: 4px; }

.rs-rubrique {
  margin: 2.2rem 0 1rem;
  font-family: "Inter", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

.rs-meilleur {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1.5rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--bordure);
}

.rs-meilleur > * { min-width: 0; }
.rs-meilleur-affiche img,
.rs-meilleur-affiche .pas-affiche { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; }
.rs-surtitre { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.rs-meilleur h2 { margin: 0.15rem 0 0.2rem; font-size: 2.4rem; line-height: 1; }
.rs-meilleur h2 a { color: var(--texte); text-decoration: none; }
.rs-meilleur h2 a:hover { color: var(--accent); }
.rs-meta { margin: 0; font-size: 0.82rem; color: var(--texte-attenue); }
.rs-meta i { font-family: "Newsreader", Georgia, serif; font-size: 0.95rem; }
.rs-synopsis { margin: 0.7rem 0 1rem; max-width: 38rem; font-family: "Newsreader", Georgia, serif; font-size: 1.02rem; line-height: 1.55; color: var(--texte-corps); }
.rs-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.4rem; }
.rs-actions a { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.rs-actions a:hover { text-decoration: underline; text-underline-offset: 4px; }
.rs-etat { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-attenue); }

.rs-personnes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.4rem 1.4rem; }
.rs-personne { display: flex; align-items: center; gap: 0.8rem; padding: 0.4rem 0; color: var(--texte); text-decoration: none; min-width: 0; }
.rs-personne img,
.rs-initiales { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.rs-initiales { display: grid; place-items: center; background-color: #2a2a2e; font-size: 0.8rem; color: var(--texte-attenue); }
.rs-personne-texte { min-width: 0; display: flex; flex-direction: column; }
.rs-personne-nom { font-size: 0.92rem; }
.rs-personne:hover .rs-personne-nom { color: var(--accent); }
.rs-personne-meta { font-size: 0.74rem; color: var(--texte-attenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-vide { color: var(--texte-attenue); }

/* ----- Accueil : hero ----- */
.ac-hero {
  position: relative;
  z-index: 9; /* au-dessus des icones des cartes (z-index 5), sous la navigation collante (10) */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  min-height: 380px;
  padding: 3rem 2.4rem 2.2rem;
  margin-bottom: 0.5rem;
}

.ac-hero-fond {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--rayon);
  background-color: var(--fond-carte);
  background-size: cover;
  background-position: center 25%;
}

.ac-hero-fond::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, var(--fond) 5%, rgba(18, 18, 20, 0.78) 45%, rgba(18, 18, 20, 0.2) 100%),
    linear-gradient(0deg, var(--fond) 0%, rgba(18, 18, 20, 0) 50%);
}

.ac-hero-texte { flex: 1; min-width: 0; max-width: 640px; }
.ac-surtitre { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.ac-titre { margin: 0.35rem 0 0.4rem; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 0.95; color: var(--texte); }
.ac-accroche { margin: 0 0 1.5rem; font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1.15rem; color: var(--texte-corps); }
.ac-hero .rs-form { margin: 0; }

.ac-hero-film {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 260px;
  text-align: right;
  color: var(--texte-attenue);
  text-decoration: none;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ac-hero-film strong { margin: 0.2rem 0; font-family: "Bebas Neue", "Inter", sans-serif; font-weight: 400; font-size: 1.6rem; line-height: 1; letter-spacing: 0.02em; text-transform: none; color: var(--texte); }
.ac-hero-film em { font-style: normal; color: var(--accent); }
.ac-hero-film:hover em { text-decoration: underline; text-underline-offset: 4px; }

/* ----- Accueil : rangees ----- */
.ac-rangee { margin-top: 2.8rem; }

.ac-tete { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: 0.9rem; }
.ac-tete h2 { flex: 1; min-width: 0; margin: 0; font-size: 1.9rem; line-height: 1.05; color: var(--texte); }
.ac-tete h2 span { margin-left: 0.35rem; font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1.12rem; letter-spacing: 0; color: var(--texte-chaud); }

.ac-lien { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); text-decoration: none; white-space: nowrap; }
.ac-lien:hover { text-decoration: underline; text-underline-offset: 4px; }
.ac-lien-muet { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-attenue); }
.ac-pourquoi { margin: -0.5rem 0 0.9rem; font-size: 0.8rem; color: var(--texte-attenue); }

/* fleches : un trait fin, grise aux extremites */
.ac-fleches { display: flex; gap: 0.2rem; align-self: center; }
.ac-fleche {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--texte-corps);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.ac-fleche:hover:not(:disabled) { background: transparent; color: var(--accent); border-color: var(--bordure); }
.ac-fleche:hover { background: transparent; }
.ac-fleche:disabled { color: #4a4a50; cursor: default; }
.ac-fleche:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.ac-sans-fleches .ac-fleches { visibility: hidden; }

/* bande defilante sans ascenseur visible */
.ac-bande {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 150px;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 4px 4px 0.2rem;
  margin: -4px -4px 0;
  scroll-padding-left: 4px;
}

.ac-bande::-webkit-scrollbar { display: none; }
.ac-bande > * { scroll-snap-align: start; }

.ac-film { min-width: 0; color: var(--texte); text-decoration: none; }
.ac-affiche { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden; background-color: var(--fond-carte); }
.ac-affiche img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.ac-film:hover .ac-affiche img { transform: scale(1.04); }
.ac-film:focus-visible { outline: none; }
.ac-film:focus-visible .ac-affiche { outline: 1px solid var(--accent); outline-offset: 3px; }

.ac-vu {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  background-color: rgba(18, 18, 20, 0.75);
  color: var(--accent);
  font-family: "Bebas Neue", "Inter", sans-serif;
  font-size: 0.95rem;
  line-height: 1;
  transform: rotate(-12deg);
}

.ac-film-titre { display: block; margin-top: 0.55rem; font-size: 0.86rem; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ac-film:hover .ac-film-titre { color: var(--accent); }
.ac-film-meta { display: block; margin-top: 0.15rem; font-size: 0.72rem; color: var(--texte-attenue); }

/* ----- Accueil : critiques et classement ----- */
.ac-duo { display: grid; grid-template-columns: 1.25fr 1fr; gap: 2.6rem; margin-top: 2.8rem; }
.ac-duo > * { min-width: 0; }

.ac-critique { display: grid; grid-template-columns: 54px 1fr; gap: 0.95rem; padding: 0.9rem 0; border-top: 1px solid var(--bordure); }
.ac-critique:first-of-type { border-top: 0; padding-top: 0.2rem; }
.ac-critique > * { min-width: 0; }
.ac-critique-affiche { display: block; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; background-color: var(--fond-carte); }
.ac-critique-affiche img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ac-critique h3 { margin: 0; font-family: "Newsreader", Georgia, serif; font-weight: 600; font-size: 1.12rem; letter-spacing: 0; line-height: 1.25; }
.ac-critique h3 a { color: var(--texte); text-decoration: none; }
.ac-critique h3 a:hover { color: var(--accent); }
.ac-critique p { margin: 0.3rem 0 0; font-family: "Newsreader", Georgia, serif; font-size: 0.97rem; line-height: 1.45; color: var(--texte-corps); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ac-critique small { display: block; margin-top: 0.4rem; font-size: 0.72rem; color: var(--texte-attenue); }
.ac-critique small b { color: var(--texte); font-weight: 600; }

.ac-classement { list-style: none; margin: 0; padding: 0; }
.ac-classement li + li { border-top: 1px solid var(--bordure); }
.ac-classement a { display: grid; grid-template-columns: 2rem 36px 1fr auto; align-items: center; gap: 0.8rem; padding: 0.5rem 0; color: var(--texte); text-decoration: none; }
.ac-classement a:hover .ac-classement-titre { color: var(--accent); }
.ac-rang { font-family: "Bebas Neue", "Inter", sans-serif; font-size: 1.8rem; line-height: 1; color: var(--accent); }
.ac-classement img,
.ac-mini-vide { width: 36px; aspect-ratio: 2 / 3; border-radius: 3px; object-fit: cover; background-color: var(--fond-carte); }
.ac-classement-titre { min-width: 0; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-classement small { font-size: 0.72rem; color: var(--texte-attenue); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ----- Accueil : tuiles imagees (genres, decennies) ----- */
.ac-genres { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.8rem; }

.ac-tuile {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 112px;
  padding: 0.85rem 1rem;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--bordure);
  background-color: var(--fond-carte);
  color: var(--texte);
  text-decoration: none;
}

.ac-tuile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--image, none);
  background-size: cover;
  background-position: center;
  filter: saturate(0.85);
  transition: transform 0.5s ease, filter 0.3s ease;
}

.ac-tuile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(18, 18, 20, 0.92) 0%, rgba(18, 18, 20, 0.45) 55%, rgba(18, 18, 20, 0.2) 100%);
}

.ac-tuile:hover::before { transform: scale(1.05); filter: saturate(1); }
.ac-tuile:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.ac-tuile strong { font-family: "Bebas Neue", "Inter", sans-serif; font-weight: 400; font-size: 1.55rem; letter-spacing: 0.03em; line-height: 1; }
.ac-tuile:hover strong { color: var(--accent); }
.ac-tuile small { margin-top: 0.2rem; font-size: 0.7rem; color: var(--texte-attenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ac-tuile-hasard { border-color: rgba(var(--accent-rgb), 0.55); }
.ac-tuile-hasard::after { background: none; }
.ac-tuile-hasard strong { color: var(--accent); }

.ac-bande-decennies { grid-auto-columns: 230px; }
.ac-tuile-decennie { min-height: 130px; }
.ac-tuile-decennie strong { font-size: 2.1rem; }

@media (max-width: 900px) {
  .ac-duo { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .ac-hero { flex-direction: column; align-items: stretch; min-height: 0; padding: 2rem 1.1rem 1.4rem; }
  .ac-hero-film { align-items: flex-start; text-align: left; }
  .ac-bande { grid-auto-columns: 124px; gap: 0.8rem; }
  .ac-bande-decennies { grid-auto-columns: 190px; }
  .ac-tete h2 { font-size: 1.6rem; }
  .ac-tete h2 span { display: block; margin: 0.1rem 0 0; }
  .ac-genres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-meilleur { grid-template-columns: 96px 1fr; gap: 1rem; }
  .rs-meilleur h2 { font-size: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-affiche img, .ac-tuile::before { transition: none; }
}

/* ----- Page recherche / catalogue : en-tete sur image (12/10) ----- */
.rs-hero {
  position: relative;
  z-index: 9; /* au-dessus des icones des cartes (z-index 5), sous la navigation collante (10) */
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  padding: 2rem 2.4rem 2.2rem;
  margin-bottom: 1.4rem;
}

.rs-hero .rs-form { margin: 0; }
.rs-hero .ac-hero-fond { background-position: center 20%; }

.rs-intitule {
  margin: 0.4rem 0 0;
  font-family: "Inter", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

.rs-hero .rs-meilleur {
  grid-template-columns: 170px 1fr;
  gap: 1.8rem;
  align-items: end;
  padding: 0;
  border: 0;
}

.rs-hero .rs-meilleur-affiche img { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); }
.rs-hero .rs-meilleur h2 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.rs-hero .rs-synopsis { margin-bottom: 1.1rem; }

.rs-hero-catalogue { min-height: 280px; justify-content: flex-end; gap: 0; }
.rs-hero-catalogue .ac-accroche { margin-bottom: 1.3rem; }

@media (max-width: 700px) {
  .rs-hero { padding: 1.4rem 1.1rem 1.4rem; }
  .rs-hero .rs-meilleur { grid-template-columns: 96px 1fr; gap: 1rem; align-items: start; }
  .rs-hero .rs-meilleur h2 { font-size: 1.9rem; }
  .rs-hero-catalogue { min-height: 0; }
}

/* Catalogue : filtres actifs sous l'en-tete */
.rs-filtres-actifs { margin: 0 0 1.4rem; }

/* Accueil : intitules pour filtrer "De tes cineastes" (texte, pas de pastilles) */
.ac-filtre-personnes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.2rem; margin: -0.3rem 0 1rem; }
.ac-filtre-personne {
  padding: 0 0 0.25rem;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--texte-attenue);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ac-filtre-personne:hover { background: transparent; color: var(--texte); }
.ac-filtre-personne.actif { color: var(--texte); border-bottom-color: var(--accent); }
.ac-filtre-personne:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.ac-filtre-personnes .ac-lien { margin-left: auto; }
.ac-film[hidden] { display: none; }

/* =====================================================================
   SIGNALEMENT ET MODERATION (12/10)
   ===================================================================== */
.lien-signaler {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--texte-attenue);
  font: inherit;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.lien-signaler:hover { background: transparent; color: var(--texte); opacity: 1; }
.lien-signaler:disabled { cursor: default; opacity: 0.5; }
.lien-signaler:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.ff-avis-pied .lien-signaler,
.ff-critique-pied .lien-signaler { margin-left: auto; }

.dialog-signaler {
  width: min(440px, calc(100vw - 2rem));
  padding: 1.4rem 1.5rem 1.2rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond-carte);
  color: var(--texte);
}
.dialog-signaler::backdrop { background: rgba(0, 0, 0, 0.6); }
.dialog-signaler h3 { margin: 0 0 0.3rem; font-size: 1.6rem; color: var(--texte); }
.sg-aide { margin: 0 0 1rem; font-size: 0.82rem; color: var(--texte-attenue); }
.sg-motifs { display: grid; gap: 0.45rem; margin: 0 0 1rem; padding: 0; border: 0; }
.sg-motifs label { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--texte-corps); cursor: pointer; }
.sg-motifs input { accent-color: var(--accent); margin: 0; }
.sg-motifs input:checked + span { color: var(--texte); }
.dialog-signaler textarea {
  width: 100%;
  padding: 0.4rem 0;
  border: 0;
  border-bottom: 1px dashed var(--bordure);
  background: transparent;
  color: var(--texte);
  font: inherit;
  font-size: 0.9rem;
  resize: vertical;
  outline: none;
}
.dialog-signaler textarea:focus { border-bottom-color: var(--accent); }
.sg-retour { margin: 0.8rem 0 0; font-size: 0.85rem; color: var(--accent); }
.sg-pied { display: flex; justify-content: flex-end; gap: 1.4rem; margin-top: 1.1rem; }
.sg-pied button { padding: 0; border: 0; background: transparent; font: inherit; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.sg-pied button:hover { background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.sg-annuler { color: var(--texte-attenue); }
.sg-envoyer { color: var(--accent); }
.sg-envoyer:disabled { opacity: 0.5; cursor: default; }

.cr-masquee { margin: 0 0 1.2rem; padding: 0.7rem 0.9rem; border: 1px solid rgba(226, 84, 61, 0.45); border-radius: var(--rayon); color: var(--texte-corps); font-size: 0.88rem; }

.limite { max-width: 34rem; margin: 3rem auto; }
.limite p { color: var(--texte-corps); line-height: 1.55; }

/* Dialogue de signalement : centre dans la fenetre (le reset global annule la marge auto) */
.dialog-signaler { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: 90vh; overflow-y: auto; }

/* ----- Tableau de bord de moderation ----- */
.md-page { max-width: 900px; }
.md-page .ac-titre { margin-bottom: 1.4rem; }

.md-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; margin-bottom: 1.6rem; }
.md-chiffre { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.9rem 1rem; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--fond-carte); color: var(--texte); text-decoration: none; }
a.md-chiffre:hover { border-color: #4a4a50; }
.md-chiffre strong { font-family: "Bebas Neue", "Inter", sans-serif; font-weight: 400; font-size: 2.2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.md-chiffre span { font-size: 0.72rem; color: var(--texte-attenue); }
.md-chiffre.alerte { border-color: rgba(var(--accent-rgb), 0.55); }
.md-chiffre.alerte strong { color: var(--accent); }

.md-motifs { margin-bottom: 1.6rem; }
.md-motifs .rs-rubrique { margin-top: 0; }
.md-motif { display: grid; grid-template-columns: minmax(0, 15rem) 1fr 2rem; align-items: center; gap: 0.8rem; padding: 0.2rem 0; font-size: 0.82rem; color: var(--texte-corps); }
.md-motif i { display: block; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--part), var(--bordure) var(--part)); }
.md-motif b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

.md-onglets { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; border-bottom: 1px solid var(--bordure); margin-bottom: 0.4rem; }
.md-onglets a { padding-bottom: 0.6rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-attenue); text-decoration: none; }
.md-onglets a:hover { color: var(--texte); }
.md-onglets a.actif { color: var(--texte); box-shadow: inset 0 -2px 0 var(--accent); }

.md-cas { padding: 1.2rem 0 1.2rem 1rem; border-bottom: 1px solid var(--bordure); border-left: 2px solid var(--bordure); margin-top: 0.8rem; }
.md-cas-masque { border-left-color: var(--erreur); }
.md-cas-supprime { opacity: 0.6; }
.md-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; font-size: 0.8rem; color: var(--texte-attenue); }
.md-etat { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.md-etat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.md-etat.visible { color: #7fae7a; }
.md-etat.masque { color: var(--erreur); }
.md-etat.supprime { color: var(--texte-attenue); }
.md-type { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.md-membre { color: var(--texte); text-decoration: none; border-bottom: 1px solid var(--bordure); }
.md-membre:hover { color: var(--accent); border-bottom-color: var(--accent); }
.md-texte { margin: 0.7rem 0; padding-left: 0.9rem; border-left: 2px solid var(--bordure); font-family: "Newsreader", Georgia, serif; font-size: 1rem; line-height: 1.5; color: var(--texte-corps); white-space: pre-line; }
.md-signalements { margin: 0 0 0.6rem; padding: 0; list-style: none; display: grid; gap: 0.3rem; font-size: 0.8rem; color: var(--texte-attenue); }
.md-signalements b { color: var(--texte-corps); font-weight: 600; }
.md-signalements li.en-attente b { color: var(--texte); }
.md-signalements .md-attente { color: var(--accent); font-style: normal; }
.md-signalements span { display: block; margin-top: 0.1rem; font-style: italic; }
.md-journal { margin: 0 0 0.7rem; padding: 0; list-style: none; font-size: 0.74rem; color: #7a7a80; }
.md-journal li::before { content: "› "; }
.md-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.3rem; }
.md-actions a,
.md-actions button { padding: 0; border: 0; background: transparent; color: var(--texte-attenue); font: inherit; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.md-actions a:hover,
.md-actions button:hover { background: transparent; color: var(--texte); text-decoration: underline; text-underline-offset: 4px; }
.md-actions .md-fort { color: var(--accent); }
.md-actions form { margin: 0; }
.md-vide, .md-note { color: var(--texte-attenue); font-size: 0.85rem; }

.md-historique { margin: 0.6rem 0 0; padding: 0; list-style: none; }
.md-historique li { display: grid; grid-template-columns: 6.5rem 11rem minmax(0, 1fr) auto; gap: 0.8rem; align-items: baseline; padding: 0.55rem 0; border-bottom: 1px solid var(--bordure); font-size: 0.84rem; color: var(--texte-corps); }
.md-h-date { font-variant-numeric: tabular-nums; color: var(--texte-attenue); font-size: 0.78rem; }
.md-h-action { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte); }
.md-h-action.masquer, .md-h-action.masquage_auto { color: var(--erreur); }
.md-h-action.retablir { color: #7fae7a; }
.md-h-quoi { min-width: 0; }
.md-h-qui { font-size: 0.76rem; color: var(--texte-attenue); white-space: nowrap; }

.md-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; }
.md-deux > * { min-width: 0; }
.md-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.md-table th { text-align: left; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-attenue); padding: 0 0 0.5rem; border-bottom: 1px solid var(--bordure); }
.md-table td { padding: 0.5rem 0; border-bottom: 1px solid var(--bordure); font-variant-numeric: tabular-nums; color: var(--texte-corps); }
.md-fort-rouge { color: var(--erreur) !important; font-weight: 600; }

.md-membre-tete { display: flex; align-items: center; gap: 1.2rem; margin: 1rem 0 1.4rem; }
.md-membre-tete .avatar-initiale,
.md-membre-tete .avatar-photo { width: 64px; height: 64px; font-size: 1.6rem; }
.md-membre-tete .ac-titre { margin: 0.2rem 0; }

@media (max-width: 760px) {
  .md-deux { grid-template-columns: 1fr; }
  .md-historique li { grid-template-columns: 1fr; gap: 0.15rem; }
  .md-motif { grid-template-columns: minmax(0, 1fr) 5rem 1.6rem; }
}

/* =====================================================================
   DISCUSSIONS (12/10) — maquette "Eikon Discussions"
   ===================================================================== */
.ds-page { max-width: 1100px; }
.ds-hero { flex-direction: row; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; min-height: 240px; }
.ds-hero-texte { min-width: 0; }
.ds-hero .ac-accroche { margin-bottom: 0; }
.ds-ouvrir { margin-bottom: 0.4rem; }

.ds-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-attenue); }
.ds-marque { color: var(--accent); }
.ds-lie { letter-spacing: 0.04em; text-transform: none; font-size: 0.78rem; color: var(--texte-chaud); }

/* La plus active */
.ds-une { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.5rem; min-height: 220px; padding: 1.6rem 1.8rem; margin-bottom: 1.8rem; border-radius: var(--rayon); overflow: hidden; color: var(--texte); text-decoration: none; background-color: var(--fond-carte); }
.ds-une::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--image, none); background-size: cover; background-position: center 30%; transition: transform 0.5s ease; }
.ds-une:hover::before { transform: scale(1.03); }
.ds-une::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(18, 18, 20, 0.95) 0%, rgba(18, 18, 20, 0.55) 55%, rgba(18, 18, 20, 0.15) 100%); }
.ds-une-texte { min-width: 0; }
.ds-une h2 { margin: 0.35rem 0 0.3rem; font-family: "Newsreader", Georgia, serif; font-weight: 600; font-size: clamp(1.5rem, 3.4vw, 2.1rem); letter-spacing: 0; line-height: 1.15; color: var(--texte); }
.ds-une:hover h2 { color: var(--accent); }
.ds-une p { margin: 0 0 0.6rem; font-family: "Newsreader", Georgia, serif; font-style: italic; color: var(--texte-corps); max-width: 40rem; }

/* Barre rubriques / tris */
.ds-barre { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.6rem 2rem; border-bottom: 1px solid var(--bordure); margin-bottom: 0.3rem; }
.ds-rubriques, .ds-tris { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.ds-rubriques a, .ds-tris a { padding-bottom: 0.6rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-attenue); text-decoration: none; }
.ds-rubriques a:hover, .ds-tris a:hover { color: var(--texte); }
.ds-rubriques a.actif { color: var(--texte); box-shadow: inset 0 -2px 0 var(--accent); }
.ds-tris a { font-weight: 400; letter-spacing: 0.1em; }
.ds-tris a.actif { color: var(--accent); }

/* Ligne d'un sujet */
.ds-sujet { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 1.4rem; align-items: center; padding: 1rem 0.2rem; border-bottom: 1px solid var(--bordure); color: var(--texte); text-decoration: none; }
.ds-sujet:hover { background: linear-gradient(90deg, rgba(255, 255, 255, 0.025), transparent); }
.ds-sujet-texte { min-width: 0; }
.ds-sujet h2 { margin: 0.3rem 0 0.25rem; font-family: "Newsreader", Georgia, serif; font-weight: 600; font-size: 1.22rem; letter-spacing: 0; line-height: 1.25; color: var(--texte); }
.ds-sujet:hover h2 { color: var(--accent); }
.ds-sujet p { margin: 0; font-family: "Newsreader", Georgia, serif; font-size: 0.98rem; color: var(--texte-corps); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ds-vignette { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; background-color: var(--fond-carte); background-size: cover; background-position: center; }
.ds-vignette::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18, 18, 20, 0.7), transparent 60%); }
.ds-vignette small { position: absolute; z-index: 1; left: 0.5rem; right: 0.5rem; bottom: 0.35rem; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-medaillon { position: absolute; z-index: 1; right: 0.45rem; top: 0.45rem; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid var(--fond); }
.ds-vignette-typo { display: grid; place-items: center; border: 1px solid var(--bordure); }
.ds-vignette-typo::after { display: none; }
.ds-vignette-typo b { padding: 0 0.6rem; font-family: "Bebas Neue", "Inter", sans-serif; font-weight: 400; font-size: 1.15rem; letter-spacing: 0.06em; line-height: 1; text-align: center; color: var(--texte-chaud); }

.ds-activite { display: grid; grid-template-columns: auto auto; align-items: center; gap: 0.25rem 1rem; text-align: right; }
.ds-nb { grid-row: span 2; display: flex; flex-direction: column; align-items: center; min-width: 3.2rem; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-attenue); }
.ds-nb strong { font-family: "Bebas Neue", "Inter", sans-serif; font-weight: 400; font-size: 2.1rem; line-height: 1; letter-spacing: 0; color: var(--texte); }
.ds-participants { display: flex; justify-content: flex-end; }
.ds-participants .avatar-initiale,
.ds-participants .avatar-photo { width: 26px; height: 26px; font-size: 0.66rem; margin-left: -7px; border: 2px solid var(--fond); }
.ds-participants > :first-child { margin-left: 0; }
.ds-dernier { font-size: 0.72rem; color: var(--texte-attenue); white-space: nowrap; }
.ds-dernier b { color: var(--texte); font-weight: 600; }
.ds-vide { padding: 2rem 0; color: var(--texte-attenue); }

/* Fil */
.ds-bandeau { min-height: 0; gap: 0.6rem; padding: 2.2rem 2rem 1.6rem; margin-top: 0.8rem; }
.ds-titre { margin: 0; font-family: "Newsreader", Georgia, serif; font-weight: 600; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: 0; line-height: 1.15; color: var(--texte); text-wrap: balance; }
.ds-fil { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 3rem; }
.ds-fil-principal { min-width: 0; }
.ds-message { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 1rem; padding: 1.3rem 0; border-top: 1px solid var(--bordure); scroll-margin-top: 5rem; }
.ds-message:first-child { border-top: 0; }
.ds-message > .avatar-initiale,
.ds-message > .avatar-photo { width: 40px; height: 40px; font-size: 0.85rem; }
.ds-message:target { background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.06), transparent 70%); }
.ds-message-corps { min-width: 0; }
.ds-auteur { font-size: 0.8rem; color: var(--texte-attenue); }
.ds-auteur b { color: var(--texte); font-weight: 600; }
.ds-texte { margin-top: 0.4rem; font-family: "Newsreader", Georgia, serif; font-size: 1.07rem; line-height: 1.6; color: var(--texte-corps); overflow-wrap: anywhere; }
.ds-texte > :first-child { margin-top: 0; }
.ds-texte p { margin: 0 0 0.7rem; }
.ds-premier .ds-texte { font-size: 1.15rem; }
.ds-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.2rem; margin-top: 0.3rem; }
.ds-actions a,
.ds-actions button,
.ds-actions summary,
.ds-action-texte { padding: 0; border: 0; background: transparent; color: var(--texte-attenue); font: inherit; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; cursor: pointer; list-style: none; }
.ds-actions a:hover,
.ds-actions button:hover,
.ds-actions summary:hover,
.ds-action-texte:hover { background: transparent; color: var(--texte); }
.ds-actions summary::-webkit-details-marker { display: none; }
.ds-actions form { margin: 0; }
.ds-modifier[open] { flex-basis: 100%; order: 10; }
.ds-modifier textarea { width: 100%; margin: 0.5rem 0; padding: 0.5rem 0; border: 0; border-bottom: 1px dashed var(--bordure); background: transparent; color: var(--texte); font: 1rem/1.5 "Newsreader", Georgia, serif; resize: vertical; outline: none; }
.ds-modifier button { color: var(--accent); }
.ds-repondre { padding-top: 1.3rem; border-top: 1px solid var(--bordure); }
.ds-repondre textarea { width: 100%; min-height: 120px; padding: 0.8rem 0; border: 0; border-bottom: 1px dashed var(--bordure); background: transparent; color: var(--texte); font: 1.05rem/1.55 "Newsreader", Georgia, serif; resize: vertical; outline: none; }
.ds-repondre textarea:focus { border-bottom-color: var(--accent); }
.ds-repondre-pied, .ds-form-pied { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 1rem; margin-top: 0.7rem; font-size: 0.74rem; color: var(--texte-attenue); }
.ds-repondre-pied button, .ds-form-pied button { padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.ds-repondre-pied button:hover, .ds-form-pied button:hover { background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.ds-ferme { padding-top: 1.2rem; border-top: 1px solid var(--bordure); color: var(--texte-attenue); font-size: 0.88rem; }

.ds-cote { position: sticky; top: 5rem; align-self: start; display: grid; gap: 1.6rem; }
.ds-cote h3 { margin: 0 0 0.6rem; font-family: "Inter", sans-serif; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texte-attenue); }
.ds-cote form { margin: 0 0 0.4rem; }
.ds-lie-carte { display: grid; grid-template-columns: 56px 1fr; gap: 0.8rem; align-items: center; color: var(--texte); text-decoration: none; }
.ds-lie-carte img { width: 56px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; }
.ds-lie-personne img { aspect-ratio: 1; border-radius: 50%; }
.ds-lie-carte strong { display: block; font-family: "Bebas Neue", "Inter", sans-serif; font-weight: 400; font-size: 1.35rem; line-height: 1; }
.ds-lie-carte:hover strong { color: var(--accent); }
.ds-lie-carte small { font-size: 0.74rem; color: var(--texte-attenue); }
.ds-participants-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; font-size: 0.86rem; }
.ds-participants-liste li { display: flex; align-items: center; gap: 0.55rem; }
.ds-participants-liste .avatar-initiale,
.ds-participants-liste .avatar-photo { width: 24px; height: 24px; font-size: 0.62rem; }
.ds-participants-liste em { margin-left: auto; font-style: normal; font-size: 0.72rem; color: var(--texte-attenue); font-variant-numeric: tabular-nums; }
.ds-aide { margin: 0.35rem 0 0; font-size: 0.76rem; color: var(--texte-attenue); }

/* Formulaire */
.ds-form-page { max-width: 760px; }
.ds-form-titre { margin: 0.5rem 0 1.6rem; }
.ds-form { display: grid; gap: 1.6rem; }
.ds-champ label, .ds-etiquette { display: block; margin-bottom: 0.45rem; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texte-attenue); }
.ds-champ input[type="text"], .ds-champ input:not([type]), .ds-titre-champ, .ds-chercher, .ds-champ textarea { width: 100%; padding: 0.4rem 0; border: 0; border-bottom: 1px dashed var(--bordure); border-radius: 0; background: transparent; color: var(--texte); outline: none; }
.ds-titre-champ { font: 600 1.5rem "Newsreader", Georgia, serif; }
.ds-chercher { font: inherit; font-size: 0.95rem; }
.ds-champ textarea { font: 1.05rem/1.55 "Newsreader", Georgia, serif; resize: vertical; }
.ds-champ input:focus, .ds-champ textarea:focus { border-bottom-color: var(--accent); }
.ds-fige { margin: 0; font-family: "Newsreader", Georgia, serif; font-size: 1.15rem; color: var(--texte); }
.ds-rubriques-choix .mot-choix { padding-bottom: 2px; border-bottom: 1px solid transparent; font-size: 0.92rem; color: #7a7a80; cursor: pointer; }
.ds-rubriques-choix .mot-choix:hover { color: var(--texte); }
.ds-rubriques-choix input:focus-visible + .mot-choix { outline: 1px solid var(--accent); outline-offset: 3px; }
.ds-rattacher { position: relative; max-width: 460px; }
.ds-suggestions { border-top: 1px solid var(--bordure); border-radius: var(--rayon); }
.ds-sugg { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; cursor: pointer; }
.ds-sugg:hover { background: var(--fond-carte-hover); }
.ds-rattache { display: flex; align-items: center; gap: 0.8rem; max-width: 460px; padding: 0.55rem 0.7rem; border: 1px solid var(--bordure); border-radius: 6px; }
.ds-rattache img { flex: none; width: 30px; height: 45px; object-fit: cover; border-radius: 3px; }
.ds-rattache > span { flex: 1; min-width: 0; font-size: 0.92rem; }
.ds-rattache small { display: block; font-size: 0.72rem; color: var(--texte-attenue); }

/* Encart sur les fiches film et personne */
.ds-encart { margin-top: 2.6rem; }
.ds-encart-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; border-top: 1px solid var(--bordure); color: var(--texte); text-decoration: none; }
.ds-encart-ligne strong { min-width: 0; font-family: "Newsreader", Georgia, serif; font-weight: 600; font-size: 1.05rem; }
.ds-encart-ligne:hover strong { color: var(--accent); }
.ds-encart-ligne small { font-size: 0.72rem; color: var(--texte-attenue); white-space: nowrap; }
.ds-encart-pied { display: flex; flex-wrap: wrap; gap: 1.4rem; padding-top: 0.8rem; border-top: 1px solid var(--bordure); }

@media (max-width: 860px) {
  .ds-fil { grid-template-columns: 1fr; gap: 2rem; }
  .ds-cote { position: static; }
  .ds-sujet { grid-template-columns: 96px minmax(0, 1fr); gap: 0.9rem; }
  .ds-activite { grid-column: 2; justify-content: start; text-align: left; grid-template-columns: auto 1fr; }
  .ds-participants { justify-content: flex-start; }
  .ds-une { grid-template-columns: 1fr; padding: 1.2rem; }
}
.ds-encart-vide { margin: 1.6rem 0 0; }

/* ===== Discussions v3 : une de magazine (13/10) ===== */
.dv-entete { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: 1.3rem; }
.dv-entete .ac-titre { margin: 0.2rem 0 0; }
.dv-accroche { margin: 0.35rem 0 0; font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1.1rem; color: var(--texte-corps); }
.dv-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-attenue); }
.dv-marque { color: var(--accent); }

.dv-une, .dv-rub, .dv-carte { position: relative; isolation: isolate; overflow: hidden; color: var(--texte); text-decoration: none; background-color: var(--fond-carte); }
.dv-une::before, .dv-rub::before, .dv-carte::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--img, none); background-size: cover; background-position: center 30%; transition: transform 0.7s ease; }
.dv-une:hover::before, .dv-rub:hover::before, .dv-carte:hover::before { transform: scale(1.04); }

/* A la une */
.dv-une { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2rem; min-height: 400px; padding: 2.2rem; border-radius: 10px; }
.dv-une::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18, 18, 20, 0.93) 0%, rgba(18, 18, 20, 0.6) 55%, rgba(18, 18, 20, 0.35) 100%), linear-gradient(0deg, rgba(18, 18, 20, 0.9), transparent 55%); }
.dv-une-texte { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.dv-une h2 { margin: 0.5rem 0 0.6rem; font-family: "Newsreader", Georgia, serif; font-weight: 600; font-size: clamp(1.9rem, 4.2vw, 2.9rem); letter-spacing: 0; line-height: 1.1; color: var(--texte); text-wrap: balance; }
.dv-une:hover h2 { color: var(--accent); }
.dv-une-texte > p { margin: 0 0 1.2rem; max-width: 34rem; font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1.1rem; color: var(--texte-corps); }
.dv-une-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; font-size: 0.8rem; color: var(--texte-attenue); }
.dv-une-pied b { color: var(--texte); }
.dv-une-fil { align-self: end; display: grid; gap: 0.75rem; padding: 1rem 1.1rem; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px; background: rgba(18, 18, 20, 0.75); backdrop-filter: blur(6px); }
.dv-une-fil h3 { margin: 0; font-family: "Inter", sans-serif; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texte-attenue); }
.dv-msg { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0.6rem; }
.dv-msg .avatar-initiale, .dv-msg .avatar-photo { width: 26px; height: 26px; font-size: 0.62rem; }
.dv-msg p { margin: 0; font-family: "Newsreader", Georgia, serif; font-size: 0.95rem; line-height: 1.4; color: var(--texte-corps); }
.dv-msg small { display: block; margin-bottom: 0.1rem; font-family: "Inter", sans-serif; font-size: 0.7rem; color: var(--texte-attenue); }
.dv-msg small b { color: var(--texte); }

/* Avatars empiles */
.dv-avatars { display: inline-flex; padding-left: 7px; }
.dv-avatars .avatar-initiale, .dv-avatars .avatar-photo { width: 26px; height: 26px; margin-left: -7px; font-size: 0.62rem; border: 2px solid var(--fond); }

/* Titres de section */
.dv-titre-section { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 2.6rem 0 0.9rem; }
.dv-titre-section h2 { margin: 0; font-size: 1.9rem; color: var(--texte); }
.dv-titre-section h2 span { margin-left: 0.35rem; font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1.1rem; letter-spacing: 0; color: var(--texte-chaud); }

/* Rubriques */
.dv-rubriques { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.8rem; }
.dv-rub { display: flex; flex-direction: column; justify-content: flex-end; min-height: 120px; padding: 0.9rem; border: 1px solid var(--bordure); border-radius: 6px; }
.dv-rub::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(18, 18, 20, 0.93), rgba(18, 18, 20, 0.3)); }
.dv-rub strong { font-family: "Bebas Neue", "Inter", sans-serif; font-weight: 400; font-size: 1.35rem; line-height: 1; letter-spacing: 0.03em; }
.dv-rub:hover strong, .dv-rub.actif strong { color: var(--accent); }
.dv-rub small { margin-top: 0.2rem; font-size: 0.7rem; color: var(--texte-attenue); }
.dv-rub.actif { border-color: var(--accent); }

/* Mosaique */
.dv-mosaique { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 210px; gap: 0.9rem; }
.dv-mosaique-1, .dv-mosaique-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dv-carte { display: flex; flex-direction: column; justify-content: flex-end; padding: 1rem 1.1rem; border-radius: 8px; }
.dv-carte::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(18, 18, 20, 0.95) 0%, rgba(18, 18, 20, 0.5) 55%, rgba(18, 18, 20, 0.15) 100%); }
.dv-carte.grande { grid-column: span 2; grid-row: span 2; padding: 1.5rem; }
.dv-carte h3 { margin: 0.35rem 0 0.5rem; font-family: "Newsreader", Georgia, serif; font-weight: 600; font-size: 1.12rem; letter-spacing: 0; line-height: 1.2; color: var(--texte); }
.dv-carte.grande h3 { font-size: 1.75rem; }
.dv-carte:hover h3 { color: var(--accent); }
.dv-extrait { margin: 0 0 0.8rem; max-width: 30rem; font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1rem; color: var(--texte-corps); }
.dv-carte-pied { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: 0.72rem; color: var(--texte-attenue); }
.dv-nb { font-family: "Bebas Neue", "Inter", sans-serif; font-size: 1.5rem; line-height: 1; color: var(--texte); }
.dv-lie { position: absolute; top: 0.8rem; right: 0.8rem; display: flex; align-items: center; gap: 0.45rem; max-width: calc(100% - 1.6rem); padding: 0.25rem 0.55rem 0.25rem 0.25rem; border-radius: 4px; background: rgba(18, 18, 20, 0.72); font-size: 0.7rem; color: var(--texte-corps); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-lie img { flex: none; width: 18px; height: 27px; object-fit: cover; border-radius: 2px; }
.dv-lie img.rond { width: 22px; height: 22px; border-radius: 50%; }

/* Sujets a lancer */
.dv-idees { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
.dv-idee { display: grid; grid-template-rows: auto 1fr auto; gap: 0.6rem; padding: 1rem; border: 1px dashed #3a3a40; border-radius: 8px; background: var(--fond-carte); color: var(--texte); text-decoration: none; transition: border-color 0.2s ease; }
.dv-idee:hover { border-color: var(--accent); }
.dv-idee-tete { display: flex; align-items: center; gap: 0.7rem; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texte-attenue); }
.dv-idee-tete img { flex: none; width: 34px; height: 51px; object-fit: cover; border-radius: 3px; }
.dv-idee-tete img.rond { width: 40px; height: 40px; border-radius: 50%; }
.dv-idee-vide { display: grid; place-items: center; width: 34px; height: 51px; border: 1px solid var(--bordure); border-radius: 3px; font-family: "Newsreader", Georgia, serif; font-size: 1.8rem; color: var(--texte-chaud); }
.dv-idee strong { font-family: "Newsreader", Georgia, serif; font-weight: 600; font-size: 1.05rem; line-height: 1.25; }
.dv-idee:hover strong { color: var(--accent); }

/* Liste complete */
.dv-ligne { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 1.1rem; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid var(--bordure); color: var(--texte); text-decoration: none; }
.dv-vig { display: block; aspect-ratio: 16 / 9; border-radius: 4px; background-color: var(--fond-carte); background-image: var(--img, none); background-size: cover; background-position: center; }
.dv-ligne-texte { min-width: 0; }
.dv-ligne h4 { margin: 0.25rem 0 0; font-family: "Newsreader", Georgia, serif; font-weight: 600; font-size: 1.05rem; line-height: 1.25; }
.dv-ligne:hover h4 { color: var(--accent); }
.dv-droite { display: flex; align-items: center; gap: 0.8rem; font-size: 0.72rem; color: var(--texte-attenue); white-space: nowrap; }

@media (max-width: 900px) {
  .dv-une { grid-template-columns: 1fr; min-height: 0; padding: 1.4rem; }
  .dv-rubriques { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-idees { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-mosaique, .dv-mosaique-1, .dv-mosaique-2 { grid-template-columns: 1fr; grid-auto-rows: 190px; }
  .dv-carte.grande { grid-column: auto; }
  .dv-ligne { grid-template-columns: 84px minmax(0, 1fr); }
  .dv-droite { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dv-une::before, .dv-rub::before, .dv-carte::before { transition: none; }
}

/* Formulaire de discussion : choix de l'image (13/10) */
.ds-apercu { aspect-ratio: 16 / 9; max-width: 560px; border-radius: 6px; background-color: var(--fond-carte); background-size: cover; background-position: center; }
.ds-vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 0.45rem; max-width: 560px; max-height: 190px; margin-top: 0.6rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--bordure) transparent; }
.ds-vignettes button { aspect-ratio: 16 / 9; padding: 0; border: 1px solid transparent; border-radius: 3px; background-color: var(--fond-carte); background-size: cover; background-position: center; cursor: pointer; opacity: 0.7; transition: opacity 0.2s ease, border-color 0.2s ease; }
.ds-vignettes button:hover { opacity: 1; background-color: var(--fond-carte); }
.ds-vignettes button.actif { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ds-vignettes button:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* Formulaire de discussion restructure (13/10) : champs visibles a gauche,
   apercu de la carte et choix de l'image a droite */
.ds-page [hidden] { display: none !important; }
.df-page { max-width: 1060px; }
.df-titre-page { margin: 0.5rem 0 1.6rem; }
.df-form { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2.4rem; align-items: start; }
.df-champs { display: grid; gap: 1.6rem; min-width: 0; }
.df-label { display: block; margin-bottom: 0.5rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texte); }
.df-label span { margin-left: 0.4rem; font-weight: 400; letter-spacing: 0.02em; text-transform: none; font-size: 0.78rem; color: var(--texte-attenue); }
.df-input { width: 100%; padding: 0.75rem 0.9rem; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--fond-carte); color: var(--texte); outline: none; transition: border-color 0.2s ease; }
.df-input:focus { border-color: var(--accent); }
.df-input::placeholder, .df-input-nu::placeholder { color: #7a7a80; }
.df-input-titre { font: 600 1.25rem "Newsreader", Georgia, serif; }
.df-texte { min-height: 220px; font: 1.05rem/1.55 "Newsreader", Georgia, serif; resize: vertical; }
.df-recherche { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.9rem; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--fond-carte); color: var(--texte-attenue); cursor: text; }
.df-recherche:focus-within { border-color: var(--accent); color: var(--accent); }
.df-input-nu { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--texte); font: inherit; font-size: 0.95rem; outline: none; }
.df-champs .ds-rattacher, .df-champs .ds-rattache { max-width: none; }
.df-pied { display: flex; justify-content: flex-end; padding-top: 0.4rem; }
.df-envoyer { padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.df-envoyer:hover { background: transparent; text-decoration: underline; text-underline-offset: 4px; }

.df-cote { position: sticky; top: 5rem; display: grid; gap: 0.9rem; }
.df-apercu { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 16 / 10; padding: 1rem 1.1rem; border-radius: 8px; overflow: hidden; background-color: var(--fond-carte); }
.df-apercu::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--img, none); background-size: cover; background-position: center 30%; transition: opacity 0.3s ease; }
.df-apercu::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(18, 18, 20, 0.95) 0%, rgba(18, 18, 20, 0.45) 60%, rgba(18, 18, 20, 0.1) 100%); }
.df-apercu-rub { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-attenue); }
.df-apercu strong { margin-top: 0.3rem; font-family: "Newsreader", Georgia, serif; font-weight: 600; font-size: 1.2rem; line-height: 1.2; color: var(--texte); overflow-wrap: anywhere; }
.df-cote .ds-vignettes { max-width: none; margin-top: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); max-height: 220px; }
.df-cote .ds-aide { margin: 0; }

@media (max-width: 860px) {
  .df-form { grid-template-columns: 1fr; }
  .df-cote { position: static; order: -1; }
}

/* Barre de mise en forme des champs [data-markdown] (13/10) */
.md-barre { display: flex; flex-wrap: wrap; gap: 0.15rem 1rem; margin-bottom: 0.35rem; }
.md-barre button { padding: 0.15rem 0; border: 0; background: transparent; color: var(--texte-attenue); font: inherit; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.md-barre button b, .md-barre button i { font-size: 0.85rem; letter-spacing: 0; text-transform: none; }
.md-barre button:hover { background: transparent; color: var(--accent); }
.md-barre button:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* Liens dans les messages de discussion : dans le ton du site, pas le bleu du navigateur */
.ds-texte a {
  color: var(--texte);
  text-decoration: underline;
  text-decoration-color: rgba(var(--accent-rgb), 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.ds-texte a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.ds-texte strong { color: var(--texte); }

/* Critiques : ecrire une critique depuis la liste (13/10) */
.crl-entete-action { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 0.8rem 2rem; }
.crl-entete-action > div { min-width: 0; }
.crl-ecrire { padding: 0; border: 0; border-radius: 0; background: transparent; font-family: inherit; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); cursor: pointer; }
.crl-ecrire:hover { background: transparent; }
.crl-choisir { margin: 1.2rem 0 0.4rem; padding: 1.2rem 1.3rem; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--fond-carte); }
.crl-choisir[hidden] { display: none; }
.crl-choisir h2 { margin: 0 0 0.8rem; font-family: "Newsreader", Georgia, serif; font-weight: 600; font-size: 1.3rem; letter-spacing: 0; color: var(--texte); }
.crl-choisir-aide { margin: 0 0 0.5rem; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texte-attenue); }
.crl-raccourcis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.8rem; margin-bottom: 1.1rem; }
.crl-raccourci { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; color: var(--texte); text-decoration: none; }
.crl-raccourci img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; transition: transform 0.3s ease; }
.crl-raccourci:hover img { transform: translateY(-3px); }
.crl-raccourci span { font-size: 0.78rem; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.crl-raccourci:hover span { color: var(--accent); }
.crl-recherche { position: relative; max-width: 480px; }
.crl-suggestions { border-top: 1px solid var(--bordure); border-radius: var(--rayon); }
@media (max-width: 700px) {
  .crl-raccourcis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Accueil : choix du pays des sorties (13/10) */
.ac-pays { display: inline-block; position: relative; margin-left: 0.35rem; font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1.12rem; letter-spacing: 0; text-transform: none; color: var(--texte-chaud); vertical-align: baseline; }
.ac-pays summary { list-style: none; cursor: pointer; border-bottom: 1px dashed rgba(163, 155, 142, 0.5); }
.ac-pays summary::-webkit-details-marker { display: none; }
.ac-pays summary::after { content: ""; display: inline-block; width: 0.38em; height: 0.38em; margin-left: 0.35em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.2em) rotate(45deg); }
.ac-pays summary:hover { color: var(--accent); border-bottom-color: var(--accent); }
.ac-pays-liste { position: absolute; z-index: 20; top: calc(100% + 0.5rem); left: 0; display: grid; min-width: 12rem; padding: 0.4rem; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--fond-carte); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); }
.ac-pays-liste button { padding: 0.4rem 0.6rem; border: 0; border-radius: 4px; background: transparent; color: var(--texte-corps); font: inherit; font-size: 0.95rem; text-align: left; cursor: pointer; }
.ac-pays-liste button:hover { background: var(--fond-carte-hover); color: var(--texte); }
.ac-pays-liste button[aria-current="true"] { color: var(--accent); }

/* =====================================================================
   MES PERSONNES (13/10) — maquette "Eikon Mes personnes"
   ===================================================================== */
.mp-page { max-width: 1100px; }
.mp-hero { position: relative; z-index: 1; padding: 2.4rem 2.2rem 0; margin-bottom: 0.5rem; }
.mp-hero .ac-hero-fond { background-position: center 25%; }
.mp-hero .ac-titre { margin: 0.3rem 0 0.6rem; }
.mp-phrase { margin: 0 0 1.4rem; max-width: 42rem; font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1.1rem; color: var(--texte-corps); }
.mp-phrase b { font-style: normal; color: var(--texte); }
.mp-chiffres { display: flex; flex-wrap: wrap; gap: 0.6rem 2.4rem; margin-bottom: 1.6rem; }
.mp-chiffres div { display: flex; flex-direction: column; }
.mp-chiffres strong { font-family: "Bebas Neue", "Inter", sans-serif; font-weight: 400; font-size: 2.1rem; line-height: 1; font-variant-numeric: tabular-nums; }
.mp-chiffres span { font-size: 0.72rem; color: var(--texte-attenue); }
.mp-onglets { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.mp-onglets a { padding-bottom: 0.65rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-attenue); text-decoration: none; }
.mp-onglets a:hover { color: var(--texte); }
.mp-onglets a.actif { color: var(--texte); box-shadow: inset 0 -2px 0 var(--accent); }
.mp-onglets em { margin-left: 0.35rem; font-style: normal; font-weight: 400; color: var(--texte-attenue); }

.mp-titre-section { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin: 2.6rem 0 1rem; }
.mp-titre-section h2 { margin: 0; font-size: 1.9rem; color: var(--texte); }
.mp-titre-section h2 span { margin-left: 0.35rem; font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1.1rem; letter-spacing: 0; color: var(--texte-chaud); }
.mp-tris { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.2rem; }
.mp-tris a, .mp-filtres { padding: 0; border: 0; background: transparent; font: inherit; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-attenue); text-decoration: none; cursor: pointer; }
.mp-tris a:hover, .mp-filtres:hover { background: transparent; color: var(--texte); }
.mp-tris a.actif { color: var(--accent); }
.mp-filtres { padding-left: 1.2rem; border-left: 1px solid var(--bordure); }

/* Progression dans la filmographie */
.mp-progression { margin-top: 0.45rem; }
.mp-barre { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.mp-barre i { display: block; height: 100%; background: var(--accent); }
.mp-progression small { display: flex; justify-content: space-between; margin-top: 0.3rem; font-size: 0.68rem; color: var(--texte-attenue); font-variant-numeric: tabular-nums; }
.mp-progression small b { color: var(--texte); font-weight: 600; }

/* Podium */
.mp-podium { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 1rem; }
.mp-marche { position: relative; isolation: isolate; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; align-items: end; min-height: 240px; padding: 1.2rem; border-radius: 8px; overflow: hidden; background-color: var(--fond-carte); color: var(--texte); text-decoration: none; }
.mp-marche::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--img, none); background-size: cover; background-position: center 30%; transition: transform 0.6s ease; }
.mp-marche:hover::before { transform: scale(1.04); }
.mp-marche::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(18, 18, 20, 0.95), rgba(18, 18, 20, 0.35)); }
.mp-marche > div { min-width: 0; }
.mp-portrait { width: 96px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 5px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); }
.mp-rang { font-family: "Bebas Neue", "Inter", sans-serif; font-size: 1rem; letter-spacing: 0.08em; color: var(--accent); }
.mp-marche h3 { margin: 0.1rem 0 0.45rem; font-size: 1.7rem; line-height: 1; color: var(--texte); }
.mp-marche:hover h3 { color: var(--accent); }
.mp-marche dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.15rem 0.7rem; margin: 0; font-size: 0.76rem; }
.mp-marche dt { color: var(--texte-attenue); }
.mp-marche dd { margin: 0; color: var(--texte-corps); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-marche dd i { font-family: "Newsreader", Georgia, serif; }

/* Grille */
.mp-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.5rem 1rem; }
.mp-pers { position: relative; min-width: 0; }
.mp-photo { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden; background-color: var(--fond-carte); }
.mp-photo > img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.mp-pers:hover .mp-photo > img { transform: scale(1.03); }
.mp-initiales { display: grid; place-items: center; width: 100%; height: 100%; font-family: "Bebas Neue", "Inter", sans-serif; font-size: 2rem; color: var(--texte-attenue); }
.mp-note { position: absolute; left: 0.45rem; top: 0.45rem; display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--accent); border-radius: 50%; background: rgba(18, 18, 20, 0.72); font-family: "Bebas Neue", "Inter", sans-serif; font-size: 0.95rem; color: var(--accent); }
.mp-vus { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 3px; padding: 2.2rem 0.45rem 0.45rem; background: linear-gradient(0deg, rgba(18, 18, 20, 0.92) 40%, transparent); opacity: 0; transform: translateY(6px); transition: opacity 0.25s ease, transform 0.25s ease; }
.mp-vus img { flex: 1; min-width: 0; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px; }
.mp-pers:hover .mp-vus, .mp-photo:focus-visible .mp-vus { opacity: 1; transform: none; }
.mp-favori { position: absolute; right: 0.45rem; top: 0.45rem; margin: 0; }
.mp-favori button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(18, 18, 20, 0.7); cursor: pointer; }
.mp-favori button:hover { background: rgba(18, 18, 20, 0.9); }
.mp-nom { display: block; margin-top: 0.55rem; font-size: 0.9rem; font-weight: 600; line-height: 1.25; color: var(--texte); text-decoration: none; }
.mp-nom:hover { color: var(--accent); }
.mp-nb { display: block; margin-top: 0.3rem; font-size: 0.72rem; color: var(--texte-attenue); }
.mp-voir-plus { display: flex; justify-content: center; margin-top: 2rem; }
.mp-vide { color: var(--texte-attenue); }

/* A explorer */
.mp-explorer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mp-expl { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0.9rem; align-items: center; padding: 0.9rem; border: 1px solid var(--bordure); border-radius: 8px; background: var(--fond-carte); color: var(--texte); text-decoration: none; }
.mp-expl:hover { border-color: #4a4a50; }
.mp-expl > img, .mp-expl > .mp-initiales { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--fond-carte-hover); font-size: 1.2rem; }
.mp-expl > div { min-width: 0; }
.mp-expl strong { display: block; font-size: 0.95rem; }
.mp-expl p { margin: 0.2rem 0 0.5rem; font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 0.92rem; color: var(--texte-corps); }

@media (max-width: 860px) {
  .mp-hero { padding: 1.6rem 1.1rem 0; }
  .mp-podium, .mp-explorer { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-marche::before, .mp-photo > img, .mp-vus { transition: none; }
}

/* =====================================================================
   FICHE PERSONNE (13/10) — maquette "Eikon Fiche personne"
   ===================================================================== */
.fp-page { max-width: 1100px; }
.fp-hero { position: relative; z-index: 1; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 2rem; align-items: end; min-height: 380px; padding: 2.2rem; }
.fp-hero .ac-hero-fond { background-position: center 25%; }
.fp-portrait { width: 190px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); background: var(--fond-carte); }
.fp-initiales { display: grid; place-items: center; font-family: "Bebas Neue", "Inter", sans-serif; font-size: 2.6rem; color: var(--texte-attenue); background: var(--fond-carte-hover); }
.fp-hero-texte { min-width: 0; }
.fp-nom { margin: 0.3rem 0 0.4rem; font-size: clamp(2.8rem, 6vw, 4.4rem); line-height: 0.92; color: var(--texte); }
.fp-metiers { margin: 0; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-attenue); }
.fp-metiers b { color: var(--texte); font-weight: 600; }
.fp-naissance { margin: 0.5rem 0 0.9rem; font-size: 0.85rem; color: var(--texte-attenue); }
.fp-bio { max-width: 42rem; margin: 0 0 1rem; font-family: "Newsreader", Georgia, serif; font-size: 1.05rem; line-height: 1.55; color: var(--texte-corps); }
.fp-favori { margin: 0; }
.fp-favori button, .fp-a-voir button { padding: 0; border: 0; background: transparent; font: inherit; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); cursor: pointer; }
.fp-favori button:hover, .fp-a-voir button:hover { background: transparent; text-decoration: underline; text-underline-offset: 4px; }

/* Toi et elle */
.fp-toi { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.4rem 2.5rem; margin-top: 2rem; padding: 1.6rem 1.8rem; border: 1px solid var(--bordure); border-radius: 10px; background: var(--fond-carte); }
.fp-toi h2 { grid-column: 1 / -1; margin: 0; font-size: 1.9rem; color: var(--texte); }
.fp-toi h2 span { margin-left: 0.35rem; font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1.1rem; letter-spacing: 0; color: var(--texte-chaud); }
.fp-toi-gauche, .fp-toi-droite { min-width: 0; }
.fp-chiffres { display: flex; flex-wrap: wrap; gap: 1rem 2.2rem; margin-bottom: 1.3rem; }
.fp-chiffres div { display: flex; flex-direction: column; gap: 0.2rem; }
.fp-chiffres strong { font-family: "Bebas Neue", "Inter", sans-serif; font-weight: 400; font-size: 2.3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.fp-cercle { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: 1.3rem !important; transform: rotate(-10deg); }
.fp-chiffres span { font-size: 0.72rem; color: var(--texte-attenue); }
.fp-metier-prog { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 4.5rem; gap: 0.8rem; align-items: center; padding: 0.35rem 0; font-size: 0.82rem; color: var(--texte-corps); }
.fp-metier-prog small { text-align: right; color: var(--texte-attenue); font-variant-numeric: tabular-nums; }
.fp-metier-prog small b { color: var(--texte); }
.fp-barre { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.fp-barre i { display: block; height: 100%; background: var(--accent); }
.fp-frise h3 { margin: 0 0 0.7rem; font-family: "Inter", sans-serif; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texte-attenue); }
.fp-frise-ligne { position: relative; height: 56px; margin: 0 1.5rem 1.2rem; }
.fp-frise-ligne::before { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 1px; background: var(--bordure); }
.fp-point { position: absolute; top: 22px; width: 11px; height: 11px; margin-left: -5px; border: 1.5px solid #5a5a60; border-radius: 50%; background: var(--fond-carte); }
.fp-point.vu { border-color: var(--accent); background: var(--accent); }
.fp-frise-ligne em { position: absolute; top: 0; max-width: 9rem; transform: translateX(-50%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "Newsreader", Georgia, serif; font-size: 0.82rem; color: var(--texte-corps); }
.fp-frise-ligne small { position: absolute; top: 40px; transform: translateX(-50%); font-size: 0.66rem; color: var(--texte-attenue); font-variant-numeric: tabular-nums; }
.fp-prefere { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 0.9rem; align-items: center; color: var(--texte); text-decoration: none; }
.fp-prefere img, .fp-prefere > span { width: 70px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; background: var(--fond-carte-hover); }
.fp-prefere strong { display: block; font-family: "Newsreader", Georgia, serif; font-weight: 600; font-size: 1.1rem; }
.fp-prefere:hover strong { color: var(--accent); }
.fp-prefere p { margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--texte-attenue); }

/* Rangees */
.fp-rang { position: absolute; left: 0.45rem; bottom: 0.3rem; font-family: "Bebas Neue", "Inter", sans-serif; font-size: 2rem; line-height: 1; color: rgba(255, 255, 255, 0.88); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); }
.fp-mots { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; }
.fp-mots button { padding: 0; border: 0; background: transparent; font: inherit; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-attenue); cursor: pointer; }
.fp-mots button:hover { background: transparent; color: var(--texte); }
.fp-mots button.onglet-actif { color: var(--accent); }
.fp-bande-voir { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1.2rem 1rem; }
.fp-bande-voir[hidden] { display: none; }
.fp-film-voir .ac-film-titre { display: block; color: var(--texte); text-decoration: none; }
.fp-film-voir .ac-film-titre:hover { color: var(--accent); }
.fp-a-voir { margin: 0.35rem 0 0; }
.fp-a-voir button { font-size: 0.6rem; }
.fp-a-voir button.actif { color: var(--texte-attenue); }

/* Filmographie par decennie */
.fp-decennie { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1.2rem; padding: 1rem 0; border-top: 1px solid var(--bordure); }
.fp-decennie h3 { margin: 0; font-size: 2rem; line-height: 1; color: var(--texte-attenue); }
.fp-decennie h3 small { display: block; margin-top: 0.3rem; font-family: "Inter", sans-serif; font-size: 0.68rem; letter-spacing: 0; color: var(--texte-attenue); }
.fp-lignes { display: grid; gap: 0.1rem; min-width: 0; }
.fp-ligne { display: grid; grid-template-columns: 3rem 30px minmax(0, 1fr) auto; gap: 0.8rem; align-items: center; padding: 0.35rem 0.4rem; border-radius: 4px; color: var(--texte); text-decoration: none; }
.fp-ligne:hover { background: var(--fond-carte); }
.fp-ligne:hover .fp-titre-film { color: var(--accent); }
.fp-an { font-size: 0.8rem; color: var(--texte-attenue); font-variant-numeric: tabular-nums; }
.fp-ligne img, .fp-mini-vide { width: 30px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px; background: var(--fond-carte); }
.fp-titre-film { min-width: 0; font-size: 0.92rem; }
.fp-titre-film em { margin-left: 0.5rem; font-style: normal; font-size: 0.75rem; color: var(--texte-attenue); }
.fp-ligne.pas-vu .fp-titre-film { color: var(--texte-corps); }
.fp-etat { font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-attenue); white-space: nowrap; }
.fp-etat.vu { color: var(--accent); }

/* Collaborateurs */
.fp-collab { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1.2rem 1rem; }
.fp-coll { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--texte); text-decoration: none; }
.fp-coll img, .fp-coll .fp-initiales { width: 84px; height: 84px; margin-bottom: 0.5rem; object-fit: cover; border-radius: 50%; font-size: 1.4rem; }
.fp-coll strong { font-size: 0.85rem; font-weight: 600; }
.fp-coll:hover strong { color: var(--accent); }
.fp-coll small { font-size: 0.72rem; color: var(--texte-attenue); }

@media (max-width: 860px) {
  .fp-hero { grid-template-columns: 110px minmax(0, 1fr); gap: 1rem; padding: 1.2rem; min-height: 0; }
  .fp-portrait { width: 110px; }
  .fp-toi { grid-template-columns: 1fr; padding: 1.2rem; }
  .fp-decennie { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* Fiche personne, retouches du 13/10 :
   - le portrait reste en haut et le fond garde sa hauteur quand la biographie se deplie ;
   - la frise a points devient une grille de mini-affiches par decennie ;
   - lignes de filmographie plus grandes */
.fp-hero { align-items: start; padding-top: 5.5rem; }
.fp-hero .ac-hero-fond { bottom: auto; height: 460px; }
.fp-frise h3 span { margin-left: 0.4rem; font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: #6a6a70; }
.fp-frise-dec { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.6rem; align-items: start; padding: 0.3rem 0; }
.fp-frise-an { padding-top: 0.2rem; font-family: "Bebas Neue", "Inter", sans-serif; font-size: 1.05rem; color: var(--texte-attenue); }
.fp-frise-films { display: flex; flex-wrap: wrap; gap: 4px; }
.fp-mini { display: block; width: 34px; aspect-ratio: 2 / 3; border-radius: 2px; overflow: hidden; background: var(--fond-carte-hover); opacity: 0.35; filter: grayscale(1); transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease; }
.fp-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-mini span { display: grid; place-items: center; height: 100%; font-size: 0.7rem; color: var(--texte-attenue); }
.fp-mini.vu { opacity: 1; filter: none; box-shadow: 0 2px 0 var(--accent); }
.fp-mini:hover { opacity: 1; filter: none; transform: translateY(-2px); }
.fp-frise { margin-bottom: 1.2rem; }
.fp-ligne { grid-template-columns: 3rem 46px minmax(0, 1fr) auto; gap: 1rem; padding: 0.45rem 0.5rem; }
.fp-ligne img, .fp-mini-vide { width: 46px; border-radius: 3px; }
.fp-titre-film { font-size: 1rem; }
.fp-titre-film em { display: block; margin: 0.15rem 0 0; }

/* Fiche personne : frise pleine largeur (13/10) — un point par film, dore si
   vu, rangees superieures pour les films proches ; affiche au survol */
.fp-tl-bloc { grid-column: 1 / -1; min-width: 0; }
.fp-tl-bloc h3 { margin: 0 0 0.6rem; font-family: "Inter", sans-serif; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texte-attenue); }
.fp-tl-bloc h3 span { margin-left: 0.8rem; font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: var(--texte-attenue); }
.fp-tl-legende { display: inline-block; width: 9px; height: 9px; margin: 0 0.3rem 0 0.6rem; border: 1.5px solid #5a5a60; border-radius: 50%; vertical-align: -1px; }
.fp-tl-legende.vu { border-color: var(--accent); background: var(--accent); }
.fp-tl { position: relative; height: calc(30px + var(--rangees, 1) * 16px + 24px); margin: 0 0.4rem; }
.fp-tl-axe { position: absolute; left: 0; right: 0; bottom: 24px; height: 1px; background: #3a3a40; }
.fp-tl-repere { position: absolute; bottom: 0; transform: translateX(-50%); font-size: 0.66rem; color: var(--texte-attenue); font-variant-numeric: tabular-nums; }
.fp-tl-repere::before { content: ""; position: absolute; left: 50%; bottom: 17px; width: 1px; height: 7px; background: #3a3a40; }
.fp-tl-pt { position: absolute; bottom: calc(18px + var(--rangee, 0) * 16px); width: 12px; height: 12px; margin-left: -6px; border: 1.5px solid #5a5a60; border-radius: 50%; background: var(--fond-carte); z-index: 1; transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.fp-tl-pt.vu { border-color: var(--accent); background: var(--accent); }
.fp-tl-pt:hover, .fp-tl-pt:focus-visible { z-index: 10; outline: none; border-color: var(--texte); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.35); }
.fp-tl-bulle { position: absolute; bottom: calc(100% + 10px); left: 50%; display: none; width: 124px; padding: 0.5rem; transform: translateX(-50%); border: 1px solid var(--bordure); border-radius: 6px; background: #1f1f23; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6); text-align: center; pointer-events: none; }
.fp-tl-pt.gauche .fp-tl-bulle { left: -6px; transform: none; }
.fp-tl-pt.droite .fp-tl-bulle { left: auto; right: -6px; transform: none; }
.fp-tl-pt:hover .fp-tl-bulle, .fp-tl-pt:focus-visible .fp-tl-bulle { display: block; }
.fp-tl-bulle img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px; margin-bottom: 0.4rem; }
.fp-tl-bulle b { display: block; font-size: 0.78rem; font-weight: 600; line-height: 1.25; color: var(--texte); }
.fp-tl-bulle small { display: block; margin-top: 0.15rem; font-size: 0.68rem; color: var(--texte-attenue); }

/* Grilles "Tu as vu" / "Il te reste a voir" : cartes du site avec raccourcis */
.fp-grille[hidden] { display: none; }

/* Lignes de la filmographie : etat en icones (vu, note, favori, watchlist) */
.fp-etats { display: flex; align-items: center; gap: 0.6rem; color: var(--texte-attenue); }
.fp-ic { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.72rem; }
.fp-ic.vu, .fp-ic.coeur { color: var(--accent); }
.fp-ic.vu small { font-size: 0.68rem; }
.fp-ic.note { display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid var(--accent); border-radius: 50%; font-family: "Bebas Neue", "Inter", sans-serif; font-size: 0.85rem; color: var(--accent); transform: rotate(-10deg); }
@media (hover: none) {
  .fp-tl-pt { width: 14px; height: 14px; margin-left: -7px; }
}

/* Accueil : les bandeaux utilisent la carte du site telle quelle (13/10) :
   meme fond, memes raccourcis toujours visibles, meme largeur que les grilles
   (6 colonnes sur grand ecran). Pas de variante propre a l'accueil. */
.ac-carte { min-width: 0; }
.ac-carte[hidden], [data-personne][hidden] { display: none; }
.ac-bande:has(.ac-carte) { grid-auto-columns: calc((100% - 5 * 1.5rem) / 6); gap: 1.5rem; }
.ac-carte .carte-film-conteneur { height: 100%; }
@media (max-width: 900px) {
  .ac-bande:has(.ac-carte) { grid-auto-columns: calc((100% - 2 * 1rem) / 3.3); gap: 1rem; }
}
@media (max-width: 560px) {
  .ac-bande:has(.ac-carte) { grid-auto-columns: calc((100% - 1rem) / 2.2); }
}

/* Fiche personne (13/10) : prefere plus grand, filmographie plus lisible */
.fp-toi-droite { display: flex; align-items: flex-start; }
.fp-prefere { grid-template-columns: 150px minmax(0, 1fr); gap: 1.4rem; align-items: end; width: 100%; }
.fp-prefere img, .fp-prefere > span { width: 150px; border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); transition: transform 0.2s ease; }
.fp-prefere:hover img { transform: translateY(-3px); }
.fp-prefere > div { padding-bottom: 0.4rem; }
.fp-prefere strong { margin-top: 0.35rem; font-size: 1.6rem; line-height: 1.15; }
.fp-prefere p { margin-top: 0.5rem; font-size: 0.85rem; }
.fp-ligne { grid-template-columns: 3rem 72px minmax(0, 1fr) auto; gap: 1.2rem; padding: 0.5rem 0.6rem; }
.fp-ligne img, .fp-mini-vide { width: 72px; border-radius: 4px; }
.fp-titre-film { font-size: 1.08rem; }
@media (max-width: 560px) {
  .fp-prefere { grid-template-columns: 110px minmax(0, 1fr); }
  .fp-prefere img, .fp-prefere > span { width: 110px; }
  .fp-ligne { grid-template-columns: 2.6rem 54px minmax(0, 1fr) auto; gap: 0.8rem; }
  .fp-ligne img, .fp-mini-vide { width: 54px; }
}

/* Fiche personne (13/10, 2) : moyenne sobre, prefere centre avec tampon de note modifiable */
.fp-chiffres { gap: 1.2rem 3.2rem; margin-bottom: 1.8rem; }
.fp-chiffres strong small { margin-left: 0.15rem; font-size: 1rem; color: var(--texte-attenue); }
.fp-toi-droite { display: flex; align-items: center; justify-content: center; }
.fp-prefere { display: grid; grid-template-columns: 150px minmax(0, 15rem); gap: 1.6rem; align-items: center; width: auto; }
.fp-prefere-affiche { position: relative; width: 150px; }
.fp-prefere-affiche > a { display: block; }
.fp-prefere-affiche img, .fp-prefere-affiche > a > span { display: block; width: 150px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; background: var(--fond-carte-hover); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); transition: transform 0.2s ease; }
.fp-prefere-affiche > a:hover img { transform: translateY(-3px); }
.fp-tampon { position: absolute; right: -22px; bottom: -14px; z-index: 3; display: grid; place-items: center; width: 58px; height: 58px; padding: 0; border: 2px dashed var(--bordure); border-radius: 50%; background: var(--fond-carte); color: var(--texte-attenue); font-family: "Bebas Neue", "Inter", sans-serif; font-size: 1.45rem; line-height: 1; cursor: pointer; transform: rotate(-10deg); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, color 0.2s ease; }
.fp-tampon.note-actif { border-style: solid; border-color: var(--accent); color: var(--accent); }
.fp-tampon:hover, .fp-tampon:focus-visible { background: var(--fond-carte); transform: rotate(0deg) scale(1.08); outline: none; }
.fp-tampon span:empty::before { content: "–"; }
.fp-tampon.note-confirmee { animation: pulseNote 0.4s ease; }
.fp-prefere-affiche > .cadran-note { width: 130px; }
.fp-prefere-texte > a { color: var(--texte); text-decoration: none; }
.fp-prefere-texte > a:hover strong { color: var(--accent); }
.fp-prefere-texte strong { display: block; margin-top: 0.35rem; font-family: "Newsreader", Georgia, serif; font-weight: 600; font-size: 1.6rem; line-height: 1.15; }
.fp-prefere-texte p { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--texte-attenue); }
@media (max-width: 900px) { .fp-toi-droite { justify-content: flex-start; } }
@media (max-width: 560px) {
  .fp-prefere { grid-template-columns: 110px minmax(0, 1fr); gap: 1.4rem; }
  .fp-prefere-affiche, .fp-prefere-affiche img, .fp-prefere-affiche > a > span { width: 110px; }
  .fp-tampon { width: 50px; height: 50px; right: -18px; font-size: 1.25rem; }
}

/* =====================================================================
   Mes films vus (13/10) : barre d'outils en tete, vue Journal par mois
   ===================================================================== */
.mf-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.2rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--bordure); }
.mf-tete h1 { margin: 0; }
.mf-tete h1 small { display: block; margin-top: 0.35rem; font-family: "Newsreader", Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: var(--texte-chaud); }
.mf-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.mf-cherche { display: flex; align-items: center; gap: 0.5rem; width: 15rem; max-width: 100%; margin: 0; padding: 0 0.75rem; border: 1px solid var(--bordure); border-radius: 6px; background: var(--fond-carte); color: var(--texte-attenue); }
.mf-cherche:focus-within { border-color: var(--accent); }
.mf-cherche input { flex: 1; min-width: 0; padding: 0.5rem 0; border: 0; background: transparent; color: var(--texte); font: inherit; font-size: 0.85rem; outline: none; box-shadow: none; }
.mf-seg { display: inline-flex; border: 1px solid var(--bordure); border-radius: 6px; overflow: hidden; }
.mf-seg a { padding: 0.5rem 0.75rem; border-right: 1px solid var(--bordure); font-size: 0.76rem; color: var(--texte-attenue); text-decoration: none; white-space: nowrap; }
.mf-seg a:last-child { border-right: 0; }
.mf-seg a:hover { color: var(--texte); }
.mf-seg a.actif { background: var(--fond-carte-hover); color: var(--texte); }
.mf-filtres { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.85rem; border: 1px solid var(--accent); border-radius: 6px; background: transparent; color: var(--accent); font: inherit; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.mf-filtres:hover { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); }
.mf-filtres em { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 0.25rem; border-radius: 9px; background: var(--accent); color: var(--fond); font-style: normal; font-size: 0.65rem; letter-spacing: 0; }

.jr { margin-top: 0.5rem; }
.jr-mois { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem; padding: 1.6rem 0 1rem; border-bottom: 1px solid var(--bordure); }
.jr-mois-tete { position: sticky; top: 5rem; align-self: start; }
.jr-mois-tete h2 { margin: 0; font-family: "Bebas Neue", "Inter", sans-serif; font-weight: 400; font-size: 2.3rem; line-height: 0.95; color: var(--texte); }
.jr-mois-tete h2 span { display: block; font-size: 1.4rem; color: var(--texte-attenue); }
.jr-mois-tete p { margin: 0.6rem 0 0; font-size: 0.75rem; line-height: 1.6; color: var(--texte-attenue); }
.jr-mois-tete p b { color: var(--texte); font-weight: 600; }
.jr-lignes { display: grid; gap: 0.15rem; min-width: 0; }
.jr-ligne { display: grid; grid-template-columns: 3.2rem 60px minmax(0, 1fr) 12rem 50px; gap: 1.1rem; align-items: center; padding: 0.5rem 0.6rem; border-radius: 6px; }
.jr-ligne:hover { background: var(--fond-carte); }
.jr-ligne:hover .jr-titre { color: var(--accent); }
.jr-jour { text-align: center; line-height: 1; }
.jr-jour strong { display: block; font-family: "Bebas Neue", "Inter", sans-serif; font-weight: 400; font-size: 1.9rem; color: var(--texte); }
.jr-jour small { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-attenue); }
.jr-affiche { display: block; width: 60px; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; background: var(--fond-carte-hover); }
.jr-affiche img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jr-film { min-width: 0; color: var(--texte); text-decoration: none; }
.jr-titre { display: block; font-family: "Newsreader", Georgia, serif; font-weight: 600; font-size: 1.12rem; line-height: 1.25; transition: color 0.15s ease; }
.jr-titre i { margin-left: 0.45rem; font-family: "Inter", sans-serif; font-style: normal; font-weight: 400; font-size: 0.8rem; color: var(--texte-attenue); }
.jr-meta { display: block; margin-top: 0.2rem; font-size: 0.8rem; color: var(--texte-attenue); }
.jr-coeur { margin-left: 0.4rem; color: var(--accent); }
.jr-revu { display: inline-block; margin-left: 0.55rem; padding: 0.05rem 0.4rem; border: 1px solid var(--bordure); border-radius: 3px; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-chaud); vertical-align: 1px; }
.jr-lieu { display: flex; align-items: center; gap: 0.55rem; min-width: 0; font-size: 0.8rem; color: var(--texte-corps); }
.jr-lieu .picto-lieu { flex: none; width: 16px; height: 16px; color: var(--texte-attenue); }
.jr-lieu div { min-width: 0; }
.jr-lieu small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; color: var(--texte-attenue); }
.jr-note { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; justify-self: end; border: 2px solid var(--accent); border-radius: 50%; background: transparent; color: var(--accent); font-family: "Bebas Neue", "Inter", sans-serif; font-size: 1.25rem; line-height: 1; cursor: pointer; transform: rotate(-10deg); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.jr-note.vide { border: 2px dashed var(--bordure); color: var(--texte-attenue); }
.jr-note:hover { background: transparent; transform: rotate(0deg) scale(1.08); }
@media (max-width: 900px) {
  .jr-mois { grid-template-columns: 1fr; gap: 0.6rem; }
  .jr-mois-tete { position: static; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 1rem; }
  .jr-mois-tete h2 span { display: inline; }
  .jr-mois-tete p { margin: 0; }
  .jr-mois-tete p br { display: none; }
  .jr-ligne { grid-template-columns: 2.6rem 50px minmax(0, 1fr) 46px; gap: 0.8rem; }
  .jr-lieu { display: none; }
  .jr-affiche { width: 50px; }
}
@media (max-width: 560px) { .mf-cherche { width: 100%; } }

/* =====================================================================
   Mes favoris (13/10) : vitrine, Top 10 en palmares (aussi page membre)
   ===================================================================== */
.fv-hero { position: relative; isolation: isolate; margin-bottom: 0.5rem; padding: 2.2rem 2.2rem 0; border-radius: 10px; overflow: hidden; }
.fv-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 78% 25%, rgba(var(--accent-rgb), 0.32) 0%, rgba(90, 70, 30, 0.25) 35%, transparent 70%), #16140f; }
.fv-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, var(--fond) 100%); }
.fv-hero h1 { margin: 0.3rem 0 0.4rem; font-size: clamp(2.6rem, 6vw, 3.8rem); line-height: 0.95; }
.fv-hero p { margin: 0 0 1.6rem; font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1.1rem; color: var(--texte-corps); }
.fv-hero p a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.fv-hero .favoris-onglets { margin-bottom: 0; }
.fv-page .top10-bandeau { margin-top: 2rem; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.fv-page .top10-bandeau::before { display: none; }
.fv-page .top10-bandeau h2 { margin: 0 0 1.4rem; font-family: "Bebas Neue", "Inter", sans-serif; font-weight: 400; font-size: 1.9rem; letter-spacing: 0.02em; text-transform: none; color: var(--texte); }

/* Ancien podium du Top 10 remplace le 17/10 : voir "TOP 10 A GRANDS CHIFFRES" en fin de fichier */

.fv-carte { min-width: 0; }
.fv-carte .carte-film-conteneur { height: 100%; }
.grille-casting.fv-pool-personnes { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 1rem 0.9rem; }
.fv-pool-personnes .acteur-nom { font-size: 0.78rem; }
.fv-renvoi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 1.8rem; padding: 1rem 1.3rem; border: 1px solid var(--bordure); border-radius: 8px; color: var(--texte-corps); font-size: 0.85rem; text-decoration: none; }
.fv-renvoi b { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.fv-renvoi:hover { border-color: var(--accent); }
@media (max-width: 560px) { .fv-hero { padding: 1.6rem 1.2rem 0; } }

/* =====================================================================
   Pages legales et pied de page (14/10)
   ===================================================================== */
.lg-page { max-width: 44rem; margin: 0 auto; color: var(--texte-corps); line-height: 1.65; }
.lg-page h1 { margin: 1.2rem 0 0.2rem; font-size: clamp(2.2rem, 5vw, 3rem); color: var(--texte); }
.lg-page h2 { margin: 2.2rem 0 0.6rem; font-size: 1.5rem; color: var(--texte); }
.lg-page p, .lg-page li { font-size: 0.95rem; }
.lg-page ul { padding-left: 1.2rem; }
.lg-page li { margin: 0.35rem 0; }
.lg-page b { color: var(--texte); font-weight: 600; }
.lg-page a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.lg-maj { margin: 0; font-size: 0.8rem !important; color: var(--texte-attenue); }
.lg-chapo { margin: 1.4rem 0 0; font-family: "Newsreader", Georgia, serif; font-size: 1.15rem !important; font-style: italic; color: var(--texte-corps); }
.lg-manque { padding: 0.05rem 0.4rem; border: 1px dashed var(--erreur); border-radius: 3px; color: var(--erreur); font-size: 0.85em; }
.lg-onglets { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--bordure); }
.lg-onglets a { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-attenue); text-decoration: none; }
.lg-onglets a:hover, .lg-onglets a.actif { color: var(--accent); }

.pied-site { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.5rem; max-width: 1100px; margin: 3rem auto 0; padding: 1.4rem 2rem 2rem; border-top: 1px solid var(--bordure); font-size: 0.75rem; color: var(--texte-attenue); }
.pied-site a { color: var(--texte-attenue); text-decoration: none; }
.pied-site a:hover { color: var(--accent); }
.pied-liens { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
@media (max-width: 560px) { .pied-site { padding: 1.2rem 1rem 5.5rem; } }

.form-connexion label.case-conditions { flex-direction: row; align-items: flex-start; gap: 0.6rem; font-size: 0.8rem; line-height: 1.5; color: var(--texte-corps); }
.form-connexion .case-conditions input { flex: none; width: 1rem; height: 1rem; margin: 0.15rem 0 0; padding: 0; accent-color: var(--accent); }
.case-conditions a { color: var(--accent); }

/* =====================================================================
   A voir (14/10) : chiffres, tirage, rangees selon le moment, liste
   ===================================================================== */
.av-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 2rem; align-items: end; padding: 2.2rem; border-radius: 10px; overflow: hidden; }
.av-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 80% 20%, #2a3a55 0%, #141a26 50%, #0c0e12 90%); }
.av-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18, 18, 20, 0.92), rgba(18, 18, 20, 0.4)); }
.av-hero h1 { margin: 0.3rem 0 0.5rem; font-size: clamp(2.6rem, 6vw, 3.8rem); line-height: 0.95; }
.av-chiffres { display: flex; flex-wrap: wrap; gap: 0.6rem 2.4rem; margin-top: 1rem; }
.av-chiffres div { display: flex; flex-direction: column; }
.av-chiffres strong { font-family: "Bebas Neue", "Inter", sans-serif; font-weight: 400; font-size: 2.2rem; line-height: 1; }
.av-chiffres span { font-size: 0.72rem; color: var(--texte-attenue); }
.av-phrase { margin: 1.1rem 0 0; font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1.05rem; color: var(--texte-corps); }
.av-phrase b { font-style: normal; color: var(--texte); }
.av-phrase a { color: var(--accent); text-decoration: none; }
.av-phrase a:hover { text-decoration: underline; text-underline-offset: 3px; }
.av-tirage { padding: 1.2rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; background: rgba(18, 18, 20, 0.75); backdrop-filter: blur(4px); }
.av-tirage h2 { margin: 0 0 0.8rem; font-size: 1.5rem; }
.av-duree { display: flex; gap: 0.4rem; margin-bottom: 0.9rem; }
.av-duree button { flex: 1; padding: 0.45rem 0.3rem; border: 1px solid var(--bordure); border-radius: 6px; background: transparent; color: var(--texte-attenue); font: inherit; font-size: 0.72rem; cursor: pointer; }
.av-duree button:hover { background: transparent; color: var(--texte); }
.av-duree button.actif { border-color: var(--accent); color: var(--accent); }
.av-tire { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 0.9rem; align-items: center; min-height: 105px; color: var(--texte); text-decoration: none; transition: opacity 0.2s ease; }
.av-tire.change { opacity: 0.2; }
.av-tire-affiche { display: block; width: 70px; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; background: var(--fond-carte-hover); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); }
.av-tire-affiche img { display: block; width: 100%; height: 100%; object-fit: cover; }
.av-tire strong { display: block; font-family: "Newsreader", Georgia, serif; font-weight: 600; font-size: 1.15rem; line-height: 1.2; }
.av-tire:hover strong { color: var(--accent); }
.av-tire small { display: block; margin-top: 0.25rem; font-size: 0.75rem; color: var(--texte-attenue); }
.av-tire[hidden], .av-tire-vide[hidden] { display: none; }
.av-tire-vide { margin: 0; min-height: 105px; font-size: 0.85rem; color: var(--texte-attenue); }
.av-tire-actions { display: flex; justify-content: space-between; margin-top: 0.9rem; }
.av-lien { padding: 0; border: 0; background: transparent; font: inherit; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); text-decoration: none; cursor: pointer; }
.av-lien:hover { background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.av-rangee .ac-tete h2 span, .av-liste .ac-tete h2 span { margin-left: 0.5rem; font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: var(--texte-chaud); }
.av-pastille { position: absolute; left: 0.4rem; bottom: 0.4rem; z-index: 2; padding: 0.2rem 0.45rem; border-radius: 3px; background: rgba(0, 0, 0, 0.72); font-size: 0.66rem; color: var(--texte); pointer-events: none; }
.av-genres { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin: 0 0 1.2rem; }
.av-genres a { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-attenue); text-decoration: none; }
.av-genres a:hover, .av-genres a.actif { color: var(--accent); }
@media (max-width: 900px) { .av-hero { grid-template-columns: 1fr; padding: 1.6rem 1.3rem; } }

/* =====================================================================
   Audit du 14/10 : confort au doigt et lisibilite sur telephone
   ===================================================================== */
/* Zones de toucher d'au moins 40 px sans changer le dessin : un pseudo-
   element transparent deborde de l'element sur ecran tactile */
@media (pointer: coarse) {
  .bouton-coeur-carte, .bouton-note-carte, .bouton-vu-carte, .bouton-watchlist-carte, .ac-fleche, .fp-tl-pt, .top10-retirer { touch-action: manipulation; }
  .bouton-coeur-carte, .bouton-note-carte, .bouton-vu-carte, .bouton-watchlist-carte, .ac-fleche { position: relative; }
  .bouton-coeur-carte::after, .bouton-note-carte::after, .bouton-vu-carte::after, .bouton-watchlist-carte::after, .ac-fleche::after { content: ""; position: absolute; inset: -5px; }
  .top10-retirer::after { content: ""; position: absolute; inset: -7px; }
  .fp-tl-pt::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
  /* Onglets et liens en petites capitales : hauteur de toucher par le padding */
  .fp-mots button, .ac-filtre-personne, .lg-onglets a, .av-genres a, .mp-tris a, .ds-tris a, .ds-rubriques a, .md-onglets a, .fp-favori button, .fp-a-voir button, .av-lien, .ac-lien { padding-top: 0.65rem; padding-bottom: 0.65rem; }
  .fp-mots, .lg-onglets, .av-genres { row-gap: 0; }
}
/* Petits textes (0,6 a 0,69 rem) remontes a 0,72 rem sur telephone ; les
   pastilles, badges et chiffres dessines gardent leur taille */
@media (max-width: 560px) {
  .ac-filtre-personne,
  .ac-hero-film,
  .ac-lien,
  .ac-lien-muet,
  .ac-surtitre,
  .av-genres a,
  .av-lien,
  .carnet .carnet-champ,
  .carnet-etiquette,
  .carnet-sous-titre,
  .carnet-surtitre,
  .cp-champ label,
  .cr-etat,
  .crl-bas .ff-avis-note,
  .crl-choisir-aide,
  .crl-ecrire,
  .crl-film,
  .crl-mots-titre,
  .crl-raison,
  .df-apercu-rub,
  .df-label,
  .ds-action-texte,
  .ds-actions a,
  .ds-actions button,
  .ds-actions summary,
  .ds-champ label,
  .ds-cote h3,
  .ds-etiquette,
  .ds-meta,
  .ds-nb,
  .ds-rubriques a,
  .ds-tris a,
  .ds-vignette small,
  .dv-idee-tete,
  .dv-meta,
  .dv-une-fil h3,
  .ed-apercu-bandeau,
  .ed-etiquette,
  .ff-carnet-rangee,
  .ff-critique-surtitre,
  .ff-ecrit-etat,
  .ff-evaluation-titre,
  .ff-synopsis-langue,
  .ff-technique dt,
  .filtre-etiquette b,
  .fp-a-voir button,
  .fp-decennie h3 small,
  .fp-etat,
  .fp-favori button,
  .fp-frise h3,
  .fp-frise-ligne small,
  .fp-mots button,
  .fp-tl-bloc h3,
  .fp-tl-bulle small,
  .fv-renvoi b,
  .jr-revu,
  .lg-onglets a,
  .lien-signaler,
  .mb-etat,
  .mb-top-titre,
  .md-actions a,
  .md-actions button,
  .md-barre button,
  .md-etat,
  .md-h-action,
  .md-onglets a,
  .md-table th,
  .md-type,
  .mp-filtres,
  .mp-progression small,
  .mp-tris a,
  .panel-lateral .filtre-section summary,
  .panel-lateral .form-filtres > label,
  .pf-visibilite-titre,
  .rs-actions a,
  .rs-etat,
  .rs-intitule,
  .rs-rubrique,
  .rs-sommaire,
  .rs-sugg-etat,
  .rs-sugg-groupe,
  .rs-sugg-tout,
  .rs-surtitre,
  .seance-rubrique-titre,
  .sg-sous-titre,
  .sg-surtitre { font-size: 0.72rem; }
}
/* Safari iOS (iPhone et iPad) zoome sur tout champ de moins de 16 px */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
}

/* Page d'erreur (14/10) */
.er-page { position: relative; isolation: isolate; max-width: 40rem; margin: 3rem auto 2rem; padding: 2rem 0; }
.er-code { position: absolute; top: -1.5rem; right: 0; z-index: -1; font-family: "Bebas Neue", "Inter", sans-serif; font-size: clamp(8rem, 26vw, 14rem); line-height: 1; color: var(--fond); -webkit-text-stroke: 2px #3a3a40; }
.er-page h1 { margin: 0 0 0.8rem; font-size: clamp(2.4rem, 6vw, 3.4rem); }
.er-texte { margin: 0 0 1.6rem; max-width: 30rem; font-family: "Newsreader", Georgia, serif; font-size: 1.15rem; font-style: italic; color: var(--texte-corps); }
.er-liens { display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; }


/* Recherche (14/10) : raccourcis sur l'affiche de la meilleure correspondance */
.rs-meilleur-poster { border-radius: 6px; overflow: visible; }
.rs-meilleur-poster .rs-meilleur-affiche { display: block; }
@media (max-width: 900px) { .rs-meilleur-poster .grappe-actions-carte { transform: scale(0.78); transform-origin: bottom right; right: 0.25rem; bottom: 0.25rem; } }

/* =====================================================================
   Apparence (14/10) : reglages dans Mon compte, banniere de page membre
   ===================================================================== */
.ap-bloc { margin-bottom: 1.8rem; }
.ap-bloc h3 { margin: 0 0 0.3rem; font-family: "Inter", sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte); }
.ap-teintes { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; margin-top: 0.8rem; }
.ap-teinte { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; width: 4.8rem; font-size: 0.72rem; line-height: 1.25; text-align: center; color: var(--texte-attenue); cursor: pointer; }
.ap-teinte input { position: absolute; opacity: 0; pointer-events: none; }
.ap-teinte i { display: block; width: 40px; height: 40px; border-radius: 50%; background: var(--c); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.ap-teinte:hover i { transform: scale(1.08); }
.ap-teinte:has(input:checked) { color: var(--texte); }
.ap-teinte:has(input:checked) i { box-shadow: 0 0 0 2px var(--fond), 0 0 0 4px var(--c); }
.ap-teinte:has(input:focus-visible) i { outline: 2px solid var(--texte); outline-offset: 4px; }
.ap-teinte small { color: var(--texte-attenue); font-size: 0.65rem; }
.ap-banniere { position: relative; display: flex; align-items: flex-end; height: 120px; margin: 0.8rem 0; padding: 0.8rem 1rem; border-radius: 8px; overflow: hidden; background: var(--fond-carte) center / cover no-repeat; }
.ap-banniere::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(18, 18, 20, 0.85)); }
.ap-banniere span { position: relative; z-index: 1; font-family: "Bebas Neue", "Inter", sans-serif; font-size: 1.6rem; color: var(--texte); }
.ap-scenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.6rem; }
.ap-scene { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; background: var(--fond-carte) center / cover no-repeat; outline: 2px solid transparent; outline-offset: 2px; cursor: pointer; overflow: hidden; }
.ap-scene input { position: absolute; opacity: 0; pointer-events: none; }
.ap-scene:has(input:checked) { outline-color: var(--accent); }
.ap-scene:has(input:focus-visible) { outline-color: var(--texte); }
.ap-scene span { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.6rem 0.4rem 0.25rem; background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); font-size: 0.66rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-sans { display: grid; place-items: center; border: 1px dashed var(--bordure); background: transparent; }
.ap-sans span { position: static; padding: 0; background: none; color: var(--texte-attenue); font-size: 0.75rem; }
.ap-scenes-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0.6rem 0 0; font-size: 0.76rem; color: var(--texte-attenue); }
.ap-arrivees { display: grid; gap: 0.5rem; margin-top: 0.8rem; }
.ap-arrivees label { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0.7rem; align-items: start; padding: 0.7rem 0.8rem; border: 1px solid var(--bordure); border-radius: 8px; cursor: pointer; }
.ap-arrivees label:has(input:checked) { border-color: var(--accent); }
.ap-arrivees input { margin: 0.15rem 0 0; accent-color: var(--accent); }
.ap-arrivees b { display: block; font-size: 0.9rem; font-weight: 600; color: var(--texte); }
.ap-arrivees small { font-size: 0.76rem; color: var(--texte-attenue); }

.mb-tete.mb-avec-banniere { position: relative; isolation: isolate; margin-bottom: 1.2rem; padding: 7rem 1.6rem 1.6rem; border-radius: 10px; overflow: hidden; }
.mb-tete.mb-avec-banniere::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--banniere) center 30% / cover no-repeat; }
.mb-tete.mb-avec-banniere::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 18, 20, 0.1) 0%, rgba(18, 18, 20, 0.65) 55%, rgba(18, 18, 20, 0.95) 100%); }
@media (max-width: 640px) { .mb-tete.mb-avec-banniere { padding: 5rem 1rem 1.2rem; } }

/* Talon de ticket (14/10) : le chevron passe a droite du tampon, centre en
   hauteur, au lieu de flotter dans le coin au-dessus de la note */
.talon-ticket[data-open-modal] { padding-right: 1.5rem; }
.talon-ticket .talon-chevron { top: 50%; right: 0.35rem; transform: translateY(-50%); }
@media (hover: hover) and (pointer: fine) {
  .talon-ticket[data-open-modal]:hover .talon-chevron { transform: translate(2px, -50%); }
}


/* Administration /admin (17/10) : reprend les classes md- de /moderation */
.ad-onglets { margin-bottom: 1.8rem; }
.md-chiffre strong small { font-size: 1.2rem; color: var(--texte-attenue); }
.ad-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ad-surtitre { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-attenue); }
.ad-indicateur { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.6rem; padding: 1.6rem 1.6rem 1.4rem; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--fond-carte); margin-bottom: 1.6rem; }
.ad-indicateur-valeur, .ad-indicateur-courbe { display: flex; flex-direction: column; gap: 0.3rem; flex: 1 1 280px; min-width: 0; }
.ad-indicateur-valeur strong { font-family: "Bebas Neue", "Inter", sans-serif; font-weight: 400; font-size: 5.4rem; line-height: 0.9; color: var(--accent); font-variant-numeric: tabular-nums; }
.ad-indicateur-valeur > span:last-child { font-size: 0.9rem; color: var(--texte-corps); }
.ad-indicateur-courbe > span { font-size: 0.72rem; color: var(--texte-attenue); }
.ad-barres { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; align-items: end; height: 84px; }
.ad-barres i { display: block; min-height: 2px; border-radius: 2px; background: #5c5c63; }
.ad-barres i.actuelle { background: var(--accent); }
.ad-boite-table { overflow-x: auto; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--fond-carte); padding: 0.4rem 1rem 0.2rem; }
.ad-table th[scope="row"] { font-size: 0.86rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--texte-corps); padding: 0.5rem 0.6rem 0.5rem 0; }
.ad-table th, .ad-table td { padding-right: 0.6rem; }
.ad-table .ad-nombre { text-align: right; font-weight: 600; color: var(--texte); }
.ad-table-membres { min-width: 760px; }
.ad-role { margin-left: 0.4rem; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-attenue); }
.ad-table td.ad-alerte { color: var(--accent); }
.ad-table td.ad-attenue { color: var(--texte-attenue); }
.ad-courbe { padding: 1.2rem 1.2rem 1rem; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--fond-carte); }
.ad-legende { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: 1rem; font-size: 0.75rem; color: var(--texte-corps); }
.ad-legende span { display: flex; align-items: center; gap: 0.4rem; }
.ad-legende i { display: block; width: 12px; height: 12px; border-radius: 2px; }
.ad-actifs { background: var(--accent); }
.ad-inscriptions { background: #5c5c63; }
.ad-semaines, .ad-semaines-dates { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.ad-semaines { align-items: end; height: 180px; border-bottom: 1px solid var(--bordure); }
.ad-semaine { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; }
.ad-semaine i { display: block; width: 42%; border-radius: 2px 2px 0 0; }
.ad-semaines-dates { margin-top: 0.4rem; }
.ad-semaines-dates span { text-align: center; font-size: 0.62rem; color: var(--texte-attenue); }
.ad-filtres { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem 2rem; margin-bottom: 1rem; font-size: 0.78rem; }
.ad-filtres > div { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; align-items: baseline; }
.ad-filtres span { color: var(--texte-attenue); }
.ad-filtres a { color: var(--texte-attenue); text-decoration: none; padding-bottom: 2px; }
.ad-filtres a:hover { color: var(--texte); }
.ad-filtres a.actif { color: var(--texte); box-shadow: inset 0 -1px 0 var(--accent); }
.ad-pied { margin-top: 1.4rem; font-size: 0.72rem; }
@media (max-width: 560px) {
  .ad-semaines, .ad-semaines-dates { gap: 3px; }
  .ad-semaines-dates span { font-size: 0.55rem; }
}

/* =====================================================================
   NAVIGATION DU SITE (17/10, maquette "Eikon Navigation")
   Desktop : liens a gauche (collection | communaute), recherche, cloche,
   avatar avec menu du compte groupe. Mobile (< 860px) : loupe, cloche,
   burger qui ouvre un panneau <dialog> PAR-DESSUS la page (le contenu ne
   bouge plus). Page en cours : aria-current="page" (souligne or).
   ===================================================================== */
.nav-site {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: rgba(28, 28, 31, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bordure);
}

.nav-barre {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  height: 64px;
  padding: 0 2rem;
}

.nav-logo {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: none;
}

.nav-logo:hover { color: var(--accent-hover); }

.nav-principale {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  min-width: 0;
}

.nav-lien,
.nav-deroulant-bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 64px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--texte);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}

.nav-lien-communaute { color: #a8a8a8; }

.nav-lien:hover,
.nav-deroulant-bouton:hover,
.nav-deroulant-bouton:focus {
  background: transparent;
  color: var(--accent-hover);
  outline: none;
}

.nav-deroulant-bouton:focus-visible,
.nav-lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.nav-lien[aria-current="page"],
.nav-deroulant-bouton.actif {
  color: var(--texte);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.nav-deroulant-bouton svg { transition: transform 0.2s ease; }
.nav-deroulant-bouton[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-separateur {
  width: 1px;
  height: 20px;
  background: #3a3a3f;
}

.nav-deroulant { position: relative; }

.nav-menu {
  position: absolute;
  top: 100%;
  left: -0.75rem;
  z-index: 20;
  min-width: 220px;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  background-color: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.nav-menu[hidden] { display: none; }

.nav-menu a,
.nav-panneau-liens a:not(.nav-grand) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 0 0.75rem;
  border-radius: 6px;
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  color: var(--texte);
  text-decoration: none;
}

.nav-menu a:hover { background-color: var(--fond-carte-hover); color: var(--accent-hover); }
.nav-menu a[aria-current="page"],
.nav-panneau-liens a[aria-current="page"] { color: var(--accent); }

.nav-nombre { font-weight: 600; color: var(--accent); }

.nav-outils {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav-recherche {
  position: relative;
  display: flex;
  align-items: center;
  color: #a8a8a8;
}

.nav-recherche svg { position: absolute; left: 0.7rem; pointer-events: none; }

.nav-recherche input {
  width: 240px;
  height: 36px;
  padding: 0 0.8rem 0 2.2rem;
  background: #18181b;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  color: var(--texte);
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
}

.nav-recherche input:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.6); }

.nav-icone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--texte);
  text-decoration: none;
  cursor: pointer;
}

.nav-icone:hover,
.nav-icone:focus { background: transparent; color: var(--accent-hover); outline: none; }
.nav-icone:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.nav-icone[aria-current="page"] { color: var(--accent); }

.nav-pastille {
  position: absolute;
  top: 7px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--accent);
  color: #121214;
  font-family: "Inter", sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
}

.nav-icone-recherche,
.nav-burger { display: none; }

.nav-avatar-bouton {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  height: 44px;
  padding: 0 0.2rem;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--texte);
  cursor: pointer;
}

.nav-avatar-bouton:hover,
.nav-avatar-bouton:focus { background: transparent; color: var(--accent-hover); outline: none; }
.nav-avatar-bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.nav-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #2c2c30;
  border: 1px solid #3a3a3f;
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.15rem;
  color: var(--accent);
  object-fit: cover;
}

.nav-avatar-bouton[aria-expanded="true"] .nav-avatar { border-color: var(--accent); }
.nav-avatar-grand { width: 42px; height: 42px; font-size: 1.4rem; border: none; }

.nav-compte .nav-menu {
  left: auto;
  right: 0;
  top: calc(100% + 10px);
  width: 280px;
  padding: 0;
  overflow: hidden;
}

.nav-menu-tete,
.nav-panneau-tete {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1rem 0.9rem;
  border-bottom: 1px solid var(--bordure);
}

.nav-menu-tete > div,
.nav-panneau-tete > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.nav-menu-tete strong,
.nav-panneau-tete strong { font-size: 0.95rem; font-weight: 600; color: var(--texte); overflow: hidden; text-overflow: ellipsis; }

.nav-menu .nav-menu-tete a,
.nav-panneau-tete a {
  display: inline;
  min-height: 0;
  padding: 0;
  font-size: 0.78rem;
  color: var(--accent);
}

.nav-menu .nav-menu-tete a:hover { background: transparent; color: var(--accent-hover); }

.nav-menu-groupe {
  display: flex;
  flex-direction: column;
  padding: 0.4rem;
}

.nav-menu-groupe + .nav-menu-groupe { border-top: 1px solid var(--bordure); }

.nav-menu-rubrique {
  padding: 0.4rem 0.75rem 0.2rem;
  font-family: "Inter", sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8e8e93;
}

.nav-deconnexion {
  width: 100%;
  min-height: 40px;
  padding: 0 0.75rem;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: #a8a8a8;
  cursor: pointer;
}

.nav-deconnexion:hover,
.nav-deconnexion:focus { background-color: var(--fond-carte-hover); color: var(--texte); outline: none; }

/* Visiteur : liens texte, S'inscrire souligne en or (pas de bouton plein) */
.nav-texte {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.4rem;
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte);
  text-decoration: none;
  white-space: nowrap;
}

.nav-texte:hover { color: var(--accent-hover); }
.nav-inscription { color: var(--accent); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* Panneau mobile */
.nav-panneau {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  width: min(340px, 88vw);
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  padding: 0;
  display: none;
  flex-direction: column;
  background-color: var(--fond-carte);
  color: var(--texte);
  border: none;
  border-left: 1px solid var(--bordure);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.5);
  animation: glisser-depuis-droite 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.nav-panneau[open] { display: flex; }
.nav-panneau::backdrop { background-color: rgba(0, 0, 0, 0.55); }
html:has(.nav-panneau[open]) { overflow: hidden; }

.nav-panneau-tete { padding: 0.9rem 0.5rem 0.9rem 1.2rem; }
.nav-panneau-fermer { color: var(--texte-attenue); flex-shrink: 0; }
.nav-panneau-visiteur { flex-direction: row !important; gap: 1rem; }

.nav-panneau-liens {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0.2rem 1.2rem 1rem;
}

.nav-panneau-liens .nav-menu-rubrique { padding: 0.9rem 0 0.2rem; }
.nav-panneau-liens a:not(.nav-grand) { min-height: 44px; padding: 0; font-size: 0.95rem; }

.nav-grand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 46px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.55rem;
  letter-spacing: 0.04em;
  color: var(--texte);
  text-decoration: none;
}

.nav-grand[aria-current="page"]::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.nav-panneau-pied {
  padding: 0.4rem 1.2rem max(1rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--bordure);
}

.nav-panneau-pied .nav-deconnexion { min-height: 44px; padding: 0; }

/* Ecrans moyens : la recherche se replie en loupe */
@media (max-width: 1120px) {
  .nav-barre { gap: 1.6rem; padding: 0 1.4rem; }
  .nav-principale { gap: 1.3rem; }
  .nav-recherche { display: none; }
  .nav-icone-recherche { display: flex; }
}

/* Mobile : barre reduite, tout le reste dans le panneau */
@media (max-width: 860px) {
  .nav-barre { height: 56px; gap: 0.5rem; padding: 0 0.5rem 0 1rem; justify-content: space-between; }
  .nav-logo { font-size: 1.7rem; }
  .nav-principale,
  .nav-compte,
  .nav-outils > .nav-texte { display: none; }
  .nav-outils { gap: 0; }
  .nav-burger { display: flex; }
}

/* =====================================================================
   TOP 10 A GRANDS CHIFFRES (17/10, piste 2 de la maquette "Eikon Top 10")
   Vitrine : chaque affiche precedee de son rang en grand chiffre en contour
   (or pour 1 a 3), dix places de meme taille, 5 par rangee ; defilement
   horizontal sur mobile. Page Favoris et page membre.
   Mode edition (.top10-edition sur le bandeau) : liste avec poignee, rang,
   vignette, titre, fleches, choix du rang et Retirer.
   ===================================================================== */
.top10-chiffres,
.mb-top-liste.top10-chiffres {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.8rem 1.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.top10-chiffres > li { min-width: 0; }

.top10-chiffres .top10-image-conteneur {
  display: flex;
  align-items: flex-end;
  overflow: visible;
  border-radius: 0;
}

.top10-chiffres .top10-position {
  position: relative;
  top: auto;
  left: auto;
  z-index: 0;
  flex-shrink: 0;
  width: 3.4rem;
  height: auto;
  margin-right: -0.9rem;
  padding: 0;
  display: block;
  text-align: right;
  background: none;
  clip-path: none;
  filter: none;
  font-family: "Bebas Neue", "Inter", sans-serif;
  font-weight: 400;
  font-size: 8rem;
  line-height: 0.78;
  letter-spacing: -0.04em;
  color: var(--fond);
  -webkit-text-stroke: 2px #55555c;
}

.top10-chiffres .top10-position::after { display: none; }
.top10-chiffres > li:nth-child(-n+3) .top10-position { -webkit-text-stroke-color: var(--accent); }

/* survol : les numeros au-dela du podium prennent le contour dore, sans remplissage */
.top10-chiffres .top10-position { transition: -webkit-text-stroke-color 0.2s ease; }
.top10-chiffres > li:hover .top10-position,
.top10-chiffres > li:focus-within .top10-position { -webkit-text-stroke-color: var(--accent); }
/* profil public : la regle ".mb-top-liste a:hover span" remplissait le chiffre de dore */
.mb-top-liste.top10-chiffres a:hover .top10-position { color: var(--fond); }

.top10-chiffres .top10-image-conteneur img,
.top10-chiffres .top10-sans-image,
.top10-chiffres .mb-top-vide {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  width: auto;
  display: block;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 6px;
  background-color: var(--fond-carte);
  box-shadow: -6px 0 16px rgba(0, 0, 0, 0.5);
}

.top10-chiffres .top10-nom,
.mb-top-liste.top10-chiffres a > span:last-child {
  display: block;
  margin-top: 0.55rem;
  padding-left: 2.5rem;
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top10-chiffres .top10-nom small {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--texte-attenue);
}

.mb-top-liste.top10-chiffres a { gap: 0; }

/* Hors mode edition : vitrine seule (ni poignee ni commandes) */
.top10-controles { display: none; }
.top10-bandeau:not(.top10-edition) .poignee-top10 { display: none !important; }
.top10-aide { display: none; }

.top10-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.fv-page .top10-entete h2 { margin-bottom: 0.6rem; }

.top10-basculer,
.top10-retirer-texte {
  min-height: 44px;
  padding: 0 0.2rem;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.top10-basculer {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.top10-basculer:hover,
.top10-basculer:focus { background: transparent; color: var(--accent-hover); }
.top10-basculer:focus-visible,
.top10-retirer-texte:focus-visible,
.top10-fleche:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.top10-annonce {
  min-height: 1.3rem;
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  color: var(--accent);
}

/* --- Mode edition --- */
.top10-edition .top10-aide {
  display: block;
  margin: 0 0 0.4rem;
  font-size: 0.84rem;
  color: var(--texte-corps);
}

.top10-edition .top10-chiffres {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: visible;
  border-top: 1px solid var(--bordure);
}

.top10-edition .top10-chiffres > li {
  display: grid;
  grid-template-columns: 28px 44px 40px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.9rem;
  flex: none;
  width: auto;
  max-width: none;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--bordure);
  transition: background-color 0.4s ease;
}

.top10-edition .top10-chiffres > li.top10-deplace { background-color: rgba(var(--accent-rgb), 0.08); }
.top10-edition .top10-image-conteneur { display: contents; }

.top10-edition .poignee-top10 {
  order: 1;
  position: static;
  width: 28px;
  height: 44px;
  padding: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: none;
  clip-path: none;
  filter: none;
  opacity: 1;
  color: #6a6a70;
}

.top10-edition .poignee-top10 svg { width: 18px; height: 18px; }

.top10-edition .top10-position {
  order: 2;
  width: auto;
  margin: 0;
  text-align: center;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0;
  color: #8e8e93;
  -webkit-text-stroke: 0;
}

.top10-edition .top10-chiffres > li:nth-child(-n+3) .top10-position { color: var(--accent); }

.top10-edition .top10-image-conteneur img,
.top10-edition .top10-sans-image {
  order: 3;
  flex: none;
  width: 40px;
  height: 60px;
  border-radius: 4px;
  box-shadow: none;
}

.top10-edition .top10-nom {
  order: 4;
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
}

.top10-edition .top10-controles {
  order: 5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.top10-fleche {
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  color: var(--texte);
  cursor: pointer;
}

.top10-fleche:hover,
.top10-fleche:focus { background: transparent; border-color: rgba(var(--accent-rgb), 0.6); color: var(--accent-hover); }
.top10-fleche:disabled { color: #3a3a3f; border-color: var(--bordure); cursor: default; }

.top10-choix-rang {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  color: var(--texte-attenue);
}

.top10-choix-rang select {
  height: 44px;
  padding: 0 0.4rem;
  background: #18181b;
  color: var(--texte);
  border: 1px solid var(--bordure);
  border-radius: 6px;
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
}

.top10-retirer-texte { color: var(--texte-attenue); }
.top10-retirer-texte:hover,
.top10-retirer-texte:focus { background: transparent; color: var(--texte); }

/* Le cascade d'entree ne doit pas masquer les lignes en mode edition */
.top10-edition .top10-item:not(.top10-settled) { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .top10-chiffres .top10-position { font-size: 6.6rem; width: 2.9rem; }
}

/* Mobile : vitrine en defilement horizontal, edition sur deux lignes */
@media (max-width: 768px) {
  .top10-chiffres,
  .mb-top-liste.top10-chiffres {
    display: flex;
    gap: 0.9rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 0.6rem;
  }

  .top10-chiffres > li {
    flex: 0 0 150px;
    width: 150px;
    max-width: 150px;
    scroll-snap-align: start;
  }

  .top10-chiffres .top10-position { width: 3rem; margin-right: -0.85rem; font-size: 6.4rem; }

  .top10-edition .top10-chiffres > li {
    grid-template-columns: 24px 34px 34px minmax(0, 1fr);
    row-gap: 0.5rem;
    column-gap: 0.6rem;
    padding: 0.7rem 0;
  }

  .top10-edition .top10-image-conteneur img,
  .top10-edition .top10-sans-image { width: 34px; height: 51px; }

  .top10-edition .top10-position { font-size: 1.7rem; }

  .top10-edition .top10-controles {
    grid-column: 1 / -1;
    padding-left: calc(24px + 0.6rem);
  }

  .top10-edition .top10-retirer-texte { margin-left: auto; }
  .top10-choix-rang select { font-size: 16px; }
}

/* Correctifs mobiles du 17/10 (capture Favoris a ~360 px) */
@media (max-width: 768px) {
  /* onglets Films / Realisateurs / Compositeurs / Acteurs : ils debordaient et
     "Acteurs" etait coupe par le cadre (overflow: hidden) du hero ; ils defilent */
  .generique-onglets {
    overflow-x: auto;
    scrollbar-width: none;
    gap: 1.3rem;
  }
  .generique-onglets::-webkit-scrollbar { display: none; }
  .generique-onglets .carnet-onglet { flex-shrink: 0; white-space: nowrap; }

  .fv-hero { padding: 1.6rem 1.2rem 0; }
}

@media (max-width: 560px) {
  /* titre et bouton du Top 10 l'un sous l'autre au lieu de se serrer */
  .top10-entete { flex-direction: column; align-items: flex-start; gap: 0; }
  .fv-page .top10-entete h2 { margin-bottom: 0; }
  .top10-basculer { padding: 0; }
}

/* =====================================================================
   BIENVENUE (17/10, maquette "Eikon Bienvenue") : parcours des nouveaux
   inscrits (bv-) et bloc "Premiers pas" de l'accueil (pp-)
   ===================================================================== */
.bv-entete {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 64px;
  padding: 0 2rem;
  background-color: rgba(28, 28, 31, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bordure);
}

.bv-etape {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte);
}

.bv-etape-traits { display: flex; gap: 4px; }
.bv-etape-traits i { display: block; width: 28px; height: 3px; border-radius: 2px; background: #3a3a3f; }
.bv-etape-traits i.fait { background: var(--accent); }

.bv-passer,
.bv-retour {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-attenue);
  text-decoration: none;
  cursor: pointer;
}

.bv-passer:hover, .bv-passer:focus,
.bv-retour:hover, .bv-retour:focus { background: transparent; color: var(--texte); }

.bv-suite {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 6px;
  cursor: pointer;
}

.bv-suite:hover, .bv-suite:focus { background: transparent; color: var(--accent-hover); }

.bv-page { max-width: 1000px; margin: 0 auto; padding-bottom: 5.5rem; }
.bv-titre { margin: 0.35rem 0 0.5rem; font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 0.95; color: var(--texte); }
.bv-intro { margin: 0 0 1.4rem; font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1.12rem; color: var(--texte-corps); }

.bv-outils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.6rem;
  margin-bottom: 1.2rem;
}

.bv-recherche { position: relative; flex: 1 1 280px; max-width: 420px; color: var(--texte-attenue); }
.bv-recherche svg { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); pointer-events: none; }

.bv-recherche input {
  width: 100%;
  height: 44px;
  padding: 0 0.9rem 0 2.4rem;
  background: #18181b;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  color: var(--texte);
  font-size: 0.9rem;
}

.bv-compteur { display: flex; align-items: center; gap: 0.8rem; font-size: 0.85rem; color: var(--texte-corps); }
.bv-compteur b { font-family: "Bebas Neue", "Inter", sans-serif; font-size: 1.7rem; font-weight: 400; color: var(--accent); }
.bv-barre { display: block; width: 140px; height: 4px; border-radius: 2px; background: var(--bordure); overflow: hidden; }
.bv-barre i { display: block; height: 100%; background: var(--accent); transition: width 0.3s ease; }

.bv-resultats { font-size: 0.88rem; color: var(--texte-attenue); }
.bv-resultats a, .bv-lien { color: var(--accent); }

.bv-grille {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1rem 0.75rem;
}

.bv-grille form { margin: 0; }

.bv-film {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  text-align: left;
  color: var(--texte);
  cursor: pointer;
}

.bv-film:hover, .bv-film:focus { background: transparent; }
.bv-film:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bv-film-affiche { position: relative; display: block; border-radius: 6px; }

.bv-film-affiche img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 6px;
  background: var(--fond-carte);
  transition: box-shadow 0.15s ease, opacity 0.15s ease;
}

.bv-film[aria-pressed="true"] .bv-film-affiche img { box-shadow: 0 0 0 2px var(--accent); }

.bv-coche {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: #121214;
}

.bv-film[aria-pressed="true"] .bv-coche { display: flex; }
.bv-film-titre { font-size: 0.74rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv-film-titre small { font-weight: 400; color: var(--texte-attenue); }

.bv-pied {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 2rem max(0.8rem, env(safe-area-inset-bottom));
  background: rgba(22, 22, 24, 0.95);
  border-top: 1px solid var(--bordure);
  font-size: 0.84rem;
  color: var(--texte-attenue);
}

.bv-deux { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 4rem; align-items: start; }
.bv-champ { display: flex; flex-direction: column; gap: 0.4rem; margin: 0 0 1.4rem; padding: 0; border: none; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texte-attenue); }
.bv-champ legend { margin-bottom: 0.5rem; padding: 0; }

.bv-champ input[type="date"],
.bv-champ input[type="text"] {
  height: 44px;
  padding: 0 0.8rem;
  background: #18181b;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  color: var(--texte);
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  color-scheme: dark;
}

.bv-ligne { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 1.2rem; }
.bv-choix-films { display: flex; flex-direction: column; border-top: 1px solid var(--bordure); }

.bv-choix-films label,
.bv-lieux label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 52px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texte);
  cursor: pointer;
}

.bv-choix-films label { border-bottom: 1px solid var(--bordure); }
.bv-choix-films img, .bv-mini-vide { width: 26px; height: 39px; border-radius: 3px; object-fit: cover; background: var(--fond-carte); }
.bv-choix-films input, .bv-lieux input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.bv-lieux { display: flex; flex-wrap: wrap; gap: 0 1.6rem; }
.bv-lieux label { min-height: 44px; font-weight: 400; }
.bv-lien { margin-top: 0.4rem; font-size: 0.8rem; letter-spacing: 0; text-transform: none; font-weight: 400; }

.bv-apercu { position: sticky; top: 5rem; }
.bv-legende { display: block; margin-bottom: 0.7rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texte-attenue); }

.bv-ticket { border-radius: 8px; overflow: hidden; background: var(--fond-carte); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); }
.bv-ticket-affiche { aspect-ratio: 2 / 3; background: #26262a; }
.bv-ticket-affiche img { display: block; width: 100%; height: 100%; object-fit: cover; }

.bv-ticket-talon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.9rem 1rem 1rem;
  border-top: 2px dashed #3a3a3e;
  background: rgba(255, 255, 255, 0.025);
}

.bv-ticket-talon::before,
.bv-ticket-talon::after { content: ""; position: absolute; top: -8px; width: 14px; height: 14px; border-radius: 50%; background: var(--fond); }
.bv-ticket-talon::before { left: -7px; }
.bv-ticket-talon::after { right: -7px; }
.bv-ticket-talon > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.bv-ticket-titre { font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv-ticket-type { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-attenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv-ticket-date { font-family: "Bebas Neue", "Inter", sans-serif; font-size: 1.6rem; line-height: 1; }

.bv-tampon {
  flex-shrink: 0;
  padding: 0.2rem 0.5rem;
  border: 2px solid var(--accent);
  border-radius: 4px;
  transform: rotate(-8deg);
  font-family: "Bebas Neue", "Inter", sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.bv-tampon[hidden] { display: none; }

.bv-fin { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 4.5rem; align-items: center; padding-top: 2rem; }
.bv-fin-ticket { transform: rotate(-2deg); }
.bv-suggestions { list-style: none; margin: 0 0 2rem; padding: 0; border-top: 1px solid var(--bordure); }
.bv-suggestions li { border-bottom: 1px solid var(--bordure); }
.bv-suggestions a { display: flex; align-items: center; min-height: 50px; color: var(--texte); text-decoration: none; font-size: 0.95rem; }
.bv-suggestions a:hover { color: var(--accent-hover); }
.bv-sorties { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }

/* Bloc "Premiers pas" de l'accueil */
.pp { margin: 2rem 0 2.4rem; padding: 1.4rem 1.6rem 1.2rem; border: 1px solid var(--bordure); border-radius: 10px; background: #1a1a1d; }
.pp-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.pp-titre-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; }
.pp-titre-ligne h2 { margin: 0; font-family: "Bebas Neue", "Inter", sans-serif; font-weight: 400; font-size: 1.9rem; color: var(--texte); }
.pp-compte { font-size: 0.8rem; color: var(--texte-attenue); }
.pp-compte b { color: var(--accent); }
.pp .bv-barre { width: 120px; }

.pp-masquer {
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-attenue);
  cursor: pointer;
}

.pp-masquer:hover, .pp-masquer:focus { background: transparent; color: var(--texte); }
.pp-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.pp-etapes li { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.9rem 1rem 1rem; border-radius: 8px; background: #222226; }
.pp-etapes li.fait { background: transparent; }
.pp-etapes strong { font-size: 0.95rem; color: var(--texte); }
.pp-etapes li.fait strong { color: var(--texte-attenue); }
.pp-etat { display: flex; align-items: center; gap: 0.4rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-attenue); }
.pp-etapes li.fait .pp-etat { color: var(--accent); }
.pp-detail { font-size: 0.8rem; color: var(--texte-attenue); }
.pp-action { margin-top: auto; display: inline-flex; align-items: center; min-height: 32px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); text-decoration: underline; text-underline-offset: 5px; }

@media (max-width: 860px) {
  .bv-entete { height: 56px; padding: 0 1rem; }
  .bv-entete .nav-logo { display: none; }
  .bv-deux, .bv-fin { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .bv-apercu { position: static; order: -1; }
  .bv-apercu .bv-ticket { display: flex; }
  .bv-apercu .bv-ticket-affiche { flex-shrink: 0; width: 72px; aspect-ratio: auto; }
  .bv-apercu .bv-ticket-talon { flex: 1; min-width: 0; border-top: 0; border-left: 2px dashed #3a3a3e; }
  .bv-apercu .bv-ticket-talon::before, .bv-apercu .bv-ticket-talon::after { display: none; }
  .bv-fin-ticket { max-width: 240px; }
  .bv-pied { padding: 0.6rem 1rem max(1rem, env(safe-area-inset-bottom)); }
  .pp-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .bv-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem 0.6rem; }
  .bv-ligne { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bv-barre { width: 70px; }
  .pp { padding: 1.1rem 1rem 1rem; }
  .pp-etapes { grid-template-columns: minmax(0, 1fr); }
}

/* Carte "ticket" de Mes films vus (17/10, maquette "Eikon Cartes ticket", version C) :
   titre sur une ligne + une ligne contextuelle ; toutes les cartes ont la meme hauteur */
.cc-ticket { flex: 0 0 auto; gap: 0.2rem; padding: 0.7rem 0.75rem 0.65rem; }
.cc-ticket h3 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-ligne { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Talons alignes dans la grille Mes films vus (17/10) : meme hauteur pour tous
   (un talon avec lieu, heure et indicateurs etait plus haut, sa ligne pointillee
   remontait) ; le type de seance reste sur une ligne avec son picto. */
.lien-carte-info:has(.cc-ticket) + .talon-ticket { min-height: 7rem; }
.lien-carte-info:has(.cc-ticket) + .talon-ticket .talon-type { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
.lien-carte-info:has(.cc-ticket) + .talon-ticket .talon-lieu { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bandeaux Saga / Si tu as aime de la fiche film (17/10) : affiche avec actions
   rapides Vu et A voir (meme grappe que les cartes), progression de la saga */
.ff-reco-actions .poster-conteneur { border-radius: var(--rayon); margin-bottom: 0.35rem; }
.ff-reco-actions .poster-conteneur img,
.ff-reco-actions .poster-conteneur .pas-affiche { margin-bottom: 0; border-radius: var(--rayon); }
.ff-reco-actions .grappe-actions-carte { top: 0.35rem; right: 0.35rem; gap: 0.3rem; }
.ff-reco-actions .ff-reco-lien { display: flex; flex-direction: column; gap: 0.15rem; color: var(--texte); text-decoration: none; }
.ff-reco-actions .ff-reco-lien:hover .ff-reco-titre { color: var(--accent); }
.ff-reco-actions.ff-reco-courant .poster-conteneur { box-shadow: 0 0 0 2px var(--accent); }
.ff-saga-progression { font-weight: 400; color: var(--texte-attenue); letter-spacing: 0.08em; }

/* Presentation du profil (17/10) */
.mb-presentation {
  max-width: 36rem;
  margin: 0.5rem 0 0.2rem;
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--texte-corps);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.mb-presentation-vide { font-family: "Inter", sans-serif; font-style: normal; font-size: 0.8rem; }
.mb-presentation-vide a { color: var(--accent); }
.mb-presentation-masquee { margin: 0.2rem 0 0.4rem; font-size: 0.8rem; color: var(--erreur); }
.mb-presentation-masquee a { color: inherit; text-decoration: underline; }
.mb-signaler { margin-bottom: 0.3rem; }
.cp-champ textarea {
  width: 100%;
  padding: 0.4rem 0 0.5rem;
  border: 0;
  border-bottom: 1px solid var(--bordure);
  border-radius: 0;
  background: transparent;
  color: var(--texte);
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
  resize: vertical;
  outline: none;
}
.cp-champ textarea:focus { border-bottom-color: var(--accent); }
.cp-alerte { color: var(--erreur); font-weight: 600; }

/* ============================================================
   ADMINISTRATION : JOURNAL ET SANTE (17/10)
   ============================================================ */
.ad-sante { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.8rem; margin-bottom: 1.8rem; }
.ad-sante-case { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; padding: 0.9rem 1rem; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--fond-carte); }
.ad-sante-case strong { font-size: 1.05rem; font-weight: 600; color: var(--texte); }
.ad-sante-case > span:not(.ad-surtitre) { font-size: 0.75rem; color: var(--texte-attenue); }
.ad-sante-case.alerte { border-color: rgba(var(--accent-rgb), 0.55); }
.ad-sante-case.alerte strong { color: var(--accent); }
.ad-sante-detail { overflow-wrap: anywhere; }

.ad-jour { margin: 1.6rem 0 0.5rem; font-family: "Inter", sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-attenue); }
.ad-journal { list-style: none; margin: 0; padding: 0; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--fond-carte); }
.ad-ev { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: 0.2rem 0.9rem; align-items: start; padding: 0.75rem 1rem 0.75rem 0.85rem; border-left: 3px solid transparent; }
.ad-ev + .ad-ev { border-top: 1px solid var(--bordure); }
.ad-ev time { padding-top: 0.1rem; font-size: 0.78rem; color: var(--texte-attenue); font-variant-numeric: tabular-nums; }
.ad-ev-corps { min-width: 0; }
.ad-ev-type { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-attenue); }
.ad-ev-corps p { margin: 0.15rem 0 0; font-size: 0.88rem; color: var(--texte-corps); }
.ad-ev-fois { margin-left: 0.3rem; font-weight: 600; color: var(--texte); white-space: nowrap; }
.ad-ev-depuis { display: block; margin-top: 0.15rem; font-size: 0.72rem; color: var(--texte-attenue); }
.ad-ev-alerte .ad-ev-type { color: var(--accent); }
.ad-ev.non-lu { border-left-color: var(--accent); background: rgba(var(--accent-rgb), 0.04); }
.ad-ev.non-lu .ad-ev-corps p { color: var(--texte); }
.ad-ev-lien { padding-top: 0.1rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.ad-ev-lien:hover, .ad-ev-lien:focus-visible { color: var(--accent-hover); }
.ad-ev-detail { margin-top: 0.4rem; }
.ad-ev-detail summary { cursor: pointer; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-attenue); }
.ad-ev-detail pre { margin: 0.4rem 0 0; padding: 0.7rem 0.8rem; max-height: 18rem; overflow: auto; border-radius: 4px; background: rgba(0, 0, 0, 0.3); font-size: 0.72rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--texte-corps); }
.ad-onglets .nav-nombre { margin-left: 0.3rem; }

@media (max-width: 560px) {
  .ad-ev { grid-template-columns: minmax(0, 1fr) auto; }
  .ad-ev time { grid-column: 1 / -1; }
}

/* ============================================================
   PAGES D'ENTREE : INSCRIPTION, CONNEXION, ATTENTE, CONFIRMATION (17/10)
   Maquette "Eikon Inscription". Champs soulignes comme Mon compte,
   actions en capitales dorees soulignees.
   ============================================================ */
.en-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 4.5rem; align-items: center; min-height: calc(100vh - 220px); padding: 1.5rem 0 2rem; }
.en-page-etroite { grid-template-columns: 260px minmax(0, 600px); justify-content: center; gap: 4.5rem; }
.en-surtitre { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.en-titre { margin: 0.6rem 0 0; font-size: clamp(2.8rem, 6vw, 4.6rem); line-height: 0.92; letter-spacing: 0.01em; color: var(--texte); }
.en-chapo { margin: 1.1rem 0 0; max-width: 31rem; font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--texte-corps); }
.en-promesses { margin: 1.4rem 0 0; font-size: 0.78rem; color: var(--texte-attenue); }

/* eventail de tickets (decoratif) */
.en-eventail { position: relative; height: 320px; margin-top: 2rem; }
.en-ticket { position: absolute; top: 36px; width: 150px; border-radius: 7px; overflow: hidden; background: var(--fond-carte); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55); transform: rotate(var(--angle)); }
.en-ticket:nth-child(1) { left: 0; }
.en-ticket:nth-child(2) { left: 150px; top: 6px; }
.en-ticket:nth-child(3) { left: 300px; top: 40px; }
.en-ticket-affiche { position: relative; height: 225px; background: var(--affiche); }
.en-ticket-affiche img { display: block; width: 100%; height: 100%; object-fit: cover; }
.en-ticket-affiche span { position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.6rem; font-family: "Bebas Neue", "Inter", sans-serif; font-size: 1.3rem; line-height: 0.95; color: rgba(234, 234, 234, 0.55); }
.en-ticket-talon { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 0.7rem 0.7rem; border-top: 2px dashed #3a3a3e; }
.en-ticket-talon > span { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.en-ticket-talon small { font-size: 0.54rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #a8a8a8; }
.en-ticket-talon strong { font-family: "Bebas Neue", "Inter", sans-serif; font-weight: 400; font-size: 1.1rem; color: var(--texte); }
.en-ticket-talon > i { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; font-family: "Bebas Neue", "Inter", sans-serif; font-style: normal; font-size: 0.95rem; color: var(--accent); }

/* carte de membre (attente, confirmation) */
.en-carte { justify-self: end; width: 230px; border-radius: 9px; overflow: hidden; background: var(--fond-carte); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); transform: rotate(-4deg); }
.en-carte-recto { height: 250px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.3rem; padding: 1.1rem; background: linear-gradient(160deg, #2b2b31, #19191c); }
.en-carte-recto strong { font-family: "Bebas Neue", "Inter", sans-serif; font-weight: 400; font-size: 2.4rem; line-height: 0.9; color: var(--texte); }
.en-carte-recto span { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-attenue); }
.en-carte .en-ticket-talon { padding: 0.9rem 1.1rem 1rem; }
.en-carte .en-ticket-talon strong { font-size: 1.3rem; }
.en-tampon { padding: 0.15rem 0.5rem; border: 2px dashed #6a6a70; border-radius: 3px; font-family: "Bebas Neue", "Inter", sans-serif; font-style: normal; font-size: 1rem; letter-spacing: 0.06em; color: #8a8a90; transform: rotate(-8deg); white-space: nowrap; }
.en-tampon.actif { border-style: solid; border-color: var(--accent); color: var(--accent); }

/* formulaire */
.en-boite { padding: 2.2rem 2.4rem 2rem; border: 1px solid var(--bordure); border-radius: 10px; background: var(--fond-carte); }
.en-boite h2 { margin: 0; font-size: 2.1rem; letter-spacing: 0.01em; color: var(--texte); }
.en-form { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.3rem; }
.en-champ { display: flex; flex-direction: column; gap: 0.3rem; }
.en-champ label, .en-champ-entete > label { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-attenue); }
.en-champ input, .en-mdp { box-sizing: border-box; width: 100%; }
.en-champ input { flex: none; height: 42px; padding: 0; background: transparent; border: none; border-bottom: 1px solid #3a3a3e; border-radius: 0; color: var(--texte); font-family: "Inter", sans-serif; font-size: 1rem; }
.en-champ input::placeholder { color: #6a6a70; }
.en-champ input:focus { outline: none; border-bottom-color: var(--accent); }
.en-champ input:focus-visible { box-shadow: 0 1px 0 0 var(--accent); }
.en-mdp { display: flex; align-items: center; border-bottom: 1px solid #3a3a3e; }
.en-mdp:focus-within { border-bottom-color: var(--accent); }
.en-mdp input { flex: 1; min-width: 0; border-bottom: none; }
.en-mdp input:focus-visible { box-shadow: none; }
.en-afficher, .en-afficher:hover, .en-afficher:focus { min-height: 42px; padding: 0 0 0 0.8rem; background-color: transparent; border: none; font-family: "Inter", sans-serif; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-attenue); cursor: pointer; outline: none; }
.en-afficher:hover { color: var(--texte); }
.en-afficher:focus-visible { color: var(--accent); }
.en-aide { margin: 0; font-size: 0.74rem; color: #8a8a90; }
.en-erreur { margin: 0.1rem 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--accent); }
.en-erreur a { color: var(--accent); }
.en-invalide input, .en-invalide .en-mdp { border-bottom-color: var(--accent); }
.en-force { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 0.35rem; }
.en-force i { display: block; height: 3px; border-radius: 2px; background: #2e2e33; }
.en-force[data-niveau="1"] i:nth-child(1) { background: #8a6d2a; }
.en-force[data-niveau="2"] i:nth-child(-n+2), .en-force[data-niveau="3"] i { background: var(--accent); }
.en-champ-entete { position: relative; }
.en-champ-entete > .en-lien-discret { position: absolute; top: -0.15rem; right: 0; z-index: 1; }
.en-case { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.8rem; line-height: 1.45; color: var(--texte-corps); cursor: pointer; }
.en-case input { flex: none; width: 18px; height: 18px; margin: 0.1rem 0 0; accent-color: var(--accent); }
.en-case a { color: var(--accent); }
.en-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.6rem; margin-top: 0.4rem; }
.en-action, .en-action:hover, .en-action:focus { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0; background-color: transparent; border: none; font-family: "Inter", sans-serif; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); text-decoration: underline; text-underline-offset: 7px; cursor: pointer; outline: none; }
.en-action:hover { color: var(--accent-hover); }
.en-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.en-action-petite, .en-action-petite:hover, .en-action-petite:focus { min-height: 36px; padding: 0; background-color: transparent; border: none; font-family: "Inter", sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); text-decoration: underline; text-underline-offset: 5px; cursor: pointer; outline: none; }
.en-action-petite:hover { color: var(--accent-hover); }
.en-action-petite:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.en-lien-discret { font-size: 0.78rem; color: var(--texte-attenue); text-underline-offset: 4px; }
.en-lien-discret:hover { color: var(--texte); }
.en-alerte, .en-info { margin: 1rem 0 0; padding: 0.75rem 0.9rem; border: 1px solid rgba(var(--accent-rgb), 0.45); border-radius: 6px; font-size: 0.84rem; line-height: 1.45; color: var(--texte); }
.en-info { border-color: var(--bordure); color: var(--texte-corps); }
.en-alerte form { margin-top: 0.2rem; }

/* attente et confirmation */
.en-texte { display: flex; flex-direction: column; min-width: 0; }
.en-adresse { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.2rem; margin-top: 0.35rem; }
.en-adresse strong { font-size: 1.35rem; font-weight: 600; color: var(--texte); overflow-wrap: anywhere; }
.en-corriger { display: flex; flex-direction: column; gap: 0.8rem; max-width: 26rem; margin-top: 1.2rem; }
.en-etapes { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--bordure); }
.en-etapes li { display: flex; gap: 1rem; align-items: baseline; padding: 0.85rem 0; border-bottom: 1px solid var(--bordure); font-size: 0.92rem; color: var(--texte-corps); }
.en-etapes span { font-family: "Bebas Neue", "Inter", sans-serif; font-size: 1.4rem; color: var(--accent); }
.en-renvoi { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 1.2rem; margin-top: 1.4rem; font-size: 0.86rem; color: var(--texte-attenue); }
.en-renvoi p { flex-basis: 100%; margin: 0; }
.en-renvoi p[role="status"] { color: var(--texte); }
.en-texte .en-actions { justify-content: flex-start; gap: 0.6rem 2rem; margin-top: 2rem; }

@media (max-width: 900px) {
  .en-page, .en-page-etroite { grid-template-columns: minmax(0, 1fr); gap: 2rem; min-height: 0; padding-top: 0.5rem; }
  .en-eventail, .en-promesses { display: none; }
  .en-carte { display: none; }
  .en-boite { padding: 1.6rem 1.3rem 1.4rem; }
  .en-champ input { font-size: 16px; }
}
@media (max-width: 560px) {
  .en-boite { padding: 0; border: none; background: transparent; }
  .en-chapo { font-size: 1.05rem; }
}

/* ============================================================
   BETA ET RETOURS DES TESTEURS (17/10, maquette "Eikon Retours beta")
   ============================================================ */
.nav-marque { display: inline-flex; align-items: baseline; gap: 0.5rem; flex-shrink: 0; }
.nav-beta { font-family: "Inter", sans-serif; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texte-corps); }
.nav-avis, .nav-avis:hover, .nav-avis:focus { min-height: 44px; padding: 0 0.5rem; background-color: transparent; border: none; border-radius: 0; font-family: "Inter", sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); text-decoration: underline; text-underline-offset: 6px; white-space: nowrap; cursor: pointer; outline: none; }
.nav-avis:hover { color: var(--accent-hover); }
.nav-avis:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 1120px) { .nav-avis { display: none; } }
.nav-menu-action, .nav-menu-action:hover, .nav-menu-action:focus { display: flex; align-items: center; width: 100%; min-height: 40px; padding: 0 0.75rem; background-color: transparent; border: none; border-radius: 6px; font-family: "Inter", sans-serif; font-size: 0.9rem; font-weight: 400; text-align: left; color: var(--texte); cursor: pointer; outline: none; }
.nav-menu-action:hover, .nav-menu-action:focus-visible { background-color: var(--fond-carte-hover); color: var(--accent-hover); }
.nav-panneau-liens .nav-menu-action { min-height: 44px; padding: 0; font-size: 0.95rem; }
.nav-panneau-liens .nav-menu-action:hover { background-color: transparent; }

/* fenetre "Donner un avis" */
.dialog-retour { position: fixed; inset: 0; margin: auto; width: min(540px, calc(100vw - 2rem)); height: fit-content; max-height: 92vh; overflow-y: auto; box-sizing: border-box; padding: 1.7rem 1.9rem 1.5rem; border: 1px solid var(--bordure); border-radius: 10px; background: var(--fond-carte); color: var(--texte); }
.dialog-retour::backdrop { background: rgba(8, 8, 10, 0.72); }
.dialog-retour.depot-actif { border-color: var(--accent); }
.dr-tete { display: flex; justify-content: space-between; align-items: baseline; }
.dr-tete h3, .dr-merci h3 { margin: 0; font-size: 2rem; color: var(--texte); }
.dr-tete > span, .dr-surtitre { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texte-attenue); }
.dr-surtitre { color: var(--accent); }
.dr-intro, .dr-merci p { margin: 0.4rem 0 0; font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1.02rem; line-height: 1.45; color: var(--texte-corps); }
.dr-types { display: flex; flex-wrap: wrap; gap: 0 1.6rem; margin: 1.2rem 0 0; padding: 0; border: none; }
.dr-types legend, .dr-libelle { display: block; padding: 0; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-attenue); }
.dr-types legend { width: 100%; margin-bottom: 0.2rem; }
.dr-libelle small { font-weight: 400; letter-spacing: 0.04em; text-transform: none; }
.dr-types label { position: relative; display: inline-flex; align-items: center; min-height: 40px; cursor: pointer; }
.dr-types input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dr-types span { font-size: 0.9rem; color: var(--texte-attenue); text-underline-offset: 7px; text-decoration-thickness: 2px; }
.dr-types input:checked + span { color: var(--texte); text-decoration: underline; text-decoration-color: var(--accent); }
.dr-types input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.dialog-retour .dr-libelle { margin-top: 1rem; }
.dialog-retour textarea { display: block; box-sizing: border-box; width: 100%; margin-top: 0.4rem; padding: 0.7rem 0.8rem; border: 1px solid #3a3a3e; border-radius: 6px; background: var(--fond); color: var(--texte); font-family: "Inter", sans-serif; font-size: 0.92rem; line-height: 1.5; resize: vertical; }
.dialog-retour textarea:focus { outline: none; border-color: var(--accent); }
.dr-depot { margin-top: 0.4rem; padding: 0.9rem 1rem; border: 1px dashed #4a4a50; border-radius: 6px; text-align: center; font-size: 0.82rem; line-height: 1.5; color: var(--texte-attenue); }
.dr-depot.survol { border-color: var(--accent); color: var(--texte); }
.dr-fichier { position: relative; display: inline; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.dr-fichier input { position: absolute; opacity: 0; width: 1px; height: 1px; left: 0; }
.dr-fichier:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.dr-depot-mobile { display: none; }
.dr-apercu { display: flex; align-items: center; gap: 1rem; margin-top: 0.4rem; }
.dr-apercu[hidden] { display: none; }
.dr-apercu img { width: 132px; height: 84px; flex-shrink: 0; object-fit: cover; object-position: top; border: 1px solid #3a3a3e; border-radius: 5px; background: var(--fond); }
.dr-apercu > span { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; font-size: 0.84rem; overflow-wrap: anywhere; }
.dr-retirer, .dr-retirer:hover, .dr-retirer:focus { align-self: flex-start; min-height: 32px; padding: 0; background-color: transparent; border: none; font-family: "Inter", sans-serif; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-attenue); text-decoration: underline; text-underline-offset: 5px; cursor: pointer; outline: none; }
.dr-retirer:hover { color: var(--texte); }
.dr-joint { margin: 0.9rem 0 0; font-size: 0.74rem; line-height: 1.5; color: #8a8a90; }
.dr-joint span { color: var(--texte-corps); }
.dr-erreur { margin: 0.7rem 0 0; font-size: 0.82rem; color: var(--accent); }
.dr-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; }
.dr-envoyer, .dr-envoyer:hover, .dr-envoyer:focus { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background-color: transparent; border: none; font-family: "Inter", sans-serif; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); text-decoration: underline; text-underline-offset: 7px; cursor: pointer; outline: none; }
.dr-envoyer:hover { color: var(--accent-hover); }
.dr-envoyer:focus-visible, .dr-annuler:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dr-envoyer[disabled] { opacity: 0.5; cursor: wait; }
.dr-annuler, .dr-annuler:hover, .dr-annuler:focus { min-height: 44px; padding: 0; background-color: transparent; border: none; font-family: "Inter", sans-serif; font-size: 0.78rem; font-weight: 400; color: var(--texte-attenue); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; outline: none; }
.dr-merci[hidden], [data-retour-saisie][hidden] { display: none; }
.er-signaler, .er-signaler:hover, .er-signaler:focus { padding: 0; background-color: transparent; border: none; border-radius: 0; cursor: pointer; font: inherit; }
@media (pointer: coarse), (max-width: 700px) {
  .dr-depot-bureau { display: none; }
  .dr-depot-mobile { display: inline; }
  .dr-depot { text-align: left; }
}
@media (max-width: 560px) {
  .dialog-retour { inset: auto 0 0 0; width: 100%; max-width: none; max-height: 94vh; margin: 0; padding: 1.2rem 16px 1.4rem; border-radius: 14px 14px 0 0; border-width: 1px 0 0; }
  .dialog-retour textarea { font-size: 16px; }
}

/* Mes retours */
.mr-page { max-width: 760px; }
.mr-titre { margin: 0.4rem 0 0; font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 0.95; }
.mr-actions { margin-top: 1.2rem; }
.mr-liste { list-style: none; margin: 1.6rem 0 0; padding: 0; border-top: 1px solid var(--bordure); }
.mr-retour { padding: 1.1rem 0 1.2rem; border-bottom: 1px solid var(--bordure); scroll-margin-top: 90px; }
.mr-retour:target { background: rgba(var(--accent-rgb), 0.04); }
.mr-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; }
.mr-type, .ar-type { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-attenue); }
.mr-type.probleme, .ar-type.probleme { color: var(--accent); }
.mr-date { font-size: 0.78rem; color: #8a8a90; }
.mr-etat { margin-left: auto; font-size: 0.74rem; font-weight: 600; color: var(--texte-corps); }
.mr-etat-traite { color: var(--accent); }
.mr-etat-ecarte { color: var(--texte-attenue); font-weight: 400; }
.mr-message { margin: 0.5rem 0 0; font-size: 0.95rem; line-height: 1.55; color: var(--texte); white-space: pre-line; overflow-wrap: anywhere; }
.mr-contexte { margin: 0.35rem 0 0; font-size: 0.76rem; color: #8a8a90; }
.mr-reponse { margin: 0.8rem 0 0; padding: 0.75rem 0.95rem; border: 1px solid var(--bordure); border-radius: 6px; background: var(--fond-carte); }
.mr-reponse p { margin: 0; font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1.02rem; line-height: 1.5; color: var(--texte-corps); white-space: pre-line; }
.mr-reponse footer { margin-top: 0.35rem; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8a8a90; }

/* /admin, vue Retours */
.ar-grille { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.ar-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--fond-carte); overflow: hidden; }
.ar-liste li + li { border-top: 1px solid var(--bordure); }
.ar-item { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.85rem 1rem 0.85rem 0.85rem; border-left: 3px solid transparent; color: var(--texte); text-decoration: none; }
.ar-item:hover { background: var(--fond-carte-hover); }
.ar-item.courant { border-left-color: var(--accent); background: rgba(var(--accent-rgb), 0.06); }
.ar-item-tete { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.72rem; color: #8a8a90; }
.ar-item-texte { font-size: 0.86rem; line-height: 1.4; color: var(--texte); }
.ar-item-pied { font-size: 0.72rem; color: var(--texte-attenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-vide { padding: 1rem; }
.ar-detail { padding: 1.3rem 1.5rem 1.4rem; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--fond-carte); min-width: 0; }
.ar-detail-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.78rem; color: var(--texte-attenue); }
.ar-message { margin: 0.6rem 0 0; font-size: 1rem; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.ar-contexte { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 1.2rem; margin-top: 1.1rem; }
.ar-contexte:not(:has(.ar-capture)) { grid-template-columns: minmax(0, 1fr); }
.ar-capture { position: relative; display: block; overflow: hidden; border: 1px solid #3a3a3e; border-radius: 6px; background: var(--fond); }
.ar-capture img { display: block; width: 100%; max-height: 340px; object-fit: contain; }
.ar-capture span { position: absolute; right: 8px; bottom: 6px; padding: 0.1rem 0.4rem; border-radius: 3px; background: rgba(0, 0, 0, 0.6); font-size: 0.68rem; color: var(--texte-corps); }
.ar-contexte dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.45rem 0.9rem; align-content: start; margin: 0; font-size: 0.8rem; }
.ar-contexte dt { color: #8a8a90; }
.ar-contexte dd { margin: 0; color: var(--texte-corps); overflow-wrap: anywhere; }
.ar-etats { margin-top: 1.2rem; }
.ar-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 0.6rem; }
.ar-champs textarea { display: block; box-sizing: border-box; width: 100%; margin-top: 0.35rem; padding: 0.6rem 0.7rem; border: 1px solid #3a3a3e; border-radius: 6px; background: var(--fond); color: var(--texte); font-family: "Inter", sans-serif; font-size: 0.86rem; line-height: 1.45; resize: vertical; }
.ar-champs textarea:focus { outline: none; border-color: var(--accent); }
.ar-champs .en-aide { display: block; margin-top: 0.3rem; }
.ar-actions { display: flex; align-items: center; gap: 1.2rem; margin-top: 0.8rem; }
@media (max-width: 900px) {
  .ar-grille, .ar-contexte, .ar-champs { grid-template-columns: minmax(0, 1fr); }
}

/* Invitation a se connecter (visiteur qui clique sur une icone d'action, 17/10) */
.invitation-connexion {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 1000;
  width: min(26rem, calc(100% - 2rem));
  padding: 1rem 1.1rem;
  background-color: rgba(18, 18, 20, 0.96);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: var(--rayon);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  color: var(--texte);
  transform: translate(-50%, 1rem);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.invitation-connexion.visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.invitation-connexion p {
  margin: 0 0 0.8rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--texte-corps);
}

.invitation-connexion-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

.invitation-connexion-lien {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  color: var(--texte);
  font-size: 0.88rem;
  text-decoration: none;
}

.invitation-connexion-lien:hover,
.invitation-connexion-lien:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.invitation-connexion-principal {
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .invitation-connexion { transition: none; }
}


/* ===== Bouton Partager (18/10, templates/_partage.html) ===== */
.ff-partager { margin-top: 0.9rem; }
.partage { position: relative; display: inline-block; }
.partage-ouvrir {
  list-style: none; cursor: pointer; color: var(--texte-attenue);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.partage-ouvrir::-webkit-details-marker { display: none; }
.partage-ouvrir:hover, .partage[open] .partage-ouvrir { color: var(--texte); text-decoration: underline; text-underline-offset: 4px; }
.partage-ouvrir:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.partage-menu {
  position: absolute; z-index: 30; top: calc(100% + 0.5rem); left: 0; min-width: 13rem;
  display: flex; flex-direction: column; padding: 0.4rem 0;
  background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.partage-menu a, .partage-menu button {
  display: block; width: 100%; padding: 0.5rem 1rem; text-align: left;
  border: 0; background: transparent; color: var(--texte-corps); font: inherit; font-size: 0.85rem;
  text-decoration: none; cursor: pointer;
}
.partage-menu a:hover, .partage-menu button:hover { background: var(--fond-carte-hover); color: var(--texte); }
.partage-note { padding: 0.5rem 1rem 0.3rem; border-top: 1px solid var(--bordure); margin-top: 0.3rem; color: var(--texte-attenue); font-size: 0.75rem; }

.partage-haut .partage-menu { top: auto; bottom: calc(100% + 0.5rem); }
.partage-mention { padding: 0.3rem 1rem 0.6rem; margin-bottom: 0.3rem; border-bottom: 1px solid var(--bordure); color: var(--texte-attenue); font-size: 0.75rem; }
.pied-liens .partage-ouvrir { font-size: inherit; font-weight: inherit; letter-spacing: 0; text-transform: none; }
.pied-liens .partage-ouvrir:hover, .pied-liens .partage[open] .partage-ouvrir { color: var(--accent); text-decoration: none; }

/* Fiche personne, en-tetes a onglets de metiers (20/10 : Filmographie, Tu as vu,
   Il te reste a voir) : titre et onglets etaient sur la meme ligne flex, les
   onglets ecrasaient le titre sur mobile (titre par-dessus les onglets). Le
   titre garde sa largeur naturelle, les onglets passent a la ligne quand il
   reste moins de 16rem. */
.ac-tete:has(> .fp-mots) { flex-wrap: wrap; row-gap: 0.6rem; }
.ac-tete:has(> .fp-mots) h2 { flex: 0 1 auto; }
.ac-tete > .fp-mots { flex: 1 1 16rem; min-width: 0; }


/* Fiche personne, frise sur telephone (20/10, option B validee) : sous 640 px,
   la frise a positions en % se chevauchait ; elle est remplacee par une ligne
   par decennie, une pastille par film (lien vers sa fiche, zone de toucher 26 px). */
.fp-tl-dec { display: none; }
@media (max-width: 640px) {
  .fp-tl { display: none; }
  .fp-tl-dec { display: block; }
  .fp-tl-dec-ligne { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 0.5rem; align-items: center; padding: 0.35rem 0; border-top: 1px solid var(--bordure); }
  .fp-tl-dec-an { font-family: "Bebas Neue", "Inter", sans-serif; font-size: 1.3rem; line-height: 1; color: var(--texte-attenue); }
  .fp-tl-dec-an small { display: block; margin-top: 0.15rem; font-family: "Inter", sans-serif; font-size: 0.66rem; color: #8a8a90; }
  .fp-tl-dec-pts { display: flex; flex-wrap: wrap; }
  .fp-tl-dec-pt { display: grid; place-items: center; width: 26px; height: 26px; }
  .fp-tl-dec-pt::before { content: ""; width: 14px; height: 14px; box-sizing: border-box; border: 1.5px solid #5a5a60; border-radius: 50%; }
  .fp-tl-dec-pt.vu::before { border-color: var(--accent); background: var(--accent); }
  .fp-tl-dec-pt:focus-visible { outline: 1px solid var(--accent); outline-offset: -2px; border-radius: 50%; }
}