/* Les @import doivent précéder toute autre règle : placés après les directives
   @tailwind, PostCSS les supprime silencieusement. */

/* Modern TipTap Editor Styles */

.tiptap-editor-wrapper {
  border-radius: 0.75rem;
  overflow: visible;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  position: relative;
}

.simple-editor-menubar {
  align-items: center;
  background: #1a1b26;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem 0.75rem 0 0;
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
  padding: 0.5rem;
  gap: 0.125rem;
  min-height: 2.5rem;
}

.simple-editor-menubar .menu-item {
  background: transparent;
  border: 0;
  border-radius: 0.375rem;
  color: #9ca3af;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  height: 2rem;
  padding: 0 0.5rem;
  min-width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.simple-editor-menubar .menu-item svg {
  width: 1.125rem;
  height: 1.125rem;
}

.simple-editor-menubar .menu-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.simple-editor-menubar .menu-item.is-active {
  background-color: #5b21b6;
  color: #fff;
}

.simple-editor-menubar .menu-item.is-active:hover {
  background-color: #6d28d9;
}

.simple-editor-menubar .menu-item.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.simple-editor-menubar .menu-item.is-disabled:hover {
  background-color: transparent;
  color: #9ca3af;
}

.simple-editor-menubar .separator {
  background-color: rgba(255, 255, 255, 0.08);
  height: 1.5rem;
  margin: 0 0.25rem;
  width: 1px;
}

.ProseMirror {
  outline: none;
  background: transparent;
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  line-height: 1.5;
}

/* Admin & dark surfaces (body n'a pas la classe .dark) */

.tiptap-field .ProseMirror {
  color: #f3f4f6;
}

.tiptap-field .ProseMirror h1,
.tiptap-field .ProseMirror h2,
.tiptap-field .ProseMirror h3,
.tiptap-field .ProseMirror strong {
  color: #fff;
}

.tiptap-field .ProseMirror a {
  color: #86efac;
}

.tiptap-field .ProseMirror p.is-editor-empty:first-child::before {
  color: rgba(255, 255, 255, 0.4);
}

.tiptap-field .ProseMirror blockquote {
  border-left-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.85);
}

.tiptap-field .ProseMirror hr {
  background-color: rgba(255, 255, 255, 0.15);
}

.tiptap-field .ProseMirror code {
  background-color: rgba(255, 255, 255, 0.1);
  color: #f3f4f6;
}

.tiptap-field .simple-editor-menubar {
  background: #1a1b26;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Dark theme for light mode */

.dark .tiptap-editor-wrapper {
  background: #1a1b26;
}

.dark .simple-editor-menubar {
  background: #1a1b26;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.dark .ProseMirror {
  background: #0f1014;
  color: #e5e7eb;
}

.ProseMirror p.is-editor-empty:first-child::before {
  color: #adb5bd;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

/* Prose styling */

.ProseMirror h1 {
  font-size: 1.875rem;
  font-weight: bold;
  line-height: 2.25rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.ProseMirror h1:first-child {
  margin-top: 0;
}

.ProseMirror h2 {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 2rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.ProseMirror h2:first-child {
  margin-top: 0;
}

.ProseMirror p {
  margin-bottom: 0.5rem;
}

.ProseMirror p:last-child {
  margin-bottom: 0;
}

.ProseMirror ul, .ProseMirror ol {
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
  margin-top: 0.25rem;
}

.ProseMirror ul {
  list-style-type: disc;
}

.ProseMirror ol {
  list-style-type: decimal;
}

.ProseMirror li {
  margin-bottom: 0.125rem;
  display: list-item;
}

.ProseMirror li p {
  margin-bottom: 0;
}

.ProseMirror blockquote {
  border-left: 4px solid #e5e7eb;
  padding-left: 1rem;
  margin-left: 0;
  margin-right: 0;
  font-style: italic;
  margin-bottom: 1rem;
}

.ProseMirror hr {
  border: none;
  height: 2px;
  background-color: #e5e7eb;
  margin: 2rem 0;
}

.ProseMirror code {
  background-color: #f3f4f6;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
}

.dark .ProseMirror code {
  background-color: #374151;
}

/* Placeholder node style */

.ProseMirror .placeholder-node {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.85em;
  font-weight: 500;
  display: inline-block;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
  margin: 0 2px;
  vertical-align: middle;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dark .ProseMirror .placeholder-node {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

/* Dropdown styles */

.dropdown-container {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: auto;
}

.dropdown-toggle span {
  font-size: 0.875rem;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 1000;
  min-width: 250px;
  background: #1a1b26;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.375rem;
  padding: 0.5rem;
  display: none;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  max-height: 300px;
  overflow-y: auto;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  color: #e5e7eb;
  text-align: left;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}

.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.dropdown-item.is-active {
  background: #5b21b6;
  color: #fff;
}

.dropdown-item svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* Placeholder dropdown styles */

.placeholder-item {
  width: 100%;
}

.placeholder-label {
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: #e5e7eb;
}

.placeholder-code {
  font-size: 0.75rem;
  color: #9ca3af;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: rgba(99, 102, 241, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}

.dropdown-item.is-active .placeholder-code {
  color: #e5e7eb;
  background: rgba(99, 102, 241, 0.2);
}

/* Placeholder button style */

.placeholder-button {
  background: #5b21b6;
  color: #fff;
}

.placeholder-button:hover {
  background: #6d28d9;
}

/* Task list styles */

.ProseMirror ul[data-type="taskList"] {
  list-style: none;
  padding: 0;
}

.ProseMirror ul[data-type="taskList"] li {
  display: flex;
  align-items: flex-start;
}

.ProseMirror ul[data-type="taskList"] li > label {
  flex: 0 0 auto;
  margin-right: 0.5rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: #667eea;
}

.ProseMirror ul[data-type="taskList"] li > div {
  flex: 1 1 auto;
}

/* Ensure buttons in editor are visible */

.ProseMirror button {
  background: #667eea !important;
  color: white !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.375rem !important;
  border: none !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ProseMirror button:hover {
  background: #764ba2 !important;
}

/* Ensure checkboxes are visible */

.ProseMirror input[type="checkbox"] {
  width: 1rem !important;
  height: 1rem !important;
  accent-color: #667eea !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

/* ============================================
   APERÇU FIDÈLE AU SITE

   La zone d'édition doit rendre le contenu exactement comme la classe
   .cms-content le fait sur le site public : titres verts, puces vertes,
   mêmes rythmes verticaux et mêmes couleurs de texte.
   ============================================ */

.tiptap-field .ProseMirror {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

.tiptap-field .ProseMirror h2,
.tiptap-field .ProseMirror h3 {
  color: var(--color-green-500);
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.tiptap-field .ProseMirror h2 {
  font-size: 1.5rem;
  line-height: 2rem;
}

.tiptap-field .ProseMirror h3 {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.tiptap-field .ProseMirror h2:first-child,
.tiptap-field .ProseMirror h3:first-child {
  margin-top: 0;
}

.tiptap-field .ProseMirror p {
  margin-bottom: 0.75rem;
}

.tiptap-field .ProseMirror p:last-child {
  margin-bottom: 0;
}

.tiptap-field .ProseMirror ul {
  list-style-type: disc;
  padding-left: 1.25rem;
  margin: 0.75rem 0;
}

.tiptap-field .ProseMirror ol {
  list-style-type: decimal;
  padding-left: 1.25rem;
  margin: 0.75rem 0;
}

.tiptap-field .ProseMirror li {
  display: list-item;
  margin-bottom: 0.375rem;
}

.tiptap-field .ProseMirror li::marker {
  color: var(--color-green-500);
}

.tiptap-field .ProseMirror strong {
  color: #fff;
  font-weight: 700;
}

.tiptap-field .ProseMirror a {
  color: var(--color-green-500);
  text-decoration: underline;
}

/* ============================================
   WIDGET DE CANDIDATURE LUCYHR

   Le widget est servi par LucyHR avec sa propre feuille de styles claire,
   injectée dans la page après nos assets. Les sélecteurs ci-dessous sont
   préfixés par le conteneur du contrôleur Stimulus afin d'avoir une
   spécificité supérieure et d'aligner le widget sur le thème sombre du site.
   ============================================ */

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget {
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  border-radius: 1.5rem;
  color: var(--color-white);
  font-family: var(--font-body);
}

/* --- Titres et textes d'accompagnement --- */

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget h2 {
  color: var(--color-white);
}

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .subtitle,
[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .file-upload-hint,
[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .file-size,
[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .files-count,
[data-controller="lucyhr-widget"] .lucy-cv-upload-widget p.additional-files-help {
  color: var(--color-white-muted);
}

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget label,
[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .file-name,
[data-controller="lucyhr-widget"] .lucy-cv-upload-widget p.additional-files-title,
[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .checkbox-label span {
  color: var(--color-white);
}

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .required {
  color: #f87171;
}

/* --- Champs de saisie, alignés sur le thème de formulaire du site --- */

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget input[type="text"],
[data-controller="lucyhr-widget"] .lucy-cv-upload-widget input[type="email"],
[data-controller="lucyhr-widget"] .lucy-cv-upload-widget input[type="tel"],
[data-controller="lucyhr-widget"] .lucy-cv-upload-widget input[type="date"],
[data-controller="lucyhr-widget"] .lucy-cv-upload-widget input[type="number"],
[data-controller="lucyhr-widget"] .lucy-cv-upload-widget input[type="file"],
[data-controller="lucyhr-widget"] .lucy-cv-upload-widget select,
[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .additional-file-item .file-name-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.75rem;
  color: var(--color-white);
}

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget input::-moz-placeholder, [data-controller="lucyhr-widget"] .lucy-cv-upload-widget textarea::-moz-placeholder {
  color: rgba(255, 255, 255, 0.4);
}

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget input::placeholder,
[data-controller="lucyhr-widget"] .lucy-cv-upload-widget textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget input:focus,
[data-controller="lucyhr-widget"] .lucy-cv-upload-widget select:focus,
[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .additional-file-item .file-name-input:focus {
  border-color: var(--color-green-500);
  box-shadow: none;
  outline: none;
}

/* Les listes déroulantes natives rendent leurs options sur fond système */

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget select option {
  background: var(--color-neutral-900);
  color: var(--color-white);
}

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget input[type="checkbox"] {
  accent-color: var(--color-green-500);
}

/* --- Zone de dépôt du CV --- */

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .file-upload-zone {
  background: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(16, 185, 129, 0.6);
}

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .file-upload-zone:hover,
[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .file-upload-zone.dragover {
  background: rgba(16, 185, 129, 0.1);
  border-color: var(--color-green-500);
}

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .file-upload-icon,
[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .file-upload-text {
  color: var(--color-green-500);
}

/* --- Fichiers joints --- */

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .file-preview,
[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .additional-files-section,
[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .additional-file-item,
[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .privacy-notice {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--color-white-muted);
}

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .file-icon {
  background: var(--color-green-500);
  color: var(--color-white);
}

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .add-file-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(16, 185, 129, 0.6);
  color: var(--color-green-500);
}

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .add-file-btn:hover {
  background: rgba(16, 185, 129, 0.1);
}

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .additional-file-item .file-input-label {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .remove-file {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .remove-file:hover {
  background: rgba(248, 113, 113, 0.25);
}

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .privacy-link {
  color: var(--color-green-500);
}

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .privacy-link:hover {
  color: var(--color-white);
}

/* --- Bouton d'envoi et progression --- */

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .submit-btn {
  background: var(--color-green-500);
  color: var(--color-white);
}

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .submit-btn:hover:not(:disabled) {
  background: var(--color-green-700);
}

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .progress-bar {
  background: rgba(255, 255, 255, 0.1);
}

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .progress-fill {
  background: var(--color-green-500);
}

/* --- Messages de retour --- */

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .message.success {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #6ee7b7;
}

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget .message.error {
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.3);
  color: #fca5a5;
}

/* --- Adaptation mobile ---
   Le widget prévoit une bascule en une colonne sous 768 px, mais conserve une
   marge propre qui décentre le bloc, une zone de dépôt très haute et une icône
   suivie de 3 rem de marge. On resserre l'ensemble. */

@media (max-width: 768px) {
  [data-controller="lucyhr-widget"] .lucy-cv-upload-widget {
    margin: 0;
    padding: 1.25rem;
    border-radius: 1rem;
  }

  [data-controller="lucyhr-widget"] .lucy-cv-upload-widget .file-upload-zone {
    padding: 1.5rem 1rem;
  }

  [data-controller="lucyhr-widget"] .lucy-cv-upload-widget .file-upload-icon {
    margin-bottom: 0.75rem;
    font-size: 2rem;
  }

  [data-controller="lucyhr-widget"] .lucy-cv-upload-widget .file-upload-text {
    font-size: 1rem;
  }

  /* Évite le zoom automatique de Safari sur les champs sous 16 px */

  [data-controller="lucyhr-widget"] .lucy-cv-upload-widget input,
    [data-controller="lucyhr-widget"] .lucy-cv-upload-widget select {
    font-size: 1rem;
  }

  [data-controller="lucyhr-widget"] .lucy-cv-upload-widget .file-preview,
    [data-controller="lucyhr-widget"] .lucy-cv-upload-widget .additional-file-item {
    padding: 0.75rem;
  }
}

/* Aucun élément ne doit provoquer de défilement horizontal */

[data-controller="lucyhr-widget"] .lucy-cv-upload-widget * {
  max-width: 100%;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.bottom-12 {
  bottom: 3rem;
}

.left-1\/2 {
  left: 50%;
}

.start-2 {
  inset-inline-start: 0.5rem;
}

.top-0 {
  top: 0px;
}

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-50 {
  z-index: 50;
}

.z-\[100\] {
  z-index: 100;
}

.z-\[101\] {
  z-index: 101;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.m-0 {
  margin: 0px;
}

.-mx-2 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-16 {
  margin-top: 4rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.aspect-\[16\/9\] {
  aspect-ratio: 16/9;
}

.aspect-\[4\/5\] {
  aspect-ratio: 4/5;
}

.h-0\.5 {
  height: 0.125rem;
}

.h-1 {
  height: 0.25rem;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-20 {
  height: 5rem;
}

.h-32 {
  height: 8rem;
}

.h-36 {
  height: 9rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[120px\] {
  height: 120px;
}

.h-\[150px\] {
  height: 150px;
}

.h-\[200px\] {
  height: 200px;
}

.h-\[300px\] {
  height: 300px;
}

.h-\[calc\(100vh-3rem\)\] {
  height: calc(100vh - 3rem);
}

.h-full {
  height: 100%;
}

.max-h-40 {
  max-height: 10rem;
}

.max-h-\[80vh\] {
  max-height: 80vh;
}

.max-h-full {
  max-height: 100%;
}

.min-h-0 {
  min-height: 0px;
}

.min-h-\[120px\] {
  min-height: 120px;
}

.min-h-\[150px\] {
  min-height: 150px;
}

.min-h-\[200px\] {
  min-height: 200px;
}

.min-h-\[300px\] {
  min-height: 300px;
}

.min-h-\[30vh\] {
  min-height: 30vh;
}

.min-h-\[420px\] {
  min-height: 420px;
}

.min-h-screen {
  min-height: 100vh;
}

.w-10 {
  width: 2.5rem;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 3.5rem;
}

.w-20 {
  width: 5rem;
}

.w-32 {
  width: 8rem;
}

.w-5 {
  width: 1.25rem;
}

.w-52 {
  width: 13rem;
}

.w-56 {
  width: 14rem;
}

.w-6 {
  width: 1.5rem;
}

.w-7 {
  width: 1.75rem;
}

.w-8 {
  width: 2rem;
}

.w-9 {
  width: 2.25rem;
}

.w-\[380px\] {
  width: 380px;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0px;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.max-w-7xl {
  max-width: 80rem;
}

.max-w-full {
  max-width: 100%;
}

.max-w-lg {
  max-width: 32rem;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-none {
  max-width: none;
}

.max-w-xl {
  max-width: 36rem;
}

.flex-1 {
  flex: 1 1 0%;
}

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

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

.border-collapse {
  border-collapse: collapse;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.animate-\[fade-up_0\.8s_cubic-bezier\(0\.4\2c 0\2c 0\.2\2c 1\)_0\.1s_forwards\] {
  animation: fade-up 0.8s cubic-bezier(0.4,0,0.2,1) 0.1s forwards;
}

.animate-\[fade-up_0\.8s_cubic-bezier\(0\.4\2c 0\2c 0\.2\2c 1\)_0\.2s_forwards\] {
  animation: fade-up 0.8s cubic-bezier(0.4,0,0.2,1) 0.2s forwards;
}

.animate-\[fade-up_0\.8s_cubic-bezier\(0\.4\2c 0\2c 0\.2\2c 1\)_0\.4s_forwards\] {
  animation: fade-up 0.8s cubic-bezier(0.4,0,0.2,1) 0.4s forwards;
}

.animate-\[fade-up_0\.8s_cubic-bezier\(0\.4\2c 0\2c 0\.2\2c 1\)_0\.6s_forwards\] {
  animation: fade-up 0.8s cubic-bezier(0.4,0,0.2,1) 0.6s forwards;
}

.animate-\[fade-up_0\.8s_cubic-bezier\(0\.4\2c 0\2c 0\.2\2c 1\)_1\.35s_forwards\] {
  animation: fade-up 0.8s cubic-bezier(0.4,0,0.2,1) 1.35s forwards;
}

.animate-\[fade-up_0\.8s_cubic-bezier\(0\.4\2c 0\2c 0\.2\2c 1\)_1\.5s_forwards\] {
  animation: fade-up 0.8s cubic-bezier(0.4,0,0.2,1) 1.5s forwards;
}

.animate-\[fade-up_0\.8s_cubic-bezier\(0\.4\2c 0\2c 0\.2\2c 1\)_1\.8s_forwards\] {
  animation: fade-up 0.8s cubic-bezier(0.4,0,0.2,1) 1.8s forwards;
}

.animate-\[fade-up_0\.8s_cubic-bezier\(0\.4\2c 0\2c 0\.2\2c 1\)_2s_forwards\] {
  animation: fade-up 0.8s cubic-bezier(0.4,0,0.2,1) 2s forwards;
}

.animate-\[fade-up_0\.8s_cubic-bezier\(0\.4\2c 0\2c 0\.2\2c 1\)_forwards\] {
  animation: fade-up 0.8s cubic-bezier(0.4,0,0.2,1) forwards;
}

.animate-\[fade-up_1s_cubic-bezier\(0\.4\2c 0\2c 0\.2\2c 1\)_forwards\] {
  animation: fade-up 1s cubic-bezier(0.4,0,0.2,1) forwards;
}

.animate-\[letter-appear_0\.5s_cubic-bezier\(0\.4\2c 0\2c 0\.2\2c 1\)_forwards\] {
  animation: letter-appear 0.5s cubic-bezier(0.4,0,0.2,1) forwards;
}

.cursor-pointer {
  cursor: pointer;
}

.resize {
  resize: both;
}

.list-none {
  list-style-type: none;
}

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

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

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

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

.justify-between {
  justify-content: space-between;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-y-4 {
  row-gap: 1rem;
}

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-12 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-pre-line {
  white-space: pre-line;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-b-lg {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-b-0 {
  border-bottom-width: 0px;
}

.border-l {
  border-left-width: 1px;
}

.border-r {
  border-right-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-green-500 {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.border-green-500\/30 {
  border-color: rgb(34 197 94 / 0.3);
}

.border-green-500\/40 {
  border-color: rgb(34 197 94 / 0.4);
}

.border-red-500\/20 {
  border-color: rgb(239 68 68 / 0.2);
}

.border-red-500\/30 {
  border-color: rgb(239 68 68 / 0.3);
}

.border-transparent {
  border-color: transparent;
}

.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}

.border-white\/15 {
  border-color: rgb(255 255 255 / 0.15);
}

.bg-\[rgba\(6\2c 78\2c 59\2c 0\.3\)\] {
  background-color: rgba(6,78,59,0.3);
}

.bg-black\/25 {
  background-color: rgb(0 0 0 / 0.25);
}

.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}

.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-green-500\/10 {
  background-color: rgb(34 197 94 / 0.1);
}

.bg-green-500\/15 {
  background-color: rgb(34 197 94 / 0.15);
}

.bg-green-500\/20 {
  background-color: rgb(34 197 94 / 0.2);
}

.bg-green-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}

.bg-neutral-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
}

.bg-neutral-900\/60 {
  background-color: rgb(23 23 23 / 0.6);
}

.bg-neutral-900\/80 {
  background-color: rgb(23 23 23 / 0.8);
}

.bg-neutral-900\/85 {
  background-color: rgb(23 23 23 / 0.85);
}

.bg-neutral-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1));
}

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.bg-red-500\/10 {
  background-color: rgb(239 68 68 / 0.1);
}

.bg-red-500\/15 {
  background-color: rgb(239 68 68 / 0.15);
}

.bg-red-500\/20 {
  background-color: rgb(239 68 68 / 0.2);
}

.bg-transparent {
  background-color: transparent;
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}

.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-green-500 {
  --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-500\/20 {
  --tw-gradient-from: rgb(34 197 94 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-600 {
  --tw-gradient-from: #16a34a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(22 163 74 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-700 {
  --tw-gradient-from: #15803d var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(21 128 61 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-900 {
  --tw-gradient-from: #14532d var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(20 83 45 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-900\/90 {
  --tw-gradient-from: rgb(20 83 45 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(20 83 45 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-neutral-900 {
  --tw-gradient-from: #171717 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(23 23 23 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-green-900\/40 {
  --tw-gradient-to: rgb(20 83 45 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(20 83 45 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-green-950 {
  --tw-gradient-to: rgb(5 46 22 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #052e16 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-green-500 {
  --tw-gradient-to: #22c55e var(--tw-gradient-to-position);
}

.to-green-700 {
  --tw-gradient-to: #15803d var(--tw-gradient-to-position);
}

.to-green-700\/20 {
  --tw-gradient-to: rgb(21 128 61 / 0.2) var(--tw-gradient-to-position);
}

.to-green-900 {
  --tw-gradient-to: #14532d var(--tw-gradient-to-position);
}

.to-neutral-900 {
  --tw-gradient-to: #171717 var(--tw-gradient-to-position);
}

.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.fill-none {
  fill: none;
}

.stroke-current {
  stroke: currentColor;
}

.stroke-2 {
  stroke-width: 2;
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.p-0 {
  padding: 0px;
}

.p-12 {
  padding: 3rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pb-12 {
  padding-bottom: 3rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-40 {
  padding-bottom: 10rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pl-3 {
  padding-left: 0.75rem;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pt-16 {
  padding-top: 4rem;
}

.pt-24 {
  padding-top: 6rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-32 {
  padding-top: 8rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-\[0\.65rem\] {
  font-size: 0.65rem;
}

.text-\[0\.7rem\] {
  font-size: 0.7rem;
}

.text-\[0\.8rem\] {
  font-size: 0.8rem;
}

.text-\[clamp\(0\.9rem\2c 1\.5vw\2c 1rem\)\] {
  font-size: clamp(0.9rem,1.5vw,1rem);
}

.text-\[clamp\(1\.125rem\2c 2vw\2c 1\.25rem\)\] {
  font-size: clamp(1.125rem,2vw,1.25rem);
}

.text-\[clamp\(1\.25rem\2c 3vw\2c 2rem\)\] {
  font-size: clamp(1.25rem,3vw,2rem);
}

.text-\[clamp\(1\.5rem\2c 2\.5vw\2c 1\.875rem\)\] {
  font-size: clamp(1.5rem,2.5vw,1.875rem);
}

.text-\[clamp\(1\.5rem\2c 3vw\2c 2rem\)\] {
  font-size: clamp(1.5rem,3vw,2rem);
}

.text-\[clamp\(1\.75rem\2c 3vw\2c 2\.25rem\)\] {
  font-size: clamp(1.75rem,3vw,2.25rem);
}

.text-\[clamp\(1\.75rem\2c 4vw\2c 2\.5rem\)\] {
  font-size: clamp(1.75rem,4vw,2.5rem);
}

.text-\[clamp\(1rem\2c 2vw\2c 1\.125rem\)\] {
  font-size: clamp(1rem,2vw,1.125rem);
}

.text-\[clamp\(1rem\2c 2vw\2c 1\.5rem\)\] {
  font-size: clamp(1rem,2vw,1.5rem);
}

.text-\[clamp\(2\.5rem\2c 5vw\2c 4rem\)\] {
  font-size: clamp(2.5rem,5vw,4rem);
}

.text-\[clamp\(2rem\2c 4vw\2c 2\.5rem\)\] {
  font-size: clamp(2rem,4vw,2.5rem);
}

.text-\[clamp\(2rem\2c 4vw\2c 3rem\)\] {
  font-size: clamp(2rem,4vw,3rem);
}

.text-\[clamp\(3rem\2c 10vw\2c 8rem\)\] {
  font-size: clamp(3rem,10vw,8rem);
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-light {
  font-weight: 300;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.italic {
  font-style: italic;
}

.leading-loose {
  line-height: 2;
}

.leading-none {
  line-height: 1;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-green-300 {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}

.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.text-green-400\/70 {
  color: rgb(74 222 128 / 0.7);
}

.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}

.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}

.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/30 {
  color: rgb(255 255 255 / 0.3);
}

.text-white\/35 {
  color: rgb(255 255 255 / 0.35);
}

.text-white\/40 {
  color: rgb(255 255 255 / 0.4);
}

.text-white\/45 {
  color: rgb(255 255 255 / 0.45);
}

.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}

.text-white\/55 {
  color: rgb(255 255 255 / 0.55);
}

.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}

.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}

.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}

.text-white\/85 {
  color: rgb(255 255 255 / 0.85);
}

.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}

.underline {
  text-decoration-line: underline;
}

.line-through {
  text-decoration-line: line-through;
}

.no-underline {
  text-decoration-line: none;
}

.opacity-0 {
  opacity: 0;
}

.opacity-10 {
  opacity: 0.1;
}

.opacity-90 {
  opacity: 0.9;
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-green-400 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(74 222 128 / var(--tw-ring-opacity, 1));
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-300 {
  transition-duration: 300ms;
}

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */

:root {
  /* Colors */
  --color-green-50: #ecfdf5;
  --color-green-500: #10b981;
  --color-green-700: #047857;
  --color-green-900: #064e3b;
  --color-neutral-900: #0a0a0a;
  --color-white: #ffffff;
  --color-white-muted: rgba(255, 255, 255, 0.7);
  /* Typography */
  --font-display: 'Clash Display', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  /* Fluid Typography */
  --text-xs: clamp(0.75rem, 1vw, 0.875rem);
  --text-sm: clamp(0.875rem, 1.5vw, 1rem);
  --text-base: clamp(1rem, 2vw, 1.125rem);
  --text-lg: clamp(1.125rem, 2.5vw, 1.5rem);
  --text-xl: clamp(1.5rem, 3vw, 2rem);
  --text-2xl: clamp(2rem, 4vw, 3rem);
  --text-hero: clamp(2.5rem, 8vw, 6rem);
  /* Fluid Spacing */
  --space-xs: clamp(0.5rem, 2vw, 1rem);
  --space-sm: clamp(1rem, 3vw, 2rem);
  --space-md: clamp(1.5rem, 4vw, 3rem);
  --space-lg: clamp(3rem, 8vw, 6rem);
  --space-xl: clamp(4rem, 10vw, 8rem);
  /* Z-Index */
  --z-video: 1;
  --z-overlay: 2;
  --z-content: 10;
  --z-navigation: 100;
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .scroll-indicator-icon,
    .scroll-indicator-icon::before {
    animation: none !important;
  }
}

/* ============================================
   BASE STYLES
   ============================================ */

html {
  scroll-behavior: smooth;
}

/* ============================================
   FOND DE PAGE

   Reprend le dégradé noir-vert déjà utilisé par l'administration et les pages
   d'authentification. Pour tester une autre déclinaison, remplacer la valeur
   de --page-background par l'une des alternatives ci-dessous.
   ============================================ */

:root {
  /* Déclinaison A — diagonale noir → vert → noir (celle de l'administration) */
  --page-background: linear-gradient(to bottom right, #0a0a0a 0%, #052e21 50%, #0a0a0a 100%);
  /* Déclinaison B — verticale, vert en haut qui s'éteint vers le bas
    --page-background: linear-gradient(to bottom, #06342700 0%, #0a0a0a 100%), linear-gradient(to bottom, #063427 0%, #0a0a0a 70%); */
  /* Déclinaison C — vert plus soutenu et constant
    --page-background: linear-gradient(to bottom right, #052e21 0%, #064e3b 50%, #052e21 100%); */
  /* Déclinaison D — vert très discret, à peine détaché du noir
    --page-background: linear-gradient(to bottom right, #0a0a0a 0%, #04140f 50%, #0a0a0a 100%); */
}

/* ============================================
   MISE EN PAGE « BOXED »

   Le site est bridé à une largeur fixe et centré : sans cela, les visuels
   réellement pleine largeur (vidéo du hero, images de hero en object-cover,
   carte du pied de page) sont recadrés à l'extrême sur les grands écrans.
   1440px est aussi la largeur logique à laquelle l'aperçu de l'administration
   rend l'iframe en mode desktop (cms_editor_controller.js), l'aperçu reste
   donc fidèle au rendu réel.

   En dessous de cette largeur, la boîte occupe tout le viewport : le rendu
   mobile et tablette est inchangé.

   --page-surround est le fond visible de part et d'autre de la boîte. Pour
   tester une autre déclinaison, remplacer sa valeur par l'une des
   alternatives ci-dessous.
   ============================================ */

:root {
  --site-width: 1440px;
  /* Déclinaison A — noir profond, la boîte se détache sans contraste dur */
  --page-surround: #050505;
  /* Déclinaison B — noir pur, séparation maximale
    --page-surround: #000000; */
  /* Déclinaison C — gris très sombre, lecture plus « cadre photo »
    --page-surround: #121212; */
  /* Déclinaison D — vert-noir très sombre, dans la teinte de la marque
    --page-surround: #03120d; */
}

body {
  font-family: var(--font-body);
  color: var(--color-white);
  background-color: var(--page-surround);
  overflow-x: hidden;
  line-height: 1.6;
}

.site-boxed {
  position: relative;
  width: 100%;
  max-width: var(--site-width);
  margin: 0 auto;
  background-color: var(--color-neutral-900);
  background-image: var(--page-background);
  /* Attachement fixe : le dégradé ne défile pas, comme avant le passage en boxed */
  background-attachment: fixed;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* La barre de navigation reste en position: fixed — donc calée sur le viewport
   et non sur la boîte. On la recentre et on la bride à la même largeur. Poser
   un transform sur .site-boxed pour recadrer le fixed casserait la vidéo du
   hero, ce n'est pas une option. */

.site-nav {
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--site-width);
}

/* Hauteur de la barre de navigation, reconstituée depuis ses propres classes :
   logo h-11 (md:h-12) + py-3 en haut et en bas + bordure basse de 1px. */

:root {
  --nav-height: calc(2.75rem + 1.5rem + 1px);
}

@media (min-width: 768px) {
  :root {
    --nav-height: calc(3rem + 1.5rem + 1px);
  }
}

/* Pages intérieures : le contenu démarre sous la barre de navigation, pour que
   l'image de hero ne défile pas derrière elle. La classe est posée sur <main>
   et non sur la section : les calques `absolute inset-0` de l'image se
   positionnent sur la padding box de leur section, un padding sur celle-ci ne
   les décalerait donc pas, et une marge fusionnerait avec .site-boxed en
   découvrant le fond extérieur en haut de page.

   L'accueil n'a délibérément pas cette classe : sa vidéo plein écran doit
   rester visible sous la barre translucide. */

.main-below-nav {
  padding-top: var(--nav-height);
}

/* Titre et accroche des heros de pages intérieures. Le texte est posé sur une
   photographie dont on ne maîtrise ni la luminosité ni le cadrage. Le voile de
   la section est volontairement léger pour ne pas éteindre l'image : c'est donc
   cette ombre, courte et serrée, qui porte l'essentiel de la lisibilité sur les
   zones claires, sans créer de halo visible. */

.page-hero-text {
  text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.6),
        0 2px 6px rgba(0, 0, 0, 0.45);
}

/* Lien d'évitement : masqué visuellement mais accessible au clavier. Sans ces
   règles il occupait une ligne en haut de la boîte, invisible sous la barre de
   navigation, et décalait d'autant le haut du contenu. */

.skip-to-content {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-to-content:focus {
  position: fixed;
  left: 50%;
  top: 1rem;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  z-index: 200;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  background: var(--color-green-500);
  color: #fff;
  font-weight: 600;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes letter-appear {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes subtle-zoom {
  from {
    transform: translate(-50%, -50%) scale(1);
  }

  to {
    transform: translate(-50%, -50%) scale(1.05);
  }
}

@keyframes scroll-bounce {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(8px);
  }
}

@keyframes scroll-dot {
  0%, 100% {
    opacity: 0;
    transform: translateX(-50%) translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) translateY(8px);
  }
}

/* ============================================
   HERO VIDEO (Special effects)
   ============================================ */

.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: var(--z-video);
  -o-object-fit: cover;
     object-fit: cover;
  animation: subtle-zoom 10s ease-out forwards;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
        ellipse at center,
        rgba(6, 78, 59, 0.25) 0%,
        rgba(3, 40, 30, 0.5) 100%
    );
  z-index: var(--z-overlay);
}

/* Letter animation delays for hero headline */

.hero-headline span:nth-child(1) {
  animation-delay: 0.5s;
}

.hero-headline span:nth-child(2) {
  animation-delay: 0.55s;
}

.hero-headline span:nth-child(3) {
  animation-delay: 0.6s;
}

.hero-headline span:nth-child(4) {
  animation-delay: 0.65s;
}

.hero-headline span:nth-child(5) {
  animation-delay: 0.7s;
}

.hero-headline span:nth-child(6) {
  animation-delay: 0.75s;
}

.hero-headline span:nth-child(7) {
  animation-delay: 0.8s;
}

.hero-headline span:nth-child(8) {
  animation-delay: 0.85s;
}

.hero-headline span:nth-child(9) {
  animation-delay: 0.9s;
}

.hero-headline span:nth-child(10) {
  animation-delay: 0.95s;
}

.hero-headline span:nth-child(11) {
  animation-delay: 1.0s;
}

.hero-headline span:nth-child(12) {
  animation-delay: 1.05s;
}

.hero-headline span:nth-child(13) {
  animation-delay: 1.1s;
}

.hero-headline span:nth-child(14) {
  animation-delay: 1.15s;
}

.hero-headline span:nth-child(15) {
  animation-delay: 1.2s;
}

/* ============================================
   GLASSMORPHISM EFFECTS
   ============================================ */

.glass-card {
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.glass-card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 48px 0 rgba(16, 185, 129, 0.3);
  border-color: var(--color-green-500);
}

/* Cartes d'appel à l'action du hero d'accueil. Elles sont posées sur une vidéo
   dont certaines images sont très lumineuses (gerbes d'étincelles) : le verre
   clair de .glass-card y devient illisible. On garde le flou mais on remplace le
   voile blanc par un fond vert sombre franchement plus opaque, qui assure le
   contraste quelle que soit l'image derrière. */

.hero-cta-card {
  background: rgba(4, 32, 24, 0.62);
  border-color: rgba(255, 255, 255, 0.14);
}

/* Détourage du texte posé directement sur une image ou une vidéo. Les ombres
   sont très courtes et collées aux lettres : elles dessinent un contour net,
   avec juste ce qu'il faut de relief, sans le halo diffus d'une ombre portée
   classique. */

.text-cutout {
  text-shadow:
        0 1px 1px rgba(0, 0, 0, 0.55),
        0 2px 3px rgba(0, 0, 0, 0.35);
}

/* ============================================
   SCROLL INDICATOR
   ============================================ */

.scroll-indicator-icon {
  width: 24px;
  height: 32px;
  border: 2px solid var(--color-green-500);
  border-radius: 16px;
  position: relative;
  animation: scroll-bounce 2s ease-in-out infinite;
}

.scroll-indicator-icon::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  background: var(--color-green-500);
  border-radius: 2px;
  animation: scroll-dot 2s ease-in-out infinite;
}

/* ============================================
   MOBILE MENU
   ============================================ */

.mobile-menu {
  position: fixed;
  top: 0;
  /* Bridé à la boîte comme la barre de navigation (sans effet en pratique,
       le menu mobile n'apparaissant qu'en dessous du breakpoint md). */
  left: 50%;
  width: 100%;
  max-width: var(--site-width);
  height: 100vh;
  z-index: 90;
  -webkit-backdrop-filter: blur(120px) saturate(200%) brightness(0.6);
          backdrop-filter: blur(120px) saturate(200%) brightness(0.6);
  background: rgba(6, 78, 59, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateX(-50%) scale(0.95);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}

.mobile-menu a {
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
}

.mobile-menu a[aria-current="page"] {
  color: var(--color-green-500);
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-thickness: 2px;
}

.mobile-menu a:hover,
.mobile-menu a:focus {
  color: var(--color-green-500);
  transform: translateX(12px);
}

.mobile-menu a.mobile-menu-cta {
  margin-top: 2rem;
  padding: 1rem 3rem;
  background: var(--color-green-500);
  border-radius: 0.75rem;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.mobile-menu a.mobile-menu-cta:hover,
.mobile-menu a.mobile-menu-cta:focus {
  background: var(--color-green-700);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.5);
}

/* Hamburger Animation */

.hamburger-line {
  transition: all 0.3s ease;
  transform-origin: center;
}

.hamburger.active .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger.active .hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ============================================
   CMS RICH TEXT (contenus TipTap / site_content)
   ============================================ */

.cms-content ul {
  list-style-type: disc;
  padding-left: 1.25rem;
  margin: 0.75rem 0;
}

.cms-content ol {
  list-style-type: decimal;
  padding-left: 1.25rem;
  margin: 0.75rem 0;
}

.cms-content li {
  display: list-item;
  margin-bottom: 0.375rem;
}

.cms-content li::marker {
  color: var(--color-green-500);
}

.cms-content p {
  margin-bottom: 0.75rem;
}

.cms-content p:last-child {
  margin-bottom: 0;
}

.cms-content ul:last-child,
.cms-content ol:last-child {
  margin-bottom: 0;
}

.cms-content h2,
.cms-content h3 {
  color: var(--color-green-500);
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.cms-content h2:first-child,
.cms-content h3:first-child {
  margin-top: 0;
}

.cms-content strong {
  color: #fff;
}

.cms-content a {
  color: var(--color-green-500);
  text-decoration: underline;
}

/* ============================================
   MOBILE VIDEO OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
  .hero-video {
    /* Vidéo visible sur mobile - optimisation performance */
    animation: none;
    /* Désactive l'animation zoom sur mobile */
  }
}

/* ============================================
   ANTI-SPAM (champ piège)
   ============================================ */

.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================
   CARTE DE SITUATION EN FOND DE PIED DE PAGE
   ============================================ */

.footer-map {
  overflow: hidden;
}

.footer-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  /* La tuile OpenStreetMap est claire : on l'inverse pour obtenir un rendu
       sombre cohérent avec le pied de page, puis on l'atténue fortement afin
       que le texte reste parfaitement lisible par-dessus. */
  filter: invert(1) hue-rotate(180deg) grayscale(0.6) brightness(0.85) contrast(0.9);
  opacity: 0.28;
}

@media (prefers-reduced-motion: reduce) {
  .footer-map iframe {
    opacity: 0.2;
  }
}

/* Carte de situation de la page contact : tuile claire adoucie pour le thème sombre */

.contact-map {
  border: 0;
  min-height: 320px;
  filter: grayscale(0.35) brightness(0.9) contrast(0.95);
}

/* ============================================
   APERÇU DE L'ADMINISTRATION
   Repérage des textes modifiables — jamais servi aux visiteurs.
   ============================================ */

.cms-preview .cms-zone {
  outline: 1px dashed rgba(16, 185, 129, 0.45);
  outline-offset: 3px;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.2s ease, outline-color 0.2s ease;
}

.cms-preview .cms-zone:hover {
  background-color: rgba(16, 185, 129, 0.18);
  outline-color: var(--color-green-500);
}

.cms-preview .cms-zone.is-selected {
  background-color: rgba(16, 185, 129, 0.28);
  outline: 2px solid var(--color-green-500);
}

/* Champ visé depuis l'aperçu de l'éditeur */

.cms-field.is-targeted {
  background-color: rgba(16, 185, 129, 0.12);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5);
}

.file\:mr-3::file-selector-button {
  margin-right: 0.75rem;
}

.file\:mr-4::file-selector-button {
  margin-right: 1rem;
}

.file\:cursor-pointer::file-selector-button {
  cursor: pointer;
}

.file\:rounded-lg::file-selector-button {
  border-radius: 0.5rem;
}

.file\:border-0::file-selector-button {
  border-width: 0px;
}

.file\:bg-green-500::file-selector-button {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.file\:px-4::file-selector-button {
  padding-left: 1rem;
  padding-right: 1rem;
}

.file\:py-2::file-selector-button {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.file\:font-medium::file-selector-button {
  font-weight: 500;
}

.file\:text-white::file-selector-button {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.before\:absolute::before {
  content: var(--tw-content);
  position: absolute;
}

.before\:left-0::before {
  content: var(--tw-content);
  left: 0px;
}

.before\:right-0::before {
  content: var(--tw-content);
  right: 0px;
}

.before\:top-0::before {
  content: var(--tw-content);
  top: 0px;
}

.before\:h-px::before {
  content: var(--tw-content);
  height: 1px;
}

.before\:bg-gradient-to-r::before {
  content: var(--tw-content);
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.before\:from-transparent::before {
  content: var(--tw-content);
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.before\:via-green-500::before {
  content: var(--tw-content);
  --tw-gradient-to: rgb(34 197 94 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #22c55e var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.before\:to-transparent::before {
  content: var(--tw-content);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.before\:content-\[\'\'\]::before {
  --tw-content: '';
  content: var(--tw-content);
}

.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}

.after\:bottom-0::after {
  content: var(--tw-content);
  bottom: 0px;
}

.after\:bottom-\[-4px\]::after {
  content: var(--tw-content);
  bottom: -4px;
}

.after\:left-0::after {
  content: var(--tw-content);
  left: 0px;
}

.after\:left-1\/2::after {
  content: var(--tw-content);
  left: 50%;
}

.after\:h-0\.5::after {
  content: var(--tw-content);
  height: 0.125rem;
}

.after\:h-1::after {
  content: var(--tw-content);
  height: 0.25rem;
}

.after\:w-0::after {
  content: var(--tw-content);
  width: 0px;
}

.after\:w-10::after {
  content: var(--tw-content);
  width: 2.5rem;
}

.after\:w-16::after {
  content: var(--tw-content);
  width: 4rem;
}

.after\:w-20::after {
  content: var(--tw-content);
  width: 5rem;
}

.after\:w-full::after {
  content: var(--tw-content);
  width: 100%;
}

.after\:-translate-x-1\/2::after {
  content: var(--tw-content);
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.after\:rounded::after {
  content: var(--tw-content);
  border-radius: 0.25rem;
}

.after\:bg-green-500::after {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.after\:bg-gradient-to-r::after {
  content: var(--tw-content);
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.after\:from-green-500::after {
  content: var(--tw-content);
  --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.after\:to-transparent::after {
  content: var(--tw-content);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.after\:transition-all::after {
  content: var(--tw-content);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.after\:duration-300::after {
  content: var(--tw-content);
  transition-duration: 300ms;
}

.after\:content-\[\'\'\]::after {
  --tw-content: '';
  content: var(--tw-content);
}

.last\:border-0:last-child {
  border-width: 0px;
}

.last\:pb-0:last-child {
  padding-bottom: 0px;
}

.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:-translate-y-2:hover {
  --tw-translate-y: -0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-green-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.hover\:bg-green-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-500\/25:hover {
  background-color: rgb(239 68 68 / 0.25);
}

.hover\:bg-red-500\/30:hover {
  background-color: rgb(239 68 68 / 0.3);
}

.hover\:bg-red-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}

.hover\:bg-white\/15:hover {
  background-color: rgb(255 255 255 / 0.15);
}

.hover\:bg-white\/5:hover {
  background-color: rgb(255 255 255 / 0.05);
}

.hover\:from-green-500:hover {
  --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:to-green-400:hover {
  --tw-gradient-to: #4ade80 var(--tw-gradient-to-position);
}

.hover\:text-green-300:hover {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}

.hover\:text-green-500:hover {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.hover\:shadow-\[0_10px_25px_rgba\(16\2c 185\2c 129\2c 0\.3\)\]:hover {
  --tw-shadow: 0 10px 25px rgba(16,185,129,0.3);
  --tw-shadow-colored: 0 10px 25px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_12px_48px_rgba\(16\2c 185\2c 129\2c 0\.3\)\]:hover {
  --tw-shadow: 0 12px 48px rgba(16,185,129,0.3);
  --tw-shadow-colored: 0 12px 48px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-xl:hover {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-green-500\/30:hover {
  --tw-shadow-color: rgb(34 197 94 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}

.hover\:file\:bg-green-600::file-selector-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.hover\:after\:w-full:hover::after {
  content: var(--tw-content);
  width: 100%;
}

.focus\:border-green-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.focus\:opacity-80:focus {
  opacity: 0.8;
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-green-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1));
}

.group:hover .group-hover\:scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:gap-4 {
  gap: 1rem;
}

.group:hover .group-hover\:text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

@media (min-width: 640px) {
  .sm\:w-auto {
    width: auto;
  }

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

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

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }
}

@media (min-width: 768px) {
  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-12 {
    height: 3rem;
  }

  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

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

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

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:flex-row-reverse {
    flex-direction: row-reverse;
  }

  .md\:items-start {
    align-items: flex-start;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:gap-12 {
    gap: 3rem;
  }

  .md\:gap-6 {
    gap: 1.5rem;
  }

  .md\:whitespace-nowrap {
    white-space: nowrap;
  }

  .md\:p-10 {
    padding: 2.5rem;
  }

  .md\:p-12 {
    padding: 3rem;
  }

  .md\:p-6 {
    padding: 1.5rem;
  }

  .md\:p-8 {
    padding: 2rem;
  }

  .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .md\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .md\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .lg\:gap-16 {
    gap: 4rem;
  }
}

@media (min-width: 1280px) {
  .xl\:grid-cols-\[16rem_1fr\] {
    grid-template-columns: 16rem 1fr;
  }
}