@charset "utf-8";

/* ==========================================================================
   Orfevia, feuille de style unique
   Vocabulaire de classes: le registre relie du comptoir d achat.
   garde, folio, marge, reglure, ecriture, cartouche, poincon, plume,
   coupelle, pesee, temoin, bordereau, pied-registre.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  --fond: #EDEFE9;
  --fond-alt: #E2E7E0;
  --surface: #F8FAF5;
  --texte: #10261C;
  --texte-doux: #46584E;
  --accent: #0F663F;
  --accent-appuye: #0A4A2D;
  --accent-texte: #F6FBF7;
  --or: #836018;
  --bordure: #B6C3B4;

  /* Filets et voiles derives, regles pour le fond clair: sur du papier
     un trait se creuse par assombrissement, jamais par eclaircissement. */
  --or-filet: rgba(131, 96, 24, .40);
  --or-trait: rgba(131, 96, 24, .55);
  --or-voile: rgba(131, 96, 24, .16);
  --jade-filet: rgba(15, 102, 63, .34);
  --jade-voile: rgba(15, 102, 63, .12);
  --jade-reglure: rgba(15, 102, 63, .42);

  /* Ombres courtes et teintees d encre verte: une ombre noire dense
     alourdirait le papier. */
  --ombre-posee: 0 4px 12px rgba(16, 38, 28, .10);
  --voile-encre: rgba(16, 38, 28, .06);

  --serif: "DM Serif Display", "Iowan Old Style", Georgia, serif;
  --grotesque: "Mulish", "Segoe UI", Helvetica, Arial, sans-serif;
  --main-courante: "Quattrocento", "Palatino Linotype", Palatino, serif;

  --reglure-pas: 40px;
  --marge-largeur: 72px;
  --folio-largeur: 1180px;
  --entete-haut: 68px;
  --entete-bas: 58px;

  --rinceau: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20240%20240'%3E%3Cg%20fill='none'%20stroke='%23836018'%20stroke-width='0.8'%20stroke-linecap='round'%3E%3Cpath%20d='M120,240C118,200,122,178,120,150C118,122,122,96,120,62C119,44,120,26,120,4'/%3E%3Cpath%20d='M120,196C96,194,74,182,64,158C54,134,62,110,82,104C98,99,110,112,105,126'/%3E%3Cpath%20d='M64,158C46,156,30,144,24,126C42,122,58,134,64,158Z'/%3E%3Cpath%20d='M120,140C100,136,84,124,80,106C98,102,114,116,120,140Z'/%3E%3Cpath%20d='M120,96C102,88,92,70,96,50C114,56,124,76,120,96Z'/%3E%3Cpath%20d='M120,196C144,194,166,182,176,158C186,134,178,110,158,104C142,99,130,112,135,126'/%3E%3Cpath%20d='M176,158C194,156,210,144,216,126C198,122,182,134,176,158Z'/%3E%3Cpath%20d='M120,140C140,136,156,124,160,106C142,102,126,116,120,140Z'/%3E%3Cpath%20d='M120,96C138,88,148,70,144,50C126,56,116,76,120,96Z'/%3E%3Ccircle%20cx='120'%20cy='30'%20r='6'/%3E%3C/g%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. Remise a plat
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete-haut) + 24px);
  overflow-x: clip;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--fond-alt);
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--grotesque);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 .6em;
  color: var(--texte);
}

h1 { font-size: 3.4rem; }
h2 { font-size: 2.3rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; color: var(--texte); }

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

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .45em; }

small, .petit { font-size: .86rem; font-weight: 500; color: var(--texte-doux); }

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

::selection { background: var(--jade-filet); color: var(--texte); }

/* Barre de defilement: une glissiere de jade posee sur le papier, a la place
   du rail sombre herite de l ancien reglage. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--fond-alt); }
::-webkit-scrollbar-thumb {
  background: var(--accent);
  border: 3px solid var(--fond-alt);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-appuye); }

/* --------------------------------------------------------------------------
   3. Structure du carnet: folio, marge, reglures
   -------------------------------------------------------------------------- */

.folio {
  width: min(100% - 2.4rem, var(--folio-largeur));
  margin-inline: auto;
}

.garde {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  background: var(--fond);
  border-top: 1px solid var(--bordure);
}

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

/* Reglures horizontales continues, tracees d un bord a l autre de l ecran */
.garde::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--reglure-pas) - 1px),
    var(--bordure) calc(var(--reglure-pas) - 1px),
    var(--bordure) var(--reglure-pas)
  );
  opacity: .72;
  z-index: 0;
}

.garde > * { position: relative; z-index: 1; }

/* Filet double or mat, en haut de page comme sur un livre de commerce */
.garde--double::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--or-trait);
  z-index: 0;
}
.garde--double { border-top-color: var(--or-filet); }

/* La colonne de marge et son filet vertical or mat */
.registre {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}

@media (min-width: 1000px) {
  .registre {
    grid-template-columns: var(--marge-largeur) 1fr;
    gap: 0 2.6rem;
  }
  .registre > .marge {
    border-right: 1px solid var(--or-filet);
    padding-right: 1rem;
    text-align: right;
  }
}

.marge {
  font-family: var(--main-courante);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--or);
}

.marge span { display: block; }
.marge .cote { font-size: 1.6rem; letter-spacing: .04em; color: var(--texte); }

/* Filet traversant sur lequel un bloc vient s asseoir */
.assise { position: relative; }
.assise::before {
  content: "";
  position: absolute;
  top: -1px;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 1px;
  background: var(--bordure);
  pointer-events: none;
}
.assise--or::before { background: var(--or-filet); }

/* Surtitre en main courante, precede du tiret de filet or mat */
.poincon {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--main-courante);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 1.1rem;
}
.poincon::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--or);
  flex: none;
}

.chapo {
  font-size: 1.16rem;
  color: var(--texte-doux);
  max-width: 62ch;
}

.reference {
  font-family: var(--main-courante);
  font-weight: 700;
  color: var(--or);
  white-space: nowrap;
}

/* Frise de rinceaux, separateur grave */
.frise {
  height: 48px;
  background-image: var(--rinceau);
  background-repeat: repeat-x;
  background-size: 240px 240px;
  background-position: center;
  opacity: .11;
  border-top: 1px solid var(--or-filet);
  border-bottom: 1px solid var(--or-filet);
}

/* --------------------------------------------------------------------------
   4. Boutons, la plume du registre
   -------------------------------------------------------------------------- */

.plume {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: 0 26px;
  font-family: var(--grotesque);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  transition: transform .18s ease, filter .18s ease, background-color .18s ease, color .18s ease;
}

.plume--pleine {
  background: var(--accent);
  color: var(--accent-texte);
}
.plume--pleine:hover,
.plume--pleine:focus-visible {
  background: var(--accent-appuye);
  color: var(--accent-texte);
  transform: translate(-1px, -1px);
  filter: drop-shadow(3px 3px 0 rgba(131, 96, 24, .95));
}

.plume--creuse {
  background: transparent;
  color: var(--texte);
  box-shadow: inset 0 0 0 1px var(--or);
}
.plume--creuse:hover,
.plume--creuse:focus-visible {
  background: var(--surface);
  color: var(--texte);
  box-shadow: inset 0 0 0 1px var(--accent);
  transform: translate(-1px, -1px);
  filter: drop-shadow(3px 3px 0 rgba(131, 96, 24, .70));
}

.plume--large { width: 100%; }

.rangee-plumes {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 1rem;
  align-items: center;
}

/* --------------------------------------------------------------------------
   5. Cartouche, la carte du registre
   -------------------------------------------------------------------------- */

.cartouche {
  position: relative;
  background: var(--surface);
  padding: 1.7rem 1.6rem 1.5rem;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  border-bottom: 1px solid var(--bordure);
  border-right: 1px solid var(--bordure);
  background-image: linear-gradient(
    to bottom,
    var(--or) 0, var(--or) 1px,
    transparent 1px, transparent 4px,
    var(--or-trait) 4px, var(--or-trait) 5px,
    transparent 5px
  );
  background-repeat: no-repeat;
}

.cartouche h3 { margin-bottom: .5rem; }
.cartouche p { color: var(--texte-doux); font-size: 1rem; }

/* Encoche du numero d ecriture */
.cartouche .cote-ecriture {
  position: absolute;
  top: 12px;
  right: 16px;
  font-family: var(--main-courante);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .16em;
  color: var(--or-trait);
}

/* --------------------------------------------------------------------------
   6. En tete fixe
   -------------------------------------------------------------------------- */

.entete-comptoir {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: var(--entete-haut);
  display: flex;
  align-items: center;
  background: rgba(237, 239, 233, .90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--or-filet);
  box-shadow: 0 3px 0 -2px var(--or-trait);
  transition: height .22s ease, background-color .22s ease, box-shadow .22s ease;
}

.entete-comptoir.est-posee {
  height: var(--entete-bas);
  background: var(--fond);
  box-shadow: 0 3px 0 -2px var(--or-trait), var(--ombre-posee);
}

.entete-comptoir .folio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  width: min(100% - 2rem, 1320px);
}

.logotype {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--texte);
  flex: none;
}
.logotype svg { width: 34px; height: 34px; flex: none; }
.logotype .nom {
  font-family: var(--serif);
  font-size: 1.34rem;
  letter-spacing: .02em;
  line-height: 1;
}

.nav-ancres { display: none; }

@media (min-width: 900px) {
  .nav-ancres {
    display: flex;
    align-items: center;
    gap: 1.4rem;
  }
  .nav-ancres a {
    position: relative;
    font-size: .92rem;
    font-weight: 600;
    color: var(--texte-doux);
    text-decoration: none;
    padding: .35rem 0;
  }
  .nav-ancres a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: var(--accent);
    transition: width .24s ease;
  }
  .nav-ancres a:hover,
  .nav-ancres a.est-active { color: var(--texte); }
  .nav-ancres a:hover::after,
  .nav-ancres a.est-active::after { width: 100%; }
}

.entete-comptoir .plume { min-height: 40px; padding: 0 18px; font-size: .88rem; }

@media (max-width: 899px) {
  .entete-comptoir .plume--pleine { display: none; }
}

/* Bouton a trois filets */
.trois-filets {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 40px;
  padding: 0 8px;
  background: transparent;
  border: 1px solid var(--or-filet);
  cursor: pointer;
}
.trois-filets span {
  display: block;
  height: 1px;
  background: var(--or);
  transition: transform .2s ease, opacity .2s ease;
}
.trois-filets[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.trois-filets[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.trois-filets[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 900px) { .trois-filets { display: none; } }

/* Panneau plein ecran */
.panneau-comptoir {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--fond-alt);
  padding: calc(var(--entete-haut) + 1.5rem) 1.4rem 2rem;
  overflow-y: auto;
  display: none;
}
.panneau-comptoir.est-ouvert { display: block; }
.panneau-comptoir::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom, transparent 0, transparent 39px, var(--bordure) 39px, var(--bordure) 40px
  );
  opacity: .7;
  pointer-events: none;
}
.panneau-comptoir nav { position: relative; }
.panneau-comptoir a {
  display: block;
  padding: 1.05rem .2rem;
  border-bottom: 1px solid var(--bordure);
  color: var(--texte);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
}
.panneau-comptoir a:hover { color: var(--accent); }
.panneau-comptoir .plume { margin-top: 1.6rem; }
.panneau-comptoir .ferme-panneau {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  background: transparent;
  border: 1px solid var(--or-filet);
  color: var(--texte);
  font-family: var(--main-courante);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .5rem .9rem;
  cursor: pointer;
}

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-texte);
  padding: .8rem 1.2rem;
  font-weight: 700;
  z-index: 90;
}
.evitement:focus {
  left: 1rem;
  top: 1rem;
}

main { padding-top: var(--entete-haut); }

/* --------------------------------------------------------------------------
   7. Hero, ouverture du registre
   -------------------------------------------------------------------------- */

.ouverture {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 7vw, 5.5rem);
  background: var(--fond);
  border-bottom: 1px solid var(--or-filet);
}

.ouverture .plan-arriere {
  position: absolute;
  inset: -10% -10% -10% -10%;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom, transparent 0, transparent 39px, var(--bordure) 39px, var(--bordure) 40px
  );
  opacity: .7;
  will-change: transform;
}

.ouverture .rinceau-hero {
  position: absolute;
  top: -80px;
  right: -180px;
  width: 720px;
  height: 720px;
  z-index: 0;
  pointer-events: none;
  background-image: var(--rinceau);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .14;
  will-change: transform;
}

.ouverture .folio { position: relative; z-index: 2; }

.deux-colonnes-hero {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 1000px) {
  .deux-colonnes-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 3.2rem;
  }
}

.ouverture h1 { margin-bottom: .55em; }
.ouverture h1 .jade { color: var(--accent); }

.ouverture .chapo { font-size: 1.2rem; margin-bottom: 1.8rem; }

.mention-sous-plume {
  margin-top: 1.2rem;
  font-family: var(--main-courante);
  font-size: .84rem;
  color: var(--texte-doux);
  letter-spacing: .02em;
}

/* Cadre photo a double filet or mat */
.cadre-or {
  position: relative;
  padding: 6px;
  border: 1px solid var(--or-filet);
  background: var(--fond-alt);
  will-change: transform;
}
.cadre-or::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--or-voile);
  pointer-events: none;
  z-index: 2;
}
.cadre-or img {
  filter: saturate(.75) contrast(1.04);
  width: 100%;
}
.cadre-or::after {
  content: "";
  position: absolute;
  left: 6px; right: 6px; bottom: 6px;
  height: 55%;
  background: linear-gradient(to top, var(--fond) 18%, rgba(237, 239, 233, 0) 100%);
  pointer-events: none;
  z-index: 1;
}
.cadre-or .legende-photo {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  z-index: 3;
  font-family: var(--main-courante);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--or);
}

/* Cartouche a epaules coupees pour les images de detail */
.epaules-coupees {
  clip-path: polygon(0 22px, 22px 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.epaules-coupees::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 33%;
  top: auto;
  height: 1px;
  background: var(--jade-reglure);
  z-index: 3;
}

/* Bandeau de reassurance chiffree du hero */
.releve-hero {
  margin-top: 2.6rem;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--or-filet);
}
@media (min-width: 720px) {
  .releve-hero { grid-template-columns: repeat(3, 1fr); }
}
.releve-hero > div {
  padding: 1.2rem 1.3rem 1.2rem 0;
  border-bottom: 1px solid var(--bordure);
}
@media (min-width: 720px) {
  .releve-hero > div { border-bottom: 0; border-right: 1px solid var(--bordure); }
  .releve-hero > div:last-child { border-right: 0; }
  .releve-hero > div + div { padding-left: 1.3rem; }
}
.releve-hero .chiffre {
  display: block;
  font-family: var(--main-courante);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.05;
  color: var(--or);
  font-variant-numeric: tabular-nums;
}
.releve-hero .libelle {
  display: block;
  margin-top: .3rem;
  font-size: .9rem;
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   8. Probleme, lignes de risque
   -------------------------------------------------------------------------- */

.lignes-risque {
  margin-top: 2rem;
  border-top: 1px solid var(--or-filet);
}
.lignes-risque > article {
  display: grid;
  gap: .4rem 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--bordure);
}
@media (min-width: 860px) {
  .lignes-risque > article { grid-template-columns: 210px minmax(0, 1fr); }
}
.lignes-risque h3 { font-size: 1.25rem; margin: 0; }
.lignes-risque p { margin: 0; color: var(--texte-doux); }
.lignes-risque .sanction {
  font-family: var(--main-courante);
  font-weight: 700;
  color: var(--or);
  font-size: .84rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: block;
  margin-top: .5rem;
}

.encadre-juridique {
  margin-top: 2.4rem;
  padding: 1.5rem 1.6rem;
  background: var(--surface);
  border-left: 3px solid var(--or);
  font-family: var(--main-courante);
  font-size: 1.02rem;
  color: var(--texte);
}
.encadre-juridique p { max-width: 74ch; }
.encadre-juridique .source {
  display: block;
  margin-top: .8rem;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   9. Solution, les quatre gestes
   -------------------------------------------------------------------------- */

.gestes {
  counter-reset: geste;
  margin-top: 2rem;
  border-top: 1px solid var(--or-filet);
  list-style: none;
  padding: 0;
}
.gestes > li {
  counter-increment: geste;
  display: grid;
  gap: .3rem 2rem;
  padding: 1.7rem 0;
  border-bottom: 1px solid var(--bordure);
  margin: 0;
}
@media (min-width: 860px) {
  .gestes > li { grid-template-columns: var(--marge-largeur) minmax(0, 1fr); }
}
.gestes > li::before {
  content: counter(geste, decimal-leading-zero);
  font-family: var(--main-courante);
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--or);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 860px) {
  .gestes > li::before {
    text-align: right;
    padding-right: 1rem;
    border-right: 1px solid var(--or-filet);
  }
}
.gestes h3 { margin-bottom: .35rem; }
.gestes p { color: var(--texte-doux); margin: 0; }
.gestes .duree {
  display: inline-block;
  margin-top: .6rem;
  font-family: var(--main-courante);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--jade-filet);
  padding: .25rem .7rem;
}

/* --------------------------------------------------------------------------
   10. Fonctionnalites, coupelles
   -------------------------------------------------------------------------- */

.coupelles {
  display: grid;
  gap: 1.4rem;
  margin-top: 2.2rem;
}
@media (min-width: 700px) { .coupelles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .coupelles { grid-template-columns: repeat(3, 1fr); } }

.coupelle {
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.coupelle .filigrane {
  position: absolute;
  right: -70px;
  bottom: -70px;
  width: 220px;
  height: 220px;
  background-image: var(--rinceau);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .14;
  pointer-events: none;
  transition: transform .22s ease;
}
.coupelle:hover { transform: translateY(-2px); box-shadow: var(--ombre-posee); }
.coupelle:hover .filigrane { transform: translateX(6px); }
.coupelle ul {
  margin: .9rem 0 0;
  padding: 0;
  list-style: none;
}
.coupelle ul li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .94rem;
  color: var(--texte-doux);
}
.coupelle ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 8px;
  height: 1px;
  background: var(--or);
}

.aside-detail {
  margin-top: 2.6rem;
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 940px) {
  .aside-detail { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   11. Avantages, releve de gains
   -------------------------------------------------------------------------- */

.gains {
  display: grid;
  gap: 2.4rem;
  align-items: start;
}
@media (min-width: 960px) {
  .gains { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); }
}

.table-gains {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.6rem;
  font-size: .97rem;
}
.table-gains caption {
  text-align: left;
  font-family: var(--main-courante);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--or);
  padding-bottom: .8rem;
}
.table-gains th,
.table-gains td {
  padding: .85rem .7rem;
  border-bottom: 1px solid var(--bordure);
  text-align: left;
  vertical-align: top;
}
.table-gains thead th {
  font-family: var(--main-courante);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-doux);
  border-bottom: 1px solid var(--or-filet);
}
.table-gains td:last-child,
.table-gains th:last-child {
  text-align: right;
  font-family: var(--main-courante);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.table-gains tbody th {
  font-family: var(--grotesque);
  font-weight: 600;
  color: var(--texte);
}
.table-gains td { color: var(--texte-doux); }

/* --------------------------------------------------------------------------
   12. Preuve sociale
   -------------------------------------------------------------------------- */

.temoins {
  display: grid;
  gap: 1.4rem;
  margin-top: 2.2rem;
}
@media (min-width: 760px) { .temoins { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .temoins { grid-template-columns: repeat(3, 1fr); } }

.temoin blockquote {
  margin: 0;
  font-size: 1rem;
  color: var(--texte);
}
.temoin blockquote p { color: var(--texte); }
.temoin figcaption {
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--or-filet);
  font-family: var(--main-courante);
  font-size: .86rem;
  color: var(--texte-doux);
  line-height: 1.5;
}
.temoin figcaption .qui {
  display: block;
  font-weight: 700;
  color: var(--or);
  letter-spacing: .04em;
}

.bandeau-chiffres {
  margin-top: 2.6rem;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--or-filet);
  border-bottom: 1px solid var(--or-filet);
}
@media (min-width: 760px) { .bandeau-chiffres { grid-template-columns: repeat(4, 1fr); } }
.bandeau-chiffres > div {
  padding: 1.5rem 1.2rem;
  border-bottom: 1px solid var(--bordure);
}
@media (min-width: 760px) {
  .bandeau-chiffres > div { border-bottom: 0; border-right: 1px solid var(--bordure); }
  .bandeau-chiffres > div:last-child { border-right: 0; }
}
.bandeau-chiffres .chiffre {
  display: block;
  font-family: var(--main-courante);
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--or);
  font-variant-numeric: tabular-nums;
}
.bandeau-chiffres .libelle {
  display: block;
  margin-top: .5rem;
  font-size: .9rem;
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   13. Tarifs, la pesee
   -------------------------------------------------------------------------- */

.pesees {
  display: grid;
  gap: 1.4rem;
  margin-top: 2.2rem;
  align-items: stretch;
}
@media (min-width: 980px) { .pesees { grid-template-columns: repeat(3, 1fr); } }

.pesee {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pesee--avant {
  background: linear-gradient(to bottom, rgba(15, 102, 63, .10), var(--surface) 46%);
  outline: 1px solid var(--jade-reglure);
  outline-offset: 0;
}
.pesee--avant .filigrane-pesee {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  background-image: var(--rinceau);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .14;
  pointer-events: none;
}
.pesee .mention-avant {
  display: inline-block;
  font-family: var(--main-courante);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-texte);
  background: var(--accent);
  padding: .2rem .6rem;
  margin-bottom: .9rem;
}
.pesee h3 { margin-bottom: .3rem; font-size: 1.7rem; }
.pesee .destination {
  font-size: .93rem;
  color: var(--texte-doux);
  min-height: 4.6em;
}
.pesee .ligne-prix {
  margin: 1rem 0 1.2rem;
  padding: .9rem 0;
  border-top: 1px solid var(--or-filet);
  border-bottom: 1px solid var(--or-filet);
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
}
.pesee .montant {
  font-family: var(--main-courante);
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}
.pesee--avant .montant { color: var(--accent); }
.pesee .unite { font-size: .88rem; color: var(--texte-doux); }
.pesee ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  flex: 1;
}
.pesee ul li {
  position: relative;
  padding: .5rem 0 .5rem 1.4rem;
  border-bottom: 1px solid var(--bordure);
  font-size: .93rem;
  color: var(--texte-doux);
  margin: 0;
}
.pesee ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 9px;
  height: 1px;
  background: var(--accent);
}
.note-tarifs {
  margin-top: 1.6rem;
  font-size: .9rem;
  color: var(--texte-doux);
  max-width: 74ch;
}

/* --------------------------------------------------------------------------
   14. FAQ, pile de lignes
   -------------------------------------------------------------------------- */

.pile-faq {
  margin-top: 2rem;
  border-top: 1px solid var(--or-filet);
}
.ligne-faq { border-bottom: 1px solid var(--bordure); }
.ligne-faq .question {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.4rem;
  padding: 1.3rem 0;
  background: transparent;
  border: 0;
  color: var(--texte);
  font-family: var(--serif);
  font-size: 1.24rem;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
.ligne-faq .question:hover { color: var(--accent); }
.ligne-faq .marqueur {
  flex: none;
  width: 22px;
  height: 22px;
  position: relative;
  margin-top: .25rem;
}
.ligne-faq .marqueur::before,
.ligne-faq .marqueur::after {
  content: "";
  position: absolute;
  background: var(--or);
  transition: transform .22s ease, opacity .22s ease;
}
.ligne-faq .marqueur::before { left: 0; right: 0; top: 10px; height: 1px; }
.ligne-faq .marqueur::after { top: 0; bottom: 0; left: 10px; width: 1px; }
.ligne-faq .question[aria-expanded="true"] .marqueur::after { transform: rotate(90deg); opacity: 0; }
.ligne-faq .reponse {
  display: none;
  padding: 0 0 1.5rem;
}
.ligne-faq .reponse.est-ouverte { display: block; }
.ligne-faq .reponse p { color: var(--texte-doux); max-width: 76ch; }

/* --------------------------------------------------------------------------
   15. Bordereau de contact
   -------------------------------------------------------------------------- */

.contact-registre {
  display: grid;
  gap: 2.4rem;
  align-items: start;
}
@media (min-width: 980px) {
  .contact-registre { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem; }
}

.bordereau {
  background: var(--surface);
  padding: 1.9rem 1.7rem;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  border-bottom: 1px solid var(--bordure);
  border-right: 1px solid var(--bordure);
}
.bordereau .champ { margin-bottom: 1.1rem; }
.bordereau label {
  display: block;
  font-family: var(--main-courante);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: .4rem;
}
.bordereau input[type="text"],
.bordereau input[type="email"],
.bordereau select,
.bordereau textarea {
  width: 100%;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-bottom: 1px solid var(--or-filet);
  color: var(--texte);
  font-family: var(--grotesque);
  font-size: 1rem;
  padding: .75rem .8rem;
  border-radius: 0;
}
.bordereau textarea { resize: vertical; min-height: 130px; }
.bordereau .aide-champ {
  margin: -.15rem 0 .45rem;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--texte-doux);
}
.bordereau input:focus,
.bordereau select:focus,
.bordereau textarea:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.bordereau .consentement {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 1.4rem 0;
  font-family: var(--grotesque);
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texte-doux);
}
.bordereau .consentement input { flex: none; margin-top: .28rem; width: 18px; height: 18px; accent-color: var(--accent); }
.bordereau .voie-directe {
  margin-top: 1.2rem;
  font-size: .88rem;
  color: var(--texte-doux);
}

.liste-attentes {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
  border-top: 1px solid var(--or-filet);
}
.liste-attentes li {
  padding: .95rem 0;
  border-bottom: 1px solid var(--bordure);
  color: var(--texte-doux);
  font-size: .96rem;
  margin: 0;
}
.liste-attentes li strong { display: block; color: var(--texte); font-weight: 600; }

/* --------------------------------------------------------------------------
   16. Pied de page
   -------------------------------------------------------------------------- */

.pied-registre {
  position: relative;
  background: var(--fond-alt);
  border-top: 1px solid var(--or-filet);
  padding-block: 3.4rem 1.6rem;
}
.pied-registre::before {
  content: "";
  position: absolute;
  top: 3px; left: 0; right: 0;
  height: 1px;
  background: var(--or-trait);
}
.colonnes-pied {
  display: grid;
  gap: 2rem;
}
@media (min-width: 720px) { .colonnes-pied { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .colonnes-pied { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.6rem; } }

.colonnes-pied h2,
.colonnes-pied h3 {
  font-family: var(--main-courante);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 1rem;
}
.colonnes-pied ul { list-style: none; padding: 0; margin: 0; }
.colonnes-pied li { margin-bottom: .55rem; }
.colonnes-pied a {
  color: var(--texte-doux);
  text-decoration: none;
  font-size: .95rem;
}
.colonnes-pied a:hover { color: var(--accent); text-decoration: underline; }
.colonnes-pied p { font-size: .95rem; color: var(--texte-doux); }

.liens-profils {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin-top: 1rem;
}
.liens-profils a {
  font-family: var(--main-courante);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--or);
  border-bottom: 1px solid var(--or-filet);
  padding-bottom: 2px;
}
.liens-profils a:hover { color: var(--accent); border-color: var(--jade-filet); }

.barre-pied {
  margin-top: 2.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--bordure);
  font-size: .86rem;
  color: var(--texte-doux);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  justify-content: space-between;
}
.barre-pied a { color: var(--or); }

/* --------------------------------------------------------------------------
   17. Pages interieures
   -------------------------------------------------------------------------- */

.fil-ariane {
  font-family: var(--main-courante);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: 1.4rem;
}
.fil-ariane a { color: var(--or); text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; }

.texte-long { max-width: 74ch; }
.texte-long h2 { margin-top: 2.6rem; font-size: 1.9rem; }
.texte-long h3 { margin-top: 1.9rem; }
.texte-long p, .texte-long li { color: var(--texte-doux); }
.texte-long li { max-width: 70ch; }
.texte-long h2:first-of-type { margin-top: 1.6rem; }

.portrait-auteur {
  display: grid;
  gap: 2rem;
  align-items: start;
  margin-bottom: 2.4rem;
}
@media (min-width: 860px) {
  .portrait-auteur { grid-template-columns: 260px minmax(0, 1fr); gap: 2.6rem; }
}
.portrait-auteur .cadre-or img { filter: saturate(.8) contrast(1.03); }
.portrait-auteur .cadre-or::after { display: none; }

.releve-plan {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
  border-top: 1px solid var(--or-filet);
}
.releve-plan > li {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--bordure);
  margin: 0;
}
.releve-plan a {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--texte);
  text-decoration: none;
}
.releve-plan a:hover { color: var(--accent); }
.releve-plan p { margin: .3rem 0 0; color: var(--texte-doux); font-size: .95rem; }

.centre-message {
  text-align: center;
  padding-block: clamp(3.5rem, 10vw, 7rem);
}
.centre-message p { margin-inline: auto; }
.centre-message .rangee-plumes { justify-content: center; }

/* --------------------------------------------------------------------------
   18. Apparitions au defilement et parallaxe
   -------------------------------------------------------------------------- */

.a-inscrire {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .5s ease, transform .5s ease;
}
.a-inscrire.est-inscrit {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

[data-plan] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * , *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .24s !important;
  }
  .a-inscrire { transform: none; transition: opacity .24s ease; }
  [data-plan] { transform: none !important; }
  .coupelle:hover { transform: none; }
  .coupelle:hover .filigrane { transform: none; }
  .plume:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   19. Reglages mobiles de la typographie
   -------------------------------------------------------------------------- */

@media (max-width: 780px) {
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.7rem; }
  h3 { font-size: 1.25rem; }
  .bandeau-chiffres .chiffre { font-size: 2.3rem; }
  .pesee .montant { font-size: 2.3rem; }
  .ligne-faq .question { font-size: 1.1rem; }
  .marge { margin-bottom: .4rem; }
}

@media (max-width: 480px) {
  .cartouche { padding: 1.4rem 1.2rem 1.2rem; }
  .bordereau { padding: 1.4rem 1.1rem; }
  .plume { width: 100%; }
}

/* --------------------------------------------------------------------------
   20. Impression
   -------------------------------------------------------------------------- */

@media print {
  .entete-comptoir, .panneau-comptoir, .frise, .rinceau-hero { display: none !important; }
  body { background: #fff; color: #000; }
  .garde::before { display: none; }
}

/* --------------------------------------------------------------------------
   21. Magazine, Le Registre du Comptoir
   Section ajoutee pour la partie editoriale du site. Aucune regle des
   sections 1 a 20 n est modifiee: tout ce qui suit est un ajout.
   Le magazine reprend la palette ardoise et or mat, la forme signature du
   filet de reglure traversant, le motif de rinceaux graves et la parallaxe
   douce a deux plans du reste du site.
   Vocabulaire de classes: sommaire, feuillet, timbre, exergue, corps-article,
   encart-auteur, renvois, appel-registre.
   -------------------------------------------------------------------------- */

/* 21.1 Titre de colonne du pied de page sans balise de titre.
   Une page d article ne porte qu un seul titre, celui de l article, et aucun
   intertitre en dehors du corps redactionnel: les colonnes du pied de page y
   sont donc annoncees par un paragraphe mis en forme. */
.colonnes-pied .titre-colonne {
  font-family: var(--main-courante);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 1rem;
  max-width: none;
}

/* 21.2 Ouverture du magazine et des pages editoriales */
.ouverture-magazine {
  position: relative;
  overflow: hidden;
}
.ouverture-magazine .plan-arriere {
  position: absolute;
  inset: -12% -10%;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom, transparent 0, transparent 39px, var(--bordure) 39px, var(--bordure) 40px
  );
  opacity: .7;
  will-change: transform;
}
.ouverture-magazine .rinceau-magazine {
  position: absolute;
  top: -120px;
  right: -200px;
  width: 640px;
  height: 640px;
  z-index: 0;
  pointer-events: none;
  background-image: var(--rinceau);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .14;
  will-change: transform;
}
.ouverture-magazine .folio { position: relative; z-index: 2; }
.ouverture-magazine .chapo { font-size: 1.14rem; max-width: 70ch; }

/* 21.3 Grille des cartes d article, posee sur un filet traversant */
.sommaire {
  position: relative;
  display: grid;
  gap: 1.5rem;
  margin-top: 2.4rem;
}
.sommaire::before {
  content: "";
  position: absolute;
  top: -1.2rem;
  left: -100vw;
  right: -100vw;
  height: 1px;
  background: var(--or-filet);
  pointer-events: none;
}
@media (min-width: 700px) { .sommaire { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .sommaire { grid-template-columns: repeat(3, 1fr); } }

/* 21.4 Carte d article et carte de renvoi, memes cadres photo a double filet */
.feuillet,
.carte-renvoi {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.feuillet:hover,
.carte-renvoi:hover { transform: translateY(-2px); box-shadow: var(--ombre-posee); }

.feuillet .vignette,
.carte-renvoi .vignette {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0 0 1.1rem;
  padding: 5px;
  border: 1px solid var(--or-filet);
  background: var(--fond-alt);
}
.feuillet .vignette::after,
.carte-renvoi .vignette::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid var(--or-voile);
  pointer-events: none;
  z-index: 2;
}
.feuillet .vignette img,
.carte-renvoi .vignette img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(.75) contrast(1.04);
  transition: transform .34s ease;
}
.feuillet:hover .vignette img,
.carte-renvoi:hover .vignette img { transform: scale(1.03); }

.feuillet .angle-feuillet {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .55rem;
  font-family: var(--main-courante);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--or);
}
.feuillet .angle-feuillet::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--or);
  flex: none;
}
.feuillet .titre-feuillet {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 .6rem;
}
.feuillet .titre-feuillet a,
.carte-renvoi .titre-renvoi a {
  color: var(--texte);
  text-decoration: none;
}
.feuillet:hover .titre-feuillet a,
.feuillet .titre-feuillet a:hover,
.carte-renvoi:hover .titre-renvoi a,
.carte-renvoi .titre-renvoi a:hover { color: var(--accent); }
.feuillet .extrait {
  flex: 1;
  margin: 0 0 1.1rem;
  font-size: .96rem;
  color: var(--texte-doux);
}
.feuillet .colophon {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .8rem;
  margin: 0;
  padding-top: .8rem;
  border-top: 1px solid var(--bordure);
  font-family: var(--main-courante);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-doux);
  max-width: none;
}
.feuillet .colophon time { color: var(--or); }

/* 21.5 Entete d article: fil d Ariane, timbre, exergue, image a la une */
.entete-article { margin-bottom: 2.2rem; }
.entete-article .fil-ariane { margin-bottom: 1rem; }

.timbre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .8rem;
  margin: 0 0 1.4rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--or-filet);
  max-width: none;
  font-family: var(--main-courante);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.timbre .angle { color: var(--or); }
.timbre > * + *::before {
  content: "/";
  margin-right: .8rem;
  color: var(--or-trait);
}

.entete-article h1 { margin-bottom: .5em; }

.exergue {
  position: relative;
  max-width: 66ch;
  margin: 0 0 2rem;
  padding: 1.1rem 1.3rem 1.1rem 1.5rem;
  border-left: 3px solid var(--or);
  background: linear-gradient(to right, var(--or-voile), rgba(131, 96, 24, 0) 70%);
  font-family: var(--main-courante);
  font-size: 1.14rem;
  line-height: 1.6;
  color: var(--texte);
}

.image-une { margin: 0 0 2.4rem; }
.image-une::after { display: none; }

/* 21.6 Corps redactionnel: balises nues, sans aucune classe.
   Les redacteurs n ecrivent que du HTML semantique, la mise en forme vient
   d ici pour qu un corps d article ne paraisse jamais non style. */
.corps-article {
  max-width: 68ch;
  font-size: 1.05rem;
}
.corps-article p {
  margin: 0 0 1.2em;
  max-width: 68ch;
  color: var(--texte-doux);
}
.corps-article > p:first-child { color: var(--texte); }
.corps-article strong { color: var(--texte); font-weight: 700; }
.corps-article em { font-style: italic; color: var(--texte); }
.corps-article a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--jade-filet);
  text-underline-offset: 3px;
}
.corps-article a:hover {
  color: var(--accent-appuye);
  text-decoration-color: var(--accent-appuye);
}

.corps-article h2 {
  position: relative;
  font-size: 1.95rem;
  margin: 2.9rem 0 .9rem;
  padding-top: 1.5rem;
}
.corps-article h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100vw;
  right: -100vw;
  height: 1px;
  background: var(--or-filet);
  pointer-events: none;
}
.corps-article h2:first-child { margin-top: 0; }

.corps-article h3 {
  position: relative;
  font-size: 1.3rem;
  margin: 2rem 0 .6rem;
  padding-left: 26px;
}
.corps-article h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 16px;
  height: 1px;
  background: var(--or);
}

.corps-article ul,
.corps-article ol {
  list-style: none;
  margin: 0 0 1.4em;
  padding: 0;
  max-width: 68ch;
  border-top: 1px solid var(--bordure);
}
.corps-article ol { counter-reset: ecriture; }
.corps-article ul > li,
.corps-article ol > li {
  position: relative;
  margin: 0;
  padding: .55rem 0 .55rem 1.6rem;
  border-bottom: 1px solid var(--bordure);
  color: var(--texte-doux);
}
.corps-article ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.25em;
  width: 10px;
  height: 1px;
  background: var(--or);
}
.corps-article ol > li {
  counter-increment: ecriture;
  padding-left: 2.5rem;
}
.corps-article ol > li::before {
  content: counter(ecriture, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .55rem;
  font-family: var(--main-courante);
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.68;
  color: var(--or);
  font-variant-numeric: tabular-nums;
}
.corps-article li strong { color: var(--texte); }
.corps-article li p { margin: .3rem 0 0; }

.corps-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8rem 0 2rem;
  font-size: .95rem;
}
.corps-article th,
.corps-article td {
  padding: .8rem .7rem;
  border-bottom: 1px solid var(--bordure);
  text-align: left;
  vertical-align: top;
}
.corps-article thead th {
  font-family: var(--main-courante);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-doux);
  border-bottom: 1px solid var(--or-filet);
}
.corps-article tbody th {
  font-family: var(--grotesque);
  font-weight: 600;
  color: var(--texte);
}
.corps-article tbody td { color: var(--texte-doux); }
.corps-article tbody tr:hover th,
.corps-article tbody tr:hover td { background: var(--voile-encre); }

.corps-article blockquote {
  margin: 2rem 0;
  padding: 1.3rem 1.5rem;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  font-family: var(--main-courante);
  font-size: 1.05rem;
  color: var(--texte);
}
.corps-article blockquote p {
  color: var(--texte);
  max-width: 62ch;
}
.corps-article blockquote p:last-child { margin-bottom: 0; }

.corps-article aside {
  position: relative;
  overflow: hidden;
  margin: 2.2rem 0;
  padding: 1.5rem 1.6rem;
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
  border-top: 1px solid var(--or);
}
.corps-article aside::before {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 190px;
  height: 190px;
  background-image: var(--rinceau);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .13;
  pointer-events: none;
}
.corps-article aside > * { position: relative; }
.corps-article aside p { color: var(--texte); max-width: 64ch; }
.corps-article aside ul,
.corps-article aside ol { margin-bottom: 0; }
.corps-article aside > p:last-child { margin-bottom: 0; }

.corps-article figure {
  margin: 2rem 0;
  padding: 6px;
  border: 1px solid var(--or-filet);
  background: var(--fond-alt);
}
.corps-article figure img { width: 100%; filter: saturate(.75) contrast(1.04); }
.corps-article figcaption {
  margin-top: .7rem;
  padding: 0 .3rem .2rem;
  font-family: var(--main-courante);
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--texte-doux);
}

/* 21.7 Appel a l action de fin d article */
.appel-registre { margin-top: 3rem; }
.appel-registre p { color: var(--texte-doux); }
.appel-registre .rangee-plumes { margin-top: 1.3rem; }

/* 21.8 Encart auteur */
.encart-auteur {
  display: grid;
  gap: 1.2rem;
  align-items: start;
  margin-top: 2.8rem;
  padding-top: 1.7rem;
  border-top: 1px solid var(--or-filet);
}
@media (min-width: 620px) {
  .encart-auteur { grid-template-columns: 108px minmax(0, 1fr); gap: 1.7rem; }
}
.encart-auteur .portrait {
  width: 106px;
  padding: 4px;
  border: 1px solid var(--or-filet);
  background: var(--fond-alt);
}
.encart-auteur .portrait img { width: 100%; filter: saturate(.8) contrast(1.03); }
.encart-auteur .qualite {
  margin: 0 0 .4rem;
  font-family: var(--main-courante);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--or);
}
.encart-auteur .signataire {
  margin: 0 0 .6rem;
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--texte);
}
.encart-auteur p { color: var(--texte-doux); font-size: .97rem; }

/* 21.9 Bloc A lire aussi */
.renvois {
  position: relative;
  display: grid;
  gap: 1.4rem;
  margin-top: 2rem;
}
@media (min-width: 760px) { .renvois { grid-template-columns: repeat(3, 1fr); } }
.carte-renvoi .titre-renvoi {
  font-family: var(--serif);
  font-size: 1.14rem;
  line-height: 1.2;
  color: var(--texte);
  margin: 0 0 .5rem;
}
.carte-renvoi .accroche-renvoi {
  margin: 0;
  font-size: .93rem;
  color: var(--texte-doux);
}
.renvoi-sommaire {
  margin-top: 1.8rem;
  font-family: var(--main-courante);
  font-size: .84rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.renvoi-sommaire a { color: var(--or); text-decoration: none; }
.renvoi-sommaire a:hover { color: var(--accent); text-decoration: underline; }

/* 21.10 Releve des articles publies, page auteur et plan du site */
.releve-plan .date-parution {
  display: block;
  margin-top: .35rem;
  font-family: var(--main-courante);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or);
}

/* 21.11 Reglages mobiles du magazine */
@media (max-width: 780px) {
  .corps-article h2 { font-size: 1.55rem; padding-top: 1.2rem; margin-top: 2.3rem; }
  .corps-article h3 { font-size: 1.16rem; }
  .exergue { font-size: 1.04rem; padding: .9rem 1rem .9rem 1.2rem; }
  .feuillet .titre-feuillet { font-size: 1.2rem; }
  .corps-article th,
  .corps-article td { padding: .6rem .45rem; font-size: .9rem; }
}

/* 21.12 Mouvement reduit et impression */
@media (prefers-reduced-motion: reduce) {
  .feuillet:hover,
  .carte-renvoi:hover { transform: none; }
  .feuillet:hover .vignette img,
  .carte-renvoi:hover .vignette img { transform: none; }
}

@media print {
  .renvois,
  .appel-registre,
  .renvoi-sommaire,
  .ouverture-magazine .rinceau-magazine { display: none !important; }
  .corps-article { max-width: none; }
  .corps-article h2::before { display: none; }
}