/* ═══════════════════════════════════════════════════════════════════
   STYLES PROPRES A DEMARRER.html
   ───────────────────────────────────────────────────────────────────
   Ces regles etaient ecrites dans la page. Sorties ici pour etre
   trouvables : 15 Ko de CSS noye dans du HTML ne se relit pas.

   ⚠️ LA POSITION DU <link> DANS LA PAGE EST SIGNIFIANTE. Cette feuille
   est chargee AVANT mobile.css, exactement comme l etaient les blocs
   d origine. Deplacer le lien change qui gagne dans la cascade.
   ═══════════════════════════════════════════════════════════════════ */

/* ── bloc 1/1 de demarrer.html ── */
* { box-sizing: border-box; }
    /* Le degrade beige qui habillait le fond a ete retire : la page est
       blanche de bord a bord, et ce degrade ne se voyait plus que dans la barre
       de defilement et sous le rebond elastique des navigateurs mobiles. */
    body {
      background: #fff;
      -webkit-font-smoothing: antialiased;
    }

    /* ── PAGE LAYOUT ── */
    .cpage {
      display: grid;
      grid-template-columns: 400px 1fr;
      min-height: 100vh;
    }

    /* ══════════════════════════
       LEFT PANEL — dark
    ══════════════════════════ */
    .cpage__left {
      background:
        radial-gradient(130% 90% at 0% 0%, #2f3134 0%, #242628 52%, #1f2124 100%);
      color: #fff;
      padding: 104px 46px 48px;
      position: sticky;
      top: 0;
      height: 100vh;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      border-right: 1px solid rgba(255,255,255,.05);
    }
    .cpage__left::-webkit-scrollbar { width: 0; }
    /* Les regles du <h1> ont ete retirees : il a quitte la colonne de gauche
       pour coiffer les deux colonnes, et n'a plus d'`<em>` a colorer. */

    /* Stats row */

    /* Process */

    /* Direct contact */
    .cl-contact {
      margin-top: auto;
      padding: 14px 16px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 3px;
    }
    .cl-contact__label {
      font-size: .62rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #4c4b49;
      margin-bottom: 8px;
    }
    .cl-contact a {
      color: #d0cac1;
      text-decoration: none;
      font-size: .81rem;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: color .15s;
    }
    .cl-contact a:hover { color: #b41824; }

    /* ══════════════════════════
       RIGHT PANEL — form
    ══════════════════════════ */
    .cpage__right {
      padding: 72px 56px 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .cform-wrap {
      width: 100%;
      max-width: 580px;
    }

    /* Step indicator */
    .csteps {
      display: flex;
      align-items: flex-start;
      margin-bottom: 36px;
    }
    .csdot {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7px;
    }
    .csdot__circle {
      width: 38px; height: 38px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid #e6e1d8;
      color: #d0cac1;
      font-size: .82rem; font-weight: 600;
      display: flex; align-items: center; justify-content: center;
      transition: all .3s cubic-bezier(.4,0,.2,1);
    }
    .csdot.active .csdot__circle {
      background: linear-gradient(135deg, #d72331, #b41824);
      border-color: #b41824;
      color: #fff;
      box-shadow: 0 0 0 5px rgba(180, 24, 36,.12), 0 6px 16px rgba(180, 24, 36,.3);
      transform: scale(1.08);
    }
    .csdot.done .csdot__circle {
      background: linear-gradient(135deg, #d72331, #b41824);
      border-color: #b41824;
      color: #fff;
    }
    .csdot.done .csdot__circle::after {
      content: '';
      width: 5px; height: 9px;
      border: 2.5px solid #fff;
      border-top: none; border-left: none;
      transform: rotate(45deg) translate(-1px,-1px);
      display: block;
    }
    .csdot__lbl {
      font-size: .62rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: #d5d0c8;
      white-space: nowrap;
      transition: color .25s;
    }
    .csdot.active .csdot__lbl,
    .csdot.done .csdot__lbl { color: #b41824; }

    .csline {
      flex: 1;
      height: 3px;
      border-radius: 2px;
      background: #e6e1d8;
      margin: 17px 8px 0;
      overflow: hidden;
      position: relative;
    }
    .csline::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, #d72331, #b41824);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .4s cubic-bezier(.4,0,.2,1);
    }
    .csline.done::after { transform: scaleX(1); }

    /* Card */
    .cform-card {
      background: #fff;
      border-radius: 5px;
      border: 1px solid rgba(36, 38, 40,.06);
      box-shadow:
        0 1px 2px rgba(36, 38, 40,.04),
        0 24px 56px -16px rgba(36, 38, 40,.22);
      overflow: hidden;
    }

    .cform-body {
      padding: 38px 42px 30px;
    }

    .cform-step { display: none; }
    .cform-step.active {
      display: block;
      animation: cstepIn .4s cubic-bezier(.4,0,.2,1) both;
    }
    @keyframes cstepIn {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: none; }
    }

    .cform-step h3 {
      font-size: 1.4rem;
      font-weight: 600;
      letter-spacing: -.02em;
      color: #242628;
      margin-bottom: 6px;
    }
    .cform-step .csub {
      font-size: .87rem;
      color: #6e6b66;
      margin-bottom: 26px;
      line-height: 1.55;
    }

    /* Service cards */
    .csvc-grid {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .csvc-card {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 18px 20px;
      border: 1.5px solid #e6e1d8;
      border-radius: 4px;
      cursor: pointer;
      transition: border-color .2s, background .2s, box-shadow .2s, transform .2s;
      position: relative;
      background: #fff;
    }
    .csvc-card input { position: absolute; opacity: 0; pointer-events: none; }
    .csvc-card:hover {
      border-color: #e3a0a5;
      background: #fffafa;
      transform: translateY(-2px);
      box-shadow: 0 10px 24px -8px rgba(180, 24, 36,.18);
    }
    .csvc-card.sel {
      border-color: #b41824;
      background: #fcf5f5;
      box-shadow: 0 0 0 3px rgba(180, 24, 36,.1);
    }
    .csvc-icon {
      width: 46px; height: 46px;
      background: #f0ede7;
      border-radius: 3px;
      display: flex; align-items: center; justify-content: center;
      color: #a6a19a;
      flex-shrink: 0;
      transition: background .2s, color .2s, transform .2s;
    }
    .csvc-icon svg { width: 21px; height: 21px; }
    .csvc-card.sel .csvc-icon {
      background: linear-gradient(135deg, #d72331, #b41824);
      color: #fff;
      transform: scale(1.05);
    }
    .csvc-txt { flex: 1; min-width: 0; }
    .csvc-txt strong {
      display: block;
      font-size: .96rem;
      font-weight: 600;
      color: #242628;
      margin-bottom: 2px;
    }
    .csvc-txt span {
      font-size: .8rem;
      color: #a6a19a;
      display: block;
    }
    .csvc-chk {
      width: 22px; height: 22px;
      border-radius: 50%;
      border: 2px solid #e6e1d8;
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      transition: all .2s;
    }
    .csvc-card.sel .csvc-chk {
      background: #b41824;
      border-color: #b41824;
    }
    .csvc-card.sel .csvc-chk::after {
      content: '';
      width: 4px; height: 7px;
      border: 2px solid #fff;
      border-top: none; border-left: none;
      transform: rotate(45deg) translate(-1px,-1px);
      display: block;
    }

    /* Fields */
    .cfield { margin-bottom: 18px; }
    .cfield label {
      display: block;
      font-size: .82rem;
      font-weight: 600;
      color: #4c4b49;
      margin-bottom: 7px;
    }
    .cfield label .req { color: #b41824; margin-left: 2px; }
    .cfield input, .cfield select, .cfield textarea {
      width: 100%;
      padding: 13px 16px;
      border: 1.5px solid #e6e1d8;
      border-radius: 3px;
      font-size: .9rem;
      font-family: inherit;
      color: #242628;
      background: #faf8f5;
      transition: border-color .18s, box-shadow .18s, background .18s;
    }
    .cfield input::placeholder, .cfield textarea::placeholder { color: #b5afa7; }
    .cfield input:hover, .cfield select:hover, .cfield textarea:hover { border-color: #d0cac1; }
    .cfield input:focus, .cfield select:focus, .cfield textarea:focus {
      outline: none;
      background: #fff;
      border-color: #b41824;
      box-shadow: 0 0 0 4px rgba(180, 24, 36,.1);
    }
    .cfield textarea { resize: none; line-height: 1.65; }
    .cerr {
      font-size: .74rem;
      color: #d72331;
      margin-top: 4px;
      display: none;
    }
    .cerr.show { display: block; }
    .cfield-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    /* Desc hints */
    .cdesc-hint {
      background: linear-gradient(135deg, #fff7f7 0%, #faf8f5 100%);
      border: 1px solid #fde2e2;
      border-radius: 3px;
      padding: 14px 18px;
      margin-bottom: 16px;
    }
    .cdesc-hint p {
      font-size: .76rem;
      font-weight: 500;
      color: #413f3c;
      margin: 0 0 5px;
    }
    .cdesc-hint ul {
      margin: 0;
      padding-left: 16px;
      font-size: .74rem;
      color: #6e6b66;
      line-height: 1.75;
    }

    /* Account toggle */
    .ctoggle {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 18px 20px;
      background: linear-gradient(135deg, #fcf5f5 0%, #fbeff0 100%);
      border: 1.5px solid #eec9cc;
      border-radius: 4px;
      cursor: pointer;
      user-select: none;
      margin-bottom: 18px;
      transition: background .18s, border-color .18s, box-shadow .18s;
    }
    .ctoggle:hover { background: #f5dbdd; box-shadow: 0 6px 18px -8px rgba(180, 24, 36,.3); }
    .ctoggle-track {
      width: 46px; height: 24px; border-radius: 3px;
      background: #b41824; flex-shrink: 0; position: relative;
      transition: background .2s;
    }
    .ctoggle-track.off { background: #d5d0c8; }
    .ctoggle-thumb {
      width: 18px; height: 18px; border-radius: 50%;
      background: #fff; position: absolute; top: 3px; left: 25px;
      transition: left .2s;
      box-shadow: 0 1px 4px rgba(0,0,0,.2);
    }
    .ctoggle-thumb.off { left: 3px; }
    .ctoggle-txt strong {
      display: block;
      font-size: .86rem;
      font-weight: 600;
      color: #242628;
      margin-bottom: 1px;
    }
    .ctoggle-txt span { font-size: .74rem; color: #6e6b66; }

    /* Footer */
    .cform-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 20px 42px;
      border-top: 1px solid #ece8e1;
      background: #fcfaf7;
    }
    .cbtn-prev {
      background: transparent;
      border: 1.5px solid #e6e1d8;
      padding: 12px 24px;
      border-radius: 4px;
      font-size: .86rem;
      font-weight: 500;
      cursor: pointer;
      color: #5c5a56;
      font-family: inherit;
      transition: border-color .18s, color .18s, background .18s;
    }
    .cbtn-prev:hover { border-color: #a6a19a; color: #242628; background: #f0ede7; }
    .cform-footer #nextBtn {
      padding: 13px 30px;
      font-size: .9rem;
      font-weight: 600;
      border-radius: 4px;
      box-shadow: 0 8px 22px -6px rgba(180, 24, 36,.5);
    }
    .cform-footer #nextBtn:hover { transform: translateY(-1px); }
    .cform-footer #nextBtn:disabled { opacity: .65; cursor: default; transform: none; }

    /* Success */
    .csuccess {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 56px 40px;
    }
    .csuccess.active { display: flex; animation: cstepIn .5s cubic-bezier(.4,0,.2,1) both; }
    .csuccess__ico {
      width: 84px; height: 84px;
      background: linear-gradient(135deg, #f5dbdd, #fbeff0);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 22px;
      color: #b41824;
      box-shadow: 0 0 0 8px rgba(180, 24, 36,.06);
    }
    .csuccess h3 { font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px; }
    .csuccess p {
      font-size: .87rem; color: #6e6b66;
      max-width: 320px; line-height: 1.6; margin-bottom: 28px;
    }

    /* ── MOBILE ── */
    @media (max-width: 900px) {
      /* `1fr` vaut `minmax(auto, 1fr)` : la colonne ne descend jamais sous la
         largeur mini de son contenu. Sur un écran de 320px, le formulaire la
         poussait à 333 et débordait de l'écran. `minmax(0, 1fr)` autorise la
         colonne à se réduire — c'est alors au contenu de s'adapter, ce qu'il
         fait. */
      .cpage { grid-template-columns: minmax(0, 1fr); }
      .cform-wrap { min-width: 0; }
      .cpage__left {
        position: static;
        height: auto;
        padding: 96px 24px 36px;
      }
      .cl-contact { margin-top: 24px; }
      .cpage__right { padding: 28px 16px 64px; }
      .cform-body { padding: 24px 20px 20px; }
      .cform-footer { padding: 14px 20px; }
      .cfield-row { grid-template-columns: 1fr; gap: 0; }
    }
    @media (max-width: 500px) {
      .csvc-grid { grid-template-columns: 1fr; }
      .csdot__lbl { display: none; }
      .csline { margin-top: 17px; }
    }

    /* ══════════════════════════════════════════════════════════════════════
       REPRISE DU MODELE FOURNI — LA PAGE PASSE EN CLAIR
       ──────────────────────────────────────────────────────────────────────
       La page opposait un panneau SOMBRE a gauche et une carte ombree a
       droite. Le modele est entierement clair : un titre centre au-dessus des
       deux colonnes, un simple FILET VERTICAL entre elles, et des champs plats
       a bord fin.

       ⚠️ Ce bloc est en FIN de feuille et s'appuie sur l'ordre de la cascade
       pour l'emporter sur les regles d'origine, qui sont conservees au-dessus.
       Les supprimer aurait demande de demeler le degrade, les ombres, les
       hauteurs collantes et la douzaine de valeurs qui en dependent ; ici,
       chaque propriete reprise est remise a plat explicitement — d'ou les
       `background: none` et `box-shadow: none` qui peuvent paraitre inutiles.

       ⚠️ Les gris sont NEUTRES (#171717, #6b7280, #e5e7eb) comme dans le
       modele, et non les gris chauds du site.
       ══════════════════════════════════════════════════════════════════════ */
    .cpage {
      --cp-trait: #e5e7eb;
      --cp-titre: #171717;
      --cp-gris: #6b7280;
      --cp-texte: #374151;

      display: block;
      min-height: 100vh;
      background: #fff;
      padding: 118px 32px 72px;
    }

    /* ── Le titre, au-dessus des deux colonnes ───────────────────────────── */
    .cpage__tete {
      max-width: 1120px;
      margin: 0 auto 46px;
      text-align: center;
    }

    .cpage__tete h1 {
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(2.4rem, 6vw, 4.2rem);
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -.035em;
      color: var(--cp-titre);
      text-wrap: balance;
    }

    /* ── Les deux colonnes ───────────────────────────────────────────────── */
    .cpage__cols {
      max-width: 1120px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
      gap: 0;
      align-items: start;
    }

    /* ⚠️ Le filet separateur est porte par la COLONNE DE GAUCHE, en
       `border-right`. Un troisieme element entre les deux colonnes aurait
       demande une grille a trois pistes, et un `border-left` sur la colonne de
       droite se serait retrouve sous le formulaire une fois les colonnes
       empilees au telephone — la ou un `border-right` se neutralise d'une
       ligne. */
    .cpage__left {
      background: none;
      color: var(--cp-texte);
      padding: 6px 54px 0 0;
      position: static;
      height: auto;
      overflow: visible;
      border-right: 1px solid var(--cp-trait);
      border-bottom: 0;
      display: flex;
      flex-direction: column;
    }

    .cl-intro {
      margin: 0 0 30px;
      font-size: .92rem;
      line-height: 1.65;
      color: var(--cp-texte);
      max-width: 34ch;
    }

    /* ── La liste cochee ─────────────────────────────────────────────────── */
    .cl-points {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .cl-points li {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      font-size: .9rem;
      line-height: 1.5;
      color: var(--cp-texte);
    }

    .cl-points strong {
      font-weight: 600;
      color: var(--cp-titre);
    }

    /* Trait fin et gris : dans le modele la coche accompagne la ligne, elle ne
       la signale pas. Une coche pleine et coloree tirerait l'oeil six fois de
       suite, au detriment du formulaire qui est le but de la page. */
    .cl-ok {
      flex: none;
      margin-top: .18em;
      color: #9ca3af;
    }

    /* ── Contact, en bas de colonne ──────────────────────────────────────── */
    .cl-contact {
      margin-top: 40px;
      padding-top: 24px;
      border-top: 1px solid var(--cp-trait);
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .cl-contact__label {
      margin: 0 0 4px;
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #9ca3af;
    }

    .cl-contact a {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-size: .88rem;
      font-weight: 500;
      color: var(--cp-texte);
      text-decoration: none;
      transition: color .2s var(--ease);
    }

    .cl-contact a:hover,
    .cl-contact a:focus-visible {
      color: var(--red);
    }

    /* ── La colonne du formulaire ────────────────────────────────────────── */
    .cpage__right {
      padding: 0 0 0 54px;
      display: block;
    }

    .cform-wrap {
      max-width: none;
    }

    /* La carte perd son fond, son filet et son ombre : dans le modele, le
       formulaire est pose a meme la page. */
    .cform-card {
      background: none;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      overflow: visible;
    }

    .cform-body {
      padding: 0;
    }

    /* ── Les champs ──────────────────────────────────────────────────────── */
    .cfield {
      margin-bottom: 20px;
    }

    .cfield label {
      font-size: .82rem;
      font-weight: 500;
      color: var(--cp-titre);
      margin-bottom: 7px;
    }

    .cfield input,
    .cfield select,
    .cfield textarea {
      padding: 12px 14px;
      border: 1px solid var(--cp-trait);
      border-radius: 6px;
      font-size: .9rem;
      color: var(--cp-titre);
      background: #fff;
    }

    .cfield input::placeholder,
    .cfield textarea::placeholder {
      color: #9ca3af;
    }

    .cfield input:hover,
    .cfield select:hover,
    .cfield textarea:hover {
      border-color: #d1d5db;
    }

    /* ⚠️ Le halo de focus RESTE rouge. Le modele n'en montre aucun, mais un
       champ sans etat de focus visible est infranchissable au clavier — et
       c'est la seule chose de cette page qu'on ne peut pas troquer contre de
       l'apparence. Le rouge de marque sur blanc donne 6,78:1. */
    .cfield input:focus,
    .cfield select:focus,
    .cfield textarea:focus {
      background: #fff;
      border-color: var(--red);
      box-shadow: 0 0 0 3px rgba(180, 24, 36, .12);
    }

    /* ── Le pied du formulaire ───────────────────────────────────────────── */
    .cform-footer {
      border-top: 1px solid var(--cp-trait);
    }

    /* ⚠️ La mention de collecte est PERMANENTE, comme dans le modele, et non
       reservee a la derniere etape : elle informe sur ce que devient la saisie,
       donc elle doit etre lisible AVANT qu'on saisisse quoi que ce soit. */
    .cform-legal {
      margin: 18px 0 0;
      font-size: .74rem;
      line-height: 1.6;
      color: var(--cp-gris);
    }

    .cform-legal a {
      color: var(--cp-gris);
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .cform-legal a:hover,
    .cform-legal a:focus-visible {
      color: var(--red);
    }

    /* ── Telephone ───────────────────────────────────────────────────────── */
    @media (max-width: 900px) {
      .cpage {
        padding: 96px 20px 56px;
      }

      .cpage__cols {
        grid-template-columns: minmax(0, 1fr);
      }

      /* Empilees, les colonnes n'ont plus de cote a cote a separer : le filet
         passe du flanc au dessous. */
      .cpage__left {
        padding: 0 0 32px;
        border-right: 0;
        border-bottom: 1px solid var(--cp-trait);
        margin-bottom: 32px;
      }

      .cpage__right {
        padding: 0;
      }

      .cl-intro {
        max-width: none;
      }
    }

    /* ══════════════════════════════════════════════════════════════════════
       LE CONTENU DES ETAPES, AU MEME REGIME
       ──────────────────────────────────────────────────────────────────────
       La mise en page et les champs avaient ete repris, pas ce qu'il y a
       DEDANS : cartes de service, jalons d'etape, encadre de conseils,
       interrupteur de compte et pied de formulaire portaient encore l'ancien
       dessin — ivoire chaud, degrades rouges, halos colores et soulevements au
       survol.

       ⚠️ LE ROUGE EST CONSERVE, mais A PLAT. Il ne signale plus que trois
       choses : l'etape ou l'on est, l'option choisie, et le bouton qui fait
       avancer. Tout le reste passe au gris neutre. Ce qui a ete retire, ce ne
       sont pas les couleurs mais les EFFETS : quatre degrades, cinq ombres
       colorees et deux soulevements, qui donnaient a chaque element l'air
       d'etre le plus important de la page.
       ══════════════════════════════════════════════════════════════════════ */

    /* ── Les jalons d'etape ──────────────────────────────────────────────── */
    .csteps {
      margin-bottom: 34px;
    }

    .csdot__circle {
      width: 32px;
      height: 32px;
      border: 1px solid var(--cp-trait);
      background: #fff;
      color: #9ca3af;
      font-size: .78rem;
      box-shadow: none;
    }

    .csdot.active .csdot__circle {
      background: var(--red);
      border-color: var(--red);
      color: #fff;
      /* Ni halo ni agrandissement : le remplissage suffit a dire ou l'on est,
         et une pastille qui grossit decale les deux traits qui l'encadrent. */
      box-shadow: none;
      transform: none;
    }

    .csdot.done .csdot__circle {
      background: #fff;
      border-color: var(--red);
      color: var(--red);
    }

    /* La coche remplacait le numero sur les etapes franchies. Le numero est
       plus utile : il dit LAQUELLE on a franchie, et donc ou l'on revient en
       cliquant. */
    .csdot.done .csdot__circle::after {
      content: none;
    }

    .csdot__lbl {
      font-size: .62rem;
      color: #9ca3af;
    }

    .csdot.active .csdot__lbl,
    .csdot.done .csdot__lbl {
      color: var(--cp-titre);
    }

    .csline {
      height: 1px;
      border-radius: 0;
      background: var(--cp-trait);
      margin: 16px 10px 0;
    }

    .csline::after {
      background: var(--red);
    }

    /* ── Titre et sous-titre d'etape ─────────────────────────────────────── */
    .cform-step h3 {
      font-family: var(--font-display);
      font-size: 1.28rem;
      font-weight: 600;
      letter-spacing: -.02em;
      color: var(--cp-titre);
      margin-bottom: 5px;
    }

    .cform-step .csub {
      font-size: .87rem;
      color: var(--cp-gris);
      margin-bottom: 24px;
    }

    /* ── Les cartes de service ───────────────────────────────────────────── */
    .csvc-grid {
      gap: 10px;
    }

    .csvc-card {
      gap: 14px;
      padding: 15px 16px;
      border: 1px solid var(--cp-trait);
      border-radius: 6px;
      background: #fff;
      box-shadow: none;
      transition: border-color .2s var(--ease), background-color .2s var(--ease);
    }

    /* Le survol ne SOULEVE plus. Ces trois cartes sont des boutons radio : une
       carte qui bouge sous le doigt donne l'impression qu'on l'a deja choisie,
       alors que le choix ne se marque qu'au clic. */
    .csvc-card:hover {
      border-color: #d1d5db;
      background: #fafafa;
      transform: none;
      box-shadow: none;
    }

    .csvc-card.sel {
      border-color: var(--red);
      background: #fff;
      box-shadow: none;
    }

    .csvc-icon {
      width: 40px;
      height: 40px;
      border-radius: 6px;
      background: #f3f4f6;
      color: #6b7280;
      transition: background-color .2s var(--ease), color .2s var(--ease);
    }

    .csvc-icon svg {
      width: 19px;
      height: 19px;
    }

    .csvc-card.sel .csvc-icon {
      background: var(--red);
      color: #fff;
      transform: none;
    }

    .csvc-txt strong {
      font-size: .93rem;
      color: var(--cp-titre);
    }

    .csvc-txt span {
      font-size: .79rem;
      color: var(--cp-gris);
    }

    .csvc-chk {
      width: 20px;
      height: 20px;
      border: 1px solid #d1d5db;
    }

    .csvc-card.sel .csvc-chk {
      background: var(--red);
      border-color: var(--red);
    }

    /* ⚠️ Le focus clavier est pose sur la CARTE, pas sur la case radio : celle-ci
       est en `opacity: 0` et son contour serait invisible. Sans cette regle, on
       parcourt les trois options au clavier sans voir laquelle est atteinte. */
    .csvc-card:focus-within {
      border-color: var(--red);
      box-shadow: 0 0 0 3px rgba(180, 24, 36, .12);
    }

    /* ── L'encadre de conseils ───────────────────────────────────────────── */
    .cdesc-hint {
      background: #f9fafb;
      border: 1px solid var(--cp-trait);
      border-radius: 6px;
      padding: 14px 16px;
      margin-bottom: 18px;
    }

    .cdesc-hint p {
      font-size: .78rem;
      font-weight: 600;
      color: var(--cp-titre);
    }

    .cdesc-hint ul {
      font-size: .76rem;
      color: var(--cp-gris);
    }

    /* ── L'interrupteur de creation de compte ────────────────────────────── */
    .ctoggle {
      padding: 14px 16px;
      border: 1px solid var(--cp-trait);
      border-radius: 6px;
      background: #f9fafb;
      box-shadow: none;
    }

    .ctoggle:hover {
      background: #f3f4f6;
      box-shadow: none;
    }

    .ctoggle-track.off {
      background: #d1d5db;
    }

    .ctoggle-txt strong {
      color: var(--cp-titre);
    }

    .ctoggle-txt span {
      color: var(--cp-gris);
    }

    /* ── Le pied du formulaire ───────────────────────────────────────────── */
    .cform-footer {
      padding: 20px 0 0;
      /* Le pied avait son propre fond ivoire et ses 42px de retrait, herites de
         la carte ombree ou il vivait. Le formulaire n'a plus de carte : il ne
         reste que le filet. */
      background: none;
    }

    .cbtn-prev {
      border: 1px solid var(--cp-trait);
      border-radius: 6px;
      padding: 11px 20px;
      color: var(--cp-gris);
      font-weight: 500;
    }

    .cbtn-prev:hover {
      border-color: #d1d5db;
      background: #f9fafb;
      color: var(--cp-titre);
    }

    .cform-footer #nextBtn {
      border-radius: var(--r-btn);
      padding: 12px 26px;
      /* L'ombre rouge portee sous le bouton le faisait flotter au-dessus d'une
         page qui n'a plus une seule ombre. */
      box-shadow: none;
    }

    .cform-footer #nextBtn:hover {
      transform: none;
      box-shadow: none;
    }

    /* ── L'ecran de confirmation ─────────────────────────────────────────── */
    .csuccess__ico {
      width: 66px;
      height: 66px;
      background: #f3f4f6;
      color: var(--red);
      box-shadow: none;
    }

    .csuccess h3 {
      font-family: var(--font-display);
      color: var(--cp-titre);
    }

    .csuccess p {
      color: var(--cp-gris);
    }