.accueil-categorie-bois {
    --couleur-titre: #7a4b28;

    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    align-items: stretch;
    padding: calc(var(--hauteur-menu) + 16px) 8% 32px;

    background-image:
        linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
        url("../images/fond-bois.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.contenu-categorie-bois {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.contenu-categorie-bois h1 {
    margin: 0;
    color: var(--couleur-titre);
    font-family: "Roboto", Arial, sans-serif;
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-style: italic;
    font-weight: 500;
}

.vignettes-sous-categories {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.bloc-sous-categorie {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
}

.titre-sous-categorie {
    color: var(--couleur-titre, navy);
    font-family: "Roboto", Arial, sans-serif;
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
}

.vignette-sous-categorie {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 14px;
    background-color: white;
    background-position: center;
    background-size: cover;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.vignette-structure {
    background-image: url("../images/vign-structure.jpg");
}

.vignette-contreplaque {
    background-image: url("../images/vign-contreplaque.jpg");
}

.vignette-colle {
    background-image: url("../images/vign-colle.jpg");
}

.vignette-entoilage {
    background-image: url("../images/vign-entoilage.jpg");
}

@media (max-width: 700px) {
    .accueil-categorie-bois {
        height: auto;
        padding: calc(var(--hauteur-menu) + 24px) 22px 24px;
    }

    .contenu-categorie-bois {
        min-height: 180px;
    }

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

.accueil-categorie-propulsion {
    --couleur-titre: navy;

    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    align-items: stretch;
    padding: calc(var(--hauteur-menu) + 16px) 8% 32px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
        url("../images/articles/gmp/moteur3-rz.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.contenu-categorie-propulsion {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.contenu-categorie-propulsion h1 {
    margin: 0;
    color: var(--couleur-titre);
    font-family: "Roboto", Arial, sans-serif;
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-style: italic;
    font-weight: 500;
}

@media (max-width: 700px) {
    .accueil-categorie-propulsion {
        height: auto;
        padding: calc(var(--hauteur-menu) + 24px) 22px 24px;
    }

    .contenu-categorie-propulsion {
        min-height: 180px;
    }
}

.vignette-moteurs {
    background-image: url("../images/articles/gmp/moteur-prop.png");
}

.vignette-helices {
    background-image: url("../images/articles/gmp/helice2.jpg");
}

.vignette-circuit-carburant {
    background-image: url("../images/articles/gmp/cirCarb.jpg");
}

.vignette-electricite-moteur {
    background-image: url("../images/articles/gmp/cirElect2.jpeg");
}

.accueil-categorie-cabine {
    --couleur-titre: navy;

    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    align-items: stretch;
    padding: calc(var(--hauteur-menu) + 16px) 8% 32px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
        url("../images/articles/cabine/cabinePage2.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.contenu-categorie-cabine {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.contenu-categorie-cabine h1 {
    margin: 0;
    color: var(--couleur-titre);
    font-family: "Roboto", Arial, sans-serif;
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-style: italic;
    font-weight: 500;
}

.vignette-verriere {
    background-image: url("../images/articles/cabine/verriere/canopy1.jpg");
}

.vignette-equipement-cab {
    background-image: url("../images/articles/cabine/equipement-cab/aeration-option/8ventilcanop.webp");
}

.vignette-amenagement-cab {
    background-image: url("../images/articles/cabine/amenagement-cab/sieges-structure-anti-retournement-et-installation-des-harnais/siege1.resized.png");
}

@media (max-width: 700px) {
    .accueil-categorie-cabine {
        height: auto;
        padding: calc(var(--hauteur-menu) + 24px) 22px 24px;
    }

    .contenu-categorie-cabine {
        min-height: 180px;
    }

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

.accueil-categorie-hors-structure {
    --couleur-titre: navy;

    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    align-items: stretch;
    padding: calc(var(--hauteur-menu) + 16px) 8% 32px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
        url("../images/articles/hors-structure/uc1.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.contenu-categorie-hors-structure {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.contenu-categorie-hors-structure h1 {
    margin: 0;
    color: var(--couleur-titre);
    font-family: "Roboto", Arial, sans-serif;
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-style: italic;
    font-weight: 500;
}

.vignette-cdv {
    background-image: url("../images/articles/hors-structure/FlightControl.resized.png");
}

.vignette-gouvernes {
    background-image: url("../images/articles/hors-structure/cdv.png");
}

.vignette-volets-af {
    background-image: url("../images/articles/hors-structure/flapSlat.resized.png");
}

.vignette-train {
    background-image: url("../images/articles/hors-structure/UC.jpeg");
}

@media (max-width: 700px) {
    .accueil-categorie-hors-structure {
        height: auto;
        padding: calc(var(--hauteur-menu) + 24px) 22px 24px;
    }

    .contenu-categorie-hors-structure {
        min-height: 180px;
    }

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

.accueil-categorie-instruments {
    --couleur-titre: navy;

    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    align-items: stretch;
    padding: calc(var(--hauteur-menu) + 16px) 8% 32px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
        url("../images/articles/instruments/instrument2.resized.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.contenu-categorie-instruments {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.contenu-categorie-instruments h1 {
    margin: 0;
    color: var(--couleur-titre);
    font-family: "Roboto", Arial, sans-serif;
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-style: italic;
    font-weight: 500;
}

.vignette-tableau-bord {
    background-image: url("../images/articles/instruments/tb3-1024x905.jpg");
}

.vignette-instrumentation {
    background-image: url("../images/articles/instruments/inst1.resized.jpg");
}

.vignette-circuit-air {
    background-image: url("../images/articles/instruments/air1.resized.jpg");
}

@media (max-width: 700px) {
    .accueil-categorie-instruments {
        height: auto;
        padding: calc(var(--hauteur-menu) + 24px) 22px 24px;
    }

    .contenu-categorie-instruments {
        min-height: 180px;
    }

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

.accueil-categorie-electricite {
    --couleur-titre: navy;

    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    align-items: stretch;
    padding: calc(var(--hauteur-menu) + 16px) 8% 32px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
        url("../images/articles/electricite/elec3.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.contenu-categorie-electricite {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.contenu-categorie-electricite h1 {
    margin: 0;
    color: var(--couleur-titre);
    font-family: "Roboto", Arial, sans-serif;
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-style: italic;
    font-weight: 500;
}

.vignette-generation {
    background-image: url("../images/articles/electricite/generation.jpg");
}

.vignette-cablage-avion {
    background-image: url("../images/articles/electricite/elec1.jpg");
}

.vignette-cablage-tableau-bord {
    background-image: url("../images/articles/electricite/electTB.jpg");
}

@media (max-width: 700px) {
    .accueil-categorie-electricite {
        height: auto;
        padding: calc(var(--hauteur-menu) + 24px) 22px 24px;
    }

    .contenu-categorie-electricite {
        min-height: 180px;
    }

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

.accueil-categorie-construction {
    --couleur-titre: navy;

    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    align-items: stretch;
    padding: calc(var(--hauteur-menu) + 16px) 8% 32px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
	url("../images/articles/construction-generale/page-construction.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.contenu-categorie-construction {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.contenu-categorie-construction h1 {
    margin: 0;
    color: var(--couleur-titre);
    font-family: "Roboto", Arial, sans-serif;
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-style: italic;
    font-weight: 500;
}

.vignette-generalites-construction {
    background-image: url("../images/articles/construction-generale/00construc.webp");
}

.vignette-finitions-peinture {
    background-image: url("../images/articles/construction-generale/00paintpage-e1783625350928.webp");
}

.vignette-atelier {
    background-image: url("../images/articles/construction-generale/1atelier.webp");
}

.vignette-outillage-quincaillerie {
    background-image: url("../images/articles/construction-generale/boitaclou-e1777617321353.png");
}

@media (max-width: 700px) {
    .accueil-categorie-construction {
        height: auto;
        padding: calc(var(--hauteur-menu) + 24px) 22px 24px;
    }

    .contenu-categorie-construction {
        min-height: 180px;
    }

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

body {
    background-color: #ffffff;
}

.accueil-categorie-voler {
    --couleur-titre: navy;

    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    align-items: stretch;
    padding: calc(var(--hauteur-menu) + 16px) 8% 32px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.68)),
        url("../images/articles/voler/00voler.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.contenu-categorie-voler {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.contenu-categorie-voler h1 {
    margin: 0;
    color: var(--couleur-titre);
    font-family: "Roboto", Arial, sans-serif;
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-style: italic;
    font-weight: 500;
}

.vignette-aerodynamique {
    background-image: url("../images/articles/voler/aerodyn.png");
}

.vignette-le-vol {
        background-image: url("../images/articles/voler/volerCat.gif");
}

.vignette-securite-vol {
        background-image: url("../images/articles/voler/00secuvol.jpg");
}

@media (max-width: 700px) {
    .accueil-categorie-voler {
        height: auto;
        padding: calc(var(--hauteur-menu) + 24px) 22px 24px;
    }

    .contenu-categorie-voler {
        min-height: 180px;
    }

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

.accueil-categorie-reglementation-fournisseurs {
    --couleur-titre: navy;

    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    align-items: stretch;
    padding: calc(var(--hauteur-menu) + 16px) 8% 32px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
        url("../images/articles/reglementation-fournisseurs/reglFourn.resized.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.contenu-categorie-reglementation-fournisseurs {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.contenu-categorie-reglementation-fournisseurs h1 {
    margin: 0;
    color: var(--couleur-titre);
    font-family: "Roboto", Arial, sans-serif;
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-style: italic;
    font-weight: 500;
}


.vignette-reglementation {
    background-image: url("../images/articles/reglementation-fournisseurs/hammer-2.webp");
}

.vignette-fournisseurs {
    background-image: url("../images/articles/reglementation-fournisseurs/00fourniss.webp");
}

@media (max-width: 700px) {
    .accueil-categorie-reglementation-fournisseurs {
        height: auto;
        padding: calc(var(--hauteur-menu) + 24px) 22px 24px;
    }

    .contenu-categorie-reglementation-fournisseurs {
        min-height: 180px;
    }
}

.accueil-categorie-divers {
    --couleur-titre: navy;

    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    align-items: stretch;
    padding: calc(var(--hauteur-menu) + 16px) 8% 32px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
        url("../images/articles/divers/divers.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.contenu-categorie-divers {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.contenu-categorie-divers h1 {
    margin: 0;
    color: var(--couleur-titre);
    font-family: "Roboto", Arial, sans-serif;
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-style: italic;
    font-weight: 500;
}

.vignette-astuces {
    background-image: url("../images/articles/divers/trcky-281x300.png");
}

.vignette-inclassables {
    background-image: url("../images/articles/divers/inclass.jpg");
}

@media (max-width: 700px) {
    .accueil-categorie-divers {
        height: auto;
        padding: calc(var(--hauteur-menu) + 24px) 22px 24px;
    }

    .contenu-categorie-divers {
        min-height: 180px;
    }

    .vignettes-sous-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.contenu-categorie-divers h1 {
    margin: 0;
    color: var(--couleur-titre);
    font-family: "Roboto", Arial, sans-serif;
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-style: italic;
    font-weight: 500;
}

.vignette-astuces {
    background-image: url("../images/articles/divers/trcky-281x300.png");
}

.vignette-inclassables {
    background-image: url("../images/articles/divers/inclass.jpg");
}

@media (max-width: 700px) {
    .accueil-categorie-divers {
        height: auto;
        padding: calc(var(--hauteur-menu) + 24px) 22px 24px;
    }

    .contenu-categorie-divers {
        min-height: 180px;
    }

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

.accueil-categorie-metal {
    --couleur-titre: #536b78;

    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    align-items: stretch;
    padding: calc(var(--hauteur-menu) + 16px) 8% 32px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65)),
        url("../images/fond-metal.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.contenu-categorie-metal {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.contenu-categorie-metal h1 {
    margin: 0;
    color: var(--couleur-titre);
    font-family: "Roboto", Arial, sans-serif;
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-style: italic;
    font-weight: 500;
}

.vignette-acier {
    background-image: url("../images/articles/metal/trussMetal2.jpg");
}

.vignette-aluminium {
    background-image: url("../images/articles/metal/sheetMetal.jpg");
}

@media (max-width: 700px) {
    .accueil-categorie-metal {
        height: auto;
        padding: calc(var(--hauteur-menu) + 24px) 22px 24px;
    }

    .contenu-categorie-metal {
        min-height: 180px;
    }

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

.accueil-categorie-composite {
    --couleur-titre: #4f6b65;

    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    align-items: stretch;
    padding: calc(var(--hauteur-menu) + 16px) 8% 32px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65)),
        url("../images/fond-composite.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.contenu-categorie-composite {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.contenu-categorie-composite h1 {
    margin: 0;
    color: var(--couleur-titre);
    font-family: "Roboto", Arial, sans-serif;
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-style: italic;
    font-weight: 500;
}

.vignette-generalites-composites {
    background-image: url("../images/articles/composite/compoGen.jpg");
}

.vignette-resines {
    background-image: url("../images/articles/composite/epoxy-e1748274859798.jpg");
}

.vignette-tissus-composites {
    background-image: url("../images/articles/composite/compo3.jpeg");
}

@media (max-width: 700px) {
    .accueil-categorie-composite {
        height: auto;
        padding: calc(var(--hauteur-menu) + 24px) 22px 24px;
    }

    .contenu-categorie-composite {
        min-height: 180px;
    }

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

[class*="accueil-categorie-"] h1,
[class*="accueil-categorie-"] .titre-sous-categorie {
    text-shadow: 1px 1px 0 #fff;
}

.vignette-sous-categorie {
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #999;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}