/* Reset de base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 18px;
}

/* HEADER */
.top-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e5e5e5;
}

.top-nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
}
/* zone logo (image + texte) */
.logo-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-img {
  height: 40px;
  width: auto;
}

.logo-text {
  font-size: 20px;
  font-weight: 600;
  color: #1f2933;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 16px;
  margin: 0 auto;
}

.nav-links a {
  text-decoration: none;
  color: #374151;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
}

.nav-links a:hover {
  color: #2563eb;
}

.nav-links a.active {
  background-color: #4a90e2;
  color: #ffffff;
}
/* bouton Connexion à droite */
.login-link {
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid #4a90e2;
  color: #4a90e2;
  font-weight: 600;
}

.login-link:hover {
  background-color: #4a90e2;
  color: #ffffff;
}
/* CONTENU CENTRAL */
.main-content {
  flex: 1;
  background-color: #f9fafb;
}

.hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}

.hero h1 {
  font-size: 32px;
  margin-bottom: 12px;
  color: #111827;
}

.hero p {
  font-size: 18px;
  color: #4b5563;
}

/* FOOTER */
.site-footer {
  background-color: #4a90e2;
  color: #ffffff;
  padding: 40px 24px 24px;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: flex-start;
}
.footer-brand,
.footer-column {
  flex: 1; /* chaque bloc prend 1/3 de la largeur */
}
.footer-column h3 {
  font-size: 20px;
  margin-bottom: 16px;
}

.footer-column ul {
  list-style: none;
}

.footer-column li {
  margin-bottom: 8px;
}

.footer-column a {
  color: #dbeafe;
  text-decoration: none;
}

.footer-column a:hover {
  color: #ffffff;
}

.footer-column p {
  color: #dbeafe;
  margin-bottom: 8px;
  font-size: 16px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.footer-logo {
  height: 48px;
  width: auto;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 6px 10px;
}

.footer-brand-text {
  font-size: 16px;
  color: #dbeafe;
  max-width: 260px;
  line-height: 1.4;
}

.footer-horaires-title {
  margin-top: 0px;
  font-size: 20px;
  margin-bottom: 8px;
}

.footer-bottom {
  border-top: 1px solid #1d4ed8;
  margin-top: 32px;
  padding-top: 16px;
  text-align: center;
  color: #dbeafe;
  font-size: 16px;
}
/* Ajout pour que les colonnes s’affichent correctement */
.footer-container {
  flex-wrap: wrap;
}

.footer-brand,
.footer-column {
  min-width: 180px; /* évite que les colonnes deviennent trop étroites */
}

/* Responsive */
@media (max-width: 768px) {
  .top-nav {
    flex-direction: column;
    height: auto;
    padding: 12px 16px;
    gap: 8px;
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  .footer-container {
    flex-direction: column; /* passe les 3 colonnes les unes sous les autres */
  }
}
/* PAGE D'ACCUEIL SILVER HAPPY */

.main-content {
  flex: 1;
  background-color: #f3f4f6;
}

/* HERO */
.hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 40px;
  display: flex;
  gap: 40px;
  align-items: center;
}

.hero-text {
  flex: 1.2;
}

.hero-text h1 {
  font-size: 32px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 12px;
}

.hero-subtitle {
  font-size: 17px;
  color: #4b5563;
  margin-bottom: 24px;
}

.hero-buttons {
  display: flex;
  gap: 16px;
}

/* Boutons */
/* Boutons */
.btn {
  display: inline-block;
  padding: 12px 28px; /* plus grand (AVANT: 10px 22px) */
  border-radius: 999px;
  font-weight: 700; /* plus gras (AVANT: 600) */
  font-size: 16px; /* un peu plus gros (AVANT: 15px) */
  text-decoration: none;
  cursor: pointer;
}

/* Orange plein */
.btn-orange {
  background-color: #f97316;
  color: #ffffff;
  border: 2px solid #f97316;
}

.btn-orange:hover {
  background-color: #ea580c;
  border-color: #ea580c;
}

/* Blanc bord bleu */
.btn-outline-blue {
  background-color: #ffffff;
  color: #2563eb;
  border: 2px solid #2563eb;
}

.btn-outline-blue:hover {
  background-color: #e0edff;
}

.btn-orange:hover {
  background-color: #ea580c;
  border-color: #ea580c;
}

.btn-outline-blue:hover {
  background-color: #e0edff;
}

/* Vert pour le CTA final */
.btn-green {
  background-color: #16a34a;
  color: #ffffff;
  border: 2px solid #16a34a;
}

.btn-green:hover {
  background-color: #15803d;
  border-color: #15803d;
}

.hero-image {
  flex: 1;
  text-align: center;
}

.hero-image img {
  max-width: 100%;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* SECTION INTRO */
.intro-section {
  max-width: 900px;
  margin: 0 auto 32px;
  text-align: center;
  padding: 0 24px;
}

.intro-section h2 {
  font-size: 26px;
  color: #2563eb; /* bleu */
  margin-bottom: 8px;
}

.intro-section p {
  font-size: 16px;
  color: #374151;
}

/* 4 SERVICES */
.services-grid {
  max-width: 1200px;
  margin: 24px auto 40px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
}
.service-card.big-service {
  background-color: #ffffff;
  border-radius: 24px;
  padding: 32px 32px 28px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  border: 1px solid #e5e7eb;
}

.service-icon-circle {
  width: 80px;
  height: 80px;
  border-radius: 999px;
  background-color: #e0edff;
  color: #1d4ed8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  margin-bottom: 16px;
}

.service-card.big-service h3 {
  font-size: 32px;
  line-height: 1.1;
  color: #0f1f5b;
  margin-bottom: 18px;
}

.service-card.big-service p {
  font-size: 18px;
  line-height: 1.6;
  color: #4b5563;
}

/* léger effet au survol */
.service-card.big-service:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.16);
  transition: 0.2s ease;
}

/* responsive */
@media (max-width: 768px) {
  .service-card.big-service {
    padding: 24px 20px;
  }

  .service-card.big-service h3 {
    font-size: 26px;
  }

  .service-card.big-service p {
    font-size: 16px;
  }
}

.service-card {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.service-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #111827;
}

.service-card p {
  font-size: 14px;
  color: #4b5563;
}

/* POURQUOI NOUS */
.why-section {
  max-width: 1100px;
  margin: 0 auto 40px;
  padding: 28px 24px 32px;
  background-color: #e5f0ff; /* bleu très clair */
  border-radius: 24px;
}

.why-section h2 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 24px;
  color: #0f1f5b;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.why-card.big-why {
  background-color: #ffffff;
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
  border: 1px solid #dbe4ff;
}

.why-icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background-color: #e0edff;
  color: #1d4ed8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 14px;
}

.why-card.big-why h3 {
  font-size: 20px;
  color: #0f1f5b;
  margin-bottom: 10px;
}

.why-card.big-why p {
  font-size: 15px;
  line-height: 1.6;
  color: #4b5563;
}

.why-card.big-why:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
  transition: 0.2s ease;
}

/* responsive */
@media (max-width: 768px) {
  .why-card.big-why {
    padding: 22px 18px;
  }

  .why-card.big-why h3 {
    font-size: 18px;
  }

  .why-card.big-why p {
    font-size: 14px;
  }
}
.why-card {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  text-align: left;
}

.why-emoji {
  font-size: 28px;
  margin-bottom: 8px;
}

.why-card h3 {
  font-size: 18px;
  margin-bottom: 6px;
  color: #111827;
}

.why-card p {
  font-size: 14px;
  color: #4b5563;
}

/* CTA CONSEILLER */
.cta-conseiller {
  background-color: #1d4ed8; /* bleu roi */
  color: #ffffff;
  padding: 18px 16px;
  margin: 24px auto 32px;
  max-width: 900px;
  border-radius: 18px;
}

.cta-content {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.cta-content h2 {
  font-size: 22px;
  margin-bottom: 6px;
}

.cta-content p {
  font-size: 15px;
  margin-bottom: 14px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .hero {
    flex-direction: column;
    text-align: center;
  }

  .hero-text {
    order: 1;
  }

  .hero-image {
    order: 2;
  }

  .hero-buttons {
    justify-content: center;
  }
}
/* PAGE INSCRIPTION ADHERENT */

.register-section {
  max-width: 800px;
  margin: 32px auto 40px;
  padding: 24px 24px 28px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.register-section h1 {
  font-size: 26px;
  color: #0f172a;
  margin-bottom: 8px;
}

.register-intro {
  font-size: 15px;
  color: #4b5563;
  margin-bottom: 20px;
}

.register-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 14px;
  color: #111827;
}

.form-group input,
.form-group select {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  font-size: 15px;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.form-group-inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.register-btn {
  margin-top: 8px;
}

.register-login-link {
  margin-top: 8px;
  font-size: 14px;
  color: #4b5563;
}

.register-login-link a {
  color: #2563eb;
  text-decoration: none;
}

.register-login-link a:hover {
  text-decoration: underline;
}

/* PAGE CONNEXION ADHERENT */

.login-section {
  max-width: 480px;
  margin: 40px auto;
  padding: 24px 24px 28px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.login-section h1 {
  font-size: 24px;
  color: #0f172a;
  margin-bottom: 6px;
}

.login-intro {
  font-size: 14px;
  color: #4b5563;
  margin-bottom: 18px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-form label {
  font-size: 14px;
  color: #111827;
}

.login-form input {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  font-size: 15px;
}

.login-form input:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.login-links-row {
  display: flex;
  justify-content: flex-end;
  font-size: 13px;
  margin-top: -4px;
  margin-bottom: 4px;
}

.forgot-link {
  color: #2563eb;
  text-decoration: none;
}

.forgot-link:hover {
  text-decoration: underline;
}

.login-btn {
  margin-top: 4px;
  width: 100%;
  text-align: center;
}

.login-register-link {
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
  color: #4b5563;
}

.login-register-link a {
  color: #2563eb;
  text-decoration: none;
}

.login-register-link a:hover {
  text-decoration: underline;
}

/* Bloc d'aide sous le formulaire de connexion */

.login-help-box {
  margin-top: 18px;
  padding: 16px 14px 18px;
  background-color: #e5f0ff;
  border-radius: 16px;
  text-align: center;
}

.login-help-box h2 {
  font-size: 16px;
  color: #0f1f5b;
  margin-bottom: 6px;
}

.login-help-box p {
  font-size: 14px;
  color: #374151;
  margin-bottom: 10px;
}

.login-help-box .btn.btn-green {
  padding: 10px 20px;
  font-size: 14px;
}

@media (max-width: 600px) {
  .register-section {
    margin: 16px;
    padding: 18px 16px 22px;
  }

  .login-section {
    margin: 24px 16px;
    padding: 20px 16px 24px;
  }
}
/* Section À propos */

.about-section {
  max-width: 900px;
  margin: 32px auto 40px;
  padding: 24px 24px 28px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.about-section h2 {
  font-size: 24px;
  color: #0f1f5b;
  margin-bottom: 10px;
  text-align: left;
}

.about-section p {
  font-size: 15px;
  color: #374151;
  line-height: 1.6;
}

/* Bouton flottant À propos */
.btn-floating-conseils,
.floating-button {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1000;
}

.floating-about {
  background-color: #4a90e2;
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.25);
}

.floating-about:hover {
  background-color: #2563eb;
}

/* bouton du bas */
.floating-about {
  bottom: 24px;
}

/* bouton du haut */
.btn-floating-conseils {
  bottom: 70px; /* plus haut que 24px ⇒ au-dessus */
}
.floating-about:hover {
  background-color: #2563eb;
}
/* PAGE A PROPOS */

.about-page {
  max-width: 1000px;
  margin: 32px auto 40px;
  padding: 24px 24px 32px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.about-page h1 {
  font-size: 26px;
  color: #0f172a;
  margin-bottom: 10px;
}

.about-lead {
  font-size: 15px;
  color: #374151;
  margin-bottom: 22px;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.about-block {
  background-color: #f3f4f6;
  border-radius: 16px;
  padding: 16px 18px;
}

.about-block h2 {
  font-size: 18px;
  color: #0f1f5b;
  margin-bottom: 6px;
}

.about-block p {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
}

.about-cta {
  margin-top: 8px;
  padding: 18px 16px 20px;
  background-color: #e5f0ff;
  border-radius: 16px;
  text-align: center;
}

.about-cta h2 {
  font-size: 18px;
  color: #0f1f5b;
  margin-bottom: 6px;
}

.about-cta p {
  font-size: 14px;
  color: #374151;
  margin-bottom: 10px;
}

@media (max-width: 600px) {
  .about-page {
    margin: 16px;
    padding: 18px 16px 26px;
  }
}
/* DASHBOARD SENIOR (MON ESPACE) */

.dash-welcome {
  max-width: 900px;
  margin: 24px auto 16px;
  padding: 24px 24px 22px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.dash-welcome h1 {
  font-size: 26px;
  color: #0f172a;
  margin-bottom: 8px;
}

.dash-intro {
  font-size: 16px;
  color: #4b5563;
  margin-bottom: 16px;
}

.dash-alerts p {
  font-size: 15px;
  color: #111827;
  background-color: #e5f0ff;
  padding: 8px 10px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 6px;
}

.dash-quick-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Grille principale */

.dash-grid {
  max-width: 1100px;
  margin: 8px auto 24px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.dash-card {
  background-color: #ffffff;
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.dash-card h2 {
  font-size: 18px;
  color: #0f1f5b;
  margin-bottom: 12px;
}
.dash-simple-card {
  max-width: 900px;
  margin: 16px auto 24px;
  padding: 20px 24px 18px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.dash-simple-card h2 {
  font-size: 20px;
  color: #0f1f5b;
  margin-bottom: 10px;
}
/* Rendez-vous */

.dash-appointment {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e7eb;
}

.dash-appointment h3 {
  font-size: 18px;
  color: #111827;
}

.dash-appointment p {
  font-size: 16px;
  color: #4b5563;
}

.link-button {
  background: none;
  border: none;
  color: #2563eb;
  font-size: 13px;
  padding: 0;
  margin-top: 4px;
  cursor: pointer;
  text-decoration: underline;
}

/* Services */

.dash-service {
  margin-bottom: 10px;
}

.dash-service h3 {
  font-size: 16px;
  color: #111827;
}

.dash-service p {
  font-size: 14px;
  color: #4b5563;
  margin-bottom: 4px;
}

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
}

.status-active {
  background-color: #dcfce7;
  color: #166534;
}

.status-pending {
  background-color: #fef9c3;
  color: #854d0e;
}

/* Activités & messages */

.dash-activity,
.dash-messages {
  margin-bottom: 12px;
}

.dash-activity h3,
.dash-messages h3 {
  font-size: 16px;
  color: #111827;
  margin-bottom: 4px;
}

.dash-activity p,
.dash-messages p {
  font-size: 14px;
  color: #4b5563;
}

.dash-info {
  font-size: 13px;
  color: #4b5563;
  background-color: #f3f4f6;
  padding: 8px 10px;
  border-radius: 10px;
}

.small-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  color: #2563eb;
  text-decoration: none;
}

.small-link:hover {
  text-decoration: underline;
}

/* Bloc aide */

.dash-help {
  max-width: 900px;
  margin: 0 auto 32px;
  padding: 18px 16px 22px;
  background-color: #e5f0ff;
  border-radius: 18px;
  text-align: center;
}

.dash-help h2 {
  font-size: 20px;
  color: #0f1f5b;
  margin-bottom: 6px;
}

.dash-help p {
  font-size: 16px;
  color: #374151;
  margin-bottom: 10px;
}

/* Responsive */

@media (max-width: 768px) {
  .dash-welcome {
    margin: 16px;
    padding: 18px 16px 20px;
  }

  .dash-grid {
    padding: 0 16px;
  }
}
/* Boutons plus gros et plus lisibles */

.btn {
  padding: 14px 30px;
  font-size: 18px;
  font-weight: 700;
}

/* Navigation un peu plus grande */
.nav-links a {
  font-size: 18px;
}
/* PAGE PROFIL / INFORMATIONS PERSONNELLES */

.profile-section {
  max-width: 1000px;
  margin: 24px auto 32px;
  padding: 24px 24px 28px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.profile-section h1 {
  font-size: 24px;
  color: #0f172a;
  margin-bottom: 8px;
}

.profile-intro {
  font-size: 16px;
  color: #4b5563;
  margin-bottom: 18px;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.profile-block {
  background-color: #f9fafb;
  border-radius: 16px;
  padding: 14px 16px 16px;
}

.profile-block h2 {
  font-size: 18px;
  color: #0f1f5b;
  margin-bottom: 8px;
}

.profile-block p {
  font-size: 16px;
  color: #374151;
  margin-bottom: 4px;
}

.profile-block strong {
  font-weight: 600;
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.profile-help {
  padding: 12px 14px 14px;
  background-color: #e5f0ff;
  border-radius: 16px;
  text-align: center;
  font-size: 16px;
  color: #374151;
}

.profile-help p {
  margin-bottom: 8px;
}

@media (max-width: 600px) {
  .profile-section {
    margin: 16px;
    padding: 18px 16px 24px;
  }
}
/* GROS BOUTON "MES INFORMATIONS PERSONNELLES" */

.btn-big-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px; /* gros padding = gros bouton */
  font-size: 18px; /* texte plus grand */
  font-weight: 700;
  border-radius: 999px; /* pastille bien arrondie */
  background-color: #f97316; /* orange Silver Happy bien visible */
  color: #ffffff;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.35);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    background-color 0.1s ease;
  min-width: 260px; /* large zone cliquable */
}

.btn-big-info:hover,
.btn-big-info:focus {
  background-color: #ea580c; /* un peu plus foncé au survol */
  box-shadow: 0 10px 22px rgba(248, 113, 22, 0.4);
  transform: translateY(-1px);
}

.btn-big-info:active {
  transform: translateY(0);
  box-shadow: 0 5px 10px rgba(248, 113, 22, 0.3);
}

@media (max-width: 600px) {
  .btn-big-info {
    width: 100%; /* plein écran sur mobile */
    font-size: 17px;
  }
}
/* PAGE GESTION DE L’ABONNEMENT */

.subscription-section {
  max-width: 1000px;
  margin: 24px auto 32px;
  padding: 24px 24px 28px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.subscription-section h1 {
  font-size: 24px;
  color: #0f172a;
  margin-bottom: 8px;
}

.subscription-intro {
  font-size: 16px;
  color: #4b5563;
  margin-bottom: 20px;
}

.subscription-block {
  background-color: #f9fafb;
  border-radius: 16px;
  padding: 16px 18px 18px;
  margin-bottom: 16px;
}

.subscription-block h2 {
  font-size: 18px;
  color: #0f1f5b;
  margin-bottom: 8px;
}

.current-plan-status {
  font-size: 16px;
  font-weight: 600;
  color: #b45309; /* orange/brun si pas abonné */
  margin-bottom: 6px;
}

.current-plan-status.success {
  color: #15803d; /* vert si bien abonné */
}

.current-plan-text {
  font-size: 16px;
  color: #374151;
}

/* Bouton voir l’offre */
.btn-outline-blue-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 12px 22px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 999px;
  border: 2px solid #1d4ed8;
  background-color: #ffffff;
  color: #1d4ed8;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.1s ease,
    color 0.1s ease,
    box-shadow 0.1s ease;
}

.btn-outline-blue-large:hover,
.btn-outline-blue-large:focus {
  background-color: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.3);
}

/* Gros boutons Souscrire / Renouveler */
.subscription-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0;
}

.btn-subscribe,
.btn-renew {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  min-width: 260px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.15);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    background-color 0.1s ease;
}

.btn-subscribe {
  background-color: #f97316; /* orange */
  color: #ffffff;
}

.btn-renew {
  background-color: #0f766e; /* vert/bleu */
  color: #ffffff;
}

.btn-subscribe:hover,
.btn-subscribe:focus {
  background-color: #ea580c;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(248, 113, 22, 0.4);
}

.btn-renew:hover,
.btn-renew:focus {
  background-color: #115e59;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.4);
}

.btn-subscribe:active,
.btn-renew:active {
  transform: translateY(0);
}

/* Bloc aide */
.subscription-help {
  padding: 16px 18px 18px;
  background-color: #e5f2ff;
  border-radius: 16px;
  margin-top: 4px;
}

.subscription-help h2 {
  font-size: 18px;
  color: #0f172a;
  margin-bottom: 6px;
}

.subscription-help p {
  font-size: 16px;
  color: #374151;
  margin-bottom: 10px;
}

@media (max-width: 600px) {
  .subscription-section {
    margin: 16px;
    padding: 18px 16px 24px;
  }

  .btn-subscribe,
  .btn-renew {
    width: 100%;
    font-size: 17px;
  }
}
/* PAGE OFFRE SILVER HAPPY */

.offer-section {
  max-width: 1000px;
  margin: 24px auto 32px;
  padding: 24px 24px 28px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.offer-section h1 {
  font-size: 24px;
  color: #0f172a;
  margin-bottom: 8px;
}

.offer-intro {
  font-size: 16px;
  color: #4b5563;
  margin-bottom: 20px;
}

.offer-card {
  background-color: #f9fafb;
  border-radius: 18px;
  padding: 18px 20px 20px;
  margin-bottom: 18px;
  border: 1px solid #e5e7eb;
}

.offer-header h2 {
  font-size: 20px;
  color: #0f1f5b;
  margin-bottom: 4px;
}

.offer-tagline {
  font-size: 16px;
  color: #4b5563;
}

.offer-price-block {
  margin: 14px 0 10px;
}

.offer-price {
  font-size: 26px;
  font-weight: 800;
  color: #f97316;
}

.offer-price-note {
  font-size: 14px;
  color: #6b7280;
}

.offer-features h3 {
  font-size: 18px;
  color: #0f172a;
  margin-bottom: 6px;
}

.offer-features ul {
  list-style-type: disc;
  padding-left: 20px;
  font-size: 16px;
  color: #374151;
}

.offer-features li {
  margin-bottom: 4px;
}

/* Bouton principal de souscription */
.offer-cta {
  margin-top: 14px;
}

.btn-offer-subscribe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 999px;
  background-color: #f97316;
  color: #ffffff;
  text-decoration: none;
  border: none;
  cursor: pointer;
  min-width: 260px;
  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.35);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    background-color 0.1s ease;
}

.btn-offer-subscribe:hover,
.btn-offer-subscribe:focus {
  background-color: #ea580c;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(248, 113, 22, 0.4);
}

.offer-cta-note {
  font-size: 14px;
  color: #4b5563;
  margin-top: 6px;
}

/* FAQ / rassurance */
.offer-faq {
  margin-top: 10px;
  padding: 14px 16px 16px;
  background-color: #eef2ff;
  border-radius: 16px;
}

.offer-faq h2 {
  font-size: 18px;
  color: #0f172a;
  margin-bottom: 8px;
}

.offer-faq-item + .offer-faq-item {
  margin-top: 8px;
}

.offer-faq-item h3 {
  font-size: 16px;
  color: #111827;
  margin-bottom: 2px;
}

.offer-faq-item p {
  font-size: 15px;
  color: #4b5563;
}

/* Aide */
.offer-help {
  margin-top: 14px;
  padding: 12px 14px 14px;
  background-color: #e5f2ff;
  border-radius: 16px;
  text-align: center;
  font-size: 16px;
  color: #374151;
}

.offer-help p {
  margin-bottom: 8px;
}

@media (max-width: 600px) {
  .offer-section {
    margin: 16px;
    padding: 18px 16px 24px;
  }

  .btn-offer-subscribe {
    width: 100%;
    font-size: 17px;
  }
}
/* PAGE CATALOGUE DES PRESTATIONS / SERVICES */

.services-catalog-section {
  max-width: 1100px;
  margin: 24px auto 32px;
  padding: 24px 24px 28px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.services-catalog-section h1 {
  font-size: 24px;
  color: #0f172a;
  margin-bottom: 8px;
}

.services-catalog-intro {
  font-size: 16px;
  color: #4b5563;
  margin-bottom: 20px;
}

/* Grille de services */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

/* Carte d’un service */
.service-card {
  background-color: #f9fafb;
  border-radius: 18px;
  padding: 16px 16px 18px;
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.service-emoji {
  font-size: 32px;
  margin-bottom: 8px;
}

.service-card h2 {
  font-size: 18px;
  color: #0f172a;
  margin-bottom: 6px;
}

.service-card p {
  font-size: 15px;
  color: #4b5563;
  margin-bottom: 10px;
}

/* Bouton réserver */
.service-book-btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background-color: #f97316;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(249, 115, 22, 0.3);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    background-color 0.1s ease;
}

.service-book-btn:hover,
.service-book-btn:focus {
  background-color: #ea580c;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(248, 113, 22, 0.35);
}

.service-book-btn:active {
  transform: translateY(0);
}

/* Bloc d’aide */
.services-catalog-help {
  margin-top: 20px;
  padding: 14px 16px 16px;
  background-color: #e5f2ff;
  border-radius: 16px;
  font-size: 16px;
  color: #374151;
  text-align: center;
}

.services-catalog-help p {
  margin-bottom: 8px;
}

@media (max-width: 600px) {
  .services-catalog-section {
    margin: 16px;
    padding: 18px 16px 24px;
  }
}
/* PAGE DÉTAIL D’UNE PRESTATION */

.service-detail-section {
  max-width: 900px;
  margin: 24px auto 32px;
  padding: 24px 24px 28px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.service-back-link {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 15px;
  color: #1d4ed8;
  text-decoration: none;
}

.service-back-link:hover,
.service-back-link:focus {
  text-decoration: underline;
}

.service-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.service-detail-emoji {
  font-size: 40px;
}

.service-detail-header h1 {
  font-size: 24px;
  color: #0f172a;
  margin-bottom: 4px;
}

.service-detail-tagline {
  font-size: 16px;
  color: #4b5563;
}

/* Sections de contenu */
.service-detail-main {
  margin-top: 10px;
  margin-bottom: 16px;
}

.service-detail-main h2 {
  font-size: 18px;
  color: #0f172a;
  margin-bottom: 6px;
}

.service-detail-main p {
  font-size: 16px;
  color: #374151;
}

/* Détails pratiques en 3 blocs */
.service-detail-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 18px 0 18px;
}

.service-detail-box {
  background-color: #f9fafb;
  border-radius: 16px;
  padding: 14px 14px 16px;
  border: 1px solid #e5e7eb;
}

.service-detail-box h3 {
  font-size: 16px;
  color: #0f172a;
  margin-bottom: 6px;
}

.service-detail-box ul {
  padding-left: 18px;
  font-size: 15px;
  color: #4b5563;
}

.service-detail-box li {
  margin-bottom: 4px;
}

/* Bloc réservation */
.service-detail-booking {
  margin-top: 10px;
  padding: 16px 16px 18px;
  background-color: #eef2ff;
  border-radius: 16px;
}

.service-detail-booking h2 {
  font-size: 18px;
  color: #0f172a;
  margin-bottom: 6px;
}

.service-detail-booking p {
  font-size: 15px;
  color: #374151;
  margin-bottom: 10px;
}

.service-booking-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6px;
}

.service-booking-form label {
  font-size: 15px;
  color: #111827;
  font-weight: 600;
}

.service-booking-form input[type="date"],
.service-booking-form textarea {
  font-size: 15px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  outline: none;
}

.service-booking-form input[type="date"]:focus,
.service-booking-form textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* Bouton de réservation */
.service-booking-submit {
  margin-top: 6px;
  align-self: flex-start;
  padding: 10px 18px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background-color: #f97316;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(249, 115, 22, 0.3);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    background-color 0.1s ease;
}

.service-booking-submit:hover,
.service-booking-submit:focus {
  background-color: #ea580c;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(248, 113, 22, 0.35);
}

.service-booking-note {
  font-size: 13px;
  color: #4b5563;
}

/* Aide */
.service-detail-help {
  margin-top: 16px;
  padding: 12px 14px 14px;
  background-color: #e5f2ff;
  border-radius: 16px;
  text-align: center;
  font-size: 15px;
  color: #374151;
}

.service-detail-help p {
  margin-bottom: 8px;
}

@media (max-width: 600px) {
  .service-detail-section {
    margin: 16px;
    padding: 18px 16px 24px;
  }

  .service-detail-header {
    align-items: flex-start;
  }
}

/* PAGE CATALOGUE DES ÉVÉNEMENTS */

.events-catalog-section {
  max-width: 1100px;
  margin: 24px auto 32px;
  padding: 24px 24px 28px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}
.event-description {
  word-wrap: break-word; /* Coupe les mots trop longs */
  overflow-wrap: break-word; /* Version moderne, équivalente */
  white-space: normal; /* Assure le retour à la ligne (par défaut) */
  max-width: 100%; /* Évite tout débordement horizontal */
}
.events-catalog-section h1 {
  font-size: 24px;
  color: #0f172a;
  margin-bottom: 8px;
}

.events-catalog-intro {
  font-size: 16px;
  color: #4b5563;
  margin-bottom: 20px;
}

/* Grille d'événements */
.events-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Carte d’un événement */
.event-card {
  display: flex;
  gap: 14px;
  background-color: #f9fafb;
  border-radius: 18px;
  padding: 12px 12px 14px;
  border: 1px solid #e5e7eb;
}

.event-image {
  flex: 0 0 140px;
  border-radius: 14px;
  overflow: hidden;
  background-color: #e5e7eb;
}

.event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-content {
  flex: 1;
}

.event-content h2 {
  font-size: 18px;
  color: #0f172a;
  margin-bottom: 4px;
}

.event-category {
  font-size: 15px;
  color: #2563eb;
  margin-bottom: 6px;
}

.event-description {
  font-size: 15px;
  color: #4b5563;
  margin-bottom: 8px;
}

.event-info {
  font-size: 14px;
  color: #374151;
  margin-bottom: 10px;
}

/* Bouton inscription */
.event-book-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  background-color: #f97316;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(249, 115, 22, 0.3);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    background-color 0.1s ease;
}

.event-book-btn:hover,
.event-book-btn:focus {
  background-color: #ea580c;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(248, 113, 22, 0.35);
}

/* Aide */
.events-catalog-help {
  margin-top: 20px;
  padding: 14px 16px 16px;
  background-color: #e5f2ff;
  border-radius: 16px;
  font-size: 16px;
  color: #374151;
  text-align: center;
}

.events-catalog-help p {
  margin-bottom: 8px;
}

@media (max-width: 700px) {
  .events-catalog-section {
    margin: 16px;
    padding: 18px 16px 24px;
  }

  .event-card {
    flex-direction: column;
  }

  .event-image {
    width: 100%;
    max-height: 180px;
  }
}

/* PAGE DÉTAIL D’UN ÉVÉNEMENT */

.event-detail-section {
  max-width: 900px;
  margin: 24px auto 32px;
  padding: 24px 24px 28px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.event-back-link {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 15px;
  color: #1d4ed8;
  text-decoration: none;
}

.event-back-link:hover,
.event-back-link:focus {
  text-decoration: underline;
}

.event-detail-header {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
}

.event-detail-image {
  flex: 0 0 180px;
  border-radius: 16px;
  overflow: hidden;
  background-color: #e5e7eb;
}

.event-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-detail-head-content h1 {
  font-size: 22px;
  color: #0f172a;
  margin-bottom: 4px;
}

.event-detail-category {
  font-size: 15px;
  color: #2563eb;
  margin-bottom: 6px;
}

.event-detail-tagline {
  font-size: 16px;
  color: #4b5563;
}

/* Infos principales */
.event-detail-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 18px 0 16px;
}

.event-detail-info-box {
  background-color: #f9fafb;
  border-radius: 16px;
  padding: 14px 14px 16px;
  border: 1px solid #e5e7eb;
}

.event-detail-info-box h2 {
  font-size: 18px;
  color: #0f172a;
  margin-bottom: 6px;
}

.event-detail-info-box p {
  font-size: 15px;
  color: #374151;
}

/* Description détaillée */
.event-detail-description {
  margin-bottom: 18px;
}

.event-detail-description h2 {
  font-size: 18px;
  color: #0f172a;
  margin-bottom: 6px;
}

.event-detail-description p {
  font-size: 15px;
  color: #374151;
}

/* Bloc inscription */
.event-detail-registration {
  margin-top: 4px;
  padding: 16px 16px 18px;
  background-color: #eef2ff;
  border-radius: 16px;
}

.event-detail-registration h2 {
  font-size: 18px;
  color: #0f172a;
  margin-bottom: 6px;
}

.event-detail-registration p {
  font-size: 15px;
  color: #374151;
  margin-bottom: 10px;
}

.event-registration-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6px;
}

.event-registration-form label {
  font-size: 15px;
  color: #111827;
  font-weight: 600;
}

.event-registration-form input[type="text"],
.event-registration-form input[type="tel"],
.event-registration-form textarea {
  font-size: 15px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  outline: none;
}

.event-registration-form input:focus,
.event-registration-form textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* Bouton inscription */
.event-registration-submit {
  margin-top: 6px;
  align-self: flex-start;
  padding: 10px 18px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background-color: #f97316;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(249, 115, 22, 0.3);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    background-color 0.1s ease;
}

.event-registration-submit:hover,
.event-registration-submit:focus {
  background-color: #ea580c;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(248, 113, 22, 0.35);
}

.event-registration-note {
  font-size: 13px;
  color: #4b5563;
}

/* Aide */
.event-detail-help {
  margin-top: 16px;
  padding: 12px 14px 14px;
  background-color: #e5f2ff;
  border-radius: 16px;
  text-align: center;
  font-size: 15px;
  color: #374151;
}

.event-detail-help p {
  margin-bottom: 8px;
}

@media (max-width: 700px) {
  .event-detail-section {
    margin: 16px;
    padding: 18px 16px 24px;
  }

  .event-detail-header {
    flex-direction: column;
  }

  .event-detail-image {
    width: 100%;
    max-height: 200px;
  }
}

/* PAGE CATALOGUE DES PRODUITS (BOUTIQUE) */

.products-catalog-section {
  max-width: 1100px;
  margin: 24px auto 32px;
  padding: 24px 24px 28px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.products-catalog-section h1 {
  font-size: 24px;
  color: #0f172a;
  margin-bottom: 8px;
}

.products-catalog-intro {
  font-size: 16px;
  color: #4b5563;
  margin-bottom: 20px;
}

/* Grille de gros carrés produits */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

/* Carte produit */
.product-card {
  background-color: #f9fafb;
  border-radius: 18px;
  padding: 16px 16px 18px;
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  min-height: 210px; /* gros carré */
}

.product-card h2 {
  font-size: 16px;
  color: #2563eb; /* catégorie en bleu */
  margin-bottom: 4px;
}

.product-rating {
  font-size: 15px;
  color: #f97316;
  margin-bottom: 6px;
}

.product-name {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

.product-description {
  font-size: 15px;
  color: #4b5563;
  margin-bottom: 8px;
}

.product-price {
  font-size: 18px;
  font-weight: 700;
  color: #16a34a;
  margin-bottom: 10px;
}

/* Bouton Ajouter au panier */
.product-add-btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background-color: #f97316;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(249, 115, 22, 0.3);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    background-color 0.1s ease;
}

.product-add-btn:hover,
.product-add-btn:focus {
  background-color: #ea580c;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(248, 113, 22, 0.35);
}

/* Bloc d’aide */
.products-catalog-help {
  margin-top: 20px;
  padding: 14px 16px 16px;
  background-color: #e5f2ff;
  border-radius: 16px;
  font-size: 16px;
  color: #374151;
  text-align: center;
}

.products-catalog-help p {
  margin-bottom: 8px;
}

@media (max-width: 600px) {
  .products-catalog-section {
    margin: 16px;
    padding: 18px 16px 24px;
  }
}

/* PAGE DÉTAIL PRODUIT */

.product-detail-section {
  max-width: 900px;
  margin: 24px auto 32px;
  padding: 24px 24px 28px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.product-back-link {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 15px;
  color: #1d4ed8;
  text-decoration: none;
}

.product-back-link:hover,
.product-back-link:focus {
  text-decoration: underline;
}

.product-detail-header {
  display: flex;
  gap: 16px;
  margin-bottom: 18px;
}

.product-detail-image {
  flex: 0 0 220px;
  border-radius: 16px;
  overflow: hidden;
  background-color: #e5e7eb;
}

.product-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-detail-head-content {
  flex: 1;
}

.product-detail-category {
  font-size: 16px;
  color: #2563eb;
  margin-bottom: 4px;
}

.product-detail-header h1 {
  font-size: 22px;
  color: #0f172a;
  margin-bottom: 6px;
}

.product-detail-rating {
  font-size: 15px;
  color: #f97316;
  margin-bottom: 4px;
}

.product-detail-price {
  font-size: 22px;
  font-weight: 700;
  color: #16a34a;
  margin-bottom: 10px;
}

/* Gros bouton ajouter au panier */
.product-detail-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background-color: #f97316;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.35);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    background-color 0.1s ease;
}

.product-detail-add-btn:hover,
.product-detail-add-btn:focus {
  background-color: #ea580c;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(248, 113, 22, 0.4);
}

/* Description */
.product-detail-description {
  margin-bottom: 18px;
}

.product-detail-description h2 {
  font-size: 18px;
  color: #0f172a;
  margin-bottom: 6px;
}

.product-detail-description p {
  font-size: 15px;
  color: #374151;
}

/* Blocs d’infos */
.product-detail-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.product-detail-box {
  background-color: #f9fafb;
  border-radius: 16px;
  padding: 14px 14px 16px;
  border: 1px solid #e5e7eb;
}

.product-detail-box h3 {
  font-size: 16px;
  color: #0f172a;
  margin-bottom: 6px;
}

.product-detail-box ul {
  padding-left: 18px;
  font-size: 15px;
  color: #4b5563;
}

.product-detail-box li {
  margin-bottom: 4px;
}

/* Aide */
.product-detail-help {
  margin-top: 10px;
  padding: 12px 14px 14px;
  background-color: #e5f2ff;
  border-radius: 16px;
  text-align: center;
  font-size: 15px;
  color: #374151;
}

.product-detail-help p {
  margin-bottom: 8px;
}

@media (max-width: 700px) {
  .product-detail-section {
    margin: 16px;
    padding: 18px 16px 24px;
  }

  .product-detail-header {
    flex-direction: column;
  }

  .product-detail-image {
    width: 100%;
    max-height: 220px;
  }
}

/* PAGE PANIER / RÉCAPITULATIF COMMANDE */

.cart-section {
  max-width: 900px;
  margin: 24px auto 32px;
  padding: 24px 24px 28px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.cart-section h1 {
  font-size: 24px;
  color: #0f172a;
  margin-bottom: 8px;
}

.cart-intro {
  font-size: 16px;
  color: #4b5563;
  margin-bottom: 18px;
}

/* Liste des articles */
.cart-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f9fafb;
  border-radius: 14px;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
}

.cart-item-info {
  max-width: 70%;
}

.cart-item-name {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 2px;
}

.cart-item-details {
  font-size: 14px;
  color: #4b5563;
}

.cart-item-price {
  font-size: 16px;
  font-weight: 700;
  color: #16a34a;
}

/* Résumé total */
.cart-summary {
  background-color: #0f172a; /* fond foncé */
  border-radius: 16px;
  padding: 14px 16px 16px;
  color: #e5e7eb;
  margin-bottom: 16px;
}

.cart-summary-row,
.cart-summary-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  margin-bottom: 6px;
}

.cart-summary-total-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 2px solid #f97316; /* séparation orange */
  font-weight: 700;
}

.cart-summary-total-amount {
  font-size: 22px; /* montant final bien plus gros */
  color: #f97316; /* orange pour attirer l’œil */
}

/* Actions */
.cart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.cart-validate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background-color: #f97316;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.35);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    background-color 0.1s ease;
  display: inline-flex;
}

.cart-validate-btn:hover,
.cart-validate-btn:focus {
  background-color: #ea580c;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(248, 113, 22, 0.4);
}

.cart-note {
  font-size: 13px;
  color: #4b5563;
}

@media (max-width: 600px) {
  .cart-section {
    margin: 16px;
    padding: 18px 16px 24px;
  }

  .cart-item-info {
    max-width: 60%;
  }
}
/* GROS BOUTON PANIER DANS LE HEADER */

.btn-header-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 999px;
  background-color: #f97316; /* orange Silver Happy */
  color: #ffffff;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(249, 115, 22, 0.35);
  margin-left: 8px;
  white-space: nowrap;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    background-color 0.1s ease;
}

.btn-header-cart:hover,
.btn-header-cart:focus {
  background-color: #ea580c;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(248, 113, 22, 0.4);
}

/* PAGE PAIEMENT (STRIPE) */

.payment-section {
  max-width: 800px;
  margin: 24px auto 32px;
  padding: 24px 24px 28px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.payment-section h1 {
  font-size: 24px;
  color: #0f172a;
  margin-bottom: 8px;
}

.payment-intro {
  font-size: 16px;
  color: #4b5563;
  margin-bottom: 18px;
}

.payment-summary {
  background-color: #f9fafb;
  border-radius: 16px;
  padding: 14px 16px 16px;
  border: 1px solid #e5e7eb;
  margin-bottom: 18px;
}

.payment-summary h2 {
  font-size: 18px;
  color: #0f172a;
  margin-bottom: 6px;
}

.payment-summary p {
  font-size: 15px;
  color: #374151;
  margin-bottom: 4px;
}

.payment-total-amount {
  font-size: 20px;
  font-weight: 700;
  color: #16a34a;
}

/* Bloc Stripe */
.payment-stripe-box {
  background-color: #eef2ff;
  border-radius: 16px;
  padding: 14px 16px 16px;
}

.payment-stripe-box p {
  font-size: 15px;
  color: #374151;
  margin-bottom: 10px;
}

/* Gros bouton Stripe */
.payment-stripe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background-color: #635bff; /* violet Stripe */
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(99, 91, 255, 0.4);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    background-color 0.1s ease;
  margin-bottom: 6px;
}

.payment-stripe-btn:hover,
.payment-stripe-btn:focus {
  background-color: #5146ff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(99, 91, 255, 0.5);
}

.payment-small-note {
  font-size: 13px;
  color: #4b5563;
}

@media (max-width: 600px) {
  .payment-section {
    margin: 16px;
    padding: 18px 16px 24px;
  }

  .payment-stripe-btn {
    width: 100%;
    font-size: 17px;
  }
}

/* PAGE HISTORIQUE COMMANDES / PRESTATIONS / FACTURES */

.history-section {
  max-width: 900px;
  margin: 24px auto 32px;
  padding: 24px 24px 28px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.history-section h1 {
  font-size: 24px;
  color: #0f172a;
  margin-bottom: 8px;
}

.history-intro {
  font-size: 16px;
  color: #4b5563;
  margin-bottom: 18px;
}

.history-block {
  margin-bottom: 18px;
}

.history-block h2 {
  font-size: 18px;
  color: #0f172a;
  margin-bottom: 8px;
}

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

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f9fafb;
  border-radius: 14px;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
}

.history-title {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 2px;
}

.history-details {
  font-size: 14px;
  color: #4b5563;
}

.history-actions {
  flex-shrink: 0;
}

/* Gros lien PDF type bouton */
.history-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  background-color: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
  transition:
    background-color 0.1s ease,
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

.history-link:hover,
.history-link:focus {
  background-color: #1e40af;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(30, 64, 175, 0.35);
}

/* Aide */
.history-help {
  margin-top: 10px;
  padding: 12px 14px 14px;
  background-color: #e5f2ff;
  border-radius: 16px;
  text-align: center;
  font-size: 15px;
  color: #374151;
}

.history-help p {
  margin-bottom: 8px;
}

@media (max-width: 600px) {
  .history-section {
    margin: 16px;
    padding: 18px 16px 24px;
  }

  .history-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .history-actions {
    width: 100%;
  }

  .history-link {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* PAGE GESTION DES DEVIS – LISTE */

.quotes-section {
  max-width: 900px;
  margin: 24px auto 32px;
  padding: 24px 24px 28px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.quotes-section h1 {
  font-size: 24px;
  color: #0f172a;
  margin-bottom: 8px;
}

.quotes-intro {
  font-size: 16px;
  color: #4b5563;
  margin-bottom: 18px;
}

.quotes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quote-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f9fafb;
  border-radius: 14px;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
}

.quote-title {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 2px;
}

.quote-details {
  font-size: 14px;
  color: #4b5563;
  margin-bottom: 4px;
}

.quote-status {
  font-size: 14px;
  font-weight: 600;
}

.quote-status-valid {
  color: #b45309; /* orange/brun : en attente */
}

.quote-status-accepted {
  color: #15803d; /* vert : accepté */
}

.quote-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

/* Bouton Voir le détail */
.quote-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  background-color: #2563eb;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
  transition:
    background-color 0.1s ease,
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

/* Bouton Télécharger le PDF (plus léger) */
.quote-link-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  background-color: #e5e7eb;
  color: #111827;
  transition: background-color 0.1s ease;
}

.quote-link:hover,
.quote-link:focus {
  background-color: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(30, 64, 175, 0.35);
}

.quote-link-secondary:hover,
.quote-link-secondary:focus {
  background-color: #d1d5db;
}

/* Aide */
.quotes-help {
  margin-top: 12px;
  padding: 12px 14px 14px;
  background-color: #e5f2ff;
  border-radius: 16px;
  text-align: center;
  font-size: 15px;
  color: #374151;
}

.quotes-help p {
  margin-bottom: 8px;
}

@media (max-width: 600px) {
  .quotes-section {
    margin: 16px;
    padding: 18px 16px 24px;
  }

  .quote-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .quote-actions {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* PAGE DÉTAIL D’UN DEVIS */

.quote-detail-section {
  max-width: 900px;
  margin: 24px auto 32px;
  padding: 24px 24px 28px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.quote-back-link {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 15px;
  color: #1d4ed8;
  text-decoration: none;
}

.quote-back-link:hover,
.quote-back-link:focus {
  text-decoration: underline;
}

.quote-detail-header h1 {
  font-size: 22px;
  color: #0f172a;
  margin-bottom: 4px;
}

.quote-detail-meta {
  font-size: 14px;
  color: #4b5563;
  margin-bottom: 4px;
}

.quote-detail-status {
  font-size: 14px;
  color: #111827;
  margin-bottom: 10px;
}

.quote-detail-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 13px;
  background-color: #f97316;
  color: #ffffff;
}

/* Infos en 2 colonnes */
.quote-detail-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.quote-detail-box {
  background-color: #f9fafb;
  border-radius: 16px;
  padding: 14px 14px 16px;
  border: 1px solid #e5e7eb;
}

.quote-detail-box h2 {
  font-size: 16px;
  color: #0f172a;
  margin-bottom: 6px;
}

.quote-detail-box p {
  font-size: 15px;
  color: #374151;
}

/* Lignes du devis */
.quote-detail-lines h2 {
  font-size: 18px;
  color: #0f172a;
  margin-bottom: 8px;
}

.quote-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background-color: #f9fafb;
  border-radius: 14px;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  margin-bottom: 8px;
}

.quote-line-title {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 2px;
}

.quote-line-desc {
  font-size: 14px;
  color: #4b5563;
}

.quote-line-price {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

/* Total */
.quote-total-box {
  margin-top: 10px;
  padding: 12px 14px 14px;
  border-radius: 14px;
  background-color: #0f172a;
  color: #e5e7eb;
}

.quote-total-box p {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  margin-bottom: 4px;
}

.quote-total-row {
  margin-top: 6px;
}

.quote-total-amount {
  font-size: 20px;
  font-weight: 700;
  color: #f97316;
}

/* Actions */
.quote-detail-actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* On réutilise .quote-link pour le bouton PDF */
.quote-accept-btn {
  padding: 8px 18px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background-color: #16a34a;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(22, 163, 74, 0.35);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    background-color 0.1s ease;
}

.quote-accept-btn:hover,
.quote-accept-btn:focus {
  background-color: #15803d;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(21, 128, 61, 0.4);
}

/* Aide */
.quote-detail-help {
  margin-top: 16px;
  padding: 12px 14px 14px;
  background-color: #e5f2ff;
  border-radius: 16px;
  text-align: center;
  font-size: 15px;
  color: #374151;
}

.quote-detail-help p {
  margin-bottom: 8px;
}

@media (max-width: 600px) {
  .quote-detail-section {
    margin: 16px;
    padding: 18px 16px 24px;
  }

  .quote-line {
    flex-direction: column;
    gap: 4px;
  }

  .quote-line-price {
    align-self: flex-end;
  }
}

.quotes-actions-top {
  margin-bottom: 16px;
}

/* si tu veux adapter un peu le style */
.btn-big-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 999px;
  background-color: #f97316;
  color: #ffffff;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.35);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    background-color 0.1s ease;
}

/* PAGE CRÉATION DE DEVIS */

.quote-create-section {
  max-width: 800px;
  margin: 24px auto 32px;
  padding: 24px 24px 28px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.quote-create-section h1 {
  font-size: 24px;
  color: #0f172a;
  margin-bottom: 8px;
}

.quote-create-intro {
  font-size: 16px;
  color: #4b5563;
  margin-bottom: 16px;
}

/* Carte du formulaire */
.quote-create-card {
  background-color: #f9fafb;
  border-radius: 18px;
  padding: 16px 18px 18px;
  border: 1px solid #e5e7eb;
}

.quote-create-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quote-form-group label {
  display: block;
  font-size: 15px;
  color: #111827;
  font-weight: 600;
  margin-bottom: 4px;
}

.quote-form-group input,
.quote-form-group textarea {
  width: 100%;
  font-size: 15px;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  outline: none;
  background-color: #ffffff;
}

.quote-form-group input:focus,
.quote-form-group textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}

/* Gros bouton d’envoi */
.quote-create-submit {
  margin-top: 6px;
  align-self: flex-start;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background-color: #f97316;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.35);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    background-color 0.1s ease;
}

.quote-create-submit:hover,
.quote-create-submit:focus {
  background-color: #ea580c;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(248, 113, 22, 0.4);
}

@media (max-width: 600px) {
  .quote-create-section {
    margin: 16px;
    padding: 18px 16px 24px;
  }
}

/* PAGE PLANNING PERSONNEL (CALENDRIER) */

.planning-section {
  max-width: 900px;
  margin: 24px auto 32px;
  padding: 24px 24px 28px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.planning-section h1 {
  font-size: 24px;
  color: #0f172a;
  margin-bottom: 8px;
}

.planning-intro {
  font-size: 16px;
  color: #4b5563;
  margin-bottom: 16px;
}

/* En-tête mois */
.planning-month-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}

.planning-month-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.planning-month-btn {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background-color: #f9fafb;
  color: #9ca3af;
  font-size: 16px;
}

.planning-month-btn-disabled {
  cursor: default;
}

/* Grille calendrier */
.planning-calendar {
  display: grid;
  grid-template-rows: auto;
  row-gap: 6px;
}

/* Ligne de jours */
.planning-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: 6px;
}

/* En-tête jours de la semaine */
.planning-row-header div {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #4b5563;
  padding-bottom: 4px;
}

/* Case jour */
.planning-day {
  min-height: 90px;
  background-color: #f9fafb;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 6px 6px 8px;
  position: relative;
  font-size: 13px;
  color: #374151;
}

.planning-day.empty {
  background-color: transparent;
  border: none;
}

/* Numéro du jour */
.day-number {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

/* Événements dans le jour */
.planning-event {
  margin-top: 4px;
  padding: 3px 5px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.3;
}

.planning-event-activity {
  background-color: #dbeafe;
  color: #1d4ed8;
}

/* Légende */
.planning-legend {
  margin-top: 12px;
  font-size: 14px;
  color: #374151;
}

.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-right: 4px;
}

.legend-dot.activity {
  background-color: #1d4ed8;
}

@media (max-width: 700px) {
  .planning-section {
    margin: 16px;
    padding: 18px 10px 24px;
  }

  .planning-day {
    min-height: 70px;
    padding: 4px;
    font-size: 12px;
  }

  .day-number {
    font-size: 13px;
  }
}
.planning-month-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4b5563;
}

/* PAGE PRISE DE TÉLÉRENDEZ-VOUS */

.tele-section {
  max-width: 900px;
  margin: 24px auto 32px;
  padding: 24px 24px 28px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.tele-section h1 {
  font-size: 24px;
  color: #0f172a;
  margin-bottom: 8px;
}

.tele-intro {
  font-size: 16px;
  color: #4b5563;
  margin-bottom: 16px;
}

/* Liste médecins */
.tele-doctors {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.tele-doctor-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f9fafb;
  border-radius: 16px;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
}

.tele-doctor-info {
  max-width: 70%;
}

.tele-doctor-name {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}

.tele-doctor-specialty {
  font-size: 14px;
  color: #2563eb;
  margin-bottom: 4px;
}

.tele-doctor-details {
  font-size: 14px;
  color: #4b5563;
}

/* Bouton choisir médecin */
.tele-doctor-choose-btn {
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background-color: #e5e7eb;
  color: #111827;
  transition: background-color 0.1s ease;
}

.tele-doctor-choose-btn:hover,
.tele-doctor-choose-btn:focus {
  background-color: #d1d5db;
}

/* Section choix créneau */
.tele-slot-section {
  margin-top: 6px;
  padding: 16px 18px 18px;
  background-color: #eef2ff;
  border-radius: 16px;
}

.tele-slot-section h2 {
  font-size: 18px;
  color: #0f172a;
  margin-bottom: 6px;
}

.tele-slot-intro {
  font-size: 15px;
  color: #374151;
  margin-bottom: 10px;
}

.tele-slot-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tele-form-group label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
}

.tele-form-group input[type="date"],
.tele-form-group select,
.tele-form-group textarea {
  width: 100%;
  font-size: 15px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  outline: none;
  background-color: #ffffff;
}

.tele-form-group input:focus,
.tele-form-group select:focus,
.tele-form-group textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}

/* Bouton de confirmation */
.tele-submit-btn {
  margin-top: 6px;
  align-self: flex-start;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background-color: #f97316;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.35);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    background-color 0.1s ease;
}

.tele-submit-btn:hover,
.tele-submit-btn:focus {
  background-color: #ea580c;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(248, 113, 22, 0.4);
}

.tele-small-note {
  font-size: 13px;
  color: #4b5563;
  margin-top: 6px;
}

/* Aide */
.tele-help {
  margin-top: 14px;
  padding: 12px 14px 14px;
  background-color: #e5f2ff;
  border-radius: 16px;
  text-align: center;
  font-size: 15px;
  color: #374151;
}

.tele-help p {
  margin-bottom: 8px;
}

@media (max-width: 600px) {
  .tele-section {
    margin: 16px;
    padding: 18px 16px 24px;
  }

  .tele-doctor-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .tele-doctor-info {
    max-width: 100%;
  }

  .tele-doctor-choose-btn {
    align-self: flex-end;
  }
}

.dashboard-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

/* PAGE CONSEILS (ARTICLES + FILTRES) */

.advice-section {
  max-width: 1000px;
  margin: 24px auto 32px;
  padding: 24px 24px 28px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.advice-section h1 {
  font-size: 24px;
  color: #0f172a;
  margin-bottom: 8px;
}

.advice-intro {
  font-size: 16px;
  color: #4b5563;
  margin-bottom: 16px;
}

/* Filtres */

.advice-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.advice-filter-btn {
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  color: #111827;
  cursor: pointer;
}

.advice-filter-btn-active {
  background-color: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

/* Liste d’articles */

.advice-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.advice-card {
  background-color: #f9fafb;
  border-radius: 16px;
  padding: 14px 16px 16px;
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
}

.advice-tag {
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  margin-bottom: 4px;
}

.advice-card h2 {
  font-size: 16px;
  color: #0f172a;
  margin-bottom: 6px;
}

.advice-excerpt {
  font-size: 14px;
  color: #4b5563;
  margin-bottom: 10px;
}

/* Lien lire l’article */

.advice-link {
  margin-top: auto;
  align-self: flex-start;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  background-color: #f97316;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(249, 115, 22, 0.3);
}

/* Aide */

.advice-help {
  margin-top: 18px;
  padding: 12px 14px 14px;
  background-color: #e5f2ff;
  border-radius: 16px;
  text-align: center;
  font-size: 15px;
  color: #374151;
}

.advice-help p {
  margin-bottom: 8px;
}

@media (max-width: 600px) {
  .advice-section {
    margin: 16px;
    padding: 18px 16px 24px;
  }
}

.btn-floating-conseils,
.btn-floating-apropos {
  position: fixed;
  left: 24px; /* même colonne à gauche */
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 999px;
  background-color: red; /* temporaire : pour bien les voir */
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
  z-index: 9999;
}

/* bouton du bas */
.btn-floating-apropos {
  bottom: 24px;
}

/* bouton du haut */
.btn-floating-conseils {
  bottom: 70px; /* plus haut que 24px ⇒ au-dessus */
}

.messages-section {
  max-width: 800px;
  margin: 40px auto;
  padding: 24px;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.messages-intro {
  margin-top: 8px;
  margin-bottom: 24px;
  color: #4b5563;
  font-size: 15px;
}

.messages-thread {
  max-height: 400px;
  padding: 16px;
  margin-bottom: 24px;
  background-color: #f3f4f6;
  border-radius: 12px;
  overflow-y: auto;
}

/* Messages génériques */
.message {
  margin-bottom: 16px;
}

.message-meta {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}

/* Bulle de message */
.message-bubble {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.4;
}

/* Message du salarié SH (à gauche) */
.message-from-sh .message-bubble {
  background-color: #e5f0ff;
  color: #1f2933;
}

/* Message de l’utilisateur (à droite) */
.message-from-user {
  text-align: right;
}

.message-from-user .message-bubble {
  background-color: #22c55e;
  color: #ffffff;
}

/* Formulaire d’envoi */
.messages-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.messages-label {
  font-size: 14px;
  color: #374151;
}

.messages-form textarea {
  resize: vertical;
  min-height: 80px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 14px;
  font-family: inherit;
}

.messages-send-btn {
  align-self: flex-end;
  margin-top: 4px;
}

.alert-message {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background-color: #e5f0ff;
  border-radius: 12px;
  margin-bottom: 24px;
}

.alert-icon {
  font-size: 22px;
}

.alert-text p {
  margin: 0;
  font-size: 14px;
  color: #1f2933;
}

.alert-link {
  font-size: 14px;
  color: #2563eb;
  text-decoration: underline;
}

.help-block {
  margin-top: 32px;
  padding: 20px 24px;
  background-color: #f9fafb;
  border-radius: 16px;
}

.help-block h2 {
  margin: 0 0 8px;
  font-size: 18px;
}

.help-block p {
  margin: 0 0 16px;
  color: #4b5563;
  font-size: 14px;
}

.notifications-section {
  max-width: 900px;
  margin: 40px auto;
  padding: 24px;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.notifications-intro {
  margin-top: 8px;
  margin-bottom: 24px;
  color: #4b5563;
  font-size: 15px;
}

.notifications-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.notifications-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
}

.notification-unread {
  background-color: #e5f0ff;
  border-color: #bfdbfe;
}

.notification-icon {
  font-size: 24px;
  margin-top: 2px;
}

.notification-content {
  flex: 1;
}

.notification-title {
  margin: 0 0 4px;
  font-weight: 600;
  font-size: 14px;
  color: #111827;
}

.notification-text {
  margin: 0 0 6px;
  font-size: 13px;
  color: #4b5563;
}

.notification-meta {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
}

.notification-link {
  font-size: 13px;
  color: #2563eb;
  font-weight: 500;
  text-decoration: underline;
  white-space: nowrap;
}

/* Boutons clairs */
.btn.btn-light {
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background-color: #f9fafb;
  cursor: pointer;
}

/* Overlay général */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fond semi-transparent */
.tutorial-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.6);
}

/* Boîte centrale */
.tutorial-modal {
  position: relative;
  max-width: 520px;
  width: 90%;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 24px 24px 18px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.35);
  z-index: 1;
}

.tutorial-modal h2 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 20px;
}

.tutorial-text {
  margin: 0 0 12px;
  font-size: 14px;
  color: #4b5563;
}

.tutorial-steps {
  margin: 0 0 16px 18px;
  font-size: 14px;
  color: #374151;
}

.tutorial-steps li {
  margin-bottom: 6px;
}

/* Boutons */
.tutorial-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.btn.btn-light {
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background-color: #f9fafb;
  cursor: pointer;
}

.btn.btn-green {
  padding: 6px 14px;
  font-size: 14px;
  border-radius: 999px;
  border: none;
  background-color: #22c55e;
  color: #ffffff;
  cursor: pointer;
}

.settings-page {
  max-width: 800px;
  margin: 40px auto;
  padding: 24px;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.settings-page h1 {
  margin-top: 0;
  margin-bottom: 8px;
}

.settings-intro {
  margin: 0 0 24px;
  font-size: 15px;
  color: #4b5563;
}

.settings-block {
  padding: 18px 0;
  border-top: 1px solid #e5e7eb;
}

.settings-block:first-of-type {
  border-top: none;
}

.settings-block h2 {
  margin: 0 0 4px;
  font-size: 18px;
}

.settings-block-desc {
  margin: 0 0 16px;
  font-size: 14px;
  color: #6b7280;
}

.settings-field {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-field label {
  font-size: 14px;
  color: #374151;
}

.settings-field select {
  max-width: 260px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 14px;
}

.settings-toggle {
  margin-bottom: 8px;
}

.settings-toggle label {
  font-size: 14px;
  color: #374151;
}

.settings-toggle input[type="checkbox"] {
  margin-right: 6px;
}

.settings-actions {
  margin-top: 24px;
  text-align: right;
}
.floating-settings-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background-color: #22c55e;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.25);
  z-index: 1500;
}

.floating-settings-btn:hover {
  background-color: #16a34a;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #374151;
}

/* Styles du switch (inspiré d’un toggle classique) */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

/* cacher le checkbox natif */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* fond du slider */
.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #d1d5db;
  border-radius: 999px;
  transition: 0.3s;
}

/* cercle interne */
.slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: 0.3s;
}

/* état ON (EN) */
.switch input:checked + .slider {
  background-color: #22c55e;
}

.switch input:checked + .slider::before {
  transform: translateX(20px);
}
.quote-status-pending {
  color: #b45309;
}