/* Page « Notre histoire » (écrite à la main). Reprend la typographie et la palette
   de l'accueil : titres serrés, libellés en JetBrains Mono, pastels de la marque. */
.pg-main, main#contenu { display: block; }
main#contenu { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 44px); }
main#contenu h2 { margin: 0; font-size: clamp(30px, 3.6vw, 52px); font-weight: 500; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
main#contenu p { margin: 0; font-size: 17px; line-height: 1.6; color: #55524F; }
main#contenu strong { color: #222121; font-weight: 600; }
/* Rythme vertical : libellé → titre → paragraphes */
main#contenu .pg-label + h2 { margin-top: 18px; }
main#contenu h2 + p, main#contenu p + p { margin-top: 20px; }

/* En-tête : liens de navigation */
.h-nav { display: flex; align-items: center; gap: 6px; }
.h-nav a:not(.pg-back) { padding: 10px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: #55524F; text-decoration: none; transition: background-color .25s, color .25s; }
.h-nav a:not(.pg-back):hover, .h-nav a[aria-current] { color: #222121; background: #E6E3DE; }
@media (max-width: 720px) { .h-nav a:not(.pg-back) { display: none; } }

/* Ouverture */
.h-hero { padding: clamp(56px, 9vw, 130px) 0 clamp(56px, 8vw, 110px); max-width: 1000px; }
.h-hero h1 { margin: 20px 0 0; font-size: clamp(44px, 7vw, 108px); font-weight: 500; line-height: .98; letter-spacing: -.05em; text-wrap: balance; }
.h-accent { color: #7A6470; }
.h-lead { margin-top: 28px !important; max-width: 58ch; font-size: clamp(17px, 1.4vw, 20px) !important; }

/* Le nom : libellé à gauche, texte à droite, comme les sections de l'accueil */
.h-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 24px clamp(24px, 5vw, 80px); padding: clamp(40px, 6vw, 80px) 0; border-top: 1px solid #DAD7D2; }
.h-split-label { padding-top: .6em; }
.h-split-body p { margin-top: 20px; max-width: 62ch; }

/* La fondatrice : portrait (fixe au défilement sur grand écran) et parcours */
.h-founder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 88px); align-items: start; padding: clamp(48px, 7vw, 100px) 0; border-top: 1px solid #DAD7D2; }
.h-portrait { position: sticky; top: 96px; margin: 0; overflow: hidden; border-radius: 28px; background: #FFFFFF; aspect-ratio: 4 / 5; }
.h-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.h-founder-text h2 { font-size: clamp(36px, 4.4vw, 64px) !important; }
main#contenu .h-role { margin-top: 10px; font: 500 13px/1.4 'JetBrains Mono', monospace; letter-spacing: .04em; text-transform: uppercase; color: #7A6470; }
main#contenu .h-role + p { margin-top: 28px; }
.h-founder-text p { max-width: 58ch; }
.h-founder-text .h-diploma { margin-top: 36px; max-width: 460px; }
.h-diploma {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px;
  padding: clamp(28px, 3vw, 40px); border-radius: 28px; background: #222121; color: #F3F2EF;
}
.h-diploma::before { /* anneaux de signal de la balise */
  content: ''; position: absolute; right: -70px; top: -70px; width: 240px; height: 240px; border-radius: 50%;
  border: 1.5px solid rgba(189, 175, 182, .35); box-shadow: 0 0 0 40px rgba(189, 175, 182, .06), 0 0 0 80px rgba(189, 175, 182, .04);
}
.h-diploma-tag { font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #BDAFB6; }
.h-diploma-grade { margin-top: 18px; font-size: clamp(64px, 6vw, 88px); font-weight: 600; line-height: .9; letter-spacing: -.06em; }
.h-diploma-title { font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.h-diploma-spec { margin-top: 14px; display: inline-block; align-self: flex-start; padding: 7px 12px; border-radius: 999px; background: #BDAFB6; color: #222121; font-size: 13.5px; font-weight: 600; }
.h-diploma-school { margin-top: 18px; font-size: 17px; font-weight: 600; }
.h-diploma-note { font-size: 13px; line-height: 1.45; color: #A19D98; }

/* Expertise */
.h-expertise { padding: clamp(48px, 7vw, 100px) 0; border-top: 1px solid #DAD7D2; }
.h-section-head { display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.h-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.h-card { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.4vw, 34px); border-radius: 26px; min-height: 320px; }
.h-card--lavande { background: #D6D7E4; }
.h-card--sauge { background: #DFE1CF; }
.h-card--rose { background: #E3D8DC; }
.h-card-num { font: 500 12px/1 'JetBrains Mono', monospace; letter-spacing: .06em; color: #55524F; }
.h-card h3 { margin: auto 0 0; padding-top: 32px; font-size: clamp(21px, 1.8vw, 26px); font-weight: 500; line-height: 1.12; letter-spacing: -.025em; }
.h-card p { font-size: 15.5px !important; color: #3A3836 !important; }

/* Appel à l'action */
.h-cta { margin: clamp(24px, 4vw, 60px) 0 clamp(64px, 8vw, 110px); padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 80px); border-radius: clamp(24px, 3vw, 40px); background: #222121; color: #F3F2EF; }
.h-cta h2 { font-size: clamp(40px, 6vw, 92px) !important; letter-spacing: -.05em !important; }
.h-cta p { margin-top: 20px !important; max-width: 48ch; color: #D6D3CE !important; }
.h-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 32px; }
.h-btn { display: inline-flex; align-items: center; height: 54px; padding: 0 26px; border-radius: 999px; background: #F3F2EF; color: #222121; font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color .25s, scale .2s; }
.h-btn:hover { background: #FFFFFF; }
.h-btn:active { scale: .97; }
.h-link { color: #F3F2EF; font-size: 17px; font-weight: 500; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s; }
.h-link:hover { background-size: 100% 1px; }

/* Apparition au défilement (assets/js/page.js) */
.js-motion .rv { opacity: 0; translate: 0 18px; transition: opacity .9s cubic-bezier(.2, .7, .2, 1), translate .9s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0ms); }
.js-motion .rv.in { opacity: 1; translate: 0 0; }

/* Tablette et mobile */
@media (max-width: 960px) {
  .h-cards { grid-template-columns: 1fr; }
  .h-card { min-height: 0; }
  .h-card h3 { padding-top: 12px; }
}
@media (max-width: 720px) {
  .h-split, .h-founder { grid-template-columns: 1fr; }
  .h-split-label { padding-top: 0; }
  .h-portrait { position: static; max-width: 440px; }
}