/* The Depot · Studio et The Depot Pro · charme et densite
   Chargee uniquement sur /studio/ et /pro/, apres site.css, commerce.css et quality.css. */

/* ============ STUDIO ============ */
.td-st-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,.5fr);gap:clamp(24px,4vw,64px);align-items:end;padding-block:clamp(20px,3vw,40px) var(--td-4);border-bottom:1px solid var(--td-filet)}
@media (max-width:900px){.td-st-head{grid-template-columns:1fr;align-items:start}}
.td-st-head h1{max-width:22ch}
.td-st-proof{list-style:none;display:flex;gap:clamp(16px,2.4vw,40px);margin:var(--td-5) 0 0;padding:0;flex-wrap:wrap}
.td-st-proof li{display:flex;flex-direction:column;gap:2px}
.td-st-proof__n{font-family:var(--td-mono);font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:600;line-height:1;letter-spacing:-.02em}
.td-st-proof li>span:last-child{font-family:var(--td-mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--td-texte-2)}
.td-st-head__aside{display:flex;flex-direction:column;gap:var(--td-2);align-items:flex-start;padding-left:var(--td-4);border-left:1px solid var(--td-filet)}
@media (max-width:900px){.td-st-head__aside{border-left:0;padding-left:0;border-top:1px solid var(--td-filet);padding-top:var(--td-3)}}
.td-st-head__contact{font-size:.9375rem;color:var(--td-texte-2);max-width:32ch}
.td-st-noscript{display:flex;flex-direction:column;gap:var(--td-3);padding:var(--td-5);border:1px solid var(--td-filet-fort);background:var(--td-surface)}

/* configurateur : garde-fous de largeur (cause du debordement constate) */
.td-config,[data-configurator]{min-width:0;max-width:100%}
.td-config>*,[data-configurator]>*{min-width:0}
[data-configurator] table{width:100%}
[data-configurator] input,[data-configurator] button,[data-configurator] select{max-width:100%}
main{overflow-x:clip}

/* etapes de l'atelier */
.td-st-steps{list-style:none;margin:var(--td-5) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--td-filet);border:1px solid var(--td-filet)}
@media (max-width:820px){.td-st-steps{grid-template-columns:1fr}}
.td-st-steps li{background:var(--td-surface);padding:var(--td-4);display:flex;flex-direction:column;gap:var(--td-3)}
.td-st-steps li>span{font-family:var(--td-mono);font-size:.6875rem;letter-spacing:.14em;color:var(--td-kraft-texte)}
.td-st-steps h3{font-size:1.125rem;text-transform:none}
.td-st-steps p{font-size:.9375rem;color:var(--td-texte-2);line-height:1.55}

/* techniques */
.td-st-tech{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--td-filet);border-block:1px solid var(--td-filet);margin-top:var(--td-5)}
@media (max-width:1000px){.td-st-tech{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.td-st-tech{grid-template-columns:1fr}}
.td-st-tech__item{background:var(--td-surface);padding:var(--td-4);display:flex;flex-direction:column;gap:6px;min-height:220px}
.td-st-tech__item .td-seal--sm{width:8px;height:8px;background:var(--td-kraft)}
.td-st-tech__item h3{font-size:1.0625rem;margin-top:auto}
.td-st-tech__item p{font-size:.875rem;color:var(--td-texte-2);line-height:1.5}
.td-st-tech__item .td-mono{font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--td-kraft-texte);margin-top:var(--td-2);padding-top:var(--td-2);border-top:1px solid var(--td-filet)}

/* exemples sur plaque */
.td-st-ex{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:900px){.td-st-ex{grid-template-columns:1fr}}
.td-st-ex__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--td-3)}
@media (max-width:560px){.td-st-ex__grid{grid-template-columns:1fr}}
.td-st-ex figure{margin:0;display:flex;flex-direction:column;gap:6px}
.td-st-ex img{aspect-ratio:1/1;object-fit:cover;background:#262322;width:100%}
.td-st-ex figcaption{font-family:var(--td-mono);font-size:.625rem;letter-spacing:.04em;color:rgba(251,250,248,.66);line-height:1.4}

/* faq studio */
.td-st-faq{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:820px){.td-st-faq{grid-template-columns:1fr}}
.td-st-faq__list details{border-bottom:1px solid var(--td-filet)}
.td-st-faq__list summary{cursor:pointer;padding:var(--td-3) 0;font-size:1rem;font-weight:600;display:flex;justify-content:space-between;gap:var(--td-3);list-style:none}
.td-st-faq__list summary::-webkit-details-marker{display:none}
.td-st-faq__list summary::after{content:"+";font-family:var(--td-mono);color:var(--td-texte-2)}
.td-st-faq__list details[open] summary::after{content:"\2212"}
.td-st-faq__list p{padding-bottom:var(--td-3);color:var(--td-texte-2);font-size:.9375rem;line-height:1.6;max-width:64ch}

/* ============ THE DEPOT PRO ============ */
.td-pro-head{padding-bottom:var(--td-5)}
.td-portal{border:1px solid var(--td-encre);background:var(--td-encre);color:var(--td-couche);overflow:hidden}
.td-portal__bar{display:flex;align-items:center;gap:var(--td-4);padding:10px var(--td-4);border-bottom:1px solid rgba(251,250,248,.16);font-family:var(--td-mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase}
.td-portal__brand{font-weight:600;letter-spacing:.14em}
.td-portal__client{opacity:.7}
.td-portal__demo{margin-left:auto;opacity:.5}
.td-portal__grid{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:460px}
@media (max-width:860px){.td-portal__grid{grid-template-columns:1fr}}
.td-portal__side{display:flex;flex-direction:column;gap:2px;padding:var(--td-4) 0;border-right:1px solid rgba(251,250,248,.14)}
@media (max-width:860px){.td-portal__side{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid rgba(251,250,248,.14);padding:8px var(--td-3);gap:16px}}
.td-portal__side a{padding:9px var(--td-4);font-size:.875rem;opacity:.68;border-left:2px solid transparent;transition:opacity var(--td-dur-glisse),border-color var(--td-dur-glisse)}
.td-portal__side a:hover{opacity:1}
.td-portal__side a[aria-current]{opacity:1;border-left-color:var(--td-sceau-vif);background:rgba(251,250,248,.06);font-weight:600}
@media (max-width:860px){.td-portal__side a{border-left:0;border-bottom:2px solid transparent;white-space:nowrap;padding:6px 4px}.td-portal__side a[aria-current]{border-left:0;border-bottom-color:var(--td-sceau-vif);background:none}}
.td-portal__logout{margin-top:auto;padding:var(--td-4);font-family:var(--td-mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;opacity:.45}
.td-portal__main{padding:var(--td-5);display:flex;flex-direction:column;gap:var(--td-4);min-width:0}
.td-portal__hello{display:flex;justify-content:space-between;gap:var(--td-5);flex-wrap:wrap;align-items:flex-start}
.td-portal__greet{font-size:1.125rem;font-weight:600;letter-spacing:-.01em}
.td-portal__sub{font-family:var(--td-mono);font-size:.6875rem;letter-spacing:.02em;opacity:.62;margin-top:4px}
.td-portal__kpis{display:flex;gap:var(--td-4);flex-wrap:wrap}
.td-portal__kpis>div{display:flex;flex-direction:column;gap:2px;padding-left:var(--td-3);border-left:1px solid rgba(251,250,248,.2)}
.td-portal__kpis strong{font-family:var(--td-mono);font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
.td-portal__kpis span{font-family:var(--td-mono);font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;opacity:.55}
.td-portal__panel{border:1px solid rgba(251,250,248,.16);background:rgba(251,250,248,.03)}
.td-portal__panelhead{display:flex;justify-content:space-between;align-items:center;gap:var(--td-3);padding:10px var(--td-3);border-bottom:1px solid rgba(251,250,248,.14);font-family:var(--td-mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase}
.td-portal__panelhead span:last-child{opacity:.5;letter-spacing:.04em;text-transform:none}
.td-portal__row{display:grid;grid-template-columns:70px minmax(0,1fr) auto 60px 80px;gap:var(--td-3);align-items:center;padding:9px var(--td-3);border-bottom:1px solid rgba(251,250,248,.08);font-size:.8125rem}
@media (max-width:640px){.td-portal__row{grid-template-columns:60px 1fr;row-gap:2px}.td-portal__stock,.td-portal__qty,.td-portal__price{grid-column:2;justify-self:start}}
.td-portal__ref{font-family:var(--td-mono);font-size:.6875rem;opacity:.6}
.td-portal__name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-portal__stock{font-size:.5625rem}
.td-portal__qty,.td-portal__price{font-family:var(--td-mono);font-size:.75rem;text-align:right}
.td-portal__price{font-weight:600}
.td-portal__panelaction{display:flex;justify-content:space-between;align-items:center;gap:var(--td-3);padding:10px var(--td-3);font-size:.75rem}
.td-portal__panelaction .td-mono{opacity:.6;letter-spacing:.04em}
.td-portal__panelaction .td-btn{background:transparent;color:var(--td-couche);border:1px solid var(--td-couche)}
.td-portal__panelaction .td-btn:hover{background:var(--td-couche);color:var(--td-encre)}
.td-portal__split{display:grid;grid-template-columns:1fr 1fr;gap:var(--td-3)}
@media (max-width:760px){.td-portal__split{grid-template-columns:1fr}}
.td-portal__track{list-style:none;margin:0;padding:var(--td-3);display:flex;flex-direction:column;gap:10px}
.td-portal__track li{display:flex;justify-content:space-between;gap:var(--td-3);font-size:.8125rem;padding-left:18px;position:relative;opacity:.5}
.td-portal__track li::before{content:"";position:absolute;left:0;top:6px;width:7px;height:7px;border:1px solid rgba(251,250,248,.5);border-radius:50%}
.td-portal__track li[data-done="true"]{opacity:1}
.td-portal__track li[data-done="true"]::before{background:var(--td-dorure-sur-encre);border-color:var(--td-dorure-sur-encre)}
.td-portal__track li span:last-child{font-size:.6875rem;opacity:.6}
.td-portal__panel--ai{border-color:rgba(217,181,110,.5);background:rgba(217,181,110,.06)}
.td-portal__aitext{padding:var(--td-3);font-size:.875rem;line-height:1.5}
.td-portal__aiactions{display:flex;gap:8px;padding:0 var(--td-3) var(--td-3);flex-wrap:wrap}
.td-portal__aiactions .td-btn{padding:6px 10px;min-height:32px;font-size:.75rem}
.td-portal__aiactions .td-btn--secondary{border-color:rgba(251,250,248,.55);color:var(--td-couche)}
.td-portal__aiactions .td-btn--ghost{color:rgba(251,250,248,.75);text-decoration:underline}

/* piliers */
.td-pro-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--td-filet);border:1px solid var(--td-filet);margin-top:var(--td-5)}
@media (max-width:860px){.td-pro-features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.td-pro-features{grid-template-columns:1fr}}
.td-pro-feature{background:var(--td-surface);padding:var(--td-4);display:flex;flex-direction:column;gap:6px;min-height:150px}
.td-pro-feature__n{font-size:.625rem;letter-spacing:.14em;color:var(--td-kraft-texte)}
.td-pro-feature h3{margin-top:auto;font-size:1.0625rem}
.td-pro-feature p{font-size:.875rem;color:var(--td-texte-2);line-height:1.5}

/* avant / apres */
.td-pro-ba{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--td-filet);border:1px solid var(--td-filet)}
.td-pro-ba>div{padding:var(--td-4);background:var(--td-surface)}
.td-pro-ba ul{list-style:none;margin:var(--td-3) 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.td-pro-ba li{font-size:.9375rem;line-height:1.45;padding-left:20px;position:relative;color:var(--td-texte-2)}
.td-pro-ba li::before{content:"\2013";position:absolute;left:0;color:var(--td-texte-2)}
.td-pro-ba>div:last-child{background:var(--td-carton-gris)}
.td-pro-ba>div:last-child li{color:var(--td-texte)}
.td-pro-ba>div:last-child li::before{content:"";left:2px;top:7px;width:7px;height:7px;background:var(--td-sceau)}

/* acces */
.td-pro-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--td-5);border-top:1px solid var(--td-filet-fort);padding-top:var(--td-4)}
@media (max-width:820px){.td-pro-steps{grid-template-columns:1fr}}
.td-pro-steps>div{display:flex;flex-direction:column;gap:6px}
.td-pro-steps span{font-family:var(--td-mono);font-size:.6875rem;letter-spacing:.14em;color:var(--td-kraft-texte)}
.td-pro-steps h3{font-size:1.0625rem}
.td-pro-steps p{font-size:.9375rem;color:var(--td-texte-2);line-height:1.5}

@media print{.td-portal,.td-config{display:none!important}}
/* mobile : la barre du portail et le menu ne doivent pas deborder */
@media (max-width:640px){
  .td-portal__bar{flex-wrap:wrap;row-gap:2px}
  .td-portal__demo{margin-left:0;flex:1 1 100%;opacity:.45}
  .td-portal__side{scrollbar-width:thin}
  .td-portal__side a{font-size:.8125rem}
  .td-portal__main{padding:var(--td-3)}
  .td-portal__row{grid-template-columns:56px 1fr}
}