/* ===================================
   IMPORTS DES FICHIERS CSS
   =================================== */

/* Import des styles globaux */

/* ===================================
   DIRECTIVES TAILWIND
   =================================== */

*, ::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: Inter, system-ui, sans-serif; /* 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%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}

@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;
  }
}

/* Utilitaires globaux */

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 80rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.section-padding {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.text-gradient {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: #3C1900 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(60 25 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #B7D7EA var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.bottom-0 {
  bottom: 0px;
}

.left-0 {
  left: 0px;
}

.right-0 {
  right: 0px;
}

.top-0 {
  top: 0px;
}

.top-full {
  top: 100%;
}

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

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

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

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

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

.m-0 {
  margin: 0px;
}

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

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

.\!mb-0 {
  margin-bottom: 0px !important;
}

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

.\!ml-0 {
  margin-left: 0px !important;
}

.\!mt-9 {
  margin-top: 2.25rem !important;
}

.mb-0 {
  margin-bottom: 0px;
}

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

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

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

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

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

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

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

.mb-\[50px\] {
  margin-bottom: 50px;
}

.ml-1 {
  margin-left: 0.25rem;
}

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

.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;
}

.table-cell {
  display: table-cell;
}

.table-row {
  display: table-row;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.list-item {
  display: list-item;
}

.hidden {
  display: none;
}

.h-0 {
  height: 0px;
}

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

.h-10 {
  height: 2.5rem;
}

.h-12 {
  height: 3rem;
}

.h-16 {
  height: 4rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-64 {
  height: 16rem;
}

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

.h-full {
  height: 100%;
}

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

.w-0 {
  width: 0px;
}

.w-12 {
  width: 3rem;
}

.w-16 {
  width: 4rem;
}

.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

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

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.min-w-48 {
  min-width: 12rem;
}

.\!max-w-\[calc\(100\%_-_16px\)\] {
  max-width: calc(100% - 16px) !important;
}

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

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

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

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

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

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

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

.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));
}

@keyframes fadeInUp {

  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

.resize {
  resize: both;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.gap-1 {
  gap: 0.25rem;
}

.gap-10 {
  gap: 2.5rem;
}

.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-\[50px\] {
  gap: 50px;
}

.gap-\[60px\] {
  gap: 60px;
}

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

.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

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

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

.space-x-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(2rem * var(--tw-space-x-reverse));
  margin-left: calc(2rem * calc(1 - var(--tw-space-x-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-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));
}

.overflow-hidden {
  overflow: hidden;
}

.\!overflow-visible {
  overflow: visible !important;
}

.rounded {
  border-radius: 0.25rem;
}

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

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

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-sm {
  border-radius: 0.125rem;
}

.border {
  border-width: 1px;
}

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

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

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

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

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

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

.border-beige {
  --tw-border-opacity: 1;
  border-color: rgb(246 239 231 / var(--tw-border-opacity, 1));
}

.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-gray-400 {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

.border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}

.border-primary {
  --tw-border-opacity: 1;
  border-color: rgb(60 25 0 / var(--tw-border-opacity, 1));
}

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

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

.border-t-gray-400 {
  --tw-border-opacity: 1;
  border-top-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

.border-t-primary {
  --tw-border-opacity: 1;
  border-top-color: rgb(60 25 0 / var(--tw-border-opacity, 1));
}

.bg-beige {
  --tw-bg-opacity: 1;
  background-color: rgb(246 239 231 / var(--tw-bg-opacity, 1));
}

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

.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.bg-gray-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

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

.bg-indigo-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}

.bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(60 25 0 / var(--tw-bg-opacity, 1));
}

.bg-vert {
  --tw-bg-opacity: 1;
  background-color: rgb(77 158 97 / var(--tw-bg-opacity, 1));
}

.bg-vert-dark {
  --tw-bg-opacity: 1;
  background-color: rgb(61 126 79 / var(--tw-bg-opacity, 1));
}

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

.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}

.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));
}

.from-primary {
  --tw-gradient-from: #3C1900 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(60 25 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-secondary {
  --tw-gradient-to: #B7D7EA var(--tw-gradient-to-position);
}

.bg-cover {
  background-size: cover;
}

.bg-clip-text {
  -webkit-background-clip: text;
          background-clip: text;
}

.bg-center {
  background-position: center;
}

.bg-no-repeat {
  background-repeat: no-repeat;
}

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

.p-2 {
  padding: 0.5rem;
}

.p-4 {
  padding: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

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

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

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

.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-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

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

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

.pb-\[240px\] {
  padding-bottom: 240px;
}

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

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

.pt-\[43px\] {
  padding-top: 43px;
}

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

.\!font-primary {
  font-family: p22-mackinac-pro, sans-serif !important;
}

.font-primary {
  font-family: p22-mackinac-pro, sans-serif;
}

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

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

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.text-\[34px\] {
  font-size: 34px;
}

.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-medium {
  font-weight: 500;
}

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

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.leading-\[51px\] {
  line-height: 51px;
}

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

.\!text-beige {
  --tw-text-opacity: 1 !important;
  color: rgb(246 239 231 / var(--tw-text-opacity, 1)) !important;
}

.\!text-vert {
  --tw-text-opacity: 1 !important;
  color: rgb(77 158 97 / var(--tw-text-opacity, 1)) !important;
}

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

.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-gray-100 {
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}

.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

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

.text-primary {
  --tw-text-opacity: 1;
  color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}

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

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

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

.opacity-0 {
  opacity: 0;
}

.opacity-75 {
  opacity: 0.75;
}

.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);
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px 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-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.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-primary {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(60 25 0 / var(--tw-ring-opacity, 1));
}

.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);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, 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-shadow {
  transition-property: box-shadow;
  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-200 {
  transition-duration: 200ms;
}

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

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.mobile-only {
  display: block;
}

@media (min-width: 1024px) {

  .mobile-only {
    display: none;
  }
}

.desktop-only {
  display: none;
}

@media (min-width: 1024px) {

  .desktop-only {
    display: block;
  }
}

.tablet-up {
  display: none;
}

@media (min-width: 768px) {

  .tablet-up {
    display: block;
  }
}

.mobile-up {
  display: block;
}

/* ===================================
   STYLES GLOBAUX
   =================================== */

body, html {
    overflow-x: hidden !important;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.contact-form body,.contact-form  html {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
}

.contact-info body,.contact-info  html {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
}

.contact-block body.rounded-lg.shadow-lg,.contact-block  html.rounded-lg.shadow-lg {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

@media (max-width: 768px) {
    
    .contact-form body,
    .contact-info body,.contact-form  html,
    .contact-info  html {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    
    .contact-form body,
    .contact-info body,.contact-form  html,
    .contact-info  html {
        padding: 1.25rem;
    }
}

h1, h2, h3, h4, h5, h6, p, a, span, li, ul, ol, blockquote, cite, code, pre, samp, kbd, var, dfn, abbr, time, mark {
  font-family: p22-mackinac-pro, sans-serif !important;
  font-weight: 500;
}

.home .entry-content {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

#main h1 {
  margin-bottom: 50px;
  font-family: p22-mackinac-pro, sans-serif;
  font-size: 34px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 51px;
  --tw-text-opacity: 1;
  color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}

.member-info #main h1 {
    color: #3b82f6;
    font-weight: 500;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

#main h2 {
  margin-bottom: 2rem;
  font-family: p22-mackinac-pro, sans-serif;
  font-size: 34px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 51px;
  --tw-text-opacity: 1;
  color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}

.member-info #main h2 {
    color: #3b82f6;
    font-weight: 500;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

#main p {
  margin-bottom: 2rem;
  font-family: p22-mackinac-pro, sans-serif;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}

.member-info #main p {
    color: #3b82f6;
    font-weight: 500;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

#main ul {
  margin-bottom: 2rem;
}

#main ul li {
  font-family: p22-mackinac-pro, sans-serif;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}

.member-info #main ul li {
    color: #3b82f6;
    font-weight: 500;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

#main ul li {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25.311' height='25.804' viewBox='0 0 25.311 25.804'%3E%3Cpath fill='none' stroke='%234d9e61' stroke-width='3' d='m1.163 15.127 6.7 8.216L24.098.879' data-name='Tracé 6354'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 23px 23px;
    padding-left: 36px;
    margin-bottom: 2rem;
}

.home #main {
    margin-top: 0;
}

b, strong {
    font-weight: 600;
}

/* ===================================
   NAVIGATION ET MENU MOBILE
   =================================== */

/* Menu burger */

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1000;
}

.mobile-menu-toggle span {
    width: 100%;
    height: 3px;
    background-color: currentColor;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* Animation du burger en croix */

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Variables pour le menu */

:root {
    --header-height: 72px;
    --secondary-menu-height: 48px;
}

/* main margin-top est géré dynamiquement par le JavaScript */

/* Menu mobile */

.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 999;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Empêche le scroll sur le conteneur principal */
}

/* Ajustement géré par JavaScript dynamiquement */

/* Conteneur de scroll pour le menu principal */

.mobile-menu-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1rem;
    height: 100%; /* Force le flex à calculer la hauteur correctement */
    min-height: 0; /* Permet au contenu de déborder et déclencher le scroll */
    scrollbar-width: thin;
}

.mobile-menu.active {
    transform: translateX(0);
}

/* Contenu du menu mobile */

.mobile-menu .mobile-menu-content {
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Menu secondaire dans le menu mobile */

.mobile-secondary-nav {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.mobile-secondary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-secondary-item {
    margin: 0;
}

.mobile-secondary-item a {
    display: block;
    padding: 0.5rem 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.mobile-secondary-item a:hover {
    color: white;
}

/* Navigation principale mobile */

.mobile-menu .mobile-nav {
    flex: 1;
}

.mobile-menu .mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu .mobile-nav li {
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu .mobile-nav a {
    display: block;
    padding: 1rem 0;
    color: white;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.mobile-menu .mobile-nav a:hover {
    color: #3b82f6;
}

/* Gestion des sous-menus sur mobile */

.mobile-menu .menu-item-has-children {
    position: relative;
}

.mobile-menu .menu-item-has-children > a {
    padding-right: 3rem;
}

.mobile-menu .submenu-toggle {
    position: absolute;
    right: 0;
    top: 0;
    width: 3rem;
    height: 62px;
    background: transparent;
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-menu .submenu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.mobile-menu .submenu-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s ease;
}

.mobile-menu .submenu-toggle.active svg {
    transform: rotate(180deg);
}

/* Sous-menus mobiles - logique simple */

.mobile-menu .sub-menu {
    display: none;
    background-color: rgba(255, 255, 255, 0.05);
    margin: 0;
    margin-left: 1rem;
    padding-left: 1rem;
    overflow: hidden;
}

/* Affichage du sous-menu - UNE SEULE règle basée sur la classe active du sous-menu */

.mobile-menu .sub-menu.active {
    display: flex;
    flex-direction: column;
    height: auto;
    animation: slideDown 0.3s ease-out forwards;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-menu .sub-menu li {
    border-bottom: none;
    border-left: 2px solid rgba(255, 255, 255, 0.2);
    width: 100%;
    flex-shrink: 0;
}

.mobile-menu .sub-menu a {
    padding: 0.75rem 1rem;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Accès rapides */

.quick-actions-rail {
    position: fixed;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background-color: white;
    color: #374151;
    text-decoration: none;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    min-width: 80px;
}

.quick-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    background-color: #f3f4f6;
}

.quick-action-icon {
    font-size: 1.5rem;
}

.quick-action-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
}

/* Accès rapides dans le menu mobile */

.mobile-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.mobile-quick-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
}

.mobile-quick-action:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.mobile-quick-action .quick-action-icon {
    font-size: 1.25rem;
}

.mobile-quick-action .quick-action-label {
    font-size: 0.875rem;
    color: white;
}

/* Footer du menu mobile */

.mobile-menu .mobile-menu-footer {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Accès rapides dans le menu mobile */

.mobile-menu .mobile-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.mobile-menu .mobile-quick-actions .quick-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
}

.mobile-menu .mobile-quick-actions .quick-action:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* État du body quand le menu est ouvert */

body.menu-open {
    overflow: hidden;
}

/* Header sticky et scroll */

#site-header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.3s ease-out;
}

#site-header.header-hidden {
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Navigation desktop */

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.desktop-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 1.5rem;
}

.desktop-nav a {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
    position: relative;
}

.desktop-nav a:hover {
    color: #3b82f6;
}

/* Sous-menus desktop */

.desktop-nav .menu-item-has-children {
    position: relative;
}

.desktop-nav .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0;
    z-index: 100;
}

.desktop-nav .menu-item-has-children:hover .sub-menu {
    display: block;
}

.desktop-nav .sub-menu li {
    margin: 0;
}

.desktop-nav .sub-menu a {
    display: block;
    padding: 0.75rem 1.5rem;
    color: #374151;
    transition: background-color 0.2s ease;
}

.desktop-nav .sub-menu a:hover {
    background-color: #f3f4f6;
    color: #3b82f6;
}

#menu-menu-principal li > a {
  font-family: p22-mackinac-pro, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}

.footer-bandeau-content #menu-menu-principal li > a {
    font-weight: 600;
}

.member-info #menu-menu-principal li > a {
    color: #3b82f6;
    font-weight: 500;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

#menu-menu-principal li > a {
    letter-spacing: 0.05em;
}

/* Responsive */

@media (max-width: 1023px) {
    .mobile-menu-toggle {
        display: flex;
    }
    
    .desktop-nav {
        display: none;
    }
    
    .mobile-menu {
        display: block;
    }
}

@media (min-width: 1024px) {
    .mobile-menu-toggle {
        display: none;
    }
    
    .desktop-nav {
        display: flex;
    }
    
    .mobile-menu {
        display: none;
    }
}

/* Accessibilité */

.mobile-menu-toggle:focus,
.submenu-toggle:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Animations d'entrée pour les éléments du menu */

.mobile-menu .mobile-nav li {
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInLeft 0.3s ease-out forwards;
}

.mobile-menu .mobile-nav li:nth-child(1) { animation-delay: 0.1s; }

.mobile-menu .mobile-nav li:nth-child(2) { animation-delay: 0.2s; }

.mobile-menu .mobile-nav li:nth-child(3) { animation-delay: 0.3s; }

.mobile-menu .mobile-nav li:nth-child(4) { animation-delay: 0.4s; }

.mobile-menu .mobile-nav li:nth-child(5) { animation-delay: 0.5s; }

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===================================
   HEADER ET NAVIGATION DESKTOP
   =================================== */

/* Structure du header */

#site-header {
    height: 112px;
}

#site-header > .container, 
#site-header > .container > .flex {
    height: 100%;
}

.mobile-menu-list > li.btn-egalim,
#menu-menu-principal > li.btn-egalim {
    margin-left: auto;
    display: flex;
    align-items: center;
}

 
#site-header > .container > .mobile-menu-list > li.btn-egalim, 
#site-header > .container > 
#menu-menu-principal > li.btn-egalim {
    height: 100%;
}

@media (max-width: 767px) {
    .footer-bandeau-content .mobile-menu-list > li.btn-egalim,.footer-bandeau-content 
#menu-menu-principal > li.btn-egalim {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* Bouton Indicateurs EGALIM */

.mobile-menu-list > li.btn-egalim > a,
#menu-menu-principal > li.btn-egalim > a {
  --tw-bg-opacity: 1;
  background-color: rgb(77 158 97 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
    border-radius: 9999px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    min-width: auto;
    white-space: nowrap;
    height: auto;
    padding: 11px 38px 11px;
}

.mobile-menu-list > li.btn-egalim > a:hover,
#menu-menu-principal > li.btn-egalim > a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(61 126 79 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

/* Pictogramme Facebook */

.mobile-menu-list > li.picto-fb,
#menu-menu-principal > li.picto-fb {
    margin-left: 1rem;
    display: flex;
    justify-content: start;
    align-items: center;
}

.mobile-menu-list > li {
    text-align: center;
    margin: 16px auto !important;
    justify-self: center;
}

.mobile-menu-list > li.picto-fb > a,
#menu-menu-principal > li.picto-fb > a {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-indent: -9999px;
    overflow: hidden;
    position: relative !important;
    transition: all 0.3s ease;
}

.mobile-menu-list > li.picto-fb > a::before,
#menu-menu-principal > li.picto-fb > a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/picto-fb.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: 0;
    transition: all 0.3s ease;
}

/* Styles desktop uniquement */

@media screen and (min-width: 677px) {
    
    /* Container du header */
    #site-header > .container {
        position: relative;
    }
    
    /* Reset des positions pour éviter les conflits */
    .menu-item, 
    .menu-item a {
        position: initial !important;
    }
    
    .sub-menu {
        transform: none !important;
    }
    
    /* Menu principal */
    #menu-menu-principal {
        height: var(--header-height);
    }
    
    #menu-menu-principal > li {
        height: 100%;
        display: block;
        width: auto;
        margin: 0;
    }
    
    #menu-menu-principal li > a {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-width: 80px;
    }
    
    /* Sous-menus desktop */
    #menu-menu-principal > li.menu-item-has-children > .sub-menu {
        display: none;
        opacity: 0;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: #005c98;
        color: #fff;
        z-index: 1000;
        width: calc(100% - 32px);
        margin: 0 auto;
        padding: 32px 20%;
        border-radius: 0;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
        
        /* Layout flexbox */
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0;
        
        /* Transition */
        transition: opacity 0.5s ease;
    }
    
    /* Affichage au hover/focus */
    #menu-menu-principal > li.menu-item-has-children:hover > .sub-menu,
    #menu-menu-principal > li.menu-item-has-children:focus-within > .sub-menu {
        display: flex;
        opacity: 1;
    }
    
    /* Affichage persistant au clic */
    #menu-menu-principal > li.menu-item-has-children > .sub-menu.clicked-open {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Items du sous-menu */
    #menu-menu-principal > li.menu-item-has-children > .sub-menu > li {
        flex: 1 1 240px;
        margin-bottom: 0;
    }
    
    /* Liens du sous-menu */
    #menu-menu-principal > li.menu-item-has-children > .sub-menu > li > a {
        font-family: 'Open Sans', Arial, sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        color: #fff;
        background: none;
        border: none;
        display: inline-block;
        padding: 0 6px;
        text-decoration: none;
    }
    
    #menu-menu-principal > li.menu-item-has-children > .sub-menu > li > a:hover,
    #menu-menu-principal > li.menu-item-has-children > .sub-menu > li > a:focus {
        text-decoration: underline;
    }
    
    /* ===================================
       BOUTON EGALIM ET PICTO FACEBOOK
       =================================== */
    
    .desktop-nav {
        flex-basis: 100%;
    }
    #menu-menu-principal {
        width: 100%;
    }
    
}

@media screen and (min-width: 1024px) {
    #menu-menu-principal {
    gap: 1rem;
  }
}

@media screen and (min-width: 1200px) {
    #menu-menu-principal {
    gap: 50px;
  }
}

/* Bandeau du menu complexe */

.complex-menu-banner {
    background-color: #234C9B;
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    height: 50px; /* Fixed height */
    z-index: 40; /* Lower z-index than container */
}

@media (max-width: 768px) {
    .complex-menu-banner {
        height: auto;
    }
}

/* Conteneur sticky pour bandeau + header complexe */

.is-sticky-header-container.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

/* S'assurer que le header reste dans le flux du conteneur sticky */

.is-sticky-header-container.is-sticky #site-header {
    position: relative;
    z-index: 1;
}

/* Header simple sticky */

header#site-header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

/* Navigation secondaire */

.secondary-nav {
    height: 100%;
    margin: auto;
}

.secondary-nav ul {
    height: 100%;
    padding: 0;
    gap: 16px;
    list-style: none;
    justify-content: center;
    align-items: center;
    margin: auto;
    row-gap: 0;
}

.secondary-menu-item {
    display: inline-block;
    margin: 0;
}

.secondary-menu-item a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 0;
    display: block;
    transition: opacity 0.2s ease;
}

.secondary-menu-item a:hover {
    opacity: 0.8;
}

/* Sous-menus du menu complexe */

.complex-menu-item {
    position: relative;
}

.complex-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    min-width: 200px;
    z-index: 100;
}

.complex-menu-item:hover .complex-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.complex-submenu ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1.5rem;
    margin: 0;
    list-style: none;
}

.complex-submenu li {
    margin: 0;
}

.complex-submenu a {
    color: #374151;
    text-decoration: none;
    padding: 0.5rem 0;
    display: block;
    transition: color 0.2s ease;
}

.complex-submenu a:hover {
    color: #234C9B;
}

/* Responsive pour les sous-menus */

@media (max-width: 1023px) {
    .complex-submenu ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .complex-submenu ul {
        grid-template-columns: 1fr;
    }
}

/* Animation d'apparition/disparition du conteneur sticky */

.is-sticky-header-container.is-sticky,
header#site-header.is-sticky {
    transition: transform 0.3s ease;
}

/* État caché (scroll vers le bas) */

.is-sticky-header-container.is-sticky.header-hidden,
header#site-header.is-sticky.header-hidden,
.is-sticky-header-container.is-sticky[style*="translateY(-100%)"],
header#site-header.is-sticky[style*="translateY(-100%)"] {
    transform: translateY(-100%);
}

/* État visible (scroll vers le haut ou en haut de page) */

.is-sticky-header-container.is-sticky.header-visible,
header#site-header.is-sticky.header-visible,
.is-sticky-header-container.is-sticky[style*="translateY(0)"],
header#site-header.is-sticky[style*="translateY(0)"] {
    transform: translateY(0);
}

/* ===================================
   BLOG STYLES
   =================================== */

/* Blog Listing */

.blog-listing {
    padding-top: 0;
}

/* Hero Section */

.blog-hero {
    background-color: #111827; /* bg-gray-900 */
    color: #ffffff;
    padding: 3rem 0 2rem;
}

.blog-hero__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.blog-hero__title {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700; /* font-bold */
    margin: 0 0 2rem 0;
    text-align: center;
}

@media (min-width: 768px) {
    .blog-hero__title {
        text-align: left;
        font-size: 3rem; /* md:text-5xl */
    }
}

/* Filtres */

.blog-filters-wrapper {
    margin-top: 1.5rem;
}

.blog-filters-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

@media (min-width: 768px) {
    .blog-filters-container {
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
    }
}

.blog-filters__label {
    font-size: 0.875rem; /* text-sm */
    font-weight: 500;
    color: #d1d5db; /* text-gray-300 */
    white-space: nowrap;
}

.blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-filters .filtre {
    cursor: pointer;
    transition: all 0.2s ease;
}

.blog-filters .label-category {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff;
    transition: all 0.2s ease;
}

.blog-filters .filtre:hover .label-category {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.blog-filters .filtre.active .label-category {
    background-color: var(--accent-color); /* bg-indigo-600 */
    border-color: var(--accent-color);
    color: #ffffff;
}

.blog-filters .count {
    opacity: 0.7;
    font-size: 0.75rem;
}

/* Contenu du blog */

.blog-content {
    padding: 4rem 0;
}

.blog-content__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Grille des articles */

.blog-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Carte d'article */

.blog-card {
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
    overflow: hidden;
    transition: all 0.2s ease;
    height: -moz-fit-content;
    height: fit-content;
}

.blog-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateY(-4px);
}

.blog-card__image {
    position: relative;
    width: 100%;
    height: 12rem;
    overflow: hidden;
}

.blog-card__image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.blog-card__thumbnail {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.2s ease;
}

.blog-card:hover .blog-card__thumbnail {
    transform: scale(1.05);
}

.blog-card__content {
    padding: 1.5rem;
}

.blog-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .blog-card__meta {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.blog-card__date {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.blog-card__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.blog-card__category {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-color);
    background-color: var(--accent-opacity-10);
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
}

.blog-card__title {
    margin: 0 0 0.75rem 0;
}

.blog-card__title-link {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    text-decoration: none;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.blog-card__title-link:hover {
    color: var(--accent-color);
    text-decoration: none;
}

.blog-card__excerpt {
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.blog-card__excerpt p {
    margin: 0;
    font-size: 0.875rem;
}

.blog-card__footer {
    margin-top: auto;
}

.blog-card__read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-color);
    text-decoration: none;
    transition: all 0.2s ease;
}

.blog-card__read-more:hover {
    color: var(--accent-hover);
    text-decoration: none;
    gap: 0.5rem;
}

/* Pagination */

.blog-pagination {
    margin-top: 3rem;
    text-align: center;
}

.blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    margin: 0 0.25rem;
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background-color: #ffffff;
    color: #374151;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.blog-pagination .page-numbers:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
    text-decoration: none;
}

.blog-pagination .page-numbers.current {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #ffffff;
}

.blog-pagination .page-numbers.prev,
.blog-pagination .page-numbers.next {
    padding: 0.5rem 1rem;
    font-weight: 600;
}

/* Overlay de chargement */

.blog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.blog-loader {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 0.5rem;
    text-align: center;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid #e5e7eb;
    border-top: 2px solid var(--accent-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Single Post */

.single-post {
    max-width: none;
}

.single-post__breadcrumb {
    background-color: #111827;
    color: #ffffff;
    padding: 1rem 0;
}

.single-post__breadcrumb-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.single-post__back-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.single-post__back-link:hover {
    color: #d1d5db;
    text-decoration: none;
}

.single-post__meta-wrapper {
    background-color: #f9fafb;
    padding: 1rem 0;
}

.single-post__meta-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .single-post__meta-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.single-post__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.single-post__category {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-color);
    background-color: var(--accent-opacity-10);
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--accent-opacity-30);
}

.single-post__date {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.single-post__header {
    padding: 3rem 0 2rem;
}

.single-post__header-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.single-post__title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: #111827;
    margin: 0;
}

@media (min-width: 768px) {
    .single-post__title {
        font-size: 3rem;
    }
}

.single-post__featured-image {
    margin-bottom: 3rem;
}

.single-post__featured-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.single-post__thumbnail {
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.single-post__content {
    margin-bottom: 3rem;
}

.single-post__content-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Styles prose pour le contenu */

.single-post__content-container > * {
    margin-bottom: 1.5rem;
}

.single-post__content-container > *:last-child {
    margin-bottom: 0;
}

.single-post__content-container p {
    line-height: 1.7;
    color: #374151;
}

.single-post__content-container h2,
.single-post__content-container h3,
.single-post__content-container h4 {
    font-weight: 600;
    color: #111827;
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.single-post__content-container h2 {
    font-size: 1.875rem;
}

.single-post__content-container h3 {
    font-size: 1.5rem;
}

.single-post__content-container h4 {
    font-size: 1.25rem;
}

.single-post__content-container ul,
.single-post__content-container ol {
    padding-left: 1.5rem;
}

.single-post__content-container li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.single-post__content-container a {
    color: var(--accent-color);
    text-decoration: underline;
}

.single-post__content-container a:hover {
    color: var(--accent-hover);
}

.single-post__content-container blockquote {
    border-left: 4px solid #e5e7eb;
    padding-left: 1rem;
    margin: 2rem 0;
    font-style: italic;
    color: #6b7280;
}

/* Partage social */

.single-post__share {
    background-color: #f3f4f6;
    padding: 2rem 0;
}

.single-post__share-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.single-post__share-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

@media (min-width: 768px) {
    .single-post__share-content {
        flex-direction: row;
        justify-content: center;
        gap: 1.5rem;
    }
}

.single-post__share-label {
    font-weight: 600;
    color: #374151;
}

.single-post__share-links {
    display: flex;
    gap: 1rem;
}

.single-post__share-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: #6b7280;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.2s ease;
}

.single-post__share-link:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.single-post__share-link--facebook:hover {
    background-color: #1877f2;
}

.single-post__share-link--linkedin:hover {
    background-color: #0a66c2;
}

.single-post__share-link--twitter:hover {
    background-color: #1da1f2;
}

.single-post__share-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* Responsive */

@media (max-width: 640px) {
    .blog-hero {
        padding: 2rem 0 1.5rem;
    }
    
    .blog-hero__title {
        font-size: 1.875rem;
    }
    
    .blog-content {
        padding: 2rem 0;
    }
    
    .blog-grid {
        gap: 1.5rem;
    }
    
    .single-post__header {
        padding: 2rem 0 1.5rem;
    }
    
    .single-post__title {
        font-size: 1.75rem;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .blog-card,
    .blog-card__thumbnail,
    .blog-card__read-more,
    .single-post__share-link {
        transition: none;
    }
    
    .blog-card:hover,
    .single-post__share-link:hover {
        transform: none;
    }
    
    .blog-card:hover .blog-card__thumbnail {
        transform: none;
    }
    
    .spinner {
        animation: none;
    }
}

/* Composants globaux du thème volaypei */

/* ===== HEADER ===== */

#site-header {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.contact-form #site-header {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
}

.contact-info #site-header {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
}

.contact-block #site-header.rounded-lg.shadow-lg {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

@media (max-width: 768px) {
    
    .contact-form #site-header,
    .contact-info #site-header {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    
    .contact-form #site-header,
    .contact-info #site-header {
        padding: 1.25rem;
    }
}

#site-header.sticky {
    position: fixed;
    top: 0;
    z-index: 50;
}

/* Logo */

.site-logo img {
  height: 90px;
  width: 90px;
  -o-object-fit: contain;
     object-fit: contain;
}

.site-logo a {
  display: block;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.site-logo a:hover {
  opacity: 0.8;
}

/* Navigation principale */

.main-nav ul {
  display: flex;
  align-items: center;
}

.main-nav ul > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(2rem * var(--tw-space-x-reverse));
  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}

 
#site-header > .container > .main-nav ul {
    height: 100%;
}

@media (max-width: 767px) {
    .footer-bandeau-content .main-nav ul {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .footer-bandeau-content .main-nav ul > * + * {
        margin-left: 0;
        margin-top: 1rem;
    }
}

.main-nav li {
  position: relative;
}

.main-nav a {
  position: relative;
  display: block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
  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: 200ms;
}

.main-nav a:hover {
  --tw-text-opacity: 1;
  color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}

.main-nav a::after {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 0.125rem;
  width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(60 25 0 / var(--tw-bg-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    content: '';
}

.main-nav a:hover::after {
  width: 100%;
}

/* Sous-menus */

.main-nav .sub-menu {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 50;
  min-width: 12rem;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  opacity: 0;
  --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);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.contact-form .main-nav .sub-menu {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
}

.contact-info .main-nav .sub-menu {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
}

.contact-block .main-nav .sub-menu.rounded-lg.shadow-lg {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.contact-block .bg-white.rounded-lg.main-nav .sub-menu {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

@media (max-width: 768px) {
    
    .contact-form .main-nav .sub-menu,
    .contact-info .main-nav .sub-menu {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    
    .contact-form .main-nav .sub-menu,
    .contact-info .main-nav .sub-menu {
        padding: 1.25rem;
    }
}

.group:hover .main-nav .sub-menu {
  visibility: visible;
  opacity: 1;
}

.main-nav .sub-menu li {
  display: block;
}

.main-nav .sub-menu a {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.footer-bandeau-content .main-nav .sub-menu a {
    font-size: 0.875rem;
}

.main-nav .sub-menu a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.main-nav .sub-menu a::after {
  display: none;
}

/* Gestion des sous-menus avec CSS pur */

.main-nav .menu-item-has-children {
    position: relative;
}

.main-nav .menu-item-has-children > a::after {
  margin-left: 0.25rem;
  display: inline-block;
  height: 0px;
  width: 0px;
  border-left-width: 4px;
  border-right-width: 4px;
  border-top-width: 4px;
  border-color: transparent;
  --tw-border-opacity: 1;
  border-top-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    content: '';
}

.main-nav .menu-item-has-children:hover > a::after {
  --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));
  --tw-border-opacity: 1;
  border-top-color: rgb(60 25 0 / var(--tw-border-opacity, 1));
}

/* Menu mobile */

.mobile-menu-toggle {
  border-radius: 0.375rem;
  padding: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
  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;
}

.mobile-menu-toggle:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}

.mobile-menu {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.contact-form .mobile-menu {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
}

.contact-info .mobile-menu {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
    border-top: 1px solid #e5e7eb;
    margin-top: 2rem;
    padding-top: 1.5rem;
}

.contact-info .mobile-menu h4 {
    color: #111827;
    font-weight: 500;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.contact-info .mobile-menu p {
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

.contact-block .mobile-menu.rounded-lg.shadow-lg {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

@media (max-width: 768px) {
    
    .contact-form .mobile-menu,
    .contact-info .mobile-menu {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    
    .contact-form .mobile-menu,
    .contact-info .mobile-menu {
        padding: 1.25rem;
    }
}

.mobile-menu ul > :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));
}

.mobile-menu ul {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.mobile-menu li {
  display: block;
}

.mobile-menu a {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  display: block;
  border-radius: 0.375rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
  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: 200ms;
}

.mobile-menu a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}

/* ===== FOOTER ===== */

#site-footer {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.footer-column h3 {
  margin-bottom: 1rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}

.footer-bandeau-content .footer-column h3 {
    font-weight: 600;
}

.member-info .footer-column h3 {
    color: #3b82f6;
    font-weight: 500;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.footer-column ul > :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));
}

.footer-column a {
  display: block;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
  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: 200ms;
}

.footer-column a:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* ===== ACCÈS RAPIDES ===== */

.acces-rapide {
  display: block;
  display: flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(60 25 0 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --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);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

 
#site-header > .container > .acces-rapide {
    height: 100%;
}

.contact-block .bg-white.rounded-lg.acces-rapide {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

@media (max-width: 767px) {
    .footer-bandeau-content .acces-rapide {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.acces-rapide:hover {
  --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));
  --tw-bg-opacity: 1;
  background-color: rgb(26 58 122 / var(--tw-bg-opacity, 1));
  --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);
}

.acces-rapide img {
  height: 1.5rem;
  width: 1.5rem;
}

.acces-rapide svg {
  height: 1.5rem;
  width: 1.5rem;
}

/* ===== BOUTONS ===== */

.btn-primary,
.btn-secondary {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
}

 
#site-header > .container > .btn-primary, 
#site-header > .container > 
.btn-secondary {
    height: 100%;
}

@media (max-width: 767px) {
    .footer-bandeau-content .btn-primary,.footer-bandeau-content 
.btn-secondary {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.btn-primary > a {
  border-width: 1px;
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(77 158 97 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
    border-radius: 9999px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    min-width: auto;
    height: auto;
    padding: 11px 22px 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.btn-primary > a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(61 126 79 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

.btn-secondary > a {
  border-width: 1px;
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(246 239 231 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1 !important;
  color: rgb(77 158 97 / var(--tw-text-opacity, 1)) !important;
}

.nos-missions .btn-secondary > a {
    border-radius: 32px;
    padding: 18px;
  }

.btn-secondary > a {
    border-radius: 9999px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    min-width: auto;
    height: auto;
    padding: 11px 22px 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.btn-secondary > a:hover {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(246 239 231 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(77 158 97 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1 !important;
  color: rgb(246 239 231 / var(--tw-text-opacity, 1)) !important;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  border-radius: 0.5rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(60 25 0 / var(--tw-border-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(60 25 0 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.contact-block .bg-white.btn-outline.shadow-lg {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.footer-bandeau-content .btn-outline {
    font-weight: 600;
}

.member-info .btn-outline {
    color: #3b82f6;
    font-weight: 500;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.btn-outline:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(60 25 0 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* ===== CARTES ===== */

.card {
  overflow: hidden;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.contact-form .card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
}

.contact-info .card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
}

.contact-block .card.rounded-lg.shadow-lg {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.contact-block .bg-white.card.shadow-lg {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

@media (max-width: 768px) {
    
    .contact-form .card,
    .contact-info .card {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    
    .contact-form .card,
    .contact-info .card {
        padding: 1.25rem;
    }
}

.card: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);
}

.card-header {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
}

.card-body {
  padding: 1.5rem;
}

.card-footer {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
}

.contact-info .card-footer {
    border-top: 1px solid #e5e7eb;
    margin-top: 2rem;
    padding-top: 1.5rem;
}

.contact-info .card-footer h4 {
    color: #111827;
    font-weight: 500;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.contact-info .card-footer p {
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* ===== FORMULAIRES ===== */

.form-group {
  margin-bottom: 1rem;
}

.form-label {
  margin-bottom: 0.5rem;
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.footer-bandeau-content .form-label {
    font-size: 0.875rem;
}

.form-input {
  width: 100%;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.form-input:focus {
  border-color: transparent;
  --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);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(60 25 0 / var(--tw-ring-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.form-textarea {
  width: 100%;
  resize: vertical;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.form-textarea:focus {
  border-color: transparent;
  --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);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(60 25 0 / var(--tw-ring-opacity, 1));
}

.form-textarea {
    min-height: 100px;
}

.form-select {
  width: 100%;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.form-select:focus {
  border-color: transparent;
  --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);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(60 25 0 / var(--tw-ring-opacity, 1));
}

.form-button {
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(60 25 0 / var(--tw-bg-opacity, 1));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.footer-bandeau-content .form-button {
    font-weight: 600;
}

.form-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(26 58 122 / var(--tw-bg-opacity, 1));
}

/* ===== UTILITAIRES ===== */

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 80rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.section-padding {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.text-gradient {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: #3C1900 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(60 25 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #B7D7EA var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.rejoignez-filiere {
  position: relative;
  padding-top: 43px;
  padding-bottom: 240px;
}

@media (min-width: 768px) {

  .rejoignez-filiere {
    padding-top: 90px;
    padding-bottom: 88px;
  }
}

.rejoignez-filiere::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 66%;
    width: 100%;
    height: 100%;
    background-image: url('../img/poulaga.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 342px;
    width: 432px;
    z-index: 1;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
    .main-nav {
    display: none;
  }
    
    .mobile-menu-toggle {
    display: block;
  }
    
    .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
    
    .section-padding {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
    .rejoignez-filiere::before {
        height: 200px;
        width: 280px;
        bottom: 32px;
        left: calc(50% - 140px);
        right: 0;
    }
}

@media (min-width: 769px) {
    .mobile-menu-toggle {
    display: none;
  }
    
    .mobile-menu {
    display: none;
  }
}

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.animate-slide-in-right {
    animation: slideInRight 0.6s ease-out;
}

/* ===== FOCUS STATES ===== */

.focus-visible:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(60 25 0 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
}

/* ===== SCROLLBAR ===== */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

::-webkit-scrollbar-thumb {
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

::-webkit-scrollbar-thumb:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}

/* ===== PRINT ===== */

@media print {
    .mobile-menu-toggle,
    .mobile-menu,
    .acces-rapide {
    display: none;
  }
    
    #site-header {
    position: static;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
    
    .btn-primary,
    .btn-secondary,
    .btn-outline {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
    background-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
  }
}

/* ===================================
   BLOC CONTACT
   =================================== */

.contact-block {
    padding: 4rem 0;
    background-color: #f9fafb;
}

/* En-tête de section */

.contact-block .text-center h2 {
    color: #111827;
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.contact-block .text-center p {
    color: #6b7280;
    font-size: 1.25rem;
    max-width: 42rem;
    margin: 0 auto;
    line-height: 1.6;
}

/* Grille principale */

.contact-block .grid {
    display: grid;
    gap: 3rem;
}

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

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

/* Formulaire de contact */

.contact-form {
    width: 100%;
}

.contact-form .bg-white {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
}

.contact-form h3 {
    color: #111827;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

/* Informations de contact */

.contact-info {
    width: 100%;
}

.contact-info .bg-white {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
}

.contact-info h3 {
    color: #111827;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

/* Éléments d'information */

.contact-info .space-y-6 > div {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.contact-info .space-y-6 > div:last-child {
    margin-bottom: 0;
}

.contact-info .flex-shrink-0 {
    flex-shrink: 0;
    font-size: 1.5rem;
    width: 2rem;
    text-align: center;
}

.contact-info .flex-1 h4 {
    color: #111827;
    font-weight: 500;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.contact-info .flex-1 a {
    color: #3b82f6;
    font-weight: 500;
    transition: color 0.2s ease;
    text-decoration: none;
}

.contact-info .flex-1 a:hover {
    color: #1d4ed8;
}

.contact-info .flex-1 p {
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* Adresse complète */

.contact-info .border-t {
    border-top: 1px solid #e5e7eb;
    margin-top: 2rem;
    padding-top: 1.5rem;
}

.contact-info .border-t h4 {
    color: #111827;
    font-weight: 500;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.contact-info .border-t p {
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* Carte */

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

.contact-block .bg-white.rounded-lg.shadow-lg {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.contact-block .aspect-w-16.aspect-h-9 {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.contact-block .aspect-w-16.aspect-h-9 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Layouts spécifiques */

.contact-block .max-w-2xl {
    max-width: 42rem;
    margin: 0 auto;
}

.contact-block .max-w-4xl {
    max-width: 56rem;
    margin: 0 auto;
}

/* Animations d'entrée */

.contact-form,
.contact-info {
    opacity: 0;
    animation: fade-in-up 0.6s ease-out forwards;
}

.contact-form {
    animation-delay: 0.1s;
}

.contact-info {
    animation-delay: 0.3s;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */

@media (max-width: 768px) {
    .contact-block .text-center h2 {
        font-size: 2rem;
    }
    
    .contact-block .text-center p {
        font-size: 1.125rem;
    }
    
    .contact-form .bg-white,
    .contact-info .bg-white {
        padding: 1.5rem;
    }
    
    .contact-form h3,
    .contact-info h3 {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .contact-block .text-center h2 {
        font-size: 1.75rem;
    }
    
    .contact-block .text-center p {
        font-size: 1rem;
    }
    
    .contact-form .bg-white,
    .contact-info .bg-white {
        padding: 1.25rem;
    }
}

/* @font-face {
    font-family:'Ezra';
    font-style:normal;
    font-weight:700;
    src: local('Ezra'),
    url('/wp-content/themes/volaypei-theme/assets/fonts/ezrabold.woff2') format('woff2'),
    url('/wp-content/themes/volaypei-theme/assets/fonts/ezrabold.woff') format('woff');
    font-display: swap;
}
.ezra {
    font-family: 'Ezra', sans-serif;
    font-weight: 700;
} */

/* P22 Mackinac Pro Medium
font-family: "p22-mackinac-pro", serif;
font-weight: 500;
font-style: normal;
P22 Mackinac Pro Medium Italic
font-family: "p22-mackinac-pro", serif;
font-weight: 500;
font-style: italic;
P22 Mackinac Pro Bold
font-family: "p22-mackinac-pro", serif;
font-weight: 700;
font-style: normal;
P22 Mackinac Pro Bold Italic
font-family: "p22-mackinac-pro", serif;
font-weight: 700;
font-style: italic;
P22 Mackinac Pro Extra Bold
font-family: "p22-mackinac-pro", serif;
font-weight: 800;
font-style: normal;
P22 Mackinac Pro Extra Bold Italic
font-family: "p22-mackinac-pro", serif;
font-weight: 800;
font-style: italic; */

/* ===================================
   FOOTER
   =================================== */

/* Footer principal */

#site-footer {
    margin-top: auto; /* Pour pousser le footer en bas */
}

/* Colonnes du footer */

.footer-column {
    display: flex;
    flex-direction: column;
}

.footer-content {
    color: #e5e7eb;
}

.footer-content h3 {
    color: white;
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer-content p {
    color: #d1d5db;
    line-height: 1.6;
}

/* Menus du footer */

.footer-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-menu-item {
    margin: 0;
}

.footer-menu-link {
    color: #d1d5db;
    text-decoration: none;
    display: block;
    padding: 0.25rem 0;
    transition: color 0.2s ease;
}

.footer-menu-link:hover {
    color: #3b82f6; /* primary color */
}

/* Bandeau de financement */

.footer-bandeau {
    background-color: #111827; /* gray-900 */
    border-top: 1px solid #374151; /* gray-700 */
}

.footer-bandeau-content {
    color: #e5e7eb;
}

.footer-bandeau-content a{
    color: inherit !important;
}

.footer-bandeau-content img {
    max-height: 4rem;
    width: auto;
}

.footer-bandeau-content .text-sm {
    font-size: 0.875rem;
}

.footer-bandeau-content .text-xs {
    font-size: 0.75rem;
}

.footer-bandeau-content .font-semibold {
    font-weight: 600;
}

.footer-bandeau-content .text-blue-600 {
    color: #2563eb;
}

/* Copyright */

.footer-copyright {
    background-color: #111827; /* gray-900 */
    border-top: 1px solid #374151; /* gray-700 */
}

.footer-copyright p {
    margin: 0;
}

.footer-bandeau .footer-bandeau-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6rem;
}

#menu-footer-2 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 2rem;
}

#menu-footer-2 li {
    margin-top: 0;
    text-align: center;
}

.footer-bandeau p {
    text-align: center;
}

.footer-bandeau p a {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#menu-footer-2 li a {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Responsive */

@media (max-width: 767px) {
    .footer-bandeau-content .flex {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .footer-bandeau-content .space-x-8 > * + * {
        margin-left: 0;
        margin-top: 1rem;
    }
    
    .footer-bandeau-content .space-x-4 > * + * {
        margin-left: 0;
        margin-top: 0.5rem;
    }
    .footer-bandeau .footer-bandeau-content,
    #menu-footer-2 {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }
}

/* Espacement des colonnes */

.footer-column + .footer-column {
    margin-top: 2rem;
}

@media (min-width: 768px) {
    .footer-column + .footer-column {
        margin-top: 0;
    }
}

/* Liens dans le contenu WYSIWYG */

.footer-content a {
    color: #3b82f6;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.footer-content a:hover {
    color: #1d4ed8;
}

/* Images dans le contenu WYSIWYG */

.footer-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
}

/* Listes dans le contenu WYSIWYG */

.footer-content ul,
.footer-content ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.footer-content li {
    margin: 0.25rem 0;
}

/* Import des styles de blocs */

/**
 * Bloc Avant/Après - Comparateur d'images
 * Styles pour le comparateur d'images avec curseur glissant
 */

.before-after {
    --before-after-border-radius: 8px;
    --before-after-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    --before-after-scroller-size: 50px;
    --before-after-scroller-border: 4px solid #fff;
    --before-after-scroller-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --before-after-label-bg: rgba(0, 0, 0, 0.7);
    --before-after-label-color: #fff;
    --before-after-label-padding: 8px 16px;
    --before-after-label-border-radius: 20px;
    --before-after-line-color: #fff;
    --before-after-line-width: 2px;
    
    margin: 2rem 0;
}

.before-after__container  {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

.before-after__title {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
    color: var(--color-heading, #333);
}

.before-after__subtitle {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--color-text, #666);
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.before-after__wrapper {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    border-radius: var(--before-after-border-radius);
    overflow: hidden;
    box-shadow: var(--before-after-shadow);
    background-color: #f8f9fa;
    /* Fallback si aspect-ratio non supporté */
    height: auto;
}

/* S'assurer que le wrapper garde la hauteur des images si pas d'aspect-ratio inline */

.before-after__wrapper::before {
    content: '';
    display: block;
    padding-top: 56.25%; /* 16/9 par défaut, sera écrasé par aspect-ratio inline */
}

.before-after__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.before-after__image--before {
    z-index: 1;
}

.before-after__image--after {
    z-index: 2;
    width: 50%; /* Position initiale */
}

.before-after__content-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    /* Aligner le contenu sur la gauche pour éviter l'effet de glissement en réduisant la largeur */
    -o-object-position: left center;
       object-position: left center;
    display: block;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    -webkit-user-drag: none;
}

/* Renforcer l'ancrage à gauche sur la couche "après" */

.before-after__image--after .before-after__content-image {
    -o-object-position: left center;
       object-position: left center;
}

/* Optionnel: même ancrage sur la couche "avant" pour une symétrie parfaite */

.before-after__image--before .before-after__content-image {
    -o-object-position: left center;
       object-position: left center;
}

/* Performance hint pour le redimensionnement de la couche "après" */

.before-after__image--after {
    will-change: width;
}

.before-after__label {
    position: absolute;
    top: 12px;
    padding: var(--before-after-label-padding);
    background: var(--before-after-label-bg);
    color: var(--before-after-label-color);
    border-radius: var(--before-after-label-border-radius);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10; /* au-dessus des images et de la ligne du scroller */
    pointer-events: none; /* ne pas gêner le drag du scroller */
}

.before-after__label--after,
.before-after__label--before {
    left: 12px;
    width: -moz-fit-content;
    width: fit-content;
}

.before-after__scroller {
    position: absolute;
    top: 50%;
    left: calc(50% - 25px);
    width: var(--before-after-scroller-size);
    height: var(--before-after-scroller-size);
    transform: translateY(-50%);
    background: transparent;
    border: var(--before-after-scroller-border);
    border-radius: 50%;
    cursor: grab;
    z-index: 20;
    box-shadow: var(--before-after-scroller-shadow);
    transition: all 0.2s ease;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    touch-action: none;
}

.before-after__scroller:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.before-after__scroller--active {
    cursor: grabbing;
    transform: translateY(-50%) scale(1.1);
}

.before-after__scroller-thumb {
    width: 100%;
    height: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.before-after__scroller-line {
    position: absolute;
    top: 100%;
    left: 50%;
    width: var(--before-after-line-width);
    height: 9999px;
    background: var(--before-after-line-color);
    transform: translateX(-50%);
    z-index: 15;
}

.before-after__scroller-line::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: var(--before-after-line-width);
    height: 9999px;
    background: var(--before-after-line-color);
    transform: translateX(-50%);
}

.before-after__instructions {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--color-text-muted, #888);
    font-size: 0.875rem;
    font-style: italic;
}

.before-after__error {
    padding: 2rem;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: var(--before-after-border-radius);
    color: #721c24;
    text-align: center;
}

/* Responsive Design */

@media (max-width: 768px) {
    .before-after__title {
        font-size: 1.5rem;
    }
    
    .before-after__subtitle {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }
    
    .before-after__wrapper {
        max-width: 100%;
        border-radius: 6px;
    }
    
    .before-after__label {
        top: 10px;
        padding: 6px 12px;
        font-size: 0.75rem;
    }
    
    .before-after__label--before {
        left: 10px;
    }
    
    .before-after__label--after {
        right: 10px;
    }
    
    .before-after__scroller {
        width: 40px;
        height: 40px;
        border-width: 3px;
    }
    
    .before-after__scroller-thumb {
        padding: 6px;
    }
    
    .before-after__instructions {
        font-size: 0.8rem;
        margin-top: 1rem;
    }
}

@media (max-width: 480px) {
    .before-after__title {
        font-size: 1.25rem;
    }
    
    .before-after__subtitle {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }
    
    .before-after__label {
        top: 8px;
        padding: 4px 8px;
        font-size: 0.7rem;
    }
    
    .before-after__label--before {
        left: 8px;
    }
    
    .before-after__label--after {
        right: 8px;
    }
    
    .before-after__scroller {
        width: 36px;
        height: 36px;
        border-width: 2px;
    }
    
    .before-after__scroller-thumb {
        padding: 5px;
    }
}

/* États de focus pour l'accessibilité */

.before-after__scroller:focus {
    outline: 2px solid var(--color-primary, #007cba);
    outline-offset: 2px;
}

.before-after__scroller:focus:not(:focus-visible) {
    outline: none;
}

/* Animation d'entrée */

.before-after__wrapper {
    animation: before-after-fade-in 0.6s ease-out;
}

@keyframes before-after-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Support pour le mode sombre */

@media (prefers-color-scheme: dark) {
    .before-after {
        --before-after-label-bg: rgba(255, 255, 255, 0.9);
        --before-after-label-color: #333;
        --before-after-scroller-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }
    
    .before-after__title {
        color: var(--color-heading-dark, #fff);
    }
    
    .before-after__subtitle {
        color: var(--color-text-dark, #ccc);
    }
    
    .before-after__instructions {
        color: var(--color-text-muted-dark, #aaa);
    }
}

/* Support pour les préférences de réduction de mouvement */

@media (prefers-reduced-motion: reduce) {
    .before-after__scroller {
        transition: none;
    }
    
    .before-after__wrapper {
        animation: none;
    }
    
    .before-after__scroller:hover {
        transform: translateY(-50%);
    }
}

/* ===================================
   BLOG — LATEST POSTS
   =================================== */

.blog-latest {
    background-color: #ffffff;
}

.blog-latest__container {
    margin: 0 auto;
    max-width: 1280px; /* max-w-7xl */
    padding: 5rem 1.5rem; /* py-20 px-6 */
}

/* Titre */

.blog-latest__title {
    text-align: center;
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0 0 3rem 0; /* mb-12 */
    line-height: 1.2;
}

/* Grille des articles */

.blog-latest__grid {
    display: grid;
    gap: 2rem; /* gap-8 */
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .blog-latest__grid {
        grid-template-columns: repeat(2, 1fr); /* sm:grid-cols-2 */
    }
}

@media (min-width: 1024px) {
    .blog-latest__grid {
        grid-template-columns: repeat(3, 1fr); /* lg:grid-cols-3 */
    }
}

/* Article individuel */

.blog-latest__article {
    background-color: #ffffff;
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    border: 1px solid #e5e7eb; /* border */
    overflow: hidden;
    transition: all 0.2s ease;
    height: -moz-fit-content;
    height: fit-content;
}

.blog-latest__article:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */
    transform: translateY(-4px);
}

/* Image de l'article */

.blog-latest__image {
    width: 100%;
    height: 12rem; /* h-48 */
    overflow: hidden;
}

.blog-latest__image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.blog-latest__thumbnail {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.2s ease;
}

.blog-latest__article:hover .blog-latest__thumbnail {
    transform: scale(1.05);
}

/* Contenu de l'article */

.blog-latest__content {
    padding: 1.5rem; /* p-6 */
}

/* Métadonnées */

.blog-latest__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* gap-3 */
    margin-bottom: 0.75rem; /* mb-3 */
    flex-wrap: wrap;
}

.blog-latest__date {
    font-size: 0.75rem; /* text-xs */
    color: #6b7280; /* text-gray-500 */
    font-weight: 500;
}

.blog-latest__category {
    font-size: 0.75rem; /* text-xs */
    font-weight: 600; /* font-semibold */
    color: var(--accent-color); /* text-indigo-600 */
    background-color: #eef2ff; /* bg-indigo-50 */
    padding: 0.25rem 0.5rem; /* py-1 px-2 */
    border-radius: 0.375rem; /* rounded-md */
}

/* Titre de l'article */

.blog-latest__article-title {
    margin: 0 0 0.75rem 0; /* mb-3 */
}

.blog-latest__article-link {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #111827; /* text-gray-900 */
    text-decoration: none;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.blog-latest__article-link:hover {
    color: var(--accent-color); /* hover:text-indigo-600 */
    text-decoration: none;
}

.blog-latest__article-link:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Extrait de l'article */

.blog-latest__excerpt {
    color: #4b5563; /* text-gray-600 */
    line-height: 1.6;
    margin: 0 0 1rem 0; /* mb-4 */
    font-size: 0.875rem; /* text-sm */
}

/* Lien "Lire la suite" */

.blog-latest__read-more {
    margin-top: auto;
}

.blog-latest__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem; /* gap-1 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: var(--accent-color); /* text-indigo-600 */
    text-decoration: none;
    transition: all 0.2s ease;
}

.blog-latest__link:hover {
    color: var(--accent-hover); /* hover:text-indigo-500 */
    text-decoration: none;
    gap: 0.5rem; /* Animation du gap */
}

.blog-latest__link:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Bouton d'action */

.blog-latest__action {
    text-align: center;
    margin-top: 3rem; /* mt-12 */
}

.blog-latest__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem; /* rounded-md */
    background-color: #111827; /* bg-gray-900 */
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: #ffffff;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.blog-latest__button:hover {
    background-color: #1f2937; /* hover:bg-gray-800 */
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.blog-latest__button:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.blog-latest__button:active {
    transform: translateY(0);
}

/* État vide */

.blog-latest__empty {
    text-align: center;
    padding: 3rem;
    background-color: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.blog-latest__empty p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .blog-latest__container {
        padding: 3rem 1rem;
    }
    
    .blog-latest__title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .blog-latest__grid {
        gap: 1.5rem;
    }
    
    .blog-latest__content {
        padding: 1.25rem;
    }
    
    .blog-latest__image {
        height: 10rem;
    }
    
    .blog-latest__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .blog-latest__action {
        margin-top: 2rem;
    }
    
    .blog-latest__button {
        width: 100%;
        max-width: 300px;
    }
}

/* Grille adaptative selon le nombre d'articles */

.blog-latest__grid[data-count="1"] {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
}

.blog-latest__grid[data-count="2"] {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .blog-latest__grid[data-count="2"] {
        grid-template-columns: repeat(2, 1fr);
        max-width: 800px;
        margin: 0 auto;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .blog-latest__article,
    .blog-latest__thumbnail,
    .blog-latest__link,
    .blog-latest__button {
        transition: none;
    }
    
    .blog-latest__article:hover,
    .blog-latest__button:hover,
    .blog-latest__button:active {
        transform: none;
    }
    
    .blog-latest__article:hover .blog-latest__thumbnail {
        transform: none;
    }
}

/* ===================================
   CARDS — GRID
   =================================== */

.cards-grid {
    background-color: #f9fafb; /* bg-gray-50 */
}

.cards-grid__container {
    margin: 0 auto;
    max-width: 1280px; /* max-w-7xl */
    padding: 5rem 1.5rem; /* py-20 px-6 */
}

/* Titre */

.cards-grid__title {
    text-align: center;
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0 0 3rem 0; /* mb-12 */
    line-height: 1.2;
}

/* Grille des cartes */

.cards-grid__grid {
    display: grid;
    gap: 2rem; /* gap-8 */
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .cards-grid__grid {
        grid-template-columns: repeat(2, 1fr); /* sm:grid-cols-2 */
    }
}

@media (min-width: 1024px) {
    .cards-grid__grid {
        grid-template-columns: repeat(3, 1fr); /* lg:grid-cols-3 */
    }
}

/* Carte individuelle */

.cards-grid__card {
    background-color: #ffffff;
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    border: 1px solid #e5e7eb; /* border */
    overflow: hidden;
    transition: all 0.2s ease;
    height: -moz-fit-content;
    height: fit-content;
}

.cards-grid__card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */
    transform: translateY(-4px);
}

/* Image de la carte */

.cards-grid__card-image {
    width: 100%;
    height: 12rem; /* h-48 */
    overflow: hidden;
}

.cards-grid__image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.2s ease;
}

.cards-grid__card:hover .cards-grid__image {
    transform: scale(1.05);
}

/* Contenu de la carte */

.cards-grid__card-content {
    padding: 1.5rem; /* p-6 */
}

/* Titre de la carte */

.cards-grid__card-title {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: #111827; /* text-gray-900 */
    margin: 0 0 0.75rem 0; /* mb-3 */
    line-height: 1.3;
}

/* Texte de la carte */

.cards-grid__card-text {
    color: #4b5563; /* text-gray-600 */
    line-height: 1.6;
    margin: 0 0 1rem 0; /* mb-4 */
}

/* Action (lien) */

.cards-grid__card-action {
    margin-top: auto;
}

.cards-grid__card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem; /* gap-1 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: var(--accent-color); /* text-indigo-600 */
    text-decoration: none;
    transition: all 0.2s ease;
}

.cards-grid__card-link:hover {
    color: var(--accent-hover); /* hover:text-indigo-500 */
    text-decoration: none;
    gap: 0.5rem; /* Animation du gap */
}

.cards-grid__card-link:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* État vide */

.cards-grid__empty {
    text-align: center;
    padding: 3rem;
    background-color: #ffffff;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.cards-grid__empty p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .cards-grid__container {
        padding: 3rem 1rem;
    }
    
    .cards-grid__title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .cards-grid__grid {
        gap: 1.5rem;
    }
    
    .cards-grid__card-content {
        padding: 1.25rem;
    }
    
    .cards-grid__card-image {
        height: 10rem;
    }
}

/* Adaptation automatique selon le nombre de cartes */

.cards-grid__grid[data-count="1"] {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
}

.cards-grid__grid[data-count="2"] {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .cards-grid__grid[data-count="2"] {
        grid-template-columns: repeat(2, 1fr);
        max-width: 800px;
        margin: 0 auto;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .cards-grid__card,
    .cards-grid__image,
    .cards-grid__card-link {
        transition: none;
    }
    
    .cards-grid__card:hover {
        transform: none;
    }
    
    .cards-grid__card:hover .cards-grid__image {
        transform: none;
    }
}

/* Mode sombre (si besoin futur) */

@media (prefers-color-scheme: dark) {
    .cards-grid {
        background-color: #1f2937;
    }
    
    .cards-grid__card {
        background-color: #374151;
        border-color: #4b5563;
    }
    
    .cards-grid__title {
        color: #f9fafb;
    }
    
    .cards-grid__card-title {
        color: #f9fafb;
    }
    
    .cards-grid__card-text {
        color: #d1d5db;
    }
}

/**
 * Carousel avec Lightbox - Styles CSS
 * Utilise Swiper.js
 * 
 * @package Npru\Theme
 * @since 1.0.0
 */

/* ====================
   Variables CSS
   ==================== */

:root {
  --carousel-gap: 20px;
  --carousel-border-radius: 8px;
  --carousel-overlay-bg: rgba(0, 0, 0, 0.3);
  --carousel-overlay-hover-bg: rgba(0, 0, 0, 0.5);
  --carousel-nav-size: 44px;
  --carousel-nav-color: #fff;
  --carousel-nav-bg: rgba(0, 0, 0, 0.7);
  --carousel-nav-hover-bg: rgba(0, 0, 0, 0.9);
  --lightbox-bg: rgba(0, 0, 0, 0.95);
  --lightbox-nav-size: 60px;
  --lightbox-close-size: 40px;
  --lightbox-z-index: 9999;
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

/* ====================
   Bloc Carousel
   ==================== */

.carousel-lightbox {
  margin: 2rem 0;
}

.carousel-lightbox__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

.carousel-lightbox__title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #333;
}

.carousel-lightbox__wrapper {
  position: relative;
}

/* ====================
   Swiper Customization
   ==================== */

.carousel-lightbox .swiper {
  padding: 0;
  margin: 0;
  overflow: hidden; /* Cache les slides adjacentes */
}

.carousel-lightbox .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.carousel-lightbox .swiper-slide {
  height: auto;
  display: flex;
}

/* ====================
   Slides du Carousel
   ==================== */

.carousel-lightbox__slide {
  position: relative;
  width: 100%;
  height: 300px;
  border-radius: var(--carousel-border-radius);
  overflow: hidden;
  background: #f5f5f5;
  transition: transform var(--transition-fast);
}

.carousel-lightbox__slide:hover {
  transform: translateY(-2px);
}

.carousel-lightbox__image-button {
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: block;
  overflow: hidden;
}

.carousel-lightbox__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform var(--transition-normal);
}

.carousel-lightbox__image-button:hover .carousel-lightbox__image {
  transform: scale(1.05);
}

/* ====================
   Overlay et icône zoom
   ==================== */

.carousel-lightbox__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--carousel-overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.carousel-lightbox__image-button:hover .carousel-lightbox__overlay,
.carousel-lightbox__image-button:focus .carousel-lightbox__overlay {
  opacity: 1;
}

.carousel-lightbox__zoom-icon {
  width: 48px;
  height: 48px;
  color: white;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* ====================
   Légendes des slides
   ==================== */

.carousel-lightbox__slide-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 1rem;
  transform: translateY(100%);
  transition: transform var(--transition-fast);
}

.carousel-lightbox__slide:hover .carousel-lightbox__slide-caption {
  transform: translateY(0);
}

.carousel-lightbox__slide-caption p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* ====================
   Navigation Swiper
   ==================== */

.carousel-lightbox__nav {
  position: absolute;
  width: var(--carousel-nav-size);
  height: var(--carousel-nav-size);
  background: var(--carousel-nav-bg);
  border-radius: 50%;
  color: var(--carousel-nav-color);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.carousel-lightbox__nav:hover {
  background: var(--carousel-nav-hover-bg);
  transform: translateY(-50%) scale(1.1);
}

.carousel-lightbox__nav::after {
  font-size: 18px;
  font-weight: bold;
}

.carousel-lightbox__nav.swiper-button-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.carousel-lightbox__nav.swiper-button-disabled:hover {
  background: var(--carousel-nav-bg);
  transform: translateY(-50%) scale(1);
}

/* ====================
   Pagination Swiper
   ==================== */

.carousel-lightbox__pagination {
  position: relative;
  margin-top: 1.5rem;
  text-align: center;
}

.carousel-lightbox__pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #ccc;
  opacity: 1;
  transition: all var(--transition-fast);
}

.carousel-lightbox__pagination .swiper-pagination-bullet-active {
  background: #007cba;
  transform: scale(1.2);
}

/* ====================
   Lightbox Modal
   ==================== */

.carousel-lightbox__modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--lightbox-z-index);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.carousel-lightbox__modal[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.carousel-lightbox__modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--lightbox-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.carousel-lightbox__modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ====================
   Bouton fermer lightbox
   ==================== */

.carousel-lightbox__modal-close {
  position: absolute;
  top: -60px;
  right: 0;
  width: var(--lightbox-close-size);
  height: var(--lightbox-close-size);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  z-index: 10;
}

.carousel-lightbox__modal-close:hover {
  background: white;
  transform: scale(1.1);
}

.carousel-lightbox__close-icon {
  width: 20px;
  height: 20px;
  color: #333;
}

/* ====================
   Navigation lightbox
   ==================== */

.carousel-lightbox__modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--lightbox-nav-size);
  height: var(--lightbox-nav-size);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  z-index: 10;
}

.carousel-lightbox__modal-nav:hover {
  background: white;
  transform: translateY(-50%) scale(1.1);
}

.carousel-lightbox__modal-nav--prev {
  left: -80px;
}

.carousel-lightbox__modal-nav--next {
  right: -80px;
}

.carousel-lightbox__modal-nav svg {
  width: 24px;
  height: 24px;
  color: #333;
}

/* ====================
   Image lightbox
   ==================== */

.carousel-lightbox__modal-image-container {
  position: relative;
  max-width: 100%;
  max-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-lightbox__modal-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: var(--carousel-border-radius);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* ====================
   Légende et compteur lightbox
   ==================== */

.carousel-lightbox__modal-caption {
  margin-top: 1rem;
  max-width: 600px;
  text-align: center;
}

.carousel-lightbox__modal-caption p {
  color: white;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

.carousel-lightbox__modal-counter {
  margin-top: 0.5rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  font-weight: 500;
}

/* ====================
   État body avec modal ouverte
   ==================== */

body.carousel-lightbox-modal-open {
  overflow: hidden;
}

/* ====================
   Empty state
   ==================== */

.carousel-lightbox__empty {
  padding: 3rem;
  text-align: center;
  background: #f8f9fa;
  border-radius: var(--carousel-border-radius);
  border: 2px dashed #dee2e6;
}

.carousel-lightbox__empty p {
  margin: 0;
  color: #6c757d;
  font-style: italic;
}

/* ====================
   Responsive Design
   ==================== */

@media (max-width: 768px) {
  .carousel-lightbox .swiper {
    padding: 0 30px;
    margin: 0 -30px;
  }
  
  .carousel-lightbox__nav {
    width: 36px;
    height: 36px;
  }
  
  .carousel-lightbox__nav::after {
    font-size: 14px;
  }
  
  .carousel-lightbox__modal-backdrop {
    padding: 1rem;
  }
  
  .carousel-lightbox__modal-close {
    top: -50px;
    width: 36px;
    height: 36px;
  }
  
  .carousel-lightbox__close-icon {
    width: 18px;
    height: 18px;
  }
  
  .carousel-lightbox__modal-nav {
    width: 48px;
    height: 48px;
  }
  
  .carousel-lightbox__modal-nav--prev {
    left: -60px;
  }
  
  .carousel-lightbox__modal-nav--next {
    right: -60px;
  }
  
  .carousel-lightbox__modal-image-container {
    max-height: 60vh;
  }
  
  .carousel-lightbox__slide {
    height: 200px;
  }
}

@media (max-width: 480px) {
  .carousel-lightbox .swiper {
    padding: 0 20px;
    margin: 0 -20px;
  }
  
  .carousel-lightbox__nav {
    width: 32px;
    height: 32px;
  }
  
  .carousel-lightbox__modal-nav--prev {
    left: 10px;
  }
  
  .carousel-lightbox__modal-nav--next {
    right: 10px;
  }
  
  .carousel-lightbox__modal-close {
    top: 10px;
    right: 10px;
  }
  
  .carousel-lightbox__slide {
    height: 180px;
  }
  
  .carousel-lightbox__title {
    font-size: 1.5rem;
  }
}

/* ====================
   Focus et accessibilité
   ==================== */

.carousel-lightbox__image-button:focus,
.carousel-lightbox__nav:focus,
.carousel-lightbox__modal-close:focus,
.carousel-lightbox__modal-nav:focus {
  outline: 2px solid #007cba;
  outline-offset: 2px;
}

/* Animation d'apparition de la modal */

.carousel-lightbox__modal[aria-hidden="false"] .carousel-lightbox__modal-content {
  animation: lightboxFadeIn 0.3s ease;
}

@keyframes lightboxFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===================================
   CONTENT — SPLIT (TEXT + MEDIA)
   =================================== */

.content-split {
    background-color: #ffffff;
}

.content-split__container {
    margin: 0 auto;
    max-width: 1280px; /* max-w-7xl */
    display: grid;
    align-items: center;
    gap: 3rem; /* gap-12 */
    padding: 5rem 1.5rem; /* py-20 px-6 */
}

@media (min-width: 1024px) {
    .content-split__container {
        grid-template-columns: 1fr 1fr; /* lg:grid-cols-2 lg:items-center */
    }
}

/* Contenu texte */

.content-split__content {
    order: 1;
}

@media (min-width: 1024px) {
    .content-split__content {
        order: unset;
    }
}

/* Titre */

.content-split__title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0;
    line-height: 1.2;
}

/* Contenu WYSIWYG */

.content-split__wysiwyg {
    margin-top: 1.5rem; /* mt-6 */
    max-width: none;
    color: #374151; /* text-gray-700 */
}

/* Styles prose pour le WYSIWYG */

.content-split__wysiwyg > * {
    margin-bottom: 1rem;
}

.content-split__wysiwyg > *:last-child {
    margin-bottom: 0;
}

.content-split__wysiwyg p {
    line-height: 1.7;
    margin-bottom: 1rem;
}

.content-split__wysiwyg h2,
.content-split__wysiwyg h3,
.content-split__wysiwyg h4 {
    font-weight: 600;
    color: #111827;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.content-split__wysiwyg h2 {
    font-size: 1.5rem;
}

.content-split__wysiwyg h3 {
    font-size: 1.25rem;
}

.content-split__wysiwyg h4 {
    font-size: 1.125rem;
}

.content-split__wysiwyg ul,
.content-split__wysiwyg ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.content-split__wysiwyg li {
    margin-bottom: 0.5rem;
}

.content-split__wysiwyg a {
    color: var(--accent-color);
    text-decoration: underline;
}

.content-split__wysiwyg a:hover {
    color: var(--accent-hover);
}

.content-split__wysiwyg strong {
    font-weight: 600;
    color: #111827;
}

.content-split__wysiwyg blockquote {
    border-left: 4px solid #e5e7eb;
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #6b7280;
}

/* Action (bouton) */

.content-split__action {
    margin-top: 2rem; /* mt-8 */
}

.content-split__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem; /* rounded-md */
    background-color: #111827; /* bg-gray-900 */
    padding: 0.5rem 1rem; /* py-2 px-4 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: #ffffff;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.content-split__button:hover {
    background-color: #1f2937; /* hover:bg-gray-800 */
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.content-split__button:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.content-split__button:active {
    transform: translateY(0);
}

/* Section média */

.content-split__media {
    position: relative;
    order: 0;
}

@media (min-width: 1024px) {
    .content-split__media {
        order: unset;
    }
}

.content-split__image {
    width: 100%;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow */
    border: 1px solid rgba(17, 24, 39, 0.1); /* ring-1 ring-gray-900/10 */
}

/* Placeholder image */

.content-split__image-placeholder {
    width: 100%;
    height: 300px;
    background-color: #f3f4f6;
    border-radius: 0.75rem;
    border: 2px dashed #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-weight: 500;
}

.content-split__image-placeholder p {
    margin: 0;
}

/* Responsive mobile */

@media (max-width: 1024px) {
    .content-split__container {
        padding: 3rem 1rem;
        gap: 2rem;
    }
    
    .content-split__title {
        font-size: 1.5rem;
    }
    
    .content-split__wysiwyg {
        margin-top: 1rem;
    }
    
    .content-split__action {
        margin-top: 1.5rem;
    }
    
    .content-split__button {
        width: 100%;
        max-width: 300px;
        padding: 0.75rem 1.5rem;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .content-split__button {
        transition: none;
    }
    
    .content-split__button:hover,
    .content-split__button:active {
        transform: none;
    }
}

/* ===================================
   CALL TO ACTION — CENTERED
   =================================== */

.cta-centered {
    background-color: var(--accent-color); /* bg-indigo-600 */
    color: #ffffff;
}

.cta-centered__container {
    margin: 0 auto;
    max-width: 768px; /* max-w-3xl */
    padding: 4rem 1.5rem; /* py-16 px-6 */
    text-align: center;
}

/* Titre */

.cta-centered__title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

/* Texte */

.cta-centered__text {
    margin-top: 0.75rem; /* mt-3 */
    color: #c7d2fe; /* text-indigo-100 */
    line-height: 1.6;
    margin-bottom: 0;
}

/* Section bouton */

.cta-centered__action {
    margin-top: 2rem; /* mt-8 */
}

/* Bouton */

.cta-centered__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem; /* rounded-md */
    background-color: #ffffff;
    padding: 0.75rem 1.25rem; /* py-3 px-5 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: var(--accent-hover); /* text-indigo-700 */
    text-decoration: none;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.cta-centered__button:hover {
    background-color: #eef2ff; /* hover:bg-indigo-50 */
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.cta-centered__button:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.cta-centered__button:active {
    transform: translateY(0);
}

/* Placeholder pour l'éditeur */

.cta-centered--placeholder {
    background-color: #f3f4f6;
    color: #374151;
    padding: 2rem;
    text-align: center;
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
}

.cta-centered--placeholder p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .cta-centered__container {
        padding: 3rem 1rem;
    }
    
    .cta-centered__title {
        font-size: 1.5rem;
    }
    
    .cta-centered__button {
        width: 100%;
        max-width: 300px;
        padding: 1rem 1.5rem;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .cta-centered__button {
        transition: none;
    }
    
    .cta-centered__button:hover {
        transform: none;
    }
    
    .cta-centered__button:active {
        transform: none;
    }
}

/* ===================================
   FAQ — DETAILS NATIFS
   =================================== */

.faq-details {
    background-color: #ffffff;
}

.faq-details__container {
    margin: 0 auto;
    max-width: 768px; /* max-w-3xl */
    padding: 5rem 1.5rem; /* py-20 px-6 */
}

/* Titre */

.faq-details__title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0 0 2rem 0; /* mb-8 */
    line-height: 1.2;
}

/* Liste des questions */

.faq-details__items {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* space-y-4 */
}

/* Question individuelle (élément details) */

.faq-details__item {
    border-radius: 0.5rem; /* rounded-lg */
    border: 1px solid #e5e7eb; /* border */
    padding: 1rem; /* p-4 */
    background-color: #ffffff;
    transition: all 0.2s ease;
}

.faq-details__item:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.faq-details__item[open] {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1px var(--accent-color);
}

/* Question (élément summary) */

.faq-details__question {
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none; /* select-none */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: #111827; /* text-gray-900 */
    line-height: 1.4;
    padding-right: 1rem; /* Pour laisser de la place au chevron natif */
    list-style: none; /* Supprime le triangle par défaut sur certains navigateurs */
}

/* Suppression du triangle par défaut */

.faq-details__question::-webkit-details-marker {
    display: none;
}

.faq-details__question::marker {
    content: none;
}

/* Chevron personnalisé */

.faq-details__question::after {
    content: "▼";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: #6b7280;
    transition: transform 0.2s ease;
}

.faq-details__item {
    position: relative;
}

.faq-details__item[open] .faq-details__question::after {
    transform: translateY(-50%) rotate(180deg);
    color: var(--accent-color);
}

/* Survol de la question */

.faq-details__question:hover {
    color: var(--accent-color);
}

/* Réponse */

.faq-details__answer {
    margin-top: 0.5rem; /* mt-2 */
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* text-gray-600 */
    line-height: 1.6;
    padding-right: 1rem; /* Pour éviter le chevauchement avec le chevron */
}

.faq-details__answer p {
    margin: 0.5rem 0;
}

.faq-details__answer p:first-child {
    margin-top: 0;
}

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

.faq-details__answer ul,
.faq-details__answer ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.faq-details__answer li {
    margin: 0.25rem 0;
}

/* État vide */

.faq-details__empty {
    text-align: center;
    padding: 3rem;
    background-color: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.faq-details__empty p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .faq-details__container {
        padding: 3rem 1rem;
    }
    
    .faq-details__title {
        font-size: 1.5rem;
    }
    
    .faq-details__item {
        padding: 0.75rem;
    }
    
    .faq-details__question::after {
        right: 0.75rem;
    }
    
    .faq-details__answer {
        padding-right: 0.75rem;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .faq-details__item,
    .faq-details__question::after {
        transition: none;
    }
}

/* Focus visible pour l'accessibilité */

.faq-details__question:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Amélioration pour les lecteurs d'écran */

.faq-details__question[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Animation d'ouverture/fermeture (optionnel) */

@media (prefers-reduced-motion: no-preference) {
    .faq-details__answer {
        animation: fadeInUp 0.3s ease-out;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================
   FEATURES — GRID WITH ICONS
   =================================== */

.features-grid {
    background-color: #ffffff;
}

.features-grid__container {
    margin: 0 auto;
    max-width: 1280px; /* max-w-7xl */
    padding: 5rem 1.5rem; /* py-20 px-6 */
}

/* En-tête */

.features-grid__header {
    margin: 0 auto;
    max-width: 672px; /* max-w-2xl */
    text-align: center;
}

.features-grid__title {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0;
    line-height: 1.1;
}

.features-grid__intro {
    margin-top: 1rem; /* mt-4 */
    color: #4b5563; /* text-gray-600 */
    margin-bottom: 0;
    line-height: 1.6;
}

/* Grille des éléments */

.features-grid__items {
    margin-top: 3rem; /* mt-12 */
    display: grid;
    gap: 2rem; /* gap-8 */
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .features-grid__items {
        grid-template-columns: repeat(2, 1fr); /* sm:grid-cols-2 */
    }
}

@media (min-width: 1024px) {
    .features-grid__items {
        grid-template-columns: repeat(3, 1fr); /* lg:grid-cols-3 */
    }
}

/* Élément individuel */

.features-grid__item {
    border-radius: 1rem; /* rounded-2xl */
    border: 1px solid #e5e7eb; /* border */
    padding: 2rem; /* p-8 */
    background-color: #ffffff;
    transition: all 0.2s ease;
}

.features-grid__item:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

/* Icône */

.features-grid__icon {
    margin-bottom: 1rem; /* mb-4 */
}

.features-grid__emoji {
    font-size: 3rem; /* text-3xl */
    line-height: 1;
    display: inline-block;
}

.features-grid__image {
    width: 48px;
    height: 48px;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 0.5rem;
}

/* Titre de l'élément */

.features-grid__item-title {
    margin-top: 1rem; /* mt-4 */
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #111827; /* text-gray-900 */
    margin-bottom: 0;
    line-height: 1.4;
}

/* Texte de l'élément */

.features-grid__item-text {
    margin-top: 0.5rem; /* mt-2 */
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* text-gray-600 */
    line-height: 1.5;
    margin-bottom: 0;
}

/* État vide */

.features-grid__empty {
    margin-top: 3rem;
    text-align: center;
    padding: 3rem;
    background-color: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.features-grid__empty p {
    margin: 0;
    font-weight: 500;
}

/* Placeholder pour l'éditeur */

.features-grid--placeholder {
    background-color: #f3f4f6;
    color: #374151;
    padding: 2rem;
    text-align: center;
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
}

.features-grid--placeholder p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .features-grid__container {
        padding: 3rem 1rem;
    }
    
    .features-grid__title {
        font-size: 1.875rem;
    }
    
    .features-grid__items {
        margin-top: 2rem;
        gap: 1.5rem;
    }
    
    .features-grid__item {
        padding: 1.5rem;
    }
    
    .features-grid__emoji {
        font-size: 2.5rem;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .features-grid__item {
        transition: none;
    }
    
    .features-grid__item:hover {
        transform: none;
    }
}

/* ===================================
   FEATURES — WITH SCREENSHOT
   =================================== */

.features-screenshot {
    background-color: #111827; /* bg-gray-900 */
    color: #ffffff;
}

.features-screenshot__container {
    margin: 0 auto;
    max-width: 1280px; /* max-w-7xl */
    display: grid;
    gap: 3rem; /* gap-12 */
    padding: 6rem 1.5rem; /* py-24 px-6 */
    align-items: center;
}

@media (min-width: 1024px) {
    .features-screenshot__container {
        grid-template-columns: 1fr 1fr; /* lg:grid-cols-2 */
    }
}

/* Contenu texte */

.features-screenshot__content {
    order: 1;
}

@media (min-width: 1024px) {
    .features-screenshot__content {
        order: unset;
    }
}

/* Surtitre */

.features-screenshot__eyebrow {
    font-size: 1rem; /* text-base */
    font-weight: 600; /* font-semibold */
    color: var(--accent-light); /* text-indigo-400 */
    margin: 0;
}

/* Titre principal */

.features-screenshot__title {
    margin-top: 0.5rem; /* mt-2 */
    font-size: 2.25rem; /* text-4xl */
    font-weight: 600; /* font-semibold */
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 0;
}

/* Introduction */

.features-screenshot__intro {
    margin-top: 1.5rem; /* mt-6 */
    color: #d1d5db; /* text-gray-300 */
    line-height: 1.6;
    margin-bottom: 0;
}

/* Liste des fonctionnalités */

.features-screenshot__features {
    margin-top: 2.5rem; /* mt-10 */
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* space-y-6 */
}

/* Fonctionnalité individuelle */

.features-screenshot__feature {
    position: relative;
    padding-left: 1.75rem; /* pl-7 */
}

/* Bullet point */

.features-screenshot__bullet {
    position: absolute;
    left: 0;
    top: 0.25rem; /* top-1 */
    display: inline-block;
    width: 1rem; /* size-4 */
    height: 1rem; /* size-4 */
    border-radius: 0.25rem;
    background-color: var(--accent-opacity-30); /* bg-indigo-400/30 */
}

/* Titre de la fonctionnalité */

.features-screenshot__feature-title {
    font-weight: 600; /* font-semibold */
    color: #ffffff;
    margin: 0;
    line-height: 1.4;
}

/* Texte de la fonctionnalité */

.features-screenshot__feature-text {
    margin-top: 0.25rem;
    color: #d1d5db; /* text-gray-300 */
    line-height: 1.5;
    margin-bottom: 0;
}

/* Section image */

.features-screenshot__image {
    order: 0;
}

@media (min-width: 1024px) {
    .features-screenshot__image {
        order: -1; /* lg:order-first */
        justify-self: end; /* lg:justify-self-end */
    }
}

.features-screenshot__img {
    max-width: 100%;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow */
    border: 1px solid rgba(255, 255, 255, 0.1); /* ring-1 ring-white/10 */
}

/* Placeholder image */

.features-screenshot__img-placeholder {
    max-width: 100%;
    height: 300px;
    background-color: #374151;
    border-radius: 0.75rem;
    border: 2px dashed #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-weight: 500;
}

.features-screenshot__img-placeholder p {
    margin: 0;
}

/* Placeholder pour l'éditeur */

.features-screenshot--placeholder {
    background-color: #f3f4f6;
    color: #374151;
    padding: 2rem;
    text-align: center;
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
}

.features-screenshot--placeholder p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 1024px) {
    .features-screenshot__container {
        padding: 4rem 1rem;
        gap: 2rem;
    }
    
    .features-screenshot__title {
        font-size: 1.875rem;
    }
    
    .features-screenshot__features {
        margin-top: 2rem;
        gap: 1.25rem;
    }
}

/* ===================================
   GALLERY — MASONRY SIMPLE (CSS GRID)
   =================================== */

.gallery-grid {
    background-color: #ffffff;
}

.gallery-grid__container {
    margin: 0 auto;
    max-width: 1280px; /* max-w-7xl */
    padding: 5rem 1.5rem; /* py-20 px-6 */
}

/* Titre */

.gallery-grid__title {
    text-align: center;
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0 0 3rem 0; /* mb-12 */
    line-height: 1.2;
}

/* Grille masonry */

.gallery-grid__grid {
    display: grid;
    gap: 1rem; /* gap-4 */
    grid-template-columns: repeat(2, 1fr);
}

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

.gallery-grid__grid--3-cols {
    grid-template-columns: repeat(2, 1fr);
}

.gallery-grid__grid--4-cols {
    grid-template-columns: repeat(2, 1fr);
}

.gallery-grid__grid--5-cols {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
    .gallery-grid__grid--2-cols {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gallery-grid__grid--3-cols {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .gallery-grid__grid--4-cols {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .gallery-grid__grid--5-cols {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .gallery-grid__grid--2-cols {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gallery-grid__grid--3-cols {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .gallery-grid__grid--4-cols {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .gallery-grid__grid--5-cols {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Item de la galerie */

.gallery-grid__item {
    position: relative;
    border-radius: 0.75rem; /* rounded-xl */
    overflow: hidden;
    background-color: #f3f4f6; /* bg-gray-100 */
    cursor: pointer;
    transition: all 0.2s ease;
}

.gallery-grid__item:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Bouton image (pour l'accessibilité) */

.gallery-grid__image-button {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    position: relative;
}

.gallery-grid__image-button:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Image */

.gallery-grid__image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: all 0.2s ease;
}

.gallery-grid__item:hover .gallery-grid__image {
    transform: scale(1.05);
}

/* Overlay au survol */

.gallery-grid__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s ease;
}

.gallery-grid__item:hover .gallery-grid__overlay {
    opacity: 1;
}

.gallery-grid__zoom-icon {
    width: 2rem; /* w-8 */
    height: 2rem; /* h-8 */
    color: #ffffff;
}

/* Légende */

.gallery-grid__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: #ffffff;
    padding: 1rem;
    transform: translateY(100%);
    transition: transform 0.2s ease;
}

.gallery-grid__item:hover .gallery-grid__caption {
    transform: translateY(0);
}

.gallery-grid__caption p {
    margin: 0;
    font-size: 0.875rem; /* text-sm */
    line-height: 1.4;
}

/* Modal pour l'affichage en grand */

.gallery-grid__modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none; /* Cachée par défaut */
}

.gallery-grid__modal[aria-hidden="false"] {
    display: flex;
}

.gallery-grid__modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.gallery-grid__modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.gallery-grid__modal-close {
    position: absolute;
    top: -3rem;
    right: 0;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease;
}

.gallery-grid__modal-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.gallery-grid__modal-close:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.gallery-grid__close-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.gallery-grid__modal-image {
    max-width: 100%;
    max-height: 80vh;
    -o-object-fit: contain;
       object-fit: contain;
    border-radius: 0.5rem;
}

.gallery-grid__modal-caption {
    margin-top: 1rem;
    text-align: center;
    color: #ffffff;
}

.gallery-grid__modal-caption p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

/* État vide */

.gallery-grid__empty {
    text-align: center;
    padding: 3rem;
    background-color: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.gallery-grid__empty p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .gallery-grid__container {
        padding: 3rem 1rem;
    }
    
    .gallery-grid__title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .gallery-grid__grid {
        gap: 0.75rem;
    }
    
    .gallery-grid__modal-content {
        max-width: 95vw;
    }
    
    .gallery-grid__modal-close {
        top: -2.5rem;
        font-size: 1.25rem;
    }
    
    .gallery-grid__modal-image {
        max-height: 70vh;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .gallery-grid__item,
    .gallery-grid__image,
    .gallery-grid__overlay,
    .gallery-grid__caption,
    .gallery-grid__modal-close {
        transition: none;
    }
    
    .gallery-grid__item:hover {
        transform: none;
    }
    
    .gallery-grid__item:hover .gallery-grid__image {
        transform: none;
    }
}

/* Styles pour masquer le scrollbar du body quand modal ouverte */

body.gallery-modal-open {
    overflow: hidden;
}

/* Animation d'ouverture de la modal */

.gallery-grid__modal[aria-hidden="false"] .gallery-grid__modal-backdrop {
    animation: fadeIn 0.2s ease-out;
}

.gallery-grid__modal[aria-hidden="false"] .gallery-grid__modal-content {
    animation: scaleIn 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Désactiver les animations si préférence utilisateur */

@media (prefers-reduced-motion: reduce) {
    .gallery-grid__modal-backdrop,
    .gallery-grid__modal-content {
        animation: none;
    }
}

/* ===================================
   HERO — CENTERED
   =================================== */

.hero-centered {
    background-color: #111827; /* bg-gray-900 */
    color: #ffffff;
}

.hero-centered__container {
    margin: 0 auto;
    max-width: 768px; /* max-w-3xl */
    padding: 8rem 1.5rem; /* py-32 px-6 */
    text-align: center;
}

/* Surtitre */

.hero-centered__eyebrow {
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: var(--accent-light); /* text-indigo-300 */
    margin: 0;
}

/* Titre principal */

.hero-centered__title {
    margin-top: 0.75rem; /* mt-3 */
    font-size: 3rem; /* text-5xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    line-height: 1.1;
    margin-bottom: 0;
}

/* Version responsive du titre */

@media (min-width: 640px) {
    .hero-centered__title {
        font-size: 3.75rem; /* sm:text-6xl */
    }
}

/* Texte d'introduction */

.hero-centered__lead {
    margin-top: 1.5rem; /* mt-6 */
    font-size: 1.125rem; /* text-lg */
    color: #d1d5db; /* text-gray-300 */
    margin-bottom: 0;
    line-height: 1.6;
}

/* Conteneur des boutons */

.hero-centered__actions {
    margin-top: 2.5rem; /* mt-10 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem; /* gap-4 */
    flex-wrap: wrap;
}

/* Styles des boutons */

.hero-centered__button {
    text-decoration: none;
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem; /* rounded-md */
}

/* Bouton principal */

.hero-centered__button--primary {
    background-color: var(--accent-color); /* bg-indigo-500 */
    color: #ffffff;
    padding: 0.75rem 1.25rem; /* py-3 px-5 */
    border: 2px solid transparent;
}

.hero-centered__button--primary:hover {
    background-color: var(--accent-hover); /* hover:bg-indigo-400 */
    text-decoration: none;
}

.hero-centered__button--primary:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Bouton secondaire */

.hero-centered__button--secondary {
    color: #ffffff;
    padding: 0.75rem 0;
    background: transparent;
    border: none;
}

.hero-centered__button--secondary:hover {
    color: var(--accent-light); /* text-indigo-300 */
    text-decoration: underline;
}

.hero-centered__button--secondary:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Placeholder pour l'éditeur */

.hero-centered--placeholder {
    background-color: #f3f4f6;
    color: #374151;
    padding: 2rem;
    text-align: center;
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
}

.hero-centered--placeholder p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .hero-centered__container {
        padding: 4rem 1rem; /* Réduction du padding sur mobile */
    }
    
    .hero-centered__title {
        font-size: 2.25rem; /* Plus petit sur mobile */
    }
    
    .hero-centered__actions {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .hero-centered__button {
        width: 100%;
        max-width: 300px;
        padding: 0.875rem 1.5rem;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .hero-centered__button {
        transition: none;
    }
}

/* Mode sombre (si le thème le supporte) */

@media (prefers-color-scheme: dark) {
    .hero-centered {
        background-color: #000000;
    }
}

/* ===================================
   HERO — SPLIT IMAGE
   =================================== */

.hero-split {
    background-color: #ffffff;
}

.hero-split__container {
    margin: 0 auto;
    max-width: 1280px; /* max-w-7xl */
    display: grid;
    align-items: center;
    gap: 3rem; /* gap-12 */
    padding: 5rem 1.5rem; /* py-20 px-6 */
}

@media (min-width: 1024px) {
    .hero-split__container {
        grid-template-columns: 1fr 1fr; /* lg:grid-cols-2 */
    }
}

/* Contenu texte */

.hero-split__content {
    order: 1;
}

@media (min-width: 1024px) {
    .hero-split__content {
        order: unset;
    }
}

/* Surtitre */

.hero-split__eyebrow {
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: var(--accent-color); /* text-indigo-600 */
    margin: 0;
}

/* Titre principal */

.hero-split__title {
    margin-top: 0.5rem; /* mt-2 */
    font-size: 2.25rem; /* text-4xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    line-height: 1.1;
    margin-bottom: 0;
}

/* Texte d'introduction */

.hero-split__lead {
    margin-top: 1.5rem; /* mt-6 */
    color: #4b5563; /* text-gray-600 */
    line-height: 1.6;
    margin-bottom: 0;
}

/* Conteneur des boutons */

.hero-split__actions {
    margin-top: 2rem; /* mt-8 */
    display: flex;
    gap: 1rem; /* gap-4 */
    flex-wrap: wrap;
}

/* Styles des boutons */

.hero-split__button {
    text-decoration: none;
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem; /* rounded-md */
}

/* Bouton principal */

.hero-split__button--primary {
    background-color: #111827; /* bg-gray-900 */
    color: #ffffff;
    padding: 0.5rem 1rem; /* py-2 px-4 */
    border: 2px solid transparent;
}

.hero-split__button--primary:hover {
    background-color: #1f2937; /* hover:bg-gray-800 */
    text-decoration: none;
}

.hero-split__button--primary:focus {
    outline: 2px solid #111827;
    outline-offset: 2px;
}

/* Bouton secondaire */

.hero-split__button--secondary {
    color: #111827; /* text-gray-900 */
    padding: 0.5rem 0;
    background: transparent;
    border: none;
}

.hero-split__button--secondary:hover {
    color: var(--accent-color); /* text-indigo-600 */
    text-decoration: underline;
}

.hero-split__button--secondary:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Section image */

.hero-split__image {
    position: relative;
    order: 0;
}

@media (min-width: 1024px) {
    .hero-split__image {
        order: unset;
    }
}

.hero-split__img {
    width: 100%;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow */
    border: 1px solid rgba(17, 24, 39, 0.1); /* ring-1 ring-gray-900/10 */
}

/* Placeholder image */

.hero-split__img-placeholder {
    width: 100%;
    height: 300px;
    background-color: #f3f4f6;
    border-radius: 0.75rem;
    border: 2px dashed #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-weight: 500;
}

.hero-split__img-placeholder p {
    margin: 0;
}

/* Placeholder pour l'éditeur */

.hero-split--placeholder {
    background-color: #f3f4f6;
    color: #374151;
    padding: 2rem;
    text-align: center;
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
}

.hero-split--placeholder p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .hero-split__container {
        padding: 3rem 1rem;
        gap: 2rem;
    }
    
    .hero-split__title {
        font-size: 1.875rem; /* Plus petit sur mobile */
    }
    
    .hero-split__actions {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .hero-split__button {
        width: 100%;
        max-width: 300px;
        padding: 0.75rem 1.5rem;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .hero-split__button {
        transition: none;
    }
}

/* ===================================
   BLOC HERO
   =================================== */

.hero-block {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    overflow: hidden;
}

/* Fond avec overlay */

.hero-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 100%);
    z-index: 1;
}

/* Contenu du hero */

.hero-block .container {
    position: relative;
    z-index: 2;
}

/* Animations d'entrée */

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

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
}

.hero-block h1 {
    animation-delay: 0.2s;
}

.hero-block p {
    animation-delay: 0.4s;
}

.hero-block a {
    animation-delay: 0.6s;
}

/* Responsive */

@media (max-width: 768px) {
    .hero-block h1 {
        font-size: 2.5rem;
        line-height: 1.2;
    }
    
    .hero-block p {
        font-size: 1.125rem;
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    .hero-block h1 {
        font-size: 2rem;
    }
    
    .hero-block p {
        font-size: 1rem;
    }
}

/* États de hover pour les boutons */

.hero-block .btn-primary:hover,
.hero-block .btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.hero-block .btn-outline:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}

/* ===================================
   LOGO CLOUD — SIMPLE
   =================================== */

.logo-cloud {
    background-color: #ffffff;
}

.logo-cloud__container {
    margin: 0 auto;
    max-width: 1280px; /* max-w-7xl */
    padding: 4rem 1.5rem; /* py-16 px-6 */
}

/* Surtitre */

.logo-cloud__eyebrow {
    text-align: center;
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: #6b7280; /* text-gray-500 */
    margin: 0 0 2rem 0; /* mb-8 */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Grille des logos */

.logo-cloud__logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* grid-cols-3 par défaut */
    gap: 2rem; /* gap-8 */
    align-items: center;
    justify-items: center;
}

@media (min-width: 640px) {
    .logo-cloud__logos {
        grid-template-columns: repeat(3, 1fr); /* sm:grid-cols-3 */
    }
}

@media (min-width: 1024px) {
    .logo-cloud__logos {
        grid-template-columns: repeat(6, 1fr); /* lg:grid-cols-6 */
    }
}

/* Logo individuel */

.logo-cloud__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100px;
    transition: all 0.2s ease;
}

.logo-cloud__logo:hover {
    transform: scale(1.05);
}

/* Image du logo */

.logo-cloud__image {
    height: 100%;
    width: auto;
    padding: 16px;
    max-width: 100%;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.2s ease;
    -o-object-fit: contain;
       object-fit: contain;
}

.logo-cloud__logo:hover .logo-cloud__image {
    filter: grayscale(0%);
    opacity: 1;
}

/* État vide */

.logo-cloud__empty {
    text-align: center;
    padding: 3rem;
    background-color: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.logo-cloud__empty p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .logo-cloud__container {
        padding: 1rem;
    }
    
    .logo-cloud__logos {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    /* .logo-cloud__logo {
        height: 60px;
    }
    
    .logo-cloud__image {
        height: 1.5rem;
    } */
}

/* Variantes selon le nombre de logos */

.logo-cloud__logos[data-count="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.logo-cloud__logos[data-count="4"] {
    grid-template-columns: repeat(4, 1fr);
}

.logo-cloud__logos[data-count="5"] {
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1024px) {
    .logo-cloud__logos[data-count="4"],
    .logo-cloud__logos[data-count="5"],
    .logo-cloud__logos[data-count="6"] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .logo-cloud__logos[data-count="3"],
    .logo-cloud__logos[data-count="4"],
    .logo-cloud__logos[data-count="5"],
    .logo-cloud__logos[data-count="6"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .logo-cloud__logo,
    .logo-cloud__image {
        transition: none;
    }
    
    .logo-cloud__logo:hover {
        transform: none;
    }
}

/* ===================================
   NEWSLETTER — CENTERED
   =================================== */

.newsletter-centered {
    background-color: #f9fafb; /* bg-gray-50 */
}

.newsletter-centered__container {
    margin: 0 auto;
    max-width: 768px; /* max-w-3xl */
    padding: 5rem 1.5rem; /* py-20 px-6 */
    text-align: center;
}

/* Titre */

.newsletter-centered__title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0;
    line-height: 1.2;
}

/* Texte */

.newsletter-centered__text {
    margin-top: 0.75rem; /* mt-3 */
    color: #4b5563; /* text-gray-600 */
    line-height: 1.6;
    margin-bottom: 0;
}

/* Formulaire */

.newsletter-centered__form {
    margin: 0 auto;
    margin-top: 2rem; /* mt-8 */
    display: flex;
    max-width: 448px; /* max-w-md */
    gap: 0.75rem; /* gap-3 */
    align-items: stretch;
}

/* Champ email */

.newsletter-centered__input {
    min-width: 0;
    flex: 1; /* flex-1 */
    border-radius: 0.375rem; /* rounded-md */
    border: 1px solid #d1d5db;
    padding: 0.5rem 0.75rem; /* py-2 px-3 */
    font-size: 0.875rem; /* text-sm */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    transition: all 0.2s ease;
}

.newsletter-centered__input::-moz-placeholder {
    color: #9ca3af; /* placeholder:text-gray-400 */
}

.newsletter-centered__input::placeholder {
    color: #9ca3af; /* placeholder:text-gray-400 */
}

.newsletter-centered__input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1); /* focus:ring-2 focus:ring-indigo-500 */
}

/* Bouton */

.newsletter-centered__button {
    border-radius: 0.375rem; /* rounded-md */
    background-color: var(--accent-color); /* bg-indigo-600 */
    padding: 0.5rem 1rem; /* py-2 px-4 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.newsletter-centered__button:hover {
    background-color: var(--accent-hover); /* hover:bg-indigo-500 */
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.newsletter-centered__button:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.newsletter-centered__button:active {
    transform: translateY(0);
}

/* Note */

.newsletter-centered__note {
    margin-top: 1rem;
    color: #6b7280;
    font-style: italic;
}

.newsletter-centered__note small {
    font-size: 0.75rem;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .newsletter-centered__container {
        padding: 3rem 1rem;
    }
    
    .newsletter-centered__title {
        font-size: 1.5rem;
    }
    
    .newsletter-centered__form {
        flex-direction: column;
        gap: 0.75rem;
        max-width: 100%;
    }
    
    .newsletter-centered__input,
    .newsletter-centered__button {
        padding: 0.75rem 1rem;
    }
}

/* États d'envoi (pour JS futur) */

.newsletter-centered__form[data-loading] .newsletter-centered__button {
    opacity: 0.7;
    cursor: not-allowed;
}

.newsletter-centered__form[data-success] {
    opacity: 0.8;
}

.newsletter-centered__form[data-error] .newsletter-centered__input {
    border-color: #dc2626;
}

/* Accessibilité */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .newsletter-centered__input,
    .newsletter-centered__button {
        transition: none;
    }
    
    .newsletter-centered__button:hover,
    .newsletter-centered__button:active {
        transform: none;
    }
}

/* ===================================
   PRICING — 3 TIERS
   =================================== */

.pricing-3 {
    background-color: #ffffff;
}

.pricing-3__container {
    margin: 0 auto;
    max-width: 1280px; /* max-w-7xl */
    padding: 6rem 1.5rem; /* py-24 px-6 */
}

/* En-tête */

.pricing-3__header {
    margin: 0 auto;
    max-width: 672px; /* max-w-2xl */
    text-align: center;
    margin-bottom: 3rem; /* mb-12 */
}

.pricing-3__title {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0;
    line-height: 1.1;
}

.pricing-3__intro {
    margin-top: 1rem; /* mt-4 */
    color: #4b5563; /* text-gray-600 */
    margin-bottom: 0;
    line-height: 1.6;
}

/* Grille des formules */

.pricing-3__plans {
    display: grid;
    gap: 1.5rem; /* gap-6 */
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .pricing-3__plans {
        grid-template-columns: repeat(2, 1fr); /* sm:grid-cols-2 */
    }
}

@media (min-width: 1024px) {
    .pricing-3__plans {
        grid-template-columns: repeat(3, 1fr); /* lg:grid-cols-3 */
    }
}

/* Formule individuelle */

.pricing-3__plan {
    border-radius: 1rem; /* rounded-2xl */
    border: 1px solid #e5e7eb; /* border */
    padding: 2rem; /* p-8 */
    background-color: #ffffff;
    transition: all 0.2s ease;
    position: relative;
}

.pricing-3__plan:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

/* Formule mise en avant */

.pricing-3__plan--featured {
    border: 1px solid var(--accent-color); /* ring-1 ring-indigo-500 */
    box-shadow: 0 0 0 1px var(--accent-color);
}

.pricing-3__plan--featured::before {
    content: "Recommandé";
    position: absolute;
    top: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent-color);
    color: #ffffff;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Nom de la formule */

.pricing-3__plan-name {
    font-size: 1rem; /* text-base */
    font-weight: 600; /* font-semibold */
    color: #111827; /* text-gray-900 */
    margin: 0;
    line-height: 1.4;
}

/* Prix */

.pricing-3__plan-price {
    margin-top: 1rem; /* mt-4 */
    font-size: 2.25rem; /* text-4xl */
    font-weight: 600; /* font-semibold */
    color: #111827; /* text-gray-900 */
    margin-bottom: 0;
    line-height: 1.1;
}

/* Liste des fonctionnalités */

.pricing-3__features {
    margin-top: 1.5rem; /* mt-6 */
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* space-y-2 */
    list-style: none;
    padding: 0;
}

.pricing-3__feature {
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* text-gray-600 */
    line-height: 1.5;
    position: relative;
    padding-left: 1.5rem;
}

.pricing-3__feature::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10b981; /* text-green-500 */
    font-weight: 600;
}

/* Bouton CTA */

.pricing-3__cta {
    margin-top: 2rem; /* mt-8 */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-radius: 0.375rem; /* rounded-md */
    background-color: #111827; /* bg-gray-900 */
    padding: 0.5rem 1rem; /* py-2 px-4 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: #ffffff;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.pricing-3__cta:hover {
    background-color: #1f2937; /* hover:bg-gray-800 */
    text-decoration: none;
    transform: translateY(-1px);
}

.pricing-3__cta:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* CTA pour formule mise en avant */

.pricing-3__plan--featured .pricing-3__cta {
    background-color: var(--accent-color);
}

.pricing-3__plan--featured .pricing-3__cta:hover {
    background-color: var(--accent-hover);
}

/* État vide */

.pricing-3__empty {
    text-align: center;
    padding: 3rem;
    background-color: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.pricing-3__empty p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .pricing-3__container {
        padding: 4rem 1rem;
    }
    
    .pricing-3__title {
        font-size: 1.875rem;
    }
    
    .pricing-3__plan {
        padding: 1.5rem;
    }
    
    .pricing-3__plan-price {
        font-size: 2rem;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .pricing-3__plan,
    .pricing-3__cta {
        transition: none;
    }
    
    .pricing-3__plan:hover,
    .pricing-3__cta:hover {
        transform: none;
    }
}

/* ===================================
   BLOC SERVICES
   =================================== */

.services-block {
    padding: 4rem 0;
    background-color: #f9fafb;
}

/* En-tête de section */

.services-block .text-center h2 {
    color: #111827;
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.services-block .text-center p {
    color: #6b7280;
    font-size: 1.25rem;
    max-width: 42rem;
    margin: 0 auto;
    line-height: 1.6;
}

/* Cartes de services */

.service-card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    transition: all 0.3s ease;
    transform: translateY(0);
}

.service-card:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(-0.5rem);
}

/* Icônes des services */

.service-icon {
    font-size: 2.25rem;
    margin-bottom: 1rem;
    text-align: center;
}

.service-icon img {
    width: 4rem;
    height: 4rem;
    margin: 0 auto;
    -o-object-fit: contain;
       object-fit: contain;
}

.service-icon span {
    font-size: 3.75rem;
    display: block;
}

/* Contenu des services */

.service-content h3 {
    color: #111827;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.service-content p {
    color: #6b7280;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.service-content a {
    color: #3b82f6;
    font-weight: 500;
    transition: color 0.2s ease;
    text-decoration: none;
}

.service-content a:hover {
    color: #1d4ed8;
}

/* Grilles responsives */

.services-block .grid {
    display: grid;
    gap: 2rem;
}

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

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

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

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

/* Responsive */

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

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

/* Animations d'entrée */

.service-card {
    opacity: 0;
    animation: fade-in-up 0.6s ease-out forwards;
}

.service-card:nth-child(1) { animation-delay: 0.1s; }

.service-card:nth-child(2) { animation-delay: 0.2s; }

.service-card:nth-child(3) { animation-delay: 0.3s; }

.service-card:nth-child(4) { animation-delay: 0.4s; }

.service-card:nth-child(5) { animation-delay: 0.5s; }

.service-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================
   STATS — GRID
   =================================== */

.stats-grid {
    background-color: #ffffff;
}

.stats-grid__container {
    margin: 0 auto;
    max-width: 1280px; /* max-w-7xl */
    padding: 4rem 1.5rem; /* py-16 px-6 */
}

/* Grille des statistiques */

.stats-grid__items {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* grid-cols-2 */
    gap: 2rem; /* gap-8 */
    text-align: center;
}

@media (min-width: 640px) {
    .stats-grid__items {
        grid-template-columns: repeat(4, 1fr); /* sm:grid-cols-4 */
    }
}

/* Statistique individuelle */

.stats-grid__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* Libellé */

.stats-grid__label {
    font-size: 0.875rem; /* text-sm */
    color: #6b7280; /* text-gray-500 */
    font-weight: 400;
    margin: 0;
    line-height: 1.4;
}

/* Valeur */

.stats-grid__value {
    margin-top: 0.5rem; /* mt-2 */
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    color: #111827; /* text-gray-900 */
    margin-bottom: 0;
    line-height: 1.1;
}

/* État vide */

.stats-grid__empty {
    text-align: center;
    padding: 3rem;
    background-color: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.stats-grid__empty p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .stats-grid__container {
        padding: 3rem 1rem;
    }
    
    .stats-grid__items {
        gap: 1.5rem;
    }
    
    .stats-grid__value {
        font-size: 1.5rem;
    }
}

/* Animation au scroll (optionnel) */

@media (prefers-reduced-motion: no-preference) {
    .stats-grid__value {
        transition: transform 0.2s ease;
    }
    
    .stats-grid__item:hover .stats-grid__value {
        transform: scale(1.05);
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .stats-grid__value {
        transition: none;
    }
    
    .stats-grid__item:hover .stats-grid__value {
        transform: none;
    }
}

/* ===================================
   STEPS / HOW IT WORKS
   =================================== */

.steps-horizontal {
    background-color: #ffffff;
}

.steps-horizontal__container {
    margin: 0 auto;
    max-width: 1024px; /* max-w-5xl */
    padding: 5rem 1.5rem; /* py-20 px-6 */
}

/* Titre */

.steps-horizontal__title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0 0 2.5rem 0; /* mb-10 */
    line-height: 1.2;
}

/* Liste des étapes */

.steps-horizontal__steps {
    display: grid;
    gap: 2rem; /* gap-8 */
    grid-template-columns: 1fr;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 640px) {
    .steps-horizontal__steps {
        grid-template-columns: repeat(3, 1fr); /* sm:grid-cols-3 */
    }
}

/* Étape individuelle */

.steps-horizontal__step {
    border-radius: 1rem; /* rounded-2xl */
    border: 1px solid #e5e7eb; /* border */
    padding: 1.5rem; /* p-6 */
    background-color: #ffffff;
    position: relative;
    transition: all 0.2s ease;
}

.steps-horizontal__step:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

/* Numéro de l'étape */

.steps-horizontal__step-number {
    font-size: 0.75rem; /* text-xs */
    font-weight: 600; /* font-semibold */
    color: var(--accent-color); /* text-indigo-600 */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

/* Titre de l'étape */

.steps-horizontal__step-title {
    margin-top: 0.5rem; /* mt-2 */
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #111827; /* text-gray-900 */
    margin-bottom: 0;
    line-height: 1.4;
}

/* Texte de l'étape */

.steps-horizontal__step-text {
    margin-top: 0.5rem; /* mt-2 */
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* text-gray-600 */
    line-height: 1.5;
    margin-bottom: 0;
}

/* Connecteurs entre les étapes (sur desktop) */

@media (min-width: 640px) {
    .steps-horizontal__step:not(:last-child)::after {
        content: '→';
        position: absolute;
        top: 50%;
        right: -1.5rem;
        transform: translateY(-50%);
        font-size: 1.5rem;
        color: #d1d5db;
        z-index: 1;
    }
}

/* État vide */

.steps-horizontal__empty {
    text-align: center;
    padding: 3rem;
    background-color: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.steps-horizontal__empty p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .steps-horizontal__container {
        padding: 3rem 1rem;
    }
    
    .steps-horizontal__title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .steps-horizontal__steps {
        gap: 1.5rem;
    }
    
    .steps-horizontal__step {
        padding: 1.25rem;
    }
    
    /* Connecteurs verticaux sur mobile */
    .steps-horizontal__step:not(:last-child)::after {
        content: '↓';
        position: absolute;
        bottom: -1.25rem;
        left: 50%;
        transform: translateX(-50%);
        font-size: 1.25rem;
        color: #d1d5db;
        z-index: 1;
    }
}

/* Animation d'apparition progressive */

@media (prefers-reduced-motion: no-preference) {
    .steps-horizontal__step:nth-child(1) {
        animation-delay: 0ms;
    }
    
    .steps-horizontal__step:nth-child(2) {
        animation-delay: 100ms;
    }
    
    .steps-horizontal__step:nth-child(3) {
        animation-delay: 200ms;
    }
    
    .steps-horizontal__step:nth-child(4) {
        animation-delay: 300ms;
    }
    
    .steps-horizontal__step:nth-child(5) {
        animation-delay: 400ms;
    }
    
    .steps-horizontal__step:nth-child(6) {
        animation-delay: 500ms;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .steps-horizontal__step {
        transition: none;
    }
    
    .steps-horizontal__step:hover {
        transform: none;
    }
}

/* ===================================
   TABS — SIMPLE (SANS JS, VIA ANCHOR)
   =================================== */

.tabs-simple {
    background-color: #f9fafb; /* bg-gray-50 */
}

.tabs-simple__container {
    margin: 0 auto;
    max-width: 1024px; /* max-w-5xl */
    padding: 5rem 1.5rem; /* py-20 px-6 */
}

/* Titre */

.tabs-simple__title {
    text-align: center;
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0 0 3rem 0; /* mb-12 */
    line-height: 1.2;
}

/* Wrapper des onglets */

.tabs-simple__wrapper {
    background-color: #ffffff;
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

/* Navigation des onglets */

.tabs-simple__nav {
    display: flex;
    background-color: #f9fafb; /* bg-gray-50 */
    border-bottom: 1px solid #e5e7eb;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.tabs-simple__nav::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Onglet individuel */

.tabs-simple__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem; /* py-4 px-6 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #6b7280; /* text-gray-500 */
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: -moz-fit-content;
    min-width: fit-content;
}

.tabs-simple__tab:hover {
    color: var(--accent-color); /* hover:text-indigo-600 */
    background-color: #ffffff; /* hover:bg-white */
    text-decoration: none;
}

.tabs-simple__tab:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
    border-radius: 0.25rem;
}

/* Onglet actif */

.tabs-simple__tab--active,
.tabs-simple__tab:target {
    color: var(--accent-color); /* text-indigo-600 */
    background-color: #ffffff; /* bg-white */
    border-bottom-color: var(--accent-color); /* border-indigo-600 */
    font-weight: 600; /* font-semibold */
}

/* Contenu des onglets */

.tabs-simple__content {
    position: relative;
    min-height: 12rem; /* min-h-48 */
}

/* Panel individuel */

.tabs-simple__panel {
    padding: 2rem; /* p-8 */
    display: none;
}

.tabs-simple__panel--active,
.tabs-simple__panel:target {
    display: block;
}

/* Contenu du panel */

.tabs-simple__panel-content {
    color: #374151; /* text-gray-700 */
    line-height: 1.6;
}

.tabs-simple__panel-content > * {
    margin-bottom: 1rem;
}

.tabs-simple__panel-content > *:last-child {
    margin-bottom: 0;
}

.tabs-simple__panel-content p {
    margin-bottom: 1rem;
}

.tabs-simple__panel-content h2,
.tabs-simple__panel-content h3,
.tabs-simple__panel-content h4 {
    font-weight: 600;
    color: #111827;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.tabs-simple__panel-content h2 {
    font-size: 1.5rem;
}

.tabs-simple__panel-content h3 {
    font-size: 1.25rem;
}

.tabs-simple__panel-content h4 {
    font-size: 1.125rem;
}

.tabs-simple__panel-content ul,
.tabs-simple__panel-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.tabs-simple__panel-content li {
    margin-bottom: 0.5rem;
}

.tabs-simple__panel-content a {
    color: var(--accent-color);
    text-decoration: underline;
}

.tabs-simple__panel-content a:hover {
    color: var(--accent-hover);
}

.tabs-simple__panel-content strong {
    font-weight: 600;
    color: #111827;
}

.tabs-simple__panel-content blockquote {
    border-left: 4px solid #e5e7eb;
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #6b7280;
}

/* Système d'ancres CSS pour navigation sans JS */

.tabs-simple__tab:target ~ .tabs-simple__content .tabs-simple__panel {
    display: none;
}

.tabs-simple__panel:target {
    display: block !important;
}

/* Fallback si pas de target */

.tabs-simple__panel:first-child {
    display: block;
}

.tabs-simple__panel:target ~ .tabs-simple__panel:first-child {
    display: none;
}

/* État vide */

.tabs-simple__empty {
    text-align: center;
    padding: 3rem;
    background-color: #ffffff;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.tabs-simple__empty p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 768px) {
    .tabs-simple__container {
        padding: 3rem 1rem;
    }
    
    .tabs-simple__title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .tabs-simple__nav {
        flex-direction: column;
    }
    
    .tabs-simple__tab {
        padding: 0.75rem 1rem;
        text-align: left;
        border-bottom: 1px solid #e5e7eb;
        border-right: none;
    }
    
    .tabs-simple__tab--active,
    .tabs-simple__tab:target {
        border-bottom-color: #e5e7eb;
        border-left: 3px solid var(--accent-color);
    }
    
    .tabs-simple__panel {
        padding: 1.5rem;
    }
}

/* Smooth scroll pour les ancres */

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Animation d'apparition du contenu */

@media (prefers-reduced-motion: no-preference) {
    .tabs-simple__panel {
        animation: fadeInUp 0.3s ease-out;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .tabs-simple__tab,
    .tabs-simple__panel {
        transition: none;
        animation: none;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* Indicateur visuel pour navigation clavier */

.tabs-simple__tab:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Mode sombre (si besoin futur) */

@media (prefers-color-scheme: dark) {
    .tabs-simple {
        background-color: #1f2937;
    }
    
    .tabs-simple__wrapper {
        background-color: #374151;
        border-color: #4b5563;
    }
    
    .tabs-simple__nav {
        background-color: #2d3748;
        border-color: #4b5563;
    }
    
    .tabs-simple__title {
        color: #f9fafb;
    }
    
    .tabs-simple__tab {
        color: #d1d5db;
    }
    
    .tabs-simple__tab:hover,
    .tabs-simple__tab--active,
    .tabs-simple__tab:target {
        color: var(--accent-color);
        background-color: #374151;
    }
    
    .tabs-simple__panel-content {
        color: #e5e7eb;
    }
    
    .tabs-simple__panel-content h2,
    .tabs-simple__panel-content h3,
    .tabs-simple__panel-content h4,
    .tabs-simple__panel-content strong {
        color: #f9fafb;
    }
}

/* ===================================
   TEAM — GRID
   =================================== */

.team-grid {
    background-color: #f9fafb; /* bg-gray-50 */
}

.team-grid__container {
    margin: 0 auto;
    max-width: 1280px; /* max-w-7xl */
    padding: 5rem 1.5rem; /* py-20 px-6 */
}

/* Titre */

.team-grid__title {
    text-align: center;
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0 0 3rem 0; /* mb-12 */
    line-height: 1.2;
}

/* Grille des membres */

.team-grid__grid {
    display: grid;
    gap: 2rem; /* gap-8 */
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .team-grid__grid {
        grid-template-columns: repeat(2, 1fr); /* sm:grid-cols-2 */
    }
}

@media (min-width: 1024px) {
    .team-grid__grid {
        grid-template-columns: repeat(3, 1fr); /* lg:grid-cols-3 */
    }
}

@media (min-width: 1280px) {
    .team-grid__grid {
        grid-template-columns: repeat(4, 1fr); /* xl:grid-cols-4 */
    }
}

/* Membre individuel */

.team-grid__member {
    background-color: #ffffff;
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    border: 1px solid #e5e7eb; /* border */
    padding: 1.5rem; /* p-6 */
    text-align: center;
    transition: all 0.2s ease;
    height: -moz-fit-content;
    height: fit-content;
}

.team-grid__member:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */
    transform: translateY(-4px);
}

/* Photo du membre */

.team-grid__photo {
    width: 5rem; /* w-20 */
    height: 5rem; /* h-20 */
    margin: 0 auto 1rem auto; /* mx-auto mb-4 */
    border-radius: 50%; /* rounded-full */
    overflow: hidden;
    background-color: #f3f4f6; /* bg-gray-100 */
    border: 3px solid #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.team-grid__image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.2s ease;
}

.team-grid__member:hover .team-grid__image {
    transform: scale(1.1);
}

/* Placeholder pour photo manquante */

.team-grid__image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
}

.team-grid__initials {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    text-transform: uppercase;
}

/* Informations du membre */

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

/* Nom */

.team-grid__name {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #111827; /* text-gray-900 */
    margin: 0 0 0.25rem 0; /* mb-1 */
    line-height: 1.3;
}

/* Poste */

.team-grid__position {
    font-size: 0.875rem; /* text-sm */
    color: var(--accent-color); /* text-indigo-600 */
    font-weight: 500; /* font-medium */
    margin: 0 0 0.75rem 0; /* mb-3 */
}

/* Biographie */

.team-grid__bio {
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* text-gray-600 */
    line-height: 1.5;
    margin: 0 0 1rem 0; /* mb-4 */
}

/* Réseaux sociaux */

.team-grid__social {
    display: flex;
    justify-content: center;
    gap: 0.75rem; /* gap-3 */
    margin-top: 1rem;
}

.team-grid__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem; /* w-8 */
    height: 2rem; /* h-8 */
    border-radius: 50%; /* rounded-full */
    background-color: #f3f4f6; /* bg-gray-100 */
    color: #6b7280; /* text-gray-500 */
    text-decoration: none;
    transition: all 0.2s ease;
}

.team-grid__social-link:hover {
    background-color: var(--accent-color); /* hover:bg-indigo-600 */
    color: #ffffff; /* hover:text-white */
    transform: translateY(-1px);
}

.team-grid__social-link:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.team-grid__social-icon {
    width: 1rem; /* w-4 */
    height: 1rem; /* h-4 */
}

/* État vide */

.team-grid__empty {
    text-align: center;
    padding: 3rem;
    background-color: #ffffff;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.team-grid__empty p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .team-grid__container {
        padding: 3rem 1rem;
    }
    
    .team-grid__title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .team-grid__grid {
        gap: 1.5rem;
    }
    
    .team-grid__member {
        padding: 1.25rem;
    }
    
    .team-grid__photo {
        width: 4rem;
        height: 4rem;
    }
    
    .team-grid__initials {
        font-size: 1rem;
    }
    
    .team-grid__name {
        font-size: 1rem;
    }
}

/* Grille adaptative selon le nombre de membres */

.team-grid__grid[data-count="1"] {
    grid-template-columns: 1fr;
    max-width: 300px;
    margin: 0 auto;
}

.team-grid__grid[data-count="2"] {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .team-grid__grid[data-count="2"] {
        grid-template-columns: repeat(2, 1fr);
        max-width: 600px;
        margin: 0 auto;
    }
}

.team-grid__grid[data-count="3"] {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .team-grid__grid[data-count="3"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .team-grid__grid[data-count="3"] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .team-grid__member,
    .team-grid__image,
    .team-grid__social-link {
        transition: none;
    }
    
    .team-grid__member:hover,
    .team-grid__social-link:hover {
        transform: none;
    }
    
    .team-grid__member:hover .team-grid__image {
        transform: none;
    }
}

/* Variantes de couleur pour les placeholders */

.team-grid__image-placeholder:nth-child(4n+1) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.team-grid__image-placeholder:nth-child(4n+2) {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.team-grid__image-placeholder:nth-child(4n+3) {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.team-grid__image-placeholder:nth-child(4n+4) {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

/* ===================================
   BLOC ÉQUIPE
   =================================== */

.team-block {
    padding: 4rem 0;
    background-color: white;
}

/* En-tête de section */

.team-block .text-center h2 {
    color: #111827;
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.team-block .text-center p {
    color: #6b7280;
    font-size: 1.25rem;
    max-width: 42rem;
    margin: 0 auto;
    line-height: 1.6;
}

/* Grilles responsives */

.team-block .grid {
    display: grid;
    gap: 2rem;
}

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

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

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

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

/* Responsive */

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

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

/* Cartes des membres */

.team-member {
    background-color: #f9fafb;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
    transform: translateY(0);
}

.team-member:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(-0.5rem);
}

/* Photo du membre */

.member-photo {
    height: 16rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.member-photo img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.3s ease;
}

.team-member:hover .member-photo img {
    transform: scale(1.05);
}

.member-photo div {
    color: white;
    font-size: 3.75rem;
    font-weight: 700;
    text-align: center;
}

/* Informations du membre */

.member-info {
    padding: 1.5rem;
    text-align: center;
}

.member-info h3 {
    color: #111827;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.member-info .text-primary {
    color: #3b82f6;
    font-weight: 500;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.member-info p {
    color: #6b7280;
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* Liens sociaux */

.member-social {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.member-social a {
    color: #9ca3af;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #f3f4f6;
    transition: all 0.2s ease;
}

.member-social a:hover {
    color: #3b82f6;
    background-color: #dbeafe;
    transform: translateY(-2px);
}

.member-social svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Animations d'entrée */

.team-member {
    opacity: 0;
    animation: fade-in-up 0.6s ease-out forwards;
}

.team-member:nth-child(1) { animation-delay: 0.1s; }

.team-member:nth-child(2) { animation-delay: 0.2s; }

.team-member:nth-child(3) { animation-delay: 0.3s; }

.team-member:nth-child(4) { animation-delay: 0.4s; }

.team-member:nth-child(5) { animation-delay: 0.5s; }

.team-member:nth-child(6) { animation-delay: 0.6s; }

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */

@media (max-width: 768px) {
    .team-block .text-center h2 {
        font-size: 2rem;
    }
    
    .team-block .text-center p {
        font-size: 1.125rem;
    }
    
    .member-photo {
        height: 14rem;
    }
    
    .member-photo div {
        font-size: 3rem;
    }
}

@media (max-width: 480px) {
    .team-block .text-center h2 {
        font-size: 1.75rem;
    }
    
    .team-block .text-center p {
        font-size: 1rem;
    }
    
    .member-photo {
        height: 12rem;
    }
    
    .member-photo div {
        font-size: 2.5rem;
    }
    
    .member-info {
        padding: 1.25rem;
    }
}

/* ===================================
   TESTIMONIALS — CARDS
   =================================== */

.testimonials-cards {
    background-color: #f9fafb; /* bg-gray-50 */
}

.testimonials-cards__container {
    margin: 0 auto;
    max-width: 1280px; /* max-w-7xl */
    padding: 6rem 1.5rem; /* py-24 px-6 */
}

/* Titre */

.testimonials-cards__title {
    text-align: center;
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0 0 3rem 0; /* mb-12 */
    line-height: 1.2;
}

/* Grille des témoignages */

.testimonials-cards__items {
    display: grid;
    gap: 2rem; /* gap-8 */
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .testimonials-cards__items {
        grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
    }
}

/* Témoignage individuel */

.testimonials-cards__item {
    border-radius: 1rem; /* rounded-2xl */
    background-color: #ffffff;
    padding: 2rem; /* p-8 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    border: 1px solid rgba(17, 24, 39, 0.05); /* ring-1 ring-gray-900/5 */
    margin: 0;
    transition: all 0.2s ease;
}

.testimonials-cards__item:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

/* Citation */

.testimonials-cards__quote {
    color: #374151; /* text-gray-700 */
    line-height: 1.6;
    margin: 0;
    font-style: italic;
    position: relative;
}

.testimonials-cards__quote::before {
    content: "\201C";
    font-size: 3rem;
    color: #d1d5db;
    position: absolute;
    top: -1rem;
    left: -0.5rem;
    font-family: serif;
    line-height: 1;
}

/* Auteur */

.testimonials-cards__author {
    margin-top: 1rem; /* mt-4 */
    font-size: 0.875rem; /* text-sm */
    color: #6b7280; /* text-gray-500 */
    margin-bottom: 0;
}

.testimonials-cards__author-name {
    font-weight: 600;
    color: #374151; /* text-gray-700 */
}

.testimonials-cards__author-role {
    font-weight: 400;
}

/* État vide */

.testimonials-cards__empty {
    text-align: center;
    padding: 3rem;
    background-color: #ffffff;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.testimonials-cards__empty p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 768px) {
    .testimonials-cards__container {
        padding: 4rem 1rem;
    }
    
    .testimonials-cards__title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .testimonials-cards__items {
        gap: 1.5rem;
    }
    
    .testimonials-cards__item {
        padding: 1.5rem;
    }
    
    .testimonials-cards__quote::before {
        font-size: 2rem;
        top: -0.5rem;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .testimonials-cards__item {
        transition: none;
    }
    
    .testimonials-cards__item:hover {
        transform: none;
    }
}

/* Variante avec plus de 4 témoignages */

@media (min-width: 1024px) {
    .testimonials-cards__items[data-count="3"],
    .testimonials-cards__items[data-count="6"] {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .testimonials-cards__items[data-count="4"],
    .testimonials-cards__items[data-count="8"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===================================
   TIMELINE — VERTICAL
   =================================== */

.timeline-vertical {
    background-color: #ffffff;
}

.timeline-vertical__container {
    margin: 0 auto;
    max-width: 1024px; /* max-w-5xl */
    padding: 5rem 1.5rem; /* py-20 px-6 */
}

/* Titre */

.timeline-vertical__title {
    text-align: center;
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0 0 3rem 0; /* mb-12 */
    line-height: 1.2;
}

/* Timeline container */

.timeline-vertical__timeline {
    position: relative;
    padding: 0 1rem;
}

/* Ligne centrale verticale */

.timeline-vertical__timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent-color), #06b6d4);
    transform: translateX(-50%);
    z-index: 1;
}

/* Événement individuel */

.timeline-vertical__event {
    position: relative;
    display: flex;
    margin-bottom: 3rem; /* mb-12 */
    align-items: flex-start;
}

/* Événements à gauche */

.timeline-vertical__event--left {
    justify-content: flex-end;
}

.timeline-vertical__event--left .timeline-vertical__content {
    margin-right: 2rem; /* mr-8 */
    text-align: right;
}

/* Événements à droite */

.timeline-vertical__event--right {
    justify-content: flex-start;
}

.timeline-vertical__event--right .timeline-vertical__content {
    margin-left: 2rem; /* ml-8 */
    text-align: left;
}

/* Marker central */

.timeline-vertical__marker {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-vertical__dot {
    width: 1rem; /* w-4 */
    height: 1rem; /* h-4 */
    border-radius: 50%;
    background-color: var(--accent-color); /* bg-indigo-600 */
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 4px #eef2ff; /* ring-4 ring-indigo-50 */
    transition: all 0.2s ease;
}

.timeline-vertical__event:hover .timeline-vertical__dot {
    transform: scale(1.2);
    background-color: var(--accent-hover); /* hover:bg-indigo-700 */
}

/* Contenu de l'événement */

.timeline-vertical__content {
    background-color: #ffffff;
    border-radius: 1rem; /* rounded-2xl */
    padding: 1.5rem; /* p-6 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    border: 1px solid #e5e7eb;
    max-width: 24rem; /* max-w-sm */
    transition: all 0.2s ease;
    position: relative;
}

.timeline-vertical__event:hover .timeline-vertical__content {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */
    transform: translateY(-2px);
}

/* Flèche pointant vers le centre */

.timeline-vertical__content::before {
    content: '';
    position: absolute;
    top: 1.5rem;
    width: 0;
    height: 0;
    border: 8px solid transparent;
}

.timeline-vertical__event--left .timeline-vertical__content::before {
    right: -16px;
    border-left-color: #ffffff;
}

.timeline-vertical__event--right .timeline-vertical__content::before {
    left: -16px;
    border-right-color: #ffffff;
}

/* Date */

.timeline-vertical__date {
    font-size: 0.75rem; /* text-xs */
    font-weight: 600; /* font-semibold */
    color: var(--accent-color); /* text-indigo-600 */
    background-color: #eef2ff; /* bg-indigo-50 */
    padding: 0.25rem 0.5rem; /* py-1 px-2 */
    border-radius: 0.375rem; /* rounded-md */
    display: inline-block;
    margin-bottom: 0.5rem; /* mb-2 */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Titre de l'événement */

.timeline-vertical__event-title {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #111827; /* text-gray-900 */
    margin: 0 0 0.5rem 0; /* mb-2 */
    line-height: 1.3;
}

/* Image de l'événement */

.timeline-vertical__image {
    margin: 0.75rem 0; /* my-3 */
    border-radius: 0.5rem; /* rounded-lg */
    overflow: hidden;
}

.timeline-vertical__img {
    width: 100%;
    height: 8rem; /* h-32 */
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.2s ease;
}

.timeline-vertical__event:hover .timeline-vertical__img {
    transform: scale(1.05);
}

/* Texte de l'événement */

.timeline-vertical__text {
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* text-gray-600 */
    line-height: 1.5;
    margin: 0;
}

/* État vide */

.timeline-vertical__empty {
    text-align: center;
    padding: 3rem;
    background-color: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.timeline-vertical__empty p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 768px) {
    .timeline-vertical__container {
        padding: 3rem 1rem;
    }
    
    .timeline-vertical__title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .timeline-vertical__timeline {
        padding: 0;
    }
    
    /* Timeline linéaire sur mobile */
    .timeline-vertical__timeline::before {
        left: 1rem;
    }
    
    .timeline-vertical__event {
        margin-bottom: 2rem;
        justify-content: flex-start !important;
    }
    
    .timeline-vertical__event--left,
    .timeline-vertical__event--right {
        justify-content: flex-start;
    }
    
    .timeline-vertical__event--left .timeline-vertical__content,
    .timeline-vertical__event--right .timeline-vertical__content {
        margin-left: 2.5rem;
        margin-right: 0;
        text-align: left;
        max-width: calc(100% - 2.5rem);
    }
    
    .timeline-vertical__marker {
        left: 1rem;
    }
    
    .timeline-vertical__content::before {
        top: 1.5rem;
        left: -16px !important;
        right: auto !important;
        border-right-color: #ffffff !important;
        border-left-color: transparent !important;
    }
    
    .timeline-vertical__event {
        align-items: flex-start;
    }
    
    .timeline-vertical__content {
        margin-top: -0.25rem;
    }
}

/* Animations d'apparition */

@media (prefers-reduced-motion: no-preference) {
    .timeline-vertical__event:nth-child(odd) {
        animation: slideInLeft 0.6s ease-out;
        animation-fill-mode: both;
    }
    
    .timeline-vertical__event:nth-child(even) {
        animation: slideInRight 0.6s ease-out;
        animation-fill-mode: both;
    }
    
    .timeline-vertical__event:nth-child(1) { animation-delay: 0.1s; }
    .timeline-vertical__event:nth-child(2) { animation-delay: 0.2s; }
    .timeline-vertical__event:nth-child(3) { animation-delay: 0.3s; }
    .timeline-vertical__event:nth-child(4) { animation-delay: 0.4s; }
    .timeline-vertical__event:nth-child(5) { animation-delay: 0.5s; }
    .timeline-vertical__event:nth-child(6) { animation-delay: 0.6s; }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .timeline-vertical__content,
    .timeline-vertical__dot,
    .timeline-vertical__img {
        transition: none;
    }
    
    .timeline-vertical__event:hover .timeline-vertical__content,
    .timeline-vertical__event:hover .timeline-vertical__dot,
    .timeline-vertical__event:hover .timeline-vertical__img {
        transform: none;
    }
    
    .timeline-vertical__event {
        animation: none;
    }
}

.vp-two-cols {
    width: 100%;
  }

.vp-two-cols__inner {
    display: flex;
    flex-wrap: wrap;
  }

/* 2 colonnes égales en hauteur */

.vp-two-cols__col {
    flex: 1 1 50%;
    display: flex;
  }

/* hauteur minimum pour ne pas que l'image soit trop petite */

.vp-two-cols__col--image {
  min-height: 540px;
}

@media (min-width: 768px) {

  .vp-two-cols__col--image {
    min-height: 640px;
  }
}

/* Contenu interne */

.vp-two-cols__content {
    width: 100%;
    /* padding: 160px 40px 60px;  */
    padding: 32px;
  }

.vp-two-cols__content h1 {
  margin-top: 0px;
}

@media (min-width: 768px) {

  .vp-two-cols__content h1 {
    margin-top: 130px;
  }
}

/* Filler pour la colonne image (permet de garder la même hauteur que la colonne voisine) */

.vp-two-cols__image-filler {
    width: 100%;
  }

/* Alignement vertical */

.vp-two-cols__col--valign-top {
    align-items: flex-start;
    background-position: top !important;
  }

.vp-two-cols__col--valign-center {
    align-items: center;
    background-position: center !important;
  }

.vp-two-cols__col--valign-bottom {
    align-items: flex-end;
    background-position: bottom !important;
  }

.nos-missions .vp-two-cols__col:first-child {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='254.572' height='257.031' data-name='Groupe 4672' viewBox='0 0 254.572 257.031'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23f6efe7' d='M0 0h254.572v257.031H0z' data-name='Rectangle 2755'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)' data-name='Groupe 4672'%3E%3Cpath fill='%23f6efe7' d='M.125 86.074c1.016-8.161 5.532-15.66 10.6-22.559a3.93 3.93 0 0 1-4.141-3.028 7.26 7.26 0 0 1 1.262-5.013c4.446-7.642 13.413-12.774 22.937-14.72-1.535-2.557-5.834-3.532-6.414-6.377-.444-2.178 1.652-4.114 3.8-5.27 6.963-3.742 15.935-3.549 23.676-1.269C64.58 31.59 75 40.8 79.411 51.926c2.35 5.931 3.11 12.384 6.53 17.9 3.22 5.2 8.611 9.171 14.572 11.936a52.03 52.03 0 0 0 25.7 4.637 45.75 45.75 0 0 0 24.087-8.942C158 71.535 162.84 63.294 166.769 55s7.162-16.9 12.451-24.593c6.112-8.885 15.2-16.476 26.356-19.919a7.92 7.92 0 0 1 3.145-9.162 8.95 8.95 0 0 1 5.514-1.3 7.6 7.6 0 0 1 4.971 2.191 9.39 9.39 0 0 1 8.115-1.7 7.97 7.97 0 0 1 5.732 5.319q.189-.029.38-.05.317-.035.636-.045t.637 0q.318.012.634.047t.629.091.62.133.608.173q.3.1.593.212t.574.249q.282.134.552.284t.527.318q.257.167.5.35t.468.381q.225.2.434.41t.4.437q.188.225.356.463t.311.487q.144.25.264.51a1 1 0 0 0 .071.138 1 1 0 0 0 .075.084 1 1 0 0 1 .16.247q.146.281.267.572t.217.587q.1.3.168.6t.119.609q.047.306.071.615t.022.618q0 .309-.026.619t-.074.616q-.049.306-.121.609t-.169.6q-.1.3-.215.589t-.262.573q-.142.282-.308.555t-.354.534c-.031.043-.384.515-.4.507a48.4 48.4 0 0 1 8.243 5.642 14.75 14.75 0 0 1 4.913 7.954c-5.159-1.509-10.6-3.037-15.942-2.159-.6.1-1.291.3-1.5.8-.273.666.465 1.291 1.1 1.729 3.295 2.282 6.028 5.449 6.568 9.1a8.28 8.28 0 0 1-5.555 8.987 10.94 10.94 0 0 1-7.136-.412 19 19 0 0 1-5.83-3.828c1.357 15.573 9.789 29.928 14.091 45.084a86.9 86.9 0 0 1 1.761 40.145 96.6 96.6 0 0 1-7.754 23.256 104.9 104.9 0 0 1-27.786 35.729 103.7 103.7 0 0 1-42.871 21.084c-5.506 1.247-11.314 2.1-16.005 4.924-6.714 4.035-10.255 11.588-17.631 14.606q2.762 8.887 6.287 17.573c8.251.521 16.569 1.823 23.977 5.054.645.281 1.385.749 1.257 1.37-.142.688-1.174.843-1.971.838l-56.661-.352a1.46 1.46 0 0 1-.887-.2c-.566-.441.06-1.228.667-1.625a41 41 0 0 1 10.368-4.84 2.6 2.6 0 0 0 1.163-.574 1.95 1.95 0 0 0 .408-1.168l1.836-15.7a11.82 11.82 0 0 1-6.557-3.659 38.4 38.4 0 0 1-4.254-5.858 30.2 30.2 0 0 0-7.188-8.175c-4.83-3.545-11.211-4.868-17.057-6.923-11.529-4.052-21.366-11.187-29.687-19.275a112.05 112.05 0 0 1-27.4-41.867 6.6 6.6 0 0 1-6.03.017 12.2 12.2 0 0 1-4.4-3.936A26.73 26.73 0 0 1 8.9 122.446a9.27 9.27 0 0 1-5.365-4.274 14 14 0 0 1-1.69-6.3c-.366-6.415 1.872-12.7 4.085-18.821a4.39 4.39 0 0 1-5.071-1.8 7.73 7.73 0 0 1-.729-5.169' data-name='Tracé 6289'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    padding-top: 274px;
    background-position: 50% 50px !important;
  }

.nos-missions .vp-two-cols__col:last-child .vp-two-cols__content {
  padding-left: 1rem;
  padding-right: 1rem;
}

.nos-missions .vp-two-cols__col:last-child .vp-two-cols__content .btn-primary a {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.nos-missions .bg-beige {
    border-radius: 32px;
    padding: 18px;
  }

.nos-missions h3 {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  max-width: 435px;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 800;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(77 158 97 / var(--tw-text-opacity, 1));
}

.nos-missions h2 {
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 465px;
}

/* Responsive */

@media (max-width: 767px) {
    .vp-two-cols__inner {
      flex-direction: column;
    }
  
    .vp-two-cols__col {
      flex: 1 1 100%;
      max-width: 100%;
    }
  
    .vp-two-cols__col--image {
      /* Sur mobile, on peut donner un ratio fixe si on veut un rendu propre */
      min-height: 540px;
    }
  
    .vp-two-cols__content {
      padding: 40px 24px;
    }
    .nos-missions .vp-two-cols__col:first-child {
        padding-top: 266px;
    }
    
    /* Inversion sur mobile */
    .vp-two-cols--reverse .vp-two-cols__inner {
        flex-direction: column-reverse;
    }

  }

/* Bloc chiffres */

[id*="bloc-chiffres-"] {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

[id*="bloc-chiffres-"] strong {
  font-weight: 900;
}

[id*="bloc-chiffres-"] p {
  font-weight: 100 !important;
  font-size: 30px !important;
  line-height: 42px !important;
}

.vp-stats {
  /* pas de background ici, tu le gères au niveau de la section parent si besoin */
}

.vp-stats__inner {
  max-width: 1160px; /* adapte à ta grille */
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

/* Items : 2 colonnes sur mobile (2x2) */

.vp-stats__item {
  width: 50%;
  padding: 32px 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Wrapper du picto pour bien centrer */

.vp-stats__icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}

/* Pictos : hauteur fixe 141px */

.vp-stats__icon {
  height: 141px;
  width: auto;
  display: block;
}

/* Texte */

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

/* Desktop : 4 colonnes + bordures verticales comme sur la maquette */

@media (min-width: 1024px) {
  [id*="bloc-chiffres-"] {
    padding-bottom: 75px;
    padding-top: 32px;
  }
  .vp-stats__item {
    width: 25%;
    padding: 40px 12px;
    border-right-width: 2px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(112 112 112 / var(--tw-border-opacity, 1));
  }

  /* Pas de bordure sur le dernier */
  .vp-stats__item:last-child {
    border-right: none;
  }
  .vp-stats__icon-wrapper {
    margin-bottom: 60px;
  }
}

@media (max-width: 768px) {
  .vp-stats__icon {
    height: 90px;
  }
  [id*="bloc-chiffres-"] .vp-stats__text p {
    font-size: 16px !important;
    line-height: 22px !important;
  }
  .vp-stats__inner {
    padding: 0;
  }
}

body {
  overflow-x: hidden;
  height: auto;
}

/* ===================================
   STYLES GLOBAUX FULL-WIDTH
   =================================== */

/* Classe pour les sections en pleine largeur */

.cta-centered--full-width,
.features-screenshot--full-width,
.hero-centered--full-width,
.testimonials-cards--full-width,
.newsletter-centered--full-width,
.cards-grid--full-width,
.team-grid--full-width,
.tabs-simple--full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Composants personnalisés */

/* Responsive utilities */

/* Animations personnalisées */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* Focus states accessibles */

.focus-visible:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(60 25 0 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
}

/* Scrollbar personnalisée */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

::-webkit-scrollbar-thumb {
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

::-webkit-scrollbar-thumb:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}

.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\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(60 25 0 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary-dark:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(26 58 122 / var(--tw-bg-opacity, 1));
}

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

.hover\:text-primary:hover {
  --tw-text-opacity: 1;
  color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}

.hover\:text-primary-dark:hover {
  --tw-text-opacity: 1;
  color: rgb(26 58 122 / var(--tw-text-opacity, 1));
}

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

.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);
}

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

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

.focus\:ring-2:focus {
  --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);
}

.focus\:ring-primary:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(60 25 0 / var(--tw-ring-opacity, 1));
}

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

.focus-visible\:ring-2:focus-visible {
  --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);
}

.focus-visible\:ring-primary:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(60 25 0 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

.group:hover .group-hover\:visible {
  visibility: visible;
}

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

@media (min-width: 640px) {

  .sm\:block {
    display: block;
  }

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

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

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

  .sm\:grid {
    display: grid;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:w-1\/2 {
    width: 50%;
  }

  .sm\:w-1\/3 {
    width: 33.333333%;
  }

  .sm\:w-1\/4 {
    width: 25%;
  }

  .sm\:w-2\/3 {
    width: 66.666667%;
  }

  .sm\:w-full {
    width: 100%;
  }

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

  .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\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

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

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

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

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

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

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

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

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

  .sm\:gap-1 {
    gap: 0.25rem;
  }

  .sm\:gap-10 {
    gap: 2.5rem;
  }

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

  .sm\:gap-2 {
    gap: 0.5rem;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-5 {
    gap: 1.25rem;
  }

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

  .sm\:gap-8 {
    gap: 2rem;
  }

  .sm\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(2rem * var(--tw-space-x-reverse));
    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\: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));
  }

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

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

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

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

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

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

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

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

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

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

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

@media (min-width: 768px) {

  .md\:\!mb-\[75px\] {
    margin-bottom: 75px !important;
  }

  .md\:mt-\[100px\] {
    margin-top: 100px;
  }

  .md\:mt-\[68px\] {
    margin-top: 68px;
  }

  .md\:block {
    display: block;
  }

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

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

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

  .md\:grid {
    display: grid;
  }

  .md\:hidden {
    display: none;
  }

  .md\:w-1\/2 {
    width: 50%;
  }

  .md\:w-1\/3 {
    width: 33.333333%;
  }

  .md\:w-1\/4 {
    width: 25%;
  }

  .md\:w-2\/3 {
    width: 66.666667%;
  }

  .md\:w-full {
    width: 100%;
  }

  .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\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

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

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

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

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

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

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

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

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

  .md\:gap-1 {
    gap: 0.25rem;
  }

  .md\:gap-10 {
    gap: 2.5rem;
  }

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

  .md\:gap-2 {
    gap: 0.5rem;
  }

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

  .md\:gap-4 {
    gap: 1rem;
  }

  .md\:gap-5 {
    gap: 1.25rem;
  }

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

  .md\:gap-8 {
    gap: 2rem;
  }

  .md\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(2rem * var(--tw-space-x-reverse));
    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .md\: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));
  }

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

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

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

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

  .md\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

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

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

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

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

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

  .md\:pb-\[88px\] {
    padding-bottom: 88px;
  }

  .md\:pt-\[90px\] {
    padding-top: 90px;
  }

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

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

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

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

  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

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

@media (min-width: 1024px) {

  .lg\:mt-\[60px\] {
    margin-top: 60px;
  }

  .lg\:block {
    display: block;
  }

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

  .lg\:inline {
    display: inline;
  }

  .lg\:flex {
    display: flex;
  }

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

  .lg\:grid {
    display: grid;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:w-1\/2 {
    width: 50%;
  }

  .lg\:w-1\/3 {
    width: 33.333333%;
  }

  .lg\:w-1\/4 {
    width: 25%;
  }

  .lg\:w-2\/3 {
    width: 66.666667%;
  }

  .lg\:w-full {
    width: 100%;
  }

  .lg\:\!max-w-\[calc\(100\%_-_16px\)\] {
    max-width: calc(100% - 16px) !important;
  }

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

  .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\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

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

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

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

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

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

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

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

  .lg\:justify-start {
    justify-content: flex-start;
  }

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

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

  .lg\:gap-1 {
    gap: 0.25rem;
  }

  .lg\:gap-10 {
    gap: 2.5rem;
  }

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

  .lg\:gap-2 {
    gap: 0.5rem;
  }

  .lg\:gap-3 {
    gap: 0.75rem;
  }

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

  .lg\:gap-5 {
    gap: 1.25rem;
  }

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

  .lg\:gap-8 {
    gap: 2rem;
  }

  .lg\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(2rem * var(--tw-space-x-reverse));
    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .lg\: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));
  }

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

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

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

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

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

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

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

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

  .lg\:pt-\[50px\] {
    padding-top: 50px;
  }

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

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

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

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

  .lg\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }
}

@media (min-width: 1280px) {

  .xl\:block {
    display: block;
  }

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

  .xl\:inline {
    display: inline;
  }

  .xl\:flex {
    display: flex;
  }

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

  .xl\:grid {
    display: grid;
  }

  .xl\:hidden {
    display: none;
  }

  .xl\:w-1\/2 {
    width: 50%;
  }

  .xl\:w-1\/3 {
    width: 33.333333%;
  }

  .xl\:w-1\/4 {
    width: 25%;
  }

  .xl\:w-2\/3 {
    width: 66.666667%;
  }

  .xl\:w-full {
    width: 100%;
  }

  .xl\:\!max-w-\[1248px\] {
    max-width: 1248px !important;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  .xl\:gap-1 {
    gap: 0.25rem;
  }

  .xl\:gap-10 {
    gap: 2.5rem;
  }

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

  .xl\:gap-2 {
    gap: 0.5rem;
  }

  .xl\:gap-3 {
    gap: 0.75rem;
  }

  .xl\:gap-4 {
    gap: 1rem;
  }

  .xl\:gap-5 {
    gap: 1.25rem;
  }

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

  .xl\:gap-8 {
    gap: 2rem;
  }

  .xl\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(2rem * var(--tw-space-x-reverse));
    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .xl\: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));
  }

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

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

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

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

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

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

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

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

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

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

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