:root { --fond: #121212; --fond2: #1b1b1b; --texte: #ece8e1; --gris: #a39e94; --or: #c9a96e; --ligne: #2c2c2c; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
       font-size: 17px; line-height: 1.65; }
h1, h2, h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; line-height: 1.15; letter-spacing: .01em; }
a { color: var(--or); }
.entete { position: sticky; top: 0; z-index: 20; background: rgba(18, 18, 18, .92); backdrop-filter: blur(6px);
          border-bottom: 1px solid var(--ligne); }
.barre { max-width: 1200px; margin: auto; display: flex; align-items: center; gap: 18px; padding: 12px 16px; flex-wrap: wrap; }
.marque { color: var(--texte); text-decoration: none; font-family: "Cormorant Garamond", serif; font-size: 26px;
          margin-right: auto; letter-spacing: .08em; }
.marque span { color: var(--or); }
nav a { color: var(--texte); text-decoration: none; margin: 0 8px; font-size: 15px; opacity: .85; }
nav a:hover, nav a.actif { color: var(--or); opacity: 1; }
.langues a { color: var(--gris); text-decoration: none; font-size: 13px; margin-left: 6px; }
.langues a.actif { color: var(--or); }
.hero { min-height: 82vh; display: flex; align-items: flex-end; background: #000 center / cover no-repeat; position: relative; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.8)); }
.hero .contenu { position: relative; z-index: 1; max-width: 1200px; margin: auto; width: 100%; padding: 60px 16px 70px; }
.hero h1 { font-size: clamp(38px, 6vw, 72px); margin: 0 0 10px; }
.hero p { font-size: 20px; color: #ddd; max-width: 640px; margin: 0 0 26px; }
.bouton { display: inline-block; padding: 12px 24px; border: 1px solid var(--or); color: var(--or); text-decoration: none;
          letter-spacing: .06em; text-transform: uppercase; font-size: 14px; margin: 0 10px 10px 0; background: none;
          cursor: pointer; font-family: inherit; }
.bouton.plein { background: var(--or); color: #111; }
section { max-width: 1200px; margin: auto; padding: 70px 16px; }
section h2 { font-size: 42px; margin: 0 0 18px; }
.intro { color: var(--gris); max-width: 760px; }
.deux { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.photo-cadre { aspect-ratio: 4 / 5; background: var(--fond2) center / cover no-repeat; }
.chrono { border-left: 1px solid var(--or); margin-left: 8px; padding-left: 26px; }
.chrono div { margin-bottom: 22px; position: relative; }
.chrono div::before { content: ""; position: absolute; left: -31px; top: 9px; width: 9px; height: 9px; border-radius: 50%;
                      background: var(--or); }
.chrono strong { font-family: "Cormorant Garamond", serif; font-size: 24px; color: var(--or); display: block; }
.tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tuile { position: relative; aspect-ratio: 4 / 3; background: var(--fond2) center / cover no-repeat; display: flex;
         align-items: flex-end; text-decoration: none; color: #fff; overflow: hidden; }
.tuile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.75)); }
.tuile span { position: relative; z-index: 1; padding: 16px 18px; font-family: "Cormorant Garamond", serif; font-size: 28px; }
.tuile:hover { outline: 1px solid var(--or); }
.galerie { columns: 3 300px; column-gap: 12px; }
.galerie a { display: block; margin-bottom: 12px; break-inside: avoid; }
.galerie img { width: 100%; display: block; }
.vide { color: var(--gris); font-style: italic; padding: 40px 0; }
.groupe h3 { font-size: 30px; color: var(--or); margin: 40px 0 12px; border-bottom: 1px solid var(--ligne); padding-bottom: 6px; }
.appareil { display: grid; grid-template-columns: 280px 1fr; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--ligne); }
.appareil strong { font-size: 18px; } .appareil small { color: var(--gris); display: block; }
.carte-monde { height: 70vh; min-height: 420px; border: 1px solid var(--ligne); }
.leaflet-popup-content img { width: 220px; display: block; margin-bottom: 6px; }
.cours { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
.cours div { background: var(--fond2); padding: 24px; border-top: 2px solid var(--or); }
.cours h3 { font-size: 26px; margin: 0 0 8px; }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 820px; }
form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--gris); }
form .large { grid-column: 1 / -1; }
input, textarea, select { font: inherit; background: var(--fond2); color: var(--texte); border: 1px solid #3a3a3a; padding: 11px 12px; }
textarea { min-height: 150px; }
.piege { position: absolute; left: -9999px; }
.visionneuse { position: fixed; inset: 0; background: rgba(0,0,0,.95); display: none; z-index: 60; align-items: center; justify-content: center; }
.visionneuse.ouverte { display: flex; }
.visionneuse img { max-width: 94vw; max-height: 90vh; }
.visionneuse button { position: absolute; background: none; border: 0; color: #fff; font-size: 44px; cursor: pointer; padding: 12px 18px; }
.visionneuse .fermer { top: 6px; right: 10px; } .visionneuse .prec { left: 6px; } .visionneuse .suiv { right: 6px; }
footer { text-align: center; color: var(--gris); padding: 40px 16px 50px; font-size: 14px; border-top: 1px solid var(--ligne); }
@media (max-width: 820px) {
  .deux, .tuiles, .cours, form, .appareil { grid-template-columns: 1fr; }
  nav { width: 100%; order: 3; overflow-x: auto; white-space: nowrap; }
  section { padding: 50px 16px; }
}