/* ============================= */
/*            SERVICES.CSS        */
/* ============================= */

/* === CONTENEUR PRINCIPAL === */
.services {
    background-color: rgba(31, 31, 31, 0.9);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    background-blend-mode: hard-light;
    padding: 0 0;
    font-family: "figtree", sans-serif;
    color: #FDF9F4;
    padding-bottom: 0vw;
    overflow-x: hidden;
}

.services#last-description {
    padding-bottom: 0;
}

.section-container {
    display: flex;
    margin: 0vw 8vw;
    padding-top: 4vw;
    gap: 3vw;
    align-items: flex-start;
}

.section-container+.section-container,
.section-container+.section-container.vertical {
    margin-top: 8vw;
}

/* === DESCRIPTIONS GÉNÉRALES === */
.description {
    position: relative;
    overflow: hidden;
    font-size: 1.2rem;
    line-height: 1.5;
    color: #FDF9F4;
}

.description>h2,
.description>p,
.description>div {
    position: relative;
    z-index: 1;
    text-align: center;
    justify-content: center;
}

.description .links-inline {
    display: block;
    text-align: center;
    margin-top: 2rem;
}

.description>h2 {
    font-size: 2rem;
}

.description p {
    margin-bottom: 4rem;
}

/* === DESCRIPTION SITE PRO === */
#site_pro.description {
    background-color: rgba(31, 31, 31, 1);
    padding: 4vw 8vw 2vw 8vw;
    position: relative;
    overflow: hidden;
    font-size: 1.2rem;
    line-height: 1.5;
    color: #FDF9F4;
}

#site_pro.description .overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(60deg,
            rgba(0, 0, 0, 0.6) 0%,
            rgba(0, 0, 0, 0.3) 35%,
            rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
}

/* === AVANTAGES === */
.avantages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    line-height: 1.2;
}

.bloc-avantage {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.icone {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

.icone img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.separator {
    width: 0.8px;
    height: 7rem;
    background-color: rgba(253, 249, 244, 0.4);
    flex-shrink: 0;
    margin: 0 4rem;
}

.logo-inline {
    height: 3rem;
    vertical-align: middle;
    position: relative;
    top: -0.15rem;
}

/* ============================= */
/*      SECTION À QUI S'ADRESSE   */
/* ============================= */

.description#a_qui_sadresse {
    max-height: 550px;
    background-color: rgba(52, 53, 52, 1);
    margin: 8vw 0 8vw 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
}

#a_qui_sadresse .txt-description {
    text-align: left;
    margin-top: auto;
    margin-bottom: auto;
    padding: 2vw 0 2vw 0;
    justify-content: center;
    flex: 1;
    font-size: 1.2rem;
    line-height: 1.5;
    color: #FDF9F4;
}

#a_qui_sadresse .txt-description p:first-of-type {
    margin-bottom: 1rem;
    margin-top: 2rem;
    font-size: 1.2rem;
}

#a_qui_sadresse .txt-description p:last-of-type {
    margin-top: 1rem;
    font-size: 1.2rem;
}

#a_qui_sadresse ul {
    margin-left: 1.3rem;
    padding-left: 0;
}

#a_qui_sadresse li {
    color: rgba(253, 249, 244, 0.6)
}

#a_qui_sadresse li.reponse {
    list-style-type: none;
    margin-left: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #FDF9F4;
}

#a_qui_sadresse h2 {
    margin-bottom: 3rem;
    font-size: 2rem
}

/* ILLUSTRATION "À QUI S'ADRESSE" avec effets */
#a_qui_sadresse .description-illustration {
    position: relative;
    width: 45%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    z-index: 0;
}

#a_qui_sadresse .description-illustration img {
    width: 100%;
    display: block;
    transform: scaleX(-1);
    filter: grayscale(100%);
    object-fit: cover;
    object-position: bottom;
    position: relative;
    z-index: 0;
}

/* Overlays pour "À qui s'adresse" */
#a_qui_sadresse .description-illustration::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(31, 31, 31, 1);
    mix-blend-mode: lighten;
    pointer-events: none;
    z-index: 1;
}

#a_qui_sadresse .description-illustration::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
background: linear-gradient(60deg,
        rgba(52, 53, 52, 0) 30%,
        rgba(52, 53, 52, 0.02) 35%,    /* Micro-début */
        rgba(52, 53, 52, 0.08) 40%,    /* Comme votre original */
        rgba(52, 53, 52, 0.18) 45%,    /* Courbe douce */
        rgba(52, 53, 52, 0.32) 50%,    /* Progression naturelle */
        rgba(52, 53, 52, 0.52) 55%,    /* Accélération douce */
        rgba(52, 53, 52, 0.75) 60%,    /* Montée finale */
        rgba(52, 53, 52, 0.92) 65%,    /* Quasi-fini */
        rgba(52, 53, 52, 1) 70%);
    z-index: 2;
}

/* ============================= */
/*        SECTION FAQ COMPLÈTE    */
/* ============================= */

/* CONTENEUR PRINCIPAL FAQ */
.description#parlons-en {
    background-color: rgba(52, 53, 52, 1);
    padding-left: 8vw;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    margin: 0;
}

/* CONTENU FAQ */
.faq {
    margin-bottom: 6vw;
    width: 50%;
    flex-shrink: 0;
}

.faq * {
    text-align: left;
}

#parlons-en h2 {
    margin-top: 4vw;
    margin-bottom: 3rem;
    font-size: 3rem;
}

#parlons-en h3 {
    font-size: 1.4rem;
    margin: 0;
    font-weight: 600;
}

#parlons-en p {
    margin-bottom: 0.6rem;
    color: rgba(253, 249, 244, 0.8);
}

#parlons-en ul {
    margin-left: 2rem;
    padding-left: 0;
    list-style: circle;
    color: rgba(253, 249, 244, 0.8);
}

#parlons-en li {
    margin-bottom: 0.5rem;
}

/* QUESTIONS FAQ */
.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    text-align: left;
    color: #FDF9F4;
    position: relative;
    transition: color 0.2s ease;
}

.faq-question:hover {
    color: rgba(253, 249, 244, 0.8);
}

/* ICÔNE TOGGLE */
.toggle-icon {
    font-size: 1rem;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    margin-right: 1rem;
}

.faq-question.active .toggle-icon {
    transform: rotate(180deg);
}

/* RÉPONSES FAQ */
.faq-answer {
    margin-top: 0.3rem;
    margin-left: 2rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
        padding-top 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    padding-top: 0;
    color: rgba(253, 249, 244, 0.6);
}

.faq-answer.open {
    opacity: 1;
    padding-top: 0.8rem;
}

/* CONTENEURS FAQ */
.content-box:not(:last-child) {
    margin-bottom: 1rem;
}

.content-box:last-child {
    border-bottom: none;
}

/* ILLUSTRATION FAQ (VOS PARAMÈTRES CONSERVÉS) */
.description#parlons-en .description-illustration {
    position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    z-index: 0;
    flex-shrink: 0;
    padding-top: 9.9vw;
}

.description#parlons-en .description-illustration img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: top;
    position: relative;
    z-index: 0;
}

/* PAS de dégradé pour la FAQ */
.description#parlons-en .description-illustration::before {
    display: none;
}

/* ============================= */
/*          LISTES & CARTES       */
/* ============================= */

#packs {
    margin-top: 4vw;
}

.section-list {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.section-list>h2 {
    font-size: 2rem;
    text-transform: none;
    text-align: center;
    margin-bottom: 2vw;
}

.card-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1vw;
    margin-bottom: 2vw;
}

/* CONTENEURS CARTE */
.card {
    display: flex;
    flex-direction: column;
    border-radius: 1vw;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
    z-index: 1;
}

.card:hover {
    transform: scale(1.11);
    box-shadow: 0 0.2vw 1.56vw rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.card-bg-outer {
    position: relative;
    border-radius: 1vw;
    height: 100%;
    z-index: 0;
}

.card-bg-inner {
    position: relative;
    border-radius: 1vw;
    padding: 2vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(52, 53, 52, 1);
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
    overflow: hidden;
}

/* CONTENU CARTE */
.tagline {
    text-align: center;
    display: inline-block;
    color: #9A47FF;
    font-weight: 600;
    font-size: 1.2rem;
    margin: 0.26vw 0 1.04vw 0;
}

.card hr {
    border: none;
    border-top: 0.026vw solid #FDF9F4;
    width: 2vw;
    margin: 0 auto 1.04vw auto;
}

.card ul {
    list-style: disc inside;
    margin: 0 0 1.04vw 0;
    color: #FDF9F4;
    font-weight: 500;
    font-size: 1rem;
}

.card ul li.detail-pilot {
    margin-left: 1rem;
    font-weight: 400;
}

.card ul li {
    margin-bottom: 0.26vw;
    text-align: left;
}

.price {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1vw;
    color: #FDF9F4;
    text-transform: uppercase;
}

/* DÉTAILS DES CARTES */
.card-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out;
    opacity: 0;
    padding: 0;
    margin-top: 0;
}

.card-details.expanded {
    max-height: 500px;
    opacity: 1;
    padding: 1rem 0 0 0;
    margin-top: 1rem;
    border-top: 1px solid rgba(253, 249, 244, 0.2);
}

.card-details.collapsed {
    max-height: 0;
    opacity: 0;
    padding: 0;
    margin-top: 0;
}

.card-details ul {
    margin: 0;
    padding-left: 1.2rem;
}

.card-details li {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: rgba(253, 249, 244, 0.9);
    line-height: 1.3;
}

.detail-pilot {
    list-style-type: none;
    margin-left: 2rem;
    color: rgba(253, 249, 244, 0.6);
    font-size: 1rem;
}

/* ============================= */
/*      SVG BACKGROUND DÉCORATIF  */
/* ============================= */

.services #packs+.section-container::before {
    content: "";
    position: absolute;
    top: -1800px;
    left: 50%;
    transform: translateX(-45%);
    width: 250vw;
    max-width: none;
    height: 250vh;
    background-image: url('/vectors/background-abstrait.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.17;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: -10;
    overflow: hidden;
}

.services #packs+.section-container {
    position: relative;
    z-index: 1;
}

/* ============================= */
/*      FIX Z-INDEX POUR SVG     */
/* ============================= */

.services>* {
    position: relative;
    z-index: 2;
}

.services .description {
    position: relative;
    z-index: 2;
}

.services .section-container {
    position: relative;
    z-index: 2;
}

#site_pro.description {
    position: relative;
    z-index: 2;
}

.description#a_qui_sadresse {
    position: relative;
    z-index: 2;
}

.services #packs+.section-container .section-info {
    position: relative;
    z-index: 15;
}

.services #packs+.section-container .section-info h2,
.services #packs+.section-container .section-info p {
    position: relative;
    z-index: 16;
}

.services #packs+.section-container .section-list {
    position: relative;
    z-index: 15;
}

.services #packs+.section-container .section-list h2 {
    position: relative;
    z-index: 16;
}

/* ============================= */
/*      TABLEAU COMPARATIF       */
/* ============================= */

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
    background: rgba(52, 53, 52, 0.8);
    border-radius: 1vw;
    overflow: hidden;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
}

.comparison-table th {
    background: rgba(31, 31, 31, 0.9);
    padding: 1.5vw 1vw;
    text-align: center;
    font-weight: 700;
    font-size: 1.2rem;
    border-bottom: 2px solid rgba(154, 71, 255, 0.3);
    color: #FDF9F4;
}

.comparison-table th:first-child {
    text-align: left;
    background: rgba(154, 71, 255, 0.1);
    color: #9A47FF;
    font-weight: 600;
}

.comparison-table tr:last-child td {
    border-bottom: none;
}

.comparison-table td {
    padding: 1vw;
    text-align: center;
    border-bottom: 1px solid rgba(253, 249, 244, 0.1);
    vertical-align: top;
    color: #FDF9F4;
    font-size: 1rem;
}

.comparison-table td:first-child {
    text-align: left;
    background: rgba(31, 31, 31, 0.3);
    font-weight: 500;
    border-right: 1px solid rgba(154, 71, 255, 0.2);
    color: rgba(253, 249, 244, 0.9);
}

.feature-included {
    color: #4CAF50;
    font-weight: 600;
}

.feature-enhanced {
    color: #9A47FF;
    font-weight: 600;
}

.feature-not-included {
    color: rgba(253, 249, 244, 0.3);
    font-style: italic;
}

/* ============================= */
/*         SECTION INFOS          */
/* ============================= */

.section-info {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
}

.section-info ul {
    margin-bottom: 0.8em;
    font-size: 1.1rem;
    list-style: circle;
    margin-left: 1rem;
}

.section-info li {
    margin-bottom: 0.2rem;
    line-height: 1.4;
}

.section-info p {
    font-size: 1.2rem;
    line-height: 1.5;
    color: rgba(253, 249, 244, 0.8);
    margin-bottom: 0.8em;
}

.section-info .bold {
    color: #FDF9F4;
}

.info-accent {
    margin: 1vw 0;
}

#text-aligne-right,
#text-aligne-right h2 {
    text-align: right;
}

#text-aligne-right .links-inline {
    justify-content: flex-end;
    display: inline-flex;
}

.section-info.centered p.links-inline {
    justify-content: center;
}

/* SECTIONS VERTICALES */
.section-container.vertical {
    flex-direction: column;
    margin-left: 0.31vw;
    margin-right: 0.31vw;
    gap: 3vw;
}

.section-info.centered {
    text-align: center;
    margin: auto;
}

.section-container.vertical .section-info.centered>h2 {
    text-align: center;
}

.card-list.four-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1vw;
    margin: 0 13.45vw;
}

/* ============================= */
/*         MÉTHODOLOGIE           */
/* ============================= */

.section-methodologie {
    background: radial-gradient(circle at 25% center,
            #7B47B3 0%,
            #6600DD 70%);
    padding: 4vw;
    color: #FDF9F4;
    font-family: "figtree", sans-serif;
}

.methodologie-container {
    display: flex;
    flex-direction: row;
    gap: 2vw;
}

.methodologie-illustration,
.methodologie-contenu {
    flex: 1 1 0;
}

.methodologie-illustration {
    display: flex;
    align-items: center;
    justify-content: center;
}

.methodologie-illustration img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.section-methodologie .methodologie-contenu h2,
.section-methodologie .methodologie-contenu p {
    text-align: center;
}

.section-methodologie .methodologie-contenu p>.bold:first-child {
    display: inline-block;
    margin-bottom: 1rem;
}

.section-methodologie .methodologie-contenu p:last-of-type {
    margin-bottom: 4rem;
}

.methodologie-contenu p {
    font-size: 1.2rem;
    line-height: 1.5rem;
    margin-bottom: 1vw;
    color: #f5f5f5;
}

.methodologie-liste {
    list-style: decimal outside;
    font-size: 1.2rem;
    line-height: 1.4rem;
}

.methodologie-liste li {
    margin-bottom: 1vw;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}

.methodologie-liste li::marker {
    font-weight: bold;
    font-size: 1.1rem;
}

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

@media (max-width: 768px) {

    .services {
        overflow-x: hidden;
        padding-bottom: 10vw;
    }

    .services-hero {
        margin-top: 25vw;
        margin-bottom: 25vw;
    }

    .packs-page .services-hero-content h1 {
        font-size: 6rem;
        margin-bottom: 3rem;
    }

    .packs-page .services-hero-content p {
        font-size: 3.5rem;
        font-weight: 600;
        padding: 0 7rem 0 7rem;
        color: #FDF9F4;
        margin-bottom: 0;
    }

    #text-aligne-right p {
        margin-bottom: 5rem;
    }

    /* ANIMATIONS MOBILES CARTES */
    .card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    .card-animate {
        opacity: 0 !important;
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: transform, opacity;
    }

    .card-animate:nth-child(odd) {
        transform: translateX(-100px);
    }

    .card-animate:nth-child(even) {
        transform: translateX(100px);
    }

    .card-animate.visible {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }

    .card-animate:nth-child(1) {
        transition-delay: 0.1s;
    }

    .card-animate:nth-child(2) {
        transition-delay: 0.3s;
    }

    .card-animate:nth-child(3) {
        transition-delay: 0.5s;
    }

    .card-animate:nth-child(4) {
        transition-delay: 0.2s;
    }

    .card-animate:nth-child(5) {
        transition-delay: 0.4s;
    }

    .card-animate:nth-child(6) {
        transition-delay: 0.6s;
    }

    .card.selected {
        /* Styles gérés dans formulaire.css */
    }

    .card.selected:hover {
        /* Styles gérés dans formulaire.css */
    }

    .card.selected .card-bg-outer {
        border-radius: 2.8vw;
    }

    /* DÉTAILS DES CARTES */
    .card-details {
        max-height: 0;
        padding: 0;
    }

    .card-details.expanded {
        max-height: 800px;
        padding: 2rem 0 0 0;
        margin-top: 2rem;
    }

    .card-details li {
        font-size: 2.5rem;
        margin-bottom: 1.5rem;
        line-height: 1.3;
    }

    /* TABLEAU COMPARATIF MOBILE */
    .comparison-table {
        font-size: 0.8rem;
        margin-top: 4vw;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 2vw 1vw;
        font-size: 2.5rem;
    }

    .comparison-table th {
        font-size: 3rem;
    }

    .comparison-table td:first-child {
        font-size: 2.5rem;
    }

    /* FORCER SECTION-CONTAINER EN COLONNE */
    .section-container {
        flex-direction: column !important;
        margin: 0 3rem;
        padding-top: 12vw;
        gap: 4vw;
        align-items: center;
        text-align: center;
    }

    .section-container.vertical {
        flex-direction: column !important;
        gap: 6vw;
    }

    /* SECTION-LIST ET SECTION-INFO */
    .section-list {
        width: 100%;
        order: 2;
    }

    .section-info {
        width: 100%;
        order: 1;
        text-align: center;
    }

    .section-info h2 {
        text-align: center !important;
    }

    /* CARTES EN 1 COLONNE */
    .card-list {
        grid-template-columns: 1fr !important;
        gap: 3vw;
    }

    .card-list.four-cols {
        grid-template-columns: 1fr !important;
        margin: 0 3rem;
        gap: 3vw;
    }

    /* FORM-CONTAINER */
    .form-container {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100%;
        display: flex !important;
        flex-direction: column !important;
    }

    .form-container h2 {
        text-align: center !important;
        margin-bottom: 3rem;
        align-self: center !important;
    }

    .form-container h2 .form-contact {
        text-align: center !important;
    }

    /* AUTRES ADAPTATIONS */
    .section-list>h2 {
        font-size: 4rem;
        margin-bottom: 6rem;
        text-align: center;
        margin-top: 12rem;
    }

    .section-info p {
        font-size: 3rem;
        line-height: 1.4;
    }

    #text-aligne-right,
    #text-aligne-right h2 {
        text-align: center;
    }

    #text-aligne-right .links-inline {
        justify-content: center;
    }

    /* CARDS */
    .card-bg-inner {
        border-radius: 2rem;
        padding: 5rem;
    }

    .tagline {
        font-size: 3rem;
        margin-bottom: 5rem;
    }

    .card hr {
        width: 12vw;
        margin-bottom: 3rem;
    }

    .card ul li.detail-pilot {
        font-size: 3rem;
        margin-left: 3rem;
    }

    .card ul li {
        line-height: 1.4;
    }

    .price {
        font-size: 5rem;
        margin-top: 3rem;
    }

    /* DESCRIPTION */
    #site_pro h2,
    #a_qui_sadresse .txt-description h2 {
        font-size: 4rem;
        margin-bottom: 6rem;
        margin-top: 6rem;
        text-align: center;
    }

    .description p {
        margin-bottom: 8rem;
    }

    .section-info br::before {
        content: "";
        display: block;
        height: 10rem;
    }

    .section-info ul {
        margin-top: 5rem;
        margin-bottom: 5rem;
        text-align: left;
    }

    /* SITE PRO */
    #site_pro.description {
        padding: 8vw 8vw 12vw 8vw;
    }

    .logo-inline {
        height: 7.5rem;
        vertical-align: middle;
        position: relative;
        top: -0.3rem;
    }

    .icone {
        margin-bottom: 3rem;
    }

    /* Cibler les images dans les avantages */
    .avantages .icone img {
        max-width: 8rem;
        max-height: 8rem;
    }

    /* AVANTAGES MOBILE ALIGNÉS */
    .avantages {
        display: grid;
        grid-template-columns: 1fr auto 1fr auto 1fr;
        grid-template-rows: auto auto auto;
        gap: 2rem 0;
        align-items: start;
    }

    .bloc-avantage {
        display: contents;
    }

    /* Centrage des éléments dans leurs colonnes */
    .bloc-avantage .icone,
    .bloc-avantage .bold,
    .bloc-avantage .opacity {
        text-align: center;
        justify-self: center;
    }

    /* Séparateurs verticaux */
    .separator {
        width: 1px;
        height: 40%;
        grid-row: 1 / -1;
        justify-self: center;
        align-self: center;
    }

    .separator:nth-of-type(1) {
        grid-column: 2;
    }

    .separator:nth-of-type(2) {
        grid-column: 4;
    }

    /* Ordre des éléments dans la grille */
    .bloc-avantage:nth-child(1) .icone {
        grid-column: 1;
        grid-row: 1;
    }

    .bloc-avantage:nth-child(1) .bold {
        grid-column: 1;
        grid-row: 2;
    }

    .bloc-avantage:nth-child(1) .opacity {
        grid-column: 1;
        grid-row: 3;
    }

    .bloc-avantage:nth-child(3) .icone {
        grid-column: 3;
        grid-row: 1;
    }

    .bloc-avantage:nth-child(3) .bold {
        grid-column: 3;
        grid-row: 2;
    }

    .bloc-avantage:nth-child(3) .opacity {
        grid-column: 3;
        grid-row: 3;
    }

    .bloc-avantage:nth-child(5) .icone {
        grid-column: 5;
        grid-row: 1;
    }

    .bloc-avantage:nth-child(5) .bold {
        grid-column: 5;
        grid-row: 2;
    }

    .bloc-avantage:nth-child(5) .opacity {
        grid-column: 5;
        grid-row: 3;
    }

    /* À QUI S'ADRESSE (image background + texte par-dessus) */
    #a_qui_sadresse .txt-description p.maillage {
        font-size: 3rem !important;
    }

    #a_qui_sadresse .txt-description p.accent {
        font-size: 3rem;
        margin-bottom: 6rem;
    }

    .description#a_qui_sadresse {
        max-height: none;
        flex-direction: column;
        margin: 18rem 0 12rem 0;
        padding: 10vw 3vw 10vw 3vw;
        background-color: rgba(52, 53, 52, 1);
    }

    /* Masquer l'image sur mobile */
    #a_qui_sadresse .description-illustration {
        display: none;
    }

    /* Texte centré */
    #a_qui_sadresse .txt-description {
        position: relative;
        z-index: 1;
        padding: 0;
        color: #FDF9F4;
        text-align: center;
        width: 100%;
    }

    /* Texte violet devient gras blanc */
    #a_qui_sadresse .txt-description p.accent {
        color: #FDF9F4 !important;
        font-weight: 700;
    }

    #a_qui_sadresse ul {
        list-style: none;
        margin-top: 3rem;
        margin-bottom: 6rem;
    }

    #a_qui_sadresse li.reponse {
        margin-bottom: 6rem;
    }

    #a_qui_sadresse .txt-description p.accent:last-of-type {
        display: none;
    }

    /* METHODOLOGIE */
    .methodologie-container {
        flex-direction: column;
        gap: 0;
        height: auto;
        min-height: auto;
    }

    .methodologie-illustration {
        display: none;
    }

    .methodologie-contenu {
        width: 100%;
        flex: none;
    }

    .methodologie-contenu h2 {
        margin-top: 6rem;
        margin-bottom: 6rem;
    }

    .methodologie-contenu p {
        font-size: 3rem;
        line-height: 1.3;
        margin-bottom: 8rem !important;
    }

    .section-methodologie {
        padding: 4vw 3vw;
        height: auto;
    }

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

    .methodologie-liste li::marker {
        font-weight: bold;
        font-size: 3rem;
    }

    .methodologie-liste li {
        margin-bottom: 6rem;
        line-height: 1.3;
        text-align: center;
        list-style-position: inside;
    }

    /* FAQ MOBILE */
    .description#parlons-en {
        padding: 8vw 3rem 8vw 3rem;
        flex-direction: column;
    }

    /* Masquer l'image sur mobile */
    .description#parlons-en .description-illustration {
        display: none;
    }

    .faq {
        width: 100%;
    }

    #parlons-en h2 {
        font-size: 4rem;
        text-align: center;
        padding: 0 3vw 0 3vw;
        margin-top: 6rem;
        margin-bottom: 6rem;
    }

    #parlons-en .txt-description {
        width: 100%;
        padding: 4vw;
        text-align: center;
    }

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

    .faq-question h3 {
        font-size: 3rem !important;
    }

    .faq-answer {
        font-size: 3rem;
        margin-left: 0;
        padding-left: 2rem;
        margin-bottom: 3rem;
    }

    .toggle-icon {
        font-size: 2rem;
        margin-right: 2rem;
        margin-top: 0.5rem;
    }

    #parlons-en ul {
        margin-top: 3rem;
        list-style: none;
    }

    #parlons-en .lien {
        padding: 1rem 2rem;
        margin: 0.5rem 0;
        display: inline-block;
    }

    .opacity {
        font-size: 3rem;
    }

    .text-underline {
        font-size: 3rem;
        line-height: 2;
    }

    /* SVG BACKGROUND DÉCORATIF */
    /* Suppression complète du SVG sur mobile */
    .services #packs+.section-container::before {
        display: none;
    }

}

/* ============================= */
/*        RESPONSIVE LAPTOP       */
/*      769px → 1439px            */
/*        SERVICES.CSS            */
/* ============================= */

@media (min-width: 769px) and (max-width: 1439px) {

  /* === CONTENEUR PRINCIPAL (réduction marges) === */
  .section-container {
    margin: 0vw 3vw; /* 8vw → 3vw */
    gap: 2vw; /* 3vw → 2vw */
  }

  /* === DESCRIPTIONS GÉNÉRALES === */
  .description > h2 {
    font-size: 2rem; /* +0.2rem */
  }

  .description p {
    font-size: 1.4rem; /* +0.2rem */
  }

  /* === DESCRIPTION SITE PRO (réduction marges) === */
  #site_pro.description {
    padding: 4vw 3vw 2vw 3vw; /* 8vw → 3vw */
    font-size: 1.4rem; /* +0.2rem */
  }

  /* === AVANTAGES === */
  .icone {
    width: 4rem; /* +0.2rem équivalent */
    height: 4rem;
  }

  .separator {
    height: 7.2rem; /* +0.2rem équivalent */
    margin: 0 3rem; /* 4rem → 3rem */
  }

  .logo-inline {
    height: 3.2rem; /* +0.2rem équivalent */
  }

  /* === SECTION À QUI S'ADRESSE (réduction marges) === */
  .description#a_qui_sadresse {
    margin: 6vw 0 6vw 0; /* 8vw → 6vw */
  }

  #a_qui_sadresse .txt-description {
    padding: 2vw 1.5vw 2vw 1.5vw; /* Réduction des paddings internes */
    font-size: 1.4rem; /* +0.2rem */
  }

  #a_qui_sadresse .txt-description p {
    font-size: 1.2rem; /* +0.2rem */
  }

  #a_qui_sadresse h2 {
    font-size: 2.2rem; /* +0.2rem */
  }

  /* === FAQ LAPTOP (réduction marges) === */
  .description#parlons-en {
    padding-left: 3vw; /* 8vw → 3vw */
  }

  #parlons-en h2 {
    font-size: 3.2rem; /* +0.2rem */
    margin-top: 3vw; /* 4vw → 3vw */
  }

  #parlons-en h3 {
    font-size: 1.6rem; /* +0.2rem */
  }

  #parlons-en p {
    font-size: 1.4rem; /* +0.2rem */
  }

  .faq {
    margin-bottom: 4vw; /* 6vw → 4vw */
  }

  .description#parlons-en .description-illustration {
    padding-top: 18.1vw; /* 9.9vw → 7vw */
  }

  /* === LISTES & CARTES === */
  #packs {
    margin-top: 3vw; /* 4vw → 3vw */
  }

  .section-list > h2 {
    font-size: 2.2rem; /* +0.2rem */
    margin-bottom: 1.5vw; /* 2vw → 1.5vw */
  }

  .card-list {
    gap: 0.8vw; /* 1vw → 0.8vw */
    margin-bottom: 1.5vw; /* 2vw → 1.5vw */
  }

  /* === CARTES === */
  .card-bg-inner {
    padding: 1vw; /* 2vw → 1.5vw */
  }

  .tagline {
    font-size: 1.4rem; /* +0.2rem */
  }

  .card ul {
    font-size: 1.1rem; /* +0.2rem */
  }

  .price {
    font-size: 2rem; /* +0.2rem */
  }

  .card hr {
    width: 1.1vw; /* 2vw → 1.5vw */
  }

  .detail-pilot {
    font-size: 1.1rem; /* +0.2rem */
  }

  /* === TABLEAU COMPARATIF === */
  .comparison-table th {
    padding: 1.2vw 0.8vw; /* 1.5vw 1vw → 1.2vw 0.8vw */
    font-size: 1.4rem; /* +0.2rem */
  }

  .comparison-table td {
    padding: 0.8vw; /* 1vw → 0.8vw */
    font-size: 1.2rem; /* +0.2rem */
  }

  /* === SECTION INFOS === */
  .section-info p {
    font-size: 1.4rem; /* +0.2rem */
  }

  .section-info ul {
    font-size: 1.3rem; /* +0.2rem */
    margin-left: 0.8rem; /* 1rem → 0.8rem */
  }

  .section-info li {
    font-size: 1.3rem; /* +0.2rem */
  }

  .info-accent {
    margin: 0.8vw 0; /* 1vw → 0.8vw */
  }

  /* === SECTIONS VERTICALES === */
  .section-container.vertical {
    margin-left: 0.2vw; /* 0.31vw → 0.2vw */
    margin-right: 0.2vw;
    gap: 2vw; /* 3vw → 2vw */
  }

  .card-list.four-cols {
    margin: 0 8vw; /* 13.45vw → 8vw */
  }

  /* === MÉTHODOLOGIE (réduction marges) === */
  .section-methodologie {
    padding: 3vw 2vw; /* 4vw → 3vw et ajout padding latéral */
  }

  .methodologie-container {
    gap: 1.5vw; /* 2vw → 1.5vw */
  }

  .methodologie-contenu p {
    font-size: 1.2rem; /* +0.2rem */
    margin-bottom: 0.8vw; /* 1vw → 0.8vw */
  }

  .methodologie-liste {
    font-size: 1.2rem; /* +0.2rem */
  }

  .methodologie-liste li {
    margin-bottom: 0.8vw; /* 1vw → 0.8vw */
  }

  /* === SVG BACKGROUND DÉCORATIF === */
  .services #packs + .section-container::before {
    left: 45%; /* 50% → 45% */
    transform: translateX(-40%); /* -45% → -40% */
    width: 200vw; /* 250vw → 200vw */
    height: 200vh; /* 250vh → 200vh */
  }

  .services #packs + .section-container {
    margin-top: 6vw; /* 8vw → 6vw */
  }

}