:root{
  --night:#071A2D;
  --night-2:#0A1B2E;
  --blue:#1677FF;
  --blue-2:#006DFF;
  --green:#00B386;
  --green-2:#27D4A0;
  --orange:#FF8A00;
  --white:#F7FAFC;
  --steel:#8A97A6;
  --line:rgba(255,255,255,.16);
  --glass:rgba(7,26,45,.64);
  --card:rgba(7,26,45,.72);
  --shadow: 0 24px 80px rgba(0,0,0,.35);
  --radius: 24px;
}
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  scrollbar-gutter:stable;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--white);
  background:
    radial-gradient(circle at 80% 10%, rgba(0,109,255,.16), transparent 34%),
    radial-gradient(circle at 75% 80%, rgba(0,179,134,.18), transparent 32%),
    linear-gradient(180deg, #061525, #071A2D 46%, #061321);
  overflow-x:hidden;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
:focus-visible{outline:2px solid var(--green-2);outline-offset:3px;border-radius:4px}
/* Container fluide : grandit smooth de 320 → 1920 (28-64px de marge selon viewport) */
.container{
  width:min(1400px, calc(100% - clamp(28px, 4vw, 64px)));
  margin-inline:auto;
}
/* Section padding fluide : 56px mobile → 110px desktop */
.section{
  padding:clamp(56px, 9vw, 110px) 0;
  scroll-margin-top:96px;
}
.section-dark{position:relative}
.site-header{
  position:fixed; inset:18px 20px auto 20px; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  max-width:1180px; margin:auto; padding:12px 14px 12px 18px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(5,17,31,.72);
  backdrop-filter:blur(18px);
  border-radius:999px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.brand{display:inline-flex;align-items:center}
.brand picture{display:block;line-height:0}
.brand img{width:190px;height:auto;display:block}
.main-nav{display:flex; gap:28px; align-items:center; font-size:14px; color:rgba(255,255,255,.82)}
.main-nav a{position:relative}
.main-nav a:after{
  content:""; position:absolute; left:0; right:0; bottom:-10px; height:2px;
  transform:scaleX(0); transform-origin:left; background:var(--green); transition:.25s;
}
.main-nav a:hover:after{transform:scaleX(1)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:14px; padding:14px 20px; font-weight:800; font-size:14px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  border:1px solid transparent; cursor:pointer;
  min-height:48px;             /* WCAG 2.5.5 touch target */
  white-space:nowrap;
  text-decoration:none;
}
@media (hover:none){ .btn:hover{transform:none !important} }   /* pas d'hover sur touch */
.btn-primary{
  color:white; background:linear-gradient(135deg, var(--blue), #0C5FE8);
  box-shadow:0 14px 32px rgba(0,109,255,.28);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 40px rgba(0,109,255,.4)}
.btn-outline{
  background:rgba(0,179,134,.08); border-color:rgba(0,179,134,.55); color:#DFFFF5;
}
.btn-outline:hover{background:rgba(0,179,134,.16); transform:translateY(-2px)}
.menu-toggle{display:none;background:transparent;border:0;width:48px;height:48px;cursor:pointer;padding:0}
.menu-toggle span{display:block;height:2px;margin:7px auto;width:24px;background:white;border-radius:2px;transition:transform .2s,opacity .2s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* Hero fluide : min-h adaptatif + padding fluide pour alignement vertical propre */
.hero{
  min-height:clamp(620px, 88dvh, 880px);
  padding:clamp(120px, 18dvh, 170px) 0 clamp(56px, 8dvh, 100px);
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(5,17,31,.96) 0%, rgba(5,17,31,.82) 30%, rgba(5,17,31,.40) 55%, rgba(5,17,31,.10) 80%, rgba(5,17,31,.05) 100%),
    linear-gradient(180deg, rgba(5,17,31,0) 60%, rgba(5,17,31,.45) 100%),
    image-set(url("assets/hero-ship.webp") type("image/webp"),url("assets/hero-ship.jpg") type("image/jpeg")) center right / cover no-repeat;
  transform:scale(1.02);
}
@supports not (background-image:image-set(url("a") type("image/webp"))){
  .hero-bg{
    background:
      linear-gradient(90deg, rgba(5,17,31,.96) 0%, rgba(5,17,31,.82) 30%, rgba(5,17,31,.40) 55%, rgba(5,17,31,.10) 80%, rgba(5,17,31,.05) 100%),
      linear-gradient(180deg, rgba(5,17,31,0) 60%, rgba(5,17,31,.45) 100%),
      url("assets/hero-ship.jpg") center right / cover no-repeat;
  }
}
.hero:after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:190px;
  background:linear-gradient(180deg, transparent, #071A2D 75%);
}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px, 3vw, 34px);align-items:end}
.eyebrow{
  color:var(--green-2); text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:900;
}
/* ─── Échelle typographique fluide (Major Third 1.25, calée 320 → 1440) ───
   H1 hero  : 32px → 72px   (impact max, jamais > 4.5rem)
   H2 sect  : 26px → 44px   (titres sections)
   H3 cards : 18px → 22px   (sous-titres cartes)
   body     : 15px → 17px   (lecture confortable)                         */
.hero h1{
  font-size:clamp(2rem, 1.5rem + 3vw, 4.5rem);
  line-height:1.05; letter-spacing:-.035em; margin:18px 0 22px;
  overflow-wrap:break-word; word-break:normal;
  text-wrap:balance;
}
.section h2,.section-heading h2,.cta-copy h2{
  font-size:clamp(1.625rem, 1.35rem + 1.5vw, 2.75rem);
  line-height:1.15; letter-spacing:-.025em; margin:8px 0 14px;
  overflow-wrap:break-word; word-break:normal;
  text-wrap:pretty;        /* équilibre seulement si utile, pas forcé */
}
.quote-band h2{
  line-height:1.25; letter-spacing:-.015em; margin:0;
  overflow-wrap:break-word; text-wrap:balance;
}
.hero h1 span,.section-heading h2 span,.quote-band span,.cta-copy h2 span{color:var(--blue)}
.hero-lead{font-size:clamp(.95rem, .85rem + .5vw, 1.125rem);line-height:1.6;color:rgba(255,255,255,.84);max-width:590px;text-wrap:pretty}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(20px, 3vw, 32px)}
.hero-panel{align-self:end; justify-self:end; width:min(390px,100%); display:grid; gap:14px}
.status-card,.mini-metrics,.quote-form,.service-card,.step,.benefit,.quote-band,.media-card{
  border:1px solid var(--line);
  background:linear-gradient(145deg, rgba(9,31,53,.8), rgba(4,18,33,.54));
  backdrop-filter:blur(16px);
  box-shadow:var(--shadow);
}
.status-card{display:flex;gap:14px;padding:18px;border-radius:18px}
.status-dot{width:12px;height:12px;background:var(--green);border-radius:50%;box-shadow:0 0 0 8px rgba(0,179,134,.14),0 0 25px var(--green);margin-top:5px}
.status-card strong{display:block}
.status-card small{display:block;color:rgba(255,255,255,.65);margin-top:4px}
.mini-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;padding:14px;border-radius:18px}
.mini-metrics div{padding:10px;text-align:center}
.mini-metrics strong{display:block;color:white}
.mini-metrics span{color:var(--steel);font-size:12px}

.media-strip{position:relative;z-index:5;margin-top:clamp(-72px, -8vw, -92px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px, 1.6vw, 18px)}
.media-card{position:relative;overflow:hidden;border-radius:20px;min-height:220px}
.media-card img{height:220px;width:100%;object-fit:cover;filter:saturate(1.08) contrast(1.05)}
.media-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent 30%, rgba(5,17,31,.88))}
.media-card div{position:absolute;left:20px;right:20px;bottom:18px;z-index:2}
.media-card strong{display:block;font-size:clamp(1.15rem, 1rem + .5vw, 1.4rem);letter-spacing:-.01em}
.media-card span{color:rgba(255,255,255,.72);font-size:clamp(.85rem, .8rem + .15vw, .95rem)}

.section-heading{margin-bottom:clamp(28px, 4vw, 44px)}
.section-heading h2{max-width:none}
.section-heading p:not(.eyebrow){max-width:640px;color:rgba(255,255,255,.7);font-size:clamp(.95rem, .85rem + .35vw, 1.125rem);line-height:1.6;text-wrap:pretty}
.section-heading.centered{text-align:center}
.section-heading.centered h2{max-width:1100px;margin-inline:auto}
.section-heading.centered p{margin-inline:auto}

.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px, 2vw, 22px)}
.service-card{padding:clamp(22px, 2.4vw, 32px);border-radius:var(--radius);position:relative;overflow:hidden;transition:transform .3s ease, border-color .3s ease}
.service-card:hover{transform:translateY(-4px);border-color:rgba(22,119,255,.5)}
@media (hover:none){ .service-card:hover{transform:none} }
.service-card:before{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;background:linear-gradient(90deg,var(--blue),var(--green));
}
.icon{
  width:clamp(52px, 4vw, 62px); height:clamp(52px, 4vw, 62px);
  border-radius:18px;border:1px solid rgba(22,119,255,.45);
  display:grid;place-items:center;
  font-size:clamp(1.5rem, 1rem + 1vw, 1.875rem);
  color:var(--green);margin-bottom:22px;
  background:rgba(22,119,255,.08);
}
.service-card h3{font-size:clamp(1.125rem, 1rem + .5vw, 1.4rem);line-height:1.25;margin:0 0 12px;letter-spacing:-.01em}
.service-card p{color:rgba(255,255,255,.7);line-height:1.6;font-size:clamp(.9rem, .85rem + .2vw, 1rem)}
.service-card ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px;color:rgba(255,255,255,.82)}
.service-card li:before{content:"✓";color:var(--green);font-weight:900;margin-right:10px}

.section-panel{background:linear-gradient(90deg, rgba(0,109,255,.1), rgba(0,179,134,.08));border-block:1px solid var(--line)}
.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px, 1.6vw, 18px)}
.benefit{border-radius:22px;padding:clamp(20px, 2.2vw, 28px);text-align:center}
.benefit span{font-size:clamp(1.75rem, 1.5rem + 1vw, 2.125rem);display:block;margin-bottom:12px;line-height:1}
.benefit strong{font-size:clamp(1.05rem, .95rem + .35vw, 1.25rem);display:block;letter-spacing:-.005em}
.benefit p{color:rgba(255,255,255,.68);margin-bottom:0;font-size:clamp(.85rem, .8rem + .2vw, .95rem);line-height:1.55}

.process{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px, 1.6vw, 18px);counter-reset:steps}
.step{padding:clamp(20px, 2.2vw, 28px);border-radius:22px;position:relative}
.step span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(0,109,255,.16);border:1px solid rgba(22,119,255,.5);color:white;font-weight:900;font-size:.95rem}
.step h3{margin:18px 0 8px;font-size:clamp(1.05rem, .95rem + .35vw, 1.25rem);letter-spacing:-.005em}
.step p{color:rgba(255,255,255,.66);line-height:1.55;margin:0;font-size:clamp(.85rem, .8rem + .2vw, .95rem)}

.quote-band{
  display:flex;gap:clamp(14px, 1.6vw, 24px);align-items:center;
  border-radius:var(--radius);padding:clamp(24px, 3vw, 44px);
  overflow:hidden;position:relative;
  text-align:center;
}
.quote-band:after{content:"";position:absolute;right:0;top:0;bottom:0;width:42%;background:radial-gradient(circle at center, rgba(0,179,134,.32), transparent 62%);pointer-events:none}
.quote-mark{
  font-size:clamp(3rem, 1.5rem + 3.5vw, 5rem);
  color:var(--green);line-height:.7;flex-shrink:0;
  font-family:Georgia,'Times New Roman',serif;   /* meilleurs guillemets typo */
  font-weight:800;
  align-self:flex-start;
}
.quote-mark-close{align-self:flex-end}
.quote-band h2{
  font-size:clamp(1.375rem, 1rem + 1.4vw, 2.25rem);   /* 22 → 36px (cap) */
  line-height:1.25;margin:0;z-index:1;letter-spacing:-.015em;
  text-wrap:balance;flex:1;
}
.quote-band h2 span{display:inline}    /* sur 1 ligne si place dispo */

.cta-section{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px, 3vw, 40px);align-items:start}
.cta-copy p{color:rgba(255,255,255,.72);line-height:1.65;font-size:clamp(.95rem, .9rem + .25vw, 1.0625rem);text-wrap:pretty}
.contact-mini{display:grid;gap:10px;margin-top:22px}
.contact-mini a{color:#EFFFFA}
.quote-form{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:24px;border-radius:var(--radius)}
.quote-form label{font-size:13px;color:rgba(255,255,255,.75);font-weight:700}
.quote-form input,.quote-form select,.quote-form textarea{
  margin-top:8px;width:100%;padding:14px 14px;border-radius:12px;
  color:white;background:rgba(5,17,31,.75);border:1px solid rgba(255,255,255,.15);outline:none;
}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(0,179,134,.12)}
.quote-form textarea{min-height:96px;resize:vertical}
.full{grid-column:1/-1}
.form-note{grid-column:1/-1;margin:0;color:var(--green)}

.site-footer{padding:42px 0;border-top:1px solid var(--line);background:#04111f}
.footer-grid{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:24px;align-items:start}
.footer-grid picture{display:block;line-height:0}
.footer-grid img{width:220px;height:auto;display:block}
.footer-grid strong{color:white}
.footer-grid p{color:rgba(255,255,255,.68);line-height:1.55}

.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
  will-change:opacity, transform;
}
.reveal.in-view{opacity:1;transform:none;will-change:auto}
.cursor-glow{
  position:fixed; width:280px;height:280px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle, rgba(22,119,255,.13), transparent 62%);
  transform:translate(-50%,-50%);opacity:.8;
}
/* Réduction mouvement (a11y) — global */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  .cursor-glow{display:none}
}
/* ─── Tablette (≤ 980 px) ─── */
@media (max-width:980px){
  .site-header{border-radius:24px}
  .main-nav,.header-cta{display:none}
  .menu-toggle{display:block}
  .main-nav.open{
    display:flex;position:absolute;top:76px;left:0;right:0;flex-direction:column;padding:20px;
    background:rgba(5,17,31,.94);border:1px solid var(--line);border-radius:22px
  }
  .hero{min-height:auto;padding-top:130px}
  /* Tablette/mobile : assombrir davantage le hero pour lisibilité texte
     (sur viewport portrait l'image occupe quasiment tout l'écran) */
  .hero-bg{
    background:
      linear-gradient(180deg, rgba(5,17,31,.78) 0%, rgba(5,17,31,.62) 40%, rgba(5,17,31,.86) 100%),
      image-set(url("assets/hero-ship.webp") type("image/webp"),url("assets/hero-ship.jpg") type("image/jpeg")) center / cover no-repeat !important;
  }
  .hero-grid,.cta-section{grid-template-columns:1fr}
  .hero-panel{justify-self:start;max-width:100%;width:100%}
  /* Fix : grilles passent en 1 col entre 681 et 980 (services, advantages, process) — pas d'orpheline */
  .media-strip,.service-grid,.benefits-grid,.process{grid-template-columns:1fr 1fr}
  .service-grid{grid-template-columns:1fr}
  .cursor-glow{display:none}
}
/* ─── Mobile (≤ 680 px) ─── */
@media (max-width:680px){
  .brand img{width:155px}
  .site-header{inset:12px 12px auto 12px}
  /* H1/H2 typographie : géré via clamp() global — pas d'override fixe ici */
  .media-strip,.service-grid,.benefits-grid,.process,.quote-form{grid-template-columns:1fr}
  .quote-band{align-items:flex-start;flex-direction:column;gap:12px}
  .footer-grid{grid-template-columns:1fr}
  .cursor-glow{display:none}
}