:root {
    --anthracite: #3D3B3C;
    --or: #A5976F;
    --or-fonce: #8C7E58;
    --bronze: #6D6550;
    --beige: #BAAE86;
    --travail: #F8E7A2;
    --securite: #A8CBDF;
    --gutter: 72px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  section { scroll-margin-top: 80px; }
  body { font-family: 'Josefin Sans', sans-serif; color: var(--anthracite); background: #fff; -webkit-font-smoothing: antialiased; }
  img { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  .serif { font-family: 'Fraunces', serif; }
  .caps { text-transform: uppercase; letter-spacing: .22em; font-weight: 600; font-size: 14px; }

  /* Header */
  header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 24px var(--gutter); background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid #E6E1D3; }
  header .logo img { width: 120px; height: auto; }
  header nav { display: flex; align-items: center; gap: 40px; }
  header nav a, header nav span { font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 4px 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
  header nav a:hover, header nav a.active { color: var(--or-fonce); border-color: var(--or); }
  header nav .lang { font-weight: 400; color: var(--bronze); padding-left: 24px; border-left: 1px solid #D6CFBC; border-bottom: none; }
  .burger { display: none; background: none; border: 0; width: 32px; height: 24px; position: relative; cursor: pointer; }
  .burger span { position: absolute; left: 0; right: 0; height: 1.5px; background: var(--anthracite); transition: transform .25s, opacity .25s; }
  .burger span:nth-child(1) { top: 4px; } .burger span:nth-child(2) { top: 11px; } .burger span:nth-child(3) { top: 18px; }
  .menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-open .burger span:nth-child(2) { opacity: 0; }
  .menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Hero */
  .hero { position: relative; height: 760px; overflow: hidden; background: var(--bronze); }
  .hero .photo { position: absolute; top: 0; right: 0; width: 74%; height: 100%; object-fit: cover; }
  .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #6D6550 0%, #6D6550 26%, rgba(109,101,80,.55) 50%, rgba(109,101,80,0) 78%); }
  .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; z-index: 1; background: linear-gradient(0deg, rgba(61,59,60,.45), rgba(61,59,60,0)); }
  .frame { position: absolute; z-index: 2; left: var(--gutter); top: 80px; width: 600px; height: 600px; color: #fff; }
  .frame svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .frame svg path { stroke-dasharray: 2200; stroke-dashoffset: 2200; animation: draw 2.2s .2s cubic-bezier(.6,0,.2,1) forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  .frame .L { position: absolute; left: -14px; top: 540px; font-family: 'Fraunces', serif; font-weight: 300; font-size: 76px; line-height: 76px; }
  .hero-content { position: absolute; left: 64px; top: 112px; width: 500px; display: flex; flex-direction: column; gap: 32px; }
  .hero-content .caps { color: #F3EEDF; line-height: 24px; }
  .rule { width: 64px; height: 1.5px; background: #E6D9AE; }
  .hero h1 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 76px; line-height: 80px; letter-spacing: -.02em; }
  .hero p { font-size: 18px; line-height: 26px; color: #F3EEDF; max-width: 420px; }
  .fade-up { opacity: 0; transform: translateY(16px); animation: fadeUp .9s cubic-bezier(.2,.7,.2,1) forwards; }
  .d1 { animation-delay: .5s; } .d2 { animation-delay: .7s; } .d3 { animation-delay: .9s; } .d4 { animation-delay: 1.1s; }
  @keyframes fadeUp { to { opacity: 1; transform: none; } }

  /* Enjeux */
  .enjeux { display: flex; align-items: center; justify-content: space-between; gap: 96px; padding: 140px var(--gutter) 140px 140px; }
  .enjeux .textes { display: flex; flex-direction: column; gap: 56px; max-width: 720px; }
  .bloc { display: flex; flex-direction: column; gap: 20px; }
  .bloc h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 64px; line-height: 68px; letter-spacing: -.02em; }
  .bloc p { font-size: 20px; line-height: 29px; max-width: 600px; }
  .indent { padding-left: 120px; }
  .amp { display: flex; align-items: center; gap: 24px; }
  .amp span { font-family: 'Fraunces', serif; font-style: italic; font-weight: 300; font-size: 120px; line-height: 110px; color: var(--or); }
  .amp i { width: 160px; height: 1px; background: #CFC6AC; }
  .enjeux .themis { width: 400px; flex-shrink: 0; }

  /* Domaines */
  .domaines { padding: 120px var(--gutter) 140px; background: linear-gradient(180deg, #B1A276 0%, #7A7160 100%); color: #fff; }
  .domaines .titre { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 72px; }
  .domaines .titre > div { display: flex; flex-direction: column; gap: 20px; }
  .domaines h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 64px; line-height: 68px; letter-spacing: -.02em; }
  .domaines .titre p { font-size: 18px; line-height: 26px; max-width: 380px; padding-bottom: 6px; }
  .cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .carte { display: flex; flex-direction: column; gap: 40px; padding: 44px 40px 48px; border-bottom-right-radius: 72px; color: var(--anthracite); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
  .carte:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -24px rgba(40,36,28,.45); }
  .carte h3 { min-height: 102px; font-size: 30px; line-height: 34px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5E574A; }
  .carte img { height: 208px; width: auto; align-self: flex-start; opacity: .85; }
  .carte p { flex-grow: 1; font-size: 17px; line-height: 25px; }
  .carte .lien { display: inline-flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
  .carte .lien svg { transition: transform .25s; }
  .carte:hover .lien svg { transform: translateX(6px); }
  .travail { background: var(--travail); }
  .securite { background: var(--securite); }
  .securite h3 { color: #4A4C4E; }
  .dirigeant { background: #fff; }
  .dirigeant h3 { color: var(--or-fonce); }
  .dirigeant img { opacity: 1; }

  /* Footer */
  footer { display: flex; flex-direction: column; gap: 96px; padding: 112px var(--gutter) 40px; background: var(--anthracite); color: #fff; }
  .f-haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 64px; }
  .f-marque { display: flex; flex-direction: column; gap: 32px; }
  .f-marque img { width: 180px; }
  .f-marque .caps, .f-col .caps { color: var(--beige); line-height: 24px; }
  .f-cols { display: flex; gap: 96px; }
  .f-col { display: flex; flex-direction: column; gap: 16px; min-width: 160px; }
  .f-col .caps { font-size: 13px; }
  .f-col p, .f-col a { font-size: 17px; line-height: 25px; }
  .f-col a:hover { color: var(--beige); }
  .f-bas { display: flex; justify-content: space-between; padding-top: 28px; border-top: 1px solid #5A5754; font-size: 14px; letter-spacing: .08em; color: #BDB8AE; }
  .f-bas a:hover { color: #fff; }

  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .reveal, .fade-up { opacity: 1; transform: none; animation: none; transition: none; }
    .frame svg path { animation: none; stroke-dashoffset: 0; }
  }

  /* Responsive */
  @media (max-width: 1200px) {
    :root { --gutter: 48px; }
    header nav { gap: 24px; }
    header nav a, header nav span { font-size: 12px; }
    .enjeux { padding-left: var(--gutter); gap: 48px; }
    .enjeux .themis { width: 300px; }
    .cartes { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 1180px) {
    .burger { display: block; }
    header nav { position: fixed; inset: 73px 0 auto 0; flex-direction: column; align-items: flex-start; gap: 0; padding: 8px var(--gutter) 24px; background: #fff; border-bottom: 1px solid #E6E1D3; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
    .menu-open header nav { opacity: 1; transform: none; pointer-events: auto; }
    header nav a, header nav span { font-size: 14px; padding: 14px 0; width: 100%; border-bottom: 1px solid #F0ECE2; }
    header nav .lang { border-left: 0; padding-left: 0; }
  }
  @media (max-width: 760px) {
    :root { --gutter: 20px; }
    header { padding: 18px var(--gutter); }
    header .logo img { width: 96px; }
    header nav { inset: 61px 0 auto 0; }
    .hero { height: auto; min-height: 640px; padding: 56px var(--gutter) 72px; }
    .hero .photo { width: 100%; }
    .hero::before { background: linear-gradient(180deg, rgba(109,101,80,.35) 0%, rgba(109,101,80,.85) 55%, #6D6550 100%); }
    .frame { position: relative; left: 0; top: 0; width: 100%; height: auto; padding: 48px 28px 72px; }
    .frame svg { display: none; }
    .frame { border: 1.5px solid #fff; border-bottom-right-radius: 64px; border-bottom-left: 0; }
    .frame .L { top: auto; bottom: -26px; left: -10px; font-size: 56px; line-height: 56px; }
    .hero-content { position: static; width: auto; gap: 24px; }
    .hero h1 { font-size: 48px; line-height: 52px; }
    .hero p { font-size: 17px; line-height: 24px; }
    .hero-content .caps { font-size: 12px; letter-spacing: .18em; }
    .enjeux { flex-direction: column-reverse; align-items: flex-start; padding: 80px var(--gutter); gap: 40px; }
    .enjeux .themis { width: 200px; }
    .indent { padding-left: 0; }
    .bloc h2, .domaines h2 { font-size: 42px; line-height: 46px; }
    .bloc p { font-size: 18px; line-height: 26px; }
    .amp span { font-size: 88px; line-height: 80px; }
    .amp i { width: 96px; }
    .domaines { padding: 80px var(--gutter); }
    .domaines .titre { flex-direction: column; align-items: flex-start; margin-bottom: 40px; }
    .cartes { grid-template-columns: 1fr; gap: 20px; }
    .carte { padding: 36px 28px 40px; gap: 28px; }
    .carte h3 { min-height: 0; font-size: 24px; line-height: 28px; }
    .carte img { height: 168px; }
    footer { padding: 72px var(--gutter) 32px; gap: 56px; }
    .f-haut, .f-cols { flex-direction: column; gap: 40px; }
    .f-bas { flex-direction: column; gap: 8px; }
  }

  /* ---------- Pages intérieures ---------- */
  .intro { position: relative; display: flex; min-height: 520px; overflow: hidden; background: linear-gradient(180deg, #B1A276 0%, #7A7160 100%); color: #fff; }
  .intro .photo { position: absolute; right: 0; top: 0; width: 760px; max-width: 55%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%); mask-image: linear-gradient(90deg, transparent 0%, #000 40%); }
  .intro .frame { position: relative; left: 0; top: 0; z-index: 2; width: 640px; height: 400px; margin: 60px 0 60px var(--gutter); display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 0 64px; }
  .intro .frame .L { top: auto; bottom: -24px; font-size: 64px; line-height: 64px; }
  .intro h1 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 84px; line-height: 88px; letter-spacing: -.02em; }
  .intro p { font-size: 19px; line-height: 27px; max-width: 480px; }

  .valeurs { display: flex; flex-wrap: wrap; padding: 120px var(--gutter) 40px; }
  .valeur { display: flex; gap: 40px; width: 50%; padding: 0 64px 96px 0; }
  .valeur:nth-child(even) { padding: 0 0 96px 64px; }
  .picto { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; flex-shrink: 0; background: var(--anthracite); border-bottom-right-radius: 24px; }
  .picto img { width: 60px; height: 60px; }
  .valeur .corps { display: flex; flex-direction: column; gap: 20px; }
  .num { font-size: 13px; font-weight: 600; letter-spacing: .22em; color: var(--or-fonce); }
  .valeur h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 44px; line-height: 48px; letter-spacing: -.02em; }
  .valeur .chapo { font-size: 18px; line-height: 26px; }
  .valeur ul { list-style: none; display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid #E6E1D3; }
  .valeur li { font-size: 16px; line-height: 23px; color: #5E574A; }
  .valeur li::before { content: "— "; }

  .signature { display: flex; align-items: flex-start; gap: 72px; padding: 96px var(--gutter) 120px 140px; background: #F6F3EA; }
  .signature .guillemet { font-family: 'Fraunces', serif; font-style: italic; font-weight: 300; font-size: 160px; line-height: 120px; color: var(--or); flex-shrink: 0; }
  .signature blockquote { display: flex; flex-direction: column; gap: 28px; }
  .signature blockquote p { font-family: 'Fraunces', serif; font-weight: 300; font-size: 40px; line-height: 50px; letter-spacing: -.01em; max-width: 900px; }
  .signature cite { display: flex; align-items: center; gap: 20px; font-style: normal; text-transform: uppercase; letter-spacing: .22em; font-weight: 600; font-size: 14px; }
  .signature cite::before { content: ""; width: 48px; height: 1.5px; background: var(--or); }

  @media (max-width: 1200px) {
    .valeur, .valeur:nth-child(even) { padding: 0 24px 80px 0; gap: 28px; }
    .signature { padding-left: var(--gutter); }
  }
  @media (max-width: 760px) {
    .intro { min-height: 0; padding: 48px var(--gutter) 64px; }
    .intro .photo { display: none; }
    .intro .frame { width: 100%; height: auto; margin: 0; padding: 40px 24px 64px; border: 1.5px solid #fff; border-bottom-right-radius: 64px; }
    .intro .frame .L { bottom: -26px; left: -10px; font-size: 56px; line-height: 56px; }
    .intro h1 { font-size: 48px; line-height: 52px; }
    .intro p { font-size: 17px; line-height: 25px; }
    .valeurs { padding: 72px var(--gutter) 16px; }
    .valeur, .valeur:nth-child(even) { width: 100%; flex-direction: column; gap: 24px; padding: 0 0 64px; }
    .valeur h2 { font-size: 34px; line-height: 38px; }
    .signature { flex-direction: column; gap: 8px; padding: 64px var(--gutter) 72px; }
    .signature .guillemet { font-size: 96px; line-height: 72px; }
    .signature blockquote p { font-size: 28px; line-height: 36px; }
    .signature cite { font-size: 12px; }
  }

  /* ---------- Nos domaines ---------- */
  .sous-nav { position: sticky; top: 91px; z-index: 5; display: flex; background: #fff; border-bottom: 1px solid #E6E1D3; }
  .sous-nav a { flex: 1; display: flex; align-items: center; gap: 14px; padding: 22px var(--gutter); font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-right: 1px solid #E6E1D3; transition: background .2s; }
  .sous-nav a:last-child { border-right: 0; }
  .sous-nav a i { width: 14px; height: 14px; flex-shrink: 0; border-bottom-right-radius: 5px; }
  .sous-nav a:hover { background: #F6F3EA; }
  .domaine { display: flex; gap: 96px; padding: 120px var(--gutter); scroll-margin-top: 160px; }
  .domaine + .domaine { border-top: 1px solid #E6E1D3; }
  .domaine .gauche { position: sticky; top: 200px; align-self: flex-start; width: 440px; flex-shrink: 0; display: flex; flex-direction: column; gap: 28px; }
  .domaine .vignette { width: 100%; aspect-ratio: 1 / 0.86; display: flex; align-items: flex-end; padding: 32px; border-bottom-right-radius: 72px; }
  .domaine .vignette img { height: 78%; width: auto; }
  .domaine h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 52px; line-height: 56px; letter-spacing: -.02em; }
  .domaine .droite { flex: 1; display: flex; flex-direction: column; gap: 32px; }
  .domaine .accroche { font-family: 'Fraunces', serif; font-weight: 300; font-size: 30px; line-height: 40px; letter-spacing: -.01em; }
  .domaine .texte { font-size: 18px; line-height: 27px; }
  .domaine .texte strong { font-weight: 700; }
  .rubriques { display: flex; flex-direction: column; border-top: 1px solid #D6CFBC; margin-top: 16px; }
  .rubriques details { border-bottom: 1px solid #D6CFBC; }
  .rubriques summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; font-size: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .rubriques summary::-webkit-details-marker { display: none; }
  .rubriques summary::after { content: ""; width: 14px; height: 14px; flex-shrink: 0; border-right: 1.5px solid var(--or-fonce); border-bottom: 1.5px solid var(--or-fonce); transform: rotate(45deg) translate(-4px, -4px); transition: transform .3s; }
  .rubriques details[open] summary::after { transform: rotate(225deg) translate(-4px, -4px); }
  .rubriques summary:hover { color: var(--or-fonce); }
  .rubriques ul { list-style: none; columns: 2; column-gap: 48px; padding: 0 0 32px; }
  .rubriques li { break-inside: avoid; font-size: 16px; line-height: 23px; color: #5E574A; padding: 0 0 12px 22px; position: relative; }
  .rubriques li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 1.5px; background: var(--or); }
  header nav .lien-off, .lien-off { opacity: .4; cursor: default; pointer-events: none; }

  @media (max-width: 1200px) {
    .domaine { gap: 48px; }
    .domaine .gauche { width: 340px; }
  }
  @media (max-width: 1180px) { .sous-nav { top: 91px; } }
  @media (max-width: 760px) {
    .sous-nav { top: 61px; overflow-x: auto; }
    .sous-nav a { flex: 0 0 auto; padding: 16px 20px; font-size: 12px; }
    .domaine { flex-direction: column; gap: 32px; padding: 72px var(--gutter); scroll-margin-top: 120px; }
    .domaine .gauche { position: static; width: 100%; }
    .domaine h2 { font-size: 38px; line-height: 42px; }
    .domaine .accroche { font-size: 24px; line-height: 32px; }
    .domaine .texte { font-size: 17px; line-height: 25px; }
    .rubriques summary { font-size: 15px; padding: 20px 0; }
    .rubriques ul { columns: 1; }
  }