/* ==========================================================================
   TRACE — feuille de style
   Extraite telle quelle du fichier unique livré (TRACE_Full_Website_V23).
   La cascade V2 → V23 est conservée dans son ordre d'origine : c'est ce qui
   garantit un rendu identique. Les ajouts de cette version sont regroupés
   tout en bas, sous « CORRECTIFS ».
   ========================================================================== */

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;background:#061725;color:#f7fbff}a{color:inherit;text-decoration:none}button{font:inherit}
:root{--y:#f2c230;--b:#0c2c46;--p:#0a2237;--line:rgba(255,255,255,.1);--muted:#9db2c1;--green:#74ddb0}
nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:18px 5vw;background:linear-gradient(180deg,rgba(5,20,33,.95),rgba(5,20,33,.55),transparent);backdrop-filter:blur(10px)}
.brand{font-size:27px;font-weight:900;letter-spacing:-.05em}.brand span{color:var(--y)}.links{display:flex;gap:24px;font-size:13px;color:#b7c8d3}.navcta,.cta{background:var(--y);color:#0a1c29;padding:13px 18px;border:none;border-radius:10px;font-weight:800;cursor:pointer}
.hero{min-height:100vh;padding:135px 5vw 70px;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;background:radial-gradient(circle at 10% 20%,rgba(24,91,138,.28),transparent 34%),#061725}.eyebrow{color:var(--y);font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}h1{font-size:clamp(56px,7vw,104px);line-height:.9;letter-spacing:-.065em;margin:18px 0}h1 span{color:#86a5b9}.lead{font-size:19px;line-height:1.65;color:#b4c4cf;max-width:650px}.hero-actions{display:flex;gap:12px;margin-top:28px}.ghost{background:rgba(255,255,255,.05);border:1px solid var(--line);color:white;padding:13px 18px;border-radius:10px;font-weight:750;cursor:pointer}
.hero-card{position:relative;min-height:610px;border-radius:28px;overflow:hidden;background:url('../img/hero-bowl-1400.jpg') center/cover;border:1px solid var(--line);box-shadow:0 35px 80px rgba(0,0,0,.38)}.hero-card:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(3,15,24,.92))}.livepanel{position:absolute;z-index:3;left:22px;right:22px;bottom:22px;background:rgba(7,28,44,.88);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:18px}.livehead{display:flex;justify-content:space-between}.score{color:var(--y);font-size:28px;font-weight:900}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}.mini{background:rgba(255,255,255,.05);padding:10px;border-radius:10px}.mini span{display:block;color:#7897ab;font-size:9px;text-transform:uppercase}.mini b{font-size:11px}.progress{height:7px;background:rgba(255,255,255,.08);border-radius:999px;margin-top:14px;overflow:hidden}.progress i{display:block;width:68%;height:100%;background:var(--y)}
section{padding:110px 5vw}.section-title{font-size:clamp(40px,5vw,72px);letter-spacing:-.055em;line-height:1;margin:14px 0 18px}.section-copy{color:var(--muted);font-size:17px;line-height:1.7;max-width:700px}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:42px}.feature{background:linear-gradient(180deg,#0c2a43,#081d2f);border:1px solid var(--line);border-radius:20px;padding:24px}.feature b{font-size:18px}.feature p{color:#8fa7b7;line-height:1.55;font-size:14px}.num{color:var(--y);font-weight:900;font-size:12px;margin-bottom:35px}
.catalogue{background:#081c2d}.cards{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px;margin-top:42px}.card{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#0a2439;cursor:pointer;transition:.25s}.card:hover{transform:translateY(-5px);border-color:rgba(242,194,48,.35)}.pic{height:240px;background-size:cover;background-position:center;position:relative}.pic.one{background-image:url('../img/hero-bowl-1400.jpg')}.pic.two{background-color:#0b1b27;background-image:url('rpet-clear-food-container.png')}.pic.three{background-color:#0b1b27;background-image:url('custom-printed-paper-cups.png')}.badge{position:absolute;top:14px;left:14px;background:rgba(5,20,33,.88);padding:8px 10px;border-radius:999px;font-size:9px;font-weight:900}.cardbody{padding:20px}.card h3{font-size:23px;margin:0 0 8px}.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}.meta div{background:rgba(255,255,255,.04);padding:10px;border-radius:10px}.meta span{display:block;color:#7290a4;font-size:9px;text-transform:uppercase}.meta b{font-size:11px}
.control{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:center}.timeline{border:1px solid var(--line);border-radius:22px;background:#0a2439;padding:24px}.step{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06)}.step:last-child{border:0}.dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#12372f;color:var(--green);font-weight:900}.step.live .dot{background:var(--y);color:#071827}.step small{color:#7894a7}.status{font-size:9px;font-weight:900;color:#7894a7}.step.live .status{color:var(--y)}
.trust{background:linear-gradient(180deg,#071827,#0b2236)}.trustgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:38px}.trustitem{padding:24px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.025)}.trustitem h4{margin:18px 0 8px;font-size:17px}.trustitem p{color:#8ca5b7;font-size:13px;line-height:1.5}.ico{font-size:25px;color:var(--y)}
.commit{text-align:center;padding-bottom:130px}.commit .section-copy{margin:auto}footer{border-top:1px solid var(--line);padding:30px 5vw;color:#6f899b;display:flex;justify-content:space-between}
.drawerbg{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);opacity:0;pointer-events:none;z-index:50;transition:.25s}.drawer{position:fixed;right:0;top:0;height:100vh;width:min(520px,94vw);background:#071d2e;z-index:51;transform:translateX(100%);transition:.3s;padding:26px;overflow:auto}.drawer.open{transform:translateX(0)}.drawerbg.open{opacity:1;pointer-events:auto}.close{float:right;width:38px;height:38px;border-radius:50%;background:#102b40;color:white;border:1px solid var(--line);font-size:22px}.drawer h3{font-size:29px}.drawerbox{background:#0b2a42;border:1px solid var(--line);border-radius:16px;padding:18px;margin:18px 0}.drawerrow{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}.drawerrow:last-child{border:0}.yellow{color:var(--y)}
@media(max-width:900px){.links{display:none}.hero,.control{grid-template-columns:1fr}.features,.cards{grid-template-columns:1fr}.hero-card{min-height:500px}.trustgrid{grid-template-columns:1fr 1fr}}@media(max-width:560px){h1{font-size:54px}section{padding:80px 20px}nav{padding:16px 20px}.hero{padding:120px 20px 60px}.grid4{grid-template-columns:1fr 1fr}.trustgrid{grid-template-columns:1fr}.hero-actions{flex-direction:column}}

/* V2 — credibility, partners, live container */
.metrics-strip{padding:34px 5vw;background:#0a2237;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.metrics-grid{max-width:1240px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.metric{padding:22px 18px;border-right:1px solid rgba(255,255,255,.08)}
.metric:last-child{border-right:0}.metric strong{display:block;font-size:42px;letter-spacing:-.05em;color:#fff}.metric span{color:#809bae;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.metric em{display:block;color:var(--y);font-size:10px;font-style:normal;margin-top:7px}

.partners{background:#061725}.partner-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:36px}
.partner-card{min-height:145px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));padding:20px;display:flex;flex-direction:column;justify-content:space-between}
.partner-type{font-size:9px;color:var(--y);font-weight:900;letter-spacing:.12em;text-transform:uppercase}.partner-mark{font-size:19px;font-weight:900;letter-spacing:-.03em}.partner-card p{font-size:12px;color:#8098a9;line-height:1.45;margin:5px 0 0}
.partner-note{margin-top:18px;font-size:11px;color:#658297}

.live-container{background:radial-gradient(circle at 72% 45%,rgba(15,84,129,.24),transparent 34%),#081c2d}
.container-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:28px;margin-top:40px;align-items:stretch}
.ship-card{border:1px solid var(--line);border-radius:22px;background:#0a253b;padding:24px}
.ship-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.ship-label{font-size:10px;color:#7794a8;text-transform:uppercase;font-weight:850;letter-spacing:.1em}.ship-name{font-size:24px;font-weight:850;margin-top:5px}.live-pill{font-size:9px;font-weight:900;background:rgba(116,221,176,.09);border:1px solid rgba(116,221,176,.22);color:var(--green);padding:8px 10px;border-radius:999px}
.ship-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:20px 0}.ship-kpi{padding:14px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.025)}.ship-kpi span{display:block;color:#6f8da1;font-size:9px;text-transform:uppercase}.ship-kpi b{font-size:13px}
.route-progress{margin:22px 0 10px}.route-bar{height:8px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}.route-bar i{display:block;width:39%;height:100%;background:linear-gradient(90deg,var(--y),#ffe27d)}.route-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:9px;color:#708ca0}
.event{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:start;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}.event:last-child{border:0}.event-dot{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#14382f;color:var(--green);font-size:10px;font-weight:900}.event.current .event-dot{background:var(--y);color:#071827}.event b{font-size:11px}.event small{display:block;color:#738fa2;font-size:9px;margin-top:3px}.event time{font-size:9px;color:#6d8799}
.map-card{position:relative;min-height:520px;border:1px solid var(--line);border-radius:22px;background:
 radial-gradient(circle at 25% 35%,rgba(30,103,151,.20),transparent 22%),
 radial-gradient(circle at 72% 55%,rgba(30,103,151,.15),transparent 24%),
 linear-gradient(180deg,#0b2b43,#071c2c);overflow:hidden}
.map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:38px 38px}
.route-svg{position:absolute;inset:10% 6%;width:88%;height:76%}.sea-label{position:absolute;font-size:9px;color:#4e738d;letter-spacing:.14em}.sl1{left:42%;top:21%}.sl2{left:31%;top:59%}.sl3{right:14%;top:63%}
.port{position:absolute;z-index:4}.port i{display:block;width:13px;height:13px;background:var(--y);border-radius:50%;box-shadow:0 0 0 7px rgba(242,194,48,.12)}.port strong{display:block;margin-top:10px;font-size:11px}.port span{font-size:9px;color:#7692a5}.shanghai{right:12%;top:30%}.singapore{right:39%;top:58%}.suez{left:34%;top:46%}.marseille{left:10%;top:28%}
.vessel{position:absolute;z-index:5}.vessel-label{left:20px;top:20px;transform:none;background:rgba(7,26,41,.9);color:#dce7ed;padding:8px 10px;border:1px solid rgba(255,255,255,.1);border-radius:10px;font-size:9px;font-weight:900;box-shadow:none;letter-spacing:.04em}
.map-status{position:absolute;right:18px;bottom:18px;background:rgba(7,26,41,.88);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px;min-width:180px}.map-status span{display:block;font-size:8px;color:#7894a7;text-transform:uppercase}.map-status b{font-size:13px}
@media(max-width:900px){.metrics-grid,.partner-grid{grid-template-columns:1fr 1fr}.container-layout{grid-template-columns:1fr}.map-card{min-height:440px}}
@media(max-width:560px){.metrics-grid,.partner-grid{grid-template-columns:1fr}.metric{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}.metric:last-child{border-bottom:0}.map-card{min-height:380px}.port strong{font-size:9px}.port span{display:none}}


/* V3 — transaction security, clients, motion, full catalogue */
.security{background:#061725}
.security-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;margin-top:42px;align-items:start}
.security-stack{display:grid;gap:12px}
.sec-card{border:1px solid var(--line);background:linear-gradient(180deg,#0b2941,#081d2f);border-radius:18px;padding:20px;position:relative;overflow:hidden}
.sec-card:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--y);opacity:.85}
.sec-card .sec-no{font-size:9px;color:var(--y);font-weight:900;letter-spacing:.12em}.sec-card h4{margin:10px 0 7px;font-size:18px}.sec-card p{margin:0;color:#849daf;line-height:1.5;font-size:13px}
.contract-panel{border:1px solid var(--line);border-radius:22px;background:#0a2439;padding:24px;box-shadow:0 30px 70px rgba(0,0,0,.18)}
.contract-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.07)}
.contract-head h3{margin:4px 0 0;font-size:22px}.protected{background:rgba(116,221,176,.08);border:1px solid rgba(116,221,176,.2);color:var(--green);padding:8px 10px;border-radius:999px;font-size:9px;font-weight:900}
.contract-line{display:grid;grid-template-columns:35px 1fr auto;gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.contract-line:last-child{border:0}.contract-icon{width:30px;height:30px;border-radius:9px;background:#11354f;display:grid;place-items:center;color:var(--y);font-weight:900}.contract-line b{font-size:12px}.contract-line small{display:block;color:#718ca0;font-size:9px;margin-top:3px}.contract-state{font-size:9px;font-weight:900;color:var(--green)}
.money-flow{display:grid;grid-template-columns:1fr 55px 1fr 55px 1fr;gap:8px;align-items:center;margin-top:20px}.money-box{padding:14px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);text-align:center}.money-box span{display:block;color:#7590a4;font-size:8px;text-transform:uppercase}.money-box b{font-size:11px}.money-arrow{text-align:center;color:var(--y);font-weight:900}
.legal-note{margin-top:14px;color:#698499;font-size:9px;line-height:1.5}

.clients{background:#081c2d}.clientwall{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:34px}.clientlogo{height:92px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025);display:grid;place-items:center;text-align:center;padding:12px;transition:.2s}.clientlogo:hover{background:rgba(255,255,255,.05);transform:translateY(-2px)}.clientlogo b{font-size:13px;letter-spacing:.04em;color:#dce7ed}.clientlogo small{display:block;color:#678397;font-size:8px;margin-top:5px}.client-caption{margin-top:15px;color:#668397;font-size:10px}

.catalogue-more{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:26px;padding:18px 0 0}.catalogue-more p{color:#7893a6;font-size:12px;margin:0}
.catalogue-link{white-space:nowrap}

.vessel-moving{filter:drop-shadow(0 8px 12px rgba(0,0,0,.38))}

.map-card:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.025),transparent 20%);animation:seaPulse 6s ease-in-out infinite alternate}
@keyframes seaPulse{from{opacity:.25;transform:scale(1)}to{opacity:.75;transform:scale(1.05)}}

.card{transform-style:preserve-3d}.card:hover .pic{transform:scale(1.025)}.pic{transition:transform .35s ease}
.metric strong{animation:metricGlow 5s ease-in-out infinite alternate}@keyframes metricGlow{from{text-shadow:none}to{text-shadow:0 0 24px rgba(242,194,48,.16)}}

@media(max-width:900px){.security-layout{grid-template-columns:1fr}.clientwall{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.clientwall{grid-template-columns:repeat(2,1fr)}.money-flow{grid-template-columns:1fr}.money-arrow{transform:rotate(90deg)}}


/* V4 — custom packaging + Marseille/Shenzhen offices */
.custom-pack{background:#081c2d}
.custom-layout{display:grid;grid-template-columns:.92fr 1.08fr;gap:28px;margin-top:38px;align-items:center}
.pack-mock{min-height:480px;border:1px solid var(--line);border-radius:24px;background:radial-gradient(circle at 50% 40%,rgba(242,194,48,.16),transparent 28%),linear-gradient(145deg,#0c304b,#071b2c);position:relative;overflow:hidden;display:grid;place-items:center}
.pack-box{width:260px;height:180px;background:#d7b66a;color:#102434;transform:rotate(-5deg) skewY(2deg);box-shadow:0 35px 65px rgba(0,0,0,.32);display:grid;place-items:center;position:relative;border-radius:4px}.pack-box:before{content:'';position:absolute;top:-52px;left:28px;width:260px;height:52px;background:#ead08c;transform:skewX(-45deg);transform-origin:bottom left}.pack-box:after{content:'YOUR BRAND';font-size:11px;font-weight:900;letter-spacing:.18em}.pack-logo{position:absolute;font-size:36px;font-weight:950;letter-spacing:-.06em}.pack-logo span{color:#315f48}.pack-chip{position:absolute;padding:9px 11px;background:rgba(6,23,37,.88);border:1px solid var(--line);border-radius:999px;font-size:9px;font-weight:850}.pc1{left:18px;top:20px}.pc2{right:18px;top:90px}.pc3{left:28px;bottom:28px}
.pack-list{display:grid;gap:10px;margin-top:25px}.pack-item{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start}.pack-item i{width:30px;height:30px;border-radius:9px;background:#12334c;display:grid;place-items:center;color:var(--y);font-style:normal;font-weight:900}.pack-item b{font-size:13px}.pack-item small{display:block;color:#7893a6;line-height:1.4;margin-top:3px}

.offices{background:#061725}.office-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:38px}.office{border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,#0b2941,#081d2f);min-height:330px;padding:28px;position:relative;overflow:hidden}.office:after{content:'';position:absolute;width:260px;height:260px;border:1px solid rgba(255,255,255,.06);border-radius:50%;right:-80px;bottom:-100px}.office-city{font-size:48px;font-weight:900;letter-spacing:-.055em;margin:12px 0 4px}.office-country{color:var(--y);font-size:10px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.office p{color:#8da5b5;max-width:430px;line-height:1.55;font-size:13px}.office-role{position:absolute;left:28px;bottom:28px;display:flex;gap:7px;flex-wrap:wrap}.office-role span{padding:7px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.08);font-size:8px;color:#8fa8b8}.bridge{margin-top:16px;border:1px solid rgba(242,194,48,.18);border-radius:16px;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:20px;background:rgba(242,194,48,.035)}.bridge b{font-size:14px}.bridge span{color:#809bad;font-size:11px}
@media(max-width:900px){.custom-layout,.office-grid{grid-template-columns:1fr}}@media(max-width:560px){.pack-mock{min-height:390px}.pack-box{width:210px;height:150px}.office-city{font-size:39px}}


/* V5 — group sourcing capacity */
.capacity{background:linear-gradient(180deg,#061725,#091f32);position:relative;overflow:hidden}
.capacity:before{content:'';position:absolute;width:520px;height:520px;border:1px solid rgba(242,194,48,.07);border-radius:50%;right:-170px;top:-190px}
.capacity-grid{display:grid;grid-template-columns:1.25fr repeat(3,1fr);gap:12px;margin-top:38px}
.cap-main,.cap{border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.025);padding:24px;min-height:190px;position:relative;overflow:hidden}
.cap-main{background:linear-gradient(145deg,#0d304b,#092137)}
.cap-value{font-size:52px;font-weight:950;letter-spacing:-.06em;line-height:.95}.cap-main .cap-value{font-size:66px;color:var(--y)}
.cap-label{margin-top:13px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.cap p,.cap-main p{color:#7691a4;font-size:11px;line-height:1.5;margin:9px 0 0}
.cap-tag{position:absolute;right:15px;top:15px;font-size:8px;color:#6f8da0;border:1px solid rgba(255,255,255,.08);padding:6px 8px;border-radius:999px}
.capacity-flow{margin-top:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.flow-cell{padding:13px;border-radius:12px;background:#0b2940;border:1px solid rgba(255,255,255,.06)}.flow-cell span{display:block;color:#668397;font-size:8px;text-transform:uppercase}.flow-cell b{font-size:10px}
.scale-note{margin-top:18px;color:#6f8b9e;font-size:10px;line-height:1.5}
@media(max-width:900px){.capacity-grid{grid-template-columns:1fr 1fr}.cap-main{grid-column:1/-1}}@media(max-width:560px){.capacity-grid,.capacity-flow{grid-template-columns:1fr}.cap-main{grid-column:auto}}


/* V7 — responsible sourcing / EUDR / FSC / recycled plastics / ESG */
.responsible{background:#071a2a}
.resp-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;margin-top:38px;align-items:start}
.resp-intro{position:sticky;top:100px}
.resp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.resp-card{border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#0b2941,#081d2f);padding:20px;min-height:190px;position:relative;overflow:hidden}
.resp-card:after{content:'';position:absolute;width:130px;height:130px;border:1px solid rgba(255,255,255,.045);border-radius:50%;right:-45px;bottom:-55px}
.resp-kicker{font-size:9px;color:var(--y);font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.resp-card h4{font-size:18px;margin:10px 0 8px}.resp-card p{font-size:12px;line-height:1.5;color:#809bad;margin:0}
.resp-tagrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:15px}.resp-tag{padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);font-size:8px;color:#8ea8b9}
.factory-esg{margin-top:14px;border:1px solid var(--line);border-radius:20px;background:#0a2439;padding:22px}
.esg-head{display:flex;justify-content:space-between;gap:18px;align-items:start}.esg-score{font-size:42px;font-weight:950;color:var(--y);letter-spacing:-.05em}.esg-score small{font-size:10px;color:#7794a8;display:block;letter-spacing:.08em;text-transform:uppercase}
.esg-bars{display:grid;gap:11px;margin-top:20px}.esg-row{display:grid;grid-template-columns:140px 1fr 42px;gap:10px;align-items:center}.esg-row span{font-size:10px;color:#8ba3b4}.esg-track{height:7px;background:rgba(255,255,255,.07);border-radius:999px;overflow:hidden}.esg-track i{display:block;height:100%;background:linear-gradient(90deg,#6ccda5,var(--y));border-radius:999px}.esg-row b{font-size:10px;text-align:right}
.carbon-box{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:18px}.carbon-metric{padding:12px;border:1px solid rgba(255,255,255,.06);border-radius:11px;background:rgba(255,255,255,.025)}.carbon-metric span{display:block;font-size:8px;color:#6e899b;text-transform:uppercase}.carbon-metric b{font-size:12px}
.compliance-flow{margin-top:14px;padding:16px;border-radius:14px;border:1px solid rgba(242,194,48,.15);background:rgba(242,194,48,.025);display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.cf{font-size:9px;color:#809bad;text-align:center}.cf b{display:block;color:#e7f0f4;margin-bottom:5px}
@media(max-width:900px){.resp-layout{grid-template-columns:1fr}.resp-intro{position:static}.resp-grid{grid-template-columns:1fr}.compliance-flow{grid-template-columns:1fr 1fr}.carbon-box{grid-template-columns:1fr}}
@media(max-width:560px){.esg-row{grid-template-columns:105px 1fr 36px}.compliance-flow{grid-template-columns:1fr}}


.lang-switch{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(6,23,37,.65)}
.lang-switch button{border:0;background:transparent;color:#7894a7;font-size:10px;font-weight:900;padding:7px 8px;border-radius:7px;cursor:pointer}
.lang-switch button.active{background:#f2c230;color:#071827}

/* V10 capacity alignment */
.capacity-head{max-width:780px;margin:0}
.capacity-head .section-title,.capacity-head .section-copy{text-align:left;margin-left:0}
.capacity-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:38px;align-items:stretch}
.capacity-kpi{min-height:238px;padding:22px 20px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#0b2941,#081d2f);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}
.capacity-kpi.hero-kpi{background:linear-gradient(145deg,#123852,#092136);border-color:rgba(242,194,48,.25)}
.cap-over{font-size:8px;font-weight:900;letter-spacing:.13em;color:#7592a5;margin-bottom:30px}
.capacity-kpi strong{font-size:43px;line-height:1;font-weight:950;letter-spacing:-.055em;white-space:nowrap}
.capacity-kpi.hero-kpi strong{color:var(--y)}
.capacity-kpi b{font-size:11px;text-transform:uppercase;letter-spacing:.04em;margin-top:9px;min-height:28px}
.capacity-kpi p{font-size:10px;line-height:1.5;color:#7894a7;margin:14px 0 0}
.capacity-chain{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:15px 18px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(255,255,255,.02)}
.capacity-chain span{font-size:8px;font-weight:900;letter-spacing:.08em;color:#9ab0be;text-align:center}.capacity-chain i{font-style:normal;color:var(--y)}
@media(max-width:1100px){.capacity-kpis{grid-template-columns:repeat(3,1fr)}}@media(max-width:720px){.capacity-kpis{grid-template-columns:1fr 1fr}.capacity-chain{flex-wrap:wrap}}@media(max-width:480px){.capacity-kpis{grid-template-columns:1fr}}


.nav-more{position:relative}
.nav-more>button{background:transparent;border:0;color:#8da5b5;font-size:11px;font-weight:800;cursor:pointer;padding:9px 8px}
.nav-more-menu{display:none;position:absolute;right:0;top:36px;min-width:210px;padding:8px;background:#081d2f;border:1px solid rgba(255,255,255,.1);border-radius:12px;box-shadow:0 18px 45px rgba(0,0,0,.3);z-index:50}
.nav-more:hover .nav-more-menu{display:grid}
.nav-more-menu a{padding:9px 10px!important;border-radius:8px;color:#8da5b5!important}
.nav-more-menu a:hover{background:rgba(255,255,255,.04);color:#fff!important}
@media(max-width:980px){.nav-more{display:none}}


/* V13 — fluid icons for end-to-end platform */
.flow-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;background:linear-gradient(145deg,rgba(242,194,48,.13),rgba(36,104,146,.12));border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}
.flow-icon svg{width:22px;height:22px;fill:none;stroke:#f2c230;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;transition:transform .28s ease}
.flow-icon:after{content:'';position:absolute;width:22px;height:60px;background:rgba(255,255,255,.08);transform:rotate(35deg);left:-30px;top:-12px;transition:left .45s ease}
.platform-card:hover .flow-icon svg,.step:hover .flow-icon svg{transform:translateY(-2px) scale(1.05)}
.platform-card:hover .flow-icon:after,.step:hover .flow-icon:after{left:54px}


/* V14 — real-life custom product photography */
.custom-layout-v14{grid-template-columns:.72fr 1.28fr;align-items:start}
.custom-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.custom-photo-grid figure{margin:0;position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08);min-height:220px;background:#0a2236}
.custom-photo-grid img{width:100%;height:100%;min-height:220px;object-fit:cover;display:block;transition:transform .45s ease}
.custom-photo-grid figure:hover img{transform:scale(1.025)}
.custom-photo-grid figcaption{position:absolute;left:10px;bottom:10px;padding:9px 11px;border-radius:10px;background:rgba(6,23,37,.86);backdrop-filter:blur(9px);border:1px solid rgba(255,255,255,.09);display:grid;gap:2px}
.custom-photo-grid figcaption b{font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.custom-photo-grid figcaption span{font-size:8px;color:#9ab0be}
.compact-pack-list .pack-item{grid-template-columns:30px 1fr}
@media(max-width:1050px){.custom-layout-v14{grid-template-columns:1fr}.custom-photo-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.custom-photo-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.custom-photo-grid{grid-template-columns:1fr}}


/* V16 — transaction security consolidated into the core workflow */
.feature:nth-child(4){border-color:rgba(242,194,48,.22);background:linear-gradient(180deg,rgba(242,194,48,.045),rgba(255,255,255,.02))}
.feature:nth-child(4) .num{color:#f2c230}


/* V17 — custom food packaging simplification */
.custom-actions{margin-top:28px}
.custom-catalogue-cta{display:inline-flex!important;flex-direction:column;align-items:flex-start!important;gap:3px;padding:15px 18px!important;border-radius:13px!important;min-width:290px}
.custom-catalogue-cta span{font-size:11px;font-weight:950;letter-spacing:.02em}
.custom-catalogue-cta b{font-size:8px;font-weight:800;opacity:.72;letter-spacing:.04em;text-transform:uppercase}


/* V18 — exact scale figures, no portfolio banner */
.capacity-kpis-six{grid-template-columns:repeat(3,1fr)!important;gap:0!important;border:1px solid rgba(255,255,255,.09);border-radius:2px;overflow:hidden}
.capacity-kpis-six .capacity-kpi{border:0!important;border-right:1px solid rgba(255,255,255,.09)!important;border-bottom:1px solid rgba(255,255,255,.09)!important;border-radius:0!important;min-height:190px;background:rgba(255,255,255,.018)!important}
.capacity-kpis-six .capacity-kpi:nth-child(3n){border-right:0!important}
.capacity-kpis-six .capacity-kpi:nth-child(n+4){border-bottom:0!important}
.capacity-kpis-six .capacity-kpi strong{font-size:42px}
.capacity-kpis-six .hero-kpi strong{color:#f2c230}
.capacity-confidential{margin-top:18px;display:flex;align-items:center;gap:14px;border-left:3px solid #f2c230;padding-left:14px}
.capacity-confidential b{font-size:14px}.capacity-confidential span{font-size:8px;letter-spacing:.16em;color:#738ea1}.capacity-confidential small{margin-left:auto;font-size:7px;letter-spacing:.12em;color:#526d7f}
@media(max-width:760px){.capacity-kpis-six{grid-template-columns:1fr 1fr!important}.capacity-kpis-six .capacity-kpi{border-right:1px solid rgba(255,255,255,.09)!important;border-bottom:1px solid rgba(255,255,255,.09)!important}.capacity-confidential{flex-wrap:wrap}.capacity-confidential small{margin-left:0;width:100%}}
@media(max-width:480px){.capacity-kpis-six{grid-template-columns:1fr!important}}


/* V19 — visible fluid icons in One application · End to end */
.e2e-icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:17px;background:linear-gradient(145deg,rgba(242,194,48,.14),rgba(21,72,105,.15));border:1px solid rgba(242,194,48,.16);position:relative;overflow:hidden}
.e2e-icon svg{width:22px;height:22px;fill:none;stroke:#f2c230;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;animation:e2eFloat 3.6s ease-in-out infinite}
.feature:nth-child(2) .e2e-icon svg{animation-delay:.25s}.feature:nth-child(3) .e2e-icon svg{animation-delay:.5s}.feature:nth-child(4) .e2e-icon svg{animation-delay:.75s}.feature:nth-child(5) .e2e-icon svg{animation-delay:1s}.feature:nth-child(6) .e2e-icon svg{animation-delay:1.25s}
.e2e-icon:after{content:'';position:absolute;inset:-30%;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.11) 50%,transparent 65%);transform:translateX(-70%);animation:e2eShine 5s ease-in-out infinite}
@keyframes e2eFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@keyframes e2eShine{0%,65%{transform:translateX(-70%)}85%,100%{transform:translateX(70%)}}


/* V20 — GLOBAL VERTICAL RHYTHM / SPACING AUDIT */
:root{
  --section-y:88px;
  --section-y-tight:68px;
  --section-y-mobile:58px;
}

/* Normalize every major homepage section */
body > section,
main > section,
section.capacity,
section.responsible,
section.custom-pack,
section.offices,
section.clients,
section.security{
  padding-top:var(--section-y)!important;
  padding-bottom:var(--section-y)!important;
  margin-top:0!important;
  margin-bottom:0!important;
}

/* Sections that visually continue the previous story can be slightly tighter */
#platform,
#capacity,
#responsible-sourcing,
#catalogue,
#custom-packaging,
#live,
#offices,
#clients,
#trust,
#commitments{
  scroll-margin-top:92px;
}

/* Consistent heading rhythm */
section > .eyebrow,
section > div > .eyebrow,
.capacity-head > .eyebrow,
.resp-intro > .eyebrow{
  margin-bottom:14px!important;
}
.section-title{
  margin-top:0!important;
  margin-bottom:18px!important;
  line-height:1.03!important;
}
.section-copy{
  margin-top:0!important;
  margin-bottom:0!important;
  line-height:1.62!important;
}

/* Consistent gap from intros to content */
.features,
.capacity-kpis,
.partner-grid,
.resp-layout,
.catalogue-grid,
.custom-layout,
.tracking-layout,
.office-grid,
.client-grid,
.trustgrid,
.commit-grid{
  margin-top:38px!important;
}

/* Avoid accidental double gaps from nested sections/components */
.capacity-head + .capacity-kpis{margin-top:38px!important}
.resp-layout{align-items:start}
.custom-layout{align-items:start}
.capacity-confidential{margin-top:18px!important}
.capacity-chain{margin-top:14px!important}

/* Create subtle section boundaries instead of relying on giant whitespace */
#capacity,
#responsible-sourcing,
#custom-packaging,
#live,
#offices{
  border-top:1px solid rgba(255,255,255,.045);
}

/* Hero gets its own intentional breathing room */
.hero{
  padding-top:118px!important;
  padding-bottom:82px!important;
}

/* Prevent headings/cards from leaving isolated empty zones */
.features > *,
.capacity-kpis > *,
.resp-grid > *,
.custom-photo-grid > *,
.office-grid > *{
  margin-top:0!important;
  margin-bottom:0!important;
}

/* Footer / final commitment should not create a dead zone */
#commitments{
  padding-bottom:70px!important;
}

/* Tablet */
@media(max-width:900px){
  :root{--section-y:70px}
  .hero{padding-top:100px!important;padding-bottom:68px!important}
  .features,.capacity-kpis,.partner-grid,.resp-layout,.catalogue-grid,.custom-layout,.tracking-layout,.office-grid,.client-grid,.trustgrid,.commit-grid{margin-top:30px!important}
}

/* Mobile */
@media(max-width:600px){
  :root{--section-y:var(--section-y-mobile)}
  .hero{padding-top:88px!important;padding-bottom:56px!important}
  .section-title{margin-bottom:14px!important}
  .features,.capacity-kpis,.partner-grid,.resp-layout,.catalogue-grid,.custom-layout,.tracking-layout,.office-grid,.client-grid,.trustgrid,.commit-grid{margin-top:24px!important}
}

/* V22 — container tracking animation */
.container-ship{filter:drop-shadow(0 7px 9px rgba(0,0,0,.38))}
#routeFuture{transition:none}


/* V23 — tracking left panel: 4 key entries only */
.tracking-events > *:nth-child(n+5),
.ship-events > *:nth-child(n+5),
.event-list > *:nth-child(n+5){display:none!important}
.event.sleeping,.timeline-item.sleeping{opacity:.34;filter:saturate(.2)}

/* ==========================================================================
   CORRECTIFS — seuls ajouts à la feuille d'origine
   ========================================================================== */



/* --- Section contact --------------------------------------------------------
   Le site n'offrait aucun moyen de joindre TRACE depuis la page d'accueil. */
.contact-band { background: linear-gradient(180deg, #071827, #0b2236); }
.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 38px; }
.contact-card {
  display: block; padding: 22px; border: 1px solid var(--line); border-radius: 18px;
  background: rgba(255,255,255,.025); color: inherit; text-decoration: none; transition: .2s;
}
a.contact-card:hover { border-color: rgba(242,194,48,.35); background: rgba(255,255,255,.05); }
.contact-card span { display: block; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--y); }
.contact-card b { display: block; margin: 10px 0 8px; font-size: 16px; word-break: break-word; }
.contact-card small { display: block; color: #93aabb; font-size: 12px; line-height: 1.5; }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: flex-end; }
.footer-links a { min-height: 44px; display: inline-flex; align-items: center; }
.footer-links a:hover { color: var(--y); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .contact-grid { grid-template-columns: 1fr; } .footer-links { justify-content: flex-start; } }

/* --- Formulaire de contact (envoi vers achats@papafrance.fr via mailto) --- */
.contact-form { max-width: 640px; margin-top: 30px; display: grid; gap: 14px; }
.contact-form .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form label { display: grid; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.contact-form input, .contact-form textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); color: #f5fbff; font: inherit; font-weight: 400; letter-spacing: normal; text-transform: none; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: rgba(242,194,48,.55); }
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form button.cta { margin-top: 4px; }
.cf-note { color: #93aabb; font-size: 12px; }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cf-status { margin-top: 12px; font-size: 13px; font-weight: 700; }
.cf-ok { color: #7fd9a8; }
.cf-err { color: #ff9b9b; }
@media (max-width: 560px) { .contact-form .cf-row { grid-template-columns: 1fr; } }

/* Coordonnees d'un bureau (adresse + telephone), sous la carte office. */
.office-contact { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 13px; line-height: 1.55; color: #9db2c1; }
.office-contact a { color: var(--y); font-weight: 700; text-decoration: none; }
.office-contact a:hover { text-decoration: underline; }

/* Selecteur de langue : la langue courante est un bouton inerte, les autres
   sont de vrais liens vers la meme page ailleurs. */
.lang-switch a {
  display: inline-flex; align-items: center; justify-content: center;
  color: #7894a7; font-size: 10px; font-weight: 900; padding: 7px 8px;
  border-radius: 7px; text-decoration: none; background: transparent;
}
.lang-switch a:hover { color: #f2c230; }
.lang-switch button { cursor: default; }

/* --- Contrastes -------------------------------------------------------------
   Cinq libelles de 9-10 px tombaient entre 3,43 et 4,44, pour un seuil WCAG AA
   de 4,5 (mesure en recomposant les voiles rgba, pas la seule couleur de fond
   la plus proche). Seule la couleur change : ni taille, ni graisse, ni mise en page. */
.ship-kpi span                { color: #93aabb; }   /* etait #6f8da1 — 4,20 */
.legal-note                   { color: #93aabb; }   /* etait #698499 — 4,05 */
.client-caption               { color: #93aabb; }   /* etait #668397 — 4,33 */
.route-labels span            { color: #93aabb; }   /* etait #708ca0 — 4,44 */
.sea-label                    { color: #7f9db4; }   /* etait #4e738d — 3,43 */
/* .mini span (4,98) et .capacity-kpi p (5,45) passaient deja : laisses tels quels. */
.carbon-metric span,
.money-box span,
.flow-cell span,
.map-status span,
.event small,
.event time,
.cap-tag,
.scale-note,
.partner-note                 { color: #93aabb; }

/* Fond du hero et de la premiere vignette en WebP quand le navigateur sait le lire.
   La regle raccourcie plus haut garde center/cover et le JPEG en repli. */
.hero-card, .pic.one {
  background-image: -webkit-image-set(url('../img/hero-bowl-1400.avif') type('image/avif'), url('../img/hero-bowl-1400.webp') type('image/webp'), url('../img/hero-bowl-1400.jpg') type('image/jpeg'));
  background-image: image-set(url('../img/hero-bowl-1400.avif') type('image/avif'), url('../img/hero-bowl-1400.webp') type('image/webp'), url('../img/hero-bowl-1400.jpg') type('image/jpeg'));
}

/* Un telephone n'a pas besoin d'une image de 1400 px : on sert la version 800. */
@media (max-width: 700px) {
  .hero-card, .pic.one {
    background-image: -webkit-image-set(url('../img/hero-bowl-800.avif') type('image/avif'), url('../img/hero-bowl-800.webp') type('image/webp'), url('../img/hero-bowl-800.jpg') type('image/jpeg'));
    background-image: image-set(url('../img/hero-bowl-800.avif') type('image/avif'), url('../img/hero-bowl-800.webp') type('image/webp'), url('../img/hero-bowl-800.jpg') type('image/jpeg'));
  }
}

/* Les deux autres vignettes du catalogue. Le prototype les laissait en
   degrade : ce n'etait pas une intention graphique mais une place en attente,
   et elles se lisaient comme une image qui n'a pas charge. La couleur reste
   dessous, le temps que la photo arrive. */
.pic.two {
  background-color: #0b1b27;
  /* La regle d'origine .pic.two{background: <degrade>} utilise la forme
     raccourcie, qui reinitialise taille et position. Sans consequence pour
     un degrade, qui remplit la boite ; mais une photo s'affichait alors a
     sa taille reelle, calee en haut a gauche. On les repose. */
  background-size: cover;
  background-position: center;
  background-image: -webkit-image-set(url('../img/card-rpet-container-1200.avif') type('image/avif'), url('../img/card-rpet-container-1200.webp') type('image/webp'), url('../img/card-rpet-container-1200.jpg') type('image/jpeg'));
  background-image: image-set(url('../img/card-rpet-container-1200.avif') type('image/avif'), url('../img/card-rpet-container-1200.webp') type('image/webp'), url('../img/card-rpet-container-1200.jpg') type('image/jpeg'));
}
.pic.three {
  background-color: #0b1b27;
  /* La regle d'origine .pic.three{background: <degrade>} utilise la forme
     raccourcie, qui reinitialise taille et position. Sans consequence pour
     un degrade, qui remplit la boite ; mais une photo s'affichait alors a
     sa taille reelle, calee en haut a gauche. On les repose. */
  background-size: cover;
  background-position: center;
  background-image: -webkit-image-set(url('../img/card-printed-cup-1200.avif') type('image/avif'), url('../img/card-printed-cup-1200.webp') type('image/webp'), url('../img/card-printed-cup-1200.jpg') type('image/jpeg'));
  background-image: image-set(url('../img/card-printed-cup-1200.avif') type('image/avif'), url('../img/card-printed-cup-1200.webp') type('image/webp'), url('../img/card-printed-cup-1200.jpg') type('image/jpeg'));
}

@media (max-width: 700px) {
  .pic.two {
    background-image: -webkit-image-set(url('../img/card-rpet-container-800.avif') type('image/avif'), url('../img/card-rpet-container-800.webp') type('image/webp'), url('../img/card-rpet-container-800.jpg') type('image/jpeg'));
    background-image: image-set(url('../img/card-rpet-container-800.avif') type('image/avif'), url('../img/card-rpet-container-800.webp') type('image/webp'), url('../img/card-rpet-container-800.jpg') type('image/jpeg'));
  }
  .pic.three {
    background-image: -webkit-image-set(url('../img/card-printed-cup-800.avif') type('image/avif'), url('../img/card-printed-cup-800.webp') type('image/webp'), url('../img/card-printed-cup-800.jpg') type('image/jpeg'));
    background-image: image-set(url('../img/card-printed-cup-800.avif') type('image/avif'), url('../img/card-printed-cup-800.webp') type('image/webp'), url('../img/card-printed-cup-800.jpg') type('image/jpeg'));
  }
}

/* Sous 980 px, le selecteur de langue quittait la barre. Avec quatre
   entrees a 44 px de cible tactile il occupait 156 px sur un ecran de 375,
   et poussait le bouton menu hors de l'ecran : plus de navigation du tout.
   Il descend dans le menu, ou la place ne manque pas. */
@media (max-width: 980px) {
  nav > .lang-switch { display: none; }
  /* Le bouton d'appel passait sur trois lignes et gonflait la barre. */
  .navcta { white-space: nowrap; font-size: 12px; padding: 11px 13px; }
}

/* Chiffres a largeur constante : sans cela les chiffres dansent pendant le
   comptage, chaque glyphe n'ayant pas la meme chasse. */
.capacity-kpi strong { font-variant-numeric: tabular-nums; }

/* Plan de chargement. Le conteneur plein est dans le HTML : l'animation ne
   fait que le vider pour le remplir. Sans script, on voit un conteneur
   charge, ce qui reste juste. */
.plan {
  margin: 34px 0 0; padding: 22px 22px 18px; border: 1px solid var(--line);
  border-radius: 18px; background: linear-gradient(180deg, #0b2941, #081d2f);
}
.plan-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 22px; }
.plan-tete h3 { font-size: 26px; letter-spacing: -.03em; margin: 8px 0 6px; }
.plan-note { color: #9bb0bd; font-size: 13px; line-height: 1.5; max-width: 44ch; margin: 0; }
.plan-taux { text-align: right; flex: none; }
.plan-taux b {
  display: block; font-size: 40px; line-height: 1; font-weight: 950;
  letter-spacing: -.055em; color: var(--y); font-variant-numeric: tabular-nums;
}
.plan-taux span { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #7893a6; }

/* Vue de dessus : douze emplacements sur quatre rangees. */
.plan-boite {
  display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(4, 1fr);
  gap: 4px; margin-top: 18px; padding: 7px; aspect-ratio: 42 / 11;
  border: 2px solid rgba(242,194,48,.5); border-radius: 8px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 100%),
              rgba(255,255,255,.02);
}
.charge {
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px; font-size: 12px; font-weight: 900; font-style: normal;
  color: #0a2032; transition: opacity .25s ease, transform .25s ease;
}
.charge--a { background: #f2c230; }
.charge--b { background: #6cc0f5; }
.charge--c { background: #7fd9a8; }
/* Etat de depart de l'animation, pose par le script seulement. */
.charge[data-attente] { opacity: 0; transform: scale(.82); }

.plan-legende { margin: 12px 0 0; font-size: 11px; color: #668397; }

@media (max-width: 720px) {
  .plan { padding: 18px 16px 14px; }
  .plan-tete { flex-direction: column; gap: 12px; }
  .plan-taux { text-align: left; }
  .plan-tete h3 { font-size: 21px; }
  .plan-boite { gap: 3px; padding: 5px; }
  .charge { font-size: 9px; border-radius: 4px; }
}

/* Le logo remplace le mot-symbole en texte. Logo +20 % + slogan sous le logo. */
.brand { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 44px; gap: 3px; }
.brand img { height: 40.8px; width: auto; display: block; }
footer .brand img { height: 31.2px; }
.brand-slogan { font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }

/* Menu mobile gere par mobile.css/mobile.js du zip (dialog). */

/* Le tiroir est une vraie boîte de dialogue. */
.drawer[hidden], .drawerbg[hidden] { display: block; }
.drawer:focus { outline: none; }

/* Cibles tactiles : la barre de langues et la croix du tiroir tombaient sous 44 px. */
.lang-switch button { min-height: 36px; }
.close { width: 44px; height: 44px; }
.lang-switch a { min-height: 36px; }
@media (max-width: 980px) {
  .lang-switch button, .lang-switch a { min-height: 44px; padding: 7px 11px; }
}

/* Le nom de conteneur passait sous la carte sur petit écran. */
@media (max-width: 380px) { .ship-name { font-size: 20px; } }

/* Accessibilité clavier : rien n'était visible au focus. */
:focus-visible { outline: 2px solid var(--y); outline-offset: 3px; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--y); color: #071827; padding: 14px 20px; font-weight: 800;
}
.skip:focus { left: 0; }

/* Le navire et les reflets tournaient en boucle sans échappatoire. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}