/* ===================================================== */
/* CLIC ACADEMY - THÈME MODERNE                          */
/* Chargé APRÈS style.css : il ne fait que surcharger    */
/* l'apparence. Pour revenir à l'ancien visuel, il suffit */
/* de retirer la ligne <link ... theme-moderne.css>.     */
/* ===================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap");

:root {
  --vert-lime: #8fd136;
  --vert-menu: #2f7d32;
  --vert-fonce: #1e4620;
  --vert-noir: #0b1a0c;
  --fond-clair: #f6f8f5;
  --gris: #5b6472;
  --noir: #1c2421;

  --bordure: rgba(16, 40, 18, 0.08);
  --ombre-douce: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
  --ombre-survol: 0 2px 4px rgba(16, 24, 40, 0.05), 0 18px 40px rgba(16, 24, 40, 0.1);
  --rayon: 16px;
  --rayon-lg: 24px;
  --transition: 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ---------- Base ---------- */

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--noir);
  background: var(--fond-clair);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  letter-spacing: -0.02em;
}

::selection {
  background: var(--vert-lime);
  color: var(--vert-noir);
}

a, button {
  transition: color var(--transition), background var(--transition),
    border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(143, 209, 54, 0.6);
  outline-offset: 2px;
}

/* ---------- En-tête ---------- */

.header {
  height: 72px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: none;
  border-bottom: 1px solid var(--bordure);
}

.logo img {
  height: 48px;
}

.navbar {
  gap: 6px;
}

.navbar a {
  color: var(--noir);
  font-weight: 500;
  font-size: 15px;
  padding: 8px 12px;
  border-radius: 999px;
}

.navbar a:hover {
  color: var(--vert-fonce);
  background: rgba(143, 209, 54, 0.14);
}

.btn-inscription {
  border-radius: 999px;
  padding: 11px 20px;
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 6px 16px rgba(30, 70, 32, 0.2);
}

.btn-inscription:hover {
  transform: translateY(-1px);
}

.menu-btn {
  border-radius: 12px;
  font-size: 20px;
  line-height: 1;
}

/* ---------- Boutons ---------- */

.btn-primary,
.btn-secondary,
.btn-localization,
.stats-btn-primary,
.stats-btn-secondary,
.form-btn,
.contact-form button {
  border-radius: 999px;
  font-weight: 600;
  padding: 14px 26px;
}

.btn-primary,
.stats-btn-primary,
.form-btn,
.contact-form button {
  background: var(--vert-lime);
  color: var(--vert-noir);
  box-shadow: 0 8px 20px rgba(143, 209, 54, 0.3);
}

.btn-primary:hover,
.stats-btn-primary:hover,
.form-btn:hover,
.contact-form button:hover {
  background: #a3e04f;
  color: var(--vert-noir);
  transform: translateY(-2px);
}

.btn-secondary {
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.btn-localization {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

.btn-localization:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.stats-btn-secondary {
  border: 1px solid var(--bordure);
  background: #fff;
  color: var(--vert-fonce);
  box-shadow: var(--ombre-douce);
}

.stats-btn-secondary:hover {
  background: #fff;
  border-color: var(--vert-lime);
  color: var(--vert-fonce);
  transform: translateY(-2px);
}

/* ---------- Hero (accueil) ---------- */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  background:
    radial-gradient(900px 500px at 85% 10%, rgba(143, 209, 54, 0.22), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(47, 125, 50, 0.35), transparent 60%),
    linear-gradient(160deg, #0b1a0c 0%, #13301a 100%);
}

.badge {
  background: rgba(143, 209, 54, 0.12);
  border: 1px solid rgba(143, 209, 54, 0.35);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.hero h1 {
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 800;
  line-height: 1.08;
}

.hero p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 18px;
  max-width: 560px;
}

.hero-buttons {
  flex-wrap: wrap;
  gap: 12px;
}

/* Le bouton principal (formations) passe en premier */
.hero-buttons .btn-primary {
  order: -1;
}

.hero-image,
.hero-photo img {
  border-radius: var(--rayon-lg);
}

.hero-photo {
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---------- Sections & titres ---------- */

.section {
  padding: 96px 7%;
}

.section-title > span,
.about-text > span,
.contact-info > span,
.formateurs-text > span {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(143, 209, 54, 0.14);
  color: var(--vert-menu);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.section-title h2,
.about-text h2,
.contact-info h2,
.formateurs-text h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  color: var(--vert-noir);
}

.section-title p,
.about-text p,
.contact-info p,
.formateurs-text p {
  color: var(--gris);
}

/* ---------- Sections à fond foncé : texte clair ---------- */

.about,
.contact,
.vision-card,
.teacher-hero,
.success-page {
  color: #fff;
}

.about h1, .about h2, .about h3, .about h4,
.contact h1, .contact h2, .contact h3, .contact h4,
.about-text h2,
.contact-info h2,
.teacher-hero h1 {
  color: #fff;
}

.vision-card h1 {
  color: var(--vert-lime);
}

.about p, .about li,
.about-text p,
.contact p,
.contact-info p,
.contact-details p,
.vision-card p,
.teacher-hero p {
  color: rgba(255, 255, 255, 0.82);
}

.about-text > span,
.contact-info > span {
  background: rgba(143, 209, 54, 0.14);
  border: 1px solid rgba(143, 209, 54, 0.35);
  color: var(--vert-lime);
}

.about-box strong {
  color: var(--vert-lime);
}

/* Le formulaire de contact reste une carte blanche : texte foncé dedans */
.contact .contact-form,
.contact .contact-form h3,
.contact .contact-form label,
.contact .contact-form p {
  color: var(--noir);
}

/* ---------- Cartes ---------- */

.stat-card,
.formation-card,
.service-card,
.actualite-card,
.testimonial-card,
.accueil-card,
.accueil-stat-card,
.formation-item,
.galerie-card,
.annonce-home-card,
.teacher-card,
.formation-category-box {
  border-radius: var(--rayon);
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre-douce);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.formation-card:hover,
.service-card:hover,
.actualite-card:hover,
.testimonial-card:hover,
.formation-item:hover,
.galerie-card:hover,
.annonce-home-card:hover,
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-survol);
  border-color: rgba(143, 209, 54, 0.45);
}

.stats-section {
  background: transparent;
  padding: 72px 7%;
}

.stats-grid {
  gap: 20px;
}

.stat-card {
  padding: 30px 20px;
}

.stat-card strong {
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  color: var(--vert-fonce);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.stat-card p {
  color: var(--gris);
  font-weight: 500;
  font-size: 15px;
}

.formation-card .icon {
  border-radius: 14px;
  background: rgba(143, 209, 54, 0.16);
}

.formation-card a {
  color: var(--vert-menu);
  font-weight: 600;
}

/* ---------- Formateurs ---------- */

.formateurs-points {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

.formateurs-points strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre-douce);
  color: var(--vert-fonce);
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.formateurs-points strong::before {
  content: "✓";
  color: var(--vert-menu);
  font-weight: 800;
}

.formateurs-image img {
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-survol);
}

/* ---------- FAQ ---------- */

.faq-item {
  border-radius: var(--rayon);
  border: 1px solid var(--bordure);
  box-shadow: none;
  background: #fff;
  overflow: hidden;
}

.faq-item[open] {
  border-color: rgba(143, 209, 54, 0.5);
  box-shadow: var(--ombre-douce);
}

.faq-item summary {
  font-weight: 600;
}

/* ---------- Formulaires ---------- */

.form-box,
.contact-form {
  border-radius: var(--rayon-lg);
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre-douce);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
  font-family: inherit;
  border-radius: 12px !important;
  border: 1px solid #d9e0dc !important;
  background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--vert-lime) !important;
  box-shadow: 0 0 0 4px rgba(143, 209, 54, 0.18) !important;
}

/* ---------- Pied de page ---------- */

.footer {
  padding: 64px 7% 48px;
  background: var(--vert-noir);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer h3,
.footer h4 {
  color: #fff;
  font-weight: 700;
}

.footer p,
.footer a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
}

.footer a:hover {
  color: var(--vert-lime);
}

.footer .social-icons a {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.footer .social-icons a:hover {
  background: var(--vert-lime);
  color: var(--vert-noir);
  border-color: var(--vert-lime);
  transform: translateY(-3px);
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
  .navbar.active {
    top: 72px;
    background: rgba(255, 255, 255, 0.98);
    padding: 12px 5% 20px;
    border-bottom: 1px solid var(--bordure);
    box-shadow: 0 20px 30px rgba(16, 24, 40, 0.08);
  }

  .navbar.active a {
    border-bottom: none;
    border-radius: 12px;
    padding: 12px 14px;
  }

  .hero {
    min-height: auto;
    padding: 64px 5%;
  }

  .hero p {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons {
    justify-content: center;
  }

  .section {
    padding: 72px 5%;
  }
}

/* Animations réduites si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}