/* =============================================================================
   SalesIro — feuille de style du site éditorial
   ========================================================================== */
:root {
  color-scheme: light;
  --ground:#f7f5f0; --surface:#ffffff; --surface-2:#efece4;
  --nuit:#12211f; --nuit-2:#1d302d; --nuit-ink:#cfdcd8;
  --ink:#14201e; --ink-2:#4a5753; --ink-3:#87908b;
  --rule:#e2dccf; --rule-2:#cfc7b5;
  --teal:#0f766e; --teal-vif:#17a398; --teal-soft:#e2efec;
  --amber:#b06d16; --amber-soft:#f7ecd9;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground:#0e1817; --surface:#172423; --surface-2:#1e2d2b;
    --nuit:#050c0b; --nuit-2:#132220; --nuit-ink:#b7c8c3;
    --ink:#e9efeb; --ink-2:#a7b5b0; --ink-3:#76847e;
    --rule:#263634; --rule-2:#384c48;
    --teal:#46b3a5; --teal-vif:#5ccbbb; --teal-soft:#14312d;
    --amber:#dda354; --amber-soft:#34281a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground:#0e1817; --surface:#172423; --surface-2:#1e2d2b;
  --nuit:#050c0b; --nuit-2:#132220; --nuit-ink:#b7c8c3;
  --ink:#e9efeb; --ink-2:#a7b5b0; --ink-3:#76847e;
  --rule:#263634; --rule-2:#384c48;
  --teal:#46b3a5; --teal-vif:#5ccbbb; --teal-soft:#14312d;
  --amber:#dda354; --amber-soft:#34281a;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
  font-size: 18px; line-height: 1.68; -webkit-font-smoothing: antialiased;
}
.dedans { max-width: 1080px; margin: 0 auto; padding: 0 26px; }
.lecture { max-width: 44rem; }
p { margin: 0 0 1.15em; }
a { color: var(--teal); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
img { max-width: 100%; height: auto; }

h1, h2, h3 { font-family: Archivo, system-ui, sans-serif; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.05rem, 4.6vw, 3rem); font-weight: 800; line-height: 1.05; letter-spacing: -.032em; }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); font-weight: 700; line-height: 1.2; letter-spacing: -.022em; margin: 2.4em 0 .7em; }
h3 { font-size: 1.14rem; font-weight: 700; letter-spacing: -.01em; margin: 1.9em 0 .5em; }
h2 + p, h3 + p { margin-top: 0; }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.etiq { font-family: "IBM Plex Mono", monospace; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }

/* ── barre de navigation ───────────────────────────────── */
.entete { background: var(--nuit); color: #fff; }
.entete .dedans { display: flex; align-items: center; gap: 20px; height: 68px; }
.marque { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.marque .nom { font-family: "IBM Plex Mono", monospace; font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; color: #fff; }
.entete nav { margin-left: auto; display: flex; gap: 22px; }
.entete nav a { color: var(--nuit-ink); text-decoration: none; font-size: .95rem; font-weight: 500; }
.entete nav a:hover, .entete nav a[aria-current] { color: #fff; }
.cta-entete {
  background: var(--teal-vif); color: #06201d !important; padding: 8px 15px;
  border-radius: 7px; font-weight: 600; font-size: .92rem;
}

/* ── fil d'ariane ──────────────────────────────────────── */
.ariane { padding: 18px 0 0; font-size: .86rem; color: var(--ink-3); }
.ariane ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.ariane li + li::before { content: "›"; margin-right: 8px; color: var(--rule-2); }
.ariane a { color: var(--ink-3); }

/* ── en-tête d'article ─────────────────────────────────── */
.chapeau { padding: 26px 0 34px; border-bottom: 1px solid var(--rule); margin-bottom: 34px; }
.chapeau .cat { color: var(--teal); margin-bottom: 14px; display: block; }
.chapeau h1 { margin-bottom: 18px; }
.chapeau .accroche { font-size: 1.2rem; color: var(--ink-2); line-height: 1.5; margin: 0; }
.chapeau .infos { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 20px; font-family: "IBM Plex Mono", monospace; font-size: .8rem; color: var(--ink-3); }

/* ── corps d'article ───────────────────────────────────── */
article { padding-bottom: 60px; }
article ul, article ol { margin: 0 0 1.15em; padding-left: 1.3em; }
article li { margin-bottom: .5em; }
article strong { font-weight: 600; }

.sommaire {
  background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--teal);
  padding: 20px 24px; margin: 0 0 36px;
}
.sommaire .etiq { color: var(--teal); display: block; margin-bottom: 10px; }
.sommaire ol { margin: 0; padding-left: 1.2em; font-size: .96rem; }
.sommaire li { margin-bottom: .35em; }

.tbox { overflow-x: auto; margin: 1.6em 0; border: 1px solid var(--rule); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .93rem; min-width: 520px; }
th {
  text-align: left; font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 600;
  padding: 12px 15px; background: var(--surface-2); border-bottom: 1px solid var(--rule-2); white-space: nowrap;
}
td { padding: 13px 15px; border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.5; }
tbody tr:last-child td { border-bottom: 0; }

.encadre {
  background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--amber);
  padding: 20px 24px; margin: 1.8em 0;
}
.encadre p:last-child { margin-bottom: 0; }
.encadre .etiq { color: var(--amber); display: block; margin-bottom: 8px; }

.aller-plus-loin {
  display: block; background: var(--teal-soft); border: 1px solid var(--rule);
  padding: 15px 20px; margin: 1.6em 0; text-decoration: none; color: var(--ink);
}
.aller-plus-loin:hover { border-color: var(--teal); }
.aller-plus-loin .etiq { color: var(--teal); display: block; margin-bottom: 4px; }
.aller-plus-loin .t { font-weight: 600; }

.faq { margin-top: 2.4em; }
.faq details {
  background: var(--surface); border: 1px solid var(--rule); padding: 16px 20px; margin-bottom: 10px;
}
.faq summary { font-weight: 600; cursor: pointer; font-size: 1.02rem; }
.faq summary::marker { color: var(--teal); }
.faq details p { margin: .8em 0 0; color: var(--ink-2); font-size: .97rem; }

.bloc-produit {
  background: var(--nuit); color: #fff; padding: 30px 32px; margin: 3em 0 0;
  display: flex; flex-direction: column; gap: 12px;
}
.bloc-produit .etiq { color: var(--teal-vif); }
.bloc-produit h2 { color: #fff; margin: 0; font-size: 1.5rem; }
.bloc-produit p { color: var(--nuit-ink); margin: 0; max-width: 60ch; }
.bloc-produit a {
  align-self: flex-start; background: var(--teal-vif); color: #06201d; text-decoration: none;
  padding: 11px 20px; border-radius: 7px; font-weight: 600; margin-top: 4px;
}

.suite { margin: 3.4em 0 0; padding-top: 26px; border-top: 1px solid var(--rule); }
.suite h2 { margin: 0 0 18px; font-size: 1.25rem; }
.cartes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.carte {
  background: var(--surface); border: 1px solid var(--rule); padding: 20px 22px;
  text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 8px;
}
.carte:hover { border-color: var(--teal); }
.carte .cat { color: var(--teal); }
.carte .t { font-weight: 600; font-size: 1.02rem; line-height: 1.35; }
.carte .d { font-size: .93rem; color: var(--ink-2); line-height: 1.45; }

/* ── accueil du blog ───────────────────────────────────── */
.hero-blog { background: var(--nuit); color: #fff; padding: 62px 0 56px; }
.hero-blog h1 { color: #fff; max-width: 20ch; margin-bottom: 18px; }
.hero-blog p { color: var(--nuit-ink); font-size: 1.18rem; max-width: 60ch; margin: 0; }
.cluster-titre { margin: 54px 0 6px; }
.cluster-titre h2 { margin: 0 0 6px; }
.cluster-titre p { color: var(--ink-2); margin: 0; max-width: 62ch; }
.liste-articles { display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 22px; }
.ligne-article {
  background: var(--surface); padding: 22px 24px; text-decoration: none; color: var(--ink);
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
}
.ligne-article:hover { background: var(--surface-2); }
.ligne-article.pilier { background: var(--teal-soft); }
.ligne-article .cat { color: var(--teal); display: block; margin-bottom: 5px; }
.ligne-article .t { font-family: Archivo, sans-serif; font-weight: 700; font-size: 1.14rem; letter-spacing: -.015em; line-height: 1.3; }
.ligne-article .d { font-size: .95rem; color: var(--ink-2); margin-top: 5px; line-height: 1.45; }
.ligne-article .fleche { color: var(--teal); font-size: 1.3rem; }
.a-venir { opacity: .55; }
.a-venir .fleche { color: var(--ink-3); }

/* ── pied de page ──────────────────────────────────────── */
.pied { background: var(--nuit); color: var(--nuit-ink); margin-top: 70px; padding: 40px 0 46px; font-size: .92rem; }
.pied .dedans { display: flex; flex-direction: column; gap: 14px; }
.pied a { color: var(--teal-vif); }
.pied .liens { display: flex; gap: 24px; flex-wrap: wrap; }
.pied .mentions { font-size: .84rem; color: #728881; max-width: 70ch; line-height: 1.5; }

@media (max-width: 620px) {
  body { font-size: 17px; }
  .entete nav { gap: 14px; }
  .entete nav a:not(.cta-entete) { display: none; }
  .ligne-article { grid-template-columns: 1fr; }
  .ligne-article .fleche { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── Réponse d'emblée ─────────────────────────────────────────────────────
   Le bloc le plus utile de la page, pour deux lecteurs à la fois.

   L'humain arrive d'une recherche avec une question précise et décide en
   quelques secondes s'il reste. Le moteur génératif, lui, cherche un passage
   court, autonome et factuel qu'il puisse citer sans le reformuler — c'est
   ce qui fait la différence entre être lu et être cité.

   Quarante à soixante mots, une affirmation vérifiable, aucun renvoi à la
   suite de l'article : le bloc doit se tenir seul, sorti de sa page. */
.en-bref {
  background: var(--teal-soft); border: 1px solid var(--rule);
  border-left: 3px solid var(--teal); padding: 18px 22px; margin: 0 0 1.8em;
}
.en-bref .etiq { color: var(--teal); display: block; margin-bottom: 7px; }
.en-bref p { margin: 0; font-size: 1.04rem; line-height: 1.62; }
.en-bref p + p { margin-top: .7em; }

/* ── Calcul posé ──────────────────────────────────────────────────────────
   Un chiffre qu'on affirme se conteste ; un chiffre qu'on pose se vérifie.
   Chaque ligne est une donnée que le lecteur remplace par la sienne, et le
   total n'appartient qu'à lui. */
.calcul {
  background: var(--surface); border: 1px solid var(--rule-2);
  padding: 20px 24px; margin: 1.8em 0; font-size: .96rem;
}
.calcul .etiq { display: block; margin-bottom: 12px; color: var(--ink-3); }
.calcul dl { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px 18px; margin: 0; }
.calcul dt { color: var(--ink-2); }
.calcul dd { margin: 0; text-align: right; font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums; }
.calcul .total { border-top: 1px solid var(--rule-2); margin-top: 13px; padding-top: 13px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px; font-weight: 600; }
.calcul .total .v { font-family: "IBM Plex Mono", monospace; font-size: 1.22rem; color: var(--teal); }
.calcul .note { margin: 12px 0 0; font-size: .88rem; color: var(--ink-3); line-height: 1.55; }

/* ── Source ───────────────────────────────────────────────────────────────
   Un fait daté et référencé se cite ; une affirmation ne se cite pas. */
.source { font-size: .86rem; color: var(--ink-3); margin-top: .5em; }
.source::before { content: "↳ "; }

/* ── page de questions fréquentes ──────────────────────────────────────────
   La réponse est visible, jamais repliée derrière un accordéon. Un contenu
   qu'il faut déplier pour lire est un contenu que beaucoup ne liront pas — et
   un moteur génératif qui cite une page cite ce qu'elle montre. */
.qr { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.qr:last-of-type { border-bottom: 0; }
.qr h3 {
  font-size: 1.08rem; line-height: 1.35; letter-spacing: -.015em;
  margin: 0 0 9px; color: var(--ink);
}
.qr p { margin: 0 0 10px; color: var(--ink-2); line-height: 1.68; }
.vers-guide {
  font-family: "IBM Plex Mono", monospace; font-size: .78rem;
  letter-spacing: .04em; color: var(--teal); text-decoration: none; font-weight: 600;
}
.vers-guide:hover { text-decoration: underline; }