/* ==========================================================================
   TIMCOD — guides de dépannage d'imprimantes (contenu des pages)
   --------------------------------------------------------------------------
   Toutes les règles sont limitées au conteneur <main class="tc-guide"> :
   elles ne touchent ni l'en-tête ni le pied de page, qui viennent du site
   (feuille de style assets/site/timcod.css, chargée avant celle-ci).

   Charte graphique TIMCOD (Charte Graphique TIMCOD.pdf) :
   - couleurs du logo : bleu Timcod RVB 0/5/70 (#000546) et orange Timcod RVB 255/150/0 (#ff9600) ;
   - typographie : ITC Avant Garde (Adobe Fonts « itc-avant-garde-gothic-pro », chargée par la
     feuille du site) ; Spartan, police de substitution prévue par la charte, prend le relais quand
     Avant Garde n'est pas disponible (en local, domaine de test) ;
   - texte courant fer à gauche ; interlettrage des titres resserré (« -30 » dans la charte) ;
   - éléments graphiques : motif « tims » (monogramme) du site, orange sur fond bleu pour
     identifier la marque.
   Les teintes secondaires (gris, bleu clair, orange foncé) sont celles du site timcod.fr.
   Couleurs et police : variables --tc-* ci-dessous.
   ========================================================================== */

/* Spartan (League Spartan, licence SIL OFL : ../fonts/league-spartan-OFL.txt), hébergée avec les pages.
   Téléchargée seulement si ITC Avant Garde ne se charge pas. */
@font-face {
  font-family: "TC Spartan";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/league-spartan-latin-wght-normal.woff2) format("woff2-variations"), url(../fonts/league-spartan-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "TC Spartan";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/league-spartan-latin-ext-wght-normal.woff2) format("woff2-variations"), url(../fonts/league-spartan-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Hauteur de l'en-tête fixe du site (variables de assets/site/timcod.css, mises à jour au défilement
     par timcod-site.js) : la barre de navigation des guides se colle juste dessous. */
  --tm-sticky-offset: calc(var(--header-height, 10rem) + var(--header-message-height, 0px));

  /* Couleurs de la charte */
  --tc-navy: #000546;          /* bleu Timcod (logo) : titres, bandeaux, fonds forts */
  --tc-orange: #ff9600;        /* orange Timcod (logo) : boutons, filets d'accent */
  --tc-orange-dark: #ad6418;   /* orange foncé du site : survol des boutons, textes orange lisibles */
  --tc-orange-soft: #fff3e0;   /* fond orange très clair (encadré « technicien ») */
  /* Teintes du site timcod.fr */
  --tc-blue: #000a89;          /* bleu des puces et filets de citation du site */
  --tc-blue-soft: #eef3ff;     /* fond bleu clair des citations du site */
  --tc-ink: #181a30;           /* texte courant */
  --tc-muted: #6a6c7f;         /* texte secondaire */
  --tc-line: #d3d4dd;          /* filets et bordures */
  --tc-bg-soft: #f7f7fb;       /* fonds gris très clair */
  /* Pôle Services (charte, « pattern maillons de couleurs ») : badges des imprimantes mobiles */
  --tc-services: #2d379b;
  --tc-services-soft: #e9ebfb;

  --tc-font: itc-avant-garde-gothic-pro, "TC Spartan", "Century Gothic", "Avenir Next", Futura, sans-serif;
  --tc-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --tc-radius: 4px;            /* arrondis discrets, comme les boutons du site */
  --tc-subnav-h: 52px;
  --tc-offset: calc(var(--tm-sticky-offset, 0px) + var(--tc-subnav-h) + 16px);
  /* Motif « tims » du site (monogramme), en orange comme sur les en-têtes du site */
  --tc-motif: url(https://www.timcod.fr/themes/custom/timcod/assets/dist/images/patterns/monogram-pattern-vertical.svg);
  --tc-motif-orange: invert(39%) sepia(94%) saturate(483%) hue-rotate(351deg) brightness(91%) contrast(88%);
}
html { scroll-behavior: smooth; }

/* En-tête et pied de page du site : même police de substitution qu'au contenu si ITC Avant Garde
   ne se charge pas (sans effet sur timcod.fr, où la police du site est disponible). */
.Header *, .Footer * { font-family: itc-avant-garde-gothic-pro, "TC Spartan", "Century Gothic", sans-serif; }

.tc-guide { display: block; max-width: 860px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; color: var(--tc-ink); font: 300 17px/1.65 var(--tc-font); overflow-wrap: anywhere; }
.tc-guide *, .tc-guide *::before, .tc-guide *::after { box-sizing: border-box; }

/* La feuille de style du site (assets/site/timcod.css) remet à zéro les styles par défaut du navigateur
   (gras, italique, puces, marges…). On les rétablit dans le contenu des guides uniquement.
   « :where(.tc-guide) élément » a la même priorité que les règles du site (un simple élément) et vient
   après elles : il l'emporte sur le site, mais pas sur les règles « tc- » de ce fichier. */
:where(.tc-guide) p, :where(.tc-guide) dl, :where(.tc-guide) pre { margin: 1em 0; }
:where(.tc-guide) blockquote, :where(.tc-guide) figure { margin: 1em 40px; }
:where(.tc-guide) ul, :where(.tc-guide) ol { margin: 1em 0; padding-left: 40px; }
:where(.tc-guide) ul { list-style: disc; }
:where(.tc-guide) ol { list-style: decimal; }
:where(.tc-guide) li { list-style: inherit; margin: 0; padding: 0; }
:where(.tc-guide) li ul, :where(.tc-guide) li ol { margin: 0; }
:where(.tc-guide) ul ul { list-style: circle; }
:where(.tc-guide) h1, :where(.tc-guide) h2, :where(.tc-guide) h3, :where(.tc-guide) h4 { font-family: inherit; line-height: inherit; color: inherit; font-weight: 700; text-transform: none; letter-spacing: -.02em; }
:where(.tc-guide) h1 { font-size: 2em; margin: .67em 0; }
:where(.tc-guide) h2 { font-size: 1.5em; margin: .83em 0; }
:where(.tc-guide) h3 { font-size: 1.17em; margin: 1em 0; }
:where(.tc-guide) h4 { font-size: 1em; margin: 1.33em 0; }
:where(.tc-guide) strong, :where(.tc-guide) b, :where(.tc-guide) th, :where(.tc-guide) dt { font-weight: 600; }
:where(.tc-guide) em, :where(.tc-guide) i, :where(.tc-guide) cite, :where(.tc-guide) dfn { font-style: italic; }
:where(.tc-guide) code, :where(.tc-guide) kbd, :where(.tc-guide) samp, :where(.tc-guide) pre { font-family: var(--tc-mono); }
:where(.tc-guide) small { font-size: smaller; }
:where(.tc-guide) sup { vertical-align: super; font-size: smaller; }
:where(.tc-guide) sub { vertical-align: sub; font-size: smaller; }
:where(.tc-guide) table { border-collapse: separate; border-spacing: 2px; }
:where(.tc-guide) thead, :where(.tc-guide) tbody, :where(.tc-guide) tfoot, :where(.tc-guide) tr { vertical-align: middle; }
:where(.tc-guide) th, :where(.tc-guide) td { padding: 1px; vertical-align: inherit; }
:where(.tc-guide) th { text-align: -webkit-match-parent; text-align: match-parent; }
:where(.tc-guide) summary { display: list-item; }
:where(.tc-guide) img, :where(.tc-guide) svg { display: inline; }
:where(.tc-guide) input, :where(.tc-guide) button { padding: 1px 2px; line-height: normal; }
/* Le site impose box-sizing: content-box aux champs de recherche (input[type=search]) : on garde le calcul des guides. */
.tc-guide input, .tc-guide textarea, .tc-guide select, .tc-guide button { box-sizing: border-box; }
:where(.tc-guide) hr { border: 0; border-top: 1px solid; margin: .5em 0; }
.tc-guide img { max-width: 100%; }

.tc-guide a { color: var(--tc-navy); text-decoration: underline; text-decoration-color: rgba(0, 5, 70, .35); text-underline-offset: 2px; }
.tc-guide a:hover { color: var(--tc-orange-dark); text-decoration-color: currentColor; }
.tc-guide strong, .tc-guide b { font-weight: 600; }
/* Liens de sources : ouverts dans un nouvel onglet (target="_blank", rel="nofollow noopener noreferrer"),
   signalés par une petite flèche ; la mention « (nouvelle fenêtre) » n'est lue que par les lecteurs d'écran. */
.tc-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tc-guide a[target="_blank"]::after { content: ""; display: inline-block; width: .72em; height: .72em; margin-left: .28em; vertical-align: -.02em; background: currentColor; opacity: .75;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 1.5H1.5v9h9v-3' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M6.5 1h4.5v4.5M11 1 5.5 6.5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 1.5H1.5v9h9v-3' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M6.5 1h4.5v4.5M11 1 5.5 6.5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain; }

/* ---- Bandeau de titre (fil d'Ariane, sur-titre, titre, signature) ----
   Bleu Timcod sur toute la largeur de l'écran, comme les en-têtes de pages du site ;
   motif « tims » orange sur le bord gauche (charte : « motif orange sur fond bleu »). */
.tc-hero { position: relative; isolation: isolate; color: #fff; background: var(--tc-navy); box-shadow: 0 0 0 100vmax var(--tc-navy); clip-path: inset(0 -100vmax); padding: 26px 0 34px; margin: 0 0 30px; }
.tc-hero::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); width: 42px; background: var(--tc-motif) 0 0 / 100% auto repeat-y; filter: var(--tc-motif-orange); opacity: .5; pointer-events: none; }
.tc-hero .tc-breadcrumb { color: rgba(255, 255, 255, .72); margin: 0 0 22px; }
.tc-guide .tc-hero .tc-breadcrumb a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.tc-guide .tc-hero .tc-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.tc-hero .tc-kicker { color: #fff; }
.tc-guide .tc-hero h1 { color: #fff; }
.tc-hero .tc-byline { color: rgba(255, 255, 255, .78); margin: 0; }
.tc-hero .tc-byline strong { color: #fff; }
.tc-guide .tc-hero a { color: #fff; }

/* ---- Fil d'Ariane, titres ---- */
.tc-breadcrumb { font-size: 14px; color: var(--tc-muted); margin: 22px 0 8px; }
.tc-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tc-breadcrumb li + li::before { content: "›"; margin-right: 6px; }
.tc-guide .tc-breadcrumb a { color: var(--tc-muted); text-decoration: none; }
.tc-guide .tc-breadcrumb a:hover { color: var(--tc-navy); }
/* Sur-titre : capitales légères précédées d'un filet orange, comme les en-têtes du site */
.tc-kicker { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 300; letter-spacing: .1em; text-transform: uppercase; color: var(--tc-navy); margin: 0 0 4px; }
.tc-kicker::before { content: ""; flex: 0 0 48px; height: 4px; background: var(--tc-orange); }
.tc-guide h1 { font-size: 40px; font-weight: 700; line-height: 1.12; margin: 10px 0 14px; color: var(--tc-navy); letter-spacing: -.03em; }
.tc-guide h2 { font-size: 28px; font-weight: 700; line-height: 1.2; margin: 0 0 14px; color: var(--tc-navy); letter-spacing: -.025em; }
.tc-guide h3 { font-size: 19px; font-weight: 700; line-height: 1.35; margin: 0; color: var(--tc-navy); letter-spacing: -.01em; }
.tc-byline { color: var(--tc-muted); font-size: 15px; margin: 0 0 22px; }
.tc-byline strong { color: var(--tc-ink); font-weight: 600; }

/* ---- Encadré « En bref » (réponse d'abord) ---- */
.tc-brief { background: var(--tc-blue-soft); border-left: 4px solid var(--tc-navy); border-radius: 0 var(--tc-radius) var(--tc-radius) 0; padding: 18px 22px; margin: 22px 0; }
.tc-brief p { margin: 0 0 10px; }
.tc-brief p:last-child { margin-bottom: 0; }
.tc-brief > p > strong:first-child { color: var(--tc-navy); font-weight: 700; }
.tc-brief ul { margin: 6px 0 0; padding-left: 20px; }
.tc-brief li { margin: 4px 0; }
.tc-brief li::marker { color: var(--tc-orange); }

/* ---- Barre de navigation collante (sous l'en-tête du site) : onglets soulignés en orange ---- */
.tc-subnav { position: sticky; top: var(--tm-sticky-offset, 0px); z-index: 2; display: flex; gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--tc-line); margin: 26px -16px 0; padding: 0 16px; min-height: var(--tc-subnav-h); }
.tc-subnav::-webkit-scrollbar { display: none; }
.tc-guide .tc-subnav a { flex: 0 0 auto; display: flex; align-items: center; font-size: 14.5px; font-weight: 600; text-decoration: none; color: var(--tc-muted); padding: 0 12px; border-bottom: 3px solid transparent; white-space: nowrap; }
.tc-guide .tc-subnav a:hover { color: var(--tc-navy); }
.tc-guide .tc-subnav a.is-active { color: var(--tc-navy); border-bottom-color: var(--tc-orange); }
/* Flèches de défilement (ajoutées par timcod-guide.js) : la barre est placée dans un cadre collant
   qui porte les flèches ; un dégradé blanc les détache des intitulés qui passent dessous. */
.tc-subnav-cadre { position: sticky; top: var(--tm-sticky-offset, 0px); z-index: 2; margin: 26px -16px 0; }
.tc-guide .tc-subnav-cadre .tc-subnav { position: relative; top: auto; z-index: auto; margin: 0; }
.tc-subnav__fleche { position: absolute; z-index: 3; top: 0; bottom: 1px; width: 52px; display: flex; align-items: center; margin: 0; padding: 0; border: 0; cursor: pointer; }
.tc-subnav__fleche[hidden] { display: none; }
.tc-subnav__fleche--gauche { left: 0; justify-content: flex-start; padding-left: 14px; background: linear-gradient(90deg, #fff 55%, rgba(255, 255, 255, 0)); }
.tc-subnav__fleche--droite { right: 0; justify-content: flex-end; padding-right: 14px; background: linear-gradient(270deg, #fff 55%, rgba(255, 255, 255, 0)); }
.tc-subnav__fleche::before { content: ""; width: 12px; height: 12px; border-left: 3px solid var(--tc-navy); border-bottom: 3px solid var(--tc-navy); transition: border-color .2s; }
.tc-subnav__fleche--gauche::before { transform: rotate(45deg); margin-left: 4px; }
.tc-subnav__fleche--droite::before { transform: rotate(-135deg); margin-right: 4px; }
.tc-subnav__fleche:hover::before { border-color: var(--tc-orange); }

/* ---- Sections ---- */
.tc-block { margin-top: 56px; scroll-margin-top: var(--tc-offset); }
.tc-block > p.tc-lead { font-size: 18px; color: var(--tc-muted); margin: 0 0 18px; }
.tc-section-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.tc-section-head h2 { flex: 1 1 420px; }
.tc-tools { display: flex; gap: 6px; padding-top: 6px; }
.tc-tool { font: 600 13px/1 var(--tc-font); color: var(--tc-navy); background: #fff; border: 1px solid var(--tc-line); border-radius: var(--tc-radius); padding: 8px 12px; cursor: pointer; }
.tc-tool:hover { border-color: var(--tc-navy); }
.tc-tool:focus-visible { outline: 2px solid var(--tc-orange); outline-offset: 2px; }

/* ---- Tableaux (en-tête bleu Timcod ; empilés sur mobile) ---- */
.tc-table-scroll { margin: 14px 0 6px; border: 1px solid var(--tc-line); border-radius: var(--tc-radius); overflow: hidden; }
table.tc-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tc-table th, .tc-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--tc-line); vertical-align: top; }
.tc-table th { background: var(--tc-navy); color: #fff; font-weight: 600; font-size: 14px; letter-spacing: .02em; }
.tc-table th:nth-child(1) { width: 30%; } .tc-table th:nth-child(2) { width: 24%; } .tc-table th:nth-child(4) { width: 14%; }
.tc-table tbody tr:last-child td { border-bottom: 0; }
.tc-table tbody tr:hover td { background: var(--tc-bg-soft); }
.tc-table code { font-family: var(--tc-mono); font-size: 13.5px; background: var(--tc-bg-soft); padding: 1px 6px; border-radius: 2px; }
.tc-table td a { font-weight: 600; }
.tc-led { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; border: 1px solid rgba(0, 0, 0, .15); }
/* Couleurs réelles des voyants des imprimantes (information, pas décoration) */
.tc-led.red { background: #d93025; } .tc-led.yellow { background: #f5b400; } .tc-led.green { background: #1e8e3e; } .tc-led.off { background: #fff; }
@media (max-width: 640px) {
  .tc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tc-table, .tc-table tbody, .tc-table tr, .tc-table td { display: block; width: 100%; }
  .tc-table tr { padding: 10px 12px 12px; border-bottom: 1px solid var(--tc-line); }
  .tc-table tbody tr:last-child { border-bottom: 0; }
  .tc-table td { padding: 4px 0; border: 0; }
  .tc-table td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tc-muted); margin-bottom: 2px; }
  .tc-table td:first-child::before { display: none; }
  .tc-table td:first-child code { font-size: 14px; font-weight: 700; color: var(--tc-navy); }
}

/* ---- Fiches en accordéon ---- */
.tc-guide details.tc-issue, .tc-guide details.tc-faq-item { border: 1px solid var(--tc-line); border-radius: var(--tc-radius); background: #fff; margin: 12px 0; scroll-margin-top: var(--tc-offset); transition: box-shadow .2s, border-color .2s; }
.tc-guide details.tc-issue[open], .tc-guide details.tc-faq-item[open] { border-color: var(--tc-navy); box-shadow: inset 4px 0 0 var(--tc-orange), 0 6px 22px rgba(0, 5, 70, .08); }
.tc-guide details summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; column-gap: 14px; align-items: start; padding: 16px 20px; border-radius: var(--tc-radius); }
.tc-guide details summary::-webkit-details-marker { display: none; }
.tc-guide details summary:hover { background: var(--tc-bg-soft); }
.tc-guide details[open] summary { border-radius: var(--tc-radius) var(--tc-radius) 0 0; border-bottom: 1px solid var(--tc-line); }
.tc-guide details summary:focus-visible { outline: 2px solid var(--tc-orange); outline-offset: 2px; }
.tc-guide details summary h3 { grid-column: 1; }
.tc-signal { grid-column: 1; display: block; font-size: 14px; color: var(--tc-muted); margin-top: 4px; }
.tc-signal code { font-family: var(--tc-mono); font-size: 13px; background: var(--tc-bg-soft); padding: 1px 6px; border-radius: 2px; }
.tc-chevron { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tc-blue-soft); position: relative; flex: 0 0 auto; transition: transform .25s, background .2s; }
.tc-chevron::before { content: ""; position: absolute; left: 10px; top: 8px; width: 8px; height: 8px; border-right: 2px solid var(--tc-navy); border-bottom: 2px solid var(--tc-navy); transform: rotate(45deg); }
.tc-guide details[open] .tc-chevron { transform: rotate(180deg); background: var(--tc-navy); }
.tc-guide details[open] .tc-chevron::before { border-color: #fff; }
.tc-issue-body { padding: 18px 20px 20px; animation: tc-fade .28s ease-out; }
@keyframes tc-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tc-issue-body { animation: none; } .tc-chevron { transition: none; } html { scroll-behavior: auto; } }

.tc-answer { background: var(--tc-blue-soft); border-left: 4px solid var(--tc-navy); border-radius: 0 var(--tc-radius) var(--tc-radius) 0; padding: 12px 16px; margin: 0 0 16px; font-size: 17px; }
.tc-answer strong { color: var(--tc-navy); font-weight: 700; }
.tc-issue-body h4 { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--tc-orange-dark); margin: 18px 0 6px; }
.tc-issue-body p { margin: 0 0 8px; }
.tc-issue-body ol, .tc-issue-body ul { margin: 6px 0 0; padding-left: 22px; }
.tc-issue-body li { margin: 5px 0; }
.tc-issue-body ol li::marker { color: var(--tc-navy); font-weight: 600; }
.tc-issue-body code { font-family: var(--tc-mono); font-size: 14px; background: var(--tc-bg-soft); padding: 1px 6px; border-radius: 2px; }
.tc-tech { background: var(--tc-orange-soft); border-left: 4px solid var(--tc-orange); border-radius: 0 var(--tc-radius) var(--tc-radius) 0; padding: 10px 14px; margin: 14px 0 0 !important; font-size: 15.5px; }
.tc-tech strong { color: var(--tc-orange-dark); }
.tc-note { font-size: 15px; color: var(--tc-muted); margin: 12px 0 0 !important; }
.tc-source { font-size: 14px; color: var(--tc-muted); margin: 14px 0 0 !important; padding-top: 10px; border-top: 1px dashed var(--tc-line); }

/* ---- Appels à l'action : boutons orange du site (survol orange foncé) ---- */
.tc-cta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; background: var(--tc-bg-soft); border-left: 4px solid var(--tc-orange); border-radius: 0 var(--tc-radius) var(--tc-radius) 0; padding: 16px 20px; margin: 24px 0 0; font-size: 16px; }
.tc-cta-line p { margin: 0; flex: 1 1 340px; }
.tc-guide .tc-btn { display: inline-block; background: var(--tc-orange); color: #fff; font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none; padding: 13px 24px; border: 2px solid var(--tc-orange); border-radius: var(--tc-radius); text-align: center; max-width: 100%; transition: background-color .2s, border-color .2s, color .2s; }
.tc-guide .tc-btn:hover { background: var(--tc-orange-dark); border-color: var(--tc-orange-dark); color: #fff; }
.tc-guide .tc-btn:focus-visible { outline: 2px solid var(--tc-navy); outline-offset: 2px; }
.tc-guide .tc-btn.tc-btn-ghost { background: transparent; color: var(--tc-navy); border-color: var(--tc-navy); }
.tc-guide .tc-btn.tc-btn-ghost:hover { background: var(--tc-navy); color: #fff; }
.tc-cta-block { position: relative; isolation: isolate; overflow: hidden; background: var(--tc-navy); color: #fff; border-radius: var(--tc-radius); padding: 36px 34px 36px 82px; margin-top: 60px; }
.tc-cta-block::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 42px; background: var(--tc-motif) 0 0 / 100% auto repeat-y; filter: var(--tc-motif-orange); opacity: .5; pointer-events: none; }
.tc-guide .tc-cta-block h2 { color: #fff; }
.tc-cta-block p { margin: 0 0 20px; max-width: 760px; }
.tc-cta-block .tc-btn { margin: 0 8px 8px 0; }
.tc-guide .tc-cta-block .tc-btn.tc-btn-ghost { color: #fff; border-color: #fff; }
.tc-guide .tc-cta-block .tc-btn.tc-btn-ghost:hover { background: #fff; color: var(--tc-navy); }
.tc-guide .tc-cta-block .tc-btn:focus-visible { outline-color: #fff; }

/* ---- Maintenance préventive ---- */
.tc-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.tc-benefits li { background: var(--tc-bg-soft); border-top: 3px solid var(--tc-orange); border-radius: 0 0 var(--tc-radius) var(--tc-radius); padding: 14px 16px; font-size: 15.5px; }
.tc-benefits li strong { display: block; color: var(--tc-navy); font-weight: 700; margin-bottom: 4px; }

/* ---- FAQ ---- */
.tc-guide details.tc-faq-item summary { padding: 14px 18px; }
.tc-guide details.tc-faq-item h3 { font-size: 17.5px; }
.tc-guide details.tc-faq-item .tc-issue-body { padding: 14px 18px 16px; }

/* ---- Sources, voir aussi ---- */
.tc-sources ul, .tc-links ul { padding-left: 20px; }
.tc-sources li, .tc-links li { margin: 5px 0; font-size: 15px; }
.tc-links li::marker, .tc-sources li::marker { color: var(--tc-orange); }
.tc-tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 2px; margin-left: 6px; vertical-align: middle; }
.tc-tag.off { background: var(--tc-blue-soft); color: var(--tc-navy); }

@media (max-width: 640px) {
  .tc-guide { font-size: 16px; }
  .tc-guide h1 { font-size: 30px; } .tc-guide h2 { font-size: 23px; } .tc-guide h3 { font-size: 17.5px; }
  .tc-hero { padding: 20px 0 26px; }
  .tc-hero::before { display: none; }
  .tc-kicker { font-size: 13px; gap: 10px; }
  .tc-kicker::before { flex-basis: 32px; }
  .tc-guide details summary { padding: 14px 14px; }
  .tc-issue-body { padding: 14px 14px 16px; }
  .tc-cta-block { padding: 28px 20px; }
  .tc-cta-block::before { display: none; }
  .tc-guide .tc-btn { display: block; }
  .tc-cta-block .tc-btn { margin: 0 0 10px; }
  .tc-cta-line .tc-btn { flex: 1 1 100%; }
  .tc-tools { width: 100%; padding: 0 0 10px; }
}
@media print {
  .Header, .Footer, .overlay, #axeptio_overlay, .tc-subnav, .tc-subnav-cadre, .tc-tools, .tc-cta-line, .tc-cta-block { display: none !important; }
  body { padding-top: 0 !important; }
  .tc-hero { background: none; box-shadow: none; clip-path: none; color: var(--tc-ink); padding: 0; border-bottom: 3px solid var(--tc-orange); }
  .tc-hero::before { display: none; }
  .tc-guide .tc-hero h1, .tc-hero .tc-kicker, .tc-hero .tc-byline, .tc-hero .tc-byline strong, .tc-hero .tc-breadcrumb, .tc-guide .tc-hero .tc-breadcrumb a { color: var(--tc-navy); }
  .tc-guide details { break-inside: avoid; box-shadow: none !important; }
  .tc-chevron { display: none; }
}

/* ==========================================================================
   PAGES DE NAVIGATION : « Pannes d'imprimantes » (hub) et pages marque
   ========================================================================== */
.tc-guide--wide { max-width: 1120px; }
.tc-guide--wide .tc-lead, .tc-guide--wide .tc-prose, .tc-guide--wide .tc-brief, .tc-guide--wide .tc-byline { max-width: 820px; }
.tc-guide--wide .tc-subnav { margin-left: -16px; margin-right: -16px; }
.tc-prose p { margin: 0 0 12px; }
.tc-guide .tc-block h3.tc-subhead { font-size: 18px; margin: 28px 0 6px; }
ul.tc-links { padding-left: 20px; margin: 0; }
.tc-guide .tc-block h3.tc-group-title { font-size: 20px; margin: 30px 0 4px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tc-group-title small { font-size: 14px; font-weight: 300; letter-spacing: 0; color: var(--tc-muted); }
.tc-group-desc { margin: 0 0 4px; color: var(--tc-muted); font-size: 15.5px; max-width: 820px; }

/* Chiffres clés : grands nombres bleu Timcod sous un filet orange */
.tc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.tc-stats li { background: var(--tc-bg-soft); border-top: 3px solid var(--tc-orange); border-radius: 0 0 var(--tc-radius) var(--tc-radius); padding: 14px 16px; }
.tc-stats strong { display: block; font-size: 32px; line-height: 1.1; font-weight: 700; color: var(--tc-navy); letter-spacing: -.03em; }
.tc-stats span { display: block; font-size: 14px; line-height: 1.4; color: var(--tc-muted); margin-top: 4px; }

/* Recherche instantanée (modèle, message, symptôme) */
.tc-finder { margin: 24px 0 0; background: #fff; border: 1px solid var(--tc-line); border-top: 3px solid var(--tc-navy); border-radius: var(--tc-radius); padding: 16px 18px; box-shadow: 0 6px 22px rgba(0, 5, 70, .07); max-width: 820px; }
.tc-finder label { display: block; font-weight: 700; color: var(--tc-navy); margin-bottom: 8px; }
.tc-finder input { width: 100%; font: 300 17px/1.4 var(--tc-font); color: var(--tc-ink); border: 1px solid var(--tc-line); border-radius: var(--tc-radius); padding: 12px 18px 12px 46px; background: var(--tc-bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%23000546' stroke-width='2'/%3E%3Cpath d='M15.5 15.5 21 21' stroke='%23000546' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 16px center; }
.tc-finder input:focus { outline: 2px solid var(--tc-orange); outline-offset: 1px; background-color: #fff; border-color: var(--tc-navy); }
.tc-finder__examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 14px; color: var(--tc-muted); }
.tc-finder__examples button { font: 600 13px/1 var(--tc-font); color: var(--tc-navy); background: var(--tc-blue-soft); border: 1px solid transparent; border-radius: 2px; padding: 7px 10px; cursor: pointer; }
.tc-finder__examples button:hover { border-color: var(--tc-navy); }
.tc-finder__status { margin: 10px 0 0; font-size: 14.5px; color: var(--tc-muted); min-height: 1.4em; }
.tc-finder__status strong { color: var(--tc-ink); }
[data-find].is-filtered-out, [data-find-group].is-filtered-out { display: none !important; }

/* Cartes (marques, modèles, symptômes, services) : filet orange au survol */
.tc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin: 14px 0 0; padding: 0; list-style: none; }
.tc-cards--brands { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tc-cards--symptoms { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.tc-card { position: relative; display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--tc-line); border-radius: var(--tc-radius); padding: 16px 18px; transition: border-color .2s, box-shadow .2s; }
.tc-card:hover, .tc-card:focus-within { border-color: var(--tc-navy); box-shadow: inset 0 3px 0 var(--tc-orange), 0 8px 24px rgba(0, 5, 70, .09); }
.tc-guide .tc-card h3 { font-size: 19px; line-height: 1.3; margin: 0; }
.tc-guide .tc-card h3 a { color: var(--tc-navy); text-decoration: none; }
.tc-guide .tc-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--tc-radius); }
.tc-guide .tc-card h3 a:focus-visible { outline: none; }
.tc-card:has(h3 a:focus-visible) { outline: 2px solid var(--tc-orange); outline-offset: 2px; }
.tc-card p { margin: 0; font-size: 15.5px; line-height: 1.55; }
.tc-card__meta { font-size: 14px; color: var(--tc-muted); }
.tc-card__more { margin-top: auto; padding-top: 8px; font-size: 14.5px; font-weight: 600; color: var(--tc-navy); }
.tc-card__more::after { content: " →"; color: var(--tc-orange); }
.tc-card:hover .tc-card__more { color: var(--tc-orange-dark); }
.tc-card.is-soon .tc-card__more { color: var(--tc-muted); }
.tc-card.is-soon .tc-card__more::after { content: " · guide en préparation"; font-weight: 300; color: var(--tc-muted); }
.tc-card__links { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.tc-model-groups > div { margin: 0 0 8px; }
.tc-model-groups > div:last-child { margin-bottom: 0; }
.tc-model-groups b { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tc-muted); margin: 0 0 2px; }
.tc-guide .tc-card__links a { display: inline-block; font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--tc-navy); background: var(--tc-blue-soft); border: 1px solid transparent; border-radius: 2px; padding: 3px 9px; }
.tc-guide .tc-card__links a:hover { border-color: var(--tc-navy); color: var(--tc-navy); }
.tc-badge { display: inline-block; align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 2px 9px; border-radius: 2px; background: var(--tc-blue-soft); color: var(--tc-navy); }
.tc-badge--bureau { background: var(--tc-orange-soft); color: var(--tc-orange-dark); }
.tc-badge--mobile { background: var(--tc-services-soft); color: var(--tc-services); }
.tc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 0; padding: 0; list-style: none; }
.tc-chips li { font-family: var(--tc-mono); font-size: 12px; line-height: 1.3; background: var(--tc-bg-soft); border: 1px solid var(--tc-line); border-radius: 2px; padding: 2px 7px; color: var(--tc-ink); }

/* Tableau des messages (variante à colonnes libres) */
.tc-table--msg th:nth-child(n) { width: auto; }
.tc-table--msg th:nth-child(1) { width: 22%; } .tc-table--msg th:nth-child(2) { width: 30%; } .tc-table--msg th:nth-child(4) { width: 22%; }
.tc-table--msg td ul { margin: 0; padding: 0; list-style: none; }
.tc-table--msg td li { margin: 0 0 4px; }
.tc-table--msg td .tc-card__links li { margin: 0; }
.tc-table--msg td li b { font-weight: 600; color: var(--tc-navy); }
.tc-table--msg .tc-card__links a { font-size: 12.5px; padding: 2px 8px; }
.tc-table--msg td > strong { color: var(--tc-navy); font-weight: 700; }

/* Diagnostic en étapes */
.tc-steps { counter-reset: tc-step; list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; max-width: 860px; }
.tc-steps li { counter-increment: tc-step; position: relative; padding: 14px 16px 14px 64px; background: #fff; border: 1px solid var(--tc-line); border-radius: var(--tc-radius); }
.tc-steps li::before { content: counter(tc-step); position: absolute; left: 16px; top: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--tc-navy); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--tc-orange-soft); }
.tc-steps li strong { display: block; color: var(--tc-navy); font-weight: 700; margin-bottom: 2px; }

/* Répartition (barres) */
.tc-bars { list-style: none; margin: 16px 0 0; padding: 0; max-width: 860px; display: grid; gap: 8px; }
.tc-bars li { display: grid; grid-template-columns: minmax(150px, 230px) 1fr 48px; align-items: center; gap: 12px; font-size: 15px; }
.tc-bars__track { height: 12px; border-radius: 2px; background: var(--tc-bg-soft); border: 1px solid var(--tc-line); overflow: hidden; }
.tc-bars__fill { display: block; height: 100%; width: var(--v); background: var(--tc-navy); }
.tc-bars li:first-child .tc-bars__fill { background: var(--tc-orange); }
.tc-bars li > b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--tc-navy); }
@media (max-width: 640px) { .tc-bars li { grid-template-columns: 1fr 44px; } .tc-bars__track { grid-column: 1 / -1; grid-row: 2; } }

/* Comparatif deux colonnes (thermique direct / transfert) */
.tc-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 16px 0 0; max-width: 980px; }
.tc-compare > div { background: var(--tc-bg-soft); border-top: 3px solid var(--tc-navy); border-radius: 0 0 var(--tc-radius) var(--tc-radius); padding: 16px 18px; }
.tc-guide .tc-compare h3 { font-size: 18px; margin: 0 0 6px; }
.tc-compare p { margin: 0 0 8px; font-size: 15.5px; }
.tc-compare ul { margin: 0; padding-left: 20px; font-size: 15.5px; }

/* Tableau « par modèle » des articles symptômes */
.tc-table--3 th:nth-child(n) { width: auto; }
.tc-table--3 th:nth-child(1) { width: 19%; } .tc-table--3 th:nth-child(2) { width: 27%; } .tc-table--3 th:nth-child(4) { width: 12%; }
.tc-table--3 td:nth-child(4) a { white-space: nowrap; }
.tc-guide .tc-links h3 { font-size: 18px; margin: 18px 0 6px; }
