.homebanner {
  width: 100%;
  height: calc(100vh - 5rem); 
  height: calc(100dvh - 5rem); 
}
.homebanner .video-box{
  height: 100%;
} 
.homebanner video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.homebanner .icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Le repère « la page continue ».
   C'était un disque noir plein de 60 px posé au milieu d'une perspective au
   soleil couchant : la tache la plus sombre de l'écran, donc la première chose
   que l'œil allait chercher — avant l'image, alors que l'image est le métier de
   la maison. Or ce qui dit « ça descend », ce n'est pas le disque : c'est le
   mouvement. On garde donc le chevron seul, qui respire lentement, et une
   ombre portée pour qu'il reste lisible quelle que soit la vue derrière.
   La zone cliquable, elle, reste à 60 px : elle est simplement devenue
   invisible, la souris et le doigt y trouvent toujours la même cible. */
.homebanner .icon a {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 0;
  background-color: transparent;
  position: relative;
  transition: 0.3s;
}
.homebanner .icon a::after {
  content: "";
  display: block;
  position: absolute;
  width: 22px;
  height: 22px;
  top: 50%;
  left: 50%;
  border: 0;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  background: none;
  transform: translate(-50%, -50%) rotate(45deg);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
  opacity: 0.82;
  transition: opacity 0.3s;
  animation: ir-respire 2.6s ease-in-out infinite;
}
.homebanner .icon a:hover::after {
  opacity: 1;
}
/* Une descente de 7 px, puis retour : de quoi être vu du coin de l'œil sans
   jamais réclamer l'attention. */
@keyframes ir-respire {
  0%, 100% { transform: translate(-50%, -50%) rotate(45deg); }
  50%      { transform: translate(-50%, calc(-50% + 7px)) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .homebanner .icon a::after {
    animation: none;
  }
}
.home_main {
  padding-top: 5rem;
  padding-bottom: 50px;
}
.home_main .head {
  margin-bottom: 94px;
  max-width: 1104px;
  margin: 0 auto;
}
.home_main .head h1 {
  font-size: 64px;
  font-weight: 400;
  line-height: 75px;
  color: #000;
  letter-spacing: 4px;
}
.home_main .head h1 span {
  font-size: 64px;
  line-height: 75px;
  font-weight: 200;
  color: #000;
}
.home_main .imgbox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 99px 66px;
  margin-top: 80px;
  padding-left: 14px;
}
.home_main .imgbox .text {
  max-width: 405px;
  padding-top: 26.73%;
  margin-left: 27%;
}
.home_main .imgbox .text strong {
  font-size: 40px;
  font-weight: 900;
  color: #000;
  display: block;
  margin-bottom: 26px;
}
.home_main .imgbox .text span {
  display: block;
  font-size: 18px;
  font-weight: 300;
  color: #000;
}
.home_main .imgbox .text p {
  font-size: 16px;
  font-weight: 300;
  line-height: 26px;
  color: #000;
  margin-top: 23px;
  margin-bottom: 37px;
}
.home_main .imgbox .text a {
  display: flex;
  column-gap: 10px;
  align-items: center;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.6px;
  cursor: pointer;
  width: fit-content;
}
.home_main .imgbox .text a:hover::before {
  transform: translateX(5px);
}
.home_main .imgbox .text a::before {
  content: "";
  display: block;
  width: 6px;
  height: 12px;
  background: url(../img/Vector.svg) no-repeat;
  background-position: center;
  background-size: contain;
  transition: 0.3s;
}
.home_main .imgbox .img-i a {
  display: block;
}
.home_main .imgbox .img-i a:hover img {
  transform: scale(1.03);
}
.home_main .imgbox .img-i a:hover .img span {
  opacity: 1;
}
.home_main .imgbox .img-i:nth-child(odd) {
  margin-top: -58.1761%;
}
.home_main .imgbox .img-i .img {
  width: 100%;
  aspect-ratio: 636/889;
  margin-bottom: 23px;
  overflow: hidden;
  position: relative;
}
.home_main .imgbox .img-i .img img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: 0.3s;
}
.home_main .imgbox .img-i .img video ,
.home_main .imgbox .img-i .img iframe
{
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: 0.3s;
} 
.home_main .imgbox .img-i .img span {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  text-transform: uppercase;
  font-size: 22px;
  gap: 1rem;
  transition: all 0.3s;
  opacity: 0;
}
.home_main .imgbox .img-i .img span::before {
  content: "";
  display: block;
  width: 10px;
  height: 18px;
  background: url(../img/Vector.svg) no-repeat;
  background-position: center;
  background-size: contain;
  transition: 0.3s;
  filter: contrast(0) brightness(2);
  transform: translateY(-1px);
}
/* « Image », « Film », « VR » étaient en <strong> : la page annonçait ses trois
   rubriques sans qu'aucune ne soit un titre, et n'avait donc qu'un seul H2 pour
   tout l'accueil. Le rendu ne change pas — seule la balise change. */
.home_main .imgbox .img-i strong,
.home_main .imgbox .img-i .ir-rubrique {
  font-size: 28px;
  font-weight: 900;
  color: #000;
  margin: 0;
  line-height: 1.2;
}
.home_main .imgbox .img-i p {
  font-size: 24px;
  font-weight: 300;
  color: #000;
  margin-top: 24px;
}
.homearticles {
  padding-top: 51px;
  padding-bottom: 128px;
}
.homearticles .head {
  margin-bottom: 32px;
}
.homearticles .head h2 {
  font-size: 40px;
  font-weight: 400;
  color: #000;
}
.homearticles .articlesllist {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(4, 1fr);
  gap: 39px 16px;
}
.homearticles .articlesllist .article a {
  display: block;
}
.homearticles .articlesllist .article a:hover img {
  transform: scale(1.03);
}
.homearticles .articlesllist .article a:hover .bdt a {
  opacity: 1;
}
.homearticles .articlesllist .article .img {
  width: 100%;
  margin-bottom: 10px;
  aspect-ratio: 389/250;
  overflow: hidden;
}
.homearticles .articlesllist .article .img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: 0.3s;
}
.homearticles .articlesllist .article .info strong {
  font-size: 18px;
  font-weight: 500;
  color: #000;
}
.homearticles .articlesllist .article .info span {
  font-size: 13px;
  font-weight: 400;
  color: #000;
  display: block;
  margin-top: 8px;
}
.homearticles .articlesllist .article .info p {
  font-size: 16px;
  font-weight: 300;
  line-height: 26px;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin-top: 7px;
}
.homearticles .bdt,
.ir-accueil-concours .bdt {
  margin-top: 56px;
}
.homearticles .bdt a,
.ir-accueil-concours .bdt a {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: #000;
  display: flex;
  align-items: center;
  transition: 0.3s;
  cursor: pointer;
}
.homearticles .bdt a:hover,
.ir-accueil-concours .bdt a:hover {
  color: rgba(0, 0, 0, 0.6);
}
.homearticles .bdt a::before,
.ir-accueil-concours .bdt a::before {
  content: "";
  display: flex;
  width: 24px;
  height: 24px;
  background: url(../img/chevron-right.svg) no-repeat center / contain;
}
.homebanner .icon {
  display: block!important; 
  position: absolute;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (min-width: 1513px) {
  .homebanner {
    /* height: auto; */
    aspect-ratio: 1920/1080;
  }
  
  .home_main .head {
    max-width: unset;
  }
  .home_main .head h1 {
    letter-spacing: 3px;
  }
  .home_main .imgbox {
    gap: 100px 6.43275%;
    padding: 0;
  }
  .home_main .imgbox .text {
    max-width: 438px;
    margin-left: 22.5%;
  }
  .home_main .imgbox .text p {
    font-size: 20px;
    line-height: 1.5;
  }
  .homearticles {
    max-width: 1662px;
    margin: 0 auto;
  }
  .homearticles .articlesllist .article .info strong {
    font-size: 24px;
  }
  .homearticles .articlesllist .article .info p {
    font-size: 20px;
    line-height: 1.5;
    max-width: 352px;
  }
}

/* ------------------------------------------------------------------------
   « Concours remportés par nos clients ».
   Ce bloc portait ses marges en style inline, dont un « padding: 0 2rem » sur
   son .content — le seul du thème. Il rentrait donc de treize pixels de chaque
   côté par rapport au H1, aux trois rubriques et au pied de page, qui s'en
   tiennent tous au padding de .content. La règle vit ici, et l'horizontale est
   laissée au conteneur commun : c'est lui qui aligne toute la page.
   ------------------------------------------------------------------------ */
.ir-accueil-concours {
  padding: 0 0 5rem;
}

/* ------------------------------------------------------------------------
   « À qui s'adressent nos images » : les quatre commandes que l'atelier sert.
   Elles reprennent exactement les quatre pages de spécialité, qui n'avaient
   jusqu'ici aucun lien depuis l'accueil hormis celle des concours.
   ------------------------------------------------------------------------ */
.ir-publics {
  padding: 0 0 90px;
}
.ir-publics-titre {
  font-size: 28px;
  font-weight: 900;
  color: #000;
  margin-bottom: 34px;
}
.ir-publics-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px 30px;
}
.ir-public {
  display: block;
  color: #000;
  border-top: 1px solid #000;
  padding-top: 14px;
  transition: 0.25s;
}
.ir-public:hover {
  color: #000;
  border-top-color: #c8c8c8;
}
.ir-public-titre {
  display: block;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
.ir-public:hover .ir-public-titre {
  transform: translateX(4px);
  transition: 0.25s;
}
.ir-public-texte {
  display: block;
  font-size: 15px;
  font-weight: 300;
  line-height: 24px;
  color: #333;
}
@media (max-width: 1024px) {
  .ir-publics-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ir-publics { padding-bottom: 60px; }
}
@media (max-width: 620px) {
  .ir-publics-grille { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ir-publics-titre { font-size: 22px; margin-bottom: 24px; }
}

/* ------------------------------------------------------------------------
   Titres de l'accueil.
   Ils étaient en ClanOT graisse 900 ; la hiérarchie vient désormais de la
   casse et de l'espacement plutôt que du gras — un trait léger s'accorde
   mieux au logo, lui-même fin et géométrique. La famille et les @font-face
   vivent dans global.css : tout le site est en Roboto, cette feuille ne
   garde que le dessin des titres.
   Deux autres familles ont été essayées et restent dans l'historique git :
   Chakra Petch (5bb1cbe) et Barlow (6d6ab6d).
   ------------------------------------------------------------------------ */
/* Le H1 : fin comme le trait du logo. */
.home_main .head h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 200;
  letter-spacing: 2px;
}

/* Les trois rubriques : capitales espacées, graisse légère. */
.home_main .imgbox .img-i .ir-rubrique {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  /* Ces titres portaient un mot — « Image », « Film », « VR » — et 40 px leur
     allaient. Ils portent maintenant le terme que l'on cherche vraiment
     (« Films et animations 3D »), qui passait à trois lignes à cette taille. */
  font-size: 28px;
  letter-spacing: 0.08em;
  line-height: 1.25;
}

/* « Un atelier dirigé par un architecte » */
.home_main .imgbox .text strong {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 34px;
}

/* Titres des deux sections basses. */
.ir-publics-titre,
.ir-accueil-concours .head h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.ir-accueil-concours .head h2 {
  font-size: 28px;
  color: #000;
  margin-bottom: 8px;
}