/*
 Theme Name:   Bootscore Child
 Description:  Bootscore Child Theme — Agence IA Automation
 Author:       Bootscore
 Author URI:   https://bootscore.me
 Template:     bootscore
 Version:      6.0.0
 Requires at least: 5.0
 Tested up to: 6.6
 Requires PHP: 7.4
 License: MIT License
 License URI: https://github.com/bootscore/bootscore-child/blob/main/LICENSE
 Text Domain:  bootscore
*/

/* Feuille importée depuis maquette/assets/css/style.css (sections 1 à 14),
   puis section 15 : intégration WordPress (bootscore, walker, offcanvas, CF7, ACF). */

/* ==========================================================================
   Agence IA Automation — feuille de style unique
   Pré-template WordPress / ACF. Aucun style inline dans le HTML.
   1. Tokens        2. Base        3. Utilitaires typo
   4. Surfaces      5. Boutons     6. Layout & sections
   7. Grammaire nœuds / connecteurs               8. Composants
   9. En-tête, menu mobile, pied de page        10. Formulaire
  11. Swiper / Fancybox                         12. Reveal & mouvement
  13. Responsive
   ========================================================================== */

/* 1. TOKENS ================================================================ */
:root {
  /* Marque */
  --brand: #c04c25;
  --brand-hover: #a43916;
  --brand-graph: #d85a30;
  --brand-light: #ffab8d;
  --brand-light-hover: #ffd1c1;
  --brand-warm-bg: #3a241b;

  /* Fonds sombres */
  --canvas: #141618;
  --surface: #1c1f21;
  --surface-hover: #202426;
  --surface-low: #111315;
  --rule: #2a2d2f;
  --rule-light: #3a3e40;
  --rule-mute: #47494c;

  /* Encres sur fond sombre */
  --text-on-dark: #ffffff;
  --text-on-dark-body: #e8e1de;
  --text-on-dark-muted: #b5afad;
  --text-on-dark-faint: #8b8583;

  /* Surface claire (sections crème) */
  --cream: #fcf6f4;
  --cream-card: #ffffff;
  --cream-rule: #d1c5c1;
  --cream-rule-soft: #e5dbd7;
  --ink: #1e2124;
  --ink-muted: #585452;
  --ink-faint: #817c7b;

  /* Typographies */
  --font-display: "Alan Sans", Helvetica, Arial, sans-serif;
  --font-body: Inter, Helvetica, Arial, sans-serif;
  --font-hand: Caveat, cursive;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Rayons */
  --radius-card: 16px;
  --radius-ui: 8px;
  --radius-pill: 999px;
  --radius-slot: 4px;

  /* Ombres */
  --shadow-panel: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25);

  /* Espacements */
  --section-y: 80px;
  --section-y-tight: 56px;
  --section-y-wide: 96px;
  --gutter: 24px;
  --container-max: 1200px;

  /* Mouvement */
  --header-h: 77px;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-fast: 150ms;
  --dur-ui: 220ms;
  --dur-in: 520ms;
}

/* 2. BASE ================================================================== */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text-on-dark-body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--brand-light);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
a:hover {
  color: var(--brand-light-hover);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
p {
  margin: 0;
}
ul {
  margin: 0;
}

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #f4ebe8;
  outline-offset: 2px;
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Sprite d'icônes inclus en ligne : présent dans le DOM, jamais rendu. */
.sprite {
  display: none;
}

/* 3. UTILITAIRES TYPO ====================================================== */
.u-title-xl {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
}
.u-title-lg {
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.1;
}
.u-title-md {
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.u-title-sm {
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.u-lead {
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
}
.u-text {
  font-size: 15px;
  line-height: 1.6;
}
.u-text-sm {
  font-size: 13px;
  line-height: 1.6;
}

.u-measure {
  max-width: 52ch;
}
.u-measure-sm {
  max-width: 46ch;
}
.u-measure-lg {
  max-width: 68ch;
}
.u-measure-title {
  max-width: 18ch;
}

.u-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.u-hand {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
}

.u-num {
  font-variant-numeric: tabular-nums;
}

/* Sur-titre */
.eyebrow {
  display: block;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  color: var(--brand);
}
.eyebrow--on-dark {
  color: var(--brand-light);
}

/* Texte sur fond sombre */
.u-on-dark {
  color: var(--text-on-dark);
}
.u-on-dark-body {
  color: var(--text-on-dark-body);
}
.u-on-dark-muted {
  color: var(--text-on-dark-muted);
}
.u-on-dark-faint {
  color: var(--text-on-dark-faint);
}

/* Texte sur fond clair */
.u-on-light {
  color: var(--ink);
}
.u-on-light-muted {
  color: var(--ink-muted);
}
.u-on-light-faint {
  color: var(--ink-faint);
}

/* 4. SURFACES ============================================================== */
.bg-canvas {
  background: var(--canvas);
  color: var(--text-on-dark-body);
}
.bg-surface {
  background: var(--surface);
  color: var(--text-on-dark-body);
}
.bg-low {
  background: var(--surface-low);
  color: var(--text-on-dark-body);
}
.bg-alt {
  background: var(--cream);
  color: var(--ink);
}
.bg-gradient {
  background: linear-gradient(
    180deg,
    var(--canvas) 0%,
    var(--surface-low) 100%
  );
  color: var(--text-on-dark-body);
}

/* Une surface claire réaligne les couleurs de texte qu'elle contient */
.bg-alt .u-on-dark,
.bg-alt .u-on-dark-body {
  color: var(--ink);
}
.bg-alt .u-on-dark-muted {
  color: var(--ink-muted);
}
.bg-alt .u-on-dark-faint {
  color: var(--ink-faint);
}
.bg-alt a {
  color: var(--brand);
}
.bg-alt a:hover {
  color: var(--brand-hover);
}

/* 5. BOUTONS =============================================================== */
.btn {
  --btn-h: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-h);
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-ui);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.btn--sm {
  --btn-h: 44px;
  padding: 0 22px;
  font-size: 15px;
}
.btn--lg {
  --btn-h: 56px;
  padding: 0 32px;
  font-size: 17px;
}
.btn--block {
  width: 100%;
}

.btn--primary {
  background: var(--brand);
  color: #ffffff;
  transition: background-color var(--dur-fast) var(--ease);
}
.btn--primary:hover {
  background: var(--brand-hover);
  color: #ffffff;
}

/* Le nœud fait le tour du bouton, comme dans le design system : un nœud de 10 px
   parcourt le contour. Aucun SVG, aucun JavaScript, pas de déplacement du bouton.
   Au retrait du survol le nœud disparaît en fondu et l'animation se fige où elle
   en était — pas de rembobinage. */
.btn--primary {
  position: relative;
  overflow: visible;
}
.btn--primary::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-graph);
  offset-path: border-box;
  offset-anchor: center;
  offset-rotate: 0deg;
  offset-distance: 0%;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
  animation: btn-lap 1.5s linear infinite;
  animation-play-state: paused;
}
.btn--primary:hover::after,
.btn--primary:focus-visible::after {
  opacity: 1;
  animation-play-state: running;
}
@keyframes btn-lap {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}
@supports not (offset-path: border-box) {
  .btn--primary::after {
    display: none;
  }
  .btn--primary::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand-graph);
    opacity: 0;
    transform: translate(-50%, 4px);
    transition:
      opacity var(--dur-fast) var(--ease),
      transform var(--dur-fast) var(--ease);
  }
  .btn--primary:hover::before {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.btn--accent {
  background: var(--brand-graph);
  color: #ffffff;
}
.btn--accent:hover {
  background: var(--brand);
  color: #ffffff;
}

.btn--outline {
  background: transparent;
  border-color: var(--rule-light);
  color: var(--text-on-dark-body);
}
.btn--outline:hover {
  border-color: var(--text-on-dark-faint);
  color: var(--text-on-dark);
}

/* Variante claire, pour un bouton posé sur fond clair */
.btn--on-light {
  background: transparent;
  border-color: var(--cream-rule);
  color: var(--ink);
}
.btn--on-light:hover {
  border-color: var(--ink-faint);
  color: var(--ink);
}

.btn--ghost {
  background: transparent;
  color: var(--brand-light);
  min-height: auto;
  padding: 0;
}
.btn--ghost:hover {
  color: var(--brand-light-hover);
}

/* Lien fléché : le connecteur sert de flèche */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.link-arrow::after {
  content: "";
  width: 34px;
  height: 12px;
  flex: 0 0 auto;
  /* Le disque est centré à 5,5px du bord droit : centré sur `right`, il était
     coupé en deux par le bord de la boîte. */
  background:
    linear-gradient(var(--brand-graph), var(--brand-graph)) left center / 20px
      3px no-repeat,
    radial-gradient(
      circle 5.5px at calc(100% - 5.5px) center,
      var(--brand-graph) 99%,
      transparent 100%
    );
  transition: transform var(--dur-ui) var(--ease);
}
.link-arrow:hover::after {
  transform: translateX(4px);
}
.bg-alt .link-arrow::after {
  background:
    linear-gradient(var(--brand), var(--brand)) left center / 20px 3px no-repeat,
    radial-gradient(
      circle 5.5px at calc(100% - 5.5px) center,
      var(--brand) 99%,
      transparent 100%
    );
}

/* 6. LAYOUT & SECTIONS ===================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main {
  counter-reset: section;
}

.section {
  position: relative;
  padding-block: var(--section-y);
  counter-increment: section;
}
.section--tight {
  padding-block: var(--section-y-tight);
}
.section--wide {
  padding-block: var(--section-y-wide);
}
.section--ruled {
  border-bottom: 1px solid var(--rule);
}
.section--clip {
  overflow: hidden;
}

/* Repère de section : le numéro est produit par CSS, il n'est pas une donnée éditable */
.section__marker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 48px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-dark-faint);
}
.section__marker::before {
  content: counter(section, decimal-leading-zero);
}
.section__marker .section__rule {
  height: 1px;
  width: 56px;
  background: var(--rule);
  flex: 0 0 auto;
}
.bg-alt .section__marker {
  color: var(--ink-muted);
}
.bg-alt .section__marker .section__rule {
  background: var(--cream-rule);
}

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.section__title + .section__text {
  margin-top: 24px;
}
.section__note {
  margin-top: 32px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-on-dark-faint);
}
.bg-alt .section__note {
  color: var(--ink-muted);
}

/* 7. GRAMMAIRE NŒUDS / CONNECTEURS ======================================== */
.node {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.node--human {
  background: var(--text-on-dark-faint);
}
.node--agency {
  background: var(--brand-graph);
}
.node--added {
  background: transparent;
  border: 2px solid var(--text-on-dark-body);
}
.node--lg {
  width: 15px;
  height: 15px;
}
.bg-alt .node--human {
  background: var(--ink-faint);
}
.bg-alt .node--added {
  border-color: var(--ink);
}

.connector {
  display: inline-block;
  height: 3px;
  width: 18px;
  border-radius: 2px;
  flex: 0 0 auto;
}
.connector--live {
  background: var(--brand-graph);
}
.connector--idle {
  background: var(--rule-light);
}
.bg-alt .connector--idle {
  background: var(--cream-rule);
}

.flow {
  display: flex;
  align-items: center;
  gap: 3px;
}

.legend {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-on-dark-faint);
}
.legend__item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bg-alt .legend {
  color: var(--ink-muted);
}

/* Liste ordonnée en connecteur vertical, jamais de puces */
.chain {
  list-style: none;
  padding: 0;
  margin: 0;
}
.chain__item {
  position: relative;
  padding-left: 40px;
  padding-bottom: 30px;
}
.chain__item:last-child {
  padding-bottom: 0;
}
.chain__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--text-on-dark-faint);
}
.chain__item::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 22px;
  bottom: 0;
  width: 3px;
  background: var(--text-on-dark-faint);
}
.chain__item:last-child::after {
  display: none;
}
.chain__item--agency::before,
.chain__item--agency::after {
  background: var(--brand-graph);
}
.bg-alt .chain__item::before,
.bg-alt .chain__item::after {
  background: var(--ink-faint);
}
.bg-alt .chain__item--agency::before,
.bg-alt .chain__item--agency::after {
  background: var(--brand-graph);
}
.chain__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
}
.chain__text {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-on-dark-faint);
}
.bg-alt .chain__text {
  color: var(--ink-muted);
}

/* 8. COMPOSANTS =========================================================== */
/* Icônes du design system (sprite assets/img/icons.svg).
   Le trait suit currentColor, le point orange est porté par le symbole. */
.icon {
  display: block;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  color: var(--text-on-dark-body);
}
.icon--sm {
  width: 24px;
  height: 24px;
}
.icon--lg {
  width: 40px;
  height: 40px;
}
.icon--faint {
  color: var(--text-on-dark-faint);
}
.bg-alt .icon--faint {
  color: var(--ink-faint);
}
.bg-alt .icon {
  color: var(--ink);
}


/* Icônes AIA — trait encre, nœud orange plein */
.fa-kit-duotone{
   --fa-primary-color:#F4EBE8 !important;
  --fa-secondary-color: var(--brand); /* le nœud  */
  --fa-secondary-opacity:1;      /* indispensable : FA le met à 0.4 par défaut */
}

.card .fa-kit-duotone{
    --fa-primary-color: var(--ink-faint) !important;
}

/* Sous 20 px : le nœud prend la couleur du trait */
.fa-kit-duotone.is-small{
  --fa-secondary-color:var(--fa-primary-color);
}

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 32px;
}
.card--link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition:
    background-color var(--dur-ui) var(--ease),
    border-color var(--dur-ui) var(--ease);
}
.card--link:hover {
  background: var(--surface-hover);
  border-color: var(--rule-light);
  color: inherit;
}
.card--flush {
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  object-fit: cover;
}

/* Bien dimensionner les images des cards de la section-equipe.php */

.card-equipe img{
  aspect-ratio: 1/1;
}

@media (max-width: 576px){
  .card-equipe img{
    aspect-ratio: 3/4;
  }
}



/* Carte de liste : icône à gauche, pile de texte à droite. */
.card--split {
  display: flex;
  gap: 24px;
  padding: 32px;
}
/* Bandeau empilé : réserve de logo, corps, complétences servies. Jamais une
   grille de cartes — deux entrées en trois colonnes laisseraient un trou. */
.card--banner {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 300px;
  gap: 48px;
  align-items: start;
  padding: 32px;
}

.card--banner .logo-slot {
  height: 100%;
}

.served {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 32px;
  border-left: 1px solid var(--rule);
}
.served__title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-on-dark-faint);
}
.served__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.served__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--brand-light);
}
.bg-alt .served {
  border-color: var(--cream-rule);
}
.bg-alt .served__title {
  color: var(--ink-faint);
}
.bg-alt .served__item {
  color: var(--brand);
}
.card__stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card__stack .link-arrow {
  margin-top: 2px;
}
.bg-alt .card {
  background: var(--cream-card);
  border-color: var(--cream-rule);
}
.bg-alt .card--link:hover {
  background: var(--cream-card);
  border-color: var(--ink-faint);
}

.card__media {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-dark-faint);
}
.bg-alt .card__kicker {
  color: var(--ink-faint);
}
.card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--text-on-dark);
}
/* Titre de carte de liste : 26px fixes, la grille à deux colonnes ne bouge pas. */
.card__title--md {
  font-size: 26px;
  line-height: 1.25;
}
.card__title--lg {
  font-size: 34px;
  line-height: 1.2;
}
.card__lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-on-dark-muted);
  text-wrap: pretty;
}
.bg-alt .card__lead {
  color: var(--ink-muted);
}
/* Titre de tête : déclaré après le composant, il ne dépend pas de l'ordre des utilitaires. */
.card__title--lead {
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.bg-alt .card__title {
  color: var(--ink);
}
.card__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-on-dark-faint);
}
.bg-alt .card__text {
  color: var(--ink-muted);
}
.card__icon {
  font-size: 22px;
  color: var(--text-on-dark-faint);
}
.bg-alt .card__icon {
  color: var(--ink-muted);
}

.stat {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 24px;
}
.stat__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  color: var(--text-on-dark);
}
.stat__label {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-on-dark-faint);
}

.tag {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-hover);
  border: 1px solid var(--rule);
  font-size: 13px;
  color: var(--text-on-dark-muted);
}
.tag--hot {
  background: var(--brand-warm-bg);
  border-color: transparent;
  color: var(--brand-light-hover);
  font-weight: 600;
  font-size: 12px;
}
.bg-alt .tag {
  background: var(--cream);
  border-color: var(--cream-rule);
  color: var(--ink-muted);
}

.pill {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  border: 1px solid var(--rule-light);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-on-dark-muted);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}
.pill:hover {
  border-color: var(--text-on-dark-faint);
  color: var(--text-on-dark);
}
.pill.is-active {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--canvas);
  font-weight: 600;
}

/* WP : les réserves hachurées (.reserve) de la maquette ne sont pas intégrées —
   un champ vide masque simplement son élément. */

/* Tableau de compétences (grille de lignes cliquables) */
.rows {
  border-top: 1px solid var(--rule);
}
.row-link {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 240px 180px 40px;
  gap: 32px;
  align-items: center;
  padding: 32px 16px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-ui) var(--ease);
}

.row-link:hover {
  background: var(--surface);
  color: inherit;
}
.row-link__index {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-on-dark-faint);
}
.row-link__name {
  display: flex;
  align-items: center;
  gap: 20px;
}
.row-link__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  line-height: 1.25;
  color: var(--text-on-dark);
}
.row-link__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-on-dark-faint);
}
.row-link__arrow {
  justify-self: end;
  transition: transform var(--dur-ui) var(--ease);
}
.row-link:hover .row-link__arrow {
  transform: translateX(4px);
}
.rows__head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 240px 180px 40px;
  gap: 32px;
  padding: 0 16px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-dark-faint);
}

/* Ligne brève : index, titre, flèche. Grille propre, sans colonnes vides. */
.row-brief {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 32px;
  gap: 20px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-ui) var(--ease);
}
.row-brief:first-of-type {
  border-top: 1px solid var(--rule);
}
.row-brief:hover {
  color: inherit;
}
.row-brief__index {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-on-dark-faint);
}
.row-brief__arrow {
  justify-self: end;
  transition: transform var(--dur-ui) var(--ease);
}
.row-brief:hover .row-brief__arrow {
  transform: translateX(4px);
}

/* Ligne simple sur fond clair (liste d'outils) */
.row-plain {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 40px;
  gap: 20px;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid var(--cream-rule);
  text-decoration: none;
  color: inherit;
}


/* Disposition sous 425 px : voir la fin du fichier, après .row-plain--logo */

@media (max-width: 425px) {
  .row-plain {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo arrow"
      "desc desc";
    gap: 12px 16px;
  }
  .row-plain  .row-plain__logo {
    grid-area: logo;
  }
  .row-plain .row-link__arrow {
    grid-area: arrow;
  }
  .row-plain .row-plain__content {
    grid-area: desc;
    gap: 10px;
  }
}

@media (min-width: 425px) {

.row-plain--logo {
  grid-template-columns: 96px minmax(0, 1fr) 40px;
}
}



.row-plain:last-of-type {
  border-bottom: 1px solid var(--cream-rule);
}
.row-plain__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
}
.row-plain__text {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* Point d'étape survolable */
.dot-tip {
  position: relative;
  cursor: help;
}
.dot-tip::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}

.tip {
  position: fixed;
  z-index: 90;
  max-width: 280px;
  padding: 12px 14px;
  border: 1px solid var(--rule-light);
  border-radius: var(--radius-ui);
  background: var(--surface);
  color: var(--text-on-dark-body);
  font-size: 13px;
  line-height: 1.5;
  box-shadow: var(--shadow-panel);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease);
  pointer-events: none;
}
.tip.is-visible {
  opacity: 1;
  visibility: visible;
}

/* Estimateur */
.estim__field {
  margin-top: 40px;
}
.estim__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.estim__card {
   padding: 24px !important;
}

.estim__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-on-dark-faint);
}
.estim__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1;
  color: var(--text-on-dark);
}
.estim__bounds {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-on-dark-faint);
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--rule-light);
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--brand-graph);
}
input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--brand-graph);
}

.gauge {
  margin-top: 16px;
  height: 14px;
  border-radius: 7px;
  background: var(--rule);
  overflow: hidden;
  display: flex;
}
.gauge__part {
  display: block;
  height: 100%;
}
.gauge__part--human {
  background: var(--text-on-dark-faint);
}
.gauge__part--agency {
  background: var(--brand-graph);
}

.result__kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-on-dark-faint);
}
.result__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp( 30px, 19px + 2.9vw  ,48px);
  line-height: 1;
  color: var(--text-on-dark);
}
.result__value--accent {
  font-size: clamp( 34px, 23px + 2.9vw, 64px);
  letter-spacing: -0.02em;
  color: var(--brand-light);
}


.result__unit {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-on-dark-faint);
}
.result__split {
  display: flex;
  gap: 40px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-on-dark-faint);
}
.result__split-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.result__split-value {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-on-dark-body);
}
.result__split-value--accent {
  color: var(--brand-light);
}
.result__block {
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.result__base {
  padding: 16px;
  border-radius: var(--radius-ui);
  background: var(--canvas);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-on-dark-faint);
}

/* Carte de flux (schéma du hero) */
.flux__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-dark-faint);
  flex-wrap: wrap;
}
.flux__live {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-graph);
  margin-right: 8px;
}
.flux__diagram {
  position: relative;
}
.flux__diagram svg {
  width: 100%;
  height: auto;
  display: block;
}
.flux__steps {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.flux__step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-on-dark-faint);
}
.flux__step-index {
  color: var(--text-on-dark-body);
}

/* Étapes en frise verticale (section Étapes) */
.steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.steps__item {
  position: relative;
  padding: 0 0 48px 40px;
}
.steps__item:last-child {
  padding-bottom: 0;
}
.steps__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
}
.steps__item::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 26px;
  bottom: 0;
  width: 3px;
  background: var(--ink);
}
.steps__item:last-child::after {
  display: none;
}
.steps__item--agency::before,
.steps__item--agency::after {
  background: var(--brand-graph);
}
.steps__item--loop::after {
  background: none;
  border-left: 3px dashed var(--brand-graph);
  width: 0;
}
.steps__index {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.steps__title {
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.steps__text {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
}
.steps__loop {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--brand);
}

.aside-card {
  padding: 24px;
  border: 1px solid var(--cream-rule);
  border-radius: var(--radius-card);
  background: var(--cream-card);
}

/* Réserve de logo d'outil */
.logo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 34px;
  border: 1px solid var(--rule-light);
  border-radius: var(--radius-slot);
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-on-dark-faint);
}
/* Variante mot : le nom de l'outil tient la place du logo tant qu'on n'a pas
   le fichier officiel monochrome. */
.logo-slot--word {
  width: auto;
  min-width: 120px;
  padding: 0 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-on-dark-body);
}
/* Réserve de logo d'un bandeau : la boîte réglementaire, en attente du SVG officiel. */
.logo-slot--box {
  width: 100%;
  height: 88px;
  padding: 12px;
  border-radius: var(--radius-ui);
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}
.tool-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.tool-slide__name {
  font-size: 13px;
  color: var(--text-on-dark-faint);
  white-space: nowrap;
}

/* 9. EN-TÊTE, MENU MOBILE, PIED DE PAGE =================================== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 40px;
  padding-block: 8px;
  background: var(--ink);
  color: var(--text-on-dark-muted);
  font-size: 12px;
}
.topbar__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}
/* Menu secondaire discret, au-dessus de l'en-tête */
.topbar__nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  margin: 0;
}
.topbar__nav li {
  display: flex;
  align-items: center;
}
.topbar__nav li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  margin-inline: 12px;
  border-radius: 50%;
  background: var(--cream-rule);
}
.topbar__nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

/* Les mêmes liens, repliés dans le menu mobile sous 576 px */
.offcanvas-actions__links {
  list-style: none;
  display: flex;
  
  justify-content: space-between;
  gap: 16px;
  padding: 0;
  margin: 0;
}
.offcanvas-actions__links a {
  font-size: 14px;
  color: var(--text-on-dark-muted);
  text-decoration: none;
}
.offcanvas-actions__links a:hover,
.offcanvas-actions__links a[aria-current="page"] {
  color: var(--text-on-dark);
}

.topbar a {
  font-size: 13px;
  color: var(--cream);
  text-decoration: none;
}
.topbar a:hover {
  color: var(--text-on-dark-muted);
}

.topbar a[aria-current="page"]{
  font-weight: 800 !important;
  color: var(--cream) !important;
}


.topbar i {
  margin-right: 6px;
  color: var(--brand);
}

/* WP : le fond et le flou sont portés par ::before (section 15) — un backdrop-filter
   sur l'en-tête deviendrait bloc conteneur de l'offcanvas fixed et le casserait. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--rule);
  transition:
    box-shadow var(--dur-ui) var(--ease),
    background-color var(--dur-ui) var(--ease);
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-panel);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: calc(var(--header-h) - 1px);
}
.site-header__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  line-height: 0;
}
.site-header__logo img {
  width: 168px;
}
.site-header__nav {
  flex: 1;
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}
.site-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--text-on-dark-muted);
  text-decoration: none;
}
.site-header__phone:hover {
  color: var(--text-on-dark);
}

/* WP : la navigation (.nav, .nav__sub) et le menu mobile (.offcanvas-nav,
   .offcanvas-backdrop) de la maquette sont remplacés par le walker et l'offcanvas
   Bootstrap de bootscore, restylés en section 15. */
.nav__chevron {
  margin-left: 8px;
  font-size: 9px;
  transition: transform var(--dur-fast) var(--ease);
}
/* Chevron porté par un bouton frère du lien : repère au survol sur grand écran,
   commande d'ouverture du sous-menu dans l'offcanvas (inc/setup.php). */
.nav__sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-on-dark-muted);
  cursor: pointer;
}

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule-light);
  border-radius: var(--radius-ui);
  background: transparent;
  color: var(--text-on-dark-body);
  font-size: 18px;
  cursor: pointer;
}

.site-footer {
  padding-block: 48px;
  background: var(--surface-low);
  border-top: 1px solid var(--rule);
}
.site-footer__brand img {
  width: 170px;
}
.site-footer__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-dark-faint);
  margin-bottom: 16px;
}
.site-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.site-footer__list a {
  font-size: 13px;
  color: var(--text-on-dark-muted);
  text-decoration: none;
}
.site-footer__list a:hover {
  color: var(--text-on-dark);
}
.site-footer__text {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-on-dark-muted);
}
.site-footer__social {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule-light);
  border-radius: var(--radius-ui);
  color: var(--text-on-dark-muted);
  text-decoration: none;
}
.site-footer__social a:hover {
  border-color: var(--text-on-dark-faint);
  color: var(--text-on-dark);
}
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-dark-faint);
  flex-wrap: wrap;
}
.site-footer__legal {
  list-style: none;
  display: flex;
  gap: 24px;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}
.site-footer__legal a {
  color: var(--text-on-dark-faint);
  text-decoration: none;
}
.site-footer__legal a:hover {
  color: var(--text-on-dark);
}
/* Bouton qui rouvre les préférences de cookies : il doit passer pour un lien */
.site-footer__link-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--text-on-dark-faint);
  cursor: pointer;
}
.site-footer__link-btn:hover {
  color: var(--text-on-dark);
}
.site-footer__credits {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer__credits a {
  color: var(--text-on-dark-faint);
  text-decoration: none;
}
.site-footer__credits a:hover {
  color: var(--text-on-dark);
}

/* Hero */
.hero {
  position: relative;
  padding-block: var(--section-y-wide) var(--section-y);
}
.hero__title {
  margin-top: 20px;
}
.hero__text {
  margin-top: 28px;
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.hero--page {
  padding-block: 64px 48px;
}
.hero--page .hero__title {
  margin-top: 12px;
}
.hero--page .hero__text {
  margin-top: 20px;
}

.hero img{
  border-radius: var(--radius-card);
}

.breadcrumb-trail {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin: 0 0 32px;
  font-size: 13px;
  color: var(--text-on-dark-faint);
  flex-wrap: wrap;
}
.breadcrumb-trail a {
  color: var(--text-on-dark-faint);
  text-decoration: none;
}
.breadcrumb-trail a:hover {
  color: var(--text-on-dark);
}
.breadcrumb-trail li + li::before {
  content: "›";
  margin-right: 10px;
  color: var(--rule-mute);
}

/* 10. FORMULAIRE (placeholder CF7) ======================================== */
.form__field {
  margin-bottom: 24px;
}
.form__label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-dark-faint);
}
.form__control {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--canvas);
  border: 1px solid var(--rule-light);
  border-radius: var(--radius-ui);
  color: var(--text-on-dark-body);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}
.form__control:focus {
  border-color: var(--text-on-dark-faint);
  outline-offset: 1px;
}
textarea.form__control {
  resize: vertical;
  min-height: 140px;
}
.form__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-on-dark-faint);
}
.form__consent input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--brand);
  flex: 0 0 auto;
}
.form__note {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-on-dark-faint);
}

.wpcf7-quiz-label{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-on-dark-faint);
}

/* Pour pouvoir mettre le quiz en plein largeur */
.quiz__field label{
  width: 100%;
}

/* 11. FAQ, SWIPER, FANCYBOX ============================================== */
.faq {
  border-top: 1px solid var(--rule);
}
.faq__item {
  border-bottom: 1px solid var(--rule);
}
.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 0;
  background: transparent;
  border: 0;
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.faq__icon {
  color: var(--brand-graph);
  transition: transform var(--dur-ui) var(--ease);
}
.faq__item.is-open .faq__icon {
  transform: rotate(45deg);
}
.faq__answer {
  padding-bottom: 24px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-on-dark-muted);
}
.bg-alt .faq {
  border-color: var(--cream-rule);
}
.bg-alt .faq__item {
  border-color: var(--cream-rule);
}
.bg-alt .faq__question {
  color: var(--ink);
}
.bg-alt .faq__answer {
  color: var(--ink-muted);
}

.swiper {
  width: 100%;
}

/* Bandeau défilant : piste doublée dans le HTML, translation de la moitié de sa
   largeur — la boucle est invisible et ne dépend d'aucun script. */
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}
/* L'espacement est port\u00e9 par les items, pas par la piste : avec `gap`, la moiti\u00e9
   de la largeur vaut 12 items + 11,5 goutti\u00e8res et le -50 % tombe \u00e0 c\u00f4t\u00e9. */
.marquee__track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
}
.marquee__track > .tool-slide {
  padding-inline-end: 56px;
}
.js .marquee__track {
  animation: defile 44s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}
@keyframes defile {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
.swiper-wrapper {
  align-items: center;
}
.swiper-slide {
  width: auto;
}
.swiper-pagination {
  position: static;
  margin-top: 32px;
}
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: var(--rule-light);
  opacity: 1;
}
.swiper-pagination-bullet-active {
  background: var(--brand-graph);
}
.swiper-nav {
  display: flex;
  gap: 10px;
}
.swiper-nav[hidden] {
  display: none;
}
.swiper-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule-light);
  border-radius: var(--radius-ui);
  background: transparent;
  color: var(--text-on-dark-body);
  cursor: pointer;
}
.swiper-nav__btn:hover {
  border-color: var(--text-on-dark-faint);
}
.swiper-button-lock {
  opacity: 0.35;
  pointer-events: none;
}

.gallery__item {
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* 12. REVEAL & MOUVEMENT ================================================= */
/* Le contenu est visible sans JavaScript : l'état initial n'est posé
   que si la classe .js est présente sur <html>. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-in) var(--ease),
    transform var(--dur-in) var(--ease);
}
.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

.js [data-reveal-x] {
  opacity: 0;
  transform: translateX(-18px);
  transition:
    opacity var(--dur-in) var(--ease),
    transform var(--dur-in) var(--ease);
}
.js [data-reveal-x].is-revealed {
  opacity: 1;
  transform: none;
}

.js .flux__live {
  animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

/* Tracés de flux : le trait se dessine, les nœuds éclosent. Aucune ligne ne
   s'arrête dans le vide, donc le nœud arrive après son trait. */
.js [data-flux] .flux-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.js [data-flux].is-revealed .flux-line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 740ms var(--ease);
}
.js [data-flux].is-revealed .flux-line--live {
  transition-delay: 220ms;
}
.js [data-flux] .flux-node {
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
}
.js [data-flux].is-revealed .flux-node {
  transform: scale(1);
  transition: transform 330ms var(--ease);
}
.js [data-flux].is-revealed .flux-node:nth-of-type(1) {
  transition-delay: 300ms;
}
.js [data-flux].is-revealed .flux-node:nth-of-type(2) {
  transition-delay: 620ms;
}
.js [data-flux].is-revealed .flux-node:nth-of-type(3) {
  transition-delay: 860ms;
}

/* Décoration de flux du bandeau d'appel à l'action : elle vit dans la marge
   basse, jamais sous le texte. */
.section__deco {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 480px;
  max-width: 45%;
  height: auto;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js [data-reveal],
  .js [data-reveal-x] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js .flux__live {
    animation: none;
  }
  /* Bandeau défilant : arrêt net, la piste redevient un rang à faire défiler soi-même. */
  .js .marquee__track {
    animation: none;
  }
  .marquee {
    overflow-x: auto;
  }
  .btn--primary::after {
    animation: none;
  }
  .js [data-flux] .flux-line {
    stroke-dashoffset: 0;
  }
  .js [data-flux] .flux-node {
    transform: none;
  }
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* 13. CONTENU ÉDITORIAL & PAGES INTERNES ================================= */

/* Sous-navigation d'ancres, sous l'en-tête collant */
.subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  background: rgba(20, 22, 24, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.subnav__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 56px;
  padding: 0;
  margin: 0;
  overflow-x: auto;
}
.subnav__list a {
  font-size: 14px;
  color: var(--text-on-dark-muted);
  text-decoration: none;
  white-space: nowrap;
}
.subnav__list a:hover {
  color: var(--text-on-dark);
}

/* Filtres de listing */
.filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.filters__count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-dark-faint);
}

/* Corps d'article */
.prose {
  max-width: 68ch;
}
.prose > * + * {
  margin-top: 24px;
}
.prose p {
  font-size: 17px;
  line-height: 1.7;
  text-wrap: pretty;
}
.prose h2 {
  margin-top: 56px;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-on-dark);
}
.prose h3 {
  margin-top: 40px;
  font-size: 22px;
  line-height: 1.3;
  color: var(--text-on-dark);
}
.prose strong {
  color: var(--text-on-dark);
  font-weight: 600;
}
.prose figure {
  margin: 40px 0 0;
}
.prose figure img {
  border-radius: var(--radius-card);
  width: 100%;
}
.prose figcaption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-on-dark-faint);
}
.prose blockquote {
  margin: 40px 0 0;
  padding-left: 24px;
  border-left: 3px solid var(--brand-graph);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.45;
  color: var(--text-on-dark);
}
.prose .chain {
  margin-top: 28px;
}

/* Sommaire */
/* Sommaire : c'est la colonne qui colle, pas le seul encart — le sommaire et la
   signature descendent ensemble. */
.sticky-col {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  align-self: flex-start;
}


.toc {
  position: static;
  padding: 24px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.toc__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-dark-faint);
}
.toc__list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.toc__list a {
  display: grid;
  grid-template-columns: 9px 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-on-dark-muted);
  text-decoration: none;
}
.toc__list a::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rule-light);
  transform: translateY(4px);
  transition: background-color var(--dur-ui) var(--ease);
}
.toc__list a:hover {
  color: var(--text-on-dark);
}
.toc__list a:hover::before {
  background: var(--brand-graph);
}
/* Nœud plein = section courante. */
.toc__item.is-current a {
  color: var(--text-on-dark);
  font-weight: 600;
}
.toc__item.is-current a::before {
  background: var(--brand-graph);
}
.toc__note {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-dark-faint);
}

/* Encart d'auteur */
.author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.author__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--brand-warm-bg);
  color: var(--brand-light-hover);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
}
.author__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--text-on-dark);
}
.author__role {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-on-dark-faint);
}

/* Partage */
.share {
  display: flex;
  gap: 8px;
}
.share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule-light);
  border-radius: var(--radius-ui);
  color: var(--text-on-dark-muted);
  text-decoration: none;
}
.share__btn:hover {
  border-color: var(--text-on-dark-faint);
  color: var(--text-on-dark);
}

/* Encart d'invitation, posé en crème dans une colonne sombre */
.card--invite {
  background: var(--cream);
  border-color: transparent;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}
.card--invite .card__title {
  color: var(--ink);
}
.card--invite .card__text {
  color: var(--ink-muted);
}

/* Colonne latérale d'article */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Image de mise en avant */
.cover {
  margin: 0 0 40px;
}
.cover img {
  display: block;
  width: 100%;
  border-radius: var(--radius-card);
}
.cover figcaption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-on-dark-faint);
}

/* Barre de progression de lecture */
.reading-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 70;
  pointer-events: none;
}
.reading-bar__fill {
  display: block;
  height: 100%;
  background: var(--brand-graph);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Méta d'article */
.meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-dark-faint);
}
.meta__sep {
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--rule-light);
}

/* Deux colonnes : ce qu'on fait, ce qu'on ne fait pas */
.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.compare__col {
  padding: 32px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.compare__col--out {
  background: var(--surface-low);
}
.compare__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--text-on-dark);
}
.compare__list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.compare__item {
  display: grid;
  grid-template-columns: 11px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-on-dark-muted);
}
.compare__item .node {
  transform: translateY(6px);
}
.bg-alt .compare__col {
  background: var(--cream-card);
  border-color: var(--cream-rule);
}
.bg-alt .compare__col--out {
  background: var(--cream);
}
/* Surface claire : les composants qui codent une encre sur fond sombre
   doivent être réalignés, sinon le texte passe blanc sur blanc. */
.bg-alt .compare__title {
  color: var(--ink);
}
.bg-alt .compare__item {
  color: var(--ink-muted);
}
.bg-alt .kv dt {
  color: var(--ink-faint);
}
.bg-alt .kv dd {
  color: var(--ink);
}
.bg-alt .quote__author {
  color: var(--ink-muted);
}
.bg-alt .meta {
  color: var(--ink-muted);
}
.bg-alt .filters__count {
  color: var(--ink-muted);
}
.bg-alt .prose p {
  color: var(--ink-muted);
}
.bg-alt .prose h2,
.bg-alt .prose h3,
.bg-alt .prose strong,
.bg-alt .prose blockquote {
  color: var(--ink);
}
.bg-alt .prose figcaption {
  color: var(--ink-faint);
}
.bg-alt .rows {
  border-color: var(--cream-rule);
}
.bg-alt .row-link {
  border-color: var(--cream-rule);
}
.bg-alt .row-link:hover {
  background: var(--cream-card);
}
.bg-alt .row-link__index {
  color: var(--ink-faint);
}
.bg-alt .row-link__title {
  color: var(--ink);
}
.bg-alt .row-link__text {
  color: var(--ink-muted);
}
.bg-alt .rows__head {
  color: var(--ink-muted);
}

/* Citation encadrée (réserve tant qu'aucun client n'a validé la sienne) */
.quote {
  padding: 32px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.quote__text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.45;
  color: var(--text-on-dark);
}
.quote__author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  font-size: 13px;
  color: var(--text-on-dark-faint);
}
.bg-alt .quote {
  background: var(--cream-card);
  border-color: var(--cream-rule);
}
.bg-alt .quote__text {
  color: var(--ink);
}

/* Paires libellé / valeur */
.kv {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px 28px;
  margin: 0;
}
.kv dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-dark-faint);
  padding-top: 3px;
}
.kv dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-on-dark-body);
}

/* Galerie Fancybox */
.gallery__item {
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pagination */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 56px;
}
.pager__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--rule-light);
  border-radius: var(--radius-ui);
  color: var(--text-on-dark-muted);
  text-decoration: none;
  font-size: 14px;
}
.pager__link:hover {
  border-color: var(--text-on-dark-faint);
  color: var(--text-on-dark);
}
.pager__link.is-current {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--canvas);
  font-weight: 600;
}
.pager__link[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
}

.bg-alt .stat {
  background: var(--cream-card);
  border-color: var(--cream-rule);
}
.bg-alt .stat__value {
  color: var(--ink);
}
.bg-alt .stat__label {
  color: var(--ink-muted);
}

/* 14. RESPONSIVE ========================================================= */
@media (max-width: 1199.98px) {
  .row-link,
  .rows__head {
    grid-template-columns: 48px minmax(0, 1fr) 200px 40px;
  }
  .row-link__flow,
  .rows__head-flow {
    display: none;
  }
  .card--banner {
    grid-template-columns: 160px minmax(0, 1fr) 240px;
    gap: 32px;
  }
  .served {
    padding-left: 24px;
  }
}

@media (max-width: 991.98px) {
  /* --gutter reste à 24px : c'est la valeur qui annule exactement la marge
     négative des .row Bootstrap (--bs-gutter-x / 2). La baisser rouvre un
     défilement horizontal de quelques pixels. */
  :root {
    --section-y: 64px;
    --section-y-wide: 72px;
  }
  .section__deco {
    display: none;
  }
  .sticky-col {
    position: static;
  }
  .site-header__nav,
  .site-header__phone {
    display: none;
  }
  .burger {
    display: inline-flex;
  }
  .row-link,
  .rows__head {
    grid-template-columns: 40px minmax(0, 1fr) 32px;
  }
  .row-link__text,
  .rows__head-text {
    display: none;
  }
  
  .steps__title {
    font-size: 26px;
  }
}

@media (max-width: 767.98px) {
  .compare {
    grid-template-columns: minmax(0, 1fr);
  }
  .card--banner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .card--split {
    flex-direction: column;
  }
  .served {
    padding-left: 0;
    padding-top: 24px;
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .logo-slot--box {
    max-width: 200px;
  }
}

@media (max-width: 575.98px) {
  .topbar {
    display: none;
  }
  .btn {
    width: 100%;
  }
  .btn--ghost,
  .link-arrow {
    width: auto;
  }
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .result__split {
    flex-direction: column;
    gap: 20px;
  }
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 15. INTÉGRATION WORDPRESS ============================================== */

/* Ancres sous l'en-tête collant ([id] { scroll-margin-top } de bootscore) */
:root {
  --bs-scroll-margin-top: calc(var(--header-h) + 16px);
}

/* Barre d'administration WordPress */
.admin-bar .site-header {
  top: var(--wp-admin--admin-bar--height, 32px);
}
.admin-bar .subnav {
  top: calc(var(--wp-admin--admin-bar--height, 32px) + var(--header-h));
}
.admin-bar .sticky-col {
  top: calc(var(--wp-admin--admin-bar--height, 32px) + var(--header-h) + 32px);
}

/* En-tête : fond + flou sur un pseudo-élément (gotcha backdrop-filter × offcanvas fixed) */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(20, 22, 24, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
#nav-main.navbar {
  padding: 0;
}
.site-header .navbar-brand {
  margin: 0;
  padding: 0;
}
.site-header__logo img {
  width: 168px;
  height: auto;
}
.offcanvas-logo {
  line-height: 0;
}
.offcanvas-logo img {
  width: 140px;
  height: auto;
}
.burger {
  flex: 0 0 auto;
}

/* Menu principal (walker bootscore) — desktop */
@media (min-width: 992px) {
  #nav-main .offcanvas {
    flex: 1 1 auto;
  }
  #nav-main .offcanvas-body {
    flex-grow: 1;
    justify-content: center;
  }
  #bootscore-navbar {
    gap: 26px;
    align-items: center;
  }
  #bootscore-navbar > .nav-item {
    display: flex;
    align-items: center;
  }
  #bootscore-navbar > .nav-item > .nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0 0 4px;
    font-size: 15px;
    color: var(--text-on-dark-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
  }
  /* Le survol ouvre le panneau : le chevron n'est qu'un repère. Le retrait bas
     reprend celui du lien (4px) et sa bordure (2px), pour aligner les textes. */
  #bootscore-navbar > .nav-item > .nav__sub-toggle {
    pointer-events: none;
    padding-bottom: 6px;
  }
  #bootscore-navbar > .nav-item:hover > .nav__sub-toggle,
  #bootscore-navbar > .nav-item:focus-within > .nav__sub-toggle {
    color: var(--text-on-dark);
  }
  /* Règle à part : un navigateur sans :has() écarterait tout le groupe */
  #bootscore-navbar > .nav-item:has(> .nav-link.active) > .nav__sub-toggle {
    color: var(--text-on-dark);
  }
  #bootscore-navbar > .nav-item > .nav-link:hover {
    color: var(--text-on-dark);
  }
  #bootscore-navbar > .nav-item > .nav-link.active {
    color: var(--text-on-dark);
    font-weight: 600;
    border-bottom-color: var(--brand-graph);
  }

  /* Sous-menu : survol et focus clavier, sans JavaScript.
     Tous les panneaux s'ouvrent sur la même ligne, --nav-panel-gap sous le bord
     bas de l'en-tête : le mega menu est ancré sur la barre, un sous-menu classique
     sur son entrée. D'où le rattrapage de la demi-hauteur de barre plus bas. */
  #bootscore-navbar {
    --nav-panel-gap: 8px;
  }
  #bootscore-navbar .dropdown {
    position: relative;
  }
  /* Pont de survol entre l'entrée et son panneau */
  #bootscore-navbar .dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 44px;
  }
  #bootscore-navbar .dropdown:hover .nav__chevron,
  #bootscore-navbar .dropdown:focus-within .nav__chevron {
    transform: rotate(180deg);
  }
  #bootscore-navbar .dropdown-menu {
    display: block;
    position: absolute;
    top: calc(
      50% + var(--header-h) + var(--nav-panel-gap) - (var(--header-h) - 1px) / 2
    );
    left: -12px;
    z-index: 61;
    min-width: 268px;
    padding: 10px;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--rule-light);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-panel);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
      opacity var(--dur-fast) var(--ease),
      transform var(--dur-fast) var(--ease),
      visibility 0s linear var(--dur-fast);
  }
  #bootscore-navbar .dropdown:hover > .dropdown-menu,
  #bootscore-navbar .dropdown:focus-within > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  #bootscore-navbar .dropdown-item {
    display: block;
    padding: 10px 12px;
    border-radius: var(--radius-ui);
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;
    color: var(--text-on-dark-muted);
    background: transparent;
  }
  #bootscore-navbar .dropdown-item:hover,
  #bootscore-navbar .dropdown-item:focus,
  #bootscore-navbar .dropdown-item.active {
    background: var(--surface-hover);
    color: var(--text-on-dark);
  }
}

/* Menu mobile : offcanvas Bootstrap de bootscore */
@media (max-width: 991.98px) {
  #nav-main .offcanvas {
    --bs-offcanvas-width: min(360px, 88vw);
    --bs-offcanvas-bg: var(--surface);
    --bs-offcanvas-color: var(--text-on-dark-body);
    --bs-offcanvas-border-color: var(--rule-light);
    --bs-offcanvas-padding-x: 24px;
    --bs-offcanvas-padding-y: 24px;
  }
  #nav-main .offcanvas-header {
    gap: 16px;
    padding-bottom: 0;
    display: flex;
    justify-content: space-between;
  }
  /* margin-top:auto du bloc d'actions : il faut un parent flex. Rebond iOS contenu. */
  #nav-main .offcanvas-body {
    display: flex;
    flex-direction: column;
    overscroll-behavior: contain;
  }
  #bootscore-navbar {
    margin: 0 0 24px;
  }
  /* Le filet de séparation passe sur l'entrée : le chevron est à côté du lien,
     et le sous-menu ouvert fait partie du même bloc. */
  #bootscore-navbar > .nav-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--rule);
  }
  #bootscore-navbar > .nav-item > .nav-link {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    padding: 14px 0;
    font-size: 17px;
    color: var(--text-on-dark-body);
  }
  #bootscore-navbar > .nav-item > .nav-link.active {
    color: var(--text-on-dark);
    font-weight: 600;
  }
  /* Cible tactile de 44px, débordant à droite pour garder le chevron aligné */
  #bootscore-navbar > .nav-item > .nav__sub-toggle {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    font-size: 12px;
  }
  #bootscore-navbar .nav__chevron {
    margin-left: 0;
  }
  #bootscore-navbar > .nav-item.is-open > .nav__sub-toggle {
    color: var(--text-on-dark);
  }
  #bootscore-navbar > .nav-item.is-open > .nav__sub-toggle .nav__chevron {
    transform: rotate(180deg);
  }
  /* Sans JavaScript, les sous-menus restent dépliés : le chevron ne sert à rien */
  html:not(.js) #bootscore-navbar > .nav-item > .nav__sub-toggle {
    display: none;
  }
  /* Sous-pages en retrait, dépliées par le chevron */
  #bootscore-navbar .dropdown-menu {
    display: block;
    position: static;
    flex-basis: 100%;
    padding: 4px 0 12px 18px;
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .js #bootscore-navbar .dropdown-menu,
  .js #bootscore-navbar .megamenu {
    display: none;
  }
  .js #bootscore-navbar > .nav-item.is-open > .dropdown-menu,
  .js #bootscore-navbar > .nav-item.is-open > .megamenu {
    display: block;
  }
  #bootscore-navbar .dropdown-item {
    padding: 9px 0;
    font-size: 15px;
    white-space: normal;
    color: var(--text-on-dark-muted);
    background: transparent;
  }
  #bootscore-navbar .dropdown-item:hover,
  #bootscore-navbar .dropdown-item.active {
    color: var(--text-on-dark);
    background: transparent;
  }
  .offcanvas-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    padding-top: 24px;
  }
  .offcanvas-actions__phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    color: var(--text-on-dark-body);
    text-decoration: none;
  }
  .offcanvas-actions__phone:hover {
    color: var(--text-on-dark);
  }
}
.offcanvas-backdrop {
  --bs-backdrop-bg: #0a0b0c;
  --bs-backdrop-opacity: 0.6;
}

/* Mega menu « Compétences » : panneau pleine largeur, une colonne par famille */
.megamenu__title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-on-dark);
}
.megamenu__text {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-on-dark-faint);
}
.megamenu__list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.megamenu__link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--text-on-dark-muted);
  text-decoration: none;
}
.megamenu__link:hover,
.megamenu__link:focus-visible,
.megamenu__link[aria-current="page"] {
  color: var(--text-on-dark);
}
.megamenu__foot {
  margin: 0;
}

@media (min-width: 992px) {
  /* Le panneau se cale sur la navbar, pas sur l'entrée de menu : d'où le
     position: static sur le li, qui rend #nav-main référent du positionnement. */
  #nav-main {
    position: relative;
  }
  #bootscore-navbar .nav-item--mega {
    position: static;
  }
  /* Le pont de survol de ::after est repris par le padding du panneau */
  #bootscore-navbar .nav-item--mega::after {
    content: none;
  }
  .megamenu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 61;
    /* Pont de survol : la bordure de l'en-tête fait 1px */
    padding-top: calc(var(--nav-panel-gap) + 1px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
      opacity var(--dur-fast) var(--ease),
      transform var(--dur-fast) var(--ease),
      visibility 0s linear var(--dur-fast);
  }
  #bootscore-navbar .nav-item--mega:hover > .megamenu,
  #bootscore-navbar .nav-item--mega:focus-within > .megamenu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .megamenu__inner {
    padding: 26px 28px 22px;
    background: var(--surface);
    border: 1px solid var(--rule-light);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-panel);
    /* Garde-fou : sur un écran bas, le panneau défile au lieu de déborder */
    max-height: calc(100vh - var(--header-h) - 48px);
    overflow-y: auto;
  }
  .megamenu__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 28px;
  }
  .megamenu__link {
    padding: 9px 10px;
    border-radius: var(--radius-ui);
  }
  .megamenu__link:hover,
  .megamenu__link:focus-visible,
  .megamenu__link[aria-current="page"] {
    background: var(--surface-hover);
  }
  .megamenu__foot {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
  }
}

@media (min-width: 1200px) {
  .megamenu__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Dans l'offcanvas : groupes empilés en retrait, comme les sous-menus */
@media (max-width: 991.98px) {
  .megamenu {
    flex-basis: 100%;
    padding: 4px 0 12px 18px;
  }
  .megamenu > .container {
    max-width: none;
    padding: 0;
  }
  .megamenu__group + .megamenu__group {
    margin-top: 16px;
  }
  .megamenu__text {
    display: none;
  }
  .megamenu__list {
    margin-top: 2px;
  }
  .megamenu__link {
    padding: 9px 0;
    font-size: 15px;
  }
  .megamenu__foot {
    margin-top: 16px;
  }
}

/* Bandeau de consentement (extension « bs Cookie Settings »).
   Le balisage est en classes Bootstrap par défaut : on le ramène au design system. */
#bs-cookie-bar.bg-body-tertiary {
  background: var(--surface) !important;
  border-top: 1px solid var(--rule-light);
  color: var(--text-on-dark-body);
  box-shadow: var(--shadow-panel);
}
#bs-cookie-bar #c-txt {
  font-size: 14px;
  line-height: 1.55;
}
.cc_div .cc-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--brand-graph);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cc_div .cc-link:hover {
  color: var(--text-on-dark);
}
.cc_div .modal-content {
  background: var(--surface);
  border: 1px solid var(--rule-light);
  border-radius: var(--radius-card);
  color: var(--text-on-dark-body);
}
.cc_div .modal-title,
.cc_div .b-tl {
  color: var(--text-on-dark);
}
.cc_div .c-bl {
  border: 1px solid var(--rule);
  border-radius: var(--radius-ui);
  padding: 16px;
  margin-bottom: 12px;
  background: var(--surface-low);
}
.cc_div .desc,
.cc_div .p {
  color: var(--text-on-dark-muted);
  font-size: 14px;
  line-height: 1.55;
}
.cc_div table {
  width: 100%;
  font-size: 13px;
  color: var(--text-on-dark-muted);
}
.cc_div th,
.cc_div td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}
.cc_div .btn,
#bs-cookie-bar .btn {
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-ui);
  background: var(--brand);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
}
.cc_div .btn.btn-primary:hover,
#bs-cookie-bar .btn.btn-primary:hover {
  background: var(--brand-hover);
  color: #ffffff;
}
/* Titres repliables de la fenêtre de réglages */
.cc_div .b-tl {
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  color: var(--text-on-dark);
}
.cc_div .c-bl.b-ex {
  background: var(--surface-low) !important;
}
.cc_div .form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}
/* Refus et réglages en bouton secondaire : le refus doit rester aussi lisible que
   l'acceptation, et le bouton de réglages aussi visible que les deux autres.
   Ciblage par identifiant : l'ordre des boutons dépend de la configuration. */
#c-s-bn,
#set-s-bn,
#s-sv-bn,
#s-rall-bn {
  background: transparent;
  border-color: var(--rule-light);
  color: var(--text-on-dark-body);
}
#c-s-bn:hover,
#set-s-bn:hover,
#s-sv-bn:hover,
#s-rall-bn:hover {
  background: var(--surface-hover);
  color: var(--text-on-dark);
}
/* Le bouton de réglages est celui qui demande un geste : on le souligne */
#set-s-bn {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cc_div .btn-close {
  filter: invert(1) grayscale(1);
  opacity: 0.7;
}

/* Icônes Font Awesome (kit) posées à la place du sprite SVG.
   Icône importée en duotone : la couche secondaire reprend le nœud orange. */
i.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 28px;
  line-height: 1;
  --fa-secondary-color: var(--brand-graph);
  --fa-secondary-opacity: 1;
}
i.icon--sm {
  width: 24px;
  height: 24px;
  font-size: 20px;
}
i.icon--lg {
  width: 40px;
  height: 40px;
  font-size: 34px;
}

/* Logos d'outils : SVG monochrome recoloré selon le fond, quelle que soit sa couleur d'origine.
   brightness(0) passe tout en noir, invert(1) le repasse en blanc. */
.tool-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  filter: brightness(0) invert(1);
}
.bg-alt .tool-logo {
  filter: brightness(0);
}
.tool-slide__logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-slot--img {
  border: 0;
}
/* .logo-slot--img .tool-logo {
  max-height: 64px;
} */

.tool-logo {
  height: 35px;
}
.row-plain__logo .tool-logo { width:  clamp(50px  ,44.5px + 1.15vw, 65px);  }

/* Étapes sur fond sombre (la frise est dessinée pour le fond crème) */
.section:not(.bg-alt) .steps__item::before,
.section:not(.bg-alt) .steps__item::after {
  background: var(--text-on-dark-faint);
}
.section:not(.bg-alt) .steps__item--agency::before,
.section:not(.bg-alt) .steps__item--agency::after {
  background: var(--brand-graph);
}
.section:not(.bg-alt) .steps__title {
  color: var(--text-on-dark);
}
.section:not(.bg-alt) .steps__index,
.section:not(.bg-alt) .steps__text {
  color: var(--text-on-dark-faint);
}
.section:not(.bg-alt) .steps__loop {
  color: var(--brand-light);
}

/* Section image + texte */
.media-text__body > * + * {
  margin-top: 16px;
}
.media-text__body p {
  font-size: 15px;
  line-height: 1.6;
}
.media-text__body > p:first-child {
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
}
.media-text__body strong {
  color: var(--text-on-dark);
  font-weight: 600;
}
.bg-alt .media-text__body strong {
  color: var(--ink);
}
.media-text__figure {
  position: relative;
}
.media-badge {
  position: absolute;
  left: 24px;
  top: 24px;
  display: flex;
  flex-direction: column;
  max-width: 220px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-panel);
}
.bg-alt .media-badge {
  background: var(--cream-card);
  border-color: var(--cream-rule);
}
.bg-alt .media-badge .stat__value {
  color: var(--ink);
}
.bg-alt .media-badge .stat__label {
  color: var(--ink-muted);
}

/* Listes à puces des champs riches : nœud orange coché */
.media-text__body ul,
.prose ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.media-text__body ul li,
.prose ul li {
  position: relative;
  padding-left: 30px;
}
.media-text__body ul li::before,
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-graph);
}
.media-text__body ul li::after,
.prose ul li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: calc(0.3em + 4px);
  width: 6px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Listes ordonnées de l'éditeur : connecteur de nœuds, jamais de puces */
.prose ol:not(.chain) {
  list-style: none;
  padding: 0;
}
.prose ol:not(.chain) > li {
  position: relative;
  padding-left: 40px;
  padding-bottom: 24px;
}
.prose ol:not(.chain) > li:last-child {
  padding-bottom: 0;
}
.prose ol:not(.chain) > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--brand-graph);
}
.prose ol:not(.chain) > li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 22px;
  bottom: 0;
  width: 3px;
  background: var(--brand-graph);
}
.prose ol:not(.chain) > li:last-child::after {
  display: none;
}
.prose li p {
  font-size: inherit;
}
.prose .wp-block-image,
.prose .wp-block-quote {
  margin-inline: 0;
}
.prose .wp-block-quote p {
  font-size: inherit;
  line-height: inherit;
}

/* Contact Form 7 */
.wpcf7-form-control-wrap {
  display: block;
}
.wpcf7-not-valid {
  border-color: var(--brand-light) !important;
}
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--brand-light);
}
.wpcf7 form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--rule-light);
  border-radius: var(--radius-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-on-dark-body);
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--brand-graph);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-color: var(--brand-light);
}
.wpcf7-spinner {
  display: block;
  margin: 12px auto 0;
  background-color: var(--brand-graph);
}
.wpcf7-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.form__consent .wpcf7-form-control-wrap {
  display: block;
}
.form__consent .wpcf7-list-item {
  display: block;
  margin: 0;
}
.form__consent .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
select.form__control {
  color-scheme: dark;
}

/* Partage : lien copié */
.share__btn.is-copied {
  border-color: var(--brand-graph);
  color: var(--brand-light);
}

/* Page 404 */
.error-404 {
  padding-block: var(--section-y) var(--section-y-wide);
}
.error-404__code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(96px, 16vw, 200px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--brand-light);
}
.error-404__flow {
  margin-top: 24px;
}

/* Fiche agence : carte intégrée + coordonnées */
.agence-map {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.agence-map__frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 320px;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
}
.agence-map__frame iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}
/* Sur fond sombre, la carte passe en niveaux de gris pour ne pas trancher avec la page */
/* .section:not(.bg-alt) .agence-map__frame iframe {
  filter: grayscale(1) contrast(1.05);
} */
.bg-alt .agence-map__frame {
  border-color: var(--cream-rule);
  background: var(--cream-card);
}
.agence-map__image {
  height: 100%;
  object-fit: cover;
}
/* Carte en attente de consentement : le cadre garde la place du plan */
.carte-bloquee {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px;
  text-align: center;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 14px,
      rgba(255, 255, 255, 0.025) 14px 28px
    ),
    var(--surface-low);
}
.bg-alt .carte-bloquee {
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 14px,
      rgba(0, 0, 0, 0.02) 14px 28px
    ),
    var(--cream-card);
}
.carte-bloquee__titre {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-on-dark);
}
.carte-bloquee__texte {
  margin: 0;
  max-width: 42ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-on-dark-muted);
}
.carte-bloquee__lien {
  margin: 0;
  font-size: 13px;
}
.carte-bloquee__lien a {
  color: var(--text-on-dark-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.carte-bloquee__lien a:hover {
  color: var(--text-on-dark);
}
.bg-alt .carte-bloquee__titre {
  color: var(--ink);
}
.bg-alt .carte-bloquee__texte {
  color: var(--ink-muted);
}
.bg-alt .carte-bloquee__lien a {
  color: var(--ink-faint);
}
.bg-alt .carte-bloquee__lien a:hover {
  color: var(--ink);
}
.agence-card {
  display: flex;
  flex-direction: column;
}
.agence-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding-top: 32px;
}
@media (max-width: 992px) {
  .agence-map__frame {
    aspect-ratio: auto;
  }
}

/* Estimateur : petit « i » qui déplie la base de calcul.
   Le bouton porte l'attribut hidden dans le HTML ; le script le révèle.
   Sans JavaScript, pas de bouton et la note reste affichée. */
.result__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 10px;
  vertical-align: middle;
  border: 1px solid var(--rule-light);
  border-radius: 50%;
  background: transparent;
  color: var(--text-on-dark-faint);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.result__info:hover {
  border-color: var(--text-on-dark-faint);
  color: var(--text-on-dark);
}
.result__info.is-open {
  background: var(--brand-graph);
  border-color: var(--brand-graph);
  color: #ffffff;
}
/* Étiquette cliquable (outil qui a une page dédiée) */
a.tag {
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
a.tag:hover,
a.tag:focus-visible {
  background: var(--surface-hover);
  border-color: var(--text-on-dark-faint);
  color: var(--text-on-dark);
}
.bg-alt a.tag:hover,
.bg-alt a.tag:focus-visible {
  background: var(--cream-card);
  border-color: var(--ink-faint);
  color: var(--ink);
}

.result__info-wrap {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
/* Sans JavaScript : la note reste un bloc lisible sous le résultat */
.result__base--tip {
  display: block;
  margin-top: 12px;
}
/* Avec JavaScript : bulle ancrée sous le « i » */
.js .result__base--tip {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 70;
  width: min(320px, 72vw);
  margin-top: 0;
  border: 1px solid var(--rule-light);
  box-shadow: var(--shadow-panel);
  text-align: left;
  white-space: normal;
}
.js .result__base--tip::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 14px;
  width: 12px;
  height: 12px;
  background: var(--canvas);
  border-top: 1px solid var(--rule-light);
  border-left: 1px solid var(--rule-light);
  transform: rotate(45deg);
}

/* Sous 425 px : le numéro et la flèche passent sur une ligne, au-dessus du nom,
   pour rendre toute la largeur au titre de la compétence. */
@media (max-width: 425px) {
  .row-link {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "index arrow"
      "name name";
    gap: 12px 16px;
  }
  .row-link__index {
    grid-area: index;
  }
  .row-link__arrow {
    grid-area: arrow;
  }
  .row-link__name {
    grid-area: name;
    gap: 10px;
  }
  /* En-tête de tableau décoratif : ses colonnes ne correspondent plus à cette disposition */
  .rows__head {
    display: none;
  }
}