/* benoit-marchal.com — adaptations propres au site, par-dessus le design system.
   Uniquement des var(--…) des jetons : aucune couleur, police ni taille en dur. */

/* Légende du Hero : couleurs copiées du script de l'animation (index.html, tableau discs),
   faute de jeton équivalent. Seule exception aux couleurs en dur ; à modifier en même temps que le script.
   --legend-str = col de strLines (discipline 'str') ; --legend-cvc-chaud = col du réseau heat (discipline 'cvc'). */
:root {
  --legend-str: #4a4c52;
  --legend-cvc-chaud: #d63e32;
}

/* Ancres (#services, #contact…) : le défilement s'arrête sous la navigation collante. */
section[id] { scroll-margin-top: var(--nav-height); }

/* Texte réservé aux lecteurs d'écran (repris de l'ancienne feuille, visuel du Hero). */
.sr-only { position: absolute; width: var(--hairline); height: var(--hairline); padding: 0; margin: calc(-1 * var(--hairline)); overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Navigation : Contact et LinkedIn sont dans la liste ; ils ne prennent pas le trait signal des liens. */
.bm-nav__links .bm-btn::after, .bm-nav__links .nav-linkedin::after { display: none; }

/* Navigation : le bouton Contact garde ses couleurs et son padding face à la règle .bm-nav__links a. */
.bm-nav__links .bm-btn--primary { padding: var(--space-2) var(--space-4); color: var(--on-action); }

/* Navigation : icône LinkedIn en ink-muted, accent au survol. */
.bm-nav__links .nav-linkedin { display: inline-flex; color: var(--ink-muted); transition: color .2s ease; }
.bm-nav__links .nav-linkedin:hover { color: var(--accent); }

/* Hero : dimensions du canvas de l'animation de fédération (le script lit sa taille CSS). */
#hero-scene { display: block; width: 100%; height: calc(5 * var(--space-10)); }

/* Légende du Hero : le script allume les lignes avec la classe .on (équivalent de .is-on). */
.bm-legend__row.on { color: var(--ink); }
.bm-legend__row.on .bm-legend__swatch { border-top-style: solid; border-top-width: calc(2 * var(--stroke)); }
/* Légende du Hero : STRUCTURE dans la couleur du tracé STR ; CVC · FLUIDES en double trait, chaud (rouge) au-dessus,
   bleu en dessous (jeton MEP), même largeur et même état (pointillé / plein) que les autres traits. */
.hero-legend .bm-legend__swatch--structure { color: var(--legend-str); }
.hero-legend .bm-legend__swatch--mep { position: relative; color: var(--legend-cvc-chaud); transform: translateY(calc(-2 * var(--hairline))); }
.hero-legend .bm-legend__swatch--mep::after { content: ""; position: absolute; left: 0; right: 0; top: calc(2 * var(--hairline)); border-top-width: inherit; border-top-style: inherit; border-top-color: var(--discipline-mep); }

/* Pourquoi travailler avec moi : lien LinkedIn sous les arguments, icône en ligne avec le texte. */
.trust-linkedin { margin: var(--space-7) 0 0; }
.linkedin-link { display: inline-flex; align-items: center; gap: var(--space-3); }

/* Témoignages : citations longues en plusieurs paragraphes, au corps du texte courant. */
.bm-testimonial blockquote { font-size: inherit; line-height: inherit; letter-spacing: normal; }
.bm-testimonial blockquote p { margin: 0 0 var(--space-4); }
.bm-testimonial blockquote p:last-child { margin-bottom: 0; }

/* Témoignages : nom cliquable vers LinkedIn, icône en ink-muted puis accent au survol. */
.author-link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); text-decoration: none; }
.author-link .linkedin-icon { flex: none; width: var(--space-4); height: var(--space-4); fill: currentColor; color: var(--ink-muted); transition: color .2s ease; }
.author-link:hover .bm-testimonial__name { text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: var(--space-1); }
.author-link:hover .linkedin-icon { color: var(--accent); }
/* Témoignages : logo de l'agence en haut de la carte, au-dessus de la citation, en niveaux de gris. (32px = --space-6 ; 120px et 28px sans jeton équivalent) */
.testimonial-logo { display: block; align-self: flex-start; height: var(--space-6); width: auto; max-width: 120px; object-fit: contain; object-position: left center; margin-bottom: var(--space-5); filter: grayscale(100%); opacity: 0.8; mix-blend-mode: multiply; transition: opacity 0.3s ease; }
.bm-testimonial:hover .testimonial-logo { opacity: 1; }
.testimonial-logo--carre { height: 40px; } /* logo presque carré : un peu plus haut pour équilibrer (aucun jeton à 40px) */
@media (max-width: 768px) {
  .testimonial-logo { height: 28px; }
  .testimonial-logo--carre { height: 35px; }
}

/* Contact : formulaire centré sous l'en-tête centré. */
.contact-form { margin: 0 auto; }

/* Pied de page : le lien LinkedIn du texte d'origine se lit dans la phrase. */
.bm-footer__pitch a { color: var(--on-band-muted); text-decoration: underline; text-underline-offset: var(--space-1); }

/* Navigation : quand la largeur manque, les liens passent à la ligne au lieu de déborder. */
.bm-nav__inner { height: auto; min-height: var(--nav-height); }
.bm-nav__links { flex-wrap: wrap; justify-content: flex-end; column-gap: var(--space-5); row-gap: 0; }

/* Tablette : on masque le rôle du nom et on resserre pour éviter le débordement. */
@media (max-width: 1024px) {
  .bm-wordmark__role { display: none; }
  .bm-nav__inner, .bm-nav__links { gap: var(--space-4); }
}

/* Mobile : canvas moins haut. */
@media (max-width: 768px) {
  #hero-scene { height: calc(3.25 * var(--space-10)); }
}

/* ══ Pages intérieures ═══════════════════════════════════════════════════
   Les tailles de texte écrites en px ci-dessous reprennent celles de components.css
   (indiquées en commentaire) : elles habillent du balisage produit par les scripts,
   qui ne peut pas recevoir les classes bm-*. */

/* Photo de portrait : sans filtre, angles vifs, recadrée au format d'origine. */
.bm-photo { margin: 0; }
.bm-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* Texte courant en plusieurs paragraphes (À propos, Missions BIM). */
.bm-prose { max-width: var(--measure); }
.bm-prose p { margin: 0 0 var(--space-4); color: var(--ink-secondary); }
.bm-prose p:last-child { margin-bottom: 0; }
.bm-prose .bm-lead { color: var(--ink); }

/* À propos et Missions BIM : espace au-dessus des actions et des tags. */
.about-cta, .tech-stack { margin-top: var(--space-6); }

/* Missions BIM : quatre avantages sur une ligne, deux en tablette, un en mobile. */
.bm-arguments--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Landing pages : questions en h3 dans la FAQ, sans marge propre au titre. */
.bm-faq__q { margin: 0; }

/* Landing pages : situations (fiches non cliquables) et profil. */
.situation-card .bm-index { display: block; margin-bottom: var(--space-4); }
.situation-card p { margin: 0; color: var(--ink-secondary); }
.profile { align-items: center; }
.landmarks { margin: 0; }

/* Menu mobile (ds/nav.js) : bouton burger, masqué au-delà de 768 px. */
.nav-toggle { display: none; padding: var(--space-2); border: 0; background: none; color: var(--ink); cursor: pointer; }
.nav-toggle span { display: block; width: var(--space-5); height: var(--stroke); margin: var(--space-1) 0; background: currentColor; }

/* Barre de filtres collante sous la navigation (Réalisations). */
.filters-bar { position: sticky; top: var(--nav-height); z-index: 9; background: var(--surface-nav); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow-nav); }
.filters-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); padding-top: var(--space-4); padding-bottom: var(--space-4); }
.filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.filter-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.search-wrap { position: relative; flex: 1; min-width: calc(8 * var(--space-5)); max-width: calc(12 * var(--space-5)); }
.search-wrap input { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.search-icon + input { padding-left: var(--space-7); }
.search-icon { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.results-count { margin-left: auto; }

/* Filtres générés par le script (.pill) : aspect d'étiquette, actif en couleur d'action. (= .bm-tag, 11px) */
.pill { padding: var(--space-1) var(--space-3); border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-xs); background: var(--surface-raised); color: var(--ink-secondary); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.pill:hover { border-color: var(--ink); color: var(--ink); }
.pill.active { border-color: var(--action); background: var(--action); color: var(--on-action); }

/* Réalisations : fiche projet générée par le script, au dessin de bm-sheet (non cliquable). */
.project-card, .skeleton-card { position: relative; display: flex; flex-direction: column; background: var(--surface-raised); border: var(--hairline) solid var(--line); }
.project-card::before { content: ""; position: absolute; inset: calc(-1 * var(--hairline)); z-index: 1; pointer-events: none; background:
  linear-gradient(var(--accent), var(--accent)) top left / var(--tick) 2px no-repeat,
  linear-gradient(var(--accent), var(--accent)) top left / 2px var(--tick) no-repeat,
  linear-gradient(var(--accent), var(--accent)) top right / var(--tick) 2px no-repeat,
  linear-gradient(var(--accent), var(--accent)) top right / 2px var(--tick) no-repeat,
  linear-gradient(var(--accent), var(--accent)) bottom left / var(--tick) 2px no-repeat,
  linear-gradient(var(--accent), var(--accent)) bottom left / 2px var(--tick) no-repeat,
  linear-gradient(var(--accent), var(--accent)) bottom right / var(--tick) 2px no-repeat,
  linear-gradient(var(--accent), var(--accent)) bottom right / 2px var(--tick) no-repeat; }
.card-image, .skeleton-image { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-sunken); }
.card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: var(--font-mono); font-size: 44px; color: var(--accent); background-color: var(--surface-sunken); background-image: linear-gradient(var(--trame) 1px, transparent 1px), linear-gradient(90deg, var(--trame) 1px, transparent 1px); background-size: var(--grid-pitch) var(--grid-pitch); } /* = .bm-stat__number mobile */
.firm-ribbon { position: absolute; top: var(--space-4); left: var(--space-4); padding: var(--space-1) var(--space-2); background: var(--band); color: var(--on-band); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } /* = .bm-tag */
.card-body, .skeleton-body { display: flex; flex: 1; flex-direction: column; padding: var(--space-6); }
.card-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.prog-tag { padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); background: var(--surface-sunken); color: var(--accent); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } /* = .bm-tag--accent */
.card-title { margin: 0 0 var(--space-3); font-size: 22px; line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; } /* = .bm-h3 */
.card-location, .card-contribution-label, .spec-label { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); } /* = .bm-label */
.card-location { margin-bottom: var(--space-4); }
.card-role { margin: 0 0 var(--space-3); padding-left: var(--space-3); border-left: calc(2 * var(--hairline)) solid var(--signal); font-size: 15px; color: var(--ink); } /* = .bm-argument p */
.card-desc { display: -webkit-box; margin: 0 0 var(--space-4); overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 15px; line-height: 1.6; color: var(--ink-secondary); } /* = .bm-argument p */
.card-contribution { margin-bottom: var(--space-4); font-size: 15px; line-height: 1.6; color: var(--ink-secondary); } /* = .bm-argument p */
.card-contribution-label { margin-bottom: var(--space-1); }
.card-specs { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: auto; padding-top: var(--space-4); border-top: var(--hairline) solid var(--line); }
.spec-item { font-size: 15px; color: var(--ink); } /* = .bm-argument p */
.spec-item strong { font-weight: 500; }

/* Réalisations : squelettes de chargement (sans animation : rien ne bouge seul). */
.skeleton-line, .skeleton-tag { height: var(--space-3); margin-bottom: var(--space-3); background: var(--surface-sunken); }
.skeleton-tag { width: calc(4 * var(--space-5)); margin-bottom: var(--space-4); }
.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 70%; }
.skeleton-line.long { width: 90%; }

/* Réalisations : états vides ou en erreur, produits par le script. */
.no-results, .error-state { grid-column: 1 / -1; padding: var(--space-8) var(--space-6); border: var(--hairline) solid var(--line); background: var(--surface-raised); text-align: center; color: var(--ink-secondary); }
.error-state h3 { margin: 0 0 var(--space-3); font-size: 22px; font-weight: 500; color: var(--ink); } /* = .bm-h3 */
.retry-btn { margin-top: var(--space-5); padding: var(--space-3) var(--space-5); border: 0; border-radius: var(--radius-xs); background: var(--action); color: var(--on-action); font-family: var(--font-sans); font-size: 15px; font-weight: 500; cursor: pointer; } /* = .bm-btn */
.retry-btn:hover { background: var(--action-hover); }

/* Réalisations : note de transparence sous le chapeau. */
.honesty-note { max-width: var(--measure); }

@media (max-width: 1024px) {
  .bm-arguments--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Bannière de chiffres en 2 colonnes : un dernier élément seul (nombre impair) prend toute la largeur. */
  .bm-stats__inner > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .bm-arguments--4 { grid-template-columns: 1fr; }
  .nav-toggle { display: block; order: 3; }
  .bm-nav__links.open { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); background: var(--surface); box-shadow: var(--shadow-nav); }
  .filters-bar { position: static; }
  .search-wrap { min-width: 100%; max-width: 100%; }
  .results-count { margin-left: 0; }
}