body { font-family: 'Instrument Sans', system-ui, sans-serif; color: #404040; }

/* Anciennes declarations font-face self-hebergees supprimees : fichiers woff2 inexistants (generaient des 404). Polices deja chargees via Google Fonts dans le head de chaque page. */

* { box-sizing: border-box; }
/* Filet de securite : jamais de defilement horizontal de la page (clip et non hidden, pour ne pas creer de conteneur de defilement et garder le header sticky) */
html, body { overflow-x: clip; }
    body { margin: 0; }
    a { color: #F07030; text-decoration: none; }
    a:hover { color: #d85a1e; }
    .segrow .segcard { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; transition: flex-grow 0.4s ease; }
    .segrow .segcard.tpe { flex-grow: 1.6; }
    .segrow:hover .segcard { flex-grow: 1; }
    .segrow .segcard:hover { flex-grow: 1.8; }
    .segrow .segcard .card-desc { display: none; }
    .segrow .segcard:hover .card-desc { display: block; }
    .marquee-track { animation-duration: 12s; animation-timing-function: linear; animation-iteration-count: infinite; }
    .marquee-down .marquee-track { animation-name: marqueeDown; }
    .marquee-up .marquee-track { animation-name: marqueeUp; }
    @keyframes marqueeDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
    @keyframes marqueeUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
    @keyframes auroraDrift { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
    .aurora-fade { animation: auroraFadeIn 0.9s ease-out 0.2s both; }
    @keyframes auroraFadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

.mega-panel[hidden] { display: none; }

/* Menus deroulants : une seule definition pour les 4 panneaux (Nos expertises, Votre secteur, Nos solutions, A propos) */
.mega-panel__inner { background: #ffffff; border-radius: 0; padding: 24px; margin-top: 2px; width: 820px; max-width: calc(100vw - 64px); }
.mega-panel__title { font-family: 'Geist', sans-serif; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: #1a1a1a; margin-bottom: 16px; }
.mega-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.mega-grid--wide { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.mega-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 0; background: #faf8f5; color: #1a1a1a; text-decoration: none; transition: background 0.25s ease; }
.mega-card:hover, .mega-card:focus-visible { background: #f1ebe1; color: #1a1a1a; }
.mega-card:focus-visible { outline: 2px solid #F07030; outline-offset: -2px; }
.mega-card__title { font-family: 'Geist', sans-serif; font-weight: 600; font-size: 15px; }
.mega-card__desc { font-family: 'Space Mono', monospace; font-size: 13px; letter-spacing: 0.04em; color: #F07030; }
/* Nos solutions : icone + titre, 4 colonnes x 2 lignes ordonnees par colonne */
.mega-panel__inner--solutions { width: 1160px; }
.mega-grid--solutions { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); grid-auto-flow: column; }
.mega-card--icon { flex-direction: row; align-items: center; gap: 10px; }
.mega-card__icon { flex-shrink: 0; color: #F07030; }
.mega-card--icon .mega-card__title { white-space: nowrap; }
@media (max-width: 1199px) {
  .mega-panel__inner--solutions { width: 820px; }
  .mega-grid--solutions { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); }
  .mega-card--icon .mega-card__title { white-space: normal; }
}
@media (max-width: 900px) {
  .mega-grid--solutions { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}
/* Bento pilier (bandeau 14) — passage en 1 colonne sur mobile */
@media (max-width: 760px) {
  .bento-grid { grid-template-columns: 1fr !important; }
  .bento-grid > div { grid-column: span 1 !important; min-height: 200px !important; }
}

/* Barre de navigation : marges resserrees entre 901 et 1359 px pour que les cinq entrees et les deux boutons tiennent sur une ligne */
@media (min-width: 901px) and (max-width: 1359px) {
  nav > ul > li > a, nav > ul > li > button { padding: 8px 10px !important; }
  nav > div:last-of-type > a { padding: 10px 14px !important; }
}

/* Menu mobile (hamburger) */
.mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 8px; margin-left: auto; position: relative; z-index: 101; }
.mobile-menu-btn .menu-icon-close { display: none; }
.mega-panel-back { display: none; }
@media (max-width: 900px) {
  nav > ul, nav > div:last-of-type { display: none !important; }
  .mobile-menu-btn { display: flex !important; }
  nav.mobile-menu-open .mobile-menu-btn .menu-icon-open { display: none; }
  nav.mobile-menu-open .mobile-menu-btn .menu-icon-close { display: block; }
  nav.mobile-menu-open {
    position: fixed !important; inset: 0; z-index: 100;
    background: #ffffff !important; border-bottom: none !important;
    height: 100vh; height: 100dvh; overflow-y: auto;
    align-content: flex-start;
    padding: 12px clamp(16px,4vw,32px) 32px !important;
  }
  nav.mobile-menu-open > ul {
    display: flex !important; flex-direction: column; align-items: stretch;
    flex: 0 0 100% !important; order: 10; gap: 0; margin-top: 16px;
  }
  nav.mobile-menu-open > ul li { width: 100%; border-bottom: 1px solid #e7e3dd; position: static; }
  nav.mobile-menu-open > ul li > button,
  nav.mobile-menu-open > ul li > a {
    width: 100%; justify-content: space-between !important;
    font-size: 20px !important; padding: 18px 2px !important;
  }
  nav.mobile-menu-open > div:last-of-type {
    display: flex !important; flex-direction: column; align-items: stretch;
    flex: 0 0 100% !important; order: 11; gap: 12px; margin-left: 0; margin-top: 24px;
  }
  nav.mobile-menu-open > div:last-of-type a {
    justify-content: center !important; padding: 16px !important; font-size: 16px !important;
  }
  nav.mobile-menu-open ~ [data-menu-zone] {
    display: flex !important; position: fixed !important; inset: 0; top: 72px;
    z-index: 105; justify-content: stretch; padding: 0; pointer-events: none !important;
  }
  nav.mobile-menu-open ~ [data-menu-zone] .mega-panel { width: 100%; pointer-events: auto; }
  nav.mobile-menu-open ~ [data-menu-zone] .mega-panel > div {
    width: 100% !important; max-width: 100% !important; border-radius: 0 !important;
    max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto;
    padding: 24px clamp(16px,4vw,32px) !important;
  }
  .mega-panel-back {
    display: flex !important; align-items: center; gap: 8px;
    background: none; border: none; padding: 0 0 20px; margin: 0;
    font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 15px;
    color: #767370; cursor: pointer;
  }
}

/* Collage editorial — passage en grille 2 colonnes sur mobile */
@media (max-width: 760px) {
  .editorial-collage { height: auto !important; flex-wrap: wrap !important; gap: 10px !important; }
  .editorial-collage > div { flex: 1 1 45% !important; height: 160px !important; min-width: 0 !important; }
}

/* Zoom au survol sur tous les blocs visuels "carte" (hors hero et bandeaux plein format) : le cadre (dimensions, bords arrondis) reste fixe, seule l'image interne zoome */
.img-slot[style*="border-radius:16px"] { position: relative; overflow: hidden; }
.img-slot[style*="border-radius:16px"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  transition: transform 0.6s ease;
}
.img-slot[style*="border-radius:16px"]:hover::before { transform: scale(1.08); }