/* Beaux Voyages — styles et adaptation mobile */

@font-face {
  font-family:Lunasima;
  src:url('assets/Lunasima.woff2') format('woff2');
  font-display:swap;
}

@font-face {
  font-family:MontserratAlternates;
  src:url('assets/montserrat-alternates.woff2') format('woff2');
  font-display:swap;
}



:root {
  --dark: rgba(30, 30, 30, 0.60);
  --blue:#326381;
  --white:#fff;
  --accent:#749de6;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:25px;
}

body {
  margin:0;
  color:white;
  background: linear-gradient(
  #002563 15%,
  #0248c7 65%,
  #002563
);
  font:16px/1.65 MontserratAlternates,Arial,sans-serif;
}

#mentions-legales {
  padding: 50px;
}


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

a:focus-visible,button:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px;
}

.skip {
  position:absolute;
  top:-100px;
  background:var(--dark);
  padding:12px;
  z-index:20;
}

.skip:focus {
  top:10px;
}

.wrap {
  width:min(1320px,calc(100% - 64px));
  margin:auto;
}

.masthead {
  position:relative;
  min-height:600px;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

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

.masthead:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(#0003,#0001 40%,#0009);
}

.signature-box {
  position:absolute;
  top:0;
  left:0;
  z-index:2;
  background:black;
  border-radius:0 0 28px 0;
  width:210px;
  padding:22px 30px 18px;
  text-align:center;
}

.signature-box img {
  display:block;
  width:145px;
  height:66px;
  object-fit:contain;
  margin:auto;
}

.signature-box p {
  font:18px/1.5 Truckin,Arial,sans-serif;
  margin:8px 0 0;
}

.masthead nav {
  position:fixed;
  top:25px;
  right:32px;
  z-index:2;
  display:flex;
  gap:28px;
  background:black;
  padding:12px 23px;
  border-radius:22px;
  font-size:14px;
}

.masthead nav a:hover {
  color:var(--accent);
}

.hero-title {
  position:relative;
  z-index:1;
  text-align:center;
  padding:550px 24px 50px;
 
}

.hero-title h1 {
  font:400 clamp(65px,8vw,116px)/1.12 Lunasima,Arial,sans-serif;
  margin:0 0 15px;
}

.hero-title p {
  font:400 clamp(22px,3vw,32px)/1.4 Lunasima,Arial,sans-serif;
  margin:0;
}

.hero-title a {
  display:inline-block;
  font-size:14px;
  margin-top:32px;
  padding:9px 23px;
  border:1px solid #fff;
  border-radius:20px;
  background:#1e1e1e8c;
  text-shadow:none;
}

.hero-title a:hover {
  background:#1e1e1e;
}

.welcome {
  background:var(--dark);
  padding:25px 0;
}

.welcome .wrap {
  display:flex;
  align-items:center;
  gap:28px;
}

.welcome img {
  width:122px;
  height:122px;
  flex-shrink:0;
  border-radius:22px;
  object-fit:cover;
}

.welcome p {
  margin:0 0 8px;
}

.welcome strong {
  font:26px Lunasima,Arial,sans-serif;
}

.welcome .signed {
  font:20px Lunasima,Arial,sans-serif;
  color:#749de6;
}

.collection {
  padding:48px 0 55px;
}

.section-heading {
  text-align:center;
}

.section-heading h2,.about h2 {
  font:400 clamp(34px,4vw,47px)/1.2 Lunasima,Arial,sans-serif;
  /* text-shadow:2px 2px #16252e; */
  margin:0 0 10px;
}

.count {
  font-size:13px;
  color:#e2ecf0;
}

.filters {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px;
  margin:24px 0 32px;
}

button {
  font:14px MontserratAlternates,Arial,sans-serif;
  padding:10px 18px;
  border:1px solid #ffffff7a;
  border-radius:20px;
  background:#1e1e1e99;
  color:white;
  cursor:pointer;
}

button:hover,button[aria-pressed=true] {
  background:#fff;
  color:#1e1e1e;
  border-color:#fff;
}

.grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:25px;
}

.card {
  display:flex;
  flex-direction:column;
  background:var(--dark);
  padding:6px 6px 18px;
  border-radius:25px;
  border:0px solid #1e1e1e;
  overflow:hidden;
  box-shadow:0 7px 17px #0003;
  transition:transform .2s,border-color .2s;
}

.card>img {
  display:block;
  width:100%;
  height:235px;
  object-fit:cover;
  border:0px solid #000;
  border-radius:20px;
}

.card:hover {
  transform:translateY(-5px);
  border-color:#fff;
}

.card:hover>img {
  border-color:transparent;
}

.card-copy {
  text-align:center;
  padding:13px 10px 0;
  display:flex;
  flex-direction:column;
  flex:1;
  align-items:center;
}

.location {
  font-size:12px;
  color:#d2d2d2;
  order:2;
  margin-bottom:12px;
}

.card h3 {
  font:400 29px/1.2 Lunasima,Arial,sans-serif;
  margin:0 0 7px;
  overflow-wrap:anywhere;
}

.discover {
  font-size:13px;
  border-bottom:1px solid #ffffff80;
  order:3;
  margin-top:auto;
}

.card[hidden] {
  display:none;
}

.note {
  text-align:center;
  color:#e0e9eb;
  font-size:13px;
  margin:25px 0 0;
}

.about {
  background: var(--dark);
  padding:35px 40px;
  border-radius:25px;
  display:grid;
  grid-template-columns:1fr 1.65fr;
  gap:40px;
  margin-bottom:50px;
}

.about h2 {
  font-size:34px;
}

.about p {
  margin:0 0 14px;
}

.about a {
  font-size:14px;
  text-decoration:underline;
  text-underline-offset:5px;
}

.eyebrow {
  font-size:13px;
  color:#749de6;
  margin-bottom:15px!important;
}

.signed {
  font-family:Lunasima,Arial,sans-serif;
  font-size:22px;
}

footer {
  background:black;
  padding:27px 0;
  border-top:1px solid #ffffff20;
}

footer .wrap {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
}

footer .brand {
  font:27px Lunasima,Arial,sans-serif;
}

footer p {
  font-size:12px;
  color:#ccc;
  margin:0;
}

.footer-links {
  display:flex;
  gap:25px;
  font-size:14px;
}

@media(min-width:1600px) {
  .masthead {
    min-height:690px;
  }
  .card>img {
    height:265px;
  }
}

@media(max-width:950px) {
  .grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .masthead {
    min-height:520px;
  }
  .about {
    gap:25px;
  }
  .hero-title h1 {
    font-size:85px;
  }
  .signature-box {
    width:170px;
    padding:16px 20px;
  }
  .signature-box img {
    width:130px;
  }
}

@media(max-width:600px) {
  .wrap {
    width:calc(100% - 28px);
  }
  .masthead {
    min-height:500px;
  }
  .signature-box {
    width:145px;
    padding:14px 15px;
  }
  .signature-box img {
    width:112px;
    height:55px;
  }
  .signature-box p {
    font-size:15px;
  }
 .masthead nav {
    position: fixed;
    top: auto;
    bottom: 15px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);

    z-index: 1000;

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

    gap: 6px;
    padding: 8px 14px;

    width: max-content;
    max-width: calc(100% - 20px);

    font-size: 13px;
    white-space: nowrap;

    background: #000;
    border-radius: 22px;
  }
  .hero-title {
    padding-top:430px;
  }
  .hero-title h1 {
    font-size:62px;
  }
  .hero-title p {
    font-size:23px;
  }
  .welcome .wrap {
    align-items:start;
    gap:15px;
  }
  .welcome img {
    width:75px;
    height:90px;
    border-radius:15px;
  }
  .welcome p {
    font-size:14px;
  }
  .welcome strong {
    font-size:23px;
  }
  .grid {
    grid-template-columns:1fr;
    gap:20px;
  }
  .card>img {
    height:auto;
    aspect-ratio:1.5;
  }
  .card h3 {
    font-size:29px;
  }
  .collection {
    padding:35px 0;
  }
  .filters {
    gap:7px;
  }
  button {
    padding:9px 13px;
  }
  .about {
    grid-template-columns:1fr;
    padding:25px;
    gap:16px;
  }
  .about h2 br {
    display:none;
  }
  footer .wrap {
    flex-direction:column;
    text-align:center;
    gap:14px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  .card {
    transition:none;
  }
  .card:hover {
    transform:none;
  }
}

.masthead{min-height:660px}.hero-title h1{font-size:clamp(56px,7vw,104px)}.hero-title .tagline{font-size:clamp(25px,3vw,38px)}.hero-title .intro{font:15px/1.7 MontserratAlternates,Arial,sans-serif;max-width:640px;margin:20px auto 0}.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.hero-actions a:first-child{background:#749de6;color:#1e1e1e;border-color:#749de6}.signature-box p{font:15px Lunasima,Arial,sans-serif}.masthead nav{gap:22px}.welcome .wrap{justify-content:space-between}.welcome-text{max-width:860px}.experience{font:50px Lunasima;white-space:nowrap;text-align:center;color:#749de6}.experience span{display:block;font:12px MontserratAlternates;color:#ddd}.section-heading .eyebrow{color:#fff}.skills{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:28px 0 45px}.skill{border-top:1px solid #ffffff60;padding-top:18px}.skill h3{font:25px Lunasima;margin:0 0 14px}.skill p{font-size:13px;line-height:2}.skills-section{padding-bottom:30px}.graphic-section{padding:25px 0 60px}.graphics{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:30px}.graphic{margin:0}.graphic button{padding:0;width:100%;overflow:hidden;border:0px solid #1e1e1e;border-radius:22px;background:#1e1e1e;display:block}.graphic img{display:block;width:100%;aspect-ratio:1;object-fit:cover}.graphic figcaption{font-size:12px;text-align:center;margin-top:10px}.about{margin-top:30px}.about h2{font-size:43px}.contact{padding:45px 0 60px;text-align:center}.contact h2{font:clamp(36px,5vw,60px) Lunasima;margin:0 0 20px}.contact>a{display:inline-block;padding:13px 25px;background:#749de6;color:#1e1e1e;border-radius:25px;font-weight:bold}.contact .socials{display:flex;gap:24px;justify-content:center;margin:25px 0 0;font-size:13px}.news{display:grid;grid-template-columns:160px 1fr;gap:24px;align-items:center;background: var(--dark);;border-radius:25px;padding:18px;margin:0 0 15px}.news img{width:160px;height:110px;object-fit:cover;border-radius:16px}.news h3{font:25px Lunasima;margin:0 0 8px}.news p{font-size:13px;margin:0}.news a{text-decoration:underline;text-underline-offset:4px}.card>img{height:auto;aspect-ratio:1.5}.card .location{min-height:2em}.section-heading{margin-bottom:24px}dialog{border:0;border-radius:20px;background:black;color:white;padding:16px;max-width:min(900px,94vw);max-height:92vh}dialog::backdrop{background:#000c}dialog img{display:block;max-width:100%;max-height:75vh;margin:auto;object-fit:contain}dialog button{display:block;margin:0 0 12px auto}.card[hidden]{display:none}@media(max-width:1000px){.skills,.graphics{grid-template-columns:repeat(2,1fr)}.masthead nav{gap:13px;font-size:12px}}@media(max-width:600px){.masthead{min-height:620px}.hero-title{padding-top:470px}.hero-title h1{font-size:56px}.hero-title .intro{font-size:13px}.masthead nav{gap:6px}.welcome .wrap{display:block}.experience{display:none}.about h2{font-size:36px}.skills{gap:20px}.skill h3{font-size:22px}.news{grid-template-columns:1fr;gap:14px}.news img{width:100%;height:190px}.footer-links{flex-wrap:wrap;justify-content:center}.contact>a{font-size:14px}.graphics{gap:12px}

}