/* Base 18px (au lieu des 16px par défaut du navigateur) : usage exclusivement
   téléphone/tablette, tout le reste de la feuille est en rem donc suit
   proportionnellement (texte, espacements, tailles de bouton). */
html { font-size: 18px; }

:root {
  --espace: 1rem;
  /* Palette des 8 couleurs assignables à un profil (users.couleur, cf. admin.html),
     dupliquée côté JS dans static/common.js (PALETTE_COULEURS) et côté Python dans
     core/db.py (PALETTE_COULEURS) : toute couleur ajoutée ici doit aussi l'être là-bas.
     "rose" reste vert depuis le 01/09/2026 (nom historique conservé pour compat DB, cf.
     users.couleur — ne pas "corriger" le nom). */
  --accent-bleu: #2E86DE;
  --accent-rose: #2ECC71;
  --accent-violet: #9B59B6;
  --accent-orange: #E67E22;
  --accent-rouge: #E74C3C;
  --accent-jaune: #F1C40F;
  --accent-cyan: #17A2B8;
  --accent-gris: #7F8C8D;
  --accent-bleu-rgb: 46, 134, 222;
  --accent-rose-rgb: 46, 204, 113;
  --accent-violet-rgb: 155, 89, 182;
  --accent-orange-rgb: 230, 126, 34;
  --accent-rouge-rgb: 231, 76, 60;
  --accent-jaune-rgb: 241, 196, 15;
  --accent-cyan-rgb: 23, 162, 184;
  --accent-gris-rgb: 127, 140, 141;
  --accent: var(--accent-bleu);
  --accent-rgb: var(--accent-bleu-rgb);
}
body.theme-bleu { --accent: var(--accent-bleu); --accent-rgb: var(--accent-bleu-rgb); }
body.theme-rose { --accent: var(--accent-rose); --accent-rgb: var(--accent-rose-rgb); }
body.theme-violet { --accent: var(--accent-violet); --accent-rgb: var(--accent-violet-rgb); }
body.theme-orange { --accent: var(--accent-orange); --accent-rgb: var(--accent-orange-rgb); }
body.theme-rouge { --accent: var(--accent-rouge); --accent-rgb: var(--accent-rouge-rgb); }
body.theme-jaune { --accent: var(--accent-jaune); --accent-rgb: var(--accent-jaune-rgb); }
body.theme-cyan { --accent: var(--accent-cyan); --accent-rgb: var(--accent-cyan-rgb); }
body.theme-gris { --accent: var(--accent-gris); --accent-rgb: var(--accent-gris-rgb); }

body { margin: 0; font-family: system-ui, sans-serif; background: #14141a; color: #f0f0f0; }
a { color: inherit; }

.entete {
  display: flex; align-items: center; gap: .6rem; padding: var(--espace);
  font-size: 1.2rem; font-weight: 600;
}
.entete-logo { width: 1.8rem; height: 1.8rem; flex: none; }
.entete a { text-decoration: none; }

.bouton-hamburger {
  position: fixed; top: .75rem; right: .75rem; z-index: 20; width: 2.5rem; height: 2.5rem;
  border: none; border-radius: 8px; background: #1f1f28; color: #f0f0f0; font-size: 1.3rem; line-height: 1;
}
.menu-hamburger-fond { position: fixed; inset: 0; z-index: 19; background: rgba(0, 0, 0, .6); }
.menu-hamburger-fond[hidden] { display: none; }
.menu-hamburger {
  position: fixed; top: calc(.75rem + 2.5rem + .35rem); right: .75rem; left: .75rem; z-index: 20;
  display: flex; flex-direction: column;
  background: #1f1f28; border: 1px solid #2c2c38; border-radius: 10px; padding: .6rem .6rem 1.1rem;
  /* Même ambiance que .carte-accueil (page d'accueil), 02/09/2026. */
  box-shadow: -.6rem .7rem 1.2rem rgba(0, 0, 0, .45);
  /* Panneau plus haut que l'écran une fois tous les groupes dépliés (02/09/2026) : défilement
     interne plutôt que de déborder hors de l'écran, inaccessible. */
  max-height: calc(100vh - .75rem - 2.5rem - .35rem - .75rem);
  overflow-y: auto;
}
.menu-hamburger[hidden] { display: none; }
/* Chaque lien devient une pastille en relief façon .carte-accueil-lien (02/09/2026). */
.menu-hamburger .lien-menu {
  padding: .75rem 1rem; margin-bottom: .4rem; border-radius: 8px;
  background: #26262f; color: #f0f0f0; text-decoration: none; display: block; flex: 1;
  border: 1px solid #38384470;
  box-shadow: inset 1px -1px 0 rgba(255, 255, 255, .08), -2px 3px 5px rgba(0, 0, 0, .35);
}
.menu-hamburger a.lien-menu:active {
  background: rgba(var(--accent-rgb), .2);
  box-shadow: inset -1px 2px 3px rgba(0, 0, 0, .4);
}
.menu-hamburger a.lien-menu.actif { background: #2c2c38; font-weight: 600; color: var(--accent); }
.menu-hamburger .lien-menu.lien-sous { padding-left: 2rem; font-size: .92rem; }
/* Liseré de couleur par catégorie dans le sous-menu Action ou Vérité (01/09/2026) : distingue
   vérités/défis/Q&R au premier coup d'œil — axe de couleur indépendant de l'accent "personne"
   (profil courant), pas de conflit de sens malgré la réutilisation des mêmes teintes. */
.menu-hamburger .lien-sous-verites { border-left: 3px solid rgba(var(--accent-violet-rgb), .5); }
.menu-hamburger .lien-sous-defis   { border-left: 3px solid rgba(var(--accent-orange-rgb), .5); }
.menu-hamburger .lien-sous-qr      { border-left: 3px solid rgba(var(--accent-cyan-rgb), .5); }
/* Action principale du groupe, mise en avant (01/09/2026, sur demande, sans icône) — texte et
   fond teintés dans l'accent du profil courant (déjà thématisé partout ailleurs, cf.
   `body.theme-{couleur}`), pas de couleur en dur. Sélecteur à 3 classes pour égaler la
   spécificité de `.lien-menu.lien-sous` (font-size .92rem) et gagner par ordre de déclaration,
   plus tardif dans ce fichier. */
.menu-hamburger .lien-sous.lien-tirer-carte {
  font-size: 1.05rem; font-weight: 700; color: var(--accent);
  background: rgba(var(--accent-rgb), .14); border-radius: 6px;
}
/* Sous-titres de catégorie dans le sous-menu (01/09/2026, sur demande, en complément du
   liseré ci-dessus) : même traitement que les h4 de regroupement ailleurs dans l'appli
   (`.liste-decouverte h4`) — gris discret, capitales, pas de nouvelle couleur. */
.menu-hamburger .sous-titre-groupe {
  padding: .45rem 1rem .45rem 2rem; margin: .15rem 0 .4rem; font-size: .72rem; font-weight: 700;
  color: #8a8a95; text-transform: uppercase; letter-spacing: .04em; background: none;
}
/* Titre de groupe en "rainure" (02/09/2026), même traitement que les séparations
   Catégories/Mots-clés de la fiche vidéo solo (cf. .ligne-section-info) — remplace l'ancien
   fond plat pour rester cohérent avec le reste de l'appli. */
.ligne-menu-parent {
  display: flex; align-items: center; margin: .8rem 0 .5rem; padding: .5rem 0;
  border-top: 1px solid rgba(0, 0, 0, .5);
  border-bottom: 1px solid rgba(0, 0, 0, .5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.ligne-menu-parent:first-child { margin-top: 0; }
.menu-hamburger .titre-groupe {
  background: none; border: none; box-shadow: none; margin: 0; padding: 0 0 0 .3rem;
  cursor: default; display: flex; align-items: center; gap: .5rem;
  font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #f0f0f0;
}
.icone-videotheque { flex: none; }
.icone-videotheque rect { fill: rgb(var(--accent-rgb)); }
.toggle-sous-menu {
  flex: none; width: 2.75rem; border: none; background: none; color: #a0a0ad;
  font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.toggle-sous-menu[aria-expanded="true"] { color: var(--accent); }
.sous-liens-groupe[hidden] { display: none; }

/* Grille resserrée à la base ; gap élargi (03/09/2026) pour mieux détacher les cartes vidéo
   les unes des autres depuis qu'elles ont leur propre relief (cf. .carte-moi ci-dessous). */
.grille-moi { display: grid; grid-template-columns: 1fr; gap: calc(var(--espace) * 1.5); padding: var(--espace); }
@media (min-width: 600px) { .grille-moi { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
/* Toutes les cartes (catégorie ET vidéo) alignées sur le style des blocs de l'accueil
   (02-03/09/2026) : reflet haut-droit + ombre portée bas-gauche, même source de lumière que
   le reste de la page, + retour tactile enfoncé au clic/tap. */
.carte-moi {
  position: relative; display: block; box-sizing: border-box; background: #1f1f28; border-radius: 10px;
  text-decoration: none; color: inherit; overflow: hidden;
  border: 1px solid #38384470;
  box-shadow: inset 1px -1px 0 rgba(255, 255, 255, .08), -2px 3px 5px rgba(0, 0, 0, .35);
}
.carte-moi:active { box-shadow: inset -1px 2px 3px rgba(0, 0, 0, .4); }
/* Effet "gloss" (03/09/2026, listes de vidéos/catégories uniquement — pas la fiche vidéo
   solo, cf. .carte-info-video) : voile brillant qui couvre tout le bloc, plus intense côté
   haut-droit et qui s'estompe vers le bas-gauche. */
.carte-moi::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(225deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 55%);
}
/* Cartes catégorie (03/09/2026) : gloss encore plus discret que les cartes vidéo, et même
   cadre blanc dégradé que .tag-chip (au lieu du liseré uni #38384470 de .carte-moi) —
   double fond : couche pleine en padding-box, dégradé en border-box pour le cadre. */
.carte-moi:not(:has(.carte-moi-media)) {
  padding: var(--espace); text-align: center;
  border: 1px solid transparent;
  background-image: linear-gradient(#1f1f28, #1f1f28), linear-gradient(225deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .03));
  background-origin: border-box; background-clip: padding-box, border-box;
}
.carte-moi:not(:has(.carte-moi-media))::before {
  background: linear-gradient(225deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 55%);
}
.carte-moi .titre { font-weight: 600; margin-bottom: .25rem; }

.carte-moi-media { position: relative; display: block; line-height: 0; }
.couverture-moi { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #14141a; display: block; }
.badge-duree {
  position: absolute; right: .5rem; bottom: .5rem; padding: .2rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .01em; line-height: 1.4;
  background: rgba(20, 20, 26, .8); color: #f0f0f0;
}
.badges-acces { position: absolute; left: .5rem; top: .5rem; display: flex; gap: .3rem; }
.badge-acces {
  width: 1.6rem; height: 1.6rem; border-radius: 999px; padding: .32rem; box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.badge-acces.badge-acces-bleu { background: var(--accent-bleu); }
.badge-acces.badge-acces-rose { background: var(--accent-rose); }
.badge-acces.badge-acces-violet { background: var(--accent-violet); }
.badge-acces.badge-acces-orange { background: var(--accent-orange); }
.badge-acces.badge-acces-rouge { background: var(--accent-rouge); }
.badge-acces.badge-acces-jaune { background: var(--accent-jaune); }
.badge-acces.badge-acces-cyan { background: var(--accent-cyan); }
.badge-acces.badge-acces-gris { background: var(--accent-gris); }
.badge-acces img { width: 100%; height: 100%; display: block; }
.carte-moi-corps { padding: .8rem var(--espace) var(--espace); display: flex; flex-direction: column; gap: .5rem; }
.carte-moi-eyebrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); font-weight: 700; }
.carte-moi-titre { display: block; text-decoration: none; color: inherit; font-weight: 600; line-height: 1.35; }
.carte-moi-corps .tags-video { margin: 0; padding-top: .55rem; border-top: 1px solid #2c2c38; }

.tags-video { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; }
.tag-chip {
  display: inline-block; padding: .5rem .9rem; border-radius: 0 5px 0 5px;
  border: 1px solid transparent; color: #f0f0f0;
  font-size: .88rem; text-decoration: none;
  /* Cadre blanc dégradé (03/09/2026, remplace le liseré accent bleu/rose) : plus clair côté
     haut-droit, s'assombrit progressivement vers le bas-gauche — même source de lumière que
     le reste de la page. Technique du double fond (cf. .carte-moi.carte-partagee) : couche
     pleine en padding-box pour le fond de la puce, dégradé en border-box pour le cadre. */
  background-image: linear-gradient(#2c2c38, #2c2c38), linear-gradient(225deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .03));
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: inset 1px -1px 0 rgba(255, 255, 255, .1), -2px 3px 4px rgba(0, 0, 0, .3);
}
.tag-chip:active { box-shadow: inset -1px 2px 3px rgba(0, 0, 0, .35); }

.pagination { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; padding: .5rem 1rem 2rem; }
.pagination button {
  min-width: 2.5rem; height: 2.5rem; padding: 0 .7rem; border: 1px solid #2c2c38; border-radius: 999px;
  background: #1f1f28; color: #f0f0f0; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.pagination button:hover:not(:disabled) { background: #2c2c38; border-color: #3a3a45; }
.pagination button:disabled { background: var(--accent); border-color: var(--accent); color: #fff; cursor: default; }

.panneau-recherche { margin: 0 var(--espace) var(--espace); }
.panneau-recherche-toggle {
  display: flex; align-items: center; gap: .5rem; width: 100%; box-sizing: border-box;
  padding: .75rem 1rem; border: 1px solid #2c2c38; border-radius: 8px; background: #1f1f28;
  color: #f0f0f0; font-size: .95rem; font-weight: 600; cursor: pointer;
}
.panneau-recherche-toggle:hover { background: #2c2c38; }
.panneau-recherche-toggle .chevron { margin-left: auto; transition: transform .15s ease; }
.panneau-recherche-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.panneau-recherche-corps {
  margin-top: .6rem; padding: 1rem; border: 1px solid #2c2c38; border-radius: 8px;
  background: #1f1f28; display: flex; flex-direction: column; gap: .75rem;
}
.panneau-recherche-corps[hidden] { display: none; }
.panneau-recherche-corps input[type="text"] {
  width: 100%; box-sizing: border-box; padding: .7rem .8rem; border-radius: 8px;
  border: 1px solid #2c2c38; background: #14141a; color: #f0f0f0; font-family: inherit; font-size: 1rem;
}
.ligne-filtres-recherche { display: flex; flex-wrap: wrap; gap: .6rem; }
.ligne-filtres-recherche select {
  flex: 1; min-width: 140px; padding: .6rem .7rem; border-radius: 8px; border: 1px solid #2c2c38;
  background: #14141a; color: #f0f0f0; font-family: inherit; font-size: .92rem;
}
.panneau-recherche-corps button[type="submit"] {
  border: none; border-radius: 8px; padding: .8rem; background: var(--accent); color: #fff;
  font-size: 1rem; font-weight: 600; cursor: pointer;
}

.champ-token {
  width: 100%; box-sizing: border-box; padding: .75rem; font-size: 1rem; border-radius: 8px;
  border: 1px solid #2c2c38; background: #1f1f28; color: #f0f0f0;
}
.bouton-principal {
  width: 100%; box-sizing: border-box; padding: .75rem; border: none; border-radius: 8px;
  font-size: 1rem; font-weight: 600; background: var(--accent); color: #fff; cursor: pointer;
}
.bouton-principal:disabled { opacity: .6; cursor: default; }

/* Bloc d'infos sous le lecteur (03/09/2026) : même relief + gloss que les blocs de l'accueil
   et les cartes .carte-moi — remplace l'ancien <div style="padding:1rem"> sans habillage. */
.carte-info-video {
  position: relative; margin: var(--espace) auto; max-width: 96%; padding: var(--espace);
  box-sizing: border-box; overflow: hidden;
  background: #1c1c24; border-radius: 10px; border: 1px solid #2c2c38;
  box-shadow: inset 1px -1px 0 rgba(255, 255, 255, .08), -2px 3px 5px rgba(0, 0, 0, .35);
}
.conteneur-lecteur { position: relative; }
.lecteur-video { width: 100%; max-height: 70vh; background: #000; }
.bouton-nav-video {
  position: absolute; top: 50%; transform: translateY(-50%); width: 2.6rem; height: 2.6rem;
  border: none; border-radius: 999px; background: rgba(20, 20, 26, .6); color: #f0f0f0;
  font-size: 1.5rem; line-height: 1; z-index: 2; cursor: pointer;
}
.bouton-nav-prec { left: .5rem; }
.bouton-nav-suiv { right: .5rem; }

/* Rainure (03/09/2026) : ligne creusée dans la surface plutôt qu'un simple trait — bord
   sombre + léger liseré clair juste en dessous, comme un canal gravé qui capte un peu de
   lumière sur sa lèvre basse. Bandeau à DEUX rainures (haut + bas) avec le titre centré
   verticalement pile entre les deux (le box-shadow, en décalant toute la forme de la boîte,
   crée le même liseré clair sous chacune des deux bordures). */
.ligne-section-info {
  margin: 1.75rem 0 .8rem; padding: .55rem 0;
  display: flex; align-items: center;
  border-top: 1px solid rgba(0, 0, 0, .5);
  border-bottom: 1px solid rgba(0, 0, 0, .5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.ligne-section-info .section-label { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #f0f0f0; }

/* Bandeau note (03/09/2026) : même rainure, mais la note du bandeau est centrée et réduite
   plutôt qu'un titre à gauche. */
.ligne-note-video { justify-content: center; }
.ligne-note-video .notation { margin: 0; }
.ligne-note-video .notation-etoiles { font-size: 1rem; }

.erreur { color: #e0645a; font-size: .9rem; }
.erreur:empty { display: none; }

.terme-recherche { margin: 0 var(--espace) var(--espace); color: #a0a0ad; font-size: .9rem; }
.terme-recherche[hidden] { display: none; }
/* Centré horizontalement (text-align) ET verticalement (margin haut/bas symétriques) dans
   l'espace entre le bas du cadre de recherche/en-tête et la première vignette de la grille. */
.compteur-recherche {
  margin: var(--espace); color: #a0a0ad; font-size: 1.6rem; text-align: center;
}

/* Accordéon mots-clés + note affichée, par carte dans la liste vidéos d'une catégorie
   (31/08/2026) — mots-clés repliés par défaut, note toujours visible en dessous. */
.tags-toggle-carte {
  display: flex; align-items: center; gap: .3rem; width: 100%; box-sizing: border-box;
  margin-top: .5rem; padding: .35rem .6rem; border: 1px solid #2c2c38; border-radius: 6px;
  background: #14141a; color: #a0a0ad; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.tags-toggle-carte .chevron { margin-left: auto; transition: transform .15s ease; }
.tags-toggle-carte[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.tags-corps-carte { margin-top: .4rem; }
.tags-corps-carte[hidden] { display: none; }

.note-affichage-carte { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: .5rem; }
.note-etoiles-carte { position: relative; display: inline-block; line-height: 1; font-size: 1rem; letter-spacing: .08em; }
.note-etoiles-carte-fond, .note-etoiles-carte-plein { display: block; white-space: nowrap; user-select: none; }
.note-etoiles-carte-fond { color: #3a3a45; }
.note-etoiles-carte-plein { position: absolute; inset: 0; width: var(--pourcentage, 0%); overflow: hidden; color: var(--accent); }
.note-libelle-carte { font-size: .78rem; color: #a0a0ad; white-space: nowrap; }
.info-partage-carte { font-size: .78rem; color: #a0a0ad; font-style: italic; text-align: center; margin-top: .3rem; }

/* Notation perso 0-10 (demi-points), modifiable à tout moment, sur la page vidéo solo
   (31/08/2026) — couleur du thème de l'utilisateur connecté, cf. --accent. */
.notation { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; }
.notation-etoiles { position: relative; display: inline-block; line-height: 1; font-size: 1.5rem; letter-spacing: .1em; }
.notation-etoiles-fond, .notation-etoiles-plein { display: block; white-space: nowrap; user-select: none; }
.notation-etoiles-fond { color: #3a3a45; }
.notation-etoiles-plein { position: absolute; inset: 0; width: var(--pourcentage, 0%); overflow: hidden; color: var(--accent); transition: width .1s ease; }
.notation-zones { position: absolute; inset: 0; display: flex; }
.notation-zone { flex: 1; background: none; border: none; padding: 0; margin: 0; cursor: pointer; }
.notation-libelle { font-size: .8rem; color: #a0a0ad; white-space: nowrap; }
.notation-effacer {
  border: none; background: none; color: #a0a0ad; font-size: .78rem; text-decoration: underline;
  cursor: pointer; padding: 0; margin-left: .2rem;
}
.notation-effacer[hidden] { display: none; }

.bouton-favori {
  width: 100%; box-sizing: border-box; margin: .6rem 0 1rem; padding: .75rem;
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  border: 1px solid transparent; border-radius: 8px;
  /* Même cadre blanc dégradé que .tag-chip (03/09/2026) : plus clair côté haut-droit, plus
     sombre vers le bas-gauche. Double fond (couche pleine en padding-box, dégradé en
     border-box) — [aria-pressed="true"] écrase tout ça avec `background` (shorthand) pour
     revenir à un vrai cadre plein accent, cf. plus bas. */
  background-image: linear-gradient(#26262f, #26262f), linear-gradient(225deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .03));
  background-origin: border-box; background-clip: padding-box, border-box;
  color: #f0f0f0; font-size: .95rem; cursor: pointer;
  box-shadow: inset 1px -1px 0 rgba(255, 255, 255, .06), -2px 3px 5px rgba(0, 0, 0, .3);
}
.bouton-favori:active { box-shadow: inset -1px 2px 3px rgba(0, 0, 0, .35); }
.bouton-favori[aria-pressed="true"] {
  background: rgba(var(--accent-rgb), .18); border-color: var(--accent); color: var(--accent); font-weight: 600;
}
.bouton-favori:disabled { opacity: .6; cursor: default; }
.icone-coeur { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.bouton-favori[aria-pressed="true"] .icone-coeur { fill: currentColor; }

/* Action destructive : couleur d'alerte fixe (pas --accent) pour rester distincte du
   thème bleu/rose, quel que soit le côté du couple. */
.bouton-supprimer { border-color: rgba(220, 70, 70, .5); color: #e07a7a; margin-top: .4rem; }
.bouton-supprimer:hover, .bouton-supprimer:active { background: rgba(220, 70, 70, .12); border-color: #dc4646; }
.icone-supprimer { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.section-actions { display: flex; flex-direction: column; }
.icone-partager { flex: none; }
.icone-partager circle { fill: currentColor; }
.icone-partager line { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* Traitement visuel des vidéos favorites, partout où une carte vidéo apparaît (31/08/2026) :
   bordure + léger voile dans la couleur du thème de l'utilisateur connecté (bleu côté
   homme, rose côté femme — pas une couleur "favori" fixe, cf. --accent-rgb). */
.carte-moi.carte-favorite {
  border: 2px solid rgba(var(--accent-rgb), .9);
  animation: clignotant-cadre-favorite 2.6s ease-in-out infinite;
}
.carte-moi.carte-favorite .carte-moi-media::after {
  content: ""; position: absolute; inset: 0; background: rgba(var(--accent-rgb), .28); pointer-events: none;
}
@keyframes clignotant-cadre-favorite {
  0%, 100% { border-color: rgba(var(--accent-rgb), .4); }
  50% { border-color: rgba(var(--accent-rgb), 1); }
}

/* Vidéos partagées (31/08/2026, bicolore le 03/09/2026) : statut couple-wide, prime sur le
   favori (cf. classeCarte). Cadre dégradé qui va de MA couleur à celle du/de la partenaire
   (--autre-accent-rgb, cf. common.js chargerCourant) — via le "double background" (couche
   pleine en padding-box pour masquer le fond de la carte, dégradé en border-box pour la
   bordure elle-même) — et anneau clignotant qui alterne entre les deux couleurs, pour bien
   représenter que les DEUX profils sont concernés, pas seulement celui connecté. */
.carte-moi.carte-partagee {
  border: 2px solid transparent; border-radius: 10px;
  background-image: linear-gradient(#1f1f28, #1f1f28), linear-gradient(135deg, var(--accent), rgb(var(--autre-accent-rgb, var(--accent-rgb))));
  background-origin: border-box; background-clip: padding-box, border-box;
  /* Bordure en dégradé (double background) : border-color n'a pas de prise dessus, on anime
     donc un anneau (box-shadow) qui pulse par-dessus, en gardant le relief de .carte-moi. */
  animation: clignotant-cadre-partagee 2.6s ease-in-out infinite;
}
.carte-moi.carte-partagee .carte-moi-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .28), rgba(var(--autre-accent-rgb, var(--accent-rgb)), .28));
  pointer-events: none;
}
@keyframes clignotant-cadre-partagee {
  0%, 45% {
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .9),
      inset 1px -1px 0 rgba(255, 255, 255, .08), -2px 3px 5px rgba(0, 0, 0, .35);
  }
  50%, 95% {
    box-shadow: 0 0 0 2px rgba(var(--autre-accent-rgb, var(--accent-rgb)), .9),
      inset 1px -1px 0 rgba(255, 255, 255, .08), -2px 3px 5px rgba(0, 0, 0, .35);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .9),
      inset 1px -1px 0 rgba(255, 255, 255, .08), -2px 3px 5px rgba(0, 0, 0, .35);
  }
}

.info-menu-sous { display: block; margin-top: .1rem; font-size: .82rem; font-weight: 400; color: #a0a0ad; }

.ligne-requete {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .75rem; margin-bottom: .6rem; border-radius: 8px; background: #1f1f28;
}
.ligne-requete-traitee { opacity: .55; }
.ligne-requete-traitee .ligne-requete-texte label { text-decoration: line-through; }
.ligne-requete-texte { display: flex; flex-direction: column; gap: .2rem; }
.ligne-requete-texte label { display: flex; align-items: flex-start; gap: .5rem; }
.ligne-requete-auteur { font-size: .78rem; color: #a0a0ad; padding-left: 1.6rem; }
.bouton-requete-supprimer {
  flex: none; border: none; border-radius: 6px; padding: .4rem .7rem; background: #2c2c38;
  color: #f0f0f0; font-size: .8rem; cursor: pointer;
}
.bouton-requete-supprimer:hover { background: #3a3a45; }

/* Carte profil admin (gestion PIN TV) : dédiée, ne réutilise pas .ligne-requete/.champ-token/
   .bouton-principal (pensées pour un formulaire plein écran, d'où l'effet "énorme" une fois
   posées côte à côte dans une petite ligne). */
.carte-admin-profil {
  padding: 1rem 1.1rem; margin-bottom: .8rem; border-radius: 12px;
  background: #1c1c24; border: 1px solid #2c2c38;
}
.carte-admin-profil-ligne {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.carte-admin-profil-texte { display: flex; align-items: center; gap: .55rem; }
.carte-admin-profil-pastille { width: .6rem; height: .6rem; border-radius: 50%; flex: none; }
.carte-admin-profil-actions { display: flex; align-items: center; gap: .5rem; }
.selecteur-couleur { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.pastille-couleur {
  width: 1.6rem; height: 1.6rem; border-radius: 50%; padding: 0; box-sizing: border-box;
  border: 2px solid transparent; cursor: pointer;
}
.pastille-couleur-selectionnee { border-color: #f0f0f0; box-shadow: 0 0 0 2px #14141a inset; }
.champ-code-tv {
  width: 6.5rem; box-sizing: border-box; padding: .5rem .6rem; font-size: .95rem;
  border-radius: 999px; border: 1px solid #2c2c38; background: #14141a; color: #f0f0f0;
  text-align: center; letter-spacing: .15em;
}
.bouton-code-tv {
  border: 1px solid var(--accent); border-radius: 999px; padding: .45rem 1rem;
  background: transparent; color: var(--accent); font-size: .85rem; font-weight: 600; cursor: pointer;
}
.bouton-code-tv:hover { background: rgba(var(--accent-rgb), .12); }
.bouton-code-tv:disabled { opacity: .5; cursor: default; }
.bouton-retirer-code {
  border: none; border-radius: 999px; padding: .45rem .9rem; background: #2c2c38;
  color: #a0a0ad; font-size: .8rem; cursor: pointer;
}
.bouton-retirer-code:hover { background: #3a3a45; }

/* Mobile étroit (S23 et similaires, ~360-390px) : la ligne texte+actions tenait tout juste
   sur une seule ligne en se rétrécissant au maximum (pastille/nom/statut collés à
   l'input+2 boutons), illisible et peu tactile — on empile clairement à la place. */
@media (max-width: 480px) {
  .carte-admin-profil-ligne { flex-direction: column; align-items: stretch; }
  .carte-admin-profil-actions { flex-wrap: wrap; }
  /* min-width: 0 est indispensable ici : un enfant flex refuse par défaut de rétrécir
     sous sa largeur de contenu (min-width: auto implicite), ce qui suffit à faire
     déborder "Retirer" du bord de carte dès que le texte est un peu plus large que prévu
     (grossissement de police Chrome Android sur colonne étroite, notamment). */
  .champ-code-tv { flex: 1 1 100%; width: auto; min-width: 0; }
  .bouton-code-tv, .bouton-retirer-code { flex: 1 1 auto; min-width: 0; }
}

/* Page d'accueil : horloge façon radio-réveil années 80 — fin liseré plastique, écran encastré
   sombre avec ombre portée, chiffres façon plaquettes à bascule (split-flap) blanches. */
.carte-horloge {
  margin: var(--espace) auto;
  padding: .4rem .6rem;
  border-radius: 8px;
  background: #3a362e;
  border: 1px solid #4a453a33;
  /* Lumière d'ambiance venant d'en haut à droite (02/09/2026, convention pour toute la page
     d'accueil) : ombre portée vers le bas-gauche (offsets négatif en x, positif en y). */
  box-shadow: -.7rem .8rem 1.6rem rgba(0, 0, 0, .75), -.15rem .2rem .4rem rgba(0, 0, 0, .6);
  text-align: center;
  max-width: 10rem;
}
.carte-horloge-ecran {
  background: #0e0e10;
  border-radius: 4px;
  padding: .4rem .3rem .3rem;
  /* Écran encastré (creux) : ombre dominante côté bas-gauche (opposé à la lumière), léger
     liseré côté haut-droit là où la lumière atteint directement le fond du creux. */
  box-shadow: inset -.15em .2em .4em rgba(0, 0, 0, .7), inset .1em -.1em .15em rgba(255, 255, 255, .03);
}
.carte-horloge-heure {
  display: flex;
  justify-content: center;
  gap: .12rem;
  line-height: 1.1;
}
/* Effet "plaque à bascule" (split-flap / Solari) : chaque chiffre est coupé en deux
   moitiés indépendantes, légèrement dégradées (haut plus clair, bas plus sombre, comme
   éclairées du dessus) et séparées par un fin interstice qui laisse voir le fond très
   sombre du boîtier — c'est cet interstice qui donne l'illusion des deux volets physiques,
   pas juste une ligne dessinée par-dessus le chiffre. */
.plaque {
  position: relative;
  display: inline-block;
  width: 1.15rem;
  height: 1.55rem;
  border-radius: 3px;
  background: #050505;
  box-shadow: -2px 2px 3px rgba(0, 0, 0, .65);
}
.plaque-moitie {
  position: absolute; left: 0; right: 0; height: 47%; overflow: hidden;
}
.plaque-moitie-haut {
  top: 0;
  border-radius: 3px 3px 0 0;
  /* Dégradé diagonal (225deg = clair au coin haut-droit vers sombre au coin bas-gauche),
     cohérent avec la source de lumière — remplace le dégradé vertical d'origine. */
  background: linear-gradient(225deg, #3d3d42, #29292d);
  box-shadow: inset 1px -1px 0 rgba(255, 255, 255, .14);
}
.plaque-moitie-bas {
  bottom: 0;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(225deg, #232326, #1a1a1c);
  box-shadow: inset -1px 1px 0 rgba(0, 0, 0, .5);
}
.plaque-car {
  position: absolute; left: 0; right: 0; height: 213%;
  display: flex; align-items: center; justify-content: center;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  color: #f4f4f2;
  font-variant-numeric: tabular-nums;
}
.plaque-moitie-haut .plaque-car { top: 0; }
.plaque-moitie-bas .plaque-car { bottom: 0; }
.plaque-deux-points {
  width: .55rem; height: 1.55rem; background: none; box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 1.05rem; font-weight: 700; color: #cfcfcf;
}
.carte-horloge-date {
  margin-top: .35rem;
  font-size: .6rem;
  color: #ff9c33;
  text-shadow: 0 0 .3em rgba(255, 156, 51, .5);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Page d'accueil : bloc de raccourcis Vidéothèque — même esprit que .carte-horloge
   (centré, ombre portée) mais cadre bien plus marqué (2px), pas de style "radio-réveil". */
.carte-accueil {
  margin: 1.8rem auto var(--espace);
  padding: .8rem;
  border-radius: 10px;
  background: #1c1c24;
  border: 2px solid #2c2c38;
  /* Lumière d'ambiance en haut à droite : ombre portée vers le bas-gauche. */
  box-shadow: -.6rem .7rem 1.2rem rgba(0, 0, 0, .45);
  max-width: 16rem;
}
.carte-accueil-titre {
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent); margin-bottom: .6rem; text-align: center;
}
.carte-accueil-lien {
  display: block; padding: .7rem .8rem; margin-bottom: .5rem; border-radius: 8px;
  background: #26262f; color: #f0f0f0; text-decoration: none; font-weight: 600;
  text-align: center;
  border: 1px solid #38384470;
  /* Reflet sur le bord haut-droit (inset, offset vers la droite/le haut) + ombre portée
     vers le bas-gauche : même source de lumière que le reste de la page. */
  box-shadow: inset 1px -1px 0 rgba(255, 255, 255, .08), -2px 3px 5px rgba(0, 0, 0, .35);
}
.carte-accueil-lien:last-child { margin-bottom: 0; }
.carte-accueil-lien:active {
  background: rgba(var(--accent-rgb), .2);
  /* Enfoncé : creux, ombre dominante côté bas-gauche (opposé à la lumière). */
  box-shadow: inset -1px 2px 3px rgba(0, 0, 0, .4);
}

/* Espace info "afficheur digital" sous un bouton (Vidéothèque, 02/09/2026) — police
   DSEG7 Classic Mini (SIL OFL, fournie par l'utilisateur), imite un afficheur LCD/LED
   à segments. Bouton + info regroupés visuellement en une seule pastille (coins partagés). */
@font-face {
  font-family: "DSEG7ClassicMini";
  src: url("fonts/DSEG7ClassicMini-Regular.woff2") format("woff2"),
       url("fonts/DSEG7ClassicMini-Regular.woff") format("woff");
  font-weight: normal; font-style: normal; font-display: swap;
}
.carte-accueil-item { margin-bottom: .5rem; }
.carte-accueil-item:last-child { margin-bottom: 0; }
.carte-accueil-item .carte-accueil-lien { margin-bottom: 0; border-radius: 8px 8px 0 0; }
.carte-accueil-lien-info {
  margin: 0; padding: .35rem .3rem; border-radius: 0 0 8px 8px;
  /* Fond du creux : plus clair côté haut-droit (la lumière y entre directement), plus
     sombre côté bas-gauche — même convention que le reste de la page. */
  background: linear-gradient(225deg, #1c1c20, #101013);
  box-shadow: inset -2px 3px 5px rgba(0, 0, 0, .5);
  border: 1px solid #38384470; border-top: none;
  font-size: .8rem; text-align: center;
}
/* Générique (02/09/2026, plus scopé à .carte-accueil-lien-info) : réutilisé aussi sur les
   cartes catégorie de la Vidéothèque et le quota de tirage. Taille en `em` (pas `rem`, cf.
   03/09/2026) pour suivre la taille du texte du conteneur plutôt qu'une taille fixe — sinon
   le badge reste minuscule à côté d'un texte agrandi (ex. .compteur-recherche). */
.chiffre-digital {
  position: relative; display: inline-block; margin: 0 .15em; padding: 0 .4em; border-radius: .3em;
  background: #14141a;
  font-family: "DSEG7ClassicMini", "Courier New", ui-monospace, monospace;
  font-size: .7em; letter-spacing: .03em;
}
/* Segments "éteints" (02/09/2026) : un chiffre de fond composé uniquement de "8" (tous les
   segments allumés), en très sourd, sous la vraie valeur — comme un véritable afficheur
   LCD/LED où les segments non utilisés restent visibles en négatif. Même nombre de
   caractères que la valeur (cf. common.js, chiffreDigital) pour un alignement parfait. */
.chiffre-digital-fond { opacity: .25; text-shadow: none; }
.chiffre-digital-valeur { position: absolute; right: .4em; top: 0; }
/* Cyan = total, vert phosphore façon vieux compteur terminal (AS400 et consorts) = nouvelles */
.chiffre-digital-cyan {
  color: #2ee6d6; text-shadow: 0 0 3px rgba(46, 230, 214, .5);
}
.chiffre-digital-vert {
  color: #33ff33; text-shadow: 0 0 3px rgba(51, 255, 51, .5);
}
#carte-notifications, #carte-videotheque, #carte-action-verite, #bloc-tirage { box-sizing: border-box; max-width: 92%; padding-left: 15px; padding-right: 15px; }
#notifications-corps .carte-accueil-lien, #carte-videotheque .carte-accueil-lien, #carte-action-verite .carte-accueil-lien { font-size: .82rem; padding: .55rem .3rem; }
.carte-accueil-sous-titre {
  padding: .3rem .2rem; margin: .5rem 0 .3rem; font-size: .68rem; font-weight: 700;
  color: #8a8a95; text-transform: uppercase; letter-spacing: .04em; text-align: center;
}
.carte-accueil-sous-titre:first-child { margin-top: 0; }
.carte-accueil-vide {
  padding: .6rem .4rem;
  text-align: center;
  color: #7a7a86;
  font-size: .78rem;
  font-style: italic;
}

/* Module Action ou Vérité (découverte), porté depuis l'app "Moi" de l'agrégateur vidéo
   (01/09/2026) — seules les règles utilisées par decouverte.html/app-decouverte.js, adaptées
   aux couleurs déjà en place ici (--accent/--accent-rgb) plutôt que les teintes orange/rouge
   fixes de la source. */
.sous-entete { padding: .2rem var(--espace) var(--espace); font-size: .95rem; color: #a0a0ad; }
.sous-entete:empty { display: none; }

.bouton-activer-push {
  display: block; width: calc(100% - 2 * var(--espace)); margin: 0 var(--espace) var(--espace);
  box-sizing: border-box; padding: .7rem; border: 1px solid rgba(var(--accent-rgb), .5);
  border-radius: 8px; background: transparent; color: var(--accent); font-size: .9rem;
  font-weight: 600; cursor: pointer;
}
.bouton-activer-push[hidden] { display: none; }
.bouton-activer-push:disabled { opacity: .6; cursor: default; }

.form-question { display: flex; flex-direction: column; gap: .5rem; padding: var(--espace); }
.form-question[hidden] { display: none; }
.form-question textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 2.5rem; padding: .6rem;
  border-radius: 8px; border: 1px solid #2c2c38; background: #1f1f28; color: #f0f0f0;
  font-family: inherit; font-size: .95rem;
}
.form-question button {
  border: none; border-radius: 8px; padding: .6rem 1rem; background: var(--accent); color: #fff; font-size: .95rem;
}
@media (min-width: 600px) { .form-question { flex-direction: row; } .form-question textarea { flex: 1; width: auto; } }

#bloc-tirage[hidden] { display: none; }
#bloc-tirage.carte-accueil { margin-top: .4rem; text-align: center; }
#bouton-tirer {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center; gap: .6rem; cursor: pointer;
}
#bouton-tirer:disabled { opacity: .5; }
.icone-tirer { font-size: 2.4rem; line-height: 1; }
#quota-tirage { text-align: center; }
.message-vide-tirage { text-align: center; color: #a0a0ad; padding: 1rem 0 .3rem; font-size: .95rem; }
#bloc-tirage .liste-decouverte { padding: var(--espace) 0 0; text-align: left; }
#liste[hidden] { display: none; }

.liste-decouverte { display: flex; flex-direction: column; gap: var(--espace); padding: var(--espace); }
.liste-decouverte h4 { margin: .6rem 0 0; font-size: .8rem; color: #8a8a95; text-transform: uppercase; letter-spacing: .02em; }
/* Carte item (01/09/2026) : même traitement que les liens de l'accueil (.carte-accueil-lien)
   plutôt qu'un simple fond plat — demande explicite "un bord comme celui des autres blocs de
   l'accueil", après suppression du cadre de fond de `.groupe-jour` qui rétrécissait chaque
   item par triple padding imbriqué (liste-decouverte + groupe-jour-contenu + carte-question). */
.carte-question {
  background: #26262f; border-radius: 8px; padding: var(--espace);
  border: 1px solid #38384470;
  /* Même convention d'éclairage que l'accueil (haut-droit), cf.
     files/convention-eclairage-haut-droite.md du projet. */
  box-shadow: inset 1px -1px 0 rgba(255, 255, 255, .08), -2px 3px 5px rgba(0, 0, 0, .35);
}
.carte-question .auteur { font-size: .8rem; color: #a0a0ad; margin-bottom: .3rem; }
.carte-question .texte-question { font-weight: 600; margin-bottom: .6rem; text-align: center; }
.bulle-reponse { background: #2c2c38; border-radius: 8px; padding: .6rem .75rem; margin-top: .4rem; }
.bulle-reponse .auteur { font-size: .75rem; color: #a0a0ad; margin-bottom: .2rem; }
.en-attente { font-size: .85rem; color: #a0a0ad; font-style: italic; }
.carte-question-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-bottom: .5rem; }
.badge-intensite, .badge-destinataire {
  display: inline-flex; align-items: center; gap: .25rem; font-size: 1rem; padding: .15rem .55rem;
  border-radius: 999px; background: #2c2c38; color: #d0d0d8;
}
.badge-icone { display: inline-block; width: 1.2em; text-align: center; }
.bouton-defi-fait {
  border: none; border-radius: 6px; padding: .55rem 1rem; background: #1f8a4c; color: #f0f0f0;
  font-weight: 600; margin-top: .6rem; cursor: pointer;
}

/* Surbrillance temporaire de l'élément visé par un deep-link de notification, cf.
   cibleElementDepuisUrl() dans common.js. */
.cible-notification { animation: pulse-cible-notification 2s ease-out 1; }
@keyframes pulse-cible-notification {
  0% { box-shadow: 0 0 0 3px rgba(220, 70, 70, .9); }
  100% { box-shadow: 0 0 0 3px rgba(220, 70, 70, 0); }
}

.recherche-decouverte { padding: 0 var(--espace) var(--espace); display: flex; flex-direction: column; gap: .5rem; }
.recherche-decouverte[hidden] { display: none; }
.recherche-decouverte input, .recherche-decouverte select {
  width: 100%; box-sizing: border-box; padding: .6rem .8rem; border-radius: 8px; border: 1px solid #2c2c38;
  background: #1f1f28; color: #f0f0f0; font-family: inherit; font-size: .95rem;
}
@media (min-width: 600px) {
  .recherche-decouverte { flex-direction: row; }
  .recherche-decouverte input { flex: 2; }
  .recherche-decouverte select { flex: 1; }
}

/* Plus de cadre de fond autour du groupe (01/09/2026, demande explicite) : seul le regroupement
   par jour (repli/dépli) est gardé, le fond #17171e + le double padding qu'il imposait à
   chaque carte enfant sont supprimés — .carte-question porte maintenant seule son propre bord
   (cf. plus haut), les items gagnent en largeur réelle. */
.groupe-jour summary { cursor: pointer; padding: .7rem 0; font-weight: 600; color: #d0d0d8; list-style: none; }
.groupe-jour summary::-webkit-details-marker { display: none; }
.groupe-jour summary::before { content: "▸ "; color: #8a8a95; }
.groupe-jour[open] summary::before { content: "▾ "; }
.groupe-jour-contenu { display: flex; flex-direction: column; gap: var(--espace); padding: 0 0 var(--espace); }

.form-reponse { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
.form-reponse textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 2.2rem; padding: .5rem;
  border-radius: 6px; border: 1px solid #2c2c38; background: #14141a; color: #f0f0f0; font-family: inherit;
}
.form-reponse button { border: none; border-radius: 6px; padding: .5rem .9rem; background: var(--accent); color: #fff; }
@media (min-width: 600px) { .form-reponse { flex-direction: row; } .form-reponse textarea { flex: 1; width: auto; } }

.choix-defi { display: flex; gap: .6rem; margin-top: .8rem; }
.bouton-choix {
  flex: 1; border-radius: 8px; padding: .9rem; background: #34343f; color: #f0f0f0;
  font-size: 1.05rem; font-weight: 600; cursor: pointer;
  border: 1px solid #46465270;
  /* Même style que les boutons de la TODO LIST (.carte-accueil-lien), mais fond plus clair :
     ce sont des choix actifs à cliquer, pas des liens de navigation. Même source de lumière
     (reflet haut-droit + ombre portée bas-gauche) que le reste de la page. */
  box-shadow: inset 1px -1px 0 rgba(255, 255, 255, .1), -2px 3px 5px rgba(0, 0, 0, .35);
}
.bouton-choix.selectionne {
  background: var(--accent); color: #fff;
  box-shadow: inset -1px 2px 3px rgba(0, 0, 0, .3);
}
.champ-precise {
  display: block; width: 100%; box-sizing: border-box; margin-top: .8rem; padding: .8rem .9rem;
  border-radius: 8px; border: 1px solid #2c2c38; background: #14141a; color: #f0f0f0; font-family: inherit; font-size: 1rem;
}
.bouton-envoyer-choix {
  display: block; width: 100%; box-sizing: border-box; margin-top: .6rem; border: none; border-radius: 8px;
  padding: .8rem; background: var(--accent); color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer;
  /* Même source de lumière (haut-droit) que le reste de la page, couleur d'accent conservée. */
  box-shadow: inset 1px -1px 0 rgba(255, 255, 255, .18), -2px 3px 5px rgba(0, 0, 0, .35);
}
.bouton-envoyer-choix:active { box-shadow: inset -1px 2px 3px rgba(0, 0, 0, .3); }
.bouton-envoyer-choix:disabled, .bouton-choix:disabled { opacity: .6; cursor: default; }

.form-tirage { display: flex; flex-direction: column; gap: .6rem; margin-top: .8rem; }
.form-tirage textarea, .form-tirage input[type="text"] {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 3.2rem; padding: .8rem .9rem;
  border-radius: 8px; border: 1px solid #2c2c38; background: #14141a; color: #f0f0f0; font-family: inherit; font-size: 1.05rem;
}
.form-tirage button {
  border: none; border-radius: 8px; padding: .8rem; background: var(--accent); color: #fff;
  font-size: 1rem; font-weight: 600; cursor: pointer;
  box-shadow: inset 1px -1px 0 rgba(255, 255, 255, .18), -2px 3px 5px rgba(0, 0, 0, .35);
}
.form-tirage button:active { box-shadow: inset -1px 2px 3px rgba(0, 0, 0, .3); }

.form-preuve { display: flex; flex-direction: column; gap: .6rem; margin-top: .8rem; }
.bouton-fichier {
  display: block; box-sizing: border-box; width: 100%; text-align: center; padding: .9rem;
  border-radius: 8px; border: 1px dashed #3a3a45; background: #14141a; color: #f0f0f0; font-size: .95rem; font-weight: 600;
}
.nom-fichier { display: block; font-size: .85rem; color: #a0a0ad; text-align: center; }
.form-preuve button {
  border: none; border-radius: 8px; padding: .9rem; background: var(--accent); color: #fff;
  font-size: 1.05rem; font-weight: 600; cursor: pointer;
  box-shadow: inset 1px -1px 0 rgba(255, 255, 255, .18), -2px 3px 5px rgba(0, 0, 0, .35);
}
.form-preuve button:active { box-shadow: inset -1px 2px 3px rgba(0, 0, 0, .3); }

/* Barre de progression d'envoi (upload photo/vidéo preuve de défi). */
.barre-progression-conteneur { display: flex; align-items: center; gap: .6rem; margin-top: .4rem; }
.barre-progression-conteneur[hidden] { display: none; }
.barre-progression-fond { flex: 1; height: .5rem; border-radius: 999px; background: #14141a; overflow: hidden; }
.barre-progression-remplissage { height: 100%; width: 0%; background: var(--accent); transition: width .15s ease; }
.texte-progression { font-size: .8rem; color: #a0a0ad; min-width: 3.2em; text-align: right; }
.barre-progression-conteneur.indetermine .barre-progression-remplissage { width: 30%; animation: barre-indeterminee 1.1s ease-in-out infinite; }
@keyframes barre-indeterminee {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(333%); }
}

.bandeau-confirmation {
  position: fixed; top: 1rem; left: 50%; transform: translateX(-50%);
  background: #1f8a4c; color: #fff; padding: .8rem 1.4rem; border-radius: 999px;
  font-weight: 600; font-size: .95rem; box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
  z-index: 9999; animation: bandeau-apparition .2s ease; text-align: center; max-width: calc(100% - 2rem);
}
@keyframes bandeau-apparition {
  from { opacity: 0; transform: translate(-50%, -.5rem); }
  to { opacity: 1; transform: translateX(-50%); }
}

/* Fil de commentaires (tirages/Q&R) — mêmes classes que les futurs cadeaux/souvenirs. */
.fil-commentaires { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid #2c2c38; }
.commentaires-titre { font-size: .8rem; color: #a0a0ad; margin-bottom: .3rem; }
.commentaires-liste { display: flex; flex-direction: column; gap: .3rem; }
.champ-cadeaux {
  width: 100%; box-sizing: border-box; padding: .7rem .8rem; border-radius: 8px; border: 1px solid #2c2c38;
  background: #14141a; color: #f0f0f0; font-family: inherit; font-size: 1rem;
}
.form-reponse-cadeau { display: flex; gap: .5rem; margin-top: .3rem; }
.form-reponse-cadeau input { flex: 1; }
.form-reponse-cadeau button {
  border: none; border-radius: 6px; padding: .5rem .9rem; background: var(--accent); color: #fff;
  box-shadow: inset 1px -1px 0 rgba(255, 255, 255, .18), -2px 3px 5px rgba(0, 0, 0, .35);
}
.form-reponse-cadeau button:active { box-shadow: inset -1px 2px 3px rgba(0, 0, 0, .3); }
.carte-cadeau-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-top: .3rem; }
.bouton-cadeau-supprimer { border: none; background: transparent; color: #e0645a; font-size: .85rem; cursor: pointer; padding: 0; }
.bouton-cadeau-modifier { border: none; background: transparent; color: #6ea8fe; font-size: .85rem; cursor: pointer; padding: 0; }

/* Boîte à cadeaux (03/09/2026) : photos/vidéos échangées + wishlist commune, porté depuis
   l'agrégateur vidéo. Même relief/lumière haut-droit que le reste de l'appli. */
.panneau-repliable { margin: 0 0 var(--espace); }
.panneau-repliable-toggle {
  display: flex; align-items: center; width: 100%; box-sizing: border-box; padding: .8rem 1rem;
  border-radius: 8px; background: #26262f; color: #f0f0f0; font-size: .95rem; font-weight: 600;
  cursor: pointer; border: 1px solid #38384470;
  box-shadow: inset 1px -1px 0 rgba(255, 255, 255, .08), -2px 3px 5px rgba(0, 0, 0, .35);
}
.panneau-repliable-toggle .chevron { margin-left: auto; transition: transform .15s ease; }
.panneau-repliable-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.panneau-repliable-corps {
  margin-top: .6rem; padding: 1rem; border-radius: 8px; background: #1c1c24; border: 1px solid #2c2c38;
  display: flex; flex-direction: column; gap: .6rem;
}
.panneau-repliable-corps[hidden] { display: none; }
.ligne-checkbox-cadeaux { display: flex; align-items: center; gap: .5rem; font-size: .92rem; }
.bouton-cadeaux-submit {
  border: none; border-radius: 8px; padding: .85rem; background: var(--accent); color: #fff;
  font-size: 1rem; font-weight: 600; cursor: pointer;
  box-shadow: inset 1px -1px 0 rgba(255, 255, 255, .18), -2px 3px 5px rgba(0, 0, 0, .35);
}
.bouton-cadeaux-submit:active { box-shadow: inset -1px 2px 3px rgba(0, 0, 0, .3); }
.bouton-cadeaux-submit:disabled { opacity: .6; cursor: default; }

.carte-cadeau {
  background: #1f1f28; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid #38384470;
  box-shadow: inset 1px -1px 0 rgba(255, 255, 255, .08), -2px 3px 5px rgba(0, 0, 0, .35);
}
.carte-cadeau-media { display: grid; grid-template-columns: repeat(2, 1fr); }
.carte-cadeau-media.media-unique { grid-template-columns: 1fr; }
.carte-cadeau-media img, .carte-cadeau-media video { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.carte-cadeau-media.media-unique img, .carte-cadeau-media.media-unique video { aspect-ratio: 16 / 9; }
.carte-cadeau-media [data-media-index] { position: relative; }
.carte-cadeau-media .plus-photos {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.3rem; font-weight: 700;
}
.carte-cadeau-corps { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.carte-cadeau-titre { font-weight: 600; }
.carte-cadeau-meta { font-size: .8rem; color: #a0a0ad; }
.carte-cadeau-commentaire { font-size: .9rem; color: #f0f0f0; background: #14141a; border-radius: 8px; padding: .6rem .7rem; }
.carte-cadeau-envoi-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .3rem; }
.carte-cadeau-envoi-actions label { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: #a0a0ad; }

.media-cache-pour-moi {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  aspect-ratio: 16 / 9; background: #14141a; color: #a0a0ad; font-size: .9rem; text-align: center; padding: 1rem;
}
.media-cache-pour-moi button {
  border: none; border-radius: 6px; padding: .5rem .9rem; background: #3a3a45; color: #f0f0f0; font-size: .85rem; cursor: pointer;
}

.visionneuse-overlay {
  position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .92);
  display: flex; align-items: center; justify-content: center;
}
.visionneuse-overlay[hidden] { display: none; }
.visionneuse-media { max-width: 92vw; max-height: 80vh; object-fit: contain; }
.visionneuse-fermer {
  position: absolute; top: 1rem; right: 1rem; border: none; border-radius: 8px; width: 2.4rem; height: 2.4rem;
  background: #1f1f28; color: #f0f0f0; font-size: 1.2rem; cursor: pointer;
}
.visionneuse-nav {
  position: absolute; top: 50%; transform: translateY(-50%); border: none; border-radius: 999px;
  width: 2.6rem; height: 2.6rem; background: rgba(31, 31, 40, .8); color: #fff; font-size: 1.6rem; cursor: pointer;
}
.visionneuse-prec { left: 1rem; }
.visionneuse-suiv { right: 1rem; }
.visionneuse-legende { position: absolute; bottom: 1.5rem; left: 1rem; right: 1rem; text-align: center; color: #f0f0f0; font-size: .9rem; }

.carte-wishlist {
  background: #1f1f28; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid #38384470;
  box-shadow: inset 1px -1px 0 rgba(255, 255, 255, .08), -2px 3px 5px rgba(0, 0, 0, .35);
}
.carte-wishlist img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #14141a; display: block; }
.carte-wishlist-corps { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.carte-wishlist-prix { font-weight: 700; color: #f5a623; }
.carte-wishlist-champ {
  width: 100%; box-sizing: border-box; padding: .5rem .6rem; border-radius: 6px; border: 1px solid #2c2c38;
  background: #14141a; color: #f0f0f0; font-family: inherit; font-size: .9rem;
}
.lien-externe { font-size: .85rem; color: #6ea8fe; word-break: break-all; }

/* Bordure "concerne cette personne" (01/09/2026) : liseré léger dans la couleur du profil
   concerné (moi ou le/la partenaire) — convention transversale à réutiliser partout où un
   élément (notification, carte, ligne...) se rapporte spécifiquement à une personne du
   couple, pas seulement le bloc Notifications de l'accueil qui l'a introduite. Toujours
   poser DEUX classes ensemble : `bordure-personne` + `bordure-{couleur}` (cf. common.js,
   fonction classesBordurePersonne("moi"|"autre")) — le sélecteur combiné ci-dessous (specificité
   0-2-0) gagne face aux `border` déjà posés par les composants existants sans recourir à
   `!important`, sauf cas futur avec un sélecteur encore plus spécifique (à surveiller). Bloc
   placé en toute fin de fichier par cohérence de lecture, la specificité suffit ici. */
.bordure-personne { border-left: 3px solid transparent; }
/* --bordure-personne-rgb : même valeur que border-left-color ci-dessous, exposée en variable
   pour être réutilisable ailleurs (ex. chenillard animé de .carte-question, plus bas) — base
   couleur toujours celle choisie en administration, jamais une valeur en dur. */
.bordure-personne.bordure-bleu   { --bordure-personne-rgb: var(--accent-bleu-rgb);   border-left-color: rgba(var(--accent-bleu-rgb), .5); }
.bordure-personne.bordure-rose   { --bordure-personne-rgb: var(--accent-rose-rgb);   border-left-color: rgba(var(--accent-rose-rgb), .5); }
.bordure-personne.bordure-violet { --bordure-personne-rgb: var(--accent-violet-rgb); border-left-color: rgba(var(--accent-violet-rgb), .5); }
.bordure-personne.bordure-orange { --bordure-personne-rgb: var(--accent-orange-rgb); border-left-color: rgba(var(--accent-orange-rgb), .5); }
.bordure-personne.bordure-rouge  { --bordure-personne-rgb: var(--accent-rouge-rgb);  border-left-color: rgba(var(--accent-rouge-rgb), .5); }
.bordure-personne.bordure-jaune  { --bordure-personne-rgb: var(--accent-jaune-rgb);  border-left-color: rgba(var(--accent-jaune-rgb), .5); }
.bordure-personne.bordure-cyan   { --bordure-personne-rgb: var(--accent-cyan-rgb);   border-left-color: rgba(var(--accent-cyan-rgb), .5); }
.bordure-personne.bordure-gris   { --bordure-personne-rgb: var(--accent-gris-rgb);   border-left-color: rgba(var(--accent-gris-rgb), .5); }

/* Clignotant doux (coquetterie, 02/09/2026) sur le bord coloré "concerne cette personne" :
   toute la longueur du bord respire ensemble entre .35 et 1 d'opacité. `--decalage-clignotant`
   (posé en style inline par élément, cf. app-index.js/app-decouverte.js) permet de désynchro-
   niser plusieurs blocs voisins de même couleur — sinon ils clignotent tous pile ensemble.
   Scopé à .carte-question et .carte-accueil-lien — pas les liens de menu/bulles qui partagent
   aussi .bordure-personne, où un liseré fixe reste plus lisible. */
.carte-question.bordure-personne, .carte-accueil-lien.bordure-personne {
  position: relative; overflow: hidden;
  border-left-color: transparent;
}
.carte-question.bordure-personne::before, .carte-accueil-lien.bordure-personne::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: rgb(var(--bordure-personne-rgb));
  animation: clignotant-bordure 2.6s ease-in-out infinite;
  animation-delay: var(--decalage-clignotant, 0s);
}
@keyframes clignotant-bordure {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}

/* Fond "concerne cette personne" (01/09/2026, même jour) : même convention que
   .bordure-personne ci-dessus mais en teinte de fond très légère, pour les bulles de réponse/
   commentaire — sur qui est l'AUTEUR de la bulle plutôt que sur qui doit encore agir. Remplace
   l'ancien fond vert fixe (.bulle-commentaire-moi) qui ignorait la vraie couleur du profil.
   Toujours poser DEUX classes ensemble : `fond-personne` + `fond-{couleur}` (cf. common.js,
   fonction classesFondPersonne("moi"|"autre")) ; spécificité combinée 0-2-0 pour gagner sans
   `!important` sur les fonds `.bulle-reponse`/`.bulle-commentaire` déjà posés (0-1-0). */
.fond-personne.fond-bleu   { background: rgba(var(--accent-bleu-rgb), .12); }
.fond-personne.fond-rose   { background: rgba(var(--accent-rose-rgb), .12); }
.fond-personne.fond-violet { background: rgba(var(--accent-violet-rgb), .12); }
.fond-personne.fond-orange { background: rgba(var(--accent-orange-rgb), .12); }
.fond-personne.fond-rouge  { background: rgba(var(--accent-rouge-rgb), .12); }
.fond-personne.fond-jaune  { background: rgba(var(--accent-jaune-rgb), .12); }
.fond-personne.fond-cyan   { background: rgba(var(--accent-cyan-rgb), .12); }
.fond-personne.fond-gris   { background: rgba(var(--accent-gris-rgb), .12); }

/* Cœur "qui a tiré la carte" (02/09/2026, Action ou Vérité) : même principe que
   .bordure-personne/.fond-personne, SVG coloré en plein (fill: currentColor) avec la couleur
   réelle choisie en administration — jamais un emoji cœur figé. Toujours poser DEUX classes
   ensemble : `coeur-personne` + `coeur-{couleur}` (cf. common.js, coeurPersonne). */
.icone-coeur-tirage {
  width: 1.05em; height: 1.05em; vertical-align: -.15em; fill: currentColor;
  /* Même source de lumière (haut-droit) que le reste de la page : léger relief. */
  filter: drop-shadow(-1px 2px 1.5px rgba(0, 0, 0, .4));
}
.coeur-personne.coeur-bleu   { color: rgb(var(--accent-bleu-rgb)); }
.coeur-personne.coeur-rose   { color: rgb(var(--accent-rose-rgb)); }
.coeur-personne.coeur-violet { color: rgb(var(--accent-violet-rgb)); }
.coeur-personne.coeur-orange { color: rgb(var(--accent-orange-rgb)); }
.coeur-personne.coeur-rouge  { color: rgb(var(--accent-rouge-rgb)); }
.coeur-personne.coeur-jaune  { color: rgb(var(--accent-jaune-rgb)); }
.coeur-personne.coeur-cyan   { color: rgb(var(--accent-cyan-rgb)); }
.coeur-personne.coeur-gris   { color: rgb(var(--accent-gris-rgb)); }