@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* =====================================================
   DRIM PC — FEUILLE DE STYLE COMPLÈTE
   Responsive : 320px à 1920px et plus
===================================================== */

:root {
    --bleu: #2684FF;
    --bleu-fonce: #163A5C;
    --bleu-clair: #55BFFF;
    --orange: #FF8A24;
    --orange-fonce: #E67800;
    --noir: #000000;
    --blanc: #FFFFFF;
    --gris: #CCCCCC;

    --font-titre: 'Sora', sans-serif;
    --font-texte: 'Space Grotesk', sans-serif;

    --largeur-contenu: 1500px;
    --header-height: 95px;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}

body {
    width: 100%;
    min-width: 320px;
    overflow-x: hidden;
    font-family: Arial, sans-serif;
    background: #FFFFFF;
    color: var(--bleu-fonce);
}

img {
    max-width: 100%;
}

a {
    transition: 0.3s ease;
}

button,
input,
select,
textarea {
    font: inherit;
}

/* =====================================================
   1. HEADER
===================================================== */

.header {
    width: 100%;
    min-height: var(--header-height);
    background: var(--bleu);

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

    padding: 5px 4%;

    position: sticky;
    top: 0;
    z-index: 1000;

    font-family: var(--font-titre);
    font-weight: 700;
}

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    z-index: 2;
}

.logo img {
    width: 85px;
    height: auto;
    display: block;
}

.navigation {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

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

    gap: clamp(20px, 3.1vw, 60px);
    white-space: nowrap;
}

.navigation a {
    color: #FFFFFF;
    text-decoration: none;
    font-family: var(--font-titre);
    font-size: clamp(16px, 1.35vw, 26px);
    font-weight: 700;
}

.navigation a:hover {
    color: var(--bleu-clair);
}

/* =====================================================
   2. CARROUSEL
===================================================== */

.accueil {
    width: 100%;
    position: relative;
}

.carousel {
    width: 88%;
    height: 680px;
    margin: 35px auto 100px;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
}

.slides {
    display: flex;
    width: 400%;
    height: 100%;
    transition: transform 0.7s ease-in-out;
}

.slide {
    width: 25%;
    height: 100%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.slide > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.slide-content {
    position: absolute;
    top: 0;
    left: 0;

    width: 30%;
    height: 100%;

    background: rgba(255, 255, 255, 0.70);

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

    padding: 30px;
    text-align: center;
    z-index: 2;
}

.slide-content img.slide-logo {
    width: 140px;
    height: auto;
    max-width: 80%;
    max-height: 110px;
    object-fit: contain;
    display: block;
    margin: 0 auto 20px;
    transform: translateY(-45px);
}

.slide-content h2 {
    max-width: 100%;
    font-family: var(--font-titre);
    font-size: 31px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 15px;
    transform: translateY(-28px);
}

.slide-content p {
    font-family: var(--font-texte);
    font-size: 22px;
    font-weight: 400;
    color: #000000;
    line-height: 1.3;
    margin: 3px 0;
}

.slide-texts {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: center;
}

.slide-texts p {
    margin: 0;
}

.slide-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    left: 50%;
    bottom: 50px;
    transform: translateX(-50%);

    background: var(--orange) !important;
    border: 2px solid var(--orange) !important;
    color: #000000 !important;

    padding: 16px 30px;
    border-radius: 6px;

    text-decoration: none;
    font-family: var(--font-titre);
    font-size: 30px;
    font-weight: 700;
    white-space: nowrap;
}

.slide-content .slide-button {
    position: static;
    transform: none;
    margin-top: 18px;
    padding: 12px 25px;
    font-size: 20px;
    white-space: normal;
}

.slide-button:hover {
    background: var(--bleu) !important;
    border-color: var(--bleu) !important;
    color: #000000 !important;
}

.fleche-orange {
    margin-left: 8px;
}

.carousel-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    width: 100%;
    height: 55px;
    margin: -85px auto 30px;
    position: relative;
    z-index: 100;
}

.carousel-arrow {
    display: block;
    background: transparent;
    border: none;
    color: #000000;
    font-family: Arial, sans-serif;
    font-size: 46px;
    font-weight: 900;
    cursor: pointer;
    padding: 5px 12px;
    line-height: 1;
    transition: 0.25s ease;
}

.carousel-arrow:hover {
    color: var(--bleu);
    transform: scale(1.2);
}

/* =====================================================
   3. PRÉSENTATION
===================================================== */

.presentation,
.page-intro {
    text-align: center;
    padding: 65px 10%;
}

.presentation h1,
.page-intro h1 {
    font-family: var(--font-titre);
    font-size: clamp(25px, 2vw, 32px);
    margin-bottom: 20px;
}

.presentation p,
.page-intro p {
    max-width: 850px;
    margin: auto;
    font-size: 17px;
    line-height: 1.7;
}

/* =====================================================
   4. SERVICES — ACCUEIL
===================================================== */

.services-section,
.services {
    background: #f2f6fa;
    padding: 65px 5%;
    text-align: center;
}

.services-section h2,
.services h2 {
    font-family: var(--font-titre);
    font-size: 28px;
    margin-bottom: 35px;
}

.services-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 25px;
    max-width: 1200px;
    margin: auto;
}

.service {
    background: #FFFFFF;
    padding: 35px 25px;
    border-radius: 8px;
    flex: 1;
    max-width: 380px;
    min-width: 0;
    box-shadow: 0 3px 12px rgba(0,0,0,0.08);
    text-decoration: none;
    color: inherit;
    display: block;
    transition: 0.3s ease;
}

.service h3 {
    font-family: var(--font-titre);
    margin-bottom: 15px;
    color: var(--bleu-fonce);
}

.service p {
    line-height: 1.6;
    color: #555555;
}

.service:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

/* =====================================================
   5. COMMENT ÇA MARCHE
===================================================== */

.fonctionnement {
    width: 100%;
    min-height: calc(100svh - var(--header-height));

    padding: 25px 5% 45px;

    background: #FFFFFF;

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

    text-align: center;
    font-family: var(--font-titre);
}

.fonctionnement::before {
    content: "";
    display: block;

    width: 65%;
    max-width: 950px;
    height: 12px;

    background: var(--orange);

    margin: 0 auto 22px;
    flex-shrink: 0;
}

.fonctionnement h2 {
    font-family: var(--font-titre);
    font-size: 38px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 30px;
}

.fonctionnement-intro {
    font-size: 17px;
    color: #000000;
    margin-bottom: 35px;
}

.etapes-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);

    column-gap: 35px;
    row-gap: 35px;

    max-width: var(--largeur-contenu);
    width: 100%;

    margin: 0 auto;
}

.etape {
    background: transparent;
    padding: 15px 10px;
    text-align: center;
    min-width: 0;
}

.etape h3 {
    font-family: var(--font-titre);
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    margin: 15px 0;
    line-height: 1.35;
}

.etape p {
    font-family: var(--font-titre);
    font-size: 18px;
    line-height: 1.6;
    color: #000000;
    overflow-wrap: break-word;
}

.icone-etape {
    width: 42px;
    height: 42px;
    margin: 0 auto 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icone-etape img {
    display: block;
    width: 45px;
    height: 45px;
    object-fit: contain;
}

.etape:nth-child(2) .icone-etape img {
    width: 45px;
    height: 45px;
    max-width: 45px;
    filter: brightness(0);
    object-fit: contain;
}

.numero-etape {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    margin: 0 auto 20px;
    background: var(--bleu-fonce);
    color: #FFFFFF;
    font-size: 24px;
    font-weight: bold;
    border-radius: 50%;
}

.btn-fonctionnement {
    display: inline-block;
    margin-top: 40px;
    padding: 13px 28px;
    background: var(--bleu-fonce);
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 6px;
}

.btn-fonctionnement:hover {
    background: #24577f;
}

/* =====================================================
   6. QUALITÉ DRIM PC
===================================================== */

.qualite {
    width: 100%;
    min-height: calc(100svh - var(--header-height));

    padding: 25px 5% 50px;

    background: #FFFFFF;

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

    text-align: center;
    font-family: var(--font-titre);
}

.qualite::before {
    content: "";
    display: block;

    width: 65%;
    max-width: 950px;
    height: 12px;

    background: var(--orange);

    margin: 0 auto 22px;
    flex-shrink: 0;
}

.qualite h2 {
    font-family: var(--font-titre);
    font-size: 38px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 25px;
}

.qualite-container {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));

    column-gap: 35px;
    row-gap: 35px;

    max-width: var(--largeur-contenu);
    width: 100%;

    margin: 0 auto;
}

.qualite-item {
    background: transparent;
    padding: 15px 10px;
    text-align: center;
    min-width: 0;
    grid-column: span 2;
}

.qualite-item:nth-child(4) {
    grid-column: 2 / span 2;
}

.qualite-item:nth-child(5) {
    grid-column: 4 / span 2;
}

.qualite-item h3 {
    font-family: var(--font-titre);
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    margin: 15px 0;
    line-height: 1.35;
}

.qualite-item p {
    font-family: var(--font-titre);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: #000000;
    margin: 0;
    text-align: center;
    overflow-wrap: break-word;
}

.qualite .icone-qualite {
    width: 55px;
    height: 55px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qualite .icone-qualite img {
    width: 40px;
    height: 40px;
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
}

/* =====================================================
   7. CONTACT
===================================================== */

.contact {
    width: 100%;
    padding: 100px 5%;
    background: #000000;
    color: #FFFFFF;
    text-align: center;
    position: relative;
    clear: both;
}

.contact-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 65px 50px;
    background: #080808;
    border: 1px solid rgba(38, 132, 255, 0.35);
    border-radius: 12px;
    box-shadow: 0 0 35px rgba(38, 132, 255, 0.07);
}

.contact-label {
    display: inline-block;
    color: var(--bleu-clair);
    font-family: var(--font-titre);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 25px;
}

.contact h2 {
    color: #FFFFFF;
    font-family: var(--font-titre);
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 15px;
}

.contact h3 {
    color: var(--bleu);
    font-family: var(--font-titre);
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 25px;
}

.contact-description {
    max-width: 750px;
    margin: 0 auto;
    color: #CCCCCC;
    font-family: var(--font-texte);
    font-size: 18px;
    line-height: 1.8;
}

.contact-separator {
    width: 70px;
    height: 3px;
    background: var(--bleu);
    margin: 35px auto;
    border-radius: 5px;
}

.contact-subtitle {
    color: #FFFFFF;
    font-family: var(--font-titre);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

.contact-text {
    color: #AAAAAA;
    font-family: var(--font-texte);
    font-size: 16px;
    margin-bottom: 30px;
}

.contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 17px 32px;
    background: #FF8A00;
    color: #FFFFFF;
    font-family: var(--font-titre);
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    border-radius: 6px;
    transition: 0.3s ease;
}

.contact-button:hover {
    background: var(--orange-fonce);
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(255, 138, 0, 0.25);
}

.contact-button span {
    font-size: 22px;
    transition: 0.3s ease;
}

.contact-button:hover span {
    transform: translateX(5px);
}

.contact-signature {
    display: block;
    margin-top: 40px;
    color: #666666;
    font-family: var(--font-texte);
    font-size: 13px;
}

/* =====================================================
   8. PAGES SERVICES
===================================================== */

.prestations {
    background: #f2f6fa;
    padding: 55px 8%;
}

.prestations h2 {
    text-align: center;
    font-family: var(--font-titre);
    font-size: 28px;
    margin-bottom: 35px;
}

.prestation {
    background: #FFFFFF;
    padding: 25px;
    margin: 15px auto;
    max-width: 950px;
    border-radius: 8px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.06);
}

.prestation h3 {
    font-family: var(--font-titre);
    margin-bottom: 10px;
    color: var(--bleu-fonce);
}

.prestation p {
    line-height: 1.6;
}

/* =====================================================
   9. TARIFS
===================================================== */

.tarifs-services {
    padding: 60px 5%;
    text-align: center;
}

.tarifs-services h2 {
    font-family: var(--font-titre);
    font-size: 28px;
    margin-bottom: 35px;
}

.tarifs-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 25px;
    flex-wrap: wrap;
}

.tarif {
    background: var(--bleu-fonce);
    color: #FFFFFF;
    padding: 30px 20px;
    border-radius: 8px;
    flex: 1 1 250px;
    max-width: 350px;
    min-width: 0;
}

.tarif h3 {
    margin-bottom: 20px;
}

.tarif .prix {
    font-size: 28px;
    font-weight: bold;
    color: var(--bleu-clair);
    margin-bottom: 10px;
}

.tarif-note {
    margin-top: 30px;
    color: #555555;
    font-size: 14px;
}

/* =====================================================
   10. BOUTONS DE DEVIS
===================================================== */

.bouton-devis {
    display: inline-block;
    background: var(--bleu-clair);
    color: var(--bleu-fonce);
    padding: 15px 30px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
}

.bouton-devis:hover {
    background: #FFFFFF;
}

.devis-accueil {
    text-align: center;
    padding: 35px 20px;
}

.btn-devis {
    display: inline-block;
    padding: 16px 35px;
    background: #168cff;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    border-radius: 6px;
}

.btn-devis:hover {
    background: #006bd6;
    transform: translateY(-2px);
}

/* =====================================================
   11. FORMULAIRES
===================================================== */

.contact-section {
    padding: 60px 20px;
    background: #111820;
    color: #FFFFFF;
    text-align: center;
}

.contact-section h2 {
    font-size: 32px;
    margin-bottom: 15px;
}

.contact-section > p {
    margin-bottom: 30px;
    color: #CCCCCC;
}

#devis-form {
    width: 100%;
    max-width: 650px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

#devis-form label {
    font-weight: bold;
    margin-top: 10px;
}

#devis-form input,
#devis-form select,
#devis-form textarea {
    width: 100%;
    min-width: 0;
    padding: 13px;
    border: 1px solid #168cff;
    border-radius: 6px;
    background: #202b36;
    color: #FFFFFF;
    font-size: 15px;
}

#devis-form textarea {
    resize: vertical;
    min-height: 120px;
}

#devis-form input[type="file"] {
    cursor: pointer;
    max-width: 100%;
}

#devis-form button {
    margin-top: 20px;
    padding: 15px;
    background: #168cff;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
}

#devis-form button:hover {
    background: #006bd6;
}

/* =====================================================
   12. FOOTER
===================================================== */

.footer {
    padding: 25px 5%;
    background: #111820;
    color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.footer a {
    color: var(--bleu-clair);
    text-decoration: none;
}

.footer a:hover {
    color: #FFFFFF;
}

/* =====================================================
   13. GRANDS ÉCRANS — 1601px ET PLUS
===================================================== */

@media (min-width: 1601px) {

    .accueil {
        min-height: calc(100svh - 95px);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .fonctionnement,
    .qualite,
    .contact {
        min-height: 100svh;
    }
}

/* =====================================================
   14. LAPTOPS — 1201px À 1600px
===================================================== */

@media (max-width: 1600px) and (min-width: 1201px) {

    :root {
        --header-height: 80px;
    }

    .header {
        min-height: 80px;
        height: 80px;
        padding: 5px 3%;
    }

    .logo img {
        width: 72px;
    }

    .navigation {
        gap: clamp(18px, 2.5vw, 40px);
    }

    .navigation a {
        font-size: clamp(16px, 1.4vw, 21px);
    }

    .accueil {
        min-height: calc(100svh - 80px);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .carousel {
        width: 92%;
        height: clamp(460px, 67vh, 560px);
        margin: 20px auto 75px;
    }

    .slide-content {
        width: 36%;
        padding: 25px;
    }

    .slide-content img.slide-logo {
        width: 115px;
        max-height: 90px;
        transform: translateY(-20px);
    }

    .slide-content h2 {
        font-size: clamp(21px, 1.8vw, 27px);
        transform: translateY(-10px);
    }

    .slide-content p {
        font-size: clamp(15px, 1.25vw, 19px);
    }

    .slide-content .slide-button {
        font-size: 17px;
        padding: 11px 20px;
    }

    .carousel-navigation {
        margin-top: -75px;
    }

    .fonctionnement,
    .qualite {
        min-height: calc(100svh - 80px);
        padding: 25px 5% 50px;
    }

    .fonctionnement h2,
    .qualite h2 {
        font-size: 34px;
        margin-bottom: 25px;
    }

    .fonctionnement::before,
    .qualite::before {
        width: 65%;
        height: 10px;
    }

    .etapes-container,
    .qualite-container {
        column-gap: 22px;
        row-gap: 30px;
    }

    .etape h3,
    .qualite-item h3 {
        font-size: 18px;
    }

    .etape p,
    .qualite-item p {
        font-size: 15px;
    }

    .contact {
        min-height: 100svh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 65px 5%;
    }

    .contact-container {
        padding: 50px 40px;
    }

    .contact h2 {
        font-size: 36px;
    }
}

/* =====================================================
   15. TABLETTES ET PETITS LAPTOPS — 769px À 1200px
===================================================== */

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

    :root {
        --header-height: 85px;
    }

    .header {
        height: 85px;
        min-height: 85px;
        padding: 8px 3%;
        gap: 15px;
    }

    .logo img {
        width: 65px;
    }

    .navigation {
        position: static;
        transform: none;
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: clamp(10px, 1.5vw, 20px);
        white-space: nowrap;
    }

    .navigation a {
        font-size: clamp(12px, 1.35vw, 16px);
    }

    .accueil {
        min-height: calc(100svh - 85px);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .carousel {
        width: 94%;
        height: clamp(390px, 48vw, 500px);
        margin: 20px auto 75px;
    }

    .slide-content {
        width: 42%;
        padding: 20px;
    }

    .slide-content img.slide-logo {
        width: 100px;
        max-height: 80px;
        margin-bottom: 12px;
        transform: none;
    }

    .slide-content h2 {
        font-size: clamp(19px, 2.4vw, 27px);
        line-height: 1.25;
        transform: none;
        margin-bottom: 12px;
    }

    .slide-content p {
        font-size: clamp(14px, 1.7vw, 18px);
        line-height: 1.4;
    }

    .slide-texts {
        gap: 8px;
    }

    .slide-content .slide-button {
        position: static;
        transform: none;
        margin-top: 15px;
        padding: 10px 16px;
        font-size: clamp(13px, 1.5vw, 17px);
    }

    .carousel-navigation {
        height: 48px;
        margin: -65px auto 20px;
        gap: 35px;
    }

    .carousel-arrow {
        font-size: 40px;
    }

    .presentation,
    .page-intro {
        padding: 50px 7%;
    }

    .services-section,
    .services {
        padding: 50px 5%;
    }

    .services-container {
        gap: 18px;
    }

    .service {
        padding: 28px 18px;
    }

    .fonctionnement,
    .qualite {
        min-height: calc(100svh - 85px);
        padding: 25px 5% 45px;
    }

    .fonctionnement::before,
    .qualite::before {
        width: 75%;
        max-width: 650px;
        height: 9px;
        margin-bottom: 22px;
    }

    .fonctionnement h2,
    .qualite h2 {
        font-size: clamp(27px, 3.5vw, 36px);
        margin-bottom: 25px;
    }

    .etapes-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        gap: 30px 22px;
    }

    .etape {
        padding: 12px 8px;
    }

    .etape h3,
    .qualite-item h3 {
        font-size: 18px;
    }

    .etape p,
    .qualite-item p {
        font-size: 15px;
        line-height: 1.6;
    }

    .qualite-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px 20px;
    }

    .qualite-item,
    .qualite-item:nth-child(4),
    .qualite-item:nth-child(5) {
        grid-column: auto;
        padding: 12px 8px;
    }

    .contact {
        min-height: 100svh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 55px 5%;
    }

    .contact-container {
        padding: 45px 30px;
    }

    .contact h2 {
        font-size: 34px;
    }

    .contact h3 {
        font-size: 23px;
    }

    .tarifs-container {
        gap: 18px;
    }

    .tarif {
        flex-basis: 220px;
    }
}

/* =====================================================
   16. SMARTPHONES — 768px ET MOINS
===================================================== */

@media (max-width: 768px) {

    :root {
        --header-height: 125px;
    }

    html {
        scroll-padding-top: var(--header-height);
    }

    .header {
        height: auto;
        min-height: 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 7px;
        padding: 8px 12px 10px;
    }

    .logo {
        justify-content: center;
    }

    .logo img {
        width: 62px;
    }

    .navigation {
        position: static;
        transform: none;
        width: 100%;
        flex: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px 16px;
        white-space: normal;
    }

    .navigation a {
        flex: 0 1 auto;
        font-size: clamp(12px, 2.5vw, 15px);
        line-height: 1.3;
        text-align: center;
    }

    .accueil {
        min-height: calc(100svh - 125px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 8px 0 0;
    }

    .carousel {
        width: calc(100% - 24px);
        height: clamp(440px, 72svh, 570px);
        margin: 8px auto 55px;
        border-radius: 7px;
    }

    .slide,
    .slides {
        height: 100%;
        min-height: 0;
    }

    .slide > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .slide-content {
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: 75%;
        padding: 14px 18px 16px;
        background: rgba(255, 255, 255, 0.88);
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .slide-content img.slide-logo {
        width: clamp(55px, 16vw, 75px) !important;
        height: auto !important;
        max-width: 75px !important;
        max-height: 52px !important;
        margin: 0 auto 8px;
        transform: none !important;
    }

    .slide-content h2 {
        max-width: 100%;
        font-size: clamp(16px, 4.5vw, 21px) !important;
        line-height: 1.2;
        margin: 0 0 8px;
        transform: none !important;
    }

    .slide-content p {
        max-width: 100%;
        font-size: clamp(12px, 3.5vw, 15px) !important;
        line-height: 1.35;
        margin: 0 0 5px;
    }

    .slide-texts {
        width: 100%;
        gap: 5px;
    }

    .slide-content .slide-button {
        position: static;
        transform: none !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 9px auto 0;
        padding: 9px 15px;
        max-width: 100%;
        font-size: 12px;
        line-height: 1.3;
        white-space: normal;
    }

    .carousel-navigation {
        height: 45px;
        gap: 30px;
        margin: -48px auto 8px;
    }

    .carousel-arrow {
        font-size: 38px;
        padding: 5px 10px;
    }

    .presentation,
    .page-intro {
        padding: 45px 6%;
    }

    .presentation h1,
    .page-intro h1 {
        font-size: 27px;
    }

    .presentation p,
    .page-intro p {
        font-size: 15px;
        line-height: 1.65;
    }

    .services-section,
    .services {
        padding: 45px 6%;
    }

    .services-section h2,
    .services h2 {
        font-size: 25px;
        margin-bottom: 25px;
    }

    .services-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .service {
        width: 100%;
        max-width: 500px;
        flex: none;
        padding: 28px 22px;
    }

    /* Sections : alignement en haut, sans centrage vertical */

    .fonctionnement,
    .qualite {
        min-height: calc(100svh - var(--header-height));
        height: auto;
        padding: 25px 6% 40px;
        justify-content: flex-start;
    }

    .fonctionnement::before,
    .qualite::before {
        width: 72%;
        max-width: 500px;
        height: 8px;
        margin: 0 auto 22px;
    }

    .fonctionnement h2,
    .qualite h2 {
        font-size: clamp(25px, 6vw, 32px);
        line-height: 1.2;
        margin: 0 auto 25px;
        transform: none;
    }

    .etapes-container,
    .qualite-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        width: 100%;
        gap: 25px;
        margin: 0 auto;
    }

    .etape,
    .qualite-item,
    .qualite-item:nth-child(4),
    .qualite-item:nth-child(5) {
        grid-column: auto;
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
        padding: 10px 2px;
    }

    .etape h3,
    .qualite-item h3 {
        font-size: 18px;
        line-height: 1.4;
        margin: 12px 0;
    }

    .etape p,
    .qualite-item p {
        font-size: 15px;
        line-height: 1.65;
    }

    .icone-etape {
        width: 42px;
        height: 42px;
    }

    .icone-etape img {
        width: 40px;
        height: 40px;
    }

    .qualite .icone-qualite {
        margin-bottom: 10px;
    }

    .contact {
        min-height: 100svh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 45px 5%;
    }

    .contact-container {
        padding: 38px 22px;
        border-radius: 10px;
    }

    .contact-label {
        font-size: 11px;
        letter-spacing: 2px;
        line-height: 1.5;
        margin-bottom: 18px;
    }

    .contact h2 {
        font-size: clamp(25px, 6.5vw, 32px);
        line-height: 1.2;
    }

    .contact h3 {
        font-size: clamp(18px, 4.8vw, 22px);
        line-height: 1.4;
    }

    .contact-description {
        font-size: 15px;
        line-height: 1.65;
    }

    .contact-separator {
        margin: 25px auto;
    }

    .contact-subtitle {
        font-size: 17px;
    }

    .contact-text {
        font-size: 14px;
        line-height: 1.6;
    }

    .contact-button {
        width: 100%;
        max-width: 300px;
        padding: 15px 18px;
        font-size: 14px;
    }

    .contact-signature {
        font-size: 11px;
        line-height: 1.6;
        margin-top: 28px;
    }

    .prestations {
        padding: 40px 5%;
    }

    .prestation {
        padding: 22px 18px;
    }

    .tarifs-services {
        padding: 45px 5%;
    }

    .tarifs-services h2 {
        font-size: 25px;
    }

    .tarifs-container {
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

    .tarif {
        width: 100%;
        max-width: 450px;
        flex: none;
    }

    .contact-section {
        padding: 45px 18px;
    }

    .contact-section h2 {
        font-size: 26px;
    }

    #devis-form {
        width: 100%;
    }

    .footer {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 22px 5%;
        font-size: 13px;
        line-height: 1.5;
    }
}

/* =====================================================
   17. PETITS SMARTPHONES — 480px ET MOINS
===================================================== */

@media (max-width: 480px) {

    :root {
        --header-height: 115px;
    }

    .header {
        padding: 8px 10px 10px;
        gap: 6px;
    }

    .logo img {
        width: 58px;
    }

    .navigation {
        gap: 8px 12px;
    }

    .navigation a {
        font-size: 12px;
    }

    .accueil {
        min-height: calc(100svh - 115px);
        padding-top: 5px;
    }

    .carousel {
        width: calc(100% - 20px);
        height: clamp(430px, 74svh, 560px);
        margin: 8px auto 52px;
    }

    .slide-content {
        max-height: 78%;
        padding: 10px 13px 12px;
    }

    .slide-content img.slide-logo {
        width: 52px !important;
        max-width: 52px !important;
        max-height: 38px !important;
        margin-bottom: 6px;
    }

    .slide-content h2 {
        font-size: clamp(15px, 4.2vw, 18px) !important;
        line-height: 1.18;
        margin-bottom: 6px;
    }

    .slide-content p {
        font-size: clamp(11.5px, 3.3vw, 14px) !important;
        line-height: 1.3;
        margin-bottom: 3px;
    }

    .slide-texts {
        gap: 4px;
    }

    .slide-content .slide-button {
        margin-top: 6px;
        padding: 8px 12px;
        font-size: 11px;
    }

    .carousel-navigation {
        height: 42px;
        margin: -45px auto 5px;
        gap: 25px;
    }

    .carousel-arrow {
        font-size: 35px;
    }

    .fonctionnement,
    .qualite {
        padding: 22px 5% 38px;
    }

    .fonctionnement::before,
    .qualite::before {
        width: 70%;
        height: 6px;
        margin-bottom: 20px;
    }

    .fonctionnement h2,
    .qualite h2 {
        font-size: 25px;
        margin-bottom: 25px;
    }

    .etapes-container,
    .qualite-container {
        gap: 22px;
    }

    .etape h3,
    .qualite-item h3 {
        font-size: 17px;
    }

    .etape p,
    .qualite-item p {
        font-size: 14px;
        line-height: 1.6;
    }

    .contact {
        padding: 42px 4%;
    }

    .contact-container {
        padding: 32px 16px;
    }

    .contact h2 {
        font-size: 25px;
    }

    .contact h3 {
        font-size: 18px;
    }

    .contact-description {
        font-size: 14px;
    }

    .contact-button {
        font-size: 13px;
    }

    #devis-form input,
    #devis-form select,
    #devis-form textarea {
        font-size: 14px;
        padding: 12px;
    }
}

/* =====================================================
   18. TRÈS PETITS ÉCRANS — 360px ET MOINS
===================================================== */

@media (max-width: 360px) {

    :root {
        --header-height: 115px;
    }

    .navigation {
        gap: 8px 10px;
    }

    .navigation a {
        font-size: 11px;
    }

    .accueil {
        min-height: calc(100svh - 115px);
    }

    .carousel {
        height: clamp(410px, 76svh, 490px);
        margin: 8px auto 48px;
    }

    .slide-content {
        max-height: 80%;
        padding: 8px 10px 10px;
    }

    .slide-content img.slide-logo {
        width: 45px !important;
        max-width: 45px !important;
        max-height: 32px !important;
        margin-bottom: 5px;
    }

    .slide-content h2 {
        font-size: 15px !important;
        margin-bottom: 5px;
    }

    .slide-content p {
        font-size: 11px !important;
        line-height: 1.22;
    }

    .slide-content .slide-button {
        padding: 7px 10px;
        font-size: 10px;
    }

    .carousel-navigation {
        margin-top: -42px;
    }

    .fonctionnement,
    .qualite {
        padding: 20px 5% 35px;
    }

    .fonctionnement h2,
    .qualite h2 {
        font-size: 23px;
    }

    .etapes-container,
    .qualite-container {
        gap: 20px;
    }

    .contact-container {
        padding: 28px 13px;
    }

    .contact-label {
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .contact h2 {
        font-size: 23px;
    }

    .contact h3 {
        font-size: 17px;
    }

    .contact-description {
        font-size: 13px;
    }
}

/* =====================================================
   19. ACCESSIBILITÉ
===================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =====================================================
   20. RESPONSIVE — QUALITÉ ET FONCTIONNEMENT
   Cartes mieux réparties, sans texte minuscule
===================================================== */


/* =====================================================
   TABLETTES ET PETITS LAPTOPS — 769px À 1200px
===================================================== */

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

    .fonctionnement,
    .qualite {
        min-height: calc(100svh - var(--header-height));
        height: auto;
        padding: 22px 5% 30px;
    }

    .fonctionnement::before,
    .qualite::before {
        width: 70%;
        height: 8px;
        margin-bottom: 18px;
    }

    .fonctionnement h2,
    .qualite h2 {
        font-size: 29px;
        margin-bottom: 18px;
    }

    .fonctionnement-intro {
        font-size: 14px;
        margin-bottom: 15px;
    }

    /* Répartition des cartes */

    .etapes-container,
    .qualite-container {
        flex: 1;
        align-content: space-evenly;
        column-gap: 25px;
        row-gap: 20px;
    }

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

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

    .etape,
    .qualite-item,
    .qualite-item:nth-child(4),
    .qualite-item:nth-child(5) {
        grid-column: auto;
        padding: 12px 10px;
    }

    .etape h3,
    .qualite-item h3 {
        font-size: 16px;
        line-height: 1.3;
        margin: 9px 0;
    }

    .etape p,
    .qualite-item p {
        font-size: 13px;
        line-height: 1.5;
    }

    .icone-etape,
    .icone-etape img {
        width: 36px;
        height: 36px;
    }

    .qualite .icone-qualite {
        width: 42px;
        height: 42px;
        margin-bottom: 7px;
    }

    .qualite .icone-qualite img {
        width: 36px;
        height: 36px;
    }

    .numero-etape {
        width: 36px;
        height: 36px;
        font-size: 18px;
        margin-bottom: 8px;
    }

    .btn-fonctionnement {
        margin-top: 18px;
    }
}


/* =====================================================
   LAPTOPS PLUS LARGES — 1000px À 1200px
===================================================== */

@media (min-width: 1000px) and (max-width: 1200px) {

    .etapes-container,
    .qualite-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 25px;
        row-gap: 20px;
    }
}


/* =====================================================
   SMARTPHONES ET PETITES TABLETTES — 768px ET MOINS
===================================================== */

@media (max-width: 768px) {

    .fonctionnement,
    .qualite {
        min-height: calc(100svh - var(--header-height));
        height: auto;
        padding: 22px 5% 28px;
        justify-content: flex-start;
    }

    .fonctionnement::before,
    .qualite::before {
        width: 68%;
        height: 6px;
        margin-bottom: 18px;
    }

    .fonctionnement h2,
    .qualite h2 {
        font-size: clamp(22px, 4.5vw, 27px);
        line-height: 1.25;
        margin-bottom: 17px;
    }

    .fonctionnement-intro {
        font-size: 13px;
        line-height: 1.5;
        margin-bottom: 15px;
    }

    /* Les cartes se répartissent sur deux colonnes */

    .etapes-container,
    .qualite-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        flex: 1;
        align-content: space-evenly;
        width: 100%;
        column-gap: 16px;
        row-gap: 18px;
        margin: 0 auto;
    }

    .etape,
    .qualite-item,
    .qualite-item:nth-child(4),
    .qualite-item:nth-child(5) {
        grid-column: auto;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 12px 7px;
    }

    .etape h3,
    .qualite-item h3 {
        font-size: clamp(13px, 2.5vw, 16px);
        line-height: 1.3;
        margin: 8px 0;
    }

    .etape p,
    .qualite-item p {
        font-size: clamp(11px, 2.1vw, 13px);
        line-height: 1.45;
    }

    .icone-etape,
    .icone-etape img {
        width: 32px;
        height: 32px;
    }

    .numero-etape {
        width: 32px;
        height: 32px;
        font-size: 16px;
        margin: 0 auto 7px;
    }

    .qualite .icone-qualite {
        width: 38px;
        height: 38px;
        margin: 0 auto 6px;
    }

    .qualite .icone-qualite img {
        width: 32px;
        height: 32px;
    }

    .btn-fonctionnement {
        margin-top: 20px;
        padding: 11px 22px;
        font-size: 13px;
    }
}


/* =====================================================
   PETITS SMARTPHONES — 480px ET MOINS
===================================================== */

@media (max-width: 480px) {

    .fonctionnement,
    .qualite {
        padding: 20px 4% 25px;
    }

    .fonctionnement::before,
    .qualite::before {
        margin-bottom: 16px;
    }

    .fonctionnement h2,
    .qualite h2 {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .fonctionnement-intro {
        font-size: 12px;
        margin-bottom: 13px;
    }

    .etapes-container,
    .qualite-container {
        column-gap: 12px;
        row-gap: 16px;
    }

    .etape,
    .qualite-item {
        padding: 10px 5px;
    }

    .etape h3,
    .qualite-item h3 {
        font-size: 13px;
        line-height: 1.3;
        margin: 7px 0;
    }

    .etape p,
    .qualite-item p {
        font-size: 11px;
        line-height: 1.4;
    }

    .icone-etape,
    .icone-etape img {
        width: 30px;
        height: 30px;
    }

    .numero-etape {
        width: 30px;
        height: 30px;
        font-size: 15px;
    }

    .qualite .icone-qualite {
        width: 35px;
        height: 35px;
    }

    .qualite .icone-qualite img {
        width: 29px;
        height: 29px;
    }
}


/* =====================================================
   TRÈS PETITS SMARTPHONES — 360px ET MOINS
===================================================== */

@media (max-width: 360px) {

    .fonctionnement,
    .qualite {
        padding-left: 3%;
        padding-right: 3%;
    }

    .etapes-container,
    .qualite-container {
        column-gap: 9px;
        row-gap: 14px;
    }

    .etape,
    .qualite-item {
        padding: 9px 3px;
    }

    .etape h3,
    .qualite-item h3 {
        font-size: 12px;
    }

    .etape p,
    .qualite-item p {
        font-size: 10px;
        line-height: 1.4;
    }
}

/* =====================================================
   21. AJUSTEMENT FINAL DES SECTIONS SUR PETITS ÉCRANS
===================================================== */

@media (max-width: 768px) {

    /* COMMENT ÇA MARCHE */

    .fonctionnement {
        height: calc(100svh - var(--header-height));
        min-height: 0;
        padding: 12px 5% 12px;
        overflow: hidden;
    }

    .fonctionnement::before {
        height: 5px;
        margin-bottom: 10px;
        flex-shrink: 0;
    }

    .fonctionnement h2 {
        font-size: clamp(18px, 4vw, 22px);
        margin-bottom: 7px;
        flex-shrink: 0;
    }

    .fonctionnement-intro {
        font-size: 10px;
        line-height: 1.3;
        margin-bottom: 7px;
        flex-shrink: 0;
    }

    .etapes-container {
        flex: 1;
        min-height: 0;
        width: 100%;

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

        align-content: stretch;
        align-items: center;
        gap: 3px 10px;

        margin: 0 auto;
    }

    .etape {
        width: 100%;
        height: 100%;
        padding: 3px 2px;

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

    .numero-etape {
        width: 25px;
        height: 25px;
        min-height: 25px;
        font-size: 12px;
        margin: 0 auto 4px;
    }

    .icone-etape {
        width: 25px;
        height: 25px;
        margin: 0 auto 3px;
        flex-shrink: 0;
    }

    .icone-etape img {
        width: 25px;
        height: 25px;
    }

    .etape h3 {
        font-size: clamp(10px, 2vw, 12px);
        line-height: 1.2;
        margin: 3px 0;
    }

    .etape p {
        font-size: clamp(9px, 1.8vw, 11px);
        line-height: 1.25;
    }

    .btn-fonctionnement {
        flex-shrink: 0;
        margin-top: 5px;
        padding: 7px 16px;
        font-size: 11px;
    }


    /* QUALITÉ DRIM PC */

    .qualite {
        height: calc(100svh - var(--header-height));
        min-height: 0;
        padding: 12px 5% 12px;
        overflow: hidden;
    }

    .qualite::before {
        height: 5px;
        margin-bottom: 10px;
        flex-shrink: 0;
    }

    .qualite h2 {
        font-size: clamp(18px, 4vw, 22px);
        margin-bottom: 7px;
        flex-shrink: 0;
    }

    .qualite-container {
        flex: 1;
        min-height: 0;
        width: 100%;

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

        align-content: stretch;
        align-items: center;
        gap: 3px 10px;

        margin: 0 auto;
    }

    .qualite-item,
    .qualite-item:nth-child(4) {
        grid-column: auto;
        width: 100%;
        height: 100%;
        max-width: none;
        margin: 0;
        padding: 3px 2px;

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

    /* Cinquième carte centrée en bas */

    .qualite-item:nth-child(5) {
        grid-column: 1 / -1;
        justify-self: center;
        width: 50%;
        max-width: 260px;
    }

    .qualite .icone-qualite {
        width: 27px;
        height: 27px;
        margin: 0 auto 3px;
        flex-shrink: 0;
    }

    .qualite .icone-qualite img {
        width: 25px;
        height: 25px;
    }

    .qualite-item h3 {
        font-size: clamp(10px, 2vw, 12px);
        line-height: 1.2;
        margin: 3px 0;
    }

    .qualite-item p {
        font-size: clamp(9px, 1.8vw, 11px);
        line-height: 1.25;
    }
}


/* PETITS TÉLÉPHONES */

@media (max-width: 480px) {

    .fonctionnement,
    .qualite {
        padding: 10px 4% 10px;
    }

    .fonctionnement::before,
    .qualite::before {
        width: 65%;
        margin-bottom: 8px;
    }

    .fonctionnement h2,
    .qualite h2 {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .fonctionnement-intro {
        font-size: 9px;
        margin-bottom: 5px;
    }

    .etapes-container,
    .qualite-container {
        column-gap: 6px;
        row-gap: 2px;
    }

    .etape h3,
    .qualite-item h3 {
        font-size: 10px;
    }

    .etape p,
    .qualite-item p {
        font-size: 9px;
        line-height: 1.2;
    }

    .numero-etape {
        width: 23px;
        height: 23px;
        min-height: 23px;
        font-size: 11px;
    }

    .icone-etape,
    .icone-etape img {
        width: 23px;
        height: 23px;
    }

    .qualite .icone-qualite {
        width: 24px;
        height: 24px;
    }

    .qualite .icone-qualite img {
        width: 22px;
        height: 22px;
    }

    .btn-fonctionnement {
        margin-top: 4px;
        padding: 6px 13px;
        font-size: 10px;
    }
}

/* =====================================================
   22. MENU STICKY — TYPOGRAPHIE ET SURVOL
===================================================== */

/* Ordinateurs : police légèrement réduite */

@media (min-width: 1201px) {
    .header .navigation a {
        font-size: 22px;
    }
}

/* Tablettes : conserver une taille adaptée */

@media (max-width: 1200px) and (min-width: 769px) {
    .header .navigation a {
        font-size: clamp(12px, 1.25vw, 15px);
    }
}

/* Survol orange et petit mouvement */

.header .navigation a {
    display: inline-block;
    transition:
        color 0.25s ease,
        transform 0.25s ease,
        text-shadow 0.25s ease;
}

.header .navigation a:hover {
    color: #FF8A24 !important;
    transform: translateY(-3px);
    text-shadow: 0 3px 12px rgba(255, 138, 36, 0.35);
}

/* Accessibilité clavier */

.header .navigation a:focus-visible {
    color: #FF8A24;
    outline: 2px solid #FF8A24;
    outline-offset: 4px;
}


/* =====================================================
   23. CORRECTIONS TABLETTES — SECTIONS ET BOUTON
===================================================== */

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

    /* Les sections peuvent grandir si nécessaire */

    .fonctionnement,
    .qualite {
        height: auto;
        min-height: calc(100svh - var(--header-height));
        overflow: visible;
        align-items: center;
        padding: 22px 5% 30px;
    }

    /* Les grilles restent dans le flux de la section */

    .etapes-container,
    .qualite-container {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        align-content: center;
        justify-items: stretch;
    }

    .etape,
    .qualite-item {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
        overflow-wrap: break-word;
    }

    /* Bouton Comment ça marche bien centré */

    .btn-fonctionnement {
        display: block;
        width: fit-content;
        max-width: 100%;
        margin: 20px auto 0;
        align-self: center;
        text-align: center;
    }
}

/* Sur les tablettes plus étroites : 2 colonnes */

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

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

    /* Cinquième carte Qualité centrée */

    .qualite-item:nth-child(5) {
        grid-column: 1 / -1;
        justify-self: center;
        width: 50%;
        max-width: 300px;
    }
}

/* Sur les tablettes larges : 3 colonnes */

@media (min-width: 1000px) and (max-width: 1200px) {

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

    .qualite-item:nth-child(5) {
        grid-column: auto;
        width: 100%;
        max-width: none;
    }
}

/* =====================================================
   24. BOUTONS — SURVOL ET ÉCRANS TACTILES
===================================================== */

/* Appareils avec une vraie souris : survol orange */

@media (hover: hover) and (pointer: fine) {

    .btn-fonctionnement:hover,
    .contact-button:hover,
    .bouton-devis:hover,
    .btn-devis:hover,
    #devis-form button:hover {
        background: var(--orange);
        color: #FFFFFF;
        border-color: var(--orange);
    }
}

/* Téléphones et écrans tactiles */

@media (hover: none) and (pointer: coarse) {

    .btn-fonctionnement,
    .contact-button,
    .bouton-devis,
    .btn-devis,
    #devis-form button {
        -webkit-tap-highlight-color: transparent;
        transition: background-color 0.25s ease,
                    color 0.25s ease,
                    transform 0.25s ease;
    }

    .btn-fonctionnement:active,
    .contact-button:active,
    .bouton-devis:active,
    .btn-devis:active,
    #devis-form button:active {
        background: var(--orange) !important;
        color: #FFFFFF !important;
        transform: scale(0.97);
    }
}