/* ============================================================
   ARS NOVA WEB AGENCY — 3 peaux : classique / moderne / rétro 2000
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#ffffff;
  --bg-2:#f5f7fa;
  --surface:#ffffff;
  --ink:#101828;
  --ink-dim:#475467;
  --ink-faint:#98a2b3;
  --line:#e4e7ec;
  --accent:#1d4ed8;
  --accent-2:#1d4ed8;
  --accent-ink:#ffffff;
  --radius:12px;
  --maxw:1180px;
  --pad:clamp(20px,5vw,60px);
  --shadow:0 1px 3px rgba(16,24,40,.10),0 1px 2px rgba(16,24,40,.06);
  --shadow-lg:0 12px 32px rgba(16,24,40,.12);
  --font-display:Georgia,"Times New Roman",serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --skin-fade:.4s var(--ease);
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  font-size:clamp(15px,1.02vw,17px);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background var(--skin-fade),color var(--skin-fade);
}
html.intro-playing,html.intro-playing body{overflow:hidden}

img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--accent);color:var(--accent-ink)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

.skip{position:fixed;top:-100px;left:12px;z-index:999;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;transition:top .2s}
.skip:focus{top:12px}

/* Éléments réservés à une peau : masqués par défaut */
.grain,.cursor,.hero-canvas,.hero-fallback,.marquee,.retro-marquee,.retro-extras{display:none}

/* ============================================================
   SQUELETTE COMMUN (piloté par variables)
   ============================================================ */

.nav{position:fixed;top:0;left:0;right:0;z-index:1000;transition:top .45s var(--ease),background var(--skin-fade)}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;background:var(--bg);border-bottom:1px solid var(--line)}
.nav.solid::before{opacity:1}
.nav.hidden{top:-96px}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:var(--maxw);margin-inline:auto;padding:16px var(--pad)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand-mark{width:18px;height:18px;flex:none;background:var(--accent);border-radius:5px}
.brand-text{font-family:var(--font-display);font-size:1.05rem;font-weight:700;display:flex;flex-direction:column;line-height:1}
.brand-text i{font-style:normal;font-family:var(--font-body);font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim);margin-top:3px;font-weight:400}
.nav-links{display:flex;gap:28px;font-size:.92rem}
.nav-links a{position:relative;color:var(--ink-dim);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-burger{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:8px;position:relative}
.nav-burger span{position:absolute;left:11px;width:18px;height:2px;background:var(--ink);transition:.3s var(--ease)}
.nav-burger span:first-child{top:16px}.nav-burger span:last-child{top:22px}
.nav-burger[aria-expanded="true"] span:first-child{top:19px;transform:rotate(45deg)}
.nav-burger[aria-expanded="true"] span:last-child{top:19px;transform:rotate(-45deg)}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:100px;font-weight:600;font-size:.95rem;white-space:nowrap;transition:transform .25s var(--ease),background .2s,color .2s,border-color .2s,box-shadow .2s;will-change:transform}
.btn span{position:relative;z-index:2}
.btn-solid{background:var(--accent);color:var(--accent-ink)}
.btn-solid:hover{filter:brightness(1.06);box-shadow:var(--shadow-lg)}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-pill{border:1px solid var(--line);padding:10px 18px;font-size:.85rem}
.btn-pill:hover{border-color:var(--accent);color:var(--accent)}
.btn-block{display:flex;width:100%}

.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:130px var(--pad) 90px;overflow:hidden}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin-inline:auto;width:100%;display:flex;flex-direction:column}
.hero-main{min-width:0}
.eyebrow{font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:22px}
.eyebrow i{font-style:normal;color:var(--accent);margin-inline:6px}
.hero-title{font-family:var(--font-display);font-weight:400;font-size:clamp(2.6rem,8vw,6.4rem);line-height:1.02;letter-spacing:-.02em;margin-bottom:26px}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.05em}
.hero-title .line>span{display:block}
.hero-title .accent>span{color:var(--accent)}
.hero-sub{font-size:clamp(1.02rem,1.5vw,1.25rem);color:var(--ink-dim);max-width:52ch;margin-bottom:26px}
.hero-sub strong{color:var(--ink);font-weight:700}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.hero-scroll{position:absolute;bottom:80px;right:var(--pad);z-index:2;display:flex;align-items:center;gap:10px;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint)}
.hero-scroll i{width:1px;height:46px;background:linear-gradient(var(--ink-faint),transparent)}

/* Sélecteur de peau — panneau « feature » : au-dessus du titre en mobile, à droite en desktop */
.skins{
  order:-1;align-self:center;
  max-width:400px;margin:0 auto 36px;padding:20px 24px;
  border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  position:relative;z-index:3;
}
.skins-label{font-size:.92rem;font-weight:600;letter-spacing:.01em;color:var(--ink-dim)}
.skins-seg{display:inline-flex;padding:5px;border-radius:100px;border:1px solid var(--line);background:var(--bg-2)}
.skins-seg button{padding:11px 20px;border-radius:100px;border:none;color:var(--ink-dim);font-weight:600;font-size:.92rem;white-space:nowrap;transition:color .2s,background .2s,transform .2s var(--ease)}
.skins-seg button:hover{color:var(--ink)}
@media (min-width:980px){
  .hero-inner{flex-direction:row;align-items:center;gap:clamp(36px,5vw,84px)}
  .hero-main{flex:1 1 auto}
  .skins{order:0;flex:0 0 auto;margin:0}
}
html[data-skin="classique"] .skins-seg [data-skin-btn="classique"],
html[data-skin="moderne"] .skins-seg [data-skin-btn="moderne"],
html[data-skin="retro"] .skins-seg [data-skin-btn="retro"]{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow)}
.skins-seg.pulse button{animation:skinPulse .55s var(--ease) 2}
@keyframes skinPulse{50%{transform:translateY(-3px)}}
.skins-replay{margin-top:6px;font-size:.82rem;color:var(--ink-faint);border-bottom:1px dashed currentColor;padding-bottom:1px}
.skins-replay:hover{color:var(--ink)}
/* moderne : panneau vitré sombre */
html[data-skin="moderne"] .skins{background:rgba(18,16,30,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-color:rgba(245,243,239,.14)}
html[data-skin="moderne"] .skins-seg{background:rgba(255,255,255,.05)}
html[data-skin="moderne"] .skins-seg button{color:var(--ink-dim)}
html[data-skin="moderne"] .skins-seg button:hover{color:var(--ink)}
/* retro : panneau jaune pâle bordé */
html[data-skin="retro"] .skins{max-width:none;border:3px ridge #c0c0c0;border-radius:0;background:#ffffe0;box-shadow:none;padding:12px 14px;margin:12px auto 16px}
html[data-skin="retro"] .skins-title{color:#000080}
html[data-skin="retro"] .skins-label{color:#000080;font-weight:700}

section{position:relative}
.manifesto,.offer,.method,.works,.perf,.faq,.contact{padding:clamp(80px,11vw,150px) 0}
.section-tag{font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:30px;display:flex;align-items:center;gap:12px}
.section-tag::before{content:"";width:30px;height:2px;background:var(--accent)}
.h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,4.5vw,3.3rem);line-height:1.06;letter-spacing:-.02em;margin-bottom:48px}
.big-statement{font-family:var(--font-display);font-weight:400;font-size:clamp(1.6rem,4vw,3rem);line-height:1.18;letter-spacing:-.015em;max-width:24ch}
.big-statement .w{display:inline-block}

.manifesto{border-top:1px solid var(--line)}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px}
.principle{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;box-shadow:var(--shadow)}
.principle h3{font-family:var(--font-display);font-size:1.4rem;margin-bottom:12px}
.principle p{color:var(--ink-dim);font-size:.96rem}

.offer{background:var(--bg-2)}
.offer-grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:stretch}
@media (min-width:720px){.offer-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.offer-grid{grid-template-columns:repeat(3,1fr)}}
.offer-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--radius);padding:clamp(22px,2.6vw,34px);box-shadow:var(--shadow)}
.offer-card--lite{border-top-color:var(--line)}
.offer-card--lite .price{color:var(--ink)}
.offer-card>.btn{align-self:flex-start;margin-top:6px}
.offer-card .offer-list{flex:1}
.offer-note{margin-top:12px;font-size:.82rem;color:var(--ink-faint)}
.offer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--line)}
.offer-head h3{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:8px}
.offer-head p{color:var(--ink-dim)}
.offer-price{text-align:right;flex:none}
.price{display:block;font-family:var(--font-display);font-size:clamp(2.4rem,6vw,3.6rem);line-height:1;color:var(--accent)}
.price-note{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.offer-list{list-style:none;margin:28px 0;display:grid;gap:13px}
.offer-list li{position:relative;padding-left:30px;color:var(--ink-dim)}
.offer-list li::before{content:"";position:absolute;left:2px;top:.5em;width:14px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.offer-foot{display:flex;gap:24px;align-items:center;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--line)}
.offer-maint{color:var(--ink-faint);font-size:.88rem;max-width:60ch;margin-top:28px}
.offer-maint strong{color:var(--ink-dim)}
.offer-reprise{margin-top:30px;display:flex;gap:20px;align-items:flex-start;padding:26px 28px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--surface)}
.reprise-icon{font-size:1.6rem;color:var(--accent);flex:none;line-height:1}
.offer-reprise p{color:var(--ink-dim)}
.offer-reprise strong{color:var(--ink)}

.method-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:18px}
.method-head .h2{margin-bottom:0}
.method-grid{position:relative;margin-top:60px;padding-left:58px}
.method-rail{position:absolute;left:19px;top:8px;bottom:8px;width:2px;background:var(--line)}
.method-rail-fill{position:absolute;top:0;left:0;width:100%;height:0;background:var(--accent)}
.steps{list-style:none;display:grid;gap:2px}
.step{position:relative;padding:30px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:none}
.step-num{position:absolute;left:-58px;top:32px;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--ink-dim);background:var(--bg);transition:.3s var(--ease)}
.step.active .step-num{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.step h3{font-family:var(--font-display);font-size:clamp(1.3rem,3vw,1.9rem);margin-bottom:10px}
.step p{color:var(--ink-dim);max-width:52ch}

.works{background:var(--bg-2)}
.works-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.work{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);box-shadow:var(--shadow);transition:transform .4s var(--ease),box-shadow .3s}
.work[data-tilt]:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.work-media{position:relative;display:block;overflow:hidden;background:#eef1f5}
.browser-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--bg-2);border-bottom:1px solid var(--line);font-size:.72rem;color:var(--ink-faint)}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:var(--line);flex:none}
.browser-bar u{text-decoration:none;margin-left:10px}
.work-media img{width:100%;transition:transform .6s var(--ease)}
.work-media:hover img{transform:scale(1.03)}
.work-shine{display:none}
.work-info{padding:24px 26px 28px}
.work-info h3{font-family:var(--font-display);font-size:1.4rem;margin-bottom:6px}
.work-meta{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.work-info p:last-child{color:var(--ink-dim);font-size:.94rem}
.work-cta{display:flex;flex-direction:column;justify-content:space-between;padding:30px 28px;min-height:200px;background:var(--surface);border-style:dashed}
.work-cta span{font-family:var(--font-display);font-size:1.5rem;line-height:1.1}
.work-cta i{font-size:1.5rem;align-self:flex-end;transition:transform .3s var(--ease)}
.work-cta:hover i{transform:translateX(8px)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:40px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:34px 22px;text-align:center;box-shadow:var(--shadow)}
.stat-num{display:block;font-family:var(--font-display);font-size:clamp(1.9rem,4vw,2.8rem);line-height:1;margin-bottom:10px;color:var(--accent)}
.stat-label{font-size:.82rem;color:var(--ink-dim)}
.perf-copy{color:var(--ink-dim);max-width:64ch;font-size:1rem}

.faq{background:var(--bg-2)}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:18px;font-family:var(--font-display);font-size:clamp(1.05rem,2.2vw,1.4rem)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary i{position:relative;width:15px;height:15px;flex:none}
.faq-item summary i::before,.faq-item summary i::after{content:"";position:absolute;background:var(--accent);transition:.3s var(--ease)}
.faq-item summary i::before{top:6.5px;left:0;width:15px;height:2px}
.faq-item summary i::after{top:0;left:6.5px;width:2px;height:15px}
.faq-item[open] summary i::after{transform:rotate(90deg);opacity:0}
.faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.faq-item[open] .faq-body{grid-template-rows:1fr}
.faq-body>p{overflow:hidden;color:var(--ink-dim);padding-bottom:24px;max-width:70ch}

.contact .big-statement{margin-bottom:18px}
.contact-sub{color:var(--ink-dim);margin-bottom:44px;font-size:1.02rem}
.form{max-width:600px;display:grid;gap:20px}
.hp{position:absolute;left:-9999px}
.field{position:relative}
.field input,.field textarea{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:22px 16px 9px;color:var(--ink);font:inherit;resize:vertical;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:118px}
.field label{position:absolute;left:16px;top:15px;color:var(--ink-faint);font-size:.94rem;pointer-events:none;transition:.18s var(--ease)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.field input:focus+label,.field textarea:focus+label,
.field input:not(:placeholder-shown)+label,.field textarea:not(:placeholder-shown)+label{top:7px;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)}
.form-status{font-size:.9rem;min-height:1.2em}
.form-status.ok{color:#087443}
.form-status.err{color:#c01818}
.form.sent .field,.form.sent button{opacity:.4;pointer-events:none}

.footer{border-top:1px solid var(--line);padding:64px 0 44px;background:var(--bg-2)}
.footer-inner{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap}
.footer-brand .brand-text{font-family:var(--font-display);font-size:1.1rem;font-weight:700;display:flex;flex-direction:column;line-height:1;margin-bottom:10px}
.footer-brand .brand-text i{font-style:normal;font-family:var(--font-body);font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim);margin-top:4px}
.footer-brand p{color:var(--ink-faint);font-size:.88rem;max-width:34ch}
.footer-nav{display:flex;flex-direction:column;gap:9px;font-size:.9rem;color:var(--ink-dim)}
.footer-nav a:hover{color:var(--ink)}
.footer-meta{display:flex;flex-direction:column;gap:9px;font-size:.85rem;color:var(--ink-faint);align-items:flex-start}
.footer-meta a:hover{color:var(--ink)}
.to-top{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;margin-top:4px;transition:.25s var(--ease)}
.to-top:hover{background:var(--ink);color:var(--bg)}

.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:1200;pointer-events:none}
.scroll-progress span{display:block;height:100%;width:0;background:var(--accent)}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   PEAU CLASSIQUE — hero clair
   ============================================================ */
html[data-skin="classique"] .hero{background:linear-gradient(180deg,#f3f6fb 0%,#ffffff 62%)}
html[data-skin="classique"] .hero::after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(60% 50% at 80% 10%,rgba(29,78,216,.09),transparent 70%)}
html[data-skin="classique"] .hero-title .accent>span{font-style:italic}

/* ============================================================
   PEAU MODERNE — sombre, WebGL, effets
   ============================================================ */
html[data-skin="moderne"]{
  --bg:#07070a;--bg-2:#0c0c11;--surface:#0b0b12;
  --ink:#f5f3ef;--ink-dim:#9d9cab;--ink-faint:#65646f;
  --line:rgba(245,243,239,.12);
  --accent:#c93cf0;--accent-2:#6d5cff;--accent-ink:#ffffff;
  --radius:18px;
  --shadow:none;--shadow-lg:0 20px 60px rgba(201,60,240,.18);
  --font-display:"Fraunces",Georgia,serif;
  --font-body:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --grad:linear-gradient(100deg,#6d5cff 0%,#c93cf0 48%,#ff8a3d 100%);
}
html[data-skin="moderne"] .grain{display:block;position:fixed;inset:0;z-index:1150;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}
html[data-skin="moderne"] .cursor{display:block;position:fixed;top:0;left:0;z-index:1140;pointer-events:none;mix-blend-mode:difference}
.cursor-dot,.cursor-ring{position:absolute;top:0;left:0;border-radius:50%;transform:translate(-50%,-50%)}
.cursor-dot{width:7px;height:7px;background:#fff}
.cursor-ring{width:38px;height:38px;border:1px solid rgba(255,255,255,.7);transition:width .3s var(--ease),height .3s var(--ease),background .3s}
.cursor.is-hot .cursor-ring{width:62px;height:62px;background:rgba(255,255,255,.12)}
.cursor.is-hot .cursor-dot{opacity:0}
.cursor-label{position:absolute;top:0;left:0;transform:translate(-50%,-50%);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;white-space:nowrap;opacity:0;transition:opacity .2s}
.cursor.has-label .cursor-label{opacity:1}
@media (hover:none),(pointer:coarse){html[data-skin="moderne"] .cursor{display:none}}

html[data-skin="moderne"] .hero-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.92}
html[data-skin="moderne"] .hero-fallback{display:block;position:absolute;inset:0;z-index:0;background:radial-gradient(60% 60% at 20% 20%,rgba(109,92,255,.5),transparent 60%),radial-gradient(60% 60% at 80% 30%,rgba(201,60,240,.45),transparent 60%),radial-gradient(70% 70% at 60% 90%,rgba(255,138,61,.4),transparent 60%),#05050a}
html[data-skin="moderne"] .hero-canvas+.hero-fallback{display:none}
html[data-skin="moderne"] .hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,7,10,.3) 0%,rgba(7,7,10,.1) 40%,rgba(7,7,10,.85) 100%)}
html[data-skin="moderne"] .hero-title{font-weight:400;font-size:clamp(2.8rem,8.5vw,7rem);line-height:.98}
html[data-skin="moderne"] .hero-title .line>span{transform:translateY(110%);will-change:transform}
html[data-skin="moderne"] .hero-title .accent>span{transform:translateY(110%);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;font-weight:500}
html[data-skin="moderne"] .eyebrow{color:var(--ink)}
html[data-skin="moderne"] .btn-solid{background:var(--grad);background-size:180% 180%;animation:gradShift 8s ease infinite}
@keyframes gradShift{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
html[data-skin="moderne"] .btn-pill:hover{color:#fff}
html[data-skin="moderne"] .brand-mark{background:var(--grad);border-radius:50%;box-shadow:0 0 18px rgba(201,60,240,.55)}
html[data-skin="moderne"] .price{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
html[data-skin="moderne"] .stat-num{color:#cdbcff}
html[data-skin="moderne"] .stat{background:rgba(255,255,255,.03)}
html[data-skin="moderne"] .section-tag::before{background:var(--grad)}
html[data-skin="moderne"] .principle,
html[data-skin="moderne"] .offer-card,
html[data-skin="moderne"] .work,
html[data-skin="moderne"] .stat{box-shadow:none}
html[data-skin="moderne"] .work-shine{display:block;position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.13),transparent);transform:skewX(-18deg);transition:left .8s var(--ease)}
html[data-skin="moderne"] .work-media:hover .work-shine{left:130%}
/* bandeau défilant retiré de la peau moderne */
@keyframes marq{to{transform:translateX(-50%)}}
html[data-skin="moderne"] .big-statement .w{opacity:.12;transition:opacity .5s var(--ease)}
html[data-skin="moderne"] .big-statement .w.lit{opacity:1}

/* ============================================================
   PEAU RÉTRO 2000 — vrai design d'époque
   ============================================================ */
html[data-skin="retro"]{
  --bg:#008080;--bg-2:#ffffff;--surface:#ffffff;
  --ink:#000000;--ink-dim:#000080;--ink-faint:#333333;
  --line:#808080;
  --accent:#000080;--accent-2:#000080;--accent-ink:#ffffff;
  --radius:0px;--maxw:none;--pad:0px;
  --shadow:none;--shadow-lg:none;
  --font-display:"Times New Roman",Times,serif;
  --font-body:"Times New Roman",Times,serif;
}
html[data-skin="retro"] body{
  background:#008080 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='20' height='20' fill='%23008080'/%3E%3Cpath d='M0 0h1v1H0zM10 10h1v1h-1z' fill='%2340a0a0'/%3E%3C/svg%3E");
  font-size:15px;line-height:1.5;
}
html[data-skin="retro"] .scroll-progress{display:none}
html[data-skin="retro"] .retro-marquee{display:block;background:#000080;color:#ffff00;font-weight:700;border-bottom:2px solid #c0c0c0;padding:4px 0}
html[data-skin="retro"] .retro-marquee marquee{font-size:14px}

/* Cadre central façon site 2003 */
html[data-skin="retro"] main{max-width:780px;margin:0 auto;background:#ffffff;border:3px ridge #c0c0c0}
html[data-skin="retro"] .nav{position:static;background:#000080}
html[data-skin="retro"] .nav::before{display:none}
html[data-skin="retro"] .nav-inner{max-width:780px;margin:0 auto;padding:8px 14px;flex-wrap:wrap;gap:10px}
html[data-skin="retro"] .brand-mark{display:none}
html[data-skin="retro"] .brand-text{color:#ffffff;font-family:"Times New Roman",serif;font-size:1.25rem}
html[data-skin="retro"] .brand-text i{color:#ffff00;font-family:inherit;letter-spacing:.1em}
html[data-skin="retro"] .nav-links{gap:0;flex-wrap:wrap}
html[data-skin="retro"] .nav-links a{color:#ffffff;text-decoration:underline;padding:2px 8px;border-left:1px solid #6a6ab0}
html[data-skin="retro"] .nav-links a:first-child{border-left:none}
html[data-skin="retro"] .nav-links a:hover{color:#ffff00}
html[data-skin="retro"] .nav .btn-pill{display:none}
html[data-skin="retro"] .nav-burger{display:none}

html[data-skin="retro"] .wrap{max-width:none;padding:14px 22px}
html[data-skin="retro"] .hero{min-height:0;display:block;padding:0;overflow:visible}
html[data-skin="retro"] .hero-canvas,html[data-skin="retro"] .hero-fallback,html[data-skin="retro"] .hero-scroll,html[data-skin="retro"] .marquee,html[data-skin="retro"] .grain,html[data-skin="retro"] .cursor{display:none}
html[data-skin="retro"] .hero-inner{display:block;max-width:none;padding:16px 22px;text-align:center}
html[data-skin="retro"] .hero-main{order:2}
html[data-skin="retro"] .hero::after{display:none}
html[data-skin="retro"] .eyebrow{color:#000080;letter-spacing:0;text-transform:none;font-size:.9rem;margin-bottom:6px}
html[data-skin="retro"] .eyebrow i{display:none}
html[data-skin="retro"] .hero-title{font-size:2.1rem;font-weight:700;color:#000080;line-height:1.15;margin:6px 0 4px;letter-spacing:0}
html[data-skin="retro"] .hero-title .line{display:inline;overflow:visible}
html[data-skin="retro"] .hero-title .line>span,html[data-skin="retro"] .hero-title .accent>span{display:inline;transform:none;color:#000080;background:none;-webkit-text-fill-color:#000080;font-style:normal}
html[data-skin="retro"] .hero-title .accent>span{color:#ff0000;-webkit-text-fill-color:#ff0000}
html[data-skin="retro"] .hero-sub{margin:10px auto 14px;color:#000;max-width:60ch;font-size:15px}
html[data-skin="retro"] .hero-sub strong{color:#ff0000}
html[data-skin="retro"] .hero-cta{justify-content:center}
html[data-skin="retro"] .hero-inner::before{content:"« Bienvenue sur notre site Internet ! »";display:block;font-size:1.1rem;color:#008000;font-weight:700;margin-bottom:8px}
html[data-skin="retro"] .hero-inner::after{content:"";display:block;height:4px;margin:16px auto 0;max-width:400px;background:repeating-linear-gradient(90deg,#000080 0 8px,#ff0000 8px 16px)}

/* Boutons façon Windows 98 */
html[data-skin="retro"] .btn,
html[data-skin="retro"] .skins-seg button,
html[data-skin="retro"] .to-top{border-radius:0;border:2px outset #f0f0f0;background:#c0c0c0;color:#000;font-family:Tahoma,"MS Sans Serif",Arial,sans-serif;font-size:12px;font-weight:400;padding:5px 14px;box-shadow:none;animation:none}
html[data-skin="retro"] .btn:hover,html[data-skin="retro"] .skins-seg button:hover{filter:none;background:#c8c8c8}
html[data-skin="retro"] .btn:active,html[data-skin="retro"] .skins-seg button:active{border-style:inset}
html[data-skin="retro"] .btn-solid{background:#c0c0c0;color:#000}
html[data-skin="retro"] html[data-skin="retro"] .skins-seg [data-skin-btn]{}
html[data-skin="retro"] .skins{align-items:center;margin:14px auto}
html[data-skin="retro"] .skins-label{color:#000080;letter-spacing:0;text-transform:none;font-weight:700}
html[data-skin="retro"] .skins-seg [data-skin-btn]{color:#000!important}
html[data-skin="retro"] .skins-seg [data-skin-btn]:disabled,
html[data-skin="retro"][data-skin="retro"] .skins-seg [data-skin-btn="retro"]{border-style:inset;background:#a8a8a8}
html[data-skin="retro"] .skins-replay{color:#0000ee;border-bottom-style:solid;font-family:Tahoma,Arial,sans-serif;font-size:12px}

html[data-skin="retro"] a{color:#0000ee;text-decoration:underline}
html[data-skin="retro"] a:visited{color:#551a8b}

html[data-skin="retro"] .manifesto,html[data-skin="retro"] .offer,html[data-skin="retro"] .method,
html[data-skin="retro"] .works,html[data-skin="retro"] .perf,html[data-skin="retro"] .faq,html[data-skin="retro"] .contact{padding:6px 0;background:#ffffff;border-top:1px solid #c0c0c0}
html[data-skin="retro"] .section-tag{color:#000080;letter-spacing:0;text-transform:uppercase;font-weight:700;font-size:.8rem;margin-bottom:6px}
html[data-skin="retro"] .section-tag::before{content:"» ";width:auto;height:auto;background:none}
html[data-skin="retro"] .h2,html[data-skin="retro"] .big-statement{font-size:1.5rem;color:#000080;font-weight:700;margin-bottom:8px;border-bottom:2px solid #000080;padding-bottom:4px;max-width:none;line-height:1.2}
html[data-skin="retro"] .big-statement .w{opacity:1}
html[data-skin="retro"] .principles{grid-template-columns:1fr;gap:10px;margin-top:12px}
html[data-skin="retro"] .principle{border:1px solid #808080;background:#ffffe0;border-radius:0;padding:12px 16px;box-shadow:none}
html[data-skin="retro"] .principle h3{color:#000080;font-size:1.1rem}
html[data-skin="retro"] .principle h3::before{content:"► "}
html[data-skin="retro"] .principle p{color:#000}

html[data-skin="retro"] .offer-grid{grid-template-columns:1fr;gap:12px}
html[data-skin="retro"] .offer-card{border:2px inset #808080;border-radius:0;box-shadow:none;background:#f8f8f8;padding:16px}
html[data-skin="retro"] .offer-card--lite .price{color:#ff0000}
html[data-skin="retro"] .offer-head{border-bottom:1px solid #808080}
html[data-skin="retro"] .offer-head h3{color:#000080}
html[data-skin="retro"] .offer-head p,html[data-skin="retro"] .step p,html[data-skin="retro"] .work-info p:last-child,html[data-skin="retro"] .perf-copy,html[data-skin="retro"] .contact-sub,html[data-skin="retro"] .offer-maint{color:#000}
html[data-skin="retro"] .price{color:#ff0000;font-size:2.4rem;font-weight:700}
html[data-skin="retro"] .price-note{color:#008000;font-weight:700;animation:retroBlink 1s steps(1) infinite}
@keyframes retroBlink{50%{opacity:0}}
html[data-skin="retro"] .offer-list li::before{content:"►";border:none;transform:none;width:auto;height:auto;left:0;top:0;color:#000080}
html[data-skin="retro"] .offer-list li{padding-left:20px}
html[data-skin="retro"] .offer-reprise{border:1px dashed #808080;border-radius:0;background:#ffffe0}
html[data-skin="retro"] .reprise-icon{color:#000080}

html[data-skin="retro"] .method-head{display:block;overflow:hidden;white-space:nowrap;border:2px inset #808080;background:#000;margin-bottom:6px}
html[data-skin="retro"] .method-head .section-tag{color:#0f0;padding:4px 8px 0;font-family:"Courier New",monospace}
html[data-skin="retro"] .method .h2{display:inline-block;border-bottom:none;padding:2px 0 6px;margin:0;color:#ffff00;text-transform:uppercase;font-family:"Courier New",monospace;font-weight:700;letter-spacing:.1em;animation:retroSlide 7s linear infinite}
@keyframes retroSlide{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
html[data-skin="retro"] .method-grid{padding-left:0;margin-top:12px}
html[data-skin="retro"] .method-rail{display:none}
html[data-skin="retro"] .steps{display:block}
html[data-skin="retro"] .step{border-bottom:1px dotted #808080;padding:12px 0}
html[data-skin="retro"] .step-num{position:static;display:inline-flex;width:26px;height:26px;border:1px solid #000080;border-radius:0;background:#000080;color:#fff;margin-right:8px;vertical-align:middle}
html[data-skin="retro"] .step h3{display:inline;color:#000080;font-size:1.15rem}

html[data-skin="retro"] .works-grid{grid-template-columns:1fr;gap:14px}
html[data-skin="retro"] .work{border:2px inset #808080;border-radius:0;box-shadow:none;background:#fff}
html[data-skin="retro"] .work[data-tilt]:hover{transform:none;box-shadow:none}
html[data-skin="retro"] .browser-bar{background:#000080;color:#fff;border-bottom:1px solid #000}
html[data-skin="retro"] .browser-bar i{background:#c0c0c0;border-radius:0}
html[data-skin="retro"] .work-media img{border:2px inset #808080}
html[data-skin="retro"] .work-media:hover img{transform:none}
html[data-skin="retro"] .work-info h3{color:#000080}
html[data-skin="retro"] .work-meta{color:#008000}
html[data-skin="retro"] .work-cta{border:2px inset #808080;background:#ffffe0;min-height:0;padding:14px}

html[data-skin="retro"] .stats{grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}
html[data-skin="retro"] .stat{border:2px inset #808080;border-radius:0;box-shadow:none;padding:12px}
html[data-skin="retro"] .stat-num{color:#000080;font-weight:700}

html[data-skin="retro"] .faq-list{border-top:1px solid #808080}
html[data-skin="retro"] .faq-item{border-bottom:1px dotted #808080}
html[data-skin="retro"] .faq-item summary{padding:10px 0;color:#000080;font-size:1.05rem}
html[data-skin="retro"] .faq-item summary i::before,html[data-skin="retro"] .faq-item summary i::after{background:#000080}
html[data-skin="retro"] .faq-body>p{color:#000;padding-bottom:12px}

html[data-skin="retro"] .form{max-width:none}
html[data-skin="retro"] .field input,html[data-skin="retro"] .field textarea{border:2px inset #808080;border-radius:0;background:#fff;padding:16px 8px 6px}
html[data-skin="retro"] .field input:focus,html[data-skin="retro"] .field textarea:focus{box-shadow:none;border-color:#000080}
html[data-skin="retro"] .field label{color:#000080}

html[data-skin="retro"] .footer{background:#ffffff;border-top:2px solid #000080;padding:14px 0 8px;max-width:780px;margin:0 auto;border-left:3px ridge #c0c0c0;border-right:3px ridge #c0c0c0}
html[data-skin="retro"] .footer-inner{justify-content:center;text-align:center;flex-direction:column;gap:8px}
html[data-skin="retro"] .footer-brand .brand-text{color:#000080;align-items:center}
html[data-skin="retro"] .footer-nav{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px 10px}
html[data-skin="retro"] .footer-meta{align-items:center}
html[data-skin="retro"] .to-top{border-radius:0}

/* Bloc rétro d'époque (compteur, en construction, webring, badges) */
html[data-skin="retro"] .retro-extras{display:block;max-width:780px;margin:0 auto;background:#fff;border:3px ridge #c0c0c0;border-top:none;text-align:center;padding:12px 16px 18px;font-size:13px}
html[data-skin="retro"] .retro-extras hr{border:none;border-top:1px solid #808080;margin:8px 0}
.retro-counter{margin:8px 0}
.retro-counter span{font-family:"Courier New",monospace;background:#000;color:#00ff00;padding:2px 8px;border:1px solid #00ff00;letter-spacing:3px}
.retro-construction{margin:10px 0;color:#ff0000;font-weight:700;animation:retroBlink 1.1s steps(1) infinite}
.retro-webring{margin:8px 0;font-size:12px}
.retro-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:12px 0}
.retro-badges .rb{width:88px;height:31px;display:inline-flex;align-items:center;justify-content:center;text-align:center;font-family:Arial,sans-serif;font-size:9px;line-height:1.05;border:1px solid #000}
.rb-ns{background:#000;color:#fff}
.rb-ie{background:#fff;color:#0000cc;border-color:#0000cc}
.rb-800{background:#ffcc00;color:#000}
.rb-html{background:#fff;color:#ff6600;border-color:#ff6600}
.retro-guestbook{margin:10px 0;font-size:12px}
.retro-copy{margin-top:10px;font-size:11px;color:#333}

/* ============================================================
   INTRO + OVERLAY MODEM
   ============================================================ */
/* --- Intro narrée : gros message PAR-DESSUS le site qui se transforme --- */
.intro{
  position:fixed;inset:0;z-index:1350;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px;
  background:rgba(255,255,255,.55);color:#101828;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  transition:background .55s var(--ease),color .55s var(--ease),opacity .6s var(--ease),visibility .6s;
  animation:introFailsafe 0s linear 16s forwards;
}
.intro[hidden]{display:none}
.intro.out{opacity:0;visibility:hidden;pointer-events:none}
@keyframes introFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
.intro-inner{max-width:min(92vw,820px);display:flex;flex-direction:column;gap:18px;align-items:center}
.intro-kicker{font-size:.8rem;letter-spacing:.34em;text-transform:uppercase;opacity:.65;font-weight:600}
.intro-msg{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2rem,6.2vw,4.2rem);line-height:1.12;letter-spacing:-.02em;text-shadow:0 2px 24px rgba(255,255,255,.6)}
.intro-hint{font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;opacity:.6;min-height:1em;font-weight:600}
.intro-skip-btn{position:absolute;right:20px;bottom:20px;background:rgba(0,0,0,.35);color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:100px;padding:10px 20px;font-size:.84rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .2s}
.intro-skip-btn:hover{background:rgba(0,0,0,.6)}
/* voiles teintés par phase — on voit le site derrière */
.intro[data-phase="open"]{background:#08080c;color:#f4f2ee;-webkit-backdrop-filter:none;backdrop-filter:none}
.intro[data-phase="open"] .intro-msg{text-shadow:none}
.intro[data-phase="classique"]{background:rgba(240,245,252,.6);color:#0f1b33}
.intro[data-phase="moderne"]{background:rgba(9,8,16,.6);color:#f5f3ef}
.intro[data-phase="moderne"] .intro-msg{font-family:"Fraunces",Georgia,serif;font-style:italic;color:#e7defb;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.intro[data-phase="retro"]{background:rgba(0,120,120,.62);color:#ffffff}
.intro[data-phase="retro"] .intro-msg{font-family:"Comic Sans MS","Trebuchet MS","Times New Roman",serif;color:#ffff00;text-shadow:3px 3px 0 #000080}
.intro[data-phase="retro"] .intro-kicker,.intro[data-phase="retro"] .intro-hint{color:#fff;opacity:.9}

/* --- Libellé de peau (changement manuel) --- */
.skin-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);
  z-index:1300;pointer-events:none;
  background:rgba(16,24,40,.92);color:#fff;
  padding:11px 22px;border-radius:100px;font-size:.9rem;font-weight:500;
  opacity:0;transition:opacity .3s var(--ease),transform .3s var(--ease);
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}
.skin-toast.show{opacity:1;transform:translate(-50%,0)}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .nav-links{position:fixed;inset:0;flex-direction:column;justify-content:center;align-items:center;gap:30px;background:color-mix(in srgb,var(--bg) 97%,transparent);font-size:1.5rem;font-family:var(--font-display);opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;transition:opacity .35s var(--ease),transform .4s var(--ease),visibility .35s}
  .nav-links.open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
  .nav-burger{display:block;z-index:1001}
  html[data-skin="classique"] .nav .btn-pill,html[data-skin="moderne"] .nav .btn-pill{display:none}
  html[data-skin="retro"] .nav-links{position:static;inset:auto;opacity:1;visibility:visible;transform:none;pointer-events:auto;flex-direction:row;background:none;font-size:1rem;font-family:inherit;transition:none}
  html[data-skin="retro"] .nav-burger{display:none}
}
@media (max-width:760px){
  .principles{grid-template-columns:1fr}
  .works-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .hero-scroll{display:none}
  .offer-head{flex-direction:column}
  .offer-price{text-align:left}
  .method-grid{padding-left:44px}
  .step-num{left:-44px;width:34px;height:34px}
  html[data-skin="retro"] .method-grid{padding-left:0}
  html[data-skin="retro"] .step-num{left:auto}
}

/* ============================================================
   MOUVEMENT RÉDUIT
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .reveal{opacity:1;transform:none}
  html[data-skin="moderne"] .hero-title .line>span,html[data-skin="moderne"] .hero-title .accent>span{transform:none}
  html[data-skin="moderne"] .big-statement .w{opacity:1}
}