/* ================================================================
   A2K MAROC — Partenaire officiel Streamax
   Feuille de style partagée (un seul CSS pour tout le site)
   Design : style "Pangea" épuré + accent jaune A2K
   ================================================================ */

/* ---------- Polices ---------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

@font-face {
  font-family: 'Neue Einstellung';
  src: url('fonts/NeueEinstellung-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Einstellung';
  src: url('fonts/NeueEinstellung-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Einstellung';
  src: url('fonts/NeueEinstellung-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Einstellung';
  src: url('fonts/NeueEinstellung-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Einstellung';
  src: url('fonts/NeueEinstellung-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Einstellung';
  src: url('fonts/NeueEinstellung-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Einstellung';
  src: url('fonts/NeueEinstellung-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Einstellung';
  src: url('fonts/NeueEinstellung-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Einstellung';
  src: url('fonts/NeueEinstellung-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variables ---------- */
:root {
  --jaune: #efbe07;          /* accent A2K */
  --jaune-fonce: #d6a800;
  --navy: #0a1f3e;           /* aplats sombres, footer, CTA */
  --navy-2: #0d2748;
  --bg: #f6f6f4;             /* blanc cassé */
  --blanc: #ffffff;
  --charbon: #14181c;
  --gris: #5b6470;
  --gris-clair: #e7e7e3;
  --gris-ligne: #e2e2dd;
  --radius: 16px;
  --radius-lg: 24px;
  --ombre: 0 10px 30px rgba(10,31,62,.06);
  --ombre-forte: 0 20px 50px rgba(10,31,62,.10);
  --maxw: 1200px;
  --pad: clamp(20px,5vw,40px);
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Neue Einstellung', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--charbon);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: clamp(56px, 9vw, 110px) 0; }
.section--tight { padding: clamp(40px, 6vw, 70px) 0; }
.grid { display: grid; gap: clamp(20px, 3vw, 32px); }

/* ---------- Typo ---------- */
h1, h2, h3, h4 { font-family: 'Neue Einstellung', system-ui, -apple-system, 'Segoe UI', sans-serif; line-height: 1.08; letter-spacing: -.02em; font-weight: 500; }
h1 { font-size: clamp(1.45rem, 3.9vw, 2.75rem); }
h2 { font-size: clamp(1.2rem, 2.75vw, 1.95rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.lead { font-size: clamp(.95rem, 1.2vw, 1.05rem); color: var(--gris); font-weight: 400; }
.label {
  display: inline-block; font-size: .78rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gris); margin-bottom: 1rem;
}
.label--jaune { color: var(--jaune-fonce); }
.txt-muted { color: var(--gris); }
.center { text-align: center; }

/* ---------- Boutons standards ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .62rem 1.4rem; border-radius: 100px; font-weight: 400; font-size: .88rem; letter-spacing: .015em;
  border: 1px solid transparent; cursor: pointer; transition: .2s; white-space: nowrap; line-height: 1.1;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary, .btn--dark, .btn--light { background: var(--jaune); color: var(--charbon); border-color: var(--jaune); }
.btn--primary:hover, .btn--dark:hover, .btn--light:hover { background: var(--jaune-fonce); border-color: var(--jaune-fonce); }
.btn--ghost, .btn--outline-light { background: transparent; border-color: var(--jaune); color: var(--jaune-fonce); }
.btn--outline-light { color: var(--jaune); }
.btn--ghost:hover, .btn--outline-light:hover { background: var(--jaune); color: var(--charbon); border-color: var(--jaune); }

/* ---------- BOUTONS DE L'EN-TÊTE (PILULES ENCERCLÉS) ---------- */
.btn--tab {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .68rem 1.6rem !important;
  border-radius: 100px !important;
  font-weight: 500 !important;
  font-size: .9rem !important;
  letter-spacing: .015em;
  transition: .2s ease-in-out;
  cursor: pointer;
  text-decoration: none;
  position: relative;
}
.btn--tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px;
  transition: .25s ease;
  display: none !important;
}

/* Bouton Jaune (Demander un devis) */
.btn--tab-primary {
  background: var(--jaune) !important;
  color: var(--charbon) !important;
  border: 1.5px solid var(--jaune) !important;
}
.btn--tab-primary:hover {
  background: var(--jaune-fonce) !important;
  border-color: var(--jaune-fonce) !important;
  transform: translateY(-2px);
  opacity: 1 !important;
}

/* Bouton Blanc Encerclé et Transparent (Découvrir nos solutions) */
.btn--tab-secondary {
  background: transparent !important;
  color: #ffffff !important;
  border: 1.5px solid #ffffff !important;
}
.btn--tab-secondary:hover {
  background: #ffffff !important;
  color: var(--charbon) !important;
  transform: translateY(-2px);
  opacity: 1 !important;
}
@media(max-width:640px) { .btn--tab { width: auto !important; } }

/* ================================================================
   HEADER DYNAMIQUE & TRANSPARENT (GLOBAL SUR TOUTES LES PAGES)
   ================================================================ */
.site-header {
  position: fixed !important; /* Reste fixé en haut de la page pendant le scroll */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  /* Dégradé sombre du haut vers le bas pour détacher parfaitement l'écriture blanche et le logo blanc */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%) !important; 
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Mode Défilement (Scrolled) sur fond blanc */
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.96) !important; /* Devient opaque au scroll */
  border-bottom: 1px solid var(--gris-ligne) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.header-inner { display: flex; align-items: center; justify-content: space-between; height: 92px; }

.brand { display: flex; align-items: center; gap: .7rem; }
.brand img { height: 80px; width: auto; transition: transform 0.2s; }

/* Texte partenaire par défaut (sur fond sombre) */
.brand .partner {
  font-size: clamp(0.55rem, 1.2vw, 0.62rem); font-weight: 500; letter-spacing: .06em; 
  color: rgba(255, 255, 255, 0.7) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.2) !important; 
  padding-left: .7rem; line-height: 1.2;
  text-transform: uppercase; max-width: 130px;
  transition: color 0.3s, border-color 0.3s;
}
.brand .partner b { color: #ffffff !important; transition: color 0.3s; }

/* Texte partenaire en mode Scrolled (sur fond blanc) */
.site-header.scrolled .brand .partner {
  color: var(--gris) !important;
  border-left: 1px solid var(--gris-ligne) !important;
}
.site-header.scrolled .brand .partner b { color: var(--charbon) !important; }

.nav { display: flex; align-items: center; gap: .3rem; }

/* Liens du menu par défaut (sur fond sombre) */
.nav a {
  padding: .5rem .85rem; border-radius: 100px; font-weight: 500; font-size: .92rem; 
  color: #ffffff !important;
  transition: color 0.3s, background-color 0.3s;
}
.nav a:hover { background: rgba(255, 255, 255, 0.15) !important; }
.nav a.active { color: var(--jaune) !important; }

/* Liens du menu en mode Scrolled (sur fond blanc) */
.site-header.scrolled .nav a {
  color: var(--charbon) !important;
}
.site-header.scrolled .nav a:hover { background: var(--gris-clair) !important; }
.site-header.scrolled .nav a.active { color: var(--jaune-fonce) !important; }

.header-cta { display: flex; align-items: center; gap: .6rem; }

/* Burger menu mobile par défaut (blanc) */
.burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; }
.burger span { width: 24px; height: 2px; background: #ffffff !important; border-radius: 2px; transition: .25s; }

/* Burger menu mobile en mode Scrolled (sombre) */
.site-header.scrolled .burger span {
  background: var(--charbon) !important;
}

.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Décalage automatique pour les pages sans Hero (ex: merci.html) */
body.no-hero {
  padding-top: 92px;
}

/* ================================================================
   RESPONSIVE HEADER : COMPORTEMENT MOBILE SÉCURISÉ (< 960PX)
   ================================================================ */
@media (max-width: 960px) {
  .site-header .nav {
    display: none !important; /* Masque définitivement le menu horizontal sur mobile */
  }
  .site-header .header-cta .btn {
    display: none !important; /* Masque le CTA */
  }
  .site-header .burger {
    display: flex !important; /* Affiche le burger */
  }
  
  /* Menu mobile déplié (quand cliqué) */
  .site-header .nav.open {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .2rem !important;
    position: absolute !important;
    top: 78px !important; /* Positionné pile sous le header mobile */
    left: 0 !important;
    right: 0 !important;
    background: var(--bg) !important;
    padding: 1rem var(--pad) 1.4rem !important;
    border-bottom: 1px solid var(--gris-ligne) !important;
    box-shadow: var(--ombre) !important;
  }
  
  .site-header .nav.open a {
    color: var(--charbon) !important;
    padding: .8rem .5rem !important;
    border-bottom: 1px solid var(--gris-ligne) !important;
    border-radius: 0 !important;
  }
  
  .site-header .nav.open a:hover {
    background: var(--gris-clair) !important;
  }
}

/* ================================================================
   BLOCS DE HÉROS (CONFIGURATIONS COMMUNES UNIFIÉES)
   ================================================================ */
.hero { padding-top: 0; }

/* Héros Accueil et En-têtes de toutes les autres pages */
.hero-card,
.page-hero {
  position: relative !important;
  overflow: hidden !important;
  width: 100%;
  color: #fff;
  background: var(--navy);
  aspect-ratio: auto !important;
  display: flex !important;
  align-items: flex-end !important; /* Force l'alignement de tous les textes en bas */
  padding-top: 92px !important; /* Zone de sécurité pour éviter le chevauchement du header sur PC */
  box-sizing: border-box !important;
}

/* --- FORCE TOUS LES ARRIÈRE-PLANS EN ABSOLU HORS DU FLUX FLEXIBLE --- */
.hero-bg,
.hero-video,
.hero-bg-layer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

.hero-bg img,
.hero-bg-layer {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Double dégradé noir renforcé (Haut et Bas) appliqué sur l'ensemble des pages */
.hero-card::after,
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    180deg, 
    rgba(0, 0, 0, 1.0) 0%,    /* Protège la lisibilité du menu */
    rgba(0, 0, 0, 0.7) 18%,   
    rgba(0, 0, 0, 0) 42%,     /* Centre de la vidéo clair */
    rgba(0, 0, 0, 0) 58%,     
    rgba(0, 0, 0, 0.7) 82%,   
    rgba(0, 0, 0, 1.0) 100%   /* Lisibilité totale du texte HTML */
  ) !important;
  pointer-events: none;
}

/* Assure que le contenu reste toujours positionné au-dessus du dégradé et de la vidéo (Desktop & Mobile) */
.hero-content,
.page-hero .wrap {
  position: relative !important;
  z-index: 2 !important;
  width: 100%;
}

/* Sur Ordinateur (Desktop) - Hauteur et padding réduits et resserrés (Snug) */
@media (min-width: 641px) {
  .hero-card,
  .page-hero {
    min-height: calc(100vh - 74px) !important;
  }
  .hero-content,
  .page-hero .wrap {
    padding-bottom: 50px !important;
    padding-top: 50px !important;
  }
}

.hero-content h1 { color: #fff; max-width: 800px; }
.hero-content p { margin: 1.1rem 0 1.6rem; font-size: clamp(.95rem,1.2vw,1.05rem); font-weight: 400; color: rgba(255,255,255,.9); max-width: 520px; }
.hero-partner {
  display: inline-flex; align-items: center; gap: .55rem; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2); padding: .4rem .9rem; border-radius: 100px;
  font-size: .8rem; font-weight: 500; margin-bottom: 1.2rem; backdrop-filter: blur(4px);
}
.hero-partner img { height: 16px; }
.hero-logo { height: clamp(40px,5.5vw,64px); width: auto; display: block; margin-bottom: .9rem; filter: drop-shadow(0 2px 10px rgba(0,0,0,.55)); }

/* ================================================================
   BLOCS GÉNÉRIQUES
   ================================================================ */
.split { display: grid; grid-template-columns: 230px 1fr; gap: clamp(24px,5vw,60px); align-items: start; }
.split .big { font-size: clamp(1.5rem,3vw,2.3rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
.big--light { font-size: clamp(.95rem, 1.2vw, 1.05rem) !important; font-weight: 400 !important; color: var(--gris); line-height: 1.6 !important; letter-spacing: 0 !important; } /* Parfaitement identique à la classe .lead */
@media(max-width:760px) { .split { grid-template-columns: 1fr; } }

.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(16px,3vw,32px); border-top: 1px solid var(--gris-ligne); border-bottom: 1px solid var(--gris-ligne); padding: clamp(28px,4vw,44px) 0; }
.stat .num { font-size: clamp(1.15rem,2vw,1.62rem); font-weight: 500; letter-spacing: -.03em; color: var(--charbon); white-space: nowrap; }
.stat .num b { color: inherit; font-weight: inherit; }
.stat .cap { font-size: .9rem; color: var(--gris); margin-top: .3rem; font-weight: 500; }
@media(max-width:680px) { .stats { grid-template-columns: repeat(2,1fr); gap: 28px 16px; } }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,56px); align-items: center; }
.duo img { border-radius: var(--radius); width: 100%; height: 100%; object-fit: cover; box-shadow: var(--ombre); }
.duo .media { aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: var(--gris-clair); }
.duo--rev .txt { order: 2; }
@media(max-width:820px) { .duo { grid-template-columns: 1fr; } .duo--rev .txt { order: 0; } }

.services { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(24px,3vw,40px); border-top: 1px solid var(--gris-ligne); padding-top: clamp(32px,4vw,48px); }
.svc .ico { width: 40px; height: 40px; color: var(--charbon); margin-bottom: 1rem; }
.svc h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.svc p { color: var(--gris); font-size: .95rem; }
@media(max-width:820px) { .services { grid-template-columns: repeat(2,1fr); } }
@media(max-width:520px) {
  .services { grid-template-columns: 1fr; gap: 0; }
  .svc { position: relative; padding: 0 0 1.6rem 1.6rem; }
  .svc:last-child { padding-bottom: 0; }
  .svc::before { content: ""; position: absolute; left: 5px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--jaune-fonce); }
  .svc::after { content: ""; position: absolute; left: 9px; top: 16px; bottom: 0; width: 1.5px; background: var(--gris-ligne); }
  .svc:last-child::after { display: none; }
}

.card { background: var(--blanc); border: 1px solid var(--gris-ligne); border-radius: var(--radius); padding: clamp(22px,3vw,32px); box-shadow: var(--ombre); transition: .2s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); border-color: transparent; }
.cards-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,2.5vw,28px); }
.cards-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(20px,2.5vw,28px); }
@media(max-width:820px) { .cards-3 { grid-template-columns: 1fr; } .cards-2 { grid-template-columns: 1fr; } }

.trust { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,48px); align-items: stretch; }
.trust .visual { border-radius: var(--radius); overflow: hidden; min-height: 420px; position: relative; background: var(--navy); }
.trust .visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.trust .stack { display: flex; flex-direction: column; gap: 16px; }
.trust .stack .card { display: flex; gap: .85rem; align-items: flex-start; }
.trust .stack .card .iso { width: 36px; height: 36px; flex-shrink: 0; color: var(--jaune-fonce); }
.trust .stack .card h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.trust .stack .card p { font-size: .9rem; }
@media(max-width:820px) { .trust { grid-template-columns: 1fr; } .trust .visual { min-height: 260px; } }

.faq-item { border-bottom: 1px solid var(--gris-ligne); }
.faq-q { width: 100%; background: none; border: none; cursor: pointer; text-align: left; padding: 1.3rem 0; font-size: clamp(1rem,1.6vw,1.15rem); font-weight: 500; color: var(--charbon); display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: inherit; }
.faq-q .chev { transition: .25s; flex-shrink: 0; color: var(--gris); }
.faq-item.open .chev { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a p { padding: 0 0 1.3rem; color: var(--gris); max-width: 760px; }

.cta-band { background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: clamp(32px,5vw,56px); display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.cta-band h2 { color: #fff; max-width: 560px; }
.cta-band .actions { display: flex; gap: .8rem; flex-wrap: wrap; }

.logos-row { display: flex; flex-wrap: wrap; gap: clamp(28px,5vw,60px); align-items: center; justify-content: center; opacity: 1; }
.logos-row img { height: 34px; width: auto; filter: grayscale(1); opacity: .55; transition: .2s; }
.logos-row img:hover { filter: grayscale(0); opacity: 1; }

.partners-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
@media(max-width:820px) { .partners-grid { grid-template-columns: repeat(3,1fr); } }
@media(max-width:520px) { .partners-grid { grid-template-columns: repeat(2,1fr); } }
.partner-chip { background: #fff; border: 1px solid var(--gris-ligne); border-radius: var(--radius); height: 120px; display: flex; align-items: center; justify-content: center; padding: 22px; transition: .2s; }
.partner-chip:hover { box-shadow: var(--ombre-forte); transform: translateY(-3px); }
.partner-chip img { max-height: 56px; max-width: 100%; width: auto; object-fit: contain; }

.partners-marquee { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.partners-track { display: flex; align-items: center; gap: clamp(28px,5vw,64px); width: max-content; animation: partners-scroll 26s linear infinite; }
.partners-marquee:hover .partners-track { animation-play-state: paused; }
.partners-track .partner-slide { flex: 0 0 auto; height: 186px; min-width: 287px; display: flex; align-items: center; justify-content: center; padding: 0 22px; }
.partners-track .partner-slide img { max-height: 112px; max-width: 287px; width: auto; object-fit: contain; transition: .2s; }
@keyframes partners-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media(prefers-reduced-motion:reduce) { .partners-track { animation: none; } }

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer { background: var(--navy); color: rgba(255,255,255,.72); margin-top: auto; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(24px,4vw,48px); padding: clamp(48px,6vw,72px) 0; }
.footer-grid img { height: 52px; margin-bottom: 1.1rem; }
.footer-grid .tag { max-width: 280px; font-size: .92rem; }
.footer-grid h4 { color: #fff; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.1rem; font-weight: 500; }
.footer-grid ul li { margin-bottom: .6rem; }
.footer-grid ul a { font-size: .93rem; transition: .15s; }
.footer-grid ul a:hover { color: var(--jaune); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 1.4rem 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .85rem; }
.footer-bottom .partner-tag { display: flex; align-items: center; gap: .5rem; }
.footer-bottom .partner-tag img { height: 16px; margin: 0; }
@media(max-width:820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ================================================================
   FORMULAIRE
   ================================================================ */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field.full { grid-column: 1/-1; }
.field label { font-size: .85rem; font-weight: 500; }
.field input, .field select, .field textarea { padding: .85rem 1rem; border: 1.5px solid var(--gris-ligne); border-radius: 12px; font-family: inherit; font-size: .95rem; background: #fff; transition: .15s; width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--jaune); }
.field textarea { resize: vertical; min-height: 130px; }
@media(max-width:640px) { .form-grid { grid-template-columns: 1fr; } }

/* ================================================================
   PAGES INTERNES (PRODUITS / SOLUTIONS)
   ================================================================ */
.page-hero .label { margin-bottom: .8rem; }
.page-hero p { max-width: 640px; margin-top: 1rem; }
.breadcrumb { font-size: .85rem; color: var(--gris); margin-bottom: 1.2rem; }
.breadcrumb a:hover { color: var(--jaune-fonce); }

.page-hero.hero-media .hero-bg-layer { background-size: cover; background-position: center; }
.page-hero.hero-media .hero-video video {
  width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease;
}
.page-hero.hero-media video.is-loaded { opacity: 1; }
.page-hero.hero-media h1 { color: #fff; }
.page-hero.hero-media .lead, .page-hero.hero-media p { color: rgba(255,255,255,.92); }
.page-hero.hero-media .breadcrumb, .page-hero.hero-media .breadcrumb a { color: rgba(255,255,255,.78); }
.page-hero.hero-media .label { color: var(--jaune); }

.prod-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,2.5vw,28px); }
@media(max-width:900px) { .prod-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:560px) { .prod-grid { grid-template-columns: 1fr; } }

.prod-card { background: #fff; border: 1px solid var(--gris-ligne); border-radius: var(--radius); overflow: hidden; transition: .25s; display: flex; flex-direction: column; }
.prod-card:hover { transform: translateY(-6px); box-shadow: var(--ombre-forte); border-color: transparent; }
.prod-card .thumb { position: relative; aspect-ratio: 4/3; overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, #16406f 0%, #0a1f3e 70%); }
.prod-card .thumb .thumb-media { position: absolute; inset: 0; display: block; }
.prod-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: .35s; }
.prod-card:hover .thumb img { transform: scale(1.05); }
.prod-card .thumb--product img { object-fit: contain; padding: 12%; }
.prod-card .thumb.noimg::after { content: "Streamax"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.35); font-weight: 500; letter-spacing: .04em; font-size: 1.1rem; }
.prod-card .body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.prod-card .body .ind { font-size: .68rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--jaune-fonce); margin-bottom: .35rem; }
.prod-card h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.prod-card p { font-size: .9rem; color: var(--gris); flex: 1; }
.prod-card .foot { margin-top: 1.1rem; display: flex; gap: .6rem; flex-wrap: wrap; }

.filter-block { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.filter-label { display: inline-flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: .4rem 1.1rem; border-radius: 100px; color: #ffffff; }
.filter-label--bleu { background: var(--navy); color: #fff; }
.filter-label--jaune { background: var(--jaune); color: #fff; }
@media(max-width:640px) { .filter-block { gap: .5rem; } .filter-label { margin-bottom: .2rem; } }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filter-block .filters { margin-bottom: 0; }
.filter-btn { padding: .5rem 1.1rem; border-radius: 100px; border: 1.5px solid var(--gris-ligne); background: #fff; font-weight: 500; font-size: .88rem; cursor: pointer; transition: .15s; font-family: inherit; }
.filter-btn:hover { border-color: var(--charbon); }
.filter-btn.active { background: transparent; border-width: 2px; color: var(--charbon); }
.filters--bleu .filter-btn.active { border-color: var(--navy); }
.filters--jaune .filter-btn.active { border-color: var(--jaune-fonce); }

.check-list li { padding-left: 1.8rem; position: relative; margin-bottom: .7rem; color: var(--gris); }
.check-list li::before { content: ""; position: absolute; left: 0; top: .35em; width: 14px; height: 14px; border-radius: 50%; background: var(--jaune); }
.check-list li strong { color: var(--charbon); }

.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { text-align: left; padding: .85rem 0; border-bottom: 1px solid var(--gris-ligne); font-size: .95rem; }
.spec-table th { color: var(--gris); font-weight: 500; width: 40%; }

.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(20px, 3vw, 32px); }
.step .n { width: 44px; height: 44px; border-radius: 50%; background: var(--jaune); color: var(--charbon); display: flex; align-items: center; justify-content: center; font-weight: 500; margin-bottom: 1rem; }
.step h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.step p { font-size: .92rem; color: var(--gris); }
@media(max-width:820px) { .steps { grid-template-columns: repeat(2,1fr); } }
@media(max-width:480px) { .steps { grid-template-columns: 1fr; } }

.diagram-full { background: #fff; border: 1px solid var(--gris-ligne); border-radius: var(--radius); padding: clamp(14px,2.5vw,28px); box-shadow: var(--ombre); }
.diagram-full img { width: 100%; height: auto; display: block; object-fit: contain; }

.ph { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg,#ececE7,#ececE7 12px,#f2f2ee 12px,#f2f2ee 24px); color: #9aa2ad; font-size: .8rem; font-weight: 500; text-align: center; padding: 1rem; width: 100%; height: 100%; min-height: 120px; }

.video-embed { position: relative; padding-bottom: 56.25%; height: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--ombre); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-fullbleed { position: relative; width: 100%; padding-bottom: 42%; height: 0; overflow: hidden; background: var(--navy); }
.video-fullbleed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media(max-width:820px) { .video-fullbleed { padding-bottom: 56.25%; } }

/* --- ÉLIMINATION DU PHÉNOMÈNE DE LETTREBOX (RECTANGLES NOIRS) --- */
.hero-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.hero-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
}

@media (min-aspect-ratio: 16/9) {
  .hero-video iframe {
    width: 100% !important;
    height: 56.25vw !important;
    min-height: 100% !important;
  }
}

@media (max-aspect-ratio: 16/9) {
  .hero-video iframe {
    width: 177.78vh !important;
    height: 100% !important;
    min-width: 100% !important;
  }
}

/* Utilitaires */
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; }
.flex { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.reveal { opacity: 0; transform: translateY(18px); transition: .6s ease; }
.reveal.in { opacity: 1; transform: none; }

p.p-fade-in { opacity: 0; transform: translateY(20px); transition: opacity .6s ease-out, transform .6s ease-out; }
p.p-fade-in.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  p.p-fade-in { opacity: 1; transform: none; transition: none; }
}

/* ================================================================
   OPTIMISATION MOBILE (UX/UI)
   ================================================================ */
@media(max-width:640px){
  :root{--pad:18px}
  .section{padding:36px 0}
  .section--tight{padding:28px 0}

  /* Header plus compact, logo réduit pour laisser de la place au burger */
  .header-inner{height:78px}
  .brand img{height:65px}
  .brand .partner{font-size:.56rem;max-width:100px}

  /* Force la hauteur du héros à 65% de la hauteur de l'écran visible (65vh) sur mobile */
  .hero-card,
  .page-hero {
    min-height: 65vh !important;
    padding-top: 78px !important; /* Zone de sécurité mobile contre le chevauchement */
    display: flex !important;
    align-items: flex-end !important;
    box-sizing: border-box !important;
  }

  /* Centre et ajuste les espacements des textes/boutons en bas de l'écran */
  .hero-content,
  .page-hero .wrap {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    width: 100%;
  }

  .hero-partner{font-size:.72rem;margin-bottom:.9rem}
  
  /* Boutons Hero forcés sur une seule ligne sur mobile */
  .hero-content .flex {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  
  .hero-content .btn--tab {
    font-size: 0.76rem !important;
    padding: 0.6rem 0.95rem !important;
    white-space: nowrap !important;
    width: auto !important;
    flex: 1 1 auto !important;
    text-align: center;
  }

  /* Boutons standards mobiles */
  .btn{padding:.72rem 1.3rem;font-size:.9rem}
  .cta-band .actions{width:100%}
  .cta-band .actions .btn{flex:1;justify-content:center}
  .cta-band{flex-direction:column;align-items:stretch;text-align:center}

  /* Stats : 2 colonnes, texte centré */
  .stats{gap:22px 14px}
  .stat{text-align:center}

  /* Cartes de confiance et services en une colonne, espacées */
  .trust .stack{gap:12px}

  /* Filtres produits : défilement horizontal tactile */
  .filters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;margin:0 calc(var(--pad)*-1) 1.4rem;padding-left:var(--pad);padding-right:var(--pad)}
  .filters::-webkit-scrollbar{display:none}
  .filter-btn{flex:0 0 auto}

  /* Fiches produit : boutons Détails/Fiche pleine largeur */
  .prod-card .foot{flex-direction:column;align-items:stretch}
  .prod-card .foot .btn{justify-content:center}

  /* Slider partenaires */
  .partners-track{gap:20px}
  .partners-track .partner-slide{height:148px;min-width:203px;padding:12px 18px}
  .partners-track .partner-slide img{max-height:61px;max-width:163px}

  /* Formulaire */
  .card{padding:20px}

  /* Footer */
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:.6rem}

  /* Page héros interne */
  .page-hero.hero-media {
    padding: 0 !important;
  }

  /* Vidéos des sections héros */
  .hero-video video {
    height: 100% !important;
  }
}