/* ==========================================================================
   Jurames — feuille de style unique.

   Reproduction de la maquette Figma Make (design/figma-make/src/App.tsx) :
   imprimé juridique, numérotation en articles, palette forêt / sauge / crème,
   filets fins, formes flottantes en arrière-plan. Polices système uniquement :
     - Playfair Display  -> Georgia (titres, citations, valeurs) ;
     - Source Sans 3     -> system-ui (texte courant, boutons, menu) ;
     - JetBrains Mono    -> ui-monospace (numéros d’article, étiquettes).
   Les corps sont légèrement réduits (Georgia et Segoe UI sont plus larges
   que les polices d’origine) et la graisse 900 devient 700.

   Mouvement : les règles sous `.js-motion` ne s’appliquent que si
   public/motion.js s’est exécuté. Sans JavaScript, ou avec
   prefers-reduced-motion, tout est visible d’emblée.
   ========================================================================== */

:root {
  /* Palette exacte de la maquette */
  --cream: #f7f3ee;
  --cream-dark: #ede8e1;
  --white: #fdfbf9;
  --forest: #1a2e25;
  --forest-mid: #2d4a3e;
  --forest-light: #3b514b;
  --sage: #8faf9f;
  --sage-pale: #c8ddd5;
  --text: #1a2e25;
  --text-mid: #3a4a40;
  /* Le gris #6b7d72 de la maquette ne tient pas 4,5:1 sur crème ; il est
     assombri d’un cran (5,1:1 sur crème, 4,65:1 sur crème foncé). */
  --text-light: #5a6b60;
  --gold: #b8960c;
  --rule: rgba(26, 46, 37, 0.1);
  --rule-dark: rgba(255, 255, 255, 0.08);
  --todo-bg: #efe2c6;

  /* Typographie système */
  --font-display: Georgia, 'Times New Roman', Times, serif;
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* Grille : une seule marge horizontale pour tout le site (logo, texte du
     héros, sections), un seul espacement vertical entre sections, la hauteur
     de la barre de navigation et le dégagement sous elle. */
  --wrap: 1600px;
  --margin: clamp(1.25rem, 6vw, 4.5rem);
  --gutter: var(--margin);
  --section-y: 4.5rem;
  --nav-h: 3.5rem;
  --nav-clear: 4rem;
  --maxim-indent: 1rem;

  /* Angles arrondis : éléments cliquables, puis blocs de fond et images
     (rayon un peu plus grand). Les blocs de fond sont rentrés de
     --block-inset ; leur grille garde l’aplomb commun. */
  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 10px;
  --radius-block: 12px;
  --block-inset: 0.5rem;

  /* Mouvement */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-card: 0 4px 20px rgba(26, 46, 37, 0.06);
  --shadow-card-hover: 0 12px 40px rgba(26, 46, 37, 0.12);
  --shadow-btn: 0 8px 24px rgba(26, 46, 37, 0.25);
}

@media (min-width: 480px) {
  :root {
    --maxim-indent: 1.25rem;
  }
}

@media (min-width: 768px) {
  :root {
    --block-inset: 0.75rem;
  }
}

@media (min-width: 900px) {
  :root {
    --section-y: 7rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --nav-h: 4.25rem;
    --nav-clear: 4.75rem;
  }
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--cream);
  color-scheme: light;
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  /* Aucun mot long ne déborde (hérité par tout le texte) ; les formes
     flottantes et les cartes inclinées ne créent jamais de défilement
     horizontal. */
  overflow-wrap: break-word;
  overflow-x: clip;
}

/* Menu mobile ouvert : la page ne défile plus derrière le panneau. */

html.menu-open,
html.menu-open body {
  overflow: hidden;
}

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

/* Titres et citations : lignes équilibrées, pas de mot isolé en fin de titre. */

h1,
h2,
h3,
.maxim p,
.band__quote p,
.figure__quote,
.panel__headline {
  text-wrap: balance;
}

/* Texte lu par les lecteurs d’écran seulement (libellé du bouton du menu). */

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

button {
  font: inherit;
}

a {
  color: inherit;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(26, 46, 37, 0.2);
  border-radius: 3px;
}

:focus-visible {
  outline: 2px solid var(--forest-light);
  outline-offset: 3px;
}

address {
  font-style: normal;
}

img,
svg {
  display: block;
}

mark.a-fournir {
  background: var(--todo-bg);
  color: var(--forest);
  padding: 0 0.3em;
  font-family: var(--font-sans);
  font-size: 0.85em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  overflow-wrap: anywhere;
}

/* Colonne de page : grille unique, gouttières latérales. */

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Blocs de fond (bande marine, bandeau, pré-lancement, en-têtes sombres,
   feuilles blanches) : angles arrondis, rentrés de
   --block-inset. Leur colonne compense le retrait : le texte reste sur
   l’aplomb commun. Deux blocs qui se suivent sont séparés du même retrait. */

.problem,
.band,
.cta,
.page-head--dark,
.hero--dark,
.sheet {
  margin-inline: var(--block-inset);
  border-radius: var(--radius-block);
  overflow: hidden;
}

:is(.problem, .band, .cta, .page-head--dark, .hero--dark, .sheet) .wrap {
  padding-inline: calc(var(--margin) - var(--block-inset));
}

:is(.problem, .band, .cta, .page-head--dark, .hero--dark, .sheet) + :is(.problem, .band, .cta, .page-head--dark, .hero--dark, .sheet) {
  margin-top: var(--block-inset);
}

/* --------------------------------------------------------------------------
   Appareil typographique : capitales espacées, numéros d’article
   -------------------------------------------------------------------------- */

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.mono--kicker {
  font-size: 0.68rem;
  color: var(--forest-light);
  letter-spacing: 0.2em;
}

.art {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--forest-light);
}

.art--dark {
  color: var(--sage);
}

.art--block {
  display: block;
  margin-bottom: 1rem;
}

.art--block-lg {
  margin-bottom: 1.5rem;
}

.art--rule {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  letter-spacing: 0.15em;
  margin-bottom: 1.25rem;
}

.art__rule {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
}

/* --------------------------------------------------------------------------
   Boutons et liens d’action (angles arrondis)
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
  padding: 0.9rem 2.2rem;
  min-height: 2.75rem;
  max-width: 100%;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.btn--primary {
  background: var(--forest);
  color: var(--cream);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn);
}

.btn--wide {
  padding-inline: 2.5rem;
}

.btn--ghost {
  background: transparent;
  color: var(--forest);
  border-color: var(--forest);
  font-weight: 500;
  padding: 0.9rem 2rem;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--forest);
  color: var(--cream);
}

.btn--nav {
  background: var(--forest);
  color: var(--cream);
  font-size: 0.85rem;
  padding: 0.6rem 1.4rem;
}

.btn--nav:hover,
.btn--nav:focus-visible {
  background: var(--forest-mid);
  transform: translateY(-1px);
}

.btn--sage {
  background: var(--sage);
  color: var(--forest);
  padding: 0.85rem 2rem;
}

.btn--sage:hover,
.btn--sage:focus-visible {
  background: var(--cream);
  transform: translateY(-1px);
}

.btn--outline {
  background: none;
  border: 1px solid var(--forest);
  color: var(--forest);
  font-weight: 500;
  font-size: 0.8rem;
  padding: 0.7rem 1.5rem;
  letter-spacing: 0.04em;
}

.btn--outline-fill {
  background: var(--forest);
  color: var(--cream);
}

.btn--outline:hover:not([disabled]),
.btn--outline:focus-visible:not([disabled]) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn);
}

.btn--outline[disabled] {
  background: none;
  border-color: var(--rule);
  color: var(--text-light);
  cursor: default;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--forest);
  text-decoration: none;
  min-height: 2.75rem;
  border-radius: var(--radius);
  transition: gap 0.2s ease;
}

.link-arrow:hover,
.link-arrow:focus-visible {
  gap: 1rem;
}

.link-arrow__icon {
  font-size: 1rem;
}

.tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--forest);
  border: 1px solid var(--forest);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.75rem;
  letter-spacing: 0.06em;
}

.badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--forest-light);
  border: 1px solid var(--forest-light);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.6rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  justify-self: start;
}

/* --------------------------------------------------------------------------
   Lien d’évitement, barre de progression
   -------------------------------------------------------------------------- */

.skip-link {
  position: fixed;
  left: 1rem;
  top: -100%;
  z-index: 300;
  padding: 0.75rem 1rem;
  background: var(--forest);
  color: var(--cream);
  border-radius: var(--radius);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.85rem;
}

.skip-link:focus {
  top: 1rem;
}

.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 200;
  background: var(--cream-dark);
}

.progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--forest-light), var(--sage));
  transition: width 0.1s linear;
}

/* --------------------------------------------------------------------------
   Navigation fixe : transparente, puis voilée dès que l’on défile. Une seule
   ligne à toute largeur : le logo à gauche ; dès 1024 px les cinq entrées
   centrées et le bouton d’accès à droite ; en dessous, un bouton hamburger
   qui ouvre les entrées et le bouton d’accès en panneau plein écran.
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  top: 2px;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.4s ease,
    border-color 0.4s ease,
    backdrop-filter 0.4s ease;
}

.nav.is-scrolled {
  background: rgba(247, 243, 238, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--rule);
}

.nav__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--nav-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--forest);
  text-decoration: none;
  min-height: 2.75rem;
  transition: color 0.3s ease;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Le panneau regroupe les entrées et le bouton d’accès. Dans la barre (dès
   1024 px), il est transparent à la mise en page. */

.nav__panel {
  display: contents;
}

.nav__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  min-height: 2.75rem;
  padding: 0.4rem 0.6rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text-light);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color 0.2s ease;
}

.nav__link:hover {
  color: var(--forest);
}

.nav__link[aria-current='page'] {
  color: var(--forest);
  font-weight: 600;
}

.nav__link[aria-current='page']::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: var(--forest-light);
  border-radius: 1px;
}

/* Numéro d’entrée : visible dans le panneau mobile seulement. */

.nav__folio {
  display: none;
}

/* Bouton hamburger : trois traits qui deviennent une croix à l’ouverture.
   Affiché sous 1024 px. */

.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.6rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--forest);
  cursor: pointer;
  transition: color 0.3s ease;
}

.nav__toggle-box {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
}

.nav__toggle-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition:
    transform 0.3s var(--ease-out),
    opacity 0.2s ease;
}

.nav__toggle-line:nth-child(1) {
  top: 0;
}

.nav__toggle-line:nth-child(2) {
  top: 7px;
}

.nav__toggle-line:nth-child(3) {
  top: 14px;
}

.nav.is-open .nav__toggle-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav.is-open .nav__toggle-line:nth-child(2) {
  opacity: 0;
}

.nav.is-open .nav__toggle-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Sous 1024 px : la barre ne contient que le logo et le bouton hamburger.
   Les entrées et le bouton d’accès forment un panneau plein écran sous la
   barre, ouvert par la classe is-open (motion.js) ; les entrées s’empilent
   en grands caractères, le bouton d’accès reste en bas. Cette règle ne
   dépend d’aucune classe posée par le script : le repli sans JavaScript est
   dans public/nojs.css, chargé par <noscript>. */

@media (max-width: 1023px) {
  .nav__toggle {
    display: inline-flex;
  }

  .nav__panel {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 0;
    flex-direction: column;
    background: var(--cream);
    padding: calc(var(--nav-h) + 2px + 1.5rem) var(--margin)
      max(1.5rem, env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav.is-open {
    background: var(--cream);
    border-bottom-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nav.is-open .nav__panel {
    display: flex;
    animation: menuIn 0.35s var(--ease-out) both;
  }

  /* La barre reste opaque au-dessus du panneau : quand celui-ci défile
     (paysage), les entrées passent dessous sans chevaucher le logo. */
  .nav.is-open .nav__inner {
    background: var(--cream);
    box-shadow: 0 1px 0 var(--rule);
  }

  .nav__panel .nav__links {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    border-top: 1px solid var(--rule);
  }

  .nav__panel .nav__link {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    white-space: normal;
    min-height: 3.75rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 6.5vw, 2rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    color: var(--forest);
  }

  .nav__panel .nav__link::after {
    display: none;
  }

  .nav__panel .nav__folio {
    display: inline-block;
    flex: 0 0 2.4em;
    font-size: 0.68rem;
    color: var(--forest-light);
    letter-spacing: 0.2em;
  }

  .nav__panel .nav__link[aria-current='page'] .nav__label {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--sage);
  }

  .nav__panel .btn--nav {
    width: 100%;
    margin-top: 2rem;
    min-height: 3.25rem;
    font-size: 1rem;
    padding: 1rem 1.5rem;
    white-space: normal;
  }

  /* Le bouton d’accès rejoint le bas du panneau quand la hauteur le permet. */
  .nav__panel .nav__links {
    margin-bottom: auto;
  }
}

@keyframes menuIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Dès 1024 px : entrées centrées entre le logo et le bouton d’accès, avec
   un espacement qui suit la largeur de la fenêtre. */

@media (min-width: 1024px) {
  .nav__links {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(0.9rem, 2.2vw, 2.5rem);
  }

  .nav__link {
    padding: 0.45rem 0.6rem;
  }
}

/* Sur les pages à en-tête sombre, la navigation s’imprime en clair tant
   qu’elle est transparente (ni voilée, ni ouverte). */

.nav--on-dark:not(.is-scrolled):not(.is-open) .brand,
.nav--on-dark:not(.is-scrolled):not(.is-open) .nav__toggle,
.nav--on-dark:not(.is-scrolled):not(.is-open) .nav__link:hover,
.nav--on-dark:not(.is-scrolled):not(.is-open) .nav__link[aria-current='page'] {
  color: var(--cream);
}

.nav--on-dark:not(.is-scrolled):not(.is-open) .nav__link {
  color: var(--sage-pale);
}

.nav--on-dark:not(.is-scrolled):not(.is-open) .nav__link[aria-current='page']::after {
  background: var(--sage);
}

.nav--on-dark:not(.is-scrolled):not(.is-open) .btn--nav {
  background: var(--sage);
  color: var(--forest);
}

.nav--on-dark:not(.is-scrolled):not(.is-open) .btn--nav:hover,
.nav--on-dark:not(.is-scrolled):not(.is-open) .btn--nav:focus-visible {
  background: var(--cream);
}

.nav--on-dark:not(.is-scrolled):not(.is-open) :focus-visible {
  outline-color: var(--sage);
}

/* --------------------------------------------------------------------------
   Formes flottantes en arrière-plan
   -------------------------------------------------------------------------- */

.shapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--forest);
  --sh-a: rgba(26, 46, 37, 0.05);
  --sh-b: rgba(59, 81, 75, 0.07);
  --dots: 0.06;
}

.shapes--dark {
  color: var(--sage);
  --sh-a: rgba(255, 255, 255, 0.04);
  --sh-b: rgba(143, 175, 159, 0.08);
  --dots: 0.07;
}

.shape {
  position: absolute;
}

.shape--a {
  top: -5%;
  right: -8%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  border: 1px solid var(--sh-b);
  animation: floatA 18s ease-in-out infinite;
}

.shape--b {
  top: 10%;
  right: 2%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid var(--sh-a);
  animation: floatA 14s ease-in-out infinite reverse;
}

.shape--c {
  bottom: 5%;
  left: -5%;
  width: 400px;
  height: 400px;
  border: 1px solid var(--sh-b);
  transform: rotate(25deg);
  animation: floatB 20s ease-in-out infinite;
}

.shape--d {
  top: 35%;
  left: 8%;
  width: 120px;
  height: 120px;
  border: 1px solid var(--sh-a);
  transform: rotate(45deg);
  animation: floatB 12s ease-in-out infinite reverse;
}

.shape--dots {
  right: 5%;
  bottom: 15%;
  opacity: var(--dots);
}

/* --------------------------------------------------------------------------
   Planches : emplacements réservés aux images, traités comme des gravures
   (fond tonal, hachures fines, cadre intérieur, formes, marque en filigrane)
   -------------------------------------------------------------------------- */

.plate {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: var(--radius-block);
}

.plate--light {
  background: linear-gradient(160deg, #ede8e1 0%, #e2dbd1 100%);
  --pl-line: rgba(26, 46, 37, 0.07);
  --pl-frame: rgba(26, 46, 37, 0.18);
  --pl-shape: rgba(26, 46, 37, 0.1);
  --pl-mark: rgba(26, 46, 37, 0.08);
}

.plate--dark {
  background: linear-gradient(160deg, #2d4a3e 0%, #1a2e25 100%);
  --pl-line: rgba(255, 255, 255, 0.05);
  --pl-frame: rgba(143, 175, 159, 0.28);
  --pl-shape: rgba(143, 175, 159, 0.16);
  --pl-mark: rgba(143, 175, 159, 0.14);
}

.plate--deep {
  background: linear-gradient(160deg, #22392f 0%, #12211a 100%);
}

.plate--fill {
  position: absolute;
  inset: 0;
}

.plate--16x9 {
  aspect-ratio: 16 / 9;
}

.plate--4x3 {
  aspect-ratio: 4 / 3;
}

.plate::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--pl-line) 6px 7px);
}

.plate__frame {
  position: absolute;
  inset: 14px;
  border: 1px solid var(--pl-frame);
}

.plate__ring {
  position: absolute;
  right: -12%;
  top: -18%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--pl-shape);
}

.plate__square {
  position: absolute;
  left: -8%;
  bottom: -10%;
  width: 34%;
  aspect-ratio: 1;
  border: 1px solid var(--pl-shape);
  transform: rotate(25deg);
}

.plate__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(48%, 260px);
  height: auto;
  transform: translate(-50%, -50%);
  color: var(--pl-mark);
}

/* --------------------------------------------------------------------------
   Photos de la maquette (WebP + repli JPEG, voir components/Ui.tsx), avec
   les filtres de la maquette
   -------------------------------------------------------------------------- */

.photo {
  display: block;
}

.photo img {
  display: block;
  width: 100%;
  height: auto;
}

.photo--fill {
  position: absolute;
  inset: 0;
}

.photo--fill img {
  height: 100%;
  object-fit: cover;
}

.photo--hero img {
  filter: saturate(0.7) brightness(0.85);
  /* Image retournée horizontalement (effet miroir). */
  transform: scaleX(-1);
}

.photo--fonction img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.7);
}

.photo--conformite img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(0.6);
}

.photo--contact img {
  filter: saturate(0.4) brightness(0.35);
}

/* --------------------------------------------------------------------------
   Héros (accueil, contact) : deux moitiés égales dès 900 px, texte centré
   verticalement dans sa moitié, image collée au bord droit. En dessous,
   une colonne : le texte, puis l’image dans les marges de la page.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--cream);
  overflow: hidden;
}

.hero--dark {
  background: var(--forest);
}

.hero__inner {
  position: relative;
  z-index: 1;
}

/* Sur mobile, la hauteur suit le contenu : dégagement sous la barre, puis
   le texte, puis l’image. La pleine hauteur de fenêtre n’arrive qu’à 900 px. */

.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(var(--nav-clear) + 2.5rem) 3rem;
}

.hero__art {
  position: relative;
  height: 62vw;
  max-height: 420px;
  margin: 0 var(--margin) var(--section-y);
  border-radius: var(--radius-block);
  overflow: hidden;
}

.hero__parallax {
  position: absolute;
  inset: 0;
  transform: scale(1.06);
  transition: transform 0.8s var(--ease-out);
}

.hero__veil {
  display: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #f7f3ee 0%, rgba(247, 243, 238, 0.4) 40%, transparent 100%);
}

.hero--dark .hero__veil {
  background: linear-gradient(to right, var(--forest) 0%, rgba(26, 46, 37, 0.5) 60%, transparent 100%);
}

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

.hero__kicker-rule {
  flex: 0 0 auto;
  width: 40px;
  height: 1px;
  background: var(--forest-light);
}

/* Chaque partie de la rubrique reste entière : le retour à la ligne tombe
   sur le séparateur. */

.kicker__part {
  white-space: nowrap;
}

.hero__title {
  font-family: var(--font-display);
  /* Chaque ligne tient dans sa demi-colonne dès 900 px. */
  font-size: clamp(1.9rem, 3.7vw, 3.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--forest);
  margin: 0 0 1.8rem;
  overflow-wrap: break-word;
}

.hero__line {
  display: block;
}

.hero__line + .hero__line {
  margin-top: 0.4rem;
}

/* Deuxième ligne en plein, même encre, contrastée par la graisse et l’italique. */

.hero__line--light {
  font-weight: 400;
  font-style: italic;
}

.hero__lead {
  font-family: var(--font-sans);
  font-size: clamp(0.92rem, 1.7vw, 1.05rem);
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.8;
  margin: 0 0 2rem;
  max-width: 40em;
}

/* La citation garde son filet, rejeté dans la marge : le texte part de
   l’aplomb commun. */

.maxim {
  margin: 0 0 2.5rem calc(-1 * var(--maxim-indent) - 3px);
  border-left: 3px solid var(--forest);
  padding-left: var(--maxim-indent);
}

.maxim p {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-style: italic;
  color: var(--forest);
  line-height: 1.5;
}

.hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Repère « Défiler » : au centre horizontal de la fenêtre, à distance fixe du bas. */

.scroll-cue {
  display: none;
  position: absolute;
  bottom: calc(var(--block-inset) + 2rem);
  left: 0;
  right: 0;
  justify-content: center;
  pointer-events: none;
}

.scroll-cue__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.scroll-cue__label {
  font-size: 0.6rem;
  color: var(--text-light);
}

.scroll-cue__line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--forest), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@media (min-width: 900px) {
  .hero {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* Toute la hauteur de la fenêtre (dvh : barre d’adresse mobile comprise),
     le texte centré dedans. */
  .hero__content {
    grid-column: 1;
    min-height: 100vh;
    min-height: 100dvh;
    padding-block: 7rem;
    padding-right: var(--margin);
  }

  /* L’image occupe la moitié droite, rentrée comme les blocs de fond. Elle
     démarre sous la barre de navigation, qui repose ainsi sur le fond uni,
     et s’arrête avant la section suivante. */
  .hero__art {
    position: absolute;
    left: 50%;
    right: var(--block-inset);
    top: calc(var(--nav-clear) + var(--block-inset));
    bottom: var(--block-inset);
    height: auto;
    max-height: none;
    margin: 0;
  }

  .hero__veil {
    display: block;
  }

  .scroll-cue {
    display: flex;
  }
}

/* --------------------------------------------------------------------------
   Accueil — Art. 01, le problème (section sombre)
   -------------------------------------------------------------------------- */

.problem {
  background: var(--forest);
  padding-block: var(--section-y);
  position: relative;
  overflow: hidden;
}

.problem__inner {
  position: relative;
}

.problem__head {
  text-align: center;
  margin-bottom: 3rem;
}

.problem__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 700;
  color: var(--cream);
  line-height: 1.15;
}

.problem__title em {
  color: var(--sage);
}

.problem__grid {
  display: grid;
  grid-template-columns: 1fr;
}

.problem__item {
  height: 100%;
  padding: 2rem 0;
  border-bottom: 1px solid var(--rule-dark);
}

.problem__grid > :last-child .problem__item {
  border-bottom: 0;
}

.problem__num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 700;
  color: rgba(143, 175, 159, 0.42);
  line-height: 1;
  margin-bottom: 1.5rem;
}

.problem__item-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cream);
  margin: 0 0 0.75rem;
  line-height: 1.3;
}

.problem__body {
  font-family: var(--font-sans);
  font-size: 0.87rem;
  font-weight: 300;
  color: var(--sage-pale);
  line-height: 1.7;
}

@media (min-width: 768px) {
  .problem__head {
    margin-bottom: 5rem;
  }

  .problem__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .problem__item {
    padding: 0 2.5rem;
    border-bottom: 0;
    border-right: 1px solid var(--rule-dark);
  }

  /* Première et dernière colonne calées sur la grille. */
  .problem__grid > :first-child .problem__item {
    padding-left: 0;
  }

  .problem__grid > :last-child .problem__item {
    padding-right: 0;
    border-right: 0;
  }
}

/* --------------------------------------------------------------------------
   Accueil — Art. 02 — 04, aperçu des fonctions et cartes inclinées
   -------------------------------------------------------------------------- */

.overview {
  background: var(--cream);
  padding-block: var(--section-y);
}

.overview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

.overview__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.8vw, 2.6rem);
  font-weight: 700;
  color: var(--forest);
  margin: 0 0 1.5rem;
  line-height: 1.15;
}

.overview__lead {
  font-family: var(--font-sans);
  font-size: 0.96rem;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.8;
  margin: 0 0 2rem;
}

.cards {
  position: relative;
}

/* Trois feuilles posées l’une sur l’autre : chaque carte est inclinée d’un
   angle propre et légèrement décalée (data-tilt, angles de la maquette). Au
   survol ou au focus, elle se redresse à plat, se soulève et son ombre
   s’accentue, en 250 ms ; la carte survolée passe au-dessus des autres. */

.cards > [data-reveal] {
  position: relative;
}

.cards > [data-reveal]:hover,
.cards > [data-reveal]:focus-within {
  z-index: 1;
}

.card {
  display: block;
  position: relative;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 0.75rem;
  transform: translateX(var(--shift, 0)) rotate(var(--rot, 0deg));
  box-shadow: var(--shadow-card);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s ease;
}

.card[data-tilt='1'] {
  --rot: -3deg;
}

.card[data-tilt='2'] {
  --rot: 1.5deg;
  --shift: 5%;
}

.card[data-tilt='3'] {
  --rot: -1deg;
  --shift: 2%;
}

.card:hover,
.card:focus-visible {
  transform: translateX(var(--shift, 0)) rotate(0deg) translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.card:focus-visible {
  outline: 2px solid var(--forest-light);
  outline-offset: 4px;
}

.card__art {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--forest-light);
  letter-spacing: 0.15em;
  margin-bottom: 0.4rem;
}

.card__title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--forest);
}

@media (min-width: 900px) {
  .overview__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: calc(2 * var(--margin));
  }

  /* Réserve à droite pour le décalage des cartes. */
  .cards {
    padding-right: 5%;
  }
}

/* --------------------------------------------------------------------------
   Accueil — bandeau à citation
   -------------------------------------------------------------------------- */

.band {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 300px;
  padding-block: 3rem;
  overflow: hidden;
}

/* Planche gravée sur fond forêt. À droite, l’illustration des renvois
   (components/Renvois.tsx) ; la citation garde un fond uni à gauche. Le bord
   droit de l’illustration s’aligne sur la grille du site. */

.plate__renvois {
  position: absolute;
  top: 50%;
  right: max(calc(var(--margin) - var(--block-inset)), calc((100% - var(--wrap)) / 2 + var(--margin)));
  width: min(38%, 520px);
  height: auto;
  transform: translateY(-50%);
  overflow: visible;
}

.renvois__card {
  fill: rgba(143, 175, 159, 0.08);
  stroke: rgba(143, 175, 159, 0.45);
  stroke-width: 1;
}

.renvois__link {
  fill: none;
  stroke: rgba(143, 175, 159, 0.5);
  stroke-width: 1;
}

.renvois__dot {
  fill: var(--sage);
}

.renvois__halo {
  fill: none;
  stroke: rgba(143, 175, 159, 0.25);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.renvois__node {
  fill: rgba(143, 175, 159, 0.14);
  stroke: var(--sage);
  stroke-width: 1.5;
}

.renvois__check {
  fill: none;
  stroke: var(--cream);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.renvois__code,
.renvois__label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--cream);
}

.renvois__source {
  font-family: var(--font-sans);
  font-size: 12px;
  fill: var(--sage-pale);
}

.band__veil {
  position: relative;
  width: 100%;
}

.band__quote {
  max-width: 560px;
}

.band__quote p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.8vw, 1.9rem);
  font-style: italic;
  color: var(--cream);
  line-height: 1.5;
}

/* Renvoi de la citation, en capitales espacées, vers l’article concerné. */

.band__ref {
  margin-top: 1.25rem;
}

/* Zone tactile de 44 px sans changer la mise en page (marges négatives). */

.band__ref-link {
  display: inline-block;
  padding-block: 0.85rem;
  margin-block: -0.85rem;
  font-size: 0.65rem;
  color: var(--sage-pale);
  letter-spacing: 0.18em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
  text-decoration-color: rgba(200, 221, 213, 0.4);
  border-radius: var(--radius-sm);
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}

.band__ref-link:hover,
.band__ref-link:focus-visible {
  color: var(--cream);
  text-decoration-color: var(--cream);
}

.band :focus-visible {
  outline-color: var(--sage);
}

/* Sur tablette, illustration plus petite, citation plus courte : les deux
   ne se chevauchent pas. Au-delà, la citation est bornée en largeur pour la
   même raison. */

@media (min-width: 768px) and (max-width: 1023px) {
  .plate__renvois {
    width: min(34%, 300px);
  }

  .band__quote {
    max-width: min(560px, 56%);
  }
}

@media (min-width: 1024px) {
  .band__quote {
    max-width: min(560px, 52%);
  }
}

/* Sur mobile, l’illustration passerait sous la citation : elle est retirée. */

@media (max-width: 767px) {
  .plate__renvois {
    display: none;
  }
}

@media (min-width: 768px) {
  .band {
    min-height: 360px;
  }
}

/* --------------------------------------------------------------------------
   Accueil — pré-lancement
   -------------------------------------------------------------------------- */

.cta {
  background: var(--cream-dark);
  padding-block: var(--section-y);
  text-align: center;
}

.cta__logo {
  display: inline-block;
  color: var(--forest);
}

.cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.8vw, 2.6rem);
  font-weight: 700;
  color: var(--forest);
  margin: 1.5rem 0 1rem;
}

.cta__lead {
  font-family: var(--font-sans);
  font-size: 0.96rem;
  font-weight: 300;
  color: var(--text-mid);
  max-width: 480px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   En-têtes de page (sombre ou crème)
   -------------------------------------------------------------------------- */

.page-head {
  padding: calc(var(--nav-clear) + var(--section-y) * 0.6) 0 var(--section-y);
  position: relative;
  overflow: hidden;
}

.page-head--dark {
  background: var(--forest);
}

.page-head--light {
  background: var(--cream);
}

@media (min-width: 900px) {
  .page-head--tall {
    min-height: 70vh;
  }
}

.page-head__inner {
  position: relative;
}

.page-head__title {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 4.8vw, 3.75rem);
  font-weight: 700;
  color: var(--forest);
  line-height: 1.1;
  margin: 0 0 1rem;
  overflow-wrap: break-word;
}

.page-head--dark .page-head__title,
.page-head__title--dark {
  color: var(--cream);
}

.page-head__lead {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--text-mid);
  max-width: 520px;
  line-height: 1.7;
}

.page-head--dark .page-head__lead {
  color: var(--sage-pale);
}

.page-head .btn {
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Le produit — onglets et panneaux
   -------------------------------------------------------------------------- */

.tabs {
  background: var(--cream);
  padding-block: var(--section-y);
}

.tabs__bar {
  display: none;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--rule);
  margin-bottom: 3rem;
}

.js .tabs__bar {
  display: flex;
}

.tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius) var(--radius) 0 0;
  margin-bottom: -2px;
  padding: 0.85rem 1rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.25s ease;
}

.tab[aria-selected='true'] {
  border-bottom-color: var(--forest);
}

.tab__art {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-light);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
  transition: color 0.25s ease;
}

.tab__title {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.87rem;
  font-weight: 400;
  color: var(--text-light);
  transition: color 0.25s ease;
}

.tab:hover .tab__title,
.tab[aria-selected='true'] .tab__title {
  color: var(--forest);
}

.tab[aria-selected='true'] .tab__title {
  font-weight: 600;
}

.tab[aria-selected='true'] .tab__art {
  color: var(--forest-light);
}

.panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

.panel[hidden] {
  display: none;
}

.panel + .panel {
  margin-top: 4rem;
  padding-top: 4rem;
  border-top: 1px solid var(--rule);
}

.js .panel + .panel {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.panel.is-entering {
  animation: panelIn 0.5s var(--ease-out) both;
}

.panel__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.3vw, 2.25rem);
  font-weight: 700;
  color: var(--forest);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

.panel__headline {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--forest-light);
  margin: 0 0 1.5rem;
}

.panel__rule {
  width: 40px;
  height: 2px;
  background: var(--forest);
  margin-bottom: 1.5rem;
}

.panel__body {
  font-family: var(--font-sans);
  font-size: 0.96rem;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.8;
  margin: 0 0 2rem;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.panel__figure {
  position: relative;
}

.panel__ghost {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 200px;
  height: 200px;
  border: 1px solid var(--rule);
  z-index: 0;
  animation: floatA 12s ease-in-out infinite;
}

.panel__plate {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-block);
  overflow: hidden;
}

.panel__bar {
  background: var(--forest);
  color: var(--cream);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.panel__bar-label {
  font-size: 0.65rem;
  color: var(--sage-pale);
  letter-spacing: 0.1em;
  text-transform: none;
}

.tabs__nav {
  display: none;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--rule);
}

.js .tabs__nav {
  display: flex;
}

@media (min-width: 768px) {
  .tabs__bar {
    margin-bottom: 4rem;
  }

  .tab {
    padding: 1rem 2rem;
  }

  .tabs__nav {
    margin-top: 5rem;
    padding-top: 3rem;
  }
}

@media (min-width: 900px) {
  .panel {
    grid-template-columns: 1fr 1fr;
    column-gap: calc(2 * var(--margin));
  }
}

/* --------------------------------------------------------------------------
   Feuilles blanches : planche à citation, encadré, tableau des dispositions
   (Conformité), liste et texte du blog
   -------------------------------------------------------------------------- */

.sheet {
  background: var(--white);
  padding-block: var(--section-y);
}

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-bottom: var(--section-y);
  align-items: center;
}

.figure {
  position: relative;
  border-radius: var(--radius-block);
  overflow: hidden;
}

.figure__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(26, 46, 37, 0.8), transparent);
  padding: 2rem 1.5rem 1.5rem;
}

.figure__quote {
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  color: var(--cream);
  line-height: 1.5;
}

.aside__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--forest);
  margin: 0 0 1rem;
}

.aside__body {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.7;
  margin: 0 0 1.5rem;
}

.aside__note {
  border-left: 3px solid var(--sage);
  padding-left: 1rem;
}

.aside__note p {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--text-light);
  line-height: 1.6;
}

.rows {
  border-top: 2px solid var(--forest);
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'label badge'
    'value badge'
    'detail detail';
  gap: 0.35rem 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}

.row__label {
  grid-area: label;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-light);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.row__value {
  grid-area: value;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--forest);
}

.row__detail {
  grid-area: detail;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.6;
  margin-top: 0.5rem;
}

.row .badge {
  grid-area: badge;
  align-self: start;
}

.row__detail a,
.legal a {
  color: var(--forest-light);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(26, 46, 37, 0.35);
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}

.row__detail a:hover,
.legal a:hover {
  color: var(--forest);
  text-decoration-color: currentColor;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    column-gap: calc(2 * var(--margin));
  }
}

@media (min-width: 1024px) {
  .row {
    grid-template-columns: 200px 160px 1fr auto;
    grid-template-areas: 'label value detail badge';
    gap: 2rem;
    padding: 2rem 0;
  }

  .row__detail {
    margin-top: 0;
  }

  .row .badge {
    align-self: center;
  }
}

/* --------------------------------------------------------------------------
   Contact — cartouche et repères (dans le héros sombre)
   -------------------------------------------------------------------------- */

.contact-hero__lead {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--sage-pale);
  line-height: 1.8;
  margin: 0 0 3rem;
}

.contact-box {
  border: 1px solid rgba(143, 175, 159, 0.25);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.contact-box__label {
  font-size: 0.62rem;
  color: var(--sage);
  letter-spacing: 0.2em;
  margin-bottom: 0.75rem;
}

/* Zone tactile de 44 px : le lien est rembourré en hauteur, la marge basse
   compense pour garder l’espacement de la maquette. */

.contact-box__email {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.8vw, 1.7rem);
  color: var(--cream);
  text-decoration: none;
  line-height: 1.3;
  padding-block: 0.7rem;
  margin: -0.7rem 0 1.3rem;
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}

a.contact-box__email:hover,
a.contact-box__email:focus-visible {
  color: var(--sage);
}

.contact-box__rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 2rem;
}

.hero--dark :focus-visible {
  outline-color: var(--sage);
}

.facts {
  margin-top: 3rem;
  display: flex;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
}

.fact--wide {
  flex-basis: 100%;
}

.fact__label {
  font-size: 0.58rem;
  color: var(--sage);
  letter-spacing: 0.12em;
  margin-bottom: 0.2rem;
}

.fact__value {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--sage-pale);
}

.fact__link {
  display: inline-block;
  padding-block: 0.75rem;
  margin-block: -0.75rem;
  color: var(--sage-pale);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(200, 221, 213, 0.45);
  border-radius: var(--radius-sm);
  transition: text-decoration-color 0.2s ease;
}

.fact__link:hover,
.fact__link:focus-visible {
  text-decoration-color: currentColor;
}

@media (min-width: 768px) {
  .contact-box {
    padding: 2.5rem;
  }
}

/* --------------------------------------------------------------------------
   Mentions légales
   -------------------------------------------------------------------------- */

.legal {
  max-width: 64ch;
  padding: 2rem 0;
  border-bottom: 1px solid var(--rule);
}

.legal__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--forest);
  margin: 0 0 1rem;
}

.legal p {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.7;
}

.definitions {
  margin: 0;
}

.definitions dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-light);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 1rem;
}

.definitions dt:first-child {
  margin-top: 0;
}

.definitions dd {
  margin: 0.15rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--forest);
}

@media (min-width: 768px) {
  .definitions {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    column-gap: 1.5rem;
    row-gap: 0.75rem;
  }

  .definitions dt,
  .definitions dd {
    margin: 0;
  }

  .definitions dt {
    padding-top: 0.25rem;
  }
}

/* --------------------------------------------------------------------------
   Pied de page : une seule bande pleine largeur, fond forêt, texte crème.
   Sur une ligne dès 900 px ; en dessous, logo puis mention, centrés.
   -------------------------------------------------------------------------- */

.footer {
  margin-top: var(--block-inset);
  background: var(--forest);
  color: var(--cream);
  padding: 1rem 0;
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 1.5rem;
  min-height: 2.75rem;
}

.footer__brand {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem;
  margin: -0.5rem;
  color: var(--cream);
  border-radius: var(--radius);
}

.footer__line {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--cream);
  white-space: nowrap;
}

.footer__sep {
  opacity: 0.6;
}

.footer__link {
  display: inline-block;
  padding-block: 0.75rem;
  margin-block: -0.75rem;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(247, 243, 238, 0.45);
  border-radius: var(--radius-sm);
  transition: text-decoration-color 0.2s ease;
}

.footer__link:hover,
.footer__link:focus-visible {
  text-decoration-color: currentColor;
}

.footer :focus-visible {
  outline-color: var(--sage);
}

/* --------------------------------------------------------------------------
   Blog — liste des articles et texte d’un article (sur feuille blanche)
   -------------------------------------------------------------------------- */

.posts {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--forest);
}

.posts--empty {
  padding: 2rem 0;
}

.posts__empty {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.7;
  max-width: 64ch;
}

.post {
  display: grid;
  gap: 0.5rem;
  max-width: 72ch;
  padding: 2rem 0;
  border-bottom: 1px solid var(--rule);
}

.post__date {
  display: block;
  font-size: 0.68rem;
  color: var(--text-light);
  letter-spacing: 0.12em;
}

.page-head .post__date {
  margin-bottom: 1rem;
}

.post__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 700;
  color: var(--forest);
  line-height: 1.25;
  margin: 0;
}

/* Le titre entier est le lien ; sa zone tactile est étendue à 44 px sans
   changer la mise en page (marges négatives compensées). */

.post__link {
  display: inline-block;
  padding-block: 0.55rem;
  margin-block: -0.55rem;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color 0.2s ease;
}

.post__link:hover,
.post__link:focus-visible {
  color: var(--forest-light);
}

.post__excerpt {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.7;
  margin: 0 0 0.5rem;
}

.prose {
  max-width: 64ch;
}

.prose p {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.8;
  margin: 0 0 1.25rem;
}

.prose__back {
  margin-top: 2rem;
}

@media (min-width: 1024px) {
  .post {
    grid-template-columns: 12rem minmax(0, 1fr);
    grid-template-areas:
      'date title'
      'date excerpt'
      'date link';
    column-gap: 2rem;
    max-width: none;
  }

  .post__date {
    grid-area: date;
    padding-top: 0.45rem;
  }

  .post__title {
    grid-area: title;
    max-width: 30ch;
  }

  .post__excerpt {
    grid-area: excerpt;
    max-width: 64ch;
  }

  .post > .link-arrow {
    grid-area: link;
    justify-self: start;
  }
}

/* --------------------------------------------------------------------------
   Échelle mobile et tablette (sous 900 px, la mise en page est en une
   colonne). Le texte courant passe à 16 px en graisse normale ; les titres
   sont dimensionnés en largeur de fenêtre pour tenir sur deux lignes au plus,
   coupés là où la maquette les coupe (<br>) ou équilibrés (text-wrap).
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  /* Texte courant : 16 px minimum, graisse normale (le 300 est trop fin sur
     les écrans de téléphone), interligne 1,65. */
  .hero__lead,
  .problem__body,
  .overview__lead,
  .cta__lead,
  .page-head__lead,
  .contact-hero__lead,
  .panel__body,
  .aside__body,
  .aside__note p,
  .row__detail,
  .legal p,
  .definitions dd,
  .posts__empty,
  .post__excerpt,
  .prose p,
  .fact__value,
  .figure__quote {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
  }

  .page-head__lead,
  .cta__lead {
    max-width: 36em;
  }

  /* Titres : deux lignes au plus à 320 px comme à 430 px. */
  .hero__title {
    font-size: clamp(1.7rem, 8.6vw, 2.75rem);
    line-height: 1.1;
  }

  .hero__line + .hero__line {
    margin-top: 0.25rem;
  }

  .maxim p {
    font-size: 1.1rem;
  }

  /* Deux moitiés (« Pourquoi l’IA généraliste » / « échoue en droit
     français ») qui tiennent chacune sur une ligne à 320 px. */
  .problem__title {
    font-size: clamp(1.25rem, 6.4vw, 2.4rem);
    line-height: 1.2;
  }

  .problem__num {
    font-size: 2.75rem;
    margin-bottom: 1rem;
  }

  .problem__item-title {
    font-size: 1.25rem;
  }

  .overview__title {
    font-size: clamp(1.7rem, 8.2vw, 2.4rem);
  }

  .cta__title {
    font-size: clamp(1.5rem, 7.4vw, 2.4rem);
  }

  .page-head__title {
    font-size: clamp(1.9rem, 8.8vw, 3rem);
    line-height: 1.1;
  }

  .panel__title {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  .panel__headline {
    font-size: 1.1rem;
  }

  .band__quote p {
    font-size: clamp(1.15rem, 5.4vw, 1.6rem);
  }

  .aside__title,
  .legal__title {
    font-size: 1.35rem;
  }

  .post__title {
    font-size: clamp(1.3rem, 6vw, 1.6rem);
  }

  .contact-box__email {
    font-size: clamp(1.15rem, 5.6vw, 1.6rem);
  }

  .card__title {
    font-size: 1.05rem;
  }

  .tab__title {
    font-size: 1rem;
  }

  .tag {
    font-size: 0.68rem;
  }

  .badge {
    font-size: 0.66rem;
  }

  .fact__label {
    font-size: 0.64rem;
  }

  .footer__line {
    font-size: 0.85rem;
  }

  /* Boutons : le libellé peut passer à la ligne plutôt que déborder. */
  .btn {
    white-space: normal;
  }

  /* Onglets du produit : les trois boutons se partagent chaque rangée. */
  .tab {
    flex: 1 1 auto;
  }

  .tabs__nav .btn {
    flex: 1 1 0;
    padding-inline: 1rem;
  }

  /* Cartes inclinées : pas de décalage horizontal, une petite réserve pour
     l’inclinaison. */
  .cards {
    padding-inline: 0.5rem;
  }

  .card[data-tilt] {
    --shift: 0;
  }

  /* Carré fantôme du produit : dans la colonne, pas au-delà. */
  .panel__ghost {
    top: -12px;
    right: 0;
    width: 140px;
    height: 140px;
  }

  /* Pied de page empilé : le logo au-dessus, la mention en dessous, centrés. */
  .footer {
    padding-block: 1.5rem;
  }

  .footer__inner {
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
  }

  .footer__line {
    white-space: normal;
  }
}

/* Téléphones : les trois onglets du produit s’empilent, un par rangée. */

@media (max-width: 599px) {
  .tab {
    flex-basis: 100%;
    padding-inline: 0.75rem;
  }
}

/* Très petits écrans : cartouche de contact resserré, boutons d’action sur
   toute la largeur. */

@media (max-width: 479px) {
  .contact-box {
    padding: 1.25rem;
  }

  .hero__actions .btn,
  .cta .btn,
  .contact-box .btn,
  .page-head .btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Mouvement
   -------------------------------------------------------------------------- */

@keyframes floatA {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(-12px, 18px) rotate(2deg);
  }
  66% {
    transform: translate(8px, -10px) rotate(-1deg);
  }
}

@keyframes floatB {
  0%,
  100% {
    transform: translate(0, 0) rotate(25deg);
  }
  50% {
    transform: translate(14px, -20px) rotate(28deg);
  }
}

@keyframes scrollPulse {
  0%,
  100% {
    opacity: 0.4;
    transform: scaleY(1);
  }
  50% {
    opacity: 1;
    transform: scaleY(1.2);
  }
}

@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes mountIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Ouverture : transition de page, puis les éléments du héros l’un après
   l’autre, 80 ms après le montage. Les décalages sont posés par l’attribut
   data-mount (pas de style inline : la CSP les ignore). */

[data-mount='1'] {
  --mount-delay: 0ms;
}

[data-mount='2'] {
  --mount-delay: 160ms;
}

[data-mount='3'] {
  --mount-delay: 240ms;
}

[data-mount='4'] {
  --mount-delay: 340ms;
}

[data-mount='5'] {
  --mount-delay: 450ms;
}

[data-mount='6'] {
  --mount-delay: 560ms;
}

[data-mount='7'] {
  --mount-delay: 900ms;
}

@media (prefers-reduced-motion: no-preference) {
  .site-main {
    animation: pageIn 0.5s ease both;
  }

  [data-mount] {
    animation: mountIn 1s var(--ease-out) both;
    animation-delay: calc(80ms + var(--mount-delay, 0ms));
  }
}

/* Défilement : apparition en fondu montant des blocs [data-reveal]. Le
   décalage vient de data-delay (pas de 40 ms, posé par Reveal), l’amplitude
   réduite de data-reveal="low". */

[data-delay='1'] {
  --reveal-delay: 40ms;
}

[data-delay='2'] {
  --reveal-delay: 80ms;
}

[data-delay='3'] {
  --reveal-delay: 120ms;
}

[data-delay='4'] {
  --reveal-delay: 160ms;
}

[data-delay='5'] {
  --reveal-delay: 200ms;
}

[data-delay='6'] {
  --reveal-delay: 240ms;
}

[data-delay='7'] {
  --reveal-delay: 280ms;
}

[data-delay='8'] {
  --reveal-delay: 320ms;
}

[data-delay='9'] {
  --reveal-delay: 360ms;
}

[data-delay='10'] {
  --reveal-delay: 400ms;
}

[data-delay='11'] {
  --reveal-delay: 440ms;
}

[data-delay='12'] {
  --reveal-delay: 480ms;
}

[data-reveal='low'] {
  --reveal-y: 20px;
}

.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-y, 30px));
  transition:
    opacity 0.9s ease var(--reveal-delay, 0ms),
    transform 0.9s var(--ease-out) var(--reveal-delay, 0ms);
}

.js-motion [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Mouvement réduit : tout est désactivé, le contenu est visible d’emblée.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .js-motion [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .hero__parallax {
    transform: none !important;
  }
}