/* ==========================================================================
   Abornet, feuille de style unique
   Systeme de nommage: prefixe "bo" (bornage), puis un mot du vocabulaire
   du dossier foncier: plan, module, fiche, pastille, cartouche, escalier,
   etape, limite, pli, emargement, carence, minute.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons de la marque
   -------------------------------------------------------------------------- */
:root {
  --fond: #1B1119;
  --fond-alt: #231620;
  --surface: #2C1D29;
  --texte: #F7ECEF;
  --texte-doux: #C4A7B5;
  --accent: #E458B1;
  --accent-texte: #23111C;
  --peche: #F2A57C;
  --bordure: #3D2937;

  --titre: "Lexend", "Segoe UI", Tahoma, sans-serif;
  --courant: "Commissioner", "Segoe UI", Verdana, sans-serif;
  --cachet: "Antic Slab", Georgia, "Times New Roman", serif;

  --module: 96px;
  --biseau-x: 30px;
  --biseau-y: 17px;
  --gouttiere: 28px;
  --largeur: 1180px;
  --rayon: 3px;
  --transition: 220ms cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. Remise a zero mesuree
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--courant);
  font-size: 1.05rem;
  line-height: 1.7;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

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

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

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

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

/* --------------------------------------------------------------------------
   3. Echelle typographique
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--titre);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 .6em;
  text-wrap: balance;
}

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

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

strong, .bo-porteuse { font-weight: 500; color: var(--texte); }

.bo-surtitre {
  font-family: var(--cachet);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent);
  display: block;
  margin: 0 0 .9rem;
}

.bo-surtitre--peche { color: var(--peche); }

.bo-ref {
  font-family: var(--cachet);
  font-size: .95em;
  color: var(--peche);
  white-space: nowrap;
}

.bo-chapeau {
  font-size: 1.18rem;
  color: var(--texte-doux);
  max-width: 62ch;
}

.bo-legende {
  font-family: var(--cachet);
  font-size: .82rem;
  color: var(--texte-doux);
  letter-spacing: .02em;
}

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

.bo-cadre--etroit { width: min(100% - 2.4rem, 860px); margin-inline: auto; }

.bo-section {
  position: relative;
  padding: 6.5rem 0;
  overflow: hidden;
}

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

.bo-section--serree { padding: 4.2rem 0; }

.bo-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-texte);
  padding: .7rem 1.2rem;
  font-family: var(--cachet);
  z-index: 200;
}
.bo-evitement:focus { left: 1rem; top: 1rem; }

/* Biseau isometrique, forme signature du site ------------------------------ */
.bo-biseau {
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--biseau-x)) 0, 100% var(--biseau-y), 100% 100%, 0 100%);
}

.bo-biseau::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--biseau-x);
  height: var(--biseau-y);
  background: linear-gradient(to bottom left,
    transparent 49.2%, var(--bordure) 49.2%, var(--bordure) 50.8%, transparent 50.8%);
  pointer-events: none;
}

.bo-biseau--vif::after {
  background: linear-gradient(to bottom left,
    transparent 49.2%, var(--accent) 49.2%, var(--accent) 50.8%, transparent 50.8%);
}

/* --------------------------------------------------------------------------
   5. Motif signature: courbes de niveau imbriquees
   -------------------------------------------------------------------------- */
.bo-courbes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bo-courbes svg {
  position: absolute;
  width: 160%;
  height: auto;
  left: -12%;
}

.bo-courbes--haut svg { top: -18%; }
.bo-courbes--bas svg { bottom: -22%; }

.bo-courbes path {
  fill: none;
  stroke: var(--bordure);
  stroke-width: 1;
  opacity: .35;
}

.bo-courbes--rose path { stroke: var(--accent); opacity: .22; }
.bo-courbes--peche path { stroke: var(--peche); opacity: .18; }

/* Second jeu de courbes, genere en CSS pour les zones larges */
.bo-nappe::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-radial-gradient(ellipse 1400px 380px at 22% 40%,
      transparent 0 46px, rgba(61, 41, 55, .55) 46px 47px),
    repeating-radial-gradient(ellipse 1100px 300px at 84% 74%,
      transparent 0 38px, rgba(228, 88, 177, .09) 38px 39px);
  opacity: .9;
}

/* Trame isometrique de fond, carre de 96 pixels pivote de trente degres ----- */
.bo-trame::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(30deg, rgba(61, 41, 55, .55) 0 1px, transparent 1px var(--module)),
    repeating-linear-gradient(120deg, rgba(61, 41, 55, .40) 0 1px, transparent 1px var(--module));
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 42%, #000 12%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 62% at 50% 42%, #000 12%, transparent 78%);
}

.bo-section > .bo-cadre { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   6. En tete fixe
   -------------------------------------------------------------------------- */
.bo-entete {
  position: fixed;
  inset: 0 0 auto 0;
  height: 68px;
  z-index: 100;
  background: rgba(27, 17, 25, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition);
}

.bo-entete.est-pose {
  background: rgba(27, 17, 25, .96);
  border-bottom-color: var(--bordure);
}

.bo-entete__rang {
  height: 68px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.bo-logotype {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.28rem;
  letter-spacing: -0.03em;
  color: var(--texte);
  text-decoration: none;
  flex: 0 0 auto;
}

.bo-logotype svg { width: 34px; height: 34px; display: block; }

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

.bo-nav a {
  font-family: var(--courant);
  font-weight: 500;
  font-size: .95rem;
  color: var(--texte);
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
}

.bo-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  transition: width var(--transition);
}

.bo-nav a:hover::after,
.bo-nav a:focus-visible::after { width: 100%; }

.bo-entete .bo-bouton { flex: 0 0 auto; }

/* Bouton a trois traits inclines */
.bo-bascule {
  display: none;
  width: 46px;
  height: 42px;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  cursor: pointer;
  position: relative;
}

.bo-bascule span {
  position: absolute;
  left: 11px;
  width: 24px;
  height: 2px;
  background: var(--texte);
  transform: skewX(-30deg);
  transition: transform var(--transition), opacity var(--transition);
}
.bo-bascule span:nth-child(1) { top: 13px; }
.bo-bascule span:nth-child(2) { top: 20px; }
.bo-bascule span:nth-child(3) { top: 27px; }

.bo-bascule[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(-30deg); }
.bo-bascule[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bo-bascule[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(30deg); }

/* Panneau plein ecran */
.bo-panneau {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--fond);
  padding: 92px 1.4rem 2rem;
  display: none;
  flex-direction: column;
  gap: .4rem;
  overflow-y: auto;
}

.bo-panneau.est-ouvert { display: flex; }

.bo-panneau a {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--texte);
  text-decoration: none;
  padding: .85rem 0;
  border-bottom: 1px solid var(--bordure);
}

.bo-panneau a:hover { color: var(--accent); }

.bo-panneau .bo-bouton {
  margin-top: 1.4rem;
  font-size: 1rem;
  align-self: flex-start;
}

body.est-bloque { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. Boutons
   -------------------------------------------------------------------------- */
.bo-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 50px;
  padding: 0 1.5rem;
  font-family: var(--courant);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  border-radius: var(--rayon);
  background: var(--accent);
  color: var(--accent-texte);
  position: relative;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 13px, 100% 100%, 0 100%);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.bo-bouton:hover { background: #EA6DBB; color: var(--accent-texte); transform: translateY(-1px); }

.bo-bouton::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 22px; height: 13px;
  background: linear-gradient(to bottom left,
    transparent 49%, var(--peche) 49%, var(--peche) 51%, transparent 51%);
  opacity: 0;
  transition: opacity var(--transition);
}
.bo-bouton:hover::after { opacity: 1; }

.bo-bouton--sourd {
  background: transparent;
  color: var(--texte);
  box-shadow: inset 0 0 0 1px var(--bordure);
}
.bo-bouton--sourd:hover {
  background: var(--surface);
  color: var(--texte);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.bo-bouton--large { width: 100%; }

.bo-bouton__pastille {
  font-family: var(--cachet);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .1rem .45rem;
  border-radius: 2px;
  background: rgba(35, 17, 28, .18);
}

.bo-bouton--sourd .bo-bouton__pastille {
  background: rgba(228, 88, 177, .16);
  color: var(--peche);
}

.bo-duo {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   8. Hero: deux plans inclines qui se croisent
   -------------------------------------------------------------------------- */
.bo-plan {
  position: relative;
  padding: 148px 0 5.5rem;
  background: var(--fond);
}

.bo-plan__rang {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: 3.2rem;
  align-items: start;
}

.bo-plan__dit { padding-top: 12px; }

.bo-plan h1 { margin-bottom: 1.1rem; }
.bo-plan h1 .bo-souligne {
  color: var(--accent);
  background: linear-gradient(transparent 74%, rgba(228, 88, 177, .22) 74%);
}

/* Effet machine a ecrire */
.bo-frappe {
  font-family: var(--cachet);
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--peche);
  display: block;
  margin-bottom: 1.3rem;
  min-height: 3.2em;
}

.bo-frappe .bo-signe { visibility: hidden; }
.bo-frappe .bo-signe.est-frappe { visibility: visible; }

.bo-frappe.est-active::after {
  content: "";
  display: inline-block;
  width: .58em;
  height: 1.05em;
  margin-left: .12em;
  vertical-align: -0.18em;
  background: var(--accent);
  animation: bo-clignote 2s steps(1, end) infinite;
}

@keyframes bo-clignote {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* Visuel du hero, pose sur le plan haut, decale vers le bas */
.bo-plan__vu {
  position: relative;
  transform: translateY(48px);
}

.bo-vignette {
  position: relative;
  border: 1px solid var(--bordure);
  clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 25px, 100% 100%, 0 100%);
  background: var(--surface);
}

.bo-vignette img {
  width: 100%;
  filter: saturate(.88) contrast(1.04) brightness(.94);
  mix-blend-mode: luminosity;
  opacity: .92;
}

.bo-vignette::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(27, 17, 25, .12) 0%, rgba(27, 17, 25, .55) 100%),
              rgba(44, 29, 41, .12);
  pointer-events: none;
}

.bo-vignette__courbes {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  opacity: .55;
  pointer-events: none;
}
.bo-vignette__courbes path { fill: none; stroke: var(--accent); stroke-width: 1; }

.bo-vignette--decalee { margin: 0 0 0 8px; }

/* Cartouche de reassurance chiffree du hero */
.bo-cartouche {
  margin-top: 2.4rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 1.15rem 1.35rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 19px, 100% 100%, 0 100%);
}

.bo-cartouche b {
  display: block;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--peche);
  line-height: 1.1;
}

.bo-cartouche span {
  font-family: var(--cachet);
  font-size: .8rem;
  color: var(--texte-doux);
  line-height: 1.45;
  display: block;
  margin-top: .25rem;
}

/* --------------------------------------------------------------------------
   9. Pastilles de statut de convocation
   -------------------------------------------------------------------------- */
.bo-pastille {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--cachet);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .18rem .6rem;
  border-radius: 2px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 6px, 100% 100%, 0 100%);
  background: var(--bordure);
  color: var(--texte);
}

.bo-pastille--acquis { background: var(--peche); color: var(--accent-texte); }
.bo-pastille--traiter { background: var(--accent); color: var(--accent-texte); }
.bo-pastille--attente { background: transparent; color: var(--texte-doux); box-shadow: inset 0 0 0 1px var(--bordure); }

/* --------------------------------------------------------------------------
   10. Section probleme: trois fiches en escalier descendant
   -------------------------------------------------------------------------- */
.bo-escalier {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
  margin-top: 3rem;
}

.bo-escalier > *:nth-child(2) { margin-top: 32px; }
.bo-escalier > *:nth-child(3) { margin-top: 64px; }

.bo-fiche {
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 1.6rem 1.5rem 1.7rem;
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--biseau-x)) 0, 100% var(--biseau-y), 100% 100%, 0 100%);
  transition: border-color var(--transition), transform var(--transition);
}

.bo-fiche:hover { border-color: var(--accent); transform: translateY(-3px); }

.bo-fiche h3 { margin-bottom: .5rem; }

.bo-fiche p { color: var(--texte-doux); margin-bottom: .8rem; }

.bo-fiche__cout {
  font-family: var(--cachet);
  font-size: .84rem;
  color: var(--peche);
  border-top: 1px solid var(--bordure);
  padding-top: .8rem;
  display: block;
}

/* Encadre de rappel juridique */
.bo-minute {
  margin-top: 3.4rem;
  border-left: 3px solid var(--accent);
  background: rgba(44, 29, 41, .62);
  padding: 1.3rem 1.5rem;
  max-width: 74ch;
}

.bo-minute p { color: var(--texte-doux); margin: 0; }
.bo-minute p + p { margin-top: .7rem; }

/* --------------------------------------------------------------------------
   11. Section solution: quatre etapes sur une diagonale douce
   -------------------------------------------------------------------------- */
.bo-parcours {
  position: relative;
  margin-top: 3.4rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
}

.bo-parcours::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 46px;
  height: 1px;
  background: linear-gradient(90deg, var(--bordure), var(--accent), var(--bordure));
  transform: rotate(2.2deg);
  transform-origin: left center;
  opacity: .55;
}

.bo-etape {
  position: relative;
  z-index: 1;
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
  padding: 1.4rem 1.3rem 1.5rem;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 15px, 100% 100%, 0 100%);
}

.bo-parcours .bo-etape:nth-child(1) { transform: translateY(0); }
.bo-parcours .bo-etape:nth-child(2) { transform: translateY(26px); }
.bo-parcours .bo-etape:nth-child(3) { transform: translateY(52px); }
.bo-parcours .bo-etape:nth-child(4) { transform: translateY(78px); }

.bo-etape__rang {
  font-family: var(--cachet);
  font-size: 1.5rem;
  color: var(--accent);
  display: block;
  line-height: 1;
  margin-bottom: .7rem;
}

.bo-etape h3 { font-size: 1.12rem; margin-bottom: .45rem; }
.bo-etape p { color: var(--texte-doux); font-size: .98rem; margin: 0; }

.bo-parcours--fin { margin-bottom: 92px; }

/* --------------------------------------------------------------------------
   12. Fonctionnalites: trois colonnes, decalage vertical alterne
   -------------------------------------------------------------------------- */
.bo-dossier {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
  margin-top: 3rem;
}

.bo-dossier > *:nth-child(even) { transform: translateY(24px); }

.bo-piece {
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 1.5rem 1.4rem 1.6rem;
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--biseau-x)) 0, 100% var(--biseau-y), 100% 100%, 0 100%);
  transition: border-color var(--transition);
}

.bo-piece:hover { border-color: var(--accent); }

.bo-piece__marque {
  width: 38px;
  height: 38px;
  margin-bottom: 1rem;
  display: block;
}
.bo-piece__marque path,
.bo-piece__marque circle,
.bo-piece__marque rect,
.bo-piece__marque polygon { stroke: var(--accent); fill: none; stroke-width: 1.4; }
.bo-piece__marque .bo-plein { fill: var(--peche); stroke: none; }

.bo-piece h3 { font-size: 1.16rem; }
.bo-piece p { color: var(--texte-doux); font-size: 1rem; margin: 0; }

/* --------------------------------------------------------------------------
   13. Avantages: modules inclines en deux colonnes
   -------------------------------------------------------------------------- */
.bo-gains {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 2.2rem;
  margin-top: 2.8rem;
}

.bo-gain {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
  padding: 1.1rem 1.2rem;
  background: rgba(44, 29, 41, .5);
  border: 1px solid var(--bordure);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 14px, 100% 100%, 0 100%);
}

.bo-gain__chiffre {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 2.05rem;
  color: var(--peche);
  line-height: 1;
  padding-top: .1rem;
  white-space: nowrap;
}

.bo-gain h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.bo-gain p { color: var(--texte-doux); font-size: .98rem; margin: 0; }

.bo-illustration {
  margin-top: 3.6rem;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 2.4rem;
  align-items: center;
}

.bo-illustration .bo-vignette { transform: translateY(-16px); }

/* --------------------------------------------------------------------------
   14. Bandeau de chiffres cles
   -------------------------------------------------------------------------- */
.bo-releve {
  position: relative;
  background: var(--fond-alt);
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  padding: 3.2rem 0;
  overflow: hidden;
}

.bo-releve__rang {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.6rem;
}

.bo-releve__poste { border-left: 1px solid var(--bordure); padding-left: 1.2rem; }

.bo-releve__poste b {
  display: block;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.03em;
}

.bo-releve__poste span {
  display: block;
  margin-top: .5rem;
  font-family: var(--cachet);
  font-size: .84rem;
  color: var(--texte-doux);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   15. Preuve sociale
   -------------------------------------------------------------------------- */
.bo-paroles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
  margin-top: 3rem;
}

.bo-parole {
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 1.7rem 1.5rem 1.5rem;
  margin: 0;
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--biseau-x)) 0, 100% var(--biseau-y), 100% 100%, 0 100%);
}

.bo-parole blockquote {
  margin: 0 0 1.2rem;
  font-family: var(--cachet);
  font-size: 1.03rem;
  line-height: 1.62;
  color: var(--texte);
}

.bo-parole figcaption {
  border-top: 1px solid var(--bordure);
  padding-top: .9rem;
  font-size: .93rem;
  color: var(--texte-doux);
}

.bo-parole figcaption b {
  display: block;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1rem;
  color: var(--texte);
  letter-spacing: -0.01em;
}

.bo-verse {
  margin-top: 2.6rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
}

.bo-verse__ligne {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--cachet);
  font-size: .88rem;
  color: var(--texte-doux);
  border: 1px dashed var(--bordure);
  padding: .8rem 1rem;
}

/* --------------------------------------------------------------------------
   16. Tarifs, alignement horizontal strict
   -------------------------------------------------------------------------- */
.bo-formules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
  margin-top: 3rem;
  align-items: stretch;
}

.bo-formule {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 1.8rem 1.6rem 1.9rem;
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--biseau-x)) 0, 100% var(--biseau-y), 100% 100%, 0 100%);
}

.bo-formule--phare {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(228, 88, 177, .09), rgba(44, 29, 41, .95) 42%);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
}

.bo-formule__marque {
  position: absolute;
  top: 0; left: 0;
  font-family: var(--cachet);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--accent-texte);
  padding: .22rem .7rem;
}

.bo-formule--phare { padding-top: 2.8rem; }

.bo-formule h3 { font-size: 1.5rem; margin-bottom: .35rem; }

.bo-formule__prix {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--texte);
  letter-spacing: -0.03em;
  margin: .7rem 0 .2rem;
}
.bo-formule__prix i { font-style: normal; font-size: 1.1rem; font-weight: 600; color: var(--texte-doux); }

.bo-formule__unite {
  font-family: var(--cachet);
  font-size: .82rem;
  color: var(--peche);
  display: block;
  margin-bottom: 1rem;
}

.bo-formule__cible {
  font-size: .96rem;
  color: var(--texte-doux);
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  padding: .9rem 0;
  margin-bottom: 1.1rem;
}

.bo-formule ul {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  gap: .65rem;
}

.bo-formule li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .97rem;
  color: var(--texte-doux);
  line-height: 1.55;
}

.bo-formule li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 9px;
  height: 9px;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.bo-formule--phare li::before { background: var(--peche); }

.bo-formule .bo-bouton { margin-top: auto; }

.bo-note-tarif {
  margin-top: 2.2rem;
  font-size: .96rem;
  color: var(--texte-doux);
  max-width: 76ch;
}

/* --------------------------------------------------------------------------
   17. Foire aux questions
   -------------------------------------------------------------------------- */
.bo-questions { margin-top: 2.6rem; display: grid; gap: .8rem; }

.bo-question {
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 0;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 15px, 100% 100%, 0 100%);
}

.bo-question[open] { border-color: var(--accent); }

.bo-question summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 3.2rem 1.15rem 1.4rem;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.06rem;
  color: var(--texte);
  position: relative;
}

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

.bo-question summary::after {
  content: "";
  position: absolute;
  right: 1.4rem;
  top: 1.5rem;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform var(--transition);
}

.bo-question[open] summary::after { transform: rotate(-135deg); top: 1.75rem; }

.bo-question__corps {
  padding: 0 1.4rem 1.3rem;
  color: var(--texte-doux);
  font-size: 1rem;
  max-width: 82ch;
}

/* --------------------------------------------------------------------------
   18. Formulaire
   -------------------------------------------------------------------------- */
.bo-ouverture {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: 3rem;
  margin-top: 2.6rem;
  align-items: start;
}

.bo-ouverture__dit p { color: var(--texte-doux); }

.bo-jalons { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .8rem; }
.bo-jalons li {
  position: relative;
  padding-left: 1.7rem;
  font-size: .98rem;
  color: var(--texte-doux);
}
.bo-jalons li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 10px; height: 10px;
  background: var(--peche);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.bo-registre {
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 2rem 1.9rem;
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 23px, 100% 100%, 0 100%);
}

.bo-champ { margin-bottom: 1.15rem; }

.bo-champ label,
.bo-registre > label {
  display: block;
  font-family: var(--cachet);
  font-size: .84rem;
  letter-spacing: .04em;
  color: var(--texte);
  margin-bottom: .4rem;
}

.bo-champ input[type="text"],
.bo-champ input[type="email"],
.bo-champ select,
.bo-champ textarea {
  width: 100%;
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: .75rem .85rem;
  transition: border-color var(--transition);
}

.bo-champ input:focus,
.bo-champ select:focus,
.bo-champ textarea:focus { border-color: var(--accent); outline: none; }

.bo-champ input:focus-visible,
.bo-champ select:focus-visible,
.bo-champ textarea:focus-visible { outline: 2px solid var(--peche); outline-offset: 2px; }

.bo-champ textarea { resize: vertical; min-height: 130px; }

.bo-champ--aide { font-size: .86rem; color: var(--texte-doux); margin-top: .35rem; display: block; }

.bo-consentement {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
  font-family: var(--courant);
  font-size: .93rem;
  color: var(--texte-doux);
  line-height: 1.55;
  margin-bottom: 1.4rem;
}

.bo-consentement input { margin-top: .3rem; accent-color: var(--accent); width: 18px; height: 18px; }

.bo-apres {
  margin-top: 1.2rem;
  font-family: var(--cachet);
  font-size: .86rem;
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   19. Pied de page
   -------------------------------------------------------------------------- */
.bo-pied {
  background: var(--fond-alt);
  border-top: 1px solid var(--bordure);
  padding: 4rem 0 1.8rem;
  position: relative;
  overflow: hidden;
}

.bo-pied__rang {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 2.4rem;
}

.bo-pied h2 {
  font-size: .84rem;
  font-family: var(--cachet);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--peche);
  margin-bottom: 1rem;
}

.bo-pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.bo-pied a { color: var(--texte-doux); text-decoration: none; font-size: .96rem; }
.bo-pied a:hover { color: var(--accent); text-decoration: underline; }
.bo-pied p { color: var(--texte-doux); font-size: .95rem; }

.bo-pied__signature { max-width: 34ch; }

.bo-reseaux { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.bo-reseaux a {
  font-family: var(--cachet);
  font-size: .8rem;
  border: 1px solid var(--bordure);
  padding: .28rem .6rem;
  color: var(--texte-doux);
}
.bo-reseaux a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

.bo-barre {
  position: relative;
  z-index: 1;
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--bordure);
  font-size: .88rem;
  color: var(--texte-doux);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   20. Pages internes
   -------------------------------------------------------------------------- */
.bo-tete-interne {
  padding: 140px 0 3rem;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--bordure);
}

.bo-tete-interne h1 { font-size: 2.6rem; }

.bo-fil {
  font-family: var(--cachet);
  font-size: .84rem;
  color: var(--texte-doux);
  margin-bottom: 1rem;
}
.bo-fil a { color: var(--texte-doux); }

.bo-corps { padding: 3.4rem 0 5rem; }

.bo-corps h2 {
  font-size: 1.6rem;
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--bordure);
}
.bo-corps h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.bo-corps h3 { font-size: 1.16rem; margin-top: 1.8rem; }
.bo-corps p, .bo-corps li { color: var(--texte-doux); }
.bo-corps ul, .bo-corps ol { padding-left: 1.2rem; display: grid; gap: .45rem; margin-bottom: 1.2rem; }
.bo-corps dl { margin: 0 0 1.4rem; }
.bo-corps dt { font-family: var(--cachet); color: var(--texte); margin-top: .9rem; }
.bo-corps dd { margin: .2rem 0 0; color: var(--texte-doux); }

.bo-portrait {
  float: right;
  width: 232px;
  margin: 0 0 1.4rem 1.8rem;
  border: 1px solid var(--bordure);
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 17px, 100% 100%, 0 100%);
}

.bo-carte-plan {
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 1.3rem 1.4rem;
  margin-bottom: 1rem;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 15px, 100% 100%, 0 100%);
}
.bo-carte-plan h3 { margin-bottom: .3rem; font-size: 1.1rem; }
.bo-carte-plan h3 a { color: var(--texte); text-decoration: none; }
.bo-carte-plan h3 a:hover { color: var(--accent); }
.bo-carte-plan p { margin: 0; font-size: .96rem; }

.bo-centre {
  min-height: 62vh;
  display: flex;
  align-items: center;
  padding: 140px 0 5rem;
  position: relative;
  overflow: hidden;
}

.bo-centre h1 { font-size: 2.9rem; }
.bo-centre .bo-chapeau { margin-bottom: 1.6rem; }

.bo-code-404 {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 5.2rem;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.04em;
  display: block;
  margin-bottom: .6rem;
}

/* --------------------------------------------------------------------------
   21. Animations au defilement
   -------------------------------------------------------------------------- */
.bo-monte {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(.22, .61, .36, 1);
}
.bo-monte.est-vue { opacity: 1; transform: translateY(0); }

.bo-parcours .bo-etape.bo-monte.est-vue:nth-child(1) { transform: translateY(0); }
.bo-parcours .bo-etape.bo-monte.est-vue:nth-child(2) { transform: translateY(26px); }
.bo-parcours .bo-etape.bo-monte.est-vue:nth-child(3) { transform: translateY(52px); }
.bo-parcours .bo-etape.bo-monte.est-vue:nth-child(4) { transform: translateY(78px); }
.bo-parcours .bo-etape.bo-monte { transform: translateY(100px); }

.bo-dossier > .bo-monte.est-vue:nth-child(even) { transform: translateY(24px); }

/* --------------------------------------------------------------------------
   22. Adaptations
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .bo-releve__rang { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.4rem; }
  .bo-pied__rang { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bo-parcours { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
  .bo-parcours::before { display: none; }
  .bo-parcours .bo-etape:nth-child(1),
  .bo-parcours .bo-etape:nth-child(2) { transform: translateY(0); }
  .bo-parcours .bo-etape:nth-child(3),
  .bo-parcours .bo-etape:nth-child(4) { transform: translateY(20px); }
  .bo-parcours--fin { margin-bottom: 30px; }
  .bo-parcours .bo-etape.bo-monte.est-vue:nth-child(1),
  .bo-parcours .bo-etape.bo-monte.est-vue:nth-child(2) { transform: translateY(0); }
  .bo-parcours .bo-etape.bo-monte.est-vue:nth-child(3),
  .bo-parcours .bo-etape.bo-monte.est-vue:nth-child(4) { transform: translateY(20px); }
}

@media (max-width: 900px) {
  .bo-nav { display: none; }
  .bo-entete .bo-bouton { display: none; }
  .bo-bascule { display: block; }
  .bo-plan__rang { grid-template-columns: 1fr; gap: 2.4rem; }
  .bo-plan__vu { transform: none; }
  .bo-illustration { grid-template-columns: 1fr; }
  .bo-illustration .bo-vignette { transform: none; }
  .bo-escalier,
  .bo-dossier,
  .bo-paroles,
  .bo-formules,
  .bo-gains { grid-template-columns: 1fr; }
  .bo-escalier > *:nth-child(2),
  .bo-escalier > *:nth-child(3) { margin-top: 0; }
  .bo-dossier > *:nth-child(even),
  .bo-dossier > .bo-monte.est-vue:nth-child(even) { transform: none; }
  .bo-ouverture { grid-template-columns: 1fr; gap: 2rem; }
  .bo-portrait { float: none; width: 100%; max-width: 300px; margin: 0 0 1.6rem; }
}

@media (max-width: 640px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.6rem; }
  .bo-section { padding: 4.4rem 0; }
  .bo-plan { padding-top: 118px; }
  .bo-cartouche { grid-template-columns: 1fr; gap: .9rem; }
  .bo-releve__rang { grid-template-columns: 1fr; }
  .bo-pied__rang { grid-template-columns: 1fr; gap: 2rem; }
  .bo-registre { padding: 1.4rem 1.2rem; }
  .bo-centre h1 { font-size: 2.1rem; }
  .bo-code-404 { font-size: 4rem; }
  .bo-tete-interne h1 { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .bo-monte { opacity: 1; transform: none; }
  .bo-frappe .bo-signe { visibility: visible; }
  .bo-frappe.est-active::after { display: none; }
}

@media print {
  .bo-entete, .bo-panneau, .bo-courbes, .bo-trame::before { display: none; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   23. Le Registre du Contradictoire, magazine du site
   Section ajoutee pour la partie editoriale: sommaire du magazine, cartes
   d article, page d article et rappel du magazine sur la page d accueil.
   Meme palette, meme biseau isometrique a trente degres, memes courbes de
   niveau et meme effet machine a ecrire que le reste du site. Aucune regle
   anterieure n est modifiee. Le corps redactionnel ne porte aucune classe:
   les balises nues sont mises en forme comme descendantes de .bo-texte.
   -------------------------------------------------------------------------- */

/* 23.1 Reperes communs au magazine ---------------------------------------- */
.bo-frappe--breve {
  font-size: 1.06rem;
  min-height: 1.7em;
  margin-bottom: 1.1rem;
}

.bo-pied__titre {
  font-size: .84rem;
  font-family: var(--cachet);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--peche);
  margin: 0 0 1rem;
}

.bo-magazine__compte {
  font-family: var(--cachet);
  font-size: .84rem;
  color: var(--peche);
  margin-top: 1.2rem;
}

/* 23.2 Grille de cartes d article ------------------------------------------ */
.bo-parutions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
  margin-top: 2.8rem;
  align-items: stretch;
}

.bo-parutions > *:nth-child(3n + 2) { transform: translateY(24px); }
.bo-parutions > *:nth-child(3n) { transform: translateY(48px); }

.bo-parution {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordure);
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--biseau-x)) 0, 100% var(--biseau-y), 100% 100%, 0 100%);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.bo-parution:hover,
.bo-parution:focus-within { border-color: var(--accent); box-shadow: 0 16px 40px rgba(0, 0, 0, .34); }

.bo-parution__vue {
  margin: 0;
  position: relative;
  border-bottom: 1px solid var(--bordure);
  overflow: hidden;
}

.bo-parution__vue img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(.88) contrast(1.04) brightness(.9);
  mix-blend-mode: luminosity;
  opacity: .92;
  transition: opacity var(--transition), transform var(--transition);
}

.bo-parution:hover .bo-parution__vue img { opacity: 1; transform: scale(1.02); }

.bo-parution__vue::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(27, 17, 25, .10) 0%, rgba(27, 17, 25, .62) 100%),
    repeating-radial-gradient(ellipse 620px 190px at 78% 122%,
      transparent 0 22px, rgba(228, 88, 177, .16) 22px 23px);
}

.bo-parution__texte {
  padding: 1.3rem 1.35rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.bo-parution__angle {
  font-family: var(--cachet);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
  display: block;
  margin-bottom: .6rem;
}

.bo-parution__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.14rem;
  line-height: 1.28;
  letter-spacing: -0.02em;
  margin: 0 0 .6rem;
}

.bo-parution__titre a { color: var(--texte); text-decoration: none; }
.bo-parution__titre a:hover { color: var(--accent); }

.bo-parution__extrait {
  color: var(--texte-doux);
  font-size: .96rem;
  margin: 0 0 1.1rem;
}

.bo-parution__pied {
  margin: auto 0 0;
  padding-top: .85rem;
  border-top: 1px solid var(--bordure);
  font-family: var(--cachet);
  font-size: .8rem;
  color: var(--texte-doux);
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  align-items: center;
}

.bo-parution__duree { color: var(--peche); }

/* 23.3 Rappel du magazine sur la page d accueil ---------------------------- */
.bo-derniers__lien {
  margin-top: 4.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.4rem;
}

.bo-derniers__note {
  font-family: var(--cachet);
  font-size: .84rem;
  color: var(--texte-doux);
}

/* 23.4 Liste des parutions sur la page auteur et le plan du site ----------- */
.bo-parutions-liste {
  list-style: none;
  margin: 1.4rem 0 1.6rem;
  padding: 0;
  display: grid;
  gap: .6rem;
}

.bo-parutions-liste li {
  display: grid;
  grid-template-columns: 11.5rem minmax(0, 1fr);
  gap: .3rem 1rem;
  align-items: baseline;
  border-bottom: 1px dashed var(--bordure);
  padding-bottom: .6rem;
  color: var(--texte-doux);
}

.bo-parutions-liste time {
  font-family: var(--cachet);
  font-size: .84rem;
  color: var(--peche);
}

.bo-parutions-liste a { color: var(--texte); text-decoration: none; }
.bo-parutions-liste a:hover { color: var(--accent); text-decoration: underline; }

/* 23.5 Entete d article ---------------------------------------------------- */
.bo-article__marque {
  margin: 1.4rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--bordure);
  font-family: var(--cachet);
  font-size: .84rem;
  color: var(--texte-doux);
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.5rem;
}

.bo-article__valeur { color: var(--peche); }
.bo-article__duree { color: var(--peche); }
.bo-article__marque a { color: var(--texte-doux); }
.bo-article__marque a:hover { color: var(--accent); }

.bo-lecture { padding: 3.2rem 0 5rem; }

/* 23.6 Exergue du chapeau -------------------------------------------------- */
.bo-exergue {
  position: relative;
  margin: 0 0 2.2rem;
  padding: 1.2rem 1.4rem 1.2rem 1.5rem;
  background: rgba(44, 29, 41, .62);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--accent);
  clip-path: polygon(0 0, calc(100% - var(--biseau-x)) 0, 100% var(--biseau-y), 100% 100%, 0 100%);
  font-size: 1.14rem;
  line-height: 1.62;
  color: var(--texte);
  max-width: 74ch;
}

/* 23.7 Image a la une de l article ----------------------------------------- */
.bo-cliche {
  margin: 0 0 2.6rem 8px;
  position: relative;
  border: 1px solid var(--bordure);
  background: var(--surface);
  clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 25px, 100% 100%, 0 100%);
}

.bo-cliche img {
  width: 100%;
  filter: saturate(.88) contrast(1.04) brightness(.94);
  mix-blend-mode: luminosity;
  opacity: .93;
}

.bo-cliche::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(27, 17, 25, .10) 0%, rgba(27, 17, 25, .52) 100%),
    repeating-radial-gradient(ellipse 900px 240px at 74% 116%,
      transparent 0 30px, rgba(228, 88, 177, .14) 30px 31px);
}

/* 23.8 Corps redactionnel: balises nues, aucune classe --------------------- */
.bo-texte {
  max-width: 68ch;
  font-size: 1.05rem;
  line-height: 1.75;
}

.bo-texte p { color: var(--texte-doux); margin: 0 0 1.15em; }
.bo-texte p:last-child { margin-bottom: 0; }
.bo-texte strong { color: var(--texte); font-weight: 600; }
.bo-texte em { color: var(--texte); font-style: italic; }

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

.bo-texte h2 {
  position: relative;
  font-size: 1.78rem;
  margin: 2.9rem 0 .9rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bordure);
}

.bo-texte h2::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 68px;
  height: 2px;
  background: var(--accent);
}

.bo-texte h2:first-child { margin-top: 0; }

.bo-texte h3 {
  position: relative;
  font-size: 1.2rem;
  margin: 1.9rem 0 .55rem;
  padding-left: 1.25rem;
}

.bo-texte h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: .48em;
  width: 10px;
  height: 10px;
  background: var(--peche);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.bo-texte ul,
.bo-texte ol {
  list-style: none;
  margin: 0 0 1.35em;
  padding: 0;
  display: grid;
  gap: .55rem;
}

.bo-texte li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--texte-doux);
}

.bo-texte ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 9px;
  height: 9px;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.bo-texte ol { counter-reset: bo-rang; }
.bo-texte ol > li { counter-increment: bo-rang; padding-left: 2.1rem; }

.bo-texte ol > li::before {
  content: counter(bo-rang);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--cachet);
  font-size: .92rem;
  color: var(--peche);
}

.bo-texte li ul,
.bo-texte li ol { margin: .55rem 0 0; }

.bo-texte table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8rem 0 2rem;
  font-size: .95rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
}

.bo-texte thead th {
  background: rgba(228, 88, 177, .14);
  color: var(--texte);
  font-family: var(--cachet);
  font-weight: 400;
  letter-spacing: .05em;
}

.bo-texte th,
.bo-texte td {
  border: 1px solid var(--bordure);
  padding: .68rem .85rem;
  text-align: left;
  vertical-align: top;
  color: var(--texte-doux);
  line-height: 1.55;
}

.bo-texte tbody th {
  font-family: var(--cachet);
  font-weight: 400;
  color: var(--texte);
}

.bo-texte tbody tr:nth-child(even) { background: rgba(27, 17, 25, .42); }

.bo-texte aside {
  margin: 2rem 0;
  padding: 1.25rem 1.4rem;
  background: rgba(44, 29, 41, .74);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--peche);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 15px, 100% 100%, 0 100%);
}

.bo-texte aside p { color: var(--texte-doux); }
.bo-texte aside p:first-child strong { color: var(--peche); }

.bo-texte blockquote {
  margin: 2rem 0;
  padding: .2rem 0 .2rem 1.5rem;
  border-left: 3px solid var(--accent);
  font-family: var(--cachet);
  font-size: 1.05rem;
  line-height: 1.66;
  color: var(--texte);
}

.bo-texte blockquote p { color: var(--texte); }

.bo-texte figure { margin: 2rem 0; }
.bo-texte figure img { border: 1px solid var(--bordure); }

.bo-texte figcaption {
  margin-top: .55rem;
  font-family: var(--cachet);
  font-size: .82rem;
  color: var(--texte-doux);
}

/* 23.9 Appel a l action de fin d article ----------------------------------- */
.bo-appel {
  margin: 3rem 0 0;
  padding: 1.7rem 1.7rem 1.8rem;
  background: linear-gradient(180deg, rgba(228, 88, 177, .10), rgba(44, 29, 41, .95) 46%);
  border: 1px solid var(--accent);
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 23px, 100% 100%, 0 100%);
}

.bo-appel__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.28rem;
  letter-spacing: -0.02em;
  color: var(--texte);
  margin: 0 0 .6rem;
}

.bo-appel p { color: var(--texte-doux); }
.bo-appel .bo-bouton { margin-top: .6rem; }

/* 23.10 Encart auteur ------------------------------------------------------ */
.bo-encart-auteur {
  margin-top: 2.8rem;
  padding: 1.5rem 1.5rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 19px, 100% 100%, 0 100%);
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
}

.bo-encart-auteur img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 1px solid var(--bordure);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 10px, 100% 100%, 0 100%);
}

.bo-encart-auteur__role {
  display: block;
  font-family: var(--cachet);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
  margin-bottom: .35rem;
}

.bo-encart-auteur__nom {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.14rem;
  letter-spacing: -0.02em;
  color: var(--texte);
  margin: 0 0 .5rem;
}

.bo-encart-auteur p { color: var(--texte-doux); font-size: .97rem; }

/* 23.11 Bloc A lire aussi -------------------------------------------------- */
.bo-suites {
  margin-top: 3.2rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--bordure);
}

.bo-suites__titre {
  font-family: var(--cachet);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--peche);
  margin: 0 0 1.4rem;
}

.bo-suites__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.3rem;
}

.bo-suite {
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 15px, 100% 100%, 0 100%);
  transition: border-color var(--transition);
  display: flex;
  flex-direction: column;
}

.bo-suite:hover,
.bo-suite:focus-within { border-color: var(--accent); }

.bo-suite__vue { margin: 0; border-bottom: 1px solid var(--bordure); overflow: hidden; }

.bo-suite__vue img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(.86) contrast(1.04) brightness(.88);
  mix-blend-mode: luminosity;
  opacity: .9;
}

.bo-suite__texte { padding: 1rem 1.1rem 1.1rem; }

.bo-suite__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 0 0 .45rem;
}

.bo-suite__titre a { color: var(--texte); text-decoration: none; }
.bo-suite__titre a:hover { color: var(--accent); }

.bo-suite__accroche {
  margin: 0;
  font-size: .9rem;
  color: var(--texte-doux);
  line-height: 1.55;
}

/* 23.12 Adaptations du magazine -------------------------------------------- */
@media (max-width: 1080px) {
  .bo-parutions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bo-parutions > *:nth-child(3n + 2),
  .bo-parutions > *:nth-child(3n) { transform: none; }
  .bo-parutions > *:nth-child(even) { transform: translateY(24px); }
  .bo-suites__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .bo-parutions,
  .bo-suites__grille { grid-template-columns: 1fr; }
  .bo-parutions > *:nth-child(even),
  .bo-parutions > *:nth-child(3n + 2),
  .bo-parutions > *:nth-child(3n) { transform: none; }
  .bo-cliche { margin-left: 0; }
  .bo-encart-auteur { grid-template-columns: 1fr; gap: 1rem; }
  .bo-parutions-liste li { grid-template-columns: 1fr; gap: .2rem; }
}

@media (max-width: 640px) {
  .bo-texte h2 { font-size: 1.5rem; }
  .bo-texte table { display: block; overflow-x: auto; }
  .bo-lecture { padding: 2.4rem 0 3.6rem; }
  .bo-exergue { font-size: 1.06rem; padding: 1rem 1.1rem; }
}