/* ====== Palette (variables CSS) ====== */
    :root{
      --paper:#F4E9D8;           /* fond principal */
      --sepia:#D6C4A4;           /* surfaces secondaires */
      --blue:#4B6C8B;            /* éléments clés, titres */
      --aluminium:#A3A3A3;       /* lignes, UI gris */
      --bordeaux:#7B2D26;        /* actions/accents */
      --ink:#2B2B2B;             /* texte général */
      --offwhite:#FAF9F7;        /* texte inversé sur fond sombre */
      --focus:#0A66C2;           /* anneau focus (accessibilité) */
      --radius:8px;
      --shadow:0 6px 18px rgba(0,0,0,.08);
      --shadow-sm:0 2px 8px rgba(0,0,0,.06);
    }

    /* ====== Reset/opérations de base ====== */
    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      font-family:"Lato",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      color:var(--ink);
      background-color:var(--paper);
      background-image:url('images/OldPaper02.jpg'); /* mets ton fichier ici */
      background-size:cover;
      background-repeat:repeat;
      line-height:1.6;
      font-size:16px;
    }
    img{max-width:100%;display:block}
    a{color:var(--blue);text-decoration:none}
    a:hover{text-decoration:underline}

    /* ====== Grille simple ====== */
    .container{max-width:1200px;margin:0 auto;padding:24px}
    .grid{display:grid;gap:20px}
    .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    @media (max-width: 960px){
      .grid-3{grid-template-columns:1fr 1fr}
    }
    @media (max-width: 640px){
      .grid-3,.grid-2{grid-template-columns:1fr}
    }

    /* ====== Titres ====== */
    h1,h2,h3,h4{font-family:"Oswald",sans-serif;margin:0 0 8px}
    h1{font-weight:700;letter-spacing:.3px;font-size:clamp(32px,4vw,44px);color:var(--blue)}
    h2{font-weight:600;font-size:clamp(24px,3vw,32px);color:var(--blue)}
    h3{font-weight:600;font-size:22px;color:var(--ink)}
    .lead{font-size:18px;color:#423d3d}

    /* ====== Accents nostalgie ====== */
    .stamp{font-family:"Special Elite", monospace; letter-spacing:.5px; text-transform:uppercase}

    /* ====== Surface / cartes ====== */
    .surface{
      background:#fffdf8;
      border:1px solid rgba(0,0,0,.06);
      border-radius:var(--radius);
      box-shadow:var(--shadow-sm);
    }
    .card{padding:16px}
    .card:hover{box-shadow:var(--shadow)}

    /* ====== Boutons ====== */
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:10px;
      padding:12px 18px;border-radius:var(--radius);
      border:1px solid transparent;font-weight:700;cursor:pointer;
      transition:.2s ease-in-out; text-transform:uppercase; letter-spacing:.6px;
      font-family:"Oswald",sans-serif;
    }
    .btn:focus{outline:3px solid var(--focus);outline-offset:2px}
    .btn-primary{background:var(--bordeaux);color:var(--offwhite)}
    .btn-primary:hover{filter:brightness(1.07)}
    .btn-secondary{background:var(--blue);color:var(--offwhite)}
    .btn-secondary:hover{filter:brightness(1.07)}
    .btn-ghost{background:transparent;border-color:var(--aluminium);color:var(--ink)}
    .btn-ghost:hover{background:rgba(0,0,0,.04)}

    /* ====== Inputs ====== */
    .field{display:flex;flex-direction:column;gap:6px}
    .input, .select{
      width:100%;padding:12px 14px;border-radius:var(--radius);
      border:1.5px solid var(--aluminium);background:#fffdf8;
      outline:none;
    }
    .input:focus,.select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(75,108,139,.15)}
    label{font-weight:700;font-size:14px;color:#4b4949}

    /* ====== Chips (filtres sélectionnés) ====== */
    .chip{
      display:inline-flex;align-items:center;gap:8px;
      background:var(--sepia);color:#3b3a3a;border-radius:999px;padding:6px 10px;
      border:1px solid rgba(0,0,0,.08)
    }
    .chip .x{
      width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
      background:rgba(0,0,0,.15);color:#fff;cursor:pointer;font-weight:700
    }

    /* ====== Nav/Header ====== 
    .topbar{
      background:#fffaf1;
      border-bottom:1px solid rgba(0,0,0,.08);
    }
    */
    .topbar .inner{display:flex;align-items:center;justify-content:space-between;padding:14px 24px}
    .brand{display:flex;align-items:center;gap:12px}
    .brand-logo{width:36px;height:36px;border-radius:6px}
    .brand-name{font-family:"Oswald",sans-serif;font-size:22px;letter-spacing:.8px;color:var(--blue)}
    .nav{display:flex;gap:16px;flex-wrap:wrap}
    .nav a{font-size:22px;font-weight:700;color:var(--ink)}
    .nav a.active{color:var(--blue)}

	.hero-full {
	  width: 100%;       /* occupe tout l'écran */
	  margin: 0;         /* supprime les marges éventuelles */
	  padding: 0;        /* pas de padding global */
	}

	.hero-full .panel {
	  border-radius: 0;  /* pas de coins arrondis si tu veux que ça colle aux bords */
	}

	.hero-full img {
	  display: block;
	  width: 100%;
	  height: auto;
	  object-fit: cover; /* s’adapte bien si tu fixes une hauteur */
	}

    /* ====== Hero ====== */
    .hero {
	  padding: 32px 0;
	}
	.hero .panel {
	  background: linear-gradient(180deg, rgba(75,108,139,.08), rgba(0,0,0,0) 50%), var(--paper);
	  /*border: 1px solid rgba(0,0,0,.06);*/
	  border-radius: var(--radius);
	  padding: 0; /* pas de padding interne, pour que l’image occupe toute la largeur */
	  overflow: hidden; /* coupe ce qui dépasse du border-radius */
	}
	.hero img {
	  display: block;
	  width: 100%;
	  height: auto;
	  border-radius: var(--radius);
	}


    /* ====== Listes / cartes membres ====== */
    .member{display:flex;gap:14px;align-items:center}
    .avatar{width:54px;height:54px;border-radius:50%;background:var(--aluminium)}
    .member .name{font-weight:700}
    .badge{background:var(--blue);color:var(--offwhite);padding:4px 8px;border-radius:4px;font-size:12px}
    .badge.stamp{background:transparent;color:var(--bordeaux);border:1px dashed var(--bordeaux)}

    /* ====== Table / BDD ====== */
    .table{width:100%;border-collapse:collapse}
    .table th,.table td{padding:12px 10px;border-bottom:1px solid rgba(0,0,0,.08);text-align:left}
    .table th{font-family:"Oswald";letter-spacing:.4px;color:#2f2f2f}
    .row-actions{display:flex;gap:8px;justify-content:flex-end}

    /* ====== Footer sombre ====== */
    .footer{
      background:#1f1f1f;color:var(--offwhite);margin-top:40px;
    }
    .footer a{color:#cfd8e3}
    .footer .cols{display:grid;gap:22px;padding:28px 24px;grid-template-columns:2fr 1fr 1fr}
    @media (max-width: 900px){ .footer .cols{grid-template-columns:1fr} }
    .credits{border-top:1px solid rgba(255,255,255,.1);padding:12px 24px;color:#a6a6a6}
    
    /* ====== Add-on: cartouches colorés dans les résultats ====== */
	/* Conserve le style global des .chip ailleurs (filtres, etc.).
	   Ici, on colore uniquement celles qui sont dans les cartes résultats. */
	.kit-card .chip{
	  background: var(--blue);
	  color: var(--offwhite);
	  border-color: transparent;
	  font-weight: 700;
	  border-radius: 6px;
	  font-size: 0.75rem;   /* ~12px */
	  font-weight: 700;     /* harmonise l’épaisseur */
	}
	.kit-card .chip .x{ /* au cas où on réutilise l'icône de fermeture un jour */
	  background: rgba(255,255,255,.25);
	}
	/* Optionnel : légère séparation quand il y a un tiret entre les chips */
	.kit-card .kit-chips{
		display: flex;
	  	flex-wrap: nowrap;   /* force la même ligne */
	  	gap: 6px;            /* espace entre cartouches */
  	}
  	.kit-card .badge{
	  border-radius: 6px;  /* harmonise les coins */
	  font-size: 0.95rem;   
	  font-weight: 700;     /* harmonise l’épaisseur */
	  
	}
	/* Patch : Marque (.badge) = Échelle (.chip) dans les résultats */
	.kit-card .badge,
	.kit-card .chip{
	  line-height: 1.2;
	  padding: 4px 8px;
	  border-radius: 6px;
	}
	/* Thumbs : remplissent la largeur, gardent le ratio, pas de rognage */
	.kit-card .kit-thumb{
	  display:block;
	  width:100% !important;          /* scale up/down à la largeur de la card */
	  height:auto !important;         /* conserve le ratio naturel */
	  aspect-ratio:auto !important;   /* annule tout ratio forcé précédent */
	  object-fit:contain !important;  /* neutralise un éventuel object-fit:cover inline */
	  margin:0;
	  padding:0;
	  background:#eee;                /* fond neutre si bandes éventuelles */
	}
	/* Si un wrapper ajoute du padding autour de l'image */
	.kit-card .thumb-wrap{
	  padding:0 !important;
	  margin:0 !important;
	}
	.open-lightbox { cursor: zoom-in; }
#result-limit { display: none !important; }