/* ==========================================================================
   Comparoutil — Aperçu A « Pupitre »
   L'instrument de mesure : surfaces blanches, filets 1px, mono pour la donnée.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons & reset
   -------------------------------------------------------------------------- */
:root {
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --line: #D9DEE4;
  --line-soft: #E7EBEF;
  --ink: #0E1116;
  --ink-2: #3E4650;
  --accent: #1F4FD8;
  --accent-deep: #16368F;
  --flag-high: #C2410C;
  --flag-med: #A16207;
  --flag-low: #4B5563;
  --zebra: #FAFBFC;
  --dark-line: #2A313B;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

h1, h2, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; }
img { max-width: 100%; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-deep); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

[id] { scroll-margin-top: 72px; }

.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

/* Papier millimétré (signature) */
.paper,
.band--paper {
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(0deg,  var(--line-soft) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 24px);
}

/* Réglette graduée (signature) : ticks 1px, gradation tous les 5 */
.ruler {
  height: 14px;
  border-bottom: 1px solid #99A3AF;
  background-image:
    repeating-linear-gradient(90deg, #99A3AF 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, #C3CBD4 0 1px, transparent 1px 6px);
  background-size: 100% 14px, 100% 7px;
  background-position: left bottom, left bottom;
  background-repeat: no-repeat;
}

/* Lien d'évitement */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  font: 500 0.875rem var(--mono);
  text-decoration: none;
}
.skip-link:focus-visible { top: 8px; color: #fff; outline-color: var(--ink); }

/* --------------------------------------------------------------------------
   2. En-tête double : barre méta + nav compacte
   -------------------------------------------------------------------------- */
.meta-bar {
  background: var(--ink);
  color: #C7CEDA;
  font: 400 0.6875rem/1 var(--mono);
  letter-spacing: 0.05em;
}
.meta-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 28px;
}
.meta-id { text-transform: uppercase; }
.meta-contact { color: #E6EAF0; text-decoration: none; }
.meta-contact:hover { color: #fff; text-decoration: underline; }
.meta-bar :focus-visible { outline-color: #fff; }

.nav-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.nav-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 24px;
  min-height: 52px;
  padding-block: 6px;
}
.logo {
  font: 600 1.125rem/1 var(--sans);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.logo .accent { color: var(--accent); }
.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}
.main-nav a {
  font: 500 0.8438rem/1 var(--sans);
  color: var(--ink-2);
  text-decoration: none;
  padding-block: 6px;
}
.main-nav a:hover { color: var(--accent-deep); text-decoration: underline; }
.main-nav a[aria-current="page"] { color: var(--accent); }

/* --------------------------------------------------------------------------
   3. Barre de chips sticky (sommaire)
   -------------------------------------------------------------------------- */
.chip-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.chip-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-block: 8px;
  scrollbar-width: thin;
}
.chip-track a {
  flex: 0 0 auto;
  font: 400 0.75rem/1 var(--mono);
  color: var(--ink-2);
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 7px 12px;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.chip-track a:hover {
  color: var(--accent-deep);
  border-color: var(--accent);
}

/* --------------------------------------------------------------------------
   4. Hero : fiche d'identité 7/5
   -------------------------------------------------------------------------- */
.hero { border-bottom: 1px solid var(--line); }
.hero-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding-block: clamp(40px, 7vw, 80px);
}
.kicker {
  font: 400 0.75rem/1.5 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 16px;
}
h1 {
  font: 600 clamp(1.75rem, 1.2rem + 2vw, 2.6rem)/1.2 var(--sans);
  letter-spacing: -0.015em;
}
h1 em { font-style: normal; color: var(--accent); }
.ruler--wide { max-width: 340px; height: 16px; margin: 18px 0 20px; }
.lead {
  font-size: 1.0625rem;
  color: var(--ink-2);
  max-width: 58ch;
}

/* Panneau : les 3 stamps en lignes de tableau */
.hero-panel {
  background: var(--surface);
  border: 1px solid var(--line);
}
.panel-ruler {
  height: 12px;
  margin: 12px 18px 0;
  border-bottom: 1px solid #99A3AF;
  background-image:
    repeating-linear-gradient(90deg, #99A3AF 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, #C3CBD4 0 1px, transparent 1px 6px);
  background-size: 100% 12px, 100% 6px;
  background-position: left bottom, left bottom;
  background-repeat: no-repeat;
}
.stamps {
  list-style: none;
  counter-reset: stamp;
}
.stamps li {
  counter-increment: stamp;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  font: 400 0.875rem/1.45 var(--mono);
}
.stamps li + li { border-top: 1px solid var(--line); }
.stamps li::before {
  content: counter(stamp, decimal-leading-zero);
  font: 500 0.75rem/1 var(--mono);
  color: var(--accent);
  border: 1px solid var(--line);
  padding: 6px 7px;
  background: var(--zebra);
}

/* --------------------------------------------------------------------------
   5. Bandes de section & têtes de section
   -------------------------------------------------------------------------- */
.band {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(40px, 6vw, 68px);
}
.band--paper { background-color: var(--bg); }

.sec-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.roman {
  font: 500 0.8125rem/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--ink-2);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 8px 10px;
  flex: 0 0 auto;
}
h2 {
  font: 600 clamp(1.25rem, 1rem + 1vw, 1.625rem)/1.25 var(--sans);
  letter-spacing: -0.01em;
}
.sec-head .ruler {
  flex: 1 1 40px;
  min-width: 40px;
  align-self: center;
}

.sec-body { max-width: 72ch; }
.sec-body--full { max-width: none; }
.sec-body p + p,
.sec-body p + .callout,
.sec-body p + dl,
.sec-body p + ol { margin-top: 1em; }
.dropcap { font-size: 1.125rem; }
.sec-intro { max-width: 72ch; }

/* --------------------------------------------------------------------------
   6. Méthode : ol 2 colonnes, compteurs mono en cases bordées
   -------------------------------------------------------------------------- */
.engagements {
  list-style: none;
  counter-reset: eng;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}
.engagements li {
  counter-increment: eng;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 20px;
}
.engagements li::before {
  content: counter(eng, decimal-leading-zero);
  font: 500 0.875rem/1 var(--mono);
  color: var(--accent);
  border: 1px solid var(--line);
  background: var(--zebra);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
}
.engagements li span { font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   7. Critères : table comparative (grid 3 colonnes, filets, zébrage)
   -------------------------------------------------------------------------- */
.criteria {
  border: 1px solid var(--line);
  background: var(--surface);
  margin-top: 24px;
}
.criteria-row {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) 150px 3fr;
}
.criteria-row + .criteria-row { border-top: 1px solid var(--line); }
.criteria-row:nth-child(even) { background: var(--zebra); }
.criteria-row dt,
.criteria-row dd { padding: 14px 18px; }
.criteria-row dt {
  font: 600 0.9375rem/1.45 var(--sans);
  border-right: 1px solid var(--line);
}
.cell-flag {
  border-right: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
}
.cell-desc {
  font-size: 0.9375rem;
  color: var(--ink-2);
}

/* Badges carrés mono : ▪ Décisif · ◪ Important · ▫ Utile */
.flag {
  font: 500 0.6875rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--flag-low);
  border: 1px solid currentColor;
  padding: 5px 8px;
  white-space: nowrap;
}
.flag::before { content: "▫ "; }
.flag::before { content: "▫ " / ""; }
.flag--med { color: var(--flag-med); }
.flag--med::before { content: "◪ "; }
.flag--med::before { content: "◪ " / ""; }
.flag--high { color: var(--flag-high); }
.flag--high::before { content: "▪ "; }
.flag--high::before { content: "▪ " / ""; }

/* --------------------------------------------------------------------------
   8. Indépendance : callout
   -------------------------------------------------------------------------- */
.callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 20px 24px;
}
.eyebrow {
  font: 500 0.6875rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   9. Qui écrit ceci : byline
   -------------------------------------------------------------------------- */
.byline {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  margin-top: 24px;
  max-width: 62rem;
}
.who {
  background: var(--zebra);
  border: 1px solid var(--line);
  padding: 20px 22px;
}
.who .name { font: 500 1rem/1.3 var(--mono); }
.who .role { font-size: 0.8125rem; color: var(--ink-2); margin: 4px 0 12px; }
.who a { font: 400 0.8125rem/1.4 var(--mono); }

/* --------------------------------------------------------------------------
   10. toc-cta (déplacé avant Contact) + Contact
   -------------------------------------------------------------------------- */
.toc-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 20px 24px;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.toc-cta p { font-weight: 500; }
.btn {
  display: inline-block;
  font: 500 0.8125rem/1 var(--mono);
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  padding: 12px 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s;
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }

.contact-email {
  display: inline-block;
  margin-top: 16px;
  font: 500 clamp(1rem, 0.9rem + 1vw, 1.375rem)/1.3 var(--mono);
}

/* --------------------------------------------------------------------------
   11. Pied de page
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: #C7CEDA;
  border-top: 2px solid var(--accent);
  font-size: 0.875rem;
}
.site-footer a { color: #AFC7F9; }
.site-footer a:hover { color: #fff; }
.site-footer :focus-visible { outline-color: #fff; }

.footer-disclosure {
  padding-block: 20px;
  border-bottom: 1px solid var(--dark-line);
  max-width: 78ch;
}
.footer-disclosure strong { color: #fff; }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
  padding-block: 32px;
}
.footer-brand .logo { color: #fff; }
.footer-brand .logo .accent { color: #AFC7F9; }
.footer-brand p { margin-top: 10px; max-width: 34ch; }
.site-footer h2 {
  font: 500 0.6875rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8C96A3;
  margin-bottom: 12px;
}
.footer-nav { list-style: none; }
.footer-nav li + li { margin-top: 8px; }
.footer-nav a { color: #E4E9F0; text-decoration: none; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-block: 18px;
  border-top: 1px solid var(--dark-line);
  font: 400 0.75rem/1.6 var(--mono);
}

/* --------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; align-items: start; }
  .hero-panel { max-width: 480px; }
  .criteria-row { grid-template-columns: minmax(180px, 2fr) 130px 3fr; }
}

@media (max-width: 760px) {
  /* Table des critères : empilée, flag à droite du titre */
  .criteria-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title flag"
      "desc  desc";
  }
  .criteria-row dt { grid-area: title; border-right: 0; padding-bottom: 6px; }
  .cell-flag { grid-area: flag; border-right: 0; padding-bottom: 6px; justify-content: flex-end; }
  .cell-desc { grid-area: desc; padding-top: 0; }

  .engagements { grid-template-columns: 1fr; }
  .byline { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 640px) {
  .meta-contact { display: none; }
  .toc-cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 520px) {
  .nav-bar-inner { padding-block: 10px; }
  .main-nav { gap: 2px 14px; }
}

/* --------------------------------------------------------------------------
   13. Pages légales : hero sans panneau + fiches d'information
   -------------------------------------------------------------------------- */
/* Hero pleine largeur (mentions légales, divulgation) : pas de panneau latéral */
.hero-grid--solo { grid-template-columns: 1fr; }
.hero-grid--solo .lead { max-width: 68ch; }

/* Fiche d'information : même idiome que la table des critères (label | valeur) */
.legal-dl {
  border: 1px solid var(--line);
  background: var(--surface);
  margin-top: 4px;
}
.legal-row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2fr;
}
.legal-row + .legal-row { border-top: 1px solid var(--line); }
.legal-row:nth-child(even) { background: var(--zebra); }
.legal-row dt,
.legal-row dd { padding: 14px 18px; margin: 0; }
.legal-row dt {
  font: 500 0.6875rem/1.5 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-right: 1px solid var(--line);
}
.legal-row dd { font-size: 0.9375rem; }

/* Horodatage de dernière mise à jour */
.updated {
  display: inline-block;
  margin-top: 24px;
  font: 400 0.75rem/1.6 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

@media (max-width: 640px) {
  .legal-row { grid-template-columns: 1fr; }
  .legal-row dt { border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
  .legal-row dd { padding-top: 10px; }
}

/* --------------------------------------------------------------------------
   14. Mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}