.radio-container {
    padding: 12px 12px 12px 24px;
    background: #f8f9fa;
    border-radius: 8px;
}

.radio-container fieldset legend {
    font-size: 18px;
    margin-bottom: 0;
}

/* === Width adjustments for longer labels === */
.scale-btn {
    min-width: 110px;
    height: auto;
    padding: .5rem .75rem;
}

/* Petit rond visuel "radio" */
.scale-btn .radio-dot {
    width: 14px; height: 14px;
    border: 2px solid var(--bs-border-color);
    border-radius: 50%;
    position: relative; display: inline-block;
}
.scale-btn .radio-dot::after {
    content: "";
    position: absolute; inset: 2px;
    border-radius: 50%;
    background: var(--brand-green);
    opacity: 0; transform: scale(.6);
    transition: opacity .15s ease, transform .15s ease;
}

.scale-btn.square {
    min-width: var(--cell);
    height: var(--cell);
}

.scale-btn.wide {
    min-width: 140px;
}

/* Use on Format, Orientation, Face à imprimer */
.scale-btn .label-text {
    white-space: nowrap;
}

/* === Radio groups single line & brand green === */
.scale-options {
    --cell: 75px;
    --brand-green: #57EBAD;
    --brand-green-rgb: 87, 235, 173;
    flex-wrap: wrap;      /* au lieu de nowrap */
    overflow-x: visible;  /* plus de scroll horizontal */
    row-gap: .5rem;       /* petit espace vertical entre lignes */
    display: flex;
    gap: .5rem;
}

.scale-btn {
    width: var(--cell);
    height: var(--cell);
    padding: .25rem .5rem;
    border-radius: .75rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    color: var(--bs-body-color);
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

/* Petites variantes si besoin de largeur pour labels longs */
.scale-btn.wide .label-text { white-space: nowrap; }

.scale-btn .radio-dot {
    width: 14px;
    height: 14px;
    border: 2px solid var(--bs-border-color);
    border-radius: 50%;
    position: relative;
    display: inline-block;
}

.scale-btn .radio-dot::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--brand-green);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .15s ease, transform .15s ease;
}

/* Les radios "larges" : min 140px mais s'étirent selon le texte */
.scale-options .btn-check + .scale-btn.wide{
    width: auto;            /* au lieu de width: var(--cell) */
    min-width: 140px;       /* ta base */
    height: auto;           /* plus de hauteur fixe */
    flex: 0 0 auto;         /* ne rétrécit pas */
    padding: .5rem .75rem;  /* respiration */
}

/* Si un width global persiste ailleurs, on force l’override */
.scale-options .btn-check + .scale-btn.wide{ width: auto !important; }

/* On garde le libellé sur une ligne pour que la carte grandisse en largeur */
.scale-btn.wide .label-text{
    white-space: nowrap;
}

.btn-check:focus + .scale-btn {
    box-shadow: 0 0 0 .25rem rgba(var(--brand-green-rgb), .25);
}

.btn-check:checked + .scale-btn {
    border-color: var(--brand-green);
    background-color: rgba(var(--brand-green-rgb), .08);
    color: var(--bs-body-color);
    outline: 2px solid var(--brand-green);
    box-shadow: 0 0 0 .25rem rgba(87,235,173,.25);
}

.btn-check:checked + .scale-btn .radio-dot {
    border-color: var(--brand-green);
}

.btn-check:checked + .scale-btn .radio-dot::after {
    opacity: 1;
    transform: scale(1);
}

.scale-btn:hover {
    background-color: rgba(0, 0, 0, .03);
}

.btn-check:checked + .scale-btn:hover {
    background-color: rgba(var(--brand-green-rgb), .12);
}

.btn-check:disabled + .scale-btn, .btn-check[disabled] + .scale-btn {
    opacity: .6;
    pointer-events: none;
}

 /* Essences buttons styles */
#opt-essence .btn-check:checked + .scale-btn .label-text {
    border: 2px solid var(--brand-green);
    background: rgba(255, 255, 255, .90);
}
#opt-essence .scale-btn.wide .label-text{
    white-space: nowrap;
    background: rgba(255, 255, 255, .45);
    border-radius: .75rem .75rem 0 0;
    padding-left: 5px;
    padding-right: 5px;
    border: 2px solid rgba(255, 255, 255, .65);
    color: black;
    opacity: 0.9;
}

/* Scale BTN extra label */
/* === Extra label (léger sous-texte dans les boutons d'options) =========== */
.scale-btn[data-extra] {
    position: relative;             /* permet l'absolu interne */
}

/* Affiche le sous-texte sans impacter la hauteur ni la position du dot */
.scale-btn[data-extra]::after {
    content: attr(data-extra);
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: .4rem;                  /* ancré en bas du bouton */
    font-size: .75rem;
    line-height: 1.1;
    color: var(--bs-secondary-color, #6c757d);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;           /* clics toujours gérés par le label */
}

#opt-essence .btn-check:checked + .scale-btn[data-extra]::after {
    border: 2px solid var(--brand-green);
    background: rgba(255, 255, 255, .90);
}

/* Tuiles carrées (ex. Couleur) : on réserve un poil d'espace visuel en bas
   sans changer la hauteur globale (fixe via --cell) */
.scale-btn:not(.wide)[data-extra] {
    padding-bottom: 1.1rem;         /* n’augmente pas la hauteur globale */
}

/* === FIX Essences / Supports : réserver une "étagère" pour l'extra ====== */
#opt-essence .scale-btn.wide[data-extra]{
    padding-bottom: 1.1rem;   /* espace pour le ::after, ajustable 0.9–1.3rem */
    justify-content: flex-start;  /* pousse le contenu vers le haut (flex-direction: column) */
    gap: .25rem;               /* un peu moins d'espace entre dot et label */
}

/* (Optionnel) Si tu veux des hauteurs uniformes sur toutes les cartes wide */
#opt-essence .scale-btn.wide{
    min-height: 72px;          /* ajuste selon ta typo / densité */
}

/* === Essences / Supports : extra-label en pastille blanche =============== */
#opt-essence .scale-btn.wide[data-extra]{
    /* réserve un peu plus d'espace pour la pastille */
    padding-bottom: 1.35rem;
}

#opt-essence .scale-btn.wide[data-extra]::after{
    text-align: center;        /* garde le centrage visuel */

    /* positionnement centré, largeur auto comme le label-text */
    bottom: 0.2rem;
    left: 50%;
    transform: translateX(-50%);
    right: auto;

    display: inline-block;
    max-width: calc(100% - 1.5rem); /* évite de toucher les bords */
    padding: .15rem .4rem;

    /* style “pilule” blanc semi-opaque + texte noir */
    background: rgba(255, 255, 255, .35);
    color: #000;
    border-radius: .75rem;

    /* lisibilité & couche au-dessus du fond */
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    box-shadow: 0 1px 2px rgba(0,0,0,.08); /* optionnel: léger relief */
}



label[for="ess-Contre-plaque-bouleau-1"] {
    background-image: url('/img/essences/1.jpg');
}

label[for="ess-Ch-ne-2"] {
    background-image: url('/img/essences/2.jpg');
}

label[for="ess-Noyer-3"] {
    background-image: url('/img/essences/3.jpg');
}

label[for="ess-Bambou-4"] {
    background-image: url('/img/essences/4.jpg');
}

label[for="ess-Erable-5"] {
    background-image: url('/img/essences/5.jpg');
}

label[for="ess-M-tal-DIBOND-18"] {
    background-image: url('/img/essences/18.jpg');
}

/* Couleur de marque */
:root{
    --brand-green: #57EBAD;
    --brand-green-rgb: 87,235,173;
}

/* Taille/forme de la case (légèrement plus grande + coin doux) */
.form-check-input {
    width: 20px !important;
    height: 20px !important;
    border-radius: .25rem;                 /* carré doux */
    border-color: var(--bs-border-color);
    padding: 2px 2px;
}

/* Couleur au survol (bord) */
.form-check-input:hover {
    border-color: var(--brand-green);
}

/* Focus clavier accessible (halo vert) */
.form-check-input:focus {
    border-color: var(--brand-green);
    box-shadow: 0 0 0 .25rem rgba(var(--brand-green-rgb), .25);
}

/* État coché: fond + bord verts, tick blanc natif Bootstrap */
.form-check-input:checked {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}

/* État disabled (cohérent) */
.form-check-input:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* Cartes cliquables pour Choix du design (ne touche pas .btn-impr) */
.design-card {
    padding-bottom: 1rem;
}
.design-card.nav-link{
    padding: 1.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background-color: var(--bs-body-bg);
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    min-height: 180px;            /* ajuste si besoin pour garder la même taille visuelle */
    display: block;
}
.design-card.nav-link:hover,
.design-card.nav-link:focus{
    border-color: #57EBAD;
    box-shadow: 0 .25rem 1rem rgba(0,0,0,.08), 0 0 0 .25rem rgba(87,235,173,.15);
    text-decoration: none;
}
.design-card.nav-link.active{
    border-color: #57EBAD;
    background-color: rgba(87,235,173,.06);
}
.design-card.active {
    outline: 2px solid var(--brand-green);
    box-shadow: 0 0 0 .25rem rgba(87,235,173,.25);
}

.design-card h4{ line-height: 1.25; }
.design-card p { line-height: 1.4; }


/* === Option groups ===================================================== */
.option-group legend { font-size: 18px; margin-bottom: .25rem; }

/* "Format libre" : alignement propre des champs */
#format-custom-wrap .form-control.is-invalid { border-color: #dc3545; }
#format-custom-wrap .invalid-feedback { display:block; }


/* Affichage du prix */
.price-box .h4, .price-box .h5 { font-variant-numeric: tabular-nums; }
.price-extra-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: .25rem 0; font-size: .95rem;
}
.price-extra-row .extra-amount { font-weight: 600; }
.price-ht {
    color: #6c757d;
    font-size: .675rem;
    position: relative;
    top: 13px;
    left: 60%;
}
#price-unit-ht {
    left: 64%;
}
#price-total-ht.price-ht {
    left: 68%;
}
.price-box hr { opacity: .15; }


.accordion-button:disabled {
    cursor: not-allowed;
}






/* Badge prix (fond vert marque, texte noir lisible) */
.badge-price {
    background-color: var(--brand-green);
    color: #000;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    /*padding-right: 2px;*/
    padding-top: 3px;
    padding-bottom: 2px;
}

/* Mise en forme interne */
.badge-price .price { font-weight: 600; }
.badge-price .info-in-badge {
    line-height: 1;
    display: inline-flex;
    align-items: center;
    padding: 0 .125rem;   /* un peu de largeur pour la zone de clic */
    line-height: 1;       /* évite d'étirer verticalement */
    background: transparent;
    border: 0;
}

/* Icône info en blanc pour un bon contraste dans le vert */
.badge-price .info-in-badge .bi { color: #fff; }

/* Focus visible clavier sur le bouton d’info (a11y) */
.badge-price .info-in-badge:focus {
    outline: none;
    box-shadow: 0 0 0 .15rem rgba(var(--brand-green-rgb), .6);
}

.badge-price .info-in-badge.is-light .bi {
    color: #fff;
    /* léger halo sombre pour renforcer la lisibilité sur fond clair */
    text-shadow: 0 0 .5px rgba(0,0,0,.35);
}

/* icône plus grande + couleur très contrastée sur le vert de fond */
.badge-price .info-in-badge .bi {
    font-size: 1.35em;    /* ajuste librement : 1.2–1.5em fonctionne bien */
    color: #111;          /* bien plus lisible qu’un blanc sur #57EBAD */
    vertical-align: middle;
}

/* micro-feedback au survol (desktop) sans bouger le layout */
@media (hover: hover) and (pointer: fine) {
    .badge-price .info-in-badge:hover .bi { opacity: .75; }
}

/* confort tactile : un poil plus large sans toucher la hauteur */
@media (hover: none) and (pointer: coarse) {
    .badge-price .info-in-badge { padding: 0 .2rem; }
}


/* Cartes de "Choix du design" (plus larges) */
.design-card.scale-btn {
    width: 220px;                   /* ajuste si besoin */
    height: auto;
    padding: .75rem;
    align-items: stretch;
}
.design-card .topline {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem;
}
.design-card .icon {
    font-size: 1.75rem; line-height: 1;
}
.design-card .badges { display: inline-flex; gap: .25rem; flex-wrap: wrap; }