:root{
  --blue:#0a6fc7;--blue2:#095aa4;--navy:#082b4d;--ink:#0e2c47;--muted:#61778a;
  --line:#dce7ef;--soft:#f4f8fb;--white:#fff;--shadow:0 8px 24px rgba(9,45,76,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;line-height:1.35}
img{display:block;max-width:100%}
a{color:inherit}
button,a{font:inherit}
.container{width:min(1180px,calc(100% - 40px));margin:auto}

.site-header{
  height:72px;
  background:#fff;
  border-bottom:1px solid #e4edf3;
  position:sticky;
  top:0;
  z-index:50;
}

.nav-row{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
}

.brand{
  display:flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
  font-weight:900;
  color:var(--navy);
  white-space:nowrap;
}

.brand-gear{
  color:var(--blue);
  font-size:29px;
  line-height:1;
}

.brand-logo{
  width:38px;
  height:38px;
  object-fit:contain;
  flex:0 0 auto;
}

.brand-name{
  font-size:19px;
  letter-spacing:.01em;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:26px;
}

.main-nav>a:not(.btn){
  font-size:13.5px;
  text-decoration:none;
  font-weight:700;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius:4px;
  font-weight:800;
}

.nav-cta{
  background:var(--blue);
  color:#fff;
  padding:12px 17px;
  font-size:12px;
}

.menu-toggle{
  display:none;
  border:0;
  background:none;
  font-size:25px;
  color:var(--navy);
}


/* HERO */

.hero{
  background:#eef6fb;
}

.hero-grid{
  display:grid;
  grid-template-columns:47% 53%;
  min-height:385px;
}

.hero-copy{
  padding:46px 34px 34px 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero h1{
  font-size:45px;
  line-height:.98;
  letter-spacing:-1.8px;
  margin:0 0 15px;
  color:var(--navy);
}

.hero h1 span{
  color:var(--blue);
}

.hero-lead{
  font-size:18px;
  max-width:510px;
  margin:0 0 19px;
}

.hero-benefits{
  display:flex;
  gap:0;
  margin:2px 0 20px;
}

.benefit{
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 24px 0 0;
  margin-right:24px;
  border-right:1px solid #c9d8e4;
}

.benefit:last-child{
  border-right:0;
  margin-right:0;
  padding-right:0;
}

.circle{
  width:35px;
  height:35px;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:16px;
}

.circle.people svg{
  width:20px;
  height:20px;
  display:block;
  fill:currentColor;
}

.benefit b{
  font-size:15px;
  line-height:1.1;
}

.primary-cta{
  align-self:flex-start;
  background:var(--blue);
  color:#fff;
  padding:15px 24px;
  font-size:14px;
  box-shadow:0 5px 12px rgba(4,77,139,.15);
}

.file-types{
  font-size:13px;
  margin:12px 0 0;
  color:#314f69;
}

.hero-photo{
  position:relative;
  min-height:385px;
  background:url('assets/hero-machining.webp') center/cover no-repeat;
  overflow:hidden;
}

.hero-photo:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(238,246,251,.55),transparent 18%);
}

.france-tag{
  position:absolute;
  right:24px;
  top:22px;
  z-index:2;
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:#fff;
  background:rgba(4,39,70,.70);
  padding:9px 11px;
  font-size:12px;
  letter-spacing:.2px;
}

.flag-bars{
  display:inline-grid;
  grid-template-columns:repeat(3,8px);
  height:5px;
  margin-top:4px;
}

.flag-bars i:nth-child(1){background:#0b4e9d}
.flag-bars i:nth-child(2){background:#fff}
.flag-bars i:nth-child(3){background:#ef3340}


/* CERTIFICATIONS */

.cert-strip{
  background:#f5f8fb;
  border-bottom:1px solid var(--line);
}

.cert-row{
  min-height:118px;
  display:grid;
  grid-template-columns:255px 1fr;
  align-items:center;
}

.cert-intro{
  font-size:18px;
  font-weight:900;
  color:var(--navy);
  line-height:1.13;
  padding-right:34px;
  border-right:1px solid #d4e1ea;
}

.cert-list{
  display:grid;
  grid-template-columns:repeat(5,1fr);
}

.cert{
  text-align:center;
  padding:10px 7px;
}

.cert+.cert{
  border-left:1px solid #e1e9ef;
}

.cert-icon{
  width:46px;
  height:46px;
  margin:0 auto 5px;
  clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);
  display:grid;
  place-items:center;
  color:#fff;
  font-size:23px;
  font-weight:900;
}

.cert-icon.blue{background:#106cbe}
.cert-icon.navy{background:#113e70}
.cert-icon.cyan{background:#168eb7}
.cert-icon.green{background:#248d62}
.cert-icon.dark{background:#1f4568}

.cert b{
  display:block;
  font-size:14px;
  color:var(--navy);
}

.cert span{
  display:block;
  font-size:13px;
  color:var(--muted);
  line-height:1.1;
}


/* PARTNERS */

.partners{
  padding:21px 0 27px;
}

.france-line{
  font-size:15px;
  color:#415a70;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:4px;
}

.flag-bars.mini{
  grid-template-columns:repeat(3,9px);
  height:4px;
  margin:0;
}

.section-heading.compact h2{
  font-size:28px;
  line-height:1.07;
  margin:4px 0;
  color:var(--navy);
}

.section-heading.compact p{
  font-size:15px;
  margin:0 0 14px;
  color:#526b80;
}

.logo-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
}

.logo-card{
  height:73px;
  border:1px solid var(--line);
  border-radius:5px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:7px;
  text-decoration:none;
  overflow:hidden;
}

.logo-card img{
  max-height:54px;
  max-width:94%;
  object-fit:contain;
  mix-blend-mode:multiply;
}

.logo-card span{
  display:none;
  font-weight:700;
  font-size:12px;
  text-align:center;
}

.logo-card.image-error img{
  display:none;
}

.logo-card.image-error span{
  display:block;
}


/* STATS */

.stats-band{
  background:linear-gradient(90deg,#052d53,#0a4b81 52%,#073461);
  color:#fff;
  padding:18px 0 8px;
}

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

.stats-grid article{
  display:grid;
  grid-template-columns:48px auto;
  grid-template-rows:auto auto;
  column-gap:14px;
  padding:4px 38px;
  border-right:1px solid rgba(255,255,255,.35);
}

.stats-grid article:last-child{
  border-right:0;
}

.stat-icon{
  grid-row:1/3;
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08);
  font-size:24px;
}

.stats-grid b{
  font-size:30px;
  line-height:1;
}

.stats-grid p{
  font-size:13px;
  margin:4px 0 0;
  color:#e5eef5;
}

.update{
  text-align:right;
  font-size:10.5px;
  color:#bfd2e1;
  margin-top:3px;
}


/* PROCESS */

.process{
  padding:24px 0 20px;
}

.process h2,
.skills-section h2,
.why-section h2{
  font-size:28px;
  margin:0 0 14px;
  color:var(--navy);
}

.process-grid{
  display:grid;
  grid-template-columns:1fr 34px 1fr 34px 1fr;
  align-items:center;
}

.process-grid article{
  border:1px solid var(--line);
  border-radius:6px;
  min-height:125px;
  padding:16px;
  display:grid;
  grid-template-columns:28px 44px 1fr;
  gap:8px;
  background:#fff;
  box-shadow:0 2px 7px rgba(7,48,83,.03);
}

.num{
  width:27px;
  height:27px;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:13px;
  font-weight:900;
}

.process-icon{
  font-size:28px;
  color:var(--blue);
  align-self:center;
}

.process-grid h3{
  font-size:15px;
  line-height:1.18;
  margin:0 0 5px;
}

.process-grid p{
  font-size:14px;
  color:var(--muted);
  margin:0;
}

.arrow{
  text-align:center;
  color:var(--blue);
  font-size:27px;
}


/* SKILLS */

.skills-section{
  padding:8px 0 21px;
}

.skill-cards{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:9px;
}

.skill-cards article{
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  text-align:center;
  background:#fff;
}

.skill-cards img{
  width:100%;
  height:84px;
  object-fit:cover;
}

.skill-cards h3{
  font-size:14px;
  margin:7px 4px 2px;
}

.skill-cards p{
  font-size:13px;
  color:var(--muted);
  margin:0 4px 8px;
}

.capacity-row{
  margin-top:13px;
  border:1px solid var(--line);
  border-radius:5px;
  background:#f6f9fb;
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.capacity-row>div{
  padding:10px 11px;
  display:grid;
  grid-template-columns:31px 1fr;
  grid-template-rows:auto auto;
  border-right:1px solid var(--line);
}

.capacity-row>div:last-child{
  border-right:0;
}

.capacity-row span{
  grid-row:1/3;
  font-size:22px;
  color:var(--blue);
}

.capacity-row b{
  font-size:14px;
}

.capacity-row small{
  font-size:13px;
  color:var(--muted);
  margin-top:2px;
}


/* WHY */

.why-section{
  padding:10px 0 22px;
  background:#f8fbfd;
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
}

.why-grid article{
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
  min-height:117px;
  padding:12px 7px;
  text-align:center;
}

.why-grid article>span{
  display:inline-flex;
  min-height:26px;
  align-items:center;
  justify-content:center;
  color:var(--blue);
  font-size:24px;
  font-weight:900;
}

.why-grid h3{
  font-size:15px;
  line-height:1.13;
  margin:5px 0 4px;
}

.why-grid p{
  font-size:13px;
  color:var(--muted);
  margin:0;
}

.fr-icon{
  display:inline-grid!important;
  grid-template-columns:repeat(3,7px);
  height:19px!important;
  width:21px!important;
}

.fr-icon i:nth-child(1){background:#0b4e9d}
.fr-icon i:nth-child(2){
  background:#fff;
  border-top:1px solid #ddd;
  border-bottom:1px solid #ddd;
}
.fr-icon i:nth-child(3){background:#ef3340}


/* CTA & FOOTER */

.cta-band{
  background:linear-gradient(90deg,#072d50,#0a477a 60%,#06325a);
  color:#fff;
  padding:19px 0;
}

.cta-grid{
  display:grid;
  grid-template-columns:1.05fr .75fr 1.2fr;
  gap:25px;
  align-items:center;
}

.cta-band h2{
  font-size:25px;
  margin:0 0 4px;
}

.cta-band p{
  font-size:13px;
  color:#d4e0ea;
  margin:0;
}

.cta-white{
  background:var(--blue);
  color:#fff;
  padding:12px 16px;
  font-size:13px;
}

.contact-details{
  display:grid;
  gap:8px;
}

.email-box{
  display:grid;
  grid-template-columns:18px 1fr auto;
  gap:7px;
  align-items:center;
  font-size:13px;
}

.email-box button{
  border:0;
  border-radius:4px;
  padding:7px 9px;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}

.phone-box{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  color:#fff;
}

.phone-box a{
  color:#fff;
  font-weight:800;
  text-decoration:none;
}

.phone-box a:hover{
  text-decoration:underline;
}

.site-footer{
  background:#fff;
  border-top:1px solid #dfe8ef;
  padding:15px 0;
}

.footer-row{
  display:grid;
  grid-template-columns:1fr 1.6fr 1fr;
  align-items:center;
  gap:18px;
}

.footer-brand .brand-gear{
  font-size:24px;
}

.footer-brand .brand-name{
  font-size:14px;
}

.site-footer nav{
  display:flex;
  justify-content:center;
  gap:19px;
}

.site-footer nav a{
  text-decoration:none;
  font-size:11.5px;
  color:#314e68;
}

.partner-link{
  text-align:right;
  font-size:11px;
  color:#607387;
  white-space:nowrap;
  flex-shrink:0;
}

.partner-link a{
  color:var(--blue);
  font-weight:700;
  text-decoration:none;
}

.toast{
  position:fixed;
  right:18px;
  bottom:18px;
  background:#082d50;
  color:#fff;
  padding:10px 14px;
  border-radius:6px;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:.2s;
  z-index:80;
  font-size:13px;
}

.toast.show{
  opacity:1;
  transform:none;
}


/* TABLET */

@media(max-width:980px){

  .main-nav{
    gap:13px;
  }

  .main-nav>a:not(.btn){
    font-size:12px;
  }

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

  .hero h1{
    font-size:38px;
  }

  .hero-lead{
    font-size:16px;
  }

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

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

  .stats-grid article{
    padding:5px 18px;
  }

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

  .footer-row{
    grid-template-columns:1fr;
    text-align:center;
  }

  .footer-row .brand{
    justify-content:center;
  }

  .partner-link{
    text-align:center;
    white-space:normal;
  }

  .site-footer nav{
    flex-wrap:wrap;
  }
}


/* MOBILE */

@media(max-width:760px){

  .container{
    width:min(100% - 24px,1180px);
  }

  .site-header{
    height:60px;
  }

  .brand-name{
    font-size:14px;
  }

  .brand-gear{
    font-size:23px;
  }

  .menu-toggle{
    display:block;
  }

  .main-nav{
    display:none;
    position:absolute;
    top:60px;
    left:12px;
    right:12px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:8px;
    padding:10px;
    box-shadow:var(--shadow);
    flex-direction:column;
    align-items:stretch;
    gap:4px;
  }

  .main-nav.open{
    display:flex;
  }

  .main-nav a{
    padding:9px 10px;
  }

  .hero-grid{
    grid-template-columns:1fr;
    min-height:0;
  }

  .hero-copy{
    padding:28px 0 18px;
  }

  .hero h1{
    font-size:34px;
    line-height:1.04;
    letter-spacing:-1px;
    margin-bottom:10px;
  }

  .hero-lead{
    font-size:17px;
    line-height:1.35;
    margin-bottom:15px;
  }

  .hero-benefits{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-bottom:15px;
  }

  .benefit{
    border:0;
    margin:0;
    padding:0;
    display:block;
    text-align:center;
  }

  .circle{
    margin:0 auto 6px;
    width:30px;
    height:30px;
    font-size:13px;
  }

  .benefit b{
    font-size:12.5px;
    line-height:1.15;
  }

  .primary-cta{
    width:100%;
    font-size:13px;
    padding:14px 10px;
  }

  .file-types{
    font-size:12.5px;
    line-height:1.35;
  }

  .hero-photo{
    min-height:230px;
    border-top:1px solid #dce7ef;
  }

  .france-tag{
    right:12px;
    top:12px;
    font-size:11.5px;
    line-height:1.25;
    padding:7px 8px;
  }

  .cert-row{
    grid-template-columns:1fr;
  }

  .cert-intro{
    border-right:0;
    border-bottom:1px solid #d4e1ea;
    padding:14px 0 10px;
    font-size:16px;
    line-height:1.2;
  }

  .cert-list{
    grid-template-columns:repeat(3,1fr);
    gap:0;
  }

  .cert{
    padding:10px 3px;
  }

  .cert:nth-child(4),
  .cert:nth-child(5){
    grid-column:auto;
  }

  .cert+.cert{
    border-left:0;
  }

  .cert-icon{
    width:38px;
    height:38px;
    font-size:19px;
  }

  .cert b{
    font-size:13px;
    line-height:1.15;
  }

  .cert span{
    font-size:11.5px;
    line-height:1.2;
  }

  .partners{
    padding-top:16px;
  }

  .section-heading.compact h2{
    font-size:25px;
    line-height:1.12;
  }

  .section-heading.compact p{
    font-size:14px;
    line-height:1.4;
  }

  .france-line{
    font-size:12.5px;
    line-height:1.3;
  }

  .logo-grid{
    grid-template-columns:repeat(3,1fr);
    gap:6px;
  }

  .logo-card{
    height:58px;
    padding:5px;
  }

  .logo-card img{
    max-height:44px;
    max-width:96%;
  }

  .stats-band{
    padding:12px 0 7px;
  }

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

  .stats-grid article{
    display:block;
    text-align:center;
    padding:3px 5px;
    border-right:1px solid rgba(255,255,255,.26);
    border-bottom:0;
  }

  .stat-icon{
    width:30px;
    height:30px;
    margin:0 auto 5px;
    font-size:17px;
  }

  .stats-grid b{
    font-size:19px;
  }

  .stats-grid p{
    font-size:11px;
    line-height:1.25;
  }

  .update{
    font-size:10px;
    line-height:1.2;
  }

  .process{
    padding:20px 0 15px;
  }

  .process h2,
  .skills-section h2,
  .why-section h2{
    font-size:26px;
    line-height:1.15;
    margin-bottom:12px;
  }

  .process-grid{
    grid-template-columns:1fr;
    gap:8px;
  }

  .arrow{
    display:none;
  }

  .process-grid article{
    min-height:0;
    grid-template-columns:26px 36px 1fr;
    padding:12px;
  }

  .process-icon{
    font-size:22px;
  }

  .process-grid h3{
    font-size:14.5px;
    line-height:1.25;
  }

  .process-grid p{
    font-size:13px;
    line-height:1.4;
  }

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

  .skill-cards img{
    height:78px;
  }

  .skill-cards h3{
    font-size:14px;
    line-height:1.2;
  }

  .skill-cards p{
    font-size:12.5px;
    line-height:1.3;
  }

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

  .capacity-row>div{
    border-bottom:1px solid var(--line);
  }

  .capacity-row>div:nth-child(2n){
    border-right:0;
  }

  .capacity-row>div:nth-last-child(-n+2){
    border-bottom:0;
  }

  .capacity-row b{
    font-size:14px;
    line-height:1.2;
  }

  .capacity-row small{
    font-size:12.5px;
    line-height:1.3;
  }

  .why-grid{
    grid-template-columns:repeat(2,1fr);
    gap:7px;
  }

  .why-grid article{
    min-height:112px;
    padding:10px 6px;
  }

  .why-grid h3{
    font-size:14px;
    line-height:1.2;
  }

  .why-grid p{
    font-size:12.5px;
    line-height:1.3;
  }

  .cta-grid{
    grid-template-columns:1fr;
    gap:10px;
  }

  .cta-band h2{
    font-size:22px;
    line-height:1.15;
  }

  .cta-band p{
    font-size:13.5px;
    line-height:1.35;
  }

  .cta-white{
    width:100%;
    font-size:13.5px;
  }

  .email-box{
    grid-template-columns:18px 1fr auto;
    font-size:12.5px;
    line-height:1.25;
  }

  .email-box button{
    font-size:11.5px;
  }

  .phone-box{
    justify-content:center;
    font-size:13px;
  }

  .footer-row{
    grid-template-columns:1fr;
  }

  .footer-brand .brand-name{
    font-size:14px;
  }

  .brand-tagline{
    font-size:11.5px;
    line-height:1.25;
  }

  .site-footer nav{
    gap:10px;
  }

  .site-footer nav a{
    font-size:12px;
  }

  .partner-link{
    text-align:center;
    font-size:11.5px;
    line-height:1.3;
    white-space:normal;
  }
}


@media(max-width:420px){

  .hero h1{
    font-size:31px;
  }

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

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


@media(max-width:560px){

  .circle.people svg{
    width:17px;
    height:17px;
  }
}


.footer-brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}


.brand-tagline{
  margin-top:4px;
  font-size:11px;
  font-weight:500;
  color:#6f8294;
  letter-spacing:0;
}
.back-to-top{
  position:fixed;
  right:22px;
  bottom:22px;
  width:40px;
  height:40px;
  border-radius:50%;
  background:#bfbfbf;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:24px;
  font-weight:700;
  line-height:1;
  z-index:100;
  box-shadow:0 3px 10px rgba(0,0,0,.12);
  transition:.2s;
}

.back-to-top:hover{
  background:#9f9f9f;
  transform:translateY(-2px);
}
/* ACCESSIBILITÉ CLAVIER */
:where(a,button,[role="button"]):focus-visible{
  outline:3px solid #0a6fc7;
  outline-offset:3px;
}

body.lightbox-open{overflow:hidden}

/* =========================================================
   SAVOIR-FAIRE : + SUR PHOTO + LIGHTBOX CENTRÉE
   ========================================================= */


/* ---------- PETIT + BLEU SUR LES PHOTOS ---------- */

.skill-cards article{
  position:relative;
}

.skill-expand{
  position:absolute;
  top:8px;
  right:8px;

  width:27px;
  height:27px;
  padding:0;
  border:0;
  border-radius:50%;

  background:#0a6fc7;
  color:#fff;

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

  font-size:21px;
  font-weight:400;
  line-height:1;

  z-index:10;
  cursor:pointer;

  box-shadow:0 2px 8px rgba(0,0,0,.20);
  transition:transform .2s ease, background .2s ease;
}

.skill-expand:hover,
.skill-expand:focus-visible{
  transform:scale(1.12);
  background:#095aa4;
}

.skill-expand:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}


/* ---------- FOND DE LA LIGHTBOX ---------- */

.skill-image-preview{
  position:fixed !important;
  inset:0 !important;

  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  max-height:none !important;

  margin:0 !important;
  padding:0 !important;

  left:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;

  transform:none !important;

  background:rgba(0,0,0,.78);

  z-index:9999;

  display:none;
  align-items:center;
  justify-content:center;
}

.skill-image-preview.show{
  display:flex !important;
}


/* ---------- CONTENEUR DE L'IMAGE ---------- */

.skill-preview-content{
  position:relative;

  width:auto;
  max-width:82vw;
  max-height:82vh;

  margin:auto;

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

.skill-preview-content img{
  display:block;

  width:auto !important;
  height:auto !important;

  max-width:82vw !important;
  max-height:82vh !important;

  object-fit:contain;

  background:#fff;
  border-radius:5px;

  box-shadow:0 12px 40px rgba(0,0,0,.35);
}


/* ---------- FLÈCHES ---------- */

.skill-preview-arrow{
  position:fixed;
  top:50%;
  transform:translateY(-50%);

  width:50px;
  height:70px;

  border:0;
  border-radius:4px;

  background:rgba(0,0,0,.35);
  color:#fff;

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

  font-size:44px;
  font-weight:300;
  line-height:1;

  cursor:pointer;

  z-index:10001;

  transition:background .2s ease;
}

.skill-preview-arrow:hover{
  background:#0a6fc7;
}

.skill-preview-prev{
  left:24px;
}

.skill-preview-next{
  right:24px;
}


/* ---------- CROIX DE FERMETURE ---------- */

.skill-preview-close{
  position:fixed;

  top:20px;
  right:28px;

  width:38px;
  height:38px;

  border:0;
  background:transparent;
  color:#fff;

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

  font-size:36px;
  font-weight:400;
  line-height:1;

  cursor:pointer;

  z-index:10002;
}


/* ---------- COMPTEUR 1 / 6 ---------- */

.skill-preview-counter{
  position:absolute;

  right:6px;
  bottom:-27px;

  color:#fff;

  font-size:13px;
  font-weight:700;

  text-shadow:0 1px 3px rgba(0,0,0,.6);
}


/* ---------- MOBILE ---------- */

@media(max-width:760px){

  .skill-expand{
    width:24px;
    height:24px;
    top:6px;
    right:6px;
    font-size:19px;
  }

  .skill-preview-content{
    max-width:88vw;
    max-height:78vh;
  }

  .skill-preview-content img{
    max-width:88vw !important;
    max-height:78vh !important;
  }

  .skill-preview-arrow{
    width:38px;
    height:58px;
    font-size:34px;
  }

  .skill-preview-prev{
    left:6px;
  }

  .skill-preview-next{
    right:6px;
  }

  .skill-preview-close{
    top:10px;
    right:10px;
  }
}

/* CONTACT DE SECOURS SOUS LE CTA PRINCIPAL */
.hero-email-fallback{
  margin-top:9px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:12px;
  color:#526b80;
}

.hero-email-fallback b{
  color:var(--navy);
}

.hero-email-fallback button{
  border:0;
  background:transparent;
  color:var(--blue);
  padding:0;
  font-weight:700;
  text-decoration:underline;
  cursor:pointer;
}

.hero-email-fallback button:hover{
  color:var(--blue2);
}

@media(max-width:760px){
  .hero-email-fallback{
    justify-content:center;
    text-align:center;
    font-size:12.5px;
    line-height:1.35;
  }
}