/* ==========================================================================
   Le Prisme — feuille de style
   Aucune dépendance externe. Aucun build. Aucune police distante.
   Remplace le CDN Tailwind (bloquant au rendu, non destiné à la production).
   ========================================================================== */

:root {
  --ink:        #0F172A;
  --ink-soft:   #334155;
  --body:       #475569;
  --muted:      #64748B;
  --faint:      #94A3B8;
  --rule:       #E2E8F0;
  --rule-soft:  #F1F5F9;
  --surface:    #FFFFFF;
  --surface-2:  #F8FAFC;
  --accent:     #0F766E;
  --accent-ink: #115E59;
  --accent-bg:  #F0FDFA;
  --accent-rule:#99F6E4;

  --measure:    68ch;
  --wrap:       1180px;
  --wrap-text:  720px;

  --radius:     10px;
  --radius-sm:  6px;

  --shadow-sm:  0 1px 2px rgba(15,23,42,.04);
  --shadow:     0 1px 3px rgba(15,23,42,.05), 0 12px 28px -18px rgba(15,23,42,.18);

  --sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --serif: "Palatino Linotype", Palatino, "Iowan Old Style", "Hoefler Text", Georgia, serif;
  --mono: "Cascadia Mono", Consolas, ui-monospace, "SF Mono", Menlo, monospace;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-ink); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Conteneurs
   -------------------------------------------------------------------------- */

.wrap      { max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; }
.wrap-text { max-width: var(--wrap-text); margin-inline: auto; padding-inline: 22px; }

main { flex: 1 0 auto; padding-top: 74px; }

/* --------------------------------------------------------------------------
   Titres
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 650;
  letter-spacing: -.014em;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(31px, 4.6vw, 45px);
  line-height: 1.12;
  letter-spacing: -.02em;
}

h2 {
  font-size: clamp(22px, 2.7vw, 27px);
  line-height: 1.25;
  margin-top: 52px;
  margin-bottom: 14px;
}

h3 {
  font-size: 19px;
  line-height: 1.35;
  margin-top: 34px;
  margin-bottom: 10px;
}

h4 { font-size: 16px; line-height: 1.4; }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}

.nav-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 22px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand span { color: var(--accent); }

.nav-links { display: flex; align-items: center; gap: 28px; }

.nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--accent); }

.nav-cta {
  display: inline-block;
  background: var(--ink);
  color: #fff !important;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--accent-ink); color: #fff !important; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--ink-soft);
}

.nav-mobile { display: none; border-top: 1px solid var(--rule); background: var(--surface); }
.nav-mobile.open { display: block; }
.nav-mobile a {
  display: block;
  padding: 14px 22px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-soft);
}
.nav-mobile a:last-child { border-bottom: 0; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
}

/* --------------------------------------------------------------------------
   En-tête d'article
   -------------------------------------------------------------------------- */

.page-head {
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
  padding: 46px 0 52px;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 20px;
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumb .sep { color: var(--faint); }
.breadcrumb .here { color: var(--accent); font-weight: 500; }

.lede {
  font-size: clamp(17.5px, 2.1vw, 20px);
  line-height: 1.58;
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 20px 0 0;
}

.page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 13.5px;
  color: var(--muted);
}
.page-meta b { color: var(--ink-soft); font-weight: 600; }

/* --------------------------------------------------------------------------
   Images
   Deux par page, toujours aux mêmes emplacements : bandeau après l'en-tête,
   illustration au milieu du corps. C'est une règle de parité — une page qui
   respirerait mieux que les autres fausserait la comparaison entre secteurs.

   Les dimensions sont déclarées en dur (width/height) pour éviter tout
   décalage de mise en page au chargement, qui pénalise les Core Web Vitals.
   -------------------------------------------------------------------------- */

.hero-band {
  width: 100%;
  aspect-ratio: 2 / 1;
  max-height: 380px;
  overflow: hidden;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
}
.hero-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 640px) { .hero-band { aspect-ratio: 3 / 2; max-height: 260px; } }

.fig {
  margin: 34px 0;
  max-width: var(--measure);
}
.fig img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--rule);
}
.fig figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   Corps de texte
   -------------------------------------------------------------------------- */

.prose { padding: 8px 0 60px; }

.prose p,
.prose ul,
.prose ol { max-width: var(--measure); }

.prose p { margin: 0 0 18px; }

.prose ul, .prose ol { margin: 0 0 22px; padding-left: 22px; }
.prose li { margin-bottom: 9px; }
.prose li::marker { color: var(--accent); }

.prose strong { color: var(--ink); font-weight: 600; }

.prose h2 + p, .prose h3 + p { margin-top: 0; }

.prose hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 44px 0;
  max-width: var(--measure);
}

/* Numérotation des sections — l'ordre porte une information (progression) */
.step {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.step-n {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-bg);
  border: 1px solid var(--accent-rule);
  border-radius: var(--radius-sm);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Encadrés
   -------------------------------------------------------------------------- */

.callout {
  background: var(--accent-bg);
  border: 1px solid var(--accent-rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  margin: 26px 0;
  max-width: var(--measure);
}
.callout p { margin: 0 0 10px; color: var(--ink-soft); }
.callout p:last-child { margin-bottom: 0; }
.callout-lab {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 700;
  margin-bottom: 9px;
}

.callout.neutral {
  background: var(--surface-2);
  border-color: var(--rule);
  border-left-color: var(--faint);
}
.callout.neutral .callout-lab { color: var(--muted); }

/* --------------------------------------------------------------------------
   Tableaux
   -------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  margin: 26px 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  max-width: var(--measure);
}
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 440px; }
th {
  text-align: left;
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 11px 15px;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
td { padding: 11px 15px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   Grille de cartes (hubs)
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
  margin: 32px 0;
}

.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 24px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.card:hover {
  border-color: var(--accent-rule);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.card h3 { margin: 0 0 8px; font-size: 17.5px; }
.card p { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.card-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent-bg);
  border-radius: 3px;
  padding: 3px 8px;
  margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   Section de clôture
   -------------------------------------------------------------------------- */

.closing {
  background: var(--surface-2);
  border-top: 1px solid var(--rule);
  padding: 52px 0;
}
.closing-inner {
  max-width: var(--wrap-text);
  margin-inline: auto;
  padding-inline: 22px;
}
.closing h2 { margin-top: 0; margin-bottom: 12px; }
.closing p { max-width: var(--measure); margin: 0 0 24px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
}
.btn-primary { background: var(--ink); color: #fff !important; }
.btn-primary:hover { background: var(--accent-ink); color: #fff !important; }
.btn-secondary {
  background: var(--surface);
  color: var(--ink-soft) !important;
  border-color: var(--rule);
}
.btn-secondary:hover { border-color: var(--faint); color: var(--ink) !important; }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--rule);
  padding: 56px 0 28px;
  margin-top: auto;
  font-size: 14.5px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 44px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }

.footer-brand { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.footer-brand span { color: var(--accent); }
.footer-about { color: var(--muted); font-size: 14px; line-height: 1.65; max-width: 34ch; }

.footer-grid h4 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 14px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 10px; }
.footer-grid li a { color: var(--body); text-decoration: none; font-size: 14.5px; }
.footer-grid li a:hover { color: var(--accent); text-decoration: underline; }

.footer-base {
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Bandeau de consentement

   Les deux boutons ont la même taille et la même position ; c'est le refus qui
   porte le traitement plein. La règle impose que refuser ne soit pas plus
   difficile qu'accepter, et la pratique courante fait l'inverse. Ici le défaut
   penche vers le refus, parce que la mesure d'audience complète l'étude sans en
   être l'objet : moins de données valent mieux qu'un dispositif discutable.
   -------------------------------------------------------------------------- */

.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  background: var(--surface);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -6px 28px -18px rgba(15,23,42,.4);
  transform: translateY(100%);
  transition: transform .25s ease;
}
.consent.on { transform: none; }
.consent-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 18px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
}
.consent p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--body);
  flex: 1 1 380px;
  max-width: 78ch;
}
.consent-actions { display: flex; gap: 10px; flex-shrink: 0; }
.consent-actions button {
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  padding: 11px 26px;
  min-width: 120px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.consent-actions button:hover { background: var(--surface-2); }
.consent-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.consent-actions .consent-primaire { background: var(--ink); color: #fff; }
.consent-actions .consent-primaire:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
@media (max-width: 620px) {
  .consent-actions { width: 100%; }
  .consent-actions button { flex: 1; min-width: 0; padding: 12px 10px; }
}

/* --------------------------------------------------------------------------
   Contrôle technique — page audit uniquement

   Le formulaire ne demande qu'une adresse de page et ne conserve rien. Les
   trois états ci-dessous ne sont pas des couleurs de marque : ce sont des
   couleurs sémantiques, distinctes de l'accent, et chaque état porte aussi un
   libellé pour ne pas dépendre de la seule couleur.
   -------------------------------------------------------------------------- */

.audit-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 6px;
  max-width: var(--measure);
}
.audit-form input[type="url"],
.audit-form input[type="text"] {
  flex: 1 1 320px;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
.audit-form input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.audit-form button {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #fff;
  cursor: pointer;
}
.audit-form button:hover { background: var(--accent-ink); }
.audit-note { font-size: 13.5px; color: var(--muted); max-width: var(--measure); margin: 0 0 26px; }

.audit-erreur {
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  color: #991B1B;
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin: 0 0 26px;
  max-width: var(--measure);
  font-size: 15px;
}

.audit-res { margin: 4px 0 32px; max-width: var(--measure); }
.audit-cible {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  word-break: break-all;
  margin: 0 0 14px;
}
.audit-item {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--rule-soft);
  align-items: start;
}
.audit-item:last-child { border-bottom: 1px solid var(--rule-soft); }
.audit-etat {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 3px;
  text-align: center;
  white-space: nowrap;
}
.audit-etat.ok   { color: #0F5132; background: #D1E7DD; }
.audit-etat.warn { color: #7A4B00; background: #FFF0D4; }
.audit-etat.bad  { color: #842029; background: #F8D7DA; }
.audit-item b { display: block; color: var(--ink); font-weight: 650; margin-bottom: 2px; }
.audit-item span { font-size: 14.5px; color: var(--body); }
@media (max-width: 560px) {
  .audit-item { grid-template-columns: 1fr; gap: 5px; }
  .audit-etat { justify-self: start; }
}

/* --------------------------------------------------------------------------
   Dispositif d'intention — pages /pt/ uniquement

   C'est le seul élément du site qui n'existe pas sur toutes les pages. Il est
   réservé au bras lusophone, où il sert de mesure : la proportion de lecteurs
   qui suivent le lien indique une intention commerciale que la requête seule
   ne révèle pas. Il ne collecte rien, ce qui le dispense de toute base légale.

   Il doit rester strictement identique sur les deux pages /pt/ : une variation
   ferait mesurer le dispositif au lieu du lectorat.
   -------------------------------------------------------------------------- */

.intent {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  max-width: 330px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(15,23,42,.08), 0 18px 40px -22px rgba(15,23,42,.35);
  padding: 18px 20px 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--body);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}
.intent.on { opacity: 1; transform: none; }
.intent p { margin: 0 0 12px; }
.intent a { font-weight: 600; }
.intent-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  color: var(--faint);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.intent-close:hover { color: var(--ink); background: var(--surface-2); }
.intent-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

@media (max-width: 520px) {
  .intent { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}

/* --------------------------------------------------------------------------
   Utilitaires
   -------------------------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; color: #fff; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .nav, .site-footer, .closing { display: none; }
  main { padding-top: 0; }
  body { font-size: 12pt; }
}