/* ROKK V1.1 : styles limites au canvas et a .rokk-pilot. */
@font-face {
  font-family:RokkAnton;
  src:url('assets/anton.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap
}
@font-face {
  font-family:RokkInter;
  src:url('assets/inter-400.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap
}
@font-face {
  font-family:RokkInter;
  src:url('assets/inter-500.ttf') format('truetype');
  font-weight:500;
  font-style:normal;
  font-display:swap
}
@font-face {
  font-family:RokkInter;
  src:url('assets/inter-600.ttf') format('truetype');
  font-weight:600;
  font-style:normal;
  font-display:swap
}
@font-face {
  font-family:RokkInter;
  src:url('assets/inter-700.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap
}
body.rokk-pilot-page {
  margin:0;
  background:#fff
}
.rokk-pilot {
  --rokk-black:#040e14;
  --rokk-navy:#0d293e;
  --rokk-blue:#0cb4e3;
  --rokk-ice:#8aebfc;
  --rokk-orange:#ff8000;
  --rokk-soft:#f1f7f9;
  --rokk-line:#d4e2e9;
  --rokk-display:RokkAnton,Impact,sans-serif;
  --rokk-body:RokkInter,Arial,sans-serif;
  font-family:var(--rokk-body);
  color:var(--rokk-navy);
  font-size:16px;
  line-height:1.65;
  background:#fff
}
.rokk-pilot *,.rokk-pilot *:before,.rokk-pilot *:after {
  box-sizing:border-box
}
.rokk-pilot :is(h1,h2,h3,h4,p,figure) {
  margin:0
}
.rokk-pilot :is(h1,h2):where(:not(.rokk-title)) {
  font-family:var(--rokk-display);
  font-weight:400;
  line-height:1.1;
  letter-spacing:.005em;
  color:inherit
}
.rokk-pilot h2:where(:not(.rokk-title)) {
  font-size:clamp(2.25rem,4.5vw,4rem)
}
.rokk-pilot a {
  color:inherit;
  text-decoration:none
}
.rokk-pilot img {
  display:block;
  max-width:100%
}
.rokk-pilot p+p {
  margin-top:1rem
}
.rokk-pilot :focus-visible {
  outline:3px solid var(--rokk-orange);
  outline-offset:5px
}
.rokk-pilot [id] {
  scroll-margin-top:110px
}
.rokk-skip {
  position:fixed;
  top:8px;
  left:8px;
  transform:translateY(-180%);
  padding:.8rem;
  background:#fff;
  color:#0d293e;
  z-index:100
}
.rokk-skip:focus {
  transform:none
}
.rokk-pilot .rokk-eyebrow {
  font-size:.875rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:1rem;
  display:block
}
.rokk-eyebrow:before {
  content:'';
  display:inline-block;
  width:8px;
  height:8px;
  background:var(--rokk-orange);
  margin-right:10px
}
.rokk-pilot .rokk-text-link {
  font-weight:600;
  font-size:.9375rem;
  text-decoration:underline;
  text-underline-offset:6px
}
.rokk-pilot .rokk-actions {
  display:flex;
  align-items:center;
  gap:1.5rem;
  flex-wrap:wrap;
  margin-top:2rem
}
.rokk-pilot .rokk-header {
  position:fixed;
  inset:0 0 auto;
  z-index:20;
  background:transparent;
  color:#fff;
  border-bottom:1px solid #ffffff26;
  transition:background .25s
}
.rokk-pilot .rokk-header.is-scrolled {
  background:var(--rokk-navy)
}
.rokk-header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  min-height:90px;
  padding-block:8px;
  width:calc(100% - 5rem);
  max-width:1600px;
  margin-inline:auto
}
.rokk-logo {
  width:200px;
  height:auto
}
.rokk-nav {
  display:flex;
  align-items:center;
  gap:1.8rem;
  font-size:.875rem;
  font-weight:500
}
.rokk-nav a:hover {
  color:var(--rokk-ice)
}
.rokk-pilot .rokk-nav-contact {
  border:1px solid #ffffff60;
  padding:.6rem 1rem
}
.rokk-pilot .rokk-menu-toggle {
  display:none;
  background:transparent;
  color:#fff;
  border:1px solid #ffffff65;
  border-radius:2px;
  padding:.5rem .8rem;
  min-height:44px;
  font:inherit
}
.rokk-hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--rokk-black);
  color:#fff;
  min-height:max(800px,100svh)
}
.rokk-landscape {
  position:absolute;
  inset:-3% -30% -7% 12%;
  pointer-events:none;
  will-change:transform
}
.rokk-landscape img,.rokk-landscape .summit-route {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center
}
.rokk-landscape img {
  filter:contrast(1.08)
}
.summit-route {
  overflow:hidden
}
.route-halo,.route-line {
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round
}
.route-halo {
  stroke:#0cb4e340;
  stroke-width:13
}
.route-line {
  stroke:var(--rokk-blue);
  stroke-width:3.5;
  stroke-dasharray:1000;
  animation:rokk-trace 3s cubic-bezier(.33,0,.2,1) .3s both
}
.route-stations circle {
  fill:var(--rokk-navy);
  stroke:var(--rokk-ice);
  stroke-width:2.5
}
.route-stations {
  animation:rokk-reveal .6s 2.4s both
}
.route-summit {
  fill:#fff;
  animation:rokk-reveal .6s 3s both
}
.route-summit .summit-ring {
  fill:#0cb4e31f;
  stroke:var(--rokk-ice);
  stroke-width:1.8
}
.rokk-shade {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,#040e14f5 0%,#040e14dc 22%,#040e1480 41%,#040e141a 63%,#040e141a 100%),linear-gradient(180deg,#040e1490 0%,transparent 24%,transparent 58%,#040e14e6 100%)
}
.rokk-hero-stage {
  position:relative;
  z-index:1;
  min-height:max(800px,100svh);
  display:flex;
  align-items:center;
  padding-block:150px 170px;
  width:calc(100% - 5rem);
  max-width:1600px;
  margin-inline:auto
}
.rokk-hero-copy {
  max-width:1000px;
  animation:rokk-arrival .9s ease both
}
.rokk-pilot .rokk-hero-title {
  font-size:clamp(3rem,5.2vw,6rem);
  line-height:1.12;
  letter-spacing:0;
  color:#fff
}
.rokk-hero-title span {
  color:var(--rokk-ice)
}
.rokk-hero-copy>.rokk-eyebrow {
  color:#d3e6ee;
  font-size:.875rem;
  letter-spacing:.08em;
  margin-bottom:1.65rem
}
.rokk-hero-copy>.rokk-hero-lead {
  max-width:610px;
  margin-top:1.8rem;
  font-size:1.125rem;
  line-height:1.75;
  color:#edf5f8
}
.rokk-hero-copy>.rokk-hero-location {
  font-size:.875rem;
  color:#d3e6ee;
  margin-top:1.6rem
}
.rokk-horizon {
  position:absolute;
  left:0;
  right:0;
  bottom:2rem;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:2rem;
  border-top:1px solid #ffffff40;
  padding-top:1.2rem
}
.rokk-horizon p {
  font-size:.875rem;
  color:#d3e6ee;
  line-height:1.65
}
.rokk-horizon strong {
  font-weight:500;
  color:#fff
}
.rokk-explore {
  display:flex;
  align-items:center;
  gap:.85rem;
  font-size:.875rem;
  color:#fff;
  min-height:44px
}
.rokk-section-head {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:4rem;
  align-items:end;
  margin-bottom:3rem
}
.rokk-section-head p {
  max-width:470px
}
.rokk-intro {
  font-size:1.125rem;
  line-height:1.7;
  color:#466376
}
.rokk-delivery {
  border-left:3px solid var(--rokk-blue);
  padding:.2rem 0 .2rem 1.3rem;
  margin-bottom:2.4rem;
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:2rem;
  align-items:start
}
.rokk-delivery h3 {
  font-size:1.125rem;
  letter-spacing:0;
  line-height:1.5;
  font-weight:700
}
.rokk-delivery p {
  font-size:1rem;
  color:#466376;
  max-width:700px
}
.rokk-offer-list {
  border-top:1px solid var(--rokk-line)
}
.rokk-offer {
  border-bottom:1px solid var(--rokk-line)
}
.rokk-pilot .rokk-offer-toggle {
  display:grid;
  grid-template-columns:75px 1fr 55px;
  gap:1rem;
  align-items:center;
  padding:1.8rem 0;
  cursor:pointer;
  background:transparent;
  color:var(--rokk-navy);
  text-align:left
}
.rokk-offer-num {
  font-family:var(--rokk-display);
  font-size:2.4rem;
  color:#0986a8
}
.rokk-pilot .rokk-offer-title {
  font-family:var(--rokk-display);
  font-weight:400;
  font-size:clamp(1.6rem,3vw,2.3rem);
  margin-bottom:.3rem;
  letter-spacing:.01em;
  line-height:1.25
}
.rokk-offer-summary {
  font-size:1rem;
  color:#466376
}
.rokk-pilot .rokk-expand {
  border:1px solid var(--rokk-line);
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  position:relative
}
.rokk-expand svg {
  width:22px;
  height:22px
}
.rokk-offer.gb-accordion__item-open .rokk-expand {
  background:var(--rokk-navy);
  color:#fff;
  border-color:var(--rokk-orange)
}
.rokk-offer-body {
  padding:0 55px 2rem 91px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem
}
.rokk-offer-body h4 {
  font-size:.875rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin:0 0 .6rem
}
.rokk-offer-body p {
  font-size:1rem
}
.rokk-tags {
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-top:1rem
}
.rokk-tag {
  font-size:.875rem;
  background:var(--rokk-soft);
  padding:.25rem .65rem
}
.rokk-pilot .rokk-offer-link {
  margin-top:1.1rem;
  display:inline-block
}
.rokk-about {
  background:var(--rokk-soft)
}
.rokk-about-grid {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:5rem;
  align-items:center
}
.rokk-pilot .rokk-display-name {
  font-family:var(--rokk-display);
  font-size:clamp(4rem,7vw,6.6rem);
  line-height:1.03;
  color:var(--rokk-navy);
  margin-top:1rem
}
.rokk-display-name span {
  color:#0986a8
}
.rokk-pilot .rokk-about-label {
  margin-top:1.4rem;
  font-size:1rem;
  color:#466376
}
.rokk-about-text p {
  font-size:1.0625rem
}
.rokk-about-text p+p {
  margin-top:1.2rem
}
.rokk-about-text .rokk-text-link {
  margin-top:1.6rem;
  display:inline-block
}
.rokk-pilot .rokk-portrait {
  position:relative;
  isolation:isolate;
  margin:3rem 0 0;
  background:#cbdfe6;
  overflow:hidden;
  min-height:480px
}
.rokk-portrait img {
  width:100%;
  height:520px;
  object-fit:cover;
  object-position:center 48%
}
.rokk-portrait:after {
  content:'';
  position:absolute;
  inset:0 42% 0 0;
  z-index:0;
  pointer-events:none;
  background:url('https://preprod.rokk.fr/wp-content/uploads/2026/10/rokk-topo-navy.webp') left center/auto 100% no-repeat;
  opacity:.16;
  mask-image:linear-gradient(90deg,#000,transparent)
}
.rokk-pilot .rokk-caption {
  position:absolute;
  left:2.5rem;
  top:2.5rem;
  max-width:350px;
  z-index:1;
  font-size:1.125rem;
  font-weight:500;
  line-height:1.75
}
.rokk-caption .rokk-eyebrow {
  font-size:.875rem;
  line-height:1.6;
  letter-spacing:.05em;
  max-width:255px
}
.rokk-pilot .rokk-territory {
  margin-top:1.6rem;
  padding-left:1rem;
  border-left:3px solid var(--rokk-orange);
  font-size:1rem;
  color:#466376
}
@keyframes rokk-trace {
  from {
    stroke-dashoffset:1000
  }
  to {
    stroke-dashoffset:0
  }
}
@keyframes rokk-reveal {
  from {
    opacity:0
  }
  to {
    opacity:1
  }
}
@keyframes rokk-arrival {
  from {
    opacity:0;
    transform:translateY(16px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@media(min-width:1800px) {
  .rokk-landscape {
    left:5%;
    right:-17%
  }
}
@media(max-width:1100px) {
  .rokk-header-inner,.rokk-hero-stage {
    width:calc(100% - 3rem)
  }
  .rokk-landscape {
    left:4%;
    right:-45%
  }
  .rokk-hero-copy {
    max-width:620px
  }
  .rokk-shade {
    background:linear-gradient(90deg,#040e14ed,#040e14b3 38%,#040e1426 75%),linear-gradient(180deg,#040e1480,transparent 25%,#040e14d9)
  }
}
@media(max-width:1050px) {
  .rokk-pilot .rokk-caption {
    max-width:290px;
    left:2rem;
    font-size:1rem
  }
}
@media(max-width:1000px) {
  .rokk-pilot .rokk-menu-toggle {
    display:block
  }
  .rokk-pilot .rokk-nav {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--rokk-navy);
    padding:1.2rem 1.5rem 1.6rem;
    border-bottom:1px solid #ffffff40;
    align-items:stretch;
    gap:1.1rem;
    flex-direction:column;
    font-size:1rem
  }
  .rokk-nav[data-open=true] {
    display:flex
  }
  .rokk-nav a {
    padding:.2rem 0
  }
  .rokk-section-head {
    gap:2rem
  }
  .rokk-about-grid {
    gap:3rem
  }
  .rokk-offer-body {
    gap:2rem
  }
}
@media(max-width:760px) {
  .rokk-pilot [id] {
    scroll-margin-top:90px
  }
  .rokk-header-inner,.rokk-hero-stage {
    width:calc(100% - 2.5rem)
  }
  .rokk-header-inner {
    min-height:76px
  }
  .rokk-logo {
    width:155px
  }
  .rokk-hero,.rokk-hero-stage {
    min-height:100svh
  }
  .rokk-hero-stage {
    align-items:flex-end;
    padding-block:215px 36px
  }
  .rokk-landscape {
    inset:-2% -65% -4% -65%
  }
  .rokk-shade {
    background:linear-gradient(180deg,#040e1466 0%,#040e141a 22%,#040e14b3 36%,#040e14f0 62%,#040e14 100%)
  }
  .rokk-hero-copy {
    max-width:520px
  }
  .rokk-pilot .rokk-hero-title {
    font-size:clamp(1.5rem,7.9vw,3.7rem);
    line-height:1.16
  }
  .rokk-hero-copy>.rokk-eyebrow {
    max-width:340px;
    line-height:1.7;
    margin-bottom:1rem
  }
  .rokk-hero-copy>.rokk-hero-lead {
    margin-top:1.2rem;
    font-size:1rem;
    line-height:1.7;
    max-width:440px
  }
  .rokk-pilot .rokk-actions {
    margin-top:1.4rem;
    gap:.85rem;
    align-items:flex-start;
    flex-direction:column
  }
  .rokk-hero-copy>.rokk-hero-location {
    margin-top:1.2rem;
    max-width:290px
  }
  .rokk-horizon {
    display:none
  }
  .route-line {
    stroke-width:3
  }
  .route-halo {
    stroke-width:10
  }
  .rokk-section-head {
    grid-template-columns:1fr;
    gap:1.5rem;
    margin-bottom:2rem
  }
  .rokk-section-head h2 {
    font-size:2.75rem
  }
  .rokk-delivery {
    grid-template-columns:1fr;
    gap:.6rem;
    margin-bottom:1.7rem;
    padding-left:1rem
  }
  .rokk-pilot .rokk-offer-toggle {
    grid-template-columns:42px 1fr 35px;
    gap:.65rem;
    padding-block:1.4rem
  }
  .rokk-pilot .rokk-offer-title {
    font-size:1.7rem
  }
  .rokk-offer-summary {
    font-size:1rem
  }
  .rokk-offer-num {
    font-size:1.75rem
  }
  .rokk-pilot .rokk-expand {
    width:34px;
    height:34px
  }
  .rokk-offer-body {
    grid-template-columns:1fr;
    padding:0 0 1.8rem;
    gap:1.4rem
  }
  .rokk-about-grid {
    grid-template-columns:1fr;
    gap:2rem
  }
  .rokk-pilot .rokk-display-name {
    font-size:4.3rem
  }
  .rokk-about-text p {
    font-size:1rem
  }
  .rokk-pilot .rokk-portrait {
    margin-top:2rem;
    min-height:0
  }
  .rokk-portrait img {
    height:auto;
    aspect-ratio:1/1;
    object-position:78% center
  }
  .rokk-portrait:after {
    inset:0 0 auto;
    height:45%;
    opacity:.12
  }
  .rokk-pilot .rokk-caption {
    position:relative;
    left:auto;
    top:auto;
    max-width:none;
    padding:1.5rem;
    background:var(--rokk-navy);
    color:#fff;
    border-top:3px solid var(--rokk-orange);
    font-weight:400;
    font-size:1rem
  }
  .rokk-caption .rokk-eyebrow {
    max-width:none;
    color:var(--rokk-ice)
  }
  .rokk-territory {
    line-height:1.7
  }
}
@media(max-width:360px) {
  .rokk-hero-stage {
    padding-top:175px
  }
}
@media(prefers-reduced-motion:reduce) {
  .rokk-pilot *,.rokk-pilot *:before,.rokk-pilot *:after {
    animation:none!important;
    transition:none!important
  }
  .rokk-landscape {
    will-change:auto;
    transform:none!important
  }
  .route-line {
    stroke-dashoffset:0
  }
  .route-stations,.route-summit,.rokk-hero-copy {
    opacity:1;
    transform:none
  }
}
.rokk-pilot :is(h3,h4) {
  color:inherit
}

/* Cadrage validé : hauteur minimale pour préserver le sommet, fondu à gauche. */
@media(min-width:761px) {
  .rokk-landscape {
    top:-12px;
    bottom:auto;
    height:max(110%,67.48vw);
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 22%);
    mask-image:linear-gradient(to right,transparent 0%,#000 22%)
  }
}
@media(min-width:761px) and (max-width:1100px) {
  .rokk-landscape {
    height:max(110%,80.63vw)
  }
}
@media(min-width:1800px) {
  .rokk-landscape {
    height:max(110%,64.05vw)
  }
}