:root{--navy:#101b2d;--navy2:#162843;--cream:#f5ead6;--paper:#f8f0e1;--gold:#d7ae57;--amber:#c9821f;--red:#913e2d;--ink:#251f17;--muted:#746b5e}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--navy);color:var(--cream);font-family:Inter,system-ui,sans-serif}.site-header{height:72px;padding:0 clamp(20px,5vw,72px);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(245,234,214,.12);position:absolute;width:100%;z-index:10}.brand{display:flex;gap:10px;align-items:center;color:inherit;text-decoration:none;font:700 12px 'Space Mono',monospace;letter-spacing:.15em}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--gold);border-radius:50%;color:var(--gold);font-family:Fraunces,serif;font-size:17px}.site-header nav{display:flex;gap:28px}.site-header nav a{color:rgba(245,234,214,.72);text-decoration:none;font-size:13px}.site-header nav a:hover{color:var(--gold)}.hero{min-height:720px;padding:125px clamp(20px,5vw,72px) 70px;display:grid;grid-template-columns:minmax(300px,.72fr) minmax(540px,1.28fr);gap:40px;align-items:center;background:radial-gradient(circle at 70% 30%,rgba(215,174,87,.09),transparent 32%),linear-gradient(135deg,var(--navy2),var(--navy))}.hero-copy{z-index:2}.eyebrow{font:700 10px 'Space Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 17px}.eyebrow.dark{color:var(--red)}h1,h2{font-family:Fraunces,serif}h1{font-size:clamp(49px,6vw,81px);line-height:.98;margin:0 0 27px;letter-spacing:-.04em}h1 em{color:var(--gold);font-weight:500}.intro{font-size:17px;line-height:1.75;color:rgba(245,234,214,.7);max-width:590px}.legend{display:flex;flex-direction:column;gap:9px;margin-top:34px;font:10px 'Space Mono',monospace;color:rgba(245,234,214,.62)}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:9px}.dot.active{background:var(--gold)}.dot.customary{background:var(--red)}.dot.legacy{background:#8393a8}.map-panel{position:relative;min-height:560px}.world-map{width:100%;height:100%;min-height:520px}.continents path{fill:rgba(245,234,214,.15);stroke:rgba(245,234,214,.18);stroke-width:1}.route{fill:none;stroke:var(--gold);stroke-width:1.5;stroke-dasharray:3 8;opacity:.5}.marker{cursor:pointer;outline:none}.marker text{fill:var(--cream);font:700 11px 'Space Mono',monospace;letter-spacing:.06em}.marker .measure,.marker .small{font-size:9px;fill:rgba(245,234,214,.63);font-weight:400}.marker .pin{stroke:var(--cream);stroke-width:1.5}.active-marker .pin{fill:var(--gold)}.customary-marker .pin{fill:var(--red)}.legacy-marker .pin{fill:#8393a8}.marker .pulse{fill:none;stroke:var(--gold);opacity:.35;animation:pulse 3s infinite;transform-origin:center}.customary-marker .pulse{stroke:var(--red)}@keyframes pulse{0%{transform:scale(.3);opacity:.7}100%{transform:scale(1.3);opacity:0}}.marker:focus .pin,.marker:hover .pin{filter:url(#glow);stroke-width:3}.compass{opacity:.4}.compass circle,.compass path{fill:none;stroke:var(--gold)}.compass text{fill:var(--gold);font:10px 'Space Mono'}.map-card{position:absolute;right:16%;bottom:-4%;width:min(515px,70%);background:rgba(11,20,34,.91);border:1px solid rgba(215,174,87,.28);border-radius:14px;padding:20px;box-shadow:0 20px 45px rgba(0,0,0,.26);backdrop-filter:blur(8px)}.map-card-kicker{font:9px 'Space Mono';text-transform:uppercase;letter-spacing:.15em;color:var(--gold)}.map-card h2{font-size:25px;margin:7px 0}.map-card strong{display:block;color:var(--gold);font:700 12px 'Space Mono';margin-bottom:8px}.map-card p{font-size:12px;line-height:1.55;color:rgba(245,234,214,.68);margin:0}.map-hint{position:absolute;left:4%;bottom:3%;font:9px 'Space Mono';color:rgba(245,234,214,.4);text-transform:uppercase;letter-spacing:.12em}.section{background:var(--paper);color:var(--ink);padding:105px clamp(20px,8vw,130px);display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.section-heading h2,.converter-intro h2{font-size:clamp(38px,5vw,58px);line-height:1.04;margin:0 0 24px}.section-heading>p:last-child{line-height:1.75;color:var(--muted);max-width:520px}.variant-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.variant-card{border-radius:17px;padding:28px;background:#fffaf1;border:1px solid #dfd3c0;position:relative}.variant-card .flag{position:absolute;right:22px;top:22px;border:1px solid #d7c9b3;border-radius:50%;width:35px;height:35px;display:grid;place-items:center;font:700 9px 'Space Mono'}.variant-label{font:700 10px 'Space Mono';text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.big-number{font:650 34px Fraunces;color:var(--red);margin:20px 0 13px}.big-number small{font-size:16px}.volume-bar{height:5px;background:#e5dac8;border-radius:5px;margin-bottom:23px}.volume-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--amber));border-radius:5px}.variant-card>p:last-child{font-size:13px;color:var(--muted);line-height:1.65}.converter-section{padding:105px clamp(20px,8vw,130px);display:grid;grid-template-columns:.7fr 1.3fr;gap:70px;align-items:center;background:linear-gradient(140deg,#152843,#0d1829)}.converter-intro>p:last-child{color:rgba(245,234,214,.65);line-height:1.7}.converter-card{background:var(--cream);color:var(--ink);border-radius:18px;padding:30px;display:grid;grid-template-columns:.7fr 1.3fr;gap:16px;box-shadow:0 25px 60px rgba(0,0,0,.25)}.input-group label{display:block;font:700 9px 'Space Mono';text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin-bottom:8px}.input-group input,.input-group select{width:100%;height:50px;border:1px solid #cfc2ad;background:#fffaf1;border-radius:9px;padding:0 13px;color:var(--ink);font:14px 'Space Mono';outline:none}.input-group input:focus,.input-group select:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(201,130,31,.12)}.results{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #d8cbb6;margin-top:10px;padding-top:25px}.results div{padding:0 18px;border-right:1px solid #d8cbb6}.results div:first-child{padding-left:0}.results div:last-child{border:0}.results span{display:block;color:var(--muted);font-size:11px}.results strong{display:block;color:var(--red);font:650 28px Fraunces;margin:6px 0 2px;overflow-wrap:anywhere}.results small{font:10px 'Space Mono';color:var(--muted)}.precision{grid-column:1/-1;margin:8px 0 0;color:#8d8374;font-size:10px}.timeline-section{background:var(--paper);color:var(--ink);padding:95px clamp(20px,8vw,130px)}.compact{max-width:500px}.timeline{list-style:none;padding:0;margin:55px 0 0;display:grid;grid-template-columns:repeat(3,1fr);position:relative}.timeline:before{content:"";position:absolute;top:8px;left:3%;right:3%;height:1px;background:#cdbfa9}.timeline li{position:relative;padding:34px 30px 0 0}.timeline li:before{content:"";position:absolute;top:3px;width:11px;height:11px;border-radius:50%;background:var(--red);box-shadow:0 0 0 5px var(--paper)}.timeline time{font:700 12px 'Space Mono';color:var(--red)}.timeline strong{display:block;margin:9px 0;font-family:Fraunces;font-size:20px}.timeline p{font-size:13px;line-height:1.6;color:var(--muted);max-width:280px}footer{padding:50px clamp(20px,8vw,130px);display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;color:rgba(245,234,214,.55);font-size:12px}.footer-brand{color:var(--cream)}footer p{margin:0}.fine{grid-column:2;font-size:9px;max-width:440px;text-align:right}@media(max-width:980px){.hero{grid-template-columns:1fr;padding-top:115px}.map-panel{min-height:500px}.section,.converter-section{grid-template-columns:1fr}.variant-grid{max-width:720px}.site-header nav{display:none}}@media(max-width:620px){h1{font-size:50px}.hero{padding-inline:17px}.map-panel{min-height:390px;margin-inline:-10px}.world-map{min-height:370px}.map-card{position:relative;right:auto;bottom:auto;width:100%;margin-top:-30px}.map-hint{display:none}.marker text{display:none}.section,.converter-section,.timeline-section{padding:75px 20px}.variant-grid{grid-template-columns:1fr}.converter-card{grid-template-columns:1fr;padding:22px}.results{grid-template-columns:1fr}.results div,.results div:first-child{padding:14px 0;border-right:0;border-bottom:1px solid #d8cbb6}.results div:last-child{border:0}.timeline{grid-template-columns:1fr;gap:35px}.timeline:before{left:5px;top:0;bottom:0;width:1px;height:auto}.timeline li{padding:0 0 0 32px}.timeline li:before{left:0;top:5px}footer{grid-template-columns:1fr}.fine{grid-column:1;text-align:left}}

/* V2: carte Natural Earth et troisième variante */
.continents path{vector-effect:non-scaling-stroke}
.variant-grid.three{grid-template-columns:repeat(3,1fr)}
.variant-card.dry .big-number{color:#6e5260}
.variant-card.dry .volume-bar span{background:linear-gradient(90deg,#6e5260,var(--amber))}
.language-note{grid-column:1/-1;margin-top:22px;border-top:1px solid #d7c9b3;padding-top:18px;display:flex;gap:18px;color:var(--muted);font-size:12px;line-height:1.65}
.language-note strong{color:var(--ink);white-space:nowrap;font-family:Fraunces,serif;font-size:16px}
.results{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.variant-grid.three{grid-template-columns:1fr}.results{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.language-note{display:block}.language-note strong{display:block;margin-bottom:6px}.results{grid-template-columns:1fr}}


/* V3 : frise historique enrichie */
.timeline {
  grid-template-columns: repeat(5, minmax(180px, 1fr));
}

@media (max-width: 1100px) and (min-width: 621px) {
  .timeline {
    overflow-x: auto;
    grid-template-columns: repeat(5, 230px);
    padding: 5px 0 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--red) #dfd3c0;
  }

  .timeline::before {
    right: auto;
    width: 1050px;
  }
}

@media (max-width: 620px) {
  .timeline {
    grid-template-columns: 1fr;
  }
}