/* ==========================================================
   CRÉATION SITE INTERNET — V4 « noir et orange »
   Thème posé par-dessus style.css (V2) : les couleurs passent par des
   variables, on les redéfinit ici puis on corrige les teintes codées en dur.
========================================================== */
:root{
  --paper:#0b0b0c;--paper2:#151517;--white:#161619;
  --ink:#f4efe8;--ink2:#cbc5bd;--mute:#a9a39c;
  --blue:#ef7d00;--blue2:#ff9d33;--bsoft:rgba(239,125,0,.14);
  --note:#f4efe8;
  --line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.2);--lineD:rgba(255,255,255,.1);
  --dk:#161619;--dk2:#1f1f23;--dtx:#f4efe8;--dmu:#a9a39c;
  --o:#ef7d00;--o2:#ff9d33;--o3:#b35c00;--cream:#f4efe8;--black:#141414;
}
body{font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--paper);color:var(--ink)}
::selection{background:var(--o);color:#fff}
h1,h2,h3{font-weight:800;letter-spacing:-.035em}
h1{font-weight:800;letter-spacing:-.045em;line-height:.98}
h2{letter-spacing:-.04em}
h1 em,h2 em,h3 em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--o)}
h1 em{font-size:1.06em}
h2 em{font-size:1.08em}
.dots{background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.3px)}

/* boutons : orange, en pastille */
.btn{background:var(--o);color:#fff;border-radius:999px;box-shadow:0 10px 30px -10px rgba(239,125,0,.65)}
.btn:hover{background:var(--o2);color:#fff}
.btn.blue{background:var(--o)}
.btn.blue:hover{background:var(--o2);color:#fff}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line2)}
.btn.line:hover{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1.5px var(--ink)}

/* en-tête */
.header{background:rgba(11,11,12,.8)}
.brand span{color:var(--o)}
.menu a:hover{background:rgba(255,255,255,.06)}
.menu-toggle{box-shadow:inset 0 0 0 1.5px var(--line2)}

/* hero */
.hero::before{content:"";position:absolute;width:900px;height:900px;right:-280px;top:-320px;background:radial-gradient(closest-side,rgba(239,125,0,.22),transparent 70%);pointer-events:none}
.hero .wrap{position:relative}
.kicker{background:rgba(255,255,255,.04)}
.hd{background:#0b0b0c}
.fbar{background:#1d1d21}
.fbar i{background:#3a3a40}
.furl{background:#0b0b0c}
.f-links i,.ln{background:#2a2a30}
.f-cards i{background:#1d1d21}
.f-img,.pb-img{background:radial-gradient(circle at 72% 30%,#ffd3a1 0 9%,transparent 9.5%),radial-gradient(120% 90% at 20% 100%,#3a1d02 0,var(--o3) 35%,var(--o) 65%,var(--o2) 100%)}
.f-img::after{background:rgba(0,0,0,.35)}
.chip{background:#1d1d21;color:var(--ink);box-shadow:0 0 0 1px var(--line),0 1.6cqw 3.4cqw -1.4cqw rgba(0,0,0,.7)}
.c-btn{background:var(--o);color:#fff;box-shadow:0 1.4cqw 3cqw -1cqw rgba(239,125,0,.6)}
.note{background:var(--cream);color:var(--black)}
.cursor span{background:var(--cream);color:var(--black)}
.slot{border-color:var(--o);background:rgba(239,125,0,.08)}

/* bande orange (comme la page Contenu quotidien) */
.strip{position:relative;z-index:2;margin:0 -20px;padding:18px 0;background:var(--o);color:#fff;overflow:hidden;transform:rotate(-1.2deg)}
.strip .track-s{display:flex;gap:36px;width:max-content;animation:stripMarq 34s linear infinite;font-weight:800;font-size:15px;letter-spacing:.14em;text-transform:uppercase}
.strip span{display:inline-flex;align-items:center;gap:36px;white-space:nowrap}
.strip span::after{content:"✦";font-size:13px;opacity:.8}
@keyframes stripMarq{to{transform:translateX(-50%)}}

/* processus : fond noir profond pour alterner avec Réalisations (#111113) juste au-dessus */
.process{background:#0b0b0c;border-top:1px solid var(--line)}
.pbar i,.pb-menu i,.pb-text i{background:#33333a}
.purl{background:#0b0b0c}
.p-tool{background:#1d1d21;color:var(--ink);box-shadow:0 20px 40px -16px rgba(0,0,0,.8)}

/* services : section crème (variables redéfinies localement) */
#services{
  --white:#ffffff;--paper:#ebe4d8;--ink:#141414;--ink2:#4d4842;--mute:#7a736b;
  --line:rgba(0,0,0,.08);--line2:rgba(0,0,0,.22);
  background-color:var(--cream);color:var(--black)
}
#services.dots{background-image:radial-gradient(rgba(0,0,0,.09) 1px,transparent 1.3px)}
#services .btn.line:hover{background:var(--black);color:#fff;box-shadow:none}
#services .hd{background:#fff}
#services .b-card{box-shadow:0 0 0 1px var(--line),0 30px 50px -36px rgba(0,0,0,.35)}
.bp-split i{background:radial-gradient(120% 90% at 20% 100%,#3a1d02 0,var(--o) 55%,var(--o2))}
.bp-row i,.bp-center .bp-form{background:var(--white)}
.bp-new{background:#0b0b0c}

/* réalisations */
.works{background:#111113;--wfade:#111113}
.wk-bar{background:#1d1d21}
.wk-bar i{background:#3a3a40}
.wk:hover,.wk:focus-visible{box-shadow:0 0 0 2px var(--o),0 50px 90px -30px rgba(0,0,0,.95)}
.w-hint span::before{background:var(--o)}
.wk-bar .wkd-tabs{background:#0b0b0c}
.wkd-live{background:#0b0b0c}
.wkd-kicker{color:var(--o2)}
.wkd-points li::before{background:var(--o)}

/* expertise */
.lpanel{background:#121215}
.layer:hover{background:rgba(255,255,255,.05)}
.lui{box-shadow:0 0 0 1px var(--line),0 50px 90px -50px rgba(0,0,0,.8)}

/* FAQ */
.faq-list summary::after{background:linear-gradient(var(--o),var(--o)) center/12px 2px no-repeat,linear-gradient(var(--o),var(--o)) center/2px 12px no-repeat,var(--white)}

/* contact : bloc orange */
.contact{background:radial-gradient(ellipse at 30% 120%,var(--o2) 0,var(--o) 38%,var(--o3) 100%);color:#fff}
.contact::before{background-image:repeating-radial-gradient(circle at 20% 110%,transparent 0 60px,rgba(255,255,255,.07) 60px 61px);background-size:auto}
.contact h2{color:#fff}
.contact h2 em{color:var(--black)}
.c-grid .lead{color:rgba(255,255,255,.9)}
.c-mail{border-bottom-color:rgba(255,255,255,.6)}
.c-mail:hover{color:var(--black);border-bottom-color:var(--black)}
.cwin{background:var(--black);box-shadow:0 40px 80px -30px rgba(0,0,0,.55)}
.cwin-bar i{background:#3a3a40}
.opts span{background:#1f1f23}
.opts input:checked+span{background:rgba(239,125,0,.1)}
.fields input,.fields textarea{background:#1f1f23}
#form-status{color:var(--o2)}

/* anti-spam : champ piège invisible pour les humains */
.hp{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}
/* consentement (Loi 25) */
.consent{display:flex;gap:10px;align-items:flex-start;margin:-4px 0 22px;font-size:13.5px;line-height:1.45;color:var(--dmu);cursor:pointer}
.consent input{flex:none;width:17px;height:17px;margin:2px 0 0;accent-color:var(--o)}
.consent a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.form.sent .fbtns .btn{opacity:.6}
.c-tel{margin-top:14px;font-size:clamp(17px,1.8vw,21px);font-weight:700}
.c-tel a{border-bottom:2px solid rgba(255,255,255,.4)}
.c-tel a:hover{border-bottom-color:var(--black);color:var(--black)}

/* pied de page */
.f-word{font-size:clamp(52px,13.2vw,196px);-webkit-text-stroke:1.5px rgba(255,255,255,.18)}
.f-word:hover{color:var(--o)}
.f-word span{color:var(--o)}

@media (prefers-reduced-motion:reduce){.strip .track-s{animation:none}}

/* ---------- pages service ---------- */
.sp-hero{position:relative}
.sp-hero .b-prev.pv{height:clamp(230px,28vw,330px)}
.sp-board .b-card{padding:14px}
.postit{color:var(--black)}
.cta-band .lead{color:rgba(255,255,255,.9)}
.cta-band h2{max-width:18ch}
.cta-band .related{margin-top:22px}
.cta-band .btn.dark{background:var(--black);color:#fff;box-shadow:0 20px 40px -14px rgba(0,0,0,.55)}
.cta-band .btn.dark:hover{background:#000}
.sp-faq{border-top:1px solid var(--line)}
.faq-list details p a,.card p a{color:var(--o2);text-decoration:underline;text-underline-offset:2px}

/* ==========================================================
   Interface « outil de design » (v3.css) en version noir et orange
========================================================== */
.tb{background:rgba(11,11,12,.86)}
@media (min-width:861px){
  .tb-tools{background:#18181b}
  .tb-tools a{color:var(--ink2)}
  .tb-tools a:hover{background:rgba(255,255,255,.06)}
  .tb-tools a.on{background:#26262b;color:var(--o);box-shadow:none}
}
.tb-toggle:hover{background:rgba(255,255,255,.06)}
.tb-toggle[aria-pressed="true"]{background:rgba(239,125,0,.14);color:var(--o);box-shadow:inset 0 0 0 1px rgba(239,125,0,.45)}
.tb .btn{box-shadow:none}

/* règles */
.ruler,.ry::before{background-color:#111113;color:#76706a}
.rx{background-image:linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.11) 1px,transparent 1px)}
.rlab{background-image:linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.11) 1px,transparent 1px)}
.rmark,.rmark b{background:var(--o)}

/* cadres */
.frame-lbl em{color:var(--o)}
.on-dark .frame-lbl em{color:var(--o2)}
#services .frame-lbl{color:#7a736b}
.contact .frame-lbl{color:rgba(255,255,255,.75)}
.contact .frame-lbl em{color:#fff}

/* commentaires épinglés */
.pin-av{background:var(--o);color:#fff;box-shadow:0 0 0 2px #0b0b0c,0 8px 18px -8px rgba(0,0,0,.8)}
#services .pin-av{box-shadow:0 0 0 2px var(--cream),0 8px 18px -8px rgba(0,0,0,.4)}
.contact .pin-av{background:var(--black);box-shadow:0 0 0 2px var(--o),0 8px 18px -8px rgba(0,0,0,.5)}
.pin::after{animation-name:pinPulseO}
@keyframes pinPulseO{from{box-shadow:0 0 0 0 rgba(239,125,0,.7)}to{box-shadow:0 0 0 16px rgba(239,125,0,0)}}
.pin-note{background:var(--cream);color:var(--black);box-shadow:0 16px 34px -14px rgba(0,0,0,.8)}
.pin-note b{color:#7a736b}

/* curseur, toast, barre d'état */
.me span{background:var(--o);box-shadow:0 4px 10px -4px rgba(239,125,0,.6)}
.toast{background:var(--cream);color:var(--black)}
.statusbar{background:#111113;color:var(--mute)}

/* mode Esquisse sur fond noir */
html.wire main *:not(dialog,dialog *),html.wire .footer *{color:#9c968e!important;border-color:rgba(255,255,255,.2)!important}
html.wire body main section,html.wire .footer{background:#0b0b0c!important;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.3px)!important;background-size:22px 22px!important}
html.wire main :is(.stage .frame,.chip,.note,.pframe,.p-tool,.b-card,.b-prev,.wk,.lui,.layer,.lview,.faq-list details,.cwin,.btn,.kicker,.opts span,.fields input,.fields textarea,.tags span,.chips span,.f-img,.pb,.slot,h1,h2,.lead,.trust li){outline-color:rgba(255,255,255,.3)!important}
html.wire main .sel-frame{border-color:var(--o)!important}
html.wire main :is(.sel-tag,.sel-dim){background:var(--o)!important;color:#fff!important}
html.wire main .hd{background:#0b0b0c!important;border-color:var(--o)!important}
html.wire main .pin-av{background:var(--o)!important;color:#fff!important}
html.wire main .pin-note{background:var(--cream)!important}
html.wire main .pin-note,html.wire main .pin-note b{color:#141414!important}
html.wire main .frame-lbl em{color:var(--o)!important}
html.wire .f-word{-webkit-text-stroke:1.5px rgba(255,255,255,.2)!important}
html.wire .statusbar{background:#111113!important}