/* Batylo, pages intérieures. Chaque page a sa propre composition ; tout reste dans la charte (orange, encre, coupe d'onglet).
   Se charge après home.css et motion.css. */
.page main{display:block}
.chamfer{clip-path:polygon(0 0,calc(100% - var(--cut-lg)) 0,100% var(--cut-lg),100% 100%,0 100%)}
.chamfer-sm{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.pic{position:relative;overflow:hidden;margin:0;background:var(--ink)}
.pic img,.pic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pic figcaption{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--paper);font-size:var(--step-body);font-weight:500;padding:8px 14px;max-width:85%}
.tag{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);font-size:var(--step-small);font-weight:500;padding:9px 14px}
.text-max{max-width:60ch}
.say{font-size:var(--step-say);line-height:1.1;letter-spacing:-0.03em;font-weight:500}

/* sélecteurs, repris de la scène de l'accueil */
.pick{display:grid;grid-template-columns:1fr 1fr auto;gap:18px 24px;align-items:end}
.pick label{display:grid;gap:4px;font-size:var(--step-small);font-weight:500}
.pick select{appearance:none;-webkit-appearance:none;width:100%;background:transparent;color:inherit;font:600 var(--step-lead)/1.15 inherit;font-family:inherit;letter-spacing:-0.02em;
  border:0;border-bottom:3px solid currentColor;padding:4px 34px 8px 0;cursor:pointer;transition:border-color .3s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 6h14L10 15z' fill='%23050f16'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center;background-size:18px}
.pick select:hover,.pick select:focus{border-bottom-color:var(--paper)}
.pick select option{color:var(--ink);background:#fff;font-size:var(--step-body)}
.pick-ink{background:var(--ink);color:var(--paper);padding:18px var(--pad) 20px}
.pick-ink label{color:#ffb27a}
.pick-ink select{border-bottom-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 6h14L10 15z' fill='%23ff7a1f'/%3E%3C/svg%3E")}
.pick-ink .btn,.d-hero .btn{background:var(--bg);color:var(--ink)}
.pick-ink .btn:hover,.d-hero .btn:hover{background:var(--paper)}
.pick-orange{background:var(--bg);color:var(--ink);padding:18px var(--pad) 20px}
.pick-orange .btn{background:var(--ink);color:var(--bg)}

/* ===================== DÉMO : un tableau de bord en direct ===================== */
.d-hero{margin:0 var(--m);background:var(--ink);color:var(--paper);display:grid;grid-template-columns:7fr 5fr;gap:clamp(20px,3vw,48px);padding:clamp(28px,3.4vw,52px) var(--pad) var(--pad);min-height:min(78svh,720px)}
.d-hero h1{font-size:clamp(3rem,6.2vw,7rem);color:var(--paper);max-width:12ch}
.d-hero h1 em{font-style:normal;color:var(--bg)}
.d-intro{display:flex;flex-direction:column;justify-content:flex-start;gap:28px}
.d-intro form{margin-top:auto}
.d-intro .lead{color:#ffd3b3;max-width:36ch}
.d-film{min-height:420px}
.d-film .tag{position:absolute;left:0;top:0;background:var(--bg);color:var(--ink);z-index:2}
.d-film figcaption{z-index:2}
.d-board{padding:clamp(48px,6vw,88px) var(--m);display:grid;grid-template-columns:4fr 8fr;gap:clamp(20px,3vw,48px);align-items:start}
.d-rail{position:sticky;top:16px;display:grid;gap:var(--gap)}
.d-rail h2{margin-bottom:12px}
.d-rail .rail-pic{aspect-ratio:4/3}
.cta-box{background:var(--ink);color:var(--paper);padding:24px var(--pad) 26px;display:grid;gap:18px}
.cta-box p{font-size:var(--step-lead);line-height:1.25;font-weight:500;letter-spacing:-0.01em}
.cta-box p b{color:var(--bg)}
.cta-box small{display:block;font-size:var(--step-body);font-weight:400;color:#ffd3b3;margin-top:10px;letter-spacing:0}
.cta-box .btn{background:var(--bg);color:var(--ink)}
.cta-box .btn:hover{background:var(--paper)}
.cta-box .btn-light{background:var(--paper)}
.cta-actions{display:flex;flex-wrap:wrap;gap:8px}
.source-note{max-width:70ch;font-size:var(--step-body);color:var(--muted);font-weight:500}
.d-feed{display:grid;gap:var(--gap)}
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.figures[hidden]{display:none}
.figure{background:var(--paper);padding:20px var(--pad) 18px;display:grid;gap:8px;align-content:end;min-height:170px}
.figure b{font-size:clamp(3rem,2rem + 3vw,4.5rem);font-weight:600;letter-spacing:-0.05em;line-height:.9;font-variant-numeric:tabular-nums}
.figure span{font-size:var(--step-body);font-weight:500;max-width:26ch}
.figure:first-child{background:var(--ink);color:var(--paper)}
.figure:first-child b{color:var(--bg)}
.figure .bar{margin-top:6px;transition-delay:.3s}
.figure:first-child .bar{background:var(--bg)}
.figure:not(:first-child) .bar{background:var(--ink)}
.results{display:grid;gap:var(--gap)}
.tender{background:var(--paper);padding:22px var(--pad) 22px;display:grid;gap:14px;transition:translate .35s var(--ease)}
.js .tender{animation:feed-in .7s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms)}
@keyframes feed-in{from{opacity:0;transform:translateX(60px)}}
.tender:hover{translate:-6px 0}
.tender h3{font-size:var(--step-lead);line-height:1.15;letter-spacing:-0.02em;max-width:50ch}
.tender .buyer{font-size:var(--step-body);color:#4a4f53;margin-top:6px}
.badges{display:flex;flex-wrap:wrap;gap:6px}
.badge{font-size:var(--step-small);font-weight:500;background:var(--peach);padding:5px 10px}
.badge.red{background:var(--ink);color:var(--bg)}
.badge.orange{background:var(--bg);color:var(--ink)}
.badge.green{background:var(--peach);color:var(--ink)}
.tender-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tender-meta span{display:block;font-size:var(--step-body);color:#4a4f53}
.tender-meta b{font-weight:600;font-size:var(--step-body)}
.tender-actions{display:flex;flex-wrap:wrap;gap:8px}
.btn-ghost,.btn-light{background:var(--peach);color:var(--ink)}
.btn-ghost:hover,.btn-light:hover{background:var(--bg)}
.checklist{display:none;background:#f6f2ee;padding:18px var(--pad)}
.checklist.open{display:block;animation:open-down .45s var(--ease) both}
@keyframes open-down{from{opacity:0;transform:translateY(-8px)}}
.checklist h4{font-size:var(--step-body);font-weight:600;margin:14px 0 6px}
.checklist h4:first-child{margin-top:0}
.checklist ul{list-style:none;margin:0;padding:0}
.checklist li{position:relative;padding:5px 0 5px 22px}
.checklist li::before{content:"";position:absolute;left:0;top:.8em;width:10px;height:10px;background:var(--ink);clip-path:polygon(0 0,60% 0,100% 40%,100% 100%,0 100%)}
.checklist li.detected::before{background:var(--bg)}
.checklist .src{font-size:var(--step-body);color:#a84600;font-weight:500;margin-left:8px}
.checklist ul.plain li::before{background:var(--bg)}
.disclaimer{font-size:var(--step-body);color:#4a4f53;margin-top:14px}
.loading,.empty{background:var(--paper);padding:28px var(--pad);display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.empty{display:block}
.spinner{width:22px;height:22px;background:var(--bg);clip-path:polygon(0 0,60% 0,100% 40%,100% 100%,0 100%);animation:turn 1s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
.d-band{background:var(--ink);color:var(--paper);padding:clamp(48px,6vw,88px) var(--m);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:end}
.d-band-text{grid-column:1/5;display:grid;gap:22px;align-self:start}
.d-band-text h2{color:var(--paper)}
.d-band-text p{color:#ffd3b3;max-width:34ch}
.d-band-text .btn{background:var(--bg);color:var(--ink);justify-self:start}
.d-band .pic-a{grid-column:5/10;aspect-ratio:4/3}
.d-band .pic-b{grid-column:10/13;aspect-ratio:3/4}

/* ===================== EXEMPLE D'EMAIL : le téléphone de 7 h ===================== */
.a-hero{display:grid;grid-template-columns:6fr 6fr;gap:clamp(20px,3vw,48px);padding:clamp(20px,3vw,40px) var(--m) clamp(48px,6vw,88px);align-items:start}
.a-intro{display:grid;gap:26px;position:sticky;top:16px}
.a-intro h1{font-size:clamp(2.75rem,4.9vw,5.5rem);max-width:13ch}
.a-intro .lead{max-width:34ch}
.clock{font-size:clamp(4.5rem,3rem + 6vw,9rem);font-weight:600;letter-spacing:-0.06em;line-height:.8;color:var(--ink)}
.clock .colon{display:inline-block;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.phone{position:relative;background:var(--ink);padding:14px 12px 12px;max-width:560px;justify-self:center;width:100%}
.phone-top{display:flex;justify-content:space-between;color:var(--paper);font-size:var(--step-small);font-weight:500;padding:4px 40px 12px 10px}
.toast{background:var(--paper);color:var(--ink);padding:14px 16px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;margin-bottom:10px}
.js .toast{animation:toast-in .9s var(--ease) .5s both}
@keyframes toast-in{from{opacity:0;transform:translateY(-36px) scale(.96)}}
.toast svg{grid-row:span 2;width:34px;height:34px}
.toast span{font-size:var(--step-body);color:#4a4f53}
.toast b{font-weight:600;line-height:1.25}
.phone iframe{width:100%;border:0;display:block;min-height:520px;background:#fff}
.js .phone iframe{animation:sheet-up 1s var(--ease) .9s both}
@keyframes sheet-up{from{opacity:0;transform:translateY(40px)}}
.a-morning{background:var(--ink);color:var(--paper);padding:clamp(48px,6vw,88px) var(--m)}
.a-morning h2{color:var(--paper);max-width:16ch;margin-bottom:clamp(28px,4vw,56px)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.step{display:grid;gap:14px;align-content:start}
.step .pic{aspect-ratio:3/4}
.step .bar{height:10px}
.step h3{color:var(--paper);font-size:var(--step-lead)}
.step p{color:#ffd3b3;font-size:var(--step-body);max-width:28ch}
.a-inside{padding:clamp(48px,6vw,88px) var(--m);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start}
.a-inside h2{grid-column:1/6}
.a-list{grid-column:6/13;list-style:none;margin:0;padding:0;display:grid;gap:var(--gap)}
.a-list li{background:var(--paper);padding:20px var(--pad);display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.a-list li b{font-size:var(--step-say);font-weight:600;letter-spacing:-0.03em;line-height:1.05}
.a-list li span{font-size:var(--step-body);max-width:30ch;justify-self:end;text-align:right}
.a-cta{grid-column:6/13;display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:12px}

/* ===================== MENTIONS LÉGALES : des plaques gravées ===================== */
.m-hero{display:grid;grid-template-columns:5fr 7fr;gap:var(--gap);padding:0 var(--m) var(--m);min-height:min(70svh,640px)}
.m-plate{background:var(--ink);color:var(--paper);padding:var(--pad);display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.m-plate h1{font-size:clamp(2.75rem,4.9vw,5.5rem);color:var(--paper);max-width:10ch}
.m-plate .lead{color:#ffd3b3;max-width:30ch}
.m-plate .btn{background:var(--bg);color:var(--ink);align-self:flex-start}
.m-hero .pic{min-height:360px;background:#ffffff}
.m-hero .pic img{object-fit:contain;padding:clamp(12px,2vw,28px)}
.m-grid{padding:clamp(40px,5vw,72px) var(--m);display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.m-card{background:var(--paper);padding:clamp(24px,3vw,40px) var(--pad);display:grid;gap:14px;align-content:start}
.m-card:hover{translate:0 -5px}
.m-card h2{font-size:var(--step-say);letter-spacing:-0.03em;line-height:1.05}
.m-card .big{font-size:var(--step-lead);font-weight:600;letter-spacing:-0.02em;line-height:1.2}
.m-card ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.m-card ul li{position:relative;padding-left:22px}
.m-card ul li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;background:var(--bg);clip-path:polygon(0 0,60% 0,100% 40%,100% 100%,0 100%)}
.m-card:nth-child(4n+2),.m-card:nth-child(4n+3){background:var(--peach)}
.m-credits{background:var(--ink);color:var(--paper);padding:clamp(48px,6vw,88px) var(--m)}
.m-credits-head{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:end;margin-bottom:clamp(24px,3vw,40px)}
.m-credits-head h2{grid-column:1/7;color:var(--paper)}
.m-credits-head p{grid-column:7/12;color:#ffd3b3}
.credit-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.credit-grid li{display:grid;gap:10px;align-content:start}
.credit-grid .pic{aspect-ratio:4/3}
.credit-grid .pic img,.credit-grid .pic video{transition:transform .6s var(--ease)}
.credit-grid li:hover .pic img,.credit-grid li:hover .pic video{transform:scale(1.06)}
.credit-grid p{font-size:var(--step-body);color:#ffd3b3}
.credit-grid p b{display:block;color:var(--paper);font-size:var(--step-body);font-weight:600}
.credit-grid a{color:var(--paper)}

/* ===================== CONFIDENTIALITÉ : le trajet de vos données ===================== */
.c-hero{margin:0 var(--m);display:grid;grid-template-columns:7fr 5fr;gap:var(--gap);min-height:min(70svh,640px)}
.c-hero-text{background:var(--paper);padding:var(--pad);display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.c-hero-text h1{font-size:clamp(2.75rem,4.9vw,5.5rem);max-width:12ch}
.c-hero-text .lead{max-width:38ch}
.c-hero-text .row-end{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.meta-date{font-size:var(--step-body);font-weight:500;color:var(--muted)}
.c-hero .pic{min-height:360px}
.c-route{padding:clamp(48px,6vw,88px) var(--m)}
.c-route-head{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.c-route h2{grid-column:1/7;max-width:16ch}
.c-route-head .pic{grid-column:7/13;aspect-ratio:21/9}
.route{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.station{display:grid;grid-template-rows:auto auto 1fr;gap:16px;padding-right:var(--gap)}
.station .node{display:flex;align-items:center}
.station .node i{display:block;width:44px;height:44px;flex:none;background:var(--ink);clip-path:polygon(0 0,60% 0,100% 40%,100% 100%,0 100%)}
.station:last-child .node i{background:var(--paper)}
.station .node .bar{flex:1;height:10px;background:var(--ink);margin-left:-2px}
.station:last-child .node .bar{display:none}
.station h3{font-size:var(--step-lead)}
.station p{max-width:28ch}
.c-body{background:var(--paper);padding:clamp(48px,6vw,88px) var(--m);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.c-toc{grid-column:1/4;align-self:start;position:sticky;top:24px;display:grid;gap:8px}
.c-toc h2{font-size:var(--step-body);letter-spacing:-0.02em;line-height:1.2;margin-bottom:6px}
.c-toc a{font-weight:500;text-decoration:none;display:inline-block;transition:transform .3s var(--ease),color .3s}
.c-toc a:hover,.c-toc a.on{transform:translateX(8px);color:#a84600}
.c-text{grid-column:5/12;display:grid;gap:14px}
.c-text h2{font-size:var(--step-say);letter-spacing:-0.03em;line-height:1.05;margin-top:clamp(20px,2.4vw,32px);scroll-margin-top:24px}
.c-text h2:first-child{margin-top:0}
.basis{display:grid;gap:6px}
.basis div{display:grid;grid-template-columns:3fr 2fr;gap:16px;background:#f6f2ee;padding:14px 18px}
.basis div:first-child{background:var(--ink);color:var(--paper);font-weight:600}
.c-band{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);padding:clamp(48px,6vw,88px) var(--m);align-items:end}
.c-band-text{grid-column:1/5;display:grid;gap:18px;align-self:center}
.c-band .pic-a{grid-column:5/9;aspect-ratio:3/4}
.c-band .pic-b{grid-column:9/13;aspect-ratio:1/1}

@media (max-width:1100px){
  .d-board{grid-template-columns:1fr}
  .d-rail{position:static}
  .tender-meta{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr;row-gap:36px}
  .credit-grid{grid-template-columns:1fr 1fr}
  .a-hero{grid-template-columns:1fr}
  .a-intro{position:static}
}
@media (max-width:860px){
  .d-hero,.c-hero{margin:0;grid-template-columns:1fr;min-height:0;padding-left:var(--m);padding-right:var(--m)}
  .c-hero{padding:0}
  .d-film{min-height:0;aspect-ratio:16/10}
  .m-hero{grid-template-columns:1fr;min-height:0}
  .m-hero .pic{min-height:0;aspect-ratio:4/3}
  .pick{grid-template-columns:1fr}
  .figures{grid-template-columns:1fr}
  .figure{min-height:0}
  .d-band,.a-inside,.c-body,.c-band,.m-credits-head{grid-template-columns:1fr}
  .d-band>*,.a-inside>*,.c-body>*,.c-band>*,.m-credits-head>*{grid-column:1/-1 !important}
  .c-toc{position:static;display:flex;flex-wrap:wrap;gap:8px 22px}
  .c-toc h2{flex-basis:100%}
  .c-route-head{grid-template-columns:1fr 1fr}
  .c-route h2,.c-route-head .pic{grid-column:auto}
  .c-route-head .pic{aspect-ratio:4/3}
  .route{grid-template-columns:1fr 1fr !important;gap:28px var(--gap)}
  .d-band-text{grid-template-columns:1fr 1fr;column-gap:var(--gap)}
  .d-band-text h2{grid-row:span 2}
  .d-band-text p{max-width:none}
  .m-grid{grid-template-columns:1fr}
  .station .node .bar{display:none}
  .steps{grid-template-columns:1fr}
  .step .pic{aspect-ratio:4/3}
  .credit-grid{grid-template-columns:1fr}
  .a-list li{grid-template-columns:1fr}
  .a-list li span{justify-self:start;text-align:left}
  .basis div{grid-template-columns:1fr;gap:4px}
  .phone iframe{min-height:420px}
}
@media (max-width:560px){
  .route{grid-template-columns:1fr !important}
  .d-band-text,.c-route-head{grid-template-columns:1fr}
  .d-band-text h2{grid-row:auto}
}
@media (prefers-reduced-motion:reduce){
  .js .tender,.js .toast,.js .phone iframe,.checklist.open,.clock .colon{animation:none}
  .tender:hover,.m-card:hover{translate:none}
  .c-toc a:hover,.c-toc a.on{transform:none}
}
.page .foot-credits{font-size:var(--step-body);color:var(--ink);max-width:62ch}
/* repli honnête : note sous le sélecteur et puces de départements proches */
.pick-note{font-size:var(--step-body);line-height:1.45;max-width:46ch;margin:0;border-left:3px solid var(--bg);padding-left:14px}
.js .pick-note:not([hidden]){animation:note-in .6s var(--ease) both}
.d-intro .pick-note{color:var(--paper);border-left-color:var(--bg)}
.chip{font:inherit;font-size:var(--step-body);font-weight:600;color:inherit;background:transparent;border:2px solid currentColor;padding:2px 10px;margin:6px 4px 0 0;cursor:pointer;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);transition:background-color .2s ease,color .2s ease,translate .2s ease}
.chip:hover,.chip:focus-visible{background:var(--bg);color:var(--ink);translate:0 -2px}
.empty-near{display:block;margin-top:12px}
@keyframes note-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .pick-note:not([hidden]){animation:none}.chip{transition:none}}