/* ==========================================================================
   msolda.fr — Feuille de style principale
   Palette : ivoire / bruns (clair & foncé) / or — sans noir
   Typographies : Cormorant Garamond (titres) · Jost (libellés & corps)
   ========================================================================== */

:root {
  --ivoire: #f8f4ea;
  --parchemin: #f2e8d2;
  --parchemin-clair: #f9f2e0;
  --brun-fonce: #402e1d;
  --brun: #5d4630;
  --brun-doux: #7f684c;
  --or: #b08d3e;
  --or-clair: #d3b972;
  --filet: rgba(176, 141, 62, 0.35);
  --ombre: rgba(64, 46, 29, 0.08);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

.nowrap {
  white-space: nowrap;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #f3e7cf;
  color: var(--brun);
  font-family: "Jost", "Segoe UI", sans-serif;
  font-weight: 300;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Cuir clair ivoire : reflet doux en haut, ombre basse, grain fin + nuages (mêmes principes que le cuir du musée, en version claire et plus marquée) */
  background-image:
    radial-gradient(ellipse at 50% 18%, rgba(255, 253, 245, 0.7), rgba(255, 253, 245, 0) 52%),
    radial-gradient(ellipse at 50% 118%, rgba(94, 66, 36, 0.22), rgba(94, 66, 36, 0) 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='cg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' stitchTiles='stitch' seed='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.32 0 0 0 0 0.24 0 0 0 0 0.14 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23cg)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='cv'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='3' stitchTiles='stitch' seed='8'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.48 0 0 0 0 0.37 0 0 0 0 0.24 0 0 0 0.2 0'/%3E%3C/filter%3E%3Crect width='520' height='520' filter='url(%23cv)'/%3E%3C/svg%3E");
  background-size: auto, auto, 260px 260px, 520px 520px;
}

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--filet);
  /* Voile brun très léger : bandeau à peine teinté sur les pages claires */
  background-color: rgba(84, 64, 42, 0.08);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(6px);
}

.site-header__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0.28rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.monogramme {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--brun-fonce);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
}

.monogramme__initiales {
  color: var(--or);
}

.monogramme__domaine {
  font-family: "Jost", sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brun-doux);
}

.nav-principale ul {
  list-style: none;
  display: flex;
  gap: 1.9rem;
}

.nav-principale a {
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--brun);
  padding-bottom: 0.3rem;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.nav-principale a:hover,
.nav-principale a:focus-visible,
.nav-principale a[aria-current="page"] {
  color: var(--or);
  border-bottom-color: var(--or);
}

/* --------------------------------------------------------------------------
   Contenu principal
   -------------------------------------------------------------------------- */

main {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Héro ------------------------------------------------------------------- */

.hero {
  text-align: center;
  padding: 5.5rem 0 4rem;
}

.hero__titre {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(3.4rem, 9vw, 5.8rem);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--brun-fonce);
  line-height: 1.08;
}

.hero__sous-titre {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  font-weight: 400;
  color: var(--brun-doux);
  margin-top: 1.2rem;
}

/* Séparateur orné -------------------------------------------------------- */

.separateur {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 2.2rem auto 0;
  color: var(--or);
}

.separateur::before,
.separateur::after {
  content: "";
  height: 1px;
  width: clamp(60px, 12vw, 130px);
  background: linear-gradient(to right, transparent, var(--or), transparent);
}

.separateur__losange {
  width: 7px;
  height: 7px;
  background-color: var(--or);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* Menu principal en tuiles parchemin -------------------------------------- */

.menu-categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
  padding: 1rem 0 5rem;
}

/* Menu de la page Projets : tuiles alignées à gauche (comme l'accueil) */
.menu-categories--projets {
  text-align: left;
}

/* Tuiles à bords irréguliers (déchirés), texture papier, liseré doré */
.carte {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.6rem;
  /* Papier chaud : texture distincte du marbre, un ton plus soutenu → contraste */
  background-color: #efe3c6;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='cp'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch' seed='5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.36 0 0 0 0 0.27 0 0 0 0 0.14 0 0 0 0.13 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23cp)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='cm'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='4' stitchTiles='stitch' seed='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.34 0 0 0 0 0.25 0 0 0 0 0.12 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='560' height='560' filter='url(%23cm)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 30% 15%, rgba(255, 251, 236, 0.75), transparent 60%),
    radial-gradient(ellipse at 50% 50%, rgba(150, 117, 66, 0) 56%, rgba(120, 88, 50, 0.26) 100%);
  background-size: 200px 200px, 560px 560px, auto, auto;
  /* Liseré doré épousant le bord déchiré + ombre en profondeur */
  box-shadow: inset 0 0 0 2px rgba(176, 141, 62, 0.6);
  filter:
    drop-shadow(0 2px 4px rgba(64, 46, 29, 0.2))
    drop-shadow(0 16px 28px rgba(64, 46, 29, 0.34));
  padding: 2.6rem 2.4rem 2.2rem;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
  /* Bord déchiré irrégulier (déplacement par bruit) — casse la symétrie */
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='340' preserveAspectRatio='none'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.016' numOctaves='3' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='11'/%3E%3C/filter%3E%3Crect x='5' y='5' width='510' height='330' rx='3' fill='%23fff' filter='url(%23r)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='340' preserveAspectRatio='none'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.016' numOctaves='3' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='11'/%3E%3C/filter%3E%3Crect x='5' y='5' width='510' height='330' rx='3' fill='%23fff' filter='url(%23r)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Chaque tuile a une découpe et une inclinaison légèrement différentes */
.carte:nth-child(2) {
  transform: rotate(-0.5deg);
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='340' preserveAspectRatio='none'%3E%3Cfilter id='r2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.013 0.017' numOctaves='3' seed='31' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='12'/%3E%3C/filter%3E%3Crect x='5' y='5' width='510' height='330' rx='3' fill='%23fff' filter='url(%23r2)'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='340' preserveAspectRatio='none'%3E%3Cfilter id='r2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.013 0.017' numOctaves='3' seed='31' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='12'/%3E%3C/filter%3E%3Crect x='5' y='5' width='510' height='330' rx='3' fill='%23fff' filter='url(%23r2)'/%3E%3C/svg%3E");
}

.carte:nth-child(3) {
  transform: rotate(0.5deg);
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='340' preserveAspectRatio='none'%3E%3Cfilter id='r3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.018' numOctaves='3' seed='47' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='12'/%3E%3C/filter%3E%3Crect x='5' y='5' width='510' height='330' rx='3' fill='%23fff' filter='url(%23r3)'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='340' preserveAspectRatio='none'%3E%3Cfilter id='r3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.018' numOctaves='3' seed='47' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='12'/%3E%3C/filter%3E%3Crect x='5' y='5' width='510' height='330' rx='3' fill='%23fff' filter='url(%23r3)'/%3E%3C/svg%3E");
}

.carte:nth-child(4) {
  transform: rotate(-0.35deg);
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='340' preserveAspectRatio='none'%3E%3Cfilter id='r4'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.015' numOctaves='3' seed='63' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='11'/%3E%3C/filter%3E%3Crect x='5' y='5' width='510' height='330' rx='3' fill='%23fff' filter='url(%23r4)'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='340' preserveAspectRatio='none'%3E%3Cfilter id='r4'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.015' numOctaves='3' seed='63' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='11'/%3E%3C/filter%3E%3Crect x='5' y='5' width='510' height='330' rx='3' fill='%23fff' filter='url(%23r4)'/%3E%3C/svg%3E");
}

.carte:hover,
.carte:focus-visible {
  transform: translateY(-6px);
  box-shadow: inset 0 0 0 2px var(--or);
  filter:
    drop-shadow(0 3px 5px rgba(64, 46, 29, 0.24))
    drop-shadow(0 24px 38px rgba(64, 46, 29, 0.42));
}

.carte:nth-child(2):hover { transform: translateY(-6px) rotate(-0.5deg); }
.carte:nth-child(3):hover { transform: translateY(-6px) rotate(0.5deg); }
.carte:nth-child(4):hover { transform: translateY(-6px) rotate(-0.35deg); }

.carte__numero {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--or);
  letter-spacing: 0.12em;
}

.carte__titre {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 500;
  color: var(--brun-fonce);
  line-height: 1.2;
  margin-top: 0.5rem;
}

.carte__description {
  font-size: 0.92rem;
  color: var(--brun-doux);
  margin-top: 0.6rem;
  max-width: 34ch;
}

.carte__action {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brun);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: color 0.3s ease;
}

.carte__action::after {
  content: "→";
  font-size: 0.95rem;
  transition: transform 0.3s ease;
}

.carte:hover .carte__action,
.carte:focus-visible .carte__action {
  color: var(--or);
}

.carte:hover .carte__action::after,
.carte:focus-visible .carte__action::after {
  transform: translateX(5px);
}

/* Pages document (CV, book d'avis) ---------------------------------------- */

.page-document {
  text-align: center;
  padding: 4.2rem 0 4.5rem;
}

.page-document__surtitre {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 1.2rem;
}

.page-document__titre {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 500;
  color: var(--brun-fonce);
}

.page-document__intro {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--brun-doux);
  margin: 1rem auto 0;
  max-width: 56ch;
}

/* Rangée de statistiques (book d'avis) */
.stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2.4rem;
}

.stat {
  padding: 0.9rem 2.6rem;
  position: relative;
}

.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  height: 64%;
  width: 1px;
  background-color: var(--filet);
}

.stat__valeur {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--brun-fonce);
  line-height: 1.15;
}

.stat__valeur .etoile {
  color: var(--or);
}

.stat__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brun-doux);
  margin-top: 0.3rem;
}

/* Boutons */
.documents-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.6rem;
}

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.8rem;
  font-family: "Jost", sans-serif;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--or);
  border-radius: 2px;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.bouton--plein {
  background-color: var(--brun-fonce);
  color: var(--ivoire);
}

.bouton--plein:hover,
.bouton--plein:focus-visible {
  background-color: var(--brun);
  border-color: var(--or-clair);
}

.bouton--contour {
  background-color: transparent;
  color: var(--brun);
}

.bouton--contour:hover,
.bouton--contour:focus-visible {
  color: var(--brun-fonce);
  background-color: rgba(176, 141, 62, 0.12);
}

/* Page « À propos » éditoriale (portfolio) --------------------------------- */

.apropos {
  max-width: 680px;
  margin: 2.4rem auto 0;
  text-align: left;
}

.apropos__lead {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 1.95rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--brun-fonce);
}

/* Accroche compacte (tient sur 2 lignes en desktop) */
.apropos__lead--compact {
  font-size: clamp(1.15rem, 2.3vw, 1.5rem);
  line-height: 1.5;
}

.apropos__lead::first-letter {
  font-size: 3.6em;
  line-height: 0.78;
  float: left;
  margin: 0.06em 0.12em 0 0;
  color: var(--or);
  font-weight: 600;
}

.recit {
  margin-top: 3.4rem;
}

.recit__titre {
  font-family: "Jost", sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--or);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.6rem;
}

.recit__titre::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--filet), transparent);
}

.recit p {
  font-size: 1.04rem;
  line-height: 1.78;
  color: var(--brun);
}

.recit p + p {
  margin-top: 1.1rem;
}

.recit strong {
  font-weight: 500;
  color: var(--brun-fonce);
}

.apropos a {
  color: var(--brun-fonce);
  text-decoration: none;
  border-bottom: 1px solid var(--or);
  transition: color 0.25s ease;
}

.apropos a:hover,
.apropos a:focus-visible {
  color: var(--or);
}

/* Repères chiffrés, présentés comme une frise éditoriale */
.reperes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.4rem;
  margin-top: 3.4rem;
  padding: 1.8rem 0;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}

.repere {
  flex: 1 1 140px;
}

.repere__valeur {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  font-weight: 500;
  color: var(--brun-fonce);
  line-height: 1.1;
}

.repere__valeur .etoile {
  color: var(--or);
}

.repere__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brun-doux);
  margin-top: 0.5rem;
}

/* Piliers de valeur */
.piliers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

.pilier__numero {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--or);
}

.pilier__titre {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--brun-fonce);
  margin-top: 0.2rem;
}

.pilier__texte {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--brun-doux);
  margin-top: 0.5rem;
}

/* Frise du parcours (timeline éditoriale) */
.timeline {
  list-style: none;
  position: relative;
  margin-left: 0.5rem;
  padding-left: 1.8rem;
  border-left: 1px solid var(--filet);
}

.timeline__item {
  position: relative;
  padding-bottom: 2rem;
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1.8rem - 5px);
  top: 0.45rem;
  width: 9px;
  height: 9px;
  background-color: var(--or);
  border: 2px solid var(--ivoire);
  border-radius: 50%;
  transform: rotate(45deg);
}

.timeline__annee {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or);
}

.timeline__role {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--brun-fonce);
  line-height: 1.25;
  margin-top: 0.25rem;
}

.timeline__mention {
  font-style: italic;
  font-weight: 500;
  color: var(--or);
}

.timeline__lieu {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--brun-doux);
  margin-top: 0.1rem;
}

.timeline__desc {
  font-size: 0.96rem;
  line-height: 1.68;
  color: var(--brun);
  margin-top: 0.5rem;
}

/* Citation vedette (book d'avis) ------------------------------------------- */

.citation {
  max-width: 46rem;
  margin: 2.8rem auto 0;
}

.citation__texte {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 500;
  color: var(--brun-fonce);
  line-height: 1.5;
}

.citation__texte::before {
  content: "“ ";
  color: var(--or);
}

.citation__texte::after {
  content: " ”";
  color: var(--or);
}

.citation__auteur {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brun-doux);
  margin-top: 1.1rem;
}

/* Grille de témoignages ----------------------------------------------------- */

.avis-entete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 3.4rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--filet);
  text-align: left;
}

.avis-entete__titre {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--brun-fonce);
}

.avis-entete__source {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brun-doux);
}

.avis-entete__source .etoile {
  color: var(--or);
  letter-spacing: 0.1em;
}

.avis-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.3rem;
  margin-top: 1.6rem;
  text-align: left;
}

.avis {
  /* Blocs translucides : le parchemin transparaît, jeu de transparence */
  background-color: rgba(249, 242, 224, 0.42);
  border: 1px solid rgba(176, 141, 62, 0.22);
  border-left: 3px solid var(--or);
  border-radius: 2px;
  padding: 1.4rem 1.5rem 1.2rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 6px rgba(64, 46, 29, 0.05);
}

/* Variation d'opacité d'un bloc à l'autre */
.avis:nth-child(3n + 2) {
  background-color: rgba(243, 235, 214, 0.55);
}

.avis:nth-child(3n) {
  background-color: rgba(235, 225, 201, 0.68);
  border-left-color: var(--or-clair);
}

.avis:nth-child(5n) {
  background-color: rgba(249, 242, 224, 0.3);
}

/* Mouvement au survol — appareils avec pointeur (web) uniquement */
@media (hover: hover) and (pointer: fine) {
  .avis {
    transition: transform 0.3s ease, box-shadow 0.3s ease,
      border-left-width 0.3s ease, border-left-color 0.3s ease;
  }

  .avis:hover {
    transform: translateY(-6px);
    border-left-width: 5px;
    border-left-color: var(--or-clair);
    box-shadow: 0 14px 28px rgba(64, 46, 29, 0.14);
  }
}

.avis__etoiles {
  color: var(--or);
  font-size: 0.82rem;
  letter-spacing: 0.28em;
}

.avis__etoile-vide {
  color: rgba(176, 141, 62, 0.3);
}

.avis__texte {
  font-size: 0.92rem;
  color: var(--brun);
  line-height: 1.62;
  margin-top: 0.7rem;
  flex: 1;
}

.avis__texte::before {
  content: "“";
  color: var(--or);
}

.avis__texte::after {
  content: "”";
  color: var(--or);
}

.avis__auteur {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--brun-fonce);
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(176, 141, 62, 0.22);
}

.avis-note {
  font-size: 0.8rem;
  color: var(--brun-doux);
  margin-top: 1.8rem;
}

/* Pages intérieures (en construction) ------------------------------------- */

.page-attente {
  text-align: center;
  padding: 7rem 0 8rem;
}

.page-attente__titre {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 500;
  color: var(--brun-fonce);
}

.page-attente__texte {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--brun-doux);
  margin-top: 1rem;
}

.page-attente .separateur {
  margin-top: 2rem;
}

.lien-retour,
.lien-suivant {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.8rem;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--brun);
  border-bottom: 1px solid var(--filet);
  padding-bottom: 0.35rem;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.lien-retour::before {
  content: "←";
}

.lien-suivant::after {
  content: "→";
}

.lien-retour:hover,
.lien-retour:focus-visible,
.lien-suivant:hover,
.lien-suivant:focus-visible {
  color: var(--or);
  border-bottom-color: var(--or);
}

/* Barre de navigation entre les pages du musée (collection précédente/suivante) */
.gazette-nav-suivante {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 2.4rem;
  padding-bottom: 3.5rem;
}

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

.site-footer {
  border-top: 1px solid var(--filet);
  margin-top: auto;
}

.site-footer__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.6rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brun-doux);
}

.site-footer__losange {
  width: 5px;
  height: 5px;
  background-color: var(--or);
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Page « Musée automobile » — cuir brun foncé + gazette old-school
   -------------------------------------------------------------------------- */

.page-musee {
  color: #e8dcc2;
  --cuir: #3a2818;
  background-color: var(--cuir);
  /* Cuir : reflet central, ombre basse, grain fin + veinures */
  background-image:
    radial-gradient(ellipse at 50% 24%, rgba(96, 68, 40, 0.55), rgba(0, 0, 0, 0) 60%),
    radial-gradient(ellipse at 50% 120%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='lg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' stitchTiles='stitch' seed='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23lg)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='lm'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='3' stitchTiles='stitch' seed='8'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.7 0 0 0 0 0.55 0 0 0 0 0.35 0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='520' height='520' filter='url(%23lm)'/%3E%3C/svg%3E");
  background-size: auto, auto, 260px 260px, 520px 520px;
}

/* En-tête et pied adaptés au cuir */
.page-musee .site-header {
  background-color: rgba(36, 24, 14, 0.5);
  border-bottom-color: rgba(176, 141, 62, 0.4);
}

.page-musee .monogramme {
  color: #efe7d2;
}

.page-musee .nav-principale a {
  color: #d8c7a4;
}

.page-musee .site-footer {
  border-top-color: rgba(176, 141, 62, 0.3);
}

.page-musee .site-footer__inner {
  color: #b09a76;
}

/* Masthead de la gazette */
.gazette-tete {
  text-align: center;
  padding: 3.4rem 0 2.2rem;
}

.gazette-tete__filet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #c7ad7f;
}

.gazette-tete__filet::before,
.gazette-tete__filet::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 180px;
  background: linear-gradient(to right, transparent, rgba(199, 173, 127, 0.7), transparent);
}

.gazette-tete__titre {
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  font-weight: 800;
  font-size: clamp(2.8rem, 7vw, 4.8rem);
  letter-spacing: 0.01em;
  line-height: 1.02;
  color: #f1e7d0;
  margin: 0.8rem 0 0.6rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.gazette-tete__sous {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: #d3c1a0;
}

.gazette-tete__bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1.4rem;
  margin-top: 1.6rem;
  padding: 0.6rem 0;
  border-top: 2px solid rgba(199, 173, 127, 0.6);
  border-bottom: 1px solid rgba(199, 173, 127, 0.6);
  font-family: "Jost", sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c7ad7f;
}

.gazette-intro {
  max-width: 640px;
  margin: 2.2rem auto 0;
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #ddccab;
}

/* Grille des coupures de presse */
.gazette-grille {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  padding: 2.8rem 0 4.5rem;
}

/* Deux colonnes indépendantes : chacune empile ses propres articles,
   sans que la hauteur de l'une force l'alignement de l'autre. */
.gazette-colonnes {
  display: flex;
  align-items: flex-start;
  gap: 1.8rem;
}

.gazette-colonne {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  flex: 1 1 0;
  min-width: 0;
}

/* Coupure = article de vieux journal : papier jauni, taches, bords déchirés */
.coupure {
  position: relative;
  /* papier translucide (le cuir transparaît légèrement) et jauni */
  background-color: rgba(232, 221, 196, 0.9);
  background-image:
    /* taches de rousseur (foxing) */
    radial-gradient(circle at 11% 20%, rgba(120, 86, 44, 0.16) 0 4px, transparent 9px),
    radial-gradient(circle at 84% 13%, rgba(120, 86, 44, 0.12) 0 6px, transparent 12px),
    radial-gradient(circle at 70% 86%, rgba(120, 86, 44, 0.13) 0 5px, transparent 11px),
    radial-gradient(circle at 28% 92%, rgba(120, 86, 44, 0.1) 0 7px, transparent 14px),
    /* auréole diffuse type café */
    radial-gradient(ellipse at 88% 78%, rgba(112, 78, 38, 0.16), transparent 42%),
    /* bords brunis / usés */
    radial-gradient(ellipse at 50% 50%, rgba(120, 88, 50, 0) 60%, rgba(90, 62, 32, 0.4) 100%),
    /* grain de papier */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch' seed='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.3 0 0 0 0 0.22 0 0 0 0 0.12 0 0 0 0.13 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23c)'/%3E%3C/svg%3E"),
    /* marbrure de jaunissement */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='cm'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='4' stitchTiles='stitch' seed='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.42 0 0 0 0 0.3 0 0 0 0 0.14 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='520' height='520' filter='url(%23cm)'/%3E%3C/svg%3E");
  background-size: auto, auto, auto, auto, auto, auto, 220px 220px, 520px 520px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.36);
  padding: 1.9rem 2rem 2.1rem;
  color: #2a2016;
  display: flex;
  flex-direction: column;
  /* bord déchiré irrégulier (déplacement par bruit) — casse l'effet de bloc */
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='600' preserveAspectRatio='none'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015 0.022' numOctaves='3' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='14'/%3E%3C/filter%3E%3Crect x='6' y='6' width='448' height='588' rx='2' fill='%23fff' filter='url(%23r)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='600' preserveAspectRatio='none'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015 0.022' numOctaves='3' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='14'/%3E%3C/filter%3E%3Crect x='6' y='6' width='448' height='588' rx='2' fill='%23fff' filter='url(%23r)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Un peu de variété dans la déchirure d'une coupure à l'autre */
.coupure:nth-child(3n) {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='600' preserveAspectRatio='none'%3E%3Cfilter id='r2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.017 0.024' numOctaves='3' seed='27' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='15'/%3E%3C/filter%3E%3Crect x='6' y='6' width='448' height='588' rx='2' fill='%23fff' filter='url(%23r2)'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='600' preserveAspectRatio='none'%3E%3Cfilter id='r2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.017 0.024' numOctaves='3' seed='27' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='15'/%3E%3C/filter%3E%3Crect x='6' y='6' width='448' height='588' rx='2' fill='%23fff' filter='url(%23r2)'/%3E%3C/svg%3E");
}

.coupure__kicker {
  font-family: "Jost", sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-align: center;
  color: #6e5a44;
  border-top: 2px solid #2a2016;
  border-bottom: 1px solid #2a2016;
  padding: 0.35rem 0;
  margin-bottom: 1rem;
}

.coupure__titre {
  font-family: "Playfair Display", "Cormorant Garamond", serif;
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.08;
  text-align: center;
  text-transform: uppercase;
  color: #241a10;
}

.coupure--une .coupure__titre {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

.coupure__chapeau {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(0.85rem, 2.1vw, 1.05rem);
  text-align: center;
  color: #5a4632;
  margin-top: 0.5rem;
}

.coupure__rule {
  border: 0;
  border-top: 3px double #2a2016;
  margin: 1rem 0;
}

.coupure__photo {
  border: 1px solid #8a7550;
  background-image:
    repeating-linear-gradient(45deg, rgba(42, 32, 22, 0.06) 0 10px, rgba(42, 32, 22, 0.02) 10px 20px);
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #8a7550;
  font-family: "Jost", sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.coupure--une .coupure__photo {
  min-height: 300px;
}

/* Variante avec une vraie photographie (au lieu du placeholder hachuré) :
   pas de cadre ni de hauteur minimale, la boîte épouse exactement la photo */
.coupure__photo--image {
  padding: 0;
  background-image: none;
  border: none;
  min-height: 0;
  height: auto;
}

.coupure--une .coupure__photo--image {
  min-height: 0;
  height: auto;
}

.coupure__photo--image img {
  display: block;
  width: 100%;
  height: auto;
  /* Patine (duotone beige-brun, grain, vignettage) déjà appliquée à l'image */
}

.coupure__corps {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #3a2c1c;
  column-gap: 1.4rem;
  column-rule: 1px solid #c3b088;
}

.coupure__corps p {
  margin: 0 0 0.8em;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  break-inside: avoid;
}

.coupure__corps p:last-child {
  margin-bottom: 0;
}

.coupure--une .coupure__corps {
  column-count: 3;
}

.coupure__corps--2 {
  column-count: 2;
}

/* Lignes de texte factices (article « à venir ») */
.faux-texte span {
  display: block;
  height: 0.5rem;
  background-color: rgba(42, 32, 22, 0.14);
  border-radius: 2px;
  margin-bottom: 0.55rem;
  break-inside: avoid;
}

.faux-texte span:nth-child(4n) {
  width: 68%;
}

.coupure__note {
  margin-top: 1.1rem;
  font-family: "Jost", sans-serif;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  color: #8a7550;
}

.page-musee .lien-retour,
.page-musee .lien-suivant {
  color: #d8c7a4;
  border-bottom-color: rgba(199, 173, 127, 0.5);
}

.page-musee .lien-retour:hover,
.page-musee .lien-retour:focus-visible,
.page-musee .lien-suivant:hover,
.page-musee .lien-suivant:focus-visible {
  color: var(--or-clair);
  border-bottom-color: var(--or-clair);
}

/* --------------------------------------------------------------------------
   Page Projets — onglets, chiffres, tableau & graphiques
   -------------------------------------------------------------------------- */

.onglets {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1.6rem;
  border-bottom: 1px solid var(--filet);
}

.onglet {
  font-family: "Jost", sans-serif;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--brun-doux);
  padding: 0.6rem 1.3rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.onglet:hover,
.onglet:focus-visible {
  color: var(--brun-fonce);
}

.onglet--actif {
  color: var(--brun-fonce);
  border-bottom-color: var(--or);
}

.chiffres {
  text-align: left;
}

.chiffres__titre {
  font-family: "Jost", sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--or);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 3rem 0 0.4rem;
}

.chiffres__titre::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--filet), transparent);
}

.chiffres__note {
  font-size: 0.82rem;
  color: var(--brun-doux);
  margin-bottom: 1.4rem;
}

/* Tableau */
.tableau-cadre {
  overflow-x: auto;
  border: 1px solid rgba(176, 141, 62, 0.25);
  border-radius: 3px;
  background-color: rgba(249, 242, 224, 0.45);
  box-shadow: 0 2px 6px rgba(64, 46, 29, 0.05);
}

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-family: "Jost", sans-serif;
  font-size: 0.9rem;
  min-width: 520px;
}

.tableau thead th {
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brun-fonce);
  background-color: rgba(176, 141, 62, 0.16);
  border-bottom: 2px solid var(--or);
  padding: 0.75rem 0.9rem;
  text-align: right;
  white-space: nowrap;
}

.tableau thead th:first-child {
  text-align: left;
}

.tableau td {
  padding: 0.62rem 0.9rem;
  text-align: right;
  color: var(--brun);
  border-bottom: 1px solid rgba(176, 141, 62, 0.16);
  white-space: nowrap;
}

.tableau td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--brun-fonce);
}

.tableau tbody tr:nth-child(even) td {
  background-color: rgba(176, 141, 62, 0.06);
}

.tableau tbody tr:last-child td {
  border-bottom: 0;
}

/* Grille de graphiques */
.chiffres-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  margin-top: 1.6rem;
}

.graph {
  background-color: rgba(249, 242, 224, 0.45);
  border: 1px solid rgba(176, 141, 62, 0.22);
  border-radius: 3px;
  padding: 1.2rem 1.3rem 1rem;
  box-shadow: 0 2px 6px rgba(64, 46, 29, 0.05);
}

.graph__titre {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--brun-fonce);
  line-height: 1.2;
}

.graph__note {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--brun-doux);
  margin-top: 0.15rem;
}

.chart {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 0.6rem;
  font-family: "Jost", sans-serif;
}

/* Bloc Responsable VO */
.vo-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.6rem;
}

.vo-fig {
  background-color: rgba(249, 242, 224, 0.45);
  border: 1px solid rgba(176, 141, 62, 0.22);
  border-left: 3px solid var(--or);
  border-radius: 2px;
  padding: 1rem 1.1rem;
}

.vo-fig__valeur {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--brun-fonce);
  line-height: 1.1;
}

.vo-fig__label {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brun-doux);
  margin-top: 0.35rem;
}

.jauge {
  margin-top: 1.8rem;
}

.jauge__entete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--brun);
}

.jauge__entete strong {
  color: var(--brun-fonce);
  font-weight: 500;
}

.jauge__pct {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--or);
}

.jauge__piste {
  position: relative;
  height: 14px;
  margin-top: 0.5rem;
  background-color: rgba(176, 141, 62, 0.16);
  border: 1px solid rgba(176, 141, 62, 0.3);
  border-radius: 7px;
  overflow: hidden;
}

.jauge__remplissage {
  height: 100%;
  background: linear-gradient(to right, var(--or), var(--or-clair));
}

/* --------------------------------------------------------------------------
   Page « Transformation physique » — photos avant/après & journal
   -------------------------------------------------------------------------- */

.transfo-photos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  margin-top: 2.4rem;
  /* Débordent de la colonne de texte pour un affichage plus grand */
  width: min(860px, 94vw);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.transfo-photo {
  margin: 0;
  background-color: rgba(249, 242, 224, 0.5);
  border: 1px solid rgba(176, 141, 62, 0.3);
  border-radius: 3px;
  padding: 8px 8px 0;
  box-shadow: 0 8px 20px rgba(64, 46, 29, 0.14);
}

.transfo-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.transfo-photo figcaption {
  font-family: "Jost", sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brun-doux);
  text-align: center;
  padding: 0.7rem 0 0.6rem;
}

/* Légende + bandeau de mensurations (page transformation) */
.reperes-legende {
  text-align: center;
  font-family: "Jost", sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brun-doux);
  margin-top: 1.4rem;
  margin-bottom: 0.1rem;
}

.reperes--mensurations {
  margin-top: 0;
  border-top: 0;
  padding-top: 0.5rem;
}

/* Journal daté */
.journal {
  margin-top: 3rem;
  border-left: 1px solid var(--filet);
  padding-left: 1.9rem;
  margin-left: 0.4rem;
}

.journal-entree {
  position: relative;
  padding-bottom: 2.4rem;
}

.journal-entree:last-child {
  padding-bottom: 0;
}

.journal-entree::before {
  content: "";
  position: absolute;
  left: calc(-1.9rem - 5px);
  top: 0.4rem;
  width: 9px;
  height: 9px;
  background-color: var(--or);
  border: 2px solid var(--ivoire);
  border-radius: 50%;
  transform: rotate(45deg);
}

.journal-entree__date {
  font-family: "Jost", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or);
}

.journal-entree__titre {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--brun-fonce);
  line-height: 1.25;
  margin-top: 0.15rem;
}

.journal-entree p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--brun);
  margin-top: 0.7rem;
}

.journal-entree p strong {
  font-weight: 500;
  color: var(--brun-fonce);
}

.journal-entree__photo {
  margin: 1rem 0 0;
  max-width: 320px;
  background-color: rgba(249, 242, 224, 0.5);
  border: 1px solid rgba(176, 141, 62, 0.3);
  border-radius: 3px;
  padding: 8px;
  box-shadow: 0 8px 20px rgba(64, 46, 29, 0.14);
}

.journal-entree__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Adaptation mobile
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .site-header__inner {
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.7rem 1.2rem;
  }

  .nav-principale ul {
    gap: 1.1rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero {
    padding: 3.5rem 0 2.8rem;
  }

  .menu-categories {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding-bottom: 3.5rem;
  }

  .carte {
    gap: 1.8rem;
    padding: 2rem 1.7rem 1.7rem;
  }

  .stats {
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
  }

  .stat {
    padding: 0.7rem 1rem;
  }

  .stat + .stat::before {
    left: 30%;
    top: 0;
    height: 1px;
    width: 40%;
  }

  .piliers {
    grid-template-columns: 1fr;
    gap: 1.3rem;
  }

  .reperes {
    gap: 1rem 1.4rem;
  }

  .repere {
    flex-basis: 40%;
  }

  .avis-grille {
    grid-template-columns: 1fr;
  }

  .gazette-grille {
    gap: 1.3rem;
  }

  /* Sur mobile, on repasse en une seule colonne en conservant
     l'ordre de lecture logique II, III, IV, V. */
  .gazette-colonnes {
    flex-direction: column;
    gap: 1.3rem;
  }

  .gazette-colonne {
    display: contents;
  }

  .coupure--2 { order: 1; }
  .coupure--3 { order: 2; }
  .coupure--4 { order: 3; }
  .coupure--5 { order: 4; }

  .chiffres-grille {
    grid-template-columns: 1fr;
  }

  .vo-figures {
    grid-template-columns: 1fr 1fr;
  }

  .transfo-photos {
    grid-template-columns: 1fr;
  }

  .coupure__corps,
  .coupure--une .coupure__corps {
    column-count: 1;
  }

  .coupure--une .coupure__titre {
    font-size: 1.5rem;
  }

  .coupure__chapeau {
    font-size: 0.85rem;
  }

  .site-footer__inner {
    flex-direction: column;
    text-align: center;
  }
}