/* =====================================================================
   Thème « tunnel » des landing pages : gabarit `tunnel-choix`.
   Même langage que le tunnel des formulaires publics (apps/web,
   formTunnel.css et formTunnelTheme.ts). La marque du domaine est posée en
   `data-brand` sur <body> : palette, police d'affichage, motif de scène et
   forme des boutons de Carton Service (cs), Logistipack (lo) ou Embaltec (em).
   Geist pour le texte, Geist Mono pour les étiquettes. Servi en cache
   `immutable` : toute modification de ce fichier incrémente
   TUNNEL_THEME_REVISION (renderTunnelChoicePage.ts).
   Polices sous licence SIL OFL 1.1 (fonts/LICENSE-*.txt).
   ===================================================================== */

@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(fonts/archivo-wdth.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/geist.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/geist-mono.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'Bricolage Grotesque Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  src: url(fonts/bricolage-wdth.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/barlow-condensed-700-italic.woff2) format('woff2');
}

/* Palettes (formTunnelTheme.ts, FORM_TUNNEL_PALETTES) et tons de scène
   calculés comme formTunnelStageTones (texte secondaire à partir de 72 %
   d'encre jusqu'à 4,5:1, filet 16 %, halo 10 % d'encre sur le fond de
   scène). Réglages d'affichage repris de formTunnel.css. */
.tc[data-brand="cs"] {
  --tc-bg: #F3F6FA; --tc-paper: #FFFFFF; --tc-ink: #0E1A2B; --tc-ink-2: #44546A; --tc-ink-3: #5E6B7D;
  --tc-line: #D9E1EA; --tc-brand: #004C96; --tc-brand-soft: #E6EFF8;
  --tc-cta: #F3901E; --tc-cta-ink: #121318; --tc-cta-edge: #C26A00;
  --tc-stage: #004C96; --tc-stage-ink: #FFFFFF; --tc-stage-mute: #B8CDE2; --tc-stage-line: #2969A7; --tc-stage-glow: #1A5EA0;
  --tc-display: 'Archivo Variable', 'Arial Narrow', sans-serif;
  --tc-display-wdth: 80; --tc-display-wght: 800;
  --tc-radius: 6px; --tc-btn-radius: 4px;
  --tc-logo-h: 40px; --tc-logo-h-sm: 34px;
}
.tc[data-brand="em"] {
  --tc-bg: #F3F2EE; --tc-paper: #FFFFFF; --tc-ink: #1B1B1A; --tc-ink-2: #4A4945; --tc-ink-3: #62615C;
  --tc-line: #E1DFD8; --tc-brand: #7A5F00; --tc-brand-soft: #FFF5CC;
  --tc-cta: #FFCC00; --tc-cta-ink: #1B1B1A; --tc-cta-edge: #1B1B1A;
  --tc-stage: #FFCC00; --tc-stage-ink: #1B1B1A; --tc-stage-mute: #5B4D13; --tc-stage-line: #DBB004; --tc-stage-glow: #E8BA03;
  --tc-display: 'Bricolage Grotesque Variable', Arial, sans-serif;
  --tc-display-wdth: 86; --tc-display-wght: 800; --tc-display-track: -0.035em; --tc-title-case: none;
  --tc-radius: 14px; --tc-btn-radius: 14px;
  --tc-tape-fill: url(#tc-stripes); --tc-tape-side: url(#tc-stripes);
  --tc-logo-h: 22px; --tc-logo-h-sm: 18px;
}
.tc[data-brand="lo"] {
  --tc-bg: #F6F3F2; --tc-paper: #FFFFFF; --tc-ink: #1A1315; --tc-ink-2: #4E4346; --tc-ink-3: #695D60;
  --tc-line: #E7DFDD; --tc-brand: #B10E29; --tc-brand-soft: #FBE8EB;
  --tc-cta: #C8102E; --tc-cta-ink: #FFFFFF; --tc-cta-edge: #8E0B20;
  --tc-stage: #C8102E; --tc-stage-ink: #FFFFFF; --tc-stage-mute: #F7DEE2; --tc-stage-line: #D1364F; --tc-stage-glow: #CE2843;
  --tc-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --tc-display-wght: 700; --tc-display-style: italic; --tc-display-track: -0.01em;
  --tc-radius: 3px; --tc-btn-radius: 2px; --tc-btn-skew: -10deg;
  --tc-logo-h: 30px; --tc-logo-h-sm: 24px;
}

.tc {
  --tc-sans: 'Geist Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tc-mono: 'Geist Mono Variable', ui-monospace, 'SFMono-Regular', monospace;
  --tc-display-wdth: 100; --tc-display-style: normal; --tc-display-track: -0.02em; --tc-title-case: uppercase;
  --tc-btn-skew: 0deg; --tc-tape-fill: var(--tc-cta); --tc-tape-side: var(--tc-cta-edge);
  --tc-kraft-top: #E4BC83; --tc-kraft-left: #D6A66B; --tc-kraft-right: #B9844C; --tc-kraft-edge: #8E5E2C;
  --tc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --tc-top-h: 82px;
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--tc-bg); color: var(--tc-ink);
  font-family: var(--tc-sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
.tc *, .tc *::before, .tc *::after { box-sizing: border-box; }
.tc a { color: inherit; }
.tc-ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tc :focus-visible { outline: 3px solid var(--tc-brand); outline-offset: 3px; border-radius: 4px; }

.tc-preview {
  padding: 8px 16px; background: #FFF4CC; color: #4A3A00; font: 600 0.8125rem/1.4 var(--tc-sans); text-align: center;
}

/* ------------------------------------------------------------------ */
/* En-tête                                                             */
/* ------------------------------------------------------------------ */
.tc-top {
  position: sticky; top: 0; z-index: 8; display: flex; align-items: center; gap: 16px; min-height: var(--tc-top-h);
  padding: 14px max(16px, env(safe-area-inset-right)) 14px max(16px, env(safe-area-inset-left));
  background: var(--tc-paper); border-bottom: 1px solid var(--tc-line);
}
.tc-plate {
  display: inline-flex; align-items: center; flex: none; height: 52px; padding: 0 10px;
  border-radius: var(--tc-radius); background: var(--tc-paper); box-shadow: 0 0 0 1px var(--tc-line);
}
.tc-logo { display: block; height: var(--tc-logo-h); width: auto; }
.tc-crumb { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tc-crumb__k { font-family: var(--tc-mono); font-size: 0.65625rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tc-ink-3); }
.tc-crumb__v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; font-weight: 600; }
.tc-call {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--tc-line); border-radius: 999px; background: var(--tc-paper);
  font-size: 0.9375rem; text-decoration: none; white-space: nowrap;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tc-call .tc-ico { color: var(--tc-brand); font-size: 1.05rem; }
.tc-call__k { font-weight: 700; }
.tc-call__v { color: var(--tc-ink-2); font-variant-numeric: tabular-nums; }
.tc-call:hover { border-color: var(--tc-brand); box-shadow: 0 0 0 3px var(--tc-brand-soft); }

/* ------------------------------------------------------------------ */
/* Deux colonnes : scène | parcours                                    */
/* ------------------------------------------------------------------ */
.tc-main { flex: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

.tc-stage { position: relative; overflow: clip; isolation: isolate; background: var(--tc-stage); color: var(--tc-stage-ink); }
.tc-stage__in {
  position: sticky; top: var(--tc-top-h); display: flex; flex-direction: column;
  height: calc(100vh - var(--tc-top-h)); height: calc(100dvh - var(--tc-top-h)); min-height: 560px;
}
/* Motifs de scène (formTunnel.css) : points (Embaltec), vagues (Carton
   Service), lignes de vitesse (Logistipack). */
.tc-motif {
  position: absolute; inset: -40px; z-index: -1; pointer-events: none; background: var(--tc-stage-line);
  -webkit-mask: radial-gradient(circle, currentColor 1.6px, transparent 2px) 0 0 / 18px 18px;
  mask: radial-gradient(circle, currentColor 1.6px, transparent 2px) 0 0 / 18px 18px;
  animation: tc-drift 40s linear infinite;
}
.tc[data-brand="cs"] .tc-motif {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='22' viewBox='0 0 64 22'%3E%3Cpath d='M0 11 C8 0 24 0 32 11 S56 22 64 11' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 64px 22px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='22' viewBox='0 0 64 22'%3E%3Cpath d='M0 11 C8 0 24 0 32 11 S56 22 64 11' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 64px 22px;
  animation-duration: 28s;
}
.tc[data-brand="lo"] .tc-motif {
  background: repeating-linear-gradient(180deg, transparent 0 26px, var(--tc-stage-line) 26px 28px, transparent 28px 61px, var(--tc-stage-line) 61px 62px);
  -webkit-mask: linear-gradient(90deg, transparent, currentColor 30%, currentColor 70%, transparent);
  mask: linear-gradient(90deg, transparent, currentColor 30%, currentColor 70%, transparent);
  animation: tc-speed 3.4s linear infinite;
}
@keyframes tc-speed { from { transform: translateX(30%); } to { transform: translateX(-30%); } }
.tc-stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 52%, var(--tc-stage-glow), transparent 70%);
}
@keyframes tc-drift { to { -webkit-mask-position: 640px 0; mask-position: 640px 0; } }

.tc-stage__top {
  flex: none; padding: 24px 28px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  font-family: var(--tc-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tc-stage-mute);
}
.tc-live { display: inline-flex; align-items: center; gap: 8px; }
.tc-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: tc-pulse 1.8s ease-in-out infinite; }
@keyframes tc-pulse { 50% { opacity: 0.25; } }

/* La scène mesure sa zone libre ; le carton y tient entier (viewBox « meet »),
   au plus 480 px de large. Largeur et hauteur explicites : un SVG en position
   absolue ne s'étire pas avec `inset`. */
.tc-scene { position: relative; flex: 1 1 0; min-height: 0; }
.tc-box {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 56px), 480px); height: calc(100% - 24px); overflow: visible;
}

/* Carton : faces, ruban, étiquette, cotes */
.tc-face { stroke: var(--tc-kraft-edge); stroke-width: 1.2; stroke-linejoin: round; }
.tc-face--top { fill: var(--tc-kraft-top); }
.tc-face--left { fill: var(--tc-kraft-left); }
.tc-face--right { fill: var(--tc-kraft-right); }
.tc-seam { stroke: var(--tc-kraft-edge); stroke-width: 1.4; opacity: 0.7; }
.tc-tape { fill: var(--tc-tape-fill); opacity: 0.94; }
.tc-tape--side { fill: var(--tc-tape-side); }
.tc-stripe-a { fill: #FFCC00; }
.tc-stripe-b { fill: #1B1B1A; }
.tc-label rect { fill: #FFFFFF; stroke: rgba(14, 26, 43, 0.18); }
.tc-label__code {
  font: var(--tc-display-style) var(--tc-display-wght) 22px var(--tc-display); font-variation-settings: "wdth" var(--tc-display-wdth);
  fill: var(--tc-brand); letter-spacing: -0.02em;
}
.tc-label__sub { font: 600 7.5px var(--tc-mono); letter-spacing: 0.14em; fill: var(--tc-ink-2); }
.tc-label__bars { stroke: var(--tc-ink); stroke-width: 1.4; }
.tc-dim { fill: none; stroke: var(--tc-stage-ink); stroke-width: 1.4; stroke-dasharray: 1; opacity: 0.85; }
/* Archivo et non la mono : « l » (largeur) ne doit pas se lire « 1 ». */
.tc-dim__k { font: 700 15px var(--tc-display); fill: var(--tc-stage-ink); }

/* Montage : les faces se posent, le ruban se déroule, l'étiquette se colle,
   les cotes se tracent, puis le carton flotte. */
.tc-face, .tc-seam { animation: tc-rise 0.7s var(--tc-ease) both; transform-box: view-box; }
.tc-face--left { animation-delay: 0.05s; }
.tc-face--right { animation-delay: 0.16s; }
.tc-face--top { animation-delay: 0.3s; }
.tc-seam { animation-delay: 0.42s; }
.tc-tape-reveal { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tc-draw 0.8s 0.7s var(--tc-ease) forwards; }
.tc-label { animation: tc-stick 0.5s 1.35s var(--tc-ease) both; }
.tc-dim { stroke-dashoffset: 1; animation: tc-draw 0.9s var(--tc-ease) forwards; }
.tc-dim:nth-of-type(1) { animation-delay: 1.7s; }
.tc-dim:nth-of-type(2) { animation-delay: 1.85s; }
.tc-dim:nth-of-type(3) { animation-delay: 2s; }
.tc-dim__k { animation: tc-fade 0.4s 2.3s both; }
.tc-lift { animation: tc-float 6s 2.6s ease-in-out infinite; }
.tc-shadow { animation: tc-shadow 6s 2.6s ease-in-out infinite; transform-origin: 211px 352px; transform-box: view-box; }
@keyframes tc-rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes tc-draw { to { stroke-dashoffset: 0; } }
@keyframes tc-stick { from { opacity: 0; transform: matrix(0.866, 0.5, 0, 1, 85, 116); } }
@keyframes tc-fade { from { opacity: 0; } }
@keyframes tc-float { 50% { transform: translateY(-8px); } }
@keyframes tc-shadow { 50% { transform: scale(0.92); opacity: 0.8; } }

/* Survol d'un parcours : le carton se soulève, les cotes passent en couleur d'action. */
.tc-main:has(.tc-card:hover) .tc-box .tc-dim,
.tc-main:has(.tc-card:focus-visible) .tc-box .tc-dim { stroke: var(--tc-cta); opacity: 1; }
.tc-main:has(.tc-card:hover) .tc-box .tc-dim__k,
.tc-main:has(.tc-card:focus-visible) .tc-box .tc-dim__k { fill: var(--tc-cta); }

.tc-fiche { flex: none; display: grid; margin: 0 28px 24px; max-width: 440px; }
.tc-fiche__row {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 0;
  border-bottom: 1px solid var(--tc-stage-line);
  animation: tc-row 0.5s var(--tc-ease) both; animation-delay: calc(0.9s + var(--tc-i, 0) * 0.12s);
}
.tc-fiche__row:first-child { border-top: 1px solid var(--tc-stage-line); }
.tc-fiche dt { font-family: var(--tc-mono); font-size: 0.65625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tc-stage-mute); }
.tc-fiche dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.90625rem; font-weight: 600; }
@keyframes tc-row { from { opacity: 0; transform: translateX(-10px); } }

/* ------------------------------------------------------------------ */
/* Parcours : titre, cartes de choix                                   */
/* ------------------------------------------------------------------ */
.tc-flow {
  display: flex; flex-direction: column; min-width: 0; max-width: 980px;
  padding: clamp(32px, 6vh, 72px) max(20px, min(6vw, 96px)) 40px clamp(20px, 5vw, 84px);
}
.tc-eyebrow {
  margin: 0 0 14px; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--tc-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tc-brand);
  animation: tc-in 0.6s var(--tc-ease) both;
}
.tc-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--tc-cta); }
.tc-title {
  margin: 0; max-width: 18ch;
  font-family: var(--tc-display); font-weight: var(--tc-display-wght); font-style: var(--tc-display-style);
  font-variation-settings: "wdth" var(--tc-display-wdth);
  font-size: clamp(42px, 4.6vw, 72px); line-height: 0.96; letter-spacing: var(--tc-display-track);
  text-transform: var(--tc-title-case); text-wrap: balance;
  animation: tc-in 0.7s 0.08s var(--tc-ease) both;
}
.tc-title span { color: var(--tc-brand); }
.tc-lede {
  margin: 20px 0 0; max-width: 56ch; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); color: var(--tc-ink-2); text-wrap: pretty;
  animation: tc-in 0.7s 0.16s var(--tc-ease) both;
}
@keyframes tc-in { from { opacity: 0; transform: translateY(14px); } }

.tc-choices { margin-top: clamp(28px, 4vh, 44px); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.tc-card {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 100%;
  padding: 24px 24px 22px; border-radius: var(--tc-radius); background: var(--tc-paper);
  box-shadow: 0 0 0 1px var(--tc-line), 0 1px 2px rgba(14, 26, 43, 0.06);
  text-decoration: none; color: var(--tc-ink);
  transition: transform 0.35s var(--tc-ease), box-shadow 0.35s var(--tc-ease);
  animation: tc-in 0.7s var(--tc-ease) both;
}
.tc-card:nth-child(1) { animation-delay: 0.26s; }
.tc-card:nth-child(2) { animation-delay: 0.36s; }
.tc-card:nth-child(3) { animation-delay: 0.46s; }
.tc-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: var(--tc-radius) 0 0 var(--tc-radius);
  background: var(--tc-brand); transform: scaleY(0.25); transform-origin: top; transition: transform 0.4s var(--tc-ease), background 0.3s;
}
.tc-card:hover, .tc-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--tc-brand), 0 18px 40px -18px color-mix(in srgb, var(--tc-brand) 45%, transparent);
}
.tc-card:hover::before, .tc-card:focus-visible::before { transform: scaleY(1); background: var(--tc-cta); }
.tc-card__tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--tc-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tc-ink-3);
}
.tc-card__rank {
  display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px; border-radius: 4px;
  background: var(--tc-brand-soft); color: var(--tc-brand); font-weight: 700;
}
.tc-card__title {
  font-family: var(--tc-display); font-weight: var(--tc-display-wght); font-style: var(--tc-display-style);
  font-variation-settings: "wdth" var(--tc-display-wdth);
  font-size: clamp(1.5rem, 2vw, 1.875rem); line-height: 1.05; letter-spacing: var(--tc-display-track); text-transform: var(--tc-title-case);
}
.tc-card__text { color: var(--tc-ink-2); }
.tc-card__points { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tc-card__points li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; }
.tc-card__points .tc-ico { margin-top: 0.22em; color: var(--tc-brand); stroke-width: 2.6; }
/* Le fond du bouton est un calque : penché chez Logistipack (comme son site),
   le texte reste droit. */
.tc-card__cta {
  position: relative; isolation: isolate;
  margin-top: auto; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 20px; color: var(--tc-cta-ink); font-weight: 700; font-size: 1rem;
}
.tc-card__cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--tc-btn-radius);
  background: var(--tc-cta); box-shadow: inset 0 -3px 0 var(--tc-cta-edge); transform: skewX(var(--tc-btn-skew));
}
.tc-card__cta .tc-ico { transition: transform 0.35s var(--tc-ease); }
.tc-card:hover .tc-card__cta .tc-ico, .tc-card:focus-visible .tc-card__cta .tc-ico { transform: translateX(4px); }

.tc-note {
  margin: 26px 0 0; display: flex; gap: 10px; align-items: flex-start; max-width: 64ch;
  font-size: 0.9375rem; color: var(--tc-ink-2); animation: tc-in 0.7s 0.5s var(--tc-ease) both;
}
.tc-note .tc-ico { margin-top: 0.2em; color: var(--tc-brand); font-size: 1.1rem; }
.tc-secondary {
  margin: 14px 0 0; padding-top: 18px; border-top: 1px solid var(--tc-line); font-size: 0.9375rem; color: var(--tc-ink-3);
  animation: tc-in 0.7s 0.56s var(--tc-ease) both;
}
.tc-secondary a {
  display: inline-flex; align-items: center; gap: 6px; color: var(--tc-brand); font-weight: 700; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.tc-secondary a:hover .tc-ico { transform: translateX(3px); }
.tc-secondary .tc-ico { transition: transform 0.3s var(--tc-ease); }

.tc-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
  padding: 18px max(16px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  border-top: 1px solid var(--tc-line); background: var(--tc-paper); font-size: 0.8125rem; color: var(--tc-ink-3);
}
.tc-foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.tc-foot a { text-decoration: none; }
.tc-foot a:hover { color: var(--tc-ink); text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* Petits écrans : scène en bandeau, cartes empilées                   */
/* ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .tc-main { grid-template-columns: minmax(0, 1fr); }
  .tc-stage__in { position: relative; top: auto; height: 300px; min-height: 0; }
  .tc-fiche { display: none; }
  .tc-box { top: 4px; width: calc(100% - 32px); height: calc(100% - 12px); }
  .tc-flow { padding: 28px 20px 32px; max-width: none; }
}
@media (max-width: 560px) {
  .tc { --tc-top-h: 70px; }
  .tc-top { gap: 12px; padding-top: 10px; padding-bottom: 10px; }
  .tc-plate { height: 46px; padding: 0 8px; }
  .tc-logo { height: var(--tc-logo-h-sm); }
  .tc-crumb { display: none; }
  .tc-call__k { display: none; }
  .tc-stage__in { height: 240px; }
  .tc-stage__top { padding: 16px 16px 0; }
  .tc-flow { padding: 24px 16px 28px; }
  .tc-title { font-size: clamp(38px, 11vw, 52px); }
  .tc-card { padding: 20px 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .tc *, .tc *::before, .tc *::after { animation: none !important; transition: none !important; }
  .tc-tape-reveal, .tc-dim { stroke-dashoffset: 0; }
}