:root {
    --bleu:#0F1E33; --bleu2:#29466C; --chaud:#F7F3EC; --ivoire:#F1EADC;
    --cuivre:#C2703F; --cuivrecl:#D88D5C; --gris:#5A6B80; --bgris:#8AA0B4;
    --pale:#F6E3D6; --trait:rgba(15,30,51,.13);
    --jost:"Jost","Futura","Century Gothic",sans-serif;
    --plex:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--chaud); color: var(--bleu);
          font-family: var(--plex); font-size: 17px; line-height: 1.65;
          -webkit-font-smoothing: antialiased; }
  img { display: block; max-width: 100%; }
  a { color: var(--cuivre); text-decoration: none; }
  a:hover { color: var(--bleu); }
  .shell { max-width: 1180px; margin: 0 auto; padding: 0 60px; }

  /* ------------------------------------------------------------ nav */
  .nav { display: flex; align-items: center; justify-content: space-between;
          gap: 40px; padding: 30px 0; }
  .nav__logo svg { width: 200px; height: auto; display: block; }
  .nav__l { display: flex; align-items: center; gap: 30px; }
  .nav__l a { font-family: var(--jost); font-size: 15px; color: var(--bleu); }
  .nav__l a:hover { color: var(--cuivre); }
  .nav__l a.on { color: var(--cuivre); }
  .nav__l a.cta { background: var(--bleu); color: var(--chaud); padding: 12px 22px;
                   white-space: nowrap; }
  .nav__l a.cta:hover { background: var(--cuivre); color: #fff; }

  /* ------------------------------------------------------------ titres */
  .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .21em;
              text-transform: uppercase; color: var(--cuivre); margin: 0 0 22px; }
  h1 { font-family: var(--jost); font-weight: 300; font-size: 62px; line-height: 1.05;
        letter-spacing: -.022em; margin: 0 0 26px; text-wrap: balance; }
  h2 { font-family: var(--jost); font-weight: 300; font-size: 40px; line-height: 1.1;
        letter-spacing: -.016em; margin: 0 0 20px; text-wrap: balance; }
  h3 { font-family: var(--jost); font-weight: 400; font-size: 21px; line-height: 1.25;
        margin: 0 0 10px; }
  .lede { font-size: 21px; line-height: 1.6; color: var(--gris); max-width: 30em;
           margin: 0; font-weight: 300; text-wrap: pretty; }
  p { margin: 0 0 16px; }
  .rule { width: 92px; height: 2px; background: var(--cuivre); margin: 26px 0; }
  .sec { padding: 96px 0; }
  .sec--d { background: var(--bleu); color: var(--ivoire); }
  .sec--m { background: var(--bleu2); color: var(--chaud); }
  .sec--d .lede, .sec--m .lede { color: #BFCCDB; }
  .sec--d .eyebrow, .sec--m .eyebrow { color: var(--cuivrecl); }
  .sec--d h2, .sec--m h2 { color: var(--ivoire); }
  .sec--d .rule, .sec--m .rule { background: var(--cuivrecl); }

  /* ------------------------------------------------------------ boutons */
  .btn { display: inline-block; font-family: var(--jost); font-size: 17px;
          padding: 17px 32px; background: var(--bleu); color: var(--chaud); }
  .btn:hover { background: var(--cuivre); color: #fff; }
  .btn--cl { background: var(--cuivre); color: #fff; }
  .btn--cl:hover { background: var(--bleu); color: var(--chaud); }
  .btn--g { background: transparent; color: var(--bleu);
             border: 1px solid rgba(15,30,51,.28); }
  .btn--g:hover { border-color: var(--cuivre); background: transparent; }
  .acts { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
  .sous { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em;
           color: var(--gris); margin: 16px 0 0; }
  .sec--d .sous, .sec--m .sous { color: var(--bgris); }

  /* ------------------------------------------------------------ grilles */
  .g2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 34px; }
  .g3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 30px; }
  .g4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 26px; }
  .duo { display: grid; grid-template-columns: 1fr 380px; gap: 66px;
          align-items: start; }
  .duo--inv { grid-template-columns: 400px 1fr; gap: 60px; }
  .duo--l { grid-template-columns: 1fr 340px; gap: 46px; }

  /* ------------------------------------------------------------ blocs */
  .carte { border: 1px solid var(--trait); padding: 34px 32px; background: #FCFAF6;
            display: flex; flex-direction: column; gap: 14px; }
  .carte h3 { margin: 0; }
  .carte p { margin: 0; font-size: 16px; color: var(--gris); line-height: 1.55; }
  .carte__lien { font-family: var(--jost); font-size: 15.5px; color: var(--cuivre);
                  margin-top: auto; padding-top: 8px; }

  .sympt { border-top: 2px solid var(--cuivre); padding-top: 22px; }
  .sympt h3 { margin: 0 0 10px; }
  .sympt p { margin: 0; color: var(--gris); font-size: 16px; }
  /* sur le bleu moyen, tout le texte secondaire doit s'inverser */
  .sec--m .sympt { border-top-color: var(--cuivrecl); }
  .sec--m .sympt h3 { color: var(--chaud); }
  .sec--m .sympt p { color: #CFDCE9; }
  .sec--m p, .sec--d p { color: #BFCCDB; }
  .sec--m h3, .sec--d h3 { color: var(--ivoire); }
  .sec--d .carte h3, .sec--m .carte h3 { color: var(--bleu); }
  .sec--d .carte p, .sec--m .carte p { color: var(--gris); }

  .etape { display: grid; grid-template-columns: 190px 1fr; gap: 30px;
            padding: 26px 0; border-top: 1px solid var(--trait); }
  .sec--d .etape { border-top-color: rgba(241,234,220,.18); }
  .etape__q { font-family: var(--mono); font-size: 12.5px; letter-spacing: .13em;
               text-transform: uppercase; color: var(--cuivre); padding-top: 5px; }
  .sec--d .etape__q { color: var(--cuivrecl); }
  .etape p { margin: 6px 0 0; color: var(--gris); font-size: 16.5px; }
  .sec--d .etape p { color: #BFCCDB; }

  .liv { list-style: none; margin: 0; padding: 0; display: flex;
          flex-direction: column; gap: 14px; }
  .liv li { display: flex; gap: 15px; align-items: flex-start; font-size: 17px;
             line-height: 1.5; }
  .liv li span { flex: none; margin-top: 3px; display: flex; }

  .ref { display: flex; flex-wrap: wrap; gap: 10px; }
  .ref b { font-family: var(--mono); font-weight: 400; font-size: 13px;
            letter-spacing: .1em; border: 1px solid rgba(241,234,220,.35);
            color: var(--ivoire); padding: 9px 15px; }

  /* ---- cadre d'illustration : un emplacement qui se lit comme une intention */
  .cadre { position: relative; aspect-ratio: 16 / 9; background: var(--bleu);
            overflow: hidden; }
  .cadre img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .faq { border-top: 1px solid var(--trait); padding: 28px 0; }
  .faq h3 { margin: 0 0 10px; }
  .faq p { margin: 0; color: var(--gris); max-width: 62em; }

  /* ------------------------------------------------------------ formulaire */
  .form { background: #FCFAF6; border: 1px solid var(--trait); padding: 46px 44px; }
  .champ { display: flex; flex-direction: column; gap: 8px; }
  .champ label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em;
                  text-transform: uppercase; color: var(--gris); }
  .champ .box { border: 1px solid rgba(15,30,51,.22); background: #fff; padding: 15px 16px;
                 font-family: var(--plex); font-size: 16.5px; color: var(--gris); }
  .champ .box--h { min-height: 118px; }
  .rgpd { display: flex; gap: 13px; align-items: flex-start; margin-top: 26px;
           font-size: 14.5px; color: var(--gris); line-height: 1.55; }
  .case { width: 19px; height: 19px; border: 1px solid rgba(15,30,51,.4);
           background: #fff; flex: none; margin-top: 3px; }

  .coord { display: flex; flex-direction: column; gap: 22px; }
  .coord > div { display: flex; gap: 16px; align-items: flex-start; }
  .coord b { display: block; font-family: var(--jost); font-weight: 400; font-size: 17px;
              margin-bottom: 3px; }
  .coord p { margin: 0; color: var(--gris); font-size: 16px; }

  /* ------------------------------------------------------------ pied */
  footer { background: var(--bleu); color: var(--ivoire); padding: 76px 0 40px; }
  footer .g4 { gap: 34px; }
  footer h4 { font-family: var(--mono); font-size: 11.5px; letter-spacing: .17em;
               text-transform: uppercase; color: var(--bgris); margin: 0 0 16px;
               font-weight: 400; }
  footer ul { list-style: none; margin: 0; padding: 0; display: flex;
               flex-direction: column; gap: 9px; }
  footer a { color: var(--ivoire); font-size: 15.5px; }
  footer a:hover { color: var(--cuivrecl); }
  footer .sig { font-family: var(--jost); font-size: 13px; letter-spacing: .19em;
                 color: var(--bgris); margin: 0; }
  @media (max-width: 900px) {
    .shell { padding: 0 26px; }
    h1 { font-size: 40px; } h2 { font-size: 30px; }
    .lede { font-size: 18px; }
    .g2, .g3, .g4 { grid-template-columns: 1fr; gap: 22px; }
    .nav { flex-wrap: wrap; gap: 18px; }
    .nav__l { flex-wrap: wrap; gap: 18px; }
    .sec { padding: 56px 0; }
    .etape { grid-template-columns: 1fr; gap: 8px; }
    .form { padding: 30px 24px; }
    .hd__ph, .hd__v { display: none; }
    .hd__a { position: static; width: auto; margin-top: 36px; }
    .hd__t { max-width: none; }
    .duo, .duo--inv, .duo--l { grid-template-columns: 1fr; gap: 28px; }
  }

  .bas { margin-top: 56px; padding-top: 26px; border-top: 1px solid rgba(241,234,220,.16);
          display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap;
          font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
          color: var(--bgris); }

  /* ------------------------------------------- champs réels · 04/10/2026 */
  /* Les règles `.champ .box` ci-dessus dessinaient des div. Celles-ci les
     reprennent pour de vrais champs : même boîte, même typographie, à deux
     choses près — la couleur du texte saisi est celle du texte courant, et
     non le gris du gabarit ; et le champ prend toute la largeur. */
  .champ input.box, .champ textarea.box {
    width: 100%; box-sizing: border-box; display: block;
    -webkit-appearance: none; appearance: none; border-radius: 0;
    font-family: var(--plex); font-size: 16.5px; line-height: 1.5;
    color: var(--bleu); background: #fff;
    border: 1px solid rgba(15,30,51,.22); padding: 15px 16px;
    transition: border-color .14s ease, box-shadow .14s ease; }
  .champ textarea.box { resize: vertical; }
  .champ input.box::placeholder, .champ textarea.box::placeholder {
    color: var(--bgris); }
  .champ input.box:focus, .champ textarea.box:focus {
    outline: none; border-color: var(--cuivre);
    box-shadow: 0 0 0 2px rgba(194,112,63,.16); }
  /* `:user-invalid` ne se déclenche qu'après une saisie ou un envoi refusé :
     un formulaire vierge ne s'affiche jamais en rouge. */
  .champ input.box:user-invalid, .champ textarea.box:user-invalid {
    border-color: #B4472F; box-shadow: 0 0 0 2px rgba(180,71,47,.12); }

  /* La case de consentement : un vrai input, dessiné comme la maquette. */
  label.rgpd { cursor: pointer; }
  input.case { -webkit-appearance: none; appearance: none; border-radius: 0;
    position: relative; cursor: pointer; margin: 3px 0 0; }
  input.case:checked { border-color: var(--cuivre); background: var(--cuivre); }
  input.case:checked::after { content: ""; position: absolute;
    left: 5px; top: 2px; width: 5px; height: 9px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); }
  input.case:focus-visible { outline: 2px solid var(--cuivre); outline-offset: 2px; }
  input.case:user-invalid { border-color: #B4472F; }

  /* Le bouton d'envoi est devenu un <button> : il hérite de .btn, il faut
     seulement neutraliser ce que le navigateur impose aux boutons. */
  button.btn { border: 0; cursor: pointer; font-family: var(--jost);
    font-size: 17px; line-height: 1.1; }
  button.btn[disabled] { opacity: .55; cursor: default; }

  /* Le leurre. Hors écran, hors tabulation, jamais lu par un lecteur d'écran. */
  .leurre { position: absolute !important; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden; }

  /* L'accusé de réception, à la place du bouton une fois l'envoi parti. */
  .form__msg { display: none; margin: 22px 0 0; padding: 14px 17px;
    background: #fff; border-left: 2px solid var(--cuivre);
    font-size: 15px; line-height: 1.55; color: var(--gris); }
  .form__msg--on { display: block; }
  .form__msg--ok { border-left-color: #2E7D5B; }
  .form__msg--ko { border-left-color: #B4472F; }

  /* ------------------------------------------- mobile · v0.6 */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  .nav__cb { position: absolute; opacity: 0; width: 1px; height: 1px;
             margin: 0; pointer-events: none; }
  .nav__burger { display: none; }
  a.tel { white-space: nowrap; }

  /* ------------------------------------------- v1.1 · référencement et lisibilité */
  /* Cuivre foncé pour les petits textes sur fond clair : contraste ≥ 4,5:1
     (le cuivre de marque reste pour les filets, boutons et grands titres). */
  :root { --cuivre-txt: #9E5629; --cuivre-txt-cl: #E8A882; }
  a { color: var(--cuivre-txt); }
  .eyebrow, .etape__q, .carte__lien { color: var(--cuivre-txt); }
  .sec--d .eyebrow, .sec--d .etape__q { color: var(--cuivrecl); }
  .sec--m .eyebrow { color: var(--cuivre-txt-cl); }
  .logos .logo-client small { color: #BFCCDB; }
  .maj { color: var(--cuivre-txt) !important; }
  /* boutons d'action : cuivre un peu plus soutenu, texte blanc lisible (4,8:1) */
  .btn--cl { background: #A85F33; }
  .sec p a:not(.btn), .legal li a { text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 3px; }
  /* Le sur-titre porte désormais le titre principal (h1) de la page : même
     apparence qu'avant, mais c'est lui que lisent les moteurs de recherche. */
  h1.eyebrow { font-weight: 400; line-height: 1.65; text-wrap: wrap; }
  .h1 { font-family: var(--jost); font-weight: 300; font-size: 62px; line-height: 1.05;
        letter-spacing: -.022em; margin: 0 0 26px; text-wrap: balance; }
  footer .footer__t { font-family: var(--mono); font-size: 11.5px; letter-spacing: .17em;
        text-transform: uppercase; color: var(--bgris); margin: 0 0 16px; font-weight: 400; }

  /* ------------------------------------------- v0.6 · retours du 09/10 */
  .nav__logo a { display: block; }
  .justifie { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
  .ref a { font-family: var(--mono); font-size: 13px; letter-spacing: .1em;
           border: 1px solid rgba(241,234,220,.35); color: var(--ivoire);
           padding: 9px 15px; transition: border-color .15s ease, color .15s ease; }
  .ref a::after { content: " ↗"; color: var(--cuivrecl); }
  .ref a:hover { border-color: var(--cuivrecl); color: var(--cuivrecl); }
  .logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
  form.form { margin: 0; }
  .logo-client { min-height: 96px; display: flex; flex-direction: column;
                 align-items: center; justify-content: center; text-align: center;
                 padding: 16px 18px; border: 1px solid rgba(247,243,236,.4);
                 font-family: var(--jost); font-size: 19px; line-height: 1.2;
                 color: var(--ivoire); transition: border-color .15s ease, color .15s ease; }
  .logo-client:hover { border-color: var(--cuivrecl); color: var(--cuivrecl); }
  .logo-client img { max-height: 60px; max-width: 100%; object-fit: contain; }
  .logo-client small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
                       color: var(--bgris); margin-top: 7px; }
  .cadre--photo { aspect-ratio: 16 / 9; box-shadow: 0 18px 40px -24px rgba(15,30,51,.45); }
  .legal { max-width: 860px; }
  .legal h2 { font-size: 26px; margin: 46px 0 14px; }
  .legal h3 { font-size: 19px; margin: 26px 0 8px; }
  .legal p, .legal li { color: var(--gris); font-size: 16.5px; }
  .legal ul { padding-left: 22px; margin: 0 0 16px; }
  .legal li { margin-bottom: 6px; }
  .legal table { width: 100%; border-collapse: collapse; margin: 10px 0 20px;
                 font-size: 15px; }
  .legal th, .legal td { text-align: left; vertical-align: top; padding: 11px 12px;
                         border-bottom: 1px solid var(--trait); color: var(--gris); }
  .legal th { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em;
              text-transform: uppercase; color: var(--bleu); font-weight: 400; }
  .maj { font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
                color: var(--cuivre); }

  @media (max-width: 900px) {
    .nav { position: relative; flex-wrap: wrap; gap: 0; padding: 18px 26px; }
    .nav__logo svg { width: 150px; }
    .nav__burger { display: flex; align-items: center; justify-content: center;
                   width: 46px; height: 46px; margin-left: auto; cursor: pointer;
                   border: 1px solid var(--trait); background: #FCFAF6; }
    .nav__burger span, .nav__burger span::before, .nav__burger span::after {
      display: block; width: 20px; height: 1.5px; background: var(--bleu);
      position: relative; transition: transform .2s ease, background .2s ease; }
    .nav__burger span::before, .nav__burger span::after {
      content: ""; position: absolute; left: 0; }
    .nav__burger span::before { top: -6px; }
    .nav__burger span::after { top: 6px; }
    .nav__cb:checked ~ .nav__burger span { background: transparent; }
    .nav__cb:checked ~ .nav__burger span::before { top: 0; transform: rotate(45deg); }
    .nav__cb:checked ~ .nav__burger span::after { top: 0; transform: rotate(-45deg); }
    .nav__cb:focus-visible ~ .nav__burger { outline: 2px solid var(--cuivre);
                                            outline-offset: 2px; }
    .nav .nav__l { display: none; flex-basis: 100%; flex-direction: column;
                   align-items: stretch; gap: 0; margin-top: 14px;
                   border-top: 1px solid var(--trait); }
    .nav__cb:checked ~ .nav__l { display: flex; }
    .nav .nav__l a { font-size: 17px; padding: 14px 2px;
                     border-bottom: 1px solid var(--trait); }
    .nav .nav__l a.cta { margin-top: 18px; padding: 15px 22px; text-align: center;
                         border-bottom: 0; }

    h1:not(.eyebrow), .h1 { font-size: clamp(34px, 8.6vw, 44px) !important; }
    h2 { font-size: clamp(26px, 6.6vw, 32px) !important; }
    .hd { padding-bottom: 8px; }
    .hd .hd__b { margin-top: 36px; }
    .hd .hd__a { position: static; width: auto; margin-top: 40px; }
    .logos { grid-template-columns: repeat(3, 1fr) !important; }
  }

  @media (max-width: 560px) {
    .shell { padding: 0 20px; }
    .nav { padding: 16px 20px; }
    .sec { padding-top: 48px !important; padding-bottom: 48px !important; }
    .lede { font-size: 17px !important; }
    .eyebrow { font-size: 11.5px; letter-spacing: .14em; margin-bottom: 16px; }
    .rule { margin: 20px 0; }
    .acts { flex-direction: column; align-items: stretch; }
    .acts .btn, button.btn { width: 100%; text-align: center; }
    .carte { padding: 26px 22px; }
    .form { padding: 26px 18px !important; }
    .etape { padding: 20px 0; }
    .faq { padding: 22px 0; }
    .ref b, .ref a { font-size: 12px; padding: 7px 11px; }
    .legal table, .legal tbody, .legal tr, .legal td { display: block; }
    .legal thead { display: none; }
    .legal td { border-bottom: 0; padding: 3px 0; }
    .legal td[data-label]::before { content: attr(data-label); display: block;
      font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
      text-transform: uppercase; color: var(--cuivre); margin-top: 6px; }
    .legal tr { border-bottom: 1px solid var(--trait); padding: 10px 0; }
    .logos { grid-template-columns: 1fr !important; }
    .at span { font-size: 12.5px; }
    footer { padding: 56px 0 32px; }
    .bas { flex-direction: column; gap: 8px; }
  }

  .pg[hidden] { display: none !important; }
  .nav a.on { color: var(--bleu); }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important;
    transition: none !important; } }