/* Déclic — Atelier de démonstration. Se charge APRÈS style.css et réutilise ses couleurs. */
:root{--red:#b42318;--red-bg:#fdecea;--orange:#9a5b00;--orange-bg:#fff3d6;--okgreen:#2f6b2a;--ok-bg:#e6f2dc;--grey:#5b6560;--grey-bg:#eceee9;--blue:#1f4f7a;--blue-bg:#e3eef8;--line:#dce2d5}
body{font-size:16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;background:var(--green);color:#fff;padding:10px 16px;border-radius:6px;z-index:10}
.skip:focus{left:16px}
nav a[aria-current=page]{font-weight:700;text-decoration:underline;text-underline-offset:6px}

.d-hero{max-width:1212px;margin:0 auto;padding:40px 54px 24px!important}
.d-hero h1{font-size:clamp(38px,5vw,64px);font-weight:500;margin:0 0 18px}
.d-hero .intro{font-size:17px;max-width:620px}
.d-path{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:26px 0 0}
.d-path li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;border:1px solid var(--line);border-radius:30px;padding:6px 14px 6px 6px;background:#fff}
.d-path b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;font-size:12px}

.tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.4px;padding:3px 10px;border-radius:30px;vertical-align:middle}
.tag-sim{background:repeating-linear-gradient(135deg,#fff7d6 0 8px,#fdf0b8 8px 16px);color:#6b4e00;border:1px dashed #c9a227}
.tag-real{background:var(--green);color:#fff}

.d-banner{max-width:1212px;margin:8px auto 0;display:flex;gap:16px;align-items:flex-start;background:#fffbea;border:1px dashed #c9a227;border-radius:10px;padding:16px 20px}
.d-banner p{margin:0;font-size:15px}

section.d-lab{padding-top:32px!important}
.d-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.d-tab{text-align:left;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;cursor:pointer;display:grid;gap:4px;color:var(--ink);min-height:44px}
.d-tab:hover{border-color:#9db487}
.d-tab[aria-selected=true]{background:var(--green);border-color:var(--green);color:#fff}
.d-tab-n{font-size:12px;opacity:.7}
.d-tab-t{font-family:Manrope,sans-serif;font-weight:700;font-size:15px;line-height:1.25}
.d-tab-s{font-size:13px;opacity:.8}

.d-panel{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:30px}
.d-panel:focus{outline:none}
.d-head{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:18px}
.d-head h3{font-size:28px;font-weight:600;letter-spacing:-.8px;margin:10px 0 6px}
.d-story{color:var(--muted);max-width:640px;margin:0}
.d-inspired{font-size:14px;color:var(--muted);max-width:330px;margin:0;align-self:flex-end}
.d-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:30px;margin-top:24px}
.d-grid>*,.d-result,.d-explain>*,.d-panel{min-width:0}
.d-col h4,.d-result h4,.d-explain h4{font-family:Manrope,sans-serif;font-size:17px;margin:0 0 10px;display:flex;align-items:center;gap:10px;letter-spacing:-.2px}
.d-step{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--lime);color:var(--green);font-size:13px;font-weight:800;flex-shrink:0}
.d-hint{font-size:14px;color:var(--muted);margin:0 0 10px}

.d-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px;margin-bottom:12px;-webkit-overflow-scrolling:touch}
.d-table{border-collapse:collapse;width:100%;font-size:14px;min-width:560px}
.d-table th{position:sticky;top:0;background:#f1f4ec;text-align:left;font-weight:700;font-size:13px;padding:9px 10px;white-space:nowrap}
.d-table td{padding:8px 10px;border-top:1px solid #eef1ea;vertical-align:top}
.d-table input,.d-table select{font-size:16px;padding:6px 8px;margin:0;min-width:90px;border:1px solid var(--line);border-radius:5px;width:100%;background:#fcfdf9}
.row-red td:first-child{box-shadow:inset 4px 0 var(--red)}
.row-orange td:first-child{box-shadow:inset 4px 0 #d08a00}
.row-green td:first-child{box-shadow:inset 4px 0 #5a9a3c}
.row-blue td:first-child{box-shadow:inset 4px 0 var(--blue)}

.d-params label{font-size:14px}
.d-params input:not([type=checkbox]),.d-params select{font-size:16px}
.d-check{display:flex!important;gap:10px;align-items:center;font-weight:600}
.d-check input{width:20px;height:20px;accent-color:var(--green)}
.d-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:8px}
.d-run{gap:14px}
.d-run:disabled{opacity:.7;cursor:progress}
.d-btn{background:var(--green);color:#fff;border:0;border-radius:6px;padding:11px 16px;font-size:14px;font-weight:600;cursor:pointer;min-height:44px}
.d-btn-ghost{background:#fff;color:var(--green);border:1px solid #b9c8ad}
.d-btn-ghost:hover{background:#f1f4ec}
.d-icon{background:none;border:1px solid var(--line);border-radius:5px;width:34px;height:34px;cursor:pointer;font-size:18px;color:var(--red)}
.d-log{list-style:none;padding:0;margin:14px 0 0;font-size:14px;color:var(--muted)}
.d-log li{animation:d-in .3s ease both}
.d-log li::before{content:'✓ ';color:#5a9a3c;font-weight:700}
@keyframes d-in{from{opacity:0;transform:translateY(4px)}}

.d-error{margin-top:18px;background:var(--red-bg);color:var(--red);border-left:4px solid var(--red);padding:12px 16px;border-radius:6px;font-weight:600}
.d-error:focus{outline:3px solid #739e36}
.d-result{margin-top:28px;border-top:1px solid var(--line);padding-top:22px}
.d-result:focus{outline:none}
.d-result-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.d-seg{display:inline-flex;border:1px solid #b9c8ad;border-radius:8px;overflow:hidden}
.d-seg button{background:#fff;border:0;padding:9px 18px;font-size:14px;font-weight:600;cursor:pointer;color:var(--green);min-height:44px}
.d-seg button[aria-pressed=true]{background:var(--green);color:#fff}
.d-summary{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:14px 0 16px}
.d-summary .badge{font-size:14px;padding:6px 12px}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:3px 10px;border-radius:30px;white-space:nowrap}
.badge::before{font-size:11px}
.lvl-red{background:var(--red-bg);color:var(--red)}.badge.lvl-red::before{content:'✕'}
.lvl-orange{background:var(--orange-bg);color:var(--orange)}.badge.lvl-orange::before{content:'▲'}
.lvl-green{background:var(--ok-bg);color:var(--okgreen)}.badge.lvl-green::before{content:'✓'}
.lvl-grey{background:var(--grey-bg);color:var(--grey)}.badge.lvl-grey::before{content:'–'}
.lvl-blue{background:var(--blue-bg);color:var(--blue)}.badge.lvl-blue::before{content:'◆'}
.lvl-neutral{background:#f1f4ec;color:var(--ink)}

.d-explain{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:24px}
.d-explain ul{padding-left:20px;margin:0;font-size:15px}
.d-explain li{margin-bottom:6px}
.d-real{background:#f1f4ec;border-radius:10px;padding:20px}
.d-real p{font-size:15px;margin:0 0 10px}

.d-timeline{margin:0 0 16px;border:1px solid var(--line);border-radius:8px;padding:14px 14px 10px}
.d-timeline figcaption{font-size:13px;color:var(--muted);margin-bottom:8px}
.d-hours{position:relative;height:18px;margin-left:80px;font-size:11px;color:var(--muted)}
.d-hours span{position:absolute;transform:translateX(-50%)}
.d-lane{display:flex;align-items:center;gap:8px;margin-top:6px}
.d-lane-name{width:72px;font-size:13px;font-weight:600;flex-shrink:0}
.d-lane-track{position:relative;flex:1;height:26px;background:repeating-linear-gradient(90deg,#f4f6f1 0 calc(100%/13 - 1px),#e3e8dd calc(100%/13 - 1px) calc(100%/13));border-radius:4px}
.d-bar{position:absolute;top:3px;height:20px;border-radius:4px;opacity:.9;border:1px solid #fff}
.d-bar.lvl-green{background:#7fb35f}.d-bar.lvl-orange{background:#e0a32e}.d-bar.lvl-red{background:#d0473a;background-image:repeating-linear-gradient(45deg,transparent 0 5px,#ffffff55 5px 8px)}

.d-agenda{border:1px solid var(--line);border-radius:8px;margin-bottom:16px}
.d-agenda-head{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#f1f4ec;border-radius:8px 8px 0 0;font-size:14px}
.d-agenda pre{margin:0;padding:14px;white-space:pre-wrap;font-size:14px;font-family:ui-monospace,Consolas,monospace}

.d-exp{border-top:1px solid var(--line)}
.d-exp .section-head h2{margin-top:14px}
.d-exp-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 30px;padding:0;list-style:none;font-size:16px}
.d-exp-list li::before{content:'→';color:#5a8a33;margin-right:10px}
.d-exp-note{font-size:14px;color:var(--muted);max-width:760px;border-left:3px solid var(--line);padding-left:14px}
.d-cta{background:var(--green);color:#fff;border-radius:12px;text-align:center;padding:50px 30px!important;margin-bottom:60px!important}
.d-cta h2{color:#fff}.d-cta p{color:#d6e2d4;font-size:17px}
.d-cta .button{background:var(--lime);color:var(--green)}
footer p{font-size:13px}

@media(max-width:1100px){.d-tabs{grid-template-columns:repeat(3,1fr)}.d-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px){.d-hero{padding:30px 25px 16px!important}.d-banner{margin:8px 25px 0}}
@media(max-width:640px){
  .d-tabs{grid-template-columns:1fr 1fr}
  .d-tab-s{display:none}
  .d-panel{padding:18px;margin-left:-8px;margin-right:-8px}
  .d-head h3{font-size:23px}
  .d-banner{flex-direction:column;gap:8px}
  .d-explain,.d-exp-list{grid-template-columns:minmax(0,1fr)}
  .d-actions .button,.d-actions .d-btn{width:100%;justify-content:center}
  .d-hours{margin-left:62px}.d-lane-name{width:54px;font-size:12px}
  .d-hours span:nth-child(even){display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* Ajustements pour la version du site intégrée. */
.d-hero{padding-left:0!important;padding-right:0!important}.d-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.d-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}.d-params input[type=checkbox]{width:20px;display:inline-block;margin:0}.d-error[hidden],.d-result[hidden]{display:none}#d-status{font-size:14px;color:var(--muted);min-height:24px}.d-banner{margin-left:auto;margin-right:auto}.d-head .d-story{font-size:16px}.d-table th,.d-table td{border-left:0;border-right:0}.d-hero em{font-family:Georgia,serif;font-style:italic}.d-params label{margin-bottom:20px}.d-panel .d-btn:focus-visible,.d-tab:focus-visible{outline:3px solid #739e36;outline-offset:3px}@media(max-width:1300px){.d-banner{margin-left:54px;margin-right:54px}}@media(max-width:1100px){.d-grid{grid-template-columns:minmax(0,1fr)}}@media(max-width:900px){.d-banner{margin-left:25px;margin-right:25px}}@media(max-width:640px){.d-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.d-hero{padding-left:0!important;padding-right:0!important}.d-hero h1{font-size:38px}.d-panel .d-btn{font-size:14px}.d-banner p{font-size:14px}}