/* Parcours commercial EasyShirt : entrée unique, choix lisible et thème clair. */
.hero-showcase-link {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: 30px;
}

.hero-showcase-link:focus-visible {
  outline: 3px solid #ff7900;
  outline-offset: 6px;
}

.header-cta-btn,
.hero-btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.header-cta-btn { min-height: 52px; padding-inline: 24px; font-size: 15px; }
.hero-btn-primary { min-height: 64px; padding-inline: 30px; font-size: 17px; box-shadow: 0 14px 28px rgba(255,121,0,.24); }
.header-cta-btn:hover,.hero-btn-primary:hover { transform: translateY(-2px); }

.home-view .hero-media-link { position:relative; min-height:0; aspect-ratio:auto; padding:0; background:transparent; box-shadow:none; overflow:visible; }
.home-view .hero-media-link picture { display:block; width:100%; }
.home-view .hero-personalisation-gif { display:block; width:100%; height:auto; border-radius:30px; filter:drop-shadow(0 24px 50px rgba(7,17,27,.12)); }
.home-view .hero-media-cta { position:absolute; right:26px; bottom:24px; display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 20px; border-radius:999px; background:#07111b; color:#fff; font-weight:800; box-shadow:0 12px 28px rgba(7,17,27,.2); transition:transform .2s,background .2s; }
.home-view .hero-media-link:hover .hero-media-cta,.home-view .hero-media-link:focus-visible .hero-media-cta { transform:translateY(-3px); background:#ff7900; color:#07111b; }

.header-cta-btn::after,
.hero-btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 22%, rgba(255, 255, 255, .48) 45%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .55s ease;
}

.header-cta-btn:hover::after,
.header-cta-btn:focus-visible::after,
.hero-btn-primary:hover::after,
.hero-btn-primary:focus-visible::after {
  transform: translateX(130%);
}

.home-view .hero-illustration-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-view .process-steps-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1040px;
  margin-inline: auto;
}
.home-view .process-step-item h3 { font-size:clamp(24px,2.3vw,34px); line-height:1.05; }
.home-view .process-value-note { max-width:900px; margin:28px auto 0; padding:18px 22px; border:1px solid #e3d9ca; border-radius:18px; background:#fff7ed; color:#58616b; line-height:1.6; text-align:center; }
.home-view .process-value-note strong { color:#07111b; }
.home-view .final-cta-early { margin-top:clamp(34px,6vw,76px); }

.pack-commercial-value {
  width: fit-content;
  max-width: 100%;
  margin: 10px auto 20px;
  padding: 9px 14px;
  border: 1px solid rgba(213, 91, 0, .2);
  border-radius: 999px;
  background: #fff7ed;
  color: #743a0a;
  font-size: 13px;
  line-height: 1.35;
}

.pack-commercial-value { display:grid; justify-items:center; gap:3px; border-radius:16px; }
.pack-commercial-value strong { color: #07111b; }
.pack-commercial-value span { color:#744011; font-size:12px; }
.pack-commercial-value:empty { display: none; }

.commercial-entry-view {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(46px, 7vw, 92px) 0 84px;
  color: #07111b;
}

.commercial-entry-heading {
  max-width: 760px;
  margin: 0 auto 38px;
  text-align: center;
}

.commercial-entry-heading h1 {
  margin: 10px 0 14px;
  font: 800 clamp(38px, 6vw, 70px)/.98 var(--font-display);
  letter-spacing: -.055em;
}

.commercial-entry-heading > p:last-child,
.commercial-entry-card > p:not(.eyebrow),
.commercial-entry-note {
  color: #59636d;
  line-height: 1.65;
}

.commercial-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.commercial-entry-card {
  position: relative;
  min-height: 390px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid #ded9d1;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 18px 55px rgba(7, 17, 27, .07);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.commercial-entry-pack {
  background: linear-gradient(145deg, #fff7eb 0%, #fff 72%);
  border-color: #e8cba9;
}

.entry-number {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 36px;
  border-radius: 14px;
  background: #07111b;
  color: #fff;
  font-weight: 800;
}

.commercial-entry-card h2 {
  margin: 8px 0 14px;
  font: 780 clamp(29px, 4vw, 45px)/1 var(--font-display);
  letter-spacing: -.045em;
}

.commercial-entry-card > p:not(.eyebrow) { margin: 0 0 28px; }
.commercial-entry-card > .button { margin-top: auto; }

.commercial-entry-pack-links {
  width: 100%;
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.commercial-entry-action,
.commercial-entry-action:visited {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 82px;
  padding: 13px 14px 13px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
  border: 1px solid rgba(7, 17, 27, .12);
  border-radius: 18px;
  color: #07111b;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(7, 17, 27, .09);
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease;
}

.commercial-entry-action::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, .32) 46%, transparent 74%);
  transform: translateX(-115%);
  transition: transform .35s ease;
}

.commercial-entry-action .commercial-entry-action-label {
  min-width: 0;
  margin-left: 0 !important;
  text-align: left;
  display: grid !important;
  gap: 4px;
  line-height: 1.15;
  transform: none !important;
}

.commercial-entry-action .commercial-entry-action-label strong { font-size: 16px; font-weight: 800; letter-spacing: -.015em; }
.commercial-entry-action .commercial-entry-action-label small { color: rgba(7, 17, 27, .68); font-size: 11px; font-weight: 650; line-height: 1.25; }

.commercial-entry-action-arrow {
  display: grid !important;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  margin-left: auto !important;
  border-radius: 50%;
  background: rgba(255, 255, 255, .58);
  transition: transform .22s ease, background-color .22s ease !important;
}

.commercial-entry-action-team,
.commercial-entry-action-team:visited {
  border-color: #07111b;
  background: #07111b;
  color: #fff;
}

.commercial-entry-action-team .commercial-entry-action-arrow { background: rgba(255, 255, 255, .13); }
.commercial-entry-action-team .commercial-entry-action-label small { color: rgba(255, 255, 255, .68); }
.commercial-entry-action-catalogue { width: min(100%, 270px); min-height: 64px; }

@media (hover: hover) {
  .commercial-entry-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 17px 32px rgba(7, 17, 27, .16);
  }
  .commercial-entry-action:hover::before { transform: translateX(0); }
  .commercial-entry-action:hover .commercial-entry-action-arrow { transform: translateX(3px); background: #fff; }
  .commercial-entry-action-team:hover { background: #ff7900; color: #07111b; border-color: #ff7900; }
  .commercial-entry-action-team:hover .commercial-entry-action-label small { color: rgba(7, 17, 27, .68); }
}

.commercial-entry-action:active { transform: translateY(-1px) scale(.985); }

.commercial-entry-note {
  margin: 22px 0 0;
  text-align: center;
  font-size: 13px;
}

.catalogue-view .catalog-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.catalogue-view .catalog-meta #catalog-filter-note { color: #66717b; }

.catalog-filter-toggle {
  min-height: 44px;
  margin-left: auto;
  padding: 0 18px;
  border: 1px solid #d8d3cb;
  border-radius: 999px;
  background: #fff;
  color: #07111b;
  font: 700 14px var(--font-body);
  cursor: pointer;
}

.catalog-filter-toggle[aria-expanded="true"] {
  border-color: #ff7900;
  box-shadow: 0 0 0 3px rgba(255, 121, 0, .12);
}

#catalog-active-filter-count:not(:empty) {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-left: 6px;
  border-radius: 999px;
  background: #07111b;
  color: #fff;
  font-size: 12px;
}

.catalog-filter-panel {
  margin: 0 0 28px;
  padding: 18px;
  border: 1px solid #ded9d1;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(7, 17, 27, .06);
}

.catalog-filter-panel[hidden] { display: none !important; }
.catalog-filter-panel .ai-catalog-search { margin-bottom: 0; }

[data-studio-tool="shape"],
[data-studio-tool="names"],
[data-drawer-panel="shape"],
[data-drawer-panel="names"] {
  display: none !important;
}

.pack-value-breakdown {
  display: grid;
  gap: 6px;
  margin: 16px 0 2px;
  padding: 13px 15px;
  border-radius: 12px;
  background: #fff7ed;
  color: #744011;
  font-size: 12px;
}

.pack-value-breakdown strong { color: #07111b; font-size: 14px; }

@media (max-width: 760px) {
  .commercial-entry-grid { grid-template-columns: 1fr; }
  .commercial-entry-card { min-height: 0; }
  .home-view .process-steps-list { grid-template-columns: 1fr; }
  .catalog-filter-toggle { width: 100%; margin-left: 0; }
  .header-cta-btn { min-height:46px; padding-inline:16px; }
  .hero-btn-primary { width:100%; min-height:58px; }
  .home-view .hero-media-cta { right:14px; bottom:12px; left:14px; justify-content:center; min-height:48px; }
  .home-view .process-value-note { text-align:left; }
}

@media (max-width: 520px) {
  .commercial-entry-pack-links { grid-template-columns: 1fr; }
  .commercial-entry-action-catalogue { width: 100%; }
  .commercial-entry-action { min-height: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .header-cta-btn::after,
  .hero-btn-primary::after { display: none; }
  .commercial-entry-action,
  .commercial-entry-action::before,
  .commercial-entry-action-arrow { transition: none !important; }
  .commercial-entry-action:hover,
  .commercial-entry-action:active,
  .commercial-entry-action:hover .commercial-entry-action-arrow { transform: none; }
}
