/******* Police  *******/

@font-face {
    font-family: 'courgette';
    src: url("/static/portfolio/fonts/Courgette/Courgette-Regular.cbd252f5c26c.ttf") format('truetype');
}

@font-face {
    font-family: 'chilanka';
    src: url("/static/portfolio/fonts/Chilanka/Chilanka-Regular.1d63d46cdaa1.ttf") format('truetype');
}

@font-face {
    font-family: 'kalam-bold';
    src: url("/static/portfolio/fonts/Kalam/Kalam-Bold.c753b7274d6a.ttf") format('truetype');
}

@font-face {
    font-family: 'kalam-light';
    src: url("/static/portfolio/fonts/Kalam/Kalam-Light.4c79496352e7.ttf") format('truetype');
}

@font-face {
    font-family: 'kalam-regular';
    src: url("/static/portfolio/fonts/Kalam/Kalam-Regular.b3d0cb828649.ttf") format('truetype');
}

h1, h2, .font-courgette
{
    font-family: "courgette";
}

.color-black
{
    color: rgb(0,0,0);
}

p
{
    text-align: justify;
}


/* container */

.container-fluid
{
    max-width: 1000px;
}


/* Pour laisser la place au header fixe */

#site-content
{
    margin-top: 116px;
}


/* Menu de connexion */

#navbar-login
{
    background-color: #ff4d4d;
}


/* Menu principal */

#navbarMenu > ul > li > a:hover
{
    cursor: pointer;
}

#navbarMenu > ul > li > a::after
{
    color: #fff;
    content: " / ";
    margin-left: 1em;
}

#navbarMenu > ul > li:last-child a::after
{
content: "";
}

#navbarMenu .navbar-nav .nav-link
{
  color: #fff;
  font-size: 1.1rem !important;
}

#navbarMenu .navbar-nav .nav-link:hover
{
  color: rgb(184, 184, 199);
}


/* Selection de la langue */

.lang-select {
    position: relative;
    cursor: pointer;
}

.selected {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: #000;
    color: #fff;
    border: 1px solid #444;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 15px;
}

.selected::after {
    content: "▼";
    margin-left: 8px;
    font-size: 10px;
}

.options {
    display: none;
    position: absolute;
    border: 1px solid #ccc;
    width: 100%;
}

.options div {
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: #000;
    color: #fff;
}

.options div:hover {
    background-color: #444;
}

.options img, .selected img {
    width: 20px;
}


/* Bouton primary call to action (couleur chaude) */

.btn-call-to-action
{
    background-color: #ff3344 !important;
    border-color: #ff1a2d !important;
}

.btn-call-to-action:hover
{
    background-color: #ff6666 !important;
    border-color: #ff6666 !important;
}

.btn-call-to-action:focus, .btn-call-to-action:active:focus
{
    box-shadow: 0 0 0 .25rem rgba(255, 153, 153, 0.5) !important;
}

.btn-grey
{
    background-color: #35353e !important;
}

.btn-grey:hover
{
    background-color: #17171c !important;
}

.btn-grey:focus, .btn-grey:active:focus
{
    box-shadow: 0 0 0 .25rem rgba(70, 70, 83, 0.3) !important;
}


/* Boutons primary */

.btn-primary, .btn-primary:focus
{
    background-color: #1B7F79;
    border-color: #166964;
}

.btn-primary:focus, .btn-primary:active:focus
{
    box-shadow: 0 0 0 .25rem rgba(26, 230, 214, 0.5);
}

.btn-primary:hover, .btn-primary:active
{
    background-color: #00998f;
    border-color: #00998f;
    cursor: pointer;
}


/* Liens */

a, .nav-link
{
    color: #ff3344;
}

a:hover, .nav-link:hover
{
    color: #ff6666;
    cursor: pointer;
}


/* Message d'erreur */

.alert-danger
{
    color: #cc0011;
    background-color: #ffe6e6;
    border-color: #ff9999;
}


/* Fond image motif */

.background-motif
{
    background-image: url("../img/banniere_poulpe.fd9a2ffbc233.gif");
    background-size: cover;
    background-position: center;
    padding-top: 40px;
    padding-bottom: 180px;
    color: rgba(0,0,0,.70);
    font-weight: 500;
}

/* Fond jaune pâle (même fond que le poulpe en logo) */

.bg-yellow
{
    background-color: #fff7e6;
}

.bg-grey
{
    background-color: #18181C;
}


/* Tags */

.tags small
{
    padding: 3px 5px 3px 5px;
    border-radius: 10px;
    margin-bottom: 5px;
    display: inline-block;
    color: #FFFFFF;
}


/**************** Affichage des miniatures des projets avec apparition du texte au survol *****************/

.card.udyr
{
    background-image: url("../img/projets/udyr/udyr.45ce9825f3a8.png");
    background-size: cover;
    background-position: center;
}
.card.udyr:hover
{
     background-image: linear-gradient(rgba(22, 105, 100, 0.8), rgba(22, 105, 100, 0.8)),
     url("../img/projets/udyr/udyr.45ce9825f3a8.png");
}

.card.feunnec
{
    background-image: url("../img/projets/feunnec/feunnec.e80795aa5b23.png");
    background-size: cover;
    background-position: center;
}
.card.feunnec:hover
{
     background-image: linear-gradient(rgba(22, 105, 100, 0.8), rgba(22, 105, 100, 0.8)),
     url("../img/projets/feunnec/feunnec.e80795aa5b23.png");
}

.card.celeste
{
    background-image: url("../img/projets/celeste/celeste.0a4751b2eefe.png");
    background-size: cover;
    background-position: center;
}
.card.celeste:hover
{
     background-image: linear-gradient(rgba(22, 105, 100, 0.8), rgba(22, 105, 100, 0.8)),
     url("../img/projets/celeste/celeste.0a4751b2eefe.png");
}

.card.logo_poulpe
{
    background-image: url("../img/projets/logo_poulpe/logo_poulpe.40853920e511.png");
    background-size: cover;
    background-position: center;
}
.card.logo_poulpe:hover
{
     background-image: linear-gradient(rgba(22, 105, 100, 0.8), rgba(22, 105, 100, 0.8)),
     url("../img/projets/logo_poulpe/logo_poulpe.40853920e511.png");
}

.card.femme
{
    background-image: url("../img/projets/femme/femme.935a228e61f9.png");
    background-size: cover;
    background-position: center;
}
.card.femme:hover
{
     background-image: linear-gradient(rgba(22, 105, 100, 0.8), rgba(22, 105, 100, 0.8)),
     url("../img/projets/femme/femme.935a228e61f9.png");
}

.card.logo_amap
{
    background-image: url("../img/projets/logo_amap/logo_amap.12b03537d74d.png");
    background-size: cover;
    background-position: center;
}
.card.logo_amap:hover
{
     background-image: linear-gradient(rgba(22, 105, 100, 0.8), rgba(22, 105, 100, 0.8)),
     url("../img/projets/logo_amap/logo_amap.12b03537d74d.png");
}

.card.multimalin
{
    background-image: url("../img/projets/multimalin/multimalin.558bc2e09a7d.png");
    background-size: cover;
    background-position: center;
}
.card.multimalin:hover
{
     background-image: linear-gradient(rgba(22, 105, 100, 0.8), rgba(22, 105, 100, 0.8)),
     url("../img/projets/multimalin/multimalin.558bc2e09a7d.png");
}

.card.la_reparatrice_de_doudous
{
    background-image: url("../img/projets/la_reparatrice_de_doudous/la_reparatrice_de_doudous.7462f2d421d1.png");
    background-size: cover;
    background-position: center;
}
.card.la_reparatrice_de_doudous:hover
{
     background-image: linear-gradient(rgba(22, 105, 100, 0.8), rgba(22, 105, 100, 0.8)),
     url("../img/projets/la_reparatrice_de_doudous/la_reparatrice_de_doudous.7462f2d421d1.png");
}

.card.immeuble_abandonne
{
    background-image: url("../img/projets/immeuble_abandonne/immeuble_abandonne.ffdb4efb2bcb.png");
    background-size: cover;
    background-position: center;
}
.card.immeuble_abandonne:hover
{
     background-image: linear-gradient(rgba(22, 105, 100, 0.8), rgba(22, 105, 100, 0.8)),
     url("../img/projets/immeuble_abandonne/immeuble_abandonne.ffdb4efb2bcb.png");
}

.card.overlooks_elevators
{
    background-image: url("../img/projets/overlooks_elevators/overlooks_elevators.c01cd1ccbbb1.png");
    background-size: cover;
    background-position: center;
}
.card.overlooks_elevators:hover
{
     background-image: linear-gradient(rgba(22, 105, 100, 0.8), rgba(22, 105, 100, 0.8)),
     url("../img/projets/overlooks_elevators/overlooks_elevators.c01cd1ccbbb1.png");
}

.card.office_et_living_room
{
    background-image: url("../img/projets/office_et_living_room/office_et_living_room.5ca183b5ed9f.png");
    background-size: cover;
    background-position: center;
}
.card.office_et_living_room:hover
{
     background-image: linear-gradient(rgba(22, 105, 100, 0.8), rgba(22, 105, 100, 0.8)),
     url("../img/projets/office_et_living_room/office_et_living_room.5ca183b5ed9f.png");
}

.card.boat
{
    background-image: url("../img/projets/boat/boat.50c38b435316.png");
    background-size: cover;
    background-position: center;
}
.card.boat:hover
{
     background-image: linear-gradient(rgba(22, 105, 100, 0.8), rgba(22, 105, 100, 0.8)),
     url("../img/projets/boat/boat.50c38b435316.png");
}

.card.bhh_bubble_canon
{
    background-image: url("../img/projets/bhh_bubble_canon/bhh_bubble_canon.ba6257f583f9.png");
    background-size: cover;
    background-position: center;
}
.card.bhh_bubble_canon:hover
{
     background-image: linear-gradient(rgba(22, 105, 100, 0.8), rgba(22, 105, 100, 0.8)),
     url("../img/projets/bhh_bubble_canon/bhh_bubble_canon.ba6257f583f9.png");
}

.card.bhh_beach_box
{
    background-image: url("../img/projets/bhh_beach_box/bhh_beach_box.ffb92e723efe.png");
    background-size: cover;
    background-position: center;
}
.card.bhh_beach_box:hover
{
     background-image: linear-gradient(rgba(22, 105, 100, 0.8), rgba(22, 105, 100, 0.8)),
     url("../img/projets/bhh_beach_box/bhh_beach_box.ffb92e723efe.png");
}

.card.bhh_ballon_stand
{
    background-image: url("../img/projets/bhh_ballon_stand/bhh_ballon_stand.a7b47c15296c.png");
    background-size: cover;
    background-position: center;
}
.card.bhh_ballon_stand:hover
{
     background-image: linear-gradient(rgba(22, 105, 100, 0.8), rgba(22, 105, 100, 0.8)),
     url("../img/projets/bhh_ballon_stand/bhh_ballon_stand.a7b47c15296c.png");
}

.card.bhh_stamina
{
    background-image: url("../img/projets/bhh_stamina/bhh_stamina.61e56d248703.png");
    background-size: cover;
    background-position: center;
}
.card.bhh_stamina:hover
{
     background-image: linear-gradient(rgba(22, 105, 100, 0.8), rgba(22, 105, 100, 0.8)),
     url("../img/projets/bhh_stamina/bhh_stamina.61e56d248703.png");
}

.card.bhh_staff_weapon
{
    background-image: url("../img/projets/bhh_staff_weapon/bhh_staff_weapon.381affae005c.png");
    background-size: cover;
    background-position: center;
}
.card.bhh_staff_weapon:hover
{
     background-image: linear-gradient(rgba(22, 105, 100, 0.8), rgba(22, 105, 100, 0.8)),
     url("../img/projets/bhh_staff_weapon/bhh_staff_weapon.381affae005c.png");
}

.card.bhh_dagger_weapon
{
    background-image: url("../img/projets/bhh_dagger_weapon/bhh_dagger_weapon.8c99179c2368.png");
    background-size: cover;
    background-position: center;
}
.card.bhh_dagger_weapon:hover
{
     background-image: linear-gradient(rgba(22, 105, 100, 0.8), rgba(22, 105, 100, 0.8)),
     url("../img/projets/bhh_dagger_weapon/bhh_dagger_weapon.8c99179c2368.png");
}

.card.bhh_hammer_weapon
{
    background-image: url("../img/projets/bhh_hammer_weapon/bhh_hammer_weapon.8597d19ade67.png");
    background-size: cover;
    background-position: center;
}
.card.bhh_hammer_weapon:hover
{
     background-image: linear-gradient(rgba(22, 105, 100, 0.8), rgba(22, 105, 100, 0.8)),
     url("../img/projets/bhh_hammer_weapon/bhh_hammer_weapon.8597d19ade67.png");
}

.card.show_devant
{
    background-image: url("../img/projets/show_devant/show_devant.d60c5aeb4e65.png");
    background-size: cover;
    background-position: center;
}
.card.show_devant:hover
{
     background-image: linear-gradient(rgba(22, 105, 100, 0.8), rgba(22, 105, 100, 0.8)),
     url("../img/projets/show_devant/show_devant.d60c5aeb4e65.png");
}

.card.chaudron
{
    background-image: url("../img/projets/chaudron/chaudron.d8c5798b94a4.png");
    background-size: cover;
    background-position: center;
}
.card.chaudron:hover
{
     background-image: linear-gradient(rgba(22, 105, 100, 0.8), rgba(22, 105, 100, 0.8)),
     url("../img/projets/chaudron/chaudron.d8c5798b94a4.png");
}

.card.nova
{
    background-image: url("../img/projets/nova/nova.cdbd11600ec0.png");
    background-size: cover;
    background-position: center;
}
.card.nova:hover
{
     background-image: linear-gradient(rgba(22, 105, 100, 0.8), rgba(22, 105, 100, 0.8)),
     url("../img/projets/nova/nova.cdbd11600ec0.png");
}

.card.alyn
{
    background-image: url("../img/projets/alyn/alyn.0e1fe8d9ba5a.png");
    background-size: cover;
    background-position: center;
}
.card.alyn:hover
{
     background-image: linear-gradient(rgba(22, 105, 100, 0.8), rgba(22, 105, 100, 0.8)),
     url("../img/projets/alyn/alyn.0e1fe8d9ba5a.png");
}

.card.wendigo
{
    background-image: url("../img/projets/wendigo/wendigo.9a4106a81578.png");
    background-size: cover;
    background-position: center;
}
.card.wendigo:hover
{
     background-image: linear-gradient(rgba(22, 105, 100, 0.8), rgba(22, 105, 100, 0.8)),
     url("../img/projets/wendigo/wendigo.9a4106a81578.png");
}

.card
{
    background-image: url("../img/exemple_projet.8dff40b76b08.png");
}

.card:hover
{
    background-image: linear-gradient(rgba(22, 105, 100, 0.8), rgba(22, 105, 100, 0.8)),
    url("../img/exemple_projet.8dff40b76b08.png");
    cursor: pointer;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2px; /* espacement constant entre les cards */
    margin: 0 auto;
    justify-content: center;
    padding: 0 0px;
}

@media (min-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 992px) {
    .card-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1200px) {
    .card-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 2000px) {
    .card-grid {
        grid-template-columns: repeat(7, 1fr);
    }
}

.card-fixed {
    width: 100%;
    aspect-ratio: 1 / 1; /* rend les cards carrées */
    max-width: 400px;
}

.card>a
{
    opacity: 0;
    transition: opacity .9s;
    text-decoration: none;
    /* Il faut que le lien occupe tout l'espace dans l'élément card pour que l'élément soit cliquable sur toute sa
    surface */
    width: 100%;
    height: 100%;
}

.card>a:hover
{
    opacity: 1;
}


/**************** Formulaires *****************/

/* Champs invalides des formulaires */

.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus
{
    border-color: #ff9999;
    box-shadow: 0 0 0 .25rem rgba(255,153,153,0.35);
}

.form-control.is-invalid, .was-validated .form-control:invalid {
    border-color: #ff9999;
}


/* Messages d'erreur dans les formulaires */

.invalid-feedback ul
{
    list-style: none;
    padding: 0;
}

.invalid-feedback
{
    color: #ff3344;
}


/**************** Page d'accueil *****************/

/* Logo du poulpe */
#lea-canno-logo
{
    width: 350px;
}


/**************** Page projet *****************/

.sidebar
{
    height: 100%;
    min-width: 200px;
    padding: 10px;
    border-bottom: 1px solid #e1e6ea;
}


/**************** Page de contact ****************/

#contact_form .form-group, #contact_form .g-recaptcha
{
    margin-bottom: 15px;
}