/* Encore · L'objet v2 — socle : jetons, mise en page, navigation, héros, la carte.
   DA « La carte » : safran, encre, papier. Un seul accent par écran. */

:root{
  --safran:#F0A81C; --safran-clair:#FFC64D; --safran-fonce:#C4820A;
  --safran-soft:#FDF2D9; --safran-voile:#FEF9EE;
  --encre:#101E36; --encre-2:#2B3E5E; --encre-3:#66789A; --encre-4:#9DA9BF;
  --encre-p:#16274A; --encre-l:#223659;
  --papier:#FBF9F4; --blanc:#FFFFFF; --ligne:#E8E2D6; --ligne-2:#D6CEBE;
  --valide:#2E7D5B; --valide-soft:#E3F2EA; --refus:#BE4430;
  --sh1:0 1px 2px rgba(16,30,54,.06), 0 4px 12px rgba(16,30,54,.05);
  --sh2:0 2px 6px rgba(16,30,54,.08), 0 18px 44px rgba(16,30,54,.12);
  --sh3:0 30px 70px rgba(16,30,54,.22);
  --dis:"Epilogue",system-ui,sans-serif;
  --txt:"Plus Jakarta Sans",system-ui,sans-serif;
  --carte:"Instrument Serif",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --kufi:"Noto Kufi Arabic","Tajawal",sans-serif;
  --wrap:none; /* pleine largeur (décision user) : seules les marges latérales restent */
  --gout:clamp(18px,4.5vw,88px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --rebond:cubic-bezier(.34,1.56,.64,1);
  --acc:var(--safran);--acc-l:var(--safran-clair);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--papier);color:var(--encre);font-family:var(--txt);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
:focus-visible{outline:2.5px solid var(--safran-fonce);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gout)}
.bande{position:relative}
.bande-encre{background:var(--encre);color:var(--blanc)}
.bande-safran{background:var(--safran);color:var(--encre)}
section{padding-block:clamp(72px,9vw,128px)}
:where(.hero,.portes,.argent,.calcul,.comptoir,.pilotage,.carton,.enseignes,.grille,.demo,.inclus,.reste-l) > *{min-width:0}

/* ---- Typographie ---- */
h1,h2,h3{font-family:var(--dis);letter-spacing:-.035em;text-wrap:balance;line-height:1}
h1{font-weight:800;font-size:clamp(46px,5.2vw,100px)}
h2{font-weight:800;font-size:clamp(34px,4.2vw,76px)}
h3{font-weight:700;font-size:clamp(20px,1.9vw,26px);letter-spacing:-.02em;line-height:1.15}
p{max-width:62ch}
.lead{font-size:clamp(18px,1.45vw,21px);color:var(--encre-2);line-height:1.5}
.bande-encre .lead{color:rgba(255,255,255,.72)}
.eyebrow{font-family:var(--dis);font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-3)}
.bande-encre .eyebrow{color:var(--safran-clair)}
.bande-safran .eyebrow{color:var(--encre-2)}
.num{font-variant-numeric:tabular-nums}
.ar{font-family:var(--kufi);direction:rtl;unicode-bidi:isolate}
.titre{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(40px,5vw,72px)}

/* ---- Boutons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 24px;border-radius:14px;
  font-family:var(--dis);font-weight:700;font-size:16px;letter-spacing:-.01em;white-space:nowrap;
  transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .15s}
.btn-safran{background:var(--safran);color:var(--encre);box-shadow:0 3px 0 var(--safran-fonce)}
.btn-safran:hover{background:var(--safran-clair);transform:translateY(-1px);box-shadow:0 4px 0 var(--safran-fonce)}
.btn-safran:active{transform:translateY(2px);box-shadow:0 1px 0 var(--safran-fonce)}
.btn-encre{background:var(--encre);color:#fff;box-shadow:0 3px 0 #050B16}
.btn-encre:hover{background:var(--encre-l)}
.btn-ligne{box-shadow:inset 0 0 0 1.5px var(--ligne-2);color:var(--encre)}
.btn-ligne:hover{box-shadow:inset 0 0 0 1.5px var(--encre)}
.btn svg{width:18px;height:18px}

/* ---- Navigation ---- */
.nav{position:sticky;top:0;z-index:50;background:rgba(251,249,244,.82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s}
.nav.defile{border-color:var(--ligne)}
.nav .wrap{max-width:var(--wrap);display:flex;align-items:center;justify-content:space-between;gap:24px;height:78px}
.nav .logo img{height:30px;width:auto}
.nav .liens{display:flex;gap:32px;font-family:var(--dis);font-weight:600;font-size:15.5px}
.nav .liens a{color:var(--encre-2);padding:6px 0;background:linear-gradient(var(--safran),var(--safran)) 0 100%/0 2px no-repeat;transition:background-size .25s var(--ease),color .2s}
.nav .liens a:hover{color:var(--encre);background-size:100% 2px}
.nav .droite{display:flex;align-items:center;gap:12px}
.nav .lang{font-family:var(--kufi);font-weight:700;font-size:15px;color:var(--encre-2);padding:9px 13px;border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--ligne-2)}
.nav .btn{height:46px;padding:0 18px;font-size:15px}
@media (max-width:980px){.nav .liens{display:none}}
@media (max-width:480px){.nav .lang{display:none}}

/* ---- Héros ---- */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center;padding-block:clamp(40px,6vw,88px) clamp(72px,8vw,120px)}
.hero .texte{display:flex;flex-direction:column;gap:26px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:1020px){.hero{grid-template-columns:1fr}}

/* Le réglage du visiteur : son métier et son enseigne */
.reglage{background:var(--blanc);border:1px solid var(--ligne);border-radius:20px;padding:18px 18px 16px;box-shadow:var(--sh1);display:flex;flex-direction:column;gap:14px;max-width:560px}
.reglage .ligne{display:grid;grid-template-columns:112px 1fr;gap:12px;align-items:center}
.reglage .lib{font-family:var(--dis);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-3)}
.metiers{display:flex;flex-wrap:wrap;gap:6px}
.metiers label{position:relative}
.metiers input{position:absolute;opacity:0;inset:0;cursor:pointer}
.metiers span{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;border-radius:11px;font-weight:600;font-size:14.5px;color:var(--encre-2);
  box-shadow:inset 0 0 0 1.5px var(--ligne);transition:background .18s,color .18s,box-shadow .18s;white-space:nowrap}
.metiers span svg{width:16px;height:16px;flex:none}
.metiers label:hover span{box-shadow:inset 0 0 0 1.5px var(--ligne-2)}
.metiers input:checked + span{background:var(--encre);color:#fff;box-shadow:none}
.metiers input:focus-visible + span{outline:2.5px solid var(--safran-fonce);outline-offset:2px}
.reglage input[type=text]{height:42px;border-radius:11px;border:1.5px solid var(--ligne);background:var(--papier);padding:0 14px;font-size:15.5px;font-weight:600;width:100%}
.reglage input[type=text]:focus{outline:none;border-color:var(--encre)}
@media (max-width:520px){.reglage .ligne{grid-template-columns:1fr;gap:8px}}

/* La scène du héros : la carte qui suit la souris */
.scene-heros{position:relative;min-height:560px;display:grid;place-items:center;perspective:1400px}
.scene-heros .pivot{position:relative;transform-style:preserve-3d;transition:transform .5s var(--ease)}
.scene-heros .objet.devant{--cw:520px;transform:rotate(-5deg);z-index:2}
.scene-heros .objet.derriere{--cw:430px;position:absolute;inset-inline-start:26%;top:-26%;transform:rotate(7deg);z-index:1;
  --f1:#243B63;--f2:#16274A;--f3:#0D1A33}
.scene-heros .notif{position:absolute;inset-inline-start:-12%;bottom:-22%;z-index:12}
@media (max-width:1020px){.scene-heros{min-height:400px}.scene-heros .objet.devant{--cw:440px}.scene-heros .objet.derriere{--cw:380px}}
@media (max-width:560px){.scene-heros{min-height:0;padding-bottom:10px}.scene-heros .pivot{display:flex;flex-direction:column;align-items:center;gap:22px}.scene-heros .objet.devant{--cw:330px}.scene-heros .objet.derriere{display:none}.scene-heros .notif{position:relative;inset:auto}}

/* ---- La carte, objet de la charte ---- */
.objet{--cw:340px;--n:8;--f1:#1B2B4B;--f2:var(--encre);--f3:#0A1428;--acc:var(--safran);--acc-l:var(--safran-clair);
  position:relative;width:var(--cw);max-width:100%;aspect-ratio:1.586;border-radius:calc(var(--cw)*.056);
  background:radial-gradient(120% 90% at 18% 0%,color-mix(in srgb,var(--acc) 32%,transparent),transparent 52%),linear-gradient(160deg,var(--f1) 0%,var(--f2) 48%,var(--f3) 100%);
  color:#fff;padding:calc(var(--cw)*.068);display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 2px 4px rgba(16,30,54,.2),var(--sh3),inset 0 1px 0 rgba(255,255,255,.12);overflow:hidden;flex:none}
.objet::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,0) 36%);pointer-events:none}
.objet .haut{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.objet .enseigne{font-family:var(--carte);font-size:calc(var(--cw)*.078);line-height:1.02;overflow-wrap:anywhere;max-width:70%}
.objet .marque{display:flex;align-items:center;gap:calc(var(--cw)*.014);font-family:var(--dis);font-weight:700;font-size:calc(var(--cw)*.03);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);white-space:nowrap}
.objet .marque svg{width:calc(var(--cw)*.05);height:calc(var(--cw)*.05)}
.objet .milieu{display:flex;flex-direction:column;gap:calc(var(--cw)*.022)}
.objet .compte{font-family:var(--carte);font-size:calc(var(--cw)*.11);color:var(--acc-l);line-height:.9}
.objet .compte small{font-size:.42em;color:rgba(255,255,255,.5);font-family:var(--txt);margin-inline-start:.15em}
.rang{display:grid;grid-template-columns:repeat(var(--n),minmax(0,calc(var(--cw)*.066)));gap:calc(var(--cw)*.02);justify-content:start}
.pastille{aspect-ratio:1;border-radius:50%;width:100%}
.pastille.on{background:var(--acc);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.pastille.off{border:1.5px dashed rgba(255,255,255,.3)}
.pastille.cadeau{border:1.5px dashed var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent)}
.objet .bas{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.objet .lib{font-size:calc(var(--cw)*.028);letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.46);font-weight:700}
.objet .val{font-size:calc(var(--cw)*.046);font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.objet .bas > div:last-child{text-align:end}

/* La notification qui accompagne la carte */
.notif{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.96);border-radius:18px;padding:12px 14px;box-shadow:var(--sh2);width:min(330px,88vw);border:1px solid var(--ligne)}
.notif img{width:34px;height:34px;border-radius:10px;flex:none}
.notif b{display:flex;justify-content:space-between;gap:8px;font-size:13.5px}
.notif b time{font-weight:500;color:var(--encre-3);font-size:12px}
.notif p{font-size:13.5px;line-height:1.4;color:var(--encre-2)}
.notif p .ar{display:block;margin-top:2px}

/* ---- La pile : une carte par métier. La carte est la commande. ---- */
.hero .mecaniques{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px;font-size:15px;color:var(--encre-3)}
.hero .mecaniques b{color:var(--encre);font-weight:600}
.pile{--cw:clamp(440px,34vw,620px);position:relative;width:var(--cw);max-width:100%;aspect-ratio:1.586;margin-top:calc(var(--cw) * .34)}
.pile .carte-pile{--cw:inherit;position:absolute;inset:0;width:100%;transform-origin:50% 100%;cursor:pointer;
  transform:translate(calc(var(--k,0) * 4%),calc(var(--k,0) * -21%)) scale(calc(1 - var(--k,0) * .045)) rotate(-4deg);
  z-index:calc(10 - var(--k,0));transition:transform .7s var(--ease),filter .4s,translate .25s var(--ease)}
.pile .carte-pile[aria-checked="false"]{filter:brightness(.88)}
.pile .carte-pile[aria-checked="false"]:hover{translate:0 -12px;filter:none}
.pile .carte-pile[aria-checked="true"]{cursor:default}
.pile .carte-pile:focus-visible{outline:2.5px solid var(--safran);outline-offset:4px}
.carte-pile .onglet{position:absolute;top:calc(var(--cw) * .026);inset-inline-end:calc(var(--cw) * .05);display:none;align-items:center;gap:.5em;font-family:var(--dis);font-weight:700;font-size:calc(var(--cw) * .028);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.13);padding:.5em .85em;border-radius:999px;white-space:nowrap}
.carte-pile .onglet svg{width:1.35em;height:1.35em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.carte-pile[aria-checked="false"] .onglet{display:inline-flex}
.carte-pile[aria-checked="false"] .marque{display:none}
.carte-pile[aria-checked="false"] .enseigne{visibility:hidden}
.carte-pile .enseigne{display:flex;align-items:center;gap:.25em;max-width:74%}
.nom-carte{font-family:var(--carte);font-size:1em;color:#fff;background:transparent;border:0;border-bottom:1.5px dashed transparent;padding:0;field-sizing:content;width:auto;max-width:100%;min-width:3ch;line-height:1.12;text-overflow:ellipsis}
.nom-carte::placeholder{color:#fff;opacity:1}
.carte-pile[aria-checked="false"] .nom-carte{pointer-events:none}
.carte-pile[aria-checked="true"] .nom-carte{cursor:text}
.carte-pile[aria-checked="true"] .nom-carte:hover,.carte-pile .nom-carte:focus{outline:none;border-bottom-color:rgba(255,255,255,.5)}
.carte-pile .crayon{width:.58em;height:.58em;flex:none;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;opacity:.55;transition:opacity .2s}
.carte-pile[aria-checked="false"] .crayon{display:none}
.carte-pile[aria-checked="true"]:hover .crayon,.carte-pile .nom-carte:focus + .crayon{opacity:1}
@keyframes donne{from{opacity:0;translate:0 60px}}
.scene-heros.joue .carte-pile{animation:donne .8s var(--ease) backwards;animation-delay:calc((3 - var(--k,0)) * 110ms)}
@media (max-width:1020px){.pile{--cw:440px}}
@media (max-width:560px){.pile{--cw:320px}.scene-heros .notif{position:relative;inset:auto}}
@media (prefers-reduced-motion:reduce){.pile .carte-pile{transition:none}}

/* Le nom dans une phrase : toujours le mot dessiné, pour ne jamais le lire comme l'adverbe */
.mot-encore{display:inline-block;height:.8em;width:auto;vertical-align:-.07em;margin-inline:.06em}

/* Le O du logo de l'en-tête : les tampons se posent (2026-09-15) */
.nav .logo-svg{height:30px;width:auto;display:block;overflow:visible}
.logo-svg .pt{transform-box:fill-box;transform-origin:center}
.js .logo.pose .pt{animation:tampon-pose .46s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i) * 90ms + 120ms)}
.js .logo.pose .pt.safran{animation-duration:.62s}
@keyframes tampon-pose{0%{opacity:0;transform:scale(.15)}55%{opacity:1}100%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.js .logo.pose .pt{animation:none}}