/* =================================================================
   ARTHEMIS — "Ink & Signal"
   Chalk paper · three accent-coded poles · marigold price signal
   Bricolage Grotesque (display) · Inter (body) · Space Mono (data)
   Hooks aligned to assets/js/main.js (.visible / .is-open / .toc-wrap.open)
   ================================================================= */

:root{
  --chalk:#EDEAE3; --chalk-2:#E4E0D7; --ink:#17161A; --ink-soft:#565349;
  --line:#CFCBC1; --line-soft:#DAD6CC; --paper:#F6F4EF; --white:#FFFFFF;
  --marigold:#C88512;
  --klein:#1F2ACB;  /* Arthemis-360 */
  --hunt:#0E7C66;   /* Arthemis-IT  */
  --create:#B4740E; /* Arthemis 2.0 */
  --accent:var(--klein); --accent-deep:#171FA0;
  --f-display:"Bricolage Grotesque",Georgia,serif;
  --f-body:"Inter",system-ui,sans-serif;
  --f-mono:"Space Mono",ui-monospace,monospace;
  --maxw:1180px; --gut:clamp(20px,5vw,64px); --radius:14px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
.pole-360{--accent:var(--klein);--accent-deep:#171FA0}
.pole-it {--accent:var(--hunt);--accent-deep:#0A5B4B}
.pole-20 {--accent:var(--create);--accent-deep:#8A5906}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--chalk);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.modal-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:800;line-height:1.03;letter-spacing:-.02em}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent)}

/* HEADER */
.site-head{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--chalk) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line-soft)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{font-family:var(--f-display);font-weight:800;font-size:22px;letter-spacing:-.03em;text-decoration:none}
.brand span{color:var(--klein)}
.nav{display:flex;gap:26px;align-items:center}
.nav > a,.menu-dd > summary{font-family:var(--f-mono);font-size:13px;letter-spacing:.02em;text-decoration:none;color:var(--ink-soft);transition:color .2s;cursor:pointer}
.nav > a:hover,.menu-dd > summary:hover{color:var(--ink)}
.nav .nav-cta{color:#fff;background:var(--klein);padding:8px 16px;border-radius:999px}
.nav .nav-cta:hover{background:var(--accent-deep);color:#fff}
.menu-dd{position:relative}
.menu-dd > summary{list-style:none;display:inline-flex;align-items:center;gap:6px}
.menu-dd > summary::-webkit-details-marker{display:none}
.menu-dd > summary::after{content:"▾";color:var(--klein);font-size:11px}
.menu-dd[open] > summary::after{content:"▴"}
.dd-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);background:var(--white);border:1px solid var(--line);border-radius:12px;padding:8px;min-width:300px;box-shadow:0 20px 44px -22px rgba(23,22,26,.5)}
.dd-panel a{display:flex;gap:10px;align-items:baseline;text-decoration:none;color:var(--ink);font-family:var(--f-body);font-size:14px;padding:9px 11px;border-radius:8px;transition:background .15s}
.dd-panel a:hover{background:var(--chalk)}
.dd-panel a .n{font-family:var(--f-mono);font-size:11px;color:var(--klein);min-width:26px}
.burger{display:none;background:none;border:0;font-size:22px;cursor:pointer;color:var(--ink)}

/* HERO / ACCUEIL */
.hero{padding:clamp(52px,10vw,120px) 0 clamp(30px,5vw,54px)}
.hero .eyebrow{margin-bottom:24px}
.hero h1{font-size:clamp(40px,7.6vw,92px);max-width:16ch}
.hero h1 .mark{position:relative;color:var(--klein);white-space:nowrap}
.hero h1 .mark::after{content:"";position:absolute;left:-.03em;right:-.03em;bottom:.08em;height:.12em;background:var(--marigold);opacity:.45;z-index:-1}
.hero-lede{margin-top:28px;max-width:58ch;font-size:clamp(17px,2vw,20px);color:var(--ink-soft)}
.portals{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:clamp(28px,5vw,52px) 0 clamp(52px,8vw,96px)}
.portal{--accent:var(--klein);display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px 24px;position:relative;overflow:hidden;transition:transform .5s var(--ease),border-color .3s,box-shadow .5s var(--ease)}
.portal::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--accent)}
.portal:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 22px 46px -26px var(--accent)}
.portal .p-tag{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--accent);text-transform:uppercase}
.portal h2{font-size:clamp(24px,3vw,32px);margin:14px 0 10px}
.portal p{color:var(--ink-soft);font-size:15.5px;flex:1}
.portal .p-go{margin-top:22px;font-family:var(--f-mono);font-size:13px;letter-spacing:.03em;color:#fff;background:var(--accent);padding:12px 18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:background .25s}
.portal:hover .p-go{background:var(--accent-deep)}

/* SECTION */
.section{padding:clamp(56px,9vw,110px) 0;border-top:1px solid var(--line-soft)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:50px}
.section-head h2{font-size:clamp(30px,5vw,54px);max-width:17ch}
.section-head p{max-width:44ch;color:var(--ink-soft)}
.section-head .eyebrow{margin-bottom:16px}

/* DOCUMENTS (360) */
.docs{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.doc{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px 30px 26px;position:relative;overflow:hidden;transition:transform .5s var(--ease),border-color .3s,box-shadow .5s var(--ease)}
.doc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.doc:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 18px 40px -24px var(--accent)}
.doc:hover::before{transform:scaleY(1)}
.doc-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.doc-num{font-family:var(--f-mono);font-size:13px;color:var(--accent);font-weight:700;letter-spacing:.1em}
.doc-meta{font-family:var(--f-mono);font-size:12px;color:var(--ink-soft);letter-spacing:.04em}
.doc h3{font-size:clamp(22px,2.6vw,27px);margin:16px 0 10px}
.doc-obj{color:var(--ink-soft);font-size:15.5px;min-height:2.6em}
.doc-price{font-family:var(--f-mono);font-weight:700;font-size:30px;letter-spacing:-.01em;margin:22px 0 4px;display:inline-flex;align-items:baseline;gap:8px;border-bottom:3px solid var(--marigold);padding-bottom:2px;width:max-content}
.doc-price .cur{font-size:18px}
.doc-price .ht{font-family:var(--f-body);font-size:12px;color:var(--ink-soft);font-weight:400;letter-spacing:.04em}
.toc-toggle{margin-top:20px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.06em;background:none;border:0;padding:0;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-transform:uppercase}
.toc-toggle .chev{transition:transform .35s var(--ease);color:var(--accent)}
.toc-toggle.open .chev{transform:rotate(90deg)}
.toc-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.toc-wrap.open{grid-template-rows:1fr}
.toc-inner{overflow:hidden}
.toc{list-style:none;margin:16px 0 4px;padding:0;border-top:1px dashed var(--line)}
.toc li{padding:9px 0 9px 24px;position:relative;font-size:15px;border-bottom:1px dashed var(--line)}
.toc li::before{content:"§";position:absolute;left:0;color:var(--accent);font-family:var(--f-mono)}
.deliv{margin-top:16px;padding:14px 16px;background:var(--chalk-2);border-radius:10px;font-size:14px}
.deliv b{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:5px}
.doc-foot{margin-top:auto;padding-top:22px}
.btn-buy{width:100%;border:0;cursor:pointer;background:var(--accent);color:#fff;font-family:var(--f-mono);font-size:14px;letter-spacing:.04em;padding:15px 20px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .25s,transform .2s}
.btn-buy:hover{background:var(--accent-deep)}
.btn-buy:active{transform:scale(.985)}
.buy-note{text-align:center;margin-top:12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;color:var(--ink-soft)}

/* IT dark band */
.band{border-top:1px solid var(--line-soft)}
.band-dark{background:var(--ink);color:var(--chalk)}
.band-dark .eyebrow{color:#a7a49c}
.band-dark h2{color:var(--white)}
.band-dark .section-head p{color:#b9b6ad}
.grid-2{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,6vw,80px);align-items:start}
.lede-block{color:var(--ink-soft);font-size:18px;max-width:52ch}
.band-dark .lede-block{color:#b9b6ad}
.recruit-points{margin-top:6px;list-style:none;padding:0}
.recruit-points li{padding:18px 0 18px 40px;position:relative;border-top:1px solid #2b2a2f}
.recruit-points li b{font-family:var(--f-display);font-weight:700;color:var(--white)}
.recruit-points li::before{content:attr(data-n);position:absolute;left:0;top:16px;font-family:var(--f-mono);font-size:12px;color:#fff;background:var(--accent);width:24px;height:24px;border-radius:50%;display:grid;place-items:center}

/* 2.0 */
.offer-chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 30px}
.offer-chips span{font-family:var(--f-mono);font-size:12px;letter-spacing:.03em;padding:8px 13px;border:1px solid var(--line);border-radius:999px;background:var(--paper)}
.portfolio-title{font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin:6px 0 4px}
.portfolio{margin-top:4px;display:flex;flex-direction:column;gap:2px}
.portfolio a{text-decoration:none;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 4px;border-top:1px solid var(--line);transition:padding .3s var(--ease),color .3s}
.portfolio a:last-child{border-bottom:1px solid var(--line)}
.portfolio a:hover{padding-left:14px}
.portfolio .p-name{font-family:var(--f-display);font-weight:700;font-size:clamp(19px,2.4vw,24px)}
.portfolio .p-url{font-family:var(--f-mono);font-size:12px;color:var(--ink-soft)}
.portfolio a:hover .p-url{color:var(--accent)}
.portfolio .p-arrow{font-family:var(--f-mono);color:var(--accent);transition:transform .3s}
.portfolio a:hover .p-arrow{transform:translateX(5px)}

/* FORMS */
.form-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3vw,34px)}
.band-dark .form-card{background:#201f24;border-color:#33323a}
.field{margin-bottom:16px}
.field.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:block;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px}
.band-dark label{color:#a7a49c}
input,select,textarea{width:100%;font-family:var(--f-body);font-size:15px;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:9px;padding:12px 14px;transition:border-color .2s,box-shadow .2s}
.band-dark input,.band-dark select,.band-dark textarea{background:#17161a;border-color:#3a3942;color:var(--chalk)}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.btn-submit{width:100%;margin-top:6px;border:0;cursor:pointer;background:var(--accent);color:#fff;font-family:var(--f-mono);font-size:14px;letter-spacing:.04em;padding:15px;border-radius:999px;transition:background .25s,transform .2s}
.btn-submit:hover{background:var(--accent-deep)}
.btn-submit:active{transform:scale(.99)}
.form-msg{margin-top:14px;font-family:var(--f-mono);font-size:13px;text-align:center;min-height:1em;color:var(--ink-soft)}
.band-dark .form-msg{color:#b9b6ad}

/* PAYPAL MODAL */
.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:20px;background:rgba(23,22,26,.55);backdrop-filter:blur(3px)}
.modal.is-open,.modal.open,.modal.show{display:grid}
.modal-card{background:var(--paper);border-radius:18px;max-width:440px;width:100%;padding:30px 30px 26px;position:relative;box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.modal-close{position:absolute;top:16px;right:18px;background:none;border:0;font-size:22px;cursor:pointer;color:var(--ink-soft)}
.modal .eyebrow{margin-bottom:14px}
.modal h3{font-size:26px;margin-bottom:6px}
.modal .m-price{font-family:var(--f-mono);font-weight:700;font-size:22px;border-bottom:3px solid var(--marigold);width:max-content;padding-bottom:2px;margin:10px 0 22px}
#paypal-buttons{min-height:48px}
.pp-fake{width:100%;height:46px;border-radius:999px;background:#ffc439;display:flex;align-items:center;justify-content:center;gap:1px;font-family:var(--f-display);font-weight:800;font-size:19px;letter-spacing:-.01em;opacity:.75;cursor:not-allowed;user-select:none}
.pp-fake .pp-a{color:#003087}
.pp-fake .pp-b{color:#009cde}
.modal .m-status{font-family:var(--f-mono);font-size:13px;text-align:center;margin-top:12px;color:var(--accent);min-height:1em}
.modal .m-status.success{color:#2f8f3e}
.modal .m-status.error{color:#c0392b}
.modal .m-status a{color:var(--accent);font-weight:700}
.modal .m-note{font-family:var(--f-mono);font-size:11px;color:var(--ink-soft);text-align:center;margin-top:14px}

/* FOOTER */
.site-foot{background:var(--ink);color:#8f8c84;padding:56px 0 40px;border-top:1px solid #2b2a2f}
.foot-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:start}
.foot-brand{font-family:var(--f-display);font-weight:800;font-size:26px;color:var(--chalk)}
.foot-brand span{color:var(--klein)}
.foot-links{display:flex;gap:40px;flex-wrap:wrap}
.foot-col a{display:block;color:#8f8c84;text-decoration:none;font-family:var(--f-mono);font-size:13px;padding:5px 0;transition:color .2s}
.foot-col a:hover{color:var(--marigold)}
.foot-col .h{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#5f5d57;margin-bottom:8px}
.foot-bottom{margin-top:44px;padding-top:20px;border-top:1px solid #2b2a2f;font-family:var(--f-mono);font-size:12px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* REVEAL (main.js toggles .visible) */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.visible{opacity:1;transform:none}

/* RESPONSIVE */
@media (max-width:900px){
  .portals{grid-template-columns:1fr}
  .docs{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .nav{display:none}
  .nav.open{display:flex;flex-direction:column;align-items:flex-start;position:absolute;top:66px;left:0;right:0;background:var(--chalk);border-bottom:1px solid var(--line);padding:18px var(--gut) 26px;gap:14px}
  .nav.open .dd-panel{position:static;transform:none;box-shadow:none;border:0;padding:4px 0 0;min-width:0}
  .burger{display:block}
}
@media (max-width:520px){ body{font-size:16px} .field.row{grid-template-columns:1fr} }

/* A11Y */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}