:root{
  --brand:#fdcb18; --accent:#04BFBF; --ink:#111827; --muted:#6b7280; --bg:#f7f8fb;
  --card:#ffffff; --border:#e5e7eb;
}
*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--ink); background:var(--bg); }
a{ color: var(--brand); text-decoration: none; }
.container{ max-width: 1100px; margin: 24px auto; padding: 0 16px 80px 16px; }

.site-header, .site-footer{
  background: #fff; border-bottom:1px solid var(--border); border-top:1px solid var(--border);
}
.site-header{ padding:12px 0; position: sticky; top:0; z-index: 10; }
.site-footer{ 
  padding:16px 0; 
  margin-top: 40px; 
  text-align:center; 
  color:var(--muted); 
  background:#fff; 
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.brand{ display:flex; align-items:center; gap:12px; padding:0 16px; }
.brand img{ width:100px; height:36px; }
.brand-text{ display:flex; flex-direction:column; }
.brand-text strong{ font-size: 14px; letter-spacing:.04em; }
.brand-text span{ font-size: 12px; color: var(--muted); }

/* Wizard */
.wizard .steps{ list-style:none; display:flex; gap:8px; padding:0; margin:0 0 16px 0; overflow:auto; }
.wizard .steps li{ padding:8px 12px; border:1px solid var(--border); background:#fff; border-radius:999px; font-size:13px; color:var(--muted); white-space:nowrap; }
.wizard .steps li.active{ border-color: var(--brand); color:#fff; background: var(--brand); }

/* Accordion */
.accordion-header {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}

.accordion-header:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.accordion-header h1 {
  margin: 0;
  font-size: 24px;
  color: var(--ink);
}

.accordion-header h2 {
  margin: 0;
  font-size: 18px;
  color: var(--ink);
  font-weight: 600;
}

.accordion-icon {
  font-size: 20px;
  font-weight: bold;
  color: var(--brand);
  transition: transform 0.3s ease;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  margin-bottom: 8px;
}

.accordion-content.active {
  max-height: 2000px;
}

.accordion-item {
  margin-bottom: 16px;
}

/* Evaluation Sections */
.evaluation-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.evaluation-section {
  background: #f8f9fa;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

.evaluation-section h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 2px solid var(--brand);
  padding-bottom: 8px;
}

.evaluation-section .list-editor {
  margin: 0;
}

.evaluation-section .adder {
  margin: 8px 0;
}

.evaluation-section ul {
  margin: 8px 0;
  padding-left: 18px;
}

.evaluation-section li {
  margin: 6px 0;
  padding: 4px 0;
}

/* Rating Selector */
.rating-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.rating-selector label {
  font-weight: 600;
  color: var(--ink);
  font-size: 14px;
}

.rating-select {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  background: white;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.rating-select:hover {
  border-color: var(--brand);
}

.rating-select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(253, 203, 24, 0.1);
}

.rating-select option {
  padding: 8px;
}

/* Conclusion Editor */
.conclusion-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.conclusion-editor label {
  font-weight: 600;
  color: var(--ink);
  font-size: 16px;
}

.conclusion-editor textarea {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 14px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.6;
  min-height: 200px;
  transition: border-color 0.3s ease;
}

.conclusion-editor textarea:hover {
  border-color: var(--brand);
}

.conclusion-editor textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(253, 203, 24, 0.1);
}

.card{ background: var(--card); border:1px solid var(--border); border-radius:16px; padding:16px; margin-bottom:16px; box-shadow: 0 2px 6px rgba(0,0,0,.04); }
.card h2{ margin: 4px 0 12px 0; }

.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.grid-3{ display:grid; grid-template-columns: 1fr 1fr 1fr auto; gap:8px; }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.field input{ padding:10px 12px; border:1px solid var(--border); border-radius:10px; font-size:14px; }
.preview{ margin-top:8px; height: 80%;width: 50%; border:1px dashed var(--border); border-radius:10px; padding:6px; background:#fafafa; }


.adder{ display:flex; gap:8px; align-items:center; margin:8px 0; }
.adder input{ flex:1; padding:10px 12px; border:1px solid var(--border); border-radius:10px; }
.list-editor ol, .list-editor ul{ margin:8px 0; padding-left:18px; }
.list-editor li{ margin:6px 0; }

.plan{ width:100%; border-collapse: collapse; }
.plan th, .plan td{ border:1px solid var(--border); padding:8px; }
.plan th{ background:#f3f4f6; text-align:left; }

.gallery{ display:grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.gallery img{ width:100%; height:120px; object-fit:cover; border-radius:10px; border:1px solid var(--border); }

/* Sortable Gallery */
.gallery.sortable {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gallery.sortable .gallery-item {
  position: relative;
  width: 140px;
  height: 120px;
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: move;
  transition: all 0.3s ease;
}

.gallery.sortable .gallery-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.gallery.sortable .gallery-item.dragging {
  opacity: 0.5;
  transform: rotate(5deg);
}

.gallery.sortable .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.gallery.sortable .gallery-item .remove-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(255, 0, 0, 0.8);
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery.sortable .gallery-item:hover .remove-btn {
  opacity: 1;
}

.gallery.sortable .gallery-item .drag-handle {
  position: absolute;
  bottom: 5px;
  left: 5px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  cursor: move;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery.sortable .gallery-item:hover .drag-handle {
  opacity: 1;
}

.kpi-box{ display:grid; grid-template-columns: repeat(4,1fr); gap:8px; margin-top:12px; }
.kpi-box > div{ background:#f3f8ff; border:1px solid #dbeafe; border-radius:10px; padding:10px; }
.hidden{ display:none; }

.actions{ display:flex; justify-content:flex-end; margin-top:10px; }
.btn{ background:#fff; border:1px solid var(--border); padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600; }
.btn:hover{ border-color:#cbd5e1; }
.btn.small{ padding:8px 10px; font-size:12px; }
.btn.ghost{ background:transparent; }
.btn.primary{ background: var(--brand); color:#fff; border-color: var(--brand); }

/* Report (print) */
.page{ page-break-after: always; background:#fff; padding: 16px; border:1px solid var(--border); border-radius: 12px; margin-bottom: 16px; }
.cover{ text-align:center; }
.cover .logo{ max-height: 80px; }
.cover h1{ margin: 8px 0 0; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); }
.cover h2{ margin: 6px 0 8px; color: var(--muted); font-weight: 500; }
.trainer-photo{ margin-top:12px; max-height:120px; border-radius:12px; border:1px solid var(--border); padding:4px; }

.chart{ width:100%; border:1px solid var(--border); border-radius:12px; padding:6px; background:#fcfcfc; margin: 8px 0; }
.kpis{ background:#f9fafb; border:1px solid var(--border); padding:10px; border-radius:10px; }
.tops{ padding-left:18px; }
.bullets{ padding-left:18px; }
.brand-side .wm{ width:100%; opacity: .15; }
.grid-4{ display:grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap:8px; }

.attendance{ width:100%; border:1px solid var(--border); border-radius: 10px; }


.stack{ display:flex; flex-direction:column; gap:8px; }

.table-preview{
  margin-top:10px;
  max-height:260px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
}
.table-preview table{ width:100%; border-collapse:collapse; }
.table-preview th, .table-preview td{
  padding:8px;
  border-bottom:1px solid var(--border);
  font-size:13px;
  text-align:left;
}
.table-preview thead th{
  position:sticky; top:0;
  background:#f3f4f6;
  z-index:1;
}
.table-preview .hint{
  padding:8px 10px; color:var(--muted); font-size:12px;
}
.hidden{ display:none; } /* si pas déjà présent */

/* textareas cohérentes avec les inputs */
textarea{
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  font-size:14px;
  resize: vertical;
  font-family: inherit;
}
.btn.medium{
  padding: 10px 20px;   /* plus large que .btn (10px 14px) */
  font-size: 14px;
  min-width: 200px;     /* force une largeur confortable */
}


/* --- Style "exact modèle" --- */
.title{ text-transform: uppercase; letter-spacing:.06em; font-size: 28px; margin: 10px 0 6px; color: var(--ink); }
.training-title{ font-size: 20px; color: var(--brand); margin: 8px 0 12px; font-weight: 600; font-style: italic; }
.subtitle{ font-size: 18px; color: var(--ink); margin: 4px 0 6px; }
.meta{ color: var(--muted); font-size: 14px; }

.section > h2{
  text-transform: none; font-size: 20px; margin: 0 0 8px 0; color: var(--ink);
  border-bottom: 1px solid var(--border); padding-bottom: 6px;
}

.client-block .client-name{ font-size:18px; margin: 0 0 4px 0; }

/* listes proches du PDF */
.list-num{ margin: 8px 0 0 18px; }
.list-num > li{ margin: 4px 0; }
.list-bullet{ margin: 8px 0 0 18px; list-style: disc; }
.list-bullet > li{ margin: 4px 0; }
.list-compact{ margin: 6px 0 0 18px; }
.list-compact > li{ margin: 2px 0; }

/* tableaux serrés comme l'exemple */
table.plan.tight th, table.plan.tight td{ padding:6px 8px; font-size: 13px; }

/* alignements */
.centered{ text-align:center; }
.cols{ gap: 16px; }

/* garder les retours à la ligne de saisie */
.pre{ white-space: pre-wrap; }

/* impression (A4, marges sobres) */
@page{ size: A4; margin: 16mm 16mm; }



/* afficher les retours à la ligne dans les cellules */
.pre{ white-space: pre-wrap; }
/* Print config */
@page{ size:A4; margin: 14mm 14mm; }
@media print{
  .site-header, .site-footer{ display:none; }
  body{ background:white; }
  .page{ box-shadow:none; border:none; margin:0; border-radius:0; }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #000;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #333;
}

/* Report Styles */
.evaluation-item {
  margin-bottom: 16px;
  padding: 12px;
  background: #f8f9fa;
  border-left: 4px solid var(--brand);
  border-radius: 0 8px 8px 0;
}

.evaluation-item h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.evaluation-item p {
  margin: 0;
  font-size: 14px;
}

.conclusion-text {
  line-height: 1.6;
  font-size: 14px;
  text-align: justify;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid var(--border);
}

/* --- Spinner et effets pour le bouton PDF --- */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 8px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.success-icon {
  color: #28a745;
  font-weight: bold;
  margin-right: 8px;
  animation: pulse 0.5s ease-in-out;
}

.error-icon {
  color: #dc3545;
  font-weight: bold;
  margin-right: 8px;
  animation: shake 0.5s ease-in-out;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* États du bouton PDF */
#btn_generate.generating {
  background: linear-gradient(45deg, #007bff, #0056b3);
  cursor: not-allowed;
  opacity: 0.8;
  transform: scale(0.98);
  transition: all 0.3s ease;
}

#btn_generate.success {
  background: linear-gradient(45deg, #28a745, #1e7e34);
  color: white;
  transform: scale(1.02);
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

#btn_generate.error {
  background: linear-gradient(45deg, #dc3545, #c82333);
  color: white;
  transform: scale(1.02);
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

/* Effet de clic sur le bouton */
#btn_generate:active {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}

#btn_generate:hover:not(.generating):not(.success):not(.error) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
  transition: all 0.3s ease;
}

/* --- Help Button Press Effect --- */
.help-btn {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.help-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  background: #e6b800 !important;
}

.help-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  background: #d4a600 !important;
}

.help-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(253, 203, 24, 0.3);
}

/* --- Deployment Button Press Effect --- */
.deployment-btn {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.deployment-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  background: #03a6a6 !important;
}

.deployment-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  background: #028a8a !important;
}

.deployment-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(4, 191, 191, 0.3);
}

/* --- Reset Button Effect (From Uiverse.io by shah1345) --- */
.reset-btn {
  display: inline-block;
  transition: all 0.2s ease-in;
  position: relative;
  overflow: hidden;
  z-index: 1;
  color: #ffffff;
  padding: 0.7em 1.7em;
  cursor: pointer;
  font-size: 14px;
  border-radius: 0.5em;
  background: #dc3545;
  border: 1px solid #dc3545;
  box-shadow: 6px 6px 12px black;
}

.reset-btn:active {
  color: #ffffff;
  box-shadow: inset 4px 4px 12px black;
}

.reset-btn:before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.reset-btn:after {
  content: "";
  position: absolute;
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%;
  height: 190%;
  background-color: #dc3545;
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.reset-btn:hover {
  
  border: 1px solid #dc3545;
  color: #dc3545;
}

.reset-btn:hover:before {
  top: -35%;
  background-color: white;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.reset-btn:hover:after {
  top: -45%;
  background-color: white;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
  
}

.reset-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.3);
}