:root{

  /* MAIN IDENTITY */
  --color-primary:#9a6344;               /* brique chaude des arches */
  --color-primary-hover:#7d4d33;

  /* BACKGROUNDS */
  --color-bg:#ece7de;                    /* façade principale */
  --color-header-bg:#f5f1e8;
  --color-card-bg:#f8f5ef;

  /* ACCENTS */
  --color-accent:#c97852;                /* terre cuite/orange brique */
  --color-accent-light:#ddb89c;

  /* TEXT */
  --color-text:#3b312b;                  /* brun foncé chaud */
  --color-text-muted:#756960;

  /* STRUCTURE */
  --color-line:#d9cec0;

  /* BUILDING DETAILS */
  --color-window:#666a70;                /* gris fenêtres */
  --color-stone:#d2bfaa;                 /* pierre claire contour */
  --color-wood:#a37a56;                  /* entrée bois */
  --color-cream:#f3efe7;                 /* crépi lumineux */

  /* OPTIONAL ATMOSPHERE COLORS */
  --color-roof:#7d8288;                  /* gris toiture */
  --color-rain:#b7bcc2;                  /* ciel pluvieux */
  --color-tram:#e2b447;                  /* tram jaune subtil */

  /* UI */
  --radius:18px;
  --radius-sm:12px;
  --transition:.22s ease-out;

  /* TYPO */
  --font-sans:'Manrope',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-serif:Georgia,'Times New Roman',serif;

  /* LAYOUT */
  --max-width:1180px;

  /* SHADOWS */
  --shadow:0 22px 50px rgba(52,36,24,.10);
  --shadow-soft:0 12px 30px rgba(52,36,24,.08);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:var(--font-sans); background:linear-gradient(180deg,#f6f1e8 0%,#ece4d7 100%); color:var(--color-text); line-height:1.65; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button,select{ font:inherit; }

.container{ max-width:var(--max-width); margin:0 auto; padding:0 24px; }
.section{ padding:104px 0; }
.section-band-light{ background:#efe6da; }
.section-band-white{ background:#f8f3eb; }

h1,h2,h3,p{ margin:0; }
h1{ font-family:var(--font-serif); font-size:clamp(2.7rem,5vw,5rem); line-height:1.02; letter-spacing:-.035em; font-weight:500; }
h2{ font-family:var(--font-serif); font-size:clamp(2rem,3.3vw,3.4rem); line-height:1.12; letter-spacing:-.025em; font-weight:500; }
h3{ font-family:var(--font-serif); font-size:1.45rem; line-height:1.25; font-weight:500; }

.eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--color-primary); margin-bottom:1rem; }
.eyebrow::before{ content:""; width:34px; height:2px; background:var(--color-accent); border-radius:999px; }
.subtext,.section-intro,.company-card p,.feature-card p,.footer,.nav a,.mobile-link{ color:var(--color-text-muted); }
.section-heading{ max-width:780px; margin-bottom:2.4rem; }
.section-heading h2{ margin-bottom:1rem; }
.section-intro{ font-size:1.12rem; }
.paragraph-title{ font-size:.82rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--color-primary); margin-bottom:.9rem; }

.card{ background:rgba(248,243,235,.96); border:1px solid rgba(138,90,59,.12); border-radius:var(--radius); box-shadow:var(--shadow); }

/* HEADER */
.topbar{ position:sticky; top:0; z-index:1000; background:rgba(245,239,230,.92); backdrop-filter:saturate(150%) blur(16px); border-bottom:3px solid rgba(183,122,74,.45); }
.topbar-inner{ display:flex; align-items:center; gap:16px; min-height:78px; }
.brand{ display:flex; align-items:center; gap:12px; font-weight:800; white-space:nowrap; }
.brand-logo img{ display:block; height:42px; width:auto; }
.brand-text{ font-family:var(--font-serif); font-size:1.15rem; color:var(--color-text); }
.nav{ margin-left:auto; }
.nav ul{ list-style:none; display:flex; align-items:center; gap:8px; margin:0; padding:0; }
.nav a{ display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:999px; font-size:.95rem; font-weight:700; transition:background var(--transition),color var(--transition),transform var(--transition); }
.nav a:hover{ background:rgba(138,90,59,.08); color:var(--color-primary); }
.nav-cta{ background:var(--color-primary); color:#f5efe4!important; padding:10px 18px; box-shadow:0 12px 28px rgba(138,90,59,.23); }
.nav-cta:hover{ background:var(--color-primary-hover); transform:translateY(-1px); }
.topbar-right{ display:flex; align-items:center; }
.lang-select{ border:1px solid rgba(138,90,59,.22); background:#f8f3eb; border-radius:10px; padding:.42rem .55rem; color:var(--color-text); }
.lang-select:focus{ outline:none; box-shadow:0 0 0 3px rgba(183,122,74,.22); }

/* MOBILE MENU */
.burger{ display:none; width:42px; height:38px; margin-left:8px; border:1px solid rgba(138,90,59,.22); border-radius:12px; background:#f8f3eb; cursor:pointer; }
.burger span{ display:block; height:2px; margin:6px 10px; background:var(--color-text); }
.mobile-menu{ padding:12px 0 16px; border-top:1px solid rgba(138,90,59,.12); background:rgba(245,239,230,.98); }
.mobile-menu-inner{ display:grid; gap:8px; padding:0 24px; }
.mobile-link{ padding:12px 14px; border-radius:14px; font-weight:700; background:#f8f3eb; border:1px solid rgba(138,90,59,.12); transition:background var(--transition),color var(--transition),transform var(--transition); }
.mobile-link:hover{ background:rgba(138,90,59,.08); color:var(--color-primary); transform:translateY(-1px); }
.mobile-link-cta{ background:var(--color-primary); color:#f5efe4; }

/* HERO */
.section-hero{ position:relative; min-height:700px; padding:120px 0; display:flex; align-items:center; overflow:hidden; color:#f5efe4; background:#2d241d; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; filter:saturate(.95) contrast(1.04); }
.hero-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(38,28,20,.78),rgba(38,28,20,.45),rgba(38,28,20,.72)); }
.section-hero .container{ position:relative; z-index:2; }
.hero-grid{ display:block; text-align:center; max-width:980px; }
.hero-copy{ margin:0 auto; }
.hero-copy .eyebrow{ color:#d8b18b; }
.hero-copy .eyebrow::before{ background:#d8b18b; }
.hero-copy h1{ max-width:980px; margin:0 auto; text-shadow:0 3px 22px rgba(0,0,0,.35); }
.hero-copy h1::after{ content:""; display:block; width:120px; height:2px; margin:34px auto 0; background:rgba(216,177,139,.88); border-radius:999px; }
.hero-copy h3,.hero-copy .subtext{ text-shadow:0 2px 14px rgba(0,0,0,.35); }
.hero-copy .subtext{ max-width:840px; margin:0 auto 38px; color:rgba(245,239,228,.94); font-size:1.28rem; line-height:1.5; font-weight:500; }
.hero-proof{ margin:4rem 0 4.4rem; display:flex; flex-wrap:wrap; justify-content:center; gap:30px; }
.hero-proof span{ display:flex; align-items:center; gap:10px; color:rgba(245,239,228,.9); font-size:.95rem; font-weight:700; }
.hero-proof span::before{ content:""; width:8px; height:8px; border-radius:50%; background:#d8b18b; box-shadow:0 0 16px rgba(216,177,139,.75); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* BUTTONS */
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border-radius:999px; font-weight:800; transition:transform var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition); border:1px solid transparent; }
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--color-primary); color:#f5efe4; box-shadow:0 13px 28px rgba(138,90,59,.24); }
.btn-primary:hover{ background:var(--color-primary-hover); }
.btn-secondary{ background:#f8f3eb; color:var(--color-text); border-color:rgba(138,90,59,.18); }
.btn-secondary:hover{ border-color:rgba(138,90,59,.36); background:#f5efe4; color:var(--color-primary); }
.section-hero .btn-primary{ background:#d4b08a; color:#2d241d; box-shadow:0 14px 34px rgba(0,0,0,.28); }
.section-hero .btn-primary:hover{ background:#e0c09d; }
.section-hero .btn-secondary{ background:rgba(245,239,228,.08); border-color:rgba(245,239,228,.34); color:#f5efe4; }
.section-hero .btn-secondary:hover{ background:rgba(245,239,228,.18); }

/* CARDS / GRIDS */
.features-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.feature-card{ padding:30px 24px; min-height:240px; transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition); }
.feature-card:hover{ transform:translateY(-4px); box-shadow:0 24px 46px rgba(60,40,24,.14); border-color:rgba(183,122,74,.38); }
.feature-card h3{ margin-bottom:.85rem; color:var(--color-text); }
.feature-icon{ width:92px; height:92px; margin-bottom:1rem; display:flex; align-items:center; justify-content:flex-start; background:transparent; border:none; box-shadow:none; padding:0; }

.feature-icon img{ width:92px; height:92px; object-fit:contain; display:block; }
.company-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.company-card{ padding:30px; min-height:100%; }

/* NEWS / BANNER */
#news .card{ background:linear-gradient(135deg,rgba(248,243,235,.96),rgba(231,214,193,.96)); border-color:rgba(183,122,74,.28); }
#news h2{ margin-bottom:.8rem; }

/* MUSEUM SLIDER */
.museum-slider{ position:relative; margin-top:56px; border-radius:22px; overflow:hidden; box-shadow:0 24px 60px rgba(60,40,24,.18); }
.museum-slider-track{ position:relative; height:520px; }
.museum-slide{ position:absolute; inset:0; opacity:0; transition:opacity .8s ease; }
.museum-slide.active{ opacity:1; z-index:2; }
.museum-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.museum-slider::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(38,28,20,.30),transparent 45%); pointer-events:none; z-index:3; }
.museum-slider-btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:52px; height:52px; border:none; border-radius:50%; background:rgba(245,239,228,.22); backdrop-filter:blur(8px); color:#fff; font-size:22px; cursor:pointer; transition:.2s ease; }
.museum-slider-btn:hover{ background:rgba(245,239,228,.36); }
.museum-slider-btn.prev{ left:18px; }
.museum-slider-btn.next{ right:18px; }

#news .section-intro{ position:relative; padding-left:22px; }
#news .section-intro::before{ content:"•"; position:absolute; left:0; top:0; color:var(--color-accent); font-size:1.2rem; line-height:1.2; }

/* TEMPORARY EXHIBITION / PROJECT STYLE */
.projects-list{ display:grid; grid-template-columns:1fr; gap:1.2rem; width:100%; }
.project-item{ width:100%; padding:1.8rem; border:1px solid rgba(138,90,59,.13); border-radius:var(--radius); background:#f8f3eb; transition:all .25s ease; box-shadow:var(--shadow-soft); }
.project-item:hover{ transform:translateY(-4px); border-color:rgba(183,122,74,.42); box-shadow:0 20px 42px rgba(60,40,24,.14); }
.project-item h3{ color:var(--color-text); }
.project-details{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:1.4rem; }
.project-item:hover .project-details{ max-height:520px; opacity:1; margin-top:1.4rem; }
.project-detail-block{ display:grid; grid-template-columns:46px 1fr; gap:14px; align-items:start; color:var(--color-text-muted); }
.project-detail-icon{ width:46px; height:46px; border-radius:14px; background:linear-gradient(180deg,#f6efe5,#e7d6c1); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-soft); border:1px solid rgba(138,90,59,.10); }
.project-detail-icon img{ width:28px; height:28px; object-fit:contain; }
.project-detail-title{ font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--color-primary); line-height:1.2; margin-bottom:6px; }


/* EXHIBITION HERO  */
.exhibition-hero .hero-grid{display:grid;grid-template-columns:1fr 340px;gap:60px;align-items:center;max-width:1200px;text-align:left;}
.exhibition-hero .hero-overlay{ background:rgba(0,0,0,.75);}
.exhibition-hero .hero-copy{margin:0;}
.exhibition-hero .hero-copy h1{margin:0;}
.exhibition-hero .hero-copy h1::after{margin:34px 0 0;}
.exhibition-hero .hero-proof,.exhibition-hero .hero-actions{justify-content:flex-start;}
.hero-side-image{width:100%;}
.hero-side-image img{width:100%;aspect-ratio:210/297;object-fit:cover;border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.15);}
@media(max-width:940px){
.exhibition-hero .hero-grid{grid-template-columns:1fr;text-align:center;}
.exhibition-hero .hero-copy h1::after{margin:34px auto 0;}
.exhibition-hero .hero-proof,.exhibition-hero .hero-actions{justify-content:center;}
.hero-side-image{max-width:320px;margin:0 auto;}
}


/* VISIT SECTION */
#visit .company-card{ background:#f8f3eb; }
#visit strong{ color:var(--color-primary); }

/* FOOTER */
footer{ background:#352b24; color:#f5efe4; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:28px 24px; }
.footer-links{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.footer-links a{ color:#f5efe4; }
.footer-links a:hover{ color:#d8b18b; }

/* ACCESSIBILITY */
.visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* RESPONSIVE */
@media(max-width:1040px){
  .features-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .company-grid{ grid-template-columns:1fr; }
  .project-details{ grid-template-columns:1fr; }
  .project-item:hover .project-details{ max-height:900px; }
}

@media(max-width:940px){
  .nav{ display:none; }
  .burger{ display:block; }
  .topbar-right{ margin-left:auto; }
  .section{ padding:86px 0; }
}

@media(max-width:768px){
  .museum-slider-track{ height:320px; }
  .museum-slider-btn{ width:42px; height:42px; font-size:18px; }
}

@media(max-width:640px){
  .container{ padding:0 18px; }
  .topbar-inner{ min-height:72px; }
  .brand-text{ display:none; }
  .brand-logo img{ height:36px; }
  .section-hero{ min-height:600px; padding:110px 0 90px; }
  .hero-copy .subtext{ font-size:1.08rem; line-height:1.48; }
  .hero-proof{ gap:14px; margin:3rem 0; }
  .hero-proof span{ width:100%; justify-content:center; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .btn{ width:100%; }
  .features-grid{ grid-template-columns:1fr; }
  .feature-card,.company-card,.project-item{ padding:22px; }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
}