@import url('https://fonts.googleapis.com/css2?family=Smooch+Sans:wght@100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Artifika&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Variables */
:root {
  --color-base: #261b25;
  --color-secondary: #120c12;
  --color-base-content: #c59f61;
  --color-nav-content: #fff;

  --bgc-section: #1e151d;

  --shadow-base: 0 2px 8px rgba(0, 0, 0, 0.7),
  0 12px 32px rgba(0, 0, 0, 0.5),
  0 0 0 1px rgba(255, 255, 255, 0.06);

  --color-primary: #db924c;
  --color-primary-content: #000;

  --transition-opacity: opacity 0.25s ease;

  --spacing-md: 1.2rem;

  --radius: 1rem;

  --d-none-md: block;

  --max-w-content: auto;

}

#Refacto {
  
  --columns-2-4: 1fr; /* nombre column --column-md-lg */
  
  @media (min-width: 768px) {
    --d-none-md: none;
    --max-w-content: 56rem;
    --columns-2-4: repeat(2, 1fr);
  }
  @media (min-width: 1024px) {
    --columns-2-4: repeat(4, 1fr);
  }


/* ===== Light CSS Reset ===== */

/* Box sizing cohérent */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Supprime les marges par défaut principales */
body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Hauteur pleine page */
/*html, body {
  height: 100%;
}*/

/* Typographie de base */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Form elements héritent de la typo */
input,
button,
textarea,
select {
  font: inherit;
}

/* Listes : seulement si classe explicite */
ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Liens sans style agressif */
a {
  color: inherit;
  text-decoration: none;
}

/* Empêche les débordements de texte */
p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}



/* Font */

body {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

h1, h2, h3 {
  font-family: "Smooch Sans", sans-serif;
  font-weight: 600;
}

h2, h3 {
  text-align: center;
  font-size: 2rem;
}

footer h2, footer h3 {
  text-align: left;
  font-size: 1.5rem;
}
h1 {
  font-size: 2.3rem;
}

.cta { font-weight: 500; text-transform: uppercase;}

.navbar a { font-weight: 700; font-size: 0.87rem;}

/* Utilitaire */
body { display: grid; grid-template-areas: "header" "main" "footer"; Xzgap: var(--spacing-md); grid-template-rows: auto 1fr auto;}

a.banner, img { display: block;}
a.banner { padding: 1.25rem;}

header { position: sticky; top: 0; z-index: 1000;}

.index section p { text-align: center;}

.carousel {
  width: 100%;
  height: 24rem;
  position: relative;
  overflow: hidden;
  margin-inline: auto;
  border-radius: var(--radius);
}

.carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1.2s ease, transform 6s ease;
}

.carousel img.active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}


.carousel button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  width: 52px;
  height: 52px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);

  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;

  transition: all 0.25s ease;
}

.carousel button {
  transform: translateY(-50%);
}

.carousel button span {
  transform: translateX(1px) translateY(-2px);
}
.colorBaseContent { fill: var(--color-base-content);}
/* Position */
.carousel .prev { left: 18px; }
.carousel .next { right: 18px; }

/* Hover premium */
.carousel button:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: translateY(-50%) scale(1.08);
}

/* Active click */
.carousel button:active {
  transform: translateY(-50%) scale(0.96);
}

.carousel .text, .cards .text { position: absolute; z-index: 2; background-color: color-mix(in srgb, rgb(0, 0, 0) 70%, transparent); width: 100%; bottom: 0; padding: var(--spacing-md); border-radius: 0 0 var(--radius) var(--radius);} 
.carousel .text p, .cards .text { color: var(--color-nav-content);}

.text { padding: var(--spacing-md)}

.cards { display: grid; gap: var(--spacing-md); margin-inline: auto; padding: var(--spacing-md) 0;}

.cards a { display: block; height: 25rem; position: relative; margin-inline: auto; overflow: hidden; border-radius: var(--radius);}

.cards img { object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-base); overflow: hidden;}

.cards { padding: 1rem;}



/*main { display: flex; flex-direction: column;}*/



img { object-fit: contain; width: 100%; height: 100%; object-position: center;}

.navbar button, footer { padding: var(--spacing-md)}

footer a { margin-bottom: .5rem; display: block;}

.navbar { height: 3.06rem;}

.navbar a, footer { color: var(--color-nav-content);}

body ,.navbar, .navbar button { position: relative;}
.navbar button { margin: .5rem;}

.navbar button img { transform: translate(-50%, -50%); top: 50%; left: 50%}

a.banner img { margin-inline: auto;}

footer :is(a, p, h2) { opacity: .8;}

footer, footer > ul { display: grid;}

footer, footer > ul, footer > ul > li:last-child > ul { gap: var(--spacing-md);}

footer > ul { grid-template-columns: var(--columns-2-4);}

footer > :last-child { text-align: center;}

.cta { display: inline-block; padding: .5rem var(--spacing-md); background-color: var(--color-primary); color: var(--color-primary-content); border-radius: .5rem; box-shadow: var(--shadow-base);}

video { object-fit: cover; width: 100%; height: 100%; object-position: center; aspect-ratio: 16 / 9;}

/* Layout */

body { background-color: var(--color-base); color: var(--color-base-content); margin: 0;}

section > h1 { text-align: center; margin: var(--spacing-md) 0;}

/*a.banner { padding: var(--spacing-md);}*/

header, header ul, footer, .bg-secondary { background-color: var(--color-secondary);}

footer { margin-top: 1rem;}

header, header ul, footer { box-shadow: 0 2px 8px rgba(0,0,0,.2);}

.navbar ul { z-index: 2;}

.navbar {
  button { display: var(--d-none-md);}
  button  { width: 1.8rem;} /* potentiel variable */
  button { background-color: transparent;}
  
  button { border: none;/* padding: var(--spacing-md); margin-left: var(--spacing-md);*/}

  button img, ul { position: absolute; transition: var(--transition-opacity);}

  button > :first-child {opacity: 1;}
  img.close, ul { opacity: 0;}
}

.navOpen {
  img.close, ul { opacity: 1;}
  .navbar button > :first-child { opacity: 0;}
}
section { margin-top: var(--spacing-md);}
.intro .wrapperSection, .wrapperDiv { padding: var(--spacing-md);}
/*section:not(section.intro, section.carouselSection, .lettreReseaux, .contact .stage), */
 .index .presentation, .lettreReseaux .wrapperSection div, .contact .stage .wrapperSection { background-color: var(--bgc-section);}

section, .lettreReseaux .wrapperSection div, .contact .stage .wrapperSection { border-radius: var(--radius);}

.index section.intro,  section.carouselSection{ padding: 0;}

.contact .intro { background-color: transparent; font-size: 1.2rem;}

.contact .intro .wrapperSection { background-color: var(--bgc-section); border-radius: var(--radius);}

.contact img.illustration { display: none;}

.contact .icone { width: 2rem;}

.lettreReseaux svg { width: 4rem;}

.contact .intro ul li { margin-top: var(--spacing-md);}

.contact .intro li > * , .contact .lettreReseaux .wrapperSection, .contact .reseaux ul { display: flex; gap: var(--spacing-md);}

.reseaux ul { justify-content: center;}

.contact .wrapperSection > div { display: flex; flex-direction: column; justify-content: space-between;}



.contact .lettreReseaux, .contact .stage p { /*font-size: 1.2rem;*/ text-align: center;}

.lettreReseaux .cta, .lettreReseaux p { margin: var(--spacing-md);}

.contact .stage > div { display: flex; gap: var(--spacing-md); justify-content: space-between;}
.contact .stage .wrapperSection > div { display: grid; gap: var(--spacing-md); justify-content: center;}

.contact .stage .wrapperImg { overflow: hidden; border-radius: var(--radius);}

.contact .stage .wrapperSection > div > div { display: flex; justify-content: center; align-items: center;}

.contact .stage img { border-radius: var(--radius); margin-inline: auto;}

.exposition .container { display:flex; justify-content: space-around; width: 90rem; margin-inline: auto; background-color: var(--bgc-section);}
.exposition .imgContainer { max-width: 500px; max-height: 500px; overflow: hidden;}
.imgContainer img { object-fit: cover;}
.exposition .container, .imgContainer img {  border-radius: var(--radius);}

.textContainer { display: flex; flex-direction: column; flex-grow: 1; align-self: center; justify-content: center; align-content: center; gap: var(--spacing-md); max-width: 40rem; text-align: center;}

.exposition .container, .imgContainer, .textContainer { padding: var(--spacing-md);}


footer > a img { width: 10.5rem;}
footer {
  img {width: 1.5rem;}
}

footer > ul > li:last-child > ul { display: inline-grid;grid-template-areas: "facebook instagram" "lettre lettre"; grid-template-columns: auto auto;}
footer > ul > li:last-child > ul > :first-child { grid-area: facebook;}
footer > ul > li:last-child > ul > :nth-child(2) { grid-area: instagram;}
footer > ul > li:last-child > ul > :last-child { grid-area: lettre;}

.wrapperImg { height: 360px; width: 610px; max-width: 100vw;}
.wrapperImg img { object-fit: cover;}
.stage .wrapperDiv.text { flex-grow: 1; align-self: center; max-width: 38rem;}

/* #tarteaucitronRoot { max-width: 100vw;} */




/* Responsive */

@media (max-width: 767px) {
  .navbar ul { transform: translateY(100%); bottom: -.1rem; border-radius: 0 0 var(--radius) 0;}
  .navbar ul { display: flex; flex-direction: column; gap: var(--spacing-md); padding: var(--spacing-md);}
  .navbar { height: 3rem;}

  main { display: block;}
  .contact .lettreReseaux .wrapperSection {
    flex-direction: column-reverse;
  }
  .contact .stage > div { flex-direction: column;}

  .contact .section { padding: 0;}

  .exposition .container { max-width: 100vw; flex-direction: column;}

  .exposition .imgContainer { width: 100vw;}
 
}

@media (min-width: 768px) {
  .link-underline {
  position: relative;
  text-decoration: none;
  }

  .link-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;

    width: 100%;
    height: 1.3px;

    background: currentColor;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 220ms ease;
  }

  .link-underline:hover::after {
    transform: scaleX(1);
  }

  a.banner img { max-width: 47.8rem;}
  a.banner img { padding: 1.25rem 0;}


  footer > :is(a, ul) { width: 100%; max-width: 96rem;}

  .navbar ul, footer > :is(a, ul) { margin-inline: auto;}

  .navbar { display: flex;}

  .navbar {
    ul { opacity: 100; position: relative; display: flex; justify-content: space-between; align-items: center; gap: 2rem;}
  }

  .carousel, .cards { width: 80rem;}
  .carousel { height: 100rem;}
  video, .carousel { max-height: 80vh;}
  .carousel { border-radius: var(--radius);}
  .contact .wrapperSection, .contact .stage .wrapperSection { width: 90rem; max-width: 100vw;margin-inline: auto;}

  .cards { grid-template-columns: repeat(2, 1fr);}

  .contact img.illustration { display: block;}

  .contact .intro .wrapperSection { display: flex; justify-content: space-around; align-items: center;}

  .contact .illustration { width: 16rem; background-color: #ffffff; border-radius: var(--radius);}

  /*.contact .intro ul { font-size: 1.5rem;}*/

  .contact .icone { width: 2.8rem;}

  .index .intro video { min-height: 80vh;}

}

@media (min-width: 1024px){
  .cards a {height: 22rem; width: 29rem;}
  .cards {gap: 2rem;}
  .cards img {
    transition: transform 0.35s ease;
  }

  .cards a:hover img {
    transform: scale(1.06);
  }

  .contact .intro ul { display: grid; grid-template-areas: "tel gps" "mail gps"; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); align-items: center;}

  .contact .tel { grid-area: tel;}
  .contact .mail { grid-area: mail;}
  .contact .gps { grid-area: gps;}
/*.stage > div:nth-child(1) { display: flex; justify-content: center;}*/
  section, .lettreReseaux .wrapperSection div, .contact .stage .wrapperSection { padding: var(--spacing-md);}

}

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


body { font-family: "Poppins", sans-serif; background-color: var(--color-base); color: var(--color-base-content); width: 100%; height: 100%; padding: 0; margin: 0;}
.bg-secondary { background-color: var(--color-secondary);}
.style-section { background-color: var(--bgc-section); overflow: hidden;}

.textCenter { text-align: center;}

h1, h2, h3, h4 { font-family: "Smooch Sans", sans-serif;}

a, a:visited, a:active { text-decoration: none; color: var(--color-base-content);}

.navbar a, .navbar a:visited, .navbar a:active { color: var(--color-nav-content)}



ul, ol, li, p, h2, h3, h4 { list-style: none; margin: 0; padding: 0;}

img, video, svg { display: block; object-fit: contain; width: 100%; height: 100%;}

.cta { display: inline-block; background-color: var(--color-primary); color: var(--color-primary-content); padding-inline: .75rem; padding-block: .5rem; font-weight: 600; font-size: .75rem; text-transform: uppercase; border-radius: .5rem;}

a.cta { color: var(--color-primary-content);}

.max-width { max-width: 80rem; margin-inline: auto;}

section .container { padding: 1rem;}

section { margin-block: 1rem;}

.banner {display: block; padding: 1rem; user-select: none;}

.wrapperStickyNavBar { position: relative;}

header { position: sticky; top: 0; z-index: 100;}

.navbar ul { color: var(--color-nav-content); font-size: .8rem;font-weight: 700;}

.navbar{
  background: var(--color-secondary);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  transition: background 200ms ease, backdrop-filter 200ms ease;
}



.navbar.is-sticky{
  background: rgba(20, 20, 20, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.navOpen .navbar, .navbar:hover, footer { background-color: var(--color-secondary);}

a.link-underline { position: relative;}

a.link-underline.current::after { content: ""; background: currentColor; position: absolute; left:0; top: 105%; width: 100%; height: .11rem;}

a.current { pointer-events: none; user-select: none;}

footer, footer a, footer a:visited, footer a:active { color: rgb(from var(--color-nav-content) r g b / 70%); font-weight: 300;}

footer .brand { width: 10.5rem;}
footer h2 { font-weight: 600; margin-bottom: .5rem;}
footer .container { display: grid; gap: 1rem; justify-items: left; padding: 1rem;}
footer ul { display: grid; gap: .5rem;}
footer .socials { display: inline-block;}
footer .socials ul { grid-template-areas: "facebook instagram" "lettre lettre"; align-items: center; justify-content: center; gap: 1rem;}

.facebook img, .instagram img, .icone { width: 40px;}

footer .facebook { grid-area: facebook; display: flex; justify-content: center;}
footer .instagram { grid-area: instagram; display: flex; justify-content: center;}
footer .lettre { grid-area: lettre;}

footer .copyRight { display: flex; justify-content: center; width: 100%;}


.intro h1, .justText h2, .text h2, .title { font-weight: 600; font-size: 1.875rem; text-align: center;}
.intro video { width: 100%; object-fit: cover;}

p > br { display: block; margin-bottom: 1rem;}

.listDisc { margin-left: 1rem;}
.listDisc li { list-style: disc; margin-bottom: 1rem;}

.justText, .text { text-align: center;}
.text { padding: 1rem;}
.justText p, .text p { font-weight: 300;}

/*test*/
.justText { display: grid; gap: 1rem;}
/*test*/

.carousel { position: relative;}

.carousel img { position: absolute; inset: 0; width: 100%; object-fit: cover;}



.carousel {
  height: 24rem;
  position: relative;
  overflow: hidden;
}

.carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1.2s ease, transform 6s ease;
}

.carousel img.active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}


.carousel button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  width: 52px;
  height: 52px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);

  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;

  transition: all 0.25s ease;
}

.carousel button {
  transform: translateY(-50%);
}

.carousel button span {
  transform: translateX(1px) translateY(-2px);
}

.carousel .prev { left: 18px; }
.carousel .next { right: 18px; }

.carousel button:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: translateY(-50%) scale(1.08);
}

.carousel button:active {
  transform: translateY(-50%) scale(0.96);
}

.text { position: absolute; z-index: 2; background-color: color-mix(in srgb, rgb(0, 0, 0) 70%, transparent); width: 100%; bottom: 0;} 
.text p, .cards .text { color: var(--color-nav-content);}

.cards { display: grid; gap: var(--spacing-md); margin-inline: auto;}

.cards a { display: block; height: 25rem; position: relative; margin-inline: auto; overflow: hidden; border-radius: var(--radius);}

.cards img { object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-base); overflow: hidden;}

.cards { padding: 1rem;}

/* contact */

.listLinks .item { display: flex; align-items: center; gap: .5rem; height: 3.75rem;}

.illustrationContainer { padding: 1rem;}

.illustration { border-radius: .5rem; object-fit: cover;}

.containerDoublez { padding: 1rem;}

.containerDouble { display: grid; gap: 1rem;}

.ctaContainer { display: flex; justify-content: center; align-items: center; gap: 1rem;}

.ctaContainer .icone { width: 70px;}

.justText.container { align-self: center;}

.container.centerContent { display: flex; justify-content: center; align-items: center;}

.gap1 { display: grid; gap: 1rem;}

.container.self-auto { align-self: auto;}

/* carousel v2 */


.carouselV2 ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem;}

.carouselV2 .display {
  position: relative;
  height: 15rem;
  max-height: 50vh;
  overflow: hidden; 
  margin-bottom: 1rem;
}

.carouselV2 .display img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

  display: block;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.carouselV2 .display img.active {
  opacity: 1;
  z-index: 2;
}

.carouselV2 img { border-radius: var(--radius);}

.carouselV2 ul .active { border: 2px solid var(--color-primary);}


/* Cards */

.listCards { display: grid; gap: 1rem;}

.listCards li { background-color: var(--color-secondary); border-radius: .5rem; overflow: hidden;}

.listCards img { object-fit: cover; height: 200px;}

.listCards .content { padding: 1rem;}

.listCards h3 { font-size: 2.25rem; font-weight: 600;}
.price span { font-weight: 500; font-size: 2.1rem;}
.listCards h4 { font-size: 1.25rem; font-family: "Poppins", sans-serif; font-weight: 500;}

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

.price .cta { font-size: 1.125rem;}

.cta.bgc-wecandoo { background-color: #b4b4b4; max-width: 15rem;}

/* date list */

.datesList { display: grid ;gap: 2rem;}

.datesList a { color: var(--color-primary-content);}

.datesList .date { background-color: white; display: block;}

.date { border-radius: var(--radius); width: 100%; height: 100%;}

.date {text-align: center;}

/*.events div.container *, .objectif * {text-align: left;}*/

.date .mois {padding: .5rem;}

.date { height: 10rem; width: 10rem; margin-inline: auto; color: var(--color-primary-content);}

.date .mois { font-size: 1.3rem; font-weight: 500; background-color: var(--color-primary);}

.date .number { font-size: 2.9rem; font-weight: 700;}

.date .week { font-weight: 400;}

.textLeft { text-align: left;}

.videoContainer { max-width: 42rem; border-radius: .5rem; overflow: hidden; margin-inline: auto;}

.listPress a, .listPress button { display: block; background-color: transparent; padding: 0; margin: 0; border-radius: 0; border: none; height: 300px; width: 100%;}

.listPress li { position: relative; margin: 1rem; border-radius: .5rem; overflow: hidden;}

.listPress img { object-fit: cover; height: 100%; width: 100%; object-position: center;}

p.textBase { font-size: 1rem; font-weight: 400;}

h3.textBase {color: var(--color-base-content); font-size: 1.5rem;}

.itemsCreation a { display: block; position: relative; height: 300px;aspect-ratio: 1/1; margin-inline: auto; border-radius: .5rem; overflow: hidden; background-color: #000; box-shadow: var(--shadow-base);} 

.itemsCreation .content { position: absolute; bottom:0; left: 0; width: 100%; height: 50%; background-color: oklch(23.988% 0.0249 329.306 / 0.742); display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center;}

.itemsCreation img { object-fit: cover; }
img.contain { object-fit: contain;}

.justText500 { align-self: center; padding: 2rem; font-size: 1.2rem; font-weight: 400; text-align: center;}

.caracteristiques, .caracteristiques .content { padding: 1rem;}

.caracteristiques .content { padding: 2rem;}

.caracteristiques table { width: 100%; text-align: left; border-collapse: collapse;}

.caracteristiques :is(td, th) { padding: 1rem 2rem; font-size: .9rem; border-top: .5px solid #ffffff2c;}

.containerReflets { position: relative; width: 100%; height: 100%;}

.containerReflets img { position: absolute; object-fit: contain ;top: 0; left: 0; width: 100%; height: 100%;}

.horlogeReflets { height: 300px; aspect-ratio: 1/1; margin-inline: auto;}

@media (max-width: 767px){
  .navbar ul { background-color: var(--color-secondary); position: absolute; top: 100%; padding: 1rem .5rem; border-radius: 0 0 .5rem 0; display: grid; gap: 1rem;}

  .navbar { position: relative; display: flex; padding: .5rem 0;}

  .navOpen { overflow: hidden;}

  #buttonMenu img, .navbar ul { transition: var(--transition-opacity);}

  #buttonMenu { width: 1.4rem; height: 1.4rem; padding: 0; margin: 0; border: none; background-color: transparent; position: relative; margin-left: .5rem;}

  .navbar ul, .close { opacity: 0; pointer-events: none; visibility: hidden;}

  #buttonMenu img { position: absolute; inset: 0;}

  .navOpen img.close, .navOpen .navbar ul { opacity: 1; visibility: visible; pointer-events: all;}

  .navOpen #buttonMenu > :first-child { opacity: 0;}

  .carousel { min-height: 31rem;}
}

@media (min-width: 700px){
  .itemsCreation { grid-template-columns: repeat(2, 1fr);}
}

@media (min-width: 768px){
  .banner { max-width: 48rem; margin-inline: auto;}
  .navbar button { display: none;}
  .navbar ul { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; width: 100%; max-width: 42rem; margin-inline: auto; height: 50px;}

  .intro p { font-size: 1.25rem;}

  a.link-underline::after { content: ""; background: currentColor; position: absolute; left:0; top: 105%; width: 100%; height: .11rem; transform: scaleX(0);transform-origin: left;  transition: transform 220ms ease;}

  a.link-underline:hover::after, .navbar a.current::after { transform: scaleX(1);}

  footer .container { padding-inline: 2rem;}

  footer .container { grid-template-areas: "brand brand" " service principal" "other social" "copy copy";}

  footer .brandLink { grid-area: brand;}
  footer .service { grid-area: service;}
  footer .principalLinks { grid-area: principal;}
  footer .otherLinks { grid-area: other;}
  footer .copyRight { grid-area: copy;}

  .intro h1 { font-size: 2.5rem; }

  .carousel { height: 50rem; max-height: 80vh;}

  .cards { grid-template-columns: repeat(2, 1fr);}

  .cards li, .listCards li { max-width: 448px; margin-inline: auto;}

  .containerDouble { grid-template-columns: 1fr 1fr;}

  .intro .containerDouble { align-items: center;}

  .illustration {margin: 0; max-width: 500px; margin-inline: auto;}

  .listLinks { margin-inline: auto; font-size: 1.3rem;}

  .listLinks .item { gap: 1rem; height: 4rem;}

  .carouselV2 ul { grid-template-columns: repeat(4, 1fr);}
  .carouselV2 .display { height: 30rem;}

  .listCards { grid-template-columns: repeat(2, 1fr);}


  .listCards li { display: flex; flex-direction: column;}
  .listCards .content { flex-grow: 1;}

  .datesList { grid-template-columns: repeat(3, 1fr);}

  .listPress { grid-template-columns: repeat(2, 1fr);}

  .flex-md{ display: flex; flex-wrap: wrap; width: 100%;}

  .justText500 { text-align: left;}

  .flex-md .textCenter {text-align: left;}

  .md50, .flex-md > :first-child, .flex-md > :nth-child(2) { width: 50%;}

}

@media (min-width: 1024px){
  footer .container { grid-template-areas: "brand brand brand brand" " service principal other social" "copy copy copy copy";}

  .intro video { max-height: 90vh; width: 100%; object-fit: cover;}

  .presentation .justText p { font-size: 1.2rem;}

  .carousel { border-radius: .5rem;}

  .cards img { transition: transform 0.35s ease;}

  .cards a:hover img { transform: scale(1.06);}

  .listLinks .item { gap: 1rem; height: 5rem;}

  .style-section { border-radius: .5rem;}

  .illustrationContainer.portrait { height: 500px;}

  .illustrationContainer .illustration { object-fit: cover; width: 100%; height: 100%; max-width: none;}

  .carouselV2 .display { height: 20rem;}

  .containerDoubleLg { display: grid; ;grid-template-columns: 1fr 1fr;}
  .datesList { display: flex; justify-content: center;}

  .listPress { grid-template-columns: repeat(4, 1fr);}

  /*.itemsCreation .content { opacity: 0; height: 100%; width: 100%;}

  .itemsCreation a:hover .content { opacity: 1; transition: var(--transition-opacity);}*/

  .itemsCreation .content { height: 100%; opacity: 0; transition: var(--transition-opacity);}

  .itemsCreation a:hover .content { opacity: 1;}

  .itemsCreation { grid-template-columns: repeat(3, 1fr);}
  .horlogeReflets .illustration { height: 100%; object-fit: contain;}
}

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