/*
Theme Name: IGTLCI Transit
Theme URI: https://igtlci.com
Author: IGTLCI
Description: Thème sur mesure pour IGTLCI — transit, fret international et logistique. Design signature : route maritime animée, palette conteneur.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: igtlci
*/

:root{
  --navy:#0c1926;
  --navy-2:#112436;
  --surface:#152a40;
  --surface-2:#1c3550;
  --border:#28415c;
  --border-soft:#1a2f45;
  --text:#eef2f7;
  --text-dim:#94a6bf;
  --text-faint:#5c7188;
  --orange:#d9793d;
  --orange-dim:rgba(217,121,61,.16);
  --gold:#e8b84b;
  --display:'Space Grotesk', sans-serif;
  --sans:'Inter', sans-serif;
  --mono:'IBM Plex Mono', monospace;
  --maxw:1200px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}
body{
  background:var(--navy);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
section{position:relative; z-index:1;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
ul{list-style:none;}

.eyebrow{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange); display:inline-flex; align-items:center; gap:.5em; margin-bottom:14px;
}
.eyebrow::before{content:""; width:7px; height:7px; background:var(--orange); border-radius:50%; box-shadow:0 0 0 4px var(--orange-dim);}

h1,h2,h3{ font-family:var(--display); font-weight:700; letter-spacing:-.01em; line-height:1.1; }
h2{font-size:clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom:14px;}
h3{font-size:1.2rem;}
p{color:var(--text-dim);}
.lede{font-size:clamp(1rem, 1.4vw, 1.15rem); max-width:58ch;}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--orange); outline-offset:3px; border-radius:4px;
}

/* Header */
.site-header{position:sticky; top:0; z-index:50; background:rgba(10,27,46,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--border-soft);}
.nav{max-width:var(--maxw); margin:0 auto; padding:16px 28px; display:flex; align-items:center; justify-content:space-between;}
.brand{font-family:var(--display); font-weight:700; font-size:1.15rem; display:flex; align-items:center; gap:10px; letter-spacing:.01em;}
.brand .mark{width:30px; height:30px; border-radius:6px; background:var(--orange); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.7rem; color:var(--navy); font-weight:700;}
.brand .sub{color:var(--text-faint); font-weight:400; font-size:.7rem; font-family:var(--mono); margin-left:2px;}
.navlinks{display:flex; gap:30px; align-items:center;}
.navlinks a{font-size:.92rem; color:var(--text-dim); transition:color .2s;}
.navlinks a:hover{color:var(--text);}
.navcta{font-family:var(--mono); font-size:.8rem; font-weight:600; color:var(--navy); background:var(--orange); padding:9px 18px; border-radius:6px; transition:transform .18s, box-shadow .18s;}
.navcta:hover{transform:translateY(-1px); box-shadow:0 6px 20px rgba(255,106,61,.32);}
.navtoggle{display:none; background:none; border:1px solid var(--border); color:var(--text); width:40px; height:40px; border-radius:6px; font-family:var(--mono);}

/* Hero */
.hero{padding:90px 0 60px; position:relative; overflow:hidden;}
.hero::before{
  content:""; position:absolute; inset:-10% -10% auto -10%; height:600px;
  background:radial-gradient(ellipse 60% 50% at 30% 0%, rgba(255,106,61,.10), transparent 70%);
  pointer-events:none;
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
.hero h1{font-size:clamp(2.2rem, 4.6vw, 3.6rem); margin:16px 0 20px;}
.hero h1 .hl{color:var(--orange);}
.hero-actions{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.btn{font-family:var(--mono); font-size:.86rem; font-weight:600; padding:13px 22px; border-radius:7px; display:inline-flex; align-items:center; gap:8px; transition:transform .18s, box-shadow .18s, border-color .18s, color .18s; border:1px solid transparent; cursor:pointer;}
.btn-primary{background:var(--orange); color:var(--navy);}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(255,106,61,.3);}
.btn-ghost{border-color:var(--border); color:var(--text);}
.btn-ghost:hover{border-color:var(--orange); color:var(--orange);}
.hero-meta{display:flex; gap:30px; margin-top:40px; flex-wrap:wrap;}
.hero-meta .n{font-family:var(--mono); font-size:1.5rem; font-weight:700; color:var(--text);}
.hero-meta .l{font-size:.74rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.08em;}

/* Route map card */
.routecard{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px; box-shadow:0 30px 80px -20px rgba(0,0,0,.55);}
.routecard-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; font-family:var(--mono); font-size:.72rem; color:var(--text-faint);}
.routecard-head .live{display:flex; align-items:center; gap:7px;}
.routecard-head .live span{width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 8px var(--orange); animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.3;}}
.routecard-foot{display:flex; justify-content:space-between; margin-top:14px; font-family:var(--mono); font-size:.72rem; color:var(--text-faint); border-top:1px solid var(--border-soft); padding-top:12px;}
.routecard-foot b{color:var(--orange);}

/* Trust strip */
.trust{padding:32px 0; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);}
.trust .wrap{display:flex; flex-wrap:wrap; gap:18px 40px; justify-content:space-between; align-items:center;}
.trust-item{font-family:var(--mono); font-size:.76rem; color:var(--text-faint); letter-spacing:.04em;}
.trust-item b{color:var(--text-dim); font-weight:600;}

/* Services */
.services{padding:100px 0 60px;}
.head-row{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:48px; flex-wrap:wrap;}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:26px 22px; transition:transform .22s, border-color .22s, box-shadow .22s;}
.card:hover{transform:translateY(-4px); border-color:var(--orange); box-shadow:0 16px 40px -16px rgba(255,106,61,.22);}
.card .ic{width:42px; height:42px; border-radius:9px; background:var(--orange-dim); display:flex; align-items:center; justify-content:center; margin-bottom:18px; font-size:1.2rem;}
.card h3{margin-bottom:8px; font-size:1.02rem;}
.card p{font-size:.9rem;}
.card.card-photo{background-size:cover; background-position:center; min-height:300px; padding:0; display:flex; align-items:flex-end; position:relative; overflow:hidden;}
.card.card-photo::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,25,38,0) 25%, rgba(12,25,38,.96) 92%);}
.card.card-photo:hover{transform:translateY(-4px); border-color:var(--orange); box-shadow:0 16px 40px -16px rgba(217,121,61,.3);}
.card-photo-body{position:relative; z-index:1; padding:22px;}
.card-photo-body .tag{font-family:var(--mono); font-size:.68rem; color:var(--orange); text-transform:uppercase; letter-spacing:.08em; display:block; margin-bottom:8px;}

/* Process */
.process{padding:70px 0;}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;}
.steps::before{content:""; position:absolute; top:26px; left:6%; right:6%; height:1px; background:linear-gradient(90deg, transparent, var(--border) 8%, var(--border) 92%, transparent);}
.step{padding:0 18px; position:relative;}
.step .num{font-family:var(--mono); font-weight:700; color:var(--navy); background:var(--orange); width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.05rem; margin-bottom:20px; position:relative; z-index:2;}
.step h3{margin-bottom:8px; font-size:1rem;}
.step p{font-size:.87rem;}

/* Stats */
.stats{padding:64px 0; background:var(--navy-2); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);}
.stats .grid4{gap:0;}
.stat{text-align:center; padding:0 10px; border-right:1px solid var(--border-soft);}
.stat:last-child{border-right:none;}
.stat .n{font-family:var(--mono); font-size:clamp(1.8rem,3vw,2.6rem); font-weight:700; color:var(--orange);}
.stat .l{font-size:.8rem; color:var(--text-faint); margin-top:6px;}

/* Tracking mock */
.tracking{padding:90px 0;}
.tracking-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.tracking ul{margin-top:22px; display:flex; flex-direction:column; gap:14px;}
.tracking li{display:flex; gap:12px; font-size:.94rem; color:var(--text-dim); align-items:flex-start;}
.tracking li::before{content:"›"; color:var(--orange); font-family:var(--mono); font-weight:700; font-size:1.1rem; line-height:1.3;}
.trackbox{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:24px;}
.trackbox .inputrow{display:flex; gap:10px; margin-bottom:20px;}
.trackbox input{flex:1; background:var(--navy-2); border:1px solid var(--border); border-radius:7px; padding:11px 14px; color:var(--text); font-family:var(--mono); font-size:.85rem;}
.trackbox .btn{white-space:nowrap;}
.tlrow{display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--border-soft); font-family:var(--mono); font-size:.8rem;}
.tlrow:last-child{border-bottom:none;}
.tlrow .dot{width:9px; height:9px; border-radius:50%; margin-top:4px; flex-shrink:0; background:var(--border);}
.tlrow.done .dot{background:var(--orange); box-shadow:0 0 6px var(--orange);}
.tlrow .meta{color:var(--text-faint); font-size:.72rem; margin-top:2px;}
.tlrow .label{color:var(--text);}
.tlrow.done .label{color:var(--text);}
.tlrow:not(.done) .label{color:var(--text-faint);}

/* Testimonial */
.quote{padding:70px 0;}
.quote blockquote{font-family:var(--display); font-weight:500; font-size:clamp(1.15rem,2vw,1.55rem); line-height:1.45; max-width:840px; color:var(--text); border-left:2px solid var(--orange); padding-left:26px;}
.quote cite{display:block; margin-top:20px; font-style:normal; font-size:.85rem; color:var(--text-faint); font-family:var(--mono);}

/* Contact */
.contact{padding:90px 0 110px;}
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px;}
.contact-info .row{display:flex; gap:14px; margin-top:18px; align-items:flex-start;}
.contact-info .row .k{font-family:var(--mono); font-size:.72rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; width:100px; flex-shrink:0; padding-top:2px;}
.contact-info .row .v{font-size:.94rem; color:var(--text);}
.contact-info .row .v a{color:var(--text); border-bottom:1px solid var(--border); transition:color .18s, border-color .18s;}
.contact-info .row .v a:hover{color:var(--orange); border-color:var(--orange);}
form.quoteform{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:30px;}
.field{margin-bottom:18px;}
.field label{display:block; font-family:var(--mono); font-size:.74rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px;}
.field input, .field textarea, .field select{width:100%; background:var(--navy-2); border:1px solid var(--border); border-radius:7px; padding:12px 14px; color:var(--text); font-family:var(--sans); font-size:.94rem; transition:border-color .18s;}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--orange); outline:none;}
.field textarea{resize:vertical; min-height:100px;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form-note{font-size:.78rem; color:var(--text-faint); margin-top:14px;}

/* Footer */
.site-footer{border-top:1px solid var(--border-soft); padding:40px 0;}
.site-footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.site-footer .fbrand{font-family:var(--mono); font-size:.85rem; color:var(--text-faint);}
.site-footer .flinks{display:flex; gap:22px;}
.site-footer .flinks a{font-size:.82rem; color:var(--text-faint);}
.site-footer .flinks a:hover{color:var(--orange);}

/* Reveal */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* Responsive */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .grid4{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr); row-gap:36px;}
  .steps::before{display:none;}
  .tracking-grid{grid-template-columns:1fr; padding:0;}
  .contact-grid{grid-template-columns:1fr;}
  .stat{border-right:none; border-bottom:1px solid var(--border-soft); padding-bottom:20px; margin-bottom:20px;}
  .stat:last-child{border-bottom:none; margin-bottom:0; padding-bottom:0;}
  .stats .grid4{grid-template-columns:1fr 1fr; row-gap:24px;}
}
@media (max-width:700px){
  .navlinks{position:fixed; top:64px; left:0; right:0; background:var(--navy-2); border-bottom:1px solid var(--border-soft); flex-direction:column; padding:18px 28px; gap:16px; transform:translateY(-130%); transition:transform .25s; z-index:40;}
  .navlinks.open{transform:translateY(0);}
  .navtoggle{display:block;}
  .grid4{grid-template-columns:1fr;}
  .stats .grid4{grid-template-columns:1fr 1fr;}
  .row2{grid-template-columns:1fr;}
}