/* Casa Colombani — styles communs (palette et typographies de la maquette v641) */
:root {
  --fond: #FFF6E9;
  --fond-menu: #F8E9D2;
  --bord: #F2D9B5;
  --texte: #3B2A20;
  --texte-doux: #6B5444;
  --accent: #B8472F;
  --accent-fonce: #8A3220;
  --vert: #2F4A37;
  --carte: #FFFFFF;
  --erreur: #9B2C1B;
  --podio: #B8472F;
  --moock: #4A6F52;
  --horn: #C9892B;
  --nadiedjoa: #3F6E8C;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 16px/1.5 "Nunito Sans", system-ui, sans-serif;
}
h1, h2, h3 { font-family: Fraunces, Georgia, serif; line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: 2rem; } h2 { font-size: 1.4rem; margin-top: 1.6em; } h3 { font-size: 1.1rem; }
a { color: var(--accent); } a:hover { color: var(--accent-fonce); }
p { margin: 0 0 1em; }
.doux { color: var(--texte-doux); }
.petit { font-size: .875rem; }

/* Mise en page avec menu latéral */
.mise-en-page { display: flex; min-height: 100vh; }
.menu {
  width: 250px; flex: none; background: var(--fond-menu); border-right: 2px solid var(--bord);
  padding: 28px 18px; display: flex; flex-direction: column; gap: 26px;
}
.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--texte); padding: 0 6px; }
.marque .rond { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.marque b { font: 700 20px/1.1 Fraunces, serif; display: block; color: var(--texte); }
.marque span { font-size: 13px; color: var(--texte-doux); }
.menu nav { display: flex; flex-direction: column; gap: 2px; font-weight: 600; font-size: 15px; }
.menu nav a, .menu nav span {
  padding: 10px 14px; border-radius: 14px; color: var(--texte); text-decoration: none;
}
.menu nav a:hover { background: #F2D9B5; }
.menu nav a[aria-current="page"] { background: var(--accent); color: #FFF6E9; }
.menu nav span { color: #A8927F; cursor: default; }
.menu nav small { font-weight: 400; font-size: 12px; margin-left: 6px; }
.moi { margin-top: auto; font-size: 14px; border-top: 2px solid var(--bord); padding-top: 16px; }
.moi b { display: block; }
.moi button { margin-top: 8px; }
.contenu { flex: 1; padding: 36px 44px 60px; max-width: 1100px; min-width: 0; }

/* Éléments de formulaire */
label { display: block; font-weight: 600; margin: 0 0 4px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], select {
  width: 100%; font: inherit; color: inherit; background: #fff;
  border: 2px solid var(--bord); border-radius: 12px; padding: 10px 12px;
}
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 3px solid #E6A98F; outline-offset: 1px; }
button, .bouton {
  font: inherit; font-weight: 700; cursor: pointer; border: 0; border-radius: 12px;
  padding: 10px 18px; background: var(--accent); color: #FFF6E9; text-decoration: none; display: inline-block;
}
button:hover { background: var(--accent-fonce); }
button.secondaire { background: transparent; color: var(--accent); border: 2px solid var(--accent); padding: 6px 12px; }
button.secondaire:hover { background: #F8E9D2; }
button:disabled { opacity: .5; cursor: wait; }
.champ { margin-bottom: 16px; }
.message { padding: 12px 16px; border-radius: 12px; margin: 0 0 16px; }
.message.erreur { background: #FBE3DD; color: var(--erreur); border: 2px solid #E9B3A6; }
.message.ok { background: #E4EFE6; color: var(--vert); border: 2px solid #B7D0BC; }
.message.alerte { background: #FFF0CC; color: #6A4A00; border: 2px solid #E8CB84; }

/* Connexion */
.centre { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.carte { background: var(--carte); border: 2px solid var(--bord); border-radius: 22px; padding: 32px; width: 100%; max-width: 440px; }
.carte .marque { margin-bottom: 20px; padding: 0; }

/* Cartes famille */
.familles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.membre { background: var(--carte); border: 2px solid var(--bord); border-radius: 18px; padding: 16px; display: flex; gap: 14px; align-items: center; }
.initiales { width: 52px; height: 52px; border-radius: 50%; color: #fff; display: grid; place-items: center; font: 700 18px Fraunces, serif; flex: none; }
.membre b { display: block; }
.badge { display: inline-block; font-size: 12px; font-weight: 700; color: #fff; border-radius: 99px; padding: 1px 10px; }
.f-Podio { --c: var(--podio); } .f-Moock { --c: var(--moock); }
.f-Horn { --c: var(--horn); } .f-Nadiedjoa { --c: var(--nadiedjoa); }
.initiales, .badge { background: var(--c, #888); }

/* Tableaux */
.tableau-defile { overflow-x: auto; border: 2px solid var(--bord); border-radius: 18px; background: var(--carte); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--bord); vertical-align: middle; }
th { background: var(--fond-menu); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td input[type=text], td input[type=email], td input[type=tel], td select { padding: 6px 8px; min-width: 120px; }
td input[type=number] { width: 64px; padding: 6px 8px; min-width: 0; }
td.centre-col, th.centre-col { text-align: center; }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }
tr.inactif td { opacity: .55; }
.fraction { display: inline-flex; align-items: center; gap: 4px; }
.formulaire-ajout { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; align-items: end; background: var(--carte); border: 2px solid var(--bord); border-radius: 18px; padding: 18px; }
dialog { border: 2px solid var(--bord); border-radius: 18px; background: var(--fond); color: var(--texte); max-width: 480px; }
dialog code { display: block; font-size: 1.4rem; background: #fff; border: 2px dashed var(--accent); border-radius: 12px; padding: 12px; text-align: center; margin: 12px 0; user-select: all; }

@media (max-width: 800px) {
  .mise-en-page { flex-direction: column; }
  .menu { width: 100%; border-right: 0; border-bottom: 2px solid var(--bord); padding: 14px 16px; gap: 12px; }
  .menu nav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .menu nav a, .menu nav span { white-space: nowrap; padding: 8px 12px; }
  .moi { margin-top: 0; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .moi button { margin-top: 0; }
  .contenu { padding: 22px 16px 48px; }
  h1 { font-size: 1.6rem; }
}