@font-face {
  font-family: 'Shippori Mincho';
  src: url('polices/shippori-mincho-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Shippori Mincho';
  src: url('polices/shippori-mincho-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('polices/manrope-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800; font-display: swap;
}

:root {
  /* Les trois couleurs sortent de son logo : le brun du cercle, l'or du
     dégradé, et un papier chaud qui les tient ensemble. */
  --papier: #F8F3EA;
  --papier-creux: #F1E9DC;
  --encre: #2A1C13;
  --brun: #241710;
  --doux: #6B5C4E;
  --or: #C08A2C;
  --or-texte: #8A5F14;   /* l'or ne passe pas en texte sur le papier : 3,1:1 */
  --or-clair: #E8C876;
  --trait: rgba(42, 28, 19, .13);

  --large: 1240px;
  --marge: clamp(1.25rem, 5vw, 3.5rem);
  --section: clamp(4rem, 9vw, 7.5rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: clamp(1rem, .96rem + .2vw, 1.1rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Deux halos hors-champ, un chaud côté or, un plus froid à l'opposé :
     ils empêchent les grandes surfaces de papier de paraître mortes. */
  background-image:
    radial-gradient(60rem 40rem at 88% -8%, rgba(192, 138, 44, .22), transparent 62%),
    radial-gradient(50rem 38rem at -12% 34%, rgba(120, 130, 118, .14), transparent 60%);
  background-attachment: fixed;
}

h1, h2, h3 {
  font-family: 'Shippori Mincho', Georgia, serif;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0;
}
h1 { font-size: clamp(2.6rem, 1.6rem + 4.4vw, 4.6rem); }
h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); }
h3 { font-size: 1.32rem; letter-spacing: -.01em; }
h1 em { font-style: italic; color: var(--or-texte); }

p { margin: 0 0 1.1em; }
a { color: inherit; }

/* Le filet : un mot en petites capitales précédé d'un trait fin. Il remplace
   le libellé de section en capitales espacées, qui sonne faux. */
.filet {
  display: flex; align-items: center; gap: .7rem;
  font-size: .82rem; letter-spacing: .04em; font-weight: 600;
  color: var(--doux); margin-bottom: 1.1rem;
}
.filet::before {
  content: ''; width: 2.2rem; height: 1px; background: var(--or); flex: none;
}
.filet--clair { color: rgba(248, 243, 234, .7); }
.filet--clair::before { background: var(--or-clair); }

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

.entete {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: clamp(1rem, 4vw, 3rem);
  padding: .85rem var(--marge);
  background: rgba(248, 243, 234, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.entete.est-detachee { border-bottom-color: var(--trait); }
.entete__marque {
  display: flex; align-items: center; gap: .55rem;
  font-family: 'Shippori Mincho', serif; font-size: 1.25rem;
  text-decoration: none; letter-spacing: .01em;
}
.entete__marque img { display: block; }
.entete__nav { display: flex; gap: 1.6rem; margin-left: auto; }
.entete__nav a {
  text-decoration: none; font-size: .95rem; color: var(--doux);
  padding: .25rem 0; border-bottom: 1px solid transparent; transition: .2s;
}
.entete__nav a:hover { color: var(--encre); border-bottom-color: var(--or); }
.entete__tel {
  text-decoration: none; font-weight: 600; font-size: .98rem;
  padding: .6rem 1.1rem; border-radius: 999px;
  background: var(--encre); color: var(--papier);
  min-height: 44px; display: inline-flex; align-items: center;
}
@media (max-width: 900px) {
  .entete__nav { display: none; }
  .entete__tel { margin-left: auto; }
}

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

.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.2rem; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 1.5rem; border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: 1.02rem;
  border: 1px solid var(--trait); transition: transform .2s, background .2s, border-color .2s;
}
.bouton:hover { transform: translateY(-2px); border-color: var(--or); }
.bouton--plein {
  background: var(--encre); color: var(--papier); border-color: var(--encre);
  letter-spacing: .01em;
}
.bouton--plein:hover { background: #3A2718; }

/* ---------- Le disque, forme signature ---------- */

.disque {
  position: relative; margin: 0;
  aspect-ratio: 1; border-radius: 50%;
}
/* Le rapport est porté par l'image, pas par la figure : en élément de flex,
   une figure dont la hauteur dépend de son contenu ignore `aspect-ratio` et
   la photo verticale du Amma ressortait en ovale. */
.disque img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: 50%; display: block;
}
/* Le trait ne se dessine que sur les grands disques, sinon il bavarde. */
.disque__trait {
  position: absolute; inset: -1.6%; width: 103.2%; height: 103.2%;
  overflow: visible; pointer-events: none;
}
.disque__trait circle {
  fill: none; stroke: var(--or); stroke-width: .35;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transform: rotate(-90deg); transform-origin: 50% 50%;
}
.js [data-cercle].est-tracee .disque__trait circle {
  transition: stroke-dashoffset 1.8s cubic-bezier(.22, 1, .36, 1);
  stroke-dashoffset: 0;
}
html:not(.js) .disque__trait circle { stroke-dashoffset: 0; }

/* ---------- Ouverture ---------- */

.ouverture {
  max-width: var(--large); margin: 0 auto;
  padding: clamp(2rem, 5vw, 4.5rem) var(--marge) var(--section);
  display: grid; grid-template-columns: 1fr .88fr;
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.ouverture__dit {
  max-width: 34ch; color: var(--doux); font-size: 1.1rem; margin-bottom: 2rem;
}
.ouverture__note { font-size: .9rem; color: var(--doux); margin: 0; }
.disque--grand { width: 100%; }

@media (max-width: 860px) {
  .ouverture { grid-template-columns: 1fr; padding-top: 1.5rem; }
  .disque--grand { max-width: 22rem; margin-inline: auto; order: -1; }
}

/* ---------- Bandeau de preuves ---------- */

.preuves {
  max-width: var(--large); margin: 0 auto; padding: 0 var(--marge);
  display: flex; flex-wrap: wrap; gap: .6rem 2rem;
  border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait);
}
.preuves span {
  padding: 1.05rem 0; font-size: .92rem; color: var(--doux);
  display: flex; align-items: center; gap: .55rem;
}
.preuves span::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--or); flex: none;
}

/* ---------- Les soins ---------- */

.soins { max-width: var(--large); margin: 0 auto; padding: var(--section) var(--marge); }
.tete { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.carte-soins {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.4rem) clamp(1.5rem, 3vw, 2.8rem);
}
.soin { display: flex; flex-direction: column; }
.soin .disque { width: 100%; margin-bottom: 1.4rem; }
.soin .disque img { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.soin:hover .disque img { transform: scale(1.04); }
.soin h3 { margin-bottom: .5rem; }
.soin__ligne {
  display: flex; align-items: baseline; gap: .7rem;
  margin-bottom: .8rem; padding-bottom: .8rem;
  border-bottom: 1px solid var(--trait);
}
.soin__ligne span { color: var(--doux); font-size: .92rem; }
.soin__ligne b {
  margin-left: auto; font-family: 'Shippori Mincho', serif;
  font-size: 1.28rem; font-weight: 500; color: var(--or-texte);
}
.soin p:last-child { color: var(--doux); font-size: .98rem; margin: 0; }
.soins__pied {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding-top: 1.6rem;
  border-top: 1px solid var(--trait);
  color: var(--doux); font-size: .95rem; max-width: 60ch;
}

@media (max-width: 900px) { .carte-soins { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .carte-soins { grid-template-columns: 1fr; gap: 2.6rem; }
  .soin .disque { max-width: 15rem; }
}

/* ---------- La voie : le seul bloc sombre, détaché et arrondi ---------- */

.voie {
  max-width: var(--large); margin: 0 auto clamp(0rem, 3vw, 2rem);
  padding: clamp(2.6rem, 5vw, 4.5rem);
  border-radius: clamp(20px, 3vw, 34px);
  background: var(--brun);
  background-image: radial-gradient(38rem 26rem at 88% 8%, rgba(192, 138, 44, .34), transparent 64%);
  color: var(--papier);
  display: grid; grid-template-columns: 1.05fr .8fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  width: calc(100% - var(--marge) * 2);
}
.voie h2 { margin-bottom: 1.2rem; }
.voie p { color: rgba(248, 243, 234, .82); max-width: 42ch; }
.apports {
  list-style: none; margin: 1.8rem 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem 1.5rem;
}
.apports li {
  display: flex; align-items: baseline; gap: .6rem; font-size: .98rem;
  color: rgba(248, 243, 234, .92);
}
.apports li::before { content: '—'; color: var(--or-clair); flex: none; }
.voie__habille {
  margin: 0; padding-top: 1.4rem;
  border-top: 1px solid rgba(248, 243, 234, .16);
  font-size: .92rem; color: rgba(248, 243, 234, .6);
}
.disque--voie .disque__trait circle { stroke: var(--or-clair); }

@media (max-width: 860px) {
  .voie { grid-template-columns: 1fr; }
  .disque--voie { max-width: 18rem; margin-inline: auto; }
  .apports { grid-template-columns: 1fr; }
}

/* ---------- Claire ---------- */

.claire {
  max-width: var(--large); margin: 0 auto;
  padding: var(--section) var(--marge);
  display: grid; grid-template-columns: .85fr 1.1fr;
  gap: clamp(2rem, 6vw, 5rem); align-items: start;
}
.claire .disque { position: sticky; top: 6rem; }
.claire__mots > p { color: var(--doux); max-width: 46ch; }
.claire__mots h2 { margin-bottom: 1.2rem; }

.parcours { list-style: none; margin: 2.4rem 0 0; padding: 0 0 0 1.6rem; position: relative; }
.parcours::before {
  content: ''; position: absolute; left: 0; top: .6rem; bottom: .6rem;
  width: 1px; background: var(--trait);
}
.parcours li {
  position: relative; display: grid; grid-template-columns: 7.5rem 1fr;
  gap: .2rem 1.2rem; padding: .75rem 0;
}
.parcours li::before {
  content: ''; position: absolute; left: -1.6rem; top: 1.35rem;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--papier); border: 1px solid var(--or);
  transform: translateX(-3px);
}
.parcours b {
  font-family: 'Shippori Mincho', serif; font-weight: 500;
  font-size: 1.02rem; color: var(--or-texte);
}
.parcours span { color: var(--doux); font-size: .98rem; }
.parcours--sceau::before { background: var(--or); }
.parcours--sceau span { color: var(--encre); }

@media (max-width: 860px) {
  .claire { grid-template-columns: 1fr; }
  .claire .disque { position: static; max-width: 17rem; }
  .parcours li { grid-template-columns: 1fr; }
}

/* ---------- Avis ---------- */

.avis {
  max-width: var(--large); margin: 0 auto;
  padding: 0 var(--marge) var(--section);
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.avis__note { text-align: center; flex: none; }
.avis__chiffre {
  font-family: 'Shippori Mincho', serif; font-size: 4.2rem;
  line-height: 1; margin: 0;
}
.avis__etoiles { color: var(--or); letter-spacing: .12em; margin: .4rem 0 .2rem; }
.avis__source { font-size: .9rem; color: var(--doux); margin: 0; }
.avis blockquote {
  margin: 0; padding-left: clamp(1.5rem, 3vw, 2.6rem);
  border-left: 1px solid var(--trait);
}
.avis blockquote p {
  font-family: 'Shippori Mincho', serif; font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem);
  line-height: 1.5; margin-bottom: .8rem;
}
.avis blockquote footer { color: var(--doux); font-size: .92rem; }

@media (max-width: 700px) {
  .avis { grid-template-columns: 1fr; }
  .avis__note { display: flex; align-items: baseline; gap: 1rem; text-align: left; }
  .avis__chiffre { font-size: 3rem; }
  .avis blockquote { padding-left: 1.2rem; }
}

/* ---------- Venir ---------- */

.venir {
  max-width: var(--large); margin: 0 auto;
  padding: 0 var(--marge) var(--section);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.venir h2 { margin-bottom: 1.1rem; }
.venir__mots > p { color: var(--doux); max-width: 38ch; }
.fiche { margin: 0; display: grid; gap: 0; }
.fiche div { padding: 1.1rem 0; border-top: 1px solid var(--trait); }
.fiche div:last-child { border-bottom: 1px solid var(--trait); }
.fiche dt {
  font-size: .82rem; letter-spacing: .04em; color: var(--doux);
  font-weight: 600; margin-bottom: .35rem;
}
.fiche dd { margin: 0; }

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

/* ---------- Pied ---------- */

.pied {
  border-top: 1px solid var(--trait);
  padding: clamp(2.5rem, 5vw, 4rem) var(--marge);
  text-align: center;
}
.pied img { opacity: .9; margin-bottom: .8rem; }
.pied__nom { font-family: 'Shippori Mincho', serif; font-size: 1.3rem; margin-bottom: .5rem; }
.pied__infos { color: var(--doux); font-size: .95rem; }
.pied__citation {
  font-family: 'Shippori Mincho', serif; font-style: italic;
  color: var(--doux); max-width: 34ch; margin: 1.6rem auto;
}
.pied__mention {
  font-size: .8rem; color: var(--doux); opacity: .75; margin: 0;
  padding-top: 1.4rem; border-top: 1px solid var(--trait);
  max-width: 46ch; margin-inline: auto;
}

/* ---------- Naissances au défilement ---------- */

.js [data-nait] { opacity: 0; transform: translateY(14px); }
.js [data-nait].est-nee {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-nait] { opacity: 1; transform: none; transition: none; }
  .js [data-cercle] .disque__trait circle { transition: none; stroke-dashoffset: 0; }
  .soin:hover .disque img { transform: none; }
}