@font-face{font-family:Archivo;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(fonts/archivo-latin-wdth-normal.woff2) format("woff2")}
@font-face{font-family:Archivo;font-style:italic;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(fonts/archivo-latin-wdth-italic.woff2) format("woff2")}
@font-face{font-family:Alexandria;font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/alexandria-arabic-wght-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Alexandria;font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/alexandria-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-200B,U+2012-206F,U+20AC,U+2122,U+2212}

:root{
  --navy:#102E5C;
  --ink:#0F2444;
  --flame:#F26B12;
  --flame-hot:#FF8A2B;
  --steel:#1A6A9E;
  --kraft:#DDBC8E;
  --kraft-deep:#A87B3F;
  --green:#0A7D52;
  --red:#B3262E;
  --sky:#E8F2FB;
  --line:#CFDDEB;
  --slant:-9deg;
  --way:1;
  --body:Archivo,system-ui,sans-serif;
}
[dir=rtl]{--slant:9deg;--way:-1;--body:Alexandria,system-ui,sans-serif}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font:400 clamp(1.0625rem,.98rem + .3vw,1.1875rem)/1.55 var(--body);overflow-x:clip}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,figure,fieldset{margin:0;padding:0}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--steel);outline-offset:3px}
.hero :focus-visible,.money :focus-visible,.foot :focus-visible{outline-color:#fff}
.calc :focus-visible{outline-color:var(--ink)}
[id]{scroll-margin-top:92px}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,4vw,48px)}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 16px;z-index:60}
.skip:focus{top:12px}

h1,h2,h3,.facts b,.route__n,.ticket__net output,.btn,.zone strong{font-family:var(--body)}
h1,h2{font-style:italic;font-weight:900;font-stretch:118%;letter-spacing:-.018em;line-height:1.02;text-wrap:balance}
h2{font-size:clamp(2.05rem,1.3rem + 3vw,3.6rem)}
h3{font-size:1.2em;font-weight:800;line-height:1.2}
[dir=rtl] h1,[dir=rtl] h2{font-style:normal;font-stretch:100%;letter-spacing:0;line-height:1.3}
[dir=rtl] h3{line-height:1.45}

/* Boutons en parallélogramme, à l'angle des lettres du logo */
.btn{display:inline-block;border:0;border-radius:5px;padding:.82em 1.5em;font-size:1.06em;font-weight:800;text-decoration:none;cursor:pointer;transform:skewX(var(--slant));transition:background-color .15s,color .15s,border-color .15s}
.btn>span{display:block;transform:skewX(calc(var(--slant) * -1))}
.btn--flame{background:var(--flame);color:var(--ink)}
.btn--flame:hover{background:var(--flame-hot)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--steel)}
.btn--line{box-shadow:inset 0 0 0 2px #fff;color:#fff}
.btn--line:hover{background:#fff;color:var(--navy)}
.btn--small{padding:.55em 1.1em;font-size:.95em}

/* En-tête */
.top{position:sticky;top:0;z-index:40;background:#fff;box-shadow:0 1px 0 var(--line)}
.top__in{max-width:1320px;margin-inline:auto;padding:10px clamp(16px,4vw,48px);display:flex;align-items:center;gap:clamp(12px,2.2vw,32px)}
.top__logo img{height:52px;width:auto}
.top__nav{display:flex;gap:clamp(14px,2vw,30px);margin-inline-start:auto;font-size:.95em;font-weight:600}
.top__nav a,.top__lang{text-decoration:none;padding:6px 2px;border-bottom:2px solid transparent}
.top__nav a:hover,.top__lang:hover{border-bottom-color:var(--flame)}
.top__lang{font-weight:700;color:var(--steel)}

/* Ouverture */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;isolation:isolate}
.hero__in{max-width:1320px;margin-inline:auto;padding:clamp(24px,4vw,56px) clamp(16px,4vw,48px) clamp(28px,4vw,48px);display:grid;grid-template-columns:minmax(0,39fr) minmax(0,61fr);align-items:center;gap:clamp(20px,3vw,56px)}
.hero__art{grid-column:1;grid-row:1;position:relative;z-index:1}
.hero__text{grid-column:2;grid-row:1;position:relative;z-index:2}
.hero h1{font-size:clamp(2.4rem,.5rem + 5.1vw,5.6rem)}
.hero h1 span{display:block;white-space:nowrap}
[dir=rtl] .hero h1{font-size:clamp(3rem,1rem + 6vw,6.4rem)}
.hero__lead{margin-top:1.1em;max-width:34em;font-size:1.13em;color:#DCE8F6}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.6em}

.runner{position:relative;width:min(100%,600px);margin-inline:auto;animation:sprint .7s cubic-bezier(.18,.9,.3,1.12) both}
.runner img{width:100%;height:auto;filter:drop-shadow(0 18px 26px rgb(4 14 34/.5))}
[dir=rtl] .runner img{transform:scaleX(-1)}
.runner__tag{position:absolute;inset-inline-start:-1%;top:52%;display:grid;background:#fff;color:var(--ink);padding:.45em .85em .5em;border-radius:6px;border-inline-start:6px solid var(--flame);transform:rotate(calc(var(--way) * -5deg));box-shadow:0 10px 22px rgb(4 14 34/.4);line-height:1.15}
.runner__tag small{font-size:.74em;font-weight:600}
.runner__tag b{font-size:1.32em;font-weight:900}

.streaks{position:absolute;inset:0;z-index:-1}
.streaks i{position:absolute;inset-inline-end:62%;height:var(--h);top:var(--t);width:var(--w);background:var(--c);transform:skewX(var(--slant));transform-origin:right;border-radius:2px;animation:streak .6s ease-out both}
[dir=rtl] .streaks i{transform-origin:left}
.streaks i:nth-child(1){--t:18%;--h:12px;--w:62vw;--c:var(--flame)}
.streaks i:nth-child(2){--t:30%;--h:5px;--w:44vw;--c:#5FB4E6}
.streaks i:nth-child(3){--t:47%;--h:20px;--w:70vw;--c:var(--flame)}
.streaks i:nth-child(4){--t:68%;--h:7px;--w:48vw;--c:#fff}
.streaks i:nth-child(5){--t:84%;--h:14px;--w:58vw;--c:var(--steel)}
@keyframes sprint{from{transform:translateX(calc(var(--way) * -70vw))}to{transform:none}}
@keyframes streak{from{opacity:0;scale:.1 1}to{opacity:1;scale:1 1}}

/* Trois chiffres : coupes en biais comme les lettres du logo */
.facts{display:grid;grid-template-columns:repeat(3,1fr);background:linear-gradient(calc(90deg + var(--way) * 9deg),var(--steel) 0 33.4%,var(--flame) 33.4% 66.7%,var(--green) 66.7%)}
[dir=rtl] .facts{background:linear-gradient(calc(270deg - 9deg),var(--steel) 0 33.4%,var(--flame) 33.4% 66.7%,var(--green) 66.7%)}
.facts li{padding:clamp(20px,2.4vw,34px) clamp(16px,4vw,64px);color:#fff;display:grid;gap:.15em;align-content:center}
.facts li:nth-child(2){color:var(--ink)}
.facts b{font-size:clamp(1.8rem,1rem + 2.4vw,3rem);font-weight:900;font-style:italic;font-stretch:112%;line-height:1.05}
[dir=rtl] .facts b{font-size:clamp(1.55rem,.9rem + 1.9vw,2.5rem);font-style:normal;font-stretch:100%;line-height:1.35}

/* Quatre étapes */
.how{padding-block:clamp(64px,8vw,120px)}
.how h2{max-width:16em}
.route{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px);margin-top:clamp(40px,5vw,68px);position:relative}
.route::before{content:"";position:absolute;inset-inline:0;top:31px;border-top:3px dashed var(--line)}
.route li{position:relative}
.route__n{display:grid;place-items:center;width:62px;height:62px;background:var(--c);color:#fff;font-size:1.65em;font-weight:900;font-style:italic;border-radius:7px;transform:skewX(var(--slant));box-shadow:0 0 0 8px #fff}
[dir=rtl] .route__n{font-style:normal}
.route li:nth-child(3) .route__n{color:var(--ink)}
.route h3{margin-top:1.05em}
.route p{margin-top:.5em;max-width:24em;color:#35506F}

/* Calcul */
.calc{background:var(--flame);padding-block:clamp(64px,8vw,116px);overflow:hidden}
.calc__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(36px,6vw,96px);align-items:center}
.calc__lead{margin-top:.8em;font-size:1.08em}
.field{display:grid;gap:.35em;font-weight:700}
.field--price{margin-top:1.6em}
.price{display:flex;align-items:center;background:#fff;border-radius:6px;padding-inline:.7em;width:min(100%,290px)}
.price input{flex:1;min-width:0;border:0;background:none;font:900 2em/1.5 var(--body);color:var(--ink);padding:.05em 0;-moz-appearance:textfield;appearance:textfield}
.price input::-webkit-inner-spin-button{appearance:none}
.price input:focus{outline:none}
.price:focus-within{outline:3px solid var(--ink);outline-offset:2px}
.price em{font-style:normal;font-weight:800}
.zones{margin-top:1.4em;display:grid;gap:8px}
.zones legend{font-weight:700;margin-bottom:.4em}
.zones input{position:absolute;opacity:0}
.zones label{position:relative;display:block;cursor:pointer}
.zone{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:center;background:rgb(255 255 255/.88);border-radius:6px;padding:.7em 1em;transition:background-color .15s,color .15s}
.zone b{font-weight:800}
.zone small{grid-row:2;font-size:.84em;line-height:1.35;color:#37475E}
.zone strong{grid-row:1/3;grid-column:2;font-size:1.3em;font-weight:900;white-space:nowrap}
.zones label:hover .zone{background:#fff}
.zones input:checked+.zone{background:var(--navy);color:#fff}
.zones input:checked+.zone small{color:#C8D9EC}
.zones input:focus-visible+.zone{outline:3px solid var(--ink);outline-offset:2px}
.calc__note{margin-top:1.1em;font-size:.95em;max-width:36em}

.ticket{position:relative;background:#fff;border-radius:10px;padding:clamp(20px,2.6vw,32px);transform:rotate(calc(var(--way) * 1.6deg));box-shadow:0 28px 54px rgb(112 42 0/.42);width:min(100%,460px);justify-self:center}
.ticket__head{display:flex;justify-content:space-between;align-items:center;gap:14px}
.ticket__head img{width:132px;height:auto}
.ticket__stamp{border:3px solid var(--red);color:var(--red);border-radius:5px;padding:.25em .6em;font-size:.76em;font-weight:900;font-stretch:90%;line-height:1.2;text-align:center;transform:rotate(calc(var(--way) * 5deg));flex:none}
.ticket__rows{margin-top:1.2em;display:grid;gap:.5em}
.ticket__rows div{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.ticket__rows dt{color:#4A5D78}
.ticket__rows dd{font-weight:700;text-align:end}
.ticket__tear{position:relative;margin:1.1em calc(clamp(20px,2.6vw,32px) * -1);border-top:2px dashed var(--line)}
.ticket__tear::before,.ticket__tear::after{content:"";position:absolute;top:-13px;width:24px;height:24px;border-radius:50%;background:var(--flame)}
.ticket__tear::before{left:-12px}.ticket__tear::after{right:-12px}
.ticket__net{display:grid;gap:0;line-height:1.1}
.ticket__net span{font-weight:700}
.ticket__net output{font-size:clamp(3rem,2.2rem + 2.6vw,4.3rem);font-weight:900;font-style:italic;font-stretch:112%;color:var(--green);letter-spacing:-.015em}
[dir=rtl] .ticket__net output{font-style:normal;font-stretch:100%;line-height:1.3;letter-spacing:0}
.ticket__msg{margin-top:.4em;font-weight:700;color:var(--red)}
.ticket__bars{width:100%;height:46px;margin-top:1.1em;fill:var(--ink)}
.ticket__ref{text-align:center;font-size:.82em;font-weight:600;letter-spacing:.14em;margin-top:.35em;color:#4A5D78}

/* Argent */
.money{background:var(--navy);color:#fff;padding-block:clamp(64px,8vw,116px)}
.money__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,88px);align-items:center}
.pledges{margin-top:clamp(28px,3vw,44px);display:grid;gap:clamp(18px,2vw,26px)}
.pledges li{border-inline-start:6px solid var(--c);padding-inline-start:1em}
.pledges p{margin-top:.2em;color:#CFDFF1}
.sheet{background:#fff;color:var(--ink);border-radius:10px;padding:clamp(18px,2.4vw,30px);box-shadow:0 26px 52px rgb(3 12 30/.5)}
.sheet figcaption{display:grid;line-height:1.25}
.sheet figcaption small{font-size:.86em;color:#4A5D78}
.sheet figcaption b{font-size:1.4em;font-weight:900;font-style:italic;font-stretch:112%}
[dir=rtl] .sheet figcaption b{font-style:normal;font-stretch:100%;line-height:1.5}
.sheet__scroll{overflow-x:auto;margin-top:.9em}
.sheet table{width:100%;border-collapse:collapse;font-size:.93em}
.sheet th{white-space:nowrap;text-align:start;font-weight:600;color:#4A5D78;padding:.45em .5em .45em 0;border-bottom:2px solid var(--ink)}
[dir=rtl] .sheet th{padding:.45em 0 .45em .5em}
.sheet td{padding:.72em .5em .72em 0;border-bottom:1px solid var(--line);white-space:nowrap}
[dir=rtl] .sheet td{padding:.72em 0 .72em .5em}
.sheet tr>:last-child{text-align:end;padding-inline-end:0;font-weight:800;color:var(--green)}
.sheet td.neg{color:var(--red)!important}
.pill{display:inline-block;padding:.12em .65em;border-radius:99px;font-size:.88em;font-weight:700}
.pill--ok{background:#D5F2E5;color:#075E3E}
.pill--ko{background:#FBE0DF;color:#8E1B22}
.sheet tfoot th,.sheet tfoot td{border-bottom:0;padding-top:.85em;font-size:1.18em;font-weight:900;color:var(--ink)}
.sheet tfoot td{color:var(--green)}

/* Questions */
.faq{background:var(--sky);padding-block:clamp(64px,8vw,116px)}
.faq__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,6vw,88px);align-items:start}
.faq details{border-bottom:2px solid var(--line)}
.faq summary{position:relative;list-style:none;cursor:pointer;font-weight:750;padding:.9em 0;padding-inline-end:2em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;inset-inline-end:4px;top:1.25em;width:.6em;height:.6em;border-inline-end:3px solid var(--flame);border-bottom:3px solid var(--flame);transform:rotate(calc(var(--way) * 45deg));transition:transform .15s}
.faq details[open] summary::after{transform:translateY(.25em) rotate(calc(var(--way) * -135deg))}
.faq details p{padding-bottom:1.1em;max-width:36em;color:#2C4563}

/* Dernière étape : du carton et du scotch */
.start{position:relative;background:var(--kraft);padding-block:clamp(96px,10vw,140px) clamp(64px,8vw,104px);overflow:hidden}
.tape{position:absolute;top:30px;inset-inline:-4vw;display:flex;gap:2.6em;background:var(--flame);color:var(--ink);padding:.5em 1em;font-weight:900;font-style:italic;font-stretch:115%;white-space:nowrap;transform:rotate(calc(var(--way) * -1.3deg));box-shadow:0 3px 8px rgb(90 60 20/.3)}
.start__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center}
.start__text p{margin-top:1em;font-size:1.13em;max-width:28em}
.lead{background:#fff;border-radius:10px;padding:clamp(20px,3vw,36px);display:grid;grid-template-columns:1fr 1fr;gap:16px;box-shadow:0 22px 44px rgb(90 60 20/.35)}
.lead .field span{font-size:.94em}
.lead input,.lead select{width:100%;font:500 1.03em/1.3 var(--body);color:var(--ink);background:#fff;border:2px solid #A9BDD2;border-radius:6px;padding:.68em .75em}
.lead input::placeholder{color:#6A7D95}
[dir=rtl] .lead input[type=tel]{text-align:right}
.lead input:focus,.lead select:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px rgb(26 106 158/.25)}
.lead input[aria-invalid=true],.lead select[aria-invalid=true]{border-color:var(--red)}
.err{font-style:normal;font-size:.86em;font-weight:600;color:var(--red)}
.hp{position:absolute!important;inset-inline-start:-9999px;width:1px!important;height:1px}
.lead .btn{grid-column:1/-1;justify-self:start;margin-top:4px}
.lead .btn[disabled]{opacity:.65;cursor:wait}
.lead__msg{grid-column:1/-1;font-weight:700;padding:.7em 1em;border-radius:6px}
.lead__msg.is-ok{background:#D5F2E5;color:#075E3E}
.lead__msg.is-ko{background:#FBE0DF;color:#8E1B22}
.lead__legal{grid-column:1/-1;font-size:.84em;color:#4A5D78}

.foot{background:var(--ink);color:#CFDFF1;padding-block:30px;font-size:.95em}
.foot__in{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot b{color:#fff;font-weight:800}

.wa{position:fixed;inset-block-end:18px;inset-inline-end:18px;z-index:50;background:#128C4B;color:#fff;font-weight:800;text-decoration:none;padding:.7em 1.15em;border-radius:99px;box-shadow:0 10px 24px rgb(0 0 0/.3)}

@media (max-width:1020px){
  .top__nav{display:none}
  .top__lang{margin-inline-start:auto}
  .route{grid-template-columns:repeat(2,1fr)}
  .route::before{display:none}
  .calc__grid,.money__grid,.faq__grid,.start__grid{grid-template-columns:minmax(0,1fr)}
  .ticket{justify-self:center}
}
@media (max-width:760px){
  .hero__in{grid-template-columns:minmax(0,1fr)}
  .hero__art,.hero__text{grid-column:1}
  .hero__art{grid-row:2}
  .hero h1{font-size:11.1vw}
  [dir=rtl] .hero h1{font-size:14vw}
  .runner{width:min(84%,400px)}
  .runner__tag{font-size:.85em}
  .streaks i{inset-inline-end:68%}
  .facts{grid-template-columns:minmax(0,1fr);background:none}
  .facts li{background:var(--steel);padding-block:18px}
  .facts li:nth-child(2){background:var(--flame)}
  .facts li:nth-child(3){background:var(--green)}
  .top__logo img{height:42px}
}
@media (max-width:560px){
  .route{grid-template-columns:minmax(0,1fr);gap:0}
  .route li{display:grid;grid-template-columns:62px minmax(0,1fr);column-gap:18px;padding-bottom:28px;position:relative}
  .route li:not(:last-child)::before{content:"";position:absolute;inset-inline-start:30px;top:62px;bottom:0;border-inline-start:3px dashed var(--line)}
  .route__n{grid-row:1/3}
  .route h3{margin-top:.1em}
  .lead{grid-template-columns:minmax(0,1fr)}
  .sheet thead th:nth-child(2),.sheet tbody td:nth-child(2){display:none}
  .sheet tbody td:nth-child(3){white-space:normal}
  .sheet tfoot td:empty{display:none}
  .sheet table{font-size:.88em}
  .lead .btn{justify-self:stretch;text-align:center}
  .hero__cta .btn{flex:1 1 auto;text-align:center}
  .btn--small{padding:.5em .85em;font-size:.88em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}