/* ==========================================================================
   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-roi: #001eff;           /* bleu roi de la charte (RVB 0/30/255) : plus utilisé (boutons des cartes en bleu Timcod depuis le 21 octobre 2026) */
  --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 72px; 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; }
/* Lien vers la même page dans l'autre langue (fonction lien_langue() de _init.php), en haut à droite du bandeau */
.tc-guide .tc-hero .tc-langue { position: absolute; top: 20px; right: 0; z-index: 1; display: inline-block; font-size: 13.5px; font-weight: 600; line-height: 1.2; color: #fff; text-decoration: none; padding: 5px 11px; border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--tc-radius); transition: border-color .2s; }
.tc-guide .tc-hero .tc-langue:hover, .tc-guide .tc-hero .tc-langue:focus-visible { border-color: var(--tc-orange); outline: none; }
.tc-hero:has(.tc-langue) .tc-breadcrumb { padding-right: 96px; }

/* ---- Photo du modèle dans l'en-tête du guide ----
   Encart blanc à droite du titre : photo de la fiche produit timcod.fr, toujours sur fond blanc et dans le même cadre
   pour tous les modèles, puis lien texte vers la fiche. Filet orange en haut de l'encart (accent de la charte).
   Sur téléphone, l'encart passe sous la signature : photo à gauche, lien à droite. */
.tc-hero--produit { display: grid; grid-template-columns: minmax(0, 1fr) 232px; grid-template-rows: auto auto auto auto 1fr; column-gap: 40px; align-items: start; }
.tc-hero--produit > * { grid-column: 1; }
.tc-hero--produit > .tc-breadcrumb { grid-column: 1 / -1; }
.tc-hero--produit > .tc-produit { grid-column: 2; grid-row: 2 / -1; }
.tc-produit { display: flex; flex-direction: column; margin: 0; padding: 18px 16px 16px; background: #fff; border-radius: var(--tc-radius); box-shadow: inset 0 4px 0 var(--tc-orange); color: var(--tc-ink); }
.tc-guide .tc-hero .tc-produit__photo { display: flex; align-items: center; justify-content: center; height: 168px; padding: 2px 6px 14px; background: #fff; }
.tc-produit__photo img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .3s; }
.tc-produit__photo:hover img { transform: scale(1.04); }
.tc-guide .tc-produit__texte { margin: 0; padding-top: 12px; border-top: 1px solid var(--tc-line); font-size: 15px; line-height: 1.35; }
.tc-produit__label { display: block; margin: 0 0 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tc-muted); }
.tc-guide .tc-hero .tc-produit__lien, .tc-produit__nom { display: inline; font-weight: 600; color: var(--tc-navy); text-decoration: none; }
.tc-guide .tc-hero .tc-produit__lien::after { content: "\00a0→"; color: var(--tc-orange); }
.tc-guide .tc-hero .tc-produit__lien:hover, .tc-guide .tc-hero .tc-produit__lien:focus-visible { color: var(--tc-orange-dark); text-decoration: underline; }
@media (max-width: 760px) {
  .tc-hero--produit { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .tc-hero--produit > .tc-produit { grid-column: 1; grid-row: auto; flex-direction: row; align-items: center; gap: 14px; margin-top: 20px; padding: 10px 14px 10px 14px; box-shadow: inset 4px 0 0 var(--tc-orange); }
  .tc-guide .tc-hero .tc-produit__photo { flex: 0 0 96px; height: 72px; padding: 0; }
  .tc-guide .tc-produit__texte { padding-top: 0; border-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .tc-produit__photo img { transition: none; } .tc-produit__photo:hover img { transform: none; } }


/* ---- Bouton d'action en haut de page, dans le bandeau de titre ----
   Guides : « Demander une réparation » (composant cta-haut-reparation) ; accueils : « Découvrir la maintenance
   préventive » (composant cta-haut-preventive). Bouton orange sur bleu Timcod, comme le bandeau final. */
.tc-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 22px 0 0; }
.tc-guide .tc-hero__actions .tc-btn { flex: 0 0 auto; }
.tc-guide .tc-hero__note { flex: 1 1 220px; max-width: 420px; margin: 0; font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, .78); }
@media (max-width: 640px) { .tc-guide .tc-hero__actions .tc-btn { flex: 1 1 100%; } }
/* Lien « Version imprimable (PDF) » des guides : icône d'imprimante, à côté du bouton « Demander une réparation » */
.tc-guide .tc-hero .tc-pdf-lien { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 9px; min-height: 46px; padding: 0 16px 0 13px; border: 1px solid rgba(255, 255, 255, .5); border-radius: var(--tc-radius); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; transition: border-color .2s, background-color .2s; }
.tc-guide .tc-hero .tc-pdf-lien:hover, .tc-guide .tc-hero .tc-pdf-lien:focus-visible { border-color: var(--tc-orange); background: rgba(255, 255, 255, .06); color: #fff; outline: none; }
.tc-pdf-lien__ico { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--tc-orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tc-pdf-lien__info { font-size: 12.5px; font-weight: 400; color: rgba(255, 255, 255, .72); white-space: nowrap; }
@media (max-width: 640px) { .tc-guide .tc-hero .tc-pdf-lien { flex: 1 1 100%; justify-content: center; } }

/* ---- 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; display: flex; align-items: center; background: #fff; border-bottom: 1px solid var(--tc-line); }
.tc-subnav-zone { position: relative; flex: 1 1 auto; min-width: 0; align-self: stretch; }
.tc-guide .tc-subnav-cadre .tc-subnav { position: relative; top: auto; z-index: auto; margin: 0; border-bottom: 0; background: transparent; height: 100%; }
/* Bouton d'action collant (ajouté par timcod-guide.js) : copie du bouton du bandeau de titre, à gauche de la barre de
   sections, visible dès que celui-ci est sorti de l'écran ; la barre de sections reste en haut de page avec lui. */
.tc-guide .tc-subnav-cadre .tc-subnav__cta { display: none; flex: 0 0 auto; margin: 0 4px 0 16px; padding: 8px 16px; font-size: 14.5px; line-height: 1.2; }
.tc-guide .tc-subnav-cadre.is-cta .tc-subnav__cta { display: inline-block; animation: tc-cta-apparition .25s ease-out; }
.tc-subnav__cta-court { display: none; }
@keyframes tc-cta-apparition { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .tc-guide .tc-subnav-cadre .tc-subnav__cta { margin-left: 10px; margin-right: 2px; padding: 7px 12px; font-size: 14px; }
  .tc-subnav__cta-long { display: none; }
  .tc-subnav__cta-court { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .tc-guide .tc-subnav-cadre.is-cta .tc-subnav__cta { animation: none; } }
.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-guide { padding-bottom: 48px; } /* espace avant le pied de page du site */
  .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, .tc-langue { 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); }
  /* Version imprimable et PDF : ni logo de la marque, ni photo du produit ; l'encadré « fiche produit » garde son lien */
  .tc-hero--produit { display: block; }
  .tc-guide .tc-hero .tc-logo-marque--hero, .tc-guide .tc-hero .tc-produit__photo { display: none !important; }
  .tc-produit { flex-direction: row; align-items: center; gap: 14px; max-width: 420px; margin-top: 14px; box-shadow: none; border: 1px solid var(--tc-line); padding: 8px 12px; }
  .tc-guide .tc-produit__texte { padding-top: 0; border-top: 0; }
  .tc-guide .tc-hero h1 { font-size: 24pt; line-height: 1.12; }
  .tc-hero__actions, .tc-card__img img { display: none; }
  .tc-card__img { height: auto; margin: 0 0 6px; padding: 0; border: 0; background: none; box-shadow: none; }
  .tc-card__img .tc-badge { position: static; }
  .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: auto; box-shadow: none !important; }
  .tc-guide details summary, .tc-issue-body h4, .tc-guide h2, .tc-guide h3 { break-inside: avoid; break-after: avoid; }
  .tc-guide p, .tc-guide li { orphans: 3; widows: 3; }
  .tc-guide tr, .tc-guide figure, .tc-guide .tc-produit { break-inside: avoid; }
  .tc-chevron { display: none; }
  /* contenu des fiches : sans l'animation d'ouverture (sinon il s'imprime transparent) ; pas de champ de recherche */
  .tc-issue-body { animation: none !important; }
  [data-finder], .tc-finder, .tc-rm { display: none !important; }
  .tc-guide a[href^="http"] { overflow-wrap: anywhere; }
}

/* ==========================================================================
   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; }
/* Pages symptômes : « Trouvez le guide de votre modèle » (composant recherche-modeles) */
.tc-rm { max-width: 820px; margin: 24px 0 0; }
.tc-rm .tc-finder { margin: 0; }
.tc-guide details.tc-rm__tous { margin: 0; border: 1px solid var(--tc-line); border-top: 0; border-radius: 0 0 var(--tc-radius) var(--tc-radius); background: #fff; }
.tc-guide details.tc-rm__tous > summary { display: flex; align-items: center; gap: 8px; padding: 11px 18px; font-size: 15px; font-weight: 600; color: var(--tc-navy); border-bottom: 0; }
.tc-guide details.tc-rm__tous > summary::after { content: ""; width: 8px; height: 8px; margin-left: 4px; border-right: 2px solid var(--tc-orange); border-bottom: 2px solid var(--tc-orange); transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.tc-guide details.tc-rm__tous[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.tc-guide details.tc-rm__tous[open] > summary { border-bottom: 1px solid var(--tc-line); border-radius: 0; }
.tc-rm.is-recherche details.tc-rm__tous > summary { display: none; }
.tc-rm__marques { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 22px; padding: 14px 18px 16px; }
.tc-guide .tc-rm__nom-marque { margin: 0 0 4px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tc-muted); }
.tc-guide .tc-rm__marque ul { margin: 0; padding: 0; list-style: none; }
.tc-guide .tc-rm__marque li { margin: 0; padding: 0; }
.tc-guide .tc-rm__marque li::before { content: none; }
.tc-guide .tc-rm__marque a { display: block; padding: 4px 0; font-size: 15.5px; font-weight: 600; color: var(--tc-navy); text-decoration: none; }
.tc-guide .tc-rm__marque a::after { content: "\00a0→"; color: var(--tc-orange); }
.tc-guide .tc-rm__marque a:hover, .tc-guide .tc-rm__marque a:focus-visible { color: var(--tc-orange-dark); text-decoration: underline; }
@media (pointer: coarse) { .tc-guide .tc-rm__marque a { padding: 10px 0; } }

/* 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); }

/* ---- Boutons bleus vers les deux sites de dépannage (cartes de la page Réparation, 21 octobre 2026) ----
   Bleu roi de la charte TIMCOD ; survol : bleu des services. */
.tc-cards--sites { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.tc-cards--sites .tc-card { padding: 22px 24px; }
/* Boutons des cartes de la page Réparation : bleu Timcod, filet orange (couleurs du logo) ; au survol, orange plein */
.tc-card__btn { align-self: flex-start; margin-top: auto; padding: 11px 22px; background: var(--tc-navy); color: #fff; font-size: 16px; font-weight: 600; line-height: 1.2; border: 2px solid var(--tc-orange); border-radius: var(--tc-radius); transition: background-color .2s, color .2s; }
.tc-card__btn::after { content: "\00a0→"; display: inline-block; color: var(--tc-orange); transition: transform .2s, color .2s; }
.tc-card:hover .tc-card__btn, .tc-card:focus-within .tc-card__btn { background: var(--tc-orange); color: var(--tc-navy); }
.tc-card:hover .tc-card__btn::after, .tc-card:focus-within .tc-card__btn::after { color: var(--tc-navy); transform: translateX(4px); }
@media (max-width: 640px) { .tc-card__btn { align-self: stretch; text-align: center; } }

/* ---- Logos des marques (21 octobre 2026) ----
   Logo tel que timcod.fr l'affiche (fonction logo_marque() de _init.php), toujours dans un cadre blanc ; si le fichier
   manque, le nom de la marque s'affiche à la place, dans le même cadre (classe is-texte). */
.tc-logo-marque { display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: var(--tc-radius); }
.tc-logo-marque img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.tc-logo-marque__nom { display: none; font-weight: 700; letter-spacing: .02em; color: var(--tc-navy); }
.tc-logo-marque.is-texte .tc-logo-marque__nom { display: inline; }
/* En-tête des pages marque et des guides, sous le fil d'Ariane (lien vers la page marque sur les guides) */
.tc-logo-marque--hero { display: flex; justify-self: start; width: max-content; max-width: 190px; min-width: 104px; height: 64px; padding: 7px 14px 9px; margin: 0 0 18px; box-shadow: inset 0 -3px 0 var(--tc-orange); }
.tc-logo-marque--hero .tc-logo-marque__nom { font-size: 19px; }
.tc-guide .tc-hero a.tc-logo-marque--hero { text-decoration: none; transition: box-shadow .2s; }
.tc-guide .tc-hero a.tc-logo-marque--hero:hover, .tc-guide .tc-hero a.tc-logo-marque--hero:focus-visible { outline: none; box-shadow: inset 0 -3px 0 var(--tc-orange), 0 0 0 3px var(--tc-orange); }
/* Cartes de marque des accueils */
.tc-logo-marque--carte { align-self: flex-start; width: 168px; height: 64px; padding: 6px 12px; margin: 0 0 4px; border: 1px solid var(--tc-line); }
.tc-logo-marque--carte .tc-logo-marque__nom { font-size: 18px; }
@media (max-width: 640px) { .tc-logo-marque--hero { height: 54px; margin-bottom: 14px; } }
/* ---- Vignette du modèle en tête de carte (accueils et pages marque) ----
   Même cadre pour toutes les photos : fond blanc, hauteur fixe, photo entière et centrée ; badge du type dans l'angle.
   Modèle sans fiche produit sur timcod.fr : pictogramme neutre dans le même cadre. */
.tc-card__img { position: relative; display: flex; align-items: center; justify-content: center; height: 196px; margin: -16px -18px 10px; padding: 42px 24px 18px; background: #fff; border-bottom: 1px solid var(--tc-line); border-radius: var(--tc-radius) var(--tc-radius) 0 0; transition: box-shadow .2s; }
.tc-card__img img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .3s; }
.tc-card__img .tc-badge { position: absolute; top: 12px; left: 12px; }
.tc-card:hover .tc-card__img, .tc-card:focus-within .tc-card__img { box-shadow: inset 0 3px 0 var(--tc-orange); }
.tc-card:hover .tc-card__img img { transform: scale(1.04); }
.tc-card__img--vide { background: #fff center calc(50% + 12px) / 64px no-repeat; }
.tc-card__img--imprimantes { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23c3c5d2' stroke-width='2.5' stroke-linejoin='round'%3E%3Crect x='9' y='16' width='46' height='30' rx='4'/%3E%3Cpath d='M9 27h46M21 46v9h22v-9'/%3E%3Ccircle cx='47' cy='21.5' r='1.6' fill='%23c3c5d2'/%3E%3C/svg%3E"); }
.tc-card__img--lecteurs { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23c3c5d2' stroke-width='2.5' stroke-linejoin='round'%3E%3Cpath d='M13 13h31a7 7 0 0 1 7 7v4a7 7 0 0 1-7 7H33l-5 21H17l5-21h-9a4 4 0 0 1-4-4v-10a4 4 0 0 1 4-4z'/%3E%3C/svg%3E"); }
@media (max-width: 640px) { .tc-card__img { height: 176px; padding-top: 40px; } }
@media (prefers-reduced-motion: reduce) { .tc-card__img img { transition: none; } .tc-card:hover .tc-card__img img { transform: none; } }
.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; }