/* =====================================================================
   IRON GLOBAL — Refonte "coup de punch" (design-system global)
   Chargé APRÈS app.css : surcouche moderne, cohérente sur TOUTES les pages.
   Réutilise les classes existantes (.btn-ms, .card-services, .header-anim…)
   ===================================================================== */

:root{
  --ig-navy:#0c4c8a;        /* primary existant */
  --ig-navy-d:#0a2540;      /* marine profond (hero/footer) */
  --ig-accent:#f88d01;      /* tertiary existant (or/orange) */
  --ig-accent-d:#d97a00;
  --ig-gold:#f3b62b;        /* éclat doré (highlights) */
  --ig-ink:#16243a;
}

html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}

/* ---- Barre de progression de scroll (moderne) ---------------------- */
.ig-progress{position:fixed;top:0;left:0;height:4px;width:100%;z-index:3000;background:transparent;pointer-events:none}
.ig-progress > span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ig-accent),var(--ig-gold),var(--ig-navy));box-shadow:0 0 12px rgba(248,141,1,.6)}
@supports (animation-timeline: scroll()){
  .ig-progress > span{width:100%;transform:scaleX(0);transform-origin:left;animation:igProg linear both;animation-timeline:scroll(root)}
  @keyframes igProg{to{transform:scaleX(1)}}
}

/* ---- Reveal au scroll (global, sans toucher au HTML des pages) ------ */
.reveal-ready [data-reveal]{opacity:0;transform:translateY(34px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal-ready [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal-ready [data-reveal]{opacity:1!important;transform:none!important}
  *{animation:none!important}
}

/* ---- Boutons (toutes les pages) ------------------------------------ */
.btn-ms{
  background:var(--ig-navy)!important;color:#fff!important;border:none!important;
  border-radius:12px!important;font-weight:600;letter-spacing:.2px;
  transition:transform .25s,box-shadow .3s,background .25s!important;
  display:inline-flex;align-items:center;gap:.5rem;will-change:transform}
.btn-ms:hover{background:var(--ig-accent)!important;color:#fff!important;
  transform:translateY(-3px);box-shadow:0 14px 30px rgba(248,141,1,.35)}
.btn-secm{border-radius:12px!important;transition:.25s}
.btn-secm:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(248,141,1,.3)}
.btn-gold{background:var(--ig-accent);color:#fff;font-weight:700;border:none;
  padding:.8rem 1.6rem;border-radius:12px;display:inline-flex;align-items:center;gap:.5rem;
  transition:transform .25s,box-shadow .3s,background .25s;will-change:transform}
.btn-gold:hover{background:var(--ig-accent-d);color:#fff;box-shadow:0 14px 30px rgba(248,141,1,.4)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.5);color:#fff;font-weight:600;
  padding:.75rem 1.5rem;border-radius:12px;background:rgba(255,255,255,.05);
  backdrop-filter:blur(4px);display:inline-flex;align-items:center;gap:.5rem;transition:.25s}
.btn-ghost:hover{background:#fff;color:var(--ig-navy);border-color:#fff}

/* ---- Cartes (services, blog, contact) ------------------------------ */
.card-services,.card-blog{border-radius:18px!important;border:1px solid #eef1f6;
  box-shadow:0 10px 34px rgba(12,45,82,.08);
  transition:transform .25s ease,box-shadow .35s ease;overflow:visible}
.card-services{position:relative}
.card-services::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  border-radius:18px;opacity:0;transition:.3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(248,141,1,.15),transparent 45%)}
.card-services:hover::before{opacity:1}
.card-services:hover,.card-blog:hover{box-shadow:0 26px 56px rgba(12,45,82,.2)}
.contact-shadow,.contact__form .card{border-radius:18px!important;box-shadow:0 10px 30px rgba(12,45,82,.08)!important;transition:.3s}
.contact-shadow:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(12,45,82,.16)!important}
.card-services .rounded-circle.bg-primary,.svc-badge{box-shadow:0 10px 22px rgba(12,76,138,.4)}

/* form inputs un peu plus modernes */
.contact__form .form-control,.form-control{border-radius:12px;transition:.2s}
.contact__form .form-control:focus{border-color:var(--ig-accent);box-shadow:0 0 0 .2rem rgba(248,141,1,.18)}

/* ---- Header / nav : glassmorphism au scroll ------------------------ */
.header-anim.stick-100{
  background:rgba(255,255,255,.72)!important;
  backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 8px 30px rgba(10,37,64,.12)!important}
.nav-link{position:relative}
.navbar .nav-link::after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:0;
  height:2px;background:var(--ig-accent);transform:scaleX(0);transform-origin:left;transition:.25s}
.navbar .nav-link:hover::after{transform:scaleX(1)}

/* ---- Bandeau de sous-page (bradecrumb) : modernisé ----------------- */
.breadcrumb-container{height:340px!important;
  background:linear-gradient(105deg,rgba(10,37,64,.92),rgba(10,37,64,.55)),url('/assets/images/hand.jpg') center/cover!important}
.breadcrumb-container::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:54px 54px;-webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 72%);mask-image:radial-gradient(circle at 50% 40%,#000,transparent 72%)}
.breadcrumb-container h2{font-weight:800;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.5px;position:relative;z-index:2}
.breadcrumb-container .breadcrumb{position:relative;z-index:2}

/* ---- Titres de section : petit liseré doré ------------------------- */
section h2 + .bg-primary,
.w-100 .bg-primary[style*="width: 60px"]{background:linear-gradient(90deg,var(--ig-accent),var(--ig-gold))!important;border-radius:3px}

/* =====================================================================
   HERO nouvelle génération (page d'accueil) — classes namespacées irx-
   ===================================================================== */
.irx-hero{position:relative;min-height:94vh;display:flex;align-items:center;overflow:hidden;background:var(--ig-navy-d)}
.irx-hero__img{position:absolute;inset:-8% 0;z-index:0;background-size:cover;background-position:center;
  transform:translateY(0) scale(1.08);will-change:transform}
.irx-hero__veil{position:absolute;inset:0;z-index:1;background:
  linear-gradient(105deg,rgba(8,22,40,.95) 0%,rgba(8,22,40,.78) 42%,rgba(8,22,40,.30) 100%),
  linear-gradient(to top,rgba(8,22,40,.96),transparent 42%)}
.irx-grid{position:absolute;inset:0;z-index:1;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:60px 60px;-webkit-mask-image:radial-gradient(circle at 28% 50%,#000,transparent 75%);mask-image:radial-gradient(circle at 28% 50%,#000,transparent 75%)}
.irx-blob{position:absolute;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;z-index:1;pointer-events:none}
.irx-blob.b1{width:480px;height:480px;background:radial-gradient(circle,var(--ig-navy),transparent 65%);top:-120px;right:-80px;opacity:.6;animation:igDrift1 15s ease-in-out infinite}
.irx-blob.b2{width:420px;height:420px;background:radial-gradient(circle,var(--ig-accent),transparent 65%);bottom:-140px;left:-60px;opacity:.32;animation:igDrift2 19s ease-in-out infinite}
@keyframes igDrift1{50%{transform:translate(-40px,60px) scale(1.15)}}
@keyframes igDrift2{50%{transform:translate(50px,-40px) scale(1.1)}}
.irx-hero__inner{position:relative;z-index:3}
.irx-eyebrow{display:inline-flex;align-items:center;gap:.5rem;color:var(--ig-gold);font-weight:600;
  letter-spacing:3px;text-transform:uppercase;font-size:.78rem;padding:.4rem .9rem;
  border:1px solid rgba(243,182,43,.35);border-radius:100px;background:rgba(243,182,43,.06)}
.irx-hero h1{color:#fff;font-weight:800;font-size:clamp(2.2rem,5vw,4rem);line-height:1.07;letter-spacing:-1px}
.grad-text{background:linear-gradient(100deg,var(--ig-accent),var(--ig-gold),#ffe39a,var(--ig-accent));
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:igShine 6s linear infinite}
@keyframes igShine{to{background-position:300% 0}}
.irx-hero p.irx-lead{color:#d7e2f0;max-width:580px;font-size:1.1rem;line-height:1.7}
.irx-trust{display:flex;gap:1.4rem;flex-wrap:wrap;color:#cfe0f3;font-size:.9rem}
.irx-trust i{color:var(--ig-accent)}
/* révélation mot par mot au chargement */
.irx-rw{opacity:0;transform:translateY(38px);animation:igWordUp .8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes igWordUp{to{opacity:1;transform:none}}
.irx-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3;color:#cfe0f3;font-size:.72rem;letter-spacing:2px;text-transform:uppercase;text-align:center}
.irx-mouse{width:24px;height:40px;border:2px solid rgba(255,255,255,.5);border-radius:14px;margin:0 auto 8px;position:relative}
.irx-mouse::after{content:"";position:absolute;top:7px;left:50%;width:4px;height:8px;background:var(--ig-accent);border-radius:4px;transform:translateX(-50%);animation:igWheel 1.6s infinite}
@keyframes igWheel{0%{opacity:0;top:7px}30%,70%{opacity:1}100%{opacity:0;top:20px}}

/* bande de services qui chevauche le bas du hero */
.irx-strip{position:relative;z-index:5;margin-top:-70px}

/* ---- Bande chiffres-clés ------------------------------------------- */
.irx-stats{background:linear-gradient(135deg,var(--ig-navy-d),#0c3257);color:#fff;overflow:hidden;position:relative}
.irx-stats .num{font-weight:800;font-size:2.6rem;color:var(--ig-gold);line-height:1}
.irx-stats p{color:#bcd0e8;margin:.4rem 0 0;font-size:.95rem}

/* ---- Marquee partenaires ------------------------------------------- */
.irx-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.irx-marquee__track{display:flex;gap:3.5rem;width:max-content;animation:igScrollX 26s linear infinite}
.irx-marquee:hover .irx-marquee__track{animation-play-state:paused}
.irx-marquee__track span{font-weight:700;font-size:1.25rem;color:#9aa9bd;white-space:nowrap;display:inline-flex;align-items:center;gap:.5rem}
@keyframes igScrollX{to{transform:translateX(-50%)}}

/* ---- Footer modernisé ---------------------------------------------- */
#footer{background:#081320!important}
#footer .one,#footer h5{position:relative;padding-bottom:.6rem}
#footer .one::after,#footer h5::after{content:"";position:absolute;left:0;bottom:0;width:42px;height:3px;background:var(--ig-accent);border-radius:2px}
#footer a.text-white{transition:.2s}
#footer a.text-white:hover{color:var(--ig-accent)!important;padding-left:4px}
#footer ul li a{display:inline-block}
#footer .list-unstyled.d-flex li a{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.07);display:inline-flex!important;align-items:center;justify-content:center;transition:.25s}
#footer .list-unstyled.d-flex li a:hover{background:var(--ig-accent);transform:translateY(-3px)}
#footer .list-unstyled.d-flex li a i{margin:0!important}

/* ---- Bouton retour-haut ------------------------------------------- */
.cd-top{transition:.25s}
.cd-top:hover{transform:translateY(-4px)}

/* ---- Barre de contact (top bar) ------------------------------------ */
.ig-topbar{background:var(--ig-navy-d);color:#cfe0f3;font-size:.85rem;height:40px;display:flex;align-items:center;position:relative;z-index:1}
.ig-topbar .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:.75rem;width:100%}
.ig-topbar a{color:#cfe0f3;text-decoration:none;transition:.2s}
.ig-topbar a:hover{color:var(--ig-accent)}
.ig-topbar-info{display:flex;align-items:center;gap:1.1rem;flex-wrap:nowrap;overflow:hidden;white-space:nowrap;min-width:0}
.ig-topbar-info i,.ig-hours i{color:var(--ig-accent);margin-right:.25rem}
.ig-topbar-soc{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.ig-topbar-soc a{display:inline-flex;width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.08);align-items:center;justify-content:center;color:#fff}
.ig-topbar-soc a:hover{background:var(--ig-accent);color:#fff;transform:translateY(-2px)}
@media (max-width:575px){
  .ig-topbar{font-size:.74rem}
  .ig-topbar-info a:nth-of-type(2){display:none}  /* masque l'email sur mobile, garde le tel */
}

/* L'en-tete est en position:absolute top:0 (app.css) -> on le descend sous la barre */
.header-anim:not(.stick-100){ top: 40px !important; }

/* ---- Menu : espacement & alignement -------------------------------- */
.header-anim .navbar-nav{align-items:center}
.header-anim .navbar-nav .nav-link{padding:.5rem .95rem!important;display:flex;align-items:center;font-weight:600}
.dropdown-service .dropdown-toggle::after{display:none}   /* évite la double flèche */
.dropdown-service .dropdown-toggle .bi-chevron-down{transition:transform .25s}
.dropdown-service:hover .dropdown-toggle .bi-chevron-down{transform:rotate(180deg)}

/* ---- Bouton "retour en haut" : à gauche (n'écrase plus le chat) ----- */
.cd-top{left:24px!important;right:auto!important;z-index:990}

/* ---- Contenu riche (Qui sommes nous, présentation, services) ------- */
.content{line-height:1.85;color:#4a5568;font-size:1.03rem}
.content > div,.content > p{margin-bottom:1rem}
.content strong{color:var(--ig-navy);font-weight:700}
.content br + br{display:none}
/* Listes à puces stylées (check doré) */
.content ul,.content ol{list-style:none;padding-left:0;margin:1rem 0}
.content ul li,.content ol li{position:relative;padding-left:2rem;margin-bottom:.75rem;line-height:1.6}
.content ul li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--ig-accent);font-weight:800;
  width:1.3rem;height:1.3rem;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(248,141,1,.12);border-radius:6px;font-size:.85rem}
/* Lignes "sous-titre" = un bloc ne contenant qu'un texte en gras → mis en valeur */
.content div:has(> strong:only-child),.content p:has(> strong:only-child){
  font-family:'Montserrat',sans-serif;font-size:1.18rem;color:var(--ig-navy);
  margin-top:1.8rem;margin-bottom:.6rem;padding-left:.9rem;position:relative;line-height:1.35}
.content div:has(> strong:only-child)::before,.content p:has(> strong:only-child)::before{
  content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:4px;border-radius:3px;
  background:linear-gradient(var(--ig-accent),var(--ig-gold))}
.content div:has(> strong:only-child) strong,.content p:has(> strong:only-child) strong{color:var(--ig-navy)}

/* ============ PAGE DÉTAIL SERVICE ============ */
.svc-feature{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 16px 42px rgba(12,45,82,.18);height:300px}
.svc-feature img{width:100%;height:100%;object-fit:cover;transition:.6s}
.svc-feature:hover img{transform:scale(1.05)}
.svc-feature__ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,37,64,.88),rgba(10,37,64,.05) 62%)}
.svc-feature__title{position:absolute;left:1.6rem;right:1.6rem;bottom:1.3rem;margin:0;z-index:2;color:#fff;font-weight:800;font-family:'Montserrat',sans-serif;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.1;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.details-border{border:1px solid #eef1f6;border-radius:18px;box-shadow:0 10px 34px rgba(12,45,82,.07);background:#fff}
@media (min-width:992px){.details-border{position:sticky;top:120px}}
.social-details a{width:42px;height:42px;border-radius:12px!important;color:var(--ig-navy)!important;border:1px solid #e6eaf0!important;transition:.25s}
.social-details a:hover{background:var(--ig-accent);color:#fff!important;border-color:var(--ig-accent)!important;transform:translateY(-3px)}
.svc-offers-title{color:var(--ig-navy);position:relative;padding-bottom:.5rem}
.svc-offers-title::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:4px;border-radius:3px;background:linear-gradient(90deg,var(--ig-accent),var(--ig-gold))}
.svc-offers{list-style:none;padding-left:0;display:grid;gap:.6rem;margin-top:1.2rem}
.svc-offers li{position:relative;padding:.75rem 1rem .75rem 2.7rem;background:#f5f7fb;border-radius:12px;border-left:3px solid var(--ig-accent);color:var(--ig-ink);font-weight:500;transition:.2s}
.svc-offers li:hover{background:#eef2f8;transform:translateX(4px)}
.svc-offers li::before{content:"\2713";position:absolute;left:.85rem;top:50%;transform:translateY(-50%);width:1.25rem;height:1.25rem;border-radius:50%;background:var(--ig-accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800}
.details-service .swiper-container .swiper-slide img,.mySwiper .swiper-slide img{border-radius:16px}

/* ============ PAGE CONTACT ============ */
.contact-map iframe{width:100%;height:340px;border-radius:18px;box-shadow:0 12px 34px rgba(12,45,82,.12);margin-top:1rem;display:block}
.contact__form .card{background:#fff;border-radius:18px;padding:1.6rem;box-shadow:0 12px 36px rgba(12,45,82,.08)}
.contact__form .form-group{margin-bottom:1.1rem}
.contact__form .form-control{height:auto;padding:.75rem 2.6rem .75rem 1rem;border-radius:12px}
.card .rounded-circle.bg-tertiary{box-shadow:0 8px 20px rgba(248,141,1,.35);flex-shrink:0}

/* ---- Modales (devis / contact) : UI moderne ------------------------ */
.modal-content{border:none;border-radius:18px;overflow:hidden;box-shadow:0 30px 70px rgba(8,22,40,.4)}
.modal-header.bg-primary{background:linear-gradient(120deg,var(--ig-navy-d),var(--ig-navy))!important;border:none;padding:1.1rem 1.5rem}
.modal-body{padding:1.5rem 1.25rem}
.modal .form-control{border-radius:12px;padding:.7rem 1rem;border:1px solid #e3e8ef;margin-bottom:.25rem}
.modal .form-control:focus{border-color:var(--ig-accent);box-shadow:0 0 0 .2rem rgba(248,141,1,.18)}
.modal .btn-ms{border-radius:12px}
.modal h5.fw-600{color:var(--ig-navy)}

/* ---- Description service sur 2 colonnes (moins de scroll, desktop) -- */
@media (min-width:992px){
  #description-3{column-count:2;column-gap:2.6rem;column-rule:1px solid #eef1f6;text-align:justify}
}

/* ============ PAGE NOS OFFRES (pricing) ============ */
.offers-wrap{background:#f5f6f9}
.offer-card{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:20px;overflow:hidden;border:1px solid #eef1f6;box-shadow:0 12px 36px rgba(12,45,82,.08);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;position:relative}
.offer-card::after{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--ig-accent),var(--ig-gold));transform:scaleX(0);transform-origin:left;transition:.4s;z-index:4}
.offer-card:hover{transform:translateY(-10px);box-shadow:0 28px 60px rgba(12,45,82,.2)}
.offer-card:hover::after{transform:scaleX(1)}
.offer-card__head{background:linear-gradient(135deg,var(--ig-navy-d),var(--ig-navy));color:#fff;padding:1.9rem 1.6rem 1.6rem;text-align:center;position:relative;overflow:hidden}
.offer-card__head::before{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(248,141,1,.35),transparent 70%);top:-70px;right:-50px}
.offer-card__name{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.2rem;margin:0 0 .7rem;letter-spacing:.5px;position:relative}
.offer-card__price{display:flex;align-items:baseline;justify-content:center;gap:.35rem;position:relative}
.offer-card__price .amount{font-size:2.5rem;font-weight:800;font-family:'Montserrat',sans-serif;color:var(--ig-gold);line-height:1}
.offer-card__price .cur{font-size:.95rem;color:#cfe0f3;font-weight:600}
.offer-card__body{padding:1.5rem 1.6rem;color:#4a5568;line-height:1.7;flex-grow:1;font-size:.97rem}
.offer-card__foot{padding:0 1.6rem 1.7rem}
.offer-card__foot .btn-gold{width:100%;justify-content:center;padding:.8rem}
/* carte "Populaire" mise en avant */
.offer-card--featured{border:2px solid var(--ig-accent);box-shadow:0 24px 56px rgba(248,141,1,.22)}
@media (min-width:992px){
  .offer-card--featured{transform:scale(1.05)}
  .offer-card--featured:hover{transform:scale(1.05) translateY(-10px)}
}
.offer-badge{position:absolute;top:18px;right:-38px;background:linear-gradient(90deg,var(--ig-accent),var(--ig-gold));color:#fff;font-weight:700;font-size:.72rem;letter-spacing:.5px;padding:.32rem 2.6rem;transform:rotate(45deg);z-index:5;box-shadow:0 4px 12px rgba(0,0,0,.22)}

/* ---- Petites finitions --------------------------------------------- */
.bg-tertiary{background:var(--ig-accent)!important}
a{transition:color .2s}