/* The Depot · qualite transversale (Lead)
   Chargee APRES site.css et commerce.css sur toutes les pages.
   Corrige les defauts mesures a l'audit : contrastes, cibles tactiles, landmarks,
   densite typographique et poids des images. Aucune refonte visuelle ici. */

/* 1 · contrastes mesures par axe */
.td-fold__label{color:var(--td-encre);background:var(--td-carton-gris);padding:3px 8px;border:1px solid var(--td-filet)}
.td-chip small{opacity:1;color:var(--td-texte-2)}
.td-cat-count,.td-cat-sort span,.td-label,.td-mono{text-rendering:optimizeLegibility}
.td-footer__legal{color:rgba(251,250,248,.72)}
.td-footer a{opacity:.88}
.td-cat-presets__label,.td-cat-price label,.td-cat-ai__label{color:#4a4542}
:root[data-theme="dark"] .td-cat-presets__label,
:root[data-theme="dark"] .td-cat-price label{color:#b9b2aa}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .td-cat-presets__label,
  :root:not([data-theme="light"]) .td-cat-price label{color:#b9b2aa}
}

/* 2 · cibles tactiles : 24 px minimum partout, 44 px sur mobile */
.td-nav__list a{min-height:44px;display:inline-flex;align-items:center}
.td-footer__cols a{min-height:24px;display:inline-flex;align-items:center}
.td-footer__contact a{min-height:24px;display:inline-flex;align-items:center}
.td-lang__menu a{min-height:36px}
.td-card__name{display:inline-block;min-height:24px;padding-block:2px}
.td-arrow{min-height:44px;align-items:center}
.td-cat-links a{min-height:32px;align-items:center}
@media (max-width:720px){
  .td-footer__cols a,.td-footer__contact a,.td-card__name{min-height:32px}
}

/* 3 · carte entierement cliquable : la cible devient la vignette + le titre, sans nid de liens */
.td-card{position:relative}
.td-card .td-card__media::after{content:"";position:absolute;inset:0}
.td-card__body>a{position:static}
.td-card__body>.td-card__name{position:relative;z-index:2}
.td-card__row,.td-card__actions,.td-cat-card__actions{position:relative;z-index:2}

/* 4 · densite et rythme : un seul dominant, jamais deux */
.td-hero .td-display{font-size:clamp(2.6rem,5.6vw,4.6rem);letter-spacing:-.022em}
h1{font-size:clamp(2.2rem,4.6vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
.td-lead{line-height:1.6;font-size:clamp(1rem,1.35vw,1.15rem)}
p{line-height:1.62}

/* 5 · focus : un seul anneau, visible sur tous les fonds */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--td-trace);outline-offset:3px;border-radius:2px}
.td-section--plate :where(a,button):focus-visible{outline-color:var(--td-dorure-sur-encre)}
main:focus{outline:none}

/* 6 · images : jamais de trou, jamais de saut */
img{background-color:var(--td-surface-2)}
img[src=""]{visibility:hidden}

/* 7 · etats systeme visibles et honnetes */
.td-toast{max-width:min(420px,calc(100vw - 32px));line-height:1.5}
.td-count:empty{display:none}

/* 8 · barre de comparaison et dialogues au-dessus du dock */
@media (max-width:720px){
  dialog.td-cat-dialog{margin:auto;max-height:calc(100dvh - 32px)}
}

/* 9 · accessibilite : masquage propre des elements decoratifs */
.td-sprite,.td-overlay[hidden],.td-drawer[hidden]{display:none}
/* 10 · etiquette technique : la valeur occupe sa cellule, jamais de chevauchement */
.td-label-grid .td-cell-value{display:block;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.td-label-grid>div{min-width:0;overflow-wrap:anywhere}
/* 11 · le Sceau : dimensionne par le module, plus par la couleur */
.td-seal{width:var(--td-module,44px);height:var(--td-module,44px);background:var(--td-sceau);flex:none}
.td-seal--sm{width:14px;height:14px}
.td-seal--inline{width:8px;height:8px}
.td-seal--lg{width:64px;height:64px}
/* 12 · packshots detoures : le produit flotte sur la planche, sans cadre ni plaque */
.td-card__media img[src*="/products/"],
.td-cat-feature__item img[src*="/products/"]{filter:drop-shadow(0 10px 14px rgba(52,48,47,.13)) drop-shadow(0 2px 3px rgba(52,48,47,.07))}
.td-card__media,.td-cat-feature__item img{background:var(--td-couche)}
.td-cat-card .td-card__media{background:var(--td-couche)}
/* 13 · HERO : la scene ne touche jamais ses reperes, les chiffres ne se chevauchent plus */
.td-hero__scene{min-width:0}
.td-marks{padding:26px 26px 30px}
.td-fold{aspect-ratio:1/0.92;max-height:min(56vh,520px)}
.td-fold__stage{width:min(100%,440px);padding-top:34px;box-sizing:content-box}
.td-fold__box{width:64%;transform:rotateX(-16deg) rotateY(-26deg) scale(.98)}
.td-fold__label{bottom:-26px;background:var(--td-carton-gris);padding:4px 10px;border:1px solid var(--td-filet);left:50%;transform:translateX(-50%)}
.td-hero .td-label-grid{margin-top:var(--td-3)}
/* chiffres cles : grille a filets, plus de separateur qui coupe un nombre */
.td-hero__proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:var(--td-6);padding-top:0;border-top:1px solid var(--td-filet-fort)}
.td-hero__proof>div{padding:14px 14px 0;border-left:1px solid var(--td-filet)}
.td-hero__proof>div:first-child{border-left:0;padding-left:0}
.td-hero__proof strong{font-family:var(--td-mono);font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:600;line-height:1;letter-spacing:-.02em;white-space:nowrap}
.td-hero__proof span{font-family:var(--td-mono);font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--td-texte-2);line-height:1.35;margin-top:4px}
@media (max-width:900px){.td-hero__proof{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:0}.td-hero__proof>div{padding:12px 10px 0}.td-hero__proof>div:nth-child(3){border-left:0;padding-left:0}}
/* compteur panier : jamais trois chiffres qui debordent */
.td-count{min-width:18px;max-width:34px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px;font-variant-numeric:tabular-nums}
/* 14 · geometrie du hero : la boite tient dans son cadre, la legende est dans le flux */
.td-hero__scene .td-marks{padding:24px 24px 22px}
.td-fold{aspect-ratio:auto;height:auto;max-height:none;display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:16px}
.td-fold__stage{width:min(100%,420px);aspect-ratio:1/1;padding-top:0;position:relative;display:grid;place-items:center}
.td-fold__box{width:58%;transform:rotateX(-14deg) rotateY(-24deg)}
.td-fold__label{position:static;transform:none;bottom:auto;left:auto;display:inline-flex;gap:10px;align-items:center;background:transparent;border:0;padding:0;order:2}
.td-fold[data-open="true"] .td-fold__lid{transform:rotateX(-104deg)}
/* 15 · menu langue : jamais hors ecran */
.td-lang__menu{max-width:calc(100vw - 24px)}
@media (max-width:720px){.td-lang__menu{right:auto;left:0;min-width:150px}}
/* 16 · pro mobile : la deconnexion ne pousse pas le menu hors cadre */
@media (max-width:860px){.td-portal__logout{display:none}.td-portal__main .td-mono{white-space:normal;overflow-wrap:anywhere}}
/* 17 · presets : defilement horizontal assumé, sans deborder la page */
.td-cat-presets{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;padding-bottom:2px}
.td-cat-presets::-webkit-scrollbar{display:none}
.td-cat-presets>*{flex:none}
@media (min-width:901px){.td-cat-presets{overflow:visible;flex-wrap:wrap}}
/* 18 · preuves : 5 blocs doivent remplir la ligne, sans case vide */
.td-trust{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.td-trust{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.td-trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 19 · le logo geant de la section Studio reste dans son cadre */
.td-section--plate .td-studio-preview,.td-section--plate svg.td-studio-preview__logo{max-width:100%}
.td-section--plate .td-studio-preview__box{max-width:min(100%,420px);margin-inline:auto}
/* 20 · HERO : la boite flotte sur le carton gris, plus de plaque blanche ; matiere plus juste */
.td-hero__scene{background:transparent!important}
.td-hero__scene .td-marks{padding:30px 30px 26px}
.td-fold{padding:8px 8px 0}
.td-fold__stage{width:min(100%,520px);aspect-ratio:1/1}
.td-fold__box{width:72%;transform:rotateX(-16deg) rotateY(-27deg)}
.td-fold__face--front{background:linear-gradient(155deg,#FEFDFB 0%,#F4F0E7 55%,#EAE4D8 100%)!important}
.td-fold__face--right{background:linear-gradient(200deg,#E4DED2,#CFC7B8 90%)!important;filter:brightness(.97)}
.td-fold__face--left{background:linear-gradient(160deg,#EDE8DD,#D8D1C2 90%)!important}
.td-fold__face--bottom{background:#C9C1B1!important}
.td-fold__lid{background:linear-gradient(180deg,#F7F3EB,#E6E0D3)!important;box-shadow:inset 0 -14px 22px -14px rgba(52,48,47,.35)}
.td-fold__tape{background:repeating-linear-gradient(90deg,rgba(52,48,47,.05) 0 5px,rgba(52,48,47,.10) 5px 10px)!important;border-left:1px solid rgba(52,48,47,.10);border-right:1px solid rgba(52,48,47,.10)}
.td-fold__seal{border-radius:1px;box-shadow:0 3px 7px rgba(52,48,47,.28),inset 0 0 0 1px rgba(0,0,0,.06)}
.td-hero__proof strong{font-size:clamp(1.5rem,2.1vw,1.85rem)}
.td-hero__proof span{font-size:.5625rem;max-width:14ch}
/* 21 · cadrage final du hero : les reperes serrent la boite, les libelles respirent */
.td-hero__scene .td-marks{padding:20px}
.td-fold__stage{width:min(100%,400px)}
.td-fold{padding:0}
.td-hero__proof span{text-wrap:balance;max-width:none;line-height:1.3;font-size:.5rem;letter-spacing:.06em}
.td-hero__proof>div{padding-right:6px}
.td-ticker__sep{width:1px;height:11px;background:var(--td-filet-fort);display:inline-block;vertical-align:middle}
.td-hero__scene .td-label-grid{margin-top:0}