:root{
    --noir: #0a0908;
    --noir-2: #100e0b;
    --or: #b7924f;
    --or-soft: #8f7440;
    --ivoire: #ece6d8;
    --ivoire-dim: #ece6d8b3;
    --ligne: #2a2620;
  }

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

  html{ scroll-behavior:smooth; }

  body{
    background:var(--noir);
    color:var(--ivoire);
    font-family:'IBM Plex Sans', sans-serif;
    font-weight:300;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }

  .serif{ font-family:'Fraunces', serif; }

  a{ color:inherit; }

  .wrap{
    max-width:720px;
    margin:0 auto;
    padding:0 28px;
  }

  /* ---------- Hero ---------- */

  .hero{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:80px 28px;
    position:relative;
  }

  .crest{
    width:min(80vw, 320px);
    height:auto;
    margin-bottom:20px;
  }

  .wordmark{
    font-size:clamp(2.1rem, 6vw, 3.2rem);
    font-weight:400;
    letter-spacing:0.04em;
    color:var(--ivoire);
  }

  .kicker{
    margin-top:18px;
    font-family:'IBM Plex Sans', sans-serif;
    font-size:0.78rem;
    letter-spacing:0.16em;
    line-height:1.9;
    text-align:center;
    color:var(--or);
    font-weight:400;
  }

  .hero-rule{
    width:1px;
    height:52px;
    background:var(--ligne);
    margin-top:46px;
  }

  /* ---------- Rideau d'ouverture ---------- */

  .curtain{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    pointer-events:none;
  }

  .curtain-panel{
    width:50%;
    height:100%;
    position:relative;
    background:
      repeating-linear-gradient(
        90deg,
        #0d0a06 0px, #0d0a06 18px,
        #050402 18px, #050402 36px
      );
    animation-duration:1.5s;
    animation-timing-function:cubic-bezier(0.76,0,0.24,1);
    animation-delay:0.5s;
    animation-fill-mode:forwards;
  }

  .curtain-panel::after{
    content:"";
    position:absolute;
    top:0; bottom:0;
    width:6px;
    background:linear-gradient(180deg, var(--or) 0%, var(--or-soft) 50%, var(--or) 100%);
    box-shadow:0 0 18px 1px rgba(183,146,79,0.55);
  }

  .curtain-left{ left:0; }
  .curtain-left::after{ right:0; }

  .curtain-right{ right:0; }
  .curtain-right::after{ left:0; }

  @keyframes curtain-open-left{
    to{ transform:translateX(-100%); }
  }
  @keyframes curtain-open-right{
    to{ transform:translateX(100%); }
  }

  .curtain-left{ animation-name:curtain-open-left; }
  .curtain-right{ animation-name:curtain-open-right; }

  body.curtain-done .curtain{ display:none; }

  body:not(.curtain-done):not(.page){ overflow:hidden; }

  @media (prefers-reduced-motion: reduce){
    .curtain{ display:none; }
  }

  /* ---------- Navigation ---------- */

  .nav{
    position:fixed;
    top:0; left:0; right:0;
    z-index:500;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 28px;
    background:rgba(10,9,8,0.72);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--ligne);
    opacity:0;
    transform:translateY(-8px);
    transition:opacity 0.8s ease, transform 0.8s ease;
    pointer-events:none;
  }

  body.curtain-done .nav{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }

  .nav-mark{
    display:flex;
    align-items:center;
    text-decoration:none;
  }

  .nav-logo{
    height:26px;
    width:auto;
    display:block;
  }

  .nav-links{
    display:flex;
    gap:18px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .nav-links::-webkit-scrollbar{ display:none; }

  .nav-links a{
    font-size:0.72rem;
    letter-spacing:0.06em;
    color:var(--ivoire-dim);
    text-decoration:none;
    white-space:nowrap;
    transition:color 0.2s ease;
  }

  .nav-links a:hover{ color:var(--or); }

  /* ---------- Repères ---------- */

  .reperes{
    padding:0;
    border-top:none;
  }

  .reperes-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:36px;
    padding:56px 0;
  }

  .repere-item{
    text-align:center;
  }

  .repere-num{
    font-family:'Fraunces', serif;
    font-size:2.1rem;
    color:var(--or);
    font-weight:400;
  }

  .repere-label{
    margin-top:8px;
    font-size:0.78rem;
    letter-spacing:0.06em;
    color:var(--ivoire-dim);
  }

  @media (min-width:600px){
    .reperes-grid{
      grid-template-columns:1fr 1fr 1fr;
    }
  }

  /* ---------- Citation ---------- */

  .citation{
    text-align:center;
    padding:88px 0;
  }

  .citation blockquote{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:300;
    font-size:clamp(1.3rem, 3.6vw, 1.9rem);
    line-height:1.55;
    color:var(--ivoire);
    max-width:22ch;
    margin:0 auto;
  }

  .citation-mark{
    color:var(--or);
    font-size:1.4rem;
    display:block;
    margin-bottom:18px;
  }

  /* ---------- Fondatrice ---------- */

  .fondatrice-block{
    margin-top:32px;
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  .fondatrice-nom{
    font-family:'Fraunces', serif;
    font-size:1.5rem;
    color:var(--ivoire);
  }

  .fondatrice-titre{
    font-size:0.8rem;
    letter-spacing:0.1em;
    color:var(--or);
    margin-top:-10px;
  }

  section{
    padding:112px 0;
    border-top:1px solid var(--ligne);
  }

  .eyebrow{
    font-size:0.7rem;
    letter-spacing:0.22em;
    color:var(--or-soft);
    margin-bottom:18px;
    padding-bottom:16px;
    position:relative;
  }

  .eyebrow::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:32px;
    height:1px;
    background:var(--or);
  }

  h2{
    font-family:'Fraunces', serif;
    font-weight:400;
    font-size:clamp(1.6rem, 3.6vw, 2.15rem);
    line-height:1.28;
    letter-spacing:0.01em;
    color:var(--ivoire);
    max-width:16ch;
  }

  .lede{
    font-family:'Fraunces', serif;
    font-weight:300;
    font-style:italic;
    font-size:clamp(1.15rem, 2.4vw, 1.4rem);
    line-height:1.6;
    color:var(--ivoire);
    max-width:34ch;
    margin-top:28px;
  }

  p{
    font-size:1rem;
    color:var(--ivoire-dim);
    max-width:56ch;
    text-align:justify;
    text-justify:inter-word;
    hyphens:auto;
  }

  p + p{ margin-top:18px; }

  .definition p{ margin-top:26px; }

  /* Univers */

  .univers-list{
    margin-top:48px;
    display:flex;
    flex-direction:column;
  }

  .univers-item{
    display:grid;
    grid-template-columns:44px 1fr;
    gap:6px;
    padding:28px 0;
    border-top:1px solid var(--ligne);
  }

  .univers-item:last-child{ border-bottom:1px solid var(--ligne); }

  .univers-index{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:0.95rem;
    color:var(--or-soft);
    padding-top:2px;
  }

  .univers-body{ }

  .univers-name{
    font-family:'Fraunces', serif;
    font-size:1.1rem;
    font-weight:400;
    color:var(--ivoire);
    line-height:1.3;
  }

  .univers-desc{
    margin-top:6px;
    font-size:0.92rem;
    color:var(--ivoire-dim);
    max-width:48ch;
    text-align:justify;
    hyphens:auto;
  }

  /* Chef d'orchestre */

  .acteurs{
    margin-top:28px;
    font-size:0.92rem;
    color:var(--ivoire-dim);
    line-height:2.1;
    text-align:left;
  }

  /* Contact */

  .contact h2{ max-width:none; }

  .contact-lede{
    margin-top:20px;
    max-width:36ch;
  }

  .contact-grid{
    margin-top:52px;
    display:grid;
    grid-template-columns:1fr;
    border-top:1px solid var(--ligne);
  }

  .contact-field{
    padding:22px 0;
    border-bottom:1px solid var(--ligne);
  }

  .contact-label{
    font-size:0.68rem;
    letter-spacing:0.16em;
    color:var(--or-soft);
  }

  .contact-value{
    display:block;
    margin-top:8px;
    font-family:'Fraunces', serif;
    font-size:1.25rem;
    color:var(--ivoire);
    text-decoration:none;
    border-bottom:1px solid transparent;
    transition:border-color 0.2s ease, color 0.2s ease;
    width:fit-content;
  }

  a.contact-value:hover{
    color:var(--or);
    border-color:var(--or);
  }

  @media (min-width:600px){
    .contact-grid{
      grid-template-columns:1fr 1fr;
    }
    .contact-field{
      padding:26px 40px 26px 0;
    }
    .contact-field:nth-child(2n){
      padding-left:40px;
    }
  }

  footer{
    padding:48px 0 64px;
    border-top:1px solid var(--ligne);
    text-align:center;
  }

  .footer-mark{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:0.85rem;
    color:var(--ivoire-dim);
    letter-spacing:0.02em;
  }

  @media (min-width:600px){
    .univers-item{
      grid-template-columns:64px 1fr;
    }
    .univers-name{ font-size:1.2rem; }
  }

  /* ---------- Pages intérieures (non-accueil) ---------- */

  .page-header{
    padding:160px 0 64px;
    text-align:center;
  }

  .page-eyebrow{
    font-size:0.7rem;
    letter-spacing:0.22em;
    color:var(--or-soft);
    margin-bottom:16px;
  }

  .page-title{
    font-family:'Fraunces', serif;
    font-weight:400;
    font-size:clamp(2rem, 5vw, 2.8rem);
    color:var(--ivoire);
  }

  .page-lede{
    margin:20px auto 0;
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:300;
    font-size:clamp(1.05rem, 2.2vw, 1.25rem);
    color:var(--ivoire-dim);
    max-width:32ch;
    line-height:1.6;
  }

  /* ---------- Bascule de langue ---------- */

  .lang-toggle{
    display:flex;
    gap:4px;
    font-size:0.7rem;
    letter-spacing:0.06em;
  }

  .lang-toggle a{
    padding:2px 6px;
    text-decoration:none;
    color:var(--ivoire-dim);
    transition:color 0.2s ease;
  }

  .lang-toggle a.active{
    color:var(--or);
  }

  .lang-toggle a:hover{ color:var(--or); }

  .lang-sep{ color:var(--ligne); }

  /* ---------- Cartes de navigation (accueil) ---------- */

  .nav-cards{
    margin-top:48px;
    display:grid;
    grid-template-columns:1fr;
    gap:1px;
    background:var(--ligne);
  }

  .nav-card{
    display:block;
    background:var(--noir);
    padding:32px 28px;
    text-decoration:none;
    transition:background 0.2s ease;
  }

  .nav-card:hover{ background:var(--noir-2); }

  .nav-card-label{
    font-size:0.68rem;
    letter-spacing:0.16em;
    color:var(--or-soft);
  }

  .nav-card-title{
    margin-top:10px;
    font-family:'Fraunces', serif;
    font-size:1.3rem;
    color:var(--ivoire);
  }

  .nav-card-desc{
    margin-top:8px;
    font-size:0.88rem;
    color:var(--ivoire-dim);
    max-width:48ch;
  }

  .nav-card-arrow{
    margin-top:16px;
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:0.85rem;
    color:var(--or);
  }

  @media (min-width:640px){
    .nav-cards{ grid-template-columns:1fr 1fr; }
  }

  /* ---------- Placeholder photographique (en attente de photos définitives) ---------- */

  .photo-slot{
    margin-top:40px;
    aspect-ratio:16/10;
    background:linear-gradient(135deg, var(--noir-2) 0%, var(--noir) 100%);
    border:1px solid var(--ligne);
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .photo-slot-label{
    font-size:0.7rem;
    letter-spacing:0.1em;
    color:var(--ligne);
    text-align:center;
    padding:0 20px;
  }

  /* Nav toujours visible sur les pages intérieures (pas de rideau) */
  body.page .nav{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }