/* ==========================================================================
   Perlinea, feuille de style unique
   Vocabulaire de classes emprunte a l atelier de bijou fantaisie:
   etabli, planche, gorge, rainure, perle, casier, tiroir, pochette, fiche.
   Mode clair integral, aucune variante sombre.
   ========================================================================== */

:root {
  --blanc: #FFFFFF;
  --jean: #E8EDF8;
  --surface: #FBFCFF;
  --encre: #1A1D33;
  --ardoise: #565C7A;
  --indigo: #3D34B8;
  --indigo-fonce: #322B99;
  --indigo-clair: #6A61D4;
  --sur-indigo: #FFFFFF;
  --dore: #8C6A2A;
  --filet: #C9D2E6;

  --titre: "Raleway", "Trebuchet MS", sans-serif;
  --courant: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --atelier: "Anonymous Pro", "Courier New", monospace;

  --largeur-carte: 1180px;
  --cadre-postale: 40px;
  --hauteur-etabli: 68px;
  --angle: 14px;
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--courant);
  font-size: 1.05rem;
  line-height: 1.68;
  font-weight: 400;
}

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

a { color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--indigo-fonce); }

h1, h2, h3, h4 {
  font-family: var(--titre);
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 0.6em;
  color: var(--encre);
}

h1 { font-size: 3.4rem; font-weight: 800; }
h2 { font-size: 2.3rem; font-weight: 700; }
h3 { font-size: 1.35rem; font-weight: 600; }
h4 { font-size: 1.08rem; font-weight: 600; }

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

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

strong { font-weight: 600; }
em { font-style: italic; }

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

::selection { background: var(--jean); color: var(--encre); }

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--indigo);
  color: var(--sur-indigo);
  padding: 12px 20px;
  z-index: 200;
  font-family: var(--atelier);
  font-size: 0.86rem;
}
.evitement:focus {
  left: 12px;
  top: 12px;
  color: var(--sur-indigo);
}

/* --------------------------------------------------------------------------
   2. Motif signature: rides de sable paralleles
   -------------------------------------------------------------------------- */

.sable {
  background-color: var(--jean);
  background-image:
    repeating-linear-gradient(0deg,
      rgba(61, 52, 184, 0.22) 0, rgba(61, 52, 184, 0.22) 1px,
      rgba(61, 52, 184, 0) 1px, rgba(61, 52, 184, 0) 8px),
    repeating-linear-gradient(0.6deg,
      rgba(26, 29, 51, 0.16) 0, rgba(26, 29, 51, 0.16) 1px,
      rgba(26, 29, 51, 0) 1px, rgba(26, 29, 51, 0) 11px);
}

.sable-clair {
  background-color: var(--surface);
  background-image:
    repeating-linear-gradient(0deg,
      rgba(61, 52, 184, 0.14) 0, rgba(61, 52, 184, 0.14) 1px,
      rgba(61, 52, 184, 0) 1px, rgba(61, 52, 184, 0) 8px),
    repeating-linear-gradient(0.6deg,
      rgba(26, 29, 51, 0.09) 0, rgba(26, 29, 51, 0.09) 1px,
      rgba(26, 29, 51, 0) 1px, rgba(26, 29, 51, 0) 11px);
}

.separateur-rides {
  display: block;
  width: 100%;
  height: 46px;
  color: var(--filet);
}

/* --------------------------------------------------------------------------
   3. Forme signature: double filet rainure et sa perle
   -------------------------------------------------------------------------- */

.rainure-perle { position: relative; padding-top: 26px; }

.rainure-perle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background-image:
    linear-gradient(var(--filet), var(--filet)),
    linear-gradient(var(--filet), var(--filet));
  background-size: 100% 1px, 100% 1px;
  background-position: 0 0, 0 5px;
  background-repeat: no-repeat;
}

.rainure-perle::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 28px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--indigo);
  transition: transform 0.35s ease;
}

.rainure-perle:hover::after,
.rainure-perle:focus-within::after { transform: translateX(12px); }

.surtitre {
  font-family: var(--atelier);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--indigo);
  margin: 0 0 0.9rem;
  display: block;
}

.mention-atelier {
  font-family: var(--atelier);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ardoise);
}

.legende {
  font-family: var(--atelier);
  font-size: 0.82rem;
  color: var(--ardoise);
  text-align: left;
  margin: 12px 0 0;
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   4. Traitement carte postale des photographies
   -------------------------------------------------------------------------- */

.cadre-postale {
  background: var(--blanc);
  padding: 22px;
  border-radius: 0 0 20px 0;
  box-shadow: 0 18px 44px rgba(26, 29, 51, 0.10);
  display: inline-block;
  max-width: 100%;
}

.cadre-postale > img {
  border: 1px solid var(--filet);
  border-radius: 0 0 12px 0;
  filter: saturate(0.92) brightness(1.03);
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   5. En tete etabli
   -------------------------------------------------------------------------- */

.etabli {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--hauteur-etabli);
  background: var(--blanc);
  border-bottom: 1px solid var(--filet);
}

.etabli::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--indigo);
  transition: width 0.12s linear;
}

.etabli.etabli--posee {
  background: var(--surface);
  box-shadow: 0 2px 14px rgba(26, 29, 51, 0.07);
}

.etabli.etabli--posee::after { width: var(--lecture, 0%); }

.etabli__interieur {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}

.logotype {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: 0.06em;
  color: var(--encre);
  flex: 0 0 auto;
}
.logotype:hover { color: var(--indigo); }
.logotype svg { display: block; }

.navigation-gorge {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
}

.navigation-gorge a {
  font-size: 0.92rem;
  color: var(--ardoise);
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.navigation-gorge a:hover,
.navigation-gorge a:focus-visible {
  color: var(--encre);
  border-bottom-color: var(--indigo);
}

.etabli .bouton-perle { flex: 0 0 auto; height: 42px; padding: 0 20px; }

.bouton-rainures {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 42px;
  background: var(--blanc);
  border: 1.5px solid var(--filet);
  border-radius: 0 0 10px 0;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.bouton-rainures span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--encre);
}

.panneau-atelier {
  position: fixed;
  inset: var(--hauteur-etabli) 0 0 0;
  background: var(--blanc);
  z-index: 99;
  padding: 28px 24px 40px;
  overflow-y: auto;
  display: none;
}
.panneau-atelier[data-ouvert="oui"] { display: block; }

.panneau-atelier ul { list-style: none; margin: 0 0 26px; padding: 0; }
.panneau-atelier li { border-bottom: 1px solid var(--filet); margin: 0; }
.panneau-atelier a {
  display: block;
  padding: 16px 4px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--encre);
  text-decoration: none;
}
.panneau-atelier a:hover { color: var(--indigo); }

/* --------------------------------------------------------------------------
   6. Boutons
   -------------------------------------------------------------------------- */

.bouton-perle,
.bouton-filet {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 30px;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 0 0 var(--angle) 0;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  border: 1.5px solid transparent;
}

.bouton-perle {
  background: var(--indigo);
  color: var(--sur-indigo);
  border-color: var(--indigo);
}
.bouton-perle:hover { background: var(--indigo-fonce); border-color: var(--indigo-fonce); color: var(--sur-indigo); }

.bouton-perle::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sur-indigo);
  opacity: 0;
  transform: translate(-14px, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.bouton-perle:hover::before { opacity: 1; transform: translate(0, -50%); }

.bouton-filet {
  background: var(--blanc);
  color: var(--indigo);
  border-color: var(--filet);
}
.bouton-filet:hover {
  background: var(--jean);
  border-color: var(--indigo);
  color: var(--indigo-fonce);
}

.paire-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 28px 0 0;
}

/* --------------------------------------------------------------------------
   7. Rythme des sections, gorges
   -------------------------------------------------------------------------- */

.gorge { padding: 92px 0; position: relative; }
.gorge--serree { padding: 64px 0; }
.gorge--haute { padding: 116px 0; }

.planche {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 24px;
}

.planche--etroite { max-width: 820px; }

.tete-gorge { max-width: 720px; margin: 0 0 46px; }
.tete-gorge p { color: var(--ardoise); font-size: 1.15rem; }
.tete-gorge--centree { margin-left: auto; margin-right: auto; text-align: center; }
.tete-gorge--centree p { margin-left: auto; margin-right: auto; }
.tete-gorge--centree.rainure-perle::after { left: 50%; margin-left: -50px; }

/* --------------------------------------------------------------------------
   8. Hero en carte postale
   -------------------------------------------------------------------------- */

.bande-hero { padding: 46px 0 66px; }

.postale {
  max-width: var(--largeur-carte);
  margin: 0 auto;
  background: var(--blanc);
  padding: var(--cadre-postale);
  border-radius: 0 0 28px 0;
  box-shadow: 0 26px 60px rgba(26, 29, 51, 0.13);
}

.postale__interieur {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 44px;
  align-items: start;
  border: 1px solid var(--filet);
  border-radius: 0 0 18px 0;
  padding: 40px;
}

.postale__texte h1 { margin-bottom: 0.35em; }
.postale__texte .chapeau {
  font-size: 1.15rem;
  color: var(--ardoise);
  max-width: 46ch;
}

.etiquette-secteur {
  display: inline-block;
  font-family: var(--atelier);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dore);
  border: 1px solid var(--filet);
  padding: 6px 12px;
  border-radius: 0 0 8px 0;
  margin-bottom: 18px;
}

.postale__visuel { position: relative; }
.postale__visuel .cadre-postale { padding: 0; box-shadow: none; display: block; }
.postale__visuel .cadre-postale > img { border-radius: 0 0 14px 0; }

.rappel-limite {
  margin-top: 18px;
  border-left: 3px solid var(--dore);
  padding: 4px 0 4px 14px;
  font-size: 0.94rem;
  color: var(--ardoise);
}
.rappel-limite b { font-family: var(--atelier); color: var(--encre); }

/* --------------------------------------------------------------------------
   9. Bandeaux de chiffres collants et roulement des valeurs
   -------------------------------------------------------------------------- */

.bandeau-collant {
  position: sticky;
  top: var(--hauteur-etabli);
  z-index: 40;
  background: var(--surface);
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}

.bandeau-collant--indigo {
  background: var(--indigo);
  border-color: var(--indigo-fonce);
  color: var(--sur-indigo);
}

.bandeau-collant__grille {
  max-width: 1260px;
  margin: 0 auto;
  padding: 16px 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.postale .bandeau-collant {
  position: static;
  margin-top: 26px;
  border-radius: 0 0 12px 0;
}
.postale .bandeau-collant__grille {
  grid-template-columns: repeat(3, 1fr);
  padding: 16px 18px;
  gap: 12px;
}

.jeton-chiffre { display: flex; flex-direction: column; gap: 2px; }

.jeton-chiffre__valeur {
  font-family: var(--atelier);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--encre);
  display: block;
  overflow: hidden;
  height: 1.2em;
}
.bandeau-collant--indigo .jeton-chiffre__valeur { color: var(--sur-indigo); }

.jeton-chiffre__valeur > span {
  display: block;
  will-change: transform;
}

.jeton-chiffre__libelle {
  font-size: 0.86rem;
  color: var(--ardoise);
  line-height: 1.4;
}
.bandeau-collant--indigo .jeton-chiffre__libelle { color: #E4E1FA; }

/* --------------------------------------------------------------------------
   10. Constat, le probleme
   -------------------------------------------------------------------------- */

.constat {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: start;
}

.constat__recit p { color: var(--encre); }
.constat__recit p + p { margin-top: 0; }

.liste-cailloux { list-style: none; padding: 0; margin: 0; }
.liste-cailloux li {
  position: relative;
  padding: 0 0 0 26px;
  margin-bottom: 14px;
  color: var(--ardoise);
}
.liste-cailloux li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--jean);
  border: 1.5px solid var(--indigo);
}

.tableau-risque {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 0 0 18px 0;
  padding: 28px 26px 22px;
}
.tableau-risque h3 { margin-bottom: 0.9em; }
.tableau-risque dl { margin: 0; }
.tableau-risque dt {
  font-family: var(--atelier);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-top: 18px;
}
.tableau-risque dd {
  margin: 4px 0 0;
  color: var(--ardoise);
  font-size: 0.98rem;
}
.tableau-risque dd b { color: var(--encre); font-family: var(--atelier); }

/* --------------------------------------------------------------------------
   11. Chaine de travail, la solution
   -------------------------------------------------------------------------- */

.chaine {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.maillon {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: 0 0 18px 0;
  padding: 30px 24px 26px;
  position: relative;
}
.maillon.rainure-perle { padding-top: 34px; }
.maillon.rainure-perle::before { left: 24px; right: 24px; top: 16px; }
.maillon.rainure-perle::after { top: 17px; left: 52px; }

.maillon__rang {
  font-family: var(--atelier);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--dore);
  display: block;
  margin-bottom: 10px;
}
.maillon h3 { font-size: 1.18rem; }
.maillon p { font-size: 0.98rem; color: var(--ardoise); margin-bottom: 0; }

/* --------------------------------------------------------------------------
   12. Casier de fonctionnalites
   -------------------------------------------------------------------------- */

.casier {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.casier__tiroir {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 0 0 18px 0;
  padding: 32px 26px 28px;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.casier__tiroir.rainure-perle::before { left: 26px; right: 26px; top: 18px; }
.casier__tiroir.rainure-perle::after { top: 19px; left: 54px; }
.casier__tiroir.rainure-perle { padding-top: 36px; }
.casier__tiroir:hover {
  box-shadow: 0 14px 34px rgba(26, 29, 51, 0.09);
  transform: translateY(-2px);
}
.casier__tiroir h3 { font-size: 1.2rem; }
.casier__tiroir p { color: var(--ardoise); font-size: 0.99rem; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   13. Fiche matiere de demonstration
   -------------------------------------------------------------------------- */

.fiche-demo {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 48px;
  align-items: start;
}

.fiche-tableau {
  border: 1px solid var(--filet);
  background: var(--blanc);
  border-radius: 0 0 18px 0;
  overflow: visible;
}

.fiche-tableau__entete {
  position: sticky;
  top: var(--hauteur-etabli);
  z-index: 30;
  background: var(--jean);
  border-bottom: 1px solid var(--filet);
  padding: 14px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 26px;
}
.fiche-tableau__entete .jeton-chiffre { flex-direction: row; align-items: baseline; gap: 8px; }
.fiche-tableau__entete .jeton-chiffre__valeur { font-size: 1.12rem; }
.fiche-tableau__titre {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.02rem;
  margin-right: auto;
}

table.matieres {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
table.matieres caption {
  caption-side: bottom;
  text-align: left;
  padding: 14px 22px 18px;
  font-family: var(--atelier);
  font-size: 0.82rem;
  color: var(--ardoise);
}
table.matieres th,
table.matieres td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--filet);
  text-align: left;
  vertical-align: top;
}
table.matieres thead th {
  font-family: var(--atelier);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--indigo);
  background: var(--surface);
}
table.matieres th:first-child,
table.matieres td:first-child { padding-left: 22px; }
table.matieres td:last-child { padding-right: 22px; text-align: right; font-variant-numeric: tabular-nums; font-family: var(--atelier); }
table.matieres tbody tr:last-child td { border-bottom: none; }
table.matieres tbody tr:hover { background: var(--surface); }

.niveau {
  display: inline-block;
  font-family: var(--atelier);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 0 0 6px 0;
  border: 1px solid var(--filet);
  white-space: nowrap;
}
.niveau--document { background: var(--indigo); color: var(--sur-indigo); border-color: var(--indigo); }
.niveau--facture { background: var(--jean); color: var(--encre); }
.niveau--declaratif { background: var(--blanc); color: var(--dore); border-color: var(--dore); }

.fiche-note {
  background: var(--jean);
  border-radius: 0 0 18px 0;
  padding: 28px 26px;
}
.fiche-note h3 { font-size: 1.16rem; }
.fiche-note p { font-size: 0.98rem; color: var(--ardoise); }
.fiche-note p:last-child { margin-bottom: 0; }
.phrase-publiee {
  font-family: var(--atelier);
  font-size: 0.9rem;
  background: var(--blanc);
  border-left: 3px solid var(--indigo);
  padding: 12px 14px;
  margin: 0 0 16px;
  color: var(--encre);
}

/* --------------------------------------------------------------------------
   14. Gains
   -------------------------------------------------------------------------- */

.gains {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.gain {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: 0 0 18px 0;
  padding: 30px 24px;
}
.gain__chiffre {
  font-family: var(--atelier);
  font-weight: 700;
  font-size: 2rem;
  color: var(--indigo);
  display: block;
  line-height: 1.1;
  margin-bottom: 8px;
}
.gain h3 { font-size: 1.06rem; }
.gain p { font-size: 0.95rem; color: var(--ardoise); margin-bottom: 0; }

.gain-terrain {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 48px;
  align-items: center;
  margin-top: 56px;
}
.gain-terrain h3 { font-size: 1.6rem; }

/* --------------------------------------------------------------------------
   15. Presentoir des temoignages
   -------------------------------------------------------------------------- */

.presentoir {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.temoin {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: 0 0 18px 0;
  padding: 34px 26px 28px;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.temoin.rainure-perle::before { left: 26px; right: 26px; top: 18px; }
.temoin.rainure-perle::after { top: 19px; left: 54px; }
.temoin.rainure-perle { padding-top: 38px; }

.temoin blockquote {
  margin: 0 0 18px;
  font-size: 1.02rem;
  color: var(--encre);
}
.temoin blockquote p:last-child { margin-bottom: 0; }

.temoin figcaption {
  margin-top: auto;
  border-top: 1px solid var(--filet);
  padding-top: 14px;
  font-size: 0.9rem;
  color: var(--ardoise);
}
.temoin figcaption b {
  display: block;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1rem;
  color: var(--encre);
}

/* --------------------------------------------------------------------------
   16. Tarifs
   -------------------------------------------------------------------------- */

.tarifs-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.tiroir-tarif {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: 0 0 20px 0;
  padding: 34px 28px 30px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tiroir-tarif--phare {
  border: 2px solid var(--indigo);
  margin-top: -16px;
  padding-top: 42px;
  padding-bottom: 38px;
  box-shadow: 0 20px 48px rgba(61, 52, 184, 0.14);
}

.tiroir-tarif__marque {
  font-family: var(--atelier);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sur-indigo);
  background: var(--indigo);
  padding: 4px 10px;
  display: inline-block;
  margin-bottom: 14px;
  border-radius: 0 0 6px 0;
}

.tiroir-tarif h3 { font-size: 1.36rem; margin-bottom: 0.35em; }

.tiroir-tarif__prix {
  font-family: var(--atelier);
  font-weight: 700;
  font-size: 2.6rem;
  color: var(--encre);
  line-height: 1;
  display: block;
  margin: 14px 0 4px;
}
.tiroir-tarif__unite {
  font-family: var(--atelier);
  font-size: 0.82rem;
  color: var(--ardoise);
  display: block;
  margin-bottom: 16px;
}
.tiroir-tarif__cible {
  font-size: 0.96rem;
  color: var(--ardoise);
  border-top: 1px solid var(--filet);
  padding-top: 16px;
}
.tiroir-tarif ul {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  font-size: 0.95rem;
}
.tiroir-tarif li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  color: var(--encre);
}
.tiroir-tarif li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--indigo);
}
.tiroir-tarif .bouton-perle,
.tiroir-tarif .bouton-filet { margin-top: auto; width: 100%; }

.note-tarifs {
  margin: 34px auto 0;
  max-width: 780px;
  text-align: center;
  font-size: 0.94rem;
  color: var(--ardoise);
}

/* --------------------------------------------------------------------------
   17. Pochette des questions
   -------------------------------------------------------------------------- */

.pochette { max-width: 760px; margin: 0 auto; }

.pochette details {
  border: 1px solid var(--filet);
  background: var(--blanc);
  border-radius: 0 0 14px 0;
  margin-bottom: 12px;
  padding: 0 22px;
}
.pochette details[open] { border-color: var(--indigo); background: var(--surface); }

.pochette summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 34px 20px 0;
  position: relative;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--encre);
}
.pochette summary::-webkit-details-marker { display: none; }
.pochette summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-right: 2px solid var(--indigo);
  border-bottom: 2px solid var(--indigo);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}
.pochette details[open] summary::after { transform: rotate(225deg); }
.pochette .reponse { padding: 0 0 20px; }
.pochette .reponse p { color: var(--ardoise); font-size: 0.99rem; }
.pochette .reponse p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   18. Bon de contact
   -------------------------------------------------------------------------- */

.bon {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.bon__accroche h2 { margin-bottom: 0.4em; }
.bon__accroche p { color: var(--ardoise); }
.bon__accroche .adresse-directe {
  font-family: var(--atelier);
  font-size: 0.92rem;
  color: var(--encre);
}

.bon__formulaire {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: 0 0 20px 0;
  padding: 34px 30px;
  box-shadow: 0 18px 44px rgba(26, 29, 51, 0.08);
}

.champ { margin-bottom: 18px; }
.champ label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--encre);
}
.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(--surface);
  border: 1.5px solid var(--filet);
  border-radius: 0 0 10px 0;
  padding: 12px 14px;
}
.champ textarea { resize: vertical; min-height: 120px; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus { border-color: var(--indigo); outline: none; background: var(--blanc); }
.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; }

.champ-consentement {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--ardoise);
  margin: 22px 0;
}
.champ-consentement input { margin-top: 4px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--indigo); }

.bon__formulaire button { width: 100%; }

.delai-reponse {
  margin: 18px 0 0;
  font-size: 0.88rem;
  color: var(--ardoise);
}

/* --------------------------------------------------------------------------
   19. Pied de planche
   -------------------------------------------------------------------------- */

.pied {
  background: var(--surface);
  border-top: 1px solid var(--filet);
  padding: 70px 0 0;
}

.pied__grille {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
}

.pied__colonne h2,
.pied__colonne h3 {
  font-size: 0.82rem;
  font-family: var(--atelier);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: 18px;
}

.pied__colonne ul { list-style: none; padding: 0; margin: 0; }
.pied__colonne li { margin-bottom: 10px; }
.pied__colonne a {
  color: var(--ardoise);
  text-decoration: none;
  font-size: 0.94rem;
}
.pied__colonne a:hover { color: var(--indigo); text-decoration: underline; }
.pied__colonne p { font-size: 0.94rem; color: var(--ardoise); }

.pied__colonne--identite {
  padding: 26px 24px;
  border-radius: 0 0 18px 0;
}

.pied__reseaux { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 16px; }
.pied__reseaux a { font-family: var(--atelier); font-size: 0.82rem; color: var(--encre); }

.pied__barre {
  margin-top: 56px;
  border-top: 1px solid var(--filet);
  padding: 22px 0 30px;
  font-size: 0.86rem;
  color: var(--ardoise);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   20. Pages interieures
   -------------------------------------------------------------------------- */

.entete-interieure { padding: 56px 0 12px; }
.entete-interieure h1 { font-size: 2.7rem; max-width: 20ch; }
.entete-interieure .chapeau { font-size: 1.15rem; color: var(--ardoise); max-width: 62ch; }

.fil {
  font-family: var(--atelier);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--ardoise);
  margin-bottom: 22px;
}
.fil a { color: var(--ardoise); text-decoration: none; }
.fil a:hover { color: var(--indigo); }

.texte-long { max-width: 760px; }
.texte-long h2 { font-size: 1.75rem; margin-top: 2.2em; }
.texte-long h3 { font-size: 1.2rem; margin-top: 1.7em; }
.texte-long h2:first-child { margin-top: 0; }
.texte-long ul { color: var(--encre); }
.texte-long li { color: var(--encre); }
.texte-long .encart {
  background: var(--jean);
  border-radius: 0 0 16px 0;
  padding: 24px 26px;
  margin: 30px 0;
}
.texte-long .encart p:last-child { margin-bottom: 0; }
.texte-long dl { margin: 0 0 1.4em; }
.texte-long dt { font-weight: 600; margin-top: 16px; }
.texte-long dd { margin: 4px 0 0; color: var(--ardoise); }

.portrait-auteur {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 36px;
  align-items: start;
  margin-bottom: 46px;
}
.portrait-auteur img { border-radius: 0 0 16px 0; border: 1px solid var(--filet); }

.liste-profils { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px 18px; }
.liste-profils a { font-family: var(--atelier); font-size: 0.86rem; }

.plan-liste { list-style: none; padding: 0; margin: 0; }
.plan-liste > li {
  border-bottom: 1px solid var(--filet);
  padding: 18px 0;
  margin: 0;
}
.plan-liste a { font-family: var(--titre); font-weight: 600; font-size: 1.1rem; text-decoration: none; }
.plan-liste a:hover { text-decoration: underline; }
.plan-liste p { margin: 6px 0 0; color: var(--ardoise); font-size: 0.96rem; }

.bloc-central {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  padding: 90px 24px 100px;
}
.bloc-central h1 { font-size: 2.9rem; }
.bloc-central p { margin-left: auto; margin-right: auto; color: var(--ardoise); font-size: 1.12rem; }
.bloc-central .paire-boutons { justify-content: center; }

/* --------------------------------------------------------------------------
   21. Apparition au defilement
   -------------------------------------------------------------------------- */

.au-sable {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.au-sable.pose { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   22. Adaptations
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .postale__interieur { grid-template-columns: 1fr; gap: 34px; padding: 30px; }
  .chaine { grid-template-columns: repeat(2, 1fr); }
  .gains { grid-template-columns: repeat(2, 1fr); }
  .casier { grid-template-columns: repeat(2, 1fr); }
  .fiche-demo { grid-template-columns: 1fr; gap: 34px; }
  .presentoir { grid-template-columns: 1fr; }
  .constat { grid-template-columns: 1fr; gap: 36px; }
  .gain-terrain { grid-template-columns: 1fr; gap: 30px; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .portrait-auteur { grid-template-columns: 1fr; }
  .portrait-auteur img { max-width: 260px; }
}

@media (max-width: 900px) {
  .navigation-gorge { display: none; }
  .etabli .bouton-perle { display: none; }
  .bouton-rainures { display: flex; }
  .tarifs-grille { grid-template-columns: 1fr; }
  .tiroir-tarif--phare { margin-top: 0; }
  .bon { grid-template-columns: 1fr; gap: 32px; }
  .bandeau-collant__grille { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  :root { --cadre-postale: 18px; }
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.7rem; }
  .gorge { padding: 62px 0; }
  .gorge--haute { padding: 72px 0; }
  .planche { padding: 0 18px; }
  .chaine { grid-template-columns: 1fr; }
  .gains { grid-template-columns: 1fr; }
  .casier { grid-template-columns: 1fr; }
  .pied__grille { grid-template-columns: 1fr; gap: 30px; }
  .postale__interieur { padding: 22px; }
  .postale .bandeau-collant__grille { grid-template-columns: 1fr; }
  .fiche-tableau__entete { position: static; }
  .fiche-tableau { overflow-x: auto; }
  .bandeau-collant { position: static; }
  table.matieres { font-size: 0.88rem; }
  table.matieres th, table.matieres td { padding: 10px 8px; }
  table.matieres th:first-child, table.matieres td:first-child { padding-left: 14px; }
  .entete-interieure h1 { font-size: 2rem; }
  .bloc-central h1 { font-size: 2.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .au-sable { opacity: 1; transform: none; }
}

@media print {
  .etabli, .panneau-atelier, .bouton-rainures, .paire-boutons { display: none !important; }
  body { font-size: 11pt; }
}
/* ==========================================================================
   23. Le Carnet des apprets, section magazine
   Le magazine reprend la palette, les trois polices, le motif de rides de
   sable, la forme signature (double filet rainure et sa perle) et le
   roulement des chiffres du bandeau collant. Aucune regle des sections 1 a 22
   n est modifiee: tout ce qui suit s ajoute.
   ========================================================================== */

/* --------------------------------------------------------------------------
   23.1 Intitules de pied de page sans balise de titre
   Une page d article ne porte qu une seule hierarchie de titres, celle du
   corps redactionnel. Le pied de page y emploie donc des paragraphes mis en
   forme exactement comme les intitules de colonne du reste du site.
   -------------------------------------------------------------------------- */

.pied__colonne .pied__intitule {
  font-size: 0.82rem;
  font-family: var(--atelier);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 18px;
  line-height: 1.3;
  max-width: none;
}

/* --------------------------------------------------------------------------
   23.2 Entete du magazine et entete d article, en carte postale
   -------------------------------------------------------------------------- */

.entete-carnet { padding: 42px 0 34px; }
.entete-carnet .postale { padding: var(--cadre-postale); }

.entete-carnet__cadre {
  border: 1px solid var(--filet);
  border-radius: 0 0 18px 0;
  padding: 34px 36px 32px;
}

.entete-carnet h1 { font-size: 3rem; margin-bottom: 0.32em; }
.entete-carnet .chapeau {
  font-size: 1.15rem;
  color: var(--ardoise);
  max-width: 68ch;
  margin-bottom: 0;
}

.fil--carnet { margin-bottom: 20px; }
.fil--carnet a { text-decoration: none; }
.fil--carnet span { color: var(--encre); }

.entete-article h1 { font-size: 2.7rem; max-width: 26ch; margin-bottom: 0.3em; }

.entete-article .etiquette-secteur { margin-bottom: 20px; }

/* Le chapeau en exergue typographique, cale sur la mesure de lecture. */
.exergue-chapo {
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--encre);
  max-width: 62ch;
  margin: 0;
  border-left: 3px solid var(--indigo);
  padding: 6px 0 6px 20px;
}

/* --------------------------------------------------------------------------
   23.3 Bandeau de reperes de lecture, collant, avec roulement des chiffres
   -------------------------------------------------------------------------- */

/* Le bandeau de reperes est un frere de la section d entete: il reste ainsi
   colle sous l en tete pendant toute la lecture, et ses chiffres roulent au
   moment exact ou il prend sa position collante. */
.bandeau-collant--carnet { margin-top: 0; }
.bandeau-collant--carnet .bandeau-collant__grille {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bandeau-collant--carnet .jeton-chiffre__valeur {
  font-size: 1.16rem;
  height: auto;
  overflow: visible;
}
.bandeau-collant--carnet .jeton-chiffre__valeur time { font-style: normal; }

/* --------------------------------------------------------------------------
   23.4 Grille et cartes d article
   -------------------------------------------------------------------------- */

.carnet-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.carnet-carte {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 0 0 18px 0;
  padding: 34px 26px 28px;
  margin: 0;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.carnet-carte.rainure-perle { padding-top: 38px; }
.carnet-carte.rainure-perle::before { left: 26px; right: 26px; top: 18px; }
.carnet-carte.rainure-perle::after { top: 19px; left: 54px; }
.carnet-carte:hover {
  box-shadow: 0 16px 38px rgba(26, 29, 51, 0.10);
  transform: translateY(-2px);
  border-color: var(--indigo);
}

.carnet-carte__visuel {
  background: var(--blanc);
  padding: 10px;
  border-radius: 0 0 14px 0;
  margin-bottom: 18px;
}
.carnet-carte__visuel img {
  width: 100%;
  height: auto;
  border: 1px solid var(--filet);
  border-radius: 0 0 10px 0;
  filter: saturate(0.92) brightness(1.03);
}

.carnet-carte__angle {
  display: inline-block;
  font-family: var(--atelier);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dore);
  border: 1px solid var(--filet);
  padding: 4px 10px;
  border-radius: 0 0 8px 0;
  margin-bottom: 14px;
}

.carnet-carte__titre {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.24rem;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--encre);
  margin: 0 0 0.6em;
  max-width: none;
}
.carnet-carte__titre a { color: var(--encre); text-decoration: none; }
.carnet-carte__titre a:hover,
.carnet-carte__titre a:focus-visible { color: var(--indigo); text-decoration: underline; }

.carnet-carte__extrait {
  font-size: 0.97rem;
  color: var(--ardoise);
  margin-bottom: 20px;
  max-width: none;
}

.carnet-carte__pied {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--filet);
  font-family: var(--atelier);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--ardoise);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  max-width: none;
}
.carnet-carte__pied time { font-style: normal; }
.carnet-carte__pied .duree { color: var(--indigo); }

/* La premiere carte du sommaire, mise en avant sur toute la largeur. */
.carnet-carte--tete {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 32px;
  align-items: center;
  background: var(--blanc);
  padding: 38px 32px 32px;
}
.carnet-carte--tete.rainure-perle::before { left: 32px; right: 32px; top: 20px; }
.carnet-carte--tete.rainure-perle::after { top: 21px; left: 60px; }
.carnet-carte--tete .carnet-carte__visuel { margin-bottom: 0; padding: 0; }
.carnet-carte--tete .carnet-carte__titre { font-size: 1.72rem; }
.carnet-carte--tete .carnet-carte__extrait { font-size: 1.04rem; }
.carnet-carte--tete .carnet-carte__contenu { display: flex; flex-direction: column; }

/* --------------------------------------------------------------------------
   23.5 Corps d article, HTML semantique nu
   Le texte insere par l assembleur ne porte aucune classe: chaque balise est
   mise en forme ici, en descendante du conteneur de corps.
   -------------------------------------------------------------------------- */

.corps-article {
  max-width: 760px;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.68;
  color: var(--encre);
  overflow-wrap: break-word;
}

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

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

.corps-article h2 {
  position: relative;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.85rem;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--encre);
  margin: 2.3em 0 0.75em;
  padding-top: 26px;
  max-width: 26ch;
}
.corps-article h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background-image:
    linear-gradient(var(--filet), var(--filet)),
    linear-gradient(var(--filet), var(--filet));
  background-size: 100% 1px, 100% 1px;
  background-position: 0 0, 0 5px;
  background-repeat: no-repeat;
}
.corps-article h2::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 28px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--indigo);
  transition: transform 0.35s ease;
}
.corps-article h2:hover::after { transform: translateX(12px); }

.corps-article h3 {
  position: relative;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--encre);
  margin: 1.9em 0 0.6em;
  padding-left: 20px;
  max-width: 34ch;
}
.corps-article h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.46em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--indigo);
}

.corps-article ul,
.corps-article ol {
  max-width: 66ch;
  margin: 0 0 1.4em;
  padding-left: 0;
  list-style: none;
}
.corps-article li { margin-bottom: 0.6em; padding-left: 28px; position: relative; }

.corps-article ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--jean);
  border: 1.5px solid var(--indigo);
}

.corps-article ol { counter-reset: rainure; }
.corps-article ol > li { counter-increment: rainure; }
.corps-article ol > li::before {
  content: counter(rainure, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.16em;
  font-family: var(--atelier);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--dore);
}

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

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

.corps-article a { color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; }
.corps-article a:hover { color: var(--indigo-fonce); }

/* Tableau recapitulatif, dans la forme du tableau matieres du site. */
.corps-article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin: 0 0 1.8em;
  border: 1px solid var(--filet);
  border-radius: 0 0 14px 0;
  background: var(--blanc);
}
.corps-article thead th {
  font-family: var(--atelier);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--indigo);
  background: var(--surface);
  text-align: left;
  vertical-align: bottom;
}
.corps-article th,
.corps-article td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--filet);
  text-align: left;
  vertical-align: top;
}
.corps-article tbody th {
  font-family: var(--courant);
  font-weight: 600;
  color: var(--encre);
}
.corps-article tbody tr:last-child th,
.corps-article tbody tr:last-child td { border-bottom: none; }
.corps-article tbody tr:hover { background: var(--surface); }
.corps-article table td + td { font-variant-numeric: tabular-nums; }

/* Encadre recapitulatif, sur la bande bleu jean du site. */
.corps-article aside {
  position: relative;
  background: var(--jean);
  border-radius: 0 0 16px 0;
  padding: 32px 28px 24px;
  margin: 2em 0;
  max-width: 720px;
}
.corps-article aside::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 28px;
  right: 28px;
  height: 6px;
  background-image:
    linear-gradient(var(--indigo), var(--indigo)),
    linear-gradient(var(--indigo), var(--indigo));
  background-size: 100% 1px, 100% 1px;
  background-position: 0 0, 0 5px;
  background-repeat: no-repeat;
  opacity: 0.3;
}
.corps-article aside::after {
  content: "";
  position: absolute;
  top: 17px;
  left: 56px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--indigo);
  transition: transform 0.35s ease;
}
.corps-article aside:hover::after { transform: translateX(12px); }
.corps-article aside p { color: var(--encre); }
.corps-article aside p:last-child,
.corps-article aside ul:last-child,
.corps-article aside ol:last-child { margin-bottom: 0; }

/* Citation, filet indigo et police d atelier. */
.corps-article blockquote {
  margin: 2em 0;
  padding: 8px 0 8px 22px;
  border-left: 3px solid var(--indigo);
  max-width: 62ch;
}
.corps-article blockquote p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--encre);
}
.corps-article blockquote p:last-child { margin-bottom: 0; }

.corps-article figure {
  margin: 2em 0;
  background: var(--blanc);
  padding: 22px;
  border-radius: 0 0 20px 0;
  box-shadow: 0 18px 44px rgba(26, 29, 51, 0.10);
  max-width: 760px;
}
.corps-article figure img { border: 1px solid var(--filet); border-radius: 0 0 12px 0; }
.corps-article figcaption {
  font-family: var(--atelier);
  font-size: 0.82rem;
  color: var(--ardoise);
  margin-top: 12px;
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   23.6 Image a la une, appel a l action, encart auteur
   -------------------------------------------------------------------------- */

.visuel-article { margin: 0 0 44px; display: block; }
.visuel-article img { width: 100%; }

.corps-planche {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(0, 300px);
  gap: 56px;
  align-items: start;
}

.colonne-corps { min-width: 0; }

.colonne-appui { position: sticky; top: calc(var(--hauteur-etabli) + 24px); }

.encart-produit {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 0 0 18px 0;
  padding: 30px 24px 26px;
}
.encart-produit.rainure-perle { padding-top: 34px; }
.encart-produit.rainure-perle::before { left: 24px; right: 24px; top: 16px; }
.encart-produit.rainure-perle::after { top: 17px; left: 52px; }
.encart-produit__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.14rem;
  color: var(--encre);
  margin: 0 0 0.6em;
  max-width: none;
}
.encart-produit p { font-size: 0.96rem; color: var(--ardoise); max-width: none; }
.encart-produit .bouton-perle { width: 100%; margin-top: 8px; }

.appel-carnet {
  margin: 52px 0 0;
  background: var(--jean);
  border-radius: 0 0 20px 0;
  padding: 36px 34px 32px;
  max-width: 760px;
}
.appel-carnet__titre {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--encre);
  margin: 0 0 0.5em;
  max-width: 26ch;
}
.appel-carnet p { color: var(--encre); max-width: 62ch; }
.appel-carnet .paire-boutons { margin-top: 22px; }

.encart-auteur {
  margin: 52px 0 0;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: 0 0 18px 0;
  padding: 34px 30px 28px;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  align-items: start;
  max-width: 760px;
}
.encart-auteur.rainure-perle { padding-top: 38px; }
.encart-auteur.rainure-perle::before { left: 30px; right: 30px; top: 18px; }
.encart-auteur.rainure-perle::after { top: 19px; left: 58px; }
.encart-auteur img {
  border-radius: 0 0 14px 0;
  border: 1px solid var(--filet);
  width: 96px;
  height: 96px;
}
.encart-auteur__role {
  font-family: var(--atelier);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 8px;
  max-width: none;
}
.encart-auteur__nom {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.24rem;
  letter-spacing: -0.02em;
  color: var(--encre);
  margin: 0 0 0.5em;
  max-width: none;
}
.encart-auteur p { font-size: 0.97rem; color: var(--ardoise); }
.encart-auteur p:last-child { margin-bottom: 0; }

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

.lire-aussi { padding: 82px 0 92px; }

.lire-aussi__intitule {
  font-family: var(--atelier);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--indigo);
  margin: 0 0 26px;
  max-width: none;
}

.lire-aussi__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.lire-aussi__carte {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: 0 0 18px 0;
  padding: 32px 24px 26px;
  margin: 0;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.lire-aussi__carte.rainure-perle { padding-top: 36px; }
.lire-aussi__carte.rainure-perle::before { left: 24px; right: 24px; top: 18px; }
.lire-aussi__carte.rainure-perle::after { top: 19px; left: 52px; }
.lire-aussi__carte:hover {
  box-shadow: 0 16px 38px rgba(26, 29, 51, 0.10);
  transform: translateY(-2px);
  border-color: var(--indigo);
}

.lire-aussi__visuel {
  width: 100%;
  height: auto;
  border: 1px solid var(--filet);
  border-radius: 0 0 10px 0;
  filter: saturate(0.92) brightness(1.03);
  margin-bottom: 18px;
}

.lire-aussi__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.26;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  max-width: none;
}
.lire-aussi__titre a { color: var(--encre); text-decoration: none; }
.lire-aussi__titre a:hover,
.lire-aussi__titre a:focus-visible { color: var(--indigo); text-decoration: underline; }

.lire-aussi__accroche {
  font-size: 0.94rem;
  color: var(--ardoise);
  margin: 0;
  max-width: none;
}

/* --------------------------------------------------------------------------
   23.8 Derniers articles, section de la page d accueil
   -------------------------------------------------------------------------- */

.derniers-articles .tete-gorge { max-width: 760px; }

.derniers-articles__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 38px;
}
.derniers-articles__pied p {
  margin: 0;
  color: var(--ardoise);
  font-size: 0.96rem;
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   23.9 Sommaire du magazine, reperes de tete
   -------------------------------------------------------------------------- */

.sommaire-carnet { padding: 78px 0 92px; }
.sommaire-carnet .tete-gorge { max-width: 760px; }

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

@media (max-width: 1080px) {
  .corps-planche { grid-template-columns: 1fr; gap: 40px; }
  .colonne-appui { position: static; }
  .encart-produit { max-width: 760px; }
  .carnet-grille { grid-template-columns: repeat(2, 1fr); }
  .carnet-carte--tete { grid-template-columns: 1fr; gap: 24px; }
  .lire-aussi__grille { grid-template-columns: repeat(2, 1fr); }
  .bandeau-collant--carnet .bandeau-collant__grille { grid-template-columns: repeat(2, 1fr); }
  .entete-carnet h1 { font-size: 2.5rem; }
  .entete-article h1 { font-size: 2.3rem; }
}

@media (max-width: 700px) {
  .entete-carnet .postale { padding: 18px; }
  .entete-carnet__cadre { padding: 24px 20px 22px; }
  .entete-carnet h1 { font-size: 2rem; }
  .entete-article h1 { font-size: 1.9rem; }
  .exergue-chapo { font-size: 1.06rem; padding-left: 16px; }
  .carnet-grille { grid-template-columns: 1fr; gap: 22px; }
  .lire-aussi__grille { grid-template-columns: 1fr; }
  .lire-aussi { padding: 58px 0 66px; }
  .sommaire-carnet { padding: 54px 0 62px; }
  .bandeau-collant--carnet .bandeau-collant__grille { grid-template-columns: 1fr; }
  .corps-article h2 { font-size: 1.5rem; max-width: none; }
  .corps-article h3 { font-size: 1.16rem; max-width: none; }
  .corps-article table { font-size: 0.86rem; }
  .corps-article th,
  .corps-article td { padding: 10px 9px; }
  .corps-article aside { padding: 28px 20px 20px; }
  .corps-article aside::before { left: 20px; right: 20px; }
  .corps-article aside::after { left: 48px; }
  .corps-article figure { padding: 14px; }
  .encart-auteur { grid-template-columns: 1fr; padding: 30px 22px 24px; }
  .appel-carnet { padding: 28px 22px 26px; }
  .appel-carnet__titre { font-size: 1.3rem; }
}

/* Maillage du reseau, bandeau de pied de page. Mise en page seulement:
   les couleurs, la police et le survol restent ceux du site.
   grid-column et flex-basis font tenir le bandeau sur toute la largeur,
   que le pied de page soit une grille ou une boite flexible.
   Les raccourcis margin et padding sont evites: ils ecraseraient le retrait
   interieur d une colonne dont le bandeau herite la classe. */
[data-reseau-bloc]{grid-column:1/-1;flex-basis:100%;width:100%;margin-top:26px;padding-top:18px}
[data-reseau-titre]{font-size:.8rem;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;margin:0 0 12px}
ul[data-reseau]{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0}
ul[data-reseau] li{margin:0;padding:0}

/* En tete: aucun libelle ne se coupe en deux lignes. La gouttiere et la taille
   du texte cedent avant le mot, jamais l inverse. */
header a, header button { white-space: nowrap; }
header nav[class] { column-gap: clamp(10px, 1.3vw, 26px); }
/* Entre le menu de bureau et le menu replie du telephone, la barre est a l etroit:
   la gouttiere et le corps du texte cedent d un cran plutot que de deborder. */
@media (max-width: 1220px) {
  header nav[class] { column-gap: clamp(8px, 1vw, 16px); }
  header nav[class] a, header nav[class] button { font-size: 0.93em; letter-spacing: 0; }
  /* Le bouton de l en tete se resserre lui aussi: c est la piece la plus large
     de la barre, et c est elle qui sortait de la fenetre. */
  header a[class*="bouton"], header a[class*="cta"] { padding-left: 14px; padding-right: 14px; }
}

/*xn:start*/
/* Pages ressources: portail, guide pilier, comparatifs, outils, aimant.
   Un seul bloc, prefixe xn-, ajoute a la feuille du site. Il ne redefinit
   aucune classe existante et emprunte au site ses couleurs et ses polices. */
:root{
  --xn-bg:#FFFFFF;--xn-soft:#E8EDF8;--xn-surface:#FBFCFF;--xn-text:#1A1D33;
  --xn-muted:#565C7A;--xn-accent:#3D34B8;--xn-on-accent:#FFFFFF;--xn-line:#C9D2E6;
  --xn-h:"Raleway", "Trebuchet MS", sans-serif;--xn-b:"Public Sans", "Helvetica Neue", Arial, sans-serif;
}
.xn-main{background:var(--xn-bg);color:var(--xn-text);font-family:var(--xn-b);line-height:1.65}
.xn-main *,.xn-main *::before,.xn-main *::after{box-sizing:border-box}
.xn-wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 clamp(18px,4vw,32px)}
.xn-wrap--narrow{max-width:800px}
.xn-band{padding:clamp(34px,5.2vw,68px) 0}
.xn-band--soft{background:var(--xn-soft)}
.xn-band--surface{background:var(--xn-surface)}
.xn-main h1,.xn-main h2,.xn-main h3,.xn-main h4{font-family:var(--xn-h);color:var(--xn-text);line-height:1.16;margin:0 0 .55em;text-wrap:balance}
.xn-main h1{font-size:clamp(1.95rem,4.4vw,3.05rem);letter-spacing:-.01em}
.xn-main h2{font-size:clamp(1.4rem,2.7vw,2.05rem);margin-top:1.6em}
.xn-main h3{font-size:clamp(1.08rem,1.7vw,1.3rem);margin-top:1.4em}
.xn-main p{margin:0 0 1.05em;color:var(--xn-text)}
.xn-main a{color:var(--xn-accent);text-underline-offset:3px}
.xn-main a:hover{text-decoration:none}
.xn-crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.83rem;color:var(--xn-muted);padding:22px 0 0;margin:0}
.xn-crumb a{color:var(--xn-muted)}
.xn-crumb span[aria-hidden]{opacity:.5}
.xn-eyebrow{display:inline-block;font-family:var(--xn-h);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--xn-accent);margin:0 0 .7em}
.xn-lead{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--xn-muted);max-width:64ch}
.xn-hd{padding:clamp(26px,4vw,52px) 0 clamp(18px,3vw,32px)}
.xn-meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.83rem;color:var(--xn-muted);margin:.4em 0 0;padding:0;list-style:none}
.xn-prose>*:first-child{margin-top:0}
.xn-prose ul,.xn-prose ol{margin:0 0 1.2em;padding-left:1.25em}
.xn-prose li{margin:0 0 .5em}
.xn-note{border-left:3px solid var(--xn-accent);background:var(--xn-surface);padding:14px 18px;margin:0 0 1.3em;font-size:.95rem;color:var(--xn-muted)}
.xn-card{background:var(--xn-surface);border:1px solid var(--xn-line);border-radius:4px;padding:clamp(18px,2.4vw,26px)}
.xn-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));margin:0;padding:0;list-style:none}
.xn-grid h3{margin-top:0}
.xn-grid p{font-size:.94rem;color:var(--xn-muted);margin-bottom:.8em}
.xn-tag{display:inline-block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--xn-h);color:var(--xn-muted);margin:0 0 .6em}
.xn-btn,.xn-main a.xn-btn{display:inline-block;font-family:var(--xn-h);font-size:.95rem;letter-spacing:.02em;padding:13px 24px;border-radius:3px;border:1px solid var(--xn-accent);background:var(--xn-accent);color:var(--xn-on-accent);text-decoration:none;cursor:pointer;text-align:center}
.xn-btn:hover,.xn-main a.xn-btn:hover{filter:brightness(1.09);text-decoration:none}
.xn-btn--ghost,.xn-main a.xn-btn--ghost{background:transparent;color:var(--xn-accent)}
.xn-actions{display:flex;flex-wrap:wrap;gap:12px;margin:1.4em 0 0}
.xn-tablewrap{overflow-x:auto;border:1px solid var(--xn-line);border-radius:4px;background:var(--xn-surface)}
.xn-table{width:100%;border-collapse:collapse;min-width:640px;font-size:.94rem}
.xn-table th,.xn-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--xn-line);vertical-align:top}
.xn-table thead th{font-family:var(--xn-h);font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;background:var(--xn-soft);color:var(--xn-text)}
.xn-table tbody th{font-weight:600;color:var(--xn-text);width:26%}
.xn-table td:first-of-type{color:var(--xn-text)}
.xn-table .xn-yes{color:var(--xn-accent);font-weight:600}
.xn-faq dt{font-family:var(--xn-h);font-size:1.06rem;margin:1.4em 0 .4em;color:var(--xn-text)}
.xn-faq dd{margin:0;color:var(--xn-muted)}
.xn-toc{background:var(--xn-surface);border:1px solid var(--xn-line);border-radius:4px;padding:20px 24px;margin:0 0 2em}
.xn-toc p{font-family:var(--xn-h);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--xn-muted);margin:0 0 .7em}
.xn-toc ol{margin:0;padding-left:1.2em;columns:2;column-gap:32px}
.xn-toc li{margin:0 0 .42em;font-size:.94rem;break-inside:avoid}
@media(max-width:640px){.xn-toc ol{columns:1}}
.xn-check{list-style:none;margin:0;padding:0}
.xn-check li{position:relative;padding:0 0 .62em 30px;color:var(--xn-text)}
.xn-check li::before{content:"";position:absolute;left:2px;top:.42em;width:13px;height:8px;border-left:2.5px solid var(--xn-accent);border-bottom:2.5px solid var(--xn-accent);transform:rotate(-45deg)}
.xn-form{display:grid;gap:14px;max-width:520px}
.xn-form label{font-family:var(--xn-h);font-size:.86rem;letter-spacing:.03em;display:block;margin:0 0 5px;color:var(--xn-text)}
.xn-form input[type=text],.xn-form input[type=email],.xn-form input[type=number]{width:100%;padding:11px 13px;border:1px solid var(--xn-line);border-radius:3px;background:var(--xn-surface);color:var(--xn-text);font:inherit;font-size:1rem}
.xn-form input:focus-visible,.xn-btn:focus-visible,.xn-main a:focus-visible{outline:3px solid var(--xn-accent);outline-offset:2px}
.xn-consent{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--xn-muted)}
.xn-consent input{margin-top:.25em;flex:0 0 auto}
.xn-tool{display:grid;gap:26px;grid-template-columns:minmax(280px,1fr) minmax(260px,.85fr);align-items:start}
@media(max-width:820px){.xn-tool{grid-template-columns:1fr}}
.xn-out{background:var(--xn-surface);border:1px solid var(--xn-line);border-radius:4px;padding:22px 24px;position:sticky;top:16px}
@media(min-width:821px){.xn-sticky{position:sticky;top:16px}}
.xn-out__row{padding:0 0 16px;margin:0 0 16px;border-bottom:1px solid var(--xn-line)}
.xn-out__row:last-child{border:0;margin:0;padding:0}
.xn-out__lab{font-family:var(--xn-h);font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;color:var(--xn-muted);margin:0 0 .3em}
.xn-out__val{font-family:var(--xn-h);font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.05;color:var(--xn-accent);margin:0}
.xn-out__row--first .xn-out__val{font-size:clamp(2rem,4.6vw,2.9rem)}
.xn-out__note{font-size:.86rem;color:var(--xn-muted);margin:.35em 0 0}
.xn-field__help{font-size:.83rem;color:var(--xn-muted);margin:5px 0 0}
.xn-hint{font-size:.85rem;color:var(--xn-muted);margin:1.2em 0 0}
.xn-cta{background:var(--xn-accent);color:var(--xn-on-accent);border-radius:4px;padding:clamp(24px,3.4vw,40px)}
.xn-cta h2,.xn-cta p{color:var(--xn-on-accent)}
.xn-cta h2{margin-top:0}
.xn-cta a{color:var(--xn-on-accent)}
.xn-cta .xn-btn,.xn-main .xn-cta a.xn-btn{background:var(--xn-on-accent);color:var(--xn-accent);border-color:var(--xn-on-accent)}
.xn-cta .xn-btn--ghost,.xn-main .xn-cta a.xn-btn--ghost{background:transparent;color:var(--xn-on-accent)}
.xn-links{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.xn-links a{font-family:var(--xn-h);font-size:1rem}
.xn-links span{display:block;font-family:var(--xn-b);font-size:.89rem;color:var(--xn-muted)}

/* Appel vers l article pilier, insere dans les neuf articles du magazine */
.xn-pillar{border:1px solid var(--xn-line);border-left:4px solid var(--xn-accent);background:var(--xn-surface);
  border-radius:3px;padding:16px 20px;margin:1.8em 0;font-family:var(--xn-b);line-height:1.55}
.xn-pillar__k{font-family:var(--xn-h);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--xn-accent);margin:0 0 .35em}
.xn-pillar__t{font-family:var(--xn-h);font-size:1.1rem;margin:0 0 .3em;line-height:1.25}
.xn-pillar__t a{color:var(--xn-text)}
.xn-pillar__d{font-size:.9rem;color:var(--xn-muted);margin:0}

/* Le lien de menu ajoute. La barre qui l accueille etait calibree au pixel:
   on l autorise a passer a la ligne plutot qu a casser un libelle en trois. */
.xn-navlink{white-space:nowrap}
nav:has(> .xn-navlink){flex-wrap:wrap}
nav:has(> .xn-navlink) > a{white-space:nowrap}
@media(min-width:1024px){nav:has(> .xn-navlink){font-size:.93em;column-gap:clamp(.7rem,1.45vw,1.5rem);row-gap:.3rem}}

/* Bloc de liens ajoute au pied de page de chaque page du site */
.xn-foot{border-top:1px solid currentColor;margin:26px 0 0;padding:20px 0 2px;font-size:.9rem}
.xn-foot__t{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;margin:0 0 10px;opacity:.72}
.xn-foot__l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px 22px}
.xn-foot__l a{color:inherit;text-decoration:underline;text-underline-offset:3px;opacity:.92}
.xn-foot__l a:hover{opacity:1}
@media(prefers-reduced-motion:reduce){.xn-main *{animation:none!important;transition:none!important}}
/*xn:end*/