/* DRONES VS */

@font-face{font-family:Inter;src:url('../fonts/Inter-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:Inter;src:url('../fonts/Inter-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('../fonts/Inter-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url('../fonts/Inter-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Inter;src:url('../fonts/Inter-Black.woff2') format('woff2');font-weight:900;font-display:swap}

:root{
  --red:#EE1C25;
  --ink:#111111;
  --night:#0E0E0E;
  --white:#FFFFFF;
  --ink-60:rgba(17,17,17,.60);
  --ink-40:rgba(17,17,17,.40);
  --ink-12:rgba(17,17,17,.12);
  --pale-60:rgba(255,255,255,.62);
  --pale-20:rgba(255,255,255,.20);
  --nav-h:84px;
  --pad:clamp(20px,5vw,64px);
  --maxw:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

h1,h2,h3{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.03em;
  line-height:.95;
  text-wrap:balance;
  margin:0;
}

.eyebrow{
  font-weight:600;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-60);
  display:inline-block;
}
.thin{font-weight:300;text-transform:uppercase;letter-spacing:.09em}

/* Onglet numéroté */
.tab-num{
  display:inline-block;
  background:var(--red);color:var(--white);
  font-weight:800;font-size:.8rem;
  font-variant-numeric:tabular-nums;
  padding:5px 10px;margin-right:12px;
  vertical-align:middle;
}
/* Filet rouge */
.rule{
  height:7px;background:var(--red);border:0;
  margin:22px 0 0;width:min(100%,620px);
}
/* Noir et blanc, couleur au survol.
   Uniquement si le pointeur permet le survol : sur écran
   tactile l'image reste en couleur. */
@media (hover:hover) and (pointer:fine){
  .bw img{filter:grayscale(1) contrast(1.04);transition:filter .55s ease}
  .bw:hover img,.bw:focus-within img{filter:grayscale(0) contrast(1)}
}

/* Cadre photo décalé */
.offset{position:relative;display:block}
.offset::before{
  content:"";position:absolute;
  inset:auto -14px -14px auto;
  width:100%;height:100%;
  background:var(--red);z-index:0;
}
.offset.left::before{inset:auto auto -14px -14px}
.offset>img,.offset>video{position:relative;z-index:1;width:100%}
/* Marco del parallax (lo crea site.js): recorta la foto, que se mueve dentro */
.px{display:block;position:relative;z-index:1;overflow:hidden}
.px>img{display:block;width:100%;will-change:transform}
@media (max-width:640px){
  .offset::before{inset:auto -8px -8px auto}
  .offset.left::before{inset:auto auto -8px -8px}
}

/* Barre de navigation */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:60;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:0 var(--pad);
  background:var(--white);
  border-bottom:1px solid var(--ink-12);
}
.brand img{display:block;height:34px;width:auto}
@media (max-width:560px){.brand img{height:26px}}
.tabs{display:flex;gap:0}
.tabs a{
  font-weight:600;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-60);
  padding:8px 15px 6px;
  border-bottom:4px solid transparent;
  transition:color .2s,border-color .2s;
}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--red)}
/* Selector de idioma, a la derecha de las pestañas y más pequeño que ellas */
.derecha{display:flex;align-items:center;gap:6px}
.idioma{position:relative}
.idioma button{display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;padding:8px 4px 8px 10px;
  font:600 .62rem/1 Inter,sans-serif;letter-spacing:.12em;color:var(--ink-60)}
.idioma button:hover,.idioma button[aria-expanded="true"]{color:var(--ink)}
.idioma .bandera{width:16px;height:11px;display:block;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.idioma .flecha{width:9px;height:6px;display:block;fill:var(--red);transition:transform .2s}
.idioma button[aria-expanded="true"] .flecha{transform:rotate(180deg)}
.idioma ul{position:absolute;right:0;top:calc(100% + 8px);list-style:none;margin:0;padding:6px;min-width:84px;
  background:var(--white);border:1px solid var(--ink-12);box-shadow:0 10px 30px rgba(0,0,0,.10)}
.idioma li a{display:flex;align-items:center;gap:8px;padding:9px 10px;font:600 .62rem/1 Inter,sans-serif;letter-spacing:.12em;color:var(--ink-60)}
.idioma li a:hover,.idioma li a[aria-current="true"]{color:var(--ink)}
.idioma li a[aria-current="true"]{box-shadow:inset 3px 0 0 var(--red)}
@media (max-width:560px){.tabs a{padding:8px 9px 6px;letter-spacing:.08em}.idioma button{padding-left:4px}}

main{padding-top:var(--nav-h)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.wide{padding:0 clamp(20px,2.4vw,32px)}
.band{padding:clamp(64px,9vw,120px) 0}
.band.tight{padding-top:0}

/* Sections sombres */
.dark{background:var(--night);color:var(--white)}
.dark .eyebrow{color:var(--pale-60)}
.dark p{color:var(--pale-60)}
.dark .facts .line{border-color:var(--pale-20);color:var(--pale-60)}
.dark .facts .line b{color:var(--white)}

.opener{margin-bottom:clamp(32px,4.5vw,54px)}
.opener h2{font-size:clamp(1.9rem,4.6vw,3.3rem);margin-top:16px}
.lede{max-width:54ch;margin:22px 0 0;color:var(--ink-60);font-size:1.02rem}
.dark .lede{color:var(--pale-60)}

/* Couverture */
.hero{position:relative;min-height:min(84vh,760px);display:flex;align-items:flex-end;overflow:hidden}
.hero video,.hero>img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(14,14,14,.28) 0%,rgba(14,14,14,.82) 78%);
}
.hero .inner{position:relative;z-index:2;width:100%;padding:0 0 clamp(44px,6vw,78px)}
.hero h1{font-size:clamp(2.3rem,6.6vw,5rem);max-width:16ch;color:var(--white)}
.hero .sub{max-width:46ch;margin:24px 0 0;color:var(--pale-60);font-size:clamp(1rem,1.5vw,1.12rem)}
.hero .eyebrow{color:var(--pale-60);margin-bottom:20px}

/* Boutons */
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{
  display:inline-block;
  font-weight:700;font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;
  padding:15px 28px;border:2px solid var(--red);
  background:var(--red);color:var(--white);
  cursor:pointer;transition:background .2s,color .2s;
}
.btn:hover{background:transparent;color:var(--red)}
.btn.ghost{background:transparent;border-color:var(--white);color:var(--white)}
.btn.ghost:hover{background:var(--white);color:var(--ink)}
.btn.line{background:transparent;color:var(--ink)}
.btn.line:hover{background:var(--red);color:var(--white)}

/* Blocs numérotés */
.rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(26px,3.5vw,46px)}
.row-item .badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;background:var(--red);margin-bottom:16px;
}
.row-item .badge svg{width:21px;height:21px}
.row-item h3{font-size:1.05rem;letter-spacing:-.02em;margin-bottom:8px}
.row-item p{margin:0;color:var(--ink-60);font-size:.93rem}

/* Cartes secteurs */
.sectors{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(30px,3.4vw,44px) clamp(22px,2.6vw,30px)}
.sector img{aspect-ratio:4/3;object-fit:cover;width:100%}
.sector h3{font-size:1.1rem;margin-top:24px}
.sector p{margin:6px 0 0;color:var(--ink-60);font-size:.92rem}
.sector .num{font-weight:800;font-size:.78rem;color:var(--red);font-variant-numeric:tabular-nums}

/* Colonnes alternées */
.split{
  display:grid;grid-template-columns:42fr 58fr;
  gap:clamp(30px,5vw,72px);align-items:center;
  padding:clamp(44px,6vw,76px) 0;
  border-top:1px solid var(--ink-12);
}
.split:first-of-type{border-top:0;padding-top:0}
.split .media img{width:100%;aspect-ratio:3/2;object-fit:cover}
.split h3{font-size:clamp(1.3rem,2.6vw,1.9rem);margin:14px 0 0}
.split ul{list-style:none;padding:0;margin:22px 0 0}
.split li{padding:11px 0;border-bottom:1px solid var(--ink-12);font-size:.94rem;color:var(--ink-60)}
.split li:first-child{border-top:1px solid var(--ink-12)}
.split.flip .media{order:2}
.split .n{font-weight:800;font-size:.82rem;font-variant-numeric:tabular-nums;display:inline-block}
.split .n em{font-style:normal;color:var(--red)}
@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .split.flip .media{order:0}
}

/* Portfolio */
.folio{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(32px,3.6vw,48px) clamp(22px,2.6vw,30px)}
.folio figure{margin:0}
.folio img{width:100%;aspect-ratio:3/2;object-fit:cover}
.folio figcaption{margin-top:20px}
.folio figcaption b{display:block;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:1rem;margin-top:6px}

.reel video{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--night)}

/* Tarifs : chaque formule un palier plus haut que la précédente */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,30px);align-items:start}
.tier:nth-child(1){margin-top:clamp(0px,9vw,112px)}
.tier:nth-child(2){margin-top:clamp(0px,4.5vw,56px)}
.tier img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tier .step{display:block;margin-top:22px;font-weight:900;font-size:clamp(2.4rem,4vw,3.2rem);line-height:1;color:var(--red);font-variant-numeric:tabular-nums}
.tier h3{font-size:1.25rem;margin-top:10px}
.tier .price{margin:10px 0 0;font-weight:800;font-size:1.3rem;letter-spacing:-.01em}
.dark .tier .price{color:var(--white)}
.tier ul{list-style:none;padding:0;margin:20px 0 0}
.tier li{padding:10px 0;border-bottom:1px solid var(--ink-12);font-size:.92rem;color:var(--ink-60)}
.dark .tier li{border-color:var(--pale-20);color:var(--pale-60)}
@media (max-width:860px){
  .tiers{grid-template-columns:1fr;gap:56px}
  .tier:nth-child(n){margin-top:0}
  .tier:nth-child(1){order:3}
  .tier:nth-child(3){order:1}
}
/* Franja de credenciales */
.creds{display:flex;flex-wrap:wrap;gap:14px 44px;padding:30px 0;font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em}
.creds span::before{content:"";display:inline-block;width:9px;height:9px;background:var(--red);margin-right:12px;vertical-align:1px}
.note{margin:22px 0 0;font-size:.78rem;color:var(--ink-40)}
.dark .note{color:var(--pale-60)}
.lede a{text-decoration:underline;text-underline-offset:3px}

/* Citation */
.pullquote{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.4vw,28px);align-items:start;max-width:880px}
.pullquote .mark{font-weight:900;font-size:clamp(4rem,8vw,6.4rem);line-height:.7;color:var(--red);user-select:none}
.pullquote blockquote{margin:0;font-weight:300;font-size:clamp(1.1rem,2.3vw,1.65rem);line-height:1.4;letter-spacing:-.015em}

/* Formulaire */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,80px)}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
form{display:flex;flex-direction:column;gap:15px}
label{font-weight:600;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);margin-bottom:7px;display:block}
input,select,textarea{
  width:100%;background:var(--white);
  border:1px solid var(--ink);color:var(--ink);
  font-family:inherit;font-size:.95rem;padding:13px 15px;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red);box-shadow:inset 0 -4px 0 var(--red)}
textarea{resize:vertical;min-height:126px}
.hp{position:absolute;left:-9999px}

.facts{margin-top:30px}
.facts .line{padding:15px 0;border-bottom:1px solid var(--ink-12);font-size:.92rem;color:var(--ink-60)}
.facts .line:first-child{border-top:1px solid var(--ink-12)}
.facts .line b{color:var(--ink);font-weight:700}

/* Marqueur de contenu à compléter */
.todo{
  border:2px dashed var(--red);
  padding:clamp(20px,3vw,30px);
  color:var(--ink-60);font-size:.92rem;
}
.dark .todo{color:var(--pale-60)}
.todo b{color:var(--red);font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;display:block;margin-bottom:8px}

footer.pie{
  margin-top:0;background:var(--night);color:rgba(255,255,255,.72);
  padding:0 var(--pad) 28px;font-size:.9rem;
}
/* Paisaje de las fórmulas en lo alto del pie: estación a la izquierda, cumbres en el centro, castillo a la derecha */
.pie-arte{margin:0 calc(-1 * var(--pad)) clamp(20px,3vw,40px);background:var(--white)}
.pie-arte img{display:block;width:100%;height:auto}
footer.pie.sin-arte{padding-top:clamp(48px,7vw,88px)}

/* Portada: llamada a la página de fórmulas, sobre blanco; debajo, el paisaje del pie */
.llamada-formules{background:var(--white);text-align:center;padding-bottom:clamp(56px,8vw,120px)}   /* aire antes del paisaje del pie */
.llamada-formules .llamada-titulo{display:block;margin:18px auto 0;max-width:16ch;font-weight:900;text-transform:uppercase;
  letter-spacing:-.03em;line-height:.95;font-size:clamp(2.3rem,6vw,5rem);color:var(--ink)}
.llamada-formules .llamada-titulo:hover{color:var(--red)}
.llamada-formules .actions{justify-content:center}
.llamada-formules .btn{font-size:.95rem;padding:22px 52px}
.llamada-formules .eyebrow{font-size:.85rem}
.pie-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px)}
.pie-grid>div{display:flex;flex-direction:column;gap:10px}
.pie-grid .eyebrow{color:rgba(255,255,255,.5);margin-bottom:6px}
.pie-grid a{color:var(--white);width:fit-content}
.pie-grid a:hover{color:var(--red)}
.pie-marca img{height:30px;width:auto;display:block;margin-bottom:10px}
.pie-marca p{margin:0}
.pie-creds{font-size:.78rem;color:rgba(255,255,255,.5)}
.pie-fin{max-width:var(--maxw);margin:clamp(36px,5vw,56px) auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;color:rgba(255,255,255,.45)}
@media (max-width:860px){.pie-grid{grid-template-columns:1fr 1fr}.pie-marca{grid-column:1 / -1}}
@media (max-width:480px){.pie-grid{grid-template-columns:1fr}}

/* Apparition au défilement */
@media (prefers-reduced-motion:no-preference){
  .js .reveal>*{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .js .reveal>*:nth-child(2){transition-delay:.07s}
  .js .reveal>*:nth-child(3){transition-delay:.14s}
  .js .reveal>*:nth-child(4){transition-delay:.21s}
  .js .reveal.in>*{opacity:1;transform:none}
  .js .reveal>.rule{transform:scaleX(0);transform-origin:left}
  .js .reveal.in>.rule{transform:scaleX(1);transition-duration:.85s}
}

/* Contacto: dos desplegables en una fila; los datos de contacto arriba a la derecha */
.contacto .dos{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.contacto aside{align-self:start}
.contacto aside .facts{margin-top:0}
@media (max-width:560px){.contacto .dos{grid-template-columns:1fr}}

/* Montagne: el vídeo de la portada a lo ancho del bloque, en 16:9 */
.montagne .film{display:block;width:100%;aspect-ratio:16/9;background:var(--night);object-fit:cover;cursor:pointer}
.film-caja{position:relative;width:min(94vw,1560px);left:50%;transform:translateX(-50%);margin-top:56px;
  box-shadow:0 30px 80px -20px rgba(238,28,37,.55),0 10px 30px -12px rgba(238,28,37,.35)}
.film-caja .sonido{position:absolute;left:16px;bottom:16px;border:1px solid rgba(255,255,255,.6);background:rgba(14,14,14,.55);color:#fff;
  font:600 .72rem/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.1em;padding:10px 14px;cursor:pointer}
.film-caja .sonido:hover{background:rgba(14,14,14,.8)}