@font-face {
    font-family: "Caviar Dreams Bold";
    src: url("fonts/Caviar Dreams Bold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

/* ============================================================
   RESET
============================================================ */

* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100%;
}


body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background-color: #f4f7fb;

    color: #1f2937;

    display: flex;

    flex-direction: column;

    min-height: 100vh;
}

/* ============================================================
   BANDEAU SUPÉRIEUR
============================================================ */

.header {

    width: 100%;

    height: 110px;

    background-color: #009FE3;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 40px;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.15);
}



/* ============================================================
   LOGOS
============================================================ */

.logo-container {

    height: 90px;

    display: flex;

    align-items: center;
}


.logo-container img {

    max-height: 80px;

    max-width: 220px;

    width: auto;

    height: auto;

    object-fit: contain;
}


.logo-gauche {

    justify-content: flex-start;
}


.logo-droite {

    justify-content: flex-end;
}



/* ============================================================
   CONTENU PRINCIPAL
============================================================ */

.main {

    flex: 1;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 60px 30px;
}



/* ============================================================
   BLOC PRINCIPAL
============================================================ */

.construction {

    width: 100%;

    max-width: 1150px;

    text-align: center;
}

/* ============================================================
   TITRE
============================================================ */

.construction h1 {

    margin:
        0 0 25px 0;

    font-family:
        "Caviar Dreams Bold";

    font-size: 70px;

    font-weight: normal;

    color: #312783;

    text-transform: none;
}

/* ============================================================
   TEXTES
============================================================ */

.message {

    margin:
        8px auto;

    max-width: 750px;

    font-size: 18px;

    line-height: 1.6;

    color: #4b5563;
}



/* ============================================================
   CONTENEUR DES CONTACTS
============================================================ */

.contacts {

    width: 100%;

    margin-top: 50px;

    display: flex;

    justify-content: center;

    align-items: stretch;

    gap: 20px;

    flex-wrap: nowrap;
}



/* ============================================================
   CARTE CONTACT
============================================================ */

.contact {

    /*
        4 cartes sur une ligne.

        La largeur s'adapte automatiquement.
    */

    flex: 1;

    min-width: 0;

    max-width: 270px;

    min-height: 180px;

    padding: 25px 15px;

    background-color: white;

    border-radius: 12px;

    border:
        1px solid #e5e7eb;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.08);

    text-decoration: none;

    color: inherit;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}



/* ============================================================
   EFFET SURVOL
============================================================ */

.contact:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.13);
}



/* ============================================================
   ICÔNES
============================================================ */

.contact-icon {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 30px;

    font-weight: bold;

    margin-bottom: 15px;
}



/* ============================================================
   ICÔNE E-MAIL
============================================================ */

.contact-icon.email {

    background-color: #1769aa;

    font-size: 0;
}


/*
    Logo SVG de l'enveloppe

    Taille volontairement réduite
    pour rester proportionnelle au cercle.
*/

.email-logo {

    width: 26px;

    height: auto;

    display: block;
}



/* ============================================================
   ICÔNE INSTAGRAM
============================================================ */

.contact-icon.instagram {

    background:
        linear-gradient(
            135deg,
            #833ab4,
            #fd1d1d,
            #fcb045
        );

    font-size: 0;
}


/*
    Contour principal du logo Instagram
*/

.instagram-logo {

    position: relative;

    width: 34px;
    height: 34px;

    border: 3px solid white;

    border-radius: 10px;

    display: block;

    /*
        Centrage parfait dans le rond
    */

    margin: 0 auto;
}


/*
    Objectif central
*/

.instagram-logo::before {

    content: "";

    position: absolute;

    width: 12px;
    height: 12px;

    border: 3px solid white;

    border-radius: 50%;

    /*
        Centrage mathématique
    */

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);
}


/*
    Petit point en haut à droite
*/

.instagram-logo::after {

    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

    background-color: white;

    border-radius: 50%;

    /*
        Position par rapport au contour
    */

    top: 4px;
    right: 4px;
}



/* ============================================================
   ICÔNE TÉLÉPHONE
============================================================ */

.contact-icon.telephone {

    background-color: #1769aa;
}



/* ============================================================
   ICÔNE FACEBOOK
============================================================ */

.contact-icon.facebook {

    background-color: #1877f2;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 34px;
}



/* ============================================================
   TEXTE CONTACT
============================================================ */

.contact-text h2 {

    margin:
        0 0 8px 0;

    font-size: 20px;

    color: #1f2937;
}


.contact-text p {

    margin: 0;

    font-size: 14px;

    color: #6b7280;

    line-height: 1.4;
}



/* ============================================================
   INFORMATIONS DE CONTACT
============================================================ */

.contact-info {

    display: block;

    margin-top: 8px;

    font-size: 14px;

    color: #1769aa;

    font-weight: 600;

    word-break: break-word;
}



/* ============================================================
   TÉLÉPHONE
============================================================ */

#telephoneLink {

    display: block;

    margin-top: 8px;

    font-size: 16px;

    font-weight: 600;

    text-decoration: none;
}



/* Téléphone sur smartphone */

.telephone-actif {

    color: #1769aa;

    cursor: pointer;
}


.telephone-actif:hover {

    text-decoration: underline;
}



/* Téléphone sur ordinateur */

.telephone-inactif {

    color: #1769aa;

    cursor: default;

    text-decoration: none;
}



/* ============================================================
   BARRE BLEUE DE FIN DE SITE
============================================================ */

.footer {

    width: 100%;

    min-height: 70px;

    background-color: #009FE3;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    color: white;

    text-align: center;
}


.footer p {

    margin: 0;

    font-size: 14px;
}



/* ============================================================
   TABLETTE
============================================================ */

@media (max-width: 950px) {

    .header {

        height: 95px;

        padding:
            8px 25px;
    }


    .logo-container {

        height: 75px;
    }


    .logo-container img {

        max-height: 65px;

        max-width: 170px;
    }


    .construction h1 {

        font-size: 40px;
    }


    .contacts {

        gap: 12px;
    }


    .contact {

        padding:
            20px 10px;
    }


    .contact-text h2 {

        font-size: 18px;
    }


    .contact-text p {

        font-size: 13px;
    }
}



/* ============================================================
   PETIT ÉCRAN
============================================================ */

@media (max-width: 700px) {

    .main {

        padding:
            40px 20px;
    }


    .construction h1 {

        font-size: 34px;

        line-height: 1.2;
    }


    .message {

        font-size: 16px;
    }


    /*
        Sur téléphone/tablette étroite :

        les cartes passent les unes sous les autres.
    */

    .contacts {

        flex-direction: column;

        align-items: center;

        gap: 15px;
    }


    .contact {

        width: 100%;

        max-width: 400px;

        min-height: 145px;

        flex: none;
    }
}



/* ============================================================
   TÉLÉPHONE
============================================================ */

@media (max-width: 500px) {

    .header {

        height: 80px;

        padding:
            5px 15px;
    }


    .logo-container {

        height: 65px;
    }


    .logo-container img {

        max-height: 55px;

        max-width: 130px;
    }


    .main {

        padding:
            35px 15px;
    }


    .construction h1 {

        font-size: 30px;
    }


    .contacts {

        margin-top: 30px;
    }


    .contact {

        min-height: 135px;
    }


    .footer {

        min-height: 60px;

        padding:
            15px;
    }
}