/* =========================================
   STYLE GÉNÉRAL & VIDÉO PLEIN ÉCRAN
   ========================================= */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Empêche les barres de défilement sur l'accueil */
    background-color: transparent; /* MODIFICATION : on rend le fond transparent pour voir la vidéo */
}

.back-video {
    position: fixed; /* Fixe la vidéo en arrière-plan */
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1; /* MODIFICATION : -1 suffit pour la mettre derrière le reste */
    object-fit: cover; /* Force la vidéo à couvrir tout l'écran sans déformer */
    background-size: cover;
}

/* =========================================
   STYLE DE LA NAVBAR BOOTSTRAP PERSONNALISÉE
   (Uniforme sur tout le site)
   ========================================= */
.personal-navbar {
    background-color: rgba(0, 0, 0, 0.7) !important; /* Fond noir semi-transparent pour l'accueil */
    padding: 15px 0;
    z-index: 1000; /* Assure que la nav est au-dessus de la vidéo */
}

.personal-navbar .navbar-nav .nav-link {
    font-size: 20px;
    color: white !important; /* Force le blanc par défaut */
    transition: color 0.3s;
    text-align: center; /* Centre le texte dans le menu burger */
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.personal-navbar .navbar-nav .nav-link:hover,
.personal-navbar .navbar-nav .nav-link.active {
    color: #eab906 !important; /* Le jaune au survol et pour la page active */
}

/* =========================================
   STYLE DU BOUTON VOLUME
   ========================================= */
.vol-control-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000; /* Au-dessus de la vidéo */
    border-radius: 50%; /* Bouton rond */
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    transition: all 0.3s ease;
    background-color: rgba(0, 0, 0, 0.5); /* Fond sombre transparent */
}

.vol-control-btn:hover {
    transform: scale(1.1); /* Petit effet de zoom au survol */
}

/* =========================================
   MEDIA QUERIES POUR LA NAVBAR (Bootstrap)
   ========================================= */
@media (max-width: 768px) {
    .personal-navbar .navbar-nav .nav-link {
        font-size: 16px; 
        padding: 10px 0;
    }
}

/* =========================================
   ANCIENS STYLES DE CARTES (Conservés au cas où)
   ========================================= */
video { 
  display: block; 
  size:auto;
}

section.card {
  background:#f3d2a9;
  border-radius:24px 24px 24px 48px;
  padding:48px 48px 48px 308px;
  margin:84px 0;
  width:60vw;
  max-width:1200px;
  min-width:640px;
  display:flex;
  flex-direction:row;
  align-self:flex-start;
  position:relative;
  box-shadow:
    5px 0 0 0 fade(#ccc,30%),
    -5px 0 0 0 fade(#ccc,30%),
    0 5px 0 0 fade(#ccc,30%);
}

.text-content {
  display:flex;
  flex-direction:column;
  width:calc(60vw - 192px);
}

.text-content h3 {
  margin:0;
  font-size:1.5em;
  max-width:20ch;
}

.text-content p {
  margin:16px 0 24px;
  max-width:60ch;
}

.text-content a {
  border:3px solid #000;
  color:#000;
  align-self:flex-start;
  text-decoration:none;
  padding:16px 32px;
  border-radius:12px 12px 12px 12px;
  transition:400ms all;
}

.text-content a:hover {
  background:#000000e4;
  color:white;
}
  
.visual {
  width:365px;
  height:100%;
  position:absolute;
  top:20px;
  left:3%; 
  overflow:hidden;
  border-radius:24px;
  box-shadow:
    1px 2px 6px fade(white,25%),
    2px 6px 12px fade(black,25%);
}

.visual img { 
  height:90%;
}
  
section.card:nth-of-type(odd) {
  margin:0 0 0 248px;
  border-radius:24px 24px 48px 24px;
  padding:48px 308px 48px 60px;
}

section.card:nth-of-type(odd) .visual {
  right:24px;
  left:auto;
}

.text-content-droite a,
.text-content-gauche a {
  align-self:flex-start;
}

.text-content-droite p {
  padding-right: 20%;
}

.text-content-gauche {
  padding-left: 20%;
}

article {
  margin:auto;
  display:block;
  width:calc(80vw + 248px);
  max-width:calc(920px + 248px);
  min-width:calc(640px + 248px); 
}

@media all and (max-width:1100px) {
  article {
    width:100%;
    max-width:100%;
    min-width:100%;
  }
  section.card {
    width:100%;
    max-width:100%;
    min-width:100%;
  }
  .text-content {
    width:100%;
  }
  section.card:nth-of-type(odd) {
    margin:0;
  }
}

@media all and (max-width:720px) {
  section.card {
    margin:64px 0;
    padding:88px 36px 36px;
    flex-direction:column;
    border-radius:24px;
  }
  section.card:nth-of-type(odd) {
    padding:88px 36px 36px;
    border-radius:24px;
  } 
  .text-content h3 { 
    max-width:calc(100% - 150px);
    font-size:1em;
  }
  .text-content p, 
  .text-content a {
    font-size:0.8em;
  }
  .visual,
  section.card:nth-of-type(odd) .visual {
    width:150px;
    height:150px; 
    right:16px;
    left:auto;
  }
  .visual img {
    width:100%;
    height:auto;
  }
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

img {
  border-radius: 24px;
}