/* Triclic — feuille du site. Se charge après Bootstrap, tokens.css et bundle.css. */

/* ───────── 1. Variables ajustables : bordures, rayons, anneau de focus ─────────
   Modifier ici pour changer l'apparence sur tout le site. */
:root {
  /* Épaisseurs de bordure (--border-1 et --border-3 viennent de tokens.css) */
  --border-2: 2px;

  /* Rayons : définis dans tokens.css (--radius-card 12 px, --radius-btn 8 px, --radius-input 8 px, --radius-pill 999 px) */

  /* Anneau de focus (affiché uniquement au clavier, via :focus-visible).
     La couleur suit le fond (--tc-focus : blanc sur sombre, noir sur clair et sur orange) ; pour la forcer, définir --focus-ring-color.
     Épaisseur et décalage : valeurs d'origine de 3 px, REMPLACÉES par 2 px / 2 px depuis le 18/10/2026 (section 25, « Focus global »).
     bundle.css a des règles à 3 px en dur : leurs exceptions sont corrigées en section 30. Les champs de formulaire ont un style propre (section 25). */
  --focus-ring-width: var(--border-3);
  --focus-ring-style: solid;
  --focus-ring-offset: 3px;
}

/* ───────── 2. Application des variables ───────── */
:root :focus-visible {
  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color, var(--tc-focus));
  outline-offset: var(--focus-ring-offset);
}
:root :focus:not(:focus-visible) { outline: none; }

.tc-btn, .btn, .tc-skip { border-radius: var(--radius-btn); }
.tc-card, .tc-alert { border-radius: var(--radius-card); }
.tc-input { border-radius: var(--radius-input); }
.tc-nav__menu { border-radius: var(--radius-menu); }
.tc-hero__desktop, .tc-hero__mobile, .tc-card-project__visual { border-radius: var(--radius-card); }

/* Valeurs de 2 px du design system reliées à la variable dédiée */
.tc-alert { border-width: var(--border-2); }
.tc-nav__caret::before { border-right-width: var(--border-2); border-bottom-width: var(--border-2); }
.tc-breadcrumb a:hover, .tc-breadcrumb a.is-hover,
.tc-footer a:hover, .tc-footer a.is-hover { text-decoration-thickness: var(--border-1); }

/* ───────── 3. Base du site ───────── */
body { margin: 0; }
main:focus { outline: none; }  /* cible du skip link : pas d'anneau sur le conteneur */
.tc-page-intro { margin-top: var(--space-4); }

.tc-skip {
  position: fixed; z-index: 2000; left: var(--space-3); top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--white); color: var(--black);
  font: 600 18px/1.25 var(--font-sans); text-decoration: none;
  transform: translateY(-300%);
}
.tc-skip:focus, .tc-skip:focus-visible { transform: none; }


/* ───────── 4. Accueil ───────── */
.tc-hero { padding-block: var(--space-6); }
@media (min-width: 992px) { .tc-hero { padding-block: var(--space-7); } }
.tc-hero__grid { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 992px) { .tc-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-7); } }
.tc-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.tc-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-2); }

.tc-hero__visual { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.tc-hero__devices { position: relative; padding-bottom: var(--space-5); padding-right: var(--space-5); }
.tc-hero__desktop { display: block; width: 100%; height: auto; border: var(--border-1) solid var(--line-dark-strong); }
.tc-hero__mobile {
  position: absolute; right: 0; bottom: 0; width: 24%; height: auto;
  border: var(--border-3) solid var(--black); outline: var(--border-1) solid var(--line-dark-strong);
}

.tc-strip { background: var(--black); border-block: var(--border-1) solid var(--line-dark); color: var(--muted-on-dark); }
.tc-strip__list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: var(--space-4) 0; list-style: none; }

.tc-offers { display: grid; gap: var(--space-4); }
@media (min-width: 992px) { .tc-offers { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.tc-offers > .tc-grid { align-content: stretch; grid-auto-rows: 1fr; }

.tc-card-project__visual--img { padding: 0; }
.tc-card-project__visual--img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tc-card-project { border-radius: var(--radius-card); }
.tc-card-project__visual--img { overflow: hidden; }

.tc-faq-layout { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 992px) { .tc-faq-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-7); } }
.tc-faq-layout .tc-section-head { margin-bottom: 0; }

/* Grilles à une colonne : jamais plus larges que l'écran (texte long, légendes mono) */
.tc-hero__grid, .tc-offers, .tc-faq-layout, .tc-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .tc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) {
  .tc-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .tc-offers { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .tc-faq-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
}
@media (max-width: 575.98px) { .tc-section-head .tc-label { white-space: normal; } }

/* ───────── 5. Réalisations (liste, rubriques, fiche) ───────── */
.tc-section-head--spaced { margin-top: var(--space-7); }
.tc-home-more { margin: var(--space-5) 0 0; }

.tc-rubriques ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; }
.tc-rubriques a[aria-current="page"] { color: var(--tc-accent); text-decoration-thickness: var(--border-3); }

.tc-prose { display: flex; flex-direction: column; gap: var(--space-3); max-width: 34em; }
.tc-prose p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--bs-body-color); }

@media (min-width: 768px) {
  .tc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) { .tc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Réalisation sans image : emplacement sobre sur fond sombre, avec le nom */
.tc-card-project__visual--empty { align-items: center; justify-content: center; padding: var(--space-4); background: var(--ink); text-align: center; }
.tc-card-project__visual--empty p { margin: 0; font: 700 clamp(18px, 1.7vw, 24px)/1.25 var(--font-display); text-transform: uppercase; color: var(--white); }

/* ───────── 6. Typographie : Montserrat (titres et libellés), Lato (texte) ─────────
   Tailles de base dans tokens.css ; ici, boutons et réductions par largeur d'écran (remplacent celles de bundle.css). */
.tc-btn, .btn { font-family: var(--font-display); letter-spacing: 0; }
.btn { --bs-btn-font-family: var(--font-display); }
.tc-steps--rows .tc-numeral { font-size: 48px; }
@media (max-width: 1199.98px) {
  .tc-display { font-size: clamp(34px, 7vw, 80px); }
  .tc-h1      { font-size: clamp(32px, 5.2vw, 56px); }
  .tc-h1-sub  { font-size: clamp(22px, 2.7vw, 30px); }
  .tc-h2-xl   { font-size: clamp(34px, 5.2vw, 60px); }
  .tc-h2      { font-size: clamp(26px, 3.6vw, 40px); }
  .tc-h2-sm   { font-size: clamp(24px, 3.2vw, 34px); }
  .tc-h3-xl   { font-size: clamp(28px, 3.4vw, 40px); }
}
@media (max-width: 575.98px) {
  .tc-h3 { font-size: 22px; }
  .tc-h4 { font-size: 19px; }
  .tc-numeral { font-size: 44px; }
}

/* ───────── 7. Header : menu fixe, liens à gabarit unique ─────────
   Hauteur du header : variable --header-h, identique sur toutes les pages et dans tous les états (aucun rétrécissement au défilement).
   Les états (repos, survol, actif, focus) ne changent que la couleur et le soulignement : jamais la taille, la graisse ni le rembourrage. */
:root {
  --header-h: 80px;                            /* hauteur du header (ordinateur) */
  --nav-link-h: 48px;                          /* hauteur de tous les liens et boutons du menu */
  --nav-btn-border: rgba(255, 255, 255, 0.6);  /* bordure du bouton Contact au repos */
}
@media (max-width: 991.98px) { :root { --header-h: 68px; } }   /* hauteur du header (tablette et mobile) */
html { scroll-padding-top: var(--header-h); scrollbar-gutter: stable; }

.tc-header { position: sticky; top: 0; z-index: 1000; height: var(--header-h); background: var(--black); }
.tc-header .tc-header__inner { height: var(--header-h); min-height: 0; flex-wrap: nowrap; gap: var(--space-4); align-items: center; justify-content: space-between; }
.tc-header .tc-header__logo { padding-block: 0; }

/* Liens du menu : un seul gabarit */
.tc-header .tc-nav__list { display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; }
.tc-header .tc-nav__item { display: flex; align-items: center; height: var(--header-h); }
.tc-header .tc-nav__link, .tc-header .tc-nav__sublink {
  box-sizing: border-box; display: flex; align-items: center; margin: 0; border: 0; background: none;
  font: 400 18px/1.25 var(--font-sans); letter-spacing: 0; white-space: nowrap;
  color: var(--white);
  text-decoration-line: underline; text-decoration-thickness: var(--border-1); text-underline-offset: 6px; text-decoration-color: transparent;
  transition: color .12s, text-decoration-color .15s;
}
.tc-header .tc-nav__link { height: var(--nav-link-h); padding: 0; }
.tc-header .tc-nav__sublink { height: auto; padding: 12px var(--space-3); }
.tc-header .tc-nav__link[aria-current], .tc-header .tc-nav__sublink[aria-current] { background: none; color: var(--orange); }
.tc-header .tc-nav__caret { color: var(--white); }

/* Bouton Contact : contour léger, fond noir dans tous les états, même hauteur que les liens */
.tc-header .tc-nav-btn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: var(--nav-link-h); margin: 0; padding: 0 var(--space-3);
  border: var(--border-1) solid var(--nav-btn-border); border-radius: var(--radius-nav-btn); background: var(--black); color: var(--white);
  font: 400 18px/1.25 var(--font-sans); letter-spacing: 0; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: border-color .12s, color .12s;
}
.tc-header .tc-nav-btn[aria-current] { border-color: var(--orange); color: var(--orange); }

/* Bouton burger (menu mobile) : trois traits de 24 x 2 px, sans cadre ni fond ; zone cliquable de 48 x 48 px.
   Il dépasse de 12 px dans la gouttière pour que les traits s'alignent sur la marge du contenu. */
.tc-header .tc-burger { display: none; position: relative; box-sizing: border-box; flex: none; width: 48px; height: 48px; margin: 0 -12px 0 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--white); cursor: pointer; transition: color .12s; }
.tc-header .tc-burger__bars, .tc-header .tc-burger__bars::before, .tc-header .tc-burger__bars::after { position: absolute; left: 12px; width: 24px; height: 2px; background: currentColor; }
.tc-header .tc-burger__bars { top: 23px; transition: background-color 180ms; }
.tc-header .tc-burger__bars::before, .tc-header .tc-burger__bars::after { content: ""; left: 0; transition: transform 180ms ease; }
.tc-header .tc-burger__bars::before { top: -8px; }
.tc-header .tc-burger__bars::after { top: 8px; }
.tc-header .tc-burger[aria-expanded="true"] .tc-burger__bars { background-color: transparent; }
.tc-header .tc-burger[aria-expanded="true"] .tc-burger__bars::before { transform: translateY(8px) rotate(45deg); }
.tc-header .tc-burger[aria-expanded="true"] .tc-burger__bars::after { transform: translateY(-8px) rotate(-45deg); }
.tc-header .tc-burger:focus-visible { color: var(--orange); }
@media (prefers-reduced-motion: reduce) {
  .tc-header .tc-burger, .tc-header .tc-burger__bars, .tc-header .tc-burger__bars::before, .tc-header .tc-burger__bars::after { transition: none; }
}

/* Survols : uniquement sur appareil à pointeur précis (souris) ; aucun état collé après un appui tactile. Actif et focus-visible ne changent pas. */
@media (hover: hover) and (pointer: fine) {
  .tc-header .tc-nav__link:hover, .tc-header .tc-nav__sublink:hover { text-decoration-color: var(--trait-lien); }
  .tc-header .tc-nav__caret:hover { color: var(--orange); }
  .tc-header .tc-nav-btn:hover { border-color: var(--orange); color: var(--orange); }
  .tc-header .tc-burger:hover { color: var(--orange); }
}
/* Tactile : le sous-menu ne s'ouvre pas au « survol » (il s'ouvre avec la flèche) */
@media (hover: none), (pointer: coarse) {
  .tc-header:not(.is-mobile) .tc-nav__item--menu:hover > .tc-nav__menu:not(.show) { display: none; }
}

/* Tablette et mobile : menu en panneau sous le header (le header reste fixe) */
@media (max-width: 991.98px) {
  .tc-header .tc-burger { display: block; }
  .tc-header .tc-header__logo img { height: 44px; }
  .tc-header .tc-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-basis: auto; padding: 0 var(--tc-gutter) var(--space-3);
    background: var(--black); border-bottom: var(--border-1) solid var(--line-dark);
    max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
  }
  .tc-header .tc-nav.show { display: block; }
  .tc-header .tc-nav__list { display: block; }
  .tc-header .tc-nav__item { height: auto; flex-wrap: wrap; border-top: var(--border-1) solid var(--line-dark); }
  .tc-header .tc-nav__item:first-child { border-top: 0; }
  .tc-header .tc-nav__link { flex: 1; height: 56px; }
  .tc-header .tc-nav__caret { width: 56px; height: 56px; margin-right: 0; border-left: var(--border-1) solid var(--line-dark); }
  .tc-header .tc-nav__menu { position: static; flex-basis: 100%; min-width: 0; padding: 0 0 var(--space-2); border: 0; }
  .tc-header .tc-nav__sublink { padding: 14px var(--space-4); }
  .tc-header .tc-nav__item--cta { padding-block: var(--space-3); }
  .tc-header .tc-nav__item--cta .tc-nav-btn { display: flex; width: 100%; height: 56px; }
}

/* ───────── 8. Direction visuelle « test v1 » ─────────
   Réversible : les fichiers d'avant sont dans « 000 Attente/test-design-v1/ ».
   Fonds dérivés des teintes du design system ; plus de filets entre sections ; cartes arrondies avec ombre ; fiche en trois temps. */
:root {
  --fond-noir: var(--black);                    /* pied de page */
  --fond-sombre: var(--ink);                    /* sections sombres, bandeau d'appel */
  --fond-gris: #1E1A16;                         /* gris foncé chaud, valeur fixe */
  --fond-clair: var(--paper);                   /* #F4F2EE */
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-card-hover: 0 14px 32px rgba(0, 0, 0, 0.22);
  --shadow-media: 0 24px 56px rgba(0, 0, 0, 0.45);
  --transition-card: 200ms;
  --fiche-overlap: 80px;                        /* débord de l'image de la fiche sur la section claire */
}
.tc-section.tc-fond-noir, .tc-fond-noir { background: var(--fond-noir); }
.tc-section.tc-fond-sombre, .tc-fond-sombre { background: var(--fond-sombre); }
.tc-section.tc-fond-gris, .tc-fond-gris { background: var(--fond-gris); }
.tc-section.tc-fond-clair, .tc-fond-clair { background: var(--fond-clair); }

/* Cartes réalisation : arrondies, ombre légère, sans bordure */
.tc-card.tc-card-project { border: 0; border-radius: var(--radius-card); background: var(--white); color: var(--text-on-light); box-shadow: var(--shadow-card); overflow: hidden;
  transition: transform var(--transition-card) ease, box-shadow var(--transition-card) ease; }
.tc-card-project .tc-h4 { color: var(--ink-on-light); }
.tc-card-project__visual { border-radius: var(--radius-card) var(--radius-card) 0 0; overflow: hidden; }
.tc-card-project__visual--img img { transition: transform var(--transition-card) ease; }
.tc-card-project__body .tc-label { margin: 0; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--paper); color: var(--muted-on-light); }
a.tc-card-project:hover .tc-h4 { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  a.tc-card-project:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
  a.tc-card-project:hover .tc-card-project__visual--img img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .tc-card.tc-card-project, .tc-card-project__visual--img img { transition: none; }
}

/* Fiche : en-tête sombre */
.tc-fiche-hero { position: relative; z-index: 2; padding-block: var(--space-6); }
.tc-fiche-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); grid-template-areas: "head" "visual"; }
.tc-fiche-hero__head { grid-area: head; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.tc-fiche-hero__visual { grid-area: visual; margin: 0; overflow: hidden; border-radius: var(--radius-card); box-shadow: var(--shadow-media); }
.tc-fiche-hero__visual img { display: block; width: 100%; height: auto; }
@media (min-width: 992px) {
  .tc-fiche-hero { padding-top: var(--space-5); padding-bottom: 0; }
  .tc-fiche-hero__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: var(--space-7); row-gap: 0; align-items: center;   /* texte centré verticalement par rapport à l'image */
    grid-template-areas: "head visual"; }
  .tc-fiche-hero__head { padding-block: var(--space-3); }
  .tc-fiche-hero__visual { align-self: end; margin-bottom: calc(-1 * var(--fiche-overlap)); }   /* le bas de l'image déborde de 80 px sur la section claire */
  .tc-fiche-hero--sans-visuel .tc-fiche-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head"; }
}

/* Ligne titre : logo client (vignette blanche 72 x 72 px, coins arrondis) à gauche du H1 */
.tc-fiche__titlerow { display: flex; align-items: center; gap: var(--space-3); }
.tc-fiche__titlerow h1 { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tc-fiche__logo { order: -1; flex: none; box-sizing: border-box; width: 72px; height: 72px; padding: 8px; object-fit: contain; border-radius: var(--radius-card); background: var(--white); }

/* Fiche : section claire (le projet + carte fiche technique) */
.tc-fiche-body__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; grid-template-areas: "text" "card" "actions"; }
.tc-fiche-body__text { grid-area: text; display: flex; flex-direction: column; gap: var(--space-4); }
.tc-fiche-body__actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: calc(-1 * var(--space-3)); }   /* mobile : 32 px sous la fiche technique */
@media (max-width: 575.98px) { .tc-fiche-body__actions { flex-direction: column; } }
@media (min-width: 992px) {
  .tc-fiche-body__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: var(--space-7); row-gap: 0; grid-template-rows: auto 1fr;
    grid-template-areas: "text card" "actions card"; }
  .tc-fiche-body__actions { margin-top: var(--space-5); }   /* 32 px sous « Le projet » */
}
/* Bouton de contour sur fond clair : bordure et texte noirs, fond transparent ; survol (souris uniquement) : fond noir, texte blanc */
.tc-fiche-body .tc-btn--outline, .tc-fiche-body .tc-btn--outline:hover { background: transparent; border-color: var(--black); color: var(--black); }
@media (hover: hover) and (pointer: fine) { .tc-fiche-body .tc-btn--outline:hover { background: var(--black); border-color: var(--black); color: var(--white); } }
.tc-fiche-card { grid-area: card; padding: var(--space-5); border-radius: var(--radius-card); background: var(--white); box-shadow: var(--shadow-card); }
.tc-fiche-card h2 { margin-bottom: var(--space-4); }
.tc-dl { display: grid; gap: var(--space-4); margin: 0; }
.tc-dl > div { display: grid; gap: var(--space-1); }
.tc-dl dt, .tc-dl dd { margin: 0; }
.tc-dl dd { color: var(--bs-emphasis-color); }

/* Bandeau d'appel à l'action : fin, sur fond sombre, bouton orange en accent */
.tc-cta { padding-block: var(--space-6); }
.tc-cta .tc-band { align-items: center; gap: var(--space-5); }
@media (min-width: 992px) { .tc-cta .tc-band { gap: var(--space-6); } }

/* Pied de page : fond le plus sombre, colonnes */
.tc-footer.tc-site-footer { padding-block: var(--space-7) var(--space-5); background: var(--fond-noir); color: var(--muted-on-dark); }
.tc-site-footer__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 768px) { .tc-site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .tc-site-footer__cols { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); } }
.tc-site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.tc-site-footer__logo img { display: block; height: 56px; width: auto; }
.tc-site-footer__title { margin: 0 0 var(--space-3); font: 600 13px/1.4 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tc-accent); }
.tc-site-footer ul { display: block; margin: 0; padding: 0; list-style: none; }
.tc-site-footer li + li::before { content: none; margin: 0; }
.tc-site-footer__col li { margin-bottom: var(--space-2); }
.tc-site-footer address { margin: 0; font-style: normal; }
.tc-site-footer address p { margin: 0 0 var(--space-2); }
.tc-site-footer a { color: var(--text-on-dark); }
.tc-site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5); margin-top: var(--space-7); }
.tc-site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }

/* ───────── 9. Retouche libellés ─────────
   Libellés techniques (fil d'Ariane, étiquettes, numéros de section, légendes) : Montserrat 600, majuscules, 13 px, interlettrage 0,08 em (voir tokens.css). */
.tc-breadcrumb li { font: 600 13px/1.4 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }

/* Fil d'Ariane.
   Ordinateur (≥ 768 px) : une seule ligne, en pleine largeur du conteneur ; la page courante n'est tronquée (« … », texte complet dans title) que si la ligne dépasse vraiment.
   Les séparateurs « / » sont des pseudo-éléments de l'élément suivant : aucun séparateur orphelin. */
.tc-fiche-hero__crumb { margin-bottom: var(--space-4); }
.tc-breadcrumb ol { flex-wrap: nowrap; min-width: 0; }
.tc-breadcrumb li { flex: 0 0 auto; white-space: nowrap; font: 600 13px/1.4 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.tc-breadcrumb li + li::before { margin-inline: 10px; }
.tc-breadcrumb li:last-child { flex: 1 1 0; min-width: 7em; overflow: hidden; text-overflow: ellipsis; }

/* Liens du fil d'Ariane : aucun soulignement au repos ; soulignement de 2 px (léger décalage) au survol à la souris et au focus clavier.
   La page courante (sans lien) n'est jamais soulignée. */
.tc-breadcrumb a, .tc-breadcrumb a:hover { color: var(--bs-secondary-color); text-decoration-line: underline; text-decoration-thickness: var(--border-1); text-underline-offset: 4px; text-decoration-color: transparent; transition: text-decoration-color .15s; }   /* trait transparent au repos : aucun décalage, aucun survol collant sur écran tactile */
.tc-breadcrumb a:focus-visible { text-decoration-color: var(--trait-lien); }
@media (hover: hover) and (pointer: fine) {
  .tc-breadcrumb a:hover { text-decoration-color: var(--trait-lien); }
}

/* Mobile (< 768 px) : un seul lien de retour vers le niveau parent « ‹ Nom ». La liste complète reste dans le DOM ; les autres niveaux et les « / » sont masqués. */
@media (max-width: 767.98px) {
  .tc-fiche-hero__crumb { margin-bottom: var(--space-3); }
  .tc-breadcrumb li { display: none; }
  .tc-breadcrumb li:nth-last-child(2) { display: block; flex: 0 1 auto; min-width: 0; }
  .tc-breadcrumb li + li::before { content: none; }
  .tc-breadcrumb li:nth-last-child(2) a { display: inline-flex; align-items: center; min-height: 44px; }
  .tc-breadcrumb li:nth-last-child(2) a::before { content: ""; flex: none; width: 7px; height: 7px; margin-right: 10px; border-left: var(--border-2) solid currentColor; border-bottom: var(--border-2) solid currentColor; transform: rotate(45deg); }   /* chevron « ‹ » en CSS */
}

/* Titre de la fiche : lignes équilibrées ; un mot composé ne se coupe pas au tiret tant qu'il tient dans la largeur de la ligne titre
   (seuils en largeur de la ligne titre, logo compris : mot court ≤ 14 caractères dès 410 px, mot long dès 500 px). Sinon il se coupe au tiret plutôt que de déborder. */
.tc-fiche__titlerow h1 { text-wrap: balance; }
.tc-fiche__titlerow { container-type: inline-size; align-self: stretch; }
@container (min-width: 410px) { .tc-nobreak-s { white-space: nowrap; } }
@container (min-width: 500px) { .tc-nobreak-l { white-space: nowrap; } }
@media (min-width: 992px) { .tc-fiche__titlerow h1 { font-size: 34px; } }   /* colonne de texte plus étroite : « médico-chirurgical » tient sur une ligne à 1440 px */

/* Téléphone et adresse du bandeau d'appel : police du texte courant, sans majuscules */
.tc-cta .tc-caption { font: 400 18px/1.6 var(--font-sans); letter-spacing: 0; text-transform: none; }

/* Cartes réalisation : étiquette de catégorie toujours sous le nom, alignée à gauche ; hauteurs égales par rangée */
.tc-card-project { height: 100%; }
.tc-card-project__body { flex: 1 1 auto; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: var(--space-2); }

/* ───────── 10. Rayons : angles arrondis partout (sauf sections pleine largeur et header) ─────────
   Valeurs dans tokens.css. Les anneaux de focus suivent l'arrondi de l'élément (outline + border-radius). */
:root {
  --bs-border-radius: var(--radius-btn); --bs-border-radius-sm: var(--radius-btn);
  --bs-border-radius-lg: var(--radius-card); --bs-border-radius-xl: var(--radius-card); --bs-border-radius-xxl: var(--radius-card);
  --bs-border-radius-pill: var(--radius-pill);
}
.tc-card-offer, .tc-card-type, .tc-card-tech { border-radius: var(--radius-card); }          /* cartes d'offres (dont la grande carte orange), « Agents IA », types de site, technologies */
.tc-hero__desktop, .tc-hero__mobile { border-radius: var(--radius-card); }                    /* composition d'images du hero (écran et mobile) */
.tc-steps__item { border-radius: var(--radius-card); }                                        /* blocs d'étapes de la méthode */
.tc-faq, .tc-faq__item, .tc-faq__q { border-radius: var(--radius-card); }                     /* éléments de FAQ (le résumé arrondi garde un anneau de focus arrondi) */
.tc-header .tc-burger { border-radius: var(--radius-btn); }                                   /* anneau de focus arrondi du burger */
.tc-field__label + .tc-input, .tc-input, select.tc-input, textarea.tc-input { border-radius: var(--radius-input); }   /* formulaire de contact à venir */

/* ───────── 11. Finitions : en-tête de la fiche, liens du bandeau d'appel, survol des boutons orange ───────── */
:root {
  /* En-tête de la fiche — ordinateur (≥ 992 px) */
  --fiche-hero-top: 48px;       /* header -> fil d'Ariane */
  --fiche-crumb-gap: 32px;      /* fil d'Ariane -> rangée du texte et de l'image (l'image est toujours à 32 px au moins sous le fil) */
  --fiche-gap-label: 32px;      /* libellé orange -> ligne logo + H1 */
  --fiche-gap-lead: 32px;       /* ligne logo + H1 -> description */
  --fiche-hero-bottom: 32px;    /* air sous le texte, dans le bandeau */
  /* En-tête de la fiche — mobile (< 992 px) */
  --fiche-m-crumb: 12px;        /* lien de retour -> libellé orange */
  --fiche-m-label: 24px;        /* libellé orange -> ligne logo + H1 */
  --fiche-m-lead: 20px;         /* ligne logo + H1 -> description */
  --fiche-m-image: 24px;        /* description -> image */
}
/* Grille de l'en-tête : le fil d'Ariane est sa propre rangée, au-dessus des colonnes ; le texte et l'image sont dans la rangée suivante (aucune position absolue). */
.tc-fiche-hero__grid { grid-template-areas: "crumb" "head" "visual"; gap: 0; }
.tc-fiche-hero__crumb { grid-area: crumb; margin: 0 0 var(--fiche-m-crumb); }
.tc-fiche-hero__head { gap: 0; padding: 0; margin-bottom: var(--fiche-m-image); }
.tc-fiche-hero__head .tc-fiche__titlerow { margin-top: var(--fiche-m-label); }
.tc-fiche-hero__head .tc-lead { margin-top: var(--fiche-m-lead); }
.tc-fiche-hero--sans-visuel .tc-fiche-hero__head { margin-bottom: 0; }
@media (min-width: 992px) {
  .tc-fiche-hero { padding-top: var(--fiche-hero-top); padding-bottom: var(--fiche-hero-bottom); }
  .tc-fiche-hero__grid { grid-template-areas: "crumb crumb" "head visual"; column-gap: var(--space-7); row-gap: 0; }
  .tc-fiche-hero--sans-visuel .tc-fiche-hero__grid { grid-template-areas: "crumb" "head"; }
  .tc-fiche-hero__crumb { margin-bottom: var(--fiche-crumb-gap); }
  .tc-fiche-hero__head { margin-bottom: 0; }                                              /* texte centré verticalement face à l'image (align-items: center de la grille) */
  .tc-fiche-hero__head .tc-fiche__titlerow { margin-top: var(--fiche-gap-label); }
  .tc-fiche-hero__head .tc-lead { margin-top: var(--fiche-gap-lead); }
  .tc-fiche-hero__visual { align-self: end; margin-bottom: calc(-1 * (var(--fiche-overlap) + var(--fiche-hero-bottom))); }   /* le bas de l'image déborde de 80 px sur la section claire */
}

/* Bandeau d'appel : téléphone et « Écrivez-moi » en blanc gras, sans soulignement au repos ; orange souligné (2 px) au survol à la souris et au focus clavier */
.tc-cta .tc-caption a, .tc-cta .tc-caption a:hover { color: var(--white); font-weight: 700; text-decoration-line: underline; text-decoration-thickness: var(--border-1); text-underline-offset: 4px; text-decoration-color: transparent; transition: color .12s, text-decoration-color .15s; }
.tc-cta .tc-caption a:focus-visible { color: var(--orange); text-decoration-color: var(--trait-lien); }
@media (hover: hover) and (pointer: fine) {
  .tc-cta .tc-caption a:hover { color: var(--orange); text-decoration-color: var(--trait-lien); }
}

/* Boutons orange : l'inversion noir/blanc ne s'applique qu'à la souris ; l'appui (:active) donne le même retour sur écran tactile ; le focus clavier reste visible */
.tc-btn--orange:hover { background: var(--orange); border-color: var(--orange); color: var(--black); }
.tc-btn--orange:active { background: var(--tc-invert-bg); border-color: var(--tc-invert-bg); color: var(--tc-invert-color); }
@media (hover: hover) and (pointer: fine) {
  .tc-btn--orange:hover { background: var(--tc-invert-bg); border-color: var(--tc-invert-bg); color: var(--tc-invert-color); }
}

/* ───────── 12. Liste des réalisations et rubriques : bandeau sombre, pastilles, grille compacte, « voir plus » ───────── */
/* Bandeau sombre commun (liste, rubriques, fiche — et toute future page à bandeau sombre : Agents IA, Solutions, Prestations, hub, formations, contact).
   Classe .tc-hero-band : fond sombre, 48 px sous le header, fil d'Ariane en haut ; hauteur minimale --hero-min-h sur ordinateur (mesurée du bas du header au bas du bandeau),
   aucune hauteur forcée sur mobile. (.tc-hero est déjà la classe du hero de l'accueil.) */
:root { --hero-min-h: 441px; }   /* hauteur du bandeau des fiches à 1440 px (440,3 / 440,6 / 440,3 -> 441) */
.tc-hero-band { background: var(--fond-sombre); padding-top: var(--fiche-hero-top); display: flex; flex-direction: column; }
.tc-hero-band > .tc-container { flex: 1 1 auto; display: flex; flex-direction: column; }
@media (min-width: 992px) { .tc-hero-band { min-height: var(--hero-min-h); } }
@media (max-width: 991.98px) { .tc-hero-band { min-height: 0; } }

/* Fiche : le bandeau s'étire jusqu'à la hauteur minimale sans changer sa disposition (l'image reste calée sur le bas : débord de 80 px) */
@media (min-width: 992px) {
  .tc-fiche-hero__grid { flex: 1 1 auto; grid-template-rows: auto 1fr; }
}

/* Liste et rubriques : bandeau en colonne (>= 992 px : au moins --hero-min-h) — fil d'Ariane, H1 et intro en haut (positions identiques sur toutes les pages),
   onglets ancrés au bas (40 px sous eux). Si le contenu dépasse, le bandeau grandit (min-height, jamais height). */
.tc-listing-hero { padding-bottom: 40px; }
.tc-listing-hero__crumb { margin-bottom: 12px; }
.tc-listing-hero__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; }
.tc-listing-hero__text { display: flex; flex-direction: column; gap: 20px; min-width: 0; margin-bottom: 40px; }
.tc-listing-hero__text .tc-lead { max-width: 62ch; }
@media (min-width: 992px) { .tc-listing-hero__crumb { margin-bottom: 32px; } }

/* Rubriques de réalisations (liste et rubriques) : une rangée de boutons à contour orange (1 px, rayon des boutons du site), texte blanc, nombre en plus discret ;
   rubrique active = fond orange plein, texte et nombre en #0E0E0E ; survol (souris seulement) = orange à 15 %.
   Ordinateur (>= 992 px) : rangée centrée, qui passe à la ligne (la seconde ligne est centrée aussi), ancrée au bas du bandeau (margin-top: auto).
   Moins de 992 px : avec JavaScript, un seul bouton pleine largeur « Rubrique : … · N » déplie la liste (une rubrique par ligne, 48 px au moins) ; sans JavaScript la liste est affichée en entier. */
.tc-tabs { position: relative; }
.tc-tabs ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tc-tab { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--orange); border-radius: var(--radius-btn); background: transparent; color: var(--white);
  font: 400 18px/1.25 var(--font-sans); text-decoration: none; white-space: nowrap; transition: background-color 150ms; }
.tc-tab__count { font-size: 14px; color: rgba(255, 255, 255, 0.65); }
.tc-tab[aria-current], .tc-tab[aria-current]:hover { background: var(--orange); color: var(--fond-sombre); font-weight: 700; }
.tc-tab[aria-current] .tc-tab__count { color: var(--fond-sombre); font-weight: 400; }
.tc-tab:focus-visible, .tc-tabs__toggle:focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color, var(--tc-focus)); outline-offset: var(--focus-ring-offset); }
@media (hover: hover) and (pointer: fine) {
  .tc-tab:hover { background: rgba(247, 142, 30, 0.15); }
}
.tc-tabs__toggle { display: none; }
.tc-tabs__chevron { flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform 180ms; }
.tc-tabs__toggle[aria-expanded="true"] .tc-tabs__chevron { transform: translateY(3px) rotate(225deg); }
@media (prefers-reduced-motion: reduce) { .tc-tab, .tc-tabs__chevron { transition: none; } }
@media (min-width: 992px) {
  .tc-tabs { margin-top: auto; }
}
@media (max-width: 991.98px) {
  .tc-tabs ul { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 8px; }
  .tc-tab { min-height: 48px; white-space: normal; }
  .js .tc-tabs__toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid var(--orange); border-radius: var(--radius-btn);
    background: transparent; color: var(--white); font: 400 18px/1.25 var(--font-sans); text-align: left; cursor: pointer; }
  .js .tc-tabs ul { display: none; margin-top: 8px; }
  .js .tc-tabs ul.show { display: flex; }
}

/* Mobile et tablette (< 992 px) : ordre VISUEL du bandeau sans toucher au DOM — lien de retour, onglets, H1, introduction.
   (.tc-listing-hero__body disparaît de la mise en page : le fil d'Ariane, le bloc de texte et les onglets deviennent des éléments de la colonne flex du conteneur.)
   Écarts : retour -> onglets 16 px, onglets -> H1 28 px, H1 -> intro 20 px (gap du bloc de texte), 40 px sous l'intro (rembourrage du bandeau). */
@media (max-width: 991.98px) {
  .tc-listing-hero__body { display: contents; }
  .tc-listing-hero__crumb { order: 1; margin-bottom: 16px; }
  .tc-tabs { order: 2; margin-bottom: 28px; }
  .tc-listing-hero__text { order: 3; margin-bottom: 0; }
}

/* Grille : 4 colonnes dès 1200 px, 3 dès 992 px, 2 dès 576 px, 1 en dessous ; 24 px d'écart */
.tc-section.tc-listing { padding-block: var(--space-7); }
.tc-listing-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 576px) { .tc-listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .tc-listing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .tc-listing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Carte compacte : titre sur 2 lignes au plus, padding réduit */
.tc-card-project--compact .tc-card-project__body { padding: 16px 18px; gap: 6px; }
.tc-card-project--compact .tc-h4 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* « Voir plus de réalisations » (créé par JavaScript) */
.tc-listing-grid > [hidden] { display: none !important; }
.js .tc-listing-grid[data-tc-more]:not(.is-ready) > :nth-child(n+13) { display: none; }   /* évite tout clignotement avant l'initialisation du script */
.tc-listing-more { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-top: var(--space-6); }
.tc-listing-more__count { margin: 0; font: 400 18px/1.6 var(--font-sans); color: var(--bs-secondary-color); }
.tc-listing-more .tc-btn--outline, .tc-listing-more .tc-btn--outline:hover { background: transparent; border-color: var(--black); color: var(--black); }
@media (hover: hover) and (pointer: fine) { .tc-listing-more .tc-btn--outline:hover { background: var(--black); border-color: var(--black); color: var(--white); } }
@keyframes tc-apparition { from { opacity: 0; } to { opacity: 1; } }
.tc-listing-grid > .is-revealed { animation: tc-apparition 200ms ease both; }
@media (prefers-reduced-motion: reduce) { .tc-listing-grid > .is-revealed { animation: none; } }

/* ───────── 13. Page « Formations seniors » ─────────
   Bandeau avec image (variante .tc-hero-band--image), sections claires / grises / sombres en alternance, cartes, tableaux de tarifs, communes.
   Les images sont générées par IA : aucune légende ne les présente comme de vrais participants. */
:root {
  --cadrage-bandeau: right center;        /* image du bandeau : le couple reste à droite */
  --cadrage-domicile: 60% 40%;            /* recadrage 3:2 : visages des deux personnes au centre */
  --cadrage-atelier: 30% 50%;             /* recadrage 3:2 de la phrase de conclusion : centré sur le groupe */
  --section-py: 48px;                     /* espace vertical des sections de la page : 48 px mobile, 72 px dès 768 px */
  --appli-largeur: 340px;                 /* largeur maximale de la capture de l'application */
  --cadrage-structures: 100% 50%;         /* le formateur est à droite de la photo (x 81 à 95 %) : cadrage calé à droite, il reste entier à toutes les largeurs */
  --bandeau-voile-plein: 0.94;            /* opacité du voile sombre à gauche du bandeau */
  --bandeau-voile-arret: 42%;             /* le voile reste dense jusqu'ici ... */
  --bandeau-voile-fin: 78%;               /* ... puis disparaît (transparent) à cette largeur */
}

/* Bandeau */
.tc-formations-hero { position: relative; padding-bottom: 0; }
.tc-formations-hero > .tc-container { order: 1; padding-bottom: 40px; }
.tc-formations-hero__img { display: block; order: 2; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: var(--cadrage-bandeau); }
.tc-formations-hero__crumb { margin-bottom: 12px; }
.tc-formations-hero__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; max-width: 36rem; }
.tc-formations-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 4px; }
/* Image sous le texte en dessous de 992 px : sur tablette, le texte recouvrirait le couple et le contraste AA ne serait plus garanti (mesuré à 768 px : titre 3,5:1). */
@media (min-width: 992px) {
  .tc-formations-hero__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; aspect-ratio: auto; order: 0; }
  .tc-formations-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to right, rgba(14, 14, 14, var(--bandeau-voile-plein)) 0%, rgba(14, 14, 14, var(--bandeau-voile-plein)) var(--bandeau-voile-arret), rgba(14, 14, 14, 0) var(--bandeau-voile-fin)); }
  .tc-formations-hero > .tc-container { position: relative; z-index: 2; }
  .tc-formations-hero__body { max-width: 34rem; }
}
@media (min-width: 992px) { .tc-formations-hero__crumb { margin-bottom: 32px; } }

/* Sections */
@media (min-width: 768px) { :root { --section-py: 72px; } }
.tc-section.tc-fs-section { padding-block: var(--section-py); }
.tc-section.tc-fs-section--compact { padding-block: calc(var(--section-py) * 0.75); }
.tc-fs-intro { margin-top: var(--space-3); max-width: 62ch; }
.tc-fs-phrase { margin-top: var(--space-5); max-width: 62ch; }
.tc-fs-h3 { margin-top: var(--space-6); }
.tc-fs-note { margin-top: var(--space-5); max-width: 62ch; }
.tc-fs-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.tc-fs-split--top { align-items: start; }
@media (min-width: 992px) { .tc-fs-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); } }
.tc-fs-text { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.tc-fs-text .tc-lead { max-width: 62ch; }
.tc-fs-figure { margin: 0; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.tc-fs-figure img { display: block; width: 100%; height: auto; object-fit: cover; }
.tc-fs-figure--domicile img { aspect-ratio: 3 / 2; object-position: var(--cadrage-domicile); }
.tc-fs-figure--atelier img { aspect-ratio: 1200 / 670; object-position: var(--cadrage-atelier); }
.tc-fs-figure--structures img { aspect-ratio: 1200 / 670; object-position: var(--cadrage-structures); }

/* Cartes (fond blanc, rayons et ombres existants) */
.tc-fs-cards { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
@media (min-width: 576px) { .tc-fs-cards--4, .tc-fs-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 576px) and (max-width: 991.98px) { .tc-fs-cards--3 > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }   /* tablette : la 7e carte occupe la largeur, aucune carte seule */
@media (min-width: 992px) {
  .tc-fs-cards--3 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tc-fs-cards--3 > li:nth-child(-n+3) { grid-column: span 4; }   /* rangée 1 : 3 cartes */
  .tc-fs-cards--3 > li:nth-child(n+4) { grid-column: span 3; }    /* rangée 2 : 4 cartes */
}
@media (min-width: 1200px) { .tc-fs-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tc-fs-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-card); background: var(--white); color: var(--text-on-light); box-shadow: var(--shadow-card); }
.tc-fs-card .tc-h4 { margin: 0; color: var(--ink-on-light); }
.tc-fs-card .tc-body { margin: 0; color: var(--text-on-light); }
.tc-fs-num { display: block; font: 800 40px/1 var(--font-display); color: var(--ink-on-light); margin-bottom: var(--space-2); }
.tc-fs-num::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: var(--space-2); background: var(--orange); }   /* l'orange vif reste décoratif, sans texte */
.tc-fs-split--conclusion { margin-top: var(--space-6); }
.tc-fs-split--conclusion .tc-fs-phrase { margin-top: 0; }
.tc-fs-split--conclusion .tc-fs-figure img { aspect-ratio: 3 / 2; object-position: var(--cadrage-atelier); }
@media (min-width: 768px) {   /* phrase à gauche (centrée verticalement), image 3:2 à droite, sur une ligne */
  .tc-fs-split--conclusion { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--space-6); align-items: center; justify-content: space-between; }
}

/* Encadré « Android et Windows uniquement » */
.tc-fs-callout { margin-top: var(--space-6); padding: var(--space-5); border: var(--border-3) solid var(--orange); border-radius: var(--radius-card); background: var(--fond-sombre); }
.tc-fs-callout .tc-h3 { margin: 0 0 var(--space-2); color: var(--orange); }
.tc-fs-callout .tc-body { margin: 0; max-width: 62ch; color: var(--white); }

/* Application gratuite */
.tc-fs-app { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.tc-fs-app .tc-lead { max-width: 62ch; }
.tc-fs-app .tc-lead a { color: var(--orange); text-decoration: underline; text-decoration-thickness: var(--border-1); text-underline-offset: 4px; }
.tc-fs-app p { margin: 0; }
.tc-fs-app__texte { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-width: 0; }
.tc-fs-figure--appli img { aspect-ratio: auto; max-width: var(--appli-largeur); margin-inline: auto; }
@media (min-width: 768px) {   /* texte et bouton à gauche, capture à droite */
  .tc-fs-app--image { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--appli-largeur)); align-items: center; gap: var(--space-7); }
}

/* Tarifs */
.tc-fs-tables { display: grid; align-items: start; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .tc-fs-tables--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tc-table-card { padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); background: var(--white); box-shadow: var(--shadow-card); }
.tc-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; }
.tc-table caption { caption-side: top; padding-bottom: var(--space-2); text-align: left; font: 600 20px/1.35 var(--font-display); color: var(--ink-on-light); }
.tc-table th, .tc-table td { padding: 10px 14px; text-align: left; font: 400 18px/1.4 var(--font-sans); color: var(--text-on-light); }
.tc-table thead th { padding-block: 4px; font: 600 13px/1.4 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-on-light); }
.tc-table tbody tr { background: var(--paper); }
.tc-table tbody th { border-radius: var(--radius-btn) 0 0 var(--radius-btn); font-weight: 400; }
.tc-table tbody td { border-radius: 0 var(--radius-btn) var(--radius-btn) 0; text-align: right; font-weight: 700; color: var(--ink-on-light); white-space: nowrap; }
.tc-table thead th:last-child { text-align: right; }
.tc-fs-structures { margin-top: var(--space-6); }
.tc-fs-structures .tc-fs-h3 { margin-top: 0; }
.tc-fs-structures .tc-table-card { margin-top: var(--space-4); }
@media (min-width: 992px) {   /* image à droite, alignée en haut du bloc, même hauteur que la colonne de gauche */
  .tc-fs-structures .tc-fs-figure { align-self: stretch; }
  .tc-fs-structures .tc-fs-figure img { height: 100%; aspect-ratio: auto; min-height: 100%; }
}
.tc-fs-points { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
@media (min-width: 992px) { .tc-fs-points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tc-fs-point { padding: var(--space-5); border-radius: var(--radius-card); background: var(--white); color: var(--text-on-light); box-shadow: var(--shadow-card); font: 400 18px/1.6 var(--font-sans); }

/* Communes : textes séparés par des points médians */
.tc-communes { display: flex; flex-wrap: wrap; margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.tc-communes li { font: 400 18px/1.8 var(--font-sans); color: var(--text-on-dark); }
.tc-communes li + li::before { content: "·"; margin-inline: 10px; color: var(--muted-on-dark); }
.tc-communes a { position: relative; color: var(--white); text-decoration: underline; text-decoration-thickness: var(--border-1); text-underline-offset: 4px; transition: text-decoration-color .15s; }   /* lien visible au repos ; focus : anneau du site (3 px) */
@media (max-width: 575.98px) { .tc-communes a::after { content: ""; position: absolute; inset: -11px -4px; } }   /* zone de toucher de 44 px (lien de 22 px de haut), sans changer la mise en page */
.tc-communes a:focus-visible { text-decoration-color: var(--trait-lien); }
@media (hover: hover) and (pointer: fine) { .tc-communes a:hover { text-decoration-color: var(--trait-lien); } }

/* FAQ : question et signe + / − restent en encre dans tous les états ; l'item ouvert est repéré par un filet orange de 3 px à gauche (sans décalage du texte) */
.tc-faq__item { border-left: 3px solid transparent; padding-left: 16px; border-radius: 0; }
.tc-faq__item[open] { border-left-color: var(--orange); }
[data-bs-theme="light"] .tc-faq__q, [data-bs-theme="light"] .tc-faq__q:hover, [data-bs-theme="light"] .tc-faq__q.is-hover { color: var(--ink-on-light); }

/* ───────── 14. Accueil : trois cartes d'offres (même poids) ─────────
   Titre = lien dont la zone cliquable couvre toute la carte ; le bouton est un simple élément visuel (span, aria-hidden). */
:root {
  --cadrage-offre-creation: 88% 50%;      /* recadrage 3:2 des bandeaux : réglable par image */
  --cadrage-offre-agents: 50% 50%;
  --cadrage-offre-formations: 80% 50%;
}
.tc-offres { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 992px) { .tc-offres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }
.tc-offre { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-card); background: var(--white); color: var(--text-on-light); box-shadow: var(--shadow-card); }
.tc-offre__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.tc-offre__corps { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); }
.tc-offre__titre { margin: 0; color: var(--ink-on-light); }
.tc-offre__lien { color: inherit; text-decoration: none; }
.tc-offre__lien::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-card); }
.tc-offre__texte { margin: 0; color: var(--text-on-light); }
.tc-offre__btn { margin-top: auto; pointer-events: none; }                  /* poussé en bas : boutons alignés d'une carte à l'autre */
.tc-offre:has(.tc-offre__lien:focus-visible) { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color, var(--tc-focus)); outline-offset: var(--focus-ring-offset); }
.tc-offre__lien:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) {
  .tc-offre { transition: transform 200ms ease, box-shadow 200ms ease; }
  .tc-offre:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
  .tc-offre:hover .tc-offre__lien { text-decoration: underline; text-decoration-thickness: var(--border-2); text-underline-offset: 4px; }
  .tc-offre:hover .tc-offre__btn { background: var(--tc-invert-bg); border-color: var(--tc-invert-bg); color: var(--tc-invert-color); }
}
@media (prefers-reduced-motion: reduce) { .tc-offre { transition: none; } .tc-offre:hover { transform: none; } }

/* ───────── 15. Accueil : trois sections détaillées (une par offre, même poids) ─────────
   Texte d'un côté, image 3:2 de l'autre (alternance) ; sur mobile l'image passe au-dessus du texte. */
.tc-offre-detail--blanc { background: var(--white); color: var(--text-on-light); }
.tc-offre-detail__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.tc-offre-detail__figure { grid-row: 1; margin: 0; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.tc-offre-detail__figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.tc-offre-detail__texte { grid-row: 2; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-width: 0; }
@media (min-width: 992px) {
  .tc-offre-detail__grille { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-7); }
  .tc-offre-detail__grille--inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .tc-offre-detail__texte { grid-row: 1; }
  .tc-offre-detail__figure { grid-row: 1; }
  .tc-offre-detail__grille--inverse .tc-offre-detail__figure { grid-column: 1; }
  .tc-offre-detail__grille--inverse .tc-offre-detail__texte { grid-column: 2; }
}
.tc-offre-detail__titre { margin: 0; font: 700 28px/1.2 var(--font-display); letter-spacing: -0.005em; }
.tc-offre-detail--blanc .tc-offre-detail__titre { color: var(--ink-on-light); }
.tc-offre-detail .tc-body { margin: 0; max-width: 62ch; }
.tc-offre-detail--blanc .tc-body { color: var(--text-on-light); }
.tc-fond-gris.tc-offre-detail .tc-body, .tc-fond-gris.tc-offre-detail .tc-offre-detail__titre { color: var(--white); }
.tc-offre-detail__points { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; max-width: 62ch; }
.tc-offre-detail__points li { position: relative; padding-left: 24px; font: 400 18px/1.6 var(--font-sans); }
.tc-offre-detail__points li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 9px; height: 9px; background: var(--orange); }   /* puce carrée : décor */
.tc-offre-detail--blanc .tc-offre-detail__points li { color: var(--text-on-light); }
.tc-offre-detail--blanc .tc-offre-detail__points strong { color: var(--ink-on-light); }
.tc-fond-gris .tc-offre-detail__points li, .tc-fond-gris .tc-offre-detail__points strong { color: var(--white); }
.tc-offre-detail__points strong { font-weight: 700; }
.tc-offre-detail__lien { display: inline-block; padding-bottom: 8px; font: 600 18px/1.4 var(--font-sans); text-decoration: none;
  background: linear-gradient(var(--orange), var(--orange)) 0 100% / 100% var(--border-3) no-repeat; transition: background-size 150ms ease; }   /* un seul trait orange (décor) sous le texte, sans soulignement */
.tc-offre-detail--blanc .tc-offre-detail__lien { color: var(--ink-on-light); }
.tc-fond-gris .tc-offre-detail__lien { color: var(--white); }
.tc-offre-detail__lien:focus-visible { background-size: 100% 5px; }
@media (hover: hover) and (pointer: fine) { .tc-offre-detail__lien:hover { background-size: 100% 5px; } }
@media (prefers-reduced-motion: reduce) { .tc-offre-detail__lien { transition: none; } }
.tc-nobreak { white-space: nowrap; }

/* ───────── 16. Accueil : réalisations en vignettes allégées (3 dernières) ─────────
   Variante légère : la carte de la liste (.tc-card-project) n'est pas modifiée. */
.tc-vignettes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); max-width: 440px; margin-inline: auto; }
@media (min-width: 992px) { .tc-vignettes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); max-width: none; } }
.tc-vignette { display: flex; flex-direction: column; gap: var(--space-3); color: var(--ink-on-light); text-decoration: none; }
.tc-vignette__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border: var(--border-1) solid var(--line-light-strong); border-radius: var(--radius-card); background: var(--white); }
.tc-vignette__img--vide { display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--fond-sombre); color: var(--white); font: 600 18px/1.3 var(--font-display); text-align: center; }
.tc-vignette__legende { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.tc-vignette__nom { margin: 0; font: 600 18px/1.35 var(--font-display); color: var(--ink-on-light); }
.tc-vignette__rubrique { margin: 0; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--white); color: var(--muted-on-light); }
.tc-vignette:focus-visible { border-radius: var(--radius-card); }
@media (hover: hover) and (pointer: fine) {
  .tc-vignette { transition: transform 200ms ease; }
  .tc-vignette__img { transition: box-shadow 200ms ease; }
  .tc-vignette:hover { transform: translateY(-3px); }
  .tc-vignette:hover .tc-vignette__img { box-shadow: var(--shadow-card); }
}
@media (prefers-reduced-motion: reduce) { .tc-vignette, .tc-vignette__img { transition: none; } .tc-vignette:hover { transform: none; } }

/* ───────── 17. Accueil : méthode plus sobre (variante .tc-steps--sobre) ─────────
   Même grille et mêmes points de rupture que .tc-steps (2 colonnes dès 576 px, 4 dès 1100 px) ; seule l'échelle typographique et les traits changent. */
.tc-steps--sobre { gap: var(--space-5) var(--space-4); }
.tc-steps--sobre .tc-steps__item { gap: var(--space-2); padding-top: var(--space-3); border-top: var(--border-2) solid var(--orange); border-radius: 0; }   /* trait fin, orange, décoratif */
.tc-steps--sobre .tc-numeral { font-size: 26px; line-height: 1.2; font-weight: 700; color: var(--orange); }   /* orange sur fond noir uniquement */
.tc-steps--sobre .tc-steps__item .tc-h4 { margin: 0; font-size: 20px; font-weight: 700; color: var(--white); }

/* ───────── 18. Pages communes « Formations seniors » (gabarit pages/formations-commune.php) ─────────
   Reprend les composants de la page Formations (section 13) ; seules les listes et les colonnes de texte sont propres à ce gabarit. */
.tc-fc-colonne { display: flex; flex-direction: column; gap: var(--space-6); }
.tc-fc-colonne > .tc-fs-callout, .tc-fc-local { max-width: 760px; }
.tc-fc-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 992px) { .tc-fc-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); } }
.tc-fc-bloc { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.tc-fc-bloc .tc-h3, .tc-fc-bloc .tc-body { margin: 0; }
.tc-fc-bloc .tc-body { max-width: 62ch; }
.tc-fc-local { align-self: flex-start; width: 100%; padding: var(--space-5); border-radius: var(--radius-card); background: var(--white); box-shadow: var(--shadow-card); }   /* bloc propre à la commune */
.tc-fc-liste { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0 0; padding: 0; list-style: none; max-width: 62ch; }
.tc-fc-bloc .tc-fc-liste { margin-top: var(--space-2); }
.tc-fc-liste li { position: relative; padding-left: 24px; font: 400 18px/1.6 var(--font-sans); }
.tc-fc-liste li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 9px; height: 9px; background: var(--orange); }   /* puce carrée : décor */
.tc-fc-liste strong { font-weight: 700; }
.tc-fond-clair .tc-fc-liste li, .tc-fond-clair .tc-fc-bloc .tc-body { color: var(--text-on-light); }
.tc-fond-clair .tc-fc-liste strong, .tc-fond-clair .tc-fc-bloc .tc-h3 { color: var(--ink-on-light); }
.tc-fond-gris .tc-fc-liste li, .tc-fond-gris .tc-fc-liste strong, .tc-fond-gris .tc-fc-bloc .tc-body, .tc-fond-gris .tc-fc-bloc .tc-h3 { color: var(--white); }
.tc-fc-lien { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: var(--border-1); text-underline-offset: 4px; }   /* lien dans le texte : encre sur fond clair */
.tc-fond-clair .tc-fc-lien { color: var(--ink-on-light); }
.tc-fc-lien { transition: text-decoration-color .15s; }
.tc-fc-lien:focus-visible { text-decoration-color: var(--trait-lien); }
@media (hover: hover) and (pointer: fine) { .tc-fc-lien:hover { text-decoration-color: var(--trait-lien); } }

/* Mise en page v1 (dès 992 px) : deux ou trois colonnes qui remplissent le conteneur ; une seule colonne en dessous, dans l'ordre du HTML. */
.tc-fc-deux, .tc-fc-trois { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.tc-fc-textes { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.tc-fc-textes .tc-lead, .tc-fc-textes .tc-body { margin: 0; max-width: 65ch; }
.tc-fc-textes .tc-fc-liste { margin-top: var(--space-4); }
.tc-fc-deux > .tc-fs-callout { margin-top: 0; }
.tc-fc-photo { margin: 0; }
.tc-fc-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.tc-fc-trois .tc-fc-local { grid-column: 1 / -1; max-width: none; width: auto; align-self: stretch; }
.tc-fc-local .tc-fc-textes { gap: var(--space-3); }
@media (min-width: 992px) {
  .tc-fc-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
  .tc-fc-deux--centre { align-items: center; }
  .tc-fc-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); align-items: stretch; }
  .tc-fc-trois .tc-fc-local { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-7); align-items: start; }
}

/* Zones d'intervention des pages communes : séparateurs « · » sans point en début ni en fin de ligne.
   Technique : chaque élément porte son point dans une marge négative à gauche (point centré dans l'écart entre deux noms) ; la liste rogne son bord gauche à 7 px de la marge (clip-path : le point est à 10-14 px, l'anneau de focus du lien, 6 px, reste entier),
   donc le point du premier nom de chaque ligne est invisible, et aucun point ne suit le dernier nom d'une ligne. Les règles partagées .tc-communes (page Formations) ne sont pas modifiées. */
ul.tc-communes.tc-communes--sans-bord { column-gap: 24px; row-gap: 0; clip-path: inset(-8px -8px -8px -7px); }
ul.tc-communes.tc-communes--sans-bord li { position: relative; margin-left: -24px; padding-left: 24px; }
ul.tc-communes.tc-communes--sans-bord li::before,
ul.tc-communes.tc-communes--sans-bord li + li::before { content: "·"; position: absolute; left: 0; top: 0; width: 24px; margin: 0; text-align: center; color: var(--muted-on-dark); }
ul.tc-communes li.tc-communes__actuel { color: var(--orange); font-weight: 700; }   /* commune de la page : orange comme l'état actif du menu, sans lien (aria-current) */

/* ───────── 19. Trait fin des liens soulignés : 1 px partout, orange au survol et au focus clavier ─────────
   Le texte du lien ne change pas de couleur, seul le trait passe à l'orange : #F78E1E sur fond sombre (7,28:1 sur #1E1A16), #C67218 sur fond clair (3,23:1 sur #F4F2EE).
   Exclus : boutons, cartes cliquables, onglets de rubriques, trait du lien de fin de section (.tc-offre-detail__lien). Pour revenir en arrière : restaurer site.css depuis 000 Attente/liens-zones-v1b/. */
:root, [data-bs-theme="dark"] { --trait-lien: var(--orange); }
[data-bs-theme="light"] { --trait-lien: #C67218; }
.tc-link, .tc-link:hover, .tc-link.is-hover { color: var(--bs-link-color); text-decoration-thickness: var(--border-1); transition: text-decoration-color .15s; }   /* bundle.css : 3 px et changement de couleur au survol supprimés */
.tc-header .tc-nav__link:focus-visible, .tc-header .tc-nav__sublink:focus-visible { text-decoration-color: var(--trait-lien); }   /* menu : trait orange au focus clavier (le survol est dans le bloc @media de la section 7) */
.tc-link:focus-visible { text-decoration-color: var(--trait-lien); }
@media (hover: hover) and (pointer: fine) { .tc-link:hover { text-decoration-color: var(--trait-lien); } }
.tc-site-footer a, .tc-site-footer a:hover, .tc-site-footer a.is-hover { color: var(--text-on-dark); text-decoration-line: underline; text-decoration-thickness: var(--border-1); text-underline-offset: 5px; text-decoration-color: transparent; transition: text-decoration-color .15s; }   /* bundle.css : blanc et 2 px au survol supprimés ; aucun trait au repos */
.tc-site-footer a:focus-visible { text-decoration-color: var(--trait-lien); }
@media (hover: hover) and (pointer: fine) { .tc-site-footer a:hover { text-decoration-color: var(--trait-lien); } }

/* ───────── 20. Bandeau avec image : mécanisme générique (.tc-hero-photo), à réutiliser (création de site, agents IA, contact) ─────────
   Même rendu que le bandeau de la page Formations (.tc-formations-hero, qui garde ses règles propres) avec les mêmes variables : --cadrage-bandeau, --bandeau-voile-plein, --bandeau-voile-arret, --bandeau-voile-fin.
   Sur ordinateur (>= 992 px) l'image est posée en absolute sous un voile sombre en dégradé vers la gauche : elle n'ajoute aucune hauteur et ne déplace rien (hauteur minimale --hero-min-h, onglets ancrés en bas).
   En dessous de 992 px : pas de voile, l'image passe sous le texte en 16:9 (le contraste du texte n'est plus garanti sur l'image). Utilisation : classe tc-hero-photo sur la section .tc-hero-band + <img class="tc-hero-photo__img"> en premier enfant (voir tc_listing_hero()). */
.tc-hero-photo { position: relative; padding-bottom: 0; }
.tc-hero-photo > .tc-container { order: 1; padding-bottom: 40px; }
.tc-hero-photo.tc-listing-hero { --bandeau-voile-arret: 60%; --bandeau-voile-fin: 90%; }   /* liste et rubriques : voile dense plus loin (introduction à 992 px : 4,06:1 -> 8,57:1) ; Formations garde 42 % / 78 % */
.tc-hero-photo__img { display: block; order: 2; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: var(--cadrage-bandeau); }
@media (min-width: 992px) {
  .tc-hero-photo__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; aspect-ratio: auto; order: 0; }
  .tc-hero-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to right, rgba(14, 14, 14, var(--bandeau-voile-plein)) 0%, rgba(14, 14, 14, var(--bandeau-voile-plein)) var(--bandeau-voile-arret), rgba(14, 14, 14, 0) var(--bandeau-voile-fin)); }
  .tc-hero-photo > .tc-container { position: relative; z-index: 2; }
}

/* ───────── 21. Page « Création de site internet » (hub /creation-site-internet/, gabarit pages/creation-site.php) ─────────
   Bandeau : mécanisme générique .tc-hero-photo (section 20) ; variables PROPRES À CETTE PAGE (voile, cadrage) sur .tc-cs-hero, sans toucher à Formations ni aux Réalisations.
   Sections : composants de la page Formations (section 13), vignettes de l'accueil (section 16). Classes propres : préfixe tc-cs-.
   Pour revenir en arrière : supprimer cette section et le gabarit pages/creation-site.php. */
.tc-cs-hero { --cadrage-bandeau: right center; }
.tc-cs-hero__crumb { margin-bottom: 12px; }
.tc-cs-hero__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; max-width: 40rem; }
.tc-cs-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 4px; }
@media (max-width: 575.98px) { .tc-cs-hero__actions { flex-direction: column; align-items: stretch; width: 100%; } }
@media (min-width: 992px) { .tc-cs-hero__crumb { margin-bottom: 32px; } }
.tc-cs-liste { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.tc-cs-liste li { position: relative; padding-left: 24px; font: 400 18px/1.6 var(--font-sans); color: var(--text-on-dark); }
.tc-cs-liste li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 8px; height: 8px; background: var(--orange); }   /* puce carrée orange : décor, sans texte */
.tc-cs-suite { margin: var(--space-4) 0 0; }
.tc-fond-sombre .tc-cs-suite .tc-offre-detail__lien { color: var(--white); }
.tc-cs-vignettes { margin-top: var(--space-5); }
/* Bandeau : voile propre à cette page (variables seulement). Entre 992 et 1199 px le texte (jusqu'à 70 % de la largeur) passe sur le téléphone et l'écran de l'ordinateur : voile dense plus loin. */
@media (min-width: 992px) and (max-width: 1199.98px) { .tc-cs-hero { --bandeau-voile-arret: 70%; --bandeau-voile-fin: 96%; } }

/* Pages enfants (Solutions, Prestations) et cartes du hub : hero sombre sans photo (même structure que le bandeau du hub), carte « Ce qu'il comprend », deux cartes du hub. */
.tc-cs-hero--texte { padding-bottom: 40px; }
.tc-cs-hero--texte .tc-cs-hero__body { max-width: 48rem; }
.tc-cs-comprend { align-self: stretch; }
.tc-cs-liste-titre { margin: 0; font: 700 18px/1.4 var(--font-sans); color: var(--ink-on-light); }
/* Dans une carte .tc-fs-card (page Solutions), la règle `.tc-fs-card p` (section 13, plus spécifique) imposait au libellé la couleur et la graisse du texte courant : sélecteur renforcé, couleur et graisse seulement (taille et interligne inchangés). */
.tc-fs-card .tc-cs-liste-titre { color: var(--ink-on-light); font-weight: 700; }
.tc-cs-comprend .tc-cs-liste { margin-top: var(--space-2); }
.tc-cs-comprend .tc-cs-liste li { color: var(--text-on-light); }
@media (min-width: 768px) { .tc-cs-offres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tc-cs-offres { margin-top: var(--space-5); }
.tc-cs-lien-carte { margin-top: auto; }
.tc-offre .tc-cs-lien-carte { color: var(--ink-on-light); }   /* texte du bouton en encre sur l'orange (8,8:1) : .tc-offre__lien hérite sinon la couleur du texte de la carte */
@media (hover: hover) and (pointer: fine) {
  .tc-offre:hover .tc-cs-lien-carte { text-decoration: none; background: var(--tc-invert-bg); border-color: var(--tc-invert-bg); color: var(--tc-invert-color); }
}

/* Bandeaux photo des trois pages « création de site » (images 1920×634) : variables propres à chaque page, mécanisme .tc-hero-photo (section 20). */
.tc-cs-hero--solutions, .tc-cs-hero--prestations { --cadrage-bandeau: right center; }
/* Solutions : la tablette commence à 49 % de la largeur de l'image, le texte passe dessus entre 1200 et 1439 px : voile dense plus loin (4,6:1 et 3,2:1 mesurés sans ce réglage). */
@media (min-width: 1200px) and (max-width: 1439.98px) { .tc-cs-hero--solutions { --bandeau-voile-arret: 58%; --bandeau-voile-fin: 88%; } }
/* Icônes des cartes du hub : encre sur disque orange (décor, aucun texte orange sur le blanc de la carte). */
.tc-cs-icone { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--orange); color: var(--ink-on-light); }
.tc-cs-icone svg { display: block; }
.tc-cs-agents { margin: var(--space-5) 0 0; max-width: 62ch; }
/* Sommaire de la page Solutions (liste sur fond clair) */
.tc-cs-liste--clair li { color: var(--text-on-light); font-size: 20px; }

/* Images de la page Prestations (conception, hébergement, référencement, logo) : grille à deux colonnes de .tc-fs-split (texte à gauche, image à droite, centrée verticalement ; une colonne sous 992 px). */
.tc-cs-prestation__texte { min-width: 0; }
.tc-cs-figure img { max-width: 100%; height: auto; }   /* ratio naturel (width/height de la balise), sans recadrage ni décalage au chargement */
.tc-fond-gris .tc-cs-figure { box-shadow: var(--shadow-card), 0 0 0 1px rgba(255, 255, 255, 0.14); }   /* liseré discret sur fond sombre */

/* ───────── 22. Avis clients (composant tc_avis_section(), inc/avis.php) ─────────
   Trois cartes blanches (.tc-fs-card : même rayon et même ombre que les cartes du hub) sur fond sombre ; étoiles en encre sur la carte claire (jamais d'orange sur fond clair).
   Pour revenir en arrière : supprimer cette section et l'appel tc_avis_section() dans pages/home.php et pages/creation-site.php. */
.tc-avis__liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
@media (min-width: 992px) { .tc-avis__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }
.tc-avis__liste > li { display: flex; }
.tc-avis__carte { flex: 1 1 auto; margin: 0; gap: var(--space-3); }
/* Sélecteur renforcé (.tc-avis__carte .tc-avis__etoiles) : les étoiles sont un <p> dans une carte .tc-fs-card, dont la règle `.tc-fs-card p` (section 23, plus spécifique que `.tc-avis__etoiles` seul) leur imposait la couleur du texte des cartes. */
.tc-avis__carte .tc-avis__etoiles { display: flex; align-items: center; align-self: flex-start; gap: 2px; margin: 0; color: #C67218; }   /* étoiles orange foncé directement sur le blanc de la carte, sans pastille (3,6:1 sur blanc ; --trait-lien vaut l'orange vif dans une section sombre, d'où la valeur directe) */
.tc-avis__etoiles svg { display: block; width: 24px; height: 24px; }
.tc-avis__citation { margin: 0; padding: 0; border: 0; flex: 1 1 auto; }
.tc-avis__citation p { margin: 0; font: 400 18px/1.6 var(--font-sans); font-style: normal; color: var(--text-on-light); }
.tc-avis__auteur { display: flex; align-items: center; gap: 12px; margin: 0; font: 700 18px/1.4 var(--font-sans); color: var(--ink-on-light); }
.tc-avis__initiale { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--orange); color: var(--ink-on-light); font: 700 18px/1 var(--font-display); }   /* disque d'initiale : décor (aria-hidden), encre sur orange */
.tc-avis__synthese { display: flex; align-items: center; gap: 10px; margin: var(--space-3) 0 0; }
.tc-avis__logo { display: block; flex: 0 0 auto; height: 24px; width: auto; }   /* logo Google utilisé tel quel */
.tc-avis__suite { margin: var(--space-5) 0 0; font-size: 18px; }

/* ───────── 23. Page « Agents IA pour les professionnels » (gabarit pages/agents-ia.php, classes tc-ag-) ─────────
   Bandeau : mécanisme .tc-hero-photo (section 20) et variables de la section 21 (.tc-cs-hero). Cartes : .tc-fs-card et .tc-fs-point (section 13). Images de section : .tc-fs-split / .tc-cs-figure (section 21).
   Règle couleurs : sur fond clair, tout le texte est en encre ; l'orange ne sert qu'au décor (puces, barres). Pour revenir en arrière : supprimer cette section, pages/agents-ia.php, et remettre la route dans inc/routes.php (copie de 000 Attente/page-agents-ia/). */
.tc-ag-rassurance { margin: 0; font: 400 18px/1.5 var(--font-sans); color: var(--text-on-dark); max-width: 40rem; }
.tc-ag-sommaire { margin-bottom: var(--space-7); }
.tc-ag-sommaire .tc-cs-liste { gap: var(--space-2) var(--space-6); }
@media (min-width: 768px) { .tc-ag-sommaire .tc-cs-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tc-ag-sommaire .tc-cs-liste li { font-size: 18px; }
.tc-ag-intro .tc-fs-intro { max-width: 62ch; }
.tc-fs-card p, .tc-fs-card .tc-ag-liste li { margin: 0; font: 400 18px/1.6 var(--font-sans); color: var(--text-on-light); }
.tc-fs-card strong, .tc-fs-point strong, .tc-ag-points strong { font-weight: 700; color: var(--ink-on-light); }
.tc-ag-points strong { color: inherit; }
.tc-fond-clair .tc-ag-points strong { color: var(--ink-on-light); }
.tc-fond-gris .tc-ag-points strong { color: var(--white); }
.tc-ag-cartes { margin-top: var(--space-5); }
@media (min-width: 992px) { .tc-ag-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tc-ag-usages { margin-top: var(--space-6); }
.tc-fs-split + .tc-fs-points, .tc-fs-split + .tc-ag-usages { margin-top: var(--space-6); }
.tc-ag-btp { margin-top: var(--space-5); padding: var(--space-6); gap: var(--space-3); }
.tc-ag-btp .tc-cs-liste { margin-top: var(--space-2); }
.tc-fs-card .tc-ag-liste { margin-top: var(--space-2); gap: var(--space-2); }
.tc-fs-card .tc-ag-liste li { padding-left: 24px; }
.tc-ag-precaution { margin-top: var(--space-2) !important; padding-left: 16px; border-left: 3px solid var(--orange); }   /* filet orange : décor, sans texte */
.tc-ag-metiers { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
@media (min-width: 768px) { .tc-ag-metiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tc-ag-etapes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin: var(--space-6) 0 0; padding: 0; list-style: none; counter-reset: etape; }
@media (min-width: 768px) { .tc-ag-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .tc-ag-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tc-ag-etapes > li { counter-increment: etape; }
.tc-ag-etapes > li::before { content: counter(etape, decimal-leading-zero); display: block; padding-top: 11px; font: 800 40px/1 var(--font-display); color: var(--ink-on-light);
  background: linear-gradient(var(--orange), var(--orange)) 0 0 / 28px 3px no-repeat; }   /* chiffre en encre ; barre orange de 28 × 3 px au-dessus (décor) */
.tc-ag-points { gap: var(--space-3); }
.tc-ag-points li { max-width: 62ch; }
.tc-ag-appel { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .tc-cta .tc-band.tc-ag-appel { grid-template-columns: minmax(0, 1fr); } }
.tc-ag-appel .tc-band__aside { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.tc-ag-appel .tc-ag-rassurance { flex: 0 0 100%; }
@media (max-width: 575.98px) { .tc-ag-appel .tc-band__aside { flex-direction: column; align-items: stretch; } }
.tc-ag-appel-suite { margin: 0; }

/* Page Agents IA : icônes décoratives des cartes (retouche du 17/10/2026) — pastille sombre (--fond-gris, #1E1A16) aux angles arrondis, icône orange #F78E1E (7,3:1 sur la pastille), aria-hidden dans le gabarit.
   Les cartes gardent leur largeur et leur ordre ; leur hauteur augmente de celle de la pastille. Blocs métier : pastille réduite (40 px) à gauche du titre H3, élément séparé du H3. */
.tc-ag-icone { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; align-self: flex-start; width: 48px; height: 48px; margin-bottom: var(--space-3); border-radius: var(--radius-card); background: var(--fond-gris); color: var(--orange); }
.tc-ag-icone svg { display: block; width: 28px; height: 28px; }
.tc-ag-icone--s { width: 40px; height: 40px; margin-bottom: 0; }
.tc-ag-icone--s svg { width: 24px; height: 24px; }
.tc-ag-titre-metier { display: flex; align-items: center; gap: var(--space-3); }
.tc-ag-titre-metier .tc-h4 { min-width: 0; }
.tc-fs-card > .tc-ag-icone { margin-bottom: 0; }   /* dans une carte flex, l'écart vient du gap de la carte */
.tc-fs-point > .tc-ag-icone { display: flex; }   /* cartes de texte courant (pas flex) : la pastille est un bloc, le texte passe dessous */

/* ───────── 24. Page « Contact » (gabarit pages/contact.php, classes tc-ct-) et champs de formulaire ─────────
   Champs : les classes .tc-input de bundle.css (copie de _design, non modifiée) sont complétées ici : rayon --radius-input (8 px), liste déroulante au même gabarit, 18 px minimum.
   Focus : style propre aux champs (1 px #141414, décalage 0, halo orange de 25 %), défini en section 25 ; l'anneau de bundle.css (3 px) n'agit plus sur eux. Pour revenir en arrière : supprimer cette section, pages/contact.php et remettre la route. */
.tc-input { border-radius: var(--radius-input); }
select.tc-input.tc-select { appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 16px 10px; }
.tc-ct-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
@media (min-width: 992px) { .tc-ct-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-7); } }
.tc-ct-aide { margin: var(--space-3) 0 0; font: 400 18px/1.6 var(--font-sans); color: var(--text-on-light); }
.tc-ct-resultat { margin-top: var(--space-4); scroll-margin-top: calc(var(--header-h) + 16px); }
.tc-ct-resultat:focus-visible { outline: 3px solid var(--tc-focus); outline-offset: 3px; border-radius: var(--radius-card); }
.tc-ct-resultat .tc-alert { border-radius: var(--radius-card); }
.tc-ct-resultat .tc-alert p { font: 700 18px/1.5 var(--font-sans); color: var(--ink-on-light); }
.tc-ct-form { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.tc-ct-form .tc-field__hint { font: 400 18px/1.5 var(--font-sans); }
.tc-ct-piege { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }   /* champ piège : hors écran, invisible (aria-hidden dans le gabarit) */
.tc-ct-actions { margin-top: var(--space-2); }
.tc-ct-mention { margin: var(--space-4) 0 0; font: 400 18px/1.6 var(--font-sans); color: var(--text-on-light); max-width: 62ch; }
.tc-ct-coord { gap: var(--space-3); }
.tc-ct-coord address { margin: 0; font: 400 18px/1.6 var(--font-sans); color: var(--text-on-light); }
.tc-ct-coord p { margin: 0; font: 400 18px/1.6 var(--font-sans); color: var(--text-on-light); }
.tc-ct-coord .tc-h4 { margin-bottom: var(--space-1); }

/* Page Contact : colonne de droite (coordonnées + « Comment ça se passe ») et trois étapes numérotées par un compteur CSS (retouche du 18/10/2026).
   Le numéro est dans un cercle sombre (--fond-gris, #1E1A16), chiffre orange (décor sur fond sombre) ; la valeur « / "" » du contenu le rend muet pour les lecteurs d'écran (la liste ordonnée porte l'ordre).
   Colonne collante : dès 992 px et seulement si la fenêtre est assez haute pour contenir les deux cartes (sinon elle défile normalement) ; elle s'arrête avec la fin de la colonne du formulaire. */
.tc-ct-droite { display: grid; gap: var(--space-4); }
.tc-ct-etapes { gap: var(--space-3); }
.tc-ct-etapes .tc-h4 { margin-bottom: var(--space-1); }
.tc-ct-etapes__liste { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.tc-ct-etapes__liste li { counter-increment: etape; display: flex; align-items: center; gap: var(--space-3); font: 400 18px/1.5 var(--font-sans); color: var(--text-on-light); }
.tc-ct-etapes__liste li::before { content: counter(etape); content: counter(etape) / ""; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--fond-gris); color: var(--orange); font: 700 18px/1 var(--font-display); }
/* Seuils de hauteur de fenêtre = hauteur des deux cartes + décalage du haut (104 px) + marge : cartes plus hautes (colonne étroite) entre 992 et 1199 px. */
@media (min-width: 992px) and (min-height: 900px) {
  .tc-ct-droite { position: sticky; top: calc(var(--header-h) + 24px); }
}
@media (min-width: 1200px) and (min-height: 800px) {
  .tc-ct-droite { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* ───────── 25. Finesse du design : titres, champs, focus, boutons, messages (retouche du 18/10/2026) ─────────
   Surcharges de bundle.css (copie de _design, non modifiée). Pour revenir en arrière : supprimer cette section, remettre la classe tc-h2 sur les H1 des gabarits (copies dans 000 Attente/finesse-design/). */

/* Titres. Les H1 des pages intérieures ont leur propre classe (.tc-h1-int) : mêmes valeurs que l'ancien .tc-h2 (40 px dès 1200 px, clamp(26px, 3.6vw, 40px) en dessous).
   Les H2 (.tc-h2 restant sur les H2) deviennent plus discrets : casse normale, 30 px dès 1200 px, 28 px de 768 à 1199 px, 24 px en dessous. Le H1 de l'accueil (.tc-h1) ne change pas. */
.tc-h1-int { margin: 0; text-transform: uppercase; color: var(--bs-heading-color); text-wrap: balance;
  font-family: var(--font-display); font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -0.01em; }
@media (max-width: 1199.98px) { .tc-h1-int { font-size: clamp(26px, 3.6vw, 40px); } }
.tc-h2 { font-size: 30px; font-weight: 700; line-height: 1.2; text-transform: none; letter-spacing: 0; }
@media (max-width: 1199.98px) { .tc-h2 { font-size: 28px; } }
@media (max-width: 767.98px) { .tc-h2 { font-size: 24px; } }

/* Focus global : contour de 2 px décalé de 2 px (noir sur fond clair, blanc sur fond sombre, couleur inchangée). */
:root { --focus-ring-width: 2px; --focus-ring-offset: 2px; }
.tc-ct-resultat:focus-visible { outline-width: var(--focus-ring-width); outline-offset: var(--focus-ring-offset); }

/* Champs : 48 px, bordure 1 px --tc-champ-bordure (contraste ≥ 3:1 contre #F4F2EE et contre le blanc), survol orange sans ombre, focus = un seul trait de 2 px (bordure + contour de 1 px collé) et halo orange doux. */
:root { --tc-champ-bordure: #8A857C; --tc-champ-erreur: #B3261E; }
.tc-input { min-height: 48px; padding: 10px 14px; border: 1px solid var(--tc-champ-bordure); background: var(--white); }
textarea.tc-input { min-height: 219px; }
input.tc-input, select.tc-input { line-height: 26px; }   /* 10 + 26 + 10 + 2 (bordures) = 48 px */
select.tc-input.tc-select { padding-right: 48px; }
.tc-input:hover, .tc-input.is-hover { box-shadow: none; }
@media (hover: hover) { .tc-input:hover { border-color: var(--orange); } }
:root .tc-input:focus, :root .tc-input:focus-visible { border-color: #141414; outline: 1px solid #141414; outline-offset: 0; box-shadow: 0 0 0 3px rgba(247, 142, 30, 0.25); }
.tc-input.is-invalid, .tc-input[aria-invalid="true"] { border-color: var(--tc-champ-erreur); box-shadow: none; }
@media (hover: hover) { .tc-input.is-invalid:hover, .tc-input[aria-invalid="true"]:hover { border-color: var(--tc-champ-erreur); } }
:root .tc-input.is-invalid:focus, :root .tc-input.is-invalid:focus-visible, :root .tc-input[aria-invalid="true"]:focus, :root .tc-input[aria-invalid="true"]:focus-visible {
  border-color: var(--tc-champ-erreur); outline: 1px solid var(--tc-champ-erreur); outline-offset: 0; box-shadow: 0 0 0 3px rgba(247, 142, 30, 0.25); }

/* Boutons (classe commune .tc-btn : orange, contour, etc.) : 48 px. Le bouton « Contact » du menu (.tc-nav-btn) ne change pas. */
.tc-btn { min-height: 48px; padding: 10px 28px; }

/* Messages du formulaire : fond blanc, filet de 1 px, barre de 4 px à gauche (sombre pour le succès, rouge pour l'erreur), plus de contour de 2 px. */
.tc-ct-resultat .tc-alert { background: var(--white); border: 1px solid #D9D4CA; border-left: 4px solid #141414; border-radius: var(--radius-card); padding: 20px 24px; }
.tc-ct-resultat .tc-alert--danger { border-left-color: var(--tc-champ-erreur); }
.tc-ct-resultat .tc-alert p { font-weight: 600; }
.tc-ct-resultat .tc-alert:not(.tc-alert--danger) { background: #E8F3EA; border-left-color: #1B5E20; }
.tc-ct-resultat .tc-alert--danger { background: #FBEAE8; }
.tc-ct-resultat:focus, .tc-ct-resultat:focus-visible { outline: none; }

/* ───────── 26. Retouches de finesse (18/10/2026) : bouton « Contact » du menu, boutons sur petit écran ─────────
   Bouton « Contact » : 40 px dès 992 px (le conteneur du menu garde sa hauteur : l'en-tête ne change pas) ; dans le menu mobile il reste à 56 px (zone cliquable > 44 px).
   Boutons .tc-btn sous 576 px : remplissage horizontal 20 px (au lieu de 28 px), hauteur minimale de 48 px conservée. Pour revenir en arrière : supprimer cette section (copie dans 000 Attente/finesse-retouches/). */
@media (min-width: 992px) { .tc-header .tc-nav-btn { height: 40px; } }
@media (max-width: 575.98px) { .tc-btn { padding-left: 20px; padding-right: 20px; } }

/* ───────── 27. Pages juridiques : Mentions légales et Politique de confidentialité (retouche du 19/10/2026) ─────────
   Gabarits pages/mentions-legales.php et pages/politique-confidentialite.php. Texte long sur fond clair : largeur de lecture 34 em (comme .tc-prose), texte 18 px / 1,6 en #3D3D39,
   titres en encre #141414. H2 = tailles de .tc-h2 (30 / 28 / 24 px), H3 = .tc-h4 (20 / 19 px) : les classes sont posées dans le gabarit, cette section ne règle que couleurs et espacements.
   Pas de carte .tc-fs-card ici, donc pas de conflit avec « .tc-fs-card p ». Listes à puce carrée orange (décor sans texte) ; liste des coordonnées de l'éditeur sans puce.
   Pour revenir en arrière : supprimer cette section (copie dans 000 Attente/legal-etape/). */
.tc-legal { max-width: 34em; }
.tc-legal > * { margin: 0; }
.tc-legal > * + * { margin-top: var(--space-3); }
.tc-legal h2, .tc-legal h3 { color: var(--ink-on-light); }
.tc-legal > h2 { margin-top: var(--space-6); }
.tc-legal > h3 { margin-top: var(--space-4); }
.tc-legal > :first-child { margin-top: 0; }
.tc-legal > h2 + *, .tc-legal > h3 + * { margin-top: var(--space-2); }
.tc-legal p, .tc-legal li { font: 400 18px/1.6 var(--font-sans); color: var(--text-on-light); overflow-wrap: anywhere; }
.tc-legal strong { font-weight: 700; color: var(--ink-on-light); }
.tc-legal ul { display: grid; gap: var(--space-2); padding: 0; list-style: none; }
.tc-legal li { position: relative; padding-left: 24px; }
.tc-legal li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 8px; height: 8px; background: var(--orange); }
.tc-legal .tc-legal__coord li { padding-left: 0; }
.tc-legal .tc-legal__coord li::before { content: none; }
.tc-legal > .tc-legal__maj { margin-top: var(--space-6); }

/* ───────── 28. Section « Avis clients » : deux liens texte côte à côte (retouche du 19/10/2026) ─────────
   « Voir tous les avis sur Google » (inchangé) et « Laisser un avis » dans le même <p class="tc-avis__suite">. Aucun nouveau style de lien : seul l'espacement est posé ici.
   Sous 576 px : les deux liens sont empilés (16 px d'écart vertical) ; dès 576 px : côte à côte, 32 px d'écart horizontal (retour à la ligne si la place manque). Alignement à gauche, comme avant.
   Pour revenir en arrière : supprimer cette section (copie dans 000 Attente/avis-etape/). */
.tc-avis__suite { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3) var(--space-5); }
@media (min-width: 576px) { .tc-avis__suite { flex-direction: row; flex-wrap: wrap; align-items: baseline; } }

/* ───────── 29. Pied de page : liens vers les réseaux sociaux (retouche du 19/10/2026) ─────────
   Icônes SVG en ligne de 24 px dans le bloc de marque du pied de page ; zone cliquable de 44 × 44 px, 8 px entre les icônes ; couleur des liens du pied de page (--text-on-dark), orange au survol à la souris ;
   focus : contour global (blanc sur fond sombre). Pour revenir en arrière : supprimer cette section et le bloc <nav> de inc/footer.php (copie dans 000 Attente/reseaux-etape/). */
.tc-site-footer .tc-site-footer__reseaux { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tc-site-footer .tc-site-footer__reseaux a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; text-decoration: none; }
.tc-site-footer__reseaux svg { display: block; width: 24px; height: 24px; }
@media (hover: hover) and (pointer: fine) { .tc-site-footer .tc-site-footer__reseaux a:hover { color: var(--orange); } }

/* ───────── 30. Focus : exceptions à 3 px de bundle.css ramenées à l'anneau global (retouche du 19/10/2026) ─────────
   bundle.css (copie de _design, non modifiée) écrit en dur « outline: 3px solid var(--tc-focus); outline-offset: 3px » pour une liste de sélecteurs. Ceux de spécificité (0,2,0) sont déjà
   surchargés par l'anneau global (section 1 : :root :focus-visible, chargé après), pas ceux de spécificité (0,2,1) : liens du pied de page (logo, liens, icônes des réseaux), fil d'Ariane,
   cartes a.tc-card et cases .tc-check input. Ici : mêmes propriétés que l'anneau global, par les variables --focus-ring-width et --focus-ring-offset (2 px / 2 px depuis la section 25),
   avec une spécificité (0,3,1) qui l'emporte sur bundle.css. Couleurs inchangées (--tc-focus : blanc sur fond sombre, noir sur fond clair).
   Pour revenir en arrière : supprimer cette section et remettre « outline-offset: 3px » à la règle .tc-tab:focus-visible (section 12). */
:root .tc-footer a:focus-visible, :root .tc-breadcrumb a:focus-visible, :root a.tc-card:focus-visible, :root .tc-check input:focus-visible {
  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color, var(--tc-focus));
  outline-offset: var(--focus-ring-offset);
}

/* ───────── 31. Accueil : soulignement du titre des trois cartes d'offres au survol (retouche du 19/10/2026) ─────────
   Avant : trait de 2 px de la couleur du texte (règle commune .tc-offre:hover .tc-offre__lien, section 14, partagée avec les cartes du hub : non modifiée).
   Après, pour les trois cartes de l'accueil seulement (classe tc-offres--accueil sur la liste de pages/home.php) : trait de 1 px, orange du trait de lien sur fond clair (--trait-lien = #C67218), décalage inchangé (4 px).
   Texte, graisse, taille et couleur du titre ne changent pas. Écrans tactiles : rien (règle sous « hover: hover »). Focus clavier : rien (le soulignement n'existait pas au focus ; le contour 2 px / 2 px est inchangé).
   Pour revenir en arrière : supprimer cette section et la classe tc-offres--accueil de pages/home.php (copies dans 000 Attente/survol-cartes-etape/). */
@media (hover: hover) and (pointer: fine) {
  .tc-offres--accueil .tc-offre:hover .tc-offre__lien { text-decoration: underline; text-decoration-color: var(--trait-lien); text-decoration-thickness: var(--border-1); text-underline-offset: 4px; }
}

/* ───────── 32. Zones cliquables d'au moins 32 px de haut (retouche du 29/10/2026) ─────────
   Avant : les liens du pied de page (colonnes et barre du bas, téléphone compris), du fil d'Ariane (dès 768 px), du sommaire « Sur cette page » d'Agents IA et le titre-lien des trois cartes d'offres
   de l'accueil (.tc-offre__lien) avaient une zone cliquable de 16 à 23 px de haut (hauteur de la ligne de texte, mesurée par la vérification finale du 29/10/2026).
   Après : un remplissage vertical sur le lien (élément en ligne : il agrandit la zone cliquable et le contour de focus, mais ni la hauteur de la ligne, ni la mise en page, ni le texte :
   taille, graisse, couleur et soulignement ne changent pas). Hauteur obtenue : 22 + 2 × 5 = 32 px (pied de page, sommaire, carte) ; 16 + 2 × 8 = 32 px (fil d'Ariane).
   Le soulignement au survol des cartes de l'accueil (section 31) n'est pas modifié. Sous 768 px le fil d'Ariane garde son lien de retour de 44 px (section « Fil d'Ariane »).
   Pour revenir en arrière : supprimer cette section (copie de site.css avant la retouche dans 000 Attente/corrections-finales-etape/). */
:root {
  --cible-pad-pied: 5px;
  --cible-pad-fil: 8px;
  --cible-pad-sommaire: 5px;
  --cible-pad-carte: 5px;
}
.tc-site-footer__col a, .tc-site-footer__bottom a { padding-block: var(--cible-pad-pied); }
@media (min-width: 768px) { .tc-breadcrumb a { padding-block: var(--cible-pad-fil); } }
.tc-ag-sommaire .tc-cs-liste a { padding-block: var(--cible-pad-sommaire); }
.tc-offres--accueil .tc-offre__lien { padding-block: var(--cible-pad-carte); }