/* ==========================================================================
   Retouria, feuille de style unique
   Vocabulaire de classes emprunte au bordereau de retour de librairie:
   chemise, onglet, filet, tampon, office, reserve, rayon, tranche, avoir.
   ========================================================================== */

:root {
  --papier: #FAF0E8;
  --papier-soutenu: #F2E3D6;
  --surface: #FFFAF5;
  --encre: #2A1D14;
  --encre-douce: #6B4A33;
  --olive: #4F6E1E;
  --olive-dense: #3E5716;
  --ivoire: #FDF6EF;
  --sienne: #9C4A21;
  --bordure: #E0C9B4;

  --contenant: 1160px;
  --gouttiere: 28px;
  --entete: 72px;

  --serif: "Solway", "Iowan Old Style", Georgia, serif;
  --labeur: "Libre Franklin", "Segoe UI", Helvetica, Arial, sans-serif;
  --tampon: "Bebas Neue", "Haettenschweiler", "Arial Narrow", sans-serif;

  --aiguille: cubic-bezier(0.2, 0.8, 0.2, 1);
  --biseau: 18px;
}

/* --------------------------------------------------------------------------
   Reglages generaux
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--papier);
  background-image:
    repeating-linear-gradient(180deg, rgba(224, 201, 180, 0.22) 0 1px, transparent 1px 34px);
  color: var(--encre);
  font-family: var(--labeur);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.68;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  text-align: left;
}

h1, h2 {
  font-family: var(--tampon);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 0.95;
  color: var(--encre);
}

h1 { font-size: 3.4rem; }
h2 { font-size: 2.4rem; }

h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.3;
}

h4 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.4;
}

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

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

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

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

strong { font-weight: 700; }

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

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--olive);
  color: var(--ivoire);
  font-family: var(--serif);
  font-weight: 700;
  padding: 12px 20px;
  z-index: 200;
}
.evitement:focus {
  left: 12px;
  top: 12px;
}

/* --------------------------------------------------------------------------
   Elements d ecriture recurrents
   -------------------------------------------------------------------------- */

.surtitre {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--olive-dense);
  margin: 0 0 0.85rem;
}
.surtitre::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--olive);
  margin-right: 0.6em;
  vertical-align: 0.12em;
}

.chiffre,
.euros,
.jours {
  font-family: var(--serif);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.euros { color: var(--sienne); }

.montant-fort {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--sienne);
  display: block;
}

.appui {
  font-size: 0.95rem;
  color: var(--encre-douce);
}

.mention {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--encre-douce);
}

.filet-marque {
  border: 0;
  height: 5px;
  margin: 1.6rem 0;
  background:
    linear-gradient(to bottom, var(--bordure) 0 3px, transparent 3px 5px),
    linear-gradient(to bottom, transparent 0 3px, var(--olive) 3px 5px);
  max-width: 240px;
}

/* --------------------------------------------------------------------------
   Cartouche a onglet, forme signature
   -------------------------------------------------------------------------- */

.cartouche {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 34px 30px 30px;
  margin-top: 26px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--biseau)), calc(100% - var(--biseau)) 100%, 0 100%);
}

.cartouche::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dotted var(--olive);
  opacity: 0.55;
  pointer-events: none;
}

.cartouche > .onglet {
  position: absolute;
  top: -22px;
  left: -1px;
  min-width: 96px;
  height: 22px;
  padding: 0 12px;
  background: var(--olive);
  color: var(--ivoire);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}

.onglet--sienne { background: var(--sienne); }

.cartouche > :last-child { margin-bottom: 0; }

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

.tampon,
.tampon-creux {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 260ms var(--aiguille), background-color 200ms linear;
}

.tampon {
  position: relative;
  padding: 18px 32px;
  background: var(--olive);
  color: var(--ivoire);
  border: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transform-origin: bottom left;
}
.tampon::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(253, 246, 239, 0.75);
  pointer-events: none;
}
.tampon:hover,
.tampon:focus-visible {
  background: var(--olive-dense);
  color: var(--ivoire);
  transform: rotate(1.5deg);
}

.tampon-creux {
  position: relative;
  padding: 16px 28px;
  background: transparent;
  color: var(--encre);
  border: 1px solid var(--bordure);
}
.tampon-creux::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dotted var(--olive);
  pointer-events: none;
}
.tampon-creux:hover,
.tampon-creux:focus-visible {
  background: var(--papier-soutenu);
  color: var(--encre);
}
.tampon-creux:hover::after { border-style: solid; }

.duo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 1.8rem 0 1.4rem;
}

/* --------------------------------------------------------------------------
   Motif signature: echos de sonar
   -------------------------------------------------------------------------- */

.sonar {
  position: absolute;
  left: -260px;
  top: 50%;
  transform: translateY(-50%);
  width: 980px;
  height: 980px;
  pointer-events: none;
  z-index: 0;
}

.sonar path {
  fill: none;
  stroke: var(--olive);
  stroke-width: 1;
}

.sonar path:nth-child(1) { opacity: 0.30; }
.sonar path:nth-child(2) { opacity: 0.24; }
.sonar path:nth-child(3) { opacity: 0.18; }
.sonar path:nth-child(4) { opacity: 0.13; }
.sonar path:nth-child(5) { opacity: 0.08; }
.sonar path:nth-child(6) { opacity: 0.04; }

.sonar--droite {
  left: auto;
  right: -320px;
  transform: translateY(-50%) scaleX(-1);
}

.puce-sonar {
  list-style: none;
  padding-left: 0;
}
.puce-sonar li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 0.62em;
}
.puce-sonar li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.46em;
  width: 22px;
  height: 14px;
  background-image:
    radial-gradient(circle at 0 50%, transparent 0 4px, var(--olive) 4px 5px, transparent 5px),
    radial-gradient(circle at 0 50%, transparent 0 9px, rgba(79, 110, 30, 0.6) 9px 10px, transparent 10px),
    radial-gradient(circle at 0 50%, transparent 0 14px, rgba(79, 110, 30, 0.3) 14px 15px, transparent 15px);
}

/* --------------------------------------------------------------------------
   Enveloppe et grille en pile de dossiers decales
   -------------------------------------------------------------------------- */

.reserve {
  width: min(100% - 40px, var(--contenant));
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.rayon {
  position: relative;
  padding: 84px 0;
  overflow: hidden;
}

.rayon--papier-fonce { background: var(--papier-soutenu); }

.rayon + .rayon { border-top: 1px solid var(--bordure); }

.pile {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--gouttiere);
}

/* Chaque chemise demarre une colonne plus a droite et remonte de 32px */
.chemise { position: relative; }
.chemise--1 { grid-column: 1 / span 9; }
.chemise--2 { grid-column: 2 / span 9; margin-top: -32px; }
.chemise--3 { grid-column: 3 / span 9; margin-top: -32px; }
.chemise--4 { grid-column: 4 / span 9; margin-top: -32px; }

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

.entete {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--entete);
  background: rgba(250, 240, 232, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bordure);
  z-index: 120;
  transition: height 240ms var(--aiguille), box-shadow 240ms linear;
}

.entete.entete--tassee {
  height: 60px;
  box-shadow: 0 2px 0 rgba(42, 29, 20, 0.06);
}

.entete__jauge {
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 0;
  background: var(--olive);
}

.entete__interieur {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.logotype {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--encre);
}
.logotype svg { display: block; }
.logotype__mot {
  font-family: var(--tampon);
  font-size: 1.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.rayon-nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

.rayon-nav a {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.rayon-nav a:hover,
.rayon-nav a.est-active {
  color: var(--olive-dense);
  border-bottom-color: var(--olive);
}

.entete .tampon { padding: 13px 22px; min-height: 44px; }

.bouton-filets {
  display: none;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 1px solid var(--bordure);
  cursor: pointer;
  padding: 0;
}
.bouton-filets span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 4px auto;
  background: var(--encre);
}

.panneau-mobile {
  position: fixed;
  inset: 0;
  background: var(--papier);
  z-index: 130;
  display: none;
  flex-direction: column;
  padding: 24px;
  overflow-y: auto;
}
.panneau-mobile.est-ouvert { display: flex; }
.panneau-mobile__haut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}
.panneau-mobile nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.panneau-mobile nav a {
  font-family: var(--tampon);
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre);
  border-bottom: 1px solid var(--bordure);
  padding: 12px 0;
}
.fermer-panneau {
  background: transparent;
  border: 1px solid var(--bordure);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 16px;
  min-height: 48px;
  cursor: pointer;
  color: var(--encre);
}

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

.ouverture {
  position: relative;
  padding: calc(var(--entete) + 76px) 0 92px;
  overflow: hidden;
}

.ouverture__pile {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--gouttiere);
  align-items: start;
}

.ouverture__mot { grid-column: 1 / span 7; }

.ouverture__vue {
  grid-column: 6 / span 7;
  margin-top: 74px;
  z-index: 2;
}

.ouverture h1 { margin-bottom: 0.35em; }

.ouverture__accroche {
  font-size: 1.18rem;
  color: var(--encre-douce);
  max-width: 56ch;
}

.reassurance {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 14px 18px 14px 16px;
  border-left: 6px solid var(--sienne);
  font-size: 0.95rem;
  max-width: 58ch;
}

.cadre-photo {
  position: relative;
  border: 1px solid var(--bordure);
  background: var(--surface);
  padding: 8px 8px 8px 14px;
  margin-left: 24px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--biseau)), calc(100% - var(--biseau)) 100%, 0 100%);
}
.cadre-photo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--papier-soutenu);
}
.cadre-photo img {
  display: block;
  width: 100%;
  filter: saturate(0.92) contrast(0.96);
}
.cadre-photo figcaption {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
  padding: 10px 4px 4px 4px;
}

.tranches {
  display: flex;
  gap: 3px;
  height: 26px;
  margin: 0 0 22px;
}
.tranches i {
  display: block;
  width: 8px;
  background: var(--bordure);
}
.tranches i:nth-child(3n) { background: var(--sienne); opacity: 0.75; }
.tranches i:nth-child(4n) { background: var(--olive); opacity: 0.7; }
.tranches i:nth-child(5n) { width: 12px; background: var(--encre-douce); opacity: 0.4; }

/* --------------------------------------------------------------------------
   Constats du probleme
   -------------------------------------------------------------------------- */

.constat {
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 30px 28px 26px;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--biseau)), calc(100% - var(--biseau)) 100%, 0 100%);
}
.constat::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dotted var(--olive);
  opacity: 0.45;
  pointer-events: none;
}
.constat h3 { margin-bottom: 0.5em; }
.constat > :last-child { margin-bottom: 0; }

.constat__etiquette {
  position: absolute;
  top: -22px;
  left: -1px;
  height: 22px;
  padding: 0 14px;
  background: var(--sienne);
  color: var(--ivoire);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}

.constat--decale-1 { margin-left: 0; }
.constat--decale-2 { margin-left: 24px; }
.constat--decale-3 { margin-left: 48px; }

/* --------------------------------------------------------------------------
   Escalier des quatre temps
   -------------------------------------------------------------------------- */

.escalier {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--gouttiere);
  margin-top: 2.2rem;
}

.temps {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 30px 26px 26px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--biseau)), calc(100% - var(--biseau)) 100%, 0 100%);
}
.temps::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dotted var(--olive);
  opacity: 0.4;
  pointer-events: none;
}
.temps__numero {
  font-family: var(--tampon);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--olive);
  display: block;
  margin-bottom: 6px;
}
.temps > :last-child { margin-bottom: 0; }
.temps p { max-width: none; }

.temps--1 { grid-column: 1 / span 7; }
.temps--2 { grid-column: 3 / span 7; margin-top: -28px; }
.temps--3 { grid-column: 5 / span 7; margin-top: -28px; }
.temps--4 { grid-column: 6 / span 7; margin-top: -28px; }

/* --------------------------------------------------------------------------
   Fonctionnalites, grille reguliere de trois colonnes
   -------------------------------------------------------------------------- */

.veille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px var(--gouttiere);
  margin-top: 2.6rem;
}

.veille .cartouche { margin-top: 26px; }
.veille .cartouche p { max-width: none; }

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

.gains {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--gouttiere);
  margin-top: 2.4rem;
}

.gain {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 6px solid var(--olive);
  padding: 24px 26px;
}
.gain p { max-width: none; margin-bottom: 0; }
.gain h3 { margin-bottom: 0.35em; }

.gain--a { grid-column: 1 / span 6; }
.gain--b { grid-column: 7 / span 6; }
.gain--c { grid-column: 2 / span 6; margin-top: -14px; }
.gain--d { grid-column: 8 / span 5; margin-top: -14px; }
.gain--e { grid-column: 3 / span 6; margin-top: -14px; }
.gain--f { grid-column: 9 / span 4; margin-top: -14px; }

.gain--b, .gain--d, .gain--f { border-left-color: var(--sienne); }

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

.paroles {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--gouttiere);
  margin-top: 2.6rem;
}

.parole { position: relative; }
.parole--1 { grid-column: 1 / span 8; }
.parole--2 { grid-column: 3 / span 8; margin-top: -22px; }
.parole--3 { grid-column: 5 / span 8; margin-top: -22px; }

.parole blockquote {
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--encre);
}
.parole blockquote p { max-width: none; }
.parole figcaption {
  font-size: 0.9rem;
  color: var(--encre-douce);
  border-top: 1px solid var(--bordure);
  padding-top: 12px;
}
.parole figcaption b {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--encre);
}

.bandeau-chiffres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gouttiere);
  margin-top: 3rem;
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  padding: 26px 0;
}
.bandeau-chiffres div { padding-left: 14px; border-left: 2px solid var(--olive); }
.bandeau-chiffres p { margin: 0; font-size: 0.9rem; color: var(--encre-douce); max-width: none; }

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

.grille-formules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gouttiere);
  align-items: start;
  margin-top: 3rem;
}

.formule {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.formule h3 {
  font-family: var(--tampon);
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.2em;
}
.formule__cible {
  font-size: 0.92rem;
  color: var(--encre-douce);
  max-width: none;
}
.formule__prix {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  padding: 14px 0;
  margin: 4px 0 18px;
}
.formule__prix .montant-fort { display: inline; }
.formule__prix span.mention { margin: 0; }
.formule ul { margin-bottom: 22px; }
.formule li { font-size: 0.95rem; }
.formule .tampon,
.formule .tampon-creux { margin-top: auto; align-self: flex-start; }

.formule--phare {
  margin-top: -14px;
  transform: translateX(16px);
  border-color: var(--olive);
  box-shadow: 0 0 0 1px var(--olive) inset;
}
.formule--phare::before { border-color: var(--sienne); opacity: 0.8; }

.note-tarifs {
  margin-top: 2rem;
  font-size: 0.92rem;
  color: var(--encre-douce);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.liasse-faq {
  margin-top: 2.4rem;
  max-width: 860px;
}

.question {
  background: var(--surface);
  border: 1px solid var(--bordure);
  margin-bottom: 14px;
}
.question:nth-child(even) { margin-left: 24px; }

.question summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 54px 18px 20px;
  position: relative;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--encre);
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-right: 2px solid var(--olive);
  border-bottom: 2px solid var(--olive);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 300ms var(--aiguille);
}
.question[open] summary::after { transform: rotate(-135deg); }
.question summary:hover { background: var(--papier-soutenu); }

.question__reponse {
  padding: 0 24px 20px 20px;
  border-top: 1px dotted var(--bordure);
  padding-top: 16px;
}
.question__reponse p { margin-bottom: 0.8em; }
.question__reponse > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Formulaire de contact
   -------------------------------------------------------------------------- */

.comptoir {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--gouttiere);
  margin-top: 2.4rem;
  align-items: start;
}

.comptoir__mot { grid-column: 1 / span 5; }
.comptoir__bordereau { grid-column: 6 / span 7; margin-top: 34px; }

.bordereau {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 32px 28px 28px;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--biseau)), calc(100% - var(--biseau)) 100%, 0 100%);
}

.champ { display: flex; flex-direction: column; gap: 6px; }
.champ--large { grid-column: 1 / -1; }

.bordereau label {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.bordereau input[type="text"],
.bordereau input[type="email"],
.bordereau select,
.bordereau textarea {
  font-family: var(--labeur);
  font-size: 1rem;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--bordure);
  border-bottom: 2px solid var(--encre-douce);
  padding: 12px 12px;
  width: 100%;
  min-height: 48px;
}
.bordereau textarea { resize: vertical; line-height: 1.6; }

.champ-accord {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--encre-douce);
}
.champ-accord input { margin-top: 4px; width: 20px; height: 20px; flex: 0 0 auto; }
.champ-accord label {
  font-family: var(--labeur);
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  line-height: 1.6;
}

.bordereau .tampon { grid-column: 1 / -1; justify-self: start; }

.suite-formulaire {
  grid-column: 1 / -1;
  font-size: 0.88rem;
  color: var(--encre-douce);
  border-top: 1px dotted var(--bordure);
  padding-top: 14px;
  margin: 0;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Pages interieures
   -------------------------------------------------------------------------- */

.page-interieure {
  padding: calc(var(--entete) + 60px) 0 80px;
  position: relative;
}

.fil-ariane {
  font-size: 0.84rem;
  color: var(--encre-douce);
  margin-bottom: 1.4rem;
}
.fil-ariane a { color: var(--encre-douce); }

.colonne-lecture { max-width: 760px; }
.colonne-lecture h2 { margin-top: 2.2rem; }
.colonne-lecture h3 { margin-top: 1.8rem; }
.colonne-lecture ul { max-width: 68ch; }

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

.portrait-auteur {
  float: right;
  margin: 0 0 24px 32px;
  max-width: 260px;
}
.portrait-auteur img {
  display: block;
  width: 100%;
  border: 1px solid var(--bordure);
  padding: 8px;
  background: var(--surface);
}
.portrait-auteur figcaption {
  font-size: 0.82rem;
  color: var(--encre-douce);
  padding-top: 8px;
}

.liens-profils {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
  list-style: none;
  margin: 1.4rem 0 2rem;
}
.liens-profils a {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre);
  border: 1px solid var(--bordure);
  padding: 10px 16px;
}
.liens-profils a:hover { background: var(--papier-soutenu); color: var(--olive-dense); }

.plan-liste { list-style: none; padding: 0; }
.plan-liste li {
  border-bottom: 1px dotted var(--bordure);
  padding: 14px 0;
}
.plan-liste a {
  font-family: var(--serif);
  font-weight: 600;
  text-decoration: none;
}
.plan-liste span { display: block; font-size: 0.92rem; color: var(--encre-douce); }

.centre-court {
  max-width: 660px;
  text-align: left;
}

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

.pied {
  background: var(--encre);
  color: var(--papier-soutenu);
  padding: 62px 0 26px;
  border-top: 4px solid var(--olive);
}

.pied a { color: var(--papier-soutenu); text-decoration: none; }
.pied a:hover { color: var(--ivoire); text-decoration: underline; }

.pied__colonnes {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 36px var(--gouttiere);
}

.pied h2, .pied h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivoire);
  margin-bottom: 1rem;
}

.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 0.55em; font-size: 0.92rem; }
.pied p { font-size: 0.92rem; max-width: 40ch; }

.pied .logotype { color: var(--ivoire); }
.pied .logotype__mot { color: var(--ivoire); }

.pied__social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  font-size: 0.86rem;
}

.pied__barre {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid rgba(224, 201, 180, 0.28);
  font-size: 0.84rem;
  color: rgba(242, 227, 214, 0.78);
}
.pied__barre p { max-width: none; margin: 0 0 0.35em; }

/* --------------------------------------------------------------------------
   Animation signature: deplacement d aiguille sur un cadran
   -------------------------------------------------------------------------- */

.au-cadran {
  opacity: 0;
  transform: rotate(-6deg);
  transform-origin: bottom left;
  transition: opacity 420ms linear, transform 420ms var(--aiguille);
}
.au-cadran.est-pose {
  opacity: 1;
  transform: rotate(0deg);
}

.sonar path {
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
}
.sonar.est-pose path {
  animation: balayage 900ms var(--aiguille) forwards;
}
.sonar.est-pose path:nth-child(1) { animation-delay: 0ms; }
.sonar.est-pose path:nth-child(2) { animation-delay: 90ms; }
.sonar.est-pose path:nth-child(3) { animation-delay: 180ms; }
.sonar.est-pose path:nth-child(4) { animation-delay: 270ms; }
.sonar.est-pose path:nth-child(5) { animation-delay: 360ms; }
.sonar.est-pose path:nth-child(6) { animation-delay: 450ms; }

@keyframes balayage {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .au-cadran {
    transform: none;
    transition: opacity 200ms linear;
  }
  .au-cadran.est-pose { transform: none; }
  .tampon:hover, .tampon:focus-visible { transform: none; }
  .sonar path { stroke-dasharray: none; stroke-dashoffset: 0; }
  .sonar.est-pose path { animation: none; }
  .entete { transition: none; }
}

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

@media (max-width: 1040px) {
  .veille { grid-template-columns: repeat(2, 1fr); }
  .grille-formules { grid-template-columns: 1fr; }
  .formule--phare { margin-top: 0; transform: none; }
  .bandeau-chiffres { grid-template-columns: repeat(2, 1fr); }
  .pied__colonnes { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .rayon-nav { display: none; }
  .entete .tampon { display: none; }
  .bouton-filets { display: block; }

  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.8rem; }

  .ouverture { padding-top: calc(var(--entete) + 44px); }
  .ouverture__pile { display: block; }
  .ouverture__vue { margin-top: 36px; }
  .cadre-photo { margin-left: 0; }

  .pile { display: block; }
  .chemise--2, .chemise--3, .chemise--4 { margin-top: 34px; }

  .escalier, .gains, .paroles, .comptoir { display: block; }
  .temps, .gain, .parole, .constat { margin-top: 30px; margin-left: 0; }
  .temps--2, .temps--3, .temps--4,
  .gain--c, .gain--d, .gain--e, .gain--f,
  .parole--2, .parole--3 { margin-top: 30px; }
  .constat--decale-2, .constat--decale-3 { margin-left: 0; }
  .comptoir__bordereau { margin-top: 34px; }

  .bordereau { grid-template-columns: 1fr; }
  .question:nth-child(even) { margin-left: 0; }
  .portrait-auteur { float: none; margin: 0 0 24px; max-width: 220px; }
  .sonar { width: 620px; height: 620px; left: -300px; }
}

@media (max-width: 620px) {
  .veille { grid-template-columns: 1fr; }
  .bandeau-chiffres { grid-template-columns: 1fr; }
  .pied__colonnes { grid-template-columns: 1fr; }
  .rayon { padding: 60px 0; }
  .duo-actions .tampon,
  .duo-actions .tampon-creux { width: 100%; }
}

/* ==========================================================================
   MAGAZINE, La Fenetre de Retour
   Section editoriale du site. Aucune regle existante n est modifiee ici.
   Le magazine reprend le cartouche a onglet, le double filet, le biseau du
   coin inferieur droit, les echos de sonar et le deplacement d aiguille
   deja poses plus haut dans cette feuille.
   Vocabulaire de classes: sommaire, fiche, exergue, corps-article, parution.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Intitules de colonne du pied de page sur les pages du magazine
   Le gabarit d article ne porte qu une seule balise de titre, celle de
   l article: les intitules du pied de page passent donc par cette classe.
   -------------------------------------------------------------------------- */

.pied__titre {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivoire);
  margin: 0 0 1rem;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Navigation principale: une huitieme entree, La Fenetre
   La barre porte desormais un lien de plus. Le corps de la navigation est
   resserre pour que les huit entrees et le bouton tiennent sur une seule ligne.
   -------------------------------------------------------------------------- */

.rayon-nav { gap: 15px; }
.rayon-nav a {
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.entete .tampon { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Entete de la page d index du magazine
   -------------------------------------------------------------------------- */

.magazine {
  position: relative;
  padding: calc(var(--entete) + 60px) 0 84px;
  overflow: hidden;
}

.magazine__chapo {
  font-size: 1.14rem;
  color: var(--encre-douce);
  max-width: 62ch;
}

.magazine__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--bordure);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.magazine__reperes li { margin: 0; }

/* --------------------------------------------------------------------------
   Sommaire: grille de cartes en pile de dossiers decales vers la droite
   -------------------------------------------------------------------------- */

.sommaire {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px var(--gouttiere);
  margin-top: 3rem;
  list-style: none;
  padding: 0;
}

.sommaire > li { margin: 0; display: flex; flex-direction: column; }

/* Chaque colonne descend d un cran, comme la chemise suivante d une pile. */
.sommaire > *:nth-child(3n + 2) { margin-top: 20px; }
.sommaire > *:nth-child(3n + 3) { margin-top: 40px; }

.fiche {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 34px 24px 26px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--biseau)), calc(100% - var(--biseau)) 100%, 0 100%);
  transition: transform 260ms var(--aiguille), background-color 200ms linear;
  transform-origin: bottom left;
}
.fiche::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dotted var(--olive);
  opacity: 0.5;
  pointer-events: none;
  z-index: 2;
}
.fiche:hover,
.fiche:focus-within { transform: rotate(-1deg); background: var(--papier); }

/* L onglet reste dans le cadre: le biseau du coin est trace par clip-path,
   qui rogne tout ce qui deborde de la carte. */
.fiche__onglet {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 96px;
  height: 22px;
  padding: 0 12px;
  background: var(--olive);
  color: var(--ivoire);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.fiche__onglet--sienne { background: var(--sienne); }

.fiche__vue {
  position: relative;
  display: block;
  margin: 0 0 18px;
  border: 1px solid var(--bordure);
  background: var(--papier);
  padding: 6px 6px 6px 12px;
}
.fiche__vue::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--papier-soutenu);
}
.fiche__vue img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.92) contrast(0.96);
}

.fiche__titre {
  font-family: var(--tampon);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.02;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 0.55em;
}
.fiche__titre a {
  color: var(--encre);
  text-decoration: none;
}
.fiche__titre a:hover,
.fiche__titre a:focus-visible { color: var(--olive-dense); }

.fiche__extrait {
  font-size: 0.95rem;
  color: var(--encre-douce);
  max-width: none;
  margin-bottom: 1.1em;
}

.fiche__pied {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px dotted var(--bordure);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-douce);
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.fiche__pied .jours { color: var(--sienne); }

/* --------------------------------------------------------------------------
   Section Derniers articles de la page d accueil
   -------------------------------------------------------------------------- */

.derniers-articles { position: relative; }
.derniers-articles .sommaire { margin-top: 2.6rem; }
.derniers-articles__suite { margin-top: 2.8rem; }

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

.page-magazine {
  position: relative;
  padding: calc(var(--entete) + 48px) 0 80px;
  overflow: hidden;
}

.entete-article {
  max-width: 760px;
  margin-bottom: 2rem;
}
.entete-article h1 { margin-bottom: 0.4em; }

.article__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 1.4rem;
  padding: 12px 0;
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--encre-douce);
  max-width: none;
}
.article__reperes a { color: var(--encre-douce); }
.article__reperes time { color: var(--sienne); }

.exergue {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 6px solid var(--sienne);
  padding: 20px 22px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--encre);
  max-width: 64ch;
  margin: 0;
}

.cadre-photo--une {
  margin: 2.2rem 0 2.6rem 24px;
  max-width: 900px;
}
.cadre-photo--une img { width: 100%; }

/* --------------------------------------------------------------------------
   Corps redactionnel: balises nues, sans aucune classe
   Toutes les regles qui suivent visent des descendantes de .corps-article,
   pour qu un article rendu sans la moindre classe reste entierement mis en forme.
   -------------------------------------------------------------------------- */

.corps-article {
  max-width: 760px;
  margin-bottom: 2.6rem;
}

.corps-article > :first-child { margin-top: 0; }
.corps-article > :last-child { margin-bottom: 0; }

.corps-article h2 {
  font-family: var(--tampon);
  font-weight: 400;
  font-size: 2rem;
  line-height: 0.98;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--encre);
  margin: 2.6rem 0 0.7em;
  padding-top: 20px;
  background:
    linear-gradient(to bottom, var(--bordure) 0 3px, transparent 3px 5px) left top / 240px 5px no-repeat,
    linear-gradient(to bottom, transparent 0 3px, var(--olive) 3px 5px) left top / 240px 5px no-repeat;
}

.corps-article h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.28rem;
  line-height: 1.35;
  color: var(--encre);
  margin: 2rem 0 0.6em;
}
.corps-article h3::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--olive);
  margin-right: 0.65em;
  vertical-align: 0.18em;
}

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

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

.corps-article a {
  color: var(--olive-dense);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--bordure);
}
.corps-article a:hover,
.corps-article a:focus-visible {
  color: var(--sienne);
  text-decoration-color: var(--sienne);
}

/* Listes a puces: la variante reduite du motif de sonar, trois arcs. */
.corps-article ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.3em;
  max-width: 66ch;
}
.corps-article ul li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 0.62em;
}
.corps-article ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.46em;
  width: 22px;
  height: 14px;
  background-image:
    radial-gradient(circle at 0 50%, transparent 0 4px, var(--olive) 4px 5px, transparent 5px),
    radial-gradient(circle at 0 50%, transparent 0 9px, rgba(79, 110, 30, 0.6) 9px 10px, transparent 10px),
    radial-gradient(circle at 0 50%, transparent 0 14px, rgba(79, 110, 30, 0.3) 14px 15px, transparent 15px);
}

/* Listes numerotees: le numero se lit comme une ligne de bordereau. */
.corps-article ol {
  list-style: none;
  counter-reset: bordereau;
  padding-left: 0;
  margin: 0 0 1.3em;
  max-width: 66ch;
}
.corps-article ol li {
  position: relative;
  counter-increment: bordereau;
  padding-left: 42px;
  margin-bottom: 0.62em;
}
.corps-article ol li::before {
  content: counter(bordereau, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.08em;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  color: var(--sienne);
  border-bottom: 2px solid var(--olive);
  padding-bottom: 1px;
}

.corps-article li > ul,
.corps-article li > ol { margin: 0.5em 0 0.2em; }

/* Tableau recapitulatif: la fiche de reserve, filets et en tete olive. */
.corps-article table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--bordure);
  margin: 1.8rem 0 2rem;
  font-size: 0.95rem;
}
.corps-article thead { background: var(--olive); }
.corps-article th {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ivoire);
  text-align: left;
  padding: 12px 14px;
  vertical-align: bottom;
}
.corps-article tbody th {
  background: var(--papier-soutenu);
  color: var(--encre);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.92rem;
}
.corps-article td {
  padding: 12px 14px;
  border-top: 1px solid var(--bordure);
  vertical-align: top;
  line-height: 1.55;
}
.corps-article tbody tr:nth-child(even) { background: rgba(242, 227, 214, 0.45); }

/* Citation: une parole de libraire, en Solway sur filet de terre de Sienne. */
.corps-article blockquote {
  margin: 1.8rem 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--sienne);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--encre);
  max-width: 62ch;
}
.corps-article blockquote p { max-width: none; }
.corps-article blockquote > :last-child { margin-bottom: 0; }

/* Encadre: le cartouche a onglet de la marque, onglet pose par la feuille. */
.corps-article aside {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 34px 26px 24px;
  margin: 2.4rem 0 2.2rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--biseau)), calc(100% - var(--biseau)) 100%, 0 100%);
}
.corps-article aside::before {
  content: "A retenir";
  position: absolute;
  top: 0;
  left: 0;
  min-width: 96px;
  height: 22px;
  padding: 0 12px;
  background: var(--sienne);
  color: var(--ivoire);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}
.corps-article aside::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dotted var(--olive);
  opacity: 0.5;
  pointer-events: none;
}
.corps-article aside > :last-child { margin-bottom: 0; }
.corps-article aside p { max-width: none; }

.corps-article figure {
  position: relative;
  margin: 2rem 0;
  border: 1px solid var(--bordure);
  background: var(--surface);
  padding: 8px 8px 8px 14px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--biseau)), calc(100% - var(--biseau)) 100%, 0 100%);
}
.corps-article figure::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--papier-soutenu);
}
.corps-article figure img { display: block; width: 100%; }
.corps-article figcaption {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
  padding: 10px 4px 4px;
}

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

.appel-article {
  max-width: 760px;
  margin-top: 2.8rem;
}
/* Meme raison que pour la fiche: l onglet se pose dans le rembourrage haut. */
.appel-article > .onglet,
.encart-auteur > .onglet { top: 0; left: 0; }
.appel-article p { max-width: none; }
.appel-article .tampon { margin-top: 0.6rem; }

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

.encart-auteur {
  max-width: 760px;
  margin-top: 2.8rem;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  align-items: start;
}
.encart-auteur img {
  display: block;
  width: 96px;
  height: 96px;
  border: 1px solid var(--bordure);
  background: var(--papier);
  padding: 4px;
}
.encart-auteur p { max-width: none; }
.encart-auteur > div > :last-child { margin-bottom: 0; }
.encart-auteur__nom {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--encre);
  margin-bottom: 0.3em;
}
.encart-auteur__lien {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

.lire-aussi {
  margin-top: 3.2rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--bordure);
}

.lire-aussi__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px var(--gouttiere);
  margin-top: 1.6rem;
}
.lire-aussi__grille > *:nth-child(2) { margin-top: 16px; }
.lire-aussi__grille > *:nth-child(3) { margin-top: 32px; }

.carte-lien {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 14px 16px 18px;
  text-decoration: none;
  color: var(--encre);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  transition: transform 260ms var(--aiguille), background-color 200ms linear;
  transform-origin: bottom left;
}
.carte-lien:hover,
.carte-lien:focus-visible {
  transform: rotate(-1deg);
  background: var(--papier);
  color: var(--encre);
}

.carte-lien__vue {
  position: relative;
  display: block;
  margin-bottom: 14px;
  border: 1px solid var(--bordure);
  padding-left: 6px;
  background: var(--papier);
}
.carte-lien__vue::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--papier-soutenu);
}
.carte-lien__vue img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.92) contrast(0.96);
}

.carte-lien__titre {
  display: block;
  font-family: var(--tampon);
  font-weight: 400;
  font-size: 1.24rem;
  line-height: 1.04;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 0.5em;
}
.carte-lien:hover .carte-lien__titre { color: var(--olive-dense); }

.carte-lien__accroche {
  display: block;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--encre-douce);
}

/* --------------------------------------------------------------------------
   Liste des parutions, page auteur et plan du site
   -------------------------------------------------------------------------- */

.liste-parutions { list-style: none; padding: 0; margin: 1.6rem 0 0; }
.liste-parutions li {
  border-bottom: 1px dotted var(--bordure);
  padding: 14px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  align-items: baseline;
}
.liste-parutions a {
  font-family: var(--serif);
  font-weight: 600;
  text-decoration: none;
}
.liste-parutions a:hover { text-decoration: underline; }
.liste-parutions time {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sienne);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Mouvement d aiguille ramene a une simple apparition
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .fiche,
  .carte-lien { transition: background-color 200ms linear; }
  .fiche:hover,
  .fiche:focus-within,
  .carte-lien:hover,
  .carte-lien:focus-visible { transform: none; }
}

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

@media (max-width: 1140px) {
  .rayon-nav { gap: 11px; }
  .rayon-nav a { font-size: 0.7rem; letter-spacing: 0.03em; }
  .entete .tampon { display: none; }
}

@media (max-width: 1040px) {
  .sommaire { grid-template-columns: repeat(2, 1fr); }
  .sommaire > *:nth-child(3n + 2),
  .sommaire > *:nth-child(3n + 3) { margin-top: 0; }
  .sommaire > *:nth-child(2n) { margin-top: 26px; }
  .lire-aussi__grille { grid-template-columns: 1fr 1fr; }
  .lire-aussi__grille > *:nth-child(3) { margin-top: 16px; }
}

@media (max-width: 900px) {
  .magazine { padding-top: calc(var(--entete) + 40px); }
  .page-magazine { padding-top: calc(var(--entete) + 32px); }
  .cadre-photo--une { margin-left: 0; }
  .corps-article h2 { font-size: 1.7rem; }
}

@media (max-width: 700px) {
  .sommaire { grid-template-columns: 1fr; }
  .sommaire > *:nth-child(n) { margin-top: 26px; }
  .lire-aussi__grille { grid-template-columns: 1fr; }
  .lire-aussi__grille > *:nth-child(2),
  .lire-aussi__grille > *:nth-child(3) { margin-top: 0; }
  .encart-auteur { grid-template-columns: 1fr; }
  .corps-article table { display: block; overflow-x: auto; }
}