/* ==========================================================================
   Liassia, feuille de style unique
   Vocabulaire de nommage: la chemise a rabats du cabinet.
   pupitre = contenance, liasse = section, cadre = forme signature,
   cote = numero de piece, tampon = bouton, filet = separateur,
   damier = motif signature, marge = annotation laterale.
   ========================================================================== */

:root {
  --porcelaine: #F6F7F1;
  --celadon-pale: #E7EEE4;
  --papier: #FFFFFF;
  --encre: #161A14;
  --encre-douce: #5A6154;
  --olive: #4A5218;
  --olive-sombre: #343A10;
  --olive-clair: #6C7629;
  --olive-texte: #FBFCF5;
  --celadon: #6F9280;
  --filet: #C8CFBC;
  --rouille: #8A5A3B;

  --titre: "Yeseva One", Georgia, "Times New Roman", serif;
  --courant: "Figtree", "Segoe UI", Helvetica, Arial, sans-serif;
  --greffe: "Radley", Georgia, "Times New Roman", serif;

  --largeur: 1180px;
  --gouttiere: 2.25rem;
  --biseau: 12px;
  --rythme: clamp(3.5rem, 7vw, 6rem);
}

/* --------------------------------------------------------------------------
   Assises
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--porcelaine);
  color: var(--encre);
  font-family: var(--courant);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

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

a:hover { color: var(--olive-sombre); }

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

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  letter-spacing: -0.01em;
  line-height: 1.08;
}

h1, h2 { font-family: var(--titre); font-weight: 400; }
h1 { font-size: 3.25rem; }
h2 { font-size: 2.15rem; }
h3 { font-family: var(--courant); font-weight: 600; font-size: 1.35rem; line-height: 1.3; }
h4 { font-family: var(--courant); font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }

p { margin: 0 0 1.1rem; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--olive);
  color: var(--olive-texte);
  padding: .7rem 1.2rem;
  z-index: 200;
  font-weight: 600;
}
.evitement:focus { left: 0; }

.hors-vue {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Motif signature: triangles imbriques en damier
   -------------------------------------------------------------------------- */

.damier {
  height: 6px;
  width: 100%;
  background-image:
    linear-gradient(45deg, var(--olive) 25%, transparent 25%, transparent 75%, var(--celadon) 75%, var(--celadon)),
    linear-gradient(45deg, var(--celadon) 25%, transparent 25%, transparent 75%, var(--olive) 75%, var(--olive));
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
  background-repeat: repeat-x;
}

.damier--epais { height: 10px; }

.damier--pale {
  opacity: .5;
}

/* --------------------------------------------------------------------------
   Forme signature: le cadre de tampon, double filet et coin rabattu
   -------------------------------------------------------------------------- */

.cadre {
  position: relative;
  background: var(--papier);
  border: 1px solid var(--olive);
  padding: 3px;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}

.cadre::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--celadon);
  pointer-events: none;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.cadre::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--biseau);
  height: var(--biseau);
  background: var(--celadon);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.cadre > .cadre-fond {
  position: relative;
  padding: 1.7rem 1.6rem;
  height: 100%;
}

/* --------------------------------------------------------------------------
   Contenance et grille de journal
   -------------------------------------------------------------------------- */

.pupitre {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.liasse {
  padding: var(--rythme) 0;
  position: relative;
}

.liasse--celadon { background: var(--celadon-pale); }
.liasse--papier { background: var(--papier); }

.filet-tete {
  border-top: 1px solid var(--filet);
  padding-top: 1.4rem;
}

.surtitre {
  font-family: var(--greffe);
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--olive);
  margin: 0 0 .9rem;
  display: block;
}

.chapeau {
  font-size: 1.125rem;
  color: var(--encre-douce);
  max-width: 58ch;
}

.tete-liasse {
  margin-bottom: 2.6rem;
  border-top: 1px solid var(--filet);
  padding-top: 1.5rem;
}

.tete-liasse h2 { max-width: 20ch; }

.colonnes {
  display: grid;
  gap: 0;
}

/* Colonnes de journal separees par des filets fins */
.colonnes--trois {
  grid-template-columns: repeat(3, 1fr);
}
.colonnes--trois > * {
  padding: 0 var(--gouttiere);
  border-left: 1px solid var(--filet);
}
.colonnes--trois > *:first-child { padding-left: 0; border-left: 0; }
.colonnes--trois > *:last-child { padding-right: 0; }

.colonnes--quatre { grid-template-columns: repeat(4, 1fr); }
.colonnes--quatre > * {
  padding: 0 1.6rem;
  border-left: 1px solid var(--filet);
}
.colonnes--quatre > *:first-child { padding-left: 0; border-left: 0; }
.colonnes--quatre > *:last-child { padding-right: 0; }

.colonnes--deux { grid-template-columns: 1fr 1fr; gap: 0 var(--gouttiere); }

/* --------------------------------------------------------------------------
   En tete fixe
   -------------------------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246, 247, 241, .96);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition: box-shadow .2s ease;
}

.entete > .damier { position: relative; z-index: 2; }

.entete-corps {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: height .2s ease;
}

.entete.est-tassee { border-bottom: 1px solid var(--olive); }
.entete.est-tassee .entete-corps { height: 58px; }

.logotype {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: var(--encre);
  font-family: var(--titre);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1;
}

.logotype svg { flex: none; }
.logotype:hover { color: var(--olive); }

.nav-ancres {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-left: auto;
}

.nav-ancres a {
  font-weight: 500;
  font-size: .96rem;
  color: var(--encre);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}

.nav-ancres a:hover,
.nav-ancres a:focus-visible { border-bottom-color: var(--olive); color: var(--olive); }

.bouton-rabat {
  display: none;
  align-items: center;
  gap: .5rem;
  background: transparent;
  border: 1px solid var(--olive);
  color: var(--olive);
  font-family: var(--courant);
  font-weight: 600;
  font-size: .9rem;
  padding: .5rem .8rem;
  border-radius: 3px;
  cursor: pointer;
}

.barres { display: block; width: 18px; height: 10px; position: relative; }
.barres::before,
.barres::after,
.barres span {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: var(--olive);
}
.barres::before { top: 0; }
.barres span { top: 4.25px; }
.barres::after { bottom: 0; }

/* Panneau mobile */
.rabat {
  position: fixed;
  inset: 0;
  background: var(--porcelaine);
  z-index: 150;
  padding: 1.2rem 1.5rem 2.5rem;
  overflow-y: auto;
}

.rabat[hidden] { display: none; }

.rabat-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--filet);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.rabat-fermer {
  background: transparent;
  border: 1px solid var(--olive);
  color: var(--olive);
  font-family: var(--courant);
  font-weight: 600;
  font-size: .9rem;
  padding: .45rem .8rem;
  border-radius: 3px;
  cursor: pointer;
}

.rabat ul { list-style: none; margin: 0; padding: 0; }
.rabat li { border-bottom: 1px solid var(--filet); }
.rabat li a {
  display: block;
  padding: .95rem .2rem;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--encre);
  text-decoration: none;
}
.rabat li a:hover { color: var(--olive); }
.rabat .tampon { margin-top: 1.6rem; width: 100%; justify-content: center; }

body.rabat-ouvert { overflow: hidden; }

/* --------------------------------------------------------------------------
   Tampons (boutons)
   -------------------------------------------------------------------------- */

.tampon {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  padding: .82rem 1.35rem;
  border-radius: 3px;
  border: 1px solid var(--olive-sombre);
  background: var(--olive);
  color: var(--olive-texte);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(52, 58, 16, .35);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  transition: background-color .15s ease, transform .12s ease, box-shadow .12s ease, clip-path .15s ease;
}

.tampon:hover {
  background: var(--olive-sombre);
  color: var(--olive-texte);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.tampon.est-appuye {
  transform: translateY(2px);
  box-shadow: none;
}

.tampon--creux {
  background: transparent;
  color: var(--olive);
  border: 1px solid var(--olive);
  box-shadow: inset 0 0 0 3px var(--porcelaine), inset 0 0 0 4px var(--celadon);
}

.tampon--creux:hover {
  background: var(--celadon-pale);
  color: var(--olive);
}

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

.encre {
  position: absolute;
  border-radius: 50%;
  background: rgba(74, 82, 24, .18);
  transform: scale(0);
  pointer-events: none;
  animation: prise-encre 180ms ease-out forwards;
}

.tampon .encre { background: rgba(251, 252, 245, .35); }
.tampon--creux .encre { background: rgba(74, 82, 24, .15); }

@keyframes prise-encre {
  to { transform: scale(2.6); opacity: 0; }
}

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

.hero {
  padding: clamp(3rem, 6vw, 5rem) 0 var(--rythme);
  background: var(--porcelaine);
}

.hero-grille {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 0;
}

.hero-texte { padding-right: var(--gouttiere); }

.hero-cote {
  padding-left: var(--gouttiere);
  border-left: 1px solid var(--filet);
}

.hero h1 { margin-bottom: 1.1rem; }

.hero .chapeau { margin-bottom: 1.8rem; }

.rangee-tampons {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: 1.6rem;
}

.reassurance {
  font-family: var(--greffe);
  font-size: .95rem;
  color: var(--encre-douce);
  border-top: 1px solid var(--filet);
  padding-top: 1rem;
  max-width: 46ch;
}

.reassurance strong { color: var(--olive); font-weight: 400; }

.cliche { margin: 0; }

.cliche .cadre-fond { padding: 10px; }

.cliche img {
  filter: saturate(.9);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.cliche figcaption {
  font-family: var(--greffe);
  font-size: .8125rem;
  color: var(--encre-douce);
  padding: .7rem 10px 0;
  line-height: 1.5;
}

/* Bordereau miniature du hero */
.bordereau-vif {
  margin-top: 1.4rem;
  font-size: .9rem;
}

.bordereau-vif table { border-collapse: collapse; width: 100%; }

.bordereau-vif caption {
  font-family: var(--greffe);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  color: var(--olive);
  text-align: left;
  padding-bottom: .5rem;
}

.bordereau-vif th {
  font-family: var(--greffe);
  font-weight: 400;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--encre-douce);
  text-align: left;
  border-bottom: 1px solid var(--olive);
  padding: .35rem .4rem;
}

.bordereau-vif td {
  border-bottom: 1px solid var(--filet);
  padding: .45rem .4rem;
  vertical-align: top;
  font-size: .88rem;
  transition: background-color .15s ease, transform .12s ease;
}

.bordereau-vif tr.est-appuye td { transform: translateY(1px); background: var(--celadon-pale); }

.cote {
  font-family: var(--greffe);
  color: var(--olive);
  white-space: nowrap;
  font-size: .9rem;
}

.visa-ok { color: var(--celadon); font-weight: 600; font-size: .82rem; }
.visa-alerte { color: var(--rouille); font-weight: 600; font-size: .82rem; }

/* --------------------------------------------------------------------------
   Annotation de marge
   -------------------------------------------------------------------------- */

.marge {
  font-family: var(--greffe);
  font-size: .9rem;
  color: var(--rouille);
  border-left: 2px solid var(--rouille);
  padding: .2rem 0 .2rem .9rem;
  margin: 1.2rem 0;
  line-height: 1.55;
  transform: rotate(-.35deg);
  max-width: 40ch;
}

.marge--verte { color: var(--olive); border-left-color: var(--celadon); }

/* --------------------------------------------------------------------------
   Probleme
   -------------------------------------------------------------------------- */

.colonne-journal h3 { margin-top: 0; }

.colonne-journal p { font-size: 1rem; }

.chiffre-marge {
  font-family: var(--titre);
  font-size: 2.4rem;
  color: var(--olive);
  line-height: 1;
  display: block;
  margin-bottom: .5rem;
}

.rappel-code {
  font-family: var(--greffe);
  font-size: .875rem;
  color: var(--encre-douce);
  border-top: 1px solid var(--filet);
  margin-top: 1rem;
  padding-top: .7rem;
}

.bande-cout {
  margin-top: 2.6rem;
  border-top: 1px solid var(--olive);
  border-bottom: 1px solid var(--olive);
  padding: 1.3rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: baseline;
}

.bande-cout p {
  margin: 0;
  font-family: var(--greffe);
  font-size: 1rem;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Solution, quatre temps
   -------------------------------------------------------------------------- */

.temps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  counter-reset: temps;
}

.temps > li {
  list-style: none;
  padding: 0 1.6rem;
  border-left: 1px solid var(--filet);
  counter-increment: temps;
}

.temps > li:first-child { padding-left: 0; border-left: 0; }
.temps > li:last-child { padding-right: 0; }

.temps > li::before {
  content: counter(temps, decimal-leading-zero);
  font-family: var(--greffe);
  font-size: 1.4rem;
  color: var(--olive);
  display: inline-block;
  border-bottom: 2px solid var(--celadon);
  padding-bottom: .2rem;
  margin-bottom: .9rem;
}

.temps h3 { font-size: 1.15rem; }
.temps p { font-size: .98rem; }

.solution-photo { margin-top: 3rem; }

.solution-duo {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--gouttiere);
  align-items: center;
  margin-top: 3rem;
}

/* --------------------------------------------------------------------------
   Fonctionnalites
   -------------------------------------------------------------------------- */

.grille-fiches {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

.fiche {
  padding: 1.9rem var(--gouttiere) 1.9rem 0;
  border-bottom: 1px solid var(--filet);
  transition: transform .12s ease, background-color .15s ease;
}

.fiche:nth-child(even) {
  padding-right: 0;
  padding-left: var(--gouttiere);
  border-left: 1px solid var(--filet);
}

.fiche.est-appuye { transform: translateY(2px); }

.fiche h3 { display: flex; align-items: baseline; gap: .6rem; }

.fiche-cote {
  font-family: var(--greffe);
  font-size: .82rem;
  color: var(--olive-texte);
  background: var(--olive);
  padding: .12rem .45rem;
  border-radius: 2px;
  flex: none;
}

.fiche p { font-size: 1rem; margin-bottom: 0; }

/* Puces en triangle */
.puces-triangle { list-style: none; margin: 0; padding: 0; }

.puces-triangle li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: .55rem;
  font-size: .98rem;
}

.puces-triangle li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 0; height: 0;
  border-left: 6px solid var(--olive);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

/* --------------------------------------------------------------------------
   Avantages
   -------------------------------------------------------------------------- */

.chiffre-greffe {
  font-family: var(--titre);
  font-size: 2.9rem;
  color: var(--olive);
  line-height: 1;
  display: block;
  margin-bottom: .55rem;
}

.avantage h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.avantage p { font-size: .95rem; color: var(--encre-douce); }

.encart-calcul {
  margin-top: 2.8rem;
  max-width: 760px;
}

.encart-calcul .cadre-fond { padding: 2rem 1.9rem; }

/* --------------------------------------------------------------------------
   Preuve sociale
   -------------------------------------------------------------------------- */

.liasse-preuve { position: relative; overflow: hidden; }

.filigrane {
  position: absolute;
  inset: 0;
  opacity: .12;
  pointer-events: none;
}

.liasse-preuve .pupitre { position: relative; z-index: 1; }

.temoignages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.parole .cadre-fond { display: flex; flex-direction: column; height: 100%; }

.parole blockquote {
  margin: 0 0 1.1rem;
  font-family: var(--greffe);
  font-size: 1.02rem;
  line-height: 1.65;
  flex: 1;
}

.parole blockquote p { max-width: none; }

.parole figcaption {
  border-top: 1px solid var(--filet);
  padding-top: .8rem;
  font-size: .875rem;
  color: var(--encre-douce);
  line-height: 1.5;
}

.parole figcaption strong { display: block; color: var(--encre); font-weight: 600; font-size: .95rem; }

.bandeau-chiffres {
  margin-top: 2.8rem;
  border-top: 1px solid var(--olive);
  border-bottom: 1px solid var(--olive);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--papier);
}

.bandeau-chiffres > div {
  padding: 1.5rem 1.4rem;
  border-left: 1px solid var(--filet);
}
.bandeau-chiffres > div:first-child { border-left: 0; }

.bandeau-chiffres b {
  display: block;
  font-family: var(--titre);
  font-weight: 400;
  font-size: 2.1rem;
  color: var(--olive);
  line-height: 1.05;
  margin-bottom: .3rem;
}

.bandeau-chiffres span {
  font-family: var(--greffe);
  font-size: .875rem;
  color: var(--encre-douce);
  line-height: 1.45;
  display: block;
}

/* --------------------------------------------------------------------------
   Tarifs
   -------------------------------------------------------------------------- */

.formules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  align-items: start;
}

.formule .cadre-fond { display: flex; flex-direction: column; height: 100%; padding: 1.9rem 1.6rem; }

.formule--phare { border-color: var(--olive-sombre); }
.formule--phare .damier { margin: -3px -3px 0; width: auto; }

.formule h3 {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.6rem;
  margin-bottom: .2rem;
}

.formule .cible {
  font-size: .92rem;
  color: var(--encre-douce);
  min-height: 3.2em;
  margin-bottom: 1rem;
}

.prix {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  padding: .9rem 0;
  margin-bottom: 1.2rem;
}

.prix b {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 2.6rem;
  color: var(--olive);
  line-height: 1;
}

.prix span { font-family: var(--greffe); font-size: .85rem; color: var(--encre-douce); }

.formule .puces-triangle { flex: 1; margin-bottom: 1.5rem; }
.formule .puces-triangle li { font-size: .93rem; }

.etiquette-phare {
  font-family: var(--greffe);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--olive);
  display: block;
  margin: .9rem 0 .2rem;
}

.note-tarifs {
  margin-top: 2rem;
  font-size: .95rem;
  color: var(--encre-douce);
  border-top: 1px solid var(--filet);
  padding-top: 1.2rem;
  max-width: 70ch;
}

/* --------------------------------------------------------------------------
   Foire aux questions
   -------------------------------------------------------------------------- */

.questions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--gouttiere);
}

.questions > div:last-child { border-left: 1px solid var(--filet); padding-left: var(--gouttiere); }

.question {
  border-bottom: 1px solid var(--filet);
}

.question summary {
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 2rem 1.05rem 0;
  font-weight: 600;
  font-size: 1.02rem;
  position: relative;
  color: var(--encre);
}

.question summary::-webkit-details-marker { display: none; }

.question summary::after {
  content: "";
  position: absolute;
  right: .3rem;
  top: 1.5rem;
  width: 0; height: 0;
  border-left: 7px solid var(--olive);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: transform .18s ease;
}

.question[open] summary::after { transform: rotate(90deg); }
.question summary:hover { color: var(--olive); }

.question-corps { padding: 0 1.5rem 1.2rem 0; }
.question-corps p { font-size: .98rem; color: var(--encre-douce); }
.question-corps p strong { color: var(--encre); }

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

.contact-grille {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--gouttiere);
  align-items: start;
}

.contact-argument { border-right: 0; }

.formulaire .cadre-fond { padding: 2rem 1.8rem; }

.champ { margin-bottom: 1.1rem; }

.champ label {
  display: block;
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: .35rem;
}

.champ .aide {
  display: block;
  font-family: var(--greffe);
  font-size: .82rem;
  color: var(--encre-douce);
  font-weight: 400;
  margin-top: .15rem;
}

.champ input[type="text"],
.champ input[type="email"],
.champ select,
.champ textarea {
  width: 100%;
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--encre);
  background: var(--porcelaine);
  border: 1px solid var(--filet);
  border-radius: 2px;
  padding: .65rem .7rem;
}

.champ textarea { resize: vertical; line-height: 1.6; }

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: 2px solid var(--olive);
  outline-offset: 1px;
  border-color: var(--olive);
  background: var(--papier);
}

.champ-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }

.consentement {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  font-size: .9rem;
  line-height: 1.55;
  border-top: 1px solid var(--filet);
  padding-top: 1.1rem;
  margin-bottom: 1.3rem;
}

.consentement input { margin-top: .25rem; accent-color: var(--olive); flex: none; }

.suite-formulaire {
  font-family: var(--greffe);
  font-size: .875rem;
  color: var(--encre-douce);
  margin-top: 1.1rem;
  border-top: 1px solid var(--filet);
  padding-top: .9rem;
}

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

.pied {
  background: var(--encre);
  color: #D9DCD3;
  padding: var(--rythme) 0 0;
  font-size: .95rem;
}

.pied a { color: #D9DCD3; text-decoration: none; }
.pied a:hover { color: #FFFFFF; text-decoration: underline; }

.pied h4 {
  font-family: var(--greffe);
  font-weight: 400;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--celadon);
  margin-bottom: .9rem;
}

.pied-colonnes {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 0;
}

.pied-colonnes > div {
  padding: 0 1.8rem;
  border-left: 1px solid rgba(217, 220, 211, .18);
}
.pied-colonnes > div:first-child { padding-left: 0; border-left: 0; }
.pied-colonnes > div:last-child { padding-right: 0; }

.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: .5rem; }

.pied .logotype { color: #FFFFFF; }
.pied .logotype:hover { color: var(--celadon); }

.pied-phrase { color: #AEB4A6; margin: 1rem 0 1.1rem; font-size: .92rem; max-width: 34ch; }

.reseaux { display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .88rem; }

.pied-editeur { color: #AEB4A6; font-size: .85rem; line-height: 1.6; margin-top: 1rem; }

.barre-bas {
  margin-top: 2.8rem;
  border-top: 1px solid rgba(217, 220, 211, .18);
  padding: 1.3rem 0;
  font-size: .85rem;
  color: #AEB4A6;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  justify-content: space-between;
}

.barre-bas p { margin: 0; max-width: none; }

/* --------------------------------------------------------------------------
   Pages internes
   -------------------------------------------------------------------------- */

.tete-page {
  padding: clamp(2.6rem, 5vw, 4rem) 0 2.2rem;
  border-bottom: 1px solid var(--filet);
}

.fil {
  font-family: var(--greffe);
  font-size: .85rem;
  color: var(--encre-douce);
  margin-bottom: 1rem;
}

.fil a { color: var(--olive); }

.corps-legal {
  padding: var(--rythme) 0;
}

.corps-legal .colonne-lecture {
  max-width: 74ch;
}

.corps-legal h2 {
  font-size: 1.75rem;
  margin-top: 2.6rem;
  border-top: 1px solid var(--filet);
  padding-top: 1.5rem;
}

.corps-legal h2:first-of-type { margin-top: 0; }

.corps-legal h3 { margin-top: 1.8rem; }

.corps-legal ul { padding-left: 0; list-style: none; }
.corps-legal ul li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: .5rem;
}
.corps-legal ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 0; height: 0;
  border-left: 6px solid var(--olive);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.tableau-donnees {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0 2rem;
  font-size: .95rem;
}

.tableau-donnees caption {
  text-align: left;
  font-family: var(--greffe);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--olive);
  padding-bottom: .6rem;
}

.tableau-donnees th,
.tableau-donnees td {
  text-align: left;
  padding: .6rem .7rem;
  border-bottom: 1px solid var(--filet);
  vertical-align: top;
}

.tableau-donnees th {
  font-family: var(--greffe);
  font-weight: 400;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--encre-douce);
  border-bottom: 1px solid var(--olive);
}

.enveloppe-tableau { overflow-x: auto; }

/* Page auteur */
.auteur-grille {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--gouttiere);
  align-items: start;
}

.portrait .cadre-fond { padding: 10px; }
.portrait img { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.portrait figcaption {
  font-family: var(--greffe);
  font-size: .82rem;
  color: var(--encre-douce);
  padding: .7rem 10px 0;
}

.liens-profils {
  margin-top: 1.4rem;
  list-style: none;
  padding: 0;
}
.liens-profils li { border-top: 1px solid var(--filet); }
.liens-profils li a { display: block; padding: .6rem .1rem; font-weight: 500; text-decoration: none; }
.liens-profils li a:hover { text-decoration: underline; }

/* Plan du site */
.plan-liste { list-style: none; padding: 0; margin: 0; }
.plan-liste > li {
  border-top: 1px solid var(--filet);
  padding: 1.1rem 0;
}
.plan-liste > li:last-child { border-bottom: 1px solid var(--filet); }
.plan-liste a { font-weight: 600; font-size: 1.05rem; }
.plan-liste p { margin: .3rem 0 0; color: var(--encre-douce); font-size: .96rem; }

.plan-ancres { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.plan-ancres li { border: 0; padding: 0; }
.plan-ancres a { font-size: .9rem; font-weight: 500; font-family: var(--greffe); }

/* Pages courtes */
.page-courte {
  padding: clamp(4rem, 9vw, 7rem) 0;
  text-align: left;
}

.page-courte .cadre { max-width: 720px; }
.page-courte .cadre-fond { padding: 2.6rem 2.2rem; }
.page-courte .rangee-tampons { margin-top: 1.8rem; margin-bottom: 0; }

.grand-numero {
  font-family: var(--greffe);
  font-size: 1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--olive);
  display: block;
  margin-bottom: .8rem;
}

/* --------------------------------------------------------------------------
   Apparitions au defilement
   -------------------------------------------------------------------------- */

.a-lever {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease;
}

.a-lever.est-levee { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Adaptations
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .colonnes--quatre,
  .temps,
  .bandeau-chiffres { grid-template-columns: repeat(2, 1fr); }

  .colonnes--quatre > *,
  .temps > li {
    border-left: 0;
    border-top: 1px solid var(--filet);
    padding: 1.4rem 1.2rem 1.4rem 0;
  }
  .colonnes--quatre > *:nth-child(even),
  .temps > li:nth-child(even) { border-left: 1px solid var(--filet); padding-left: 1.2rem; padding-right: 0; }

  .bandeau-chiffres > div:nth-child(3) { border-left: 0; }
  .bandeau-chiffres > div:nth-child(n+3) { border-top: 1px solid var(--filet); }

  .temoignages,
  .formules { grid-template-columns: 1fr; }

  .solution-duo,
  .contact-grille,
  .auteur-grille { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  h1 { font-size: 2.3rem; }
  h2 { font-size: 1.7rem; }

  .nav-ancres { display: none; }
  .entete-corps .tampon { display: none; }
  .bouton-rabat { display: inline-flex; }

  .hero-grille { grid-template-columns: 1fr; }
  .hero-texte { padding-right: 0; padding-bottom: 2rem; }
  .hero-cote {
    padding-left: 0;
    padding-top: 2rem;
    border-left: 0;
    border-top: 1px solid var(--filet);
  }

  .colonnes--trois { grid-template-columns: 1fr; }
  .colonnes--trois > * {
    padding: 1.5rem 0;
    border-left: 0;
    border-top: 1px solid var(--filet);
  }
  .colonnes--trois > *:first-child { padding-top: 0; border-top: 0; }

  .grille-fiches { grid-template-columns: 1fr; }
  .fiche,
  .fiche:nth-child(even) {
    padding: 1.5rem 0;
    border-left: 0;
  }

  .questions { grid-template-columns: 1fr; }
  .questions > div:last-child { border-left: 0; padding-left: 0; }

  .pied-colonnes { grid-template-columns: 1fr 1fr; }
  .pied-colonnes > div {
    padding: 1.4rem 1rem 1.4rem 0;
    border-left: 0;
    border-top: 1px solid rgba(217, 220, 211, .18);
  }
  .pied-colonnes > div:nth-child(even) { padding-left: 1rem; padding-right: 0; border-left: 1px solid rgba(217, 220, 211, .18); }
}

@media (max-width: 600px) {
  .colonnes--quatre,
  .temps,
  .bandeau-chiffres { grid-template-columns: 1fr; }

  .colonnes--quatre > *,
  .colonnes--quatre > *:nth-child(even),
  .temps > li,
  .temps > li:nth-child(even) {
    border-left: 0;
    padding: 1.3rem 0;
    border-top: 1px solid var(--filet);
  }
  .colonnes--quatre > *:first-child,
  .temps > li:first-child { border-top: 0; padding-top: 0; }

  .bandeau-chiffres > div,
  .bandeau-chiffres > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--filet);
  }
  .bandeau-chiffres > div:first-child { border-top: 0; }

  .champ-duo { grid-template-columns: 1fr; }

  .pied-colonnes { grid-template-columns: 1fr; }
  .pied-colonnes > div,
  .pied-colonnes > div:nth-child(even) {
    padding: 1.3rem 0;
    border-left: 0;
  }

  .cadre > .cadre-fond { padding: 1.3rem 1.1rem; }
  .rangee-tampons .tampon { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .a-lever { opacity: 1; transform: none; }
  .encre { display: none; }
  .tampon.est-appuye { transform: translateY(2px); }
}

@media print {
  .entete, .rabat, .pied, .rangee-tampons { display: none; }
  body { background: #FFFFFF; font-size: 11pt; }
}

/* ==========================================================================
   Le Cahier de mise en etat, section magazine
   Meme vocabulaire que le reste de la feuille: cadre = forme signature,
   damier = motif, cote = numero compose en Radley, filet = separateur.
   Aucune regle precedente n est modifiee, tout est ajoute ici.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Liasse du magazine et en tete de section
   -------------------------------------------------------------------------- */

.liasse-cahier { padding: var(--rythme) 0; }

.tete-cahier {
  border-top: 1px solid var(--filet);
  padding-top: 1.5rem;
  margin-bottom: 2.6rem;
}

.tete-cahier h1,
.tete-cahier h2 { max-width: 22ch; }

.tete-cahier .chapeau { max-width: 64ch; }

.rangee-cahier {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .8rem 1.6rem;
  margin-top: 2.4rem;
  border-top: 1px solid var(--filet);
  padding-top: 1.4rem;
}

.rangee-cahier p {
  margin: 0;
  font-family: var(--greffe);
  font-size: .9rem;
  color: var(--encre-douce);
  max-width: 48ch;
}

/* --------------------------------------------------------------------------
   Grille de cartes d article, colonnes de journal
   -------------------------------------------------------------------------- */

.cahier-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cahier-grille--large { grid-template-columns: repeat(2, 1fr); }

/* --------------------------------------------------------------------------
   Carte d article
   -------------------------------------------------------------------------- */

.cahier-carte { transition: transform .12s ease, border-color .15s ease; }

.cahier-carte > .cadre-fond {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px 10px 1.5rem;
}

.cahier-vignette {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  filter: saturate(.9);
  width: 100%;
}

.cahier-carte-texte {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.1rem .5rem 0;
}

.cahier-carte:hover { border-color: var(--olive-sombre); }
.cahier-carte:hover .cahier-vignette { filter: saturate(1); }
.cahier-carte.est-appuye { transform: translateY(2px); }

.cahier-angle {
  font-family: var(--greffe);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--olive);
  display: inline-block;
}

.cahier-titre {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.24rem;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: .6rem 0 .65rem;
  max-width: none;
}

.cahier-titre a { color: var(--encre); text-decoration: none; }

.cahier-titre a:hover,
.cahier-titre a:focus-visible {
  color: var(--olive);
  text-decoration: underline;
  text-decoration-color: var(--celadon);
  text-underline-offset: 3px;
}

.cahier-extrait {
  font-size: .95rem;
  color: var(--encre-douce);
  flex: 1;
  margin-bottom: 1.1rem;
  max-width: none;
}

.cahier-signature {
  border-top: 1px solid var(--filet);
  padding-top: .75rem;
  margin: 0;
  font-family: var(--greffe);
  font-size: .82rem;
  color: var(--encre-douce);
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .8rem;
  align-items: baseline;
  max-width: none;
}

.cahier-signature span + span {
  border-left: 1px solid var(--filet);
  padding-left: .8rem;
}

/* --------------------------------------------------------------------------
   Sommaire numerote du magazine, employe sur la page auteur
   -------------------------------------------------------------------------- */

.cahier-sommaire {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: cahier;
}

.cahier-sommaire > li {
  counter-increment: cahier;
  border-top: 1px solid var(--filet);
  padding: 1.1rem 0 1.1rem 3.2rem;
  position: relative;
}

.cahier-sommaire > li:last-child { border-bottom: 1px solid var(--filet); }

.cahier-sommaire > li::before {
  content: counter(cahier, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.15rem;
  font-family: var(--greffe);
  font-size: 1.05rem;
  color: var(--olive);
  border-bottom: 2px solid var(--celadon);
  padding-bottom: .1rem;
}

.cahier-sommaire a {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--encre);
  text-decoration: none;
}

.cahier-sommaire a:hover { color: var(--olive); text-decoration: underline; }

.cahier-sommaire .cahier-ligne {
  margin: .3rem 0 0;
  font-family: var(--greffe);
  font-size: .85rem;
  color: var(--encre-douce);
  max-width: none;
}

/* --------------------------------------------------------------------------
   Entete d article: fil d Ariane, angle, dates et temps de lecture
   -------------------------------------------------------------------------- */

.tete-article {
  padding: clamp(2.4rem, 5vw, 3.8rem) 0 2.2rem;
  background: var(--porcelaine);
}

.tete-article h1 {
  font-size: 2.9rem;
  max-width: 22ch;
  margin-bottom: 1.2rem;
}

.tete-article .cahier-angle { margin-bottom: .8rem; }

.meta-article {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  align-items: baseline;
  margin: 1.6rem 0 0;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  padding: .85rem 0;
  font-family: var(--greffe);
  font-size: .85rem;
  color: var(--encre-douce);
  max-width: none;
}

.meta-article span + span {
  border-left: 1px solid var(--filet);
  padding-left: 1.1rem;
}

.meta-article a { color: var(--olive); }

/* Exergue du chapeau: double filet olive et celadon, comme le cadre de tampon */
.exergue {
  position: relative;
  padding-left: 1.35rem;
  margin: 0;
  font-family: var(--greffe);
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--encre);
  max-width: 60ch;
}

.exergue::before,
.exergue::after {
  content: "";
  position: absolute;
  top: .25rem;
  bottom: .25rem;
  width: 1px;
}

.exergue::before { left: 0; background: var(--olive); }
.exergue::after { left: 4px; background: var(--celadon); }

/* Image a la une */
.image-une { margin: 2.4rem 0 0; }

.image-une > .cadre-fond { padding: 10px; }

.image-une img {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  filter: saturate(.9);
  width: 100%;
}

.image-une figcaption {
  font-family: var(--greffe);
  font-size: .8125rem;
  color: var(--encre-douce);
  padding: .7rem 10px 0;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Corps d article: balises nues, aucune classe dans le texte redactionnel
   Mesure de lecture de 68 caracteres au maximum.
   -------------------------------------------------------------------------- */

.corps-article { padding: var(--rythme) 0 0; }

.corps-article > * { max-width: 68ch; }

.corps-article p {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.75;
  margin-bottom: 1.2rem;
}

.corps-article h2 {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1.12;
  max-width: 24ch;
  margin: 3rem 0 1rem;
  border-top: 1px solid var(--olive);
  padding-top: 1.5rem;
}

.corps-article > h2:first-child {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

.corps-article h3 {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  max-width: 34ch;
  margin: 2rem 0 .8rem;
  padding-left: 1.15rem;
  position: relative;
}

.corps-article h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: .48em;
  width: 0; height: 0;
  border-left: 7px solid var(--olive);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.corps-article a {
  color: var(--olive);
  text-decoration: underline;
  text-decoration-color: var(--celadon);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.corps-article a:hover {
  color: var(--olive-sombre);
  text-decoration-color: var(--olive);
}

.corps-article strong { font-weight: 600; color: var(--encre); }
.corps-article em { font-style: italic; }

/* Listes a puces: le triangle olive du motif signature */
.corps-article ul {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
}

.corps-article ul li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: .6rem;
  line-height: 1.7;
}

.corps-article ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 0; height: 0;
  border-left: 6px solid var(--olive);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

/* Listes numerotees: la cote composee en Radley, comme un numero de piece */
.corps-article ol {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  counter-reset: point;
}

.corps-article ol li {
  counter-increment: point;
  position: relative;
  padding-left: 2.3rem;
  margin-bottom: .7rem;
  line-height: 1.7;
}

.corps-article ol li::before {
  content: counter(point, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--greffe);
  font-size: .95rem;
  color: var(--olive);
  border-bottom: 1px solid var(--celadon);
  padding-bottom: .05rem;
}

.corps-article li p { margin-bottom: .6rem; }
.corps-article li ul,
.corps-article li ol { margin-top: .6rem; }

/* Tableau recapitulatif, tenu comme une page de bordereau */
.corps-article table {
  width: 100%;
  max-width: 68ch;
  border-collapse: collapse;
  margin: 1.8rem 0 2.2rem;
  font-size: .95rem;
  background: var(--papier);
}

.corps-article thead { background: var(--celadon-pale); }

.corps-article th {
  font-family: var(--greffe);
  font-weight: 400;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--encre);
  text-align: left;
  border-bottom: 1px solid var(--olive);
  padding: .6rem .7rem;
  vertical-align: bottom;
}

.corps-article td {
  text-align: left;
  padding: .6rem .7rem;
  border-bottom: 1px solid var(--filet);
  vertical-align: top;
  line-height: 1.6;
}

.corps-article tbody tr:last-child td { border-bottom: 1px solid var(--olive); }

/* Encadre: la forme signature complete, double filet et coin rabattu */
.corps-article aside {
  position: relative;
  background: var(--papier);
  border: 1px solid var(--olive);
  padding: 1.7rem 1.6rem;
  margin: 2.2rem 0;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}

.corps-article aside::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--celadon);
  pointer-events: none;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.corps-article aside::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--biseau);
  height: var(--biseau);
  background: var(--celadon);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.corps-article aside p { font-size: 1rem; max-width: 58ch; }
.corps-article aside p:last-child { margin-bottom: 0; }
.corps-article aside ul { margin-bottom: 0; }

/* Citation: le filet double de l annotation de marge, composee en Radley */
.corps-article blockquote {
  position: relative;
  margin: 2.2rem 0;
  padding: .4rem 0 .4rem 1.5rem;
  font-family: var(--greffe);
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--encre);
  max-width: 60ch;
}

.corps-article blockquote::before,
.corps-article blockquote::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
}

.corps-article blockquote::before { left: 0; background: var(--olive); }
.corps-article blockquote::after { left: 4px; background: var(--celadon); }

.corps-article blockquote p { font-size: 1.08rem; margin-bottom: .7rem; }
.corps-article blockquote p:last-child { margin-bottom: 0; }

.corps-article figure { margin: 2rem 0; }

.corps-article figcaption {
  font-family: var(--greffe);
  font-size: .8125rem;
  color: var(--encre-douce);
  line-height: 1.55;
  padding-top: .6rem;
}

/* --------------------------------------------------------------------------
   Appel a l action de fin d article
   -------------------------------------------------------------------------- */

.appel-cahier {
  margin: 3rem 0 0;
  max-width: 68ch;
}

.appel-cahier > .cadre-fond { padding: 1.9rem 1.8rem; }

.appel-cahier .damier { margin: -3px -3px 1.5rem; width: auto; }

.appel-cahier .titre-appel {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.15;
  margin-bottom: .7rem;
}

.appel-cahier p { font-size: 1rem; }
.appel-cahier .rangee-tampons { margin: 1.4rem 0 0; }

/* --------------------------------------------------------------------------
   Encart auteur
   -------------------------------------------------------------------------- */

.encart-auteur {
  margin: 2.2rem 0 0;
  max-width: 68ch;
}

.encart-auteur > .cadre-fond {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  padding: 1.6rem;
}

.encart-auteur img {
  flex: none;
  width: 96px;
  height: 96px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  filter: saturate(.9);
}

.encart-auteur .encart-role {
  font-family: var(--greffe);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--olive);
  margin-bottom: .25rem;
}

.encart-auteur .encart-nom {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.15;
  margin-bottom: .5rem;
}

.encart-auteur p { font-size: .96rem; margin-bottom: .6rem; max-width: 52ch; }
.encart-auteur p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Bloc A lire aussi
   -------------------------------------------------------------------------- */

.lire-aussi {
  margin-top: var(--rythme);
  background: var(--celadon-pale);
  padding: var(--rythme) 0;
}

.lire-aussi .tete-cahier { border-top-color: var(--olive); }

.lire-aussi .titre-lire-aussi {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.12;
  margin: .3rem 0 .8rem;
}

/* --------------------------------------------------------------------------
   Derniers articles sur la page d accueil
   -------------------------------------------------------------------------- */

.liasse-cahier .cahier-grille { margin-top: .4rem; }
.liasse-cahier .damier { margin-bottom: 1.6rem; }

/* --------------------------------------------------------------------------
   Adaptations du magazine
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .cahier-grille,
  .cahier-grille--large { grid-template-columns: repeat(2, 1fr); }

  .tete-article h1 { font-size: 2.4rem; }
}

@media (max-width: 860px) {
  .corps-article h2 { font-size: 1.6rem; }
  .tete-article h1 { font-size: 2.2rem; }
  .exergue { font-size: 1.08rem; }
}

@media (max-width: 700px) {
  .cahier-grille,
  .cahier-grille--large { grid-template-columns: 1fr; }

  .encart-auteur > .cadre-fond { flex-direction: column; }

  .corps-article table { display: block; overflow-x: auto; }

  .meta-article span + span,
  .cahier-signature span + span {
    border-left: 0;
    padding-left: 0;
  }
}

@media print {
  .cahier-vignette,
  .image-une,
  .lire-aussi,
  .appel-cahier { display: none; }

  .corps-article > * { max-width: none; }
}