/* FT Lab, Code encadré
   Charte FTC : Instrument Serif, IBM Plex Sans, IBM Plex Mono, vert #1F5C52.
   Feuille de style unique, mobile first, sans dépendance. */

/* ---------- Polices auto-hébergées (SIL Open Font License) ---------- */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
}

/* ---------- Jetons ---------- */

:root {
  color-scheme: light dark;

  --fond: #f3f0e8;
  --fond-2: #e9e4d8;
  --surface: #ffffff;
  --surface-douce: #f8f6f0;
  --encre: #1a1e23;
  --texte: #3a3e43;
  --gris: #5b5f63;
  --trait: #d9d3c5;
  --trait-clair: #ece7db;
  --accent: #1f5c52;
  --accent-fonce: #123b35;
  --sur-accent: #ffffff;

  /* Blocs sombres (dispositif, contact, pied de page) */
  --inverse: #1a1e23;
  --inverse-texte: #f3f0e8;
  --inverse-doux: #c9ccd0;
  --inverse-gris: #a9adb2;
  --inverse-trait: #3a3f46;
  --inverse-accent: #9cc7bd;

  --ombre: 0 30px 60px -30px rgba(26, 30, 35, 0.25);

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --mesure: 68ch;
  --marge: clamp(1rem, 6.5vw, 6rem);
  --largeur: 90rem;
  --espace-section: clamp(4.5rem, 9vw, 7.5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #1a1e23;
    --fond-2: #20252b;
    --surface: #262b33;
    --surface-douce: #20252b;
    --encre: #f3f0e8;
    --texte: #c9ccd0;
    --gris: #a9adb2;
    --trait: #3a3f46;
    --trait-clair: #30353c;
    --accent: #9cc7bd;
    --accent-fonce: #c3ded7;
    --sur-accent: #1a1e23;

    --inverse: #123b35;
    --inverse-texte: #f3f0e8;
    --inverse-doux: #dcebe7;
    --inverse-gris: #c3ded7;
    --inverse-trait: #2a5a52;
    --inverse-accent: #9cc7bd;

    --ombre: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  }
}

/* ---------- Base ---------- */

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1 0 auto;
  width: 100%;
}

@media (min-width: 48em) {
  body {
    font-size: 1.125rem;
  }
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
blockquote,
figure {
  margin: 0;
}

h1,
h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.75rem, 7vw, 5.25rem);
  line-height: 1.02;
}

h2 {
  font-size: clamp(2.375rem, 4.6vw, 3.75rem);
  line-height: 1.08;
}

h1 em,
h2 em {
  color: var(--accent);
}

h3,
h4 {
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

h3 {
  font-size: 1.25rem;
}

p,
li,
dd {
  max-width: var(--mesure);
}

a {
  color: var(--accent);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--accent-fonce);
}

code {
  font-family: var(--mono);
  font-size: 0.88em;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.visuellement-masque {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lien-evitement {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: 0.5rem 0.875rem;
  background: var(--surface);
  color: var(--encre);
}

.lien-evitement:focus {
  top: 1rem;
}

.wrap {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.mono {
  font-family: var(--mono);
}

.note {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--accent);
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.5rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.btn-plein {
  background: var(--accent);
  color: var(--sur-accent);
}

.btn-plein:hover {
  background: var(--accent-fonce);
  color: var(--sur-accent);
}

.btn-contour {
  border-color: var(--encre);
  color: var(--encre);
}

.btn-contour:hover {
  background: var(--encre);
  color: var(--fond);
}

.btn-clair {
  background: var(--inverse-texte);
  color: #1a1e23;
}

.btn-clair:hover {
  background: var(--inverse-accent);
  color: #1a1e23;
}

.btn-petit {
  min-height: 2.75rem;
  padding: 0.375rem 1.375rem;
  font-size: 1rem;
}

/* ---------- En-tête ---------- */

.entete {
  border-bottom: 1px solid var(--trait);
  background: var(--fond);
}

.entete__rangee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem 1rem;
  padding-top: 0.875rem;
}

.marque {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--encre);
  text-decoration: none;
}

.marque:hover {
  color: var(--encre);
}

.marque img {
  width: 2.625rem;
  height: 2.625rem;
}

.marque-nom {
  display: block;
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1;
}

.marque-sous {
  display: block;
  white-space: nowrap;
  margin-top: 0.125rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--gris);
}

@media (max-width: 25.99em) {
  .marque-sous__suite {
    display: none;
  }

  .entete .btn-petit {
    padding-inline: 1rem;
    font-size: 0.9375rem;
  }
}

.nav {
  order: 3;
  flex-basis: calc(100% + 2 * var(--marge));
  margin-inline: calc(var(--marge) * -1);
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid var(--trait);
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav__liste {
  display: flex;
  gap: 1.5rem;
  padding: 0 var(--marge);
  list-style: none;
  white-space: nowrap;
}

.nav__liste li {
  max-width: none;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--encre);
  font-size: 0.9375rem;
  text-decoration: none;
}

.nav a:hover {
  color: var(--accent);
}

@media (min-width: 64em) {
  html {
    scroll-padding-top: 6rem;
  }

  .entete {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--fond) 92%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .entete__rangee {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2rem;
    padding-block: 0.875rem;
  }

  .nav {
    order: 0;
    margin: 0;
    border: 0;
    justify-self: end;
  }

  .nav__liste {
    gap: 2rem;
    padding: 0;
  }

  .nav a {
    font-size: 1rem;
  }
}

/* ---------- Sections ---------- */

.section {
  padding-block: var(--espace-section);
}

.section--alt {
  background: var(--fond-2);
}

.entete-section {
  display: grid;
  gap: 1.125rem;
  max-width: 54rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.entete-section p {
  color: var(--texte);
  font-size: clamp(1.125rem, 1.6vw, 1.25rem);
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  gap: 3.5rem;
  align-items: center;
  padding-block: clamp(3.5rem, 9vw, 7.5rem) var(--espace-section);
}

.hero__texte {
  display: grid;
  gap: 1.75rem;
}

.hero__texte > p {
  max-width: 35rem;
  color: var(--texte);
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.55;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}

@media (min-width: 64em) {
  .hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(3rem, 6vw, 5rem);
  }
}

/* ---------- Visuel signature : le parcours d'une modification ---------- */

.fenetre {
  overflow: hidden;
  border: 1px solid var(--trait);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: var(--ombre);
}

.fenetre__barre {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--trait-clair);
}

.fenetre__barre i {
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: 50%;
  background: var(--trait);
}

.fenetre__barre span {
  margin-left: 0.75rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--gris);
}

.parcours {
  --pas: 420ms;
  --depart: 400ms;
  --marque: 1.125rem;

  padding: 1.5rem 1.25rem 1.25rem;
}

@media (min-width: 30em) {
  .parcours {
    padding: 1.75rem 1.75rem 1.5rem;
  }
}

.parcours__liste {
  position: relative;
  display: grid;
  gap: 1.25rem;
  padding: 0;
  list-style: none;
}

/* Rail vertical, et son remplissage qui progresse porte après porte. */
.parcours__liste::before,
.parcours__liste::after {
  content: "";
  position: absolute;
  top: 0.75rem;
  bottom: 2.5rem;
  left: calc(var(--marque) / 2 - 1px);
  width: 2px;
  background: var(--trait-clair);
}

.parcours__liste::after {
  background: var(--accent);
  transform-origin: top;
}

.porte {
  position: relative;
  display: grid;
  grid-template-columns: var(--marque) minmax(0, 1fr);
  column-gap: 1rem;
  max-width: none;
}

.porte__marque {
  position: relative;
  z-index: 1;
  width: var(--marque);
  height: var(--marque);
  margin-top: 0.2rem;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--surface);
}

.porte--humain .porte__marque {
  border-color: var(--encre);
  border-radius: 2px;
  background: var(--encre);
  transform: rotate(45deg) scale(0.84);
}

.porte__nom {
  display: block;
  font-weight: 600;
  line-height: 1.35;
}

.porte__type {
  display: block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--gris);
}

.porte--humain .porte__type {
  color: var(--encre);
  font-weight: 500;
}

.envs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.375rem;
  margin-top: 0.75rem;
  padding: 0;
  list-style: none;
}

.env {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.375rem;
  padding: 0.5rem 0.125rem;
  border: 1px solid var(--trait);
  border-radius: 0.5rem;
  background: var(--surface-douce);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-align: center;
}

.env--app {
  border-color: var(--encre);
}

.env__humain {
  width: 0.5625rem;
  height: 0.5625rem;
  margin-top: 0.125rem;
  border-radius: 1px;
  background: var(--encre);
  transform: rotate(45deg);
}

.envs__note {
  margin-top: 0.5rem;
  color: var(--gris);
  font-size: 0.8125rem;
}

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.5rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--trait-clair);
  list-style: none;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--gris);
}

.legende li {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}

.legende__rond,
.legende__losange {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--accent);
  border-radius: 50%;
}

.legende__losange {
  border-radius: 1px;
  background: var(--encre);
  transform: rotate(45deg) scale(0.84);
}

@media (min-width: 30em) {
  .env {
    font-size: 0.75rem;
  }
}

/* Allumage unique, porte par porte, au chargement.
   Avec prefers-reduced-motion, tout est affiché allumé d'emblée. */
@media (prefers-reduced-motion: no-preference) {
  .parcours__liste::after {
    animation: rail calc(var(--pas) * 4) var(--depart) linear both;
  }

  .porte {
    animation: allumer 400ms ease-out both;
    animation-delay: calc(var(--depart) + var(--i) * var(--pas));
  }

  .porte:nth-child(1) { --i: 0; }
  .porte:nth-child(2) { --i: 1; }
  .porte:nth-child(3) { --i: 2; }
  .porte:nth-child(4) { --i: 3; }
  .porte:nth-child(5) { --i: 4; }

  .porte__marque {
    animation: marque 400ms ease-out both;
    animation-delay: inherit;
  }

  .env {
    animation: allumer-env 320ms ease-out both;
  }

  .env:nth-child(1) { animation-delay: calc(var(--depart) + 4.5 * var(--pas)); }
  .env:nth-child(2) { animation-delay: calc(var(--depart) + 5 * var(--pas)); }
  .env:nth-child(3) { animation-delay: calc(var(--depart) + 5.5 * var(--pas)); }
  .env:nth-child(4) { animation-delay: calc(var(--depart) + 6 * var(--pas)); }
}

@keyframes rail {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes allumer {
  from { opacity: 0.3; }
  to { opacity: 1; }
}

@keyframes marque {
  from {
    border-color: var(--trait);
    background: var(--surface);
  }
}

@keyframes allumer-env {
  from {
    opacity: 0.3;
    border-color: var(--trait-clair);
  }
}

/* ---------- Le principe ---------- */

.citation {
  max-width: 58rem;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.citation p {
  max-width: none;
  font-family: var(--serif);
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.1;
  text-wrap: balance;
}

.citation p em {
  color: var(--accent);
}

.piliers {
  display: grid;
  gap: 2.25rem;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--encre);
  list-style: none;
}

.piliers li {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding-top: 1.75rem;
}

.piliers p {
  color: var(--texte);
}

@media (min-width: 52em) {
  .piliers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

/* ---------- Pour vous : onglets ---------- */

.onglets__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 2.75rem;
}

.onglets__liste[hidden] {
  display: none;
}

.onglet {
  min-height: 3rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--surface);
  color: var(--encre);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
}

.onglet:hover {
  border-color: var(--encre);
}

.onglet[aria-selected="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--sur-accent);
}

@media (min-width: 44em) {
  .onglets__liste {
    display: flex;
    flex-wrap: wrap;
  }

  .onglet {
    padding-inline: 1.5rem;
    font-size: 1rem;
  }
}

.panneau {
  display: grid;
  gap: 2.25rem;
}

/* Sans JavaScript, les quatre profils s'affichent l'un sous l'autre. */
.panneau + .panneau {
  margin-top: 4.5rem;
}

.onglets--actifs .panneau + .panneau {
  margin-top: 0;
}

.onglets--actifs .panneau__titre {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.panneau__titre {
  font-family: var(--serif);
  font-size: clamp(1.875rem, 3.4vw, 2.5rem);
  font-weight: 400;
  line-height: 1.1;
}

.panneau[hidden] {
  display: none;
}

.panneau:focus-visible {
  outline-offset: 8px;
}

.panneau__intro {
  color: var(--texte);
  font-size: clamp(1.125rem, 1.6vw, 1.25rem);
}

.points {
  display: grid;
  gap: 2rem 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.points li {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--trait);
}

.points h4 {
  font-size: 1.1875rem;
}

.points p {
  color: var(--texte);
}

@media (min-width: 48em) {
  .points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 72em) {
  .points--trois {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.etapes {
  display: grid;
  gap: 2rem 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}

.etapes li {
  display: grid;
  gap: 0.375rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--trait);
  counter-increment: etape;
}

.etapes li::before {
  content: "0" counter(etape);
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--accent);
}

.etapes h4 {
  font-size: 1.1875rem;
}

.etapes p {
  color: var(--texte);
}

@media (min-width: 48em) {
  .etapes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 72em) {
  .etapes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.jamais {
  display: grid;
  gap: 1rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: 1rem;
  background: var(--inverse);
  color: var(--inverse-texte);
}

.jamais h4 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 400;
  line-height: 1.1;
}

.jamais ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--inverse-doux);
}

.jamais li {
  position: relative;
  padding-left: 1.75rem;
}

.jamais li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0.125rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 1px;
  background: var(--inverse-accent);
  transform: rotate(45deg);
}

.lien-fort {
  font-weight: 600;
}

/* ---------- Le dispositif (bloc sombre) ---------- */

.inverse {
  background: var(--inverse);
  color: var(--inverse-texte);
  --accent: var(--inverse-accent);
}

.inverse .entete-section p {
  color: var(--inverse-doux);
}

.inverse h2 em {
  color: var(--inverse-accent);
}

.inverse :focus-visible {
  outline-color: var(--inverse-texte);
}

.couches {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.couche {
  display: grid;
  gap: 1.25rem;
  padding-block: 2.25rem;
  border-top: 1px solid var(--inverse-trait);
  max-width: none;
}

.couche:last-child {
  border-bottom: 1px solid var(--inverse-trait);
}

.couche__tete {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.couche__tete .note {
  color: var(--inverse-gris);
}

.couche__tete h3 {
  font-size: clamp(1.375rem, 2.4vw, 1.625rem);
  font-weight: 500;
}

.fichier {
  justify-self: start;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--inverse-trait);
  border-radius: 0.375rem;
  color: var(--inverse-accent);
  font-family: var(--mono);
  font-size: 0.875rem;
}

.couche__regles {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--inverse-doux);
}

.couche__regles li {
  position: relative;
  padding-left: 1.5rem;
}

.couche__regles li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 0.75rem;
  height: 1px;
  background: var(--inverse-accent);
}

.couche__regles code {
  color: var(--inverse-texte);
}

@media (min-width: 56em) {
  .couche {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    gap: 3rem;
  }
}

.controles {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-self: start;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.controles li {
  padding: 0.375rem 1rem;
  border: 1px solid var(--inverse-accent);
  border-radius: 999px;
  color: var(--inverse-texte);
  font-size: 0.9375rem;
}

.controles li.controle--humain {
  background: var(--inverse-texte);
  border-color: var(--inverse-texte);
  color: #1a1e23;
  font-weight: 500;
}

/* ---------- Les craintes : tableau ---------- */

.tableau-defilant {
  overflow-x: auto;
  border: 1px solid var(--trait);
  border-radius: 1rem;
  background: var(--surface);
}

.tableau-defilant:focus-visible {
  outline-offset: 2px;
}

.craintes {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-size: 1rem;
}

.craintes caption {
  padding: 1.25rem 1.5rem 0;
  color: var(--gris);
  font-family: var(--mono);
  font-size: 0.8125rem;
  text-align: left;
}

.craintes th,
.craintes td {
  padding: 1.125rem 1.5rem;
  border-bottom: 1px solid var(--trait-clair);
  text-align: left;
  vertical-align: top;
}

.craintes tbody tr:last-child > * {
  border-bottom: 0;
}

.craintes thead th {
  border-bottom: 1px solid var(--encre);
  color: var(--gris);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
}

.craintes tbody th {
  width: 30%;
  font-weight: 600;
}

.craintes td {
  color: var(--texte);
}

.craintes td:last-child {
  width: 26%;
  color: var(--accent);
  font-weight: 500;
}

.indice-defilement {
  margin-top: 0.75rem;
  color: var(--gris);
  font-family: var(--mono);
  font-size: 0.8125rem;
}

@media (min-width: 52em) {
  .indice-defilement {
    display: none;
  }
}

/* ---------- Engagements et limites ---------- */

.engagements {
  display: grid;
  gap: 1.25rem;
}

.engagements > div {
  display: grid;
  align-content: start;
  gap: 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: 1rem;
  background: var(--surface);
}

.engagements h3 {
  font-family: var(--serif);
  font-size: clamp(1.875rem, 3.4vw, 2.5rem);
  font-weight: 400;
  line-height: 1.1;
}

.engagements ul {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.engagements li {
  position: relative;
  padding-left: 2rem;
  color: var(--texte);
}

.engagements__oui li::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0.25rem;
  width: 0.4375rem;
  height: 0.8125rem;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.engagements__limites li::before {
  content: "";
  position: absolute;
  top: 0.8em;
  left: 0;
  width: 0.875rem;
  height: 2px;
  background: var(--gris);
}

@media (min-width: 52em) {
  .engagements {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Contact ---------- */

.contact {
  display: grid;
  justify-items: start;
  gap: 1.75rem;
}

.contact h2 {
  font-size: clamp(2.625rem, 5vw, 4.5rem);
  line-height: 1.05;
}

.contact p {
  color: var(--inverse-doux);
  font-size: clamp(1.125rem, 1.6vw, 1.25rem);
}

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

.pied {
  padding-block: 2rem;
  border-top: 1px solid var(--inverse-trait);
  background: var(--inverse);
  color: var(--inverse-gris);
  font-size: 0.875rem;
}

.pied__contenu {
  display: grid;
  gap: 1rem;
}

.pied p {
  max-width: none;
}

.pied a {
  color: var(--inverse-texte);
}

.pied a:hover {
  color: var(--inverse-accent);
}

.pied :focus-visible {
  outline-color: var(--inverse-texte);
}

@media (min-width: 56em) {
  .pied__contenu {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

/* ---------- Pages secondaires ---------- */

.page {
  padding-block: clamp(3.5rem, 8vw, 6rem) var(--espace-section);
}

.page h1 {
  margin-bottom: 1.25rem;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
}

.page__intro {
  margin-bottom: 3rem;
  color: var(--texte);
  font-size: clamp(1.125rem, 1.6vw, 1.25rem);
}

.mentions {
  max-width: 56rem;
}

.mentions section {
  display: grid;
  gap: 1rem;
  padding-block: 2.25rem;
  border-top: 1px solid var(--trait);
}

.mentions h2 {
  font-size: clamp(1.875rem, 3.4vw, 2.5rem);
}

.mentions p {
  color: var(--texte);
}

.mentions dl {
  display: grid;
  gap: 0.25rem 2rem;
  margin: 0;
}

.mentions dt {
  font-weight: 600;
}

.mentions dd {
  margin: 0 0 0.875rem;
  color: var(--texte);
}

@media (min-width: 40em) {
  .mentions dl {
    grid-template-columns: 15rem minmax(0, 1fr);
  }

  .mentions dd {
    margin: 0;
  }
}

mark {
  padding: 0.05em 0.35em;
  border-radius: 0.25rem;
  background: #f4d9a6;
  color: #1a1e23;
  font-family: var(--mono);
  font-size: 0.875em;
}

.erreur {
  display: grid;
  justify-items: start;
  gap: 1.5rem;
}

/* ---------- Impression ---------- */

@media print {
  .entete,
  .actions,
  .onglets__liste {
    display: none !important;
  }

  .panneau[hidden] {
    display: grid !important;
  }

  .inverse,
  .pied {
    background: none;
    color: #000;
  }
}