/* ============================================================
   Collection — feuille de style principale
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  --color-bg:          #F2F4F8;
  --color-card:        #FFFFFF;
  --color-text:        #1F2937;
  --color-heading:     #15233D;
  --color-muted:       #6B7280;
  --color-border:      #E2E4E9;
  --color-error:       #B3261E;
  --color-error-bg:    #FBEAE9;
  --color-success:     #1E7B34;
  --color-success-bg:  #EAF6EC;
  --radius:            14px;
  --font-heading:      'Baloo 2', sans-serif;
  --font-body:         'Inter', sans-serif;
  --topbar-h:          60px;
  --accent:            #2563EB;
  --accent-dark:       #1D4ED8;
}

[data-couleur="bleu"]   { --accent: #2563EB; --accent-dark: #1D4ED8; }
[data-couleur="vert"]   { --accent: #059669; --accent-dark: #047857; }
[data-couleur="rouge"]  { --accent: #DC2626; --accent-dark: #B91C1C; }
[data-couleur="violet"] { --accent: #9333EA; --accent-dark: #7E22CE; }
[data-couleur="orange"] { --accent: #EA580C; --accent-dark: #C2410C; }
[data-couleur="rose"]   { --accent: #DB2777; --accent-dark: #BE185D; }
[data-couleur="jaune"]  { --accent: #CA8A04; --accent-dark: #A16207; }
[data-couleur="cyan"]   { --accent: #0891B2; --accent-dark: #0E7490; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
}
h1, h2, h3, .titre { font-family: var(--font-heading); color: var(--color-heading); }
a { color: var(--accent); }
button { font-family: inherit; }

.conteneur {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}
.conteneur-centre { text-align: center; padding-top: 3rem; }
.msg-etroit { max-width: 400px; margin: 1rem auto; }
.masque { display: none !important; }
.form-nouveau-profil { max-width: 420px; margin: 0 auto; text-align: left; }

/* ── Boutons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .65rem 1.2rem;
  border-radius: 999px;
  border: none;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform .1s ease, box-shadow .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-primaire { background: var(--accent); color: #fff; box-shadow: 0 4px 14px -4px var(--accent); }
.btn-primaire:hover { background: var(--accent-dark); }
.btn-secondaire { background: #fff; color: var(--color-text); border: 1px solid var(--color-border); }
.btn-danger { background: var(--color-error-bg); color: var(--color-error); }
.btn-petit { padding: .4rem .8rem; font-size: .82rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Formulaires ─────────────────────────────────────────── */
.champ { margin-bottom: 1rem; display: flex; flex-direction: column; gap: .35rem; }
.champ label { font-weight: 600; font-size: .88rem; }
.champ input, .champ select, .champ textarea {
  padding: .6rem .7rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-family: inherit;
  font-size: .95rem;
  background: #fff;
}
.champ small { color: var(--color-muted); font-size: .8rem; }
.msg { padding: .7rem 1rem; border-radius: 10px; font-size: .9rem; margin-bottom: 1rem; }
.msg-erreur { background: var(--color-error-bg); color: var(--color-error); }
.msg-succes { background: var(--color-success-bg); color: var(--color-success); }

.carte-panneau {
  background: var(--color-card);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

table.table-liste { width: 100%; border-collapse: collapse; }
table.table-liste th, table.table-liste td {
  text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--color-border); font-size: .9rem;
}
table.table-liste th { color: var(--color-muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; }
.cellule-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.cellule-actions form { display: inline; }

/* ── Topbar ──────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0 1.25rem;
  background: var(--color-heading);
  color: #fff;
  position: sticky; top: 0; z-index: 50;
}
.topbar-titre {
  display: flex; align-items: center; gap: .5rem;
  color: #fff; text-decoration: none;
  font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem;
}
.topbar-nav { display: flex; gap: .25rem; margin-left: auto; }
.topbar-lien {
  color: rgba(255,255,255,.8); text-decoration: none; padding: .5rem .8rem; border-radius: 8px; font-size: .9rem; font-weight: 500;
}
.topbar-lien:hover, .topbar-lien.actif { background: rgba(255,255,255,.12); color: #fff; }
.topbar-profil {
  display: flex; align-items: center; gap: .5rem;
  color: #fff; text-decoration: none;
  padding: .3rem .7rem .3rem .3rem;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  font-size: .85rem;
}
.topbar-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); font-size: 1rem;
}

/* ── Écran de profils ────────────────────────────────────── */
.profils-grille {
  display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; margin: 2rem 0;
}
.profil-tuile {
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  color: var(--color-text);
  padding: .5rem;
  border-radius: 12px;
}
.profil-tuile:hover .profil-avatar { transform: scale(1.06); box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--accent); }
.profil-avatar {
  width: 96px; height: 96px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem;
  background: var(--accent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.profil-nom { font-weight: 600; }
.profil-tuile-ajout .profil-avatar { background: #fff; border: 2px dashed var(--color-border); color: var(--color-muted); }

/* ── Accueil / choix de collection ──────────────────────────*/
.collections-grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem;
}
.collection-tuile {
  background: var(--color-card); border-radius: var(--radius); border: 1px solid var(--color-border);
  padding: 1.25rem; text-decoration: none; color: var(--color-text);
  display: flex; flex-direction: column; gap: .5rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.collection-tuile:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -12px rgba(0,0,0,.25); }
.collection-tuile h3 { margin: 0; }
.collection-progres { height: 8px; border-radius: 999px; background: var(--color-border); overflow: hidden; }
.collection-progres > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s ease; }
.collection-actions { display: flex; gap: .5rem; margin-top: .4rem; flex-wrap: wrap; }
.collection-theme { color: var(--color-muted); font-size: .85rem; margin: -.3rem 0 0; }

/* ── Tirage / pack opening ──────────────────────────────────*/
.tirage-zone { text-align: center; padding: 2rem 0; }
.tirage-actions { margin-top: 2rem; display: flex; gap: .75rem; justify-content: center; }
.tirage-overlay {
  position: fixed; inset: 0; background: rgba(15,17,23,.85);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.5rem;
  z-index: 200; padding: 2rem;
}
.tirage-overlay[hidden] { display: none; }
.tirage-fermer {
  position: absolute; top: 1.25rem; right: 1.25rem;
  background: rgba(255,255,255,.12); color: #fff; border: none; border-radius: 999px;
  width: 40px; height: 40px; font-size: 1.2rem; cursor: pointer;
}
.paquet-carte-slot { width: 150px; height: 210px; margin: 0 auto; }
.paquet-carte-slot.paquet-carte-slot--horizontale { width: 210px; height: 150px; }

/* ============================================================
   Cartes à collectionner : effet 3D + reflets
   ============================================================ */
.carte {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --glow: 0;
  position: relative;
  width: 100%; aspect-ratio: 3/4;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.4);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  touch-action: none;
  cursor: grab;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
/* Carte horizontale (voir includes/dispositions.php orientationParDefautDisposition) : ne
   s'applique que là où la carte garde son ratio intrinsèque (grille admin, pioche, tirage) —
   dans .album-face le ratio est de toute façon forcé à "auto" par la règle plus bas. */
.carte.carte--horizontale { aspect-ratio: 4/3; }
.carte.carte--active { transition: none; cursor: grabbing; box-shadow: 0 18px 34px -12px rgba(0,0,0,.5); }
.carte-fond { position: absolute; inset: 0; }
.carte-image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  padding: 8%;
}
.carte-legende {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .5rem .6rem;
  background: linear-gradient(0deg, rgba(0,0,0,.72), transparent);
  color: #fff;
  display: flex; flex-direction: column; gap: .15rem;
}
.carte-legende-nom { font-size: .78rem; font-weight: 600; }
.carte-legende-desc {
  font-size: .68rem; font-weight: 400; line-height: 1.3;
  color: rgba(255,255,255,.88);
  max-height: 4.5em; overflow-y: auto;
}
.carte-numero {
  position: absolute; top: .4rem; right: .5rem;
  background: rgba(0,0,0,.55); color: #fff; font-size: .7rem; font-weight: 700;
  border-radius: 999px; padding: .1rem .5rem;
}
/* Fonds unis */
.fond-std       { background: linear-gradient(160deg, #EFEFF4, #DCDEE6); }
.fond-alt1      { background: linear-gradient(160deg, #FDE9D9, #F7C99B); }
.fond-alt2      { background: linear-gradient(160deg, #D9F0E6, #9FD9BF); }

/* Fonds brillants */
.fond-brillant, .fond-brillant2, .fond-brillant3 {
  background: linear-gradient(160deg, #C9CDD6, #8A93A6);
}

/* Le reflet est placé APRÈS l'image dans le DOM (voir cartes_render.php) afin que son
   mix-blend-mode se combine au-dessus du visuel, comme un vernis holographique physique,
   et pas caché derrière l'image comme c'était le cas avant. */
.carte-reflet {
  position: absolute; inset: 0; opacity: .4; pointer-events: none;
  transition: opacity .3s ease;
}
.carte--tilt-actif .carte-reflet { opacity: .9; }

.reflet-brillant {
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.95), rgba(255,255,255,0) 45%);
  mix-blend-mode: color-dodge;
}

/* Arc-en-ciel : conic-gradient = dégradé de teintes intrinsèquement sans couture (le
   premier et le dernier arrêt sont la même couleur), centré sur le pointeur, qui tourne
   légèrement avec l'inclinaison. Plus fiable visuellement qu'un repeating-linear-gradient
   décalé en background-position, qui pouvait donner des bandes/à-coups. */
.reflet-brillant2 {
  background: conic-gradient(from calc(var(--ry, 0deg) * 3) at var(--mx) var(--my),
    #ff3d7f, #ffbd3d, #d9ff3d, #3dffb0, #3dc7ff, #6f3dff, #ff3dea, #ff3d7f);
  mix-blend-mode: color-dodge;
  filter: saturate(1.5);
}
.reflet-brillant3 {
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.95), transparent 40%),
    conic-gradient(from calc(var(--rx, 0deg) * -3) at var(--mx) var(--my),
      #ffd93d, #ff6bcb, #6bffcb, #6bb3ff, #c36bff, #ffd93d),
    repeating-linear-gradient(45deg, rgba(255,255,255,.5) 0 1px, transparent 1px 5px);
  mix-blend-mode: color-dodge;
  filter: saturate(1.4);
}

/* Calque PNG optionnel : texture de reflet ajoutée au-dessus de l'image (ex : foil holographique
   personnalisé). Se déplace légèrement avec le pointeur (parallax) via --mx/--my. */
.carte-calque {
  position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover;
  pointer-events: none; mix-blend-mode: color-dodge; opacity: .55;
  transform: translate(calc((var(--mx, 50%) - 50%) * .5), calc((var(--my, 50%) - 50%) * .5));
  transition: opacity .3s ease;
}
.carte--tilt-actif .carte-calque { opacity: .85; }

/* ── Animation de révélation (tirage de paquet) ─────────────*/
.carte-flip-wrap { width: 100%; height: 100%; perspective: 900px; }
.carte-flip-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.3,.1,.2,1);
}
.carte-flip-wrap.carte-flip-wrap--revele .carte-flip-inner { transform: rotateY(180deg); }
.carte-face {
  position: absolute; inset: 0; border-radius: 12px; overflow: hidden;
  backface-visibility: hidden;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.4);
}
.carte-face--recto { transform: rotateY(180deg); }

.carte-verso {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 1.4rem;
  backface-visibility: hidden;
}

/* ============================================================
   Album : livre avec pages tournables
   ============================================================ */
.album-livre {
  perspective: 2400px;
  max-width: 760px; margin: 1.5rem auto; position: relative;
}
.album-reliure {
  display: flex; align-items: stretch; background: #fff; border-radius: 10px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.4); overflow: hidden;
}
/* Format de page fixe façon papier (portrait, ratio 3/4) : chaque face du livre a les
   mêmes proportions, quel que soit le nombre de vignettes qu'elle contient. */
.album-face {
  flex: 1; aspect-ratio: 3 / 4; min-width: 0;
  padding: 1rem; position: relative;
  border-left: 1px solid var(--color-border);
  display: flex; flex-direction: column;
}
.album-face:first-child { border-left: none; }
/* .album-face-corps est le conteneur remplacé dynamiquement en JS lors du tourne-page
   (voir app.js afficherSpread) : il doit relayer le flex-column de .album-face à ses
   propres enfants (entête + grille) pour que la grille occupe tout l'espace restant. */
.album-face-corps { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.album-page-entete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6rem; flex-shrink: 0; }
.album-page-numero { color: var(--color-muted); font-size: .8rem; }

/* Fond personnalisé de page (image + texte Markdown, voir album_render.php). L'image et son
   voile de lisibilité sont en absolu derrière ; entête, texte et grille passent au-dessus. */
.album-page-fond-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; border-radius: 6px; }
.album-page-fond-voile { position: absolute; inset: 0; z-index: 0; background: rgba(255,255,255,.55); border-radius: 6px; }
.album-face-corps > .album-page-entete,
.album-face-corps > .album-page-texte,
.album-face-corps > .album-grille { position: relative; z-index: 1; }
.album-page-texte {
  flex-shrink: 0; max-height: 42%; overflow-y: auto;
  margin-bottom: .5rem; padding: .5rem .8rem;
  background: rgba(255,255,255,.82); border-radius: 10px;
  font-size: .82rem; line-height: 1.45; color: var(--color-text, #1a1a1a);
}
.album-page-texte > :first-child { margin-top: 0; }
.album-page-texte > :last-child { margin-bottom: 0; }
.album-page-texte h1, .album-page-texte h2, .album-page-texte h3 { margin: .4rem 0 .3rem; line-height: 1.2; }
.album-page-texte h1 { font-size: 1.15rem; }
.album-page-texte h2 { font-size: 1.05rem; }
.album-page-texte h3 { font-size: .95rem; }
.album-page-texte p, .album-page-texte ul, .album-page-texte ol { margin: .35rem 0; }
.album-page-texte ul, .album-page-texte ol { padding-left: 1.2rem; }
.album-page-texte a { color: var(--accent); }
.album-page-texte img { max-width: 100%; height: auto; border-radius: 6px; }
.album-page-texte code { background: rgba(0,0,0,.06); padding: .05rem .3rem; border-radius: 4px; }

/* Le gap entre vignettes est simulé par un padding sur chaque emplacement (voir plus bas),
   ce qui permet d'annuler ce padding uniquement sur les côtés "conjoints" d'un puzzle
   (images accolées sans le moindre espace), sans toucher aux autres écarts. */
.album-grille {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  grid-template-rows: repeat(var(--rows, 3), 1fr);
}
.album-emplacement { position: relative; padding: .3rem; min-width: 0; min-height: 0; }
.album-emplacement.emplacement--joint-droite { padding-right: 0; }
.album-emplacement.emplacement--joint-gauche { padding-left: 0; }
.album-emplacement.emplacement--joint-haut { padding-top: 0; }
.album-emplacement.emplacement--joint-bas { padding-bottom: 0; }

/* Dans une page d'album réelle (.album-face, hauteur définie par le ratio 3/4 de la page),
   chaque vignette remplit exactement sa cellule plutôt que de garder son ratio 3/4 par
   défaut (celui-ci reste utilisé hors grille : pioche, tirage, ou grille d'admin ci-dessous
   qui n'a pas de hauteur de page fixe et a besoin de place sous la carte pour ses boutons). */
.album-face .album-emplacement .carte,
.album-face .album-emplacement .carte-flip-wrap,
.album-face .album-emplacement .emplacement-vide {
  width: 100%; height: 100%; aspect-ratio: auto;
}

.album-emplacement.emplacement--puzzle .carte { border-radius: 0; }

.emplacement-vide {
  border-radius: 12px;
  border: 2px dashed var(--color-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-border); font-size: 1.6rem;
  background: repeating-linear-gradient(45deg, #fff 0 8px, #FAFBFD 8px 16px);
}
.emplacement--puzzle .emplacement-vide { border-radius: 0; }
.emplacement-vide.emplacement-vide--dispo {
  border-color: var(--accent); color: var(--accent); cursor: pointer; font-family: inherit;
  position: relative; overflow: hidden; flex-direction: column; padding: 0;
}
.emplacement-apercu { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10%; opacity: .35; }
.emplacement-coller-texte {
  position: relative; z-index: 1; background: var(--accent); color: #fff;
  font-size: .75rem; font-weight: 700; padding: .3rem .6rem; border-radius: 999px;
}
.form-coller { width: 100%; height: 100%; }
.form-coller button { width: 100%; height: 100%; }
.album-page-vide { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--color-muted); font-style: italic; }
.emplacement-actions { display: flex; gap: .35rem; margin-top: .4rem; justify-content: center; flex-wrap: wrap; }
.emplacement-actions form { display: inline; }
.form-ajout-carte { scroll-margin-top: 80px; }
.modifier-carte-mise-en-page { display: flex; gap: 2rem; flex-wrap: wrap; }
.modifier-carte-apercu { width: 180px; flex-shrink: 0; }
.modifier-carte-form { flex: 1; min-width: 260px; }
.calques-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1.25rem; }
.calque-tuile { text-align: center; }
.calque-apercu {
  width: 100%; aspect-ratio: 5/7; object-fit: cover; border-radius: 10px;
  background: repeating-conic-gradient(#e5e7eb 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
  margin-bottom: .4rem;
}

.album-nav {
  display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem;
}
.album-nav-info { color: var(--color-muted); font-size: .9rem; }

/* animation de tourne-page */
.album-page-tournante {
  position: absolute; inset: 0; z-index: 10;
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform .7s cubic-bezier(.4,0,.2,1);
  background: var(--color-card);
  box-shadow: 4px 0 24px -8px rgba(0,0,0,.35);
}
.album-page-tournante.tourne-arriere { transform-origin: right center; }
.album-page-tournante.en-cours { transform: rotateY(-180deg); }
.album-page-tournante.tourne-arriere.en-cours { transform: rotateY(180deg); }

/* ── Pioche (cartes non collées) ────────────────────────────*/
.album-entete-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pioche-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1rem; }
.pioche-item { display: flex; flex-direction: column; gap: .4rem; align-items: center; }
.pioche-quantite { font-size: .78rem; color: var(--color-muted); }

@media (max-width: 720px) {
  .album-reliure { flex-direction: column; }
  .album-face { border-left: none; border-top: 1px solid var(--color-border); }
  .album-face:first-child { border-top: none; }
  .topbar-nav { display: none; }
}

/* Aperçu de l'image de fond dans l'éditeur de page (admin) */
.apercu-fond-page { display: block; max-width: 260px; width: 100%; border-radius: 8px; margin-bottom: .5rem; border: 1px solid var(--color-border); }
.case-inline { display: flex; align-items: center; gap: .4rem; font-weight: 400; margin-bottom: .5rem; }
.case-inline input { width: auto; }