/* ============================================================
   referencement-intro.css — Section "Intro et accroche"
   (page 0-referencement.html)
   Architecture commune des sections (padding, titre) :
   voir referencement-commun.css
   ============================================================ */

.section-intro {
    display: grid;
    grid-template-columns: 3fr 1fr;
    align-items: center;
    column-gap: var(--section-pro-colonne-gap);
    background: var(--vert-3);
}

.section-intro .section-titre-pro {
    grid-column: 1;
    min-width: 0;
    margin: 0;
    color: white;
    font-size: var(--font-size-4);
    text-align: right;
}

.section-intro-bouton-zone {
    grid-column: 2;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    border-left: 1px solid var(--vert-1);
    padding-left: var(--section-pro-colonne-gap);
    box-sizing: border-box;
}

.section-intro-bouton {
    width: 100%;
    box-sizing: border-box;
    background: white;
    color: var(--vert-3);
    font-weight: 700;
    font-size: var(--font-size-2);
    padding: 1rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    text-align: center;
    font-family: var(--font-family);
    transition: background 0.2s ease, color 0.2s ease;
}

.section-intro-bouton:hover {
    background: var(--vert-1);
    color: var(--vert-4);
}

.section-intro-lien-contact {
    color: white;
    font-size: var(--font-size-2);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}

.section-intro-lien-contact:hover {
    color: var(--vert-1);
}

/* Exception focus clavier : fond foncé (vert-3), contour gris-6 trop peu contrasté */
.section-intro :focus-visible {
    outline-color: var(--vert-1);
}

@media (max-width: 1023px) {
    .section-intro {
        grid-template-columns: 1fr;
    }

    .section-intro .section-titre-pro {
        text-align: center;
        margin-bottom: 1.88rem;
    }

    .section-intro-bouton-zone {
        grid-column: 1;
        border-left: none;
        border-top: 1px solid var(--vert-1);
        padding-left: 0;
        padding-top: 1.88rem;
    }
}