@import url('./tokens.css');

/**
 * Police Inter auto-hébergée (pas de lien CDN Google — cohérent avec les
 * choix vie privée du site). Seule la graisse 400 est utilisée par les
 * tokens typography.display/headline.
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/**
 * Reset minimal — pas de framework CSS (Architecture Stack).
 * Les valeurs viennent exclusivement des custom properties de tokens.css.
 */

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

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  font-family: var(--typography-body-font-family);
  font-size: var(--typography-body-font-size);
  font-weight: var(--typography-body-font-weight);
  line-height: var(--typography-body-line-height);
  color: var(--color-on-surface);
  background-color: var(--color-surface);
}

img,
picture {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

a {
  color: var(--color-link);
}

a:visited {
  color: var(--color-link-visited);
}

/**
 * Story 1.2 — page d'accueil : identité et positionnement.
 * Mise en page sobre, un seul point d'entrée (pas de framework CSS).
 */

.site-header-sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--color-surface);
}

.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing-gutter) * 0.5);
  padding: var(--spacing-margin-mobile) var(--spacing-margin-mobile) calc(var(--spacing-margin-mobile) * 0.5);
}

.site-header__logo {
  height: 128px;
  width: auto;
}

/**
 * Story 1.3 — navigation vers les rubriques : liste plate à un seul niveau,
 * espacement généreux, wayfinding sur la rubrique courante (FR-2).
 */

.nav__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-gutter);
  list-style: none;
  padding: 0;
}

.nav__lien {
  display: inline-block;
  padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit);
  font-family: var(--typography-label-font-family);
  font-size: var(--typography-body-sm-font-size);
  font-weight: var(--typography-label-font-weight);
  color: var(--color-on-surface);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.nav__lien:visited {
  color: var(--color-on-surface);
}

.nav__lien:hover,
.nav__lien:focus-visible {
  color: var(--color-link);
  border-bottom-color: var(--color-outline);
}

.nav__lien:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.nav__lien.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
}

.nav__lien.is-active:hover,
.nav__lien.is-active:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
}

.nav__icone-externe {
  display: inline-block;
  margin-left: calc(var(--spacing-unit) * 0.25);
  color: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/**
 * Story 1.5 — bandeau d'actualité (FR-16) : bande fine sous le header, absente
 * du HTML quand `bandeau.actif` est falsy (partial conditionnel, pas de CSS
 * `display:none` à masquer). Apparition en fondu doux au chargement plutôt
 * qu'un affichage brutal.
 */

.bandeau {
  border-top: 3px solid var(--color-accent);
  border-bottom: 3px solid var(--color-accent);
  background-color: var(--color-surface-muted);
  padding: var(--spacing-unit) var(--spacing-margin-mobile);
  text-align: center;
  animation: bandeau-apparition 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .bandeau {
    animation: none;
  }
}

@keyframes bandeau-apparition {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.bandeau__texte {
  font-size: var(--typography-body-sm-font-size);
  color: var(--color-primary-light);
}

.bandeau__lien {
  color: var(--color-accent);
  font-weight: 500;
  margin-left: calc(var(--spacing-unit) * 0.5);
  text-decoration: none;
}

.bandeau__lien:visited {
  color: var(--color-accent);
}

.bandeau__lien:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-gutter);
  padding: var(--spacing-margin-mobile);
  text-align: center;
}

/**
 * Story 1.4 — carte de vœux et historique : la carte rejoint la photo dans
 * le hero (parité visuelle), empilées en dessous de 768px (Design Notes).
 */

.hero__medias {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-gutter);
}

@media (min-width: 768px) {
  .hero__medias {
    flex-direction: row;
    justify-content: center;
  }
}

.hero__photo-lien {
  display: block;
  line-height: 0;
  border-radius: var(--rounded-full);
  transition: opacity 0.2s ease;
}

.hero__photo-lien:hover {
  opacity: 0.85;
}

.hero__photo-lien:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.hero__photo {
  width: 200px;
  height: 200px;
  object-fit: cover;
  object-position: center 25%;
  border-radius: var(--rounded-full);
}

.hero__carte-lien {
  display: block;
  line-height: 0;
  border-radius: var(--rounded-md);
}

.hero__carte-lien:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.hero__carte {
  display: block;
  height: 200px;
  aspect-ratio: 756 / 541;
  width: auto;
  object-fit: cover;
  border-radius: var(--rounded-md);
  transition: opacity 0.2s ease;
}

.hero__carte-lien:hover .hero__carte {
  opacity: 0.85;
}

.hero__identite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing-unit) * 1.5);
}

.hero__nom {
  font-family: var(--typography-display-font-family);
  font-size: var(--typography-display-font-size);
  font-weight: var(--typography-display-font-weight);
  line-height: var(--typography-display-line-height);
}

.hero__tagline {
  font-size: var(--typography-headline-font-size);
  color: var(--color-on-surface-muted);
}

.hero__mots-cles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-unit);
  list-style: none;
  padding: 0;
}

.hero__mot-cle {
  background-color: var(--color-surface-muted);
  border-radius: var(--rounded-default);
  padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit);
  font-family: var(--typography-label-font-family);
  font-size: var(--typography-label-font-size);
  font-weight: var(--typography-label-font-weight);
  letter-spacing: var(--typography-label-letter-spacing);
  color: var(--color-on-surface-muted);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-gutter);
  padding: var(--spacing-margin-mobile);
  font-size: var(--typography-body-sm-font-size);
}

.contact a:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

/**
 * Story 3.2 — teaser livre sur l'accueil, entre le hero et le contact :
 * fond surface-muted (comme .publication) pour se distinguer du reste de
 * la page ("mise en avant"), couverture + titre + les 2 mêmes CTA que
 * /livre/. "Découvrir le Livre" reprend les tokens de .livre__cta-bouton
 * mais en variante contour (secondaire) pour rester distinct du bouton
 * Amazon plein (primaire) une fois lien_amazon renseigné.
 */

.livre-accueil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-gutter);
  max-width: 720px;
  margin: 0 auto;
  padding: var(--spacing-gutter);
  background-color: var(--color-surface-muted);
  border-radius: var(--rounded-md);
  text-align: center;
}

@media (min-width: 768px) {
  .livre-accueil {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }
}

.livre-accueil__couverture-lien {
  display: block;
  line-height: 0;
  flex-shrink: 0;
  border-radius: var(--rounded-md);
  transition: opacity 0.2s ease;
}

.livre-accueil__couverture-lien:hover {
  opacity: 0.85;
}

.livre-accueil__couverture-lien:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.livre-accueil__couverture {
  width: 140px;
  height: auto;
  border-radius: var(--rounded-md);
}

.livre-accueil__contenu {
  min-width: 0;
}

@media (min-width: 768px) {
  .livre-accueil__contenu {
    flex: 1;
  }
}

.livre-accueil__titre {
  font-family: var(--typography-headline-font-family);
  font-size: var(--typography-headline-font-size);
  font-weight: var(--typography-headline-font-weight);
  line-height: var(--typography-headline-line-height);
  overflow-wrap: anywhere;
}

.livre-accueil__sous-titre {
  margin-top: calc(var(--spacing-unit) * 0.5);
  font-size: var(--typography-body-sm-font-size);
  color: var(--color-on-surface-muted);
}

.livre-accueil__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-unit);
  margin-top: var(--spacing-gutter);
}

@media (min-width: 768px) {
  .livre-accueil__cta {
    justify-content: flex-start;
  }
}

.livre-accueil__cta-decouvrir {
  display: inline-block;
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  font-family: var(--typography-label-font-family);
  font-size: var(--typography-body-sm-font-size);
  font-weight: var(--typography-label-font-weight);
  text-decoration: none;
  border-radius: var(--rounded-full);
  padding: calc(var(--spacing-unit) * 0.75 - 2px) calc(var(--spacing-gutter) - 2px);
}

.livre-accueil__cta-decouvrir:hover,
.livre-accueil__cta-decouvrir:focus-visible {
  background-color: var(--color-surface);
}

.livre-accueil__cta-decouvrir:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

/**
 * Story 1.4 — page d'historique des cartes de vœux : grille par année
 * décroissante, chaque carte légendée par son année (pas de date détaillée).
 */

.historique {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--spacing-margin-mobile);
}

.historique__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-gutter);
  list-style: none;
  padding: 0;
  margin: 0;
}

.historique__carte {
  margin: 0;
}

.historique__image {
  width: 100%;
  height: auto;
  aspect-ratio: 756 / 541;
  object-fit: cover;
  border-radius: var(--rounded-md);
}

.historique__legende {
  margin-top: calc(var(--spacing-unit) * 0.5);
  text-align: center;
  font-size: var(--typography-body-sm-font-size);
  color: var(--color-on-surface-muted);
}

/**
 * Story 1.6 — page de mentions légales : contenu texte sobre, un seul
 * gabarit à instance unique, styles de section réutilisant les tokens
 * existants (pas de nouvelle échelle typographique).
 */

.mentions-legales {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--spacing-margin-mobile);
}

.page-titre {
  font-family: var(--typography-display-font-family);
  font-size: var(--typography-display-font-size);
  font-weight: var(--typography-display-font-weight);
  line-height: var(--typography-display-line-height);
}

.mentions-legales__titre {
  text-align: center;
}

.mentions-legales__date {
  margin-top: calc(var(--spacing-unit) * 0.5);
  text-align: center;
  font-size: var(--typography-body-sm-font-size);
  color: var(--color-on-surface-muted);
}

.mentions-legales__intro {
  margin-top: var(--spacing-section-gap);
}

.mentions-legales__section {
  margin-top: var(--spacing-gutter);
}

.mentions-legales__section-titre {
  font-family: var(--typography-headline-font-family);
  font-size: var(--typography-headline-font-size);
  font-weight: var(--typography-headline-font-weight);
  line-height: var(--typography-headline-line-height);
  margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.mentions-legales__section p + p {
  margin-top: calc(var(--spacing-unit) * 0.5);
}

/**
 * Story 2.1 — liste des publications : carte de contenu par entrée (fond
 * surface, séparation par l'espace plutôt qu'une bordure), titre en
 * typography.headline, ligne meta en body-sm + on-surface-muted.
 */

.publications {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--spacing-margin-mobile);
}

.publications__titre {
  text-align: center;
}

.publications__liste {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gutter);
  list-style: none;
  padding: 0;
  margin-top: var(--spacing-section-gap);
}

.publication {
  background-color: var(--color-surface-muted);
  border-radius: var(--rounded-md);
  padding: var(--spacing-gutter);
}

.publication__titre {
  display: inline-block;
  font-family: var(--typography-headline-font-family);
  font-size: var(--typography-headline-font-size);
  font-weight: var(--typography-headline-font-weight);
  line-height: var(--typography-headline-line-height);
  text-decoration: none;
}

.publication__titre:hover,
.publication__titre:focus-visible {
  text-decoration: underline;
}

.publication__titre:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.publication__titre--inactif {
  color: var(--color-on-surface);
  cursor: default;
}

.publication__titre--inactif:hover,
.publication__titre--inactif:focus-visible {
  text-decoration: none;
}

.publication__mention {
  font-family: var(--typography-body-sm-font-family);
  font-size: var(--typography-body-sm-font-size);
  font-weight: var(--typography-body-sm-font-weight);
  color: var(--color-on-surface-muted);
}

.publication__meta {
  margin-top: calc(var(--spacing-unit) * 0.5);
  font-size: var(--typography-body-sm-font-size);
  color: var(--color-on-surface-muted);
}

.publication__resume {
  margin-top: calc(var(--spacing-unit) * 0.5);
  font-size: var(--typography-body-sm-font-size);
  color: var(--color-on-surface);
}

.publication__mots-cles {
  margin-top: calc(var(--spacing-unit) * 0.25);
  font-size: var(--typography-body-sm-font-size);
  color: var(--color-on-surface-muted);
  font-style: italic;
}

.publication__lien-linkedin {
  display: inline-block;
  margin-top: calc(var(--spacing-unit) * 0.5);
  font-family: var(--typography-body-sm-font-family);
  font-size: var(--typography-body-sm-font-size);
  font-weight: var(--typography-body-sm-font-weight);
  text-decoration: none;
}

.publication__lien-linkedin:hover,
.publication__lien-linkedin:focus-visible {
  text-decoration: underline;
}

.publication__lien-linkedin:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

/**
 * Story 2.3 — page CV : contenu à instance unique (même famille que
 * .mentions-legales), largeur de lecture identique, plus deux boutons de
 * téléchargement PDF (pill, fond primary) et un en-tête photo + coordonnées.
 */

.cv {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--spacing-margin-mobile);
}

.cv__titre {
  text-align: center;
}

.cv__telechargements {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-unit);
  margin-top: var(--spacing-gutter);
}

.cv__bouton {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--typography-label-font-family);
  font-size: var(--typography-body-sm-font-size);
  font-weight: var(--typography-label-font-weight);
  text-decoration: none;
  border-radius: var(--rounded-full);
  padding: calc(var(--spacing-unit) * 0.75) var(--spacing-gutter);
}

.cv__bouton:hover,
.cv__bouton:focus-visible {
  background-color: var(--color-primary-light);
}

.cv__bouton:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.cv__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-gutter);
  margin-top: var(--spacing-section-gap);
}

.cv__photo {
  width: 140px;
  height: 140px;
  object-fit: cover;
  object-position: center 25%;
  border-radius: var(--rounded-full);
  flex-shrink: 0;
}

.cv__identite {
  flex: 1;
  min-width: 240px;
}

.cv__nom {
  font-family: var(--typography-headline-font-family);
  font-size: var(--typography-headline-font-size);
  font-weight: var(--typography-headline-font-weight);
  line-height: var(--typography-headline-line-height);
}

.cv__tagline {
  margin-top: calc(var(--spacing-unit) * 0.5);
  color: var(--color-on-surface-muted);
}

.cv__coordonnees {
  list-style: none;
  padding: 0;
  margin-top: var(--spacing-unit);
  font-size: var(--typography-body-sm-font-size);
}

.cv__coordonnees li + li {
  margin-top: calc(var(--spacing-unit) * 0.25);
}

.cv__section {
  margin-top: var(--spacing-section-gap);
}

.cv__section-titre {
  font-family: var(--typography-headline-font-family);
  font-size: var(--typography-headline-font-size);
  font-weight: var(--typography-headline-font-weight);
  line-height: var(--typography-headline-line-height);
  margin-bottom: var(--spacing-gutter);
}

.cv__section p + p {
  margin-top: calc(var(--spacing-unit) * 0.5);
}

.cv__poste + .cv__poste {
  margin-top: var(--spacing-gutter);
}

.cv__poste-titre {
  font-size: var(--typography-body-font-size);
  font-weight: 700;
}

.cv__poste-titre + p {
  margin-top: calc(var(--spacing-unit) * 0.5);
}

.cv__sous-titre {
  font-family: var(--typography-label-font-family);
  font-size: var(--typography-label-font-size);
  font-weight: var(--typography-label-font-weight);
  letter-spacing: var(--typography-label-letter-spacing);
  text-transform: uppercase;
  color: var(--color-on-surface-muted);
  margin-top: var(--spacing-unit);
}

.cv__liste {
  margin-top: calc(var(--spacing-unit) * 0.5);
  padding-left: var(--spacing-gutter);
}

.cv__liste li + li {
  margin-top: calc(var(--spacing-unit) * 0.25);
}

/**
 * Story 2 de spec-publication-cv.md — trois compléments CSS pour le CV
 * 2026 : repères chiffrés sous la tagline, triptyque "Trois façons de
 * m'appeler" (seul composant structurellement nouveau), liste Domaines
 * (séparateurs en ::before pour garder chaque libellé comme entité de
 * texte distincte pour les moteurs).
 */

.cv__reperes {
  margin-top: calc(var(--spacing-unit) * 0.5);
  color: var(--color-on-surface);
}

.cv__triptyque {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin-top: calc(var(--spacing-unit) * 0.5);
  text-align: left;
}

.cv__triptyque h3 {
  font-family: var(--typography-label-font-family);
  font-size: var(--typography-body-font-size);
  font-weight: 700;
}

.cv__triptyque p + p {
  margin-top: calc(var(--spacing-unit) * 0.5);
}

@media (max-width: 800px) {
  .cv__triptyque {
    grid-template-columns: 1fr;
  }
}

.cv__domaines {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin-top: calc(var(--spacing-unit) * 0.5);
  text-align: left;
}

.cv__domaines li::before {
  content: "·";
  display: inline-block;
  margin: 0 calc(var(--spacing-unit) * 0.5);
  color: var(--color-on-surface-muted);
}

/**
 * Story 2.4 — page Brief & Credentials : contenu à instance unique (même
 * famille que .cv), largeur de lecture identique, bouton de téléchargement
 * PDF (même pattern pill que .cv__bouton), colonnes Expérience/Approche et
 * cartes de références clients (fond surface, cohérent avec .publication).
 */

.presentation {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--spacing-margin-mobile);
}

.presentation__titre {
  text-align: center;
}

.presentation__telechargement {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-gutter);
}

.presentation__bouton {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--typography-label-font-family);
  font-size: var(--typography-body-sm-font-size);
  font-weight: var(--typography-label-font-weight);
  text-decoration: none;
  border-radius: var(--rounded-full);
  padding: calc(var(--spacing-unit) * 0.75) var(--spacing-gutter);
}

.presentation__bouton:hover,
.presentation__bouton:focus-visible {
  background-color: var(--color-primary-light);
}

.presentation__bouton:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.presentation__section {
  margin-top: var(--spacing-section-gap);
}

.presentation__section-titre {
  font-family: var(--typography-headline-font-family);
  font-size: var(--typography-headline-font-size);
  font-weight: var(--typography-headline-font-weight);
  line-height: var(--typography-headline-line-height);
  margin-bottom: var(--spacing-gutter);
}

.presentation__liste {
  padding-left: var(--spacing-gutter);
}

.presentation__liste li + li {
  margin-top: calc(var(--spacing-unit) * 0.25);
}

.presentation__liste--imbriquee {
  margin-top: calc(var(--spacing-unit) * 0.25);
}

.presentation__colonnes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-gutter);
}

.presentation__colonnes .presentation__section {
  flex: 1;
  min-width: 240px;
}

.presentation__categorie {
  background-color: var(--color-surface-muted);
  border-radius: var(--rounded-md);
  padding: var(--spacing-gutter);
}

.presentation__categorie + .presentation__categorie {
  margin-top: var(--spacing-gutter);
}

.presentation__categorie-titre {
  font-family: var(--typography-headline-font-family);
  font-size: var(--typography-headline-font-size);
  font-weight: var(--typography-headline-font-weight);
  line-height: var(--typography-headline-line-height);
}

.presentation__sous-categorie-titre {
  font-family: var(--typography-label-font-family);
  font-size: var(--typography-label-font-size);
  font-weight: var(--typography-label-font-weight);
  letter-spacing: var(--typography-label-letter-spacing);
  text-transform: uppercase;
  color: var(--color-on-surface-muted);
  margin-top: var(--spacing-unit);
}

.presentation__sous-categorie-titre:first-of-type {
  margin-top: calc(var(--spacing-unit) * 0.75);
}

.presentation__liste-clients {
  margin-top: calc(var(--spacing-unit) * 0.5);
  padding-left: var(--spacing-gutter);
}

.presentation__liste-clients li + li {
  margin-top: calc(var(--spacing-unit) * 0.25);
}

/**
 * Story 2.5 — rubrique Liens utiles : même famille visuelle que .publication
 * (carte fond surface-muted, coins arrondis, titre cliquable + ligne
 * descriptive) — simple liste, pas de tri, ordre du fichier YAML source.
 */

.liens-utiles {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--spacing-margin-mobile);
}

.liens-utiles__titre {
  text-align: center;
}

.liens-utiles__liste {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gutter);
  list-style: none;
  padding: 0;
  margin-top: var(--spacing-section-gap);
}

.lien-utile {
  background-color: var(--color-surface-muted);
  border-radius: var(--rounded-md);
  padding: var(--spacing-gutter);
}

.lien-utile__nom {
  display: inline-block;
  font-family: var(--typography-headline-font-family);
  font-size: var(--typography-headline-font-size);
  font-weight: var(--typography-headline-font-weight);
  line-height: var(--typography-headline-line-height);
  text-decoration: none;
}

.lien-utile__nom:hover,
.lien-utile__nom:focus-visible {
  text-decoration: underline;
}

.lien-utile__nom:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.lien-utile__description {
  margin-top: calc(var(--spacing-unit) * 0.5);
  font-size: var(--typography-body-sm-font-size);
  color: var(--color-on-surface-muted);
}

/**
 * Story 3.1 — page dédiée au livre : en-tête couverture + pitch/positionnement
 * (empilés sous 768px comme .hero__medias, côte à côte au-dessus), CTA achat
 * pill (même pattern que .cv__bouton/.presentation__bouton) avec repli visuel "à
 * venir" tant que lien_amazon est vide, citations en blockquote (bordure
 * accent), témoignages en cartes (même famille que .publication/.lien-utile),
 * table des matières en <details> natifs (une carte par partie, sans JS).
 */

.livre {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--spacing-margin-mobile);
}

.livre__entete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-gutter);
  text-align: center;
}

@media (min-width: 768px) {
  .livre__entete {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
}

.livre__couverture-bloc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-gutter);
  flex-shrink: 0;
}

.livre__couverture {
  width: 240px;
  height: auto;
  border-radius: var(--rounded-md);
}

.livre__couverture-bloc .livre__cta {
  margin-top: 0;
  text-align: center;
}

.livre__entete-texte {
  flex: 1;
  min-width: 240px;
}

.livre__sous-titre {
  margin-top: calc(var(--spacing-unit) * 0.5);
  font-size: var(--typography-headline-font-size);
  color: var(--color-on-surface-muted);
}

.livre__auteur {
  margin-top: calc(var(--spacing-unit) * 0.5);
  font-size: var(--typography-body-sm-font-size);
  color: var(--color-on-surface-muted);
}

.livre__pitch,
.livre__positionnement {
  margin-top: var(--spacing-gutter);
  padding-left: var(--spacing-gutter);
  border-left: 3px solid var(--color-accent);
  font-style: italic;
}

.livre__citation-source {
  margin-top: calc(var(--spacing-unit) * 0.5);
  font-size: var(--typography-body-sm-font-size);
  font-style: normal;
  color: var(--color-on-surface-muted);
}

.livre__cta {
  margin-top: var(--spacing-gutter);
}

.livre__suivi-auteur {
  margin-top: calc(var(--spacing-unit) * 0.5);
  font-size: var(--typography-body-sm-font-size);
  color: var(--color-on-surface-muted);
}

.livre__cta-bouton {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--typography-label-font-family);
  font-size: var(--typography-body-sm-font-size);
  font-weight: var(--typography-label-font-weight);
  text-decoration: none;
  border-radius: var(--rounded-full);
  padding: calc(var(--spacing-unit) * 0.75) var(--spacing-gutter);
}

.livre__cta-bouton:hover,
.livre__cta-bouton:focus-visible {
  background-color: var(--color-primary-light);
}

.livre__cta-bouton:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.livre__cta-attente {
  display: inline-block;
  background-color: var(--color-surface-muted);
  color: var(--color-on-surface-muted);
  font-family: var(--typography-label-font-family);
  font-size: var(--typography-body-sm-font-size);
  font-weight: var(--typography-label-font-weight);
  border-radius: var(--rounded-full);
  padding: calc(var(--spacing-unit) * 0.75) var(--spacing-gutter);
}

.livre__section {
  margin-top: var(--spacing-section-gap);
}

.livre__section-titre {
  font-family: var(--typography-headline-font-family);
  font-size: var(--typography-headline-font-size);
  font-weight: var(--typography-headline-font-weight);
  line-height: var(--typography-headline-line-height);
  margin-bottom: var(--spacing-gutter);
}

.livre__couverture4-illustration {
  width: 140px;
  height: auto;
  border-radius: var(--rounded-md);
  margin: 0 auto var(--spacing-gutter);
}

@media (min-width: 768px) {
  .livre__couverture4-illustration {
    float: right;
    margin: 0 0 var(--spacing-gutter) var(--spacing-gutter);
  }
}

.livre__couverture4 {
  overflow: auto;
}

.livre__couverture4 p {
  margin-top: calc(var(--spacing-unit) * 0.5);
}

.livre__couverture4-auteur-titre {
  font-family: var(--typography-label-font-family);
  font-size: var(--typography-label-font-size);
  font-weight: var(--typography-label-font-weight);
  letter-spacing: var(--typography-label-letter-spacing);
  text-transform: uppercase;
  color: var(--color-on-surface-muted);
  margin-top: var(--spacing-gutter);
}

.livre__couverture4-auteur {
  margin-top: calc(var(--spacing-unit) * 0.5);
}

.livre__temoignages {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gutter);
  list-style: none;
  padding: 0;
}

.livre__temoignage {
  background-color: var(--color-surface-muted);
  border-radius: var(--rounded-md);
  padding: var(--spacing-gutter);
}

.livre__temoignage blockquote {
  font-style: italic;
}

.livre__temoignage-auteur {
  display: block;
  margin-top: var(--spacing-unit);
  font-style: normal;
  font-size: var(--typography-body-sm-font-size);
  color: var(--color-on-surface-muted);
}

.livre__toc-parties {
  list-style: none;
  padding: 0;
  margin-top: var(--spacing-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-unit);
}

.livre__toc-partie {
  background-color: var(--color-surface-muted);
  border-radius: var(--rounded-md);
  padding: var(--spacing-gutter);
}

.livre__toc-partie-titre {
  cursor: pointer;
  font-family: var(--typography-label-font-family);
  font-weight: var(--typography-label-font-weight);
}

.livre__toc-partie-titre:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.livre__toc-chapitres {
  margin-top: var(--spacing-unit);
  padding-left: var(--spacing-gutter);
}

.livre__toc-chapitres li + li {
  margin-top: calc(var(--spacing-unit) * 0.25);
}

.livre__toc-resume {
  margin-top: var(--spacing-unit);
  color: var(--color-on-surface-muted);
}

.livre__toc-page {
  color: var(--color-on-surface-muted);
  font-size: var(--typography-body-sm-font-size);
}