/* ==========================================================================
   TRAME — composants
   Transcription CSS des composants Figma. Mêmes noms, mêmes valeurs.
   ========================================================================== */

/* ---------- Bouton ---------- */
.trame-btn {
  display: inline-flex; align-items: center; gap: var(--tr-space-ms);
  padding: 15px 25px;
  border: 1px solid transparent;
  border-radius: var(--tr-radius-lg);
  font-family: var(--tr-font-body);
  font-size: var(--tr-text-base);
  font-weight: 500;
  line-height: 24px;
  cursor: pointer;
  transition: background-color var(--tr-base) var(--tr-ease),
              border-color var(--tr-base) var(--tr-ease),
              transform var(--tr-fast) var(--tr-ease);
}
.trame-btn:active { transform: translateY(1px); }

.trame-btn--primary {
  background: var(--tr-primary);
  color: #fff;
  box-shadow: var(--tr-glow);
}
.trame-btn--primary:hover { background: var(--tr-primary-hover); color: #fff; }

.trame-btn--secondary {
  background: var(--tr-surface-card);
  border-color: var(--tr-border);
  color: var(--tr-text);
}
.trame-btn--secondary:hover { background: var(--tr-card-hover); border-color: var(--tr-border-hover); color: var(--tr-text); }

.trame-btn--ghost { background: transparent; border-color: var(--tr-border); color: var(--tr-text); }
.trame-btn--ghost:hover { background: var(--tr-surface-card); border-color: var(--tr-border-hover); color: var(--tr-text); }

.trame-btn--lg { padding: 18px 32px; font-size: 17px; gap: var(--tr-space-md); }

/* ---------- Notation en étoiles ----------
   Toujours en SVG : JetBrains Mono ne contient pas le glyphe ★. */
.trame-stars { display: inline-flex; gap: 3px; }
.trame-stars svg { width: 13px; height: 13px; fill: var(--tr-border); }
.trame-stars svg.is-on { fill: var(--tr-primary); }

/* ---------- Badge et tag ---------- */
.trame-badge {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  border-radius: var(--tr-radius-pill);
  background: var(--tr-primary-wash);
  color: var(--tr-text-accent);
  font-family: var(--tr-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.trame-badge--violet  { background: var(--tr-violet-wash);  color: var(--tr-violet); }
.trame-badge--sky     { background: var(--tr-sky-wash);     color: var(--tr-sky); }
.trame-badge--emerald { background: var(--tr-emerald-wash); color: var(--tr-emerald); }
.trame-badge--amber   { background: var(--tr-amber-wash);   color: var(--tr-amber); }

.trame-tag {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-pill);
  background: transparent;
  color: var(--tr-text-muted);
  font-family: var(--tr-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all var(--tr-base) var(--tr-ease);
}
.trame-tag[aria-pressed="true"] { background: var(--tr-primary); border-color: transparent; color: #fff; }

/* ---------- Carte ---------- */
.trame-card {
  display: flex; flex-direction: column;
  background: var(--tr-surface-card);
  border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-lg);
  overflow: hidden;
  transition: border-color var(--tr-base) var(--tr-ease),
              transform var(--tr-base) var(--tr-ease-out);
}
.trame-card:hover { border-color: var(--tr-border-hover); transform: translateY(-3px); }
.trame-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--tr-surface-section); }
.trame-card__media img { width: 100%; height: 100%; object-fit: cover; }
.trame-card__media .trame-badge { position: absolute; top: var(--tr-space-lg); left: var(--tr-space-lg); }
.trame-card__body { display: flex; flex-direction: column; gap: var(--tr-space-md); padding: var(--tr-space-xl); }
.trame-card__title { font-size: var(--tr-text-xl); }
.trame-card__excerpt { color: var(--tr-text-muted); font-size: var(--tr-text-sm); margin: 0; }

.trame-card__metrics { display: flex; gap: var(--tr-space-3xl); padding-top: var(--tr-space-sm); }
.trame-metric__value { display: block; color: var(--tr-text-accent); font-weight: 500; font-size: var(--tr-text-base); }
.trame-metric__label { display: block; font-family: var(--tr-font-mono); font-size: 10px; color: var(--tr-text-muted); }

/* ---------- Statistique (carte) ---------- */
.trame-stat {
  padding: var(--tr-space-xl);
  border-radius: var(--tr-radius-lg);
  background: var(--tr-surface-card);
  border: 1px solid var(--tr-border);
  transition:
    transform var(--tr-survol-duree, 320ms) var(--tr-ease),
    border-color var(--tr-survol-duree, 320ms) var(--tr-ease),
    box-shadow var(--tr-survol-duree, 320ms) var(--tr-ease);
}
.trame-stat:hover {
  border-color: var(--tr-primary);
  transform: translateY(var(--tr-survol-y, -3px));
  box-shadow: var(--tr-survol-ombre, none);
}
.trame-stat__value {
  display: block;
  font-family: var(--tr-font-display); font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 2.75rem);
  color: var(--tr-text-accent);
  line-height: 1.05;
}
.trame-stat__label { display: block; color: var(--tr-text); font-weight: 500; font-size: var(--tr-text-sm); margin-top: 6px; }
.trame-stat__hint { display: block; font-family: var(--tr-font-mono); font-size: 11px; color: var(--tr-text-muted); margin-top: 2px; }

/* ---------- En-tête ---------- */
.trame-header {
  position: sticky; top: 0; z-index: var(--tr-z-sticky);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--tr-base) var(--tr-ease),
              border-color var(--tr-base) var(--tr-ease);
}
.trame-header.is-stuck {
  background: var(--tr-entete-fond, var(--tr-surface-base));
  border-bottom-color: var(--tr-entete-bordure, var(--tr-border));
  /* Effet de verre : le fond laisse deviner le contenu qui défile dessous.
     Réglé à 0 dans le personnalisateur, le fond redevient opaque. */
  backdrop-filter: blur(var(--tr-entete-flou, 14px));
  -webkit-backdrop-filter: blur(var(--tr-entete-flou, 14px));
}
.trame-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tr-space-2xl); padding-block: var(--tr-entete-espace, 18px);
}
/* Le menu doit pouvoir rétrécir avant le logo, jamais l'inverse. */
.trame-header__nav { flex: 0 1 auto; }

.trame-logo { display: inline-flex; align-items: center; gap: var(--tr-space-ms); color: var(--tr-text); }
.trame-logo:hover { color: var(--tr-text); }
.trame-logo__mark {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: var(--tr-radius-md); background: var(--tr-primary); color: #fff;
}
.trame-logo { flex: 0 1 auto; min-width: 0; }
.trame-logo__word {
  font-family: var(--tr-font-display); font-weight: 700; font-size: 19px;
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trame-logo__mark { flex: none; }

/* Conteneur menu + CTA. Ce bloc manquait : sans lui, sur desktop, le menu
   et le bouton s'empilent au lieu de s'aligner. C'était le bug d'alignement. */
.trame-header__nav {
  display: flex;
  align-items: center;
  gap: var(--tr-space-3xl);
}

.trame-nav ul { display: flex; align-items: center; gap: var(--tr-nav-espace, 34px); }
.trame-nav a { color: var(--tr-nav, var(--tr-text-muted)); font-size: var(--tr-nav-taille, var(--tr-text-sm)); font-weight: 500; }
.trame-nav a:hover, .trame-nav .current-menu-item > a { color: var(--tr-text); }

.trame-burger {
  display: none; width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: var(--tr-surface-card); border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-md); color: var(--tr-text); cursor: pointer;
}

@media (max-width: 960px) {
  .trame-burger { display: inline-flex; }
  .trame-header__nav {
    position: fixed; inset: 64px 0 0;
    display: none; flex-direction: column; gap: var(--tr-space-2xl);
    padding: var(--tr-space-3xl) var(--tr-gutter);
    background: var(--tr-surface-base);
    overflow-y: auto;
  }
  .trame-header__nav.is-open { display: flex; }
  .trame-nav ul { flex-direction: column; align-items: flex-start; gap: var(--tr-space-xl); }
  .trame-nav a { font-size: var(--tr-text-xl); }
}

/* ---------- Hero ---------- */
.trame-hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 2rem + 6vw, 6.5rem) var(--tr-section-y); }
.trame-hero::before {
  content: ""; position: absolute; inset: -20% -10% auto; height: 620px;
  background: var(--tr-gradient-hero); pointer-events: none;
}
.trame-hero__inner { position: relative; display: grid; gap: var(--tr-space-5xl); align-items: center; }
@media (min-width: 1024px) { .trame-hero__inner { grid-template-columns: 1.05fr 0.95fr; } }

.trame-hero__title { margin-bottom: var(--tr-space-xl); }
.trame-hero__title em { font-style: normal; color: var(--tr-primary); }
.trame-hero__lead { max-width: 46ch; margin-bottom: var(--tr-space-3xl); font-size: var(--tr-text-lg); }
.trame-hero__actions { display: flex; flex-wrap: wrap; gap: var(--tr-space-lg); }
.trame-hero__media { border-radius: var(--tr-radius-xl); overflow: hidden; border: 1px solid var(--tr-border); }
.trame-hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.trame-stats { display: grid; gap: var(--tr-space-lg); margin-top: var(--tr-space-6xl); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
/* Nombre de colonnes choisi dans le bloc. auto-fit reste le repli : sur un
   petit écran, la grille se replie d'elle-même plutôt que d'écraser les
   cartes. */
@media (min-width: 760px) {
  .trame-stats--2 { grid-template-columns: repeat(2, 1fr); }
  .trame-stats--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .trame-stats--4 { grid-template-columns: repeat(4, 1fr); }
  .trame-stats--5 { grid-template-columns: repeat(5, 1fr); }
  .trame-stats--6 { grid-template-columns: repeat(6, 1fr); }
}

/* ---------- Pied de page ---------- */
.trame-footer { background: var(--tr-surface-base); border-top: 1px solid var(--tr-border); padding-block: var(--tr-space-6xl) var(--tr-space-3xl); }
.trame-footer__cols { display: grid; gap: var(--tr-space-5xl); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.trame-footer__brand { max-width: 360px; display: flex; flex-direction: column; gap: var(--tr-space-lg); }
.trame-footer h2 { font-family: var(--tr-font-mono); font-size: 11px; font-weight: 500; letter-spacing: var(--tr-tracking-wide); text-transform: uppercase; color: var(--tr-text-muted); margin: 0 0 var(--tr-space-md); }
.trame-footer nav ul { display: flex; flex-direction: column; gap: var(--tr-space-md); }
.trame-footer nav a { color: var(--tr-text-muted); font-size: var(--tr-text-sm); }
.trame-footer nav a:hover { color: var(--tr-text); }
.trame-footer__legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tr-space-lg);
  margin-top: var(--tr-space-5xl); padding-top: var(--tr-space-3xl);
  border-top: 1px solid var(--tr-border);
  font-family: var(--tr-font-mono); font-size: 11px; color: var(--tr-text-muted);
}
.trame-footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--tr-space-3xl); }

/* ---------- Bloc CTA ---------- */
.trame-cta {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--tr-space-lg);
  padding: clamp(3rem, 2rem + 4vw, 4.5rem) var(--tr-gutter);
  background: var(--tr-surface-section);
  border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-xl);
}
.trame-cta__title { max-width: 20ch; }
.trame-cta__lead { max-width: 60ch; margin: 0; }

/* ---------- Fil d'Ariane ---------- */
.trame-ariane { margin-bottom: var(--tr-space-2xl); }
.trame-ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tr-space-ms); }
.trame-ariane li { display: flex; align-items: center; gap: var(--tr-space-ms); }
.trame-ariane a,
.trame-ariane span { font-family: var(--tr-font-mono); font-size: var(--tr-text-xs); color: var(--tr-text-muted); }
.trame-ariane a:hover { color: var(--tr-text); }
.trame-ariane [aria-current="page"] { color: var(--tr-text-accent); }

/* ---------- Barre de filtres ---------- */
.trame-filtres {
  display: flex; flex-wrap: wrap; gap: var(--tr-space-md);
  margin-bottom: var(--tr-space-3xl);
}

/* ---------- Page d'atterrissage ---------- */
.trame-atterrissage > .trame-section:first-child { padding-top: var(--tr-space-4xl); }

/* ---------- Blocs issus des compositions ---------- */
.trame-stats-bande { gap: var(--tr-space-2xl); }
.trame-media-arrondi img { border-radius: var(--tr-radius-lg); }

.trame-faq {
  padding: var(--tr-space-xl) var(--tr-space-2xl);
  margin-bottom: var(--tr-space-md);
  background: var(--tr-surface-section);
  border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-lg);
}
.trame-faq[open] { background: var(--tr-surface-card); border-color: var(--tr-border-accent); }
.trame-faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--tr-font-body); font-weight: 500;
  color: var(--tr-text);
}
.trame-faq summary::-webkit-details-marker { display: none; }
.trame-faq summary::after {
  content: "+"; float: right;
  font-family: var(--tr-font-mono); color: var(--tr-text-muted);
}
.trame-faq[open] summary::after { content: "\2212"; color: var(--tr-text-accent); }
.trame-faq p { margin: var(--tr-space-lg) 0 0; color: var(--tr-text-muted); }

/* Le bouton d'une composition hérite de nos styles sans double fond */
.wp-block-button.trame-btn { padding: 0; border: 0; background: none; box-shadow: none; }
.wp-block-button.trame-btn .wp-block-button__link {
  display: inline-flex; align-items: center; gap: var(--tr-space-ms);
  padding: 15px 25px; border-radius: var(--tr-radius-lg);
  font-family: var(--tr-font-body); font-size: var(--tr-text-base); font-weight: 500;
  background: var(--tr-primary); color: #fff; box-shadow: var(--tr-glow);
}
.wp-block-button.trame-btn .wp-block-button__link:hover { background: var(--tr-primary-hover); }

/* ==========================================================================
   En-tête — variantes pilotées depuis le personnalisateur
   Les classes sont posées sur <body> par trame_classes_body().
   ========================================================================== */

/* Couleurs surchargeables */
.trame-btn--primary { background: var(--tr-primary); color: var(--tr-cta-texte, #fff); }
.trame-btn--primary:hover { color: var(--tr-cta-texte, #fff); }
/* Le bouton de l'en-tête a ses propres fond et rayon, indépendants des
   boutons du reste du site. */
.trame-header .trame-btn--primary {
  background: var(--tr-cta-fond, var(--tr-primary));
  border-radius: var(--tr-cta-rayon, var(--tr-radius-pill));
}
.trame-header .trame-btn--secondary { border-radius: var(--tr-cta-rayon, var(--tr-radius-pill)); }
.trame-nav a { color: var(--tr-nav, var(--tr-text-muted)); }
.trame-nav a:hover,
.trame-nav .current-menu-item > a { color: var(--tr-nav-actif, var(--tr-text)); }

/* Logo téléversé */
.trame-logo__image {
  height: var(--tr-logo-h, 30px);
  width: auto;
  max-width: var(--tr-logo-max, 220px);
  object-fit: contain;
}
@media (max-width: 640px) {
  .trame-logo__image { height: var(--tr-logo-h-mobile, 26px); }
}
.trame-logo--image { display: inline-flex; align-items: center; }

/* ---------- Dispositions ---------- */

/* Menu centré : le conteneur du menu occupe l'espace libre et se centre. */
.trame-entete-centre .trame-header__nav { flex: 1 1 auto; justify-content: flex-end; }
@media (min-width: 961px) {
  .trame-entete-centre .trame-header__nav { position: relative; }
  .trame-entete-centre .trame-nav {
    position: absolute; left: 50%; transform: translateX(-50%);
  }
  /* Le bouton reste à droite, le menu au centre optique de la barre. */
  .trame-entete-centre .trame-header__inner > .trame-header__nav { justify-content: flex-end; }
}

/* Menu réparti de part et d'autre du logo */
@media (min-width: 961px) {
  .trame-entete-reparti .trame-header__inner { justify-content: center; gap: var(--tr-space-5xl); }
  .trame-entete-reparti .trame-nav ul { gap: var(--tr-space-3xl); }
  .trame-entete-reparti .trame-logo { order: 2; }
  .trame-entete-reparti .trame-header__nav { order: 3; }
}

/* Logo centré, menu dessous */
@media (min-width: 961px) {
  .trame-entete-empile .trame-header__inner {
    flex-direction: column; gap: var(--tr-space-lg); padding-block: var(--tr-space-2xl);
  }
  .trame-entete-empile .trame-header__nav { width: 100%; justify-content: center; }
}

/* ---------- Comportement au défilement ---------- */
.trame-entete--opaque .trame-header {
  background: var(--tr-surface-base);
  border-bottom-color: var(--tr-border);
}
.trame-entete--statique .trame-header { position: static; }

/* ---------- Effets de survol du menu ---------- */
.trame-nav a { position: relative; }

.trame-nav-souligne .trame-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--tr-primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--tr-base) var(--tr-ease-out);
}
.trame-nav-souligne .trame-nav a:hover::after,
.trame-nav-souligne .trame-nav .current-menu-item > a::after { transform: scaleX(1); }

.trame-nav-pastille .trame-nav a {
  padding: 8px 14px; border-radius: var(--tr-radius-pill);
  transition: background-color var(--tr-base) var(--tr-ease);
}
.trame-nav-pastille .trame-nav ul { gap: var(--tr-space-sm); }
.trame-nav-pastille .trame-nav a:hover,
.trame-nav-pastille .trame-nav .current-menu-item > a { background: var(--tr-primary-wash); }

.trame-nav-halo .trame-nav a { transition: color var(--tr-base) var(--tr-ease), text-shadow var(--tr-base) var(--tr-ease); }
.trame-nav-halo .trame-nav a:hover {
  color: var(--tr-primary);
  text-shadow: 0 0 18px rgba(var(--tr-primary-rgb, 255, 95, 31), 0.55);
}

.trame-nav-aucun .trame-nav a:hover { color: var(--tr-nav, var(--tr-text-muted)); }

@media (prefers-reduced-motion: reduce) {
  .trame-nav-souligne .trame-nav a::after { transition: none; }
}

/* ==========================================================================
   Fiches détaillées — service et étude de cas
   ========================================================================== */

/* Couleur d'accent par service : une seule variable pilote tout le gabarit. */
.trame-accent-orange  { --tr-accent: var(--tr-primary);  --tr-accent-wash: var(--tr-primary-wash); }
.trame-accent-violet  { --tr-accent: var(--tr-violet);   --tr-accent-wash: var(--tr-violet-wash); }
.trame-accent-sky     { --tr-accent: var(--tr-sky);      --tr-accent-wash: var(--tr-sky-wash); }
.trame-accent-cyan    { --tr-accent: var(--tr-cyan);     --tr-accent-wash: var(--tr-sky-wash); }
.trame-accent-emerald { --tr-accent: var(--tr-emerald);  --tr-accent-wash: var(--tr-emerald-wash); }
.trame-accent-amber   { --tr-accent: var(--tr-amber);    --tr-accent-wash: var(--tr-amber-wash); }
.trame-accent-rose    { --tr-accent: var(--tr-rose);     --tr-accent-wash: var(--tr-primary-wash); }
.trame-fiche { --tr-accent: var(--tr-primary); --tr-accent-wash: var(--tr-primary-wash); }

/* ---------- Bannière ---------- */
.trame-fiche__banniere {
  position: relative;
  margin-top: var(--tr-space-3xl);
  margin-bottom: var(--tr-space-4xl);
}
/* Le dégradé et le titre doivent suivre la zone de l'image, pas la gouttière
   du conteneur — d'où le décalage horizontal repris du padding. */
.trame-fiche__banniere::after { left: var(--tr-gutter); right: var(--tr-gutter); }
.trame-fiche__banniere-titre { left: calc(var(--tr-gutter) + var(--tr-space-3xl)); right: calc(var(--tr-gutter) + var(--tr-space-3xl)); }
.trame-fiche__banniere img {
  width: 100%; aspect-ratio: 21 / 9; object-fit: cover;
  border-radius: var(--tr-radius-xl);
}
.trame-fiche__banniere::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,6,14,0) 35%, rgba(6,6,14,0.92) 100%);
  border-radius: var(--tr-radius-xl); pointer-events: none;
}
.trame-fiche__banniere-titre {
  position: absolute; left: var(--tr-space-4xl); right: var(--tr-space-4xl); bottom: var(--tr-space-3xl);
  z-index: 1; display: flex; align-items: center; gap: var(--tr-space-lg); flex-wrap: wrap;
}
.trame-fiche__banniere-titre h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); margin: 0; }
.trame-fiche__icone {
  width: 44px; height: 44px; flex: none; border-radius: var(--tr-radius-md);
  background: var(--tr-accent-wash); border: 1px solid var(--tr-accent);
}
.trame-fiche--projet .trame-fiche__banniere-titre { flex-direction: column; align-items: flex-start; gap: var(--tr-space-md); }

@media (max-width: 720px) {
  .trame-fiche__banniere img { aspect-ratio: 4 / 3; }
  .trame-fiche__banniere-titre { left: var(--tr-space-xl); right: var(--tr-space-xl); bottom: var(--tr-space-xl); }
}

/* ---------- Corps de la fiche service ---------- */
.trame-fiche__corps { display: grid; gap: var(--tr-space-5xl); padding-bottom: var(--tr-section-y); }
@media (min-width: 900px) { .trame-fiche__corps { grid-template-columns: 1fr 300px; } }

.trame-fiche__etiquette { margin: var(--tr-space-3xl) 0 var(--tr-space-lg); }

.trame-livrables { display: grid; gap: var(--tr-space-md); }
@media (min-width: 620px) { .trame-livrables { grid-template-columns: 1fr 1fr; column-gap: var(--tr-space-3xl); } }
.trame-livrables li { display: flex; align-items: flex-start; gap: var(--tr-space-md); color: var(--tr-text); font-size: var(--tr-text-sm); }
.trame-livrables svg { color: var(--tr-accent); flex: none; margin-top: 4px; }

/* ---------- Encadrés latéraux ---------- */
.trame-fiche__aside { display: flex; flex-direction: column; gap: var(--tr-space-lg); }
.trame-encadre {
  padding: var(--tr-space-xl);
  background: var(--tr-surface-card);
  border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-lg);
}
.trame-encadre .trame-mono { margin: 0 0 var(--tr-space-sm); }
.trame-encadre__valeur { margin: 0; color: var(--tr-text); font-size: var(--tr-text-sm); }
.trame-encadre__valeur--accent { color: var(--tr-accent); font-weight: 500; }

.trame-btn--accent { background: var(--tr-accent); color: #fff; border-color: transparent; }
.trame-btn--accent:hover { filter: brightness(1.08); color: #fff; }
.trame-btn--bloc { justify-content: center; width: 100%; }

/* ---------- Étude de cas ---------- */
.trame-infos {
  display: grid; gap: var(--tr-space-2xl) var(--tr-space-4xl);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin: 0 0 var(--tr-space-2xl); padding-bottom: var(--tr-space-2xl);
}
.trame-infos dt { margin-bottom: 4px; }
.trame-infos dd { margin: 0; color: var(--tr-text); font-weight: 500; font-size: var(--tr-text-sm); }

.trame-infos__services { padding-bottom: var(--tr-space-3xl); border-bottom: 1px solid var(--tr-border); }
.trame-infos__services .trame-mono { margin: 0 0 var(--tr-space-md); }
.trame-etiquettes { display: flex; flex-wrap: wrap; gap: var(--tr-space-md); }
.trame-etiquettes li {
  padding: 6px 14px; border: 1px solid var(--tr-border); border-radius: var(--tr-radius-pill);
  font-family: var(--tr-font-mono); font-size: 11px; color: var(--tr-text-muted);
}

.trame-metriques {
  display: grid; gap: var(--tr-space-lg);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: var(--tr-space-4xl) 0;
}
.trame-metrique-bloc {
  padding: var(--tr-space-2xl) var(--tr-space-lg); text-align: center;
  background: var(--tr-surface-card); border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-lg);
}
.trame-metrique-bloc__valeur {
  display: block; font-family: var(--tr-font-display); font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); color: var(--tr-text-accent); line-height: 1.05;
}
.trame-metrique-bloc__libelle {
  display: block; margin-top: 6px;
  font-family: var(--tr-font-mono); font-size: 11px; color: var(--tr-text-muted);
}

.trame-recit { display: grid; gap: var(--tr-space-3xl); margin-bottom: var(--tr-space-4xl); }
@media (min-width: 720px) { .trame-recit { grid-template-columns: 1fr 1fr; } }
.trame-recit .trame-mono { margin: 0 0 var(--tr-space-md); }
.trame-recit p:last-child { color: var(--tr-text-muted); font-size: var(--tr-text-sm); margin: 0; }

.trame-galerie { display: grid; gap: var(--tr-space-lg); margin-bottom: var(--tr-space-4xl); }
@media (min-width: 720px) { .trame-galerie { grid-template-columns: repeat(3, 1fr); } }
.trame-galerie img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--tr-radius-lg); border: 1px solid var(--tr-border);
}

/* ==========================================================================
   Grille en vedette du portfolio
   ========================================================================== */
.trame-vedette { display: grid; gap: var(--tr-space-lg); margin-bottom: var(--tr-space-4xl); }
@media (min-width: 900px) {
  .trame-vedette { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
  .trame-vedette__grande { grid-row: span 2; }
}
.trame-vedette .trame-card { position: relative; overflow: hidden; }
.trame-vedette .trame-card__media { aspect-ratio: auto; height: 100%; min-height: 220px; }
.trame-vedette__grande .trame-card__media { min-height: 460px; }
.trame-vedette .trame-card__body {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(180deg, rgba(6,6,14,0) 0%, rgba(6,6,14,0.94) 62%);
  padding: var(--tr-space-3xl) var(--tr-space-xl) var(--tr-space-xl);
}

/* ==========================================================================
   Fenêtre modale
   ========================================================================== */
.trame-modal {
  width: min(980px, 92vw);
  max-height: 88vh;
  padding: 0;
  border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-xl);
  background: var(--tr-surface-section);
  color: var(--tr-text-muted);
  overflow: hidden;
}
/* Le fond assombri ET flouté : la page reste devinable derrière, ce qui
   rappelle qu'on ne l'a pas quittée — c'est tout l'intérêt de la modale. */
.trame-modal::backdrop {
  background: rgba(6, 6, 14, var(--tr-modal-voile, 0.72));
  backdrop-filter: blur(var(--tr-modal-flou, 10px));
  -webkit-backdrop-filter: blur(var(--tr-modal-flou, 10px));
}

.trame-modal__contenu { max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; }

.trame-modal__fermer {
  position: absolute; top: var(--tr-space-lg); right: var(--tr-space-lg); z-index: 2;
  display: grid; place-items: center; width: 40px; height: 40px;
  background: var(--tr-surface-card); border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-pill); color: var(--tr-text); cursor: pointer;
  transition: background-color var(--tr-base) var(--tr-ease);
}
.trame-modal__fermer:hover { background: var(--tr-card-hover); }

.trame-modal__banniere { position: relative; }
.trame-modal__banniere img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.trame-modal__banniere::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,6,14,0) 40%, rgba(13,13,28,0.96) 100%);
}
.trame-modal__banniere-titre {
  position: absolute; left: var(--tr-space-3xl); right: var(--tr-space-3xl); bottom: var(--tr-space-2xl); z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--tr-space-md);
}
.trame-modal__banniere-titre h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem); }
.trame-modal__titre-nu { padding: var(--tr-space-3xl) var(--tr-space-3xl) 0; margin: 0; }

.trame-modal__corps { padding: var(--tr-space-3xl); }
.trame-modal__corps .trame-infos { padding-bottom: var(--tr-space-2xl); }
.trame-modal__etat { padding: var(--tr-space-6xl) var(--tr-space-3xl); text-align: center; }
.trame-modal__lien-direct { margin: var(--tr-space-xl) 0 0; text-align: center; }
.trame-modal__lien-direct a { font-family: var(--tr-font-mono); font-size: var(--tr-text-xs); color: var(--tr-text-muted); }
.trame-modal__lien-direct a:hover { color: var(--tr-text-accent); }

/* Le corps ne doit pas défiler derrière la modale. */
body:has(dialog.trame-modal[open]) { overflow: hidden; }

@media (max-width: 720px) {
  .trame-modal { width: 100vw; max-width: 100vw; max-height: 100vh; border-radius: 0; border: 0; }
  .trame-modal__contenu { max-height: 100vh; }
  .trame-modal__corps { padding: var(--tr-space-xl); }
}

/* ---------- Équipe et témoignages ---------- */
.trame-membre img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--tr-radius-lg); margin-bottom: var(--tr-space-lg);
  border: 1px solid var(--tr-border);
}
.trame-membre h3 { font-size: var(--tr-text-lg); margin-bottom: 4px; }
.trame-membre .trame-mono { margin: 0; }

.trame-temoignage blockquote {
  margin: 0; color: var(--tr-text); font-size: var(--tr-text-sm); line-height: 1.6;
}
.trame-temoignage__auteur { display: flex; align-items: center; gap: var(--tr-space-md); margin-top: var(--tr-space-lg); }
.trame-temoignage__auteur img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.trame-temoignage__auteur strong { display: block; color: var(--tr-text); font-size: var(--tr-text-sm); font-weight: 500; }
.trame-temoignage__auteur .trame-mono { display: block; margin: 0; }

/* ==========================================================================
   Funnel de contact
   ========================================================================== */
.trame-page-funnel { background: var(--tr-surface-base); }

.trame-funnel__entete { border-bottom: 1px solid var(--tr-border); }
.trame-funnel__entete-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--tr-space-lg);
}
.trame-funnel__quitter { font-family: var(--tr-font-mono); font-size: var(--tr-text-xs); color: var(--tr-text-muted); }
.trame-funnel__quitter:hover { color: var(--tr-text); }

.trame-funnel__page { padding-block: var(--tr-space-5xl) var(--tr-space-6xl); max-width: 940px; }

/* ---------- Progression ---------- */
.trame-funnel__etapes {
  display: flex; flex-wrap: wrap; gap: var(--tr-space-lg) var(--tr-space-3xl);
  margin-bottom: var(--tr-space-5xl);
}
.trame-funnel__etapes li {
  display: flex; align-items: center; gap: var(--tr-space-md);
  font-family: var(--tr-font-mono); font-size: var(--tr-text-xs); color: var(--tr-text-muted);
}
.trame-funnel__num {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 50%; border: 1px solid var(--tr-border);
  background: var(--tr-surface-card);
}
.trame-funnel__etapes [aria-current="step"] { color: var(--tr-text); }
.trame-funnel__etapes [aria-current="step"] .trame-funnel__num,
.trame-funnel__etapes .is-fait .trame-funnel__num {
  background: var(--tr-primary); border-color: transparent; color: #fff;
}

/* ---------- Panneaux ---------- */
.trame-funnel__panneau { border: 0; padding: 0; margin: 0 0 var(--tr-space-4xl); }
.trame-funnel__titre {
  padding: 0; margin: 0 0 var(--tr-space-md);
  font-family: var(--tr-font-display); font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);
  color: var(--tr-text); letter-spacing: var(--tr-tracking-tight);
}
.trame-funnel__titre:focus-visible { outline-offset: 6px; }
.trame-funnel__aide { margin-bottom: var(--tr-space-3xl); }

/* ---------- Sélection de services ---------- */
.trame-funnel__services { display: grid; gap: var(--tr-space-lg); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.trame-funnel__service {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: var(--tr-space-xl);
  background: var(--tr-surface-card);
  border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-lg);
  cursor: pointer;
  transition: border-color var(--tr-base) var(--tr-ease), background-color var(--tr-base) var(--tr-ease);
}
.trame-funnel__service input { position: absolute; opacity: 0; width: 0; height: 0; }
.trame-funnel__service:hover { border-color: var(--tr-border-hover); }
.trame-funnel__service:has(input:checked) {
  border-color: var(--tr-accent, var(--tr-primary));
  background: var(--tr-accent-wash, var(--tr-primary-wash));
}
.trame-funnel__service:has(input:focus-visible) { outline: 2px solid var(--tr-primary); outline-offset: 3px; }
.trame-funnel__service-titre { color: var(--tr-text); font-weight: 500; }
.trame-funnel__service-resume { color: var(--tr-text-muted); font-size: var(--tr-text-sm); }
.trame-funnel__service-tarif {
  margin-top: 6px; font-family: var(--tr-font-mono); font-size: 11px;
  color: var(--tr-accent, var(--tr-primary));
}

/* ---------- Choix et champs ---------- */
.trame-funnel__colonnes { display: grid; gap: var(--tr-space-xl) var(--tr-space-3xl); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.trame-funnel__colonnes .trame-mono { margin-bottom: var(--tr-space-md); }

.trame-funnel__radio {
  display: flex; align-items: center; gap: var(--tr-space-md);
  padding: var(--tr-space-md) var(--tr-space-lg); margin-bottom: var(--tr-space-sm);
  background: var(--tr-surface-section); border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-md); cursor: pointer; font-size: var(--tr-text-sm);
  transition: border-color var(--tr-base) var(--tr-ease);
}
.trame-funnel__radio:hover { border-color: var(--tr-border-hover); }
.trame-funnel__radio:has(input:checked) { border-color: var(--tr-primary); color: var(--tr-text); }
.trame-funnel__radio input { accent-color: var(--tr-primary); }

.trame-champ { display: block; margin-bottom: var(--tr-space-lg); }
.trame-champ > span {
  display: block; margin-bottom: var(--tr-space-sm);
  font-family: var(--tr-font-body); font-size: 13px; color: var(--tr-text-muted);
}
.trame-champ input,
.trame-funnel__textarea {
  width: 100%; padding: 15px 18px;
  background: var(--tr-surface-section);
  border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-lg);
  color: var(--tr-text); font-family: var(--tr-font-body); font-size: 15px;
}
.trame-champ input:focus,
.trame-funnel__textarea:focus {
  outline: none; border-color: var(--tr-primary);
  box-shadow: 0 0 0 1px var(--tr-primary), 0 0 14px rgba(var(--tr-primary-rgb, 255,95,31), 0.22);
}
.trame-funnel__textarea { resize: vertical; }

/* Piège à robots : masqué visuellement sans display:none, que certains
   robots savent détecter. */
.trame-nectar { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Pied et confirmation ---------- */
.trame-funnel__pied {
  display: flex; align-items: center; gap: var(--tr-space-lg); flex-wrap: wrap;
  padding-top: var(--tr-space-2xl); border-top: 1px solid var(--tr-border);
}
.trame-funnel__pied [data-funnel="suivant"],
.trame-funnel__pied [data-funnel="envoyer"] { margin-left: auto; }
.trame-funnel__erreur { margin: 0; color: var(--tr-rose); font-size: var(--tr-text-sm); }

.trame-funnel__confirmation { text-align: center; padding-block: var(--tr-space-5xl); }
.trame-funnel__coche {
  display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto var(--tr-space-2xl);
  border-radius: 50%; background: var(--tr-primary); color: #fff; box-shadow: var(--tr-glow);
}
.trame-funnel__resultat { max-width: 46ch; margin: var(--tr-space-lg) auto var(--tr-space-3xl); }

/* ==========================================================================
   Mouvement
   Règle de conduite : l'animation sert à guider le regard, jamais à décorer.
   Tout est désactivé si l'utilisateur a demandé moins de mouvement.
   ========================================================================== */

/* Conteneur posé par le plugin autour de chaque bloc TRAME : il ne porte que
   les variables d'animation et ne doit rien changer à la mise en page. */
.trame-anim { display: block; }

/* ---------- Apparition au défilement ----------

   Une seule transition, pilotée par des variables. Le « type » d'animation
   n'est qu'un jeu de valeurs de départ : pas de bibliothèque de keyframes à
   maintenir, et chaque paramètre reste réglable depuis l'éditeur.

   Les variables héritent : les poser sur une section suffit à régler tous
   ses enfants.
   -------------------------------------------------------------------- */
[data-reveal] {
  opacity: var(--tr-anim-opacite, 0);
  transform:
    translate3d(var(--tr-anim-x, 0px), var(--tr-anim-y, 18px), 0)
    scale(var(--tr-anim-echelle, 1))
    rotate(var(--tr-anim-rotation, 0deg));
  filter: blur(var(--tr-anim-flou, 0px));
  transition:
    opacity var(--tr-anim-duree, 620ms) var(--tr-anim-ease, var(--tr-ease-out)),
    transform var(--tr-anim-duree, 620ms) var(--tr-anim-ease, var(--tr-ease-out)),
    filter var(--tr-anim-duree, 620ms) var(--tr-anim-ease, var(--tr-ease-out));
  transition-delay: calc(var(--tr-anim-delai, 0ms) + var(--tr-reveal-delai, 0ms));
  will-change: opacity, transform;
}
[data-reveal].est-visible {
  opacity: 1;
  transform: none;
  filter: none;
}
/* Une fois révélé, on libère la mémoire graphique. */
[data-reveal].est-fini { will-change: auto; }

/* ---------- Effets au survol, également pilotés par variables ---------- */
.trame-card,
.trame-produit,
.trame-theme-card,
.trame-ventes__item,
.trame-une-card,
.trame-catalogue__fiche,
.trame-dp-hero__best {
  transition:
    transform var(--tr-survol-duree, 320ms) var(--tr-ease),
    border-color var(--tr-survol-duree, 320ms) var(--tr-ease),
    box-shadow var(--tr-survol-duree, 320ms) var(--tr-ease),
    background-color var(--tr-survol-duree, 320ms) var(--tr-ease);
}
.trame-card:hover,
.trame-produit:hover,
.trame-theme-card:hover,
.trame-ventes__item:hover,
.trame-une-card:hover,
.trame-catalogue__fiche:hover,
.trame-dp-hero__best:hover {
  transform:
    translateY(var(--tr-survol-y, -3px))
    scale(var(--tr-survol-echelle, 1))
    rotate(var(--tr-survol-rotation, 0deg));
  box-shadow: var(--tr-survol-ombre, none);
}

/* Zoom du visuel au survol de la carte. */
.trame-card__media img,
.trame-produit__img,
.trame-blog-card__media img,
.trame-une-card__img {
  transition: transform var(--tr-survol-duree-img, 620ms) var(--tr-ease);
}
.trame-card:hover .trame-card__media img,
.trame-produit:hover .trame-produit__img,
.trame-blog-card:hover .trame-blog-card__media img,
.trame-une-card:hover .trame-une-card__img {
  transform: scale(var(--tr-survol-zoom-img, 1.05));
}

/* Boutons : élévation et flèche qui avance. */
.trame-btn {
  transition:
    transform var(--tr-survol-duree, 320ms) var(--tr-ease),
    box-shadow var(--tr-survol-duree, 320ms) var(--tr-ease),
    background-color var(--tr-survol-duree, 320ms) var(--tr-ease),
    border-color var(--tr-survol-duree, 320ms) var(--tr-ease),
    color var(--tr-survol-duree, 320ms) var(--tr-ease);
}
.trame-btn:hover { transform: translateY(var(--tr-survol-btn-y, -2px)); }
.trame-btn svg { transition: transform var(--tr-survol-duree, 320ms) var(--tr-ease); }
.trame-btn:hover svg { transform: translateX(var(--tr-survol-btn-fleche, 3px)); }

/* Pastilles et icônes : légère mise en avant. */
.trame-flip__icone,
.trame-avantage__icone,
.trame-theme-card__icone,
.trame-catalogue__pastille {
  transition: transform var(--tr-survol-duree, 320ms) var(--tr-ease);
}
.trame-card:hover .trame-catalogue__pastille,
.trame-theme-card:hover .trame-theme-card__icone,
.trame-avantage:hover .trame-avantage__icone {
  transform: scale(var(--tr-survol-icone, 1.08)) rotate(var(--tr-survol-icone-rot, 0deg));
}

/* Soulignement animé des liens de section. */
.trame-lien-section { position: relative; }
.trame-lien-section::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 6px;
  height: 1px; background: currentColor;
  transform: scaleX(var(--tr-survol-souligne, 0)); transform-origin: left;
  transition: transform var(--tr-survol-duree, 320ms) var(--tr-ease);
}
.trame-lien-section:hover::after { transform: scaleX(1); }

/* Pulsation du point « Live » et des badges en direct. */
@keyframes trame-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.25); }
}
.trame-hero-accueil__point,
.trame-hero-accueil__live::before,
.trame-dp-hero__badge svg {
  animation: trame-pulse var(--tr-pulse-duree, 2.2s) var(--tr-ease) infinite;
}

/* Le respect de la préférence système reste non négociable : toute
   personnalisation d'animation s'efface devant elle. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .trame-card, .trame-produit, .trame-theme-card, .trame-ventes__item,
  .trame-une-card, .trame-catalogue__fiche, .trame-dp-hero__best, .trame-btn {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  .trame-hero-accueil__point,
  .trame-hero-accueil__live::before,
  .trame-dp-hero__badge svg { animation: none !important; }
}

/* ---------- Cartes ---------- */
.trame-card {
  transition:
    border-color var(--tr-base) var(--tr-ease),
    transform 420ms var(--tr-ease-out),
    box-shadow 420ms var(--tr-ease-out);
}
.trame-card:hover {
  transform: translateY(-6px);
  border-color: var(--tr-border-hover);
  box-shadow: var(--tr-shadow-lg);
}
.trame-card__media { overflow: hidden; }
.trame-card__media img {
  transition: transform 780ms var(--tr-ease-out);
}
.trame-card:hover .trame-card__media img { transform: scale(1.05); }

/* Le titre glisse légèrement vers l'accent : signale le clic sans souligner. */
.trame-card__title a { transition: color var(--tr-base) var(--tr-ease); }
.trame-card:hover .trame-card__title a { color: var(--tr-text-accent); }

/* ---------- Boutons ---------- */
.trame-btn {
  transition:
    background-color var(--tr-base) var(--tr-ease),
    border-color var(--tr-base) var(--tr-ease),
    transform 180ms var(--tr-ease-out),
    box-shadow var(--tr-base) var(--tr-ease);
}
.trame-btn:hover { transform: translateY(-2px); }
.trame-btn:active { transform: translateY(0); transition-duration: 60ms; }
.trame-btn--primary:hover { box-shadow: 0 0 40px rgba(var(--tr-primary-rgb, 255,95,31), 0.55), 0 6px 20px rgba(0,0,0,0.4); }

/* La flèche avance au survol — micro-signal de direction. */
.trame-btn svg { transition: transform 320ms var(--tr-ease-out); }
.trame-btn:hover svg { transform: translateX(4px); }

/* ---------- Badges, tags, étiquettes ---------- */
.trame-tag { transition: background-color var(--tr-base) var(--tr-ease), border-color var(--tr-base) var(--tr-ease), color var(--tr-base) var(--tr-ease); }
.trame-tag:hover { border-color: var(--tr-border-hover); color: var(--tr-text); }

/* ---------- Chiffres clés ---------- */
.trame-stat__value { transition: color var(--tr-base) var(--tr-ease); }

/* ---------- Accordéon FAQ ---------- */
.trame-faq { transition: background-color var(--tr-base) var(--tr-ease), border-color var(--tr-base) var(--tr-ease); }
.trame-faq summary::after { transition: transform 280ms var(--tr-ease-out), color var(--tr-base) var(--tr-ease); display: inline-block; }
.trame-faq[open] summary::after { transform: rotate(180deg); }

/* ---------- Fenêtre modale ---------- */
.trame-modal[open] { animation: trame-modal-entree 320ms var(--tr-ease-out); }
.trame-modal[open]::backdrop { animation: trame-fondu 320ms var(--tr-ease-out); }
@keyframes trame-modal-entree {
  from { opacity: 0; transform: translateY(20px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes trame-fondu { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Étapes du funnel ---------- */
.trame-funnel__panneau:not([hidden]) { animation: trame-panneau 380ms var(--tr-ease-out); }
@keyframes trame-panneau {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}
.trame-funnel__num { transition: background-color 320ms var(--tr-ease), border-color 320ms var(--tr-ease), color 320ms var(--tr-ease); }
.trame-funnel__service { transition: border-color var(--tr-base) var(--tr-ease), background-color var(--tr-base) var(--tr-ease), transform 260ms var(--tr-ease-out); }
.trame-funnel__service:hover { transform: translateY(-3px); }

/* ---------- Liens de menu et de pied ---------- */
.trame-footer nav a { transition: color var(--tr-base) var(--tr-ease), transform 260ms var(--tr-ease-out); display: inline-block; }
.trame-footer nav a:hover { transform: translateX(3px); }

/* ---------- Respect du confort visuel ----------
   Ceci n'est pas une option : certaines personnes ont des troubles
   vestibulaires que le mouvement déclenche réellement. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .trame-card:hover,
  .trame-btn:hover,
  .trame-funnel__service:hover { transform: none; }
  .trame-card:hover .trame-card__media img { transform: none; }
  .trame-btn:hover svg { transform: none; }
  .trame-modal[open],
  .trame-modal[open]::backdrop,
  .trame-funnel__panneau:not([hidden]) { animation: none; }
  .trame-footer nav a:hover { transform: none; }
}

/* ---------- Conteneur des blocs dynamiques ---------- */
.trame-bloc { margin-block: var(--tr-space-5xl); }
.trame-bloc:first-child { margin-top: 0; }
.trame-bloc:last-child { margin-bottom: 0; }
/* Dans l'éditeur, le bloc doit respirer comme en front. */
.editor-styles-wrapper .trame-bloc { margin-block: var(--tr-space-3xl); }

/* ==========================================================================
   Article de blog
   ========================================================================== */
.trame-article__tete { padding-top: var(--tr-space-3xl); }
.trame-article__tete h1 { max-width: 22ch; margin-bottom: var(--tr-space-2xl); }
.trame-article__etiquettes { margin-bottom: var(--tr-space-xl); }
.trame-etiquettes a { color: inherit; }
.trame-etiquettes li:hover { border-color: var(--tr-border-hover); }

.trame-article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--tr-space-xl) var(--tr-space-3xl);
  padding-bottom: var(--tr-space-3xl);
}
.trame-article__auteur { display: flex; align-items: center; gap: var(--tr-space-md); }
.trame-avatar { border-radius: 50%; }
.trame-article__auteur strong { display: block; color: var(--tr-text); font-size: var(--tr-text-sm); font-weight: 500; }
.trame-article__auteur .trame-mono { display: block; margin: 0; }
.trame-article__infos { display: flex; flex-wrap: wrap; gap: var(--tr-space-xl); margin: 0; }
.trame-article__lu { color: var(--tr-text-accent); }

.trame-article__visuel img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--tr-radius-lg); margin-bottom: var(--tr-space-4xl);
}

.trame-article__corps { display: grid; gap: var(--tr-space-5xl); align-items: start; }
@media (min-width: 960px) {
  .trame-article__corps { grid-template-columns: minmax(0, 1fr) 300px; }
  /* La colonne suit la lecture sans jamais dépasser la hauteur d'écran. */
  .trame-article__aside { position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow-y: auto; }
}
.trame-article__contenu { max-width: 68ch; }

.trame-aside__bloc {
  padding: var(--tr-space-xl);
  margin-bottom: var(--tr-space-lg);
  background: var(--tr-surface-card);
  border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-lg);
}
.trame-aside__bloc h2 { font-size: var(--tr-text-lg); margin-bottom: var(--tr-space-sm); }
.trame-aside__bloc p { font-size: var(--tr-text-sm); }
.trame-aside__bloc .trame-mono { margin-bottom: var(--tr-space-md); }

.trame-newsletter { display: flex; flex-direction: column; gap: var(--tr-space-md); margin-top: var(--tr-space-lg); }
.trame-newsletter input {
  width: 100%; padding: 12px 16px;
  background: var(--tr-surface-section); border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-md); color: var(--tr-text); font-size: var(--tr-text-sm);
}
.trame-newsletter input:focus { outline: none; border-color: var(--tr-primary); }
.trame-newsletter .trame-btn { justify-content: center; }
.trame-newsletter__retour { margin: 0; font-size: var(--tr-text-xs); color: var(--tr-text-accent); }

.trame-progression { height: 4px; background: var(--tr-surface-section); border-radius: 999px; overflow: hidden; }
.trame-progression span { display: block; height: 100%; width: 0; background: var(--tr-primary); transition: width 120ms linear; }
.trame-aside__pourcent { margin: var(--tr-space-sm) 0 0; text-align: right; }

/* ---------- Corps rédactionnel ---------- */
.trame-prose h2 { font-size: var(--tr-text-2xl); margin: var(--tr-space-4xl) 0 var(--tr-space-lg); }
.trame-prose h3 { font-size: var(--tr-text-xl); margin: var(--tr-space-3xl) 0 var(--tr-space-md); }
.trame-prose p { line-height: 1.75; }
.trame-prose ul, .trame-prose ol { margin: 0 0 var(--tr-space-lg) var(--tr-space-xl); }
.trame-prose ul li { list-style: disc; margin-bottom: var(--tr-space-sm); }
.trame-prose ol li { list-style: decimal; margin-bottom: var(--tr-space-sm); }
.trame-prose img { border-radius: var(--tr-radius-lg); margin-block: var(--tr-space-2xl); }
.trame-prose blockquote {
  margin: var(--tr-space-3xl) 0; padding-left: var(--tr-space-xl);
  border-left: 3px solid var(--tr-primary);
  color: var(--tr-text); font-size: var(--tr-text-lg); line-height: 1.5;
}
.trame-prose blockquote p:last-child { margin-bottom: 0; }
.trame-prose code {
  padding: 2px 6px; border-radius: 6px;
  background: var(--tr-surface-card); border: 1px solid var(--tr-border);
  font-family: var(--tr-font-mono); font-size: 0.9em;
}
.trame-prose pre { padding: var(--tr-space-xl); overflow-x: auto; background: var(--tr-surface-card); border: 1px solid var(--tr-border); border-radius: var(--tr-radius-lg); }
.trame-prose pre code { padding: 0; border: 0; background: none; }

/* ---------- Partage ---------- */
.trame-partage {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--tr-space-lg);
  margin-top: var(--tr-space-5xl); padding-top: var(--tr-space-2xl);
  border-top: 1px solid var(--tr-border);
}
.trame-partage .trame-mono { margin: 0; }
.trame-partage__liens { display: flex; flex-wrap: wrap; gap: var(--tr-space-md); }
.trame-partage__retour { margin-left: auto; font-family: var(--tr-font-mono); font-size: var(--tr-text-xs); color: var(--tr-text-accent); }

/* ---------- Encadré auteur ---------- */
.trame-auteur-carte {
  display: flex; gap: var(--tr-space-xl); align-items: flex-start;
  margin-top: var(--tr-space-3xl); padding: var(--tr-space-2xl);
  background: var(--tr-surface-card); border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-lg);
}
.trame-auteur-carte__role { margin: 0 0 4px; color: var(--tr-text-accent); }
.trame-auteur-carte__nom { margin: 0 0 var(--tr-space-sm); color: var(--tr-text); font-weight: 500; }
.trame-auteur-carte__bio { margin: 0; font-size: var(--tr-text-sm); }

@media (max-width: 620px) {
  .trame-partage__retour { margin-left: 0; }
  .trame-auteur-carte { flex-direction: column; }
}

/* ==========================================================================
   Processus — chronologie reliée
   ========================================================================== */
.trame-processus { position: relative; display: flex; flex-direction: column; gap: var(--tr-space-2xl); }

/* Le fil qui relie les jetons. Tracé en pseudo-élément plutôt qu'en bordure :
   il doit s'arrêter au centre du premier et du dernier jeton, pas déborder. */
.trame-processus::before {
  content: ""; position: absolute; left: 39px; top: 40px; bottom: 40px; width: 1px;
  background: linear-gradient(180deg, var(--tr-border-accent), var(--tr-border) 50%, var(--tr-border-accent));
}

.trame-processus__etape {
  position: relative; display: flex; align-items: flex-start; gap: var(--tr-space-2xl);
}
.trame-processus__jeton {
  position: relative; z-index: 1; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 78px; height: 78px;
  background: var(--tr-surface-card);
  border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-lg);
  transition: border-color var(--tr-base) var(--tr-ease), background-color var(--tr-base) var(--tr-ease);
}
.trame-processus__num { font-family: var(--tr-font-mono); font-size: 13px; color: var(--tr-primary); }
.trame-processus__icone { color: var(--tr-text-muted); display: flex; }
.trame-processus__etape:hover .trame-processus__jeton { border-color: var(--tr-border-accent); background: var(--tr-card-hover); }
.trame-processus__etape:hover .trame-processus__icone { color: var(--tr-primary); }

.trame-processus__contenu { flex: 1 1 auto; min-width: 0; padding-top: var(--tr-space-md); }
.trame-processus__contenu h3 { font-size: var(--tr-text-lg); margin-bottom: 8px; }
.trame-processus__contenu p { margin: 0; font-size: var(--tr-text-sm); max-width: 78ch; }
.trame-processus__jalon { flex: none; padding-top: var(--tr-space-lg); margin: 0; color: var(--tr-text-muted); }

@media (max-width: 760px) {
  .trame-processus::before { left: 27px; }
  .trame-processus__jeton { width: 54px; height: 54px; }
  .trame-processus__etape { gap: var(--tr-space-lg); flex-wrap: wrap; }
  .trame-processus__jalon { padding-top: 0; padding-left: 70px; }
}

/* ==========================================================================
   Grille tarifaire
   ========================================================================== */
.trame-tarifs {
  display: grid; gap: var(--tr-space-xl);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: stretch;
}
.trame-tarif {
  position: relative; display: flex; flex-direction: column; gap: var(--tr-space-lg);
  padding: var(--tr-space-3xl) var(--tr-space-2xl);
  background: var(--tr-surface-card);
  border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-xl);
  transition: transform 380ms var(--tr-ease-out), border-color var(--tr-base) var(--tr-ease);
}
.trame-tarif:hover { transform: translateY(-6px); border-color: var(--tr-border-hover); }

/* Le plan recommandé garde le fond sombre des autres : c'est la bordure
   orange, le halo et le bouton plein qui le distinguent. Un aplat orange
   inversait tous les contrastes de la carte et la rendait moins lisible que
   ses voisines — l'inverse de l'effet recherché. */
.trame-tarif--vedette {
  border-color: var(--tr-primary);
  box-shadow: 0 0 70px rgba(var(--tr-primary-rgb, 255,95,31), 0.14);
}
.trame-tarif--vedette .trame-tarif__inclus svg { color: var(--tr-primary); }

.trame-tarif__populaire {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 16px; border-radius: var(--tr-radius-pill);
  background: var(--tr-primary); color: #fff; white-space: nowrap;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.trame-tarif__populaire::before { content: "\2605"; }

.trame-tarif__tag {
  align-self: flex-start;
  padding: 4px 11px; border-radius: var(--tr-radius-pill);
  border: 1px solid var(--tr-border); color: var(--tr-text-muted);
  font-size: var(--tr-text-xs);
}
.trame-tarif__nom { margin: 0; color: var(--tr-text); font-family: var(--tr-font-body); font-size: var(--tr-text-lg); font-weight: 600; letter-spacing: 0; text-transform: none; }
.trame-tarif__prix { margin: 0; display: flex; align-items: baseline; gap: var(--tr-space-sm); flex-wrap: wrap; }
.trame-tarif__prix strong {
  font-family: var(--tr-font-display); font-weight: 700;
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  color: var(--tr-text); letter-spacing: var(--tr-tracking-tight);
}
.trame-tarif__description { margin: 0; font-size: var(--tr-text-sm); color: var(--tr-text-muted); }
.trame-tarif__inclus { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--tr-space-md); margin-top: var(--tr-space-md); }
.trame-tarif__inclus li {
  display: flex; align-items: flex-start; gap: var(--tr-space-md);
  font-size: var(--tr-text-sm); color: var(--tr-text);
}
.trame-tarif__inclus svg { flex: none; margin-top: 3px; color: var(--tr-text-muted); }
.trame-tarif .trame-btn { margin-top: auto; }

/* En-tête et note de la section tarifaire */
.trame-tarifs__entete { text-align: center; margin-bottom: var(--tr-space-4xl); }
.trame-tarifs__titre { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); margin: var(--tr-space-md) 0 var(--tr-space-lg); }
.trame-tarifs__titre span { display: block; color: var(--tr-primary); }
.trame-tarifs__lead { max-width: 56ch; margin: 0 auto; color: var(--tr-text-muted); }
.trame-tarifs__note { text-align: center; color: var(--tr-text-muted); margin-top: var(--tr-space-3xl); }

/* Nombre de colonnes choisi dans le bloc, avec repli automatique. */
@media (min-width: 900px) {
  .trame-tarifs--2 { grid-template-columns: repeat(2, 1fr); }
  .trame-tarifs--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1180px) {
  .trame-tarifs--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   FAQ — liste à filets
   Volontairement pas des cartes : la maquette pose des lignes séparées par
   un filet, ce qui allège la page quand il y a six questions ou plus.
   ========================================================================== */
.trame-faq-liste { display: flex; flex-direction: column; max-width: 780px; margin-inline: auto; }
.trame-faq-liste .trame-faq {
  margin: 0; padding: var(--tr-space-xl) 0;
  background: none; border: 0; border-bottom: 1px solid var(--tr-border);
  border-radius: 0;
}
.trame-faq-liste .trame-faq[open] { background: none; border-color: var(--tr-border); }
.trame-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--tr-space-lg);
  cursor: pointer; list-style: none;
  font-family: var(--tr-font-body); font-weight: 500; font-size: var(--tr-text-base);
  color: var(--tr-text);
}
.trame-faq summary::-webkit-details-marker { display: none; }
.trame-faq summary::after {
  content: "+"; float: none; flex: none;
  display: grid; place-items: center; width: 26px; height: 26px;
  border: 1px solid var(--tr-border); border-radius: 50%;
  font-family: var(--tr-font-mono); font-size: 15px; color: var(--tr-text-muted);
  transition: transform 280ms var(--tr-ease-out), color var(--tr-base) var(--tr-ease), border-color var(--tr-base) var(--tr-ease);
}
.trame-faq[open] summary::after { content: "\2212"; color: var(--tr-primary); border-color: var(--tr-border-accent); transform: rotate(180deg); }
.trame-faq p { margin: var(--tr-space-lg) 0 0; padding-right: 42px; color: var(--tr-text-muted); font-size: var(--tr-text-sm); }

/* ==========================================================================
   Page contact
   ========================================================================== */
.trame-contact { display: grid; gap: var(--tr-space-3xl); align-items: start; }
@media (min-width: 900px) { .trame-contact { grid-template-columns: minmax(0, 1fr) 320px; } }

.trame-contact__canaux { display: flex; flex-direction: column; gap: var(--tr-space-lg); }
.trame-contact__canal {
  display: flex; align-items: flex-start; gap: var(--tr-space-xl);
  padding: var(--tr-space-2xl);
  background: var(--tr-surface-card);
  border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-lg);
  color: var(--tr-text-muted);
  transition: border-color var(--tr-base) var(--tr-ease), transform 320ms var(--tr-ease-out);
}
.trame-contact__canal:hover { border-color: var(--tr-border-accent); transform: translateY(-3px); color: var(--tr-text-muted); }
.trame-contact__icone {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  border-radius: var(--tr-radius-md);
  background: var(--tr-primary-wash); color: var(--tr-primary);
}
.trame-contact__canal strong { display: block; color: var(--tr-text); font-weight: 500; margin-bottom: 4px; }
.trame-contact__canal span span { font-size: var(--tr-text-sm); }

@media (prefers-reduced-motion: reduce) {
  .trame-processus__etape:hover,
  .trame-tarif:hover,
  .trame-contact__canal:hover { transform: none; }
}

/* ==========================================================================
   Titre à deux lignes — seconde ligne en orange
   ========================================================================== */
.trame-titre-double { margin-bottom: var(--tr-space-xl); }
.trame-titre-double span { display: block; color: var(--tr-primary); }
.trame-titre-double--center { text-align: center; }

/* ==========================================================================
   Hero de page
   ========================================================================== */
.trame-page-hero { padding-block: var(--tr-space-4xl) var(--tr-space-3xl); }
.trame-page-hero h1 { font-size: clamp(2.5rem, 1.8rem + 3.4vw, 4rem); margin-bottom: var(--tr-space-xl); }
.trame-page-hero h1 span { display: block; color: var(--tr-primary); }
.trame-page-hero__lead { max-width: 52ch; font-size: var(--tr-text-lg); margin-bottom: var(--tr-space-3xl); }
.trame-page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--tr-space-lg); margin-bottom: var(--tr-space-5xl); }

.trame-page-hero__stats {
  display: grid; gap: var(--tr-space-lg);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.trame-stat-carte {
  display: flex; align-items: center; gap: var(--tr-space-lg);
  padding: var(--tr-space-xl);
  background: var(--tr-surface-card);
  border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-lg);
  transition: border-color var(--tr-base) var(--tr-ease), transform 320ms var(--tr-ease-out);
}
.trame-stat-carte:hover { border-color: var(--tr-border-accent); transform: translateY(-3px); }
.trame-stat-carte__icone {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px;
  border-radius: var(--tr-radius-md);
  background: var(--tr-primary-wash); color: var(--tr-primary);
}
.trame-stat-carte strong {
  display: block; font-family: var(--tr-font-display); font-weight: 700;
  font-size: var(--tr-text-2xl); color: var(--tr-text); line-height: 1.1;
}
.trame-stat-carte .trame-mono { display: block; margin: 2px 0 0; }

/* ==========================================================================
   Pourquoi nous — arguments et chiffres
   ========================================================================== */
.trame-arguments { display: grid; gap: var(--tr-space-5xl); align-items: start; }
@media (min-width: 960px) { .trame-arguments { grid-template-columns: 1fr 1fr; } }

.trame-arguments__liste { display: flex; flex-direction: column; gap: var(--tr-space-2xl); margin-top: var(--tr-space-3xl); }
.trame-arguments__liste li { display: flex; align-items: flex-start; gap: var(--tr-space-lg); }
.trame-arguments__icone {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--tr-primary-wash); color: var(--tr-primary);
}
.trame-arguments__liste strong { display: block; color: var(--tr-text); font-weight: 500; margin-bottom: 6px; }
.trame-arguments__liste strong + span { display: block; font-size: var(--tr-text-sm); }

.trame-arguments__chiffres { display: grid; gap: var(--tr-space-lg); grid-template-columns: 1fr 1fr; }
.trame-chiffre-carte {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--tr-space-5xl);
  min-height: 230px; padding: var(--tr-space-2xl);
  background: var(--tr-surface-card);
  border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-lg);
  transition: border-color var(--tr-base) var(--tr-ease);
}
.trame-chiffre-carte:hover { border-color: var(--tr-border-accent); }
.trame-chiffre-carte__valeur {
  font-family: var(--tr-font-display); font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  color: var(--tr-primary); line-height: 1;
}
.trame-chiffre-carte__pied strong { display: block; color: var(--tr-text); font-weight: 500; font-size: var(--tr-text-sm); }
.trame-chiffre-carte__pied .trame-mono { display: block; margin: 4px 0 0; }

@media (max-width: 620px) { .trame-arguments__chiffres { grid-template-columns: 1fr; } }

/* ==========================================================================
   Catalogue de services
   ========================================================================== */
.trame-catalogue > h2 { margin-bottom: var(--tr-space-md); }
.trame-catalogue__lead { max-width: 56ch; margin-bottom: var(--tr-space-2xl); }

/* Onglets de catégorie */
.trame-catalogue__onglets {
  display: flex; flex-wrap: wrap; gap: var(--tr-space-sm);
  margin-bottom: var(--tr-space-3xl);
}
.trame-catalogue__onglet {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; border: 1px solid var(--tr-border);
  background: var(--tr-surface-card); color: var(--tr-text-muted);
  transition: color var(--tr-base) var(--tr-ease), border-color var(--tr-base) var(--tr-ease), background var(--tr-base) var(--tr-ease);
}
.trame-catalogue__onglet svg { opacity: .7; }
.trame-catalogue__onglet[aria-pressed="true"] {
  color: var(--tr-primary); border-color: var(--tr-primary);
  background: var(--tr-primary-wash);
}
.trame-catalogue__onglet[aria-pressed="true"] svg { opacity: 1; }

/* Bannière de catégorie */
.trame-catalogue__banniere {
  display: flex; align-items: center; gap: var(--tr-space-lg);
  margin-bottom: var(--tr-space-2xl);
  padding-bottom: var(--tr-space-xl);
  border-bottom: 1px solid var(--tr-border);
}
.trame-catalogue__banniere-icone {
  display: grid; place-items: center; flex: none; width: 52px; height: 52px;
  border-radius: var(--tr-radius-lg);
  background: var(--tr-primary-wash);
  border: 1px solid var(--tr-primary);
  color: var(--tr-primary);
}
.trame-catalogue__banniere-texte { flex: 1 1 auto; }
.trame-catalogue__banniere-texte h3 { font-size: var(--tr-text-2xl); margin: 0 0 2px; }
.trame-catalogue__banniere-texte .trame-mono { color: var(--tr-text-muted); }
.trame-catalogue__compteur {
  flex: none; padding: 6px 14px; border-radius: var(--tr-radius-pill);
  background: var(--tr-surface-card); border: 1px solid var(--tr-border);
  color: var(--tr-text-muted); white-space: nowrap;
}

.trame-catalogue__fiche {
  margin-bottom: var(--tr-space-3xl);
  background: var(--tr-surface-card);
  border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-xl);
  overflow: hidden;
  transition: border-color var(--tr-base) var(--tr-ease);
}
.trame-catalogue__fiche:hover { border-color: var(--tr-accent, var(--tr-primary)); }

.trame-catalogue__visuel { position: relative; }
.trame-catalogue__visuel img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; }
.trame-catalogue__visuel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(19,19,31,0) 40%, rgba(19,19,31,0.96) 100%);
}

.trame-catalogue__entete {
  position: relative; z-index: 1; display: flex; align-items: center; gap: var(--tr-space-md);
  padding: var(--tr-space-xl) var(--tr-space-2xl) 0;
  margin-top: -56px;
}
.trame-catalogue__pastille {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px;
  border-radius: var(--tr-radius-md);
  background: var(--tr-accent-wash, var(--tr-primary-wash));
  border: 1px solid var(--tr-accent, var(--tr-primary));
  color: var(--tr-accent, var(--tr-primary));
}
.trame-catalogue__entete h3 { font-size: var(--tr-text-xl); margin: 0; }

.trame-catalogue__corps {
  display: grid; gap: var(--tr-space-3xl);
  padding: var(--tr-space-2xl);
}
@media (min-width: 900px) { .trame-catalogue__corps { grid-template-columns: minmax(0, 1fr) 280px; } }
.trame-catalogue__accroche { max-width: 72ch; font-size: var(--tr-text-sm); margin-bottom: var(--tr-space-2xl); }
.trame-catalogue__corps .trame-mono { margin-bottom: var(--tr-space-lg); }
.trame-catalogue__aside { display: flex; flex-direction: column; gap: var(--tr-space-md); }
.trame-catalogue__aside .trame-encadre { padding: var(--tr-space-lg); }

/* ==========================================================================
   Contact rapide
   ========================================================================== */
.trame-contact-rapide { text-align: center; padding-block: var(--tr-space-4xl); }
.trame-contact-rapide h2 { font-size: clamp(2rem, 1.5rem + 2.6vw, 3.25rem); }
.trame-contact-rapide__lead { max-width: 54ch; margin: 0 auto var(--tr-space-4xl); }

.trame-contact-rapide__form {
  max-width: 680px; margin-inline: auto; text-align: left;
  display: flex; flex-direction: column; gap: var(--tr-space-lg);
  padding: var(--tr-space-3xl);
  background: var(--tr-surface-card);
  border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-xl);
}
.trame-contact-rapide__duo { display: grid; gap: var(--tr-space-lg); grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .trame-contact-rapide__duo { grid-template-columns: 1fr; } }

.trame-contact-rapide__form input,
.trame-contact-rapide__form textarea {
  width: 100%; padding: 15px 18px;
  background: var(--tr-surface-section);
  border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-lg);
  color: var(--tr-text); font-family: var(--tr-font-body); font-size: 15px;
  transition: border-color var(--tr-base) var(--tr-ease), box-shadow var(--tr-base) var(--tr-ease);
}
.trame-contact-rapide__form input:focus,
.trame-contact-rapide__form textarea:focus {
  outline: none; border-color: var(--tr-primary);
  box-shadow: 0 0 0 1px var(--tr-primary), 0 0 16px rgba(var(--tr-primary-rgb, 255,95,31), 0.22);
}
.trame-contact-rapide__form textarea { resize: vertical; }
.trame-contact-rapide__retour { margin: 0; font-size: var(--tr-text-sm); color: var(--tr-text-accent); }

.trame-contact-rapide__garanties {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tr-space-2xl);
  margin-top: var(--tr-space-2xl);
}
.trame-contact-rapide__garanties li {
  display: flex; align-items: center; gap: var(--tr-space-sm);
  font-size: var(--tr-text-sm); color: var(--tr-text-muted);
}
.trame-contact-rapide__garanties svg { color: var(--tr-primary); }

@media (prefers-reduced-motion: reduce) {
  .trame-stat-carte:hover { transform: none; }
}

/* ==========================================================================
   Widget Titre TRAME
   Ces classes sont les cibles des contrôles de style d'Elementor.
   Les renommer casserait la mise en forme des pages déjà construites.
   ========================================================================== */
.trame-titre-w { margin-block: var(--tr-space-2xl); }

.trame-titre-w__surtitre {
  display: flex; align-items: center; gap: var(--tr-space-md);
  margin: 0 0 var(--tr-space-lg);
  font-family: var(--tr-font-mono);
  font-size: var(--tr-text-xs);
  font-weight: 500;
  letter-spacing: var(--tr-tracking-wide);
  text-transform: uppercase;
  color: var(--tr-text-accent);
}
.trame-titre-w__trait { display: block; width: 28px; height: 1px; flex: none; background: currentColor; }

/* Centré ou aligné à droite, les traits doivent suivre le texte. */
.trame-titre-w--center .trame-titre-w__surtitre { justify-content: center; }
.trame-titre-w--right .trame-titre-w__surtitre { justify-content: flex-end; }
.trame-titre-w--right .trame-titre-w__trait:last-child,
.trame-titre-w--left .trame-titre-w__trait:last-child { display: none; }
.trame-titre-w--right .trame-titre-w__trait:first-child { display: none; }
.trame-titre-w--right .trame-titre-w__surtitre .trame-titre-w__trait:last-child { display: block; }

.trame-titre-w__titre {
  margin: 0;
  font-family: var(--tr-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 2.6vw, 3.25rem);
  line-height: var(--tr-leading-tight);
  letter-spacing: var(--tr-tracking-tight);
  color: var(--tr-text);
}
.trame-titre-w__ligne1 { color: var(--tr-text); }
.trame-titre-w__ligne2 { display: block; color: var(--tr-primary); }

/* Centré, la largeur maximale doit rester centrée elle aussi. */
.trame-titre-w--center .trame-titre-w__titre { margin-inline: auto; }
.trame-titre-w--right .trame-titre-w__titre { margin-left: auto; }

/* ==========================================================================
   Hero d'accueil
   ========================================================================== */
.trame-hero-accueil { display: grid; gap: var(--tr-space-5xl); align-items: center; padding-block: var(--tr-space-5xl); }
@media (min-width: 1024px) { .trame-hero-accueil { grid-template-columns: 1.05fr 0.95fr; } }

.trame-hero-accueil__badge {
  display: inline-flex; align-items: center; gap: var(--tr-space-sm);
  margin: 0 0 var(--tr-space-2xl);
  padding: 8px 16px;
  border: 1px solid var(--tr-border); border-radius: var(--tr-radius-pill);
  background: var(--tr-surface-card);
  font-family: var(--tr-font-mono); font-size: var(--tr-text-xs); color: var(--tr-text-accent);
}
.trame-hero-accueil__point { width: 7px; height: 7px; border-radius: 50%; background: var(--tr-primary); box-shadow: 0 0 8px var(--tr-primary); }

.trame-hero-accueil__titre {
  font-size: clamp(2.75rem, 2rem + 3.6vw, 4.5rem);
  line-height: 1.02; margin-bottom: var(--tr-space-xl);
}
.trame-hero-accueil__titre span { color: var(--tr-primary); }

/* ---------- Mots en rotation dans le titre ----------

   Tous les mots occupent la même cellule de grille : la largeur se cale sur
   le plus long, donc le reste de la phrase ne bouge pas d'un pixel quand le
   mot change. Une position absolue aurait fait sauter la ligne.
   -------------------------------------------------------------------- */
.trame-mots {
  display: inline-grid;
  grid-template-areas: "mot";
  vertical-align: bottom;
  overflow: hidden;
}
.trame-mots__mot {
  grid-area: mot;
  color: var(--tr-primary);
  opacity: 0;
  transform: translateY(var(--tr-mots-distance, 0.5em));
  transition:
    opacity var(--tr-mots-transition, 480ms) var(--tr-ease-out),
    transform var(--tr-mots-transition, 480ms) var(--tr-ease-out);
}
.trame-mots__mot.est-actif { opacity: 1; transform: none; }
/* Le mot qui s'en va repart dans l'autre sens : la lecture reste continue. */
.trame-mots__mot.est-sortant {
  opacity: 0;
  transform: translateY(calc(-1 * var(--tr-mots-distance, 0.5em)));
}

/* Sans JavaScript, ou en cas de mouvement réduit, seul le premier mot
   s'affiche — les synonymes ne portent aucune information supplémentaire. */
.trame-mots:not([data-mots-actif]) .trame-mots__mot:first-child { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .trame-mots__mot { transition: none; }
  .trame-mots__mot:not(:first-child) { display: none; }
  .trame-mots__mot:first-child { opacity: 1; transform: none; }
}
.trame-hero-accueil__lead { max-width: 46ch; font-size: var(--tr-text-lg); margin-bottom: var(--tr-space-3xl); }
.trame-hero-accueil__actions { display: flex; flex-wrap: wrap; gap: var(--tr-space-lg); margin-bottom: var(--tr-space-5xl); }

/* Chiffres du hero en cartes. auto-fit : en ajouter un sixième replie la
   grille sur deux rangées au lieu d'écraser les cinq premiers. */
.trame-hero-accueil__stats {
  display: grid; gap: var(--tr-space-md);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  padding-top: var(--tr-space-2xl);
  border-top: 1px solid var(--tr-border);
}
.trame-hero-accueil__stat {
  padding: var(--tr-space-lg);
  border-radius: var(--tr-radius-lg);
  background: var(--tr-surface-card);
  border: 1px solid var(--tr-border);
  transition:
    transform var(--tr-survol-duree, 320ms) var(--tr-ease),
    border-color var(--tr-survol-duree, 320ms) var(--tr-ease),
    box-shadow var(--tr-survol-duree, 320ms) var(--tr-ease);
}
.trame-hero-accueil__stat:hover {
  border-color: var(--tr-primary);
  transform: translateY(var(--tr-survol-y, -3px));
  box-shadow: var(--tr-survol-ombre, none);
}
.trame-hero-accueil__stat strong { display: block; font-family: var(--tr-font-display); font-weight: 700; font-size: var(--tr-text-2xl); color: var(--tr-text); line-height: 1.05; }
.trame-hero-accueil__stat .trame-mono { display: block; margin-top: 4px; }
.trame-hero-accueil__stat-detail { display: block; font-size: 11px; color: var(--tr-primary); margin-top: 3px; }

.trame-hero-accueil__media { position: relative; border-radius: var(--tr-radius-xl); overflow: hidden; border: 1px solid var(--tr-border); }
.trame-hero-accueil__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.trame-hero-accueil__carte {
  position: absolute; left: var(--tr-space-xl); right: var(--tr-space-xl); bottom: var(--tr-space-xl);
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--tr-space-lg);
  background: rgba(6, 6, 14, 0.82); backdrop-filter: blur(8px);
  border: 1px solid var(--tr-border); border-radius: var(--tr-radius-lg);
}
.trame-hero-accueil__carte-label { color: var(--tr-text-accent); }
.trame-hero-accueil__carte-titre { color: var(--tr-text); font-weight: 500; }
.trame-hero-accueil__live {
  position: absolute; top: var(--tr-space-lg); right: var(--tr-space-lg);
  padding: 4px 12px; border: 1px solid var(--tr-border-accent); border-radius: var(--tr-radius-pill);
  font-family: var(--tr-font-mono); font-size: 11px; color: var(--tr-text-accent);
}
.trame-hero-accueil__live::before { content: "● "; }

/* ==========================================================================
   Section à propos
   ========================================================================== */
.trame-apropos { display: grid; gap: var(--tr-space-5xl); align-items: center; padding-block: var(--tr-space-4xl); }
@media (min-width: 1024px) { .trame-apropos { grid-template-columns: 1fr 1fr; } }

.trame-apropos__para { color: var(--tr-text-muted); margin-bottom: var(--tr-space-lg); }
.trame-apropos__points { display: flex; flex-direction: column; gap: var(--tr-space-md); margin: var(--tr-space-2xl) 0; }
.trame-apropos__points li { display: flex; align-items: center; gap: var(--tr-space-md); color: var(--tr-text); font-size: var(--tr-text-sm); }
.trame-apropos__points svg { color: var(--tr-primary); flex: none; }
.trame-apropos__lien { display: inline-flex; align-items: center; gap: var(--tr-space-sm); font-family: var(--tr-font-mono); font-size: var(--tr-text-sm); color: var(--tr-text-accent); }
.trame-apropos__lien svg { transition: transform 320ms var(--tr-ease-out); }
.trame-apropos__lien:hover svg { transform: translateX(4px); }

.trame-apropos__visuel { position: relative; }
.trame-apropos__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--tr-radius-xl); }
.trame-apropos__badge {
  position: absolute; left: var(--tr-space-xl); bottom: calc(var(--tr-space-3xl) * -1);
  display: flex; align-items: flex-start; gap: var(--tr-space-md);
  max-width: 280px; padding: var(--tr-space-lg);
  background: var(--tr-surface-card); border: 1px solid var(--tr-border); border-radius: var(--tr-radius-lg);
  box-shadow: var(--tr-shadow-lg);
}
.trame-apropos__badge-icone { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: var(--tr-radius-md); background: var(--tr-primary-wash); color: var(--tr-primary); }
.trame-apropos__badge strong { display: block; color: var(--tr-text); font-weight: 500; font-size: var(--tr-text-sm); margin-bottom: 2px; }
.trame-apropos__badge span span { font-size: var(--tr-text-xs); color: var(--tr-text-muted); }
@media (max-width: 1023px) { .trame-apropos__badge { position: static; margin-top: var(--tr-space-lg); max-width: none; } }

/* ==========================================================================
   Bandeau de technologies
   ========================================================================== */
.trame-technos { overflow: hidden; padding-block: var(--tr-space-xl); border-block: 1px solid var(--tr-border); }
.trame-technos__piste { display: flex; align-items: center; gap: var(--tr-space-2xl); flex-wrap: wrap; justify-content: center; }
.trame-technos__item { font-family: var(--tr-font-mono); font-size: var(--tr-text-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tr-text-muted); white-space: nowrap; }
.trame-technos__sep { color: var(--tr-primary); }

/* ---------- Bandeau en mode logos clients ----------

   Les logos arrivent avec des proportions et des couleurs très différentes.
   Hauteur commune et largeur libre : c'est la seule contrainte qui les aligne
   sans en déformer aucun. La désaturation par défaut évite qu'un logo rouge
   vif écrase ses voisins ; la couleur revient au survol.
   -------------------------------------------------------------------- */
.trame-technos--logos .trame-technos__piste { gap: var(--tr-space-4xl); }
.trame-marque {
  display: inline-flex; align-items: center; flex: none;
  opacity: var(--tr-logo-opacite, 0.65);
  filter: grayscale(var(--tr-logo-gris, 1));
  transition:
    opacity var(--tr-survol-duree, 320ms) var(--tr-ease),
    filter var(--tr-survol-duree, 320ms) var(--tr-ease),
    transform var(--tr-survol-duree, 320ms) var(--tr-ease);
}
.trame-marque:hover {
  opacity: 1;
  filter: grayscale(0);
  transform: scale(var(--tr-logo-survol, 1.06));
}
.trame-marque__img {
  height: var(--tr-logo-hauteur, 34px);
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .trame-marque { transition: none; }
  .trame-marque:hover { transform: none; }
}

/* Défilement : piste doublée qui glisse en boucle. */
.trame-technos--defile .trame-technos__piste { flex-wrap: nowrap; justify-content: flex-start; width: max-content; animation: trame-defile 40s linear infinite; }
.trame-technos--defile:hover .trame-technos__piste { animation-play-state: paused; }
@keyframes trame-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .trame-technos--defile .trame-technos__piste { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .trame-technos--defile .trame-technos__piste > span[aria-hidden] { display: none; }
}

/* ==========================================================================
   Boutique vitrine
   ========================================================================== */
.trame-boutique > h2 { margin-bottom: var(--tr-space-4xl); }
.trame-produit__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--tr-space-md); }
.trame-produit__note { display: inline-flex; align-items: center; gap: 4px; font-family: var(--tr-font-mono); font-size: 12px; color: var(--tr-primary); }
.trame-produit__prix { display: flex; align-items: center; justify-content: space-between; gap: var(--tr-space-md); flex-wrap: wrap; margin-top: var(--tr-space-sm); }
.trame-produit__montant strong { display: block; color: var(--tr-text); font-weight: 500; }
.trame-produit__barre { font-size: var(--tr-text-xs); color: var(--tr-text-muted); text-decoration: line-through; }
.trame-produit__acheter { padding: 9px 16px; font-size: var(--tr-text-sm); box-shadow: none; }
.trame-produit__dl { margin: var(--tr-space-md) 0 0; }
.trame-boutique__paiements { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--tr-space-md); margin-top: var(--tr-space-4xl); }
.trame-boutique__paiements .trame-mono { margin-right: var(--tr-space-sm); }

/* ==========================================================================
   DigiPack — Hero boutique
   ========================================================================== */
.trame-dp-hero {
  display: grid; gap: var(--tr-space-4xl); align-items: center;
  padding-block: var(--tr-space-4xl) var(--tr-space-3xl);
}
@media (min-width: 960px) { .trame-dp-hero { grid-template-columns: 1.05fr 0.95fr; } }

.trame-dp-hero__fil { color: var(--tr-text-muted); margin-bottom: var(--tr-space-2xl); }
.trame-dp-hero__fil span:last-child { color: var(--tr-text); }
.trame-dp-hero__entete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tr-space-md); margin-bottom: var(--tr-space-xl); }
.trame-dp-hero__badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--tr-radius-pill);
  background: var(--tr-primary-wash); border: 1px solid var(--tr-primary);
  color: var(--tr-primary); font-size: var(--tr-text-sm); font-family: var(--tr-font-mono);
}
.trame-dp-hero__titre { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem); line-height: 1.04; margin: 0 0 var(--tr-space-xl); }
.trame-dp-hero__titre span { display: block; color: var(--tr-primary); }
.trame-dp-hero__lead { max-width: 46ch; color: var(--tr-text-muted); margin-bottom: var(--tr-space-2xl); }
.trame-dp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tr-space-lg); }
.trame-dp-hero__reassurance {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--tr-text-muted); font-size: var(--tr-text-sm);
}
.trame-dp-hero__reassurance svg { color: var(--tr-primary); }

.trame-dp-hero__visuel { display: flex; flex-direction: column; gap: var(--tr-space-lg); }
.trame-dp-hero__best {
  display: block; text-decoration: none; color: inherit;
  padding: var(--tr-space-xl); border-radius: var(--tr-radius-xl);
  background: var(--tr-surface-card); border: 1px solid var(--tr-border);
  transition: border-color var(--tr-base) var(--tr-ease);
}
.trame-dp-hero__best:hover { border-color: var(--tr-primary); }
.trame-dp-hero__best-label { display: block; color: var(--tr-text-muted); margin-bottom: var(--tr-space-md); }
.trame-dp-hero__best-media { display: block; border-radius: var(--tr-radius-lg); overflow: hidden; margin-bottom: var(--tr-space-lg); }
.trame-dp-hero__best-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.trame-dp-hero__best-titre { display: block; font-weight: 600; font-size: var(--tr-text-lg); color: var(--tr-text); margin-bottom: var(--tr-space-sm); }
.trame-dp-hero__best-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--tr-space-md); }
.trame-dp-hero__best-prix { color: var(--tr-primary); }

.trame-dp-hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tr-space-md); }
.trame-dp-hero__stat {
  text-align: center; padding: var(--tr-space-lg) var(--tr-space-sm);
  border-radius: var(--tr-radius-lg); background: var(--tr-surface-card); border: 1px solid var(--tr-border);
}
.trame-dp-hero__stat strong { display: block; font-size: var(--tr-text-xl); color: var(--tr-text); }
.trame-dp-hero__stat .trame-mono { color: var(--tr-text-muted); font-size: var(--tr-text-xs); }

/* ==========================================================================
   DigiPack — Grille de produits
   ========================================================================== */
.trame-boutique-grille__barre {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--tr-space-lg); padding-bottom: var(--tr-space-lg);
  border-bottom: 1px solid var(--tr-border); margin-bottom: var(--tr-space-xl);
}
.trame-boutique-grille__tri select {
  appearance: none; -webkit-appearance: none;
  padding: 9px 38px 9px 16px; border-radius: var(--tr-radius-pill);
  background: var(--tr-surface-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FF5F1F' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid var(--tr-border); color: var(--tr-text);
  font-family: var(--tr-font-mono); font-size: var(--tr-text-sm); cursor: pointer;
}
.trame-boutique-grille__compteur { color: var(--tr-text-muted); margin: 0 0 var(--tr-space-2xl); }

.trame-produit {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--tr-surface-card); border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-xl); transition: border-color var(--tr-base) var(--tr-ease), transform var(--tr-base) var(--tr-ease);
}
.trame-produit:hover { border-color: var(--tr-primary); transform: translateY(-3px); }
.trame-produit__media { position: relative; aspect-ratio: 16 / 10; background: var(--tr-surface-card); overflow: hidden; }
.trame-produit__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trame-produit__badge { position: absolute; top: var(--tr-space-md); left: var(--tr-space-md); }
.trame-produit__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: var(--tr-space-sm); padding: var(--tr-space-xl); }
.trame-produit__cat { color: var(--tr-text-muted); }
.trame-produit__titre { font-size: var(--tr-text-lg); margin: 0; color: var(--tr-text); }
.trame-produit__desc { font-size: var(--tr-text-sm); color: var(--tr-text-muted); margin: 0; }
.trame-produit__pied { margin-top: auto; padding-top: var(--tr-space-md); border-top: 1px solid var(--tr-border); display: flex; align-items: center; justify-content: space-between; gap: var(--tr-space-md); flex-wrap: wrap; }
.trame-produit__pied .trame-produit__prix { display: flex; flex-direction: column; margin: 0; }
.trame-produit__pied .trame-produit__prix strong { color: var(--tr-text); font-weight: 600; }

/* ==========================================================================
   DigiPack — Meilleures ventes
   ========================================================================== */
.trame-ventes__entete { margin-bottom: var(--tr-space-3xl); }
.trame-ventes__entete h2 { margin: 0 0 var(--tr-space-sm); }
.trame-ventes__lead { color: var(--tr-text-muted); }
.trame-ventes__liste { display: grid; gap: var(--tr-space-lg); }
@media (min-width: 800px) { .trame-ventes__liste { grid-template-columns: repeat(3, 1fr); } }
.trame-ventes__item {
  display: flex; align-items: stretch; gap: var(--tr-space-md); text-decoration: none; color: inherit;
  padding: var(--tr-space-md); border-radius: var(--tr-radius-lg);
  background: var(--tr-surface-card); border: 1px solid var(--tr-border);
  transition: border-color var(--tr-base) var(--tr-ease);
}
.trame-ventes__item:hover { border-color: var(--tr-primary); }
.trame-ventes__media { flex: none; width: 84px; border-radius: var(--tr-radius-md); overflow: hidden; background: var(--tr-border); }
.trame-ventes__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trame-ventes__infos { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.trame-ventes__tete { display: flex; align-items: center; gap: var(--tr-space-sm); }
.trame-ventes__rang { color: var(--tr-primary); font-family: var(--tr-font-mono); font-weight: 700; }
.trame-ventes__tete .trame-mono { color: var(--tr-text-muted); font-size: var(--tr-text-xs); }
.trame-ventes__titre { font-weight: 600; color: var(--tr-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trame-ventes__pied { display: flex; align-items: center; gap: var(--tr-space-md); }
.trame-ventes__pied strong { color: var(--tr-primary); }
.trame-ventes__pied .trame-mono { color: var(--tr-text-muted); font-size: var(--tr-text-xs); }

/* ==========================================================================
   DigiPack — Offre groupée (bundle)
   ========================================================================== */
.trame-bundle__carte {
  position: relative; overflow: hidden;
  display: grid; gap: var(--tr-space-3xl); align-items: center;
  padding: var(--tr-space-4xl);
  border-radius: var(--tr-radius-xl);
  border: 1px solid var(--tr-primary);
  background: linear-gradient(135deg, rgba(255,95,31,0.08), var(--tr-surface-card) 60%);
}
@media (min-width: 900px) { .trame-bundle__carte { grid-template-columns: 1.4fr 0.9fr; } }
.trame-bundle__badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: var(--tr-radius-pill);
  border: 1px solid var(--tr-primary); color: var(--tr-primary);
  font-family: var(--tr-font-mono); font-size: var(--tr-text-xs); margin-bottom: var(--tr-space-lg);
}
.trame-bundle__titre { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); margin: 0 0 var(--tr-space-md); }
.trame-bundle__lead { color: var(--tr-text-muted); max-width: 54ch; margin-bottom: var(--tr-space-xl); }
.trame-bundle__inclus { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tr-space-sm) var(--tr-space-xl); }
@media (min-width: 620px) { .trame-bundle__inclus { grid-template-columns: 1fr 1fr; } }
.trame-bundle__inclus li { display: flex; align-items: center; gap: 8px; font-size: var(--tr-text-sm); color: var(--tr-text); }
.trame-bundle__inclus svg { color: var(--tr-primary); flex: none; }
.trame-bundle__achat { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: var(--tr-space-sm); }
.trame-bundle__ancien { color: var(--tr-text-muted); text-decoration: line-through; font-family: var(--tr-font-mono); }
.trame-bundle__prix { display: flex; flex-direction: column; align-items: flex-end; }
.trame-bundle__prix strong { font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.4rem); color: var(--tr-primary); line-height: 1; }
.trame-bundle__prix .trame-mono { color: var(--tr-text-muted); font-size: var(--tr-text-xs); margin-top: 4px; }
.trame-bundle__achat .trame-btn { margin-top: var(--tr-space-sm); }
.trame-bundle__economie { color: var(--tr-text-muted); font-size: var(--tr-text-xs); }
@media (max-width: 899px) { .trame-bundle__achat { text-align: left; align-items: flex-start; } .trame-bundle__prix { align-items: flex-start; } }

/* ==========================================================================
   DigiPack — Bandeau d'avantages
   ========================================================================== */
.trame-avantages { display: grid; gap: var(--tr-space-2xl); padding-block: var(--tr-space-2xl); }
@media (min-width: 700px) { .trame-avantages { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .trame-avantages { grid-template-columns: repeat(4, 1fr); } }
.trame-avantage { display: flex; align-items: flex-start; gap: var(--tr-space-md); }
.trame-avantage__icone {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  border-radius: var(--tr-radius-md); background: var(--tr-primary-wash);
  border: 1px solid var(--tr-primary); color: var(--tr-primary);
}
.trame-avantage__texte { display: flex; flex-direction: column; gap: 3px; }
.trame-avantage__texte strong { color: var(--tr-text); }
.trame-avantage__texte span { color: var(--tr-text-muted); font-size: var(--tr-text-sm); }

/* Nom du produit dans les avis clients */
.trame-temoignage__produit { color: var(--tr-primary); margin: var(--tr-space-md) 0 0; font-size: var(--tr-text-xs); }

/* ==========================================================================
   En-tête de section avec lien « Tout voir »
   ========================================================================== */
.trame-section-tete {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--tr-space-lg); margin-bottom: var(--tr-space-4xl);
}
.trame-section-tete h2 { margin: 0; }
.trame-section-tete__ligne2 { display: block; color: var(--tr-primary); }
.trame-section-tete__lead { max-width: 58ch; color: var(--tr-text-muted); margin: var(--tr-space-md) 0 0; }
.trame-lien-section {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 9px 18px; border-radius: var(--tr-radius-pill);
  border: 1px solid var(--tr-border); background: var(--tr-surface-card);
  color: var(--tr-text); font-size: var(--tr-text-sm); text-decoration: none;
  transition: border-color var(--tr-base) var(--tr-ease), color var(--tr-base) var(--tr-ease);
}
.trame-lien-section:hover { border-color: var(--tr-primary); color: var(--tr-primary); }
.trame-lien-section svg { transition: transform var(--tr-base) var(--tr-ease); }
.trame-lien-section:hover svg { transform: translateX(3px); }

/* ==========================================================================
   Accueil — Expertises (cartes qui se retournent)
   ========================================================================== */
.trame-flip { perspective: 1400px; }
.trame-flip__inner {
  position: relative; height: 100%; min-height: 320px;
  transform-style: preserve-3d;
  transition: transform 0.65s var(--tr-ease);
  border-radius: var(--tr-radius-xl);
}
.trame-flip__inner:focus { outline: 2px solid var(--tr-primary); outline-offset: 3px; }
.trame-flip:hover .trame-flip__inner,
.trame-flip__inner:focus-visible,
.trame-flip__inner:focus-within { transform: rotateY(180deg); }

.trame-flip__face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: var(--tr-space-md);
  padding: var(--tr-space-2xl);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--tr-radius-xl);
  background: var(--tr-surface-card); border: 1px solid var(--tr-border);
}
.trame-flip__verso {
  transform: rotateY(180deg);
  border-color: var(--tr-primary);
  background: linear-gradient(150deg, rgba(255,95,31,0.10), var(--tr-surface-card) 65%);
}
.trame-flip__icone {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none;
  border-radius: var(--tr-radius-md);
  background: var(--tr-primary-wash); border: 1px solid var(--tr-primary); color: var(--tr-primary);
}
.trame-flip__titre { font-size: var(--tr-text-xl); margin: 0; color: var(--tr-text); }
.trame-flip__resume, .trame-flip__detail { color: var(--tr-text-muted); font-size: var(--tr-text-sm); margin: 0; }
.trame-flip__indice { margin-top: auto; color: var(--tr-primary); }
.trame-flip__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.trame-flip__liste li { display: flex; align-items: center; gap: 8px; font-size: var(--tr-text-sm); color: var(--tr-text); }
.trame-flip__liste svg { color: var(--tr-primary); flex: none; }
.trame-flip__lien { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--tr-primary); font-size: var(--tr-text-sm); }

/* Les cartes doivent pouvoir se retourner : la grille impose une hauteur. */
.trame-expertises__grille { align-items: stretch; }
.trame-expertises__grille .trame-flip { display: flex; }
.trame-expertises__grille .trame-flip__inner { width: 100%; }

/* Sans retournement, ou si le visiteur a demandé moins de mouvement, les
   deux faces s'empilent : aucune information n'est perdue. */
.trame-expertises__grille--plate .trame-flip__inner,
.trame-expertises__grille--plate .trame-flip:hover .trame-flip__inner { transform: none; }
.trame-expertises__grille--plate .trame-flip__verso { display: none; }
@media (prefers-reduced-motion: reduce) {
  .trame-flip__inner { transition: none; }
}

/* ==========================================================================
   Blog — Hero
   ========================================================================== */
.trame-blog-hero { padding-block: var(--tr-space-4xl) var(--tr-space-3xl); }
.trame-blog-hero__fil { color: var(--tr-text-muted); margin-bottom: var(--tr-space-2xl); }
.trame-blog-hero__fil span:last-child { color: var(--tr-primary); }
.trame-blog-hero__titre { font-size: clamp(2.6rem, 1.7rem + 3.8vw, 4.4rem); line-height: 1.02; margin: var(--tr-space-md) 0 var(--tr-space-xl); }
.trame-blog-hero__titre span { display: block; color: var(--tr-primary); }
.trame-blog-hero__lead { max-width: 60ch; color: var(--tr-text-muted); margin-bottom: var(--tr-space-2xl); }
.trame-blog-hero__recherche {
  display: flex; align-items: center; gap: var(--tr-space-md);
  max-width: 520px; padding: 0 var(--tr-space-lg);
  background: var(--tr-surface-card); border: 1px solid var(--tr-border); border-radius: var(--tr-radius-pill);
  color: var(--tr-text-muted);
}
.trame-blog-hero__recherche:focus-within { border-color: var(--tr-primary); }
.trame-blog-hero__recherche input {
  flex: 1 1 auto; background: none; border: none; color: var(--tr-text);
  padding: 15px 0; font-size: var(--tr-text-base);
}
.trame-blog-hero__recherche input:focus { outline: none; }

/* ==========================================================================
   Blog — À la une
   ========================================================================== */
.trame-une__entete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tr-space-md); margin-bottom: var(--tr-space-2xl); }
.trame-une__entete h2 { margin: 0; }
.trame-une__compteur { color: var(--tr-text-muted); }
.trame-une__grille { display: grid; gap: var(--tr-space-xl); }
@media (min-width: 900px) { .trame-une__grille { grid-template-columns: 1fr 1fr; } }
.trame-une-card {
  position: relative; display: block; overflow: hidden; text-decoration: none; color: inherit;
  border-radius: var(--tr-radius-xl); min-height: 420px; border: 1px solid var(--tr-border);
}
.trame-une-card__media, .trame-une-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.trame-une-card__media img { object-fit: cover; }
.trame-une-card__voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,18,0.1) 30%, rgba(10,10,18,0.92) 100%); }
.trame-une-card__contenu { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; justify-content: flex-end; gap: var(--tr-space-md); padding: var(--tr-space-2xl); }
.trame-une-card__meta { display: flex; align-items: center; gap: var(--tr-space-md); }
.trame-une-card__titre { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); font-weight: 600; color: #fff; }
.trame-une-card__extrait { color: rgba(255,255,255,0.82); font-size: var(--tr-text-sm); max-width: 52ch; }
.trame-une-card .trame-blog-meta { color: rgba(255,255,255,0.82); }
.trame-une-card .trame-blog-auteur strong { color: #fff; }
.trame-badge--contour { background: transparent; border: 1px solid var(--tr-primary); color: var(--tr-primary); }

/* ==========================================================================
   Blog — Tous les articles (grille + sidebar)
   ========================================================================== */
.trame-blog-tous__barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tr-space-md); padding-bottom: var(--tr-space-lg); border-bottom: 1px solid var(--tr-border); margin-bottom: var(--tr-space-2xl); }
.trame-blog-tous__compteur { color: var(--tr-text-muted); margin: 0; }
.trame-blog-tous__layout { display: grid; gap: var(--tr-space-3xl); align-items: start; }
@media (min-width: 1040px) { .trame-blog-tous__layout--sidebar { grid-template-columns: minmax(0, 1fr) 340px; } }
.trame-blog-tous__grid { align-content: start; }

.trame-blog-card { display: flex; flex-direction: column; background: none; border: none; }
.trame-blog-card__media { position: relative; display: block; border-radius: var(--tr-radius-lg); overflow: hidden; aspect-ratio: 16 / 10; background: var(--tr-surface-card); }
.trame-blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trame-blog-card__media .trame-badge { position: absolute; top: var(--tr-space-md); left: var(--tr-space-md); }
.trame-blog-card__body { display: flex; flex-direction: column; gap: var(--tr-space-sm); padding-top: var(--tr-space-lg); }
.trame-blog-meta { display: inline-flex; align-items: center; gap: 5px; color: var(--tr-text-muted); font-size: var(--tr-text-xs); }
.trame-blog-meta svg { vertical-align: middle; }
.trame-blog-card__titre { font-size: var(--tr-text-xl); margin: 0; }
.trame-blog-card__titre a { color: var(--tr-text); }
.trame-blog-card__titre a:hover { color: var(--tr-primary); }
.trame-blog-card__extrait { color: var(--tr-text-muted); font-size: var(--tr-text-sm); margin: 0; }
.trame-blog-auteur { display: inline-flex; align-items: center; gap: var(--tr-space-sm); margin-top: 2px; }
.trame-blog-auteur__img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.trame-blog-auteur__id strong { display: block; color: var(--tr-text); font-size: var(--tr-text-sm); font-weight: 500; }
.trame-blog-auteur__id .trame-mono { color: var(--tr-text-muted); font-size: var(--tr-text-xs); }
.trame-blog-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

.trame-blog-tous__aside { display: flex; flex-direction: column; gap: var(--tr-space-xl); position: sticky; top: var(--tr-space-2xl); }
.trame-aside-carte { padding: var(--tr-space-xl); border-radius: var(--tr-radius-xl); background: var(--tr-surface-card); border: 1px solid var(--tr-border); }
.trame-aside-carte > h3 { margin: 0 0 var(--tr-space-lg); font-size: var(--tr-text-lg); }
.trame-aside-carte--nl h3 { margin: var(--tr-space-sm) 0 var(--tr-space-md); }
.trame-aside-carte--nl p { color: var(--tr-text-muted); font-size: var(--tr-text-sm); margin: 0 0 var(--tr-space-md); }

/* ==========================================================================
   Blog — Explorer par thème
   ========================================================================== */
.trame-themes__titre { margin-bottom: var(--tr-space-2xl); }
.trame-theme-liste { display: grid; gap: var(--tr-space-lg); }
.trame-theme-liste--2 { grid-template-columns: repeat(2, 1fr); }
.trame-theme-liste--3 { grid-template-columns: repeat(3, 1fr); }
.trame-theme-liste--vertical { grid-template-columns: 1fr; }
@media (max-width: 900px) { .trame-theme-liste--2, .trame-theme-liste--3 { grid-template-columns: 1fr; } }
@media (min-width: 560px) and (max-width: 900px) { .trame-theme-liste--3 { grid-template-columns: repeat(2, 1fr); } }
.trame-theme-card {
  display: flex; align-items: flex-start; gap: var(--tr-space-md); text-decoration: none; color: inherit;
  padding: var(--tr-space-lg); border-radius: var(--tr-radius-lg);
  background: var(--tr-surface-card); border: 1px solid var(--tr-border);
  transition: border-color var(--tr-base) var(--tr-ease);
}
.trame-theme-card:hover { border-color: var(--tr-accent, var(--tr-primary)); }
.trame-theme-card__icone {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  border-radius: var(--tr-radius-md); background: var(--tr-accent, var(--tr-primary)); color: #fff;
}
.trame-theme-card__infos { display: flex; flex-direction: column; gap: 2px; }
.trame-theme-card__infos strong { color: var(--tr-text); }
.trame-theme-card__infos .trame-mono { color: var(--tr-text-muted); font-size: var(--tr-text-xs); }
.trame-theme-card__desc { color: var(--tr-text-muted); font-size: var(--tr-text-sm); }

/* ==========================================================================
   Newsletter (module pleine largeur)
   ========================================================================== */
.trame-nl { text-align: center; padding-block: var(--tr-space-4xl); }
.trame-nl__titre { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.8rem); margin-bottom: var(--tr-space-lg); }
.trame-nl__lead { max-width: 58ch; margin: 0 auto var(--tr-space-2xl); color: var(--tr-text-muted); }
.trame-nl .trame-newsletter {
  flex-direction: row; justify-content: center; flex-wrap: wrap;
  max-width: 560px; margin: 0 auto; gap: var(--tr-space-md);
}
.trame-nl .trame-newsletter input { flex: 1 1 260px; padding: 15px var(--tr-space-lg); border-radius: var(--tr-radius-lg); }
.trame-nl .trame-newsletter .trame-btn { flex: none; }
.trame-nl .trame-newsletter__retour { flex-basis: 100%; text-align: center; }
.trame-nl__reassurance { color: var(--tr-text-muted); margin-top: var(--tr-space-lg); }

/* ==========================================================================
   Hero portfolio (stats latérales)
   ========================================================================== */
.trame-hero-p { display: grid; gap: var(--tr-space-4xl); align-items: center; padding-block: var(--tr-space-4xl) var(--tr-space-3xl); }
@media (min-width: 1024px) { .trame-hero-p { grid-template-columns: 1.5fr auto; } }
.trame-hero-p__titre { font-size: clamp(2.5rem, 1.9rem + 3vw, 4rem); line-height: 1.02; margin-bottom: var(--tr-space-xl); }
.trame-hero-p__titre span { display: block; color: var(--tr-primary); }
.trame-hero-p__lead { max-width: 48ch; font-size: var(--tr-text-lg); }
.trame-hero-p__stats { display: flex; flex-direction: column; gap: var(--tr-space-md); }
.trame-hero-p__stat {
  min-width: 140px; text-align: center; padding: var(--tr-space-lg) var(--tr-space-2xl);
  background: var(--tr-surface-card); border: 1px solid var(--tr-border); border-radius: var(--tr-radius-lg);
}
.trame-hero-p__stat strong { display: block; font-family: var(--tr-font-display); font-weight: 700; font-size: var(--tr-text-lg); color: var(--tr-text-accent); }
.trame-hero-p__stat .trame-mono { display: block; margin-top: 2px; }
@media (max-width: 1023px) { .trame-hero-p__stats { flex-direction: row; flex-wrap: wrap; } .trame-hero-p__stat { flex: 1 1 120px; } }

/* En-tête de la grille en vedette */
.trame-vedette__tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tr-space-lg); margin-bottom: var(--tr-space-lg); }
.trame-vedette__tete .trame-mono { margin: 0; }

/* CTA à deux boutons */
.trame-cta__actions { display: flex; flex-wrap: wrap; gap: var(--tr-space-lg); justify-content: center; }

/* ---------- Hero d'accueil : cartes chiffrées et défilement ---------- */
.trame-hero-accueil__cartes { display: grid; gap: var(--tr-space-lg); grid-template-columns: 1fr 1fr; margin-top: var(--tr-space-lg); }
@media (max-width: 520px) { .trame-hero-accueil__cartes { grid-template-columns: 1fr; } }

.trame-hero-accueil__mini {
  padding: var(--tr-space-lg);
  background: var(--tr-surface-card); border: 1px solid var(--tr-border); border-radius: var(--tr-radius-lg);
}
.trame-hero-accueil__mini .trame-mono { display: block; margin-bottom: var(--tr-space-sm); }
.trame-hero-accueil__score { display: flex; align-items: baseline; gap: 6px; margin: 0 0 var(--tr-space-md); }
.trame-hero-accueil__score strong { font-family: var(--tr-font-display); font-weight: 700; font-size: var(--tr-text-2xl); color: var(--tr-primary); line-height: 1; }
.trame-hero-accueil__score span { font-family: var(--tr-font-mono); font-size: var(--tr-text-xs); color: var(--tr-text-muted); }

.trame-hero-accueil__jauge { display: flex; gap: 4px; }
.trame-hero-accueil__jauge span { flex: 1; height: 8px; border-radius: 3px; background: var(--tr-primary); opacity: 0.32; }
.trame-hero-accueil__jauge span:nth-child(2) { opacity: 0.46; }
.trame-hero-accueil__jauge span:nth-child(3) { opacity: 0.6; }
.trame-hero-accueil__jauge span:nth-child(4) { opacity: 0.74; }
.trame-hero-accueil__jauge span:nth-child(5) { opacity: 0.88; }
.trame-hero-accueil__jauge span:last-child { opacity: 1; }

.trame-hero-accueil__avatars { display: flex; margin-bottom: var(--tr-space-sm); }
.trame-hero-accueil__avatars span {
  width: 26px; height: 26px; border-radius: 50%; margin-left: -8px;
  background: var(--tr-surface-section); border: 2px solid var(--tr-surface-card);
}
.trame-hero-accueil__avatars span:first-child { margin-left: 0; }
.trame-hero-accueil__etoiles { color: var(--tr-primary); }
.trame-hero-accueil__clients-note { display: block; margin-top: 4px; }

.trame-hero-accueil__scroll {
  display: block; text-align: center; margin-top: var(--tr-space-3xl);
  letter-spacing: 0.2em; position: relative;
}
.trame-hero-accueil__scroll::after {
  content: ""; display: block; width: 1px; height: 28px; margin: var(--tr-space-sm) auto 0;
  background: linear-gradient(180deg, var(--tr-primary), transparent);
}

/* ==========================================================================
   Projets sélectionnés — carte large
   ========================================================================== */
/* Une carte marquée « grande » occupe deux colonnes de la grille. Le repli
   à une colonne sur petit écran est déjà géré par .trame-grid. */
@media (min-width: 900px) {
  .trame-carte-large { grid-column: span 2; }
}
.trame-carte-large > .trame-card { height: 100%; }

/* En-tête enrichi de la section « Projets en vedette » */
.trame-vedette__titre { font-size: var(--tr-text-2xl); margin: var(--tr-space-sm) 0 0; }
.trame-vedette__titre span { display: block; color: var(--tr-primary); }
.trame-vedette__lead { max-width: 56ch; color: var(--tr-text-muted); margin: var(--tr-space-sm) 0 0; }

/* ==========================================================================
   Témoignages — en-tête centré
   ========================================================================== */
.trame-avis__entete { text-align: center; margin-bottom: var(--tr-space-4xl); }
.trame-avis__titre { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); margin: var(--tr-space-md) 0 var(--tr-space-lg); }
/* Sur la maquette la deuxième ligne est en gris, pas en orange : elle
   prolonge la phrase au lieu de la scander. Modifiable dans l'onglet Style. */
.trame-avis__titre span { display: block; color: var(--tr-text-muted); }
.trame-avis__lead { max-width: 58ch; margin: 0 auto; color: var(--tr-text-muted); }
.trame-avis-bloc .trame-temoignage blockquote { font-style: italic; }

/* ==========================================================================
   Bascule Grille / Liste
   ==========================================================================
   Le mode liste ne change pas le balisage : c'est la même carte, réagencée.
   Le numéro et la flèche sont des pseudo-éléments, donc rien à ajouter au
   HTML — et une évolution de la carte profite aux deux vues d'un coup. */

.trame-vue-bascule {
  display: inline-flex; flex: none; padding: 3px;
  border-radius: var(--tr-radius-pill);
  background: var(--tr-surface-card); border: 1px solid var(--tr-border);
}
.trame-vue-bascule button {
  padding: 6px 16px; border: 0; border-radius: var(--tr-radius-pill);
  background: none; color: var(--tr-text-muted); cursor: pointer;
  font-family: var(--tr-font-mono); font-size: var(--tr-text-xs);
  transition: background var(--tr-base) var(--tr-ease), color var(--tr-base) var(--tr-ease);
}
.trame-vue-bascule button[aria-pressed="true"] {
  background: var(--tr-surface-base); color: var(--tr-text);
}

/* ---------- Mode liste ----------

   Le corps de carte contient quatre éléments frères : catégorie, titre,
   extrait, métriques. Les mettre bout à bout en flex les alignait tous sur
   une même ligne — d'où la mise en page centrée et cassée. Une grille avec
   zones nommées place chacun explicitement : titre et extrait empilés à
   gauche, le reste en colonnes à droite.
   -------------------------------------------------------------------- */
.trame-grid--liste {
  grid-template-columns: 1fr !important;
  gap: var(--tr-space-md);
  counter-reset: trame-rang;
}
.trame-grid--liste .trame-card {
  counter-increment: trame-rang;
  position: relative;
  flex-direction: row;
  align-items: center;
  gap: var(--tr-space-lg);
  /* Place réservée à gauche pour le numéro, à droite pour la flèche. */
  padding: var(--tr-space-md) 68px var(--tr-space-md) 56px;
  border-radius: var(--tr-radius-lg);
  text-align: left;
}

/* Numéro de rang */
.trame-grid--liste .trame-card::before {
  content: counter(trame-rang, decimal-leading-zero);
  position: absolute; left: var(--tr-space-xl); top: 50%;
  transform: translateY(-50%);
  font-family: var(--tr-font-mono); font-size: var(--tr-text-xs);
  color: var(--tr-text-muted);
}
/* Flèche */
.trame-grid--liste .trame-card::after {
  content: "→";
  position: absolute; right: var(--tr-space-xl); top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid var(--tr-border);
  color: var(--tr-text-muted); font-size: 15px;
  transition: border-color var(--tr-base) var(--tr-ease), color var(--tr-base) var(--tr-ease);
}
.trame-grid--liste .trame-card:hover::after { border-color: var(--tr-primary); color: var(--tr-primary); }

/* Vignette carrée */
.trame-grid--liste .trame-card__media {
  flex: none; width: 58px; height: 58px;
  aspect-ratio: auto; min-height: 0;
  border-radius: var(--tr-radius-md); overflow: hidden;
}
.trame-grid--liste .trame-card__media img { width: 100%; height: 100%; object-fit: cover; }
.trame-grid--liste .trame-card__media::after { display: none; }

/* Corps : grille à zones nommées */
.trame-grid--liste .trame-card__body {
  position: static; background: none; padding: 0;
  flex: 1 1 auto; min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "titre    cat metriques annee"
    "extrait  cat metriques annee";
  align-items: center;
  column-gap: var(--tr-space-2xl);
  row-gap: 2px;
}
.trame-grid--liste .trame-card__title   { grid-area: titre;   font-size: var(--tr-text-lg); margin: 0; }
.trame-grid--liste .trame-card__excerpt { grid-area: extrait; font-size: var(--tr-text-sm); margin: 0; }

/* La catégorie devient une pilule. La couleur vient du style en ligne posé
   par le gabarit : currentColor la reprend pour la bordure et le fond. */
.trame-grid--liste .trame-card__body > .trame-mono {
  grid-area: cat; justify-self: end;
  padding: 5px 14px; border-radius: var(--tr-radius-pill);
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-size: var(--tr-text-xs); white-space: nowrap;
}
.trame-grid--liste .trame-card__metrics {
  grid-area: metriques; margin: 0;
  display: flex; gap: var(--tr-space-2xl); align-items: center;
}
.trame-grid--liste .trame-metric { text-align: right; }
.trame-grid--liste .trame-card__annee {
  grid-area: annee; justify-self: end;
  color: var(--tr-text-muted); font-size: var(--tr-text-xs);
}

/* L'année ne sert qu'en mode liste. */
.trame-card__annee { display: none; }
.trame-grid--liste .trame-card__annee { display: block; }

/* Sous 1100 px, on retire progressivement les colonnes secondaires plutôt
   que de tout comprimer : les métriques partent avant la catégorie. */
@media (max-width: 1100px) {
  .trame-grid--liste .trame-card__body {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "titre   cat"
      "extrait cat";
  }
  .trame-grid--liste .trame-card__metrics,
  .trame-grid--liste .trame-card__annee { display: none; }
}

/* Sous 700 px, la ligne redevient une carte empilée : trois colonnes de
   métriques sur un téléphone seraient illisibles. */
@media (max-width: 700px) {
  .trame-grid--liste .trame-card {
    flex-direction: column; align-items: stretch;
    padding: var(--tr-space-lg);
  }
  .trame-grid--liste .trame-card::before,
  .trame-grid--liste .trame-card::after { display: none; }
  .trame-grid--liste .trame-card__media { width: 100%; height: 150px; }
  .trame-grid--liste .trame-card__body {
    grid-template-columns: 1fr;
    grid-template-areas: "cat" "titre" "extrait";
    row-gap: var(--tr-space-sm);
  }
  .trame-grid--liste .trame-card__body > .trame-mono { justify-self: start; }
}

/* Barre au-dessus de la grille de projets : filtres à gauche, bascule à droite */
.trame-barre-projets {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--tr-space-lg); margin-bottom: var(--tr-space-lg);
}
.trame-barre-projets .trame-filtres { margin: 0; }
.trame-barre-projets__compteur { color: var(--tr-text-muted); margin: 0 0 var(--tr-space-2xl); }

/* ==========================================================================
   À propos — Hero
   ========================================================================== */
.trame-ap-hero { display: grid; gap: var(--tr-space-4xl); align-items: center; padding-block: var(--tr-space-4xl) var(--tr-space-3xl); }
@media (min-width: 960px) { .trame-ap-hero { grid-template-columns: 1fr 1fr; } }
.trame-ap-hero__fil { color: var(--tr-text-muted); margin-bottom: var(--tr-space-2xl); }
.trame-ap-hero__fil span:last-child { color: var(--tr-primary); }
.trame-ap-hero__titre { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 3.8rem); line-height: 1.05; margin: var(--tr-space-md) 0 var(--tr-space-xl); }
.trame-ap-hero__titre span { display: block; color: var(--tr-primary); }
.trame-ap-hero__lead { max-width: 52ch; color: var(--tr-text-muted); margin-bottom: var(--tr-space-lg); }
.trame-ap-hero__actions { display: flex; flex-wrap: wrap; gap: var(--tr-space-lg); margin-top: var(--tr-space-xl); }

.trame-ap-hero__visuel { position: relative; }
.trame-ap-hero__image { width: 100%; border-radius: var(--tr-radius-xl); display: block; }
.trame-ap-hero__note {
  position: absolute; top: var(--tr-space-lg); right: calc(-1 * var(--tr-space-2xl));
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--tr-space-md) var(--tr-space-lg);
  border-radius: var(--tr-radius-lg);
  background: var(--tr-surface-card); border: 1px solid var(--tr-border);
  box-shadow: var(--tr-shadow-md);
}
.trame-ap-hero__note .trame-mono { color: var(--tr-text-muted); font-size: var(--tr-text-xs); white-space: nowrap; }
.trame-ap-hero__encart {
  position: absolute; bottom: var(--tr-space-2xl); left: calc(-1 * var(--tr-space-2xl));
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--tr-space-lg);
  border-radius: var(--tr-radius-lg);
  background: var(--tr-surface-card); border: 1px solid var(--tr-border);
  box-shadow: var(--tr-shadow-md);
}
.trame-ap-hero__encart-icone { color: var(--tr-primary); }
.trame-ap-hero__encart strong { color: var(--tr-text); font-size: var(--tr-text-sm); }
.trame-ap-hero__encart .trame-mono { color: var(--tr-text-muted); font-size: var(--tr-text-xs); }
/* Sous 960 px les encarts débordaient de l'écran : on les ramène dedans. */
@media (max-width: 959px) {
  .trame-ap-hero__note { right: var(--tr-space-lg); }
  .trame-ap-hero__encart { left: var(--tr-space-lg); }
}

/* ==========================================================================
   À propos — Barre d'onglets
   ========================================================================== */
.trame-onglets {
  display: flex; flex-wrap: wrap; gap: var(--tr-space-sm);
  padding-block: var(--tr-space-lg);
  border-bottom: 1px solid var(--tr-border);
  margin-bottom: var(--tr-space-4xl);
}
.trame-onglets--colle {
  position: sticky; top: 0; z-index: 20;
  background: var(--tr-surface-base);
}
.trame-onglet {
  padding: 9px 20px; border: 0; border-radius: var(--tr-radius-pill);
  background: none; color: var(--tr-text-muted); cursor: pointer;
  font-size: var(--tr-text-sm); font-weight: 500;
  transition: background var(--tr-base) var(--tr-ease), color var(--tr-base) var(--tr-ease);
}
.trame-onglet:hover { color: var(--tr-text); }
.trame-onglet[aria-selected="true"] {
  background: var(--tr-primary); color: var(--tr-cta-texte, #fff);
  box-shadow: var(--tr-glow);
}

/* En-tête partagé des sections À propos */
.trame-apropos-tete { margin-bottom: var(--tr-space-3xl); }
.trame-apropos-tete__titre { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem); margin: var(--tr-space-md) 0 var(--tr-space-lg); }
.trame-apropos-tete__titre span { display: block; color: var(--tr-primary); }
.trame-apropos-tete__lead { max-width: 62ch; color: var(--tr-text-muted); margin: 0 0 var(--tr-space-md); }

/* ==========================================================================
   À propos — Mission
   ========================================================================== */
.trame-mission { display: grid; gap: var(--tr-space-4xl); align-items: start; }
@media (min-width: 960px) { .trame-mission { grid-template-columns: 1.1fr 0.9fr; } }
.trame-mission__visuel img { width: 100%; border-radius: var(--tr-radius-xl); display: block; }
.trame-citation {
  margin: var(--tr-space-2xl) 0 0; padding: var(--tr-space-2xl);
  border-left: 2px solid var(--tr-primary);
  border-radius: 0 var(--tr-radius-lg) var(--tr-radius-lg) 0;
  background: var(--tr-surface-card);
}
.trame-citation p { font-size: var(--tr-text-lg); font-style: italic; color: var(--tr-text); margin: 0 0 var(--tr-space-lg); }

/* Signature réutilisable */
.trame-signature { display: flex; align-items: center; gap: var(--tr-space-md); }
.trame-signature__photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.trame-signature strong { display: block; color: var(--tr-text); font-size: var(--tr-text-sm); }
.trame-signature .trame-mono { display: block; color: var(--tr-text-muted); font-size: var(--tr-text-xs); }

/* ==========================================================================
   À propos — Frise chronologique
   ========================================================================== */
.trame-frise { list-style: none; margin: 0; padding: 0; position: relative; }
/* Le trait vertical relie les jalons. Il s'arrête au dernier point plutôt
   que de courir jusqu'en bas du dernier bloc. */
.trame-frise::before {
  content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px;
  width: 1px; background: var(--tr-primary); opacity: 0.35;
}
.trame-frise__etape {
  display: grid; gap: var(--tr-space-xl);
  grid-template-columns: 56px minmax(0, 1fr);
  padding-bottom: var(--tr-space-4xl);
}
@media (min-width: 900px) {
  .trame-frise__etape { grid-template-columns: 56px minmax(0, 1fr) 200px; align-items: start; }
}
.trame-frise__annee {
  display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; border: 1px solid var(--tr-primary);
  background: var(--tr-surface-base); color: var(--tr-primary);
  font-size: var(--tr-text-xs); position: relative; z-index: 1;
}
.trame-frise__contenu h3 { font-size: var(--tr-text-xl); margin: var(--tr-space-md) 0 var(--tr-space-sm); }
.trame-frise__contenu p { color: var(--tr-text-muted); margin: 0; max-width: 62ch; }
.trame-frise__image img { width: 100%; border-radius: var(--tr-radius-lg); display: block; }
@media (max-width: 899px) { .trame-frise__image { grid-column: 2; } }

.trame-histoire__photo { position: relative; margin: var(--tr-space-4xl) 0 0; border-radius: var(--tr-radius-xl); overflow: hidden; }
.trame-histoire__photo img { width: 100%; display: block; }
.trame-histoire__photo figcaption {
  position: absolute; inset: auto 0 0 0; padding: var(--tr-space-2xl);
  background: linear-gradient(180deg, rgba(6,6,14,0) 0%, rgba(6,6,14,0.92) 70%);
}
.trame-histoire__photo figcaption .trame-mono { display: block; color: var(--tr-primary); margin-bottom: 4px; }
.trame-histoire__photo figcaption strong { color: #fff; font-size: var(--tr-text-xl); }

/* ==========================================================================
   À propos — Valeurs
   ========================================================================== */
.trame-valeurs__grille { display: grid; gap: var(--tr-space-lg); counter-reset: trame-valeur; }
@media (min-width: 760px)  { .trame-valeurs__grille--2, .trame-valeurs__grille--3, .trame-valeurs__grille--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
  .trame-valeurs__grille--3 { grid-template-columns: repeat(3, 1fr); }
  .trame-valeurs__grille--4 { grid-template-columns: repeat(4, 1fr); }
}
.trame-valeur {
  counter-increment: trame-valeur;
  position: relative; padding: var(--tr-space-2xl);
  border-radius: var(--tr-radius-xl);
  background: var(--tr-surface-card); border: 1px solid var(--tr-border);
  transition: border-color var(--tr-base) var(--tr-ease), transform var(--tr-base) var(--tr-ease);
}
.trame-valeur:hover { border-color: var(--tr-primary); transform: translateY(var(--tr-survol-y, -3px)); }
/* Le numéro est calculé, pas saisi : ajouter une valeur au milieu renumérote
   tout automatiquement. */
.trame-valeur::after {
  content: counter(trame-valeur, decimal-leading-zero);
  position: absolute; top: var(--tr-space-xl); right: var(--tr-space-2xl);
  font-family: var(--tr-font-display); font-weight: 700;
  font-size: var(--tr-text-3xl); color: var(--tr-text-muted); opacity: 0.28;
}
.trame-valeur__icone {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: var(--tr-radius-md);
  background: var(--tr-primary-wash); border: 1px solid var(--tr-primary);
  color: var(--tr-primary); margin-bottom: var(--tr-space-lg);
}
.trame-valeur h3 { font-size: var(--tr-text-base); margin: 0 0 var(--tr-space-sm); }
.trame-valeur p { color: var(--tr-text-muted); font-size: var(--tr-text-sm); margin: 0; }

/* ==========================================================================
   À propos — Manifeste
   ========================================================================== */
.trame-manifeste {
  padding: var(--tr-space-4xl);
  border-radius: var(--tr-radius-xl);
  border: 1px solid var(--tr-primary-border);
  background: linear-gradient(135deg, rgba(var(--tr-primary-rgb, 255,95,31), 0.10), var(--tr-surface-card) 65%);
}
.trame-manifeste__surtitre { color: var(--tr-primary); margin: 0 0 var(--tr-space-2xl); }
.trame-manifeste__liste { list-style: none; margin: 0 0 var(--tr-space-3xl); padding: 0; counter-reset: trame-manif; }
.trame-manifeste__liste li {
  counter-increment: trame-manif;
  display: grid; grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--tr-space-md); align-items: baseline;
  padding-block: var(--tr-space-md);
  font-family: var(--tr-font-display); font-weight: 600;
  font-size: var(--tr-text-xl); color: var(--tr-text);
}
.trame-manifeste__liste li::before {
  content: counter(trame-manif, decimal-leading-zero) ".";
  font-family: var(--tr-font-mono); font-size: var(--tr-text-xs);
  font-weight: 400; color: var(--tr-primary);
}

/* ==========================================================================
   À propos — On recrute
   ========================================================================== */
.trame-recrute {
  text-align: center; padding: var(--tr-space-4xl);
  border-radius: var(--tr-radius-xl);
  border: 1px solid var(--tr-primary-border);
  background: linear-gradient(135deg, rgba(var(--tr-primary-rgb, 255,95,31), 0.10), var(--tr-surface-card) 65%);
}
.trame-recrute__badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: var(--tr-radius-pill);
  border: 1px solid var(--tr-primary); color: var(--tr-primary);
  font-size: var(--tr-text-xs); margin-bottom: var(--tr-space-xl);
}
.trame-recrute__point {
  width: 7px; height: 7px; border-radius: 50%; background: var(--tr-primary);
  animation: trame-pulse var(--tr-pulse-duree, 2.2s) var(--tr-ease) infinite;
}
.trame-recrute__titre { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); margin-bottom: var(--tr-space-lg); }
.trame-recrute__lead { max-width: 56ch; margin: 0 auto var(--tr-space-2xl); color: var(--tr-text-muted); }
.trame-recrute__postes { justify-content: center; margin-bottom: var(--tr-space-2xl); }

/* ==========================================================================
   Chiffres clés — bande dégradée
   ========================================================================== */
.trame-bande {
  padding: var(--tr-space-4xl) var(--tr-space-2xl);
  border-radius: var(--tr-radius-xl);
  border: 1px solid var(--tr-border);
  /* Le dégradé se compose depuis --tr-primary-rgb : changer la couleur de
     marque dans le personnalisateur le recolore automatiquement. */
  background-color: var(--tr-bande-fond, var(--tr-surface-section));
}
.trame-bande--diagonale {
  background-image: linear-gradient(
    var(--tr-bande-angle, 135deg),
    rgba(var(--tr-primary-rgb, 255,95,31), var(--tr-bande-intensite, 0.16)) 0%,
    transparent 55%
  );
}
.trame-bande--radial {
  background-image: radial-gradient(
    ellipse 70% 90% at 50% 0%,
    rgba(var(--tr-primary-rgb, 255,95,31), var(--tr-bande-intensite, 0.18)) 0%,
    transparent 70%
  );
}
.trame-bande--haut {
  background-image: linear-gradient(
    180deg,
    rgba(var(--tr-primary-rgb, 255,95,31), var(--tr-bande-intensite, 0.16)) 0%,
    transparent 60%
  );
}
.trame-bande--aucun { background-image: none; }

.trame-bande__tete { text-align: center; margin-bottom: var(--tr-space-3xl); }
.trame-bande__grille {
  display: grid; gap: var(--tr-space-2xl);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  text-align: center;
}
.trame-bande__valeur {
  display: block;
  font-family: var(--tr-font-display); font-weight: 700;
  font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.2rem);
  color: var(--tr-primary); line-height: 1;
}
.trame-bande__libelle { display: block; color: var(--tr-text); font-weight: 500; margin-top: var(--tr-space-sm); }
.trame-bande__detail { display: block; color: var(--tr-text-muted); font-size: var(--tr-text-xs); margin-top: 2px; }

/* ==========================================================================
   Carte membre enrichie
   ========================================================================== */
.trame-membre {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--tr-surface-card); border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-xl);
  transition: border-color var(--tr-base) var(--tr-ease), transform var(--tr-base) var(--tr-ease);
}
.trame-membre:hover { border-color: var(--tr-primary); transform: translateY(var(--tr-survol-y, -3px)); }
.trame-membre__portrait { position: relative; }
.trame-membre__portrait img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.trame-membre__identite {
  position: absolute; inset: auto 0 0 0; padding: var(--tr-space-xl);
  background: linear-gradient(180deg, rgba(6,6,14,0) 0%, rgba(6,6,14,0.94) 72%);
}
.trame-membre__identite h3 { margin: 0; color: #fff; font-size: var(--tr-text-xl); }
.trame-membre__role { margin: 2px 0 0; color: var(--tr-primary); font-size: var(--tr-text-xs); }
.trame-membre__corps { display: flex; flex-direction: column; gap: var(--tr-space-lg); padding: var(--tr-space-xl); flex: 1 1 auto; }
.trame-membre__bio { color: var(--tr-text-muted); font-size: var(--tr-text-sm); margin: 0; }
.trame-membre__competences { margin: 0; }
.trame-membre__pied {
  display: flex; align-items: center; justify-content: space-between; gap: var(--tr-space-lg);
  margin-top: auto; padding-top: var(--tr-space-lg); border-top: 1px solid var(--tr-border);
}
.trame-membre__pied strong { display: block; color: var(--tr-primary); font-family: var(--tr-font-display); font-weight: 700; }
.trame-membre__pied .trame-mono { display: block; color: var(--tr-text-muted); font-size: 11px; }
.trame-membre__depuis { text-align: right; }
.trame-membre__depuis strong { color: var(--tr-text); }

/* ==========================================================================
   Bandeau image
   --------------------------------------------------------------------------
   L'image est une vraie <img> en object-fit, pas un background : elle garde
   son alt, ses tailles responsive et son chargement différé. Le voile et le
   texte sont posés par-dessus, ce qui permet aussi de rendre le tout
   cliquable d'un seul bloc sans imbriquer de lien dans le titre.
   ========================================================================== */
.trame-bandeau-img__cadre {
  --tr-bandeau-h: 52vh;
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  border-radius: var(--tr-radius-xl);
  border: 1px solid var(--tr-border);
  background: var(--tr-card-hover);
  isolation: isolate;
}

.trame-bandeau-img__lien { display: block; color: inherit; text-decoration: none; }

.trame-bandeau-img__media {
  display: block;
  width: 100%;
  height: var(--tr-bandeau-h);
  min-height: 260px;
  object-fit: cover;
  object-position: center;
  transition: transform 700ms var(--tr-ease-out);
}

/* Le zoom lent est ce qui empêche un grand aplat photo de paraître figé. */
.trame-bandeau-img__cadre.is-zoom:hover .trame-bandeau-img__media,
.trame-bandeau-img__cadre.is-zoom:focus-within .trame-bandeau-img__media {
  transform: scale(1.04);
}

.trame-bandeau-img__voile {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Le dégradé démarre à mi-hauteur : le sujet de la photo reste lisible,
   seul le pied s'assombrit pour porter le texte. */
.trame-bandeau-img--voile-bas .trame-bandeau-img__voile {
  background: linear-gradient(
    to top,
    rgba(10, 10, 15, 0.88) 0%,
    rgba(10, 10, 15, 0.55) 28%,
    rgba(10, 10, 15, 0) 62%
  );
}

.trame-bandeau-img--voile-entier .trame-bandeau-img__voile {
  background: rgba(10, 10, 15, 0.52);
}

.trame-bandeau-img__contenu {
  position: absolute;
  inset: auto var(--tr-space-6xl) var(--tr-space-5xl) var(--tr-space-6xl);
  z-index: 1;
  max-width: 46rem;
}

.trame-bandeau-img--bas-droite .trame-bandeau-img__contenu { margin-left: auto; text-align: right; }
.trame-bandeau-img--bas-centre .trame-bandeau-img__contenu { margin-inline: auto; text-align: center; }

.trame-bandeau-img--centre .trame-bandeau-img__contenu {
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-inline: auto;
  padding: var(--tr-space-5xl);
  text-align: center;
}

.trame-bandeau-img__surtitre {
  margin: 0 0 var(--tr-space-ms);
  color: var(--tr-text-accent);
  font-size: var(--tr-text-sm);
  letter-spacing: var(--tr-tracking-wide);
}

.trame-bandeau-img__titre {
  margin: 0;
  color: var(--tr-text-pure);
  font-family: var(--tr-font-display);
  font-weight: 700;
  font-size: var(--tr-h2);
  line-height: var(--tr-leading-tight);
  letter-spacing: var(--tr-tracking-tight);
}

.trame-bandeau-img__texte {
  margin: var(--tr-space-lg) 0 0;
  max-width: 34rem;
  color: rgba(237, 237, 245, 0.82);
  font-size: var(--tr-text-lg);
  line-height: var(--tr-leading-normal);
}

.trame-bandeau-img--bas-droite .trame-bandeau-img__texte { margin-left: auto; }
.trame-bandeau-img--bas-centre .trame-bandeau-img__texte,
.trame-bandeau-img--centre .trame-bandeau-img__texte { margin-inline: auto; }

.trame-bandeau-img__legende {
  margin: var(--tr-space-md) 0 0;
  color: var(--tr-text-muted);
  font-size: var(--tr-text-xs);
}

@media (max-width: 780px) {
  .trame-bandeau-img__cadre { border-radius: var(--tr-radius-lg); }
  .trame-bandeau-img__media { height: auto; aspect-ratio: 4 / 3; }
  .trame-bandeau-img__contenu { inset: auto var(--tr-space-2xl) var(--tr-space-2xl) var(--tr-space-2xl); }
  .trame-bandeau-img--centre .trame-bandeau-img__contenu { inset: 0; padding: var(--tr-space-2xl); }
}

@media (prefers-reduced-motion: reduce) {
  .trame-bandeau-img__media { transition: none; }
  .trame-bandeau-img__cadre.is-zoom:hover .trame-bandeau-img__media { transform: none; }
}

/* Section L'équipe : pied optionnel sous la grille des membres. */
.trame-ap-equipe__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tr-space-2xl);
  margin-top: var(--tr-space-4xl);
  padding-top: var(--tr-space-3xl);
  border-top: 1px solid var(--tr-border);
}
.trame-ap-equipe__note {
  margin: 0;
  max-width: 52ch;
  color: var(--tr-text-muted);
}

/* ==========================================================================
   Badges flottants posés sur une image
   --------------------------------------------------------------------------
   Nombre libre : chaque badge porte son rang en variable CSS (--tr-badge-rang),
   ce qui suffit à décaler son apparition et son flottement. Aucune règle par
   badge, donc aucune limite au nombre qu'on peut ajouter.
   ========================================================================== */
.trame-apropos__visuel,
.trame-ap-hero__visuel,
.trame-bandeau-img__cadre { position: relative; }

.trame-badge-flottant {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--tr-space-ms);
  max-width: min(20rem, 78%);
  padding: var(--tr-space-md) var(--tr-space-lg);
  border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-lg);
  background: var(--tr-surface-card);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
  animation:
    trameBadgeEntree 620ms var(--tr-ease-out) backwards,
    trameBadgeFlotte 6s ease-in-out infinite;
  /* Le rang sert deux fois : il retarde l'entrée, et il désynchronise le
     flottement pour que deux badges voisins ne montent jamais ensemble. */
  animation-delay:
    calc(220ms + var(--tr-badge-rang, 0) * 130ms),
    calc(900ms + var(--tr-badge-rang, 0) * 700ms);
}

.trame-badge-flottant__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--tr-radius-md);
  background: var(--tr-primary-wash, rgba(255, 95, 31, 0.13));
  color: var(--tr-primary);
}

.trame-badge-flottant__corps { display: grid; gap: 2px; min-width: 0; }
.trame-badge-flottant__corps strong {
  color: var(--tr-text);
  font-family: var(--tr-font-display);
  font-weight: 700;
  font-size: var(--tr-text-sm);
  line-height: 1.2;
}
.trame-badge-flottant__corps span {
  color: var(--tr-text-muted);
  font-size: var(--tr-text-xs);
  line-height: 1.35;
}

/* Positions ------------------------------------------------------------- */
.trame-badge-flottant--bas-gauche  { left: var(--tr-space-2xl); bottom: var(--tr-space-2xl); }
.trame-badge-flottant--bas-droite  { right: var(--tr-space-2xl); bottom: var(--tr-space-2xl); }
.trame-badge-flottant--haut-gauche { left: var(--tr-space-2xl); top: var(--tr-space-2xl); }
.trame-badge-flottant--haut-droite { right: var(--tr-space-2xl); top: var(--tr-space-2xl); }
.trame-badge-flottant--mi-gauche   { left: var(--tr-space-2xl); top: 50%; transform: translateY(-50%); }
.trame-badge-flottant--mi-droite   { right: var(--tr-space-2xl); top: 50%; transform: translateY(-50%); }

/* Tons ------------------------------------------------------------------ */
.trame-badge-flottant--accent {
  background: var(--tr-primary);
  border-color: transparent;
}
.trame-badge-flottant--accent .trame-badge-flottant__corps strong,
.trame-badge-flottant--accent .trame-badge-flottant__corps span { color: #fff; }
.trame-badge-flottant--accent .trame-badge-flottant__icone {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.trame-badge-flottant--clair {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.08);
}
.trame-badge-flottant--clair .trame-badge-flottant__corps strong { color: #14131C; }
.trame-badge-flottant--clair .trame-badge-flottant__corps span { color: #5A5A72; }

.trame-badge-flottant--verre {
  background: rgba(20, 19, 28, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(255, 255, 255, 0.14);
}

@keyframes trameBadgeEntree {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes trameBadgeFlotte {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}

/* Les badges centrés verticalement utilisent déjà transform : on anime
   « translate » séparément pour ne pas écraser leur centrage. */
.trame-badge-flottant--mi-gauche,
.trame-badge-flottant--mi-droite { animation-name: trameBadgeFlotte; animation-delay: calc(900ms + var(--tr-badge-rang, 0) * 700ms); }

@media (max-width: 780px) {
  .trame-badge-flottant { max-width: calc(100% - var(--tr-space-3xl)); padding: var(--tr-space-ms) var(--tr-space-md); }
  .trame-badge-flottant--bas-gauche,
  .trame-badge-flottant--bas-droite  { bottom: var(--tr-space-md); }
  .trame-badge-flottant--haut-gauche,
  .trame-badge-flottant--haut-droite { top: var(--tr-space-md); }
  .trame-badge-flottant--bas-gauche,
  .trame-badge-flottant--haut-gauche,
  .trame-badge-flottant--mi-gauche   { left: var(--tr-space-md); }
  .trame-badge-flottant--bas-droite,
  .trame-badge-flottant--haut-droite,
  .trame-badge-flottant--mi-droite   { right: var(--tr-space-md); }
}

@media (prefers-reduced-motion: reduce) {
  .trame-badge-flottant { animation: none; }
}

/* ==========================================================================
   Bandeau du fil d'Ariane
   --------------------------------------------------------------------------
   Posé automatiquement sous l'en-tête sur toutes les pages sauf l'accueil.
   ========================================================================== */
.trame-ariane-bandeau {
  border-bottom: 1px solid var(--tr-border);
  background: var(--tr-surface-section, transparent);
}
.trame-ariane-bandeau .trame-ariane {
  margin: 0;
  padding: var(--tr-space-lg) 0;
}
.trame-ariane ol { list-style: none; margin: 0; padding: 0; }

/* La page courante porte la couleur du site — c'est le repère qui dit
   « vous êtes ici », et le seul élément non cliquable de la liste. */
.trame-ariane [aria-current="page"] {
  color: var(--tr-text-accent);
  font-weight: 500;
}
.trame-ariane a { text-decoration: none; transition: color 180ms var(--tr-ease); }
.trame-ariane__sep { color: var(--tr-text-muted); opacity: 0.6; }

@media (max-width: 640px) {
  .trame-ariane-bandeau .trame-ariane { padding: var(--tr-space-md) 0; }
  .trame-ariane ol { gap: var(--tr-space-sm); }
}

/* Fil d'Ariane posé dans un hero : pas de bandeau, il fait partie du bloc. */
.trame-page-hero > .trame-ariane,
.trame-hero-p__texte > .trame-ariane,
.trame-dp-hero__texte > .trame-ariane,
.trame-blog-hero > .trame-ariane,
.trame-ap-hero__texte > .trame-ariane {
  margin-bottom: var(--tr-space-xl);
}

/* ==========================================================================
   Mission — cartes de la colonne de droite
   --------------------------------------------------------------------------
   Nombre libre. Chaque carte porte son rang en variable CSS, ce qui suffit à
   décaler son apparition sans une règle par carte.
   ========================================================================== */
.trame-mission__cartes {
  display: grid;
  gap: var(--tr-space-xl);
}

.trame-mission__carte {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--tr-space-lg);
  padding: var(--tr-space-2xl);
  border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-xl);
  background: var(--tr-surface-card);
  transition:
    border-color 220ms var(--tr-ease),
    transform 220ms var(--tr-ease-out),
    background 220ms var(--tr-ease);
  animation: trameCarteEntree 560ms var(--tr-ease-out) backwards;
  animation-delay: calc(var(--tr-carte-rang, 0) * 110ms);
}

.trame-mission__carte:hover {
  border-color: var(--tr-border-accent);
  background: var(--tr-card-hover);
  transform: translateX(-4px);
}

.trame-mission__carte-icone {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--tr-radius-md);
  background: var(--tr-primary-wash);
  color: var(--tr-primary);
}

.trame-mission__carte-corps h3 {
  margin: 0 0 var(--tr-space-sm);
  color: var(--tr-text);
  font-family: var(--tr-font-display);
  font-weight: 700;
  font-size: var(--tr-text-lg);
  line-height: 1.25;
}

.trame-mission__carte-corps p {
  margin: 0 0 var(--tr-space-sm);
  color: var(--tr-text-muted);
  font-size: var(--tr-text-sm);
  line-height: var(--tr-leading-normal);
}
.trame-mission__carte-corps p:last-child { margin-bottom: 0; }

.trame-mission__cartes + img { margin-top: var(--tr-space-2xl); }

@keyframes trameCarteEntree {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .trame-mission__carte { animation: none; transition: none; }
  .trame-mission__carte:hover { transform: none; }
}

/* ==========================================================================
   Fiche produit dans la fenêtre DigiPack
   --------------------------------------------------------------------------
   Deux colonnes : visuels et contenu inclus à gauche, décision d'achat à
   droite. La colonne de droite reste visible pendant qu'on parcourt la
   liste de gauche — c'est elle qui porte le prix et le bouton.
   ========================================================================== */
.trame-modal--produit { width: min(1180px, 94vw); }

.trame-fiche-produit {
  display: grid;
  gap: var(--tr-space-4xl);
  padding: var(--tr-space-4xl);
}
@media (min-width: 900px) {
  .trame-fiche-produit { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
  .trame-fiche-produit__infos {
    position: sticky;
    top: var(--tr-space-4xl);
    padding-left: var(--tr-space-4xl);
    border-left: 1px solid var(--tr-border);
  }
}

.trame-fiche-produit__principal { margin: 0; }
.trame-fiche-produit__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--tr-radius-lg);
  background: var(--tr-surface-card);
}

.trame-fiche-produit__vignettes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--tr-space-md);
  margin-top: var(--tr-space-md);
}
.trame-fiche-produit__vignette {
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--tr-radius-md);
  background: none;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 180ms var(--tr-ease), opacity 180ms var(--tr-ease);
  opacity: 0.7;
}
.trame-fiche-produit__vignette img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.trame-fiche-produit__vignette:hover { opacity: 1; }
.trame-fiche-produit__vignette.is-active { border-color: var(--tr-primary); opacity: 1; }

.trame-fiche-produit__inclus { margin-top: var(--tr-space-4xl); }
.trame-fiche-produit__inclus h3 {
  margin: 0 0 var(--tr-space-lg);
  color: var(--tr-text-muted);
  font-size: var(--tr-text-xs);
  font-weight: 400;
  letter-spacing: var(--tr-tracking-wide);
  text-transform: uppercase;
}
.trame-fiche-produit__inclus ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tr-space-md); }
.trame-fiche-produit__inclus li {
  position: relative;
  padding-left: 26px;
  color: var(--tr-text);
  font-size: var(--tr-text-sm);
}
/* La coche est dessinée en CSS : pas de balise supplémentaire à échapper,
   et elle suit la couleur du texte si le thème change. */
.trame-fiche-produit__inclus li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--tr-primary);
  border-bottom: 2px solid var(--tr-primary);
  transform: rotate(-45deg);
}

.trame-fiche-produit__meta {
  display: flex;
  align-items: center;
  gap: var(--tr-space-md);
  margin: 0 0 var(--tr-space-lg);
}
.trame-fiche-produit__titre {
  margin: 0 0 var(--tr-space-md);
  color: var(--tr-text);
  font-family: var(--tr-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  line-height: 1.15;
}
.trame-fiche-produit__note {
  display: flex;
  align-items: center;
  gap: var(--tr-space-sm);
  margin: 0 0 var(--tr-space-xl);
  font-size: var(--tr-text-sm);
}
.trame-fiche-produit__texte p { margin: 0 0 var(--tr-space-md); line-height: var(--tr-leading-normal); }

.trame-fiche-produit__prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--tr-space-md);
  margin: var(--tr-space-2xl) 0;
  padding: var(--tr-space-2xl);
  border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-lg);
  background: var(--tr-surface-card);
}
.trame-fiche-produit__prix strong {
  color: var(--tr-text);
  font-family: var(--tr-font-display);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
  line-height: 1.05;
}
.trame-fiche-produit__barre { color: var(--tr-text-muted); text-decoration: line-through; }
.trame-fiche-produit__economie { flex-basis: 100%; color: var(--tr-text-accent); font-size: var(--tr-text-xs); }

.trame-fiche-produit__actions { display: grid; gap: var(--tr-space-md); }
.trame-fiche-produit__actions .trame-btn { justify-content: center; }

.trame-fiche-produit__specs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--tr-space-md) var(--tr-space-xl);
  margin: var(--tr-space-3xl) 0 0;
  padding-top: var(--tr-space-2xl);
  border-top: 1px solid var(--tr-border);
  font-size: var(--tr-text-sm);
}
.trame-fiche-produit__specs dt { color: var(--tr-text-muted); font-size: var(--tr-text-xs); }
.trame-fiche-produit__specs dd { margin: 0; color: var(--tr-text); }

.trame-fiche-produit__paiements {
  margin-top: var(--tr-space-2xl);
  padding-top: var(--tr-space-2xl);
  border-top: 1px solid var(--tr-border);
}
.trame-fiche-produit__paiements p { margin: 0 0 var(--tr-space-md); color: var(--tr-text-muted); font-size: var(--tr-text-xs); }
.trame-fiche-produit__paiements ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tr-space-sm);
  margin: 0;
  padding: 0;
}

.trame-produit__titre a { color: inherit; text-decoration: none; }
.trame-produit__titre a:hover { color: var(--tr-primary); }

@media (max-width: 899px) {
  .trame-fiche-produit { padding: var(--tr-space-2xl); gap: var(--tr-space-3xl); }
  .trame-fiche-produit__infos { padding-left: 0; }
}

/* ==========================================================================
   Carte produit : ouverture au clic sur toute la carte
   --------------------------------------------------------------------------
   Un lien de couverture couvre la carte. Il reste un vrai lien — donc
   navigable au clavier et suivi par les moteurs — mais il passe sous le
   bouton d'achat, qui doit continuer à mener au paiement.
   ========================================================================== */
.trame-produit { position: relative; }

.trame-produit__ouvrir {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.trame-produit__ouvrir:focus-visible {
  outline: 2px solid var(--tr-primary);
  outline-offset: 3px;
}

/* Tout ce qui doit rester cliquable pour lui-même passe au-dessus. */
.trame-produit__acheter,
.trame-produit__titre a { position: relative; z-index: 2; }

/* La barre garde le tri à droite même quand il n'y a pas de filtres :
   space-between a besoin de deux enfants pour pousser le second au bout. */
.trame-boutique-grille__barre > div:empty { flex: 1 1 auto; }

/* ==========================================================================
   Article — contenu riche
   --------------------------------------------------------------------------
   Couvre les blocs Gutenberg réellement utiles dans un article : images avec
   légende, vidéos et intégrations, citations, code, tableaux, séparateurs,
   encadrés. Sans ces règles, un bloc inséré depuis l'éditeur s'affiche avec
   les styles par défaut du navigateur — reconnaissable au premier coup d'œil.
   ========================================================================== */
.trame-prose > * { max-width: 100%; }

.trame-prose figure { margin: var(--tr-space-3xl) 0; }
.trame-prose figure img { margin-block: 0; }
.trame-prose figcaption,
.trame-article__legende {
  margin-top: var(--tr-space-md);
  color: var(--tr-text-muted);
  font-size: var(--tr-text-xs);
  text-align: center;
}

/* Les intégrations (YouTube, Vimeo…) arrivent en iframe de taille fixe :
   le ratio les rend responsives sans script. */
.trame-prose iframe,
.trame-prose video,
.trame-prose .wp-block-embed__wrapper iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--tr-radius-lg);
  background: var(--tr-surface-card);
}
.trame-prose .wp-block-embed { margin: var(--tr-space-3xl) 0; }
.trame-prose audio { width: 100%; }

.trame-prose .wp-block-image.alignwide,
.trame-prose .alignwide { width: min(112%, 100vw - 2rem); margin-inline: auto; }
.trame-prose .alignleft { float: left; margin: 0 var(--tr-space-2xl) var(--tr-space-lg) 0; max-width: 45%; }
.trame-prose .alignright { float: right; margin: 0 0 var(--tr-space-lg) var(--tr-space-2xl); max-width: 45%; }
.trame-prose .aligncenter { margin-inline: auto; }
.trame-prose::after { content: ""; display: table; clear: both; }

.trame-prose blockquote cite,
.trame-prose figure.wp-block-quote cite {
  display: block;
  margin-top: var(--tr-space-md);
  color: var(--tr-text-muted);
  font-family: var(--tr-font-mono);
  font-size: var(--tr-text-xs);
  font-style: normal;
}
.trame-prose .wp-block-pullquote {
  margin: var(--tr-space-4xl) 0;
  padding: var(--tr-space-3xl);
  border-top: 1px solid var(--tr-border);
  border-bottom: 1px solid var(--tr-border);
  text-align: center;
}
.trame-prose .wp-block-pullquote p {
  color: var(--tr-text);
  font-family: var(--tr-font-display);
  font-size: var(--tr-text-2xl);
  line-height: 1.3;
}

.trame-prose pre {
  margin: var(--tr-space-3xl) 0;
  font-family: var(--tr-font-mono);
  font-size: var(--tr-text-sm);
  line-height: 1.6;
  tab-size: 2;
}
.trame-prose :not(pre) > code {
  font-family: var(--tr-font-mono);
  font-size: 0.9em;
  color: var(--tr-text-accent);
}

.trame-prose table {
  width: 100%;
  margin: var(--tr-space-3xl) 0;
  border-collapse: collapse;
  font-size: var(--tr-text-sm);
}
.trame-prose th,
.trame-prose td {
  padding: var(--tr-space-md) var(--tr-space-lg);
  border-bottom: 1px solid var(--tr-border);
  text-align: left;
}
.trame-prose th { color: var(--tr-text); font-weight: 600; }
.trame-prose .wp-block-table { overflow-x: auto; }

.trame-prose hr,
.trame-prose .wp-block-separator {
  margin: var(--tr-space-5xl) 0;
  border: 0;
  border-top: 1px solid var(--tr-border);
}

.trame-prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--tr-space-md); margin: var(--tr-space-2xl) 0; }
.trame-prose .wp-block-button__link {
  display: inline-flex;
  padding: 12px 22px;
  border-radius: var(--tr-radius-lg);
  background: var(--tr-primary);
  color: #fff;
  text-decoration: none;
}

/* Encadré d'information : une citation à laquelle on ajoute la classe
   « is-style-encadre » depuis l'éditeur. */
.trame-prose .is-style-encadre {
  padding: var(--tr-space-2xl);
  border: 1px solid var(--tr-border-accent);
  border-left-width: 3px;
  border-radius: var(--tr-radius-lg);
  background: var(--tr-primary-wash);
}

.trame-prose h2, .trame-prose h3 { scroll-margin-top: 96px; }

/* ---------- Barre de progression en haut de page ---------- */
.trame-article__barre {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 3px;
  background: transparent;
}
.trame-article__barre span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--tr-primary);
  transition: width 120ms linear;
}

/* ---------- Sommaire ---------- */
.trame-sommaire ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tr-space-sm); }
.trame-sommaire a {
  color: var(--tr-text-muted);
  font-size: var(--tr-text-sm);
  text-decoration: none;
  transition: color 160ms var(--tr-ease);
}
.trame-sommaire a:hover { color: var(--tr-primary); }
.trame-sommaire__n3 { padding-left: var(--tr-space-lg); }

/* ---------- Encart d'appel à l'action dans la colonne ---------- */
.trame-aside__cta .trame-btn { width: 100%; justify-content: center; margin-top: var(--tr-space-lg); }

/* ---------- Colonne à gauche ---------- */
@media (min-width: 960px) {
  .trame-article--gauche .trame-article__corps { direction: rtl; }
  .trame-article--gauche .trame-article__corps > * { direction: ltr; }
  .trame-article--aucune .trame-article__corps { display: block; }
  .trame-article--aucune .trame-article__contenu { max-width: 76ch; margin-inline: auto; }
}

.trame-article-lies h2,
.trame-article-recents h2 {
  font-size: var(--tr-text-xl);
  margin-bottom: var(--tr-space-2xl);
}