/* ITD - Découpe sur mesure & rouleaux pour films — fiche produit */
.itdfd {
  --itdfd-accent: #0b5ea8;
  --itdfd-ink: #17212b;
  --itdfd-slate: #5b6876;
  --itdfd-glass: #eef4f7;
  --itdfd-line: #d5dee5;
  --itdfd-danger: #b42318;
  --itdfd-ok: #1d7a55;
  --itdfd-r: 10px;
  margin: 1.5rem 0;
  padding: 1.25rem 1.25rem 1.1rem;
  border: 1.5px solid color-mix(in srgb, var(--itdfd-accent) 70%, #fff);
  border-radius: 14px;
  background: #fff;
  color: var(--itdfd-ink);
  font-size: .95rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  container-type: inline-size;
  container-name: itdfd;
}
.itdfd *, .itdfd *::before, .itdfd *::after { box-sizing: border-box; }
.itdfd [hidden] { display: none !important; }
.itdfd label, .itdfd .itdfd__label { text-align: left; }

/* En-tête */
.itdfd__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .9rem; }
.itdfd__title { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--itdfd-ink); }
.itdfd__help { font-size: .85rem; color: var(--itdfd-accent); text-decoration: underline; text-underline-offset: 3px; }

/* Sélecteur de mode : une piste, une pastille active */
.itdfd__modes { display: flex; gap: 4px; padding: 4px; margin-bottom: 1.25rem; background: var(--itdfd-glass); border-radius: calc(var(--itdfd-r) + 4px); }
.itdfd__mode {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: .6rem .8rem; border: 0; border-radius: var(--itdfd-r); background: transparent;
  color: var(--itdfd-slate); text-align: left; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s;
}
.itdfd__mode:hover { color: var(--itdfd-ink); }
.itdfd__mode.is-active { background: #fff; color: var(--itdfd-ink); box-shadow: 0 1px 2px rgba(23, 33, 43, .12), 0 0 0 1px var(--itdfd-line); }
.itdfd__mode-name { font-weight: 700; font-size: .92rem; line-height: 1.2; }
.itdfd__mode-price { font-size: .78rem; }
.itdfd__mode.is-active .itdfd__mode-price { color: var(--itdfd-accent); font-weight: 600; }

.itdfd__lead, .itdfd__single { margin: 0 0 1rem; color: var(--itdfd-slate); max-width: 62ch; }
.itdfd__note { margin: .6rem 0 0; font-size: .8rem; color: var(--itdfd-slate); }
.itdfd__label { display: block; margin: 0 0 .35rem; font-size: .8rem; font-weight: 600; color: var(--itdfd-slate); }

/* Champs */
.itdfd input[type="text"], .itdfd input[type="number"], .itdfd select {
  width: 100%; height: 2.75rem; padding: 0 .75rem; margin: 0;
  border: 1px solid var(--itdfd-line); border-radius: 8px; background: #fff;
  color: var(--itdfd-ink); font: inherit; font-size: 1rem; box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
.itdfd input:hover, .itdfd select:hover { border-color: #b8c5cf; }
.itdfd input:focus, .itdfd select:focus { outline: none; border-color: var(--itdfd-accent); box-shadow: 0 0 0 3px rgba(11, 94, 168, .16); }
.itdfd input::placeholder { color: #9aa6b1; }
.itdfd__field { display: block; margin-top: 1.1rem; }
.itdfd__len { display: block; max-width: 9rem; }

/* Lignes de dimensions */
.itdfd__grid { display: grid; gap: .5rem; }
.itdfd__row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 4.4rem 2.25rem; gap: .5rem; align-items: center; }
.itdfd__row--head { font-size: .78rem; font-weight: 600; color: var(--itdfd-slate); white-space: nowrap; }
.itdfd__row.has-error [data-w], .itdfd__row.has-error [data-h] { border-color: var(--itdfd-danger); background: #fff7f6; }
.itdfd__del { width: 2.25rem; height: 2.75rem; border: 0; border-radius: 8px; background: none; color: #8b97a3; font-size: 1.35rem; line-height: 1; cursor: pointer; }
.itdfd__del:hover { color: var(--itdfd-danger); background: #fdf1f0; }
.itdfd__add { margin-top: .6rem; padding: .35rem 0; border: 0; background: none; color: var(--itdfd-accent); font-weight: 600; cursor: pointer; }
.itdfd__add::before { content: "+"; display: inline-block; width: 1.1rem; font-weight: 700; }
.itdfd__add:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Laizes */
.itdfd__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.itdfd__chip { position: relative; margin: 0; cursor: pointer; }
.itdfd__chip input { position: absolute; opacity: 0; pointer-events: none; }
.itdfd__chip span { display: inline-flex; align-items: center; height: 2.5rem; padding: 0 1rem; border: 1px solid var(--itdfd-line); border-radius: 8px; background: #fff; font-weight: 600; transition: border-color .15s, background .15s, color .15s; }
.itdfd__chip:hover span { border-color: #b8c5cf; }
.itdfd__chip input:checked + span { border-color: var(--itdfd-accent); background: var(--itdfd-accent); color: #fff; }

/* Échelle dégressive (l'élément signature) */
.itdfd__ladder { margin-top: 1.25rem; }
.itdfd__tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.itdfd__tier {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: .55rem .7rem .6rem;
  border-top: 3px solid var(--itdfd-line); background: transparent; transition: border-color .25s, background .25s;
}
.itdfd__tier-range { font-size: .76rem; color: var(--itdfd-slate); white-space: nowrap; }
.itdfd__tier-price { font-size: .95rem; font-weight: 700; color: var(--itdfd-slate); }
.itdfd__tier-price small { font-size: .72rem; font-weight: 500; }
.itdfd__tier.is-passed { border-top-color: color-mix(in srgb, var(--itdfd-accent) 35%, #fff); }
.itdfd__tier.is-active { border-top-color: var(--itdfd-accent); background: var(--itdfd-glass); border-radius: 0 0 8px 8px; }
.itdfd__tier.is-active .itdfd__tier-price { color: var(--itdfd-ink); }
.itdfd__tier.is-active .itdfd__tier-range { color: var(--itdfd-accent); font-weight: 600; }
.itdfd__nudge { margin: .5rem 0 0; font-size: .82rem; color: var(--itdfd-ok); font-weight: 600; }

/* Résultat */
.itdfd__result { margin-top: 1.4rem; }
.itdfd__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid var(--itdfd-line); border-radius: var(--itdfd-r); overflow: hidden; }
.itdfd__stats > div { padding: .7rem .85rem; }
.itdfd__stats > div + div { border-left: 1px solid var(--itdfd-line); }
.itdfd__stats dt { font-size: .76rem; font-weight: 600; color: var(--itdfd-slate); }
.itdfd__stats dd { margin: .15rem 0 0; font-size: 1.05rem; font-weight: 700; }
.itdfd__metrage { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; margin-top: .6rem; font-size: .85rem; color: var(--itdfd-slate); }
.itdfd__metrage p { margin: 0; max-width: 60ch; }
.itdfd__link { padding: 0; border: 0; background: none; color: var(--itdfd-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.itdfd__advice { margin: .6rem 0 0; padding: .55rem .75rem; border-radius: 8px; background: var(--itdfd-glass); font-size: .85rem; }
.itdfd__hint { margin: .6rem 0 0; padding: .55rem .75rem; border-radius: 8px; background: var(--itdfd-glass); font-size: .85rem; }
.itdfd__error { margin: 1rem 0 0; padding: .6rem .8rem; border-radius: 8px; background: #fdf1f0; color: var(--itdfd-danger); font-size: .88rem; }

/* Achat */
.itdfd__buy { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--itdfd-line); }
.itdfd__total { display: flex; flex-direction: column; gap: .1rem; }
.itdfd__total-price { font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.itdfd__total-sub { font-size: .82rem; color: var(--itdfd-slate); }
.itdfd__actions { display: flex; align-items: flex-end; gap: .6rem; margin-left: auto; }
.itdfd__qty { margin: 0; }
.itdfd__qty input { width: 5.5rem !important; }
.itdfd__submit {
  height: 2.75rem; padding: 0 1.5rem; border: 0; border-radius: 8px; background: var(--itdfd-accent); color: #fff;
  font: inherit; font-weight: 700; font-size: 1rem; text-transform: none; white-space: nowrap; cursor: pointer;
  transition: filter .15s, transform .1s, background .2s;
}
.itdfd__submit:hover:not([disabled]) { filter: brightness(1.08); }
.itdfd__submit:active:not([disabled]) { transform: translateY(1px); }
.itdfd__submit[disabled] { background: #b8c5cf; cursor: not-allowed; }
.itdfd__submit.is-done { background: var(--itdfd-ok); }

.itdfd button:focus-visible, .itdfd a:focus-visible, .itdfd__chip input:focus-visible + span { outline: 2px solid var(--itdfd-accent); outline-offset: 2px; }
.itdfd.is-loading .itdfd__total-price, .itdfd.is-loading .itdfd__stats dd { opacity: .4; transition: opacity .2s; }
.itdfd-price-suffix { font-size: .7em; font-weight: 400; margin-left: .25em; }

@media (prefers-reduced-motion: reduce) {
  .itdfd * { transition: none !important; }
}


/* Mise en page étroite : dépend de la largeur du bloc lui-même (colonne produit
   d'une tablette, mobile…), avec repli sur la largeur d'écran pour les anciens navigateurs. */
@container itdfd (max-width: 560px) {
  .itdfd__modes { flex-direction: column; }
  .itdfd__mode { flex-direction: row; justify-content: space-between; align-items: baseline; gap: .75rem; }
  .itdfd__mode-price { white-space: nowrap; }
  .itdfd__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 3.25rem 1.75rem; gap: .35rem; }
  .itdfd__row input[type="text"], .itdfd__row input[type="number"] { padding-left: .55rem; }
  .itdfd__row > [data-label] { grid-column: 1 / -1; margin-top: .4rem; }
  .itdfd__row--head > span:first-child { display: none; }
  .itdfd__row:not(.itdfd__row--head) + .itdfd__row { padding-top: .4rem; border-top: 1px dashed var(--itdfd-line); }
  .itdfd__row--head + .itdfd__row > [data-label] { margin-top: 0; }
  .itdfd__del { width: 1.75rem; }
  .itdfd__stats { grid-template-columns: 1fr 1fr; }
  .itdfd__stats > div:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--itdfd-line); }
  .itdfd__total-price { font-size: 1.6rem; }
  .itdfd__actions { width: 100%; margin-left: 0; }
  .itdfd__submit { flex: 1; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 991px) {
    .itdfd__modes { flex-direction: column; }
    .itdfd__mode { flex-direction: row; justify-content: space-between; align-items: baseline; gap: .75rem; }
    .itdfd__mode-price { white-space: nowrap; }
    .itdfd__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 3.25rem 1.75rem; gap: .35rem; }
    .itdfd__row input[type="text"], .itdfd__row input[type="number"] { padding-left: .55rem; }
    .itdfd__row > [data-label] { grid-column: 1 / -1; margin-top: .4rem; }
    .itdfd__row--head > span:first-child { display: none; }
    .itdfd__row:not(.itdfd__row--head) + .itdfd__row { padding-top: .4rem; border-top: 1px dashed var(--itdfd-line); }
    .itdfd__row--head + .itdfd__row > [data-label] { margin-top: 0; }
    .itdfd__del { width: 1.75rem; }
    .itdfd__stats { grid-template-columns: 1fr 1fr; }
    .itdfd__stats > div:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--itdfd-line); }
    .itdfd__total-price { font-size: 1.6rem; }
    .itdfd__actions { width: 100%; margin-left: 0; }
    .itdfd__submit { flex: 1; }
  }
}
@media (max-width: 575px) {
  .itdfd { padding: 1rem .85rem; }
}