/* =========================================================
   ISL Contrôle Inc. — Style global (2026)
   CSS UNIFIÉ — appliqué à toutes les pages FR et EN
========================================================= */

/* ── Variables ── */
:root {
  --primary-dark:     #0A0F1A;
  --secondary-dark:   #111A28;
  --accent-blue:      #0095DA;
  --accent-lightblue: #34B6FF;
  --light-gray:       #E2E8F0;
  --medium-gray:      #94A3B8;
  --white:            #FFFFFF;
  --border:           rgba(255,255,255,.12);
  --shadow:           0 4px 14px rgba(0,0,0,.25);
  --transition:       all .3s ease;
  --header-h:         64px;
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
  color: var(--light-gray);
  background: var(--primary-dark);
  animation: pageFadeIn 380ms cubic-bezier(.4,0,.2,1) 20ms both;
}
img  { max-width:100%; height:auto; display:block }
a    { text-decoration:none; color:inherit; transition:var(--transition) }
p    { margin-bottom:1rem }

/* ── Typographie ── */
h1,h2,h3,h4 { font-family:Montserrat,Arial,sans-serif; font-weight:700; color:var(--white) }
h1  { font-size:2.8rem; line-height:1.2; margin-bottom:1rem }
h2  { font-size:2.2rem; text-align:center; margin-bottom:2.2rem; position:relative }
h2::after {
  content:""; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
  width:80px; height:4px; background:var(--accent-blue);
}
h3  { font-size:1.5rem; color:var(--accent-blue) }

/* ── Layout ── */
.container { width:100%; max-width:1200px; margin:0 auto; padding:0 20px }
section    { padding:80px 0 }
.section-dark  { background:var(--secondary-dark) }
.section-light { background:var(--primary-dark) }
.center    { max-width:820px; margin:0 auto; text-align:center }

/* ── Accessibilité ── */
.sr-only {
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0
}
:focus-visible { outline:2px dashed var(--accent-blue); outline-offset:3px }

/* =========================================================
   HEADER & NAV
========================================================= */
header {
  position:sticky; top:0; z-index:2000;
  background:rgba(10,15,26,.96);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.header-wrap {
  display:flex; align-items:center; justify-content:space-between;
  gap:40px; padding:14px 20px;
}
.logo { display:flex; align-items:center; gap:12px }
.logo img { height:62px; width:auto }

.brand-wordmark      { display:flex; align-items:center; gap:4px }
.brand-wordmark__img {
  height:62px; width:auto; display:block;
  mix-blend-mode:screen; filter:brightness(1.05);
}
.brand-s    { color:var(--accent-blue) }
.footer-s   { color:var(--accent-blue) }
.footer-ctrl{ color:var(--accent-blue) }

nav { margin-left:auto }
nav ul { list-style:none; display:flex; gap:28px }
nav a  { color:#fff; font-weight:500; position:relative }
nav a::after {
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px;
  background:var(--accent-blue); transition:var(--transition);
}
nav a:hover           { color:var(--accent-blue) }
nav a:hover::after    { width:100% }
nav a[aria-current]   { color:var(--accent-blue) }
nav a[aria-current]::after { width:100% }

.mobile-btn {
  display:none; background:none; border:0; color:#fff; font-size:1.5rem;
  position:relative; z-index:2100; padding:10px 12px; line-height:1; touch-action:manipulation;
}
.mobile-btn i { pointer-events:none }

.lang-switch a {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:8px 14px; border-radius:8px; font-weight:700;
  color:#081018; background:var(--accent-blue); border:0; line-height:1;
  transition:var(--transition);
}
.lang-switch a:hover, .lang-switch a:focus-visible {
  background:var(--accent-lightblue); color:#fff;
  transform:translateY(-2px); box-shadow:var(--shadow);
}
header.isl-scrolled {
  background: rgba(5, 10, 20, .98);
  box-shadow: 0 2px 20px rgba(0,0,0,.4);
}

/* =========================================================
   BANNIÈRE PRINCIPALE — index.html (FR & EN)
========================================================= */
.isl-banner {
  width: 100%;
  padding: 0 !important;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
  display: block;
  background: #050D18;
  position: relative;
}
.isl-banner__img {
  width: 100%;
  height: calc(56vw + 80px);
  max-height: none;
  display: block;
  object-fit: cover;
  object-position: center center;
  will-change: transform;
  animation: bannerFadeIn 0.9s cubic-bezier(.4,0,.2,1) both;
}
@keyframes bannerFadeIn {
  from { opacity: 0; transform: scale(1.04) translateY(10px); }
  to   { opacity: 1; transform: scale(1)    translateY(0px); }
}
.isl-banner__scroll {
  position: absolute; bottom: 18px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  z-index: 4; opacity: 1; transition: opacity 0.4s ease; pointer-events: none;
}
.isl-banner__scroll.hidden { opacity: 0; }
.isl-banner__scroll span {
  display: block; width: 18px; height: 18px;
  border-right: 2.5px solid rgba(255,255,255,.85);
  border-bottom: 2.5px solid rgba(255,255,255,.85);
  transform: rotate(45deg);
  animation: scrollBounce 1.4s ease-in-out infinite;
}
.isl-banner__scroll span:nth-child(2) { animation-delay: 0.18s; opacity: .65; }
.isl-banner__scroll span:nth-child(3) { animation-delay: 0.36s; opacity: .35; }
@keyframes scrollBounce {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50%       { transform: rotate(45deg) translateY(6px); }
}

/* ── Bandeau fournisseur officiel ── */
.hero-supplier {
  width: 100%;
  background: #ffffff;
  display: flex; justify-content: center; align-items: center;
  border-top: 3px solid var(--accent-blue);
  border-bottom: 1px solid rgba(0,149,218,.15);
  box-shadow: 0 4px 20px rgba(0,149,218,.12);
  line-height: 0;
  height: clamp(64px, 8vw, 90px);
  overflow: hidden; padding: 0 20px;
}
.hero-supplier img {
  width: auto; max-width: 100%; height: 100%; max-height: 80px;
  display: block; object-fit: contain; margin: 0 auto;
}

/* ── Carrières intro ── */
.careers-intro {
  background: var(--secondary-dark);
  border-bottom: 3px solid var(--accent-blue);
  padding: 36px 20px 32px; text-align: center;
}
.careers-intro__tagline {
  font-family: Montserrat, Arial, sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700;
  color: #fff; margin-bottom: 8px;
}
.careers-intro__sub {
  font-size: clamp(.9rem, 1.8vw, 1.1rem); color: var(--medium-gray);
  letter-spacing: .04em; margin-bottom: 20px;
}
.careers-intro__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; background: var(--accent-blue); color: #081018;
  border-radius: 8px; font-weight: 700; font-size: 1rem;
  letter-spacing: .03em; transition: var(--transition); text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,149,218,.3);
}
.careers-intro__cta:hover { background: var(--accent-lightblue); color: #fff; transform: translateY(-2px); }

/* =========================================================
   HERO IMAGE (autres pages)
========================================================= */
.hero {
  width:100%; height:clamp(280px, 35vw, 480px);
  display:flex; align-items:center; justify-content:center;
  background-image: url("../images/isl_header.png");
  background-repeat:no-repeat; background-position:center center;
  background-size:cover; position:relative; will-change:background-position;
}
.hero--en { background-image: url("../images/isl_header (en).png") !important; }
.hero--contain-bg { background-size: cover; background-position: center; }
.hero::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.15));
  pointer-events:none;
}
.hero__content {
  position:relative; z-index:1; text-align:center;
  padding:28px 36px 32px; background:rgba(5,12,24,.62);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  border-radius:14px; border:1px solid rgba(255,255,255,.08);
  max-width:680px; margin:0 auto;
}
.hero__tagline {
  font-family:Montserrat,Arial,sans-serif; font-size:clamp(1.5rem,3.5vw,2.6rem);
  font-weight:700; color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.85), 0 1px 4px rgba(0,0,0,.9);
  letter-spacing:.03em; margin-bottom:6px;
}
.hero__sub {
  font-size:clamp(.9rem,2vw,1.15rem); color:rgba(255,255,255,.82);
  text-shadow:0 1px 8px rgba(0,0,0,.5); margin-bottom:22px;
}
/* NOUVEAU : Groupe de CTAs dans le hero */
.hero__ctas {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.hero__cta {
  display:inline-flex; align-items:center; gap:8px; padding:12px 24px;
  background:var(--accent-blue); color:#081018;
  border-radius:8px; font-weight:700; font-size:.95rem;
  letter-spacing:.03em; transition:var(--transition);
  box-shadow:0 0 0 2px rgba(255,255,255,.25), 0 4px 16px rgba(0,0,0,.5);
}
.hero__cta:hover { background:var(--accent-lightblue); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow); }
/* NOUVEAU : Variante outline pour le 2e CTA hero */
.hero__cta--outline {
  background: transparent;
  border: 2px solid rgba(255,255,255,.7);
  color: #fff;
  box-shadow: none;
}
.hero__cta--outline:hover { background: rgba(255,255,255,.15); color: #fff; border-color: #fff; }

/* =========================================================
   BOUTONS
========================================================= */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 28px; border-radius:8px; border:0; cursor:pointer;
  background:var(--accent-blue); color:#081018;
  font-weight:700; text-transform:uppercase; letter-spacing:.4px; font-size:.95rem;
  transition:var(--transition);
}
.btn:hover { background:var(--accent-lightblue); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-outline { background:transparent; border:2px solid var(--accent-blue); color:var(--accent-blue); }
.btn-outline:hover { background:var(--accent-blue); color:#081018 }

/* =========================================================
   SERVICES — cartes classiques (index)
========================================================= */
.services {
  margin-top:24px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:26px;
}
.card {
  background:rgba(255,255,255,.06); border:1px solid var(--border);
  border-radius:10px; padding:24px; text-align:center;
  transition:var(--transition);
  display: flex; flex-direction: column;
}
.card i { font-size:2rem; color:var(--accent-blue); margin-bottom:10px }
.card:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--accent-blue) }
.card p { line-height:1.55 }
.card p + p { color:rgba(226,232,240,.95) }
/* NOUVEAU : Lien "Voir le service" au bas de chaque carte */
.card__link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto; padding-top: 14px;
  color: var(--accent-lightblue); font-weight: 600; font-size: .88rem;
  text-decoration: none; transition: var(--transition);
}
.card__link:hover { color: #fff; gap: 10px; }
.card__link i { font-size: .8rem; }

/* =========================================================
   SERVICES — cartes horizontales (expertise.html)
========================================================= */
.h-services { display:flex; flex-direction:column; gap:14px; margin-top:24px; max-width:880px; margin-left:auto; margin-right:auto; }
.h-card {
  display:flex; align-items:flex-start; gap:22px;
  background:rgba(255,255,255,.055); border:1px solid var(--border);
  border-left:4px solid var(--accent-blue);
  border-radius:12px; padding:22px 26px; transition:var(--transition);
}
.h-card:hover { background:rgba(0,149,218,.08); border-left-color:var(--accent-lightblue); transform:translateX(6px); box-shadow:var(--shadow); }
.h-card__icon { flex-shrink:0; width:60px; height:60px; border-radius:12px; background:rgba(0,149,218,.18); display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:var(--accent-blue); }
.h-card__body   { flex:1; min-width:0 }
.h-card__title  { font-family:Montserrat,Arial,sans-serif; font-weight:700; font-size:1.08rem; color:#fff; margin-bottom:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.h-card__list   { list-style:none; padding:0; margin:0 0 10px }
.h-card__list li { padding:3px 0 3px 18px; position:relative; color:rgba(226,232,240,.92); line-height:1.62; font-size:.97rem; }
.h-card__list li::before { content:''; position:absolute; left:2px; top:11px; width:7px; height:7px; border-radius:50%; background:var(--accent-blue); opacity:.8; }
.h-card__result { margin:0; font-size:.88rem; color:var(--accent-lightblue); font-weight:600; }
.h-card__result::before { content:'→ ' }

.section-label { display:inline-flex; align-items:center; gap:8px; background:rgba(0,149,218,.15); border:1px solid rgba(0,149,218,.3); border-radius:20px; padding:4px 14px; font-size:.85rem; color:var(--accent-lightblue); font-weight:600; margin-bottom:14px; letter-spacing:.04em; }
.tag-soon { font-size:.78rem; padding:.1rem .4rem; border:1px solid rgba(255,255,255,.25); border-radius:6px; font-weight:400; }

/* =========================================================
   PARTENAIRES
========================================================= */
.partners-generic .partners-lead { max-width:900px; margin:0 auto 18px; opacity:.96 }
.partners-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.p-card {
  text-align:center; background:rgba(255,255,255,.06); border:1px solid var(--border);
  border-radius:10px; padding:20px; transition:var(--transition);
  display: flex; flex-direction: column;
}
.p-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--accent-blue) }
.p-card i     { font-size:1.8rem; color:var(--accent-blue); margin-bottom:10px; display:block }
.p-card h3    { color:#fff; margin:6px 0 8px; font-size:1.15rem }
.p-card p     { margin:0; color:rgba(226,232,240,.95); flex:1 }
/* NOUVEAU : Lien "Voir le service" au bas de chaque p-card */
.p-card__cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; color: var(--accent-lightblue);
  font-weight: 600; font-size: .85rem; transition: var(--transition);
}
.p-card__cta:hover { color: #fff; gap: 10px; }

/* =========================================================
   SSE
========================================================= */
.sst-lead { max-width:900px; margin:0 auto 18px }
.certs { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:8px; }
.cert { background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:10px; padding:18px; text-align:center; transition:var(--transition); }
.cert:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--accent-blue) }
.cert i { font-size:1.6rem; color:var(--accent-blue); margin-bottom:8px }

/* =========================================================
   PRÉSENCE & LOGISTIQUE
========================================================= */
.ops-map { position:relative; border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); background:#0f1b2b; margin-top:10px; aspect-ratio:1200/650; }
.ops-img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; }
.ops-legend { display:flex; gap:16px; justify-content:center; align-items:center; margin-top:12px; color:var(--medium-gray); }
.ops-legend i { color:var(--accent-blue); margin-right:6px }

/* =========================================================
   À PROPOS
========================================================= */
.about     { display:flex; gap:48px; align-items:center }
.about .txt { flex:1 }
.badges    { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px }
.badge { background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:18px; padding:6px 12px; font-size:.85rem; }
.about .txt h3 { margin-top:24px; margin-bottom:10px }
.about .img    { flex:1; border-radius:10px; overflow:hidden; box-shadow:var(--shadow) }
.mb-2 { margin-bottom:1.25rem }
.mb-3 { margin-bottom:1.75rem }

/* =========================================================
   RÉALISATIONS + LIGHTBOX
========================================================= */
/* ── Galerie — tuiles plus grandes ── */
.grid-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 22px;
  margin-top: 12px;
}
.tile {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: zoom-in;
  transition: var(--transition);
  position: relative;
}
.tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  border-color: var(--accent-blue);
}
/* Overlay bleu au survol pour indiquer le zoom */
.tile::after {
  content: '\f00e';           /* fa-magnifying-glass-plus */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: #fff;
  background: rgba(0, 149, 218, 0);
  transition: background .25s ease, opacity .25s ease;
  opacity: 0;
  pointer-events: none;
}
.tile:hover::after {
  background: rgba(0, 149, 218, .28);
  opacity: 1;
}
.tile figcaption {
  padding: 11px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: var(--light-gray);
  font-size: .92rem;
}
/* Hauteurs des images — plus grandes */
.grid-gallery .tile img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94);
}
.tile:hover img { transform: scale(1.04); }
@media (min-width: 992px) { .grid-gallery .tile img { height: 340px } }
@media (max-width: 600px)  { .grid-gallery .tile img { height: 240px } }

/* ── Lightbox améliorée ── */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  transition: background .3s ease;
}
.lightbox.open {
  display: flex;
  background: rgba(0, 0, 0, .92);
  animation: lbFadeIn .25s ease both;
}
@keyframes lbFadeIn { from { opacity:0 } to { opacity:1 } }

/* Conteneur centré image + légende */
.lightbox__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 92vw;
  max-height: 92vh;
}
.lightbox img {
  max-width: 92vw;
  max-height: 78vh;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
  object-fit: contain;
  transform: scale(.88);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  display: block;
}
.lightbox.open img { transform: scale(1); }

/* Légende sous l'image */
.lightbox__caption {
  margin-top: 14px;
  color: rgba(255,255,255,.82);
  font-size: .95rem;
  text-align: center;
  max-width: 600px;
  min-height: 1.4em;
}

/* Compteur d'images */
.lightbox__counter {
  margin-top: 6px;
  color: rgba(255,255,255,.4);
  font-size: .82rem;
  letter-spacing: .08em;
}

/* Bouton fermer */
.lightbox .close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  border-radius: 8px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: .9rem;
  transition: var(--transition);
  z-index: 2;
}
.lightbox .close:hover { background: rgba(255,255,255,.25); }

/* Boutons navigation précédent / suivant */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: var(--transition);
  z-index: 2;
}
.lightbox__nav:hover { background: var(--accent-blue); border-color: var(--accent-blue); }
.lightbox__prev { left: 14px; }
.lightbox__next { right: 14px; }
@media (max-width: 600px) {
  .lightbox__prev { left: 6px; }
  .lightbox__next { right: 6px; }
  .lightbox__nav { width: 38px; height: 38px; font-size: .95rem; }
}

/* =========================================================
   CARRIÈRES
========================================================= */
.cta { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:18px 0 }
.jobs { margin-top:18px }
details.job-acc { background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:10px; padding:0; transition:var(--transition); }
details.job-acc + details.job-acc { margin-top:14px }
details.job-acc[open] { border-color:var(--accent-blue); box-shadow:var(--shadow) }
details.job-acc > summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; padding:16px 18px; }
details.job-acc > summary::-webkit-details-marker { display:none }
.job-title   { font-weight:700; color:#fff; font-size:1.1rem }
.job-meta    { color:var(--medium-gray); font-size:.95rem; display:grid; gap:6px }
.job-chevron { color:var(--accent-blue); font-size:1.2rem; transition:transform .2s ease }
details.job-acc[open] .job-chevron { transform:rotate(180deg) }
.job-body    { border-top:1px solid var(--border); padding:14px 18px 18px; }
.job-body h4 { margin-top:14px; margin-bottom:8px; color:#fff }
.job-body ul { margin:0 0 12px 20px; line-height:1.6 }
.job-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px }

/* =========================================================
   CONTACT
========================================================= */
.contact    { display:flex; gap:36px; flex-wrap:wrap }
.contact .col { flex:1; min-width:300px }
.item       { display:flex; gap:12px; margin-bottom:14px }
.item i     { color:var(--accent-blue); margin-top:3px }
.form-group { margin-bottom:12px }
label       { display:block; margin-bottom:5px; font-size:.9rem; color:var(--medium-gray); }
.form-control { width:100%; padding:12px 14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:8px; color:#fff; font:inherit; transition:var(--transition); }
.form-control:focus { outline:none; border-color:var(--accent-blue); box-shadow:0 0 0 2px rgba(0,149,218,.2); }
.form-control::placeholder { color: rgba(255,255,255,.3); }
textarea.form-control { min-height:140px; resize:vertical }

/* =========================================================
   FOOTER
========================================================= */
footer { background:#0a1520; padding:52px 0 28px; margin-top:0 }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:34px; margin-bottom:18px; }
.footer-logo { font-family:Montserrat,Arial,sans-serif; font-weight:700; color:#fff; font-size:1.4rem; margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em; }
.footer-logo__img { height:54px; width:auto; display:block; mix-blend-mode:screen; filter:brightness(1.05); margin-bottom:6px; }
footer a:hover  { color:var(--accent-blue) }
.social-links a { margin-right:10px }
.copyright { text-align:center; color:var(--medium-gray); border-top:1px solid var(--border); padding-top:18px; font-size:.9rem; }

/* =========================================================
   ★ NOUVEAUX COMPOSANTS DE CONVERSION (OPTIMISATION B2B)
========================================================= */

/* ── Bande de conversion principale ────────────────────── */
.cta-banner {
  background: linear-gradient(135deg, #0B1825 0%, #0D2035 100%);
  border-top: 1px solid rgba(0,149,218,.25);
  border-bottom: 1px solid rgba(0,149,218,.25);
  padding: 56px 0;
  text-align: center;
}
.cta-banner--accent {
  background: linear-gradient(135deg, #051828 0%, var(--accent-blue) 200%);
  border-color: rgba(255,255,255,.12);
}
.cta-banner__title {
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: #fff;
  margin-bottom: 10px;
}
.cta-banner__sub {
  color: var(--medium-gray);
  margin-bottom: 28px;
  font-size: 1.05rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.cta-banner__btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Bandeau d'urgence (contact page) ─────────────────── */
.urgency-strip {
  background: var(--accent-blue);
  padding: 13px 20px;
  text-align: center;
  color: #081018;
  font-weight: 600;
  font-size: .97rem;
}
.urgency-strip a { color: #081018; text-decoration: underline; font-weight: 800; }
.urgency-strip a:hover { color: var(--primary-dark); }

/* ── Sections placeholder (contenu à ajouter) ─────────── */
.placeholder-section {
  border: 2px dashed rgba(255,255,255,.15);
  border-radius: 12px;
  padding: 32px 20px;
  text-align: center;
  margin: 32px 0;
  color: var(--medium-gray);
}
.placeholder-section__label {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 1.05rem; font-weight: 700;
  color: rgba(255,255,255,.35);
  margin-bottom: 8px;
}

/* =========================================================
   ANIMATIONS — Système complet
========================================================= */
@keyframes pageFadeIn {
  from { opacity:0 }
  to   { opacity:1 }
}
#isl-progress {
  position:fixed; top:0; left:0; width:0%; height:3px;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-lightblue));
  z-index:9999; transition:width 60ms linear; pointer-events:none;
  border-radius:0 2px 2px 0;
}

.isl-reveal,
.isl-reveal-left,
.isl-reveal-right,
.isl-reveal-scale {
  opacity: 0;
  transition: opacity 620ms cubic-bezier(.22,.68,0,1.15), transform 620ms cubic-bezier(.22,.68,0,1.15);
}
.isl-reveal        { transform: translateY(34px) }
.isl-reveal-left   { transform: translateX(-44px) }
.isl-reveal-right  { transform: translateX(44px) }
.isl-reveal-scale  { transform: scale(.91) }

.isl-reveal.isl-visible,
.isl-reveal-left.isl-visible,
.isl-reveal-right.isl-visible,
.isl-reveal-scale.isl-visible { opacity: 1; transform: none; }

.isl-reveal:nth-child(1),.isl-reveal-left:nth-child(1),.isl-reveal-right:nth-child(1),.isl-reveal-scale:nth-child(1) { transition-delay:   0ms }
.isl-reveal:nth-child(2),.isl-reveal-left:nth-child(2),.isl-reveal-right:nth-child(2),.isl-reveal-scale:nth-child(2) { transition-delay:  90ms }
.isl-reveal:nth-child(3),.isl-reveal-left:nth-child(3),.isl-reveal-right:nth-child(3),.isl-reveal-scale:nth-child(3) { transition-delay: 180ms }
.isl-reveal:nth-child(4),.isl-reveal-left:nth-child(4),.isl-reveal-right:nth-child(4),.isl-reveal-scale:nth-child(4) { transition-delay: 270ms }
.isl-reveal:nth-child(5),.isl-reveal-left:nth-child(5),.isl-reveal-right:nth-child(5),.isl-reveal-scale:nth-child(5) { transition-delay: 360ms }
.isl-reveal:nth-child(6),.isl-reveal-left:nth-child(6),.isl-reveal-right:nth-child(6),.isl-reveal-scale:nth-child(6) { transition-delay: 450ms }

[data-delay="100"]  { transition-delay: 100ms !important }
[data-delay="200"]  { transition-delay: 200ms !important }
[data-delay="300"]  { transition-delay: 300ms !important }
[data-delay="400"]  { transition-delay: 400ms !important }
[data-delay="500"]  { transition-delay: 500ms !important }

@media (prefers-reduced-motion: reduce) {
  body { animation:none !important }
  .isl-reveal,.isl-reveal-left,.isl-reveal-right,.isl-reveal-scale { opacity:1 !important; transform:none !important; transition:none !important; }
  #isl-progress { display:none }
  .isl-banner__img { will-change:auto; transform:none !important }
}

/* =========================================================
   RESPONSIVE — mobile ≤768px
========================================================= */
@media (max-width:768px) {
  nav ul {
    position:fixed; left:0; width:100%; top:var(--header-h, 64px);
    background:var(--primary-dark);
    flex-direction:column; align-items:center; gap:0; padding:12px 0;
    transform:translateY(-120%); opacity:0; visibility:hidden;
    transition:var(--transition); box-shadow:0 5px 10px rgba(0,0,0,.2); z-index:2050;
    max-height:calc(100dvh - var(--header-h, 64px));
    overflow-y:auto; -webkit-overflow-scrolling:touch; pointer-events:none;
  }
  nav ul.open { transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; }
  nav li  { width:100%; text-align:center }
  nav a   { display:block; padding:12px 0; border-bottom:1px solid var(--border) }
  nav a::after { display:none }
  .mobile-btn { display:block }
  .cta .btn   { width:100% }
  .lang-switch { padding:8px 0 }
  .lang-switch a { width:calc(100% - 40px); margin:0 auto; border:0 !important }
  .h-card { flex-direction:column; gap:14px; padding:18px 16px }
  .h-card__icon { width:52px; height:52px; font-size:1.35rem }
  .h-card:hover { transform:none }
  .about { flex-direction:column; gap:24px }
  .isl-banner__img { will-change:auto; transform:none !important }
  .hero__ctas { flex-direction: column; align-items: center; }
  .hero__cta { width: 100%; max-width: 300px; justify-content: center; }
  .cta-banner__btns { flex-direction: column; align-items: center; }
  .cta-banner__btns .btn { width: 100%; max-width: 320px; justify-content: center; }
}
/* Scroll lock géré en JS via position:fixed + top:-scrollY
   (évite le saut visuel quand l'utilisateur est descendu dans la page) */
body.menu-open { /* intentionnellement vide — voir app.js closeMenu/openMenu */ }

/* =========================================================
   EXPERTISE — intro & cta-slim
========================================================= */
.intro { max-width:820px; margin:0 auto 28px; text-align:center }
.intro p { margin-bottom:.65rem; font-size:1.05rem }
.cta-slim { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:20px }
.cta-slim a.btn { padding:11px 22px; text-transform:none; letter-spacing:0; font-weight:700 }
@media (max-width:768px) { .cta-slim a.btn { width:100% } }
.illustration-expertise { margin:0 auto; max-width:1100px; border-radius:12px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.35) }
.illustration-expertise img { display:block; width:100%; height:auto }

/* =========================================================
   404
========================================================= */
.wrap-404 { width:100%; max-width:960px; background:var(--secondary-dark); border:1px solid var(--border); border-radius:14px; padding:34px 26px; box-shadow:var(--shadow); }