.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}*, ::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:  ;
}  *,
::before,
::after {
box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; }
::before,
::after {
--tw-content: '';
} html,
:host {
line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; -o-tab-size: 4;
tab-size: 4; font-family: Inter, system-ui, sans-serif; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent; } body {
margin: 0; line-height: inherit; } hr {
height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
} h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
} a {
color: inherit;
text-decoration: inherit;
} b,
strong {
font-weight: bolder;
} code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-feature-settings: normal; font-variation-settings: normal; font-size: 1em; } small {
font-size: 80%;
} sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
} table {
text-indent: 0; border-color: inherit; border-collapse: collapse; } button,
input,
optgroup,
select,
textarea {
font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0; padding: 0; } button,
select {
text-transform: none;
} button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
-webkit-appearance: button; background-color: transparent; background-image: none; } :-moz-focusring {
outline: auto;
} :-moz-ui-invalid {
box-shadow: none;
} progress {
vertical-align: baseline;
} ::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
} [type='search'] {
-webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-search-decoration {
-webkit-appearance: none;
} ::-webkit-file-upload-button {
-webkit-appearance: button; font: inherit; } summary {
display: list-item;
} 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;
} dialog {
padding: 0;
} textarea {
resize: vertical;
} input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1; color: #9ca3af; }
input::placeholder,
textarea::placeholder {
opacity: 1; color: #9ca3af; } button,
[role="button"] {
cursor: pointer;
} :disabled {
cursor: default;
} img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; vertical-align: middle; } img,
video {
max-width: 100%;
height: auto;
} [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;
}
} .container { }
.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;
}
.\!mb-\[50px\] {
margin-bottom: 50px !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-\[1280px\] {
max-width: 1280px;
}
.max-w-\[1920px\] {
max-width: 1920px;
}
.max-w-\[727px\] {
max-width: 727px;
}
.max-w-\[900px\] {
max-width: 900px;
}
.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-\[8px\] {
border-radius: 8px;
}
.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-vert {
--tw-border-opacity: 1;
border-color: rgb(77 158 97 / var(--tw-border-opacity, 1));
}
.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-light-bleu {
--tw-bg-opacity: 1;
background-color: rgb(197 229 223 / var(--tw-bg-opacity, 1));
}
.bg-primary {
--tw-bg-opacity: 1;
background-color: rgb(60 25 0 / var(--tw-bg-opacity, 1));
}
.bg-transparent {
background-color: transparent;
}
.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-0 {
padding-left: 0px !important;
padding-right: 0px !important;
}
.\!py-8 {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
.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;
}
.py-\[50px\] {
padding-top: 50px;
padding-bottom: 50px;
}
.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-\[20px\] {
font-size: 20px;
}
.text-\[26px\] {
font-size: 26px;
}
.text-\[32px\] {
font-size: 32px;
}
.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-semibold {
font-weight: 600 !important;
}
.font-bold {
font-weight: 700;
}
.font-medium {
font-weight: 500;
}
.font-semibold {
font-weight: 600;
}
.uppercase {
text-transform: uppercase;
}
.italic {
font-style: italic;
}
.leading-\[28px\] {
line-height: 28px;
}
.leading-\[32px\] {
line-height: 32px;
}
.leading-\[40px\] {
line-height: 40px;
}
.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-primary {
--tw-text-opacity: 1 !important;
color: rgb(60 25 0 / 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;
} body, html {
overflow-x: hidden !important;
background-color: #FAF8F6;
}
main .content {
background-color: #FFF;
}
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;
}
main .container,
.home .entry-content {
padding-left: 0px !important;
padding-right: 0px !important;
}
.home h1 {
margin-bottom: 50px;
font-family: p22-mackinac-pro, sans-serif;
font-size: 32px;
font-weight: 700;
text-transform: uppercase;
line-height: 40px;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .home h1 {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
main h1 {
font-family: p22-mackinac-pro, sans-serif;
font-size: 32px;
font-weight: 700;
text-transform: uppercase;
line-height: 40px;
--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;
}
@media (min-width: 768px) {
main h1 {
font-size: 47px;
line-height: 65px;
}
}
main h2 {
margin-bottom: 2rem;
font-family: p22-mackinac-pro, sans-serif;
font-size: 26px;
font-weight: 700;
text-transform: uppercase;
line-height: 32px;
--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;
}
@media (min-width: 768px) {
main h2 {
font-size: 32px;
line-height: 40px;
}
}
main h3 {
font-family: p22-mackinac-pro, sans-serif;
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
line-height: 28px;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info main h3 {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
main h4 {
font-family: p22-mackinac-pro, sans-serif;
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
line-height: 28px;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.footer-bandeau-content main h4 {
font-weight: 600;
}
.member-info main h4 {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
@media (min-width: 768px) {
main h4 {
font-size: 32px;
line-height: 44px;
}
}
main p {
margin-bottom: 2rem;
font-family: p22-mackinac-pro, sans-serif;
font-size: 1.125rem;
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.125rem;
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 {
scroll-margin-top: 200px;
}
#main .vp-two-cols__col 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;
}
ul.wp-block-list {
padding-left: 24px;
list-style: disc;
}
main .content a {
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info main .content a {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.home #main {
margin-top: 0;
}
b, strong {
font-weight: 600;
}
figure.w-full img {
width: 100%;
}
figure.mx-auto img {
margin-left: auto;
margin-right: auto;
}
figure {
margin-bottom: 0 !important;
}
.home .content > figure img {
aspect-ratio: 1280 / 576;
}
:where(.wp-block-group.has-background) {
padding: 0;
}
main .content > section.wp-block-group {
padding-left: 24px !important;
padding-right: 24px !important;
}
hr {
height: 2px;
background: #3C1900;
border: 0;
margin-bottom: 32px;
}
.page-id-277 .content,
.page-id-279 .content,
.page-id-275 .content {
padding: 90px 160px 170px;
background-color: #FFF;
}
.page-id-277 .content a,
.page-id-279 .content a,
.page-id-275 .content a {
color: #EC7455;
}
@media screen and (max-width: 768px) {
.page-id-277 .content,
.page-id-279 .content,
.page-id-275 .content  {
padding: 32px 24px;
}
}  .skip-link {
position: absolute;
top: -100px;
left: 0;
background: #3C1900;
color: #fff;
padding: 12px 24px;
z-index: 100000;
text-decoration: none;
font-weight: 600;
border-radius: 0 0 4px 0;
transition: top 0.3s ease;
}
.skip-link:focus {
top: 0;
outline: 2px solid #fff;
outline-offset: 2px;
box-shadow: none; } .sr-only,
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.sr-only:focus,
.screen-reader-text:focus {
position: static;
width: auto;
height: auto;
padding: inherit;
margin: inherit;
overflow: visible;
clip: auto;
white-space: inherit;
} .actus-filter:focus-visible {
outline: 2px solid transparent;
box-shadow: 0 0 0 2px #2271b1;
border-radius: 4px;
}  .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: #707070 !important;
border-radius: 2px;
transition: all 0.3s ease;
transform-origin: center;
} .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);
} :root {
--header-height: 72px;
--secondary-menu-height: 48px;
}  .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; }  .mobile-menu-scroll {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 1rem;
height: 100%; min-height: 0; scrollbar-width: thin;
}
.mobile-menu.active {
transform: translateX(0);
background-color: #393939;
} .mobile-menu .mobile-menu-content {
padding: 2rem;
height: 100%;
display: flex;
flex-direction: column;
gap: 2rem;
} .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;
} .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 .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);
} .mobile-menu .sub-menu {
display: none;
background-color: rgba(255, 255, 255, 0.05);
margin: 0;
margin-left: 1rem;
padding-left: 1rem;
overflow: hidden;
} .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);
} .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;
} .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;
} .mobile-menu .mobile-menu-footer {
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
} .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);
} body.menu-open {
overflow: hidden;
} #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);
}
} .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;
} .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;
}
@media (min-width: 1024px) {
.mobile-menu-toggle {
display: none;
}
.desktop-nav {
display: flex;
}
.mobile-menu {
display: none;
}
} .mobile-menu-toggle:focus,
.submenu-toggle:focus {
outline: 2px solid #3b82f6;
outline-offset: 2px;
} .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);
}
}  #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;
}
} .mobile-menu-list > li.btn-egalim > a,
#menu-menu-principal > li.btn-egalim > a {
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
background-color: #145A25;
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-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
background-color: #228039;
} .mobile-menu-list > li.picto-insta,
#menu-menu-principal > li.picto-insta,
.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-insta > a,
#menu-menu-principal > li.picto-insta > a,
.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;
}
#menu-menu-principal > li.picto-insta {
margin-left: -10px;
}
.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(//volaypei.com/wp-content/themes/img/picto-fb.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
text-indent: 0;
transition: all 0.3s ease;
}
.mobile-menu-list > li.picto-insta > a::before,
#menu-menu-principal > li.picto-insta > a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36.427' height='36.427' viewBox='0 0 36.427 36.427'%3E%3Cg fill='rgba(179,179,179,0.87)' data-name='Groupe 5599'%3E%3Cpath d='M18.214 14.411a3.8 3.8 0 1 0 3.8 3.8 3.8 3.8 0 0 0-3.8-3.8' data-name='Tracé 398'/%3E%3Cpath d='M18.214 0a18.214 18.214 0 1 0 18.214 18.214A18.214 18.214 0 0 0 18.214 0M30.12 25.233a4.9 4.9 0 0 1-4.887 4.887H11.195a4.9 4.9 0 0 1-4.886-4.887V11.195a4.9 4.9 0 0 1 4.886-4.886h14.038a4.9 4.9 0 0 1 4.887 4.886Z' data-name='Tracé 399'/%3E%3Cpath d='M24.572 9.072H11.857a2.79 2.79 0 0 0-2.784 2.784v12.715a2.79 2.79 0 0 0 2.784 2.784h12.715a2.79 2.79 0 0 0 2.784-2.784V11.856a2.79 2.79 0 0 0-2.784-2.784m-6.357 15.4a6.26 6.26 0 1 1 6.26-6.26 6.26 6.26 0 0 1-6.26 6.26m6.26-10.924a1.6 1.6 0 1 1 1.6-1.6 1.6 1.6 0 0 1-1.6 1.6' data-name='Tracé 400'/%3E%3Cpath d='M18.214 0a18.214 18.214 0 1 0 18.214 18.214A18.214 18.214 0 0 0 18.214 0M30.12 25.233a4.9 4.9 0 0 1-4.887 4.887H11.195a4.9 4.9 0 0 1-4.886-4.887V11.195a4.9 4.9 0 0 1 4.886-4.886h14.038a4.9 4.9 0 0 1 4.887 4.886Z' data-name='Tracé 402'/%3E%3Cpath d='M24.571 9.072H11.856a2.79 2.79 0 0 0-2.784 2.784v12.715a2.79 2.79 0 0 0 2.784 2.784h12.715a2.79 2.79 0 0 0 2.784-2.784V11.856a2.79 2.79 0 0 0-2.784-2.784m-6.357 15.4a6.26 6.26 0 1 1 6.26-6.26 6.26 6.26 0 0 1-6.26 6.26m6.26-10.924a1.6 1.6 0 1 1 1.6-1.6 1.6 1.6 0 0 1-1.6 1.6' data-name='Tracé 403'/%3E%3C/g%3E%3C/svg%3E");   
background-size: contain;
background-repeat: no-repeat;
background-position: center;
text-indent: 0;
transition: all 0.3s ease;
} @media screen and (min-width: 677px) { #site-header > .container {
position: relative;
} .menu-item, 
.menu-item a {
position: initial !important;
}
.sub-menu {
transform: none !important;
} #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;
} #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); flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 0; transition: opacity 0.5s ease;
} #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;
} #menu-menu-principal > li.menu-item-has-children > .sub-menu.clicked-open {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
} #menu-menu-principal > li.menu-item-has-children > .sub-menu > li {
flex: 1 1 240px;
margin-bottom: 0;
} #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;
} .desktop-nav {
flex-basis: 100%;
}
#menu-menu-principal {
width: 100%;
}
} @media (max-width: 1023px) {
.mobile-menu-toggle {
display: flex;
}
.desktop-nav {
display: none;
}
.mobile-menu {
display: block;
} .mobile-menu .mobile-nav ul {
text-align: right;
}
.mobile-menu .mobile-nav li {
border-bottom: 1px solid #4F4F4E;
text-align: right;
width: 100%;
margin: 0 !important;
}
.mobile-menu .mobile-nav li:last-child {
border-bottom: none;
}
.mobile-menu .mobile-nav a {
color: #FFF;
font-family: var(--font-primary, 'Open Sans', sans-serif);
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
text-align: right;
padding: 1rem 0;
}
.mobile-menu .mobile-nav a:hover,
.mobile-menu .mobile-nav a:focus,
.mobile-menu .mobile-nav li.current-menu-item > a,
.mobile-menu .mobile-nav li.current_page_item > a {
color: #A9C88F;
} .btn-egalim {
display: block !important;
width: 100%;
}
.picto-insta,
.picto-fb {
display: block !important;
width: 100%;
padding: 1rem 0;
}
.mobile-menu-list > li.picto-fb > a,
.mobile-menu-list > li.picto-insta > a {
color: transparent !important;
justify-self: end !important; }
.mobile-menu-list > li.picto-fb > a::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36.984' height='36.76' viewBox='0 0 36.984 36.76'%3E%3Cpath fill='%23fff' d='M18.492 0a18.491 18.491 0 0 0-3.123 36.716v-12.3a.244.244 0 0 0-.244-.244H10.8a.244.244 0 0 1-.244-.244v-4.934a.244.244 0 0 1 .243-.244l4.323-.026a.244.244 0 0 0 .243-.244v-4.5s-.208-5.88 4.927-5.941 6.131 0 6.131 0v4.654l-3.573.019a1.4 1.4 0 0 0-1.481 1.269v4.459a.244.244 0 0 0 .246.244l4.563-.028a.244.244 0 0 1 .243.283l-.806 5.03a.244.244 0 0 1-.241.206h-3.76a.244.244 0 0 0-.244.244V36.76A18.493 18.493 0 0 0 18.492 0' data-name='Tracé 7859'/%3E%3C/svg%3E");
}
.mobile-menu-list > li.picto-insta > a::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36.427' height='36.427' viewBox='0 0 36.427 36.427'%3E%3Cg fill='%23fff' data-name='Groupe 5599'%3E%3Cpath d='M18.214 14.411a3.8 3.8 0 1 0 3.8 3.8 3.8 3.8 0 0 0-3.8-3.8' data-name='Tracé 398'/%3E%3Cpath d='M18.214 0a18.214 18.214 0 1 0 18.214 18.214A18.214 18.214 0 0 0 18.214 0M30.12 25.233a4.9 4.9 0 0 1-4.887 4.887H11.195a4.9 4.9 0 0 1-4.886-4.887V11.195a4.9 4.9 0 0 1 4.886-4.886h14.038a4.9 4.9 0 0 1 4.887 4.886Z' data-name='Tracé 399'/%3E%3Cpath d='M24.572 9.072H11.857a2.79 2.79 0 0 0-2.784 2.784v12.715a2.79 2.79 0 0 0 2.784 2.784h12.715a2.79 2.79 0 0 0 2.784-2.784V11.856a2.79 2.79 0 0 0-2.784-2.784m-6.357 15.4a6.26 6.26 0 1 1 6.26-6.26 6.26 6.26 0 0 1-6.26 6.26m6.26-10.924a1.6 1.6 0 1 1 1.6-1.6 1.6 1.6 0 0 1-1.6 1.6' data-name='Tracé 400'/%3E%3Cpath d='M18.214 0a18.214 18.214 0 1 0 18.214 18.214A18.214 18.214 0 0 0 18.214 0M30.12 25.233a4.9 4.9 0 0 1-4.887 4.887H11.195a4.9 4.9 0 0 1-4.886-4.887V11.195a4.9 4.9 0 0 1 4.886-4.886h14.038a4.9 4.9 0 0 1 4.887 4.886Z' data-name='Tracé 402'/%3E%3Cpath d='M24.571 9.072H11.856a2.79 2.79 0 0 0-2.784 2.784v12.715a2.79 2.79 0 0 0 2.784 2.784h12.715a2.79 2.79 0 0 0 2.784-2.784V11.856a2.79 2.79 0 0 0-2.784-2.784m-6.357 15.4a6.26 6.26 0 1 1 6.26-6.26 6.26 6.26 0 0 1-6.26 6.26m6.26-10.924a1.6 1.6 0 1 1 1.6-1.6 1.6 1.6 0 0 1-1.6 1.6' data-name='Tracé 403'/%3E%3C/g%3E%3C/svg%3E");   
}
.mobile-menu-list > li.btn-egalim > a {
background-color: transparent;
border-radius: 0;
padding: 1rem 0;
color: #FFF;
font-family: var(--font-primary, 'Open Sans', sans-serif);
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
text-align: right;
}
.mobile-menu-list > li.btn-egalim > a:hover,
.mobile-menu-list > li.btn-egalim > a:focus,
.mobile-menu-list > li.btn-egalim.current-menu-item > a,
.mobile-menu-list > li.btn-egalim.current_page_item > a {
color: #A9C88F;
background-color: transparent;
}
}
@media screen and (min-width: 1024px) {
#menu-menu-principal {
gap: 1rem;
}
}
@media screen and (min-width: 1200px) {
#menu-menu-principal {
gap: 50px;
}
#menu-menu-principal > li.picto-insta {
margin-left: -36px;
}
} .complex-menu-banner {
background-color: #234C9B;
color: white;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
height: 50px; z-index: 40; }
@media (max-width: 768px) {
.complex-menu-banner {
height: auto;
}
} .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;
} .is-sticky-header-container.is-sticky #site-header {
position: relative;
z-index: 1;
} 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;
} .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;
} .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;
} @media (max-width: 1023px) {
.complex-submenu ul {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.complex-submenu ul {
grid-template-columns: 1fr;
}
} .is-sticky-header-container.is-sticky,
header#site-header.is-sticky {
transition: transform 0.3s ease;
} .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%);
} .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-listing {
padding-top: 0;
--tw-bg-opacity: 1;
background-color: rgb(246 239 231 / var(--tw-bg-opacity, 1));
}
.nos-missions .blog-listing {
border-radius: 32px;
padding: 18px;
} .actus-filters-section {
padding: 2rem 0;
background-color: #FAF8F4;
}
.actus-pagination,
.actus-content {
background-color: #FFF;
}
.actus-filters-container { margin: 0 auto;
padding: 0 1.5rem;
} @media (max-width: 1023px) {
.actus-filters-section {
padding: 0 0 2rem 0;
}
.actus-filters-container {
padding: 0;
}
}  .actus-filters-mobile {
display: block;
}
.actus-filters--desktop {
display: none !important;
} @media (min-width: 1024px) {
.actus-filters-mobile {
display: none !important;
}
.actus-filters--desktop {
display: flex !important;
}
}
.actus-filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
list-style: none;
margin: 0;
padding: 0;
}
.actus-filter {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 1rem;
padding: 1rem 1.25rem;
cursor: pointer;
transition: all 0.2s ease;
text-align: center; 
flex-basis: 140px;
}
.actus-filter__icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .actus-filter__icon {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.actus-filter__icon svg {
width: 100%;
height: 100%;
}
.actus-filter__label {
font-weight: 500;
white-space: normal;
transition: color 0.2s ease;
font-size: 18px;
color: #99B780;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .actus-filter__label {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}  #actus-filters-mobile-menu {
padding: 0 1.5rem;
} .actus-filters-mobile__toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 1rem 1.5rem;
background-color: #99B780;
border: none;
cursor: pointer;
text-align: left;
transition: background-color 0.2s ease;
}
.actus-filters-mobile__toggle:hover,
.actus-filters-mobile__toggle:focus {
background-color: #8aab6f;
}
.actus-filters-mobile__toggle:focus {
outline: 2px solid transparent;
box-shadow: 0 0 0 2px #2271b1;
}
.actus-filters-mobile__toggle-label {
font-family: var(--font-primary, 'Open Sans', sans-serif);
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .actus-filters-mobile__toggle-label {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.actus-filters-mobile__toggle-icon {
width: 26px;
height: 22px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22.01'%3E%3Cg data-name='Groupe 5599' transform='translate(-324 -599.49)'%3E%3Cpath fill='none' stroke='%233c1900' stroke-linecap='round' stroke-width='2' d='M327.5 600.49v20.01' data-name='Ligne 236'/%3E%3Cpath fill='none' stroke='%233c1900' stroke-linecap='round' stroke-width='2' d='M337.5 600.49v20.01' data-name='Ligne 259'/%3E%3Cpath fill='none' stroke='%233c1900' stroke-linecap='round' stroke-width='2' d='M346.5 600.49v20.01' data-name='Ligne 260'/%3E%3Ccircle cx='3.5' cy='3.5' r='3.5' fill='%233c1900' data-name='Ellipse 26' transform='translate(334 610)'/%3E%3Ccircle cx='3.5' cy='3.5' r='3.5' fill='%233c1900' data-name='Ellipse 30' transform='translate(343 604)'/%3E%3Ccircle cx='3.5' cy='3.5' r='3.5' fill='%233c1900' data-name='Ellipse 29' transform='translate(324 604)'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
flex-shrink: 0;
} .actus-filters-mobile__menu {
position: fixed;
top: 112px;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
height: 100dvh; background-color: #99B780;
z-index: 990;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
display: flex;
flex-direction: column;
overflow: hidden;
}
.actus-filters-mobile__menu.active {
transform: translateX(0);
} .actus-filters-mobile__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0;
border-bottom: 1px solid rgba(60, 25, 0, 0.1);
}
.actus-filters-mobile__title {
font-family: var(--font-primary, 'Open Sans', sans-serif);
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .actus-filters-mobile__title {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.actus-filters-mobile__close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .actus-filters-mobile__close {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.actus-filters-mobile__close {
transition: opacity 0.2s ease;
}
.actus-filters-mobile__close:hover,
.actus-filters-mobile__close:focus {
opacity: 0.7;
}
.actus-filters-mobile__close:focus {
outline: 2px solid transparent;
box-shadow: 0 0 0 2px #2271b1;
border-radius: 4px;
}
.actus-filters-mobile__close svg {
width: 100%;
height: 100%;
} .actus-filters-mobile__list {
list-style: none;
margin: 0;
padding: 0;
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.actus-filter-mobile {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid rgba(60, 25, 0, 0.1);
cursor: pointer;
transition: background-color 0.2s ease;
text-align: right;
}
.actus-filter-mobile:hover,
.actus-filter-mobile:focus {
background-color: rgba(60, 25, 0, 0.05);
}
.actus-filter-mobile:focus {
outline: 2px solid transparent;
box-shadow: inset 0 0 0 2px #2271b1;
}
.actus-filter-mobile:last-child {
border-bottom: none;
}
.actus-filter-mobile__label {
font-family: var(--font-primary, 'Open Sans', sans-serif);
font-size: 18px;
font-weight: 500;
color: #3C1900;
}
.actus-filter-mobile__icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #3C1900;
}
.actus-filter-mobile__icon svg {
width: 100%;
height: 100%;
} .actus-filter-mobile__icon svg,
.actus-filter-mobile__icon svg path,
.actus-filter-mobile__icon svg g {
stroke: #3C1900;
color: #3C1900;
}
.actus-filter-mobile.active .actus-filter-mobile__label {
font-weight: 700;
color: #7B7F53;
}
.actus-filter-mobile.active .actus-filter-mobile__icon {
color: #7B7F53;
}
.actus-filter-mobile.active .actus-filter-mobile__icon svg,
.actus-filter-mobile.active .actus-filter-mobile__icon svg path,
.actus-filter-mobile.active .actus-filter-mobile__icon svg g {
stroke: #7B7F53;
color: #7B7F53;
} .actus-filters-mobile__menu.active .actus-filter-mobile {
opacity: 0;
transform: translateX(-20px);
animation: slideInLeftFilter 0.3s ease-out forwards;
}
.actus-filters-mobile__menu.active .actus-filter-mobile:nth-child(1) { animation-delay: 0.05s; }
.actus-filters-mobile__menu.active .actus-filter-mobile:nth-child(2) { animation-delay: 0.1s; }
.actus-filters-mobile__menu.active .actus-filter-mobile:nth-child(3) { animation-delay: 0.15s; }
.actus-filters-mobile__menu.active .actus-filter-mobile:nth-child(4) { animation-delay: 0.2s; }
.actus-filters-mobile__menu.active .actus-filter-mobile:nth-child(5) { animation-delay: 0.25s; }
.actus-filters-mobile__menu.active .actus-filter-mobile:nth-child(6) { animation-delay: 0.3s; }
.actus-filters-mobile__menu.active .actus-filter-mobile:nth-child(7) { animation-delay: 0.35s; }
.actus-filters-mobile__menu.active .actus-filter-mobile:nth-child(8) { animation-delay: 0.4s; }
@keyframes slideInLeftFilter {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
} body.filters-menu-open {
overflow: hidden;
} .actus-pagination {
padding: 2rem 0 0;
display: flex;
justify-content: end;
}
.actus-pagination__container {
padding: 0 1.5rem;
justify-content: flex-end;
align-items: center;
gap: 0.5rem;
margin: 0 auto;
display: flex;
justify-content: end;
width: 100%;
max-width: none;
}
.actus-pagination--bottom {
padding: 3rem 0 0;
text-align: center;
}
.actus-pagination--bottom .page-numbers,
.actus-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2rem;
height: 2rem;
padding: 0.25rem 0.5rem;
border-radius: 50%;
text-decoration: none;
transition: all 0.2s ease;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .actus-pagination--bottom .page-numbers,.member-info 
.actus-pagination .page-numbers {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.actus-pagination--bottom .page-numbers,
.actus-pagination .page-numbers {
vertical-align: text-bottom;
}
.actus-pagination--bottom .page-numbers svg,
.actus-pagination .page-numbers svg {
width: 25px;
height: 25px;
}
.actus-pagination .page-numbers:hover {
text-decoration: none;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .actus-pagination .page-numbers:hover {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.actus-pagination .page-numbers.current {
--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));
}
.actus-pagination .page-numbers.prev,
.actus-pagination .page-numbers.next {
padding: 0.25rem;
}
.actus-pagination .page-numbers.dots {
cursor: default;
} .actus-content {
padding: 0;
}
.actus-content__container { margin: 0 auto;
padding: 2rem 1.5rem 3rem;
} .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);
}
} .blog-card {
background-color: #FAF8F4;
overflow: hidden; height: auto;
min-height: 325px;
display: flex;
flex-flow: column nowrap;
}
.blog-card__image {
position: relative;
width: 100%;
aspect-ratio: 370 / 202;
overflow: hidden;
height: auto;
}
.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.3s ease;
}
.blog-card:hover .blog-card__thumbnail {
transform: scale(1.05);
}
.blog-card__content {
padding: 1rem;
height: auto;
display: flex;
flex: 1;
flex-flow: column nowrap;
} .blog-card__category-wrapper {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.blog-card__category-icon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .blog-card__category-icon {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.blog-card__category-icon {
color: #A19081;
fill: #A19081;
stroke: #A19081;
}
.blog-card__category-icon svg,
.blog-card__category-icon svg g,
.blog-card__category-icon svg path {
color: #A19081;
stroke: #A19081;
}
.blog-card__category-icon svg {
width: 100%;
height: 100%;
}
.blog-card__category {
font-weight: 500;
color: #A19081;
} .blog-card__title {
margin: 0 0 0.75rem 0;
text-transform: none;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .blog-card__title {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.blog-card__title-link {
font-weight: 600;
text-decoration: none;
line-height: 1.3;
transition: color 0.2s ease;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .blog-card__title-link {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.blog-card__title-link:hover {
--tw-text-opacity: 1;
color: rgb(77 158 97 / var(--tw-text-opacity, 1));
text-decoration: none;
} .blog-card__excerpt {
line-height: 1.6;
margin-bottom: 1rem;
font-size: 1.125rem;
line-height: 1.75rem;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .blog-card__excerpt {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.blog-card__excerpt p {
margin: 0;
} .blog-card__footer {
margin-top: auto;
}
.blog-card__cta {
display: inline-block;
text-decoration: underline;
transition: all 0.2s ease;
color: #145A25;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 600;
}
.footer-bandeau-content .blog-card__cta {
font-weight: 600;
}
.blog-card__cta:hover {
text-decoration: none;
} .single-post {
max-width: none;
}
.single-video-page,
.single-post-page {
padding: 0 !important;
}
.single-post__header,
.single-post__title-wrapper,
.single-post__content,
.single-post__footer {
max-width: 1120px;
margin: auto;
}
.single-video__player,
.single-video__header, 
.single-video__title-wrapper, 
.single-video__footer {
max-width: 1120px;
margin: auto;
}  .single-post__header {
padding: 1.5rem 0;
}
.single-post__header-container {
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.single-post__back-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
transition: color 0.2s ease;
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 .single-post__back-link {
font-weight: 600;
}
.member-info .single-post__back-link {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.single-post__back-link:hover {
--tw-text-opacity: 1;
color: rgb(77 158 97 / var(--tw-text-opacity, 1));
text-decoration: none;
}
.single-post__category {
display: flex;
align-items: center;
gap: 0.5rem;
}
.single-post__category-icon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .single-post__category-icon {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.single-post__category-icon {
color: #A19081;
stroke: #A19081;
}
.single-post__category-icon svg,
.single-post__category-icon svg g,
.single-post__category-icon svg path {
color: #A19081;
stroke: #A19081;
}
.single-post__category-icon svg {
width: 100%;
height: 100%;
}
.single-post__category-label {
font-weight: 600;
color: #A19081;
} .single-post__featured-image {
margin-bottom: 2rem;
}
.single-post__featured-container {
margin: 0 auto;
padding: 0 !important;
}
.single-post__thumbnail {
width: 100%;
height: auto;
border-radius: 0;
} .single-post__title-wrapper {
margin-bottom: 2rem;
}
.single-post__title-container {
margin: 0 auto;
padding: 0 1.5rem;
text-align: center;
}
.single-post__title {
font-weight: 700;
line-height: 1.2;
margin: 0;
text-transform: uppercase;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .single-post__title {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
} .single-post__excerpt-wrapper {
margin-bottom: 2rem;
}
.single-post__excerpt-container {
margin: 0 auto;
padding: 0 1.5rem;
}
.single-post__excerpt {
font-weight: 600;
line-height: 1.5;
margin: 0;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .single-post__excerpt {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
} .single-post__content {
margin-bottom: 3rem;
}
.single-post__content-container {
margin: 0 auto;
padding: 0 1.5rem;
}
.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;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .single-post__content-container p {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.single-post__content-container h2,
.single-post__content-container h3,
.single-post__content-container h4 {
font-weight: 600;
margin-top: 2rem;
margin-bottom: 1rem;
line-height: 1.3;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .single-post__content-container h2,.member-info 
.single-post__content-container h3,.member-info 
.single-post__content-container h4 {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.single-post__content-container ul,
.single-post__content-container ol {
padding-left: 1.5rem;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .single-post__content-container ul,.member-info 
.single-post__content-container ol {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.single-post__content-container li {
margin-bottom: 0.5rem;
line-height: 1.6;
}
.single-post__content-container a {
text-decoration: underline;
--tw-text-opacity: 1;
color: rgb(77 158 97 / var(--tw-text-opacity, 1));
}
.single-post__content-container a:hover {
text-decoration: none;
}
.single-post__content-container blockquote {
border-left: 4px solid;
padding-left: 1rem;
margin: 2rem 0;
font-style: italic;
--tw-border-opacity: 1;
border-color: rgb(77 158 97 / var(--tw-border-opacity, 1));
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .single-post__content-container blockquote {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
} .single-post__footer {
padding: 2rem 0 4rem;
}
.single-post__footer-container {
margin: 0 auto;
padding: 0 1.5rem;
text-align: center;
}
.single-post__back-btn {
display: inline-block;
padding: 0.5rem 90px;
border: 1px solid;
border-radius: 2rem;
text-decoration: none;
font-weight: 600;
transition: all 0.2s ease;
--tw-border-opacity: 1;
border-color: rgb(60 25 0 / var(--tw-border-opacity, 1));
font-size: 1.125rem;
line-height: 1.75rem;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .single-post__back-btn {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.single-post__back-btn:hover {
text-decoration: none;
--tw-bg-opacity: 1;
background-color: rgb(61 126 79 / var(--tw-bg-opacity, 1));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
} .single-video {
max-width: none;
} .single-video__header {
padding: 1.5rem 0;
}
.single-video__header-container { margin: 0 auto;
padding: 0 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.single-video__back-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
transition: color 0.2s ease;
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 .single-video__back-link {
font-weight: 600;
}
.member-info .single-video__back-link {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.single-video__back-link:hover {
--tw-text-opacity: 1;
color: rgb(77 158 97 / var(--tw-text-opacity, 1));
text-decoration: none;
}
.single-video__category {
display: flex;
align-items: center;
gap: 0.5rem;
}
.single-video__category-icon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .single-video__category-icon {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.single-video__category-icon {
color: #A19081;
stroke: #A19081;
}
.single-video__category-icon svg,
.single-video__category-icon svg g,
.single-video__category-icon svg path {
color: #A19081;
stroke: #A19081;
}
.single-video__category-icon svg {
width: 100%;
height: 100%;
}
.single-video__category-label {
font-weight: 600;
color: #A19081;
} .single-video__player {
margin-bottom: 2rem;
}
.single-video__player-container { margin: 0 auto;
padding: 0 1.5rem;
}
.single-video__embed {
position: relative;
padding-bottom: 56.25%; height: 0;
overflow: hidden; border-radius: 8px;
}
@media (min-width: 768px) {
.single-video__embed {
border-radius: 50px;
}
}
.single-video__embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} .single-video__title-wrapper {
margin-bottom: 2rem;
}
.single-video__title-container { margin: 0 auto;
padding: 0 1.5rem;
text-align: center;
}
.single-video__title {
font-weight: 700;
line-height: 1.2;
margin: 0;
text-transform: uppercase;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .single-video__title {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
} .single-video__footer {
padding: 2rem 0 4rem;
}
.single-video__footer-container { margin: 0 auto;
padding: 0 1.5rem;
text-align: center;
}
.single-video__back-btn {
display: inline-block;
padding: 0.5rem 90px;
border: 1px solid;
border-radius: 2rem;
text-decoration: none;
font-weight: 600;
transition: all 0.2s ease;
--tw-border-opacity: 1;
border-color: rgb(60 25 0 / var(--tw-border-opacity, 1));
font-size: 1.125rem;
line-height: 1.75rem;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .single-video__back-btn {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.single-video__back-btn:hover {
text-decoration: none;
--tw-bg-opacity: 1;
background-color: rgb(61 126 79 / var(--tw-bg-opacity, 1));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
} .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);
}
.spinner {
width: 2rem;
height: 2rem;
border: 2px solid #e5e7eb;
border-top-color: currentColor;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 1rem;
--tw-border-opacity: 1;
border-top-color: rgb(77 158 97 / var(--tw-border-opacity, 1));
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
} @media (max-width: 768px) {
.actus-filters {
gap: 0.5rem;
}
.actus-filter {
padding: 0.75rem;
min-width: 80px;
}
.actus-filter__icon {
width: 32px;
height: 32px;
}
.actus-pagination__container {
justify-content: end;
}
.single-post__header-container,
.single-video__header-container {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}
} @media (prefers-reduced-motion: reduce) {
.blog-card,
.blog-card__thumbnail,
.blog-card__cta,
.single-post__back-btn,
.single-video__back-btn {
transition: none;
}
.blog-card:hover .blog-card__thumbnail {
transform: none;
}
.spinner {
animation: none;
}
} .no-results {
padding: 3rem 0;
text-align: center;
}
.no-results__container {
max-width: 600px;
margin: 0 auto;
padding: 0 1.5rem;
}
.no-results__title {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .no-results__title {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.no-results__title {
margin: 0 0 1rem 0;
}
.no-results__content p {
margin-bottom: 1.5rem;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .no-results__content p {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.no-results__actions {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
margin-top: 2rem;
}
@media (min-width: 640px) {
.no-results__actions {
flex-direction: row;
justify-content: center;
}
}
.no-results__home-link,
.no-results__reset-filters {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
border-radius: 0.375rem;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
border: none;
cursor: pointer;
}
.no-results__home-link {
background-color: #4f46e5;
color: #ffffff;
}
.no-results__home-link:hover {
background-color: #3730a3;
text-decoration: none;
}
.no-results__reset-filters {
background-color: #f3f4f6;
color: #374151;
border: 1px solid #d1d5db;
}
.no-results__reset-filters:hover {
background-color: #e5e7eb;
}
#list-of-post article:nth-child(3n-2){
animation-delay: 250ms;
}
#list-of-post article:nth-child(3n-1){
animation-delay: 500ms;
}
#list-of-post article:nth-child(3n){
animation-delay: 750ms;
}
@media screen and (max-width: 768px) {
#list-of-post article {
animation-delay: 0s !important;
}
}  #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;
}
#site-header.sticky {
position: fixed;
top: 0;
z-index: 50;
} .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;
} .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%;
}
figure.main-nav a:hover img::after {
width: 100%;
} .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;
}
.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::after {
display: none;
} .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));
} .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-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));
}
.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-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
} #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));
} .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%;
}
@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-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;
} .btn-primary,
.btn-secondary {
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
}
figure.btn-primary img,figure
.btn-secondary img {
margin-left: auto;
margin-right: auto;
}
#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;
--tw-border-opacity: 1;
border-color: rgb(60 25 0 / var(--tw-border-opacity, 1));
background-color: transparent;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .btn-primary > a {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.btn-primary > a {
border-radius: 9999px; transition: all 0.3s ease;
min-width: auto;
height: auto;
padding: 11px 22px 11px;
font-weight: 600;
letter-spacing: 0.05em;
border-width: 2px;
}
.btn-primary > a:hover {
--tw-border-opacity: 1;
border-color: rgb(61 126 79 / var(--tw-border-opacity, 1));
--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-download {
padding-left: 46px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' data-name='Composant 28 – 11' viewBox='0 0 35 35'%3E%3Cg fill='none' stroke='%233c1900' stroke-width='2' data-name='Ellipse 18'%3E%3Ccircle cx='17.5' cy='17.5' r='17.5' stroke='none'/%3E%3Ccircle cx='17.5' cy='17.5' r='16.5'/%3E%3C/g%3E%3Cg fill='none' stroke='%233c1900' stroke-width='2' data-name='Groupe 5546'%3E%3Cpath d='M17.5 7.155v17.66' data-name='Tracé 7711'/%3E%3Cpath d='m8.211 15.985 9.289 9.289 9.289-9.289' data-name='Tracé 7712'/%3E%3C/g%3E%3C/svg%3E");
background-size: 35px 35px;
background-position: left center;
background-repeat: no-repeat;
display: block;
min-height: 35px;
background-size: 35px 100%;
padding-top: 3px;
}
.btn-download:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' data-name='Composant 28 – 11' viewBox='0 0 35 35'%3E%3Cg fill='%23228039' stroke='%23228039' stroke-width='2' data-name='Ellipse 18'%3E%3Ccircle cx='17.5' cy='17.5' r='17.5' stroke='none'/%3E%3Ccircle cx='17.5' cy='17.5' r='16.5' fill='none'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' data-name='Groupe 5546'%3E%3Cpath d='M17.5 7.155v17.66' data-name='Tracé 7711'/%3E%3Cpath d='m8.211 15.985 9.289 9.289 9.289-9.289' data-name='Tracé 7712'/%3E%3C/g%3E%3C/svg%3E");
}
.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;
}
.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));
} .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;
}
.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;
} .title-banner {
background-color: #F7EFE7;
padding: 220px 0 4rem;
}
.title-banner__container {
max-width: 1920px;
margin: 0 auto;
padding: 0 1.5rem;
text-align: center;
}
.title-banner__icon-wrapper {
display: flex;
justify-content: center;
margin-bottom: 1.75rem;
}
.title-banner__icon {
width: 150px;
height: auto;
-o-object-fit: contain;
object-fit: contain;
}
.title-banner__title {
color: #3e1d0c;
font-weight: 700;
text-transform: uppercase;
font-size: 47px;
line-height: 65px;
margin: 0;
text-align: center;
max-width: 732px;
margin: auto;
}
@media (max-width: 768px) {
.title-banner {
padding: 140px 0 3rem;
}
.title-banner__icon {
width: 120px;
}
.title-banner__title {
font-size: 32px;
line-height: 40px;
}
} .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;
}
figure.form-input img {
width: 100%;
}
.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;
}
figure.form-textarea img {
width: 100%;
}
.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;
}
figure.form-select img {
width: 100%;
}
.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));
} .container {
margin-left: auto;
margin-right: auto;
max-width: 1920px;
}
figure.container img {
margin-left: auto;
margin-right: auto;
}
.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-left: 1.5rem;
padding-right: 1.5rem;
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(//volaypei.com/wp-content/themes/img/poulaga.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 342px;
width: 432px;
z-index: 1;
} @media (max-width: 768px) {
.main-nav {
display: none;
}
.mobile-menu-toggle {
display: block;
}
.container { }
.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;
}
} @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-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;
} ::-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));
} @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));
}
}
.leaflet-container a.leaflet-popup-close-button {
position: absolute;
top: 4px;
right: 4px;
}  .page-id-271 #main {
}
.page-id-271 #main .content {
--tw-bg-opacity: 1 !important;
background-color: rgb(132 201 191 / var(--tw-bg-opacity, 1)) !important;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.page-id-271 #main h2 {
padding-top: 73px;
}
.wpcf7-form {
padding-bottom: 40px;
}
.wpcf7-response-output {
margin: 32px auto !important;
max-width: 640px;
font-family: p22-mackinac-pro, sans-serif;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 400;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .wpcf7-response-output {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.cf7-form {
max-width: 640px;
margin: 0 auto;
}
.cf7-title {
text-align: center;
margin-bottom: 40px;
} .cf7-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.cf7-form .cf7-field p {
margin-bottom: 0 !important;
}
.cf7-field--full {
grid-column: 1 / -1;
} .cf7-form input[type="text"],
.cf7-form input[type="email"],
.cf7-form input[type="tel"],
.cf7-form textarea {
width: 100%;
padding: 16px 20px;
border: none;
background: #ffffff;
font-size: 18px;
line-height: 1.4;
box-sizing: border-box;
border-radius: 0;
&::-moz-placeholder {
font-family: p22-mackinac-pro, sans-serif;
}
&::placeholder {
font-family: p22-mackinac-pro, sans-serif;
}
&::-moz-placeholder {
font-size: 1.125rem;
line-height: 1.75rem;
}
&::placeholder {
font-size: 1.125rem;
line-height: 1.75rem;
}
&::-moz-placeholder {
font-weight: 400;
}
&::placeholder {
font-weight: 400;
}
&::-moz-placeholder {
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
&::placeholder {
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info &::-moz-placeholder {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.member-info &::placeholder {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
}
.cf7-form textarea {
min-height: 220px;
resize: vertical;
} .cf7-form ::-moz-placeholder {
opacity: 1;
}
.cf7-form ::placeholder {
opacity: 1;
} .cf7-consent {
margin: 32px 0;
}
.cf7-consent .wpcf7-list-item {
margin: 0;
}
.cf7-consent label {
display: flex;
gap: 12px;
align-items: flex-start;
cursor: pointer;
}
.cf7-consent input[type="checkbox"] {
margin-top: 6px;
border-radius: 20px;
border: none;
} .cf7-actions {
text-align: center;
}
#main .cf7-actions p {
margin-bottom: 0;
}
input[type="submit"] {
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(60 25 0 / var(--tw-border-opacity, 1));
background-color: transparent;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info input[type="submit"] {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
input[type="submit"] {
border-radius: 9999px; transition: all 0.3s ease;
min-width: auto;
height: auto;
padding: 8px 36px 8px;
font-weight: 600;
letter-spacing: 0.05em;
border: 2px solid #3C1900;
}
input[type="submit"]:hover {
--tw-border-opacity: 1;
border-color: rgb(61 126 79 / var(--tw-border-opacity, 1));
--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;
}
.cf7-actions {
position: relative;
}
.wpcf7-spinner {
position: absolute;
top: 13px;
left: calc(50% + 20px);
} .wpcf7-not-valid-tip {
font-size: 14px;
margin-top: 6px;
}
.wpcf7-response-output {
margin-top: 24px;
border: none;
} @media (max-width: 768px) {
.cf7-grid {
grid-template-columns: 1fr;
}
.cf7-consent input[type="checkbox"] {
width: 16px;
height: 16px;
}
.cf7-consent input[type="checkbox"]:before {
width: 16px;
height: 16px;
margin: 0;
}
}  .professor {
font-family: "professor", sans-serif;
font-weight: 400;
font-style: normal;
}  #site-footer {
margin-top: auto; } .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;
} .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; } .footer-bandeau {
background-color: #111827; border-top: 1px solid #374151; }
.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;
} .footer-copyright {
background-color: #111827; border-top: 1px solid #374151; }
.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: center;
align-items: center;
gap: 6rem;
}
#menu-footer-2 li {
margin-top: 0;
margin-bottom: 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;
} @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;
}
} .footer-column + .footer-column {
margin-top: 2rem;
}
@media (min-width: 768px) {
.footer-column + .footer-column {
margin-top: 0;
}
} .footer-content a {
color: #3b82f6;
text-decoration: underline;
transition: color 0.2s ease;
}
.footer-content a:hover {
color: #1d4ed8;
} .footer-content img {
max-width: 100%;
height: auto;
border-radius: 0.375rem;
} .footer-content ul,
.footer-content ol {
margin: 0.5rem 0;
padding-left: 1.5rem;
}
.footer-content li {
margin: 0.25rem 0;
}
#main.page-404 .content {
--tw-bg-opacity: 1;
background-color: rgb(197 229 223 / var(--tw-bg-opacity, 1));
text-align: center;
}
.services-block #main.page-404 .content h2 {
color: #111827;
font-size: 2.25rem;
font-weight: 700;
margin-bottom: 1rem;
line-height: 1.2;
}
.services-block #main.page-404 .content p {
color: #6b7280;
font-size: 1.25rem;
max-width: 42rem;
margin: 0 auto;
line-height: 1.6;
}
.team-block #main.page-404 .content h2 {
color: #111827;
font-size: 2.25rem;
font-weight: 700;
margin-bottom: 1rem;
line-height: 1.2;
}
.team-block #main.page-404 .content p {
color: #6b7280;
font-size: 1.25rem;
max-width: 42rem;
margin: 0 auto;
line-height: 1.6;
}
@media (max-width: 768px) {
.team-block #main.page-404 .content h2 {
font-size: 2rem;
}
.team-block #main.page-404 .content p {
font-size: 1.125rem;
}
}
@media (max-width: 480px) {
.team-block #main.page-404 .content h2 {
font-size: 1.75rem;
}
.team-block #main.page-404 .content p {
font-size: 1rem;
}
}
#main.page-404 .content {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1304.074' height='346.141' viewBox='0 0 1304.074 346.141'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='none' stroke='%233c1900' stroke-width='2' d='M0 0h1304.074v346.141H0z' data-name='Rectangle 3461'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg fill='none' stroke='%233c1900' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' clip-path='url(%23a)' data-name='Groupe 5550'%3E%3Cpath d='M.351 345.79a354.04 354.04 0 0 0 250.346-103.7h0a354.04 354.04 0 0 1 250.346-103.7h150.63' data-name='Tracé 7771'/%3E%3Cpath d='M1303.723 345.761a354.04 354.04 0 0 1-250.346-103.7h0a354.04 354.04 0 0 0-250.346-103.7h-150.63' data-name='Tracé 7772'/%3E%3Cpath d='M509.483 66.845c0 19.424-11.777 28.476-21.978 28.476s-21.978-9.053-21.978-28.476 11.777-48.558 21.978-48.558 21.978 29.134 21.978 48.558' data-name='Tracé 7773'/%3E%3Cpath d='M487.505 138.217V56.804' data-name='Ligne 213'/%3E%3Cpath d='m495.529 65.658-8.024 15.691-6.3-8.45' data-name='Tracé 7774'/%3E%3Cpath d='M142.576 251.453c0 19.424-11.777 28.477-21.978 28.477s-21.978-9.052-21.978-28.477 11.777-48.558 21.978-48.558 21.978 29.134 21.978 48.558' data-name='Tracé 7775'/%3E%3Cpath d='M120.598 322.824v-81.413' data-name='Ligne 214'/%3E%3Cpath d='m128.622 250.265-8.024 15.691-6.3-8.449' data-name='Tracé 7776'/%3E%3Cpath d='M273.44 178.408c0 16.015-9.71 23.48-18.121 23.48s-18.122-7.464-18.122-23.48 9.71-34.776 18.122-34.776 18.121 18.76 18.121 34.776' data-name='Tracé 7777'/%3E%3Cpath d='M255.318 237.256v-67.127' data-name='Ligne 215'/%3E%3Cpath d='m261.934 177.429-6.615 12.938-5.2-6.967' data-name='Tracé 7778'/%3E%3Cpath d='M933.157 98.817c0 16.016-9.71 23.48-18.121 23.48s-18.122-7.464-18.122-23.48 9.711-34.776 18.122-34.776 18.121 18.76 18.121 34.776' data-name='Tracé 7779'/%3E%3Cpath d='M915.036 157.665V90.538' data-name='Ligne 216'/%3E%3Cpath d='m921.652 97.838-6.615 12.938-5.2-6.967' data-name='Tracé 7780'/%3E%3Cpath d='M192.587 288.658v-56.859' data-name='Ligne 217'/%3E%3Cpath d='m198.608 238.016-6.019 9.559-6.3-6.145' data-name='Tracé 7781'/%3E%3Cpath d='M220.22 233.882a18 18 0 0 0-3.29-10.382 12.893 12.893 0 0 0-12.518-14.488 8.5 8.5 0 0 0-14.864 1.975 12.256 12.256 0 0 0-20.344 12.7 16.715 16.715 0 0 0 18.012 28.071 8.481 8.481 0 0 0 15.122.208 18.084 18.084 0 0 0 17.882-18.084' data-name='Tracé 7782'/%3E%3Cpath d='M719.302 90.977v47.436h-49.748V90.977' data-name='Tracé 7783'/%3E%3Cpath d='M766.454 82.303v56.1H719.3' data-name='Tracé 7784'/%3E%3Cpath d='M732.393 137.824v-29.159h24.7v29.154' data-name='Tracé 7785'/%3E%3Cpath d='M750.092 87.524a5.346 5.346 0 1 1-5.346-5.347 5.345 5.345 0 0 1 5.346 5.347' data-name='Tracé 7786'/%3E%3Cpath d='m773.431 90.975-27.064-33.639h-67.492l-17.824 33.639h58.252l27.064-33.639' data-name='Tracé 7787'/%3E%3Cpath d='m716.647 83.05 17.498-19.574' data-name='Ligne 218'/%3E%3Cpath d='M757.095 137.824v-29.159h-24.7v29.154' data-name='Tracé 7788'/%3E%3Cpath d='M579.903 122.072a15.7 15.7 0 1 1-15.7-15.7 15.7 15.7 0 0 1 15.7 15.7' data-name='Tracé 7789'/%3E%3Cpath d='M575.121 122.072a10.912 10.912 0 1 1-10.912-10.912 10.91 10.91 0 0 1 10.912 10.912' data-name='Tracé 7790'/%3E%3Ccircle cx='11.727' cy='11.727' r='11.727' data-name='Ellipse 21' transform='translate(601.602 114.316)'/%3E%3Ccircle cx='6.941' cy='6.941' r='6.941' data-name='Ellipse 22' transform='translate(606.388 119.101)'/%3E%3Cpath d='M549.104 107.07c3.218-3.858 8.134-6.944 15.625-6.944 19.976 0 21.945 21.945 21.945 21.945h15.619' data-name='Tracé 7791'/%3E%3Cpath d='M558.828 100.853v-26.8h25.63l7.739 26.442 17.057-.13a8.39 8.39 0 0 1 8.214 6.139 6.3 6.3 0 0 1 .231 1.6v7.05' data-name='Tracé 7792'/%3E%3Cpath d='M586.546 81.197H558.83' data-name='Ligne 219'/%3E%3Cpath d='M567.848 100.32V81.197' data-name='Ligne 220'/%3E%3Cpath d='M600.041 100.438V86.557h4.51' data-name='Tracé 7793'/%3E%3Cpath d='M592.196 100.499h-23.154' data-name='Ligne 221'/%3E%3Cpath d='M597.277 111.161v-6.396' data-name='Ligne 222'/%3E%3Cpath d='M602.296 111.161v-6.396' data-name='Ligne 223'/%3E%3Cpath d='M607.315 111.161v-6.396' data-name='Ligne 224'/%3E%3Cpath d='M430.09 146.272V89.413' data-name='Ligne 225'/%3E%3Cpath d='m436.109 95.63-6.019 9.559-6.3-6.145' data-name='Tracé 7794'/%3E%3Cpath d='M457.723 91.497a18 18 0 0 0-3.29-10.382 12.893 12.893 0 0 0-12.518-14.487 8.5 8.5 0 0 0-14.864 1.975 12.256 12.256 0 0 0-20.344 12.7 16.715 16.715 0 0 0 18.011 28.071 8.481 8.481 0 0 0 15.123.208 18.084 18.084 0 0 0 17.882-18.085' data-name='Tracé 7795'/%3E%3Cpath d='M1002.544 199.589V142.73' data-name='Ligne 226'/%3E%3Cpath d='m1008.563 148.947-6.019 9.559-6.3-6.145' data-name='Tracé 7796'/%3E%3Cpath d='M1030.177 144.814a18 18 0 0 0-3.29-10.382 13 13 0 0 0 .1-1.537 12.96 12.96 0 0 0-12.618-12.95 8.5 8.5 0 0 0-14.864 1.975 12.256 12.256 0 0 0-20.344 12.695 16.715 16.715 0 0 0 18.011 28.071 8.481 8.481 0 0 0 15.123.208 18.084 18.084 0 0 0 17.882-18.08' data-name='Tracé 7797'/%3E%3Cpath d='M297.244 40.67a13.057 13.057 0 1 0 13.057-13.057 13.057 13.057 0 0 0-13.057 13.057' data-name='Tracé 7798'/%3E%3Cpath d='M310.221.351v21.581' data-name='Ligne 227'/%3E%3Cpath d='M310.221 59.83v21.581' data-name='Ligne 228'/%3E%3Cpath d='m323.021 27.943 18.736-18.735' data-name='Tracé 7799'/%3E%3Cpath d='m278.696 72.327 18.353-18.353' data-name='Ligne 229'/%3E%3Cpath d='M279.682 9.929c-.173.172 17.263 17.608 17.436 17.436' data-name='Tracé 7800'/%3E%3Cpath d='m322.745 53.047 19.015 19.015' data-name='Tracé 7801'/%3E%3Cpath d='M329.528 41.775h21.581' data-name='Ligne 230'/%3E%3Cpath d='M269.612 41.775h21.581' data-name='Ligne 231'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
padding-top: 300px;
padding-bottom: 125px;
background-size: contain; background-size: 1304px 346px;
background-position: center 100px;
}
#main.page-404 .content h1 {
font-size: 121px;
line-height: 121px;
font-weight: 700;
margin-bottom: 0;
}
#main.page-404 .content h1 + p {
font-size: 47px; 
line-height: 65px;
margin-bottom: 0;
font-weight: 700;   
max-width: 730px;
margin: auto;
}
#main.page-404 .content a {
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
}
figure#main.page-404 .content a img {
margin-left: auto;
margin-right: auto;
}
#site-header > .container > #main.page-404 .content a {
height: 100%;
}
@media (max-width: 767px) {
.footer-bandeau-content #main.page-404 .content a {
flex-direction: column;
align-items: center;
text-align: center;
}
}
#main.page-404 .content a > a {
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(60 25 0 / var(--tw-border-opacity, 1));
background-color: transparent;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info #main.page-404 .content a > a {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
#main.page-404 .content a > a {
border-radius: 9999px; transition: all 0.3s ease;
min-width: auto;
height: auto;
padding: 11px 22px 11px;
font-weight: 600;
letter-spacing: 0.05em;
border-width: 2px;
}
#main.page-404 .content a > a:hover {
--tw-border-opacity: 1;
border-color: rgb(61 126 79 / var(--tw-border-opacity, 1));
--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;
}
@media print {
#main.page-404 .content a {
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));
}
}
.hero-block #main.page-404 .content a:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
.nos-missions .vp-two-cols__col:last-child .vp-two-cols__content #main.page-404 .content a a {
font-size: 1.125rem;
line-height: 1.75rem;
}
#main.page-404 .content a {
padding: 12px 88px;
margin-top: 40px;
}
@media screen and (max-width: 768px) {
#main.page-404 .content {
background-size: 545px 144px;
background-position: center 45px;
padding-top: 150px;
}
#main.page-404 .content h1 {
font-size: 87px;
line-height: 121px;
}
#main.page-404 .content h1 + p {
font-size: 32px;
line-height: 44px;
}
#main.page-404 .content a {
padding: 12px 16px;
width: 80%;
max-width: 350px;
}
} #kosasa, 
#reproduction, 
#etapes, 
#elevage, 
#commercialisation, 
#fonctionnement {
padding-top: 50px;
padding-bottom: 50px;
}
@media (min-width: 768px) {
#kosasa, 
#reproduction, 
#etapes, 
#elevage, 
#commercialisation, 
#fonctionnement {
padding-top: 112px;
padding-bottom: 130px;
}
}
#kosasa, 
#reproduction, 
#etapes, 
#elevage, 
#commercialisation, 
#fonctionnement {
& > p {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
}
#etapes .etapes-filiere--story-vertical {
padding-top: 120px;
}
@media screen and (max-width: 768px) {
#etapes .wp-block-columns {
flex-direction: column-reverse;
gap: 0;
}
#etapes .etapes-filiere--story-vertical {
padding-top: 16px;
}
}
.bulles-reproduction {
display: flex;
justify-content: center;
align-items: center;
gap: 100px;
margin-bottom: 45px;
}
.bulle-reproduction {
margin-bottom: 0 !important;
height: 180px;
border-radius: 100%;
background-color: #3C1900;
color: #FFF !important;
width: 180px;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
text-align: center; 
padding: 16px;
}
.bulle-reproduction:nth-child(3n-2){
animation-delay: 250ms;
}
.bulle-reproduction:nth-child(3n-1){
animation-delay: 500ms;
}
.bulle-reproduction:nth-child(3n){
animation-delay: 750ms;
}
@media screen and (max-width: 768px) {
.bulles-reproduction {
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
gap: 8px;
}
.bulle-reproduction {
height: 150px;
width: 150px;
}
} .js-scroll {  animation-play-state: paused;
}
.js-scroll.scrolled { animation-play-state: running;
}
.anim-delay-0 {
animation-fill-mode: both;
animation-delay: 100ms;   }
.anim-delay-1 {
animation-fill-mode: both;
animation-delay: 200ms;   }
.anim-delay-2 {
animation-fill-mode: both;
animation-delay: 300ms;   }
.anim-delay-3 {
animation-fill-mode: both;
animation-delay: 300ms;   }
.anim-delay-4 {
animation-fill-mode: both;
animation-delay: 400ms;   }
.anim-delay-5 {
animation-fill-mode: both;
animation-delay: 500ms;   }
.anim-delay-6 {
animation-fill-mode: both;
animation-delay: 600ms;   }
.anim-delay-7 {
animation-fill-mode: both;
animation-delay: 700ms;   }
@media screen and (max-width: 768px) {
.js-scroll.scrolled[class*="anim-delay-"], 
[class*="anim-delay-"] {
animation-delay: 0s !important;
}
}
@keyframes zoomInZoomOut {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.5, 1.5);
}
100% {
transform: scale(1, 1);
}
}
.zoomInZoomOut {
opacity: 1;
transform: scale(1, 1);
animation-name: zoomInZoomOut;
animation-iteration-count: 1;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation-duration: 350ms;
transition-property: transform;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeInOpacity {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation-duration: 2000ms;
transition-property: opacity, transform;
}
@keyframes fadeInUpOpacity {
0% {
opacity: 0;
transform: translate3d(0, 100px, 0);
}
100% {
opacity: 1;
transform: translateZ(0);
}
}
.fadeInUpOpacity {
opacity: 0;
transform: translate3d(0, 100px, 0);
animation-name: fadeInUpOpacity;
animation-iteration-count: 1;
animation-fill-mode: both;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation-duration: 1250ms;
transition-property: opacity, transform;
}
@keyframes fadeInLeftOpacity {
0% {
opacity: 0;
transform: translateX(30%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInLeftOpacity {
opacity: 0;
transform: translateX(30%);
animation-name: fadeInLeftOpacity;
animation-fill-mode: both;
animation-iteration-count: 1;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation-duration: 1000ms;
transition-property: opacity, transform;
}
@keyframes fadeInRightOpacity {
0% {
opacity: 0;
transform: translateX(-30%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInRightOpacity {
opacity: 0;
transform: translateX(-30%);
animation-name: fadeInRightOpacity;
animation-fill-mode: both;
animation-iteration-count: 1;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation-duration: 1000ms;
transition-property: opacity, transform;
}  .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: 1920px;
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; height: auto;
} .before-after__wrapper::before {
content: '';
display: block;
padding-top: 56.25%; }
.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%; }
.before-after__content-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover; -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;
} .before-after__image--after .before-after__content-image {
-o-object-position: left center;
object-position: left center;
} .before-after__image--before .before-after__content-image {
-o-object-position: left center;
object-position: left center;
} .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; pointer-events: none; }
.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;
} @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;
}
} .before-after__scroller:focus {
outline: 2px solid var(--color-primary, #007cba);
outline-offset: 2px;
}
.before-after__scroller:focus:not(:focus-visible) {
outline: none;
} .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);
}
} @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);
}
} @media (prefers-reduced-motion: reduce) {
.before-after__scroller {
transition: none;
}
.before-after__wrapper {
animation: none;
}
.before-after__scroller:hover {
transform: translateY(-50%);
}
} .blog-latest {
background-color: #ffffff;
}
.blog-latest__container {
margin: 0 auto;
max-width: 1920px; padding: 5rem 1.5rem; } .blog-latest__title {
text-align: center;
font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0 0 3rem 0; line-height: 1.2;
} .blog-latest__grid {
display: grid;
gap: 2rem; grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.blog-latest__grid {
grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.blog-latest__grid {
grid-template-columns: repeat(3, 1fr); }
} .blog-latest__article {
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-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); transform: translateY(-4px);
} .blog-latest__image {
width: 100%;
height: 12rem; 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);
} .blog-latest__content {
padding: 1.5rem; } .blog-latest__meta {
display: flex;
align-items: center;
gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap;
}
.blog-latest__date {
font-size: 0.75rem; color: #6b7280; font-weight: 500;
}
.blog-latest__category {
font-size: 0.75rem; font-weight: 600; color: var(--accent-color); background-color: #eef2ff; padding: 0.25rem 0.5rem; border-radius: 0.375rem; } .blog-latest__article-title {
margin: 0 0 0.75rem 0; }
.blog-latest__article-link {
font-size: 1.125rem; font-weight: 600; color: #111827; text-decoration: none;
line-height: 1.3;
transition: color 0.2s ease;
}
.blog-latest__article-link:hover {
color: var(--accent-color); text-decoration: none;
}
.blog-latest__article-link:focus {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
border-radius: 0.25rem;
} .blog-latest__excerpt {
color: #4b5563; line-height: 1.6;
margin: 0 0 1rem 0; font-size: 0.875rem; } .blog-latest__read-more {
margin-top: auto;
}
.blog-latest__link {
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-latest__link:hover {
color: var(--accent-hover); text-decoration: none;
gap: 0.5rem; }
.blog-latest__link:focus {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
border-radius: 0.25rem;
} .blog-latest__action {
text-align: center;
margin-top: 3rem; }
.blog-latest__button {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.375rem; background-color: #111827; padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 600; color: #ffffff;
text-decoration: none;
transition: all 0.2s ease;
border: 2px solid transparent;
}
.blog-latest__button:hover {
background-color: #1f2937; 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);
} .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;
} @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;
}
} .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;
}
} @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 {
background-color: #f9fafb; }
.cards-grid__container {
margin: 0 auto;
max-width: 1920px; padding: 5rem 1.5rem; } .cards-grid__title {
text-align: center;
font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0 0 3rem 0; line-height: 1.2;
} .cards-grid__grid {
display: grid;
gap: 2rem; grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.cards-grid__grid {
grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.cards-grid__grid {
grid-template-columns: repeat(3, 1fr); }
} .cards-grid__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;
}
.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); transform: translateY(-4px);
} .cards-grid__card-image {
width: 100%;
height: 12rem; 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);
} .cards-grid__card-content {
padding: 1.5rem; } .cards-grid__card-title {
font-size: 1.25rem; font-weight: 600; color: #111827; margin: 0 0 0.75rem 0; line-height: 1.3;
} .cards-grid__card-text {
color: #4b5563; line-height: 1.6;
margin: 0 0 1rem 0; } .cards-grid__card-action {
margin-top: auto;
}
.cards-grid__card-link {
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;
}
.cards-grid__card-link:hover {
color: var(--accent-hover); text-decoration: none;
gap: 0.5rem; }
.cards-grid__card-link:focus {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
border-radius: 0.25rem;
} .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;
} @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;
}
} .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;
}
} @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;
}
} @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;
}
}  :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;
} .carousel-lightbox {
margin: 2rem 0;
}
.carousel-lightbox__container {
max-width: 1920px;
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;
} .carousel-lightbox .swiper {
padding: 0;
margin: 0;
overflow: hidden; }
.carousel-lightbox .swiper-wrapper {
display: flex;
align-items: stretch;
}
.carousel-lightbox .swiper-slide {
height: auto;
display: flex;
} .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);
} .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));
} .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;
} .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);
} .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);
} .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;
} .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;
} .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;
} .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);
} .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;
} body.carousel-lightbox-modal-open {
overflow: hidden;
} .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;
} @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;
}
} .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;
} .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 {
background-color: #ffffff;
}
.content-split__container {
margin: 0 auto;
max-width: 1920px; display: grid;
align-items: center;
gap: 3rem; padding: 5rem 1.5rem; }
@media (min-width: 1024px) {
.content-split__container {
grid-template-columns: 1fr 1fr; }
} .content-split__content {
order: 1;
}
@media (min-width: 1024px) {
.content-split__content {
order: unset;
}
} .content-split__title {
font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0;
line-height: 1.2;
} .content-split__wysiwyg {
margin-top: 1.5rem; max-width: none;
color: #374151; } .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;
} .content-split__action {
margin-top: 2rem; }
.content-split__button {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.375rem; background-color: #111827; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; color: #ffffff;
text-decoration: none;
transition: all 0.2s ease;
border: 2px solid transparent;
}
.content-split__button:hover {
background-color: #1f2937; 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);
} .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; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border: 1px solid rgba(17, 24, 39, 0.1); } .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;
} @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;
}
} @media (prefers-reduced-motion: reduce) {
.content-split__button {
transition: none;
}
.content-split__button:hover,
.content-split__button:active {
transform: none;
}
} .cta-centered {
background-color: var(--accent-color); color: #ffffff;
}
.cta-centered__container {
margin: 0 auto;
max-width: 768px; padding: 4rem 1.5rem; text-align: center;
} .cta-centered__title {
font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: #ffffff;
margin: 0;
line-height: 1.2;
} .cta-centered__text {
margin-top: 0.75rem; color: #c7d2fe; line-height: 1.6;
margin-bottom: 0;
} .cta-centered__action {
margin-top: 2rem; } .cta-centered__button {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.375rem; background-color: #ffffff;
padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 600; color: var(--accent-hover); text-decoration: none;
transition: all 0.2s ease;
border: 2px solid transparent;
}
.cta-centered__button:hover {
background-color: #eef2ff; 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);
} .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;
} @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;
}
} @media (prefers-reduced-motion: reduce) {
.cta-centered__button {
transition: none;
}
.cta-centered__button:hover {
transform: none;
}
.cta-centered__button:active {
transform: none;
}
} .faq-details {
background-color: #ffffff;
}
.faq-details__container {
margin: 0 auto;
max-width: 1920px; padding: 5rem 1.5rem; } .faq-details__title {
font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0 0 2rem 0; line-height: 1.2;
} .faq-details__items {
display: flex;
flex-direction: column;
gap: 1rem; } .faq-details__item {
border-radius: 0.5rem; border: 1px solid #e5e7eb; padding: 1rem; 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);
} .faq-details__question {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; font-size: 0.875rem; font-weight: 600; color: #111827; line-height: 1.4;
padding-right: 1rem; list-style: none; } .faq-details__question::-webkit-details-marker {
display: none;
}
.faq-details__question::marker {
content: none;
} .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);
} .faq-details__question:hover {
color: var(--accent-color);
} .faq-details__answer {
margin-top: 0.5rem; font-size: 0.875rem; color: #4b5563; line-height: 1.6;
padding-right: 1rem; }
.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;
} .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;
} @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;
}
} @media (prefers-reduced-motion: reduce) {
.faq-details__item,
.faq-details__question::after {
transition: none;
}
} .faq-details__question:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
border-radius: 0.25rem;
} .faq-details__question[aria-expanded="true"]::after {
transform: translateY(-50%) rotate(180deg);
} @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 {
background-color: #ffffff;
}
.features-grid__container {
margin: 0 auto;
max-width: 1920px; padding: 5rem 1.5rem; } .features-grid__header {
margin: 0 auto;
max-width: 672px; text-align: center;
}
.features-grid__title {
font-size: 2.25rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0;
line-height: 1.1;
}
.features-grid__intro {
margin-top: 1rem; color: #4b5563; margin-bottom: 0;
line-height: 1.6;
} .features-grid__items {
margin-top: 3rem; display: grid;
gap: 2rem; grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.features-grid__items {
grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.features-grid__items {
grid-template-columns: repeat(3, 1fr); }
} .features-grid__item {
border-radius: 1rem; border: 1px solid #e5e7eb; padding: 2rem; 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);
} .features-grid__icon {
margin-bottom: 1rem; }
.features-grid__emoji {
font-size: 3rem; line-height: 1;
display: inline-block;
}
.features-grid__image {
width: 48px;
height: 48px;
-o-object-fit: cover;
object-fit: cover;
border-radius: 0.5rem;
} .features-grid__item-title {
margin-top: 1rem; font-size: 1.125rem; font-weight: 600; color: #111827; margin-bottom: 0;
line-height: 1.4;
} .features-grid__item-text {
margin-top: 0.5rem; font-size: 0.875rem; color: #4b5563; line-height: 1.5;
margin-bottom: 0;
} .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;
} .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;
} @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;
}
} @media (prefers-reduced-motion: reduce) {
.features-grid__item {
transition: none;
}
.features-grid__item:hover {
transform: none;
}
} .features-screenshot {
background-color: #111827; color: #ffffff;
}
.features-screenshot__container {
margin: 0 auto;
max-width: 1920px; display: grid;
gap: 3rem; padding: 6rem 1.5rem; align-items: center;
}
@media (min-width: 1024px) {
.features-screenshot__container {
grid-template-columns: 1fr 1fr; }
} .features-screenshot__content {
order: 1;
}
@media (min-width: 1024px) {
.features-screenshot__content {
order: unset;
}
} .features-screenshot__eyebrow {
font-size: 1rem; font-weight: 600; color: var(--accent-light); margin: 0;
} .features-screenshot__title {
margin-top: 0.5rem; font-size: 2.25rem; font-weight: 600; color: #ffffff;
line-height: 1.1;
margin-bottom: 0;
} .features-screenshot__intro {
margin-top: 1.5rem; color: #d1d5db; line-height: 1.6;
margin-bottom: 0;
} .features-screenshot__features {
margin-top: 2.5rem; display: flex;
flex-direction: column;
gap: 1.5rem; } .features-screenshot__feature {
position: relative;
padding-left: 1.75rem; } .features-screenshot__bullet {
position: absolute;
left: 0;
top: 0.25rem; display: inline-block;
width: 1rem; height: 1rem; border-radius: 0.25rem;
background-color: var(--accent-opacity-30); } .features-screenshot__feature-title {
font-weight: 600; color: #ffffff;
margin: 0;
line-height: 1.4;
} .features-screenshot__feature-text {
margin-top: 0.25rem;
color: #d1d5db; line-height: 1.5;
margin-bottom: 0;
} .features-screenshot__image {
order: 0;
}
@media (min-width: 1024px) {
.features-screenshot__image {
order: -1; justify-self: end; }
}
.features-screenshot__img {
max-width: 100%;
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); border: 1px solid rgba(255, 255, 255, 0.1); } .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;
} .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;
} @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-grid {
background-color: #ffffff;
}
.gallery-grid__container {
margin: 0 auto;
max-width: 1920px; padding: 5rem 1.5rem; } .gallery-grid__title {
text-align: center;
font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0 0 3rem 0; line-height: 1.2;
} .gallery-grid__grid {
display: grid;
gap: 1rem; 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);
}
} .gallery-grid__item {
position: relative;
border-radius: 0.75rem; overflow: hidden;
background-color: #f3f4f6; 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);
} .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;
} .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);
} .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; height: 2rem; color: #ffffff;
} .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; line-height: 1.4;
} .gallery-grid__modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: none; }
.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;
} .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;
} @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;
}
} @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;
}
} body.gallery-modal-open {
overflow: hidden;
} .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;
}
} @media (prefers-reduced-motion: reduce) {
.gallery-grid__modal-backdrop,
.gallery-grid__modal-content {
animation: none;
}
} .hero-centered {
background-color: #111827; color: #ffffff;
}
.hero-centered__container {
margin: 0 auto;
max-width: 768px; padding: 8rem 1.5rem; text-align: center;
} .hero-centered__eyebrow {
font-size: 0.875rem; font-weight: 600; color: var(--accent-light); margin: 0;
} .hero-centered__title {
margin-top: 0.75rem; font-size: 3rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1;
margin-bottom: 0;
} @media (min-width: 640px) {
.hero-centered__title {
font-size: 3.75rem; }
} .hero-centered__lead {
margin-top: 1.5rem; font-size: 1.125rem; color: #d1d5db; margin-bottom: 0;
line-height: 1.6;
} .hero-centered__actions {
margin-top: 2.5rem; display: flex;
align-items: center;
justify-content: center;
gap: 1rem; flex-wrap: wrap;
} .hero-centered__button {
text-decoration: none;
font-size: 0.875rem; font-weight: 600; transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.375rem; } .hero-centered__button--primary {
background-color: var(--accent-color); color: #ffffff;
padding: 0.75rem 1.25rem; border: 2px solid transparent;
}
.hero-centered__button--primary:hover {
background-color: var(--accent-hover); text-decoration: none;
}
.hero-centered__button--primary:focus {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
} .hero-centered__button--secondary {
color: #ffffff;
padding: 0.75rem 0;
background: transparent;
border: none;
}
.hero-centered__button--secondary:hover {
color: var(--accent-light); text-decoration: underline;
}
.hero-centered__button--secondary:focus {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
border-radius: 0.25rem;
} .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;
} @media (max-width: 640px) {
.hero-centered__container {
padding: 4rem 1rem; }
.hero-centered__title {
font-size: 2.25rem; }
.hero-centered__actions {
flex-direction: column;
gap: 0.75rem;
}
.hero-centered__button {
width: 100%;
max-width: 300px;
padding: 0.875rem 1.5rem;
}
} @media (prefers-reduced-motion: reduce) {
.hero-centered__button {
transition: none;
}
} @media (prefers-color-scheme: dark) {
.hero-centered {
background-color: #000000;
}
} .hero-split {
background-color: #ffffff;
}
.hero-split__container {
margin: 0 auto;
max-width: 1920px; display: grid;
align-items: center;
gap: 3rem; padding: 5rem 1.5rem; }
@media (min-width: 1024px) {
.hero-split__container {
grid-template-columns: 1fr 1fr; }
} .hero-split__content {
order: 1;
}
@media (min-width: 1024px) {
.hero-split__content {
order: unset;
}
} .hero-split__eyebrow {
font-size: 0.875rem; font-weight: 600; color: var(--accent-color); margin: 0;
} .hero-split__title {
margin-top: 0.5rem; font-size: 2.25rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; line-height: 1.1;
margin-bottom: 0;
} .hero-split__lead {
margin-top: 1.5rem; color: #4b5563; line-height: 1.6;
margin-bottom: 0;
} .hero-split__actions {
margin-top: 2rem; display: flex;
gap: 1rem; flex-wrap: wrap;
} .hero-split__button {
text-decoration: none;
font-size: 0.875rem; font-weight: 600; transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.375rem; } .hero-split__button--primary {
background-color: #111827; color: #ffffff;
padding: 0.5rem 1rem; border: 2px solid transparent;
}
.hero-split__button--primary:hover {
background-color: #1f2937; text-decoration: none;
}
.hero-split__button--primary:focus {
outline: 2px solid #111827;
outline-offset: 2px;
} .hero-split__button--secondary {
color: #111827; padding: 0.5rem 0;
background: transparent;
border: none;
}
.hero-split__button--secondary:hover {
color: var(--accent-color); text-decoration: underline;
}
.hero-split__button--secondary:focus {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
border-radius: 0.25rem;
} .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; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border: 1px solid rgba(17, 24, 39, 0.1); } .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;
} .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;
} @media (max-width: 640px) {
.hero-split__container {
padding: 3rem 1rem;
gap: 2rem;
}
.hero-split__title {
font-size: 1.875rem; }
.hero-split__actions {
flex-direction: column;
gap: 0.75rem;
}
.hero-split__button {
width: 100%;
max-width: 300px;
padding: 0.75rem 1.5rem;
}
} @media (prefers-reduced-motion: reduce) {
.hero-split__button {
transition: none;
}
} .hero-block {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
overflow: hidden;
} .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;
} .hero-block .container {
position: relative;
z-index: 2;
} @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;
} @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;
}
} .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 {
background-color: #ffffff;
}
.logo-cloud__container {
margin: 0 auto;
max-width: 1920px; padding: 4rem 1.5rem; } .logo-cloud__eyebrow {
text-align: center;
font-size: 0.875rem; font-weight: 600; color: #6b7280; margin: 0 0 2rem 0; text-transform: uppercase;
letter-spacing: 0.05em;
} .logo-cloud__logos {
display: grid;
grid-template-columns: repeat(3, 1fr); gap: 2rem; align-items: center;
justify-items: center;
}
@media (min-width: 640px) {
.logo-cloud__logos {
grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
.logo-cloud__logos {
grid-template-columns: repeat(6, 1fr); }
} .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);
} .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;
} .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;
} @media (max-width: 640px) {
.logo-cloud__container {
padding: 1rem;
}
.logo-cloud__logos {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
} } .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);
}
} @media (prefers-reduced-motion: reduce) {
.logo-cloud__logo,
.logo-cloud__image {
transition: none;
}
.logo-cloud__logo:hover {
transform: none;
}
} .newsletter-centered {
background-color: #f9fafb; }
.newsletter-centered__container {
margin: 0 auto;
max-width: 768px; padding: 5rem 1.5rem; text-align: center;
} .newsletter-centered__title {
font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0;
line-height: 1.2;
} .newsletter-centered__text {
margin-top: 0.75rem; color: #4b5563; line-height: 1.6;
margin-bottom: 0;
} .newsletter-centered__form {
margin: 0 auto;
margin-top: 2rem; display: flex;
max-width: 448px; gap: 0.75rem; align-items: stretch;
} .newsletter-centered__input {
min-width: 0;
flex: 1; border-radius: 0.375rem; border: 1px solid #d1d5db;
padding: 0.5rem 0.75rem; font-size: 0.875rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); transition: all 0.2s ease;
}
.newsletter-centered__input::-moz-placeholder {
color: #9ca3af; }
.newsletter-centered__input::placeholder {
color: #9ca3af; }
.newsletter-centered__input:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1); } .newsletter-centered__button {
border-radius: 0.375rem; background-color: var(--accent-color); padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; color: #ffffff;
border: none;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.newsletter-centered__button:hover {
background-color: var(--accent-hover); 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);
} .newsletter-centered__note {
margin-top: 1rem;
color: #6b7280;
font-style: italic;
}
.newsletter-centered__note small {
font-size: 0.75rem;
} @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;
}
} .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;
} .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 {
background-color: #ffffff;
}
.pricing-3__container {
margin: 0 auto;
max-width: 1920px; padding: 6rem 1.5rem; } .pricing-3__header {
margin: 0 auto;
max-width: 672px; text-align: center;
margin-bottom: 3rem; }
.pricing-3__title {
font-size: 2.25rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0;
line-height: 1.1;
}
.pricing-3__intro {
margin-top: 1rem; color: #4b5563; margin-bottom: 0;
line-height: 1.6;
} .pricing-3__plans {
display: grid;
gap: 1.5rem; grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.pricing-3__plans {
grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.pricing-3__plans {
grid-template-columns: repeat(3, 1fr); }
} .pricing-3__plan {
border-radius: 1rem; border: 1px solid #e5e7eb; padding: 2rem; 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);
} .pricing-3__plan--featured {
border: 1px solid var(--accent-color); 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;
} .pricing-3__plan-name {
font-size: 1rem; font-weight: 600; color: #111827; margin: 0;
line-height: 1.4;
} .pricing-3__plan-price {
margin-top: 1rem; font-size: 2.25rem; font-weight: 600; color: #111827; margin-bottom: 0;
line-height: 1.1;
} .pricing-3__features {
margin-top: 1.5rem; display: flex;
flex-direction: column;
gap: 0.5rem; list-style: none;
padding: 0;
}
.pricing-3__feature {
font-size: 0.875rem; color: #4b5563; line-height: 1.5;
position: relative;
padding-left: 1.5rem;
}
.pricing-3__feature::before {
content: "✓";
position: absolute;
left: 0;
color: #10b981; font-weight: 600;
} .pricing-3__cta {
margin-top: 2rem; display: inline-flex;
justify-content: center;
align-items: center;
width: 100%;
border-radius: 0.375rem; background-color: #111827; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; color: #ffffff;
text-decoration: none;
transition: all 0.2s ease;
border: 2px solid transparent;
}
.pricing-3__cta:hover {
background-color: #1f2937; text-decoration: none;
transform: translateY(-1px);
}
.pricing-3__cta:focus {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
} .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);
} .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;
} @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;
}
} @media (prefers-reduced-motion: reduce) {
.pricing-3__plan,
.pricing-3__cta {
transition: none;
}
.pricing-3__plan:hover,
.pricing-3__cta:hover {
transform: none;
}
} .services-block {
padding: 4rem 0;
background-color: #f9fafb;
} .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;
} .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);
} .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;
} .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;
} .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));
} @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));
}
} .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 {
background-color: #ffffff;
}
.stats-grid__container {
margin: 0 auto;
max-width: 1920px; padding: 4rem 1.5rem; } .stats-grid__items {
display: grid;
grid-template-columns: repeat(2, 1fr); gap: 2rem; text-align: center;
}
@media (min-width: 640px) {
.stats-grid__items {
grid-template-columns: repeat(4, 1fr); }
} .stats-grid__item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
} .stats-grid__label {
font-size: 0.875rem; color: #6b7280; font-weight: 400;
margin: 0;
line-height: 1.4;
} .stats-grid__value {
margin-top: 0.5rem; font-size: 1.875rem; font-weight: 600; color: #111827; margin-bottom: 0;
line-height: 1.1;
} .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;
} @media (max-width: 640px) {
.stats-grid__container {
padding: 3rem 1rem;
}
.stats-grid__items {
gap: 1.5rem;
}
.stats-grid__value {
font-size: 1.5rem;
}
} @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);
}
} @media (prefers-reduced-motion: reduce) {
.stats-grid__value {
transition: none;
}
.stats-grid__item:hover .stats-grid__value {
transform: none;
}
} .steps-horizontal {
background-color: #ffffff;
}
.steps-horizontal__container {
margin: 0 auto;
max-width: 1024px; padding: 5rem 1.5rem; } .steps-horizontal__title {
font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0 0 2.5rem 0; line-height: 1.2;
} .steps-horizontal__steps {
display: grid;
gap: 2rem; grid-template-columns: 1fr;
list-style: none;
padding: 0;
margin: 0;
}
@media (min-width: 640px) {
.steps-horizontal__steps {
grid-template-columns: repeat(3, 1fr); }
} .steps-horizontal__step {
border-radius: 1rem; border: 1px solid #e5e7eb; padding: 1.5rem; 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);
} .steps-horizontal__step-number {
font-size: 0.75rem; font-weight: 600; color: var(--accent-color); text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
} .steps-horizontal__step-title {
margin-top: 0.5rem; font-size: 1.125rem; font-weight: 600; color: #111827; margin-bottom: 0;
line-height: 1.4;
} .steps-horizontal__step-text {
margin-top: 0.5rem; font-size: 0.875rem; color: #4b5563; line-height: 1.5;
margin-bottom: 0;
} @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;
}
} .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;
} @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;
} .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;
}
} @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;
}
} @media (prefers-reduced-motion: reduce) {
.steps-horizontal__step {
transition: none;
}
.steps-horizontal__step:hover {
transform: none;
}
} .tabs-simple {
background-color: #f9fafb; }
.tabs-simple__container {
margin: 0 auto;
max-width: 1920px; padding: 5rem 1.5rem; } .tabs-simple__title {
text-align: center;
font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0 0 3rem 0; line-height: 1.2;
} .tabs-simple__wrapper {
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;
} .tabs-simple__nav {
display: flex;
background-color: #f9fafb; border-bottom: 1px solid #e5e7eb;
overflow-x: auto;
scrollbar-width: none; -ms-overflow-style: none; }
.tabs-simple__nav::-webkit-scrollbar {
display: none; } .tabs-simple__tab {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem 1.5rem; font-size: 0.875rem; font-weight: 500; color: #6b7280; 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); background-color: #ffffff; text-decoration: none;
}
.tabs-simple__tab:focus {
outline: 2px solid var(--accent-color);
outline-offset: -2px;
border-radius: 0.25rem;
} .tabs-simple__tab--active,
.tabs-simple__tab:target {
color: var(--accent-color); background-color: #ffffff; border-bottom-color: var(--accent-color); font-weight: 600; } .tabs-simple__content {
position: relative;
min-height: 12rem; } .tabs-simple__panel {
padding: 2rem; display: none;
}
.tabs-simple__panel--active,
.tabs-simple__panel:target {
display: block;
} .tabs-simple__panel-content {
color: #374151; 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;
} .tabs-simple__tab:target ~ .tabs-simple__content .tabs-simple__panel {
display: none;
}
.tabs-simple__panel:target {
display: block !important;
} .tabs-simple__panel:first-child {
display: block;
}
.tabs-simple__panel:target ~ .tabs-simple__panel:first-child {
display: none;
} .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;
} @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;
}
} @media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
} @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);
}
} @media (prefers-reduced-motion: reduce) {
.tabs-simple__tab,
.tabs-simple__panel {
transition: none;
animation: none;
}
html {
scroll-behavior: auto;
}
} .tabs-simple__tab:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
border-radius: 0.25rem;
} @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 {
background-color: #f9fafb; }
.team-grid__container {
margin: 0 auto;
max-width: 1920px; padding: 5rem 1.5rem; } .team-grid__title {
text-align: center;
font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0 0 3rem 0; line-height: 1.2;
} .team-grid__grid {
display: grid;
gap: 2rem; grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.team-grid__grid {
grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.team-grid__grid {
grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
.team-grid__grid {
grid-template-columns: repeat(4, 1fr); }
} .team-grid__member {
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; padding: 1.5rem; 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); transform: translateY(-4px);
} .team-grid__photo {
width: 5rem; height: 5rem; margin: 0 auto 1rem auto; border-radius: 50%; overflow: hidden;
background-color: #f3f4f6; 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);
} .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; font-weight: 600; text-transform: uppercase;
} .team-grid__info {
text-align: center;
} .team-grid__name {
font-size: 1.125rem; font-weight: 600; color: #111827; margin: 0 0 0.25rem 0; line-height: 1.3;
} .team-grid__position {
font-size: 0.875rem; color: var(--accent-color); font-weight: 500; margin: 0 0 0.75rem 0; } .team-grid__bio {
font-size: 0.875rem; color: #4b5563; line-height: 1.5;
margin: 0 0 1rem 0; } .team-grid__social {
display: flex;
justify-content: center;
gap: 0.75rem; margin-top: 1rem;
}
.team-grid__social-link {
display: flex;
align-items: center;
justify-content: center;
width: 2rem; height: 2rem; border-radius: 50%; background-color: #f3f4f6; color: #6b7280; text-decoration: none;
transition: all 0.2s ease;
}
.team-grid__social-link:hover {
background-color: var(--accent-color); color: #ffffff; transform: translateY(-1px);
}
.team-grid__social-link:focus {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.team-grid__social-icon {
width: 1rem; height: 1rem; } .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;
} @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;
}
} .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);
}
} @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;
}
} .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%);
} .team-block {
padding: 4rem 0;
background-color: white;
} .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;
} .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));
} @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));
}
} .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);
} .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;
} .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;
} .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;
} .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);
}
} @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 {
background-color: #f9fafb; }
.testimonials-cards__container {
margin: 0 auto;
max-width: 1920px; padding: 6rem 1.5rem; } .testimonials-cards__title {
text-align: center;
font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0 0 3rem 0; line-height: 1.2;
} .testimonials-cards__items {
display: grid;
gap: 2rem; grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.testimonials-cards__items {
grid-template-columns: repeat(2, 1fr); }
} .testimonials-cards__item {
border-radius: 1rem; background-color: #ffffff;
padding: 2rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border: 1px solid rgba(17, 24, 39, 0.05); 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);
} .testimonials-cards__quote {
color: #374151; 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;
} .testimonials-cards__author {
margin-top: 1rem; font-size: 0.875rem; color: #6b7280; margin-bottom: 0;
}
.testimonials-cards__author-name {
font-weight: 600;
color: #374151; }
.testimonials-cards__author-role {
font-weight: 400;
} .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;
} @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;
}
} @media (prefers-reduced-motion: reduce) {
.testimonials-cards__item {
transition: none;
}
.testimonials-cards__item:hover {
transform: none;
}
} @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 {
background-color: #ffffff;
}
.timeline-vertical__container {
margin: 0 auto;
max-width: 1920px; padding: 5rem 1.5rem; } .timeline-vertical__title {
text-align: center;
font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0 0 3rem 0; line-height: 1.2;
} .timeline-vertical__timeline {
position: relative;
padding: 0 1rem;
} .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;
} .timeline-vertical__event {
position: relative;
display: flex;
margin-bottom: 3rem; align-items: flex-start;
} .timeline-vertical__event--left {
justify-content: flex-end;
}
.timeline-vertical__event--left .timeline-vertical__content {
margin-right: 2rem; text-align: right;
} .timeline-vertical__event--right {
justify-content: flex-start;
}
.timeline-vertical__event--right .timeline-vertical__content {
margin-left: 2rem; text-align: left;
} .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; height: 1rem; border-radius: 50%;
background-color: var(--accent-color); border: 3px solid #ffffff;
box-shadow: 0 0 0 4px #eef2ff; transition: all 0.2s ease;
}
.timeline-vertical__event:hover .timeline-vertical__dot {
transform: scale(1.2);
background-color: var(--accent-hover); } .timeline-vertical__content {
background-color: #ffffff;
border-radius: 1rem; padding: 1.5rem; 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;
max-width: 24rem; 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); transform: translateY(-2px);
} .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;
} .timeline-vertical__date {
font-size: 0.75rem; font-weight: 600; color: var(--accent-color); background-color: #eef2ff; padding: 0.25rem 0.5rem; border-radius: 0.375rem; display: inline-block;
margin-bottom: 0.5rem; text-transform: uppercase;
letter-spacing: 0.05em;
} .timeline-vertical__event-title {
font-size: 1.125rem; font-weight: 600; color: #111827; margin: 0 0 0.5rem 0; line-height: 1.3;
} .timeline-vertical__image {
margin: 0.75rem 0; border-radius: 0.5rem; overflow: hidden;
}
.timeline-vertical__img {
width: 100%;
height: 8rem; -o-object-fit: cover;
object-fit: cover;
transition: transform 0.2s ease;
}
.timeline-vertical__event:hover .timeline-vertical__img {
transform: scale(1.05);
} .timeline-vertical__text {
font-size: 0.875rem; color: #4b5563; line-height: 1.5;
margin: 0;
} .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;
} @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-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;
}
} @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);
}
} @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;
} .vp-two-cols__col {
flex: 1 1 50%;
display: flex;
} .vp-two-cols__col--image {
min-height: 540px;
}
@media (min-width: 768px) {
.vp-two-cols__col--image {
min-height: 640px;
}
}
@media screen and (min-width: 1280px) {
.vp-two-cols__col--image {
aspect-ratio: 640 / 600;
max-width: 50%;
}
.vp-two-cols__col--content {
padding: 32px 80px;
}
} .vp-two-cols__content {
width: 100%; padding: 32px 24px;
}
.vp-two-cols__content h1 {
margin-top: 0px;
}
@media (min-width: 768px) {
.vp-two-cols__content h1 {
margin-top: 130px;
}
} .vp-two-cols__image-filler {
width: 100%;
} .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: 1.5rem;
padding-right: 1.5rem;
}
@media screen and (min-width: 1280px) {
.nos-missions .vp-two-cols__col:last-child .vp-two-cols__content {
padding-left: 0px;
padding-right: 0px;
}
}
.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;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 800;
text-transform: uppercase;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
figure.nos-missions h3 img {
margin-left: auto;
margin-right: auto;
}
.member-info .nos-missions h3 {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.nos-missions h2 {
margin-top: 2rem;
margin-bottom: 2rem;
margin-left: auto;
margin-right: auto;
max-width: 465px;
}
figure.nos-missions h2 img {
margin-left: auto;
margin-right: auto;
} @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 { min-height: 540px;
}
.vp-two-cols__content {
padding: 40px 24px;
}
.nos-missions .vp-two-cols__col:first-child {
padding-top: 266px;
} .vp-two-cols--reverse .vp-two-cols__inner {
flex-direction: column-reverse;
}
} [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 { }
.vp-stats__inner {
max-width: 1160px; margin: 0 auto;
padding: 0 24px;
display: flex;
flex-wrap: wrap;
text-align: center;
} .vp-stats__item {
width: 50%;
padding: 32px 12px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
} .vp-stats__icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 28px;
} .vp-stats__icon {
height: 141px;
width: auto;
display: block;
} .vp-stats__text p:last-child {
margin-bottom: 0;
} @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(60 25 0 / var(--tw-border-opacity, 1));
} .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;
}
}
.etapes-filiere {
color: var(--etapes-text, #3e1d0c);
padding: var(--etapes-pt, 80px) 0 var(--etapes-pb, 80px);
}
.etapes-filiere__inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
.etapes-filiere--steps-5 .etapes-filiere__inner {
max-width: 100%;
}
.etapes-filiere--steps-5 {
--tw-bg-opacity: 1;
background-color: rgb(246 239 231 / var(--tw-bg-opacity, 1));
}
.nos-missions .etapes-filiere--steps-5 {
border-radius: 32px;
padding: 18px;
}
@media (min-width: 768px) {
.etapes-filiere--steps-5 {
--tw-bg-opacity: 1;
background-color: rgb(132 201 191 / var(--tw-bg-opacity, 1));
}
}
.etapes-filiere__head {
text-align: center;
margin-bottom: 3rem;
}
.etapes-filiere__title {
font-size: clamp(1.8rem, 1vw + 1.2rem, 2.4rem);
font-weight: 700;
text-transform: uppercase;
margin: 0 0 1rem 0;
}
.etapes-filiere__intro {
margin: 0 auto;
max-width: 720px;
font-size: 1.05rem;
line-height: 1.6;
}
.etapes-filiere__items {
display: grid;
gap: 2.5rem;
} .etapes-filiere--grid-4 .etapes-filiere__items {
grid-template-columns: repeat(2, minmax(0, 1fr)); -moz-column-gap: 232px;
column-gap: 232px;
row-gap: 3rem;
}
.etapes-filiere--grid-4 .etapes-filiere__item {
position: relative;
max-width: 520px;
}
.etapes-filiere--grid-4 .etapes-filiere__item:nth-child(odd)::before {
content: "";
position: absolute;
right: -116px;
top: 0;
bottom: 0;
width: 2px;
height: calc(100% - 50px);
background: var(--etapes-separator, rgba(62,29,12,0.35));
pointer-events: none;
}
.etapes-filiere--grid-4 .etapes-filiere__item:nth-child(-n+2)::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: var(--etapes-separator, rgba(62,29,12,0.35));
}
.etapes-filiere__icon-wrapper {
margin-bottom: 1rem;
}
.etapes-filiere__icon {
max-width: 110px;
height: auto;
}
.etapes-filiere__item-title {
font-weight: 700;
text-transform: uppercase;
margin: 0 0 0.75rem 0;
font-size: 20px;
line-height: 1.3;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .etapes-filiere__item-title {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item-title {
margin: 0 0 0.75rem 0;
font-size: 32px !important;
font-weight: 500 !important;
text-transform: none !important;
line-height: 28px !important;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .etapes-filiere--grid-1-2-2 .etapes-filiere__item-title {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.etapes-filiere__item-desc {
line-height: 1.6;
font-size: 18px;
padding-bottom: 16px;
font-family: p22-mackinac-pro, sans-serif;
font-size: 1.125rem;
line-height: 1.75rem;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .etapes-filiere__item-desc {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.etapes-filiere--story-vertical .etapes-filiere__item-desc {
padding-bottom: 36px;
}
.etapes-filiere--steps-5 .etapes-filiere__item-desc {
text-align: center;
}
.services-block .etapes-filiere--steps-5 .etapes-filiere__item-desc h2 {
color: #111827;
font-size: 2.25rem;
font-weight: 700;
margin-bottom: 1rem;
line-height: 1.2;
}
.services-block .etapes-filiere--steps-5 .etapes-filiere__item-desc p {
color: #6b7280;
font-size: 1.25rem;
max-width: 42rem;
margin: 0 auto;
line-height: 1.6;
}
.team-block .etapes-filiere--steps-5 .etapes-filiere__item-desc h2 {
color: #111827;
font-size: 2.25rem;
font-weight: 700;
margin-bottom: 1rem;
line-height: 1.2;
}
.team-block .etapes-filiere--steps-5 .etapes-filiere__item-desc p {
color: #6b7280;
font-size: 1.25rem;
max-width: 42rem;
margin: 0 auto;
line-height: 1.6;
}
@media (max-width: 768px) {
.team-block .etapes-filiere--steps-5 .etapes-filiere__item-desc h2 {
font-size: 2rem;
}
.team-block .etapes-filiere--steps-5 .etapes-filiere__item-desc p {
font-size: 1.125rem;
}
}
@media (max-width: 480px) {
.team-block .etapes-filiere--steps-5 .etapes-filiere__item-desc h2 {
font-size: 1.75rem;
}
.team-block .etapes-filiere--steps-5 .etapes-filiere__item-desc p {
font-size: 1rem;
}
}
.etapes-filiere--steps-5 .etapes-filiere__item-desc {
max-width: 440px;
margin: auto;
} .etapes-filiere--steps-5 .etapes-filiere__items { gap: 2.5rem 2rem;
position: relative;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.etapes-filiere--steps-5 .etapes-filiere__item {
text-align: center;
position: relative;
padding: 0 1.25rem;
flex: 1 1 30%; }
.etapes-filiere--steps-5 .etapes-filiere__item::before {
content: "";
position: absolute;
top: 1.75rem;
right: -1rem;
width: 2px;
height: 80%;
background: #3C1900;
}
.etapes-filiere--steps-5 .etapes-filiere__item:last-child::before {
display: none;
}
.etapes-filiere__number {
font-family: professor, sans-serif;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .etapes-filiere__number {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.etapes-filiere__number {
font-size: 100px;
line-height: 1;
margin-bottom: 0.6rem;
}
.etapes-filiere--steps-5 .etapes-filiere__item-title {
margin-bottom: 0.75rem;
} .etapes-filiere--story-vertical .etapes-filiere__items {
grid-template-columns: 1fr;
gap: 2rem;
}
.etapes-filiere--story-vertical .etapes-filiere__item {
position: relative;
padding: 1rem 0 2.5rem 0; }
.etapes-filiere--story-vertical .etapes-filiere__item:not(:last-child)::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
max-width: 200px;
height: 2px;
background: #3C1900;
}
.etapes-filiere--story-vertical .etapes-filiere__number {
margin-bottom: 0.4rem;
}
.etapes-filiere--story-vertical .etapes-filiere__item-title {
margin-bottom: 0.6rem;
}
.etapes-filiere--steps-5 .etapes-filiere__item:nth-child(3)::before {
display: none;
}
.etapes-filiere--story-vertical .etapes-filiere__item {
max-width: 300px;
}
.etapes-filiere--story-vertical .etapes-filiere__inner {
padding-left: 0 !important; 
padding-right: 0 !important;
}
@media (max-width: 768px) {
.etapes-filiere {
padding: calc(var(--etapes-pt, 80px) * 0.7) 0 calc(var(--etapes-pb, 80px) * 0.7);
}
.etapes-filiere__items {
gap: 2rem;
}
.etapes-filiere--steps-5 .etapes-filiere__item::before {
top: 100%;
width: 100px;
height: 2px;
left: calc(50% - 50px);
display: block;
}
.etapes-filiere--steps-5 .etapes-filiere__item:nth-child(3)::before {
display: block;
}
.etapes-filiere--grid-4 .etapes-filiere__items {
grid-template-columns: 1fr;
-moz-column-gap: 0;
column-gap: 0;
}
.etapes-filiere--grid-4 .etapes-filiere__item::before,
.etapes-filiere--grid-4 .etapes-filiere__item::after {
display: none;
}
.etapes-filiere--steps-5 .etapes-filiere__items {
justify-content: center;
flex-flow: column nowrap;
align-items: center;
}
.etapes-filiere--steps-5 .etapes-filiere__item {
text-align: center;
padding: 0;
}
.etapes-filiere--story-vertical .etapes-filiere__item-desc {
padding-bottom: 16px;
}
.etapes-filiere--story-vertical .etapes-filiere__item:not(:last-child)::before {
left: calc(50% - 50px);
width: 100px;
max-width: 100px;
}
.etapes-filiere--story-vertical .etapes-filiere__item:last-child {
padding-bottom: 0;
}
.etapes-filiere--story-vertical {
padding-bottom: 0;
}
.etapes-filiere--story-vertical .etapes-filiere__item {
text-align: center;
}
.services-block .etapes-filiere--story-vertical .etapes-filiere__item h2 {
color: #111827;
font-size: 2.25rem;
font-weight: 700;
margin-bottom: 1rem;
line-height: 1.2;
}
.services-block .etapes-filiere--story-vertical .etapes-filiere__item p {
color: #6b7280;
font-size: 1.25rem;
max-width: 42rem;
margin: 0 auto;
line-height: 1.6;
}
.team-block .etapes-filiere--story-vertical .etapes-filiere__item h2 {
color: #111827;
font-size: 2.25rem;
font-weight: 700;
margin-bottom: 1rem;
line-height: 1.2;
}
.team-block .etapes-filiere--story-vertical .etapes-filiere__item p {
color: #6b7280;
font-size: 1.25rem;
max-width: 42rem;
margin: 0 auto;
line-height: 1.6;
}
@media (max-width: 768px) {
.team-block .etapes-filiere--story-vertical .etapes-filiere__item h2 {
font-size: 2rem;
}
.team-block .etapes-filiere--story-vertical .etapes-filiere__item p {
font-size: 1.125rem;
}
}
@media (max-width: 480px) {
.team-block .etapes-filiere--story-vertical .etapes-filiere__item h2 {
font-size: 1.75rem;
}
.team-block .etapes-filiere--story-vertical .etapes-filiere__item p {
font-size: 1rem;
}
}
.etapes-filiere--story-vertical .etapes-filiere__items {
align-items: center;
justify-content: center;
display: flex;
flex-flow: column nowrap;
}
} .etapes-filiere--grid-1-2-2 {
background-color: var(--etapes-bg, #FFD65F);
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__inner {
max-width: 1140px;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__head {
margin-bottom: 2rem;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__title {
font-weight: 700;
text-transform: uppercase;
margin-left: auto;
margin-right: auto;
} .etapes-filiere--grid-1-2-2 .etapes-filiere__items {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 0;
}  .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(1) {
grid-column: 1;
grid-row: 1 / 3;
padding-right: 2.5rem;
position: relative;
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(2) {
grid-column: 2;
grid-row: 1;
padding: 0 1.5rem 2rem 2.5rem;
position: relative;
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(3) {
grid-column: 3;
grid-row: 1;
padding: 0 0 2rem 1.5rem;
position: relative;
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(4) {
grid-column: 2;
grid-row: 2;
padding: 2rem 1.5rem 0 2.5rem;
position: relative;
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(5) {
grid-column: 3;
grid-row: 2;
padding: 2rem 0 0 1.5rem;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(3),
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(5) {
padding-left: 2.5rem !important;
}  .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(1)::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background: var(--etapes-separator, #3e1d0c);
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(2)::after {
content: "";
position: absolute;
bottom: 0;
left: 2.5rem;
right: 0;
height: 2px;
width: calc(100% - 5rem);
background: var(--etapes-separator, #3e1d0c);
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(3)::after {
content: "";
position: absolute;
bottom: 0;
left: 2.5rem;
right: 0;
height: 2px;
width: calc(100% - 5rem);
background: var(--etapes-separator, #3e1d0c);
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(2)::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background: var(--etapes-separator, #3e1d0c);
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(4)::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background: var(--etapes-separator, #3e1d0c);
} .etapes-filiere--grid-1-2-2 .etapes-filiere__number {
font-family: professor, sans-serif;
font-size: 100px;
font-style: normal;
line-height: 0.8;
margin-bottom: 0.15rem;
color: var(--etapes-text, #3e1d0c);
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(1) .etapes-filiere__item-desc {
max-width: 260px;
} @media (max-width: 1024px) and (min-width: 769px) {
.etapes-filiere--grid-1-2-2 .etapes-filiere__items {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(1) {
grid-column: 1 / 3;
grid-row: 1;
padding: 0 0 2rem 0;
text-align: center;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(1)::after {
top: auto;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 2px;
display: none;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(1) .etapes-filiere__item-desc {
max-width: 100%;
margin: 0 auto;
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(2) {
grid-column: 1;
grid-row: 2;
padding: 2rem 1.5rem 2rem 0;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(2)::before {
top: 0;
right: 0;
left: auto;
width: 2px;
height: 100%;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(2)::after {
bottom: 0;
right: 0;
height: 2px;
width: 80%;
left: 0;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(3) {
grid-column: 2;
grid-row: 2;
padding: 2rem 0 2rem 1.5rem;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(3)::after {
bottom: 0;
height: 2px;
width: 80%;
right: 0;
left: auto;
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(4) {
grid-column: 1;
grid-row: 3;
padding: 2rem 1.5rem 0 0;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(4)::before {
top: 0;
right: 0;
width: 2px;
height: 100%;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(5) {
grid-column: 2;
grid-row: 3;
padding: 2rem 0 0 1.5rem;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(3),
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(5) {
padding-left: 20% !important;
}
} @media (max-width: 768px) {
.etapes-filiere--grid-1-2-2 .etapes-filiere__items {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item {
text-align: center;
padding: 1.5rem 0 !important;
width: 100%;
max-width: 280px;
position: relative;
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item::before,
.etapes-filiere--grid-1-2-2 .etapes-filiere__item::after {
display: none;
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:not(:last-child)::after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 2px;
background: var(--etapes-separator, #3e1d0c);
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:first-child {
padding-top: 0 !important;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:last-child {
padding-bottom: 0 !important;
padding-left: 0 !important;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(3) {
padding-left: 0 !important;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(1) .etapes-filiere__item-desc {
max-width: 100%;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(1)::after {
top: 100%;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item-title {
margin: 0 0 0.75rem 0;
font-size: 20px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
line-height: 28px !important;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .etapes-filiere--grid-1-2-2 .etapes-filiere__item-title {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
} #main .content > section.bandeau-les-eleveurs {
padding-top: 85px !important;
padding-bottom: 24px !important;
}
@media screen and (max-width: 768px) {
#main .content > section.bandeau-les-eleveurs {
padding-top: 55px !important;
padding-bottom: 0 !important;
}
} .elevage {
background-color: var(--elevage-bg, #f7efe7);
color: var(--elevage-text, #3e1d0c);
padding: var(--elevage-pt, 80px) 0 var(--elevage-pb, 80px);
}
.elevage__inner {
max-width: 1200px;
margin: 0 auto; } .elevage__title {
text-align: center;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
margin: 0 0 2.5rem 0;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .elevage__title {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
} .elevage__columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
position: relative;
}
.elevage__column--left {
padding-left: 0;
}
.elevage__column--right {
padding-right: 0;
}
.elevage__column--right .elevage__column-title {
margin-top: -60px;
} .elevage__column-title {
font-family: professor, sans-serif !important;
font-size: 60px !important;
font-weight: 400 !important;
line-height: 60px !important;
margin: 0 0 1.5rem 0;
padding-bottom: 1rem;
position: relative;
text-transform: none !important;
text-align: center;
} .elevage__column-title::after {
content: "";
position: absolute;
bottom: 0; width: 90%;
height: 2px;
background: #3C1900;
}
.elevage__column--left {
.elevage__column-title::after {
left: 0;
}
.elevage__item::after {
left: 0;
}
.elevage__item {
padding-right: 60px;
position: relative;
} .elevage__item::before {
content: "";
position: absolute;
right: 0;
top: 10%;
width: 2px;
height: 80%;
background: #3C1900;
}
}
.elevage__column--right {
.elevage__column-title::after {
right: 0;
}    
.elevage__item::after {
right: 0;
}
.elevage__item {
padding-left: 60px;
}
} .elevage__items {
display: flex;
flex-direction: column;
gap: 0;
}
.elevage__item {
position: relative;
padding: 1.5rem 0;
min-height: 360px;
display: flex;
justify-content: center;
align-items: center;
} .elevage__item::after {
content: "";
position: absolute;
bottom: 0; width: 90%;
height: 2px;
background: #3C1900;
}
.elevage__item:last-child::after {
display: none;
}
.elevage__item-content {
display: flex;
align-items: flex-start;
gap: 1.25rem;
} .elevage__icon-wrapper {
flex-shrink: 0;
width: 160px;
}
.elevage__icon {
width: 100%;
max-width: 145px;
height: auto;
max-height: 160px;
-o-object-fit: contain;
object-fit: contain;
} .elevage__item-text {
flex: 1;
}
.elevage__item-title {
margin: 0 0 0.5rem 0;
font-size: 20px !important;
text-transform: uppercase;
line-height: 28px !important;
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .elevage__item-title {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
@media (min-width: 768px) {
.elevage__item-title {
font-size: 32px !important;
line-height: 44px !important;
}
}
.elevage__item-desc {
--tw-text-opacity: 1;
color: rgb(60 25 0 / var(--tw-text-opacity, 1));
}
.member-info .elevage__item-desc {
color: #3b82f6;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.elevage__item-desc p {
margin: 0 0 0.5rem 0;
}
.elevage__item-desc p:last-child {
margin-bottom: 0;
} .elevage__accordion {
display: none;
} @media (max-width: 1024px) {
.elevage {
padding: calc(var(--elevage-pt, 80px) * 0.7) 0 calc(var(--elevage-pb, 80px) * 0.7);
}
.elevage__title {
margin-bottom: 1.5rem;
} .elevage__columns {
display: none;
} .elevage__accordion {
display: block;
} .elevage__accordion-section-title {
font-family: professor, sans-serif;
text-align: center;
margin: 0;
padding: 2rem 0;
position: relative;
} .elevage__accordion-section-title::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #3C1900;
}
.elevage__accordion-section-title {
font-family: professor, sans-serif !important;
font-size: 48px !important;
font-weight: 400 !important;
line-height: 66px !important;
text-transform: none !important;
}
.elevage__accordion-section-title--second {
margin-top: 1.5rem;
} .elevage__accordion-item {
position: relative;
} .elevage__accordion-item::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #3C1900;
} .elevage__accordion-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 2rem 0;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
color: #3C1900;
font-family: inherit;
}
.elevage__accordion-trigger:focus {
outline: 2px solid var(--elevage-text, #3e1d0c);
outline-offset: 2px;
}
.elevage__accordion-trigger:focus:not(:focus-visible) {
outline: none;
}
.elevage__accordion-trigger-text {
text-transform: uppercase;
font-size: 20px !important;
font-weight: 600 !important;
line-height: 28px !important;
} .elevage__accordion-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.elevage__chevron {
width: 32px;
height: 32px;
transition: transform 0.25s ease;
} .elevage__accordion-trigger[aria-expanded="true"] .elevage__chevron {
transform: rotate(90deg);
} .elevage__accordion-panel {
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease;
}
.elevage__accordion-panel[hidden] {
display: none;
}
.elevage__accordion-panel-content {
padding: 0 0 1.5rem 0;
}
.elevage__accordion-panel .elevage__icon-wrapper {
width: 100px;
margin: 0 0 1rem;
}
.elevage__accordion-panel .elevage__icon {
max-height: unset;
width: auto;
height: 110px;
}
.elevage__accordion-panel .elevage__item-desc {
text-align: left;
font-size: 0.9rem;
}
} @media (min-width: 769px) and (max-width: 1024px) {
.elevage__column {
padding: 0 1.5rem;
}
.elevage__icon-wrapper {
width: 60px;
}
.elevage__icon {
max-height: 60px;
}
}
@media screen and (min-width: 1025px) and (max-width: 1280px) {
.elevage__item {
min-height: 450px;
}
}
body {
overflow-x: hidden;
height: auto;
}  .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;
}   @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-visible:focus { } ::-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-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-\[50px\] {
margin-top: 50px;
}
.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\:gap-\[60px\] {
gap: 60px;
}
.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\:rounded-\[50px\] {
border-radius: 50px;
}
.md\:border-r {
border-right-width: 1px;
}
.md\:bg-bleu {
--tw-bg-opacity: 1;
background-color: rgb(132 201 191 / var(--tw-bg-opacity, 1));
}
.md\:px-16 {
padding-left: 4rem;
padding-right: 4rem;
}
.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-\[75px\] {
padding-bottom: 75px !important;
}
.md\:\!pt-\[100px\] {
padding-top: 100px !important;
}
.md\:pb-\[130px\] {
padding-bottom: 130px;
}
.md\:pb-\[88px\] {
padding-bottom: 88px;
}
.md\:pt-\[112px\] {
padding-top: 112px;
}
.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-6xl {
font-size: 3.75rem;
line-height: 1;
}
.md\:text-\[32px\] {
font-size: 32px;
}
.md\:text-\[47px\] {
font-size: 47px;
}
.md\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.md\:leading-\[40px\] {
line-height: 40px;
}
.md\:leading-\[44px\] {
line-height: 44px;
}
.md\:leading-\[65px\] {
line-height: 65px;
}
}
@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;
}
}@tailwind base;
@tailwind components;
@tailwind utilities; body, html {
overflow-x: hidden !important;
background-color: #FAF8F6;
}
main .content {
background-color: #FFF;
}
h1, h2, h3, h4, h5, h6, p, a, span, li, ul, ol, blockquote, cite, code, pre, samp, kbd, var, dfn, abbr, time, mark {
@apply !font-primary font-medium;
}
main .container,
.home .entry-content {
@apply !px-0;
}
.home h1 {
@apply font-primary font-bold text-primary text-[32px] leading-[40px] uppercase mb-[50px];
}
main h1 {
@apply font-primary text-primary font-bold text-[32px] leading-[40px] uppercase md:text-[47px] md:leading-[65px];
}
main h2 {
@apply font-primary font-bold text-primary text-[26px] leading-[32px] md:text-[32px] md:leading-[40px] uppercase mb-8;
}
main h3 {
@apply font-primary font-bold text-primary text-[20px] leading-[28px] uppercase;
}
main h4 {
@apply font-primary font-bold text-primary text-[20px] leading-[28px] uppercase md:text-[32px] md:leading-[44px] font-semibold;
}
main p {
@apply mb-8 text-lg font-medium font-primary text-primary;
}
main ul {
@apply mb-8;
}
main ul li {
@apply font-primary font-medium text-primary text-lg;
}
#main {
scroll-margin-top: 200px;
}
#main .vp-two-cols__col 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;
@apply mb-8;
}
ul.wp-block-list {
padding-left: 24px;
list-style: disc;
}
main .content a {
@apply text-primary;
}
.home #main {
margin-top: 0;
}
b, strong {
font-weight: 600;
}
figure.w-full img {
width: 100%;
}
figure.mx-auto img {
margin-left: auto;
margin-right: auto;
}
figure {
margin-bottom: 0 !important;
}
.home .content > figure img {
aspect-ratio: 1280 / 576;
}
:where(.wp-block-group.has-background) {
padding: 0;
}
main .content > section.wp-block-group {
padding-left: 24px !important;
padding-right: 24px !important;
}
hr {
height: 2px;
background: #3C1900;
border: 0;
margin-bottom: 32px;
}
.page-id-277 .content,
.page-id-279 .content,
.page-id-275 .content {
padding: 90px 160px 170px;
background-color: #FFF;
}
.page-id-277 .content a,
.page-id-279 .content a,
.page-id-275 .content a {
color: #EC7455;
}
@media screen and (max-width: 768px) {
.page-id-277 .content,
.page-id-279 .content,
.page-id-275 .content  {
padding: 32px 24px;
}
}  .skip-link {
position: absolute;
top: -100px;
left: 0;
background: #3C1900;
color: #fff;
padding: 12px 24px;
z-index: 100000;
text-decoration: none;
font-weight: 600;
border-radius: 0 0 4px 0;
transition: top 0.3s ease;
}
.skip-link:focus {
top: 0;
outline: 2px solid #fff;
outline-offset: 2px;
box-shadow: none; } .sr-only,
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.sr-only:focus,
.screen-reader-text:focus {
position: static;
width: auto;
height: auto;
padding: inherit;
margin: inherit;
overflow: visible;
clip: auto;
white-space: inherit;
} .actus-filter:focus-visible {
outline: 2px solid transparent;
box-shadow: 0 0 0 2px #2271b1;
border-radius: 4px;
}
.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: #707070 !important;
border-radius: 2px;
transition: all 0.3s ease;
transform-origin: center;
} .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);
} :root {
--header-height: 72px;
--secondary-menu-height: 48px;
}  .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; }  .mobile-menu-scroll {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 1rem;
height: 100%; min-height: 0; scrollbar-width: thin;
}
.mobile-menu.active {
transform: translateX(0);
background-color: #393939;
} .mobile-menu .mobile-menu-content {
padding: 2rem;
height: 100%;
display: flex;
flex-direction: column;
gap: 2rem;
} .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;
} .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 .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);
} .mobile-menu .sub-menu {
display: none;
background-color: rgba(255, 255, 255, 0.05);
margin: 0;
margin-left: 1rem;
padding-left: 1rem;
overflow: hidden;
} .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);
} .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;
} .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;
} .mobile-menu .mobile-menu-footer {
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
} .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);
} body.menu-open {
overflow: hidden;
} #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);
}
} .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;
} .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 {
@apply text-lg font-primary uppercase font-semibold text-primary;
letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
.mobile-menu-toggle {
display: none;
}
.desktop-nav {
display: flex;
}
.mobile-menu {
display: none;
}
} .mobile-menu-toggle:focus,
.submenu-toggle:focus {
outline: 2px solid #3b82f6;
outline-offset: 2px;
} .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);
}
}  #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;
@apply flex items-center;
} .mobile-menu-list > li.btn-egalim > a,
#menu-menu-principal > li.btn-egalim > a {
@apply !text-white;
background-color: #145A25;
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 {
@apply !text-white;
background-color: #228039;
} .mobile-menu-list > li.picto-insta,
#menu-menu-principal > li.picto-insta,
.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-insta > a,
#menu-menu-principal > li.picto-insta > a,
.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;
}
#menu-menu-principal > li.picto-insta {
margin-left: -10px;
}
.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(//volaypei.com/wp-content/themes/volaypei/resources/img/picto-fb.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
text-indent: 0;
transition: all 0.3s ease;
}
.mobile-menu-list > li.picto-insta > a::before,
#menu-menu-principal > li.picto-insta > a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36.427' height='36.427' viewBox='0 0 36.427 36.427'%3E%3Cg fill='rgba(179,179,179,0.87)' data-name='Groupe 5599'%3E%3Cpath d='M18.214 14.411a3.8 3.8 0 1 0 3.8 3.8 3.8 3.8 0 0 0-3.8-3.8' data-name='Tracé 398'/%3E%3Cpath d='M18.214 0a18.214 18.214 0 1 0 18.214 18.214A18.214 18.214 0 0 0 18.214 0M30.12 25.233a4.9 4.9 0 0 1-4.887 4.887H11.195a4.9 4.9 0 0 1-4.886-4.887V11.195a4.9 4.9 0 0 1 4.886-4.886h14.038a4.9 4.9 0 0 1 4.887 4.886Z' data-name='Tracé 399'/%3E%3Cpath d='M24.572 9.072H11.857a2.79 2.79 0 0 0-2.784 2.784v12.715a2.79 2.79 0 0 0 2.784 2.784h12.715a2.79 2.79 0 0 0 2.784-2.784V11.856a2.79 2.79 0 0 0-2.784-2.784m-6.357 15.4a6.26 6.26 0 1 1 6.26-6.26 6.26 6.26 0 0 1-6.26 6.26m6.26-10.924a1.6 1.6 0 1 1 1.6-1.6 1.6 1.6 0 0 1-1.6 1.6' data-name='Tracé 400'/%3E%3Cpath d='M18.214 0a18.214 18.214 0 1 0 18.214 18.214A18.214 18.214 0 0 0 18.214 0M30.12 25.233a4.9 4.9 0 0 1-4.887 4.887H11.195a4.9 4.9 0 0 1-4.886-4.887V11.195a4.9 4.9 0 0 1 4.886-4.886h14.038a4.9 4.9 0 0 1 4.887 4.886Z' data-name='Tracé 402'/%3E%3Cpath d='M24.571 9.072H11.856a2.79 2.79 0 0 0-2.784 2.784v12.715a2.79 2.79 0 0 0 2.784 2.784h12.715a2.79 2.79 0 0 0 2.784-2.784V11.856a2.79 2.79 0 0 0-2.784-2.784m-6.357 15.4a6.26 6.26 0 1 1 6.26-6.26 6.26 6.26 0 0 1-6.26 6.26m6.26-10.924a1.6 1.6 0 1 1 1.6-1.6 1.6 1.6 0 0 1-1.6 1.6' data-name='Tracé 403'/%3E%3C/g%3E%3C/svg%3E");   
background-size: contain;
background-repeat: no-repeat;
background-position: center;
text-indent: 0;
transition: all 0.3s ease;
} @media screen and (min-width: 677px) { #site-header > .container {
position: relative;
} .menu-item, 
.menu-item a {
position: initial !important;
}
.sub-menu {
transform: none !important;
} #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;
} #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); flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 0; transition: opacity 0.5s ease;
} #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;
} #menu-menu-principal > li.menu-item-has-children > .sub-menu.clicked-open {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
} #menu-menu-principal > li.menu-item-has-children > .sub-menu > li {
flex: 1 1 240px;
margin-bottom: 0;
} #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;
} .desktop-nav {
flex-basis: 100%;
}
#menu-menu-principal {
width: 100%;
}
} @media (max-width: 1023px) {
.mobile-menu-toggle {
display: flex;
}
.desktop-nav {
display: none;
}
.mobile-menu {
display: block;
} .mobile-menu .mobile-nav ul {
text-align: right;
}
.mobile-menu .mobile-nav li {
border-bottom: 1px solid #4F4F4E;
text-align: right;
width: 100%;
margin: 0 !important;
}
.mobile-menu .mobile-nav li:last-child {
border-bottom: none;
}
.mobile-menu .mobile-nav a {
color: #FFF;
font-family: var(--font-primary, 'Open Sans', sans-serif);
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
text-align: right;
padding: 1rem 0;
}
.mobile-menu .mobile-nav a:hover,
.mobile-menu .mobile-nav a:focus,
.mobile-menu .mobile-nav li.current-menu-item > a,
.mobile-menu .mobile-nav li.current_page_item > a {
color: #A9C88F;
} .btn-egalim {
display: block !important;
width: 100%;
}
.picto-insta,
.picto-fb {
display: block !important;
width: 100%;
padding: 1rem 0;
}
.mobile-menu-list > li.picto-fb > a,
.mobile-menu-list > li.picto-insta > a {
color: transparent !important;
justify-self: end !important; }
.mobile-menu-list > li.picto-fb > a::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36.984' height='36.76' viewBox='0 0 36.984 36.76'%3E%3Cpath fill='%23fff' d='M18.492 0a18.491 18.491 0 0 0-3.123 36.716v-12.3a.244.244 0 0 0-.244-.244H10.8a.244.244 0 0 1-.244-.244v-4.934a.244.244 0 0 1 .243-.244l4.323-.026a.244.244 0 0 0 .243-.244v-4.5s-.208-5.88 4.927-5.941 6.131 0 6.131 0v4.654l-3.573.019a1.4 1.4 0 0 0-1.481 1.269v4.459a.244.244 0 0 0 .246.244l4.563-.028a.244.244 0 0 1 .243.283l-.806 5.03a.244.244 0 0 1-.241.206h-3.76a.244.244 0 0 0-.244.244V36.76A18.493 18.493 0 0 0 18.492 0' data-name='Tracé 7859'/%3E%3C/svg%3E");
}
.mobile-menu-list > li.picto-insta > a::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36.427' height='36.427' viewBox='0 0 36.427 36.427'%3E%3Cg fill='%23fff' data-name='Groupe 5599'%3E%3Cpath d='M18.214 14.411a3.8 3.8 0 1 0 3.8 3.8 3.8 3.8 0 0 0-3.8-3.8' data-name='Tracé 398'/%3E%3Cpath d='M18.214 0a18.214 18.214 0 1 0 18.214 18.214A18.214 18.214 0 0 0 18.214 0M30.12 25.233a4.9 4.9 0 0 1-4.887 4.887H11.195a4.9 4.9 0 0 1-4.886-4.887V11.195a4.9 4.9 0 0 1 4.886-4.886h14.038a4.9 4.9 0 0 1 4.887 4.886Z' data-name='Tracé 399'/%3E%3Cpath d='M24.572 9.072H11.857a2.79 2.79 0 0 0-2.784 2.784v12.715a2.79 2.79 0 0 0 2.784 2.784h12.715a2.79 2.79 0 0 0 2.784-2.784V11.856a2.79 2.79 0 0 0-2.784-2.784m-6.357 15.4a6.26 6.26 0 1 1 6.26-6.26 6.26 6.26 0 0 1-6.26 6.26m6.26-10.924a1.6 1.6 0 1 1 1.6-1.6 1.6 1.6 0 0 1-1.6 1.6' data-name='Tracé 400'/%3E%3Cpath d='M18.214 0a18.214 18.214 0 1 0 18.214 18.214A18.214 18.214 0 0 0 18.214 0M30.12 25.233a4.9 4.9 0 0 1-4.887 4.887H11.195a4.9 4.9 0 0 1-4.886-4.887V11.195a4.9 4.9 0 0 1 4.886-4.886h14.038a4.9 4.9 0 0 1 4.887 4.886Z' data-name='Tracé 402'/%3E%3Cpath d='M24.571 9.072H11.856a2.79 2.79 0 0 0-2.784 2.784v12.715a2.79 2.79 0 0 0 2.784 2.784h12.715a2.79 2.79 0 0 0 2.784-2.784V11.856a2.79 2.79 0 0 0-2.784-2.784m-6.357 15.4a6.26 6.26 0 1 1 6.26-6.26 6.26 6.26 0 0 1-6.26 6.26m6.26-10.924a1.6 1.6 0 1 1 1.6-1.6 1.6 1.6 0 0 1-1.6 1.6' data-name='Tracé 403'/%3E%3C/g%3E%3C/svg%3E");   
}
.mobile-menu-list > li.btn-egalim > a {
background-color: transparent;
border-radius: 0;
padding: 1rem 0;
color: #FFF;
font-family: var(--font-primary, 'Open Sans', sans-serif);
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
text-align: right;
}
.mobile-menu-list > li.btn-egalim > a:hover,
.mobile-menu-list > li.btn-egalim > a:focus,
.mobile-menu-list > li.btn-egalim.current-menu-item > a,
.mobile-menu-list > li.btn-egalim.current_page_item > a {
color: #A9C88F;
background-color: transparent;
}
}
@media screen and (min-width: 1024px) {
#menu-menu-principal {
@apply gap-4;
}
}
@media screen and (min-width: 1200px) {
#menu-menu-principal {
@apply gap-[50px];
}
#menu-menu-principal > li.picto-insta {
margin-left: -36px;
}
}
.complex-menu-banner {
background-color: #234C9B;
color: white;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
height: 50px; z-index: 40; }
@media (max-width: 768px) {
.complex-menu-banner {
height: auto;
}
} .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;
} .is-sticky-header-container.is-sticky #site-header {
position: relative;
z-index: 1;
} 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;
} .secondary-nav {
height: 100%;
margin: auto;
}
.secondary-nav ul {
height: 100%;
padding: 0;
list-style: none;
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;
} .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;
} @media (max-width: 1023px) {
.complex-submenu ul {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.complex-submenu ul {
grid-template-columns: 1fr;
}
} .is-sticky-header-container.is-sticky,
header#site-header.is-sticky {
transition: transform 0.3s ease;
} .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%);
} .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-listing {
padding-top: 0;
@apply bg-beige;
} .actus-filters-section {
padding: 2rem 0;
background-color: #FAF8F4;
}
.actus-pagination,
.actus-content {
background-color: #FFF;
} 
.actus-filters-container { margin: 0 auto;
padding: 0 1.5rem;
} @media (max-width: 1023px) {
.actus-filters-section {
padding: 0 0 2rem 0;
}
.actus-filters-container {
padding: 0;
}
}  .actus-filters-mobile {
display: block;
}
.actus-filters--desktop {
display: none !important;
} @media (min-width: 1024px) {
.actus-filters-mobile {
display: none !important;
}
.actus-filters--desktop {
display: flex !important;
}
}
.actus-filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
list-style: none;
margin: 0;
padding: 0;
}
.actus-filter {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 1rem;
padding: 1rem 1.25rem;
cursor: pointer;
transition: all 0.2s ease;
text-align: center; 
flex-basis: 140px;
}
.actus-filter__icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
@apply text-primary;
}
.actus-filter__icon svg {
width: 100%;
height: 100%;
}
.actus-filter__label {
font-weight: 500;
white-space: normal;
transition: color 0.2s ease;
font-size: 18px;
color: #99B780;
@apply text-primary;
}  #actus-filters-mobile-menu {
padding: 0 1.5rem;
} .actus-filters-mobile__toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 1rem 1.5rem;
background-color: #99B780;
border: none;
cursor: pointer;
text-align: left;
transition: background-color 0.2s ease;
}
.actus-filters-mobile__toggle:hover,
.actus-filters-mobile__toggle:focus {
background-color: #8aab6f;
}
.actus-filters-mobile__toggle:focus {
outline: 2px solid transparent;
box-shadow: 0 0 0 2px #2271b1;
}
.actus-filters-mobile__toggle-label {
font-family: var(--font-primary, 'Open Sans', sans-serif);
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
@apply text-primary;
}
.actus-filters-mobile__toggle-icon {
width: 26px;
height: 22px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22.01'%3E%3Cg data-name='Groupe 5599' transform='translate(-324 -599.49)'%3E%3Cpath fill='none' stroke='%233c1900' stroke-linecap='round' stroke-width='2' d='M327.5 600.49v20.01' data-name='Ligne 236'/%3E%3Cpath fill='none' stroke='%233c1900' stroke-linecap='round' stroke-width='2' d='M337.5 600.49v20.01' data-name='Ligne 259'/%3E%3Cpath fill='none' stroke='%233c1900' stroke-linecap='round' stroke-width='2' d='M346.5 600.49v20.01' data-name='Ligne 260'/%3E%3Ccircle cx='3.5' cy='3.5' r='3.5' fill='%233c1900' data-name='Ellipse 26' transform='translate(334 610)'/%3E%3Ccircle cx='3.5' cy='3.5' r='3.5' fill='%233c1900' data-name='Ellipse 30' transform='translate(343 604)'/%3E%3Ccircle cx='3.5' cy='3.5' r='3.5' fill='%233c1900' data-name='Ellipse 29' transform='translate(324 604)'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
flex-shrink: 0;
} .actus-filters-mobile__menu {
position: fixed;
top: 112px;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
height: 100dvh; background-color: #99B780;
z-index: 990;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
display: flex;
flex-direction: column;
overflow: hidden;
}
.actus-filters-mobile__menu.active {
transform: translateX(0);
} .actus-filters-mobile__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0;
border-bottom: 1px solid rgba(60, 25, 0, 0.1);
}
.actus-filters-mobile__title {
font-family: var(--font-primary, 'Open Sans', sans-serif);
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
@apply text-primary;
}
.actus-filters-mobile__close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
@apply text-primary;
transition: opacity 0.2s ease;
}
.actus-filters-mobile__close:hover,
.actus-filters-mobile__close:focus {
opacity: 0.7;
}
.actus-filters-mobile__close:focus {
outline: 2px solid transparent;
box-shadow: 0 0 0 2px #2271b1;
border-radius: 4px;
}
.actus-filters-mobile__close svg {
width: 100%;
height: 100%;
} .actus-filters-mobile__list {
list-style: none;
margin: 0;
padding: 0;
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.actus-filter-mobile {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid rgba(60, 25, 0, 0.1);
cursor: pointer;
transition: background-color 0.2s ease;
text-align: right;
}
.actus-filter-mobile:hover,
.actus-filter-mobile:focus {
background-color: rgba(60, 25, 0, 0.05);
}
.actus-filter-mobile:focus {
outline: 2px solid transparent;
box-shadow: inset 0 0 0 2px #2271b1;
}
.actus-filter-mobile:last-child {
border-bottom: none;
}
.actus-filter-mobile__label {
font-family: var(--font-primary, 'Open Sans', sans-serif);
font-size: 18px;
font-weight: 500;
color: #3C1900;
}
.actus-filter-mobile__icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #3C1900;
}
.actus-filter-mobile__icon svg {
width: 100%;
height: 100%;
} .actus-filter-mobile__icon svg,
.actus-filter-mobile__icon svg path,
.actus-filter-mobile__icon svg g {
stroke: #3C1900;
color: #3C1900;
}
.actus-filter-mobile.active .actus-filter-mobile__label {
font-weight: 700;
color: #7B7F53;
}
.actus-filter-mobile.active .actus-filter-mobile__icon {
color: #7B7F53;
}
.actus-filter-mobile.active .actus-filter-mobile__icon svg,
.actus-filter-mobile.active .actus-filter-mobile__icon svg path,
.actus-filter-mobile.active .actus-filter-mobile__icon svg g {
stroke: #7B7F53;
color: #7B7F53;
} .actus-filters-mobile__menu.active .actus-filter-mobile {
opacity: 0;
transform: translateX(-20px);
animation: slideInLeftFilter 0.3s ease-out forwards;
}
.actus-filters-mobile__menu.active .actus-filter-mobile:nth-child(1) { animation-delay: 0.05s; }
.actus-filters-mobile__menu.active .actus-filter-mobile:nth-child(2) { animation-delay: 0.1s; }
.actus-filters-mobile__menu.active .actus-filter-mobile:nth-child(3) { animation-delay: 0.15s; }
.actus-filters-mobile__menu.active .actus-filter-mobile:nth-child(4) { animation-delay: 0.2s; }
.actus-filters-mobile__menu.active .actus-filter-mobile:nth-child(5) { animation-delay: 0.25s; }
.actus-filters-mobile__menu.active .actus-filter-mobile:nth-child(6) { animation-delay: 0.3s; }
.actus-filters-mobile__menu.active .actus-filter-mobile:nth-child(7) { animation-delay: 0.35s; }
.actus-filters-mobile__menu.active .actus-filter-mobile:nth-child(8) { animation-delay: 0.4s; }
@keyframes slideInLeftFilter {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
} body.filters-menu-open {
overflow: hidden;
} .actus-pagination {
padding: 2rem 0 0;
display: flex;
justify-content: end;
}
.actus-pagination__container {
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.5rem;
margin: 0 auto;
display: flex;
justify-content: end;
width: 100%;
max-width: none;
}
.actus-pagination--bottom {
padding: 3rem 0 0;
text-align: center;
}
.actus-pagination--bottom .page-numbers,
.actus-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2rem;
height: 2rem;
padding: 0.25rem 0.5rem;
border-radius: 50%;
text-decoration: none;
transition: all 0.2s ease;
@apply text-primary text-lg font-bold;
vertical-align: text-bottom;
}
.actus-pagination--bottom .page-numbers svg,
.actus-pagination .page-numbers svg {
width: 25px;
height: 25px;
}
.actus-pagination .page-numbers:hover {
text-decoration: none;
@apply text-primary;
}
.actus-pagination .page-numbers.current {
@apply bg-primary text-white;
}
.actus-pagination .page-numbers.prev,
.actus-pagination .page-numbers.next {
padding: 0.25rem;
}
.actus-pagination .page-numbers.dots {
cursor: default;
} .actus-content {
padding: 0;
}
.actus-content__container { margin: 0 auto;
padding: 2rem 1.5rem 3rem;
} .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);
}
} .blog-card {
background-color: #FAF8F4;
overflow: hidden; height: auto;
min-height: 325px;
display: flex;
flex-flow: column nowrap;
}
.blog-card__image {
position: relative;
width: 100%;
aspect-ratio: 370 / 202;
overflow: hidden;
height: auto;
}
.blog-card__image-link {
display: block;
width: 100%;
height: 100%;
}
.blog-card__thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.blog-card:hover .blog-card__thumbnail {
transform: scale(1.05);
}
.blog-card__content {
padding: 1rem;
height: auto;
display: flex;
flex: 1;
flex-flow: column nowrap;
} .blog-card__category-wrapper {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.blog-card__category-icon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
@apply text-primary;
color: #A19081;
fill: #A19081;
stroke: #A19081;
}
.blog-card__category-icon svg,
.blog-card__category-icon svg g,
.blog-card__category-icon svg path {
color: #A19081;
stroke: #A19081;
}
.blog-card__category-icon svg {
width: 100%;
height: 100%;
}
.blog-card__category {
font-weight: 500;
color: #A19081;
} .blog-card__title {
margin: 0 0 0.75rem 0;
text-transform: none;
@apply text-primary font-bold text-lg;
}
.blog-card__title-link {
font-weight: 600;
text-decoration: none;
line-height: 1.3;
transition: color 0.2s ease;
@apply text-primary;
}
.blog-card__title-link:hover {
@apply text-vert;
text-decoration: none;
} .blog-card__excerpt {
line-height: 1.6;
margin-bottom: 1rem;
@apply text-primary text-lg;
}
.blog-card__excerpt p {
margin: 0;
} .blog-card__footer {
margin-top: auto;
}
.blog-card__cta {
display: inline-block;
text-decoration: underline;
font-weight: 500;
transition: all 0.2s ease;
color: #145A25;
@apply text-lg font-semibold;
}
.blog-card__cta:hover {
text-decoration: none;
} .single-post {
max-width: none;
}
.single-video-page,
.single-post-page {
padding: 0 !important;
}
.single-post__header,
.single-post__title-wrapper,
.single-post__content,
.single-post__footer {
max-width: 1120px;
margin: auto;
}
.single-video__player,
.single-video__header, 
.single-video__title-wrapper, 
.single-video__footer {
max-width: 1120px;
margin: auto;
}  .single-post__header {
padding: 1.5rem 0;
}
.single-post__header-container {
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.single-post__back-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
transition: color 0.2s ease;
@apply text-primary text-lg font-semibold;
}
.single-post__back-link:hover {
@apply text-vert;
text-decoration: none;
}
.single-post__category {
display: flex;
align-items: center;
gap: 0.5rem;
}
.single-post__category-icon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
@apply text-primary;
color: #A19081;
stroke: #A19081;
}
.single-post__category-icon svg,
.single-post__category-icon svg g,
.single-post__category-icon svg path {
color: #A19081;
stroke: #A19081;
}
.single-post__category-icon svg {
width: 100%;
height: 100%;
}
.single-post__category-label {
font-weight: 600;
color: #A19081;
} .single-post__featured-image {
margin-bottom: 2rem;
}
.single-post__featured-container {
margin: 0 auto;
padding: 0 !important;
}
.single-post__thumbnail {
width: 100%;
height: auto;
border-radius: 0;
} .single-post__title-wrapper {
margin-bottom: 2rem;
}
.single-post__title-container {
margin: 0 auto;
padding: 0 1.5rem;
text-align: center;
}
.single-post__title {
font-weight: 700;
line-height: 1.2;
margin: 0;
text-transform: uppercase;
@apply text-primary;
} .single-post__excerpt-wrapper {
margin-bottom: 2rem;
}
.single-post__excerpt-container {
margin: 0 auto;
padding: 0 1.5rem;
}
.single-post__excerpt {
font-weight: 600;
line-height: 1.5;
margin: 0;
@apply text-primary;
} .single-post__content {
margin-bottom: 3rem;
}
.single-post__content-container {
margin: 0 auto;
padding: 0 1.5rem;
}
.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;
@apply text-primary;
}
.single-post__content-container h2,
.single-post__content-container h3,
.single-post__content-container h4 {
font-weight: 600;
margin-top: 2rem;
margin-bottom: 1rem;
line-height: 1.3;
@apply text-primary;
}
.single-post__content-container ul,
.single-post__content-container ol {
padding-left: 1.5rem;
@apply text-primary;
}
.single-post__content-container li {
margin-bottom: 0.5rem;
line-height: 1.6;
}
.single-post__content-container a {
text-decoration: underline;
@apply text-vert;
}
.single-post__content-container a:hover {
text-decoration: none;
}
.single-post__content-container blockquote {
border-left: 4px solid;
padding-left: 1rem;
margin: 2rem 0;
font-style: italic;
@apply border-vert text-primary;
} .single-post__footer {
padding: 2rem 0 4rem;
}
.single-post__footer-container {
margin: 0 auto;
padding: 0 1.5rem;
text-align: center;
}
.single-post__back-btn {
display: inline-block;
padding: 0.5rem 90px;
border: 1px solid;
border-radius: 2rem;
text-decoration: none;
font-weight: 600;
transition: all 0.2s ease;
@apply border-primary text-primary text-lg;
}
.single-post__back-btn:hover {
text-decoration: none;
@apply bg-vert-dark text-white;
} .single-video {
max-width: none;
} .single-video__header {
padding: 1.5rem 0;
}
.single-video__header-container { margin: 0 auto;
padding: 0 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.single-video__back-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
transition: color 0.2s ease;
@apply text-primary text-lg font-semibold;
}
.single-video__back-link:hover {
@apply text-vert;
text-decoration: none;
}
.single-video__category {
display: flex;
align-items: center;
gap: 0.5rem;
}
.single-video__category-icon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
@apply text-primary;
color: #A19081;
stroke: #A19081;
}
.single-video__category-icon svg,
.single-video__category-icon svg g,
.single-video__category-icon svg path {
color: #A19081;
stroke: #A19081;
}
.single-video__category-icon svg {
width: 100%;
height: 100%;
}
.single-video__category-label {
font-weight: 600;
color: #A19081;
} .single-video__player {
margin-bottom: 2rem;
}
.single-video__player-container { margin: 0 auto;
padding: 0 1.5rem;
}
.single-video__embed {
position: relative;
padding-bottom: 56.25%; height: 0;
overflow: hidden; @apply rounded-[8px] md:rounded-[50px];
}
.single-video__embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} .single-video__title-wrapper {
margin-bottom: 2rem;
}
.single-video__title-container { margin: 0 auto;
padding: 0 1.5rem;
text-align: center;
}
.single-video__title {
font-weight: 700;
line-height: 1.2;
margin: 0;
text-transform: uppercase;
@apply text-primary;
} .single-video__footer {
padding: 2rem 0 4rem;
}
.single-video__footer-container { margin: 0 auto;
padding: 0 1.5rem;
text-align: center;
}
.single-video__back-btn {
display: inline-block;
padding: 0.5rem 90px;
border: 1px solid;
border-radius: 2rem;
text-decoration: none;
font-weight: 600;
transition: all 0.2s ease;
@apply border-primary text-primary text-lg;
}
.single-video__back-btn:hover {
text-decoration: none;
@apply bg-vert-dark text-white;
} .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);
}
.spinner {
width: 2rem;
height: 2rem;
border: 2px solid #e5e7eb;
border-top-color: currentColor;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 1rem;
@apply border-t-vert;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
} @media (max-width: 768px) {
.actus-filters {
gap: 0.5rem;
}
.actus-filter {
padding: 0.75rem;
min-width: 80px;
}
.actus-filter__icon {
width: 32px;
height: 32px;
}
.actus-pagination__container {
justify-content: end;
}
.single-post__header-container,
.single-video__header-container {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}
} @media (prefers-reduced-motion: reduce) {
.blog-card,
.blog-card__thumbnail,
.blog-card__cta,
.single-post__back-btn,
.single-video__back-btn {
transition: none;
}
.blog-card:hover .blog-card__thumbnail {
transform: none;
}
.spinner {
animation: none;
}
} .no-results {
padding: 3rem 0;
text-align: center;
}
.no-results__container {
max-width: 600px;
margin: 0 auto;
padding: 0 1.5rem;
}
.no-results__title {
@apply text-primary text-2xl font-bold;
margin: 0 0 1rem 0;
}
.no-results__content p {
margin-bottom: 1.5rem;
@apply text-primary text-lg font-bold;
}
.no-results__actions {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
margin-top: 2rem;
}
@media (min-width: 640px) {
.no-results__actions {
flex-direction: row;
justify-content: center;
}
}
.no-results__home-link,
.no-results__reset-filters {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
border-radius: 0.375rem;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
border: none;
cursor: pointer;
}
.no-results__home-link {
background-color: #4f46e5;
color: #ffffff;
}
.no-results__home-link:hover {
background-color: #3730a3;
text-decoration: none;
}
.no-results__reset-filters {
background-color: #f3f4f6;
color: #374151;
border: 1px solid #d1d5db;
}
.no-results__reset-filters:hover {
background-color: #e5e7eb;
}
#list-of-post article:nth-child(3n-2){
animation-delay: 250ms;
}
#list-of-post article:nth-child(3n-1){
animation-delay: 500ms;
}
#list-of-post article:nth-child(3n){
animation-delay: 750ms;
}
@media screen and (max-width: 768px) {
#list-of-post article {
animation-delay: 0s !important;
}
}
#site-header {
@apply bg-white shadow-md transition-all duration-300;
}
#site-header.sticky {
position: fixed;
top: 0;
z-index: 50;
} .site-logo img {
@apply h-[90px] w-[90px] object-contain;
}
.site-logo a {
@apply block transition-opacity duration-200 hover:opacity-80;
} .main-nav ul {
@apply flex items-center space-x-8;
}
.main-nav li {
@apply relative;
}
.main-nav a {
@apply text-gray-700 hover:text-primary transition-colors duration-200 font-medium py-2 block relative;
}
.main-nav a::after {
@apply absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-200;
content: '';
}
.main-nav a:hover::after {
@apply w-full;
} .main-nav .sub-menu {
@apply absolute top-full left-0 bg-white shadow-lg rounded-md py-2 min-w-48 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 border border-gray-100;
}
.main-nav .sub-menu li {
@apply block;
}
.main-nav .sub-menu a {
@apply px-4 py-2 text-sm;
}
.main-nav .sub-menu a::after {
@apply hidden;
} .main-nav .menu-item-has-children {
position: relative;
}
.main-nav .menu-item-has-children > a::after {
@apply ml-1 inline-block w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-400 transition-transform duration-200;
content: '';
}
.main-nav .menu-item-has-children:hover > a::after {
@apply border-t-primary transform rotate-180;
} .mobile-menu-toggle {
@apply p-2 text-gray-700 hover:text-primary transition-colors rounded-md;
}
.mobile-menu {
@apply border-t border-gray-200 bg-white;
}
.mobile-menu ul {
@apply py-4 space-y-1;
}
.mobile-menu li {
@apply block;
}
.mobile-menu a {
@apply block py-3 px-4 text-gray-700 hover:text-primary transition-colors duration-200 rounded-md mx-2;
} #site-footer {
@apply bg-gray-900 text-white;
}
.footer-column h3 {
@apply text-lg font-semibold mb-4 text-primary;
}
.footer-column ul {
@apply space-y-2;
}
.footer-column a {
@apply text-gray-300 hover:text-white transition-colors duration-200 block py-1;
}
.footer-column a:hover {
@apply text-white;
} .acces-rapide {
@apply block w-12 h-12 bg-primary text-white rounded-full shadow-lg flex items-center justify-center transition-all duration-200 hover:scale-110;
}
.acces-rapide:hover {
@apply shadow-xl;
}
.acces-rapide img {
@apply w-6 h-6;
}
.acces-rapide svg {
@apply w-6 h-6;
} .btn-primary,
.btn-secondary {
@apply flex mx-auto justify-center;
}
.btn-primary > a {
@apply bg-transparent text-primary border border-primary;
border-radius: 9999px; transition: all 0.3s ease;
min-width: auto;
height: auto;
padding: 11px 22px 11px;
font-weight: 600;
letter-spacing: 0.05em;
border-width: 2px;
}
.btn-primary > a:hover {
@apply bg-vert-dark !text-white border-vert-dark;
}
.btn-secondary > a {
@apply bg-beige !text-vert border border-transparent;
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 {
@apply bg-vert !text-beige border-beige border;
}
.btn-download {
padding-left: 46px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' data-name='Composant 28 – 11' viewBox='0 0 35 35'%3E%3Cg fill='none' stroke='%233c1900' stroke-width='2' data-name='Ellipse 18'%3E%3Ccircle cx='17.5' cy='17.5' r='17.5' stroke='none'/%3E%3Ccircle cx='17.5' cy='17.5' r='16.5'/%3E%3C/g%3E%3Cg fill='none' stroke='%233c1900' stroke-width='2' data-name='Groupe 5546'%3E%3Cpath d='M17.5 7.155v17.66' data-name='Tracé 7711'/%3E%3Cpath d='m8.211 15.985 9.289 9.289 9.289-9.289' data-name='Tracé 7712'/%3E%3C/g%3E%3C/svg%3E");
background-size: 35px 35px;
background-position: left center;
background-repeat: no-repeat;
display: block;
min-height: 35px;
background-size: 35px 100%;
padding-top: 3px;
}
.btn-download:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' data-name='Composant 28 – 11' viewBox='0 0 35 35'%3E%3Cg fill='%23228039' stroke='%23228039' stroke-width='2' data-name='Ellipse 18'%3E%3Ccircle cx='17.5' cy='17.5' r='17.5' stroke='none'/%3E%3Ccircle cx='17.5' cy='17.5' r='16.5' fill='none'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' data-name='Groupe 5546'%3E%3Cpath d='M17.5 7.155v17.66' data-name='Tracé 7711'/%3E%3Cpath d='m8.211 15.985 9.289 9.289 9.289-9.289' data-name='Tracé 7712'/%3E%3C/g%3E%3C/svg%3E");
}
.btn-outline {
@apply inline-flex items-center px-6 py-3 border-2 border-primary text-primary hover:bg-primary hover:text-white font-semibold rounded-lg transition-all duration-200;
} .card {
@apply bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-200;
}
.card-header {
@apply p-6 border-b border-gray-200 bg-gray-50;
}
.card-body {
@apply p-6;
}
.card-footer {
@apply p-6 border-t border-gray-200 bg-gray-50;
} .title-banner {
background-color: #F7EFE7;
padding: 220px 0 4rem;
}
.title-banner__container {
max-width: 1920px;
margin: 0 auto;
padding: 0 1.5rem;
text-align: center;
}
.title-banner__icon-wrapper {
display: flex;
justify-content: center;
margin-bottom: 1.75rem;
}
.title-banner__icon {
width: 150px;
height: auto;
object-fit: contain;
}
.title-banner__title {
color: #3e1d0c;
font-weight: 700;
text-transform: uppercase;
font-size: 47px;
line-height: 65px;
margin: 0;
text-align: center;
max-width: 732px;
margin: auto;
}
@media (max-width: 768px) {
.title-banner {
padding: 140px 0 3rem;
}
.title-banner__icon {
width: 120px;
}
.title-banner__title {
font-size: 32px;
line-height: 40px;
}
} .form-group {
@apply mb-4;
}
.form-label {
@apply block text-sm font-medium text-gray-700 mb-2;
}
.form-input {
@apply w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200;
}
.form-input:focus {
@apply outline-none;
}
.form-textarea {
@apply w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200 resize-y;
min-height: 100px;
}
.form-select {
@apply w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200;
}
.form-button {
@apply bg-primary hover:bg-primary-dark text-white font-semibold py-2 px-6 rounded transition-all duration-200;
} .container {
@apply max-w-[1920px] mx-auto;
}
.section-padding {
@apply py-16;
}
.text-gradient {
@apply bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent;
}
.rejoignez-filiere {
@apply pt-[43px] pb-[240px] md:pt-[90px] md:pb-[88px] px-6 relative;
}
.rejoignez-filiere::before {
content: '';
position: absolute;
bottom: 0;
left: 66%;
width: 100%;
height: 100%;
background-image: url(//volaypei.com/wp-content/themes/volaypei/resources/img/poulaga.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 342px;
width: 432px;
z-index: 1;
} @media (max-width: 768px) {
.main-nav {
@apply hidden;
}
.mobile-menu-toggle {
@apply block;
}
.container { }
.section-padding {
@apply py-12;
}
.rejoignez-filiere::before {
height: 200px;
width: 280px;
bottom: 32px;
left: calc(50% - 140px);
right: 0;
}
}
@media (min-width: 769px) {
.mobile-menu-toggle {
@apply hidden;
}
.mobile-menu {
@apply hidden;
}
} @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-visible:focus {
@apply outline-none ring-2 ring-primary ring-offset-2;
} ::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
@apply bg-gray-100;
}
::-webkit-scrollbar-thumb {
@apply bg-gray-400 rounded-full;
}
::-webkit-scrollbar-thumb:hover {
@apply bg-gray-500;
} @media print {
.mobile-menu-toggle,
.mobile-menu,
.acces-rapide {
@apply hidden;
}
#site-header {
@apply static shadow-none;
}
.btn-primary,
.btn-secondary,
.btn-outline {
@apply border border-gray-400 text-gray-800 bg-transparent;
}
}
.leaflet-container a.leaflet-popup-close-button {
position: absolute;
top: 4px;
right: 4px;
}
.page-id-271 #main {
}
.page-id-271 #main .content {
@apply !bg-bleu;
@apply px-6;
}
.page-id-271 #main h2 {
padding-top: 73px;
}
.wpcf7-form {
padding-bottom: 40px;
}
.wpcf7-response-output {
margin: 32px auto !important;
max-width: 640px;
@apply text-primary text-lg font-primary font-normal;
}
.cf7-form {
max-width: 640px;
margin: 0 auto;
}
.cf7-title {
text-align: center;
margin-bottom: 40px;
} .cf7-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.cf7-form .cf7-field p {
margin-bottom: 0 !important;
}
.cf7-field--full {
grid-column: 1 / -1;
} .cf7-form input[type="text"],
.cf7-form input[type="email"],
.cf7-form input[type="tel"],
.cf7-form textarea {
width: 100%;
padding: 16px 20px;
border: none;
background: #ffffff;
font-size: 18px;
line-height: 1.4;
box-sizing: border-box;
border-radius: 0;
&::placeholder {
@apply text-primary text-lg font-primary font-normal;
}
}
.cf7-form textarea {
min-height: 220px;
resize: vertical;
} .cf7-form ::placeholder {
opacity: 1;
} .cf7-consent {
margin: 32px 0;
}
.cf7-consent .wpcf7-list-item {
margin: 0;
}
.cf7-consent label {
display: flex;
gap: 12px;
align-items: flex-start;
cursor: pointer;
}
.cf7-consent input[type="checkbox"] {
margin-top: 6px;
border-radius: 20px;
border: none;
} .cf7-actions {
text-align: center;
}
#main .cf7-actions p {
margin-bottom: 0;
}
input[type="submit"] {
@apply bg-transparent text-primary border border-primary;
border-radius: 9999px; transition: all 0.3s ease;
min-width: auto;
height: auto;
padding: 8px 36px 8px;
font-weight: 600;
letter-spacing: 0.05em;
border: 2px solid #3C1900;
}
input[type="submit"]:hover {
@apply bg-vert-dark !text-white border-vert-dark;
}
.cf7-actions {
position: relative;
}
.wpcf7-spinner {
position: absolute;
top: 13px;
left: calc(50% + 20px);
} .wpcf7-not-valid-tip {
font-size: 14px;
margin-top: 6px;
}
.wpcf7-response-output {
margin-top: 24px;
border: none;
} @media (max-width: 768px) {
.cf7-grid {
grid-template-columns: 1fr;
}
.cf7-consent input[type="checkbox"] {
width: 16px;
height: 16px;
}
.cf7-consent input[type="checkbox"]:before {
width: 16px;
height: 16px;
margin: 0;
}
}
.professor {
font-family: "professor", sans-serif;
font-weight: 400;
font-style: normal;
}
#site-footer {
margin-top: auto; } .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;
} .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; } .footer-bandeau {
background-color: #111827; border-top: 1px solid #374151; }
.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;
} .footer-copyright {
background-color: #111827; border-top: 1px solid #374151; }
.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: center;
align-items: center;
gap: 6rem;
}
#menu-footer-2 li {
margin-top: 0;
margin-bottom: 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;
} @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;
}
} .footer-column + .footer-column {
margin-top: 2rem;
}
@media (min-width: 768px) {
.footer-column + .footer-column {
margin-top: 0;
}
} .footer-content a {
color: #3b82f6;
text-decoration: underline;
transition: color 0.2s ease;
}
.footer-content a:hover {
color: #1d4ed8;
} .footer-content img {
max-width: 100%;
height: auto;
border-radius: 0.375rem;
} .footer-content ul,
.footer-content ol {
margin: 0.5rem 0;
padding-left: 1.5rem;
}
.footer-content li {
margin: 0.25rem 0;
}
#main.page-404 .content {
@apply bg-light-bleu text-center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1304.074' height='346.141' viewBox='0 0 1304.074 346.141'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='none' stroke='%233c1900' stroke-width='2' d='M0 0h1304.074v346.141H0z' data-name='Rectangle 3461'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg fill='none' stroke='%233c1900' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' clip-path='url(%23a)' data-name='Groupe 5550'%3E%3Cpath d='M.351 345.79a354.04 354.04 0 0 0 250.346-103.7h0a354.04 354.04 0 0 1 250.346-103.7h150.63' data-name='Tracé 7771'/%3E%3Cpath d='M1303.723 345.761a354.04 354.04 0 0 1-250.346-103.7h0a354.04 354.04 0 0 0-250.346-103.7h-150.63' data-name='Tracé 7772'/%3E%3Cpath d='M509.483 66.845c0 19.424-11.777 28.476-21.978 28.476s-21.978-9.053-21.978-28.476 11.777-48.558 21.978-48.558 21.978 29.134 21.978 48.558' data-name='Tracé 7773'/%3E%3Cpath d='M487.505 138.217V56.804' data-name='Ligne 213'/%3E%3Cpath d='m495.529 65.658-8.024 15.691-6.3-8.45' data-name='Tracé 7774'/%3E%3Cpath d='M142.576 251.453c0 19.424-11.777 28.477-21.978 28.477s-21.978-9.052-21.978-28.477 11.777-48.558 21.978-48.558 21.978 29.134 21.978 48.558' data-name='Tracé 7775'/%3E%3Cpath d='M120.598 322.824v-81.413' data-name='Ligne 214'/%3E%3Cpath d='m128.622 250.265-8.024 15.691-6.3-8.449' data-name='Tracé 7776'/%3E%3Cpath d='M273.44 178.408c0 16.015-9.71 23.48-18.121 23.48s-18.122-7.464-18.122-23.48 9.71-34.776 18.122-34.776 18.121 18.76 18.121 34.776' data-name='Tracé 7777'/%3E%3Cpath d='M255.318 237.256v-67.127' data-name='Ligne 215'/%3E%3Cpath d='m261.934 177.429-6.615 12.938-5.2-6.967' data-name='Tracé 7778'/%3E%3Cpath d='M933.157 98.817c0 16.016-9.71 23.48-18.121 23.48s-18.122-7.464-18.122-23.48 9.711-34.776 18.122-34.776 18.121 18.76 18.121 34.776' data-name='Tracé 7779'/%3E%3Cpath d='M915.036 157.665V90.538' data-name='Ligne 216'/%3E%3Cpath d='m921.652 97.838-6.615 12.938-5.2-6.967' data-name='Tracé 7780'/%3E%3Cpath d='M192.587 288.658v-56.859' data-name='Ligne 217'/%3E%3Cpath d='m198.608 238.016-6.019 9.559-6.3-6.145' data-name='Tracé 7781'/%3E%3Cpath d='M220.22 233.882a18 18 0 0 0-3.29-10.382 12.893 12.893 0 0 0-12.518-14.488 8.5 8.5 0 0 0-14.864 1.975 12.256 12.256 0 0 0-20.344 12.7 16.715 16.715 0 0 0 18.012 28.071 8.481 8.481 0 0 0 15.122.208 18.084 18.084 0 0 0 17.882-18.084' data-name='Tracé 7782'/%3E%3Cpath d='M719.302 90.977v47.436h-49.748V90.977' data-name='Tracé 7783'/%3E%3Cpath d='M766.454 82.303v56.1H719.3' data-name='Tracé 7784'/%3E%3Cpath d='M732.393 137.824v-29.159h24.7v29.154' data-name='Tracé 7785'/%3E%3Cpath d='M750.092 87.524a5.346 5.346 0 1 1-5.346-5.347 5.345 5.345 0 0 1 5.346 5.347' data-name='Tracé 7786'/%3E%3Cpath d='m773.431 90.975-27.064-33.639h-67.492l-17.824 33.639h58.252l27.064-33.639' data-name='Tracé 7787'/%3E%3Cpath d='m716.647 83.05 17.498-19.574' data-name='Ligne 218'/%3E%3Cpath d='M757.095 137.824v-29.159h-24.7v29.154' data-name='Tracé 7788'/%3E%3Cpath d='M579.903 122.072a15.7 15.7 0 1 1-15.7-15.7 15.7 15.7 0 0 1 15.7 15.7' data-name='Tracé 7789'/%3E%3Cpath d='M575.121 122.072a10.912 10.912 0 1 1-10.912-10.912 10.91 10.91 0 0 1 10.912 10.912' data-name='Tracé 7790'/%3E%3Ccircle cx='11.727' cy='11.727' r='11.727' data-name='Ellipse 21' transform='translate(601.602 114.316)'/%3E%3Ccircle cx='6.941' cy='6.941' r='6.941' data-name='Ellipse 22' transform='translate(606.388 119.101)'/%3E%3Cpath d='M549.104 107.07c3.218-3.858 8.134-6.944 15.625-6.944 19.976 0 21.945 21.945 21.945 21.945h15.619' data-name='Tracé 7791'/%3E%3Cpath d='M558.828 100.853v-26.8h25.63l7.739 26.442 17.057-.13a8.39 8.39 0 0 1 8.214 6.139 6.3 6.3 0 0 1 .231 1.6v7.05' data-name='Tracé 7792'/%3E%3Cpath d='M586.546 81.197H558.83' data-name='Ligne 219'/%3E%3Cpath d='M567.848 100.32V81.197' data-name='Ligne 220'/%3E%3Cpath d='M600.041 100.438V86.557h4.51' data-name='Tracé 7793'/%3E%3Cpath d='M592.196 100.499h-23.154' data-name='Ligne 221'/%3E%3Cpath d='M597.277 111.161v-6.396' data-name='Ligne 222'/%3E%3Cpath d='M602.296 111.161v-6.396' data-name='Ligne 223'/%3E%3Cpath d='M607.315 111.161v-6.396' data-name='Ligne 224'/%3E%3Cpath d='M430.09 146.272V89.413' data-name='Ligne 225'/%3E%3Cpath d='m436.109 95.63-6.019 9.559-6.3-6.145' data-name='Tracé 7794'/%3E%3Cpath d='M457.723 91.497a18 18 0 0 0-3.29-10.382 12.893 12.893 0 0 0-12.518-14.487 8.5 8.5 0 0 0-14.864 1.975 12.256 12.256 0 0 0-20.344 12.7 16.715 16.715 0 0 0 18.011 28.071 8.481 8.481 0 0 0 15.123.208 18.084 18.084 0 0 0 17.882-18.085' data-name='Tracé 7795'/%3E%3Cpath d='M1002.544 199.589V142.73' data-name='Ligne 226'/%3E%3Cpath d='m1008.563 148.947-6.019 9.559-6.3-6.145' data-name='Tracé 7796'/%3E%3Cpath d='M1030.177 144.814a18 18 0 0 0-3.29-10.382 13 13 0 0 0 .1-1.537 12.96 12.96 0 0 0-12.618-12.95 8.5 8.5 0 0 0-14.864 1.975 12.256 12.256 0 0 0-20.344 12.695 16.715 16.715 0 0 0 18.011 28.071 8.481 8.481 0 0 0 15.123.208 18.084 18.084 0 0 0 17.882-18.08' data-name='Tracé 7797'/%3E%3Cpath d='M297.244 40.67a13.057 13.057 0 1 0 13.057-13.057 13.057 13.057 0 0 0-13.057 13.057' data-name='Tracé 7798'/%3E%3Cpath d='M310.221.351v21.581' data-name='Ligne 227'/%3E%3Cpath d='M310.221 59.83v21.581' data-name='Ligne 228'/%3E%3Cpath d='m323.021 27.943 18.736-18.735' data-name='Tracé 7799'/%3E%3Cpath d='m278.696 72.327 18.353-18.353' data-name='Ligne 229'/%3E%3Cpath d='M279.682 9.929c-.173.172 17.263 17.608 17.436 17.436' data-name='Tracé 7800'/%3E%3Cpath d='m322.745 53.047 19.015 19.015' data-name='Tracé 7801'/%3E%3Cpath d='M329.528 41.775h21.581' data-name='Ligne 230'/%3E%3Cpath d='M269.612 41.775h21.581' data-name='Ligne 231'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
padding-top: 300px;
padding-bottom: 125px;
background-size: contain; background-size: 1304px 346px;
background-position: center 100px;
}
#main.page-404 .content h1 {
font-size: 121px;
line-height: 121px;
font-weight: 700;
margin-bottom: 0;
}
#main.page-404 .content h1 + p {
font-size: 47px; 
line-height: 65px;
margin-bottom: 0;
font-weight: 700;   
max-width: 730px;
margin: auto;
}
#main.page-404 .content a {
@apply btn-primary;
padding: 12px 88px;
margin-top: 40px;
}
@media screen and (max-width: 768px) {
#main.page-404 .content {
background-size: 545px 144px;
background-position: center 45px;
padding-top: 150px;
}
#main.page-404 .content h1 {
font-size: 87px;
line-height: 121px;
}
#main.page-404 .content h1 + p {
font-size: 32px;
line-height: 44px;
}
#main.page-404 .content a {
padding: 12px 16px;
width: 80%;
max-width: 350px;
}
}
#kosasa, 
#reproduction, 
#etapes, 
#elevage, 
#commercialisation, 
#fonctionnement {
@apply py-[50px] md:pt-[112px] md:pb-[130px];
& > p {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
}
#etapes .etapes-filiere--story-vertical {
padding-top: 120px;
}
@media screen and (max-width: 768px) {
#etapes .wp-block-columns {
flex-direction: column-reverse;
gap: 0;
}
#etapes .etapes-filiere--story-vertical {
padding-top: 16px;
}
}
.bulles-reproduction {
display: flex;
justify-content: center;
align-items: center;
gap: 100px;
margin-bottom: 45px;
}
.bulle-reproduction {
margin-bottom: 0 !important;
height: 180px;
border-radius: 100%;
background-color: #3C1900;
color: #FFF !important;
width: 180px;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
text-align: center; 
padding: 16px;
}
.bulle-reproduction:nth-child(3n-2){
animation-delay: 250ms;
}
.bulle-reproduction:nth-child(3n-1){
animation-delay: 500ms;
}
.bulle-reproduction:nth-child(3n){
animation-delay: 750ms;
}
@media screen and (max-width: 768px) {
.bulles-reproduction {
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
gap: 8px;
}
.bulle-reproduction {
height: 150px;
width: 150px;
}
}
.js-scroll {  animation-play-state: paused;
}
.js-scroll.scrolled { animation-play-state: running;
}
.anim-delay-0 {
animation-fill-mode: both;
animation-delay: 100ms;   }
.anim-delay-1 {
animation-fill-mode: both;
animation-delay: 200ms;   }
.anim-delay-2 {
animation-fill-mode: both;
animation-delay: 300ms;   }
.anim-delay-3 {
animation-fill-mode: both;
animation-delay: 300ms;   }
.anim-delay-4 {
animation-fill-mode: both;
animation-delay: 400ms;   }
.anim-delay-5 {
animation-fill-mode: both;
animation-delay: 500ms;   }
.anim-delay-6 {
animation-fill-mode: both;
animation-delay: 600ms;   }
.anim-delay-7 {
animation-fill-mode: both;
animation-delay: 700ms;   }
@media screen and (max-width: 768px) {
.js-scroll.scrolled[class*="anim-delay-"], 
[class*="anim-delay-"] {
animation-delay: 0s !important;
}
}
@keyframes zoomInZoomOut {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.5, 1.5);
}
100% {
transform: scale(1, 1);
}
}
.zoomInZoomOut {
opacity: 1;
transform: scale(1, 1);
animation-name: zoomInZoomOut;
animation-iteration-count: 1;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation-duration: 350ms;
transition-property: transform;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeInOpacity {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation-duration: 2000ms;
transition-property: opacity, transform;
}
@keyframes fadeInUpOpacity {
0% {
opacity: 0;
transform: translate3d(0, 100px, 0);
}
100% {
opacity: 1;
transform: translateZ(0);
}
}
.fadeInUpOpacity {
opacity: 0;
transform: translate3d(0, 100px, 0);
animation-name: fadeInUpOpacity;
animation-iteration-count: 1;
animation-fill-mode: both;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation-duration: 1250ms;
transition-property: opacity, transform;
}
@keyframes fadeInLeftOpacity {
0% {
opacity: 0;
transform: translateX(30%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInLeftOpacity {
opacity: 0;
transform: translateX(30%);
animation-name: fadeInLeftOpacity;
animation-fill-mode: both;
animation-iteration-count: 1;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation-duration: 1000ms;
transition-property: opacity, transform;
}
@keyframes fadeInRightOpacity {
0% {
opacity: 0;
transform: translateX(-30%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInRightOpacity {
opacity: 0;
transform: translateX(-30%);
animation-name: fadeInRightOpacity;
animation-fill-mode: both;
animation-iteration-count: 1;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation-duration: 1000ms;
transition-property: opacity, transform;
} .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: 1920px;
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; height: auto;
} .before-after__wrapper::before {
content: '';
display: block;
padding-top: 56.25%; }
.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%; }
.before-after__content-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; object-position: left center;
display: block;
user-select: none;
-webkit-user-drag: none;
} .before-after__image--after .before-after__content-image {
object-position: left center;
} .before-after__image--before .before-after__content-image {
object-position: left center;
} .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; pointer-events: none; }
.before-after__label--after,
.before-after__label--before {
left: 12px;
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;
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;
} @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;
}
} .before-after__scroller:focus {
outline: 2px solid var(--color-primary, #007cba);
outline-offset: 2px;
}
.before-after__scroller:focus:not(:focus-visible) {
outline: none;
} .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);
}
} @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);
}
} @media (prefers-reduced-motion: reduce) {
.before-after__scroller {
transition: none;
}
.before-after__wrapper {
animation: none;
}
.before-after__scroller:hover {
transform: translateY(-50%);
}
}
.blog-latest {
background-color: #ffffff;
}
.blog-latest__container {
margin: 0 auto;
max-width: 1920px; padding: 5rem 1.5rem; } .blog-latest__title {
text-align: center;
font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0 0 3rem 0; line-height: 1.2;
} .blog-latest__grid {
display: grid;
gap: 2rem; grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.blog-latest__grid {
grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.blog-latest__grid {
grid-template-columns: repeat(3, 1fr); }
} .blog-latest__article {
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: 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); transform: translateY(-4px);
} .blog-latest__image {
width: 100%;
height: 12rem; overflow: hidden;
}
.blog-latest__image-link {
display: block;
width: 100%;
height: 100%;
}
.blog-latest__thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.2s ease;
}
.blog-latest__article:hover .blog-latest__thumbnail {
transform: scale(1.05);
} .blog-latest__content {
padding: 1.5rem; } .blog-latest__meta {
display: flex;
align-items: center;
gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap;
}
.blog-latest__date {
font-size: 0.75rem; color: #6b7280; font-weight: 500;
}
.blog-latest__category {
font-size: 0.75rem; font-weight: 600; color: var(--accent-color); background-color: #eef2ff; padding: 0.25rem 0.5rem; border-radius: 0.375rem; } .blog-latest__article-title {
margin: 0 0 0.75rem 0; }
.blog-latest__article-link {
font-size: 1.125rem; font-weight: 600; color: #111827; text-decoration: none;
line-height: 1.3;
transition: color 0.2s ease;
}
.blog-latest__article-link:hover {
color: var(--accent-color); text-decoration: none;
}
.blog-latest__article-link:focus {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
border-radius: 0.25rem;
} .blog-latest__excerpt {
color: #4b5563; line-height: 1.6;
margin: 0 0 1rem 0; font-size: 0.875rem; } .blog-latest__read-more {
margin-top: auto;
}
.blog-latest__link {
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-latest__link:hover {
color: var(--accent-hover); text-decoration: none;
gap: 0.5rem; }
.blog-latest__link:focus {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
border-radius: 0.25rem;
} .blog-latest__action {
text-align: center;
margin-top: 3rem; }
.blog-latest__button {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.375rem; background-color: #111827; padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 600; color: #ffffff;
text-decoration: none;
transition: all 0.2s ease;
border: 2px solid transparent;
}
.blog-latest__button:hover {
background-color: #1f2937; 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);
} .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;
} @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;
}
} .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;
}
} @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 {
background-color: #f9fafb; }
.cards-grid__container {
margin: 0 auto;
max-width: 1920px; padding: 5rem 1.5rem; } .cards-grid__title {
text-align: center;
font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0 0 3rem 0; line-height: 1.2;
} .cards-grid__grid {
display: grid;
gap: 2rem; grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.cards-grid__grid {
grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.cards-grid__grid {
grid-template-columns: repeat(3, 1fr); }
} .cards-grid__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: 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); transform: translateY(-4px);
} .cards-grid__card-image {
width: 100%;
height: 12rem; overflow: hidden;
}
.cards-grid__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.2s ease;
}
.cards-grid__card:hover .cards-grid__image {
transform: scale(1.05);
} .cards-grid__card-content {
padding: 1.5rem; } .cards-grid__card-title {
font-size: 1.25rem; font-weight: 600; color: #111827; margin: 0 0 0.75rem 0; line-height: 1.3;
} .cards-grid__card-text {
color: #4b5563; line-height: 1.6;
margin: 0 0 1rem 0; } .cards-grid__card-action {
margin-top: auto;
}
.cards-grid__card-link {
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;
}
.cards-grid__card-link:hover {
color: var(--accent-hover); text-decoration: none;
gap: 0.5rem; }
.cards-grid__card-link:focus {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
border-radius: 0.25rem;
} .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;
} @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;
}
} .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;
}
} @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;
}
} @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;
}
}
: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;
} .carousel-lightbox {
margin: 2rem 0;
}
.carousel-lightbox__container {
max-width: 1920px;
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;
} .carousel-lightbox .swiper {
padding: 0;
margin: 0;
overflow: hidden; }
.carousel-lightbox .swiper-wrapper {
display: flex;
align-items: stretch;
}
.carousel-lightbox .swiper-slide {
height: auto;
display: flex;
} .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%;
object-fit: cover;
transition: transform var(--transition-normal);
}
.carousel-lightbox__image-button:hover .carousel-lightbox__image {
transform: scale(1.05);
} .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));
} .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;
} .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);
} .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);
} .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;
} .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;
} .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;
} .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);
} .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;
} body.carousel-lightbox-modal-open {
overflow: hidden;
} .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;
} @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;
}
} .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;
} .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 {
background-color: #ffffff;
}
.content-split__container {
margin: 0 auto;
max-width: 1920px; display: grid;
align-items: center;
gap: 3rem; padding: 5rem 1.5rem; }
@media (min-width: 1024px) {
.content-split__container {
grid-template-columns: 1fr 1fr; }
} .content-split__content {
order: 1;
}
@media (min-width: 1024px) {
.content-split__content {
order: unset;
}
} .content-split__title {
font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0;
line-height: 1.2;
} .content-split__wysiwyg {
margin-top: 1.5rem; max-width: none;
color: #374151; } .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;
} .content-split__action {
margin-top: 2rem; }
.content-split__button {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.375rem; background-color: #111827; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; color: #ffffff;
text-decoration: none;
transition: all 0.2s ease;
border: 2px solid transparent;
}
.content-split__button:hover {
background-color: #1f2937; 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);
} .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; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border: 1px solid rgba(17, 24, 39, 0.1); } .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;
} @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;
}
} @media (prefers-reduced-motion: reduce) {
.content-split__button {
transition: none;
}
.content-split__button:hover,
.content-split__button:active {
transform: none;
}
}
.cta-centered {
background-color: var(--accent-color); color: #ffffff;
}
.cta-centered__container {
margin: 0 auto;
max-width: 768px; padding: 4rem 1.5rem; text-align: center;
} .cta-centered__title {
font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: #ffffff;
margin: 0;
line-height: 1.2;
} .cta-centered__text {
margin-top: 0.75rem; color: #c7d2fe; line-height: 1.6;
margin-bottom: 0;
} .cta-centered__action {
margin-top: 2rem; } .cta-centered__button {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.375rem; background-color: #ffffff;
padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 600; color: var(--accent-hover); text-decoration: none;
transition: all 0.2s ease;
border: 2px solid transparent;
}
.cta-centered__button:hover {
background-color: #eef2ff; 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);
} .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;
} @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;
}
} @media (prefers-reduced-motion: reduce) {
.cta-centered__button {
transition: none;
}
.cta-centered__button:hover {
transform: none;
}
.cta-centered__button:active {
transform: none;
}
}
.faq-details {
background-color: #ffffff;
}
.faq-details__container {
margin: 0 auto;
max-width: 1920px; padding: 5rem 1.5rem; } .faq-details__title {
font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0 0 2rem 0; line-height: 1.2;
} .faq-details__items {
display: flex;
flex-direction: column;
gap: 1rem; } .faq-details__item {
border-radius: 0.5rem; border: 1px solid #e5e7eb; padding: 1rem; 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);
} .faq-details__question {
cursor: pointer;
user-select: none; font-size: 0.875rem; font-weight: 600; color: #111827; line-height: 1.4;
padding-right: 1rem; list-style: none; } .faq-details__question::-webkit-details-marker {
display: none;
}
.faq-details__question::marker {
content: none;
} .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);
} .faq-details__question:hover {
color: var(--accent-color);
} .faq-details__answer {
margin-top: 0.5rem; font-size: 0.875rem; color: #4b5563; line-height: 1.6;
padding-right: 1rem; }
.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;
} .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;
} @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;
}
} @media (prefers-reduced-motion: reduce) {
.faq-details__item,
.faq-details__question::after {
transition: none;
}
} .faq-details__question:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
border-radius: 0.25rem;
} .faq-details__question[aria-expanded="true"]::after {
transform: translateY(-50%) rotate(180deg);
} @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 {
background-color: #ffffff;
}
.features-grid__container {
margin: 0 auto;
max-width: 1920px; padding: 5rem 1.5rem; } .features-grid__header {
margin: 0 auto;
max-width: 672px; text-align: center;
}
.features-grid__title {
font-size: 2.25rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0;
line-height: 1.1;
}
.features-grid__intro {
margin-top: 1rem; color: #4b5563; margin-bottom: 0;
line-height: 1.6;
} .features-grid__items {
margin-top: 3rem; display: grid;
gap: 2rem; grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.features-grid__items {
grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.features-grid__items {
grid-template-columns: repeat(3, 1fr); }
} .features-grid__item {
border-radius: 1rem; border: 1px solid #e5e7eb; padding: 2rem; 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);
} .features-grid__icon {
margin-bottom: 1rem; }
.features-grid__emoji {
font-size: 3rem; line-height: 1;
display: inline-block;
}
.features-grid__image {
width: 48px;
height: 48px;
object-fit: cover;
border-radius: 0.5rem;
} .features-grid__item-title {
margin-top: 1rem; font-size: 1.125rem; font-weight: 600; color: #111827; margin-bottom: 0;
line-height: 1.4;
} .features-grid__item-text {
margin-top: 0.5rem; font-size: 0.875rem; color: #4b5563; line-height: 1.5;
margin-bottom: 0;
} .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;
} .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;
} @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;
}
} @media (prefers-reduced-motion: reduce) {
.features-grid__item {
transition: none;
}
.features-grid__item:hover {
transform: none;
}
}
.features-screenshot {
background-color: #111827; color: #ffffff;
}
.features-screenshot__container {
margin: 0 auto;
max-width: 1920px; display: grid;
gap: 3rem; padding: 6rem 1.5rem; align-items: center;
}
@media (min-width: 1024px) {
.features-screenshot__container {
grid-template-columns: 1fr 1fr; }
} .features-screenshot__content {
order: 1;
}
@media (min-width: 1024px) {
.features-screenshot__content {
order: unset;
}
} .features-screenshot__eyebrow {
font-size: 1rem; font-weight: 600; color: var(--accent-light); margin: 0;
} .features-screenshot__title {
margin-top: 0.5rem; font-size: 2.25rem; font-weight: 600; color: #ffffff;
line-height: 1.1;
margin-bottom: 0;
} .features-screenshot__intro {
margin-top: 1.5rem; color: #d1d5db; line-height: 1.6;
margin-bottom: 0;
} .features-screenshot__features {
margin-top: 2.5rem; display: flex;
flex-direction: column;
gap: 1.5rem; } .features-screenshot__feature {
position: relative;
padding-left: 1.75rem; } .features-screenshot__bullet {
position: absolute;
left: 0;
top: 0.25rem; display: inline-block;
width: 1rem; height: 1rem; border-radius: 0.25rem;
background-color: var(--accent-opacity-30); } .features-screenshot__feature-title {
font-weight: 600; color: #ffffff;
margin: 0;
line-height: 1.4;
} .features-screenshot__feature-text {
margin-top: 0.25rem;
color: #d1d5db; line-height: 1.5;
margin-bottom: 0;
} .features-screenshot__image {
order: 0;
}
@media (min-width: 1024px) {
.features-screenshot__image {
order: -1; justify-self: end; }
}
.features-screenshot__img {
max-width: 100%;
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); border: 1px solid rgba(255, 255, 255, 0.1); } .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;
} .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;
} @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-grid {
background-color: #ffffff;
}
.gallery-grid__container {
margin: 0 auto;
max-width: 1920px; padding: 5rem 1.5rem; } .gallery-grid__title {
text-align: center;
font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0 0 3rem 0; line-height: 1.2;
} .gallery-grid__grid {
display: grid;
gap: 1rem; 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);
}
} .gallery-grid__item {
position: relative;
border-radius: 0.75rem; overflow: hidden;
background-color: #f3f4f6; 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);
} .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;
} .gallery-grid__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.2s ease;
}
.gallery-grid__item:hover .gallery-grid__image {
transform: scale(1.05);
} .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; height: 2rem; color: #ffffff;
} .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; line-height: 1.4;
} .gallery-grid__modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: none; }
.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;
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;
} .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;
} @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;
}
} @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;
}
} body.gallery-modal-open {
overflow: hidden;
} .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;
}
} @media (prefers-reduced-motion: reduce) {
.gallery-grid__modal-backdrop,
.gallery-grid__modal-content {
animation: none;
}
}
.hero-centered {
background-color: #111827; color: #ffffff;
}
.hero-centered__container {
margin: 0 auto;
max-width: 768px; padding: 8rem 1.5rem; text-align: center;
} .hero-centered__eyebrow {
font-size: 0.875rem; font-weight: 600; color: var(--accent-light); margin: 0;
} .hero-centered__title {
margin-top: 0.75rem; font-size: 3rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1;
margin-bottom: 0;
} @media (min-width: 640px) {
.hero-centered__title {
font-size: 3.75rem; }
} .hero-centered__lead {
margin-top: 1.5rem; font-size: 1.125rem; color: #d1d5db; margin-bottom: 0;
line-height: 1.6;
} .hero-centered__actions {
margin-top: 2.5rem; display: flex;
align-items: center;
justify-content: center;
gap: 1rem; flex-wrap: wrap;
} .hero-centered__button {
text-decoration: none;
font-size: 0.875rem; font-weight: 600; transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.375rem; } .hero-centered__button--primary {
background-color: var(--accent-color); color: #ffffff;
padding: 0.75rem 1.25rem; border: 2px solid transparent;
}
.hero-centered__button--primary:hover {
background-color: var(--accent-hover); text-decoration: none;
}
.hero-centered__button--primary:focus {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
} .hero-centered__button--secondary {
color: #ffffff;
padding: 0.75rem 0;
background: transparent;
border: none;
}
.hero-centered__button--secondary:hover {
color: var(--accent-light); text-decoration: underline;
}
.hero-centered__button--secondary:focus {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
border-radius: 0.25rem;
} .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;
} @media (max-width: 640px) {
.hero-centered__container {
padding: 4rem 1rem; }
.hero-centered__title {
font-size: 2.25rem; }
.hero-centered__actions {
flex-direction: column;
gap: 0.75rem;
}
.hero-centered__button {
width: 100%;
max-width: 300px;
padding: 0.875rem 1.5rem;
}
} @media (prefers-reduced-motion: reduce) {
.hero-centered__button {
transition: none;
}
} @media (prefers-color-scheme: dark) {
.hero-centered {
background-color: #000000;
}
}
.hero-split {
background-color: #ffffff;
}
.hero-split__container {
margin: 0 auto;
max-width: 1920px; display: grid;
align-items: center;
gap: 3rem; padding: 5rem 1.5rem; }
@media (min-width: 1024px) {
.hero-split__container {
grid-template-columns: 1fr 1fr; }
} .hero-split__content {
order: 1;
}
@media (min-width: 1024px) {
.hero-split__content {
order: unset;
}
} .hero-split__eyebrow {
font-size: 0.875rem; font-weight: 600; color: var(--accent-color); margin: 0;
} .hero-split__title {
margin-top: 0.5rem; font-size: 2.25rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; line-height: 1.1;
margin-bottom: 0;
} .hero-split__lead {
margin-top: 1.5rem; color: #4b5563; line-height: 1.6;
margin-bottom: 0;
} .hero-split__actions {
margin-top: 2rem; display: flex;
gap: 1rem; flex-wrap: wrap;
} .hero-split__button {
text-decoration: none;
font-size: 0.875rem; font-weight: 600; transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.375rem; } .hero-split__button--primary {
background-color: #111827; color: #ffffff;
padding: 0.5rem 1rem; border: 2px solid transparent;
}
.hero-split__button--primary:hover {
background-color: #1f2937; text-decoration: none;
}
.hero-split__button--primary:focus {
outline: 2px solid #111827;
outline-offset: 2px;
} .hero-split__button--secondary {
color: #111827; padding: 0.5rem 0;
background: transparent;
border: none;
}
.hero-split__button--secondary:hover {
color: var(--accent-color); text-decoration: underline;
}
.hero-split__button--secondary:focus {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
border-radius: 0.25rem;
} .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; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border: 1px solid rgba(17, 24, 39, 0.1); } .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;
} .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;
} @media (max-width: 640px) {
.hero-split__container {
padding: 3rem 1rem;
gap: 2rem;
}
.hero-split__title {
font-size: 1.875rem; }
.hero-split__actions {
flex-direction: column;
gap: 0.75rem;
}
.hero-split__button {
width: 100%;
max-width: 300px;
padding: 0.75rem 1.5rem;
}
} @media (prefers-reduced-motion: reduce) {
.hero-split__button {
transition: none;
}
}
.hero-block {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
overflow: hidden;
} .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;
} .hero-block .container {
position: relative;
z-index: 2;
} @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;
} @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;
}
} .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 {
background-color: #ffffff;
}
.logo-cloud__container {
margin: 0 auto;
max-width: 1920px; padding: 4rem 1.5rem; } .logo-cloud__eyebrow {
text-align: center;
font-size: 0.875rem; font-weight: 600; color: #6b7280; margin: 0 0 2rem 0; text-transform: uppercase;
letter-spacing: 0.05em;
} .logo-cloud__logos {
display: grid;
grid-template-columns: repeat(3, 1fr); gap: 2rem; align-items: center;
justify-items: center;
}
@media (min-width: 640px) {
.logo-cloud__logos {
grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
.logo-cloud__logos {
grid-template-columns: repeat(6, 1fr); }
} .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);
} .logo-cloud__image {
height: 100%;
width: auto;
padding: 16px;
max-width: 100%;
filter: grayscale(100%);
opacity: 0.7;
transition: all 0.2s ease;
object-fit: contain;
}
.logo-cloud__logo:hover .logo-cloud__image {
filter: grayscale(0%);
opacity: 1;
} .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;
} @media (max-width: 640px) {
.logo-cloud__container {
padding: 1rem;
}
.logo-cloud__logos {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
} } .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);
}
} @media (prefers-reduced-motion: reduce) {
.logo-cloud__logo,
.logo-cloud__image {
transition: none;
}
.logo-cloud__logo:hover {
transform: none;
}
}
.newsletter-centered {
background-color: #f9fafb; }
.newsletter-centered__container {
margin: 0 auto;
max-width: 768px; padding: 5rem 1.5rem; text-align: center;
} .newsletter-centered__title {
font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0;
line-height: 1.2;
} .newsletter-centered__text {
margin-top: 0.75rem; color: #4b5563; line-height: 1.6;
margin-bottom: 0;
} .newsletter-centered__form {
margin: 0 auto;
margin-top: 2rem; display: flex;
max-width: 448px; gap: 0.75rem; align-items: stretch;
} .newsletter-centered__input {
min-width: 0;
flex: 1; border-radius: 0.375rem; border: 1px solid #d1d5db;
padding: 0.5rem 0.75rem; font-size: 0.875rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); transition: all 0.2s ease;
}
.newsletter-centered__input::placeholder {
color: #9ca3af; }
.newsletter-centered__input:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1); } .newsletter-centered__button {
border-radius: 0.375rem; background-color: var(--accent-color); padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; color: #ffffff;
border: none;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.newsletter-centered__button:hover {
background-color: var(--accent-hover); 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);
} .newsletter-centered__note {
margin-top: 1rem;
color: #6b7280;
font-style: italic;
}
.newsletter-centered__note small {
font-size: 0.75rem;
} @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;
}
} .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;
} .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 {
background-color: #ffffff;
}
.pricing-3__container {
margin: 0 auto;
max-width: 1920px; padding: 6rem 1.5rem; } .pricing-3__header {
margin: 0 auto;
max-width: 672px; text-align: center;
margin-bottom: 3rem; }
.pricing-3__title {
font-size: 2.25rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0;
line-height: 1.1;
}
.pricing-3__intro {
margin-top: 1rem; color: #4b5563; margin-bottom: 0;
line-height: 1.6;
} .pricing-3__plans {
display: grid;
gap: 1.5rem; grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.pricing-3__plans {
grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.pricing-3__plans {
grid-template-columns: repeat(3, 1fr); }
} .pricing-3__plan {
border-radius: 1rem; border: 1px solid #e5e7eb; padding: 2rem; 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);
} .pricing-3__plan--featured {
border: 1px solid var(--accent-color); 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;
} .pricing-3__plan-name {
font-size: 1rem; font-weight: 600; color: #111827; margin: 0;
line-height: 1.4;
} .pricing-3__plan-price {
margin-top: 1rem; font-size: 2.25rem; font-weight: 600; color: #111827; margin-bottom: 0;
line-height: 1.1;
} .pricing-3__features {
margin-top: 1.5rem; display: flex;
flex-direction: column;
gap: 0.5rem; list-style: none;
padding: 0;
}
.pricing-3__feature {
font-size: 0.875rem; color: #4b5563; line-height: 1.5;
position: relative;
padding-left: 1.5rem;
}
.pricing-3__feature::before {
content: "✓";
position: absolute;
left: 0;
color: #10b981; font-weight: 600;
} .pricing-3__cta {
margin-top: 2rem; display: inline-flex;
justify-content: center;
align-items: center;
width: 100%;
border-radius: 0.375rem; background-color: #111827; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; color: #ffffff;
text-decoration: none;
transition: all 0.2s ease;
border: 2px solid transparent;
}
.pricing-3__cta:hover {
background-color: #1f2937; text-decoration: none;
transform: translateY(-1px);
}
.pricing-3__cta:focus {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
} .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);
} .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;
} @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;
}
} @media (prefers-reduced-motion: reduce) {
.pricing-3__plan,
.pricing-3__cta {
transition: none;
}
.pricing-3__plan:hover,
.pricing-3__cta:hover {
transform: none;
}
}
.services-block {
padding: 4rem 0;
background-color: #f9fafb;
} .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;
} .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);
} .service-icon {
font-size: 2.25rem;
margin-bottom: 1rem;
text-align: center;
}
.service-icon img {
width: 4rem;
height: 4rem;
margin: 0 auto;
object-fit: contain;
}
.service-icon span {
font-size: 3.75rem;
display: block;
} .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;
} .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));
} @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));
}
} .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 {
background-color: #ffffff;
}
.stats-grid__container {
margin: 0 auto;
max-width: 1920px; padding: 4rem 1.5rem; } .stats-grid__items {
display: grid;
grid-template-columns: repeat(2, 1fr); gap: 2rem; text-align: center;
}
@media (min-width: 640px) {
.stats-grid__items {
grid-template-columns: repeat(4, 1fr); }
} .stats-grid__item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
} .stats-grid__label {
font-size: 0.875rem; color: #6b7280; font-weight: 400;
margin: 0;
line-height: 1.4;
} .stats-grid__value {
margin-top: 0.5rem; font-size: 1.875rem; font-weight: 600; color: #111827; margin-bottom: 0;
line-height: 1.1;
} .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;
} @media (max-width: 640px) {
.stats-grid__container {
padding: 3rem 1rem;
}
.stats-grid__items {
gap: 1.5rem;
}
.stats-grid__value {
font-size: 1.5rem;
}
} @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);
}
} @media (prefers-reduced-motion: reduce) {
.stats-grid__value {
transition: none;
}
.stats-grid__item:hover .stats-grid__value {
transform: none;
}
}
.steps-horizontal {
background-color: #ffffff;
}
.steps-horizontal__container {
margin: 0 auto;
max-width: 1024px; padding: 5rem 1.5rem; } .steps-horizontal__title {
font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0 0 2.5rem 0; line-height: 1.2;
} .steps-horizontal__steps {
display: grid;
gap: 2rem; grid-template-columns: 1fr;
list-style: none;
padding: 0;
margin: 0;
}
@media (min-width: 640px) {
.steps-horizontal__steps {
grid-template-columns: repeat(3, 1fr); }
} .steps-horizontal__step {
border-radius: 1rem; border: 1px solid #e5e7eb; padding: 1.5rem; 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);
} .steps-horizontal__step-number {
font-size: 0.75rem; font-weight: 600; color: var(--accent-color); text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
} .steps-horizontal__step-title {
margin-top: 0.5rem; font-size: 1.125rem; font-weight: 600; color: #111827; margin-bottom: 0;
line-height: 1.4;
} .steps-horizontal__step-text {
margin-top: 0.5rem; font-size: 0.875rem; color: #4b5563; line-height: 1.5;
margin-bottom: 0;
} @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;
}
} .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;
} @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;
} .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;
}
} @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;
}
} @media (prefers-reduced-motion: reduce) {
.steps-horizontal__step {
transition: none;
}
.steps-horizontal__step:hover {
transform: none;
}
}
.tabs-simple {
background-color: #f9fafb; }
.tabs-simple__container {
margin: 0 auto;
max-width: 1920px; padding: 5rem 1.5rem; } .tabs-simple__title {
text-align: center;
font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0 0 3rem 0; line-height: 1.2;
} .tabs-simple__wrapper {
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;
} .tabs-simple__nav {
display: flex;
background-color: #f9fafb; border-bottom: 1px solid #e5e7eb;
overflow-x: auto;
scrollbar-width: none; -ms-overflow-style: none; }
.tabs-simple__nav::-webkit-scrollbar {
display: none; } .tabs-simple__tab {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem 1.5rem; font-size: 0.875rem; font-weight: 500; color: #6b7280; text-decoration: none;
border-bottom: 2px solid transparent;
transition: all 0.2s ease;
white-space: nowrap;
min-width: fit-content;
}
.tabs-simple__tab:hover {
color: var(--accent-color); background-color: #ffffff; text-decoration: none;
}
.tabs-simple__tab:focus {
outline: 2px solid var(--accent-color);
outline-offset: -2px;
border-radius: 0.25rem;
} .tabs-simple__tab--active,
.tabs-simple__tab:target {
color: var(--accent-color); background-color: #ffffff; border-bottom-color: var(--accent-color); font-weight: 600; } .tabs-simple__content {
position: relative;
min-height: 12rem; } .tabs-simple__panel {
padding: 2rem; display: none;
}
.tabs-simple__panel--active,
.tabs-simple__panel:target {
display: block;
} .tabs-simple__panel-content {
color: #374151; 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;
} .tabs-simple__tab:target ~ .tabs-simple__content .tabs-simple__panel {
display: none;
}
.tabs-simple__panel:target {
display: block !important;
} .tabs-simple__panel:first-child {
display: block;
}
.tabs-simple__panel:target ~ .tabs-simple__panel:first-child {
display: none;
} .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;
} @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;
}
} @media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
} @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);
}
} @media (prefers-reduced-motion: reduce) {
.tabs-simple__tab,
.tabs-simple__panel {
transition: none;
animation: none;
}
html {
scroll-behavior: auto;
}
} .tabs-simple__tab:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
border-radius: 0.25rem;
} @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 {
background-color: #f9fafb; }
.team-grid__container {
margin: 0 auto;
max-width: 1920px; padding: 5rem 1.5rem; } .team-grid__title {
text-align: center;
font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0 0 3rem 0; line-height: 1.2;
} .team-grid__grid {
display: grid;
gap: 2rem; grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.team-grid__grid {
grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.team-grid__grid {
grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
.team-grid__grid {
grid-template-columns: repeat(4, 1fr); }
} .team-grid__member {
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; padding: 1.5rem; text-align: center;
transition: all 0.2s ease;
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); transform: translateY(-4px);
} .team-grid__photo {
width: 5rem; height: 5rem; margin: 0 auto 1rem auto; border-radius: 50%; overflow: hidden;
background-color: #f3f4f6; 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%;
object-fit: cover;
transition: transform 0.2s ease;
}
.team-grid__member:hover .team-grid__image {
transform: scale(1.1);
} .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; font-weight: 600; text-transform: uppercase;
} .team-grid__info {
text-align: center;
} .team-grid__name {
font-size: 1.125rem; font-weight: 600; color: #111827; margin: 0 0 0.25rem 0; line-height: 1.3;
} .team-grid__position {
font-size: 0.875rem; color: var(--accent-color); font-weight: 500; margin: 0 0 0.75rem 0; } .team-grid__bio {
font-size: 0.875rem; color: #4b5563; line-height: 1.5;
margin: 0 0 1rem 0; } .team-grid__social {
display: flex;
justify-content: center;
gap: 0.75rem; margin-top: 1rem;
}
.team-grid__social-link {
display: flex;
align-items: center;
justify-content: center;
width: 2rem; height: 2rem; border-radius: 50%; background-color: #f3f4f6; color: #6b7280; text-decoration: none;
transition: all 0.2s ease;
}
.team-grid__social-link:hover {
background-color: var(--accent-color); color: #ffffff; transform: translateY(-1px);
}
.team-grid__social-link:focus {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.team-grid__social-icon {
width: 1rem; height: 1rem; } .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;
} @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;
}
} .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);
}
} @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;
}
} .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%);
}
.team-block {
padding: 4rem 0;
background-color: white;
} .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;
} .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));
} @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));
}
} .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);
} .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%;
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;
} .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;
} .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;
} .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);
}
} @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 {
background-color: #f9fafb; }
.testimonials-cards__container {
margin: 0 auto;
max-width: 1920px; padding: 6rem 1.5rem; } .testimonials-cards__title {
text-align: center;
font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0 0 3rem 0; line-height: 1.2;
} .testimonials-cards__items {
display: grid;
gap: 2rem; grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.testimonials-cards__items {
grid-template-columns: repeat(2, 1fr); }
} .testimonials-cards__item {
border-radius: 1rem; background-color: #ffffff;
padding: 2rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border: 1px solid rgba(17, 24, 39, 0.05); 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);
} .testimonials-cards__quote {
color: #374151; 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;
} .testimonials-cards__author {
margin-top: 1rem; font-size: 0.875rem; color: #6b7280; margin-bottom: 0;
}
.testimonials-cards__author-name {
font-weight: 600;
color: #374151; }
.testimonials-cards__author-role {
font-weight: 400;
} .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;
} @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;
}
} @media (prefers-reduced-motion: reduce) {
.testimonials-cards__item {
transition: none;
}
.testimonials-cards__item:hover {
transform: none;
}
} @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 {
background-color: #ffffff;
}
.timeline-vertical__container {
margin: 0 auto;
max-width: 1920px; padding: 5rem 1.5rem; } .timeline-vertical__title {
text-align: center;
font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; margin: 0 0 3rem 0; line-height: 1.2;
} .timeline-vertical__timeline {
position: relative;
padding: 0 1rem;
} .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;
} .timeline-vertical__event {
position: relative;
display: flex;
margin-bottom: 3rem; align-items: flex-start;
} .timeline-vertical__event--left {
justify-content: flex-end;
}
.timeline-vertical__event--left .timeline-vertical__content {
margin-right: 2rem; text-align: right;
} .timeline-vertical__event--right {
justify-content: flex-start;
}
.timeline-vertical__event--right .timeline-vertical__content {
margin-left: 2rem; text-align: left;
} .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; height: 1rem; border-radius: 50%;
background-color: var(--accent-color); border: 3px solid #ffffff;
box-shadow: 0 0 0 4px #eef2ff; transition: all 0.2s ease;
}
.timeline-vertical__event:hover .timeline-vertical__dot {
transform: scale(1.2);
background-color: var(--accent-hover); } .timeline-vertical__content {
background-color: #ffffff;
border-radius: 1rem; padding: 1.5rem; 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;
max-width: 24rem; 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); transform: translateY(-2px);
} .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;
} .timeline-vertical__date {
font-size: 0.75rem; font-weight: 600; color: var(--accent-color); background-color: #eef2ff; padding: 0.25rem 0.5rem; border-radius: 0.375rem; display: inline-block;
margin-bottom: 0.5rem; text-transform: uppercase;
letter-spacing: 0.05em;
} .timeline-vertical__event-title {
font-size: 1.125rem; font-weight: 600; color: #111827; margin: 0 0 0.5rem 0; line-height: 1.3;
} .timeline-vertical__image {
margin: 0.75rem 0; border-radius: 0.5rem; overflow: hidden;
}
.timeline-vertical__img {
width: 100%;
height: 8rem; object-fit: cover;
transition: transform 0.2s ease;
}
.timeline-vertical__event:hover .timeline-vertical__img {
transform: scale(1.05);
} .timeline-vertical__text {
font-size: 0.875rem; color: #4b5563; line-height: 1.5;
margin: 0;
} .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;
} @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-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;
}
} @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);
}
} @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;
} .vp-two-cols__col {
flex: 1 1 50%;
display: flex;
} .vp-two-cols__col--image {
@apply min-h-[540px] md:min-h-[640px];
}
@media screen and (min-width: 1280px) {
.vp-two-cols__col--image {
aspect-ratio: 640 / 600;
max-width: 50%;
}
.vp-two-cols__col--content {
padding: 32px 80px;
}
} .vp-two-cols__content {
width: 100%; padding: 32px 24px;
}
.vp-two-cols__content h1 {
@apply mt-0 md:mt-[130px];
} .vp-two-cols__image-filler {
width: 100%;
} .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 {
@apply px-6;
}
@media screen and (min-width: 1280px) {
.nos-missions .vp-two-cols__col:last-child .vp-two-cols__content {
@apply px-0;
}
}
.nos-missions .vp-two-cols__col:last-child .vp-two-cols__content .btn-primary a {
@apply text-lg;
}
.nos-missions .bg-beige {
border-radius: 32px;
padding: 18px;
}
.nos-missions h3 {
@apply text-lg font-extrabold uppercase text-primary mb-8 mx-auto ;
}
.nos-missions h2 {
@apply my-8 mx-auto max-w-[465px];
} @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 { min-height: 540px;
}
.vp-two-cols__content {
padding: 40px 24px;
}
.nos-missions .vp-two-cols__col:first-child {
padding-top: 266px;
} .vp-two-cols--reverse .vp-two-cols__inner {
flex-direction: column-reverse;
}
}
[id*="bloc-chiffres-"] {
@apply px-0 py-0;
}
[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 { }
.vp-stats__inner {
max-width: 1160px; margin: 0 auto;
padding: 0 24px;
display: flex;
flex-wrap: wrap;
text-align: center;
} .vp-stats__item {
width: 50%;
padding: 32px 12px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
} .vp-stats__icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 28px;
} .vp-stats__icon {
height: 141px;
width: auto;
display: block;
} .vp-stats__text p:last-child {
margin-bottom: 0;
} @media (min-width: 1024px) {
[id*="bloc-chiffres-"] {
padding-bottom: 75px;
padding-top: 32px;
}
.vp-stats__item {
width: 25%;
padding: 40px 12px;
@apply border-[#3C1900] border-r-2 border-solid;
} .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;
}
}
.etapes-filiere {
color: var(--etapes-text, #3e1d0c);
padding: var(--etapes-pt, 80px) 0 var(--etapes-pb, 80px);
}
.etapes-filiere__inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
.etapes-filiere--steps-5 .etapes-filiere__inner {
max-width: 100%;
}
.etapes-filiere--steps-5 {
@apply bg-beige md:bg-bleu;
}
.etapes-filiere__head {
text-align: center;
margin-bottom: 3rem;
}
.etapes-filiere__title {
font-size: clamp(1.8rem, 1vw + 1.2rem, 2.4rem);
font-weight: 700;
text-transform: uppercase;
margin: 0 0 1rem 0;
}
.etapes-filiere__intro {
margin: 0 auto;
max-width: 720px;
font-size: 1.05rem;
line-height: 1.6;
}
.etapes-filiere__items {
display: grid;
gap: 2.5rem;
} .etapes-filiere--grid-4 .etapes-filiere__items {
grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 232px;
row-gap: 3rem;
}
.etapes-filiere--grid-4 .etapes-filiere__item {
position: relative;
max-width: 520px;
}
.etapes-filiere--grid-4 .etapes-filiere__item:nth-child(odd)::before {
content: "";
position: absolute;
right: -116px;
top: 0;
bottom: 0;
width: 2px;
height: calc(100% - 50px);
background: var(--etapes-separator, rgba(62,29,12,0.35));
pointer-events: none;
}
.etapes-filiere--grid-4 .etapes-filiere__item:nth-child(-n+2)::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: var(--etapes-separator, rgba(62,29,12,0.35));
}
.etapes-filiere__icon-wrapper {
margin-bottom: 1rem;
}
.etapes-filiere__icon {
max-width: 110px;
height: auto;
}
.etapes-filiere__item-title {
font-weight: 700;
text-transform: uppercase;
margin: 0 0 0.75rem 0;
font-size: 20px;
line-height: 1.3;
@apply text-primary;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item-title {
margin: 0 0 0.75rem 0;
font-size: 32px !important;
font-weight: 500 !important;
text-transform: none !important;
line-height: 28px !important;
@apply text-primary;
}
.etapes-filiere__item-desc {
line-height: 1.6;
font-size: 18px;
padding-bottom: 16px;
@apply text-primary text-lg font-primary;
}
.etapes-filiere--story-vertical .etapes-filiere__item-desc {
padding-bottom: 36px;
}
.etapes-filiere--steps-5 .etapes-filiere__item-desc {
@apply text-center;
max-width: 440px;
margin: auto;
} .etapes-filiere--steps-5 .etapes-filiere__items { gap: 2.5rem 2rem;
position: relative;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.etapes-filiere--steps-5 .etapes-filiere__item {
text-align: center;
position: relative;
padding: 0 1.25rem;
flex: 1 1 30%; }
.etapes-filiere--steps-5 .etapes-filiere__item::before {
content: "";
position: absolute;
top: 1.75rem;
right: -1rem;
width: 2px;
height: 80%;
background: #3C1900;
}
.etapes-filiere--steps-5 .etapes-filiere__item:last-child::before {
display: none;
}
.etapes-filiere__number {
@apply font-secondary text-primary;
font-size: 100px;
line-height: 1;
margin-bottom: 0.6rem;
}
.etapes-filiere--steps-5 .etapes-filiere__item-title {
margin-bottom: 0.75rem;
} .etapes-filiere--story-vertical .etapes-filiere__items {
grid-template-columns: 1fr;
gap: 2rem;
}
.etapes-filiere--story-vertical .etapes-filiere__item {
position: relative;
padding: 1rem 0 2.5rem 0; }
.etapes-filiere--story-vertical .etapes-filiere__item:not(:last-child)::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
max-width: 200px;
height: 2px;
background: #3C1900;
}
.etapes-filiere--story-vertical .etapes-filiere__number {
margin-bottom: 0.4rem;
}
.etapes-filiere--story-vertical .etapes-filiere__item-title {
margin-bottom: 0.6rem;
}
.etapes-filiere--steps-5 .etapes-filiere__item:nth-child(3)::before {
display: none;
}
.etapes-filiere--story-vertical .etapes-filiere__item {
max-width: 300px;
}
.etapes-filiere--story-vertical .etapes-filiere__inner {
padding-left: 0 !important; 
padding-right: 0 !important;
}
@media (max-width: 768px) {
.etapes-filiere {
padding: calc(var(--etapes-pt, 80px) * 0.7) 0 calc(var(--etapes-pb, 80px) * 0.7);
}
.etapes-filiere__items {
gap: 2rem;
}
.etapes-filiere--steps-5 .etapes-filiere__item::before {
top: 100%;
width: 100px;
height: 2px;
left: calc(50% - 50px);
display: block;
}
.etapes-filiere--steps-5 .etapes-filiere__item:nth-child(3)::before {
display: block;
}
.etapes-filiere--grid-4 .etapes-filiere__items {
grid-template-columns: 1fr;
column-gap: 0;
}
.etapes-filiere--grid-4 .etapes-filiere__item::before,
.etapes-filiere--grid-4 .etapes-filiere__item::after {
display: none;
}
.etapes-filiere--steps-5 .etapes-filiere__items {
justify-content: center;
flex-flow: column nowrap;
align-items: center;
}
.etapes-filiere--steps-5 .etapes-filiere__item {
text-align: center;
padding: 0;
}
.etapes-filiere--story-vertical .etapes-filiere__item-desc {
padding-bottom: 16px;
}
.etapes-filiere--story-vertical .etapes-filiere__item:not(:last-child)::before {
left: calc(50% - 50px);
width: 100px;
max-width: 100px;
}
.etapes-filiere--story-vertical .etapes-filiere__item:last-child {
padding-bottom: 0;
}
.etapes-filiere--story-vertical {
padding-bottom: 0;
}
.etapes-filiere--story-vertical .etapes-filiere__item {
@apply text-center; 
}
.etapes-filiere--story-vertical .etapes-filiere__items {
align-items: center;
justify-content: center;
display: flex;
flex-flow: column nowrap;
}
} .etapes-filiere--grid-1-2-2 {
background-color: var(--etapes-bg, #FFD65F);
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__inner {
max-width: 1140px;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__head {
margin-bottom: 2rem;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__title {
font-weight: 700;
text-transform: uppercase;
margin-left: auto;
margin-right: auto;
} .etapes-filiere--grid-1-2-2 .etapes-filiere__items {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 0;
}  .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(1) {
grid-column: 1;
grid-row: 1 / 3;
padding-right: 2.5rem;
position: relative;
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(2) {
grid-column: 2;
grid-row: 1;
padding: 0 1.5rem 2rem 2.5rem;
position: relative;
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(3) {
grid-column: 3;
grid-row: 1;
padding: 0 0 2rem 1.5rem;
position: relative;
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(4) {
grid-column: 2;
grid-row: 2;
padding: 2rem 1.5rem 0 2.5rem;
position: relative;
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(5) {
grid-column: 3;
grid-row: 2;
padding: 2rem 0 0 1.5rem;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(3),
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(5) {
padding-left: 2.5rem !important;
}  .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(1)::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background: var(--etapes-separator, #3e1d0c);
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(2)::after {
content: "";
position: absolute;
bottom: 0;
left: 2.5rem;
right: 0;
height: 2px;
width: calc(100% - 5rem);
background: var(--etapes-separator, #3e1d0c);
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(3)::after {
content: "";
position: absolute;
bottom: 0;
left: 2.5rem;
right: 0;
height: 2px;
width: calc(100% - 5rem);
background: var(--etapes-separator, #3e1d0c);
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(2)::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background: var(--etapes-separator, #3e1d0c);
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(4)::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background: var(--etapes-separator, #3e1d0c);
} .etapes-filiere--grid-1-2-2 .etapes-filiere__number {
@apply font-secondary;
font-size: 100px;
font-style: normal;
line-height: 0.8;
margin-bottom: 0.15rem;
color: var(--etapes-text, #3e1d0c);
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(1) .etapes-filiere__item-desc {
max-width: 260px;
} @media (max-width: 1024px) and (min-width: 769px) {
.etapes-filiere--grid-1-2-2 .etapes-filiere__items {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(1) {
grid-column: 1 / 3;
grid-row: 1;
padding: 0 0 2rem 0;
text-align: center;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(1)::after {
top: auto;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 2px;
display: none;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(1) .etapes-filiere__item-desc {
max-width: 100%;
margin: 0 auto;
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(2) {
grid-column: 1;
grid-row: 2;
padding: 2rem 1.5rem 2rem 0;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(2)::before {
top: 0;
right: 0;
left: auto;
width: 2px;
height: 100%;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(2)::after {
bottom: 0;
right: 0;
height: 2px;
width: 80%;
left: 0;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(3) {
grid-column: 2;
grid-row: 2;
padding: 2rem 0 2rem 1.5rem;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(3)::after {
bottom: 0;
height: 2px;
width: 80%;
right: 0;
left: auto;
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(4) {
grid-column: 1;
grid-row: 3;
padding: 2rem 1.5rem 0 0;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(4)::before {
top: 0;
right: 0;
width: 2px;
height: 100%;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(5) {
grid-column: 2;
grid-row: 3;
padding: 2rem 0 0 1.5rem;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(3),
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(5) {
padding-left: 20% !important;
}
} @media (max-width: 768px) {
.etapes-filiere--grid-1-2-2 .etapes-filiere__items {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item {
text-align: center;
padding: 1.5rem 0 !important;
width: 100%;
max-width: 280px;
position: relative;
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item::before,
.etapes-filiere--grid-1-2-2 .etapes-filiere__item::after {
display: none;
} .etapes-filiere--grid-1-2-2 .etapes-filiere__item:not(:last-child)::after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 2px;
background: var(--etapes-separator, #3e1d0c);
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:first-child {
padding-top: 0 !important;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:last-child {
padding-bottom: 0 !important;
padding-left: 0 !important;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(3) {
padding-left: 0 !important;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(1) .etapes-filiere__item-desc {
max-width: 100%;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item:nth-child(1)::after {
top: 100%;
}
.etapes-filiere--grid-1-2-2 .etapes-filiere__item-title {
margin: 0 0 0.75rem 0;
font-size: 20px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
line-height: 28px !important;
@apply text-primary;
}
} #main .content > section.bandeau-les-eleveurs {
padding-top: 85px !important;
padding-bottom: 24px !important;
}
@media screen and (max-width: 768px) {
#main .content > section.bandeau-les-eleveurs {
padding-top: 55px !important;
padding-bottom: 0 !important;
}
}
.elevage {
background-color: var(--elevage-bg, #f7efe7);
color: var(--elevage-text, #3e1d0c);
padding: var(--elevage-pt, 80px) 0 var(--elevage-pb, 80px);
}
.elevage__inner {
max-width: 1200px;
margin: 0 auto; } .elevage__title {
text-align: center;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
margin: 0 0 2.5rem 0;
@apply text-primary;
} .elevage__columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
position: relative;
}
.elevage__column--left {
padding-left: 0;
}
.elevage__column--right {
padding-right: 0;
}
.elevage__column--right .elevage__column-title {
margin-top: -60px;
} .elevage__column-title {
@apply !font-secondary;
font-size: 60px !important;
font-weight: 400 !important;
line-height: 60px !important;
margin: 0 0 1.5rem 0;
padding-bottom: 1rem;
position: relative;
text-transform: none !important;
text-align: center;
} .elevage__column-title::after {
content: "";
position: absolute;
bottom: 0; width: 90%;
height: 2px;
background: #3C1900;
}
.elevage__column--left {
.elevage__column-title::after {
left: 0;
}
.elevage__item::after {
left: 0;
}
.elevage__item {
padding-right: 60px;
position: relative;
} .elevage__item::before {
content: "";
position: absolute;
right: 0;
top: 10%;
width: 2px;
height: 80%;
background: #3C1900;
}
}
.elevage__column--right {
.elevage__column-title::after {
right: 0;
}    
.elevage__item::after {
right: 0;
}
.elevage__item {
padding-left: 60px;
}
} .elevage__items {
display: flex;
flex-direction: column;
gap: 0;
}
.elevage__item {
position: relative;
padding: 1.5rem 0;
min-height: 360px;
display: flex;
justify-content: center;
align-items: center;
} .elevage__item::after {
content: "";
position: absolute;
bottom: 0; width: 90%;
height: 2px;
background: #3C1900;
}
.elevage__item:last-child::after {
display: none;
}
.elevage__item-content {
display: flex;
align-items: flex-start;
gap: 1.25rem;
} .elevage__icon-wrapper {
flex-shrink: 0;
width: 160px;
}
.elevage__icon {
width: 100%;
max-width: 145px;
height: auto;
max-height: 160px;
object-fit: contain;
} .elevage__item-text {
flex: 1;
}
.elevage__item-title {
text-transform: uppercase;
margin: 0 0 0.5rem 0;
@apply text-primary !text-[20px] md:!text-[32px] !leading-[28px] md:!leading-[44px] uppercase;
}
.elevage__item-desc {
@apply text-primary;
}
.elevage__item-desc p {
margin: 0 0 0.5rem 0;
}
.elevage__item-desc p:last-child {
margin-bottom: 0;
} .elevage__accordion {
display: none;
} @media (max-width: 1024px) {
.elevage {
padding: calc(var(--elevage-pt, 80px) * 0.7) 0 calc(var(--elevage-pb, 80px) * 0.7);
}
.elevage__title {
margin-bottom: 1.5rem;
} .elevage__columns {
display: none;
} .elevage__accordion {
display: block;
} .elevage__accordion-section-title {
@apply font-secondary;
text-align: center;
margin: 0;
padding: 2rem 0;
position: relative;
} .elevage__accordion-section-title::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #3C1900;
}
.elevage__accordion-section-title {
@apply !font-secondary !text-[48px] !leading-[66px] !font-normal;
text-transform: none !important;
}
.elevage__accordion-section-title--second {
margin-top: 1.5rem;
} .elevage__accordion-item {
position: relative;
} .elevage__accordion-item::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #3C1900;
} .elevage__accordion-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 2rem 0;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
color: #3C1900;
font-family: inherit;
}
.elevage__accordion-trigger:focus {
outline: 2px solid var(--elevage-text, #3e1d0c);
outline-offset: 2px;
}
.elevage__accordion-trigger:focus:not(:focus-visible) {
outline: none;
}
.elevage__accordion-trigger-text {
text-transform: uppercase;
@apply !text-[20px] !leading-[28px] !font-semibold;
} .elevage__accordion-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.elevage__chevron {
width: 32px;
height: 32px;
transition: transform 0.25s ease;
} .elevage__accordion-trigger[aria-expanded="true"] .elevage__chevron {
transform: rotate(90deg);
} .elevage__accordion-panel {
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease;
}
.elevage__accordion-panel[hidden] {
display: none;
}
.elevage__accordion-panel-content {
padding: 0 0 1.5rem 0;
}
.elevage__accordion-panel .elevage__icon-wrapper {
width: 100px;
margin: 0 0 1rem;
}
.elevage__accordion-panel .elevage__icon {
max-height: unset;
width: auto;
height: 110px;
}
.elevage__accordion-panel .elevage__item-desc {
text-align: left;
font-size: 0.9rem;
}
} @media (min-width: 769px) and (max-width: 1024px) {
.elevage__column {
padding: 0 1.5rem;
}
.elevage__icon-wrapper {
width: 60px;
}
.elevage__icon {
max-height: 60px;
}
}
@media screen and (min-width: 1025px) and (max-width: 1280px) {
.elevage__item {
min-height: 450px;
}
}
body {
overflow-x: hidden;
@apply h-auto;
}  .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;
} @layer components { .container { }
.section-padding {
@apply py-16;
}
.text-gradient {
@apply bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent;
}
} @layer utilities {
.mobile-only {
@apply block lg:hidden;
}
.desktop-only {
@apply hidden lg:block;
}
.tablet-up {
@apply hidden md:block;
}
.mobile-up {
@apply block;
}
} @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-visible:focus { } ::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
@apply bg-gray-100;
}
::-webkit-scrollbar-thumb {
@apply bg-gray-400 rounded-full;
}
::-webkit-scrollbar-thumb:hover {
@apply bg-gray-500;
}