body {
    background-color: #e5e1d6;
    background-image: url("/img/fondprincipal.webp");
    background-size: 30%;
    margin: 0;
    padding: 0;
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.bodyPtitBiscuit {
    background-color: #bc0aba;
    background-image: url("/img/brickwall.webp");
    background-size: 100%;
    margin: 0;
    padding: 0;
    background-attachment: fixed;
}

.bodyC {
    background-color: #ff7300;
    background-image: url("/img/fondTroubadour.webp");
    background-size: 100%;
    margin: 0;
    padding: 0;
    background-attachment: fixed;
}

.bodyBuild {
    background-color: #e5e1d6;
    background-image: url("/img/build.png");
    background-size: 30%;
    background-repeat: no-repeat;
    background-position:center top;
    margin: 0;
    padding: 0;
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header */

.header {
    font-family: "Blackletter";
    position: sticky;
    top: 0;
    padding : 0px 10% 0px 10%;
    background: #e7bd3f;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
    z-index: 10;
}

.headerPtitBiscuit {
    font-family: "Blackletter";
    position: sticky;
    top: 0;
    padding : 0px 10% 0px 10%;
    background: #bc0aba;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
    z-index: 10;
}

.headerC {
    font-family: "Blackletter";
    position: sticky;
    top: 0;
    padding : 0px 10% 0px 10%;
    background: #fa7f1a; /* Base = #ff7300 */
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
    z-index: 10;
}

.header-button {
    background-color: #e7bd3f;
    color: #000000;
    border: none;
    padding: 10px 10%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 0px 0px;
    cursor: pointer;
    text-decoration:double;
    transition: 0.3s;
}

.header-button:active {
    background-color: #8c6c0c;
}

.header-buttonPtitBiscuit {
    background-color: #bc0aba;
    color: #ffffff;
    border: none;
    padding: 10px 10%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 0px 0px;
    cursor: pointer;
    text-decoration:double;
    transition: 0.3s;
}

.header-buttonPtitBiscuit:active {
    background-color: #983697;
}

.header-buttonC {
    background-color: #fa7f1a;
    color: #000000;
    border: none;
    padding: 10px 10%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 0px 0px;
    cursor: pointer;
    text-decoration:double;
    transition: 0.3s;
}

.header-buttonC:active {
    background-color: #ffaf6d;
}

.header-button a {
    color: #000000;
    text-decoration: none;
}

.header-buttonPtitBiscuit a {
    color: #ffffff;
    text-decoration: none;
}

.header-buttonC a {
    color: #000000;
    text-decoration: none;
}

.header-button:hover {
    background-color: #c69911;
    color: #000000;
}

.header-buttonPtitBiscuit:hover {
    background-color: #e84de6;
    color: #000000;
}

.header-buttonC:hover {
    background-color: #ffaf6d;
    color: #000000;
}

/* Content */

.content {
    font-family: "NewRocker";
    margin: 5% 25% 20px 25%;
    padding : 0px 5% 20px 5%;
    color: #ffffff;
    font-size: 18px;
    backdrop-filter: blur(5px);
    background-color: #0000003f;
    
}

.contentAlt {
    font-family: "NewRocker";
    padding: 5% 20% 20px 20%;
    margin: 0px 10% 0px 10%;
    color: #000000;
    font-size: 18px;
}

.contentPB{
    font-family: "NewRocker";
    margin: 5% 25% 20px 25%;
    padding : 0px 5% 20px 5%;
    color: #ffffff;
    font-size: 18px;
    backdrop-filter: blur(5px);
    
}

.contentC{
    font-family: "NewRocker";
    margin: 5% 25% 20px 25%;
    padding: 0px 5% 20px 5%;
    color: #ff7300;
    font-size: 18px;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
}

.contentAdminBtn{
    font-family: "NewRocker";
    padding: 0% 20% 20px 20%;
    margin: 0px 10% 0px 10%;
    color: #000000;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}



/* Footer */

.footer {
    padding: 0px 10% 0px 10%;
    background: #e7bd3f;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    margin-top: auto;
}

.footer p{
    font-family: "NewRocker";
}

.footer a {
    color: #000000;
    text-decoration: none;
}

.footerPB{
    top: 0;
    padding : 0px 10% 0px 10%;
    background: #bc0aba;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: auto;
    z-index: 10;
}

.footerPB p{
    font-family: "NewRocker";
}   

.footerPB a {
    color: #ffffff;
    text-decoration: none;
}

.footerC{
    padding: 0px 10% 0px 10%;
    background: #fa7f1a;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    margin-top: auto;
}

.footerC p{
    font-family: "NewRocker";
}

.footerC a {
    color: #000000;
    text-decoration: none;
}

/* Fonts */

@font-face {
    font-family: "NewRocker";
    src: url("../Font/NewRocker-Regular.ttf");
}

@font-face {
    font-family: "Blackletter";
    src: url("../Font/metal_blackletter_v4/MetalBlackletter_v4.ttf");
}

/* IMAGES */

.imgPtitBiscuitContenu {
    width: 30vw;         /* Largeur relative à la fenêtre */
    height: auto;        /* Respecte le ratio */
    max-width: 400px;    /* Limite la taille max si besoin */
    z-index: 100;
    position: fixed;        /* Optionnel : place à gauche */
    top : 60px;          /* Optionnel : espace du haut */
    left: 20px;         /* Optionnel : espace de gauche */
    overflow: hidden;
    border : 6px solid #bc0aba;
    border-bottom : 6px solid #983697;
    border-right: 6px solid #983697;
    border-radius: 50%;
    box-sizing: border-box;
}
.imgPtitBiscuit {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

.imgCheyenneContenu{
    width: 30vw;         /* Largeur relative à la fenêtre */
    height: auto;        /* Respecte le ratio */
    max-width: 400px;    /* Limite la taille max si besoin */
    z-index: 100;
    position: fixed;        /* Optionnel : place à gauche */
    top : 60px;          /* Optionnel : espace du haut */
    left: 20px;         /* Optionnel : espace de gauche */
    overflow: hidden;
    border : 6px solid #ffaf6d;
    border-bottom : 6px solid #ff7300;
    border-right: 6px solid #ff7300;
    border-radius: 50%;
    box-sizing: border-box;
}

.imgCheyenne {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
    
}

/* Carte Google Maps */

.googleMaps {
    width: 100%;
    height: 400px;
    border-radius: 20px;
    border : 4px solid #e7bd3f;
    border-bottom : 4px solid #c69911;
    border-right: 4px solid #c69911;
}

/* Animations */

@keyframes fadeIn {
    from {
        opacity: 0;
        scale : 0;
    }
    to {
        opacity: 1.5;
        scale : 1;
    }
}

@keyframes fadeOut {
  from {
      opacity: 1.5;
      scale : 1;
  }
  to {
      opacity: 0;
      scale : 0;
  }
}

.postsInsta iframe {
    animation: fadeIn;
    animation-timeline: view(block 100% 0%);
    animation-duration: 0.5s;
    border-radius: 20px;
    border : 4px solid #bc0aba;
    border-bottom : 4px solid #983697;
    border-right: 4px solid #983697;
}

.postsInsta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px; /* espace horizontal entre les iframes */
    margin: 30px 0;
}

.postsInstaC iframe {
    animation: fadeIn;
    animation-timeline: view(block 100% 0%);
    animation-duration: 0.5 s;
    border-radius: 20px;
    border : 4px solid #ffaf6d;
    border-bottom : 4px solid #ff7300;
    border-right: 4px solid #ff7300;
}

.postsInstaC {
    display: flex;
    justify-content: center;
    align-items: center;
    gap : 40px;
    margin: 30px 0;
}

.cptInsta {
    animation: fadeIn;
    animation-timeline: view(block 75% 0%);
    animation-duration: 1s;
    border-radius: 20px;
    border : 4px solid #e7bd3f;
    border-bottom : 4px solid #c69911;
    border-right: 4px solid #c69911;
}

.cptInstaPB {
    animation: fadeIn;
    animation-timeline: view(block 75% 0%);
    animation-duration: 1s;
    border-radius: 20px;
    border : 4px solid #bc0aba;
    border-bottom : 4px solid #983697;
    border-right: 4px solid #983697;
}

.cptInstaC {
    animation: fadeIn;
    animation-timeline: view(block 75% 0%);
    animation-duration: 1s;
    border-radius: 20px;
    border : 4px solid #ffaf6d;
    border-bottom : 4px solid #ff7300;
    border-right: 4px solid #ff7300;
}

.horaires {
    animation: fadeIn;
    animation-timeline: view(block 75% 0%);
    animation-duration: 1s;
    font-family: "NewRocker";
    font-size: 22px;
    color: #000000;
    margin: 0px 10% 0px 10%;
    padding: 20px 10% 20px 10%;
    align-items: center;
    text-align: center;
    background-color: #e7bd3f;
    border-radius: 20px;
    border : 5px #c69911;
    border-style: solid;
    border-bottom: 5px solid #8c6c0c;
    border-right: 5px solid #8c6c0c;
}

/* Horaires - Admin - Connexion */
.editHoursButton {
    font-family: "NewRocker";
    background-color: #e7bd3f;
    color: #000000;
    border-radius: 20px;
    border : 5px #c69911;
    border-style: solid;
    border-bottom: 5px solid #8c6c0c;
    border-right: 5px solid #8c6c0c;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 0px 0px;
    cursor: pointer;
    width: 80%;
    text-decoration: double;
    box-shadow: 0 12px #523f07;
    transition: box-shadow 0.15s, transform 0.15s;
}

.editHoursButton:hover {
    background-color: #ffd146;
    color: #000000;
    border: 5px solid #e0ad14;
    border-bottom: 5px solid #b38a11;
    border-right: 5px solid #b38a11;

    box-shadow: 0 14px #523f07;
    transform: translateY(-2px);
}

.editHoursButton:active {
    background-color: #c69911;
    color: #000000;
    border: 5px solid #8c6c0c;
    border-bottom: 5px solid #55560c;
    border-right: 5px solid #55560c;

    box-shadow: 0 8px #464422;
    transform: translateY(4px);
    
}

.editAdminButton {
    font-family: "NewRocker";
    background-color: #e7bd3f;
    color: #000000;
    border-radius: 20px;
    width: 80%;
    border : 5px #c69911;
    border-style: solid;
    border-bottom: 5px solid #8c6c0c;
    border-right: 5px solid #8c6c0c;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 0px 0px;
    cursor: pointer;
    text-decoration: double;
    box-shadow: 0 12px #464422;
    transition: box-shadow 0.15s, transform 0.15s;
}

.editAdminButton:hover {
    background-color: #ffd146;
    color: #000000;
    border: 5px solid #e0ad14;
    border-bottom: 5px solid #b38a11;
    border-right: 5px solid #b38a11;

    box-shadow: 0 14px #464422;
    transform: translateY(-2px);
}

.editAdminButton:active {
    background-color: #c69911;
    color: #000000;
    border: 5px solid #8c6c0c;
    border-bottom: 5px solid #55560c;
    border-right: 5px solid #55560c;

    box-shadow: 0 8px #464422;
    transform: translateY(4px);
    
}

.connexionBox {
    font-family: "NewRocker";
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    background-color: #e7bd3f;
    color: #000000;
    padding: 20px;
    margin: 0px 30% 0px 30%;
    border-radius: 20px;
    border : 5px #c69911;
    border-style: solid;
    border-bottom: 5px solid #8c6c0c;
    border-right: 5px solid #8c6c0c;
}

.content a, .contentAlt a, .contentPB a, .contentC a, .alert a {
  min-height: 24px;
  min-width: 24px;
  padding: 6px 8px; /* ou plus si nécessaire */
  display: inline-block; /* garantit que padding s’applique bien */
}

.content a:visited, .alert a:visited  {
        color: #ec2450;
      }

.content a:link, .alert a:link {
color: #ff577b;
}

.footer a {
    margin : 4px;
}

.preheader{
  background: #e7bd3f;
  top: 0;
  color: #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0;
  z-index: 10;
}

.imgHeader {
  view-timeline-name: --imgHeader;
  view-timeline-axis: block;
  animation-name: fadeOut;
  animation-timeline: --imgHeader;
  animation-range: exit 0% exit 100%;
  animation-fill-mode: both;
}

.alert {
    font-family: "NewRocker";
    margin: 5% 25% 20px 25%;
    padding : 20px 5% 20px 5%;
    color: #ffffff;
    font-size: 18px;
    backdrop-filter: blur(5px);
    background-color: #d4b6533f;
    border : 2px solid #d4b653;
    border-radius: 10px;
}

/* Ajoute ceci tout en bas de ton fichier CSS */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 768px) {

    .imgHeader {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
    }
    
    body, .bodyBuild {
        background-size: 60%; 
        background-position: center center;
        padding: 0 10px;
    }

    .bodyPtitBiscuit, .bodyC {
        background-size: cover; 
        background-position: center;
    }

    .header {
        flex-direction: column;
        text-align: center;
        padding: 10px;
        position: relative;
    }

    .headerPtitBiscuit, .headerC {
        flex-direction: column;
        text-align: center;
        padding: 10px;
        position: relative;
    }

    .header img {
        max-width: 100px;
        height: auto;
    }

    nav {
        flex-direction: column;
        gap: 10px;
        padding: 10px 0;
    }

    main, section, .content {
        padding: 10px;
        font-size: 1rem;
    }

    h1, h2, h3 {
        font-size: 1.4rem;
    }

    .imgPtitBiscuit,
    .imgCheyenne {
         width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    

    .postsInsta, .postsInstaC {
        flex-direction: column; /* Colonne pour les petits écrans */
        align-items: center; /* Centre les éléments */
        gap: 10%;
    }

    .postsInsta iframe, .postsInstaC iframe {
        width: 80%; /* Prend toute la largeur */
        max-width: 400px; /* Limite la taille max */
        margin-bottom: 20px; /* Espace entre les iframes */
    }

    .cptInsta, .cptInstaPBn .cptInstaC {
        width: 100%; /* Prend toute la largeur */
        max-width: 400px; /* Limite la taille max */
        margin-bottom: 20px; /* Espace entre les iframes */
    }

    .horaires {
        font-size: 1.2rem; /* Ajuste la taille de police */
        padding: 10px; /* Réduit le padding */
        margin: 10px 0; /* Ajuste les marges */
    }

    .connexionBox {
        width: 90%; /* Prend presque toute la largeur */
        margin: 20px auto; /* Centre horizontalement */
        padding: 20px; /* Ajuste le padding */
    }

    .contentAdminBtn{
        align-items: center;
    }

    .imgCheyenneContenu, .imgPtitBiscuitContenu {
        width: 80vw;
        max-width: 300px;
        aspect-ratio: 1 / 1;          /* 👈 assure un carré sans height */
        margin: 30px auto;
        border-radius: 50%;
        overflow: hidden;
        display: block;
       position: relative;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
    }



    .editHoursButton, .editAdminButton {
        width: 100%; /* Prend toute la largeur */
        padding: 10px; /* Ajuste le padding */
        font-size: 1rem; /* Ajuste la taille de police */
    }


    .footer, .footerPB, .footerC {
        flex-direction: column; /* Colonne pour les petits écrans */
        text-align: center; /* Centre le texte */
        padding: 10px; /* Ajuste le padding */
    }

    .footer p, .footerPB p, .footerC p{
        font-size: 1rem; /* Ajuste la taille de police */
        margin: 0px 0; /* Ajuste les marges */
    }

    .footer a, .footerPB a, .footerC a {
        font-size: 1rem; /* Ajuste la taille de police */
    }

    .header-button, .header-buttonPtitBiscuit, .header-buttonC {
        width: 100%; /* Prend toute la largeur */
        padding: 10px; /* Ajuste le padding */
        font-size: 1rem; /* Ajuste la taille de police */
        text-align: center; /* Centre le texte */
    }

    .header-button a, .header-buttonPtitBiscuit a, .header-buttonC a {
        display: block; /* Affiche le lien en bloc */
        width: 100%; /* Prend toute la largeur */
    }

    .content, .contentPB, .contentAlt, .contentC, .alert {
        font-size: 1rem; /* Ajuste la taille de police */
        padding: 10px 10px 10px 10px; /* Ajuste le padding */
        margin: 10px 0; /* Ajuste les marges */
    }

    .googleMaps {
        height: 300px; /* Ajuste la hauteur pour les petits écrans */
        width: 100%; /* Prend toute la largeur */
    }
}