/* ============================================================
   PAF STUDIO — Rapports clients · Bibliothèque de composants
   Chaque composant absorbe des contenus de longueur variable :
   flex + min-height:0 partout, et le moteur ajuste [data-fit].
   ============================================================ */

/* ============ COUVERTURE ============ */
.cover { background: var(--paper); }
/* Mosaïque aux positions mesurées dans les PPTX (slide 720×405 pt) :
   rangée haute = large (426 pt) + étroite (207 pt), rangée basse inversée,
   marges 37 pt, gouttières 12 pt horizontales / 17 pt verticales. */
.cover__grid { position: absolute; inset: 0; }
.cover__photo { position: absolute; border-radius: 20px; height: 38.6%; }
.cover__photo--tl { left: 5.18%; top: 9.26%; width: 59.18%; }
.cover__photo--tr { left: 66.03%; top: 9.26%; width: 28.72%; }
.cover__photo--bl { left: 5.18%; top: 52.15%; width: 28.72%; }
.cover__photo--br { left: 35.63%; top: 52.15%; width: 59.18%; }
.cover__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.cover__client, .cover__doc {
  color: var(--white);
  font-weight: 700;
  font-size: var(--fs-body-lg);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
}
.cover__client { margin-bottom: 26px; }
.cover__doc { margin-top: 30px; }
.cover__title {
  font-family: var(--font-display);
  font-size: var(--fs-cover);
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1;
  padding-bottom: 6px;
}
.cover__author {
  position: absolute;
  left: 88px; bottom: 88px; /* 24 px à l'intérieur de la photo bas-gauche */
  color: var(--white);
  z-index: 2;
}
.cover__author .name { font-weight: 700; font-size: var(--fs-body-lg); }
.cover__author .role { font-size: var(--fs-body-lg); font-weight: 400; }

/* ============ SOMMAIRE ============ */
.toc { display: flex; height: 100%; align-items: stretch; }
.toc__title {
  align-self: flex-end;
  flex: 0 0 38%;
  font-size: var(--fs-section);
  font-weight: 800;
  padding-bottom: 40px;
}
.toc__list { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.toc__item { padding: 26px 0; border-bottom: 1px solid rgba(31,21,81,.35); }
.toc__item:last-child { border-bottom: none; }
.toc__item .t { font-weight: 700; font-size: var(--fs-body-lg); margin-bottom: 6px; }
.toc__item .d { font-weight: 400; font-size: var(--fs-body-lg); }

/* ============ INTERCALAIRE (section) ============ */
.section__photo { position: absolute; inset: 36px; border-radius: 20px; }
.section__center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 2;
}
.section__kicker {
  color: var(--white);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.section__title {
  font-family: var(--font-display);
  font-size: var(--fs-section-lg);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  padding-bottom: 4px;
}
.section__logo { margin-top: 34px; max-height: 96px; max-width: 300px; object-fit: contain; }
.section__author { position: absolute; left: 72px; bottom: 64px; color: var(--white); z-index: 2; }
.section__author .name { font-weight: 700; }
/* variante sobre : fond panneau, titre ink, sticker au-dessus */
.section--flat .section__title { text-transform: none; font-family: var(--font-body); font-size: var(--fs-section); line-height: 1.25; text-align: center; }
.section--flat .sticker { width: 130px; margin-bottom: 24px; }

/* ============ GRILLE DE CHIFFRES CLÉS ============ */
.kpis {
  display: flex;
  justify-content: center;
  gap: var(--gutter);
  margin-top: 30px;
}
.kpi {
  position: relative;
  flex: 1 1 0;
  max-width: 250px;
  background: var(--card);
  border-radius: var(--card-radius);
  padding: 40px 18px 74px;
  text-align: center;
  min-height: 218px;
}
/* Alignement inter-cartes garanti : zone de label à hauteur fixe
   (2 lignes), valeur juste en dessous, mention ancrée en bas.
   Ni la mention ni la longueur du label ne décalent la valeur. */
.kpi__label {
  font-weight: 700;
  font-size: var(--fs-small);
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kpi__value {
  margin-top: 10px;
  font-size: var(--fs-kpi);
  font-weight: 800;
  line-height: 1.1;
}
.kpi__note {
  position: absolute;
  left: 14px; right: 14px; bottom: 22px;
  font-size: var(--fs-note);
  font-style: italic;
}

/* Conclusion sous la grille */
.kpis-conclusion { text-align: center; font-size: var(--fs-body-lg); max-width: 820px; margin: 34px auto 0; }

/* ============ ENCART DE MISE EN AVANT ============ */
.callout {
  background: var(--white);
  border-radius: 16px;
  padding: 24px 34px;
  display: flex;
  align-items: center;
  gap: 26px;
  max-width: 940px;
  margin: 30px auto 0;
}
.callout__icon { flex: 0 0 64px; width: 64px; }
.callout__text { font-size: var(--fs-body-lg); }
.callout--card { background: var(--card-soft); }

/* ============ DEUX COLONNES (texte + visuel) ============ */
.twocol { display: flex; gap: var(--gap-cols); flex: 1; min-height: 0; align-items: center; }
.twocol__text { flex: 0 0 40%; display: flex; flex-direction: column; gap: 26px; font-size: var(--fs-body-lg); }
.twocol__visual { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; min-height: 0; }
.twocol__visual img { max-width: 100%; max-height: 100%; object-fit: contain; }
.twocol--wide-text .twocol__text { flex-basis: 52%; }
/* visuel dans une carte blanche (graphique, capture) */
.visual-card {
  background: var(--white);
  border-radius: 18px;
  padding: 30px;
  width: 100%;
}

/* ============ TABLEAU COMPARATIF (évolution M-1) ============ */
table.compare { border-collapse: collapse; width: 100%; font-size: var(--fs-table); }
table.compare th, table.compare td { border: var(--table-border); padding: 16px 22px; }
table.compare thead th {
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  text-align: right;
  border-color: var(--ink);
  white-space: nowrap; /* les retours voulus passent par \n dans le JSON */
}
table.compare thead th:first-child { text-align: left; }
table.compare td { text-align: right; background: var(--white); white-space: nowrap; }
table.compare td:first-child { text-align: left; background: var(--card-soft); white-space: normal; }
table.compare td.evol { font-weight: 700; }
table.compare .unit { font-style: italic; font-weight: 400; }

/* ============ TABLEAU DÉTAILLÉ (liste de leads, statuts) ============ */
table.detail {
  border-collapse: separate; border-spacing: 0;
  width: auto; min-width: 52%; max-width: 88%; margin: 28px auto 0;
  font-size: var(--fs-body);
  border-radius: 18px; overflow: hidden;
  /* Pas d'ombre portée : Aperçu (Quick Look) rend l'ombre exportée par Chrome
     comme un bloc gris opaque autour du tableau (vécu : Estheticare août 2026).
     Un filet fin suffit à détacher le tableau du panneau. */
  outline: 1px solid rgba(31, 21, 81, .10);
}
table.detail th, table.detail td { padding: 13px 40px; text-align: left; }
table.detail thead th { background: var(--ink); color: var(--white); font-weight: 700; }
table.detail td { background: var(--white); border-top: 1px solid rgba(31, 21, 81, .10); }
table.detail tbody tr:first-child td { border-top: none; }
table.detail tbody tr:nth-child(even) td { background: var(--panel); }
table.detail td:not(:first-child) { font-weight: 600; font-variant-numeric: tabular-nums; }
/* 6 colonnes ou plus : padding réduit, sinon le tableau dépasse du panneau à droite
   (vécu : liste des demandes Garden, Sauvage août 2026). */
table.detail--wide th, table.detail--wide td { padding: 13px 22px; }
/* Les statuts priment sur le zébrage : même spécificité que la règle
   nth-child(even) ci-dessus, donc `tbody` est nécessaire, sinon une ligne
   d'alerte en position paire perd son fond. */
table.detail tbody tr.alert td { background: var(--alert-bg); }
table.detail tbody tr.ok td { background: var(--white); }

/* ============ GRILLE DE CARTES (demandes, statuts) ============ */
.cards { display: flex; gap: var(--gutter); justify-content: center; margin-top: 26px; }
/* Flèche avant / après entre deux cartes (option `fleche` du composant cartes) */
.cards__arrow { flex: 0 0 auto; align-self: center; display: flex; color: var(--accent); }
.cards__arrow svg { width: 64px; height: 64px; }
.card {
  flex: 1 1 0;
  max-width: 320px;
  background: var(--white);
  border-radius: var(--card-radius);
  padding: 40px 28px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 250px;
}
.card__title { font-size: var(--fs-body-lg); line-height: 1.35; min-height: 2.7em; }
.card__value { font-size: var(--fs-kpi); font-weight: 800; margin: auto 0; }
.card__chip { margin-top: 14px; }
/* Chips de statut */
.chip {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 700;
  padding: 6px 18px;
  border-radius: 6px;
  background: var(--card-soft);
}
.chip--priority { background: var(--yellow); }
.chip--accent { background: var(--accent); color: var(--white); border-radius: 999px; }

/* ============ LISTE D'ACTIONS / RECOMMANDATIONS ============ */
.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  row-gap: 44px;
  margin-top: 34px;
  align-content: start;
}
.action__head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.action__icon { width: 52px; height: 52px; border-radius: 10px; background: var(--white); display: flex; align-items: center; justify-content: center; }
.action__icon img { width: 28px; height: 28px; }
.action__title { font-weight: 700; font-size: var(--fs-body-lg); }
.action__body { font-size: var(--fs-body); }
/* Respiration entre les blocs : demandé par Pierre (Estheticare août 2026),
   les blocs à 36px se lisaient collés. */
.actions--simple { row-gap: 60px; }
.actions--simple .action__title { margin-bottom: 10px; }

/* ============ LEXIQUE / LISTE DE DÉFINITIONS ============ */
.deflist {
  columns: 2;
  column-gap: 90px;
  margin-top: 40px;
  flex: 1;
}
.deflist li {
  break-inside: avoid;
  list-style: none;
  position: relative;
  padding-left: 28px;
  margin-bottom: 30px;
  font-size: var(--fs-body-lg);
}
.deflist li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.deflist .term { font-weight: 700; }

/* ============ CONTACT ============ */
.contact { background: var(--panel); }
.contact::before { /* bande diagonale blanche à gauche */
  content: '';
  position: absolute;
  inset: 0 55% 0 0;
  background: var(--white);
  transform: skewX(-8deg) translateX(-60px);
}
.contact__photo {
  position: absolute;
  left: 110px; top: 100px;
  width: 440px; height: 520px;
  object-fit: cover;
}
.contact__right { position: absolute; left: 640px; right: 110px; top: 110px; }
.contact__quote {
  position: absolute; top: -16px; left: -14px;
  font-family: var(--font-display);
  font-size: 300px; font-weight: 800; line-height: .9;
  color: var(--card-soft); z-index: 0;
}
.contact__right > *:not(.contact__quote) { position: relative; z-index: 1; }
.contact__title { position: relative; font-size: 58px; font-weight: 800; margin-bottom: 18px; white-space: nowrap; }
.contact__role { font-weight: 700; font-size: var(--fs-table); line-height: 1.45; margin-bottom: 34px; }
.contact__pitch { font-size: var(--fs-table); margin-bottom: 44px; }
.contact__cols { display: flex; gap: 90px; }
.contact__cols .label { color: var(--accent); font-size: var(--fs-body-lg); margin-bottom: 6px; }
.contact__cols .value { font-size: var(--fs-body-lg); white-space: nowrap; }
.contact__paf { position: absolute; right: 44px; bottom: 26px; height: 76px; opacity: .9; }

/* ============ GRAPHIQUES (SVG générés par charts.js) ============ */
.chart-wrap { width: 100%; height: 100%; display: flex; flex-direction: column; min-height: 0; }
.twocol__visual .chart-wrap { padding-bottom: 56px; }
.chart-title { font-weight: 700; font-size: var(--fs-small); margin-bottom: 14px; }
.chart-wrap svg { flex: 1; min-height: 0; width: 100%; height: 100%; }
.chart-svg text { font-family: var(--font-body); fill: var(--ink); }

/* ============ STICKERS 3D ============ */
.sticker { display: block; }
.sticker--corner { position: absolute; top: -28px; right: -10px; width: 200px; z-index: 3; }
/* sticker qui déborde du bord haut-droit de la slide (rogné par overflow:hidden) */
.sticker--corner-overflow {
  position: absolute;
  top: -66px; right: -20px;
  width: 300px;
  z-index: 3;
}
/* Inclinaisons mesurées dans les PPTX d'origine : les stickers sont
   toujours posés avec un angle, jamais droits. */
.sticker--hand-point {          /* main qui pointe : −50°, ancrée hors cadre.
   Remontée de 30px et décalée de 20px à droite le 04/09/2026 (AJDR août) :
   l'index touchait les titres en haut à droite des slides actions. */
  position: absolute;
  top: -90px; right: 60px;
  width: 380px;
  transform: rotate(-50deg);
  z-index: 3;
}
.sticker--badge {               /* badge fist-bump : −34°, semi hors cadre */
  position: absolute;
  top: -30px; right: -40px;
  width: 258px;
  transform: rotate(-34deg);
  z-index: 3;
}
.section--flat .sticker { transform: rotate(20deg); }

/* Poses alternatives, choisies par slide via `stickerPose` dans le JSON.
   Elles évitent que toutes les slides portent la même main qui pointe, au
   même endroit. Toujours inclinées et mordant le bord de la slide, comme les
   stickers d'origine. Ajoutées le 25/08/2026. */
.sticker--pose-a { position: absolute; top: -16px; right: -34px; width: 290px; transform: rotate(-16deg); z-index: 3; }
.sticker--pose-b { position: absolute; top: -22px; right: 30px;  width: 250px; transform: rotate(14deg);  z-index: 3; }
.sticker--pose-c { position: absolute; top: -34px; right: -46px; width: 300px; transform: rotate(-28deg); z-index: 3; }
/* pose miroir : pour les stickers directionnels (flèches) dont le sens doit
   ramener le regard vers le contenu et non le pousser hors de la slide. */
.sticker--pose-d { position: absolute; top: -10px; right: -30px; width: 280px; transform: scaleX(-1) rotate(-14deg); z-index: 3; }
/* pose e : sticker ENTIÈREMENT dans le panneau, incliné vers la gauche.
   Pour les stickers qui ne supportent pas d'être rognés (pouce, billets,
   badge). Demandé par Pierre le 04/09/2026 (AJDR août) : un pouce coupé par
   le bord se lit comme une erreur, pas comme un parti pris. */
.sticker--pose-e { position: absolute; top: 18px; right: 52px; width: 190px; transform: rotate(-14deg); z-index: 3; }

/* ---- Timeline : jalons datés sur un rail horizontal ---- */
.timeline { display: flex; gap: 24px; margin-top: 34px; position: relative; width: 100%; }
.timeline::before {
  content: ''; position: absolute; left: 4%; right: 4%; top: 85px;
  height: 3px; background: var(--chart-grid); border-radius: 2px;
}
.tl { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.tl__date { font-weight: 800; font-size: var(--fs-body-lg); height: 60px; display: flex; align-items: flex-end; padding-bottom: 6px; }
.tl__node {
  width: 52px; height: 52px; border-radius: 50%; z-index: 1;
  background: var(--white); border: 3px solid var(--accent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.tl__node img { width: 22px; height: 22px; }
.tl--fort .tl__node { background: var(--yellow); border-color: var(--ink); }
.tl__title { font-weight: 700; font-size: var(--fs-body); margin-bottom: 8px; }
.tl__body { font-size: var(--fs-small); line-height: var(--lh-body); max-width: 250px; }
.tl__body p { margin: 0; }

/* ---- Pictos Lucide (inline SVG, couleur héritée) ----
   Respiration : le picto occupe ~45 % de sa pastille, jamais plus. */
.pict { width: 24px; height: 24px; stroke-width: 2; flex-shrink: 0; }
.tl__node .pict { width: 22px; height: 22px; color: var(--ink); }
.action__icon .pict { width: 24px; height: 24px; color: var(--ink); }

/* ---- Mockups de devices (pur CSS) ----
   Cadres sobres : bezel sombre arrondi, ombre douce. L'écran = la capture. */
.mock-tablet {
  background: #1c1c22;
  border-radius: 26px;
  padding: 20px;
  box-shadow: 0 24px 48px -20px rgba(31, 21, 81, .35);
  display: inline-block;
  max-width: 100%;
}
.mock-tablet__screen { display: block; width: 100%; border-radius: 10px; }
.mock-phone {
  background: #1c1c22;
  border-radius: 34px;
  padding: 12px;
  box-shadow: 0 20px 40px -16px rgba(31, 21, 81, .45);
  display: inline-block;
  width: 150px;
}
.mock-phone__screen { display: block; width: 100%; border-radius: 22px; }
.mock-duo { position: relative; display: inline-block; padding: 0 0 26px 34px; max-width: 100%; }
.mock-duo .mock-tablet { max-width: 520px; }
.mock-duo__phone { position: absolute; left: 0; bottom: 0; }

/* ---- Captures flottantes (visuel.captures de deux-colonnes) ----
   Extraits de pages desktop en cascade : carte blanche arrondie, ombre
   douce, légende de la source au-dessus. Pas de cadre de device. */
.float-stack { position: relative; width: 100%; height: 470px; }
.float-shot { position: absolute; margin: 0; }
.float-shot img {
  display: block; width: auto; max-width: 100%; height: auto; max-height: 400px;
  object-fit: contain; /* jamais de rognage caché : le cadrage se fait dans le fichier (02/10/2026) */
  border-radius: 10px; background: var(--white);
  box-shadow: 0 22px 44px -18px rgba(31, 21, 81, .38), 0 0 0 1px rgba(31, 21, 81, .06);
}
.float-shot__label {
  display: inline-block; margin: 0 0 8px; padding: 4px 10px;
  font-size: 13px; font-weight: 600; line-height: 1.2;
  color: var(--white); background: var(--ink); border-radius: 6px;
}
/* Une capture : centrée par flex, pas par translateY(-50%). En impression,
   Chrome calcule le translate avant la hauteur de l'image : l'étiquette se
   centrait seule et l'image tombait sous la slide (bug PDF du 02/10/2026). */
.float-stack--1 { display: flex; align-items: center; }
.float-shot--1-1 { position: static; max-width: 100%; }
.float-shot--1-1 img { max-height: 430px; }
.float-shot--2-1 { left: 0; top: 0; width: 86%; }
.float-shot--2-2 { right: 0; bottom: 0; width: 78%; z-index: 2; }
.float-shot--2-1 img, .float-shot--2-2 img { max-height: 270px; }
.float-shot--3-1 { left: 0; top: 0; width: 90%; }
.float-shot--3-2 { right: 0; top: 160px; width: 84%; z-index: 2; }
.float-shot--3-3 { left: 4%; bottom: 0; width: 84%; z-index: 3; }
.float-shot--3-1 img, .float-shot--3-2 img, .float-shot--3-3 img { max-height: 160px; }
.twocol--captures .twocol__text { flex-basis: 36%; }
.twocol--narrow-text .twocol__text { flex-basis: 27%; } /* etroit: true, une capture qui doit se lire en grand */

/* ---- Ingrédient (composant `ingredient`, proposé le 02/10/2026) ----
   Trois temps empilés à gauche : chez eux, chez toi, à faire (jaune). */
.ingr { gap: 18px; font-size: var(--fs-body); padding-top: 18px; }
.ingr__label {
  font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.ingr__bloc--toi .ingr__label { color: var(--ink); }
.ingr__bloc--todo { background: var(--yellow); border-radius: 14px; padding: 16px 20px; }
.ingr__bloc--todo .ingr__label { color: var(--ink); }

/* ---- Questions (composant `questions`, proposé le 02/10/2026) ---- */
.qsts { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 56px; }
.qst { display: flex; gap: 18px; align-items: flex-start; }
.qst__num {
  flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--yellow);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 22px; color: var(--ink);
}
.qst__q { font-weight: 700; font-size: var(--fs-body-lg); line-height: 1.3; }
.qst__why { font-size: var(--fs-small); margin-top: 6px; opacity: .8; }

/* ============ CHIFFRES ÉDITORIAUX (composant `chiffres`) ============
   Grands chiffres posés sur le panneau, sans boîte : intitulé, chiffre,
   commentaire. Filets verticaux entre colonnes. Créé le 29/09/2026 pour
   remplacer la grille de cartes blanches. */
.figs-body { justify-content: safe center; gap: 34px; }
.figs-lead { font-size: var(--fs-body-lg); line-height: var(--lh-body); max-width: 920px; margin: 0; }
.figs {
  display: grid;
  grid-template-columns: repeat(var(--figs-n), minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  max-width: min(1080px, calc(var(--figs-n) * 480px));
}
/* subgrid : intitulés, chiffres et commentaires alignés d'une colonne à
   l'autre, quel que soit le nombre de lignes de l'intitulé */
.fig {
  padding: 4px 40px 6px;
  border-left: 1.5px solid var(--chart-grid);
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: start;
}
.fig:first-child { padding-left: 0; border-left: 0; }
.fig__label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.35;
  display: flex;
  align-items: flex-end;
  position: relative;
  text-wrap: balance;
}
/* flèche dans la gouttière : le libellé reste aligné sur le chiffre */
.fig__arrow { position: absolute; left: -31px; bottom: 0.1em; width: 22px; height: 22px; color: var(--accent); }
.fig__value {
  font-family: var(--font-display);
  font-size: calc(var(--fs-kpi) * 1.55);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 10px 0 14px;
  white-space: nowrap;
}
.fig--fort .fig__value span {
  background: linear-gradient(transparent 56%, var(--yellow) 56%, var(--yellow) 92%, transparent 92%);
  padding: 0 4px;
  margin: 0 -4px;
}
.fig__text { font-size: var(--fs-body); line-height: 1.4; max-width: 330px; }
.figs-conclusion {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  max-width: 940px;
  margin: 0;
  padding-left: 22px;
  border-left: 6px solid var(--yellow);
}

/* ============ GRAPHIQUES NARRATIFS (vases, trajectoire, projection) ============
   Créés le 29/09/2026 à partir des maquettes retenues par Pierre. */
.viz-body { flex-direction: row; align-items: center; gap: 56px; }
.viz-body--rev .viz-text { order: 2; }
.viz-text { flex: 0 0 380px; font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.viz-text p { margin: 0 0 18px; }
.viz-graph { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; }
.viz-svg { display: block; max-width: 100%; height: auto; }
.viz-svg text { font-family: var(--font-body); }
.viz-legend { display: flex; gap: 22px; font-size: var(--fs-small); margin-top: 4px; }
.viz-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 8px; vertical-align: -2px; }
.viz-svg--full { width: 100%; }

/* ---- Gaufre (grilles de 100) ---- */
.wafs { display: flex; gap: 90px; justify-content: center; }
.waf__title { font-size: var(--fs-small); font-weight: 700; color: var(--ink-soft); margin-bottom: 12px; }
.waf__grid { display: grid; grid-template-columns: repeat(10, 20px); gap: 4px; }
.waf__grid i { width: 20px; height: 20px; border-radius: 5px; background: var(--card); }
.waf__grid i.on { background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--ink); }
.waf__text { margin-top: 16px; font-size: var(--fs-body); max-width: 300px; line-height: 1.4; }

/* ---- Addition (ticket de caisse) ---- */
.tk {
  width: 430px; background: var(--white); padding: 34px 36px 42px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 20px; color: var(--ink);
  -webkit-mask: radial-gradient(12px at 50% 100%, #0000 98%, #000) 50% 100% / 24px 100% repeat-x;
          mask: radial-gradient(12px at 50% 100%, #0000 98%, #000) 50% 100% / 24px 100% repeat-x;
}
.tk__head { font-family: var(--font-body); text-align: center; font-weight: 800; font-size: 22px; letter-spacing: .14em; text-transform: uppercase; }
.tk__sub { text-align: center; font-size: 15px; color: var(--ink-soft); margin: 4px 0 22px; }
.tk__row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
.tk__sep { border-top: 2px dashed var(--chart-grid); margin: 12px 0; }
.tk__total { font-weight: 800; font-size: 24px; }
.tk__total span:last-child { background: var(--yellow); padding: 0 8px; }

/* ---- Conversation (assistant IA) ---- */
.chat { width: 540px; background: var(--white); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.chat__me, .chat__ai { padding: 14px 18px; border-radius: 18px; font-size: var(--fs-body); line-height: 1.4; }
.chat__me { align-self: flex-end; max-width: 80%; background: var(--accent); color: var(--white); border-bottom-right-radius: 6px; }
.chat__ai { align-self: flex-start; width: 82%; background: var(--panel); border-bottom-left-radius: 6px; }
.chat__skel { height: 14px; border-radius: 7px; background: var(--card); margin: 10px 0; }
.chat__miss { margin-top: 12px; font-size: var(--fs-small); font-weight: 700; }
.chat__miss span { background: var(--yellow); padding: 3px 10px; border-radius: 6px; }

/* ---- Règle (ancienne barrée, nouvelle surlignée) ---- */
.rule-body { display: grid; grid-template-columns: 1fr 300px; gap: 70px; align-items: center; }
.rules { display: flex; flex-direction: column; gap: 34px; }
.rule__when { font-size: var(--fs-small); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.rule__txt { font-size: 30px; line-height: 1.3; font-weight: 700; }
.rule--old .rule__txt { color: var(--ink-soft); font-weight: 600; text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 3px; }
.rule--new .rule__txt mark { margin: 0; white-space: normal; padding: 0 3px;
  background: linear-gradient(transparent 56%, var(--yellow) 56%, var(--yellow) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rule--new .rule__txt mark::before { display: none; }
.rule-stat { border-left: 1.5px solid var(--chart-grid); padding-left: 40px; }
.rule-stat__v { font-family: var(--font-display); font-weight: 800; font-size: 104px; line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
.rule-stat__l { font-size: var(--fs-body); line-height: 1.4; margin-top: 10px; }

/* ---- Circuit ---- */
.hl { background: linear-gradient(transparent 56%, var(--yellow) 56%, var(--yellow) 92%, transparent 92%); padding: 0 4px; }
.flow { display: flex; align-items: stretch; }
.flow__node { flex: 1 1 0; background: var(--white); border-radius: 18px; padding: 20px 22px; font-size: var(--fs-body); line-height: 1.35; }
.flow__node b { display: block; font-size: 22px; margin-bottom: 6px; }
.flow__node--y { background: var(--yellow); }
.flow__ar { flex: 0 0 50px; display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 30px; font-weight: 800; }
.flow__figs { display: flex; gap: 70px; margin-top: 38px; }
.flow__v { font-family: var(--font-display); font-weight: 800; font-size: 64px; line-height: 1; letter-spacing: -.02em; }
.flow__l { font-size: var(--fs-body); margin-top: 8px; }

/* ---- Colonnes ---- */
.col4s { display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.col4 { padding: 0 26px; border-left: 1.5px solid var(--chart-grid); }
.col4:first-child { border-left: 0; padding-left: 0; }
.col4__ic { width: 58px; height: 58px; border-radius: 50%; background: var(--yellow); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.col4__svg { width: 28px; height: 28px; color: var(--ink); }
.col4__t { font-size: 22px; font-weight: 700; line-height: 1.25; margin-bottom: 10px; }
.col4__p { font-size: 19px; line-height: 1.45; }

/* ---- Téléphone ---- */
.ph-body { flex-direction: row; align-items: center; gap: 64px; }
.ph { flex: 0 0 290px; height: 440px; border-radius: 40px; background: var(--ink); padding: 14px; }
.ph__in { height: 100%; border-radius: 28px; background: #EFEAE2; padding: 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.ph__top { font-size: 15px; font-weight: 700; text-align: center; margin-bottom: 6px; }
.ph__msg { background: var(--white); border-radius: 12px; padding: 12px 14px; font-size: 16px; line-height: 1.4; }
.ph__btn { background: var(--white); border-radius: 10px; text-align: center; padding: 9px; font-size: 16px; font-weight: 700; color: #008069; }
.ph__btn--on { background: var(--yellow); color: var(--ink); }
.ph-steps { display: flex; flex-direction: column; gap: 24px; flex: 1 1 auto; }
.ph-step { display: grid; grid-template-columns: 54px 1fr; gap: 14px; align-items: start; }
.ph-step__n { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.ph-step__t { font-size: 23px; font-weight: 700; margin: 4px 0 4px; }
.ph-step__p { font-size: var(--fs-body); line-height: 1.4; }

/* ---- Duo ---- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.duo__c { border-radius: 22px; padding: 26px 30px; }
.duo__c--y { background: var(--yellow); }
.duo__c--l { background: var(--card); }
.duo__e { font-size: 56px; line-height: 1; }
.duo__t { font-size: 27px; font-weight: 800; margin: 12px 0 6px; }
.duo__p { font-size: var(--fs-body); line-height: 1.4; }
.duo__v { font-family: var(--font-display); font-weight: 800; font-size: 42px; margin-top: 12px; }

/* ---- Décisions ---- */
table.dec { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
table.dec th { text-align: left; font-size: var(--fs-small); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding: 0 12px 10px; }
table.dec td { padding: 14px 12px; border-top: 1.5px solid var(--chart-grid); vertical-align: middle; line-height: 1.35; }
.dec__who { font-weight: 800; width: 220px; }
.dec__d { font-size: 17px; color: var(--ink-soft); margin-top: 4px; }
.dec__box { width: 190px; white-space: nowrap; }
.dec__box span { display: inline-flex; align-items: center; gap: 8px; margin-right: 18px; font-size: 18px; }
.dec__box i { width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 5px; display: inline-block; }
/* le sticker d'angle ne doit pas mordre sur l'en-tête du tableau ni sur les étapes */
table.dec { margin-top: 26px; width: calc(100% - 150px); }
.ph-steps { padding-top: 40px; }

.dec__gain { width: 300px; font-weight: 700; color: var(--ink); line-height: 1.35; }
table.dec td.dec__gain { border-left: 6px solid var(--yellow); padding-left: 16px; }
/* Variante sans le filet jaune (Pierre, 04/10/2026) */
table.dec--sobre td.dec__gain { border-left: 0; padding-left: 12px; }

/* ---- Matrice (qui fait quoi) ---- */
table.mx { width: calc(100% - 140px); border-collapse: collapse; font-size: var(--fs-body); }
table.mx th { font-size: 22px; padding: 0 14px 12px; text-align: center; }
table.mx th:first-child { text-align: left; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
table.mx td { padding: 13px 14px; border-top: 1.5px solid var(--chart-grid); text-align: center; vertical-align: middle; }
table.mx td.mx__lab { text-align: left; font-weight: 700; }
.mx__c { display: inline-flex; align-items: center; gap: 8px; }
.mx__c--oui { font-weight: 700; }
.mx__c--non, .mx__c--neutre { color: var(--ink-soft); }
.mx__y, .mx__n { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 15px; }
.mx__y { background: var(--accent); color: var(--white); }
.mx__n { background: var(--card); color: var(--ink-soft); }
.mx__sub { display: block; font-size: 16px; color: var(--ink-soft); font-weight: 400; margin-top: 2px; }

/* ---- Créas (visuels diffusés + chiffre) — maquette 30/09/2026 ---- */
.creas-g { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 262px)); justify-content: center; gap: 26px; align-items: start; }
.crea { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.crea__img { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 18px rgba(31,21,81,.14); background: var(--white); aspect-ratio: 4 / 5; }
.crea__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crea--fort .crea__img { outline: 5px solid var(--yellow); outline-offset: 0; }
.crea__badge { position: absolute; top: 10px; left: 10px; background: var(--yellow); color: var(--ink); font-size: 14px; font-weight: 700; padding: 4px 10px; border-radius: var(--chip-radius); }
.crea__t { font-size: 18px; font-weight: 700; line-height: 1.25; }
.crea__v { font-size: 30px; font-weight: 800; line-height: 1.1; margin-top: 4px; }
.crea__l { font-size: 15px; font-weight: 500; margin-left: 6px; }
.crea__p { font-size: 15px; line-height: 1.4; margin-top: 4px; }
.creas-v { display: grid; grid-template-columns: 1fr 1.25fr; gap: 34px; align-items: start; }
.crea--big .crea__img { max-height: 470px; }
.crea--big .crea__v { font-size: 40px; }
.creas-v__side { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rule-stat__v--long { font-size: 78px; }
.rule-stat__v--xlong { font-size: 62px; }
.crea__img--contain { background: var(--ink); }
.crea__img--contain img { object-fit: contain; }

/* ---- Bento (section de site) — maquette 30/09/2026 ---- */
.bento { display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-auto-rows: minmax(150px, auto); gap: 18px; }
.bento__c { background: var(--white); border-radius: 22px; padding: 24px 26px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 1px 0 rgba(31,21,81,.06), 0 8px 24px rgba(31,21,81,.06); }
.bento__c--large { grid-column: span 2; }
.bento__c--haute { grid-row: span 2; }
.bento__c--fort { background: var(--yellow); }
.bento__c--sombre { background: var(--ink); color: var(--white); }
.bento__top { display: flex; align-items: center; gap: 10px; }
.bento__ic { width: 36px; height: 36px; border-radius: 10px; background: var(--card-soft); display: inline-flex; align-items: center; justify-content: center; }
.bento__c--fort .bento__ic { background: rgba(255,255,255,.6); }
.bento__c--sombre .bento__ic { background: rgba(255,255,255,.12); }
.bento__svg { width: 20px; height: 20px; }
.bento__l { font-size: 16px; font-weight: 600; opacity: .8; }
.bento__v { font-family: var(--font-display); font-size: 40px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; margin-top: auto; }
.bento__p { font-size: 17px; line-height: 1.4; }
.bento__bar { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; margin-top: 8px; }
.bento__bar i { flex: 1; height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--accent), var(--accent-dark)); }
/* ---- Annoté (pub dans un téléphone) ---- */
.ann { display: grid; grid-template-columns: 1fr 250px 1fr; gap: 44px; align-items: center; }
.ann__col { display: flex; flex-direction: column; gap: 46px; }
.ann__col--l { text-align: right; }
.ann__col--l .ann__n { flex-direction: row-reverse; }
.ann__n { display: flex; gap: 14px; align-items: flex-start; }
.ann__num { flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--yellow); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; }
.ann__l { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.ann__v { font-size: 24px; font-weight: 800; line-height: 1.2; margin-top: 4px; }
.ann__p { font-size: 16px; line-height: 1.4; margin-top: 4px; }
.ann__phone { border-radius: 34px; background: var(--ink); padding: 10px; box-shadow: 0 20px 44px rgba(31,21,81,.22); }
.ann__phone img { display: block; width: 100%; border-radius: 26px; }
/* ---- Étapes numérotées + bandeau ---- */
.stps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.stp { border-top: 2px solid var(--ink); padding-top: 18px; }
.stp__n { font-family: var(--font-display); font-size: 64px; font-weight: 800; line-height: 1; color: var(--accent); letter-spacing: -.03em; }
.stp__t { font-size: 24px; font-weight: 800; margin-top: 14px; }
.stp__p { font-size: 18px; line-height: 1.45; margin-top: 6px; }
.band { display: flex; margin-top: 44px; background: var(--ink); color: var(--white); border-radius: 18px; overflow: hidden; }
.band__i { flex: 1; padding: 20px 26px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid rgba(255,255,255,.14); }
.band__i:first-child { border-left: 0; }
.band__v { font-family: var(--font-display); font-size: 32px; font-weight: 800; }
.band__l { font-size: 15px; opacity: .8; }
.section__sub { color: var(--white); font-size: 26px; font-weight: 600; margin-top: 22px; text-align: center; }
.toc__list--dense .toc__item { padding: 15px 0; }
.toc__list--dense .toc__item .t { margin-bottom: 2px; }
.duo__intro { font-size: 22px; line-height: 1.45; margin: 0; }
.duo { align-items: stretch; }
.duo__c { display: flex; flex-direction: column; }
.duo__v { margin-top: auto; }

/* ---- Escalier — maquette 30/09/2026 ---- */
.esc { flex: 1; display: flex; align-items: flex-end; gap: 18px; min-height: 330px; }
.esc__m { flex: 1; background: var(--card-soft); border-radius: 20px 20px 0 0; padding: 22px 22px; display: flex; flex-direction: column; gap: 6px; }
.esc__m:nth-child(2) { background: var(--card); }
.esc__m:nth-child(3) { background: #C9C7FF; }
.esc__m--fort { background: var(--yellow) !important; }
.esc__l { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.esc__v { font-size: 25px; font-weight: 800; line-height: 1.2; }
.esc__p { font-size: 16px; line-height: 1.4; }
.esc__c { font-size: 21px; margin: 22px 0 0; }
.bento--compact .bento__v { font-size: 28px; line-height: 1.15; }
.bento--compact { grid-auto-rows: minmax(130px, auto); }

/* ---- Inventaire — maquette 30/09/2026 ---- */
.inv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; }
.inv__col { background: var(--white); border-radius: 20px; padding: 22px 20px; box-shadow: 0 8px 24px rgba(31,21,81,.06); min-height: 400px; }
.inv__head { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.inv__svg { width: 20px; height: 20px; }
.inv__n { font-family: var(--font-display); font-size: 64px; font-weight: 800; line-height: 1; margin-top: 12px; }
.inv__n--zero { color: var(--accent); }
.inv__sub { font-size: 15px; margin: 4px 0 14px; min-height: 18px; }
.inv__list { display: flex; flex-direction: column; gap: 8px; }
.inv__it { font-size: 15px; line-height: 1.35; background: var(--card-soft); border-radius: 10px; padding: 8px 11px; }
.inv__it--new { background: var(--yellow); font-weight: 600; }
.inv__plus { margin-right: 6px; }
.inv__vide { font-size: 15px; font-style: italic; color: var(--ink-soft); border: 1.5px dashed var(--chart-4); border-radius: 10px; padding: 10px 11px; }
.inv { align-items: stretch; }
.inv__col { min-height: 0; }
.cover__client, .cover__doc { background: rgba(31,21,81,.62); padding: 6px 16px; border-radius: 8px; }
.bento--xs .bento__v { font-family: var(--font-body); font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.bento--xs { grid-auto-rows: minmax(0, auto); gap: 16px; }
.bento--xs .bento__c { padding: 20px 22px; gap: 10px; }
.stps { grid-template-columns: repeat(var(--n, 3), 1fr); }
.duo__ic { width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.7); display: inline-flex; align-items: center; justify-content: center; }
.duo__svg { width: 28px; height: 28px; color: var(--ink); }

/* Répartition : bande de 100 carrés remplie de gauche à droite (06/10/2026) */
.rep { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.rep__grid { display: grid; grid-template-rows: repeat(4, 26px); grid-auto-flow: column; grid-auto-columns: 26px; gap: 5px; }
.rep__grid i { width: 26px; height: 26px; border-radius: 6px; }
.rep__grid i.rep__c--yellow { box-shadow: inset 0 0 0 1.5px var(--ink); }
.rep__legend { display: flex; gap: 56px; justify-content: center; }
.rep__item { max-width: 290px; }
.rep__num { display: flex; align-items: baseline; gap: 10px; font-size: 44px; font-weight: 800; line-height: 1; color: var(--ink); }
.rep__num i { width: 18px; height: 18px; border-radius: 5px; align-self: center; flex: none; }
.rep__num span { font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft); }
.rep__label { margin-top: 8px; font-size: var(--fs-body); font-weight: 700; }
.rep__text { margin-top: 4px; font-size: var(--fs-small); line-height: 1.4; color: var(--ink-soft); }

/* graphique deux colonnes + bandeau de conclusion : le graphe cède la hauteur au bandeau (06/10/2026) */
.twocol--conc .chart-svg { max-height: 235px; }
.twocol--conc .twocol__visual .chart-wrap { padding-bottom: 0; }

/* ============================================================
   COMPOSANTS « COMME DANS LA VIE » (06/10/2026, pilote YELLOW+)
   avis (fiche + avis Google), post (pub Facebook dans un téléphone),
   barres (classement en barres + vraie vidéo dans un téléphone).
   Classes nouvelles uniquement : aucun effet sur les slides existantes.
   Couleurs d'interface (gris Facebook/Google) : constantes de rendu des
   applications imitées, pas des couleurs de charte.
   ============================================================ */

/* Étiquette de source (même dessin que .float-shot__label) */
.etiquette {
  display: inline-block; align-self: flex-start; margin: 0 0 12px; padding: 4px 10px;
  font-size: 13px; font-weight: 600; line-height: 1.2;
  color: var(--white); background: var(--ink); border-radius: 6px;
}
/* Annotation manuscrite + flèche dessinée */
.hand {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--font-hand, 'Inter'); font-size: 30px; line-height: 1.05;
  color: var(--ink); font-weight: 600;
}
.hand__arrow { flex: 0 0 auto; width: 74px; height: auto; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hand__arrow--haut { width: 44px; }

/* ---- avis : fiche Google + cartes d'avis ---- */
.gav { display: grid; grid-template-columns: 380px 1fr; gap: 56px; align-items: center; }
.gav > * + * { margin-top: 0; }
.gfiche { display: flex; flex-direction: column; }
.gfiche__nom { font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.gfiche__note { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.gfiche__n { font-family: var(--font-num, var(--font-display)); font-size: 64px; line-height: 1; color: var(--ink); font-weight: 800; }
.gfiche__note .gstars { font-size: 22px; }
.gfiche__c { font-size: 17px; }
.gfiche__cat { font-size: 16px; margin-top: 2px; }
.gfiche__sub { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 26px 0 10px; }
.gchips { display: flex; flex-wrap: wrap; gap: 8px; }
.gchip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 13px; border: 1px solid #dadce0; border-radius: 999px; font-size: 15px; color: var(--ink); background: var(--white); line-height: 1.2; }
.gchip em { font-style: normal; color: #70757a; font-size: 14px; }
.gchip--fort { background: var(--yellow); border-color: var(--yellow); font-weight: 600; }
.gchip--fort em { color: var(--ink); }
.gfiche .hand { margin-top: 22px; }
.gstars { display: inline-flex; gap: 1px; font-size: 15px; line-height: 1; }
.gstars i { display: inline-block; width: 1em; height: 1em; }
.gstars svg { width: 100%; height: 100%; fill: #dadce0; display: block; }
.gstars i.on svg { fill: var(--star, #fbbc04); }
.gavis-stack { display: flex; flex-direction: column; gap: 16px; }
.gavis {
  background: var(--white); border-radius: 14px; padding: 16px 22px 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 14px 30px -16px rgba(0,0,0,.25);
}
.gavis--1 { margin-right: 48px; }
.gavis--2 { margin-left: 48px; }
.gavis--3 { margin-right: 24px; margin-left: 24px; }
.gavis__top { display: flex; align-items: center; gap: 12px; }
.gavis__av { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--white); font-size: 16px; font-weight: 600; }
.gavis__av--1 { background: var(--ink); }
.gavis__av--2 { background: var(--ink-soft); }
.gavis__av--3 { background: var(--chart-5); }
.gavis__nom { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.gavis__sous { font-size: 13px; color: #70757a; }
.gavis__meta { display: flex; align-items: center; gap: 10px; margin: 9px 0 6px; font-size: 14px; color: #70757a; }
.gavis__txt { font-size: 16.5px; line-height: 1.5; color: #3c4043; }
.gavis__txt strong { color: var(--ink); }

/* ---- post : pub Facebook dans un téléphone qui monte du bas ---- */
.fbstage { position: absolute; left: var(--panel-inset); top: 20px; bottom: 20px; width: 470px; overflow: hidden; border-radius: 0 0 0 var(--panel-radius); z-index: 1; }
.fbphone { position: absolute; left: 96px; top: 60px; width: 300px; background: #171717; border-radius: 46px; padding: 11px; box-shadow: 0 30px 60px -28px rgba(0,0,0,.45); }
.fbphone__screen { background: #fff; border-radius: 36px; overflow: hidden; height: 760px; color: #050505; font-family: var(--font-body); }
.fb__status { height: 34px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.fb__status span { display: inline-flex; gap: 4px; }
.fb__si { width: 14px; height: 14px; }
.fb__bar { height: 40px; padding: 0 14px; display: flex; align-items: center; border-bottom: 6px solid #f0f2f5; }
.fb__logo { font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: #171717; }
.fb__head { display: flex; align-items: center; gap: 9px; padding: 10px 12px; }
.fb__av { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #171717; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.fb__who { flex: 1; min-width: 0; }
.fb__page { font-size: 14px; font-weight: 700; line-height: 1.2; }
.fb__spons { font-size: 12px; color: #65676b; display: flex; align-items: center; gap: 3px; line-height: 1.3; }
.fb__globe { width: 11px; height: 11px; }
.fb__dots { width: 18px; height: 18px; color: #65676b; }
.fb__txt { font-size: 13px; line-height: 1.35; padding: 0 12px; margin-bottom: 8px; }
.fb__img { aspect-ratio: 4 / 5; overflow: hidden; background: #f0f2f5; }
.fb__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb__link { display: flex; align-items: center; gap: 10px; background: #f0f2f5; padding: 9px 12px; }
.fb__lt { flex: 1; min-width: 0; }
.fb__dom { font-size: 10.5px; color: #65676b; text-transform: uppercase; letter-spacing: .02em; }
.fb__h { font-size: 12.5px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fb__btn { flex: 0 0 auto; background: #e4e6eb; border-radius: 6px; padding: 7px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.fb__acts { display: flex; justify-content: space-around; padding: 9px 6px; font-size: 12.5px; font-weight: 600; color: #65676b; }
.fb__acts span { display: inline-flex; align-items: center; gap: 5px; }
.fb__ai { width: 15px; height: 15px; }
.post__inner { padding-left: calc(var(--panel-inset) + 470px + 34px); }
.post-slide h1.title { max-width: 100%; padding-right: 150px; }
.post__body { justify-content: center; }
.post__body > * + * { margin-top: 0; }
.bignum { display: flex; align-items: baseline; gap: 14px; color: var(--ink); }
.bignum__v { font-family: var(--font-num, var(--font-display)); font-size: 180px; line-height: .8; font-weight: 800; }
.bignum__sur { font-size: 38px; font-weight: 700; }
.bignum__t { font-size: var(--fs-body-lg); margin-top: 18px; max-width: 560px; }
.post__txt { margin-top: 18px; font-size: var(--fs-body); max-width: 560px; display: flex; flex-direction: column; gap: 10px; }
.post__body .hand { margin-top: 26px; margin-left: -96px; }
.post-slide .footnote { left: calc(var(--panel-inset) + 470px + 34px); right: calc(var(--panel-inset) + 64px); text-align: left; }

/* ---- barres : classement en barres + vidéo dans un téléphone ---- */
.bv { display: grid; grid-template-columns: 1fr 240px; gap: 72px; align-items: center; }
.bv > * + * { margin-top: 0; }
.bars__title { font-size: 17px; font-weight: 700; color: var(--ink); }
.bars__title span, .bars__title em { font-weight: 400; font-style: normal; }
.bars { position: relative; padding-top: 40px; margin-top: 6px; }
.bars__grid { display: grid; grid-template-columns: 150px 1fr; row-gap: 22px; align-items: center; }
.bars__l b { display: block; font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.bars__l span { display: block; font-size: 14px; }
.bars__track { position: relative; height: 60px; }
.bars__bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--chart-4); border-radius: 0 10px 10px 0; }
.bars__bar--fort { background: var(--yellow); }
.bars__v { position: absolute; top: 50%; transform: translate(14px, -46%); font-family: var(--font-num, var(--font-display)); font-size: 56px; line-height: 1; color: var(--ink); font-weight: 800; white-space: nowrap; }
.bars__refzone { position: absolute; left: 150px; right: 0; top: 0; bottom: -10px; pointer-events: none; }
.bars__ref { position: absolute; top: 4px; bottom: 0; border-left: 2px dashed var(--ink); }
.bars__ref span { position: absolute; top: -4px; left: 8px; font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--ink); }
.bv__txt { margin-top: 30px; font-size: var(--fs-body); display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.vcol { position: relative; display: flex; flex-direction: column; align-items: center; }
.vcol .etiquette { align-self: center; }
.vphone { width: 200px; background: #171717; border-radius: 36px; padding: 9px; box-shadow: 0 26px 50px -24px rgba(0,0,0,.45); }
.vphone__screen { position: relative; aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; background: #000; }
.vphone__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vphone__play { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 58px; height: 58px; border-radius: 50%; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; }
.vphone__pi { width: 26px; height: 26px; color: #fff; fill: #fff; margin-left: 3px; }
.vphone__ov { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 12px 14px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.vphone__who { display: flex; align-items: center; gap: 7px; }
.vphone__who .fb__av { width: 26px; height: 26px; font-size: 12px; background: #fff; color: #171717; text-shadow: none; }
.vphone__page { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.vphone__sp { font-size: 10.5px; opacity: .9; }
.vphone__ov p { font-size: 12px; line-height: 1.3; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vphone__btn { display: block; margin-top: 8px; background: rgba(255,255,255,.94); color: #171717; text-shadow: none; text-align: center; border-radius: 6px; padding: 6px; font-size: 12px; font-weight: 700; }
.vcol .hand { margin-top: 12px; font-size: 25px; width: 330px; margin-left: 40px; }

/* ---- avis, variante captures : vraies captures Google (06/10/2026) ---- */
.gcaps > * + * { margin-top: 0; }
.gcaps { gap: 20px; justify-content: safe center; }
.gstrip { display: flex; align-items: center; gap: 36px; }
.gstrip__note { flex: 0 0 auto; width: 250px; background: var(--white); border-radius: 12px; padding: 6px 10px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 26px -16px rgba(0,0,0,.25); }
.gstrip__note img { display: block; width: 100%; }
.gstrip__fig { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.gstrip__n { font-family: var(--font-num, var(--font-display)); font-size: 84px; line-height: .9; color: var(--ink); font-weight: 800; }
.gstrip__t { font-size: 17px; line-height: 1.35; max-width: 190px; }
.gstrip__themes { flex: 1; min-width: 0; }
.gstrip__themes .gfiche__sub { margin: 0 0 8px; }
.gcaps__row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.gcap { margin: 0; display: flex; flex-direction: column; }
.gcap__card { background: var(--white); border-radius: 14px; padding: 8px 6px 4px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 16px 32px -18px rgba(0,0,0,.28); }
.gcap__card img { display: block; width: 100%; height: auto; }

/* ---- faits : preuves d'une marque + vraies photos (06/10/2026) ---- */
.faits { display: grid; grid-template-columns: 1fr 470px; gap: 56px; align-items: center; }
.faits > * + * { margin-top: 0; }
.faits__list { display: flex; flex-direction: column; }
.fait { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line, var(--chart-grid)); }
.fait:first-child { padding-top: 0; }
.fait__v { font-family: var(--font-num, var(--font-display)); font-size: 64px; line-height: .95; color: var(--ink); font-weight: 800; white-space: nowrap; }
.fait__t { font-size: var(--fs-body); line-height: 1.4; }
.citation { margin: 26px 0 0; }
.citation p { font-size: 26px; line-height: 1.3; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.citation cite { display: block; margin-top: 8px; font-style: normal; font-size: 15px; }
.faits__photos { position: relative; display: grid; gap: 18px; align-items: start; }
.faits__photos--2 { grid-template-columns: 1fr 1fr; }
.fphoto { margin: 0; display: flex; flex-direction: column; }
.fphoto--2 { margin-top: 56px; }
.fphoto__img { height: 380px; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 36px -20px rgba(0,0,0,.4); }
.fphoto__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- calendrier : présence par vagues sur une année (06/10/2026) ---- */
.cal-body { justify-content: safe center; }
.cal-body > * + * { margin-top: 0; }
.cal { padding: 96px 0 74px; }
.cal__track { position: relative; height: 54px; border-top: 1px solid var(--line, var(--chart-grid)); border-bottom: 1px solid var(--line, var(--chart-grid)); }
.cal__m { position: absolute; top: 100%; height: 26px; border-left: 1px solid var(--line, var(--chart-grid)); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 6px 0 0 6px; color: var(--ink-soft); }
.cal__p { position: absolute; top: 9px; height: 36px; background: var(--ink); border-radius: 6px; z-index: 2; }
.cal__p--fort { background: var(--yellow); }
.cal__lab { position: absolute; left: 0; bottom: 50px; white-space: nowrap; font-size: 14px; line-height: 1.25; }
.cal__lab b { display: block; font-size: 15px; color: var(--ink); }
.cal__p--bas .cal__lab { bottom: 92px; }
.cal__p--bas .cal__lab::after { content: ""; position: absolute; left: 0; top: 100%; height: 42px; border-left: 1px solid var(--ink-soft); }
.cal__g { position: absolute; top: 4px; bottom: 4px; border: 1.5px dashed var(--ink-soft); border-radius: 6px; z-index: 1; }
.cal__g span { position: absolute; left: 50%; top: 82px; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-hand, var(--font-body)); font-size: 26px; font-weight: 600; color: var(--ink); line-height: 1; }
.cal__today { position: absolute; top: -8px; bottom: -8px; border-left: 2.5px solid var(--yellow); z-index: 3; }
.cal__today span { display: none; }
.cal__txt { display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-body); max-width: 900px; }

/* ---- parts : une part dans deux totaux (06/10/2026) ---- */
.parts { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }
.parts--ex { grid-template-columns: 1fr 330px; }
.parts > * + * { margin-top: 0; }
.parts__key { display: flex; gap: 22px; font-size: 15px; margin-bottom: 18px; }
.parts__key span { display: inline-flex; align-items: center; gap: 8px; }
.parts__key i { width: 14px; height: 14px; border-radius: 4px; background: var(--chart-4); }
.parts__key i.on { background: var(--yellow); }
.parts__rows { display: flex; flex-direction: column; gap: 26px; }
.parts__l { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.parts__bar { display: flex; height: 66px; border-radius: 10px; overflow: hidden; gap: 3px; }
.parts__s { background: var(--chart-4); display: flex; align-items: center; padding: 0 16px; min-width: 0; }
.parts__s--fort { background: var(--yellow); }
.parts__s span { font-family: var(--font-num, var(--font-display)); font-size: 40px; line-height: 1; color: var(--ink); white-space: nowrap; font-weight: 800; }
.parts__txt { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-body); }
.parts__exs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.parts__ex { margin: 0; display: flex; flex-direction: column; }
.parts__ex .etiquette { font-size: 12px; }
.parts__img { aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; box-shadow: 0 16px 30px -18px rgba(0,0,0,.4); }
.parts__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.parts__leg { font-size: 13.5px; line-height: 1.35; margin-top: 8px; }

/* ---- téléphones : 2-3 vraies vidéos côte à côte (06/10/2026) ---- */
.tphones { display: grid; grid-template-columns: 330px 1fr; gap: 48px; align-items: center; }
.tphones > * + * { margin-top: 0; }
.tphones .bignum__v { font-size: 150px; }
.tphones .bignum__sur { font-size: 30px; }
.tphones .bignum__t { font-size: var(--fs-body); }
.tphones__row { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.tphone { margin: 0; display: flex; flex-direction: column; align-items: center; flex: 1; }
.tphone .etiquette { align-self: center; }
.vphone--s { width: 176px; border-radius: 30px; padding: 8px; }
.vphone--s .vphone__screen { border-radius: 23px; }
.vphone--s .vphone__ov p { font-size: 11px; }
.vphone--s .vphone__play { width: 48px; height: 48px; }
.tphone__leg { font-size: 14px; line-height: 1.35; text-align: center; margin-top: 10px; max-width: 200px; }
.fb__txt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- état des lieux : ce qui existe, ses limites (06/10/2026) ---- */
.etat { display: grid; grid-template-columns: 340px 1fr; gap: 64px; align-items: center; }
.etat > * + * { margin-top: 0; }
.etat__vis { display: flex; flex-direction: column; align-items: center; }
.ephone { width: 262px; background: #171717; border-radius: 42px; padding: 10px; box-shadow: 0 26px 50px -26px rgba(0,0,0,.45); }
.ephone__screen { background: #fff; border-radius: 33px; overflow: hidden; color: #171717; }
.ephone__url { margin: 2px 12px 8px; height: 30px; border-radius: 9px; background: #f0f0f0; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; color: #444; }
.ephone__lock { width: 11px; height: 11px; }
.ephone__view { height: 413px; overflow: hidden; } /* 242 px de large : 664 px CSS sur 390 = premier écran exact */
.ephone__view img { display: block; width: 100%; }
.ephone__bar { height: 34px; border-top: 1px solid #e6e6e6; background: #f7f7f7; }
.ephone__leg { font-size: 13.5px; margin-top: 10px; text-align: center; max-width: 280px; line-height: 1.35; }
.etat__txt { display: flex; flex-direction: column; gap: 26px; }
.etat__h { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.etat__l { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.etat__l li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; font-size: 19.5px; line-height: 1.4; }
.etat__ic { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--white); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.etat__b--lim .etat__ic { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.etat__svg { width: 16px; height: 16px; }
.flux { list-style: none; display: flex; flex-direction: column; gap: 14px; width: 100%; }
.flux__s { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; background: var(--white); border-radius: 14px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 22px -16px rgba(0,0,0,.25); }
.flux__s--fort { background: var(--yellow); box-shadow: none; }
.flux__s--q { background: transparent; box-shadow: none; border: 1.5px dashed var(--ink-soft); }
.flux__ic { width: 40px; height: 40px; border-radius: 50%; background: var(--card); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.flux__s--fort .flux__ic { background: rgba(255,255,255,.6); }
.flux__svg { width: 20px; height: 20px; }
.flux__t { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.flux__p { font-size: 14.5px; line-height: 1.35; margin-top: 2px; }
/* écran de téléphone : posé hors du contenu ajustable, sur toute la hauteur du panneau */
.etat__vis--stage { position: absolute; left: calc(var(--panel-inset) + 64px); top: 20px; bottom: 20px; width: 300px; justify-content: center; z-index: 1; }
.etat-slide--ecran .slide__inner { padding-left: calc(var(--panel-inset) + 64px + 300px + 64px); }
.etat-slide--ecran .etat { grid-template-columns: 1fr; }
.etat-slide--ecran h1.title { max-width: 100%; padding-right: 140px; }
.etat-slide--ecran .footnote { left: calc(var(--panel-inset) + 64px + 300px + 64px); text-align: left; }

/* ---- étages : qui couvre quel étage du parcours (06/10/2026) ---- */
.etgs { justify-content: safe center; gap: 12px; }
.etgs > * + * { margin-top: 0; }
.etg { display: grid; grid-template-columns: 150px 1fr 190px; gap: 22px; align-items: center; }
.etg__niv { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); text-align: right; line-height: 1.3; }
.etg__band {
  display: flex; align-items: center; gap: 18px; min-height: 112px; padding: 12px calc(var(--in) + 34px);
  background: var(--card); clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 18px 100%);
  margin: 0 var(--in);
}
.etg--fort .etg__band { background: var(--yellow); }
.etg__img { flex: 0 0 auto; width: 56px; height: 88px; object-fit: cover; border-radius: 8px; }
.etg__t { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.etg__p { font-size: 17px; line-height: 1.35; margin-top: 3px; color: var(--ink-soft); }
.etg--fort .etg__p { color: var(--ink); }
.etg__st span { display: inline-block; font-size: 15px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--ink); color: var(--ink); line-height: 1.2; }
.etg--fort .etg__st span { background: var(--ink); color: var(--white); }

/* ---- plan : aujourd'hui → pendant le test (06/10/2026) ---- */
.pls { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 26px; align-items: stretch; }
.pls > * + * { margin-top: 0; }
.pl { display: flex; flex-direction: column; background: var(--card); border-radius: 18px; padding: 18px 22px 20px; }
.pl__h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pl__ic { width: 46px; height: 46px; border-radius: 50%; background: var(--yellow); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.pl__svg { width: 23px; height: 23px; }
.pl__t { font-size: 24px; font-weight: 700; color: var(--ink); }
.pl__k { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.pl__nt { font-size: 17px; line-height: 1.4; }
.pl__arrow { margin: 6px 0 4px; color: var(--ink-soft); }
.pl__asvg { width: 20px; height: 20px; }
.pl__test { background: var(--white); border-radius: 12px; padding: 14px 16px 16px; flex: 1; }
.pl__test .pl__k { color: var(--ink); }
.pl__test ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.pl__test li { position: relative; padding-left: 18px; font-size: 16.5px; line-height: 1.38; color: var(--ink); }
.pl__test li::before { content: ""; position: absolute; left: 0; top: .52em; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
.post__body .hand--aucune { margin: 26px 0 0; font-size: 26px; }

/* ---- face-à-face (06/10/2026) ---- */
.fc-body { justify-content: safe center; }
.fc-body > * + * { margin-top: 0; }
.fc { display: grid; grid-template-columns: 1fr 300px 1fr; align-items: center; row-gap: 0; max-width: 900px; margin: 0 auto; width: 100%; }
.fc__h { text-align: center; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.fc__h b { display: block; font-size: 24px; color: var(--ink); }
.fc__h span { display: block; font-size: 15px; margin-top: 2px; }
.fc__l { text-align: center; font-size: 16px; line-height: 1.3; padding: 0 16px; color: var(--ink-soft); }
.fc__v { text-align: center; padding: 14px 0; border-bottom: 1px solid var(--line, var(--chart-grid)); }
.fc__l { border-bottom: 1px solid var(--line, var(--chart-grid)); align-self: stretch; display: flex; align-items: center; justify-content: center; }
.fc__v span { font-family: var(--font-num, var(--font-display)); font-size: 60px; line-height: 1; color: var(--ink); font-weight: 800; position: relative; z-index: 1; display: inline-block; }
.fc__v--fort span::before { content: ""; position: absolute; z-index: -1; left: -.08em; right: -.08em; top: 58%; height: .42em; transform: translateY(-50%) rotate(-1.5deg); border-radius: 1em; background: var(--mark, var(--yellow)); }
.fc__c { font-size: var(--fs-body-lg); line-height: 1.45; max-width: 900px; margin: 30px auto 0; text-align: center; color: var(--ink); }

/* ---- profils (06/10/2026) ---- */
.pfs { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 24px; align-items: stretch; align-content: center; }
.pfs > * + * { margin-top: 0; }
.pf { position: relative; background: var(--card); border-radius: 18px; padding: 26px 26px 28px; }
.pf--fort { background: var(--white); box-shadow: inset 0 0 0 3px var(--yellow); }
.pf__tag { position: absolute; top: -13px; left: 22px; background: var(--yellow); color: var(--ink); font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.pf__n { font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.pf__q { font-size: 17px; line-height: 1.4; margin-top: 6px; }
.pf__k { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-top: 22px; }
.pf__d { font-size: 17.5px; line-height: 1.4; margin-top: 6px; color: var(--ink); }

/* ---- téléphone vide (06/10/2026) ---- */
.vphone--vide { background: transparent; box-shadow: none; padding: 0; border: 2.5px dashed var(--ink); }
.vphone--vide .vphone__screen { background: var(--yellow); display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px; border-radius: 27px; }
.vphone--vide .vphone__screen span { font-family: var(--font-hand, var(--font-body)); font-size: 30px; font-weight: 600; line-height: 1.05; color: var(--ink); }
.hand__arrow--fin { stroke-width: 1.6; }
.post__body .hand .hand__arrow { stroke-width: 1.6; }
.fc__v--moins span { color: #bdb9b2; }
.fc__v--txt span { font-family: var(--font-body); font-size: 20px; font-weight: 700; }

/* ---- annuaire : concurrents, note et avis (06/10/2026) ---- */
.an { justify-content: safe center; }
.an > * + * { margin-top: 0; }
.an__gs { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 34px; margin-top: 26px; }
.an__gt { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.an__r { display: grid; grid-template-columns: 1fr auto 80px; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line, var(--chart-grid)); }
.an__n { font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.an__n span { display: block; font-size: 14px; font-weight: 400; color: var(--ink-soft); }
.an__note { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; color: var(--ink); }
.an__star { width: 15px; height: 15px; fill: var(--star, var(--yellow)); }
.an__avis { font-size: 15px; text-align: right; }
.an__r--ref { background: var(--white); border-radius: 12px; padding: 12px 18px; border: 2px solid var(--yellow); max-width: 560px; }
.fc__v--fort span::before { display: none; }
.fc__v { padding: 9px 0; }
.fc__v span { font-size: 52px; }
.fc__h { padding-bottom: 10px; }

/* ---- carte : vraie carte + chiffres (06/10/2026) ---- */
.crt { display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: center; }
.crt > * + * { margin-top: 0; }
.crt__map { margin: 0; }
.crt__map img { display: block; height: 430px; width: auto; border-radius: 14px; }
.crt__map figcaption { font-size: 13px; margin-top: 8px; }
.crt__figs { display: flex; flex-direction: column; gap: 22px; }
.cf { border-bottom: 1px solid var(--line, var(--chart-grid)); padding-bottom: 16px; }
.cf:last-child { border-bottom: 0; }
.cf__v span { font-family: var(--font-num, var(--font-display)); font-size: 72px; line-height: 1; color: var(--ink); font-weight: 800; position: relative; z-index: 1; display: inline-block; }
.cf--fort .cf__v span::before { content: ""; position: absolute; z-index: -1; left: -.06em; right: -.06em; top: 58%; height: .42em; transform: translateY(-50%) rotate(-1.5deg); border-radius: 1em; background: var(--mark, var(--yellow)); }
.cf__l { font-size: 18px; line-height: 1.35; margin-top: 4px; }

/* ---- profils avec avatar (06/10/2026) ---- */
.pf--av { padding-top: 22px; }
.pf__av { display: block; width: 96px; height: 96px; margin-bottom: 12px; }
.pf__dl { margin-top: 12px; display: grid; grid-template-columns: 1fr; gap: 0; }
.pf__dl dt { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); margin-top: 9px; }
.pf__dl dd { margin: 1px 0 0; font-size: 15.5px; line-height: 1.35; color: var(--ink); }

/* ---- grand chiffre (06/10/2026) ---- */
.gc { justify-content: safe center; align-items: flex-start; }
.gc > * + * { margin-top: 0; }
.gc__v { font-family: var(--font-num, var(--font-display)); font-size: 230px; line-height: .82; color: var(--ink); font-weight: 800; }
.gc__s { font-size: 30px; font-weight: 700; color: var(--ink); margin-top: 14px; }
.gc__t { font-size: var(--fs-body-lg); margin-top: 26px; }
.gc__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; max-width: 1000px; }
.gc__chip { font-size: 15px; font-weight: 600; padding: 7px 14px; border-radius: 999px; background: var(--card); color: var(--ink); border: 1px solid var(--line, var(--chart-grid)); }
.gc__chip--fort { background: var(--yellow); border-color: var(--yellow); }

/* Lien sur une image (champ `liens` du rapport, 07/10/2026) : aucun effet
   visuel, la boîte de l'image reste celle de mise en page. */
a.lk { display: contents; color: inherit; text-decoration: none; }
.tphones--seul { grid-template-columns: 1fr; justify-items: center; gap: 22px; }
.tphones--seul .tphones__row { justify-content: center; gap: 70px; }
.tphones--seul .tphone { flex: 0 0 auto; }
.tphones--seul .tphone__leg { max-width: 230px; font-size: 15px; }
.tphones__c { font-size: var(--fs-body-lg); color: var(--ink); text-align: center; margin: 0; }
.tphones--seul { align-content: center; }
.tphones--seul .tphones__row--4 { gap: 34px; }
.tphones--seul .tphones__row--paires .tphone:nth-child(3) { margin-left: 70px; }

/* ---- côte à côte (07/10/2026) ---- */
.cts { justify-content: safe center; }
.cts > * + * { margin-top: 0; }
.cts__row { display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 28px; }
.ct { background: var(--card); border-radius: 18px; padding: 24px 28px 26px; }
.ct--fort { background: var(--white); box-shadow: inset 0 0 0 3px var(--yellow); }
.ct__t { font-size: 24px; font-weight: 700; color: var(--ink); }
.ct__s { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }
.ct ul { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 11px; }
.ct li { position: relative; padding-left: 18px; font-size: 18px; line-height: 1.38; color: var(--ink); }
.ct li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-soft); }
.ct--fort li::before { background: var(--yellow); }
.cts__c { font-size: var(--fs-body-lg); color: var(--ink); text-align: center; margin-top: 28px; }

/* ---- fiches brief (07/10/2026) ---- */
.fis { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 20px; align-items: stretch; }
.fis > * + * { margin-top: 0; }
.fi { background: var(--card); border-radius: 18px; padding: 18px 20px 16px; display: flex; flex-direction: column; }
.fi__top { display: flex; align-items: baseline; gap: 10px; }
.fi__n { font-family: var(--font-num, var(--font-display)); font-size: 30px; line-height: 1; color: var(--ink); }
.fi__t { font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.fi__acc { margin: 12px 0 0; font-size: 16.5px; line-height: 1.38; font-weight: 600; color: var(--ink); background: var(--white); border-left: 3px solid var(--yellow); border-radius: 0 10px 10px 0; padding: 9px 12px; }
.fi__dl { margin: 10px 0 0; }
.fi__dl dt { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); margin-top: 8px; }
.fi__dl dd { margin: 1px 0 0; font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.fi__foot { margin-top: auto; padding-top: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.fi__pour { display: flex; align-items: center; gap: 4px; font-size: 13px; line-height: 1.25; }
.fi__pour img { width: 34px; height: 34px; }
.fi__pour span { margin-left: 6px; max-width: 120px; }
.fi__ref { margin: 0; display: flex; align-items: flex-end; gap: 8px; }
.fi__ref img { width: 62px; height: 92px; object-fit: cover; border-radius: 8px; box-shadow: 0 8px 18px -10px rgba(0,0,0,.4); }
.fi__ref figcaption { font-size: 11.5px; line-height: 1.3; max-width: 110px; color: var(--ink-soft); }
.ct { display: flex; flex-direction: column; }
.ct__pied { margin-top: auto; padding-top: 14px; font-size: 14px; line-height: 1.35; color: var(--ink-soft); border-top: 1px dashed var(--line, var(--chart-grid)); }
.ct ul + .ct__pied { margin-top: 18px; }