/* =========================================================
   PAGE À PROPOS — Billie Azzano
   La typo (logo, h3, p1, caption, text-muted…) vient de index.css.
   Ici : seulement les couleurs claires et la mise en page.
   ========================================================= */

/* Page claire : on change juste les couleurs */
.page-claire {
    --couleur-texte: #111111;
    --couleur-gris: #A8A8A8;
    --couleur-ligne: #8A8A8A;
    --couleur-fond: #F7F7F7;

    --largeur-gauche: 40%; /* la colonne droite démarre à 40% */
}


/* ---------- Grille 2 colonnes ---------- */
.grille {
    display: grid;
    grid-template-columns: var(--largeur-gauche) 1fr;
    align-items: start;
}

.colonne-droite {
    grid-column: 2;
}

.deux-colonnes {
    display: grid;
    grid-template-columns: 345px 1fr;
    column-gap: 24px;
}


/* ---------- Haut de page ---------- */
.haut-de-page {
    border-top: 1px solid var(--couleur-gris);
    padding-top: 20px;
}

.haut-de-page .logo {
    grid-column: 1;
}

.intro-about {
    padding-top: 110px;
    max-width: 780px;
}

.intro-about > .p1 {
    margin-bottom: 24px;
}


/* ---------- Portrait + Expériences / Formations ---------- */
.section-parcours {
    margin-top: 60px;
}

.portrait {
    grid-column: 1;
    width: 81%;
}

.portrait img {
    width: 100%;
    aspect-ratio: 324 / 348;
    object-fit: cover;
}

.bloc {
    margin-bottom: 72px;
}

.bloc:first-child {
    padding-top: 30px;
}

.titre-section {
    margin-bottom: 40px;
}

.bloc .ligne {
    margin-bottom: 22px;
}

.element .h3 {
    margin-bottom: 16px;
}


/* ---------- Skills ---------- */
.section-skills .ligne {
    margin-bottom: 30px;
}

.section-skills .titre-section {
    margin-bottom: 50px;
}

.section-skills h3 {
    margin-bottom: 30px;
}

.soft-skills {
    margin-top: 66px;
}

.soft-skills p {
    max-width: 230px;
    line-height: 1.3;
}

.encadre {
    border: 1px solid var(--couleur-texte);
    max-width: 535px;
    margin-top: 40px;
    padding: 20px 24px;   /* de l'air entre le texte et le cadre */
    line-height: 1.3;     /* même interligne que tes soft skills */
}

/* ---------- Footer ---------- */
.footer {
    margin-top: 76px;
    padding-bottom: 20px;
}

.footer .ligne {
    border-top-color: var(--couleur-gris);
    margin-bottom: 22px;
}


/* =========================================================
   TABLETTE — 800px à 1199px
   ========================================================= */
@media (max-width: 1199px) {

    .page-claire {
        --largeur-gauche: 36%;
    }

    .portrait {
        width: 88%;
    }

    .deux-colonnes {
        grid-template-columns: 1fr 1fr;
    }

    .intro-about {
        padding-top: 80px;
    }
}


/* =========================================================
   MOBILE — jusqu'à 799px
   (les textes passent à 16px automatiquement via index.css)
   ========================================================= */
@media (max-width: 799px) {

    .haut-de-page {
        padding-top: 16px;
    }

    .grille {
        grid-template-columns: 1fr;
    }

    .colonne-droite,
    .haut-de-page .logo,
    .portrait {
        grid-column: 1;
    }

    .intro-about {
        padding-top: 40px;
    }

    .portrait {
        width: 100%;
        margin-bottom: 40px;
    }

    .bloc:first-child {
        padding-top: 0;
    }

    .bloc {
        margin-bottom: 48px;
    }

    .deux-colonnes {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }
}