/* L'ARTE NOIR · Digital Studio · direction éditoriale (inspirée de Readymag Websites of the Year) */
.studio{--volt:#5b68ff;--panel:#141414;--edge:clamp(16px,1.4vw,20px);background:var(--volt);color:var(--paper-ink)}
.studio ::selection{background:var(--paper-ink);color:var(--volt)}
.studio :focus-visible{outline-color:var(--paper-ink)}
.studio .rm-panel :focus-visible{outline-color:var(--cream)}

/* Header sur fond bleu */
.studio .site-header{color:var(--paper-ink)}
.studio .site-header.is-solid{background:rgba(91,104,255,.92)}
.studio .brand{border-color:var(--paper-ink)}
.studio .lang button{color:rgba(11,11,11,.6)}
.studio .lang button:hover,.studio .lang button[aria-pressed="true"]{color:var(--paper-ink)}
.studio .studio-pill{border-color:var(--paper-ink)}
.studio .studio-pill:hover,.studio .studio-pill[aria-current="page"]{background:var(--paper-ink);color:var(--volt)}
.studio .studio-pill .dot{background:var(--volt);box-shadow:none}

.grot-s{font-family:var(--display);font-stretch:100%;font-weight:800;letter-spacing:-.03em;line-height:1;text-transform:uppercase}
.volt{color:var(--volt)}

/* ===== Hero ===== */
.rm-hero{min-height:min(100svh,1000px);display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:92px var(--edge) var(--edge);overflow:hidden}
.rm-bar{display:flex;justify-content:space-between;gap:16px;font-size:clamp(13px,1.25vw,18px)}
.rm-title{font-size:clamp(84px,20vw,330px)}
.rm-title .r{margin-left:auto}
@media (max-width:700px){.rm-hero{min-height:0;gap:44px;padding-top:84px}}
.rm-hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.rm-statement{font-size:clamp(19px,2vw,28px);line-height:.98;max-width:780px}
.rm-actions{display:flex;align-items:center;gap:20px;margin-left:auto}
.rm-btn{font-family:var(--display);font-stretch:100%;font-weight:800;font-size:15px;letter-spacing:-.01em;text-transform:uppercase;text-decoration:none;white-space:nowrap;border:2px solid var(--paper-ink);border-radius:40px;padding:10px 18px 9px;transition:background .25s,color .25s}
.rm-btn:hover{background:var(--paper-ink);color:var(--volt)}
.sticker.on-volt{border:2px solid var(--paper-ink);color:var(--paper-ink)}
.sticker.on-volt:hover{background:var(--paper-ink);color:var(--volt)}
.sticker.on-dark{border:2px solid var(--volt);color:var(--volt);background:var(--panel)}
.sticker.on-dark:hover{background:var(--volt);color:var(--paper-ink)}

/* ===== Sections ===== */
.rm-section{padding-block:clamp(72px,9vw,128px)}
.rm-edge{padding-inline:var(--edge)}
.rm-head{display:grid;grid-template-columns:1fr 1fr;gap:20px 48px;align-items:end;padding-inline:var(--edge);margin-bottom:clamp(28px,4vw,48px)}
.rm-head h2{grid-column:1/-1}
.rm-h2{font-size:clamp(46px,7.6vw,124px)}
.rm-kicker{font-size:clamp(14px,1.25vw,18px);margin-bottom:12px}
.rm-body{font-size:clamp(17px,1.5vw,20px);line-height:1.38;font-weight:500}
@media (max-width:860px){.rm-head{grid-template-columns:1fr}}

.rm-panel{background:var(--panel);color:var(--cream);margin-inline:var(--edge);padding:clamp(22px,3vw,40px) clamp(16px,2.4vw,32px)}

/* ===== 01 · IA ===== */
.rm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(20px,3vw,44px);clip-path:inset(2px 0 0 0)}
.rm-item{padding:22px 0 26px;border-top:1.5px solid var(--volt);display:flex;flex-direction:column;gap:10px}
.rm-h3{font-size:clamp(26px,2.5vw,36px);line-height:.9;display:flex;align-items:flex-start;gap:.3em}
.circ{flex:0 0 auto;display:inline-grid;place-items:center;width:1.05em;height:1.05em;border-radius:50%;background:var(--volt);color:var(--paper-ink);font-size:.58em;letter-spacing:0;line-height:1;margin-top:.08em}
.rm-item>p{font-size:15.5px;line-height:1.45;color:var(--mute-d)}
.rm-dots{list-style:none;margin-top:auto}
.rm-dots li{display:flex;gap:10px;align-items:baseline;font-size:14px;font-weight:500;padding:8px 0;border-top:1px dashed rgba(245,239,224,.22)}
.rm-dots li::before{content:"↳";color:var(--volt)}
@media (max-width:980px){.rm-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.rm-grid{grid-template-columns:1fr}}

/* ===== 02 · Offres ===== */
.rm-giant{font-size:clamp(110px,24vw,400px);text-align:center;padding-inline:var(--edge);line-height:.78}
.rm-list{margin:clamp(20px,3vw,36px) var(--edge) 0;border-top:2px solid var(--paper-ink)}
.rm-row{border-bottom:2px solid var(--paper-ink)}
.rm-row summary{list-style:none;display:flex;align-items:flex-end;gap:12px;padding:clamp(14px,1.8vw,22px) 0;cursor:pointer}
.rm-row summary::-webkit-details-marker{display:none}
.rm-row-t{font-size:clamp(26px,4.2vw,62px);line-height:.88;transition:color .2s}
.rm-leader{flex:1 1 24px;min-width:24px;height:7px;margin-bottom:.5em;background:radial-gradient(circle at 3.5px 3.5px,currentColor 2px,transparent 2.4px) 0 0/12px 7px repeat-x}
.rm-row-n{font-size:clamp(22px,3vw,42px);line-height:.88}
.rm-plus{flex:0 0 auto;width:clamp(32px,3vw,42px);aspect-ratio:1;border-radius:50%;border:2px solid currentColor;display:grid;place-items:center;font-size:20px;line-height:1;align-self:center;transition:transform .3s var(--ease),background .25s,color .25s}
.rm-row[open] .rm-plus{transform:rotate(45deg);background:var(--paper-ink);color:var(--volt)}
.rm-row summary:hover .rm-row-t{color:var(--cream)}
.rm-row-body{display:grid;grid-template-columns:1fr auto;gap:12px 32px;align-items:end;padding:0 0 24px}
.rm-row-body p{font-size:clamp(17px,1.6vw,21px);line-height:1.38;font-weight:500;max-width:720px}
.rm-row-body .rm-tags{font-family:var(--display);font-stretch:100%;font-weight:800;font-size:13px;line-height:1.3;letter-spacing:.02em;text-transform:uppercase;text-align:right;max-width:420px}
@media (max-width:700px){.rm-row summary{align-items:center}.rm-row-t{flex:1}.rm-leader{display:none}.rm-row-body{grid-template-columns:1fr}.rm-row-body .rm-tags{text-align:left}}

/* ===== 03 · Méthode ===== */
.rm-method{display:grid;gap:clamp(28px,4vw,48px)}
.rm-method-head{display:grid;grid-template-columns:1fr 1fr;gap:16px 48px;align-items:end}
.rm-method-head h2{grid-column:1/-1}
.rm-method-head .rm-body{color:var(--mute-d)}
.rm-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:28px clamp(16px,2.4vw,32px)}
.rm-steps li{border-top:1.5px solid var(--volt);padding-top:14px}
.rm-step-n{display:block;font-size:clamp(64px,7vw,112px);color:var(--volt);margin-bottom:12px}
.rm-steps h3{font-size:clamp(24px,2.2vw,30px);margin-bottom:8px}
.rm-steps p{font-size:15.5px;line-height:1.45;color:var(--mute-d)}
@media (max-width:900px){.rm-method-head{grid-template-columns:1fr}.rm-steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.rm-steps{grid-template-columns:1fr}}

/* ===== Contact ===== */
.rm-contact{position:relative;overflow:hidden;padding-top:0}
.rm-submit{font-size:clamp(90px,19vw,320px);text-align:center;line-height:.74;transform:translateY(-.12em);margin-bottom:clamp(4px,1vw,12px)}
.rm-contact>.sticker{position:absolute;z-index:2;right:clamp(12px,3vw,48px);top:clamp(6px,1.2vw,18px)}
.rm-contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(28px,4vw,64px);align-items:start}
.rm-contact-lead{margin-bottom:24px}
.rm-facts{list-style:none;border-top:1.5px solid var(--volt)}
.rm-facts li{display:flex;align-items:flex-end;gap:10px;padding:14px 0;border-bottom:1px solid rgba(91,104,255,.35);font-family:var(--display);font-stretch:100%;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(13px,1.2vw,16px);line-height:1.1}
.rm-facts .k{color:var(--mute-d)}
.rm-facts .dots{flex:1;min-width:16px;height:5px;margin-bottom:.25em;background:radial-gradient(circle at 2.5px 2.5px,var(--volt) 1.4px,transparent 1.8px) 0 0/9px 5px repeat-x}
.rm-facts .v{color:var(--cream);text-align:right;text-decoration:none}
.rm-facts a.v:hover{color:var(--volt)}
.rm-form{display:grid}
.rm-field{display:block;border-bottom:1.5px solid var(--volt);padding:14px 0 8px}
.rm-field>span,.rm-choices legend{display:block;font-family:var(--display);font-stretch:100%;font-weight:800;font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:var(--volt);margin-bottom:6px}
.rm-field input,.rm-field textarea{display:block;width:100%;background:transparent;border:0;outline:0;color:var(--cream);font-size:18px;font-weight:400;line-height:1.4;padding:2px 0;resize:vertical}
.rm-field:focus-within{border-bottom-color:var(--cream)}
.rm-choices{border:0;border-bottom:1.5px solid var(--volt);margin:0;padding:14px 0 14px;min-width:0}
.rm-choices legend{float:left;width:100%;padding:0}
.rm-choices .opts{clear:both;display:flex;flex-wrap:wrap;gap:8px}
.rm-choices label{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--volt);border-radius:40px;padding:7px 13px;color:var(--volt);font-size:14px;font-weight:500;cursor:pointer;transition:background .2s,color .2s}
.rm-choices input{appearance:none;-webkit-appearance:none;width:11px;height:11px;border:1.5px solid currentColor;border-radius:50%;margin:0;flex:0 0 auto}
.rm-choices input:checked{background:currentColor}
.rm-choices label:has(input:checked){background:var(--volt);color:var(--paper-ink)}
.rm-send{margin-top:14px;background:none;border:0;color:var(--volt);font-size:clamp(24px,2.6vw,36px);cursor:pointer;padding:14px 0;text-align:center;transition:color .2s}
.rm-send:hover{color:var(--cream)}
.rm-note{font-size:13px;color:var(--mute-d);text-align:center}
@media (max-width:860px){.rm-contact-grid{grid-template-columns:1fr}.rm-contact>.sticker{display:none}}

.studio .site-footer{border-top:0}