body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(231, 231, 231);
    color: black;
    margin: 0;
    overflow-x: clip;
}

h1 {
    text-align: center;
    font-size: 3em;
    margin: 0;
}

h2{
    color: white;
}

header {
    margin: 0;
    padding-bottom: 1em;
    color: rgb(0, 0, 0);
    background: linear-gradient(40deg, #d2962e, #ffb63a, #d2962e);
}

.HeaderTop {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    min-height: 120px;
}

.HeaderLeft {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: -30px;
    padding-left: 20px;
}

.HeaderLeft img {
    width: 125px;
    height: 125px;
    object-fit: contain;
}

.HeaderLeft h1 {
    font-size: 1em;
    margin: 0;
}

.HeaderMain {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    padding: 0;
    gap: 6px;
}

.HeaderMain h1 {
    font-size: 2em;
    line-height: 1.15;
    margin-top: 1em;
}

.HeaderMain h2 {
    font-size: 1.3em;
    line-height: 1.2;
    color: black;
    margin: 0;
}

.HeaderBottom {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 10px 0;
    box-sizing: border-box;
    background: linear-gradient(40deg, #a17223, #d79522, #a17223);
    border: 2px solid #ffb63a;
}

.HeaderBottom a {
    width: 200px;
    font-size: 1.5em;
    color: rgb(0, 0, 0);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s;
}

.HeaderBottom a:hover {
    transform: scale(1.08);
}

hr {
    width: 120%;
    border: none;
    margin-left: -1em;
    border-top: 2px solid #d79522;
    color: #065159;
}

main {
    color: rgb(0, 0, 0);
    padding: 1em;
    background: linear-gradient(40deg, #012b69, #00122d, #012b69);
}

.Left p{
    margin-left: 1em;
}
.Left img{
    margin-left:2em;
    width: 250px;
    border-radius: 7px;
}


.About {
    padding: 30px;
    color: rgb(255, 255, 255);
    box-sizing: border-box;
    margin: 2em 4em;
}

.About h2{
    margin-bottom: -0.25em;
    margin-top: -1em;
    color: rgb(255, 255, 255);
}

.Objectif {
    padding: 30px;
    color: white;
    box-sizing: border-box;
    margin: 2em 4em;
}


h2{
    font-size: 2.2em;
}

a{
    color: black;
}


.AboutIntro {
    display: grid;
    align-items: start;
    column-gap: 32px;
    row-gap: 0;
}

.AboutFirst {
    grid-area: first;
}

.AboutSecond {
    grid-area: second;
}

.AboutObjectives{
    grid-area: objectives;
}

.About p{
    font-size: 1.5em;
    line-height: 1.5;
    margin: 0 0 25px;
    min-width: 0;
}

.AboutPhoto {
    grid-area: photo;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.AboutPhoto img {
    margin-top: 2em;
    display: block;
    width: 100%;
    max-width: 350px;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.AboutPhoto a {
    display: inline-block;
    margin-top: 1.5em;
    padding: 0.8em 1.5em;
    background-color: #ffb63a;
    color: rgb(0, 0, 0);
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.2em;
    white-space: nowrap; 
}

.MainCarte{
    margin: 5em;
}


.Carte{
    background-color: #ffb63a;
    border: 5px solid #d4921f;
    border-radius: 5px;
    font-size: 1.5em;
    margin: 2em 1.75em;
    padding: 0 4em ;
    grid-template-columns: 1fr 1fr;
}
.Carte .h3Carte{
    margin: -1em;
}
.Carte .h3CarteBis{
    margin: 1em 0 -1em -1em;
}
.Carte .h3CarteBasique{
    margin: -1em;
}

.Carte img {
    width: 350px;
    margin: 0 auto;
    margin-top: 0.90em;
    display: block;
}

.Left{
    display: grid;
    grid-template-columns: 1fr  1fr;
    align-items: start;
}

.LeftText{
    grid-row: 1;
    grid-column: 1;
}

.RigthIMG{
    grid-column: 2;
    grid-row: 1;
}

.TextBottom{
    margin: 1em 1em 2em 1em; 
    grid-column: 1/3;
    grid-row: 2;
}

.Trio{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 0 2.5em;
}

.Trio h3{
    margin-left:-1em;
    margin-top: -0.5em;
}

.CarteLeft{
    background-color: #ffb63a;
    border: 5px solid #d4921f;
    border-radius: 5px;
    font-size: 1em;
    margin: 2em 5em;
    padding: 2em 4em;
    grid-column: 1;
}
.CarteMid{
    background-color: #ffb63a;
    border: 5px solid #d4921f;
    border-radius: 5px;
    font-size: 1em;
    margin: 2em 5em;
    padding: 2em 4em;
    grid-column: 2;
}
.CarteRight{
    background-color: #ffb63a;
    border: 5px solid #d4921f;
    border-radius: 5px;
    font-size: 1em;
    margin: 2em 5em;
    padding: 2em 4em;
    grid-column: 3;
}

.competence{
    margin-left: 5em;
}

footer{
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: linear-gradient(40deg, #d2962e, #ffb63a, #d2962e);
}

footer hr {
    grid-column: 1 / 3;
    width: 100%;
    border-top: 2px solid #014a53;
    color: #065159;
    margin: 0;
}

.FooterLeft {
    grid-column: 1;
    font-size: 10px;
    padding-left: 1em;
}

.FooterRight {
    grid-column: 2;
    font-size: 11px;
    text-align: end;
    padding-right: 1em;
}


.AboutIntro {
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-areas:"first photo" "second photo" "objectives photo";
    column-gap: 32px;
}


@media(max-width: 1100px){

    .Trio{
        display: block;
    }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media screen and (min-width: 1101px) {
    .Trio {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5em;
        margin: 0 2.5em;
    }

    .CarteLeft,
    .CarteMid,
    .CarteRight {
        box-sizing: border-box;
        min-width: 0;
        margin: 2em 0;
        padding: 2em;
    }
}


@media screen and (max-width: 1100px) {
    .About{
        margin: 1.5em 1.5em;
        padding: 20px;
    }

    .Objectif{
        margin: 1.5em 1.5em;
        padding: 20px;
    }

    .MainCarte{
        margin: 2em 1.5em;
    }

    .Carte{
        margin: 1.5em 1em;
        padding: 1.5em;
        font-size: 1.15em;
    }

    .CarteLeft, .CarteMid, .CarteRight {
        margin: 1em 0;
        padding: 2em;
    }

    .Trio {
        gap: 12px;
        margin: 0 1em;
    }

    .Carte img {
        max-width: 100%;
        height: auto;
    }
}

/* Téléphone*/
@media screen and (max-width: 700px) {
    h1{
        font-size: 1.8em;
    }

    h2{
        font-size: 1.5em;
    }

    .HeaderTop{
        grid-template-columns: 1fr;
        min-height: auto;
        gap: 8px;
        padding: 12px;
    }

    .HeaderLeft {
        grid-column: 1;
        justify-content: center;
        padding-left: 0;
    }

    .HeaderLeft img {
        width: 65px;
        height: 65px;
    }

    .HeaderMain {
        grid-column: 1;
    }

    .HeaderMain h1 {
        font-size: 1.5em;
        margin-top: 0;
    }

    .HeaderMain h2 {
        font-size: 1em;
    }

    .HeaderBottom {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px;
    }

    .HeaderBottom a {
        width: auto;
        flex: 1 1 40%;
        font-size: 1em;
    }

    main {
        padding: 10px;
    }

    .About,
    .Objectif {
        margin: 1em 0;
        padding: 12px;
    }

    .About h2 {
        margin: 0 0 12px;
    }

    .AboutIntro {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .AboutIntro > p {
        font-size: 1em;
        line-height: 1.4;
        margin: 0;
    }

    .AboutPhoto {
        width: 100%;
        align-items: center;
    }

    .AboutPhoto img {
        width: 100%;
        max-width: 250px;
        margin-top: 0;
    }

    .AboutPhoto a {
        font-size: 1em;
        white-space: normal;
    }

    .MainCarte {
        margin: 1em 0;
    }

    /* Duo : premier texte, image, deuxième texte */
    .Carte {
        box-sizing: border-box;
        width: 100%;
        margin: 1em 0;
        padding: 14px;
        font-size: 1em;
    }

    .Left {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .LeftText {
        order: 1;
        width: 100%;
        min-width: 0;
    }

    .RigthIMG {
        order: 2;
        width: 100%;
        min-width: 0;
    }

    .TextBottom {
        order: 3;
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    .Carte .Left p,
    .Carte .TextBottom,
    .TextBottom {
        font-size: 1em;
        line-height: 1.4;
    }

    .Carte img {
        display: block;
        width: 100%;
        max-width: 300px;
        height: auto;
        margin: 12px auto 0;
    }

    /* Trio : trois cartes superposées */
    .Trio {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin: 0;
    }

    .CarteLeft,
    .CarteMid,
    .CarteRight {
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 14px;
        font-size: 1em;
    }

    .Trio h3 {
        margin-left: 0;
    }

    .competence {
        margin: 1em 0;
    }

    footer {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    footer hr {
        grid-column: 1;
    }

    .FooterLeft,
    .FooterRight {
        grid-column: 1;
        text-align: center;
        padding: 0 8px;
    }


    .Carte .h3CarteBis{
        margin: -1em 0 -1em 1em;
    }
}