/* ==========================================================================
   Aidatis, feuille de style unique
   Vocabulaire de nommage: atelier de concession de materiel agricole.
   etabli = section, pupitre = ecran de controle du hero, cadran = bloc de
   chiffre, jauge = graduation verticale, fiche = carte, plaque = bouton,
   reglet = filet, gyro = signalisation orange reservee aux echeances.
   ========================================================================== */

:root {
  --argile: #EFEAE0;
  --argile-creuse: #E4DDCE;
  --creme: #FBF8F2;
  --kaki-noir: #1C2115;
  --kaki-doux: #5C6149;
  --gyro: #C97514;
  --gyro-texte: #16180F;
  --kaki: #4F5D31;
  --reglet: #C9C0AD;

  --biseau: 14px;
  --biseau-court: 12px;
  --entete-h: 68px;

  --pas: clamp(1rem, 2.2vw, 1.6rem);
  --gouttiere: clamp(1.2rem, 2.6vw, 2.4rem);
  --large: 1240px;

  --ombre-basse: 0 1px 0 rgba(28, 33, 21, .08);
  --ombre-levee: 0 18px 38px -22px rgba(28, 33, 21, .55);

  --courbe: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   Trame terrazzo: eclats disperses sur une maille de 220 pixels.
   Trois surfaces seulement: probleme, bandeau des avantages, pied de page.
   -------------------------------------------------------------------------- */
.terrazzo {
  background-color: var(--argile-creuse);
  background-image:
    radial-gradient(6px 4px at 18px 26px, rgba(79, 93, 49, .55) 98%, transparent 100%),
    radial-gradient(4px 7px at 74px 12px, rgba(251, 248, 242, .8) 98%, transparent 100%),
    radial-gradient(9px 5px at 132px 44px, rgba(201, 192, 173, .9) 98%, transparent 100%),
    radial-gradient(3px 3px at 196px 20px, rgba(79, 93, 49, .5) 98%, transparent 100%),
    radial-gradient(5px 8px at 40px 78px, rgba(201, 192, 173, .85) 98%, transparent 100%),
    radial-gradient(7px 4px at 108px 96px, rgba(251, 248, 242, .75) 98%, transparent 100%),
    radial-gradient(4px 4px at 168px 82px, rgba(79, 93, 49, .45) 98%, transparent 100%),
    radial-gradient(8px 5px at 208px 118px, rgba(201, 192, 173, .8) 98%, transparent 100%),
    radial-gradient(5px 5px at 24px 138px, rgba(251, 248, 242, .7) 98%, transparent 100%),
    radial-gradient(3px 6px at 86px 150px, rgba(79, 93, 49, .5) 98%, transparent 100%),
    radial-gradient(9px 4px at 148px 166px, rgba(201, 192, 173, .85) 98%, transparent 100%),
    radial-gradient(4px 3px at 200px 190px, rgba(251, 248, 242, .75) 98%, transparent 100%),
    radial-gradient(6px 7px at 56px 202px, rgba(79, 93, 49, .45) 98%, transparent 100%),
    radial-gradient(5px 4px at 120px 214px, rgba(201, 192, 173, .8) 98%, transparent 100%),
    radial-gradient(3px 3px at 178px 132px, rgba(201, 116, 20, .55) 98%, transparent 100%),
    radial-gradient(4px 4px at 12px 108px, rgba(251, 248, 242, .7) 98%, transparent 100%),
    radial-gradient(7px 5px at 96px 60px, rgba(201, 192, 173, .7) 98%, transparent 100%),
    radial-gradient(3px 5px at 160px 8px, rgba(79, 93, 49, .4) 98%, transparent 100%);
  background-size: 220px 220px;
  background-repeat: repeat;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--entete-h) + 16px); }

body {
  margin: 0;
  background: var(--argile);
  color: var(--kaki-noir);
  font-family: "Hind", "Segoe UI", system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Rokkitt", Georgia, serif;
  line-height: 1.08;
  margin: 0 0 .6em;
  text-align: left;
  letter-spacing: .002em;
}

h1 { font-size: 3.4rem; font-weight: 700; }
h2 { font-size: 2.1rem; font-weight: 700; padding-top: .55em; position: relative; }
h3 { font-size: 1.25rem; font-weight: 600; }

h2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 64px; height: 2px;
  background: var(--kaki);
}

p { margin: 0 0 1.05em; max-width: 68ch; }

a { color: var(--kaki); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gyro-texte); }

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

ul { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: .38em; }

strong { font-weight: 600; }

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

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--kaki-noir);
  color: var(--creme);
  padding: .7rem 1.1rem;
  z-index: 200;
  font-family: "Cutive Mono", "Courier New", monospace;
}
.evitement:focus { left: 8px; top: 8px; }

/* Surtitres, mentions de source, etiquettes: Cutive Mono */
.surtitre,
.mention,
.etiquette,
.gradue,
.compte {
  font-family: "Cutive Mono", "Courier New", monospace;
}

.surtitre {
  display: block;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kaki-doux);
  margin-bottom: .9rem;
}

.mention {
  font-size: .82rem;
  color: var(--kaki-doux);
  line-height: 1.5;
  display: block;
}

.gyro-mot { color: #8A4C05; font-weight: 600; }

/* --------------------------------------------------------------------------
   Ossature et rythme vertical
   -------------------------------------------------------------------------- */
.cadre {
  width: min(100% - 2.4rem, var(--large));
  margin-inline: auto;
}

.etabli { padding-block: clamp(3.4rem, 7vw, 6.2rem); position: relative; }
.etabli--creuse { background: var(--argile-creuse); }
.etabli--serre { padding-block: clamp(2.6rem, 5vw, 4.2rem); }

/* le biseau signature, coin superieur droit coupe */
.biseau {
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}

/* --------------------------------------------------------------------------
   Plaques (boutons)
   -------------------------------------------------------------------------- */
.plaque {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: 0 1.35rem;
  font-family: "Hind", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .02em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .22s var(--courbe), background-color .22s var(--courbe), box-shadow .22s var(--courbe);
  clip-path: polygon(0 0, calc(100% - var(--biseau-court)) 0, 100% var(--biseau-court), 100% 100%, 0 100%);
}

.plaque--vive {
  background: var(--gyro);
  color: var(--gyro-texte);
  box-shadow: 3px 3px 0 0 var(--kaki);
}
.plaque--vive:hover {
  background: #AF6410;
  color: var(--gyro-texte);
  box-shadow: 0 0 0 0 var(--kaki);
  transform: perspective(900px) rotateY(1.5deg);
}

.plaque--kaki {
  background: transparent;
  color: var(--kaki-noir);
  box-shadow: inset 0 0 0 2px var(--kaki);
}
.plaque--kaki:hover {
  background: var(--creme);
  color: var(--kaki-noir);
  box-shadow: inset 0 0 0 2px var(--gyro);
  transform: perspective(900px) rotateY(1.5deg);
}

.plaque--pleine { width: 100%; }

/* --------------------------------------------------------------------------
   En tete
   -------------------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 120;
  height: var(--entete-h);
  background: rgba(251, 248, 242, .92);
  backdrop-filter: blur(7px);
  border-bottom: 1px solid var(--reglet);
  transition: height .2s var(--courbe), box-shadow .2s var(--courbe);
}

.entete.est-descendue {
  height: calc(var(--entete-h) - 8px);
  box-shadow: 0 10px 26px -20px rgba(28, 33, 21, .8);
}

.entete__rail {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--gouttiere);
}

.avancee {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--gyro);
}

.logotype {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: var(--kaki-noir);
  font-family: "Rokkitt", Georgia, serif;
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -.01em;
  flex: 0 0 auto;
}
.logotype svg { display: block; }

.nav-ancres {
  display: flex;
  align-items: center;
  gap: clamp(.7rem, 1.6vw, 1.5rem);
  margin-left: auto;
}
.nav-ancres a {
  position: relative;
  font-weight: 500;
  font-size: .97rem;
  color: var(--kaki-noir);
  text-decoration: none;
  padding: .35rem 0;
}
.nav-ancres a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gyro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s var(--courbe);
}
.nav-ancres a:hover::after,
.nav-ancres a:focus-visible::after { transform: scaleX(1); }

.pastille-cloture {
  display: none;
  align-items: center;
  gap: .4rem;
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: .78rem;
  color: var(--kaki-doux);
  border: 1px solid var(--reglet);
  background: var(--argile);
  padding: .25rem .6rem;
  white-space: nowrap;
}
.pastille-cloture b { color: #8A4C05; font-weight: 400; }
@media (min-width: 1120px) { .pastille-cloture { display: inline-flex; } }

.bouton-menu {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--reglet);
  cursor: pointer;
  margin-left: auto;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.bouton-menu span {
  display: block;
  width: 20px; height: 2px;
  background: var(--kaki-noir);
}

@media (max-width: 900px) {
  .nav-ancres {
    position: fixed;
    inset: var(--entete-h) 0 0 0;
    margin: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    background: var(--creme);
    padding: 1.4rem 1.4rem 3rem;
    overflow-y: auto;
    display: none;
  }
  .nav-ancres.est-ouverte { display: flex; }
  .nav-ancres a {
    width: 100%;
    padding: .95rem 0;
    border-bottom: 1px solid var(--reglet);
    font-size: 1.1rem;
  }
  .nav-ancres .plaque { margin-top: 1.4rem; }
  .bouton-menu { display: flex; }
  .entete__rail .plaque--vive.hors-menu { display: none; }
}

/* --------------------------------------------------------------------------
   Pupitre: hero en ecran de controle avec jauges laterales
   -------------------------------------------------------------------------- */
.pupitre {
  position: relative;
  overflow: hidden;
  background: var(--argile);
  padding-block: clamp(2.6rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem);
}

.pupitre::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: transparent;
  background-image:
    radial-gradient(5px 4px at 20px 30px, rgba(79, 93, 49, .5) 98%, transparent 100%),
    radial-gradient(4px 6px at 70px 90px, rgba(201, 192, 173, .9) 98%, transparent 100%),
    radial-gradient(7px 4px at 130px 40px, rgba(251, 248, 242, .9) 98%, transparent 100%),
    radial-gradient(3px 3px at 175px 120px, rgba(79, 93, 49, .45) 98%, transparent 100%),
    radial-gradient(6px 5px at 45px 160px, rgba(201, 192, 173, .8) 98%, transparent 100%),
    radial-gradient(4px 4px at 105px 195px, rgba(251, 248, 242, .8) 98%, transparent 100%),
    radial-gradient(3px 4px at 200px 70px, rgba(201, 116, 20, .5) 98%, transparent 100%),
    radial-gradient(5px 3px at 150px 205px, rgba(79, 93, 49, .4) 98%, transparent 100%);
  background-size: 220px 220px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 78%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 78%);
  pointer-events: none;
}

.pupitre__rail {
  position: relative;
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) 4px;
  gap: clamp(1rem, 3vw, 2.4rem);
  align-items: stretch;
}

/* jauges verticales laterales */
.jauge-lat {
  position: relative;
  background: var(--reglet);
  min-height: 100%;
}
.jauge-lat__remplissage {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0;
  background: var(--kaki);
  transition: height .9s var(--courbe);
}
.jauge-lat--gyro .jauge-lat__remplissage { background: var(--gyro); }
.jauge-lat::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(to bottom, transparent 0 24%, rgba(28, 33, 21, .35) 24% calc(24% + 1px));
}

.pupitre__corps {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.6rem, 3.4vw, 3rem);
  align-items: start;
}

@media (max-width: 940px) {
  .pupitre__corps { grid-template-columns: minmax(0, 1fr); }
}

.pupitre h1 { margin-bottom: .5em; }
.pupitre__chapeau {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--kaki-doux);
  max-width: 60ch;
}

.pupitre__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin: 1.6rem 0 1.2rem;
}

.rassurance {
  border-left: 4px solid var(--kaki);
  padding-left: .95rem;
}
.rassurance b {
  font-family: "Rokkitt", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: inline-block;
  margin-right: .3rem;
}

/* cadrans du pupitre */
.cadrans { display: grid; gap: .9rem; }

.cadran {
  background: var(--creme);
  border: 1px solid var(--reglet);
  padding: 1rem 1.1rem 1.05rem 1.4rem;
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.cadran::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--kaki);
  background-image: repeating-linear-gradient(to bottom, transparent 0 23%, rgba(239, 234, 224, .9) 23% calc(23% + 1px));
}
.cadran__valeur {
  font-family: "Rokkitt", Georgia, serif;
  font-weight: 700;
  font-size: 4.6rem;
  line-height: .92;
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: .15rem;
}
.cadran__valeur--court { font-size: 3.1rem; }
.cadran__unite {
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: .9rem;
  color: var(--kaki-doux);
}
.cadran--echeance .cadran__valeur { color: #8A4C05; }
.cadran--echeance::before { background: var(--gyro); background-image: repeating-linear-gradient(to bottom, transparent 0 23%, rgba(239, 234, 224, .9) 23% calc(23% + 1px)); }
.cadran--echeance::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-top: var(--biseau) solid var(--gyro);
  border-left: var(--biseau) solid transparent;
}

.pupitre__vue {
  margin-top: clamp(2rem, 4vw, 3.2rem);
  position: relative;
}

/* --------------------------------------------------------------------------
   Cadres photo
   -------------------------------------------------------------------------- */
.cliche {
  position: relative;
  border: 1px solid var(--reglet);
  background: var(--creme);
  padding: 6px 6px 14px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.cliche img {
  width: 100%;
  filter: saturate(.82) contrast(1.02);
}
.cliche__voile {
  position: absolute;
  left: 6px; right: 6px; top: 6px;
  bottom: 14px;
  background: linear-gradient(to top, rgba(79, 93, 49, .34), rgba(79, 93, 49, .1) 34%, rgba(79, 93, 49, .06));
  mix-blend-mode: multiply;
  pointer-events: none;
}
.cliche__voile::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(92, 97, 73, .55);
}
.cliche figcaption {
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: .8rem;
  color: var(--kaki-doux);
  padding: .55rem .4rem 0;
}

/* --------------------------------------------------------------------------
   Section probleme: deux colonnes decalees
   -------------------------------------------------------------------------- */
.decale {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: start;
}
.decale > *:last-child { margin-top: clamp(0rem, 4vw, 3.6rem); }
@media (max-width: 900px) {
  .decale { grid-template-columns: minmax(0, 1fr); }
  .decale > *:last-child { margin-top: 0; }
}

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

.risque {
  background: var(--creme);
  border: 1px solid var(--reglet);
  padding: 1.05rem 1.2rem 1.05rem 1.5rem;
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  transition: transform .22s var(--courbe), box-shadow .22s var(--courbe);
}
.risque::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--gyro);
}
.risque::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-top: var(--biseau) solid var(--gyro);
  border-left: var(--biseau) solid transparent;
  transition: border-top-color .22s var(--courbe);
}
.risque h3 { margin-bottom: .3em; }
.risque p { margin-bottom: .35em; font-size: .98rem; }

/* --------------------------------------------------------------------------
   Sequence: quatre etapes separees par des filets verticaux
   -------------------------------------------------------------------------- */
.sequence {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--kaki);
  margin-top: 1.6rem;
}
.sequence__pas {
  padding: 1.5rem 1.4rem 1.2rem 0;
  border-left: 1px solid var(--reglet);
  padding-left: 1.4rem;
}
.sequence__pas:first-child { border-left: 0; padding-left: 0; }
.sequence__num {
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: .78rem;
  letter-spacing: .16em;
  color: #8A4C05;
  display: block;
  margin-bottom: .6rem;
}
.sequence__pas h3 { margin-bottom: .35em; }
.sequence__pas p { font-size: .98rem; margin-bottom: .5em; }

@media (max-width: 980px) { .sequence { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sequence__pas:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 620px) { .sequence { grid-template-columns: minmax(0, 1fr); }
  .sequence__pas { border-left: 0; padding-left: 0; border-top: 1px solid var(--reglet); }
  .sequence__pas:first-child { border-top: 0; }
}

/* --------------------------------------------------------------------------
   Fiches d outils (fonctionnalites): trois par deux
   -------------------------------------------------------------------------- */
.jeu-fiches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
  margin-top: 1.8rem;
}
@media (max-width: 1020px) { .jeu-fiches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 660px) { .jeu-fiches { grid-template-columns: minmax(0, 1fr); } }

.fiche {
  background: var(--creme);
  border: 1px solid var(--reglet);
  padding: 1.3rem 1.3rem 1.35rem 1.6rem;
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  transition: transform .22s var(--courbe), box-shadow .22s var(--courbe);
}
.fiche::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--kaki);
  background-image: repeating-linear-gradient(to bottom, transparent 0 23%, rgba(251, 248, 242, .95) 23% calc(23% + 1px));
}
.fiche h3 { margin-bottom: .4em; }
.fiche p { font-size: .99rem; margin-bottom: .5em; }
.fiche .mention { margin-top: .6rem; padding-top: .55rem; border-top: 1px dashed var(--reglet); }

/* signature d animation: cartes qui s inclinent au survol */
.inclinable { transform-style: preserve-3d; }
.inclinable:hover,
.inclinable:focus-within {
  transform: perspective(900px) rotateX(2.5deg) rotateY(1.5deg);
  box-shadow: var(--ombre-levee);
}
.risque:hover::after { border-top-color: #E08A22; }

/* --------------------------------------------------------------------------
   Bandeau des avantages: quatre gros chiffres sur une meme ligne de base
   -------------------------------------------------------------------------- */
.bandeau-gains { color: var(--kaki-noir); }
.gains {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gouttiere);
  margin-top: 2rem;
  align-items: end;
}
@media (max-width: 960px) { .gains { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .gains { grid-template-columns: minmax(0, 1fr); } }

.gain { border-left: 4px solid var(--kaki); padding-left: 1rem; }
.gain__nombre {
  font-family: "Rokkitt", Georgia, serif;
  font-weight: 700;
  font-size: 4.6rem;
  line-height: .9;
  font-variant-numeric: tabular-nums;
  display: block;
}
.gain__unite {
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: .9rem;
  color: var(--kaki-doux);
  display: block;
  margin: .25rem 0 .5rem;
}
.gain p { font-size: .98rem; margin: 0; }
.gain--gyro { border-left-color: var(--gyro); }
.gain--gyro .gain__nombre { color: #8A4C05; }

/* --------------------------------------------------------------------------
   Tableau de guichets
   -------------------------------------------------------------------------- */
.table-guichets {
  width: 100%;
  border-collapse: collapse;
  background: var(--creme);
  border: 1px solid var(--reglet);
  font-size: .96rem;
  margin-top: 1.4rem;
}
.table-guichets caption {
  caption-side: top;
  text-align: left;
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: .82rem;
  color: var(--kaki-doux);
  padding-bottom: .6rem;
}
.table-guichets th, .table-guichets td {
  text-align: left;
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--reglet);
  vertical-align: top;
}
.table-guichets thead th {
  background: var(--kaki);
  color: var(--creme);
  font-family: "Cutive Mono", "Courier New", monospace;
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.table-guichets tbody tr:last-child td { border-bottom: 0; }
.date-cloture {
  font-family: "Cutive Mono", "Courier New", monospace;
  color: #8A4C05;
  white-space: nowrap;
}
.defilable { overflow-x: auto; }

/* --------------------------------------------------------------------------
   Preuve sociale
   -------------------------------------------------------------------------- */
.temoins {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
  margin-top: 1.8rem;
}
@media (max-width: 980px) { .temoins { grid-template-columns: minmax(0, 1fr); } }

.temoin {
  background: var(--creme);
  border: 1px solid var(--reglet);
  padding: 1.4rem 1.3rem 1.2rem 1.6rem;
  position: relative;
  margin: 0;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  transition: transform .22s var(--courbe), box-shadow .22s var(--courbe);
}
.temoin::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--kaki);
}
.temoin blockquote { margin: 0 0 1rem; }
.temoin blockquote p { font-size: 1.02rem; }
.temoin figcaption {
  border-top: 1px solid var(--reglet);
  padding-top: .7rem;
  font-size: .92rem;
  line-height: 1.5;
}
.temoin figcaption b { display: block; font-weight: 600; }
.temoin figcaption span {
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: .8rem;
  color: var(--kaki-doux);
}

.compteurs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 2.2rem;
  border: 1px solid var(--reglet);
  background: var(--creme);
}
@media (max-width: 860px) { .compteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.compteur {
  padding: 1.15rem 1.2rem;
  border-left: 1px solid var(--reglet);
}
.compteur:first-child { border-left: 0; }
@media (max-width: 860px) { .compteur:nth-child(3) { border-left: 0; } }
.compteur b {
  font-family: "Rokkitt", Georgia, serif;
  font-size: 2.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: block;
  line-height: 1.05;
}
.compteur span {
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: .8rem;
  color: var(--kaki-doux);
}

/* --------------------------------------------------------------------------
   Tarifs
   -------------------------------------------------------------------------- */
.grille-tarifs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
  margin-top: 2.4rem;
  align-items: stretch;
}
@media (max-width: 980px) { .grille-tarifs { grid-template-columns: minmax(0, 1fr); } }

.formule {
  background: var(--creme);
  border: 1px solid var(--reglet);
  padding: 1.5rem 1.4rem 1.6rem 1.7rem;
  position: relative;
  display: flex;
  flex-direction: column;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  transition: transform .22s var(--courbe), box-shadow .22s var(--courbe);
}
.formule::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--kaki);
  background-image: repeating-linear-gradient(to bottom, transparent 0 23%, rgba(251, 248, 242, .95) 23% calc(23% + 1px));
}
.formule--avant {
  margin-top: -16px;
  border-color: var(--kaki);
  box-shadow: var(--ombre-levee);
}
@media (max-width: 980px) { .formule--avant { margin-top: 0; } }
.formule__coiffe {
  background: var(--gyro);
  color: var(--gyro-texte);
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .4rem .8rem;
  margin: -1.5rem -1.4rem 1.2rem -1.7rem;
}
.formule__prix {
  font-family: "Rokkitt", Georgia, serif;
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: block;
}
.formule__unite {
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: .82rem;
  color: var(--kaki-doux);
  display: block;
  margin: .35rem 0 .9rem;
}
.formule__cible { font-size: .98rem; color: var(--kaki-doux); }
.formule ul { list-style: none; padding: 0; margin: 1rem 0 1.5rem; }
.formule li {
  position: relative;
  padding-left: 1.4rem;
  font-size: .96rem;
  margin-bottom: .55rem;
  line-height: 1.55;
}
.formule li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 8px; height: 8px;
  background: var(--kaki);
}
.formule .plaque { margin-top: auto; }

/* --------------------------------------------------------------------------
   Carnet de questions (FAQ)
   -------------------------------------------------------------------------- */
.carnet {
  width: min(100%, 780px);
  margin-inline: auto;
  margin-top: 1.8rem;
  border-top: 1px solid var(--reglet);
}
.carnet__ligne { border-bottom: 1px solid var(--reglet); }
.carnet__bouton {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  padding: 1.1rem .2rem;
  font-family: "Rokkitt", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--kaki-noir);
  line-height: 1.2;
}
.carnet__bouton:hover { color: #8A4C05; }
.carnet__croix {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  position: relative;
  margin-top: .2rem;
}
.carnet__croix::before,
.carnet__croix::after {
  content: "";
  position: absolute;
  background: var(--gyro);
  transition: transform .2s var(--courbe);
}
.carnet__croix::before { left: 0; right: 0; top: 9px; height: 2px; }
.carnet__croix::after { top: 0; bottom: 0; left: 9px; width: 2px; }
.carnet__bouton[aria-expanded="true"] .carnet__croix::after { transform: scaleY(0); }
.carnet__reponse { padding: 0 .2rem 1.2rem; }
.carnet__reponse p { font-size: 1rem; }
.carnet__reponse[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.poste-contact {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: start;
  margin-top: 1.8rem;
}
@media (max-width: 940px) { .poste-contact { grid-template-columns: minmax(0, 1fr); } }

.bordereau {
  background: var(--creme);
  border: 1px solid var(--reglet);
  padding: clamp(1.3rem, 3vw, 2rem);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.champ { margin-bottom: 1.05rem; }
.champ label {
  display: block;
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: .35rem;
}
.champ input[type="text"],
.champ input[type="email"],
.champ select,
.champ textarea {
  width: 100%;
  font-family: "Hind", system-ui, sans-serif;
  font-size: 1rem;
  color: var(--kaki-noir);
  background: var(--argile);
  border: 1px solid var(--reglet);
  border-radius: 0;
  padding: .65rem .75rem;
  min-height: 46px;
}
.champ textarea { min-height: 130px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: 3px solid var(--kaki);
  outline-offset: 1px;
  background: var(--creme);
}
.champ--accord label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .6rem;
  font-weight: 400;
  font-size: .93rem;
  line-height: 1.5;
  align-items: start;
}
.champ--accord input { width: 20px; height: 20px; margin-top: .18rem; }
.aide-champ {
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: .78rem;
  color: var(--kaki-doux);
  display: block;
  margin-top: .3rem;
}

.rappel-delais {
  background: var(--creme);
  border: 1px solid var(--reglet);
  padding: 1.3rem 1.3rem 1.3rem 1.6rem;
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.rappel-delais::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--gyro);
}
.rappel-delais h3 { margin-bottom: .5em; }
.rappel-delais ul { padding-left: 1.1rem; }
.rappel-delais li { font-size: .96rem; }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.pied {
  color: var(--kaki-noir);
  border-top: 2px solid var(--kaki);
  padding-block: clamp(2.6rem, 5vw, 4rem) 1.4rem;
  margin-top: 0;
}
.pied__colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
}
@media (max-width: 900px) { .pied__colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pied__colonnes { grid-template-columns: minmax(0, 1fr); } }
.pied h2 {
  font-size: 1rem;
  font-family: "Cutive Mono", "Courier New", monospace;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-top: .8rem;
  margin-bottom: .9rem;
}
.pied h2::before { width: 40px; background: var(--gyro); }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: .45rem; }
.pied a { color: var(--kaki-noir); text-decoration: none; border-bottom: 1px solid transparent; }
.pied a:hover { border-bottom-color: var(--gyro); }
.pied p { font-size: .95rem; }
.pied__social { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-top: .8rem; }
.pied__social a { font-family: "Cutive Mono", "Courier New", monospace; font-size: .82rem; }
.pied__barre {
  margin-top: 2.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--reglet);
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: .8rem;
  color: var(--kaki-doux);
  line-height: 1.7;
}
.pied__barre a { color: var(--kaki-doux); border-bottom: 1px solid var(--reglet); }

/* --------------------------------------------------------------------------
   Pages interieures
   -------------------------------------------------------------------------- */
.page-interieure { padding-block: clamp(2.4rem, 5vw, 4rem); }
.fil {
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: .8rem;
  color: var(--kaki-doux);
  margin-bottom: 1.4rem;
}
.fil a { color: var(--kaki-doux); }
.prose { width: min(100%, 74ch); }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.7rem; }
.prose ul { padding-left: 1.2rem; }
.prose dl { margin: 0 0 1.2rem; }
.prose dt { font-weight: 600; margin-top: .9rem; }
.prose dd { margin: 0 0 .4rem; }

.encart {
  background: var(--creme);
  border: 1px solid var(--reglet);
  padding: 1.2rem 1.3rem 1.2rem 1.6rem;
  position: relative;
  margin: 1.6rem 0;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.encart::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--kaki);
}
.encart p:last-child { margin-bottom: 0; }

.portrait-auteur {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
  margin-bottom: 2rem;
}
@media (max-width: 700px) { .portrait-auteur { grid-template-columns: minmax(0, 1fr); } }
.portrait-auteur img {
  border: 1px solid var(--reglet);
  background: var(--creme);
  padding: 5px;
  filter: saturate(.85);
}

.liste-profils { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.liste-profils a {
  display: inline-block;
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: .85rem;
  border: 1px solid var(--reglet);
  background: var(--creme);
  padding: .4rem .75rem;
  text-decoration: none;
  color: var(--kaki-noir);
}
.liste-profils a:hover { border-color: var(--gyro); }

.plan-liste { list-style: none; padding: 0; }
.plan-liste > li {
  border-bottom: 1px solid var(--reglet);
  padding: .9rem 0;
}
.plan-liste a { font-family: "Rokkitt", Georgia, serif; font-size: 1.15rem; font-weight: 600; text-decoration: none; }
.plan-liste p { margin: .25rem 0 0; font-size: .97rem; color: var(--kaki-doux); }

.bloc-centre {
  text-align: left;
  width: min(100%, 640px);
  margin-inline: auto;
  padding-block: clamp(3rem, 8vw, 6rem);
}
.bloc-centre .code-erreur {
  font-family: "Rokkitt", Georgia, serif;
  font-size: 6rem;
  font-weight: 700;
  line-height: .9;
  color: var(--gyro);
  display: block;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Apparition au defilement
   -------------------------------------------------------------------------- */
.au-defilement {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--courbe), transform .5s var(--courbe);
}
.au-defilement.est-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Reglages typographiques mobiles
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  h1 { font-size: 2.3rem; }
  h2 { font-size: 1.72rem; }
  .cadran__valeur { font-size: 3rem; }
  .cadran__valeur--court { font-size: 2.4rem; }
  .gain__nombre { font-size: 3rem; }
  .formule__prix { font-size: 3rem; }
}

/* --------------------------------------------------------------------------
   Mouvement reduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .inclinable:hover,
  .inclinable:focus-within,
  .plaque--vive:hover,
  .plaque--kaki:hover { transform: none; }
  .inclinable:hover { border-color: var(--kaki); }
  .au-defilement { opacity: 1; transform: none; }
}

@media print {
  .entete, .bouton-menu, .nav-ancres, .plaque { display: none !important; }
  body { background: #fff; }
}

/* ==========================================================================
   LE CARNET DE GUICHET, section magazine
   Ajout en fin de feuille: aucune regle precedente n est modifiee.
   Vocabulaire de nommage, dans la continuite de l atelier de concession:
   carnet   = le magazine et sa page d index,
   feuillet = carte d article, avec sa jauge de bord gauche et son biseau,
   reperes  = ligne d angle, de dates et de temps de lecture d un article,
   corps-article = colonne de lecture, balises nues mises en forme ici,
   chute    = bloc de fin d article qui ramene vers l outil,
   parution = ligne de la liste des articles publies.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fil d Ariane du magazine
   -------------------------------------------------------------------------- */
.fil-carnet {
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: .8rem;
  color: var(--kaki-doux);
  padding-top: 1.4rem;
}
.fil-carnet ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0;
  padding: 0;
}
.fil-carnet li { margin: 0; }
.fil-carnet li + li::before {
  content: "/";
  color: var(--reglet);
  margin-right: .45rem;
}
.fil-carnet a { color: var(--kaki-doux); }

/* --------------------------------------------------------------------------
   Entete de la page d index du magazine
   -------------------------------------------------------------------------- */
.carnet-tete { padding-block: clamp(2.2rem, 5vw, 3.6rem) 0; }
.carnet-tete h1 { max-width: 22ch; }
.carnet-chapo {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--kaki-doux);
  max-width: 64ch;
}

/* bandeau de reperes du numero, dans l esprit des cadrans du pupitre */
.bandeau-carnet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--creme);
  border: 1px solid var(--reglet);
  margin-top: 2rem;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.bandeau-carnet > div {
  padding: 1rem 1.15rem;
  border-left: 1px solid var(--reglet);
}
.bandeau-carnet > div:first-child { border-left: 0; }
.bandeau-carnet b {
  display: block;
  font-family: "Rokkitt", Georgia, serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.bandeau-carnet span {
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: .8rem;
  color: var(--kaki-doux);
}
@media (max-width: 720px) {
  .bandeau-carnet { grid-template-columns: minmax(0, 1fr); }
  .bandeau-carnet > div { border-left: 0; border-top: 1px solid var(--reglet); }
  .bandeau-carnet > div:first-child { border-top: 0; }
}

/* --------------------------------------------------------------------------
   Grille des cartes d article et carte d article
   -------------------------------------------------------------------------- */
.sommaire-carnet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
  margin-top: 2rem;
}
@media (max-width: 1020px) { .sommaire-carnet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 660px) { .sommaire-carnet { grid-template-columns: minmax(0, 1fr); } }

.feuillet {
  display: flex;
  flex-direction: column;
  background: var(--creme);
  border: 1px solid var(--reglet);
  padding: 0 0 1.2rem;
  margin: 0;
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  transition: transform .22s var(--courbe), box-shadow .22s var(--courbe), border-color .22s var(--courbe);
}
.feuillet::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--kaki);
  background-image: repeating-linear-gradient(to bottom, transparent 0 23%, rgba(251, 248, 242, .95) 23% calc(23% + 1px));
  z-index: 2;
}
/* premiere carte du sommaire: pastille d alerte orange logee dans le biseau */
.feuillet--tete::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-top: var(--biseau) solid var(--gyro);
  border-left: var(--biseau) solid transparent;
  transition: border-top-color .22s var(--courbe);
  z-index: 2;
}
.feuillet--tete:hover::after { border-top-color: #E08A22; }

.feuillet__cadre {
  display: block;
  position: relative;
  margin: 6px 6px 0 10px;
  background: var(--argile-creuse);
}
.feuillet__cadre img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(.82) contrast(1.02);
}
.feuillet__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(79, 93, 49, .3), rgba(79, 93, 49, .1) 40%, rgba(79, 93, 49, .05));
  mix-blend-mode: multiply;
  pointer-events: none;
}
.feuillet__voile::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(92, 97, 73, .55);
}

.feuillet__corps {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.05rem 1.2rem 0 1.5rem;
}
.feuillet__angle {
  display: block;
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kaki-doux);
  margin-bottom: .55rem;
}
.feuillet__titre {
  font-family: "Rokkitt", Georgia, serif;
  font-weight: 700;
  font-size: 1.32rem;
  line-height: 1.12;
  margin: 0 0 .55rem;
  padding-top: 0;
  max-width: none;
}
.feuillet__titre::before { content: none; }
.feuillet__titre a {
  color: var(--kaki-noir);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.feuillet__titre a:hover,
.feuillet__titre a:focus-visible { border-bottom-color: var(--gyro); }
.feuillet__extrait {
  font-size: .98rem;
  color: var(--kaki-doux);
  margin-bottom: .9rem;
  max-width: none;
}
.feuillet__pied {
  margin: auto 0 0;
  padding-top: .6rem;
  border-top: 1px dashed var(--reglet);
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: .8rem;
  color: var(--kaki-doux);
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .8rem;
  max-width: none;
}
.feuillet--compact .feuillet__titre { font-size: 1.15rem; }
.feuillet--compact .feuillet__corps { padding-top: .9rem; }

/* --------------------------------------------------------------------------
   Entete d un article: angle, titre, dates, temps de lecture, chapeau
   -------------------------------------------------------------------------- */
.article-carnet { display: block; }
.tete-article { width: min(100%, 72ch); }
.tete-article h1 { margin-bottom: .35em; }

.reperes {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  align-items: center;
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: .82rem;
  color: var(--kaki-doux);
  border-top: 1px solid var(--reglet);
  border-bottom: 1px solid var(--reglet);
  padding: .6rem 0;
  margin-bottom: 1.6rem;
}
.reperes__angle {
  background: var(--kaki);
  color: var(--creme);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .18rem .55rem;
}
.reperes time { white-space: nowrap; }

.exergue {
  background: var(--creme);
  border: 1px solid var(--reglet);
  padding: 1.15rem 1.3rem 1.15rem 1.6rem;
  position: relative;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--kaki-noir);
  margin: 0 0 1.6rem;
  max-width: none;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.exergue::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--kaki);
  background-image: repeating-linear-gradient(to bottom, transparent 0 23%, rgba(251, 248, 242, .95) 23% calc(23% + 1px));
}

.piece-une { margin: 0 0 clamp(2rem, 4vw, 3rem); }

/* --------------------------------------------------------------------------
   Corps redactionnel: balises nues, aucune classe dans le texte des articles
   -------------------------------------------------------------------------- */
.corps-article {
  width: min(100%, 68ch);
  font-size: 1.05rem;
  line-height: 1.68;
}
.corps-article > *:first-child { margin-top: 0; }

.corps-article h2 {
  font-family: "Rokkitt", Georgia, serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.08;
  margin: 2.8rem 0 .6em;
  padding-top: .55em;
  position: relative;
}
.corps-article h3 {
  font-family: "Rokkitt", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.14;
  margin: 1.9rem 0 .5em;
}
.corps-article p { margin: 0 0 1.05em; max-width: none; }

.corps-article ul,
.corps-article ol {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4em;
  counter-reset: point-carnet;
}
.corps-article li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .5em;
  line-height: 1.6;
}
.corps-article ul > li::before {
  content: "";
  position: absolute;
  left: 0; top: .58em;
  width: 8px; height: 8px;
  background: var(--kaki);
}
.corps-article ol > li {
  counter-increment: point-carnet;
  padding-left: 2.1rem;
}
.corps-article ol > li::before {
  content: counter(point-carnet, decimal-leading-zero);
  position: absolute;
  left: 0; top: .06em;
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: .82rem;
  letter-spacing: .06em;
  color: #8A4C05;
}
.corps-article li > ul,
.corps-article li > ol { margin: .5em 0 0; }

.corps-article table {
  width: 100%;
  border-collapse: collapse;
  background: var(--creme);
  border: 1px solid var(--reglet);
  font-size: .95rem;
  margin: 1.8rem 0 2rem;
}
.corps-article th,
.corps-article td {
  text-align: left;
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--reglet);
  vertical-align: top;
}
.corps-article thead th {
  background: var(--kaki);
  color: var(--creme);
  font-family: "Cutive Mono", "Courier New", monospace;
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.corps-article tbody tr:last-child td { border-bottom: 0; }
.corps-article tbody th {
  font-family: "Hind", system-ui, sans-serif;
  font-weight: 600;
}
@media (max-width: 640px) {
  .corps-article table { display: block; overflow-x: auto; }
}

.corps-article blockquote {
  margin: 1.8rem 0;
  padding: .2rem 0 .2rem 1.3rem;
  border-left: 4px solid var(--gyro);
  font-family: "Rokkitt", Georgia, serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--kaki-noir);
}
.corps-article blockquote p { margin-bottom: .5em; }
.corps-article blockquote p:last-child { margin-bottom: 0; }

.corps-article aside {
  background: var(--creme);
  border: 1px solid var(--reglet);
  padding: 1.15rem 1.3rem 1.15rem 1.6rem;
  position: relative;
  margin: 1.9rem 0;
  font-size: .99rem;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.corps-article aside::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--gyro);
}
.corps-article aside::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-top: var(--biseau) solid var(--gyro);
  border-left: var(--biseau) solid transparent;
}
.corps-article aside > *:last-child { margin-bottom: 0; }

.corps-article figure {
  margin: 1.8rem 0;
  border: 1px solid var(--reglet);
  background: var(--creme);
  padding: 6px 6px 10px;
}
.corps-article figcaption {
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: .8rem;
  color: var(--kaki-doux);
  padding: .55rem .4rem 0;
}

.corps-article a {
  color: var(--kaki);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.corps-article a:hover {
  color: var(--gyro-texte);
  text-decoration-color: var(--gyro);
}
.corps-article strong { font-weight: 600; }
.corps-article em { font-style: italic; }

/* --------------------------------------------------------------------------
   Chute d article: rappel de l outil et appel a l action
   -------------------------------------------------------------------------- */
.chute-article {
  width: min(100%, 68ch);
  background: var(--argile-creuse);
  border: 1px solid var(--reglet);
  padding: 1.5rem 1.5rem 1.6rem 1.8rem;
  position: relative;
  margin-top: 2.6rem;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.chute-article::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--gyro);
}
.chute-article__titre {
  font-family: "Rokkitt", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 .6rem;
  max-width: none;
}
.chute-article__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.2rem;
}

/* --------------------------------------------------------------------------
   Encart auteur
   -------------------------------------------------------------------------- */
.encart-auteur {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 1.3rem;
  align-items: start;
  width: min(100%, 68ch);
  background: var(--creme);
  border: 1px solid var(--reglet);
  padding: 1.4rem 1.4rem 1.4rem 1.7rem;
  position: relative;
  margin-top: 2.4rem;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.encart-auteur::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--kaki);
  background-image: repeating-linear-gradient(to bottom, transparent 0 23%, rgba(251, 248, 242, .95) 23% calc(23% + 1px));
}
.encart-auteur img {
  border: 1px solid var(--reglet);
  background: var(--argile);
  padding: 4px;
  filter: saturate(.85);
}
.encart-auteur__mention {
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kaki-doux);
  display: block;
  margin-bottom: .35rem;
}
.encart-auteur__nom {
  font-family: "Rokkitt", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 .5rem;
  max-width: none;
}
.encart-auteur p { font-size: .99rem; max-width: none; }
.encart-auteur p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  .encart-auteur { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Bloc A lire aussi, et section Derniers articles de la page d accueil
   -------------------------------------------------------------------------- */
.lire-aussi { padding-block: clamp(2.8rem, 6vw, 4.4rem); }
.lire-aussi__tete { width: min(100%, 62ch); }
.lire-aussi__titre {
  font-family: "Rokkitt", Georgia, serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 .5rem;
  padding-top: .55em;
  position: relative;
  max-width: none;
}
.lire-aussi__titre::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 64px; height: 2px;
  background: var(--gyro);
}

.carnet-appel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem;
  margin-top: 2rem;
}
.carnet-appel .mention { margin: 0; }

/* --------------------------------------------------------------------------
   Liste des parutions, page auteur et page plan du site
   -------------------------------------------------------------------------- */
.parutions { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.parutions > li {
  border-bottom: 1px solid var(--reglet);
  padding: .9rem 0 .9rem 1.1rem;
  position: relative;
}
.parutions > li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.15rem;
  width: 4px; height: 18px;
  background: var(--kaki);
}
.parutions a {
  font-family: "Rokkitt", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
}
.parutions a:hover { color: #8A4C05; }
.parutions__ligne {
  display: block;
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: .8rem;
  color: var(--kaki-doux);
  margin-top: .2rem;
}

/* --------------------------------------------------------------------------
   Pied de page des pages du magazine
   Les intertitres du pied y sont des paragraphes: dans un article, seuls le
   corps redactionnel et le bloc A lire aussi portent des h2 et des h3.
   -------------------------------------------------------------------------- */
.pied__titre {
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-top: .8rem;
  margin-bottom: .9rem;
  position: relative;
}
.pied__titre::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 40px; height: 2px;
  background: var(--gyro);
}

/* --------------------------------------------------------------------------
   Reglages mobiles et mouvement reduit propres au magazine
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .corps-article h2 { font-size: 1.72rem; }
  .corps-article blockquote { font-size: 1.2rem; }
  .lire-aussi__titre { font-size: 1.72rem; }
  .bandeau-carnet b { font-size: 2rem; }
  .chute-article__titre { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .feuillet:hover,
  .feuillet:focus-within { transform: none; border-color: var(--kaki); }
}

@media print {
  .fil-carnet, .chute-article__actions, .lire-aussi { display: none !important; }
  .corps-article { width: 100%; }
}