/* --- Hard reset to avoid WP global styles shifting layout --- */
html, body { margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; }
a { text-decoration: none; }

/* Font: Inter (falls back gracefully) */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');

    :root{
      --bg:#EEF2F7;
      --surface:#FFFFFF;
      --text:#0B1220;
      --muted:#55657A;
      --line:#E2E8F2;

      --blue:#0B4ACB;
      --teal:#00A9C8;
      --orange:#FF5630;

      --shadow: 0 20px 70px rgba(15,30,60,.12);
      --shadowSoft: 0 12px 34px rgba(15,30,60,.10);

      --radius: 20px;
      --radiusSm: 14px;

      --container: 1200px;
      --padX: 64px;   /* desktop page padding */
      --padXm: 22px;  /* mobile page padding */
      --space: 8px;   /* 8pt system base */
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color: var(--text);
      background:
        radial-gradient(900px 520px at 15% 0%, rgba(11,74,203,.10), transparent 55%),
        radial-gradient(900px 520px at 95% 5%, rgba(224,122,47,.10), transparent 55%),
        var(--bg);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    a{color:inherit;text-decoration:none}
    .wrap{max-width: var(--container); margin:0 auto; padding: 0 var(--padX)}

    /* NAV */
    .topbar{padding: 18px 0 10px}
    .navShell{
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(227,234,244,.95);
      border-radius: 26px;
      box-shadow: var(--shadowSoft);
      padding: 14px 16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      backdrop-filter: blur(10px);
    }
    .brand{display:flex; align-items:center; gap:12px; min-width: 220px}
    .logoFull{height: 34px; width:auto; display:block}
    .menu{display:flex; align-items:center; gap:22px; color: var(--muted); font-weight: 700; font-size: 14px}
    .menu a{padding: 10px 8px; border-radius: 12px}
    .menu a:hover{background: rgba(11,74,203,.06); color: var(--blue)}
    .right{display:flex; align-items:center; gap:12px}
    .lang{display:flex; gap:8px}
    .chip{
      height:34px; min-width:44px; padding:0 12px;
      border-radius: 12px;
      border:1px solid var(--line);
      background: #F8FBFF;
      color: var(--muted);
      font-weight: 800;
      display:inline-flex; align-items:center; justify-content:center;
      cursor:pointer;
      transition: .15s ease;
    }
    .chip[aria-pressed="true"]{
      border-color: rgba(11,74,203,.25);
      background: rgba(11,74,203,.08);
      color: var(--blue);
    }
    .btn{color: var(--text);

      min-height:42px; height:auto; padding: 10px 18px;
      line-height: 1;
      white-space: nowrap;
      border-radius: 14px;
      border:1px solid rgba(11,74,203,.18);
      background: #fff;
      font-weight: 900;
      letter-spacing: .1px;
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      cursor:pointer;
      transition: transform .12s ease, box-shadow .12s ease;
      box-shadow: 0 8px 20px rgba(15,30,60,.08);
    }
    .btn:hover{transform: translateY(-1px)}
    .btn:focus{outline:none}
    .btn:focus-visible{box-shadow: 0 0 0 4px rgba(11,74,203,.14), 0 8px 20px rgba(15,30,60,.08)}
    .btn.primary{
      border:0;
      background: linear-gradient(135deg, var(--orange), var(--blue));
      color:#fff;
      box-shadow: 0 16px 34px rgba(11,74,203,.18);
    }
    .btn.secondary{
      background: #fff;
      color: var(--blue);
    }

    /* HERO */
    .heroWrap{padding: 10px 0 34px}
    .heroCard{
      background: var(--surface);
      border: 1px solid rgba(227,234,244,.95);
      border-radius: 28px;
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .heroImage{
      height: 460px;
      background-image:
        linear-gradient(90deg, rgba(11,18,32,.62) 0%, rgba(11,18,32,.28) 48%, rgba(11,18,32,0) 72%),
        url("../img/hero_fr_autoroute_sunset.jpg");
      background-size: cover;
      background-position: center;
      position: relative;
      display:flex;
      align-items:flex-end;
    }
    .heroInner{
      width:100%;
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 22px;
      padding: 34px;
      align-items:end;
    }
    .heroText h1{
      margin:0 0 10px;
      font-size: 54px;
      line-height: 1.03;
      letter-spacing: -1px;
      color: #fff;
      text-shadow: 0 12px 38px rgba(0,0,0,.28);
    }
    .heroText p{
      margin:0 0 18px;
      font-size: 18px;
      line-height: 1.5;
      color: rgba(255,255,255,.92);
      max-width: 680px;
    }
    .heroBtns{display:flex; gap:12px; flex-wrap:wrap}
    .heroBtns .btn{height:46px}
    .heroBtns .btn.secondary{background: rgba(255,255,255,.94); border:0; color: var(--blue)}

    .overview{
      background: rgba(255,255,255,.96);
      border: 1px solid rgba(255,255,255,.62);
      border-radius: 20px;
      padding: 18px;
      box-shadow: 0 18px 52px rgba(0,0,0,.18);
    }
    .overview h3{margin:0 0 6px; font-size:18px; letter-spacing:-.2px}
    .overview p{margin:0 0 14px; color: #42516D; font-size:14px; line-height:1.45}
    .ovStats{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      border-top: 1px solid rgba(227,234,244,.95);
      padding-top: 12px;
    }
    .stat{display:flex; gap:10px; align-items:center}
    .icon{
      width:36px;height:36px;border-radius:14px;
      display:grid; place-items:center;
      background: rgba(11,74,203,.08);
      border: 1px solid rgba(11,74,203,.16);
      font-weight: 900;
      color: var(--blue);
    }
    .icon.orange{
      background: rgba(224,122,47,.10);
      border-color: rgba(224,122,47,.22);
      color: var(--orange);
    }
    .stat b{display:block; font-size:22px; letter-spacing:-.4px}
    .stat span{display:block; color: #5B667A; font-size:12px; margin-top:2px; font-weight:700}

    .kpiStrip{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid rgba(227,234,244,.95);
      background: #fff;
    }
    .kpi{
      padding: 18px 22px;
      display:flex; align-items:center; gap:12px;
      border-right: 1px solid rgba(227,234,244,.95);
    }
    .kpi:last-child{border-right:0}
    .kpi .big{font-size:40px; font-weight:900; color: var(--blue); letter-spacing:-1px}
    .kpi .lbl{color: #51658B; font-weight:800}
    .kpi .bar{
      height:4px; width:64px; border-radius:999px;
      background: linear-gradient(90deg, var(--orange), var(--blue));
      margin-top:6px;
    }

    /* SECTIONS */
    section{padding: 56px 0}
    h2{margin: 0 0 6px; font-size: 32px; letter-spacing:-.6px}
    .lead{margin:0 0 18px; color: #51658B; font-weight:600}
    .grid2{display:grid; grid-template-columns: 1fr 1fr; gap:22px}

    .panel{
      background:#fff;
      border:1px solid rgba(227,234,244,.95);
      border-radius: 20px;
      box-shadow: var(--shadowSoft);
      padding: 18px;
      display:flex; align-items:center; justify-content:space-between; gap:14px;
      min-height: 152px;
      overflow:hidden;
    }
    .panel h3{margin:0 0 6px; font-size:18px; letter-spacing:-.2px}
    .panel p{margin:0; color: #51658B; line-height:1.45}

    .media{
      width: 168px; height: 104px; border-radius: 16px;
      border: 1px solid rgba(227,234,244,.95);
      overflow:hidden;
      flex: 0 0 auto;
      background: #F4F7FC;
      box-shadow: 0 10px 26px rgba(15,30,60,.10);
    }
    .media img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.02)}

    .panel.warn{
      background: linear-gradient(180deg, rgba(224,122,47,.08), rgba(255,255,255,1) 55%);
      border-color: rgba(224,122,47,.18);
    }

    /* CONTACT */
    .formCard{align-items:flex-start; flex-direction:column; gap:14px}
    label{font-size:12px; color:#5B667A; font-weight:800}
    input,textarea{
      width:100%;
      padding:12px 12px;
      border-radius:14px;
      border:1px solid rgba(227,234,244,.95);
      background:#fff;
      font-family: inherit;
      font-size:14px;
      outline:none;
      transition: box-shadow .12s ease, border-color .12s ease;
    }
    input:focus,textarea:focus{
      border-color: rgba(11,74,203,.35);
      box-shadow: 0 0 0 4px rgba(11,74,203,.12);
    }

    /* FOOTER */
    .footer{padding: 24px 0 40px; color: #51658B}
    .foot{
      background:#fff;
      border:1px solid rgba(227,234,244,.95);
      border-radius: 20px;
      box-shadow: var(--shadowSoft);
      padding: 14px 18px;
      display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
    }
    .foot a{font-weight:800; color:#51658B}
    .foot a:hover{color: var(--blue)}

    /* Responsive */
    @media (max-width: 980px){
      .menu{display:none}
      .heroInner{grid-template-columns: 1fr}
      .heroImage{height: 560px}
      .kpiStrip{grid-template-columns:1fr}
      .kpi{border-right:0; border-bottom:1px solid rgba(227,234,244,.95)}
      .kpi:last-child{border-bottom:0}
      .grid2{grid-template-columns:1fr}
      .brand{min-width: unset}
    }
    @media (max-width: 860px){.wrap{padding:0 28px}}
    @media (max-width: 560px){.wrap{padding:0 var(--padXm)}

      .heroText h1{font-size:36px}
      .heroInner{padding: 18px}
      .heroImage{height: 560px}
      .logoFull{height: 30px}
      .btn{height:40px}
    }

    .logoImg{
      height:42px;
      width:auto;
      display:block;
    }
    .wrap{max-width: var(--container); margin:0 auto; padding: 0 var(--padX)}

    input, textarea{
      font: inherit;
      border:1px solid var(--line);
      border-radius: 12px;
      padding: 12px 14px;
      background:#fff;
      outline:none;
    }
    input:focus, textarea:focus{
      border-color: rgba(11,74,203,.32);
      box-shadow: 0 0 0 4px rgba(11,74,203,.10);
    }


/* Contact form (ideal states) */
    .contactPanel{align-items:flex-start; flex-direction:column; gap:16px}
    #contactForm{
      width:100%;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px 14px;
      margin-top: 2px;
    }
    .field{display:flex; flex-direction:column; gap:8px}
    .fieldFull{grid-column: 1 / -1}
    .lbl{font-size:12px; color: var(--muted); font-weight:800; letter-spacing:.2px}
    .control{position:relative}
    #contactForm input, #contactForm textarea{
      width:100%;
      border:1px solid var(--line);
      border-radius: 14px;
      padding: 12px 14px;
      background: #fff;
      outline: none;
      transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }
    #contactForm textarea{min-height: 120px; resize: vertical; line-height:1.45}
    #contactForm input::placeholder, #contactForm textarea::placeholder{color: rgba(85,101,122,.75)}
    #contactForm input:focus, #contactForm textarea:focus{
      border-color: rgba(11,74,203,.36);
      box-shadow: 0 0 0 4px rgba(11,74,203,.10);
    }
    .hint{
      margin-top:6px;
      font-size:12px;
      color: rgba(85,101,122,.92);
      min-height: 16px;
    }
    .isError #contactForm input, .isError #contactForm textarea{ }
    .control.is-error input, .control.is-error textarea{
      border-color: rgba(255,86,48,.55);
      box-shadow: 0 0 0 4px rgba(255,86,48,.10);
    }
    .control.is-ok input, .control.is-ok textarea{
      border-color: rgba(0,169,200,.40);
      box-shadow: 0 0 0 4px rgba(0,169,200,.10);
    }
    .control.is-error .hint{color: rgba(255,86,48,.95); font-weight:700}
    .actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
    .formNote{color: var(--muted); font-size:13px; font-weight:650}
    .formStatus{
      grid-column: 1 / -1;
      display:none;
      padding: 12px 14px;
      border-radius: 14px;
      border:1px solid var(--line);
      background: #fff;
      box-shadow: var(--shadowSoft);
      font-weight: 750;
    }
    .formStatus.show{display:block}
    .formStatus.ok{
      border-color: rgba(0,169,200,.28);
      background: rgba(0,169,200,.06);
      color: #0B1220;
    }
    .formStatus.err{
      border-color: rgba(255,86,48,.28);
      background: rgba(255,86,48,.06);
      color: #0B1220;
    }
    .btn[disabled]{
      opacity:.72;
      cursor:not-allowed;
      transform:none !important;
      box-shadow:none !important;
    }
    .spinner{
      width:14px; height:14px;
      border-radius:999px;
      border:2px solid rgba(255,255,255,.55);
      border-top-color:#fff;
      display:none;
      animation: spin .9s linear infinite;
    }
    .btn.primary.loading .spinner{display:inline-block}
    .btn.primary.loading .btnLabel{opacity:.92}
    @keyframes spin{to{transform:rotate(360deg)}}

    @media (max-width: 980px){
      #contactForm{grid-template-columns:1fr}
    }