/* =============================================================================
   INSTRUMENT — feuille de style unique · direction « SaaS moderne conforme »
   Réf. cahier-des-charges-design.md, adapté après arbitrage client :
   - On modernise (couleur de marque, surfaces, arrondis) pour un rendu pro/SaaS.
   - CONFORMITÉ MAINTENUE : aucune couleur de la famille bleu Salesforce
     (#0176D3 / #00A1E0 / #032D60), aucun cyan, aucun dégradé azur, aucun élément
     graphique Salesforce. La marque est un INDIGO, volontairement distinct.
   Deux départs assumés vs le CDC austère (réversibles) :
   - le rayon n'est plus 0 (petits arrondis = signal SaaS) ;
   - la couleur de marque est autorisée hors sémantique de seuil (chrome, liens, CTA).
   Ce qui reste non négociable : jauge de seuil sémantique (vert/ambre/rouge réservés
   aux états), une seule animation (remplissage de jauge). Typographie inspirée de
   salesforce.com : Montserrat (titres ronds) + Inter (corps) ; alignement des
   chiffres assuré par font-variant-numeric: tabular-nums (plus de monospace).
   ========================================================================== */

/* ----- Polices auto-hébergées (déposer les .woff2 dans /assets/fonts/) ------ */
/* Système typographique inspiré de salesforce.com : titres géométriques ronds
   (Montserrat ≈ ITC Avant Garde) + corps humaniste neutre (Inter ≈ Salesforce
   Sans). Deux familles variables seulement → chargement léger. */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Variable.woff2') format('woff2');
  font-weight: 100 900; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900; font-display: swap; font-style: normal;
}

:root {
  /* --- Neutres --- */
  --encre:          #1A1D29;  /* texte, titres — noir bleuté froid */
  --papier:         #FFFFFF;  /* fond principal — blanc franc */
  --surface:        #F4F5FA;  /* cartes, sections, blocs — indigo très clair */
  --surface-2:      #EDEEFB;  /* survols, badges de marque */
  --trame:          #E2E4ED;  /* filets, bordures, grilles */
  --encre-attenuee: #565C72;  /* légendes, sources, métadonnées (AA sur blanc) */

  /* --- Couleur de marque : INDIGO (jamais le bleu Salesforce) --- */
  --marque:        #2D31A6;   /* liens, CTA primaire, accents */
  --marque-vif:    #4548D8;   /* survol / interactif */
  --marque-fonce:  #23256B;   /* contrastes forts */
  --marque-tint:   #EDEEFB;   /* aplats légers */

  /* --- Échelle sémantique de seuil : réservée aux ÉTATS (jauge, résultats) --- */
  --seuil-sain:      #1F7A4D;  /* au-dessus du seuil */
  --seuil-vigilance: #A2740E;  /* zone d'alerte (AA sur blanc/surface) */
  --seuil-alerte:    #B4241C;  /* sous le seuil critique */

  /* --- Typographie (inspirée de salesforce.com) --- */
  --f-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;                      /* titres géométriques ronds ≈ ITC Avant Garde */
  --f-texte:   'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;    /* corps humaniste ≈ Salesforce Sans */
  --f-donnee:  'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;    /* données/chiffres : plus de monospace (alignement via tabular-nums) */

  --echelle-display: clamp(2.2rem, 5vw, 3.7rem);
  --echelle-h2:      clamp(1.45rem, 3vw, 2rem);
  --echelle-h3:      1.2rem;
  --echelle-texte:   1.0625rem;   /* 17px */
  --echelle-donnee:  0.9375rem;
  --echelle-legende: 0.8125rem;

  /* --- Rythme & forme --- */
  --gouttiere:     clamp(1.5rem, 4vw, 3rem);
  --bloc-esp:      clamp(2rem, 4vw, 3rem); /* rythme vertical uniforme : sections ET bandes (pas de collapse) */
  --colonne-texte: 68ch;
  --rail-largeur:  180px;
  --rayon:    10px;
  --rayon-sm: 6px;
  --ombre:      0 1px 2px rgba(26,29,41,.05), 0 4px 16px rgba(26,29,41,.05);
  --ombre-marque: 0 4px 14px rgba(45,49,166,.20);
}

/* ----- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
/* clip (PAS hidden) : coupe le débordement horizontal sans neutraliser le header sticky */
html, body { overflow-x: clip; }

body {
  font-family: var(--f-texte);
  font-size: var(--echelle-texte);
  line-height: 1.65;
  color: var(--encre);
  background: var(--papier);
  font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ----- Titres ------------------------------------------------------------ */
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; line-height: 1.12; color: var(--encre); letter-spacing: -0.015em; }
h1 { font-size: var(--echelle-display); }
h2 { font-size: var(--echelle-h2); margin-top: 2.5rem; margin-bottom: 0.85rem; }
h3 { font-size: var(--echelle-h3); margin-top: 1.75rem; margin-bottom: 0.6rem; }

/* Le texte occupe la largeur de son conteneur (carte = étroit, section = site
   width). Plus de colonne de lecture bridée à 68ch qui laissait un vide à droite. */
p { max-width: none; }
p + p { margin-top: 1rem; }

a { color: var(--marque); text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { color: var(--marque-vif); text-decoration-thickness: 2px; }

/* ----- CHIFFRES : monospace partout, sans exception --------------------- */
.num, .data, td.num, .jauge__valeur, time, .kpi__valeur {
  font-family: var(--f-donnee);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* =============================================================================
   MISE EN PAGE — fiche technique (rail de provenance + colonne mesurée)
   ========================================================================== */
.site { min-height: 100vh; display: flex; flex-direction: column; }
.wrap { width: min(100% - 2 * var(--gouttiere), 1140px); margin-inline: auto; }

/* Header pleine largeur, sticky + blur (pattern du projet d'origine) — non borné à 1140px */
.site-header {
  border-bottom: 1px solid var(--trame);
  background: color-mix(in srgb, var(--papier) 85%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  position: sticky; top: 0; z-index: 20;
}
.site-header__inner {
  width: 100%;
  padding: 0.7rem clamp(1rem, 3vw, 2.75rem);
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem);
  min-height: 64px;
}
.wordmark { font-family: var(--f-display); text-decoration: none; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1; flex: none; }
.wordmark__nom { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; color: var(--encre); }
.wordmark__nom .wm-hi { color: var(--marque); }
.wordmark__base { font-family: var(--f-texte); font-size: 0.78rem; font-weight: 400; letter-spacing: 0; color: var(--encre-attenuee); margin-top: 2px; }

/* Menu réparti sur toute la largeur disponible */
.site-nav { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.25rem clamp(0.5rem, 2vw, 2rem); flex-wrap: wrap; font-family: var(--f-display); font-size: 0.98rem; }
.site-nav a { text-decoration: none; color: var(--encre); padding: 0.45rem 0.8rem; border-radius: var(--rayon-sm); white-space: nowrap; }
/* Items de premier niveau en gras (le sous-menu Outils reste en poids normal). */
.site-nav > a, .site-nav__item--sous > a { font-weight: 700; }
.site-nav a:hover { background: var(--surface); color: var(--marque); }
.site-nav a[aria-current="page"] { background: var(--marque-tint); color: var(--marque-fonce); }
.site-header__cta { flex: none; padding: 0.5rem 1.1rem; font-size: 0.92rem; white-space: nowrap; }

/* Bouton hamburger — masqué en desktop, révélé sous 900px (voir media query). */
.nav-toggle {
  display: none; flex: none; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.7rem; border: 1px solid var(--trame); border-radius: var(--rayon-sm);
  background: var(--papier); color: var(--encre); cursor: pointer;
  font-family: var(--f-display); font-size: 0.9rem; font-weight: 700;
}
.nav-toggle:hover { border-color: var(--marque-tint); color: var(--marque); }
.nav-toggle__box { position: relative; width: 20px; height: 14px; }
/* Trois barres dessinées avec la barre centrale + ::before/::after. */
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after {
  position: absolute; left: 0; width: 20px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle__bar { top: 6px; }
.nav-toggle__bar::before { content: ""; top: -6px; }
.nav-toggle__bar::after  { content: ""; top: 6px; }
/* État ouvert : la barre centrale disparaît, les deux autres forment une croix. */
.site-header--nav-open .nav-toggle__bar { background: transparent; }
.site-header--nav-open .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
.site-header--nav-open .nav-toggle__bar::after  { transform: translateY(-6px) rotate(-45deg); }

/* Sous-menu « Outils » — déroulant CSS (survol + focus clavier), sans JS. */
.site-nav__item--sous { position: relative; display: inline-flex; }
.site-nav__fleche { font-size: 0.7em; opacity: 0.7; }
/* Bouton chevron d'accordéon : n'existe que sur mobile (révélé dans la media query). */
.site-nav__sous-toggle { display: none; }
.site-subnav {
  position: absolute; top: 100%; left: 0; z-index: 30;
  min-width: 16rem; margin: 0; padding: 0.35rem; list-style: none;
  background: var(--papier); border: 1px solid var(--trame);
  border-radius: var(--rayon-sm); box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
.site-nav__item--sous:hover .site-subnav,
.site-nav__item--sous:focus-within .site-subnav {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.site-subnav a { display: block; padding: 0.5rem 0.7rem; border-radius: var(--rayon-sm); white-space: nowrap; }
.site-subnav li:first-child a { font-weight: 600; }

@media (max-width: 900px) {
  .site-header__inner { flex-wrap: nowrap; gap: 0.75rem; }
  /* La marque absorbe l'espace libre → CTA + hamburger collés à droite,
     que le CTA soit visible (tablette) ou masqué (< 640px). */
  .wordmark { margin-right: auto; }
  .nav-toggle { display: inline-flex; order: 3; }
  /* La nav devient un panneau déroulant ancré sous le header, masqué par défaut. */
  .site-nav {
    order: 4; position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    display: none; flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    gap: 0.15rem; justify-content: flex-start;
    background: var(--papier); border-top: 1px solid var(--trame);
    border-bottom: 1px solid var(--trame); box-shadow: var(--ombre);
    padding: 0.6rem clamp(1rem, 3vw, 2rem) 1rem;
    /* Colonne verticale qui DÉFILE si trop haute (sinon flex-wrap créerait une
       2e colonne à droite — bug corrigé). overscroll-behavior : le scroll du
       panneau ne déborde pas sur la page derrière. */
    max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain;
  }
  .site-header--nav-open .site-nav { display: flex; }
  .site-nav > a, .site-nav__item--sous { border-bottom: 1px solid var(--trame); }
  .site-nav > a, .site-nav__item--sous > a { padding: 0.75rem 0.6rem; }
  /* CTA du header : juste avant le hamburger (masqué < 640px, où le sticky
     CTA prend le relais — voir plus bas). */
  .site-header__cta { order: 2; }
  /* Sur mobile : sous-menu en ACCORDÉON, replié par défaut (pas de survol
     tactile fiable). Le libellé reste un lien ; le chevron ouvre/ferme. */
  .site-nav__item--sous {
    display: flex; flex-wrap: wrap; align-items: center; width: 100%;
  }
  .site-nav__item--sous > a { flex: 1; display: block; }
  .site-nav__fleche { display: none; }             /* chevron décoratif desktop masqué */
  .site-nav__sous-toggle {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 2.6rem; align-self: stretch; padding: 0;
    background: transparent; border: 0; border-left: 1px solid var(--trame);
    color: var(--encre); cursor: pointer; font-size: 1rem;
  }
  .site-nav__sous-chevron { transition: transform 0.2s ease; line-height: 1; }
  .site-nav__item--sous--open .site-nav__sous-chevron { transform: rotate(180deg); }
  .site-subnav {
    flex-basis: 100%; width: 100%;
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; border: 0; box-shadow: none; padding: 0.2rem 0 0.5rem 0.9rem;
    background: transparent;
    display: none;                                  /* replié par défaut */
  }
  .site-nav__item--sous--open > .site-subnav { display: block; }
  .site-subnav a { font-size: 0.92rem; color: var(--encre-attenuee); padding: 0.5rem 0.6rem; }
}

main { flex: 1; padding-block: clamp(2rem, 5vw, 4rem); }

/* =============================================================================
   HERO — bandeau sombre pleine largeur (accueil). Fond indigo-nuit + photo.
   Départ assumé vs CDC austère : image de contexte autorisée (validé client).
   Aucun bleu azur Salesforce : le fond est un indigo-nuit dérivé de la marque.
   ========================================================================== */
.hero {
  /* Sort de la colonne centrée pour occuper toute la largeur du viewport. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: calc(-1 * clamp(2rem, 5vw, 4rem));  /* colle au header (annule le padding de main) */
  background-color: #14172E;
  background-image:
    linear-gradient(100deg, rgba(18,20,44,0.96) 0%, rgba(18,20,44,0.86) 42%, rgba(18,20,44,0.42) 100%),
    var(--hero-img,
      image-set(url('/assets/img/hero-integrateur-salesforce.webp') type('image/webp'),
                url('/assets/img/hero-integrateur-salesforce.jpg') type('image/jpeg')));
  background-size: cover;
  background-position: center right;
  color: #fff;
}
.hero__inner {
  width: min(100% - 2 * var(--gouttiere), 1140px);
  margin-inline: auto;
  min-height: clamp(420px, 58vh, 600px);
  display: flex; align-items: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.hero__content { max-width: 620px; }
.hero h1 { color: #fff; font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.05; text-wrap: balance; }
.hero__sous { color: rgba(255,255,255,0.86); font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.55; margin-top: 1.25rem; max-width: 34ch; }
.hero__actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 2rem; }
/* Bouton fantôme sur fond sombre */
.action--sombre { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); box-shadow: none; }
.action--sombre:hover { background: rgba(255,255,255,0.10); color: #fff; border-color: #fff; transform: translateY(-1px); }
@media (max-width: 640px) {
  .hero__inner { min-height: 0; }
  .hero__sous { max-width: none; }
}

/* =============================================================================
   BANDES — rythme vertical par sections pleine largeur (fonds alternés).
   Une .bande sort de la colonne centrée (même technique que .hero) ; son
   contenu .bande__inner est recontraint au site-width (identique à .wrap).
   Alternance type : blanc → surface (clair) → blanc → … avec un accent indigo
   pleine largeur à texte blanc pour cadencer la lecture.
   ========================================================================== */
.bande { width: 100vw; margin-left: calc(50% - 50vw); padding-block: var(--bloc-esp); }
/* Respiration blanche avant une bande colorée qui suit du contenu de flux
   (paragraphes d'intro : rythme en marge haute uniquement → marge basse nulle,
   sinon la couleur collerait au dernier paragraphe). On réplique l'espace qu'une
   .section porteuse aurait fourni avant la couleur. Neutralisée quand une .section
   (qui porte déjà sa marge via padding-block) ou une autre bande (alternance de
   couleur volontaire) précède immédiatement. */
.bande { margin-top: var(--bloc-esp); }
.section + .bande,
.bande + .bande { margin-top: 0; }
.bande__inner { width: min(100% - 2 * var(--gouttiere), 1140px); margin-inline: auto; }
/* Rythme uniforme : dans une bande, la section imbriquée n'ajoute pas son propre
   espacement (la bande le porte) ; les marges de bord (titre h2…) sont annulées. */
.bande__inner > .section { padding-block: 0; }
.bande__inner > :first-child { margin-top: 0; }
.bande__inner > :last-child  { margin-bottom: 0; }
.bande__inner > .section > :first-child { margin-top: 0; }
.bande__inner > .section > :last-child  { margin-bottom: 0; }
.bande--surface { background: var(--surface); }
.bande--marque  { background: var(--marque); color: #fff; }

/* --- Lisibilité sur indigo : jamais de bleu sur bleu (typo & CTA adaptés) --- */
.bande--marque h1, .bande--marque h2, .bande--marque h3, .bande--marque h4 { color: #fff; }
.bande--marque p { color: rgba(255,255,255,0.88); }
.bande--marque .legende,
.bande--marque .bloc-source { color: rgba(255,255,255,0.72); border-color: rgba(255,255,255,0.25); }
.bande--marque a:not(.action) { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.bande--marque a:not(.action):hover { color: rgba(255,255,255,0.85); }
/* Boutons : plein blanc (texte indigo) et fantôme clair — lisibles sur indigo. */
.bande--marque .action { background: #fff; color: var(--marque-fonce); border-color: #fff; }
.bande--marque .action:hover { background: rgba(255,255,255,0.90); color: var(--marque-fonce); border-color: #fff; }
.bande--marque .action--fantome { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); box-shadow: none; }
.bande--marque .action--fantome:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: #fff; }
/* Cartes KPI translucides sur indigo (au lieu du blanc plein). */
.bande--marque .kpi { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.20); box-shadow: none; }
.bande--marque .kpi__label { color: rgba(255,255,255,0.75); }
.bande--marque .kpi__seuil { color: rgba(255,255,255,0.82); }
.bande--marque .kpi__valeur { color: #fff; }
.bande--marque .kpi a { color: #fff; }
.bande--marque .reponse-directe { background: rgba(255,255,255,0.10); border-left-color: #fff; color: #fff; }
/* Sécurité anti-débordement horizontal dû aux bandes 100vw. */
body { overflow-x: clip; }

/* --- Grille d'outils (cartes blanches, 3×3) — ex. bloc « Mesurer » sur indigo --- */
.outils-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.75rem; }
.outil-carte {
  display: flex; flex-direction: column; gap: 0.35rem;
  background: #fff; border-radius: var(--rayon); padding: 1.05rem 1.2rem;
  box-shadow: var(--ombre); transition: transform .14s ease, box-shadow .14s ease;
}
.outil-carte:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.20); }
.outil-carte__groupe { font-size: var(--echelle-legende); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--marque); }
.outil-carte__nom { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; color: var(--encre); line-height: 1.15; }
.outil-carte__tag { font-size: var(--echelle-legende); color: var(--encre-attenuee); line-height: 1.45; }
/* Neutralise l'héritage « lien sur bande indigo » (blanc + souligné) pour ces cartes. */
.bande--marque a.outil-carte { color: var(--encre); text-decoration: none; }
.bande--marque a.outil-carte .outil-carte__groupe { color: var(--marque); }
@media (max-width: 900px) { .outils-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .outils-grille { grid-template-columns: 1fr; } }

/* --- Grille d'actualités (cartes avec image, 3×2) — CTA aligné en bas via flex --- */
.actu-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-block: 2rem; }
.actu-carte { display: flex; flex-direction: column; background: var(--papier); border: 1px solid var(--trame); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; }
.actu-carte__media { display: block; aspect-ratio: 16 / 9; background: var(--surface-2); }
.actu-carte__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.actu-carte__corps { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.1rem 1.2rem; flex: 1; } /* flex:1 → occupe la hauteur */
.actu-carte__cat { font-size: var(--echelle-legende); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--encre-attenuee); }
.actu-carte__titre { font-size: 1.05rem; line-height: 1.2; margin: 0; }
.actu-carte__titre a { color: var(--encre); text-decoration: none; }
.actu-carte__titre a:hover { color: var(--marque); }
.actu-carte__excerpt { font-size: var(--echelle-legende); color: var(--encre-attenuee); line-height: 1.5; margin: 0; }
.actu-carte__cta { margin-top: auto; padding-top: 0.75rem; } /* pousse le bouton en bas : tous alignés */
@media (max-width: 900px) { .actu-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .actu-grille { grid-template-columns: 1fr; } }

.fiche { display: grid; grid-template-columns: var(--rail-largeur) minmax(0, 1fr); gap: var(--gouttiere); align-items: start; }
.fiche__contenu { min-width: 0; }

.rail { position: sticky; top: 5rem; font-size: var(--echelle-legende); }
.rail__source { border-left: 2px solid var(--marque-tint); padding: 0.45rem 0 0.45rem 0.75rem; margin-bottom: 0.5rem; }
.rail__source dt { text-transform: uppercase; letter-spacing: 0.06em; color: var(--encre-attenuee); font-size: 0.68rem; }
.rail__source dd { font-family: var(--f-donnee); font-size: var(--echelle-legende); margin: 0; }

.pleine-largeur { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .fiche { grid-template-columns: 1fr; }
  .rail { position: static; display: flex; flex-wrap: wrap; gap: 0 1.5rem; background: var(--surface); border-radius: var(--rayon); padding: 0.75rem 1rem; }
  .rail__source { border-left: none; padding: 0.25rem 0; margin: 0; }
}

/* =============================================================================
   COMPOSANT SIGNATURE — la jauge de seuil (couleur = état, toujours étiquetée)
   ========================================================================== */
.jauge { margin-block: 1.25rem; max-width: 640px; }
.jauge__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.4rem; }
.jauge__label { font-family: var(--f-texte); font-size: var(--echelle-donnee); font-weight: 500; }
.jauge__valeur { font-family: var(--f-donnee); font-weight: 500; font-size: 1.1rem; }

.jauge__piste { position: relative; height: 10px; background: var(--trame); border-radius: 999px; }
.jauge__remplissage {
  height: 100%;
  width: var(--jauge-final, 0%);      /* état FINAL par défaut → correct sans JS */
  background: var(--marque);
  border-radius: 999px;
  transition: width 600ms ease-out;   /* l'unique animation orchestrée du site */
}
.jauge.js-anim .jauge__remplissage { width: 0%; }
.jauge.js-anim.is-visible .jauge__remplissage { width: var(--jauge-final, 0%); }

.jauge[data-etat="sain"]      .jauge__remplissage { background: var(--seuil-sain); }
.jauge[data-etat="vigilance"] .jauge__remplissage { background: var(--seuil-vigilance); }
.jauge[data-etat="alerte"]    .jauge__remplissage { background: var(--seuil-alerte); }

.jauge__seuil { position: absolute; top: -3px; bottom: -3px; left: var(--seuil-pos, 70%); width: 2px; background: var(--encre); border-radius: 2px; }
.jauge__seuil-label { display: block; margin-top: 0.45rem; font-family: var(--f-donnee); font-size: var(--echelle-legende); color: var(--encre-attenuee); }
.jauge__seuil-label::before { content: "▲ "; }

.etat-tag {
  display: inline-block;
  font-family: var(--f-donnee); font-size: var(--echelle-legende);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.15rem 0.55rem; border-radius: 999px;
  border: 1px solid currentColor;
}
.etat-tag[data-etat="sain"]      { color: var(--seuil-sain);      background: rgba(31,122,77,.08); }
.etat-tag[data-etat="vigilance"] { color: var(--seuil-vigilance); background: rgba(162,116,14,.10); }
.etat-tag[data-etat="alerte"]    { color: var(--seuil-alerte);    background: rgba(180,36,28,.08); }

@media (prefers-reduced-motion: reduce) {
  .jauge__remplissage { transition: none !important; }
  .jauge.js-anim .jauge__remplissage { width: var(--jauge-final, 0%); }
}

/* =============================================================================
   BLOC DONNÉES — carte sur surface
   ========================================================================== */
.bloc-donnees { margin-block: 2rem; }
.bloc-donnees > h2, .bloc-donnees > h3 { margin-top: 0; }

table.data { width: 100%; border-collapse: collapse; font-size: var(--echelle-donnee); }
table.data th, table.data td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--trame); vertical-align: baseline; }
table.data thead th { font-family: var(--f-texte); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; color: var(--encre-attenuee); border-bottom: 1px solid var(--encre-attenuee); }
table.data td.num, table.data th.num { text-align: right; font-family: var(--f-donnee); font-variant-numeric: tabular-nums; }
table.data tbody tr:last-child td { border-bottom: none; }

/* Tableaux dans le contenu éditorial (générés depuis le HTML de confiance). */
.editorial table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: var(--echelle-donnee); border: 1px solid var(--trame); border-radius: 8px; overflow: hidden; }
.editorial th, .editorial td { text-align: left; padding: 0.7rem 0.95rem; border-bottom: 1px solid var(--trame); vertical-align: top; }
.editorial thead th { font-family: var(--f-texte); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; color: var(--encre-attenuee); background: var(--surface); border-bottom: 2px solid var(--trame); }
.editorial tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.editorial tbody tr:last-child td { border-bottom: none; }

.bloc-source { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--trame); font-size: var(--echelle-legende); color: var(--encre-attenuee); font-family: var(--f-donnee); }
.bloc-source a { color: var(--marque); }

/* =============================================================================
   GRILLE DE KPI / SEUILS — cartes SaaS
   ========================================================================== */
.kpi-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-block: 2rem; }
.kpi { background: var(--papier); border: 1px solid var(--trame); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 1.2rem 1.3rem; min-width: 0; }
.kpi__label { font-size: var(--echelle-legende); text-transform: uppercase; letter-spacing: 0.05em; color: var(--encre-attenuee); }
.kpi__valeur { font-family: var(--f-display); font-variant-numeric: tabular-nums; font-size: 1.9rem; font-weight: 700; display: block; margin-block: 0.3rem; color: var(--marque-fonce); }
.kpi__seuil { font-size: var(--echelle-legende); color: var(--encre-attenuee); font-family: var(--f-donnee); }

/* =============================================================================
   BOUTONS — nomment l'action ; primaire en couleur de marque
   ========================================================================== */
.action {
  display: inline-block; font-family: var(--f-display); font-weight: 600; font-size: 1rem;
  padding: 0.72rem 1.5rem; border-radius: var(--rayon-sm);
  background: var(--marque); color: #fff; border: 1px solid var(--marque);
  text-decoration: none; cursor: pointer; box-shadow: var(--ombre-marque);
  transition: background 120ms ease, transform 120ms ease;
}
.action:hover { background: var(--marque-vif); color: #fff; transform: translateY(-1px); }
.action--fantome { background: var(--papier); color: var(--marque); border-color: var(--trame); box-shadow: var(--ombre); }
.action--fantome:hover { background: var(--surface); color: var(--marque-vif); border-color: var(--marque-tint); }

/* =============================================================================
   MÉTHODE — étapes numérotées
   ========================================================================== */
ol.methode { list-style: none; counter-reset: etape; padding: 0; margin-block: 1.5rem; }
ol.methode li { counter-increment: etape; padding-left: 3.4rem; position: relative; margin-bottom: 1.4rem; }
ol.methode li::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--f-donnee); font-weight: 500; font-size: 0.95rem; color: var(--marque);
  background: var(--marque-tint); border-radius: var(--rayon-sm);
  width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center;
}

/* =============================================================================
   FAQ
   ========================================================================== */
.faq details { border: 1px solid var(--trame); border-radius: var(--rayon-sm); padding: 0.9rem 1.1rem; margin-bottom: 0.6rem; background: var(--papier); }
.faq details[open] { background: var(--surface); }
.faq summary { font-family: var(--f-display); font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-donnee); color: var(--marque); font-size: 1.2rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 0.75rem; }

/* =============================================================================
   RÉPONSE DIRECTE — accent de marque
   ========================================================================== */
.reponse-directe { font-size: 1.15rem; line-height: 1.55; border-left: 3px solid var(--marque); background: var(--surface); border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0; padding: 1rem 1.25rem; margin-block: 1.5rem; }

/* =============================================================================
   MAILLAGE INTERNE
   ========================================================================== */
.maillage { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.5rem 1.5rem; margin-block: 1.5rem; padding: 0; list-style: none; }
.maillage li { border-top: 1px solid var(--trame); padding-top: 0.45rem; min-width: 0; }
.maillage a { text-decoration: none; }
.maillage a:hover { text-decoration: underline; }
/* Maillage « villes proches » : grille équilibrée 3×2 (desktop), repli responsive. */
.maillage--proches { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .maillage--proches { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .maillage--proches { grid-template-columns: 1fr; } }

/* =============================================================================
   ARIANE + FRAÎCHEUR
   ========================================================================== */
.ariane { font-size: var(--echelle-legende); color: var(--encre-attenuee); margin-top: 1.75rem; margin-bottom: 1.5rem; font-family: var(--f-donnee); }
.ariane a { color: var(--encre-attenuee); }
.ariane a:hover { color: var(--marque); }
.fraicheur { font-family: var(--f-donnee); font-size: var(--echelle-legende); color: var(--encre-attenuee); margin-top: 2rem; }

/* Sommaire d'article (ancres internes) — liste simple, sans numéros. */
.sommaire { list-style: none; margin: 1.25rem 0 2rem; padding: 1rem 1.25rem; border-left: 3px solid var(--trame); background: var(--surface); }
.sommaire li { margin: 0.35rem 0; }
.sommaire a { color: var(--encre); text-decoration: none; }
.sommaire a:hover { color: var(--marque); text-decoration: underline; }

/* =============================================================================
   PIED DE PAGE — badges partenaires ici uniquement
   ========================================================================== */
.site-footer { border-top: 1px solid var(--trame); background: var(--surface); margin-top: 4rem; padding-block: 2.5rem 1.5rem; font-size: var(--echelle-legende); }
.site-footer__cols { display: grid; grid-template-columns: 1.8fr repeat(3, 1fr); gap: 1.75rem 2.5rem; align-items: start; }
/* La colonne marque (haute, avec le widget avis) occupe 2 rangées ; le maillage
   villes comble le vide sous les 3 colonnes de liens. */
.site-footer__marque { grid-column: 1; grid-row: 1 / 3; }
.site-footer__villes { grid-column: 2 / -1; grid-row: 2; align-self: start; }
.site-footer__villes-liste { list-style: none; margin: 0.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem 2.5rem; }
.site-footer__villes-liste a { display: inline-block; padding: 0.18rem 0; }
.site-footer__marque .wordmark { margin-bottom: 0.6rem; }
.site-footer__marque .wordmark__nom { font-size: 1.2rem; }
.site-footer__marque .legende { max-width: 42ch; }
.site-footer h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--encre-attenuee); margin-bottom: 0.7rem; }
.site-footer a { color: var(--encre); display: block; padding-block: 0.22rem; text-decoration: none; }
.site-footer a:hover { color: var(--marque); }
/* Badges de sources publiques (colonne marque) */
.site-footer__badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.src-badge { font-size: 0.7rem; padding: 0.22rem 0.6rem; border: 1px solid var(--trame); border-radius: 999px; color: var(--encre-attenuee); background: var(--papier); white-space: nowrap; }
/* Widget d'avis Google (Trustindex) — colonne marque */
.site-footer__avis { margin-top: 1.15rem; max-width: 340px; }
/* Bas de footer : crédit + sources (sans filet de séparation) */
.site-footer__bas { margin-top: 2.25rem; text-align: center; }
.site-footer__bas p { margin: 0; max-width: none; }
.site-footer__edite { color: var(--encre-attenuee); font-size: var(--echelle-legende); }
.site-footer__edite a { display: inline; padding: 0; } /* « Poleetic » reste dans la phrase (pas en bloc) */
.site-footer__liens { margin-top: 0.55rem; font-size: var(--echelle-legende); line-height: 1.9; color: var(--encre-attenuee); }
.site-footer__liens a { color: var(--encre-attenuee); text-decoration: none; display: inline; padding: 0; }
.site-footer__liens a:hover { color: var(--marque); text-decoration: underline; }
.site-footer__liens > * + *::before { content: "·"; margin: 0 0.55rem; color: var(--trame); }
.site-footer__sources a { text-decoration: underline; text-underline-offset: 0.15em; }

/* Boutons flottants : Cookies (bas-gauche) + retour haut (bas-droite) */
.fab { position: fixed; z-index: 35; font-family: var(--f-display); font-weight: 600; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid transparent; }
.fab[hidden] { display: none; }
.fab--haut { right: 1rem; bottom: 1rem; width: 2.9rem; height: 2.9rem; justify-content: center; font-size: 1.25rem; background: var(--marque); color: #fff; box-shadow: var(--ombre-marque); }
.fab--haut:hover { background: var(--marque-vif); }
@media (max-width: 720px) {
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
  .site-footer__marque { grid-column: 1 / -1; grid-row: auto; }
  .site-footer__villes { grid-column: 1 / -1; grid-row: auto; }
  .site-footer__villes-liste { grid-template-columns: 1fr 1fr; gap: 0.3rem 1.25rem; }
}

/* =============================================================================
   STICKY CTA MOBILE — barre d'actions fixe en bas (< 640px), 2 boutons.
   Reprend le pattern novagrund. z-index 36 : au-dessus des FAB (35), sous le
   bandeau cookies (40) qui doit primer au premier chargement.
   ========================================================================== */
.sticky-cta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 36;
  height: 58px; background: var(--papier);
  border-top: 1px solid var(--trame); box-shadow: 0 -4px 20px rgba(0,0,0,0.14);
}
.sticky-cta-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0 0.75rem; height: 100%; text-decoration: none; color: #fff;
  transition: filter 0.15s ease;
}
.sticky-cta-btn:hover, .sticky-cta-btn:active { filter: brightness(1.08); color: #fff; }
.sticky-cta-btn--diag     { background: var(--marque); }
.sticky-cta-btn--relation { background: var(--marque-fonce); }
.sticky-cta-btn svg { flex-shrink: 0; opacity: 0.92; }
.sticky-cta-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; font-family: var(--f-display); }
.sticky-cta-label strong { font-size: 0.92rem; font-weight: 700; color: #fff; }
.sticky-cta-label em { font-size: 0.72rem; font-style: normal; color: rgba(255,255,255,0.82); }
.sticky-cta-sep { width: 1px; align-self: stretch; background: rgba(255,255,255,0.18); flex-shrink: 0; }

@media (max-width: 640px) {
  .sticky-cta { display: flex; align-items: stretch; }
  body { padding-bottom: 58px; }
  /* Le sticky CTA fournit déjà « Diagnostic » : on retire le CTA du header. */
  .site-header__cta { display: none; }
  /* On remonte les FAB au-dessus de la barre pour éviter le recouvrement. */
  .fab--haut { bottom: calc(0.75rem + 58px); }
}
/* Baseline du wordmark masquée sur petits écrans (place pour CTA + hamburger). */
@media (max-width: 560px) { .wordmark__base { display: none; } }

/* Quand le bandeau cookies est ouvert, il occupe déjà le bas : on masque le sticky. */
body:has(#cookie-banner:not([hidden])) .sticky-cta { display: none; }

@media print { .sticky-cta { display: none !important; } }

/* =============================================================================
   BANDEAU COOKIES (RGPD)
   ========================================================================== */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--encre); color: #fff;
  box-shadow: 0 -6px 24px rgba(0,0,0,.18);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
  width: min(100% - 2 * var(--gouttiere), 1140px); margin-inline: auto;
  padding: 1rem 0; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
.cookie-banner__texte { margin: 0; flex: 1; min-width: 260px; font-size: var(--echelle-donnee); color: rgba(255,255,255,.9); max-width: none; }
.cookie-banner__texte a { color: #fff; }
.cookie-banner__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.cookie-banner .action--fantome { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); box-shadow: none; }
.cookie-banner .action--fantome:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

/* =============================================================================
   FOCUS CLAVIER — anneau de marque
   ========================================================================== */
:focus-visible { outline: 2px solid var(--marque); outline-offset: 2px; border-radius: 3px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--marque); color: #fff; padding: 0.5rem 1rem; border-radius: var(--rayon-sm); z-index: 30; }
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* =============================================================================
   FORMULAIRES (simulateurs)
   ========================================================================== */
fieldset { border: 1px solid var(--trame); border-radius: var(--rayon); padding: 1.25rem 1.5rem; margin-block: 1.25rem; background: var(--papier); box-shadow: var(--ombre); }
legend { font-family: var(--f-display); font-weight: 600; padding-inline: 0.5rem; }
.champ-radio { display: block; padding: 0.5rem 0.6rem; cursor: pointer; border-radius: var(--rayon-sm); }
.champ-radio:hover { background: var(--surface); }
.champ-radio input { margin-right: 0.6rem; accent-color: var(--marque); }
label { display: block; }
input[type="text"], input[type="email"], input[type="number"], select {
  font-family: var(--f-donnee); font-size: 1rem; padding: 0.55rem 0.7rem;
  border: 1px solid var(--trame); border-radius: var(--rayon-sm); background: var(--papier); color: var(--encre); width: 100%; max-width: 22rem;
}
input:focus { border-color: var(--marque); }
.aide-champ { font-size: var(--echelle-legende); color: var(--encre-attenuee); }

/* =============================================================================
   UTILITAIRES
   ========================================================================== */
.mono { font-family: var(--f-donnee); font-variant-numeric: tabular-nums; }
.legende { font-size: var(--echelle-legende); color: var(--encre-attenuee); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Rythme vertical uniforme : padding (jamais de margin qui « collapse ») pour que
   toute transition — section↔section, section↔bande, bande↔bande — soit égale. */
.section { padding-block: var(--bloc-esp); }
.section > :first-child { margin-top: 0; }
.section > :last-child  { margin-bottom: 0; }
hr { border: none; border-top: 1px solid var(--trame); margin-block: 2rem; }

/* ==========================================================================
   FORMULAIRE DE CAPTATION (Lot B) + POPIN DE SORTIE
   ========================================================================== */
.form-lead { background: var(--surface-2); border: 1px solid var(--trame); border-radius: var(--rayon); padding: clamp(1.25rem, 4vw, 2rem); }
.formulaire { display: flex; flex-direction: column; gap: 1rem; max-width: var(--colonne-texte); margin-top: 1rem; }
.champ { display: flex; flex-direction: column; gap: .35rem; }
.champ > label { font-weight: 600; font-size: var(--echelle-legende); }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: .6rem .7rem; font: inherit; color: var(--encre);
  background: var(--papier); border: 1px solid var(--trame); border-radius: var(--rayon-sm);
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: 2px solid var(--marque); outline-offset: 1px; border-color: var(--marque);
}
.champ textarea { resize: vertical; min-height: 4.5rem; }
.champ-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.champ-consent label { display: flex; gap: .55rem; align-items: flex-start; font-weight: 400; }
.champ-consent input { width: auto; margin-top: .25rem; flex-shrink: 0; }
.form-err { color: var(--seuil-alerte); font-size: var(--echelle-legende); }
.form-err--resume { font-weight: 600; }
@media (max-width: 520px) { .champ-duo { grid-template-columns: 1fr; } }

.exit-popin { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(10, 12, 40, .55); }
.exit-popin[hidden] { display: none; }
.exit-popin__inner { position: relative; background: var(--papier); border: 1px solid var(--trame); border-radius: var(--rayon); box-shadow: var(--ombre); padding: clamp(1.5rem, 5vw, 2.25rem); max-width: 30rem; width: 100%; }
.exit-popin__inner h2 { margin-top: 0; }
.exit-popin__close { position: absolute; top: .5rem; right: .6rem; background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--encre-attenuee); padding: .2rem .45rem; }
.exit-popin__close:hover { color: var(--encre); }
body.exit-open { overflow: hidden; }

/* ---- Comparateur TJM agence vs freelance (Lot C) ------------------------- */
.tjm-cartes { margin-block: 1.5rem; }
.tjm-carte { position: relative; }
.tjm-carte--agence { border-color: var(--marque); background: var(--marque-tint); }
.tjm-carte--agence .kpi__valeur { color: var(--marque); }
.tjm-unite { font-family: var(--f-texte); font-size: .95rem; font-weight: 400; color: var(--encre-attenuee); margin-left: .15rem; }
.tjm-ecart-note { background: var(--surface); border-left: 3px solid var(--marque); border-radius: var(--rayon-sm); padding: .85rem 1.1rem; margin-block: 1.25rem; }
/* Comparatif freelance / agence — deux colonnes.
   Un avantage agence (✓ vert) = un désavantage freelance (✗ rouge). Côté agence,
   le vert est adouci (pastille translucide) ; le freelance garde un ✓ plein sur le tarif. */
.tjm-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-block: 1.25rem; align-items: start; }
.tjm-compare__col { border: 1px solid var(--trame); border-radius: var(--rayon-sm); padding: 1.1rem 1.25rem; }
.tjm-compare__col--agence { border-color: var(--marque); background: var(--marque-tint); }
.tjm-compare__titre { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; margin: 0 0 .9rem; }
.tjm-points { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.tjm-points li { position: relative; padding-left: 1.9rem; line-height: 1.45; }
.tjm-points li::before { position: absolute; left: 0; top: .05rem; display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; font-size: .8rem; font-weight: 700; }
.tjm-points li.est-pour::before { content: "✓"; background: var(--seuil-sain); color: #fff; }
.tjm-points li.est-contre::before { content: "✗"; background: var(--seuil-alerte); color: #fff; }
/* Côté agence : vert translucide (un peu transparent), pastille douce. */
.tjm-compare__col--agence .est-pour::before { background: rgba(31,122,77,.14); color: var(--seuil-sain); }
@media (max-width: 640px) { .tjm-compare { grid-template-columns: 1fr; } }

/* ---- Bloc tension emploi (missions Salesforce live) --------------------- */
/* Bloc annonces : grille de cartes 2×3 (jusqu'à 6 missions), la plus récente en tête. */
.tension-missions { list-style: none; padding: 0; margin-block: 1rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.tension-missions li { display: flex; flex-direction: column; gap: .3rem; border: 1px solid var(--trame); border-radius: var(--rayon-sm); padding: .85rem 1rem; background: var(--surface); }
.tension-missions a { font-weight: 600; text-decoration: none; color: var(--marque); line-height: 1.3; }
.tension-missions a:hover { text-decoration: underline; }
.tension-date { align-self: flex-start; font-family: var(--f-donnee); font-size: .72rem; font-weight: 600; color: var(--seuil-sain); background: rgba(31,122,77,.10); border-radius: var(--rayon-sm); padding: .1rem .45rem; }
.tension-meta { display: block; margin-top: auto; font-size: var(--echelle-legende); color: var(--encre-attenuee); }
.tension-src { display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; background: var(--marque-tint); color: var(--marque-fonce); border-radius: var(--rayon-sm); padding: .05rem .4rem; }
@media (max-width: 640px) { .tension-missions { grid-template-columns: 1fr; } }

/* ---- Bloc parcs & zones d'activité (OSM) ------------------------------- */
.parcs-liste li { display: flex; flex-direction: column; gap: .1rem; }
.parcs-nom { font-weight: 500; }
.parcs-type { text-transform: capitalize; }

/* ---- Accordéon natif <details> (bloc tissu ETI, replié mais indexable) --- */
.bloc-donnees .accordeon { border: 1px solid var(--trame); border-radius: var(--rayon); background: var(--papier); box-shadow: var(--ombre); }
.accordeon__tete { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; }
.accordeon__tete::-webkit-details-marker { display: none; }
.accordeon__tete h2 { margin: 0; }
.accordeon__tete::after { content: ""; flex: 0 0 auto; width: .6rem; height: .6rem; border-right: 2px solid var(--marque); border-bottom: 2px solid var(--marque); transform: rotate(45deg); transition: transform .2s ease; }
.accordeon[open] .accordeon__tete::after { transform: rotate(-135deg); }
.accordeon__tete:hover { background: var(--marque-tint); border-radius: var(--rayon); }
.accordeon__tete:focus-visible { outline: 2px solid var(--marque); outline-offset: -2px; border-radius: var(--rayon); }
.accordeon__corps { padding: 0 1.3rem 1.3rem; }

/* ---- Lien-ancre « source ↓ » + bloc sources consolidé (bas de page) ----- */
.src-lien { margin-top: .7rem; font-size: var(--echelle-legende); font-family: var(--f-donnee); }
.src-lien a { color: var(--encre-attenuee); text-decoration: none; border-bottom: 1px dotted currentColor; }
.src-lien a:hover, .src-lien a:focus-visible { color: var(--marque); }
.bloc-sources { border-top: 1px solid var(--trame); padding-top: 1.2rem; scroll-margin-top: 1.5rem; }
.bloc-sources > h2 { font-size: 1.2rem; }
.sources-liste { list-style: none; padding: 0; margin-top: 1rem; display: grid; gap: .75rem; }
.sources-liste li { font-size: var(--echelle-legende); color: var(--encre-attenuee); line-height: 1.55; }
.sources-liste a { color: var(--marque); }

/* Portrait chinois — carte d'archétype & symptômes (CDC design §4.3 :
   symptômes en serif, aucune icône). Réutilisé par benchmark & migration. */
.carte-archetype { max-width: var(--colonne-texte); }
ul.symptomes { list-style: none; padding: 0; margin-block: 1.2rem; display: grid; gap: .7rem; max-width: var(--colonne-texte); }
ul.symptomes li { padding-left: 1.4rem; position: relative; font-family: var(--f-texte); line-height: 1.55; }
ul.symptomes li::before { content: "—"; position: absolute; left: 0; color: var(--marque); font-weight: 600; }

/* Colonne droite (aside) — pages villes : contenu à gauche, widget à droite.
   Empilé sous 960px (le widget passe sous le contenu). Réutilisable. */
.avec-aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gouttiere); align-items: start; }
@media (min-width: 960px) { .avec-aside { grid-template-columns: minmax(0, 1fr) 300px; } }
.avec-aside__corps { min-width: 0; }

/* Widget « outils à essayer » (sélection déterministe de 3 outils par ville). */
.widget-outils { position: sticky; top: 5rem; border: 1px solid var(--trame); border-radius: var(--rayon); background: var(--surface); padding: 1.15rem 1.2rem; }
.widget-outils > h2 { font-size: 1.05rem; margin: 0 0 .25rem; }
.widget-outils > .legende { margin: 0 0 1rem; }
.widget-outils__liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .95rem; }
.widget-outils__item { display: grid; gap: .2rem; padding-bottom: .95rem; border-bottom: 1px solid var(--trame); }
.widget-outils__item:last-child { border-bottom: 0; padding-bottom: 0; }
.widget-outils__nom { font-weight: 600; color: var(--marque); line-height: 1.3; }
.widget-outils__tag { font-size: var(--echelle-legende); color: var(--encre-attenuee); line-height: 1.5; }
.widget-outils__tous { margin: 1rem 0 0; font-size: var(--echelle-legende); }
@media (max-width: 959px) { .widget-outils { position: static; } }

/* Barre latérale villes : CTA d'engagement flottant au-dessus des outils.
   Le wrapper porte le sticky ; le widget outils redevient statique à l'intérieur. */
.aside-ville { position: sticky; top: 5rem; display: grid; gap: 1rem; align-content: start; }
.aside-ville .widget-outils { position: static; }
@media (max-width: 959px) { .aside-ville { position: static; } }

.cta-engagement { display: flex; align-items: center; gap: .7rem; background: var(--marque); color: #fff; border-radius: var(--rayon); padding: .95rem 1.1rem; text-decoration: none; box-shadow: 0 2px 10px rgba(45,49,166,.20); transition: background .15s ease; }
.cta-engagement:hover { background: var(--marque-fonce); }
.cta-engagement__icone { width: 1.8rem; height: 1.8rem; flex: 0 0 auto; }
.cta-engagement__txt { display: grid; gap: .15rem; line-height: 1.2; }
.cta-engagement__txt strong { font-size: 1rem; }
.cta-engagement__sous { font-size: var(--echelle-legende); opacity: .9; font-weight: 400; }

/* CTA intercalé dans le contenu éditorial (tous les 3-4 paragraphes). */
.cta-inline { margin: 1.6rem 0; }
.cta-inline a { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--marque); text-decoration: none; border: 1px solid var(--marque); border-radius: var(--rayon-sm); padding: .55rem .95rem; transition: background .15s ease; }
.cta-inline a:hover { background: var(--marque-tint); }

/* Carte cliquable des villes (home) — 100 % SVG, sans JS. Labels révélés au survol/focus. */
.carte-villes__wrap { display: grid; gap: 1.5rem 2.5rem; align-items: center; }
@media (min-width: 800px) { .carte-villes__wrap { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.carte-villes__svg { width: 100%; height: auto; max-width: 560px; margin: 0 auto; display: block; }
.carte-villes__regions path { fill: var(--marque-tint); stroke: #fff; stroke-width: 1; stroke-linejoin: round; fill-rule: evenodd; }
.carte-villes__pt { cursor: pointer; }
.carte-villes__pt circle { fill: var(--marque); transition: r .12s ease, fill .12s ease; }
.carte-villes__pt text { font-family: var(--f-texte); font-size: 13px; font-weight: 600; fill: var(--marque-fonce);
  paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round;
  opacity: 0; transition: opacity .12s ease; pointer-events: none; }
.carte-villes__pt:hover circle, .carte-villes__pt:focus circle { fill: var(--marque-fonce); r: 7.5; }
.carte-villes__pt:hover text, .carte-villes__pt:focus text { opacity: 1; }
.carte-villes__pt:focus { outline: none; }
.carte-villes__liste { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 1.75rem; font-size: var(--echelle-legende); }
.carte-villes__liste li { break-inside: avoid; padding: .28rem 0; border-bottom: 1px solid var(--trame); }
.carte-villes__liste a { color: var(--marque); text-decoration: none; }
.carte-villes__liste a:hover { text-decoration: underline; }
@media (max-width: 460px) { .carte-villes__liste { columns: 1; } }

/* =============================================================================
   MOBILIER ÉDITORIAL — partage, résumé IA, colonne latérale (articles & FAQ)
   ========================================================================== */

/* — Barre de partage (haut de page) — */
.art-partage { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 1.1rem 0 0; }
.art-partage__label { font-size: .8rem; color: var(--encre-attenuee); margin-right: .1rem; }
.art-partage__btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; width: 34px; height: 34px; border-radius: var(--rayon-sm); background: var(--surface); border: 1px solid var(--trame); color: var(--marque-fonce); text-decoration: none; cursor: pointer; font-family: var(--f-texte); font-size: .82rem; font-weight: 600; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
.art-partage__btn:hover { background: var(--marque); border-color: var(--marque); color: #fff; transform: translateY(-1px); }

/* — Résumé IA (deep-links assistants — GEO) — */
.ia-resume { margin: 1.75rem 0; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--trame); border-radius: var(--rayon); }
.ia-resume__head { display: flex; align-items: center; gap: .5rem; font-family: var(--f-display); font-size: .78rem; font-weight: 700; color: var(--marque-fonce); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .75rem; }
.ia-resume__spark { color: var(--marque-vif); flex-shrink: 0; }
.ia-resume__btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.ia-resume__btn { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; background: var(--papier); border: 1px solid var(--trame); border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--encre); text-decoration: none; transition: all .18s ease; }
.ia-resume__btn svg { color: var(--ia-brand); flex-shrink: 0; }
.ia-resume__btn:hover { border-color: var(--ia-brand); background: var(--ia-brand); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.ia-resume__btn:hover svg { color: #fff; }

/* — Encart de partage bas de page — */
.art-partage-pied { margin-top: 2.5rem; padding: 1.3rem 1.5rem; background: var(--surface); border: 1px solid var(--trame); border-radius: var(--rayon); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.art-partage-pied__accroche { font-family: var(--f-display); font-weight: 600; color: var(--marque-fonce); }
.art-partage-pied__sous { font-size: .85rem; color: var(--encre-attenuee); margin-top: .15rem; }
.art-partage-pied__btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.art-partage-pied .art-partage__btn { width: auto; padding: 0 .8rem; }

/* — Sources / données publiques — */
.art-sources { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--trame); }
.art-sources h2 { font-size: .82rem; color: var(--encre-attenuee); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .9rem; }
.art-sources__liste { display: flex; flex-wrap: wrap; gap: .5rem; }
.art-source-lien { display: inline-flex; align-items: center; gap: .3rem; padding: .32rem .75rem; background: var(--surface); border: 1px solid var(--trame); border-radius: 999px; font-size: .78rem; color: var(--marque-fonce); text-decoration: none; }
.art-source-lien:hover { border-color: var(--marque); color: var(--marque); }

/* — Colonne latérale d'article / FAQ — */
.art-aside { position: sticky; top: 5rem; display: grid; gap: 1.25rem; align-content: start; }
@media (max-width: 959px) { .art-aside { position: static; } }
.art-aside__carte { background: var(--surface); border: 1px solid var(--trame); border-radius: var(--rayon); padding: 1.2rem; }
.art-aside__titre { font-family: var(--f-display); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--marque-fonce); margin: 0 0 .85rem; padding-bottom: .6rem; border-bottom: 1px solid var(--trame); }

/* CTA relation — carte sombre (dégradé indigo) */
.art-aside__cta { background: linear-gradient(135deg, var(--marque-fonce) 0%, var(--marque) 100%); border: 1px solid rgba(255,255,255,.12); border-radius: var(--rayon); padding: 1.35rem; box-shadow: var(--ombre-marque); }
.art-aside__cta-sur { display: inline-block; color: #fff; background: rgba(255,255,255,.14); font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .28rem .6rem; border-radius: 999px; margin-bottom: .7rem; }
.art-aside__cta h3 { color: #fff; font-size: 1.02rem; line-height: 1.25; margin: 0 0 .5rem; }
.art-aside__cta p { color: rgba(255,255,255,.8); font-size: .82rem; line-height: 1.5; margin: 0 0 1rem; }
.art-aside__cta .action { display: block; text-align: center; background: #fff; color: var(--marque-fonce); border-color: #fff; }
.art-aside__cta .action:hover { background: rgba(255,255,255,.9); color: var(--marque-fonce); }

/* Diagnostic */
.art-aside__diag { display: flex; align-items: center; gap: .85rem; background: var(--surface-2); border: 1px solid var(--marque-tint); border-radius: var(--rayon); padding: 1rem; text-decoration: none; }
.art-aside__diag:hover { border-color: var(--marque); }
.art-aside__diag-ico { width: 42px; height: 42px; background: var(--marque); border-radius: var(--rayon-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.art-aside__diag-txt strong { display: block; font-size: .86rem; color: var(--marque-fonce); }
.art-aside__diag-txt span { font-size: .75rem; color: var(--encre-attenuee); }

/* Partage vertical + copie */
.art-aside__partage { display: flex; flex-direction: column; gap: .5rem; }
.art-aside__partage a { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border-radius: var(--rayon-sm); font-size: .82rem; font-weight: 600; text-decoration: none; border: 1px solid var(--trame); background: var(--papier); color: var(--encre); }
.art-aside__partage a:hover { border-color: var(--marque); color: var(--marque); }
.art-aside__copie { display: flex; gap: .4rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--trame); }
.art-aside__copie input { flex: 1; min-width: 0; font-size: .72rem; padding: .4rem .6rem; border: 1px solid var(--trame); border-radius: var(--rayon-sm); color: var(--encre-attenuee); background: var(--papier); }
.art-aside__copie button { flex-shrink: 0; padding: .4rem .7rem; background: var(--marque); color: #fff; border: none; border-radius: var(--rayon-sm); font-size: .72rem; font-weight: 700; cursor: pointer; }
.art-aside__copie button:hover { background: var(--marque-vif); }

/* Listes de liens (villes, récents) */
.art-aside__liens { display: flex; flex-direction: column; gap: .4rem; }
.art-aside__lien { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .65rem; background: var(--papier); border: 1px solid var(--trame); border-radius: var(--rayon-sm); text-decoration: none; font-size: .8rem; color: var(--encre); }
.art-aside__lien:hover { border-color: var(--marque); color: var(--marque); }
.art-aside__lien span:last-child { color: var(--marque); font-weight: 700; }
.art-aside__recent { display: flex; flex-direction: column; gap: .15rem; padding: .55rem .1rem; text-decoration: none; border-bottom: 1px solid var(--trame); }
.art-aside__recent:last-child { border-bottom: 0; }
.art-aside__recent strong { font-size: .8rem; font-weight: 600; color: var(--encre); line-height: 1.3; }
.art-aside__recent:hover strong { color: var(--marque); }
.art-aside__recent span { font-size: .7rem; color: var(--encre-attenuee); }
.art-aside__tout { display: block; text-align: center; margin-top: .85rem; padding-top: .75rem; border-top: 1px solid var(--trame); font-size: .8rem; font-weight: 600; color: var(--marque); text-decoration: none; }
.art-aside__tout:hover { color: var(--marque-vif); }