@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-tight-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-tight-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-tight-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/inter-tight-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/inter-tight-latin-900-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2')}

:root{--blanc:#fff;--noir:#0A0A0A;--oranje:#FF4F00;--gris:#E5E5E5;--graphite:#4A4A4A;--fond:#F6F6F4;
--carbone:#0A0A0A;--signal:#FF4F00;--glace:#F6F6F4;
--sans:"Inter Tight",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--blanc);color:var(--noir);font:500 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
.w{max-width:1180px;margin:0 auto;padding:0 24px}
@media(max-width:600px){.w{padding:0 16px}}
.mono{font-family:var(--mono)}
.k{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.k b{color:var(--oranje);font-weight:600}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 13px var(--mono);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;padding:14px 20px;border:2px solid var(--noir);transition:.15s}
.btn.o{background:var(--oranje);border-color:var(--oranje);color:#fff}
.btn.o:hover{background:var(--noir);border-color:var(--noir)}
.btn.n:hover{background:var(--noir);color:#fff}
.io{display:inline-block;background:var(--oranje);color:#fff;font:600 .42em var(--mono);letter-spacing:0;padding:.12em .35em;border-radius:2px;transform:rotate(-12deg) translateY(-.9em);box-shadow:2px 2px 0 var(--noir);margin-left:5px;vertical-align:baseline}

/* NAV */
nav.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--gris)}
nav.top .w{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo .sq{width:38px;height:38px;background:var(--oranje);color:#fff;display:grid;place-items:center;font:900 14px var(--sans);letter-spacing:-.025em}
.logo .wm{font:900 21px var(--sans);letter-spacing:-.02em}
.links{display:flex;gap:22px;font:500 13px var(--mono)}
.links a{text-decoration:none}
.links a:hover{color:var(--oranje)}
.lang{font:500 12px var(--mono);border:1px solid var(--gris);padding:4px 8px;white-space:nowrap}.lang a{color:inherit}
@media(max-width:960px){.links{display:none}}
.logo .wm{white-space:nowrap}
@media(max-width:600px){nav.top .w{gap:8px}.lang{font-size:10px;padding:3px 5px}.logo .wm{font-size:14px}nav.top .btn.o{padding:8px 9px!important;font-size:10px;white-space:nowrap}}@media(max-width:400px){nav.top .btn.o{display:none}}

/* HERO */
.hero{padding:88px 0 64px;border-bottom:8px solid var(--oranje)}
.hero .k{display:flex;flex-wrap:wrap;gap:8px 22px}
.hero h1{font:900 clamp(46px,9vw,118px)/.9 var(--sans);letter-spacing:-.03em;text-transform:uppercase;margin:28px 0 30px}
.hero h1 span{display:block}
.hero h1 .o{color:var(--oranje)}
.hero .row{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end}
.hero p{font-size:20px;line-height:1.45;color:var(--graphite);max-width:560px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:860px){.hero .row{grid-template-columns:1fr}.hero .cta{justify-content:flex-start}}

/* PILIERS */
.piliers{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--gris)}
.pil{border-right:1px solid var(--gris);border-bottom:1px solid var(--gris);padding:30px 24px 26px;display:flex;flex-direction:column;gap:12px;text-decoration:none;min-height:300px;transition:.15s}
.pil:hover{background:var(--noir);color:#fff}
.pil:hover .d{color:#bdbdbd}
.pil .n{font:600 12px var(--mono);color:var(--oranje)}
.pil h3{font:900 26px/1 var(--sans);letter-spacing:-.025em;text-transform:uppercase}
.pil .d{color:var(--graphite);font-size:15px;flex:1}
.pil .p{font:600 13px var(--mono);border-top:1px solid currentColor;padding-top:12px;display:flex;justify-content:space-between}
@media(max-width:960px){.piliers{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.piliers{grid-template-columns:1fr}.pil{min-height:0}}

/* SECTIONS */
section.s{padding:96px 0;border-bottom:1px solid var(--gris)}
section.s.gris{background:var(--fond)}
.sh{display:grid;grid-template-columns:220px 1fr;gap:32px;margin-bottom:48px}
.sh .num{font:900 88px/.8 var(--sans);letter-spacing:-.035em;color:var(--oranje)}
.sh h2{font:900 clamp(34px,5vw,58px)/.95 var(--sans);letter-spacing:-.03em;text-transform:uppercase}
.sh p{margin-top:16px;font-size:18px;color:var(--graphite);max-width:640px}
@media(max-width:760px){.sh{grid-template-columns:1fr;gap:8px}.sh .num{font-size:56px}}

/* PRINCIPES */
.regles{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--noir)}
.regle{padding:26px 24px 26px 0;border-right:1px solid var(--gris)}
.regle:last-child{border-right:0}
.regle+.regle{padding-left:24px}
.regle .mono{font-size:12px;color:var(--oranje);font-weight:600}
.regle h4{font:800 22px/1.1 var(--sans);letter-spacing:-.03em;margin:10px 0 8px}
.regle p{color:var(--graphite);font-size:15px}
@media(max-width:760px){.regles{grid-template-columns:1fr}.regle,.regle+.regle{padding:22px 0;border-right:0;border-bottom:1px solid var(--gris)}}

/* TARIFS SITES */
.prix{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.carte{background:#fff;border:2px solid var(--noir);padding:24px;display:flex;flex-direction:column;gap:10px;position:relative}
.carte.star{border-color:var(--oranje);box-shadow:6px 6px 0 var(--oranje)}
.carte .tag{position:absolute;top:-12px;left:18px;background:var(--oranje);color:#fff;font:600 11px var(--mono);padding:3px 8px;text-transform:uppercase}
.carte .nom{font:600 13px var(--mono);text-transform:uppercase}
.carte .m{font:900 44px/1 var(--sans);letter-spacing:-.03em}
.carte .m small{font:500 13px var(--mono);letter-spacing:0;color:var(--graphite)}
.carte ul{list-style:none;font-size:14px;color:var(--graphite);border-top:1px solid var(--gris);padding-top:10px;display:grid;gap:6px}
.carte li::before{content:"→ ";color:var(--oranje);font-family:var(--mono)}
.note{font:12px/1.6 var(--mono);color:var(--graphite);margin-top:20px}
@media(max-width:960px){.prix{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.prix{grid-template-columns:1fr}}

/* TRILIO */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
@media(max-width:860px){.duo{grid-template-columns:1fr}}
.liste{list-style:none;border-top:2px solid var(--noir)}
.liste li{display:grid;grid-template-columns:48px 1fr;padding:16px 0;border-bottom:1px solid var(--gris);font-size:16px}
.liste li span{font:600 12px var(--mono);color:var(--oranje);padding-top:3px}
.bloc-prix{background:var(--noir);color:#fff;padding:32px}
.bloc-prix .m{font:900 72px/1 var(--sans);letter-spacing:-.035em;margin:10px 0}
.bloc-prix .m small{font:500 14px var(--mono);letter-spacing:0;color:#aaa}
.bloc-prix p{color:#cfcfcf;font-size:15px}
.bloc-prix .btn{margin-top:22px;border-color:#fff;color:#fff}
.bloc-prix .btn:hover{background:#fff;color:var(--noir)}

/* JARVIS — identité propre, dans le site */
.jarvis{background:var(--carbone);color:#E8E8E8;padding:96px 0;border-bottom:8px solid var(--oranje)}
.jarvis .sh .num{color:var(--signal)}
.jarvis .sh p{color:#9AA6B4}
.jhead{display:flex;align-items:center;gap:14px;font:600 30px var(--mono);letter-spacing:.3em;color:#fff}

.cur{display:inline-block;width:.55em;height:1em;background:var(--signal);vertical-align:-.12em;margin-left:-.2em;animation:cl 1.1s steps(1) infinite}
@keyframes cl{50%{opacity:0}}
.console{background:#000;border:1px solid #2a2a2a;font:14px/1.9 var(--mono);padding:24px;color:#C5D0DB}
.console .u{color:#7E8A97}
.console .j{color:var(--signal)}
.console .ok{color:#fff}
.caps{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#2a2a2a;border:1px solid #2a2a2a;margin-top:28px}
.caps div{background:var(--carbone);padding:18px}
.caps b{display:block;font:600 12px var(--mono);color:var(--signal);margin-bottom:4px;text-transform:uppercase;letter-spacing:.06em}
.caps span{font-size:14px;color:#9AA6B4}
.aval{margin-top:26px;font:12px var(--mono);color:#7E8A97}
.aval .io{font-size:11px;transform:rotate(-10deg);box-shadow:none;vertical-align:1px}
@media(max-width:560px){.caps{grid-template-columns:1fr}.jhead{font-size:22px}}

/* PROSPECTION */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chips span{font:500 13px var(--mono);border:1px solid var(--noir);padding:6px 10px}

/* METHODE */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--noir)}
.et{padding:22px 20px 22px 0}
.et+.et{padding-left:20px;border-left:1px solid var(--gris)}
.et .mono{font-size:12px;color:var(--oranje);font-weight:600}
.et h4{font:800 19px/1.15 var(--sans);letter-spacing:-.02em;margin:8px 0 6px}
.et p{font-size:14px;color:var(--graphite)}
@media(max-width:860px){.etapes{grid-template-columns:1fr 1fr}.et:nth-child(3){padding-left:0;border-left:0}}
@media(max-width:520px){.etapes{grid-template-columns:1fr}.et,.et+.et{padding:18px 0;border-left:0;border-bottom:1px solid var(--gris)}}

/* FAQ */
details{border-bottom:1px solid var(--gris);padding:20px 0}
details summary{cursor:pointer;font:700 19px var(--sans);letter-spacing:-.02em;list-style:none;display:flex;justify-content:space-between;gap:16px}
details summary::after{content:"+";font:600 20px var(--mono);color:var(--oranje)}
details[open] summary::after{content:"–"}
details p{margin-top:10px;color:var(--graphite);max-width:760px}

/* CTA + FOOTER */
.cta-band{background:var(--oranje);color:#fff;padding:88px 0}
.cta-band h2{font:900 clamp(40px,7vw,96px)/.9 var(--sans);letter-spacing:-.03em;text-transform:uppercase}
.cta-band .row{display:flex;justify-content:space-between;align-items:end;gap:28px;flex-wrap:wrap}
.cta-band .btn{background:var(--noir);border-color:var(--noir);color:#fff}
.cta-band .btn:hover{background:#fff;color:var(--noir);border-color:#fff}
footer{background:var(--noir);color:#bdbdbd;padding:56px 0 40px;font-size:14px}
footer .g{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
footer h5{font:600 12px var(--mono);color:#fff;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
footer a{text-decoration:none;display:block;margin:4px 0}
footer a:hover{color:var(--oranje)}
footer .wm{font:900 26px var(--sans);letter-spacing:-.025em;color:#fff}
footer .legal{border-top:1px solid #2a2a2a;margin-top:40px;padding-top:18px;font:12px/1.7 var(--mono);color:#8a8a8a;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(max-width:760px){footer .g{grid-template-columns:1fr 1fr}}

/* v3 : RDV mis en avant + nouvelles offres */
.feat{background:var(--noir);color:#fff;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;padding:44px 40px;margin-top:40px;border-left:8px solid var(--oranje)}
.feat .n{font:600 12px var(--mono);color:var(--oranje)}
.feat h3{font:900 clamp(32px,4.4vw,52px)/.95 var(--sans);letter-spacing:-.03em;text-transform:uppercase;margin:12px 0 14px}
.feat p{color:#cfcfcf;font-size:17px;max-width:520px}
.feat ul{list-style:none;display:grid;gap:10px;align-content:start}
.feat li{border-bottom:1px solid #2a2a2a;padding-bottom:10px;font-size:15px}
.feat li::before{content:"→ ";color:var(--oranje);font-family:var(--mono)}
.feat .btn{margin-top:24px}
@media(max-width:860px){.feat{grid-template-columns:1fr;padding:32px 22px}}
.piliers.six{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.piliers.six{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.piliers.six{grid-template-columns:1fr}}
.pil{min-height:250px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--noir)}
.trio>div{padding:26px 24px 10px 0}
.trio>div+div{padding-left:24px;border-left:1px solid var(--gris)}
.trio .mono{font-size:12px;color:var(--oranje);font-weight:600}
.trio h3{font:900 26px/1 var(--sans);letter-spacing:-.025em;text-transform:uppercase;margin:10px 0 10px}
.trio p{color:var(--graphite);font-size:15px;margin-bottom:12px}
.trio ul{list-style:none;display:grid;gap:6px;font-size:14px}
.trio li::before{content:"→ ";color:var(--oranje);font-family:var(--mono)}
.trio .px{font:600 13px var(--mono);border-top:1px solid var(--noir);padding-top:10px;margin-top:16px}
@media(max-width:860px){.trio{grid-template-columns:1fr}.trio>div,.trio>div+div{padding:22px 0;border-left:0;border-bottom:1px solid var(--gris)}}
.recu{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--gris);border:1px solid var(--gris);margin-top:28px}
.recu div{background:#fff;padding:18px}
.recu b{display:block;font:600 12px var(--mono);color:var(--oranje);text-transform:uppercase;margin-bottom:6px}
.recu span{font-size:14px;color:var(--graphite)}
@media(max-width:860px){.recu{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.recu{grid-template-columns:1fr}}

/* formulaire */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:#fff;color:var(--noir);padding:28px;border:2px solid var(--noir);box-shadow:8px 8px 0 var(--noir)}
.form label{display:grid;gap:6px;font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.05em}
.form input,.form select,.form textarea{font:500 16px var(--sans);padding:12px;border:2px solid var(--noir);border-radius:0;background:#fff;color:var(--noir);width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid var(--oranje);outline-offset:0}
.form .full{grid-column:1/-1}
.form textarea{min-height:120px;resize:vertical}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form small{font:12px/1.5 var(--sans);color:var(--graphite);text-transform:none;letter-spacing:0}
.form .btn{justify-content:center;cursor:pointer}
.form .etat{grid-column:1/-1;font:600 14px var(--sans);min-height:20px}
.form .etat.ok{color:#0a7a2f}.form .etat.ko{color:#b3261e}
@media(max-width:700px){.form{grid-template-columns:1fr;padding:20px}}
.cta-band .row{align-items:start}
.cta-band .row>div{flex:1 1 440px;max-width:620px}
/* cookies */
.ck{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:760px;margin:0 auto;background:#fff;color:var(--noir);border:2px solid var(--noir);box-shadow:8px 8px 0 var(--noir);padding:20px 22px;display:none}
.ck.on{display:block}
.ck h2{font:800 18px var(--sans);letter-spacing:-.02em;margin-bottom:6px}
.ck p{font-size:14px;color:var(--graphite);margin-bottom:14px}
.ck .bt{display:flex;gap:10px;flex-wrap:wrap}
.ck .btn{padding:11px 14px;font-size:12px;cursor:pointer;background:#fff}
.ck .btn.o{background:var(--oranje)}
.ck .opts{display:none;border-top:1px solid var(--gris);margin:4px 0 14px;padding-top:12px;font-size:14px}
.ck .opts.on{display:grid;gap:10px}
.ck .opts label{display:flex;gap:10px;align-items:flex-start}
.ck .opts input{margin-top:4px;accent-color:var(--oranje);width:18px;height:18px}
.linkbtn{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0;text-decoration:none;display:block;margin:4px 0}
.linkbtn:hover{color:var(--oranje)}
/* pages légales */
.legal-page{padding:72px 0 96px}
.legal-page h1{font:900 clamp(36px,6vw,64px)/.95 var(--sans);letter-spacing:-.03em;text-transform:uppercase;margin-bottom:36px}
.legal-page h2{font:800 22px var(--sans);letter-spacing:-.02em;margin:34px 0 10px;padding-top:16px;border-top:2px solid var(--noir)}
.legal-page p,.legal-page li{max-width:760px;color:#222;margin-bottom:10px}
.legal-page ul{padding-left:20px}
.legal-page table{border-collapse:collapse;margin:10px 0 16px;font-size:14px;max-width:760px;width:100%}
.legal-page td,.legal-page th{border:1px solid var(--gris);padding:8px;text-align:left;vertical-align:top}
a:focus-visible,button:focus-visible{outline:3px solid var(--oranje);outline-offset:2px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:99;background:#fff;padding:8px}
/* logo D — étiquette suspendue (choix de Valentin, 24/09) */
.wm{position:relative;display:inline-block;padding-right:1.55em}
.tag-io{position:absolute;right:0;top:-.62em;font:600 .38em/1 var(--mono);letter-spacing:0;color:#fff;background:var(--oranje);padding:.32em .5em .34em;border-radius:.14em;transform:rotate(8deg);transform-origin:50% -.9em;text-transform:none}
.tag-io::before{content:"";position:absolute;left:50%;top:-.95em;width:1.5px;height:.95em;background:var(--noir)}
.tag-io::after{content:"";position:absolute;left:calc(50% - .14em);top:.14em;width:.28em;height:.28em;border-radius:50%;background:#fff}
footer .tag-io::before{background:#fff}
nav.top .logo{padding-top:6px}
/* ressources / articles */
.art-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.art-carte{display:flex;flex-direction:column;gap:10px;border:2px solid var(--noir);padding:22px;text-decoration:none;background:#fff;transition:.15s}
.art-carte:hover{box-shadow:6px 6px 0 var(--oranje)}
.art-carte .mono{font-size:12px;color:var(--graphite)}
.art-carte h3{font:800 21px/1.15 var(--sans);letter-spacing:-.02em}
.art-carte p{color:var(--graphite);font-size:15px;flex:1}
.art-carte .lien{color:var(--oranje);font-weight:600}
@media(max-width:900px){.art-grille{grid-template-columns:1fr}}
.chapo{font-size:20px;line-height:1.45;color:#222;max-width:760px;margin:0 0 20px}
.article h1{font-size:clamp(30px,5vw,54px);text-transform:none;letter-spacing:-.03em;max-width:900px}
.article .meta{font-size:12px;color:var(--graphite);margin:-18px 0 22px}
.article .retour{font-size:12px;text-decoration:none;color:var(--graphite)}
.article sup{font:600 10px var(--mono);color:var(--oranje)}
.encadre{border-left:6px solid var(--oranje);background:var(--fond);padding:16px 18px;margin:18px 0;max-width:760px}
.formule{font:600 15px/1.5 var(--mono);background:var(--noir);color:#fff;padding:14px 18px;margin:12px 0;max-width:760px}
.src{font-size:13px;color:var(--graphite)}
.src a{word-break:break-word}
.legal-page ol,.legal-page ul{max-width:760px}
/* mobile : tous formats (24/09) */
h1,h2,h3,h4{overflow-wrap:break-word;hyphens:auto}
.legal-page table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:600px){
  .hero{padding:56px 0 44px}.hero p{font-size:17px}
  section.s,.jarvis{padding:64px 0}.cta-band{padding:60px 0}
  .feat{padding:26px 18px}.bloc-prix{padding:22px}.bloc-prix .m{font-size:54px}
  .pil h3,.trio h3{font-size:22px}.carte .m{font-size:38px}
  .console{font-size:12.5px;padding:16px;overflow-x:auto}
  .legal-page{padding:48px 0 64px}.legal-page h2{font-size:19px}.chapo{font-size:17px}
  .ck{left:10px;right:10px;bottom:10px;padding:16px}.ck .bt .btn{flex:1 1 auto;justify-content:center}
  footer .legal{font-size:11px}
  .btn{padding:13px 16px}
}
@media(max-width:360px){.hero h1{font-size:40px}.sh h2{font-size:30px}.wm{font-size:.95em}}
footer a{overflow-wrap:anywhere}
.feat>*,.duo>*,.trio>*,.g>*{min-width:0}
@media(max-width:600px){footer .g{grid-template-columns:1fr}.feat h3{font-size:clamp(24px,8vw,32px);overflow-wrap:anywhere}}
.article h1{letter-spacing:-.015em;word-spacing:.06em}
.legal-page h2,.art-carte h3,.ck h2{letter-spacing:-.005em;word-spacing:.05em}
.hero h1,.sh h2,.cta-band h2{word-spacing:.08em}
@media(max-width:600px){.logo .wm{font-size:17px}}
@media(max-width:340px){.logo .wm{font-size:15px}.lang{padding:3px 4px}}
/* logo D fidèle à la maquette : l'étiquette pend au-dessus du « s » final (24/09 soir) */
.wm{padding-right:.45em}
.tag-io{right:-.95em;top:-.62em}
/* ===== UI/UX (24/09 soir) ===== */
section[id],div[id],h2[id]{scroll-margin-top:84px}
nav.top{transition:box-shadow .2s,background .2s}
nav.top.defile{box-shadow:0 6px 0 -4px var(--oranje),0 1px 0 var(--gris)}
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.18);transform:translateX(-101%);transition:transform .35s ease}
.btn:hover::after{transform:translateX(0)}
.btn:active{transform:translateY(1px)}
.pil h3,.carte,.art-carte,.regle,.et{transition:transform .25s ease,box-shadow .25s ease}
.pil:hover h3{transform:translateX(4px)}
.carte:hover{transform:translateY(-4px)}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.vu{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}.btn::after,.cur{transition:none;animation:none}html{scroll-behavior:auto}}
/* calculateur */
.calc{display:grid;grid-template-columns:1.4fr 1fr;gap:0;border:2px solid var(--noir);margin-top:28px;background:#fff}
.calc-g{padding:26px}.calc-g h3{font:900 28px/1.05 var(--sans);letter-spacing:-.02em;margin:8px 0 6px}.calc-g p{color:var(--graphite);font-size:14px}
.calc-champs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.calc-champs label{display:grid;gap:6px;font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.04em}
.calc-champs input{font:700 20px var(--sans);padding:10px 12px;border:2px solid var(--noir);width:100%;border-radius:0}
.calc-champs input:focus{outline:3px solid var(--oranje)}
.calc-r{background:var(--noir);color:#fff;padding:26px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.calc-r .mono{font-size:12px;color:#bbb}.calc-v{font:900 56px/1 var(--sans);letter-spacing:-.03em;color:var(--oranje)}
.calc-roi{color:#fff}.calc-verdict{font-size:15px;min-height:44px}.calc-r .btn{align-self:flex-start;margin-top:4px}
.calc-lien{color:#bbb;text-decoration:underline;font-size:12px}
.calc.ok .calc-verdict{color:#7ee2a8}.calc.ko .calc-verdict{color:#ffb199}
@media(max-width:860px){.calc{grid-template-columns:1fr}.calc-champs{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.calc-champs{grid-template-columns:1fr}.calc-v{font-size:44px}}
/* barre d'action mobile */
.barre-cta{display:none}
@media(max-width:760px){.barre-cta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:40;justify-content:center;background:var(--oranje);color:#fff;font:600 13px var(--mono);text-transform:uppercase;letter-spacing:.04em;padding:15px;text-decoration:none;box-shadow:4px 4px 0 var(--noir);transform:translateY(140%);transition:transform .3s ease}
  .barre-cta.on{transform:none}body{padding-bottom:0}}
/* article : barre de progression et sommaire */
.progression{position:fixed;left:0;top:0;right:0;height:4px;z-index:60;background:transparent}
.progression i{display:block;height:100%;width:0;background:var(--oranje)}
.sommaire:empty{display:none}
.sommaire{border:2px solid var(--noir);padding:16px 18px;max-width:760px;margin:0 0 10px}
.sommaire b{display:block;font:600 11px var(--mono);text-transform:uppercase;margin-bottom:8px}
.sommaire ol{padding-left:20px;display:grid;gap:4px;font-size:15px}
.sommaire a{text-decoration:none}.sommaire a:hover{color:var(--oranje)}
.fin-article{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:var(--noir);color:#fff;padding:26px;margin:36px 0 10px;max-width:none}
.fin-article h3{font:900 24px/1.1 var(--sans);letter-spacing:-.02em;margin:6px 0}.fin-article p{color:#ccc;max-width:560px}.fin-article .k{color:#aaa}
/* formulaire : retour visuel */
.form input:invalid:not(:placeholder-shown):not(:focus){border-color:#b3261e}
.form .etat.ok{background:#eaf7ee;padding:12px;border-left:4px solid #0a7a2f}
/* logo D — reproduction exacte de la maquette validée (étiquette qui mord sur le « s ») */
.wm{padding-right:0;margin-right:.45em;letter-spacing:-.035em}
.logo .wm{letter-spacing:-.035em}
.tag-io{font-size:.34em;padding:.28em .5em;border-radius:.12em;right:-1.05em;top:-.7em;transform:rotate(8deg);transform-origin:50% 0;line-height:1}
.tag-io::before{top:-.9em;height:.9em;width:2px;left:50%}
.tag-io::after{display:none}
/* barre de progression (toutes les pages) + bouton retour en haut */
.progression{position:fixed;left:0;top:0;right:0;height:4px;z-index:70;pointer-events:none}
.progression i{display:block;height:100%;width:0;background:var(--oranje);transition:width .08s linear}
.haut{position:fixed;right:16px;bottom:16px;z-index:45;width:48px;height:48px;display:grid;place-items:center;background:var(--noir);color:#fff;border:2px solid var(--noir);box-shadow:4px 4px 0 var(--oranje);cursor:pointer;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s,transform .25s}
.haut.on{opacity:1;transform:none;pointer-events:auto}
.haut:hover{background:var(--oranje);border-color:var(--oranje);box-shadow:4px 4px 0 var(--noir)}
.haut svg{width:20px;height:20px}
@media(max-width:760px){.haut{bottom:84px;right:12px;width:44px;height:44px}}
/* logo D — valeurs exactes de la maquette validée (24/09) */
.tag-io{right:-1.75em;top:-.8em;transform-origin:50% 50%}
.wm{margin-right:.8em}
.tag-io{top:-.1em}
/* ===== rail de lecture vertical (24/09 nuit) ===== */
.rail{position:fixed;right:22px;top:50%;height:min(62vh,560px);transform:translate(12px,-50%);z-index:44;opacity:0;pointer-events:none;transition:opacity .35s,transform .35s}
.rail.on{opacity:1;transform:translate(0,-50%);pointer-events:auto}
.rail-piste{position:relative;width:4px;height:100%;background:rgba(10,10,10,.12);box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.rail-rempli{position:absolute;left:0;top:0;width:100%;height:0;background:linear-gradient(180deg,#FF4F00 0%,#FF7A33 100%);box-shadow:0 0 12px rgba(255,79,0,.55);transition:height .12s linear}
.rail-tete{position:absolute;left:50%;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;background:var(--oranje);border:2px solid var(--noir);transform:rotate(45deg);transition:top .12s linear;animation:railPouls 2.4s ease-in-out infinite}
@keyframes railPouls{0%,100%{box-shadow:0 0 0 0 rgba(255,79,0,.45)}50%{box-shadow:0 0 0 7px rgba(255,79,0,0)}}
.rail-pc{position:absolute;right:16px;top:0;transform:translateY(-50%);font:600 10px/1 var(--mono);background:var(--noir);color:#fff;padding:4px 5px;transition:top .12s linear;letter-spacing:.04em}
.rail-rep{position:absolute;left:50%;width:10px;height:10px;margin:-5px 0 0 -5px;background:#fff;border:2px solid var(--noir);transition:background .25s,transform .25s}
.rail-rep.passe{background:var(--noir)}
.rail-rep:hover,.rail-rep:focus-visible{transform:scale(1.35);background:var(--oranje);outline:none}
.rail-rep span{position:absolute;right:22px;top:50%;transform:translate(8px,-50%);white-space:nowrap;font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;background:var(--noir);color:#fff;padding:7px 9px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;border-left:3px solid var(--oranje)}
.rail-rep:hover span,.rail-rep:focus-visible span{opacity:1;transform:translate(0,-50%)}
.rail:hover .rail-pc{opacity:0}
@media(max-width:999px){.rail{display:none}}
@media(min-width:1000px){.progression{display:none}}
/* anneau de progression autour du bouton « haut » */
.haut{--pc:0deg}
.haut::after{content:"";position:absolute;inset:-5px;border-radius:0;background:conic-gradient(var(--oranje) var(--pc),rgba(10,10,10,.15) 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:3px;pointer-events:none}
.haut svg{transition:transform .25s}.haut:hover svg{transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){.rail-tete{animation:none}}

/* ===== habillages d'événements (planning : EVENEMENTS_PLANNING.md ; aperçu ?theme=<id>) ===== */
.ev .tag-io{overflow:visible}
.pendentif{position:absolute;left:50%;top:100%;width:2.5em;height:2.5em;margin-left:-1.25em;transform-origin:50% 0;animation:pendule 3.2s ease-in-out infinite}
.pendentif::before{content:"";position:absolute;left:50%;top:0;width:1px;height:1.9em;background:#0A0A0A;opacity:.7}
footer .pendentif::before{background:#fff}
.pendentif svg{position:absolute;left:0;width:100%;height:100%;top:1.5em}
footer .p-araignee svg g,footer .p-araignee svg ellipse{stroke:#fff;fill:#fff}footer .p-araignee svg g{fill:none}
@keyframes pendule{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(.45em) rotate(5deg)}}
.ev-bandeau{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 26px;padding:12px 14px;background:var(--noir);color:#fff;text-decoration:none;border-left:5px solid var(--oranje);font-size:15px;line-height:1.35;position:relative;overflow:hidden;animation:evApparait .6s ease both}
.ev-bandeau::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,79,0,.25) 50%,transparent 70%);transform:translateX(-100%);animation:evReflet 4s ease-in-out 1s infinite;pointer-events:none}
.ev-date{font:600 12px/1 var(--mono);background:var(--oranje);color:#fff;padding:5px 7px;letter-spacing:.06em}
.ev-txt{flex:1 1 260px;min-width:0}.ev-txt b{font-weight:800}
.ev-cta{font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--oranje);white-space:nowrap}
.ev-bandeau:hover .ev-cta{text-decoration:underline}
@keyframes evApparait{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes evReflet{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
/* couleurs de bandeau par événement */
.ev-noel .ev-bandeau{border-left-color:#C9CED6}.ev-noel .ev-date{background:#fff;color:var(--noir)}
.ev-printemps .ev-bandeau{background:#F1F7EF;color:var(--noir);border-left-color:#2FA360}.ev-printemps .ev-date{background:#2FA360}
.ev-saint-valentin .ev-bandeau{background:#FFF1EA;color:var(--noir)}
.ev-ete .ev-bandeau{background:#FFF6E0;color:var(--noir);border-left-color:#FFB400}.ev-ete .ev-date{background:#FFB400;color:var(--noir)}
.ev-rentree .ev-bandeau{background:#fff;color:var(--noir);border:2px solid var(--noir);border-left:5px solid var(--oranje);background-image:linear-gradient(#E9EEF5 1px,transparent 1px);background-size:100% 22px}
.ev-koningsdag .ev-bandeau{background:var(--oranje)}.ev-koningsdag .ev-date{background:var(--noir)}.ev-koningsdag .ev-cta{color:#fff}
.ev-sinterklaas .ev-bandeau{border-left-color:#D81E1E}.ev-sinterklaas .ev-date{background:#D81E1E}.ev-sinterklaas .ev-cta{color:#F6C343}
/* décors du pied de page */
footer{position:relative}
.ev-pied{position:absolute;pointer-events:none}
.ev-pied-toile{right:0;top:0;width:120px;height:120px;color:rgba(255,255,255,.22)}.ev-pied-toile svg{width:100%;height:100%}
.ev-pied-guirlande,.ev-pied-vlaggetjes,.ev-pied-pousses{left:0;right:0;top:0;height:26px;display:flex;justify-content:space-around;overflow:hidden}
.ev-pied-guirlande{border-top:1px solid rgba(255,255,255,.25)}
.ev-pied-guirlande i{width:8px;height:11px;margin-top:3px;border-radius:0 0 4px 4px;background:var(--oranje);animation:ampoule 1.6s steps(1) infinite;animation-delay:calc(var(--k)*-.23s)}
.ev-pied-guirlande i:nth-child(3n){background:#fff}.ev-pied-guirlande i:nth-child(3n+1){background:#C9CED6}
@keyframes ampoule{0%{opacity:1;box-shadow:0 0 8px currentColor}50%{opacity:.35;box-shadow:none}}
.ev-pied-vlaggetjes i{width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:18px solid var(--oranje)}.ev-pied-vlaggetjes i:nth-child(2n){border-top-color:#fff}
.ev-pied-pousses{top:-14px;height:14px}.ev-pied-pousses i{width:4px;height:14px;background:#2FA360;border-radius:4px 4px 0 0;transform-origin:bottom;animation:pousse 3s ease-in-out infinite;animation-delay:calc(var(--k)*-.3s)}
@keyframes pousse{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1)}}
/* particules */
.ev-part{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden}
.ev-part span{position:absolute;display:block}
.ev-part span svg{width:100%;height:100%;display:block}
.ev-part-chute span{top:-30px;animation:evChute var(--dur) linear var(--d) var(--it) both}
@keyframes evChute{from{transform:translate(0,0) rotate(0)}to{transform:translate(var(--x),110vh) rotate(var(--r))}}
.ev-part-monte span{bottom:-40px;animation:evMonte var(--dur) ease-out var(--d) 1 both}
@keyframes evMonte{0%{transform:translate(0,0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translate(var(--x),-110vh) scale(1.1);opacity:0}}
.ev-part-vol span{left:-80px;top:var(--y);width:calc(56px*var(--s));animation:chauve 5.5s cubic-bezier(.4,.1,.5,1) var(--d) forwards}
@keyframes chauve{0%{transform:translate(0,0) scaleY(1)}10%{transform:translate(12vw,-20px) scaleY(.6)}20%{transform:translate(24vw,10px) scaleY(1)}30%{transform:translate(36vw,-30px) scaleY(.6)}40%{transform:translate(48vw,0) scaleY(1)}50%{transform:translate(60vw,-40px) scaleY(.6)}60%{transform:translate(72vw,-10px) scaleY(1)}70%{transform:translate(84vw,-50px) scaleY(.6)}100%{transform:translate(115vw,-90px) scaleY(1)}}
/* tête du rail */
.ev-halloween .rail-tete{border-radius:50% 50% 45% 45%;transform:none;width:16px;height:15px;margin:-7px 0 0 -8px;background:radial-gradient(circle at 35% 45%,#0A0A0A 1.3px,transparent 1.6px),radial-gradient(circle at 65% 45%,#0A0A0A 1.3px,transparent 1.6px),var(--oranje)}
.ev-halloween .rail-tete::before{content:"";position:absolute;left:6px;top:-5px;width:2px;height:5px;background:var(--noir)}
.ev-noel .rail-tete{border-radius:50%;transform:none;background:radial-gradient(circle at 35% 35%,#fff 1.5px,transparent 2px),var(--oranje)}
.ev-noel .rail-tete::before{content:"";position:absolute;left:3px;top:-5px;width:6px;height:4px;background:var(--noir)}
.ev-printemps .rail-rempli{background:linear-gradient(180deg,#2FA360,#FF4F00)}
@media(max-width:600px){.ev-bandeau{font-size:14px;gap:8px 10px}.ev-pied-toile{width:80px;height:80px}}
@media(prefers-reduced-motion:reduce){.pendentif,.ev-bandeau,.ev-bandeau::after,.ev-pied i{animation:none}}
.pendentif{width:3.4em;height:3.4em;margin-left:-1.7em}
.pendentif svg{top:1.7em}
.pendentif::before{height:2.1em}
.ev-pied-pousses{top:-20px;height:20px}.ev-pied-pousses i{height:20px;width:5px}
footer .pendentif{display:none}

/* pages SEO 27/09 */
.seo h2{margin-top:38px}
.seo ul.points{list-style:none;display:grid;gap:8px;padding:0}
.seo ul.points li::before{content:"→ ";color:var(--oranje);font-family:var(--mono)}
.seo ol.etapes{list-style:none;display:grid;grid-template-columns:1fr!important;gap:10px;padding:0;max-width:760px}
.seo ol.etapes li{border-left:2px solid var(--oranje);padding-left:12px}
.seo .seo-cta{margin:24px 0}
.seo .encadre{border:2px solid var(--noir);padding:16px 18px}
.liens-chips a{font:500 13px var(--mono);border:1px solid var(--noir);padding:6px 10px;text-decoration:none}
.liens-chips a:hover{background:var(--noir);color:#fff}
.maillage{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid #2a2a2a;margin-top:36px;padding-top:24px}
.maillage .liens{display:flex;flex-wrap:wrap;gap:4px 16px}
footer .maillage a{display:inline-block;margin:2px 0;font-size:13px}
@media(max-width:760px){.maillage{grid-template-columns:1fr}}