/* ============================================================
   search.css — CSS page recherche native (design v2)
   Polices : DM Sans (body) + Plus Jakarta Sans (headings)
   Variables compatibles avec accueil.css
   ============================================================ */

/* ─── VARIABLES (reprises d'accueil.css) ────────────────────── */
:root {
  --srch-primary: hsl(155,80%,31%);
  --srch-primary-hover: hsl(158,79%,41%);
  --srch-primary-fg: #fff;
  --srch-accent: hsl(200,82%,21%);
  --srch-title: hsl(260,60%,27%);
  --srch-body: hsl(245,20%,35%);
  --srch-body-sec: hsl(218,14%,62%);
  --srch-bg: hsl(0,0%,100%);
  --srch-card: hsl(0,0%,100%);
  --srch-section-alt: hsl(249,100%,97%);
  --srch-border: hsl(0,0%,90%);
  --srch-radius: 0.75rem;
  --srch-radius-xl: 1rem;
  --srch-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
  --srch-shadow-hover: 0 10px 25px -5px rgba(0,0,0,0.1), 0 4px 10px -2px rgba(0,0,0,0.05);
}

/* ─── LAYOUT ────────────────────────────────────────────────── */
.srch-main { padding-bottom: 2rem; }
.srch-container { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 768px) { .srch-container { padding: 0 2rem; } }

/* ─── BREADCRUMB ────────────────────────────────────────────── */
.srch-breadcrumb {
  padding: 1rem 0 0;
  font-size: 0.8125rem; color: var(--srch-body-sec);
}
.srch-breadcrumb a { color: var(--srch-body-sec); transition: color 0.15s; }
.srch-breadcrumb a:hover { color: var(--srch-title); }
.srch-breadcrumb .sep { margin: 0 0.375rem; opacity: 0.5; }

/* ─── HERO ──────────────────────────────────────────────────── */
.srch-hero {
  position: relative; overflow: hidden;
  background: var(--srch-section-alt);
  padding: 2.5rem 0 2rem;
  text-align: center;
}
.srch-hero h1 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 800; color: var(--srch-title);
  line-height: 1.2; margin-bottom: 0.5rem;
}
.srch-hero-sub {
  font-size: 0.9375rem; color: var(--srch-body-sec);
  max-width: 36rem; margin: 0 auto;
}
.srch-badge {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.875rem; border-radius: 9999px;
  border: 1px solid hsla(155,80%,31%,0.2);
  background: hsla(155,80%,31%,0.08);
  font-size: 0.75rem; font-weight: 600; color: var(--srch-primary);
  margin-bottom: 1rem;
}

/* ─── SEARCH FORM ───────────────────────────────────────────── */
.srch-form-card {
  max-width: 54rem; margin: -1.5rem auto 2rem;
  position: relative; z-index: 2;
  border-radius: var(--srch-radius-xl);
  border: 1px solid var(--srch-border);
  background: var(--srch-card);
  padding: 1.5rem;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.08);
}
.srch-form-grid {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .srch-form-grid { grid-template-columns: 1fr 1fr auto; align-items: end; }
}
.srch-field label {
  display: block; margin-bottom: 0.375rem;
  font-size: 0.75rem; font-weight: 700; color: var(--srch-title);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.srch-field select,
.srch-field input {
  width: 100%; height: 3rem; padding: 0 0.875rem;
  border-radius: var(--srch-radius); border: 2px solid var(--srch-border);
  background: var(--srch-bg); font-size: 0.9375rem; font-weight: 500;
  color: var(--srch-body); transition: border-color 0.15s, box-shadow 0.15s;
}
.srch-field select:focus,
.srch-field input:focus {
  outline: none; border-color: var(--srch-primary);
  box-shadow: 0 0 0 3px hsla(155,80%,31%,0.1);
}
.srch-field input:disabled {
  opacity: 0.5; cursor: not-allowed; background: hsl(0,0%,96%);
}

/* Toggle "A distance" */
.srch-distance-wrap {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0;
}
.srch-toggle {
  position: relative; display: inline-block;
  width: 2.75rem; height: 1.5rem;
  cursor: pointer;
}
.srch-toggle input { opacity: 0; width: 0; height: 0; }
.srch-toggle-slider {
  position: absolute; inset: 0;
  border-radius: 9999px; background: hsl(0,0%,82%);
  transition: background 0.2s;
}
.srch-toggle-slider::after {
  content: ''; position: absolute;
  left: 3px; top: 3px;
  width: 1.125rem; height: 1.125rem; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}
.srch-toggle input:checked + .srch-toggle-slider { background: var(--srch-primary); }
.srch-toggle input:checked + .srch-toggle-slider::after { transform: translateX(1.25rem); }
.srch-distance-label { font-size: 0.8125rem; font-weight: 600; color: var(--srch-title); }

/* Buttons */
.srch-form-actions {
  display: flex; gap: 0.75rem; margin-top: 1rem;
}
@media (min-width: 640px) {
  .srch-form-actions { margin-top: 0; }
}
.srch-btn-search {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 3rem; padding: 0 1.5rem; border-radius: var(--srch-radius);
  background: var(--srch-primary); color: var(--srch-primary-fg);
  font-size: 0.875rem; font-weight: 600; border: none; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: background 0.15s, transform 0.15s;
}
.srch-btn-search:hover { background: var(--srch-primary-hover); transform: scale(1.02); }
.srch-btn-reset {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 3rem; padding: 0 1rem; border-radius: var(--srch-radius);
  background: transparent; color: var(--srch-body-sec);
  font-size: 0.8125rem; font-weight: 600; border: 1px solid var(--srch-border);
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.srch-btn-reset:hover { background: hsl(0,0%,96%); color: var(--srch-title); }

/* ─── RESULTS BAR ───────────────────────────────────────────── */
.srch-results-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem; margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--srch-radius);
  background: var(--srch-section-alt);
  border: 1px solid var(--srch-border);
}
.srch-results-count {
  font-size: 0.875rem; font-weight: 600; color: var(--srch-title);
}
.srch-results-count strong { color: var(--srch-primary); }
.srch-sort {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; color: var(--srch-body-sec);
}
.srch-sort select {
  height: 2.25rem; padding: 0 0.5rem;
  border-radius: var(--srch-radius); border: 1px solid var(--srch-border);
  background: var(--srch-card); font-size: 0.8125rem; font-weight: 500;
  color: var(--srch-body); cursor: pointer;
}

/* ─── SESSION CARDS ─────────────────────────────────────────── */
.srch-grid {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .srch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .srch-grid { grid-template-columns: repeat(3, 1fr); } }

.srch-card {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--srch-radius-xl);
  border: 1px solid var(--srch-border);
  background: var(--srch-card);
  padding: 1.25rem; overflow: hidden;
  box-shadow: var(--srch-shadow);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.srch-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--srch-shadow-hover);
  border-color: hsla(155,80%,31%,0.3);
}

/* Top bar with color stripe */
.srch-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--card-color, var(--srch-primary));
}

/* Card header */
.srch-card-head {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1rem;
}
.srch-card-logo {
  width: 2.75rem; height: 2.75rem; border-radius: 0.5rem;
  overflow: hidden; background: hsl(0,0%,96%);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.srch-card-logo img { width: 2rem; height: 2rem; object-fit: contain; }
.srch-card-name { font-size: 0.9375rem; font-weight: 700; color: var(--srch-title); }
.srch-card-cat { font-size: 0.75rem; color: var(--srch-body-sec); }

/* Price badge */
.srch-card-price {
  position: absolute; top: 1rem; right: 1rem;
  padding: 0.25rem 0.75rem; border-radius: 9999px;
  background: hsla(155,80%,31%,0.1);
  font-size: 1rem; font-weight: 700; color: var(--srch-primary);
}

/* Payment icons (results bar) */
.srch-pay-icons {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem;
}
.srch-pay-label {
  font-size: 0.6875rem; font-weight: 600; color: var(--srch-body-sec);
  margin-right: 0.25rem;
}
.srch-pay-icon {
  display: inline-flex; align-items: center;
  border-radius: 3px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.srch-pay-icon svg { display: block; }
@media (max-width: 639px) {
  .srch-pay-icons { justify-content: center; width: 100%; order: 3; }
}

/* Card details */
.srch-card-details {
  display: flex; flex-direction: column; gap: 0.5rem;
  margin-bottom: 1rem; flex: 1;
}
.srch-detail {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; color: var(--srch-body);
}
.srch-detail svg {
  width: 1rem; height: 1rem; flex-shrink: 0;
  color: var(--srch-body-sec);
}
.srch-detail strong { font-weight: 600; }
.srch-detail-sub {
  display: block; font-size: 0.75rem; color: var(--srch-body-sec);
}

/* CTA button */
.srch-btn-inscrire {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; padding: 0.75rem 1rem; border-radius: var(--srch-radius);
  background: var(--card-color, var(--srch-primary)); color: var(--srch-primary-fg);
  font-size: 0.9375rem; font-weight: 700; border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: opacity 0.15s, transform 0.15s;
}
.srch-btn-inscrire:hover { opacity: 0.9; transform: scale(1.01); }
.srch-btn-inscrire svg { width: 1rem; height: 1rem; }

/* ─── NO RESULTS ────────────────────────────────────────────── */
.srch-no-results {
  text-align: center; padding: 3rem 1.5rem;
  border-radius: var(--srch-radius-xl);
  border: 1px solid var(--srch-border);
  background: var(--srch-card);
}
.srch-no-results-icon {
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: hsla(155,80%,31%,0.1);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem; color: var(--srch-primary);
}
.srch-no-results h3 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.25rem; font-weight: 700; color: var(--srch-title);
  margin-bottom: 0.5rem;
}
.srch-no-results p { font-size: 0.875rem; color: var(--srch-body-sec); margin-bottom: 1.5rem; }
.srch-suggestions {
  display: grid; gap: 0.75rem;
  grid-template-columns: 1fr;
  margin-bottom: 2rem;
}
@media (min-width: 640px) { .srch-suggestions { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .srch-suggestions { grid-template-columns: repeat(4, 1fr); } }
.srch-suggestion {
  padding: 1rem; border-radius: var(--srch-radius);
  border: 1px solid var(--srch-border);
  background: var(--srch-section-alt);
}
.srch-suggestion svg {
  width: 1.5rem; height: 1.5rem; color: var(--srch-primary);
  margin-bottom: 0.5rem;
}
.srch-suggestion h4 { font-size: 0.8125rem; font-weight: 700; color: var(--srch-title); margin-bottom: 0.25rem; }
.srch-suggestion p { font-size: 0.75rem; color: var(--srch-body-sec); }

/* No results actions */
.srch-no-results-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem;
}
.srch-btn-outline {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.25rem; border-radius: var(--srch-radius);
  border: 2px solid var(--srch-primary); color: var(--srch-primary);
  font-size: 0.875rem; font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.srch-btn-outline:hover { background: var(--srch-primary); color: var(--srch-primary-fg); }
.srch-btn-secondary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.25rem; border-radius: var(--srch-radius);
  border: 1px solid var(--srch-border); color: var(--srch-body);
  font-size: 0.875rem; font-weight: 600;
  transition: background 0.15s;
}
.srch-btn-secondary:hover { background: hsl(0,0%,96%); }

/* ─── BOTTOM CTA ────────────────────────────────────────────── */
.srch-bottom-cta {
  margin-top: 3rem; padding: 2.5rem 1.5rem;
  border-radius: var(--srch-radius-xl);
  background: var(--srch-section-alt);
  border: 1px solid var(--srch-border);
  text-align: center;
}
.srch-bottom-cta h3 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.25rem; font-weight: 700; color: var(--srch-title);
  margin-bottom: 0.5rem;
}
.srch-bottom-cta p {
  font-size: 0.875rem; color: var(--srch-body-sec); margin-bottom: 1.5rem;
}
.srch-bottom-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem;
}
.srch-btn-phone {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.25rem; border-radius: var(--srch-radius);
  border: 2px solid var(--srch-primary); color: var(--srch-primary);
  font-size: 0.875rem; font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.srch-btn-phone:hover { background: var(--srch-primary); color: var(--srch-primary-fg); }
.srch-btn-form {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.25rem; border-radius: var(--srch-radius);
  background: var(--srch-primary); color: var(--srch-primary-fg);
  font-size: 0.875rem; font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: background 0.15s, transform 0.15s;
}
.srch-btn-form:hover { background: var(--srch-primary-hover); transform: scale(1.02); }

/* ─── ENCART QUALIOPI ──────────────────────────────────────── */
.srch-qualiopi {
  background: var(--srch-section-alt, hsl(249,100%,97%));
  border-top: 1px solid hsl(0,0%,90%);
  padding: 3rem 1rem;
  text-align: center;
}
.srch-qualiopi-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.125rem; font-weight: 700;
  color: var(--srch-title, hsl(260,60%,27%));
  margin-bottom: 1rem;
}
.srch-qualiopi-text {
  max-width: 48rem; margin: 0 auto 1.25rem;
  font-size: 0.875rem; line-height: 1.7;
  color: var(--srch-body-sec, hsl(218,14%,45%));
}
.srch-qualiopi-link {
  font-size: 0.875rem; font-weight: 600;
  color: var(--srch-primary, hsl(155,80%,24%));
}
.srch-qualiopi-link:hover { color: var(--srch-primary-hover, hsl(155,80%,20%)); }

/* ─── STICKY MOBILE CTA ────────────────────────────────────── */
.srch-sticky-mobile {
  display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  border-top: 1px solid var(--srch-border);
  background: hsla(0,0%,100%,0.95); backdrop-filter: blur(12px);
  padding: 0.75rem; gap: 0.5rem;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
}
.srch-sticky-call {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1rem; border-radius: var(--srch-radius);
  border: 2px solid var(--srch-primary); color: var(--srch-primary);
  font-size: 0.875rem; font-weight: 600;
}
.srch-sticky-inscrire {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1rem; border-radius: var(--srch-radius);
  background: var(--srch-primary); color: var(--srch-primary-fg);
  font-size: 0.875rem; font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
@media (min-width: 768px) { .srch-sticky-mobile { display: none; } }

/* ─── ANIMATIONS ────────────────────────────────────────────── */
.srch-card {
  animation: srchSlideUp 0.5s ease both;
  opacity: 0;
}
.srch-card:nth-child(1) { animation-delay: 0.05s; }
.srch-card:nth-child(2) { animation-delay: 0.1s; }
.srch-card:nth-child(3) { animation-delay: 0.15s; }
.srch-card:nth-child(4) { animation-delay: 0.2s; }
.srch-card:nth-child(5) { animation-delay: 0.25s; }
.srch-card:nth-child(6) { animation-delay: 0.3s; }

@keyframes srchSlideUp {
  from { opacity: 0; transform: translateY(1.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── FORMATION-SPECIFIC CARD COLORS ────────────────────────── */
.srch-card[data-formation="excel"]      { --card-color: hsl(140,60%,28%); }
.srch-card[data-formation="word"]       { --card-color: hsl(220,55%,38%); }
.srch-card[data-formation="powerpoint"] { --card-color: hsl(12,70%,40%); }
.srch-card[data-formation="photoshop"]  { --card-color: hsl(215,100%,12%); }
.srch-card[data-formation="packoffice"] { --card-color: hsl(240,30%,14%); }
.srch-card[data-formation="pao"]        { --card-color: hsl(280,60%,41%); }
.srch-card[data-formation="cao3d"]      { --card-color: hsl(195,65%,36%); }
.srch-card[data-formation="wordpress"]  { --card-color: hsl(195,65%,36%); }
.srch-card[data-formation="webmarketing"] { --card-color: hsl(340,60%,45%); }

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 639px) {
  .srch-form-card { margin-top: 0; border-radius: var(--srch-radius); }
  .srch-form-actions { flex-direction: column; }
  .srch-btn-search, .srch-btn-reset { width: 100%; }
  .srch-card-price { position: static; margin-bottom: 0.75rem; display: inline-block; }
  .srch-bottom-actions { flex-direction: column; align-items: center; }
  .srch-no-results-actions { flex-direction: column; align-items: center; }
}