/* -------------------------------------
 -------------- Navbar ---------------
 -------------------------------------*/

.navbar a {
    color: #07498B;
}

.dropdown-item:hover,
.nav-link:hover {
    color: #779ab7;
}

.navbar li {
    width: 150px;
}

.navbar-nav .anim-link .nav-link {
    position: relative;
}

.navbar-nav .anim-link .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 10%;
    width: 0;
    height: 3px;
    background-color: #FF324D !important;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.navbar-nav .anim-link .nav-link.active::after,
.navbar-nav .anim-link .nav-link:hover::after {
    width: 80%;
}

.navbar li {
    width: auto !important;
}

.nav-link {
    width: auto !important;
}

.socials {
    width: 50px;
}

.socials-english {
    width: 120px;
}

.form-language-button {
    border: none !important;
    background: none !important;
    padding: 0;
    margin-top: 0;
    height: 30px;
    text-decoration: none !important;
}

.fmanualop-card .card-header{
    background-color: #dcc4c4;
}

.fmanualop-card {
    background-color: #eee1e1 !important;
}

#div_id_cpformset-0-fmanualopFormSet-0-DELETE,
#div_id_cpformset-0-DELETE {
    display: none !important;
}

li, ul {
    list-style: none;
}

.socials-responsive {
    width: 300px;
}

.text-light {
    font-size: 16px;
    color: #07498B !important;
}

.dropdown-item.active {
    background-color: #e87685 !important;
    color: white !important;
    font-weight: bold;
}


@media (max-width: 991px) {
    .container-socials-nav {
        display: none;
    }

    .logo-navbar {
        width: 150px !important;
    }

    .nav-link {
        width: 100%;
        text-align: center !important;
    }

    .navbar-nav {
        align-items: center !important;
    }

    .navbar-nav .anim-link::after {
        display: none;
    }

}

@media (max-width: 700px) {
    .logo-navbar {
        width: 150px !important;
    }

    .navbar-nav {
        align-items: center !important;
    }

    .nav-link {
        width: 300px;
    }

    .navbar-nav .anim-link::after {
        display: none;
    }

    .no-display-lg {
        display: inline;
        list-style: none;
    }

    .container-socials-nav {
        display: none;
    }
}


/* -------------------------------------
 -------------- Général ---------------
 -------------------------------------*/


.color-white {
    color: #fff;
}

p, a, h1, h2, h3, h4, h5, h6 {
    font-family: "Akshar", serif;
    color: #07498B;
}

.text-deco-none {
    text-decoration: none;
}

/* ✅ ------ Formulaires défaut---------*/

#form .row {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    border-radius: 20px;
    background-color: #e1dad4 !important;
}

#form input {
    width: 100%;
    height: 40px;
}

#form input, #form textarea {
    border-radius: 10px;
    border: solid black; /* Style et couleur */
    border-width: 1px 0 0 1px; /* Haut, Droite, Bas, Gauche */
    padding: 8px 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* -------------------------------------
------ Blocks and page welcome --------
---------------------------------------*/


/*✅ --------- Carousel welcome ------------*/

#carousel img {
    object-fit: cover; /* Ajuste l’image sans déformation */
    height: 600px; /* Ajuste la hauteur du carousel */
    width: 100%; /* Assure une largeur à 100% */
}

.icon-prev, .icon-next {
    height: 40px !important;
}

.carousel-indicators button {
    width: 20px !important;
    height: 20px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-color: darkslategrey !important;
    border: none !important;
    border-radius: 50% !important; /* Forme ronde */
}

.carousel-indicators .active {
    background-color: #FFFFFF !important;
}


@media (max-width: 700px) {
    #carousel img {
        object-fit: cover; /* Ajuste l’image sans déformation */
        height: 250px; /* Ajuste la hauteur du carousel */
        width: 100%; /* Assure une largeur à 100% */
    }
}

/* ✅--------- Cards ------------*/

.row-cards {
    width: 100%;
}

.row-cards-machine-maintenance {
    width: 90%;
}

#e-service p,
#card-e-boutique p,
#create-and-look p,
#machine-maintenance p {
    font-size: 20px;
}

.bg-color-eServices {
    background-color: #FBE5D2 !important;
}

.bg-color-glossary {
    background-color: #FEF4D6 !important;
}

.bg-knitting-models,
#bg-knitting-models {
    background-color: #FADB72 !important;
}

.bg-stitch-techniques,
#bg-stitch-techniques {
    background-color: #FAEDC0 !important;
}

.bg-swatches,
#bg-swatches {
    background-color: #FEF9E6 !important;
}

.bg-who-are-we {
    background-color: #E6E6E6;
}

.bg-machine-maintenance,
#machine-maintenance {
    background-color: #D3F1DF;
}

.bg-create-and-look,
#create-and-look {
    background-color: #D3F1DF;
}

#e-service {
    background-color: #FBE5D2;
}

.card-container-e-service {
    background-color: #FBE5D2;
}

.card-container-e-boutique {
    background-color: #FFFFFF;
}

.bg-what-about,
.card-container-What-about {
    background-color: #B5C8DC;
}

.card-container-dual-cards {
    background-color: #D3F1DF;
}

.bg-who-are-we {
    background-color: #FDE3DF;
}

.bg-container-use-softKnit21,
.card-container-use-softKnit21 {
    background-color: #FDE3DF;
}


.card-container-use-softKnit21,
.card-container-repair,
.row-cards-machine-maintenance,
.card-container-to-identify,
.row-cards,
.card-container-What-about,
.card-container-dual-cards,
.row-cards-seamstress,
.card-container-e-boutique,
.card-container-e-service,
.card-container,
.card-container-text,
.centrage-col {
    margin-right: auto;
    margin-left: auto;
}

.card-top {
    margin-top: 120px !important;
}

.card-top-2 {
    margin-top: 80px !important;
}

.card-container-use-softKnit21,
.card-container-What-about,
.card-container-dual-cards,
.card-container-e-boutique,
.card-container-e-service,
.card-container {
    height: 450px;
    width: 500px;
    margin-top: 20px;
    border-radius: 40px;
}

.index {
    z-index: 300 !important;
}

.card-container-repair {
    height: 400px;
    width: 400px;
    margin-top: 20px;
    border-radius: 40px;
    margin-bottom: 20px;
}

.card-container-to-identify {
    height: 300px;
    width: 400px;
    margin-top: 20px;
    border-radius: 40px;
    margin-bottom: 30px;
}

.card-container-text {
    width: 450px;
    height: 450px;
    margin-top: 50px;
}

.card-container-text-slider-red {
    width: 450px;
    height: 450px;
    margin-top: 50px;
}


.card-container-use-softKnit21,
.card-container-e-boutique,
.card-container {
    padding: 20px;
}


.title-card {
    font-size: 25px;
    text-align: center;
    margin-top: 20px;
}

.title-card-2 {
    color: #0DB14B;
    font-size: 30px;
    text-align: center;
    margin-top: 20px;
}

.title-card-slide {
    color: #FFFFFF;
    font-size: 30px;
    text-align: center;
    margin-top: 20px;
    max-width: 320px;
}

.text-card-2,
.text-card {
    text-align: center;
    font-weight: 100 !important;
    font-size: 20px;
}

.container-button-card-slide-red {
    max-width: 320px;
}

.text-card-2 {
    color: #07498B;
}

.title-e-service {
    margin-top: -20px
}

@media (max-width: 700px) {
    #content-dual-cards {
        margin-top: 50px;
    }

    .row-cards-seamstress {
        max-width: 100%;
        margin-bottom: 50px;
        margin-right: auto;
        margin-left: auto;
    }

    .card-one {
        margin: 0;
    }

    .card-one-container {
        height: 350px !important;
        margin-top: 0 !important;
    }

    .card-container-repair,
    .card-container-to-identify {
        height: 300px;
        width: 300px;
        margin-right: auto;
        margin-left: auto;
    }

    .row-cards-e-boutique-slider,
    .row-cards-knitting-slide {
        min-width: 100% !important;
    }

}

/* ✅--------- Boutons ------------*/


.btn {
    line-height: normal;
}


.custom-btn-e-boutique,
.custom-btn-what-about,
.custom-btn-ressources,
.custom-btn-slider,
.custom-btn-secondary,
.custom-btn-primary,
.custom-btn-warning,
.custom-btn-success,
.custom-btn-danger {
    border-radius: 8px;
    align-items: center !important;
}

.custom-btn-danger {
    background-color: #F25655;
}

.custom-btn-ressources {
    background-color: #0DB14B;
    margin-top: 20px;
}

.custom-btn-secondary {
    background-color: #F37160 !important;
    margin-top: 25px;
}

.custom-btn-secondary:hover {
    background-color: #e54834 !important;
    color: #fff;
}

.custom-btn-warning {
    margin-top: 5px;
    background-color: #FAC934;
    color: #FFFFFF;
}

.custom-btn-warning:hover {
    margin-top: 5px;
    background-color: #faab34;
    color: #FFFFFF;
}

.custom-btn-success {
    margin-top: 0;
    background-color: #D1B7A5;
    color: #FFFFFF;
}

.custom-btn-e-boutique {
    margin-top: 5px;
    background-color: #07498B;
    color: #FFFFFF;
}

.custom-btn-slider {
    margin-top: 40px;
    background-color: #FFFFFF;
    color: #F37160;
}

.custom-btn-what-about {
    color: #235099;
    background-color: #FFFFFF;
    margin-top: 60px;
}

.custom-btn-footer {
    background-color: #33B540 !important;
    color: #FFF !important;
    height: 35px;
    padding: 5px 25px 5px 25px;
    border-radius: 5px;
    font-family: "Akshar", serif;
    align-items: center;
    width: 150px;
}

/* ✅--------- Slider red ------------*/

.container-slider {
    height: 350px;
    width: 100%;
}

.slider-background {
    height: 370px;
    width: 100%;
    top: -10px;
    position: relative;
    z-index: 100;
}

#Slider {
    margin-top: 50px;
    height: 350px;
}

.img-slider {
    width: 532px;
    margin-top: -160px;
    margin-left: auto;
    margin-right: auto;
}

.img-slider-e-boutique,
.img-slider-more-ideas {
    width: 450px;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
}


.img-slider-how-about {
    width: 380px;
}

.img-slider-e-services {
    width: 450px;
}

.img-slider-glossary {
    width: 350px;
}


.content-image-red {
    max-width: 750px;
}

.row-cards-seamstress-more-ideas {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 400px;
    justify-content: center;
}

@media (max-width: 991px) {
    .img-slider {
        margin-left: auto;
        margin-right: auto;
        margin-top: -10px;
    }

    .img-slider-more-ideas {
        width: 450px;
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
    }

    #Slider,
    .container-slider,
    .slider-background {
        height: 650px !important;
    }

    #Slider {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 700px) {

    .img-card {
        width: 300px !important;
    }

    .img-slider {
        width: 330px !important;
    }

    .hidden {
        display: none;
    }

    #Slider {
        margin-top: 50px;
        min-height: 350px;
    }

    #Slider {
        height: 200px !important;
        width: 100%;
    }

    #Slider.row-cards {
        height: 420px;
    }

    #Slider,
    .container-slider,
    .slider-background {
        height: 580px !important;
    }
}

/*---------------------------------
  ------------- Footer ------------
  --------------------------------*/

#myFooter {
    background-color: #235099;
    color: white;
    padding-top: 30px;
}

#myFooter .footer-copyright {
    background-color: #235099;
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center;
}

#myFooter .footer-copyright p {
    margin: 10px;
    color: #ccc;
}

#myFooter ul {
    list-style-type: none;
    padding-left: 0;
    line-height: 1.7;
}

#myFooter h5 {
    font-size: 18px;
    color: white;
    font-weight: bold;
    margin-top: 30px;
}

#myFooter a {
    color: #d2d1d1;
    text-decoration: none;
}

#myFooter a:hover, #myFooter a:focus {
    text-decoration: none;
    color: white;
}

#myFooter .social-networks {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 16px;
}

#myFooter .social-networks a {
    font-size: 32px;
    color: #f9f9f9;
    padding: 10px;
    transition: 0.2s;
}

#myFooter .social-networks a:hover {
    text-decoration: none;
}

#myFooter .facebook:hover {
    color: #0077e2;
}

@media screen and (max-width: 767px) {
    #myFooter {
        text-align: center;
    }
}

/*-------------------------------------------------
------- e-boutique.html, knitting.html ---------
-------------------------------------------------*/


/* ✅-------- Slider over html -----------*/

.bg-e-services,
#slider-background-e-services {
    background: #FBE5D2;
}

#slider-machine-maintenance {
    background: #D3F1DF;
}

.bg-create-and-look,
#slider-create-and-look {
    background: #FEF4D6;
}

#slider-use-softKnit21 {
    background: #FDE3DF;
}

.bg-e-boutique,
.container-slider-e-boutique {
    background-color: #E7E9F2;
}

.container-machine-maintenance,
.container-e-services,
.container-slider-knitting,
.container-create-or-look,
.container-slider-e-boutique {
    min-height: 350px;
    width: 100%;
}


.row-card-identify,
.row-cards-knitting,
.row-cards-e-boutique {
    max-width: 90%;
}

.row-machine-maintenance,
.row-e-services,
.row-create-or-look {
    width: 80%;
}


.row-machine-maintenance {
    width: 60%;
}

.row-card-identify,
.row-machine-maintenance,
.row-e-services,
.row-create-or-look,
.row-cards-e-boutique-slider,
.row-cards-knitting-slide,
.row-cards-knitting,
.row-cards,
.row-cards-e-boutique {
    margin-right: auto;
    margin-left: auto;
}

.row-cards-e-boutique-slider,
.row-cards-knitting-slide {
    max-width: 60%;
}


#slider-create-and-look,
#Slider-knitting,
#Slider-e-boutique {
    min-height: 350px;
}


#slider-create-and-look img {
    margin-top: 30px;
}

#Slider-e-boutique img {
    margin-top: 30px;
}


#slider-create-and-look,
#Slider-knitting img {
    margin-top: 30px;
}

.card-container-text-e-services,
.card-container-text-machine-maintenance,
.card-container-text-create-or-look,
.card-container-text-knitting,
.card-container-text-e-boutique {
    min-height: 380px;
}

.card-container-text-machine-maintenance,
.card-container-text-e-services,
.card-container-text-create-or-look {
    width: auto;
}

.title-card-create-or-look,
.title-card-e-services,
.title-card-machine-maintenance,
.title-card-knitting,
.title-card-e-boutique {
    text-align: center;
    margin-top: 20px;
    font-weight: normal;
}

.title-card-glossary {
    text-align: left;
    margin-top: 20px;
    font-weight: normal;
}

@media (max-width: 1024px) {
    .row-cards-knitting,
    .row-cards-e-boutique {
        max-width: 100%;
    }
}

@media (max-width: 900px) {
    .row-machine-maintenance,
    .row-e-services,
    .row-create-or-look,
    .row-cards-e-boutique-slider,
    .row-cards-knitting-slide,
    .row-cards-knitting,
    .row-cards-knitting,
    .row-cards-e-boutique {
        width: 100%;
    }

    .title-card-knitting,
    .title-card-e-boutique {
        text-align: center;
        font-size: 25px !important;
    }

    .title-card-glossary,
    .title-card-machine-maintenance,
    .title-card-e-services,
    .title-card-create-or-look,
    .card-container-text-knitting,
    .card-container-text-e-boutique {
        min-height: 250px;
    }

    .container-machine-maintenance {
        margin-top: 20px;
    }
}

/* ✅-------- cards e-boutique and card knitting and Create-and-look -----------*/

#create-and-look {
    background: #FEF4D6;
}

.bg-pink {
    background: #FDE3DF;
}

.card-text,
.card-knitting-text,
.card-knitting,
.card-e-boutique-text,
.card-e-boutique {
    margin: 60px 0 60px 0;
    width: 400px;
    min-height: 350px;
}

.card-more-ideas-l {
    margin: 60px 0 60px 0;
    min-width: 80%;
    width: 600px;
    min-height: 250px;
    border-radius: 20px;
}

.card-invite-your-friends {
    padding: 40px 20px;
    border-radius: 20px;
}

.bg-white {
    background: #FFFFFF !important;
}

.card-text,
.card-knitting-text,
.card-e-boutique-text {
    text-align: justify;
    background-color: transparent;
    border: none;
}

.card-container-small,
.card-knitting,
.card-e-boutique {
    border-radius: 20px;
    min-height: 350px
}

.cover {
    width: 100%; /* L'image prend toute la largeur du parent */
    height: 350px; /* L'image prend toute la hauteur du parent */
    object-fit: cover; /* Coupe l'image pour remplir la div sans déformation */
    border-radius: 20px;
}

.row-contact-knitting {
    width: 95%;
    padding: 20px;
}

.contact-knitting .btn {
    min-width: 180px !important;
}


.content-text-photo-kits,
.content-text-get-help {
    width: 50%;
    margin-bottom: -40px !important;
}


.content-text-get-help {
    margin-left: 50%;
}

.content-text-photo-kits {
    margin-right: 50%;
}


@media (max-width: 700px) {
    .card-knitting-text,
    .card-knitting,
    .card-e-boutique-text,
    .card-text,
    .card-e-boutique {
        margin: 30px 0 30px 0;
    }

    .content-text-photo-kits {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    .card-more-ideas-l {
        margin: 60px 0 60px 0;
        min-width: 80%;
        width: 360px;
        min-height: 300px;
    }

    .card-form-row {
        width: 99% !important;
    }

    .card-form-all {
        width: 99% !important;
    }
}

/* ✅------------------- browse_St --------------------*/

.card-form-row {
    min-width: 600px;
}

.card-form-all {
    width: 100%;
}

.form-check-input {
    max-width: 10px !important;
    height: 10px !important;
}

/* ✅--------------- create_book_St --------------------*/

#id_with_STPhotos_and_GPs.checkboxinput {
    max-width: 10px !important;
    height: 10px;
    border-radius: 1px;
}


/* ============================================================
   📱 Responsive Design global pour #form-book et ses sous-éléments
   ============================================================ */

/* ✅ Conteneur principal : plus fluide */
#form-book {
    padding: 0 1rem;
    width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ✅ Formulaire centré et adaptatif */
#form-book #swatchForm,
#form-book #st-global-form {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

#form-book #swatchForm,
#form-book .fmanualop-card {
    background-color: #e1dad4 !important;
}

/* ✅ Cards : marges et transitions */
#form-book #swatchForm .card,
#form-book #st-global-form .card {
    margin-bottom: 1.25rem;
    transition: all 0.2s ease-in-out;
    width: 100%;
}


.swatchForm,
.createBookSt-form {
    border-radius: 10px;
    background-color: #e1dad4 !important;
    width: 600px;
}

.bg-all-card-body,
.bg-all-card .card,
.display-STsPks,
.createBookSt-header {
    border-radius: 10px;
    background-color: #e1dad4 !important;
}

.bg-all-card-body {
    background-color: #e1dad4 !important;
}


/* ✅ Survol doux sur desktop */
@media (hover: hover) {
    #form-book #st-global-form .card:hover {
        transform: translateY(-2px);
    }
}

/* ✅ Titres compacts sur petits écrans */
@media (max-width: 576px) {
    #form-book #st-global-form .card-header {
        font-size: 0.95rem;
        padding: 0.5rem 0.75rem;
        text-align: center;
    }
}

/* ✅ Boutons adaptatifs */
#form-book #st-global-form button.btn {
    font-weight: 500;
    white-space: normal; /* empêche les débordements de texte */
}

@media (max-width: 768px) {
    #form-book #st-global-form button.btn {
        width: 100%;
        margin-top: 0.4rem;
    }
}

/* ✅ Accordéons */
#form-book .cp-form .accordion-button {
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
    word-break: break-word;
}

/* ✅ Sous-formulaires FManualOp */
#form-book .fmanualop-formset {
    margin-top: 1rem;
}

#form-book .fmanualop .btn-remove-fop {
    width: 100%;
}

/* ✅ Boutons d’ajout espacés */
#form-book .btn-add-fop,
#form-book #btn-add-cp {
    min-width: 180px;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    #form-book .btn-add-fop,
    #form-book #btn-add-cp {
        width: 100%;
    }
}

/* ✅ SVG wrapper responsive */
#form-book .svg-wrapper {
    display: block;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    text-align: center;
    background: #f8f9fa;
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    max-width: 100%;
}

#form-book .svg-wrapper svg {
    width: 100%;
    height: auto;
    max-height: 80vh;
    display: block;
}

/* ✅ Hover sur les éléments SVG */
#form-book .svg-wrapper rect:hover {
    stroke: #000;
    stroke-width: 1.5;
    cursor: pointer;
}

/* ✅ Actions finales */
#form-book #card-actions .card-footer {
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 576px) {
    #form-book #card-actions .card-footer button {
        width: 100%;
    }
}

/* ✅ Modal SVG : plein écran mobile */
@media (max-width: 768px) {
    #form-book #svgModal .modal-dialog {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    #form-book #svgModal .modal-content {
        border-radius: 0;
        height: 100vh;
    }

    #form-book #svgModal .modal-body {
        padding: 0.5rem 0.75rem;
        overflow-y: auto;
    }

    #card-yarns input {
        max-width: 350px !important;
    }
}

/* ✅ Inputs readonly */
#form-book input[readonly],
#form-book select[readonly] {
    pointer-events: none;
    opacity: 0.85;
    transition: opacity 0.2s ease-in-out;
}

#form-book input[readonly]:focus,
#form-book select[readonly]:focus {
    outline: none;
    box-shadow: none;
}

/* ✅ Labels de rails (SVG) */
#form-book .bed-label {
    font-size: 10px;
    fill: #666;
    font-family: monospace;
}

/* suppression de pass_order_number du form avec les différents ID */
[id^="div_id_cpformset-"][id$="-pass_order_number"] {
    display: none !important;
}

/* ==============================
   🧩 Ajustements visuels généraux
   ============================== */

/* Améliore le rendu des cartes sur petits écrans */
@media (max-width: 992px) {
    .swatchForm,
    .createBookSt-form {
        border-radius: 10px;
        background-color: #e1dad4 !important;
        width: 370px !important;
    }

    #form-book .createBookSt-form {
        box-shadow: none;
        border-radius: 0.5rem;
        width: 370px !important;
    }

    #form-book input,
    #form-book select {
        width: 95% !important;
    }

    #manualOpCard .card-body,
    #form-book .card-body {
        width: 360px !important;
    }

    #form-book {
        width: 360px !important;
    }

    #cp-accordion {
        width: 340px;
    }

    .fmanualop-formset select,
    .fmanualop-formset input {
        max-width: 80% !important;
    }

    .button-width-sm {
        width: 80% !important;
        margin-right: auto;
        margin-left: auto;
    }
}


/* Éviter débordement du texte long */
#form-book label,
#form-book .form-control,
#form-book select {
    word-break: break-word;
}


/* Ajuste l’espacement interne */
#form-book .card-body {
    padding: 1rem;
    margin-left: auto;
    margin-right: auto;
    width: 500px;
}

#manualOpCard .card-body {
    padding: 1rem;
    margin-left: auto;
    margin-right: auto;
    width: 400px;
}

#card-yarns select,
#card-yarns input {
    width: 100% !important;
}


/* Uniformise le rendu SVG + modale */
#svgModal .svg-wrapper {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
}

#svg-bed-config-inline {
    width: 100%;
    height: 320px; /* ou 40vh */
    display: block;
}

.card-body-yarns div {
    max-width: 99% !important;
}