:root {
      --bleu-nuit: #0b1f3a;
      --bleu-pro: #123f73;
      --bleu-clair: #eaf4ff;
      --gris-texte: #4f5d6c;
      --gris-fond: #f5f7fa;
      --blanc: #ffffff;
      --or: #b38a43;
      --ombre: 0 12px 32px rgba(11, 31, 58, 0.09);
      --rayon: 16px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    #services,
    #methode,
    #contact {
      scroll-margin-top: 90px;
    }

    body {
      font-family: "Segoe UI", Arial, Helvetica, sans-serif;
      color: var(--bleu-nuit);
      background: linear-gradient(180deg, #f2f8ff 0%, #ffffff 45%, #f7f9fc 100%);
      line-height: 1.6;
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: #ffffff;
      border-bottom: 1px solid rgba(18, 63, 115, 0.10);
      box-shadow: 0 5px 18px rgba(11, 31, 58, 0.05);
    }

    .container {
      width: min(1180px, calc(100% - 36px));
      margin: 0 auto;
    }

    .nav {
      min-height: 96px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border-radius: 8px;
    }

    .logo img {
      height: auto;
      width: 150px;
      max-width: none;
      object-fit: contain;
      display: block;
    }

    .logo-text {
      font-size: 34px;
      font-weight: 900;
      color: var(--bleu-nuit);
      letter-spacing: -1px;
      text-shadow: 0 2px 10px rgba(0,0,0,.08);
    }

    .menu {
      display: flex;
      align-items: center;
      gap: 20px;
      font-size: 15px;
      font-weight: 700;
      color: var(--bleu-nuit);
    }

    .menu a {
      padding: 7px 10px;
      border-radius: 30px;
      transition: all .2s ease;
    }

    .menu a:hover {
      background: rgba(18,63,115,.08);
      color: var(--bleu-pro);
    }

    .hero {
      padding: 72px 0 76px;
      background: radial-gradient(circle at 82% 18%, rgba(179, 138, 67, .12), transparent 29%), linear-gradient(125deg, #f3f8fe 0%, #ffffff 74%);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
      gap: 64px;
      align-items: center;
    }

    .badge {
      display: inline-flex;
      background: #ffffff;
      color: var(--bleu-pro);
      border: 1px solid rgba(18, 63, 115, 0.18);
      border-left: 3px solid var(--or);
      border-radius: 12px;
      padding: 9px 14px;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.4;
      box-shadow: 0 7px 20px rgba(11, 31, 58, 0.06);
      margin-bottom: 22px;
      max-width: 100%;
    }

    h1 {
      font-size: clamp(36px, 3.8vw, 54px);
      line-height: 1.12;
      letter-spacing: -1.25px;
      margin-bottom: 20px;
      color: var(--bleu-nuit);
    }

    .hero p {
      font-size: 17px;
      color: var(--gris-texte);
      max-width: 610px;
      line-height: 1.7;
      margin-bottom: 28px;
    }

    .actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 28px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      padding: 13px 20px;
      font-weight: 700;
      transition: 0.2s ease;
      border: none;
      cursor: pointer;
      font-family: inherit;
      font-size: 15px;
    }

    .btn-principal {
      background: var(--bleu-pro);
      color: var(--blanc);
      box-shadow: 0 9px 22px rgba(18, 63, 115, 0.19);
      border-bottom: 2px solid var(--or);
    }

    .btn-principal:hover {
      transform: translateY(-2px);
      background: var(--bleu-nuit);
    }

    .btn-secondaire {
      background: var(--blanc);
      color: var(--bleu-nuit);
      border: 1px solid rgba(11, 31, 58, 0.12);
    }

    .btn-secondaire:hover {
      transform: translateY(-2px);
      border-color: var(--bleu-pro);
    }

    .mini-cartes {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      max-width: 720px;
    }

    .mini-carte {
      background: var(--blanc);
      border: 1px solid rgba(11, 31, 58, 0.08);
      border-radius: 14px;
      padding: 15px;
      box-shadow: 0 7px 22px rgba(11, 31, 58, 0.05);
      border-top: 2px solid rgba(179, 138, 67, .7);
    }

    .mini-carte strong {
      display: block;
      font-size: 15px;
      margin-bottom: 4px;
    }

    .mini-carte span {
      color: var(--gris-texte);
      font-size: 14px;
    }

    .visuel-hero {
      background: var(--blanc);
      border-radius: 22px;
      padding: 10px;
      box-shadow: var(--ombre);
      border: 1px solid rgba(179, 138, 67, 0.33);
      max-width: 430px;
      justify-self: end;
    }

    .visuel-hero img {
      width: 100%;
      border-radius: 14px;
      object-fit: cover;
    }

    section {
      padding: 76px 0;
    }

    #services { background: #ffffff; }
    #contact { background: #f1f6fb; }

    .titre-section {
      max-width: 820px;
      margin-bottom: 34px;
    }

    .titre-section span {
      color: var(--bleu-pro);
      font-weight: 800;
      text-transform: uppercase;
      font-size: 14px;
      letter-spacing: 1.2px;
      border-left: 3px solid var(--or);
      padding-left: 11px;
    }

    .titre-section h2 {
      font-size: clamp(29px, 3.3vw, 42px);
      line-height: 1.15;
      margin-top: 10px;
      color: var(--bleu-nuit);
    }

    .intro-section {
      color: var(--gris-texte);
      font-size: 17px;
      max-width: 900px;
      margin: -18px 0 34px;
    }

    .cartes {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .carte {
      background: var(--blanc);
      border-radius: var(--rayon);
      padding: 24px;
      border: 1px solid rgba(11, 31, 58, 0.11);
      border-top: 3px solid var(--or);
      box-shadow: 0 10px 24px rgba(11, 31, 58, 0.07);
      min-height: 190px;
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .carte:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 30px rgba(11, 31, 58, 0.11);
    }

    .carte h3 {
      font-size: 20px;
      margin-bottom: 12px;
      color: var(--bleu-nuit);
    }

    .carte p {
      color: var(--gris-texte);
    }

    .phrase-forte {
      margin-top: 24px;
      background: var(--bleu-clair);
      border-left: 4px solid var(--or);
      border-radius: 14px;
      padding: 18px 22px;
      color: var(--bleu-nuit);
      font-size: 17px;
      font-weight: 800;
      box-shadow: 0 7px 20px rgba(11, 31, 58, 0.05);
    }

    .methode {
      background: linear-gradient(145deg, #0b1f3a 0%, #12335a 100%);
      color: var(--blanc);
    }

    .methode .titre-section h2,
    .methode .titre-section span {
      color: var(--blanc);
    }

    .methode .titre-section span { border-left-color: var(--or); }

    .methode .intro-section {
      color: rgba(255, 255, 255, 0.78);
    }

    .parcours {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-bottom: 26px;
    }

    .parcours-bloc {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: var(--rayon);
      padding: 24px;
      border-top: 2px solid var(--or);
    }

    .parcours-bloc h3 {
      margin-bottom: 12px;
      font-size: 20px;
    }

    .parcours-bloc p {
      color: rgba(255, 255, 255, 0.82);
    }

    .etapes {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .etape {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: var(--rayon);
      padding: 23px;
    }

    .numero {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: #d5b36e;
      color: var(--bleu-nuit);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      margin-bottom: 14px;
    }

    .etape h3 {
      margin-bottom: 10px;
      font-size: 20px;
    }

    .etape p {
      color: rgba(255, 255, 255, 0.78);
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 0.85fr 1.15fr;
      gap: 24px;
      align-items: start;
    }

    .bloc-contact,
    form {
      background: var(--blanc);
      border-radius: var(--rayon);
      padding: 28px;
      border: 1px solid rgba(11, 31, 58, 0.11);
      box-shadow: var(--ombre);
    }

    .bloc-contact { border-top: 3px solid var(--or); }
    form { border-top: 3px solid var(--bleu-pro); }

    .bloc-contact h3 {
      font-size: 20px;
      margin-bottom: 18px;
    }

    .ligne-contact {
      margin-bottom: 14px;
      color: var(--gris-texte);
    }

    .ligne-contact strong {
      color: var(--bleu-nuit);
      display: block;
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .champ {
      margin-bottom: 16px;
    }

    .champ.large {
      grid-column: 1 / -1;
    }

    label {
      display: block;
      font-weight: 800;
      margin-bottom: 7px;
      color: var(--bleu-nuit);
    }

    input,
    select,
    textarea {
      width: 100%;
      border: 1px solid rgba(11, 31, 58, 0.16);
      border-radius: 14px;
      padding: 14px 15px;
      font-size: 16px;
      font-family: inherit;
      background: #fbfdff;
      color: var(--bleu-nuit);
    }

    textarea {
      min-height: 140px;
      resize: vertical;
    }

    input:focus,
    select:focus,
    textarea:focus {
      outline: 3px solid rgba(18, 63, 115, 0.14);
      border-color: var(--bleu-pro);
      background: var(--blanc);
    }

    .logo:focus-visible,
    .menu a:focus-visible,
    .btn:focus-visible {
      outline: 3px solid var(--or);
      outline-offset: 3px;
    }

    .message-formulaire {
      border-radius: 14px;
      padding: 14px 16px;
      margin-bottom: 18px;
      font-weight: 800;
    }

    .succes {
      background: #e9f8ef;
      color: #126b36;
    }

    .erreur {
      background: #fdecec;
      color: #9a1b1b;
    }

    footer {
      padding: 32px 0;
      text-align: center;
      color: var(--gris-texte);
      border-top: 1px solid rgba(11, 31, 58, 0.08);
      background: var(--blanc);
    }

    @media (max-width: 980px) {
      .hero-grid,
      .contact-grid,
      .parcours {
        grid-template-columns: 1fr;
      }

      .hero-grid {
        gap: 36px;
      }

      .visuel-hero {
        justify-self: center;
        width: min(100%, 430px);
      }

      .cartes,
      .etapes {
        grid-template-columns: repeat(2, 1fr);
      }

      .menu {
        gap: 16px;
      }
    }

    @media (max-width: 680px) {
      .container {
        width: min(100% - 24px, 1180px);
      }

      .nav {
        min-height: auto;
        padding: 10px 0;
        flex-wrap: wrap;
        gap: 10px;
      }

      .logo img {
        height: auto;
        width: 116px;
      }

      .logo-text {
        font-size: 26px;
        letter-spacing: -0.5px;
      }

      .menu {
        gap: 6px;
        margin-left: auto;
        font-size: 13px;
      }

      .menu a {
        padding: 6px 4px;
      }

      .hero {
        padding: 44px 0 56px;
      }

      section { padding: 56px 0; }

      .titre-section { margin-bottom: 26px; }

      .intro-section { margin: -10px 0 28px; }

      h1 {
        font-size: clamp(34px, 8vw, 42px);
      }

      .mini-cartes,
      .cartes,
      .etapes,
      .form-grid {
        grid-template-columns: 1fr;
      }

      .champ.large {
        grid-column: auto;
      }

      .bloc-contact,
      form {
        padding: 24px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .carte, .btn, .menu a { transition: none; }
    }

    .service-hero {
      padding: 68px 0 64px;
      background: radial-gradient(circle at 85% 15%, rgba(179,138,67,.13), transparent 32%), linear-gradient(125deg, #f3f8fe, #fff);
    }

    .service-hero .container { max-width: 940px; }
    .service-hero p { max-width: 760px; color: var(--gris-texte); font-size: 18px; margin-bottom: 25px; }
    .service-hero h1 { max-width: 820px; }
    .eyebrow { display: inline-block; color: var(--bleu-pro); text-transform: uppercase; letter-spacing: 1.1px; font-size: 14px; font-weight: 800; border-left: 3px solid var(--or); padding-left: 11px; margin-bottom: 17px; }
    .service-section { background: #fff; }
    .service-section.alt { background: #f1f6fb; }
    .service-lead { max-width: 800px; color: var(--gris-texte); font-size: 17px; margin-bottom: 28px; }
    .service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
    .service-card { background: #fff; border: 1px solid rgba(11,31,58,.11); border-top: 3px solid var(--or); border-radius: var(--rayon); padding: 24px; box-shadow: var(--ombre); }
    .service-card h3 { font-size: 20px; line-height: 1.3; margin-bottom: 10px; }
    .service-card p { color: var(--gris-texte); }
    .service-list { max-width: 850px; display: grid; gap: 12px; list-style: none; }
    .service-list li { background: #fff; border-left: 3px solid var(--or); border-radius: 10px; padding: 14px 18px; color: var(--gris-texte); box-shadow: 0 6px 18px rgba(11,31,58,.05); }
    .service-list strong { color: var(--bleu-nuit); }
    .service-cta { background: linear-gradient(145deg, #0b1f3a, #12335a); color: #fff; }
    .service-cta h2 { color: #fff; }
    .service-cta p { color: rgba(255,255,255,.85); max-width: 780px; margin: 0 0 23px; font-size: 17px; }
    .service-cta .btn-principal { background: #fff; color: var(--bleu-nuit); }
    .service-cta .btn-principal:hover { background: #eaf4ff; }
    .related-services { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
    .related-services a { color: var(--bleu-pro); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
    .related-services a:hover { color: var(--bleu-nuit); }
    .service-hero .menu a, .service-cta a { text-decoration: none; }

    @media (max-width: 780px) {
      .service-grid { grid-template-columns: 1fr; }
      .service-hero { padding: 48px 0 54px; }
      .service-hero p { font-size: 17px; }
    }