html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  /* Couleur de texte par défaut harmonisée avec Tailwind (text-gray-700) */
  color: #374151; /* gris foncé, évite le noir pur */
}


/* Texte vert à l’intérieur des champs date */
/* Conserver la couleur de texte standard dans la zone de saisie */
/* Pas de modification de la couleur du texte : la classe Tailwind appliquée déterminera la teinte */

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Couleur de police unifiée dans les champs de saisie */

input, textarea, select {
  color: inherit;            /* même teinte que `body` (#374151) */
}

/* Forcer les contrôles natifs date en thème clair */
input[type="date"] {
  background-color: #ffffff;
  color-scheme: light;
}

/* Harmonise le pictogramme calendrier (Chrome / Edge) */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(39%) sepia(97%) saturate(520%) hue-rotate(110deg) brightness(91%) contrast(92%);
  cursor: pointer;
}

/* Overlay format FR pour les champs date natifs */
.fr-date-wrapper {
  position: relative;
  border-radius: 1rem;          /* arrondi cohérent avec rounded-2xl */
  overflow: hidden;             /* évite les angles carrés sur l'overlay */
}

.fr-date-wrapper input[type="date"] {
  position: relative;
  z-index: 2;
  color: transparent;
  caret-color: #111827;
  background-color: transparent;
  border-radius: 1rem;
}

.fr-date-wrapper input[type="date"]::-webkit-datetime-edit,
.fr-date-wrapper input[type="date"]::-webkit-datetime-edit-text,
.fr-date-wrapper input[type="date"]::-webkit-datetime-edit-month-field,
.fr-date-wrapper input[type="date"]::-webkit-datetime-edit-day-field,
.fr-date-wrapper input[type="date"]::-webkit-datetime-edit-year-field {
  color: transparent;
}

.fr-date-wrapper input[type="date"]::placeholder {
  color: transparent;
}

.fr-date-overlay {
  position: absolute;
  inset: 1px;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  color: #4b5563; /* text-gray-600 pour plus de contraste */
  background-color: #f8fafc; /* léger gris pour détacher le champ du fond */
  border-radius: 1rem;
  pointer-events: none;
  z-index: 3;
  transition: color 0.15s ease;
}

.fr-date-wrapper.fr-date-has-value .fr-date-overlay {
  color: #111827; /* text-gray-900 */
  font-weight: 500;
}

.fr-date-wrapper.fr-date-has-value input[type="date"] {
  caret-color: #111827;
}

.fr-date-wrapper:focus-within .fr-date-overlay {
  color: #0f172a;
  box-shadow: inset 0 0 0 1px #0f766e;
  background-color: #ffffff;
}

/* Flatpickr (calendrier JS) – désactiver jours et les barrer visuellement */
.flatpickr-day.disabled,
.flatpickr-day.flatpickr-disabled {
  text-decoration: line-through;
  color: #9CA3AF !important; /* gris */
}

/* Placeholders un peu plus clairs pour différencier la valeur par défaut */
input::placeholder,
textarea::placeholder {
  color: #9CA3AF;            /* équivalent Tailwind text-gray-400 */
}

/* Firefox – ajout de l’alias nécessaire */
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #9CA3AF;
  opacity: 1; /* pour éviter la transparence par défaut de Firefox */
}

/* Champs de recherche : contraste légèrement renforcé sur le fond et la bordure */
.search-contrast {
  background-color: #f8fafc;           /* gris très clair pour faire ressortir le champ sur fond blanc */
  border: 1px solid #cbd5e1;           /* border-gray-300 */
  color: #0f172a;                      /* texte plus contrasté (slate-900) */
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.05),
              0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.search-contrast:focus {
  background-color: #ffffff;
  border-color: #0f766e;                /* vert plus dense pour les états actifs */
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.18);
}

.search-contrast::placeholder {
  color: #4b5563;                       /* placeholder plus lisible que le gris clair global */
}

.search-contrast:disabled {
  background-color: #e5e7eb;
  cursor: not-allowed;
}

/* -------- Bannière cookies -------- */
.cookie-consent {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: min(420px, calc(100% - 2rem));
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  padding: 1.25rem;
  z-index: 6000;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (max-width: 640px) {
  .cookie-consent {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    width: auto;
  }
}

.cookie-consent__content {
  line-height: 1.5;
}

.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cookie-consent__btn {
  flex: 1 1 120px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  padding: 0.65rem 1.25rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: #374151;
  background-color: #fff;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cookie-consent__btn:hover {
  border-color: #111827;
  color: #111827;
}

.cookie-consent__btn--primary {
  background-color: #006a4e;
  border-color: #006a4e;
  color: #fff;
}

.cookie-consent__btn--primary:hover {
  background-color: #00523c;
  border-color: #00523c;
}

.cookie-consent-manage {
  font-size: 0.85rem;
}

/* Icône Instagram dans la top bar */
.header-ig-logo {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.05);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.header-ig-logo svg {
  width: 18px;
  height: 18px;
  fill: #ffffff;
}

.header-ig-logo:hover {
  border-color: rgba(255, 255, 255, 0.9);
  background-color: rgba(255, 255, 255, 0.25);
}