/* =============================================
   Accessibilité
   ============================================= */

/* Skip to content */
.skip-link {
    position: absolute;
    top: -100%;
    left: 8px;
    padding: 8px 16px;
    background: #012f5d;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    z-index: 10000;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    transition: top 0.2s;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid #fbca00;
    outline-offset: 2px;
}

/* Focus visible — liens, boutons, inputs */
:focus-visible {
    outline: 3px solid #fbca00;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Supprimer le focus souris, le conserver au clavier */
:focus:not(:focus-visible) {
    outline: none;
}

/* Téléphone cliquable dans le header */
.header .content-box a {
    color: inherit;
    text-decoration: none;
}
.header .content-box a:hover b {
    color: #fbca00;
}

/* Contact footer — liens téléphone et email dans h3 */
.footer-widget.contact-widget .content h3 a {
    color: inherit;
    text-decoration: none;
}
.footer-widget.contact-widget .content h3 a:hover {
    color: #fbca00;
}

/* =============================================
   Bootstrap 3 → 5 compatibilité
   ============================================= */

/* Bootstrap 5 a supprimé pull-left/pull-right (→ float-start/float-end).
   Le thème (style.css, responsive.css) les utilise encore : on les restitue. */
.pull-left { float: left !important; }
.pull-right { float: right !important; }

/* Bootstrap 3 appliquait un clearfix automatique sur chaque .container.
   Bootstrap 5 l'a supprimé. Le thème utilise pull-left/pull-right (float)
   dans .top-bar, .header et .mainmenu-wrapper → les containers s'effondrent.
   On restaure le clearfix uniquement sur ces sections. */
.top-bar .container::after,
.header .container::after,
.mainmenu-wrapper .container::after,
.bottom-footer .container::after {
    display: block;
    clear: both;
    content: "";
}

/* Débordement horizontal causé par les marges négatives du .row BS5 */
html { overflow-x: hidden; }

/* Limiter la largeur max du container à la valeur BS3 (1170px)
   pour conserver la mise en page originale du thème */
@media (min-width: 1200px) {
    .container { max-width: 1170px; }
}

/* Voile noir du footer : footer::before est position:absolute et passe
   par-dessus le contenu flex (.row). On positionne la row au-dessus. */
.footer .row { position: relative; z-index: 1; }

/* Images "Présentation" (about.php) : remettre display:inline-block
   pour le layout inline du thème, annulé par le reboot BS5 */
.about-section .img-box img {
    display: inline-block;
    vertical-align: top;
}

/* =============================================
   Modernisation visuelle — style industriel 2025
   Palette : bleu logo #012f5d · vert logo #1da055 · accent #fbca00
   ============================================= */

/* --- Typographie --- */
/* Inter chargée en <link> non-bloquant dans header.php (pas via @import) */

h1, h2, h3, h4, h5, h6,
.section-title h2,
.mainmenu-holder .navigation > li > a {
    font-family: 'Inter', 'Roboto', sans-serif;
    letter-spacing: -0.01em;
}

/* Line-height H2 — le template fixe des valeurs px absurdes (26px sur 36px)
   On surcharge tous les sélecteurs spécifiques */
h2,
.inner-banner h2,
.section-title h2 span,
.about-section .right-textbox h2 {
    line-height: 1.25 !important;
}

/* "Nos réglémentations" : espacement entre la galerie et les boutons */
.about-page .img-box + h2 {
    margin-top: 30px;
    margin-bottom: 20px;
}

/* Corps de texte : améliorer le contraste (#9e9e9e → #555) */
p, .content-box p, .about-section .right-textbox p {
    color: #555 !important;
    line-height: 1.75;
}

/* Sections à fond sombre : texte reste blanc */
.call-to-action p,
.our-features .single-our-feature p,
.our-facts p,
.why-chose-us p {
    color: #fff !important;
}

/* --- Boutons — arrondis + transition fluide --- */
.thm-btn {
    border-radius: 4px !important;
    transition: background 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease !important;
    letter-spacing: 0.03em;
}

/* Bouton "Demande de devis" footer : block + line-height normalisé (template = 55px, trop haut sur 2 lignes) */
.footer-widget.about-widget a.thm-btn {
    display: block;
    text-align: center;
    box-sizing: border-box;
    padding: 14px 20px;
    line-height: 1.3;
}
.thm-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(29, 160, 85, 0.35);
}
.thm-btn.thm-blue-bg:hover {
    box-shadow: 0 4px 14px rgba(1, 47, 93, 0.35);
}

/* --- Cards services — ombre légère + survol --- */
.single-our-service {
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}
.single-our-service:hover {
    box-shadow: 0 6px 24px rgba(1, 47, 93, 0.12);
    transform: translateY(-3px);
}

/* --- Section titles — trait vert sous le titre --- */
.section-title h2 {
    position: relative;
    padding-bottom: 14px;
}
.section-title h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 48px;
    height: 3px;
    background: #1da055;
    border-radius: 2px;
}
/* Titres alignés à gauche (pages de services) */
.single-service-page .section-title h2::after,
.content-box.classic-list ~ .section-title h2::after {
    left: 0;
    transform: none;
}

/* --- Inner banner — overlay plus raffiné --- */
.inner-banner:before {
    background: linear-gradient(135deg, rgba(1, 36, 72, 0.88) 0%, rgba(1, 47, 93, 0.75) 100%) !important;
}

/* --- Navigation sticky — ombre subtile au scroll --- */
.mainmenu-wrapper.stricky-fixed {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
}

/* --- Liens de la barre de navigation — transition douce --- */
.mainmenu-holder .navigation > li > a {
    transition: color 0.2s ease;
    font-weight: 500;
    font-size: 13.5px;
}

/* --- Footer — typographie plus aérée --- */
.footer-widget .title h2 {
    letter-spacing: 0.06em;
    font-size: 13px;
    font-weight: 700;
}
.footer-widget ul li a {
    transition: color 0.2s ease, padding-left 0.2s ease;
}
.footer-widget.link-widget .links li a:hover {
    padding-left: 6px;
}

/* --- Formulaire contact — champs plus modernes --- */
.home-contact-form input,
.home-contact-form textarea,
.contact-page-form input,
.contact-page-form textarea,
.contact-page-form select {
    border-radius: 4px !important;
    border: 1px solid #dde2e8 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.home-contact-form input:focus,
.home-contact-form textarea:focus,
.contact-page-form input:focus,
.contact-page-form textarea:focus {
    border-color: #1da055 !important;
    box-shadow: 0 0 0 3px rgba(29, 160, 85, 0.12) !important;
    outline: none !important;
}

/* =============================================
   Composants existants
   ============================================= */

  .content-box.classic-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-top: 20px;
  }
  .content-box.classic-list ul li {
    list-style: none;
    border-bottom: 1px solid #F5F5F5;
  }
  .content-box.classic-list ul li:last-child {
    border: none;
  }
  .content-box.classic-list ul li a {
    display: block;
    font-size: 14px;
    line-height: 25px;
    color: #272727;
    transition: all 0.5s ease;
  }
  .content-box.classic-list ul li a:hover {
    color: #1da055;
  }
  .content-box.classic-list ul li a:hover:before {
    background: #1da055;
  }
  .content-box.classic-list ul li a:before {
    content: '';
    width: 8px;
    height: 8px;
    background: transparent;
    border: 1px solid #1da055;
    border-radius: 50%;
    display: inline-block;
    margin-right: 20px;
    transition: all 0.5s ease;
  }
  .news-content .client-carousel {
    margin-top: 10px;
    margin-bottom: 50px;
  }
  .section-title {
    margin-bottom: 14px;
  }







:root {
    --primary-color: #0056b3; /* Exemple, à adapter selon ta charte */
    --text-dark: #333333;
    --radius-std: 4px;
    --shadow-soft: 0 4px 15px rgba(0,0,0,0.08);
    --transition-std: all 0.3s ease;
}

/* 1. Adoucissement des angles (Industrie moderne) */
.btn, .thm-btn, button, input, textarea, select, .card, .service-box {
    border-radius: var(--radius-std) !important;
}

.mainmenu-holder .nav-header > ul > li:hover > a {
    border-radius: var(--radius-std) !important;
}

.mainmenu-holder .nav-header > ul > li.active > a {
    border-radius: var(--radius-std) !important;
}

/* Sidebar service-link-widget : liens nav arrondis */
.single-sidebar-box.service-link-widget ul li a {
    border-radius: 4px;
    transition: background 0.2s ease, padding-left 0.2s ease;
}
.single-sidebar-box.service-link-widget ul li a:hover,
.single-sidebar-box.service-link-widget ul li.active a {
    border-radius: 4px;
}

/* Broucher-widgets (about + sidebar services) : bordure arrondie */
.single-sidebar-box.broucher-widgets {
    border-radius: 6px;
    overflow: hidden;
}

/* Boxes contact (adresse / téléphone / horaires) */
.single-contact-info {
    border-radius: 6px;
    overflow: hidden;
}

/* =============================================
   Swiper — Hero Slider (page d'accueil)
   ============================================= */

.tp-hero-section {
    position: relative;
    overflow: hidden;
}
.tp-swiper {
    width: 100%;
    height: 505px;
}
.tp-slide {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    position: relative;
}
.tp-slide-inner {
    position: absolute;
    top: 23%;
    left: 50%;
    transform: translate(-50%, -23%);
    z-index: 1;
    text-align: center;
    padding: 0 24px;
    max-width: 820px;
    width: 100%;
    box-sizing: border-box;
}
.tp-slide-title {
    color: #fff;
    font-family: 'Inter', 'Roboto', sans-serif;
    font-size: clamp(20px, 2.8vw, 34px);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.tp-slide-desc {
    background: rgba(255,255,255,0.92);
    color: #333 !important;
    padding: 12px 22px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 28px;
}
.tp-slide-btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Navigation Swiper */
.tp-swiper .swiper-button-prev,
.tp-swiper .swiper-button-next {
    color: #fff;
    background: rgba(1, 47, 93, 0.65);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: background 0.2s ease;
}
.tp-swiper .swiper-button-prev:hover,
.tp-swiper .swiper-button-next:hover {
    background: rgba(1, 47, 93, 0.9);
}
.tp-swiper .swiper-button-prev::after,
.tp-swiper .swiper-button-next::after {
    font-size: 16px;
    font-weight: 700;
}
.tp-swiper .swiper-pagination-bullet-active {
    background: #1da055;
}

/* Responsive */
@media (max-width: 992px) {
    .tp-swiper { height: 440px; }
}
@media (max-width: 768px) {
    .tp-swiper { height: 380px; }
    .tp-slide-title { font-size: 18px; }
    .tp-slide-desc { font-size: 12px; padding: 10px 14px; }
    .tp-swiper .swiper-button-prev,
    .tp-swiper .swiper-button-next { display: none; }
}
@media (max-width: 480px) {
    .tp-swiper { height: 340px; }
    .tp-slide-title { font-size: 16px; }
}

/* -----------------------------------------------------------------------
   Contraste WCAG AA — correction #9e9e9e (ratio 2.59:1) → #767676 (4.54:1)
   Les sélecteurs ci-dessous surchargent style.css du template.
   ----------------------------------------------------------------------- */
.accrodion .accrodion-content p,
.our-services p,
.about-section .right-textbox p,
.single-team-member p,
.single-blog-post .content-box p,
.single-testimonials .review-text p,
.checkout-section.cart-section .billing-info-form form .form-group .field-label,
.checkout-section.cart-section .billing-info-form form .form-group input,
.checkout-section.cart-section .bottom .totals-table li span.col.col-title,
.checkout-section .payment-options .option-block .radio-block .icon i,
.checkout-section .payment-options .text p {
    color: #767676;
}

/* --- Message de confirmation formulaire contact --- */
.tp-form-success {
    background: #1da055;
    border-radius: 6px;
    padding: 24px 28px;
    margin-top: 16px;
}
.tp-form-success p {
    color: #fff !important;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    line-height: 1.5;
}