/* =========================

   style_redesign.css

   Navbar – clean, conflict-free, fully responsive

========================= */



:root {

  /* Color Palette */

  --primary-blue: #5A696B;

  --accent-yellow: #EEC942;

  --accent-green: #93C241;

  --accent-pink: #1379B2; 



  --text-dark: #0b1220;

  --text-light: #222;

  --bg-white: #FFFFFF;

  --bg-light-gray: #F9F9F9;



  /* Spacing */

  --spacing-sm: 0.5rem;

  /* 8px */

  --spacing-md: 1rem;

  /* 16px */

  --spacing-lg: 2rem;

  /* 32px */

  --spacing-xl: 4rem;

  /* 64px */



  /* Typography */

  --font-main: 'Nunito', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  --font-heading: 'Nunito', 'Segoe UI', sans-serif;



  --radius: 12px;

  --shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

}



* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



body {

  font-family: var(--font-main);

  color: var(--text-dark);

  background-color: var(--bg-white);

  line-height: 1.6;

  font-size: 16px;

}



img {

  max-width: 100%;

  height: auto;

  display: block;

}



a {

  color: var(--primary-blue);

  text-decoration: none;

  transition: color 0.2s ease;

}



a:hover {

  color: var(--accent-pink);

}



h2{

  font-weight: 900;

}



/* Layout Utilities */

.container {

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 var(--spacing-md);

}



.section-activities {

  background-color: var(--bg-white);

  padding-bottom: var(--spacing-md);

  padding-top: var(--spacing-md);

}



.section-your-activities {

  background-color: var(--bg-light-gray);

  padding: 0 var(--spacing-lg);

  padding-bottom: var(--spacing-lg);

}



/* .section {

  padding: var(--spacing-xl) 0;

} */



.grid {

  display: grid;

  gap: var(--spacing-lg);

}



.grid-2 {

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

}



.grid-3 {

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

}



.grid-4 {

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}



.text-center {

  text-align: center;

}



/* Small helpers */



.section-pubs{

  background: var(--bg-white);

  padding: var(--spacing-md) 0;

}



.soft-hr {

  margin: 1rem 0;

  border: 0;

  border-top: 1px solid #eee;

}



.shadow-image {

  margin: 0 auto;

}



.link-more {

  display: inline-block;

  margin-top: 1rem;

  color: var(--accent-pink);

  font-weight: 800;

}



.button {

  display: inline-block;

  background: var(--primary-blue);

  color: white;

  padding: 10px 20px;

  border-radius: 10px;

  font-weight: 800;

}



/* =========================

   Header & Navigation

========================= */

.site-header {

  background: var(--bg-white);

  padding: var(--spacing-md) 0;

  position: sticky;

  top: 0;

  z-index: 1000;

  border-bottom: 2px solid var(--primary-blue);

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

  transition: transform 0.25s ease;

  will-change: transform;

}



.site-header.is-hidden {

  transform: translateY(-110%);

}



.nav-container {

  display: flex;

  justify-content: space-between;

  align-items: center;

  position: relative;

  gap: var(--spacing-md);

}



.site-logo {

  display: flex;

  align-items: center;

  gap: var(--spacing-sm);

}



.site-logo a {

  display: flex;

  align-items: center;

  border-radius: 6px;

}



.site-logo a:focus-visible {

  outline: 3px solid var(--primary-blue);

  outline-offset: 3px;

}



/* ─── Top-level list ─── */

.main-nav > ul {

  list-style: none;

  display: flex;

  gap: 4px;

  align-items: center;

  margin: 0;

  padding: 0;

}



/* ─── All nav links ─── */

.main-nav a {

  font-weight: 700;

  color: var(--text-dark);

  text-transform: uppercase;

  font-size: 0.82rem;

  letter-spacing: 0.4px;

  padding: 8px 11px;

  border-radius: 8px;

  display: inline-flex;

  align-items: center;

  gap: 4px;

  white-space: nowrap;

  transition: color 0.15s ease, background 0.15s ease;

}



.main-nav > ul > li > a {

  font-size: 0.85rem;

}



.main-nav a:hover,

.main-nav a:focus-visible {

  color: var(--primary-blue);

  background: rgba(90, 105, 107, 0.08);

}



.main-nav a:focus-visible {

  outline: 2px solid var(--primary-blue);

  outline-offset: 2px;

}



/* Arrow indicator (CSS-controlled, not hardcoded in text) */

.nav-arrow {

  font-size: 0.7rem;

  line-height: 1;

  opacity: 0.6;

  transition: transform 0.2s ease, opacity 0.2s ease;

}



.main-nav .has-submenu:hover > a .nav-arrow,

.main-nav .has-submenu:focus-within > a .nav-arrow,

.main-nav .has-submenu.open > a .nav-arrow {

  opacity: 1;

  color: var(--primary-blue);

}



/* ─── Hamburger button ─── */

.menu-toggle {

  display: none;

  border: 0;

  background: transparent;

  font-size: 1.7rem;

  cursor: pointer;

  padding: 6px 10px;

  border-radius: 10px;

  line-height: 1;

  color: var(--text-dark);

  transition: background 0.15s ease;

}



.menu-toggle:hover {

  background: rgba(0, 0, 0, 0.06);

}



.menu-toggle:focus-visible {

  outline: 2px solid var(--primary-blue);

  outline-offset: 2px;

}



/* section-training */

.section-training {

  padding: var(--spacing-md) 0;

}



/* ─────────────────────────────────────────

   SUBMENU – shared base styles (mobile + desktop)

───────────────────────────────────────── */

.main-nav li {

  position: relative;

}



.main-nav ul.submenu {

  list-style: none;

  margin: 0;

  padding: 6px 0;

  min-width: 240px;

  background: #fff;

  border: 1px solid #e4e8ef;

  border-radius: 10px;

  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.11);

  z-index: 9000;

}



.main-nav .submenu li {

  display: block;

  width: 100%;

}



.main-nav .submenu > li > a {

  display: block;

  width: 100%;

  padding: 9px 14px;

  border-radius: 6px;

  text-transform: none;

  font-weight: 600;

  font-size: 0.88rem;

  letter-spacing: 0;

  color: var(--text-dark);

}



.main-nav .submenu > li > a:hover,

.main-nav .submenu > li > a:focus-visible {

  background: #f0f4f9;

  color: var(--primary-blue);

}



/* ─────────────────────────────────────────

   DESKTOP: Transition-based open/close

   (opacity + visibility, no display toggle)

   This avoids the display:none / display:block conflict

───────────────────────────────────────── */

@media (min-width: 769px) {



  /* Level-1 dropdown: appears below the trigger */

  .main-nav > ul > li > ul.submenu {

    position: absolute;

    top: calc(100% + 6px);

    left: 0;

    /* Invisible by default – keep in DOM for transitions */

    display: block;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateY(6px);

    transition:

      opacity 140ms ease 200ms,

      transform 140ms ease 200ms,

      visibility 0s linear 340ms;

    overflow: visible;

  }



  /* Show on hover OR keyboard focus-within */

  .main-nav > ul > li.has-submenu:hover > ul.submenu,

  .main-nav > ul > li.has-submenu:focus-within > ul.submenu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);

    transition:

      opacity 140ms ease 0ms,

      transform 140ms ease 0ms,

      visibility 0s linear 0ms;

  }



  /* Hover bridge – fills the gap between trigger and menu */

  .main-nav > ul > li.has-submenu > a::after {

    content: "";

    position: absolute;

    bottom: -8px;

    left: 0;

    width: 100%;

    height: 8px;

  }



  /* Level-2 flyout: appears to the right */

  .main-nav ul.submenu li > ul.submenu {

    position: absolute;

    top: -6px;

    left: 100%;

    margin-left: 6px;

    display: block;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateX(6px);

    transition:

      opacity 130ms ease 180ms,

      transform 130ms ease 180ms,

      visibility 0s linear 310ms;

    overflow: visible;

    max-height: none;

  }



  .main-nav ul.submenu li.has-submenu:hover > ul.submenu,

  .main-nav ul.submenu li.has-submenu:focus-within > ul.submenu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateX(0);

    transition:

      opacity 130ms ease 0ms,

      transform 130ms ease 0ms,

      visibility 0s linear 0ms;

  }



  /* Prevent right-edge flyouts for last 2 top-level items (Théorie, Contact) */

  .main-nav > ul > li:nth-last-child(-n+2) ul.submenu li > ul.submenu {

    left: auto;

    right: 100%;

    margin-left: 0;

    margin-right: 6px;

    transform: translateX(-6px);

  }



  .main-nav > ul > li:nth-last-child(-n+2) ul.submenu li.has-submenu:hover > ul.submenu,

  .main-nav > ul > li:nth-last-child(-n+2) ul.submenu li.has-submenu:focus-within > ul.submenu {

    transform: translateX(0);

  }



  /* Ensure submenus never clip their children */

  .main-nav ul.submenu {

    overflow: visible;

  }

}



/* =========================

   MEGA MENU – style H&M

========================= */

/* Desktop: mega menu panel */
@media (min-width: 769px) {

  .main-nav > ul > li > ul.submenu.mega-menu {
    /* Centré sous la navbar, large */
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: 860px;
    max-width: 98vw;

    /* Layout en colonnes */
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    padding: 32px 30px 28px;

    /* Apparence H&M */
    border-top: 3px solid #0298a3;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);

    /* Caché par défaut (hérité) */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 150ms ease 180ms,
      transform 150ms ease 180ms,
      visibility 0s linear 330ms;
  }

  .main-nav > ul > li.has-submenu:hover > ul.submenu.mega-menu,
  .main-nav > ul > li.has-submenu:focus-within > ul.submenu.mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition:
      opacity 150ms ease 0ms,
      transform 150ms ease 0ms,
      visibility 0s linear 0ms;
  }
 
  .mega-menu .mega-menu-column {
    flex: 1 1 25%;
    padding: 0 20px 0 0;
    display: block;
    border: none;
  }

  .mega-menu .mega-menu-column:last-child {
    padding-right: 0;
  }
 
  .mega-menu .mega-menu-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 800;
    color: #0298a3;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 18px;
    padding-bottom: 0;
    border: none;
    background: none;
  }

  /* Liste des liens */
  .mega-menu .mega-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .mega-menu .mega-menu-list li {
    display: block;
    margin: 0;
  }

  .mega-menu .mega-menu-list li a {
    display: block;
    padding: 9px 0;
    font-size: 0.93rem;
    font-weight: 400;
    color: #111;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 0;
    background: none;
    line-height: 1.3;
    white-space: nowrap;
    border-bottom: 1px solid #f0f0f0;
    transition: color 0.15s ease;
  }

  .mega-menu .mega-menu-list li:last-child a {
    border-bottom: none;
  }

  .mega-menu .mega-menu-list li a:hover {
    color: #10a3c8;
    background: none;
  }

}

/* Mobile: mega menu accordion */
@media (max-width: 768px) {

  .main-nav ul.submenu.mega-menu {
    display: none;
    flex-direction: column;
    border-left: 3px solid #0298a3;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .main-nav .has-submenu.open > ul.submenu.mega-menu {
    display: flex;
  }

  .mega-menu .mega-menu-column {
    display: block;
    width: 100%;
    padding: 0;
  }

  .mega-menu .mega-menu-title {
    display: block;
    padding: 11px 20px 11px 24px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #0298a3;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    background: #fdf0f2;
    border-top: 1px solid #f5d0d5;
    border-bottom: none;
  }

  .mega-menu .mega-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .mega-menu .mega-menu-list li a {
    display: block;
    padding: 11px 20px 11px 36px;
    font-size: 0.9rem;
    font-weight: 400;
    color: #111;
    background: #f5f7fb;
    border-top: 1px solid #eaeef5;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    border-radius: 0;
  }

  .mega-menu .mega-menu-list li a:hover {
    color: #c8102e;
    background: #f0e8ea;
  }

}

/* =========================

   Hero

========================= */

.hero {

  background-color: var(--bg-light-gray);

  text-align: center;

  padding-top: var(--spacing-md);

}



.hero h1 {

  font-size: 1.7rem;

  color: var(--text-dark);

  line-height: 1.2;

}



.hero h1 span.highlight {

  color: var(--accent-pink);

}



.hero-subtitle {

  font-size: 1.1rem;

  color: var(--text-light);

  max-width: 820px;

  margin: 0 auto;

}



/* =========================

   Cards

========================= */

.card-section {

  padding-top: var(--spacing-md);

}



.card {

  background: var(--bg-white);

  padding: var(--spacing-lg);

  border-radius: var(--radius);

  border: 1px solid #eee;

  text-align: center;

  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;

}



.card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow);

  border-color: rgba(135, 180, 195, 0.7);

}



.card h3 {

  color: var(--primary-blue);

  margin: var(--spacing-md) 0 8px 0;

}



/* =========================

   Clients

========================= */

.clients-section {

  background-color: var(--bg-light-gray);

  padding: var(--spacing-md) 0;

  overflow: hidden;

}



.clients-grid {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: var(--spacing-md);

}



.clients-grid img {

  opacity: 0.85;

  /*filter: grayscale(100%);*/

  transition: all 0.25s ease;

  border-radius: 10px;

}



.clients-grid img:hover {

  opacity: 1;

  filter: grayscale(0%);

}



/* =========================

   Clients slider (marquee)

========================= */

.clients-slider{

  position: relative;

  overflow: hidden;

  padding: 18px 0;

}



.clients-slider::before,

.clients-slider::after{

  content:"";

  position:absolute;

  top:0; bottom:0;

  width: 70px;

  pointer-events:none;

  z-index:2;

}



.clients-slider::before{

  left:0;

  background: linear-gradient(to right, var(--bg-light-gray), rgba(249,249,249,0));

}

.clients-slider::after{

  right:0;

  background: linear-gradient(to left, var(--bg-light-gray), rgba(249,249,249,0));

}



.clients-track{

  display:flex;

  align-items:center;

  gap: 48px;

  width: max-content;

  animation: clients-scroll 22s linear infinite;

  will-change: transform;

}



.clients-slider:hover .clients-track{

  animation-play-state: paused;

}



.client-logo{

  flex: 0 0 auto;

  display:flex;

  align-items:center;

  justify-content:center;

  height: 70px;          /* slider height */

  padding: 6px 10px;

}



.client-logo img{

  height: 70px;

  width: auto;

  max-width: 260px;

  object-fit: contain;

  /*filter: grayscale(100%);*/

  opacity: 0.9;

  transition: filter .2s ease, opacity .2s ease, transform .2s ease;

}



.client-logo img:hover{

  filter: grayscale(0%);

  opacity: 1;

  transform: translateY(-1px);

}



@keyframes clients-scroll{

  from { transform: translateX(0); }

  to   { transform: translateX(-50%); } /* because list is duplicated */

}



@media (max-width: 768px){

  .clients-track{ gap: 28px; animation-duration: 18s; }

  .client-logo, .client-logo img{ height: 54px; }

}









/* =========================

   Notre Accompagnement - Accordion (with icon in summary)

========================= */

.offer-accordion{

  display: grid;

  gap: var(--spacing-md);

  margin-top: var(--spacing-md);

  max-width: 520px;

  margin-left: auto;

  margin-right: auto;

}



.offer-item{

  background: var(--bg-white);

  border: 2px solid #cfd3d8;       /* closer to screenshot */

  border-radius: 14px;

  box-shadow: 0 8px 18px rgba(0,0,0,.06);

  overflow: hidden;

}



/* Summary layout: icon | centered title | caret */

.offer-summary{

  cursor: pointer;

  padding: 14px 18px;

  font-weight: 900;

  color: var(--text-dark);

  list-style: none;



  display: grid;

  grid-template-columns: 44px 1fr 24px;

  align-items: center;

  column-gap: 10px;

}



.offer-summary::-webkit-details-marker{

  display: none;

}



.offer-icon{

  width: 42px;

  height: 42px;

  object-fit: contain;

  justify-self: center;

}



.offer-title{

  text-align: left;              /* key: title centered like screenshot */

  line-height: 1.25;

}



/* caret on the right JR*/



.offer-summary-jr{

  cursor: pointer;

  padding: 14px 18px;

  font-weight: 900;

  color: var(--text-dark);

  list-style: none;



  display: grid;

  grid-template-columns: 44px 1fr 24px;

  align-items: center;

  column-gap: 10px;

}



.offer-summary-jr::-webkit-details-marker{

  display: none;

}



.offer-summary-jr::after{

  content: "";

  font-size: 1rem;

  color: var(--text-dark);

  justify-self: end;

  transition: transform .2s ease;

  grid-column: 3;

}



/* caret on the right */

.offer-summary::after{

  content: "▾";

  font-size: 1rem;

  color: var(--text-dark);

  justify-self: end;

  transition: transform .2s ease;

  grid-column: 3;

}



.offer-item[open] .offer-summary::after{

  transform: rotate(180deg);

}



/* subtle hover/focus */

.offer-summary:hover{

  background: #f6f7f8;

}



.offer-summary:focus-visible{

  outline: 3px solid rgba(135, 180, 195, 0.55);

  outline-offset: 2px;

}



/* Keep your list styles */

.offer-list{

  list-style: none;

  padding: 0 18px 16px 18px;

  margin: 0;

}



.offer-list li{

  position: relative;

  padding-left: 16px;

  text-align: left;

  margin: 8px 0;

  font-weight: 600;

  color: var(--text-light);

}



.offer-list li::before{

  content: "•";

  position: absolute;

  left: 0;

  top: 0;

  color: var(--accent-pink);

  font-weight: 900;

}



.offer-list a{

  color: var(--primary-blue);

  text-decoration: none;

}



.offer-list a:hover{

  color: var(--primary-blue);

  text-decoration: underline;

}





/* =========================

   Sectors cards with background images

========================= */

.sectors-grid .sector-card{

  position: relative;

  overflow: hidden;

  text-align: left;

  min-height: 170px;



  /* image via CSS variable */

  background-image:

    /* linear-gradient(180deg, rgba(45, 72, 127, 0.2), rgba(43, 69, 121, 0.65)), */

    var(--bg-image);

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;



  border-color: rgba(255,255,255,.15);

}



.sectors-grid .sector-card h3,

.sectors-grid .sector-card p{

  position: relative;

  z-index: 2;

  color: var(--bg-white);

}



.sectors-grid .sector-card h3{

  margin-top: 0;

  font-weight: 900;

  font-size: xx-large;

  color:#ffffff;

  letter-spacing: .2px;

}



.sectors-grid .sector-card p{

  color: rgba(255,255,255,.88);

  visibility: hidden;

  margin: 6px 0 0 0;

  font-weight: 700;

}



.sectors-grid .sector-card:hover{

  transform: translateY(-4px);

  box-shadow: var(--shadow);

  border-color: rgba(255,255,255,.30);

}





/* =========================

   Quality / Standards

========================= */

.quality-section{

  padding-bottom: var(--spacing-md);

  padding-top: var(--spacing-md);

  background: var(--bg-light-gray);

}



.quality-header{

  text-align: center;

  margin-bottom: var(--spacing-lg);

}



.quality-header h2{

  color: var(--primary-blue);

  margin-bottom: 10px;

}



.quality-lead{

  max-width: 860px;

  margin: 0 auto;

  color: var(--text-light);

  font-size: 1.05rem;

}



.quality-card{

  text-align: left;

}



.quality-card h3{

  margin-top: 0;

  color: var(--text-dark);

}



.badge-grid{

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 14px;

}



.badge{

  display: inline-flex;

  align-items: center;

  padding: 8px 12px;

  border-radius: 999px;

  border: 1px solid rgba(90, 105, 107, 0.18); /* primary-blue with opacity */

  background: rgba(135, 180, 195, 0.12);      /* accent-pink with opacity */

  font-weight: 800;

  font-size: 0.9rem;

  color: var(--text-dark);

}



.badge:hover{

  background: rgba(135, 180, 195, 0.18);

}



.quality-actions{

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 14px;

  margin-top: 16px;

}



.quality-note{

  margin-top: 14px;

  color: var(--text-light);

  font-size: 0.95rem;

}



/* =========================

   Mission standardisée

========================= */

.mission-section{

  background: var(--bg-white);

  padding: var(--spacing-md) 0;

}



.mission-lead{

  max-width: 900px;

  margin: 0 auto;

  color: var(--text-light);

  font-size: 1.05rem;

}



.mission-header-card{

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 8px;

}



.mission-header-card h3{

  margin: 0; /* remove default spacing */

}



.mission-card{

  text-align: left;

  position: relative;

  overflow: hidden;

}



.mission-step{

  width: 44px;

  height: 44px;

  border-radius: 12px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-weight: 900;

  background: rgba(135, 180, 195, 0.18);

  border: 1px solid rgba(90, 105, 107, 0.18);

  margin-bottom: 12px;

}



.mission-card h3{

  margin: 0 0 8px 0;

  color: var(--text-dark);

}



/* =========================

   Dialogue (Forum & Blog)

========================= */

.dialogue-section{

  background: var(--bg-light-gray);

  padding-bottom: var(--spacing-md);

  padding-top: var(--spacing-md);

}



.dialogue-lead{

  max-width: 800px;

  margin: 0 auto;

  color: var(--text-light);

  font-size: 1.05rem;

}



.dialogue-card{

  text-decoration: none;

  display: block;

}



.dialogue-icon{

  width: 54px;

  height: 54px;

  border-radius: 16px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 1.4rem;

  background: rgba(147, 194, 65, 0.16); /* accent-green with opacity */

  border: 1px solid rgba(147, 194, 65, 0.22);

  margin-bottom: 12px;

}



.dialogue-card:hover .dialogue-icon{

  transform: translateY(-1px);

}



/* Center icon + title in the middle */

.dialogue-head{

  display:flex;

  align-items:center;

  gap:8px;

  justify-content:center; /* ✅ center */

  width:100%;            /* ✅ take full width so centering works */

  margin-bottom: var(--spacing-md);

}



.dialogue-head .dialogue-icon{ margin-bottom:0; }

.dialogue-head h3{ margin:0; }



/* =========================

   Services list

========================= */

.services-list {

  list-style: none;

}



.service-item {

  border-bottom: 1px solid #eee;

  padding: var(--spacing-md) 0;

  text-align: left;

}



.service-item h4 {

  color: var(--accent-green);

  margin-bottom: var(--spacing-sm);

  font-weight: 900;

}



.service-content {

  padding-left: 2px;

}



.service-content a {

  display: block;

  margin-bottom: 8px;

  color: var(--text-light);

  font-weight: 600;

}



.service-content a:before {

  content: "•";

  color: var(--accent-pink);

  margin-right: 8px;

}



/* =========================

   Footer

========================= */

.site-footer {

  margin-top: var(--spacing-xl);

  background: #5A696B;

  color: rgba(255, 255, 255, 0.86);

}



.site-footer a {

  color: rgba(255, 255, 255, 0.9);

}



.site-footer a:hover {

  text-decoration: underline;

}



.footer-grid {

  padding: var(--spacing-xl) 0;

  padding-left: var(--spacing-sm);

  padding-right: var(--spacing-sm);

  display: grid;

  grid-template-columns: 1.2fr 1fr 1fr;

  gap: 28px;

}



/* Brand */

.footer-brand {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 12px;

}



.footer-logo {

  height: 34px;

  width: auto;

}



.footer-brand-text {

  font-weight: 900;

  letter-spacing: 0.2px;

  font-size: 1.05rem;

}



.footer-title {

  font-size: 0.95rem;

  font-weight: 900;

  margin: 0 0 12px 0;

  color: white;

}

/* Texte presentation activite */

.footer-text {

  margin: 0;

  line-height: 1.6;

  color: #FFFFFF;

  max-width: 100%;

}



.footer-links,

.footer-meta {

  list-style: none;

  padding: 0;

  margin: 0;

}



.footer-links li,

.footer-meta li {

  margin: 10px 0;

}

/* Texte presentation pays */

.footer-label {

  display: inline-block;

  min-width: 92px;

  color: #F9F9F9;

}



.footer-small {

  font-size: 0.9rem;

  color: #F9F9F9;

}



/* Badges */

.footer-badges {

  margin-top: 14px;

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}



.footer-badge {

  display: inline-flex;

  align-items: center;

  padding: 8px 12px;

  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, 0.14);

  background: rgba(255, 255, 255, 0.06);

  font-weight: 800;

  font-size: 0.9rem;

}



.footer-badge:hover {

  background: rgba(255, 255, 255, 0.1);

}



/* Form */

.footer-form {

  margin-top: 12px;

  display: grid;

  grid-template-columns: 1fr auto;

  gap: 10px;

}



.footer-form input {

  width: 100%;

  min-width: 0;

  border-radius: 10px;

  border: 1px solid rgba(255, 255, 255, 0.18);

  background: rgba(255, 255, 255, 0.06);

  color: white;

  padding: 10px 12px;

  outline: none;

}



.footer-form input::placeholder {

  color: rgba(255, 255, 255, 0.55);

}



.footer-form button {

  border: 0;

  border-radius: 10px;

  padding: 10px 14px;

  font-weight: 900;

  cursor: pointer;

  background: var(--primary-blue);

  color: white;

}



.footer-form button:hover {

  filter: brightness(1.05);

}



/* Bottom bar */

.footer-bottom {

  border-top: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(0, 0, 0, 0.15);

}



.footer-bottom-inner {

  padding: 14px 0;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  flex-wrap: wrap;

}



.footer-bottom-inner p {

  margin: 0;

  color: rgba(255, 255, 255, 0.7);

}



.footer-bottom-links {

  display: flex;

  gap: 14px;

  flex-wrap: wrap;

}



.footer-bottom-links a {

  color: rgba(255, 255, 255, 0.7);

}



.footer-bottom-links a:hover {

  color: rgba(255, 255, 255, 0.95);

}



/* Accessibility */

.sr-only {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0;

}



/* =========================

   Responsive

========================= */

@media (max-width: 980px) {

  .footer-grid {

    grid-template-columns: 1fr 1fr;

    padding-left: var(--spacing-sm);

  padding-right: var(--spacing-sm);

  }

}



@media (max-width: 768px) {

  .menu-toggle {

    display: inline-flex;

    align-items: center;

  }



  /* Mobile dropdown nav container */

  .main-nav {

    display: none;

    position: absolute;

    left: 0;

    right: 0;

    top: 100%;

    background: white;

    border-bottom: 1px solid #e4e8ef;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);

    max-height: calc(100dvh - 70px);

    overflow-y: auto;

    overflow-x: hidden;

    z-index: 999;

  }



  .main-nav.is-open {

    display: block;

  }



  /* Top level becomes vertical list */

  .main-nav > ul {

    flex-direction: column;

    gap: 0;

    padding: 6px 0 14px;

    align-items: stretch;

  }



  /* All top-level links */

  .main-nav > ul > li > a {

    display: block;

    padding: 13px 20px;

    border-top: 1px solid #f0f0f0;

    border-radius: 0;

    font-size: 0.95rem;

    text-transform: uppercase;

    white-space: normal;

  }



  .main-nav > ul > li:first-child > a {

    border-top: none;

  }



  /* Active parent item */

  .main-nav .has-submenu.open > a {

    color: var(--primary-blue);

    background: rgba(90, 105, 107, 0.06);

  }



  /* Level-1 submenus: collapsed by default, opened with .open on parent */

  .main-nav ul.submenu {

    position: static;

    display: none;

    opacity: 1;

    visibility: visible;

    transform: none;

    min-width: unset;

    width: 100%;

    background: #f5f7fb;

    border: none;

    border-radius: 0;

    box-shadow: none;

    padding: 0;

    margin: 0;

    border-left: 3px solid var(--primary-blue);

  }



  .main-nav .has-submenu.open > ul.submenu {

    display: block;

  }



  /* Level-1 submenu links */

  .main-nav ul.submenu > li > a {

    display: block;

    padding: 11px 20px 11px 28px;

    font-size: 0.9rem;

    border-top: 1px solid #eaeef5;

    background: #f5f7fb;

    border-radius: 0;

    text-transform: none;

    font-weight: 600;

  }



  .main-nav ul.submenu > li > a:hover {

    background: #e8ecf4;

    color: var(--primary-blue);

  }



  /* Level-2 (nested) submenus */

  .main-nav ul.submenu ul.submenu {

    background: #eceff6;

    border-left: 3px solid var(--accent-yellow);

  }



  .main-nav ul.submenu ul.submenu > li > a {

    padding-left: 44px;

    font-size: 0.87rem;

    background: #eceff6;

    border-top-color: #e0e4ef;

  }



  .main-nav ul.submenu ul.submenu > li > a:hover {

    background: #dde2ee;

  }



  /* Rotate caret arrow when submenu is open */

  .main-nav .has-submenu.open > a .nav-arrow {

    display: inline-block;

    transform: rotate(180deg);

    opacity: 1;

    color: var(--primary-blue);

  }



  /* Override desktop-only transitions */

  .main-nav > ul > li > ul.submenu,

  .main-nav ul.submenu li > ul.submenu {

    transition: none;

  }



  .hero h1 {

    font-size: 2rem;

  }



  .grid-2,

  .grid-3,

  .grid-4 {

    grid-template-columns: 1fr;

  }



  .section {

    padding: 3rem 0;

  }

}



@media (max-width: 560px) {

  .footer-grid {

    grid-template-columns: 1fr;

    gap: 20px;

    padding: 40px 0;

    padding-left: var(--spacing-sm);

  padding-right: var(--spacing-sm);

  }



  .footer-form {

    grid-template-columns: 1fr;

  }



  .footer-form button {

    width: 100%;

  }



  .footer-bottom-inner {

    flex-direction: column;

    align-items: flex-start;

    padding-left: var(--spacing-sm);

    padding-right: var(--spacing-sm);


  }

 
  
}

.mega-card-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}

.mega-card-link:hover {
  background: #f5f5f5;
}

.mega-card-img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mega-card-link:hover .mega-card-img {
  transform: scale(1.03);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.mega-card-text {
  font-size: 15px;
  font-weight: 800; /* awla bold */
}
.icons img { width: 25px; height: 25px; }