/* ================================================================
   PAMY Technologies — Custom Design System  v2
   ================================================================ */

/* ----------------------------------------------------------------
   1. SYSTÈME DE COULEURS GLOBAL
   ---------------------------------------------------------------- */
:root {
    --pamy-primary:   #2D55FF;
    --pamy-secondary: #0A1172;
    --pamy-accent:    #FF6B35;
    --pamy-bg:        #F8F9FF;
    --pamy-text:      #1a1f3c;
    --pamy-muted:     #64748b;
    /* Override template defaults */
    --theme-color:    #2D55FF;
    --theme2:         #0A1172;
}

/* ----------------------------------------------------------------
   2. SMOOTH SCROLL + BASE
   ---------------------------------------------------------------- */
html { scroll-behavior: smooth; }

/* ----------------------------------------------------------------
   3. WOW.JS FIX — empêche les sections invisibles vides
      La combinaison visibility:hidden (WOW) + opacity:0 (animate.css
      animation-fill-mode:both) rend les éléments complètement invisibles
      si le scroll ne déclenche pas l'animation à temps.
   ---------------------------------------------------------------- */
.wow {
    visibility: visible !important;
    animation-fill-mode: forwards; /* "both" = garde opacity:0 avant play → MAUVAIS */
}
.img-custom-anim-left,
.img-custom-anim-top {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* ----------------------------------------------------------------
   3b. PROCESS CARDS — animation CSS native garantie
       Remplace le fadeInUp WOW.js par une animation auto qui
       se joue TOUJOURS au chargement, sans dépendre du scroll.
   ---------------------------------------------------------------- */
@keyframes pamyCardReveal {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ----------------------------------------------------------------
   4. ESPACEMENT SECTIONS UNIFORME
   ---------------------------------------------------------------- */
section.space,
div.space,
.space {
    padding-top: 70px;
    padding-bottom: 70px;
}
.space-top    { padding-top: 70px; }
.space-bottom { padding-bottom: 70px; }
section + section { margin-top: 0; }
@media (max-width: 991px) {
    section.space, div.space, .space {
        padding-top: 55px;
        padding-bottom: 55px;
    }
}
@media (max-width: 576px) {
    section.space, div.space, .space {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

/* ----------------------------------------------------------------
   5. SECTION BADGE PILL — Remplace "← Subtitle →"
   ---------------------------------------------------------------- */
.section-title .subtitle,
.section-title .subtitle.d-flex {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: rgba(45, 85, 255, .09);
    color: var(--pamy-primary, #2D55FF) !important;
    border: 1.5px solid rgba(45, 85, 255, .22);
    border-radius: 30px;
    padding: 5px 20px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    margin-bottom: 16px;
    width: auto;
}
/* Masque les flèches SVG décoratives */
.section-title .subtitle img { display: none !important; }
.section-title .subtitle span { color: inherit !important; }

/* Variante blanche pour les sections sombres */
.bg-theme-color .section-title .subtitle,
section[style*="0d1b4b"] .section-title .subtitle,
section[style*="1a2f6e"] .section-title .subtitle,
section[style*="0a4fa3"] .section-title .subtitle,
section[style*="1cb5e0"] .section-title .subtitle,
.section-title .subtitle:has(.text-white) {
    background: rgba(255, 255, 255, .15) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .35) !important;
}
.section-title .subtitle .text-white { color: #fff !important; }

/* ----------------------------------------------------------------
   6. SERVICES CARDS
   ---------------------------------------------------------------- */
.pamy-service-card {
    background: #fff;
    border-radius: 18px;
    padding: 32px 26px 28px;
    border: 1.5px solid #eef0f8;
    border-top: 5px solid var(--pcard-color, #2D55FF);
    box-shadow: 0 4px 24px rgba(45,85,255,.07);
    transition: transform .35s ease, box-shadow .35s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.pamy-service-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--pcard-color, #2D55FF) 0%, transparent 70%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    border-radius: 18px;
}
.pamy-service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(45,85,255,.16);
    border-color: var(--pcard-color, #2D55FF);
}
.pamy-service-card:hover::after { opacity: .04; }

.pamy-svc-icon {
    width: 68px;
    height: 68px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--pcard-color, #2D55FF) 12%, white);
    margin-bottom: 22px;
    transition: background .35s ease, transform .35s ease;
}
.pamy-svc-icon i {
    font-size: 1.75rem;
    color: var(--pcard-color, #2D55FF);
    transition: color .35s ease;
}
.pamy-service-card:hover .pamy-svc-icon {
    background: var(--pcard-color, #2D55FF);
    transform: rotate(-6deg) scale(1.08);
}
.pamy-service-card:hover .pamy-svc-icon i { color: #fff; }
.pamy-service-card h3 {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--pamy-text, #1a1f3c);
    margin-bottom: 10px;
    line-height: 1.4;
}
.pamy-service-card h3 a { color: inherit; text-decoration: none; }
.pamy-service-card:hover h3 a { color: var(--pcard-color, #2D55FF); }
.pamy-service-card p {
    font-size: .91rem;
    color: var(--pamy-muted, #64748b);
    line-height: 1.7;
    margin-bottom: 20px;
}
.pamy-svc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .87rem;
    font-weight: 700;
    color: var(--pcard-color, #2D55FF);
    text-decoration: none;
    letter-spacing: .3px;
    transition: gap .2s ease;
}
.pamy-svc-link:hover { gap: 12px; }

/* ----------------------------------------------------------------
   7. SECTION PROCESSUS
   ---------------------------------------------------------------- */
.pamy-process-wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
}
@media (max-width: 991px) {
    .pamy-process-wrap { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 576px) {
    .pamy-process-wrap { grid-template-columns: 1fr; gap: 20px; }
}
.pamy-process-card {
    position: relative;
    padding: 40px 28px 36px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    transition: background .35s ease, border-color .35s ease;
    margin: 0 8px;
    /* Animation CSS native — remplace WOW.js fadeInUp (opacity:0 bloquant) */
    animation: pamyCardReveal 0.65s ease both !important;
    visibility: visible !important;
}
.pamy-process-card:nth-child(1) { animation-delay: 0.1s !important; }
.pamy-process-card:nth-child(2) { animation-delay: 0.3s !important; }
.pamy-process-card:nth-child(3) { animation-delay: 0.5s !important; }
.pamy-process-card:nth-child(4) { animation-delay: 0.7s !important; }
.pamy-process-card:hover {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.3);
    transform: translateY(-8px);
}
.pamy-process-card:not(:last-child)::after {
    content: '\f054';
    font-family: 'Font Awesome 6 Free', sans-serif;
    font-weight: 900;
    position: absolute;
    top: 44px;
    right: -18px;
    font-size: .9rem;
    color: rgba(255,255,255,.3);
    z-index: 10;
}
@media (max-width: 991px) {
    .pamy-process-card:not(:last-child)::after { display: none; }
}
.pamy-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: .95rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    letter-spacing: 0;
}
.pamy-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    margin-bottom: 18px;
    font-size: 1.4rem;
}
.pamy-process-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.4;
}
.pamy-process-card p {
    font-size: .875rem;
    color: rgba(255,255,255,.7);
    line-height: 1.75;
    margin: 0;
}

/* ----------------------------------------------------------------
   8. POURQUOI CHOISIR PAMY
   ---------------------------------------------------------------- */
.pamy-why-section { background: var(--pamy-bg, #F8F9FF); }
.pamy-why-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 30px 36px;
    text-align: center;
    box-shadow: 0 4px 28px rgba(0,0,0,.05);
    border: 1.5px solid #edf0fb;
    transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.pamy-why-card::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    height: 4px; width: 0;
    background: var(--pcard-color, #2D55FF);
    transition: width .4s ease;
    border-radius: 0 0 20px 20px;
}
.pamy-why-card:hover::before { width: 100%; }
.pamy-why-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 24px 60px rgba(45,85,255,.14);
}
.pamy-why-icon {
    width: 80px;
    height: 80px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    background: color-mix(in srgb, var(--pcard-color, #2D55FF) 10%, white);
    transition: background .35s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
    position: relative;
}
.pamy-why-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 26px;
    border: 2px solid color-mix(in srgb, var(--pcard-color, #2D55FF) 20%, transparent);
    transition: opacity .35s ease;
    opacity: 0;
}
.pamy-why-card:hover .pamy-why-icon::after { opacity: 1; }
.pamy-why-icon i {
    font-size: 2rem;
    color: var(--pcard-color, #2D55FF);
    transition: color .35s ease, transform .35s ease;
}
.pamy-why-card:hover .pamy-why-icon {
    background: var(--pcard-color, #2D55FF);
    transform: rotate(6deg) scale(1.1);
}
.pamy-why-card:hover .pamy-why-icon i { color: #fff; transform: rotate(-6deg); }
.pamy-why-card h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pamy-text, #1a1f3c);
    margin-bottom: 12px;
    line-height: 1.35;
}
.pamy-why-card p {
    font-size: .91rem;
    color: var(--pamy-muted, #64748b);
    line-height: 1.7;
    margin: 0;
}

/* ----------------------------------------------------------------
   9. PARTENAIRES TECHNOLOGIQUES — Logos avec filtre grayscale
   ---------------------------------------------------------------- */
.pamy-partners-section {
    background: #fff;
    padding: 40px 0;
    border-top: 1px solid #eef0f8;
    border-bottom: 1px solid #eef0f8;
}
.pamy-partners-title {
    text-align: center;
    margin-bottom: 28px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--pamy-muted, #64748b);
}
.pamy-partner-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 20px;
    min-height: 80px;
    border-radius: 14px;
    background: #f8f9ff;
    border: 1.5px solid transparent;
    transition: all .35s ease;
}
.pamy-partner-logo img {
    height: 30px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
    filter: grayscale(100%) brightness(0.55);
    transition: filter .4s ease, transform .3s ease;
}
.pamy-partner-logo span {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    color: #94a3b8;
    margin-top: 7px;
    letter-spacing: .3px;
    transition: color .35s ease;
}
.pamy-partner-logo:hover {
    background: #f0f4ff;
    border-color: rgba(45,85,255,.15);
    box-shadow: 0 4px 16px rgba(45,85,255,.1);
}
.pamy-partner-logo:hover img {
    filter: grayscale(0%) brightness(1);
    transform: scale(1.1);
}
.pamy-partner-logo:hover span { color: var(--pamy-primary, #2D55FF); }

/* ----------------------------------------------------------------
   10. ÉTOILES CSS 5/5 (Hero stats + Témoignages)
   ---------------------------------------------------------------- */
.pamy-stars {
    display: inline-flex;
    gap: 2px;
    margin-bottom: 3px;
}
.pamy-stars i { color: #FFBB33; font-size: .82rem; }
.pamy-stars i.empty { color: #dde1f0; }

/* ----------------------------------------------------------------
   11. HERO STATS BOX — Forcer la visibilité
   ---------------------------------------------------------------- */
.fancy-box-wrapper.style5 { visibility: visible !important; }

/* ----------------------------------------------------------------
   12. NAVBAR CTA BUTTON — classe dédiée pour éviter les conflits
       avec les pseudo-éléments ::before/::after du template
   ---------------------------------------------------------------- */
.pamy-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #2D55FF;
    color: #fff !important;
    border-radius: 25px;
    padding: 10px 24px;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
    box-shadow: 0 4px 14px rgba(45,85,255,.35);
    position: relative;
    z-index: 2;
}
.pamy-nav-cta:hover {
    background: #0A1172;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(10,17,114,.35);
}
/* Sticky header — le bouton reste visible */
.header-1.sticky-header .pamy-nav-cta,
#header-sticky.sticky .pamy-nav-cta {
    background: #2D55FF;
}

/* ----------------------------------------------------------------
   HERO BUTTON — fond blanc, texte bleu (ciblé uniquement dans le hero)
   ---------------------------------------------------------------- */
.hero-content .gt-btn.style4 {
    background: #ffffff !important;
    color: #2D55FF !important;
    border: 2px solid #ffffff !important;
}
.hero-content .gt-btn.style4::before,
.hero-content .gt-btn.style4::after {
    background-color: #dbe8ff !important;
}
.hero-content .gt-btn.style4:hover {
    color: #0A1172 !important;
}

/* ----------------------------------------------------------------
   13. BOUTONS CTA — orange → bleu primaire #2D55FF
       style4 = "Demander un Devis", "En Savoir Plus"
       On annule aussi les ::before/::after du template (bg=var(--header))
       qui glissent en hover et masquent notre couleur.
   ---------------------------------------------------------------- */
.gt-btn.style4 {
    background: #2D55FF !important;
    color: #fff !important;
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease !important;
}
.gt-btn.style4::before,
.gt-btn.style4::after {
    background-color: #0A1172 !important;
}
.gt-btn.style4:hover {
    background: #2D55FF !important; /* le ::before/after couvre, pas besoin de changer le bg */
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(10,17,114,.3);
}

/* ----------------------------------------------------------------
   14. TEAM CARDS AMÉLIORÉES
   ---------------------------------------------------------------- */
.team-card.style1 {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(10,17,114,.07);
    transition: transform .35s ease, box-shadow .35s ease;
    background: #fff;
}
.team-card.style1:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 45px rgba(10,17,114,.15);
}
.team-card.style1 .team-img {
    height: 260px;
    overflow: hidden;
    border-radius: 18px 18px 0 0;
}
.team-card.style1 .team-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    border-radius: 0;
    transition: transform .45s ease;
}
.team-card.style1:hover .team-img img { transform: scale(1.05); }
.team-card.style1 .team-content {
    padding: 20px 22px 22px;
    background: #fff;
}
.team-card.style1 .team-content h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pamy-secondary, #0A1172);
    margin-bottom: 4px;
    line-height: 1.3;
}
.team-card.style1 .team-content span {
    font-size: .85rem;
    color: var(--pamy-muted, #64748b);
    font-weight: 500;
}
.team-card.style1 .team-social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(45,85,255,.08);
    color: var(--pamy-primary, #2D55FF);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    transition: all .3s ease;
    margin-top: 12px;
}
.team-card.style1 .team-social a:hover {
    background: var(--pamy-primary, #2D55FF);
    color: #fff;
    transform: translateY(-2px);
}

/* ----------------------------------------------------------------
   15. SECTION À PROPOS — fix visibilité
   ---------------------------------------------------------------- */
.about-section .about-thumb img,
.about-section .about-content,
.about-section .about-content * {
    visibility: visible !important;
    opacity: 1 !important;
}
.about-section .about-thumb .thumb2 img {
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(10,17,114,.2);
}

/* ----------------------------------------------------------------
   16. COINS ARRONDIS IMAGES
   ---------------------------------------------------------------- */
.hero-thumb .main-thumb img       { border-radius: 24px; overflow: hidden; }
.about-thumb img                   { border-radius: 20px; }
.about-image-items .about-thumb img{ border-radius: 20px; }
.about-thumb .thumb2 img           { border-radius: 16px; }
.team-card .team-img               { border-radius: 18px 18px 0 0; overflow: hidden; }
.team-card .team-img img           { border-radius: 0; }
.blog-card .blog-card-thumb        { border-radius: 16px 16px 0 0; overflow: hidden; }
.blog-card .blog-card-thumb img    { border-radius: 0; }
.testi-thumb img                   { border-radius: 50%; }
.cta-thumb img                     { border-radius: 20px; }

/* ----------------------------------------------------------------
   17. FOOTER — Mise à jour contenu IT
   ---------------------------------------------------------------- */
.gt-widget-about .about-text {
    font-size: .9rem;
    line-height: 1.75;
    color: rgba(255,255,255,.7);
}

/* ----------------------------------------------------------------
   18. RESPONSIVE — Mobile
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .hero-content.style1 h1 {
        font-size: 2rem !important;
        line-height: 1.25 !important;
    }
    .hero-content.style1 h6.subtitle { font-size: .85rem; }
    .pamy-process-wrap { grid-template-columns: 1fr !important; }
    .fancy-box-wrapper.style5 { flex-direction: column; gap: 12px; }
}
@media (max-width: 576px) {
    .hero-content.style1 h1  { font-size: 1.75rem !important; }
    .pamy-service-card        { padding: 24px 18px 20px; }
    .pamy-why-card            { padding: 28px 20px 24px; }
    .pamy-process-card        { padding: 28px 20px; }
    .pamy-partner-logo img    { height: 22px; }
}

/* ----------------------------------------------------------------
   19. EXPERTISE CARDS (section 5 piliers)
   ---------------------------------------------------------------- */
.pamy-expertise-card {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.pamy-expertise-card:hover {
    background: rgba(255,255,255,.18);
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,.2);
}

/* ----------------------------------------------------------------
   20. FALLBACK — Navigateurs sans color-mix()
   ---------------------------------------------------------------- */
@supports not (color: color-mix(in srgb, red 10%, white)) {
    .pamy-svc-icon      { background: rgba(45,85,255,.1); }
    .pamy-why-icon      { background: rgba(45,85,255,.1); }
    .pamy-why-icon::after { border-color: rgba(45,85,255,.2); }
    .pamy-tech-badge    { background: rgba(45,85,255,.08); }
}

/* ================================================================
   PAMY v3 — Améliorations globales (items 2–18)
   ================================================================ */

/* ----------------------------------------------------------------
   GLOBAL — Base
   ---------------------------------------------------------------- */
body {
    overflow-x: hidden;
    background-color: #ffffff;
}
img { max-width: 100%; height: auto; }

/* ----------------------------------------------------------------
   SECTION NOTRE MÉTHODE — texte blanc forcé (h3/p déjà dans bloc 7)
   ---------------------------------------------------------------- */
.pamy-process-wrap * { color: #ffffff !important; }

/* ----------------------------------------------------------------
   CONTRASTES — surcharge couleur pour titres pamy-service / why
   ---------------------------------------------------------------- */
.pamy-service-card h3,
.pamy-service-card h3 a { color: #0A1172 !important; }

/* ----------------------------------------------------------------
   HERO — Fond dégradé moderne
   ---------------------------------------------------------------- */
.hero-wrapper {
    padding-top: 70px !important;
    padding-bottom: 80px !important;
    background: linear-gradient(135deg, #1a237e 0%, #2D55FF 60%, #3949ab 100%) !important;
    position: relative;
    overflow: visible;
}
/* Neutralise le clip-path SVG du template qui coupe l'image à droite */
.hero-main-container.style1 {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    margin-top: 40px !important;
}
.hero-content.style1 h1 {
    font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: #ffffff !important;
}
.hero-content.style1 p { color: rgba(255,255,255,.9) !important; }

/* ----------------------------------------------------------------
   CARDS SERVICES — Harmonisation
   ---------------------------------------------------------------- */
.service-box-items.box-shadow {
    background: #ffffff !important;
    border: 1px solid #e8eaf0 !important;
    border-radius: 20px !important;
    padding: 28px 24px !important;
    transition: all .3s ease !important;
    box-shadow: 0 2px 16px rgba(45,85,255,.06) !important;
    height: 100%;
}
.service-box-items.box-shadow:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 40px rgba(45,85,255,.15) !important;
    border-color: #2D55FF !important;
}
.service-box-items .content h4 { color: #0A1172 !important; font-weight: 700 !important; }
.service-box-items .content h4 a { color: #0A1172 !important; }
.service-box-items .content h4 a:hover { color: #2D55FF !important; }
.service-box-items .content p { color: #64748b !important; font-size: .93rem !important; }
.service-box-items .icon i { color: #2D55FF !important; }

/* Service detail card */
.service-detail-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid #e8eaf0 !important;
    padding: 36px 30px !important;
    height: 100% !important;
    transition: all .3s ease !important;
}
.service-detail-card:hover {
    box-shadow: 0 12px 36px rgba(45,85,255,.13) !important;
    border-color: #2D55FF !important;
    transform: translateY(-4px) !important;
}

/* PARTENAIRES — overrides déjà dans bloc 9, rien à dupliquer */

/* ----------------------------------------------------------------
   CTA SECTIONS
   ---------------------------------------------------------------- */
.cta-wrap.style1, .cta-wrap.style2 {
    background: linear-gradient(135deg, #0A1172, #2D55FF) !important;
    border-radius: 24px !important;
}
.cta-wrap * { color: #ffffff !important; }
.cta-wrap .gt-btn.style5 {
    background: #ffffff !important;
    color: #0A1172 !important;
}
.cta-wrap .gt-btn.style5:hover { background: #f0f4ff !important; }

/* ----------------------------------------------------------------
   BOUTONS th-btn / theme-btn
   ---------------------------------------------------------------- */
.theme-btn > span, .theme-btn {
    background: #2D55FF !important;
    color: #ffffff !important;
    transition: all .3s ease !important;
}
.theme-btn:hover > span, .theme-btn:hover { background: #0A1172 !important; }
.theme-btn-2 {
    color: #2D55FF !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: gap .2s ease;
}
.theme-btn-2:hover { color: #0A1172 !important; }

/* ----------------------------------------------------------------
   FAQ — Accordéon
   ---------------------------------------------------------------- */
.faq-accordion .accordion-item {
    background: #ffffff !important;
    border: 1px solid #e8eaf0 !important;
    border-radius: 14px !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
}
.faq-accordion .accordion-button {
    background: #ffffff !important;
    color: #0A1172 !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    padding: 20px 24px !important;
    box-shadow: none !important;
}
.faq-accordion .accordion-button:not(.collapsed) {
    background: #f0f4ff !important;
    color: #2D55FF !important;
}
.faq-accordion .accordion-button::after { filter: none; }
.faq-accordion .accordion-body {
    padding: 16px 24px 24px !important;
    color: #475569 !important;
    font-size: .95rem !important;
    line-height: 1.7 !important;
}

/* ----------------------------------------------------------------
   CONTACT — Formulaire & Carte info
   ---------------------------------------------------------------- */
.contact-form input,
.contact-form textarea,
.contact-form select {
    border: 2px solid #e8eaf0 !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    font-size: .95rem !important;
    transition: border-color .3s ease !important;
    width: 100% !important;
    margin-bottom: 16px !important;
    background: #fafbff !important;
    color: #1a1a2e !important;
}
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #2D55FF !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(45,85,255,.1) !important;
}

/* ----------------------------------------------------------------
   À PROPOS — Valeurs cards & Tech badges
   ---------------------------------------------------------------- */
.pamy-tech-badge {
    display: inline-flex;
    align-items: center;
    background: color-mix(in srgb, var(--badge-color, #2D55FF) 9%, white);
    color: var(--badge-color, #2D55FF);
    border: 1.5px solid color-mix(in srgb, var(--badge-color, #2D55FF) 22%, transparent);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: .8rem;
    font-weight: 600;
    transition: background .25s ease, color .25s ease;
    cursor: default;
}
.pamy-tech-badge:hover {
    background: var(--badge-color, #2D55FF);
    color: #fff;
}

/* ----------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------- */
.footer-area, footer { background: #06082e !important; }
.footer-area *       { color: rgba(255,255,255,.75); }
.footer-area h3, .footer-area h4,
.footer-area .widget_title { color: #ffffff !important; }
.footer-area a:hover  { color: #2D55FF !important; }
.copyright-wrap { border-top: 1px solid rgba(255,255,255,.1) !important; }
.copyright-wrap * { color: rgba(255,255,255,.6) !important; }
.copyright-wrap a:hover { color: #2D55FF !important; }

/* ----------------------------------------------------------------
   TITRES DE SECTION — Uniformes
   ---------------------------------------------------------------- */
.section-title .title {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
    font-weight: 800 !important;
    color: #0A1172 !important;
    line-height: 1.2 !important;
}
/* Titres sur fond coloré */
.bg-theme-color .section-title .title,
section[style*="0d1b4b"] .section-title .title,
section[style*="0a4fa3"] .section-title .title,
section[style*="1cb5e0"] .section-title .title { color: #ffffff !important; }

/* ----------------------------------------------------------------
   RESPONSIVE MOBILE
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    section.space, div.space, .space {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
    .hero-content.style1 h1  { font-size: 2rem !important; }
    .section-title .title    { font-size: 1.7rem !important; }
    .pamy-service-card, .pamy-why-card { padding: 24px 20px !important; }
    .footer-area .col-xl-3   { margin-bottom: 32px; }
}
@media (max-width: 480px) {
    .hero-content.style1 h1  { font-size: 1.7rem !important; }
    .pamy-nav-cta            { padding: 8px 16px !important; font-size: .82rem !important; }
}

/* ================================================================
   PAMY v4 — Corrections design (15 problèmes)
   ================================================================ */

/* FIX 3: Hero — recadrage portrait (crop vers le haut) */
.hero-thumb .main-thumb img {
    object-fit: cover;
    object-position: center top;
    border-radius: 24px;
    width: 100%;
}

/* FIX 4: Système typographique uniforme */
:root {
    --font-h1: clamp(2.2rem, 5vw, 3.8rem);
    --font-h2: clamp(1.8rem, 3.5vw, 2.6rem);
    --font-h3: clamp(1.15rem, 2vw, 1.45rem);
    --font-body: 1rem;
    --font-sm: 0.9rem;
    --line-body: 1.75;
}
body { font-size: var(--font-body); line-height: var(--line-body); }

/* FIX 5: Témoignages — overlay sombre pour lisibilité du texte */
.testimonial-section {
    position: relative !important;
    overflow: hidden !important;
}
.testimonial-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(8, 15, 100, 0.88);
    z-index: 0;
    pointer-events: none;
}
.testimonial-section > .testimonial-wrap {
    position: relative !important;
    z-index: 1 !important;
}
.testimonial-section .section-title .title { color: #fff !important; }
.testimonial-section .section-title .subtitle {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.28) !important;
}
.testimonial-card.style3 {
    background: rgba(255,255,255,.08) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 20px !important;
}
.testimonial-card.style3 .text  { color: rgba(255,255,255,.9)  !important; }
.testimonial-card.style3 .title { color: #fff !important; }
.testimonial-card.style3 .designation { color: rgba(255,255,255,.7) !important; }

/* FIX 7: Hauteurs de cards uniformes */
.swiper-slide .pamy-service-card { height: 100%; }

/* FIX 11: Blog — ratio 16:9 uniforme */
.blog-card .blog-card-thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}
.blog-card .blog-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    transition: transform .45s ease;
}
.blog-card:hover .blog-card-thumb img { transform: scale(1.06); }

/* FIX 13: 5 Piliers IT — grille responsive correcte (5 colonnes xl, 2 md, 1 sm) */
.pamy-expertise-section .col-xl { flex: 0 0 auto; }
@media (min-width: 1200px) {
    .pamy-expertise-section .col-xl { width: 20%; }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .pamy-expertise-section .col-xl { width: 50%; }
}
@media (max-width: 767px) {
    .pamy-expertise-section .col-xl { width: 100%; }
}

/* FIX 14: Barre de progression de défilement */
#pamy-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #2D55FF 0%, #1cb5e0 100%);
    z-index: 99999;
    transition: width .08s linear;
    pointer-events: none;
    border-radius: 0 3px 3px 0;
}

/* FIX 15: Footer contact — lisibilité avec icônes structurées */
.pamy-footer-contact { padding: 0; list-style: none; margin: 0; }
.pamy-footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    line-height: 1.5;
}
.pamy-footer-contact-item .fci-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(45,85,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.pamy-footer-contact-item .fci-icon i { color: #7ba0ff; font-size: .85rem; }
.pamy-footer-contact-item .fci-text {
    color: rgba(255,255,255,.8);
    font-size: .9rem;
}
.pamy-footer-contact-item .fci-text a {
    color: rgba(255,255,255,.8);
    text-decoration: none;
    transition: color .2s ease;
}
.pamy-footer-contact-item .fci-text a:hover { color: #7ba0ff; }

/* ----- CTA INTERMÉDIAIRE ----- */
.pamy-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,.35);
}

/* ================================================================
   PAMY v5 — Corrections images (prompt fix_images_php)
   ================================================================ */

/* ----- HERO IMAGE ----- */
.pamy-hero-img-wrap {
    position: relative;
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
}
.pamy-hero-img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    object-position: center top;
    display: block;
    border-radius: 24px;
}
@media (max-width: 1199px) { .pamy-hero-img { height: 380px; } }
@media (max-width: 767px)  { .pamy-hero-img { height: 280px; } }

/* ----- ABOUT IMAGE (supprime clip-path SVG) ----- */
.pamy-about-thumb-new { position: relative; width: 100%; }
.pamy-about-main-img {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,.3);
}
.pamy-about-main-img img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    object-position: center top;
    display: block;
    border-radius: 20px;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}
.pamy-about-stat-badge {
    position: absolute;
    bottom: -18px;
    right: -16px;
    background: #fff;
    border-radius: 16px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    min-width: 170px;
    z-index: 10;
}
.pamy-about-stat-badge .pamy-stat-icon {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(56,75,255,.1);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pamy-about-stat-badge .pamy-stat-icon i { color: #384BFF; font-size: 1.1rem; }
.pamy-about-stat-badge strong { display: block; font-size: 1.25rem; font-weight: 700; color: #0d1b4b; line-height: 1; }
.pamy-about-stat-badge span   { font-size: .78rem; color: #64748b; }
@media (max-width: 991px) {
    .pamy-about-main-img img { height: 320px; }
    .pamy-about-stat-badge   { bottom: 10px; right: 10px; }
}

/* ----- BLOG IMAGES (classe explicite) ----- */
.pamy-blog-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    background: #e5e7eb;
}
.pamy-blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .4s ease;
}
.blog-card:hover .pamy-blog-img { transform: scale(1.05); }
@supports not (aspect-ratio: 16/9) {
    .pamy-blog-thumb { height: 220px; }
}

/* ----- TESTIMONIALS — fond robuste + overlay ----- */
.pamy-testi-section {
    background-color: #06112A;
    background-size: cover !important;
    background-position: center !important;
}
.pamy-testi-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(5, 15, 50, 0.75);
    z-index: 0;
    pointer-events: none;
}
.pamy-testi-section > * { position: relative; z-index: 2; }

/* ----- AVATARS TÉMOIGNAGES (cercle propre) ----- */
.testi-thumb {
    width: 60px !important; height: 60px !important;
    border-radius: 50% !important; overflow: hidden !important;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,.25);
}
.testi-thumb img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    border-radius: 50% !important;
}

/* ----- CTA IMAGE ----- */
.cta-thumb {
    position: relative;
    width: 100%;
    max-height: 280px;
    overflow: hidden;
    border-radius: 16px;
}
.cta-thumb img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    border-radius: 16px;
}
@media (max-width: 1199px) {
    .cta-thumb { max-height: 200px; text-align: center; }
    .cta-thumb img { height: 200px; max-width: 400px; margin: 0 auto; }
}