.ccl-wrap{max-width:980px;margin:48px auto;padding:0 16px}
.ccl-form{border:1px solid #e5e7eb;border-radius:20px;padding:28px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.ccl-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;align-items:start}
.ccl-field label{display:block;font-weight:700;margin:0 0 8px}
.ccl-field input,.ccl-field select{width:100%;height:44px;border:1px solid #d1d5db;border-radius:12px;padding:0 12px;font-size:16px}
.ccl-help{margin:8px 0 0;color:#6b7280;font-size:14px;line-height:1.35}
.ccl-req{color:#dc2626}
.ccl-btn{margin-top:18px;height:46px;padding:0 18px;border-radius:999px;border:3px solid #111;background:#fff;font-weight:800;cursor:pointer}
.ccl-btn:hover{transform:translateY(-1px)}
.ccl-message{margin-top:14px;padding:14px 16px;border-radius:14px;border:1px solid transparent}
.ccl-hidden{display:none}
.ccl-success{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.ccl-error{background:#fef2f2;border-color:#fecaca;color:#991b1b}
@media (max-width:860px){.ccl-grid{grid-template-columns:1fr}}

/* Extra fields layout */
.ccl-cols{display:flex;gap:12px}
.ccl-cols>div{flex:1}
.ccl-checkbox{display:flex;gap:10px;align-items:flex-start}
.ccl-checkbox input{margin-top:4px}


/* Field-level validation */
.ccl-field-error{border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.12)}
.ccl-field-msg{margin-top:6px;color:#991b1b;font-size:13px;line-height:1.25}


/* ===== Design Polish (scoped) ===== */

/* CCL Form UI – V1.4.0 */
/* Responsive, CSS only */
.ccl-form-wrapper{max-width:960px;margin:0 auto;padding:24px}
.ccl-section{background:#fff;border-radius:10px;padding:24px;margin-bottom:24px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.ccl-section h2{font-size:1.25rem;margin-bottom:16px;border-bottom:1px solid #eee;padding-bottom:8px}
.ccl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:640px){.ccl-grid{grid-template-columns:1fr}}
.ccl-submit{font-size:1.1rem;padding:14px 28px;border-radius:6px}
.ccl-success{background:#f0fff4;border-left:4px solid #38a169;padding:16px;margin-bottom:20px}
.ccl-error{background:#fff5f5;border-left:4px solid #e53e3e;padding:16px;margin-bottom:20px}


/* ===== CCL Design Polish (match current HTML) – V1.4.0.5 ===== */

/* Container */
.ccl-wrap{max-width:980px;margin:0 auto;padding:28px 16px}

/* Form card */
.ccl-form{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:22px;
  box-shadow:0 10px 26px rgba(0,0,0,.07);
}

/* Titles */
.ccl-title{
  font-size:1.25rem;
  margin:20px 0 10px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(0,0,0,.10);
}

/* Layout */
.ccl-grid{display:block}
.ccl-field{margin:14px 0}
.ccl-field label{display:block;font-weight:600;margin-bottom:6px}
.ccl-help{margin:.35rem 0 0;font-size:.95rem;opacity:.85}
.ccl-sep{border:none;border-top:1px solid rgba(0,0,0,.10);margin:18px 0}

/* Normalize inline-flex label groups (the markup uses inline styles) */
.ccl-field[style*="display:flex"]{align-items:flex-end}
.ccl-field[style*="display:flex"] > label{margin-bottom:0}
.ccl-field[style*="display:flex"] > label > input,
.ccl-field[style*="display:flex"] > label > select{
  margin-top:0;
}

/* Inputs */
.ccl-form input[type="text"],
.ccl-form input[type="email"],
.ccl-form input[type="tel"],
.ccl-form input[type="number"],
.ccl-form input[type="date"],
.ccl-form select,
.ccl-form textarea{
  width:100%;
  box-sizing:border-box;
  padding:12px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  outline:none;
}
.ccl-form input[type="file"]{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border-radius:10px;
  border:1px dashed rgba(0,0,0,.22);
  background:rgba(0,0,0,.01);
}

/* Placeholder / option baseline */
.ccl-form ::placeholder{opacity:.65}

/* Focus (RGAA-friendly) */
.ccl-form input:focus,
.ccl-form select:focus,
.ccl-form textarea:focus{
  border-color:rgba(0,0,0,.45);
  box-shadow:0 0 0 3px rgba(0,0,0,.10);
}

/* Native invalid (HTML5) */
.ccl-form input:invalid,
.ccl-form select:invalid,
.ccl-form textarea:invalid{
  box-shadow:none;
}
.ccl-form input:invalid:focus,
.ccl-form select:invalid:focus,
.ccl-form textarea:invalid:focus{
  border-color:rgba(207,46,46,.55);
  box-shadow:0 0 0 3px rgba(207,46,46,.10);
}

/* Checkboxes: tidy long labels */
.ccl-form input[type="checkbox"]{width:auto;margin:0}
.ccl-form label[style*="display:flex"]{
  align-items:flex-start !important;
  gap:10px !important;
  font-weight:400;
  line-height:1.35;
}
.ccl-req{color:#b00020;font-weight:700}

/* Courses block */
.ccl-courses{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.ccl-course{
  border:1px solid rgba(0,0,0,.09);
  border-radius:14px;
  padding:14px;
  background:rgba(0,0,0,.015);
}
.ccl-course-head{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid rgba(0,0,0,.08)}
.ccl-course-head strong{font-size:1.05rem}

/* Buttons */
.ccl-btn,
.ccl-form button[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border:1px solid rgba(0,0,0,.18);
  border-radius:10px;
  padding:12px 16px;
  font-weight:700;
  cursor:pointer;
  background:#fff;
  transition:transform .06s ease, box-shadow .12s ease, border-color .12s ease;
}
.ccl-btn:hover,
.ccl-form button[type="submit"]:hover{
  border-color:rgba(0,0,0,.30);
  box-shadow:0 6px 14px rgba(0,0,0,.08);
}
.ccl-btn:active,
.ccl-form button[type="submit"]:active{
  transform:translateY(1px);
  box-shadow:0 3px 10px rgba(0,0,0,.06);
}
.ccl-btn:focus,
.ccl-form button[type="submit"]:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(0,0,0,.12);
}
.ccl-form button[type="submit"]{
  width:100%;
  padding:14px 18px;
  margin-top:12px;
}
.ccl-btn-danger{
  border-color:rgba(176,0,32,.35);
}
.ccl-btn-danger:hover{
  border-color:rgba(176,0,32,.55);
}

/* Disabled states */
.ccl-form button[disabled],
.ccl-form input[disabled],
.ccl-form select[disabled],
.ccl-form textarea[disabled]{
  opacity:.65;
  cursor:not-allowed;
}

/* Alerts */
.ccl-success{
  background:rgba(0,208,130,.10);
  border:1px solid rgba(0,208,130,.25);
  border-left:5px solid rgba(0,208,130,.8);
  border-radius:12px;
  padding:14px;
  margin-bottom:14px;
}
.ccl-error{
  background:rgba(207,46,46,.08);
  border:1px solid rgba(207,46,46,.22);
  border-left:5px solid rgba(207,46,46,.75);
  border-radius:12px;
  padding:12px;
  margin-top:10px;
}
.ccl-field-error input,
.ccl-field-error select,
.ccl-field-error textarea{
  border-color:rgba(207,46,46,.55) !important;
  box-shadow:0 0 0 3px rgba(207,46,46,.10) !important;
}

/* Micro typography */
.ccl-form{font-size:1rem}
.ccl-form .ccl-help{max-width:70ch}

/* Responsive densification */
@media (max-width:560px){
  .ccl-form{padding:16px;border-radius:14px}
  .ccl-title{font-size:1.15rem}
  .ccl-field{margin:12px 0}
  .ccl-course{padding:12px;border-radius:12px}
  .ccl-btn{width:100%}
  .ccl-course-head{flex-direction:column;align-items:flex-start !important}
}

/* Desktop polishing for flex rows */
@media (min-width:860px){
  .ccl-field[style*="display:flex"]{gap:16px !important}
}




/* ====== V1.6.4 — UX regroupement (no DB impact) ====== */
.ccl-section{
  grid-column: 1 / -1;
  padding: 22px;
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  background: #fff;
}

.ccl-row{
  display: grid;
  gap: 14px 18px;
  align-items: start;
}

.ccl-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ccl-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ccl-field-wide{ grid-column: 1 / -1; }

.ccl-course-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.ccl-subtitle{
  font-weight: 600;
  margin: 6px 0 10px;
  opacity: .85;
}

.ccl-checkline{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.ccl-checkline input[type="checkbox"]{
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin-top:0.2em;
}
.ccl-checkline span{
  line-height:1.4;
}

.ccl-radio-question{
  font-weight:600;
  line-height:1.4;
  margin-bottom:8px;
}
.ccl-radio-options{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
}
.ccl-radio-option{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  margin:0 !important;
  font-weight:500 !important;
  line-height:1.3;
}
.ccl-radio-option input[type="radio"]{
  width:18px;
  height:18px;
  margin:0;
  flex:0 0 auto;
}


.ccl-top-error{
  grid-column: 1 / -1;
  margin: 10px 0 0;
  color: #b00020;
  font-weight: 600;
}

@media (max-width: 820px){
  .ccl-section{ padding: 18px; border-radius: 14px; }
  .ccl-cols-2, .ccl-cols-3{ grid-template-columns: 1fr; }
}

/* ===== Coût estimatif (tarifs par créneau) ===== */
.ccl-costbox{
  margin-top: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 14px 16px;
  background: #f8fafc;
}
.ccl-costbox-title{font-weight:600;margin-bottom:10px;font-size:14px;}

/* Tableau détail par cours */
.ccl-cost-detail-table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:10px;
  font-size:13px;
}
.ccl-cost-detail-table tr{border-bottom:1px solid rgba(0,0,0,.06);}
.ccl-cost-detail-table tr:last-child{border-bottom:none;}
.ccl-cdt-label{padding:5px 4px 5px 0;color:#374151;}
.ccl-cdt-brut{padding:5px 4px;text-align:right;color:#9ca3af;font-size:12px;}
.ccl-cdt-reduc{padding:5px 4px;text-align:right;color:#e65100;font-size:12px;white-space:nowrap;}
.ccl-cdt-net{padding:5px 0 5px 8px;text-align:right;font-weight:600;}
.ccl-cdt-subtotal td{padding:6px 4px 6px 0;font-weight:600;border-top:2px solid rgba(0,0,0,.1);}
.ccl-cdt-cotis td{padding:4px 4px 4px 0;color:#6b7280;font-size:12px;}

/* Total */
.ccl-costbox-total{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:2px solid rgba(0,0,0,.08);
  padding-top:8px;
  margin-top:4px;
}
.ccl-costbox-total-label{font-size:13px;font-weight:600;color:#374151;}
.ccl-costbox-value{font-size:20px;font-weight:700;letter-spacing:-0.2px;color:#1e8e3e;}
.ccl-costbox-help{margin-top:8px;font-size:11px;color:#5b616e;}


/* ══════════════════════════════════════
   TOAST NOTIFICATION
══════════════════════════════════════ */
#ccl-toast {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  animation: ccl-toast-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ccl-toast-in {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@media (max-width: 480px) {
  #ccl-toast {
    left: 12px !important;
    right: 12px !important;
    max-width: none !important;
    bottom: 12px !important;
  }
}

/* ══════════════════════════════════════
   BOUTON SUBMIT — SPINNER
══════════════════════════════════════ */
@keyframes ccl-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.ccl-submit-spinner {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.75;
}
.ccl-submit-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════
   BANNIÈRE ERREUR GLOBAL — améliorée
══════════════════════════════════════ */
.ccl-top-error:not(:empty) {
  background: rgba(207,46,46,.07);
  border: 1px solid rgba(207,46,46,.25);
  border-left: 4px solid rgba(207,46,46,.8);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  margin: 8px 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: #b00020;
  grid-column: 1 / -1;
}

/* ══════════════════════════════════════
   MESSAGE SUCCÈS INLINE (fallback)
══════════════════════════════════════ */
[data-ccl-success]:not([style*="display:none"]) {
  background: rgba(0,208,130,.10);
  border: 1px solid rgba(0,208,130,.3);
  border-left: 5px solid #1e8e3e;
  border-radius: 10px;
  padding: 14px 16px;
  font-weight: 600;
  color: #1e8e3e;
  grid-column: 1 / -1;
  margin-bottom: 8px;
}


/* ══════════════════════════════════════
   INDICATEUR PLACES RESTANTES
══════════════════════════════════════ */
.ccl-spots-hint {
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 0 8px 8px 0;
  margin-top: 6px;
  display: none;
  line-height: 1.3;
  border-left-width: 3px;
  border-left-style: solid;
}

/* Option complet dans le select */
.ccl-form select option[style*="color:#d93025"] {
  background: #fff5f5;
}


/* ══════════════════════════════════════
   FIELDSET — réinitialiser styles navigateur
══════════════════════════════════════ */
fieldset.ccl-section {
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  padding: 22px;
  background: #fff;
  margin: 0;
  min-width: 0;
}
fieldset.ccl-section legend.ccl-title {
  float: left;
  width: 100%;
  padding: 0 0 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,.10);
  font-size: 1.25rem;
  font-weight: 700;
}
fieldset.ccl-section legend.ccl-title + * { clear: both; }

/* ══════════════════════════════════════
   INDICATEUR DE PROGRESSION
══════════════════════════════════════ */
#ccl-progress a:last-child { border-right: none; }
#ccl-progress a { line-height: 1.3; transition: background .15s, color .15s; }
#ccl-progress a:hover { background: #e8f0fe !important; color: #1a73e8 !important; }
@media (max-width: 560px) {
  #ccl-progress a span { display: none; }
  #ccl-progress a { font-size: 10px; padding: 8px 4px; }
}


/* ══════════════════════════════════════
   MULTI-ÉTAPES — navigation
══════════════════════════════════════ */
.ccl-btn-primary,
.ccl-form button.ccl-btn-primary {
  background: #1a73e8 !important;
  color: #fff !important;
  border-color: #1a73e8 !important;
}
.ccl-btn-primary:hover,
.ccl-form button.ccl-btn-primary:hover {
  background: #1557b0 !important;
  border-color: #1557b0 !important;
  color: #fff !important;
}
/* Assurer visibilité du texte dans le bouton submit */
.ccl-submit-btn .ccl-submit-label {
  color: #fff !important;
}
.ccl-step-error-field {
  border-color: rgba(207,46,46,.55) !important;
  box-shadow: 0 0 0 3px rgba(207,46,46,.10) !important;
}

/* Indicateur — curseur pointer sur les étapes cliquables */
.ccl-progress-step { cursor: pointer; user-select: none; }

/* Transition douce entre étapes */
.ccl-step { animation: ccl-fadein .2s ease; }
@keyframes ccl-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* Case "adulte" verrouillée par cohérence avec la date de naissance */
[name="student_is_adult"][style*="pointer-events: none"],
[name="student_is_adult"][style*="pointer-events:none"] {
  cursor: not-allowed;
}


/* Toast — forcer l'affichage via classe pour éviter les overrides du thème */
#ccl-toast.ccl-toast-visible {
  display: flex !important;
}


/* Toast — z-index maximum pour passer au-dessus de tout */
#ccl-toast {
  z-index: 2147483647 !important;
  position: fixed !important;
}
#ccl-toast.ccl-toast-visible {
  display: flex !important;
}

/* Toast — pointer-events pour que les clics fonctionnent */
#ccl-toast.ccl-toast-visible {
  pointer-events: all !important;
  cursor: default;
}


/* V2.6 front polish */
.ccl-spots-hint{
  line-height:1.35;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.ccl-form select option[disabled]{
  color:#b3261e;
}
.ccl-recapbox{
  margin-top:16px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:16px;
  box-shadow:0 6px 16px rgba(0,0,0,.05);
}
.ccl-recapbox-title{
  font-size:1rem;
  font-weight:800;
  color:#202124;
}
.ccl-recapbox-help{
  margin-top:4px;
  color:#5f6368;
  font-size:.92rem;
}
.ccl-recapbox-detail{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
  margin-top:12px;
}
.ccl-recap-card{
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:12px 14px;
  background:#fafafa;
}
.ccl-recap-card-title{
  font-size:.78rem;
  font-weight:800;
  color:#5f6368;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.ccl-recap-card-main{
  margin-top:4px;
  font-size:1rem;
  font-weight:800;
  color:#202124;
}
.ccl-recap-card-meta{
  margin-top:6px;
  color:#5f6368;
  font-size:.92rem;
  line-height:1.35;
}
.ccl-recap-card-price{
  margin-top:8px;
  font-weight:800;
  color:#137333;
}
.ccl-recap-card-badge{
  display:inline-flex;
  margin-top:10px;
  padding:4px 10px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:800;
}
.ccl-recap-badge-full{background:#fce8e6;color:#b3261e;}
.ccl-recap-badge-low{background:#fff4e5;color:#b06000;}
.ccl-recap-badge-ok{background:#e6f4ea;color:#137333;}


/* 2.7.21e — Badges disponibilité créneaux */
.ccl-spots-info,
.ccl-slot-availability,
.ccl-slot-message {
  border-radius: 10px;
  font-weight: 700;
}