/*
Theme Name: UP x UFT Partnership
Theme URI: https://unityplan.eu
Author: Unity Plan
Author URI: https://unityplan.eu
Description: Theme WordPress une page pour la landing partenariat Unity Plan (UP) TPMS x Ultimate Fleet Technologies (UFT) — flotte australienne. Toutes les zones de texte, logos et images sont editables via le Customizer (Apparence > Personnaliser).
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: Propriétaire
Text Domain: up-uft-partnership
*/

/* ==========================================================================
   1. VARIABLES — TOUTES LES COULEURS DU THEME SONT CENTRALISEES ICI.
   Ne plus ajouter de couleur en dur ailleurs dans le fichier : créer une
   variable ici et la référencer avec var(--nom).
   ========================================================================== */
:root{

  /* --- Layout général --- */
  --radius: 14px;
  --wrap: 1180px;
  --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Couleurs qui étaient déclarées deux fois (dans deux blocs :root
     différents) avec des valeurs différentes. On garde ici la valeur qui
     l'emportait déjà en cascade (le second bloc, plus bas dans l'ancien
     fichier, gagnait), pour ne rien changer au rendu actuel du site. --- */
  --navy: #0c1e3d;
  --line: rgba(120,160,220,0.18);
  --blue: #3b82f6;
  --green: #2ecc71;
  --red: #ef4444;

  /* --- Palette "marque" (header, hero, boutons, footer, sections claires) --- */
  --navy-2: #0A2454;
  --navy-3: #0F3170;
  --unity-blue: #1B57A0;
  --unity-blue-light: #3E7FCB;
  --gold-brand: #F6CA44;      /* or historique de la marque (utilisé en rgba ci-dessous) */
  --gold-brand-rgb: 246, 202, 68;
  --gold-dim: #C79E2E;
  --amber: #F0A23A;
  --cream: #F6F5F1;
  --paper: #FFFFFF;
  --ink: #0C1524;
  --ink-soft: #4B5568;
  --steel: #93A0B4;
  --navy-section: var(--navy-section);   /* fond des sections sombres secondaires (stripbar, how, service) */
  --muted-on-dark: var(--muted-on-dark);  /* libellés discrets sur fond sombre */
  --muted-on-dark-2: var(--muted-on-dark-2); /* paragraphes discrets sur fond sombre */

  /* --- Palette "dashboard" (cartes d'économies, calculateur) --- */
  --bg-dark: #030712;
  --card-bg: #070e1b;
  --card-border: #1d3557;   /* unifié : valeur utilisée partout (cf. usages), l'ancienne #132238 n'était jamais rendue */
  --gold: #facc15;
  --blue-bright: #3b82f6;
  --text-white: #ffffff;
  --text-gray: #94a3b8;     /* unifié : valeur utilisée partout (cf. usages), l'ancienne #9ca3af n'était jamais rendue */

  /* --- TPMS Hero (bandeau "The leading provider of TPMS...") --- */
  --tpms-blue-dark: #040914;
  --tpms-blue-mid: #0a192f;
  --tpms-blue-bright: #2575fc;
  --tpms-cyan: #00b4d8;
  --tpms-text-light: #ffffff;
  --tpms-text-gray: #a0aec0;
  --tpms-border-blue: rgba(0, 180, 216, 0.3);

  /* --- TPMS Stats (chiffres clés "TRUSTED BY FLEETS") --- */
  --tpms-gold: #ffb703;
  --tpms-cyan-bright: #00b4d8;
  --tpms-blue-glow: #0077b6;
  --tpms-card-bg: rgba(6, 15, 30, 0.85);
  --tpms-border-color: rgba(0, 180, 216, 0.4);

  /* --- Savings V2 : bloc CSS legacy (voir section 18 plus bas, non confirmé
     mort) — conservé par précaution --- */
  --savings-bg: #030812;
  --savings-card-bg: #071224;
  --savings-border: #132743;
  --savings-gold: #ffb703;
  --savings-cyan: #1d8cf8;
  --savings-text: #ffffff;
  --savings-muted: #8395a7;

  /* --- Diagramme "tire status" (widget en tête de fichier) --- */
  --navy-deep: #081428;
  --navy-light: #16305c;
  --blue-glow: #60a5fa;
  --body-fill: #e9edf3;
  --body-shadow: #b9c3d4;
  --body-line: #7f8fab;
  --tyre: #1c2433;
  --hub: #4b566b;
  --orange: #f5a623;
  --text: #eef2fa;
  --text-dim: #9db0d3;
  --white: #ffffff
}

*{ box-sizing:border-box; }

body{
margin:0;
font-family:var(--font);
background:
  radial-gradient(1100px 500px at 15% -10%, rgba(59,130,246,0.15), transparent 60%),
  linear-gradient(180deg, var(--navy-deep), var(--navy) 55%, #0a1a35 100%);
color:var(--text);
padding:48px 20px 64px;
}
.wrap {
  max-width: 1080px;
  margin: 0 auto;
}

/* Écrasement STRICT de toutes les marges par défaut des paragraphes CF7 */
.wpcf7-f16-o1 p {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* Réduction des espaces entre chaque bloc du formulaire */
.wpcf7-f16-o1 .form,
.wpcf7-f16-o1 .row {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important; /* Contrôle direct de la distance entre les champs */
  width: 100% !important;
}

.wpcf7-f16-o1 .form > div {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Fix de la section Checkboxes (alignement propre côte à côte) */
.wpcf7-f16-o1 .checks .wpcf7-checkbox {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

.wpcf7-f16-o1 .checks .wpcf7-list-item {
  display: inline-flex !important;
  margin: 0 !important;
}

.wpcf7-f16-o1 .checks .wpcf7-list-item label {
  display: inline-flex !important;
  align-items: center !important;
  flex-direction: row !important; /* Force la case à côté du texte */
  gap: 6px !important;
  padding: 6px 10px !important;
  background-color: #f8fafc !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  font-size: 0.8rem !important;
  cursor: pointer !important;
}

.wpcf7-f16-o1 .checks input[type="checkbox"] {
  margin: 0 !important;
  width: 14px !important;
  height: 14px !important;
}

.eyebrow-row{
display:flex; align-items:center; justify-content:space-between;
margin-bottom:6px;
}
h1{
font-size:1.5rem; font-weight:600; margin:0 0 4px;
letter-spacing:0.2px;
}
.sub{
color:var(--text-dim); font-size:0.92rem; margin:0 0 28px;
}

/* ---------- Diagram panel ---------- */
.panel{
position:relative;
background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
border:1px solid var(--line);
border-radius:14px;
padding:34px 28px 22px;
}

.trailer-label{
position:absolute;
top:12px;
font-size:0.72rem;
font-weight:700;
letter-spacing:1.2px;
color:var(--text-dim);
}
.trailer-label.t1{ left:31%; }
.trailer-label.t2{ left:69%; }

.stage{
position:relative;
width:100%;
}
.stage svg{ display:block; width:100%; height:auto; }

.tire-dot{
position:absolute;
width:16px; height:16px;
margin-left:-8px; margin-top:-8px;
border-radius:50%;
border:2px solid rgba(8,20,40,0.55);
cursor:pointer;
padding:0;
transition:transform .15s ease;
box-shadow:0 0 0 0 rgba(0,0,0,0);
}
.tire-dot:hover, .tire-dot:focus-visible{ transform:scale(1.35); outline:none; }

.tire-dot.normal{   background:var(--green); }
.tire-dot.attention{ background:var(--orange); }
.tire-dot.critical{  background:var(--red); }

.tire-dot.attention{ animation:pulse-orange 1.8s infinite; }
.tire-dot.critical{  animation:pulse-red 1.4s infinite; }

@keyframes pulse-orange{
0%{ box-shadow:0 0 0 0 rgba(245,166,35,0.55); }
70%{ box-shadow:0 0 0 9px rgba(245,166,35,0); }
100%{ box-shadow:0 0 0 0 rgba(245,166,35,0); }
}
@keyframes pulse-red{
0%{ box-shadow:0 0 0 0 rgba(239,68,68,0.6); }
70%{ box-shadow:0 0 0 11px rgba(239,68,68,0); }
100%{ box-shadow:0 0 0 0 rgba(239,68,68,0); }
}

/* ---------- Tooltip ---------- */
.tpms-tooltip{
position:fixed;
z-index:50;
min-width:190px;
background:#0d1c38;
border:1px solid rgba(140,175,230,0.35);
border-radius:10px;
padding:12px 14px;
font-size:0.82rem;
line-height:1.45;
color:var(--text);
box-shadow:0 12px 30px rgba(0,0,0,0.45);
pointer-events:none;
opacity:0;
transform:translate(-50%, calc(-100% - 14px));
transition:opacity .12s ease;
}
.tpms-tooltip.visible{ opacity:1; }
.tpms-tooltip::after{
content:"";
position:absolute;
left:50%; bottom:-6px; margin-left:-6px;
width:12px; height:12px;
background:#0d1c38;
border-right:1px solid rgba(140,175,230,0.35);
border-bottom:1px solid rgba(140,175,230,0.35);
transform:rotate(45deg);
}
.tt-title{
font-weight:700; font-size:0.85rem; margin-bottom:6px;
display:flex; align-items:center; gap:7px;
}
.tt-swatch{ width:9px; height:9px; border-radius:50%; flex:none; }
.tt-row{ display:flex; justify-content:space-between; gap:18px; color:var(--text-dim); }
.tt-row b{ color:var(--text); font-weight:600; }
.tt-status{
margin-top:8px; padding-top:8px;
border-top:1px solid rgba(140,175,230,0.18);
font-weight:600;
}
.tt-status.normal{ color:var(--green); }
.tt-status.attention{ color:var(--orange); }
.tt-status.critical{ color:var(--red); }

/* ---------- Legend ---------- */
.legend{
display:flex; gap:26px; flex-wrap:wrap;
margin-top:22px; padding-top:18px;
border-top:1px solid var(--line);
font-size:0.86rem; color:var(--text-dim);
}
.legend span{ display:inline-flex; align-items:center; gap:8px; }
.legend i{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.legend i.normal{ background:var(--green); }
.legend i.attention{ background:var(--orange); }
.legend i.critical{ background:var(--red); }

/* ---------- Feature strip ---------- */
/* ---------- Diagram panel ---------- */
.panel {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 34px 28px 22px;
}

.trailer-label {
  position: absolute;
  top: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--text-dim);
}
.trailer-label.t1 { left: 31%; }
.trailer-label.t2 { left: 69%; }

.stage {
  position: relative;
  width: 100%;
  /* Proportions conservées basées sur le rapport original 900x260 */
  aspect-ratio: 900 / 260;
}

/* Style pour une parfaite intégration de l'image */
.truck-img-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
}

.truck-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* Intégration douce de l'image sur le fond sombre */
  mix-blend-mode: luminosity;
  filter: drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.4));
}

.tire-dot {
  position: absolute;
  width: 16px; height: 16px;
  margin-left: -8px; margin-top: -8px;
  border-radius: 50%;
  border: 2px solid rgba(8,20,40,0.55);
  cursor: pointer;
  padding: 0;
  transition: transform .15s ease;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  z-index: 2;
}
.tire-dot:hover, .tire-dot:focus-visible { transform: scale(1.35); outline: none; }

.tire-dot.normal   { background: var(--green); }
.tire-dot.attention{ background: var(--orange); }
.tire-dot.critical { background: var(--red); }

.tire-dot.attention{ animation: pulse-orange 1.8s infinite; }
.tire-dot.critical { animation: pulse-red 1.4s infinite; }

@keyframes pulse-orange {
  0%  { box-shadow: 0 0 0 0 rgba(245,166,35,0.55); }
  70% { box-shadow: 0 0 0 9px rgba(245,166,35,0); }
  100%{ box-shadow: 0 0 0 0 rgba(245,166,35,0); }
}
@keyframes pulse-red {
  0%  { box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
  70% { box-shadow: 0 0 0 11px rgba(239,68,68,0); }
  100%{ box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

/* ---------- Tooltip ---------- */
.tpms-tooltip {
  position: fixed;
  z-index: 50;
  min-width: 190px;
  background: #0d1c38;
  border: 1px solid rgba(140,175,230,0.35);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 14px));
  transition: opacity .12s ease;
}
.tpms-tooltip.visible { opacity: 1; }
.tpms-tooltip::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -6px; margin-left: -6px;
  width: 12px; height: 12px;
  background: #0d1c38;
  border-right: 1px solid rgba(140,175,230,0.35);
  border-bottom: 1px solid rgba(140,175,230,0.35);
  transform: rotate(45deg);
}
.tt-title {
  font-weight: 700; font-size: 0.85rem; margin-bottom: 6px;
  display: flex; align-items: center; gap: 7px;
}
.tt-swatch { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tt-row { display: flex; justify-content: space-between; gap: 18px; color: var(--text-dim); }
.tt-row b { color: var(--text); font-weight: 600; }
.tt-status {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(140,175,230,0.18);
  font-weight: 600;
}
.tt-status.normal    { color: var(--green); }
.tt-status.attention { color: var(--orange); }
.tt-status.critical  { color: var(--red); }

/* ---------- Legend ---------- */
.legend {
  display: flex; gap: 26px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.86rem; color: var(--text-dim);
}
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.legend i.normal    { background: var(--green); }
.legend i.attention { background: var(--orange); }
.legend i.critical  { background: var(--red); }

/* ---------- Feature strip ---------- */
.features {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.feature {
  background: var(--navy);
  padding: 22px 20px;
  display: flex; align-items: flex-start; gap: 12px;
}
.feature svg { flex: none; width: 26px; height: 26px; color: var(--blue-glow); }
.feature p { margin: 0; font-size: 0.82rem; line-height: 1.4; color: var(--text); }

@media (max-width:820px){
  .features{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:560px){
  .features{ grid-template-columns: 1fr; }
  .trailer-label{ font-size: 0.6rem; }
}

.features{
margin-top:26px;
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:1px;
background:var(--line);
border-radius:14px;
overflow:hidden;
}
.feature{
background:var(--navy);
padding:22px 20px;
display:flex; align-items:flex-start; gap:12px;
}
.feature svg{ flex:none; width:26px; height:26px; color:var(--blue-glow); }
.feature p{ margin:0; font-size:0.82rem; line-height:1.4; color:var(--text); }

@media (max-width:820px){
.features{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
.features{ grid-template-columns:1fr; }
.trailer-label{ font-size:0.6rem; }
}


/* ==========================================================================
   2. BASE / RESET
   ========================================================================== */
/* ==========================================================================
   2. BASE / RESET
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0 !important;
  padding: 0 !important;
}

html {
  scroll-behavior: smooth;
  margin-top: 0 !important; /* Neutralise le décalage de la barre d'admin WP */
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,.disp{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.01em;
  margin:0;
  color:var(--navy);
}
.mono{font-family:'IBM Plex Mono',monospace;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:600;
}
section{position:relative;}

/* ==========================================================================
   3. HEADER
   ========================================================================== */
/* ==========================================================================
   3. HEADER
   ========================================================================== */
header{
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  margin-top: 0 !important;
  z-index: 999;
  background: var(--white);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.headbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;
  max-width:var(--wrap);margin:0 auto;
}
.brandlock{display:flex;align-items:center;gap:14px;}
.brandlock img.logo-up{height:50px;width:auto;display:block;}
.brandlock img.logo-uft{height:40px;width:auto;display:block;}
.brandlock img.logo-up-new{height:42px;width:auto;display:block;}
.brandlock img.logo-uft-new{height:28px;width:auto;display:block;}
.brandlock .x{color:var(--green);font-size:10px;font-weight:30;}
footer .brandlock img.logo-up{height:28px;}
footer .brandlock img.logo-uft{height:34px;}

nav{display:flex;gap:30px;align-items:center;}
.headbar nav a{
  color:#000;font-size:13.5px;font-weight:500;font-family:'Inter',sans-serif;
  letter-spacing:0.01em;
}


/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border-radius:8px;font-weight:600;font-size:13.5px;
  font-family:'Inter',sans-serif;letter-spacing:0.02em;cursor:pointer;border:none;
}
.btn-gold{background:var(--gold);color:var(--navy);}
.btn-gold:hover{background:#FFD75C;}
.btn-outline{background:transparent;border:1.5px solid rgba(255,255,255,0.35);color:var(--text-white);}
.btn-outline:hover{border-color:var(--text-white);}
.btn-blue{background:var(--unity-blue);color:var(--text-white);}
.btn-blue:hover{background:var(--unity-blue-light);}

/* ---------- Motifs décoratifs ---------- */
.tread-strip{width:100%;height:10px;overflow:hidden;opacity:0.6;pointer-events:none;background:var(--navy);}
.tread-strip svg{width:100%;height:100%;display:block;}
.truck-watermark{position:absolute;pointer-events:none;opacity:0.06;z-index:0;}
.truck-watermark svg{display:block;}

/* ==========================================================================
   4. HERO PRINCIPAL
   ========================================================================== */
.hero{
  background:
    radial-gradient(ellipse at 80% 0%, rgba(27,87,160,0.35), transparent 55%),
    radial-gradient(ellipse at 10% 100%, rgba(var(--gold-brand-rgb),0.10), transparent 45%),
    linear-gradient(180deg, var(--navy) 0%, #071A3E 100%);
  padding:76px 0 90px;
  overflow:hidden;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:50px;
  align-items:center;
  width:calc(100% - 30px);
  max-width:1350px;
  margin:0 auto;
}

@media (max-width:768px){
  .hero-grid{
    width:92%;
    grid-template-columns:1fr;
    gap:30px;
  }
}
.hero-eyebrow{color:var(--gold);margin-bottom:18px;display:flex;align-items:center;gap:10px;}
.hero-eyebrow::before{content:"";width:26px;height:1.5px;background:var(--gold);display:inline-block;}
.hero h1{color:var(--text-white);font-size:44px;line-height:1.08;font-weight:600;}
.hero h1 em{font-style:normal;color:var(--gold);}
.hero p.lead{color:#B9C4D9;font-size:16.5px;max-width:480px;margin:22px 0 32px;font-family:'Inter',sans-serif;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}
.hero-note{
  margin-top:26px;color:#7D8CA8;font-size:12.5px;font-family:'IBM Plex Mono',monospace;
  display:flex;align-items:center;gap:8px;
}
.hero-note .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(55,163,54,0.25);}

/* ---------- Signature : diagramme road train ---------- */
.rig-card{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:18px;
  padding:26px 20px 20px;
  position:relative;
}
.rig-card .rig-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.rig-card .rig-label .titre {
    color: #aaaaaa !important;
    font-size: 12px;
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.rig-card .rig-label .live{display:flex;align-items:center;gap:6px;color:var(--green);font-size:11px;font-family:'IBM Plex Mono',monospace;letter-spacing:0.08em;}
.rig-card .rig-label .live .dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 1.8s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}
.rig-svg-wrap{width:100%;overflow-x:auto;}
.rig-svg-wrap svg{width:100%;height:auto;min-width:520px;display:block;}
.tyre-dot{cursor:pointer;transition:r 0.15s ease;}
.tyre-dot:hover{r:7;}
.rig-legend{display:flex;gap:18px;margin-top:16px;flex-wrap:wrap;}
.rig-legend .item{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#9FADC6;font-family:'IBM Plex Mono',monospace;}
.rig-legend .sw{width:9px;height:9px;border-radius:50%;}
#tt{
  position:absolute;pointer-events:none;background:var(--paper);color:var(--navy);
  padding:7px 10px;border-radius:7px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  font-weight:600;box-shadow:0 8px 20px rgba(0,0,0,0.35);opacity:0;transform:translate(-50%,-130%);
  transition:opacity 0.12s ease;white-space:nowrap;z-index:10;
}

/* ---------- Bandeau stats / trust ---------- */
.stripbar{
  background:var(--navy-section);border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.06);
  padding:22px 0;
}
.stripbar .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:22px;}
.stripitem{display:flex;flex-direction:column;gap:2px;min-width:120px;}
.stripitem .num{color:var(--gold);font-family:'IBM Plex Mono',monospace;font-size:22px;font-weight:600;}
.stripitem .lbl{color:var(--muted-on-dark);font-size:11.5px;letter-spacing:0.03em;}

/* ==========================================================================
   5. EN-TETES DE SECTION GENERIQUES
   ========================================================================== */
.section-head{max-width:620px;margin-bottom:44px;}
.eyebrow{color:var(--gold);margin-bottom:12px;font-size: 1.25rem;}
.wrap .section-head h2{font-size:32px;color:var(--navy);line-height:1.15;}
.section-head p{color:var(--navy);font-size:15.5px;margin-top:14px;}
.light-on-dark .section-head h2{color:var(--text-white);}
.light-on-dark .section-head p{color:var(--muted-on-dark-2);}
.light-on-dark .section-head .eyebrow{color:var(--gold);}

/* ==========================================================================
   6. USE CASES
   ========================================================================== */
.usecases{padding:96px 0;background:var(--paper);}
.uc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.uc-card{
  border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;background:var(--cream);
  display:flex;flex-direction:column;gap:14px;
}
.uc-card .icon{
  width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--navy);
}
.uc-card .icon svg{width:22px;height:22px;}
.uc-card h3{font-size:19px;color:var(--navy);text-transform:none;font-weight:600;letter-spacing:0;}
.uc-card p{color:var(--ink-soft);font-size:14.5px;margin:0;}
.uc-card .tag{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--unity-blue);
}

/* ==========================================================================
   7. HOW IT WORKS
   ========================================================================== */
.how{padding:96px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--navy-section);}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative;}
.how-step{padding:0 26px;position:relative;}
.how-step:not(:last-child)::after{
  content:"";position:absolute;top:26px;right:-2px;width:60%;height:1.5px;
  background:repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
}
.how-step .n{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--gold-dim);font-weight:600;margin-bottom:14px;}
.how-step h3{font-size:18px;text-transform:none;font-weight:600;color:var(--tpms-cyan);letter-spacing:0;margin-bottom:8px;}
.how-step p{color:var(--ink-soft);font-size:14px;margin:0;}

/* ==========================================================================
   8. BENEFITS
   ========================================================================== */
.benefits{padding:96px 0;background:var(--navy);}
.ben-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.ben-card{
  background:rgba(255,255,255,0.035);border:1px solid rgba(255,255,255,0.09);border-radius:var(--radius);
  padding:26px 22px;
}
.ben-card .num{font-family:'IBM Plex Mono',monospace;font-size:34px;font-weight:600;color:var(--gold);line-height:1;}
.ben-card .num small{font-size:16px;}
.ben-card .lbl{color:var(--text-white);font-size:14.5px;font-weight:600;margin-top:10px;}
.ben-card .desc{color:var(--muted-on-dark);font-size:13px;margin-top:6px;}

.powered-by-right {
  position: absolute;
  top: 10px; /* Remonte l'ensemble du bloc vers le haut */
  right: 0;
  display: flex;
  align-items: flex-end;
  gap: 15px;
}

.powered-text {
  position: relative;
  bottom: 60px; /* Augmenté à 60px pour remonter fortement le texte */
  font-size: 0.9rem;
  color: #888;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.powered-img {
  height: 200px;
  width: auto;
  display: block;
}

@media (max-width: 768px) {
  .powered-by-right {
    position: static;
    margin-top: 20px;
    margin-bottom: 25px;
  }
  .powered-text {
    bottom: 0;
  }
}

.app-images-full {
  display: grid;
  grid-template-columns: repeat(4, 1fr); 
  gap: 0px; 
  align-items: center; /* Alignement centré au lieu de "end" */
  width: 100%;
  max-width: 800px; 
  margin: 0 auto;
}

.app-image {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.app-image img {
  width: 100%;
  max-width: 200px; 
  height: 450px; /* Force une hauteur identique fixe pour toutes les images */
  object-fit: contain; /* Garantit qu'aucune image ne soit déformée */
}

/* Ajustement mobile */
@media (max-width: 480px) {
  .app-image img {
    height: 250px; /* Hauteur identique fixe sur mobile */
  }
}
/* ==========================================================================
   9. SERVICE / SUPPORT
   ========================================================================== */
.service{padding:100px 0;background:var(--navy);}
.service-grid{display:grid;grid-template-columns:0.95fr 1.05fr;gap:60px;align-items:start;}
.service h2{color:var(--text-white);font-size:30px;line-height:1.2;}
.service .eyebrow{color:var(--gold);margin-bottom:14px;}
.lead{color:var(--white);font-size:15.5px;margin:18px 0 26px;max-width:440px;}
.svc-points{display:flex;flex-direction:column;gap:16px;}
.svc-point{display:flex;gap:14px;}
.svc-point .mark{
  width:26px;height:26px;flex:none;border-radius:50%;background:rgba(var(--gold-brand-rgb),0.14);
  display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:13px;font-weight:700;
  font-family:'IBM Plex Mono',monospace;
}
.svc-point .txt b{color:var(--text-white);font-size:14.5px;display:block;margin-bottom:2px;}
.svc-point .txt span{color:#94A2BE;font-size:13.5px;}
.locations{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.09);border-radius:16px;padding:26px;}
.locations .title{color:var(--text-white);font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:18px;}
.loc-item{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-top:1px solid rgba(255,255,255,0.08);}
.loc-item:first-of-type{border-top:none;}
.loc-item .name{color:var(--text-white);font-size:14.5px;font-weight:600;}
.loc-item .region{color:var(--gold);font-size:11.5px;font-family:'IBM Plex Mono',monospace;letter-spacing:0.05em;}

/* ==========================================================================
   10. PARTNERSHIP
   ========================================================================== */
.partner{padding:96px 0;background:var(--paper);text-align:center;}
.partner-logos{display:flex;align-items:center;justify-content:center;gap:20px;margin:34px 0 30px;flex-wrap:wrap;}
.partner-logos img{max-height:70px;max-width:150px;width:auto;height:auto;object-fit:contain;}
.partner-logos .x{color:var(--green);font-size:10px;font-weight:30;}
.plogo{font-family:'Oswald',sans-serif;font-weight:700;font-size:24px;color:var(--navy);letter-spacing:0.02em;}
.plogo span{color:var(--unity-blue);}
.plus{color:var(--steel);font-size:20px;font-family:'Inter',sans-serif;}
.plogo2{font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;color:var(--navy);letter-spacing:0.05em;}
.plogo2 b{display:block;font-size:16px;}
.plogo2 b span{color:var(--gold-dim);}
.partner p{max-width:560px;margin:0 auto;color:var(--ink-soft);font-size:15px;}
.brand-strip{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  margin-top:44px;padding-top:36px;border-top:1px solid var(--line);
  flex-wrap:wrap;justify-content:center;
}
.brand-title{text-align:center;font-size:18px;font-weight:600;}
.brand-list{display:flex;justify-content:center;align-items:center;gap:30px;flex-wrap:wrap;}
.brand-list span{
  font-weight:500;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.06em;
  color:var(--steel);text-transform:uppercase;
}

/* ==========================================================================
   11. CTA / CONTACT
   ========================================================================== */
.cta{background:linear-gradient(135deg, var(--navy) 0%, #0B2C63 100%);padding:60px 0;position:relative;overflow:hidden;}
.cta::after{
  content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle, rgba(var(--gold-brand-rgb),0.14), transparent 70%);
}

.cta-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 0.8fr;
    gap: 30px;
    align-items: center;
    position: relative;
}
.cta-inner > img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    object-fit: contain;
}
.cta h2{color:var(--text-white);font-size:34px;line-height:1.18;max-width:420px;}
.cta p{color:var(--muted-on-dark-2);margin:18px 0 28px;max-width:400px;font-size:15px;}
.form{
  background:var(--paper);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px;
  box-shadow:0 30px 60px rgba(0,0,0,0.35);
}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form label{font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:5px;display:block;text-transform:uppercase;letter-spacing:0.03em;}
.form input, .form select{
  width:100%;padding:11px 12px;border-radius:8px;border:1.5px solid var(--line);font-family:'Inter',sans-serif;
  font-size:14px;color:var(--ink);background:var(--paper);
}
.form input:focus, .form select:focus{outline:2px solid var(--unity-blue);outline-offset:1px;border-color:var(--unity-blue);}
.form .submit {
  margin-top: 6px;
  width: 100%;
  padding: 13px;
  font-size: 14px;
  background-color: #eab308 !important; /* Couleur jaune */
  color: #ffffff !important;            /* Texte blanc */
  border: none !important;
  cursor: pointer;
}

/* Optionnel : effet au survol de la souris */
.form .submit:hover {
  background-color: #ca8a04 !important; /* Jaune légèrement plus foncé */
}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;}
.chk{
  display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);font-weight:400;
  text-transform:none;letter-spacing:0;background:var(--cream);border:1px solid var(--line);
  border-radius:7px;padding:8px 10px;cursor:pointer;
}
.chk input{width:auto;accent-color:var(--unity-blue);}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
footer{background:var(--white);padding:40px 0;border-top:1px solid rgba(255,255,255,0.08);}
.foot-grid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
.foot-grid .brandlock .up{font-size:18px;}
footer .copy{color:#6E7C9A;font-size:12.5px;}
footer nav a{color:var(--muted-on-dark);font-size:12.5px;}

/* ==========================================================================
   13. RESPONSIVE (section marque)
   ========================================================================== */
@media (max-width:980px){
  nav{display:none;}
  .hero-grid{grid-template-columns:1fr;}
  .hero h1{font-size:34px;}
  .uc-grid{grid-template-columns:1fr;}
  .how-grid{grid-template-columns:1fr;gap:34px;}
  .how-step::after{display:none;}
  .ben-grid{grid-template-columns:1fr 1fr;}
  .service-grid{grid-template-columns:1fr;}
  .cta-inner{grid-template-columns:1fr;}
  .stripbar .wrap{justify-content:flex-start;}
}
@media (max-width:560px){
  .ben-grid{grid-template-columns:1fr;}
  .form .row{grid-template-columns:1fr;}
  .hero h1{font-size:28px;}
  .section-head h2{font-size:26px; color:var(--navy)}
}

:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
}

/* ==========================================================================
   SAVINGS SECTION — "FEWER SURPRISES / LOWER RUNNING COSTS"
   Cartes de stats + détails interactifs + calculateur
   DA : fond bleu-nuit très foncé, accents or (--gold) et bleu vif (--blue-bright)
   ========================================================================== */

.savings-section{
  --transition-fast: 0.2s ease;
  --transition-base: 0.25s cubic-bezier(0.4,0,0.2,1);

  width:100%;
  max-width:none;
  margin:0;
  padding:80px 5%;
  box-sizing:border-box;
  background-color:var(--navy);
  color:var(--text-white);
  font-family:system-ui, -apple-system, sans-serif;
}

.savings-section *{ box-sizing:border-box; }

/* --------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------- */
.savings-section .header{
  text-align:center;
  max-width:700px;
  margin:0 auto 40px;
}

.savings-section .subtitle{
  color:var(--gold);
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:8px;
}

.savings-section .header h2{
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  font-weight:900;
  letter-spacing:0.5px;
  margin:0 0 12px 0;
  color:var(--text-white);
  line-height:1.2;
}

.savings-section .header .highlight{
  color:var(--gold);
}

.savings-section .description{
  color:var(--white);
  max-width:550px;
  margin:0 auto;
  font-size:0.9rem;
  line-height:1.6;
}

/* --------------------------------------------------------------------
   Grilles 4 colonnes (cartes de stats + cartes de détails)
   -------------------------------------------------------------------- */
.savings-section .cards-grid,
.savings-section .details-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
}

.savings-section .details-grid{
  margin-top:16px;
}

/* --------------------------------------------------------------------
   Carte de stat
   -------------------------------------------------------------------- */
.savings-section .card{
  background:linear-gradient(180deg, #091322 0%, #050a14 100%);
  border:1px solid var(--card-border);
  border-radius:10px;
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  cursor:pointer;
  transition:transform var(--transition-base), box-shadow var(--transition-base),
             border-color var(--transition-fast), background-color var(--transition-fast);
}

.savings-section .card.active{
  border-color:var(--gold);
  box-shadow:0 0 12px rgba(250,204,21,0.2);
}

.savings-section .card-top{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
}

.savings-section .icon-box{
  flex-shrink:0;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid #1e3a8a;
  background:rgba(37,99,235,0.1);
  font-size:1.1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform var(--transition-base), box-shadow var(--transition-base),
             border-color var(--transition-fast), background-color var(--transition-fast);
}

.savings-section .stat-val{
  font-size:1.8rem;
  font-weight:800;
  color:var(--gold);
  line-height:1;
}
.savings-section .stat-val small{
  font-size:0.75rem;
  color:var(--gold);
  font-weight:700;
}

.savings-section .stat-label{
  font-size:0.85rem;
  font-weight:700;
  color:var(--text-white);
  margin-top:4px;
}

.savings-section .card-desc{
  color:var(--white);
  font-size:0.8rem;
  line-height:1.45;
  margin-bottom:20px;
  min-height:44px;
}

.savings-section .card-btn{
  margin-top:auto;
  background:#091424;
  border:1px solid var(--card-border);
  border-radius:6px;
  padding:10px 12px;
  color:var(--text-white);
  font-size:0.75rem;
  font-weight:600;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  transition:transform var(--transition-base), box-shadow var(--transition-base),
             border-color var(--transition-fast), background-color var(--transition-fast);
}

.savings-section .card.active .card-btn{
  background:#0f2b5c;
  border-color:var(--blue-bright);
  color:var(--text-white);
}

.savings-section .card-btn .arrow{
  color:var(--blue-bright);
  font-size:1rem;
  display:inline-block;
  transition:transform var(--transition-fast);
}

/* --------------------------------------------------------------------
   Carte de détail
   -------------------------------------------------------------------- */
.savings-section .detail-card{
  position:relative;
  background:linear-gradient(180deg, #081220 0%, #040810 100%);
  border:1px solid var(--card-border);
  border-radius:10px;
  padding:18px;
  transition:transform var(--transition-base), box-shadow var(--transition-base),
             border-color var(--transition-fast), background-color var(--transition-fast);
}

.savings-section .detail-card::before{
  content:'';
  position:absolute;
  top:-8px;
  left:50%;
  transform:translateX(-50%);
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-bottom:8px solid var(--card-border);
  transition:border-color var(--transition-fast);
}

.savings-section .detail-card.active{
  border-color:var(--blue-bright);
}
.savings-section .detail-card.active::before{
  border-bottom-color:var(--blue-bright);
}

.savings-section .detail-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.savings-section .detail-title{
  color:var(--gold);
  font-size:0.7rem;
  font-weight:800;
  letter-spacing:1px;
}

.savings-section .close-btn{
  background:none;
  border:none;
  color:var(--text-gray);
  font-size:1.1rem;
  cursor:pointer;
  line-height:1;
  padding:0;
  transition:color var(--transition-fast), transform var(--transition-fast);
}

.savings-section .detail-body{
  margin-bottom:16px;
}
.savings-section .detail-body p{
  font-size:0.78rem;
  color:var(--white);
  line-height:1.45;
  margin:0;
}

.savings-section .savings-block{
  margin-bottom:14px;
}
.savings-section .savings-label{
  font-size:0.7rem;
  color:var(--white);
}
.savings-section .savings-amount{
  font-size:1.4rem;
  font-weight:800;
  color:var(--gold);
  margin:2px 0;
}
.savings-section .savings-amount small{
  font-size:0.8rem;
  color:var(--gold);
}
.savings-section .savings-basis{
  font-size:0.68rem;
  color:var(--white);
  display:block;
}

.savings-section .info-box{
  background:rgba(255,255,255,0.02);
  border:1px solid var(--card-border);
  border-radius:6px;
  padding:10px 12px;
  display:flex;
  gap:8px;
  align-items:flex-start;
}
.savings-section .info-icon{
  color:var(--gold);
  font-size:0.8rem;
  line-height:1.3;
}
.savings-section .info-text strong{
  display:block;
  font-size:0.7rem;
  color:var(--gold);
  margin-bottom:2px;
}
.savings-section .info-text p{
  font-size:0.68rem;
  color:var(--white);
  margin:0;
  line-height:1.4;
}

/* --------------------------------------------------------------------
   Calculateur
   -------------------------------------------------------------------- */
.savings-section .calculator-panel{
  margin-top:48px;
  display:grid;
  grid-template-columns:280px 1fr;
  gap:24px;
  background:linear-gradient(180deg, #091322 0%, #050a14 100%);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:28px;
}

.savings-section .calc-selector-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:16px;
}

.savings-section .calc-vehicle-preview{
  width:100%;
  aspect-ratio:4/3;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--card-border);
  background:#050a14;
}
.savings-section .calc-vehicle-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.savings-section .calc-title-group h4{
  font-size:0.95rem;
  font-weight:800;
  letter-spacing:0.5px;
  color:var(--text-white);
  margin:0 0 6px 0;
}
.savings-section .calc-title-group p{
  font-size:0.75rem;
  color:var(--text-gray);
  margin:0;
  line-height:1.4;
}

.savings-section .select-wrapper{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
}
.savings-section .select-wrapper .select-icon{
  position:absolute;
  left:12px;
  width:16px;
  height:16px;
  color:var(--gold);
  pointer-events:none;
}
.savings-section .select-wrapper .arrow-icon{
  position:absolute;
  right:12px;
  width:14px;
  height:14px;
  color:var(--text-gray);
  pointer-events:none;
}
.savings-section #fleet-select{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  background:#091424;
  border:1px solid var(--card-border);
  border-radius:6px;
  padding:10px 34px;
  color:var(--text-white);
  font-size:0.8rem;
  font-weight:600;
  cursor:pointer;
  transition:border-color var(--transition-fast);
}
.savings-section #fleet-select:hover,
.savings-section #fleet-select:focus{
  border-color:var(--blue-bright);
  outline:none;
}
.savings-section #fleet-select option{
  background:#091424;
  color:var(--text-white);
}

.savings-section .calc-results-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}

.savings-section .result-box{
  background:linear-gradient(180deg, #081220 0%, #040810 100%);
  border:1px solid var(--card-border);
  border-radius:10px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:4px;
  transition:border-color var(--transition-fast);
}
.savings-section .result-box:hover{
  border-color:var(--blue-bright);
}

.savings-section .res-title{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:0.68rem;
  font-weight:800;
  letter-spacing:0.5px;
  color:var(--text-gray);
  text-transform:uppercase;
}
.savings-section .res-title i{
  width:12px;
  height:12px;
  opacity:0.6;
}

.savings-section .res-value{
  font-size:1.6rem;
  font-weight:800;
  color:var(--gold);
  line-height:1.15;
}

.savings-section .res-unit{
  font-size:0.7rem;
  color:var(--white);
  margin-bottom:6px;
}

.savings-section .res-details{
  border-top:1px solid var(--card-border);
  padding-top:8px;
  margin-top:2px;
}
.savings-section .res-details p{
  font-size:0.68rem;
  color:var(--white);
  margin:0 0 2px 0;
  line-height:1.4;
}
.savings-section .res-details p:last-child{
  margin-bottom:0;
}

/* --------------------------------------------------------------------
   Disclaimer
   -------------------------------------------------------------------- */
.savings-section .disclaimer{
  text-align:center;
  color:var(--white);
  font-size:0.7rem;
  margin-top:28px;
}

.uplid-section{
  --up-navy-dark:#081428;
  --up-navy:#0d2c52;
  --up-navy-light:#1e5c9e;
  --uft-gold:#e8b13a;
  --ink:#1c2733;
  --ink-soft:#5a6472;
  --paper:#ffffff;
  --line:#e4e8ee;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  display:grid;
  grid-template-columns:minmax(280px,34%) 1fr;
  min-height:640px;
  color:var(--ink);
  line-height:1.45;
}
.uplid-section *{box-sizing:border-box;}
.uplid-col{position:relative;padding:56px 44px;}
.uplid-col__inner{max-width:100%;} /* Permet à la colonne droite d'utiliser tout l'espace disponible */

/* ---- Colonne UP ---- */
.uplid-col--up{
  background:radial-gradient(120% 140% at 15% 0%, var(--up-navy-light) 0%, var(--up-navy) 42%, var(--up-navy-dark) 100%);
  color:#eaf1fb;
}

/* Alignement du logo et de "Basée en France" */
.uplid-up-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.uplid-logo{display:block;height:auto;}
.uplid-logo--up{max-width:130px; margin-bottom:0;}

.uplid-country{
  font-family:'Space Grotesk',Inter,sans-serif;
  font-size:clamp(1.2rem, 1.8vw, 1.6rem);
  font-weight:600;
  margin:0;
  letter-spacing:-0.01em;
  color: var(--text-white);
}

.uplid-certs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:28px;}
.uplid-cert{display:flex;align-items:center;gap:20px;}
.uplid-cert__img{
  flex:0 0 auto;
  width:64px;height:64px;
  object-fit:contain;
  background:rgba(255,255,255,.92);
  border-radius:50%;
  padding:6px;
}
.uplid-cert__text{margin:0;font-size:.95rem;color:#d5e2f2;}
.uplid-cert__text span{color:var(--text-white);font-weight:600;}

/* ---- Colonne LID / UFT ---- */
.uplid-col--lid{background:var(--paper);}
.uplid-header-row{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:24px;margin-bottom:48px;flex-wrap:wrap;
}
.uplid-logo--lid{max-height:38px;}
.uplid-logo--uft{max-height:56px;}

/* Textes de la colonne droite occupent toute la largeur */
.uplid-lead{
  font-family:'Space Grotesk',Inter,sans-serif;
  font-size:clamp(1.4rem,2vw,1.75rem);
  font-weight:600;margin:0 0 14px;color:var(--ink);
  width: 100%;
}
.uplid-sub{font-size:1.05rem;margin:0 0 14px;color:var(--ink); width: 100%;}
.uplid-body{font-size:.98rem;color:var(--ink-soft);margin:0 0 40px; width: 100%; max-width: 100%;}

.uplid-map{position:relative;}
.uplid-map__img{width:100%;height:auto;display:block;}
.uplid-map__tag{
  position:absolute;
  left:var(--x);
  top:var(--y);
  transform:translate(-8px,-130%);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 10px;
  box-shadow:0 6px 16px rgba(13,44,82,.08);
  width:180px;
  font-size:.72rem;
  pointer-events:none;
}
.uplid-map__tag strong{display:block;color:var(--ink);font-size:.78rem;margin-bottom:2px;}
.uplid-map__tag p{margin:0;color:var(--ink-soft);line-height:1.3;}

@media (max-width:900px){
  .uplid-section{grid-template-columns:1fr;}
  .uplid-col{padding:40px 24px;}
  .uplid-map__tag{position:static;width:auto;transform:none;margin-bottom:8px;}
}



/* --------------------------------------------------------------------
   Effets hover / interactions (desktop uniquement)
   -------------------------------------------------------------------- */
@media (hover:hover){
  .savings-section .card:hover{
    transform:translateY(-4px);
    border-color:rgba(250,204,21,0.6);
    box-shadow:0 10px 20px -5px rgba(0,0,0,0.5), 0 0 15px rgba(250,204,21,0.15);
  }
  .savings-section .card:hover .icon-box{
    transform:scale(1.1);
    background:rgba(37,99,235,0.25);
    border-color:var(--blue-bright);
  }
  .savings-section .card:hover .card-btn{
    background:#0f2b5c;
    border-color:var(--blue-bright);
    color:var(--text-white);
  }
  .savings-section .card:hover .card-btn .arrow{
    transform:translateX(4px);
  }
  .savings-section .detail-card:hover{
    border-color:var(--blue-bright);
    box-shadow:0 8px 16px rgba(0,0,0,0.4);
  }
  .savings-section .close-btn:hover{
    color:var(--gold);
    transform:scale(1.2) rotate(90deg);
  }
}
.savings-section .card:active{
  transform:translateY(-1px) scale(0.99);
}

#calculator {
  scroll-margin-top: 250px; /* Ajustez cette valeur (ex: 80px, 120px) selon la hauteur souhaitée */
}


/* --------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------- */
@media (max-width:1100px){
  .savings-section .cards-grid,
  .savings-section .details-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .savings-section .calculator-panel{
    grid-template-columns:220px 1fr;
  }
}

@media (max-width:780px){
  .savings-section{
    padding:56px 6%;
  }
  .savings-section .calculator-panel{
    grid-template-columns:1fr;
  }
  .savings-section .calc-selector-col{
    max-width:320px;
    margin:0 auto;
  }
}

@media (max-width:560px){
  .savings-section .cards-grid,
  .savings-section .details-grid{
    grid-template-columns:1fr;
  }
  .savings-section .calc-results-grid{
    grid-template-columns:1fr;
  }
  .savings-section .header h2{
    font-size:1.5rem;
  }
}
/* ==========================================================================
   15. TPMS HERO — bandeau "The leading provider of TPMS..."
   ========================================================================== */
.tpms-hero-wrapper{background-color:var(--navy);padding:2rem 1rem;width:100%;box-sizing:border-box;}
.tpms-hero-container{
  max-width:1350px;margin:0 auto;border-radius:12px;overflow:hidden;
  box-shadow:0 8px 12px rgba(0,0,0,0.2);
  border:1px solid rgba(255,255,255,0.08);
  background-color:var(--tpms-blue-dark);
}
.tpms-hero-top{display:grid;grid-template-columns:1fr 1fr;position:relative;min-height:440px;background-color:var(--tpms-blue-dark);}

.tpms-hero-text{
  padding:3rem 2.5rem 2.5rem 3rem;
  background:
    radial-gradient(circle at 80% 20%, rgba(0,180,216,0.15) 0%, transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(37,117,252,0.2) 0%, transparent 50%),
    linear-gradient(135deg, #030814 0%, #081326 100%);
  position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;
}
.tpms-hero-text::after{
  content:'';position:absolute;top:0;right:-50px;width:100px;height:100%;
  background:linear-gradient(135deg, #030814 0%, #081326 100%);
  transform:skewX(-12deg);z-index:1;
  border-right:3px solid var(--tpms-cyan);
  box-shadow:5px 0 15px rgba(0,180,216,0.4);
}

.tpms-hero-title{
  font-size:2.4rem;font-weight:900;line-height:1.1;text-transform:uppercase;
  color:var(--tpms-text-light);margin:0 0 1.2rem 0;letter-spacing:-0.5px;position:relative;z-index:3;
}
.tpms-hero-title span{display:block;color:var(--tpms-cyan);text-shadow:0 0 20px rgba(0,180,216,0.4);}
.tpms-hero-description{color:#cbd5e1;font-size:0.95rem;line-height:1.5;max-width:480px;margin-bottom:2rem;position:relative;z-index:3;}

.tpms-quick-features{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0.8rem;padding-bottom:1.5rem;
  border-bottom:1px solid rgba(255,255,255,0.12);margin-bottom:1.2rem;position:relative;z-index:3;
}
.tpms-feature-item{display:flex;align-items:center;gap:0.5rem;}
.tpms-feature-icon{
  color:var(--tpms-cyan);border:1px solid var(--tpms-border-blue);background:rgba(0,180,216,0.1);
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.tpms-feature-label{font-size:0.68rem;font-weight:800;text-transform:uppercase;color:var(--text-white);line-height:1.15;}

.tpms-country-badge{display:flex;align-items:center;gap:0.75rem;position:relative;z-index:3;}
.tpms-flag-icon{width:28px;height:20px;border-radius:3px;box-shadow:0 2px 4px rgba(0,0,0,0.5);}
.tpms-badge-text h4{font-size:0.85rem;color:var(--tpms-cyan);text-transform:uppercase;font-weight:800;margin:0;}
.tpms-badge-text p{font-size:0.75rem;color:var(--tpms-text-gray);margin:0;}

.tpms-hero-visual{position:relative;background-position:center;background-size:cover;background-repeat:no-repeat;z-index:0;}
.tpms-visual-overlay{position:absolute;inset:0;background:linear-gradient(90deg, rgba(3,8,20,0.6) 0%, rgba(0,0,0,0) 50%);}

.tpms-bottom-bar{
  background:#020712;border-top:1px solid rgba(0,180,216,0.2);
  display:grid;grid-template-columns:repeat(4,1fr);padding:1.2rem 2rem;gap:1rem;position:relative;z-index:4;
}
.tpms-bar-item{display:flex;align-items:center;gap:0.8rem;border-right:1px solid rgba(255,255,255,0.08);padding-right:1rem;}
.tpms-bar-item:last-child{border-right:none;}
.tpms-bar-icon{color:var(--tpms-cyan);width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.tpms-bar-text h5{font-size:0.78rem;text-transform:uppercase;font-weight:800;margin:0;color:var(--text-white);letter-spacing:0.3px;}
.tpms-bar-text p{font-size:0.72rem;color:var(--tpms-text-gray);margin:2px 0 0 0;}

@media (max-width:1024px){
  .tpms-hero-top{grid-template-columns:1fr;}
  .tpms-hero-text::after{display:none;}
  .tpms-hero-visual{min-height:250px;}
  .tpms-bottom-bar{grid-template-columns:repeat(2,1fr);}
  .tpms-bar-item:nth-child(2){border-right:none;}
}
@media (max-width:640px){
  .tpms-quick-features{grid-template-columns:repeat(2,1fr);}
  .tpms-bottom-bar{grid-template-columns:1fr;}
  .tpms-bar-item{border-right:none;}
  .tpms-hero-title{font-size:1.7rem;}
  .tpms-hero-text{padding:2rem 1.5rem;}
}

/* ==========================================================================
   16. TPMS STATS — "TRUSTED BY FLEETS. PROVEN BY PERFORMANCE."
   ========================================================================== */
.tpms-stats-wrapper{
  background:
    radial-gradient(circle at 50% 20%, rgba(0,119,182,0.25) 0%, transparent 60%),
    linear-gradient(180deg, #020712 0%, #050d1a 100%);
  padding:3.5rem 1.5rem;width:100%;box-sizing:border-box;font-family:system-ui, -apple-system, sans-serif;
}
.tpms-stats-container{max-width:1250px;margin:0 auto;position:relative;}
.tpms-stats-header{text-align:center;position:relative;margin-bottom:2rem;}
.tpms-subtitle{
  color:var(--tpms-gold);font-size:0.85rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:1rem;margin-bottom:0.5rem;
}
.tpms-subtitle .line{display:inline-block;width:40px;height:1px;background:linear-gradient(90deg, transparent, var(--tpms-gold));}
.tpms-subtitle .line:last-child{background:linear-gradient(90deg, var(--tpms-gold), transparent);}

.tpms-main-title{font-size:2.2rem;font-weight:900;text-transform:uppercase;line-height:1.15;margin:0;letter-spacing:-0.5px;}
.tpms-main-title .white-text{color:var(--text-white);display:block;}
.tpms-main-title .cyan-text{color:var(--tpms-cyan-bright);display:block;text-shadow:0 0 20px rgba(0,180,216,0.5);}

.tpms-gold-arrow-border{
  height:2px;width:100%;
  background:linear-gradient(90deg, transparent 0%, var(--tpms-gold) 50%, transparent 100%);
  margin-top:1.5rem;position:relative;
}
.tpms-gold-arrow-border::after{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;
  border-top:10px solid var(--tpms-gold);
}

.tpms-stats-card{
  background:var(--tpms-card-bg);
  border:1px solid var(--tpms-border-color);
  border-radius:12px;
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:2.5rem 1rem;
  box-shadow:0 10px 30px rgba(0,0,0,0.6), inset 0 0 25px rgba(0,180,216,0.15);
  margin-top:0.5rem;backdrop-filter:blur(10px);
}
.tpms-stat-box{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 1rem;border-right:1px solid rgba(0,180,216,0.2);}
.tpms-stat-box:last-child{border-right:none;}
.tpms-icon-glow{
  width:60px;height:60px;border-radius:50%;border:1px solid var(--tpms-cyan-bright);
  background:radial-gradient(circle, rgba(0,180,216,0.25) 0%, rgba(2,7,18,0.8) 100%);
  color:var(--tpms-cyan-bright);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;
  box-shadow:0 0 15px rgba(0,180,216,0.3);
}
.tpms-number{font-size:2.2rem;font-weight:900;color:var(--tpms-gold);margin-bottom:0.5rem;text-shadow:0 0 10px rgba(255,183,3,0.3);}
.tpms-label{color:var(--text-gray);font-size:0.82rem;line-height:1.35;font-weight:600;}

@media (max-width:900px){
  .tpms-stats-card{grid-template-columns:repeat(2,1fr);gap:2rem 0;}
  .tpms-stat-box:nth-child(2){border-right:none;}
  .tpms-stat-box:nth-child(1), .tpms-stat-box:nth-child(2){
    border-bottom:1px solid rgba(0,180,216,0.2);padding-bottom:1.5rem;
  }
}
@media (max-width:550px){
  .tpms-stats-card{grid-template-columns:1fr;gap:2rem;}
  .tpms-stat-box{border-right:none !important;border-bottom:1px solid rgba(0,180,216,0.2);padding-bottom:1.5rem;}
  .tpms-stat-box:last-child{border-bottom:none;padding-bottom:0;}
  .tpms-main-title{font-size:1.6rem;}
}

/* ==========================================================================
   17. ABOUT — bandeau "ABOUT OUR COMPANY"
   ========================================================================== */
.about-hero-section{
  position:relative;width:100%;min-height:450px;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  display:flex;align-items:center;box-sizing:border-box;
}
.about-hero-overlay{position:absolute;inset:0;background-color:rgba(0,0,0,0.5);z-index:1;}
.about-hero-container{position:relative;z-index:2;max-width:1200px;width:100%;margin:0 auto;padding:3rem 2rem;}
.about-hero-content{max-width:600px;}
.about-title{
  color:var(--text-white);font-size:3rem;font-weight:800;text-transform:uppercase;margin:0 0 0.5rem 0;
  letter-spacing:1px;line-height:1.1;font-family:system-ui, -apple-system, sans-serif;
}
.about-subtitle{color:var(--text-white);font-size:1.1rem;margin:0 0 2rem 0;font-weight:400;font-family:system-ui, -apple-system, sans-serif;}
.about-btn{
  display:inline-block;padding:0.8rem 2rem;border:1px solid var(--text-white);color:var(--text-white);text-decoration:none;
  font-size:0.9rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;background:transparent;
  transition:all 0.3s ease;cursor:pointer;font-family:system-ui, -apple-system, sans-serif;
}
.about-btn:hover{background-color:var(--paper);color:#000000;}

/* ==========================================================================
   18. [LEGACY / A CONFIRMER] "Savings V2" — .tpms-savings-section
   Ces classes (.savings-cards-grid, .savings-card, .metric-val,
   .card-highlight-box, .card-list...) n'apparaissent pas dans
   front-page.php dans sa version actuelle : la section a visiblement été
   remplacée par le bloc "SAVINGS" (section 14 ci-dessus), mais l'ancien
   CSS n'avait jamais été retiré — c'est une bonne partie du "bordel".
   Conservé tel quel par précaution (au cas où un autre template l'utilise
   encore) ; à supprimer si tu confirmes qu'il n'est plus référencé nulle part.
   ========================================================================== */
.tpms-savings-section{
  background-color:var(--savings-bg);
  color:var(--savings-text);
  padding:4rem 1.5rem;
  font-family:system-ui, -apple-system, sans-serif;
  box-sizing:border-box;
}
.savings-header{text-align:center;max-width:800px;margin:0 auto 3rem auto;}
.savings-subtitle{
  color:var(--savings-gold);font-size:0.8rem;font-weight:800;letter-spacing:2px;
  display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:0.5rem;
}
.savings-subtitle .line{width:40px;height:1px;background:var(--savings-gold);}
.savings-title{font-size:2.2rem;font-weight:900;margin:0 0 1rem 0;letter-spacing:-0.5px;}
.savings-title span{color:var(--savings-cyan);}
.savings-description{color:var(--savings-muted);font-size:0.95rem;line-height:1.5;margin:0;}

.savings-cards-grid{
  max-width:1300px;margin:0 auto 2.5rem auto;display:grid;grid-template-columns:repeat(4,1fr);
  gap:1.25rem;align-items:stretch;
}
.savings-card{
  background:var(--savings-card-bg);border:1px solid var(--savings-border);border-radius:12px;
  padding:1.75rem 1.25rem;display:flex;flex-direction:column;position:relative;transition:transform 0.3s ease;
}
.savings-card.featured{
  border-color:var(--savings-gold);box-shadow:0 0 25px rgba(255,183,3,0.2);transform:translateY(-5px);
}
.card-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;}
.card-icon{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--savings-cyan);
  background:rgba(29,140,248,0.1);color:var(--savings-cyan);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.alert-icon{position:relative;}
.sub-arrow{position:absolute;width:12px;height:12px;right:12px;}
.card-metric{display:flex;flex-direction:column;}
.metric-val{font-size:1.8rem;font-weight:900;color:var(--savings-gold);line-height:1;}
.metric-val small{font-size:0.8rem;color:var(--savings-gold);}
.metric-lbl{font-size:0.85rem;font-weight:700;color:var(--text-white);margin-top:4px;}
.mt-0{margin-top:0;}
.savings-cards-grid .card-desc{color:var(--savings-muted);font-size:0.82rem;line-height:1.4;margin:0 0 1.5rem 0;}

.card-list{list-style:none;padding:0;margin:0 0 1.5rem 0;}
.card-list li{font-size:0.8rem;color:#e2e8f0;display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem;}
.card-list li i{color:var(--savings-gold);width:14px;height:14px;}

.card-highlight-box{
  background:rgba(255,183,3,0.05);border-top:1px solid rgba(255,183,3,0.2);margin-top:auto;padding-top:1rem;text-align:center;
}
.card-highlight-box strong{color:var(--savings-gold);font-size:0.85rem;display:block;}
.card-highlight-box p{color:var(--savings-muted);font-size:0.75rem;margin:3px 0 0 0;}

.savings-cards-grid .card-btn{
  margin-top:auto;background:rgba(19,39,67,0.6);border:1px solid var(--savings-border);border-radius:6px;
  padding:0.75rem 1rem;color:var(--savings-cyan);text-decoration:none;font-size:0.8rem;font-weight:700;
  display:flex;align-items:center;justify-content:space-between;transition:all 0.2s;
}
.savings-cards-grid .card-btn span{display:flex;align-items:center;gap:0.5rem;}
.savings-cards-grid .card-btn:hover{background:rgba(29,140,248,0.15);border-color:var(--savings-cyan);}

.tpms-savings-section .calculator-panel{
  max-width:1300px;margin:0 auto;background:#040c1a;border:1px solid var(--savings-border);
  border-radius:12px;padding:2rem;display:grid;grid-template-columns:320px 1fr;gap:2rem;align-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
}
.calc-selector-col{display:flex;flex-direction:column;gap:1rem;border-right:1px solid var(--savings-border);padding-right:2rem;}
.calc-vehicle-preview img{width:100%;height:90px;object-fit:cover;border-radius:6px;}
.calc-title-group h4{font-size:0.85rem;color:var(--savings-cyan);text-transform:uppercase;margin:0;font-weight:800;}
.calc-title-group p{font-size:0.75rem;color:var(--savings-muted);margin:2px 0 0 0;}
.select-wrapper{position:relative;display:flex;align-items:center;}
.select-wrapper select{
  width:100%;background:#08162c;border:1px solid var(--savings-cyan);border-radius:6px;padding:0.75rem 2.5rem;
  color:var(--text-white);font-size:0.85rem;font-weight:700;appearance:none;cursor:pointer;
}
.select-icon{position:absolute;left:10px;color:var(--savings-cyan);width:18px;height:18px;}
.arrow-icon{position:absolute;right:10px;color:var(--savings-cyan);width:18px;height:18px;pointer-events:none;}

.calc-results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;}
.result-box{display:flex;flex-direction:column;border-right:1px solid var(--savings-border);padding-right:1rem;}
.result-box:last-child{border-right:none;}
.res-title{font-size:0.72rem;font-weight:800;color:var(--text-white);display:flex;align-items:center;gap:4px;}
.res-title i{width:12px;height:12px;color:var(--savings-muted);}
.res-value{font-size:1.8rem;font-weight:900;color:var(--savings-gold);margin-top:0.5rem;line-height:1;}
.res-unit{font-size:0.72rem;color:var(--savings-muted);margin-bottom:0.75rem;}
.res-details p{font-size:0.72rem;color:#cbd5e1;margin:0;line-height:1.3;}
.disclaimer-text{text-align:center;color:var(--savings-muted);font-size:0.75rem;margin-top:1.5rem;}


/* Container principal : Grille sur 2 colonnes */
.wrap.cta-inner {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 colonnes de largeur égale */
  grid-template-rows: auto auto;  /* 2 lignes auto-ajustées */
  gap: 2rem;                       /* Espacement entre les éléments */
  align-items: start;
}

/* 1. Configuration du conteneur en 2 colonnes principales */
.wrap.cta-inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important; /* Gauche: texte+img, Droite: formulaire */
  gap: 2rem !important;
  align-items: start !important;
}

/* 2. Placer le texte en haut à gauche */
.wrap.cta-inner .presentation_txt {
  grid-column: 1 !important;
  grid-row: 1 !important;
  padding-top: 30px !important; /* Descend légèrement le texte */
}

/* 3. Placer l'image juste en dessous à gauche (remontée) */
.wrap.cta-inner .presentation_img {
  grid-column: 1 !important;
  grid-row: 2 !important;
  margin-top: -20px !important; /* Remonte l'image vers le texte */
  max-width: 100% !important;
}

/* 4. Placer le formulaire à droite sur toute la hauteur */
.wrap.cta-inner .wpcf7 {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important; /* Ocuppe les deux lignes de droite */
}

/* Responsive pour mobile (< 768px) */
@media (max-width: 768px) {
  .wrap.cta-inner {
    grid-template-columns: 1fr !important;
  }
  .wrap.cta-inner .presentation_txt,
  .wrap.cta-inner .presentation_img,
  .wrap.cta-inner .wpcf7 {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .wrap.cta-inner .presentation_txt {
    padding-top: 0 !important;
  }
  .wrap.cta-inner .presentation_img {
    margin-top: 0 !important;
  }
}

@media (max-width:1100px){
  .savings-cards-grid{grid-template-columns:repeat(2,1fr);}
  .tpms-savings-section .calculator-panel{grid-template-columns:1fr;}
  .calc-selector-col{border-right:none;border-bottom:1px solid var(--savings-border);padding-right:0;padding-bottom:1.5rem;}
}
@media (max-width:700px){
  .savings-cards-grid{grid-template-columns:1fr;}
  .calc-results-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem 1rem;}
  .result-box:nth-child(2){border-right:none;}
}
/* Reset and enforce exact layout on container */
#uft-contact-card-container, 
#uft-contact-card-container * {
	box-sizing: border-box !important;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: none;
	box-shadow: none;
	text-shadow: none;
	line-height: 1.35;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Dark Charcoal Background Card */
#uft-contact-card-container {
	background-color: #222222 !important;
	color: #ffffff !important;
	padding: 36px 40px !important;
	max-width: 580px !important;
	width: 100% !important;
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	display: block !important;
	text-align: left !important;
	border-radius: 2px !important;
}

/* Main Heading: CONTACT */
#uft-contact-card-container h2.uft-heading-primary {
	font-family: 'Oswald', 'Arial Narrow', sans-serif !important;
	font-size: 38px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	letter-spacing: 0.8px !important;
	text-transform: uppercase !important;
	margin-bottom: 28px !important;
	display: block !important;
}

/* Section Subheading: SALES: */
#uft-contact-card-container h3.uft-heading-sales {
	font-family: 'Oswald', 'Arial Narrow', sans-serif !important;
	font-size: 32px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	letter-spacing: 0.6px !important;
	text-transform: uppercase !important;
	margin-bottom: 10px !important;
	display: block !important;
}

/* Condensed Lines: WHOLESALE & INDUSTRIAL */
#uft-contact-card-container .uft-sales-line {
	font-family: 'Oswald', 'Arial Narrow', sans-serif !important;
	font-size: 26px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
	margin-bottom: 6px !important;
	display: block !important;
	white-space: nowrap !important;
}

/* Body Text Block Spacing */
#uft-contact-card-container .uft-body-group {
	margin-top: 26px !important;
	margin-bottom: 24px !important;
}

/* Regular Body Lines */
#uft-contact-card-container .uft-body-line {
	font-family: 'Roboto', sans-serif !important;
	font-size: 19px !important;
	font-weight: 400 !important;
	color: #ffffff !important;
	margin-bottom: 12px !important;
	display: block !important;
	letter-spacing: 0.2px !important;
}

/* Universal link style overrides to prevent website dark blue text bug */
#uft-contact-card-container a,
#uft-contact-card-container a:visited,
#uft-contact-card-container a:active,
#uft-contact-card-container a:focus {
	color: #ffffff !important;
	text-decoration: none !important;
	transition: opacity 0.15s ease-in-out !important;
	display: inline !important;
	background: transparent !important;
}

#uft-contact-card-container a.uft-email-link {
	text-decoration: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
}

#uft-contact-card-container a:hover {
	opacity: 0.82 !important;
	color: #ffffff !important;
}

/* LinkedIn Footer Section */
#uft-contact-card-container .uft-social-row {
	margin-top: 22px !important;
	display: flex !important;
	align-items: center !important;
}

/* Exact LinkedIn Square Badge */
#uft-contact-card-container a.uft-linkedin-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	background-color: #8c8c8c !important;
	color: #222222 !important;
	border-radius: 4px !important;
	text-decoration: none !important;
	transition: background-color 0.2s ease, transform 0.1s ease !important;
}

#uft-contact-card-container a.uft-linkedin-btn:hover {
	background-color: #0a66c2 !important;
	color: #ffffff !important;
	opacity: 1 !important;
}

#uft-contact-card-container a.uft-linkedin-btn i {
	font-size: 16px !important;
	color: inherit !important;
	line-height: 1 !important;
}