/* Drive.pkn — style de la maquette (PC d'abord ; version téléphone en bas du fichier, sous 768 px). */

:root {
  /* Réduction du site sur les petits écrans de PC (echelle.js) : vw et vh ne suivent pas le zoom, on utilise ceux-ci. */
  --vw: calc(1vw / var(--echelle, 1));
  --vh: calc(1vh / var(--echelle, 1));
  --fond: #f6f7f9;
  --surface: #ffffff;
  --texte: #1c1f24;
  --texte-doux: #6b7280;
  --bordure: #e3e6ea;
  --accent: #1f5f8b;
  --accent-clair: #e3eef6;
  --vis-fond: #0d0e10;
  --vis-texte: #e8eaed;
  --vis-doux: #9aa0a6;
  --rayon: 10px;
  --largeur: 1600px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texte);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); }
body.vis-ouverte { overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- Barre du haut ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
}
.topbar-inner {
  max-width: var(--largeur); margin: 0 auto; padding: 0 32px;
  height: 64px; display: flex; align-items: center; gap: 40px;
}
.logo { font-size: 1.35rem; font-weight: 700; color: var(--texte); text-decoration: none; letter-spacing: -0.01em; }
.logo span { color: var(--accent); }
.tabs { display: flex; gap: 4px; height: 100%; }
.tab {
  display: flex; align-items: center; gap: 6px;
  border: 0; background: none; padding: 0 16px; height: 100%;
  font-weight: 500; color: var(--texte-doux);
  border-bottom: 3px solid transparent;
}
.tab:hover { color: var(--texte); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.cadenas svg { width: 16px; height: 16px; }
.compte { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.compteur { color: var(--texte-doux); font-size: 0.9rem; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: var(--accent); color: #fff; font-weight: 600;
}

/* ---------- Grille ---------- */
.page { max-width: var(--largeur); margin: 0 auto; padding: 8px 32px 96px; }
.mois h2 {
  font-size: 1.15rem; font-weight: 600; margin: 32px 0 12px;
  display: flex; align-items: baseline; gap: 12px;
  transition: padding-left 0.15s ease;   /* au survol (PC) : glisse pour laisser la place à la coche */
}
/* PC seulement (≥ 768 px) : au survol du titre (ou quand le groupe est sélectionné), il se décale et la coche apparaît. */
@media (min-width: 768px) {
  .mois h2:hover,
  body.en-selection .mois h2,
  .mois h2:has(.coche-groupe.is-plein),
  .mois h2:has(.coche-groupe.is-partiel) { padding-left: 30px; }
}
.mois h2 span { font-size: 0.85rem; font-weight: 400; color: var(--texte-doux); }
.grille {
  display: grid; gap: 4px;
  grid-template-columns: repeat(auto-fill, minmax(var(--taille-vignette, 200px), 1fr));
}
.vignette {
  position: relative; aspect-ratio: 1; overflow: hidden;
  background: var(--bordure); cursor: pointer; outline: none;
  user-select: none;
}
.vignette img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.15s ease;
}
.vignette::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.35), transparent 35%);
  opacity: 0; transition: opacity 0.15s;
}
.vignette:hover::after, .vignette:focus-visible::after, .en-selection .vignette::after { opacity: 1; }
.vignette:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }

.coche {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  width: 24px; height: 24px; border-radius: 50%; padding: 0;
  display: grid; place-items: center;
  border: 2px solid #fff; background: rgba(0,0,0,0.15); color: transparent;
  opacity: 0; transition: opacity 0.15s;
}
.vignette:hover .coche, .vignette:focus-visible .coche, .en-selection .coche { opacity: 1; }
.coche:hover { color: #fff; }

.vignette.is-choisie { background: var(--accent-clair); outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 4px; }
.vignette.is-choisie img { transform: scale(0.86); border-radius: 6px; }
.vignette.is-choisie .coche { background: var(--accent); border-color: var(--accent); color: #fff; opacity: 1; }
.vignette.is-choisie::after { opacity: 0; }

/* Média rangé ailleurs depuis l'ouverture de la page (app.js, albumDepart) : estompé, étiquette du nouvel album. */
.vignette.is-partie img { opacity: 0.45; }
.etiquette-partie {
  position: absolute; top: 6px; left: 6px; z-index: 1; pointer-events: none;   /* sous la coche (survol) */
  max-width: calc(100% - 12px); padding: 2px 7px; border-radius: 6px;
  background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 0.72rem; font-weight: 600; line-height: 1.3;
  overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.vis-partie {
  margin-left: 12px; padding: 3px 10px; border-radius: 6px; min-width: 0;
  background: rgba(255, 255, 255, 0.12); color: var(--vis-texte); font-size: 0.85rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.badge-video {
  position: absolute; bottom: 8px; right: 8px;
  display: flex; align-items: center; gap: 4px;
  color: #fff; font-size: 0.8rem; font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
/* Petites vignettes : pastille ronde sombre au centre, ▶ seul (32 % de la vignette, entre 20 et 30 px). */
.vignettes-petites .badge-video {
  inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: clamp(20px, 32%, 30px); aspect-ratio: 1; border-radius: 50%;
  justify-content: center; gap: 0; background: rgba(0,0,0,0.45); text-shadow: none;
}
.vignettes-petites .badge-video svg { width: 55%; height: 55%; margin-left: 4%; }
.vignettes-petites .badge-video .duree { display: none; }
.vide { color: var(--texte-doux); text-align: center; margin-top: 80px; }

/* ---------- Barre de sélection ---------- */
.selection {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: 64px;
  display: flex; align-items: center; gap: 16px; padding: 0 32px;
  background: var(--accent); color: #fff;
}
.selection #selection-nb { font-weight: 600; font-size: 1.05rem; }
.selection .btn { margin-left: auto; }

.btn {
  border: 1px solid rgba(255,255,255,0.6); background: transparent; color: inherit;
  padding: 8px 16px; border-radius: 8px; font-weight: 500;
}
.btn:hover { background: rgba(255,255,255,0.15); }
.btn-icone {
  width: 40px; height: 40px; border: 0; border-radius: 50%; padding: 0;
  display: inline-grid; place-items: center;
  background: transparent; color: inherit; text-decoration: none;
}
.btn-icone:hover { background: rgba(255,255,255,0.15); }
.btn-icone.is-actif { background: rgba(255,255,255,0.2); }

/* ---------- Message temporaire ---------- */
.toast {
  position: fixed; bottom: 24px; left: 24px; z-index: 40;
  display: flex; align-items: center; gap: 24px;
  background: #2b2f36; color: #fff; padding: 14px 20px; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.toast button { border: 0; background: none; color: #8ec5ef; font-weight: 600; padding: 0; }

/* ---------- Onglet Privé (en attente) ---------- */
/* ---------- Onglet Privé ---------- */
.verrou { text-align: center; margin: 96px auto; max-width: 420px; }
.verrou h1 { margin: 12px 0 12px; font-size: 1.4rem; }
.verrou .auth-texte { margin-bottom: 24px; }
.verrou .auth-erreur { margin: 0 0 12px; }
.verrou .auth-form { margin-bottom: 16px; }
.verrou .lien { font-size: 0.9rem; margin-top: 8px; }
.verrou-icone { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--accent-clair); }
.verrou-icone svg { width: 36px; height: 36px; color: var(--accent); }

/* ---------- Visionneuse ---------- */
.visionneuse {
  position: fixed; inset: 0; z-index: 30;
  display: flex; flex-direction: column;
  background: var(--vis-fond); color: var(--vis-texte);
}
.vis-barre { height: 60px; flex: none; display: flex; align-items: center; gap: 16px; padding: 0 12px; }
.vis-titre { font-weight: 500; }
.vis-titre span { color: var(--vis-doux); margin-left: 8px; }
.vis-actions { margin-left: auto; display: flex; gap: 4px; }
.vis-corps { flex: 1; min-height: 0; display: flex; }
.vis-scene { flex: 1; min-width: 0; position: relative; display: flex; }
.vis-media { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 0 72px 24px; }
.vis-media img, .vis-media video { max-width: 100%; max-height: 100%; object-fit: contain; display: block; user-select: none; }
.vis-fleche {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 52px; height: 52px; border-radius: 50%; border: 0;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.08); color: var(--vis-texte);
}
.vis-fleche:hover { background: rgba(255,255,255,0.18); }
.vis-fleche:disabled { opacity: 0; pointer-events: none; }
.vis-prec { left: 12px; }
.vis-suiv { right: 12px; }

.vis-infos {
  width: 320px; flex: none; overflow-y: auto;
  padding: 8px 24px 24px; border-left: 1px solid #25282d;
}
.vis-infos h3 { font-size: 1rem; margin: 8px 0 16px; }
.vis-infos dl { margin: 0; display: grid; grid-template-columns: 96px 1fr; row-gap: 12px; column-gap: 12px; font-size: 0.9rem; }
.vis-infos dt { color: var(--vis-doux); }
.vis-infos dd { margin: 0; }
.vis-infos .fichier { word-break: break-all; }
.vis-position { color: var(--vis-doux); font-size: 0.85rem; margin-top: 24px; }

/* ---------- Mode Tri de la visionneuse (PC, tri.js, cadrage 3.16) ---------- */
.vis-centre { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.vis-scene { min-height: 0; }
.vis-bouton-tri { border: 0; border-radius: 8px; padding: 0 14px; height: 40px; background: transparent; color: var(--vis-texte); font-weight: 600; }
.vis-bouton-tri:hover { background: rgba(255, 255, 255, 0.1); }
.vis-bouton-tri.is-actif { background: var(--accent); }
.visionneuse.tri .vis-media { padding: 8px 64px; }   /* 8 px en haut : cadre bleu de la sélection visible (07/11/2026) */
.visionneuse.tri .vis-infos, .visionneuse.tri .vis-actions [data-action="infos"] { display: none; }   /* place au média ; les infos reviennent à la sortie du mode */
.vis-tri {
  width: 300px; flex: none; display: flex; flex-direction: column; min-height: 0;
  background: #16181b; border-right: 1px solid #25282d;
}
.tri-tete { padding: 10px 12px 8px; display: flex; flex-direction: column; gap: 8px; }
.tri-compte { display: flex; align-items: center; gap: 8px; height: 26px; font-weight: 600; }
.tri-tete.vide .tri-compte { color: var(--vis-doux); font-weight: 400; }
.tri-tete.vide .tri-vider { display: none; }
.tri-vider { margin-left: auto; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.tri-vider:hover { background: rgba(255, 255, 255, 0.18); }
.tri-ligne { display: flex; gap: 6px; }
.tri-champ { width: 100%; min-width: 0; border: 1px solid #33373c; background: #0f1113; color: var(--vis-texte); border-radius: 8px; padding: 8px 10px; font: inherit; }
.tri-champ:focus { outline: 2px solid #3b8fd0; border-color: transparent; }
.tri-plus { flex: none; width: 38px; border: 1px solid #33373c; background: #0f1113; border-radius: 8px; font-size: 1.25rem; line-height: 1; }
.tri-plus:hover, .tri-plus.is-actif { background: var(--accent); border-color: var(--accent); }
.tri-erreur { margin: 4px 0 0; color: #f08a80; font-size: 0.8rem; }
/* Liste : défile à la molette, sans barre de défilement (demande de Jerel). */
.tri-liste { flex: 1; min-height: 0; overflow-y: auto; position: relative; overflow-anchor: none; margin: 0; padding: 2px 6px 10px; list-style: none; scrollbar-width: none; }
.tri-liste::-webkit-scrollbar { display: none; }
.tri-album { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px; cursor: pointer; user-select: none; position: relative; }
.tri-album:hover { background: rgba(255, 255, 255, 0.06); }
.tri-num { width: 22px; height: 22px; flex: none; border-radius: 6px; display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; }
.tri-num.touche { background: var(--accent); color: #fff; }
.tri-couv { width: 44px; height: 44px; flex: none; border-radius: 6px; overflow: hidden; background: #2a2e33; }
.tri-couv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tri-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tri-nom > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tri-nom small { font-size: 0.75rem; color: var(--vis-doux); }
.tri-nb { font-size: 0.78rem; color: var(--vis-doux); }
.tri-album.actuel .tri-nom > span::after { content: " · ici"; color: var(--vis-doux); }
.tri-album.choisi { background: rgba(59, 143, 208, 0.18); box-shadow: inset 0 0 0 2px #3b8fd0; }
.tri-album.tri-envoye { animation: tri-envoye 0.6s; }   /* pas « envoi » : déjà la carte d'envoi de la page Synchro */
@keyframes tri-envoye { from { background: var(--accent); } to { background: transparent; } }
/* Glisser (tri.js) : l'album suit la souris, les autres glissent vers leur future place, barre bleue au point de dépôt. */
.tri-liste.en-glisse .tri-album:not(.glisse) { transition: transform 0.15s ease-out; }
.tri-album.glisse { z-index: 2; background: #2a2e33; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); opacity: 0.9; }
body.tri-glisse, body.tri-glisse * { cursor: grabbing !important; }
.tri-barre { position: absolute; left: 12px; right: 12px; top: 0; height: 3px; border-radius: 2px; background: #3b8fd0; pointer-events: none; z-index: 3; transition: transform 0.15s ease-out; }
/* Coche du média affiché et cadre bleu quand il est sélectionné (zoom et lecture inchangés). */
.tri-coche { display: none; }
.visionneuse.tri .tri-coche {
  display: grid; place-items: center; position: absolute; top: 10px; right: 14px; z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.4); color: #fff; transition: transform 0.12s, background 0.12s;
}
.tri-coche:hover { transform: scale(1.08); }
.tri-coche svg { width: 24px; height: 24px; opacity: 0; }
.tri-coche span { position: absolute; right: -6px; bottom: -6px; font-size: 0.7rem; background: rgba(0, 0, 0, 0.8); border-radius: 4px; padding: 0 4px; }
.visionneuse.tri-choisi .tri-coche { background: #3b8fd0; border-color: #3b8fd0; }
.visionneuse.tri-choisi .tri-coche svg { opacity: 1; }
.visionneuse.tri-choisi:not(.est-video) .vis-media > img { box-shadow: 0 0 0 4px #3b8fd0; }
.visionneuse.tri-choisi.est-video .vis-scene::after { content: ""; position: absolute; inset: 0; border: 4px solid #3b8fd0; border-radius: 4px; pointer-events: none; z-index: 2; }
.vis-tri-bande { flex: none; height: 76px; display: flex; align-items: center; gap: 6px; padding: 0 16px 10px; overflow-x: auto; scrollbar-width: none; }
.vis-tri-bande::-webkit-scrollbar { display: none; }
.vis-tri-bande img { width: 60px; height: 60px; flex: none; object-fit: cover; border-radius: 6px; cursor: pointer; outline: 2px solid transparent; outline-offset: 1px; }
.vis-tri-bande img.ici { outline-color: #3b8fd0; }
.tri-bande-vide { color: var(--vis-doux); font-size: 0.85rem; }
body.en-tri .toast { left: 324px; }

/* ---------- Lecteur vidéo (lecteur.js) ---------- */
.lecteur {
  position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; outline: none; background: transparent;
}
.lecteur video { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.vis-media:fullscreen { background: #000; padding: 0; }
.lecteur.sans-curseur { cursor: none; }
.lecteur-barre { position: relative; height: 22px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.lecteur-piste { position: relative; flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); transition: height 0.12s; }
.lecteur-barre:hover .lecteur-piste, .lecteur.defile .lecteur-piste { height: 6px; }
.lecteur-charge, .lecteur-joue { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; }
.lecteur-charge { background: rgba(255, 255, 255, 0.4); }
.lecteur-joue { background: var(--accent); }
.lecteur-curseur {
  position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--accent);
  transform: translate(-50%, -50%); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.25);
}
.lecteur-apercu {
  position: absolute; bottom: 26px; transform: translateX(-50%); z-index: 3; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.lecteur-image { border: 2px solid #fff; border-radius: 6px; background-color: #000; background-repeat: no-repeat; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); }
.lecteur-moment { font-size: 0.85rem; font-weight: 600; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.lecteur-temps { font-size: 0.85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ±10 s : rappel bref du côté touché */
.lecteur-saut {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 22px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.4); color: #fff; font-weight: 600; font-size: 0.9rem; animation: fondu-saut 0.7s ease-out forwards;
}
.lecteur-saut[hidden] { display: none; }
.lecteur-saut.gauche { left: 12%; }
.lecteur-saut.droite { right: 12%; }
@keyframes fondu-saut { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Interface du lecteur (08/10/2026 : téléphone, puis PC) ----------
   Bulle en bas au centre (temps, puis favori, éditer, son, lecture, corbeille ; PC : plein écran), ⚙ en bas à droite,
   capture en haut à gauche (barre de la visionneuse ; dans le lecteur en plein écran). Barre de durée : au téléphone
   (classe .mobile) seulement pendant l'appui long ; au PC, avec l'interface. */
.vis-capture, .vis-plus, .lecteur-capture { display: none; }
.visionneuse.est-video .vis-capture { display: inline-grid; }
.lecteur.mobile .seulement-pc { display: none; }
.lecteur-bas {
  display: flex; justify-content: center; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0 12px calc(16px + env(safe-area-inset-bottom)); pointer-events: none; color: #fff;
  transition: opacity 0.22s, transform 0.22s ease-out;
}
.lecteur-bulle, .lecteur-reglages-zone { pointer-events: auto; }
.ui-masquee .lecteur-bas { opacity: 0; transform: translateY(14px); }
.ui-masquee .lecteur-bas * { pointer-events: none; }
.lecteur-bulle, .lecteur-reglages-zone > .btn-icone, .lecteur-reglages, .lecteur-capture, .lecteur-message {
  background: rgba(22, 24, 28, 0.58); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}
.lecteur-bulle { display: flex; flex-direction: column; align-items: center; padding: 5px 8px 4px; border-radius: 24px; transition: transform 0.25s; }
.lecteur-bulle .lecteur-temps { margin: 0; font-size: 0.7rem; font-weight: 500; opacity: 0.85; letter-spacing: 0.02em; }
.lecteur-bulle-boutons { display: flex; gap: 2px; }
.lecteur-bulle .btn-icone { width: 44px; height: 42px; border-radius: 21px; color: #fff; }
.lecteur-bulle .btn-icone svg { width: 25px; height: 25px; }
.lecteur-bulle .btn-icone.is-favori { color: #ffd24a; }
.lecteur-reglages-zone { position: absolute; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); }
.lecteur-reglages-zone > .btn-icone { width: 46px; height: 46px; border-radius: 50%; color: #fff; }
.lecteur-reglages {
  position: absolute; right: 0; bottom: 56px; width: 250px; padding: 6px; border-radius: 16px; color: #fff;
  transform-origin: bottom right; animation: reglages-ouvre 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.lecteur-reglages[hidden] { display: none; }
@keyframes reglages-ouvre { from { opacity: 0; transform: scale(0.85) translateY(8px); } }
.lecteur-ligne {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 10px;
  background: none; color: inherit; font: inherit; font-size: 0.92rem; text-align: left;
}
.lecteur-ligne span { flex: 1; white-space: nowrap; }
.lecteur-ligne:active, .lecteur-vitesses-liste button:active { background: rgba(255, 255, 255, 0.1); }
.lecteur-ligne.is-actif { background: rgba(255, 255, 255, 0.12); }
.lecteur-coche { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; transform: scale(0); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.lecteur-coche svg { width: 14px; height: 14px; stroke-width: 2.6; }
.is-actif > .lecteur-coche { transform: scale(1); }
.lecteur-vitesse-choisie { font-weight: 600; font-size: 0.88rem; opacity: 0.9; }
.lecteur-chevron { display: grid; transition: transform 0.2s; }
[aria-expanded="true"] > .lecteur-chevron { transform: rotate(180deg); }
.lecteur-vitesses-liste { margin: 2px 4px 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); animation: liste-deroule 0.2s ease-out; transform-origin: top; }
.lecteur-vitesses-liste[hidden] { display: none; }
@keyframes liste-deroule { from { opacity: 0; transform: scaleY(0.7); } }
.lecteur-vitesses-liste button {
  display: flex; align-items: center; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px;
  background: none; color: #fff; font: inherit; font-size: 0.9rem; text-align: left;
}
.lecteur-vitesses-liste button span { flex: 1; }
.lecteur-vitesses-liste button.is-actif { font-weight: 600; }
/* Barre de durée : au-dessus de la bulle, seulement pendant l'appui long ; elle se déploie depuis le centre. */
.lecteur-bas .lecteur-barre {
  position: absolute; left: 18px; right: 18px; bottom: calc(100% + 16px); height: 24px; pointer-events: none;
  opacity: 0; transform: translateY(18px) scaleX(0.35); transition: opacity 0.18s, transform 0.22s ease-in;
}
.lecteur.defile .lecteur-barre, .lecteur:not(.mobile) .lecteur-barre { opacity: 1; transform: none; transition: opacity 0.2s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ui-masquee .lecteur:not(.mobile):not(.defile) .lecteur-barre { opacity: 0; transform: translateY(18px) scaleX(0.35); transition: opacity 0.18s, transform 0.22s ease-in; }
/* PC : la barre se vise à la souris (survol = aperçu, clic ou glisser = déplacement), le curseur grossit au survol. */
.lecteur:not(.mobile) .lecteur-barre { pointer-events: auto; cursor: pointer; }
.lecteur:not(.mobile) .lecteur-curseur { transform: translate(-50%, -50%) scale(0.75); }
.lecteur:not(.mobile) .lecteur-barre:hover .lecteur-curseur { transform: translate(-50%, -50%) scale(1); }
.lecteur:not(.mobile) .lecteur-barre:hover .lecteur-piste { height: 8px; }
.lecteur:not(.mobile) .lecteur-bulle .btn-icone:hover, .lecteur:not(.mobile) .lecteur-reglages-zone > .btn-icone:hover { background: rgba(255, 255, 255, 0.14); }
.lecteur:not(.mobile) .lecteur-ligne:hover, .lecteur:not(.mobile) .lecteur-vitesses-liste button:hover { background: rgba(255, 255, 255, 0.08); }
.lecteur:not(.mobile) .lecteur-ligne, .lecteur:not(.mobile) .lecteur-vitesses-liste button { cursor: pointer; }
.lecteur:not(.mobile) .lecteur-annonce { top: 16px; }
.lecteur-bas .lecteur-piste { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.28); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); }
.lecteur-bas .lecteur-curseur { width: 18px; height: 18px; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25), 0 2px 8px rgba(0, 0, 0, 0.4); transform: translate(-50%, -50%) scale(0); transition: transform 0.3s 0.12s cubic-bezier(0.34, 1.56, 0.64, 1); }
.lecteur.defile .lecteur-bas .lecteur-curseur { transform: translate(-50%, -50%) scale(1); }
.lecteur.mobile.defile .lecteur-bulle { transform: scale(0.95); }
.lecteur-bas .lecteur-apercu { bottom: 30px; animation: apercu-apparait 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.lecteur-bas .lecteur-image { border-radius: 10px; border-width: 2px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); }
.lecteur-bas .lecteur-moment { padding: 2px 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.55); text-shadow: none; }
@keyframes apercu-apparait { from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.6); } }
/* Plein écran : la barre de la visionneuse n'y est pas ; capture dans le lecteur. */
:fullscreen .lecteur .lecteur-capture {
  display: grid; position: absolute; top: 12px; left: 12px; z-index: 3; width: 46px; height: 46px; border-radius: 50%; color: #fff; transition: opacity 0.22s;
}
.ui-masquee :fullscreen .lecteur .lecteur-capture { opacity: 0; pointer-events: none; }
.lecteur-message {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 4; padding: 8px 16px; border-radius: 18px;
  color: #fff; font-size: 0.9rem; white-space: nowrap; pointer-events: none; animation: message-lecteur 2.2s ease forwards;
}
.lecteur-message[hidden] { display: none; }
/* Annonce d'une image enregistrée : flash, vol de l'image jusqu'à la vignette, carte qui descend avec un rebond. */
.lecteur-flash { position: absolute; inset: 0; z-index: 6; background: #fff; pointer-events: none; animation: flash-capture 0.45s ease-out forwards; }
@keyframes flash-capture { 0% { opacity: 0.85; } 100% { opacity: 0; } }
.annonce-vol { position: absolute; z-index: 7; pointer-events: none; object-fit: cover; }
.lecteur-annonce {
  position: absolute; top: calc(66px + env(safe-area-inset-top)); left: 50%; z-index: 6; width: min(340px, calc(100% - 24px));
  display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 22px; color: #fff;
  background: linear-gradient(135deg, rgba(40, 44, 52, 0.82), rgba(18, 20, 24, 0.82));
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateX(-50%); animation: annonce-entre 0.6s 0.12s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
:fullscreen .lecteur .lecteur-annonce { top: 16px; }
.lecteur-annonce.sort { animation: annonce-sort 0.35s ease-in forwards; }
@keyframes annonce-entre { from { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.9); } }
@keyframes annonce-sort { to { opacity: 0; transform: translateX(-50%) translateY(-24px) scale(0.94); } }
.annonce-vignette { position: relative; flex: none; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
.annonce-vignette canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.annonce-vignette.vide canvas { opacity: 0; }
.annonce-vignette.pose { animation: vignette-pose 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes vignette-pose { 40% { transform: scale(1.12); } }
.annonce-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.annonce-texte strong { display: flex; align-items: center; gap: 7px; font-size: 0.93rem; font-weight: 600; white-space: nowrap; min-width: 0; }
.annonce-titre { overflow: hidden; text-overflow: ellipsis; }
.annonce-ok, .annonce-roue { flex: none; }
.annonce-texte small { font-size: 0.8rem; opacity: 0.72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.annonce-texte small:empty { display: none; }
.annonce-roue { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; animation: roue 0.7s linear infinite; }
.lecteur-annonce:not(.attente) .annonce-roue { display: none; }
@keyframes roue { to { transform: rotate(360deg); } }
.annonce-ok { display: none; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #2fbf71; color: #fff; }
.annonce-ok svg { width: 12px; height: 12px; stroke-width: 3; stroke-dasharray: 24; stroke-dashoffset: 24; animation: trait-coche 0.4s 0.15s ease-out forwards; }
.lecteur-annonce.faite .annonce-ok { display: grid; animation: coche-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.lecteur-annonce.ratee { border-color: rgba(255, 120, 110, 0.5); }
.lecteur-annonce.ratee .annonce-titre { color: #ff9b93; }
@keyframes coche-pop { from { transform: scale(0); } }
@keyframes trait-coche { to { stroke-dashoffset: 0; } }
.annonce-voir {
  flex: none; border: 0; border-radius: 16px; padding: 8px 16px; background: #fff; color: #111; font: inherit; font-size: 0.88rem; font-weight: 600;
  animation: coche-pop 0.35s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.annonce-voir:active { transform: scale(0.95); }

/* Téléphone couché (plus large que 767 px) : visionneuse bord à bord comme en portrait, même sans plein écran. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 768px) {
  .vis-barre {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: auto; gap: 2px;
    padding: calc(4px + env(safe-area-inset-top)) calc(4px + env(safe-area-inset-right)) 14px calc(4px + env(safe-area-inset-left));
    background: linear-gradient(rgba(0, 0, 0, 0.6), transparent); transition: opacity 0.2s;
  }
  .ui-masquee .vis-barre { opacity: 0; pointer-events: none; }
  .vis-titre { visibility: hidden; }
  .vis-actions > :not(.vis-plus) { display: none; }
  .vis-plus, .visionneuse.est-video .vis-capture { display: grid; }
  .vis-corps { position: relative; }
  .vis-media { padding: 0; }
  .vis-fleche { display: none; }
}
/* Menu ⋯ de la visionneuse : sombre, comme elle ; au doigt, pas de fond « survolé » qui reste après un toucher. */
.vis-ouverte .menu-contextuel { background: #1b1d21; border-color: #2c2f35; color: #e8eaed; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.vis-ouverte .menu-contextuel button { color: inherit; }
.vis-ouverte .menu-contextuel button:hover { background: rgba(255, 255, 255, 0.08); }
.vis-ouverte .menu-contextuel .danger { color: #ff8a80; }
@media (hover: none) { .visionneuse .btn-icone:hover { background: transparent; } }
@keyframes message-lecteur { 0% { opacity: 0; transform: translate(-50%, -8px); } 10%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* ---------- Connexion (auth.js) ---------- */
.hors-session .topbar, .hors-session .page { display: none; }
.auth {
  min-height: calc(100 * var(--vh)); padding: 48px 16px 96px;
  display: flex; align-items: center; justify-content: center;
}
.auth-carte {
  width: 100%; max-width: 420px;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 14px;
  padding: 36px 36px 32px; box-shadow: 0 8px 30px rgba(20, 30, 45, 0.06);
}
.auth-logo { font-size: 1.5rem; font-weight: 700; text-align: center; letter-spacing: -0.01em; margin-bottom: 20px; }
.auth-logo span { color: var(--accent); }
.auth-etape { text-align: center; color: var(--accent); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin: -8px 0 12px; }
.auth-carte h1 { font-size: 1.25rem; text-align: center; margin: 0 0 20px; }
.auth-texte { color: var(--texte-doux); line-height: 1.5; margin: 0 0 18px; }
.auth-texte strong { color: var(--texte); }
.auth-texte.petit { font-size: 0.85rem; margin-bottom: 8px; }

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; font-weight: 500; }
.auth-form label small { color: var(--texte-doux); font-weight: 400; }
.auth-form input:not([type="checkbox"]), .champ-secours {
  font: inherit; font-weight: 400; width: 100%;
  padding: 11px 12px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--surface);
}
.auth-form input:focus, .code-cases input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.champ-mdp { position: relative; display: block; }
.champ-mdp input { padding-right: 44px !important; }
.oeil {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; background: none; color: var(--texte-doux);
  display: grid; place-items: center; border-radius: 6px;
}
.oeil:hover { color: var(--texte); }
.champ-secours { text-align: center; font-family: ui-monospace, monospace; font-size: 1.15rem; letter-spacing: 0.1em; }

.auth-erreur { margin: 0; color: #b42318; background: #fef3f2; border-radius: 8px; padding: 10px 12px; font-size: 0.9rem; }
.btn-principal {
  border: 0; border-radius: 8px; padding: 12px 16px; width: 100%;
  background: var(--accent); color: #fff; font-weight: 600;
}
.btn-principal:hover { filter: brightness(1.1); }
.btn-principal:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }
.btn-secondaire {
  border: 1px solid var(--bordure); background: var(--surface); border-radius: 8px;
  padding: 8px 14px; font-weight: 500; white-space: nowrap;
}
.btn-secondaire:hover { background: var(--fond); }
.lien { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 500; }
.lien:hover { text-decoration: underline; }
.auth-liens { display: flex; justify-content: space-between; margin-top: 20px; font-size: 0.9rem; }
.case { display: flex; align-items: center; gap: 10px; margin: 16px 0; font-size: 0.9rem; cursor: pointer; }
.case input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }

.code-cases { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; }
.code-cases input {
  width: 48px; height: 58px; text-align: center; font: inherit; font-size: 1.6rem; font-weight: 600;
  border: 1px solid var(--bordure); border-radius: 8px;
}
.code-cases input:nth-child(3) { margin-right: 10px; }
.code-cases + .auth-erreur { margin-bottom: 4px; }
.secoue { animation: secoue 0.35s; }
@keyframes secoue { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.auth-consignes { margin: 0 0 18px; padding-left: 20px; color: var(--texte-doux); line-height: 1.7; }
.auth-consignes strong { color: var(--texte); }
.qr { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 18px; }
.qr svg { border: 1px solid var(--bordure); border-radius: 8px; }
.qr-factice { font-size: 0.75rem; color: #b42318; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.cle-totp {
  font-family: ui-monospace, monospace; text-align: center; font-size: 1rem; letter-spacing: 0.05em;
  background: var(--fond); border-radius: 8px; padding: 10px; margin: 0 0 22px; user-select: all;
}
.codes-secours {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px;
  margin: 0 0 18px; padding: 16px 16px 16px 40px; background: var(--fond); border-radius: 8px;
  font-family: ui-monospace, monospace; font-size: 1rem;
}
.codes-secours li::marker { color: var(--texte-doux); font-size: 0.8rem; }
/* Première configuration sur téléphone : lien vers l'appli d'authentification, clé à copier, QR code replié */
.bouton-lien { display: block; text-align: center; text-decoration: none; margin-bottom: 14px; }
.btn-secondaire.large { display: block; width: 100%; margin: -12px 0 14px; }
.qr-autre { margin: 0 0 18px; font-size: 0.85rem; color: var(--texte-doux); }
.qr-autre summary { cursor: pointer; margin-bottom: 10px; }
.qr svg { width: 200px; height: 200px; }
/* Administration */
.auth-form label.case { flex-direction: row; font-weight: 400; margin: 0; }
.champ-avec-bouton { display: flex; gap: 8px; }
.champ-avec-bouton input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; }
.champ-code { font-family: ui-monospace, monospace; letter-spacing: 0.2em; max-width: 160px; }
.comptes-admin { margin-top: 16px; }
.comptes-admin li { flex-wrap: wrap; }

/* ---------- Menu du compte ---------- */
.compte { position: relative; }
.menu-compte {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 25; width: 280px;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(20, 30, 45, 0.14); padding: 8px;
}
.menu-tete { display: flex; align-items: center; gap: 12px; padding: 10px 10px 14px; border-bottom: 1px solid var(--bordure); margin-bottom: 6px; }
.menu-tete small { display: block; color: var(--texte-doux); font-size: 0.8rem; }
/* Stockage (menu du compte) */
.menu-stockage { padding: 4px 10px 12px; border-bottom: 1px solid var(--bordure); margin-bottom: 6px; }
.menu-stockage p { font-size: 0.8rem; color: var(--texte-doux); margin: 0 0 6px; }
.stockage-barre { height: 6px; border-radius: 3px; background: var(--bordure); overflow: hidden; }
.stockage-barre span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width 0.3s; }
.menu-stockage.alerte .stockage-barre span { background: #e8912d; }
/* La barre ouvre la page Stockage : bouton sans apparence de bouton (règle plus précise que .menu-compte button) */
.menu-compte button.menu-stockage { display: block; width: 100%; text-align: left; border-radius: 0; background: none; cursor: pointer;
  padding: 4px 10px 12px; border-bottom: 1px solid var(--bordure); margin-bottom: 6px; }
.menu-compte button.menu-stockage:hover p { color: var(--accent); }
.avatar.petit { width: 32px; height: 32px; display: grid; place-items: center; flex: none; }
.avatar { overflow: hidden; padding: 0; }
.avatar img, .mc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }   /* photo de profil */
.menu-compte button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: 0; background: none; padding: 10px; border-radius: 8px; text-align: left;
}
.menu-compte button:hover { background: var(--fond); }
.menu-compte button svg { color: var(--texte-doux); }

/* ---------- Fenêtre modale ---------- */
.modale {
  position: fixed; inset: 0; z-index: 35; padding: 24px;
  background: rgba(15, 20, 28, 0.45);
  display: flex; align-items: center; justify-content: center;
}
.modale-carte {
  width: 100%; max-width: 520px; max-height: 100%; overflow-y: auto;
  background: var(--surface); border-radius: 14px; padding: 24px 28px 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.modale-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modale-tete h2 { font-size: 1.15rem; margin: 0; }
.btn-icone.sombre:hover { background: var(--fond); }
/* Liste de l'Administration (classe .appareils) */
.appareils { list-style: none; margin: 0; padding: 0; }
.appareils li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--bordure); }
.appareils li > div { flex: 1; min-width: 0; }
.appareils small { display: block; color: var(--texte-doux); font-size: 0.85rem; margin-top: 2px; }
.appareils em { font-style: normal; font-size: 0.75rem; color: var(--accent); background: var(--accent-clair); padding: 2px 8px; border-radius: 10px; margin-left: 6px; }
.appareil-icone { width: 40px; height: 40px; border-radius: 50%; background: var(--fond); display: grid; place-items: center; color: var(--texte-doux); flex: none; }

/* ---------- Page « Mon compte » (vue #view-compte, thème « compte ») ----------
   PC : toute la largeur de .page (comme Synchro et Photos) ; en-tête sur toute la largeur, puis grille 2 × 2 de cartes
   toujours ouvertes (Profil, Mot de passe, Codes de secours, Appli d'authentification). Téléphone : une colonne. */
.onglet-compte .compteur, .onglet-compte #crayon { display: none; }   /* pas dans Personnaliser pour l'instant */
.mon-compte { width: 100%; margin: 20px 0 0; padding-bottom: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.mc-carte {
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 16px;
  padding: 22px 26px 26px; box-shadow: 0 1px 3px rgba(20, 30, 45, 0.04); min-width: 0;
}
.mon-compte input { color: var(--texte); }
/* Zone sensible (évolution 9) : sur toute la largeur, en bas ; boutons rouges. */
.mc-sensible { border-color: #f1c7c7; }   /* PC : sous « Codes de secours » (colonne de gauche) */
.mc-sensible h2 { color: #b42318; margin: 0 0 8px; font-size: 1.05rem; }
.mc-sensible-ligne { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--bordure); }
.mc-sensible-ligne:first-of-type { border-top: 0; }
.mc-sensible-ligne > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mc-sensible-ligne small { color: var(--texte-doux); font-size: 0.85rem; }
.btn-danger { flex: none; border: 1px solid #d92d20; color: #b42318; background: transparent; border-radius: 8px; padding: 8px 16px; font-weight: 600; cursor: pointer; }
.btn-danger:hover { background: #fef3f2; }
@media (max-width: 767px) { .mc-sensible-ligne { flex-direction: column; align-items: stretch; gap: 10px; } }   /* texte saisi lisible sur les thèmes foncés */
/* En-tête de profil */
.mc-entete { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; padding: 26px; }
.mc-avatar {
  width: 76px; height: 76px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 2rem; font-weight: 600;
}
.mc-identite { min-width: 0; }
.mc-nom { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.mc-nom h1 { font-size: 1.5rem; margin: 0; overflow-wrap: anywhere; }
.mc-badge { font-size: 0.75rem; font-weight: 600; color: var(--accent); background: var(--accent-clair); padding: 3px 10px; border-radius: 999px; }
.mc-identite p { margin: 4px 0 0; color: var(--texte-doux); font-size: 0.9rem; }
/* Page « Appareils » (appareils.js) : une liste, une ligne par appareil (pas de cartes, choix de Jerel) */
.ap-entete { grid-column: 1 / -1; }
.ap-entete h1 { font-size: 1.5rem; margin: 0 0 6px; }
.ap-entete p { margin: 0; color: var(--texte-doux); }
.ap-liste-carte { grid-column: 1 / -1; padding: 0; background: none; border: 0; box-shadow: none; }
.ap-liste { list-style: none; margin: 0; padding: 0; }
/* Un élément = la ligne (fond, bordures, coins arrondis en haut et en bas de la liste) + l'icône de déconnexion à droite, dehors */
.ap-element { display: flex; align-items: flex-start; gap: 10px; }
.ap-element .ap-ligne { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--bordure); border-top: 0; }
.ap-element:first-child .ap-ligne { border-top: 1px solid var(--bordure); border-top-left-radius: 16px; border-top-right-radius: 16px; }
.ap-element:last-child .ap-ligne { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
.ap-sortir { width: 40px; height: 40px; flex: none; color: var(--texte-doux); margin-top: 21px; }   /* à hauteur de la ligne, même dépliée */
.ap-sortir:hover { color: #c0392b; background: #fdecea; }
.ap-ligne {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, auto) 32px; align-items: center; gap: 18px;
  padding: 16px 24px;
}
.ap-element .ap-ligne.ap-courant {   /* appareil utilisé : bien visible (en premier dans la liste) */
  background: color-mix(in srgb, var(--accent-clair) 70%, var(--surface));
  box-shadow: inset 0 0 0 2px var(--accent), inset 6px 0 0 var(--accent);
}
.ap-courant .mc-icone { background: var(--accent); color: #fff; }
.ap-courant .ap-nom strong { font-size: 1.05rem; }
.ap-titre { min-width: 0; }
.ap-nom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ap-nom strong { font-weight: 600; overflow-wrap: anywhere; }
.ap-detail { display: block; color: var(--texte-doux); font-size: 0.85rem; margin-top: 3px; overflow-wrap: anywhere; }
.ap-renommer { color: var(--texte-doux); width: 30px; height: 30px; }
.ap-renommer svg { width: 16px; height: 16px; }
.ap-renommer:hover { color: var(--accent); }
.ap-form-nom { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.ap-form-nom input { flex: 1 1 180px; padding: 7px 10px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--surface); color: var(--texte); font: inherit; }
.ap-form-nom button { width: auto; }
.ap-badge { font-size: 0.72rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--fond); color: var(--texte-doux); border: 1px solid var(--bordure); }
.ap-badge.appli { background: var(--accent-clair); color: var(--accent); border-color: transparent; }
.ap-badge.courant { background: var(--accent); color: #fff; border-color: transparent; }
/* Type de connexion : icône (appli + version, ou web) */
.ap-type { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; flex: none; }
.ap-type svg { width: 14px; height: 14px; }
.ap-type.appli svg { width: 16px; height: 16px; border-radius: 4px; }
.ap-type.appli { background: var(--accent-clair); color: var(--accent); }
.ap-type.web { background: var(--fond); color: var(--texte-doux); border: 1px solid var(--bordure); padding: 0 5px; }
/* Scan automatique, dans la ligne */
.ap-auto { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.ap-interrupteur { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ap-interrupteur input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ap-interrupteur span { width: 38px; height: 22px; border-radius: 999px; background: var(--bordure); position: relative; transition: background 0.15s; flex: none; }
.ap-interrupteur span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.15s; }
.ap-interrupteur input:checked + span { background: var(--accent); }
.ap-interrupteur input:checked + span::after { transform: translateX(16px); }
.ap-interrupteur input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ap-interrupteur em { font-style: normal; font-size: 0.9rem; }
.ap-heure { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; }
.ap-heure select { padding: 5px 8px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--surface); color: var(--texte); font: inherit; }
.ap-heure select:disabled { opacity: 0.5; }
.ap-dernier { color: var(--texte-doux); font-size: 0.8rem; min-width: 150px; }
.ap-maj { margin: 0; font-size: 0.85rem; color: var(--texte-doux); }
/* Déconnecter, et sa confirmation sur place */
.ap-actions { grid-column: 2 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }   /* confirmation : sous le nom */
.ap-actions:empty { display: none; }
.ap-actions button { width: auto; }
.ap-confirmer { margin: 0 8px 0 0; font-size: 0.9rem; }
.ap-oui { background: #c0392b; border-color: #c0392b; }
.ap-badge.maj { background: #fff4e0; color: #9a5b00; border-color: transparent; }
.ap-badge.alerte { background: #fef3f2; color: #b42318; border-color: transparent; }   /* suppression de compte prévue (évolution 9) */
.ap-detail-court, .ad-action-court, .ap-infos, .ap-heure-mobile { display: none; }   /* téléphone seulement */
.ap-deplier-web { visibility: hidden; }   /* PC : pas de dépliage pour une connexion web (téléphone : détails) */
/* Dépliage (appli) : dossiers de la galerie du téléphone */
.ap-deplier { width: 32px; height: 32px; color: var(--texte-doux); }
.ap-deplier svg { transition: transform 0.15s; }
.ap-ouverte .ap-deplier svg { transform: rotate(90deg); }
.ap-deplier:hover { color: var(--accent); }
.ap-panneau { grid-column: 2 / -1; padding: 4px 0 4px; display: flex; flex-direction: column; gap: 10px; }
.ap-dossiers-tete strong { display: block; font-size: 0.95rem; }
.ap-dossiers-tete small { color: var(--texte-doux); font-size: 0.8rem; }
.ap-dossiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 16px; }
.ap-dossiers label { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--surface); cursor: pointer; }
.ap-dossiers label:hover { border-color: var(--accent); }
.ap-dossiers input { accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.ap-dossier-nom { flex: 1; min-width: 0; overflow-wrap: anywhere; }   /* nom entier, sur deux lignes si besoin */
.ap-dossiers small { color: var(--texte-doux); font-size: 0.8rem; flex: none; }
.ap-dossiers-pied { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ap-dossiers-pied small { color: var(--texte-doux); font-size: 0.8rem; }
/* Page « Stockage du compte » (stockage.js) : mêmes cartes que Mon compte */
.st-entete, .st-large { grid-column: 1 / -1; }
.st-entete h1 { font-size: 1.5rem; margin: 0; }
.st-titre { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.st-titre .btn-secondaire { width: auto; }
.st-page .mc-carte > h2 { font-size: 1.05rem; margin: 0 0 16px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mc-carte > h2 small { font-weight: 400; font-size: 0.8rem; color: var(--texte-doux); }
.st-retour-annees { margin-left: auto; font-size: 0.85rem; }
.st-chiffres { margin: 0 0 10px; color: var(--texte-doux); }
.st-chiffres strong { font-size: 1.4rem; color: var(--texte); }
.st-jauge { display: flex; height: 14px; border-radius: 999px; background: var(--fond); border: 1px solid var(--bordure); overflow: hidden; }
.st-jauge span { display: block; height: 100%; }
.st-jauge span + span { box-shadow: -1px 0 0 var(--surface); }
.st-jauge.alerte { border-color: #e8912d; }
.st-jauge.plein { border-color: #c0392b; }
.st-legende-jauge { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.88rem; color: var(--texte-doux); }
.st-legende-jauge li { display: flex; align-items: center; gap: 6px; }
.st-legende-jauge strong { color: var(--texte); font-weight: 600; }
.st-pastille { width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block; }
.st-pastille.libre { background: var(--fond); border: 1px solid var(--bordure); }
.st-reste.plein { margin: 10px 0 0; color: #c0392b; font-size: 0.9rem; }
.st-demande > * { margin-top: 14px; }
.st-demande [data-zone-demande]:empty { display: none; }
.st-demande-etat { margin: 14px 0 0; font-size: 0.9rem; color: var(--texte-doux); }
.st-demande-etat.accordee { color: #1e7a45; }
.st-demande-etat.refusee { color: #c0392b; }
.st-demande .btn-secondaire { width: auto; }
.st-form-demande { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.st-combien, .st-autre { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.st-combien select, .st-autre input { padding: 7px 8px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--surface); color: var(--texte); font: inherit; }
.st-autre input { width: 80px; }
.st-form-demande input[name="message"] { flex: 1 1 240px; padding: 8px 10px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--surface); color: var(--texte); font: inherit; }
.st-form-demande button { width: auto; }
/* Anneaux (répartition, origines) */
.st-anneau { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.st-anneau svg { width: 180px; height: 180px; flex: none; }
.st-anneau circle { transition: stroke-width 0.15s; }
.st-anneau circle:hover { stroke-width: 34; }
.st-anneau-total { font-size: 18px; font-weight: 700; fill: var(--texte); }
.st-anneau-sous { font-size: 11px; fill: var(--texte-doux); }
.st-legende { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 10px; }
.st-legende li { display: flex; align-items: center; gap: 10px; }
.st-leg-nom { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.st-leg-nom small { display: block; font-weight: 400; color: var(--texte-doux); font-size: 0.8rem; }
.st-taille { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.st-action { font-size: 0.85rem; }
/* Histogramme */
.st-histo { display: flex; align-items: flex-end; gap: 10px; height: 220px; padding-top: 4px; overflow-x: auto; }
.st-colonne { flex: 1 0 44px; max-width: 110px; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 0; background: none; padding: 0; font: inherit; color: inherit; }
button.st-colonne { cursor: pointer; }
.st-col-taille { font-size: 0.75rem; color: var(--texte-doux); white-space: nowrap; min-height: 1em; }
.st-col-barre { flex: 1; width: 100%; display: flex; align-items: flex-end; border-radius: 8px 8px 0 0; background: color-mix(in srgb, var(--fond) 70%, transparent); }
.st-col-barre span { display: block; width: 100%; min-height: 2px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 75%, #fff), var(--accent)); transition: filter 0.15s; }
button.st-colonne:hover .st-col-barre span { filter: brightness(1.15); }
.st-col-nom { font-size: 0.85rem; font-weight: 600; }
/* Plus gros médias */
.st-prive-lourds { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #fbeef2; color: #8a2f4f; font-size: 0.9rem; }
.st-gros-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.st-gros-actions button { width: auto; }
.st-tout { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; }
.st-gros { list-style: none; margin: 0; padding: 0; columns: 320px; column-gap: 20px; }   /* lecture de haut en bas, puis de gauche à droite */
.st-gros li { break-inside: avoid; margin-bottom: 8px; }
.st-gros li { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--bordure); border-radius: 10px; }
.st-gros input, .st-tout input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.st-gros-media { position: relative; width: 56px; height: 56px; flex: none; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--fond); cursor: pointer; }
.st-gros-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-gros-video { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 0.9rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.st-gros-nom { flex: 1; min-width: 0; text-align: left; border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.st-gros-nom strong { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-gros-nom small { color: var(--texte-doux); font-size: 0.8rem; }
.st-vide { margin: 0; color: var(--texte-doux); }
/* Bandeau des demandes de stockage (haut de Photos, administrateur ; même allure que la mise à jour de l'appli) */
.bandeau-demandes { margin: 12px 0 0; padding: 4px 10px 4px 16px; border-radius: 12px; background: var(--accent); color: #fff; font-size: 0.9rem; }
.bandeau-demandes[hidden] { display: none; }
.bandeau-demande { display: flex; align-items: center; gap: 12px; padding: 6px 0; flex-wrap: wrap; }
.bandeau-demande + .bandeau-demande { border-top: 1px solid rgba(255, 255, 255, 0.25); }
.bandeau-demande > span { flex: 1; min-width: 200px; overflow-wrap: anywhere; }
.bandeau-demandes button { border: 1px solid rgba(255, 255, 255, 0.6); background: none; color: #fff; border-radius: 8px; padding: 6px 12px; font: inherit; font-weight: 500; cursor: pointer; }
.bandeau-demandes button:hover { background: rgba(255, 255, 255, 0.15); }
.bandeau-demandes button.plein { background: #fff; color: var(--accent); border-color: #fff; font-weight: 600; }
.bandeau-demandes button.plein:hover { background: rgba(255, 255, 255, 0.85); }
.bandeau-actions { display: flex; align-items: center; gap: 8px; }
/* Petite fenêtre par-dessus la page (code à 6 chiffres, demande de stockage) : aux couleurs du thème de la page
   (claire sur un thème clair, sombre sur un thème foncé) */
.popup-code { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(10, 12, 16, 0.5); }
.popup-code-carte { width: 100%; max-width: 440px; padding: 24px 24px 18px; border-radius: 16px; background: var(--surface); color: var(--texte); border: 1px solid var(--bordure); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); text-align: center; }
.popup-code-carte h2 { font-size: 1.1rem; margin: 0 0 6px; }
.popup-code-carte p { margin: 0 0 14px; color: var(--texte-doux); font-size: 0.9rem; }
.popup-code-carte .popup-code-aide { margin: 0 0 10px; color: var(--texte); font-weight: 500; }
.popup-code-carte .code-cases input { background: var(--fond); color: var(--texte); border-color: var(--bordure); }
.popup-code-carte .code-cases input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.popup-code-annuler { margin-top: 4px; border: 1px solid var(--bordure); background: none; color: var(--texte); border-radius: 8px; padding: 8px 16px; font: inherit; cursor: pointer; }
.popup-code-annuler:hover { background: var(--fond); }
.st-message-admin { margin: 0 0 14px !important; padding: 10px 12px; border-radius: 10px; background: var(--accent-clair); color: var(--accent) !important; font-weight: 500; text-align: left; white-space: pre-line; }
.ad-form textarea { padding: 9px 10px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--surface); color: var(--texte); font: inherit; resize: vertical; }
.ad-form label small { font-weight: 400; color: var(--texte-doux); }
/* Formulaire de demande de stockage dans la fenêtre */
.popup-code-carte .st-form-demande { flex-direction: column; align-items: stretch; text-align: left; gap: 12px; }
.popup-code-carte .st-form-demande input[name="message"] { flex: none; width: 100%; }
.popup-code-carte .st-combien select { flex: 1; }
.st-form-boutons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
/* Croix du bandeau (réponse à une demande, côté utilisateur) */
.bandeau-demandes .bandeau-fermer { border: 0; padding: 4px; display: grid; place-items: center; }
.bandeau-demandes .bandeau-fermer svg { width: 18px; height: 18px; }
/* Page « Administration » (admin.js) : mêmes cartes que Mon compte */
.ad-entete, .ad-large { grid-column: 1 / -1; }
.ad-entete h1 { font-size: 1.5rem; margin: 0; }
.ad-creer { display: flex; gap: 8px; flex-wrap: wrap; }
.ad-creer button { width: auto; }
.ad-note { margin: 0; color: var(--texte-doux); font-size: 0.88rem; }
.ad-page .mc-carte > h2 { font-size: 1.1rem; margin: 0 0 16px; display: flex; align-items: baseline; gap: 8px; }
.ad-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ad-utilisateur { border: 1px solid var(--bordure); border-radius: 14px; overflow: hidden; background: var(--surface); }
.ad-utilisateur.inactif { opacity: 0.6; }
.ad-ligne { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 32px; align-items: center; gap: 14px; padding: 12px 16px; }
.ad-ligne + .ad-ligne { border-top: 1px solid var(--bordure); }
.ad-ligne:first-child { background: color-mix(in srgb, var(--fond) 55%, var(--surface)); }
.ad-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 1.1rem; overflow: hidden; flex: none; }
.ad-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-icone { width: 44px; height: 32px; display: grid; place-items: center; color: var(--texte-doux); }
.ad-icone svg { width: 20px; height: 20px; }
.ad-texte { min-width: 0; }
.ad-texte strong { font-weight: 600; }
.ad-texte small { display: block; color: var(--texte-doux); font-size: 0.82rem; margin-top: 2px; overflow-wrap: anywhere; }
.ad-nom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ad-nom strong { font-size: 1.02rem; }
.ad-actions { display: flex; gap: 4px; }
.ad-actions .btn-icone { color: var(--texte-doux); }
.ad-actions .btn-icone:hover { color: var(--accent); }
.ad-actions .ad-danger:hover { color: #c0392b; background: #fdecea; }
.ad-deplier { width: 32px; height: 32px; color: var(--texte-doux); }
.ad-deplier svg { transition: transform 0.15s; }
.ad-deplier.ouvert svg { transform: rotate(90deg); }
.ad-panneau { grid-column: 2 / -1; margin: 2px 0 2px; }
.ad-appareils { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ad-appareils li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--bordure); border-radius: 10px; }
.ad-app-nom { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ad-appareils small { color: var(--texte-doux); font-size: 0.8rem; }
.ad-appareils .ap-sortir { margin: 0; width: 32px; height: 32px; }
.ad-stockage .stockage-barre { margin-top: 6px; max-width: 420px; }
.ad-stockage .stockage-barre.alerte span { background: #e8912d; }
.ad-demande { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.88rem; }
.ad-demande button { width: auto; padding: 5px 12px; }
.ad-panneau .st-legende-jauge { margin: 0 0 8px; }
.ad-panneau .ad-note .lien { margin-left: 6px; }
.ad-hist-filtres { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ad-hist-filtres select { width: auto; min-width: 170px; padding: 7px 10px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--surface); color: var(--texte); font: inherit; font-size: 0.9rem; }
.ad-hist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--bordure); border-radius: 14px; overflow: hidden; background: var(--surface); }
.ad-action { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 16px; }
.ad-action + .ad-action { border-top: 1px solid var(--bordure); }
.ad-action .ad-texte > span { font-size: 0.94rem; }
.ad-action-detail { white-space: pre-line; }
.ad-action-quand { color: var(--texte-doux); font-size: 0.8rem; text-align: right; white-space: nowrap; }
.ad-hist-plus { display: block; width: auto; margin: 14px auto 0; }
@media (max-width: 767px) {
  /* Historique (téléphone) : une ligne par action, heure courte à droite ; un toucher déplie le détail, la date
     complète et l'appareil (admin.js, classe .ouverte). */
  .ad-hist-filtres { flex-wrap: nowrap; gap: 8px; }   /* les deux filtres côte à côte */
  .ad-hist-filtres select { flex: 1 1 0; min-width: 0; }
  .ad-action { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 12px; cursor: pointer; }
  .ad-action .ad-icone { width: 28px; height: 24px; }
  .ad-action .ad-icone svg { width: 17px; height: 17px; }
  .ad-action .ad-texte > span { display: block; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ad-action-court { display: block; color: var(--texte-doux); font-size: 0.78rem; white-space: nowrap; }
  .ad-action-detail, .ad-action-quand { display: none !important; }
  .ad-action.ouverte { align-items: start; background: color-mix(in srgb, var(--fond) 55%, var(--surface)); }
  .ad-action.ouverte .ad-texte > span { white-space: normal; }
  .ad-action.ouverte .ad-action-detail { display: block !important; }
  .ad-action.ouverte .ad-action-quand { display: block !important; grid-column: 2 / -1; text-align: left; white-space: normal; }
  .ad-action.ouverte .ad-action-court { display: none; }
}
.ad-serveur-graph { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ad-serveur-graph h3 { font-size: 0.95rem; margin: 0 0 12px; }
.ad-serveur-graph h3 small { font-weight: 400; color: var(--texte-doux); margin-left: 6px; }
.ad-limites { margin: 18px 0; font-size: 0.92rem; }
.ad-limites.trop { color: #c0392b; }
.ad-tableau-cadre { overflow-x: auto; }
.ad-tableau { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.ad-tableau th { text-align: left; font-weight: 600; color: var(--texte-doux); padding: 8px 10px; border-bottom: 1px solid var(--bordure); cursor: pointer; white-space: nowrap; user-select: none; }
.ad-tableau th.trie { color: var(--accent); }
.ad-tableau td { padding: 8px 10px; border-bottom: 1px solid var(--bordure); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ad-tableau td small { color: var(--texte-doux); }
.ad-tableau tr.repere td { background: var(--accent-clair); transition: background 0.3s; }
.ad-cellule-nom { display: flex; align-items: center; gap: 10px; }
.ad-cellule-nom .ad-avatar { width: 28px; height: 28px; font-size: 0.8rem; }
.ad-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.ad-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; font-weight: 500; }
.ad-form label.case { flex-direction: row; align-items: center; font-weight: 400; }
.ad-form label.st-combien { flex-direction: row; align-items: center; }
.ad-form input:not([type="checkbox"]) { padding: 9px 10px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--surface); color: var(--texte); font: inherit; }
.ad-alerte { color: #c0392b !important; }
.popup-code-carte .cle-totp { color: var(--texte); font-weight: 600; letter-spacing: 0.03em; }
/* Administration : demandes de stockage */
.admin-demandes { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; background: var(--accent-clair); }
.admin-demandes ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.admin-demandes li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-demandes li > div { flex: 1; min-width: 180px; }
.admin-demandes small { display: block; color: var(--texte-doux); font-size: 0.8rem; }
.admin-demandes button { width: auto; }
/* Photo de profil : bouton appareil photo sur le cercle, menu, recadrage dans l'en-tête */
.mc-photo { position: relative; flex: none; }
.mc-avatar { overflow: hidden; }
.mc-photo-bouton {
  position: absolute; right: -4px; bottom: -4px; width: 32px; height: 32px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface); color: var(--texte); border: 1px solid var(--bordure); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.mc-photo-bouton:hover { color: var(--accent); border-color: var(--accent); }
.mc-photo-bouton svg { width: 16px; height: 16px; }
.mc-photo-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; min-width: 240px; padding: 6px;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.mc-photo-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--texte); font: inherit; text-align: left; cursor: pointer; white-space: nowrap;
}
.mc-photo-menu button:hover { background: var(--fond); }
.mc-photo-menu svg { width: 18px; height: 18px; color: var(--texte-doux); flex: none; }
.mc-attente { color: var(--texte-doux); }
.mc-recadrage { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; width: 100%; }
.mc-cadre {
  width: 220px; height: 220px; border-radius: 50%; overflow: hidden; flex: none; cursor: grab; touch-action: none;
  background: var(--fond); box-shadow: 0 0 0 1px var(--bordure);
}
.mc-cadre:active { cursor: grabbing; }
.mc-cadre img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; pointer-events: none; }
.mc-recadrage-reglages { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 12px; }
.mc-recadrage-reglages h2 { font-size: 1.1rem; margin: 0; }
.mc-recadrage-reglages .auth-texte { margin: 0; }
.mc-zoom { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; max-width: 380px; }
.mc-zoom input { flex: 1; accent-color: var(--accent); }
.mc-zoom span { width: 48px; text-align: right; color: var(--texte-doux); }
.mc-recadrage-boutons { display: flex; gap: 10px; flex-wrap: wrap; }
.mc-recadrage-boutons button { width: auto; }
/* Tête des cartes : icône, titre, état */
.mc-carte-tete { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.mc-carte-tete h2 { font-size: 1.05rem; margin: 0; }
.mc-carte-tete small { display: block; color: var(--texte-doux); font-size: 0.85rem; margin-top: 2px; }
.mc-icone { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--accent-clair); color: var(--accent); }
.mc-icone svg { width: 20px; height: 20px; }
.mon-compte .auth-form .btn-principal, .mon-compte [data-fini], .mon-compte [data-annuler] { align-self: flex-start; width: auto; }
.mc-corps > .auth-texte { margin-top: 0; }
/* Profil : deux champs côte à côte */
.mc-colonne { display: flex; flex-direction: column; gap: 20px; min-width: 0; }   /* deux colonnes indépendantes : pas de trou sous une carte courte */
.mc-carte-tete .mc-modifier { margin-left: auto; color: var(--texte-doux); }
.mc-carte-tete .mc-modifier:hover { color: var(--accent); }
.mc-infos-profil { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0; font-size: 0.95rem; }
.mc-infos-profil dt { color: var(--texte-doux); }
.mc-infos-profil dd { margin: 0; overflow-wrap: anywhere; }
.mc-vide { color: var(--texte-doux); font-style: italic; }
.mc-code { cursor: help; }
.mc-code code { font-size: 1rem; letter-spacing: 0.08em; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--fond); border: 1px solid var(--bordure); }
.mc-profil .mc-code-seul { grid-column: 1 / -1; margin: 2px 0 0; }
.mc-profil-boutons { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }   /* en bas à droite de la carte */
.mc-profil-boutons button { width: auto; }
.mc-profil { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.mc-profil .auth-erreur, .mc-profil .btn-principal { grid-column: 1 / -1; }
.mc-profil .btn-principal { justify-self: start; }
/* QR de l'appli d'authentification */
.mc-qr { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.mc-qr .qr { margin: 0; }
.mc-qr .auth-cle { text-align: left; margin: 0 0 12px; }
.mc-qr .code-cases { justify-content: flex-start; margin-bottom: 12px; }
.auth-cle { text-align: left; margin: 0 0 12px; }
.mc-qr .code-cases { justify-content: flex-start; margin-bottom: 12px; }
.auth-cle { text-align: center; font-size: 0.85rem; color: var(--texte-doux); margin: -8px 0 16px; }
.auth-cle code { font-size: 0.95rem; color: var(--texte); letter-spacing: 0.05em; }
@media (max-width: 767px) {
  .mon-compte { grid-template-columns: 1fr; margin: 8px 0 0; padding: 0 8px 24px; gap: 12px; }
  .mc-carte { padding: 18px 16px 20px; border-radius: 14px; }
  .mc-entete { gap: 16px; padding: 20px 16px; }
  .mc-avatar { width: 60px; height: 60px; font-size: 1.6rem; }
  .mc-recadrage { flex-direction: column; align-items: stretch; gap: 18px; }
  .mc-cadre { align-self: center; width: 240px; height: 240px; }
  .mc-photo-menu { min-width: 220px; }
  /* Utilisateurs (téléphone) : boutons d'action à droite du nom (plus de ligne à part), appareils dépliés en lignes
     simples sur toute la largeur. */
  .ad-ligne { grid-template-columns: 36px minmax(0, 1fr) auto 30px; gap: 10px; padding: 12px; }
  .ad-ligne:first-child { grid-template-columns: 36px minmax(0, 1fr) auto; align-items: start; }
  .ad-ligne:first-child .ad-deplier-vide { display: none; }
  .ad-ligne .ad-actions { gap: 0; }
  .ad-ligne .ad-actions .btn-icone { width: 32px; height: 32px; }
  .ad-deplier { width: 30px; height: 30px; }
  .ad-nom { gap: 4px 6px; }
  .ad-nom .ap-badge { font-size: 0.68rem; padding: 1px 7px; }
  .ad-avatar { width: 36px; height: 36px; }
  .ad-icone { width: 36px; }
  .ad-panneau { grid-column: 1 / -1; margin: 0; }
  .ad-appareils { gap: 0; }
  .ad-appareils li { display: grid; grid-template-columns: 36px minmax(0, 1fr) 32px; column-gap: 10px; align-items: center;
    padding: 8px 0; border: 0; border-top: 1px solid var(--bordure); border-radius: 0; }
  .ad-appareils .ap-type { grid-row: 1 / span 2; justify-self: center; }
  .ad-app-nom { grid-column: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; font-size: 0.92rem; }
  .ad-appareils small { grid-column: 2; }
  .ad-appareils .ap-sortir { grid-column: 3; grid-row: 1 / span 2; }
  .ad-serveur-graph { grid-template-columns: 1fr; }
  .st-anneau { justify-content: center; }
  .st-histo { height: 180px; gap: 6px; }
  .st-colonne { flex-basis: 34px; }
  .st-gros { columns: 1; }
  .ap-liste-carte { padding: 0; }   /* la marge des cartes (ci-dessus) ne s'applique pas à la liste */
  /* Appareils (téléphone) : liste compacte. Fermé : nom sur une ligne, étiquettes, « actif … » ; la déconnexion est
     dans la ligne, en haut à droite. Déplié (chevron) : connecté depuis, scan auto et dossiers. */
  .ap-element { position: relative; gap: 0; }
  .ap-ligne { grid-template-columns: 36px minmax(0, 1fr) 30px; gap: 6px 12px; padding: 12px 46px 12px 14px; align-items: start; }
  .ap-ligne .mc-icone { width: 36px; height: 36px; }
  .ap-nom { gap: 5px 6px; }
  .ap-nom strong { flex: 1 1 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
  .ap-courant .ap-nom strong { font-size: 1rem; }
  .ap-badge, .ap-type { font-size: 0.7rem; }
  .ap-renommer { width: 26px; height: 26px; }
  .ap-pc { display: none; }   /* « mise à jour disponible » → « mise à jour » */
  .ap-detail-court { display: block; color: var(--texte-doux); font-size: 0.8rem; margin-top: 4px; }
  .ap-detail { display: none; }
  .ap-ouverte .ap-detail-court { display: none; }
  /* Déplié : détails de connexion, puis scan auto, en petits encadrés « libellé à gauche, valeur à droite », sur toute
     la largeur de la ligne (y compris sous le bouton de déconnexion). */
  .ap-ouverte .ap-infos, .ap-ouverte .ap-ligne .ap-auto:not(:empty) {
    display: block; grid-column: 1 / -1; margin: 6px -32px 0 0; padding: 0;
    border: 1px solid var(--bordure); border-radius: 10px; background: var(--surface); font-size: 0.86rem;
  }
  .ap-infos > div, .ap-ligne .ap-auto > * { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; margin: 0; min-height: 22px; }
  .ap-infos > div + div, .ap-ligne .ap-auto > * + * { border-top: 1px solid var(--bordure); }
  .ap-infos dt { color: var(--texte-doux); flex: none; }
  .ap-infos dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
  .ap-interrupteur { flex-direction: row-reverse; }
  .ap-interrupteur em { font-size: 0.86rem; }
  .ap-heure { font-size: 0.86rem; }
  .ap-heure-mobile { display: inline; margin-right: auto; }
  .ap-heure-a { display: none; }
  .ap-heure select { padding: 4px 8px; }
  .ap-ligne .ap-dernier { font-size: 0.8rem; flex-basis: auto; }
  .ap-deplier, .ap-deplier-web { visibility: visible; grid-column: 3; grid-row: 1; width: 30px; height: 30px; margin-top: 3px; }
  .ap-sortir { position: absolute; top: 15px; right: 8px; width: 32px; height: 32px; margin: 0; }
  .ap-ligne > span:empty { display: none; }
  .ap-panneau { grid-column: 1 / -1; margin-right: -32px; }
  .ap-dossiers { grid-template-columns: 1fr; }
  .ap-element:not(.ap-ouverte) .ap-auto, .ap-ligne .ap-auto:empty { display: none; }
  .ap-ligne .ap-actions { grid-column: 2 / -1; justify-content: flex-start; }
  .ap-dernier { min-width: 0; flex-basis: 100%; }
  .ap-confirmer { max-width: none; flex-basis: 100%; }
  .mc-nom h1 { font-size: 1.25rem; }
  .mc-profil { grid-template-columns: 1fr; }
}

/* Téléphone : pas de carré bleu au toucher (Chrome Android) ; à la place, un appui visible. Photo de profil : elle
   rétrécit puis revient avec un petit rebond, et un halo de la couleur du thème s'étend et s'efface (classe .appui,
   posée par auth.js à chaque appui). Boutons-icônes : léger enfoncement. */
@media (max-width: 767px) {
  button, a, label, summary, [role="button"], [tabindex] { -webkit-tap-highlight-color: transparent; }
  .btn-icone { transition: transform 0.12s ease; }
  .btn-icone:active { transform: scale(0.88); }
  .avatar.appui { animation: avatar-appui 0.42s ease-out; }
}
@keyframes avatar-appui {
  0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  30% { transform: scale(0.88); }
  65% { transform: scale(1.06); }
  100% { transform: scale(1); box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent); }
}


/* ---------- Bandeau de la maquette ---------- */
.bandeau-maquette {
  position: fixed; bottom: 16px; right: 16px; z-index: 45;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #fff8e1; border: 1px solid #f0d68a; color: #6b4e00;
  border-radius: 10px; padding: 8px 14px; font-size: 0.8rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.bandeau-maquette code { background: rgba(0, 0, 0, 0.06); padding: 1px 5px; border-radius: 4px; }
.bandeau-maquette .lien { color: #6b4e00; text-decoration: underline; font-size: inherit; }
.vis-ouverte .bandeau-maquette { display: none; }

/* ---------- Barre de filtres (filtres.js) ---------- */
.filtres {
  position: sticky; top: 64px; z-index: 8;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 16px 0 0; padding: 12px 16px;
  background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--rayon);
}
.segments { display: inline-flex; background: var(--surface); border: 1px solid var(--bordure); border-radius: 8px; padding: 2px; }
.segment { border: 0; background: none; padding: 6px 14px; border-radius: 6px; font-size: 0.9rem; font-weight: 500; color: var(--texte-doux); }
.segment:hover { color: var(--texte); }
.segment.is-actif { background: var(--accent); color: #fff; }

.filtre { position: relative; }
.puce {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--bordure); background: var(--surface); border-radius: 18px;
  padding: 6px 12px; font-size: 0.9rem; font-weight: 500; white-space: nowrap;
}
.puce:hover { border-color: #c9ced6; }
.puce svg { color: var(--texte-doux); }
.puce.is-actif { background: var(--accent-clair); border-color: var(--accent); color: var(--accent); }
.puce.is-actif svg { color: var(--accent); }
.puce[data-favoris].is-actif svg { fill: currentColor; }

.pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 12; min-width: 240px;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(20, 30, 45, 0.14); padding: 6px;
}
.pop-droite { left: auto; right: 0; }
.pop-ligne {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 8px 10px; border-radius: 6px; font-size: 0.9rem;
}
.pop-ligne:hover { background: var(--fond); }
.pop-ligne.is-actif { color: var(--accent); font-weight: 600; background: var(--accent-clair); }
.pop-ligne.lien-effacer { color: var(--texte-doux); }
.pop-sep { height: 1px; background: var(--bordure); margin: 6px 4px; }
.pop-titre { margin: 6px 10px 4px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texte-doux); }
.pop-choix { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: 0.9rem; cursor: pointer; }
.pop-choix:hover { background: var(--fond); }
.pop-choix input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.pop-choix span { flex: 1; }
.pop-choix small { color: var(--texte-doux); }
.pop-periode { display: flex; flex-direction: column; gap: 8px; padding: 4px 10px 8px; }
.pop-periode label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.9rem; }
.pop-periode input { font: inherit; font-size: 0.85rem; padding: 5px 8px; border: 1px solid var(--bordure); border-radius: 6px; }

.recherche {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--bordure); background: var(--surface); border-radius: 18px;
  padding: 0 12px; color: var(--texte-doux);
}
.recherche:focus-within { border-color: var(--accent); }
.recherche input { border: 0; outline: 0; background: none; font: inherit; font-size: 0.9rem; padding: 7px 0; width: 170px; color: var(--texte); }

.barre-droite { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.resultat { font-size: 0.9rem; color: var(--texte-doux); }
.barre-droite .lien { font-size: 0.9rem; }

.page > .view > #galerie > .bloc:first-child > .mois:first-child h2,
#galerie-prive > .bloc:first-child > .mois:first-child h2 { margin-top: 20px; }
#galerie > .bloc:first-child > .mois:first-child:not(:has(h2)), #galerie-prive > .bloc:first-child > .mois:first-child:not(:has(h2)) { margin-top: 20px; }
/* Grille par blocs (chantier A3) : un groupe coupé entre deux blocs garde l'écart entre ses lignes. */
/* Bloc rempli mais hors de l'écran : le navigateur ne le dessine pas (sa taille reste réservée). */
.bloc[data-rempli] { content-visibility: auto; contain-intrinsic-size: auto 800px; }
.mois.suite { margin-top: 4px; }
.vide .lien { font-size: inherit; }

/* Favoris : étoile cliquable en bas à gauche de la vignette. Visible au survol, toujours visible si favori. */
.btn-favori {
  position: absolute; bottom: 4px; left: 4px; z-index: 1;
  width: 30px; height: 30px; border: 0; border-radius: 50%; padding: 0;
  display: grid; place-items: center; background: none; color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
  opacity: 0; transition: opacity 0.15s, transform 0.1s;
}
.btn-favori svg { width: 20px; height: 20px; display: block; }
/* Icônes des cases de la grille (chantier A3) : une image partagée (masque), au lieu d'un SVG dans chaque case,
   et l'ombre de l'étoile seulement quand elle est visible : défilement bien plus léger. */
.ico { display: block; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.btn-favori .ico { width: 20px; height: 20px; }
.coche .ico { width: 16px; height: 16px; }
.ico-coche { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.ico-etoile { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.8l-5.2 2.8 1-5.8-4.3-4.1 5.9-.9z'/%3E%3C/svg%3E"); }
.ico-etoile-pleine { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.8l-5.2 2.8 1-5.8-4.3-4.1 5.9-.9z'/%3E%3C/svg%3E"); }
.vignette .btn-favori { filter: none; }
.vignette:hover .btn-favori, .vignette:focus-within .btn-favori, .vignette .btn-favori.is-favori { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7)); }
.vignette:hover .btn-favori, .vignette:focus-within .btn-favori, .btn-favori.is-favori { opacity: 1; }
.btn-favori:hover { transform: scale(1.15); }
.btn-favori.is-favori { color: #ffd24a; }
.btn-favori:focus-visible { outline: 2px solid #fff; }
.btn-icone.is-favori { color: #ffd24a; }

/* ---------- Onglet Albums (albums.js) ---------- */
.albums-tete { display: flex; align-items: center; gap: 16px; padding: 22px 0 14px; min-height: 76px; }
.fil { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 1.25rem; font-weight: 600; }
.fil-lien { border: 0; background: none; padding: 2px 4px; border-radius: 6px; color: var(--texte-doux); font-weight: 600; }
.fil-lien:hover { color: var(--accent); background: var(--accent-clair); }
.fil-courant { padding: 2px 4px; }
.fil-sep { color: var(--texte-doux); display: inline-grid; }
.albums-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.albums-actions .btn-secondaire, .btn-principal.compact { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 8px 14px; }

.albums-grille { display: grid; gap: 28px 20px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); padding-bottom: 24px; }
.carte-album { position: relative; cursor: pointer; outline: none; border-radius: 12px; }
.carte-album:focus-visible .couverture { box-shadow: 0 0 0 3px var(--accent); }
.couverture {
  aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--bordure);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.carte-album:hover .couverture { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20, 30, 45, 0.15); }
.couverture img { width: 100%; height: 100%; object-fit: cover; display: block; }
.couverture-vide { width: 100%; height: 100%; display: grid; place-items: center; color: var(--texte-doux); }
.couverture-vide svg { width: 40px; height: 40px; }
.mosaique { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; background: var(--surface); border: 1px solid var(--bordure); padding: 3px; }
.mosaique img, .mosaique span { border-radius: 8px; background: var(--bordure); width: 100%; height: 100%; object-fit: cover; }
.mosaique .case { display: block; overflow: hidden; min-width: 0; min-height: 0; }   /* la case coupe l'image recadrée (zoom) */
.mosaique .case img { display: block; border-radius: 0; }
.carte-texte { padding: 10px 36px 0 2px; }
.carte-texte strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-texte small { display: flex; align-items: center; gap: 5px; color: var(--texte-doux); font-size: 0.85rem; margin-top: 2px; }
.lien-dossier svg { width: 14px; height: 14px; display: block; }
.carte-favoris { color: #e0a100; } .carte-favoris svg { width: 14px; height: 14px; display: block; }   /* album « Favoris » */
.carte-menu {
  position: absolute; right: 0; bottom: 4px; width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: none; color: var(--texte-doux); display: grid; place-items: center;
}
.carte-menu:hover { background: var(--bordure); color: var(--texte); }
/* Sélection de cartes (cadrage 3.11) : coche en haut à gauche, carte choisie entourée et couverture réduite */
.carte-coche {
  position: absolute; left: 8px; top: 8px; z-index: 1; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(0, 0, 0, 0.2); color: #fff; display: none; place-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.carte-coche svg { opacity: 0; }
.selection-cartes .carte-coche { display: grid; }
.selection-cartes .carte-menu { visibility: hidden; }
.selection-cartes .carte-album:hover .couverture { transform: none; box-shadow: none; }
.carte-album.is-choisie .couverture { transform: scale(0.9); box-shadow: 0 0 0 3px var(--accent); }
.carte-album.is-choisie .carte-coche { background: var(--accent); border-color: var(--accent); }
.carte-album.is-choisie .carte-coche svg { opacity: 1; }
/* Albums masqués (évolution 12) : grisés quand « Afficher tous les albums » les montre, œil barré en haut à droite ;
   « Masquer des albums » : coche sur chaque carte, cochées entourées, flèche pour entrer dans un groupe. */
.carte-album.masquee .couverture, .carte-album.masquee .carte-texte { opacity: 0.45; }
.carte-masquee {
  position: absolute; right: 8px; top: 8px; z-index: 1; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55); color: #fff; display: grid; place-items: center;
}
.carte-masquee svg { width: 16px; height: 16px; }
.en-masquage .carte-coche { display: grid; }
.en-masquage .carte-menu, .en-masquage .albums-actions { visibility: hidden; }
.en-masquage .carte-album:hover .couverture { transform: none; box-shadow: none; }
.carte-album.choisie-masque .couverture { transform: scale(0.9); box-shadow: 0 0 0 3px var(--accent); opacity: 0.6; }
.carte-album.choisie-masque .carte-coche { background: var(--accent); border-color: var(--accent); }
.carte-album.choisie-masque .carte-coche svg { opacity: 1; }
.carte-entrer {   /* à la place du ⋯ (en bas à droite) */
  position: absolute; right: 0; bottom: 2px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.carte-entrer:hover { filter: brightness(1.1); }
.en-masquage .page { padding-top: 60px; }
.bandeau-couverture .btn + .btn { margin-left: 0; }
.bandeau-couverture .btn-blanc { background: #fff; color: var(--accent); border-color: #fff; font-weight: 700; }

.menu-contextuel {
  position: fixed; z-index: 50; min-width: 220px;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(20, 30, 45, 0.16); padding: 6px;
}
.menu-contextuel button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 12px; border-radius: 6px; font-size: 0.9rem; }
.menu-contextuel button:hover { background: var(--fond); }
.menu-contextuel .danger, .btn-principal.danger { color: #b42318; }
.btn-principal.danger { background: #b42318; color: #fff; }

.selection-actions { margin-left: auto; display: flex; gap: 8px; }
.selection .btn { margin-left: 0; }
.dialogue-boutons { display: flex; justify-content: flex-end; gap: 8px; }
.dialogue-boutons .btn-principal { width: auto; }
.dialogue-boutons { flex-wrap: wrap; } .dialogue-boutons button { white-space: nowrap; }
.deja-connus { flex-wrap: wrap; }   /* médias déjà connus (évolution 17) : 3 boutons, à la ligne au téléphone */
.doux { color: var(--vis-doux); }

/* Fenêtres de choix (arbre des groupes et albums) */
.arbre { display: flex; flex-direction: column; gap: 4px; }
.arbre-liste { max-height: calc(46 * var(--vh)); overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.arbre-ligne, .arbre-groupe {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px calc(10px + var(--niveau, 0) * 22px); border-radius: 8px; font-size: 0.92rem;
}
.arbre-ligne { cursor: pointer; }
.arbre-ligne:hover { background: var(--fond); }
.arbre-ligne:has(input:checked) { background: var(--accent-clair); color: var(--accent); font-weight: 600; }
.arbre-ligne input { margin: 0; accent-color: var(--accent); }
.arbre-ligne small { margin-left: auto; color: var(--texte-doux); font-weight: 400; }
.arbre-icone, .arbre-groupe svg { color: var(--texte-doux); display: inline-grid; }
.arbre-groupe { color: var(--texte-doux); font-weight: 600; font-size: 0.85rem; }
.arbre-groupe svg { width: 18px; height: 18px; }
.arbre .btn-principal { margin-top: 12px; }
.arbre-nouveau { display: flex; flex-direction: column; gap: 8px; padding: 10px 4px 0; border-top: 1px solid var(--bordure); margin-top: 6px; }
.arbre-nouveau .lien { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; }
.arbre-nouveau input { font: inherit; padding: 10px 12px; border: 1px solid var(--bordure); border-radius: 8px; }
.avertissement { background: #fff8e1; color: #6b4e00; border-radius: 8px; padding: 10px 12px; margin: 8px 0 0; }
.arbre .auth-erreur { margin-top: 8px; }

/* Affichage « format d'origine » : rangées justifiées. Chaque vignette grandit en proportion de son
   rapport largeur/hauteur, donc toutes celles d'une rangée ont la même hauteur (environ 220 px).
   Le pseudo-élément final absorbe la place restante pour ne pas étirer la dernière rangée. */
.grille.grille-origine { display: flex; flex-wrap: wrap; gap: 4px; }
.grille-origine .vignette { aspect-ratio: var(--ratio); flex: var(--ratio) 1 calc(var(--ratio) * var(--taille-vignette, 200px) * 1.1); }
.grille-origine::after { content: ""; flex: 1000 1 0; }   /* vraie fin d'un groupe : dernière ligne à gauche (pas étirée) */
/* Morceau qui coupe un groupe en plein milieu (bloc suivant) : sa dernière ligne (déjà pleine) est justifiée, pas de trou. */
.grille-origine.grille-pleine::after { display: none; }
.segments.affichage .segment { padding: 5px 9px; display: inline-grid; place-items: center; }
.zoom-niveau { padding: 0 8px; align-self: center; font-size: 0.82rem; color: var(--texte-doux); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Évol 6 : étoile animée qui confirme l'ajout aux favoris (clic droit ou étoile), visible même vignette minuscule. */
.favori-flash { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; color: #f6b800; z-index: 3; }
.favori-flash .ico { width: 42%; height: 42%; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45)); animation: favori-pop 0.6s ease-out forwards; }
@keyframes favori-pop {
  0% { transform: scale(0.3); opacity: 0; }
  40% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}
.segments.affichage .segment:disabled { opacity: 0.35; cursor: default; }
.mois h2.sep-annee { font-size: 1.5rem; }
.mois h2.sep-jour { font-size: 1rem; margin-top: 24px; }

/* Coche des séparateurs (année, mois, jour) : visible au survol du titre, et toujours pendant une sélection. */
.mois h2 { position: relative; }
.coche.coche-groupe {
  position: absolute; top: 50%; left: 0; transform: translateY(-50%);
  width: 22px; height: 22px; opacity: 0; pointer-events: none;   /* cliquable seulement quand visible (survol / sélection) */
  border: 2px solid var(--texte-doux); background: var(--surface); color: transparent;
}
.mois h2:hover .coche-groupe, .coche-groupe:focus-visible, .en-selection .coche-groupe { opacity: 1; pointer-events: auto; }
.coche-groupe:hover { border-color: var(--accent); color: var(--accent-clair); }
.coche-groupe.is-plein { background: var(--accent); border-color: var(--accent); color: #fff; opacity: 1; pointer-events: auto; }
.coche-groupe.is-partiel { background: var(--accent); border-color: var(--accent); color: transparent; opacity: 1; pointer-events: auto; }
.coche-groupe.is-partiel::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 10px; height: 2px; background: #fff; border-radius: 1px;
}
.lien.lien-clair { color: #fff; text-decoration: underline; font-size: 0.9rem; opacity: 0.9; }
.lien.lien-clair:hover { opacity: 1; }

/* Glisser-déposer des albums */
.carte-album[draggable="true"] { cursor: grab; }
.carte-album.en-glisse { opacity: 0.35; }
.carte-album.cible-dans .couverture { box-shadow: 0 0 0 3px var(--accent); transform: scale(1.03); }
.carte-album.cible-dans .carte-texte strong { color: var(--accent); }
.carte-album.cible-avant::before, .carte-album.cible-apres::after {
  content: ""; position: absolute; top: 0; bottom: 40px; width: 4px; border-radius: 2px; background: var(--accent);
}
.carte-album.cible-avant::before { left: -12px; }
.carte-album.cible-apres::after { right: -12px; }
.fil-lien.fil-cible { color: #fff; background: var(--accent); }
/* Image de glissement : petite couverture + nom, rendue hors écran le temps de la capture */
.fantome-glisse { position: fixed; top: -1000px; left: -1000px; width: 96px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fantome-glisse .couverture { width: 80px; height: 80px; border-radius: 10px; box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
.fantome-glisse span { max-width: 96px; font-size: 0.75rem; font-weight: 600; background: var(--surface); padding: 2px 6px; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* PC (évolution 18) : glisser maison à la souris, molette permise. */
.fantome-souris { top: 0; left: 0; z-index: 70; pointer-events: none; opacity: 0.95; }
body.glisse-souris, body.glisse-souris * { cursor: grabbing !important; user-select: none; }

/* Mosaïque des groupes adaptée au nombre d'images */
.mosaique-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.mosaique-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.mosaique-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.mosaique-3 > :first-child { grid-row: span 2; }
.mosaique-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* Fenêtre « Modifier la couverture » */
.modale-carte.large { max-width: 760px; }
.couv { display: flex; flex-direction: column; gap: 16px; }
.couv-tete { display: flex; gap: 24px; align-items: flex-start; }
.couv-colonne { width: 150px; flex: none; display: flex; flex-direction: column; gap: 10px; }
.couv-apercu { width: 100%; cursor: default; }
.couv-apercu .case { position: relative; }
.couv-apercu .case.is-choisie::after {   /* au-dessus de l'image zoomée (qui passerait devant un outline) */
  content: ""; position: absolute; inset: 0; z-index: 1; border: 3px solid var(--accent); border-radius: inherit; pointer-events: none;
}
.couv-outils:empty { display: none; }
.couv-outils .auth-texte { margin: 0; }
.couv-bouton-recadrer { width: 100%; }
/* Recadrage en cours : aperçu agrandi, le reste de la fenêtre masqué */
.couv.en-recadrage .couv-colonne { width: min(300px, 100%); margin: 0 auto; }
.couv.en-recadrage .couv-options, .couv.en-recadrage .couv-choix, .couv.en-recadrage > .btn-principal { display: none; }
.couv.en-recadrage .couv-apercu { touch-action: none; cursor: grab; }
.couv.en-recadrage .couv-apercu:active { cursor: grabbing; }
.couv.en-recadrage .couv-tete { justify-content: center; }
.couv-zoom { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
.couv-zoom input { flex: 1; accent-color: var(--accent); }
.couv-zoom output { width: 48px; text-align: right; color: var(--texte-doux); }
.couv-cadrage-boutons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.couv-cadrage-boutons .lien { margin-right: auto; }
.couv-cadrage-boutons .btn-principal, .couv-cadrage-boutons .btn-secondaire { width: auto; padding: 8px 16px; }
.couv-options { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.couv-option { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--bordure); border-radius: 10px; cursor: pointer; }
.couv-option:has(input:checked) { border-color: var(--accent); background: var(--accent-clair); }
.couv-option input { margin-top: 3px; accent-color: var(--accent); }
.couv-option strong { display: block; font-size: 0.95rem; }
.couv-option small { color: var(--texte-doux); font-size: 0.85rem; }
.couv-source { margin-bottom: 10px; }
.couv-grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px;
  max-height: 300px; overflow-y: auto; padding: 2px;
}
.couv-image { aspect-ratio: 1; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--bordure); outline-offset: 2px; }
.couv-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.couv-image:hover { outline: 2px solid var(--bordure); }
.couv-image.is-choisie { outline: 3px solid var(--accent); }
.couv-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; max-height: 320px; overflow-y: auto; padding: 4px; }
.couv-album { position: relative; border: 0; background: none; padding: 0; text-align: left; font-size: 0.85rem; }
.couv-album .couverture { border: 3px solid transparent; }
.couv-album.is-choisie .couverture { border-color: var(--accent); }
.couv-album span { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.couv-album em {
  position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: #fff; font-style: normal; font-weight: 700; font-size: 0.8rem;
  display: grid; place-items: center;
}
.couv-album:disabled { opacity: 0.4; cursor: not-allowed; }
.couv-compte { margin: 0 0 6px; }
.couv > .btn-principal { align-self: flex-end; width: auto; padding: 10px 24px; }

/* Choix d'une couverture dans la galerie */
.bandeau-couverture {
  position: fixed; top: 64px; left: 0; right: 0; z-index: 9; height: 52px;
  display: flex; align-items: center; gap: 16px; padding: 0 32px;
  background: var(--accent); color: #fff; font-weight: 600;
}
.bandeau-couverture .bandeau-aide { font-weight: 400; opacity: 0.8; font-size: 0.9rem; }
.bandeau-couverture .btn { margin-left: auto; }
.choix-couverture .page { padding-top: 60px; }
.choix-couverture .filtres { top: 116px; }
.choix-couverture .tab[data-tab="prive"] { opacity: 0.4; }
.choix-couverture .coche, .choix-couverture .btn-favori, .choix-couverture .carte-menu,
.choix-couverture .albums-actions { display: none !important; }
.choix-couverture .vignette::before {
  content: "Choisir comme couverture"; position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; text-align: center; padding: 8px;
  background: rgba(31, 95, 139, 0.55); color: #fff; font-weight: 600; font-size: 0.85rem;
  opacity: 0; transition: opacity 0.12s;
}
.choix-couverture .vignette:hover::before, .choix-couverture .vignette:focus-visible::before { opacity: 1; }
.choix-decor .vignette::before { content: "Choisir cette photo"; }
.couv-image-choisie { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px dashed var(--bordure); border-radius: 10px; }
.couv-image-choisie img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.couv-image-choisie span { flex: 1; font-size: 0.85rem; color: var(--texte-doux); word-break: break-all; }

/* ---------- Personnalisation (perso.js) ---------- */
body { transition: background-color 0.2s; }
/* Fond foncé : texte, cadres et surfaces passent en clair sur foncé. */
body.fond-sombre {
  --texte: #eef0f3; --texte-doux: #a9b0ba; --bordure: #3a404a; --surface: #20252d; --accent-clair: #1d3a50;
  --accent: #4a9ad6;   /* bleu éclairci : lisible sur fond foncé */
  color: var(--texte);
}
body.fond-sombre .puce:hover { border-color: #566070; }
body.fond-sombre .auth-erreur { background: #3a1f1f; color: #ffb4a8; }
body.fond-sombre .avertissement { background: #3b3320; color: #f3d98b; }

/* Crayon de la barre du haut, avec infobulle */
.crayon { color: var(--texte-doux); position: relative; }
.crayon:hover { background: var(--fond); color: var(--accent); }
[data-infobulle]:hover::after {
  content: attr(data-infobulle); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: #2b2f36; color: #fff; font-size: 0.8rem; font-weight: 500; white-space: nowrap;
  padding: 5px 9px; border-radius: 6px; pointer-events: none; z-index: 30;
}

/* Éditeur plein écran : panneau à gauche, aperçu à droite */
.perso {
  position: fixed; inset: 0; z-index: 60; display: grid; grid-template-columns: 360px 1fr;
  background: #e9ecf0; color: #1c1f24;
  --texte: #1c1f24; --texte-doux: #6b7280; --bordure: #e3e6ea; --surface: #fff; --fond: #f6f7f9; --accent-clair: #e3eef6;
}
.perso-ouvert { overflow: hidden; }
.perso-panneau { background: #fff; border-right: 1px solid var(--bordure); padding: 20px 22px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
/* Barre de défilement du panneau : fine, discrète, bleue au survol */
/* Chrome/Edge : barre arrondie ci-dessous. Firefox (pas de ::-webkit-scrollbar) : version fine standard. */
.perso-panneau { scrollbar-gutter: stable; }
@supports not selector(::-webkit-scrollbar) {
  .perso-panneau { scrollbar-width: thin; scrollbar-color: #c9ced6 transparent; }
  .perso-panneau:hover { scrollbar-color: #a3abb7 transparent; }
}
.perso-panneau::-webkit-scrollbar { width: 8px; }
.perso-panneau::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }
.perso-panneau::-webkit-scrollbar-thumb { background: #c9ced6; border-radius: 8px; border: 2px solid #fff; }
.perso-panneau::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.perso-tete { display: flex; align-items: center; justify-content: space-between; }
.perso-tete h2 { margin: 0; font-size: 1.25rem; }
.perso-titre { margin: 0 0 -10px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texte-doux); }
.perso-pages { display: flex; }
.perso-pages .segment { flex: 1; }
.point-modif { color: #e0a100; font-weight: 700; }
.segment.is-actif .point-modif { color: #ffd24a; }
.perso-section { border-top: 1px solid var(--bordure); padding-top: 16px; }
.perso-section h3 { margin: 0 0 12px; font-size: 1rem; }
.perso-couleur { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.perso-couleur input { width: 52px; height: 40px; padding: 2px; border: 1px solid var(--bordure); border-radius: 8px; background: #fff; cursor: pointer; }
.perso-couleur small { display: block; color: var(--texte-doux); font-family: ui-monospace, monospace; }
.nuancier { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 14px; }
.pastille { aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); background: var(--c); padding: 0; }
.pastille:hover { transform: scale(1.1); }
.pastille.is-actif { outline: 3px solid var(--accent); outline-offset: 2px; }
.perso-note { margin: 12px 0 0; font-size: 0.85rem; color: var(--texte-doux); min-height: 1.2em; }
.perso-note.info { color: var(--accent); font-weight: 500; }
.perso-bientot p { margin: 0; font-size: 0.85rem; color: var(--texte-doux); }
.perso-actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--bordure); padding-top: 16px; }
.perso-actions .lien { align-self: flex-start; font-size: 0.9rem; }
.perso-boutons { display: flex; gap: 8px; }
.perso-boutons button { flex: 1; }
.perso-quitter { background: #fff8e1; border-radius: 10px; padding: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.perso-quitter p { margin: 0 0 4px; width: 100%; font-size: 0.9rem; color: #6b4e00; }
.perso-quitter button { flex: 1; width: auto; }
.perso-zone { padding: 20px 28px; display: flex; flex-direction: column; min-width: 0; }
.perso-legende { margin: 0 0 12px; color: var(--texte-doux); font-size: 0.9rem; }
.perso-cadre { position: relative; flex: 1; overflow: hidden; }
.perso-cadre iframe {
  position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0;
  border-radius: 10px; box-shadow: 0 10px 40px rgba(20, 30, 45, 0.25); background: #fff; pointer-events: none;
}

/* Page affichée dans l'aperçu : pas d'éléments de maquette, pas d'interaction */
.mode-apercu .bandeau-maquette, .mode-apercu .toast, .mode-apercu .crayon { display: none !important; }
.mode-apercu { pointer-events: none; }

/* Barre de défilement de la page, dans le thème (PC). Téléphone : barre native (overlay qui s'efface tout seul).
   Poignée gris translucide neutre, lisible sur tous les thèmes et décors ; elle passe à l'accent du thème au survol. */
@media (min-width: 768px) {
  @supports not selector(::-webkit-scrollbar) {   /* Firefox : version fine standard */
    html { scrollbar-width: thin; scrollbar-color: rgba(120, 128, 140, 0.55) transparent; }
  }
  html::-webkit-scrollbar { width: 12px; }
  html::-webkit-scrollbar-track { background: transparent; }
  html::-webkit-scrollbar-thumb {
    background-color: rgba(120, 128, 140, 0.5); border-radius: 8px;
    border: 3px solid transparent; background-clip: padding-box;   /* un peu d'air autour de la poignée */
  }
  html::-webkit-scrollbar-thumb:hover { background-color: var(--accent); }   /* accent du thème au survol */
}

/* Message si le démarrage échoue (au lieu d'une page vide) */
.erreur-demarrage { max-width: 720px; margin: 80px auto; padding: 32px; background: #fff; border: 1px solid #f0c4bd; border-radius: 14px; color: #1c1f24; }
.erreur-demarrage h1 { margin: 0 0 12px; font-size: 1.3rem; color: #b42318; }
.erreur-demarrage pre { background: #f6f7f9; padding: 12px; border-radius: 8px; font-size: 0.8rem; white-space: pre-wrap; max-height: 240px; overflow: auto; }
.erreur-demarrage .btn-principal { width: auto; }
/* « Mes couleurs » du nuancier */
.perso-mes-couleurs { margin: 16px 0 -4px; }
.pastille-perso { position: relative; display: block; }
.pastille-perso .pastille { width: 100%; }
.retirer-couleur {
  position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; border-radius: 50%; padding: 0;
  border: 0; background: #2b2f36; color: #fff; font-size: 12px; line-height: 18px; display: none;
}
.pastille-perso:hover .retirer-couleur, .retirer-couleur:focus-visible { display: block; }
.ajouter-couleur { background: none; border: 2px dashed #b8bec8; color: var(--texte-doux); font-size: 1.2rem; font-weight: 600; display: grid; place-items: center; }
.ajouter-couleur:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.ajouter-couleur:disabled { opacity: 0.35; cursor: default; transform: none; }

/* ---------- Images de fond (partie 2) ---------- */
#decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#decor img { position: absolute; transform: translate(-50%, -50%); height: auto; user-select: none; }
.hors-session #decor { display: none; }
.page { position: relative; z-index: 1; }
.auth { position: relative; z-index: 1; }

/* Éditeur : section Images */
.bouton-fichier { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; width: auto; }
.bouton-fichier.desactive { opacity: 0.45; pointer-events: none; }
.bouton-fichier.en-cours { opacity: 0.6; pointer-events: none; }
.bouton-fichier.en-cours::after { content: "Envoi…"; margin-left: 4px; color: var(--texte-doux); }
.perso-ajout { position: relative; display: inline-block; }
.perso-ajout-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; min-width: 250px; padding: 6px;
  background: var(--surface, #fff); border: 1px solid var(--bordure); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
.perso-ajout-menu button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 8px 10px;
  border: 0; border-radius: 7px; background: none; font: inherit; font-weight: 600; text-align: left; cursor: pointer; color: inherit;
}
.perso-ajout-menu button:hover, .perso-ajout-menu button:focus-visible { background: var(--accent-clair); }
.perso-ajout-menu small { font-weight: 400; font-size: 0.8rem; color: var(--texte-doux); }
.perso-aide { margin: 10px 0 0; font-size: 0.82rem; color: var(--texte-doux); line-height: 1.4; }
.perso-erreur { margin: 10px 0 0; font-size: 0.85rem; color: #b42318; background: #fef3f2; padding: 8px 10px; border-radius: 8px; }
.perso-images { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.perso-image { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--bordure); border-radius: 10px; cursor: pointer; }
.perso-image.is-choisie { border-color: var(--accent); background: var(--accent-clair); }
.perso-image > img { width: 48px; height: 48px; object-fit: contain; border-radius: 6px; flex: none;
  background: repeating-conic-gradient(#e7e9ec 0% 25%, #fff 0% 50%) 50% / 12px 12px; }
.perso-image-infos { flex: 1; min-width: 0; }
.perso-image-infos strong { display: block; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perso-image-infos label { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--texte-doux); margin-top: 4px; }
.perso-image-infos input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
.perso-image-infos output { width: 38px; text-align: right; }
.perso-image-boutons { display: flex; flex-direction: column; gap: 2px; }
.perso-image-boutons button { width: 26px; height: 22px; border: 1px solid var(--bordure); background: #fff; border-radius: 5px; padding: 0; font-size: 0.8rem; line-height: 1; }
.perso-image-boutons button:disabled { opacity: 0.3; }
.perso-image-boutons .danger { color: #b42318; }

/* Calque de placement au-dessus de l'aperçu */
.perso-calque { position: absolute; top: 0; outline: none; }
.calque-image { position: absolute; cursor: grab; border: 1px dashed rgba(31, 95, 139, 0.45); border-radius: 2px; }
.calque-image:hover { border-color: var(--accent); background: rgba(31, 95, 139, 0.06); }
.calque-image.is-choisie { border: 2px solid var(--accent); box-shadow: 0 0 0 9999px rgba(0,0,0,0); }
.calque-image:active { cursor: grabbing; }
.perso-calque:focus-visible .calque-image.is-choisie { outline: 2px solid #fff; outline-offset: 1px; }
.perso-racine { display: contents; }
/* Poignées de redimensionnement aux coins de l'image choisie */
.poignee { position: absolute; width: 12px; height: 12px; background: #fff; border: 2px solid var(--accent); border-radius: 3px; z-index: 2; }
.poignee-nw { left: -7px; top: -7px; cursor: nwse-resize; }
.poignee-se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.poignee-ne { right: -7px; top: -7px; cursor: nesw-resize; }
.poignee-sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.poignee:hover { background: var(--accent); }
/* Miroir */
.perso-image > img.en-miroir { transform: scaleX(-1); }
.bouton-miroir { margin-top: 6px; border: 1px solid var(--bordure); background: #fff; border-radius: 6px; padding: 2px 8px; font-size: 0.78rem; color: var(--texte-doux); }
.bouton-miroir:hover { border-color: var(--accent); color: var(--accent); }
.bouton-miroir.is-actif { background: var(--accent); border-color: var(--accent); color: #fff; }
.perso-image-bascules { display: flex; flex-wrap: wrap; gap: 6px; }
.bouton-miroir.en-cours { border-style: dashed; color: var(--accent); cursor: progress; animation: clignote 1.2s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0.45; } }
/* Réglages de l'ombre, sous la ligne de l'image choisie */
.perso-ombre { flex-basis: 100%; border-top: 1px solid var(--bordure); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; cursor: default; }
.perso-ombre label { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--texte-doux); }
.perso-ombre label input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
.perso-ombre output { width: 44px; text-align: right; }
.perso-ombre-portee .segment { flex: 1; font-size: 0.78rem; padding: 4px 6px; }
.perso-ombre-couleur { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 4px; }
.perso-ombre-couleur input[type="color"] { width: 30px; height: 24px; padding: 0; border: 1px solid var(--bordure); border-radius: 5px; background: #fff; }
.pastille.petite { width: 20px; height: 20px; }
.perso-ombre-portee { display: flex; }
.pastille.petite.is-actif { outline-width: 2px; outline-offset: 1px; }
/* 4 pages (dont « Connexion Privé ») : colonnes égales, qui tiennent dans le panneau */
.perso-pages { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); width: 100%; }
.perso-pages .segment { padding: 6px 4px; font-size: 0.84rem; line-height: 1.15; text-align: center; min-width: 0; }
/* Privé : Tout / Albums (albums privés) */
.prive-vues { margin: 16px 0 0; }
#prive-albums .albums-tete { padding-top: 14px; }
/* Barre de filtres collée sous la barre du haut : coins du haut carrés (sinon la grille apparaît dans les coins) */
.filtres.est-collee { border-top-left-radius: 0; border-top-right-radius: 0; border-top-color: transparent; }

/* ---------- Panneau des filtres (téléphone) : sur PC, ses éléments restent dans la barre ---------- */
.filtres-plus { display: contents; }
.bouton-feuille, .feuille-tete, .feuille-fond, .tab-icone { display: none; }

/* ================= Version téléphone (moins de 768 px de large) ================= */
@media (max-width: 767px) {
  :root { --bas-nav: calc(64px + env(safe-area-inset-bottom)); }

  /* En-tête : logo et pastille du compte. Personnalisation indisponible. */
  .topbar-inner { height: 56px; padding: 0 12px; gap: 12px; }
  .logo { font-size: 1.2rem; }
  .compteur, .crayon, .pas-sur-tel { display: none !important; }
  #decor { display: none; }   /* thèmes : couleur de fond seulement, sans images de décor */

  /* Barre de navigation fixe en bas */
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    height: var(--bas-nav); padding-bottom: env(safe-area-inset-bottom);
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    background: var(--surface); border-top: 1px solid var(--bordure);
  }
  .tab {
    flex-direction: column; justify-content: center; gap: 3px;
    padding: 0; height: 100%; border-bottom: 0; font-size: 0.75rem;
    -webkit-tap-highlight-color: transparent;
  }
  .tab .tab-icone, .tab .cadenas { display: grid; place-items: center; order: -1; padding: 3px 18px; border-radius: 16px; }
  .tab .tab-icone svg, .tab .cadenas svg { width: 22px; height: 22px; }
  .tab.is-active { border-bottom-color: transparent; }
  .tab.is-active .tab-icone, .tab.is-active .cadenas { background: var(--accent-clair); }

  /* Grille à 2 px des bords, en colonnes (2 à 6, pincement) ; la page défile au doigt, le pincement est géré par le site */
  .page { padding: 0 2px calc(var(--bas-nav) + 16px); touch-action: pan-x pan-y; }   /* grille à 2 px des bords, comme l'écart entre images */
  .grille { gap: 2px; grid-template-columns: repeat(var(--colonnes, 3), 1fr); }
  .mois.suite { margin-top: 2px; }
  .grille.grille-origine { gap: 2px; }
  .vignette { border-radius: 0; }
  .mois h2 { margin: 20px 12px 8px; padding-left: 0; font-size: 1rem; }   /* mobile : la coche est dans le flux, pas d'espace réservé */
  .mois h2.sep-annee { font-size: 1.25rem; }
  .mois h2.sep-jour { font-size: 0.95rem; margin-top: 16px; }

  /* Barre des filtres : Tout / Photos / Vidéos et bouton « Filtres » */
  .filtres { top: 56px; margin: 8px 8px 0; padding: 8px; gap: 8px; flex-wrap: nowrap; }
  .filtres > .segments { flex: 1; }
  .filtres > .segments .segment { flex: 1; padding: 6px 8px; }
  .bouton-feuille { display: inline-flex; flex: none; }
  .filtres-plus { display: none; }

  /* Panneau des filtres, qui monte du bas */
  body:has(.filtres-plus.is-ouvert) .page { z-index: 35; }   /* au-dessus de la barre du bas */
  .feuille-fond { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.35); }
  .filtres-plus.is-ouvert {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 82vh; overflow-y: auto;
    padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
    background: var(--surface); color: var(--texte); border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2); animation: monte 0.18s ease-out;
  }
  @keyframes monte { from { transform: translateY(40px); opacity: 0.4; } }
  .feuille-tete { display: flex; align-items: baseline; gap: 10px; padding: 4px 0 6px; border-bottom: 1px solid var(--bordure); }
  .feuille-tete strong { font-size: 1.1rem; }
  .resultat-feuille { color: var(--texte-doux); font-size: 0.85rem; }
  .feuille-tete .lien { margin-left: auto; font-weight: 600; }
  .filtres-plus .filtre, .filtres-plus > .puce, .filtres-plus .recherche { width: 100%; }
  .filtres-plus .puce { width: 100%; justify-content: space-between; padding: 10px 14px; font-size: 0.95rem; }
  .filtres-plus .puce-tri, .filtres-plus [data-favoris] { justify-content: flex-start; }
  .filtres-plus .pop { position: static; min-width: 0; margin-top: 6px; box-shadow: none; }
  .filtres-plus .recherche input { width: 100%; padding: 10px 0; font-size: 1rem; }
  .filtres-plus .barre-droite { margin-left: 0; justify-content: space-between; flex-wrap: wrap; }
  .filtres-plus .resultat, .filtres-plus .segments.affichage:has([data-zoom]) { display: none !important; }

  /* Visionneuse plein écran : gestes gérés par le site (pas de défilement ni de zoom du navigateur) */
  .visionneuse { touch-action: none; background: rgba(13, 14, 16, var(--fondu, 1)); }
  .vis-barre {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: auto; gap: 2px;
    padding: calc(6px + env(safe-area-inset-top)) 4px 18px;
    background: linear-gradient(rgba(0, 0, 0, 0.65), transparent); transition: opacity 0.2s;
  }
  .vis-barre .btn-icone { width: 40px; height: 40px; flex: none; }
  .vis-titre { flex: 1; min-width: 0; font-size: 0.85rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vis-titre span { display: block; margin-left: 0; font-size: 0.78rem; }
  .vis-actions { gap: 0; }
  /* Barre du haut (08/10/2026) : ← (et capture pour une vidéo) à gauche, ⋯ à droite ; ni date ni autres boutons. */
  .vis-titre { visibility: hidden; }
  .vis-actions > :not(.vis-plus) { display: none; }
  .vis-plus, .visionneuse.est-video .vis-capture { display: grid; }
  .vis-ouverte .toast { bottom: calc(110px + env(safe-area-inset-bottom)); }
  .ui-masquee .vis-barre { opacity: 0; pointer-events: none; }
  .vis-corps { position: relative; }
  .vis-media { padding: 0; overflow: hidden; }
  .vis-media img { will-change: transform; }
  .vis-media .lecteur { will-change: transform; touch-action: none; }
  .vis-fleche { display: none; }
  /* Infos : panneau qui monte du bas en suivant le doigt (placé par placerInfosTel), refermé en glissant vers le bas */
  .vis-infos {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; width: auto; max-height: 65%;
    padding: 6px 20px calc(20px + env(safe-area-inset-bottom)); border-left: 0; border-radius: 16px 16px 0 0;
    background: #1b1d21; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5); will-change: transform; touch-action: pan-y;
  }
  .vis-infos::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: #4a4e55; margin: 4px auto 10px; }
  .vis-infos h3 { margin-top: 0; }

  /* Éléments fixés en bas : au-dessus de la barre de navigation */
  .toast { left: 12px; right: 12px; bottom: calc(var(--bas-nav) + 12px); }
  .bandeau-maquette { display: none !important; }   /* bandeau Maquette (accès de test) : PC seulement */
}

/* ---------- Téléphone : grille sans survol, sélection par appui long, défilement de la visionneuse ---------- */
.vis-voisin { display: none; }
@media (max-width: 767px) {
  .vis-media { position: relative; }
  .vis-voisin { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
  /* Pas de survol au doigt : ni dégradé, ni coche, ni étoile sur les vignettes hors sélection */
  .btn-favori { display: none !important; }
  .vignette { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
  .vignette:hover::after { opacity: 0; }
  .en-selection .vignette::after { opacity: 1; }
  body:not(.en-selection) .coche { display: none; }
  .coche { top: 6px; left: 6px; width: 22px; height: 22px; }
  .vignette.is-choisie img { transform: scale(0.88); border-radius: 4px; }
  /* Barre de sélection : compacte en haut, actions en bas (à la place de la barre de navigation) */
  .selection { height: 56px; gap: 8px; padding: 0 8px; }
  .selection #selection-nb { font-size: 0.95rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .selection .lien-clair { font-size: 0.85rem; white-space: nowrap; }
  .selection-actions {
    position: fixed; left: 0; right: 0; bottom: 0; height: var(--bas-nav); padding: 0 6px env(safe-area-inset-bottom);
    display: flex; align-items: center; gap: 6px; background: var(--accent);
  }
  .selection .selection-actions .btn { margin-left: 0; flex: 1; min-width: 0; padding: 8px 4px; font-size: 0.8rem; line-height: 1.15; border-color: rgba(255, 255, 255, 0.45); }
  .en-selection .toast { bottom: calc(var(--bas-nav) + 12px); }
  /* Coche des titres (mois…) : dans la ligne du titre, pas dans la marge (il n'y en a pas au téléphone) */
  .coche.coche-groupe { position: relative; top: auto; left: auto; transform: none; flex: none; align-self: center; }
  .selection .lien-clair { font-size: 0.95rem; padding: 6px 8px; }
}

/* ---------- Téléphone : Albums (3 colonnes, couvertures 4:5, glisser au doigt) ---------- */
@media (max-width: 767px) {
  .albums-tete { flex-wrap: wrap; gap: 8px; padding: 12px 8px 10px; min-height: 0; }
  .fil { flex: 1 1 100%; font-size: 1.1rem; }
  .albums-tete.dans-album .fil { flex: 1 1 0; min-width: 0; }   /* album ouvert : ⋯ sur la ligne du chemin (07/11/2026) */
  .albums-actions { margin-left: auto; gap: 6px; }
  .albums-actions .btn-secondaire, .btn-principal.compact { padding: 6px 10px; font-size: 0.85rem; }
  .albums-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; padding: 0 6px 24px; }   /* minmax : un nom long ne force pas la largeur */
  .couverture { aspect-ratio: 4 / 5; border-radius: 10px; }
  .carte-album:hover .couverture { transform: none; box-shadow: none; }
  .carte-album { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; user-select: none; }
  .carte-texte { padding: 6px 24px 0 2px; }
  .carte-texte strong { font-size: 0.82rem; }
  .carte-texte small { display: block; font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* une ligne */
  .carte-texte small .lien-dossier, .carte-texte small .carte-favoris { display: inline-block; vertical-align: -2px; margin-right: 3px; }
  .carte-menu { width: 28px; height: 28px; right: -4px; bottom: 2px; }
  .couverture-vide svg { width: 28px; height: 28px; }
  .mosaique { gap: 2px; padding: 2px; }
  .mosaique img, .mosaique span { border-radius: 6px; }
  .carte-album.cible-avant::before { left: -6px; }
  .carte-album.cible-apres::after { right: -6px; }
  .carte-album.cible-avant::before, .carte-album.cible-apres::after { bottom: 34px; }
  /* Fantôme qui suit le doigt pendant un glisser */
  .fantome-doigt { top: 0; left: 0; z-index: 70; pointer-events: none; opacity: 0.95; }
  .carte-album.en-glisse { opacity: 0.3; }
  /* Fenêtres (Nouvel album, Déplacer…) : moins de marge autour */
  .modale { padding: 12px; }
  .modale-carte { padding: 20px 18px 22px; }
}

/* ---------- Téléphone : fenêtre « Couverture de … » en panneau qui monte du bas ---------- */
@media (max-width: 767px) {
  .modale:has(.couv) { align-items: flex-end; padding: 0; }
  .modale-carte:has(.couv) {
    max-width: none; max-height: 92vh; border-radius: 16px 16px 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); animation: monte 0.18s ease-out;
  }
  .couv { gap: 12px; }
  /* Aperçu réduit et centré, puis les 3 choix sur toute la largeur */
  .couv-tete { flex-direction: column; align-items: stretch; gap: 12px; }
  .couv-colonne { width: 104px; align-self: center; }
  .couv.en-recadrage .couv-colonne { width: min(260px, 100%); }
  .couv-cadrage-boutons .btn-principal, .couv-cadrage-boutons .btn-secondaire { flex: 1; }
  .couv-options { gap: 6px; }
  .couv-option { padding: 9px 12px; gap: 10px; }
  .couv-option strong { font-size: 0.92rem; }
  .couv-option small { font-size: 0.8rem; line-height: 1.3; }
  /* Albums proposés (groupe) : 3 colonnes */
  .couv-albums { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 38vh; padding: 3px; }
  .couv-album { font-size: 0.78rem; }
  /* Image choisie : vignette et nom, bouton sur toute la largeur en dessous */
  .couv-image-choisie { flex-wrap: wrap; gap: 10px; padding: 10px; }
  .couv-image-choisie img { width: 56px; height: 56px; }
  .couv-image-choisie span { flex: 1 1 160px; word-break: normal; overflow-wrap: anywhere; }
  .couv-image-choisie .btn-secondaire { flex: 1 1 100%; }
  /* Enregistrer : toujours visible en bas du panneau */
  .couv > .btn-principal { position: sticky; bottom: 0; align-self: stretch; width: 100%; padding: 12px; box-shadow: 0 -10px 14px var(--surface); }
}

/* ---------- Téléphone : bandeau du choix de couverture sur une ligne ---------- */
@media (max-width: 767px) {
  .bandeau-couverture { top: 56px; height: 48px; gap: 8px; padding: 0 8px 0 12px; font-size: 0.85rem; }
  #bandeau-couverture-texte { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bandeau-couverture .bandeau-aide { display: none; }   /* « Échap pour annuler » : sans objet au doigt */
  .bandeau-couverture .btn { flex: none; padding: 6px 12px; font-size: 0.85rem; }
  .choix-couverture .page { padding-top: 48px; }
  .en-masquage .page { padding-top: 48px; }
  .choix-couverture .filtres { top: 104px; }
}

/* Textes courts pour le téléphone (texte-tel), longs pour le PC (texte-pc) */
.texte-tel { display: none; }
/* ---------- Téléphone : Privé (bandeau déverrouillé compact, Tout / Albums sur toute la largeur) ---------- */
@media (max-width: 767px) {
  .texte-pc { display: none; }
  .texte-tel { display: inline; }
  .verrou { margin: 64px auto; padding: 0 16px; }
  .prive-vues { display: grid; grid-template-columns: 1fr 1fr; margin: 8px 8px 0; }
  .prive-vues .segment { padding: 7px 8px; }
}

/* ---------- Onglet Synchro (synchro.js) ---------- */
.onglet-synchro .compteur { display: none; }
.synchro {
  max-width: 1240px; margin: 24px auto 0; display: grid; gap: 32px;
  /* Délimitations bien visibles sur tous les fonds (blanc compris) : tirées du texte et des cartes du thème */
  --bordure-synchro: color-mix(in srgb, var(--texte) 22%, var(--surface));
}
/* PC : même largeur que Photos (celle de .page), tout tient dans la hauteur de l'écran (l'historique défile dans sa partie).
   Un tiers à gauche (deux cases de dépôt sur toute la hauteur), deux tiers à droite (boutons, historique). */
@media (min-width: 768px) {
  .synchro {
    grid-template-columns: 1fr 2fr; width: 100%; max-width: none; margin: 20px 0 0;
    height: calc(100 * var(--vh) - 65px - 8px - 20px - 24px); min-height: 480px;   /* écran − barre − haut de .page − marge − bas */
  }
  .onglet-synchro .page { padding-bottom: 0; }
  .synchro-principal { grid-template-rows: auto minmax(0, 1fr); min-height: 0; gap: 24px; }
  .synchro-historique {
    display: flex; flex-direction: column; min-height: 0;
    background: var(--surface); border: 1px solid var(--bordure-synchro); border-radius: 14px; padding: 16px 16px 8px;
  }
  .synchro-historique .historique { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; scrollbar-gutter: stable; }
  /* Barre de défilement de l'historique : fine et arrondie, bleue au survol (comme le panneau de personnalisation) */
  @supports not selector(::-webkit-scrollbar) {
    .synchro-historique .historique { scrollbar-width: thin; scrollbar-color: var(--bordure) transparent; }
  }
  .synchro-historique .historique::-webkit-scrollbar { width: 8px; }
  .synchro-historique .historique::-webkit-scrollbar-track { background: transparent; margin: 4px 0; }
  .synchro-historique .historique::-webkit-scrollbar-thumb { background: var(--bordure); border-radius: 8px; border: 2px solid var(--fond); }
  .synchro-historique .historique:hover::-webkit-scrollbar-thumb { background: #b9c0ca; }
  .synchro-historique .historique::-webkit-scrollbar-thumb:hover { background: var(--accent); }
}
.synchro-depots { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; min-height: 0; }
.zone-depot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center;
  border: 2px dashed var(--bordure-synchro); border-radius: 14px; color: var(--texte-doux);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  transition: border-color 0.15s, background 0.15s;
}
.zone-depot strong { color: var(--texte); font-size: 1.05rem; }
.zone-depot span { font-size: 0.9rem; }
.zone-depot svg { color: var(--accent); margin-bottom: 4px; }
.zone-depot.survol { border-color: var(--accent); background: var(--accent-clair); }
.synchro-principal { display: grid; gap: 32px; align-content: start; min-width: 0; }
.synchro-titre { font-size: 1.4rem; margin: 0 0 16px; }
/* Zone des boutons (le dépôt de fichiers est dans les cases de gauche, au PC) */
.depot {
  border: 1px solid var(--bordure-synchro); border-radius: 14px; background: var(--surface);
  padding: 32px 24px; display: grid; justify-items: center; gap: 12px; text-align: center; transition: border-color 0.15s, background 0.15s;
}
.depot.survol { border-color: var(--accent); background: var(--accent-clair); }
.depot-texte { margin: 4px 0 0; font-size: 0.95rem; color: var(--texte-doux); }
.depot label { cursor: pointer; }
/* Gros bouton rond « Synchro · manuelle sélectionnée » (maquette, choix de Jerel) : poussoir en relief qui s'enfonce
   quand on appuie. Fond clair : bouton bleu plein et ombres douces (lumière en haut à gauche, ombre en bas à droite),
   sur une zone gris-bleu pour que la lumière se voie (choix M). Fond foncé : anneau bleu épais, centre sombre (choix N). */
.bouton-synchro {
  --synchro-bord: #164867;
  --neo-ombre: color-mix(in srgb, var(--surface) 58%, #5b7a99);
  --neo-lumiere: var(--surface);
  position: relative; top: 0;
  width: 190px; height: 190px; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 4px;
  color: #fff; text-align: center; user-select: none; -webkit-tap-highlight-color: transparent;
  background: #2672a6;
  box-shadow: 0 10px 0 var(--synchro-bord), 12px 20px 26px var(--neo-ombre), -10px -10px 22px var(--neo-lumiere);
  transition: top 0.12s, box-shadow 0.12s, filter 0.12s, background 0.12s;
  margin-bottom: 24px;
}
body:not(.fond-sombre) .depot:has(.bouton-synchro):not(.survol) { background: color-mix(in srgb, var(--surface) 88%, #5b7a99); }
.bouton-synchro:hover { filter: brightness(1.06); }
.bouton-synchro:active { top: 8px; box-shadow: 0 2px 0 var(--synchro-bord), 5px 8px 12px var(--neo-ombre), -5px -5px 12px var(--neo-lumiere); }
body.fond-sombre .bouton-synchro { background: var(--surface); color: var(--accent); border: 10px solid #2672a6; box-shadow: 0 10px 0 var(--synchro-bord), 0 18px 24px rgba(0, 0, 0, 0.35); }
body.fond-sombre .bouton-synchro:active { background: var(--accent-clair); box-shadow: 0 2px 0 var(--synchro-bord), 0 6px 10px rgba(0, 0, 0, 0.3); }
.bouton-synchro:focus-visible { outline: 3px solid var(--accent-clair); outline-offset: 6px; }
button.bouton-synchro { border: 0; padding: 0; font: inherit; cursor: pointer; }
/* PC : deux boutons côte à côte (sélection, scan), la liste des dossiers scannés à droite */
.depot-haut { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; width: 100%; }
.boutons-synchro { display: flex; gap: 28px; }
/* Engrenage à côté du titre « Synchro » (PC) : réglages de la synchro (nom de la machine) */
.synchro-titre { display: flex; align-items: center; gap: 8px; }
.reglages-synchro { color: var(--texte-doux); }
.reglages-synchro:hover { color: var(--accent); background: var(--accent-clair); }
.reglages-aide { margin: 0; font-size: 0.85rem; color: var(--texte-doux); line-height: 1.4; }
.boutons-synchro .bouton-synchro { width: 170px; height: 170px; }
.boutons-synchro .bouton-synchro-detail { min-height: 2.4em; }   /* sous-titre sur 2 lignes : titres alignés */
.selection-synchro { position: relative; }
.menu-selection {
  position: absolute; top: calc(100% - 6px); left: 50%; transform: translateX(-50%); z-index: 20; min-width: 210px;
  display: grid; padding: 6px; background: var(--surface); border: 1px solid var(--bordure); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(20, 30, 45, 0.18);
}
.menu-selection button { border: 0; background: none; font: inherit; color: var(--texte); text-align: left; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.menu-selection button:hover, .menu-selection button:focus-visible { background: var(--accent-clair); }
.dossiers-scan {
  flex: 1 1 190px; max-width: 270px; align-self: stretch;   /* part de 190 px (pas de retour à la ligne), grandit jusqu'à 270 */ text-align: left; display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--bordure-synchro); border-radius: 12px; padding: 14px;
}
.dossiers-scan h3 { margin: 0; font-size: 0.95rem; }
.dossiers-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dossiers-plus {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--bordure); background: var(--surface); color: var(--accent);
  font-size: 1.25rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 2px;
}
.dossiers-plus:hover, .dossiers-plus:focus-visible { background: var(--accent-clair); border-color: var(--accent); }
.dossiers-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 200px; overflow-y: auto; }
.dossiers-liste li { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 8px; color: var(--accent); }
.dossiers-liste li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texte); }
.dossier-retirer { border: 0; background: none; color: var(--texte-doux); cursor: pointer; padding: 2px 6px; border-radius: 6px; font-size: 0.85rem; }
.dossier-retirer:hover { background: var(--fond); color: var(--texte); }
.dossiers-vide { margin: 0; color: var(--texte-doux); font-size: 0.88rem; }
.bouton-synchro-icone svg { width: 44px; height: 44px; }
.bouton-synchro-nom { font-size: 1.6rem; font-weight: 800; letter-spacing: 0.02em; line-height: 1.1; }
.bouton-synchro-detail { font-size: 0.85rem; font-weight: 500; opacity: 0.92; max-width: 130px; line-height: 1.2; }
.synchro-en-cours .depot { opacity: 0.5; pointer-events: none; }
.envoi { margin-top: 16px; padding: 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--bordure); }
.envoi-tete { display: flex; align-items: center; gap: 12px; }
.envoi-tete span { color: var(--texte-doux); font-size: 0.9rem; flex: 1; }
.envoi-barre { height: 8px; border-radius: 4px; background: var(--bordure); overflow: hidden; margin: 12px 0 8px; }
.envoi-barre span { display: block; height: 100%; background: var(--accent); transition: width 0.2s; }
.envoi-nom { margin: 0; font-size: 0.85rem; color: var(--texte-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.synchro-historique h2 { font-size: 1.1rem; margin: 0 0 12px; }
.historique-vide { color: var(--texte-doux); }
/* PC : tableau (Type, Date, Appareil, Médias, Taille) */
.ligne-synchro { display: grid; grid-template-columns: 1.3fr 1.3fr 1.3fr 1.6fr 0.7fr; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--bordure); }
.ligne-synchro.entete { font-size: 0.8rem; color: var(--texte-doux); font-weight: 600; padding-top: 0; }
.ligne-synchro em { font-style: normal; font-size: 0.75rem; color: #b35c00; background: #fff3e0; border-radius: 10px; padding: 1px 8px; margin-left: 6px; }
.ligne-synchro small { display: block; color: var(--texte-doux); font-size: 0.8rem; }
.s-taille { color: var(--texte-doux); text-align: right; }
.depot .texte-tel { display: none; }
.depot .btn-secondaire, .envoi-tete .btn-secondaire { width: auto; padding: 10px 20px; }

@media (max-width: 767px) {
  /* Téléphone : deux parties, l'envoi en haut, l'historique en bas (cartes). */
  .synchro { margin: 16px 12px 0; gap: 24px; }
  .synchro-titre { display: none; }
  .depot { padding: 24px 16px; border-style: solid; border-width: 1px; }
  .depot .texte-pc { display: none; }
  .depot .texte-tel { display: block; }
  .depot { padding: 28px 16px 36px; }
  .bouton-synchro, .boutons-synchro .bouton-synchro { width: 200px; height: 200px; margin-bottom: 10px; }
  .ligne-synchro.entete { display: none; }
  .ligne-synchro {
    grid-template-columns: 1fr auto; grid-template-areas: "type taille" "date date" "medias medias";
    gap: 2px 12px; padding: 12px; margin-bottom: 8px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface);
  }
  .s-type { grid-area: type; font-weight: 600; }
  .s-taille { grid-area: taille; }
  .ligne-synchro { grid-template-areas: "type taille" "date date" "appareil appareil" "medias medias"; }
  .s-date { grid-area: date; font-size: 0.85rem; color: var(--texte-doux); }
  .s-appareil { grid-area: appareil; font-size: 0.85rem; color: var(--texte-doux); }
  .s-medias { grid-area: medias; margin-top: 4px; }
}

/* ---------- Routes de rangement (évolution 10, routes.js) : sous la page Synchro, PC ----------
   Liste L1 (choix de Jerel du 13/10/2026) : tableau aligné, titres au-dessus ; chaque route est une rangée en sous-grille,
   une sous-ligne par condition ; routes par défaut sur fond plus clair. */
.routes {
  --bordure-synchro: color-mix(in srgb, var(--texte) 22%, var(--surface));
  margin: 24px 0 40px; background: var(--surface); border: 1px solid var(--bordure-synchro); border-radius: 14px; padding: 16px 20px 18px;
}
.routes-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.routes-tete h2 { font-size: 1.1rem; margin: 0; }
.routes-tete .btn-principal { width: auto; padding: 8px 16px; }
.routes-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; column-gap: 12px;
  grid-template-columns: 20px 30px minmax(90px, auto) 44px minmax(160px, 1fr) 18px minmax(200px, 1.2fr) 60px 46px 34px;
}
.rt-vide { grid-column: 1 / -1; color: var(--texte-doux); }
.rt-entete, .rt { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
.rt-entete span { font-size: 0.75rem; font-weight: 600; color: var(--texte-doux); padding: 0 0 6px; }
.rt { border-top: 1px solid var(--bordure); padding: 6px 0; cursor: pointer; border-radius: 0; }
.rt > span { min-width: 0; min-height: 30px; display: flex; align-items: center; }
.rt:hover { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.rt.defaut { background: color-mix(in srgb, var(--fond) 60%, var(--surface)); color: color-mix(in srgb, var(--texte) 80%, var(--surface)); }
.rt.defaut:hover { background: color-mix(in srgb, var(--fond) 100%, var(--surface)); }
.rt.eteinte > span:not(.rt-c-actif):not(.rt-c-menu) { opacity: 0.45; }
.rt.glisse { opacity: 0.35; }
.rt.depot-avant { box-shadow: inset 0 3px 0 var(--accent); }
.rt.depot-apres { box-shadow: inset 0 -3px 0 var(--accent); }
.rt-poignee { color: var(--texte-doux); cursor: grab; display: grid; place-items: center; }
.rt-poignee.fixe { visibility: hidden; }
.rt-lien { font-size: 0.72rem; color: var(--texte-doux); text-transform: uppercase; letter-spacing: 0.04em; }
.rt-sens { display: inline-grid; place-items: center; width: 26px; height: 24px; border-radius: 6px; background: var(--fond); font-style: normal; font-weight: 700; }
.rt-c-valeur { overflow: hidden; } .rt-c-valeur, .rt-c-critere { white-space: nowrap; text-overflow: ellipsis; }
.rt-c-fleche { color: var(--texte-doux); justify-content: center; }
.rt-album { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; color: var(--accent); }
.rt-album > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-album svg { flex: none; }
.rt-album.sans { color: var(--texte-doux); font-weight: 500; }
.rt-album.favoris svg { color: #e0a100; }
#rt-case-dyn[hidden] { display: none; }
.rt-var { font-style: normal; background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 5px; padding: 0 4px; }
.rt-dyn { display: inline-flex; color: var(--texte-doux); flex: none; }
.rt-c-compte { justify-content: center; text-align: center; color: var(--texte-doux); font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.rt-entete .rt-c-compte { display: block; }
.rt-menu { width: 32px; height: 32px; font-size: 1.1rem; color: var(--texte-doux); }
.rt-popmenu {
  position: fixed; z-index: 40; min-width: 150px; display: grid; padding: 6px;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 10px; box-shadow: 0 10px 28px rgba(20, 30, 45, 0.18);
}
.rt-popmenu button { border: 0; background: none; font: inherit; color: var(--texte); text-align: left; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.rt-popmenu button:hover { background: var(--accent-clair); }
.rt-popmenu .danger { color: #b42318; }
/* Fenêtre d'une route (F2 sans numéros) */
.modale-carte.rt-modale { max-width: 980px; position: relative; }
.rt-editeur { display: grid; gap: 4px; }
.rt-info {
  margin: 0 10px 0 auto; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--accent);
  color: var(--accent); background: none; font: italic 700 0.9rem Georgia, serif; cursor: pointer;
}
.rt-info.ouvert, .rt-info:hover { background: var(--accent); color: #fff; }
.rt-aide {
  position: absolute; top: 60px; right: 24px; z-index: 6; width: 540px; max-height: calc(100% - 76px); overflow-y: auto;
  padding: 14px 16px; font-size: 0.86rem; line-height: 1.45;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}
.rt-aide[hidden] { display: none; }
.rt-aide h4 { margin: 0 0 8px; font-size: 0.95rem; }
.rt-aide dl { margin: 0; display: grid; grid-template-columns: 86px 1fr; gap: 5px 10px; }
.rt-aide dt { font-weight: 600; color: var(--accent); } .rt-aide dd { margin: 0; }
.rt-aide-ex { margin-top: 10px; padding: 10px 12px; background: var(--accent-clair); border-radius: 8px; }
.rt-etape { padding: 14px 0; border-top: 1px solid var(--bordure); }
.rt-etape:first-of-type { border-top: 0; padding-top: 0; }
.rt-etape h3 { margin: 0 0 10px; font-size: 1rem; }
.rt-grille { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 6px 10px; align-items: center; }
.rt-ligne { display: grid; grid-template-columns: 140px 84px minmax(0, 1fr) 30px; gap: 10px; align-items: center; }
.rt-ligne.fixe { opacity: 0.7; }
.rt-debut { display: flex; align-items: center; }
.rt-si { font-weight: 700; color: var(--texte-doux); padding-left: 4px; }
.rt-et-ou .segment { padding: 4px 9px; font-size: 0.85rem; }
.rt-sens-choix .segment { min-width: 34px; font-weight: 700; font-size: 1rem; padding: 4px 8px; }
.rt-valeur { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.rt-editeur select, .rt-ligne input:not([type="checkbox"]) {
  padding: 6px 9px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--surface); color: var(--texte); font: inherit; font-size: 0.9rem;
}
.rt-ligne input[type="text"] { width: 230px; }
.rt-ligne .rt-nombre { width: 72px; }
.rt-ligne input[type="date"], .rt-ligne input[type="time"] { width: 138px; padding-right: 4px; }
.rt-valeur .segments .segment { padding-left: 10px; padding-right: 10px; }
.rt-a, .rt-unite { color: var(--texte-doux); font-size: 0.9rem; }
.rt-jours, .rt-exts { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.rt-jour {
  border: 1px solid var(--bordure); background: var(--surface); color: var(--texte); border-radius: 6px; padding: 4px 8px; min-width: 30px;
  font: inherit; font-size: 0.85rem; cursor: pointer;
}
.rt-jour.is-actif { background: var(--accent); border-color: var(--accent); color: #fff; }
.rt-exts select { min-width: 74px; }
.rt-exts .rt-ext-vide { color: var(--texte-doux); border-style: dashed; }
.rt-ville { position: relative; }
.rt-villes {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; min-width: 280px; max-height: 260px; overflow-y: auto; display: grid; padding: 4px;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 8px; box-shadow: 0 10px 28px rgba(20, 30, 45, 0.18);
}
.rt-villes[hidden] { display: none; }
.rt-villes button { border: 0; background: none; font: inherit; font-size: 0.9rem; color: var(--texte); text-align: left; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.rt-villes button:hover { background: var(--accent-clair); }
.rt-retirer { width: 30px; height: 30px; color: var(--texte-doux); font-size: 0.85rem; }
.rt-ajout { margin: 8px 0 0 84px; font-size: 0.9rem; }
.rt-lab { font-size: 0.75rem; font-weight: 600; color: var(--texte-doux); }
.rt-dest-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rt-champ-dest {
  display: flex; align-items: center; gap: 8px; width: 360px; padding: 0 10px; color: var(--accent);
  border: 1px solid var(--bordure); border-radius: 8px; background: var(--surface);
}
.rt-champ-dest:focus-within { border-color: var(--accent); }
.rt-champ-dest input { flex: 1; min-width: 0; border: 0; padding: 8px 0; background: transparent; font: inherit; color: var(--texte); outline: none; }
.rt-dest-ligne .case { margin: 0; }
.rt-menu-var { position: relative; }
.rt-menu-var .btn-secondaire { padding: 8px 12px; }
.rt-vars {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; width: 250px; display: grid; padding: 4px;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 8px; box-shadow: 0 10px 28px rgba(20, 30, 45, 0.18);
}
.rt-vars[hidden] { display: none; }
.rt-vars button { display: flex; justify-content: space-between; gap: 10px; border: 0; background: none; font: inherit; color: var(--texte); padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.rt-vars button:hover { background: var(--accent-clair); }
.rt-vars small { color: var(--texte-doux); }
.rt-radios { display: grid; gap: 8px; }
.rt-radios label { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--bordure); border-radius: 10px; cursor: pointer; font-size: 0.92rem; }
.rt-radios label:has(input:checked) { border-color: var(--accent); background: var(--accent-clair); }
.rt-radios input { accent-color: var(--accent); margin: 0; }
.rt-radios b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---------- Actions de la sélection en pictos (cadrage 3.9) ---------- */
.selection-actions { gap: 6px; }
.btn-sel {
  position: relative; width: 42px; height: 42px; border: 0; border-radius: 50%; padding: 0;
  display: inline-grid; place-items: center; background: transparent; color: #fff;
}
.btn-sel:hover { background: rgba(255, 255, 255, 0.16); }
.selection .selection-nb { font-weight: 600; font-size: 1.05rem; }
@media (hover: none) { .btn-sel[data-infobulle]::after { display: none; } }

/* « Corbeille privé » : seulement sur l'onglet Privé ouvert */
body:not(.dans-prive) .menu-compte .seulement-prive { display: none; }
body:not(.sur-albums) .menu-compte .seulement-albums { display: none; }

/* ---------- Corbeille (corbeille.js) : plein écran au-dessus du site ---------- */
.corbeille-ouverte { overflow: hidden; }
.corbeille {
  position: fixed; inset: 0; z-index: 32; overflow-y: auto; overscroll-behavior: contain;
  background: var(--fond); color: var(--texte); padding: 0 32px 32px;
}
.corbeille-tete {
  position: sticky; top: 0; z-index: 2; height: 64px; margin: 0 -32px; padding: 0 32px;
  display: flex; align-items: center; gap: 12px; background: var(--surface); border-bottom: 1px solid var(--bordure);
}
.corbeille-tete h1 { margin: 0; font-size: 1.2rem; }
.corbeille-tete .btn-secondaire { margin-left: auto; }
.btn-secondaire.danger { color: #b42318; }
.corbeille-aide { color: var(--texte-doux); font-size: 0.9rem; margin: 14px 0; }
.corbeille-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
.corbeille-case {
  position: relative; aspect-ratio: 1; overflow: hidden; padding: 0; border: 0; border-radius: 0;
  background: var(--bordure); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.corbeille-case img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.12s; }
.corbeille-case.is-choisie { background: var(--accent-clair); }
.corbeille-case.is-choisie img { transform: scale(0.88); border-radius: 4px; }
.corbeille-jours {
  position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.72rem; font-weight: 600;
}
.corbeille-jours.bientot { background: #b42318; }
.corbeille .corbeille-case .coche {
  position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; display: none; place-items: center;
  border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, 0.25); color: transparent; opacity: 1;
}
.corbeille.en-selection .corbeille-case .coche, .corbeille .corbeille-case:hover .coche { display: grid; }
.corbeille .corbeille-case.is-choisie .coche { background: var(--accent); border-color: var(--accent); color: #fff; }

@media (max-width: 767px) {
  .selection .selection-actions .btn-sel { flex: 1; height: 48px; border-radius: 12px; }
  .selection .selection-nb { font-size: 0.95rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .corbeille { padding: 0 2px calc(var(--bas-nav) + 12px); }
  .corbeille-tete { margin: 0 -2px; padding: 0 8px; padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top)); gap: 6px; }
  .corbeille-tete h1 { font-size: 1.05rem; }
  .corbeille-tete .compteur { display: none; }
  .corbeille-tete .btn-secondaire { padding: 6px 10px; font-size: 0.85rem; }
  .corbeille-aide { font-size: 0.82rem; margin: 10px 8px; }
  .corbeille-grille { grid-template-columns: repeat(3, 1fr); gap: 2px; }
}

/* ---------- Appui long sur une carte (téléphone) : menu ⋯ ouvert, carte mise en avant (cadrage 3.9) ---------- */
.voile-menu { position: fixed; inset: 0; z-index: 45; background: rgba(15, 20, 28, 0.45); }
.voile-menu .carte-en-avant {
  position: fixed; margin: 0; pointer-events: none; border-radius: 12px; background: var(--surface);
  outline: 3px solid var(--accent); outline-offset: 2px;
  transform: translateY(-4px) scale(1.03); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

/* Évol 2 : PC, à partir de 70 px (vignettes-mini), coche et étoile masquées ; actions au clic droit à la place. */
@media (min-width: 768px) {
  body.vignettes-mini .vignette .coche,
  body.vignettes-mini .vignette .btn-favori { display: none; }
  /* En mode sélection, on ne met pas en favori une par une : l'étoile des vignettes est masquée. */
  body.en-selection .vignette .btn-favori { display: none; }
}

/* Dézoom maximum (20 px) : la pastille vidéo est illisible et encombre, on la retire. */
body.vignettes-micro .vignette .badge-video { display: none; }

/* Évol 6 : téléphone, bouton de format d'affichage (carré / origine) poussé à droite du panneau des filtres. */
@media (max-width: 767px) {
  .filtres-plus .barre-droite .segments.affichage { margin-left: auto; }
}

/* ---------- Éditeur vidéo : couper, rogner, tourner (cadrage 3.10, editeur-video.js) ----------
   Téléphone : barre Annuler / Modifier / Enregistrer, vidéo, outil choisi, onglets. PC (.pc) : en L, comme
   Personnaliser : outils à gauche (Rogner, Tourner, Enregistrer), vidéo à droite, coupe en bas. Bleu du thème sombre. */
.editeur-video {
  --ed-accent: #4a9ad6; --ed-accent-fort: #2f7fc0; --ed-surface: #16181c; --ed-ligne: rgba(255, 255, 255, 0.08);
  position: fixed; inset: 0; z-index: 33; display: flex; flex-direction: column;
  background: var(--vis-fond); color: var(--vis-texte); user-select: none; -webkit-user-select: none;
  opacity: 0; transform: scale(0.98); transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.editeur-video.visible { opacity: 1; transform: none; }
.editeur-video.sort { opacity: 0; transform: scale(0.98); transition-duration: 0.18s; }
.editeur-video button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ed-haut {
  flex: none; height: 56px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 12px;
  padding-top: env(safe-area-inset-top);
}
.ed-haut h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.ed-fond-cote, .ed-entete, .ed-actions { display: none; }
.ed-texte { justify-self: start; border: 0; background: none; padding: 8px 6px; font-size: 0.95rem; color: var(--vis-texte); border-radius: 8px; }
.ed-texte:hover { background: rgba(255, 255, 255, 0.08); }
.ed-texte:disabled { opacity: 0.35; cursor: default; background: none; }
.ed-enregistrer, .ed-secondaire, .ed-danger {
  border: 0; padding: 9px 18px; border-radius: 10px; font-weight: 600; font-size: 0.92rem; transition: background 0.15s, opacity 0.2s, transform 0.12s;
}
.ed-enregistrer { justify-self: end; background: var(--ed-accent-fort); color: #fff !important; box-shadow: 0 4px 14px rgba(47, 127, 192, 0.35); }
.ed-enregistrer:not(:disabled):hover { background: var(--ed-accent); }
.ed-enregistrer:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.ed-secondaire { background: rgba(255, 255, 255, 0.08); }
.ed-secondaire:hover { background: rgba(255, 255, 255, 0.14); }
.ed-danger { background: #e5484d; color: #fff !important; box-shadow: 0 4px 14px rgba(229, 72, 77, 0.3); }
.ed-danger:hover { background: #f05a5f; }
.ed-enregistrer:not(:disabled):active, .ed-secondaire:active, .ed-danger:active { transform: scale(0.97); }

.ed-scene { position: relative; flex: 1; min-height: 0; overflow: hidden; display: grid; place-items: center; }
.ed-boite {
  position: relative;   /* pas de overflow: hidden : les poignées des bords dépassent de l'image (la scène, elle, coupe) */
  transition: width 0.32s cubic-bezier(0.3, 0.9, 0.3, 1), height 0.32s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.ed-boite video {
  position: absolute; left: 50%; top: 50%; display: block; object-fit: fill; background: #000;
  transition: transform 0.32s cubic-bezier(0.3, 0.9, 0.3, 1), width 0.32s cubic-bezier(0.3, 0.9, 0.3, 1), height 0.32s cubic-bezier(0.3, 0.9, 0.3, 1);
}
/* Cadre de rognage : le reste de l'image est assombri (ombre géante) ; hors rognage (téléphone), seulement l'aperçu. */
.ed-cadre { position: absolute; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.88); pointer-events: none; transition: box-shadow 0.25s; }
.editeur-video.rognage .ed-cadre { box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.6); outline: 1.5px solid rgba(255, 255, 255, 0.9); outline-offset: -1px; pointer-events: auto; cursor: move; touch-action: none; }
.editeur-video.rognage.cadre-actif .ed-cadre { box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.45); outline-color: var(--ed-accent); }
.ed-tiers { position: absolute; inset: 0; opacity: 0; transition: opacity 0.2s; pointer-events: none;
  background:
    linear-gradient(to right, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.55) calc(33.33% - 0.5px), rgba(255, 255, 255, 0.55) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px),
      transparent calc(66.66% - 0.5px), rgba(255, 255, 255, 0.55) calc(66.66% - 0.5px), rgba(255, 255, 255, 0.55) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
    linear-gradient(to bottom, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.55) calc(33.33% - 0.5px), rgba(255, 255, 255, 0.55) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px),
      transparent calc(66.66% - 0.5px), rgba(255, 255, 255, 0.55) calc(66.66% - 0.5px), rgba(255, 255, 255, 0.55) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px));
}
.editeur-video.rognage .ed-tiers { opacity: 0.3; }
.editeur-video.cadre-actif .ed-tiers { opacity: 1; }
.ed-coin, .ed-cote { position: absolute; display: none; }
.editeur-video.rognage .ed-coin, .editeur-video.rognage .ed-cote { display: block; }
.editeur-video.rognage .format-fixe .ed-cote { display: none; }
/* Coins en « L » épais, zone de prise de 44 px. */
.ed-coin { width: 44px; height: 44px; }
.ed-coin::before { content: ''; position: absolute; width: 20px; height: 20px; border: 0 solid #fff; transition: border-color 0.15s; }
.ed-coin:hover::before, .cadre-actif .ed-coin::before { border-color: var(--ed-accent); }
.ed-nw { left: -22px; top: -22px; cursor: nwse-resize; } .ed-nw::before { left: 19px; top: 19px; border-left-width: 4px; border-top-width: 4px; }
.ed-ne { right: -22px; top: -22px; cursor: nesw-resize; } .ed-ne::before { right: 19px; top: 19px; border-right-width: 4px; border-top-width: 4px; }
.ed-sw { left: -22px; bottom: -22px; cursor: nesw-resize; } .ed-sw::before { left: 19px; bottom: 19px; border-left-width: 4px; border-bottom-width: 4px; }
.ed-se { right: -22px; bottom: -22px; cursor: nwse-resize; } .ed-se::before { right: 19px; bottom: 19px; border-right-width: 4px; border-bottom-width: 4px; }
.ed-cote::before { content: ''; position: absolute; background: #fff; border-radius: 2px; transition: background 0.15s; }
.ed-cote:hover::before { background: var(--ed-accent); }
.ed-n, .ed-s { left: 30px; right: 30px; height: 36px; cursor: ns-resize; }
.ed-n { top: -18px; } .ed-s { bottom: -18px; }
.ed-n::before, .ed-s::before { left: 50%; top: 50%; width: 24px; height: 4px; transform: translate(-50%, -50%); }
.ed-e, .ed-w { top: 30px; bottom: 30px; width: 36px; cursor: ew-resize; }
.ed-e { right: -18px; } .ed-w { left: -18px; }
.ed-e::before, .ed-w::before { left: 50%; top: 50%; width: 4px; height: 24px; transform: translate(-50%, -50%); }

/* Outils */
.ed-panneau { flex: none; padding: 12px 16px 8px; min-height: 112px; animation: ed-panneau 0.25s ease; }
@keyframes ed-panneau { from { opacity: 0; transform: translateY(8px); } }
.ed-titre {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--vis-doux);
}
.ed-titre > span:first-child { flex-grow: 1; }
.ed-titre .ed-reinit { margin-left: auto; padding: 4px 8px; font-size: 0.8rem; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ed-accent); }
.ed-ligne-lecture { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.ed-lire { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); transition: background 0.15s; }
.ed-lire:hover { background: rgba(255, 255, 255, 0.18); }
.ed-temps { font-size: 0.95rem; }
.ed-garde { margin-left: auto; font-size: 0.82rem; color: var(--vis-doux); }
/* Bande d'images avec les deux poignées (début, fin) et la tête de lecture. */
.ed-film { position: relative; height: 52px; margin: 0 16px; border-radius: 8px; touch-action: none; cursor: pointer; }
.ed-film canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 8px; display: block; }
.ed-hors { position: absolute; top: 0; bottom: 0; background: rgba(13, 14, 16, 0.75); pointer-events: none; }
.ed-hors-debut { left: 0; border-radius: 8px 0 0 8px; } .ed-hors-fin { right: 0; border-radius: 0 8px 8px 0; }
.ed-plage { position: absolute; top: -3px; bottom: -3px; border: 3px solid var(--ed-accent); border-left-width: 0; border-right-width: 0; pointer-events: none; }
.ed-poignee-temps {
  position: absolute; top: -3px; bottom: -3px; width: 16px; background: var(--ed-accent); pointer-events: auto; cursor: ew-resize;
  display: grid; place-items: center; transition: transform 0.15s, box-shadow 0.15s;
}
.ed-poignee-temps::after { content: ''; position: absolute; inset: 0 -14px; }   /* zone de prise élargie */
.ed-poignee-temps i { width: 3px; height: 18px; border-radius: 2px; background: rgba(255, 255, 255, 0.85); }
.ed-p-debut { left: -16px; border-radius: 8px 0 0 8px; }
.ed-p-fin { right: -16px; border-radius: 0 8px 8px 0; }
.ed-poignee-temps.is-actif { transform: scaleY(1.12); box-shadow: 0 0 0 3px rgba(74, 154, 214, 0.3); }
.ed-tete { position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; background: #fff; border-radius: 2px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.6); pointer-events: none; }
.ed-bulle-temps {
  position: absolute; bottom: calc(100% + 10px); transform: translateX(-50%); padding: 3px 8px; border-radius: 10px;
  background: var(--ed-accent); color: #fff; font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
}
.ed-formats { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.ed-format {
  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--ed-ligne); background: rgba(255, 255, 255, 0.04); font-size: 0.88rem; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ed-format:hover { background: rgba(255, 255, 255, 0.1); }
.ed-format.is-actif { border-color: var(--ed-accent); color: var(--ed-accent); background: rgba(74, 154, 214, 0.12); }
.ed-forme { display: inline-block; border: 1.6px solid currentColor; border-radius: 2px; }
.ed-forme.libre { border-style: dashed; }
.ed-forme-boite { flex: none; width: 22px; height: 22px; display: inline-grid; place-items: center; }
.ed-tours { display: flex; justify-content: center; gap: 12px; }
.ed-tour {
  flex: 1; max-width: 150px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 16px; border-radius: 12px;
  border: 1px solid var(--ed-ligne); background: rgba(255, 255, 255, 0.04); font-size: 0.85rem; transition: background 0.15s, transform 0.15s, border-color 0.15s;
}
.ed-tour:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(74, 154, 214, 0.5); }
.ed-tour:active { transform: scale(0.95); }
.ed-tour:active svg { transition: transform 0.25s; }
.ed-onglets {
  flex: none; display: flex; justify-content: center; gap: 4px; padding: 6px 12px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ed-ligne);
}
.ed-onglet {
  position: relative; flex: 1; max-width: 140px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 0; background: none; padding: 8px 4px; border-radius: 10px; font-size: 0.78rem; color: var(--vis-doux) !important; transition: color 0.15s;
}
.ed-onglet.is-actif { color: #fff !important; }
.ed-onglet.is-actif svg { color: var(--ed-accent); }
.ed-onglet.modifie::after { content: ''; position: absolute; top: 6px; left: calc(50% + 14px); width: 7px; height: 7px; border-radius: 50%; background: var(--ed-accent); }
.ed-erreur {
  position: absolute; left: 50%; top: 66px; transform: translateX(-50%); z-index: 3; padding: 10px 16px; border-radius: 12px; max-width: calc(100% - 32px);
  background: #5c1f1f; color: #fff; font-size: 0.9rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); animation: ed-panneau 0.25s ease;
}

/* PC : en L. Colonne de gauche (titre, Rogner, Tourner, boutons) ; vidéo à droite ; coupe en bas, sous la vidéo. */
.editeur-video.pc {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr auto;
  grid-template-areas: "entete scene" "rogner scene" "tourner scene" "vitesse scene" ". scene" "actions couper";
}
.pc .ed-haut, .pc .ed-onglets { display: none; }
.pc .ed-fond-cote { display: block; grid-area: 1 / 1 / -1 / 2; background: var(--ed-surface); border-right: 1px solid var(--ed-ligne); }
.pc .ed-entete { display: block; grid-area: entete; padding: 22px 22px 8px; min-width: 0; }
.pc .ed-entete h2 { margin: 0; font-size: 1.15rem; font-weight: 600; }
.pc .ed-entete p { margin: 4px 0 0; font-size: 0.82rem; color: var(--vis-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc .ed-scene { grid-area: scene; }
.pc .ed-panneau { min-height: 0; animation: none; }
.pc .ed-panneau-rogner { grid-area: rogner; padding: 18px 22px 16px; border-top: 1px solid var(--ed-ligne); margin-top: 10px; }
.pc .ed-panneau-tourner { grid-area: tourner; padding: 18px 22px 16px; border-top: 1px solid var(--ed-ligne); }
.pc .ed-panneau-couper { grid-area: couper; padding: 14px 28px 20px; border-top: 1px solid var(--ed-ligne); background: var(--ed-surface); }
.pc .ed-panneau-couper .ed-film { margin: 0 16px; }
.pc .ed-panneau-vitesse { grid-area: vitesse; padding: 16px 22px 14px; border-top: 1px solid var(--ed-ligne); }
.pc .ed-panneau-rogner { padding-top: 16px; padding-bottom: 12px; }
.pc .ed-panneau-tourner { padding-top: 16px; padding-bottom: 12px; }

.pc .ed-actions {
  grid-area: actions; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 14px 22px 20px;
  border-top: 1px solid var(--ed-ligne);
}
.pc .ed-actions button { width: 100%; padding: 11px; }
.pc .ed-erreur { top: 20px; left: calc(150px + 50%); }

/* Fenêtre de confirmation de l'éditeur (Abandonner, Enregistrer) : sombre, dans le style de l'éditeur. */
.ed-dialogue {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px;
  background: rgba(5, 6, 8, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: ed-fondu 0.2s ease;
}
.ed-dialogue.sort { animation: ed-fondu 0.18s ease reverse forwards; }
@keyframes ed-fondu { from { opacity: 0; } }
.ed-dialogue-carte {
  width: min(380px, 100%); padding: 26px 24px 20px; border-radius: 18px; text-align: center;
  background: #1c1f25; border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  animation: ed-carte 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ed-carte { from { opacity: 0; transform: scale(0.9) translateY(10px); } }
.ed-dialogue-icone {
  display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; margin-bottom: 14px;
  background: rgba(74, 154, 214, 0.15); color: var(--ed-accent);
}
.ed-dialogue.danger .ed-dialogue-icone { background: rgba(229, 72, 77, 0.15); color: #ff6b6f; }
.ed-dialogue h3 { margin: 0 0 8px; font-size: 1.08rem; font-weight: 600; color: #fff; }
.ed-dialogue p { margin: 0 0 22px; font-size: 0.92rem; line-height: 1.45; color: #aab0b8; }
.ed-dialogue-boutons { display: flex; gap: 10px; }
.ed-dialogue-boutons button { flex: 1; padding: 11px; }

/* Suivi d'une modification de vidéo : bandeau en haut au centre, au-dessus de tout. */
.bandeaux-modif { position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 45; display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100% - 24px)); pointer-events: none; }
.bandeau-modif {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: 16px;
  background: rgba(30, 33, 39, 0.94); color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  animation: annonce-entre 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.bandeau-modif.sort { animation: bm-sort 0.3s ease-in forwards; }
@keyframes bm-sort { to { opacity: 0; transform: translateY(-16px) scale(0.96); } }
.bandeau-modif .bm-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bandeau-modif strong { font-size: 0.92rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.bandeau-modif small { font-size: 0.78rem; color: #aab0b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-barre { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.15); margin-top: 4px; overflow: hidden; }
.bm-barre i { display: block; height: 100%; width: 0; background: #4a9ad6; transition: width 0.6s ease; }
.bandeau-modif:not(.attente) .bm-barre { display: none; }
.bm-roue { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; animation: roue 0.7s linear infinite; }
.bandeau-modif:not(.attente) .bm-roue { display: none; }
.bm-coche { flex: none; width: 26px; height: 26px; border-radius: 50%; display: none; place-items: center; background: #2e9d5b; color: #fff; }
.bandeau-modif.ok .bm-coche { display: grid; animation: coche-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.bandeau-modif.echec strong { color: #ff8a80; }
.bm-voir { border: 0; background: rgba(255, 255, 255, 0.14); color: #fff; font-weight: 600; padding: 7px 14px; border-radius: 14px; cursor: pointer; }
.bm-voir:hover { background: rgba(255, 255, 255, 0.24); }
.bm-fermer { border: 0; background: none; color: #aab0b8; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.bm-fermer svg { width: 18px; height: 18px; }
/* Infos : vidéo modifiée, rétablir l'original. */
#vis-infos .lien-retablir { border: 0; background: none; padding: 0; color: #8ec5ef; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.editeur-video-ouvert .bandeaux-modif { top: calc(64px + env(safe-area-inset-top)); }   /* sous la barre de l'éditeur (Annuler, Enregistrer) */
.ed-dialogue-icone svg { width: 24px; height: 24px; }

/* Proposition A (choisie par Jerel le 08/10/2026) : tuiles de format, boutons ronds pour tourner, réglette de vitesse. */
.ed-nom-court { display: none; }
.ed-angle { color: #7bb8e6; font-weight: 500; text-transform: none; letter-spacing: 0; }
.ed-pastille-son {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px; text-transform: none; letter-spacing: 0;
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: #c4c8ce !important; font-size: 0.8rem; font-weight: 500;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ed-pastille-son svg { width: 16px; height: 16px; }
.ed-pastille-son:hover { background: rgba(255, 255, 255, 0.1); }
.ed-pastille-son[aria-pressed="true"] { border-color: var(--ed-accent); background: rgba(74, 154, 214, 0.14); color: #7bb8e6 !important; }
.ed-reglette { position: relative; height: 78px; margin: 0 14px; cursor: pointer; touch-action: none; outline: none; }
.ed-reglette:focus-visible .ed-reglette-bouton { box-shadow: 0 0 0 4px rgba(74, 154, 214, 0.35), 0 0 0 7px rgba(255, 255, 255, 0.5); }
.ed-reglette-piste, .ed-reglette-rempli { position: absolute; top: 34px; height: 4px; border-radius: 2px; }
.ed-reglette-piste { left: 0; right: 0; background: rgba(255, 255, 255, 0.12); }
.ed-reglette-rempli { background: var(--ed-accent); transition: left 0.15s, width 0.15s; }
.ed-trait { position: absolute; top: 46px; width: 1px; height: 6px; background: rgba(255, 255, 255, 0.22); }
.ed-trait.grand { top: 44px; height: 10px; background: rgba(255, 255, 255, 0.45); }
.ed-reglette-curseur { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; transition: left 0.15s cubic-bezier(0.3, 0.9, 0.3, 1.2); pointer-events: none; }
.ed-reglette-bulle { padding: 2px 8px; border-radius: 8px; background: var(--ed-accent-fort); color: #fff; font-size: 0.75rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ed-reglette-bouton { width: 18px; height: 18px; margin-top: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(74, 154, 214, 0.35); transition: transform 0.15s; }
.ed-reglette.glisse .ed-reglette-bouton { transform: scale(1.18); }
.ed-repere { position: absolute; top: 60px; transform: translateX(-50%); font-size: 0.7rem; color: var(--vis-doux); font-variant-numeric: tabular-nums; pointer-events: none; }
.ed-repere.is-actif { color: #7bb8e6; font-weight: 600; }
.ed-resume-vitesse { margin: 2px 0 0; font-size: 0.82rem; color: var(--vis-doux); }
.ed-badges { position: absolute; top: 16px; right: 18px; display: flex; gap: 8px; pointer-events: none; }
.ed-badges span { padding: 4px 10px; border-radius: 8px; font-size: 0.82rem; background: rgba(255, 255, 255, 0.12); color: var(--vis-texte); animation: ed-panneau 0.2s ease; }
.ed-badges .ed-badge-vitesse { background: rgba(47, 127, 192, 0.9); color: #fff; font-weight: 600; }
/* Tuiles de format, 6 par ligne (PC et téléphone : tout tient sans défiler). PC : Tourner sur une ligne avec deux boutons ronds. */
.ed-formats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; overflow: visible; padding: 0; }
.ed-format { height: 60px; min-width: 0; padding: 0; flex-direction: column; justify-content: center; gap: 7px; font-size: 0.7rem; border-radius: 10px; color: #c4c8ce !important; }
.ed-format.is-actif { color: #7bb8e6 !important; }
.ed-format .ed-nom { display: none; }
.ed-format .ed-nom-court { display: inline; white-space: nowrap; }
/* Téléphone : panneau d'outils de hauteur fixe (la vidéo ne saute pas d'un onglet à l'autre), rien ne défile. */
.editeur-video:not(.pc) .ed-panneau { height: 168px; min-height: 0; box-sizing: border-box; overflow: hidden; padding-top: 14px; }
.editeur-video:not(.pc) .ed-panneau-couper { display: flex; flex-direction: column; justify-content: center; }
.editeur-video:not(.pc) .ed-panneau-tourner .ed-tours { margin-top: 6px; }
.editeur-video:not(.pc) .ed-tour { padding: 14px 16px; }
.pc .ed-panneau-tourner { display: flex; align-items: center; gap: 10px; }
.pc .ed-panneau-tourner .ed-titre { flex-grow: 1; margin: 0; }
.pc .ed-tours { gap: 10px; }
.pc .ed-tour { width: 44px; height: 44px; max-width: none; padding: 0; border-radius: 50%; display: grid; place-items: center; flex: none; }
.pc .ed-tour svg { width: 20px; height: 20px; }
.pc .ed-tour .ed-nom-tel { display: none; }
.pc .ed-panneau-vitesse .ed-titre { margin-bottom: 8px; }
.pc .ed-reglette { margin: 0; }

/* ---------- Éditeur de photo (cadrage 3.13, editeur-photo.js) : mêmes classes que l'éditeur vidéo ---------- */
.ed-boite .ed-image { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #000; }
.editeur-photo.pc { grid-template-areas: "entete scene" "rogner scene" "tourner scene" "reglages scene" ". scene" "actions scene"; }
.pc .ed-panneau-reglages { grid-area: reglages; padding: 16px 22px 14px; border-top: 1px solid var(--ed-ligne); }
.editeur-photo.pc .ed-panneau-tourner { display: block; }
.editeur-photo.pc .ed-panneau-tourner .ed-titre { margin: 0 0 10px; }
.editeur-photo.pc .ed-tours { justify-content: flex-start; }
.editeur-photo .ed-tour.is-actif { border-color: var(--ed-accent); background: rgba(74, 154, 214, 0.14); color: #7bb8e6 !important; }
.ed-sous-titre { margin: 14px 0 0; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--vis-doux); }
.ed-pastilles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 4px; }
.ed-pastille-reglage {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 2px; border-radius: 10px; min-width: 0;
  border: 1px solid var(--ed-ligne); background: rgba(255, 255, 255, 0.04); font-size: 0.72rem; color: #c4c8ce !important;
}
.ed-pastille-reglage svg { width: 22px; height: 22px; }
.ed-pastille-reglage b { font-size: 0.7rem; font-weight: 600; color: #7bb8e6; min-height: 1em; font-variant-numeric: tabular-nums; }
.ed-pastille-reglage:hover { background: rgba(255, 255, 255, 0.1); }
.ed-pastille-reglage.is-actif { border-color: var(--ed-accent); background: rgba(74, 154, 214, 0.12); color: #7bb8e6 !important; }
.ed-panneau-reglages .ed-reglette, .ed-panneau-tourner .ed-reglette { margin-top: 4px; }
.ed-pastille-reglage { flex-direction: row; justify-content: center; gap: 4px; height: 40px; padding: 0 2px; }
.ed-pastille-reglage b:empty { display: none; }
.editeur-photo:not(.pc) .ed-panneau-reglages .ed-reglette { margin-top: 0; }
/* Téléphone : Tourner compact (boutons ronds sur une ligne, réglette dessous), tout tient dans le panneau. */
.editeur-photo:not(.pc) .ed-panneau-tourner .ed-tours { margin-top: 0; gap: 14px; }
.editeur-photo:not(.pc) .ed-tour { flex: none; width: 46px; height: 46px; max-width: none; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.editeur-photo:not(.pc) .ed-tour .ed-nom-tel, .editeur-photo:not(.pc) .ed-sous-titre { display: none; }
.editeur-photo:not(.pc) .ed-panneau { padding-top: 10px; }
.editeur-photo:not(.pc) .ed-titre { margin-bottom: 6px; }
/* Bulle des photos dans la visionneuse (comme celle du lecteur vidéo) */
.vis-bulle-photo { z-index: 2; }
.visionneuse.est-video .vis-bulle-photo { display: none; }
@media (max-width: 767px) { .vis-bulle-photo .seulement-pc { display: none; } }
.vis-media:fullscreen > img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Zoom à la molette (PC) : curseur main, saisie pendant le glisser */
.vis-media { overflow: hidden; }   /* photo agrandie : reste dans sa zone (barre du haut et infos visibles) */
.vis-media > img.zoomee { cursor: grab; }
.vis-media > img.zoomee.glisse { cursor: grabbing; }
.vis-bulle-photo .btn-icone:hover { background: rgba(255, 255, 255, 0.14); }
/* Rétablir l'original (vidéo déjà modifiée) : avec Enregistrer et Annuler (PC) ; bouton ↺ à côté de « Modifier » (téléphone). */
.ed-haut-titre { display: flex; align-items: center; gap: 4px; }
.ed-retablir-tel { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; color: #ff8a80 !important; }
.ed-retablir-tel svg { width: 20px; height: 20px; }
.ed-retablir-tel:hover { background: rgba(255, 255, 255, 0.08); }
.ed-retablir {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 9px 10px; border-radius: 10px;
  border: 1px solid rgba(229, 72, 77, 0.35); background: rgba(229, 72, 77, 0.08); color: #ff8a80 !important; font-size: 0.9rem; transition: background 0.15s;
}
.ed-retablir:hover { background: rgba(229, 72, 77, 0.16); }
.ed-retablir svg { width: 18px; height: 18px; }
.ed-retablir small { font-size: 0.78rem; color: #c98a86; }

/* ---------- Transfert entre comptes (évolution 8, transfert.js) ---------- */
.tr-doux { color: var(--texte-doux); font-weight: 400; }
.tr-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 1.1rem; overflow: hidden; flex: none; }
.tr-avatar.petit { width: 30px; height: 30px; font-size: 0.85rem; }
.tr-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Fenêtre « Envoyer à… » */
.tr-envoi textarea { padding: 10px 12px; border: 1px solid var(--bordure); border-radius: 10px; font: inherit; font-weight: 400; resize: vertical; background: var(--surface); color: var(--texte); }
.tr-envoi textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.tr-compte-car { align-self: flex-end; margin-top: -8px; color: var(--texte-doux); font-size: 0.8rem; }
.tr-dest { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--accent-clair); }
.tr-dest[hidden] { display: none; }
.tr-dest div { display: flex; flex-direction: column; min-width: 0; }
.tr-dest strong { overflow-wrap: anywhere; }
.tr-dest small { color: var(--texte-doux); letter-spacing: 0.05em; }
.tr-ok { margin-left: auto; color: var(--accent); font-weight: 700; font-size: 1.2rem; }
.tr-champ { position: relative; }
.tr-suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; list-style: none; margin: 0; padding: 4px; max-height: 260px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 10px; box-shadow: 0 8px 24px rgba(20, 30, 45, 0.14); }
.tr-suggestions[hidden] { display: none; }
.tr-suggestions button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: var(--texte); font: inherit; text-align: left; cursor: pointer; }
.tr-suggestions button:hover { background: var(--accent-clair); }
.tr-suggestions span:not(.tr-avatar) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-suggestions small { color: var(--texte-doux); letter-spacing: 0.05em; font-size: 0.78rem; }
/* Résumé du choix, « Voir » (vignettes, × pour retirer) */
.tr-resume { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-weight: 600; }
.tr-resume .lien { font-size: 0.9rem; }
.tr-choisis { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; max-height: 220px; overflow-y: auto; }
.tr-choisis[hidden] { display: none; }
.tr-enlever { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.95rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.tr-enlever:hover { background: #d92d20; }
/* Fenêtre « Déjà dans ton Drive / ta corbeille » (acceptation) : vignettes, puis trois choix expliqués */
.tr-deja-texte { margin: 0 0 12px; line-height: 1.5; }
.tr-deja-apercu { max-height: 172px; overflow-y: auto; margin-bottom: 16px; }
.tr-options { display: flex; flex-direction: column; gap: 8px; }
.tr-option { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 10px 14px; text-align: left;
  border: 1px solid var(--bordure); border-radius: 10px; background: var(--surface); color: var(--texte); font: inherit; cursor: pointer; }
.tr-option:hover { border-color: var(--accent); background: var(--accent-clair); }
.tr-option small { color: var(--texte-doux); font-size: 0.85rem; line-height: 1.35; }
.tr-option.principal { border-color: var(--accent); }
.tr-option.principal strong { color: var(--accent); }
.tr-transferes { max-height: 60vh; overflow-y: auto; }
button.tr-vignette { padding: 0; border: 0; cursor: pointer; }
button.tr-vignette:hover img { opacity: 0.85; }
/* Page */
.tr-page h2 { font-size: 1.05rem; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.tr-page h2 small { font-size: 0.8rem; font-weight: 600; color: #fff; background: var(--accent); border-radius: 999px; padding: 1px 8px; }
.tr-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tr-entete h1 { margin: 0; }
.tr-entete .tr-mon-code { margin: 0; }
.tr-mon-code code { font-size: 1rem; letter-spacing: 0.08em; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--fond); border: 1px solid var(--bordure); color: var(--texte); }
.tr-large { grid-column: 1 / -1; }
/* Recherche par code (Ajouter un destinataire, Faire un transfert) */
.tr-recherche { display: flex; flex-direction: column; gap: 12px; }
.tr-code { font: inherit; font-size: 1rem; width: 100%; padding: 11px 12px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--surface); color: var(--texte); }
.tr-code:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.tr-recherche .btn-principal { align-self: flex-start; width: auto; margin: 0; }
.tr-recherche .auth-erreur { margin: 0; }
/* Raccourcis */
.tr-contacts { list-style: none; margin: 16px 0 0; padding: 0; }
.tr-contacts:empty { display: none; }
.tr-contact { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--bordure); }
.tr-contact-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tr-contact-nom strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-contact-nom small { color: var(--texte-doux); letter-spacing: 0.05em; font-size: 0.8rem; }
.tr-contact .btn-principal { width: auto; margin: 0; padding: 8px 16px; }
.tr-retirer { flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--texte-doux); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.tr-retirer:hover { background: #fef3f2; color: #b42318; }
/* Galerie : choix des photos à envoyer (bandeau partagé avec le choix de couverture) */
.en-envoi .page { padding-top: 60px; }
.en-envoi .filtres { top: 116px; }
.en-envoi .tab[data-tab="prive"] { opacity: 0.4; }
.en-envoi #selection, .en-envoi #bandeau-demandes { display: none !important; }
.bandeau-couverture .btn-blanc:disabled { opacity: 0.6; cursor: default; }
.tr-demandes, .tr-lignes { list-style: none; margin: 0; padding: 0; }
.tr-demande { padding: 16px 0; border-top: 1px solid var(--bordure); display: flex; flex-direction: column; gap: 12px; }
.tr-demande:first-child { border-top: 0; padding-top: 0; }
.tr-demande-tete { display: flex; align-items: center; gap: 12px; }
.tr-demande-tete small { display: block; color: var(--texte-doux); font-size: 0.85rem; margin-top: 2px; }
.tr-message { margin: 0; padding: 10px 14px; border-radius: 4px 14px 14px 14px; background: var(--fond); white-space: pre-wrap; overflow-wrap: anywhere; }
.tr-apercu { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 4px; }
.tr-vignette { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--fond); }
.tr-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-vignette.video::after { content: "▶"; position: absolute; right: 4px; bottom: 2px; color: #fff; font-size: 0.7rem; text-shadow: 0 0 3px rgba(0, 0, 0, 0.8); }
.tr-plus { display: grid; place-items: center; font-weight: 600; color: var(--texte-doux); }
.tr-actions { display: flex; justify-content: flex-end; gap: 10px; }
.tr-actions button { width: auto; margin: 0; }
.tr-ligne { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-top: 1px solid var(--bordure); }
.tr-ligne:first-child { border-top: 0; padding-top: 0; }
.tr-sens { width: 22px; flex: none; text-align: center; font-weight: 700; color: var(--texte-doux); line-height: 30px; }
.tr-sens.recu { color: var(--accent); }
.tr-ligne-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tr-ligne-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.tr-ligne-tete > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-ligne-medias { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; }
.tr-ligne-medias .lien { font-size: 0.9rem; }
/* Informations en étiquettes à la suite (passent à la ligne si la place manque) */
.tr-infos { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.tr-infos li { padding: 2px 8px; border-radius: 6px; background: var(--fond); color: var(--texte-doux); font-size: 0.78rem; line-height: 1.5; }
.tr-court, .tr-chevron { display: none; }
.tr-chevron { flex: none; color: var(--texte-doux); font-size: 1.3rem; line-height: 1; }
/* Détail d'une ligne (téléphone) */
.tr-detail-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.tr-detail ul { list-style: none; margin: 0 0 12px; padding: 0; color: var(--texte-doux); font-size: 0.9rem; }
.tr-detail li { padding: 6px 0; border-top: 1px solid var(--bordure); }
.tr-detail li:first-child { border-top: 0; }
.tr-detail .tr-message { margin: 0 0 12px; }
.tr-detail-actions { display: flex; gap: 18px; }
.tr-detail-actions:empty { display: none; }
.tr-message-court { margin: 2px 0 0; color: var(--texte-doux); font-size: 0.82rem; font-style: italic; overflow-wrap: anywhere; }
.tr-etat { flex: none; font-size: 0.75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--fond); color: var(--texte-doux); }
.tr-etat.attente { background: var(--accent-clair); color: var(--accent); }
.tr-etat.accepte { background: #e7f6ec; color: #1a7f37; }
.tr-etat.refuse, .tr-etat.annule { background: #fef3f2; color: #b42318; }

/* Pastille du menu de la pastille (nombre de transferts reçus en attente) */
.tr-pastille { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #d92d20; color: #fff; font-size: 0.75rem; font-weight: 700; display: inline-grid; place-items: center; }
@media (max-width: 767px) {
  .en-envoi .page { padding-top: 48px; }
  .en-envoi .filtres { top: 104px; }
  /* Historique : une seule ligne « ↙ (J) jerel · 1 photo   Accepté › », le détail s'ouvre au toucher */
  .tr-ligne { align-items: center; padding: 10px 0; cursor: pointer; }
  .tr-sens { line-height: normal; }
  .tr-de, .tr-ligne-medias, .tr-infos, .tr-message-court { display: none !important; }
  .tr-court, .tr-chevron { display: inline; }
  .tr-ligne-tete { min-height: 0; }
  .tr-ligne-tete .tr-etat { margin-left: auto; }
  .tr-actions button { flex: 1; }
}
/* Shift enfoncé (PC) : les boutons corbeille effacent définitivement, en rouge plein (13/10/2026). */
body.shift-suppr [data-action="supprimer"], body.shift-suppr [data-action="supprimer-selection"] { background: #d92d20 !important; color: #fff !important; border-radius: 50%; }
body.shift-suppr [data-action="supprimer"] svg, body.shift-suppr [data-action="supprimer-selection"] svg { color: #fff; }

/* Chemin de l'album collé sous la barre du haut (et sous le bandeau d'un choix) quand on défile ; filtres de l'album
   juste dessous (--haut-tete, app.js). Bouton « Revenir en haut » (07/11/2026). */
body { --haut-collant: 64px; }
body:has(#bandeau-couverture:not([hidden])) { --haut-collant: 116px; }
.albums-tete { position: sticky; top: var(--haut-collant); z-index: 8; background: var(--fond); }
.vue-albums .filtres { top: calc(var(--haut-collant) + var(--haut-tete, 0px)); }
.haut-page {
  position: fixed; right: 24px; bottom: 24px; z-index: 20;
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--bordure);
  display: grid; place-items: center; background: var(--surface); color: var(--texte);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.haut-page:hover { color: var(--accent); }
.vis-ouverte .haut-page { display: none; }
@media (max-width: 767px) {
  body { --haut-collant: 56px; }
  body:has(#bandeau-couverture:not([hidden])) { --haut-collant: 104px; }
  .haut-page { right: 14px; bottom: calc(var(--bas-nav) + 14px); width: 44px; height: 44px; }
}
/* Mode Tri : album surligné par la recherche ou ↑ / ↓ (Entrée y range, 07/11/2026). */
.tri-album.vise { background: rgba(59, 143, 208, 0.22); box-shadow: inset 3px 0 0 #3b8fd0; }