:root {
  --marine: #082A66;         
  --marine-2: #06214F;       
  --bleu-900: #003A94;       
  --bleu-800: #0052CC;       
  --bleu-700: #0057DB;       
  --bleu-600: #0066FF;       
  --bleu-500: #2E80FF;       
  --bleu-400: #5B9DFF;       
  --bleu-200: #B8D4FF;
  --bleu-100: #E6F0FF;       
  --bleu-50:  #F2F7FF;

  --ink: #1F2637;            
  --ink-soft: #4B5563;
  --ink-mute: #6B7280;       
  --ink-invert: #FFFFFF;

  --sur-sombre: #D4E2F7;
  --sur-sombre-mute: #93AFD6;

  --vert: #10B981;
  --or: #10B981;             

  --paper: #FFFFFF;
  --line: #E5E7EB;           
  --line-soft: #F1F3F6;

  --radius: 12px;
  --radius-lg: 18px;
  --shadow-carte: 0 1px 2px rgba(7,27,48,.05), 0 8px 24px rgba(7,27,48,.06);
  --shadow-haute: 0 2px 6px rgba(7,27,48,.07), 0 28px 64px rgba(7,27,48,.14);

  --wrap: 1140px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font); color: var(--ink); background: var(--paper);
  font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }

h1, h2, h3 { line-height: 1.16; letter-spacing: -.025em; font-weight: 760; text-wrap: balance; }
h1 { font-size: clamp(1.95rem, 4.6vw, 3rem); line-height: 1.14; letter-spacing: -.03em; font-weight: 780; }
h2 { font-size: clamp(1.55rem, 3vw, 2rem); }
h3 { font-size: clamp(1.05rem, 1.5vw, 1.25rem); letter-spacing: -.014em; }
p { color: var(--ink-soft); }
a { color: inherit; text-decoration: none; }
strong, b { font-weight: 680; color: var(--ink); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
section { padding: clamp(2.25rem, 4.5vw, 3.75rem) 0; }
.sec-head { max-width: 42rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.sec-head p { font-size: 1.1rem; margin-top: 1rem; }
.sec-head .eyebrow { margin-top: 0; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--bleu-700); margin-bottom: 1rem;
}
.eyebrow.clair { color: var(--bleu-400); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 660;
  line-height: 1; padding: 1rem 1.6rem; border-radius: 11px;
  border: 1px solid transparent; text-align: center;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease, filter .15s ease;
}
.btn-3d {
  background: linear-gradient(180deg, var(--bleu-500) 0%, var(--bleu-600) 54%, var(--bleu-700) 100%);
  color: #fff; border-color: var(--bleu-800);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(7,27,48,.22),
    0 5px 0 0 var(--bleu-900),
    0 10px 20px rgba(20,71,126,.34);
  transform: translateY(0);
}
.btn-3d:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.44),
    inset 0 -1px 0 rgba(7,27,48,.22),
    0 6px 0 0 var(--bleu-900),
    0 14px 26px rgba(20,71,126,.40);
  transform: translateY(-1px);
}
.btn-3d:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 2px 5px rgba(7,27,48,.30),
    0 1px 0 0 var(--bleu-900),
    0 3px 8px rgba(20,71,126,.28);
}
.btn-contour {
  background: var(--paper); color: var(--bleu-800); border-color: var(--bleu-200);
  box-shadow: 0 1px 2px rgba(7,27,48,.05);
}
.btn-contour:hover { border-color: var(--bleu-600); background: var(--bleu-50); }
.btn-sombre { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.22); }
.btn-sombre:hover { background: rgba(255,255,255,.14); }
.btn-lg { padding: 1.15rem 1.9rem; font-size: 1.05rem; }
.btn-block { display: flex; width: 100%; }
.btn:focus-visible { outline: 3px solid var(--bleu-400); outline-offset: 3px; }
@media (max-width: 620px) { .btn { min-height: 44px; } }

.nav {
  position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.86);
  backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid var(--line-soft);
}
.nav .wrap { display: flex; align-items: center; gap: 1.4rem; height: 72px; }
.brand { display: flex; align-items: center; gap: .55rem; color: var(--ink); flex-shrink: 0; }
.brand img { height: 34px; width: auto; display: block; }
.brand .mot {
  font-size: 1.35rem; font-weight: 780; letter-spacing: -.035em; line-height: 1;
  color: var(--marine);
}
.foot .brand .mot { color: #fff; font-size: 1.2rem; }
@media (max-width: 620px) {
  .brand img { height: 28px; }
  .brand .mot { font-size: 1.15rem; }
}
.nav nav { margin-left: auto; display: flex; align-items: center; gap: 1.7rem; }
.nav nav a.lnk { font-size: .95rem; font-weight: 560; color: var(--ink-soft); white-space: nowrap; }
.nav nav a.lnk:hover { color: var(--bleu-700); }
.nav nav a.lnk.connexion { color: var(--bleu-700); font-weight: 620; }
.nav .btn { padding: .72rem 1.15rem; font-size: .94rem; white-space: nowrap; }
@media (max-width: 980px) { .nav nav .lnk { display: none; } }
@media (max-width: 620px) {
  .nav .btn-contour { display: none; }
  .nav .btn { padding: .62rem .85rem; font-size: .87rem; }
  .nav .wrap { gap: .75rem; }
  .brand svg { height: 25px; }
}

.hero { position: relative; overflow: hidden; background: var(--bleu-50); border-bottom: 1px solid var(--line-soft); }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(110% 80% at 85% -15%, rgba(30,99,171,.13), transparent 62%);
}
.hero .wrap {
  position: relative; z-index: 1; display: grid; grid-template-columns: 1.04fr .96fr;
  gap: clamp(2.4rem, 4vw, 3.8rem); align-items: center;
  padding-top: clamp(1.75rem, 4vw, 3.5rem); padding-bottom: clamp(1.75rem, 4vw, 3.5rem);
}
.hero h1 .hl { color: var(--bleu-600); }
.hero .lede { font-size: clamp(1.06rem, 1.5vw, 1.19rem); margin: 1.4rem 0 2rem; max-width: 40ch; }
.hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero-note {
  margin-top: 1.3rem; font-size: .9rem; color: var(--ink-mute);
  display: flex; align-items: flex-start; gap: .5rem; max-width: 44ch; line-height: 1.55;
}
.hero-note svg { flex-shrink: 0; margin-top: 4px; color: var(--bleu-600); }
@media (max-width: 940px) { .hero .wrap { grid-template-columns: 1fr; } }

.rassurances {
  list-style: none; display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; margin-top: 1.5rem;
}
.rassurances li {
  display: flex; align-items: flex-start; gap: .45rem;
  font-size: .88rem; color: var(--ink-mute); line-height: 1.45;
}
.rassurances svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; color: var(--vert); }

.etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.etape { padding: 0 1.8rem; border-left: 1px solid var(--line); }
.etape:first-child { padding-left: 0; border-left: 0; }
.etape:last-child { padding-right: 0; }
.ic-etape {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--bleu-100); color: var(--bleu-600); margin-bottom: 1rem;
}
.ic-etape svg { width: 21px; height: 21px; }
.etape .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bleu-100); color: var(--bleu-700);
  font-weight: 740; font-size: 1.02rem; margin-bottom: .9rem;
}
.etape h3 { margin-bottom: .5rem; }
.etape p { font-size: .93rem; }
@media (max-width: 980px) {
  .etapes { grid-template-columns: repeat(2, 1fr); gap: 2rem 0; }
  .etape:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 620px) {
  .etapes { grid-template-columns: 1fr; gap: 1.7rem; }
  .etape { padding: 0; border-left: 0; }
}

.droit-carte {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.9rem 1.7rem; box-shadow: var(--shadow-carte);
}
.droit-carte h3 { margin-bottom: .7rem; }
.droit-carte p { font-size: .96rem; }
.lien-fleche {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.1rem;
  color: var(--bleu-700); font-weight: 640; font-size: .94rem;
}
.lien-fleche::after { content: "→"; transition: transform .15s ease; }
.lien-fleche:hover::after { transform: translateX(3px); }

.pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--bleu-100); color: var(--bleu-600); margin-bottom: .9rem;
}
.pastille svg { width: 20px; height: 20px; }

.visuel-releve { display: flex; align-items: center; }
.visuel-releve .releve { width: 100%; }

.illu {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 340px; overflow: hidden; border-radius: 22px;
}
.forme { position: absolute; border-radius: 28px; pointer-events: none; }
.forme-a {
  width: 78%; height: 76%; right: -4%; top: 4%;
  background: linear-gradient(150deg, var(--bleu-500), var(--bleu-700));
  transform: rotate(-9deg); opacity: .92;
}
.forme-b {
  width: 46%; height: 44%; right: 6%; bottom: 2%;
  background: linear-gradient(150deg, var(--bleu-400), var(--bleu-600));
  transform: rotate(7deg); opacity: .55;
}
.doc {
  position: relative; z-index: 2; width: min(330px, 88%);
  background: var(--paper); border-radius: 16px; padding: 1.2rem 1.25rem;
  box-shadow: 0 22px 48px rgba(8,42,102,.26), 0 2px 6px rgba(8,42,102,.10);
  transform: rotate(-2.2deg);
}
.doc-tete { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.pastille-chrono { width: 20px; height: 20px; border-radius: 6px; background: var(--bleu-600); flex-shrink: 0; }
.doc-marque { font-size: .82rem; font-weight: 700; color: var(--marine); }
.doc-titre { font-size: .96rem; font-weight: 700; color: var(--ink); margin-bottom: .85rem; }
.doc-ligne {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .42rem 0; border-bottom: 1px solid var(--line-soft); font-size: .8rem;
}
.doc-ligne .barre { height: 7px; border-radius: 999px; background: var(--line); }
.doc-ligne b { color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.doc-remb {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  margin-top: .75rem; padding: .6rem .7rem; border-radius: 9px;
  background: rgba(16,185,129,.12); font-size: .84rem; color: #08694A; font-weight: 640;
}
.doc-remb b { color: #067A55; font-variant-numeric: tabular-nums; }
.doc-exemple {
  margin-top: .7rem; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-mute); text-align: right;
}
.coche {
  position: absolute; z-index: 3; right: 7%; bottom: 8%;
  width: 52px; height: 52px; border-radius: 50%; background: var(--vert); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(16,185,129,.42); border: 3px solid #fff;
}
.coche svg { width: 24px; height: 24px; }
@media (max-width: 940px) { .illu { min-height: 370px; margin-top: .5rem; } }

.depot { background: var(--paper); }
.depot .sim { max-width: 560px; margin: 0 auto; }

.tableau-colis {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.3rem 1.4rem; box-shadow: var(--shadow-carte);
}
.tc-tete, .tc-ligne {
  display: grid; grid-template-columns: 1fr auto 72px; gap: .8rem; align-items: center;
  padding: .6rem 0; font-size: .86rem;
}
.tc-tete {
  border-bottom: 1px solid var(--line); padding-top: 0;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 680;
}
.tc-ligne { border-bottom: 1px solid var(--line-soft); }
.tc-ligne:last-of-type { border-bottom: 0; }
.tc-ligne .trk { font-family: var(--mono); font-size: .78rem; color: var(--ink); }
.tc-tete .fin, .tc-ligne .fin { text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tableau-colis .pill { font-size: .72rem; font-weight: 660; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap; }
.tableau-colis .pill.ok { background: rgba(16,185,129,.14); color: #067A55; }
.tableau-colis .pill.wait { background: var(--bleu-100); color: var(--bleu-700); }
.tableau-colis .pill.neutre { background: var(--line-soft); color: var(--ink-mute); }

.fin-carte {
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line-soft);
  font-size: .9rem;
}

.sim {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-haute); overflow: hidden;
}
.sim-head {
  padding: 1.15rem 1.4rem; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: .65rem; background: var(--paper);
}
.sim-head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bleu-600); flex-shrink: 0; }
.sim-head h3 { font-size: 1rem; font-weight: 700; }
.sim-body { padding: 1.4rem; }
.drop {
  display: block; border: 1.5px dashed var(--bleu-200); border-radius: var(--radius);
  background: var(--bleu-50); padding: 2.1rem 1.2rem; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.drop:hover, .drop.over { border-color: var(--bleu-600); background: var(--bleu-100); }
.drop .ic { width: 40px; height: 40px; margin: 0 auto .7rem; color: var(--bleu-600); display: block; }
.drop p { color: var(--ink); font-weight: 620; margin-bottom: .2rem; }
.drop small { color: var(--ink-mute); }
.sim-privacy { margin-top: .95rem; font-size: .82rem; color: var(--ink-mute); text-align: center; line-height: 1.5; }
.sim-privacy b { color: var(--ink-soft); font-weight: 660; }

.sim-out { display: none; }
.sim-out.show { display: block; animation: rise .4s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.gauge { text-align: center; padding: .3rem 0 1rem; }
.gauge .amount {
  font-size: clamp(2.1rem, 7vw, 2.9rem); font-weight: 800; letter-spacing: -.04em;
  color: var(--bleu-700); line-height: 1.05; overflow-wrap: break-word;
}
.gauge .cap { font-size: .92rem; color: var(--ink-soft); margin-top: .45rem; }
.sim-rows { border-top: 1px solid var(--line-soft); }
.sim-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .68rem 0; border-bottom: 1px solid var(--line-soft); font-size: .94rem;
}
.sim-row span { color: var(--ink-soft); }
.sim-row b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sim-row .up { color: var(--bleu-700); }
.sim-note { font-size: .81rem; color: var(--ink-mute); margin-top: .9rem; line-height: 1.5; }
.sim-working { text-align: center; padding: 1.4rem .4rem; color: var(--ink-soft); display: none; }
.sim-working.show { display: block; }
.sim-working .det { font-size: .8rem; color: var(--ink-mute); margin-top: .9rem; line-height: 1.5; }
.jauge { height: 6px; border-radius: 999px; background: var(--bleu-100); overflow: hidden; margin-top: .9rem; }
.jauge-fil {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--bleu-500), var(--bleu-600));
  transition: width .35s ease;
}

.preuves { margin-top: 1.1rem; display: grid; gap: .5rem; }
.preuve {
  display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem;
  padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bleu-50); font-size: .88rem;
}
.preuve .trk { font-family: var(--mono); font-size: .8rem; color: var(--ink); display: block; }
.preuve .det { color: var(--ink-mute); font-size: .78rem; display: block; margin-top: .15rem; }
.preuve .fin { text-align: right; flex-shrink: 0; }
.preuve .fin b { color: var(--bleu-700); font-variant-numeric: tabular-nums; }
.spin {
  width: 30px; height: 30px; border: 3px solid var(--line); border-top-color: var(--bleu-600);
  border-radius: 50%; margin: 0 auto .8rem; animation: turn .8s linear infinite;
}
@keyframes turn { to { transform: rotate(360deg); } }

.proof { background: var(--marine); color: var(--sur-sombre); padding: 0; }
.proof .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
  padding: clamp(2rem, 4vw, 2.8rem) 24px;
}
.proof .stat strong {
  display: block; font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 800;
  color: #fff; letter-spacing: -.03em; line-height: 1.1;
}
.proof .stat span { font-size: .89rem; color: var(--sur-sombre-mute); display: block; margin-top: .35rem; line-height: 1.5; }
@media (max-width: 780px) { .proof .wrap { grid-template-columns: repeat(2, 1fr); gap: 1.8rem; } }

.cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.cartes.quatre { grid-template-columns: repeat(4, 1fr); }
.carte {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.8rem 1.55rem; box-shadow: var(--shadow-carte);
}
.carte .n {
  font-family: inherit; font-size: .82rem; color: var(--bleu-600);
  font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.carte h3 { margin: .8rem 0 .55rem; }
.carte p { font-size: .96rem; }
@media (max-width: 980px) { .cartes.quatre { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .cartes { grid-template-columns: 1fr; } .cartes.quatre { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.2rem, 4vw, 3.8rem); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.bleu-clair { background: var(--bleu-50); }

.tick { list-style: none; display: grid; gap: 1rem; margin-top: 1.5rem; }
.tick li { display: grid; grid-template-columns: 24px 1fr; gap: .8rem; align-items: start; }
.tick .k { color: var(--bleu-600); margin-top: 3px; }
.tick b { display: block; }
.tick p { font-size: .95rem; margin-top: .15rem; }

.releve {
  background: var(--marine); border-radius: var(--radius-lg); padding: 1.5rem;
  color: var(--sur-sombre); box-shadow: var(--shadow-haute); position: relative; overflow: hidden;
}
.releve::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(30,99,171,.26), transparent 58%);
}
.releve .line {
  display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  padding: .75rem 0; border-bottom: 1px solid rgba(255,255,255,.09);
  font-size: .9rem; position: relative; z-index: 1;
}
.releve .line:last-child { border-bottom: 0; }
.releve .pill { font-size: .73rem; font-weight: 660; padding: .22rem .6rem; border-radius: 999px; white-space: nowrap; }
.releve .pill.ok { background: rgba(224,166,60,.18); color: #F0C675; }
.releve .pill.wait { background: rgba(74,149,222,.18); color: #9CC6F2; }
.releve .pill.neutre { background: rgba(255,255,255,.07); color: var(--sur-sombre-mute); }
.releve .trk { font-family: var(--mono); font-size: .78rem; color: var(--sur-sombre-mute); }

.garantie { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem 2rem; margin-top: 1.6rem; }
.garantie div { display: grid; grid-template-columns: 22px 1fr; gap: .7rem; align-items: start; font-size: .96rem; }
.garantie svg { color: var(--bleu-600); margin-top: 4px; }
@media (max-width: 680px) { .garantie { grid-template-columns: 1fr; } }

.prix-carte {
  max-width: 640px; margin: 0 auto; background: var(--marine); color: var(--sur-sombre);
  border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 3rem) clamp(1.4rem, 4vw, 2.6rem);
  text-align: center; box-shadow: var(--shadow-haute); position: relative; overflow: hidden;
}
.prix-carte::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 80% at 50% 0%, rgba(224,166,60,.13), transparent 62%);
}
.prix-carte .big {
  font-size: clamp(1.55rem, 6.4vw, 2.5rem); font-weight: 820; color: #fff;
  letter-spacing: -.035em; line-height: 1.15; position: relative; z-index: 1;
  overflow-wrap: break-word;
}
.prix-carte .big em { color: var(--or); font-style: normal; }
.prix-carte p { color: var(--sur-sombre-mute); position: relative; z-index: 1; }
.prix-carte .liste { list-style: none; text-align: left; max-width: 27rem; margin: 1.6rem auto 0; display: grid; gap: .65rem; position: relative; z-index: 1; }
.prix-carte .liste li { display: grid; grid-template-columns: 20px 1fr; gap: .65rem; align-items: start; font-size: .97rem; color: var(--sur-sombre); }
.prix-carte .liste svg { color: var(--or); margin-top: 4px; }
.prix-carte .fine { font-size: .88rem; margin-top: 1.3rem; }

.faq { max-width: 760px; margin: 0 auto; }
.qa { border-bottom: 1px solid var(--line); padding: 1.3rem 0; }
.qa summary {
  font-weight: 660; font-size: 1.05rem; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; color: var(--ink);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--bleu-700); }
.qa summary .chev { color: var(--bleu-600); transition: transform .2s; flex-shrink: 0; font-weight: 700; }
.qa[open] summary .chev { transform: rotate(45deg); }
.qa p { margin-top: .85rem; font-size: 1rem; }

.final { background: var(--marine); color: #fff; position: relative; overflow: hidden; }
.final::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 120% at 15% 0%, rgba(0,102,255,.34), transparent 62%);
}
.final .wrap {
  position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 2.5rem; align-items: center;
}
.final h2 { color: #fff; }
.final p { color: var(--sur-sombre-mute); font-size: 1.06rem; max-width: 36rem; margin: 1.1rem 0 2rem; }
.final .btn-shiny { --fond: var(--bleu-900); --fond-subtil: var(--bleu-800); }
@media (max-width: 900px) {
  .final .wrap { grid-template-columns: 1fr; text-align: center; }
  .final p { margin-left: auto; margin-right: auto; }
}

.cube-scene { position: relative; height: 240px; display: flex; align-items: center; justify-content: center; }
.cube { position: relative; width: 150px; height: 168px; }
.cube .face { position: absolute; display: block; }
.cube .dessus {
  width: 150px; height: 86px; top: 0; left: 0;
  background: linear-gradient(135deg, #4A95FF, var(--bleu-600));
  clip-path: polygon(50% 0, 100% 28%, 50% 56%, 0 28%);
}
.cube .gauche {
  width: 75px; height: 130px; top: 24px; left: 0;
  background: linear-gradient(180deg, var(--bleu-700), #063B8C);
  clip-path: polygon(0 0, 100% 56%, 100% 100%, 0 44%);
}
.cube .droite {
  width: 75px; height: 130px; top: 24px; left: 75px;
  background: linear-gradient(180deg, var(--bleu-600), #0A4FB8);
  clip-path: polygon(100% 0, 100% 44%, 0 100%, 0 56%);
  display: flex; align-items: center; justify-content: center;
}
.cube .droite img { opacity: .92; transform: translate(-4px, 6px); }
.jeton {
  position: absolute; border-radius: 50%;
  background: linear-gradient(145deg, #5B9DFF, var(--bleu-600));
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
}
.j1 { width: 34px; height: 34px; top: 16%; right: 12%; }
.j2 { width: 24px; height: 24px; bottom: 20%; left: 10%; }
.j3 { width: 18px; height: 18px; top: 60%; right: 6%; opacity: .8; }
@media (max-width: 900px) { .cube-scene { height: 200px; } }
.foot { background: var(--marine-2); color: var(--sur-sombre-mute); padding: 3rem 0; font-size: .9rem; }
.foot .wrap { display: grid; gap: 1.6rem; }
.foot .rang { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.foot .brand svg { color: var(--sur-sombre); height: 26px; }
.foot .brand img { height: 30px; }
.foot .liens { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.foot a { color: var(--sur-sombre); }
.foot a:hover { color: #fff; }
.foot .mention {
  border-top: 1px solid rgba(255,255,255,.10); padding-top: 1.4rem;
  line-height: 1.65; max-width: 62rem;
}
.foot .legal { display: block; margin-top: .9rem; }
.foot .legal a { margin-right: 1.2rem; text-decoration: underline; text-underline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.bloc {
  background: var(--paper); border-radius: 22px; padding: clamp(1.6rem, 3.2vw, 2.6rem);
  border: 1px solid var(--line);
}
.bloc > h2 { margin-bottom: .35rem; }
.bloc-sub { color: var(--ink-mute); margin-bottom: 2rem; }
.bloc-clair { background: var(--bleu-100); border-color: transparent; }
.bloc-marine {
  background: linear-gradient(135deg, #0A2F72 0%, var(--marine) 55%, #061D4A 100%);
  border-color: transparent; color: #fff;
  display: grid; grid-template-columns: 1fr .9fr; gap: 2rem; align-items: center;
}
.bloc-marine h2 { color: #fff; }
.bloc-marine p { color: var(--sur-sombre-mute); margin: 1rem 0 1.8rem; max-width: 34rem; }
@media (max-width: 860px) { .bloc-marine { grid-template-columns: 1fr; } }

.badge-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: var(--bleu-100); color: var(--bleu-600);
}
.badge-ic svg { width: 18px; height: 18px; }

.fl { margin-left: .15rem; font-weight: 700; }

.btn-pale { background: var(--bleu-100); color: var(--bleu-700); border-color: transparent; }
.btn-pale:hover { background: var(--bleu-200); }
.btn-blanc { background: #fff; color: var(--marine); border-color: transparent; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.btn-blanc:hover { background: var(--bleu-50); }

.illu { overflow: visible; border-radius: 0; min-height: 0; }
.illu > img { width: 100%; height: auto; display: block; }
.rassurances li { align-items: center; gap: .6rem; font-size: .86rem; color: var(--ink-soft); }
.rassurances { gap: 1rem 2rem; margin-top: 1.9rem; }
.hero-cta .btn-3d { border-radius: 999px; }

.etape .tete { display: flex; align-items: center; gap: .55rem; margin-bottom: .9rem; }
.etape .num {
  width: 32px; height: 32px; font-size: .92rem; margin: 0;
  background: var(--bleu-600); color: #fff;
}
.etape h3 { font-size: 1rem; }
.etape p { font-size: .88rem; color: var(--ink-mute); }

.recup { display: grid; grid-template-columns: .62fr 1fr 1fr; gap: 1.4rem; align-items: stretch; }
.recup h3 { margin-bottom: .6rem; }
.recup p { font-size: .9rem; color: var(--ink-soft); margin-bottom: 1.1rem; }
.recup .droit-carte { background: var(--paper); border: 0; box-shadow: none; padding: 1.4rem; }
.recup .droit-carte p:last-child { margin-bottom: 0; }
@media (max-width: 980px) { .recup { grid-template-columns: 1fr; } }

.photo-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; min-height: 190px; border-radius: 14px;
  background: var(--paper); border: 1.5px dashed var(--bleu-200); color: var(--ink-mute);
  font-size: .8rem; text-align: center; padding: 1rem;
}
.photo-slot svg { width: 26px; height: 26px; }

.illu-colis img { width: 100%; height: auto; display: block; }

.pourquoi { display: grid; grid-template-columns: 1.25fr 1fr; gap: 2rem; align-items: start; }
.atouts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.atout h3 { font-size: .92rem; margin: .75rem 0 .35rem; }
.atout p { font-size: .82rem; color: var(--ink-mute); }
.processus { background: var(--bleu-100); border-radius: 16px; padding: 1.4rem; }
.processus h3 { font-size: 1rem; }
.processus .mini { font-size: .82rem; color: var(--ink-mute); margin-top: .3rem; }
.coches { list-style: none; display: grid; gap: .55rem; margin-top: 1rem; }
.coches li { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--ink-soft); }
.coches svg { width: 14px; height: 14px; color: var(--bleu-600); flex-shrink: 0; }
@media (max-width: 1040px) { .pourquoi { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .atouts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .atouts { grid-template-columns: 1fr; } }

.portable { margin: 1.1rem 0 .3rem; }
.portable .ecran {
  background: var(--paper); border: 1px solid var(--bleu-200); border-radius: 8px 8px 0 0;
  height: 78px; padding: .7rem; display: flex; flex-direction: column; gap: .45rem;
}
.portable .trait { height: 6px; border-radius: 999px; background: var(--bleu-100); width: 80%; }
.portable .trait.court { width: 52%; }
.portable .socle {
  height: 7px; border-radius: 0 0 7px 7px; background: var(--bleu-200);
  margin: 0 -.45rem;
}

@property --angle-degrade      { syntax: "<angle>";      initial-value: 0deg;  inherits: false; }
@property --decalage-degrade   { syntax: "<angle>";      initial-value: 0deg;  inherits: false; }
@property --part-degrade       { syntax: "<percentage>"; initial-value: 5%;    inherits: false; }
@property --reflet             { syntax: "<color>";      initial-value: white; inherits: false; }

.btn-shiny {
  --fond: #071E4A;
  --fond-subtil: #0C2A63;
  --eclat: var(--bleu-600);
  --eclat-doux: #8FB8FF;
  --anim: angle-degrade linear infinite;
  --duree: 3s;
  --epaisseur: 2px;
  --transition: 800ms cubic-bezier(.25, 1, .5, 1);

  isolation: isolate; position: relative; overflow: hidden; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.05rem 2.2rem; -webkit-tap-highlight-color: transparent;
  font-family: inherit; font-size: 1.02rem; line-height: 1.2; font-weight: 640;
  border: 1px solid transparent; border-radius: 360px; color: #fff;
  background:
    linear-gradient(var(--fond), var(--fond)) padding-box,
    conic-gradient(
      from calc(var(--angle-degrade) - var(--decalage-degrade)),
      transparent,
      var(--eclat) var(--part-degrade),
      var(--reflet) calc(var(--part-degrade) * 2),
      var(--eclat) calc(var(--part-degrade) * 3),
      transparent calc(var(--part-degrade) * 4)
    ) border-box;
  box-shadow: inset 0 0 0 1px var(--fond-subtil);
  transition: var(--transition);
  transition-property: --decalage-degrade, --part-degrade, --reflet;
}
.btn-shiny::before,
.btn-shiny::after,
.btn-shiny span::before {
  content: ""; pointer-events: none; position: absolute;
  inset-inline-start: 50%; inset-block-start: 50%;
  translate: -50% -50%; z-index: -1;
}
.btn-shiny:active { translate: 0 1px; }

.btn-shiny::before {
  --taille: calc(100% - var(--epaisseur) * 3);
  --pos: 2px;
  --pas: calc(var(--pos) * 2);
  width: var(--taille); height: var(--taille);
  background: radial-gradient(circle at var(--pos) var(--pos), #fff calc(var(--pos) / 4), transparent 0) padding-box;
  background-size: var(--pas) var(--pas);
  background-repeat: space;
  mask-image: conic-gradient(from calc(var(--angle-degrade) + 45deg), #000, transparent 10% 90%, #000);
  border-radius: inherit; opacity: .4; z-index: -1;
}

.btn-shiny::after {
  --anim: miroiter linear infinite;
  width: 100%; aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, var(--eclat), transparent);
  mask-image: radial-gradient(circle at bottom, transparent 40%, #000);
  opacity: .6;
}
.btn-shiny span { z-index: 1; position: relative; }
.btn-shiny span::before {
  --taille: calc(100% + 1rem);
  width: var(--taille); height: var(--taille);
  box-shadow: inset 0 -1ex 2rem 4px var(--eclat);
  opacity: 0; transition: opacity var(--transition);
  animation: calc(var(--duree) * 1.5) respirer linear infinite paused;
}
.btn-shiny,
.btn-shiny::before,
.btn-shiny::after {
  animation: var(--anim) var(--duree), var(--anim) calc(var(--duree) / .4) reverse paused;
  animation-composition: add;
}
.btn-shiny:is(:hover, :focus-visible) {
  --part-degrade: 20%;
  --decalage-degrade: 95deg;
  --reflet: var(--eclat-doux);
}
.btn-shiny:is(:hover, :focus-visible),
.btn-shiny:is(:hover, :focus-visible)::before,
.btn-shiny:is(:hover, :focus-visible)::after { animation-play-state: running; }
.btn-shiny:is(:hover, :focus-visible) span::before { opacity: 1; animation-play-state: running; }
.btn-shiny:focus { outline: none; }
.btn-shiny:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--fond-subtil), 0 0 0 4px rgba(0, 102, 255, .32);
}

@keyframes angle-degrade { to { --angle-degrade: 360deg; } }
@keyframes miroiter      { to { rotate: 360deg; } }
@keyframes respirer      { from, to { scale: 1; } 50% { scale: 1.2; } }

.nav .btn-shiny { padding: .7rem 1.25rem; font-size: .92rem; }
.btn-shiny.btn-block { display: flex; width: 100%; }
@media (max-width: 620px) { .btn-shiny { min-height: 44px; padding: .8rem 1.3rem; font-size: .9rem; } }

.btn-pilule {
  border-radius: 360px; padding: 1.05rem 2.2rem;
  font-size: 1.02rem; line-height: 1.2; font-weight: 640;
}
@media (max-width: 620px) { .btn-pilule { min-height: 44px; padding: .8rem 1.3rem; font-size: .9rem; } }
.btn-pilule:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(0, 102, 255, .32); }

.sim-suite { display: grid; gap: .6rem; margin-top: 1.2rem; }

@media (prefers-reduced-motion: reduce) {
  .btn-shiny,
  .btn-shiny::before,
  .btn-shiny::after,
  .btn-shiny span::before { animation: none !important; }
  .btn-shiny { background: linear-gradient(var(--fond), var(--fond)) padding-box, linear-gradient(var(--eclat), var(--eclat)) border-box; }
  .btn-shiny::before, .btn-shiny::after { opacity: .25; }
}


.hero { position: relative; isolation: isolate; }
.fond-anime {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0; opacity: 0;
  transition: opacity 1.1s ease;
}
.fond-anime.allume { opacity: 1; }
.hero .wrap { position: relative; z-index: 1; }

.hero .lede { max-width: 46ch; }

.rassurances {
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: 1.6rem; margin-top: 2.2rem; list-style: none;
}
.rassurances li {
  display: flex; align-items: center; gap: .6rem; flex: 1 1 0; min-width: 0;
  font-size: .88rem; font-weight: 560; color: var(--marine); line-height: 1.35;
}
.rassurances img { width: 44px; height: auto; flex-shrink: 0; }
@media (max-width: 1040px) { .rassurances li { font-size: .82rem; gap: .5rem; } }
@media (max-width: 700px) {
  .rassurances { display: grid; gap: .85rem; }
  .rassurances li { flex: none; }
}

@keyframes poser {
  from { opacity: 0; transform: translateY(26px) scale(.965) rotate(-1.4deg); }
  to   { opacity: 1; transform: none; }
}
.illu > img {
  width: 100%; height: auto; display: block;
  animation: poser .95s cubic-bezier(.22, 1, .36, 1) both;
  will-change: transform, opacity;
}
@media (min-width: 941px) {
  .illu { margin-right: -4%; }
  .illu > img { width: 116%; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .illu > img { animation: none; }
}

@property --tour-bordure { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.cadre-brillant {
  position: relative; border-radius: 22px; padding: 2px;
  isolation: isolate; overflow: hidden;
}
.cadre-brillant::before {
  content: ""; position: absolute; z-index: 0;
  inset: -50%; aspect-ratio: 1; min-width: 150%; min-height: 150%;
  margin: auto;
  background: conic-gradient(
    from var(--tour-bordure),
    var(--bleu-600), var(--bleu-400), var(--vert), var(--bleu-600)
  );
  filter: blur(6px);
  animation: tourner-bordure 4s linear infinite;
}
.cadre-brillant > * { position: relative; z-index: 1; border-radius: 20px; }
@keyframes tourner-bordure { to { --tour-bordure: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .cadre-brillant::before { animation: none; }
}

@keyframes pulser {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

.scene3d { perspective: 1300px; perspective-origin: 50% 0%; }
.chassis {
  transform: translateZ(0) rotateX(7deg) scale(1.02);
  transform-origin: 50% 0%;
  -webkit-font-smoothing: antialiased;
  border-radius: 22px; padding: 9px;
  background: linear-gradient(160deg, #123E86, #071E4A 55%, #0B2E6B);
  box-shadow:
    0 9px 20px rgba(7,27,48,.22), 0 37px 46px rgba(7,27,48,.20),
    0 84px 66px rgba(7,27,48,.12), 0 149px 80px rgba(7,27,48,.05);
  will-change: transform;
}
.ecran {
  background: var(--paper); border-radius: 15px; overflow: hidden;
  padding: 1.15rem 1.15rem 1rem;
}

.fa-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.fa-marque { display: flex; align-items: center; gap: .6rem; }
.fa-logo { width: 30px !important; max-width: 30px; height: auto; flex-shrink: 0; display: block; animation: none; }
.fa-marque b { display: block; font-size: .98rem; color: var(--marine); letter-spacing: -.02em; }
.fa-marque span { display: block; font-size: .74rem; color: var(--ink-mute); }
.fa-etiquette {
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute); background: var(--line-soft);
  padding: .28rem .5rem; border-radius: 999px; flex-shrink: 0;
}

.fa-meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem;
  margin: .95rem 0; padding: .7rem .8rem;
  background: var(--bleu-50); border-radius: 10px;
}
.fa-meta span { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-mute); white-space: nowrap; }
.fa-meta b { font-size: .84rem; color: var(--marine); font-variant-numeric: tabular-nums; white-space: nowrap; }

.fa-tableau {
  --fa-colonnes: minmax(8.3em, 1fr) 5em 4.9em 6.9em;
  font-size: clamp(.58rem, calc((100vw - 94.8px) / 27.4), .72rem);
}
.fa-entete, .fa-ligne {
  display: grid; grid-template-columns: var(--fa-colonnes);
  gap: .7em; align-items: center; padding: .58em 0;
  white-space: nowrap;
}
.fa-entete {
  color: var(--ink-mute); font-weight: 680; border-bottom: 1px solid var(--line);
}
.fa-entete > span { font-size: .833em; text-transform: uppercase; letter-spacing: .07em; }
.fa-ligne { border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); }
.fa-ligne .num {
  font-family: var(--mono); font-size: .958em; color: var(--marine);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  display: inline-block;
}
.fa-entete .d, .fa-ligne .d { text-align: right; }
.fa-ligne .d:first-of-type { font-variant-numeric: tabular-nums; font-weight: 620; color: var(--ink); }
.fa-ligne.flou { opacity: .38; border-bottom: 0; }
.tag {
  font-style: normal; font-size: .861em; font-weight: 660;
  padding: .258em .677em; border-radius: 999px; white-space: nowrap;
}
@media (max-width: 420px) {
  .ecran { padding: 1rem .9rem .9rem; }
  .fa-tete { gap: .6rem; }
  .fa-marque b { font-size: .92rem; }
  .fa-etiquette { font-size: .56rem; padding: .24rem .42rem; letter-spacing: .08em; }
  .fa-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .45rem .6rem; padding: .65rem .8rem; }
  .fa-meta span { font-size: .58rem; letter-spacing: .04em; }
  .fa-meta b { font-size: .78rem; }
}
@media (max-width: 359px) {
  .fa-tableau {
    --fa-colonnes: minmax(8.3em, 1fr) 4.9em 6.9em;
    font-size: clamp(.58rem, calc((100vw - 94.8px) / 21.7), .72rem);
  }
  .fa-entete > :nth-child(2), .fa-ligne > :nth-child(2) { display: none; }
}
.tag.retard { background: rgba(255,107,107,.14); color: #C0392B; }
.tag.ok { background: rgba(16,185,129,.14); color: #067A55; }

.fa-total {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: .9rem; padding: .85rem .95rem; border-radius: 12px;
  background: linear-gradient(135deg, rgba(16,185,129,.13), rgba(0,102,255,.10));
}
.fa-total span { display: block; font-size: .7rem; color: var(--ink-soft); }
.fa-total b {
  display: block; font-size: 1.5rem; font-weight: 820; color: #067A55;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.15;
}

@media (max-width: 940px) {
  .scene3d { perspective: 900px; }
  .chassis { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) { .chassis { transform: none !important; } }


.reveler-actif [data-reveler] {
  opacity: 0; transform: translateY(20px);
  transition:
    opacity .6s cubic-bezier(.22, 1, .36, 1) calc(var(--rang, 0) * 70ms),
    transform .6s cubic-bezier(.22, 1, .36, 1) calc(var(--rang, 0) * 70ms);
}
.reveler-actif [data-reveler].vu { opacity: 1; transform: none; }

.chiffres { padding: 0; margin-top: -1px; }
.chiffres .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 1rem; }
.chiffre { padding: 1.9rem 1.4rem; }
.chiffre b {
  display: block; font-size: clamp(1.45rem, 2.4vw, 1.9rem); font-weight: 780;
  letter-spacing: -.03em; color: var(--marine); line-height: 1.1;
}
.chiffre span { display: block; margin-top: .45rem; font-size: .88rem; color: var(--ink-mute); line-height: 1.45; }
@media (max-width: 900px) {
  .chiffres .wrap { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .chiffres .wrap { grid-template-columns: 1fr; }
  .chiffre { padding: 1.1rem .2rem; }
}

@property --angle-faisceau { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.drop {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .55rem; min-height: 16rem; padding: 2.2rem 1.4rem;
  border: 1.5px dashed var(--bleu-200); border-radius: 18px;
  background: linear-gradient(180deg, #fff, var(--bleu-50));
  text-align: center; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.drop:hover { border-color: var(--bleu-400); }
.drop.over { border-color: var(--bleu-600); background: var(--bleu-100); transform: scale(1.01); }
.drop:focus-within { outline: 3px solid rgba(0, 102, 255, .28); outline-offset: 3px; }

.drop-faisceau {
  position: absolute; inset: -1.5px; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--angle-faisceau),
    transparent 0 68%, var(--bleu-600) 82%, #8FB8FF 88%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
  animation: faisceau 2.4s linear infinite;
}
.drop:hover .drop-faisceau { opacity: .55; }
.drop.over .drop-faisceau { opacity: 1; }
@keyframes faisceau { to { --angle-faisceau: 360deg; } }

.grappe { position: relative; width: 9rem; height: 3.8rem; margin-bottom: .6rem; }
.fiche {
  position: absolute; top: 50%; left: 50%;
  display: grid; place-items: center; width: 3.1rem; height: 3.1rem;
  border-radius: 13px; background: #fff; color: var(--ink-mute);
  border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(8, 42, 102, .06);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), color .3s ease, box-shadow .3s ease;
}
.fiche svg { width: 1.3rem; height: 1.3rem; }
.fiche.f1 { transform: translate(-78%, -50%) rotate(-8deg); }
.fiche.f2 { transform: translate(-50%, -50%); z-index: 1; color: var(--bleu-600); }
.fiche.f3 { transform: translate(-22%, -50%) rotate(8deg); }
.drop:hover .fiche, .drop.over .fiche { box-shadow: 0 10px 24px rgba(8, 42, 102, .14); }
.drop.over .fiche.f1 { transform: translate(-118%, -50%) rotate(-13deg) scale(1.06); color: var(--marine); }
.drop.over .fiche.f2 { transform: translate(-50%, -58%) scale(1.18); }
.drop.over .fiche.f3 { transform: translate(18%, -50%) rotate(13deg) scale(1.06); color: var(--marine); }

.drop-titre { font-size: 1.05rem; font-weight: 700; color: var(--marine); }
.drop-sous { font-size: .86rem; color: var(--ink-mute); max-width: 32ch; }
.drop-pilule {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: .75rem;
  padding: .5rem .95rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: .82rem; font-weight: 600; color: var(--ink-soft);
}
.drop-pilule svg { width: .95rem; height: .95rem; color: var(--bleu-600); }
.drop .au-survol { display: none; }
.drop.over .au-repos { display: none; }
.drop.over .au-survol { display: inline; color: var(--bleu-700); }

@media (prefers-reduced-motion: reduce) {
  .drop-faisceau { animation: none; }
  .fiche, .drop { transition: none; }
}

.bento {
  display: grid; grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(12.5rem, auto); gap: 1rem;
}
.tuile {
  position: relative; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: 22px;
  padding: 1.6rem; display: flex; flex-direction: column;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, border-color .3s ease;
}
.tuile:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(8, 42, 102, .10); border-color: var(--bleu-200); }
.tuile h3 { font-size: 1.12rem; margin: .95rem 0 .45rem; }
.tuile p { font-size: .92rem; color: var(--ink-soft); }
.t-badge {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: 11px; background: var(--bleu-100); color: var(--bleu-600);
}
.t-badge svg { width: 1.2rem; height: 1.2rem; }

.t-levier { grid-column: span 4; grid-row: span 2; background: linear-gradient(145deg, #0B3380, var(--marine) 60%, #061D4A); border-color: transparent; }
.t-levier h3 { color: #fff; font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.t-levier p { color: var(--sur-sombre); max-width: 44ch; }
.t-levier .t-badge { background: rgba(255, 255, 255, .12); color: #fff; }
.t-risque { grid-column: span 2; }
.t-temps { grid-column: span 2; }
.t-simple { grid-column: span 3; }
.t-securite { grid-column: span 3; }

.histo {
  margin-top: auto; padding-top: 1.6rem;
  display: flex; align-items: flex-end; gap: .7rem; height: 11rem;
}
.histo span {
  position: relative; flex: 1; height: var(--h); border-radius: 9px 9px 3px 3px;
  background: linear-gradient(180deg, rgba(91, 157, 255, .55), rgba(91, 157, 255, .18));
  transform-origin: bottom; transform: scaleY(1);
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}
.histo span.fort { background: linear-gradient(180deg, #34D399, var(--vert)); box-shadow: 0 0 24px rgba(16, 185, 129, .35); }
.histo i {
  position: absolute; bottom: -1.35rem; left: 50%; transform: translateX(-50%);
  font-style: normal; font-size: .7rem; color: var(--sur-sombre-mute); white-space: nowrap;
}
.reveler-actif .t-levier:not(.vu) .histo span { transform: scaleY(.08); }
.histo span:nth-child(1) { transition-delay: .15s; } .histo span:nth-child(2) { transition-delay: .22s; }
.histo span:nth-child(3) { transition-delay: .29s; } .histo span:nth-child(4) { transition-delay: .36s; }
.histo span:nth-child(5) { transition-delay: .43s; } .histo span:nth-child(6) { transition-delay: .5s; }
.t-legende { margin-top: 1.8rem; font-size: .72rem !important; color: var(--sur-sombre-mute) !important; }

.t-gros { display: block; margin-top: .9rem; font-size: 2.6rem; font-weight: 820; letter-spacing: -.04em; color: var(--vert); line-height: 1; }
.t-risque h3 { margin-top: .55rem; }

.liste-coches { list-style: none; margin-top: 1rem; display: grid; gap: .55rem; }
.liste-coches li {
  position: relative; padding-left: 1.7rem; font-size: .9rem; color: var(--ink);
}
.liste-coches li::before {
  content: ""; position: absolute; left: 0; top: .15rem; width: 1.1rem; height: 1.1rem;
  border-radius: 50%; background: var(--vert)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 62% no-repeat;
  transform: scale(1); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1) calc(.3s + var(--i) * 110ms);
}
.reveler-actif .t-simple:not(.vu) .liste-coches li::before { transform: scale(0); }

.cadenas { position: absolute; right: 1.3rem; bottom: 1.2rem; display: flex; gap: .35rem; }
.t-securite { padding-bottom: 2.6rem; }
.cadenas i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--vert); opacity: .25; animation: veille 1.8s ease-in-out infinite; }
.cadenas i:nth-child(2) { animation-delay: .25s; } .cadenas i:nth-child(3) { animation-delay: .5s; }
@keyframes veille { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

@media (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .t-levier { grid-column: span 2; grid-row: auto; }
  .t-risque, .t-temps { grid-column: span 1; }
  .t-simple, .t-securite { grid-column: span 2; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .t-levier, .t-risque, .t-temps, .t-simple, .t-securite { grid-column: auto; }
  .histo { height: 8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tuile, .histo span, .liste-coches li::before { transition: none; }
  .cadenas i { animation: none; opacity: .8; }
}

:root { interpolate-size: allow-keywords; }
.qa::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .38s cubic-bezier(.22, 1, .36, 1), content-visibility .38s allow-discrete;
}
.qa[open]::details-content { block-size: auto; }
.qa summary { transition: color .2s ease; }
@media (prefers-reduced-motion: reduce) { .qa::details-content { transition: none; } }

.cube-scene { height: auto; }
.cube-illu {
  width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto;
  animation: flotter 6s ease-in-out infinite;
}
@keyframes flotter { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .cube-illu { animation: none; } }


.nav {
  background: rgba(255, 255, 255, .72); border-bottom-color: transparent;
  transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.nav .wrap.nav-rang {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1rem; height: 76px; transition: height .25s ease;
}
.nav.defile { background: rgba(255, 255, 255, .94); border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(8, 42, 102, .06); }
.nav.defile .wrap.nav-rang { height: 64px; }

.nav nav.nav-liens { margin: 0; justify-self: center; display: flex; align-items: center; gap: .25rem; }
.nav nav.nav-liens a.lnk { padding: .5rem .8rem; border-radius: 9px; transition: background-color .2s ease, color .2s ease; }
.nav nav.nav-liens a.lnk:hover { background: var(--bleu-50); color: var(--bleu-700); }
.nav-actions { justify-self: end; display: flex; align-items: center; gap: 1.1rem; }
.nav-actions .lnk.connexion { font-size: .95rem; font-weight: 620; color: var(--bleu-700); white-space: nowrap; }
.nav-actions .lnk.connexion:hover { color: var(--bleu-600); }

.burger {
  display: none; place-items: center; width: 44px; height: 44px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--marine); cursor: pointer;
}
.burger svg { width: 22px; height: 22px; transition: transform .35s ease; }
.burger-trait { stroke-dasharray: 12 63; transition: stroke-dasharray .35s ease, stroke-dashoffset .35s ease; }
.nav.menu-ouvert .burger svg { transform: rotate(-45deg); }
.nav.menu-ouvert .burger-trait { stroke-dasharray: 20 300; stroke-dashoffset: -32.42px; }
.burger:focus-visible { outline: 3px solid rgba(0, 102, 255, .3); outline-offset: 2px; }

.menu-mobile { display: none; }

@media (max-width: 980px) {
  .nav .wrap.nav-rang { grid-template-columns: 1fr auto; }
  .nav nav.nav-liens, .nav-actions .lnk.connexion { display: none; }
  .burger { display: inline-grid; }
  .menu-mobile {
    display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
    position: absolute; top: 100%; left: 0; right: 0; height: calc(100dvh - 64px);
    padding: 1.4rem 24px 2rem; background: #fff;  
    border-top: 1px solid var(--line);
    opacity: 0; visibility: hidden; transform: scale(.985); transform-origin: top center;
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  }
  .nav.menu-ouvert .menu-mobile {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .22s ease, transform .22s ease, visibility 0s;
  }
  .nav.menu-ouvert { background: #fff; }
  .nav nav.menu-liens { display: grid; margin: 0; gap: 0; }
  .menu-liens a {
    padding: 1rem .4rem; font-size: 1.12rem; font-weight: 620; color: var(--marine);
    border-bottom: 1px solid var(--line-soft);
  }
  .menu-actions { display: grid; gap: .7rem; }
  .menu-mobile .btn-contour { display: flex; min-height: 50px; }
  .menu-mobile .btn-shiny { min-height: 52px; font-size: 1rem; padding: .9rem 1.4rem; }
}
@media (max-width: 420px) {
  .nav-actions { gap: .5rem; }
  .nav-actions .btn-shiny { padding: .62rem .85rem; font-size: .8rem; }
  .brand .mot { font-size: 1.05rem; }
  .brand img { height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav, .nav .wrap.nav-rang, .menu-mobile, .burger svg, .burger-trait { transition: none; }
}

.fichier-ligne {
  display: flex; align-items: center; gap: .85rem; text-align: left;
  padding: .9rem; border: 1px solid var(--line); border-radius: 14px; background: #fff;
  box-shadow: 0 2px 8px rgba(8, 42, 102, .04);
}
.fichier-type {
  display: grid; place-items: center; width: 42px; height: 48px; flex-shrink: 0;
  border-radius: 9px; background: var(--bleu-100); color: var(--bleu-700);
  font-size: .68rem; font-weight: 780; letter-spacing: .04em;
}
.fichier-infos { flex: 1; min-width: 0; }
.fichier-nom { font-size: .9rem; font-weight: 640; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fichier-etat { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .15rem; font-size: .78rem; color: var(--ink-mute); }
.fichier-etat #simProgTxt { color: var(--bleu-700); }
.fichier-ligne .jauge { margin-top: .55rem; }
.fichier-ligne .spin { width: 22px; height: 22px; border-width: 2.5px; margin: 0; flex-shrink: 0; }

.sim-erreur { display: none; text-align: center; padding: 1.8rem .6rem 1rem; }
.sim-erreur.show { display: block; animation: rise .4s ease both; }
.err-ic {
  display: grid; place-items: center; width: 50px; height: 50px; margin: 0 auto .9rem;
  border-radius: 50%; background: rgba(220, 38, 38, .09); color: #B91C1C;
}
.err-ic svg { width: 24px; height: 24px; }
.err-titre { font-size: 1.04rem; font-weight: 700; color: var(--ink); }
.err-detail { max-width: 38ch; margin: .45rem auto 1.3rem; font-size: .9rem; color: var(--ink-mute); line-height: 1.5; }

.succes-ligne {
  display: flex; align-items: center; gap: .45rem; width: fit-content; margin: 0 auto .7rem;
  padding: .32rem .8rem .32rem .38rem; border-radius: 999px;
  background: rgba(16, 185, 129, .1); color: #067A55; font-size: .82rem; font-weight: 660;
}
.succes-ic { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--vert); color: #fff; }
.succes-ic svg { width: 12px; height: 12px; }

.frise {
  position: relative; list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: .4rem;
}
.frise::before {
  content: ""; position: absolute; top: 18px;
  left: 18px; right: calc(25% - .9rem - 18px);
  border-top: 1.5px dashed var(--bleu-200);
}
.frise-etape { display: flex; flex-direction: column; }
.frise-noeud {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 36px; height: 36px; margin-bottom: 1rem; border-radius: 50%;
  background: #fff; border: 1px solid var(--bleu-200); color: var(--bleu-700);
  font-family: inherit; font-size: .8rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  box-shadow: 0 1px 3px rgba(8, 42, 102, .08);
}
.frise-carte {
  flex: 1; display: flex; flex-direction: column; gap: .8rem;
  padding: 1.15rem; border-radius: 16px;
  background: var(--bleu-50); border: 1px solid var(--line);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, border-color .3s ease;
}
.frise-carte:hover { transform: translateY(-3px); border-color: var(--bleu-200); box-shadow: 0 14px 30px rgba(8, 42, 102, .08); }
.frise-ic {
  display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 10px; background: #fff; border: 1px solid var(--line); color: var(--bleu-600);
}
.frise-ic svg { width: 19px; height: 19px; }
.frise-carte h3 { font-size: 1rem; margin-bottom: .35rem; }
.frise-carte p { font-size: .88rem; color: var(--ink-soft); line-height: 1.5; }  

@media (max-width: 1000px) {
  .frise { grid-template-columns: 1fr; gap: 1rem; padding-left: 3rem; }
  .frise::before { top: 8px; bottom: 8px; left: 17px; right: auto; border-top: 0; border-left: 1.5px dashed var(--bleu-200); }
  .frise-etape { position: relative; }
  .frise-noeud { position: absolute; left: -3rem; top: .95rem; margin: 0; }
  .frise-carte { flex-direction: row; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .frise-carte { transition: none; } }

.foot { padding: 3.25rem 0 2rem; }
.foot-grille { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 2.5rem; }
.foot-marque p { max-width: 34ch; margin: 1rem 0 1.5rem; font-size: .92rem; line-height: 1.6; color: var(--sur-sombre-mute); }
.foot .foot-cta { --fond: #0B3380; --fond-subtil: #1A4FA8; }
.foot-titre { margin-bottom: 1rem; font-size: .92rem; font-weight: 640; color: #fff; }
.foot-col ul { list-style: none; display: grid; gap: .7rem; }
.foot-col a { font-size: .9rem; color: var(--sur-sombre-mute); transition: color .2s ease; }
.foot-col a:hover { color: #fff; }
.foot-bas {
  display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: start;
  margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, .1);
}
.foot-copy { font-size: .84rem; color: var(--sur-sombre-mute); white-space: nowrap; }
.foot-bas .mention { max-width: none; margin: 0; padding: 0; border: 0; font-size: .78rem; line-height: 1.6; color: var(--sur-sombre-mute); }
@media (max-width: 900px) {
  .foot-grille { grid-template-columns: repeat(3, 1fr); }
  .foot-marque { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .foot-grille { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .foot-bas { grid-template-columns: 1fr; gap: .8rem; }
}

@media (min-width: 981px) { .recup { grid-template-columns: 1.05fr 1fr 1fr; align-items: center; } }
.recup-illu img { width: 100%; height: auto; display: block; }
@media (max-width: 980px) { .recup-illu { width: 100%; max-width: 460px; margin: 0 auto; } }

.grappe { animation: grappe-flotte 3.2s ease-in-out infinite; }
@keyframes grappe-flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }

.grappe::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 5.4rem; height: 5.4rem; translate: -50% -50%;
  border-radius: 50%; background: radial-gradient(circle, rgba(0, 102, 255, .22), rgba(0, 102, 255, 0) 68%);
  filter: blur(6px); z-index: 0; pointer-events: none;
  animation: halo-respire 2.6s ease-in-out infinite;
}
@keyframes halo-respire {
  0%, 100% { opacity: .55; scale: .92; }
  50%      { opacity: 1;   scale: 1.08; }
}

.fiche.f1 { animation: fiche-gauche 3.2s ease-in-out infinite; }
.fiche.f3 { animation: fiche-droite 3.2s ease-in-out infinite; }
@keyframes fiche-gauche { 0%, 100% { translate: 0 0; } 50% { translate: -3px 1px; } }
@keyframes fiche-droite { 0%, 100% { translate: 0 0; } 50% { translate: 3px 1px; } }

.fiche.f2 { overflow: hidden; }
.fiche.f2::after {
  content: ""; position: absolute; left: 12%; right: 12%; height: 2px; top: 18%;
  border-radius: 2px; background: linear-gradient(90deg, transparent, var(--bleu-600), transparent);
  box-shadow: 0 0 8px rgba(0, 102, 255, .55);
  animation: ligne-lecture 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes ligne-lecture {
  0%   { top: 18%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 82%; opacity: 0; }
}

.drop.over .grappe::before { background: radial-gradient(circle, rgba(0, 102, 255, .38), rgba(0, 102, 255, 0) 70%); }
.drop.over .grappe { animation-duration: 1.5s; }

@media (prefers-reduced-motion: reduce) {
  .grappe, .grappe::before, .fiche.f1, .fiche.f3, .fiche.f2::after { animation: none; }
  .fiche.f2::after { display: none; }
}


.chiffre-ic { display: block; width: 52px; height: auto; margin-bottom: .85rem; }

.frise-ic.ic-3d { width: 52px; height: 52px; background: none; border: 0; border-radius: 0; }
.frise-ic.ic-3d img { width: 100%; height: auto; display: block; }
@media (max-width: 1000px) { .frise-ic.ic-3d { width: 46px; height: 46px; } }

.illu-livraison { position: relative; }
.illu-livraison::before {
  content: ""; position: absolute; inset: 8% 6%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(91, 157, 255, .28), rgba(91, 157, 255, 0));
  filter: blur(8px);
}



@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
section[id], [id].sc-portee { scroll-margin-top: 88px; }

.final .btn-shiny:focus-visible,
.foot .btn-shiny:focus-visible,
.bloc-marine .btn-shiny:focus-visible,
.bloc-marine .btn:focus-visible {
  box-shadow: inset 0 0 0 1px var(--fond-subtil, var(--marine)), 0 0 0 2px var(--marine), 0 0 0 5px var(--bleu-400);
  outline: none;
}

.protection-suite { display: flex; justify-content: center; margin-top: clamp(1.4rem, 3vw, 2rem); }
.protection-suite .fl { margin-left: .5rem; }