:root {
  --plaque: #E3E8EE;
  --tenon:  #D3DAE2;
  --encre:  #1B2A41;
  --doux:   #56677D;
  --juliette: #C91A09;
  --matheo:   #0055BF;
  --jaune:  #F2CD37;
  --blanc:  #FFFFFF;
  --ombre:  rgba(27, 42, 65, .2);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--encre);
  line-height: 1.45;
  background-color: var(--plaque);
  background-image: radial-gradient(circle, var(--tenon) 0 6px, transparent 6.5px);
  background-size: 22px 22px;
  min-height: 100vh;
}
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--matheo); outline-offset: 2px; }
a { color: var(--matheo); }

.page { max-width: 1200px; margin: 0 auto; padding: clamp(1rem, 3vw, 2.5rem); }

/* En-tête */
header {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.25rem; margin-bottom: 2rem;
}
h1 {
  margin: 0; font-weight: 800; letter-spacing: -.035em; line-height: .9;
  font-size: clamp(2.8rem, 8vw, 5.5rem);
}
.stats { margin: .6rem 0 0; color: var(--doux); font-size: 1.05rem; }

/* Barre du compte connecté (page admin) */
.barre-compte {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  margin-bottom: 1.5rem; padding: .6rem .9rem;
  background: var(--encre); color: var(--blanc); border-radius: 6px;
}
.barre-compte strong { font-weight: 800; }
.barre-compte .espace { flex: 1; }
.barre-compte a { color: var(--blanc); }
.barre-compte .petit { border-color: var(--blanc); background: transparent; color: var(--blanc); }

/* Boutons « brique » */
.onglets { display: flex; gap: .6rem; flex-wrap: wrap; }
.gros {
  border: 2px solid var(--encre); border-radius: 6px; background: var(--blanc);
  padding: .7rem 1.15rem; font-weight: 600; font-size: 1.05rem; cursor: pointer;
  box-shadow: 0 4px 0 var(--encre); transition: transform .08s, box-shadow .08s;
}
.gros:active, .gros[aria-selected="true"] { transform: translateY(3px); box-shadow: 0 1px 0 var(--encre); }
.gros[aria-selected="true"], .gros.principal { background: var(--jaune); }
.gros:disabled { opacity: .6; cursor: wait; }
.nb {
  display: inline-block; min-width: 1.6em; margin-left: .35rem; padding: 0 .4em;
  border-radius: 99px; background: var(--encre); color: var(--blanc); font-size: .85em; text-align: center;
}

/* Disposition */
.grille { display: grid; grid-template-columns: 320px 1fr; gap: 2rem; align-items: start; }
.grille.seule { grid-template-columns: 1fr; }
@media (max-width: 820px) { .grille { grid-template-columns: 1fr; } }

.panneau {
  background: var(--blanc); border: 2px solid var(--encre); border-radius: 8px;
  padding: 1.25rem; box-shadow: 0 4px 0 var(--encre);
}
@media (min-width: 821px) { .grille > .panneau { position: sticky; top: 1.5rem; } }
.panneau h2 { margin: 0 0 1rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }

/* Écrans de connexion et de premier compte */
.ecran-centre { max-width: 400px; margin: 2rem auto 0; }
.ecran-centre p { margin: 0 0 1rem; color: var(--doux); }

.champ { margin-bottom: 1rem; }
.champ > label, legend { display: block; font-weight: 600; margin-bottom: .35rem; padding: 0; }
.aide { font-weight: 400; color: var(--doux); font-size: .9rem; }
input[type="text"], input[type="search"], input[type="password"] {
  width: 100%; padding: .6rem .75rem; border: 2px solid var(--encre); border-radius: 6px; background: var(--blanc);
}
#numero { font-size: 1.4rem; font-weight: 800; letter-spacing: .02em; }

.erreur-form {
  margin: 0 0 1rem; padding: .6rem .75rem; border-left: 4px solid var(--juliette);
  background: #FBEAE8; color: var(--encre);
}

.apercu {
  aspect-ratio: 4 / 3; margin-bottom: 1rem; border: 2px dashed var(--tenon); border-radius: 6px;
  display: grid; place-items: center; text-align: center; color: var(--doux); padding: .75rem; font-size: .95rem;
}
.apercu img { max-width: 100%; max-height: 100%; object-fit: contain; }
.apercu-infos { margin: -.5rem 0 1rem; font-size: .95rem; min-height: 1.2em; }

fieldset.qui { border: 0; margin: 0 0 1rem; padding: 0; }
.qui .choix { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.qui label { position: relative; }
.qui input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.qui span {
  display: block; text-align: center; padding: .6rem; border: 2px solid var(--c); border-radius: 6px;
  color: var(--c); font-weight: 600; background: var(--blanc);
}
.qui input:checked + span { background: var(--c); color: var(--blanc); }
.qui input:focus-visible + span { outline: 3px solid var(--encre); outline-offset: 2px; }

.principal { width: 100%; }

/* Filtres */
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1.75rem; }
.puce {
  border: 2px solid var(--encre); border-radius: 99px; background: var(--blanc);
  padding: .3rem .9rem; font-weight: 600; cursor: pointer;
}
.puce[aria-pressed="true"] { background: var(--encre); color: var(--blanc); }
.filtres input[type="search"] { flex: 1 1 180px; max-width: 280px; margin-left: auto; padding: .4rem .75rem; border-radius: 99px; }

/* Les sets en briques : la couleur des tenons dit à qui est le set */
.sets {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2.25rem 1.25rem;
}
.brique {
  --c: var(--matheo);
  position: relative; margin-top: 10px; display: flex; flex-direction: column;
  background: var(--blanc); border-top: 10px solid var(--c); border-radius: 3px 3px 6px 6px;
  box-shadow: 0 4px 0 var(--ombre);
}
.brique.juliette { --c: var(--juliette); }
.brique::before {
  content: ""; position: absolute; left: 6px; right: 6px; top: -20px; height: 10px;
  background: radial-gradient(ellipse 8px 10px at 50% 100%, var(--c) 95%, transparent 100%);
  background-size: 26px 10px; background-repeat: space no-repeat;
}
.photo {
  aspect-ratio: 4 / 3; padding: .75rem; display: grid; place-items: center;
  border-bottom: 1px solid #EDF0F4; color: var(--doux); font-size: .9rem; text-align: center;
}
.photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.infos { padding: .75rem .9rem .25rem; flex: 1; }
.numero { font-weight: 800; font-size: 1.15rem; text-decoration: none; color: var(--encre); }
.numero:hover { text-decoration: underline; }
.nom { margin: .1rem 0 .2rem; }
.details { margin: 0; color: var(--doux); font-size: .9rem; }
.pied { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .9rem .85rem; }
.personne { font-weight: 600; color: var(--c); }
.actions { display: flex; gap: .35rem; }
.petit {
  border: 2px solid var(--encre); border-radius: 5px; background: var(--blanc);
  padding: .2rem .55rem; font-size: .88rem; font-weight: 600; cursor: pointer;
}
.petit.jaune { background: var(--jaune); }
.petit.discret { border-color: transparent; color: var(--doux); text-decoration: underline; }

.vide {
  background: var(--blanc); border: 2px dashed var(--doux); border-radius: 8px;
  padding: 2rem; text-align: center; color: var(--doux); max-width: 46ch;
}

/* Fenêtre des comptes */
dialog {
  width: min(520px, calc(100% - 2rem)); max-height: calc(100vh - 2rem); overflow: auto;
  border: 2px solid var(--encre); border-radius: 8px; padding: 1.25rem 1.25rem .5rem;
  box-shadow: 0 6px 0 var(--encre); color: var(--encre);
}
dialog::backdrop { background: rgba(27, 42, 65, .45); }
.dlg-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.dlg-tete h2 { margin: 0; font-size: 1.5rem; font-weight: 800; }
dialog h3 { margin: 1.5rem 0 .75rem; font-size: 1.1rem; }
.comptes { list-style: none; margin: 0; padding: 0; }
.comptes li {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  padding: .55rem 0; border-bottom: 1px solid #EDF0F4;
}
.comptes .quand { display: block; color: var(--doux); font-size: .85rem; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 480px) { .deux { grid-template-columns: 1fr; } }

#message {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%) translateY(150%);
  background: var(--encre); color: var(--blanc); padding: .7rem 1.1rem; border-radius: 6px;
  box-shadow: 0 4px 0 var(--ombre); transition: transform .2s, visibility .2s; max-width: calc(100% - 2rem); z-index: 10;
  visibility: hidden;
}
#message.visible { transform: translateX(-50%) translateY(0); visibility: visible; }
#message.erreur { background: var(--juliette); }

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