@font-face{
    font-family:"DIN-Regular";
    src: url("/templates/default2/font/din.eot");
    src: url("/templates/default2/font/din.eot?#iefix")format("embedded-opentype"),
    url("/templates/default2/font/din.woff2") format("woff2"),
        url("/templates/default2/font/din.woff") format("woff"),
        url("/templates/default2/font/din.ttf") format("truetype");
    font-weight:normal;
    font-style:normal;
    font-display:swap;
  }

    @font-face{
    font-family:"DIN-Bold";
    src: url("/templates/default2/font/dinbold.eot");
    src: url("/templates/default2/font/dinbold.eot?#iefix")format("embedded-opentype"),
    url("/templates/default2/font/dinbold.woff2") format("woff2"),
        url("/templates/default2/font/dinbold.woff") format("woff"),
        url("/templates/default2/font/dinbold.ttf") format("truetype");
    font-weight:normal;
    font-style:normal;
    font-display:swap;
  }

 
 


    :root {
      --navy:    #0b2d4a;
      --navy-mid:#0e3d62;
      --teal:    #EE7203;
      --teal-lt: #e6f8fb;
      --light:   #f5f8fb;
      --white:   #ffffff;
      --gray:    #6c7a89;
     
      --head-font: "DIN-Bold", Arial, sans-serif ;
      --body-font: "DIN-Regular", Arial, sans-serif;
      --bs-body-font-family: "DIN-Regular", Arial, sans-serif;
    }

    *, body { margin:0; padding:0; box-sizing:border-box; }
    body { font-family: var(--body-font); background: var(--white); color: #2c3e50; }

    /* ── TOP BAR ── */
    .topbar {
      background: var(--navy);
      color: rgba(255,255,255,.65);
      font-size: .78rem;
      letter-spacing: .03em;
      padding: .4rem 0;
    }
    .topbar a { color: rgba(255,255,255,.65); text-decoration:none; transition:.2s; }
    .topbar a:hover { color: var(--teal); }
    .topbar .sep { margin: 0 .8rem; opacity:.3; }

    /* ── NAVBAR ── */
    .navbar-main {
      background: var(--white);
      box-shadow: 0 2px 20px rgba(11,45,74,.1);
      padding: .6rem 0;
      position: sticky; top:0; z-index:1000;
    }
    .navbar-brand img { height: 52px; }
    .navbar-nav .nav-link {
      font-family: var(--body-font);
      font-weight: 500;
      font-size: .87rem;
      color: var(--navy) !important;
      letter-spacing: .02em;
      padding: .5rem .9rem !important;
      transition: color .2s;
    }
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-item.active .nav-link { color: var(--teal) !important; }
    .navbar-nav .dropdown-menu {
      border: none;
      box-shadow: 0 8px 30px rgba(11,45,74,.12);
      border-top: 3px solid var(--teal);
      border-radius: 0 0 8px 8px;
      padding: .6rem 0;
    }
    .dropdown-item {
      font-size: .84rem;
      color: var(--navy);
      padding: .45rem 1.2rem;
    }
    .dropdown-item:hover { background: var(--teal-lt); color: var(--teal); }

    /* ── HERO ── */
    .hero {
      position: relative;
      background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 55%, #0a4a6e 100%);
      overflow: hidden;
      padding: 80px 0 100px;
    }
    .hero::before {
      content:'';
      position:absolute; inset:0;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"><circle cx="700" cy="100" r="300" fill="rgba(0,180,200,0.06)"/><circle cx="100" cy="500" r="200" fill="rgba(0,180,200,0.04)"/></svg>') no-repeat center/cover;
    }
    .hero-wave {
      position: absolute; bottom: -2px; left:0; right:0;
      height: 60px;
    }
    .hero-eyebrow {
      font-size: .78rem; font-weight:600; letter-spacing:.15em;
      color: var(--teal); text-transform:uppercase; margin-bottom:.8rem;
    }
    .hero h1 {
      font-family: var(--head-font);
      font-size: clamp(2.2rem, 4vw, 3.4rem);
      font-weight: 600;
      color: var(--white);
      line-height: 1.2;
      margin-bottom: 1.2rem;
    }
    .hero p {
      font-size: 1rem; font-weight:300;
      color: rgba(255,255,255,.75);
      max-width: 480px;
      line-height: 1.7;
    }
    .hero-badge {
      display: inline-flex; align-items:center; gap:.5rem;
      background: rgba(0,180,200,.15); border:1px solid rgba(0,180,200,.3);
      color: var(--teal); font-size:.78rem; font-weight:500;
      padding:.35rem .9rem; border-radius:50px; margin-top:1.5rem;
    }

    /* Chiffres hero */
    .hero-stats { display:flex; gap:2.5rem; margin-top:2.5rem; flex-wrap:wrap; }
    .hero-stat-num {
      font-family: var(--head-font); font-size:2.4rem; font-weight:700;
      color: var(--white); line-height:1;
    }
    .hero-stat-num span { font-size:1.2rem; }
    .hero-stat-label { font-size:.75rem; color:rgba(255,255,255,.55); margin-top:.2rem; letter-spacing:.04em; }

    /* Hero image card */
    .hero-card {
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(10px);
      border-radius: 16px;
      padding: 2rem;
      color: var(--white);
    }

    a.hero-card{
       background: rgba(0,0,0,.1) !important; 
    }

    .hero-card .icon-ring {
      width:52px; height:52px; border-radius:50%;
      background: rgba(0,180,200,.2); border:1px solid rgba(0,180,200,.4);
      display:flex; align-items:center; justify-content:center;
      font-size:1.4rem; color:var(--teal); margin-bottom:1rem;
    }
    .hero-card h5 { font-family:var(--head-font); font-size:1.3rem; font-weight:600; }
    .hero-card p { font-size:.83rem; color:rgba(255,255,255,.65); line-height:1.6; }

    /* ── 4 BLOCS D'ACTION ── */
    .action-blocks { margin-top:-48px; position:relative; z-index:10; }
    .action-card {
      background: var(--white);
      border-radius: 14px;
      box-shadow: 0 8px 40px rgba(11,45,74,.12);
      padding: 2rem 1.5rem;
      text-align: center;
      text-decoration: none;
      color: var(--navy);
      display: block;
      transition: transform .25s, box-shadow .25s;
      height: 100%;
      border-top: 4px solid transparent;
      position: relative; overflow:hidden;
    }
    .action-card::after {
      content:'';
      position:absolute; bottom:0; left:0; right:0; height:4px;
      background: var(--teal);
      transform: scaleX(0); transition:.25s;
    }
    .action-card:hover { transform: translateY(-6px); box-shadow: 0 16px 50px rgba(11,45,74,.18); color: var(--navy); }
    .action-card:hover::after { transform: scaleX(1); }
    .action-card .action-icon {
      width:60px; height:60px; border-radius:50%;
      background: var(--teal-lt);
      display:flex; align-items:center; justify-content:center;
      font-size:1.6rem; color:var(--teal);
      margin: 0 auto 1.2rem;
      transition: background .25s;
    }
    .action-card:hover .action-icon { background: var(--teal); color: var(--white); }
    .action-card h6 {
      font-weight:600; font-size:.93rem; letter-spacing:.01em; margin-bottom:.4rem;
    }
    .action-card .action-sub { font-size:.78rem; color: var(--gray); line-height:1.4; }
    .action-card .action-badge {
      display:inline-block; background:var(--teal); color:#fff;
      font-size:.72rem; font-weight:600; border-radius:20px;
      padding:.2rem .7rem; margin-bottom:.6rem;
    }

    /* ── SECTIONS ── */
    .section-title {
      font-family: var(--head-font);
      font-size: clamp(1.8rem, 3vw, 2.5rem);
      font-weight:600; color: var(--navy);
      line-height:1.2;
    }
    .section-eyebrow {
      font-size:.75rem; font-weight:600; letter-spacing:.15em;
      color: var(--teal); text-transform:uppercase; margin-bottom:.6rem;
    }
    .teal-line {
      width:40px; height:3px; background:var(--teal); border-radius:2px; margin:1rem 0 1.5rem;
    }

    /* ── ACTIVITÉ ── */
    .activity-section { background: var(--light); padding: 80px 0; }
    .activity-item {
      display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.2rem;
    }
    .activity-dot {
      width:8px; height:8px; border-radius:50%; background:var(--teal);
      margin-top:.45rem; flex-shrink:0;
    }
    .activity-text { font-size:.9rem; line-height:1.6; color:#3a4a5c; }

    /* ── STATS STRIP ── */
    .stats-strip { background: var(--navy); padding: 60px 0; }
    .stat-item { text-align:center; }
    .stat-num {
      font-family:var(--head-font); font-size:2.8rem; font-weight:700; color:var(--white);
    }
    .stat-unit { font-size:1.4rem; color:var(--teal); }
    .stat-label { font-size:.8rem; color:rgba(255,255,255,.5); letter-spacing:.04em; margin-top:.3rem; }
    .stat-divider { width:1px; background:rgba(255,255,255,.1); }

    /* ── EMPLOI ── */
    .emploi-section { padding:80px 0; }
    .emploi-card {
      background: var(--white);
      border:1px solid #e2eaf2;
      border-radius:12px; padding:1.5rem 1.8rem;
      display:flex; align-items:center; gap:1.2rem;
      margin-bottom:.8rem;
      transition: box-shadow .2s, border-color .2s;
    }
    .emploi-card:hover { box-shadow:0 4px 20px rgba(11,45,74,.08); border-color:var(--teal); }
    .emploi-icon {
      width:42px; height:42px; border-radius:10px;
      background:var(--teal-lt); color:var(--teal);
      display:flex; align-items:center; justify-content:center;
      font-size:1.2rem; flex-shrink:0;
    }
    .emploi-title { font-size:.9rem; font-weight:600; color:var(--navy); margin-bottom:.15rem; }
    .emploi-sub { font-size:.78rem; color:var(--gray); }

    /* ── MATERNITÉ BANNER ── */
    .maternite-banner {
      background: linear-gradient(135deg, #0b2d4a 0%, #0e7a8a 100%);
      border-radius:16px; padding:3rem 2.5rem;
      display:flex; align-items:center; justify-content:space-between;
      gap:2rem; flex-wrap:wrap;
    }
    .maternite-banner h3 {
      font-family:var(--head-font); color:#fff; font-size:1.8rem; font-weight:600;
    }
    .maternite-banner p { color:rgba(255,255,255,.7); font-size:.9rem; }

    /* ── BTN ── */
    .btn-teal {
      background: var(--teal); color:#fff; border:none;
      font-weight:500; font-size:.88rem; padding:.65rem 1.6rem;
      border-radius:8px; text-decoration:none; transition:.2s;
      display:inline-flex; align-items:center; gap:.5rem;
    }
    .btn-teal:hover { background:#fca251; color:#fff; transform:translateY(-1px); }
    .btn-outline-navy {
      border:2px solid var(--navy); color:var(--navy);
      font-weight:500; font-size:.88rem; padding:.6rem 1.5rem;
      border-radius:8px; text-decoration:none; transition:.2s;
      display:inline-flex; align-items:center; gap:.5rem;
    }
    .btn-outline-navy:hover { background:var(--navy); color:#fff; }
    .btn-white {
      background:#fff; color:var(--navy);
      font-weight:600; font-size:.88rem; padding:.65rem 1.6rem;
      border-radius:8px; text-decoration:none; transition:.2s;
      display:inline-flex; align-items:center; gap:.5rem;
    }
    .btn-white:hover { background:rgba(255,255,255,.9); color:var(--teal); }

    /* ── FOOTER ── */
    .footer { background: var(--navy); padding:60px 0 0; }
    .footer-brand { font-family:var(--head-font); font-size:1.4rem; color:#fff; font-weight:600; margin-bottom:.8rem; }
    .footer-address { font-size:.83rem; color:rgba(255,255,255,.5); line-height:1.8; }
    .footer h6 { color:var(--teal); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1rem; font-weight:600; }
    .footer a { color:rgba(255,255,255,.55); text-decoration:none; font-size:.85rem; display:block; margin-bottom:.5rem; transition:.2s; }
    .footer a:hover { color:var(--teal); }
    .footer-social a {
      display:inline-flex; align-items:center; justify-content:center;
      width:36px; height:36px; border-radius:50%;
      background:rgba(255,255,255,.08); color:rgba(255,255,255,.6);
      font-size:1rem; margin-right:.5rem; transition:.2s;
    }
    .footer-social a:hover { background:var(--teal); color:#fff; }
    .footer-bottom {
      border-top:1px solid rgba(255,255,255,.08);
      margin-top:40px; padding:16px 0;
      font-size:.78rem; color:rgba(255,255,255,.3);
    }

    /* ── CERTIF BANNER ── */
    .certif-bar {
      background: var(--teal-lt); border-left:4px solid var(--teal);
      border-radius:0 8px 8px 0; padding:1rem 1.5rem;
      display:flex; align-items:center; gap:1rem;
    }
    .certif-bar i { font-size:1.4rem; color:var(--teal); }
    .certif-bar p { font-size:.85rem; color:var(--navy-mid); margin:0; }

    /* Animations */
    @keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
    .fade-up { animation: fadeUp .6s ease both; }
    .delay-1 { animation-delay:.1s; }
    .delay-2 { animation-delay:.2s; }
    .delay-3 { animation-delay:.3s; }
    .delay-4 { animation-delay:.4s; }

    /* Responsive */
    @media(max-width:768px) {
      .action-blocks { margin-top:0; padding-top:2rem; }
      .hero { padding:50px 0 80px; }
      .stat-divider { display:none; }
    }

 .jsd { display: none; }

 
.bloc_esmwork {
  margin: 0 auto -50px !important;
  position: relative;
  width: 95%;
  text-align: center;
  background: url(/logoesmwork.jpg) center center no-repeat;
  background-size: contain;
  height: 260px;
}

.bloc_esmwork strong {
  font-size: 18px;
  margin-top: 162px;
  display: inline-block;
}

.bloc_esmwork i {
  font-size: 12px;
  transform: rotate(-3.7deg);
  display: inline-block;
  margin-top: 7px;
}