@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');



:root {
    /* Couleurs */
    --blue: #009ef3;
    --orange: #ffcd05;

    /* Couleurs de bordure */
    --border-color: #dddddd;
    --border-color-dark: #676767;
    
    /* Border */
    --border-width: 1px;
    --border-style: solid;
    --border-color: #000000;
    --border: var(--border-width) var(--border-style) var(--border-color);

    /* fonts */ 
    --font-primary: "Outfit", sans-serif;

    /* taille container */ 
    --container-large : 1780px;
}

/* Application globale de la police */
body {
    font-family: var(--font-primary) !important;
    font-optical-sizing: auto;
    font-style: normal;
}

a, 
a:hover, 
a:focus, 
a:active,
button, 
input[type="button"], 
input[type="submit"],
.link_devis, 
.link_pdf,
.filter-group a,
.serie-link,
.produit-link,
.reset-filters,
[role="button"],
[onclick],
.clickable {
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: all 0s !important;
    animation: maintainCursor 0.1s forwards !important;
}

@keyframes maintainCursor {
    0%, 100% {
        cursor: pointer !important;
        pointer-events: auto !important;
    }
}

/* Désactive toute transition qui pourrait interférer */
* {
    transition: cursor 0s !important;
}


.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}



h1.entry-title {
    color: #ffffff;
    font-weight: 900;
    display: inline-block;
    padding: 10px;
    background-color: #000;
}

h2, h3 {
    color: #000;
}

/* Style pour le lien PDF */
.entry-header a[href$=".pdf"] {
    display: inline-flex;
    align-items: center;
    color: #000000;
    text-decoration: none;
    transition: color 0.3s ease;
    margin: 5px 0;
    font-weight: 600;
    text-transform: uppercase;
}

/* Style pour l'icône PDF */
.entry-header a[href$=".pdf"]::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-type-pdf" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4" /><path d="M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6" /><path d="M17 18h2" /><path d="M20 15h-3v6" /><path d="M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1z" /></svg>');
    margin-right: 8px;
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
}

/* Effets au survol */
.entry-header a[href$=".pdf"]:hover {
    color: var(--blue); 
}

.link_pdf::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-type-pdf" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4" /><path d="M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6" /><path d="M17 18h2" /><path d="M20 15h-3v6" /><path d="M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1z" /></svg>');
    margin-right: 8px;
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
}

.product-pdf-list {
    margin-bottom: 1rem;
}

h1.page-title {
    font-size: 42px;
    text-transform: none;
    font-size: 34px;
    font-weight: 700;
    display: inline-block;
    padding: 0 25px;
    background: #000;
    line-height: 60px;
    opacity: .8;
    filter: alpha(opacity=80);
    position: absolute;
    bottom: 25px;
    /* margin: 0 20px; */
    color: white;  
}



img {
    filter: grayscale(100%);
    transition: filter 0.4s ease-in-out;
    will-change: filter; /* Optimisation des performances */
}


img:hover, .single-produit img{
    filter: grayscale(0%);
}

.main-navigation .main-nav ul li a, .main-navigation .menu-toggle, .main-navigation .menu-bar-items {
    font-weight: 600;
    text-transform: uppercase;
}

.main-navigation a {
    font-size: 12px !important;
    font-weight: 600;
}


.page-header {
    position: relative;
}

/* Grille de produits */
.content-flex {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin: 2rem 0;
    order: 1;
}

/* Style des articles */
.produit {
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
    transition: transform 0.3s ease;
}


/* Container principal */
.produits-container {
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: 30px;
    margin: 2rem 0;
}

/* Sidebar des filtres */
.produits-filters {
    align-self: start;
    position: sticky;
    top: 50px;
    order: 2;
    margin-top: 30px;
}

div.title-line-wrapper {
    position: relative;
    margin-bottom:15px
}

div.title-line {
    overflow: hidden;
    position: relative;
    top: 19px;
    border-top-width: 1px;
    border-top-style:solid
}


.title-line-wrapper h3 {
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    float: left;
    height: 35px;
    line-height: 35px;
    margin-right: 16px;
    margin-bottom: 0;
    color: #000;
}

.filter-group {
    margin-bottom: 1.5rem;
}

.filter-group h4 {
    margin-bottom: 0.8rem;
    font-size: 1.1em;
}

.filter-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.filter-group li {
    margin-bottom: 0.5rem;
}

.filter-group a {
    color: #333;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.2s;
    font-size: 0.8rem;
}

.filter-group a:hover {
    background-color: #e0e0e0;
}

.filter-group li.active a {
    background-color: #000000;
    color: white;
}

.count {
    color: #666;
    font-size: 0.9em;
}

.active .count {
    color: #fff;
}

.reset-filters {
    display: inline-block;
    margin-top: 1rem;
    padding: 8px 15px;
    background-color: #dc3545;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: bold;
}

.reset-filters:hover {
    background-color: #c82333;
}

/* Responsive */
@media (max-width: 992px) {
    .produits-container {
        grid-template-columns: 1fr;
    }
    
    .produits-filters {
        position: relative;
        top: 0;
    }
}

/* Images des produits */
.post-type-archive-produit .produit .the_post_thumbnail {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.post-type-archive-produit .produit .the_post_thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.post-type-archive-produit .produit:hover .the_post_thumbnail img {
    transform: scale(1.05);
}

/* Titres des produits */
.produit h2 {
    padding: 1rem;
    margin: 0;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}

.produit h2 a {
    color: var(--contrast);
    text-decoration: none;
}

.produit h2 a:hover {
    color: var(--accent);
}

.post-type-archive-produit .produit .inside-article  {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.post-type-archive-produit .produit .entry-header {
    margin-top: auto; /* Pousse le header vers le bas */
    padding: 15px; /* Ajoute un peu d'espace autour du titre */
}

/* Responsive */
@media (max-width: 992px) {
    .post-type-archive-produit .produits-container {
        grid-template-columns: 1fr;
    }
    
    .produits-filters {
        position: relative;
        top: 0;
        order: 1; /* Réinitialise l'ordre sur mobile */
    }

    .content-flex {
        order: 2; /* Réinitialise l'ordre sur mobile */
        grid-template-columns: repeat(2, 1fr); /* Passe à 2 colonnes sur tablette */
    }
}

@media (max-width: 768px) {
    .content-flex {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 576px) {
    .content-flex {
        grid-template-columns: 1fr; /* Passe à 1 colonne sur mobile */
    }
}

/* Gestion des Articles */
.separate-containers .comments-area, .separate-containers .inside-article, .separate-containers .page-header, .separate-containers .paging-navigation {
    padding: 0 !important;
}

.archives-container {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    padding-right: 20vh;
    padding-left: 20vh;
    background-color: #000000;
}

/* Gestion des Bannière */

.banner-content {
    text-align: center;
}

/* Styles typographiques */
.banner-content h1 {
    font-size: clamp(2rem, 5vw, 3.5rem); /* Taille de police responsive */
    margin: 0;
}

.banner-content h2 {
    opacity: 0;
    animation: fadeIn 1s ease-in forwards;
    animation-delay: 0.5s; /* Délai avant le début de l'animation */
    background-color: black;
    padding: 15px 25px;
    color: white;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 0.5;
        transform: translateY(0);
    }
}

.banner-content .description {
    font-size: clamp(1rem, 2vw, 1.25rem);
    max-width: 65ch; /* Longueur de ligne optimale pour la lecture */
}


.banner-parallax {
    width: 100%;
    min-height: 40vh; /* Utilisation de vh pour une hauteur responsive */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: grid;
    place-items: center; /* Centrage parfait avec Grid */
}

.banner-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px; /* Ajustez selon vos besoins */
}



/* Media Queries pour la réactivité */
@media screen and (max-width: 1024px) {
    .archives-container {
        padding-right: 5vh;
        padding-left: 5vh;
    }
}

/* Ajustement pour mobiles */
@media screen and (max-width: 768px) {
    
    .archives-container {
        padding-right: 0;
        padding-left: 0;
    }

    .banner-grid {
        padding: 1rem;
        
    }

    .hide-on-mobile {
        display: none;
    }

    .banner-grid {
        padding: 1rem;
    }

    .banner-content {
        padding: 1.5rem;
        gap: 1rem;
    }

    .banner-parallax {
        background-attachment: scroll; /* Désactive le parallax sur mobile */
    }
}

.single h1.page-title {
    font-size: 2rem;
    position: revert;
    display: inline-block;
    padding: 0 25px;
    background: #000;
    opacity: .8;
    filter: alpha(opacity=80);
    color: white;  
    max-width: fit-content;
}

/* Gestion des Solutions */
/* Container principal */
.solutions-container {
    max-width: var(--container-large);  
    width: 100%;
    margin: 0 auto;
}

/* Grille des solutions */
.solutions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Exactement 2 colonnes égales */
    gap: 30px;
    margin: 2rem 0;
}

/* Style des items */
.solutions-grid-item {
    width: 100%;
    height: 100%;
    display: flex;
}

.solutions-grid-item h3.solution-subtitle {
    font-weight: 400;
    color: black;
}

.solutions-grid-item .entry-header h2.entry-title {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    line-height: 0.8rem
}

.solutions-grid-item .entry-header h2.entry-title a {
    font-size: 0.8rem;
    color: var(--blue); 
    text-transform: uppercase;
    font-weight: 900;
}



/* Ajustement de l'espacement dans les cartes */
.solutions-grid-item .inside-article {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.solutions-grid-item .entry-header {
    margin-top: auto;
}

.solutions-grid-item .post-image, 
.solutions-grid-item .entry-summary{
    margin-top: 0.5rem !important;
}

.solutions-grid-item .entry-summary{ 
    background-color: #000000;
    color: white;
    padding: 1rem;
    flex: 1;
}


/* Responsive */
@media (max-width: 768px) {
    .solutions-grid {
        grid-template-columns: 1fr; /* Une seule colonne sur mobile */
    }
    
    .solutions-container {
        padding: 0 15px;
    }
}

/* Style de l'image dans les solutions */
.solutions-grid-item .post-image {
    width: 100%;
    height: 250px; /* Hauteur fixe pour toutes les images */
    overflow: hidden;
}

.solutions-grid-item .post-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.solutions-grid-item .post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Assure que l'image couvre tout l'espace */
    object-position: center; /* Centre l'image */
}

.product-button-wrapper {
    margin-top: auto;
    text-align: right;
    padding-top: 20px;
}

/* Affichage des produits */
.single-produit .inside-article {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    font-size: 14px;
}

.single-produit .entry-header {
    margin-top: 0;
}

.single-produit .soustitre {
    background-color: black;
    padding: 1rem;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.single-produit .featured-image {
    margin-top: 0 !important;
}

.single-produit .description_technique {
    font-size: 14px;
}

@media (max-width: 768px) {
    .single-produit .inside-article{
        grid-template-columns: 1fr;
        grid-template-areas: 
            "col1"
            "col2";
    }
    
    .single-produit .inside-article-col:first-child {
        grid-area: col1;
    }
    
    .single-produit .inside-article-col:last-child {
        grid-area: col2;
    }
}

/* Gestion des boutons */

.product-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.product-action-btn {
    flex: 1;
}

.product-action-btn a {
    display: block;
    text-align: center;
    width: 100%;
}


.link_devis, .link_pdf {
    display: inline-block;
    padding: 12px 25px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    margin-top: 1rem;
    background-color: rgba(0, 0, 0, 0.1);
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 7px 5px rgba(0, 0, 0, 0.16);
    border: 1px rgba(215, 215, 215, 0.61) solid;
}

.link_devis:hover, .link_pdf:hover  {
    background-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);

}

.link_pdf::before {
    content: "📎"; /* Emoji PDF */
    margin-right: 8px;
}

.link_pdf:hover {
    background-color: #000000;
    color: #fff;
}

.link_devis::before {
    content: "💬"; /* Emoji PDF */
    margin-right: 8px;
}

.link_devis:hover {
    background-color: var(--blue);
    color: #fff;
}

.location-info {
    margin-bottom: 1rem;
}

.location-info .location-text {
    color: rgb(33, 115, 0);
    font-weight: 700;
}

/* Gestion de la série */
.serie_produit {
    margin-bottom: 2rem;
}

.serie_produit h6, .solutions_liees h6 {
    margin-top: 1rem;
    font-weight: 600;
    color: #000;
}

.serie-item {
    margin-bottom: 0.5rem;
}

.serie-link {
    color: #000;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.serie-link:hover {
    color: #666;
}

.serie-description {
    font-size: 0.9em;
    color: #666;
    margin-top: 0.5rem;
}


.serie_produit .produit-link {
    transition: color 0.3s ease;
    margin-bottom: 0.5rem;
}

.serie_produit .produit-link:hover {
    color: #000;
}

.single-solutions .solutions-grid {
    display: grid;
    grid-template-columns: 3fr 2fr; /* Colonnes égales 60/40 */
    gap: 2rem;
    margin: 2rem 0;
}

.single-solutions .imagewrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
}
.single-solutions .imagewrapper img {
    border: #000000 1px solid;
}

.single-solutions .imagewrapper .img1 { grid-area: 1 / 1 / 3 / 2; }
.single-solutions .imagewrapper .img2 { grid-area: 1 / 2 / 2 / 3; }
.single-solutions .imagewrapper .img3 { grid-area: 2 / 2 / 4 / 3; }
.single-solutions .imagewrapper .imgv4 { grid-area: 3 / 1 / 4 / 2; }

.single-solutions .imagewrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-solutions .imagewrapper > div {
    position: relative;
    overflow: hidden;
}

.solution-summary {
    background-color:rgb(240, 240, 240);
    color: #000000;
    padding: 1rem;
    flex: 1;
    margin-bottom: 2rem;
}

.single-solutions .solutions-thumbnail {
    width: 100%;
    margin-bottom: 2rem;
    border:var(--border);
}

.single-solutions .solutions-thumbnail img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.produits-solutions-list {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    margin: 0;
    padding: 0;
}

.produits-solutions-list li {
    margin: 0;
    padding: 0;
    margin-left: 20px;
}

.produits-solutions-list .produit-link {
    font-size: 0.8em;
    text-decoration: none; /* Optionnel : enlève le soulignement */
    display: inline-block;
    padding: 2px 0; /* Optionnel : ajoute un peu d'espace vertical pour une meilleure lisibilité */
}

@media (max-width: 768px) {
    .single-solutions .imagewrapper {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
    }

    .single-solutions .imagewrapper .img1 { grid-area: 1 / 1 / 2 / 2; }
    .single-solutions .imagewrapper .img2 { grid-area: 2 / 1 / 3 / 2; }

    .single-solutions .imagewrapper .img3 { grid-area: 3 / 1 / 4 / 2; }
    .single-solutions .imagewrapper .imgv4 { grid-area: 4 / 1 / 5 / 2; }
    .single-solutions .solutions-grid {
        grid-template-columns: 1fr; /* Passage en une seule colonne sur mobile */
    }
}
.produits_liees {
    margin : 2rem 0;
}

figure.banner-location {
    margin-bottom: 1rem;
    max-width: 1780px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}
.banner-location a{
    width: 100%;
}
.banner-location img{
    width: 100% !important; 
}

.block-solutions p{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.block-solutions p a {
    text-decoration: none;
    width: 100%;
}

.domainesintervention {
    padding: 10px;
}

/* Pre-footer */
.pre-footer {
    background-color: #151515;
    padding: 60px 0;
    color:  #949494;
    font-size: 0.8rem;
}

.pre-footer-container {
    max-width: 1780px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.pre-footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.pre-footer h3 {
    color: white;
    font-weight: 700;  
    font-size: 0.9rem;
    text-transform: uppercase;
    line-height: 1;
}

.pre-footer h4 {
    color: white;
    font-weight: 700;  
    font-size: 0.9rem;
    text-transform: uppercase;
}


.footer-column {
    display: flex;
    flex-direction: column;
}

.footer-logo {
    max-width: 300px;
    margin-bottom: 10px;
}

.pre-footer-grid h4, 
.pre-footer-grid h5, 
.pre-footer-grid h6 {
    margin-bottom: 10px;
}


.contact-info {
    margin-bottom: 10px;
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li {
    margin-bottom: 5px;
}

.pre-footer a {
    color: #949494;
    transition: color 0.5s ease;
    text-decoration: none;
    text-transform: uppercase;
}

.pre-footer a:hover {
    color: #fff;
}

@media (max-width: 768px) {
    .pre-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .pre-footer-grid {
        grid-template-columns: 1fr;
    }
}

.contact-info .icon {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
    width: 24px;
    height: 24px;
}

.contact-info .icon svg {
    width: 100%;
    height: 100%;
    stroke: #949494;
}

.contact-info p, 
.contact-info div {
    display: flex;
    align-items: flex-start;
}

.contact-info a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.contact-info a:hover {
    color: white;
}

.contact-info a:hover svg {
    stroke: white; 
}


input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea, select {

    background-color: #e0e0e0 !important;
}

.wpcf7-form h4 {
    color: black;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1rem;
    margin-bottom: 10px !important;
}

.wpcf7-list-item {
   margin: 0 !important;
   margin-right: 5px !important;
}

.wpcf7-list-item:hover {
    background-color: #e0e0e0 !important;
}

.wpcf7-form input[type="checkbox"],
.wpcf7-acceptance input[type="checkbox"] {
    width: 17px !important;
    height: 17px !important;
    cursor: pointer;
    accent-color: black;
    margin-right: 5px !important;
}

.wpcf7-acceptance .wpcf7-list-item {
    display: flex;
    align-items: center;
    padding: 20px !important;
    border: 1px solid #e0e0e0 !important;
}

.wpcf7-acceptance .wpcf7-list-item:hover {
    background-color: #dbfbe9 !important;
}


.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Deux colonnes de taille égale */
    gap: 20px; /* Espacement entre les colonnes */
  }
  
  .form-column {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espacement entre les champs */
  }
  
  /* Pleine largeur pour le message */
  textarea {
    width: 100%;
    min-height: 150px;
  }
  
  /* Responsive : Afficher en une seule colonne sur petits écrans */
  @media (max-width: 768px) {
    .form-grid {
      grid-template-columns: 1fr; /* Une seule colonne sur mobile */
    }
  }
  
  .container.grid-container {
    padding: 0 20px !important;
  }