/** {
    box-sizing: border-box;
}

body {
    margin: 0;
}*/

/* Bandeau */
.canvas2 {
    background: #f7b500;
    overflow: hidden;
    height: 420px;
    margin: 0 25px;
}

/* Layout principal */
.content {
    display: flex;
    align-items: center;
    height: 420px;
    padding-left: 2%;
    gap: 70px;
}

/* =======================
   IMAGE + DÉCOR
======================= */
.image-decor {
    position: relative;
    display: flex;
    align-items: flex-end; 
    height:100%; /* image alignée en bas */
    
}

    /* Image */
    .image-decor img {
        height: 360px;
        width: auto;
        display: block;
    }

/* Décor attaché à l’image */
.decor {
    position: absolute;
    left: 100%; /* ← décor déplacé à gauche */
    margin-left:-115px;
    top: 0;
    width: 80px;
    height: 100%;
    pointer-events: none;
}

/* Cercles */
.circle {
    position: absolute; /* ← INDISPENSABLE */
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: #000;
    z-index:0;
}

.c1 {
    top: -27.5px;
    background-color:blue;
}

.c2 {
    top: 23%;
    left:90%
}

.c3 {
    top: 50%;
    /*background-color:black;*/
  
}

/* Ligne verticale */
.line {
    position: absolute;
    left: 95%;
    top: 0;
    width: 2px;
    height: 60%;
    background: #e60023;
    transform: translateX(-50%);
}

/* Point rouge */
.dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e60023;
    left: 95%;
    top: 60%; /* même hauteur que la fin de la ligne */
    transform: translate(-50%, -50%);
}

/* =======================
   TEXTE
======================= */
.text-block {
    max-width: 36%;
    color: #000;
}

    .text-block h1 {
        margin: 0 0 16px;
        line-height: 1.2;
        font-weight:bold;
        text-align:left;
    }

    .text-block p {
        margin: 0;
        text-align: left;
    }

/* =======================
   RESPONSIVE
======================= */
@media (max-width: 768px) {
    .content {
        align-items: flex-start; /* ← clé */
        flex-direction: column;
        height: auto;
        /*padding: 24px;*/
        padding-top:24px;
        text-align: center;
    }

    .image-decor img {
        height: 240px;
        margin-bottom:0px;
    }

    .decor {
        position: absolute;
        left: 100%; /* ← juste après l’image */
        margin-left: -38%; /* ← chevauchement contrôlé */
        top: 0;
        width: 80px;
        height: 100%;
        pointer-events: none;
    }

    .text-block {
        position: static; /* on enlève l’absolu / transform */
        margin-top: -60px; /* petit espace sous l’image */
        max-width: 100%;
        text-align: left; /* aligné à gauche */
    }

        .text-block h1 {
            /*white-space: nowrap;*/ /* empêche le texte de passer à la ligne */
            /*overflow: hidden;*/ /* optionnel : cache le dépassement */
            /*text-overflow: ellipsis;*/ /* optionnel : ajoute "..." si trop long */
            font-size: 1.5rem; /* ajuste la taille si nécessaire */
            line-height: 1.1;
        }

            .text-block h1 br {
                display: none;
            }
        .text-block p {
            font-size: 0.9rem; /* texte descriptif plus petit */
        }

    .line {
        top:-25px;
        left: 75%; /* ← décale la ligne à droite */
        transform: translateX(-50%);
        height: 59%;
    }
    .dot {
        top: 46%;
        left: 75%; /* ← décale la ligne à droite */
        transform: translateX(-50%);
    }
    .c1 {
        top: -40px;
    }

    .c2 {
        top: 13%;
    }

    .c3 {
        top: 40%;
    }
    /* Cercles */
    .circle {
        position: absolute; /* ← INDISPENSABLE */
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #000;
    }
    .canvas2 {
        margin : 0 0;
    }
}