:root {
	 --bg:#0f172a;
	 --panel:#111827;
	 --muted:#6b7280;
	 --text:#e5e7eb;
	 --accent:#22c55e;
	 }
	 
    * {
		box-sizing: border-box;
	}
	
    body {
		margin:0;
		font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
		background:linear-gradient(180deg,#0b1025,#0f172a);
		color:var(--text);
		min-height:100vh;
	}
	
    header {
		padding:32px 16px 0;
		text-align:center;
	}
	
    h1 {
		margin:0 0 8px;
		font-size: clamp(1.4rem, 2.4vw, 2rem);
	}
	
    p.sub {
		margin:0;
		color:var(--muted);
	}
	
    .container {
		max-width: 960px;
		margin: 24px auto 56px;
		padding: 0 16px;
	}
	
    .card {
		background:rgba(17,24,39,.7);
		border:1px solid rgba(255,255,255,.06);
		backdrop-filter: blur(10px);
		border-radius: 18px;
		padding: 18px;
		box-shadow: 0 6px 30px rgba(0,0,0,.25);
	}
	
	.index_card {
      background: rgba(17,24,39,.7);
      border: 1px solid rgba(255,255,255,.06);
      border-radius: 18px;
	  display: flex;
      padding: 40px 20px;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      text-align: center;
	  box-shadow: 2px 2px 5px rgba(200,200,200,0.2), -2px -2px 5px rgba(200,200,200,0.2);
    }
	
	 /* Harmonisation des titres et paragraphes */
    .index_card h2 {
      margin: 0 0 12px 0;
    }

    .index_card p {
      margin: 0 0 20px 0;
      color: var(--muted);
    }
	
	.grid.index_page {
      display: grid;
      gap: 16px;
      grid-template-columns: 1fr; /* mobile par défaut */
    }
	
    .grid {
		display:grid;
		gap:16px;
		grid-template-columns: 1fr;
	}
	
	@media (min-width: 720px) {
	  /* Cible uniquement les cartes de l'accueil */
	  .index_card {
		grid-template-columns: 1fr 1fr;
		flex-direction: column;
		justify-content: space-between; /* cartes de même hauteur */
	  }

	  .grid.index_page {
		grid-template-columns: 1fr 1fr; /* 2 colonnes égales */
		align-items: stretch;  
	  }
	}
	
    .dropzone {
		border:2px dashed rgba(255,255,255,.18);
		border-radius:14px;
		padding:22px;
		text-align:center;
		transition: .2s ease;
	}
	
    .dropzone.drag {
		border-color: var(--accent);
		background: rgba(34,197,94,.06);
	}
	
    .files {
		display:flex;
		flex-direction: column;
		gap:10px;
		margin-top:8px;
	}
	
    .file {
		display:grid;
		grid-template-columns: 1fr auto;
		align-items:center;
		gap:8px;
		padding:10px 12px;
		border:1px solid rgba(255,255,255,.08);
		border-radius:12px;
		background: rgba(255,255,255,.03);
	}
	
    .file .name {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
    .row-actions {
		display:flex;
		gap:6px;
	}
	
    button, .btn {
		cursor:pointer; 
		border:none; 
		border-radius: 12px;
		padding: 10px 14px; 
		background:#1f2937;
		color:var(--text);
		font-weight:600;
		transition: .2s ease;
	}
	
    button:hover, .btn:hover {
		transform: translateY(-2px);
		background:#2b3752;
		color:#8ea3d4;
	}
		
    .btn-ghost {
		background: transparent;
		border:1px solid rgba(255,255,255,.12); 
	}

    .btn-accent {
		background: var(--accent);
		color:#03250f;
	}
	
    .btn-danger {
		background:#ef4444; 
		color:#111;
	}

	.tooltip {
	  position: relative;
	  display: inline-block;
	  cursor: pointer;
	}

	.tooltip .tooltiptext {
	  visibility: hidden;
	  background-color: #8ea3d4;
	  color: #1f2937;
	  text-align: center;
	  padding: 4px 8px;
	  border-radius: 6px;
	  font-size: 0.8rem;
	  position: absolute;
	  bottom: -100%;  /* au-dessous du bouton */
	  left: 50%;
	  transform: translateX(-50%);
	  white-space: nowrap;
	  z-index: 10;
	  opacity: 0;
	  transition: opacity 0.2s ease;
	  border: 1px solid rgba(255,255,255,0.08);
	}

	.tooltip:hover .tooltiptext {
	  visibility: visible;
	  opacity: 1;
	}

	.tooltip input + .tooltiptext {
	  font-weight: bold;
	}

    .row-actions button {
		padding:8px 10px;
	}
	
    .foot { 
		display:flex;
		flex-wrap:wrap;
		gap:10px; 
		justify-content:space-between;
		align-items:center;
		margin-top:14px; 
	}
	
    .hint {
		color:var(--muted);
		font-size:.92rem;
	}
		
    details {		
		background: rgba(255,255,255,.03);
		border:1px solid rgba(255,255,255,.08);
		border-radius:12px;
		padding:10px 12px;
	}

    summary {
		cursor:pointer;
		color:var(--muted);
	}
	
    .kbd {
		font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
		font-size:.9em; background: rgba(255,255,255,.06); 
		padding:2px 6px; border-radius:6px;
		border:1px solid rgba(255,255,255,.15); 
	}
   
   footer {
		opacity:.8;
		text-align:center; 
		font-size:.9rem; 
		margin-top:18px; 
	}
	
    @media (min-width: 720px) { 
		.grid { 
			grid-template-columns: 1.2fr .8fr;
		} 
	}
	
	a {
		color: var(--accent);
		font-weight: 500;
		text-decoration: none;
	}
		
    a:hover {
		text-decoration: underline;
		color: #4ade80;
	}
	
	.popup {
	  position: fixed;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  background: rgba(17,24,39,0.95);
	  border: 1px solid rgba(255,255,255,0.08);
	  padding: 24px 32px;
	  border-radius: 16px;
	  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
	  display: none; /* caché par défaut */
	  z-index: 2000;
	  text-align: center;
	}

	#popup p {
	  margin-bottom: 16px;
	  color: var(--text);
	  font-weight: 500;
	}

	#popup button {
	  min-width: 80px;
	}