:root {
    --acti-blue:#0056a4;
    --acti-yellow:#ffd600;
}
a {
    text-decoration: none;
}
body{font-family:"Poppins",sans-serif;}
.topbar{font-size:.85rem;}
.navbar-nav .nav-link.active{font-weight:600;color:var(--acti-blue)!important;}
#hero h2{font-weight:700;color:var(--acti-yellow);}/* “Nouveauté” */
#hero h3{font-weight:700;color:var(--acti-blue);}/* “Sélection 2025” */
#features i{color:var(--acti-blue);}/* icônes bénéfices */

/* Couleurs personnalisées */
.bg-acti-blue {
    background-color: #0056A4;
}
.banner-dimmension {
    width: 100%!important;
    /* hauteur fluide : 180px sur mobile -> 400px sur grand écran */
    height: clamp(180px, 42vw, 400px)!important;
    object-fit: cover;
}

.personnalization-titles {
    color:  #0056A4;
    font-weight: bolder;
    text-decoration: underline;
    text-decoration-color:var(--acti-yellow);
    text-underline-offset: 5px;
    object-fit: cover;

}


.heigh-350 {
    /* hauteur fluide : 150px sur mobile -> 350px sur grand écran */
    height: clamp(150px, 34vw, 350px)!important;
}
.pointer {
    cursor: pointer;
}
.added-item-border {
    border: 3px solid!important;
}

.red {
    background-color: red;
}
.flex-space-beetween {
    display: flex;
    justify-content: space-between;
}
.nav-link {
    color: #222 !important;
}
.nav-link:hover {
    text-decoration: underline;
}
.btn-primary {
    background-color: #0056A4;
    border-color: #0056A4;
}
.btn-primary:hover {
    background-color: #003f7f;
    border-color: #003f7f;
}

.title-picto{
    color: #0056A4;
}

.text-acti-blue {
    color: #0056A4!important;
}
.hover-scale {
    transition: transform 0.2s ease;
}
.hover-scale:hover {
    transform: scale(1.02);
}

/*== Carousel ==*/
.hero-carousel {
    background: linear-gradient(to right, #0056a4 0%, #f8d400 100%);
    min-height: 380px;
}
.hero-text {
    max-width: 420px;
}
.hero-text h2, .hero-text h3 {
    color: white;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(255,255,255,0.7);
    border-radius: 50%;
}

/* ===== Grille pictogrammes ===== */
.picto-grid {
    display: grid;
    gap: 1.25rem;                 /* 20 px d’espace */
    grid-template-columns: repeat(5, 1fr);   /* 5 cartes par ligne desktop */
}

/* Effet léger au survol */
.picto-card img {
    transition: transform .2s ease;
}
.picto-card:hover img {
    transform: scale(1.05);
}
.object-fit-cover {
    object-fit: cover;
}

/* Vignettes produits : carré uniforme défini en CSS (technique padding-top,
   la plus compatible), photo entière visible (jamais coupée) sur fond blanc.
   Les !important forcent le carré même face aux styles Bootstrap .ratio */
.ratio-1x1 {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    padding-top: 100% !important;
    overflow: hidden !important;
}
.ratio-1x1::before {
    display: none !important;
}
.ratio-1x1 > *,
.ratio-1x1 img {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center;
    background-color: #fff;
    padding: 6px;
}
/* Cartes produits : titre et description tronqués pour une grille régulière */
.product-card .card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}
.product-card .card-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/*== Contact ==*/

.text-acti-blue{color:#0056A4!important;}
.contact-hero img{max-height:300px;object-fit:cover;}
.contact-form .form-control{border-radius:0;}
.contact-form textarea{resize:vertical;}


/*== Footer ==*/
.bg-acti-blue {
    background-color: #0056A4;
}

footer h6 {
    font-size: 0.85rem;
}
footer ul li {
    margin-bottom: 0.25rem;
}
footer a:hover {
    text-decoration: underline;
}

/* – 4 cartes ≥ 1200 px */
@media (max-width: 1199.98px) {
    .picto-grid { grid-template-columns: repeat(4, 1fr); }
}
/* – 3 cartes ≥ 992 px */
@media (max-width: 991.98px) {
    .picto-grid { grid-template-columns: repeat(3, 1fr); }
}
/* – 2 cartes < 768 px */
@media (max-width: 767.98px) {
    .picto-grid { grid-template-columns: repeat(2, 1fr); }
}

.fom-signin-btn {background-color: #007bff;
    border-color: #007bff;
}

.fom-signin-btn:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

/* Container styles */
.pagination {
    list-style: none; /* Remove list bullets */
    margin: 0;
    padding: 0;
    display: flex; /* Arrange items horizontally */
    justify-content: center; /* Center the pagination block */
    gap: 5px; /* Space between links */
}

/* Individual list item styles */
.page-item {
    margin: 0 1px;
}

/* Link styles (default, visited) */
.page-link {
    display: block;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px; /* Add rounded corners */
    text-decoration: none; /* Remove underlines */
    color: #007bff; /* Link color */
    background-color: #fff;
    transition: all 0.3s ease;
}

/* Hover effect for links */
.page-link:hover {
    background-color: #e9ecef;
    border-color: #0056b3;
    color: #0056b3;
}

/* Style for the active (current) page */
.page-item.active .page-link {
    background-color: #007bff; /* Active background color */
    color: white; /* Active text color */
    border-color: #007bff;
    font-weight: bold;
    cursor: default;
}

.page-item.active .page-link:hover {
    background-color: #007bff; /* Maintain color on hover for active link */
    color: white;
}

/* Style for disabled links (e.g., on the first or last page) */
.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none; /* Disable mouse events */
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ddd;
}

/* Target the list items */
.pagination ul li {
    display: block; /* Forces each list item onto a new line */
    margin: 4px 0;   /* Optional: adds some vertical spacing */
}

/* Ensure the links within still fill their container */
.pagination ul li a {
    display: block;
    padding: 5px 10px; /* Optional: improves clickable area */
}
/*  .flex-item {
      background-color: lightblue;
      border: 1px solid steelblue;
      padding: 15px;
      margin: 10px; !* Applies margin to all sides *!
      !* Or use specific margins for top/bottom *!
      !* margin-top: 15px; *!
      !* margin-bottom: 20px; *!
      width: 100px; !* Fixed width for items to demonstrate wrapping *!
      text-align: center;
  }*/

.jobs-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Creates two columns of equal width */
    gap: 10px; /* Optional: Adds spacing between grid items */
}
.cursor-pointer {
    cursor: pointer;
}

.ratio::before {
    display:block;
    padding-top:unset!important;
    content:""
}

.ratio>* {
    position: unset!important;
}

.job-grid-item {
    /* Add styling for individual grid items (e.g., borders, padding) */
    padding: 15px;
    position: relative;
    text-align: center;
    color: black;
}
.text-decoration-unset-important {
    text-decoration: unset!important;
}

.carousel-control-prev {
    left: -70px !important;
}

.carousel-control-next {
    right: -70px!important;
}

.job-title {
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bolder;
    /* taille fluide : lisible sur mobile sans déborder */
    font-size: clamp(.78rem, 2.5vw, 1.125rem);
    background: rgba(0, 0, 0, 0.45);
    padding: 8px clamp(8px, 2vw, 16px);
    border-radius: 6px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    /* le libellé passe à la ligne et reste DANS la carte (noms longs type
       "Agrolimentaire, Restauration et Anti-froid") */
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
    width: max-content;
    max-width: calc(100% - 24px);
    text-align: center;
    /* le libellé ne doit jamais intercepter le clic destiné à la carte */
    pointer-events: none;
}
.decoration-color {
    text-decoration: underline;
    text-decoration-color: white;
}

.decoration-color-blue {
    text-decoration: underline;
    text-decoration-color: blue;
}
.pd-r-170 {
    padding-right: 170px;
}

.pd-l-170 {
    padding-left: 170px;
}

.color-white {
    color: white;
}

.title-color {
    color: #0056A4!important;
}

.carousel {
    position: relative;
}
.carousel-control-prev , .carousel-control-next {
    position: absolute;
    top: 50%;
    transform: TranslateY(-50%);
}
.carousel-control-prev {
    right: auto;
    left: 20px;
}
.carousel-control-next {
    left: auto;
    right: 20px;
}

.personnalization-section {
    /* marge horizontale fluide : 16px sur mobile -> 150px sur grand écran */
    padding: 21px clamp(16px, 10vw, 150px);
}

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

/* Garde anti-débordement horizontal (aucune page ne doit scroller latéralement) */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
img, video, iframe, table {
    max-width: 100%;
}

/* Texte du hero : marge gauche fluide au lieu des 100px fixes */
.hero-text {
    min-width: 0 !important;
    margin-left: clamp(16px, 7vw, 100px) !important;
    margin-right: clamp(16px, 4vw, 40px);
}

/* Slider d'accueil : hauteur fluide + flèches ramenées DANS le cadre
   (elles étaient à -70px, donc masquées par overflow:hidden) */
.hero-carousel {
    min-height: clamp(260px, 55vw, 380px);
}
.hero-carousel .carousel-control-prev {
    left: clamp(6px, 2vw, 20px) !important;
    right: auto !important;
}
.hero-carousel .carousel-control-next {
    right: clamp(6px, 2vw, 20px) !important;
    left: auto !important;
}
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
    width: auto;
    opacity: .9;
}
.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon {
    width: 2rem;
    height: 2rem;
    background-size: 1rem 1rem;
}

/* Carte / iframe Google Maps : hauteur fluide */
.map-section, #map {
    height: clamp(280px, 45vw, 600px) !important;
}
.map-section iframe, #map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* ===== Page de résultats de recherche ===== */
.search-summary {
    border-bottom: 1px solid #e6ebf1;
    padding-bottom: 1rem;
}
.search-refine {
    width: 100%;
    max-width: 340px;
}
.search-refine .form-control {
    border-radius: 999px 0 0 999px;
}
.search-refine .btn {
    border-radius: 0 999px 999px 0;
    padding-inline: 1rem;
}
.search-empty {
    background: #f7f9fb;
    border: 1px solid #e6ebf1;
    border-radius: 12px;
}
.search-sort {
    width: auto;
    min-width: 150px;
    border-radius: 999px;
}
/* Surlignage du terme recherché dans les résultats */
mark.search-hl {
    background: #fff3b0;
    color: inherit;
    padding: 0 .12em;
    border-radius: 3px;
}
@media (max-width: 767.98px) {
    .search-refine { max-width: 100%; }
    .search-empty { padding: 2rem 1rem !important; }
}

/* ===== Filtres catalogue (sidebar des pages produits) ===== */
.catalog-filters h6 {
    letter-spacing: .04em;
    color: #1f2937;
    padding-bottom: .45rem;
    border-bottom: 2px solid var(--acti-yellow, #f8d400);
}
.catalog-filters ul a {
    display: block;
    padding: .35rem .55rem;
    border-radius: 6px;
    color: #0056A4;
    transition: background .15s ease, color .15s ease;
}
.catalog-filters ul a:hover {
    background: #eef4fa;
}
/* Sous-catégorie active */
.catalog-filters ul a.fw-bold {
    background: #0056A4;
    color: #fff !important;
}

@media (max-width: 767.98px) {
    /* Les filtres deviennent des puces compactes : les produits restent
       visibles sans avoir à scroller toute la liste des catégories */
    .catalog-filters {
        background: #f7f9fb;
        border: 1px solid #e6ebf1;
        border-radius: 10px;
        padding: 14px;
    }
    .catalog-filters h6 {
        font-size: .72rem;
        margin-bottom: .6rem !important;
    }
    .catalog-filters ul {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        margin-bottom: 1rem !important;
        max-height: 38vh;
        overflow-y: auto;
    }
    .catalog-filters ul li {
        margin: 0 !important;
    }
    .catalog-filters ul a {
        padding: .35rem .75rem;
        border: 1px solid #d6dfe8;
        border-radius: 999px;
        background: #fff;
        font-size: .82rem;
        white-space: nowrap;
    }
    /* Plus de grand vide sous la liste (le bloc marques a été retiré) */
    .catalog-filters ul { margin-bottom: 0 !important; }
}

/* Les tableaux longs scrollent dans leur conteneur plutôt que d'élargir la page */
.table-responsive, .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 991.98px) {
    /* Titres un peu plus compacts sur tablette */
    h1, .h1 { font-size: clamp(1.5rem, 4.5vw, 2.2rem); }
    h2, .h2 { font-size: clamp(1.3rem, 4vw, 1.9rem); }
}

@media (max-width: 767.98px) {
    /* Hero : texte centré et lisible, plus de décalage */
    .hero-text {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-inline: auto !important;
        max-width: 100%;
        text-align: center;
        padding: 20px 16px !important;
    }
    .hero-text h2 { font-size: 1.35rem; }
    .hero-text h3 { font-size: 1.05rem; }

    /* Slider : l'image passe sous le texte, hauteur maîtrisée */
    .hero-carousel .hero-image img {
        height: clamp(160px, 48vw, 240px) !important;
    }

    /* Cartes produits : titres/prix un poil plus petits */
    .product-card .card-title { font-size: .9rem; }
    .product-card .card-text { font-size: .8rem; }

    /* Sections : padding raisonnable */
    .personnalization-section { padding: 16px; }

    /* Pagination qui ne déborde pas */
    .pagination { flex-wrap: wrap; gap: 4px; }
}

@media (max-width: 575.98px) {
    /* Très petits écrans : pictos sur 2 colonnes déjà gérés, on réduit le texte */
    .picto-card span, .picto-card p { font-size: .78rem; }

    /* Barre du haut : téléphone + email passent à la ligne et restent lisibles */
    .topbar .container {
        justify-content: center !important;
        flex-wrap: wrap;
        gap: .4rem 1rem !important;
        font-size: .72rem;
        text-align: center;
    }

    /* Logo un peu plus compact pour laisser la place au burger */
    .navbar-brand img { height: 44px; }
}