/* ============================================
   A.M SHIPPING — système de design
   Palette: marine profond, pétrole, beige conteneur, rouille
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --navy:        #0F2438;
  --navy-deep:   #081521;
  --petrol:      #1B4F63;
  --sand:        #C9B58B;
  --sand-light:  #EDE6D3;
  --paper:       #F7F5F0;
  --rust:        #C1502E;
  --rust-dark:   #9E3E22;
  --ink:         #10151A;
  --line:        rgba(15,36,56,0.14);

  --display: 'Big Shoulders Display', sans-serif;
  --body: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }
img,svg{ display:block; max-width:100%; }

.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Chart grid backdrop ---------- */
.chart-grid{
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 42px 42px;
}

/* ---------- Header / nav ---------- */
header.site{
  background: var(--navy);
  color: var(--paper);
  border-bottom: 3px solid var(--rust);
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 20px 0;
}
.brand{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-family: var(--display);
  font-weight:800;
  font-size: 26px;
  letter-spacing: 0.01em;
  color: var(--paper);
}
.brand small{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--sand);
  letter-spacing: 0.08em;
}
nav.main{
  display:flex;
  gap: 28px;
  font-size: 15px;
  font-weight:500;
}
nav.main a{
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
nav.main a:hover, nav.main a.active{
  border-color: var(--rust);
  color: var(--sand);
}
.nav-cta{
  background: var(--rust);
  color: var(--paper);
  padding: 10px 20px;
  font-weight:600;
  font-size: 14px;
  border-radius: 2px;
  transition: background .15s ease;
}
.nav-cta:hover{ background: var(--rust-dark); }

.mobile-toggle{ display:none; }

/* ---------- Hero ---------- */
.hero{
  background: var(--navy);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--petrol);
}
.hero .wrap{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items:center;
  padding-top: 76px;
  padding-bottom: 76px;
  position: relative;
  z-index: 2;
}
.route-code{
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--sand);
  margin-bottom: 22px;
}
.route-code span{ color: var(--rust); }
h1.hero-title{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(42px, 6vw, 76px);
  line-height: 0.96;
  margin: 0 0 26px;
  letter-spacing: 0.005em;
}
.hero-sub{
  font-size: 18px;
  color: var(--sand-light);
  max-width: 46ch;
  margin: 0 0 34px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.btn{
  display:inline-block;
  padding: 14px 26px;
  font-weight:600;
  font-size: 15px;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: all .15s ease;
}
.btn-primary{ background: var(--rust); color:var(--paper); }
.btn-primary:hover{ background: var(--rust-dark); }
.btn-ghost{ border-color: var(--sand); color: var(--sand-light); }
.btn-ghost:hover{ background: rgba(201,181,139,0.1); }

.hero-art{ position:relative; }
.hero-photo{
  width:100%;
  height: 380px;
  object-fit: cover;
  border: 1px solid var(--petrol);
  filter: saturate(1.05);
}
.section-photo{
  width:100%;
  height: 260px;
  object-fit: cover;
  margin-top: 22px;
  border: 1px solid var(--line);
}

/* ---------- Manifest ticker ---------- */
.ticker{
  background: var(--petrol);
  color: var(--sand-light);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  overflow:hidden;
  white-space: nowrap;
  border-bottom: 1px solid rgba(247,245,240,0.15);
}
.ticker-track{
  display:inline-block;
  padding: 10px 0;
  animation: scroll 32s linear infinite;
}
.ticker-track span{ margin-right: 48px; }
@keyframes scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ---------- Sections ---------- */
section{ padding: 84px 0; }
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 24px;
  margin-bottom: 44px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 18px;
}
.section-num{
  font-family: var(--mono);
  font-size: 13px;
  color: var(--rust);
  letter-spacing: 0.08em;
}
h2.section-title{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 48px);
  margin: 6px 0 0;
  line-height: 1;
}
.section-note{
  max-width: 34ch;
  font-size: 15px;
  color: var(--petrol);
  text-align:right;
}

/* ---------- Manifest table (services) ---------- */
.manifest{
  width:100%;
  border-collapse: collapse;
}
.manifest thead th{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-align:left;
  color: var(--petrol);
  border-bottom: 1px solid var(--ink);
  padding: 0 0 12px;
  font-weight:500;
}
.manifest tbody tr{
  border-bottom: 1px solid var(--line);
  transition: background .15s ease;
}
.manifest tbody tr:hover{ background: var(--sand-light); }
.manifest td{
  padding: 22px 0;
  vertical-align: top;
}
.manifest td.code{
  font-family: var(--mono);
  font-size: 14px;
  color: var(--rust);
  width: 90px;
}
.manifest td.name{
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  width: 260px;
  padding-right: 20px;
}
.manifest td.desc{
  font-size: 15px;
  color: var(--ink);
  opacity: 0.85;
}
.manifest td.route{
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--petrol);
  text-align:right;
  width: 140px;
}

/* ---------- Cards ---------- */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
}
.card{
  background: var(--paper);
  padding: 32px 28px;
}
.card-photo{
  margin: -32px -28px 20px;
  height: 170px;
  overflow: hidden;
}
.card-photo img{
  width:100%;
  height:100%;
  object-fit: cover;
  filter: saturate(1.05);
}
.card .mark{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--rust);
  margin-bottom: 18px;
  display:block;
}
.card h3{
  font-family: var(--display);
  font-size: 24px;
  margin: 0 0 12px;
}
.card p{ font-size: 14.5px; color: var(--ink); opacity:0.8; margin:0; }

/* ---------- Stats strip ---------- */
.stats{
  background: var(--navy);
  color: var(--paper);
}
.stats .wrap{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap: 0;
}
.stat{
  padding: 44px 28px;
  border-left: 1px solid rgba(247,245,240,0.15);
}
.stat:first-child{ border-left:none; padding-left:0; }
.stat b{
  display:block;
  font-family: var(--display);
  font-size: 44px;
  color: var(--sand);
  line-height:1;
  margin-bottom: 8px;
}
.stat span{ font-size: 13px; color: var(--sand-light); }

/* ---------- Partners ---------- */
.partners-row{
  display:flex;
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.partner{
  flex:1;
  text-align:center;
  padding: 26px 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  border-right: 1px solid var(--line);
  color: var(--petrol);
}
.partner:last-child{ border-right:none; }

/* ---------- Two col ---------- */
.two-col{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: start;
}
.two-col.rev{ grid-template-columns: 1.1fr 0.9fr; }
.lead{ font-size: 19px; color: var(--navy); }
.pill-list{ list-style:none; margin: 26px 0 0; padding:0; }
.pill-list li{
  padding: 14px 0;
  border-top: 1px solid var(--line);
  display:flex;
  gap: 14px;
  font-size: 15px;
}
.pill-list li:last-child{ border-bottom: 1px solid var(--line); }
.pill-list .num{
  font-family: var(--mono);
  color: var(--rust);
  font-size: 13px;
  flex-shrink:0;
  padding-top: 2px;
}

/* ---------- CTA band ---------- */
.cta-band{
  background: var(--rust);
  color: var(--paper);
}
.cta-band .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
  flex-wrap:wrap;
  padding: 56px 32px;
}
.cta-band h2{
  font-family: var(--display);
  font-weight:800;
  font-size: clamp(28px,3.6vw,42px);
  margin:0;
  max-width: 18ch;
}
.cta-band .btn-ghost{ border-color: var(--paper); color:var(--paper); }
.cta-band .btn-ghost:hover{ background: rgba(247,245,240,0.15); }

/* ---------- Footer ---------- */
footer.site{
  background: var(--navy-deep);
  color: var(--sand-light);
  padding: 56px 0 28px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(247,245,240,0.12);
}
.footer-grid h4{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--sand);
  margin: 0 0 16px;
  font-weight:500;
}
.footer-grid a, .footer-grid p{
  display:block;
  font-size: 14px;
  color: var(--sand-light);
  opacity: 0.85;
  margin-bottom: 10px;
  line-height:1.6;
}
.footer-grid a:hover{ opacity:1; color: var(--sand); }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  padding-top: 24px;
  font-size: 12.5px;
  font-family: var(--mono);
  color: rgba(237,230,211,0.55);
  flex-wrap:wrap;
  gap:10px;
}

/* ---------- Page header (interior pages) ---------- */
.page-head{
  background: var(--navy);
  color: var(--paper);
  padding: 64px 0 48px;
  border-bottom: 3px solid var(--rust);
}
.page-eyebrow{
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--sand);
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
h1.page-title{
  font-family: var(--display);
  font-weight:800;
  font-size: clamp(36px,5vw,58px);
  margin:0;
  line-height: 1;
}
.page-sub{
  margin-top: 16px;
  font-size: 16px;
  color: var(--sand-light);
  max-width: 60ch;
}

/* ---------- Forms ---------- */
.form-shell{
  display:grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 56px;
  align-items:start;
}
form.quote{
  background: var(--paper);
  border: 1px solid var(--ink);
}
.form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
}
.form-row.single{ grid-template-columns: 1fr; }
.field{
  padding: 20px 24px;
  border-right: 1px solid var(--line);
}
.form-row.single .field, .form-row .field:last-child{ border-right:none; }
.field label{
  display:block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--petrol);
  margin-bottom: 8px;
}
.field input, .field select, .field textarea{
  width:100%;
  border:none;
  background:transparent;
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  padding:0;
  resize: vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none;
  color: var(--rust);
}
.field textarea{ min-height: 90px; }
.form-submit{
  padding: 22px 24px;
  display:flex;
  justify-content:flex-end;
}
.form-submit .btn-primary{ border:none; cursor:pointer; font-family: var(--body); }

.info-block{
  background: var(--sand-light);
  border: 1px solid var(--line);
  padding: 30px 26px;
  margin-bottom: 20px;
}
.info-block h4{
  font-family: var(--display);
  font-size: 19px;
  margin: 0 0 10px;
}
.info-block p{ font-size: 14.5px; margin:0; color: var(--ink); opacity:0.85; }

/* ---------- Blog ---------- */
.post-list{ display:flex; flex-direction:column; }
.post-row{
  display:grid;
  grid-template-columns: 130px 1fr auto;
  gap: 28px;
  align-items:baseline;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.post-row:first-child{ border-top: 1px solid var(--ink); }
.post-date{
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--rust);
}
.post-row h3{
  font-family: var(--display);
  font-size: 22px;
  margin: 0 0 6px;
}
.post-row p{ font-size:14.5px; color:var(--ink); opacity:0.8; margin:0; max-width:64ch; }
.post-tag{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--petrol);
  border: 1px solid var(--petrol);
  padding: 4px 10px;
  border-radius: 2px;
  white-space:nowrap;
  height: fit-content;
}

/* ---------- Utility ---------- */
.mt-0{ margin-top:0; }
.center{ text-align:center; }

@media (max-width: 900px){
  nav.main{ display:none; }
  .hero .wrap{ grid-template-columns: 1fr; padding-top:52px; padding-bottom:52px; }
  .two-col, .two-col.rev{ grid-template-columns: 1fr; gap: 36px; }
  .grid-3{ grid-template-columns: 1fr; }
  .stats .wrap{ grid-template-columns: 1fr 1fr; }
  .stat{ border-left:none; border-top: 1px solid rgba(247,245,240,0.15); padding-left:0; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .form-shell{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .field{ border-right:none !important; border-bottom: 1px solid var(--line); }
  .manifest td.name{ width:auto; }
  .manifest td.route{ display:none; }
  .post-row{ grid-template-columns: 1fr; gap:8px; }
}

@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation: none; }
  html{ scroll-behavior:auto; }
}