/*
Theme Name: Poly-Tech
Description: Thème personnalisé Poly-Tech Équipements
Version: 1.0
*/

:root {
    --white: #ffffff;

    --black: #151b23;
    --dark: #1d252f;

    --blue: #1558a6;
    --blue-dark: #0c3b73;
    --blue-light: #8bb9ec;

    --red: #df202b;
    --red-dark: #b81720;

    --grey: #68717c;

    --container: 1380px;

    /* Echelle d'espacement commune basee sur 8px */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 32px;
    --space-lg: 64px;
    --space-xl: 120px;
    --section-space: var(--space-xl);
}


/* RESET */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Sora", "Inter", sans-serif;

    background: var(--black);
    color: var(--white);

    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

/* PAGE MATERIEL D'OCCASION */

.occasion-page {
    background: #ffffff;
    color: #07111d;
}

.occasion-page .container {
    width: min(var(--container), calc(100% - 64px));
}

.occasion-label {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--blue);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.occasion-label::after {
    content: "";
    width: 42px;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}

.occasion-hero {
    position: relative;
    overflow: hidden;
    padding: 160px 0 110px;
    background:
        radial-gradient(circle at 76% 42%, rgba(21, 88, 166, 0.15), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #f6faff 62%, #eaf4ff 100%);
}

.occasion-hero-grid,
.occasion-intro-grid,
.occasion-guarantee-grid,
.occasion-faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
    align-items: center;
    gap: clamp(48px, 7vw, 110px);
}

.occasion-hero-copy h1,
.occasion-section-heading h2,
.occasion-centered-heading h2,
.occasion-catalog-head h2,
.occasion-guarantee h2,
.occasion-final-card h2 {
    font-family: "Sora", "Inter", sans-serif;
    font-weight: 600;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.occasion-hero-copy h1 {
    margin-top: var(--space-sm);
    max-width: 720px;
    color: #07111d;
    font-size: clamp(3.2rem, 6vw, 6.4rem);
}

.occasion-hero-copy p {
    max-width: 570px;
    margin-top: var(--space-md);
    color: #4c5a68;
    font-size: clamp(1rem, 1.1vw, 1.2rem);
    line-height: 1.75;
}

.occasion-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.occasion-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 var(--space-md);
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition:
        transform 260ms ease,
        background 260ms ease,
        color 260ms ease,
        border-color 260ms ease;
}

.occasion-button-primary {
    background: var(--blue);
    color: var(--white);
}

.occasion-button-secondary {
    border: 1px solid rgba(21, 88, 166, 0.22);
    color: #07111d;
    background: rgba(255, 255, 255, 0.66);
}

.occasion-button-light {
    background: var(--white);
    color: var(--blue-dark);
}

.occasion-button:hover {
    transform: translateY(-2px);
}

.occasion-button-primary:hover {
    background: var(--blue-dark);
}

.occasion-hero-visual {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.occasion-hero-shape {
    position: absolute;
    width: min(520px, 80vw);
    aspect-ratio: 1;
    border-radius: 48% 52% 42% 58%;
    background: linear-gradient(145deg, rgba(139, 185, 236, 0.48), rgba(21, 88, 166, 0.1));
    transform: rotate(-12deg);
}

.occasion-hero-visual img {
    position: relative;
    z-index: 1;
    width: min(520px, 92%);
    height: 520px;
    object-fit: cover;
    border-radius: 34px;
    box-shadow: 0 28px 70px rgba(6, 19, 34, 0.18);
}

.occasion-intro,
.occasion-catalog,
.occasion-process,
.occasion-faq-section {
    padding: var(--section-space) 0;
}

.occasion-promise {
    padding:
        var(--section-space)
        0
        var(--section-space);
    background: #151c24;
    color: var(--white);
}

.occasion-promise-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding-inline: 6vw;
}

.occasion-promise-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: #1558a6;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.occasion-promise-label::before {
    content: "";
    width: 34px;
    height: 1px;
    background: #1558a6;
}

.occasion-promise-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    align-items: start;
    gap: clamp(var(--space-lg), 9vw, var(--section-space));
    margin-top: var(--space-lg);
}

.occasion-promise-grid h2 {
    max-width: 780px;
    color: var(--white);
    font-size: clamp(48px, 5.2vw, 82px);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.occasion-promise-grid h2 span {
    color: #1558a6;
}

.occasion-promise-grid p {
    max-width: 410px;
    padding-top: clamp(50px, 5vw, 75px);
    color: rgba(255, 255, 255, 0.66);
    font-size: clamp(15px, 1.1vw, 17px);
    font-weight: 400;
    line-height: 1.65;
}

.occasion-promise-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: clamp(80px, 9vw, 130px);
}

.occasion-promise-step {
    display: block;
    padding-top: 18px;
    border-top: 1px solid rgba(139, 185, 236, 0.2);
    color: var(--white);
    text-decoration: none;
    transition:
        border-color 250ms ease,
        transform 250ms ease;
}

.occasion-promise-step span {
    display: block;
    margin-bottom: 14px;
    color: #1558a6;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    opacity: 0.8;
    transition: opacity 250ms ease;
}

.occasion-promise-step strong {
    display: block;
    color: inherit;
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
    transition: transform 250ms ease;
}

.occasion-promise-step:hover {
    border-color: #1558a6;
}

.occasion-promise-step:hover span {
    opacity: 1;
}

.occasion-promise-step:hover strong {
    transform: translateX(2px);
}

.occasion-promise-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    float: right;
    margin-top: clamp(35px, 4vw, 45px);
    color: #1558a6;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
}

.occasion-promise-cta span {
    transition: transform 250ms ease;
}

.occasion-promise-cta:hover span {
    transform: translateY(3px);
}

.occasion-intro {
    padding: clamp(92px, 8vw, 120px) 0;
    background: #f7f8fa;
    color: #0b0d10;
}

.occasion-section-heading h2,
.occasion-centered-heading h2,
.occasion-catalog-head h2 {
    color: #07111d;
    font-size: clamp(2.4rem, 4vw, 4.6rem);
}

.occasion-section-heading p,
.occasion-centered-heading p,
.occasion-catalog-head p {
    margin-top: 24px;
    color: #526070;
    font-size: 1.05rem;
    line-height: 1.75;
}

.occasion-commitments {
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(21, 88, 166, 0.18);
    border-bottom: 1px solid rgba(21, 88, 166, 0.18);
}

.occasion-intro-grid {
    display: block;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 45px;
}

.occasion-intro .occasion-section-heading {
    max-width: none;
}

.occasion-benefits-heading {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr 0.6fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
}

.occasion-benefits-kicker {
    display: block;
    margin-bottom: 8px;
    color: #123d76;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.1;
    text-transform: uppercase;
}

.occasion-intro .occasion-benefits-heading h2 {
    max-width: 500px;
    color: #0b0d10;
    font-size: clamp(52px, 5vw, 78px);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.045em;
}

.occasion-intro .occasion-benefits-heading p {
    max-width: 390px;
    margin-top: 26px;
    color: #4d5560;
    font-size: 16px;
    line-height: 1.6;
}

.occasion-benefits-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-self: end;
    margin-top: 8px;
    color: #0a4d95;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.occasion-benefits-link span {
    transition: transform 240ms ease;
}

.occasion-benefits-link:hover span {
    transform: translateX(4px);
}

.occasion-commitment {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 20px;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid rgba(21, 88, 166, 0.13);
}

.occasion-commitment:last-child {
    border-bottom: 0;
}

.occasion-commitment span {
    color: var(--blue);
    font-weight: 600;
    letter-spacing: 0.12em;
}

.occasion-commitment strong {
    color: #07111d;
    font-size: 1.08rem;
}

.occasion-benefits-row {
    width: min(100%, 1280px);
    margin-top: clamp(60px, 6vw, 80px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    gap: 8px;
}

.occasion-benefit {
    position: relative;
    height: 162px;
    min-height: 162px;
    padding: 22px 24px 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease;
}

.occasion-benefit--light {
    border: 1px solid rgba(12, 36, 66, 0.08);
    background: #f4f6f8;
    color: #0a0d11;
}

.occasion-benefit--dark {
    border: 1px solid rgba(104, 164, 226, 0.1);
    background: #122842;
    color: #ffffff;
}

.occasion-benefit--1 {
    transform: rotate(-1deg) translateY(1px);
}

.occasion-benefit--2 {
    transform: rotate(1.25deg) translateY(-2px);
}

.occasion-benefit--3 {
    transform: rotate(-0.8deg) translateY(1px);
}

.occasion-benefit--4 {
    transform: rotate(1.15deg) translateY(-1px);
}

.occasion-benefit-icon {
    width: 24px;
    height: 24px;
    margin: 0 0 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
}

.occasion-benefit-index {
    position: absolute;
    top: 17px;
    right: 18px;
    color: currentColor;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    opacity: 0.42;
}

.occasion-benefit-icon svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.occasion-benefit--light .occasion-benefit-icon {
    border: 1px solid rgba(11, 93, 168, 0.18);
    background: #eef5fb;
    color: #0b5da8;
}

.occasion-benefit--dark .occasion-benefit-icon {
    border: 1px solid rgba(184, 221, 255, 0.25);
    background: rgba(255, 255, 255, 0.03);
    color: #b8ddff;
}

.occasion-benefit h3 {
    max-width: 92%;
    margin-top: auto;
    color: currentColor;
    font-size: clamp(17px, 1.25vw, 19px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.occasion-benefit p {
    max-width: 92%;
    margin: 7px 0 0;
    font-size: 11px;
    line-height: 1.35;
    opacity: 0.72;
}

.occasion-benefit:hover {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.occasion-client-benefits {
    padding: clamp(100px, 9vw, 130px) 0;
    background: #ffffff;
}

.occasion-client-benefits-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(70px, 9vw, 150px);
    align-items: start;
}

.occasion-client-benefits-heading .occasion-label {
    color: var(--blue);
}

.occasion-client-benefits-heading h2 {
    margin-top: 18px;
    max-width: 560px;
    color: #0b0d10;
    font-size: clamp(48px, 4.5vw, 72px);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.occasion-client-benefit-list {
    border-top: 1px solid rgba(20, 30, 45, 0.13);
}

.occasion-client-benefit {
    display: grid;
    grid-template-columns: 65px 1fr;
    gap: 20px;
    padding: 30px 0 34px;
    border-bottom: 1px solid rgba(20, 30, 45, 0.13);
    transition:
        border-color 250ms ease,
        transform 250ms ease;
}

.occasion-client-benefit > span {
    color: #0b63ae;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    transition: color 250ms ease;
}

.occasion-client-benefit div {
    transition: transform 250ms ease;
}

.occasion-client-benefit h3 {
    color: #0b0d10;
    font-size: clamp(22px, 1.8vw, 30px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.occasion-client-benefit p {
    max-width: 580px;
    margin-top: 10px;
    color: #69707a;
    font-size: 16px;
    line-height: 1.6;
}

.occasion-client-benefit:hover {
    border-color: rgba(11, 99, 174, 0.32);
}

.occasion-client-benefit:hover > span {
    color: var(--blue);
}

.occasion-client-benefit:hover div {
    transform: translateX(3px);
}

.occasion-why {
    padding: clamp(78px, 8vw, 112px) 0;
    background: #eaf4ff;
}

.occasion-centered-heading {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.occasion-advantages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 56px;
}

.occasion-advantages article {
    padding-top: 28px;
    border-top: 1px solid rgba(21, 88, 166, 0.22);
}

.occasion-advantages svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: var(--blue);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-bottom: 26px;
}

.occasion-advantages h3 {
    color: #07111d;
    font-size: 1.35rem;
    line-height: 1.2;
}

.occasion-advantages p {
    margin-top: 16px;
    color: #526070;
    line-height: 1.65;
}

.occasion-catalog {
    padding: clamp(96px, 8vw, 140px) 0;
    background: #f6f7f9;
}

.occasion-catalog-head {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.65fr);
    align-items: end;
    gap: 50px;
}

.occasion-catalog-head h2 {
    margin-top: 18px;
    color: #0b0d10;
}

.occasion-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 44px;
}

.occasion-filters button {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid rgba(7, 17, 29, 0.12);
    border-radius: 999px;
    background: transparent;
    color: #394656;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 220ms ease,
        color 220ms ease,
        border-color 220ms ease;
}

.occasion-filters button:hover,
.occasion-filters button.is-active {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
}

.occasion-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 34px;
}

.occasion-product-card {
    overflow: hidden;
    min-height: 460px;
    border: 1px solid rgba(7, 17, 29, 0.09);
    border-radius: 10px;
    background: #ffffff;
    transition:
        transform 260ms ease,
        border-color 260ms ease,
        box-shadow 260ms ease;
}

.occasion-product-card[hidden] {
    display: none;
}

.occasion-product-card a,
.occasion-product-card > div {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.occasion-product-card:hover {
    transform: translateY(-3px);
    border-color: rgba(21, 88, 166, 0.28);
    box-shadow: 0 12px 26px rgba(8, 20, 36, 0.08);
}

.occasion-product-image {
    position: relative;
    height: 320px;
    overflow: hidden;
    background: #f3f5f8;
}

.occasion-product-image span {
    position: absolute;
    z-index: 1;
    top: 16px;
    left: 16px;
    display: block;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #737b84;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.occasion-product-image img {
    width: 100%;
    height: 100%;
    padding: 38px 32px 28px;
    object-fit: contain;
    transition: transform 340ms ease;
}

.occasion-product-card:hover .occasion-product-image img {
    transform: scale(1.025);
}

.occasion-product-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 22px 22px 24px;
}

.occasion-product-body p {
    color: var(--blue);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.occasion-product-body h3 {
    margin-top: 10px;
    color: #07111d;
    font-size: clamp(22px, 1.7vw, 25px);
    font-weight: 600;
    line-height: 1.18;
}

.occasion-product-body strong {
    margin-top: auto;
    padding-top: 28px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--blue);
    font-size: 13px;
}

.occasion-process {
    background: #f7fbff;
}

.occasion-process-line {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-top: 62px;
}

.occasion-process-line::before {
    content: "";
    position: absolute;
    top: 32px;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(21, 88, 166, 0.18);
}

.occasion-process-line article {
    position: relative;
    padding-top: 78px;
}

.occasion-process-line span {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border-radius: 50%;
    background: #ffffff;
    color: var(--blue);
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(11, 37, 67, 0.08);
}

.occasion-process-line h3 {
    color: #07111d;
    font-size: 1.2rem;
}

.occasion-process-line p {
    margin-top: 12px;
    color: #526070;
    line-height: 1.6;
}

.occasion-guarantee {
    padding: clamp(78px, 8vw, 120px) 0;
    background:
        radial-gradient(circle at 80% 30%, rgba(139, 185, 236, 0.12), transparent 34%),
        #13202f;
    color: var(--white);
}

.occasion-guarantee .occasion-label {
    color: var(--blue-light);
}

.occasion-guarantee h2 {
    max-width: 760px;
    margin-top: 18px;
    font-size: clamp(2.3rem, 4vw, 4.6rem);
}

.occasion-guarantee p {
    max-width: 560px;
    margin: 24px 0 34px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.75;
}

.occasion-guarantee-mark {
    justify-self: end;
    width: min(360px, 100%);
    padding: 42px 36px;
    border-left: 1px solid rgba(139, 185, 236, 0.25);
}

.occasion-guarantee-mark span {
    display: block;
    color: var(--blue-light);
    font-size: clamp(6rem, 12vw, 11rem);
    font-weight: 600;
    line-height: 0.82;
}

.occasion-guarantee-mark strong {
    color: var(--white);
    font-size: 2rem;
}

.occasion-guarantee-mark p {
    margin: 18px 0 0;
}

.occasion-faq-section {
    padding: 120px 6vw;
    background: #ffffff;
}

.occasion-faq-grid {
    width: min(100%, 1400px);
    display: grid;
    grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.7fr);
    align-items: start;
    gap: clamp(70px, 8vw, 150px);
    margin: 0 auto;
}

.occasion-faq-heading {
    position: sticky;
    top: 120px;
}

.occasion-faq-heading > span {
    display: block;
    color: #0b5da8;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.occasion-faq-heading h2 {
    max-width: 360px;
    margin-top: 18px;
    color: #0b0d10;
    font-size: clamp(42px, 4vw, 68px);
    font-weight: 650;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.occasion-faq-heading p {
    max-width: 300px;
    margin-top: 24px;
    color: #606770;
    font-size: 15px;
    line-height: 1.6;
}

.occasion-faq-list {
    border-top: 1px solid rgba(10, 25, 45, 0.14);
}

.occasion-faq-item {
    border-bottom: 1px solid rgba(10, 25, 45, 0.14);
}

.occasion-faq-question {
    width: 100%;
    min-height: 95px;
    display: grid;
    grid-template-columns: 55px 1fr 42px;
    align-items: center;
    gap: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #111820;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.occasion-faq-question strong {
    display: none;
}

.occasion-faq-number {
    color: #0b5da8;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    transition: color 250ms ease;
}

.occasion-faq-title {
    color: #111820;
    font-size: clamp(21px, 1.6vw, 27px);
    font-weight: 550;
    line-height: 1.2;
    letter-spacing: -0.025em;
    transition: transform 250ms ease, color 250ms ease;
}

.occasion-faq-toggle {
    position: relative;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(10, 25, 45, 0.18);
    border-radius: 50%;
    transition:
        background 250ms ease,
        border-color 250ms ease;
}

.occasion-faq-toggle::before,
.occasion-faq-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 1.5px;
    border-radius: 999px;
    background: #1d2732;
    transform: translate(-50%, -50%);
    transition:
        background 250ms ease,
        opacity 250ms ease;
}

.occasion-faq-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.occasion-faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        grid-template-rows 320ms ease,
        opacity 300ms ease,
        transform 300ms ease;
}

.occasion-faq-answer p {
    max-width: 850px;
    overflow: hidden;
    padding: 0 70px 0 73px;
    color: #606770;
    font-size: 16px;
    line-height: 1.65;
}

.occasion-faq-item.is-open .occasion-faq-answer {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
}

.occasion-faq-item.is-open .occasion-faq-answer p {
    padding-bottom: 34px;
}

.occasion-faq-item.is-open .occasion-faq-toggle {
    border-color: #0b5da8;
    background: #0b5da8;
}

.occasion-faq-item.is-open .occasion-faq-toggle::before {
    background: #ffffff;
}

.occasion-faq-item.is-open .occasion-faq-toggle::after {
    opacity: 0;
}

.occasion-faq-question:hover .occasion-faq-title {
    transform: translateX(3px);
}

.occasion-faq-question:hover .occasion-faq-number {
    color: #1558a6;
}

.occasion-faq-question:hover .occasion-faq-toggle {
    border-color: rgba(11, 93, 168, 0.55);
}

.occasion-page .occasion-faq-section {
    padding: clamp(42px, 4vw, 66px) 0 clamp(78px, 7vw, 108px);
    background: #151c24;
}

.occasion-page .occasion-faq-grid {
    gap: clamp(44px, 7vw, 96px);
}

.occasion-page .occasion-faq-grid--centered {
    display: block;
    max-width: 980px;
    margin: 0 auto;
}

.occasion-page .occasion-faq-grid--centered .occasion-faq-heading {
    position: static;
    max-width: 720px;
    margin: 0 auto clamp(42px, 5vw, 70px);
    text-align: center;
}

.occasion-page .occasion-faq-grid--centered .occasion-faq-heading h2 {
    max-width: none;
}

.occasion-page .occasion-faq-grid--centered .occasion-faq-heading p {
    max-width: 520px;
    margin-right: auto;
    margin-left: auto;
}

.occasion-page .occasion-faq-grid--centered .occasion-faq-list {
    width: 100%;
}

.occasion-page .occasion-faq-heading h2 {
    max-width: 330px;
    font-size: clamp(2.25rem, 3.3vw, 4rem);
    line-height: 1.04;
}

.occasion-page .occasion-faq-grid--centered .occasion-faq-heading h2 {
    max-width: none;
    white-space: nowrap;
}

.occasion-page .occasion-faq-heading p {
    max-width: 280px;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.54);
}

.occasion-page .occasion-faq-list {
    border-top-color: rgba(139, 185, 236, 0.12);
}

.occasion-page .occasion-faq-item {
    border-bottom-color: rgba(139, 185, 236, 0.12);
}

.occasion-page .occasion-faq-question {
    min-height: 74px;
    grid-template-columns: 46px 1fr 30px;
    gap: 16px;
}

.occasion-page .occasion-faq-number {
    color: rgba(139, 185, 236, 0.74);
    font-size: 0.72rem;
}

.occasion-page .occasion-faq-title {
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(1.15rem, 1.35vw, 1.55rem);
    font-weight: 500;
    letter-spacing: -0.025em;
}

.occasion-page .occasion-faq-toggle {
    width: 28px;
    height: 28px;
    border-color: rgba(139, 185, 236, 0.18);
}

.occasion-page .occasion-faq-toggle::before,
.occasion-page .occasion-faq-toggle::after {
    width: 10px;
    height: 1px;
    background: rgba(255, 255, 255, 0.76);
}

.occasion-page .occasion-faq-answer p {
    max-width: 720px;
    padding: 0 48px 0 62px;
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.95rem;
    line-height: 1.65;
}

.occasion-page .occasion-faq-item.is-open .occasion-faq-answer p {
    padding-bottom: 24px;
}

.occasion-page .occasion-faq-item.is-open .occasion-faq-toggle {
    border-color: rgba(139, 185, 236, 0.42);
    background: transparent;
}

.occasion-page .occasion-faq-item.is-open .occasion-faq-toggle::before {
    background: var(--blue-light);
}

.occasion-page .occasion-faq-question:hover .occasion-faq-title {
    color: var(--white);
}

.occasion-final-cta {
    padding: 96px 0;
    background: #f7fbff;
}

.occasion-final-card {
    padding: clamp(42px, 6vw, 76px);
    border-radius: 30px;
    background:
        linear-gradient(135deg, rgba(21, 88, 166, 0.1), rgba(255, 255, 255, 0.92)),
        #ffffff;
    border: 1px solid rgba(21, 88, 166, 0.12);
}

.occasion-final-card h2 {
    max-width: 780px;
    color: #07111d;
    font-size: clamp(2.2rem, 4vw, 4.3rem);
}

.occasion-final-card p {
    max-width: 620px;
    margin-top: 22px;
    color: #526070;
    line-height: 1.7;
}

.occasion-link {
    color: var(--blue);
    font-weight: 600;
    text-decoration: none;
}

.occasion-page {
    background: #ffffff;
    color: #07111d;
}

.occasion-hero {
    background:
        radial-gradient(circle at 74% 40%, rgba(21, 88, 166, 0.2), transparent 32%),
        linear-gradient(135deg, #151b23 0%, #1c2733 62%, #182232 100%);
}

.occasion-hero-copy h1,
.occasion-centered-heading h2,
.occasion-process-line h3,
.occasion-final-card h2 {
    color: var(--white);
}

.occasion-hero-copy p,
.occasion-centered-heading p,
.occasion-advantages p,
.occasion-process-line p,
.occasion-final-card p {
    color: rgba(255, 255, 255, 0.68);
}

.occasion-why,
.occasion-process,
.occasion-final-cta {
    background: #1c2733;
}

.occasion-catalog {
    background: #f6f7f9;
}

.occasion-button-secondary {
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--white);
    background: rgba(255, 255, 255, 0.06);
}

.occasion-hero-shape {
    background: linear-gradient(145deg, rgba(139, 185, 236, 0.18), rgba(21, 88, 166, 0.06));
}

.occasion-commitments,
.occasion-commitment,
.occasion-advantages article,
.occasion-process-line::before {
    border-color: rgba(139, 185, 236, 0.16);
}

.occasion-filters button {
    border-color: rgba(7, 17, 29, 0.12);
    background: transparent;
    color: #394656;
}

.occasion-product-card {
    border-color: rgba(7, 17, 29, 0.09);
    background: #ffffff;
}

.occasion-product-card:hover {
    border-color: rgba(21, 88, 166, 0.28);
}

.occasion-product-image {
    background: #f3f5f8;
}

.occasion-process-line span {
    background: rgba(139, 185, 236, 0.12);
    color: var(--blue-light);
    box-shadow: none;
}

.occasion-final-card {
    background:
        linear-gradient(135deg, rgba(21, 88, 166, 0.18), rgba(255, 255, 255, 0.03)),
        #151b23;
    border-color: rgba(139, 185, 236, 0.16);
}

.occasion-page {
    background: #151c24;
    color: var(--white);
}

.occasion-intro {
    background: #1d2835;
    color: var(--white);
}

.occasion-client-benefits,
.occasion-faq-section {
    background: #151c24;
    color: var(--white);
}

.occasion-catalog {
    background: #1d2835;
    color: var(--white);
    padding-bottom: clamp(52px, 5vw, 78px);
}

.occasion-section-heading h2,
.occasion-centered-heading h2,
.occasion-catalog-head h2,
.occasion-intro .occasion-benefits-heading h2,
.occasion-client-benefits-heading h2,
.occasion-faq-heading h2 {
    color: var(--white);
}

.occasion-section-heading p,
.occasion-centered-heading p,
.occasion-catalog-head p,
.occasion-intro .occasion-benefits-heading p,
.occasion-client-benefits p,
.occasion-faq-heading p {
    color: rgba(255, 255, 255, 0.66);
}

.occasion-benefits-kicker,
.occasion-label,
.occasion-client-benefits-heading .occasion-label,
.occasion-faq-heading > span {
    color: var(--blue-light);
}

.occasion-benefit--light {
    border-color: rgba(139, 185, 236, 0.14);
    background: #243243;
    color: var(--white);
}

.occasion-benefit--dark {
    border-color: rgba(139, 185, 236, 0.18);
    background: #182636;
    color: var(--white);
}

.occasion-client-benefit-list,
.occasion-client-benefit,
.occasion-faq-list,
.occasion-faq-item {
    border-color: rgba(139, 185, 236, 0.16);
}

.occasion-client-benefit h3,
.occasion-faq-title {
    color: var(--white);
}

.occasion-client-benefit p,
.occasion-faq-answer p {
    color: rgba(255, 255, 255, 0.66);
}

.occasion-faq-question {
    color: var(--white);
}

.occasion-faq-toggle {
    border-color: rgba(139, 185, 236, 0.24);
}

.occasion-faq-toggle::before,
.occasion-faq-toggle::after {
    background: var(--white);
}

.occasion-filters button {
    border-color: rgba(139, 185, 236, 0.22);
    color: rgba(255, 255, 255, 0.72);
}

.occasion-product-card {
    border-color: rgba(139, 185, 236, 0.14);
    background: #18222f;
}

.occasion-product-card:hover {
    border-color: rgba(139, 185, 236, 0.38);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

.occasion-product-image {
    background: #212d3c;
}

.occasion-product-image span {
    color: rgba(255, 255, 255, 0.58);
}

.occasion-product-body h3 {
    color: var(--white);
}

.occasion-catalog .occasion-product-card {
    min-height: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(139, 185, 236, 0.16);
    border-radius: 6px;
    background: #1c2836;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

.occasion-catalog .occasion-product-card a,
.occasion-catalog .occasion-product-card > div {
    gap: 0;
}

.occasion-catalog .occasion-product-image {
    height: auto;
    aspect-ratio: 3 / 4;
    border: 0;
    border-radius: 0;
    background: #17202b;
}

.occasion-catalog .occasion-product-image span {
    display: none;
}

.occasion-catalog .occasion-product-image img {
    padding: 14px;
    object-fit: contain;
    object-position: center;
}

.occasion-catalog .occasion-product-body {
    min-height: 205px;
    padding: 28px 30px 30px;
    background: #1c2836;
}

.occasion-catalog .occasion-product-body p {
    color: rgba(255, 255, 255, 0.58);
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.occasion-catalog .occasion-product-body h3 {
    margin-top: 8px;
    color: var(--white);
    font-size: clamp(1.35rem, 1.75vw, 1.8rem);
}

.occasion-catalog .occasion-product-body strong {
    width: 50px;
    height: 50px;
    margin-top: auto;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--blue);
    color: var(--white);
    font-size: 0;
    font-weight: 600;
    transition:
        background 250ms ease,
        border-color 250ms ease,
        transform 250ms ease;
}

.occasion-catalog .occasion-product-body strong::after {
    content: "\2192";
    font-size: 1.25rem;
    line-height: 1;
}

.occasion-catalog .occasion-product-card:hover .occasion-product-body strong {
    transform: translateX(4px);
    border-color: transparent;
    background: var(--blue-dark);
}

.occasion-product-image--empty {
    display: grid;
    place-items: center;
}

.occasion-product-image--empty .occasion-product-placeholder {
    position: static;
    display: inline-flex;
    max-width: 150px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.88rem;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
}

.occasion-empty-state {
    grid-column: 1 / -1;
    padding: clamp(34px, 5vw, 58px);
    border: 1px solid rgba(139, 185, 236, 0.16);
    border-radius: 6px;
    background: #1c2836;
    text-align: center;
}

.occasion-empty-state h3 {
    color: var(--white);
    font-size: clamp(1.4rem, 2vw, 2rem);
    line-height: 1.15;
}

.occasion-empty-state p {
    max-width: 560px;
    margin: 14px auto 0;
    color: rgba(255, 255, 255, 0.64);
    line-height: 1.65;
}

.occasion-catalog .occasion-product-card.is-catalog-hidden {
    display: none;
}

.occasion-catalog .occasion-product-card.is-catalog-revealing {
    animation:
        occasionCatalogReveal 520ms cubic-bezier(0.22, 1, 0.36, 1)
        var(--catalog-reveal-delay, 0ms)
        both;
}

.occasion-catalog .occasion-product-card.is-catalog-preview {
    max-height: 128px;

    overflow: hidden;

    filter: blur(1.5px);

    opacity: 0.56;

    pointer-events: none;

    transform: translateY(8px);

    mask-image:
        linear-gradient(
            180deg,
            #000 0%,
            #000 42%,
            rgba(0, 0, 0, 0) 100%
        );
    -webkit-mask-image:
        linear-gradient(
            180deg,
            #000 0%,
            #000 42%,
            rgba(0, 0, 0, 0) 100%
        );
}

.occasion-catalog .occasion-product-card.is-catalog-preview .occasion-product-body {
    display: none;
}

@keyframes occasionCatalogReveal {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

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

@media (prefers-reduced-motion: reduce) {
    .occasion-catalog .occasion-product-card.is-catalog-revealing {
        animation: none;
    }
}

.occasion-catalog-more {
    display: flex;
    justify-content: center;

    margin-top: 18px;
}

.occasion-show-more {
    min-width: 190px;
    min-height: 58px;

    padding: 0 34px;

    border: 1px solid rgba(139, 185, 236, 0.48);
    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            var(--blue) 0%,
            #0f5dae 100%
        );
    color: var(--white);

    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;

    box-shadow:
        0 16px 34px rgba(13, 100, 190, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);

    cursor: pointer;

    transition:
        transform 250ms ease,
        background 250ms ease,
        border-color 250ms ease,
        box-shadow 250ms ease;
}

.occasion-show-more:hover,
.occasion-show-more:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(139, 185, 236, 0.7);
    background: var(--blue-dark);
    box-shadow:
        0 20px 42px rgba(13, 100, 190, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.single-materiel-page {
    overflow-x: hidden;
    background: #151c24;
    color: var(--white);
}

.single-materiel-hero {
    min-height: 100vh;
    padding: clamp(118px, 8vw, 150px) 0 clamp(58px, 6vw, 92px);
    background:
        radial-gradient(circle at 24% 34%, rgba(20, 101, 190, 0.18), transparent 32%),
        radial-gradient(circle at 78% 22%, rgba(9, 92, 126, 0.16), transparent 36%),
        linear-gradient(135deg, #111519 0%, #1c2835 62%, #172433 100%);
}

.single-materiel-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.04fr)
        minmax(380px, 0.96fr);
    align-items: start;
    gap: clamp(34px, 4.4vw, 72px);
}

.single-materiel-gallery,
.single-materiel-content {
    min-width: 0;
}

.single-materiel-top-back {
    display: inline-flex;
    align-items: center;
    margin-bottom: clamp(22px, 3vw, 34px);
    color: var(--blue-light);
    font-size: 0.76rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 220ms ease, transform 220ms ease;
}

.single-materiel-top-back:hover,
.single-materiel-top-back:focus-visible {
    color: var(--white);
    transform: translateX(-3px);
}

.single-materiel-main-image {
    display: grid;
    min-height: clamp(340px, 35vw, 520px);
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(139, 185, 236, 0.16);
    border-radius: 10px;
    background:
        radial-gradient(circle at 50% 56%, rgba(31, 92, 153, 0.22), transparent 45%),
        #17202b;
    box-shadow: 0 24px 68px rgba(0, 0, 0, 0.3);
}

.single-materiel-main-image img {
    width: 100%;
    height: 100%;
    max-height: clamp(340px, 35vw, 520px);
    padding: clamp(16px, 2.2vw, 34px);
    object-fit: contain;
}

.single-materiel-main-image--empty span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.single-materiel-thumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(10px, 1vw, 14px);
    margin-top: 16px;
}

.single-materiel-thumb {
    width: clamp(82px, 7vw, 116px);
    height: clamp(64px, 5.5vw, 86px);

    display: grid;
    place-items: center;
    overflow: hidden;
    border: 2px solid rgba(139, 185, 236, 0.2);
    border-radius: 8px;
    background: #19232f;
    cursor: pointer;
    transition:
        border-color 220ms ease,
        box-shadow 220ms ease,
        transform 220ms ease;
}

.single-materiel-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.single-materiel-thumb:hover,
.single-materiel-thumb:focus-visible,
.single-materiel-thumb.is-active {
    transform: translateY(-2px);
    border-color: var(--blue);
    box-shadow: 0 12px 32px rgba(17, 111, 199, 0.22);
}

.single-materiel-content {
    padding-top: 2px;
}

.single-materiel-category {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--blue-light);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.single-materiel-category::after {
    content: "";
    width: 46px;
    height: 1px;
    background: currentColor;
    opacity: 0.65;
}

.single-materiel-content h1,
.single-materiel-empty h1 {
    max-width: 680px;
    margin: 18px 0 0;
    color: var(--white);
    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(2.05rem, 3.1vw, 3.65rem);
    font-weight: 650;
    letter-spacing: -0.045em;
    line-height: 1.02;
}

.single-materiel-price {
    width: 100%;
    max-width: 650px;
    margin-top: clamp(18px, 2.3vw, 28px);
    color: var(--blue) !important;
    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(46px, 5vw, 68px);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 0.95;
    text-align: center;
}

.single-materiel-original-price {
    margin-top: 6px;
    color: #2f6fa3;
    font-size: 0.95rem;
    font-weight: 500;
}

.single-materiel-original-price-label {
    margin-right: 4px;
}

.single-materiel-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

.single-materiel-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border: 1px solid rgba(139, 185, 236, 0.2);
    border-radius: 999px;
    padding: 7px 12px;
    background: rgba(14, 30, 45, 0.74);
    color: var(--blue-light);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    line-height: 1.1;
    text-transform: uppercase;
}

.single-materiel-note {
    margin-top: 18px;
    border-left: 3px solid var(--blue);
    padding: 12px 0 12px 16px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.95rem;
    line-height: 1.55;
}

.single-materiel-note > * + * {
    margin-top: 0.7em;
}

.single-materiel-section {
    max-width: 650px;
    margin-top: clamp(24px, 3vw, 36px);
    padding-top: clamp(20px, 2.4vw, 30px);
    border-top: 1px solid rgba(139, 185, 236, 0.14);
}

.single-materiel-section h2 {
    margin: 0 0 12px;
    color: var(--white);
    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(1.05rem, 1.35vw, 1.32rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.18;
}

.single-materiel-description,
.single-materiel-text,
.single-materiel-info-list {
    max-width: 650px;
    margin-top: clamp(24px, 3vw, 36px);
    color: rgba(255, 255, 255, 0.74);
    font-size: clamp(0.94rem, 0.98vw, 1.02rem);
    line-height: 1.62;
}

.single-materiel-description > * + *,
.single-materiel-text > * + *,
.single-materiel-info-list p + p {
    margin-top: 1em;
}

.single-materiel-description ul,
.single-materiel-description ol,
.single-materiel-text ul,
.single-materiel-text ol {
    padding-left: 1.2em;
}

.single-materiel-info-list {
    display: grid;
    gap: 12px;
}

.single-materiel-info-list > div {
    border: 1px solid rgba(139, 185, 236, 0.13);
    border-radius: 8px;
    padding: 14px 16px;
    background: rgba(6, 11, 17, 0.34);
}

.single-materiel-info-list span {
    display: block;
    margin-bottom: 6px;
    color: var(--blue-light);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.single-materiel-highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.single-materiel-highlight {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid rgba(139, 185, 236, 0.13);
    border-radius: 8px;
    padding: 13px 14px;
    background: rgba(6, 11, 17, 0.34);
}

.single-materiel-highlight span {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 999px;
    background: rgba(18, 107, 196, 0.22);
    color: var(--blue-light);
}

.single-materiel-highlight p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.92rem;
    line-height: 1.42;
}

.single-materiel-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 22px;
    margin-top: clamp(26px, 3.4vw, 42px);
}

.single-materiel-actions .button {
    min-width: min(100%, 250px);
    min-height: 52px;
    padding: 0 24px;
}

.single-materiel-back {
    display: inline-flex;
    color: var(--blue-light);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
}

.single-materiel-back:hover {
    color: var(--white);
}

.single-materiel-empty {
    max-width: 760px;
}

.single-materiel-empty .single-materiel-back {
    margin-bottom: 34px;
}

.single-materiel-empty p {
    max-width: 560px;
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.7;
}

@media (max-width: 980px) {

    .single-materiel-layout {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .single-materiel-content {
        padding-top: 0;
    }

    .single-materiel-main-image {
        min-height: 360px;
    }

    .single-materiel-main-image img {
        max-height: 400px;
    }
}

@media (max-width: 620px) {

    .single-materiel-hero {
        padding: 112px 0 72px;
    }

    .single-materiel-page .container {
        width: calc(100% - 28px);
    }

    .single-materiel-main-image {
        min-height: 270px;
        border-radius: 8px;
    }

    .single-materiel-main-image img {
        max-height: 300px;
        padding: 14px;
    }

    .single-materiel-thumbs {
        gap: 9px;
        margin-top: 12px;
    }

    .single-materiel-thumb {
        width: 68px;
        height: 54px;
    }

    .single-materiel-content h1,
    .single-materiel-empty h1 {
        font-size: clamp(1.82rem, 8vw, 2.35rem);
        line-height: 1.04;
    }

    .single-materiel-price {
        margin-top: 16px;
        font-size: clamp(34px, 12vw, 46px);
    }

    .single-materiel-description,
    .single-materiel-text,
    .single-materiel-info-list,
    .single-materiel-empty p {
        font-size: 0.92rem;
        line-height: 1.65;
    }

    .single-materiel-highlights {
        grid-template-columns: 1fr;
    }

    .single-materiel-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .single-materiel-actions .button {
        width: 100%;
        min-width: 0;
    }
}

.occasion-catalog-faq-wave {
    position: relative;
    height: clamp(38px, 5vw, 72px);
    margin-top: -1px;
    overflow: hidden;
    background: #1d2835;
}

.occasion-catalog-faq-wave svg {
    display: block;
    width: 100%;
    height: 100%;
}

.occasion-catalog-faq-wave path {
    fill: #18212c;
}

body,
button,
input,
textarea,
select {
    font-family: "Sora", "Inter", sans-serif;
}

* {
    font-family: "Sora", "Inter", sans-serif;
}

h1,
h2,
h3,
.hero h1,
.product-page h1,
.product-page h2,
.products-heading h2,
.history-content h2,
.value-intro h2,
.value-text h3,
.trust-section h2,
.trust-card-content h3,
.catering-intro-content h2,
.support-timeline-heading h2,
.brand-partners-heading h2,
.project-support h2,
.partners-intro h2,
.partner-feature-content h3 {
    font-family: "Sora", "Manrope", sans-serif;
    font-weight: 600;
}

p,
.hero-description,
.product-page-text,
.product-page-panel p,
.value-intro p,
.value-text p,
.trust-card-content p,
.catering-intro-content p,
.support-timeline-heading p,
.support-step p,
.brand-partners-heading p,
.project-support-lead,
.project-support-subtitle,
.project-support-item p,
.partners-intro p,
.other-partners p,
.footer-column p,
.footer-bottom p {
    font-family: "Sora", "Inter", sans-serif;
    font-weight: 400;
}

.products-heading span,
.value-intro span,
.footer-column h2,
.product-page-kicker,
.project-support-kicker,
.partners-intro-kicker,
.support-timeline-heading > span,
.catering-intro-content span,
.button,
.contact-button,
.product-button,
.nav a,
.history-link,
.value-discover,
.footer-contact-button,
.footer-bottom a,
.brand-partner-link,
.brand-partner-card small {
    font-family: "Sora", "Inter", sans-serif;
    font-weight: 500;
}

.button-main,
.contact-button,
.product-button,
.footer-contact-button,
.brand-partner-card strong,
.support-step h3,
.product-card h2 {
    font-weight: 600;
}

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

button {
    border: none;
    background: none;
    cursor: pointer;
}

.container {
    width: min(
        calc(100% - 48px),
        var(--container)
    );

    margin: 0 auto;
}


/* HEADER */

.header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    padding: 4px 0;

    background:
        rgba(17, 22, 29, 0.24);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.08);

    transition:
        background 0.3s ease,
        padding 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.header.scrolled {
    padding: 3px 0;

    background:
        rgba(20, 26, 34, 0.92);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 8px 30px
        rgba(0, 0, 0, 0.24);
}

.header-content {
    display: flex;
    align-items: center;
}


/* LOGO */

.logo {
    display: flex;
    align-items: center;

    margin-right: auto;
}

.logo img {
    display: block;

    width: auto;
    height: 82px;

    object-fit: contain;

    filter: none;

    transition:
        height 0.3s ease,
        filter 0.3s ease;
}

.header.scrolled .logo img {
    height: 70px;

    filter: none;
}


/* NAVIGATION */

.nav {
    display: flex;
    align-items: center;

    gap: 24px;

    margin-right: 24px;
}

.nav-item {
    position: relative;

    display: flex;
    align-items: center;
}

.nav a {
    position: relative;

    color:
        rgba(255, 255, 255, 0.9);

    font-size: 13px;
    font-weight: 500;

    transition:
        color 0.25s ease;
}

.nav a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 2px;

    background: var(--blue);

    transition:
        width 0.25s ease;
}

.nav a:hover::after,
.nav a.active::after {
    width: 100%;
}

.nav a:hover {
    color: var(--white);
}

.header.scrolled .nav a {
    color:
        rgba(255, 255, 255, 0.92);
}

.header.scrolled .nav a:hover {
    color: var(--white);
}

.nav-dropdown {
    position: absolute;

    top: calc(100% + 22px);
    left: 50%;

    width: 315px;

    padding: 10px;

    display: grid;

    gap: 4px;

    border:
        1px solid
        rgba(255, 255, 255, 0.1);

    background:
        rgba(9, 12, 17, 0.94);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    opacity: 0;
    visibility: hidden;

    transform:
        translate(-50%, 10px);

    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        visibility 0.22s ease;
}

.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown,
.nav-item-dropdown.is-open .nav-dropdown {
    opacity: 1;
    visibility: visible;

    transform:
        translate(-50%, 0);
}

.nav-dropdown a,
.header.scrolled .nav-dropdown a {
    padding: 11px 12px;

    color:
        rgba(255, 255, 255, 0.74);

    font-size: 12px;
    line-height: 1.35;
}

.nav-dropdown a::after {
    display: none;
}

.nav-dropdown a:hover {
    color: var(--white);

    background:
        rgba(21, 88, 166, 0.18);
}

.nav-mobile-actions {
    display: none;
}


/* CONTACT */

.header-actions {
    display: flex;
    align-items: center;

    gap: 10px;
}

.contact-button {
    position: relative;
    overflow: hidden;

    min-height: 40px;
    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border-radius: 100px;

    background: var(--blue);
    color: var(--white);

    font-family: "Sora", "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;
}

.contact-button:hover {
    transform: translateY(-2px);

    background: var(--blue-dark);
    color: var(--white);
}

.contact-button.highlight-button,
.header.scrolled .contact-button.highlight-button {
    background: rgba(223, 32, 43, 0.82);
}

.contact-button.highlight-button:hover,
.header.scrolled .contact-button.highlight-button:hover {
    background: var(--red-dark);
}


/* MENU MOBILE */

.menu-button {
    display: none;

    width: 44px;
    height: 44px;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 6px;
}

.menu-button span {
    width: 22px;
    height: 2px;

    background: var(--white);

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.header.scrolled .menu-button span {
    background: var(--white);
}


/* HERO */

.hero {
    position: relative;

    min-height: 98vh;

    display: flex;
    align-items: center;

    background: var(--black);

    overflow: hidden;
}

.hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 520px;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(9, 12, 17, 0) 0%,
            rgba(9, 12, 17, 0.08) 24%,
            rgba(9, 12, 17, 0.26) 46%,
            rgba(9, 12, 17, 0.52) 68%,
            rgba(9, 12, 17, 0.82) 88%,
            var(--black) 100%
        );
}


/* IMAGE HERO */

.hero-image {
    position: absolute;

    inset: 0;

    background-image:
        url("images/image accueil1.webp");

    background-size: cover;
    background-position: center;

    transform: scale(1.02);
}

.hero-image::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(9, 12, 17, 0) 38%,
            rgba(9, 12, 17, 0.22) 58%,
            rgba(9, 12, 17, 0.58) 78%,
            var(--black) 100%
        );
}


/* OVERLAY */

.hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4, 8, 13, 0.92) 0%,
            rgba(4, 8, 13, 0.76) 36%,
            rgba(4, 8, 13, 0.26) 66%,
            rgba(4, 8, 13, 0.04) 100%
        ),

        linear-gradient(
            to top,
            rgba(21, 88, 166, 0.1),
            transparent 55%
        );
}


/* HERO CONTENT */

.hero-content {
    position: relative;

    z-index: 2;

    padding-top: 85px;
}

.hero-text {
    max-width: min(720px, 49vw);
}


/* HERO TITLE */

.hero h1 {
    transform: translateY(-42px);

    color: var(--white);

    font-family: "Manrope", sans-serif;

    font-size:
        clamp(36px, 4vw, 58px);

    line-height: 1.04;

    letter-spacing: -0.035em;

    font-weight: 650;
}

.hero h1 strong {
    display: block;

    margin-top: 6px;

    color: var(--blue-light);

    font-weight: 800;
}

.hero h1 span {
    display: block;
}


/* DESCRIPTION */

.hero-description {
    max-width: 520px;

    margin-top: 16px;

    color:
        rgba(255, 255, 255, 0.66);

    font-size: 16px;

    line-height: 1.7;
}


/* BUTTONS */

.hero-buttons {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 22px;
}

/* =========================================================
   BOUTONS - BASE COMMUNE
========================================================= */

.button {
    position: relative;
    overflow: hidden;

    min-height: 54px;
    padding: 0 26px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    border: 1px solid transparent;
    border-radius: 100px;

    font-family: "Sora", "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;

    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}


/* PETIT EFFET DE LUMIERE COMMUN */

.button::before {
    content: "";

    position: absolute;
    inset: 1px;

    border-radius: inherit;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.30),
            rgba(255, 255, 255, 0.06) 35%,
            transparent 65%
        );

    opacity: 0.65;
}

.button::after {
    content: "";

    position: absolute;

    top: -70%;
    left: -35%;

    width: 56%;
    height: 240%;

    border-radius: 999px;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 255, 255, 0.28),
            rgba(255, 255, 255, 0.06) 42%,
            transparent 70%
        );

    transform:
        rotate(18deg)
        translateX(-42%);

    opacity: 0.5;

    transition:
        transform 0.45s ease,
        opacity 0.45s ease;
}


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

.button:hover::after {
    transform:
        rotate(18deg)
        translateX(260%);

    opacity: 0.9;
}

.button span {
    position: relative;
    z-index: 1;

    transition: transform 0.25s ease;
}

.button:hover span {
    transform: translateX(3px);
}


/* =========================================================
   BOUTON PRINCIPAL BLEU
========================================================= */

.button-main {
    background: var(--blue);
    color: var(--white);

    box-shadow:
        0 10px 26px
        rgba(21, 88, 166, 0.18);
}

.button-main:hover {
    background: var(--blue-dark);
    color: var(--white);

    box-shadow:
        0 14px 32px
        rgba(21, 88, 166, 0.24);
}

.hero-breakdown-button,
.hero-breakdown-button.button-main {
    background: var(--red);

    box-shadow:
        0 10px 26px
        rgba(223, 32, 43, 0.2);
}

.hero-breakdown-button:hover,
.hero-breakdown-button.button-main:hover {
    background: var(--red-dark);

    box-shadow:
        0 14px 32px
        rgba(223, 32, 43, 0.28);
}


/* =========================================================
   BOUTON SECONDAIRE
========================================================= */

.button-secondary {
    background:
        rgba(255, 255, 255, 0.08);

    border-color:
        rgba(255, 255, 255, 0.22);

    color: var(--white);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.button-secondary:hover {
    background:
        rgba(255, 255, 255, 0.15);

    border-color:
        rgba(255, 255, 255, 0.36);

    color: var(--white);
}


/* HERO SERVICES */

.hero-services {
    position: absolute;

    left: 50%;
    bottom: 34px;

    z-index: 3;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    overflow: visible;

    border: none;

    border-radius: 0;

    background: transparent;

    backdrop-filter:
        none;
    -webkit-backdrop-filter:
        none;

    box-shadow: none;

    transform:
        translateX(-50%);
}

.hero-service {
    position: relative;

    overflow: hidden;

    min-height: 58px;

    padding: 0;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr);

    gap: 12px;

    align-items: center;
    justify-content: start;
    color: var(--white);

    transition:
        background 0.28s ease,
        transform 0.28s ease;
}

.hero-service > * {
    position: relative;

    z-index: 2;
}

.hero-service + .hero-service {
    border-left:
        1px solid
        rgba(255, 255, 255, 0.08);
}

.hero-service:hover {
    background: transparent;

    transform:
        translateY(-2px);
}

.hero-service-number {
    color:
        rgba(255, 255, 255, 0.56);

    -webkit-text-stroke:
        0.55px
        rgba(255, 255, 255, 0.42);

    text-shadow:
        -0.8px -0.8px 0
        rgba(255, 255, 255, 0.38),
        0.9px 1px 0
        rgba(0, 0, 0, 0.42);

    font-family: "Manrope", sans-serif;
    font-size:
        clamp(20px, 2.1vw, 30px);
    font-weight: 700;

    line-height: 0.9;

    letter-spacing: -0.035em;

    transition:
        color 0.28s ease;
}

.hero-service-icon {
    position: relative;

    width: 46px;
    height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color:
        rgba(190, 220, 255, 0.96);

    border:
        1px solid
        rgba(139, 185, 236, 0.22);

    border-radius: 13px;

    background:
        rgba(21, 88, 166, 0.16);

    box-shadow: none;

    transition:
        color 0.24s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}

.hero-service-icon::before {
    display: none;
}

.hero-service-icon svg {
    position: relative;

    z-index: 1;

    width: 22px;
    height: 22px;

    display: block;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    filter: none;
}

.hero-service-icon .maintenance-tools-icon {
    width: 26px;
    height: 26px;

    stroke-width: 4.2;
}

.hero-service-icon .maintenance-hand-tool-icon {
    width: 28px;
    height: 28px;

    stroke-width: 4.8;
}

.hero-service:hover .hero-service-icon {
    color: var(--white);

    border-color:
        rgba(139, 185, 236, 0.42);

    background:
        rgba(21, 88, 166, 0.26);

    transform:
        translateY(-2px);
}

.hero-service strong,
.hero-service small {
    display: block;
}

.hero-service strong {
    font-family: "Manrope", sans-serif;

    color:
        rgba(255, 255, 255, 0.68);

    -webkit-text-stroke:
        0.2px
        rgba(255, 255, 255, 0.34);

    text-shadow:
        -0.55px -0.55px 0
        rgba(255, 255, 255, 0.28),
        0.65px 0.75px 0
        rgba(0, 0, 0, 0.42);

    font-size: 13px;
    font-weight: 700;

    transition:
        color 0.28s ease;
}

.hero-service small {
    margin-top: 3px;

    color:
        rgba(255, 255, 255, 0.52);

    text-shadow:
        -0.45px -0.45px 0
        rgba(255, 255, 255, 0.2),
        0.55px 0.65px 0
        rgba(0, 0, 0, 0.36);

    font-size: 10.5px;
    line-height: 1.35;
}

.liquid-glass-filter {
    position: absolute;

    width: 0;
    height: 0;

    pointer-events: none;
}

/* SCROLL */

.scroll {
    display: none !important;

    position: absolute;

    right: 45px;
    bottom: 18px;

    z-index: 3;

    display: flex;
    align-items: center;

    gap: 15px;

    color:
        rgba(255, 255, 255, 0.5);

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 0.12em;
}

.scroll-line {
    position: relative;

    width: 55px;
    height: 1px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.25);
}

.scroll-line::after {
    content: "";

    position: absolute;

    top: 0;
    left: -20px;

    width: 20px;
    height: 100%;

    background: var(--blue);

    animation:
        scrollAnimation
        2s linear infinite;
}

@keyframes scrollAnimation {
    from {
        left: -20px;
    }

    to {
        left: 55px;
    }
}


/* PRODUITS */

.products-section {
    padding: var(--space-lg) 0;

    margin-top: -1px;

    background:
        linear-gradient(
            to bottom,
            #1d2835 0,
            #1d2835 calc(100% - 112px),
            #151b23 calc(100% - 112px),
            #151b23 100%
        );
}

.products-heading {
    max-width: 780px;

    margin: 0 auto 44px;

    padding: 0;

    text-align: center;
}

.products-heading h2 {
    color: var(--white);

    font-family: "Manrope", sans-serif;

    font-size:
        clamp(30px, 3.4vw, 48px);

    line-height: 1.06;

    font-weight: 800;

    letter-spacing: -0.02em;
}

.products-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;
}

.product-card {
    position: relative;

    min-height: 390px;

    overflow: hidden;

    border-radius: 8px;

    background:
        var(--dark)
        center / cover
        no-repeat;

    border:
        1px solid
        #095C7E;

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.28);

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}

.product-card::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(9, 12, 17, 0.72) 0%,
            rgba(9, 12, 17, 0.58) 52%,
            rgba(9, 12, 17, 0.32) 100%
        );

    backdrop-filter: saturate(1.08);
    -webkit-backdrop-filter: saturate(1.08);
}

.product-card:hover {
    transform: translateY(-6px);

    border-color:
        #095C7E;

    box-shadow:
        0 24px 60px
        rgba(0, 0, 0, 0.4);
}

.product-card-content {
    position: relative;

    z-index: 1;

    min-height: 390px;

    padding: 34px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.product-card h2 {
    margin-top: 0;

    color: var(--white);

    font-family: "Manrope", sans-serif;

    font-size: 30px;
    line-height: 1.14;

    font-weight: 800;
}

.product-button {
    position: relative;
    overflow: hidden;

    min-height: 54px;
    padding: 0 26px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-top: auto;

    border:
        1px solid
        rgba(255, 255, 255, 0.26);

    border-radius: 100px;

    background:
        rgba(7, 11, 17, 0.56);

    color: var(--white);

    font-family: "Sora", "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;

    text-decoration: none;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}

.product-button:hover {
    transform: translateY(-2px);

    background: var(--blue);

    border-color: var(--blue);

    color: var(--white);
}

.product-card-bakery {
    background-image:
        url("images/image_2.webp");
}

.product-card-catering {
    background-image:
        url("images/image_3.webp");
}

.product-card-vending {
    background-image:
        url("images/image_4.webp");
}

.product-card-coffee {
    background-image:
        url("images/image_5.webp");
}

.product-card-used {
    background-image:
        url("images/image_card_occations.webp");
}

.product-card-project {
    background-image:
        url("images/image_6.webp");
}


/* PAGES PRODUITS */

.product-page {
    min-height: 100vh;

    padding-top: 98px;

    background:
        linear-gradient(
            135deg,
            var(--black),
            var(--dark)
        );
}

.product-page-bakery {
    padding-top: 0;
}

.product-page-catering {
    padding-top: 0;
}

.product-page-hero {
    padding: 120px 0 80px;
}

.product-page-hero-image {
    position: relative;

    min-height: 82vh;

    padding: 0;

    display: flex;
    align-items: center;

    overflow: hidden;
}

.product-page-hero-bg,
.product-page-hero-overlay {
    position: absolute;

    inset: 0;
}

.product-page-hero-bg {
    z-index: 0;

    background-image:
        url("images/imgage_boulagerie1.webp");
    background-size: cover;
    background-position: center;

    transform:
        scale(1.02);
}

.product-page-hero-overlay {
    z-index: 1;

    background:
        linear-gradient(
            to top,
            rgb(var(--hero-end-rgb)) 0%,
            rgba(var(--hero-end-rgb), 0.52) 18%,
            rgba(var(--hero-end-rgb), 0) 52%
        ),
        linear-gradient(
            90deg,
            rgba(4, 8, 13, 0.94) 0%,
            rgba(4, 8, 13, 0.78) 38%,
            rgba(4, 8, 13, 0.38) 66%,
            rgba(4, 8, 13, 0.12) 100%
        );
}

.product-page-hero-image .container {
    position: relative;

    z-index: 2;
}

.product-page-hero-content {
    max-width: 760px;
}

.product-page-bakery .product-page-hero-image {
    min-height: 560px;
}

.product-page-bakery .product-page-hero-bg {
    background-image:
        url("images/image_8.webp");
    background-position: center;
}

.product-page-bakery .product-page-hero-overlay {
    background:
        linear-gradient(
            to bottom,
            rgba(var(--hero-end-rgb), 0.28) 0%,
            rgba(var(--hero-end-rgb), 0.34) 34%,
            rgba(var(--hero-end-rgb), 0.72) 78%,
            rgb(var(--hero-end-rgb)) 100%
        ),
        linear-gradient(
            90deg,
            rgba(9, 12, 17, 0.32) 0%,
            rgba(9, 12, 17, 0.08) 50%,
            rgba(9, 12, 17, 0.32) 100%
        );
}

.product-page-bakery .product-page-hero-content {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;

    text-align: center;

    transform: translateY(60px);
}

.product-page-bakery h1 {
    max-width: 900px !important;
    margin: 0 auto !important;

    color: var(--white);

    font-size: 60px !important;
    line-height: 1.08 !important;
    font-weight: 800;

    letter-spacing: -1px;
}

.product-page-bakery h1 span {
    color: var(--white);

    display: block;
}

.product-page-bakery h1 strong {
    color: var(--blue-light);

    font-weight: inherit;
}

.product-page-bakery .product-page-actions {
    justify-content: center;

    margin-top: 40px;
}

.product-page-bakery .button-main {
    background: var(--blue);
}

.product-page-bakery .button-main:hover {
    background: var(--blue-dark);
}

.product-page-catering .product-page-hero-image {
    min-height: 540px;
}

.product-page-catering .product-page-hero-bg {
    background-image:
        url("images/chef-cooking-in-professional-kitchen-landscape.webp");
    background-position: center 16px;
    background-repeat: no-repeat;
}

.product-page-catering .product-page-hero-overlay {
    background:
        linear-gradient(
            to bottom,
            rgba(var(--hero-end-rgb), 0.34) 0%,
            rgba(var(--hero-end-rgb), 0.48) 38%,
            rgba(var(--hero-end-rgb), 0.84) 82%,
            rgb(var(--hero-end-rgb)) 100%
        ),
        linear-gradient(
            90deg,
            rgba(9, 12, 17, 0.42) 0%,
            rgba(9, 12, 17, 0.14) 50%,
            rgba(9, 12, 17, 0.42) 100%
        );
}

.product-page-catering .product-page-hero-content {
    width: min(100%, 1680px);
    max-width: none;

    margin: 0 auto;

    text-align: center;

    transform:
        translateY(52px);
}

.product-page-catering h1 {
    max-width: 900px !important;
    margin: 0 auto !important;

    color: var(--white);

    font-size: 55px !important;
    line-height: 1.08 !important;
    font-weight: 800;

    letter-spacing: -1px;
}

.product-page-catering h1 span {
    display: block;

    color: var(--white);
}

.product-page-catering h1 .catering-title-line {
    white-space: nowrap;
}

.product-page-catering .product-page-actions {
    justify-content: center;

    margin-top: 24px;
}

.product-page-catering .button-main {
    background: var(--blue);
}

.product-page-catering .button-main:hover {
    background: var(--blue-dark);
}

.product-page-vending .product-page-hero-image {
    min-height: 560px;
}

.product-page-vending .product-page-hero-bg {
    background-image:
        url("images/image_4.webp");
    background-position: center;
}

.product-page-vending .product-page-hero-overlay {
    background:
        linear-gradient(
            to bottom,
            rgba(var(--hero-end-rgb), 0.22) 0%,
            rgba(var(--hero-end-rgb), 0.34) 38%,
            rgba(var(--hero-end-rgb), 0.76) 82%,
            rgb(var(--hero-end-rgb)) 100%
        ),
        linear-gradient(
            90deg,
            rgba(9, 12, 17, 0.34) 0%,
            rgba(9, 12, 17, 0.1) 50%,
            rgba(9, 12, 17, 0.34) 100%
        );
}

.product-page-vending .product-page-hero-content {
    max-width: 1100px;

    margin: 0 auto;

    text-align: center;

    transform:
        translateY(18px);
}

.product-page-vending h1 {
    max-width: 1120px;

    margin: 0 auto;

    color: var(--white);

    font-size:
        clamp(44px, 5.2vw, 78px);
    line-height: 1.06;
    font-weight: 800;

    letter-spacing: -0.045em;
}

.product-page-vending .product-page-actions {
    justify-content: center;

    margin-top: 42px;
}

.product-page-vending .button-main {
    background: var(--red);
}

.product-page-vending .button-main:hover {
    background: var(--red-dark);
}

.product-page-coffee .product-page-hero-image {
    min-height: 560px;
}

.product-page-coffee .product-page-hero-bg {
    background-image:
        url("images/hero_machine_cafe.webp");
    background-position: center;
}

.product-page-coffee .product-page-hero-overlay {
    background:
        linear-gradient(
            to bottom,
            rgba(var(--hero-end-rgb), 0.28) 0%,
            rgba(var(--hero-end-rgb), 0.42) 38%,
            rgba(var(--hero-end-rgb), 0.8) 82%,
            rgb(var(--hero-end-rgb)) 100%
        ),
        linear-gradient(
            90deg,
            rgba(9, 12, 17, 0.38) 0%,
            rgba(9, 12, 17, 0.12) 50%,
            rgba(9, 12, 17, 0.38) 100%
        );
}

.product-page-coffee .product-page-hero-content {
    max-width: 1080px;

    margin: 0 auto;

    text-align: center;

    transform:
        translateY(24px);
}

.product-page-coffee h1 {
    max-width: 1080px;

    margin: 0 auto;

    color: var(--white);

    font-size:
        clamp(42px, 5vw, 76px);
    line-height: 1.06;
    font-weight: 800;

    letter-spacing: -0.045em;
}

.product-page-coffee h1 span {
    display: block;

    color: var(--blue-light);
}

.product-page-coffee .product-page-actions {
    justify-content: center;

    margin-top: 38px;
}

.product-page-coffee .button-main {
    background: var(--blue);
}

.product-page-coffee .button-main:hover {
    background: var(--blue-dark);
}

.product-page-used {
    padding-top: 0;
}

.product-page-used .product-page-hero-image {
    min-height: 620px;
}

.product-page-used .product-page-hero-bg {
    background-image:
        url("images/image_card_occations.webp");
    background-position: center;
}

.product-page-used .product-page-hero-overlay {
    background:
        linear-gradient(
            to bottom,
            rgba(var(--hero-end-rgb), 0.28) 0%,
            rgba(var(--hero-end-rgb), 0.42) 38%,
            rgba(var(--hero-end-rgb), 0.8) 82%,
            rgb(var(--hero-end-rgb)) 100%
        ),
        linear-gradient(
            90deg,
            rgba(9, 12, 17, 0.38) 0%,
            rgba(9, 12, 17, 0.12) 50%,
            rgba(9, 12, 17, 0.38) 100%
        );
}

.product-page-used .product-page-hero-image::after {
    content: "";
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: -34px;
    left: 0;
    height: clamp(140px, 18vw, 260px);
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            rgba(var(--hero-end-rgb), 0) 0%,
            rgba(var(--hero-end-rgb), 0.72) 58%,
            rgb(var(--hero-end-rgb)) 100%
        );
}

/* Espacement des lettres global */
h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.product-page-hero h1,
.products-heading h2,
.value-title,
.history-copy h2,
.service-area-copy h2,
.trust-section h2,
.occasion-section-heading h2,
.occasion-catalog-head h2,
.occasion-faq-heading h2,
.vending-section-heading h2,
.coffee-intro-section h2,
.custom-universe h2 {
    letter-spacing: -1px;
}

body,
p,
li,
span,
small,
label,
input,
textarea,
select {
    letter-spacing: 0;
}

a,
button,
.button-main,
.button-secondary,
.occasion-button,
.product-card-link,
.maintenance-link,
.footer-contact-button,
.catalog-load-more {
    letter-spacing: 1px;
}

/* Garde-fous responsive globaux */
img,
video,
svg {
    max-width: 100%;
}

section {
    overflow: clip;
}

.product-page-used .product-page-hero-content {
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
    transform: translateY(24px);
}

.product-page-used h1 {
    max-width: 1080px;
    margin: 0 auto;
    color: var(--white);
    font-size: clamp(42px, 5vw, 76px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -0.045em;
}

.product-page-used h1 span {
    display: block;
    color: var(--blue-light);
}

.product-page-used .product-page-text {
    max-width: 720px;
    margin: 26px auto 0;
    color: rgba(255, 255, 255, 0.78);
}

.product-page-used .product-page-actions {
    justify-content: center;
    margin-top: 34px;
}

.product-page-used .button-main {
    background: var(--blue);
}

.product-page-used .button-main:hover {
    background: var(--blue-dark);
}

.product-page-custom .product-page-hero-image {
    min-height: 560px;
}

.product-page-custom .product-page-hero-bg {
    background-image:
        url("images/amelioration-definition-format-ordinateur.webp");
    background-position: center 70%;
}

.product-page-custom .product-page-hero-overlay {
    background:
        linear-gradient(
            to bottom,
            rgba(var(--hero-end-rgb), 0.3) 0%,
            rgba(var(--hero-end-rgb), 0.42) 36%,
            rgba(var(--hero-end-rgb), 0.78) 78%,
            rgb(var(--hero-end-rgb)) 100%
        ),
        linear-gradient(
            90deg,
            rgba(9, 12, 17, 0.44) 0%,
            rgba(9, 12, 17, 0.14) 50%,
            rgba(9, 12, 17, 0.44) 100%
        );
}

.product-page-custom .product-page-hero-content {
    max-width: 1120px;
    margin: 0 auto;
    text-align: center;
    transform: translateY(34px);
}

.product-page-custom h1 {
    max-width: 1180px;
    margin: 0 auto;
    color: var(--white);
    font-size: clamp(38px, 4.5vw, 68px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.045em;
}

.product-page-custom h1 span {
    display: block;
    color: var(--white);
}

.product-page-custom h1 strong {
    color: var(--blue-light);
    font-weight: inherit;
}

.product-page-custom .product-page-actions {
    justify-content: center;
    margin-top: 40px;
}

.product-page-custom .button-main {
    background: var(--blue);
}

.product-page-custom .button-main:hover {
    background: var(--blue-dark);
}

.product-page-about .product-page-hero-image {
    min-height: 460px;
}

.product-page-about .product-page-hero-bg {
    background:
        url("images/equipe_polytech_portrait.webp");
    background-size: cover;
    background-position: center;
    transform:
        scale(1.02);
}

.product-page-about .product-page-hero-overlay {
    background:
        linear-gradient(
            to bottom,
            rgba(var(--hero-end-rgb), 0.24) 0%,
            rgba(var(--hero-end-rgb), 0.48) 42%,
            rgba(var(--hero-end-rgb), 0.82) 86%,
            rgb(var(--hero-end-rgb)) 100%
        ),
        linear-gradient(
            90deg,
            rgba(4, 8, 13, 0.86) 0%,
            rgba(4, 8, 13, 0.52) 48%,
            rgba(4, 8, 13, 0.82) 100%
        );
}

.product-page-about .product-page-hero-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.product-page-about .product-page-hero h1 {
    max-width: 900px;
    margin: 0 auto;
    letter-spacing: -1px;
}

.product-page-about .product-page-actions {
    justify-content: center;
    margin-top: 32px;
}

.product-page-about .button-main {
    background: var(--blue-dark);
}

.product-page-about .button-main:hover {
    background: #06386f;
}

/* =========================================================
   MAINTENANCE - 4 CARDS
========================================================= */

.maintenance-strengths-section {
    padding: 100px 0 120px;

    background: #151b23;
    color: var(--white);
}


/* TITRE */

.maintenance-strengths-heading {
    max-width: 780px;

    margin: 0 auto 60px;

    text-align: center;
}

.maintenance-strengths-heading .section-label {
    display: block;

    margin-bottom: 16px;

    color: var(--blue-light);

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;

    text-transform: uppercase;
}

.maintenance-strengths-heading h2 {
    color: var(--white);

    font-size: clamp(36px, 3.8vw, 54px);
    font-weight: 600;

    line-height: 1.08;
    letter-spacing: -1px;
}

.maintenance-strengths-heading p {
    max-width: 620px;

    margin: 20px auto 0;

    color: rgba(255, 255, 255, 0.58);

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   GRILLE
========================================================= */

.maintenance-strengths-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 22px;
}


/* =========================================================
   CARD
========================================================= */

.maintenance-strength-card {
    min-height: 330px;

    padding: 38px 28px 32px;

    display: flex;
    flex-direction: column;

    align-items: center;

    border:
        1px solid
        rgba(139, 185, 236, 0.15);

    border-radius: 12px;

    background: #1d252f;

    text-align: center;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.maintenance-strength-card:hover {
    transform: translateY(-4px);

    border-color:
        rgba(139, 185, 236, 0.38);

    background: #1e273f;
}


/* =========================================================
   ICONE
========================================================= */

.maintenance-strength-card-icon {
    width: 82px;
    height: 82px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 28px;

    border-radius: 16px;

    background:
        rgba(21, 88, 166, 0.10);

    border:
        1px solid
        rgba(139, 185, 236, 0.18);
}

.maintenance-strength-card-icon img {
    width: 46px;
    height: 46px;

    object-fit: contain;
}

.maintenance-strength-card-icon svg {
    width: 46px;
    height: 46px;

    color: var(--blue-light);

    stroke: currentColor;
}


/* =========================================================
   TEXTE
========================================================= */

.maintenance-strength-card h3 {
    color: var(--white);

    font-size: 20px;
    font-weight: 600;

    line-height: 1.2;
    letter-spacing: -0.4px;
}

.maintenance-strength-card p {
    max-width: 250px;

    margin-top: 14px;

    color:
        rgba(255, 255, 255, 0.58);

    font-size: 14px;
    line-height: 1.65;
}


/* Page Maintenance - hero */
.product-page-maintenance .product-page-hero-image {
    min-height: 460px;
    background: rgb(var(--hero-end-rgb));
}

.product-page-maintenance .product-page-hero-bg {
    left: 0;
    width: 100%;
    background-image: url("images/maintenance_hero_sav_sans_logo.webp");
    background-size: cover;
    background-position: center 14%;
    background-repeat: no-repeat;
    transform: none;
}

.product-page-maintenance .product-page-hero-overlay {
    background:
        linear-gradient(180deg, rgba(var(--hero-end-rgb), 0) 0%, rgba(var(--hero-end-rgb), 0.08) 50%, rgba(var(--hero-end-rgb), 0.4) 78%, rgb(var(--hero-end-rgb)) 100%);
}

.product-page-maintenance .product-page-hero-content {
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
}

.product-page-maintenance .product-page-hero h1 {
    color: var(--white);
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1.04;
}

.product-page-maintenance .product-page-actions {
    justify-content: center;
    margin-top: 32px;
}

/* =========================================================
   PAGE CONTACT - HERO
========================================================= */

.product-page-contact .product-page-hero {
    position: relative;
    background: #0c3b73;
}

.product-page-contact .product-page-hero::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 160px;

    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgb(var(--hero-end-rgb)) 100%
    );

    pointer-events: none;
}

.product-page-contact .product-page-hero .container {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.product-page-contact .product-page-hero-content {
    width: 100%;
    max-width: 900px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.product-page-contact .product-page-hero-content h1 {
    margin: 0;

    text-align: center;
}

.product-page-contact .product-page-actions {
    width: 100%;

    margin-top: 30px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.product-page-contact .product-page-actions .button-main {
    background: var(--blue-light);
    color: #090c11;
    border-color: var(--blue-light);
}

.product-page-contact .product-page-actions .button-main:hover {
    background: #ffffff;
    color: #0c3b73;
    border-color: #ffffff;
}

.product-page-contact .product-page-hero-bg {
    background-image: none;
    background: #0c3b73;
}

.product-page-contact .product-page-hero-overlay {
    display: none;
}

.product-page-contact .product-page-hero {
    min-height: 420px;
    height: 420px;
}

/* =========================================================
   PAGE CONTACT - PREMIERE SECTION
========================================================= */

.contact-main-section {
    padding: 100px 0 120px;
    background: #151b23;
    color: var(--white);
}

.contact-main {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(500px, 1fr);
    gap: clamp(70px, 8vw, 130px);

    align-items: start;
}


/* =========================================================
   GAUCHE
========================================================= */

.contact-main-info .section-label {
    display: block;

    margin-bottom: 16px;

    color: var(--blue-light);

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.contact-main-info h2 {
    max-width: 570px;

    color: var(--white);

    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(34px, 3vw, 46px);
    font-weight: 600;

    line-height: 1.05;
    letter-spacing: -1px;
}

.contact-main-info h2 span {
    color: var(--blue-light);
}

.contact-main-intro {
    max-width: 570px;

    margin-top: 24px;

    color: rgba(255, 255, 255, 0.60);

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   INFORMATIONS
========================================================= */

.contact-info-grid {
    display: grid;
    gap: 0;

    margin-top: 25px;

    border-top: 1px solid rgba(139, 185, 236, 0.16);
}

.contact-info-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 18px;

    align-items: center;

    padding: 22px 0;

    border-bottom: 1px solid rgba(139, 185, 236, 0.16);
}


/* ICONE */

.contact-info-icon {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: rgba(21, 88, 166, 0.10);

    border: 1px solid rgba(139, 185, 236, 0.18);

    color: var(--blue-light);
}

.contact-info-icon svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* TITRES */

.contact-info-item > div:last-child > span {
    display: block;

    margin-bottom: 5px;

    color: rgba(255, 255, 255, 0.48);

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;

    text-transform: uppercase;
}


/* CONTENU */

.contact-info-item p,
.contact-info-item a {
    color: var(--white);

    font-size: 15px;
    line-height: 1.55;

    text-decoration: none;
}

.contact-info-item a {
    transition: color 0.2s ease;
}

.contact-info-item a:hover {
    color: var(--blue-light);
}


/* RESEAUX */

.contact-social-links {
    display: flex;
    align-items: center;
    gap: 22px;
}

.contact-social-links a {
    width: auto;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    background: none;
    border: none;
    border-radius: 0;

    color: var(--white);

    text-decoration: none;
    font-size: 38px !important;
}

.contact-social-links a i {
    font-size: 38px !important;
    width: auto !important;
    height: auto !important;
}

/* Taille des logos */
.contact-social-links a svg,
.contact-social-links a img {
    width: 38px !important;
    height: 38px !important;
    max-width: none !important;
    max-height: none !important;
}

/* Petit effet au survol */
.contact-social-links a {
    transition:
        transform 0.2s ease,
        color 0.2s ease;
}

.contact-social-links a:hover {
    transform: translateY(-2px);
    color: var(--blue-light);
}


/* =========================================================
   CONTACT - CARTE
========================================================= */

.contact-main-map {
    width: 100%;

    overflow: hidden;

    border: 1px solid rgba(139, 185, 236, 0.16);
    border-radius: 14px;

    background: #1d252f;
}

.contact-main-map iframe {
    display: block;

    width: 100%;
    height: 470px;

    border: 0;

    filter: grayscale(20%) brightness(0.85);
}

.contact-map-route {
    min-height: 62px;

    padding: 0 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-top: 1px solid rgba(139, 185, 236, 0.16);

    color: var(--white);
    background: #1d252f;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;

    text-decoration: none;

    transition:
        background 0.25s ease,
        color 0.25s ease;
}

.contact-map-route span {
    color: var(--blue-light);

    font-size: 20px;

    transition: transform 0.25s ease;
}

.contact-map-route:hover {
    background: #1e2b39;
    color: var(--white);
}

.contact-map-route:hover span {
    transform: translateX(4px);
}
/* =========================================================
   CONTACT - FORMULAIRE EN DESSOUS
========================================================= */

.contact-form-wrapper {
    margin-top: 30px;
    margin-bottom: 80px;
}

.contact-form-wrapper .contact-main-form {
    width: 100%;
    max-width: 900px;

    margin: 0 auto;

    padding: 50px;

    border: 1px solid rgba(139, 185, 236, 0.16);
    border-radius: 14px;

    background: #1d252f;
}

.contact-form-wrapper .contact-form-heading {
    max-width: 650px;

    margin: 0 auto 40px;

    text-align: center;
}

.contact-form-wrapper .contact-form-heading .section-label {
    display: block;

    margin-bottom: 14px;

    color: var(--blue-light);

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;

    text-transform: uppercase;
}

.contact-form-wrapper .contact-form-heading h2 {
    color: var(--white);

    font-family: "Sora", "Inter", sans-serif;
    font-size: 36px;
    font-weight: 600;

    line-height: 1.1;
    letter-spacing: -1px;
}

.contact-form-wrapper .contact-form-heading p {
    max-width: 550px;

    margin: 16px auto 0;

    color: rgba(255, 255, 255, 0.55);

    font-size: 15px;
    line-height: 1.65;
}

/* =========================================================
   FORMULAIRE
========================================================= */

.contact-main-form {
    padding: 44px;

    border: 1px solid rgba(139, 185, 236, 0.16);
    border-radius: 14px;

    background: #1d252f;
}

.contact-form-heading {
    margin-bottom: 34px;
}

.contact-form-heading h3 {
    color: var(--white);

    font-family: "Sora", "Inter", sans-serif;
    font-size: 28px;
    font-weight: 600;

    letter-spacing: -0.6px;
}

.contact-form-heading p {
    max-width: 500px;

    margin-top: 10px;

    color: rgba(255, 255, 255, 0.52);

    font-size: 14px;
    line-height: 1.6;
}


/* FORM */

.contact-form {
    display: grid;
    gap: 22px;
}

.contact-form-wrapper .wpcf7,
.contact-form-wrapper .wpcf7 form {
    width: 100%;
}

.contact-form-wrapper .wpcf7 form {
    margin: 0;
}

.contact-form-wrapper .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.contact-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.contact-form-field {
    display: grid;
    gap: 9px;
}

.contact-form-field label {
    color: rgba(255, 255, 255, 0.78);

    font-size: 13px;
    font-weight: 500;
}


/* INPUTS */

.contact-form-field input,
.contact-form-field select,
.contact-form-field textarea {
    width: 100%;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;

    outline: none;

    background: #18202a;
    color: var(--white);

    font-family: "Inter", sans-serif;
    font-size: 14px;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.contact-form-field input,
.contact-form-field select {
    height: 52px;

    padding: 0 16px;
}

.contact-form-field textarea {
    min-height: 145px;

    padding: 15px 16px;

    resize: vertical;
}

.contact-form-field input::placeholder,
.contact-form-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.32);
}

.contact-form-field input:focus,
.contact-form-field select:focus,
.contact-form-field textarea:focus {
    border-color: var(--blue);

    background: #1c2733;
}


/* BOUTON */

.contact-form-submit {
    width: fit-content;

    margin-top: 4px;
}

.contact-form-wrapper .contact-form-submit {
    margin: 8px auto 0;
}

.contact-form-wrapper .wpcf7-spinner {
    margin:
        0
        0
        0
        12px;
}

.contact-form-wrapper .wpcf7-not-valid-tip {
    margin-top: 7px;

    color: #ff9b9b;

    font-size: 12px;
    line-height: 1.4;
}

.contact-form-wrapper .wpcf7-response-output {
    margin:
        18px
        0
        0 !important;

    padding:
        14px
        16px !important;

    border-radius: 8px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 13px;
    line-height: 1.5;
}


/* =========================================================
   MAINTENANCE - POURQUOI LA MAINTENANCE
========================================================= */

.maintenance-importance-section {
    padding: 80px 0 90px;

    background: var(--black);
    color: var(--white);
}

.maintenance-importance {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    gap: clamp(80px, 8vw, 140px);

    align-items: start;
}


/* =========================================================
   COLONNE GAUCHE
========================================================= */

.maintenance-importance-heading .section-label {
    display: block;

    margin-bottom: 18px;

    color: var(--blue-light);

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;

    text-transform: uppercase;
}

.maintenance-importance-heading h2 {
    max-width: 650px;

    color: var(--white);

    font-family: "Sora", "Inter", sans-serif;

    font-size: clamp(36px, 3.5vw, 52px);
    font-weight: 600;

    line-height: 1.08;
    letter-spacing: -1px;
}

.maintenance-importance-heading h2 span {
    color: var(--blue-light);
}


/* TEXTES SOUS LE TITRE */

.maintenance-importance-text {
    max-width: 600px;

    margin-top: 40px;
}

.maintenance-importance-text p {
    color: rgba(255, 255, 255, 0.58);

    font-size: 15px;
    line-height: 1.7;
}

.maintenance-importance-text p + p {
    margin-top: 22px;
}

.maintenance-importance-text strong {
    color: rgba(255, 255, 255, 0.82);
    font-weight: 600;
}


/* =========================================================
   COLONNE DROITE
========================================================= */

.maintenance-importance-content {
    padding-top: 54px;
}


/* LISTE */

.maintenance-importance-list {
    margin: 0;

    border-top:
        1px solid
        rgba(139, 185, 236, 0.18);

    list-style: none;
}

.maintenance-importance-list li {
    display: grid;

    grid-template-columns: 28px 1fr;

    gap: 14px;

    align-items: center;

    padding: 24px 0;

    border-bottom:
        1px solid
        rgba(139, 185, 236, 0.18);
}

.maintenance-importance-check {
    color: var(--blue-light);

    font-size: 18px;
    font-weight: 700;
}

.maintenance-importance-list svg {
    color: var(--blue-light);

    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.maintenance-importance-list p {
    margin: 0;

    color: rgba(255, 255, 255, 0.68);

    font-size: 14px;
    line-height: 1.55;
}

.maintenance-importance-list strong {
    color: var(--white);
    font-weight: 600;
}

/* Page Maintenance - service apres-vente */
.maintenance-intro-section {
    padding: 70px 0 120px;
    background: #171d25;
    color: var(--white);
}

.maintenance-intro {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(500px, 0.85fr);
    gap: clamp(70px, 7vw, 120px);
    align-items: center;
}

.maintenance-intro-copy {
    max-width: 760px;
}

.maintenance-intro-copy .section-label {
    margin: 0 0 18px;
    color: var(--blue-light);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.maintenance-intro-copy h2 {
    max-width: 780px;
    margin-top: 16px;

    font-size: clamp(32px, 3vw, 46px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -1px;
}

.maintenance-intro-copy h2::after {
    content: "";
    display: block;
    width: 72px;
    height: 2px;
    margin: 28px 0 0;
    background: var(--blue-light);
}

.maintenance-intro-copy p:not(.section-label) {
    max-width: 690px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    line-height: 1.72;
    letter-spacing: 0;
}

.maintenance-intro-copy strong {
    color: var(--white);
    font-weight: 650;
}

/* COLONNE IMAGE */

.maintenance-intro-media {
    width: 100%;
    display: block;
}


/* GRANDE IMAGE UNIQUE */

.maintenance-intro-media img {
    display: block;

    width: 100%;
    height: 650px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
}

/* =========================================================
   PAGE MAINTENANCE - SOLUTIONS
========================================================= */

.maintenance-solutions-section {
    padding: 110px 0 120px;

    background:
        #18202a;

    color: var(--white);
}


/* =========================================================
   TITRE
========================================================= */

.maintenance-solutions-heading {
    max-width: 850px;

    margin: 0 auto 68px;

    text-align: center;
}

.maintenance-solutions-heading > span {
    display: block;

    margin-bottom: 16px;

    color: var(--blue-light);

    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;

    letter-spacing: 1px;
    text-transform: uppercase;
}

.maintenance-solutions-heading h2 {
    max-width: 760px;

    margin: 0 auto;

    color: var(--white);

    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(38px, 4vw, 58px);
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -1px;
}

.maintenance-solutions-heading p {
    max-width: 680px;

    margin: 22px auto 0;

    color:
        rgba(255, 255, 255, 0.62);

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   GRILLE
========================================================= */

.maintenance-solutions-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;

    align-items: stretch;
}


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

.maintenance-solution-card {
    position: relative;

    min-height: 430px;

    padding: 34px 32px 30px;

    display: flex;
    flex-direction: column;

    border:
        1px solid
        rgba(139, 185, 236, 0.16);

    border-radius: 12px;

    background:
        #1d2733;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.maintenance-solution-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(139, 185, 236, 0.36);

    background:
        #1e2b39;
}


/* =========================================================
   CARTE MISE EN AVANT
========================================================= */

.maintenance-solution-card--featured {
    border: 1px solid var(--blue);

    box-shadow:
        0 18px 45px
        rgba(21, 88, 166, 0.16);
}

.maintenance-solution-card--featured:hover {
    border-color: var(--blue-light);

    box-shadow:
        0 22px 50px
        rgba(21, 88, 166, 0.22);
}


/* BADGE */

.maintenance-solution-badge {
    position: absolute;

    top: 0;
    left: 50%;

    padding: 8px 16px;

    transform: translate(-50%, -50%);

    border-radius: 100px;

    background: var(--blue);
    color: var(--white);

    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.7px;
    text-transform: uppercase;

    white-space: nowrap;
}


/* =========================================================
   CONTENU
========================================================= */

.maintenance-solution-content h3 {
    color:
        var(--white);

    font-size: 24px;
    font-weight: 600;
    line-height: 1.15;

    letter-spacing: -0.6px;
}

.maintenance-solution-description {
    max-width: 350px;

    margin-top: 12px;

    color:
        rgba(255, 255, 255, 0.58);

    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   LISTE
========================================================= */

.maintenance-solution-list {
    display: grid;

    gap: 15px;

    margin-top: 28px;

    list-style: none;
}

.maintenance-solution-list li {
    display: grid;

    grid-template-columns:
        20px
        1fr;

    gap: 10px;

    align-items: start;

    color:
        rgba(255, 255, 255, 0.78);

    font-size: 14px;
    line-height: 1.45;
}

.maintenance-solution-list li > span {
    color:
        var(--blue-light);

    font-size: 15px;
    font-weight: 700;
}


/* CHECKS DE LA CARTE CENTRALE */

.maintenance-solution-card--featured
.maintenance-solution-list li > span {
    color: var(--blue-light);
}


/* =========================================================
   LIENS
========================================================= */

.maintenance-solution-link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    width: fit-content;

    margin-top: auto;
    padding-top: 34px;

    color:
        var(--blue-light);

    font-size: 13px;
    font-weight: 600;

    letter-spacing: 1px;

    text-decoration: none;

    transition:
        color 0.25s ease;
}

.maintenance-solution-link span {
    transition:
        transform 0.25s ease;
}

.maintenance-solution-link:hover {
    color:
        var(--white);
}

.maintenance-solution-link:hover span {
    transform:
        translateX(4px);
}


/* =========================================================
   BOUTON CARTE CENTRALE
========================================================= */

.maintenance-solution-button {
    min-height: 54px;

    margin-top: auto;
    padding: 0 26px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 100px;

    background: var(--blue);
    color: var(--white);

    font-family: "Sora", "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;

    text-decoration: none;

    box-shadow:
        0 10px 26px
        rgba(21, 88, 166, 0.18);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.maintenance-solution-button:hover {
    transform: translateY(-2px);

    background: var(--blue-dark);

    box-shadow:
        0 14px 32px
        rgba(21, 88, 166, 0.24);
}


/* Page Nous rejoindre - hero */
.product-page-join .product-page-hero-image {
    min-height: 460px;
}

.product-page-join .product-page-hero-bg {
    background:
        url("images/equipe_polytech_portrait.webp");
    background-size: cover;
    background-position: center;
    transform:
        scale(1.02);
}

.product-page-join .product-page-hero-overlay {
    background:
        linear-gradient(
            to bottom,
            rgba(var(--hero-end-rgb), 0.24) 0%,
            rgba(var(--hero-end-rgb), 0.48) 42%,
            rgba(var(--hero-end-rgb), 0.82) 86%,
            rgb(var(--hero-end-rgb)) 100%
        ),
        linear-gradient(
            90deg,
            rgba(4, 8, 13, 0.86) 0%,
            rgba(4, 8, 13, 0.52) 48%,
            rgba(4, 8, 13, 0.82) 100%
        );
}

.product-page-join .product-page-hero-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.product-page-join .product-page-hero h1 {
    max-width: 900px;
    margin: 0 auto;
    letter-spacing: -1px;
}

.product-page-join .product-page-actions {
    justify-content: center;
    margin-top: 32px;
}

/* Page Nous rejoindre - pourquoi choisir Poly-Tech */
.join-why-section {
    padding: 88px 0 104px;
    background: #171d25;
    color: var(--white);
    overflow: hidden;
}

.join-why {
    display: grid;
    grid-template-columns: minmax(280px, 0.42fr) minmax(0, 0.58fr);
    gap: clamp(48px, 7vw, 104px);
    align-items: center;
}

.join-section-heading span,
.join-application > div > span {
    display: inline-flex;
    color: var(--blue-light);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.join-section-heading h2,
.join-application h2 {
    max-width: 650px;
    margin: 16px 0 0;
    color: var(--white);
    font-family: var(--font-title);
    font-size: clamp(38px, 4vw, 64px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -1px;
}

.join-section-heading p {
    max-width: 520px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0;
}

.join-why-link {
    display: inline-flex;
    margin-top: 32px;
    color: var(--blue-light);
    font-size: 14px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
}

.join-why-link:hover {
    color: var(--white);
}

.join-why-points {
    display: grid;
    gap: 20px;
}

.join-why-content {
    position: relative;
    min-width: 0;
}

.join-why-points article {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 18px;
    min-width: 0;
    padding: 26px 0;
    border-top: 1px solid rgba(139, 185, 236, 0.16);
}

.join-why-points article:last-child {
    border-bottom: 1px solid rgba(139, 185, 236, 0.16);
}

.join-why-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--blue-light);
    border: 1px solid rgba(139, 185, 236, 0.28);
    background: rgba(23, 104, 196, 0.08);
}

.join-why-icon svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.join-why-points > article > span:not(.join-why-icon) {
    color: var(--blue-light);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.join-why-points h3 {
    margin: 0;
    color: var(--white);
    font-size: clamp(20px, 1.7vw, 26px);
    line-height: 1.15;
    font-weight: 650;
    letter-spacing: -1px;
}

.join-why-points p {
    max-width: 620px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 15px;
    line-height: 1.62;
    letter-spacing: 0;
}

/* Page Nous rejoindre - offres */
.join-offers-section {
    padding: 88px 0 104px;
    background: #1d2835;
    color: var(--white);
}

.join-offers-heading {
    display: block;
    max-width: 760px;
    margin-bottom: 48px;
}

.join-offers-heading span {
    color: var(--blue-light);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.join-offers-heading h2 {
    margin: 16px 0 0;
    color: var(--white);
    font-family: var(--font-title);
    font-size: clamp(40px, 4vw, 64px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -1px;
}

.join-offer-list {
    display: grid;
    gap: 16px;
    margin: 0;
}

.join-offer {
    display: grid;
    grid-template-columns: minmax(260px, 1.05fr) minmax(360px, 1.5fr) auto;
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
    padding: clamp(38px, 4vw, 58px) clamp(32px, 5vw, 72px);
    border-radius: 14px;
    background: #171d25;
    border: 1px solid rgba(139, 185, 236, 0.14);
}

.join-offer-main {
    min-width: 0;
}

.join-offer-main h3 {
    max-width: 300px;
    margin: 0;
    color: var(--white);
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -1px;
    text-transform: uppercase;
}

.join-offer-main p {
    max-width: 330px;
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0;
}

.join-offer-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    gap: clamp(22px, 3vw, 48px);
    align-items: center;
    text-align: center;
}

.join-offer-meta > div {
    display: grid;
    justify-items: center;
    gap: 7px;
    min-width: 0;
}

.join-offer-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    color: var(--blue-light);
}

.join-offer-icon svg {
    width: 32px;
    height: 32px;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.join-offer-meta strong,
.join-offer-meta span {
    display: block;
    color: var(--white);
    font-size: 17px;
    line-height: 1.35;
    letter-spacing: 0;
}

.join-offer-meta strong {
    font-weight: 700;
}

.join-offer-meta span {
    margin-top: 0;
    font-weight: 650;
}

.join-offer-button {
    min-height: 54px;
    padding: 0 26px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    border: 0;
    border-radius: 100px;

    background: var(--blue);
    color: var(--white);

    font-family: "Sora", "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;

    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;

    box-shadow:
        0 10px 26px
        rgba(21, 88, 166, 0.18);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.join-offer-button:hover {
    transform: translateY(-2px);

    background: var(--blue-dark);
    color: var(--white);

    box-shadow:
        0 14px 32px
        rgba(21, 88, 166, 0.24);
}

/* Page Nous rejoindre - candidature */
.join-application-section {
    padding: 96px 0 112px;
    background: #171d25;
    color: var(--white);
}

.join-application {
    max-width: 760px;
}

.join-application-heading {
    margin: 0 auto 32px;
    text-align: center;
}

.join-application-heading span {
    display: inline-flex;
    color: var(--blue-light);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.join-application-heading h2 {
    margin: 14px 0 0;
    color: var(--white);
    font-family: var(--font-title);
    font-size: clamp(34px, 3.6vw, 54px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -1px;
}

.join-application-heading p {
    max-width: 560px;
    margin: 16px auto 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0;
}

.join-application-form {
    display: grid;
    gap: 16px;
    padding: clamp(28px, 4vw, 48px);
    border-radius: 14px;
    background: #1d2835;
    border: 1px solid rgba(139, 185, 236, 0.14);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
}

.join-form-field {
    display: grid;
    gap: 8px;
}

.join-form-field label {
    color: var(--white);
    font-size: 16px;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: 0;
}

.join-form-field input,
.join-form-field textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    background: transparent;
    color: var(--white);
    font: inherit;
    font-size: 16px;
    letter-spacing: 0;
    padding: 13px 15px;
    outline: none;
    transition: border-color 0.25s ease;
}

.join-form-field textarea {
    min-height: 150px;
    resize: vertical;
}

.join-form-field input::placeholder,
.join-form-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.42);
}

.join-form-field input:focus,
.join-form-field textarea:focus {
    border-color: var(--blue-light);
}

.join-form-field input[type="file"] {
    color: rgba(255, 255, 255, 0.64);
    cursor: pointer;
}

.join-form-submit {
    min-height: 54px;
    padding: 0 26px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-top: 4px;
    border: 0;
    border-radius: 100px;

    background: var(--blue);
    color: var(--white);

    font-family: "Sora", "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;

    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;

    box-shadow:
        0 10px 26px
        rgba(21, 88, 166, 0.18);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.join-form-submit:hover {
    transform: translateY(-2px);

    background: var(--blue-dark);
    color: var(--white);

    box-shadow:
        0 14px 32px
        rgba(21, 88, 166, 0.24);
}

.join-application .wpcf7,
.join-application .wpcf7 form {
    width: 100%;
}

.join-application .wpcf7 form {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.join-application .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.join-application .wpcf7 label {
    display: grid;
    gap: 8px;

    color: var(--white);

    font-size: 16px;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: 0;
}

.join-application .wpcf7 input:not([type="submit"]),
.join-application .wpcf7 textarea {
    width: 100%;

    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    outline: none;

    background: transparent;
    color: var(--white);

    font: inherit;
    font-size: 16px;
    letter-spacing: 0;

    padding: 13px 15px;

    transition: border-color 0.25s ease;
}

.join-application .wpcf7 textarea {
    min-height: 150px;
    resize: vertical;
}

.join-application .wpcf7 input::placeholder,
.join-application .wpcf7 textarea::placeholder {
    color: rgba(255, 255, 255, 0.42);
}

.join-application .wpcf7 input:focus,
.join-application .wpcf7 textarea:focus {
    border-color: var(--blue-light);
}

.join-application .wpcf7 input[type="file"] {
    color: rgba(255, 255, 255, 0.64);
    cursor: pointer;
}

.join-application .wpcf7 input[type="submit"],
.join-application .wpcf7 button[type="submit"] {
    min-height: 54px;
    padding: 0 26px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    width: fit-content;
    margin-top: 4px;

    border: 0;
    border-radius: 100px;

    background: var(--blue);
    color: var(--white);

    font-family: "Sora", "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;

    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;

    box-shadow:
        0 10px 26px
        rgba(21, 88, 166, 0.18);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.join-application .wpcf7 input[type="submit"]:hover,
.join-application .wpcf7 button[type="submit"]:hover {
    transform: translateY(-2px);

    background: var(--blue-dark);
    color: var(--white);

    box-shadow:
        0 14px 32px
        rgba(21, 88, 166, 0.24);
}

.join-application .wpcf7-spinner {
    margin:
        0
        0
        0
        12px;
}

.join-application .wpcf7-not-valid-tip {
    margin-top: 7px;

    color: #ff9b9b;

    font-size: 12px;
    line-height: 1.4;
}

.join-application .wpcf7-response-output {
    margin:
        18px
        0
        0 !important;

    padding:
        14px
        16px !important;

    border-radius: 8px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 13px;
    line-height: 1.5;
}


/* =========================================================
   PAGE OFFRE - TECHNICIEN DE MAINTENANCE
========================================================= */

.job-page {
    overflow-x: hidden;
    background: #171d25;
    color: var(--white);
}

.job-page * {
    box-sizing: border-box;
}

.job-hero {
    position: relative;
    overflow: hidden;

    min-height: 560px;

    display: flex;
    align-items: center;

    background: #19202b;
}

.job-hero-bg,
.job-hero-overlay {
    position: absolute;
    inset: 0;
}

.job-hero-bg {
    background:
        url("images/maintenance_techniciens.webp")
        center
        42% / cover
        no-repeat;
}

.job-hero-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(var(--hero-end-rgb), 0.2) 0%,
            rgb(var(--hero-end-rgb)) 100%
        ),
        linear-gradient(
            90deg,
            rgba(5, 6, 7, 0.94) 0%,
            rgba(5, 6, 7, 0.82) 44%,
            rgba(5, 6, 7, 0.5) 100%
        );
}

.job-hero-inner {
    position: relative;
    z-index: 2;
}

.job-hero-content {
    max-width: 760px;
}

.job-hero-content span,
.job-intro-content span,
.job-detail-block > span,
.job-section-heading span,
.job-apply > span {
    display: inline-flex;
    color: var(--blue-light);
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.job-hero-content h1 {
    max-width: 760px;
    margin: 18px 0 0;
    color: var(--white);
    font-family: var(--font-title);
    font-size: clamp(48px, 6vw, 86px);
    line-height: 0.98;
    letter-spacing: -0.06em;
}

.job-hero-content p {
    max-width: 620px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 18px;
    line-height: 1.65;
}

.job-hero-actions,
.job-apply-actions {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.job-summary-section {
    padding: 0 0 82px;
    background: #171d25;
}

.job-summary {
    position: relative;
    z-index: 3;
    margin-top: -56px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.job-summary article {
    min-height: 116px;
    padding: 24px;
    border: 1px solid rgba(9, 92, 126, 0.72);
    background: linear-gradient(180deg, rgba(17, 25, 35, 0.96), rgba(7, 10, 15, 0.96));
}

.job-summary span {
    display: block;
    color: var(--blue-light);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.job-summary strong {
    display: block;
    margin-top: 12px;
    color: var(--white);
    font-size: 18px;
    line-height: 1.24;
}

.job-intro-section,
.job-benefits-section {
    padding: 94px 0;
    background: #1d2835;
}

.job-intro {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(360px, 0.72fr);
    gap: clamp(42px, 6vw, 90px);
    align-items: center;
}

.job-intro-content h2,
.job-detail-block h2,
.job-section-heading h2,
.job-apply h2 {
    margin: 16px 0 0;
    color: var(--white);
    font-family: var(--font-title);
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.04;
    letter-spacing: -0.055em;
}

.job-intro-content p,
.job-apply p {
    max-width: 650px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 16px;
    line-height: 1.68;
}

.job-intro-visual {
    overflow: hidden;
    border: 1px solid rgba(139, 185, 236, 0.18);
}

.job-intro-visual img {
    width: 100%;
    height: clamp(430px, 38vw, 620px);
    display: block;
    object-fit: cover;
    object-position: center;
}

.job-details-section {
    padding: 96px 0;
    background: #171d25;
}

.job-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.job-detail-block {
    padding: clamp(30px, 4vw, 52px);
    border: 1px solid rgba(9, 92, 126, 0.72);
    background: #1b2632;
}

.job-detail-block ul {
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    gap: 14px;
    list-style: none;
}

.job-detail-block li {
    position: relative;
    padding-left: 24px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15.5px;
    line-height: 1.58;
}

.job-detail-block li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue-light);
}

.job-section-heading {
    max-width: 720px;
    margin-bottom: 42px;
}

.job-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.job-benefits-grid article {
    min-height: 210px;
    padding: 30px;
    border: 1px solid rgba(9, 92, 126, 0.72);
    background: rgba(5, 6, 7, 0.42);
}

.job-benefits-grid h3 {
    margin: 0;
    color: var(--white);
    font-size: 22px;
    line-height: 1.12;
}

.job-benefits-grid p {
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 15px;
    line-height: 1.58;
}

.job-apply-section {
    padding: 92px 0 108px;
    background: #171d25;
}

.job-apply {
    max-width: 820px;
    text-align: center;
}

.job-apply > span {
    justify-content: center;
}

.job-apply p {
    margin-left: auto;
    margin-right: auto;
}

.job-apply-actions {
    justify-content: center;
}

@media (max-width: 1024px) {

    .job-hero {
        min-height: 500px;
    }

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

    .job-intro {
        grid-template-columns: 1fr;
    }

    .job-intro-visual img {
        height: clamp(360px, 54vw, 520px);
    }

    .job-details,
    .job-benefits-grid {
        grid-template-columns: 1fr;
    }

    .job-benefits-grid article {
        min-height: 0;
    }
}

@media (max-width: 620px) {

    .job-hero {
        min-height: 430px;
    }

    .job-hero-content {
        text-align: center;
    }

    .job-hero-content h1 {
        font-size: 38px;
    }

    .job-hero-content p {
        font-size: 14px;
    }

    .job-hero-actions,
    .job-apply-actions {
        justify-content: center;
    }

    .job-summary-section {
        padding-bottom: 52px;
    }

    .job-summary {
        margin-top: -38px;
        grid-template-columns: 1fr;
    }

    .job-summary article {
        min-height: 0;
        padding: 20px;
    }

    .job-intro-section,
    .job-details-section,
    .job-benefits-section,
    .job-apply-section {
        padding: 54px 0;
    }

    .job-intro-content h2,
    .job-detail-block h2,
    .job-section-heading h2,
    .job-apply h2 {
        font-size: 28px;
    }

    .job-intro-content p,
    .job-detail-block li,
    .job-benefits-grid p,
    .job-apply p {
        font-size: 13px;
    }

    .job-intro-visual img {
        height: 330px;
    }

    .job-detail-block,
    .job-benefits-grid article {
        padding: 24px 20px;
    }
}

.job-hero-simple {
    min-height: 430px;
    background:
        linear-gradient(
            135deg,
            rgba(5, 6, 7, 0.96),
            rgba(17, 25, 35, 0.96)
        );
}

.job-hero-simple .job-hero-content {
    margin: 0 auto;
    text-align: center;
}

.job-hero-simple .job-hero-content p {
    margin-left: auto;
    margin-right: auto;
}

.job-page-technician .product-page-hero-image {
    min-height: 460px;
}

.job-page-technician .product-page-hero-bg {
    background-image: none;
    background: #0c3b73;
    transform: none;
}

.job-page-technician .product-page-hero-overlay {
    background:
        linear-gradient(
            to bottom,
            rgba(var(--hero-end-rgb), 0.26) 0%,
            rgba(var(--hero-end-rgb), 0.56) 45%,
            rgb(var(--hero-end-rgb)) 100%
        );
}

.job-page-technician .product-page-hero-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.job-page-technician .product-page-hero h1 {
    max-width: 900px;
    margin: 0 auto;
    letter-spacing: -1px;
}

.job-page-technician .product-page-actions {
    justify-content: center;
    margin-top: 32px;
}

.job-old-section {
    padding:
        clamp(62px, 7vw, 96px)
        0;

    background: #171d25;
    color: var(--white);
}

.job-old-section-dark {
    background: #171d25;
}

.job-old-section-blue {
    background: #1d2835;
}

.job-old-intro-section {
    padding:
        clamp(70px, 8vw, 120px)
        0;

    background: #171d25;
}

.job-page-technician .job-old-section:not(.job-old-intro-section):not(.job-old-section-dark):not(.job-old-section-blue) {
    background: #1d2835;
}

.job-old-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 0.88fr)
        minmax(360px, 0.72fr);
    gap:
        clamp(42px, 6vw, 86px);
    align-items: center;
}

.job-old-intro-section .job-old-layout {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 0.58fr);
    gap:
        clamp(58px, 7vw, 120px);
}

.job-old-label {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 18px;

    color: var(--blue-light);

    font-size: 12px;
    font-weight: 650;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.job-old-label::after {
    content: "";

    width: 52px;
    height: 1px;

    background: currentColor;
    opacity: 0.7;
}

.job-old-content h2,
.job-old-card h2,
.job-old-apply h2,
.job-old-why h2 {
    margin: 0;

    color: var(--white);

    font-family: var(--font-title);
    font-size:
        clamp(34px, 4vw, 56px);
    line-height: 1.04;
    letter-spacing: -0.055em;
}

.job-old-intro-section .job-old-content h2 {
    max-width: 680px;
    font-size:
        clamp(36px, 3.8vw, 54px);
    line-height: 1.1;
    letter-spacing: -1px;
}

.job-old-intro-section .job-old-content h2::after {
    content: "";

    display: block;

    width: 72px;
    height: 2px;

    margin:
        28px
        0
        0;

    background: var(--blue-light);
}

.job-old-content p,
.job-old-card p,
.job-old-apply p,
.job-old-reasons p {
    color:
        rgba(255, 255, 255, 0.68);

    font-size: 16px;
    line-height: 1.68;
}

.job-old-content p {
    max-width: 680px;

    margin:
        22px
        0
        0;
}

.job-old-image {
    overflow: hidden;

    border-radius: 14px;
}

.job-old-image img {
    width: 100%;
    height:
        clamp(430px, 38vw, 620px);

    display: block;

    object-fit: cover;
    object-position: center;
}

.job-old-intro-section .job-old-image img {
    height:
        clamp(340px, 30vw, 460px);
}

.job-old-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap:
        clamp(18px, 2vw, 28px);
}

.job-old-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height: 340px;

    padding:
        clamp(36px, 4vw, 56px)
        clamp(28px, 3.2vw, 44px);

    display: flex;
    flex-direction: column;
    align-items: center;

    border:
        1px solid
        rgba(255, 255, 255, 0.58);

    border-radius: 22px;

    background:
        rgba(15, 20, 28, 0.92);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08);

    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease;
}

.job-old-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(255, 255, 255, 0.72);

    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.36),
        inset 0 -1px 0 rgba(255, 255, 255, 0.16),
        inset 1px 0 0 rgba(255, 255, 255, 0.16),
        inset -1px 0 0 rgba(255, 255, 255, 0.16);
}

.job-old-card-icon {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 78px;
    height: 78px;

    border-radius: 50%;

    color: var(--blue-light);
    background:
        rgba(139, 185, 236, 0.05);

    box-shadow:
        inset 0 0 0 1px rgba(139, 185, 236, 0.18);

    transition:
        color 0.28s ease,
        background 0.28s ease;
}

.job-old-card-icon svg {
    width: 28px;
    height: 28px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.job-old-card:hover .job-old-card-icon {
    color: var(--white);
    background: var(--blue);
}

.job-old-card h2 {
    max-width: 360px;

    margin-top: 34px;

    text-align: center;

    font-size:
        clamp(26px, 2.6vw, 36px);
    line-height: 1.04;
}

.job-old-card p {
    max-width: 430px;

    margin:
        22px
        auto
        0;

    text-align: center;
}

.job-old-card ul {
    margin:
        30px
        0
        0;
    padding: 0;

    display: grid;
    gap: 14px;
    justify-items: start;

    list-style: none;
}

.job-old-card li {
    position: relative;

    padding-left: 24px;

    color:
        rgba(255, 255, 255, 0.74);

    font-size: 15.5px;
    line-height: 1.58;
}

.job-old-card li::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0.72em;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--blue-light);
}

.job-old-apply {
    position: relative;
    isolation: isolate;

    max-width: 860px;
    text-align: center;
}

.job-old-apply-section {
    position: relative;
    overflow: hidden;

    background: #1d2835;
}

.job-old-apply-content {
    position: relative;
    z-index: 1;

    max-width: 680px;
    margin:
        0
        auto;
}

.job-old-apply-section .job-old-apply h2 {
    font-size:
        clamp(34px, 3.4vw, 48px);
    line-height: 1.1;
}

.job-old-apply p {
    max-width: 560px;

    margin:
        18px
        auto
        0;
}

.job-old-actions {
    margin-top: 30px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.job-old-why {
    text-align: center;
}

.job-old-reasons {
    margin-top: 42px;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 16px;

    text-align: left;
}

.job-old-reasons article {
    padding: 28px;

    border:
        1px solid
        rgba(139, 185, 236, 0.22);

    background:
        rgba(11, 14, 19, 0.32);
}

.job-old-reasons h3 {
    margin: 0;

    color: var(--white);

    font-size: 21px;
    line-height: 1.15;
}

.job-old-reasons h3::after {
    content: "";

    display: block;

    width: 46px;
    height: 2px;

    margin:
        16px
        0
        0;

    background: var(--blue-light);
}

.job-old-reasons p {
    margin:
        16px
        0
        0;
}

@media (max-width: 1024px) {

    .job-page-technician .product-page-hero-image {
        min-height: 430px;
    }

    .job-page-technician .product-page-hero-image > .container {
        min-height: inherit;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .job-page-technician .product-page-hero-content {
        max-width: 720px;
    }

    .job-page-technician .product-page-hero h1 {
        font-size:
            clamp(42px, 6vw, 62px);
        line-height: 1.03;
        letter-spacing: 0;
    }

    .job-page-technician .product-page-actions {
        margin-top: 24px;
    }

    .job-old-layout,
    .job-old-grid,
    .job-old-apply,
    .job-old-reasons {
        grid-template-columns: 1fr;
    }

    .job-old-intro-section .job-old-layout {
        grid-template-columns: 1fr;
    }

    .job-old-layout,
    .job-old-grid,
    .job-old-reasons {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }

    .job-old-apply {
        max-width: 760px;
    }

    .job-old-image img {
        height:
            clamp(340px, 58vw, 520px);
    }

    .job-old-intro-section .job-old-image img {
        height:
            clamp(360px, 58vw, 520px);
    }

}

@media (max-width: 620px) {

    .job-page-technician .product-page-hero-image {
        min-height: 310px;
    }

    .job-page-technician .product-page-hero-content {
        max-width: 300px;
    }

    .job-page-technician .product-page-hero h1 {
        font-size: 28px;
        line-height: 1.06;
    }

    .job-page-technician .product-page-actions {
        margin-top: 15px;
    }

    .job-page-technician .button-main {
        min-height: 36px;

        padding:
            0
            15px;

        font-size: 10px;
    }

    .job-hero-simple {
        min-height: 340px;
    }

    .job-old-section {
        padding:
            46px
            0;
    }

    .job-page-technician .product-page-hero-content,
    .job-old-content,
    .job-old-why,
    .job-old-apply-content {
        text-align: center;
    }

    .job-old-content h2,
    .job-old-card h2,
    .job-old-apply h2,
    .job-old-why h2 {
        font-size: 28px;
    }

    .job-old-content p,
    .job-old-card p,
    .job-old-card li,
    .job-old-apply p,
    .job-old-reasons p {
        font-size: 13px;
    }

    .job-old-card,
    .job-old-reasons article {
        padding: 24px 20px;
    }

    .job-old-layout,
    .job-old-grid,
    .job-old-reasons,
    .job-old-apply {
        width: min(100%, 340px);
        max-width: 340px;
    }

    .job-old-intro-section .job-old-layout {
        width: min(100%, 340px);
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
    }

    .job-old-label {
        justify-content: center;
    }

    .job-old-content p,
    .job-old-card p,
    .job-old-apply p {
        max-width: 310px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.55;
    }

    .job-old-why h2 {
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.08;
    }

    .job-old-reasons {
        gap: 12px;
        text-align: center;
    }

    .job-old-reasons h3 {
        font-size: 18px;
        line-height: 1.18;
    }

    .job-old-reasons h3::after,
    .job-old-intro-section .job-old-content h2::after {
        margin-left: auto;
        margin-right: auto;
    }

    .job-old-card {
        min-height: 0;
        border-radius: 16px;
    }

    .job-old-card-icon {
        width: 52px;
        height: 52px;
    }

    .job-old-card-icon svg {
        width: 20px;
        height: 20px;
    }

    .job-old-card h2 {
        margin-top: 18px;
        font-size: 22px;
    }

    .job-old-card ul {
        width: 100%;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
        gap: 10px;
    }

    .job-old-card li {
        padding-left: 18px;
        line-height: 1.5;
    }

    .job-old-image img {
        height: 320px;
    }

    .job-old-intro-section {
        padding:
            50px
            0;
    }

    .job-old-label {
        font-size: 10px;
        letter-spacing: 0.08em;
    }

    .job-old-intro-section .job-old-content h2 {
        font-size: 28px;
    }

    .job-old-intro-section .job-old-content h2::after {
        width: 56px;
        margin-top: 20px;
    }

    .job-old-intro-section .job-old-image img {
        height: 300px;
    }

}

@media (max-width: 390px) {

    .job-page-technician .product-page-hero-image {
        min-height: 282px;
    }

    .job-page-technician .product-page-hero-content {
        max-width: 260px;
    }

    .job-page-technician .product-page-hero h1 {
        font-size: 24px;
    }

    .job-page-technician .button-main {
        min-height: 32px;

        padding:
            0
            12px;

        font-size: 9px;
    }

    .job-old-section {
        padding:
            38px
            0;
    }

    .job-old-layout,
    .job-old-grid,
    .job-old-reasons,
    .job-old-apply {
        width: min(100%, 300px);
        max-width: 300px;
    }

    .job-old-intro-section .job-old-layout {
        width: min(100%, 300px);
        max-width: 300px;
    }

    .job-old-content h2,
    .job-old-why h2 {
        font-size: 24px;
        line-height: 1.1;
    }

    .job-old-card h2 {
        font-size: 20px;
    }

    .job-old-content p,
    .job-old-card p,
    .job-old-card li,
    .job-old-apply p,
    .job-old-reasons p {
        font-size: 12px;
    }
}

/* Page À propos - introduction */
.about-intro-section {
    background: #171d25;
    color: var(--white);
    padding: 80px 0 72px;
}

.about-intro {
    max-width: 1080px;
}

.about-intro-label {
    margin: 0 0 12px;
    color: var(--blue-light);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.about-intro h2 {
    max-width: 620px;
    margin: 0;
    font-family: var(--font-title);
    font-size: clamp(34px, 3.5vw, 56px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -1px;
}

.about-timeline {
    position: relative;

    max-width: 860px;

    margin-top: 48px;
    margin-left: auto;
    margin-right: auto;
}

.about-timeline::before {
    content: "";

    position: absolute;

    left: 22px;
    top: 22px;
    bottom: 22px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            rgba(139, 185, 236, 0),
            rgba(139, 185, 236, 0.52) 12%,
            rgba(139, 185, 236, 0.52) 88%,
            rgba(139, 185, 236, 0)
        );
}

.about-timeline-item {
    position: relative;

    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 24px;

    padding: 0 0 32px;
}

.about-timeline-item:last-child {
    padding-bottom: 0;
}

.about-timeline-marker {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    border: 1px solid rgba(139, 185, 236, 0.58);
    border-radius: 50%;

    background: #171d25;
    color: var(--blue-light);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.about-timeline-content {
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(139, 185, 236, 0.12);
}

.about-timeline-item:last-child .about-timeline-content {
    padding-bottom: 0;
    border-bottom: 0;
}

.about-timeline-content h3 {
    margin: 0;

    color: var(--white);

    font-family: var(--font-title);
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -1px;
}

.about-timeline-content p {
    max-width: 720px;

    margin: 12px 0 0;

    color: rgba(255, 255, 255, 0.72);

    font-size: 15px;
    line-height: 1.62;
    letter-spacing: 0;
}

.about-timeline-content strong {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 700;
}

/* Page À propos - équipe administrative */
.about-admin-section {
    background: #171d25;
    color: var(--white);
    padding: 64px 0;
}

.about-admin {
    display: grid;
    grid-template-columns: minmax(460px, 0.92fr) minmax(360px, 0.7fr);
    gap: clamp(64px, 8vw, 128px);
    align-items: center;
    max-width: 1180px;
}

.about-admin-photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 56px;
}

.about-admin-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 0.74;
    overflow: hidden;
    border-radius: 12px;
    background: #1d2835;
}

.about-admin-photo--olivier {
    top: auto;
    left: auto;
}

.about-admin-photo--elodie {
    top: auto;
    left: auto;
}

.about-admin-photo--agnes {
    top: auto;
    left: auto;
}

.about-admin-photo--martine {
    top: auto;
    left: auto;
}

.about-admin-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 280ms ease, transform 360ms ease;
}

.about-admin-img--hover {
    opacity: 0;
}

.about-admin-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.34) 42%,
        rgba(0, 0, 0, 0) 100%
    );
    opacity: 0;
    transition: opacity 280ms ease;
}

.about-admin-photo-caption {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 280ms ease, transform 280ms ease;
}

.about-admin-photo-caption h3 {
    margin: 0 0 8px;
    font-family: var(--font-title);
    font-size: 24px;
    line-height: 1;
    letter-spacing: -1px;
}

.about-admin-photo-caption p {
    margin: 0 0 16px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: 0;
}

.about-admin-photo-caption a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--primary-red);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
}

.about-admin-photo:hover .about-admin-img--base {
    opacity: 0;
}

.about-admin-photo:hover .about-admin-img--hover,
.about-admin-photo:hover::after,
.about-admin-photo:hover .about-admin-photo-caption {
    opacity: 1;
}

.about-admin-photo:hover .about-admin-img--hover {
    transform: scale(1.03);
}

.about-admin-photo:hover .about-admin-photo-caption {
    transform: translateY(0);
}

.about-admin-copy {
    max-width: 560px;
}

.about-admin-copy h2 {
    margin: 0 0 24px;
    font-family: var(--font-title);
    font-size: clamp(46px, 4vw, 66px);
    line-height: 1.12;
    letter-spacing: -1px;
    font-weight: 600;
}

.about-admin-copy h2::after {
    content: "";
    display: block;
    width: 64px;
    height: 2px;
    margin-top: 24px;
    background: var(--blue);
}

.about-admin-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 18px;
    line-height: 1.5;
    font-weight: 650;
    letter-spacing: 0;
}

/* Page À propos - équipe commerciale */
.about-commercial-section {
    background: #171d25;
    color: var(--white);
    padding: 64px 0;
}

.about-commercial {
    display: grid;
    grid-template-columns: minmax(360px, 0.7fr) minmax(260px, 0.46fr);
    gap: clamp(64px, 8vw, 128px);
    align-items: center;
    justify-content: center;
    max-width: 1180px;
}

.about-commercial-copy {
    max-width: 560px;
}

.about-commercial-copy h2 {
    margin: 0 0 24px;
    font-family: var(--font-title);
    font-size: clamp(46px, 4vw, 66px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -1px;
}

.about-commercial-copy h2::after {
    content: "";
    display: block;
    width: 64px;
    height: 2px;
    margin-top: 24px;
    background: var(--blue);
}

.about-commercial-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 18px;
    font-weight: 650;
    line-height: 1.5;
    letter-spacing: 0;
}

.about-commercial-photo {
    position: relative;
    width: clamp(250px, 20vw, 340px);
    aspect-ratio: 0.74;
    overflow: hidden;
    border-radius: 12px;
    background: #1d2835;
}

.about-commercial-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 280ms ease, transform 360ms ease;
}

.about-commercial-img--hover {
    opacity: 0;
}

.about-commercial-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.32) 44%,
        rgba(0, 0, 0, 0) 100%
    );
    opacity: 0;
    transition: opacity 280ms ease;
}

.about-commercial-photo-caption {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 280ms ease, transform 280ms ease;
}

.about-commercial-photo-caption h3 {
    margin: 0 0 8px;
    font-family: var(--font-title);
    font-size: 24px;
    line-height: 1;
    letter-spacing: -1px;
}

.about-commercial-photo-caption p {
    margin: 0 0 16px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: 0;
}

.about-commercial-photo-caption a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--primary-red);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
}

.about-commercial-photo:hover .about-commercial-img--base {
    opacity: 0;
}

.about-commercial-photo:hover .about-commercial-img--hover,
.about-commercial-photo:hover::after,
.about-commercial-photo:hover .about-commercial-photo-caption {
    opacity: 1;
}

.about-commercial-photo:hover .about-commercial-img--hover {
    transform: scale(1.03);
}

.about-commercial-photo:hover .about-commercial-photo-caption {
    transform: translateY(0);
}

/* Page À propos - équipe technique */
.about-technical-section {
    background: #171d25;
    color: var(--white);
    padding: 64px 0 96px;
}

.about-technical {
    display: grid;
    grid-template-columns: minmax(460px, 0.92fr) minmax(360px, 0.7fr);
    gap: clamp(64px, 8vw, 128px);
    align-items: center;
    max-width: 1180px;
}

.about-technical-photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 56px;
}

.about-technical-photo {
    position: relative;
    aspect-ratio: 0.74;
    overflow: hidden;
    border-radius: 12px;
    background: #1d2835;
}

.about-technical-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 280ms ease, transform 360ms ease;
}

.about-technical-img--hover {
    opacity: 0;
}

.about-technical-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.32) 44%,
        rgba(0, 0, 0, 0) 100%
    );
    opacity: 0;
    transition: opacity 280ms ease;
}

.about-technical-photo-caption {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 280ms ease, transform 280ms ease;
}

.about-technical-photo-caption h3 {
    margin: 0 0 8px;
    font-family: var(--font-title);
    font-size: 24px;
    line-height: 1;
    letter-spacing: -1px;
}

.about-technical-photo-caption p {
    margin: 0 0 16px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: 0;
}

.about-technical-photo-caption a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--primary-red);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
}

.about-technical-photo:hover .about-technical-img--base {
    opacity: 0;
}

.about-technical-photo:hover .about-technical-img--hover,
.about-technical-photo:hover::after,
.about-technical-photo:hover .about-technical-photo-caption {
    opacity: 1;
}

.about-technical-photo:hover .about-technical-img--hover {
    transform: scale(1.03);
}

.about-technical-photo:hover .about-technical-photo-caption {
    transform: translateY(0);
}

.about-technical-copy {
    max-width: 560px;
}

.about-technical-copy h2 {
    margin: 0 0 24px;
    font-family: var(--font-title);
    font-size: clamp(46px, 4vw, 66px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -1px;
}

.about-technical-copy h2::after {
    content: "";
    display: block;
    width: 64px;
    height: 2px;
    margin-top: 24px;
    background: var(--blue);
}

.about-technical-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 18px;
    font-weight: 650;
    line-height: 1.5;
    letter-spacing: 0;
}

.about-technical-copy p + p {
    margin-top: 24px;
}

.about-values-section {
    padding: 32px 0 96px;
    background: #171d25;
}

.about-values {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    width: 100%;

    overflow: hidden;
    border-top: 1px solid rgba(139, 185, 236, 0.12);
    border-bottom: 1px solid rgba(139, 185, 236, 0.12);
    border-radius: 0;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.015)
        );
}

.about-value {
    min-height: 176px;
    padding: 32px 24px 28px;
    text-align: center;
}

.about-value + .about-value {
    border-left: 1px solid rgba(139, 185, 236, 0.12);
}

.about-value-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    color: var(--blue-light);
}

.about-value-icon svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.about-value h2 {
    margin-top: 16px;
    color: var(--white);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 650;
    letter-spacing: -1px;
}

.about-value p {
    max-width: 190px;
    margin: 10px auto 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: 0;
}

.custom-universe-section {
    background: #151b23;
    color: var(--white);
    padding: var(--section-space) 0;
}

.custom-universe {
    display: grid;
    grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.45fr);
    gap: clamp(44px, 5vw, 78px);
    align-items: start;

    padding: 0;
}

.custom-universe-copy {
    position: relative;

    min-height:
        clamp(420px, 35vw, 560px);

    display: flex;
    flex-direction: column;
    padding-top: clamp(42px, 5vw, 82px);
}

.custom-universe-kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
    color: var(--blue-light);
    font-family: "Sora", "Inter", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.custom-universe-kicker::after {
    content: "";
    width: 42px;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}

.custom-universe h2 {
    max-width: 360px;
    margin: 0;
    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(34px, 3.2vw, 52px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.custom-universe h2::after {
    content: "";
    display: block;
    width: 64px;
    height: 2px;
    margin-top: 22px;
    background: var(--blue);
}

.custom-universe p {
    max-width: 350px;
    margin: 28px 0 0;
    color: rgba(239, 244, 249, 0.68);
    font-family: "Sora", "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.75;
}

.custom-universe-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.custom-universe-image {
    position: relative;
    min-height: clamp(420px, 35vw, 560px);
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(139, 185, 236, 0.14);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
}

.custom-universe-image-wide {
    grid-column: 1 / -1;
}

.custom-universe-image-small {
    width:
        min(100%, 270px);
    min-height:
        clamp(140px, 13vw, 190px);

    margin-top: 58px;
    margin-left: clamp(34px, 5vw, 92px);

    border-radius: 16px;
}

.custom-universe-image img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    display: block;
    object-fit: cover;
    filter: saturate(0.96);
    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}

.custom-universe-image:hover img {
    transform: scale(1.035);
    filter: saturate(1);
}

.custom-universe-image-wide img,
.custom-universe-image-wide:hover img {
    transform: none !important;
    filter: saturate(0.96) !important;
    transition: none !important;
}

.custom-visual-section {
    background: #171d26;
    color: var(--white);
    padding: var(--section-space) 0;
}

.custom-visual {
    display: grid;
    grid-template-columns: minmax(300px, 0.88fr) minmax(0, 1fr);
    gap: clamp(48px, 6vw, 96px);
    align-items: center;
}

.custom-visual-media {
    display: grid;
    gap: 16px;
}

.custom-visual-image {
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.custom-visual-image img {
    width: 100%;
    height: clamp(220px, 19vw, 320px);
    display: block;
    object-fit: cover;
    filter: saturate(0.98);
}

.custom-visual-content {
    max-width: 590px;
}

.custom-visual-content h2 {
    margin: 0;
    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(38px, 3.5vw, 62px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -1px;
}

.custom-visual-content p {
    margin: 32px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(16px, 1.1vw, 18px);
    line-height: 1.7;
}

.custom-visual-content .button-main {
    margin-top: 32px;
    background: var(--blue);
}

.custom-visual-content .button-main:hover {
    background: var(--blue-dark);
}

.custom-partners-section {
    background: #151b23;
    color: var(--white);
    padding: var(--space-lg) 0 var(--section-space);
}

.custom-partners-heading {
    max-width: 760px;
    margin: 0 auto 48px;
    text-align: center;
}

.custom-partners-heading h2 {
    margin: 0;
    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(34px, 3.5vw, 58px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -1px;
}

.custom-partners-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(40px, 6vw, 88px);
}

.custom-partner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 0;
    text-align: center;
}

.custom-partner + .custom-partner {
    padding-left: 0;
}

.custom-partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    width: 100%;
}

.custom-partner-logo img {
    max-width: min(100%, 230px);
    max-height: 105px;
    display: block;
    object-fit: contain;
}

.custom-partner-text {
    max-width: 660px;
}

.custom-partner-text h3 {
    margin: 0;
    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(24px, 2vw, 34px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -1px;
}

.custom-partner-text p {
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-family: "Sora", "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.65;
}

.custom-financing-section {
    position: relative;
    overflow: hidden;
    background: #1d2835;
    color: var(--white);
    padding: 64px 0 82px;
}

.custom-financing {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 1120px);
    padding-inline: clamp(24px, 4vw, 72px);

    text-align: center;
}

.custom-financing-content {
    max-width: 760px;

    margin:
        0
        auto;
}

.custom-financing-content .section-label {
    margin-bottom: 16px;
}

.custom-financing-content h2 {
    margin: 0;
    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(28px, 2.4vw, 42px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -1px;
}

.custom-financing-content h2 span {
    color: var(--blue-light);
}

.custom-financing-content p {
    max-width: 650px;
    margin:
        16px
        auto
        0;
    color: rgba(255, 255, 255, 0.78);
    font-family: "Sora", "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.65;
}

.custom-financing-button {
    justify-self: end;
    white-space: nowrap;
}

.custom-realisations-section {
    background: #151b23;
    color: var(--white);
    padding: 72px 0 96px;
}

.custom-realisations-heading {
    max-width: 820px;
    margin: 0 auto 42px;
    text-align: center;
}

.custom-realisations-heading h2 {
    margin: 16px 0 0;
    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(34px, 3.2vw, 56px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -1px;
}

.custom-realisations-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.5fr)
        minmax(0, 1fr);
    gap: clamp(10px, 1.2vw, 18px);
    align-items: stretch;
}

.custom-realisation {
    height: clamp(420px, 31vw, 560px);
    min-height: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 0;
    background: transparent;
    aspect-ratio: auto;
}

.custom-realisation:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
    height: clamp(420px, 31vw, 560px);
    min-height: 0;
}

.custom-realisation:nth-child(1),
.custom-realisation:nth-child(2) {
    grid-row: auto;
}

.custom-realisation img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition:
        transform 320ms ease;
}

.custom-realisation:first-child img {
    object-position: center;
}

.custom-realisation:nth-child(2) img {
    object-position: right center;
}

.custom-realisation:hover img {
    transform:
        scale(1.025);
}

.occasion-story,
.occasion-advantages-panel {
    background: #18212c;
    color: var(--white);
}

.occasion-story {
    padding: clamp(54px, 6vw, 88px) 0 clamp(46px, 5vw, 76px);
}

.occasion-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(320px, 0.72fr);
    align-items: start;
    gap: clamp(58px, 9vw, 140px);
}

.occasion-story-simple {
    max-width: 980px;
    text-align: center;
}

.occasion-story-copy h2 {
    margin: 18px 0 0;
    color: var(--white);
    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(2.5rem, 4.6vw, 4.9rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.occasion-story-copy h2 {
    max-width: 980px;
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(2.25rem, 3.9vw, 4.35rem);
    line-height: 1.02;
}

.occasion-story-explain p,
.occasion-story-copy p {
    color: rgba(255, 255, 255, 0.68);
    font-size: 1.03rem;
    line-height: 1.75;
}

.occasion-story-copy p {
    max-width: 780px;
    margin: 24px auto 0;
}

.occasion-story-copy h2::after {
    content: "";
    display: block;
    width: 58px;
    height: 2px;
    margin: 26px auto 0;
    border-radius: 999px;
    background: var(--blue-light);
}

.occasion-story-copy p + p {
    margin-top: 20px;
}

.occasion-story-copy strong {
    color: rgba(255, 255, 255, 0.84);
    font-weight: 600;
}

.occasion-story-explain {
    padding-top: clamp(38px, 5vw, 78px);
}

.occasion-story-explain h3 {
    margin: clamp(44px, 5vw, 72px) 0 0;
    color: var(--white);
    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(1.8rem, 2.4vw, 3rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.occasion-story-explain p {
    max-width: 500px;
    margin: 22px 0 0;
}

.occasion-life-path {
    position: relative;
    min-height: 126px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.occasion-life-path svg {
    position: absolute;
    top: 18px;
    left: 0;
    width: min(100%, 420px);
    height: 120px;
    overflow: visible;
}

.occasion-life-path path {
    fill: none;
    stroke: var(--blue);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0.82;
}

.occasion-life-path circle {
    fill: #18212c;
    stroke: var(--blue-light);
    stroke-width: 2;
}

.occasion-life-path strong {
    position: absolute;
    right: 0;
    bottom: 4px;
    color: var(--blue-light);
    font: inherit;
}

.occasion-use-cases {
    display: grid;
    gap: 0;
    margin-top: clamp(36px, 4vw, 58px);
    border-top: 1px solid rgba(139, 185, 236, 0.16);
}

.occasion-use-cases span {
    padding: 17px 0;
    border-bottom: 1px solid rgba(139, 185, 236, 0.16);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.occasion-advantages-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(58px, 6vw, 88px) 0 clamp(96px, 8vw, 138px);
}

.occasion-advantages-composition {
    position: relative;
    min-height: auto;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(22px, 3vw, 44px);
    row-gap: clamp(64px, 6vw, 92px);
    align-items: start;
}

.occasion-advantages-heading {
    position: relative;
    z-index: 2;
    grid-column: 1 / 7;
    max-width: 620px;
}

.occasion-advantages-heading h2 {
    margin: 18px 0 0;
    color: var(--white);
    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(2.8rem, 4.4vw, 5.2rem);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.occasion-advantages-curves {
    position: absolute;
    z-index: 0;
    inset: 52px -9vw 0 -8vw;
    height: auto;
    pointer-events: none;
}

.occasion-advantages-curves svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.occasion-advantages-curve-blue {
    fill: none;
    stroke-linecap: round;
}

.occasion-advantages-curve-blue {
    stroke: #00a9e8;
    stroke-width: 30;
    opacity: 0.46;
}

.occasion-advantage-main,
.occasion-advantage-side {
    position: relative;
    z-index: 2;
}

.occasion-advantage-main {
    grid-column: 1 / 5;
    max-width: 390px;
}

.occasion-advantage-side--professional {
    grid-column: 5 / 9;
    max-width: 390px;
    margin-top: 0;
}

.occasion-advantage-side--availability {
    grid-column: 9 / 13;
    max-width: 390px;
    margin-top: 0;
}

.occasion-advantage-side--guarantee {
    grid-column: 1 / 5;
    max-width: 390px;
    margin-top: 0;
}

.occasion-advantage-side--delivery {
    grid-column: 5 / 9;
    max-width: 390px;
    margin-top: 0;
}

.occasion-advantage-side--installation {
    grid-column: 9 / 13;
    max-width: 390px;
    margin-top: 0;
}

.occasion-advantage-main::before,
.occasion-advantage-side::before {
    content: "";
    display: block;
    width: 64px;
    height: 1px;
    margin-bottom: 18px;
    background: rgba(139, 185, 236, 0.34);
}

.occasion-advantage-main span,
.occasion-advantage-side span {
    display: block;
    margin-bottom: 16px;
    color: var(--blue-light);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.13em;
}

.occasion-advantage-main h3,
.occasion-advantage-side h3 {
    margin: 0;
    color: var(--white);
    font-family: "Sora", "Inter", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
}

.occasion-advantage-main h3,
.occasion-advantage-side h3 {
    font-size: clamp(1.55rem, 2vw, 2.15rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.occasion-advantage-main h3 {
    max-width: 520px;
}

.occasion-advantage-main p,
.occasion-advantage-side p {
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 1rem;
    line-height: 1.65;
}

.occasion-advantage-side p {
    margin-top: 16px;
    font-size: 0.96rem;
}

.coffee-intro-section {
    padding:
        clamp(96px, 8vw, 128px)
        0
        clamp(46px, 5vw, 72px);

    background: #151b23;
    color: var(--white);
}

.coffee-intro {
    max-width: 780px;

    margin: 0 auto;

    text-align: center;
}

.coffee-intro-label {
    justify-content: center;
}

.coffee-intro-label {
    display: flex;
    align-items: center;
    gap: 18px;

    color: var(--blue-light);

    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.coffee-intro-label::after {
    content: "";

    width: 54px;
    height: 1px;

    background: rgba(139, 185, 236, 0.72);
}

.coffee-intro-label::before {
    content: "";

    width: 54px;
    height: 1px;

    background: rgba(139, 185, 236, 0.72);
}

.coffee-intro h2 {
    max-width: 760px;

    margin:
        24px
        auto
        0;

    color: var(--white);

    font-size:
        clamp(34px, 4vw, 58px);
    line-height: 1.06;
    font-weight: 600;
    letter-spacing: -0.055em;
}

.coffee-intro p {
    max-width: 680px;

    margin:
        24px
        auto
        0;

    color: rgba(255, 255, 255, 0.66);

    font-size: 17px;
    line-height: 1.68;
    font-weight: 400;
}

.coffee-intro-list {
    margin-top: 34px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:
        10px
        0;

    color: rgba(255, 255, 255, 0.5);

    font-size: 12px;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.coffee-intro-list span {
    position: relative;

    display: inline-flex;
    align-items: center;

    padding:
        0
        22px;
}

.coffee-intro-list span:first-child {
    padding-left: 0;
}

.coffee-intro-list span + span::before {
    content: "";

    position: absolute;
    left: 0;
    top: 50%;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: rgba(139, 185, 236, 0.62);

    transform:
        translateY(-50%);
}

.coffee-franke-image-section {
    position: relative;
    overflow: hidden;

    padding:
        clamp(34px, 4vw, 62px)
        0
        clamp(82px, 7vw, 126px);

    background:
        radial-gradient(
            ellipse at 50% 56%,
            rgba(255, 255, 255, 0.1),
            rgba(255, 255, 255, 0.035) 30%,
            transparent 62%
        ),
        radial-gradient(
            ellipse at 50% 100%,
            rgba(33, 105, 188, 0.14),
            transparent 46%
        ),
        #12171e;
}

.coffee-franke-image-section::after {
    content: "";

    position: absolute;
    z-index: 0;

    left: 0;
    right: 0;
    bottom: -72px;

    height:
        clamp(92px, 10vw, 154px);

    background:
        linear-gradient(
            180deg,
            rgba(16, 24, 33, 0.12) 0%,
            rgba(16, 24, 33, 0.72) 42%,
            #1c2733 100%
        );

    clip-path:
        polygon(
            0 58%,
            8% 64%,
            16% 76%,
            25% 82%,
            35% 72%,
            46% 54%,
            57% 42%,
            68% 48%,
            78% 62%,
            88% 72%,
            100% 64%,
            100% 100%,
            0 100%
        );
}

.coffee-franke-showcase {
    position: relative;
    z-index: 1;

    min-height:
        clamp(640px, 48vw, 860px);
}

.coffee-franke-showcase-top {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 0;

    width:
        min(88vw, 1320px);

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(28px, 4vw, 70px);

    transform:
        translateX(-50%);
}

.coffee-franke-showcase-top span {
    height: 1px;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.22)
        );
}

.coffee-franke-showcase-top span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.22),
            rgba(255, 255, 255, 0)
        );
}

.coffee-franke-showcase-top img {
    width:
        clamp(170px, 12vw, 250px);
    height: auto;

    display: block;

    opacity: 0.82;
    filter:
        grayscale(0.25)
        brightness(1.08)
        contrast(1.02);
}

.coffee-franke-showcase-word {
    position: absolute;
    z-index: 1;
    left: 50%;
    top:
        clamp(22px, 3vw, 52px);

    width: 100%;

    color: rgba(255, 255, 255, 0.055);

    font-family: "Georgia", "Times New Roman", serif;
    font-size:
        clamp(120px, 20vw, 310px);
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -0.045em;
    text-align: center;
    text-transform: uppercase;

    transform:
        translateX(-50%);
    pointer-events: none;
}

.coffee-franke-machines {
    position: absolute;
    z-index: 3;

    left: 50%;
    bottom:
        clamp(78px, 6vw, 118px);

    width:
        min(92vw, 1280px);

    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap:
        clamp(0px, 1.2vw, 18px);

    transform:
        translateX(-50%);
}

.coffee-franke-machine-item {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    color: var(--white);
    text-decoration: none;

    transition:
        transform 260ms ease;
}

.coffee-franke-machine-item:hover {
    transform:
        translateY(-4px);
}

.coffee-franke-showcase-machine {
    width:
        min(30vw, 430px);
    height: auto;

    display: block;

    filter:
        drop-shadow(0 26px 38px rgba(0, 0, 0, 0.42));
}

.coffee-franke-machine-item span {
    color: var(--white);

    font-size:
        clamp(18px, 1.65vw, 26px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    text-decoration: none;

    transition:
        color 250ms ease;
}

.coffee-franke-machine-item span::after {
    content: "";

    display: block;

    width: 100%;
    height: 2px;

    margin-top: 10px;

    background: var(--blue);

    transform:
        scaleX(0.45);
    transform-origin: center;

    transition:
        transform 250ms ease;
}

.coffee-franke-machine-item:hover span {
    color: var(--blue-light);
}

.coffee-franke-machine-item:hover span::after {
    transform:
        scaleX(1);
}

.coffee-franke-machine-item--left,
.coffee-franke-machine-item--right {
    z-index: 1;

    transform:
        translateY(28px)
        scale(0.9);
}

.coffee-franke-machine-item--left {
    margin-right:
        clamp(-155px, -8vw, -82px);
}

.coffee-franke-machine-item--right {
    margin-left:
        clamp(-155px, -8vw, -82px);
}

.coffee-franke-machine-item--left:hover,
.coffee-franke-machine-item--right:hover {
    z-index: 5;

    transform:
        translateY(-14px)
        scale(1.04);
}

.coffee-franke-machine-item--center {
    z-index: 4;

    transform:
        translateY(0)
        scale(1.02);
}

.coffee-franke-machine-item--center:hover {
    transform:
        translateY(-4px)
        scale(1.04);
}

.coffee-franke-machines:has(.coffee-franke-machine-item--left:hover)
.coffee-franke-machine-item--center,
.coffee-franke-machines:has(.coffee-franke-machine-item--right:hover)
.coffee-franke-machine-item--center {
    z-index: 2;

    transform:
        translateY(28px)
        scale(0.9);
}

.coffee-franke-machine-item--center .coffee-franke-showcase-machine {
    width:
        min(39vw, 610px);
}

.coffee-craft-section {
    position: relative;
    overflow: hidden;

    padding:
        clamp(54px, 6vw, 86px)
        0;

    background: #1c2733;
    color: var(--white);
}

.coffee-craft {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(300px, 0.37fr)
        minmax(0, 0.63fr);

    gap:
        clamp(58px, 7vw, 112px);

    align-items: center;
}

.coffee-craft-content {
    position: relative;
    z-index: 2;

    max-width: 520px;
}

.coffee-craft-label {
    display: inline-flex;
    align-items: center;
    gap: 18px;

    color: var(--blue-light);

    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.coffee-craft-label::after {
    content: "";

    width: 54px;
    height: 1px;

    background: rgba(139, 185, 236, 0.62);
}

.coffee-craft h2 {
    margin-top: 24px;

    color: var(--white);

    font-size:
        clamp(42px, 5vw, 74px);
    line-height: 1.02;
    font-weight: 600;
    letter-spacing: -0.06em;
}

.coffee-craft p {
    margin-top: 24px;

    color: rgba(255, 255, 255, 0.64);

    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;
}

.coffee-craft-visual {
    position: relative;

    min-height:
        clamp(560px, 54vw, 760px);
}

.coffee-craft-image {
    position: absolute;

    display: block;

    object-fit: cover;

    border:
        1px solid rgba(139, 185, 236, 0.16);
}

.coffee-craft-image--main {
    z-index: 2;

    left: 0;
    top: 0;

    width: 62%;
    height: 82%;
}

.coffee-craft-image--small {
    z-index: 3;

    right: 5%;
    bottom: 0;

    width: 42%;
    height: 54%;

    border-color:
        rgba(255, 255, 255, 0.16);
}

.coffee-craft-swiss {
    display: none;
}

.coffee-craft-swiss strong {
    color: transparent;

    -webkit-text-stroke:
        1px rgba(139, 185, 236, 0.22);
    text-stroke:
        1px rgba(139, 185, 236, 0.22);

    font-size:
        clamp(78px, 10vw, 150px);
    line-height: 0.82;
    font-weight: 600;
    letter-spacing: -0.08em;
    text-transform: uppercase;
}

.coffee-craft-swiss span {
    margin-top: 18px;

    color: rgba(255, 255, 255, 0.48);

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.coffee-process-section {
    padding:
        clamp(86px, 8vw, 124px)
        0
        clamp(92px, 9vw, 132px);

    background: #151b23;
    color: var(--white);
}

.coffee-features .vending-section-heading {
    text-align: center;
}

.coffee-feature-flow {
    max-width: 1160px;

    gap:
        clamp(8px, 1.8vw, 24px);
}

.coffee-feature-flow .vending-project-flow-line {
    height:
        calc(100% - 74px);
}

.coffee-feature-flow article {
    min-height: 124px;
}

.coffee-feature-flow article > div {
    width:
        min(100%, 440px);
    min-height: 108px;
}

.coffee-feature-flow article:nth-child(1)::before {
    left:
        calc(50% - 18px);
}

.coffee-feature-flow article:nth-child(2)::before {
    left:
        calc(50% + 8px);
}

.coffee-feature-flow article:nth-child(3)::before {
    left:
        calc(50% - 10px);
}

.coffee-feature-flow article:nth-child(4)::before {
    left:
        calc(50% + 15px);
}

.coffee-contact-process-section {
    padding-top:
        clamp(38px, 5vw, 70px);

    background: #1c2733;
}

.coffee-contact-process {
    max-width: 1380px;
}

.coffee-contact-process-section .vending-value-heading {
    max-width: 100%;

    display: grid;
    grid-template-columns:
        minmax(0, 0.58fr)
        minmax(320px, 0.42fr);
    gap:
        clamp(42px, 6vw, 86px);

    align-items: end;
}

.coffee-contact-process-section .vending-value-heading h2 {
    max-width: 1120px;

    font-size:
        clamp(30px, 3.2vw, 44px);
}

.coffee-contact-process-section .vending-value-heading p {
    max-width: 560px;

    margin-top: 0;
}

.coffee-contact-grid article {
    min-height: 360px;
}

.coffee-process-number {
    position: relative;
    z-index: 1;

    width: 68px;
    height: 68px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #090c11;
    background: var(--white);

    border-radius: 50%;

    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.coffee-contact-grid a {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-top: 28px;

    color: var(--blue-light);

    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.coffee-contact-grid a strong {
    transition:
        transform 0.25s ease;
}

.coffee-contact-grid a:hover strong {
    transform:
        translateX(4px);
}

.coffee-process {
    max-width: 1180px;
}

.coffee-process h2 {
    max-width: 880px;

    margin:
        0
        auto
        clamp(48px, 6vw, 74px);

    text-align: center;

    color: var(--white);

    font-size:
        clamp(36px, 4.4vw, 58px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.055em;
}

.coffee-franke-section {
    position: relative;
    overflow: hidden;

    padding:
        clamp(92px, 9vw, 142px)
        0;

    background: #151b23;
    color: var(--white);
}

.coffee-franke-section::before {
    content: "";

    position: absolute;

    right: 7%;
    top: 18%;

    width: 360px;
    height: 360px;

    border:
        1px solid rgba(139, 185, 236, 0.08);

    border-radius: 50%;

    pointer-events: none;
}

.coffee-franke {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns:
        minmax(320px, 0.47fr)
        minmax(0, 0.53fr);

    gap:
        clamp(58px, 8vw, 118px);

    align-items: center;
}

.coffee-franke-logo-panel {
    position: relative;

    min-height:
        clamp(360px, 34vw, 520px);

    display: flex;
    align-items: center;
    justify-content: center;

    border-top:
        1px solid rgba(255, 255, 255, 0.1);
    border-bottom:
        1px solid rgba(255, 255, 255, 0.1);
}

.coffee-franke-logo-panel > span {
    position: absolute;

    left: 50%;
    bottom: 8%;

    color: rgba(139, 185, 236, 0.045);

    font-size:
        clamp(72px, 10vw, 150px);
    font-weight: 600;
    line-height: 0.8;
    letter-spacing: -0.08em;

    transform:
        translateX(-50%);

    pointer-events: none;
}

.coffee-franke-logo-panel img {
    position: relative;
    z-index: 1;

    width:
        min(78%, 460px);
    height: auto;

    display: block;

    padding:
        32px;

    background: var(--white);

    filter:
        drop-shadow(0 28px 34px rgba(0, 0, 0, 0.34));
}

.coffee-franke-content {
    max-width: 720px;
}

.coffee-franke-label {
    display: inline-flex;

    color: var(--blue-light);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.coffee-franke-content h2 {
    margin-top: 14px;

    color: var(--white);

    font-size:
        clamp(58px, 8vw, 112px);
    line-height: 0.9;
    font-weight: 600;
    letter-spacing: -0.07em;
}

.coffee-franke-content h3 {
    max-width: 620px;

    margin-top: 24px;

    color: var(--white);

    font-size:
        clamp(26px, 3vw, 42px);
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: -0.04em;
}

.coffee-franke-content p {
    max-width: 620px;

    margin-top: 24px;

    color: rgba(255, 255, 255, 0.66);

    font-size: 16px;
    line-height: 1.72;
}

.coffee-franke-points {
    display: flex;
    flex-wrap: wrap;
    gap:
        18px
        0;

    margin-top: 38px;

    border-top:
        1px solid rgba(255, 255, 255, 0.12);
    border-bottom:
        1px solid rgba(255, 255, 255, 0.12);
}

.coffee-franke-points div {
    display: flex;
    align-items: center;
    gap: 12px;

    padding:
        18px
        24px
        18px
        0;

    margin-right: 24px;

    border-right:
        1px solid rgba(255, 255, 255, 0.12);
}

.coffee-franke-points div:last-child {
    border-right: 0;
    margin-right: 0;
}

.coffee-franke-points span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    color: var(--blue-light);
}

.coffee-franke-points svg {
    width: 100%;
    height: 100%;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.coffee-franke-points strong {
    color: rgba(255, 255, 255, 0.9);

    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

.coffee-franke-poster-section {
    min-height:
        clamp(520px, 56vw, 700px);

    display: flex;
    align-items: center;

    padding:
        clamp(56px, 6vw, 88px)
        0;

    background:
        radial-gradient(
            circle at 73% 42%,
            rgba(255, 255, 255, 0.05),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #0f1318 0%,
            #11151b 58%,
            #0f1318 100%
        );
}

.coffee-franke-poster-section::before {
    display: none;
}

.coffee-franke-poster {
    min-height:
        clamp(470px, 42vw, 610px);

    display: block;

    overflow: hidden;
}

.coffee-franke-poster::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.36) 43%,
            rgba(0, 0, 0, 0.08) 78%
        );

    pointer-events: none;
}

.coffee-franke-poster-brand {
    position: absolute;
    z-index: 4;

    left:
        clamp(4px, 2vw, 28px);
    top: 25%;

    width:
        min(360px, 32vw);
}

.coffee-franke-poster-brand .coffee-franke-label {
    margin-bottom: 14px;
}

.coffee-franke-logo {
    width:
        min(340px, 100%);
    height: auto;

    display: block;

    object-fit: contain;
    object-position: center;

    background: transparent;
}

.coffee-franke-poster-brand p {
    max-width: 250px;

    margin-top: 18px;

    color: rgba(255, 255, 255, 0.78);

    font-size: 14px;
    line-height: 1.55;
    font-weight: 500;
}

.coffee-franke-machine {
    position: absolute;
    z-index: 5;

    right:
        clamp(-10px, 8vw, 120px);
    bottom:
        clamp(-26px, -2vw, -10px);

    width:
        min(51vw, 690px);
    height:
        min(94%, 640px);

    object-fit: contain;
    object-position: center bottom;

    filter:
        drop-shadow(0 34px 46px rgba(0, 0, 0, 0.55));
}

.coffee-franke-poster-meta {
    position: absolute;
    z-index: 4;

    left:
        clamp(4px, 2vw, 28px);
    bottom: 8%;

    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;

    max-width: 470px;

    color: rgba(255, 255, 255, 0.86);

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.coffee-franke-poster-meta span {
    position: relative;

    padding-left: 18px;
}

.coffee-franke-poster-meta span::before {
    content: "";

    position: absolute;
    left: 0;
    top: 50%;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--blue);

    transform:
        translateY(-50%);
}

.vending-intro-section {
    position: relative;

    overflow: hidden;

    padding:
        112px
        0
        118px;

    background: #1d252f;
}

.vending-intro {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(360px, 0.78fr);

    gap:
        clamp(54px, 7vw, 110px);

    align-items: center;
}

.vending-intro-content {
    max-width: 650px;
}

.vending-intro-content > span {
    display: inline-flex;
    align-items: center;

    gap: 14px;

    color: var(--blue-light);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.vending-intro-content > span::after {
    content: "";

    width: 58px;
    height: 1px;

    background:
        rgba(139, 185, 236, 0.72);
}

.vending-intro-content h2 {
    max-width: 640px;

    margin-top: 18px;

    color: var(--white);

    font-size:
        clamp(38px, 4.3vw, 66px);

    line-height: 1.04;
    letter-spacing: -0.04em;
}

.vending-intro-content p {
    max-width: 560px;

    margin-top: 24px;

    color:
        rgba(255, 255, 255, 0.7);

    font-size: 16px;
    line-height: 1.7;
}

.vending-features {
    display: flex;
    flex-wrap: wrap;

    margin-top: 34px;

    border-top:
        1px solid
        rgba(139, 185, 236, 0.22);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.1);
}

.vending-features span {
    padding:
        18px
        24px;

    color:
        rgba(255, 255, 255, 0.86);

    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

.vending-features span:first-child {
    padding-left: 0;
}

.vending-features span + span {
    border-left:
        1px solid
        rgba(255, 255, 255, 0.12);
}

.vending-intro-link {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 12px;

    margin-top: 32px;

    color: var(--blue-light);

    font-size: 15px;
    font-weight: 600;

    text-decoration: none;
}

.vending-intro-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 48px;
    height: 1px;

    background:
        rgba(139, 185, 236, 0.72);

    transition:
        width 0.25s ease;
}

.vending-intro-link span {
    transition:
        transform 0.25s ease;
}

.vending-intro-link:hover::after {
    width: 100%;
}

.vending-intro-link:hover span {
    transform:
        translateX(5px);
}

.vending-intro-visual {
    position: relative;

    min-height:
        clamp(460px, 44vw, 620px);

    display: flex;
    align-items: center;
    justify-content: center;
}

.vending-intro-visual > span {
    position: absolute;

    z-index: 0;

    right: -6%;
    top: 14%;

    color:
        rgba(139, 185, 236, 0.12);

    font-size:
        clamp(120px, 15vw, 250px);

    line-height: 0.9;
    font-weight: 600;
    letter-spacing: -0.08em;

    white-space: nowrap;
}

.vending-intro-visual img {
    position: relative;
    z-index: 1;

    width:
        min(100%, 520px);
    max-height:
        clamp(440px, 42vw, 620px);

    object-fit: contain;
    object-position: center;
}

.vending-solution-section {
    position: relative;

    overflow: hidden;

    padding:
        92px
        0
        104px;

    background: #151b23;
}

.vending-solution-section::before {
    display: none;
}

.vending-solution {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(330px, 0.48fr)
        minmax(0, 0.52fr);

    gap:
        clamp(54px, 7vw, 112px);

    align-items: center;
}

.vending-solution-visual {
    position: relative;
    z-index: 1;

    min-height:
        clamp(420px, 42vw, 620px);

    display: flex;
    align-items: center;
    justify-content: center;
}

.vending-solution-visual::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 6%;

    width: 82%;
    height: 70px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(0, 0, 0, 0.62),
            rgba(0, 0, 0, 0) 72%
        );

    transform:
        translateX(-50%);
}

.vending-solution-visual img {
    position: relative;
    z-index: 1;

    width:
        min(100%, 460px);
    max-height:
        clamp(420px, 40vw, 610px);

    object-fit: contain;

    filter:
        drop-shadow(34px 42px 42px rgba(0, 0, 0, 0.48))
        drop-shadow(0 18px 24px rgba(0, 0, 0, 0.34));
}

.vending-solution-content {
    position: relative;
    z-index: 1;

    max-width: 680px;
}

.vending-solution-content > span {
    display: inline-flex;

    color: var(--blue-light);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.vending-solution-content h2 {
    margin-top: 12px;

    color: var(--white);

    font-size:
        clamp(42px, 5vw, 76px);

    line-height: 0.98;
    letter-spacing: -0.055em;
}

.vending-solution-content p {
    max-width: 620px;

    margin-top: 22px;

    color:
        rgba(255, 255, 255, 0.68);

    font-size: 16px;
    line-height: 1.72;
}

.vending-solution-content p + p {
    margin-top: 14px;
}

.vending-solution-points {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        22px
        34px;

    margin-top: 34px;
}

.vending-solution-points div {
    position: relative;

    padding-left: 28px;
}

.vending-solution-points div::before {
    content: "";

    position: absolute;

    left: 0;
    top: 3px;

    width: 12px;
    height: 12px;

    border:
        1px solid
        rgba(139, 185, 236, 0.8);

    border-radius: 50%;
}

.vending-solution-points div::after {
    content: "";

    position: absolute;

    left: 5px;
    top: 8px;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--blue-light);
}

.vending-solution-points strong {
    display: block;

    color: var(--white);

    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

.vending-solution-points span {
    display: block;

    margin-top: 6px;

    color:
        rgba(255, 255, 255, 0.62);

    font-size: 13px;
    line-height: 1.5;
}

.vending-partner-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 54px;
    margin-top: 34px;

    padding: 0 26px;

    border:
        1px solid
        rgba(139, 185, 236, 0.36);

    border-radius: 100px;

    background: transparent;

    color: var(--blue-light);

    font-family: "Sora", "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;
}

.vending-partner-link span {
    transition: transform 0.25s ease;
}

.vending-partner-link:hover {
    transform: translateY(-2px);

    border-color:
        rgba(139, 185, 236, 0.70);

    background:
        rgba(139, 185, 236, 0.08);

    color: var(--white);
}

.vending-partner-link:hover span {
    transform: translateX(3px);
}

.product-page-kicker {
    display: inline-flex;

    margin-bottom: 20px;

    color: var(--blue-light);

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 800;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.product-page h1 {
    max-width: 920px;

    font-family: "Manrope", sans-serif;
    font-size:
        clamp(42px, 6vw, 82px);
    line-height: 1.02;
    font-weight: 760;

    letter-spacing: -0.04em;
}

.product-page h1 span {
    color: var(--blue-light);
}

.product-page-text {
    max-width: 680px;

    margin-top: 28px;

    color:
        rgba(255, 255, 255, 0.68);

    font-size: 18px;
    line-height: 1.75;
}

.product-page-actions {
    margin-top: 34px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 14px;
}

.product-page-panel {
    margin-top: 54px;

    padding: 34px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 28px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    background:
        rgba(255, 255, 255, 0.035);
}

.product-page-panel p {
    max-width: 680px;

    color:
        rgba(255, 255, 255, 0.74);

    font-size: 16px;
    line-height: 1.65;
}

.product-intro-section {
    padding: var(--section-space) 0;

    background: var(--black);
}

.product-intro {
    display: block;

    text-align: center;
}

.product-intro h2 {
    max-width: 820px;

    margin: 0 auto;

    font-family: "Manrope", sans-serif;
    font-size:
        clamp(34px, 4vw, 58px);
    line-height: 1.05;
    font-weight: 800;

    letter-spacing: -0.04em;
}

.product-intro h2::after {
    content: "";

    display: block;

    width: 62px;
    height: 3px;

    margin: 28px auto 0;

    background: var(--blue-light);
}

.product-intro-text {
    max-width: 720px;

    margin: 34px auto 0;
}

.product-intro-text p {
    color:
        rgba(255, 255, 255, 0.7);

    font-size: 18px;
    line-height: 1.78;
}

.product-intro-text p + p {
    margin-top: 24px;
}

.product-intro-text strong {
    color: var(--white);

    font-weight: 800;
}

.bakery-intro-wave {
    height: clamp(54px, 6vw, 92px);

    margin-top: -1px;

    overflow: hidden;

    background: var(--dark);
}

.bakery-intro-wave svg {
    display: block;

    width: 100%;
    height: 100%;
}

.bakery-intro-wave path {
    fill: var(--black);
}

.catering-intro-section {
    padding: var(--section-space) 0;

    background: #11171f;

    color: var(--white);
}

.catering-intro-section-alt {
    background: #212b37;
}

.catering-intro {
    width:
        min(
            calc(100% - 72px),
            1280px
        );

    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(360px, 0.82fr);
    align-items: center;

    gap: 78px;
}

.catering-intro-reverse {
    grid-template-columns:
        minmax(360px, 0.82fr)
        minmax(0, 0.9fr);
}

.catering-intro-content span {
    display: inline-flex;

    margin-bottom: 18px;

    color: #a8ccf5;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 800;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.catering-intro-content h2 {
    max-width: 660px;

    font-family: "Manrope", sans-serif;
    font-size:
        clamp(38px, 4.8vw, 68px);
    line-height: 1.02;
    font-weight: 800;

    letter-spacing: -0.045em;
}

.catering-intro-content h2::after {
    content: "";

    display: block;

    width: 86px;
    height: 3px;

    margin-top: 22px;

    background:
        linear-gradient(
            90deg,
            var(--blue-light),
            rgba(146, 198, 255, 0)
        );
}

.catering-intro-content p {
    max-width: 620px;

    color:
        rgba(255, 255, 255, 0.84);

    font-size: 18px;
    line-height: 1.75;
}

.catering-intro-content h2 + p {
    margin-top: 24px;
}

.catering-intro-content p + p {
    margin-top: 14px;
}

.catering-intro-content strong {
    color: var(--white);

    font-weight: 800;
}

.catering-intro-image {
    position: relative;

    overflow: hidden;

    min-height: 390px;

    border-radius: 22px;

    background: #18202a;

    outline:
        1px solid
        rgba(255, 255, 255, 0.08);
}

.catering-intro-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0.16)
        );

    pointer-events: none;
}

.catering-intro-image img {
    width: 100%;
    height: 100%;
    min-height: 390px;

    object-fit: cover;
    object-position: center;

    display: block;
}

.catering-intro-reverse .catering-intro-image img {
    object-position: center;
}

.support-timeline-section {
    padding: var(--section-space) 0;

    background: #11171f;

    color: var(--white);
}

.support-timeline {
    width:
        min(
            calc(100% - 72px),
            1280px
        );
}

.support-timeline-heading {
    max-width: 820px;
}

.support-timeline-heading > span {
    display: inline-flex;

    margin-bottom: 18px;

    color: #a8ccf5;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 800;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.support-timeline-heading h2 {
    font-family: "Manrope", sans-serif;
    font-size:
        clamp(34px, 4.1vw, 56px);
    line-height: 1.05;
    font-weight: 800;

    letter-spacing: -0.045em;
}

.support-timeline-heading p {
    max-width: 560px;

    margin-top: 22px;

    color:
        rgba(255, 255, 255, 0.78);

    font-size: 16px;
    line-height: 1.65;
}

.support-steps {
    position: relative;

    margin-top: 58px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 48px;
}

.support-steps::before {
    content: "";

    position: absolute;

    top: 58px;
    left: 0;
    right: 0;

    width: auto;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(139, 185, 236, 0.92),
            rgba(255, 255, 255, 0.18) 70%,
            rgba(255, 255, 255, 0.08)
        );
}

.support-step {
    position: relative;

    padding-top: 92px;
}

.support-step-number {
    position: absolute;

    top: 0;
    left: 0;

    color:
        rgba(255, 255, 255, 0.16);

    font-family: "Manrope", sans-serif;
    font-size:
        clamp(42px, 4vw, 58px);
    line-height: 1;
    font-weight: 800;

    letter-spacing: -0.05em;

    transition:
        color 0.28s ease,
        opacity 0.28s ease,
        transform 0.28s ease;
}

.support-step:first-child .support-step-number {
    color:
        rgba(139, 185, 236, 0.88);
}

.support-steps:hover .support-step:first-child .support-step-number {
    color:
        rgba(255, 255, 255, 0.12);

    transform: none;
}

.support-step:hover .support-step-number {
    color: var(--blue-light);

    opacity: 1;

    transform:
        translateX(3px);
}

.support-step-dot {
    position: absolute;

    top: 51px;
    left: 0;

    width: 15px;
    height: 15px;

    border:
        3px solid
        var(--black);

    border-radius: 50%;

    background: var(--blue-light);

    box-shadow:
        0 0 0 1px
        rgba(139, 185, 236, 0.42);
}

.support-step h3 {
    font-family: "Manrope", sans-serif;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 800;
}

.support-step p {
    max-width: 245px;

    margin-top: 12px;

    color:
        rgba(255, 255, 255, 0.74);

    font-size: 15px;
    line-height: 1.65;
}

.brand-partners-section {
    padding: var(--section-space) 0;

    background: #212b37;

    color: var(--white);
}

.brand-partners {
    width:
        min(
            calc(100% - 72px),
            1460px
        );
}

.brand-partners-heading {
    max-width: 760px;

    margin-bottom: 38px;
}

.brand-partners-heading h2 {
    font-family: "Manrope", sans-serif;
    font-size:
        clamp(36px, 4vw, 58px);
    line-height: 1.05;
    font-weight: 800;

    letter-spacing: -0.045em;
}

.brand-partners-heading h2::after {
    content: "";

    display: block;

    width: 70px;
    height: 2px;

    margin-top: 22px;

    background:
        linear-gradient(
            90deg,
            var(--blue-light),
            rgba(139, 185, 236, 0)
        );
}

.brand-partners-heading p {
    max-width: 680px;

    margin-top: 24px;

    color:
        rgba(255, 255, 255, 0.8);

    font-size: 17px;
    line-height: 1.7;
}

.brand-partners-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: clamp(34px, 4vw, 70px) clamp(28px, 4vw, 64px);
}

.brand-partner-card {
    position: relative;

    min-height: 235px;

    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    overflow: visible;

    color: var(--white);

    transition:
        transform 0.28s ease;
}

.brand-partner-logo {
    min-height: 165px;

    margin-bottom: 30px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-partner-logo img {
    width: min(100%, 360px);
    height: 164px;

    display: block;

    object-fit: contain;

    transform:
        scale(var(--partner-logo-scale, 1));

    transition:
        transform 0.28s ease;
}

.brand-partner-logo-placeholder {
    width: 190px;
    height: 76px;

    border:
        1px solid
        rgba(255, 255, 255, 0.24);

    background:
        rgba(255, 255, 255, 0.075);
}

.brand-partner-logo-placeholder::before {
    content: "";

    width: 42px;
    height: 28px;

    border:
        2px solid
        rgba(139, 185, 236, 0.34);

    border-radius: 4px;

    background:
        linear-gradient(
            135deg,
            rgba(139, 185, 236, 0.12),
            rgba(139, 185, 236, 0)
        );
}

.brand-partner-logo img[src*="marque_cfi"] {
    --partner-logo-scale: 0.82;
}

.brand-partner-logo img[src*="marque_panimatic"],
.brand-partner-logo img[src*="marque_sinmag"],
.brand-partner-logo img[src*="marque_panem"] {
    --partner-logo-scale: 1.18;
}

.brand-partner-logo img[src*="marque_ferneto"],
.brand-partner-logo img[src*="marque_merand"],
.brand-partner-logo img[src*="marque_pavailler"],
.brand-partner-logo img[src*="marque_pvlab"] {
    --partner-logo-scale: 1.24;
}

.brand-partner-logo img[src*="marque_hc"] {
    --partner-logo-scale: 1.08;
}

.brand-partner-card strong {
    margin-top: auto;

    color: var(--white);

    font-family: "Manrope", sans-serif;
    font-size: 21px;
    line-height: 1.2;
    font-weight: 800;

    transform:
        translateY(20px);

    transition:
        transform 0.34s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.brand-partner-card small {
    margin-top: 6px;

    color:
        rgba(255, 255, 255, 0.78);

    font-size: 14px;
    line-height: 1.35;

    transform:
        translateY(20px);

    transition:
        color 0.28s ease,
        transform 0.34s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.brand-partner-link {
    margin-top: 0;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: var(--blue-light);

    font-size: 14px;
    font-weight: 600;

    transform:
        translateY(0);

    transition:
        transform 0.34s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.brand-partner-link i {
    position: relative;

    width: 26px;
    height: 1px;

    display: inline-block;

    background: currentColor;

    transition:
        transform 0.28s ease,
        width 0.28s ease;
}

.brand-partner-link i::after {
    content: "";

    position: absolute;

    right: 0;
    top: 50%;

    width: 6px;
    height: 6px;

    border-top:
        1px solid
        currentColor;

    border-right:
        1px solid
        currentColor;

    transform:
        translateY(-50%)
        rotate(45deg);
}

.brand-partner-card:hover {
    transform:
        translateY(-3px);
}

.brand-partner-card:hover strong,
.brand-partner-card:hover small,
.brand-partner-card:hover .brand-partner-link,
.brand-partner-card:focus-visible strong,
.brand-partner-card:focus-visible small,
.brand-partner-card:focus-visible .brand-partner-link {
    opacity: 1;

    transform:
        translateY(0);
}

.brand-partner-card:hover .brand-partner-link,
.brand-partner-card:focus-visible .brand-partner-link {
    transform:
        translateY(-2px);
}

.brand-partner-card:hover small,
.brand-partner-card:focus-visible small {
    color:
        rgba(255, 255, 255, 0.9);
}

.brand-partner-card:hover .brand-partner-logo img {
    transform:
        scale(calc(var(--partner-logo-scale, 1) * 1.04));
}

.brand-partner-card:hover .brand-partner-link i {
    width: 34px;

    transform:
        translateX(3px);
}

@media (hover: none) {
    .brand-partner-card strong,
    .brand-partner-card small,
    .brand-partner-card .brand-partner-link {
        opacity: 1;

        transform:
            translateY(0);
    }

    .brand-partner-card .brand-partner-link {
        max-height: 34px;

        margin-top: 20px;
    }
}


.project-support-section {
    padding: var(--space-lg) 0;

    background: var(--dark);

    color: var(--white);
}

.project-support {
    width:
        min(
            calc(100% - 72px),
            1240px
        );

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(340px, 0.75fr);

    gap: 34px;

    align-items: center;
}

.project-support-content {
    max-width: 780px;
}

.project-support-kicker {
    display: inline-flex;

    margin-bottom: 12px;

    color: var(--blue);

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 800;

    letter-spacing: 0.16em;
}

.project-support h2 {
    max-width: 560px;

    font-family: "Manrope", sans-serif;
    font-size:
        clamp(36px, 4vw, 62px);
    line-height: 1.04;
    font-weight: 800;

    letter-spacing: -0.045em;
}

.project-support-lead {
    margin-top: 20px;

    color: var(--white);

    font-size: 18px;
    line-height: 1.55;
    font-weight: 700;
}

.project-support-subtitle {
    max-width: 520px;

    margin-top: 7px;

    color:
        rgba(255, 255, 255, 0.66);

    font-size: 16px;
    line-height: 1.65;
}

.project-support-list {
    margin-top: 24px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.1);
}

.project-support-item {
    padding: 15px 0;

    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr);

    gap: 14px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.1);
}

.project-support-icon {
    position: relative;

    width: 46px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%;

    background: var(--blue);

    box-shadow:
        inset 0 -8px 18px
        rgba(9, 12, 17, 0.18);

    color: var(--white);
}

.project-support-icon svg {
    position: relative;

    z-index: 1;

    width: 28px;
    height: 28px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;

    filter:
        drop-shadow(0 2px 0 rgba(9, 12, 17, 0.2));
}

.project-support-icon .icon-fill {
    fill:
        rgba(139, 185, 236, 0.92);

    stroke:
        rgba(255, 255, 255, 0.96);
}

.project-support-item h3 {
    color: var(--white);

    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 800;

    letter-spacing: 0.08em;
}

.project-support-item p {
    margin-top: 7px;

    color:
        rgba(255, 255, 255, 0.62);

    font-size: 15px;
    line-height: 1.55;
}

.project-support-visual {
    min-height: 260px;

    overflow: hidden;

    border-radius: 14px;

    background: var(--black);
}

.project-support-visual img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: 32% center;
}


.partners-intro-section {
    padding: var(--section-space) 0;

    background: var(--black);

    color: var(--white);
}

.partners-intro {
    max-width: 980px;

    text-align: center;
}

.partners-intro-kicker {
    display: inline-flex;

    margin-bottom: 16px;

    color: var(--blue-light);

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 800;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.partners-intro h2 {
    font-family: "Manrope", sans-serif;
    font-size:
        clamp(36px, 4vw, 60px);
    line-height: 1.05;
    font-weight: 800;

    letter-spacing: -0.04em;
}

.partners-intro h2::after {
    content: "";

    display: block;

    width: 58px;
    height: 3px;

    margin: 24px auto 0;

    background: var(--blue-light);
}

.partners-intro p {
    max-width: 860px;

    margin: 30px auto 0;

    color:
        rgba(255, 255, 255, 0.7);

    font-size: 18px;
    line-height: 1.78;
}

.partners-intro strong {
    color: var(--white);

    font-weight: 800;
}

.partner-feature-section {
    padding: 36px 0;

    background: var(--black);
}

.partner-feature-section-alt {
    background: var(--dark);
}

.partner-feature-preparation {
    background: var(--dark);
}

.partner-feature {
    margin-top: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1fr);

    gap: 36px;

    align-items: center;
}

.partner-feature + .partner-feature {
    margin-top: 58px;
}

.partner-feature-image {
    overflow: hidden;

    border-radius: 14px;
}

.partner-feature-image img {
    width: 100%;
    height: 470px;

    display: block;

    object-fit: contain;
    object-position: center;
}

.partner-feature-section-alt .partner-feature-image img {
    transform:
        translateX(-24px);
}

.partner-feature-preparation .partner-feature-image {
    min-height: 400px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    overflow: hidden;

    border-radius: 0;
}

.partner-feature-preparation .partner-feature-image img {
    width: 92%;
    height: 430px;

    object-fit: contain;
    object-position: center;

    transform:
        translateX(-20px);
}

.partner-feature-division .partner-feature-image img {
    height: 510px;
}

.partner-feature-division {
    padding: 74px 0;
}

.partner-feature-division .partner-feature-content {
    min-height: 460px;

    padding-left: 0;

    transform:
        translateX(-12px);
}

.partner-feature-division .partner-feature-content h3 {
    font-size:
        clamp(30px, 3.2vw, 44px);
}

.partner-feature-content {
    min-height: 360px;

    position: relative;

    padding: 44px 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: left;
}

.partner-feature-reverse .partner-feature-content {
    padding-left: 54px;
}

.partner-feature-cooking .partner-feature-content {
    transform:
        translateY(-28px);
}

.partner-feature-pastocuiseurs .partner-feature-image {
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 0;
}

.partner-feature-pastocuiseurs .partner-feature-image img {
    width: min(78%, 420px);
    height: 520px;

    object-fit: contain;
    object-position: center;
}

.partner-feature-content > span {
    margin-bottom: 16px;

    color:
        rgba(255, 255, 255, 0.58);

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 800;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.partner-feature-content h3 {
    max-width: none;

    font-family: "Manrope", sans-serif;
    font-size:
        clamp(28px, 3vw, 42px);
    line-height: 1.04;
    font-weight: 800;

    letter-spacing: -0.045em;

    white-space: nowrap;
}

.partner-feature-content h3::after {
    content: "";

    display: block;

    width: 82px;
    height: 2px;

    margin-top: 14px;

    background:
        linear-gradient(
            90deg,
            var(--blue-light),
            rgba(21, 88, 166, 0)
        );
}

.partner-brand-list {
    margin-top: 26px;

    display: grid;

    grid-template-columns:
        repeat(2, 260px);

    gap: 12px;
}

.partner-brand-logo {
    position: relative;

    width: 260px;
    height: 108px;

    overflow: hidden;

    padding: 6px 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        transparent;

    background:
        transparent;

    box-shadow: none;

    cursor: pointer;

    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}

.partner-brand-logo::after {
    display: none;
}

.partner-brand-logo img {
    width: 238px;
    height: 88px;

    display: block;

    object-fit: contain;

    pointer-events: none;

    transform:
        scale(var(--logo-scale, 1));

    transition:
        transform 0.25s ease;
}

.partner-brand-logo:hover {
    border-color:
        transparent;

    background:
        transparent;
}

.partner-brand-logo:hover img {
    transform:
        scale(calc(var(--logo-scale, 1) * 1.08));
}

.partner-brand-logo img[src*="marque_ferneto"] {
    --logo-scale: 1.9;
}

.partner-brand-logo img[src*="marque_merand"] {
    --logo-scale: 2.05;
}

.partner-brand-logo img[src*="marque_zelaieta"] {
    --logo-scale: 1.9;
}

.partner-brand-logo img[src*="marque_cfi"] {
    --logo-scale: 0.76;
}

.partner-brand-logo img[src*="marque_panimatic"] {
    --logo-scale: 2.15;
}

.partner-brand-logo img[src*="marque_sinmag"] {
    --logo-scale: 1.7;
}

.partner-brand-logo img[src*="marque_panem"] {
    --logo-scale: 1.24;
}

.partner-brand-logo img[src*="marque_pavailler"] {
    --logo-scale: 1.82;
}

.partner-brand-logo img[src*="marque_unox"] {
    --logo-scale: 1.7;
}

.partner-feature-cooking .partner-brand-logo img[src*="marque_hein"] {
    --logo-scale: 1.3;
}

.product-page-bakery .partner-feature-content h3 {
    font-size:
        clamp(28px, 3vw, 42px);
}

.partner-brand-logo img[src*="marque_pvlab"] {
    --logo-scale: 1.58;
}

.partner-brand-logo img[src*="marque_hc"] {
    --logo-scale: 1.54;
}


.other-partners-section {
    padding: var(--section-space) 0;

    background: var(--dark);

    color: var(--white);
}

.other-partners {
    width:
        min(
            calc(100% - 72px),
            1180px
        );

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(360px, 0.72fr);

    gap: 34px;

    align-items: center;
}

.other-partners::before {
    content: "";

    position: absolute;

    left: 0;
    top: -20px;

    width: 72px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--blue-light),
            rgba(21, 88, 166, 0)
        );
}

.other-partners p {
    max-width: 760px;

    color:
        rgba(255, 255, 255, 0.74);

    font-size: 22px;
    line-height: 1.65;
}

.other-partners strong {
    color: var(--white);

    font-weight: 800;
}

.other-partners-logos {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    align-items: center;
    justify-items: center;

    gap: 4px;
}

.other-partners-logos span {
    width: 250px;
    height: 132px;

    padding: 10px 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        transparent;

    background:
        transparent;
}

.other-partners-logos img {
    width: 238px;
    height: 118px;

    display: block;

    object-fit: contain;
}

.other-partners-logos img[src*="marque_hc"] {
    transform:
        scale(1.7);
}

.other-partners-logos img[src*="marque_pvlab"] {
    transform:
        scale(1.68);
}


/* HISTOIRE */

.history-section {
    padding: clamp(44px, 4.4vw, 74px) 0 0;

    background: #1d2835;
}

.history-panel {
    position: relative;

    width: 100vw;

    min-height: clamp(320px, 27vw, 450px);

    margin-left:
        calc(50% - 50vw);

    overflow: hidden;

    border: none;

    border-radius: 0;

    background:
        radial-gradient(circle at 78% 44%, rgba(36, 102, 176, 0.08), transparent 34%),
        linear-gradient(180deg, #1d2835 0%, #1b2633 100%);

    color: var(--white);
}

.history-year {
    position: absolute;

    top: 50%;
    right: max(-8%, calc((100vw - var(--container)) / 2 - 7%));

    color: transparent;

    font-family: "Manrope", sans-serif;

    font-size:
        clamp(255px, 34vw, 540px);

    line-height: 0.72;

    font-weight: 800;

    letter-spacing: -0.075em;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.34),
            rgba(0, 0, 0, 0.34)
        ),
        url("images/image_7.webp");

    background-size: 118%;
    background-position: center 48%;

    -webkit-background-clip: text;
    background-clip: text;

    opacity: 0.7;

    transform:
        translateY(-50%);
}

.history-content {
    position: absolute;

    z-index: 1;

    top: 50%;
    left:
        max(3.5%, calc((100vw - var(--container)) / 2 + 1%));

    max-width: 410px;

    transform:
        translateY(-50%);
}

.history-content h2 {
    color: var(--white);

    font-family: "Manrope", sans-serif;

    font-size:
        clamp(1.45rem, 2.85vw, 3rem);

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -0.04em;
}

.history-content h2 span {
    color: var(--blue-light);
}

.history-link {
    width: fit-content;

    margin-top: clamp(22px, 2.8vw, 36px);

    display: inline-flex;
    align-items: center;

    gap: 24px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size:
        clamp(10px, 1.05vw, 13px);
    font-weight: 800;

    letter-spacing: 0.02em;

    text-transform: uppercase;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.history-link span {
    position: relative;

    width: 54px;
    height: 2px;

    background:
        rgba(139, 185, 236, 0.5);

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.history-link span::after {
    content: "";

    position: absolute;

    right: 0;
    top: 50%;

    width: 9px;
    height: 9px;

    border-top:
        1px solid
        var(--blue-light);

    border-right:
        1px solid
        var(--blue-light);

    transform:
        translateY(-50%)
        rotate(45deg);
}

.history-link:hover {
    color: var(--white);

    transform:
        translateX(4px);
}

.history-link:hover span {
    background:
        var(--blue-light);

    transform:
        translateX(6px);
}

.home-page .history-section {
    padding: clamp(78px, 7vw, 118px) 0;

    background: #1d2835;
}

.home-page .history-panel {
    position: relative;

    width: 100%;
    min-height: auto;
    margin-left: 0;

    display: grid;
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(360px, 0.8fr);
    align-items: center;
    gap: clamp(42px, 6vw, 92px);

    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.home-page .history-content {
    position: relative;
    z-index: 1;
    top: auto;
    right: auto;
    left: auto;

    max-width: 760px;

    transform: none;
}

.home-page .history-kicker {
    margin-bottom: 22px;

    display: inline-flex;

    color: var(--blue-light);

    font-family: "Sora", "Inter", sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

.home-page .history-content h2 {
    max-width: 760px;
    margin: 0;

    color: var(--white);

    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(2.1rem, 3.35vw, 3.55rem);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1.05;
}

.home-page .history-content p {
    max-width: 780px;
    margin: clamp(20px, 2vw, 28px) 0 0;

    color: rgba(255, 255, 255, 0.76);

    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(0.96rem, 1vw, 1.08rem);
    font-weight: 400;
    line-height: 1.8;
}

.home-page .history-link {
    margin-top: clamp(24px, 2.7vw, 38px);

    color: var(--blue-light);

    font-size: clamp(0.86rem, 0.92vw, 0.98rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
}

.home-page .history-link span {
    width: 34px;
    height: 1px;

    background: currentColor;
}

.home-page .history-image {
    position: relative;

    min-height: clamp(280px, 31vw, 500px);

    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.home-page .history-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    filter: saturate(0.95);
}

.home-page .history-image::after {
    display: none;
}

.home-page .history-content p {
        font-size: 0.94rem;
        line-height: 1.7;
}

.home-page .history-image {
        min-height: 250px;
}

/* ZONE D'INTERVENTION */

.service-area-section {
    position: relative;
    overflow: hidden;
    padding: clamp(54px, 5vw, 86px) 0 clamp(52px, 4.8vw, 82px);
    background: #0d1624;
}

.service-area-layout {
    display: grid;
    grid-template-columns:
        minmax(360px, 0.9fr)
        minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(42px, 6vw, 92px);
}

.service-area-content {
    position: relative;
    z-index: 2;
    grid-column: 2;
    
}

.service-area-kicker {
    position: relative;
    display: inline-flex;
    margin-bottom: clamp(34px, 3.4vw, 54px);
    color: var(--blue);
    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(10px, 0.82vw, 13px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.service-area-kicker::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -28px;
    width: 60px;
    height: 2px;
    border-radius: 999px;
    background: var(--blue);
}

.service-area-content h2 {
    margin: 0;
    color: var(--white);
    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(36px, 3.9vw, 62px);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.service-area-content h2 span {
    color: var(--blue);
}

.service-area-content p {
    max-width: 520px;
    margin-top: clamp(22px, 2.4vw, 34px);
    color: rgba(255, 255, 255, 0.78);
    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(13px, 0.95vw, 16px);
    font-weight: 400;
    line-height: 1.75;
}

.service-area-map {
    position: relative;
    z-index: 1;
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(280px, 31vw, 500px);
}

.service-area-map::before {
    content: "";
    position: absolute;
    inset: 5% 0;
    z-index: -1;
    border-radius: 42%;
    background:
        radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0.96) 0%,
            rgba(0, 0, 0, 0.88) 54%,
            rgba(0, 0, 0, 0) 78%
        );
}

.service-area-map img {
    display: block;
    width: min(100%, 720px);
    height: auto;
    object-fit: contain;
    filter:
        drop-shadow(0 28px 52px rgba(0, 0, 0, 0.24));
}


/* PLUS-VALUE */

.value-section {
    padding: 68px 0 76px;

    background: #1d252f;
}

.value-layout {
    display: flex;
    flex-direction: column;

    gap: 26px;
}

.value-intro span {
    display: inline-flex;

    color: var(--blue-light);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.value-intro h2 {
    position: relative;

    width: fit-content;

    margin-top: 0;

    color: var(--white);

    font-family: "Manrope", sans-serif;

    font-size:
        clamp(40px, 4vw, 64px);

    line-height: 1.04;

    font-weight: 800;

    letter-spacing: -0.03em;
}

.value-intro h2::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -14px;

    width: 72px;
    height: 3px;

    border-radius: 999px;

    background:
        var(--blue-light);
}

.value-intro p {
    max-width: 610px;

    margin-top: 32px;

    color:
        rgba(255, 255, 255, 0.66);

    font-size: 14px;
    line-height: 1.75;
}

.value-list {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}

.value-item {
    position: relative;

    isolation: isolate;

    min-height: 290px;

    padding: 28px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    overflow: hidden;

    color: var(--white);

    text-decoration: none;

    border:
        1px solid
        rgba(255, 255, 255, 0.2);

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.13),
            rgba(255, 255, 255, 0.045) 46%,
            rgba(255, 255, 255, 0.02)
        );

    backdrop-filter:
        blur(20px)
        saturate(170%);
    -webkit-backdrop-filter:
        blur(20px)
        saturate(170%);

    box-shadow:
        0 22px 60px
        rgba(0, 0, 0, 0.24),
        inset 0 1px 0
        rgba(255, 255, 255, 0.24),
        inset 0 -1px 0
        rgba(255, 255, 255, 0.06);

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        filter 0.3s ease;
}

.value-item::before {
    content: "";

    position: absolute;

    inset: 0;

    width: auto;

    background:
        radial-gradient(
            circle at 82% 8%,
            rgba(255, 255, 255, 0.22),
            transparent 30%
        ),
        linear-gradient(
            125deg,
            rgba(255, 255, 255, 0.16),
            rgba(255, 255, 255, 0) 42%
        );

    opacity: 0.62;

    transition:
        opacity 0.3s ease;
}

.value-item::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    background:
        linear-gradient(
            90deg,
            rgba(139, 185, 236, 0),
            rgba(139, 185, 236, 0.14),
            rgba(139, 185, 236, 0)
        );

    opacity: 0;

    transition:
        opacity 0.3s ease;
}

.value-item-featured {
    border-color:
        rgba(139, 185, 236, 0.42);
}

.value-item-featured,
.value-item-featured .value-text h3 {
    border-color:
        rgba(139, 185, 236, 0.42);
}

.value-text {
    position: relative;

    z-index: 1;

    display: block;
}

.value-text h3 {
    color: var(--white);

    font-family: "Manrope", sans-serif;

    font-size:
        clamp(28px, 2.5vw, 38px);

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -0.03em;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.value-text p {
    max-width: 360px;

    margin-top: 16px;

    color:
        rgba(255, 255, 255, 0.62);

    font-size: 14px;
    line-height: 1.7;

    transition:
        color 0.3s ease;
}

.value-discover {
    position: relative;

    z-index: 1;

    display: inline-flex;
    align-items: center;

    gap: 14px;

    color:
        rgba(255, 255, 255, 0.68);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.02em;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.value-discover span {
    position: relative;

    width: 42px;
    height: 1px;

    background:
        rgba(255, 255, 255, 0.42);

    transition:
        width 0.3s ease,
        background 0.3s ease;
}

.value-discover span::after {
    content: "";

    position: absolute;

    right: 0;
    top: 50%;

    width: 8px;
    height: 8px;

    border-top:
        1px solid
        currentColor;

    border-right:
        1px solid
        currentColor;

    color:
        rgba(255, 255, 255, 0.7);

    transform:
        translateY(-50%)
        rotate(45deg);

    transition:
        color 0.3s ease;
}

.value-item:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(255, 255, 255, 0.32);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.065) 46%,
            rgba(255, 255, 255, 0.03)
        );

    box-shadow:
        0 28px 72px
        rgba(0, 0, 0, 0.3),
        inset 0 1px 0
        rgba(255, 255, 255, 0.32),
        inset 0 -1px 0
        rgba(255, 255, 255, 0.08);
}

.value-item:hover::before {
    opacity: 0.8;
}

.value-item:hover::after {
    opacity: 1;
}

.value-item:hover .value-text h3 {
    color: var(--blue-light);

    transform:
        translateX(6px);
}

.value-item:hover .value-text p {
    color:
        rgba(255, 255, 255, 0.78);
}

.value-item:hover .value-discover {
    color: var(--blue-light);

    transform:
        translateX(6px);
}

.value-item:hover .value-discover span {
    width: 58px;

    background: var(--blue-light);
}

.value-item:hover .value-discover span::after {
    color: var(--blue-light);
}

.value-item:focus-visible {
    outline:
        3px solid
        rgba(139, 185, 236, 0.7);

    outline-offset: 4px;
}

.maintenance-highlight {
    display: flex;
    flex-direction: column;

    gap: 34px;
}

.maintenance-heading span {
    display: inline-flex;

    color: var(--blue-light);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}

.maintenance-heading h2 {
    max-width: 760px;

    margin-top: 16px;

    color: var(--white);

    font-size:
        clamp(34px, 3.4vw, 54px);

    line-height: 1.06;

    letter-spacing: -0.03em;
}

.maintenance-heading h2::after {
    content: "";

    display: block;

    width: 72px;
    height: 2px;

    margin-top: 18px;

    background:
        linear-gradient(
            90deg,
            var(--blue-light),
            rgba(139, 185, 236, 0)
        );
}

.maintenance-heading p {
    max-width: 660px;

    margin-top: 18px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 16px;
    line-height: 1.75;
}

.maintenance-main {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 0.42fr);

    gap: 22px;

    max-width: 1120px;
}

.maintenance-content {
    position: relative;

    padding:
        34px
        36px;

    border:
        1px solid
        rgba(255, 255, 255, 0.1);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.025)
        );
}

.maintenance-content h3 {
    color: var(--white);

    font-size:
        clamp(30px, 3vw, 44px);

    line-height: 1.08;

    letter-spacing: -0.03em;
}

.maintenance-content > p {
    max-width: 660px;

    margin-top: 18px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 16px;
    line-height: 1.75;
}

.maintenance-checklist {
    margin-top: 26px;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    list-style: none;
}

.maintenance-checklist li {
    position: relative;

    padding-left: 34px;

    color:
        rgba(255, 255, 255, 0.86);

    font-size: 14px;
    line-height: 1.45;
}

.maintenance-checklist li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: -1px;

    width: 22px;
    height: 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--blue-light);

    background:
        rgba(139, 185, 236, 0.1);

    border-radius: 50%;

    font-size: 13px;
    font-weight: 600;
}

.maintenance-content .button {
    margin-top: 30px;
}

.maintenance-promise {
    position: relative;

    padding:
        30px
        28px;

    overflow: hidden;

    border:
        1px solid
        rgba(139, 185, 236, 0.22);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 88% 8%,
            rgba(139, 185, 236, 0.2),
            rgba(139, 185, 236, 0) 36%
        ),
        linear-gradient(
            145deg,
            rgba(21, 88, 166, 0.2),
            rgba(255, 255, 255, 0.035)
        );
}

.maintenance-promise span {
    color: var(--blue-light);

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.maintenance-promise strong {
    display: block;

    margin-top: 18px;

    color: var(--white);

    font-size:
        clamp(38px, 4vw, 62px);

    line-height: 0.92;
    font-weight: 600;
    letter-spacing: -0.05em;
}

.maintenance-promise p {
    margin-top: 22px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 14px;
    line-height: 1.68;
}

.maintenance-promise-list {
    margin-top: 24px;

    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.maintenance-promise-list small {
    padding:
        8px
        10px;

    color:
        rgba(255, 255, 255, 0.82);

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.04);

    font-size: 11px;
    font-weight: 500;
}

.maintenance-benefits {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;

    max-width: 1120px;
}

.maintenance-benefit {
    position: relative;

    padding:
        22px
        22px
        22px
        70px;

    min-height: 118px;

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius: 16px;

    background:
        rgba(255, 255, 255, 0.025);

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}

.maintenance-benefit::before {
    content: "";

    position: absolute;

    left: 22px;
    top: 24px;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(139, 185, 236, 0.24),
            rgba(139, 185, 236, 0.08)
        );

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.maintenance-benefit::after {
    content: "";

    position: absolute;

    left: 33px;
    top: 34px;

    width: 10px;
    height: 6px;

    border-left:
        2px solid
        var(--blue-light);

    border-bottom:
        2px solid
        var(--blue-light);

    transform:
        rotate(-45deg);
}

.maintenance-benefit:hover::before {
    background:
        rgba(139, 185, 236, 0.28);

    transform:
        scale(1.06);
}

.maintenance-benefit:hover {
    background:
        rgba(255, 255, 255, 0.045);

    border-color:
        rgba(139, 185, 236, 0.22);

    transform:
        translateY(-2px);
}

.maintenance-benefit span {
    display: none;
}

.maintenance-benefit h3 {
    margin-top: 0;
    padding-left: 0;

    color: var(--white);

    font-size: 18px;
    line-height: 1.2;

    text-transform: uppercase;

    transition:
        color 0.25s ease;
}

.maintenance-benefit p {
    margin-top: 9px;
    padding-left: 0;

    color:
        rgba(255, 255, 255, 0.64);

    font-size: 14px;
    line-height: 1.55;
}

.maintenance-benefit:hover h3 {
    color: var(--blue-light);
}

.maintenance-highlight {
    gap: 30px;
}

.maintenance-main {
    display: block;

    max-width: 1180px;
}

.maintenance-content {
    overflow: hidden;

    padding:
        38px
        42px
        40px;

    border-color:
        rgba(139, 185, 236, 0.18);

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(139, 185, 236, 0.12),
            rgba(139, 185, 236, 0) 32%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.018) 58%,
            rgba(139, 185, 236, 0.04)
        );
}

.maintenance-content::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 4px;
    height: 100%;

    background:
        linear-gradient(
            180deg,
            var(--blue-light),
            rgba(139, 185, 236, 0)
        );

    opacity: 0.85;
}

.maintenance-content-head {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(220px, 320px);

    gap: 42px;
    align-items: start;
}

.maintenance-content h3 {
    font-size:
        clamp(30px, 2.8vw, 42px);
}

.maintenance-content-head p {
    max-width: 660px;

    margin-top: 18px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 16px;
    line-height: 1.75;
}

.maintenance-proof {
    padding-left: 34px;

    border-left:
        1px solid
        rgba(139, 185, 236, 0.25);
}

.maintenance-proof strong {
    display: block;

    color: var(--blue-light);

    font-size:
        clamp(42px, 4.6vw, 68px);

    line-height: 0.92;
    font-weight: 600;
    letter-spacing: -0.055em;
}

.maintenance-proof span {
    display: block;

    max-width: 260px;

    margin-top: 16px;

    color:
        rgba(255, 255, 255, 0.74);

    font-size: 14px;
    line-height: 1.55;
}

.maintenance-checklist {
    position: relative;
    z-index: 1;

    margin-top: 30px;
}

.maintenance-checklist li::before {
    content: "";
}

.maintenance-checklist li::after {
    content: "";

    position: absolute;

    left: 7px;
    top: 6px;

    width: 7px;
    height: 11px;

    border-right:
        2px solid
        var(--blue-light);

    border-bottom:
        2px solid
        var(--blue-light);

    transform:
        rotate(42deg);
}

.maintenance-content .button {
    position: relative;
    z-index: 1;
}

.maintenance-content > .maintenance-benefits {
    position: relative;
    z-index: 1;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 30px;

    max-width: none;

    margin-top: 34px;
    padding-top: 26px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.1);
}

.maintenance-content > .maintenance-benefits .maintenance-benefit {
    min-height: 0;

    padding:
        0
        0
        0
        18px;

    border: none;
    border-radius: 0;
    background: transparent;

    transform: none;
}

.maintenance-content > .maintenance-benefits .maintenance-benefit::before {
    left: 0;
    top: 2px;

    width: 2px;
    height: 42px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            var(--blue-light),
            rgba(139, 185, 236, 0)
        );
}

.maintenance-content > .maintenance-benefits .maintenance-benefit::after,
.maintenance-content > .maintenance-benefits .maintenance-benefit span {
    display: none;
}

.maintenance-content > .maintenance-benefits .maintenance-benefit:hover {
    background: transparent;
    border-color: transparent;

    transform: none;
}

.maintenance-content > .maintenance-benefits .maintenance-benefit h3 {
    font-size: 15px;
    line-height: 1.2;

    letter-spacing: 0.06em;
}

.maintenance-content > .maintenance-benefits .maintenance-benefit p {
    margin-top: 8px;

    font-size: 13px;
}


/* CONFIANCE */

.trust-section {
    padding: 118px 0 126px;

    background: #1d2835;
}

.trust-section h2 {
    position: relative;

    width: fit-content;

    margin: 0 auto;

    color: var(--white);

    font-family: "Manrope", sans-serif;

    font-size:
        clamp(34px, 4vw, 54px);

    line-height: 1.08;

    font-weight: 800;

    text-align: center;
    letter-spacing: -0.04em;
}

.trust-section h2::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -18px;

    width: 86px;
    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--blue-light),
            rgba(139, 185, 236, 0.12)
        );

    transform:
        translateX(-50%);
}

.home-footer-wave {
    height: clamp(38px, 4.5vw, 68px);

    margin-top: -1px;

    overflow: hidden;

    background: #171f29;
}

.home-footer-wave svg {
    display: block;

    width: 100%;
    height: 100%;
}

.home-footer-wave path {
    fill: #13181f;
}

.trust-gallery {
    margin-top: 82px;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;
}

.trust-card {
    position: relative;

    min-height: 430px;

    display: block;

    overflow: hidden;

    color: var(--white);

    background-size: cover;
    background-position: center;

    text-decoration: none;

    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}

.trust-card::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.08) 20%,
            rgba(0, 0, 0, 0.72) 100%
        );

    opacity: 0;

    transition:
        opacity 0.35s ease;
}

.trust-card-content {
    position: absolute;

    left: 34px;
    right: 28px;
    bottom: 30px;

    z-index: 1;

    opacity: 0;

    transform:
        translateY(18px);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}

.trust-card-content h3 {
    font-family: "Manrope", sans-serif;

    font-size: 32px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: -0.03em;
}

.trust-card-content p {
    margin-top: 8px;

    color:
        rgba(255, 255, 255, 0.88);

    font-size: 16px;
    font-weight: 600;
}

.trust-card:hover {
    transform:
        translateY(-6px);

    filter:
        brightness(1.04);
}

.trust-card:hover::before,
.trust-card:hover .trust-card-content,
.trust-card:focus-visible::before,
.trust-card:focus-visible .trust-card-content {
    opacity: 1;
}

.trust-card:hover .trust-card-content,
.trust-card:focus-visible .trust-card-content {
    transform:
        translateY(0);
}

.trust-card:focus-visible {
    outline:
        3px solid
        var(--blue);

    outline-offset: 5px;
}

.trust-card-one {
    background-image:
        url("images/trust-machine-cafe.webp");
}

.trust-card-two {
    background-image:
        url("images/trust-vitrine-refrigeree.webp");
}

.trust-card-three {
    background-image:
        url("images/trust-four-boulangerie.webp");
}

.trust-card-four {
    background-image:
        url("images/trust-table-du-lac.webp");
}


/* FOOTER */

.footer {
    background: #12171e;

    color: var(--white);

    border-top:
        1px solid
        rgba(255, 255, 255, 0.08);
}

.footer-content {
    padding: 48px 0 34px;

    display: grid;

    grid-template-columns:
        minmax(180px, 0.45fr)
        minmax(0, 1.35fr);

    gap: clamp(8px, 1.4vw, 20px);

    align-items: center;
}

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

.footer-logo img {
    width: auto;
    height: 150px;

    object-fit: contain;
}

.footer-brand p {
    max-width: 390px;

    margin-top: 14px;

    color:
        rgba(255, 255, 255, 0.86);

    font-size: 15px;
    line-height: 1.75;
}

.footer-columns {
    display: grid;

    grid-template-columns:
        minmax(210px, 1fr)
        minmax(150px, 0.7fr)
        minmax(210px, 0.9fr);

    gap: clamp(26px, 4vw, 58px);

    align-items: center;
}

.footer-column h2 {
    margin-bottom: 18px;

    color: var(--white);

    font-size: 20px;
    font-weight: 800;
}

.footer-column a,
.footer-column p {
    display: block;

    color:
        var(--white);

    font-size: 18px;
    line-height: 1.55;

    font-weight: 700;
}

.footer-column > a:not(.footer-contact-button) {
    display: block;
}

.footer-column a {
    width: fit-content;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.footer-column a + a,
.footer-column p + p,
.footer-column p + a {
    margin-top: 10px;
}

.footer-column a:hover {
    color: var(--white);

    transform:
        translateX(4px);
}

.footer-info p + p {
    margin-top: 16px;
}

/* =========================================================
   FOOTER - RÉSEAUX SOCIAUX
========================================================= */

.footer-social-links {
    display: flex;
    align-items: center;
    gap: 22px;
}

.footer-social-links a {
    width: auto;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    background: transparent;
    border: none;
    border-radius: 0;

    color: var(--white);

    text-decoration: none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


/* TAILLE DES LOGOS */

.footer-social-links a svg,
.footer-social-links a img {
    width: 28px;
    height: 28px;

    object-fit: contain;
}


/* SVG */

.footer-social-links a svg {
    fill: currentColor;
}


/* HOVER */

.footer-social-links a:hover {
    color: var(--white);
    transform: translateY(-2px);
}

.contact-button::before,
.button::before,
.product-button::before,
.footer-contact-button::before {
    content: "";

    position: absolute;

    inset: 1px;

    border-radius: inherit;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.34),
            rgba(255, 255, 255, 0.08) 34%,
            rgba(255, 255, 255, 0) 62%
        );

    opacity: 0.7;
}

.contact-button::after,
.button::after,
.product-button::after,
.footer-contact-button::after {
    content: "";

    position: absolute;

    top: -70%;
    left: -35%;

    width: 56%;
    height: 240%;

    border-radius: 999px;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 255, 255, 0.32),
            rgba(255, 255, 255, 0.08) 42%,
            rgba(255, 255, 255, 0) 70%
        );

    transform:
        rotate(18deg)
        translateX(-42%);

    transition:
        transform 0.45s ease,
        opacity 0.45s ease;

    opacity: 0.55;
}

.contact-button:hover::after,
.button:hover::after,
.product-button:hover::after,
.footer-contact-button:hover::after {
    transform:
        rotate(18deg)
        translateX(260%);

    opacity: 0.9;
}

.footer-social-links a + a {
    margin-top: 0;
}

.footer-social-links svg,
.footer-social-links img,
.contact-social-links img {
    width: 15px;
    height: 15px;

    display: block;

    fill: currentColor;
    object-fit: contain;
}

.contact-social-links a img {
    width: 24px;
    height: 24px;
}

.footer-social-links a:hover {
    color: var(--white);
    transform: translateY(-2px);
}

.footer-cta {
    display: flex;
    justify-content: flex-start;

    justify-self: start;
}

.footer-contact-button {
    position: relative;
    overflow: hidden;

    width: fit-content;

    min-height: 54px;
    height: 54px;

    padding: 0 26px;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    gap: 12px;

    border-radius: 8px;

    background: var(--red);
    color: var(--white) !important;

    font-family: "Sora", "Inter", sans-serif;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1;
    letter-spacing: 1px;

    white-space: nowrap;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.footer-contact-button:hover {
    transform: translateY(-2px);

    background: var(--red-dark);
}

.footer-contact-link {
    margin-top: 18px;

    color: var(--blue-light) !important;

    font-weight: 800;
}

.footer-bottom {
    padding: 16px 0 20px;

    align-items: center;
    justify-content: space-between;

    gap: 24px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.08);
}

.footer-bottom p,
.footer-bottom a {
    color:
        rgba(255, 255, 255, 0.72);

    font-size: 12px;
}

.footer-bottom a {
    transition:
        color 0.25s ease;
}

.footer-bottom a:hover {
    color: var(--white);
}

@keyframes sectionReveal {
    from {
        opacity: 0;

        transform: translateY(18px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }
}

/* CONTRASTE GLOBAL */

.hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(4, 8, 13, 0.94) 0%,
            rgba(4, 8, 13, 0.76) 34%,
            rgba(4, 8, 13, 0.3) 66%,
            rgba(4, 8, 13, 0.08) 100%
        ),
        linear-gradient(
            to top,
            rgba(9, 12, 17, 0.42) 0%,
            rgba(21, 88, 166, 0.12) 44%,
            rgba(9, 12, 17, 0) 76%
        );
}

.product-page-hero-overlay {
    background:
        linear-gradient(
            to top,
            rgb(var(--hero-end-rgb)) 0%,
            rgba(var(--hero-end-rgb), 0.58) 20%,
            rgba(var(--hero-end-rgb), 0) 56%
        ),
        linear-gradient(
            90deg,
            rgba(4, 8, 13, 0.93) 0%,
            rgba(4, 8, 13, 0.74) 38%,
            rgba(4, 8, 13, 0.38) 66%,
            rgba(4, 8, 13, 0.14) 100%
        );
}

.product-page-bakery .product-page-hero-overlay,
.product-page-catering .product-page-hero-overlay,
.product-page-vending .product-page-hero-overlay,
.product-page-used .product-page-hero-overlay {
    background:
        linear-gradient(
            to bottom,
            rgba(var(--hero-end-rgb), 0.3) 0%,
            rgba(var(--hero-end-rgb), 0.42) 38%,
            rgba(var(--hero-end-rgb), 0.78) 82%,
            rgb(var(--hero-end-rgb)) 100%
        ),
        linear-gradient(
            90deg,
            rgba(9, 12, 17, 0.38) 0%,
            rgba(9, 12, 17, 0.1) 50%,
            rgba(9, 12, 17, 0.38) 100%
        );
}

.hero h1,
.product-page h1,
.product-intro h2,
.project-support h2,
.partners-intro h2,
.partner-feature-content h3,
.catering-intro-content h2,
.support-timeline-heading h2,
.brand-partners-heading h2,
.history-content h2,
.value-intro h2,
.trust-section h2 {
    text-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.24);
}

.hero-description,
.product-page-text,
.product-page-panel p,
.product-intro-text p,
.project-support-lead,
.project-support-subtitle,
.project-support-item p,
.partners-intro p,
.other-partners p,
.catering-intro-content p,
.support-timeline-heading p,
.support-step p,
.brand-partners-heading p,
.value-intro p,
.value-text p,
.footer-column p,
.footer-bottom p,
.footer-bottom a {
    color:
        rgba(255, 255, 255, 0.72);
}

.product-card::after,
.trust-card::before {
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.08) 10%,
            rgba(0, 0, 0, 0.6) 100%
        );
}

.history-section,
.product-intro-section,
.support-timeline-section {
    background: #1d2835;
}

.products-section,
.project-support-section,
.partners-intro-section,
.value-section,
.brand-partners-section {
    background: #1d2835;
}

.partner-feature-section,
.other-partners-section,
.trust-section {
    background: #171f29;
}

.home-page .trust-section {
    background: #151b23;
    padding-bottom: 0;
}

.other-partners-section {
    background: #1d2632;
}

.partner-feature-section-alt,
.catering-intro-section-alt {
    background: #1d2632;
}

.partner-feature-section:not(.partner-feature-section-alt),
.catering-intro-section:not(.catering-intro-section-alt) {
    background: #171f29;
}

.footer {
    background: #171d26;
}

.product-page-panel,
.value-item,
.brand-partner-card {
    border-color:
        rgba(255, 255, 255, 0.2);
}

.product-page-kicker,
.project-support-kicker,
.partners-intro-kicker,
.support-timeline-heading > span,
.catering-intro-content span,
.value-intro span {
    color: #a8ccf5;
}

.button-main,
.contact-button:not(.highlight-button) {
    box-shadow:
        0 10px 26px
        rgba(21, 88, 166, 0.18);
}

/* TYPOGRAPHIE GLOBALE SORA */

body,
button,
input,
textarea,
select,
.nav a,
.button,
.contact-button,
.product-button,
.footer-contact-button {
    font-family: "Sora", "Inter", sans-serif;
}

h1,
h2,
h3,
.hero h1,
.product-page h1,
.product-page h2,
.products-heading h2,
.history-content h2,
.value-intro h2,
.value-text h3,
.trust-section h2,
.trust-card-content h3,
.catering-intro-content h2,
.support-timeline-heading h2,
.brand-partners-heading h2,
.project-support h2,
.partners-intro h2,
.partner-feature-content h3,
.product-card h2 {
    font-family: "Sora", "Manrope", sans-serif;
    font-weight: 600;
}

p,
.hero-description,
.product-page-text,
.product-page-panel p,
.value-intro p,
.value-text p,
.trust-card-content p,
.catering-intro-content p,
.support-timeline-heading p,
.support-step p,
.brand-partners-heading p,
.project-support-lead,
.project-support-subtitle,
.project-support-item p,
.partners-intro p,
.other-partners p,
.footer-column p,
.footer-bottom p {
    font-family: "Sora", "Inter", sans-serif;
    font-weight: 400;
}

.products-heading span,
.value-intro span,
.footer-column h2,
.product-page-kicker,
.project-support-kicker,
.partners-intro-kicker,
.support-timeline-heading > span,
.catering-intro-content span,
.button,
.nav a,
.history-link,
.value-discover,
.footer-bottom a,
.brand-partner-link,
.brand-partner-card small {
    font-family: "Sora", "Inter", sans-serif;
    font-weight: 500;
}

.button-main,
.contact-button,
.product-button,
.footer-contact-button,
.brand-partner-card strong,
.support-step h3 {
    font-family: "Sora", "Inter", sans-serif;
    font-weight: 600;
}


/* HIERARCHIE TYPOGRAPHIQUE GLOBALE */

body,
input,
textarea,
select {
    font-family: "Sora", "Inter", sans-serif !important;
    font-weight: 400;
}

h1,
h2,
.hero h1,
.product-page h1,
.product-page h2,
.products-heading h2,
.history-content h2,
.value-intro h2,
.trust-section h2,
.catering-intro-content h2,
.support-timeline-heading h2,
.brand-partners-heading h2,
.project-support h2,
.partners-intro h2,
.partner-feature-content h3,
.product-card h2 {
    font-family: "Sora", "Inter", sans-serif !important;
    font-weight: 600 !important;
}

h3,
h4,
h5,
h6,
.products-heading span,
.value-intro span,
.footer-column h2,
.product-page-kicker,
.project-support-kicker,
.partners-intro-kicker,
.support-timeline-heading > span,
.catering-intro-content span,
.brand-partner-card strong,
.brand-partner-card small,
.support-step h3,
.product-page-panel h2,
.product-page-panel h3 {
    font-family: "Sora", "Inter", sans-serif !important;
    font-weight: 500 !important;
}

p,
li,
.hero-description,
.product-page-text,
.product-page-panel p,
.value-intro p,
.value-text p,
.trust-card-content p,
.catering-intro-content p,
.support-timeline-heading p,
.support-step p,
.brand-partners-heading p,
.project-support-lead,
.project-support-subtitle,
.project-support-item p,
.partners-intro p,
.other-partners p,
.footer-column p,
.footer-bottom p {
    font-family: "Sora", "Inter", sans-serif !important;
    font-weight: 400 !important;
}

.nav a,
.dropdown-toggle,
.dropdown-menu a,
.history-link,
.value-discover,
.footer-bottom a,
.brand-partner-link {
    font-family: "Sora", "Inter", sans-serif !important;
    font-weight: 500 !important;
}

button,
.button,
.button-main,
.contact-button,
.product-button,
.footer-contact-button {
    font-family: "Sora", "Inter", sans-serif !important;
    font-weight: 600 !important;
}

.maintenance-highlight {
    gap: 0;
}

.maintenance-main {
    position: relative;

    max-width: none;
}

.maintenance-main::before {
    content: "";

    position: absolute;

    right: 7%;
    top: 6%;

    width: 360px;
    height: 360px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(139, 185, 236, 0.1),
            rgba(139, 185, 236, 0) 64%
        );

    opacity: 0.7;
}

.maintenance-editorial {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(360px, 1.1fr);

    gap:
        clamp(54px, 7vw, 120px);

    align-items: start;
}

.maintenance-copy {
    max-width: 620px;
}

.maintenance-copy > span {
    display: inline-flex;

    color: var(--blue-light);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.maintenance-copy h2 {
    max-width: 610px;

    margin-top: 18px;

    color: var(--white);

    font-size:
        clamp(38px, 4.2vw, 66px);

    line-height: 1.02;
    letter-spacing: -0.045em;
}

.maintenance-copy h2::after {
    content: "";

    display: block;

    width: 82px;
    height: 2px;

    margin-top: 24px;

    background:
        linear-gradient(
            90deg,
            var(--blue-light),
            rgba(139, 185, 236, 0)
        );
}

.maintenance-copy p {
    max-width: 560px;

    margin-top: 24px;

    color:
        rgba(255, 255, 255, 0.7);

    font-size: 17px;
    line-height: 1.72;
}

.maintenance-copy .button {
    margin-top: 34px;
}

.maintenance-service {
    position: relative;

    padding-top: 14px;
}

.maintenance-service::before {
    content: "";

    position: absolute;

    left: -42px;
    top: 0;
    bottom: 0;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            rgba(139, 185, 236, 0),
            rgba(139, 185, 236, 0.35),
            rgba(139, 185, 236, 0)
        );
}

.maintenance-sav {
    display: flex;
    align-items: baseline;

    gap: 20px;
}

.maintenance-sav span {
    color:
        rgba(255, 255, 255, 0.92);

    font-size:
        clamp(52px, 7vw, 118px);

    line-height: 0.86;
    font-weight: 600;
    letter-spacing: -0.07em;
}

.maintenance-sav strong {
    color: var(--blue-light);

    font-size:
        clamp(76px, 11vw, 178px);

    line-height: 0.82;
    font-weight: 600;
    letter-spacing: -0.08em;
}

.maintenance-service > p {
    max-width: 430px;

    margin-top: 24px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 15px;
    line-height: 1.68;
}

.maintenance-service > .maintenance-benefits {
    display: flex;
    flex-direction: column;

    gap: 0;

    max-width: 620px;

    margin-top: 44px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.12);
}

.maintenance-service .maintenance-benefit {
    position: relative;

    display: grid;

    grid-template-columns:
        96px
        minmax(0, 1fr);

    column-gap: 28px;

    min-height: 0;

    padding:
        24px
        0;

    border: none;
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.1);

    border-radius: 0;
    background: transparent;

    transform: none;
}

.maintenance-service .maintenance-benefit::before,
.maintenance-service .maintenance-benefit::after {
    display: none;
}

.maintenance-service .maintenance-benefit > span {
    display: block;

    grid-row:
        1
        / span 2;

    color:
        rgba(139, 185, 236, 0.28);

    font-size:
        clamp(44px, 4.5vw, 68px);

    line-height: 0.9;
    font-weight: 600;
    letter-spacing: -0.07em;
}

.maintenance-service .maintenance-benefit h3 {
    color: var(--white);

    font-size: 15px;
    line-height: 1.2;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.maintenance-service .maintenance-benefit p {
    max-width: 360px;

    margin-top: 8px;

    color:
        rgba(255, 255, 255, 0.62);

    font-size: 14px;
    line-height: 1.55;
}

.maintenance-service .maintenance-benefit:hover {
    background: transparent;
    border-color:
        rgba(139, 185, 236, 0.28);

    transform: none;
}

.maintenance-service .maintenance-benefit:hover span,
.maintenance-service .maintenance-benefit:hover h3 {
    color: var(--blue-light);
}

.value-section {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 73% 28%,
            rgba(28, 101, 188, 0.12),
            rgba(28, 101, 188, 0) 32%
        ),
        radial-gradient(
            circle at 18% 22%,
            rgba(139, 185, 236, 0.045),
            rgba(139, 185, 236, 0) 24%
        ),
        linear-gradient(
            180deg,
            #1e2732,
            #19212a 48%,
            #1d2732
        );
}

.value-section::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.12;

    background-image:
        radial-gradient(
            rgba(255, 255, 255, 0.38) 0.6px,
            transparent 0.6px
        );

    background-size: 18px 18px;
    mix-blend-mode: overlay;
}

.maintenance-main::before {
    right: -8%;
    top: -10%;

    width: 540px;
    height: 540px;

    background:
        radial-gradient(
            circle,
            rgba(139, 185, 236, 0.14),
            rgba(28, 101, 188, 0.05) 34%,
            rgba(139, 185, 236, 0) 68%
        );

    filter: blur(8px);
    opacity: 0.72;
}

.maintenance-main::after {
    content: "";

    position: absolute;

    right: 28%;
    bottom: 5%;

    width: 260px;
    height: 260px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0) 68%
        );

    filter: blur(10px);
}

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

.maintenance-copy {
    position: relative;

    padding:
        16px
        0
        18px;
}

.maintenance-copy::before {
    content: "";

    position: absolute;

    left: -72px;
    top: 4%;

    width: 220px;
    height: 220px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(139, 185, 236, 0.08),
            rgba(139, 185, 236, 0) 68%
        );

    filter: blur(6px);
}

.maintenance-copy > span {
    position: relative;

    align-items: center;

    gap: 14px;
}

.maintenance-copy > span::after {
    content: "";

    width: 74px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(139, 185, 236, 0.95),
            rgba(255, 255, 255, 0.18),
            rgba(139, 185, 236, 0)
        );
}

.maintenance-copy h2 {
    position: relative;

    text-shadow:
        0 18px 42px
        rgba(0, 0, 0, 0.28);
}

.maintenance-copy h2::after {
    width: 128px;
    height: 1px;

    margin-top: 28px;

    background:
        linear-gradient(
            90deg,
            rgba(139, 185, 236, 0),
            rgba(139, 185, 236, 0.9),
            rgba(255, 255, 255, 0.24),
            rgba(139, 185, 236, 0)
        );
}

.maintenance-cta {
    position: relative;

    overflow: hidden;

    padding-right: 34px;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    background:
        linear-gradient(
            145deg,
            rgba(49, 129, 218, 1),
            rgba(22, 98, 181, 0.96) 54%,
            rgba(13, 75, 147, 0.98)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.26),
        inset 0 -12px 28px
        rgba(0, 0, 0, 0.12),
        0 18px 42px
        rgba(21, 96, 181, 0.22);
}

.maintenance-cta::before {
    content: "";

    position: absolute;

    inset:
        1px
        1px
        auto;

    height: 45%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.28),
            rgba(255, 255, 255, 0)
        );

    opacity: 0.42;
}

.maintenance-cta::after {
    content: "→";

    position: relative;

    margin-left: 12px;

    transition:
        transform 0.28s ease;
}

.maintenance-cta:hover::after {
    transform:
        translateX(5px);
}

.maintenance-service {
    isolation: isolate;

    padding:
        clamp(28px, 4vw, 52px)
        0
        0
        clamp(10px, 2vw, 32px);
}

.maintenance-service::before {
    left: -26px;

    opacity: 0.72;
}

.maintenance-service::after {
    content: "";

    position: absolute;

    z-index: -1;

    right:
        clamp(0px, 3vw, 44px);
    top: 0;

    width:
        min(92%, 560px);
    height:
        clamp(230px, 25vw, 360px);

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius:
        42px
        86px
        54px
        112px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.13),
            rgba(255, 255, 255, 0.035) 42%,
            rgba(139, 185, 236, 0.08)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.22),
        inset 0 -1px 0
        rgba(255, 255, 255, 0.06),
        0 42px 90px
        rgba(0, 0, 0, 0.28);

    backdrop-filter:
        blur(22px)
        saturate(150%);
    -webkit-backdrop-filter:
        blur(22px)
        saturate(150%);
}

.maintenance-sav {
    position: relative;

    margin-left:
        clamp(0px, 2vw, 26px);

    padding-top: 12px;
}

.maintenance-sav::before {
    content: "";

    position: absolute;

    left: 3%;
    top: 0;

    width: 78%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.56),
            rgba(139, 185, 236, 0.12),
            rgba(255, 255, 255, 0)
        );

    opacity: 0.62;
}

.maintenance-sav span {
    color:
        rgba(255, 255, 255, 0.86);

    text-shadow:
        0 1px 0
        rgba(255, 255, 255, 0.2),
        0 22px 48px
        rgba(0, 0, 0, 0.28);
}

.maintenance-sav strong {
    position: relative;

    margin-right:
        clamp(-42px, -2.6vw, -12px);

    text-shadow:
        0 1px 0
        rgba(255, 255, 255, 0.2),
        0 24px 56px
        rgba(21, 96, 181, 0.28);
}

.maintenance-service > p {
    position: relative;

    margin-left:
        clamp(0px, 2vw, 30px);

    padding-left: 18px;

    border-left:
        1px solid
        rgba(139, 185, 236, 0.4);
}

.maintenance-service > .maintenance-benefits {
    position: relative;

    margin-top: 52px;

    border-top-color:
        rgba(255, 255, 255, 0.09);
}

.maintenance-service .maintenance-benefit {
    overflow: hidden;

    margin-left:
        calc(var(--offset, 0px));

    padding:
        25px
        24px
        25px
        0;

    transition:
        padding-left 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.maintenance-service .maintenance-benefit:nth-child(2) {
    --offset: 30px;
}

.maintenance-service .maintenance-benefit:nth-child(3) {
    --offset: 62px;
}

.maintenance-service .maintenance-benefit::before {
    content: "";

    display: block;

    position: absolute;

    inset:
        8px
        0;

    z-index: -1;

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius:
        18px
        34px
        18px
        38px;

    background:
        linear-gradient(
            115deg,
            rgba(255, 255, 255, 0.09),
            rgba(255, 255, 255, 0.028) 54%,
            rgba(139, 185, 236, 0.05)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.18);

    opacity: 0;

    backdrop-filter:
        blur(14px)
        saturate(140%);
    -webkit-backdrop-filter:
        blur(14px)
        saturate(140%);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}

.maintenance-service .maintenance-benefit::after {
    content: "";

    display: block;

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--blue-light),
            rgba(139, 185, 236, 0)
        );

    transition:
        width 0.35s ease;
}

.maintenance-service .maintenance-benefit:hover {
    padding-left: 20px;

    border-color:
        rgba(139, 185, 236, 0.28);

    transform:
        translateX(4px);
}

.maintenance-service .maintenance-benefit:hover::before {
    opacity: 1;

    transform:
        translateY(-1px);
}

.maintenance-service .maintenance-benefit:hover::after {
    width: 42%;
}

.maintenance-copy {
    max-width: 570px;
}

.maintenance-copy h2 {
    max-width: 560px;
}

.maintenance-service {
    padding:
        clamp(18px, 2.6vw, 36px)
        0
        0
        clamp(0px, 1vw, 18px);
}

.maintenance-service::after {
    display: none;
}

.maintenance-service::before {
    left: -34px;

    background:
        linear-gradient(
            180deg,
            rgba(139, 185, 236, 0),
            rgba(139, 185, 236, 0.22) 34%,
            rgba(255, 255, 255, 0.08) 58%,
            rgba(139, 185, 236, 0)
        );
}

.maintenance-sav {
    display: block;

    width: fit-content;

    margin-left:
        clamp(0px, 1.4vw, 18px);

    padding-top: 0;
}

.maintenance-sav::before {
    left: auto;
    right: 4%;
    top: 50%;

    width:
        clamp(160px, 18vw, 300px);
    height:
        clamp(160px, 18vw, 300px);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(139, 185, 236, 0.18),
            rgba(139, 185, 236, 0.06) 34%,
            rgba(139, 185, 236, 0) 70%
        );

    filter: blur(22px);
    opacity: 0.7;

    transform:
        translateY(-34%);
}

.maintenance-sav::after {
    content: "";

    position: absolute;

    right: 2%;
    bottom: 9%;

    width: 92px;
    height: 30px;

    border:
        1px solid
        rgba(255, 255, 255, 0.13);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.035);

    backdrop-filter:
        blur(10px)
        saturate(130%);
    -webkit-backdrop-filter:
        blur(10px)
        saturate(130%);

    transform:
        rotate(-8deg);
}

.maintenance-sav span,
.maintenance-sav strong {
    position: relative;
    z-index: 1;

    display: block;
}

.maintenance-sav span {
    font-size:
        clamp(72px, 7.6vw, 132px);

    line-height: 0.82;
}

.maintenance-sav strong {
    margin:
        -8px
        0
        0
        clamp(52px, 6vw, 102px);

    font-size:
        clamp(92px, 11.6vw, 190px);
}

.maintenance-glass-pill {
    position: relative;
    z-index: 3;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    width: fit-content;

    margin:
        -10px
        0
        0
        clamp(42px, 5vw, 92px);

    padding:
        11px
        18px;

    max-width: none;

    color:
        rgba(255, 255, 255, 0.86);

    border-left: none;

    border:
        1px solid
        rgba(255, 255, 255, 0.2);

    border-radius: 999px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.13),
            rgba(255, 255, 255, 0.045)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.22),
        0 18px 40px
        rgba(0, 0, 0, 0.18),
        0 0 34px
        rgba(139, 185, 236, 0.08);

    backdrop-filter:
        blur(18px)
        saturate(150%);
    -webkit-backdrop-filter:
        blur(18px)
        saturate(150%);

    font-size: 13px;
    font-weight: 500;
    line-height: 1;
}

.maintenance-glass-pill::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--blue-light);

    box-shadow:
        0 0 14px
        rgba(139, 185, 236, 0.45);
}

.maintenance-service > .maintenance-benefits {
    margin-top: 58px;
    margin-left:
        clamp(16px, 3vw, 54px);
    padding-left: 42px;

    border-top: none;
}

.maintenance-service > .maintenance-benefits::before {
    content: "";

    position: absolute;

    left: 14px;
    top: 12px;
    bottom: 24px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            rgba(139, 185, 236, 0.36),
            rgba(255, 255, 255, 0.12) 54%,
            rgba(139, 185, 236, 0)
        );
}

.maintenance-service .maintenance-benefit,
.maintenance-service .maintenance-benefit:nth-child(2),
.maintenance-service .maintenance-benefit:nth-child(3) {
    --offset: 0px;

    grid-template-columns:
        92px
        minmax(0, 1fr);

    margin-left: 0;

    padding:
        20px
        0
        20px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.075);
}

.maintenance-service .maintenance-benefit::before {
    inset:
        8px
        -18px
        8px
        -54px;

    border-radius: 999px 22px 22px 999px;

    background:
        linear-gradient(
            110deg,
            rgba(255, 255, 255, 0.09),
            rgba(255, 255, 255, 0.026) 56%,
            rgba(139, 185, 236, 0.045)
        );
}

.maintenance-service .maintenance-benefit::after {
    left: -34px;
    top: 34px;
    bottom: auto;

    width: 9px;
    height: 9px;

    border:
        2px solid
        rgba(139, 185, 236, 0.88);

    border-radius: 50%;

    background: #1d2732;

    box-shadow:
        0 0 0 5px
        rgba(139, 185, 236, 0.06);
}

.maintenance-service .maintenance-benefit > span {
    color:
        rgba(255, 255, 255, 0.13);

    font-size:
        clamp(50px, 5vw, 74px);
}

.maintenance-service .maintenance-benefit:hover {
    padding-left: 10px;

    transform:
        translateX(3px);
}

.maintenance-service .maintenance-benefit:hover::after {
    width: 9px;

    background: var(--blue-light);

    box-shadow:
        0 0 0 6px
        rgba(139, 185, 236, 0.09),
        0 0 22px
        rgba(139, 185, 236, 0.45);
}

.maintenance-service .maintenance-benefit:hover > span {
    color:
        rgba(139, 185, 236, 0.38);
}

.maintenance-cta {
    background:
        linear-gradient(
            145deg,
            rgba(36, 116, 209, 0.74),
            rgba(21, 88, 166, 0.62)
        );

    backdrop-filter:
        blur(14px)
        saturate(145%);
    -webkit-backdrop-filter:
        blur(14px)
        saturate(145%);
}


/* Maintenance section - clean industrial version */
.value-section {
    position: relative;

    overflow: hidden;

    padding:
        82px
        0
        88px;

    background: #1d2732;
}

.value-section::before,
.value-section::after,
.maintenance-main::before,
.maintenance-main::after {
    display: none;
}

.maintenance-highlight,
.maintenance-main {
    display: block;

    max-width: none;
}

.maintenance-simple {
    max-width: 1240px;
}

.maintenance-simple-heading {
    max-width: 760px;
}

.maintenance-simple-heading span {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    color: var(--blue-light);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.maintenance-simple-heading span::after {
    content: "";

    width: 58px;
    height: 1px;

    background:
        rgba(139, 185, 236, 0.72);
}

.maintenance-simple-heading h2 {
    max-width: 640px;

    margin-top: 16px;

    color: var(--white);

    font-size:
        clamp(36px, 3.8vw, 58px);

    line-height: 1.04;
    letter-spacing: -0.04em;
}

.maintenance-simple-heading p {
    max-width: 680px;

    margin-top: 22px;

    color:
        rgba(255, 255, 255, 0.7);

    font-size: 16px;
    line-height: 1.7;
}

.maintenance-simple-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, 0.38fr);

    gap:
        clamp(34px, 5vw, 72px);

    align-items: start;

    margin-top: 48px;
    padding-top: 34px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.1);
}

.maintenance-contract {
    padding-right:
        clamp(24px, 4vw, 58px);
}

.maintenance-contract h3,
.maintenance-sav-simple h3 {
    color: var(--white);

    font-size:
        clamp(24px, 2.2vw, 34px);

    line-height: 1.12;
    letter-spacing: -0.025em;
}

.maintenance-contract h3 {
    text-transform: uppercase;
}

.maintenance-contract p,
.maintenance-sav-simple p {
    max-width: 560px;

    margin-top: 14px;

    color:
        rgba(255, 255, 255, 0.66);

    font-size: 15px;
    line-height: 1.68;
}

.maintenance-advantages {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    margin-top: 30px;

    border-top:
        1px solid
        rgba(139, 185, 236, 0.22);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.09);
}

.maintenance-advantages span {
    padding:
        18px
        20px;

    color:
        rgba(255, 255, 255, 0.86);

    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.maintenance-advantages span + span {
    border-left:
        1px solid
        rgba(255, 255, 255, 0.1);
}

.maintenance-sav-simple {
    padding-left:
        clamp(28px, 4vw, 54px);

    border-left:
        1px solid
        rgba(255, 255, 255, 0.14);
}

.maintenance-sav-simple h3 {
    color: var(--blue-light);
}

.maintenance-simple-link {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-top: 34px;

    color: var(--blue-light);

    font-size: 15px;
    font-weight: 600;

    text-decoration: none;
}

.maintenance-simple-link span {
    transition:
        transform 0.25s ease;
}

.maintenance-simple-link:hover span {
    transform:
        translateX(5px);
}

/* Maintenance section - editorial magazine direction */
.maintenance-magazine {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 0.52fr)
        minmax(240px, 0.26fr)
        minmax(220px, 0.22fr);

    column-gap:
        clamp(36px, 5vw, 86px);

    align-items: start;

    min-height: 460px;
}

.maintenance-magazine::before {
    content: "";

    position: absolute;

    left: 0;
    right: 8%;
    top: 48%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(139, 185, 236, 0.64),
            rgba(255, 255, 255, 0.16) 42%,
            rgba(139, 185, 236, 0)
        );
}

.maintenance-magazine-intro {
    position: relative;
    z-index: 1;
}

.maintenance-magazine-intro > span,
.maintenance-magazine-contract > span {
    display: inline-flex;

    color: var(--blue-light);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.maintenance-magazine-intro h2 {
    max-width: 560px;

    margin-top: 18px;

    color: var(--white);

    font-size:
        clamp(46px, 5vw, 78px);

    line-height: 0.98;
    letter-spacing: -0.055em;
}

.maintenance-magazine-intro p {
    max-width: 520px;

    margin-top: 28px;

    color:
        rgba(255, 255, 255, 0.68);

    font-size: 16px;
    line-height: 1.72;
}

.maintenance-magazine-contract {
    position: relative;
    z-index: 1;

    padding-top: 70px;
}

.maintenance-magazine-contract p {
    margin-top: 20px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 15px;
    line-height: 1.68;
}

.maintenance-steps {
    margin-top: 38px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.12);
}

.maintenance-steps div {
    display: flex;
    align-items: center;

    gap: 16px;

    padding:
        18px
        0;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.11);
}

.maintenance-steps strong {
    color:
        rgba(139, 185, 236, 0.72);

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.maintenance-steps span {
    color: var(--white);

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.maintenance-magazine-sav {
    position: relative;
    z-index: 1;

    width:
        calc(100% + 8vw);

    padding-top: 34px;
}

.maintenance-magazine-sav > span {
    display: block;

    color:
        rgba(255, 255, 255, 0.78);

    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.maintenance-magazine-sav strong {
    display: block;

    margin-top: 8px;

    color: var(--blue-light);

    font-size:
        clamp(74px, 8.8vw, 132px);

    line-height: 0.86;
    font-weight: 600;
    letter-spacing: -0.08em;

    white-space: nowrap;
}

.maintenance-magazine-sav p {
    max-width: 250px;

    margin-top: 26px;

    color:
        rgba(255, 255, 255, 0.66);

    font-size: 15px;
    line-height: 1.6;
}

.maintenance-magazine-link {
    position: absolute;

    left: 0;
    bottom: 0;

    display: inline-flex;
    align-items: center;

    gap: 12px;

    color: var(--blue-light);

    font-size: 15px;
    font-weight: 600;

    text-decoration: none;
}

.maintenance-magazine-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 42px;
    height: 1px;

    background:
        rgba(139, 185, 236, 0.72);

    transition:
        width 0.25s ease;
}

.maintenance-magazine-link span {
    transition:
        transform 0.25s ease;
}

.maintenance-magazine-link:hover::after {
    width: 100%;
}

.maintenance-magazine-link:hover span {
    transform:
        translateX(5px);
}

@media (min-width: 1280px) {
    .maintenance-magazine-sav {
        margin-right:
            calc((100vw - 100%) / -2);
    }
}

/* Maintenance section - reference layout */
.value-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 0;

    background: #1d2835;
}

.value-section::before,
.value-section::after,
.maintenance-main::before,
.maintenance-main::after {
    display: none;
}

.maintenance-highlight,
.maintenance-main {
    display: block;
    width: 100%;
    max-width: none;
}

.maintenance-reference {
    position: relative;

    min-height: clamp(330px, 28vw, 390px);

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    padding:
        clamp(52px, 4.5vw, 68px)
        0
        clamp(42px, 3.8vw, 58px);

    text-align: center;
}

.maintenance-reference-curve {
    position: absolute;
    z-index: 1;

    top: clamp(54px, 5vw, 74px);
    left: 50%;

    width: 100vw;
    height: clamp(210px, 20vw, 280px);

    pointer-events: none;

    transform: translateX(-50%);
}

.maintenance-reference-curve svg {
    display: block;

    width: 100%;
    height: 100%;

    overflow: visible;
}

.maintenance-reference-curve path {
    fill: none;

    stroke: #00a9e8;
    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: 0.46;
}

.maintenance-curve-line {
    stroke-width: clamp(22px, 2vw, 30px);
}

.maintenance-reference-copy {
    position: relative;
    z-index: 3;

    width: min(100%, 760px);
    max-width: none;

    margin: 0 auto;
}

.maintenance-reference-label {
    position: relative;
    z-index: 4;

    display: inline-block;

    padding: 0 8px;
    margin-bottom: clamp(16px, 1.6vw, 22px);

    background:
        linear-gradient(
            180deg,
            rgba(9, 17, 25, 0.86),
            rgba(9, 17, 25, 0.56)
        );

    color: #73b8f7;

    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(10px, 0.78vw, 12px);
    font-weight: 600;
    line-height: 1;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.maintenance-reference-label::after {
    display: none;
}

.maintenance-reference-copy h2 {
    position: relative;
    z-index: 3;

    width: min(100%, 700px);
    max-width: none;

    margin: 0 auto;

    color: #f7f9fb;

    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(44px, 4.6vw, 70px);
    font-weight: 700;

    line-height: 1.01;
    letter-spacing: -0.047em;

    text-align: center;
    text-wrap: balance;

    text-shadow:
        0 3px 18px
        rgba(0, 0, 0, 0.16);
}

.maintenance-reference-copy h2::before,
.maintenance-reference-copy h2::after {
    display: none;
}

.maintenance-reference-copy p {
    width: min(100%, 500px);
    max-width: none;

    margin:
        clamp(20px, 1.8vw, 26px)
        auto
        0;

    color:
        rgba(
            239,
            244,
            249,
            0.72
        );

    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(12px, 0.9vw, 14px);
    font-weight: 400;

    line-height: 1.7;
    letter-spacing: -0.012em;

    text-align: center;
}

.maintenance-reference-copy a {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    margin-top: clamp(20px, 1.7vw, 26px);

    color: #71b9fa;

    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(11px, 0.82vw, 13px);
    font-weight: 500;

    line-height: 1;
    text-decoration: none;

    transition:
        color 220ms ease;
}

.maintenance-reference-copy a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -10px;

    width: 62px;
    height: 1px;

    background:
        rgba(
            102,
            178,
            246,
            0.82
        );

    transition:
        width 260ms ease,
        background 260ms ease;
}

.maintenance-reference-copy a span {
    display: inline-block;

    transition:
        transform 220ms ease;
}

.maintenance-reference-copy a:hover {
    color: #a7d5ff;
}

.maintenance-reference-copy a:hover::after {
    width: 100%;

    background:
        rgba(
            167,
            213,
            255,
            0.82
        );
}

.maintenance-reference-copy a:hover span {
    transform: translateX(5px);
}

.vending-intro {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 18px;

    text-align: center;
}

.vending-intro-heading {
    max-width: 760px;
}

.vending-intro-heading > span {
    display: inline-flex;

    color: var(--blue-light);

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.vending-intro-heading h2 {
    margin-top: 8px;

    color: var(--white);

    font-size:
        clamp(32px, 3.4vw, 54px);

    line-height: 1.06;
    letter-spacing: -0.035em;
}

.vending-intro-heading p {
    max-width: 560px;

    margin:
        10px
        auto
        0;

    color:
        rgba(255, 255, 255, 0.68);

    font-size: 14px;
    line-height: 1.6;
}

.vending-showcase {
    position: relative;

    width:
        min(100%, 1040px);

    min-height:
        clamp(340px, 34vw, 480px);

    display: grid;
    place-items: center;
}

.vending-showcase::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 2%;

    width:
        min(74%, 520px);
    height: 70px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(29, 100, 190, 0.24),
            rgba(29, 100, 190, 0) 70%
        );

    transform:
        translateX(-50%);
}

.vending-machine-wrap {
    position: relative;
    z-index: 2;
}

.vending-machine-wrap img {
    display: block;

    width:
        clamp(260px, 32vw, 450px);
    max-height: 560px;

    object-fit: contain;
}

.vending-callout {
    position: absolute;
    z-index: 3;

    display: grid;

    grid-template-columns:
        40px
        auto;

    grid-template-areas:
        "icon title"
        "icon text";

    align-items: center;

    gap:
        2px
        12px;

    color: var(--white);

    text-align: left;

    max-width: 260px;
}

.vending-callout::before {
    content: "";

    position: absolute;

    top: 50%;

    width:
        clamp(70px, 9vw, 126px);
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(139, 185, 236, 0),
            rgba(139, 185, 236, 0.7)
        );
}

.vending-callout::after {
    content: "";

    position: absolute;

    top:
        calc(50% - 3px);

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--blue-light);
}

.vending-callout-left::before {
    left:
        calc(100% + 16px);
}

.vending-callout-left::after {
    left:
        calc(100% + 16px + clamp(70px, 9vw, 126px));
}

.vending-callout-right::before {
    right:
        calc(100% + 16px);

    transform:
        rotate(180deg);
}

.vending-callout-right::after {
    right:
        calc(100% + 16px + clamp(70px, 9vw, 126px));
}

.vending-callout-left {
    left: 2%;
}

.vending-callout-top {
    top: 23%;
}

.vending-callout-top::before {
    width:
        clamp(90px, 11vw, 154px);
}

.vending-callout-top::after {
    left:
        calc(100% + 16px + clamp(90px, 11vw, 154px));
}

.vending-callout-bottom {
    top: 63%;
}

.vending-callout-bottom::before {
    top: 86%;
}

.vending-callout-bottom::after {
    top:
        calc(86% - 3px);
}

.vending-callout-right {
    right: 2%;
    top: 48%;
}

.vending-callout > span {
    position: relative;

    grid-area: icon;

    width: 40px;
    height: 40px;

    border:
        1px solid
        rgba(139, 185, 236, 0.26);

    background:
        rgba(22, 88, 166, 0.16);
}

.vending-callout > span::before,
.vending-callout > span::after {
    content: "";

    position: absolute;
}

.vending-callout > span svg {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 22px;
    height: 22px;

    color: var(--blue-light);

    transform:
        translate(-50%, -50%);
}

.vending-callout-top > span::before,
.vending-callout-top > span::after,
.vending-callout-bottom > span::before,
.vending-callout-bottom > span::after,
.vending-callout-right > span::before,
.vending-callout-right > span::after {
    display: none;
}

.vending-callout-top > span::before {
    left: 12px;
    top: 13px;

    width: 16px;
    height: 14px;

    border:
        2px solid
        var(--blue-light);

    border-radius: 3px;
}

.vending-callout-top > span::after {
    left: 15px;
    top: 8px;

    width: 10px;
    height: 7px;

    border:
        2px solid
        var(--blue-light);

    border-bottom: none;

    border-radius:
        8px
        8px
        0
        0;
}

.vending-callout-bottom > span::before {
    left: 11px;
    top: 11px;

    width: 17px;
    height: 17px;

    border-left:
        2px solid
        var(--blue-light);

    border-bottom:
        2px solid
        var(--blue-light);

    transform:
        rotate(-45deg);
}

.vending-callout-bottom > span::after {
    left: 22px;
    top: 9px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--blue-light);
}

.vending-callout-right > span::before {
    left: 10px;
    top: 16px;

    width: 20px;
    height: 12px;

    border-top:
        2px solid
        var(--blue-light);

    border-radius:
        18px
        18px
        0
        0;
}

.vending-callout-right > span::after {
    left: 16px;
    top: 22px;

    width: 8px;
    height: 8px;

    border:
        2px solid
        var(--blue-light);

    border-top: none;
    border-left: none;

    transform:
        rotate(45deg);
}

.vending-callout strong {
    grid-area: title;

    font-size: 14px;
    line-height: 1.1;
    font-weight: 600;
}

.vending-callout p {
    grid-area: text;

    margin: 0;

    color:
        rgba(255, 255, 255, 0.7);

    font-size: 12px;
    line-height: 1.35;
}

.vending-callout-bottom {
    max-width: 300px;
}

.vending-callout-right {
    max-width: 280px;
}

.vending-intro > .vending-intro-link {
    margin-top: -18px;
}

.vending-solution-points div::before,
.vending-solution-points div::after {
    display: none;
}

.vending-solution-points .solution-icon {
    grid-row: 1 / span 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    margin-top: 0;

    color: var(--blue-light);
}

.vending-solution-points .solution-icon svg,
.vending-line-icon svg,
.timeline-icon svg {
    width: 100%;
    height: 100%;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vending-solution-points .solution-text {
    margin-top: 5px;
}

.vending-section-heading {
    max-width: 760px;
}

.vending-section-heading-center {
    margin-inline: auto;
    text-align: center;
}

.vending-section-heading > span,
.vending-final-cta > div > span {
    display: inline-flex;

    color: var(--blue);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.vending-section-heading h2,
.vending-final-cta h2 {
    margin-top: 14px;

    font-size:
        clamp(36px, 4.4vw, 64px);

    line-height: 1.02;
    letter-spacing: -0.055em;
}

.vending-section-heading p,
.vending-final-cta p {
    max-width: 650px;

    margin-top: 20px;

    font-size: 16px;
    line-height: 1.7;
}

.vending-custom-section {
    padding:
        clamp(88px, 9vw, 136px)
        0
        clamp(82px, 8vw, 128px);

    background: #1c2733;
    color: var(--white);
}

.vending-custom-section .vending-section-heading h2,
.vending-process-section .vending-section-heading h2,
.vending-support-section .vending-section-heading h2 {
    color: var(--white);
}

.vending-custom-section .vending-section-heading p,
.vending-process-section .vending-section-heading p,
.vending-support-section .vending-section-heading p {
    color: rgba(255, 255, 255, 0.66);
}

.vending-custom-showcase {
    position: relative;

    min-height:
        clamp(560px, 55vw, 820px);

    margin-top:
        clamp(42px, 6vw, 76px);

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.vending-custom-showcase img {
    position: relative;
    z-index: 2;

    width:
        min(42vw, 560px);

    object-fit: contain;

    filter:
        drop-shadow(28px 44px 34px rgba(8, 14, 24, 0.28));
}

.vending-custom-number {
    position: absolute;
    z-index: 1;

    right: 6%;
    bottom: 12%;

    color: rgba(139, 185, 236, 0.07);

    font-size:
        clamp(140px, 19vw, 300px);
    font-weight: 600;
    line-height: 0.8;
    letter-spacing: -0.08em;
}

.custom-note {
    position: absolute;
    z-index: 3;

    width:
        min(250px, 24vw);
}

.custom-note span {
    display: block;

    height: 1px;

    margin-bottom: 14px;

    background: rgba(24, 105, 191, 0.48);
}

.custom-note span::after {
    content: "";

    display: block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--blue);

    transform:
        translateY(-3px);
}

.custom-note strong {
    display: block;

    color: var(--white);

    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

.custom-note p {
    margin-top: 8px;

    color: rgba(255, 255, 255, 0.64);

    font-size: 14px;
    line-height: 1.5;
}

.custom-note-cold {
    left: 4%;
    top: 18%;
}

.custom-note-trays {
    right: 3%;
    top: 22%;
}

.custom-note-channels {
    left: 6%;
    bottom: 18%;
}

.custom-note-brand {
    right: 5%;
    bottom: 16%;
}

.vending-remote-section {
    padding:
        clamp(88px, 9vw, 136px)
        0;

    background: #151f2a;
    color: var(--white);
}

.vending-remote {
    display: grid;
    grid-template-columns:
        minmax(0, 0.56fr)
        minmax(260px, 0.44fr);

    gap:
        clamp(54px, 8vw, 118px);

    align-items: center;
}

.vending-remote-section .vending-section-heading p {
    color: rgba(255, 255, 255, 0.66);
}

.vending-remote-features {
    max-width: 720px;

    margin-top: 42px;

    border-top:
        1px solid rgba(255, 255, 255, 0.12);
}

.vending-remote-features div {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 18px;

    padding:
        22px
        0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.12);
}

.vending-line-icon,
.timeline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    color: var(--blue-light);
}

.vending-remote-features strong,
.vending-support-grid h3,
.vending-timeline h3 {
    color: inherit;

    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
}

.vending-remote-features p {
    grid-column: 2;

    margin-top: 6px;

    color: rgba(255, 255, 255, 0.62);

    font-size: 14px;
    line-height: 1.55;
}

.vending-phone {
    position: relative;

    width:
        min(100%, 310px);
    aspect-ratio: 0.52;

    margin-inline: auto;

    border:
        1px solid rgba(255, 255, 255, 0.18);

    border-radius: 34px;

    background:
        linear-gradient(145deg, #1d2836, #11171f);

    padding: 14px;
}

.vending-phone-screen {
    height: 100%;

    border-radius: 24px;

    background: #192532;

    padding: 32px 24px;
}

.vending-phone-screen span {
    color: var(--blue-light);

    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.vending-phone-screen strong {
    display: block;

    margin-top: 14px;

    color: var(--white);

    font-size: 24px;
    font-weight: 600;
}

.phone-status {
    height: 12px;

    margin-top: 24px;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.16);
}

.phone-status-blue {
    width: 72%;

    background: rgba(139, 185, 236, 0.75);
}

.phone-status-short {
    width: 54%;
}

.phone-chart {
    display: flex;
    align-items: end;
    gap: 12px;

    height: 120px;

    margin-top: 40px;
}

.phone-chart i {
    width: 22px;

    border-radius: 16px 16px 4px 4px;

    background: rgba(24, 105, 191, 0.72);
}

.phone-chart i:nth-child(1) {
    height: 54%;
}

.phone-chart i:nth-child(2) {
    height: 78%;
}

.phone-chart i:nth-child(3) {
    height: 46%;
}

.phone-chart i:nth-child(4) {
    height: 88%;
}

.vending-process-section {
    padding:
        clamp(52px, 6vw, 82px)
        0;

    background: #1c2733;
    color: var(--white);
}

.vending-support-process-section {
    position: relative;
    overflow: hidden;

    padding:
        clamp(82px, 8vw, 122px)
        0;

    background: #151b23;
    color: var(--white);
}

.vending-support-process-section::before {
    display: none;
}

.vending-support-process-section > .container {
    position: relative;
    z-index: 1;
}

.vending-support-process-section .vending-process {
    display: grid;
    grid-template-columns:
        minmax(280px, 0.42fr)
        minmax(0, 0.58fr);

    gap:
        clamp(48px, 7vw, 96px);

    align-items: start;
}

.vending-support-process-section .vending-section-heading {
    max-width: 520px;

    margin-inline: 0;

    text-align: left;
}

.vending-support-process-section .vending-section-heading p {
    margin-inline: 0;
}

.vending-support-process-section .vending-timeline {
    display: block;

    margin-top: 8px;
    padding: 0;

    border-top:
        1px solid rgba(255, 255, 255, 0.14);
    border-bottom:
        1px solid rgba(255, 255, 255, 0.14);
}

.vending-support-process-section .vending-timeline::before {
    display: none;
}

.vending-support-process-section .vending-timeline article,
.vending-support-process-section .vending-timeline article + article {
    position: relative;

    display: grid;
    grid-template-columns:
        96px
        minmax(0, 1fr);

    gap:
        clamp(20px, 3vw, 36px);

    min-height: auto;

    padding:
        32px
        0;

    border-left: 0;
    border-bottom:
        1px solid rgba(255, 255, 255, 0.11);
}

.vending-support-process-section .vending-timeline article:last-child {
    border-bottom: 0;
}

.vending-support-process-section .vending-timeline article::before,
.vending-support-process-section .vending-timeline article::after {
    display: none;
}

.vending-support-process-section .vending-timeline strong {
    color: rgba(139, 185, 236, 0.5);

    font-size:
        clamp(44px, 5vw, 70px);
}

.vending-support-process-section .vending-timeline article:first-child strong,
.vending-support-process-section .vending-timeline:hover article:first-child strong {
    color: rgba(139, 185, 236, 0.5);
}

.vending-support-process-section .vending-timeline h3 {
    max-width: none;

    margin-top: 4px;

    font-size:
        clamp(20px, 2vw, 26px);
}

.vending-support-process-section .vending-timeline p {
    max-width: 560px;

    margin-top: 10px;

    font-size: 15px;
}

.vending-support-process-section .vending-timeline article:hover strong {
    color: var(--blue-light);
}

.vending-value-heading {
    display: block;

    max-width: 760px;
}

.vending-value-heading h2 {
    color: var(--white);

    font-size:
        clamp(42px, 5vw, 72px);

    line-height: 1.08;
    letter-spacing: -0.055em;
}

.vending-value-heading p {
    max-width: 650px;

    margin-top: 14px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 18px;
    line-height: 1.7;
}

.vending-value-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        clamp(22px, 3vw, 34px);

    margin-top:
        clamp(34px, 5vw, 58px);
}

.vending-value-grid article {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height: 340px;

    padding:
        clamp(36px, 4vw, 56px)
        clamp(28px, 3.2vw, 44px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    border-radius: 26px;
}

.liquid-glass-card,
.vending-value-grid article {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.58);

    border-radius: 22px;

    background:
        rgba(9, 12, 17, 0.92);

    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(255, 255, 255, 0.14),
        inset 1px 0 0 rgba(255, 255, 255, 0.12),
        inset -1px 0 0 rgba(255, 255, 255, 0.12);

    backdrop-filter:
        blur(24px)
        saturate(150%);
    -webkit-backdrop-filter:
        blur(24px)
        saturate(150%);
}

.liquid-glass-card::before,
.vending-value-grid article::before {
    display: none;
}

.liquid-glass-card::after,
.vending-value-grid article::after {
    display: none;
}

.liquid-glass-card--light {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0.08)
        ),
        rgba(255, 255, 255, 0.12);

    border-color:
        rgba(255, 255, 255, 0.2);
}

.liquid-glass-card--strong {
    background:
        linear-gradient(
            145deg,
            rgba(30, 48, 68, 0.58),
            rgba(10, 18, 28, 0.46) 50%,
            rgba(24, 105, 191, 0.12)
        ),
        rgba(22, 35, 49, 0.54);

    border-color:
        rgba(140, 190, 235, 0.28);
}

.vending-value-icon {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 78px;
    height: 78px;

    border-radius: 50%;

    border:
        1px solid rgba(255, 255, 255, 0.16);

    background:
        rgba(5, 8, 13, 0.28);
    color: var(--blue-light);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14);

    backdrop-filter:
        blur(12px)
        saturate(140%);
    -webkit-backdrop-filter:
        blur(12px)
        saturate(140%);
}

.vending-value-icon svg {
    width: 28px;
    height: 28px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vending-value-grid h3 {
    position: relative;
    z-index: 1;

    max-width: 250px;

    margin-top: 34px;

    color: var(--white);

    font-size:
        clamp(22px, 2vw, 28px);
    font-weight: 600;
    line-height: 1.15;
}

.vending-value-grid p {
    position: relative;
    z-index: 1;

    max-width: 300px;

    margin-top: 22px;

    color: rgba(255, 255, 255, 0.7);

    font-size: 16px;
    line-height: 1.6;
}

.vending-value-grid article,
.vending-value-icon {
    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        background-color 0.28s ease,
        color 0.28s ease;
}

.vending-value-grid article:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(255, 255, 255, 0.72);
}

.vending-value-grid article:hover .vending-value-icon {
    color: var(--white);
    background: var(--blue);
}

.liquid-glass-card:hover,
.vending-value-grid article:hover {
    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.36),
        inset 0 -1px 0 rgba(255, 255, 255, 0.16),
        inset 1px 0 0 rgba(255, 255, 255, 0.16),
        inset -1px 0 0 rgba(255, 255, 255, 0.16);
}

.liquid-glass-card:hover::before,
.vending-value-grid article:hover::before {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .liquid-glass-card,
    .liquid-glass-card::before,
    .vending-value-grid article,
    .vending-value-grid article::before {
        transition: none;
    }
}

.vending-support-process-section .vending-value {
    display: block;
}

.vending-support-process-section .vending-value-heading {
    text-align: left;
}

.vending-process .vending-section-heading {
    max-width: 820px;

    margin-inline: auto;

    text-align: center;
}

.vending-process .vending-section-heading p {
    margin-inline: auto;
}

.vending-timeline {
    position: relative;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    margin-top:
        clamp(52px, 7vw, 88px);

    padding:
        0
        0
        0;

    border-top: 0;
    border-bottom: 0;
}

.vending-timeline-secondary {
    margin-top:
        clamp(52px, 7vw, 88px);
}

.vending-timeline::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 78px;

    height: 1px;

    background: rgba(255, 255, 255, 0.13);
}

.vending-timeline article {
    position: relative;

    min-height: 0;

    padding-right:
        clamp(18px, 2.4vw, 36px);
}

.vending-timeline article + article {
    padding-left:
        clamp(12px, 1.8vw, 28px);

    border-left: 0;
}

.vending-timeline article::before {
    content: "";

    position: absolute;

    left: 0;
    top: 74px;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--blue);
}

.vending-timeline article::after {
    display: none;
}

.vending-timeline strong {
    display: block;

    color: rgba(139, 185, 236, 0.18);

    font-size:
        clamp(54px, 7vw, 92px);
    font-weight: 600;
    line-height: 0.85;
    letter-spacing: -0.08em;

    transition:
        color 0.28s ease,
        opacity 0.28s ease,
        transform 0.28s ease;
}

.vending-timeline:first-of-type article:first-child strong {
    color: rgba(139, 185, 236, 0.88);
}

.vending-timeline:first-of-type:hover article:first-child strong {
    color: rgba(255, 255, 255, 0.14);

    transform: none;
}

.vending-timeline article:hover strong {
    color: var(--blue-light);

    opacity: 1;

    transform:
        translateX(3px);
}

.vending-timeline article::before {
    transition:
        background-color 0.28s ease,
        box-shadow 0.28s ease,
        transform 0.28s ease;
}

.vending-timeline:first-of-type:hover article:first-child::before {
    background: rgba(139, 185, 236, 0.42);

    box-shadow: none;
}

.vending-timeline article:hover::before {
    background: var(--blue-light);

    box-shadow:
        0 0 0 5px rgba(139, 185, 236, 0.12);

    transform:
        scale(1.08);
}

.vending-timeline .timeline-icon {
    margin-bottom: 20px;

    color: var(--blue);
}

.vending-timeline h3 {
    max-width: 210px;

    margin-top: 34px;

    color: var(--white);

    font-size:
        16px;

    line-height: 1.25;
}

.vending-timeline p {
    max-width: 210px;

    margin-top: 12px;

    color: rgba(255, 255, 255, 0.62);

    font-size: 13px;
    line-height: 1.55;
}

.vending-step-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-top: 22px;

    color: var(--blue-light);

    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.vending-step-link span {
    transition:
        transform 0.25s ease;
}

.vending-step-link:hover span {
    transform:
        translateX(4px);
}

.vending-project-flow {
    position: relative;

    display: grid;
    grid-template-columns: 1fr;
    gap:
        clamp(54px, 6vw, 82px);

    max-width: 1220px;

    margin:
        clamp(42px, 5vw, 68px)
        auto
        0;

    padding:
        34px
        0;
}

.vending-project-flow::before {
    display: none;
}

.vending-project-flow-line {
    position: absolute;
    z-index: 0;

    left: 50%;
    top: 40px;
    bottom: 40px;

    width: 170px;
    height:
        calc(100% - 80px);

    overflow: visible;

    transform:
        translateX(-50%);
}

.vending-project-flow-line path {
    fill: none;
    stroke: rgba(139, 185, 236, 0.22);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 8 12;

    animation:
        vendingFlowDraw 1.15s ease both,
        vendingFlowDash 4.8s linear 1.2s infinite;
}

.vending-project-flow article,
.vending-project-flow article + article {
    position: relative;
    z-index: 1;

    min-height: 188px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        150px
        minmax(0, 1fr);
    gap: 0;

    align-items: center;

    padding: 0;

    border: 0;
}

.vending-project-flow article::before {
    content: "";

    position: absolute;
    z-index: 3;

    left: 50%;
    top: 50%;

    width: 14px;
    height: 14px;

    border:
        2px solid rgba(21, 88, 166, 0.68);
    border-radius: 50%;

    background: rgba(139, 185, 236, 0.82);

    box-shadow:
        0 0 0 8px #101821;

    transform:
        translate(-50%, -50%);
}

.vending-project-flow article:nth-child(1)::before {
    left:
        calc(50% - 24px);
}

.vending-project-flow article:nth-child(2)::before {
    left:
        calc(50% + 7px);
}

.vending-project-flow article:nth-child(3)::before {
    left:
        calc(50% - 3px);
}

.vending-project-flow article::after {
    content: "";

    position: absolute;
    z-index: 2;

    left: 50%;
    top: 50%;

    width: 72px;
    height: 1px;

    display: block;

    background:
        linear-gradient(
            90deg,
            rgba(139, 185, 236, 0.05),
            rgba(139, 185, 236, 0.42)
        );

    transform:
        translateY(-50%);
}

.vending-project-flow article:nth-child(odd)::after {
    margin-left: -72px;
}

.vending-project-flow article:nth-child(even)::after {
    margin-left: 0;

    background:
        linear-gradient(
            90deg,
            rgba(139, 185, 236, 0.42),
            rgba(139, 185, 236, 0.05)
        );
}

.vending-project-flow article > div {
    position: relative;

    width:
        min(100%, 410px);
    min-height: 142px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(22px, 2.5vw, 30px)
        clamp(30px, 3.4vw, 42px);

    border-radius: 46px;

    background:
        linear-gradient(
            135deg,
            #1b4d82 0%,
            #142f4a 100%
        );

    border:
        1px solid rgba(139, 185, 236, 0.12);

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.12);

    transition:
        transform 0.32s ease,
        background 0.32s ease;
}

.vending-project-flow article > div::before {
    content: "";

    position: absolute;
    inset:
        1px
        18px
        auto
        18px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.18),
            transparent
        );
}

.vending-project-flow article:nth-child(odd) > div {
    grid-column: 1 / 2;

    justify-self: end;

    margin-right: 36px;
}

.vending-project-flow article:nth-child(even) > div {
    grid-column: 3 / 4;

    justify-self: start;

    margin-left: 36px;
}

.vending-project-flow strong {
    position: absolute;
    z-index: 4;

    top: 50%;

    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #090c11;
    background: var(--white);

    border-radius: 50%;

    font-size: 23px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.vending-project-flow article:nth-child(odd) strong {
    right:
        calc(50% + 72px);

    transform:
        translate(50%, -50%);
}

.vending-project-flow article:nth-child(even) strong {
    left:
        calc(50% + 72px);

    transform:
        translate(-50%, -50%);
}

.vending-project-flow h3 {
    max-width: none;

    margin-top: 0;

    color: var(--white);

    font-size:
        clamp(22px, 2vw, 26px);
    line-height: 1.2;
}

.vending-project-flow p {
    max-width: 330px;

    margin-top: 12px;

    color: rgba(232, 242, 255, 0.76);

    font-size: 14px;
    line-height: 1.55;
}

.vending-project-flow .vending-step-link {
    margin-top: 18px;

    color: var(--white);
}

.vending-project-flow article:nth-child(odd):hover > div {
    transform:
        scale(1.025);
}

.vending-project-flow article:nth-child(even):hover > div {
    transform:
        scale(1.025);
}

.vending-project-flow article:hover::before {
    background: rgba(255, 255, 255, 0.92);

    box-shadow:
        0 0 0 8px #101821;
}

.vending-project-flow article:hover strong {
    background: rgba(232, 242, 255, 0.94);
    color: var(--blue-dark);
}

@keyframes vendingFlowDraw {
    from {
        stroke-dashoffset: 760;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes vendingFlowDash {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -80;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vending-project-flow-line path {
        animation: none;
    }

    .vending-project-flow article > div,
    .vending-project-flow strong,
    .vending-project-flow article::before {
        transition: none;
    }
}

.vending-support-section {
    padding:
        clamp(78px, 8vw, 118px)
        0;

    background: #151b23;
    color: var(--white);
}

.vending-support-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    margin-top:
        clamp(46px, 6vw, 72px);

    border-top:
        1px solid rgba(255, 255, 255, 0.13);
    border-bottom:
        1px solid rgba(255, 255, 255, 0.13);
}

.vending-support-grid article {
    padding:
        38px
        clamp(24px, 4vw, 54px);

    border-right:
        1px solid rgba(255, 255, 255, 0.12);
}

.vending-support-grid article:last-child {
    border-right: 0;
}

.vending-support-grid article > strong {
    display: block;

    color: var(--blue);

    font-size: 38px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.06em;
}

.vending-support-grid .vending-line-icon {
    margin-top: 24px;
}

.vending-support-grid h3 {
    margin-top: 18px;

    color: var(--white);
}

.vending-support-grid p {
    margin-top: 12px;

    color: rgba(255, 255, 255, 0.62);

    font-size: 14px;
    line-height: 1.6;
}

.vending-cta-section {
    padding:
        clamp(72px, 8vw, 112px)
        0;

    background: #13202f;
    color: var(--white);
}

.vending-final-cta {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap:
        clamp(34px, 6vw, 88px);

    align-items: end;
}

.vending-final-cta p {
    color: rgba(255, 255, 255, 0.68);
}

.vending-final-action {
    min-width:
        min(100%, 340px);
}

.vending-final-action a {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    min-height: 56px;

    padding:
        0
        26px;

    border-radius: 999px;

    background: var(--blue);
    color: var(--white);

    font-weight: 600;
    text-decoration: none;
}

.vending-final-action a span {
    transition:
        transform 0.25s ease;
}

.vending-final-action a:hover span {
    transform:
        translateX(4px);
}

.vending-final-action p {
    max-width: 280px;

    margin-top: 18px;

    font-size: 14px;
}

@media (prefers-reduced-motion: no-preference) {
    .custom-note,
    .vending-timeline article,
    .vending-support-grid article,
    .vending-remote-features div {
        transition:
            transform 0.28s ease,
            color 0.28s ease,
            border-color 0.28s ease;
    }

    .custom-note:hover,
    .vending-timeline article:hover,
    .vending-support-grid article:hover,
    .vending-remote-features div:hover {
        transform:
            translateY(-3px);
    }
}


/* Couleur de raccord des bandeaux avec leur section suivante. */
.product-page {
    --hero-end-rgb: 21, 27, 35;
}

.product-page-bakery {
    --hero-end-rgb: 29, 40, 53;
}

.product-page-catering {
    --hero-end-rgb: 23, 31, 41;
}

.product-page-vending {
    --hero-end-rgb: 29, 37, 47;
}

.product-page-used {
    --hero-end-rgb: 24, 33, 44;
}

.product-page-about,
.product-page-join,
.job-page {
    --hero-end-rgb: 23, 29, 37;
}

/* Final hero gradient alignment on all pages */
.hero-overlay,
.product-page-hero-overlay {
    background:
        linear-gradient(
            to bottom,
            rgba(var(--hero-end-rgb), 0.22) 0%,
            rgba(var(--hero-end-rgb), 0.36) 42%,
            rgba(var(--hero-end-rgb), 0.78) 78%,
            rgb(var(--hero-end-rgb)) 100%
        ),
        linear-gradient(
            90deg,
            rgba(4, 8, 13, 0.48) 0%,
            rgba(4, 8, 13, 0.14) 50%,
            rgba(4, 8, 13, 0.42) 100%
        );
}

.home-page .hero-overlay {
    background:
        linear-gradient(
            to bottom,
            rgba(21, 27, 35, 0.14) 0%,
            rgba(21, 27, 35, 0.22) 42%,
            rgba(21, 27, 35, 0.36) 68%,
            rgba(21, 27, 35, 0.72) 92%,
            var(--black) 100%
        ),
        linear-gradient(
            90deg,
            rgba(9, 12, 17, 0.58) 0%,
            rgba(9, 12, 17, 0.18) 52%,
            rgba(9, 12, 17, 0.32) 100%
        );
}

.home-page .hero::after {
    height: clamp(360px, 42vh, 520px);
    background:
        linear-gradient(
            to bottom,
            rgba(21, 27, 35, 0) 0%,
            rgba(21, 27, 35, 0.12) 26%,
            rgba(21, 27, 35, 0.38) 54%,
            rgba(21, 27, 35, 0.78) 82%,
            var(--black) 100%
        );
}

.home-page .hero-image::after {
    background:
        linear-gradient(
            to bottom,
            rgba(21, 27, 35, 0) 54%,
            rgba(21, 27, 35, 0.18) 70%,
            rgba(21, 27, 35, 0.68) 88%,
            var(--black) 100%
        );
}

.product-page-bakery .product-page-hero-overlay {
    background:
        linear-gradient(
            to bottom,
            rgba(var(--hero-end-rgb), 0.2) 0%,
            rgba(var(--hero-end-rgb), 0.2) 72%,
            rgba(var(--hero-end-rgb), 0.34) 85%,
            rgba(var(--hero-end-rgb), 0.64) 94%,
            rgb(var(--hero-end-rgb)) 100%
        ),
        linear-gradient(
            90deg,
            rgba(9, 12, 17, 0.42) 0%,
            rgba(9, 12, 17, 0.1) 50%,
            rgba(9, 12, 17, 0.36) 100%
        );
}

.product-page-bakery .product-page-hero-image::after {
    content: "";
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: -1px;
    left: 0;
    height: clamp(70px, 7vw, 100px);
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            rgba(var(--hero-end-rgb), 0) 0%,
            rgba(var(--hero-end-rgb), 0.5) 48%,
            rgb(var(--hero-end-rgb)) 100%
        );
}

.home-page .hero-services {
    bottom: clamp(42px, 4.8vw, 68px);

    overflow: hidden;

    min-height: 78px;

    align-items: center;

    border-top: 0;
    border-bottom: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7, 11, 17, 0.02) 0%,
            rgba(7, 11, 17, 0.16) 18%,
            rgba(7, 11, 17, 0.16) 82%,
            rgba(7, 11, 17, 0.02) 100%
        );

    backdrop-filter:
        blur(1.5px)
        saturate(110%);
    -webkit-backdrop-filter:
        blur(1.5px)
        saturate(110%);
}

.home-page .hero-service,
.home-page .hero-service + .hero-service,
.home-page .hero-service:nth-child(3),
.home-page .hero-service:nth-child(n + 3),
.home-page .hero-service:nth-child(odd),
.home-page .hero-service:first-child {
    border: 0;
}

.home-page .hero-service {
    min-height: 78px;

    padding:
        0
        clamp(14px, 1.7vw, 24px);

    gap: 12px;
}

.home-page .hero-service + .hero-service {
    border-left:
        1px solid
        rgba(255, 255, 255, 0.075);
}

.home-page .hero-service-icon {
    width: 36px;
    height: 36px;

    border-radius: 9px;

    color: var(--white);

    border-color:
        rgba(139, 185, 236, 0.18);

    background:
        linear-gradient(
            135deg,
            rgba(30, 113, 205, 0.95),
            rgba(16, 89, 171, 0.95)
        );
}

.home-page .hero-service-icon svg {
    width: 24px;
    height: 24px;

    stroke-width: 1.35;
}

.hero-service-icon svg,
.hero-service-icon .maintenance-tools-icon,
.hero-service-icon .maintenance-hand-tool-icon,
.project-support-icon svg,
.coffee-franke-points svg,
.vending-solution-points .solution-icon svg,
.vending-line-icon svg,
.timeline-icon svg,
.vending-value-icon svg,
.occasion-benefit-icon svg,
.occasion-advantages svg,
svg[class*="lucide"],
svg[class*="tabler"] {
    stroke-width: 1.35;
}

.home-page .hero-service strong {
    color: rgba(255, 255, 255, 0.9);

    -webkit-text-stroke: 0;

    text-shadow: none;
}

.home-page .hero-service small {
    color: rgba(255, 255, 255, 0.62);

    text-shadow: none;
}

.home-page .hero {
    min-height: clamp(760px, 90vh, 840px);
}

.home-page .products-section {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-md);
    margin-top: -1px;
    background:
        linear-gradient(
            to bottom,
            var(--black) 0%,
            #171f29 18%,
            #1d2835 42%,
            #1d2835 82%,
            #1d2835 100%
        );
}

.home-page .history-section {
    padding:
        var(--space-lg)
        0
        var(--space-md);

    background:
        linear-gradient(
            to bottom,
            #1d2835 0%,
            #1d2835 78%,
            #0d1624 100%
        );
}

.home-page .service-area-section {
    padding:
        var(--space-md)
        0
        var(--space-lg);

    background:
        linear-gradient(
            to bottom,
            #0d1624 0%,
            #0d1624 82%,
            #151b23 100%
        );
}

.home-page .trust-section {
    padding:
        var(--space-lg)
        0
        var(--space-lg);

    background:
        linear-gradient(
            to bottom,
            #151b23 0%,
            #171f29 14%,
            #1d2835 100%
        );
}

.home-page .products-heading h2 {
    font-size:
        clamp(30px, 3.4vw, 48px);
}

.product-page-used .product-page-hero-image::after {
    content: "";
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: -1px;
    left: 0;
    height: clamp(160px, 20vw, 280px);
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            rgba(var(--hero-end-rgb), 0) 0%,
            rgba(var(--hero-end-rgb), 0.72) 55%,
            rgb(var(--hero-end-rgb)) 100%
        );
}

/* =========================================================
   PAGE ACCUEIL - RESPONSIVE
========================================================= */


/* =========================================================
   1440PX
========================================================= */

@media (min-width: 1440px) {

    .home-page .header .container,
    .home-page .hero .container,
    .home-page .hero-services {
        width: min(
            calc(100% - 140px),
            1740px
        );
    }

    .home-page .hero-content {
        padding-top: 72px;
    }

    .home-page .hero-text {
        max-width: min(
            760px,
            48vw
        );
    }

    .home-page .hero h1 {
        font-size: clamp(
            52px,
            3.55vw,
            68px
        );
    }

}


/* =========================================================
   1100PX
========================================================= */

@media (max-width: 1100px) {

    .home-page .nav {
        position: fixed;

        inset: 0;

        margin: 0;

        padding: 80px 40px;

        display: flex;
        flex-direction: column;

        align-items: flex-start;
        justify-content: center;

        gap: 20px;

        background:
            linear-gradient(
                145deg,
                var(--black),
                var(--blue-dark)
            );

        transform: translateX(100%);

        transition:
            transform 0.35s ease;
    }


    .home-page .nav.open {
        transform: translateX(0);
    }


    .home-page .nav a,
    .home-page .header.scrolled .nav a {
        color: var(--white);

        font-family: "Manrope", sans-serif;

        font-size: 30px;
        font-weight: 600;
    }


    .home-page .nav a::after {
        display: none;
    }


    .home-page .nav-item {
        width: 100%;

        display: grid;

        gap: 10px;
    }


    .home-page .nav-dropdown {
        position: static;

        width: 100%;

        padding:
            0
            0
            0
            18px;

        display: none;

        border: 0;

        background: transparent;

        opacity: 1;
        visibility: visible;

        transform: none;

        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }


    .home-page .nav-item-dropdown.is-open .nav-dropdown {
        display: grid;
    }


    .home-page .nav-dropdown a,
    .home-page .header.scrolled .nav-dropdown a {
        padding: 4px 0;

        color:
            rgba(255, 255, 255, 0.68);

        font-size: 16px;
        line-height: 1.35;
        font-weight: 500;
    }


    .home-page .nav-dropdown a:hover {
        background: transparent;

        color: var(--blue-light);
    }


    .home-page .header-actions {
        display: none;
    }


    .home-page .logo img {
        height: 80px;
    }


    .home-page .header.scrolled .logo img {
        height: 68px;
    }


    .home-page .menu-button {
        position: relative;

        z-index: 2;

        display: flex;

        margin-left: 12px;
    }


    .home-page .menu-button.open span {
        background: var(--white);
    }


    .home-page .menu-button.open span:first-child {
        transform:
            translateY(4px)
            rotate(45deg);
    }


    .home-page .menu-button.open span:last-child {
        transform:
            translateY(-4px)
            rotate(-45deg);
    }

}


/* =========================================================
   1100PX
========================================================= */

@media (max-width: 1100px) {

    /* =========================
       HERO
    ========================== */

    .home-page .hero {
        min-height: 760px;

        padding-bottom: 0;
    }


    .home-page .hero-content {
        width:
            min(
                calc(100% - 64px),
                var(--container)
            );

        max-width: none;

        padding-top: 120px;
    }


    .home-page .hero-text {
        max-width: 580px;
    }


    .home-page .hero h1 {
        font-size:
            clamp(
                42px,
                5.4vw,
                56px
            );

        line-height: 1.02;
    }


    .home-page .hero-buttons {
        flex-wrap: wrap;

        gap: 12px;

        margin-top: 26px;
    }


    /* =========================
       4 SERVICES
    ========================== */

    .home-page .hero-services {
        position: absolute;

        left: 50%;
        bottom: 40px;

        width:
            min(
                calc(100% - 64px),
                900px
            );

        min-height: auto;

        display: grid;

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        transform:
            translateX(-50%);
    }


    .home-page .hero-service {
        min-width: 0;
    }


    .home-page .hero-service + .hero-service {
        border-left:
            1px solid
            rgba(255, 255, 255, 0.075);

        border-top: 0;
    }


    .home-page .hero-service strong {
        font-size: 13px;
        line-height: 1.25;
    }


    .home-page .hero-service small {
        margin-top: 3px;

        font-size: 10px;
        line-height: 1.3;
    }


    /* =========================
       PRODUITS
    ========================== */

    .home-page .products-section {
        padding-top: 64px;
    }


    .home-page .products-heading {
        margin-bottom: 28px;
    }


    .home-page .products-heading h2 {
        font-size:
            clamp(
                30px,
                4vw,
                40px
            );
    }


    .home-page .products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }


    .home-page .product-card,
    .home-page .product-card-content {
        min-height: 330px;
    }

}


/* =========================================================
   901PX → 1100PX
========================================================= */

@media (min-width: 901px) and (max-width: 1100px) {

    .home-page .hero {
        min-height: 720px;
    }


    .home-page .hero-services {
        position: absolute;

        left: 50%;
        bottom: -25px;

        width:
            calc(100% - 64px);

        max-width: 960px;

        min-height: 74px;

        margin: 0;

        display: grid;

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        transform:
            translateX(-50%);
    }


    .home-page .hero-service + .hero-service {
        border-left:
            1px solid
            rgba(255, 255, 255, 0.075);

        border-top: 0;
    }


    .home-page .hero-service-icon {
        width: 28px;
        height: 28px;

        flex:
            0
            0
            28px;
    }


    .home-page .hero-service-icon svg {
        width: 15px;
        height: 15px;
    }


    .home-page .hero-service strong {
        font-size: 10px;
        line-height: 1.2;

        white-space: normal;
    }


    .home-page .hero-service small {
        margin-top: 3px;

        font-size: 8px;
        line-height: 1.25;

        white-space: normal;
    }

}


/* =========================================================
   701PX → 1100PX
========================================================= */

@media (min-width: 701px) and (max-width: 1100px) {

    .home-page .footer {
        padding-top: 42px;
    }


    .home-page .footer-content {
        display: grid;

        grid-template-columns:
            150px
            1fr;

        gap: 40px;

        align-items: start;
    }


    .home-page .footer-brand {
        display: flex;

        align-items: flex-start;
        justify-content: flex-start;
    }


    .home-page .footer-logo img {
        width: 130px;
        height: auto;
    }


    .home-page .footer-columns {
        display: grid;

        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(0, 0.8fr)
            auto;

        gap: 32px;

        align-items: start;
    }


    .home-page .footer-column h2 {
        margin-bottom: 14px;

        font-size: 16px;
    }


    .home-page .footer-column p,
    .home-page .footer-column a {
        font-size: 13px;
        line-height: 1.5;
    }


    .home-page .footer-social-links {
        gap: 16px;
    }


    .home-page .footer-social-links a svg,
    .home-page .footer-social-links a img {
        width: 22px;
        height: 22px;
    }


    .home-page .footer-contact-button {
        min-height: 44px;
        height: 44px;

        padding:
            0
            18px;

        font-size:
            12px !important;
    }


    .home-page .footer-bottom {
        margin-top: 32px;

        padding:
            14px
            0
            18px;

        flex-direction: row;

        align-items: center;
        justify-content: space-between;
    }


    .home-page .footer-bottom p,
    .home-page .footer-bottom a {
        font-size: 10px;
    }

}


/* =========================================================
   SOUS 1000PX
========================================================= */

@media (max-width: 1000px) {

    .home-page .products-section {
        padding-top: 42px;
        padding-bottom: 46px;
    }


    .home-page .history-section {
        padding:
            52px
            0;
    }


    .home-page .service-area-section {
        padding:
            42px
            0;
    }


    .home-page .trust-section {
        padding:
            50px
            0
            56px;
    }


    .home-page .maintenance-reference {
        min-height: 340px;

        padding:
            52px
            0
            50px;
    }

}


/* =========================================================
   920PX
========================================================= */

@media (max-width: 920px) {

    .home-page .history-section {
        padding:
            72px
            0;
    }


    .home-page .history-panel {
        grid-template-columns: 1fr;

        gap: 34px;
    }


    .home-page .history-content {
        max-width: 720px;
    }


    .home-page .history-image {
        min-height: 320px;
    }

}


/* =========================================================
   900PX
========================================================= */

@media (max-width: 900px) {

    .home-page .header {
        padding:
            6px
            0;
    }


    .home-page .logo img {
        height: 66px;
    }


    .home-page .header.scrolled .logo img {
        height: 58px;
    }


    .home-page .nav {
        width: 100%;
    }


    /* =========================
       HERO
    ========================== */

    .home-page .hero {
        min-height: 650px;
    }


    .home-page .hero-content {
        width:
            calc(100% - 48px);

        max-width: 680px;

        padding-top: 120px;
    }


    .home-page .hero-text {
        max-width: 520px;
    }


    .home-page .hero h1 {
        max-width: 520px;

        font-size:
            clamp(
                36px,
                6vw,
                46px
            );

        line-height: 1.02;
    }


    .home-page .hero-buttons {
        display: flex;

        flex-direction: row;
        flex-wrap: nowrap;

        gap: 10px;

        margin-top: 24px;
    }


    .home-page .hero-buttons .button {
        min-height: 44px;

        padding:
            0
            18px;

        font-size: 11px;

        white-space: nowrap;
    }


    /* =========================
       4 POINTS
    ========================== */

    .home-page .hero-services {
        position: absolute;

        left: 50%;
        bottom: 24px;

        width:
            calc(100% - 48px);

        min-height: 70px;

        margin: 0;

        display: grid;

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 0;

        transform:
            translateX(-50%);
    }


    .home-page .hero-service {
        min-width: 0;
        min-height: 70px;

        padding:
            10px
            7px;

        gap: 6px;

        border-top: 0;
    }


    .home-page .hero-service + .hero-service {
        border-left:
            1px solid
            rgba(255, 255, 255, 0.075);
    }


    .home-page .hero-service-icon {
        width: 25px;
        height: 25px;

        flex:
            0
            0
            25px;
    }


    .home-page .hero-service-icon svg {
        width: 13px;
        height: 13px;
    }


    .home-page .hero-service strong {
        font-size: 8px;
        line-height: 1.15;

        white-space: normal;
    }


    .home-page .hero-service small {
        margin-top: 2px;

        font-size: 6.5px;
        line-height: 1.2;

        white-space: normal;
    }


    .home-page .scroll {
        display: none;
    }


    /* =========================
       PRODUITS
    ========================== */

    .home-page .products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 16px;
    }


    .home-page .product-card,
    .home-page .product-card-content {
        min-height: 330px;
    }


    .home-page .product-card-content {
        padding: 20px;
    }


    .home-page .product-card h2 {
        font-size: 22px;
        line-height: 1.15;
    }


    .home-page .product-card p {
        font-size: 12px;
        line-height: 1.5;
    }


    /* =========================
       ZONE INTERVENTION
    ========================== */

    .home-page .service-area-layout {
        grid-template-columns: 1fr;

        gap: 44px;
    }


    .home-page .service-area-content {
        grid-column: auto;

        max-width: 620px;
    }


    .home-page .service-area-map {
        grid-column: auto;
        grid-row: auto;

        min-height: auto;

        justify-content: flex-start;
    }


    .home-page .service-area-map img {
        width:
            min(
                100%,
                720px
            );
    }


    /* =========================
       REALISATIONS
    ========================== */

    .home-page .trust-gallery {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   850PX -> 900PX
   HERO ACCUEIL PLUS A GAUCHE
========================================================= */

@media (min-width: 850px) and (max-width: 900px) {

    .home-page .hero-content {
        margin-left: 24px;
        margin-right: auto;
    }


    .home-page .hero-buttons {
        margin-top: 12px;
    }

}


/* =========================================================
   880PX → 920PX
========================================================= */

@media (min-width: 880px) and (max-width: 920px) {

    .home-page .history-section {
        padding-top: 15px !important;
    }

}


/* =========================================================
   701PX → 900PX
========================================================= */

@media (min-width: 701px) and (max-width: 900px) {

    .home-page .service-area-content {
        max-width: 520px;

        margin-left: 50px;

        justify-self: start;
    }


    .home-page .service-area-kicker::after {
        bottom: -10px;
    }

}


/* =========================================================
   701PX -> 849PX
   HERO ACCUEIL PLUS A GAUCHE
========================================================= */

@media (min-width: 701px) and (max-width: 849px) {

    .home-page .hero-content {
        width:
            calc(100% - 48px);

        margin-left: 24px;
        margin-right: auto;
    }


    .home-page .hero-text {
        max-width: 500px;

        margin-left: 0;
        margin-right: auto;

        text-align: left;
    }


    .home-page .hero h1 {
        max-width: 500px;

        margin-left: 0;
        margin-right: auto;

        text-align: left;
    }


    .home-page .hero-buttons {
        margin-top: 16px;

        justify-content: flex-start;
    }

}


/* =========================================================
   700PX
========================================================= */

@media (max-width: 700px) {

    /* =========================
       HERO
    ========================== */

    .home-page .hero {
        min-height: 500px;
    }


    .home-page .hero-content {
        width:
            calc(100% - 40px);

        padding-top: 78px;
    }


    .home-page .hero h1 {
        font-size:
            clamp(
                32px,
                8vw,
                44px
            );
    }


    .home-page .hero-buttons {
        margin-top: 0;

        transform:
            translateY(-24px);
    }


    /* =========================
       4 POINTS
       TOUJOURS SUR UNE LIGNE
    ========================== */

    .home-page .hero-services {
        position: absolute;

        left: 50%;
        bottom: 24px;

        width:
            calc(100% - 32px);

        min-height: 68px;

        margin: 0;

        display: grid;

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 0;

        transform:
            translateX(-50%);
    }


    .home-page .hero-service,
    .home-page .hero-service:nth-child(odd),
    .home-page .hero-service:nth-child(even),
    .home-page .hero-service:nth-child(n + 3) {
        min-width: 0;

        min-height: 68px;

        padding:
            8px
            5px;

        border-top: 0;
        border-left: 0;
    }


    .home-page .hero-service + .hero-service {
        border-left:
            1px solid
            rgba(255, 255, 255, 0.08);
    }


    .home-page .hero-service-icon {
        width: 25px;
        height: 25px;

        flex:
            0
            0
            25px;
    }


    .home-page .hero-service-icon svg {
        width: 13px;
        height: 13px;
    }


    .home-page .hero-service strong {
        font-size: 8px;
        line-height: 1.15;

        white-space: normal;
    }


    .home-page .hero-service small {
        font-size: 6.5px;
        line-height: 1.15;

        white-space: normal;
    }


    .home-page .service-area-kicker::after {
        bottom: -16px;
    }


    /* =========================
       MAINTENANCE
    ========================== */

    .home-page .maintenance-reference {
        min-height: 360px;

        padding:
            58px
            0
            56px;
    }


    .home-page .maintenance-reference-curve {
        top: 56px;

        width: 132vw;
        height: 230px;

        transform:
            translateX(-50%)
            scaleX(0.95);
    }


    .home-page .maintenance-curve-line {
        stroke-width: 16px;
    }


    .home-page .maintenance-reference-label {
        margin-bottom: 20px;

        font-size: 10px;
    }


    .home-page .maintenance-reference-copy h2 {
        font-size:
            clamp(
                34px,
                10.5vw,
                46px
            );

        line-height: 1.04;
    }


    .home-page .maintenance-reference-copy p {
        width:
            min(
                100%,
                430px
            );

        margin-top: 23px;

        font-size: 13px;
        line-height: 1.65;
    }


    .home-page .maintenance-reference-copy a {
        margin-top: 24px;

        font-size: 12px;
    }

}


/* =========================================================
   640PX
========================================================= */

@media (max-width: 640px) {

    .home-page .container {
        width:
            min(
                calc(100% - 32px),
                var(--container)
            );
    }


    /* =========================
       HERO
    ========================== */

    .home-page .hero {
        min-height: 500px;
    }


    .home-page .hero-content {
        padding-top: 76px;
    }


    .home-page .hero-buttons {
        width: 100%;

        align-items: stretch;
    }


    .home-page .hero-buttons .button {
        width: 100%;

        min-height: 58px;

        justify-content: center;
    }


    /* =========================
       4 POINTS
    ========================== */

    .home-page .hero-services {
        position: absolute;

        left: 50%;
        bottom: 18px;

        width:
            calc(100% - 24px);

        margin: 0;

        display: grid;

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 0;

        transform:
            translateX(-50%);
    }


    .home-page .hero-service,
    .home-page .hero-service:nth-child(odd),
    .home-page .hero-service:nth-child(even),
    .home-page .hero-service:nth-child(n + 3) {
        border-top: 0;
        border-left: 0;
    }


    .home-page .hero-service + .hero-service {
        border-left:
            1px solid
            rgba(255, 255, 255, 0.08);
    }


    /* =========================
       SECTIONS
    ========================== */

    .home-page .products-section,
    .home-page .history-section,
    .home-page .service-area-section,
    .home-page .trust-section {
        padding-top: 24px;
        padding-bottom: 42px;
    }


    /* =========================
       PRODUITS
    ========================== */

    .home-page .products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 16px;
    }


    .home-page .products-heading {
        margin-bottom: 26px;

        text-align: left;
    }


    .home-page .products-heading h2 {
        font-size:
            clamp(
                30px,
                10vw,
                38px
            );
    }


    .home-page .product-card,
    .home-page .product-card-content {
        min-height: 310px;
    }


    .home-page .product-card-content {
        padding: 24px;
    }


    .home-page .product-card h2 {
        font-size: 28px;
    }


    /* =========================
       MAINTENANCE
    ========================== */

    .home-page .maintenance-reference {
        min-height: 310px;

        padding:
            44px
            0
            42px;
    }


    /* =========================
       HISTOIRE
    ========================== */

    .home-page .history-section {
        padding:
            62px
            0;
    }


    .home-page .history-kicker {
        margin-bottom: 18px;

        font-size: 0.68rem;
    }


    .home-page .history-content h2 {
        font-size:
            clamp(
                2rem,
                11vw,
                2.75rem
            );
    }


    .home-page .history-content p {
        font-size: 0.94rem;

        line-height: 1.7;
    }


    .home-page .history-image {
        min-height: 250px;
    }


    /* =========================
       ZONE INTERVENTION
    ========================== */

    .home-page .service-area-section {
        padding:
            52px
            0
            58px;
    }


    .home-page .service-area-kicker {
        margin-bottom: 34px;

        font-size: 11px;

        letter-spacing: 0.12em;
    }


    .home-page .service-area-content {
        margin-left: 0;
    }


    .home-page .service-area-content h2 {
        font-size:
            clamp(
                38px,
                12vw,
                54px
            );
    }


    .home-page .service-area-content p {
        font-size: 15px;

        line-height: 1.75;
    }


    /* =========================
       REALISATIONS
    ========================== */

    .home-page .trust-gallery {
        margin-top: 38px;

        grid-template-columns: 1fr;

        gap: 16px;
    }


    .home-page .trust-card {
        min-height: 285px;
    }


    .home-page .trust-card::before,
    .home-page .trust-card .trust-card-content {
        opacity: 1;
    }


    .home-page .trust-card .trust-card-content {
        left: 24px;
        bottom: 24px;

        transform: translateY(0);
    }


    .home-page .trust-card-content h3 {
        font-size: 28px;
    }


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

    .home-page .footer-content {
        padding:
            38px
            0
            28px;

        text-align: left;
    }


    .home-page .footer-brand,
    .home-page .footer-logo {
        justify-self: start;
    }


    .home-page .footer-logo img {
        height: 112px;
    }


    .home-page .footer-columns {
        grid-template-columns: 1fr;

        gap: 24px;
    }


    .home-page .footer-column h2 {
        margin-bottom: 12px;

        font-size: 17px;
    }


    .home-page .footer-column a,
    .home-page .footer-column p {
        font-size: 15px;
    }


    .home-page .footer-cta {
        justify-content: flex-start;
    }


    .home-page .footer-bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;
    }

}


/* =========================================================
   621PX -> 700PX
   CARDS ACCUEIL EN 2 PAR 2
========================================================= */

@media (min-width: 621px) and (max-width: 700px) {

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

}


/* =========================================================
   639PX
   HERO PLUS COMPACT ET COLLÉ À GAUCHE
========================================================= */

@media (max-width: 639px) {

    /* =========================
       CONTENU HERO
    ========================== */

    .home-page .hero-content {
        width:
            calc(100% - 40px);

        padding-top: 76px;

        margin-left: auto;
        margin-right: auto;
    }


    /* =========================
       TEXTE HERO
    ========================== */

    .home-page .hero-text {
        width:
            min(
                100%,
                390px
            );

        max-width: 390px;

        margin-left: 0;
        margin-right: auto;

        text-align: left;
    }


    .home-page .hero h1 {
        width: 100%;

        max-width: 370px;

        margin-left: 0;
        margin-right: auto;

        font-size:
            clamp(
                27px,
                6.8vw,
                34px
            );

        line-height: 1.03;

        text-align: left;
    }


    /* =========================
       DESCRIPTION
    ========================== */

    .home-page .hero-description {
        max-width: 360px;

        margin-left: 0;
        margin-right: auto;

        text-align: left;
    }


    /* =========================
       BOUTONS PLUS PETITS
    ========================== */

    .home-page .hero-buttons {
        width: auto;

        margin-top: 0;

        transform:
            translateY(-24px);

        display: flex;

        flex-direction: row;
        flex-wrap: nowrap;

        align-items: center;
        justify-content: flex-start;

        gap: 8px;
    }


    .home-page .hero-buttons .button {
        width: auto !important;

        min-width: 0;

        min-height: 36px;
        height: 36px;

        padding:
            0
            14px;

        font-size: 9px;

        white-space: nowrap;

        justify-content: center;
    }

}


/* =========================================================
   638PX
   TITRE CARDS ACCUEIL PLUS COMPACT
========================================================= */

@media (max-width: 638px) {

    .home-page .products-heading h2 {
        font-size:
            clamp(
                20px,
                5.2vw,
                26px
            );

        line-height: 1.08;
    }

}


/* =========================================================
   607PX
   CARDS ACCUEIL PLUS COMPACTES
========================================================= */

@media (max-width: 607px) {

    .home-page .product-card,
    .home-page .product-card-content {
        min-height: 260px;
    }


    .home-page .product-card-content {
        padding: 18px;
    }


    .home-page .product-card h2 {
        font-size: 22px;
        line-height: 1.08;
    }


    .home-page .product-button {
        min-height: 40px;

        padding:
            0
            14px;

        font-size: 10px;
    }

}


/* =========================================================
   603PX
   CARDS ACCUEIL MOINS HAUTES
========================================================= */

@media (max-width: 603px) {

    .home-page .product-card,
    .home-page .product-card-content {
        min-height: 245px;
    }

}


/* =========================================================
   528PX
   LOGO UNOX BOULANGERIE NON COUPE
========================================================= */

@media (max-width: 528px) {

    .product-page-bakery
    .partner-brand-logo
    img[src*="marque_unox"] {
        --logo-scale: 1.2;
    }

}


/* =========================================================
   494PX
   POINTS HERO PLUS PROCHES DES BOUTONS
========================================================= */

@media (max-width: 494px) {

    .home-page .hero-services {
        bottom: 54px;
    }

}


/* =========================================================
   492PX
   MOINS D'ESPACE ENTRE HERO ET CARDS
========================================================= */

@media (max-width: 492px) {

    .home-page .products-section {
        padding-top: 10px !important;
    }

}


/* =========================================================
   440PX
========================================================= */

@media (max-width: 440px) {

    .home-page .container {
        width:
            min(
                calc(100% - 22px),
                var(--container)
            );
    }


    .home-page .nav {
        padding:
            76px
            28px;
    }


    .home-page .nav a,
    .home-page .header.scrolled .nav a {
        font-size: 25px;
    }


    .home-page .nav-dropdown a,
    .home-page .header.scrolled .nav-dropdown a {
        font-size: 14px;
    }


    .home-page .logo img {
        height: 58px;
    }


    .home-page .header.scrolled .logo img {
        height: 52px;
    }


    .home-page .product-card,
    .home-page .product-card-content {
        min-height: 330px;
    }


    .home-page .trust-gallery {
        margin-top: 58px;
    }


    .home-page .footer-logo img {
        height: 98px;
    }


    .home-page .footer-contact-button {
        width: 100%;
    }

}


/* =========================================================
   425PX
========================================================= */

@media (max-width: 425px) {

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

    .home-page .header {
        padding:
            2px
            0 !important;

        min-height: 54px !important;
    }


    .home-page .header .container {
        width:
            calc(100% - 24px) !important;

        min-height: 54px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;
    }


    .home-page .logo {
        display: flex !important;

        align-items: center !important;
    }


    .home-page .logo img {
        width: auto !important;
        height: 42px !important;
    }


    .home-page .header.scrolled .logo img {
        height: 40px !important;
    }


    .home-page .menu-button {
        width: 42px !important;
        height: 42px !important;

        margin-left: auto !important;

        padding: 10px !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 6px !important;
    }


    .home-page .menu-button span {
        width: 22px !important;
        height: 2px !important;
    }


    .home-page .nav {
        padding:
            70px
            22px
            28px !important;
    }


    .home-page .nav a,
    .home-page .header.scrolled .nav a {
        font-size: 22px !important;

        line-height: 1.15 !important;
    }


    .home-page .nav-item {
        gap: 8px !important;
    }


    .home-page .nav-dropdown {
        padding-left: 14px !important;
    }


    .home-page .nav-dropdown a,
    .home-page .header.scrolled .nav-dropdown a {
        font-size: 13px !important;

        line-height: 1.3 !important;
    }


    /* =====================================================
       HERO
    ====================================================== */

    .home-page .hero {
        min-height: 520px !important;
    }


    .home-page .hero-content {
        width:
            calc(100% - 24px) !important;

        padding-top: 66px !important;
    }


    .home-page .hero-text {
        width: 100% !important;

        max-width: 320px !important;

        margin-left: 0 !important;
        margin-right: auto !important;

        text-align: left !important;
    }


    .home-page .hero h1 {
        width: 100% !important;

        max-width: 310px !important;

        margin-left: 0 !important;
        margin-right: auto !important;

        font-size:
            clamp(
                24px,
                7vw,
                29px
            ) !important;

        line-height: 1.03 !important;

        text-align: left !important;
    }


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

    .home-page .hero-buttons {
        width: auto !important;

        margin-top: 10px !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 6px !important;
    }


    .home-page .hero-buttons .button {
        width: auto !important;

        min-width: 0 !important;

        min-height: 32px !important;
        height: 32px !important;

        padding:
            0
            11px !important;

        font-size: 8px !important;

        white-space: nowrap !important;

        justify-content: center !important;
    }


    /* =====================================================
       4 POINTS
       TOUJOURS SUR UNE LIGNE
    ====================================================== */

    .home-page .hero-services {
        position: absolute !important;

        left: 50% !important;
        bottom: 12px !important;

        width:
            calc(100% - 20px) !important;

        min-height: 64px !important;

        margin: 0 !important;

        display: grid !important;

        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap: 0 !important;

        transform:
            translateX(-50%) !important;
    }


    .home-page .hero-service,
    .home-page .hero-service:nth-child(odd),
    .home-page .hero-service:nth-child(even),
    .home-page .hero-service:nth-child(n + 3) {
        width: auto !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 64px !important;

        margin: 0 !important;

        padding:
            5px
            3px !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 5px !important;

        text-align: center !important;

        border-top: 0 !important;
        border-left: 0 !important;
    }


    .home-page .hero-service + .hero-service {
        border-left:
            1px solid
            rgba(255, 255, 255, 0.08) !important;
    }


    .home-page .hero-service-icon {
        width: 27px !important;
        height: 27px !important;

        min-width: 27px !important;

        flex:
            0
            0
            27px !important;

        margin:
            0
            auto !important;
    }


    .home-page .hero-service-icon svg {
        width: 14px !important;
        height: 14px !important;
    }


    .home-page .hero-service > span:last-child {
        width: 100% !important;
        min-width: 0 !important;
    }


    .home-page .hero-service strong {
        display: block !important;

        margin: 0 !important;

        font-size: 7.5px !important;

        line-height: 1.15 !important;

        white-space: normal !important;
    }


    .home-page .hero-service small {
        display: block !important;

        margin-top: 2px !important;

        font-size: 6px !important;

        line-height: 1.15 !important;

        white-space: normal !important;
    }


    .home-page .scroll {
        display: none !important;
    }


    /* =====================================================
       PRODUITS
       2 PAR 2
    ====================================================== */

    .home-page .products-section {
        margin-top: 0 !important;

        padding-top: 20px !important;
        padding-bottom: 30px !important;
    }


    .home-page .products-heading {
        margin-bottom: 20px !important;
    }


    .home-page .products-heading h2 {
        font-size:
            clamp(
                24px,
                8vw,
                30px
            ) !important;
    }


    .home-page .products-grid {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 8px !important;
    }


    .home-page .product-card,
    .home-page .product-card-content {
        min-width: 0 !important;

        min-height: 230px !important;
    }


    .home-page .product-card-content {
        padding: 16px !important;
    }


    .home-page .product-card h2 {
        font-size: 18px !important;

        line-height: 1.08 !important;
    }


    .home-page .product-card p {
        font-size: 10px !important;

        line-height: 1.4 !important;
    }


    .home-page .product-button {
        width: 100% !important;

        min-height: 34px !important;

        padding:
            0
            10px !important;

        font-size: 8px !important;
    }


    /* =====================================================
       MAINTENANCE
    ====================================================== */

    .home-page .maintenance-reference {
        min-height: 300px !important;

        padding:
            40px
            0
            38px !important;
    }


    .home-page .maintenance-reference-copy h2 {
        font-size:
            clamp(
                28px,
                9vw,
                36px
            ) !important;
    }


    .home-page .maintenance-reference-copy p {
        max-width: 330px !important;

        font-size: 12px !important;
    }


    /* =====================================================
       HISTOIRE
    ====================================================== */

    .home-page .history-section {
        padding:
            30px
            0 !important;
    }


    .home-page .history-panel {
        gap: 22px !important;
    }


    .home-page .history-kicker {
        margin-bottom: 14px !important;

        font-size: 9px !important;
    }


    .home-page .history-content h2 {
        font-size:
            clamp(
                26px,
                9vw,
                34px
            ) !important;
    }


    .home-page .history-content p {
        font-size: 13px !important;

        line-height: 1.65 !important;
    }


    .home-page .history-image {
        min-height: 220px !important;
    }


    /* =====================================================
       ZONE D'INTERVENTION
    ====================================================== */

    .home-page .service-area-section {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }


    .home-page .service-area-layout {
        gap: 20px !important;
    }


    .home-page .service-area-content {
        max-width: none !important;

        margin-left: 0 !important;
    }


    .home-page .service-area-kicker {
        margin-bottom: 22px !important;
    }


    .home-page .service-area-kicker::after {
        bottom: -7px !important;
    }


    .home-page .service-area-content h2 {
        font-size:
            clamp(
                30px,
                10vw,
                40px
            ) !important;
    }


    .home-page .service-area-content p {
        font-size: 13px !important;

        line-height: 1.65 !important;
    }


    /* =====================================================
       REALISATIONS
    ====================================================== */

    .home-page .trust-section {
        padding:
            30px
            0 !important;
    }


    .home-page .trust-section > .container > h2 {
        font-size:
            clamp(
                26px,
                9vw,
                34px
            ) !important;
    }


    .home-page .trust-gallery {
        margin-top: 26px !important;

        gap: 10px !important;
    }


    .home-page .trust-card {
        min-height: 230px !important;
    }


    .home-page .trust-card .trust-card-content {
        left: 18px !important;

        bottom: 18px !important;
    }


    .home-page .trust-card-content h3 {
        font-size: 22px !important;
    }


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

    .home-page .footer {
        padding-top: 46px;
    }


    .home-page .footer-content {
        gap: 30px;

        text-align: center;
    }


    .home-page .footer-brand,
    .home-page .footer-logo {
        justify-self: center;
    }


    .home-page .footer-columns {
        grid-template-columns: 1fr !important;

        gap: 26px;

        text-align: center;
    }


    .home-page .footer-column {
        align-items: center;
    }


    .home-page .footer-cta {
        justify-content: center;
    }


    .home-page .footer-social-links {
        justify-content: center;
    }


    .home-page .footer-bottom {
        align-items: center;

        text-align: center;
    }


    .home-page .footer-contact-button {
        width: 100%;
    }

}

















/* =========================================================
   420PX
   POINTS HERO PLUS PROCHES DES BOUTONS
========================================================= */

@media (max-width: 420px) {

    .home-page .hero-services {
        bottom: 58px !important;
    }


    .home-page .products-section {
        padding-top: 4px !important;
    }

}


/* =========================================================
   DISTRIBUTEUR AUTOMATIQUE
========================================================= */

.product-page-vending .product-page-actions .button-main {
    color: var(--white) !important;

    background: var(--blue) !important;
    border-color: var(--blue) !important;
}

.product-page-vending .product-page-actions .button-main:hover {
    background: var(--blue-dark) !important;
    border-color: var(--blue-dark) !important;
}




/* =========================================================
   PAGE BOULANGERIE / PATISSERIE / CHOCOLATERIE
   RESPONSIVE 
========================================================= */


.product-page-bakery {
    min-width: 0;
    overflow-x: hidden;
}

.product-page-bakery *,
.product-page-bakery *::before,
.product-page-bakery *::after {
    box-sizing: border-box;
}

.product-page-bakery img,
.product-page-bakery svg {
    max-width: 100%;
}


/* =========================================================
   853PX → 1100PX
========================================================= */

@media (min-width: 853px) and (max-width: 1100px) {

    /* =====================================================
       PAGE
    ====================================================== */

    .product-page-bakery {
        width: 100%;
        max-width: none;

        margin: 0;

        padding-left: 0;
        padding-right: 0;
    }


    /* =====================================================
       CONTENEURS
    ====================================================== */

    .product-page-bakery .container,
    .product-page-bakery .product-intro,
    .product-page-bakery .project-support,
    .product-page-bakery .partners-intro,
    .product-page-bakery .partner-feature,
    .product-page-bakery .other-partners {
        width: calc(100% - 64px);

        max-width: 1380px;

        margin-left: auto;
        margin-right: auto;

        min-width: 0;
    }


    /* =====================================================
       HERO
    ====================================================== */

    .product-page-bakery .product-page-hero-image {
        width: 100%;

        min-height: 520px;
    }


    .product-page-bakery .product-page-hero-bg,
    .product-page-bakery .product-page-hero-overlay {
        inset: 0;

        width: 100%;
        height: 100%;
    }


    .product-page-bakery .product-page-hero-content {
        width: 100%;

        max-width: 820px;

        margin: 0 auto;

        transform: translateY(34px);
    }


    .product-page-bakery h1 {
        max-width: 820px !important;

        margin: 0 auto !important;

        font-size:
            clamp(
                44px,
                5vw,
                50px
            ) !important;

        line-height: 1.06 !important;
    }


    .product-page-bakery .product-page-actions {
        margin-top: 28px;
    }


    /* =====================================================
       INTRO
    ====================================================== */

    .product-page-bakery .product-intro-section {
        padding:
            76px
            0;
    }


    .product-page-bakery .product-intro {
        max-width: 760px;
    }


    .product-page-bakery .product-intro h2 {
        font-size:
            clamp(
                38px,
                4.5vw,
                44px
            );
    }


    .product-page-bakery .product-intro-text {
        max-width: 680px;

        margin:
            26px
            auto
            0;
    }


    .product-page-bakery .product-intro-text p {
        font-size: 16px;

        line-height: 1.68;
    }


    /* =====================================================
       PROJET
    ====================================================== */

    .product-page-bakery .project-support-section {
        padding:
            76px
            0;
    }


    .product-page-bakery .project-support {
        max-width: 1100px;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, 0.72fr);

        gap: 32px;
    }


    .product-page-bakery .project-support-content,
    .product-page-bakery .project-support-visual {
        min-width: 0;
    }


    .product-page-bakery .project-support h2 {
        font-size:
            clamp(
                36px,
                4.4vw,
                50px
            );
    }


    .product-page-bakery .project-support-lead {
        font-size: 16px;
    }


    .product-page-bakery .project-support-subtitle {
        font-size: 14px;
    }


    .product-page-bakery .project-support-visual {
        min-height: 300px;
    }


    /* =====================================================
       INTRO PARTENAIRES
    ====================================================== */

    .product-page-bakery .partners-intro-section {
        padding:
            76px
            0;
    }


    .product-page-bakery .partners-intro {
        max-width: 800px;
    }


    .product-page-bakery .partners-intro h2 {
        font-size:
            clamp(
                36px,
                4.5vw,
                48px
            );
    }


    .product-page-bakery .partners-intro p {
        max-width: 760px;

        font-size: 16px;
    }


    /* =====================================================
       BLOCS IMAGE + LOGOS
    ====================================================== */

    .product-page-bakery .partner-feature-section,
    .product-page-bakery .partner-feature-division {
        padding:
            42px
            0;
    }


    .product-page-bakery .partner-feature {
        display: grid;

        grid-template-columns:
            minmax(0, 0.92fr)
            minmax(0, 1.08fr);

        align-items: center;

        gap: 28px;
    }


    .product-page-bakery .partner-feature > * {
        min-width: 0;
    }


    .product-page-bakery .partner-feature-content,
    .product-page-bakery
    .partner-feature-division
    .partner-feature-content,
    .product-page-bakery
    .partner-feature-cooking
    .partner-feature-content {
        min-width: 0;
        min-height: 0;

        transform: none;
    }


    .product-page-bakery
    .partner-feature-reverse
    .partner-feature-content {
        padding-left: 18px;
    }


    .product-page-bakery .partner-feature-content h3 {
        max-width: 100%;

        white-space: normal;

        font-size:
            clamp(
                25px,
                3.2vw,
                34px
            );

        line-height: 1.06;
    }


    /* =====================================================
       IMAGES
    ====================================================== */

    .product-page-bakery .partner-feature-image {
        width: 100%;

        min-width: 0;

        display: flex;

        align-items: center;
        justify-content: center;

        overflow: hidden;
    }


    .product-page-bakery .partner-feature-image img,
    .product-page-bakery
    .partner-feature-preparation
    .partner-feature-image img,
    .product-page-bakery
    .partner-feature-division
    .partner-feature-image img {
        display: block;

        width: 100%;
        max-width: 100%;

        height: 360px;

        object-fit: contain;
        object-position: center;

        transform: none;
    }


    /* =====================================================
       LOGOS
       2 PAR LIGNE
    ====================================================== */

    .product-page-bakery .partner-brand-list {
        width: 100%;

        min-width: 0;

        margin-top: 20px;

        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            8px
            10px;
    }


    .product-page-bakery .partner-brand-logo {
        width: 100%;

        min-width: 0;

        height: 88px;

        padding:
            4px
            6px;
    }


    .product-page-bakery .partner-brand-logo img {
        width: 100%;

        max-width: 180px;

        height: 70px;

        object-fit: contain;
    }


    /* =====================================================
       AUTRES PARTENAIRES
    ====================================================== */

    .product-page-bakery .other-partners-section {
        padding:
            68px
            0;
    }


    .product-page-bakery .other-partners {
        max-width: 1000px;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, 0.72fr);

        gap: 30px;
    }


    .product-page-bakery .other-partners > * {
        min-width: 0;
    }


    .product-page-bakery .other-partners p {
        font-size: 17px;
    }


    .product-page-bakery .other-partners-logos {
        width: 100%;

        min-width: 0;

        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 6px;
    }


    .product-page-bakery .other-partners-logos span {
        width: 100%;

        min-width: 0;

        height: 98px;
    }


    .product-page-bakery .other-partners-logos img {
        width: 100%;

        max-width: 180px;

        height: 82px;

        object-fit: contain;
    }

}

/* =========================================================
   PAGE BOULANGERIE- RESPONSIVE 
========================================================= */

@media (max-width: 1024px) {

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

    body:has(.product-page-bakery) .header {
        width: 100%;

        padding: 4px 0;
    }

    body:has(.product-page-bakery) .header .container {
        width: calc(100% - 40px);

        display: flex;

        align-items: center;
        justify-content: space-between;
    }

    body:has(.product-page-bakery) .header-actions {
        display: none !important;
    }


    /* =====================================================
       LOGO
    ====================================================== */

    body:has(.product-page-bakery) .logo img {
        height: 66px;
        width: auto;
    }

    body:has(.product-page-bakery)
    .header.scrolled
    .logo img {
        height: 58px;
    }


    /* =====================================================
       BOUTON HAMBURGER
    ====================================================== */

    body:has(.product-page-bakery) .menu-button {
        position: relative;

        z-index: 1002;

        width: 44px;
        height: 44px;

        margin-left: auto;

        display: flex !important;

        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 6px;
    }

    body:has(.product-page-bakery)
    .menu-button span {
        width: 22px;
        height: 2px;

        background: var(--white);
    }


    /* =====================================================
       ANIMATION CROIX
    ====================================================== */

    body:has(.product-page-bakery)
    .menu-button.open
    span:first-child {
        transform:
            translateY(4px)
            rotate(45deg);
    }

    body:has(.product-page-bakery)
    .menu-button.open
    span:last-child {
        transform:
            translateY(-4px)
            rotate(-45deg);
    }


    /* =====================================================
       MENU PLEIN ECRAN
    ====================================================== */

    body:has(.product-page-bakery) .nav {
        position: fixed;

        z-index: 1001;

        top: 0;
        right: 0;

        width: 100%;
        height: 100dvh;

        margin: 0;

        padding:
            90px
            40px
            40px;

        display: flex;

        flex-direction: column;

        align-items: flex-start;
        justify-content: center;

        gap: 20px;

        background:
            linear-gradient(
                145deg,
                var(--black),
                var(--blue-dark)
            );

        transform: translateX(100%);

        transition:
            transform
            0.35s
            ease;
    }


    /* MENU OUVERT */

    body:has(.product-page-bakery)
    .nav.open {
        transform: translateX(0);
    }


    /* =====================================================
       LIENS PRINCIPAUX
    ====================================================== */

    body:has(.product-page-bakery)
    .nav > a,
    body:has(.product-page-bakery)
    .nav-link {
        width: 100%;

        font-size: 26px;

        line-height: 1.15;
    }


    body:has(.product-page-bakery)
    .nav-item {
        width: 100%;
    }


    /* =====================================================
       SOUS MENU
    ====================================================== */

    body:has(.product-page-bakery)
    .nav-dropdown {
        position: static;

        width: 100%;

        margin: 0;

        padding:
            8px
            0
            0
            18px;

        border: 0;

        background: transparent;

        box-shadow: none;
    }


    body:has(.product-page-bakery)
    .nav-dropdown a {
        font-size: 13px;

        line-height: 1.35;
    }

}


/* =========================================================
    700PX
========================================================= */

@media (max-width: 700px) {

    body:has(.product-page-bakery)
    .header
    .container {
        width: calc(100% - 28px);
    }


    body:has(.product-page-bakery)
    .logo img {
        height: 54px;
    }


    body:has(.product-page-bakery)
    .header.scrolled
    .logo img {
        height: 48px;
    }


    body:has(.product-page-bakery)
    .nav {
        padding:
            78px
            26px
            28px;
    }


    body:has(.product-page-bakery)
    .nav > a,
    body:has(.product-page-bakery)
    .nav-link {
        font-size: 23px;
    }

}


/* =========================================================
   425PX
========================================================= */

@media (max-width: 425px) {

    body:has(.product-page-bakery) .header {
        padding: 2px 0;
    }


    body:has(.product-page-bakery)
    .header
    .container {
        width: calc(100% - 24px);
    }


    body:has(.product-page-bakery)
    .logo img {
        height: 46px;
    }


    body:has(.product-page-bakery)
    .header.scrolled
    .logo img {
        height: 42px;
    }


    body:has(.product-page-bakery)
    .menu-button {
        width: 42px;
        height: 42px;

        padding: 10px;
    }


    body:has(.product-page-bakery)
    .menu-button span {
        width: 22px;
    }


    body:has(.product-page-bakery)
    .nav {
        padding:
            70px
            22px
            24px;
    }


    body:has(.product-page-bakery)
    .nav > a,
    body:has(.product-page-bakery)
    .nav-link {
        font-size: 21px;
    }


    body:has(.product-page-bakery)
    .nav-dropdown a {
        font-size: 12px;
    }

}


/* =========================================================
   852PX
========================================================= */

@media (max-width: 852px) {

    /* =====================================================
       CORRECTION GENERALE DE LA PAGE
    ====================================================== */

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        overflow-x: hidden !important;
    }


    .product-page.product-page-bakery {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        left: auto !important;
        right: auto !important;

        transform: none !important;

        overflow-x: hidden !important;
    }


    /* =====================================================
       TOUTES LES SECTIONS PRENNENT 100%
    ====================================================== */

    .product-page-bakery > section,
    .product-page-bakery .product-page-hero,
    .product-page-bakery .product-page-hero-image,
    .product-page-bakery .product-intro-section,
    .product-page-bakery .project-support-section,
    .product-page-bakery .partners-intro-section,
    .product-page-bakery .partner-feature-section,
    .product-page-bakery .other-partners-section {
        position: relative !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       CONTENEURS INTERIEURS
    ====================================================== */

    .product-page-bakery .container,
    .product-page-bakery .product-intro,
    .product-page-bakery .project-support,
    .product-page-bakery .partners-intro,
    .product-page-bakery .partner-feature,
    .product-page-bakery .other-partners {
        position: relative !important;

        width: calc(100% - 40px) !important;

        min-width: 0 !important;
        max-width: 1380px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        box-sizing: border-box !important;
    }


    .product-page-bakery .project-support > *,
    .product-page-bakery .partner-feature > *,
    .product-page-bakery .other-partners > *,
    .product-page-bakery .partner-brand-list > * {
        min-width: 0 !important;

        max-width: 100%;
    }


    /* =====================================================
       HERO
    ====================================================== */

    .product-page-bakery .product-page-hero-image {
        display: flex !important;

        align-items: center !important;

        min-height: 500px !important;
    }


    .product-page-bakery .product-page-hero-bg,
    .product-page-bakery .product-page-hero-overlay {
        position: absolute !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 100% !important;

        max-width: none !important;
    }


    .product-page-bakery
    .product-page-hero-image > .container {
        position: relative !important;

        z-index: 2;

        width: calc(100% - 40px) !important;

        max-width: 1380px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    .product-page-bakery .product-page-hero-content {
        width: 100% !important;

        max-width: 700px !important;

        margin:
            0
            auto !important;

        transform:
            translateY(22px) !important;
    }


    .product-page-bakery h1 {
        width: 100% !important;

        max-width: 700px !important;

        margin:
            0
            auto !important;

        font-size:
            clamp(
                35px,
                5.8vw,
                45px
            ) !important;

        line-height: 1.06 !important;
    }


    .product-page-bakery .product-page-actions {
        margin-top: 24px;
    }


    .product-page-bakery
    .product-page-actions
    .button {
        min-height: 44px;

        padding:
            0
            18px;

        font-size: 11px;
    }


    /* =====================================================
       INTRO
    ====================================================== */

    .product-page-bakery .product-intro-section {
        padding:
            58px
            0 !important;
    }


    .product-page-bakery .product-intro {
        max-width: 700px !important;
    }


    .product-page-bakery .product-intro h2 {
        font-size:
            clamp(
                32px,
                5vw,
                40px
            );

        line-height: 1.08;
    }


    .product-page-bakery .product-intro h2::after {
        margin-top: 20px;
    }


    .product-page-bakery .product-intro-text {
        max-width: 620px;

        margin:
            22px
            auto
            0;
    }


    .product-page-bakery .product-intro-text p {
        font-size: 15px;

        line-height: 1.65;
    }


    /* =====================================================
       PROJET
    ====================================================== */

    .product-page-bakery .project-support-section {
        padding:
            58px
            0 !important;
    }


    .product-page-bakery .project-support {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 28px !important;
    }


    .product-page-bakery .project-support-content {
        width: 100%;

        max-width: 680px;
    }


    .product-page-bakery .project-support h2 {
        font-size:
            clamp(
                32px,
                5vw,
                40px
            );
    }


    .product-page-bakery .project-support-lead {
        font-size: 15px;
    }


    .product-page-bakery .project-support-subtitle {
        font-size: 13px;
    }


    .product-page-bakery .project-support-item p {
        font-size: 12px;
    }


    .product-page-bakery .project-support-visual {
        width: 100%;

        min-height: 280px;
    }


    /* =====================================================
       INTRO PARTENAIRES
    ====================================================== */

    .product-page-bakery .partners-intro-section {
        padding:
            58px
            0 !important;
    }


    .product-page-bakery .partners-intro {
        max-width: 700px !important;
    }


    .product-page-bakery .partners-intro h2 {
        font-size:
            clamp(
                32px,
                5vw,
                40px
            );
    }


    .product-page-bakery .partners-intro p {
        margin-top: 22px;

        font-size: 15px;

        line-height: 1.65;
    }


    /* =====================================================
       BLOCS IMAGE + LOGOS
       RESTENT COTE A COTE
    ====================================================== */

    .product-page-bakery .partner-feature-section,
    .product-page-bakery .partner-feature-division {
        padding:
            34px
            0 !important;
    }


    .product-page-bakery .partner-feature {
        display: grid !important;

        grid-template-columns:
            minmax(0, 0.88fr)
            minmax(0, 1.12fr) !important;

        align-items: center !important;

        gap: 18px !important;
    }


    .product-page-bakery .partner-feature-content,
    .product-page-bakery
    .partner-feature-division
    .partner-feature-content,
    .product-page-bakery
    .partner-feature-cooking
    .partner-feature-content {
        min-width: 0 !important;
        min-height: 0 !important;

        padding:
            14px
            0 !important;

        transform: none !important;
    }


    .product-page-bakery
    .partner-feature-reverse
    .partner-feature-content {
        padding-left: 0 !important;
    }


    .product-page-bakery .partner-feature-content h3 {
        width: 100%;

        max-width: 100%;

        white-space: normal !important;

        font-size:
            clamp(
                21px,
                3.2vw,
                27px
            ) !important;

        line-height: 1.05 !important;
    }


    /* =====================================================
       IMAGES
    ====================================================== */

    .product-page-bakery .partner-feature-image,
    .product-page-bakery
    .partner-feature-preparation
    .partner-feature-image {
        width: 100% !important;

        min-width: 0 !important;
        min-height: 230px !important;

        display: flex;

        align-items: center;
        justify-content: center;

        overflow: hidden;
    }


    .product-page-bakery .partner-feature-image img,
    .product-page-bakery
    .partner-feature-preparation
    .partner-feature-image img,
    .product-page-bakery
    .partner-feature-division
    .partner-feature-image img {
        display: block;

        width: 100% !important;
        max-width: 100% !important;

        height: 270px !important;

        object-fit: contain !important;

        object-position: center !important;

        transform: none !important;
    }


    /* =====================================================
       LOGOS
    ====================================================== */

    .product-page-bakery .partner-brand-list {
        width: 100% !important;

        min-width: 0 !important;
        max-width: 100% !important;

        margin-top: 15px !important;

        display: grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap:
            5px
            7px !important;
    }


    .product-page-bakery .partner-brand-logo {
        width: 100% !important;

        min-width: 0 !important;
        max-width: 100% !important;

        height: 68px !important;

        padding:
            3px
            4px !important;
    }


    .product-page-bakery .partner-brand-logo img {
        width: 100% !important;

        max-width: 140px !important;

        height: 54px !important;

        object-fit: contain !important;
    }


    /* =====================================================
       AUTRES PARTENAIRES
    ====================================================== */

    .product-page-bakery .other-partners-section {
        padding:
            50px
            0 !important;
    }


    .product-page-bakery .other-partners {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 22px !important;
    }


    .product-page-bakery .other-partners p {
        max-width: 680px;

        font-size: 15px;

        line-height: 1.6;
    }


    .product-page-bakery .other-partners-logos {
        width: 100% !important;

        max-width: 500px;

        display: grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap: 6px !important;
    }


    .product-page-bakery .other-partners-logos span {
        width: 100% !important;

        min-width: 0 !important;

        height: 84px !important;
    }


    .product-page-bakery .other-partners-logos img {
        width: 100% !important;

        max-width: 160px !important;

        height: 68px !important;

        object-fit: contain !important;
    }

}



@media (max-width: 708px) {

    .product-page-bakery .container,
    .product-page-bakery .product-intro,
    .product-page-bakery .project-support,
    .product-page-bakery .partners-intro,
    .product-page-bakery .partner-feature,
    .product-page-bakery .other-partners {
        width: calc(100% - 40px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .product-page-bakery
    .product-page-hero-image > .container {
        width: calc(100% - 40px) !important;
    }

}


/* =========================================================
   700PX
========================================================= */

@media (max-width: 700px) {

    /* =====================================================
       CONTENEURS
    ====================================================== */

    .product-page-bakery .container,
    .product-page-bakery .product-intro,
    .product-page-bakery .project-support,
    .product-page-bakery .partners-intro,
    .product-page-bakery .partner-feature,
    .product-page-bakery .other-partners {
        width: calc(100% - 32px) !important;
    }


    .product-page-bakery
    .product-page-hero-image > .container {
        width: calc(100% - 32px) !important;
    }


    /* =====================================================
       HERO
    ====================================================== */

    .product-page-bakery .product-page-hero-image {
        min-height: 460px !important;
    }


    .product-page-bakery .product-page-hero-content {
        transform:
            translateY(16px) !important;
    }


    .product-page-bakery h1 {
        font-size:
            clamp(
                30px,
                6.5vw,
                38px
            ) !important;
    }


    /* =====================================================
       INTRO
    ====================================================== */

    .product-page-bakery .product-intro-section {
        padding:
            50px
            0 !important;
    }


    .product-page-bakery .product-intro h2 {
        font-size:
            clamp(
                28px,
                5.8vw,
                35px
            );
    }


    .product-page-bakery .product-intro-text p {
        font-size: 14px;
    }


    /* =====================================================
       PROJET
    ====================================================== */

    .product-page-bakery .project-support-section {
        padding:
            48px
            0 !important;
    }


    .product-page-bakery .project-support h2 {
        font-size:
            clamp(
                28px,
                5.8vw,
                35px
            );
    }


    .product-page-bakery .project-support-visual {
        min-height: 240px;
    }


    /* =====================================================
       INTRO PARTENAIRES
    ====================================================== */

    .product-page-bakery .partners-intro-section {
        padding:
            48px
            0 !important;
    }


    .product-page-bakery .partners-intro h2 {
        font-size:
            clamp(
                28px,
                5.8vw,
                35px
            );
    }


    /* =====================================================
       IMAGE + LOGOS
       ENCORE COTE A COTE
    ====================================================== */

    .product-page-bakery .partner-feature {
        grid-template-columns:
            minmax(0, 0.86fr)
            minmax(0, 1.14fr) !important;

        gap: 14px !important;
    }


    .product-page-bakery .partner-feature-content h3 {
        font-size:
            clamp(
                18px,
                3.8vw,
                22px
            ) !important;
    }


    .product-page-bakery .partner-feature-image,
    .product-page-bakery
    .partner-feature-preparation
    .partner-feature-image {
        min-height: 205px !important;
    }


    .product-page-bakery .partner-feature-image img,
    .product-page-bakery
    .partner-feature-preparation
    .partner-feature-image img,
    .product-page-bakery
    .partner-feature-division
    .partner-feature-image img {
        height: 225px !important;
    }


    /* =====================================================
       LOGOS
    ====================================================== */

    .product-page-bakery .partner-brand-list {
        margin-top: 12px !important;

        gap:
            4px
            5px !important;
    }


    .product-page-bakery .partner-brand-logo {
        height: 58px !important;

        padding: 2px !important;
    }


    .product-page-bakery .partner-brand-logo img {
        max-width: 115px !important;

        height: 46px !important;
    }


    /* =====================================================
       AUTRES PARTENAIRES
    ====================================================== */

    .product-page-bakery .other-partners-section {
        padding:
            44px
            0 !important;
    }


    .product-page-bakery .other-partners-logos span {
        height: 74px !important;
    }


    .product-page-bakery .other-partners-logos img {
        max-width: 145px !important;

        height: 60px !important;
    }

}


/* =========================================================
   425PX
========================================================= */

@media (max-width: 425px) {

    /* =====================================================
       CONTENEURS
    ====================================================== */

    .product-page-bakery .container,
    .product-page-bakery .product-intro,
    .product-page-bakery .project-support,
    .product-page-bakery .partners-intro,
    .product-page-bakery .other-partners {
        width: calc(100% - 28px) !important;
    }


    .product-page-bakery
    .product-page-hero-image > .container {
        width: calc(100% - 28px) !important;
    }


    /* =====================================================
       HERO
    ====================================================== */

    .product-page-bakery .product-page-hero-image {
        min-height: 420px !important;
    }


    .product-page-bakery .product-page-hero-bg {
        background-position:
            center
            center;
    }


    .product-page-bakery .product-page-hero-content {
        width: 100% !important;

        max-width: none !important;

        transform:
            translateY(12px) !important;
    }


    .product-page-bakery h1 {
        width: 100% !important;

        max-width: 390px !important;

        font-size: 28px !important;

        line-height: 1.05 !important;
    }


    .product-page-bakery .product-page-actions {
        margin-top: 18px;
    }


    .product-page-bakery
    .product-page-actions
    .button {
        min-height: 40px;

        padding:
            0
            14px;

        font-size: 10px;
    }


    /* =====================================================
       INTRO
    ====================================================== */

    .product-page-bakery .product-intro-section {
        padding:
            40px
            0 !important;
    }


    .product-page-bakery .product-intro h2 {
        font-size: 26px;

        line-height: 1.07;
    }


    .product-page-bakery .product-intro h2::after {
        width: 42px;

        margin-top: 14px;
    }


    .product-page-bakery .product-intro-text {
        margin-top: 17px;
    }


    .product-page-bakery .product-intro-text p {
        font-size: 12px;

        line-height: 1.6;
    }


    /* =====================================================
       PROJET
    ====================================================== */

    .product-page-bakery .project-support-section {
        padding:
            40px
            0 !important;
    }


    .product-page-bakery .project-support {
        gap: 22px !important;
    }


    .product-page-bakery .project-support h2 {
        font-size: 26px;

        line-height: 1.07;
    }


    .product-page-bakery .project-support-lead {
        font-size: 14px;
    }


    .product-page-bakery .project-support-subtitle {
        font-size: 12px;
    }


    .product-page-bakery .project-support-item {
        grid-template-columns:
            34px
            minmax(0, 1fr);

        gap: 10px;

        padding:
            11px
            0;
    }


    .product-page-bakery .project-support-icon {
        width: 34px;
        height: 34px;
    }


    .product-page-bakery
    .project-support-icon svg {
        width: 19px;
        height: 19px;
    }


    .product-page-bakery
    .project-support-item h3 {
        font-size: 12px;
    }


    .product-page-bakery
    .project-support-item p {
        font-size: 11px;
    }


    .product-page-bakery
    .project-support-visual {
        min-height: 200px;
    }


    /* =====================================================
       PARTENAIRES INTRO
    ====================================================== */

    .product-page-bakery .partners-intro-section {
        padding:
            40px
            0 !important;
    }


    .product-page-bakery .partners-intro h2 {
        font-size: 26px;

        line-height: 1.07;
    }


    .product-page-bakery .partners-intro p {
        font-size: 12px;

        line-height: 1.6;
    }


    /* =====================================================
       BLOCS IMAGE + LOGOS
       TOUJOURS COTE A COTE
    ====================================================== */

    .product-page-bakery .partner-feature-section,
    .product-page-bakery .partner-feature-division {
        padding:
            28px
            0 !important;
    }


    .product-page-bakery .partner-feature {
        width: calc(100% - 20px) !important;

        grid-template-columns:
            minmax(0, 0.8fr)
            minmax(0, 1.2fr) !important;

        gap: 8px !important;
    }


    .product-page-bakery .partner-feature-content {
        padding:
            8px
            0 !important;
    }


    .product-page-bakery
    .partner-feature-content h3 {
        font-size: 16px !important;

        line-height: 1.04 !important;
    }


    .product-page-bakery
    .partner-feature-content
    h3::after {
        width: 42px;

        margin-top: 8px;
    }


    /* =====================================================
       IMAGES
    ====================================================== */

    .product-page-bakery .partner-feature-image,
    .product-page-bakery
    .partner-feature-preparation
    .partner-feature-image {
        min-height: 150px !important;
    }


    .product-page-bakery .partner-feature-image img,
    .product-page-bakery
    .partner-feature-preparation
    .partner-feature-image img,
    .product-page-bakery
    .partner-feature-division
    .partner-feature-image img {
        height: 170px !important;
    }


    /* =====================================================
       LOGOS
       2 PAR LIGNE
    ====================================================== */

    .product-page-bakery
    .partner-brand-list {
        margin-top: 8px !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap:
            2px
            3px !important;
    }


    .product-page-bakery
    .partner-brand-logo {
        width: 100% !important;

        min-width: 0 !important;

        height: 44px !important;

        padding: 1px !important;
    }


    .product-page-bakery
    .partner-brand-logo img {
        width: 100% !important;

        max-width: 85px !important;

        height: 36px !important;
    }


    /* =====================================================
       AUTRES PARTENAIRES
    ====================================================== */

    .product-page-bakery .other-partners-section {
        padding:
            36px
            0 !important;
    }


    .product-page-bakery .other-partners p {
        font-size: 12px;

        line-height: 1.58;
    }


    .product-page-bakery
    .other-partners-logos {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }


    .product-page-bakery
    .other-partners-logos span {
        height: 60px !important;
    }


    .product-page-bakery
    .other-partners-logos img {
        max-width: 115px !important;

        height: 48px !important;
    }

}



/* =========================================================
   PAGE BOUCHERIE / RESTAURATION / TRAITEUR
   RESPONSIVE 
========================================================= */


/* =========================================================
   SECURITE GENERALE
========================================================= */

.product-page-catering {
    min-width: 0;
    overflow-x: hidden;
}

.product-page-catering *,
.product-page-catering *::before,
.product-page-catering *::after {
    box-sizing: border-box;
}

.product-page-catering img,
.product-page-catering svg {
    max-width: 100%;
}


/* =========================================================
   1024PX
========================================================= */

@media (max-width: 1024px) {

    body:has(.product-page-catering) .header-actions {
        display: none !important;
    }

    body:has(.product-page-catering) .menu-button {
        position: relative;

        z-index: 1002;

        width: 44px;
        height: 44px;

        margin-left: auto;

        display: flex !important;

        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 6px;
    }

    body:has(.product-page-catering) .nav {
        position: fixed;

        z-index: 1001;

        inset: 0;

        width: 100%;
        height: 100dvh;

        margin: 0;

        padding:
            90px
            40px
            40px;

        display: flex;

        flex-direction: column;

        align-items: flex-start;
        justify-content: center;

        gap: 20px;

        background:
            linear-gradient(
                145deg,
                var(--black),
                var(--blue-dark)
            );

        transform: translateX(100%);

        transition:
            transform
            0.35s
            ease;
    }

    body:has(.product-page-catering) .nav.open {
        transform: translateX(0);
    }

    body:has(.product-page-catering) .nav > a,
    body:has(.product-page-catering) .nav-link {
        width: 100%;

        font-size: 26px;

        line-height: 1.15;
    }

    body:has(.product-page-catering) .nav-item {
        width: 100%;
    }

    body:has(.product-page-catering) .nav-dropdown {
        position: static;

        width: 100%;

        padding:
            8px
            0
            0
            18px;

        border: 0;

        background: transparent;

        box-shadow: none;
    }

    body:has(.product-page-catering) .nav-dropdown a {
        font-size: 13px;
    }
}


/* =========================================================
   853PX → 1100PX
========================================================= */

@media (min-width: 853px) and (max-width: 1100px) {

    .product-page-catering .container,
    .product-page-catering .product-intro,
    .product-page-catering .catering-intro,
    .product-page-catering .support-timeline,
    .product-page-catering .brand-partners,
    .product-page-catering .other-partners {
        width: calc(100% - 64px);

        max-width: 1380px;

        margin-left: auto;
        margin-right: auto;

        min-width: 0;
    }


    /* HERO */

    .product-page-catering .product-page-hero-image {
        min-height: 520px;
    }

    .product-page-catering .product-page-hero-content {
        width: 100%;

        max-width: 900px;

        margin:
            0
            auto;

        transform: translateY(38px);
    }

    .product-page-catering h1 {
        max-width: 850px !important;

        font-size:
            clamp(
                44px,
                5vw,
                52px
            ) !important;

        line-height: 1.06 !important;
    }


    /* IMAGE + TEXTE */

    .product-page-catering .catering-intro-section {
        padding:
            76px
            0;
    }

    .product-page-catering .catering-intro {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 0.85fr);

        align-items: center;

        gap: 46px;
    }

    .product-page-catering .catering-intro-reverse {
        grid-template-columns:
            minmax(300px, 0.85fr)
            minmax(0, 1fr);
    }

    .product-page-catering .catering-intro-content,
    .product-page-catering .catering-intro-image {
        min-width: 0;
    }

    .product-page-catering .catering-intro-content h2 {
        font-size:
            clamp(
                36px,
                4.5vw,
                48px
            );
    }

    .product-page-catering .catering-intro-content p {
        font-size: 16px;

        line-height: 1.68;
    }

    .product-page-catering .catering-intro-image img {
        width: 100%;
        height: 340px;

        object-fit: cover;
    }


    /* TIMELINE */

    .product-page-catering .support-timeline-section {
        padding:
            76px
            0;
    }

    .product-page-catering .support-steps {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );

        gap: 30px;
    }


    /* MARQUES */

    .product-page-catering .brand-partners-section {
        padding:
            76px
            0;
    }

    .product-page-catering .brand-partners-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap:
            28px
            20px;
    }

    .product-page-catering .brand-partner-card {
        min-width: 0;
    }

    .product-page-catering .brand-partner-logo {
        width: 100%;

        min-width: 0;
        min-height: 135px;
    }

    .product-page-catering .brand-partner-logo img {
        width: 100%;

        max-width: 250px;
        height: 120px;

        object-fit: contain;
    }
}


/* =========================================================
   852PX
========================================================= */

@media (max-width: 852px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        overflow-x: hidden !important;
    }

    .product-page.product-page-catering {
        position: relative !important;

        display: block !important;

        width: 100% !important;

        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        left: auto !important;
        right: auto !important;

        transform: none !important;

        overflow-x: hidden !important;
    }


    /* SECTIONS */

    .product-page-catering > section,
    .product-page-catering .product-page-hero,
    .product-page-catering .product-page-hero-image,
    .product-page-catering .product-intro-section,
    .product-page-catering .catering-intro-section,
    .product-page-catering .support-timeline-section,
    .product-page-catering .brand-partners-section,
    .product-page-catering .other-partners-section {
        position: relative !important;

        width: 100% !important;

        min-width: 0 !important;
        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }


    /* CONTENEURS */

    .product-page-catering .container,
    .product-page-catering .product-intro,
    .product-page-catering .catering-intro,
    .product-page-catering .support-timeline,
    .product-page-catering .brand-partners,
    .product-page-catering .other-partners {
        width: calc(100% - 40px) !important;

        min-width: 0 !important;
        max-width: 1380px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* HERO */

    .product-page-catering .product-page-hero-image {
        min-height: 500px !important;
    }

    .product-page-catering .product-page-hero-bg,
    .product-page-catering .product-page-hero-overlay {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;
    }

    .product-page-catering
    .product-page-hero-image > .container {
        width: calc(100% - 40px) !important;
    }

    .product-page-catering .product-page-hero-content {
        width: 100% !important;

        max-width: 760px !important;

        margin:
            0
            auto !important;

        transform: translateY(22px) !important;
    }

    .product-page-catering h1 {
        max-width: 760px !important;

        font-size:
            clamp(
                35px,
                5.7vw,
                44px
            ) !important;

        line-height: 1.06 !important;
    }

    .product-page-catering
    h1
    .catering-title-line {
        white-space: normal !important;
    }


    /* IMAGE + TEXTE */

    .product-page-catering .catering-intro-section {
        padding:
            58px
            0 !important;
    }

    .product-page-catering .catering-intro {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 0.9fr) !important;

        align-items: center !important;

        gap: 24px !important;
    }

    .product-page-catering .catering-intro-reverse {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1fr) !important;
    }

    .product-page-catering .catering-intro-content,
    .product-page-catering .catering-intro-image {
        min-width: 0 !important;
    }

    .product-page-catering .catering-intro-content h2 {
        font-size:
            clamp(
                28px,
                4.5vw,
                36px
            ) !important;
    }

    .product-page-catering .catering-intro-content p {
        font-size: 14px;

        line-height: 1.62;
    }

    .product-page-catering .catering-intro-image img {
        width: 100% !important;
        height: 280px !important;

        object-fit: cover;
    }


    /* TIMELINE : 4 SUR UNE LIGNE */

    .product-page-catering .support-timeline-section {
        padding:
            56px
            0 !important;
    }

    .product-page-catering .support-timeline-heading h2 {
        font-size:
            clamp(
                30px,
                5vw,
                40px
            );
    }

    .product-page-catering .support-steps {
        display: grid !important;

        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            ) !important;

        gap: 14px !important;

        margin-top: 48px !important;
    }

    .product-page-catering .support-step {
        min-width: 0;

        padding-top: 72px;
    }

    .product-page-catering .support-step-number {
        font-size:
            clamp(
                42px,
                7vw,
                64px
            );
    }

    .product-page-catering .support-step h3 {
        font-size: 14px;

        line-height: 1.2;
    }

    .product-page-catering .support-step p {
        font-size: 12px;

        line-height: 1.5;
    }


    /* MARQUES */

    .product-page-catering .brand-partners-section {
        padding:
            56px
            0 !important;
    }

    .product-page-catering .brand-partners-grid {
        display: grid;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap:
            20px
            10px;
    }

    .product-page-catering .brand-partner-card {
        min-width: 0;
    }

    .product-page-catering .brand-partner-logo {
        width: 100%;

        min-width: 0;
        min-height: 96px;

        margin-bottom: 18px;
    }

    .product-page-catering .brand-partner-logo img {
        width: 100%;

        max-width: 185px;
        height: 86px;

        object-fit: contain;
    }


    /* AUTRES MARQUES */

    .product-page-catering .other-partners-section {
        padding:
            50px
            0 !important;
    }

    .product-page-catering .other-partners {
        grid-template-columns: 1fr !important;

        gap: 22px !important;
    }

    .product-page-catering .other-partners-logos {
        width: 100%;

        max-width: 500px;

        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 6px;
    }

    .product-page-catering .other-partners-logos span {
        width: 100%;

        min-width: 0;

        height: 86px;
    }

    .product-page-catering .other-partners-logos img {
        width: 100%;

        max-width: 165px;
        height: 70px;

        object-fit: contain;
    }
}


/* =========================================================
   697PX
========================================================= */

@media (max-width: 697px) {

    .product-page-catering .support-steps {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            ) !important;

        gap: 8px !important;

        margin-top: 58px !important;
    }

    .product-page-catering .support-step {
        min-width: 0;

        padding-top: 64px !important;
    }

    .product-page-catering .support-step-number {
        font-size:
            clamp(
                36px,
                7vw,
                50px
            );
    }

    .product-page-catering .support-step h3 {
        font-size: 11px;

        line-height: 1.15;

        margin-left: 9px;
    }

    .product-page-catering .support-step p {
        font-size: 9.5px;

        line-height: 1.4;

        margin-left: 9px;
    }
}


/* =========================================================
   676PX
   BOUTONS MARQUES PLUS PETITS
========================================================= */

@media (max-width: 676px) {

    .product-page-catering .brand-partner-link {
        gap: 6px;

        font-size: 10px;
        line-height: 1.2;

        letter-spacing: 0.04em;
    }


    .product-page-catering .brand-partner-link i {
        width: 18px;
    }


    .product-page-catering .brand-partner-link i::after {
        width: 5px;
        height: 5px;
    }

}


/* =========================================================
    686PX
   TEXTE PUIS IMAGE
========================================================= */

@media (max-width: 686px) {

    /* MARGES */

    .product-page-catering .container,
    .product-page-catering .product-intro,
    .product-page-catering .catering-intro,
    .product-page-catering .support-timeline,
    .product-page-catering .brand-partners,
    .product-page-catering .other-partners {
        width: calc(100% - 40px) !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    .product-page-catering
    .product-page-hero-image > .container {
        width: calc(100% - 40px) !important;
    }


    /* HERO */

    .product-page-catering .product-page-hero-image {
        min-height: 460px !important;
    }

    .product-page-catering h1 {
        font-size:
            clamp(
                30px,
                6.5vw,
                38px
            ) !important;
    }


    /* =====================================================
       BLOCS :
       TEXTE
       IMAGE
    ====================================================== */

    .product-page-catering .catering-intro,
    .product-page-catering .catering-intro-reverse {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 22px !important;
    }


    .product-page-catering .catering-intro-content,
    .product-page-catering
    .catering-intro-reverse
    .catering-intro-content {
        grid-column: 1 !important;

        order: 1 !important;

        width: 100% !important;
    }


    .product-page-catering .catering-intro-image,
    .product-page-catering
    .catering-intro-reverse
    .catering-intro-image {
        grid-column: 1 !important;

        order: 2 !important;

        width: 100% !important;
    }


    .product-page-catering .catering-intro-content h2 {
        font-size:
            clamp(
                26px,
                5vw,
                32px
            ) !important;
    }


    .product-page-catering .catering-intro-content p {
        font-size: 13px;

        line-height: 1.62;
    }


    .product-page-catering .catering-intro-image img {
        display: block;

        width: 100% !important;

        height: 260px !important;

        object-fit: cover;
    }


    /* TIMELINE RESTE HORIZONTALE */

    .product-page-catering .support-steps {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            ) !important;

        gap: 7px !important;

        margin-top: 58px !important;
    }


    /* LOGOS */

    .product-page-catering .brand-partners-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap:
            16px
            7px;
    }

    .product-page-catering .brand-partner-logo {
        min-height: 76px;

        margin-bottom: 12px;
    }

    .product-page-catering .brand-partner-logo img {
        max-width: 140px;

        height: 66px;
    }
}


/* =========================================================
   BOUTONS PLUS PETITS
   632PX
========================================================= */

@media (max-width: 632px) {

    .product-page-catering
    .catering-intro
    .button,
    .product-page-catering
    .catering-intro
    .button-main,
    .product-page-catering
    .catering-intro
    a.button {
        min-height: 38px !important;

        padding:
            0
            14px !important;

        font-size: 10px !important;

        letter-spacing: 0.5px !important;
    }
}


/* =========================================================
    425PX
========================================================= */

@media (max-width: 425px) {

    .product-page-catering .container,
    .product-page-catering .product-intro,
    .product-page-catering .catering-intro,
    .product-page-catering .support-timeline,
    .product-page-catering .brand-partners,
    .product-page-catering .other-partners {
        width: calc(100% - 28px) !important;
    }


    .product-page-catering
    .product-page-hero-image > .container {
        width: calc(100% - 28px) !important;
    }


    /* HEADER */

    body:has(.product-page-catering)
    .header
    .container {
        width: calc(100% - 24px);
    }

    body:has(.product-page-catering)
    .logo img {
        height: 46px;
    }

    body:has(.product-page-catering)
    .header.scrolled
    .logo img {
        height: 42px;
    }


    /* HERO */

    .product-page-catering
    .product-page-hero-image {
        min-height: 420px !important;
    }

    .product-page-catering
    .product-page-hero-content {
        transform:
            translateY(12px) !important;
    }

    .product-page-catering h1 {
        max-width: 390px !important;

        font-size: 28px !important;

        line-height: 1.05 !important;
    }


    /* TEXTE + IMAGE */

    .product-page-catering
    .catering-intro-section {
        padding:
            40px
            0 !important;
    }

    .product-page-catering .catering-intro,
    .product-page-catering .catering-intro-reverse {
        grid-template-columns:
            1fr !important;

        gap: 18px !important;
    }

    .product-page-catering
    .catering-intro-content {
        order: 1 !important;
    }

    .product-page-catering
    .catering-intro-image {
        order: 2 !important;
    }

    .product-page-catering
    .catering-intro-content h2 {
        font-size: 26px !important;
    }

    .product-page-catering
    .catering-intro-content p {
        font-size: 12.5px;

        line-height: 1.6;
    }

    .product-page-catering
    .catering-intro-image img {
        height: 220px !important;
    }


    /* =====================================================
       425 → 416 
    ====================================================== */

    .product-page-catering
    .support-steps {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            ) !important;

        gap: 5px !important;

        margin-top: 54px !important;
    }

    .product-page-catering
    .support-step {
        padding-top: 54px !important;
    }

    .product-page-catering
    .support-step-number {
        font-size: 32px;
    }

    .product-page-catering
    .support-step h3 {
        font-size: 10px;
    }

    .product-page-catering
    .support-step p {
        font-size: 8px;

        line-height: 1.35;
    }


    /* MARQUES */

    .product-page-catering .brand-partner-link {
        gap: 3px !important;
    }


    .product-page-catering .brand-partner-link i {
        width: 12px !important;
    }

    .product-page-catering
    .brand-partners-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap:
            12px
            5px;
    }

    .product-page-catering
    .brand-partner-logo {
        min-height: 58px;
        height: 58px;

        margin-bottom: 8px;
    }

    .product-page-catering
    .brand-partner-logo img {
        width: 100%;

        max-width: 100px;
        height: 52px;

        object-fit: contain;
    }
}


/* =========================================================
   428PX
========================================================= */

@media (max-width: 428px) {

    .product-page-catering
    .support-timeline-section {
        padding:
            40px
            0 !important;
    }


    .product-page-catering
    .support-steps {
        display: grid !important;

        grid-template-columns:
            1fr !important;

        gap: 0 !important;

        margin-top: 28px !important;
    }


    /* LIGNE VERTICALE */

    .product-page-catering
    .support-steps::before {
        display: block !important;

        top: 18px !important;
        bottom: 18px !important;
        left: 56px !important;
        right: auto !important;

        width: 1px !important;
        height: auto !important;

        background:
            linear-gradient(
                180deg,
                rgba(139, 185, 236, 0.92),
                rgba(255, 255, 255, 0.18) 72%,
                rgba(255, 255, 255, 0.08)
            ) !important;
    }


    .product-page-catering
    .support-step {
        position: relative;

        width: 100%;

        min-height: 0;

        padding:
            18px
            0
            22px
            94px !important;

        border-bottom: 0 !important;
    }


    .product-page-catering
    .support-step:last-child {
        border-bottom: 0;
    }


    .product-page-catering
    .support-step-number {
        position: absolute;

        top: 15px;
        left: 0;

        width: 44px;

        text-align: left;

        font-size: 34px;
    }


    .product-page-catering
    .support-step h3 {
        font-size: 14px;

        line-height: 1.2;
    }


    .product-page-catering
    .support-step p {
        margin-top: 6px;

        font-size: 11px;

        line-height: 1.5;
    }


    .product-page-catering
    .support-step-dot {
        top: 23px !important;
        left: 49px !important;
    }


    .product-page-catering
    .support-step h3,
    .product-page-catering
    .support-step p {
        margin-left: 0 !important;
    }
}


/* =========================================================
   375PX
========================================================= */

@media (max-width: 375px) {

    /* CONTENEURS */

    .product-page-catering .container,
    .product-page-catering .product-intro,
    .product-page-catering .catering-intro,
    .product-page-catering .support-timeline,
    .product-page-catering .brand-partners,
    .product-page-catering .other-partners {
        width: calc(100% - 24px) !important;
    }


    /* HERO */

    .product-page-catering h1 {
        max-width: 340px !important;

        font-size: 25px !important;
    }


    /* =====================================================
       TIMELINE VERTICALE
    ====================================================== */

    .product-page-catering
    .support-step {
        padding:
            17px
            0
            17px
            88px !important;
    }

    .product-page-catering
    .support-step-number {
        top: 15px;

        width: 40px;

        font-size: 32px;
    }

    .product-page-catering
    .support-steps::before {
        left: 52px !important;
    }

    .product-page-catering
    .support-step-dot {
        left: 45px !important;
        top: 22px !important;
    }

    .product-page-catering
    .support-step h3 {
        font-size: 13px;
    }

    .product-page-catering
    .support-step p {
        font-size: 10.5px;
    }


    /* =====================================================
       LOGOS PLUS PETITS + ALIGNES
    ====================================================== */

    .product-page-catering
    .brand-partners-grid {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        align-items: start;

        gap:
            10px
            4px;
    }


    .product-page-catering
    .brand-partner-card {
        width: 100%;

        min-width: 0;

        display: flex;

        flex-direction: column;

        align-items: center;

        text-align: center;
    }


    .product-page-catering
    .brand-partner-logo {
        width: 100%;

        min-width: 0;

        min-height: 48px;
        height: 48px;

        margin-bottom: 6px;

        display: flex;

        align-items: center;
        justify-content: center;
    }


    .product-page-catering
    .brand-partner-logo img {
        width: 100%;

        max-width: 82px;

        height: 42px;

        object-fit: contain;

        object-position: center;
    }


    .product-page-catering
    .brand-partner-card strong {
        max-width: 100%;

        font-size: 9px;

        line-height: 1.15;

        text-align: center;
    }


    .product-page-catering
    .brand-partner-card small {
        max-width: 100%;

        margin-top: 3px;

        font-size: 7px;

        line-height: 1.2;

        text-align: center;
    }


    /* AUTRES LOGOS */

    .product-page-catering
    .other-partners-logos {
        width: 100%;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            4px
            2px;
    }


    .product-page-catering
    .other-partners-logos span {
        width: 100%;

        min-width: 0;

        height: 54px;

        padding: 2px;
    }


    .product-page-catering
    .other-partners-logos img {
        width: 100%;

        max-width: 100px;

        height: 44px;

        object-fit: contain;
    }
}



/* =========================================================
   PAGE DISTRIBUTEUR AUTOMATIQUE- RESPONSIVE 
========================================================= */


/* =========================================================
   SECURITE GENERALE
========================================================= */

.product-page-vending {
    min-width: 0;
    overflow-x: hidden;
    padding-top: 0;
}

.product-page-vending *,
.product-page-vending *::before,
.product-page-vending *::after {
    box-sizing: border-box;
}

.product-page-vending img,
.product-page-vending svg,
.product-page-vending video {
    max-width: 100%;
}


/* =========================================================
   1024PX
========================================================= */

@media (max-width: 1024px) {

    body:has(.product-page-vending) .header-actions {
        display: none !important;
    }

    body:has(.product-page-vending) .menu-button {
        position: relative;

        z-index: 1002;

        width: 44px;
        height: 44px;

        margin-left: auto;

        display: flex !important;

        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 6px;
    }

    body:has(.product-page-vending) .nav {
        position: fixed;

        z-index: 1001;

        inset: 0;

        width: 100%;
        height: 100dvh;

        margin: 0;

        padding:
            90px
            40px
            40px;

        display: flex;

        flex-direction: column;

        align-items: flex-start;
        justify-content: center;

        gap: 20px;

        background:
            linear-gradient(
                145deg,
                var(--black),
                var(--blue-dark)
            );

        transform: translateX(100%);

        transition:
            transform
            0.35s
            ease;
    }

    body:has(.product-page-vending) .nav.open {
        transform: translateX(0);
    }

    body:has(.product-page-vending) .nav > a,
    body:has(.product-page-vending) .nav-link {
        width: 100%;

        font-size: 26px;

        line-height: 1.15;
    }

    body:has(.product-page-vending) .nav-item {
        width: 100%;
    }

    body:has(.product-page-vending) .nav-dropdown {
        position: static;

        width: 100%;

        padding:
            8px
            0
            0
            18px;

        border: 0;

        background: transparent;

        box-shadow: none;
    }

}


/* =========================================================
   853PX → 1100PX
========================================================= */

@media (min-width: 853px) and (max-width: 1100px) {

    /* =====================================================
       CONTENEUR
    ====================================================== */

    .product-page-vending .container {
        width: calc(100% - 64px);

        max-width: 1380px;

        margin-left: auto;
        margin-right: auto;
    }


    /* =====================================================
       HERO
    ====================================================== */

    .product-page-vending .product-page-hero-image {
        min-height: 520px;
    }

    .product-page-vending .product-page-hero-content {
        width: 100%;

        max-width: 900px;

        margin: 0 auto;

        transform: translateY(34px);
    }

    .product-page-vending h1 {
        max-width: 860px !important;

        font-size:
            clamp(
                44px,
                5vw,
                52px
            ) !important;

        line-height: 1.05 !important;
    }


    /* =====================================================
       PREMIERE PARTIE
       MACHINE + INFOS
    ====================================================== */

    .product-page-vending .vending-intro {
        width: 100%;

        max-width: 980px;

        margin: 0 auto;
    }

    .product-page-vending .vending-showcase {
        position: relative;

        width: calc(100% - 20px);

        max-width: 900px;

        min-height: 410px;

        margin:
            0
            auto;

        overflow: visible;
    }

    .product-page-vending .vending-machine-wrap img {
        width:
            clamp(
                250px,
                29vw,
                340px
            );
    }


    /* BULLES GAUCHE */

    .product-page-vending .vending-callout-left {
        left: auto !important;

        right:
            calc(
                50% + 135px
            ) !important;
    }


    /* BULLE DROITE */

    .product-page-vending .vending-callout-right {
        right: auto !important;

        left:
            calc(
                50% + 135px
            ) !important;

        top: 47%;
    }


    .product-page-vending .vending-callout-top {
        top: 23%;
    }

    .product-page-vending .vending-callout-bottom {
        top: 62%;
    }


    .product-page-vending .vending-callout {
        width: 190px;

        max-width: 190px;

        grid-template-columns:
            34px
            minmax(0, 1fr);

        gap:
            2px
            8px;
    }

    .product-page-vending .vending-callout > span {
        width: 34px;
        height: 34px;
    }

    .product-page-vending .vending-callout strong {
        font-size: 11px;
    }

    .product-page-vending .vending-callout p {
        font-size: 9px;
    }


    /* =====================================================
       TRAITS QUI ARRIVENT SUR LE DISTRIBUTEUR
    ====================================================== */

    .product-page-vending .vending-callout::before {
        width: 105px !important;
    }

    .product-page-vending
    .vending-callout-left::before {
        left:
            calc(100% + 8px) !important;
    }

    .product-page-vending
    .vending-callout-left::after {
        left:
            calc(
                100% + 8px + 102px
            ) !important;
    }

    .product-page-vending
    .vending-callout-right::before {
        right:
            calc(100% + 8px) !important;
    }

    .product-page-vending
    .vending-callout-right::after {
        right:
            calc(
                100% + 8px + 102px
            ) !important;
    }


    /* =====================================================
       DEUXIEME PARTIE
    ====================================================== */

    .product-page-vending .vending-solution {
        gap: 42px;
    }

    .product-page-vending
    .vending-solution-visual img {
        width:
            min(
                100%,
                390px
            );
    }


    /* =====================================================
       TROISIEME PARTIE
       MARGES
    ====================================================== */

    .product-page-vending
    .vending-custom-showcase {
        width:
            calc(100% - 48px);

        max-width: 1000px;

        margin-left: auto;
        margin-right: auto;
    }


    /* =====================================================
       CARDS DE FIN
       3 SUR LA MEME LIGNE
    ====================================================== */

    .product-page-vending
    .vending-support-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;
    }

    .product-page-vending
    .vending-support-grid article {
        min-width: 0;

        padding:
            28px
            18px;
    }

}


/* =========================================================
    852PX
========================================================= */

@media (max-width: 852px) {

    /* =====================================================
       LARGEUR PAGE
    ====================================================== */

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        overflow-x: hidden !important;
    }

    .product-page.product-page-vending {
        width: 100% !important;

        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        overflow-x: hidden !important;
    }

    .product-page-vending > section {
        width: 100% !important;

        max-width: none !important;
    }

    .product-page-vending .container {
        width:
            calc(100% - 40px) !important;

        max-width: 1380px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* =====================================================
       HERO
    ====================================================== */

    .product-page-vending
    .product-page-hero-image {
        min-height: 500px !important;
    }

    .product-page-vending
    .product-page-hero-content {
        width: 100% !important;

        max-width: 720px !important;

        margin:
            0
            auto !important;

        transform:
            translateY(22px) !important;
    }

    .product-page-vending h1 {
        font-size:
            clamp(
                35px,
                5.8vw,
                45px
            ) !important;
    }


    /* =====================================================
       PREMIERE PARTIE
    ====================================================== */

    .product-page-vending .vending-intro {
        width: 100%;

        max-width: 760px;

        margin:
            0
            auto;
    }

    .product-page-vending .vending-showcase {
        position: relative;

        width:
            calc(100% - 36px);

        max-width: 720px;

        min-height: 370px;

        margin:
            0
            auto;

        overflow: visible;
    }


    .product-page-vending
    .vending-machine-wrap img {
        width:
            clamp(
                210px,
                34vw,
                285px
            );
    }


    /* =====================================================
       BULLES 
    ====================================================== */

    .product-page-vending
    .vending-callout-left {
        left: auto !important;

        right:
            calc(
                50% + 112px
            ) !important;
    }

    .product-page-vending
    .vending-callout-right {
        right: auto !important;

        left:
            calc(
                50% + 112px
            ) !important;

        top: 46%;
    }

    .product-page-vending
    .vending-callout-top {
        top: 22%;
    }

    .product-page-vending
    .vending-callout-bottom {
        top: 62%;
    }


    .product-page-vending
    .vending-callout {
        width: 155px;

        max-width: 155px;

        grid-template-columns:
            30px
            minmax(0, 1fr);

        gap:
            1px
            6px;
    }


    .product-page-vending
    .vending-callout > span {
        width: 30px;
        height: 30px;
    }

    .product-page-vending
    .vending-callout > span svg {
        width: 16px;
        height: 16px;
    }

    .product-page-vending
    .vending-callout strong {
        font-size: 9px;
    }

    .product-page-vending
    .vending-callout p {
        font-size: 7.5px;
    }


    /* =====================================================
       TRAITS + POINTS
    ====================================================== */

    .product-page-vending
    .vending-callout::before {
        width: 72px !important;
    }

    .product-page-vending
    .vending-callout-left::before {
        left:
            calc(100% + 5px) !important;
    }

    .product-page-vending
    .vending-callout-left::after {
        left:
            calc(
                100% + 5px + 69px
            ) !important;
    }

    .product-page-vending
    .vending-callout-right::before {
        right:
            calc(100% + 5px) !important;
    }

    .product-page-vending
    .vending-callout-right::after {
        right:
            calc(
                100% + 5px + 69px
            ) !important;
    }


    /* =====================================================
       DEUXIEME PARTIE
       TEXTE PUIS IMAGE
    ====================================================== */

    .product-page-vending
    .vending-solution {
        display: grid !important;

        grid-template-columns:
            1fr !important;

        gap: 24px !important;
    }

    .product-page-vending
    .vending-solution-content {
        order: 1 !important;

        width: 100%;

        max-width: 680px;

        margin:
            0
            auto;
    }

    .product-page-vending
    .vending-solution-visual {
        order: 2 !important;

        width: 100%;

        min-height: 330px;
    }

    .product-page-vending
    .vending-solution-visual img {
        width:
            min(
                100%,
                330px
            );

        max-height: 340px;
    }


    /* =====================================================
       TROISIEME PARTIE - MARGES
    ====================================================== */

    .product-page-vending
    .vending-custom-showcase {
        width:
            calc(100% - 64px) !important;

        max-width: 720px;

        margin:
            34px
            auto
            0 !important;
    }


    /* =====================================================
       BULLES 
    ====================================================== */

    .product-page-vending
    .vending-project-flow {
        width:
            calc(100% - 44px);

        max-width: 680px;

        margin:
            34px
            auto
            0;

        gap: 34px;

        padding:
            20px
            0;
    }


    .product-page-vending
    .vending-project-flow-line {
        width: 100px;
    }


    .product-page-vending
    .vending-project-flow article,
    .product-page-vending
    .vending-project-flow article + article {
        min-height: 140px;

        grid-template-columns:
            minmax(0, 1fr)
            80px
            minmax(0, 1fr) !important;
    }


    .product-page-vending
    .vending-project-flow article > div {
        width: 100%;

        max-width: 300px;

        min-height: 0;

        padding:
            22px
            24px;

        border-radius: 34px;
    }


    .product-page-vending
    .vending-project-flow article > div h3 {
        font-size: 21px;

        line-height: 1.1;
    }


    .product-page-vending
    .vending-project-flow article > div p {
        font-size: 13px;

        line-height: 1.5;
    }


    /* =====================================================
       DERNIERES CARDS
    ====================================================== */

    .product-page-vending
    .vending-support-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;
    }

    .product-page-vending
    .vending-support-grid article {
        min-width: 0;

        padding:
            22px
            12px;
    }

    .product-page-vending
    .vending-support-grid article > strong {
        font-size: 26px;
    }

    .product-page-vending
    .vending-support-grid h3 {
        font-size: 14px;
    }

    .product-page-vending
    .vending-support-grid p {
        font-size: 10px;

        line-height: 1.45;
    }

}


/* =========================================================
   700PX
========================================================= */

@media (max-width: 700px) {

    /* =====================================================
       PREMIERE PARTIE
    ====================================================== */

    .product-page-vending
    .vending-showcase {
        width:
            calc(100% - 24px);

        min-height: 330px;
    }


    .product-page-vending
    .vending-machine-wrap img {
        width:
            clamp(
                190px,
                35vw,
                240px
            );
    }


    .product-page-vending
    .vending-callout-left {
        right:
            calc(
                50% + 95px
            ) !important;
    }

    .product-page-vending
    .vending-callout-right {
        left:
            calc(
                50% + 95px
            ) !important;
    }


    .product-page-vending
    .vending-callout {
        width: 130px;

        max-width: 130px;

        grid-template-columns:
            26px
            minmax(0, 1fr);

        gap:
            1px
            5px;
    }

    .product-page-vending
    .vending-callout > span {
        width: 26px;
        height: 26px;
    }

    .product-page-vending
    .vending-callout strong {
        font-size: 8px;
    }

    .product-page-vending
    .vending-callout p {
        font-size: 6.5px;
    }


    .product-page-vending
    .vending-callout::before {
        width: 56px !important;
    }

    .product-page-vending
    .vending-callout-left::after {
        left:
            calc(
                100% + 4px + 53px
            ) !important;
    }

    .product-page-vending
    .vending-callout-right::after {
        right:
            calc(
                100% + 4px + 53px
            ) !important;
    }

    .product-page-vending
    .vending-callout-left::before {
        left:
            calc(100% + 4px) !important;
    }

    .product-page-vending
    .vending-callout-right::before {
        right:
            calc(100% + 4px) !important;
    }


    /* =====================================================
       BULLES 
    ====================================================== */

    .product-page-vending
    .vending-project-flow {
        width:
            calc(100% - 40px);

        max-width: 600px;

        gap: 24px;

        padding:
            14px
            0;
    }


    .product-page-vending
    .vending-project-flow-line {
        width: 76px;
    }


    .product-page-vending
    .vending-project-flow article,
    .product-page-vending
    .vending-project-flow article + article {
        min-height: 115px;

        grid-template-columns:
            minmax(0, 1fr)
            62px
            minmax(0, 1fr) !important;
    }


    .product-page-vending
    .vending-project-flow article > div {
        max-width: 245px;

        padding:
            16px
            18px;

        border-radius: 28px;
    }


    .product-page-vending
    .vending-project-flow article > div h3 {
        font-size: 17px;
    }


    .product-page-vending
    .vending-project-flow article > div p {
        font-size: 11px;
    }


    .product-page-vending
    .vending-project-flow article::before {
        width: 11px;
        height: 11px;
    }

}


/* =========================================================
   632PX
   
========================================================= */

@media (max-width: 632px) {

    .product-page-vending
    .button,
    .product-page-vending
    .button-main,
    .product-page-vending
    .vending-intro-link,
    .product-page-vending
    .vending-partner-link,
    .product-page-vending
    .vending-final-action a {
        min-height: 38px !important;

        padding:
            0
            13px !important;

        font-size: 9.5px !important;
    }

}


/* =========================================================
   550PX
========================================================= */

@media (max-width: 550px) {

    /* =====================================================
       PREMIERE PARTIE
       MOINS HAUTE
    ====================================================== */

    .product-page-vending
    .vending-showcase {
        min-height: 270px !important;
    }


    .product-page-vending
    .vending-intro {
        gap: 10px;
    }


    .product-page-vending
    .vending-intro > .vending-intro-link {
        margin-top: 0 !important;
    }


    /* réduit l'espace sous la première partie */

    .product-page-vending
    .vending-intro-section {
        padding-bottom:
            40px !important;
    }


    /* réduit l'espace avant la deuxième partie */

    .product-page-vending
    .vending-solution-section {
        padding-top:
            46px !important;
    }


    /* =====================================================
       PREMIERE PARTIE
       BULLES PLUS PETITES
    ====================================================== */

    .product-page-vending
    .vending-machine-wrap img {
        width:
            clamp(
                155px,
                37vw,
                195px
            );
    }


    .product-page-vending
    .vending-callout-left {
        right:
            calc(
                50% + 75px
            ) !important;
    }


    .product-page-vending
    .vending-callout-right {
        left:
            calc(
                50% + 75px
            ) !important;
    }


    .product-page-vending
    .vending-callout {
        width: 102px;

        max-width: 102px;

        grid-template-columns:
            22px
            minmax(0, 1fr);

        column-gap: 4px;
    }


    .product-page-vending
    .vending-callout > span {
        width: 22px;
        height: 22px;
    }


    .product-page-vending
    .vending-callout > span svg {
        width: 12px;
        height: 12px;
    }


    .product-page-vending
    .vending-callout strong {
        font-size: 6.8px;
    }


    .product-page-vending
    .vending-callout p {
        font-size: 5.5px;
    }


    .product-page-vending
    .vending-callout::before {
        width: 42px !important;
    }


    .product-page-vending
    .vending-callout-left::after {
        left:
            calc(
                100% + 3px + 39px
            ) !important;
    }


    .product-page-vending
    .vending-callout-right::after {
        right:
            calc(
                100% + 3px + 39px
            ) !important;
    }


    .product-page-vending
    .vending-callout-left::before {
        left:
            calc(100% + 3px) !important;
    }


    .product-page-vending
    .vending-callout-right::before {
        right:
            calc(100% + 3px) !important;
    }


    /* =====================================================
       BULLES 
    ====================================================== */

    .product-page-vending
    .vending-project-flow {
        width:
            calc(100% - 32px);

        margin:
            26px
            auto
            0;

        gap: 12px;
    }


    .product-page-vending
    .vending-project-flow-line {
        display: none !important;
    }


    .product-page-vending
    .vending-project-flow article,
    .product-page-vending
    .vending-project-flow article + article {
        min-height: 0;

        display: grid !important;

        grid-template-columns:
            42px
            minmax(0, 1fr) !important;

        gap: 12px;

        align-items: center;

        padding:
            8px
            0;
    }


    .product-page-vending
    .vending-project-flow article::before,
    .product-page-vending
    .vending-project-flow article::after {
        display: none !important;
    }


    .product-page-vending
    .vending-project-flow article strong,
    .product-page-vending
    .vending-project-flow article:nth-child(odd) strong,
    .product-page-vending
    .vending-project-flow article:nth-child(even) strong {
        position: static !important;

        grid-column: 1 / 2;
        grid-row: 1;

        width: 42px;
        height: 42px;

        justify-self: center;

        font-size: 14px;

        transform: none !important;
    }


    .product-page-vending
    .vending-project-flow article > div,
    .product-page-vending
    .vending-project-flow article:nth-child(odd) > div,
    .product-page-vending
    .vending-project-flow article:nth-child(even) > div {
        grid-column: 2 / 3;
        grid-row: 1;

        width: 100%;

        max-width: none;

        min-height: 0;

        margin:
            0 !important;

        padding:
            16px
            18px;

        border-radius: 22px;
    }


    .product-page-vending
    .vending-project-flow article > div h3 {
        font-size: 16px;
    }


    .product-page-vending
    .vending-project-flow article > div p {
        font-size: 10.5px;

        line-height: 1.45;
    }

}


/* =========================================================
   425PX
========================================================= */

@media (max-width: 425px) {

    /* =====================================================
       CONTENEURS
    ====================================================== */

    .product-page-vending .container {
        width:
            calc(100% - 28px) !important;
    }


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

    body:has(.product-page-vending)
    .header
    .container {
        width:
            calc(100% - 24px);
    }


    body:has(.product-page-vending)
    .logo img {
        height: 46px;
    }


    /* =====================================================
       HERO
    ====================================================== */

    .product-page-vending
    .product-page-hero-image {
        min-height: 420px !important;
    }


    .product-page-vending h1 {
        font-size: 28px !important;
    }


    /* =====================================================
       PREMIERE PARTIE
    ====================================================== */

    .product-page-vending
    .vending-showcase {
        width:
            calc(100% - 10px);

        min-height: 245px !important;
    }


    .product-page-vending
    .vending-machine-wrap img {
        width:
            clamp(
                135px,
                40vw,
                165px
            );
    }


    .product-page-vending
    .vending-callout-left {
        right:
            calc(
                50% + 65px
            ) !important;
    }


    .product-page-vending
    .vending-callout-right {
        left:
            calc(
                50% + 65px
            ) !important;
    }


    .product-page-vending
    .vending-callout {
        width: 82px;

        max-width: 82px;

        grid-template-columns:
            18px
            minmax(0, 1fr);

        column-gap: 3px;
    }


    .product-page-vending
    .vending-callout > span {
        width: 18px;
        height: 18px;
    }


    .product-page-vending
    .vending-callout > span svg {
        width: 10px;
        height: 10px;
    }


    .product-page-vending
    .vending-callout strong {
        font-size: 5.8px;
    }


    .product-page-vending
    .vending-callout p {
        font-size: 4.8px;
    }


    .product-page-vending
    .vending-callout::before {
        width: 34px !important;
    }


    .product-page-vending
    .vending-callout-left::after {
        left:
            calc(
                100% + 2px + 31px
            ) !important;
    }


    .product-page-vending
    .vending-callout-right::after {
        right:
            calc(
                100% + 2px + 31px
            ) !important;
    }


    .product-page-vending
    .vending-callout-left::before {
        left:
            calc(100% + 2px) !important;
    }


    .product-page-vending
    .vending-callout-right::before {
        right:
            calc(100% + 2px) !important;
    }


    /* =====================================================
       DEUXIEME PARTIE
       TEXTE PUIS IMAGE
    ====================================================== */

    .product-page-vending
    .vending-solution {
        grid-template-columns:
            1fr !important;

        gap: 18px !important;
    }


    .product-page-vending
    .vending-solution-content {
        order: 1 !important;
    }


    .product-page-vending
    .vending-solution-visual {
        order: 2 !important;

        min-height: 250px;
    }


    .product-page-vending
    .vending-solution-visual img {
        width:
            min(
                100%,
                230px
            );
    }


    /* =====================================================
       TROISIEME PARTIE
       MARGES
    ====================================================== */

    .product-page-vending
    .vending-custom-showcase {
        width:
            calc(100% - 30px) !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* =====================================================
       DERNIERES CARDS
       UNE APRES L'AUTRE
    ====================================================== */

    .product-page-vending
    .vending-support-grid {
        grid-template-columns:
            1fr !important;
    }


    .product-page-vending
    .vending-support-grid article {
        padding:
            22px
            0;

        border-right:
            0 !important;

        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.1);
    }


    .product-page-vending
    .vending-support-grid article:last-child {
        border-bottom: 0;
    }


    /* VALEURS */

    .product-page-vending
    .vending-value-grid {
        grid-template-columns:
            1fr !important;
    }

}


/* =========================================================
   PAGE DISTRIBUTEUR - POINTS DU DISTRIBUTEUR FIXES
========================================================= */

@media (max-width: 865px) {

    .product-page-vending .vending-support-grid {
        grid-template-columns:
            1fr !important;
    }

    .product-page-vending .vending-support-grid article {
        padding:
            26px
            0 !important;

        border-right:
            0 !important;

        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.1);
    }

    .product-page-vending .vending-support-grid article:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 692px) {

    .product-page-vending .vending-value-grid {
        grid-template-columns:
            1fr !important;

        width:
            calc(100% - 30px);

        max-width: 360px;

        margin-left: auto;
        margin-right: auto;

        gap: 12px;
    }

    .product-page-vending .vending-value-grid article {
        min-height: 0 !important;

        padding:
            22px
            18px !important;
    }

    .product-page-vending .vending-value-icon {
        width: 52px;
        height: 52px;
    }

    .product-page-vending .vending-value-icon svg {
        width: 20px;
        height: 20px;
    }

    .product-page-vending .vending-value-grid h3 {
        margin-top: 18px;

        font-size: 15px;
    }

    .product-page-vending .vending-value-grid p {
        margin-top: 10px;

        font-size: 10px;
        line-height: 1.45;
    }
}

.product-page-vending .vending-callout {
    --vending-line-gap: 16px;
    --vending-line-width: 126px;
}

.product-page-vending .vending-callout-top {
    --vending-dot-offset: 108px;
}

.product-page-vending .vending-callout-bottom {
    --vending-dot-offset: 76px;
}

.product-page-vending .vending-callout-right {
    --vending-dot-offset: 116px;
}

.product-page-vending .vending-callout-left {
    left: auto !important;

    right:
        calc(
            50% + var(--vending-dot-offset) + var(--vending-line-gap) + var(--vending-line-width)
        ) !important;
}

.product-page-vending .vending-callout-right {
    right: auto !important;

    left:
        calc(
            50% + var(--vending-dot-offset) + var(--vending-line-gap) + var(--vending-line-width)
        ) !important;
}

.product-page-vending .vending-callout::before {
    width:
        var(--vending-line-width) !important;
}

.product-page-vending .vending-callout-left::before {
    left:
        calc(100% + var(--vending-line-gap)) !important;
}

.product-page-vending .vending-callout-left::after {
    left:
        calc(100% + var(--vending-line-gap) + var(--vending-line-width)) !important;
}

.product-page-vending .vending-callout-right::before {
    right:
        calc(100% + var(--vending-line-gap)) !important;
}

.product-page-vending .vending-callout-right::after {
    right:
        calc(100% + var(--vending-line-gap) + var(--vending-line-width)) !important;
}

@media (min-width: 853px) and (max-width: 1100px) {

    .product-page-vending .vending-showcase {
        width:
            calc(100% - 72px) !important;
    }

    .product-page-vending .vending-callout {
        --vending-line-gap: 8px;
        --vending-line-width: 105px;
    }

    .product-page-vending .vending-callout-top {
        --vending-dot-offset: 86px;
    }

    .product-page-vending .vending-callout-bottom {
        --vending-dot-offset: 62px;
    }

    .product-page-vending .vending-callout-right {
        --vending-dot-offset: 96px;
    }
}

@media (max-width: 852px) {

    .product-page-vending .vending-callout {
        --vending-line-gap: 5px;
        --vending-line-width: 72px;
    }

    .product-page-vending .vending-callout-top {
        --vending-dot-offset: 60px;
    }

    .product-page-vending .vending-callout-bottom {
        --vending-dot-offset: 44px;
    }

    .product-page-vending .vending-callout-right {
        --vending-dot-offset: 70px;
    }
}

@media (max-width: 700px) {

    .product-page-vending .vending-callout {
        --vending-line-gap: 4px;
        --vending-line-width: 56px;
    }

    .product-page-vending .vending-callout-top {
        --vending-dot-offset: 50px;
    }

    .product-page-vending .vending-callout-bottom {
        --vending-dot-offset: 36px;
    }

    .product-page-vending .vending-callout-right {
        --vending-dot-offset: 56px;
    }
}

@media (max-width: 580px) {

    .product-page-vending .vending-machine-wrap img {
        width:
            clamp(
                205px,
                42vw,
                235px
            ) !important;
    }

    .product-page-vending .vending-callout {
        --vending-line-width: 48px;
    }

    .product-page-vending .vending-callout-top {
        --vending-dot-offset: 54px;
    }

    .product-page-vending .vending-callout-bottom {
        --vending-dot-offset: 40px;
    }

    .product-page-vending .vending-callout-right {
        --vending-dot-offset: 62px;
    }
}

@media (max-width: 550px) {

    .product-page-vending .vending-callout {
        --vending-line-gap: 3px;
        --vending-line-width: 42px;
    }

    .product-page-vending .vending-callout-top {
        --vending-dot-offset: 40px;
    }

    .product-page-vending .vending-callout-bottom {
        --vending-dot-offset: 28px;
    }

    .product-page-vending .vending-callout-right {
        --vending-dot-offset: 46px;
    }
}

@media (max-width: 425px) {

    .product-page-vending .vending-machine-wrap img {
        width:
            clamp(
                170px,
                43vw,
                205px
            ) !important;
    }

    .product-page-vending .vending-callout {
        --vending-line-gap: 2px;
        --vending-line-width: 38px;
    }

    .product-page-vending .vending-callout-top {
        --vending-dot-offset: 42px;
    }

    .product-page-vending .vending-callout-bottom {
        --vending-dot-offset: 32px;
    }

    .product-page-vending .vending-callout-right {
        --vending-dot-offset: 48px;
    }
}


@media (max-width: 343px) {

    .product-page-vending .vending-callout {
        --vending-line-gap: 2px;
        --vending-line-width: 28px;

        width: 78px;
        max-width: 78px;
    }

    .product-page-vending .vending-callout-top {
        --vending-dot-offset: 30px;
    }

    .product-page-vending .vending-callout-bottom {
        --vending-dot-offset: 24px;
    }

    .product-page-vending .vending-callout-right {
        --vending-dot-offset: 34px;
    }
}

/* =========================================================
   PAGE MACHINE A CAFE - RESPONSIVE
========================================================= */

.product-page-coffee {
    min-width: 0;
    overflow-x: hidden;
    padding-top: 0;
}

.product-page-coffee *,
.product-page-coffee *::before,
.product-page-coffee *::after {
    box-sizing: border-box;
}

.product-page-coffee img,
.product-page-coffee svg {
    max-width: 100%;
}

@media (max-width: 1024px) {

    body:has(.product-page-coffee) .header-actions {
        display: none !important;
    }

    body:has(.product-page-coffee) .menu-button {
        position: relative;
        z-index: 1002;

        width: 44px;
        height: 44px;

        margin-left: auto;

        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    body:has(.product-page-coffee) .nav {
        position: fixed;
        z-index: 1001;
        inset: 0;

        width: 100%;
        height: 100dvh;

        margin: 0;
        padding:
            90px
            40px
            40px;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 20px;

        background:
            linear-gradient(
                145deg,
                var(--black),
                var(--blue-dark)
            );

        transform:
            translateX(100%);

        transition:
            transform 0.35s ease;
    }

    body:has(.product-page-coffee) .nav.open {
        transform:
            translateX(0);
    }

    body:has(.product-page-coffee) .nav > a,
    body:has(.product-page-coffee) .nav-link {
        width: 100%;

        font-size: 26px;
        line-height: 1.15;
    }

    body:has(.product-page-coffee) .nav-item {
        width: 100%;
    }

    body:has(.product-page-coffee) .nav-dropdown {
        position: static;

        width: 100%;

        padding:
            8px
            0
            0
            18px;

        border: 0;

        background: transparent;
        box-shadow: none;
    }

    .product-page-coffee .container {
        width:
            calc(100% - 56px);
    }

    .product-page-coffee .product-page-hero-image {
        min-height: 520px;
    }

    .product-page-coffee .product-page-hero-content {
        transform:
            translateY(18px);
    }

    .product-page-coffee h1 {
        font-size:
            clamp(40px, 6vw, 62px);
    }

    .product-page-coffee .coffee-franke-showcase {
        min-height:
            clamp(520px, 60vw, 700px);
    }

    .product-page-coffee .coffee-franke-showcase-machine {
        width:
            min(32vw, 340px);
    }

    .product-page-coffee .coffee-franke-machine-item--center .coffee-franke-showcase-machine {
        width:
            min(42vw, 470px);
    }

    .product-page-coffee .coffee-craft {
        grid-template-columns:
            1fr;

        gap: 46px;
    }

    .product-page-coffee .coffee-craft-content {
        max-width: 720px;
    }

    .product-page-coffee .coffee-craft-visual {
        min-height:
            clamp(430px, 58vw, 620px);
    }

    .product-page-coffee .coffee-contact-process-section .vending-value-heading {
        grid-template-columns:
            1fr;

        gap: 18px;
    }

    .product-page-coffee .coffee-contact-process-section .vending-value-heading p {
        max-width: 720px;

        margin-top: 0;
    }
}

@media (max-width: 820px) {

    .product-page-coffee .coffee-intro-section,
    .product-page-coffee .coffee-craft-section,
    .product-page-coffee .coffee-process-section {
        padding-top: 70px;
        padding-bottom: 72px;
    }

    .product-page-coffee .coffee-intro {
        max-width: 680px;
    }

    .product-page-coffee .coffee-intro h2,
    .product-page-coffee .coffee-craft h2,
    .product-page-coffee .coffee-contact-process-section .vending-value-heading h2 {
        font-size:
            clamp(30px, 6vw, 44px);
    }

    .product-page-coffee .coffee-franke-image-section {
        padding-bottom: 82px;
    }

    .product-page-coffee .coffee-franke-showcase {
        min-height: 520px;
    }

    .product-page-coffee .coffee-franke-showcase-top {
        width:
            calc(100% - 32px);

        gap: 22px;
    }

    .product-page-coffee .coffee-franke-showcase-top img {
        width:
            clamp(130px, 20vw, 180px);
    }

    .product-page-coffee .coffee-franke-showcase-word {
        font-size:
            clamp(72px, 20vw, 150px);
    }

    .product-page-coffee .coffee-franke-machines {
        width:
            calc(100% - 22px);

        bottom: 70px;
    }

    .product-page-coffee .coffee-franke-machine-item--left {
        margin-right: -64px;
    }

    .product-page-coffee .coffee-franke-machine-item--right {
        margin-left: -64px;
    }

    .product-page-coffee .coffee-franke-machine-item--left,
    .product-page-coffee .coffee-franke-machine-item--right {
        transform:
            translateY(22px)
            scale(0.86);
    }

    .product-page-coffee .coffee-feature-flow {
        width:
            calc(100% - 32px);

        max-width: 640px;

        margin:
            34px
            auto
            0;
    }

    .product-page-coffee .coffee-contact-grid {
        grid-template-columns:
            1fr !important;

        width:
            calc(100% - 24px);

        max-width: 560px;

        margin-left: auto;
        margin-right: auto;
    }

    .product-page-coffee .coffee-contact-grid article {
        min-height: 0;

        padding:
            28px
            24px;
    }
}

@media (max-width: 620px) {

    .product-page-coffee .container {
        width:
            calc(100% - 32px);
    }

    .product-page-coffee .product-page-hero-image {
        min-height: 440px;
    }

    .product-page-coffee .product-page-hero-content {
        text-align: left;

        transform:
            translateY(14px);
    }

    .product-page-coffee h1 {
        margin: 0;

        font-size: 34px;
    }

    .product-page-coffee .product-page-actions {
        justify-content: flex-start;

        margin-top: 24px;
    }

    .product-page-coffee .coffee-intro-label,
    .product-page-coffee .coffee-craft-label {
        gap: 10px;
        /*font-size: 10px;*/
        letter-spacing: 0.14em;
    }

    .product-page-coffee .coffee-intro-label::before,
    .product-page-coffee .coffee-intro-label::after,
    .product-page-coffee .coffee-craft-label::after {
        width: 32px;
    }

    .product-page-coffee .coffee-intro h2 {
        font-size: 30px;
    }

    .product-page-coffee .coffee-intro p,
    .product-page-coffee .coffee-craft p {
        font-size: 14px;
        line-height: 1.6;
    }

    .product-page-coffee .coffee-intro-list {
        justify-content: flex-start;

        gap: 8px;

        font-size: 10px;
        letter-spacing: 0.12em;
    }

    .product-page-coffee .coffee-intro-list span,
    .product-page-coffee .coffee-intro-list span:first-child {
        padding:
            0
            12px;
    }

    .product-page-coffee .coffee-intro-list span + span::before {
        display: none;
    }

    .product-page-coffee .coffee-franke-image-section::after {
        display: none;
    }

    .product-page-coffee .coffee-franke-showcase {
        min-height: 460px;
    }

    .product-page-coffee .coffee-franke-showcase-top {
        top: 8px;
    }

    .product-page-coffee .coffee-franke-showcase-word {
        top: 54px;

        font-size: 76px;
    }

    .product-page-coffee .coffee-franke-machines {
        bottom: 54px;

        gap: 0;
    }

    .product-page-coffee .coffee-franke-showcase-machine {
        width: 135px;
    }

    .product-page-coffee .coffee-franke-machine-item--center .coffee-franke-showcase-machine {
        width: 190px;
    }

    .product-page-coffee .coffee-franke-machine-item--left {
        margin-right: -56px;
    }

    .product-page-coffee .coffee-franke-machine-item--right {
        margin-left: -56px;
    }

    .product-page-coffee .coffee-franke-machine-item span {
        font-size: 14px;
    }

    .product-page-coffee .coffee-craft {
        gap: 30px;
    }

    .product-page-coffee .coffee-craft-visual {
        min-height: 360px;
    }

    .product-page-coffee .coffee-craft-image--main {
        width: 70%;
        height: 74%;
    }

    .product-page-coffee .coffee-craft-image--small {
        right: 0;

        width: 48%;
        height: 48%;
    }

    .product-page-coffee .coffee-craft-swiss strong {
        font-size: 58px;
    }

    .product-page-coffee .coffee-feature-flow {
        width:
            calc(100% - 20px);

        gap: 12px;
    }

    .product-page-coffee .coffee-feature-flow .vending-project-flow-line,
    .product-page-coffee .coffee-feature-flow article::before,
    .product-page-coffee .coffee-feature-flow article::after {
        display: none !important;
    }

    .product-page-coffee .coffee-feature-flow article,
    .product-page-coffee .coffee-feature-flow article + article {
        min-height: 0;

        display: grid !important;
        grid-template-columns:
            42px
            minmax(0, 1fr) !important;

        gap: 12px;

        align-items: center;

        padding:
            8px
            0;
    }

    .product-page-coffee .coffee-feature-flow article strong,
    .product-page-coffee .coffee-feature-flow article:nth-child(odd) strong,
    .product-page-coffee .coffee-feature-flow article:nth-child(even) strong {
        position: static !important;

        grid-column: 1 / 2;
        grid-row: 1;

        width: 42px;
        height: 42px;

        justify-self: center;

        font-size: 14px;

        transform: none !important;
    }

    .product-page-coffee .coffee-feature-flow article > div,
    .product-page-coffee .coffee-feature-flow article:nth-child(odd) > div,
    .product-page-coffee .coffee-feature-flow article:nth-child(even) > div {
        grid-column: 2 / 3;
        grid-row: 1;

        width: 100%;
        max-width: none;
        min-height: 0;

        margin:
            0 !important;

        padding:
            16px
            18px;

        border-radius: 22px;
    }

    .product-page-coffee .coffee-feature-flow h3 {
        font-size: 16px;
    }

    .product-page-coffee .coffee-feature-flow p {
        font-size: 10.5px;
        line-height: 1.45;
    }

    .product-page-coffee .coffee-process-number {
        width: 52px;
        height: 52px;

        font-size: 18px;
    }
}

/* PAGE BOULANGERIE - PARTENAIRES FONDS ALTERNES */
.product-page-bakery .partners-intro-section,
.product-page-bakery .partner-feature-division,
.product-page-bakery .partner-feature-cooking {
    background: var(--black);
}

.product-page-bakery .partner-feature-preparation,
.product-page-bakery .partner-feature-section-alt,
.product-page-bakery .partner-feature-pastocuiseurs,
.product-page-bakery .other-partners-section {
    background: var(--dark);
}


/* =========================================================
   PAGE SUR MESURE - RESPONSIVE
========================================================= */

.product-page-custom {
    min-width: 0;
    overflow-x: hidden;
    padding-top: 0;
}

.product-page-custom *,
.product-page-custom *::before,
.product-page-custom *::after {
    box-sizing: border-box;
}

.product-page-custom img,
.product-page-custom svg {
    max-width: 100%;
}

@media (max-width: 1024px) {

    body:has(.product-page-custom) .header-actions {
        display: none !important;
    }

    body:has(.product-page-custom) .menu-button {
        position: relative;
        z-index: 1002;

        width: 44px;
        height: 44px;

        margin-left: auto;

        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    body:has(.product-page-custom) .nav {
        position: fixed;
        z-index: 1001;
        inset: 0;

        width: 100%;
        height: 100dvh;

        margin: 0;
        padding:
            90px
            40px
            40px;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 20px;

        background:
            linear-gradient(
                145deg,
                var(--black),
                var(--blue-dark)
            );

        transform:
            translateX(100%);

        transition:
            transform 0.35s ease;
    }

    body:has(.product-page-custom) .nav.open {
        transform:
            translateX(0);
    }

    body:has(.product-page-custom) .nav > a,
    body:has(.product-page-custom) .nav-link {
        width: 100%;

        font-size: 26px;
        line-height: 1.15;
    }

    body:has(.product-page-custom) .nav-item {
        width: 100%;
    }

    body:has(.product-page-custom) .nav-dropdown {
        position: static;

        width: 100%;

        padding:
            8px
            0
            0
            18px;

        border: 0;

        background: transparent;
        box-shadow: none;
    }

    .product-page-custom .container {
        width:
            calc(100% - 56px);
    }

    .product-page-custom .product-page-hero-image {
        min-height: 520px;
    }

    .product-page-custom .product-page-hero-bg {
        background-position:
            center 70% !important;
    }

    .product-page-custom .product-page-hero-content {
        max-width: 880px;

        transform:
            translateY(22px);
    }

    .product-page-custom h1 {
        font-size:
            clamp(38px, 6vw, 58px);
    }

    .product-page-custom .custom-universe,
    .product-page-custom .custom-visual,
    .product-page-custom .custom-financing {
        grid-template-columns:
            1fr;

        gap: 42px;
    }

    .product-page-custom .custom-visual-content {
        order: 1;
    }

    .product-page-custom .custom-visual-media {
        order: 2;
    }

    .product-page-custom .custom-universe-copy {
        min-height: 0;
    }

    .product-page-custom .custom-universe h2,
    .product-page-custom .custom-universe p,
    .product-page-custom .custom-visual-content,
    .product-page-custom .custom-financing-content {
        max-width: 720px;
    }

    .product-page-custom .custom-universe-gallery {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .product-page-custom .custom-universe-image {
        min-height:
            clamp(320px, 44vw, 440px);
    }

    .product-page-custom .custom-visual-media {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .product-page-custom .custom-visual-image img {
        height:
            clamp(220px, 28vw, 300px);
    }

    .product-page-custom .custom-partners-grid {
        gap: 36px;
    }

    .product-page-custom .custom-partner {
        padding:
            24px
            0;
    }

    .product-page-custom .custom-financing-button {
        justify-self: start;
    }

    .product-page-custom .custom-realisations-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1.45fr)
            minmax(0, 1fr);

        gap: 12px;
    }

    .product-page-custom .custom-realisation,
    .product-page-custom .custom-realisation:nth-child(3) {
        grid-column: auto;
        grid-row: auto;

        height: 390px;
        min-height: 0;
    }
}

@media (max-width: 820px) {

    .product-page-custom .product-page-hero-image {
        min-height: 460px;
    }

    .product-page-custom .custom-universe-section,
    .product-page-custom .custom-visual-section,
    .product-page-custom .custom-partners-section,
    .product-page-custom .custom-financing-section,
    .product-page-custom .custom-realisations-section {
        padding-top: 62px !important;
        padding-bottom: 66px !important;
    }

    .product-page-custom .custom-universe h2,
    .product-page-custom .custom-visual-content h2,
    .product-page-custom .custom-partners-heading h2,
    .product-page-custom .custom-financing-content h2,
    .product-page-custom .custom-realisations-heading h2 {
        font-size:
            clamp(30px, 6vw, 44px);

        line-height: 1.08;
    }

    .product-page-custom .custom-universe p,
    .product-page-custom .custom-visual-content p,
    .product-page-custom .custom-partner-text p,
    .product-page-custom .custom-financing-content p {
        font-size: 14px;
        line-height: 1.62;
    }

    .product-page-custom .custom-partners-grid {
        grid-template-columns:
            1fr;

        max-width: 680px;

        margin:
            0
            auto;
    }

    .product-page-custom .custom-partners-heading {
        margin-bottom: 28px;
    }

    .product-page-custom .custom-realisations-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1.4fr)
            minmax(0, 1fr);

        gap: 10px;
    }

    .product-page-custom .custom-realisation,
    .product-page-custom .custom-realisation:nth-child(3) {
        height: 330px;
    }
}

@media (max-width: 620px) {

    .product-page-custom .container {
        width:
            calc(100% - 32px);
    }

    .product-page-custom .product-page-hero-image {
        min-height: 400px;
    }

    .product-page-custom .product-page-hero-content {
        max-width: 360px;

        text-align: center;

        transform:
            translateY(12px);
    }

    .product-page-custom h1 {
        font-size: 30px;
        line-height: 1.08;
    }

    .product-page-custom .product-page-actions {
        justify-content: center;

        margin-top: 22px;
    }

    .product-page-custom .custom-universe-section,
    .product-page-custom .custom-visual-section,
    .product-page-custom .custom-partners-section,
    .product-page-custom .custom-financing-section,
    .product-page-custom .custom-realisations-section {
        padding-top: 48px !important;
        padding-bottom: 52px !important;
    }

    .product-page-custom .custom-universe,
    .product-page-custom .custom-visual,
    .product-page-custom .custom-financing {
        gap: 28px;
    }

    .product-page-custom .custom-universe-gallery,
    .product-page-custom .custom-visual-media,
    .product-page-custom .custom-realisations-grid {
        grid-template-columns:
            1fr;
    }

    .product-page-custom .custom-realisations-grid {
        gap: 18px;
    }

    .product-page-custom .custom-universe-image {
        min-height: 250px;
    }

    .product-page-custom .custom-visual-image img,
    .product-page-custom .custom-realisation,
    .product-page-custom .custom-realisation:nth-child(3) {
        min-height: 0;
        height: 320px;
        aspect-ratio: auto;
    }

    .product-page-custom .custom-realisation,
    .product-page-custom .custom-realisation:nth-child(3) {
        height: 300px;
    }

    .product-page-custom .custom-partner-logo {
        min-height: 86px;
    }

    .product-page-custom .custom-partner-logo img {
        max-width: 180px;
        max-height: 76px;
    }

    .product-page-custom .custom-partner-text h3 {
        font-size: 21px;
    }

    .product-page-custom .custom-financing-button {
        justify-self: center;
    }

    .product-page-custom .custom-financing {
        text-align: center;
    }
}

@media (max-width: 425px) {

    .product-page-custom .container {
        width:
            calc(100% - 26px);
    }

    .product-page-custom .product-page-hero-image {
        min-height: 350px;
    }

    .product-page-custom .product-page-hero-content {
        max-width: 300px;

        transform:
            translateY(8px);
    }

    .product-page-custom h1 {
        font-size: 24px;
    }

    .product-page-custom .button-main {
        min-height: 36px;

        padding:
            0
            15px;

        font-size: 9px;
    }

    .product-page-custom .custom-universe-section,
    .product-page-custom .custom-visual-section,
    .product-page-custom .custom-partners-section,
    .product-page-custom .custom-financing-section,
    .product-page-custom .custom-realisations-section {
        padding-top: 38px !important;
        padding-bottom: 42px !important;
    }

    .product-page-custom .custom-universe h2,
    .product-page-custom .custom-visual-content h2,
    .product-page-custom .custom-partners-heading h2,
    .product-page-custom .custom-financing-content h2,
    .product-page-custom .custom-realisations-heading h2 {
        font-size: 24px;
    }

    .product-page-custom .custom-universe h2::after {
        width: 44px;

        margin-top: 14px;
    }

    .product-page-custom .custom-universe p,
    .product-page-custom .custom-visual-content p,
    .product-page-custom .custom-partner-text p,
    .product-page-custom .custom-financing-content p {
        font-size: 12.5px;
        line-height: 1.55;
    }

    .product-page-custom .custom-universe-image,
    .product-page-custom .custom-visual-image img,
    .product-page-custom .custom-realisation,
    .product-page-custom .custom-realisation:nth-child(3) {
        height: 270px;
    }

    .product-page-custom .custom-realisation,
    .product-page-custom .custom-realisation:nth-child(3) {
        height: 260px;
    }

    .product-page-custom .custom-partner {
        padding:
            18px
            0;
    }

    .product-page-custom .custom-partner-logo img {
        max-width: 150px;
    }

    .product-page-custom .custom-partner-text h3 {
        font-size: 18px;
    }

    .product-page-custom .custom-realisations-heading {
        margin-bottom: 24px;
    }
}

@media (max-width: 425px) {

    .product-page-coffee .container {
        width:
            calc(100% - 26px);
    }

    .product-page-coffee .product-page-hero-image {
        min-height: 400px;
    }

    .product-page-coffee h1 {
        font-size: 29px;
    }

    .product-page-coffee .button-main {
        min-height: 38px;

        padding:
            0
            16px;

        font-size: 10px;
    }

    .product-page-coffee .coffee-intro-section,
    .product-page-coffee .coffee-craft-section,
    .product-page-coffee .coffee-process-section {
        padding-top: 54px;
        padding-bottom: 58px;
    }

    .product-page-coffee .coffee-intro h2,
    .product-page-coffee .coffee-craft h2,
    .product-page-coffee .coffee-contact-process-section .vending-value-heading h2 {
        font-size: 25px;
    }

    .product-page-coffee .coffee-franke-showcase {
        min-height: 390px;
    }

    .product-page-coffee .coffee-franke-showcase-top img {
        width: 112px;
    }

    .product-page-coffee .coffee-franke-showcase-word {
        top: 52px;

        font-size: 58px;
    }

    .product-page-coffee .coffee-franke-showcase-machine {
        width: 105px;
    }

    .product-page-coffee .coffee-franke-machine-item--center .coffee-franke-showcase-machine {
        width: 150px;
    }

    .product-page-coffee .coffee-franke-machine-item--left {
        margin-right: -44px;
    }

    .product-page-coffee .coffee-franke-machine-item--right {
        margin-left: -44px;
    }

    .product-page-coffee .coffee-franke-machine-item--left,
    .product-page-coffee .coffee-franke-machine-item--right {
        transform:
            translateY(18px)
            scale(0.84);
    }

    .product-page-coffee .coffee-craft-visual {
        min-height: 300px;
    }

    .product-page-coffee .coffee-craft-swiss strong {
        font-size: 42px;
    }

    .product-page-coffee .coffee-contact-grid {
        width:
            calc(100% - 16px);
    }

    .product-page-coffee .coffee-contact-grid article {
        padding:
            22px
            18px;
    }

    .product-page-coffee .coffee-contact-grid h3 {
        font-size: 16px;
    }

    .product-page-coffee .coffee-contact-grid p {
        font-size: 10.5px;
        line-height: 1.45;
    }
}


/* =========================================================
   PAGE MACHINE A CAFE - BLOC FRANKE FIXE
========================================================= */

@media (min-width: 1025px) and (max-width: 1206px) {

    .product-page-coffee .coffee-franke-machines {
        bottom:
            clamp(98px, 8vw, 118px) !important;
    }
}

@media (min-width: 1025px) and (max-width: 1152px) {

    .product-page-coffee .coffee-franke-machines {
        bottom: 190px !important;
    }
}

@media (min-width: 1025px) and (max-width: 1049px) {

    .product-page-coffee .coffee-franke-image-section {
        padding-top: 54px !important;
        padding-bottom: 118px !important;
    }

    .product-page-coffee .coffee-franke-showcase {
        min-height: 640px !important;
    }

    .product-page-coffee .coffee-franke-showcase-top {
        top: 0 !important;
        width: min(88vw, 1320px) !important;
        grid-template-columns: 1fr auto 1fr !important;
        gap: 70px !important;
    }

    .product-page-coffee .coffee-franke-showcase-top span {
        display: block !important;
    }

    .product-page-coffee .coffee-franke-showcase-top img {
        width: 170px !important;
    }

    .product-page-coffee .coffee-franke-showcase-word {
        top: 52px !important;
        font-size: 210px !important;
    }

    .product-page-coffee .coffee-franke-machines {
        bottom: 190px !important;
        width: min(92vw, 1280px) !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        gap: 0 !important;
    }

    .product-page-coffee .coffee-franke-showcase-machine {
        width: 315px !important;
    }

    .product-page-coffee .coffee-franke-machine-item--center .coffee-franke-showcase-machine {
        width: 410px !important;
    }

    .product-page-coffee .coffee-franke-machine-item--left,
    .product-page-coffee .coffee-franke-machine-item--right {
        transform:
            translateY(28px)
            scale(0.9) !important;
    }

    .product-page-coffee .coffee-franke-machine-item--center {
        transform:
            translateY(0)
            scale(1.02) !important;
    }

    .product-page-coffee .coffee-franke-machine-item--left {
        margin-right: -86px !important;
    }

    .product-page-coffee .coffee-franke-machine-item--right {
        margin-left: -86px !important;
    }

    .product-page-coffee .coffee-franke-machine-item span {
        font-size: 18px !important;
    }
}

@media (max-width: 1024px) {

    .product-page-coffee .coffee-franke-image-section::after {
        display: block;
    }

    .product-page-coffee .coffee-franke-showcase {
        min-height:
            clamp(390px, 58vw, 860px) !important;
    }

    .product-page-coffee .coffee-franke-showcase-top {
        top: 0 !important;

        width:
            min(88vw, 1320px) !important;

        grid-template-columns:
            1fr
            auto
            1fr !important;

        gap:
            clamp(18px, 4vw, 70px) !important;
    }

    .product-page-coffee .coffee-franke-showcase-top span {
        display: block !important;
    }

    .product-page-coffee .coffee-franke-showcase-top img {
        width:
            clamp(110px, 12vw, 250px) !important;
    }

    .product-page-coffee .coffee-franke-showcase-word {
        top:
            clamp(22px, 3vw, 52px) !important;

        font-size:
            clamp(62px, 20vw, 310px) !important;
    }

    .product-page-coffee .coffee-franke-machines {
        bottom:
            clamp(54px, 6vw, 118px) !important;

        width:
            min(92vw, 1280px) !important;

        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        gap:
            clamp(0px, 1.2vw, 18px) !important;
    }

    .product-page-coffee .coffee-franke-showcase-machine {
        width:
            clamp(100px, 30vw, 430px) !important;
    }

    .product-page-coffee .coffee-franke-machine-item--center .coffee-franke-showcase-machine {
        width:
            clamp(150px, 39vw, 610px) !important;
    }

    .product-page-coffee .coffee-franke-machine-item--left,
    .product-page-coffee .coffee-franke-machine-item--right {
        transform:
            translateY(28px)
            scale(0.9) !important;
    }

    .product-page-coffee .coffee-franke-machine-item--center {
        transform:
            translateY(0)
            scale(1.02) !important;
    }

    .product-page-coffee .coffee-franke-machine-item--left {
        margin-right:
            clamp(-155px, -8vw, -44px) !important;
    }

    .product-page-coffee .coffee-franke-machine-item--right {
        margin-left:
            clamp(-155px, -8vw, -44px) !important;
    }

    .product-page-coffee .coffee-franke-machine-item span {
        font-size:
            clamp(12px, 1.65vw, 26px) !important;
    }
}

@media (max-width: 606px) {

    .product-page-coffee .coffee-franke-machines {
        bottom:
            78px !important;
    }
}

@media (max-width: 540px) {

    .product-page-coffee .coffee-franke-showcase {
        min-height:
            clamp(330px, 78vw, 420px) !important;
    }

    .product-page-coffee .coffee-franke-machines {
        bottom:
            clamp(54px, 12vw, 76px) !important;
    }
}

@media (max-width: 425px) {

    .product-page-coffee .coffee-franke-showcase {
        min-height: 380px !important;
    }

    .product-page-coffee .coffee-franke-machines {
        bottom:
            58px !important;
    }

    .product-page-coffee .coffee-franke-showcase-word {
        top: 34px !important;

        font-size: 64px !important;
    }

    .product-page-coffee .coffee-franke-showcase-machine {
        width: 142px !important;
    }

    .product-page-coffee .coffee-franke-machine-item--center .coffee-franke-showcase-machine {
        width: 208px !important;
    }
}

@media (max-width: 418px) {

    .product-page-coffee .coffee-intro-section {
        padding-top: 26px !important;
        padding-bottom: 14px !important;
    }

    .product-page-coffee .coffee-intro p {
        margin-top: 14px !important;
    }

    .product-page-coffee .coffee-intro-list {
        margin-top: 14px !important;
    }

    .product-page-coffee .coffee-franke-image-section {
        padding-top: 18px !important;
        padding-bottom: 26px !important;
    }

    .product-page-coffee .coffee-franke-showcase {
        min-height: 350px !important;
    }

    .product-page-coffee .coffee-franke-showcase-word {
        top: 30px !important;

        font-size: 58px !important;
    }

    .product-page-coffee .coffee-franke-showcase-top img {
        width: 88px !important;
    }

    .product-page-coffee .coffee-franke-showcase-top {
        top:
            0 !important;
    }

    .product-page-coffee .coffee-franke-machines {
        bottom:
            52px !important;
    }

    .product-page-coffee .coffee-franke-showcase-machine {
        width: 132px !important;
    }

    .product-page-coffee .coffee-franke-machine-item--center .coffee-franke-showcase-machine {
        width: 192px !important;
    }

    .product-page-coffee .coffee-franke-machine-item--left {
        margin-right:
            -52px !important;
    }

    .product-page-coffee .coffee-franke-machine-item--right {
        margin-left:
            -52px !important;
    }

    .product-page-coffee .coffee-franke-machine-item span {
        font-size: 12px !important;
    }

    .product-page-coffee .coffee-craft-section {
        padding-top: 24px !important;
    }
}

@media (max-width: 375px) {

    .product-page-coffee .coffee-franke-showcase {
        min-height: 330px !important;
    }

    .product-page-coffee .coffee-franke-showcase-word {
        top: 28px !important;

        font-size: 52px !important;
    }

    .product-page-coffee .coffee-franke-showcase-top img {
        width: 82px !important;
    }

    .product-page-coffee .coffee-franke-machines {
        bottom:
            48px !important;
    }

    .product-page-coffee .coffee-franke-showcase-machine {
        width: 118px !important;
    }

    .product-page-coffee .coffee-franke-machine-item--center .coffee-franke-showcase-machine {
        width: 172px !important;
    }

    .product-page-coffee .coffee-franke-machine-item--left {
        margin-right:
            -42px !important;
    }

    .product-page-coffee .coffee-franke-machine-item--right {
        margin-left:
            -42px !important;
    }
}

/* PAGE MACHINE A CAFE - SCENE FRANKE RESPONSIVE PROPORTIONNELLE */
@media (max-width: 1024px) {

    .product-page-coffee .coffee-franke-image-section {
        padding-top:
            clamp(28px, 4vw, 54px) !important;
        padding-bottom:
            clamp(78px, 7vw, 118px) !important;
    }

    .product-page-coffee .coffee-franke-showcase {
        min-height:
            clamp(500px, 58vw, 700px) !important;
    }

    .product-page-coffee .coffee-franke-showcase-top {
        top: 0 !important;
    }

    .product-page-coffee .coffee-franke-showcase-top img {
        width:
            clamp(112px, 13vw, 170px) !important;
    }

    .product-page-coffee .coffee-franke-showcase-word {
        top:
            clamp(36px, 5vw, 58px) !important;

        font-size:
            clamp(116px, 20vw, 220px) !important;
    }

    .product-page-coffee .coffee-franke-machines {
        bottom:
            clamp(76px, 8vw, 104px) !important;

        width:
            min(94vw, 760px) !important;
    }

    .product-page-coffee .coffee-franke-showcase-machine {
        width:
            clamp(178px, 26vw, 270px) !important;
    }

    .product-page-coffee .coffee-franke-machine-item--center .coffee-franke-showcase-machine {
        width:
            clamp(250px, 35vw, 360px) !important;
    }

    .product-page-coffee .coffee-franke-machine-item--left {
        margin-right:
            clamp(-110px, -10vw, -76px) !important;
    }

    .product-page-coffee .coffee-franke-machine-item--right {
        margin-left:
            clamp(-110px, -10vw, -76px) !important;
    }
}

@media (max-width: 768px) {

    .product-page-coffee .coffee-franke-showcase {
        min-height:
            clamp(420px, 68vw, 540px) !important;
    }

    .product-page-coffee .coffee-franke-showcase-word {
        top: 38px !important;

        font-size:
            clamp(94px, 21vw, 150px) !important;
    }

    .product-page-coffee .coffee-franke-machines {
        bottom:
            clamp(62px, 9vw, 82px) !important;
    }

    .product-page-coffee .coffee-franke-showcase-machine {
        width:
            clamp(138px, 26vw, 200px) !important;
    }

    .product-page-coffee .coffee-franke-machine-item--center .coffee-franke-showcase-machine {
        width:
            clamp(194px, 35vw, 270px) !important;
    }

    .product-page-coffee .coffee-franke-machine-item--left {
        margin-right:
            clamp(-86px, -12vw, -58px) !important;
    }

    .product-page-coffee .coffee-franke-machine-item--right {
        margin-left:
            clamp(-86px, -12vw, -58px) !important;
    }
}

@media (max-width: 425px) {

    .product-page-coffee .coffee-franke-image-section {
        padding-top: 20px !important;
        padding-bottom: 34px !important;
    }

    .product-page-coffee .coffee-franke-showcase {
        min-height: 350px !important;
    }

    .product-page-coffee .coffee-franke-showcase-top img {
        width: 92px !important;
    }

    .product-page-coffee .coffee-franke-showcase-word {
        top: 32px !important;

        font-size: 68px !important;
    }

    .product-page-coffee .coffee-franke-machines {
        bottom: 50px !important;

        width:
            calc(100% - 12px) !important;
    }

    .product-page-coffee .coffee-franke-showcase-machine {
        width: 128px !important;
    }

    .product-page-coffee .coffee-franke-machine-item--center .coffee-franke-showcase-machine {
        width: 188px !important;
    }

    .product-page-coffee .coffee-franke-machine-item--left {
        margin-right: -54px !important;
    }

    .product-page-coffee .coffee-franke-machine-item--right {
        margin-left: -54px !important;
    }
}

@media (max-width: 375px) {

    .product-page-coffee .coffee-franke-showcase {
        min-height: 330px !important;
    }

    .product-page-coffee .coffee-franke-showcase-word {
        top: 30px !important;

        font-size: 58px !important;
    }

    .product-page-coffee .coffee-franke-showcase-machine {
        width: 112px !important;
    }

    .product-page-coffee .coffee-franke-machine-item--center .coffee-franke-showcase-machine {
        width: 164px !important;
    }

    .product-page-coffee .coffee-franke-machine-item--left {
        margin-right: -48px !important;
    }

    .product-page-coffee .coffee-franke-machine-item--right {
        margin-left: -48px !important;
    }
}

@media (max-width: 340px) {

    .product-page-coffee .coffee-franke-showcase {
        min-height: 310px !important;
    }

    .product-page-coffee .coffee-franke-showcase-word {
        font-size: 52px !important;
    }

    .product-page-coffee .coffee-franke-showcase-machine {
        width: 102px !important;
    }

    .product-page-coffee .coffee-franke-machine-item--center .coffee-franke-showcase-machine {
        width: 150px !important;
    }

    .product-page-coffee .coffee-franke-machine-item--left {
        margin-right: -44px !important;
    }

    .product-page-coffee .coffee-franke-machine-item--right {
        margin-left: -44px !important;
    }
}

/* PAGE MACHINE A CAFE - INTRO + FRANKE MINIATURE DESKTOP */
@media (max-width: 1206px) {

    .product-page-coffee .coffee-intro-section {
        padding-top:
            9.7vw !important;
        padding-bottom:
            5.45vw !important;
    }

    .product-page-coffee .coffee-intro {
        max-width:
            59.1vw !important;
        text-align: center !important;
    }

    .product-page-coffee .coffee-intro-label {
        justify-content: center !important;
        gap:
            1.36vw !important;
        /*font-size:
            0.91vw !important;*/
        letter-spacing: 0.18em !important;
        white-space: nowrap !important;
    }

    .product-page-coffee .coffee-intro-label::before,
    .product-page-coffee .coffee-intro-label::after {
        display: block !important;
        width:
            4.09vw !important;
    }

    .product-page-coffee .coffee-intro h2 {
        /*max-width:
            57.6vw !important;*/
        margin-top:
            1.82vw !important;
        /*font-size:
            4.39vw !important;*/
        line-height: 1.06 !important;
        text-align: center !important;
    }

    .product-page-coffee .coffee-intro p {
        /*max-width:
            51.5vw !important;*/
        margin-top:
            1.82vw !important;
        /*font-size:
            1.29vw !important;*/
        line-height: 1.68 !important;
        text-align: center !important;
    }

    .product-page-coffee .coffee-intro-list {
        margin-top:
            2.58vw !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 0 !important;
        /*font-size:
            0.91vw !important;*/
        letter-spacing: 0.18em !important;
        white-space: nowrap !important;
    }

    .product-page-coffee .coffee-intro-list span,
    .product-page-coffee .coffee-intro-list span:first-child {
        padding:
            0
            1.67vw !important;
    }

    .product-page-coffee .coffee-intro-list span:first-child {
        padding-left: 0 !important;
    }

    .product-page-coffee .coffee-intro-list span + span::before {
        display: block !important;
        width:
            0.38vw !important;
        height:
            0.38vw !important;
    }

    .product-page-coffee .coffee-franke-image-section {
        padding-top:
            4.7vw !important;
        padding-bottom:
            9.55vw !important;
    }

    .product-page-coffee .coffee-franke-image-section::after {
        display: block !important;
    }

    .product-page-coffee .coffee-franke-showcase {
        min-height:
            65.15vw !important;
    }

    .product-page-coffee .coffee-franke-showcase-top {
        top: 0 !important;
        width:
            calc(100vw - 28px) !important;
        grid-template-columns: 1fr auto 1fr !important;
        gap:
            5.3vw !important;
    }

    .product-page-coffee .coffee-franke-showcase-top span {
        display: block !important;
    }

    .product-page-coffee .coffee-franke-showcase-top img {
        width:
            18.94vw !important;
    }

    .product-page-coffee .coffee-franke-showcase-word {
        top:
            3.94vw !important;
        font-size:
            clamp(52px, 20vw, 250px) !important;
        line-height: 0.8 !important;
    }

    .product-page-coffee .coffee-franke-machines {
        bottom:
            14.4vw !important;
        width:
            calc(100vw - 40px) !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-end !important;
        justify-content: center !important;
        gap:
            1.36vw !important;
    }

    .product-page-coffee .coffee-franke-showcase-machine {
        width:
            32.58vw !important;
    }

    .product-page-coffee .coffee-franke-machine-item--center .coffee-franke-showcase-machine {
        width:
            46.21vw !important;
    }

    .product-page-coffee .coffee-franke-machine-item--left,
    .product-page-coffee .coffee-franke-machine-item--right {
        transform:
            translateY(2.12vw)
            scale(0.9) !important;
    }

    .product-page-coffee .coffee-franke-machine-item--center {
        transform:
            translateY(0)
            scale(1.02) !important;
    }

    .product-page-coffee .coffee-franke-machine-item--left {
        margin-right:
            -11.74vw !important;
    }

    .product-page-coffee .coffee-franke-machine-item--right {
        margin-left:
            -11.74vw !important;
    }

    .product-page-coffee .coffee-franke-machine-item span {
        font-size:
            1.97vw !important;
        line-height: 1 !important;
    }

    .product-page-coffee .coffee-franke-machine-item span::after {
        height:
            max(1px, 0.15vw) !important;
        margin-top:
            0.76vw !important;
    }
}


/* =========================================================
   PAGE MATERIEL D'OCCASION - RESPONSIVE
========================================================= */

.product-page-used {
    min-width: 0;
    overflow-x: hidden;
}

.product-page-used *,
.product-page-used *::before,
.product-page-used *::after {
    box-sizing: border-box;
}

.product-page-used img,
.product-page-used svg {
    max-width: 100%;
}

@media (max-width: 1024px) {

    body:has(.product-page-used) .header-actions {
        display: none !important;
    }

    body:has(.product-page-used) .menu-button {
        position: relative;
        z-index: 1002;

        width: 44px;
        height: 44px;

        margin-left: auto;

        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    body:has(.product-page-used) .nav {
        position: fixed;
        z-index: 1001;
        inset: 0;

        width: 100%;
        height: 100dvh;

        margin: 0;
        padding:
            90px
            40px
            40px;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 20px;

        background:
            linear-gradient(
                145deg,
                var(--black),
                var(--blue-dark)
            );

        transform:
            translateX(100%);

        transition:
            transform 0.35s ease;
    }

    body:has(.product-page-used) .nav.open {
        transform:
            translateX(0);
    }

    body:has(.product-page-used) .nav > a,
    body:has(.product-page-used) .nav-link {
        width: 100%;

        font-size: 26px;
        line-height: 1.15;
    }

    body:has(.product-page-used) .nav-item {
        width: 100%;
    }

    body:has(.product-page-used) .nav-dropdown {
        position: static;

        width: 100%;

        padding:
            8px
            0
            0
            18px;

        border: 0;

        background: transparent;
        box-shadow: none;
    }

    .product-page-used .container,
    .product-page-used.occasion-page .container {
        width:
            calc(100% - 56px);
    }

    .product-page-used .product-page-hero-image {
        min-height: 540px;
    }

    .product-page-used .product-page-hero-bg {
        background-position:
            center center !important;
    }

    .product-page-used .product-page-hero-image > .container {
        min-height: inherit;

        display: flex;
        align-items: center;
    }

    .product-page-used .product-page-hero-content {
        width: 100%;

        max-width: 820px;

        transform:
            translateY(18px);
    }

    .product-page-used h1 {
        font-size:
            clamp(40px, 6vw, 62px);
    }

    .product-page-used .occasion-story {
        padding:
            70px
            0
            62px;
    }

    .product-page-used .occasion-story-copy h2 {
        font-size:
            clamp(36px, 6vw, 58px);
    }

    .product-page-used .occasion-advantages-composition {
        grid-template-columns:
            repeat(6, minmax(0, 1fr));

        row-gap: 56px;
    }

    .product-page-used .occasion-advantages-heading {
        grid-column: 1 / -1;
    }

    .product-page-used .occasion-advantage-main,
    .product-page-used .occasion-advantage-side--professional,
    .product-page-used .occasion-advantage-side--availability,
    .product-page-used .occasion-advantage-side--guarantee,
    .product-page-used .occasion-advantage-side--delivery,
    .product-page-used .occasion-advantage-side--installation {
        grid-column: span 2;

        max-width: none;
    }

    .product-page-used .occasion-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 22px;
    }

    .product-page-used .occasion-catalog .occasion-product-card.is-catalog-preview {
        display: none;
    }

    .product-page-used .occasion-faq-heading {
        position: static;
    }

    .product-page-used .occasion-faq-grid--centered .occasion-faq-heading h2 {
        white-space: normal;
    }
}

@media (max-width: 820px) {

    .product-page-used .product-page-hero-image {
        min-height: 480px;
    }

    .product-page-used .product-page-hero-bg {
        background-position:
            center top !important;
    }

    .product-page-used .product-page-hero-content {
        max-width: 680px;

        transform:
            translateY(12px);
    }

    .product-page-used .occasion-story,
    .product-page-used .occasion-advantages-panel,
    .product-page-used .occasion-catalog,
    .product-page-used .occasion-faq-section {
        padding-top: 58px !important;
        padding-bottom: 62px !important;
    }

    .product-page-used .occasion-story-copy h2,
    .product-page-used .occasion-advantages-heading h2,
    .product-page-used .occasion-catalog-head h2,
    .product-page-used .occasion-faq-heading h2 {
        font-size:
            clamp(30px, 7vw, 48px);

        line-height: 1.05;
    }

    .product-page-used .occasion-story-copy p {
        font-size: 15px;
        line-height: 1.65;
    }

    .product-page-used .occasion-advantages-curves {
        opacity: 0.35;
    }

    .product-page-used .occasion-advantages-composition {
        row-gap: 36px;
    }

    .product-page-used .occasion-advantage-main,
    .product-page-used .occasion-advantage-side--professional,
    .product-page-used .occasion-advantage-side--availability,
    .product-page-used .occasion-advantage-side--guarantee,
    .product-page-used .occasion-advantage-side--delivery,
    .product-page-used .occasion-advantage-side--installation {
        grid-column: 1 / -1;
    }

    .product-page-used .occasion-catalog-head {
        display: block;
    }

    .product-page-used .occasion-catalog .occasion-product-body {
        min-height: 170px;

        padding:
            22px
            22px
            24px;
    }

    .product-page-used .occasion-catalog .occasion-product-body p {
        font-size: 13px;
    }

    .product-page-used .occasion-catalog .occasion-product-body h3 {
        font-size: 20px;
    }

    .product-page-used .occasion-faq-grid,
    .product-page-used .occasion-faq-grid--centered {
        display: block;
    }

    .product-page-used .occasion-faq-grid--centered .occasion-faq-heading {
        margin-bottom: 32px;

        text-align: left;
    }

    .product-page-used .occasion-faq-grid--centered .occasion-faq-heading p {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 620px) {

    .product-page-used .container,
    .product-page-used.occasion-page .container {
        width:
            calc(100% - 32px);
    }

    .product-page-used .product-page-hero-image {
        min-height: 410px;
    }

    .product-page-used .product-page-hero-bg {
        background-position:
            center center !important;
    }

    .product-page-used .product-page-hero-content {
        max-width: 360px;

        text-align: left;

        transform:
            translateY(18px);
    }

    .product-page-used h1 {
        margin: 0;

        font-size: 34px;
    }

    .product-page-used .product-page-actions {
        justify-content: flex-start;

        margin-top: 22px;
    }

    .product-page-used .occasion-story,
    .product-page-used .occasion-advantages-panel,
    .product-page-used .occasion-catalog,
    .product-page-used .occasion-faq-section {
        padding-top: 46px !important;
        padding-bottom: 50px !important;
    }

    .product-page-used .occasion-label {
        gap: 10px;

        font-size: 10px;
        letter-spacing: 0.12em;
    }

    .product-page-used .occasion-label::after {
        width: 30px;
    }

    .product-page-used .occasion-story-copy h2,
    .product-page-used .occasion-advantages-heading h2,
    .product-page-used .occasion-catalog-head h2,
    .product-page-used .occasion-faq-heading h2 {
        font-size: 28px;
    }

    .product-page-used .occasion-story-copy h2::after {
        margin-top: 18px;
    }

    .product-page-used .occasion-story-copy p {
        margin-top: 18px;

        font-size: 13.5px;
    }

    .product-page-used .occasion-advantages-curves {
        display: none;
    }

    .product-page-used .occasion-advantage-main,
    .product-page-used .occasion-advantage-side {
        padding-bottom: 20px;

        border-bottom:
            1px solid
            rgba(139, 185, 236, 0.14);
    }

    .product-page-used .occasion-advantage-side--installation {
        border-bottom: 0;
    }

    .product-page-used .occasion-advantage-main h3,
    .product-page-used .occasion-advantage-side h3 {
        font-size: 20px;
    }

    .product-page-used .occasion-advantage-main p,
    .product-page-used .occasion-advantage-side p {
        margin-top: 12px;

        font-size: 13px;
        line-height: 1.55;
    }

    .product-page-used .occasion-product-grid {
        grid-template-columns:
            1fr;

        max-width: 380px;

        margin-left: auto;
        margin-right: auto;
    }

    .product-page-used .occasion-catalog .occasion-product-image {
        aspect-ratio: 4 / 3;
    }

    .product-page-used .occasion-catalog .occasion-product-image img {
        padding: 10px;
    }

    .product-page-used .occasion-show-more {
        min-width: 150px;
        min-height: 44px;

        padding:
            0
            22px;

        font-size: 12px;
    }

    .product-page-used .occasion-faq-question {
        min-height: 64px;

        grid-template-columns:
            34px
            1fr
            28px !important;

        gap: 10px;
    }

    .product-page-used .occasion-faq-title {
        font-size: 15px;
    }

    .product-page-used .occasion-faq-answer p {
        padding:
            0
            38px
            0
            44px !important;

        font-size: 13px;
    }
}

@media (min-width: 430px) and (max-width: 621px) {

    .product-page-used .container,
    .product-page-used.occasion-page .container {
        width:
            calc(100% - 30px);
    }

    .product-page-used .product-page-hero-image {
        min-height: 315px;
    }

    .product-page-used .product-page-hero-content {
        max-width: 285px;

        margin:
            0
            auto;

        text-align: center;

        transform:
            translateY(4px);
    }

    .product-page-used h1 {
        font-size: 21px;
        line-height: 1.08;
    }

    .product-page-used .product-page-actions {
        justify-content: center;

        margin-top: 12px;
    }

    .product-page-used .button-main {
        min-height: 30px;

        padding:
            0
            13px;

        font-size: 7.5px;
    }

    .product-page-used .occasion-story,
    .product-page-used .occasion-advantages-panel,
    .product-page-used .occasion-catalog,
    .product-page-used .occasion-faq-section {
        padding-top: 30px !important;
        padding-bottom: 34px !important;
    }

    .product-page-used .occasion-story-copy h2,
    .product-page-used .occasion-advantages-heading h2,
    .product-page-used .occasion-catalog-head h2,
    .product-page-used .occasion-faq-heading h2 {
        font-size: 24px;
        line-height: 1.08;
    }

    .product-page-used .occasion-story-copy p,
    .product-page-used .occasion-advantage-main p,
    .product-page-used .occasion-advantage-side p,
    .product-page-used .occasion-faq-heading p {
        font-size: 12.5px;
        line-height: 1.55;
    }

    .product-page-used .occasion-advantages-composition {
        row-gap: 14px;
    }

    .product-page-used .occasion-advantage-main,
    .product-page-used .occasion-advantage-side {
        padding-bottom: 12px;
    }

    .product-page-used .occasion-advantage-main p,
    .product-page-used .occasion-advantage-side p {
        margin-top: 8px;
    }

    .product-page-used .occasion-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        max-width: none;

        gap: 10px;
    }

    .product-page-used .occasion-catalog .occasion-product-image {
        aspect-ratio: 1 / 1.08;
    }

    .product-page-used .occasion-catalog .occasion-product-image img {
        padding: 6px;
    }

    .product-page-used .occasion-catalog .occasion-product-body {
        min-height: 88px;

        padding:
            10px
            10px
            12px;
    }

    .product-page-used .occasion-catalog .occasion-product-body p {
        font-size: 7px;
        line-height: 1.25;
    }

    .product-page-used .occasion-catalog .occasion-product-body h3 {
        font-size: 10px;
        line-height: 1.1;
    }

    .product-page-used .occasion-catalog .occasion-product-body strong {
        width: 24px;
        height: 24px;
    }

    .product-page-used .occasion-catalog .occasion-product-body strong::after {
        font-size: 12px;
    }
}

@media (max-width: 425px) {

    .product-page-used .container,
    .product-page-used.occasion-page .container {
        width:
            calc(100% - 28px);
    }

    .product-page-used .product-page-hero-image {
        min-height: 285px;
    }

    .product-page-used .product-page-hero-bg {
        background-position:
            center center !important;
    }

    .product-page-used .product-page-hero-overlay {
        background:
            linear-gradient(
                to bottom,
                rgba(var(--hero-end-rgb), 0.2) 0%,
                rgba(var(--hero-end-rgb), 0.46) 48%,
                rgb(var(--hero-end-rgb)) 100%
            ) !important;
    }

    .product-page-used .product-page-hero-image > .container {
        align-items: center;
        justify-content: center;
    }

    .product-page-used .product-page-hero-content {
        max-width: 245px;

        margin:
            0
            auto;

        text-align: center;

        transform:
            translateY(0);
    }

    .product-page-used h1 {
        font-size: 18px;

        line-height: 1.08;
    }

    .product-page-used .product-page-actions {
        justify-content: center;

        margin-top: 10px;
    }

    .product-page-used .button-main {
        min-height: 28px;

        padding:
            0
            11px;

        font-size: 6.8px;
    }

    .product-page-used .occasion-story,
    .product-page-used .occasion-advantages-panel,
    .product-page-used .occasion-catalog,
    .product-page-used .occasion-faq-section {
        padding-top: 26px !important;
        padding-bottom: 30px !important;
    }

    .product-page-used .occasion-story-copy h2,
    .product-page-used .occasion-advantages-heading h2,
    .product-page-used .occasion-catalog-head h2,
    .product-page-used .occasion-faq-heading h2 {
        font-size: 23px;

        line-height: 1.08;
    }

    .product-page-used .occasion-story-copy p,
    .product-page-used .occasion-advantage-main p,
    .product-page-used .occasion-advantage-side p,
    .product-page-used .occasion-faq-heading p {
        font-size: 12.5px;

        line-height: 1.55;
    }

    .product-page-used .occasion-story-copy h2::after {
        width: 44px;

        margin-top: 14px;
    }

    .product-page-used .occasion-advantages-composition {
        row-gap: 12px;
    }

    .product-page-used .occasion-advantage-main,
    .product-page-used .occasion-advantage-side {
        padding-bottom: 10px;
    }

    .product-page-used .occasion-advantage-main::before,
    .product-page-used .occasion-advantage-side::before {
        width: 46px;

        margin-bottom: 12px;
    }

    .product-page-used .occasion-advantage-main span,
    .product-page-used .occasion-advantage-side span {
        margin-bottom: 7px;

        font-size: 10px;
    }

    .product-page-used .occasion-advantage-main p,
    .product-page-used .occasion-advantage-side p {
        margin-top: 8px;
    }

    .product-page-used .occasion-catalog .occasion-product-body {
        min-height: 86px;

        padding:
            10px
            10px
            12px;
    }

    .product-page-used .occasion-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        max-width: none;

        gap: 10px;
    }

    .product-page-used .occasion-catalog .occasion-product-image {
        aspect-ratio: 1 / 1.08;
    }

    .product-page-used .occasion-catalog .occasion-product-image img {
        padding: 6px;
    }

    .product-page-used .occasion-catalog .occasion-product-body h3 {
        font-size: 10px;

        line-height: 1.1;
    }

    .product-page-used .occasion-catalog .occasion-product-body p {
        font-size: 7px;

        line-height: 1.25;
    }

    .product-page-used .occasion-catalog .occasion-product-body strong {
        width: 24px;
        height: 24px;
    }

    .product-page-used .occasion-catalog .occasion-product-body strong::after {
        font-size: 12px;
    }

    .product-page-used .occasion-catalog-faq-wave {
        display: none;
    }

    .product-page-used .occasion-faq-grid--centered .occasion-faq-heading {
        margin-bottom: 18px;
    }

    .product-page-used .occasion-faq-question {
        min-height: 54px;

        grid-template-columns:
            26px
            1fr
            24px !important;

        gap: 8px;
    }

    .product-page-used .occasion-faq-toggle {
        width: 22px;
        height: 22px;
    }

    .product-page-used .occasion-faq-number {
        font-size: 10px;
    }

    .product-page-used .occasion-faq-title {
        font-size: 13px;
    }

    .product-page-used .occasion-faq-answer p {
        padding:
            0
            28px
            0
            34px !important;
    }
}

/* =========================================================
   PAGE A PROPOS - RESPONSIVE
========================================================= */

.product-page-about {
    overflow-x: hidden;
    padding-top: 0;
}

.product-page-about *,
.product-page-about *::before,
.product-page-about *::after {
    box-sizing: border-box;
}

.product-page-about img {
    max-width: 100%;
}

@media (max-width: 1024px) {

    .product-page-about .container {
        width:
            calc(100% - 56px);
    }

    .product-page-about .product-page-hero-image {
        min-height: 430px;
    }

    .product-page-about .product-page-hero-bg {
        background-position: center center;
    }

    .product-page-about .product-page-hero-image > .container {
        min-height: inherit;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product-page-about .product-page-hero-content {
        max-width: 720px;

        text-align: center;
    }

    .product-page-about .product-page-hero h1 {
        max-width: 720px;

        font-size:
            clamp(42px, 6vw, 62px);
        line-height: 1.03;
        letter-spacing: 0;
    }

    .product-page-about .product-page-actions {
        justify-content: center;

        margin-top: 24px;
    }

    .product-page-about .button-main {
        min-height: 48px;

        padding:
            0
            24px;
    }

    .about-intro-section,
    .about-admin-section,
    .about-commercial-section,
    .about-technical-section {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .about-intro {
        max-width: 820px;
    }

    .about-intro h2 {
        max-width: 700px;

        font-size:
            clamp(34px, 5vw, 48px);
        letter-spacing: 0;
    }

    .about-timeline {
        max-width: 760px;

        margin-top: 40px;
    }

    .about-timeline-content h3 {
        font-size:
            clamp(21px, 3vw, 28px);
        letter-spacing: 0;
    }

    .about-admin,
    .about-commercial,
    .about-technical {
        grid-template-columns: 1fr;
        gap: 38px;

        max-width: 820px;
    }

    .about-admin-copy,
    .about-commercial-copy,
    .about-technical-copy {
        order: 1;

        max-width: 720px;
    }

    .about-admin-photos,
    .about-commercial-photo,
    .about-technical-photos {
        order: 2;
    }

    .about-admin-copy h2,
    .about-commercial-copy h2,
    .about-technical-copy h2 {
        max-width: 680px;

        margin-bottom: 20px;

        font-size:
            clamp(34px, 5.5vw, 50px);
        line-height: 1.1;
        letter-spacing: 0;
    }

    .about-admin-copy h2::after,
    .about-commercial-copy h2::after,
    .about-technical-copy h2::after {
        margin-top: 18px;
    }

    .about-admin-copy p,
    .about-commercial-copy p,
    .about-technical-copy p {
        font-size: 16px;
        line-height: 1.58;
    }

    .about-admin-photos,
    .about-technical-photos {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 22px;
    }

    .about-commercial-photo {
        width: min(310px, 74%);

        margin:
            0
            auto;
    }

    .about-admin-photo,
    .about-commercial-photo,
    .about-technical-photo {
        border-radius: 10px;
    }

    .about-admin-photo::after,
    .about-commercial-photo::after,
    .about-technical-photo::after,
    .about-admin-photo-caption,
    .about-commercial-photo-caption,
    .about-technical-photo-caption {
        opacity: 1;
    }

    .about-admin-photo-caption,
    .about-commercial-photo-caption,
    .about-technical-photo-caption {
        transform: translateY(0);
    }
}

@media (max-width: 700px) {

    .product-page-about .container {
        width:
            calc(100% - 40px);
    }

    .product-page-about .product-page-hero-image {
        min-height: 370px;
    }

    .product-page-about .product-page-hero-overlay {
        background:
            linear-gradient(
                to bottom,
                rgba(var(--hero-end-rgb), 0.28) 0%,
                rgba(var(--hero-end-rgb), 0.52) 44%,
                rgb(var(--hero-end-rgb)) 100%
            );
    }

    .product-page-about .product-page-hero h1 {
        font-size:
            clamp(32px, 8vw, 44px);
    }

    .product-page-about .button-main {
        min-height: 42px;

        padding:
            0
            20px;

        font-size: 12px;
    }

    .about-intro-section,
    .about-admin-section,
    .about-commercial-section,
    .about-technical-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .about-intro-label {
        font-size: 11px;
        line-height: 1.35;
    }

    .about-intro h2,
    .about-admin-copy h2,
    .about-commercial-copy h2,
    .about-technical-copy h2 {
        font-size: 31px;
        line-height: 1.08;
    }

    .about-timeline {
        margin-top: 32px;
    }

    .about-timeline::before {
        left: 17px;
        top: 18px;
        bottom: 18px;
    }

    .about-timeline-item {
        grid-template-columns:
            36px
            minmax(0, 1fr);

        gap: 16px;

        padding-bottom: 26px;
    }

    .about-timeline-marker {
        width: 34px;
        height: 34px;

        font-size: 10px;
    }

    .about-timeline-content {
        padding-bottom: 24px;
    }

    .about-timeline-content h3 {
        font-size: 20px;
        line-height: 1.18;
    }

    .about-timeline-content p {
        margin-top: 10px;

        font-size: 14px;
        line-height: 1.55;
    }

    .about-admin,
    .about-commercial,
    .about-technical {
        gap: 30px;
    }

    .about-admin-photos,
    .about-technical-photos {
        gap: 14px;
    }

    .about-admin-photo-caption,
    .about-commercial-photo-caption,
    .about-technical-photo-caption {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

    .about-admin-photo-caption h3,
    .about-commercial-photo-caption h3,
    .about-technical-photo-caption h3 {
        font-size: 20px;
    }

    .about-admin-photo-caption p,
    .about-commercial-photo-caption p,
    .about-technical-photo-caption p {
        margin-bottom: 10px;

        font-size: 11px;
    }

    .about-admin-photo-caption a,
    .about-commercial-photo-caption a,
    .about-technical-photo-caption a {
        min-height: 28px;

        padding:
            0
            12px;

        font-size: 10px;
    }
}

@media (max-width: 520px) {

    .product-page-about .container {
        width:
            calc(100% - 28px);
    }

    .product-page-about .product-page-hero-image {
        min-height: 320px;
    }

    .product-page-about .product-page-hero-content {
        max-width: 300px;
    }

    .product-page-about .product-page-hero h1 {
        font-size: 28px;
        line-height: 1.06;
    }

    .product-page-about .product-page-actions {
        margin-top: 16px;
    }

    .product-page-about .button-main {
        min-height: 36px;

        padding:
            0
            16px;

        font-size: 10px;
    }

    .about-intro-section,
    .about-admin-section,
    .about-commercial-section,
    .about-technical-section {
        padding-top: 38px;
        padding-bottom: 40px;
    }

    .about-intro h2,
    .about-admin-copy h2,
    .about-commercial-copy h2,
    .about-technical-copy h2 {
        font-size: 25px;
    }

    .about-admin-copy p,
    .about-commercial-copy p,
    .about-technical-copy p {
        font-size: 13.5px;
        line-height: 1.58;
    }

    .about-timeline {
        margin-top: 26px;
    }

    .about-timeline-item {
        gap: 13px;

        padding-bottom: 22px;
    }

    .about-timeline-content h3 {
        font-size: 17px;
    }

    .about-timeline-content p {
        font-size: 12.5px;
        line-height: 1.55;
    }

    .about-admin-photos,
    .about-technical-photos {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .about-admin-photo,
    .about-technical-photo {
        aspect-ratio: 0.78;
    }

    .about-commercial-photo {
        width: min(210px, 62vw);
    }

    .about-admin-photo-caption,
    .about-commercial-photo-caption,
    .about-technical-photo-caption {
        left: 9px;
        right: 9px;
        bottom: 9px;
    }

    .about-admin-photo-caption h3,
    .about-commercial-photo-caption h3,
    .about-technical-photo-caption h3 {
        margin-bottom: 5px;

        font-size: 16px;
    }

    .about-admin-photo-caption p,
    .about-commercial-photo-caption p,
    .about-technical-photo-caption p {
        margin-bottom: 8px;

        font-size: 9.5px;
        line-height: 1.25;
    }

    .about-admin-photo-caption a,
    .about-commercial-photo-caption a,
    .about-technical-photo-caption a {
        min-height: 24px;

        padding:
            0
            10px;

        font-size: 8.5px;
    }
}

@media (max-width: 390px) {

    .product-page-about .product-page-hero-image {
        min-height: 292px;
    }

    .product-page-about .product-page-hero-content {
        max-width: 260px;
    }

    .product-page-about .product-page-hero h1 {
        font-size: 24px;
    }

    .product-page-about .button-main {
        min-height: 32px;

        padding:
            0
            13px;

        font-size: 8.5px;
    }

    .about-intro-section,
    .about-admin-section,
    .about-commercial-section,
    .about-technical-section {
        padding-top: 32px;
        padding-bottom: 34px;
    }

    .about-intro h2,
    .about-admin-copy h2,
    .about-commercial-copy h2,
    .about-technical-copy h2 {
        font-size: 22px;
    }

    .about-timeline-item {
        grid-template-columns:
            32px
            minmax(0, 1fr);

        gap: 11px;
    }

    .about-timeline::before {
        left: 15px;
    }

    .about-timeline-marker {
        width: 30px;
        height: 30px;

        font-size: 9px;
    }

    .about-timeline-content h3 {
        font-size: 15.5px;
    }

    .about-timeline-content p {
        font-size: 11.5px;
    }

    .about-admin-photos,
    .about-technical-photos {
        gap: 8px;
    }
}

/* =========================================================
   PAGE NOUS REJOINDRE - RESPONSIVE
========================================================= */

.product-page-join {
    overflow-x: hidden;
    padding-top: 0;
}

.product-page-join *,
.product-page-join *::before,
.product-page-join *::after {
    box-sizing: border-box;
}

@media (max-width: 1280px) {

    .product-page-join .container {
        width:
            calc(100% - 56px);
    }

    .product-page-join .product-page-hero-image {
        min-height: 430px;
    }

    .product-page-join .product-page-hero-image > .container {
        min-height: inherit;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product-page-join .product-page-hero-content {
        max-width: 720px;

        text-align: center;
    }

    .product-page-join .product-page-hero h1 {
        font-size:
            clamp(42px, 6vw, 62px);
        line-height: 1.03;
        letter-spacing: 0;
    }

    .product-page-join .product-page-actions {
        justify-content: center;

        margin-top: 24px;
    }

    .join-why-section,
    .join-offers-section,
    .join-application-section {
        padding-top: 72px;
        padding-bottom: 76px;
    }

    .join-why {
        grid-template-columns: 1fr;
        gap: 42px;

        max-width: 820px;
    }

    .join-section-heading {
        max-width: 720px;
    }

    .join-section-heading h2,
    .join-offers-heading h2,
    .join-application-heading h2 {
        font-size:
            clamp(34px, 5vw, 50px);
        line-height: 1.06;
        letter-spacing: 0;
    }

    .join-section-heading p,
    .join-application-heading p {
        font-size: 15.5px;
        line-height: 1.62;
    }

    .join-why-points article {
        padding:
            24px
            0;
    }

    .join-offers-heading {
        margin-bottom: 36px;
    }

    .join-offer {
        grid-template-columns: 1fr;
        gap: 28px;

        padding:
            34px
            36px;
    }

    .join-offer-main h3,
    .join-offer-main p {
        max-width: 640px;
    }

    .join-offer-meta {
        max-width: 680px;

        text-align: left;
    }

    .join-offer-meta > div {
        justify-items: start;
    }

    .join-offer-button {
        width: fit-content;
    }

    .join-application {
        max-width: 720px;
    }
}

@media (max-width: 760px) {

    .product-page-join .container {
        width:
            calc(100% - 40px);
    }

    .product-page-join .product-page-hero-image {
        min-height: 360px;
    }

    .product-page-join .product-page-hero-overlay {
        background:
            linear-gradient(
                to bottom,
                rgba(var(--hero-end-rgb), 0.28) 0%,
                rgba(var(--hero-end-rgb), 0.55) 45%,
                rgb(var(--hero-end-rgb)) 100%
            );
    }

    .product-page-join .product-page-hero h1 {
        font-size:
            clamp(32px, 8vw, 44px);
    }

    .product-page-join .button-main {
        min-height: 42px;

        padding:
            0
            20px;

        font-size: 12px;
    }

    .join-why-section,
    .join-offers-section,
    .join-application-section {
        padding-top: 54px;
        padding-bottom: 58px;
    }

    .join-section-heading span,
    .join-offers-heading span,
    .join-application-heading span {
        font-size: 11px;
        line-height: 1.35;
    }

    .join-section-heading h2,
    .join-offers-heading h2,
    .join-application-heading h2 {
        font-size: 31px;
    }

    .join-section-heading p,
    .join-why-points p,
    .join-offer-main p,
    .join-application-heading p {
        font-size: 14px;
        line-height: 1.58;
    }

    .join-why-link {
        margin-top: 24px;

        font-size: 12px;
    }

    .join-why-points {
        gap: 0;
    }

    .join-why-points article {
        grid-template-columns:
            40px
            minmax(0, 1fr);

        gap: 14px;

        padding:
            22px
            0;
    }

    .join-why-icon {
        width: 36px;
        height: 36px;
    }

    .join-why-icon svg {
        width: 18px;
        height: 18px;
    }

    .join-why-points h3,
    .join-offer-main h3 {
        font-size: 21px;
        line-height: 1.12;
        letter-spacing: 0;
    }

    .join-offer {
        padding:
            28px
            24px;

        border-radius: 10px;
    }

    .join-offer-meta {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .join-offer-meta > div {
        grid-template-columns:
            36px
            minmax(0, 1fr);

        align-items: center;
        justify-items: start;
        column-gap: 12px;
    }

    .join-offer-icon {
        grid-row:
            1
            / span 2;

        margin-bottom: 0;
    }

    .join-offer-icon svg {
        width: 28px;
        height: 28px;
    }

    .join-offer-meta strong,
    .join-offer-meta span {
        font-size: 14px;
        line-height: 1.25;
    }

    .join-offer-button,
    .join-form-submit,
    .join-application .wpcf7 input[type="submit"],
    .join-application .wpcf7 button[type="submit"] {
        min-height: 44px;

        padding:
            0
            20px;

        font-size: 12px;
    }

    .join-application-form {
        gap: 14px;

        padding:
            28px
            24px;

        border-radius: 10px;
    }

    .join-application .wpcf7 form {
        padding: 0;
        border-radius: 0;
    }

    .join-form-field label,
    .join-form-field input,
    .join-form-field textarea,
    .join-application .wpcf7 label,
    .join-application .wpcf7 input:not([type="submit"]),
    .join-application .wpcf7 textarea {
        font-size: 14px;
    }

    .join-form-field textarea,
    .join-application .wpcf7 textarea {
        min-height: 130px;
    }
}

@media (max-width: 520px) {

    .product-page-join .container {
        width:
            calc(100% - 28px);
    }

    .product-page-join .product-page-hero-image {
        min-height: 310px;
    }

    .product-page-join .product-page-hero-content {
        max-width: 300px;
    }

    .product-page-join .product-page-hero h1 {
        font-size: 28px;
        line-height: 1.06;
    }

    .product-page-join .product-page-actions {
        margin-top: 15px;
    }

    .product-page-join .button-main {
        min-height: 36px;

        padding:
            0
            15px;

        font-size: 9.5px;
    }

    .join-why-section,
    .join-offers-section,
    .join-application-section {
        padding-top: 38px;
        padding-bottom: 42px;
    }

    .join-section-heading h2,
    .join-offers-heading h2,
    .join-application-heading h2 {
        font-size: 25px;
    }

    .join-section-heading p,
    .join-why-points p,
    .join-offer-main p,
    .join-application-heading p {
        font-size: 12.5px;
    }

    .join-why {
        gap: 28px;
    }

    .join-why-points article {
        grid-template-columns:
            34px
            minmax(0, 1fr);

        gap: 11px;

        padding:
            18px
            0;
    }

    .join-why-icon {
        width: 30px;
        height: 30px;
    }

    .join-why-icon svg {
        width: 15px;
        height: 15px;
    }

    .join-why-points h3,
    .join-offer-main h3 {
        font-size: 17px;
    }

    .join-offers-heading {
        margin-bottom: 24px;
    }

    .join-offer {
        gap: 22px;

        padding:
            22px
            18px;
    }

    .join-offer-meta {
        gap: 12px;
    }

    .join-offer-meta > div {
        grid-template-columns:
            30px
            minmax(0, 1fr);

        column-gap: 10px;
    }

    .join-offer-icon {
        width: 28px;
        height: 28px;
    }

    .join-offer-icon svg {
        width: 22px;
        height: 22px;
    }

    .join-offer-meta strong,
    .join-offer-meta span {
        font-size: 12.5px;
    }

    .join-offer-button,
    .join-form-submit,
    .join-application .wpcf7 input[type="submit"],
    .join-application .wpcf7 button[type="submit"] {
        width: 100%;
        min-height: 38px;

        padding:
            0
            14px;

        font-size: 10px;
    }

    .join-application-heading {
        margin-bottom: 22px;
    }

    .join-application-form {
        padding:
            20px
            16px;
    }

    .join-application .wpcf7 form {
        padding: 0;
    }

    .join-form-field {
        gap: 6px;
    }

    .join-form-field label,
    .join-form-field input,
    .join-form-field textarea,
    .join-application .wpcf7 label,
    .join-application .wpcf7 input:not([type="submit"]),
    .join-application .wpcf7 textarea {
        font-size: 12.5px;
    }

    .join-form-field input,
    .join-form-field textarea,
    .join-application .wpcf7 input:not([type="submit"]),
    .join-application .wpcf7 textarea {
        padding:
            11px
            12px;
    }
}

@media (max-width: 390px) {

    .product-page-join .product-page-hero-image {
        min-height: 282px;
    }

    .product-page-join .product-page-hero-content {
        max-width: 260px;
    }

    .product-page-join .product-page-hero h1 {
        font-size: 24px;
    }

    .product-page-join .button-main {
        min-height: 32px;

        padding:
            0
            12px;

        font-size: 8.5px;
    }

    .join-why-section,
    .join-offers-section,
    .join-application-section {
        padding-top: 32px;
        padding-bottom: 34px;
    }

    .join-section-heading h2,
    .join-offers-heading h2,
    .join-application-heading h2 {
        font-size: 22px;
    }

    .join-why-points h3,
    .join-offer-main h3 {
        font-size: 15.5px;
    }

    .join-section-heading p,
    .join-why-points p,
    .join-offer-main p,
    .join-application-heading p {
        font-size: 11.5px;
    }
}

/* =========================================================
   PAGE MAINTENANCE - RESPONSIVE
========================================================= */

.product-page-maintenance {
    overflow-x: hidden;
    padding-top: 0;
}

.product-page-maintenance *,
.product-page-maintenance *::before,
.product-page-maintenance *::after {
    box-sizing: border-box;
}

.product-page-maintenance img {
    max-width: 100%;
}

.product-page-maintenance .maintenance-solution-card--featured
.maintenance-solution-content h3 {
    white-space: normal;
}

@media (max-width: 1100px) {

    .product-page-maintenance .container {
        width:
            calc(100% - 56px);
    }

    .product-page-maintenance .product-page-hero-image {
        min-height: 430px;
    }

    .product-page-maintenance .product-page-hero-image > .container {
        min-height: inherit;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product-page-maintenance .product-page-hero-content {
        max-width: 860px;

        text-align: center;
    }

    .product-page-maintenance .product-page-hero h1 {
        font-size:
            clamp(34px, 5.6vw, 54px);
        line-height: 1.05;
        letter-spacing: 0;
    }

    .product-page-maintenance .product-page-actions {
        justify-content: center;

        margin-top: 24px;
    }

    .product-page-maintenance .maintenance-importance-section,
    .product-page-maintenance .maintenance-solutions-section,
    .product-page-maintenance .maintenance-intro-section,
    .product-page-maintenance .maintenance-strengths-section {
        padding-top: 72px;
        padding-bottom: 76px;
    }

    .product-page-maintenance .maintenance-importance,
    .product-page-maintenance .maintenance-intro {
        grid-template-columns: 1fr;
        gap: 42px;

        max-width: 860px;
    }

    .product-page-maintenance .maintenance-intro-copy {
        order: 1;
    }

    .product-page-maintenance .maintenance-intro-media {
        order: 2;
    }

    .product-page-maintenance .maintenance-importance-content {
        padding-top: 0;
    }

    .product-page-maintenance .maintenance-importance-heading h2,
    .product-page-maintenance .maintenance-solutions-heading h2,
    .product-page-maintenance .maintenance-intro-copy h2,
    .product-page-maintenance .maintenance-strengths-heading h2 {
        font-size:
            clamp(34px, 5vw, 50px);
        line-height: 1.08;
        letter-spacing: 0;
    }

    .product-page-maintenance .maintenance-importance-text {
        margin-top: 28px;
    }

    .product-page-maintenance .maintenance-importance-text p,
    .product-page-maintenance .maintenance-solutions-heading p,
    .product-page-maintenance .maintenance-intro-copy p:not(.section-label),
    .product-page-maintenance .maintenance-strengths-heading p {
        font-size: 15.5px;
        line-height: 1.65;
    }

    .product-page-maintenance .maintenance-solutions-heading {
        margin-bottom: 46px;
    }

    .product-page-maintenance .maintenance-solutions-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 14px;
    }

    .product-page-maintenance .maintenance-solution-card {
        min-height: auto;

        padding:
            28px
            20px;
    }

    .product-page-maintenance .maintenance-solution-card--featured {
        grid-column: auto;
    }

    .product-page-maintenance .maintenance-intro-media img {
        height: 420px;
    }

    .product-page-maintenance .maintenance-strengths-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }
}

@media (max-width: 820px) {

    .product-page-maintenance .maintenance-intro-media img {
        height: auto;
        max-height: 320px;

        object-fit: contain;
        object-position: center center;

        border-radius: 10px;
    }

    .product-page-maintenance .maintenance-strengths-grid {
        grid-template-columns:
            1fr !important;

        width:
            calc(100% - 24px);

        max-width: 560px;

        margin-left: auto;
        margin-right: auto;
    }

    .product-page-maintenance .maintenance-strength-card {
        min-height: 0;

        padding:
            28px
            24px;
    }
}

@media (max-width: 768px) {

    .product-page-maintenance .maintenance-solutions-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {

    .product-page-maintenance .container {
        width:
            calc(100% - 40px);
    }

    .product-page-maintenance .product-page-hero-image {
        min-height: 360px;
    }

    .product-page-maintenance .product-page-hero-bg {
        background-position: center top;
    }

    .product-page-maintenance .product-page-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(var(--hero-end-rgb), 0.08) 0%,
                rgba(var(--hero-end-rgb), 0.3) 52%,
                rgba(var(--hero-end-rgb), 0.5) 78%,
                rgb(var(--hero-end-rgb)) 100%
            );
    }

    .product-page-maintenance .product-page-hero h1 {
        font-size:
            clamp(27px, 6.6vw, 38px);
        line-height: 1.08;
    }

    .product-page-maintenance .button-main {
        min-height: 42px;

        padding:
            0
            20px;

        font-size: 12px;
    }

    .product-page-maintenance .maintenance-importance-section,
    .product-page-maintenance .maintenance-solutions-section,
    .product-page-maintenance .maintenance-intro-section,
    .product-page-maintenance .maintenance-strengths-section {
        padding-top: 54px;
        padding-bottom: 58px;
    }

    .product-page-maintenance .maintenance-importance,
    .product-page-maintenance .maintenance-intro {
        gap: 32px;
    }

    .product-page-maintenance .maintenance-importance-heading .section-label,
    .product-page-maintenance .maintenance-solutions-heading > span,
    .product-page-maintenance .maintenance-intro-copy .section-label,
    .product-page-maintenance .maintenance-strengths-heading .section-label {
        font-size: 11px;
        line-height: 1.35;
    }

    .product-page-maintenance .maintenance-importance-heading h2,
    .product-page-maintenance .maintenance-solutions-heading h2,
    .product-page-maintenance .maintenance-intro-copy h2,
    .product-page-maintenance .maintenance-strengths-heading h2 {
        font-size: 31px;
    }

    .product-page-maintenance .maintenance-importance-text p,
    .product-page-maintenance .maintenance-importance-list p,
    .product-page-maintenance .maintenance-solutions-heading p,
    .product-page-maintenance .maintenance-solution-description,
    .product-page-maintenance .maintenance-solution-list li,
    .product-page-maintenance .maintenance-intro-copy p:not(.section-label),
    .product-page-maintenance .maintenance-strengths-heading p,
    .product-page-maintenance .maintenance-strength-card p {
        font-size: 14px;
        line-height: 1.58;
    }

    .product-page-maintenance .maintenance-importance-list li {
        grid-template-columns:
            26px
            minmax(0, 1fr);

        gap: 12px;

        padding:
            20px
            0;
    }

    .product-page-maintenance .maintenance-importance-list svg {
        width: 21px;
        height: 21px;
    }

    .product-page-maintenance .maintenance-solution-card {
        padding:
            22px
            14px;

        border-radius: 10px;
    }

    .product-page-maintenance .maintenance-strength-card {
        padding:
            28px
            24px;

        border-radius: 10px;
    }

    .product-page-maintenance .maintenance-solution-content h3 {
        font-size: 16px;
        line-height: 1.15;
        letter-spacing: 0;
    }

    .product-page-maintenance .maintenance-strength-card h3 {
        font-size: 21px;
        line-height: 1.15;
        letter-spacing: 0;
    }

    .product-page-maintenance .maintenance-solution-card--featured
    .maintenance-solution-content h3 {
        font-size: 16px;
    }

    .product-page-maintenance .maintenance-solution-list {
        gap: 12px;

        margin-top: 22px;
    }

    .product-page-maintenance .maintenance-solution-link {
        padding-top: 24px;

        font-size: 10px;
    }

    .product-page-maintenance .maintenance-solution-button {
        min-height: 38px;

        padding:
            0
            10px;

        font-size: 9px;
    }

    .product-page-maintenance .maintenance-intro-media img {
        height: auto;
        max-height: 330px;

        object-fit: contain;

        border-radius: 10px;
    }

    .product-page-maintenance .maintenance-intro-copy h2::after {
        width: 56px;

        margin-top: 20px;
    }
}

@media (max-width: 520px) {

    .product-page-maintenance .container {
        width:
            calc(100% - 28px);
    }

    .product-page-maintenance .product-page-hero-image {
        min-height: 310px;
    }

    .product-page-maintenance .product-page-hero-content {
        max-width: 350px;
    }

    .product-page-maintenance .product-page-hero h1 {
        font-size: 23px;
        line-height: 1.1;
    }

    .product-page-maintenance .product-page-actions {
        margin-top: 15px;
    }

    .product-page-maintenance .button-main {
        min-height: 36px;

        padding:
            0
            15px;

        font-size: 9.5px;
    }

    .product-page-maintenance .maintenance-importance-section,
    .product-page-maintenance .maintenance-solutions-section,
    .product-page-maintenance .maintenance-intro-section,
    .product-page-maintenance .maintenance-strengths-section {
        padding-top: 38px;
        padding-bottom: 42px;
    }

    .product-page-maintenance .maintenance-importance-heading h2,
    .product-page-maintenance .maintenance-solutions-heading h2,
    .product-page-maintenance .maintenance-intro-copy h2,
    .product-page-maintenance .maintenance-strengths-heading h2 {
        font-size: 25px;
    }

    .product-page-maintenance .maintenance-importance-text {
        margin-top: 20px;
    }

    .product-page-maintenance .maintenance-importance-text p,
    .product-page-maintenance .maintenance-importance-list p,
    .product-page-maintenance .maintenance-solutions-heading p,
    .product-page-maintenance .maintenance-solution-description,
    .product-page-maintenance .maintenance-solution-list li,
    .product-page-maintenance .maintenance-intro-copy p:not(.section-label),
    .product-page-maintenance .maintenance-strengths-heading p,
    .product-page-maintenance .maintenance-strength-card p {
        font-size: 12.5px;
    }

    .product-page-maintenance .maintenance-importance-list li {
        grid-template-columns:
            22px
            minmax(0, 1fr);

        gap: 10px;

        padding:
            16px
            0;
    }

    .product-page-maintenance .maintenance-importance-list svg {
        width: 18px;
        height: 18px;
    }

    .product-page-maintenance .maintenance-solutions-heading {
        margin-bottom: 28px;
    }

    .product-page-maintenance .maintenance-solution-card,
    .product-page-maintenance .maintenance-strength-card {
        padding:
            18px
            9px;
    }

    .product-page-maintenance .maintenance-solution-content h3,
    .product-page-maintenance .maintenance-strength-card h3 {
        font-size: 12px;
    }

    .product-page-maintenance .maintenance-solution-card--featured
    .maintenance-solution-content h3 {
        font-size: 12px;
    }

    .product-page-maintenance .maintenance-solution-badge {
        padding:
            7px
            12px;

        font-size: 8.5px;
    }

    .product-page-maintenance .maintenance-solution-list {
        grid-template-columns: 1fr;
        gap: 10px;

        margin-top: 18px;
    }

    .product-page-maintenance .maintenance-solution-link,
    .product-page-maintenance .maintenance-solution-button {
        width: 100%;

        justify-content: center;
    }

    .product-page-maintenance .maintenance-solution-button {
        min-height: 32px;

        padding:
            0
            8px;

        font-size: 7.5px;
    }

    .product-page-maintenance .maintenance-intro-copy p:not(.section-label) {
        margin-top: 16px;
    }

    .product-page-maintenance .maintenance-intro-media img {
        height: auto;
        max-height: 240px;

        object-fit: contain;
    }

    .product-page-maintenance .maintenance-strength-card-icon {
        width: 42px;
        height: 42px;
    }

    .product-page-maintenance .maintenance-strength-card-icon svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 390px) {

    .product-page-maintenance .product-page-hero-image {
        min-height: 282px;
    }

    .product-page-maintenance .product-page-hero-content {
        max-width: 300px;
    }

    .product-page-maintenance .product-page-hero h1 {
        font-size: 20px;
    }

    .product-page-maintenance .button-main {
        min-height: 32px;

        padding:
            0
            12px;

        font-size: 8.5px;
    }

    .product-page-maintenance .maintenance-importance-section,
    .product-page-maintenance .maintenance-solutions-section,
    .product-page-maintenance .maintenance-intro-section,
    .product-page-maintenance .maintenance-strengths-section {
        padding-top: 32px;
        padding-bottom: 34px;
    }

    .product-page-maintenance .maintenance-importance-heading h2,
    .product-page-maintenance .maintenance-solutions-heading h2,
    .product-page-maintenance .maintenance-intro-copy h2,
    .product-page-maintenance .maintenance-strengths-heading h2 {
        font-size: 22px;
    }

    .product-page-maintenance .maintenance-solution-content h3,
    .product-page-maintenance .maintenance-strength-card h3 {
        font-size: 10.5px;
    }

    .product-page-maintenance .maintenance-solution-card--featured
    .maintenance-solution-content h3 {
        font-size: 10.5px;
    }

    .product-page-maintenance .maintenance-importance-text p,
    .product-page-maintenance .maintenance-importance-list p,
    .product-page-maintenance .maintenance-solutions-heading p,
    .product-page-maintenance .maintenance-solution-description,
    .product-page-maintenance .maintenance-solution-list li,
    .product-page-maintenance .maintenance-intro-copy p:not(.section-label),
    .product-page-maintenance .maintenance-strengths-heading p,
    .product-page-maintenance .maintenance-strength-card p {
        font-size: 11.5px;
    }
}

/* =========================================================
   PAGE CONTACT - RESPONSIVE
========================================================= */

.product-page-contact,
.contact-form-wrapper {
    overflow-x: hidden;
    padding-top: 0;
}

.product-page-contact *,
.product-page-contact *::before,
.product-page-contact *::after,
.contact-form-wrapper *,
.contact-form-wrapper *::before,
.contact-form-wrapper *::after {
    box-sizing: border-box;
}

@media (max-width: 1100px) {

    .product-page-contact .container,
    .contact-form-wrapper {
        width:
            calc(100% - 56px);
    }

    .product-page-contact .product-page-hero {
        height: 380px;
        min-height: 380px;
    }

    .product-page-contact .product-page-hero-content h1 {
        font-size:
            clamp(42px, 7vw, 72px);
        line-height: 1.02;
        letter-spacing: 0;
    }

    .product-page-contact .product-page-actions {
        margin-top: 24px;
    }

    .product-page-contact .product-page-actions .button-main {
        min-height: 48px;

        padding:
            0
            24px;
    }

    .contact-main-section {
        padding-top: 72px;
        padding-bottom: 76px;
    }

    .contact-main {
        grid-template-columns: 1fr;
        gap: 44px;

        max-width: 860px;
    }

    .contact-main-info h2,
    .contact-form-wrapper .contact-form-heading h2 {
        font-size:
            clamp(34px, 5vw, 50px);
        line-height: 1.08;
        letter-spacing: 0;
    }

    .contact-main-intro,
    .contact-form-wrapper .contact-form-heading p {
        font-size: 15.5px;
        line-height: 1.65;
    }

    .contact-main-map iframe {
        height: 360px;
    }

    .contact-form-wrapper {
        margin-top: 0;
        margin-bottom: 76px;
    }

    .contact-form-wrapper .contact-main-form {
        max-width: 760px;

        padding:
            42px
            38px;
    }
}

@media (max-width: 820px) {

    .product-page-contact .container,
    .contact-form-wrapper {
        width:
            calc(100% - 40px);
    }

    .product-page-contact .product-page-hero {
        height: 330px;
        min-height: 330px;
    }

    .product-page-contact .product-page-hero::after {
        height: 110px;
    }

    .product-page-contact .product-page-hero-content h1 {
        font-size:
            clamp(34px, 9vw, 48px);
    }

    .product-page-contact .product-page-actions .button-main {
        min-height: 42px;

        padding:
            0
            20px;

        font-size: 12px;
    }

    .contact-main-section {
        padding-top: 54px;
        padding-bottom: 58px;
    }

    .contact-main {
        gap: 34px;
    }

    .contact-main-info .section-label,
    .contact-form-wrapper .contact-form-heading .section-label {
        font-size: 11px;
        line-height: 1.35;
    }

    .contact-main-info h2,
    .contact-form-wrapper .contact-form-heading h2 {
        font-size: 31px;
    }

    .contact-main-intro,
    .contact-info-item p,
    .contact-info-item a,
    .contact-form-wrapper .contact-form-heading p {
        font-size: 14px;
        line-height: 1.58;
    }

    .contact-info-item {
        grid-template-columns:
            40px
            minmax(0, 1fr);

        gap: 14px;

        padding:
            19px
            0;
    }

    .contact-info-icon {
        width: 36px;
        height: 36px;
    }

    .contact-info-icon svg {
        width: 18px;
        height: 18px;
    }

    .contact-social-links {
        gap: 16px;
    }

    .contact-social-links a svg,
    .contact-social-links a img {
        width: 30px !important;
        height: 30px !important;
    }

    .contact-main-map {
        border-radius: 10px;
    }

    .contact-main-map iframe {
        height: 300px;
    }

    .contact-map-route {
        min-height: 54px;

        padding:
            0
            18px;

        font-size: 12px;
    }

    .contact-form-wrapper {
        margin-bottom: 58px;
    }

    .contact-form-wrapper .contact-main-form {
        padding:
            32px
            26px;

        border-radius: 10px;
    }

    .contact-form-wrapper .contact-form-heading {
        margin-bottom: 30px;
    }

    .contact-form-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .contact-form {
        gap: 16px;
    }

    .contact-form-field label,
    .contact-form-field input,
    .contact-form-field select,
    .contact-form-field textarea {
        font-size: 14px;
    }

    .contact-form-field input,
    .contact-form-field select {
        height: 48px;
    }

    .contact-form-field textarea {
        min-height: 130px;
    }

    .contact-form-wrapper .contact-form-submit {
        min-height: 44px;

        padding:
            0
            20px;

        font-size: 12px;
    }
}

@media (max-width: 520px) {

    .product-page-contact .container,
    .contact-form-wrapper {
        width:
            calc(100% - 28px);
    }

    .product-page-contact .product-page-hero {
        height: 285px;
        min-height: 285px;
    }

    .product-page-contact .product-page-hero-content h1 {
        font-size: 30px;
        line-height: 1.06;
    }

    .product-page-contact .product-page-actions {
        margin-top: 15px;
    }

    .product-page-contact .product-page-actions .button-main {
        min-height: 36px;

        padding:
            0
            15px;

        font-size: 9.5px;
    }

    .contact-main-section {
        padding-top: 38px;
        padding-bottom: 42px;
    }

    .contact-main {
        gap: 28px;
    }

    .contact-main-info h2,
    .contact-form-wrapper .contact-form-heading h2 {
        font-size: 25px;
    }

    .contact-main-intro,
    .contact-info-item p,
    .contact-info-item a,
    .contact-form-wrapper .contact-form-heading p {
        font-size: 12.5px;
    }

    .contact-info-grid {
        margin-top: 20px;
    }

    .contact-info-item {
        grid-template-columns:
            34px
            minmax(0, 1fr);

        gap: 11px;

        padding:
            16px
            0;
    }

    .contact-info-icon {
        width: 30px;
        height: 30px;

        border-radius: 8px;
    }

    .contact-info-icon svg {
        width: 15px;
        height: 15px;
    }

    .contact-info-item > div:last-child > span {
        font-size: 10px;
    }

    .contact-social-links a svg,
    .contact-social-links a img {
        width: 26px !important;
        height: 26px !important;
    }

    .contact-main-map iframe {
        height: 230px;
    }

    .contact-map-route {
        min-height: 46px;

        padding:
            0
            14px;

        font-size: 10.5px;
    }

    .contact-form-wrapper {
        margin-bottom: 42px;
    }

    .contact-form-wrapper .contact-main-form {
        padding:
            24px
            16px;
    }

    .contact-form-wrapper .contact-form-heading {
        margin-bottom: 22px;
    }

    .contact-form-field {
        gap: 6px;
    }

    .contact-form-field label,
    .contact-form-field input,
    .contact-form-field select,
    .contact-form-field textarea {
        font-size: 12.5px;
    }

    .contact-form-field input,
    .contact-form-field select {
        height: 42px;

        padding:
            0
            12px;
    }

    .contact-form-field textarea {
        min-height: 112px;

        padding:
            11px
            12px;
    }

    .contact-form-wrapper .contact-form-submit {
        width: 100%;
        min-height: 38px;

        padding:
            0
            14px;

        font-size: 10px;
    }
}

@media (max-width: 390px) {

    .product-page-contact .product-page-hero {
        height: 260px;
        min-height: 260px;
    }

    .product-page-contact .product-page-hero-content h1 {
        font-size: 26px;
    }

    .product-page-contact .product-page-actions .button-main {
        min-height: 32px;

        padding:
            0
            12px;

        font-size: 8.5px;
    }

    .contact-main-section {
        padding-top: 32px;
        padding-bottom: 34px;
    }

    .contact-main-info h2,
    .contact-form-wrapper .contact-form-heading h2 {
        font-size: 22px;
    }

    .contact-main-intro,
    .contact-info-item p,
    .contact-info-item a,
    .contact-form-wrapper .contact-form-heading p {
        font-size: 11.5px;
    }

    .contact-main-map iframe {
        height: 205px;
    }
}

/* =========================================================
   MENU GLOBAL - RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .header {
        padding:
            6px
            0;
    }

    .header.scrolled {
        padding:
            5px
            0;
    }

    .header .container,
    .header-content {
        width:
            calc(100% - 40px);

        max-width: none;
    }

    .logo img,
    .header.scrolled .logo img {
        height: 66px;
    }

    .header-actions {
        display: none !important;
    }

    .menu-button {
        position: relative;
        z-index: 1002;

        width: 44px;
        height: 44px;

        margin-left: auto;

        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;

        border: 0;
        background: transparent;
        cursor: pointer;
    }

    .menu-button span {
        width: 24px;
        height: 2px;

        display: block;

        background: var(--white);

        transform-origin: center;
    }

    .menu-button.open span:first-child {
        transform:
            translateY(4px)
            rotate(45deg);
    }

    .menu-button.open span:last-child {
        transform:
            translateY(-4px)
            rotate(-45deg);
    }

    .nav {
        position: fixed !important;
        z-index: 1001;

        inset: 0;

        width: 100%;
        height: 100dvh;

        margin: 0 !important;
        padding:
            clamp(96px, 10vw, 128px)
            clamp(36px, 7vw, 86px)
            44px;

        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: clamp(15px, 2vw, 22px);

        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        pointer-events: none;

        background:
            linear-gradient(
                145deg,
                rgba(9, 12, 17, 0.98),
                rgba(12, 59, 115, 0.98)
            );

        opacity: 0;
        visibility: hidden;

        transform:
            translateX(100%);

        transition:
            transform 0.32s ease,
            opacity 0.32s ease,
            visibility 0.32s ease;
    }

    .nav.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform:
            translateX(0);
    }

    .nav > a,
    .nav-link,
    .nav .product-menu-toggle,
    .nav .nav-item > .nav-link,
    .header.scrolled .nav > a,
    .header.scrolled .nav-link,
    .header.scrolled .nav .product-menu-toggle,
    .header.scrolled .nav .nav-item > .nav-link {
        width: 100%;

        color: var(--white);

        font-size: 30px;
        font-weight: 650;
        line-height: 1.12;
        letter-spacing: 0;
    }

    .nav a::after {
        bottom: -5px;
    }

    .nav-item {
        width: 100%;

        display: block;
    }

    body.menu-open {
        overflow: hidden;
    }

    .nav-dropdown {
        position: static !important;

        width: 100%;

        max-height: 0;

        margin-top: 0;
        padding:
            0
            0
            0
            18px;

        display: grid;
        gap: 6px;

        overflow: hidden;

        border: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;

        opacity: 1;
        visibility: visible;

        transform: none !important;

        transition:
            max-height 0.28s ease,
            margin-top 0.28s ease;
    }

    .nav-item-dropdown.is-open .nav-dropdown {
        max-height: 360px;

        margin-top: 12px;
    }

    .nav-dropdown a,
    .header.scrolled .nav-dropdown a {
        width: 100%;

        padding:
            7px
            0;

        color:
            rgba(255, 255, 255, 0.76);

        background: transparent;

        font-size: 15px;
        font-weight: 550;
        line-height: 1.35;
        letter-spacing: 0;
    }

    .nav-dropdown a:hover {
        background: transparent;
        color: var(--white);
    }

    .nav-mobile-actions {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-top: 12px;
    }

    .nav-mobile-actions .contact-button {
        width: min(100%, 220px);
        flex: none;
        min-height: 48px;
        justify-content: center;
        padding: 0 22px;
        font-size: 22px !important;
        font-weight: 650 !important;
        letter-spacing: 0;
    }
}

@media (max-width: 700px) {

    .header .container,
    .header-content {
        width:
            calc(100% - 30px);
    }

    .logo img,
    .header.scrolled .logo img {
        height: 58px;
    }

    .nav {
        padding:
            84px
            30px
            34px;

        gap: 15px;
    }

    .nav > a,
    .nav-link,
    .nav .product-menu-toggle,
    .nav .nav-item > .nav-link,
    .header.scrolled .nav > a,
    .header.scrolled .nav-link,
    .header.scrolled .nav .product-menu-toggle,
    .header.scrolled .nav .nav-item > .nav-link {
        font-size: 30px;
    }

    .nav-dropdown a,
    .header.scrolled .nav-dropdown a {
        font-size: 13.5px;
    }

    .nav-mobile-actions {
        margin-top: 10px;
    }

    .nav-mobile-actions .contact-button {
        width: min(100%, 205px);
        min-height: 46px;
        font-size: 20px !important;
    }
}

@media (max-width: 425px) {

    .header {
        padding:
            4px
            0;
    }

    .header .container,
    .header-content {
        width:
            calc(100% - 24px);
    }

    .logo img,
    .header.scrolled .logo img {
        height: 50px;
    }

    .menu-button {
        width: 38px;
        height: 38px;
    }

    .menu-button span {
        width: 21px;
    }

    .nav {
        padding:
            76px
            24px
            28px;

        justify-content: flex-start;
        gap: 11px;
    }

    .nav > a,
    .nav-link,
    .nav .product-menu-toggle,
    .nav .nav-item > .nav-link,
    .header.scrolled .nav > a,
    .header.scrolled .nav-link,
    .header.scrolled .nav .product-menu-toggle,
    .header.scrolled .nav .nav-item > .nav-link {
        font-size: 30px;
        line-height: 1.1;
    }

    .nav-item-dropdown.is-open .nav-dropdown {
        max-height: 330px;

        margin-top: 8px;
    }

    .nav-dropdown {
        padding-left: 14px;
    }

    .nav-dropdown a,
    .header.scrolled .nav-dropdown a {
        padding:
            5px
            0;

        font-size: 11.5px;
        line-height: 1.25;
    }

    .nav-mobile-actions {
        gap: 9px;
        margin-top: 8px;
    }

    .nav-mobile-actions .contact-button {
        width: min(100%, 190px);
        min-height: 42px;
        padding: 0 18px;
        font-size: 18px !important;
    }
}

@media (max-width: 360px) {

    .logo img,
    .header.scrolled .logo img {
        height: 44px;
    }

    .nav {
        padding:
            68px
            20px
            24px;

        gap: 11px;
    }

    .nav > a,
    .nav-link,
    .nav .product-menu-toggle,
    .nav .nav-item > .nav-link,
    .header.scrolled .nav > a,
    .header.scrolled .nav-link,
    .header.scrolled .nav .product-menu-toggle,
    .header.scrolled .nav .nav-item > .nav-link {
        font-size: 30px;
    }

    .nav-dropdown a,
    .header.scrolled .nav-dropdown a {
        font-size: 10.5px;
    }

    .nav-mobile-actions .contact-button {
        width: min(100%, 174px);
        min-height: 38px;
        font-size: 16px !important;
    }
}

@media (min-width: 701px) and (max-width: 1100px) {

    .home-page .header .container,
    .home-page .header-content {
        width:
            min(
                calc(100% - 32px),
                var(--container)
            ) !important;
    }

    .home-page .logo img {
        height:
            clamp(52px, 7vw, 72px) !important;
    }

    .home-page .header.scrolled .logo img {
        height:
            clamp(48px, 6.3vw, 62px) !important;
    }

    .home-page .menu-button {
        display: none !important;
    }

    .home-page .header-actions {
        display: flex !important;
        gap:
            clamp(6px, 0.9vw, 10px) !important;
    }

    .home-page .contact-button {
        min-height:
            clamp(30px, 3.6vw, 38px) !important;
        padding:
            0
            clamp(10px, 1.45vw, 16px) !important;
        font-size:
            clamp(9px, 1vw, 12px) !important;
    }

    .home-page .nav {
        position: static !important;
        inset: auto !important;

        width: auto !important;
        height: auto !important;

        margin-right:
            clamp(10px, 1.8vw, 20px) !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap:
            clamp(8px, 1.5vw, 18px) !important;

        overflow: visible !important;
        pointer-events: auto !important;

        background: transparent !important;
        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
    }

    .home-page .nav > a,
    .home-page .nav-link,
    .home-page .header.scrolled .nav > a,
    .home-page .header.scrolled .nav-link {
        width: auto !important;

        color:
            rgba(255, 255, 255, 0.9) !important;

        font-size:
            clamp(9.5px, 1.15vw, 12px) !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
    }

    .home-page .nav a::after {
        display: block !important;
        bottom: -8px !important;
    }

    .home-page .nav-item {
        position: relative !important;

        width: auto !important;

        display: flex !important;
        align-items: center !important;
    }

    .home-page .nav-dropdown {
        position: absolute !important;

        top: calc(100% + 22px) !important;
        left: 50% !important;

        width: 315px !important;
        max-height: none !important;

        margin-top: 0 !important;
        padding: 10px !important;

        display: grid !important;
        gap: 4px !important;

        overflow: visible !important;

        border:
            1px solid
            rgba(255, 255, 255, 0.1) !important;

        background:
            rgba(9, 12, 17, 0.94) !important;

        opacity: 0 !important;
        visibility: hidden !important;

        transform:
            translate(-50%, 10px) !important;
    }

    .home-page .nav-item-dropdown:hover .nav-dropdown,
    .home-page .nav-item-dropdown:focus-within .nav-dropdown,
    .home-page .nav-item-dropdown.is-open .nav-dropdown {
        opacity: 1 !important;
        visibility: visible !important;

        transform:
            translate(-50%, 0) !important;
    }

    .home-page .nav-dropdown a,
    .home-page .header.scrolled .nav-dropdown a {
        width: auto !important;

        padding: 11px 12px !important;

        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .home-page .nav-mobile-actions {
        display: none !important;
    }
}

@media (min-width: 1101px) and (max-width: 1206px) {

    .product-page-coffee .coffee-franke-showcase-word {
        left: 50% !important;
        width:
            calc(100vw - 64px) !important;
        max-width:
            1120px !important;

        font-size:
            clamp(220px, 20vw, 250px) !important;

        transform:
            translateX(-50%) !important;
    }
}

@media (min-width: 701px) and (max-width: 1024px) {

    .product-page-coffee .coffee-franke-showcase {
        min-height:
            58vw !important;
    }

    .product-page-coffee .coffee-franke-machines {
        bottom:
            9.5vw !important;
    }

    .product-page-coffee .coffee-franke-showcase-machine {
        width:
            35.5vw !important;
    }

    .product-page-coffee .coffee-franke-machine-item--center .coffee-franke-showcase-machine {
        width:
            50.5vw !important;
    }

    .product-page-coffee .coffee-franke-machine-item--left {
        margin-right:
            -13.2vw !important;
    }

    .product-page-coffee .coffee-franke-machine-item--right {
        margin-left:
            -13.2vw !important;
    }
}

@media (min-width: 426px) and (max-width: 700px) {

    .product-page-coffee .coffee-franke-showcase {
        min-height:
            60vw !important;
    }

    .product-page-coffee .coffee-franke-machines {
        bottom:
            10vw !important;
    }

    .product-page-coffee .coffee-franke-showcase-machine {
        width:
            36.5vw !important;
    }

    .product-page-coffee .coffee-franke-machine-item--center .coffee-franke-showcase-machine {
        width:
            52vw !important;
    }

    .product-page-coffee .coffee-franke-machine-item--left {
        margin-right:
            -14vw !important;
    }

    .product-page-coffee .coffee-franke-machine-item--right {
        margin-left:
            -14vw !important;
    }
}

@media (max-width: 425px) {

    .product-page-coffee .coffee-franke-showcase {
        min-height:
            68vw !important;
    }

    .product-page-coffee .coffee-franke-machines {
        bottom:
            9vw !important;

        width:
            100vw !important;
    }

    .product-page-coffee .coffee-franke-showcase-machine {
        width:
            42vw !important;
    }

    .product-page-coffee .coffee-franke-machine-item--center .coffee-franke-showcase-machine {
        width:
            60vw !important;
    }

    .product-page-coffee .coffee-franke-machine-item--left,
    .product-page-coffee .coffee-franke-machine-item--right {
        transform:
            translateY(2.4vw)
            scale(0.9) !important;
    }

    .product-page-coffee .coffee-franke-machine-item--left {
        margin-right:
            -20.2vw !important;
    }

    .product-page-coffee .coffee-franke-machine-item--right {
        margin-left:
            -20.2vw !important;
    }

    .product-page-coffee .coffee-franke-machine-item span {
        font-size:
            2.7vw !important;
    }
}

@media (max-width: 360px) {

    .product-page-coffee .coffee-franke-showcase-machine {
        width:
            43.5vw !important;
    }

    .product-page-coffee .coffee-franke-machine-item--center .coffee-franke-showcase-machine {
        width:
            62vw !important;
    }

    .product-page-coffee .coffee-franke-machine-item--left {
        margin-right:
            -22.2vw !important;
    }

    .product-page-coffee .coffee-franke-machine-item--right {
        margin-left:
            -22.2vw !important;
    }
}

/* =========================================================
   FOOTER GLOBAL - RESPONSIVE
========================================================= */


/* =========================================================
   1100PX
========================================================= */

@media (max-width: 1100px) {

    .footer .container {
        width: calc(100% - 56px);
        max-width: none;
    }

    .footer-content {
        grid-template-columns:
            150px
            minmax(0, 1fr);

        gap: 34px;

        padding: 44px 0 30px;

        align-items: start;
    }

    .footer-logo img {
        height: 100px;
    }

    .footer-columns {
        grid-template-columns:
            minmax(180px, 1fr)
            minmax(130px, 0.7fr)
            minmax(160px, 0.8fr);

        gap: 26px;

        align-items: start;
    }

    .footer-column h2 {
        margin-bottom: 12px;

        font-size: 17px;
    }

    .footer-column p,
    .footer-column a {
        font-size: 14px;
        line-height: 1.55;
    }

    .footer-contact-button {
        min-height: 44px;
        height: 44px;

        padding: 0 18px;

        font-size: 11px !important;
    }
}


/* =========================================================
   820PX
========================================================= */

@media (max-width: 820px) {

    .footer .container,
    .home-page .footer .container {
        width: calc(100% - 40px);
    }

    .footer-content,
    .home-page .footer-content {
        display: grid;

        grid-template-columns: 1fr;

        gap: 22px;

        padding: 30px 0 24px;

        text-align: center;
    }


    /* LOGO */

    .footer-brand,
    .home-page .footer-brand {
        width: 100%;

        display: flex;

        justify-content: center;
        align-items: center;
    }

    .footer-logo,
    .home-page .footer-logo {
        display: flex;

        justify-content: center;
    }

    .footer-logo img,
    .home-page .footer-logo img {
        width: auto;
        height: 66px;
    }


    /* COLONNES */

    .footer-columns,
    .home-page .footer-columns {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 20px;

        align-items: start;
    }


    /* TEXTES */

    .footer-column h2,
    .home-page .footer-column h2 {
        margin-bottom: 9px;

        font-size: 15px;
    }

    .footer-column p,
    .footer-column a,
    .home-page .footer-column p,
    .home-page .footer-column a {
        width: auto;

        font-size: 12px;
        line-height: 1.5;
    }


    /* RÉSEAUX */

    .footer-social-links,
    .home-page .footer-social-links {
        justify-content: center;

        gap: 14px;
    }

    .footer-social-links a img,
    .footer-social-links a svg,
    .home-page .footer-social-links a img,
    .home-page .footer-social-links a svg {
        width: 20px !important;
        height: 20px !important;
    }


    /* BOUTON */

    .footer-cta,
    .home-page .footer-cta {
        display: flex;

        justify-content: center;

        justify-self: center;
    }

    .footer-contact-button,
    .home-page .footer-contact-button {
        min-height: 38px;
        height: 38px;

        padding: 0 16px;

        font-size: 9.5px !important;
    }
}


/* =========================================================
   620PX
   2 COLONNES
========================================================= */

@media (max-width: 620px) {

    .footer,
    .home-page .footer {
        padding-top: 0 !important;
    }

    .footer .container,
    .home-page .footer .container {
        width: calc(100% - 28px);
    }


    /* CONTENU */

    .footer-content,
    .home-page .footer-content {
        display: grid;

        grid-template-columns: 1fr;

        width: 100%;

        gap: 12px;

        padding:
            16px
            14px
            14px !important;

        box-sizing: border-box;

        text-align: left;
    }


    /* LOGO */

    .footer-brand,
    .home-page .footer-brand {
        width: 100%;

        display: flex;

        justify-content: flex-start !important;
        align-items: center;

        margin: 0;
        padding: 0;
    }

    .footer-logo,
    .home-page .footer-logo {
        display: flex;

        justify-content: flex-start !important;

        margin: 0;
        padding: 0;
    }

    .footer-logo img,
    .home-page .footer-logo img {
        width: 72px !important;
        height: auto !important;

        max-width: 72px !important;

        margin: 0;
    }


    /* =====================================================
       2 COLONNES
    ====================================================== */

    .footer-columns,
    .home-page .footer-columns {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        grid-template-rows:
            auto
            auto;

        column-gap: 24px;
        row-gap: 10px;

        align-items: start;

        margin: 0 !important;

        text-align: left !important;
    }


    /* INFORMATIONS */

    .footer-info,
    .home-page .footer-info {
        grid-column: 1;
        grid-row: 1 / 3;

        width: 100%;

        margin: 0 !important;

        text-align: left !important;
    }


    /* NOUS SUIVRE */

    .footer-social,
    .home-page .footer-social {
        grid-column: 2;
        grid-row: 1;

        width: 100%;

        margin: 0 !important;

        text-align: left !important;
    }


    /* TITRES */

    .footer-column h2,
    .home-page .footer-column h2 {
        margin:
            0
            0
            5px !important;

        font-size: 12px !important;
        line-height: 1.2;
    }


    /* TEXTES */

    .footer-column p,
    .footer-column a,
    .home-page .footer-column p,
    .home-page .footer-column a {
        width: auto;

        font-size: 9px !important;
        line-height: 1.4;
    }

    .footer-info p,
    .home-page .footer-info p {
        margin: 0;
    }

    .footer-info p + p,
    .home-page .footer-info p + p {
        margin-top: 5px;
    }


    /* RÉSEAUX */

    .footer-social-links,
    .home-page .footer-social-links {
        display: flex;

        justify-content: flex-start !important;
        align-items: center;

        gap: 8px;

        margin-top: 2px;
    }

    .footer-social-links a,
    .home-page .footer-social-links a {
        width: auto;

        flex: 0 0 auto;
    }

    .footer-social-links a img,
    .footer-social-links a svg,
    .home-page .footer-social-links a img,
    .home-page .footer-social-links a svg {
        width: 16px !important;
        height: 16px !important;
    }


    /* =====================================================
       BOUTON SOUS "NOUS SUIVRE"
    ====================================================== */

    .footer-cta,
    .home-page .footer-cta {
        grid-column: 2 !important;
        grid-row: 2 !important;

        width: auto !important;

        display: flex !important;

        justify-content: flex-start !important;
        align-items: flex-start !important;

        justify-self: start !important;

        margin:
            2px
            0
            0 !important;
    }

    .footer-contact-button,
    .home-page .footer-contact-button {
        width: auto !important;

        min-width: 0 !important;
        max-width: none !important;

        min-height: 27px !important;
        height: 27px !important;

        padding:
            0
            12px !important;

        border-radius: 5px;

        font-size: 7px !important;
        line-height: 1;
    }


    /* BAS */

    .footer-bottom,
    .home-page .footer-bottom {
        display: flex;

        justify-content: center;
        align-items: center;

        flex-wrap: wrap;

        gap: 5px 12px;

        padding:
            8px
            14px
            10px;

        box-sizing: border-box;

        text-align: center;
    }

    .footer-bottom p,
    .footer-bottom a,
    .home-page .footer-bottom p,
    .home-page .footer-bottom a {
        width: auto;

        margin: 0;

        font-size: 8px;
        line-height: 1.3;

        text-align: center;
    }
}


/* =========================================================
   425PX
   2 COLONNES
========================================================= */

@media (max-width: 425px) {

    .footer,
    .home-page .footer {
        padding-top: 0 !important;
    }

    .footer .container,
    .home-page .footer .container {
        width: calc(100% - 24px);
    }


    /* CONTENU */

    .footer-content,
    .home-page .footer-content {
        display: grid;

        grid-template-columns: 1fr;

        width: 100%;

        gap: 9px !important;

        padding:
            12px
            16px
            10px !important;

        box-sizing: border-box;

        text-align: left;
    }


    /* =====================================================
       LOGO
    ====================================================== */

    .footer-brand,
    .home-page .footer-brand {
        width: 100%;

        display: flex;

        justify-content: flex-start !important;
        align-items: center;

        margin: 0 !important;
        padding: 0 !important;
    }

    .footer-logo,
    .home-page .footer-logo {
        display: flex;

        justify-content: flex-start !important;
        align-items: center;

        margin: 0 !important;
        padding: 0 !important;
    }

    .footer-logo img,
    .home-page .footer-logo img {
        width: 65px !important;
        height: auto !important;

        max-width: 65px !important;

        margin: 0 !important;
    }


    /* =====================================================
       2 COLONNES
    ====================================================== */

    .footer-columns,
    .home-page .footer-columns {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        grid-template-rows:
            auto
            auto;

        column-gap: 24px;
        row-gap: 9px;

        align-items: start;

        margin: 0 !important;

        text-align: left !important;
    }


    /* =====================================================
       COLONNE GAUCHE
       INFORMATIONS
    ====================================================== */

    .footer-info,
    .home-page .footer-info {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;

        width: 100%;

        margin: 0 !important;

        text-align: left !important;
    }


    /* =====================================================
       COLONNE DROITE
       NOUS SUIVRE
    ====================================================== */

    .footer-social,
    .home-page .footer-social {
        grid-column: 2 !important;
        grid-row: 1 !important;

        width: 100%;

        margin: 0 !important;

        text-align: left !important;
    }


    /* TITRES */

    .footer-column h2,
    .home-page .footer-column h2 {
        margin:
            0
            0
            5px !important;

        font-size: 10px !important;
        line-height: 1.2;
    }


    /* TEXTES */

    .footer-column p,
    .footer-column a,
    .home-page .footer-column p,
    .home-page .footer-column a {
        width: auto;

        font-size: 7.5px !important;
        line-height: 1.35;
    }

    .footer-info p,
    .home-page .footer-info p {
        margin: 0;
    }

    .footer-info p + p,
    .home-page .footer-info p + p {
        margin-top: 4px;
    }


    /* =====================================================
       RÉSEAUX
    ====================================================== */

    .footer-social-links,
    .home-page .footer-social-links {
        display: flex;

        justify-content: flex-start !important;
        align-items: center;

        gap: 7px;

        margin-top: 2px;
    }

    .footer-social-links a,
    .home-page .footer-social-links a {
        width: auto;

        flex: 0 0 auto;
    }

    .footer-social-links a img,
    .footer-social-links a svg,
    .home-page .footer-social-links a img,
    .home-page .footer-social-links a svg {
        width: 14px !important;
        height: 14px !important;
    }


    /* =====================================================
       BOUTON SOUS "NOUS SUIVRE"
    ====================================================== */

    .footer-cta,
    .home-page .footer-cta {
        grid-column: 2 !important;
        grid-row: 2 !important;

        width: auto !important;

        display: flex !important;

        justify-content: flex-start !important;
        align-items: flex-start !important;

        justify-self: start !important;

        margin:
            2px
            0
            0 !important;
    }

    .footer-contact-button,
    .home-page .footer-contact-button {
        width: auto !important;

        min-width: 0 !important;
        max-width: none !important;

        min-height: 24px !important;
        height: 24px !important;

        padding:
            0
            10px !important;

        border-radius: 5px;

        font-size: 6.5px !important;
        line-height: 1;
    }


    /* =====================================================
       BAS DU FOOTER
    ====================================================== */

    .footer-bottom,
    .home-page .footer-bottom {
        display: flex;

        flex-direction: column;

        justify-content: center;
        align-items: center;

        gap: 3px;

        margin-top: 3px;

        padding:
            6px
            16px
            7px !important;

        box-sizing: border-box;

        text-align: center;
    }

    .footer-bottom p,
    .footer-bottom a,
    .home-page .footer-bottom p,
    .home-page .footer-bottom a {
        width: auto !important;

        margin: 0 !important;

        font-size: 6.5px !important;
        line-height: 1.3;

        text-align: center;
    }
}


/* =========================================================
   360PX
========================================================= */

@media (max-width: 360px) {

    .footer .container,
    .home-page .footer .container {
        width: calc(100% - 20px);
    }

    .footer-content,
    .home-page .footer-content {
        padding:
            11px
            14px
            9px !important;
    }


    /* LOGO */

    .footer-logo img,
    .home-page .footer-logo img {
        width: 58px !important;
        height: auto !important;

        max-width: 58px !important;
    }


    /* COLONNES */

    .footer-columns,
    .home-page .footer-columns {
        column-gap: 18px;
        row-gap: 8px;
    }


    /* TITRES */

    .footer-column h2,
    .home-page .footer-column h2 {
        font-size: 9.5px !important;
    }


    /* TEXTES */

    .footer-column p,
    .footer-column a,
    .home-page .footer-column p,
    .home-page .footer-column a {
        font-size: 7px !important;
    }


    /* RÉSEAUX */

    .footer-social-links a img,
    .footer-social-links a svg,
    .home-page .footer-social-links a img,
    .home-page .footer-social-links a svg {
        width: 13px !important;
        height: 13px !important;
    }


    /* BOUTON */

    .footer-contact-button,
    .home-page .footer-contact-button {
        min-height: 22px !important;
        height: 22px !important;

        padding:
            0
            9px !important;

        font-size: 6px !important;
    }
}

/* =========================================================
   FOOTER GLOBAL - AJUSTEMENT FINAL RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .footer .container,
    .home-page .footer .container {
        width:
            calc(100% - 44px) !important;
        max-width: none !important;
    }

    .footer-content,
    .home-page .footer-content {
        display: grid !important;
        grid-template-columns:
            140px
            minmax(0, 1fr) !important;
        gap:
            clamp(24px, 4vw, 44px) !important;
        align-items: start !important;

        padding:
            clamp(34px, 4.5vw, 48px)
            0
            clamp(26px, 3vw, 34px) !important;

        text-align: left !important;
    }

    .footer-logo img,
    .home-page .footer-logo img {
        width: auto !important;
        height:
            clamp(84px, 10vw, 118px) !important;
        max-width: none !important;
    }

    .footer-columns,
    .home-page .footer-columns {
        display: grid !important;
        grid-template-columns:
            minmax(190px, 1.2fr)
            minmax(120px, 0.7fr)
            minmax(150px, 0.8fr) !important;
        gap:
            clamp(20px, 3vw, 34px) !important;
        align-items: start !important;

        text-align: left !important;
    }

    .footer-column h2,
    .home-page .footer-column h2 {
        margin:
            0
            0
            12px !important;

        font-size:
            clamp(15px, 1.7vw, 18px) !important;
        line-height: 1.2 !important;
    }

    .footer-column p,
    .footer-column a,
    .home-page .footer-column p,
    .home-page .footer-column a {
        font-size:
            clamp(12px, 1.35vw, 14px) !important;
        line-height: 1.5 !important;
    }

    .footer-social-links,
    .home-page .footer-social-links {
        justify-content: flex-start !important;
        gap:
            clamp(10px, 1.4vw, 16px) !important;
    }

    .footer-social-links a img,
    .footer-social-links a svg,
    .home-page .footer-social-links a img,
    .home-page .footer-social-links a svg {
        width:
            clamp(18px, 2vw, 24px) !important;
        height:
            clamp(18px, 2vw, 24px) !important;
    }

    .footer-cta,
    .home-page .footer-cta {
        justify-content: flex-start !important;
        justify-self: start !important;
    }

    .footer-contact-button,
    .home-page .footer-contact-button {
        min-height:
            clamp(36px, 4vw, 44px) !important;
        height:
            clamp(36px, 4vw, 44px) !important;
        padding:
            0
            clamp(14px, 2vw, 22px) !important;

        font-size:
            clamp(9px, 1.1vw, 12px) !important;
    }
}

@media (max-width: 820px) {

    .footer .container,
    .home-page .footer .container {
        width:
            calc(100% - 32px) !important;
    }

    .footer-content,
    .home-page .footer-content {
        grid-template-columns: 1fr !important;
        gap: 22px !important;

        padding:
            30px
            0
            22px !important;
    }

    .footer-brand,
    .home-page .footer-brand,
    .footer-logo,
    .home-page .footer-logo {
        justify-content: center !important;
    }

    .footer-logo img,
    .home-page .footer-logo img {
        height: 82px !important;
    }

    .footer-columns,
    .home-page .footer-columns {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(0, 0.85fr) !important;
        gap:
            22px !important;
    }

    .footer-info,
    .home-page .footer-info {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
    }

    .footer-social,
    .home-page .footer-social {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .footer-cta,
    .home-page .footer-cta {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }
}

@media (max-width: 425px) {

    .footer .container,
    .home-page .footer .container {
        width:
            calc(100% - 22px) !important;
    }

    .footer-content,
    .home-page .footer-content {
        gap: 16px !important;

        padding:
            22px
            0
            14px !important;
    }

    .footer-logo img,
    .home-page .footer-logo img {
        height: 66px !important;
    }

    .footer-columns,
    .home-page .footer-columns {
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(0, 0.92fr) !important;
        column-gap: 18px !important;
        row-gap: 12px !important;
    }

    .footer-column h2,
    .home-page .footer-column h2 {
        margin-bottom: 7px !important;

        font-size: 12px !important;
    }

    .footer-column p,
    .footer-column a,
    .home-page .footer-column p,
    .home-page .footer-column a {
        font-size: 9.5px !important;
        line-height: 1.42 !important;
    }

    .footer-info p + p,
    .home-page .footer-info p + p {
        margin-top: 7px !important;
    }

    .footer-social-links a img,
    .footer-social-links a svg,
    .home-page .footer-social-links a img,
    .home-page .footer-social-links a svg {
        width: 17px !important;
        height: 17px !important;
    }

    .footer-contact-button,
    .home-page .footer-contact-button {
        min-height: 30px !important;
        height: 30px !important;
        padding:
            0
            12px !important;

        font-size: 7.5px !important;
    }

    .footer-bottom,
    .home-page .footer-bottom {
        padding:
            10px
            0
            12px !important;

        gap: 4px !important;
    }

    .footer-bottom p,
    .footer-bottom a,
    .home-page .footer-bottom p,
    .home-page .footer-bottom a {
        font-size: 8px !important;
        line-height: 1.35 !important;
    }
}

@media (max-width: 360px) {

    .footer-columns,
    .home-page .footer-columns {
        column-gap: 14px !important;
    }

    .footer-column h2,
    .home-page .footer-column h2 {
        font-size: 11px !important;
    }

    .footer-column p,
    .footer-column a,
    .home-page .footer-column p,
    .home-page .footer-column a {
        font-size: 8.6px !important;
    }

    .footer-contact-button,
    .home-page .footer-contact-button {
        min-height: 28px !important;
        height: 28px !important;

        font-size: 7px !important;
    }
}

/* =========================================================
   HEROS PRODUITS - ALIGNES SUR BOULANGERIE
========================================================= */

@media (max-width: 1024px) {

    .product-page-catering .product-page-hero-image,
    .product-page-vending .product-page-hero-image,
    .product-page-coffee .product-page-hero-image,
    .product-page-used .product-page-hero-image {
        display: flex !important;
        align-items: center !important;

        min-height: 500px !important;
    }

    .product-page-catering .product-page-hero-bg,
    .product-page-catering .product-page-hero-overlay,
    .product-page-vending .product-page-hero-bg,
    .product-page-vending .product-page-hero-overlay,
    .product-page-coffee .product-page-hero-bg,
    .product-page-coffee .product-page-hero-overlay,
    .product-page-used .product-page-hero-bg,
    .product-page-used .product-page-hero-overlay {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        max-width: none !important;
    }

    .product-page-catering .product-page-hero-image > .container,
    .product-page-vending .product-page-hero-image > .container,
    .product-page-coffee .product-page-hero-image > .container,
    .product-page-used .product-page-hero-image > .container {
        position: relative !important;
        z-index: 2;

        width:
            calc(100% - 40px) !important;

        max-width: 1380px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .product-page-catering .product-page-hero-content,
    .product-page-vending .product-page-hero-content,
    .product-page-coffee .product-page-hero-content,
    .product-page-used .product-page-hero-content {
        width: 100% !important;
        max-width: 700px !important;

        margin:
            0
            auto !important;

        text-align: center !important;

        transform:
            translateY(22px) !important;
    }

    .product-page-catering h1,
    .product-page-vending h1,
    .product-page-coffee h1,
    .product-page-used h1 {
        width: 100% !important;
        max-width: 700px !important;

        margin:
            0
            auto !important;

        font-size:
            clamp(
                35px,
                5.8vw,
                45px
            ) !important;

        line-height: 1.06 !important;
        letter-spacing: 0 !important;
    }

    .product-page-catering .product-page-actions,
    .product-page-vending .product-page-actions,
    .product-page-coffee .product-page-actions,
    .product-page-used .product-page-actions {
        justify-content: center !important;

        margin-top: 24px !important;
    }

    .product-page-catering .product-page-actions .button,
    .product-page-vending .product-page-actions .button,
    .product-page-coffee .product-page-actions .button,
    .product-page-used .product-page-actions .button {
        min-height: 44px !important;

        padding:
            0
            18px !important;

        font-size: 11px !important;
    }
}

@media (max-width: 700px) {

    .product-page-catering .product-page-hero-image,
    .product-page-vending .product-page-hero-image,
    .product-page-coffee .product-page-hero-image,
    .product-page-used .product-page-hero-image {
        min-height: 460px !important;
    }

    .product-page-catering .product-page-hero-image > .container,
    .product-page-vending .product-page-hero-image > .container,
    .product-page-coffee .product-page-hero-image > .container,
    .product-page-used .product-page-hero-image > .container {
        width:
            calc(100% - 32px) !important;
    }

    .product-page-catering .product-page-hero-content,
    .product-page-vending .product-page-hero-content,
    .product-page-coffee .product-page-hero-content,
    .product-page-used .product-page-hero-content {
        transform:
            translateY(16px) !important;
    }

    .product-page-catering h1,
    .product-page-vending h1,
    .product-page-coffee h1,
    .product-page-used h1 {
        font-size:
            clamp(
                30px,
                6.5vw,
                38px
            ) !important;
    }
}

@media (max-width: 425px) {

    .product-page-catering .product-page-hero-image,
    .product-page-vending .product-page-hero-image,
    .product-page-coffee .product-page-hero-image,
    .product-page-used .product-page-hero-image {
        min-height: 420px !important;
    }

    .product-page-vending .product-page-hero-bg,
    .product-page-coffee .product-page-hero-bg,
    .product-page-used .product-page-hero-bg {
        background-position:
            center
            center !important;
    }

    .product-page-catering .product-page-hero-image > .container,
    .product-page-vending .product-page-hero-image > .container,
    .product-page-coffee .product-page-hero-image > .container,
    .product-page-used .product-page-hero-image > .container {
        width:
            calc(100% - 28px) !important;
    }

    .product-page-catering .product-page-hero-content,
    .product-page-vending .product-page-hero-content,
    .product-page-coffee .product-page-hero-content,
    .product-page-used .product-page-hero-content {
        width: 100% !important;
        max-width: none !important;

        transform:
            translateY(12px) !important;
    }

    .product-page-catering h1,
    .product-page-vending h1,
    .product-page-coffee h1,
    .product-page-used h1 {
        width: 100% !important;
        max-width: 390px !important;

        font-size: 28px !important;
        line-height: 1.05 !important;
    }

    .product-page-catering .product-page-actions,
    .product-page-vending .product-page-actions,
    .product-page-coffee .product-page-actions,
    .product-page-used .product-page-actions {
        margin-top: 18px !important;
    }

    .product-page-catering .product-page-actions .button,
    .product-page-vending .product-page-actions .button,
    .product-page-coffee .product-page-actions .button,
    .product-page-used .product-page-actions .button {
        min-height: 40px !important;

        padding:
            0
            14px !important;

        font-size: 10px !important;
    }
}

@media (min-width: 607px) and (max-width: 1059px) {

    .product-page-vending .vending-intro,
    .product-page-vending .vending-showcase,
    .product-page-coffee .coffee-features,
    .product-page-coffee .coffee-feature-flow,
    .product-page-coffee .coffee-contact-process,
    .product-page-coffee .coffee-contact-grid {
        width:
            min(
                calc(100% - 56px),
                1400px
            ) !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .product-page-vending .vending-showcase {
        max-width: 940px !important;
    }

    .product-page-vending .vending-callout-right {
        width: 165px !important;
        max-width: 165px !important;
        grid-template-columns:
            28px
            minmax(0, 1fr) !important;
        gap:
            1px
            7px !important;
    }

    .product-page-vending .vending-callout-right > span {
        width: 28px !important;
        height: 28px !important;
    }

    .product-page-vending .vending-callout-right > span svg {
        width: 15px !important;
        height: 15px !important;
    }

    .product-page-vending .vending-callout-right strong {
        font-size: 10px !important;
        line-height: 1.15 !important;
    }

    .product-page-vending .vending-callout-right p {
        font-size: 8px !important;
        line-height: 1.28 !important;
    }

    .product-page-vending .vending-callout-right::before {
        width: 82px !important;
    }

    .product-page-vending .vending-callout-right::after {
        width: 5px !important;
        height: 5px !important;
        top: calc(50% - 2.5px) !important;
        right: calc(100% + var(--vending-line-gap) + 82px) !important;
    }

    .product-page-coffee .coffee-feature-flow,
    .product-page-coffee .coffee-contact-grid {
        max-width: 760px !important;
    }

    .product-page-coffee .coffee-feature-flow article,
    .product-page-coffee .coffee-feature-flow article + article {
        grid-template-columns:
            minmax(0, 1fr)
            92px
            minmax(0, 1fr) !important;
        min-height: 142px !important;
    }

    .product-page-coffee .coffee-feature-flow article > div,
    .product-page-coffee .coffee-feature-flow article:nth-child(odd) > div,
    .product-page-coffee .coffee-feature-flow article:nth-child(even) > div {
        width: min(100%, 270px) !important;
        max-width: 270px !important;
        min-height: 0 !important;
        border-radius: 32px !important;
        margin-left: 22px !important;
        margin-right: 22px !important;
    }

    .product-page-coffee .coffee-feature-flow article > div,
    .product-page-coffee .coffee-contact-grid article {
        padding:
            20px
            18px !important;
    }

    .product-page-coffee .coffee-feature-flow h3,
    .product-page-coffee .coffee-contact-grid h3 {
        font-size: 13px !important;
        line-height: 1.16 !important;
    }

    .product-page-coffee .coffee-feature-flow p,
    .product-page-coffee .coffee-contact-grid p {
        font-size: 9px !important;
        line-height: 1.36 !important;
    }

    .product-page-coffee .coffee-feature-flow article strong,
    .product-page-coffee .coffee-feature-flow article:nth-child(odd) strong,
    .product-page-coffee .coffee-feature-flow article:nth-child(even) strong {
        width: 42px !important;
        height: 42px !important;
        font-size: 14px !important;
    }

    .product-page-coffee .coffee-feature-flow article:nth-child(odd) strong {
        right: calc(50% + 22px) !important;
        transform: translate(50%, -50%) !important;
    }

    .product-page-coffee .coffee-feature-flow article:nth-child(even) strong {
        left: calc(50% + 22px) !important;
        transform: translate(-50%, -50%) !important;
    }

    .product-page-coffee .coffee-process-number {
        width: 42px !important;
        height: 42px !important;
        font-size: 14px !important;
    }

    .product-page-coffee .coffee-feature-flow article::before {
        width: 8px !important;
        height: 8px !important;
        left: 50% !important;
        box-shadow:
            0 0 0 5px #090c11 !important;
    }

    .product-page-coffee .coffee-feature-flow article::after {
        width: 20px !important;
    }

    .product-page-coffee .coffee-feature-flow article:nth-child(odd)::after {
        margin-left: -20px !important;
    }

    .product-page-coffee .coffee-feature-flow article:nth-child(even)::after {
        margin-left: 0 !important;
    }

    .product-page-coffee .coffee-feature-flow article:nth-of-type(1)::before,
    .product-page-coffee .coffee-feature-flow article:nth-of-type(3)::before {
        left: calc(50% + 8px) !important;
    }

    .product-page-coffee .coffee-feature-flow article:nth-of-type(1) strong,
    .product-page-coffee .coffee-feature-flow article:nth-of-type(3) strong {
        left: calc(50% + 36px) !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
    }

    .product-page-coffee .coffee-feature-flow article:nth-of-type(1)::after,
    .product-page-coffee .coffee-feature-flow article:nth-of-type(3)::after {
        left: calc(50% + 8px) !important;
        width: 28px !important;
        margin-left: 0 !important;
        background:
            linear-gradient(
                90deg,
                rgba(139, 185, 236, 0.42),
                rgba(139, 185, 236, 0.05)
            ) !important;
    }

    .product-page-coffee .coffee-feature-flow article:nth-of-type(2)::before {
        left: calc(50% - 4px) !important;
    }

    .product-page-coffee .coffee-feature-flow article:nth-of-type(2) strong {
        left: auto !important;
        right: calc(50% + 36px) !important;
        transform: translate(50%, -50%) !important;
    }

    .product-page-coffee .coffee-feature-flow article:nth-of-type(2)::after {
        left: calc(50% - 36px) !important;
        width: 32px !important;
        margin-left: 0 !important;
        background:
            linear-gradient(
                90deg,
                rgba(139, 185, 236, 0.05),
                rgba(139, 185, 236, 0.42)
            ) !important;
    }
}

@media (min-width: 607px) and (max-width: 720px) {

    .product-page-coffee .coffee-feature-flow article,
    .product-page-coffee .coffee-feature-flow article + article {
        grid-template-columns:
            minmax(0, 1fr)
            70px
            minmax(0, 1fr) !important;
        min-height: 126px !important;
    }

    .product-page-coffee .coffee-feature-flow article > div,
    .product-page-coffee .coffee-feature-flow article:nth-child(odd) > div,
    .product-page-coffee .coffee-feature-flow article:nth-child(even) > div {
        width: min(100%, 220px) !important;
        max-width: 220px !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
        padding:
            16px
            14px !important;
        border-radius: 26px !important;
    }

    .product-page-coffee .coffee-feature-flow article strong,
    .product-page-coffee .coffee-feature-flow article:nth-child(odd) strong,
    .product-page-coffee .coffee-feature-flow article:nth-child(even) strong,
    .product-page-coffee .coffee-process-number {
        width: 34px !important;
        height: 34px !important;
        font-size: 12px !important;
    }

    .product-page-coffee .coffee-feature-flow article:nth-child(odd) strong {
        right: calc(50% + 14px) !important;
    }

    .product-page-coffee .coffee-feature-flow article:nth-child(even) strong {
        left: calc(50% + 14px) !important;
    }

    .product-page-coffee .coffee-feature-flow article::before {
        width: 6px !important;
        height: 6px !important;
        left: 50% !important;
        box-shadow:
            0 0 0 4px #090c11 !important;
    }

    .product-page-coffee .coffee-feature-flow article::after {
        width: 14px !important;
    }

    .product-page-coffee .coffee-feature-flow article:nth-child(odd)::after {
        margin-left: -14px !important;
    }

    .product-page-coffee .coffee-feature-flow article:nth-child(even)::after {
        margin-left: 0 !important;
    }

    .product-page-coffee .coffee-feature-flow article:nth-of-type(1)::before,
    .product-page-coffee .coffee-feature-flow article:nth-of-type(3)::before {
        left: calc(50% + 6px) !important;
    }

    .product-page-coffee .coffee-feature-flow article:nth-of-type(1) strong,
    .product-page-coffee .coffee-feature-flow article:nth-of-type(3) strong {
        left: calc(50% + 27px) !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
    }

    .product-page-coffee .coffee-feature-flow article:nth-of-type(1)::after,
    .product-page-coffee .coffee-feature-flow article:nth-of-type(3)::after {
        left: calc(50% + 6px) !important;
        width: 21px !important;
        margin-left: 0 !important;
        background:
            linear-gradient(
                90deg,
                rgba(139, 185, 236, 0.42),
                rgba(139, 185, 236, 0.05)
            ) !important;
    }

    .product-page-coffee .coffee-feature-flow article:nth-of-type(2)::before {
        left: calc(50% - 3px) !important;
    }

    .product-page-coffee .coffee-feature-flow article:nth-of-type(2) strong {
        left: auto !important;
        right: calc(50% + 27px) !important;
        transform: translate(50%, -50%) !important;
    }

    .product-page-coffee .coffee-feature-flow article:nth-of-type(2)::after {
        left: calc(50% - 27px) !important;
        width: 24px !important;
        margin-left: 0 !important;
        background:
            linear-gradient(
                90deg,
                rgba(139, 185, 236, 0.05),
                rgba(139, 185, 236, 0.42)
            ) !important;
    }

    .product-page-coffee .coffee-feature-flow h3 {
        font-size: 11px !important;
    }

    .product-page-coffee .coffee-feature-flow p {
        font-size: 8px !important;
        line-height: 1.3 !important;
    }
}

@media (min-width: 607px) and (max-width: 720px) {

    .product-page-vending .vending-intro,
    .product-page-vending .vending-showcase,
    .product-page-coffee .coffee-features,
    .product-page-coffee .coffee-feature-flow,
    .product-page-coffee .coffee-contact-process,
    .product-page-coffee .coffee-contact-grid {
        width:
            min(
                calc(100% - 40px),
                1400px
            ) !important;
    }
}

/* NOS REALISATIONS */
.product-page-realisations .realisation-section {
    padding: clamp(56px, 7vw, 100px) 0;
    background: var(--black);
    scroll-margin-top: 120px;
}

.product-page-realisations .realisation-section-reverse {
    background: var(--dark);
}

.product-page-realisations .realisation-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}

.product-page-realisations .realisation-copy h2 {
    margin: 0 0 28px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(30px, 3.2vw, 48px);
    line-height: 1.15;
    color: var(--white);
}

.product-page-realisations .realisation-copy p {
    margin: 0;
    color: #d0d7df;
    font-size: 16px;
    line-height: 1.85;
}

.product-page-realisations .realisation-copy p + p {
    margin-top: 20px;
}

.product-page-realisations .realisation-gallery {
    width: 100%;
    min-width: 0;
}

.product-page-realisations .realisation-main-image {
    display: block;
    width: 100%;
    height: clamp(400px, 43vw, 580px);
    object-fit: contain;
    border-radius: 12px;
    background: rgba(139, 185, 236, 0.04);
}

.product-page-realisations .realisation-thumbnails {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.product-page-realisations .realisation-thumb {
    display: block;
    min-width: 0;
    padding: 4px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: rgba(139, 185, 236, 0.06);
    cursor: pointer;
}

.product-page-realisations .realisation-thumb img {
    display: block;
    width: 100%;
    height: 86px;
    object-fit: contain;
    border-radius: 6px;
}

.product-page-realisations .realisation-thumb.is-active,
.product-page-realisations .realisation-thumb:hover {
    border-color: var(--blue-light);
}

.product-page-realisations .realisation-thumb:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
}

.product-page-realisations .realisation-section-reverse .realisation-copy {
    grid-column: 2;
    grid-row: 1;
}

.product-page-realisations .realisation-section-reverse .realisation-gallery {
    grid-column: 1;
    grid-row: 1;
}

@media (max-width: 1000px) {
    .product-page-realisations .realisation-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .product-page-realisations .realisation-section-reverse .realisation-copy,
    .product-page-realisations .realisation-section-reverse .realisation-gallery {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 1000px) {
    .product-page-realisations .realisation-main-image {
        height: clamp(340px, 100vw, 580px);
    }
}

@media (max-width: 480px) {
    .product-page-realisations .realisation-layout {
        width: calc(100% - 32px);
    }

    .product-page-realisations .realisation-main-image {
        height: clamp(300px, 112vw, 480px);
    }

    .product-page-realisations .realisation-thumbnails {
        gap: 8px;
    }

    .product-page-realisations .realisation-thumb img {
        height: 68px;
    }
}