/* ═══════════════════════════ Boîte Photo ═══════════════════════════ */
/* Thème bi-mode clair/sombre, couleurs et composants alignés sur le   */
/* framework illaWeight (illaweight.illaweb.eu) :                      */
/*   primaire #0477be · succès/lien #037a87 · erreur #da0b6c           */
/*   rayons .25 / .5 / .625rem · bordures 1px · fonte Manjari          */
/* Le choix de thème est piloté par [data-theme] sur <html> (JS),      */
/* avec repli sur prefers-color-scheme tant que rien n'est choisi.     */

/* ── Fonte illaWeight (Manjari, embarquée dans le binaire) ───────── */
@font-face {
  font-family: "Manjari";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/manjari-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Manjari";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/manjari-bold.woff2") format("woff2");
}

/* ── Palette CLAIR (défaut) — miroir de :root illaWeight ─────────── */
:root {
  --fond: #fafafa;             /* --color-background  */
  --fond-haut: #f0f0f0;        /* --color-gray-7      */
  --carte: #ffffff;            /* --color-gray-8      */
  --carte-2: #f0f0f0;          /* --color-gray-7      */
  --champ: #ffffff;            /* fond des champs     */
  --encre: #262626;            /* --color-gray-1      */
  --doux: #737373;             /* --color-gray-3      */
  --bord: #8c8c8c;             /* --color-border      */
  --survol: #dbdbdb;           /* --color-gray-5      */
  --entete-table: #e8e8e8;     /* --color-gray-6      */
  --accent: #0477be;           /* --color-primary     */
  --accent-hover: #035589;     /* button-primary:hover*/
  --accent-2: #037a87;         /* --color-success     */
  --accent-doux: #b4f0fe;      /* --color-highlight    */
  --ok: #037a87;
  --ok-fond: #e3f4f6;
  --erreur: #da0b6c;           /* --color-error       */
  --erreur-hover: #9d084e;
  --erreur-fond: #fcebf3;
  --vignette: #262626;
  --vignette-txt: #bfbfbf;     /* --color-gray-4      */
  --code-bg: #f0f0f0;
  --ombre: 0 .125rem .313rem -.063rem #32325d40, 0 .063rem .313rem -.063rem #0000004d;
  --ombre-hover: 0 .125rem .25rem #00000066, 0 .438rem .813rem -.188rem #0000004d, 0 -.188rem 0 #00000033 inset;
  --ombre-btn: 0 .125rem .313rem -.063rem #32325d40;
  --rayon: 10px;               /* --roundness-3 (.625rem) */
  --rayon-1: 4px;              /* --roundness-1 (.25rem)  */
  --rayon-2: 8px;              /* --roundness-2 (.5rem)   */
  /* Dégradé « landing » : primaire → succès → erreur */
  --grad-accent: linear-gradient(92deg, var(--accent) 0%, var(--accent-2) 55%, var(--erreur) 115%);
}

/* ── Palette SOMBRE — miroir de [data-theme=dark] illaWeight ─────── */
:root[data-theme="dark"] {
  --fond: #282828;
  --fond-haut: #262626;
  --carte: #282828;
  --carte-2: #262626;
  --champ: #000000;
  --encre: #f0f0f0;
  --doux: #dbdbdb;
  --bord: #b5b5b5;
  --survol: #737373;
  --entete-table: #4d4d4d;
  --accent: #059cfa;
  --accent-hover: #0477be;
  --accent-2: #04a7b9;
  --accent-doux: rgba(5, 156, 250, .16);
  --ok: #04a7b9;
  --ok-fond: rgba(4, 167, 185, .16);
  --erreur: #f65aa3;
  --erreur-hover: #9d084e;
  --erreur-fond: rgba(246, 90, 163, .16);
  --vignette: #000000;
  --vignette-txt: #737373;
  --code-bg: #262626;
  --ombre: 0 .125rem .313rem -.063rem #fafac140, 0 .063rem .188rem -.063rem #ffffff4d;
  --ombre-hover: 0 .125rem .25rem #ffffff66, 0 .438rem .813rem -.188rem #ffffff4d;
  --ombre-btn: 0 .063rem .188rem -.063rem #ffffff4d;
  --grad-accent: linear-gradient(92deg, var(--accent) 0%, var(--accent-2) 55%, var(--erreur) 115%);
}

/* Suivi automatique du système tant que l'utilisateur n'a rien choisi */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #282828;
    --fond-haut: #262626;
    --carte: #282828;
    --carte-2: #262626;
    --champ: #000000;
    --encre: #f0f0f0;
    --doux: #dbdbdb;
    --bord: #b5b5b5;
    --survol: #737373;
    --entete-table: #4d4d4d;
    --accent: #059cfa;
    --accent-hover: #0477be;
    --accent-2: #04a7b9;
    --accent-doux: rgba(5, 156, 250, .16);
    --ok: #04a7b9;
    --ok-fond: rgba(4, 167, 185, .16);
    --erreur: #f65aa3;
    --erreur-hover: #9d084e;
    --erreur-fond: rgba(246, 90, 163, .16);
    --vignette: #000000;
    --vignette-txt: #737373;
    --code-bg: #262626;
    --ombre: 0 .125rem .313rem -.063rem #fafac140, 0 .063rem .188rem -.063rem #ffffff4d;
    --ombre-hover: 0 .125rem .25rem #ffffff66, 0 .438rem .813rem -.188rem #ffffff4d;
    --ombre-btn: 0 .063rem .188rem -.063rem #ffffff4d;
    --grad-accent: linear-gradient(92deg, var(--accent) 0%, var(--accent-2) 55%, var(--erreur) 115%);
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: "Manjari", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--fond);
  color: var(--encre);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background .35s ease, color .35s ease;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

code {
  background: var(--code-bg);
  border-radius: var(--rayon-2);
  padding: 1px 7px;
  font-size: .9em;
  color: var(--accent);
  transition: background .35s ease;
}

.page {
  width: min(1080px, 94vw);
  margin: 0 auto;
  padding: 26px 0 50px;
  flex: 1;
}

/* ── Basculer clair / sombre ─────────────────────────────────────── */
.theme_btn {
  position: fixed;
  top: 12px;
  right: 14px;
  z-index: 50;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--bord);
  background: var(--carte);
  color: var(--encre);
  font-size: 1.1em;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--ombre);
  transition: transform .2s ease, box-shadow .2s ease;
}
.theme_btn:hover { transform: rotate(15deg) scale(1.08); }
.theme_btn:active { transform: scale(.94); }

/* ── Barre de navigation (style illaWeight .navigation) ──────────── */
.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--fond);
  box-shadow: var(--ombre);
  border-bottom: 1px solid var(--bord);
  padding: 12px 66px 12px 18px; /* place pour le bouton de thème */
  position: sticky;
  top: 0;
  z-index: 20;
  transition: background .35s ease, border-color .35s ease;
}
.brand {
  font-weight: 700;
  font-size: 1.12em;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--encre);
  letter-spacing: -.01em;
}
.brand .logo { font-size: 1.25em; }
.brand .tag {
  background: var(--accent);
  color: #fff;
  border-radius: 3rem;
  font-size: .58em;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 3px 10px;
}
.topnav nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.topnav nav a { color: var(--doux); transition: color .3s ease; }
.topnav nav a:hover { color: var(--accent); text-decoration: none; }
.topnav .who { color: var(--doux); font-weight: 600; }
.topnav form { display: contents; }

/* ── Boutons (alignés sur .button d'illaWeight) ──────────────────── */
.btn {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: middle;
  border: 1px solid var(--bord);
  background: var(--carte);
  color: var(--encre);
  font: inherit;
  font-weight: 600;
  padding: .5rem .8rem .3rem;
  border-radius: var(--rayon);
  cursor: pointer;
  box-shadow: var(--ombre);
  text-shadow: none;
  -webkit-user-select: none;
  user-select: none;
  transition: all .4s ease;
}
.btn:hover {
  background: var(--survol);
  border-color: var(--accent);
  text-decoration: none;
}
.btn:active { filter: brightness(.97); }
.btn.plein {
  width: 100%;
  margin-top: 10px;
  background: var(--accent);          /* button-primary : #0477be */
  border-color: transparent;
  color: #fff;
}
.btn.plein:hover { background: var(--accent-hover); border-color: transparent; }
.btn.petit { padding: .25rem .55rem .15rem; border-radius: var(--rayon-1); font-size: .85em; }
.btn.lien {
  background: transparent;
  border-color: transparent;
  color: var(--accent);
  box-shadow: none;
}
.btn.lien:hover { background: var(--accent-doux); border-color: transparent; }
.btn.danger { background: var(--erreur); border-color: transparent; color: #fff; }
.btn.danger:hover { background: var(--erreur-hover); border-color: transparent; }
.btn:disabled { opacity: .75; cursor: wait; transform: none; }

/* ── Hero page d'accueil ────────────────────────────────────────── */
.hero { text-align: center; padding: 72px 0 36px; }
.picto_gros {
  font-size: 3.2em;
  margin: 0;
  display: inline-block;
  animation: flotter 3.5s ease-in-out infinite;
}
.hero h1 {
  font-size: clamp(2.2em, 6vw, 3em);
  margin: 10px 0 8px;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.hero .titre_grad {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.sous_titre { color: var(--doux); font-size: 1.14em; margin-bottom: 40px; }
.choix {
  display: flex;
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
}
.carteclic {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 30px 26px;
  width: 280px;
  text-align: center;
  color: var(--encre);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.carteclic:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-hover);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--bord));
  text-decoration: none;
}
.grande_icone {
  font-size: 2.3em;
  display: inline-block;
  transition: transform .25s ease;
}
.carteclic:hover .grande_icone { transform: scale(1.18) rotate(-6deg); }
.carteclic strong { font-size: 1.15em; }
.carteclic span:last-child { color: var(--doux); font-size: .92em; }

/* ── Page de connexion ──────────────────────────────────────────── */
.accueil_hero { padding: 40px 0 8px; }
.accueil_hero .picto { font-size: 2.6em; animation: flotter 3.5s ease-in-out infinite; margin: 0; display: inline-block; }
.accueil_hero .sous_titre { margin-bottom: 12px; }
.loginbox .note {
  color: var(--doux);
  font-size: .86em;
  margin: 14px 0 0;
}
.loginbox {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  max-width: 380px;
  margin: 64px auto;
  padding: 32px 30px 26px;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: monter .4s ease backwards;
}
.loginbox::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--grad-accent);
}
.loginbox .picto { font-size: 2.6em; margin: 0 0 4px; }
.loginbox h1 { margin: 4px 0 20px; font-size: 1.45em; letter-spacing: -.02em; }
.loginbox label {
  display: block;
  text-align: left;
  font-weight: 600;
  font-size: .9em;
  margin-bottom: 14px;
  color: var(--doux);
}
.loginbox input, .ligne_form input, .etroite input {
  width: 100%;
  font: inherit;
  padding: .5rem .6rem;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-1);
  margin-top: 5px;
  background: var(--champ);
  color: var(--encre);
  box-shadow: inset 0 .063rem .188rem color-mix(in srgb, var(--doux) 30%, transparent);
  transition: border-color .2s ease, box-shadow .2s ease, background .35s ease;
}
.loginbox input:focus, .ligne_form input:focus, .etroite input:focus {
  outline: none;
  border-color: var(--accent-hover);
  box-shadow:
    inset 0 .063rem .188rem color-mix(in srgb, var(--doux) 30%, transparent),
    0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
.retour { display: inline-block; margin-top: 16px; font-size: .9em; }

/* ── Cartes génériques ──────────────────────────────────────────── */
.carte {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 22px 24px;
  margin-bottom: 22px;
  transition: background .35s ease, border-color .35s ease;
  animation: monter .35s ease backwards;
}
.carte h2 { font-size: 1.08em; margin: 0 0 16px; letter-spacing: -.01em; }
.carte.etroite { max-width: 440px; margin: 40px auto; }

.note { color: var(--doux); font-size: .88em; margin: 4px 0 0; }

.form_ligne, .ligne_form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.ligne_form label {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  font-size: .85em;
  color: var(--doux);
  flex: 1 1 150px;
  min-width: 140px;
}
.ligne_form label input { width: 100%; }
.ligne_form .btn { flex: 0 0 auto; }

/* ── Statistiques ───────────────────────────────────────────────── */
.barre_stats { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.stat {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 16px 24px;
  min-width: 144px;
  text-align: center;
  box-shadow: var(--ombre);
  transition: transform .2s ease, background .35s ease;
  animation: monter .35s ease backwards;
}
.stat:hover { transform: translateY(-2px); }
.stat strong { font-size: 1.6em; display: block; color: var(--accent); }
.stat span { color: var(--doux); font-size: .85em; }

/* ── Tableaux (style illaWeight table) ───────────────────────────── */
.tableau {
  width: 100%;
  border-collapse: collapse;
}
.tableau th {
  text-align: left;
  font-size: .92em;
  color: var(--encre);
  background: var(--entete-table);
  font-weight: 600;
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--bord);
}
.tableau th:first-of-type { border-radius: var(--rayon-1) 0 0 0; }
.tableau th:last-of-type { border-radius: 0 var(--rayon-1) 0 0; }
.tableau td { padding: .7rem .75rem; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.tableau tr:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.tableau tr:last-child td { border-bottom: 0; }
.droite { text-align: right; }
.tableau .actions { white-space: nowrap; }
.tableau .actions form { display: inline-block; margin-left: 4px; }
.pastel { width: 64px; }
.pastel img {
  width: 56px;
  height: 42px;
  object-fit: cover;
  border-radius: var(--rayon-1);
  display: block;
}
.pastel .grand { font-size: 1.6em; }

.badge {
  background: var(--erreur);
  color: #fff;
  font-size: .76em;
  font-weight: 600;
  border-radius: 3rem;
  padding: .25rem .65rem;
  vertical-align: middle;
}

/* ── Barre d'utilisation ────────────────────────────────────────── */
.pastille {
  --pct-w: 0px;
  background: color-mix(in srgb, var(--doux) 14%, var(--carte));
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  min-width: 120px;
}
.pastille span {
  display: block;
  height: 100%;
  background: var(--grad-accent);
  border-radius: 999px;
  transition: width .6s cubic-bezier(.22, 1, .36, 1);
}
.pastille.grande { height: 14px; flex: 1; max-width: 260px; }

.entete_client {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 10px 0 22px;
  animation: monter .35s ease backwards;
}
.entete_client h1 { margin: 0; font-size: 1.6em; letter-spacing: -.02em; }
.entete_client .droite { margin-left: auto; }

/* ── Bannière espace client ─────────────────────────────────────── */
.banniere {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 24px 28px;
  margin-bottom: 24px;
  box-shadow: var(--ombre);
  position: relative;
  overflow: hidden;
  animation: monter .35s ease backwards;
}
.banniere::before {
  content: "";
  position: absolute;
  inset: -50% -10% auto -10%;
  height: 150%;
  pointer-events: none;
  background:
    radial-gradient(480px 180px at 8% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(520px 200px at 88% 0%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 70%);
}
.banniere_haut {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  position: relative;
}
.banniere h1 { margin: 0 0 2px; font-size: 1.7em; letter-spacing: -.02em; }
.pile_espace {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
  min-width: 200px;
}
.pile_espace small { color: var(--doux); }
.puces {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  position: relative;
}
.puce {
  background: var(--accent-doux);
  color: var(--accent);
  font-weight: 700;
  font-size: .8em;
  padding: 5px 13px;
  border-radius: 999px;
  transition: background .35s ease;
}

/* ── Galerie client ─────────────────────────────────────────────── */
.grille_galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 18px;
}
.fiche {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--ombre);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .35s ease;
  animation: monter .38s ease backwards;
}
.fiche:hover {
  transform: translateY(-.2rem);
  box-shadow: var(--ombre-hover);
  border-color: var(--bord);
}
.vignette {
  background: linear-gradient(135deg, var(--vignette), color-mix(in srgb, var(--vignette) 70%, var(--accent)));
  height: 185px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vignette-txt);
  overflow: hidden;
  position: relative;
}
.vignette img, .vignette video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.fiche:hover .vignette img { transform: scale(1.05); }
.vignette .grand { font-size: 3em; color: color-mix(in srgb, var(--vignette-txt) 70%, var(--accent)); transition: transform .3s ease; }
.fiche:hover .vignette .grand { transform: scale(1.15); }
/* Voile d'actions qui apparaît au survol */
.voile {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  color: #fff;
  font-weight: 700;
  font-size: .9em;
  background: linear-gradient(transparent, rgba(15, 10, 20, .78));
  opacity: 0;
  transition: opacity .25s ease;
}
.fiche:hover .voile, .vignette:focus-visible .voile { opacity: 1; }
.fiche_infos {
  padding: 10px 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fiche_infos .nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .92em;
}
.fiche_infos small { color: var(--doux); }
.fiche .btn.droit { align-self: flex-end; margin: 0 12px 12px; }

/* ── Dépôt de fichiers ──────────────────────────────────────────── */
.zone_depot {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.zone_depot_label {
  flex: 1;
  min-width: 240px;
  border: 2px dashed color-mix(in srgb, var(--doux) 45%, var(--bord));
  border-radius: var(--rayon-2);
  padding: 18px 20px;
  text-align: center;
  color: var(--doux);
  cursor: pointer;
  background: transparent;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.zone_depot_label:hover {
  border-color: var(--accent);
  background: var(--accent-doux);
  transform: translateY(-1px);
}
.zone_depot_label input[type="file"] { width: 100%; font-size: .9em; }
.zone_depot_label input[type="file"]::file-selector-button {
  border: 0;
  background: var(--accent-doux);
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  border-radius: 8px;
  padding: 7px 14px;
  margin-right: 10px;
  cursor: pointer;
  transition: filter .2s ease;
}
.zone_depot_label input[type="file"]::file-selector-button:hover { filter: brightness(.96); }
.zone_depot_label span { display: block; margin-top: 6px; }
.zone_depot_label small { color: var(--doux); }

/* ── Messages ───────────────────────────────────────────────────── */
.flashbox, .erreur {
  border-radius: var(--rayon);
  padding: 12px 16px;
  margin: 10px 0 16px;
  word-break: break-word;
  font-weight: 600;
  animation: glisser .35s ease backwards;
}
.flashbox {
  background: var(--ok-fond);
  color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
  border-left: .313rem solid var(--ok);
}
.erreur {
  background: var(--erreur-fond);
  color: var(--erreur);
  border: 1px solid color-mix(in srgb, var(--erreur) 35%, transparent);
  border-left: .313rem solid var(--erreur);
}
.vide {
  text-align: center;
  color: var(--doux);
  padding: 34px 10px;
  font-size: 1.05em;
}

/* ── Sélection groupée (admin) ──────────────────────────────────── */
.barre_lot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: var(--carte-2);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-2);
}
.barre_lot.fin { justify-content: space-between; margin-top: 14px; margin-bottom: 0; }
.tout_cocher {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: .88em;
  color: var(--doux);
  cursor: pointer;
}
.tout_cocher input, .cb_fichier {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.col_cocher { width: 30px; }
.pagination.plain { margin: 0; }

/* ── Visionneuse plein écran (lightbox) ─────────────────────────── */
.lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(12, 8, 17, .90);
  backdrop-filter: blur(8px);
  padding: 20px;
  animation: apparait .22s ease;
}
.lb_medias { display: contents; }
.lb img, .lb video {
  max-width: 88vw;
  max-height: 74vh;
  border-radius: var(--rayon);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
  background: #000;
}
.lb_barre {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  max-width: 94vw;
}
.lb_barre strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb_compteur { color: rgba(255, 255, 255, .65); font-weight: 700; font-variant-numeric: tabular-nums; }
.lb_fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .10);
  color: #fff;
  font-size: 2em;
  line-height: 1;
  padding-bottom: 6px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.lb_fleche:hover { background: rgba(255, 255, 255, .24); }
.lb_fleche.gauche { left: 18px; }
.lb_fleche.droite { right: 18px; }
.lb_fleche:active { transform: translateY(-50%) scale(.92); }
.lb_fermer {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1.4em;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.lb_fermer:hover { background: rgba(255, 255, 255, .28); transform: rotate(90deg); }
@keyframes apparait { from { opacity: 0; } to { opacity: 1; } }

/* ── Modal de dépôt (formulaire dans un <dialog> natif) ─────────── */
.banniere_actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.banniere_actions .pile_espace { margin: 0; }
dialog.dialog_depot {
  border: 0;
  border-radius: var(--rayon);
  background: var(--carte);
  color: var(--encre);
  box-shadow: var(--ombre-hover);
  padding: 0;
  width: min(520px, 92vw);
  max-width: 94vw;
  margin: auto;
}
dialog.dialog_depot::backdrop {
  background: rgba(12, 8, 17, .55);
  backdrop-filter: blur(3px);
}
.dialog_tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 4px;
}
.dialog_tete h2 { margin: 0; }
.dialog_fermer {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: var(--accent-doux);
  color: var(--accent);
  font-size: 1em;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
}
.dialog_fermer:hover { transform: rotate(90deg); filter: brightness(1.05); }
dialog.dialog_depot .zone_depot { margin: 0 18px 18px; padding: 18px; }

/* ── Sélection sur les tuiles (client) ──────────────────────────── */
.case_photo { position: relative; }
.case_coche {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  cursor: pointer;
  width: 30px;
  height: 30px;
}
.case_coche input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.case_coche .case_puce {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .92);
  background: rgba(20, 15, 25, .45);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.case_coche:hover .case_puce { transform: scale(1.08); }
.case_coche input:checked ~ .case_puce {
  background: var(--accent);
  border-color: #fff;
}
.case_coche input:checked ~ .case_puce::after {
  content: "✓";
  color: #fff;
  font-weight: 700;
  font-size: .8em;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.case_coche input:focus-visible ~ .case_puce { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Barre de sélection flottante ───────────────────────────────── */
.barre_selection {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 10px 18px;
  box-shadow: var(--ombre-hover);
  z-index: 60;
  max-width: 94vw;
  animation: apparait .22s ease;
}
.barre_selection[hidden] { display: none; }
.barre_selection .note { color: var(--doux); }

/* ── Icônes Tabler (SVG inline, héritent la couleur du texte) ───── */
svg.ic {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -.18em;
  flex: none;
}
.picto_gros svg.ic, .grande_icone svg.ic, .picto svg.ic, .logo svg.ic {
  width: 1em;
  height: 1em;
  vertical-align: -.06em;
}
.theme_btn svg.ic { width: 1.35em; height: 1.35em; vertical-align: -.3em; }
.btn svg.ic { vertical-align: -.18em; }
.lb_fleche svg.ic { width: 1.6em; height: 1.6em; vertical-align: -.35em; }
.lb_fermer svg.ic, .dialog_fermer svg.ic { width: 1.1em; height: 1.1em; vertical-align: -.2em; }

/* ── Pagination & fil ───────────────────────────────────────────── */.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0;
  color: var(--doux);
}
.pages_num {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rayon-1);
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--bord);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
a.pages_num:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--carte);
  text-decoration: none;
}
.pages_num.actif {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  cursor: default;
}
.pages_gap { color: var(--doux); opacity: .7; padding: 0 2px; }
.bouton_muet {
  color: color-mix(in srgb, var(--doux) 50%, transparent);
  font-weight: 700;
  font-size: .92em;
  padding: 4px 11px;
}
.pagination.plain { margin: 0; }
.fil { margin-bottom: 14px; font-size: .92em; }

/* ── Bouton de thème flottant sur les pages sans nav ─────────────── */

/* ── Pied de page ───────────────────────────────────────────────── */
.sitefoot {
  text-align: center;
  color: var(--doux);
  font-size: .82em;
  padding: 20px;
  border-top: 1px solid var(--bord);
  background: var(--entete-table);
  transition: background .35s ease, border-color .35s ease;
}

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes monter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes glisser {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes flotter {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Décalage en cascade des vignettes (discret : 8 premières seulement) */
.fiche:nth-child(1) { animation-delay: .02s; }
.fiche:nth-child(2) { animation-delay: .05s; }
.fiche:nth-child(3) { animation-delay: .08s; }
.fiche:nth-child(4) { animation-delay: .11s; }
.fiche:nth-child(5) { animation-delay: .14s; }
.fiche:nth-child(6) { animation-delay: .17s; }
.fiche:nth-child(7) { animation-delay: .20s; }
.fiche:nth-child(8) { animation-delay: .23s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Écrans mobiles ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .page { width: 94vw; }
  .topnav { padding-right: 62px; }
  .tableau .droite { text-align: left; }
  .entete_client .droite { margin-left: 0; }
  .hero { padding: 48px 0 26px; }
}