/* =====================================================
   HERO GREEN
   > 1000px  : mise en page deux colonnes (maquette)
   <= 1000px : colonne unique
               surtitre, titre, image, description, boutons
   ===================================================== */

/* ================= Base (> 1000px) ================= */
.hero-container {
    position: relative;
    overflow: hidden;
    background: #062E12;
    padding: 120px 1.5rem 50px;
}

.hero-content {
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* ---------- Colonne gauche ---------- */
.hero-left {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 2rem;
    padding-top: 60px;
}

.hero_left_subtitle {
    display: flex;
    align-items: center;
    gap: 1em;
}

.hero-trait {
    flex: none;
    width: 20px;
    height: 2px;
    background: #F0B95A;
}

.hero-left-subtitle-text {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 11.5px;
    line-height: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #F0B95A;
}

.hero-left-title-text {
    margin: 0;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(2.6rem, 5.2vw, 5.29rem);
    line-height: 0.95;
    letter-spacing: -0.017em;
    color: #FAF6EE;
}

.hero-left-title-text em {
    color: #F0B95A;
    font-style: italic;
}

.hero-description {
    max-width: 450px;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 17px;
    line-height: 30px;
    color: rgba(250, 246, 238, 0.78);
}

.hero-description strong {
    font-weight: bold;
    color: #FFFFFF;
}

.hero-left-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
}

.hero-left-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 51px;
    padding: 0 32px;
    background: #DD8F1E;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 14.7px;
    color: #062E12;
    text-decoration: none;
    transition: background-color .3s, box-shadow .3s;
}

.hero-left-btn:hover {
    background: #F0B95A;
    box-shadow: 0 10px 25px rgba(145, 144, 143, .12);
}

.hero-left-btn img {
    width: 20px;
    height: 20px;
    transition: transform .3s ease-in-out;
}

.hero-left-btn:hover img {
    transform: translateX(5px);
}

.hero-right-btn {
    display: inline-flex;
    align-items: center;
    height: 37px;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 14.7px;
    color: #FAF6EE;
    text-decoration: none;
    border-bottom: 2px solid #F0B95A;
    transition: color .3s;
}

.hero-right-btn:hover {
    color: #F0B95A;
}

.hero-left-btn:focus-visible,
.hero-right-btn:focus-visible {
    outline: 2px solid #F0B95A;
    outline-offset: 4px;
}

/* ---------- Colonne droite ---------- */
.hero-right {
    flex: 0 0 50%;
    display: flex;
    justify-content: center;
}

.hero-right-image {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 600px;               /* taille native : 420 x 493.5 */
}

.hero-image {
    position: relative;             /* donne sa hauteur au bloc */
    z-index: 2;
    display: block;
    width: 100%;
    height: auto;
}

/* Contour pointillé : même taille que l'image, décalé en bas à droite */
.porte-entre-tiret {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 71%;
    height: auto;
    transform: translate(25.8%, 13%);
    pointer-events: none;
}

/* Rond avec les flèches : 104 x 104, à cheval sur le bord gauche */
.hero-icon-bas-gauche {
    position: absolute;
    z-index: 3;
    left: 0;
    bottom: 10%;
    width: 30%;                   /* 104 / 420 */
}

.hero-icon-bas-gauche img {
    display: block;
    width: 100%;
    height: auto;
}

/* Portes décoratives (tailles natives) */
.porte-petite,
.porte-grande {
    position: absolute;
    z-index: 0;
    height: auto;
    max-width: none;
    pointer-events: none;
}

.porte-petite {                     /* 560 x 672 */
    width: 560px;
    left: 367px;
    bottom: -10px;
}

.porte-grande {                     /* 680 x 816 */
    width: 680px;
    left: 358px;
    bottom: -90px;
}

/* ---------- Badge "Depuis 2008" ---------- */
.badge-message {
    position: absolute;
    z-index: 4;
    top: 15.6%;
    right: 2.7%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px 14px 17px;
    background: #F3EEE3;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}

.badge-message__icone {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(221, 143, 30, .18);
    border-radius: 9px;
}

.badge-message__icone img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.description-message__titre {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    color: #1A1A1A;
    white-space: nowrap;
}

.description-message__texte {
    margin-top: 2px;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.3;
    color: #5C5C55;
}

/* ================= <= 1000px : colonne ================= */
@media (max-width: 1000px) {
    .hero-container {
        padding: 6rem 1.5rem;
    }

    .hero-content {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        text-align: center;
    }

    /* .hero-left disparaît de la mise en page : ses enfants peuvent être réordonnés */
    .hero-left {
        display: contents;
    }

    .hero_left_subtitle { order: 1; justify-content: center; }
    .hero_left_title    { order: 2; }
    .hero-right         { order: 3; flex: none; width: 100%; padding-bottom: 24px; }
    .hero-description   { order: 4; margin-inline: auto; }
    .hero-left-btns     { order: 5; justify-content: center; }

    .hero-right-image {
        margin-inline: auto;
    }

    /* On supprime les portes, sauf celle en tiret */
    .porte-petite,
    .porte-grande {
        display: none;
    }

    .badge-message {
        top: 6%;
        right: -4%;
    }
}

/* ================= Petit mobile ================= */
@media (max-width: 576px) {
    .hero-icon-bas-gauche {
        left: -5%;
    }

    .hero-left-btns {
        flex-direction: column;
        width: 100%;
    }

    .hero-left-btn {
        width: 100%;
        justify-content: center;
    }

    .badge-message {
        right: -2%;
    }

    .porte-entre-tiret {
        max-width: 500px;
        max-height: 600px;
    }
}