/**
 * DealRacks Configurateur — CSS v1.1.3
 *
 * v1.1.3 (FIX SPÉCIFICITÉ — calque sur preview validée même intégré au thème) :
 *   - TOUS les sélecteurs préfixés par #drcfg-form pour battre la spécificité du thème
 *   - Règles globales préfixées (#drcfg-form + sélecteur) → l'emportent sur les CSS
 *     du thème landing/Bricks qui pourraient écraser nos overrides
 *   - Helper CP raccourci (intégré dans le template)
 *   - Padding header configurateur réduit (cohérence avec preview)
 *
 * v1.1.2 :
 *   - Header "Livraison & installation" aligné sur style label
 *   - "+ Ajouter un besoin" enrichi avec cercle "+" orange
 *   - Hover state sur sim-mode non-actif
 *   - Chips récap mode mètres dans encart beige
 *   - Focus accessible élargi
 *
 * Structure :
 *   1. Tokens design
 *   2. Compacité header
 *   3. Cohérence typo
 *   4. Erreurs (field + global)
 *   5. Label "(optionnel)"
 *   6. Bloc prix étape 2
 *   7. CTA states + loading
 *   8. Animations
 *   9. Toggle modes (hover)
 *  10. "+ Ajouter un besoin"
 *  11. Espacement Accessoires/Livraison
 *  12. Lien guide accessoires
 *  13. Zone Livraison & installation
 *  14. Bloc Code postal
 *  15. Mode mètres + chips récap
 *  16. Focus accessible
 *  17. Responsive
 */


/* ═══════════════════════════════════════════════════════════════
   1. TOKENS DESIGN
   ═══════════════════════════════════════════════════════════════ */
:root {
    --o:  #ff4800;
    --oh: #c93700;
    --ol: rgba(255, 72, 0, .05);
    --ob: rgba(255, 72, 0, .10);
    --d:  #0f172a;
    --t:  #1f1f1f;
    --ts: #555;
    --tm: #6b7280;
    --bg:  #fff;
    --bg2: #f8f5ee;
    --bl: #ececea;
    --bd: #e4e4e0;
    --r:  #d93025;
    --rr: rgba(217, 48, 37, .06);
    --ok:  #16a34a;
    --okl: #ecfdf5;
    --rd:  12px;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --font-body:    'Satoshi', system-ui, -apple-system, sans-serif;
    --font-display: 'Clash Display', 'Satoshi', system-ui, sans-serif;
}


/* ═══════════════════════════════════════════════════════════════
   2. COMPACITÉ — header configurateur (gagne ~6px)
   ═══════════════════════════════════════════════════════════════ */
#drcfg-form .sim-h {
    padding: 13px 22px;
}


/* ═══════════════════════════════════════════════════════════════
   3. COHÉRENCE TYPO (Satoshi forcée sur tout le configurateur)
   ═══════════════════════════════════════════════════════════════ */
#drcfg-form,
#drcfg-form *,
#drcfg-form *::before,
#drcfg-form *::after {
    font-family: var(--font-body);
}

#drcfg-form .sim-h h3,
#drcfg-form .sim-h h3 strong,
#drcfg-form .price-val {
    font-family: var(--font-display);
    letter-spacing: -.005em;
}

#drcfg-form input,
#drcfg-form select,
#drcfg-form textarea,
#drcfg-form button {
    font-family: var(--font-body);
}


/* ═══════════════════════════════════════════════════════════════
   4. ERREURS (field-level + globale)
   ═══════════════════════════════════════════════════════════════ */
#drcfg-form .drcfg-global-error {
    color: var(--r);
    font-size: .82rem;
    font-weight: 600;
    text-align: center;
    margin-top: 8px;
    min-height: 20px;
}

#drcfg-form .fi.has-error {
    border-color: var(--r) !important;
    box-shadow: 0 0 0 3px var(--rr) !important;
}

#drcfg-form .field-error {
    display: none;
    font-size: .72rem;
    color: var(--r);
    margin-top: 4px;
    font-weight: 600;
}

#drcfg-form .field-error.visible {
    display: block;
}


/* ═══════════════════════════════════════════════════════════════
   5. LABEL "(optionnel)"
   ═══════════════════════════════════════════════════════════════ */
#drcfg-form .lbl-opt {
    font-weight: 400;
    color: var(--tm);
    text-transform: none;
    font-size: .7rem;
    letter-spacing: 0;
    margin-left: 2px;
}


/* ═══════════════════════════════════════════════════════════════
   6. BLOC PRIX ÉTAPE 2 — fond clair
   ═══════════════════════════════════════════════════════════════ */
#drcfg-form .price-box.drcfg-price-light {
    background: var(--bg2);
    border: 1px solid var(--bd);
    color: var(--d);
}

#drcfg-form .price-box.drcfg-price-light .price-row {
    padding: 6px 0;
}

#drcfg-form .price-box.drcfg-price-light .price-row + .price-row {
    border-top: 1px solid rgba(15, 23, 42, .06);
}

#drcfg-form .price-box.drcfg-price-light .price-row-main {
    padding: 10px 0;
}

#drcfg-form .price-box.drcfg-price-light .price-lbl {
    color: var(--ts);
    font-size: .85rem;
}

#drcfg-form .price-box.drcfg-price-light .price-old {
    color: var(--tm);
    text-decoration: line-through;
}

#drcfg-form .price-box.drcfg-price-light .price-row-main .price-lbl {
    color: var(--d);
    font-weight: 600;
    font-size: .92rem;
}

#drcfg-form .price-box.drcfg-price-light .price-val {
    color: var(--o);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.7rem;
    letter-spacing: -.01em;
}

#drcfg-form .price-box.drcfg-price-light .price-eco {
    color: var(--ok);
    font-weight: 700;
    background: var(--okl);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: .88rem;
}

/* D3 (v1.3.0) — Bloc économie saillante (gradient + montant gros + pill %) */
#drcfg-form .price-box.drcfg-price-light .price-row-eco {
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    margin: 12px -20px -18px;
    padding: 14px 20px 16px;
    border-top: 2px solid var(--ok);
    border-radius: 0 0 var(--rd) var(--rd);
}

#drcfg-form .price-box.drcfg-price-light .price-lbl-eco {
    color: var(--ok);
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#drcfg-form .price-box.drcfg-price-light .price-lbl-eco svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

#drcfg-form .price-box.drcfg-price-light .price-eco-amount {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
}

#drcfg-form .price-box.drcfg-price-light .price-eco-num {
    font-family: var(--font-display);
    color: var(--ok);
    font-weight: 800;
    font-size: 1.9rem;
    letter-spacing: -.01em;
    line-height: 1;
}

#drcfg-form .price-box.drcfg-price-light .price-eco-pct {
    background: var(--ok);
    color: #fff;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: .92rem;
    line-height: 1;
}

#drcfg-form .price-box.drcfg-price-light .price-row-eco .price-note {
    color: rgba(15, 23, 42, .55);
    font-size: .72rem;
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(22, 163, 74, .15);
}

#drcfg-form .price-box.drcfg-price-light .price-note {
    color: var(--tm);
    font-size: .72rem;
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(15, 23, 42, .06);
}


/* ═══════════════════════════════════════════════════════════════
   7. CTA STATES + LOADING TEXT
   ═══════════════════════════════════════════════════════════════ */
#drcfg-form .sim-cta {
    position: relative;
}

#drcfg-form .sim-cta.is-loading {
    pointer-events: none;
    opacity: .9;
}

#drcfg-form .sim-cta.is-loading .cta-label {
    opacity: 0;
}

#drcfg-form .sim-cta.is-loading .cta-loading-msg {
    display: flex;
}

#drcfg-form .sim-cta.is-loading .cta-spinner {
    display: block;
}

#drcfg-form .sim-cta.is-success {
    pointer-events: none;
    background: var(--ok);
}

#drcfg-form .sim-cta.is-success .cta-label,
#drcfg-form .sim-cta.is-success .cta-loading-msg {
    opacity: 0;
}

#drcfg-form .sim-cta.is-success .cta-check {
    display: flex;
}

#drcfg-form .cta-loading-msg {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding-left: 36px;
    font-weight: 600;
    font-size: .92rem;
    color: #fff;
}

#drcfg-form .cta-spinner {
    display: none;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 2.5px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: drcfg-spin .6s linear infinite;
}

#drcfg-form .cta-check {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .92rem;
    gap: 8px;
    color: #fff;
}


/* ═══════════════════════════════════════════════════════════════
   8. ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes drcfg-spin {
    to { transform: rotate(360deg); }
}

@keyframes drcfg-price-reveal {
    from { opacity: 0; transform: scale(.95); }
    to   { opacity: 1; transform: none; }
}

#drcfg-form .price-box.revealed {
    animation: drcfg-price-reveal .5s var(--ease) both;
}


/* ═══════════════════════════════════════════════════════════════
   9. TOGGLE MODES — hover state
   ═══════════════════════════════════════════════════════════════ */
#drcfg-form .sim-mode:hover:not(.active) {
    border-color: rgba(255, 72, 0, .3);
    background: rgba(255, 72, 0, .015);
}


/* ═══════════════════════════════════════════════════════════════
  10. "+ AJOUTER UN BESOIN" — avec cercle "+" orange
   ═══════════════════════════════════════════════════════════════ */
#drcfg-form .sim-add {
    background: none;
    border: none;
    color: var(--o);
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    padding: 6px 0;
    margin: 4px 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .2s var(--ease);
}

#drcfg-form .sim-add:hover {
    text-decoration: underline;
    gap: 10px;
    background: transparent;
}

#drcfg-form .sim-add::before {
    content: '+';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ol);
    color: var(--o);
    font-weight: 800;
    font-size: .9rem;
    line-height: 1;
}


/* ═══════════════════════════════════════════════════════════════
  11. ACCESSOIRES — marges réduites + espacement avant Livraison
   ═══════════════════════════════════════════════════════════════ */
#drcfg-form .sim-acc {
    margin-bottom: 18px;
}

#drcfg-form .sim-acc + .sim-livraison {
    margin-top: 0;
}

/* v1.3.1 — Marges accessoires resserrées (gain ~55px sur bloc ouvert)
   Touch target conservé : input 36px + padding 6px = 48px ≥ 44px (WCAG 2.1) */
#drcfg-form .sim-acc summary {
    padding: 9px 14px !important;
}

#drcfg-form .sim-acc .sim-acc-grid {
    padding: 6px 12px 8px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

#drcfg-form .sim-acc-item {
    padding: 6px 12px !important;
    margin: 0 !important;
    background: #fff !important;
    border: 1px solid var(--bd) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#drcfg-form .sim-acc-item .acc-nm {
    flex: 1;
    font-size: .9rem;
    color: var(--d);
    font-weight: 500;
}

/* Champ qty compact (au lieu de 68×58 par défaut) */
#drcfg-form .sim-acc-item input[type="number"],
#drcfg-form .sim-acc-item .drcfg-acc-qty {
    width: 56px !important;
    height: 36px !important;
    min-height: 0 !important;
    padding: 0 8px !important;
    text-align: center !important;
    font-size: .9rem !important;
    border: 1px solid var(--bd) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    background: #fff !important;
}


/* ═══════════════════════════════════════════════════════════════
  12. LIEN "CONSULTER LE GUIDE ACCESSOIRES"
  (override des styles bouton blanc + bordure dashed du thème)
   ═══════════════════════════════════════════════════════════════ */
#drcfg-form .sim-guide {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 72, 0, .12);
}

#drcfg-form .sim-guide-link,
#drcfg-form .sim-guide a.sim-guide-link {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    text-align: left;

    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--o);
    font-weight: 600;
    font-size: .88rem;
    text-decoration: none;
    transition: gap .2s var(--ease);
}

#drcfg-form .sim-guide-link:hover {
    gap: 10px;
    text-decoration: underline;
    background: transparent !important;
}

#drcfg-form .sim-guide-link svg {
    transition: transform .2s var(--ease);
    flex-shrink: 0;
}

#drcfg-form .sim-guide-link:hover svg {
    transform: translateX(2px);
}


/* ═══════════════════════════════════════════════════════════════
  13. ZONE LIVRAISON & INSTALLATION
   ═══════════════════════════════════════════════════════════════ */
#drcfg-form .sim-livraison {
    margin-bottom: 18px;
}

/* Header aligné sur style label (Satoshi uppercase, cohérent) */
#drcfg-form .sim-livraison-h {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ts);
    margin: 0 0 12px;
}

#drcfg-form .sim-livraison-h svg {
    color: var(--o);
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

/* Cards Livraison + Montage — grid 2 cols */
#drcfg-form .sim-livraison-opts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

#drcfg-form .sim-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border: 1.5px solid var(--bd);
    border-radius: var(--rd);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s var(--ease), background .15s var(--ease);
}

#drcfg-form .sim-option:hover {
    border-color: rgba(255, 72, 0, .4);
}

#drcfg-form .sim-option input[type="checkbox"] {
    accent-color: var(--o);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
}

#drcfg-form .sim-option-title {
    font-weight: 700;
    color: var(--d);
    font-size: .92rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

#drcfg-form .sim-option-title svg {
    color: var(--o);
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

#drcfg-form .sim-option:has(input:checked) {
    border-color: var(--o);
    background: rgba(255, 72, 0, .04);
}


/* ═══════════════════════════════════════════════════════════════
  14. BLOC CODE POSTAL — caché par défaut, apparaît si Livraison/Montage cochés
   ═══════════════════════════════════════════════════════════════ */
#drcfg-form .sim-cp-block {
    display: none;
    grid-template-columns: 200px 1fr;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    background: var(--bg2);
    border-radius: var(--rd);
    border: 1px solid var(--bd);
    animation: drcfg-cp-reveal .25s var(--ease) both;
}

#drcfg-form .sim-cp-block.is-active {
    display: grid;
}

@keyframes drcfg-cp-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

#drcfg-form .sim-cp-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#drcfg-form .sim-cp-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ts);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

#drcfg-form .sim-cp-label svg {
    color: var(--o);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

#drcfg-form .sim-cp-input {
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .08em;
}

#drcfg-form .sim-cp-helper {
    font-size: .8rem;
    color: var(--ts);
    line-height: 1.5;
    margin: 0;
}

#drcfg-form .sim-cp-helper strong {
    color: var(--d);
    font-weight: 600;
}

/* Espace avant le CTA "Calculer mon prix" */
#drcfg-form .sim-livraison + .sim-next {
    margin-top: 18px;
}


/* ═══════════════════════════════════════════════════════════════
  15. MODE "JE CONNAIS MES MÈTRES" — fix flex-direction + chips
   (bug rendu staging — label "Mètres à équiper" était mis à côté
    de l'input "10 m" au lieu d'être au-dessus)
   ═══════════════════════════════════════════════════════════════ */
#drcfg-form .lin-metres-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 14px;
}

#drcfg-form .lin-metres-wrap label {
    margin: 0;
}

#drcfg-form .lin-metres-input {
    width: 100%;
    max-width: 200px;
}

/* Récap chips dans encart beige */
#drcfg-form .lin-recap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 18px;
    padding: 12px 14px;
    background: var(--bg2);
    border: 1px solid var(--bd);
    border-radius: var(--rd);
}

#drcfg-form .lin-recap-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 5px 12px;
    background: #fff;
    border: 1px solid var(--bd);
    border-radius: 100px;
    font-size: .82rem;
    color: var(--d);
    line-height: 1.3;
}

#drcfg-form .lin-recap-chip .rv {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--o);
    font-size: .92rem;
}

#drcfg-form .lin-recap-chip .rl {
    color: var(--tm);
    font-weight: 500;
    font-size: .76rem;
}


/* ═══════════════════════════════════════════════════════════════
  15bis. CHECKBOX RGPD — texte aéré + lien orange souligné
   ═══════════════════════════════════════════════════════════════ */
#drcfg-form .sim-rgpd-label {
    display: flex !important;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
    font-size: .82rem;
    color: var(--ts);
    line-height: 1.5;
}

#drcfg-form .sim-rgpd-label input[type="checkbox"] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    accent-color: var(--o);
    flex-shrink: 0;
    cursor: pointer;
}

#drcfg-form .sim-rgpd-label a {
    color: var(--o) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    font-weight: 600 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

#drcfg-form .sim-rgpd-label a:hover {
    color: var(--oh) !important;
}


/* ═══════════════════════════════════════════════════════════════
  16. FOCUS ACCESSIBLE (a11y)
   ═══════════════════════════════════════════════════════════════ */
#drcfg-form .fi:focus-visible {
    outline: none;
    border-color: var(--o);
    box-shadow: 0 0 0 3px var(--ol);
}

#drcfg-form .sim-mode:focus-visible,
#drcfg-form .sim-option:focus-visible,
#drcfg-form .sim-add:focus-visible,
#drcfg-form .sim-guide-link:focus-visible,
#drcfg-form .sim-acc summary:focus-visible {
    outline: 2px solid var(--o);
    outline-offset: 2px;
    border-radius: 4px;
}

#drcfg-form .sim-cta:focus-visible,
#drcfg-form .sim-next:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(255, 72, 0, .25);
}


/* ═══════════════════════════════════════════════════════════════
  16bis. STEPPER — labels abrégés (D5 — v1.3.0)
   ═══════════════════════════════════════════════════════════════ */
#drcfg-form .sim-step-dot {
    position: relative;
}

#drcfg-form .sim-step-label {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    color: var(--tm);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-left: 8px;
    vertical-align: middle;
    line-height: 1;
}

#drcfg-form .sim-step-dot.active .sim-step-label {
    color: var(--o);
}


/* ═══════════════════════════════════════════════════════════════
  16ter. CONFIG-BLOCK — aération verticale + champs plus compacts (v1.3.2)
   - gap vertical entre rangées (.fr-2/.fr-1) augmenté
   - hauteur des inputs/selects réduite (~44px touch target conservé)
   - label/input mieux espacé
   ═══════════════════════════════════════════════════════════════ */
#drcfg-form .config-block .fr-2,
#drcfg-form .config-block .fr-1,
#drcfg-form #drcfg-panel-linear .fr-2,
#drcfg-form #drcfg-panel-linear .fr-1 {
    margin-bottom: 14px !important;
}

#drcfg-form .config-block .fr-2:last-child,
#drcfg-form .config-block .fr-1:last-child,
#drcfg-form #drcfg-panel-linear .fr-2:last-child,
#drcfg-form #drcfg-panel-linear .fr-1:last-child {
    margin-bottom: 6px !important;
}

#drcfg-form .config-block .ff label,
#drcfg-form #drcfg-panel-linear .ff label {
    margin-bottom: 7px !important;
    display: block;
}

/* Champs config plus compacts (44px touch target conservé) */
#drcfg-form .config-block .fi,
#drcfg-form #drcfg-panel-linear .fi:not(.sim-cp-input):not(#drcfg-metres) {
    height: 44px !important;
    min-height: 0 !important;
    padding: 0 14px !important;
    font-size: .92rem !important;
    line-height: 1.2 !important;
}

#drcfg-form .config-block select.fi,
#drcfg-form #drcfg-panel-linear select.fi {
    padding-right: 32px !important;
}


/* ═══════════════════════════════════════════════════════════════
  17. RESPONSIVE — mobile (≤ 600px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

    #drcfg-form .price-box.drcfg-price-light .price-val {
        font-size: 1.45rem;
    }

    /* D3 mobile — économie saillante adaptée */
    #drcfg-form .price-box.drcfg-price-light .price-eco-num {
        font-size: 1.55rem;
    }

    #drcfg-form .price-box.drcfg-price-light .price-eco-pct {
        font-size: .82rem;
        padding: 3px 8px;
    }

    /* D5 mobile — labels stepper plus compacts */
    #drcfg-form .sim-step-label {
        font-size: .66rem;
        margin-left: 6px;
    }

    #drcfg-form .cta-loading-msg {
        font-size: .88rem;
        padding-left: 32px;
    }

    /* Options Livraison/Montage en stack 1 col */
    #drcfg-form .sim-livraison-opts {
        grid-template-columns: 1fr;
    }

    /* Bloc Code postal centré et empilé */
    #drcfg-form .sim-cp-block {
        grid-template-columns: 1fr;
        gap: 12px;
        text-align: center;
    }

    #drcfg-form .sim-cp-field {
        max-width: 220px;
        margin: 0 auto;
    }

    #drcfg-form .sim-cp-label {
        justify-content: center;
    }

    #drcfg-form .sim-cp-helper {
        font-size: .82rem;
    }

    /* Mode mètres : full width sur mobile */
    #drcfg-form .lin-metres-input {
        max-width: 100%;
    }
}