/* ==========================================================================
   Feuille de style du rapport d'audit CA CARTONNE.

   Mise en page reprise du dossier candidature SKL : rail fixe, hero sombre,
   alternance de bandes, verdicts et constats a gravite. Palette bronze de la
   charte Giacomo Genna a la place du petrole SKL.

   Une seule police, un seul accent. La hierarchie passe par le contraste des
   fonds, puis par la graisse.

   ⚠️ .section--sombre et .section--appui ont le MEME fond : toute regle ecrite
   pour l'une doit exister pour l'autre. Un oubli s'est paye le 2026-08-28 par
   du texte gris fonce sur fond sombre dans la section 12.
   ========================================================================== */

@font-face {
  font-family: 'Breathing';
  src: url('fonts/breathing.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* ---------- Fonds ---------- */
  --blanc: #ffffff;
  --papier-2: #f7f5ef;           /* la bande alternee, creme chaud */
  --fond-gris: #efe9e2;          /* bande d'appui claire */
  --encre: #212121;              /* fond des sections sombres ET encre des titres */
  --encre-2: #2c2620;            /* une carte posee sur fond sombre, chaude */

  /* ---------- Encres ---------- */
  --encre-inverse: #ffffff;
  --corps-encre: #4b4b45;        /* le corps de texte sur fond clair */
  --corps-inverse: #d9d5cf;      /* le corps de texte sur fond sombre */
  --gris: #4b4b45;
  --gris-clair: #6d6d64;         /* texte secondaire : tenu a 4,5 sur blanc */

  /* ---------- Accent bronze ---------- */
  --accent: #8e5f44;
  --accent-fonce: #74492f;
  --accent-pale: #f0e6dd;
  --accent-clair: #c99b7f;       /* l'accent sur fond sombre */
  --accent-sombre-pale: #362a21;

  /* ---------- Filets ---------- */
  --filet: #e3ded4;
  --filet-2: #c8c1b4;
  --filet-sombre: rgba(255, 255, 255, 0.12);

  --rail-fond: #f7f5ef;
  --rail-filet: #e3ded4;
  --rail-survol: #efe9e2;

  /* ---------- Severite, quatre niveaux ---------- */
  --crit: #9e3b32;      --crit-bg: #f3e3e1;
  --eleve: #8a5f12;     --eleve-bg: #f5ebd8;
  --moyen: #4b5157;     --moyen-bg: #eceeec;
  --fort: #3a6b4a;      --fort-bg: #e6ede7;

  --crit-clair: #de8078;    --crit-bg-sombre: #2e1e1d;
  --eleve-clair: #d3a554;   --eleve-bg-sombre: #2c2418;
  --moyen-clair: #a8afb3;   --moyen-bg-sombre: #2b3136;
  --fort-clair: #7fb68c;    --fort-bg-sombre: #1d2a21;

  /* ---------- Typographie ---------- */
  --titre: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --corps: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --script: 'Breathing', 'Brush Script MT', cursive;

  /* ---------- Formes ---------- */
  --rayon: 12px;
  --rayon-carte: 16px;
  --rayon-petit: 8px;
  --pastille: 9999px;
  --anneau: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  --ombre-douce: rgba(0, 0, 0, 0.09) -8px 16px 36px 0, rgba(0, 0, 0, 0.04) 0 2px 8px 0;

  /* ---------- Mesure ---------- */
  --rail: 280px;
  --colonne: 1080px;
  --marge: clamp(1.35rem, 4vw, 2.875rem);
  --rythme: 112px;
  --rythme-bande: 72px;
}

@media (max-width: 640px) {
:root { --rythme: 80px; --rythme-bande: 52px; }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--corps);
  font-size: 16px;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ================= Barre de progression ================= */

#bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-clair));
  z-index: 200;
  transition: width 0.1s linear;
}

/* ================= Rail ================= */

.rail {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--rail);
  background: var(--rail-fond);
  border-right: 1px solid var(--rail-filet);
  padding: 2.5rem 1.15rem 1.75rem;
  overflow-y: auto;
  z-index: 100;
}

.rail__marque {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--titre);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--encre);
  text-decoration: none;
  margin-bottom: 0.5rem;
}

.jeton {
  width: 22px; height: 22px;
  border-radius: 6px;
  flex: 0 0 auto;
  object-fit: contain;
}

.sur-titre {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-clair);
  margin: 0.5rem 0 1.4rem;
}

.rail__groupe {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-clair);
  margin: 1.25rem 0 0.375rem;
  padding-left: 0.55rem;
}

.rail__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }

.rail__liste a {
  display: flex;
  gap: 0.55rem;
  align-items: baseline;
  padding: 0.4rem 0.6rem;
  border-radius: var(--rayon-petit);
  color: var(--encre);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  transition: background 0.15s, color 0.15s;
}

.rail__liste a:hover { background: var(--rail-survol); }

.rail__liste .num {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--gris-clair);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  flex: 0 0 1.15rem;
}

.rail__liste a.actif { background: var(--accent); color: var(--blanc); }
.rail__liste a.actif .num { color: #ffffff; }

.rail__pied {
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rail-filet);
  font-size: 0.6875rem;
  line-height: 1.75;
  color: var(--gris-clair);
}

.rail__pied p { margin: 0; }
.rail__pied strong { color: var(--encre); font-weight: 600; }

/* Barre haute, uniquement sous 1080px */

.topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--rail-fond);
  color: var(--encre);
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem var(--marge);
  border-bottom: 1px solid var(--rail-filet);
}

.topbar__marque {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--titre);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--encre);
  text-decoration: none;
}

.menu-btn {
  background: var(--accent);
  border: 0;
  color: var(--blanc);
  font-family: var(--corps);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.5rem 0.9rem;
  border-radius: var(--rayon-petit);
  cursor: pointer;
}

.voile {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 95;
}

main { margin-left: var(--rail); }

@media (max-width: 1080px) {
.rail { transform: translateX(-100%); transition: transform 0.22s ease; }
.rail.ouvert { transform: translateX(0); }
.topbar { display: flex; }
.voile.visible { display: block; }
main { margin-left: 0; }
}

/* ================= Sections ================= */

.section { padding: var(--rythme) var(--marge); }
.section--sombre,
.section--appui { background: linear-gradient(155deg, var(--encre) 45%, #32261c 100%); color: var(--corps-inverse); }
.section--blanc { background: var(--blanc); }
.section--papier { background: var(--papier-2); }
.section--appui { background: linear-gradient(155deg, var(--encre) 45%, #32261c 100%); color: var(--corps-inverse); }
.section--gris { background: var(--fond-gris); }
.section__inner { max-width: var(--colonne); margin: 0 auto; }

.hero {
  background: linear-gradient(155deg, var(--encre) 45%, #32261c 100%);
  color: var(--corps-inverse);
  padding: var(--rythme) var(--marge);
}

.hero__inner { max-width: var(--colonne); margin: 0 auto; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-clair);
  margin: 0 0 1.15rem;
}

.section--papier .eyebrow,
.section--blanc .eyebrow,
.section--gris .eyebrow { color: var(--accent); }

h1,
h2,
h3 { font-family: var(--titre); font-weight: 700; letter-spacing: -0.025em; }

h1 {
  font-size: clamp(1.875rem, 5vw, 3.75rem);
  line-height: 1.04;
  margin: 0 0 1.25rem;
  color: var(--blanc);
}

.section h2,
.hero h2 {
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
  line-height: 1.06;
  margin: 0 0 1rem;
}

.section--papier h2,
.section--blanc h2,
.section--gris h2 { color: var(--encre); }
.section--sombre h2, .section--appui h2 { color: var(--blanc); }

.script { font-family: var(--script); color: var(--accent-clair); font-weight: 400; font-style: normal; margin: 0 0.2em; }
.section--papier .script,
.section--blanc .script,
.section--gris .script,
.carte .script { color: var(--accent); }

.chapo {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--corps-inverse);
  margin: 0 0 1.25rem;
}

.section--papier .chapo,
.section--blanc .chapo,
.section--gris .chapo { color: var(--corps-encre); }
.chapo strong { color: var(--blanc); font-weight: 700; }
.section--papier .chapo strong,
.section--blanc .chapo strong,
.section--gris .chapo strong { color: var(--encre); }

.hero__meta {
  margin: 1.85rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--filet-sombre);
  font-size: 0.8125rem;
  color: #a8a49c;
}

.hero__meta strong { color: var(--blanc); font-weight: 700; }

/* Bandeau */

.bandeau { display: grid; gap: 1.4rem; align-items: center; }
@media (min-width: 820px) { .bandeau { grid-template-columns: minmax(0, 1fr) auto; gap: 2.25rem; } }
.bandeau h2 { margin-bottom: 0.6rem; }
.bandeau p { margin: 0; color: var(--corps-encre); font-size: 1rem; line-height: 1.625; }
.section--sombre .bandeau p, .section--appui .bandeau p { color: var(--corps-inverse); }

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--accent);
  color: var(--blanc);
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: var(--rayon);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.bouton:hover { opacity: 0.85; }

.section--sombre .bouton, .section--appui .bouton, .hero .bouton,
.bouton--inverse { background: var(--blanc); color: var(--accent); }

/* ================= Cartes ================= */

.cartes { display: grid; gap: 1rem; margin: 1.85rem 0 0; }
@media (min-width: 780px) { .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.carte {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-carte);
  padding: 1.6rem 1.6rem 1.35rem;
  display: flex;
  flex-direction: column;
  color: var(--encre);
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.carte:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--ombre-douce); }

.carte__tete {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.pastille {
  width: 32px; height: 32px;
  border-radius: var(--pastille);
  background: var(--accent);
  color: var(--blanc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.carte__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.carte h3 { font-size: 1.3125rem; font-weight: 700; line-height: 1.2; margin: 0 0 0.6rem; }
.carte p { margin: 0; color: var(--corps-encre); font-size: 0.9375rem; line-height: 1.6; flex: 1; }
.carte p + p { margin-top: 0.75rem; }

.section--sombre .carte, .section--appui .carte {
  background: var(--encre-2);
  border-color: var(--filet-sombre);
  color: var(--corps-inverse);
}
.section--sombre .carte h3, .section--appui .carte h3 { color: var(--blanc); }
.section--sombre .carte__label,
.section--appui .carte__label { color: var(--accent-clair); }
.section--sombre .carte p, .section--appui .carte p { color: var(--corps-inverse); }

/* ================= Prose ================= */

.prose { font-size: 1rem; line-height: 1.7; color: var(--corps-encre); }
.prose > :first-child { margin-top: 0; }

.prose h3 {
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--encre);
  margin: 2.9rem 0 0.9rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--filet);
}

.prose > h3:first-child,
.prose .verdict + h3,
.prose .chiffres + h3 { border-top: 0; padding-top: 0; margin-top: 1.75rem; }

.section--sombre .prose h3,
.section--appui .prose h3 { border-top-color: var(--filet-sombre); }

.prose h4 {
  font-weight: 700;
  font-size: 1rem;
  color: var(--encre);
  letter-spacing: 0;
  margin: 2rem 0 0.55rem;
}

.prose p { margin: 0 0 1.55rem; }
.prose strong { color: var(--encre); font-weight: 700; }
.section--sombre .prose,
.section--appui .prose { color: var(--corps-inverse); }
.section--sombre .prose strong,
.section--appui .prose strong,
.section--sombre .prose h3,
.section--appui .prose h3,
.section--sombre .prose h4,
.section--appui .prose h4 { color: var(--blanc); }

.prose a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-pale); }
.prose a:hover { border-bottom-color: var(--accent); }
.section--sombre .prose a,
.section--appui .prose a { color: var(--accent-clair); border-bottom-color: rgba(201, 155, 127, 0.4); }

.prose ul,
.prose ol { margin: 0 0 1.4rem; padding-left: 1.35rem; }
.prose li { margin: 0 0 0.5rem; }
.prose li strong { color: var(--encre); }
.section--sombre .prose li strong,
.section--appui .prose li strong { color: var(--blanc); }
.prose li::marker { color: var(--accent); font-weight: 700; }
.section--sombre .prose li::marker,
.section--appui .prose li::marker { color: var(--accent-clair); }

.prose em.quote { font-style: italic; }

.prose p.note {
  font-size: 0.875rem;
  color: var(--gris-clair);
  font-style: italic;
  border-left: 2px solid var(--filet);
  padding-left: 0.85rem;
  margin: 1.1rem 0 1.55rem;
}

.section--sombre .prose p.note,
.section--appui .prose p.note { color: #a8a49c; border-left-color: var(--filet-sombre); }

/* ===== Encadres copy : ce qu'on propose d'ecrire ===== */

.prose blockquote {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--papier-2);
  border: 1px solid var(--filet);
  border-left: 3px solid var(--accent-pale);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  font-size: 1rem;
  line-height: 1.62;
}

.prose blockquote p { margin: 0 0 0.7rem; color: var(--corps-encre); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose blockquote strong { color: var(--encre); }

.prose blockquote.copy {
  background: linear-gradient(90deg, var(--accent-pale), var(--papier-2) 70%);
  border-color: var(--accent-pale);
  border-left: 3px solid var(--accent);
}

.section--papier .prose blockquote { background: var(--blanc); }
.section--papier .prose blockquote.copy { background: linear-gradient(90deg, var(--accent-pale), var(--blanc) 70%); }

.prose p.copylabel {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-fonce);
  margin: 2rem 0 0.5rem;
}

.prose p.copylabel + blockquote { margin-top: 0; }

/* ===== Le portfolio de captures =====
   Un accordeon <details> ferme par defaut : le portfolio ne doit pas pousser le
   reste du document vers le bas. Ouvert, on voit les captures EN ENTIER, sans
   recadrage et sans lien : cliquer ne doit pas emmener ailleurs. Ajoute le
   2026-09-02, remanie le meme jour sur la demande de Giacomo. */

.prose details.portfolio {
  margin: 1.5rem 0 1.85rem;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--papier-2);
  overflow: hidden;
}

.prose details.portfolio > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-fonce);
}
.prose details.portfolio > summary::-webkit-details-marker { display: none; }
.prose details.portfolio > summary::marker { content: ''; }

.prose details.portfolio > summary::before {
  content: '+';
  width: 22px; height: 22px; flex: 0 0 auto;
  border-radius: var(--pastille);
  background: var(--accent);
  color: var(--blanc);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 700; line-height: 1;
}
.prose details.portfolio[open] > summary::before { content: '\2013'; }
.prose details.portfolio > summary:hover { background: var(--fond-gris); }

.prose .galerie-posts { display: grid; gap: 1.1rem; padding: 0 1.1rem 1.1rem; }
@media (min-width: 700px) { .prose .galerie-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

.prose .capture { display: block; }

/* L'image ENTIERE, jamais recadree : c'est tout l'interet d'ouvrir le volet. */
.prose .capture img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--filet-2);
  border-radius: var(--rayon) var(--rayon) 0 0;
  background: var(--encre);
}

.prose .capture__pied {
  display: block;
  padding: 0.7rem 0.85rem 0.8rem;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-top: 0;
  border-radius: 0 0 var(--rayon) var(--rayon);
}

.prose .capture__quoi { display: block; font-size: 0.8125rem; font-weight: 700; color: var(--encre); line-height: 1.35; }
.prose .capture__chiffres { display: block; margin-top: 0.2rem; font-size: 0.75rem; color: var(--gris-clair); }

.section--sombre .prose details.portfolio,
.section--appui .prose details.portfolio { background: var(--papier-2); border-color: var(--filet); }
.section--sombre .prose .capture__pied,
.section--appui .prose .capture__pied { background: var(--blanc); border-color: var(--filet); }
.section--sombre .prose .capture__quoi,
.section--appui .prose .capture__quoi { color: var(--encre); }
.section--sombre .prose .capture__chiffres,
.section--appui .prose .capture__chiffres { color: var(--gris-clair); }

/* ===== La maquette de post LinkedIn =====
   Un exemple de copy n'est PAS une citation : l'italique entre guillemets droits
   est reserve a la parole rapportee, et l'employer ici ferait passer une proposition
   pour un verbatim du client. On lui donne donc la largeur reelle d'un post dans le
   fil, 555 px, une carte, et un en-tete d'auteur : il se lit comme il se lira.
   Ajoute le 2026-09-02. */

.prose .post-li {
  max-width: 555px;
  margin: 1.5rem 0 1.85rem;
  padding: 1.05rem 1.15rem 1.15rem;
  background: var(--papier-2);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-douce);
  font-style: normal;
}

.prose .post-li__tete {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.9rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--filet);
}

.prose .post-li__rond {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: var(--pastille);
  background: var(--accent-pale);
  color: var(--accent-fonce);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em;
}

.prose .post-li__photo {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: var(--pastille);
  object-fit: cover;
  display: block;
}

/* La regle .prose .post-li p ci-dessous vaut 0,2,1 et ecrasait ces deux-la, ecrites
   en 0,2,0 : le nom et le titre sortaient en corps de texte gris. On qualifie donc
   par p.classe. Mesure a l'appui le 2026-09-02, avant correction : les trois textes
   de la carte rendaient 15px et rgb(75,75,69). */
.prose .post-li p.post-li__nom { margin: 0; font-size: 0.875rem; font-weight: 700; color: var(--encre); line-height: 1.3; }
.prose .post-li p.post-li__titre { margin: 0; font-size: 0.75rem; font-weight: 400; color: var(--gris-clair); line-height: 1.35; }

.prose .post-li p { margin: 0 0 0.85rem; font-size: 0.9375rem; line-height: 1.55; color: var(--corps-encre); }
.prose .post-li p:last-child { margin-bottom: 0; }

/* Sur bande sombre la carte reste claire : un post LinkedIn est clair, et c'est
   ce qui le fait reconnaitre. On force donc les encres foncees a l'interieur. */
.section--sombre .prose .post-li,
.section--appui .prose .post-li { background: var(--papier-2); border-color: var(--filet); }
.section--sombre .prose .post-li p,
.section--appui .prose .post-li p { color: var(--corps-encre); }
.section--sombre .prose .post-li p.post-li__nom,
.section--appui .prose .post-li p.post-li__nom { color: var(--encre); }
.section--sombre .prose .post-li p.post-li__titre,
.section--appui .prose .post-li p.post-li__titre { color: var(--gris-clair); }

.section--sombre .prose blockquote,
.section--appui .prose blockquote { background: var(--encre-2); border-color: var(--filet-sombre); border-left-color: var(--filet-sombre); }
.section--sombre .prose blockquote.copy,
.section--appui .prose blockquote.copy { background: var(--accent-sombre-pale); border-left-color: var(--accent-clair); }
.section--sombre .prose blockquote p,
.section--appui .prose blockquote p { color: var(--corps-inverse); }
.section--sombre .prose blockquote strong,
.section--appui .prose blockquote strong { color: var(--blanc); }
.section--sombre .prose p.copylabel,
.section--appui .prose p.copylabel { color: var(--accent-clair); }

/* ================= Tableaux ================= */

.table-wrap { overflow-x: auto; margin: 1.6rem 0 1.85rem; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--blanc); }
.section--sombre .table-wrap,
.section--appui .table-wrap { background: var(--encre-2); border-color: var(--filet-sombre); }

.prose table { border-collapse: collapse; width: 100%; font-size: 0.875rem; line-height: 1.5; }

.prose th {
  text-align: left;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-fonce);
  background: var(--accent-pale);
  border-bottom: 1px solid var(--filet);
  padding: 0.8rem 1rem;
  vertical-align: bottom;
  white-space: nowrap;
}

.prose td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--filet); color: var(--corps-encre); vertical-align: top; }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose td strong { color: var(--encre); }

.prose tbody tr:nth-child(even) { background: var(--papier-2); }
.prose tbody tr:hover { background: var(--accent-pale); }
.prose tbody td:first-child { color: var(--encre); font-weight: 600; }

.section--sombre .prose th,
.section--appui .prose th { background: var(--accent-sombre-pale); color: var(--accent-clair); border-bottom-color: var(--filet-sombre); }
.section--sombre .prose td,
.section--appui .prose td { color: var(--corps-inverse); border-bottom-color: var(--filet-sombre); }
.section--sombre .prose td strong,
.section--appui .prose td strong { color: var(--blanc); }
.section--sombre .prose tbody tr:nth-child(even),
.section--appui .prose tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }
.section--sombre .prose tbody tr:hover,
.section--appui .prose tbody tr:hover { background: rgba(201, 155, 127, 0.1); }
.section--sombre .prose tbody td:first-child,
.section--appui .prose tbody td:first-child { color: var(--blanc); }

/* ===== Bande de chiffres ===== */

.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--filet);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  overflow: hidden;
  margin: 0 0 2.4rem;
}

.chiffre {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.15rem 1.25rem;
  background: var(--blanc);
}

.chiffre__valeur {
  font-family: var(--titre);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.chiffre__mot {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--gris-clair);
}

.section--sombre .chiffres,
.section--appui .chiffres { background: var(--filet-sombre); border-color: var(--filet-sombre); }
.section--sombre .chiffre,
.section--appui .chiffre { background: var(--encre-2); }
.section--sombre .chiffre__valeur,
.section--appui .chiffre__valeur { color: var(--accent-clair); }
.section--sombre .chiffre__mot,
.section--appui .chiffre__mot { color: #a8a49c; }

/* ===== L'essentiel ===== */

.essentiel {
  margin: 0 0 2.4rem;
  padding: 1.35rem 1.6rem 1.45rem;
  background: var(--accent-pale);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}

.essentiel__mot {
  margin: 0 0 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-fonce);
}

.prose .essentiel__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.prose .essentiel__liste li {
  margin: 0;
  padding-left: 1.15rem;
  position: relative;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--corps-encre);
}

.prose .essentiel__liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 2px;
  background: var(--accent);
}

.prose .essentiel__liste li strong { color: var(--accent-fonce); font-weight: 700; }

/* ===== Verdict ===== */

.verdict {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  align-items: baseline;
  margin: 2.5rem 0;
  padding: 1.5rem 1.75rem;
  background: linear-gradient(135deg, var(--encre), #32261c);
  border-left: 5px solid var(--accent-clair);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}

.verdict__mot {
  flex: none;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-clair);
  font-variant-numeric: tabular-nums;
}

.verdict p {
  margin: 0;
  flex: 1 1 22rem;
  font-family: var(--titre);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--blanc);
}

.verdict p strong { color: var(--blanc); font-weight: 700; }

.section--sombre .verdict,
.section--appui .verdict { background: var(--encre-2); box-shadow: var(--anneau); }

/* ===== Pastilles de severite et constats ===== */

.sev {
  display: inline-block;
  margin-right: 0.55rem;
  padding: 0.16rem 0.6rem;
  border-radius: var(--pastille);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 0.1em;
  white-space: nowrap;
}

/* La pastille seule, dans une cellule de tableau. */
.sev--fail { background: var(--crit-bg); color: var(--crit); box-shadow: inset 0 0 0 1px rgba(158, 59, 50, 0.25); }
.sev--warn { background: var(--eleve-bg); color: var(--eleve); box-shadow: inset 0 0 0 1px rgba(138, 95, 18, 0.25); }
.sev--pass { background: var(--fort-bg); color: var(--fort); box-shadow: inset 0 0 0 1px rgba(58, 107, 74, 0.25); }
.sev--na   { background: var(--moyen-bg); color: var(--moyen); box-shadow: inset 0 0 0 1px rgba(75, 81, 87, 0.22); }

.constat {
  padding: 0.7rem 0.95rem;
  border-left: 3px solid var(--filet-2);
  border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
  margin: 1.1rem 0;
}

.constat--critique { border-left-color: var(--crit); background: linear-gradient(90deg, var(--crit-bg), transparent 68%); }
.constat--eleve    { border-left-color: var(--eleve); background: linear-gradient(90deg, var(--eleve-bg), transparent 68%); }
.constat--moyen    { border-left-color: var(--moyen); background: linear-gradient(90deg, var(--moyen-bg), transparent 68%); }
.constat--fort     { border-left-color: var(--fort); background: linear-gradient(90deg, var(--fort-bg), transparent 68%); }

.constat--critique .sev { background: var(--crit-bg); color: var(--crit); box-shadow: inset 0 0 0 1px rgba(158, 59, 50, 0.25); }
.constat--eleve .sev    { background: var(--eleve-bg); color: var(--eleve); box-shadow: inset 0 0 0 1px rgba(138, 95, 18, 0.25); }
.constat--moyen .sev    { background: var(--moyen-bg); color: var(--moyen); box-shadow: inset 0 0 0 1px rgba(75, 81, 87, 0.22); }
.constat--fort .sev     { background: var(--fort-bg); color: var(--fort); box-shadow: inset 0 0 0 1px rgba(58, 107, 74, 0.25); }

.constat strong { color: var(--encre); }
.constat p { margin: 0.3rem 0 0; }

/* Le constat n'existait que sur fond clair. Pose sur une bande sombre, son
   degrade clair recevait le texte clair de la bande (illisible a gauche) et son
   <strong> encre sur encre (invisible a droite, la ou le degrade devient
   transparent). On bascule sur les quatre fonds sombres de severite, deja dans
   la palette et jamais servis jusqu'ici. La pastille .sev reste claire : c'est
   ce qui la detache du bloc. Ajoute le 2026-09-02. */

.section--sombre .constat--critique,
.section--appui .constat--critique { background: linear-gradient(90deg, var(--crit-bg-sombre), transparent 68%); border-left-color: var(--crit-clair); }
.section--sombre .constat--eleve,
.section--appui .constat--eleve { background: linear-gradient(90deg, var(--eleve-bg-sombre), transparent 68%); border-left-color: var(--eleve-clair); }
.section--sombre .constat--moyen,
.section--appui .constat--moyen { background: linear-gradient(90deg, var(--moyen-bg-sombre), transparent 68%); border-left-color: var(--moyen-clair); }
.section--sombre .constat--fort,
.section--appui .constat--fort { background: linear-gradient(90deg, var(--fort-bg-sombre), transparent 68%); border-left-color: var(--fort-clair); }

.section--sombre .constat,
.section--appui .constat { color: var(--corps-inverse); }
.section--sombre .constat strong,
.section--appui .constat strong { color: var(--blanc); }

/* ===== Radar ===== */

.radar-wrap { display: flex; justify-content: center; margin: 1.5rem 0 0.5rem; }
.radar-wrap svg { max-width: 100%; height: auto; }

/* ===== Les pieces a ouvrir =====
   Un lien pose au fil du texte se lit comme une reference et personne ne clique
   dessus. La piece prend l'aplat bronze plein : c'est le seul aplat colore de la
   page, donc l'oeil y va, et le mot « Ouvrir » dit que c'est une porte. */

.pieces { display: grid; gap: 0.85rem; margin: 1.85rem 0 2.2rem; }
@media (min-width: 780px) { .pieces { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }

.piece,
.prose a.piece {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.25rem 3rem 1.3rem 1.4rem;
  background: var(--accent-fonce);
  border: 0;
  border-radius: var(--rayon);
  color: var(--blanc);
  text-decoration: none;
  position: relative;
  transition: transform 0.18s, box-shadow 0.18s;
}

.piece::after {
  content: '\2192';
  position: absolute;
  top: 50%;
  right: 1.35rem;
  transform: translateY(-50%);
  font-size: 1.35rem;
  line-height: 1;
  transition: transform 0.18s;
}

.piece:hover { transform: translateY(-2px); box-shadow: var(--ombre-douce); }
.piece:hover::after { transform: translate(4px, -50%); }

.piece__mot {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ecd9cc;
}

.piece__titre { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; color: var(--blanc); }
.piece__texte { font-size: 0.875rem; line-height: 1.5; color: #ecd9cc; }

.section--sombre .piece,
.section--appui .piece,
.section--sombre .prose a.piece,
.section--appui .prose a.piece { background: var(--blanc); color: var(--accent-fonce); }
.section--sombre .piece__titre,
.section--appui .piece__titre { color: var(--accent-fonce); }
.section--sombre .piece__mot,
.section--appui .piece__mot,
.section--sombre .piece__texte,
.section--appui .piece__texte { color: var(--corps-encre); }

/* ===== La page de vente, presentee comme une vraie page ===== */

body.page-seule main { margin-left: 0; }
.retour {
  position: sticky; top: 0; z-index: 90;
  background: var(--rail-fond);
  border-bottom: 1px solid var(--rail-filet);
  padding: 0.7rem var(--marge);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: 0.8125rem;
}
.retour__mot { color: var(--gris-clair); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.6875rem; }
.retour a { color: var(--accent-fonce); font-weight: 700; text-decoration: none; }
.retour a:hover { text-decoration: underline; text-underline-offset: 3px; }

.vente { max-width: 760px; margin: 0 auto; }
.vente h1 { color: var(--blanc); }
.vente .rassurance {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem;
  margin: 1.6rem 0 0; padding: 0; list-style: none;
  font-size: 0.875rem; color: var(--corps-inverse);
}
.vente .rassurance li::before { content: '\2713'; color: var(--accent-clair); font-weight: 700; margin-right: 0.5rem; }
/* Le bouton vit dans .prose, donc `.prose a` le repeint : sans ce rappel de
   selecteur, il sort bronze sur bronze, donc illisible. Meme piege que .piece. */
.cta-vente,
.prose a.cta-vente {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--accent-fonce); color: var(--blanc);
  border-bottom: 0;
  padding: 1rem 1.9rem; border-radius: var(--rayon);
  font-size: 1rem; font-weight: 700; text-decoration: none;
  transition: transform 0.15s, opacity 0.15s;
}
.cta-vente:hover,
.prose a.cta-vente:hover { transform: translateY(-1px); opacity: 0.92; color: var(--blanc); }
.hero .cta-vente,
.section--sombre .cta-vente,
.section--appui .cta-vente,
.hero .prose a.cta-vente,
.section--sombre .prose a.cta-vente,
.section--appui .prose a.cta-vente { background: var(--blanc); color: var(--accent-fonce); }
.section--sombre .prose a.cta-vente:hover,
.section--appui .prose a.cta-vente:hover { color: var(--accent-fonce); }
.etapes { display: grid; gap: 1rem; margin: 1.85rem 0 0; counter-reset: etape; }
@media (min-width: 780px) { .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.etape {
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon-carte);
  padding: 1.4rem 1.5rem; counter-increment: etape;
}
.etape h3 { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.5rem; font-size: 1.0625rem; }
.etape h3::before {
  content: counter(etape); width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: var(--pastille); background: var(--accent); color: var(--blanc);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8125rem; font-weight: 700;
}
.etape p { margin: 0; font-size: 0.9375rem; color: var(--corps-encre); }

/* Meme piege pour l'etape : sa carte est blanche, et sur bande sombre la regle
   .section--appui .prose h3 rendait son titre blanc sur blanc. La carte passe
   donc en --encre-2, comme .carte le fait deja. Ajoute le 2026-09-02. */

.section--sombre .etape,
.section--appui .etape { background: var(--encre-2); border-color: var(--filet-sombre); }
.section--sombre .etape h3,
.section--appui .etape h3 { color: var(--blanc); border-top: 0; padding-top: 0; }
.section--sombre .etape p,
.section--appui .etape p { color: var(--corps-inverse); }

/* ================= Signature et pied ================= */

.signature { font-family: var(--script); font-size: clamp(2.4rem, 5.5vw, 3.4rem); line-height: 1; color: var(--accent); margin: 0.6rem 0 0; }
.section--sombre .signature,
.section--appui .signature { color: var(--accent-clair); }

.pied { background: linear-gradient(155deg, var(--encre) 45%, #32261c 100%); color: #a8a49c; padding: var(--rythme-bande) var(--marge); font-size: 0.8125rem; }
.pied__inner { max-width: var(--colonne); margin: 0 auto; }
.pied p { margin: 0 0 0.4rem; color: #a8a49c; }
.pied strong { color: var(--blanc); font-weight: 700; }
.pied .fort { color: var(--accent-clair); font-weight: 700; }

.pied__nav { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid var(--filet-sombre); }
.pied__nav a { font-size: 0.8125rem; color: var(--corps-inverse); text-decoration: none; }
.pied__nav a:hover { color: var(--accent-clair); }

/* ================= Petits ecrans ================= */

@media (max-width: 760px) {
.verdict { padding: 1.15rem 1.25rem; }
.verdict p { font-size: 1.0625rem; }
.prose blockquote { padding: 1.1rem 1.15rem; }
.prose th,
.prose td { padding: 0.65rem 0.75rem; }
}

@media (max-width: 640px) {
h1 { line-height: 1.08; }
.section h2,
.hero h2 { line-height: 1.2; }
}

/* ================= Impression ================= */

@media print {
.rail,
.topbar,
.voile,
#bar,
.bouton,
.pied__nav { display: none !important; }
body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.5; }
main { margin-left: 0; }
  .hero, .section--sombre, .section--appui, .section--gris { background: #fff !important; color: #000 !important; }
.pied { background: #fff !important; }
.hero h1,
.section--sombre h2,
.section--appui h2,
.section--sombre h3,
.section--appui h3,
.section--sombre .prose,
.section--appui .prose { color: #000 !important; }
.chapo,
.hero__meta { color: #444 !important; }
.script { color: #8e5f44 !important; }
.verdict { background: #eceeec !important; border-left-color: #8e5f44 !important; box-shadow: none !important; }
.verdict p { color: #000 !important; }
.verdict__mot { color: #8e5f44 !important; }
.constat { background: none !important; }
.section,
.hero { padding: 0 0 1.25rem; }
.prose blockquote,
.table-wrap,
.carte,
.chiffres { break-inside: avoid; }
a { color: #000; text-decoration: none; }
}