@font-face{
  font-family:"Louis George Cafe";
  src:url("../fonts/LouisGeorgeCafe-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Louis George Cafe";
  src:url("../fonts/LouisGeorgeCafe-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}


:root{
  --or:#CAAE84;
  --bleu:#152B46;
  --beige:#E3DBCF;

  --titre:"Asul", serif;
  --sous-titre:"Louis George Cafe", serif;
  --texte:"Poppins", sans-serif;

  --rayon:14px;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background: var(--beige);
  color: var(--bleu);
  font-family: var(--texte);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

.nav-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.nav-button{
  background:var(--bleu);
  padding:8px 30px;
  display:flex;
  gap:16px;
  border-bottom-right-radius:999px;
  border-top-right-radius:999px;
}

.nav-button a{
  font-size:14px;
  color:var(--or);
  padding:8px 10px;
  border-radius:999px;
  transition:transform .15s ease;
}

.nav-button a:hover{
  transform:translateY(-1.5px);
}

.lien-actif{
  color:var(--beige) !important;
  font-weight:700;
}

.logo-img{
  height:120px;
  width:auto;
}


.entete-detail{
  padding: 46px 80px 18px;
}

.entete-gauche{
  display:flex;
  align-items:center;
  gap: 18px;
  flex-wrap:wrap;
}

.titre-projet-detail{
  font-family: var(--titre);
  color: var(--bleu);
  font-size: 44px;
  letter-spacing:.2px;
}

.btn-retour{
  background: var(--or);
  color: var(--beige);
  padding: 7px 25px;
  border-radius: 999px;
  font-family: var(--titre);
  font-size: 20px;
  margin-top: 5px;
  margin-left: 15px;
}

.btn-retour:hover{
  color: var(--bleu);
}

.meta-ligne{
  width:100%;
  margin-top: 10px;
  display:flex;
  gap: 22px;
  align-items:center;
  font-size: 18px;
}

.meta-item{
  display:flex;
  align-items:center;
  gap: 8px;
  font-family: var(--texte);
  color: var(--or);
}

.meta-icone{
  height: 20px;
  object-fit: contain;
  display:block;
}



:root{
  --film-h: clamp(220px, 28vw, 320px);
  --hole-w: clamp(8px, 1vw, 12px);
  --hole-top: clamp(-1px, -1.5vw, -16px);
  --hole-gap1: clamp(18px, 2.2vw, 26px);
  --hole-gap2: clamp(44px, 5vw, 60px);
}

.film-wrapper{
  width: 100vw;
  overflow: hidden;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 12px 0; 
}

.film-pellicule{
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--film-h);
  background-color: var(--bleu);
}

.film-frame{
  flex: 1;
  height: 100%;
  position: relative;
  background-color: var(--bleu);
  display: flex;
  justify-content: center;
  align-items: center;
}

.film-frame::before,
.film-frame::after{
  content:"";
  position:absolute;
  top: var(--hole-top);
  bottom: 0;
  width: var(--hole-w);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent var(--hole-gap1),
    var(--beige) var(--hole-gap1),
    var(--beige) var(--hole-gap2)
  );
}

.film-frame::before{ left:0; }
.film-frame::after{ right:0; }

.film-frame img,
.film-frame video{
  height: calc(var(--film-h) - 30px);
  width: min(520px, 88%);
  object-fit: cover;
  display: block;
}

.contenu-detail{
  width: 100%;
  padding: 44px 80px 80px;
  display: grid;
  grid-template-columns: 1.35fr 520px;
  gap: 70px;              
  align-items: start;
  flex: 1;

  position: relative;
  overflow: visible;

}


.col-gauche{
  max-width: 100%;
}

.col-droite{
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}

.h2-section{
  font-family: var(--titre);
  color: var(--bleu);
  font-size: 22px;        
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.p-texte{
  font-size: 16px;        
  line-height: 1.9;
  color: rgba(21,43,70,.90);
  margin-bottom: 18px;
  max-width: 800px;     
}


.img-article{
  width: 100%;
  max-width: 650px;
  border-radius: 18px;
  overflow: hidden;
  margin: 26px 0 28px;
}

.img-article img,
.img-article video{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  margin-top: 20px;
  margin-bottom: 20px;

  position: relative;
  z-index: 2;
}


.capsule-keywords{
    background: var(--or);
    color: var(--bleu);
    font-family: var(--sous-titre);
    padding: 12px 14px;
    border-radius: 999px;
    font-size: 16px;
    letter-spacing: .3px;
    text-transform: uppercase;
    margin-bottom: 20px;
    margin-top: 33px;
    text-align: center;
    font-weight: 800;
}

.ligne-ronds{
  display:flex;
  justify-content:space-between;
  gap: 18px;
  margin-bottom: 30px;
}

.ronds{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  align-items:center;
}

.rond-mini{
  width: 56px;
  height: 42px;
  border-radius: 999px;
  border: 2px solid var(--or);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background: transparent;
}

.rond-mini img{
  width: 26px;
  height: 26px;
  object-fit: contain;
  display:block;
}

.rond-mini--plein{
  background: var(--bleu);
  color: var(--bleu);
  font-family: var(--titre);
  font-size: 10px;
  padding: 0 8px;
}

.bloc-apprentissages{
  background: var(--or);
  border-radius: 14px;
  padding: 25px;
  margin-top: 10px;

  width: 100%;
  max-width: 520px;
}

.bloc-apprentissages h3{
  font-family: var(--titre);
  font-size: 18px;
  letter-spacing:.5px;
  margin-bottom: 10px;
  color: var(--bleu);
  text-transform: uppercase;
}

.bloc-apprentissages ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.bloc-apprentissages li{
  font-size: 14px;
  line-height: 1.55;
  color: var(--bleu);
}

.bloc-competences{
  margin-top: 20px;
  background: var(--bleu);
  border-radius: 14px;
  padding: 24px;
  color: var(--beige);

  display: flex;
  flex-direction: column;
  align-items: center;

  margin: 0;
  width: 100%;
  max-width: 520px;  
}


.bloc-competences h3{
  font-family: var(--titre);
  font-size: 18px;
  letter-spacing:.5px;
  margin-bottom: 10px;
  text-transform: uppercase;
  color: var(--or);
  text-align: center;
}

.btn-competence{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--or);
  border-radius: 999px;
  padding: 10px 22px;
  color: var(--or);
  font-family: var(--titre);
  font-size: 14px;
  letter-spacing:.3px;
  margin-top: 10px;
}


.bloc-highlight{
  position: relative;
  z-index: 1;
  padding: 64px 40px 48px 0;
  margin-top: -80px;       
}

.bloc-highlight .p-texte,
.bloc-highlight .p-texte--large{
  max-width: 100% !important; 
}


.bloc-highlight::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;

  left: calc(50% - 50vw);
  right: calc(50% - 50vw);

  background: var(--or);
  border-radius: 0 24px 24px 0;
  z-index: -1;
  margin-bottom: 40px;
}

.p-texte--large{
  max-width: 860px; 
}



.footer-custom{
  background:var(--bleu);
  color:var(--or);
  padding:16px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  width: 100%;
  margin-top: auto;
  box-shadow: 0 -10px 22px rgba(0,0,0,0.22);
}

.footer-right{
  display:flex;
  gap:16px;
}

.footer-right img{
  width:22px;
  height:22px;
  transition:transform .2s ease;
}

.footer-right a:hover img{
  transform:scale(1.1);
}


@media (max-width: 1400px){

  .p-texte{ max-width: none; }
  .img-article{ max-width: none; }

  .contenu-detail{
    grid-template-columns: 1.7fr 420px; 
    gap: 48px;
    padding: 40px 60px 80px;
  }

  .capsule-keywords{
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  :root{
    --film-h: clamp(300px, 30vw, 420px);
  }

  .film-frame img,
  .film-frame video{
    width: min(760px, 90%);
    height: calc(var(--film-h) - 30px);
  }


}



@media (max-width: 1100px){

  .entete-detail{ padding: 26px 20px 12px; }

  .entete-gauche{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "titre retour"
      "meta meta";
    align-items: center;
    gap: 10px 14px;
  }

  .titre-projet-detail{
    grid-area: titre;
    font-size: 38px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .btn-retour{
    grid-area: retour;
    margin: 0;
    white-space: nowrap;
  }

  .contenu-detail{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px 20px 70px;
  }

  .p-texte,
  .p-texte--large{ max-width: 100% !important; }
  .img-article{ max-width: 100% !important; }

  .film-wrapper{
    width: 100%;
    left: 0;
    transform: none;
    overflow: hidden;
    margin: 12px 0 6px;
  }

  .film-pellicule{
    display: block;
    background: transparent;
    height: auto;
    padding: 0 20px;
  }

  .film-frame{ display: none !important; }
  .film-frame:first-child{ display: block !important; }

  .film-frame::before,
  .film-frame::after{ display: none !important; }

  .film-frame{
    background: transparent !important;
    border-radius: 18px;
    overflow: hidden;
  }

.film-frame img,
.film-frame video{
  width: 100% !important;
  height: clamp(420px, 55vw, 680px) !important; 
  object-fit: cover;
  display: block;
  background: transparent !important;
}
  .col-droite{ display: contents; }

  .capsule-keywords{ order: 1; }
  .ligne-ronds{ order: 2; }
  .col-gauche{ order: 3; }
  .bloc-apprentissages{ order: 4; }
  .bloc-competences{ order: 5; }

  .capsule-keywords,
  .ligne-ronds,
  .col-gauche,
  .bloc-apprentissages,
  .bloc-competences{
    width: 100%;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
  }

  .capsule-keywords{
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  .ligne-ronds{ justify-content: center; margin-bottom: 10px; }
  .ronds{ justify-content: center; }

  .bloc-apprentissages,
  .bloc-competences{
    max-width: 620px;
    margin-top: 16px;
  }

  .bloc-competences{
    margin: 16px auto 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: center;
  }

  .bloc-highlight{
    background: var(--or);
    border-radius: 18px;
    padding: 22px 18px;
    margin: 18px 0;
    overflow: hidden;
  }

  .bloc-highlight::before{ display:none; }
}



@media (max-width: 800px){
  .film-frame img,
  .film-frame video{
    height: clamp(320px, 60vw, 520px) !important;
  }

  .contenu-detail{
    padding: 20px 16px 60px;
  }
}



@media (max-width: 700px){

  .entete-detail{ padding: 22px 14px 10px; }

  .titre-projet-detail{ font-size: 25px; }

  .film-pellicule{ padding: 0 14px; }

  .film-frame img,
  .film-frame video{
    height: clamp(280px, 74vw, 460px) !important;
  }

  .capsule-keywords{
    margin-top: 10px;
    font-size: 14px;
    padding: 10px 12px;
    text-align: center;
  }

  .p-texte{
    font-size: 14.5px;
    line-height: 1.85;
  }

  .bloc-highlight{
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}



@media (max-width: 520px){

  .entete-gauche{
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .btn-retour{
    margin: 0 !important;
    align-self: flex-start;
  }

  .meta-ligne{
    width: 100%;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 12px;
    font-size: clamp(12px, 3.2vw, 14px);
  }

  .meta-icone{
    height: 16px;
  }

  .meta-item{
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
  }
}




@media (max-width: 360px){
  .meta-ligne{
    flex-wrap: wrap !important;
    white-space: normal !important;
  }
}


@media (min-width: 1100px) and (max-width: 1420px){

  .contenu-detail{
    grid-template-columns: 1.75fr 360px; 
    gap: 40px;
    padding: 40px 40px 80px;
  }

  .p-texte,
  .p-texte--large{
    max-width: 100%;
  }

  .capsule-keywords{
    max-width: 420px;
  }

  .bloc-apprentissages,
  .bloc-competences{
    max-width: 360px;
    width: 100%;
    position: relative;
    z-index: 5;
  }

  .bloc-highlight::before{
    right: calc(50% - 50vw); 
    border-radius: 0 24px 24px 0;
  }
}