/* upgrade.css */
:root {
    /* Couleurs principales */
    --color-primary: #00a2a6; /* bleu principal par exemple */
    --color-secondary: #7d8079; /* rouge secondaire par exemple */

    /* Vous pouvez aussi définir d’autres variables utiles : */
    --color-background: #f5f5f5;
    --color-text: #333333;
    --spacing-base: 1rem;
}

@font-face {
    font-family: "Segoe UI";
    src: url("../fonts/Segoe UI.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Segoe UI";
    src: url("../fonts/Segoe UI Bold.ttf");
    font-weight: bold;
    font-style: normal;
}

/* =============================
   1. Style pour le titre H1
   ============================= */
.titre {
    font-family: "Segoe UI", sans-serif !important;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 600;
    margin: 0; /* On gère l’espacement depuis l’extérieur ou via un wrapper */
    line-height: 1.2; /* Pour que le texte ne soit pas trop compressé verticalement */
    letter-spacing: 6px;
}

/* Classes pour colorer les mots à l’intérieur du H1 */
.titre .col-primary {
    color: var(--color-primary);
}

.titre .col-secondary {
    color: black;
}

/* =============================
   2. Style pour la ligne (<hr>)
   ============================= */
.underline-titre {
    box-sizing: border-box;
    border-top: 4px solid var(--color-primary);
    width: 200px;
    height: 0;
    margin: 10px auto 25px;
    padding-top: 15px;
    position: relative;
    display: block;
    opacity: 1 !important;
}
/* --- Styles complémentaires facultatifs (ajustez à vos couleurs) --- */
.grid-icon {
    max-width: 100px;       /* largeur max d’une icône */
    margin-bottom: 0.5rem;  /* espace entre icône et légende */
}
.grid-item {
    padding: 1rem 0;        /* espace haut/bas de chaque cellule */
}
.grid-caption {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 3px;
    line-height: 31px;
    color: var(--color-secondary);
    text-align: center;
    margin: 0 0 15px 0;
    padding: 0;
}
.grid-caption a {
    color: inherit;          /* Hérite de la couleur var(--color-secondary) */
    text-decoration: none;   /* Retire le soulignement par défaut */
    display: inline-block;   /* Permet de centrer et contrôler l’espace si besoin */
    width: 100%;             /* Prend toute la largeur du conteneur pour que le lien englobe tout le texte */
}
/* Sur la 2ᵉ ligne, cellule centrale (logo “My SIPR”) */
.grid-logo {
    max-width: 120px;
    margin-bottom: 0.75rem;
}
/* Pour centrer verticalement la ligne 3 si vous n’avez que 2 éléments */
.row-empty {
    visibility: hidden;
}
/* =======================================================
   Hero Banner : fond image + calque de couleur + texte
   ======================================================= */
.hero-banner {
    position: relative;
    width: 100%;
    height: 300px; /* Ajustez la hauteur à votre guise (300px, 350px, 400px, etc.) */
    background-image: url('/wp-content/uploads/2017/08/depuis1931.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Calque coloré semi-transparent couvrant tout le hero */
.hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Ici la couleur turquoise #00a2a6 avec opacité 0.8 (80%) :
       vous pouvez adapter le RGBA pour changer l’intensité. */
    background-color: rgba(0, 162, 166, 0.4);
    z-index: 1;
}

/* Contenu textuel (h2) centré */
.hero-content {
    position: relative;
    z-index: 2; /* Au-dessus du calque semi-transparent */
    text-align: center;
    padding: 0 1rem; /* Un petit padding horizontal pour ne pas coller aux bords sur mobile */
}

/* Style du titre */
.hero-title {
    margin: 0;
    font-family: 'Open Sans', sans-serif; /* Adaptez à votre police si besoin */
    font-size: 1.75rem;      /* Sur mobile/téléphone, ajustez à environ 1.5rem si nécessaire */
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;          /* Texte en blanc */
}

/* Responsive : augmenter la taille du texte sur tablette/desktop */
@media(min-width: 576px) {
    .hero-title {
        font-size: 2.25rem; /* Par exemple, 2.25rem sur écran ≥ 576px */
    }
}

@media(min-width: 992px) {
    .hero-banner {
        height: 400px; /* Plus grand sur desktop */
    }
    .hero-title {
        font-size: 2.75rem; /* Texte plus imposant sur écran large */
    }
}
/* ================================
   2. Styles pour la section “3 entités”
   ================================ */

/* 1. Conteneur général (facultatif) */
.service-item {
    margin-bottom: 2rem; /* Espace entre les lignes sur mobile/tablette */
}

/* 2. Logo de chaque service */
.service-logo {
    max-width: 120px; /* Ajustez selon la taille max désirée */
    margin-bottom: 1rem;
}

/* 3. Titre (service-title) */
.service-title {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 29px;
    text-transform: uppercase;
    color: rgb(116, 119, 111); /* #74776F */
    margin: 0 0 15px 0;        /* margin-bottom: 15px */
    padding: 0;
    width: auto;               /* Laisse Bootstrap gérer la largeur */
    text-align: center;
}

/* 4. Description (service-text) */
.service-text {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 22px;
    color: rgb(116, 119, 111); /* #74776F */
    text-align: center;
    margin: 0 0 25px 0;        /* margin-bottom: 25px */
    padding: 0;
    width: auto;               /* Laisse Bootstrap gérer la largeur */
}

/* 5. Bouton générique (btn-service) */
.btn-service {
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;            /* Texte blanc */
    padding: 0.75rem 1.5rem;    /* 12px haut/bas, 24px gauche/droite environ */
    border: none;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

/* 5.1. Couleurs spécifiques pour chaque bouton à l’état normal */
.btn-cerp {
    background-color: #00afaf;
}

.btn-madsipr {
    background-color: #96bd0d;
}

.btn-dicophar {
    background-color: #008292;
}

/* 5.2. Survol : tous les boutons deviennent #5e74bf */
.btn-service:hover,
.btn-service:focus {
    background-color: #5e74bf !important;
    color: #ffffff !important;
}

/* 6. Pour être sûr que l’icône + texte + bouton restent centrés dans leur colonne */
.service-item img,
.service-item .service-title,
.service-item .service-text,
.service-item .btn-service {
    margin-left: auto;
    margin-right: auto;
}

/* 7. Responsive (facultatif) : espacer davantage sur grand écran */
@media (min-width: 992px) {
    .service-item {
        margin-bottom: 0; /* Plus d’espacement vertical si désiré */
    }
}

/* ================================
   Styles pour les boutons "EN SAVOIR PLUS"
   ================================ */

/* Bouton générique (btn-service) */
.btn-service {
    display: inline-block;
    box-sizing: border-box;
    width: 215px;              /* Largeur fixe approximative */
    height: 58px;              /* Hauteur fixe */
    padding: 20px 24px;        /* 20px haut/bas, 24px gauche/droite */
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 18px;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #00afaf; /* Valeur par défaut (sera surchargée par .btn-cerp, .btn-madsipr, .btn-dicophar) */
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    box-shadow: none;
    white-space: nowrap;       /* Empêche le passage à la ligne */
    transition: background-color 0.3s ease;
}

/* Couleurs spécifiques pour chaque bouton à l’état normal */
.btn-cerp {
    background-color: #00afaf; /* CERP : #00afaf */
}

.btn-madsipr {
    background-color: #96bd0d; /* madSIPR : #96bd0d */
}

.btn-dicophar {
    background-color: #008292; /* Dicophar : #008292 */
}

/* Survol : tous les boutons deviennent #5e74bf */
.btn-service:hover,
.btn-service:focus {
    background-color: #5e74bf !important;
    color: #ffffff !important;
}

.nos-actus {
    position: relative;
    width: 100%;
    height: 300px; /* Ajustez la hauteur à votre guise (300px, 350px, 400px, etc.) */
    background-image: url('/wp-content/uploads/2017/08/fondactualites.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.accroche-banner {
    position: relative;
    width: 100%;
    height: 250px;
    background-image: url('/wp-content/uploads/2017/08/nousrepondonsbande.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Calque coloré semi-transparent couvrant tout le hero */
.accroche-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Ici la couleur turquoise #00a2a6 avec opacité 0.8 (80%) :
       vous pouvez adapter le RGBA pour changer l’intensité. */
    background-color: rgba(0, 162, 166, 0.4);
    z-index: 1;
}

/* Contenu textuel (h2) centré */
.accroche-content {
    position: relative;
    z-index: 2; /* Au-dessus du calque semi-transparent */
    text-align: center;
    padding: 0 1rem; /* Un petit padding horizontal pour ne pas coller aux bords sur mobile */
}

/* Style du titre */
.accroche-title {
    margin: 0;
    font-family: 'Open Sans', sans-serif; /* Adaptez à votre police si besoin */
    font-size: 2.75rem;      /* Sur mobile/téléphone, ajustez à environ 1.5rem si nécessaire */
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;          /* Texte en blanc */
}

/* ================================================
   Styles pour la section “Offres & Demandes d’emploi”
   ================================================ */

/* 1. Espace vertical pour la section */
.form-item {
    margin-bottom: 2rem;
}

/* 2. Bannière (image du haut) */
.form-banner {
    max-width: 100%;          /* Elle prend toute la largeur disponible */
    height: auto;             /* Proportionnel à la largeur */
    display: block;
    margin: 0 auto 1.5rem;    /* Centre et espace sous l’image */
}

/* 3. Icône juste en dessous de la bannière */
.form-icon {
    max-width: 80px;          /* Ajustez si besoin (ex. 60px, 100px…) */
    height: auto;
    display: block;
    margin: 0 auto 0.75rem;   /* Centre et espace sous l’icône */
}

/* 4. Conteneur regroupant icône + titre (facultatif, pour alignement) */
.form-icon-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 5. Titre sous l’icône (“FORMULAIRE D’OFFRES” / “FORMULAIRE DE DEMANDES”) */
.form-title {
    box-sizing: border-box;
    color: rgb(116, 119, 111);          /* Couleur gris #74776F environ */
    cursor: pointer;                    /* Si vous voulez un effet “clickable” */
    display: inline-block;              /* Pour respecter largeur automatique */
    font-family: "Segoe UI", sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 29px;
    text-align: center;
    text-decoration: none;              /* Pas de soulignement */
    text-transform: uppercase;
    width: auto;                        /* Laisse la largeur nécessaire au texte */
    margin: 0;                          /* Pas de marge additionnelle */
    padding: 0;
}

.form-title a {
    box-sizing: border-box;
    color: rgb(116, 119, 111);          /* Couleur gris #74776F environ */
    cursor: pointer;                    /* Si vous voulez un effet “clickable” */
    display: inline-block;              /* Pour respecter largeur automatique */
    font-family: "Segoe UI", sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 29px;
    text-align: center;
    text-decoration: none;              /* Pas de soulignement */
    text-transform: uppercase;
    width: auto;                        /* Laisse la largeur nécessaire au texte */
    margin: 0;                          /* Pas de marge additionnelle */
    padding: 0;
}

/* 6. Si vous voulez un :hover sur le titre (changement de teinte, par exemple) */
.form-title:hover {
    color: rgb(95, 95, 95); /* Un gris un peu plus sombre au survol (facultatif) */
}

/* 7. Responsive : éventuellement réduire la taille du titre sur très petit écran */
@media (max-width: 400px) {
    .form-title {
        font-size: 17px;
        line-height: 26px;
    }
}

.service2-banner {
    position: relative;
    width: 100%;
    height: 250px;
    background-image: url('/wp-content/uploads/2017/08/uneequipebande.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Calque coloré semi-transparent couvrant tout le hero */
.service2-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Ici la couleur turquoise #00a2a6 avec opacité 0.8 (80%) :
       vous pouvez adapter le RGBA pour changer l’intensité. */
    background-color: rgba(0, 162, 166, 0.4);
    z-index: 1;
}

/* Contenu textuel (h2) centré */
.service2-content {
    position: relative;
    z-index: 2; /* Au-dessus du calque semi-transparent */
    text-align: center;
    padding: 0 1rem; /* Un petit padding horizontal pour ne pas coller aux bords sur mobile */
}

/* Style du titre */
.service2-title {
    margin: 0;
    font-family: 'Open Sans', sans-serif; /* Adaptez à votre police si besoin */
    font-size: 2.75rem;      /* Sur mobile/téléphone, ajustez à environ 1.5rem si nécessaire */
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;          /* Texte en blanc */
}

.subtitle-videos-photos {
    color: var(--color-secondary);
}

/* ==============================================
   Override pagination Swiper
   ============================================== */
.swiper-container-home .swiper-pagination.swiper-pagination-home {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    height: auto !important;
    z-index: 20 !important;
}

/* bullets */
.swiper-container-home .swiper-pagination-home .swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    margin: 0 6px !important;
    background: #eee !important;
    opacity: 0.6 !important;
    transition: opacity .3s ease !important;
}

.swiper-container-home .swiper-pagination-home .swiper-pagination-bullet-active {
    opacity: 1 !important;
    background: #007aff !important;
}

.swiper-pagination-bullet-active {
    opacity: 1 !important;
    background: #007aff !important;
}

/* ==============================================
   Override pagination Swiper (flex + centrage)
   ============================================== */
.swiper-container-home .swiper-pagination-home {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
    z-index: 20 !important;
    /* on annule tout calcul JS */
    margin: 0 !important;
    padding: 0 !important;
}

/* bullets */
.swiper-container-home .swiper-pagination-home .swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    margin: 0 6px !important;
    background: #d6d6d6 !important;
    opacity: 0.6 !important;
    transition: opacity .3s ease !important;
}

/* bullet active */
.swiper-container-home .swiper-pagination-home .swiper-pagination-bullet-active {
    opacity: 1 !important;
    background: #007aff !important;
}